{"_id":"@drizm/ng-whiteboard","_rev":"8-def83e8c59b85b6a150a09de2a3987c1","name":"@drizm/ng-whiteboard","dist-tags":{"latest":"4.3.2"},"versions":{"4.0.2":{"name":"@drizm/ng-whiteboard","version":"4.0.2","author":{"name":"webfactory"},"license":"MIT","description":"A Canvas component for Angular which supports free drawing.","keywords":["angular2","angular","angular4","angular5","angular6","angular7","angular8","angular9","angular10","canvas","drawing","touch drawing","whiteboard","colorpicker","canvas colorpicker","free hand drawing","shape drawing","shapes","premade shapes","custom shapes","custom premade shapes"],"repository":{"type":"git","url":"git+https://github.com/drizm-team/ng2-canvas-whiteboard.git"},"peerDependencies":{"@angular/common":"^11.2.13","@angular/core":"^11.2.13","rxjs":"^6.5.5"},"dependencies":{"lodash-es":"4.17.15","tslib":"^2.0.0"},"main":"bundles/drizm-ng-whiteboard.umd.js","module":"fesm2015/drizm-ng-whiteboard.js","es2015":"fesm2015/drizm-ng-whiteboard.js","esm2015":"esm2015/drizm-ng-whiteboard.js","fesm2015":"fesm2015/drizm-ng-whiteboard.js","typings":"drizm-ng-whiteboard.d.ts","metadata":"drizm-ng-whiteboard.metadata.json","sideEffects":false,"bugs":{"url":"https://github.com/drizm-team/ng2-canvas-whiteboard/issues"},"homepage":"https://github.com/drizm-team/ng2-canvas-whiteboard#readme","_id":"@drizm/ng-whiteboard@4.0.2","_nodeVersion":"12.19.0","_npmVersion":"7.6.2","dist":{"integrity":"sha512-K9/vuQSmqu6M51H9hR4ihYNB7zoYXnJSG0SAhv05HfUXVFOti7wrxdWWB+eXH0pfYMmRiBUCnGx7GZcwkqjCTA==","shasum":"788bb02d5a0a7579fbfd4a711816b4b9fce4a315","tarball":"https://registry.npmjs.org/@drizm/ng-whiteboard/-/ng-whiteboard-4.0.2.tgz","fileCount":49,"unpackedSize":952786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnU7ECRA9TVsSAnZWagAAx4gP/2ZUYvA1gpeP3DxyZknN\n8jLIsNn6+ug/J4kDHzRomP3lcEbyMzd+2Vf7mlCYNixWcJsKz9oUO8e4rAwp\nh3R7lT7QKHeGEDQVsF+R/tsiT/m6NQCdR5VwFkTN0hy+RGaRoeFZx2PLcc9K\n1LjpVgGRIqFVoJxy3DF1XNGuXV0NmiIBlZ9UuFcspjPkFf2NxXOfyNGqa/Bu\nrkkthEZ4RShLP+EIQNnGNYqJdMGoDEarQerrmoQ1FCr0WVnr00x7ZtMLyYr0\nvaPFBQXlvs1hBldqV0U8tEWFc9nR7rKhczFgS9nBTw8R4vI9L7M+AR/l9cFC\n/iziDZ6m8IEK0V5FGx37zP3tkZsUW3fEvoJBjU49POiPP+xlAkfWZewN3XXL\n5hM4f0HdLfkHvlodVhj0ndYzTCewr1vcfMr22xarpeZXaiTxdxfuXH4Hvn3j\nqstITs9A01Y6sYaGLgrkjIOaKYUhZVUf4U9sI6CV/DSo3Kwd/5p/nwH+8vmH\nrs+5QgfoX9LLw9Nq5FgrutCNjEx7UG3jlJovuDxhJqI/sW1ZIGNIpX78VYwz\nSvaqGj/3lDwBcdnL3ehyQ/fGjoWpcCxcv6nA2QdCzoL3AU0EMy52Z0IXeAcd\ntOxSaCDCIzyT4HPdzDMV2jcI2QFozgnbqqmdut55V3NcuHf4jH4vpMy55Yat\niyM1\r\n=GJGl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDbD2nAApOQXHltvtucaIdkzBDxO//QbYZJ0U365QZxEwIhAK1S6BAEPIV8BB/2pBrGMGmxlO6DjikN0GuwcVssNENe"}]},"_npmUser":{"name":"dominik.lewandow","email":"dominik.lewandow@gmail.com"},"directories":{},"maintainers":[{"name":"dominik.lewandow","email":"dominik.lewandow@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-whiteboard_4.0.2_1620922051821_0.09872333963232216"},"_hasShrinkwrap":false},"4.0.3":{"name":"@drizm/ng-whiteboard","version":"4.0.3","author":{"name":"webfactory"},"license":"MIT","description":"A Canvas component for Angular which supports free drawing.","keywords":["angular2","angular","angular4","angular5","angular6","angular7","angular8","angular9","angular10","canvas","drawing","touch drawing","whiteboard","colorpicker","canvas colorpicker","free hand drawing","shape drawing","shapes","premade shapes","custom shapes","custom premade shapes"],"repository":{"type":"git","url":"git+https://github.com/drizm-team/ng2-canvas-whiteboard.git"},"peerDependencies":{"@angular/common":"^11.2.13","@angular/core":"^11.2.13","rxjs":"^6.5.5"},"dependencies":{"lodash-es":"4.17.15","tslib":"^2.0.0"},"main":"bundles/drizm-ng-whiteboard.umd.js","module":"fesm2015/drizm-ng-whiteboard.js","es2015":"fesm2015/drizm-ng-whiteboard.js","esm2015":"esm2015/drizm-ng-whiteboard.js","fesm2015":"fesm2015/drizm-ng-whiteboard.js","typings":"drizm-ng-whiteboard.d.ts","metadata":"drizm-ng-whiteboard.metadata.json","sideEffects":false,"bugs":{"url":"https://github.com/drizm-team/ng2-canvas-whiteboard/issues"},"homepage":"https://github.com/drizm-team/ng2-canvas-whiteboard#readme","_id":"@drizm/ng-whiteboard@4.0.3","_nodeVersion":"12.19.0","_npmVersion":"7.6.2","dist":{"integrity":"sha512-EcpgYQsZJiyLHXDoUXwLOuZU6m8o5F3T+yY/8VfDsKvmyak6ssg1ZCZZWBXc3z65CPzsQ0x7DDpKKTfnV0dfLw==","shasum":"49b39811da6ad034c2c350b383f2a7658733245f","tarball":"https://registry.npmjs.org/@drizm/ng-whiteboard/-/ng-whiteboard-4.0.3.tgz","fileCount":49,"unpackedSize":952787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnU9sCRA9TVsSAnZWagAArzcP/R+aOiBcrGq785OEU8ii\nrAPlyuV3uFlYC0ck6KlQ3PWzBeb0RxCI10RyVaL4hAAXIEn3q7s7Rxh3ccR7\n3OZACWOguXir7/TqJwjph4ZeG7AjN2b1BWY00K56UHlCgVCf8NKso27QtOtO\nMXSIOVmPmXX6Jir5FZy5d/afxv13IQqRCAJwPmTgiblbZ3cKkymBzxU1bGg9\nUp2cUcT80wdvS7QY0bSHsFOcqDJFLH6ZD3mdHh7hHDkP0aa8IfP//mxmO8q0\npM1Pue3BslDhVgI/aBe32A032fnW4dkw0hA9jNnpybHDrNP2erXT6RKhE6dG\nlQdN983/eHQ/mmtZt96W6Kwf4/novOrns4eHSlZ9gG5PGbbr5exsQ+QOtgGI\n9PknXTwOCJ1gPW0AdP6sYt8KHrLLDTFttroz5HuuAKhxm/V6kwe9IO8alvQW\nArLx/yysoO69L7lZ5bhTnyu3UiHFiHHNZhkpBDa2lI8RsYBKUkCugcj/SD8X\nQWEutNw+TwzvFqQ/429/KLeoo+r5+lK/5H9+Ljh56qn5W1jv5aGWwiFLdX1L\nsncl6uU3JZG5NBroVJD4bnJikxUYYuw4XKkTn5EChYdtiNL6rEPqx0GiP4dQ\nfdgNH/MqM6HAvByPdk9BkH+zn3q03Tp4uKNsbkhIl/IvYp3spZazVHYoCPtS\ndTkN\r\n=gpgj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC3kvSQPGPi6TaPdwj8oFeTKNoue1/do2mMw9kUnb3vUwIgL+1PwY/1K8+Qr7Ukq8kYCMlzO6/rxqjTdEFQumHuX9M="}]},"_npmUser":{"name":"dominik.lewandow","email":"dominik.lewandow@gmail.com"},"directories":{},"maintainers":[{"name":"dominik.lewandow","email":"dominik.lewandow@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-whiteboard_4.0.3_1620922219762_0.8648919204099115"},"_hasShrinkwrap":false},"4.0.4":{"name":"@drizm/ng-whiteboard","version":"4.0.4","author":{"name":"webfactory"},"license":"MIT","description":"A Canvas component for Angular which supports free drawing.","keywords":["angular2","angular","angular4","angular5","angular6","angular7","angular8","angular9","angular10","canvas","drawing","touch drawing","whiteboard","colorpicker","canvas colorpicker","free hand drawing","shape drawing","shapes","premade shapes","custom shapes","custom premade shapes"],"repository":{"type":"git","url":"git+https://github.com/drizm-team/ng2-canvas-whiteboard.git"},"peerDependencies":{"@angular/common":"^11.2.13","@angular/core":"^11.2.13","rxjs":"^6.5.5"},"dependencies":{"lodash-es":"4.17.15","tslib":"^2.0.0"},"main":"bundles/drizm-ng-whiteboard.umd.js","module":"fesm2015/drizm-ng-whiteboard.js","es2015":"fesm2015/drizm-ng-whiteboard.js","esm2015":"esm2015/drizm-ng-whiteboard.js","fesm2015":"fesm2015/drizm-ng-whiteboard.js","typings":"drizm-ng-whiteboard.d.ts","metadata":"drizm-ng-whiteboard.metadata.json","sideEffects":false,"bugs":{"url":"https://github.com/drizm-team/ng2-canvas-whiteboard/issues"},"homepage":"https://github.com/drizm-team/ng2-canvas-whiteboard#readme","_id":"@drizm/ng-whiteboard@4.0.4","_nodeVersion":"12.19.0","_npmVersion":"7.6.2","dist":{"integrity":"sha512-BKW0DwQNKKyIWetCVHz8ynghd+1e6hKRieLkwh4evoMCdwDr0e24SORdhgXuTLKWmDonaAnqStqxupFGgbziDA==","shasum":"b0beca4656cabc65a3d3fc740e34a4e677f551af","tarball":"https://registry.npmjs.org/@drizm/ng-whiteboard/-/ng-whiteboard-4.0.4.tgz","fileCount":51,"unpackedSize":974370,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgntzACRA9TVsSAnZWagAAtdUP/AxZMDmvxaD0Pmbf8JNF\nFg9T7g8AI2O8eqH8+qUwtRC56YJiaKkH/VPLqxxkvyvroM5a671Vh/+nZlhD\nY1yPT+NTdkk4ih0Z9LPECeBIAhH4JkuQ9NjKstqUnd57q7VwHi9Uot1scAhA\nAFonWly28JX8zzrAl0ly6egda4269rFB3jpAFHxsg4GKJhd9NaH3yXSGDJia\nOZjTEOuJBnH9AOeWcyGesQc0TdTqsoTgiyaRxOKENlm92tcjH1Vbeus9gyqc\nYvV91Bfqs9faTxfzx/Rgkef7x0IAk+scC/43wXPMegAjzWUGJLt88DgUgNcM\nuocFd5r3+kLY+5HGwIfYeNZ63u5LwRZud9tODXwDmyftWf28QlzfOMVdSLBa\nzayM9UkJDX1Ty9FwitPQ65rNqQiZuHVpjQ3SGKaHqsnmXfoxYRN/TiZ9rz/9\nvw2vg56Y6wdfc4ToARXBqbemNNjLX8Vfq2PJaZqND67czlZmmkxPNQGUgnDO\n09usa1o7YODEpUUNt1SXtOq4tf+lRkFjgnuTwmMgKFgYWPikbshepDn4Wy32\na2hsiR907HJ2X5+aauf3yAiLLFR3hnNrrU+PJLGGEJcbyyhg+MoAuB7+fGjX\n/7HVfDRK7S/DrUJdS6G4p4e+gWBvvjVqHNp3wAjebZfvgeaQoB83CzIV5SxV\n/KMF\r\n=t27Y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEAKa3Bg6A4KVGY3HY3rQdU1B0fN0WsLEo4yTEQiQgqtAiEA0q8YZX627XAK+7F0ciKwUVIXARStKsT17Wezr5VE+60="}]},"_npmUser":{"name":"dominik.lewandow","email":"dominik.lewandow@gmail.com"},"directories":{},"maintainers":[{"name":"dominik.lewandow","email":"dominik.lewandow@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-whiteboard_4.0.4_1621023935906_0.09408343761150384"},"_hasShrinkwrap":false},"4.1.0":{"name":"@drizm/ng-whiteboard","version":"4.1.0","author":{"name":"Dominik Lewandowski, webfactory","url":"forked"},"license":"MIT","description":"A Canvas component for Angular which supports free drawing.","keywords":["angular2","angular","angular4","angular5","angular6","angular7","angular8","angular9","angular10","angular12","canvas","drawing","touch drawing","whiteboard","colorpicker","canvas colorpicker","free hand drawing","shape drawing","shapes","premade shapes","custom shapes","custom premade shapes"],"repository":{"type":"git","url":"git+https://github.com/drizm-team/ng2-canvas-whiteboard.git"},"peerDependencies":{"@angular/common":"^11.2.13","@angular/core":"^11.2.13","rxjs":"^6.5.5"},"dependencies":{"lodash-es":"4.17.15","tslib":"^2.0.0"},"main":"bundles/drizm-ng-whiteboard.umd.js","module":"fesm2015/drizm-ng-whiteboard.js","es2015":"fesm2015/drizm-ng-whiteboard.js","esm2015":"esm2015/drizm-ng-whiteboard.js","fesm2015":"fesm2015/drizm-ng-whiteboard.js","typings":"drizm-ng-whiteboard.d.ts","metadata":"drizm-ng-whiteboard.metadata.json","sideEffects":false,"bugs":{"url":"https://github.com/drizm-team/ng2-canvas-whiteboard/issues"},"homepage":"https://github.com/drizm-team/ng2-canvas-whiteboard#readme","_id":"@drizm/ng-whiteboard@4.1.0","_nodeVersion":"12.19.0","_npmVersion":"7.6.2","dist":{"integrity":"sha512-flHg+7D17bPsNsj0NhAKfgKmqH6hWhAwJqKv0703DyBztnjgzYe/6JRIuugurBu6ADW826i7J/0+Cf2lG8gbNQ==","shasum":"58df057a124a4f843b12dcd5daeb9dd862037d23","tarball":"https://registry.npmjs.org/@drizm/ng-whiteboard/-/ng-whiteboard-4.1.0.tgz","fileCount":51,"unpackedSize":975043,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnuNpCRA9TVsSAnZWagAAVw0P/RnR+ywKohISEMbRQ6Sj\nPuvZdJUlg5TAjDacHItieYmAtNtcFusMETtK0Lw1XXV/x2yIT2bpvz5OekUz\nAvN0qnHcSz7/+uTqWu9K0gmijR5lS1b9FCwxHNGavLeor2U+jUSUom80PRXQ\nR3CsLYErknMM93nugDGSBVXA66SRvEhxuYgGGFVr3kjph1/fUMYWE1Fhwy+4\nhmgkp9FOQGAufITDdmgTqOt/ZsVdrEAKdzjcVWs6Vm5la1mg6emXBHhAVPBW\n1ahkOBUk7Y2Hs5Ok9CN21fNpIvN8WEV4oHLWUS5DSbZpjwNG4tXhVVw69ODf\nn2kzt4RRWUsMS6TCHIstfs4ASGsXLk2NGBG0Cz6xoqXPaWLmD1VnKnBvFCZ+\nxCEjRsN1e/3ygd37+aIwNK3126DkmmnO7tlkptv7XIBT/AyBJwwwIT7M7jH9\nmhdbTR9a2PJRAKurYkUQAJKTVqV4eiLfBiAJRJ+6k52hAnxsGU44xnXN4Q1r\n8iSdkBIXZfQSC+L32NuWNFlZPQvXKwn0F9gNdTnz1RJ3gXUiVanQlo+moGrP\nIVgcyvi48HFVVtRMwXr47pVElloIqFoaG1oIBJNsvU3rsZVub4xS8CRB81EX\n35ZdLYVoyEHUkjoQ3gv2j+peX7Z0MVSY+YSri5yixXqbmvCJ3ysr8PHx89TR\nLvND\r\n=RD24\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBLbxuA+zaOgfgx+I9qR5StuwMl7Puyr4vtdPOFK+rmnAiAczh2Ix+zUoWf/YGzj2Z97dsHZiiD4xeyvpuTCWfRYYQ=="}]},"_npmUser":{"name":"dominik.lewandow","email":"dominik.lewandow@gmail.com"},"directories":{},"maintainers":[{"name":"dominik.lewandow","email":"dominik.lewandow@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-whiteboard_4.1.0_1621025640877_0.36717910359898087"},"_hasShrinkwrap":false},"4.2.0":{"name":"@drizm/ng-whiteboard","version":"4.2.0","author":{"name":"Dominik Lewandowski, webfactory","url":"forked"},"license":"MIT","description":"A Canvas component for Angular which supports free drawing.","keywords":["angular2","angular","angular4","angular5","angular6","angular7","angular8","angular9","angular10","angular12","canvas","drawing","touch drawing","whiteboard","colorpicker","canvas colorpicker","free hand drawing","shape drawing","shapes","premade shapes","custom shapes","custom premade shapes"],"repository":{"type":"git","url":"git+https://github.com/drizm-team/ng2-canvas-whiteboard.git"},"peerDependencies":{"@angular/common":"^11.2.13","@angular/core":"^11.2.13","rxjs":"^6.5.5"},"dependencies":{"lodash-es":"4.17.15","tslib":"^2.0.0"},"main":"bundles/drizm-ng-whiteboard.umd.js","module":"fesm2015/drizm-ng-whiteboard.js","es2015":"fesm2015/drizm-ng-whiteboard.js","esm2015":"esm2015/drizm-ng-whiteboard.js","fesm2015":"fesm2015/drizm-ng-whiteboard.js","typings":"drizm-ng-whiteboard.d.ts","metadata":"drizm-ng-whiteboard.metadata.json","sideEffects":false,"bugs":{"url":"https://github.com/drizm-team/ng2-canvas-whiteboard/issues"},"homepage":"https://github.com/drizm-team/ng2-canvas-whiteboard#readme","_id":"@drizm/ng-whiteboard@4.2.0","_nodeVersion":"12.19.0","_npmVersion":"7.6.2","dist":{"integrity":"sha512-/EIkIYqPrgSwniVdGCGWnMzqFkJcCNDuHZ0b2c+EqjofvowwCeIDB1ODMn+qBZ1GIcB8g85z3PmK9WZTIs/WOQ==","shasum":"15c051bf84eb7fe8b9a98be14704bc1ce21e9677","tarball":"https://registry.npmjs.org/@drizm/ng-whiteboard/-/ng-whiteboard-4.2.0.tgz","fileCount":51,"unpackedSize":975169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgn+JACRA9TVsSAnZWagAAnM4QAIDlC61xGjyLM48jMcju\nw8Mn6I9Y3s5L9gmWlEGZ6mJJgxg26YAqS7THot1XIdbwl/7dSj8fLRg8B0b7\nqahDYLrAs4AfJEep5VvL1AyTha5aGg6L/Pjte1T+FuLanIef/Ox6AsyT+kld\n5TpuutN5rED3K3OHJiMp2mbjo4rHVL83yDbT8GaEZCik/CfIM/+pryvRwitj\nDkv77OP0rEj9tMjQFG5Si3XTNTKfPpenU7chVyQyl3gHb42wbAX6/SpIs7Et\nZM4IpixXIr6B79p3TEXdLk9hHYmLOzTDlcWZkgZG4VTmw2QmAUWa61Ab4z0y\nMNLiYv7go9zoCrd2m3DNOqCtwQTE67lyxi2C2agp34kVhZ8vII1GmUV76Y1v\nqJ++gMFkI1lLWwhFSLSLh0OM/hfjEAzO0bb/j6eLfOdWkqlCtkxOpkGL7mvJ\nWXLRJpLQ+VNB4yv0+U2OIcVkVu3U+IbMlvfaxasd7Tmq70nedKPNJrWKzZhv\nF/IHv+vXN14iVm2wZwqbSgThYOOPTxnKnU1CY2LjyfVBy9XxTKg+92ziBoJV\nfwIWeUGnVy7ptjDBCAR+s0/+2EGo1KAMfh69usZ4HKa6mccu4ad/WVrnG9Gs\nRB7mW8zcJRid9ARGGDQ7NKRzuXToYFuRG4HRBkac7Wqg8bnHlUnNpaeGIMFw\n7xnw\r\n=nWP+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCNfVM3qp5XkN5UJXhn695SostOnHXNp4AqCzkIatDClQIgLRcULXavwFUif9BtiJGu8hvsKV2G6jgxNTC+/w9WSqE="}]},"_npmUser":{"name":"dominik.lewandow","email":"dominik.lewandow@gmail.com"},"directories":{},"maintainers":[{"name":"dominik.lewandow","email":"dominik.lewandow@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-whiteboard_4.2.0_1621090879337_0.5211953402001364"},"_hasShrinkwrap":false},"4.3.0":{"name":"@drizm/ng-whiteboard","version":"4.3.0","author":{"name":"Dominik Lewandowski, webfactory","url":"forked"},"license":"MIT","description":"A Canvas component for Angular which supports free drawing.","keywords":["angular2","angular","angular4","angular5","angular6","angular7","angular8","angular9","angular10","angular12","canvas","drawing","touch drawing","whiteboard","colorpicker","canvas colorpicker","free hand drawing","shape drawing","shapes","premade shapes","custom shapes","custom premade shapes"],"repository":{"type":"git","url":"git+https://github.com/drizm-team/ng2-canvas-whiteboard.git"},"peerDependencies":{"@angular/common":"^11.2.13","@angular/core":"^11.2.13","rxjs":"^6.5.5"},"dependencies":{"lodash-es":"4.17.15","tslib":"^2.0.0"},"main":"bundles/drizm-ng-whiteboard.umd.js","module":"fesm2015/drizm-ng-whiteboard.js","es2015":"fesm2015/drizm-ng-whiteboard.js","esm2015":"esm2015/drizm-ng-whiteboard.js","fesm2015":"fesm2015/drizm-ng-whiteboard.js","typings":"drizm-ng-whiteboard.d.ts","metadata":"drizm-ng-whiteboard.metadata.json","sideEffects":false,"bugs":{"url":"https://github.com/drizm-team/ng2-canvas-whiteboard/issues"},"homepage":"https://github.com/drizm-team/ng2-canvas-whiteboard#readme","_id":"@drizm/ng-whiteboard@4.3.0","_nodeVersion":"12.19.0","_npmVersion":"7.6.2","dist":{"integrity":"sha512-RPV7rNuEwRZHWs5pOvOAMJ1wMFnYrV4fkIKC5+/MYoKZJrCDsOeSRxOH88gZGx/XIJhWsts1XDPOQfaqJ8tyEQ==","shasum":"4993d939a1bc5e4ef2b9e7a753070af879f93af3","tarball":"https://registry.npmjs.org/@drizm/ng-whiteboard/-/ng-whiteboard-4.3.0.tgz","fileCount":51,"unpackedSize":1010587,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpTovCRA9TVsSAnZWagAAHJIP+wXXuSXWWgW7ndAbRV3w\nDR81sMspaHrTDrbxEa8xz+r2ZILsBYFXk0PnLVkuFSjxSYXZ4IA6iI04rZOd\nm7I2PAu0tFQneeVtf6z9N5C8s3bbosbacE2HDZMhWRLvMxrZqh9TN04Lt6pI\ncXzOzFsfZfmT8AOIbXkEDUmVBF7DOqANRxPMcO3btV8vluuiNf3tGoeDVc5P\nrAgwHdKXbdDD9iBoHupEnj/56SDQ7aanKYNe+c2G+2EXjjg7g8PaGieeoJBD\nobMLgSpspAUQb/0tbWWN7ltK8xN/iVykSzLI25KocHlWvJ7aRMkjyGbK+gWY\nFugYv7XCdwC+U/4j+ZTXJmFogh65Lt8HW05o4tcDHvsoCZeRBOlAYvK9GJE9\n9w6L3+6J3p6i1/lfSY8x6LQTiSYwpVV0tGJhv0EjB59/rzzXRijLPw+aQ6uj\nMVYvhSBqLHsZqDknq0lzJmialJc/LMaqgGgBLLJR3FrXMXoLEdgXC9+ez5Je\na6soav/x78WDnrePNJBtUsIIAWu5PstKMo3ZwSUAbtWksBkE8B/3HaS32u2I\nl2F/HNa8M6xo7U8bHWETN59ZYKChoiyvNI/dhhMlxZz1d1R7AQrhzfnRY6CE\nkXwDBAnTx5JhveU8wJyEHLMg8I+AMsCUC0H0oCqsEB9t+8JOpSahcAi5KaNZ\ntMSO\r\n=4GCv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC8QJAX4PEae2LM6zgilUZ/eOtRCL2xWllxnTbyswKtTwIgCnfnqf8L3zuJoUMz/m+fUVARDgjDW83BCEMu/fwm6s4="}]},"_npmUser":{"name":"dominik.lewandow","email":"dominik.lewandow@gmail.com"},"directories":{},"maintainers":[{"name":"dominik.lewandow","email":"dominik.lewandow@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-whiteboard_4.3.0_1621441071050_0.003111712057942251"},"_hasShrinkwrap":false},"4.3.1":{"name":"@drizm/ng-whiteboard","version":"4.3.1","author":{"name":"Dominik Lewandowski, webfactory","url":"forked"},"license":"MIT","description":"A Canvas component for Angular which supports free drawing.","keywords":["angular2","angular","angular4","angular5","angular6","angular7","angular8","angular9","angular10","angular12","canvas","drawing","touch drawing","whiteboard","colorpicker","canvas colorpicker","free hand drawing","shape drawing","shapes","premade shapes","custom shapes","custom premade shapes"],"repository":{"type":"git","url":"git+https://github.com/drizm-team/ng2-canvas-whiteboard.git"},"peerDependencies":{"@angular/common":"^11.2.13","@angular/core":"^11.2.13","rxjs":"^6.5.5"},"dependencies":{"lodash-es":"4.17.15","tslib":"^2.0.0"},"main":"bundles/drizm-ng-whiteboard.umd.js","module":"fesm2015/drizm-ng-whiteboard.js","es2015":"fesm2015/drizm-ng-whiteboard.js","esm2015":"esm2015/drizm-ng-whiteboard.js","fesm2015":"fesm2015/drizm-ng-whiteboard.js","typings":"drizm-ng-whiteboard.d.ts","metadata":"drizm-ng-whiteboard.metadata.json","sideEffects":false,"bugs":{"url":"https://github.com/drizm-team/ng2-canvas-whiteboard/issues"},"homepage":"https://github.com/drizm-team/ng2-canvas-whiteboard#readme","_id":"@drizm/ng-whiteboard@4.3.1","_nodeVersion":"12.19.0","_npmVersion":"7.6.2","dist":{"integrity":"sha512-eruZin+303R+VzP5bov5Rmxo5O2sOfgvMAMewjsXqYLV9O0dEqIlZfMlX9Y4nUjtdazHIMa0GhZAM7ItZSeytw==","shasum":"edc0352fe9e69ffc2d54fe6b83a43450d23559cc","tarball":"https://registry.npmjs.org/@drizm/ng-whiteboard/-/ng-whiteboard-4.3.1.tgz","fileCount":51,"unpackedSize":1008883,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpinQCRA9TVsSAnZWagAAeXcQAJLAlYfopmiqP+kZsryg\nQST5POaBF9UU9ZBJdJWYQ/EoBTgcm1qbJp2bMHX7Du0Y75jII7GNzrgtT8Rd\nNKF9MAVCTAofd2KFBxuCkPIsyiKfbziBtj/2KbpmBB0AzF91BCjSTijxVMOL\nLqhHdp/EmF9Jb7RnrXAWPEli9Q85mzEbsT8c3uXtVLCXDfP7nK2GkbSo+xnj\nwP9YbVKrlVliDsCJOAKq3DiXMvo0lE36Rtt6DqH5HIhdT2lFXvenBW5H1Jnn\na28Ra3YqcpqmeLOZVu8ogvPBjZ8xYl96k22lmkT3QSQsBAb/R4vFsedfaHtt\n+ivdBJUmz2mOBPvc3/Ox6HC6T8CqHoFZCx7OQ9Is/pgUtz0l71lioJ5FQy9V\n/mn/y+UcvPJNVKZYQkRGt2nRpdww+hVJYkpFrfXO4z/LjiQfmLVuAOD5SPf/\nHRZrL2j4J13AIODyKSOZgXaejQTkUfC3liZeMlyqeYbsXRTBiCXtoOomVc4I\nRJOD/jW2VJZm4ZclII3+JA52AN8h1f/BMEgUr6BvduX7iUm1YT4RVqTjGPtv\nnwge134ShzLCM7f8kT+Wy9Q+Rp+x7Mh1OeLoMr2evixds7QDAfTBPXlqYEB0\njuqNL7iX5NUQMydVZAPyLKo4MNJY5mzhNSKjQF2drooQKawwfUlWog/zUV4C\njsF9\r\n=sp7o\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCxjMmA1+Fh65cIeTPUXz5iw6fHCicmcNLdWsLHpOEdpwIhAKPNjjQ/ziFqx4elNT+TRpa9dzMCzTx3iCo80ADOD6pC"}]},"_npmUser":{"name":"dominik.lewandow","email":"dominik.lewandow@gmail.com"},"directories":{},"maintainers":[{"name":"dominik.lewandow","email":"dominik.lewandow@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-whiteboard_4.3.1_1621502415747_0.40243518818526325"},"_hasShrinkwrap":false},"4.3.2":{"name":"@drizm/ng-whiteboard","version":"4.3.2","author":{"name":"Dominik Lewandowski, webfactory","url":"forked"},"license":"MIT","description":"A Canvas component for Angular which supports free drawing.","keywords":["angular2","angular","angular4","angular5","angular6","angular7","angular8","angular9","angular10","angular12","canvas","drawing","touch drawing","whiteboard","colorpicker","canvas colorpicker","free hand drawing","shape drawing","shapes","premade shapes","custom shapes","custom premade shapes"],"repository":{"type":"git","url":"git+https://github.com/drizm-team/ng2-canvas-whiteboard.git"},"peerDependencies":{"@angular/common":"^11.2.13","@angular/core":"^11.2.13","rxjs":"^6.5.5"},"dependencies":{"lodash-es":"4.17.15","tslib":"^2.0.0"},"main":"bundles/drizm-ng-whiteboard.umd.js","module":"fesm2015/drizm-ng-whiteboard.js","es2015":"fesm2015/drizm-ng-whiteboard.js","esm2015":"esm2015/drizm-ng-whiteboard.js","fesm2015":"fesm2015/drizm-ng-whiteboard.js","typings":"drizm-ng-whiteboard.d.ts","metadata":"drizm-ng-whiteboard.metadata.json","sideEffects":false,"bugs":{"url":"https://github.com/drizm-team/ng2-canvas-whiteboard/issues"},"homepage":"https://github.com/drizm-team/ng2-canvas-whiteboard#readme","_id":"@drizm/ng-whiteboard@4.3.2","_nodeVersion":"12.19.0","_npmVersion":"7.6.2","dist":{"integrity":"sha512-A69QCHm8ITeEzpmOdsEgyZeee541hBpErU5nGNwejc8uvuw5iluph7kOM7+MusPLQfGrAOM5sEZGBHMhysR85w==","shasum":"e0fa5148f2aef7d2da794e90fca2f68249a696aa","tarball":"https://registry.npmjs.org/@drizm/ng-whiteboard/-/ng-whiteboard-4.3.2.tgz","fileCount":51,"unpackedSize":1009128,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpipJCRA9TVsSAnZWagAA7RgP/ApcEiFWbi6CrSXlwDRl\n5+V2TGl5A9F2sYWvuNGEyBvYznUCMunjUkKz/gm/DtT+gLRzDzJdm/oLLYDi\ntqjs4iabXWc9oqB9yTmLriJB7PmCoYE2fCRCK7wJtf5ArrUFIbzT3DCdjHk+\nzUNRe7RH9P5iP3qCw932+moBpfwnvaKvgMCh7qzGRHEhUixiqPYIb0hEAzDE\n54baVtksJP1H/H4jd72ZNBa4FQHnNS8L0N959WHjKGYcUhDSUsY9J7+lr08v\nkuCyAmuposBMS8hsatP7lC5vbXeRvWN8kAo5wBDbFAnkpDTlIyg04uchMv+d\nax3dEja5+N4PBQvfdur9Vk5PBvpkQjZwJVtoqi6eG24x3PFVVWRLKjjl7JdC\ngGkKf8Zuxh52nVTRREItEBJsQ59lezLIh9hf5co/9p+UTLP/Mzv7Y94R9r3P\nd1DVfH4lJ6Sc9B7c+NGVwS+Gk6/75rWxHZ0EMsUBpf/STBr5bBnXKGyo3Zu7\nKQvX3K3xLA5iMSQ9vGtHgQotiUuRn7dWQQiXI7aYCqIJPyo7E2ve6L53ccFJ\nhwzSmx5IvXm3anZAFl4QmgIlEuXM12G3FNm3Q3mUjPBaHOnYRKDygJAeVpCB\n2qI0POrB6b7Q+NjkWTEtgTBzQHUSseRrZKtMqY/7B1/Is/o/tFhcM22ghois\nCqxF\r\n=zYQG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCPZc4j2V2QDv43O9xF1NaTEBiYqSXxhGpxDGsRbAuffQIgQkQqPv7vPb6OwALXbBfiZyK69A2840E2BT1EU/EEjhk="}]},"_npmUser":{"name":"dominik.lewandow","email":"dominik.lewandow@gmail.com"},"directories":{},"maintainers":[{"name":"dominik.lewandow","email":"dominik.lewandow@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng-whiteboard_4.3.2_1621502537015_0.721670808507392"},"_hasShrinkwrap":false}},"time":{"created":"2021-05-13T16:07:31.501Z","4.0.2":"2021-05-13T16:07:32.016Z","modified":"2022-04-05T05:40:51.708Z","4.0.3":"2021-05-13T16:10:19.943Z","4.0.4":"2021-05-14T20:25:36.085Z","4.1.0":"2021-05-14T20:54:01.211Z","4.2.0":"2021-05-15T15:01:19.514Z","4.3.0":"2021-05-19T16:17:51.282Z","4.3.1":"2021-05-20T09:20:15.947Z","4.3.2":"2021-05-20T09:22:17.225Z"},"maintainers":[{"name":"dominik.lewandow","email":"dominik.lewandow@gmail.com"}],"description":"A Canvas component for Angular which supports free drawing.","homepage":"https://github.com/drizm-team/ng2-canvas-whiteboard#readme","keywords":["angular2","angular","angular4","angular5","angular6","angular7","angular8","angular9","angular10","angular12","canvas","drawing","touch drawing","whiteboard","colorpicker","canvas colorpicker","free hand drawing","shape drawing","shapes","premade shapes","custom shapes","custom premade shapes"],"repository":{"type":"git","url":"git+https://github.com/drizm-team/ng2-canvas-whiteboard.git"},"author":{"name":"Dominik Lewandowski, webfactory","url":"forked"},"bugs":{"url":"https://github.com/drizm-team/ng2-canvas-whiteboard/issues"},"license":"MIT","readme":"# Forked from ng2-canvas-whiteboard\r\n\r\n## Changelog\r\n#### v4.3.1 Experimental eraser\r\n- Fixed doRedo being a private method\r\n- Added experimental eraser functionality:\\\r\n  eraserLineWidth?: number;\\\r\n  eraseButtonEnabled?: boolean;\\\r\n  eraseButtonClass?: string;\\\r\n  eraseButtonText?: string;\r\n\r\n#### v4.2.0 Remove drawing with middle mouse button\r\nThis allows for implementing a dragging mechanism\r\n\r\n#### v4.1.0 Application refactor and custom UI template\r\n- Updated to Angular 12\r\n- Added TypeScript strict mode\r\n- Added the option of adding a custom UI template (replaces the buttons) via the customWhiteboardUi input\r\n\r\n#### For applications before Angular 6 please use versions below v3.0.0.\r\n\r\n**Features:**<br/>\r\n- Premade Shapes\r\n- The ability to create custom premade shapes\r\n- Supports touch.\r\n- Supports UNDO/REDO.\r\n- Implements a color picker for stroke and fill colors.\r\n- Sends outputs on every action.\r\n- Contains inputs for multiple modifications.\r\n- Save drawn images\r\n- Custom UI template\r\n- Eraser(experimental)\r\n\r\n## Installation\r\n\r\n1. Install npm module:\r\n\r\n    ```bash\r\n    npm install @drizm/ng-whiteboard --save\r\n    ```\r\n    \r\n2. If you are using system.js you may want to add this into `map` and `package` config:\r\n\r\n    ```json\r\n    {\r\n        \"map\": {\r\n            \"@drizm/ng-whiteboard\": \"node_modules/@drizm/ng-whiteboard\"\r\n        },\r\n        \"packages\": {\r\n            \"@drizm/ng-whiteboard\": { \"main\": \"index.js\", \"defaultExtension\": \"js\" }\r\n        }\r\n    }\r\n    ```\r\n    \r\nAdd the module to your project\r\n\r\n```typescript\r\n@NgModule({\r\n    imports: [\r\n        CanvasWhiteboardModule\r\n    ]\r\n    ...\r\n)}\r\n```\r\n\r\nIn your component, you should add the CanvasWhiteboardComponent as a view provider\r\n```typescript\r\n@Component({\r\n    selector: '...',\r\n    viewProviders: [CanvasWhiteboardComponent],\r\n    templateUrl: '...'\r\n})\r\n```\r\n\r\nIn the html file, you can insert the Canvas Whiteboard\r\n\r\n```html\r\n<drizm-whiteboard #canvasWhiteboard\r\n                     [customWhiteboardUi]=\"customWhiteboardUiT\"\r\n                     [drawButtonClass]=\"'drawButtonClass'\"\r\n                     [drawButtonText]=\"'Draw'\"\r\n                     [clearButtonClass]=\"'clearButtonClass'\"\r\n                     [clearButtonText]=\"'Clear'\"\r\n                     [undoButtonText]=\"'Undo'\"\r\n                     [undoButtonEnabled]=\"true\"\r\n                     [redoButtonText]=\"'Redo'\"\r\n                     [redoButtonEnabled]=\"true\"\r\n                     [colorPickerEnabled]=\"true\"\r\n                     [fillColorPickerText]=\"'Fill'\"\r\n                     [strokeColorPickerText]=\"'Stroke'\"\r\n                     [saveDataButtonEnabled]=\"true\"\r\n                     [saveDataButtonText]=\"'Save'\"\r\n                     [lineWidth]=\"5\"\r\n                     [strokeColor]=\"'rgb(0,0,0)'\"\r\n                     [shouldDownloadDrawing]=\"true\"\r\n                     (batchUpdate)=\"sendBatchUpdate($event)\"\r\n                     (clear)=\"onCanvasClear()\"\r\n                     (undo)=\"onCanvasUndo($event)\"\r\n                     (redo)=\"onCanvasRedo($event)\">\r\n</drizm-whiteboard>\r\n\r\n<ng-template #customWhiteboardUiT></ng-template>\r\n```\r\n\r\nIf there is too much overhead with inputs, you can just specify the [options] input, and specify the options from the typescript code\r\n\r\nExample:\r\n```html\r\n<drizm-whiteboard #canvasWhiteboard\r\n                   [options]=\"canvasOptions\"\r\n                   (batchUpdate)=\"onCanvasDraw($event)\"\r\n                   (clear)=\"onCanvasClear()\"\r\n                   (undo)=\"onCanvasUndo($event)\"\r\n                   (redo)=\"onCanvasRedo($event)\">\r\n</drizm-whiteboard>\r\n```\r\nCode:\r\n```typescript\r\n  canvasOptions: CanvasWhiteboardOptions = {\r\n    customWhiteboardUi: this.customWhiteboardUiT,\r\n    drawButtonEnabled: true,\r\n    drawButtonClass: \"drawButtonClass\",\r\n    drawButtonText: \"Draw\",\r\n    clearButtonEnabled: true,\r\n    clearButtonClass: \"clearButtonClass\",\r\n    clearButtonText: \"Clear\",\r\n    undoButtonText: \"Undo\",\r\n    undoButtonEnabled: true,\r\n    redoButtonText: \"Redo\",\r\n    redoButtonEnabled: true,\r\n    colorPickerEnabled: true,\r\n    fillColorPickerText: \"Fill\",\r\n    strokeColorPickerText: \"Stroke\",\r\n    saveDataButtonEnabled: true,\r\n    saveDataButtonText: \"Save\",\r\n    lineWidth: 5,\r\n    strokeColor: \"rgb(0,0,0)\",\r\n    shouldDownloadDrawing: true,\r\n    eraserLineWidth: \"10\",\r\n    eraseButtonEnabled: true,\r\n    eraseButtonClass: \"eraseButtonClass\",\r\n    eraseButtonText: \"Erase\"\r\n  };\r\n```\r\n\r\n\r\n# Drawing on the canvas\r\n\r\nThe canvas drawing is triggered when the user touches the canvas, draws (moves the mouse or finger) and then stops drawing.\r\nWhen the drawing is started, after 100 ms all the signals in between are added to a list and are sent as a batch signal which is \r\nemitted by the **onBatchUpdate** emitter. If received, the user can then manipulate with the sent signals.\r\n\r\n# Inputs\r\n##### `batchUpdateTimeoutDuration: number` (default: 100)\r\nThe time in milliseconds that a batch update should be sent after drawing.\r\n\r\n##### `imageUrl: string` (optional)\r\nThe path to the image. If not specified, the drawings will be placed on the background color of the canvas.\r\nThis path can either be a base64 string or an actual path to a resource\r\n\r\n##### `aspectRatio: number` (optional)\r\nIf specified, the canvas will be resized according to this ratio\r\n\r\n#### `customWhiteboardUi: TemplateRef<any>` (optional)\r\nIf specified, replaces whiteboard buttons with your custom template. To add undo/redo etc. triggers you can get CanvaswhiteboardComponent like this:\r\n`@ViewChild('canvasWhiteboard') canvasWhiteboard: CanvasWhiteboardComponent;` and use its public redoLocal and undoLocal methods, along with others.\r\n\r\n##### `drawButtonClass: string`<br/>`clearButtonClass: string` <br/>`undoButtonClass: string` <br/>`redoButtonClass: string`<br/>`saveDataButtonClass: string` <br/>`eraseButtonClass: string`\r\nThe classes of the draw, clear, undo and redo buttons. These classes are used in \"\\<i>\" tags. <br/>\r\nExample:  \r\n```html\r\n[drawButtonClass]=\"'fa fa-pencil fa-2x'\"\r\n[clearButtonClass]=\"'fa fa-eraser fa-2x canvas_whiteboard_button-clear'\"\r\n   ```\r\n##### `drawButtonEnabled: boolean` (default: true) <br/>`clearButtonEnabled: boolean` (default: true) <br/>`eraseButtonEnabled: boolean` (default: true) <br/>`undoButtonEnabled: boolean` (default: false)<br/>`redoButtonEnabled: boolean` (default: false)<br/>`saveDataButtonEnabled: boolean` (default: false)\r\nSpecifies whether or not the button for drawing or clearing the canvas should be shown.\r\n\r\n##### `drawButtonText, clearButtonText, undoButtonText, redoButtonText, saveDataButtonText, eraseButtonText`\r\nSpecify the text to add to the buttons, default is no text\r\n```html\r\n[drawButtonText]=\"'Draw'\"\r\n[clearButtonText]=\"'Clear'\"\r\n```\r\n\r\n##Use the options: CanvasWhiteboardOptions to send the inputs\r\nChanges to this object will be detected by the canvas in the OnChange listener and will be changed accordingly\r\n```typescript\r\n  //Component\r\n  canvasOptions: CanvasWhiteboardOptions = {\r\n      drawButtonEnabled: true,\r\n      drawButtonClass: 'drawButtonClass',\r\n      drawButtonText: 'Draw',\r\n      clearButtonEnabled: true,\r\n      clearButtonClass: 'clearButtonClass',\r\n      clearButtonText: 'Clear',\r\n      undoButtonText: 'Undo',\r\n      undoButtonEnabled: true,\r\n      redoButtonText: 'Redo',\r\n      redoButtonEnabled: true,\r\n      colorPickerEnabled: true,\r\n      saveDataButtonEnabled: true,\r\n      saveDataButtonText: 'Save',\r\n      lineWidth: 4,\r\n      scaleFactor: 1\r\n  };\r\n\r\n   //View\r\n  <drizm-whiteboard #canvasWhiteboard\r\n                       [options]=\"canvasOptions\"\r\n                       (onBatchUpdate)=\"onCanvasDraw($event)\"\r\n                       (onClear)=\"onCanvasClear()\"\r\n                       (onUndo)=\"onCanvasUndo($event)\"\r\n                       (onRedo)=\"onCanvasRedo($event)\"\r\n                       (onSave)=\"onCanvasSave($event)\">\r\n  </drizm-whiteboard>\r\n```\r\n\r\nNOTE: In order for the changeDetection to pick up the options changes, you must change the options reference whenever you want to change a value.\r\nExample:\r\n```typescript\r\n  public changeOptions(): void {\r\n    this.canvasOptions = {\r\n      ...this.canvasOptions,\r\n      fillColorPickerEnabled: true,\r\n      colorPickerEnabled: false\r\n    };\r\n  }\r\n```\r\n\r\n### To add text to the buttons via css\r\nEach button has its on class (example: Draw button -> .canvas_whiteboard_button-draw)<br/>\r\nThis button can be customized by overriding its css\r\n```css\r\n.canvas_whiteboard_button-draw:before {\r\n  content: \"Draw\";\r\n}\r\n```\r\nwill add the \"Draw\" text to the button.\r\n\r\nIf using component-only styles, for this to work the viewEncapsulation must be set to None.\r\n```typescript\r\n@Component({\r\n  selector: 'app-root',\r\n  templateUrl: './app.component.html',\r\n  styleUrls: ['./app.component.css'],\r\n  encapsulation: ViewEncapsulation.None\r\n})\r\n```\r\n\r\nYou can also use the `::ng-deep` selector if you do not want to change the ViewEncapsulation property on the component.\r\n\r\n##### `fillColorPickerEnabled: boolean` (default: false)\r\nThis shows/hides the fill color picker. Note: if this field has been to `false`, but the `colorPickerEnabled` field has been to `true`, the color picker will be shown, as per reverse-compat needs.\r\n\r\n##### `fillColorPickerText: string` (default: 'Fill')\r\nSpecify the text to add to the fill color picker button. Default is 'Fill' for reverse-compat needs. \r\n\r\n##### `strokeColorPickerEnabled: boolean` (default: false)\r\nThis shows/hides the stroke color picker. Note: if this field has been to `false`, but the `colorPickerEnabled` field has been set to `true`, the color picker will be shown, as per reverse-compat needs.\r\n\r\n##### `strokeColorPickerText: string` (default: 'Stroke')\r\nSpecify the text to add to the stroke color picker button. Default is 'Stroke' for reverse-compat needs.\r\n\r\n##### `lineWidth: number` (default: 2)\r\nThis input controls the drawing pencil size\r\n\r\n##### `strokeColor: string` (default: \"rgba(0, 0, 0, 1)\")\r\nThis input control the color of the brush\r\n\r\n##### `fillColor: string` (default: \"rgba(0, 0, 0, 0) -> transparent\")\r\nThis input control the background color of the shapes\r\n\r\n##### `shouldDownloadDrawing: boolean` (default: true)\r\nThis input control if the image created when clicking the save button should be downloaded right away.\r\n\r\n##### `startingColor: string` (default: \"#fff\")\r\nThis input control is used to fill the canvas with the specified color at initialization and on resize events.\r\n\r\n##### `scaleFactor: number` (default: 0)\r\nThis input controls the generation of the X and Y coordinates with a given scaleOffset. If not provided, the current with and height of the bounding rect and the canvas object will be used so that it works when transforming the canvas with css.\r\n\r\n##### `drawingEnabled: boolean` (default: false)\r\nThis input controls if the drawing should be enabled from the start, instead of waiting for the user to click draw\r\n\r\n##### `showStrokeColorPicker: boolean` (default: false)\r\nThis input controls if the CanvasWhiteboardColorPickerComponent for the `strokeColor` should be shown programmatically\r\n\r\n##### `showFillColorPicker: boolean` (default: false)\r\nThis input controls if the CanvasWhiteboardColorPickerComponent for the `fillColor` should be shown programmatically\r\n\r\n##### `downloadedFileName: string` (no default value)\r\nThis input controls the name of the file that will be downloaded when an image is saved.\r\nIf the `downloadCanvasImage` method is called with a `fileName` as a third parameter, then it will have priority over everything\r\nIf the `fileName` is not provided, then this Input will have priority. If this input is not provided as well,\r\nthe image will be saved as `canvas_drawing_\" + new Date().valueOf()`;\r\nAt the end the file extension will be added so that it can be opened by a particular app.\r\n\r\n##### `lineJoin: string` (default: \"round\")\r\nThe lineJoin property sets or returns the type of corner created, when two lines meet.\r\n\r\n##### `lineCap: string` (default: \"round\")\r\nThe lineCap property sets or returns the style of the end caps for a line.\r\n\r\n##### `shapeSelectorEnabled: boolean` (default: true)\r\nThis input controls if the CanvasWhiteboardShapeSelectorComponent will be enabled so that the user can pick other shapes via the View\r\n\r\n##### `showShapeSelector: boolean` (default: false)\r\nThis input controls if the CanvasWhiteboardShapeSelectorComponent should be shown programmatically\r\n\r\n## Event emitters\r\n```typescript\r\n @Output() onClear = new EventEmitter<any>();\r\n @Output() onBatchUpdate = new EventEmitter<CanvasWhiteboardUpdate[]>();\r\n @Output() onImageLoaded = new EventEmitter<any>();\r\n @Output() onUndo = new EventEmitter<any>();\r\n @Output() onRedo = new EventEmitter<any>();\r\n @Output() onSave = new EventEmitter<string | Blob>();\r\n```\r\n**`onClear`** is emitted when the canvas has been cleared. <br/>\r\n**`onImageLoaded`** is emitted if the user specified an image and it has successfully been drawn on the canvas.\r\n**`onUndo`** is emitted when the canvas has done an UNDO function, emits an UUID (string) for the continuous last drawn shape undone. <br/>\r\n**`onClear`** is emitted when the canvas has done a REDO function, emits an UUID (string) for the continuous shape redrawn. <br/>\r\n**`onSave`** is emitted when the canvas has done a SAVE function, emits a Data URL or a Blob (IE). <br/>\r\n\r\n# Canvas Whiteboard Shapes\r\nEvery shape in the application extends the ```abstract class CanvasWhiteboardShape```. This class adds predefined methods so that\r\nthe creator of the shape can follow them and decide how his shape should be drawn.\r\n\r\nEach shape is made of a starting position point of type ```CanvasWhiteboardPoint```, and an options object\r\nwhich may be different for each shape, and it's of type ```CanvasWhiteboardShapeOptions```.\r\n\r\nEach predefined shape must know how to:\r\n- Return the name of the shape (should be the same as the name of the class)\r\n- Draw itself given a canvas context\r\n- Draw it's preview given a canvas context\r\n- Update itself given a ```CanvasWhiteboardUpdate```\r\n\r\nAll of the predefined shapes are registered and available in the CanvasWhiteboardShapeService which the user can have to register/unregister additional shapes.\r\n\r\nTo create a new shape, you must create a class which extends the ```abstract class CanvasWhiteboardShape``` .\r\n\r\nFrom there you need to implement the required methods.\r\n\r\nAfter all of this is complete, you need to register this shape in the canvas whiteboard shape service (for the sake of convention).\r\n\r\n```typescript\r\nclass AppComponent {\r\n     constructor(private _canvasWhiteboardService: CanvasWhiteboardService, private _canvasWhiteboardShapeService: CanvasWhiteboardShapeService) {\r\n            _canvasWhiteboardShapeService.registerShape(RandomShape);\r\n     }\r\n}\r\n\r\nexport class RandomShape extends CanvasWhiteboardShape {\r\n    linePositions: Array<number>;\r\n\r\n    constructor(positionPoint?: CanvasWhiteboardPoint, options?: CanvasWhiteboardShapeOptions) {\r\n        // Optional constructor if you need some additional setup\r\n        super(positionPoint, options);\r\n        this.linePositions = [];\r\n    }\r\n\r\n    getShapeName(): string {\r\n        // Abstract method which should return a string with the shape name\r\n        // Should be the same as the class name\r\n        return 'RandomShape';\r\n    }\r\n\r\n    draw(context: CanvasRenderingContext2D): any {\r\n        // Tell the canvas how to draw your shape here\r\n\r\n        // Use the selected options from the canvas whiteboard\r\n        // Object.assign(context, this.options);\r\n\r\n        // Start drawing\r\n        // context.save();\r\n        // context.beginPath();\r\n        // context.stroke();\r\n        // context.fill();\r\n        // context.closePath();\r\n        // context.restore();\r\n    }\r\n\r\n    drawPreview(context: CanvasRenderingContext2D): any {\r\n        // Provide info or update this object when it's needed for preview drawing.\r\n        // Example: The CIRCLE selects the center point and updates the radius.\r\n        // Example: The RECT selects 0,0 and updates width and height to 100%.\r\n\r\n        // Then call the draw method with the updated object if you want your shape\r\n        // to have a proper preview.\r\n\r\n        // this.draw(context);\r\n    }\r\n\r\n    onUpdateReceived(update: CanvasWhiteboardUpdate): any {\r\n        // Choose what your shape does when an update is registered for it\r\n        // For example the CircleShape updates it's radius\r\n    }\r\n\r\n    onStopReceived(update: CanvasWhiteboardUpdate): void {\r\n        // This method is optional but CAN be overriden\r\n    }\r\n}\r\n ```\r\n\r\n## Unregistering Shapes\r\n\r\nThe default shapes can also be unregistered. Example:\r\n```typescript\r\n@Component({\r\n  selector: 'app-root',\r\n  templateUrl: './app.component.html',\r\n  styleUrls: ['./app.component.css']\r\n})\r\nexport class AppComponent {\r\n  constructor(private canvasWhiteboardShapeService: CanvasWhiteboardShapeService) {\r\n    this.canvasWhiteboardShapeService.unregisterShapes([CircleShape, SmileyShape, StarShape]);\r\n  }\r\n}\r\n```\r\n\r\nNOTE: There must be at least one shape registered for the canvas to work, but for the sake of convenience, all of the default shapes have been exported (maybe someone would want to unregister all of them and register his own shapes), but it is recommended not to unregister the FreeHandShape.\r\n\r\n# Canvas Whiteboard Shape Selector\r\nThe `CanvasWhiteboardComponent` is now equipped with a shape selector (since the free hand drawing is now a shape because of consistency),\r\nThe shape selector can be managed or hidden with inputs, and it basically calls the `CanvasWhiteboardShapeService` and draws all the\r\nregistered shapes so that they can be selected. They are drawn with the selected fill/stroke color for preview.\r\n\r\n![CanvasWhiteboard shape preview](example/canvas_premade_shapes_selector.png)\r\n\r\n# Canvas Whiteboard Service\r\nThe ```CanvasWhiteboardService``` will be used by the canvas to listen to outside events.\r\nThe event emitters and ViewChild functionality will remain the same but with this service \r\nwe can notify the canvas when it should invoke a specific action\r\n\r\nExample:\r\n```typescript\r\nexport class AppComponent {\r\n  constructor(private _canvasWhiteboardService: CanvasWhiteboardService) {}\r\n \r\n  public receiveNewMessage(newMessage: any): void {\r\n     switch (newMessage.type) {\r\n       case VCDataMessageType.canvas_draw:\r\n         let updates = newMessage.data.map(updateJSON => CanvasWhiteboardUpdate.deserializeJson(JSON.parse(updateJSON)));\r\n         this._canvasWhiteboardService.drawCanvas(updates);\r\n         break;\r\n       case VCDataMessageType.canvas_clear:\r\n         this._canvasWhiteboardService.clearCanvas();\r\n         break;\r\n       case VCDataMessageType.canvas_undo:\r\n         this._canvasWhiteboardService.undoCanvas(newMessage.UUID);\r\n         break;\r\n       case VCDataMessageType.canvas_redo:\r\n         this._canvasWhiteboardService.redoCanvas(newMessage.UUID);\r\n         break;\r\n     }\r\n  }\r\n}   \r\n```\r\n### Requesting the full update history so far\r\nCan be called via the method  `getDrawingHistory(): CanvasWhiteboardUpdate[]`. The items will be deep cloned for consistency using lodash.\r\n\r\n## Saving drawn canvas as an image\r\nIn order to save drawn images you can either click the Save button in the canvas, \r\nuse the short Ctrl/Command + s key or get a reference of the canvas and save programmatically.\r\n\r\nExample, save an image whenever an undo action was made:\r\n\r\nHTML: Create a canvas view reference with some name (ex: #canvasWhiteboard)\r\n```html\r\n<drizm-whiteboard #canvasWhiteboard>\r\n</drizm-whiteboard>\r\n```\r\n```typescript\r\nimport {CanvasWhiteboardComponent} from '@drizm/ng-whiteboardd';\r\n\r\nexport class AppComponent {\r\n\r\n  @ViewChild('canvasWhiteboard') canvasWhiteboard: CanvasWhiteboardComponent;\r\n\r\n  onCanvasUndo(updateUUID: string) {\r\n    console.log(`UNDO with uuid: ${updateUUID}`);\r\n    \r\n    //Returns base64 string representation of the canvas\r\n    let generatedString = this.canvasWhiteboard.generateCanvasDataUrl(\"image/jpeg\", 0.3);\r\n     \r\n    //Generates a IE canvas blob using a callbak method\r\n    this.canvasWhiteboard.generateCanvasBlob((blob: any) => {\r\n       console.log(blob);\r\n    }, \"image/png\");\r\n    \r\n    //This method uses both of the above method and returns either string or blob\r\n    //using a callback method\r\n    this.canvasWhiteboard.generateCanvasData((generatedData: string | Blob) => {\r\n        console.log(generatedData);\r\n    }, \"image/png\", 1);\r\n    \r\n    //This method downloads the image using either existing data if it exists\r\n    //or creates it locally\r\n    this.canvasWhiteboard.downloadCanvasImage(\"image/png\", existingData?, \"customFileName\");\r\n    \r\n    //If you need the context of the canvas\r\n    let context = this.canvasWhiteboard.context;\r\n  }\r\n}\r\n\r\n```\r\n## Image of canvas\r\n![CanvasWhiteboard](example/canvas_draw.png)\r\n\r\n## Canvas whiteboard color picker (CanvasWhiteboardColorPickerComponent)\r\nA canvas component that is used to identify and emit selected colors.\r\n```typescript\r\n@Input() selectedColor: string (default: \"rgb(0,0,0)\");\r\n```\r\n```typescript\r\n@Output() onColorSelected = new EventEmitter<string>();\r\n```\r\n![CanvasWhiteboardColorpicker](example/canvas_colorpicker.png)\r\n \r\n\r\n# Example of a drawn image\r\nAn example of a drawn image and shape on the canvas with additional css for the buttons and a date:\r\n\r\n![Image in CanvasWhiteboard](example/canvas_draw_image.png)\r\n\r\n\r\n# Example of a full fledged WebRTC app which shares drawing signals\r\n![Image in FulFledged WebRTC App](example/canvas_demo_app.png)\r\n\r\n## Current limitations\r\n\r\n- If there are problems with the sizing of the parent container, the canvas size will not be the wanted size.\r\nIt may sometimes be width: 0, height: 0.\r\nIf this is the case you may want to call a resize event for the window for the size to be recalculated.\r\n```typescript\r\n    if (this.isCanvasOpened) {\r\n      setTimeout(() => {\r\n        window.dispatchEvent(new Event('resize'));\r\n      }, 1);\r\n    }\r\n```\r\n","readmeFilename":"README.md"}