{"_id":"@pwabuilder/pwa-inking","_rev":"36-deaae07e3bf85f75fda4a139bd03d451","name":"@pwabuilder/pwa-inking","dist-tags":{"latest":"1.0.16","beta":"1.0.14"},"versions":{"0.5.0":{"name":"@pwabuilder/pwa-inking","version":"0.5.0","description":"","scripts":{"start":"concurrently \"tsc --watch\" \"es-dev-server --app-index index.html --node-resolve --watch --open","build":"tsc && rollup -c"},"author":"","license":"ISC","dependencies":{"es-dev-server":"^1.45.1","idb-keyval":"^3.2.0","lit-element":"^2.2.1","pointer-tracker":"^2.2.1","typescript":"^3.8.3"},"devDependencies":{"@rollup/plugin-strip":"^1.3.3","rollup":"^2.3.3","rollup-plugin-minify-html-literals":"^1.2.3","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-terser":"^5.3.0"},"gitHead":"ceac67cdfee02549b206682b058834cc699b7454","_id":"@pwabuilder/pwa-inking@0.5.0","_nodeVersion":"13.9.0","_npmVersion":"6.14.2","dist":{"integrity":"sha512-NjzgXRgpN/iyqNjbcppsoKeCC1GEQZCvBIktntb2++vpz81Le+IJqHz6kKztxmnmouN4UAdAvrwtTSna67GC6g==","shasum":"f5b26ae071ac5d67da0d42a928fec55185a4f9a0","tarball":"https://registry.npmjs.org/@pwabuilder/pwa-inking/-/pwa-inking-0.5.0.tgz","fileCount":22,"unpackedSize":170015,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeucloCRA9TVsSAnZWagAA3nsP/1wGqGZcksAvxcT2FgD8\nGCv75nCtYpeojqziNoZoP4YVaxqWrIzUbmFZQy8f81yGdhUkW6JP/TRdnJ7J\nDO4u+j7waOr2ASXg7LNWOpvksekR+MKuUMYCRvw0UR/ErXuOospGLjslM0n1\nmXW9R8hih1xp1IYG+UGs7snzo6HI9QVDt7XSfCEoqiw+3pPKM82eLd972fzs\nCtZXB2rJMzkverz7Bj/61YFKNyk1MiUJEOgJtdEib4iu2TZ3KX+2sXSEgKAc\nv+wm7mS9E/FBG7ymC7au6zkCkfVqRol4DFMIQiETp+zfr3ao0hNyik+7ivWh\n4Bn6MHnd4G7s8Hgd5tjuY0+Fv+U06B1sLl6WSQpWGvEyXNclE3yKZxsYpCZN\n4MZo4wLWjp/xkH/99pIrpFGOXDvCTPDYPFMN2oHOoBcu0VpQejPleF+K8cPT\nR9wUg4+Dsq7Rrdre8nKU4KUxu/hcmHc2gypuzsAnmSLNKEei0oK7nJbXz5ds\noVzqgoZD6yyYF+RKYD/Ilo6Tli/TDDmBvozBBYk+FAgOe/HeIuYlc0/PtUJ2\n62plZl0gDYwXUthKU1qCp0ihF1DgRJEcrNBeGPwHGuby/wVGi09vCD+KXJCK\ndWhwVUPLoZU7hS2HHqhOBzYbJTNjtXP+TImzImP9B9RxGT4nJYqCkeCCGds/\nL/wK\r\n=f1Ea\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH4OI1AlKtsPNRGB46RblIUI2g+1yiUZv3BgKAzRitr8AiBJbOyUD9NuSNMqF/kkg8U4QJzDU0s1vmNJO4dtas2KYg=="}]},"maintainers":[{"name":"pwabuilder","email":"juwillis@microsoft.com"}],"_npmUser":{"name":"pwabuilder","email":"juwillis@microsoft.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/pwa-inking_0.5.0_1589234023820_0.7486721923688784"},"_hasShrinkwrap":false},"0.5.1":{"name":"@pwabuilder/pwa-inking","version":"0.5.1","description":"","main":"dist/index.js","module":"dist/index.js","scripts":{"start":"concurrently \"tsc --watch\" \"es-dev-server --app-index index.html --node-resolve --watch --open","build":"tsc && rollup -c"},"author":"","license":"ISC","dependencies":{"es-dev-server":"^1.45.1","idb-keyval":"^3.2.0","lit-element":"^2.2.1","pointer-tracker":"^2.2.1","typescript":"^3.8.3"},"devDependencies":{"@rollup/plugin-strip":"^1.3.3","rollup":"^2.3.3","rollup-plugin-minify-html-literals":"^1.2.3","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-terser":"^5.3.0"},"gitHead":"70abbb6e4872ff8808bfaf1bb46bec9e9f6b57f7","_id":"@pwabuilder/pwa-inking@0.5.1","_nodeVersion":"13.9.0","_npmVersion":"6.14.2","dist":{"integrity":"sha512-FUClhImVPCkkX65jFWBK+4DaEQCaRCaU8i8/xy38DI/vDHVMBsyNEhDvs4tM1Lorn1G9LRRHnlLaohkdOrhVDw==","shasum":"4f72a3b0dc14c675e0a872a3fd45ed9444289bb1","tarball":"https://registry.npmjs.org/@pwabuilder/pwa-inking/-/pwa-inking-0.5.1.tgz","fileCount":31,"unpackedSize":888230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeudhyCRA9TVsSAnZWagAAmp4P/RIwwyhbsCmBBjXKzxeo\nMSp3Ut70X1F0jjXDgsuXmoHOIa+gSwCwCVnEAT3L3aSIYWgUlzh3PyD3g5dC\ns8B5GpArwQm00I/61kE1N4Xyn+RGZ80/7YaXl/4zXSgXPLAO28IPZpjtGyFY\nv2uF+u350sVsWbG93zSkd0lW2WNNaMwJ9c1e2mNICBGFdyPGpEF59zmgKUDx\nRxM5KImYDGxX8U1di1o+11dYt0jWHLZofnIzQFldgRWzOPpoex0XJ9UF4cp2\nir0z+wiW09vpeJbgu4uIrQdMDfg8lZEy9LzSSc8WooOqhpOzjkxv34vVQHA/\nWjJSLB7+1EIhiSfY5JLmRNnv1U2LDGJb/WiBIIWquvwvjEIOX1dgHSn4M74H\nLKgDm5HJQw8XIVHXd/At8dI6KJ6U5ApE35APPuZLnEaA0rZbZU03pq9g/iUc\nvDSEIW0pbA6k0rBzV4O8FAawtX6tO8BsgCAG/HpGVs7aFICnu6/osCqBQkcQ\nUImVMaRIP2KyZhnNld08woC9XhelTPI11kllad9Oi3uc6F39g9167RW3EPTJ\n5Pgv1N9FwZBDDlq/fQjx/n+d/17pV+gBWLIcus8BYIlccf7o9Rv0EKXsieBV\nZjI6TDHuF5V6zgPn6U6RVutk2yaXMpCOW+vtzVK0D18N28HLmXZikTzJpFtr\n+Asr\r\n=QiLn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC52WvYnQiVSn5gd2NOvouQ/bv9+1zq11L0WjPlMg7vmAIgDtMEUCxLveF31D15LI7T0y/l3Fp2Zr7QBlCbPV08obk="}]},"maintainers":[{"name":"pwabuilder","email":"juwillis@microsoft.com"}],"_npmUser":{"name":"pwabuilder","email":"juwillis@microsoft.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/pwa-inking_0.5.1_1589237874422_0.5314330932823457"},"_hasShrinkwrap":false},"0.5.2":{"name":"@pwabuilder/pwa-inking","version":"0.5.2","description":"","main":"dist/index.js","module":"dist/index.js","scripts":{"start":"concurrently \"tsc --watch\" \"es-dev-server --app-index index.html --node-resolve --watch --open","build":"tsc && rollup -c"},"author":"","license":"ISC","dependencies":{"es-dev-server":"^1.45.1","idb-keyval":"^3.2.0","lit-element":"^2.2.1","pointer-tracker":"^2.2.1","typescript":"^3.8.3"},"devDependencies":{"@rollup/plugin-strip":"^1.3.3","rollup":"^2.3.3","rollup-plugin-minify-html-literals":"^1.2.3","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-terser":"^5.3.0"},"gitHead":"2c6a8b7e1dec7163a7352e9bd7d67b2c799daca0","_id":"@pwabuilder/pwa-inking@0.5.2","_nodeVersion":"13.9.0","_npmVersion":"6.14.2","dist":{"integrity":"sha512-vy1b2Rvqf2WYa4EKYekC7j6/9Hyf9P928z90DRDIWT6puzib+K7B5YHLyXdtoNoCs+I9QOI34eY6ocLAS7W10Q==","shasum":"c2a610a85483e2315edee2ecb047a47a78b53674","tarball":"https://registry.npmjs.org/@pwabuilder/pwa-inking/-/pwa-inking-0.5.2.tgz","fileCount":31,"unpackedSize":889174,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeur3bCRA9TVsSAnZWagAAsbEQAIx1jNPBzA+wS48ppnf0\nwAf6cFtOo1zB5tGmHWF825QxLUIdDTzqMP41YJukAQ9yUXO8iyxw4mkd3Mq/\nRKfTaW9Hfym+1eC+OIrrL2t31UchnCxsUvSmXuYagggu/1SEXns4jsn9a4cG\n+71jVFBUmJHRvqPTa4NnWo2JqB9y30IxyC2eNPLLz8FzSCbnnxJQ8/8+ydqu\ngambpq7e5a8rTYaIO8OFLv6HwCiDgxOGSSVBVZtyRLhEkaXeZpniksOAVrqI\nf5FGSljUX/2hG4R+9x/mNtUD9ltIFtTqkp9Bf1qM+yOaDQeNIjKAulrn5knL\narjJDwYP5qlPlhLB1nRtwGhc2+LfwYehSYsIKay4iCEAm640kFe6LMVbFlnq\nlbsRPIFH06Y6qoL+NBORr57GwHRpwtgfAxbfydWWPdF+Xk0We0SunfKyLMvP\n9e2bFKK16FXZ0DB3lUiizPqNkDmUAIucGCr1DR7st7/GPbyVifu3iBElg68m\nWl51YJi8M0CP92eVf8EVy75HeGtKE3BFSj2e5eBbsego1gdsa0Clx86TOP+n\nyScsKBOTmHyJpqVMLEpmqX1hr84UyEj6UUz8AGOW1cu8kSD95dKc4UnCzy4e\nX/hO2WVdIOvmvmkJVmhAQ8+8E5tQzv1jD+JXxvGsLPCoALhDFu4xXYbN+6Rg\nU4HY\r\n=BRMm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD/QumKQtbLu+AI5MOvZ1ILejdguiu++eFdat6eQREqPAIgJZpaBHWybMrQIkpxcaN0KvQvJB2n3dm83lf0YGBaMUI="}]},"maintainers":[{"name":"pwabuilder","email":"juwillis@microsoft.com"}],"_npmUser":{"name":"pwabuilder","email":"juwillis@microsoft.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/pwa-inking_0.5.2_1589296602911_0.23854574250964178"},"_hasShrinkwrap":false},"0.5.3":{"name":"@pwabuilder/pwa-inking","version":"0.5.3","description":"","main":"dist/index.js","module":"dist/index.js","scripts":{"start":"concurrently \"tsc --watch\" \"es-dev-server --app-index index.html --node-resolve --watch --open","build":"tsc && rollup -c"},"author":"","license":"ISC","dependencies":{"es-dev-server":"^1.45.1","idb-keyval":"^3.2.0","lit-element":"^2.2.1","pointer-tracker":"^2.2.1","typescript":"^3.8.3"},"devDependencies":{"@rollup/plugin-strip":"^1.3.3","rollup":"^2.3.3","rollup-plugin-minify-html-literals":"^1.2.3","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-terser":"^5.3.0"},"gitHead":"5ab506935bc83bf0cdb55170955d87ef0608ff4f","_id":"@pwabuilder/pwa-inking@0.5.3","_nodeVersion":"13.9.0","_npmVersion":"6.14.2","dist":{"integrity":"sha512-N5jBXeIQg+JoFG646h10stfHiCYn+QfFAcEM6zaAf8jc8N/az6Otn9TH3kTh4kpFQWWQE6+oLtDlZjSWdlA74A==","shasum":"3d1c37887df3e63cf6ce07ebc90dd415a7859a72","tarball":"https://registry.npmjs.org/@pwabuilder/pwa-inking/-/pwa-inking-0.5.3.tgz","fileCount":31,"unpackedSize":891267,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeusTECRA9TVsSAnZWagAARJgP/1nXRxTL8HOOMzCZAxrI\nEIbvkfqXPJ2lUpSIh7RQn7obQcQBSiEIjsRzA3pp1jzcSvjfqfmedg2zvQ1v\ne5Xl/2eMgETkyB3iwxldEvKk75ODyAsnoMtaLa10sDbBzesN9m4uN/C2ib0W\naJ0iKVG0+qTq3lc7JhfwW1ZMnrc0Qn0ktzF/yvB4zuz5tGmuFGVnk0brm0oS\n3mKTx80U9TqWTEQ3PCPntdVPgNa/EWI3Tt2ibJSpG7lg1q+3lEqvmmhghK3E\n4ZLshpG7NHJzIUVaH+saMDhmAD5I+ChoP5v/PhyQ3t5N/YidnLVrM4OmkHgY\n3jqaYfjJLDLSzaFgZKvGuXyyE7IZYDER+oKJSM7pEbCv7/pdOCU6obUtBG65\nptN4Q1Po2VW0JoeHP5gXn83jBS+2uVUFLakGV9TTxaq4hjSTMWau8AxzKUzt\nOSYBpjtS+JJzRd7iQrsoOPMp4+QeInUE3v9XYM+Twke29GWFNmjHAiVmRpsB\nMhAZhq38YARcoyxJCx1vQ2u2zO2J8Ltw7kOnXG8s/BdpVdkeQTex7TRQoFpQ\ni8zw4F18j+LsgvU1Cycvz9ItE8fXUixkR8vduTpPdxli3MNfiwxxB6QuNft8\noKkwS2nWNUcDvqE8psz6b/ZiIDE3JCNpbt5lHH6MaQX6t/kBrkzYgTJ4RUgX\nSK2A\r\n=Jl4W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG+955Mz87C+G/C/rj740MTPmfJobACa8uE5JszCRbg/AiEAihHSe4WwQZxkkUIFv2UZJFQDHeyl0Dd2kerS/BVXdLI="}]},"maintainers":[{"name":"pwabuilder","email":"juwillis@microsoft.com"}],"_npmUser":{"name":"pwabuilder","email":"juwillis@microsoft.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/pwa-inking_0.5.3_1589298372156_0.7591705494804202"},"_hasShrinkwrap":false},"0.5.4":{"name":"@pwabuilder/pwa-inking","version":"0.5.4","description":"","main":"dist/index.js","module":"dist/index.js","scripts":{"start":"concurrently \"tsc --watch\" \"es-dev-server --app-index index.html --node-resolve --watch --open","build":"tsc && rollup -c"},"author":"","license":"ISC","dependencies":{"es-dev-server":"^1.45.1","idb-keyval":"^3.2.0","lit-element":"^2.2.1","pointer-tracker":"^2.2.1","typescript":"^3.8.3"},"devDependencies":{"@rollup/plugin-strip":"^1.3.3","rollup":"^2.3.3","rollup-plugin-minify-html-literals":"^1.2.3","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-terser":"^5.3.0"},"gitHead":"5ab506935bc83bf0cdb55170955d87ef0608ff4f","_id":"@pwabuilder/pwa-inking@0.5.4","_nodeVersion":"13.9.0","_npmVersion":"6.14.2","dist":{"integrity":"sha512-Pbzh9tlSzXjksmWylnO1nceMEcHrdLQw3srBGulZzd9WJ75sl/s8Tov7y5wXi9atj7SRRz0czJHKzXJBhymCOQ==","shasum":"e3ba3e038981bc96f20dc574b98c256f63b4d29b","tarball":"https://registry.npmjs.org/@pwabuilder/pwa-inking/-/pwa-inking-0.5.4.tgz","fileCount":31,"unpackedSize":890511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeutEGCRA9TVsSAnZWagAAcwQP/joIt0Poa970v8w6NsZ9\n5ZpAlWsJVIldRQhpLuycwBGpPL9stb6g39ap2bbJe1Qk4eurIKCRGd3Fec2C\n5PUvv+yW7XqNxwNSxf6gipwRrYQiO5as9ZDAqmD0p1PFt2JA6C2MjnwwAwKj\nLHNbugt07LK/LzPOtVA/GvLRxR0gjKbHvOG5sr12gsD8zYI/GPERZ5mAfHsR\nhGqDvJ1pnjwcu94Mke7Fa3p0qfDscO3DO/0eEjZV9MuwzK/EKnlmT+6PapTz\nYkgw4X3AEnpaR9CQgRAheoREEC3wcaMJmaNKzyy4ToXA/MSfNXkh58q5MFFW\nvkCEE+snHafD6GaaaBsVReewW3Rv5CeaAJGvmlAMIddXhVuoADQz/Bi7x7oK\nhR2QRZdU8tr65v0PP6PsFUmDf/kYGkecXrnc4TT8AvpSwwZZgksLJXJhrYqp\n0BqHgA2zrkexgd6EJyrxn69HoD4V9RNws7QKyMEgzdrXt6vgIi6Xq1+cdfDp\nRCImBIyGm53SAlZrJgYZwE/3zzA0FQzmGSXIjPjVb7YQmKexJaCyFnRQu8C5\nMwsf0OEYbqDvpOPEmLo9UiJKQbXNRmPXQ4ETChhUtm04gRRP96iKw1wmxaOb\nx8UdiN6D+IB8qzeVGWPR2KeHjyfy2e/YOg0/e9oDQznI+/oXSwZ2lW8+83xm\n8WS2\r\n=EN2u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDmoK0hPVMMQRXaIrsETN/FjcFN+5Sdq26GsZEQqmP9PgIhAJEiz/K+NQJSbegghfig4wk6/Cr6bsvEGrGF+MrouP0a"}]},"maintainers":[{"name":"pwabuilder","email":"juwillis@microsoft.com"}],"_npmUser":{"name":"pwabuilder","email":"juwillis@microsoft.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/pwa-inking_0.5.4_1589301510046_0.061167004406718295"},"_hasShrinkwrap":false},"0.5.5":{"name":"@pwabuilder/pwa-inking","version":"0.5.5","description":"`pwa-inking` is a [web component](https://meowni.ca/posts/web-components-with-otters/) from the [PWABuilder](https://pwabuilder.com) team that allows you to quickly add a 2D inking canvas (with an optional toolbar) to your Progressive Web App!","main":"dist/index.js","module":"dist/index.js","scripts":{"start":"concurrently \"tsc --watch\" \"es-dev-server --app-index index.html --node-resolve --watch --open","build":"tsc && rollup -c"},"author":"","license":"ISC","dependencies":{"es-dev-server":"^1.45.1","idb-keyval":"^3.2.0","lit-element":"^2.2.1","pointer-tracker":"^2.2.1","typescript":"^3.8.3"},"devDependencies":{"@rollup/plugin-strip":"^1.3.3","rollup":"^2.3.3","rollup-plugin-minify-html-literals":"^1.2.3","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-terser":"^5.3.0"},"gitHead":"a98d5291d4a8c4ab2f64fdfff9b2c5557c029148","_id":"@pwabuilder/pwa-inking@0.5.5","_nodeVersion":"13.9.0","_npmVersion":"6.14.2","dist":{"integrity":"sha512-9rkJodzGvyypYliG8Z+6+2e6320nYMEBVt/o7nfEsbKsEYnBL1jLzSkJ93AwAEF2F8oTdKOlayQBYv9BD8/9Bw==","shasum":"da411e97c0330302b21bc0cbaf8d3da329c927af","tarball":"https://registry.npmjs.org/@pwabuilder/pwa-inking/-/pwa-inking-0.5.5.tgz","fileCount":33,"unpackedSize":1119054,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevJDJCRA9TVsSAnZWagAASqwQAJ5KSzf6WI4756N3WCfO\nUXD0LnroCBuOcsvApprxPdjuPTLwBGlpa0WxeypNo4wM1iAocc0RQFWJNq0F\niFbH4s/xhHi9sRDd41pUWZcIYrGpfOTc0luQmbA6wkYFk+mftH6+kYeOCib0\nFd+IZKQVYBJCKYAXkDUO3roa9Un57D8O9eOUDDC6u+kUKfvEflLCihM0GAJ4\nqOU9hJt9zjbg+RHTbtpdeZBhT0oXpvGAAjB0ztDsK7aC8nYQ4IeLpc3xph9d\n3u/B8AbHaiMJn2Aww7otuY27wZ16qD/Vc4usjmAzFqO2a2AsdPG8QBzCQPiJ\nKNsf9RM3bm3/Wu0AtlGPxa8JWQOYh4lW+QBUcWjVM89BcdXik05ioqdSFR+9\nSv29e0BQvGWhEzS0fBF3PAmk3J8yh/Oa+X0F/KFnt5E5W6rzirIpmjWEXE1D\nN2IDF9CCpuR0huIFtQjF70oXMqmNxHEtAvgHVm/ozhM1EHfweUs4/ELZSae+\nbJyLtAzoCOx2T6zzdB28PuyQg/sN+IT1vBd0RJd1Qfw/Mxsucgst2wEgrG81\ns/j+MmbRREPmjqJdfdlOsUVgivXv2z8dzge0aXUFTWfQYvOXYzJ7/zdSQlQd\nitk+kBBHmIfaqWpdH3ymuo3Yc7hBUTf67y8Q6BorW4NMB660/KQDaeNoqMJW\njw/Z\r\n=aZzU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCyKbB3utppKtULoDXn/XiLuuDWDdQmEah46S/RV9OHUgIgD7N5BaAmd9vMgHwoUCLD20EEJtg04EwWd+0oC0W4lQY="}]},"maintainers":[{"name":"pwabuilder","email":"juwillis@microsoft.com"}],"_npmUser":{"name":"pwabuilder","email":"juwillis@microsoft.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/pwa-inking_0.5.5_1589416136548_0.5203739850029396"},"_hasShrinkwrap":false},"0.5.6":{"name":"@pwabuilder/pwa-inking","version":"0.5.6","description":"`pwa-inking` is a [web component](https://meowni.ca/posts/web-components-with-otters/) from the [PWABuilder](https://pwabuilder.com) team that allows you to quickly add a 2D inking canvas (with an optional toolbar) to your Progressive Web App!","main":"dist/index.js","module":"dist/index.js","scripts":{"start":"concurrently \"tsc --watch\" \"es-dev-server --app-index index.html --node-resolve --watch --open","build":"tsc && rollup -c"},"author":"","license":"ISC","dependencies":{"es-dev-server":"^1.45.1","idb-keyval":"^3.2.0","lit-element":"^2.2.1","pointer-tracker":"^2.2.1","typescript":"^3.8.3"},"devDependencies":{"@rollup/plugin-strip":"^1.3.3","concurrently":"^5.2.0","rollup":"^2.3.3","rollup-plugin-minify-html-literals":"^1.2.3","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-terser":"^5.3.0"},"gitHead":"3aa4fcf4cd4f3d30a6c51ff743baf21775f3e660","_id":"@pwabuilder/pwa-inking@0.5.6","_nodeVersion":"13.9.0","_npmVersion":"6.14.2","dist":{"integrity":"sha512-rHLgWh/isucukXGL5XVhAANYZdL3Km0NDxcTPDauZzkTVPbEfLGbokvkF8+tonsfIQ3lPniPmujXSCg8jIofOA==","shasum":"5ef32c08c690eb562119f65b0919a7ee29d954d0","tarball":"https://registry.npmjs.org/@pwabuilder/pwa-inking/-/pwa-inking-0.5.6.tgz","fileCount":34,"unpackedSize":1111473,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1uYMCRA9TVsSAnZWagAA8BAP/2sM/3NwkkKwZTUWRkF1\nkZu1KZK3i9JnYYNHE3MnhY0xcc/tnWWBbP63j+TN399ZOFXcoQ69MVMWDQ75\n3U0sTrUtpJx8HzABiK8rFvbdvmUeLS7/GizRmTVRoDCHdD9qwTXpc2pKDcD7\nMvzVs4LEAxkSyITjxjAs9SmcRSTQMSx4z7+4wQ6X5Z3ZslM0en+jAq6CTDor\nTfvdrz3hTgUJmklJ2UVdKLR15MOyNMlKifW0TX9hmIG54+m4yeZ39nFdxxfQ\n/HyWVjkpJ2TH7lBJBQql4P4tkjrwpfEa8ctdrefxvO/Qo6c0oizJZFNOwRIR\n7PEXV/ARI5tak2QwteNVPFwMYjvbcnKoRTERg2XIOoPFSRoHC4R2T56Jh1aA\nmAlTFjhgBOyewyl6L5llfhYxEvzXpXAJcK1aIpgjQQ2twucFF3rw6DsGkKBO\nHGEpL4LEBhRQKfDdTMrwM9cshvd9gUiVSvg8juQORsP/wXWc92Vb8SkmFFdG\nflX3S44cJjOtth8Wa65HE0sqmlhTFwqG9dq9bnVDSXpWnuSpAXyMDJ31irRJ\nBi3EvX4s9iL1Wnj52zThCksLx+1Y4+aU46WtwGtkXxoOl7gk+y5b2eaLLVke\n3cWqieKBRcTyJIvRA5Nu8VPyKc6JldzOZtG4T7UlElfbPuKZjOUcrK/GfFhZ\n6nYG\r\n=+7Or\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC74aluw5HmzQWVpKvDx7jHU3A4PJnsowP2W8ElPE90KAiEAw9Ilf/Bw8WxX5N90ZHm0sWz9rcZUeiGYnJhzoL5alwQ="}]},"maintainers":[{"name":"pwabuilder","email":"juwillis@microsoft.com"}],"_npmUser":{"name":"pwabuilder","email":"juwillis@microsoft.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/pwa-inking_0.5.6_1591141899856_0.09774175698224852"},"_hasShrinkwrap":false},"0.5.7":{"name":"@pwabuilder/pwa-inking","version":"0.5.7","description":"`pwa-inking` is a [web component](https://meowni.ca/posts/web-components-with-otters/) from the [PWABuilder](https://pwabuilder.com) team that allows you to quickly add a 2D inking canvas (with an optional toolbar) to your Progressive Web App!","main":"dist/index.js","module":"dist/index.js","scripts":{"start":"concurrently \"tsc --watch\" \"es-dev-server --app-index index.html --node-resolve --watch --open","build":"rimraf /dist && tsc && rollup -c","ts":"tsc"},"author":"","license":"ISC","dependencies":{"es-dev-server":"^1.45.1","idb-keyval":"^3.2.0","lit-element":"^2.2.1","pointer-tracker":"^2.2.1","typescript":"^3.8.3"},"devDependencies":{"@rollup/plugin-strip":"^1.3.3","concurrently":"^5.2.0","rimraf":"^3.0.2","rollup":"^2.3.3","rollup-plugin-minify-html-literals":"^1.2.3","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-terser":"^5.3.0"},"gitHead":"4725fc08c2e0cbfd35256c72968fd0e00c64fd23","_id":"@pwabuilder/pwa-inking@0.5.7","_nodeVersion":"13.9.0","_npmVersion":"6.14.2","dist":{"integrity":"sha512-HqcAG1iWnjr6uGyaqzlm+SIzpIx77zvVsDgP3uFgRNdOs0ih+XXQIoXz6SRpVBqAxjLVLCNqagBn02zDHlTbSw==","shasum":"b9d6712f9990ab0abfadd174b85bfcd6ed05a811","tarball":"https://registry.npmjs.org/@pwabuilder/pwa-inking/-/pwa-inking-0.5.7.tgz","fileCount":28,"unpackedSize":743275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3q4kCRA9TVsSAnZWagAA7w8P/2r8bewawLzn9epIyf2P\noQiaE+JpnKuUIGAp4y1s8HsqeCT66lI2OYTI05G4ezcasQX/nDgtDmiuJLRN\nKM24B/sfbk6Pa9fPHJOYHA+neg1q4JkWYf6hSpvhINVJS4HD2G/bOHAmLQDB\nFB6ApyJCfSr/MrfLmOHY1BMdDjtIpfS/lGGcA5a1Wt/WcYLmI1rYkyqWj/BD\nify0UJmPHRT/APx4ZGweKbgEdmXlKpym4puHetynC1dTETCBT11Njsygg7Zc\nZL1wF66K7YCsG64ojiQvVjBt/B4CVu4h/JkJ2zZZLAqp+c80+hmIO1nnZ4lp\nuIhERLdATFbC30q9WQWGM2imb+jVUWG/zjBa+S5knz2Cud/MkNCzOv4i5n6P\n7CGQReGXHivtKWV7JajLSIiAViqFcWpm1EyI+/t2OM8svN0Iz0D1ziNmndQA\n7xjty9czXNlNHDJ76nIvbPPGozH+4reS2E1C/AJQe9gVu+o+8ruFflV5XK/k\nfjQlurl/rxpXKMyVZb9HYo1TbwCwgrznMGOQxyfEeKKtzj3LgIBPMVhh86a1\n7sG+DKA/8cOuhkcr/XhxSk1kOuGZZ60BUrg2NHx8HK366wtwUXyry2fGELmy\nFlJIQXTMTs0GZ2exHFcQdxjivMzKLR2es9Ulo9iwTD0B85JZyLUtEa9yGa5p\nK778\r\n=321f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDhQIdR2///YgQtQ1s16tpfamkuhg2tRFByrpdpEVgZLAiEAi1JtmUhsPqIx0aAjLGe3uUDU6PnbukDJRlo/VjA78sk="}]},"maintainers":[{"name":"pwabuilder","email":"juwillis@microsoft.com"}],"_npmUser":{"name":"pwabuilder","email":"juwillis@microsoft.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/pwa-inking_0.5.7_1591651875608_0.3407459408101119"},"_hasShrinkwrap":false},"0.5.8":{"name":"@pwabuilder/pwa-inking","version":"0.5.8","description":"`pwa-inking` is a [web component](https://meowni.ca/posts/web-components-with-otters/) from the [PWABuilder](https://pwabuilder.com) team that allows you to quickly add a 2D inking canvas (with an optional toolbar) to your Progressive Web App!","main":"dist/index.js","module":"dist/index.js","scripts":{"start":"concurrently \"tsc --watch\" \"es-dev-server --app-index index.html --node-resolve --watch --open","build":"rimraf /dist && tsc && rollup -c","ts":"tsc"},"author":"","license":"ISC","dependencies":{"es-dev-server":"^1.45.1","idb-keyval":"^3.2.0","lit-element":"^2.2.1","pointer-tracker":"^2.2.1","typescript":"^3.8.3"},"devDependencies":{"@rollup/plugin-strip":"^1.3.3","concurrently":"^5.2.0","rimraf":"^3.0.2","rollup":"^2.3.3","rollup-plugin-minify-html-literals":"^1.2.3","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-terser":"^5.3.0"},"gitHead":"23d8c40d8ab705c5a14f06858066ca1984168a54","_id":"@pwabuilder/pwa-inking@0.5.8","_nodeVersion":"13.9.0","_npmVersion":"6.14.2","dist":{"integrity":"sha512-2vkuYb1SwDchTyP8uEnTNiI09S5CLDuDWh6elUeRx7KW6HmI8Wyq9b0I5GF++F0niz1Mk+j6ZFhfFNUP/v4vOA==","shasum":"7b0945e3dfee31a73c918469f72e586122972e0b","tarball":"https://registry.npmjs.org/@pwabuilder/pwa-inking/-/pwa-inking-0.5.8.tgz","fileCount":28,"unpackedSize":743385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3rdWCRA9TVsSAnZWagAAwLIP/2XNSJm3R8XwBDP+m5V3\n9xnsJ9NE6MOUrqcUzAMeWIdFPmTU3kiqTOJGzW9qCn5hEkHA0gYIZwRodA19\nc+Am/RbUkEDS38y1UG8OiYOprrzqy0Cqb3r8Zo/xKnuS3tjhxjRYN9/SuLB+\nd3duHyceoV7wpbD1Kavsjrz4L2OkLHwQiPLF18qVE/DI4Cfl6Ca8J/M3NiDP\nUxB1ZeSTVfMbTK2yt1tR+QAJHnQT0vVqqpHKpMQEXiYrC5brpGrcC31DcmpE\nOC0VpUuXcNd8qGLyty/XdFWPxKG4+PPJrYFo0M3G77Kx8s4VLp9emDLQT/q0\n/yO5gxLI0SH8b9GepWO2x7OagNzC93Ae7vaQNtaVyDejA+1NJelhbCmqTope\nlFl89NWUsipkDbfy0St47HropwN5/fZBwIa362TVcsPjuOw+Fz+wqg+R/f3Q\n0GzAuL672pTE8xwmoQmsCGSufSnWCNxsizH5fr15FT66+l8uYmp302rlCrjq\nSNJOcRmkTWEgCB3cQy4DlHD7opFkUPmw3PNyi/VPEx1qUWK2E/3foQWjqzXg\nuLZgbEkQ5ZAwe+DhdeI92HVKQugQ/MDkJFD5xpg0Et4t5i1fAnh/C4J7EYTz\nJ3pUIsE+TMtzMX7Tsm/zHBxX885bz/jvOdXXsdvHYfwMe8DiuonREse/3U5q\nwnU2\r\n=KJbH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGjTTvsA2pi0xSGylxV+v1KnTU601tCAT37I2LlqwTIXAiEAzoKtlvYy08g/JtKAFv36L243KZymhB83UCdxA7VpKOY="}]},"maintainers":[{"name":"pwabuilder","email":"juwillis@microsoft.com"}],"_npmUser":{"name":"pwabuilder","email":"juwillis@microsoft.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/pwa-inking_0.5.8_1591654230066_0.018402296851356637"},"_hasShrinkwrap":false},"0.5.9":{"name":"@pwabuilder/pwa-inking","version":"0.5.9","description":"`pwa-inking` is a [web component](https://meowni.ca/posts/web-components-with-otters/) from the [PWABuilder](https://pwabuilder.com) team that allows you to quickly add a 2D inking canvas (with an optional toolbar) to your Progressive Web App!","main":"dist/index.js","module":"dist/index.js","scripts":{"start":"concurrently \"tsc --watch\" \"es-dev-server --app-index index.html --node-resolve --watch --open","build":"rimraf /dist && tsc && rollup -c","ts":"tsc"},"author":"","license":"ISC","dependencies":{"es-dev-server":"^1.45.1","idb-keyval":"^3.2.0","lit-element":"^2.2.1","pointer-tracker":"^2.2.1","typescript":"^3.8.3"},"devDependencies":{"@rollup/plugin-strip":"^1.3.3","concurrently":"^5.2.0","rimraf":"^3.0.2","rollup":"^2.3.3","rollup-plugin-minify-html-literals":"^1.2.3","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-terser":"^5.3.0"},"gitHead":"1693123445a11d7a0446108aa750f739dca9ffe2","_id":"@pwabuilder/pwa-inking@0.5.9","_nodeVersion":"13.9.0","_npmVersion":"6.14.2","dist":{"integrity":"sha512-O4tZFl1XHpqNMhfwHjr0eVtV69j3v5cpCVXAihclucHv+ZgW/OQ1Gmrt1JmGKk9GSBS6V76t2Qwo8yPPqfCoMg==","shasum":"872c8a4b2159bac89a950af57157379f4ed40c72","tarball":"https://registry.npmjs.org/@pwabuilder/pwa-inking/-/pwa-inking-0.5.9.tgz","fileCount":28,"unpackedSize":743501,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3s3/CRA9TVsSAnZWagAAvewQAI6z2NNF1DwXNxIQkhH9\n1ezaZKjTK51ZCSbSWjkemS2ThLNkWhAMY9u7SZu1dg/yi9UOh4IvpnBHEKau\neOPH8jsVgihM+rbjrsDbPkefafe2LQy3tiLL/8XNdS2q4qp09RdbyY89HXaT\ne4GviN2ThOHfETsGn6NJJE1/n5jN9QwI+CuxaI5ob66Fwh9HryD+Phr6eEhU\nW1gdhPdP5eD69SMfiqEWOVZuRT7XaQVSC1HuSHssb3q7Xyhe/3sbLnML11Ke\nxvxbrE55tXRhySgfD4FyRw1ge8v3PUJSGeIGXj1xcKs0PoprFzDLco0yH2Sb\neimgmPUtuEC0QzlrMsf5++BCSpxB7bxibetrda94h/c4pOkyvyvkKhTFwYOx\ntBAtkFa592fBY2VBINQ6QPS4wTzDWPfQrqG+DcgQ0rG2HknURurGw5y6oMDl\n6ptmIvItTIu4xcwOLIxEH+SgMSFl9r2UcRcFp5wi2CspwsIh2Xhhm2Ug40vP\n/12dzm70gFJBnsdin1SkzLrJu3kswu7Jctw+dACOIZrWFurY5c3wmIw46jSj\npbNYB2BXxof1+ldjb9maI4JU6IS6/4g/UGAwNwbT0k26ZyBDDHnIkiVWo6NT\n+gin43o1/+WGVWqznHA7XZXaRJ8ZvGmf3Cx7pznnn7y7Uzy7+qYI5Cl4Ogcy\n09bj\r\n=QpoN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCYFDAyxTfJ2guAA8LnZ8HZ44Nirj7TG2h2o2ANQNZ63gIhAJa4xMy2zdBLbbuUL1su8PbIEjaXIXIThkSaoG371wH7"}]},"maintainers":[{"name":"pwabuilder","email":"juwillis@microsoft.com"}],"_npmUser":{"name":"pwabuilder","email":"juwillis@microsoft.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/pwa-inking_0.5.9_1591660031079_0.8377543933981313"},"_hasShrinkwrap":false},"0.9.0":{"name":"@pwabuilder/pwa-inking","version":"0.9.0","description":"`pwa-inking` is a [web component](https://meowni.ca/posts/web-components-with-otters/) from the [PWABuilder](https://pwabuilder.com) team that allows you to quickly add a 2D inking canvas (with an optional toolbar) to your Progressive Web App!","main":"dist/index.js","module":"dist/index.js","scripts":{"start":"concurrently \"tsc --watch\" \"es-dev-server --app-index index.html --node-resolve --watch --open\"","build":"rimraf /dist && tsc && rollup -c","ts":"tsc"},"author":"","license":"ISC","dependencies":{"browser-nativefs":"^0.8.2","es-dev-server":"^1.45.1","idb-keyval":"^3.2.0","lit-element":"^2.2.1","pointer-tracker":"^2.2.1","typescript":"^3.8.3"},"devDependencies":{"@rollup/plugin-strip":"^1.3.3","concurrently":"^5.2.0","rimraf":"^3.0.2","rollup":"^2.3.3","rollup-plugin-minify-html-literals":"^1.2.3","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-terser":"^5.3.0"},"gitHead":"dbe0634f0643ff8602c80505b17de5b844b3c107","_id":"@pwabuilder/pwa-inking@0.9.0","_nodeVersion":"13.9.0","_npmVersion":"6.14.2","dist":{"integrity":"sha512-t4Lbb/OsMP+AIlnlKeSKfqMBwU79Ugt3pwYyZdqkJJIcVk/53YQaB+HEHew5jptrPGEOYI/3F5Ah6YDM1A3b9A==","shasum":"c24834b968b6debe40ad134ed2ef031a432560c1","tarball":"https://registry.npmjs.org/@pwabuilder/pwa-inking/-/pwa-inking-0.9.0.tgz","fileCount":42,"unpackedSize":877620,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe85CaCRA9TVsSAnZWagAARa0P/3HNxwmMqWNgP5+RNet1\nN0HDKc/LeKdRRyo4FkYA9hrW2ymYWtqlO4Ny8v/m0UoNp3PDoR+P70lMo8iV\nNxu8DZ49i3l+X8Wv1r7nAKLHDioGGJCXbmJNr/Dm1T6fpGlMz3mlfLdu4bGD\nZqNgr9+IuzI9wNUySd12dyx6m1QrNYAG2kUkQ94T6lf4MlKidNOip1kehK+3\nkUggOcKNGHp5k8umUUx65pbMh23DEdeQsTAcXsISLfrQW22u0q/wKGsJqAdE\nf8owSIFolGywMl1jff6Adh3RVfH9H/LgFp/Vuy4pUjbqQQzMR5vdZiIbt16v\nnJEBC7k2mjQxego4K9LnEpxp0ab34tiI13y7nloOC8A7iPpn06+uH0cuoBm/\nov5GcVcOG8Kohz2zwSmgzz4kiieNt4Ju/ed9E1Eqj2rJTPF9Xn0cMH5qQFuq\nytBAvGNxCjdVZ6jH0Jql0FXIU9v7Siq7mNwx1tsINQFJOKg/lOEC202L34EU\nGB6o03Zs23xG9y6OHqADIJxXecIFux7txCVf+j9J4CbAukYCn+CemujgrBO8\nEb4bYHl07emfLcLSI5WkYrwHSiDsM9oKrAvYAIIFMqD/PLG9J0tmprL+1u9v\n5DqnpRif0BFp2A0NP/1IQpHy3v8h4vnm+pi7fKRC59/88KRMJ4smV5RqLxzo\nGBSN\r\n=jrKD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD1B/Q+h4KaAH9aeD92hLp57+dVP57jJ7rLnNko+bFFjAIgfNPGHyAfT+/JTvLuUNic5Ast4EmSK5O4cu6bRn4GPRc="}]},"maintainers":[{"name":"pwabuilder","email":"juwillis@microsoft.com"}],"_npmUser":{"name":"pwabuilder","email":"juwillis@microsoft.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/pwa-inking_0.9.0_1593020569429_0.8450258927877421"},"_hasShrinkwrap":false},"0.9.1":{"name":"@pwabuilder/pwa-inking","version":"0.9.1","description":"A [web component](https://meowni.ca/posts/web-components-with-otters/) from the [PWABuilder](https://pwabuilder.com) team that allows you to quickly add a 2D inking canvas (with an optional toolbar) to your Progressive Web App 🎨 ✨","main":"dist/index.js","module":"dist/index.js","scripts":{"start":"concurrently \"tsc --watch\" \"es-dev-server --app-index index.html --node-resolve --watch --open\"","build":"rimraf /dist && tsc && rollup -c","ts":"tsc"},"author":"","license":"ISC","dependencies":{"browser-nativefs":"^0.8.2","es-dev-server":"^1.45.1","idb-keyval":"^3.2.0","lit-element":"^2.2.1","pointer-tracker":"^2.2.1","typescript":"^3.8.3"},"devDependencies":{"@rollup/plugin-strip":"^1.3.3","concurrently":"^5.2.0","rimraf":"^3.0.2","rollup":"^2.3.3","rollup-plugin-minify-html-literals":"^1.2.3","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-terser":"^5.3.0"},"gitHead":"f58433421103e00a0872384a12540bcfa1f6f01d","_id":"@pwabuilder/pwa-inking@0.9.1","_nodeVersion":"13.9.0","_npmVersion":"6.14.2","dist":{"integrity":"sha512-GSWrq+Sdw2TPvxV9ktNH1yyTWbcr0FSqhR/hMK1zl2jHZpp92YudSb0CZrgr2fMh4wZ800YIZ2XpxzdnR7wzkQ==","shasum":"937a08da448735cbc488db7067477a52499393ee","tarball":"https://registry.npmjs.org/@pwabuilder/pwa-inking/-/pwa-inking-0.9.1.tgz","fileCount":42,"unpackedSize":831513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe88NCCRA9TVsSAnZWagAAMGMP/1t2gmc7zhJr3lMiQ0Qj\nWxj2L5GT9JOE1uxuxsaLWsufD1FtklCVc2/Fxcgk+TkIFNlHs/YtZJqC8H6L\nRswTCk2YS/InheFLdGtpqp/wXCbzj+VjAblHzlpxZ+OcTVLAnroS2iZHUNuz\nBJPPmDQwxQquvEkSNB8Ag6ZFf14q7gXK3hLHj/6BQRrtumxfoDXuOWZLw6To\n5IpvTqP5IlBjuxPm/U4TiSKnii2XpLPTQzBt71MK/+KYH/7Rhi8SA7UWE18V\ngGNgRgQ3P+6wbRLpIjLn4elly6dBiISjO/zWxn9HV646yDVFvb3dOIqvXKQK\nGGjcj1E8XVtsEfWJVvbS0NCgMySK5fGdUuWhm/OXmkENfD4YhVGmWc82WPh+\nhLSRVcM/ATZ07RnYdaobfP2GG4y/1EzzQLxSu/iZEhL2bW7v0VkUud30uZkJ\nW58Iw1aHh04hsrpNNY69iibxsAFoonGA0CoTvMgx2M8x3JCR8yBjDnI5pvrU\n8nBmeAvBzzu5xsj2hxzOThZjPDDjUJR4nsKQ3SgvmlVRBu4Vuqu+A0th7ttw\nWN1FEqQNtWS8P1KwE6ajzCQu9C1ykz6Aw5Mxn2KH+0s+yW2qYUx69KexvbCD\nUiKmT/TClThPJmzovo72OEEwNXFsvvAUSDX5D+etKDLOtaKp/qAD3PMEd/5F\nARNF\r\n=zklP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD77xMq5KxOQ6BQTZRSGZb9qYXg7/Fmz6lzmOc7XstSUwIgaf2fxbM6m4DgiMYbsFZKCGNmoyk2pdMExzcvXR4pekg="}]},"maintainers":[{"name":"pwabuilder","email":"juwillis@microsoft.com"}],"_npmUser":{"name":"pwabuilder","email":"juwillis@microsoft.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/pwa-inking_0.9.1_1593033537937_0.7122495132001279"},"_hasShrinkwrap":false},"0.9.2":{"name":"@pwabuilder/pwa-inking","version":"0.9.2","description":"A [web component](https://meowni.ca/posts/web-components-with-otters/) from the [PWABuilder](https://pwabuilder.com) team that allows you to quickly add a 2D inking canvas (with an optional toolbar) to your Progressive Web App 🎨 ✨","main":"dist/index.js","module":"dist/index.js","scripts":{"start":"concurrently \"tsc --watch\" \"es-dev-server --app-index index.html --node-resolve --watch --open\"","build":"rimraf /dist && tsc && rollup -c","ts":"tsc"},"author":"","license":"ISC","dependencies":{"browser-nativefs":"^0.8.2","es-dev-server":"^1.45.1","idb-keyval":"^3.2.0","lit-element":"^2.2.1","pointer-tracker":"^2.2.1","typescript":"^3.8.3"},"devDependencies":{"@rollup/plugin-strip":"^1.3.3","concurrently":"^5.2.0","rimraf":"^3.0.2","rollup":"^2.3.3","rollup-plugin-minify-html-literals":"^1.2.3","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-terser":"^5.3.0"},"gitHead":"f58433421103e00a0872384a12540bcfa1f6f01d","_id":"@pwabuilder/pwa-inking@0.9.2","_nodeVersion":"13.9.0","_npmVersion":"6.14.2","dist":{"integrity":"sha512-eS7cNNZkVcJtTV8w8UuDxpQ4kZqfEhigHMxcTXaOcPgs8Q953ZnnMiGXRSqCFapTi+IliHRymd7LLjc5U82nuw==","shasum":"2a4e3e98a5d0b8cbd61cfd5ad74dfd2f24aceb11","tarball":"https://registry.npmjs.org/@pwabuilder/pwa-inking/-/pwa-inking-0.9.2.tgz","fileCount":42,"unpackedSize":831791,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe88wRCRA9TVsSAnZWagAAozYP/1jTBCPbcDbWsw2IkFC2\nU84qnc1KoYycMByWwlmxrprU9eMiTWkTy0SDFmnHw0DGwIZ/Hg+A2y04AMf8\naG/1ud3zwwosn3LkYrLgzwnFeGZ7jm1/2mLW3GCHLJN7QomUnePbuQjxJNQW\nHuzj1YJKT+q39IbhyWerjc3CALOstCAkVHwUS9k6foCpE+ZlAuZRwZ+hBYgO\nN1lS23KkCkM0RjCLg5YvoMC3eyrN6q3tj7umybzyGR7JdzuyWD6PRzc5cZsD\nyD1KyraccurgxaYkK/xXml1wg8Aobm2HReMBj2rZXd6VIByeN1GW+fjiphA4\nUDxK5Uda1a4xfuSeMDJdQVM6nzZL4Z2CWtHVAQ73ZkEZZ1B2QBRn9dk0JxrM\nj+tB0QRTL5/Ml0UOultCQakAtlY6JnSuwdDqlKf08ICU7fY8PQB8zVSWwZ/O\ng/sOHY+rKt5j7NL/+nW+2bLUX1ETGo+VA/WVvrFOI+dFIVdH7QZDFgq4p67R\n6shuiBKcQj5qUIdKvyVoMzszrT+sA9u+KVbMFM9Z6SavoawunNapiDuxyD1V\ny/15KDiVI/SZLoSBkl9jjYWzRWPL7TIV3W/8JO9BoV+wyEgcdcRameme+3zc\nYcPSwZYhxPxIZWZCL6MP98IbBHaL0NDcMY2vV6GfQgkWFt44aiJAblnYqhGC\nUCDM\r\n=CLCW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBzQUO7UPNNcZMUxNH/q1AWL/pk2g3nC0bSfFx1RSxuYAiEA/igBz8rgJFMJ2hlVZFreSiDKwM9YSd8wcJH7gCDPBhI="}]},"maintainers":[{"name":"pwabuilder","email":"juwillis@microsoft.com"}],"_npmUser":{"name":"pwabuilder","email":"juwillis@microsoft.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/pwa-inking_0.9.2_1593035792983_0.3502296363058266"},"_hasShrinkwrap":false},"0.9.3":{"name":"@pwabuilder/pwa-inking","version":"0.9.3","description":"A [web component](https://meowni.ca/posts/web-components-with-otters/) from the [PWABuilder](https://pwabuilder.com) team that allows you to quickly add a 2D inking canvas (with an optional toolbar) to your Progressive Web App 🎨 ✨","main":"dist/index.js","module":"dist/index.js","scripts":{"start":"concurrently \"tsc --watch\" \"es-dev-server --app-index index.html --node-resolve --watch --open\"","build":"rimraf /dist && tsc && rollup -c","ts":"tsc"},"author":"","license":"ISC","dependencies":{"browser-nativefs":"^0.8.2","es-dev-server":"^1.45.1","idb-keyval":"^3.2.0","lit-element":"^2.2.1","pointer-tracker":"^2.2.1","typescript":"^3.8.3"},"devDependencies":{"@rollup/plugin-strip":"^1.3.3","concurrently":"^5.2.0","rimraf":"^3.0.2","rollup":"^2.3.3","rollup-plugin-minify-html-literals":"^1.2.3","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-terser":"^5.3.0"},"gitHead":"e5e493c917f2e8944d43e55b3a3e44c86ec58b25","_id":"@pwabuilder/pwa-inking@0.9.3","_nodeVersion":"13.9.0","_npmVersion":"6.14.2","dist":{"integrity":"sha512-pgoNDcLDiIAs4iSHRULjzakbhDp5mYwS3UuoJ5CuHCNTWkTBzZfoxIE9SwAEBjqrDVLPpqr2mwvBn2qKIOnYwA==","shasum":"a951bc755bafe65bf2367a28b37a56183444854b","tarball":"https://registry.npmjs.org/@pwabuilder/pwa-inking/-/pwa-inking-0.9.3.tgz","fileCount":42,"unpackedSize":841125,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/R6cCRA9TVsSAnZWagAAZjcP/1uGb8VlK0PfHHnU4TaN\niiTW+txNp1dvcJcpvcvrmtnx0xDGmdKNQ5ohkG0Tj2cwvOVBezVPkY1XyV7/\nLsid7MLIcZL1DCpIKwYavJIIxR87irFWpwBRsxkr19351qr433tct6WwF0tI\n1o5HDTtE0wjSSFe4rMSxx6Eu6zqEzCiQDT7tahWH6B1+AlZWM2a1biZ2PDS3\nzBRte4U5Ussyj8MoJ4KnumO4b8dFCNduROKD+kScm99/d/6rutH/9quVtLN3\nMswoCXt4EZnnJkxbajpi3XAk+viSc2yCAjfNLe4BfdNFpoqj+CBRqgZM4mbC\nSYIWQ9a5nU49mBGyr10rzkEl2vnDqUBOgFK6M4PO5LL6YNZ+CpNO6LxMQt5d\ns05gl4Fktx2jH+XMMzYi1qqYfTS03f1LOZniEaJmHdH31VAgiqDNycD3L8p3\nVMxSVzO2uR2WZHBe0amYPLqyBWoVxHQYOIhYHMlh3CQ+YcoH0EsPaPVI/2GZ\nQTJ4dZrrQz7sofG3PfmDYdOwEh1STTYpwCCk2CfTkJw1w+uW2/rZEf+xshlG\nwMiWKqY3G5JdSQqpgY7sRK+vYkVWh/REyYrj0B8jQox6vexw3tt1AP1Zp3DI\nUagKV1AMwuN+grAMrw39w6Au1hBvMLry7HofOgZxGBOY097QYkK/UfhXbXK5\n3xF6\r\n=XwH4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFzx+FaYLe6Uf2dPTqlXaRrHulXy/J0YfRSKSr4xcKs+AiAtJeq9GS8DyMts1A3z2gd3rAdxvjUTKQ+yjeTBK/U3GA=="}]},"maintainers":[{"name":"pwabuilder","email":"juwillis@microsoft.com"}],"_npmUser":{"name":"pwabuilder","email":"juwillis@microsoft.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/pwa-inking_0.9.3_1593646747665_0.6288202274349928"},"_hasShrinkwrap":false},"0.9.4":{"name":"@pwabuilder/pwa-inking","version":"0.9.4","description":"A [web component](https://meowni.ca/posts/web-components-with-otters/) from the [PWABuilder](https://pwabuilder.com) team that allows you to quickly add a 2D inking canvas (with an optional toolbar) to your Progressive Web App 🎨 ✨","main":"dist/index.js","module":"dist/index.js","scripts":{"start":"concurrently \"tsc --watch\" \"es-dev-server --app-index index.html --node-resolve --watch --open\"","build":"rimraf /dist && tsc && rollup -c","ts":"tsc"},"author":"","license":"ISC","dependencies":{"browser-nativefs":"^0.8.2","es-dev-server":"^1.45.1","idb-keyval":"^3.2.0","lit-element":"^2.2.1","pointer-tracker":"^2.2.1","typescript":"^3.8.3"},"devDependencies":{"@rollup/plugin-strip":"^1.3.3","concurrently":"^5.2.0","rimraf":"^3.0.2","rollup":"^2.3.3","rollup-plugin-minify-html-literals":"^1.2.3","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-terser":"^5.3.0"},"gitHead":"9c19d3d44b42585c925d84ccd6c0cc0733792edb","_id":"@pwabuilder/pwa-inking@0.9.4","_nodeVersion":"13.9.0","_npmVersion":"6.14.2","dist":{"integrity":"sha512-THM4Bpz52J389JqvhUfYIyxmCOxTTor9eeaOkoulHIGujuyzmFXBR4Bqk19/D/Wtw9LW8QTkBKsemjUEUVyz/g==","shasum":"93dacca5a73be1ce51ef699601b67bf8bb451e14","tarball":"https://registry.npmjs.org/@pwabuilder/pwa-inking/-/pwa-inking-0.9.4.tgz","fileCount":42,"unpackedSize":883633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/9jnCRA9TVsSAnZWagAAUhcQAILxWAqOknto1VGAKmgD\nAkqr2OWilqQObnm7i6UhhCbeOjTdKX00H2LHSxAEvJWvVrwEv3QF9fbI9lKz\nT7j3/4DL6qLX3G+03lO3ngDRiC0B1EfEqLlWYiOT5jrl8YruJtrm1SchulvG\nkD8whf6mZnyu9Tpe+GvU76ppmNRC/Y7xgbkuLxEVfUv8ZUsTJYRuEcuResvU\nLM9nxAGOfJv0pBt/ygQZcGthE0IfMxQqy/WGKUvmoAg7boUMTyVyLP5gHozN\niRoacMLduHNeBWjTO+aT8gIf3IsA8vVEBIotgnB3rHF96/+0yi/vbeyOXRpg\nEKS8DKbRpnfgWo0pNQa19rpYVEo0PtsBsBktR1BeUL/k/Ojyb59AoGJ09XU5\ndYONMD+EVLX6kROUAQK6GzyJB1qH2DWIwRlHESDxq85VR/SRiz1DVedUZXvH\nmigOhzDiebHKxzxxs4TE6q8k2jIrLXCTpMPTB6YpaYtneK2ubI/HRlYRTnyB\n3d1aNchUIFjVV05WamOUUt9HJHytwivyLpT9SIZoDBKef2Kescdpj8/8y9d9\npERNDIa/GaejX/QzUVi+DFxg0dG7HX+VSLrNCzDBU9yAwjwS6f4qlFtGU80a\n66QLTKd+1Wszv4ddc9qF1jJH6xwrsvGlDB9TKfT6RgbPU8XM+HC6TApuUT6N\nm1zK\r\n=RIiw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB84Vpti8AeV2sy3ZEDt1d//BRdt3rBfxs+O/3SF1rT1AiEA6sS0E89tPvBOZwRIeqSZJqu1yBsjZn3hKbgj6IElah4="}]},"maintainers":[{"name":"pwabuilder","email":"juwillis@microsoft.com"}],"_npmUser":{"name":"pwabuilder","email":"juwillis@microsoft.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/pwa-inking_0.9.4_1593825511206_0.9757709750247474"},"_hasShrinkwrap":false},"0.9.5":{"name":"@pwabuilder/pwa-inking","version":"0.9.5","description":"A [web component](https://meowni.ca/posts/web-components-with-otters/) from the [PWABuilder](https://pwabuilder.com) team that allows you to quickly add a 2D inking canvas (with an optional toolbar) to your Progressive Web App 🎨 ✨","main":"dist/index.js","module":"dist/index.js","scripts":{"start":"concurrently \"tsc --watch\" \"es-dev-server --app-index index.html --node-resolve --watch --open\"","build":"rimraf /dist && tsc && rollup -c","ts":"tsc"},"author":"","license":"ISC","dependencies":{"browser-nativefs":"^0.8.2","es-dev-server":"^1.45.1","idb-keyval":"^3.2.0","lit-element":"^2.2.1","pointer-tracker":"^2.2.1","typescript":"^3.8.3"},"devDependencies":{"@rollup/plugin-strip":"^1.3.3","concurrently":"^5.2.0","rimraf":"^3.0.2","rollup":"^2.3.3","rollup-plugin-minify-html-literals":"^1.2.3","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-terser":"^5.3.0"},"gitHead":"5a549d66c268e35d736dda13a43cb5a161b31b76","_id":"@pwabuilder/pwa-inking@0.9.5","_nodeVersion":"13.9.0","_npmVersion":"6.14.2","dist":{"integrity":"sha512-0rfEbWlCWg3sR1E3YKIVOarhFzXYUYMPK3hq7QBKSZoWB6M/zrwaRwLYw/aBcI7W+fMplU0W+QhckEV6frYo/Q==","shasum":"fe681e32a4b12ebcc7d944db14d09fd8430c0edf","tarball":"https://registry.npmjs.org/@pwabuilder/pwa-inking/-/pwa-inking-0.9.5.tgz","fileCount":28,"unpackedSize":932633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDhZmCRA9TVsSAnZWagAA5r4P/10iOhEKMDcFMOsrBZx+\n5AmGDPkg9G7sLZEnuy1QAi9oEgpZY8085d3FWxp5Ug8eSC5tl9rEazBRtrrB\nl3BUjb8WHZ5arPy87VUegoPVko7573W+Q+Qq4N1OhADAK4u+LkqX8Ns75WoF\njAmIQ70XNNtjbJuCsyWjvTScEmh3h8yGrlHlmi7gKObSXWcq+GGjk07M0Ixq\nrLRCF2Y16WEMLXBuR1GLR98WtYAB615PMkE3vwb4qgaXHeRRcOPiDUyTWVIZ\nfhuKUSKl3aBA7WmMsdRtZyiE8kwzoJylL9o4r9q9Sxx9gKnEM8bkXUj1hURJ\nNSy8J8LugWzHefAWfu2KoVx0DthxLgW1Y2dbj04zA/1/b2sIjNBSKI3ILbvl\nU0rPTS9Xz+5vsJtBJVAChIR3YO6OrMghsfLBJcEi6v2zYKTkF0fT0AjCfuAs\n+CdZ8Vwx0Br2FBCOdcQgG9RJKiJ8pO3uv8GvzKrxgmGC8NI7NjXWGyYCNJGF\nAS7Oub9wtH7kB4YNsUqVQ9vRx09Q0g/QsYpF86X5SK28nLbbtReeIyDavPO6\nN7NacLqk9eDzUes8XAFzP8XBrnWWiGWJvgwnXx8U3yR92JYYJZltEDlpCKJR\nq3t/5rWwT0HkhdbcIBwE9A7BbUbRq2PMG4rmmHNaqqe83feHj63gt74lddQz\n+7Bj\r\n=Dnp4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAIDXRvbMg/6PeSPiXFmehhX80nsdw0UWy9KMxqoAGHsAiEA5mo8NFnMKaUGyzj6hJTF+hH2M/VKQ6orSQ0O6JwJuUA="}]},"maintainers":[{"name":"pwabuilder","email":"juwillis@microsoft.com"}],"_npmUser":{"name":"pwabuilder","email":"juwillis@microsoft.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/pwa-inking_0.9.5_1594758757604_0.8444234840764369"},"_hasShrinkwrap":false},"1.0.0":{"name":"@pwabuilder/pwa-inking","version":"1.0.0","description":"A [web component](https://meowni.ca/posts/web-components-with-otters/) from the [PWABuilder](https://pwabuilder.com) team that allows you to quickly add a 2D inking canvas (with an optional toolbar) to your Progressive Web App 🎨 ✨","main":"dist/index.js","module":"dist/index.js","scripts":{"start":"concurrently \"tsc --watch\" \"es-dev-server --app-index index.html --node-resolve --watch --open\"","build":"rimraf /dist && tsc && rollup -c","ts":"tsc"},"author":"","license":"ISC","dependencies":{"browser-nativefs":"^0.8.2","es-dev-server":"^1.45.1","idb-keyval":"^3.2.0","lit-element":"^2.2.1","pointer-tracker":"^2.2.1","typescript":"^3.8.3"},"devDependencies":{"@rollup/plugin-strip":"^1.3.3","concurrently":"^5.2.0","rimraf":"^3.0.2","rollup":"^2.3.3","rollup-plugin-minify-html-literals":"^1.2.3","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-terser":"^5.3.0"},"gitHead":"45a032a93b4d6c1528de40cad66b5fad72879a39","_id":"@pwabuilder/pwa-inking@1.0.0","_nodeVersion":"13.9.0","_npmVersion":"6.14.2","dist":{"integrity":"sha512-pqkrEMY7/q1ZZFLTLHaVpg5ksnX0w9OP+NleZzg9ZQqPkXxIhuxqSJDgSTiqQ5rKireyzgkSRsWfIkQI7OJPhQ==","shasum":"6fe98c90f082d9f526335c3ae7ffe2dd799e22f2","tarball":"https://registry.npmjs.org/@pwabuilder/pwa-inking/-/pwa-inking-1.0.0.tgz","fileCount":28,"unpackedSize":934470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDi7VCRA9TVsSAnZWagAALaEQAJUqcik9Omvqav0XWsPC\nwAgFkknaRDrGT4rXHBA/znzTH9E9JhtEyPuZBVrEBx7n4JKnSfVFi0GqHZN9\nG6DsVmkJu65J1wMhXLPG9IpCpnpmLdVx4fzWHppQMxvW4LNUqvUkRo786Hrl\nQ45zbDugAW4ynF0uYk3bIBb7b4TX5dQwc/mnslOqysHjFJ1NKRwoPz4qhpvP\now1FVIYRlLnZZDvmYrc9Afi/NvhKb79RJgq6CVLy3d/g3JBkOHRUlHjDojdx\nxEuP9CBrFD73sZQ1MLHyTIbAXldMJlox9ZCq/TIYkzxqcxcZWasiPXakaxoP\n4MAC8QXoH/SEelJQEaaxFsSQNBD+txukv1efjX8ASgIArj7vaePu3VaEyrqQ\n0N9rH7kXxqmWybCx8Y2UXqkNcjWnrQF9eGZifQhGP71muZRbEFg4SLqzE2NT\nxyirTV171Ub6YP9fcr5sf66WCHzqNwnu+Fkg3r2mXveEfa1ugmA1sD0nwyJ8\nu5SX3/3rNc3xKs5Ya3BFAv0Btw7tfkd22f0Aaf9bGRd+aW2MLEm5DmDr3tjY\nbiW3BC4AJFZi3C9HJNLiO7l27oOrojYaI2+Coek8+aVqGrA9Ye1S0C1MMqoB\nz6rTPJUGxdG/ULJ8/VW/OnbeUact4rDlu5TOcGXlxtt96qQ/h7ZQ6q+p8gKD\nCZGu\r\n=6CuX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCknOljTBWjF13SV17na3eme7ILqYhYVBxlDrVVeYprSgIgYcdVcfYmHCH0Ebsfa7BqBKgUDxUPIIZcrv/zbPKt5fQ="}]},"maintainers":[{"name":"pwabuilder","email":"juwillis@microsoft.com"}],"_npmUser":{"name":"pwabuilder","email":"juwillis@microsoft.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/pwa-inking_1.0.0_1594765012852_0.007018682920501451"},"_hasShrinkwrap":false},"1.0.1":{"name":"@pwabuilder/pwa-inking","version":"1.0.1","description":"A [web component](https://meowni.ca/posts/web-components-with-otters/) from the [PWABuilder](https://pwabuilder.com) team that allows you to quickly add a 2D inking canvas (with an optional toolbar) to your Progressive Web App 🎨 ✨","main":"dist/index.js","module":"dist/index.js","scripts":{"start":"concurrently \"tsc --watch\" \"es-dev-server --app-index index.html --node-resolve --watch --open\"","build":"rimraf /dist && tsc && rollup -c","ts":"tsc"},"author":"","license":"ISC","dependencies":{"browser-nativefs":"^0.8.2","es-dev-server":"^1.45.1","idb-keyval":"^3.2.0","lit-element":"^2.2.1","pointer-tracker":"^2.2.1","typescript":"^3.8.3"},"devDependencies":{"@rollup/plugin-strip":"^1.3.3","concurrently":"^5.2.0","rimraf":"^3.0.2","rollup":"^2.3.3","rollup-plugin-minify-html-literals":"^1.2.3","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-terser":"^5.3.0"},"gitHead":"2f325ffeecdfe3e60528f5fe7242a6998485b379","_id":"@pwabuilder/pwa-inking@1.0.1","_nodeVersion":"13.9.0","_npmVersion":"6.14.2","dist":{"integrity":"sha512-tOHIohW4naYQZbcyvXeq4Bz/ODV5t3wU1NDnZX3ZCojGBTNxmzR4FsknU3gTalxoD5HQqjD9vvmcwMLejLglVw==","shasum":"ec7652520f8e304a0455812b5a0e1e4be73c4a08","tarball":"https://registry.npmjs.org/@pwabuilder/pwa-inking/-/pwa-inking-1.0.1.tgz","fileCount":28,"unpackedSize":934601,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDkVgCRA9TVsSAnZWagAAmb8P/jWHnxHrmziL3ed7PPyx\nJMJ7DwWkReZuNjMNv5hzErQA+eEfUPf1G/v6CpPz6V7113uX+3K0U/lIIgmv\nVI30NuSaS0T+X/ewe+c/TMuQGlAYG+1okEgRC9C7hxLuYNhBgo/XA6eFd8lh\nQCSWufJsK12lDiajgl+oB1BGIKyAeF67+S/cfZNtvGaJCySHQBthoyDnDmXm\nJpQhfCCTTkdEybWoaC4i5Wq7REujI/BKvorvtrO6CGSPdJ0ouJh4nCUZu4NI\nk+nK+lgrwMBc5OGxQcadWGiaJS/GvGnotKwJG2LDzNmh5WFBeZRDNEAEFaPq\nmPJXGGnlh5VZYCPVRiR7SghPQLC8Jsejb84wfbPjM2SeSs5pIiIjPeRu3EEZ\nrVfIohARlcWSPC6ojkBhPFLdKCG3BsausDMp+7lAQjyryUwNMgmJCz266oxK\nmrcQhcyB+MXG0okgdiADVCaQsMURjvnw4yld564HdHDRrPAsDweLKoeWIAvM\nXXxeapeNx2Xf0GJP/H4MP2Ln+x6uJEwJxD/t2gVcJVU87EZRaNkpF8lySeGj\nOnxUzSLBsrtdW2qBNa2ixH3HNU6mBDVk6L+GIJCrT4Tl0w4Oq/8KALU257pt\nb18kq1rQ9CHQHM1ed1ah8MROzOR17vjKLI5Cx3bFmihxIczk3E1LziXV7m1w\nz95Q\r\n=+8XZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDtdQ+nErk+PTuTUTgWGB5UmBwetxrMWoDDxYRwdw4FTAIgIp3kW+5KBW8NYBvN05dMN36yjSE0iBbTzd4KAt03n0w="}]},"maintainers":[{"name":"pwabuilder","email":"juwillis@microsoft.com"}],"_npmUser":{"name":"pwabuilder","email":"juwillis@microsoft.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/pwa-inking_1.0.1_1594770783685_0.9458506085802574"},"_hasShrinkwrap":false},"1.0.2":{"name":"@pwabuilder/pwa-inking","version":"1.0.2","description":"A [web component](https://meowni.ca/posts/web-components-with-otters/) from the [PWABuilder](https://pwabuilder.com) team that allows you to quickly add a 2D inking canvas (with an optional toolbar) to your Progressive Web App 🎨 ✨","main":"dist/index.js","module":"dist/index.js","scripts":{"start":"concurrently \"tsc --watch\" \"es-dev-server --app-index index.html --node-resolve --watch --open\"","build":"rimraf /dist && tsc && rollup -c","ts":"tsc"},"author":"","license":"ISC","dependencies":{"browser-nativefs":"^0.8.2","es-dev-server":"^1.45.1","idb-keyval":"^3.2.0","lit-element":"^2.2.1","pointer-tracker":"^2.2.1","typescript":"^3.8.3"},"devDependencies":{"@rollup/plugin-strip":"^1.3.3","concurrently":"^5.2.0","rimraf":"^3.0.2","rollup":"^2.3.3","rollup-plugin-minify-html-literals":"^1.2.3","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-terser":"^5.3.0"},"gitHead":"e128f2da7f7de94188335ada08c109b65062f730","_id":"@pwabuilder/pwa-inking@1.0.2","_nodeVersion":"13.9.0","_npmVersion":"6.14.2","dist":{"integrity":"sha512-GTaeo9m01om+jnQKtaNlJhR9tuudSZwJGVkg0oafejQ2R2yIPl6ZIGv11YJznZmfczcZnGvL5hrC9z/fpMV/Nw==","shasum":"ae76f71396b8259ab3fda6c4f4aaff097e93960f","tarball":"https://registry.npmjs.org/@pwabuilder/pwa-inking/-/pwa-inking-1.0.2.tgz","fileCount":28,"unpackedSize":890507,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGxoDCRA9TVsSAnZWagAA/2oQAKA8ueEA+i4tyss/qol0\nSZAlyE+vmNCkp/1o1V0btcuuOCdKckHO6YDwhUoOTwbkCDtPNC1uLLmEt3vR\nDTSdlMAS2HpmX3J4p0kEOQ7Cy9XLwsymdeJ33w6woVfKcCVONaNAoXiyvtkQ\n1tzJLn9JtTfMsEAwqifnoum6Msfg6olAi7vsn2DcBP5LChg+mZ6JPqxXpdno\nm76vIIwxs3J251fd9Wz2O2lWamaOLo38v/hvA2UqMQKpwZPvN4Mz2/cNPfX6\nTOD2m3Eb9qjU7omcyxaZfXjUX4lXTca+pA7UXiGh2lS4s/DwMpAMI/b2uknb\nKBOWturOdoJ/sCCdQ7hlyz+psj9sMbOCR+xtVToslNZRbZYMBW/mHwoCR/JE\nWcmiMs35i4PZirCV7JmjR41UEjZ2Ys/klwXgp1ylZYXf6wrgH8ahJmXQVyci\nYZT6WFXfLzmoEfUK4B5UY/nb1Tpbo/+PFxeUDCS3lp0KHPHWcxWquhPnQ0XD\nBsf49Cg/pxooKB5NRxexn2FU6D6y5k9Dk3TsIs+FoRji/GXKK10nlxMTd3lS\nSDoPeOeAXnh+jg+BnwuQ5HGV7O8sbDgnJ66NZ7baGAblyBPPAfwHchBJGfcT\n0P5bBW3J8JmMD9CafZNa39ArD3TeRGX2QhGbumSwLMBGC68uIfzd7Z+hSTQo\nZ8dY\r\n=YlgR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDsJcqYl/ZG5JA+6lzzuk3Pwc3mPpeQvc69O0rScaY66gIgezDRpmOb4wVL2Akixjr3TmnEkjJuf6uHwF4IfpXHybw="}]},"maintainers":[{"name":"pwabuilder","email":"juwillis@microsoft.com"}],"_npmUser":{"name":"pwabuilder","email":"juwillis@microsoft.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/pwa-inking_1.0.2_1595611650672_0.363113814474636"},"_hasShrinkwrap":false},"1.0.3":{"name":"@pwabuilder/pwa-inking","version":"1.0.3","description":"A [web component](https://meowni.ca/posts/web-components-with-otters/) from the [PWABuilder](https://pwabuilder.com) team that allows you to quickly add a 2D inking canvas (with an optional toolbar) to your Progressive Web App 🎨 ✨","main":"dist/index.js","module":"dist/index.js","scripts":{"start":"concurrently \"tsc --watch\" \"es-dev-server --app-index index.html --node-resolve --watch --open\"","build":"rimraf /dist && tsc && rollup -c","ts":"tsc"},"author":"","license":"ISC","dependencies":{"browser-nativefs":"^0.8.2","es-dev-server":"^1.45.1","idb-keyval":"^3.2.0","lit-element":"^2.2.1","pointer-tracker":"^2.2.1","typescript":"^3.8.3"},"devDependencies":{"@rollup/plugin-strip":"^1.3.3","concurrently":"^5.2.0","rimraf":"^3.0.2","rollup":"^2.3.3","rollup-plugin-minify-html-literals":"^1.2.3","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-terser":"^5.3.0"},"gitHead":"e128f2da7f7de94188335ada08c109b65062f730","_id":"@pwabuilder/pwa-inking@1.0.3","_nodeVersion":"13.9.0","_npmVersion":"6.14.2","dist":{"integrity":"sha512-clAKma3qOxH81RxOKCFHjBcdqVy/GTvFAH9j83EWjTJHH6wxZq/oakd1e5oqK5najnPynpRGK96QPO44MA2T8g==","shasum":"450b362685a51c73d1f6cfaa57fb1776b764f943","tarball":"https://registry.npmjs.org/@pwabuilder/pwa-inking/-/pwa-inking-1.0.3.tgz","fileCount":28,"unpackedSize":885109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfG3TJCRA9TVsSAnZWagAAr9wP/1dQjKdCHezNW7bX0F7z\noM3CbNi4hofnIsLFcaLBOA2u5R1ruaHWxQLVaPOXdtUsARM/eOut5Ez2rbc2\nUMIXkJrS/JALUryrxVBfEz1GCwxmz5ac4OCgA/FjbZNXxgBeUhFmdCD5Pr05\n9ZYwHCQztNs9KvmJo0Xvns+H2jy9UObm5pCk2nAkqvXCZZwgV0i6UUrogQeC\nAsOrf+WBOBfND+GYuMj2l14ddSOP/Nu/pBJGSyIieGeJvhOXR1R1poFe1uhz\nSTqlmyrA1BQwCzf1IlhstC4ANJEhrRDt3RjR0XAnFbWx4F75sxAFwMbJN5sx\n7/JmQzzLA869pH4eQzy3LdHAX43X90wAICY21+uGVRUmOcOAFkdNIDU5m/or\nWmtjdUVH3tomr4c6RgPoovuJWWuCNvYpDUBXd2hW86/w7OSCdvk18fHs0LwO\nBNM4/SZlImlaI1a2nMIUMyeGAMIeLKB0zarglY/xfJzTbaiV/+Cj02Xo5jez\nAl1SGP7MxL3KEkeBexppakmhSUbgQ6IdVJXUzx6RjVUpr7/6YwipDcgB0zo1\n1QfSJrF1zqDBX1vBLBFGqK+nor/sHyIG3wbLv9IedcIRwq1SC5t5Y/ZQYqC+\n6pnz15qOiYmbb3tl0QNjGUvNZ5aqfkmYGv6AQmm79ZQcAE8X50h41eA0s953\n55nH\r\n=Olbh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDKy9QWpdUJaWea7c+1jUU2qzMvw1ifJl6MBMBF46Fy9wIgWh6uHB2hdQ2slsarvVBGm41c+OCwGmqzKOvr38pXDrY="}]},"maintainers":[{"name":"pwabuilder","email":"juwillis@microsoft.com"}],"_npmUser":{"name":"pwabuilder","email":"juwillis@microsoft.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/pwa-inking_1.0.3_1595634888591_0.5320358272469037"},"_hasShrinkwrap":false},"1.0.4":{"name":"@pwabuilder/pwa-inking","version":"1.0.4","description":"A [web component](https://meowni.ca/posts/web-components-with-otters/) from the [PWABuilder](https://pwabuilder.com) team that allows you to quickly add a 2D inking canvas (with an optional toolbar) to your Progressive Web App 🎨 ✨","main":"dist/index.js","module":"dist/index.js","scripts":{"start":"concurrently \"tsc --watch\" \"es-dev-server --app-index index.html --node-resolve --watch --open\"","build":"rimraf /dist && tsc && rollup -c","ts":"tsc"},"author":"","license":"ISC","dependencies":{"browser-nativefs":"^0.8.2","es-dev-server":"^1.45.1","idb-keyval":"^3.2.0","lit-element":"^2.2.1","pointer-tracker":"^2.2.1","typescript":"^3.8.3"},"devDependencies":{"@rollup/plugin-strip":"^1.3.3","concurrently":"^5.2.0","rimraf":"^3.0.2","rollup":"^2.3.3","rollup-plugin-minify-html-literals":"^1.2.3","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-terser":"^5.3.0"},"readme":"# pwa-inking\r\n\r\nA [web component](https://meowni.ca/posts/web-components-with-otters/) from the [PWABuilder](https://pwabuilder.com) team that allows you to quickly add a 2D inking canvas (with an optional toolbar) to your Progressive Web App 🎨 ✨\r\n\r\n_Built with [lit-element](https://lit-element.polymer-project.org/)_\r\n\r\n## What does it look like?\r\n\r\n![An image of what the component looks like](assets/images/example.png?raw=true \"pwa-inking\")\r\n\r\n## Supported Browsers\r\n- Edge\r\n- Chrome\r\n- Firefox\r\n- Safari\r\n\r\n## Using this component\r\n\r\n## Install\r\n\r\nThere are two ways to use this component. For simple projects or just to get started fast, we recommend using the component by script tag. If your project is using [npm](https://www.npmjs.com/) then we recommend using the npm package.\r\n\r\n### Script tag\r\n\r\n1. Add this script tag in the head of your index.html:\r\n\r\n```html\r\n \r\n```\r\n\r\n### NPM\r\n\r\n1. Run this command in your project directory:\r\n```shell\r\n npm install @pwabuilder/pwa-inking\r\n```\r\n\r\n2. Add this import statement to your script file:\r\n```js\r\n import @pwabuilder/pwa-inking\r\n```\r\n\r\n## Adding the component to your code\r\n\r\n### Canvas only\r\n\r\nYou can use the element `` anywhere in your template, JSX, html, etc. By itself, you will get a blank, bordered canvas which you can control through its APIs (see [table](#inking-canvas) for details).\r\n\r\n```html\r\n \r\n```\r\n\r\nTry it: [live](https://pwa-inking-canvas-only.glitch.me/) | [code](https://glitch.com/edit/#!/pwa-inking-canvas-only?path=index.html%3A20%3A41)\r\n\r\n### Canvas with default toolbar\r\n\r\nYou can also add the `` element within the `` element so the user can control the canvas visually. To connect these elements, their respective `canvas` and `name` attribute values must match. The default toolbar contains all 6 tools in the following order: pen, pencil, highlighter, eraser, copy, and save.\r\n\r\n```html\r\n \r\n \r\n \r\n```\r\n\r\nTry it: [live](https://pwa-inking.glitch.me/) | [code](https://glitch.com/edit/#!/pwa-inking?path=index.html%3A1%3A0)\r\n\r\n### Canvas with customized toolbar\r\n\r\nYou can also specify the toolbar layout and select which subset of tools you want to include.\r\n\r\n| Toolbar layout options | Possible values | \r\n| ---------------------- | ---------------------------------------------------------- | \r\n| `orientation` | horizontal or vertical | \r\n| `vertical` | top, center, or bottom |\r\n| `horizontal` | left, center, or right ||\r\n\r\nAvailable tool components (which can be added in any order):\r\n\r\n- ``\r\n- ``\r\n- ``\r\n- ``\r\n- ``\r\n- ``\r\n\r\nExample usage:\r\n\r\n```html\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n```\r\n\r\nTry it: [live](https://pwa-inking-customized-toolbar.glitch.me/) | [code](https://glitch.com/edit/#!/pwa-inking-customized-toolbar?path=index.html%3A25%3A55)\r\n\r\n## Default inking behavior\r\n\r\nBy default `` will create ink strokes with a width depending on the active pointer event:\r\n\r\n| Pointer event | Property influencing ink stroke width | Ink stroke width details\r\n| ------------------- | ------------------------------------------- | --------------------------------------------------------- |\r\n| `mouse` | none | Should match the default inking-toolbar tool slider value |\r\n| `touch` | `width` | Changes with surface area of inking screen pressed |\r\n| `pen` | `pressure` | Changes with downward force applied to inking screen |\r\n\r\n\r\nIf a browser does not provide a value for its pointer event's pressure/width, then the canvas should default to treating this input like a mouse event.\r\n\r\nThe stroke width regardless of pointer event type can be set and fixed through the ``.\r\n\r\n## APIs\r\n\r\n## inking-canvas\r\n\r\n### Properties\r\n\r\n| Property | Attribute | Description | Type | Default |\r\n| -------------------- | -------------------- | ------------------------------------------------------------------------------- | --------- | --------------------------------------------------- |\r\n| `name` | `name` | Used to connect an inking toolbar | `string` | `\"\"` |\r\n| `canvasHeight` | `height` | Fills parent height default | `number` | `-1` |\r\n| `canvasWidth` | `width` | Fills parent width by default | `number` | `-1` |\r\n\r\n\r\n### Methods\r\n\r\n| Name | Description |\r\n| --------------- | -------------------------- |\r\n| `getStrokeColor()` | Returns ink color \r\n| `setStrokeColor(color: string)` | Changes ink color |\r\n| `getStrokeSize()` | Returns ink stroke width \r\n| `setStrokeSize(strokeSize: number)` | Changes ink stroke width |\r\n| `getStrokeStyle()` | Returns name of active tool defining ink style \r\n| `setStrokeStyle(toolName: string)` | Changes ink style to reflect provided tool name (pen, pencil, highlighter, or eraser) | \r\n| `copyCanvasContents()` | Copies canvas state to clipboard via Clipboard API (if supported by browser) |\r\n| `saveCanvasContents()` | Opens native file system to allow user to save canvas state as png image |\r\n| `eraseAll()` | Deletes all visible and cached canvas ink |\r\n| `getCanvas()` | Returns inner html canvas object for advanced use cases |\r\n| `getScale()` | Returns canvas size relative to its content's aspect ratio \r\n| `requestDrawCanvas()` | Triggers an additional canvas redraw if one is not already queued up |\r\n| `setMinWidth(newMinWidth: number)` | Changes minimum canvas width and overrides default 300px value |\r\n\r\n\r\n## inking-toolbar\r\n\r\n### Properties\r\n\r\n| Property | Attribute | Description | Type | Default |\r\n| -------------------- | -------------------- | ------------------------------------------------------------------------------- | --------- | --------------------------------------------------- |\r\n| `orientation` | `orientation` | Toolbar layout direction | `string` | `horizontal` |\r\n| `verticalAlignment` | `vertical` | Toolbar layout vertical alignment | `string` | `top` |\r\n| `horizontalAlignment` | `horizontal` | Toolbar layout horizontal alignment | `string` | `left` |\r\n| `targetInkingCanvas` | `canvas` | Connects toolbar to canvas whose name matches this value | `string` | `\"\"` |\r\n\r\n\r\n\r\n### Methods\r\n\r\n| Name | Description |\r\n| --------------- | -------------------------- |\r\n| `getCurrentToolName()` | Returns the active tool name \r\n| `getCurrentStrokeColor()` | Returns the current toolbar ink color of the active tool | |\r\n| `getCurrentStrokeColorName()` | Returns the current stroke color name of the active tool | Sets the current stroke color name for the active tool |\r\n| `getCurrentStrokeSize()` | Returns the current stroke width of the active tool \r\n| `requestDrawSineCanvas()` | Triggers an additional example stroke redraw if one is not already queued up |\r\n\r\n## Styling\r\n\r\n### Shadow parts\r\n\r\nYou can style the different parts of pwa-inking using [CSS ::part selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/::part). Below are the list of parts available for styling:\r\n\r\n| Component | Part Name | Description |\r\n| - | - | - |\r\n|`inking-canvas` | `canvas` | The html canvas object |\r\n| `inking-toolbar-pen` | `button` | The toolbar pen button |\r\n| `inking-toolbar-pencil` | `button` | The toolbar pencil button |\r\n| `inking-toolbar-highlighter` | `button` | The toolbar highlighter button |\r\n| `inking-toolbar-eraser` | `button` | The toolbar eraser button |\r\n| `inking-toolbar-copy` | `button` | The toolbar copy button |\r\n| `inking-toolbar-save` | `button` | The toolbar save button |\r\n\r\n### Styling samples\r\n\r\nRemove the canvas border:\r\n```css\r\n inking-canvas::part(canvas) {\r\n border: none;\r\n }\r\n```\r\nChange the save button color:\r\n```css\r\n inking-toolbar-save::part(button) {\r\n background-color: blue;\r\n }\r\n```\r\n\r\nTry it: [live](https://pwa-inking-styling-samples.glitch.me/) | [code](https://glitch.com/edit/#!/pwa-inking-styling-samples?path=index.html%3A29%3A20)\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"28d73493abbb3706554dd643a05c40b78edc00ec","_id":"@pwabuilder/pwa-inking@1.0.4","_nodeVersion":"13.9.0","_npmVersion":"6.14.2","dist":{"integrity":"sha512-iYLYOR8Vw7d27jfIiFXsAa1JxN21+WG8TaSTLcTPjxKF7+dKQY3E4a7cGDR2mE9KybWo8MsCDRMIxCBBRZfD5w==","shasum":"560829485d0ee3a5562e2bd64510f4319f454057","tarball":"https://registry.npmjs.org/@pwabuilder/pwa-inking/-/pwa-inking-1.0.4.tgz","fileCount":28,"unpackedSize":889300,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHzzoCRA9TVsSAnZWagAA0l8P/0mR1NOpMQqtk7CJoBLd\n0J4nUK7ldn9gYOG+2kA/Uk6xXtk41LhuUowjmNxN2TuTy2G3YO4QrVcc8fpF\nrkWEybgAJTg7mH21fca4a4rW4vRs+//MIpV0kRfvwa3xbF4MpZ4Iojui2ZBx\nkFAeziwoWa7EyMjyz3KvT7lw+gkfeSnUO+4x+uR9fqbzOV+h4n25otX2P0f8\nYo4y4wv1PkVP83yAJ5kXwqeKMD/c8R1HUrbop0doQidu5YBCT5dr5w+Vpc5e\n2u+9uazOoMcAF6FU7Tukc17+A3NCtcaK8k6e8ouFQdgku4ghTeKE1aEwmc6p\nuYAR8VXprcK0fDOTldcVODjiG/Smm92UNoWUsDyEcxyS1L/XUCwOzSykr1rn\nNHJ93jSNAimXlxsnxmBzmZax5QPWLR+U8O16DmgKEPhPtI5bcMTBUd6c/qSj\nbbYMwElrqeHeB71CQ8d9sB8fy4vp0LakuaynNefuaZ1HN+CqCSTNsW+3Ev5L\nHCDlPFJJX49UPSxjf8pXHfh7EoUy5obSa54hQJ1rCCXzgVLKNat3qIuAHquu\nsV31GLlfRPTHFwtAP8nPnt3XT5vvRqrP3knoe9eN97Hg0oedspRi3V8OodHY\n/ZtNY9PRiFnuHxyFycKBq6V6g4TwW3RY0/72mXhted0yYYsyI0XX+9IP3gb2\nxLrX\r\n=0Qes\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG55DakX2Ug4UhxkrIa1kyNqMa587Dvoxt3Ujf7o2cwQAiA1S/EegJitTu1RkYLudNXb2Lomt0kgEA5Q0W7JzjmBEA=="}]},"maintainers":[{"name":"pwabuilder","email":"juwillis@microsoft.com"}],"_npmUser":{"name":"pwabuilder","email":"juwillis@microsoft.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/pwa-inking_1.0.4_1595882728314_0.46686840307146604"},"_hasShrinkwrap":false},"1.0.5":{"name":"@pwabuilder/pwa-inking","version":"1.0.5","description":"A [web component](https://meowni.ca/posts/web-components-with-otters/) from the [PWABuilder](https://pwabuilder.com) team that allows you to quickly add a 2D inking canvas (with an optional toolbar) to your Progressive Web App 🎨 ✨","main":"dist/index.js","module":"dist/index.js","scripts":{"start":"concurrently \"tsc --watch\" \"es-dev-server --app-index index.html --node-resolve --watch --open\"","build":"rimraf /dist && tsc && rollup -c","ts":"tsc"},"author":"","license":"ISC","dependencies":{"browser-nativefs":"^0.8.2","es-dev-server":"^1.45.1","idb-keyval":"^3.2.0","lit-element":"^2.2.1","pointer-tracker":"^2.2.1","typescript":"^3.8.3"},"devDependencies":{"@rollup/plugin-strip":"^1.3.3","concurrently":"^5.2.0","rimraf":"^3.0.2","rollup":"^2.3.3","rollup-plugin-minify-html-literals":"^1.2.3","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-terser":"^5.3.0"},"readme":"# pwa-inking\r\n\r\nA [web component](https://meowni.ca/posts/web-components-with-otters/) from the [PWABuilder](https://pwabuilder.com) team that allows you to quickly add a 2D inking canvas (with an optional toolbar) to your Progressive Web App 🎨 ✨\r\n\r\n_Built with [lit-element](https://lit-element.polymer-project.org/)_\r\n\r\n## What does it look like?\r\n\r\n![An image of what the component looks like](assets/images/example.png?raw=true \"pwa-inking\")\r\n\r\n## Supported Browsers\r\n- Edge\r\n- Chrome\r\n- Firefox\r\n- Safari\r\n\r\n## Using this component\r\n\r\n## Install\r\n\r\nThere are two ways to use this component. For simple projects or just to get started fast, we recommend using the component by script tag. If your project is using [npm](https://www.npmjs.com/) then we recommend using the npm package.\r\n\r\n### Script tag\r\n\r\n1. Add this script tag in the head of your index.html:\r\n\r\n```html\r\n \r\n```\r\n\r\n### NPM\r\n\r\n1. Run this command in your project directory:\r\n```shell\r\n npm install @pwabuilder/pwa-inking\r\n```\r\n\r\n2. Add this import statement to your script file:\r\n```js\r\n import @pwabuilder/pwa-inking\r\n```\r\n\r\n## Adding the component to your code\r\n\r\n### Canvas only\r\n\r\nYou can use the element `` anywhere in your template, JSX, html, etc. By itself, you will get a blank, bordered canvas which you can control through its APIs (see [table](#inking-canvas) for details).\r\n\r\n```html\r\n \r\n```\r\n\r\nTry it: [live](https://pwa-inking-canvas-only.glitch.me/) | [code](https://glitch.com/edit/#!/pwa-inking-canvas-only?path=index.html%3A20%3A41)\r\n\r\n### Canvas with default toolbar\r\n\r\nYou can also add the `` element within the `` element so the user can control the canvas visually. To connect these elements, their respective `canvas` and `name` attribute values must match. The default toolbar contains all 6 tools in the following order: pen, pencil, highlighter, eraser, copy, and save.\r\n\r\n```html\r\n \r\n \r\n \r\n```\r\n\r\nTry it: [live](https://pwa-inking.glitch.me/) | [code](https://glitch.com/edit/#!/pwa-inking?path=index.html%3A1%3A0)\r\n\r\n### Canvas with customized toolbar\r\n\r\nYou can also specify the toolbar layout and select which subset of tools you want to include.\r\n\r\n| Toolbar layout options | Possible values | \r\n| ---------------------- | ---------------------------------------------------------- | \r\n| `orientation` | horizontal or vertical | \r\n| `vertical` | top, center, or bottom |\r\n| `horizontal` | left, center, or right ||\r\n\r\nAvailable tool components (which can be added in any order):\r\n\r\n- ``\r\n- ``\r\n- ``\r\n- ``\r\n- ``\r\n- ``\r\n\r\nExample usage:\r\n\r\n```html\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n```\r\n\r\nTry it: [live](https://pwa-inking-customized-toolbar.glitch.me/) | [code](https://glitch.com/edit/#!/pwa-inking-customized-toolbar?path=index.html%3A25%3A55)\r\n\r\n## Default inking behavior\r\n\r\nBy default `` will create ink strokes with a width depending on the active pointer event:\r\n\r\n| Pointer event | Property influencing ink stroke width | Ink stroke width details\r\n| ------------------- | ------------------------------------------- | --------------------------------------------------------- |\r\n| `mouse` | none | Should match the default inking-toolbar tool slider value |\r\n| `touch` | `width` | Changes with surface area of inking screen pressed |\r\n| `pen` | `pressure` | Changes with downward force applied to inking screen |\r\n\r\n\r\nIf a browser does not provide a value for its pointer event's pressure/width, then the canvas should default to treating this input like a mouse event.\r\n\r\nThe stroke width regardless of pointer event type can be set and fixed through the ``.\r\n\r\n## APIs\r\n\r\n## inking-canvas\r\n\r\n### Properties\r\n\r\n| Property | Attribute | Description | Type | Default |\r\n| -------------------- | -------------------- | ------------------------------------------------------------------------------- | --------- | --------------------------------------------------- |\r\n| `name` | `name` | Used to connect an inking toolbar | `string` | `\"\"` |\r\n| `canvasHeight` | `height` | Fills parent height default | `number` | `-1` |\r\n| `canvasWidth` | `width` | Fills parent width by default | `number` | `-1` |\r\n\r\n\r\n### Methods\r\n\r\n| Name | Description |\r\n| --------------- | -------------------------- |\r\n| `getStrokeColor()` | Returns ink color \r\n| `setStrokeColor(color: string)` | Changes ink color |\r\n| `getStrokeSize()` | Returns ink stroke width \r\n| `setStrokeSize(strokeSize: number)` | Changes ink stroke width |\r\n| `getStrokeStyle()` | Returns name of active tool defining ink style \r\n| `setStrokeStyle(toolName: string)` | Changes ink style to reflect provided tool name (pen, pencil, highlighter, or eraser) | \r\n| `copyCanvasContents()` | Copies canvas state to clipboard via Clipboard API (if supported by browser) |\r\n| `saveCanvasContents()` | Opens native file system to allow user to save canvas state as png image |\r\n| `eraseAll()` | Deletes all visible and cached canvas ink |\r\n| `getCanvas()` | Returns inner html canvas object for advanced use cases |\r\n| `getScale()` | Returns canvas size relative to its content's aspect ratio \r\n| `requestDrawCanvas()` | Triggers an additional canvas redraw if one is not already queued up |\r\n| `setMinWidth(newMinWidth: number)` | Changes minimum canvas width and overrides default 300px value |\r\n\r\n\r\n## inking-toolbar\r\n\r\n### Properties\r\n\r\n| Property | Attribute | Description | Type | Default |\r\n| -------------------- | -------------------- | ------------------------------------------------------------------------------- | --------- | --------------------------------------------------- |\r\n| `orientation` | `orientation` | Toolbar layout direction | `string` | `horizontal` |\r\n| `verticalAlignment` | `vertical` | Toolbar layout vertical alignment | `string` | `top` |\r\n| `horizontalAlignment` | `horizontal` | Toolbar layout horizontal alignment | `string` | `left` |\r\n| `targetInkingCanvas` | `canvas` | Connects toolbar to canvas whose name matches this value | `string` | `\"\"` |\r\n\r\n\r\n\r\n### Methods\r\n\r\n| Name | Description |\r\n| --------------- | -------------------------- |\r\n| `getCurrentToolName()` | Returns the active tool name \r\n| `getCurrentStrokeColor()` | Returns the current toolbar ink color of the active tool | |\r\n| `getCurrentStrokeColorName()` | Returns the current stroke color name of the active tool | Sets the current stroke color name for the active tool |\r\n| `getCurrentStrokeSize()` | Returns the current stroke width of the active tool \r\n| `requestDrawSineCanvas()` | Triggers an additional example stroke redraw if one is not already queued up |\r\n\r\n## Styling\r\n\r\n### Shadow parts\r\n\r\nYou can style the different parts of pwa-inking using [CSS ::part selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/::part). Below are the list of parts available for styling:\r\n\r\n| Component | Part Name | Description |\r\n| - | - | - |\r\n|`inking-canvas` | `canvas` | The html canvas object |\r\n| `inking-toolbar-pen` | `button` | The toolbar pen button |\r\n| `inking-toolbar-pencil` | `button` | The toolbar pencil button |\r\n| `inking-toolbar-highlighter` | `button` | The toolbar highlighter button |\r\n| `inking-toolbar-eraser` | `button` | The toolbar eraser button |\r\n| `inking-toolbar-copy` | `button` | The toolbar copy button |\r\n| `inking-toolbar-save` | `button` | The toolbar save button |\r\n\r\n### Styling samples\r\n\r\nRemove the canvas border:\r\n```css\r\n inking-canvas::part(canvas) {\r\n border: none;\r\n }\r\n```\r\nChange the save button color:\r\n```css\r\n inking-toolbar-save::part(button) {\r\n background-color: blue;\r\n }\r\n```\r\n\r\nTry it: [live](https://pwa-inking-styling-samples.glitch.me/) | [code](https://glitch.com/edit/#!/pwa-inking-styling-samples?path=index.html%3A29%3A20)\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"28ec2d2fad62118fa1422e0be4b6f425fbcc0e25","_id":"@pwabuilder/pwa-inking@1.0.5","_nodeVersion":"13.9.0","_npmVersion":"6.14.2","dist":{"integrity":"sha512-eZGJtzrV+Ix91kU7M6YeswTkslFPRk0zfw6pji0OhOf+2YWHkM4zOWqPvOXx9ZnUaSdjBlitYXy8Yk3B9v+UnQ==","shasum":"bc8402874e481a541b7832f645431f1831f802a2","tarball":"https://registry.npmjs.org/@pwabuilder/pwa-inking/-/pwa-inking-1.0.5.tgz","fileCount":28,"unpackedSize":889319,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfH0raCRA9TVsSAnZWagAAhCgP/3AwKmE5jjy/pY3a8aKa\n6sIhF4UdJd0x2z0TpheF8RSRXdfvvW6yzN2qZmEXgqC8GTnQrhr3tlUPtXwb\n/Fxft6AtLXpkK0qrad+qXqsWbv/qMKxX6jfpwaK+8c4Xg5cX/6+wI2+usX37\nG42o/OsBI3YHpZ6wTH2P+vO0Pu4s3eygJHOyHOYRUWiezzswQ6iOh+686Rd+\nywxOd/fdUweEOX4Q1xvkGiRW8blxPRWHan8t6bbT4LLlT/92GDkrPzUDPqod\njue4/RX7btK0UBNHl4f/YEF5fiobO+Y7caY2T9WzZMhBcAF9XU8WRGwPuyUs\nhGRRyxFfad2a31pLaFjX3k80NxSr+AYKIqTXPyzvEYxk8pfjZjV0e72C3T+a\nqzIowtsCkOu77uWp8xYQThrW9U9NNQLKewWSP9Y2lBUA7uVoQ5rJruZHcyXN\nk4voNFjQx44f5AtsRDzRyu4vLFD7DH4psh2T9IAXj0QhK4HnwnFDToiP9t9a\ny5JcmXmVrGJINCnkotSBTXXJYrfTFEYtX4wt/SCZQQ4Hm5Ufp3CNb8XGEVkY\n0Z4bNLkOlEzatFkhp/blHcPFiaYArUMUe0vAy59PlyEaxklRcnsDMwZmZ/xJ\n+qk62Befvv66bbCF9YhVII+5DTVZti2c/rK+2KInIQb6a1bS8OSAXd5SbGGj\n79jM\r\n=w+rD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID7Myk+j31pzRmcj6yAF8dghhH+HnhbiQc9yZu8mp5OXAiEAnZtUJoAwZVrylApIiB7s70/KGV+xa8cYFugWas38x70="}]},"maintainers":[{"name":"pwabuilder","email":"juwillis@microsoft.com"}],"_npmUser":{"name":"pwabuilder","email":"juwillis@microsoft.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/pwa-inking_1.0.5_1595886297975_0.7919626680003231"},"_hasShrinkwrap":false},"1.0.6":{"name":"@pwabuilder/pwa-inking","version":"1.0.6","description":"A [web component](https://meowni.ca/posts/web-components-with-otters/) from the [PWABuilder](https://pwabuilder.com) team that allows you to quickly add a 2D inking canvas (with an optional toolbar) to your Progressive Web App 🎨 ✨","main":"dist/index.js","module":"dist/index.js","scripts":{"start":"concurrently \"tsc --watch\" \"es-dev-server --app-index index.html --node-resolve --watch --open\"","build":"rimraf /dist && tsc && rollup -c","ts":"tsc"},"author":"","license":"ISC","dependencies":{"browser-nativefs":"^0.8.2","es-dev-server":"^1.45.1","idb-keyval":"^3.2.0","lit-element":"^2.2.1","pointer-tracker":"^2.2.1","typescript":"^3.8.3"},"devDependencies":{"@rollup/plugin-strip":"^1.3.3","concurrently":"^5.2.0","rimraf":"^3.0.2","rollup":"^2.3.3","rollup-plugin-minify-html-literals":"^1.2.3","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-terser":"^5.3.0"},"readme":"# pwa-inking\r\n\r\nA [web component](https://meowni.ca/posts/web-components-with-otters/) from the [PWABuilder](https://pwabuilder.com) team that allows you to quickly add a 2D inking canvas (with an optional toolbar) to your Progressive Web App 🎨 ✨\r\n\r\n_Built with [lit-element](https://lit-element.polymer-project.org/)_\r\n\r\n## What does it look like?\r\n\r\n![An image of what the component looks like](assets/images/example.png?raw=true \"pwa-inking\")\r\n\r\n## Supported Browsers\r\n- Edge\r\n- Chrome\r\n- Firefox\r\n- Safari\r\n\r\n## Using this component\r\n\r\n## Install\r\n\r\nThere are two ways to use this component. For simple projects or just to get started fast, we recommend using the component by script tag. If your project is using [npm](https://www.npmjs.com/) then we recommend using the npm package.\r\n\r\n### Script tag\r\n\r\n1. Add this script tag in the head of your index.html:\r\n\r\n```html\r\n \r\n```\r\n\r\n### NPM\r\n\r\n1. Run this command in your project directory:\r\n```shell\r\n npm install @pwabuilder/pwa-inking\r\n```\r\n\r\n2. Add this import statement to your script file:\r\n```js\r\n import @pwabuilder/pwa-inking\r\n```\r\n\r\n## Adding the component to your code\r\n\r\n### Canvas only\r\n\r\nYou can use the element `` anywhere in your template, JSX, html, etc. By itself, you will get a blank, bordered canvas which you can control through its APIs (see [table](#inking-canvas) for details).\r\n\r\n```html\r\n \r\n```\r\n\r\nTry it: [live](https://pwa-inking-canvas-only.glitch.me/) | [code](https://glitch.com/edit/#!/pwa-inking-canvas-only?path=index.html%3A20%3A41)\r\n\r\n### Canvas with default toolbar\r\n\r\nYou can also add the `` element within the `` element so the user can control the canvas visually. To connect these elements, their respective `canvas` and `name` attribute values must match. The default toolbar contains all 6 tools in the following order: pen, pencil, highlighter, eraser, copy, and save.\r\n\r\n```html\r\n \r\n \r\n \r\n```\r\n\r\nTry it: [live](https://pwa-inking.glitch.me/) | [code](https://glitch.com/edit/#!/pwa-inking?path=index.html%3A1%3A0)\r\n\r\n### Canvas with customized toolbar\r\n\r\nYou can also specify the toolbar layout and select which subset of tools you want to include.\r\n\r\n| Toolbar layout options | Possible values | \r\n| ---------------------- | ---------------------------------------------------------- | \r\n| `orientation` | horizontal or vertical | \r\n| `vertical` | top, center, or bottom |\r\n| `horizontal` | left, center, or right ||\r\n\r\nAvailable tool components (which can be added in any order):\r\n\r\n- ``\r\n- ``\r\n- ``\r\n- ``\r\n- ``\r\n- ``\r\n\r\nExample usage:\r\n\r\n```html\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n```\r\n\r\nTry it: [live](https://pwa-inking-customized-toolbar.glitch.me/) | [code](https://glitch.com/edit/#!/pwa-inking-customized-toolbar?path=index.html%3A25%3A55)\r\n\r\n## Default inking behavior\r\n\r\nBy default `` will create ink strokes with a width depending on the active pointer event:\r\n\r\n| Pointer event | Property influencing ink stroke width | Ink stroke width details\r\n| ------------------- | ------------------------------------------- | --------------------------------------------------------- |\r\n| `mouse` | none | Should match the default inking-toolbar tool slider value |\r\n| `touch` | `width` | Changes with surface area of inking screen pressed |\r\n| `pen` | `pressure` | Changes with downward force applied to inking screen |\r\n\r\n\r\nIf a browser does not provide a value for its pointer event's pressure/width, then the canvas should default to treating this input like a mouse event.\r\n\r\nThe stroke width regardless of pointer event type can be set and fixed through the ``.\r\n\r\n## APIs\r\n\r\n## inking-canvas\r\n\r\n### Properties\r\n\r\n| Property | Attribute | Description | Type | Default |\r\n| -------------------- | -------------------- | ------------------------------------------------------------------------------- | --------- | --------------------------------------------------- |\r\n| `name` | `name` | Used to connect an inking toolbar | `string` | `\"\"` |\r\n| `canvasHeight` | `height` | Fills parent height default | `number` | `-1` |\r\n| `canvasWidth` | `width` | Fills parent width by default | `number` | `-1` |\r\n\r\n\r\n### Methods\r\n\r\n| Name | Description |\r\n| --------------- | -------------------------- |\r\n| `getStrokeColor()` | Returns ink color \r\n| `setStrokeColor(color: string)` | Changes ink color |\r\n| `getStrokeSize()` | Returns ink stroke width \r\n| `setStrokeSize(strokeSize: number)` | Changes ink stroke width |\r\n| `getStrokeStyle()` | Returns name of active tool defining ink style \r\n| `setStrokeStyle(toolName: string)` | Changes ink style to reflect provided tool name (pen, pencil, highlighter, or eraser) | \r\n| `copyCanvasContents()` | Copies canvas state to clipboard via Clipboard API (if supported by browser) |\r\n| `saveCanvasContents()` | Opens native file system to allow user to save canvas state as png image |\r\n| `eraseAll()` | Deletes all visible and cached canvas ink |\r\n| `getCanvas()` | Returns inner html canvas object for advanced use cases |\r\n| `getScale()` | Returns canvas size relative to its content's aspect ratio \r\n| `requestDrawCanvas()` | Triggers an additional canvas redraw if one is not already queued up |\r\n| `setMinWidth(newMinWidth: number)` | Changes minimum canvas width and overrides default 300px value |\r\n\r\n\r\n## inking-toolbar\r\n\r\n### Properties\r\n\r\n| Property | Attribute | Description | Type | Default |\r\n| -------------------- | -------------------- | ------------------------------------------------------------------------------- | --------- | --------------------------------------------------- |\r\n| `orientation` | `orientation` | Toolbar layout direction | `string` | `horizontal` |\r\n| `verticalAlignment` | `vertical` | Toolbar layout vertical alignment | `string` | `top` |\r\n| `horizontalAlignment` | `horizontal` | Toolbar layout horizontal alignment | `string` | `left` |\r\n| `targetInkingCanvas` | `canvas` | Connects toolbar to canvas whose name matches this value | `string` | `\"\"` |\r\n\r\n\r\n\r\n### Methods\r\n\r\n| Name | Description |\r\n| --------------- | -------------------------- |\r\n| `getCurrentToolName()` | Returns the active tool name \r\n| `getCurrentStrokeColor()` | Returns the current toolbar ink color of the active tool | |\r\n| `getCurrentStrokeColorName()` | Returns the current stroke color name of the active tool | Sets the current stroke color name for the active tool |\r\n| `getCurrentStrokeSize()` | Returns the current stroke width of the active tool \r\n| `requestDrawSineCanvas()` | Triggers an additional example stroke redraw if one is not already queued up |\r\n\r\n## Styling\r\n\r\n### Shadow parts\r\n\r\nYou can style the different parts of pwa-inking using [CSS ::part selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/::part). Below are the list of parts available for styling:\r\n\r\n| Component | Part Name | Description |\r\n| - | - | - |\r\n|`inking-canvas` | `canvas` | The html canvas object |\r\n| `inking-toolbar-pen` | `button` | The toolbar pen button |\r\n| `inking-toolbar-pencil` | `button` | The toolbar pencil button |\r\n| `inking-toolbar-highlighter` | `button` | The toolbar highlighter button |\r\n| `inking-toolbar-eraser` | `button` | The toolbar eraser button |\r\n| `inking-toolbar-copy` | `button` | The toolbar copy button |\r\n| `inking-toolbar-save` | `button` | The toolbar save button |\r\n\r\n### Styling samples\r\n\r\nRemove the canvas border:\r\n```css\r\n inking-canvas::part(canvas) {\r\n border: none;\r\n }\r\n```\r\nChange the save button color:\r\n```css\r\n inking-toolbar-save::part(button) {\r\n background-color: blue;\r\n }\r\n```\r\n\r\nTry it: [live](https://pwa-inking-styling-samples.glitch.me/) | [code](https://glitch.com/edit/#!/pwa-inking-styling-samples?path=index.html%3A29%3A20)\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"b9cbbf01869d1c21c26ae57201b7277a333f25de","_id":"@pwabuilder/pwa-inking@1.0.6","_nodeVersion":"13.9.0","_npmVersion":"6.14.2","dist":{"integrity":"sha512-GtuosSkemYF1Jiyew64/V0G2sh9LYlPjfKB87Jl/+4loNmDSV3+9VqOUPRvreCDBSe9MPXP6FomevBVk/MIgqg==","shasum":"059fa866672966e19da6e1277f5667c0323f2b0e","tarball":"https://registry.npmjs.org/@pwabuilder/pwa-inking/-/pwa-inking-1.0.6.tgz","fileCount":28,"unpackedSize":888783,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIJaVCRA9TVsSAnZWagAAKawP/iwaYS06R0uXG/Stoz9N\nUMi5fGxePiNnxqy7YCqB/zK5hmfIPYcMO+5HRzGl5NXyWaYDT53W/sg4IU61\nEsw3kmaM4Frrp0Bnw5vumJO8tmH+7K6IR2+E+Zxj4aVJPoWGH7qcbf+nD4Ku\n23Af5Ri4ec0LRR9puRKA9FWo45YBo1j2cs2gfii+KHvBdbHIQWZSMhSNE3DE\n86cRt6SLIji3yyh0AzMUqaObuyj+kBd5Ig83VIstdzGBLYlF3Q5cOfU3Ey4n\n0vZdbQHwFhRRpIn67BKzybZaOlCscXX991WdfxTvBIe60izEkG/bVL1eVEOH\n2jEE0pQJdfbH1qebkPNZwC8Bb5RDE7mIpv3oAZtj0Rm8i1PVi6AyFkI5pke2\nYZzAwMdXj1X0WFbj85Jjvl0Iy/Ras571iiz7MGtPUhP+aaTDBZga9LIoSDdE\nDZzr+TMHt6v3bmSuzelZ66sIx/doA+TrP5dGxoA0tDu/CDaAc/9n7d+TzLo9\n9rG5vMdzwzOuWO0uoTjQgqzS5lvg1XcsP1ONwZlts7Fl35qfXXcITbiUuwU9\nYtAPMmDqqXKK2ykoHZivU63/d5GS2PU2uHD7bzyfopNDflNbx3rEDoxRR3gU\nOwm3sT7KOOyQitGuM160z+shDZJyWnch6FYo4zrG1g1HtiNQmRcquGCUHA6N\np6yx\r\n=XETD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBmdc1bIHBXghiT17cqXA9gY0u0TYEucuYYpJhbaTYnqAiA5oR8/i3wwbOUsdrCYVxCtbmGfpsDe7GyBSjVY5xo7Aw=="}]},"maintainers":[{"name":"pwabuilder","email":"juwillis@microsoft.com"}],"_npmUser":{"name":"pwabuilder","email":"juwillis@microsoft.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/pwa-inking_1.0.6_1595971220989_0.9989153966194197"},"_hasShrinkwrap":false},"1.0.7":{"name":"@pwabuilder/pwa-inking","version":"1.0.7","description":"A [web component](https://meowni.ca/posts/web-components-with-otters/) from the [PWABuilder](https://pwabuilder.com) team that allows you to quickly add a 2D inking canvas (with an optional toolbar) to your Progressive Web App 🎨 ✨","main":"dist/index.js","module":"dist/index.js","scripts":{"start":"concurrently \"tsc --watch\" \"es-dev-server --app-index index.html --node-resolve --watch --open\"","build":"rimraf /dist && tsc && rollup -c","ts":"tsc"},"author":"","license":"ISC","dependencies":{"browser-nativefs":"^0.8.2","es-dev-server":"^1.45.1","idb-keyval":"^3.2.0","lit-element":"^2.2.1","pointer-tracker":"^2.2.1","typescript":"^3.8.3"},"devDependencies":{"@rollup/plugin-strip":"^1.3.3","concurrently":"^5.2.0","rimraf":"^3.0.2","rollup":"^2.3.3","rollup-plugin-minify-html-literals":"^1.2.3","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-terser":"^5.3.0"},"readme":"# pwa-inking\r\n\r\nA [web component](https://meowni.ca/posts/web-components-with-otters/) from the [PWABuilder](https://pwabuilder.com) team that allows you to quickly add a 2D inking canvas (with an optional toolbar) to your Progressive Web App 🎨 ✨\r\n\r\n_Built with [lit-element](https://lit-element.polymer-project.org/)_\r\n\r\n## What does it look like?\r\n\r\n![An image of what the component looks like](assets/images/example.png?raw=true \"pwa-inking\")\r\n\r\n## Supported Browsers\r\n- Edge\r\n- Chrome\r\n- Firefox\r\n- Safari\r\n\r\n## Using this component\r\n\r\n## Install\r\n\r\nThere are two ways to use this component. For simple projects or just to get started fast, we recommend using the component by script tag. If your project is using [npm](https://www.npmjs.com/) then we recommend using the npm package.\r\n\r\n### Script tag\r\n\r\n1. Add this script tag in the head of your index.html:\r\n\r\n```html\r\n \r\n```\r\n\r\n### NPM\r\n\r\n1. Run this command in your project directory:\r\n```shell\r\n npm install @pwabuilder/pwa-inking\r\n```\r\n\r\n2. Add this import statement to your script file:\r\n```js\r\n import @pwabuilder/pwa-inking\r\n```\r\n\r\n## Adding the component to your code\r\n\r\n### Canvas only\r\n\r\nYou can use the element `` anywhere in your template, JSX, html, etc. By itself, you will get a blank, bordered canvas which you can control through its APIs (see [table](#inking-canvas) for details).\r\n\r\n```html\r\n \r\n```\r\n\r\nTry it: [live](https://pwa-inking-canvas-only.glitch.me/) | [code](https://glitch.com/edit/#!/pwa-inking-canvas-only?path=index.html%3A20%3A41)\r\n\r\n### Canvas with default toolbar\r\n\r\nYou can also add the `` element within the `` element so the user can control the canvas visually. To connect these elements, their respective `canvas` and `name` attribute values must match. The default toolbar contains all 6 tools in the following order: pen, pencil, highlighter, eraser, copy, and save.\r\n\r\n```html\r\n \r\n \r\n \r\n```\r\n\r\nTry it: [live](https://pwa-inking.glitch.me/) | [code](https://glitch.com/edit/#!/pwa-inking?path=index.html%3A1%3A0)\r\n\r\n### Canvas with customized toolbar\r\n\r\nYou can also specify the toolbar layout and select which subset of tools you want to include.\r\n\r\n| Toolbar layout options | Possible values | \r\n| ---------------------- | ---------------------------------------------------------- | \r\n| `orientation` | horizontal or vertical | \r\n| `vertical` | top, center, or bottom |\r\n| `horizontal` | left, center, or right ||\r\n\r\nAvailable tool components (which can be added in any order):\r\n\r\n- ``\r\n- ``\r\n- ``\r\n- ``\r\n- ``\r\n- ``\r\n\r\nExample usage:\r\n\r\n```html\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n```\r\n\r\nTry it: [live](https://pwa-inking-customized-toolbar.glitch.me/) | [code](https://glitch.com/edit/#!/pwa-inking-customized-toolbar?path=index.html%3A25%3A55)\r\n\r\n## Default inking behavior\r\n\r\nBy default `` will create ink strokes with a width depending on the active pointer event:\r\n\r\n| Pointer event | Property influencing ink stroke width | Ink stroke width details\r\n| ------------------- | ------------------------------------------- | --------------------------------------------------------- |\r\n| `mouse` | none | Should match the default inking-toolbar tool slider value |\r\n| `touch` | `width` | Changes with surface area of inking screen pressed |\r\n| `pen` | `pressure` | Changes with downward force applied to inking screen |\r\n\r\n\r\nIf a browser does not provide a value for its pointer event's pressure/width, then the canvas should default to treating this input like a mouse event.\r\n\r\nThe stroke width regardless of pointer event type can be set and fixed through the ``.\r\n\r\n## APIs\r\n\r\n## inking-canvas\r\n\r\n### Properties\r\n\r\n| Property | Attribute | Description | Type | Default |\r\n| -------------------- | -------------------- | ------------------------------------------------------------------------------- | --------- | --------------------------------------------------- |\r\n| `name` | `name` | Used to connect an inking toolbar | `string` | `\"\"` |\r\n| `canvasHeight` | `height` | Fills parent height default | `number` | `-1` |\r\n| `canvasWidth` | `width` | Fills parent width by default | `number` | `-1` |\r\n\r\n\r\n### Methods\r\n\r\n| Name | Description |\r\n| --------------- | -------------------------- |\r\n| `getStrokeColor()` | Returns ink color \r\n| `setStrokeColor(color: string)` | Changes ink color |\r\n| `getStrokeSize()` | Returns ink stroke width \r\n| `setStrokeSize(strokeSize: number)` | Changes ink stroke width |\r\n| `getStrokeStyle()` | Returns name of active tool defining ink style \r\n| `setStrokeStyle(toolName: string)` | Changes ink style to reflect provided tool name (pen, pencil, highlighter, or eraser) | \r\n| `copyCanvasContents()` | Copies canvas state to clipboard via Clipboard API (if supported by browser) |\r\n| `saveCanvasContents()` | Opens native file system to allow user to save canvas state as png image |\r\n| `eraseAll()` | Deletes all visible and cached canvas ink |\r\n| `getCanvas()` | Returns inner html canvas object for advanced use cases |\r\n| `getScale()` | Returns canvas size relative to its content's aspect ratio \r\n| `requestDrawCanvas()` | Triggers an additional canvas redraw if one is not already queued up |\r\n| `setMinWidth(newMinWidth: number)` | Changes minimum canvas width and overrides default 300px value |\r\n\r\n\r\n## inking-toolbar\r\n\r\n### Properties\r\n\r\n| Property | Attribute | Description | Type | Default |\r\n| -------------------- | -------------------- | ------------------------------------------------------------------------------- | --------- | --------------------------------------------------- |\r\n| `orientation` | `orientation` | Toolbar layout direction | `string` | `horizontal` |\r\n| `verticalAlignment` | `vertical` | Toolbar layout vertical alignment | `string` | `top` |\r\n| `horizontalAlignment` | `horizontal` | Toolbar layout horizontal alignment | `string` | `left` |\r\n| `targetInkingCanvas` | `canvas` | Connects toolbar to canvas whose name matches this value | `string` | `\"\"` |\r\n\r\n\r\n\r\n### Methods\r\n\r\n| Name | Description |\r\n| --------------- | -------------------------- |\r\n| `getCurrentToolName()` | Returns the active tool name \r\n| `getCurrentStrokeColor()` | Returns the current toolbar ink color of the active tool | |\r\n| `getCurrentStrokeColorName()` | Returns the current stroke color name of the active tool | Sets the current stroke color name for the active tool |\r\n| `getCurrentStrokeSize()` | Returns the current stroke width of the active tool \r\n| `requestDrawSineCanvas()` | Triggers an additional example stroke redraw if one is not already queued up |\r\n\r\n## Styling\r\n\r\n### Shadow parts\r\n\r\nYou can style the different parts of pwa-inking using [CSS ::part selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/::part). Below are the list of parts available for styling:\r\n\r\n| Component | Part Name | Description |\r\n| - | - | - |\r\n|`inking-canvas` | `canvas` | The html canvas object |\r\n| `inking-toolbar-pen` | `button` | The toolbar pen button |\r\n| `inking-toolbar-pencil` | `button` | The toolbar pencil button |\r\n| `inking-toolbar-highlighter` | `button` | The toolbar highlighter button |\r\n| `inking-toolbar-eraser` | `button` | The toolbar eraser button |\r\n| `inking-toolbar-copy` | `button` | The toolbar copy button |\r\n| `inking-toolbar-save` | `button` | The toolbar save button |\r\n\r\n### Styling samples\r\n\r\nRemove the canvas border:\r\n```css\r\n inking-canvas::part(canvas) {\r\n border: none;\r\n }\r\n```\r\nChange the save button color:\r\n```css\r\n inking-toolbar-save::part(button) {\r\n background-color: blue;\r\n }\r\n```\r\n\r\nTry it: [live](https://pwa-inking-styling-samples.glitch.me/) | [code](https://glitch.com/edit/#!/pwa-inking-styling-samples?path=index.html%3A29%3A20)\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"dc999104592d95276f578b8a565a2aa881df8940","_id":"@pwabuilder/pwa-inking@1.0.7","_nodeVersion":"13.9.0","_npmVersion":"6.14.2","dist":{"integrity":"sha512-nlZU+Lx0k7Ee6LTMqs0HztA4VZzqPXS46xBYH5HPhXREPf2sRKUFxrPWppPofuFnyPNhR1KeuPMJOZNSJN0uPQ==","shasum":"a1d5889c359d76b52dfc187ab45ad3785828bf1a","tarball":"https://registry.npmjs.org/@pwabuilder/pwa-inking/-/pwa-inking-1.0.7.tgz","fileCount":28,"unpackedSize":888804,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIL0nCRA9TVsSAnZWagAAlbEP/1q9QHkyAh2uPmlCck+e\nQZQW0tR2S2GntwqVdo31ftTKIOlB8IDrmiqZwn9OVmO8p/I27OJpSNEyZu3l\nW96w3OdqsRwe4LUt6FrbEG0GtyXTtZaUVwBVWyqAke7p3tPdhtcEr7Vetu02\nyXnD46pW4Edzxp6iULhDFpR34ufUqnPcaPprLiRMjbjDtBCpPwlZ2km4qj48\nZ0Ix7YYDs/48Dsp5TfGx8F0K9lhJJGVwgbynuVC41AgwNl50HmK3gbUY1B0t\nI6N5mLxQbNxlo7kjgIt1mstsXZ1AyPvH8aGk6MjE1yDBK0w1l8e6wmDAzEY5\nngZux7EZid8T5IZzgPIX8ildBc4bHR0aa5VE+mDeisIXs0pcSshGh07QcNZc\ntTgXq08qZ/tz8XNEW5m9lqLtsmbShaQCJOEjR88e0zUa1z+Podt8JnElDncf\nkOMEvAVvq7QYksmC/pnxusNSHhYhH1+akChEvWFmJXmmrY2LUU0/ND07Sx6X\nNbFZNrXAtNG+dK4bXrcgXAuvHN31sjTksSSOSA48SPjpSEay3VvJb8kEUCaD\n3looDwn3/3MNFm9czZ4wSHYl166Coj0v2vHSJKFcUO9nXRl2gb44eKigfAZ3\nB7+VwxeJ7tOdF6sO/5MnedJmCHRPyQxDbFQdglsuiBcz/rgS5l2t7b9TdaI9\nq+6L\r\n=KrL0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD9KcnB9ZxeSzsTuSaQcoTCi1BD40CwBpWF4ILavSgxWAIgCt3gIlyPs9IsZWyINvoj2yAtrx4twUw2UElqFJYpEFY="}]},"maintainers":[{"name":"pwabuilder","email":"juwillis@microsoft.com"}],"_npmUser":{"name":"pwabuilder","email":"juwillis@microsoft.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/pwa-inking_1.0.7_1595981094731_0.8179345129348152"},"_hasShrinkwrap":false},"1.0.8":{"name":"@pwabuilder/pwa-inking","version":"1.0.8","description":"A [web component](https://meowni.ca/posts/web-components-with-otters/) from the [PWABuilder](https://pwabuilder.com) team that allows you to quickly add a 2D inking canvas (with an optional toolbar) to your Progressive Web App 🎨 ✨","main":"dist/index.js","module":"dist/index.js","scripts":{"start":"concurrently \"tsc --watch\" \"es-dev-server --app-index index.html --node-resolve --watch --open\"","build":"rimraf /dist && tsc && rollup -c","ts":"tsc"},"author":"","license":"ISC","dependencies":{"browser-nativefs":"^0.8.2","es-dev-server":"^1.45.1","idb-keyval":"^3.2.0","lit-element":"^2.2.1","pointer-tracker":"^2.2.1","typescript":"^3.8.3"},"devDependencies":{"@rollup/plugin-strip":"^1.3.3","concurrently":"^5.2.0","rimraf":"^3.0.2","rollup":"^2.3.3","rollup-plugin-minify-html-literals":"^1.2.3","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-terser":"^5.3.0"},"readme":"# pwa-inking\r\n\r\nA [web component](https://meowni.ca/posts/web-components-with-otters/) from the [PWABuilder](https://pwabuilder.com) team that allows you to quickly add a 2D inking canvas (with an optional toolbar) to your Progressive Web App 🎨 ✨\r\n\r\n_Built with [lit-element](https://lit-element.polymer-project.org/)_\r\n\r\n## What does it look like?\r\n\r\n![An image of what the component looks like](assets/images/example.png?raw=true \"pwa-inking\")\r\n\r\n## Supported Browsers\r\n- Edge\r\n- Chrome\r\n- Firefox\r\n- Safari\r\n\r\n## Using this component\r\n\r\n## Install\r\n\r\nThere are two ways to use this component. For simple projects or just to get started fast, we recommend using the component by script tag. If your project is using [npm](https://www.npmjs.com/) then we recommend using the npm package.\r\n\r\n### Script tag\r\n\r\n1. Add this script tag in the head of your index.html:\r\n\r\n```html\r\n \r\n```\r\n\r\n### NPM\r\n\r\n1. Run this command in your project directory:\r\n```shell\r\n npm install @pwabuilder/pwa-inking\r\n```\r\n\r\n2. Add this import statement to your script file:\r\n```js\r\n import @pwabuilder/pwa-inking\r\n```\r\n\r\n## Adding the component to your code\r\n\r\n### Canvas only\r\n\r\nYou can use the element `` anywhere in your template, JSX, html, etc. By itself, you will get a blank, bordered canvas which you can control through its APIs (see [table](#inking-canvas) for details).\r\n\r\n```html\r\n \r\n```\r\n\r\nTry it: [live](https://pwa-inking-canvas-only.glitch.me/) | [code](https://glitch.com/edit/#!/pwa-inking-canvas-only?path=index.html%3A20%3A41)\r\n\r\n### Canvas with default toolbar\r\n\r\nYou can also add the `` element within the `` element so the user can control the canvas visually. To connect these elements, their respective `canvas` and `name` attribute values must match. The default toolbar contains all 6 tools in the following order: pen, pencil, highlighter, eraser, copy, and save.\r\n\r\n```html\r\n \r\n \r\n \r\n```\r\n\r\nTry it: [live](https://pwa-inking.glitch.me/) | [code](https://glitch.com/edit/#!/pwa-inking?path=index.html%3A1%3A0)\r\n\r\n### Canvas with customized toolbar\r\n\r\nYou can also specify the toolbar layout and select which subset of tools you want to include.\r\n\r\n| Toolbar layout options | Possible values | \r\n| ---------------------- | ---------------------------------------------------------- | \r\n| `orientation` | horizontal or vertical | \r\n| `vertical` | top, center, or bottom |\r\n| `horizontal` | left, center, or right ||\r\n\r\nAvailable tool components (which can be added in any order):\r\n\r\n- ``\r\n- ``\r\n- ``\r\n- ``\r\n- ``\r\n- ``\r\n\r\nExample usage:\r\n\r\n```html\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n```\r\n\r\nTry it: [live](https://pwa-inking-customized-toolbar.glitch.me/) | [code](https://glitch.com/edit/#!/pwa-inking-customized-toolbar?path=index.html%3A25%3A55)\r\n\r\n## Default inking behavior\r\n\r\nBy default `` will create ink strokes with a width depending on the active pointer event:\r\n\r\n| Pointer event | Property influencing ink stroke width | Ink stroke width details\r\n| ------------------- | ------------------------------------------- | --------------------------------------------------------- |\r\n| `mouse` | none | Should match the default inking-toolbar tool slider value |\r\n| `touch` | `width` | Changes with surface area of inking screen pressed |\r\n| `pen` | `pressure` | Changes with downward force applied to inking screen |\r\n\r\n\r\nIf a browser does not provide a value for its pointer event's pressure/width, then the canvas should default to treating this input like a mouse event.\r\n\r\nThe stroke width regardless of pointer event type can be set and fixed through the ``.\r\n\r\n## APIs\r\n\r\n## inking-canvas\r\n\r\n### Properties\r\n\r\n| Property | Attribute | Description | Type | Default |\r\n| -------------------- | -------------------- | ------------------------------------------------------------------------------- | --------- | --------------------------------------------------- |\r\n| `name` | `name` | Used to connect an inking toolbar | `string` | `\"\"` |\r\n| `canvasHeight` | `height` | Fills parent height default | `number` | `-1` |\r\n| `canvasWidth` | `width` | Fills parent width by default | `number` | `-1` |\r\n\r\n\r\n### Methods\r\n\r\n| Name | Description |\r\n| --------------- | -------------------------- |\r\n| `getStrokeColor()` | Returns ink color \r\n| `setStrokeColor(color: string)` | Changes ink color |\r\n| `getStrokeSize()` | Returns ink stroke width \r\n| `setStrokeSize(strokeSize: number)` | Changes ink stroke width |\r\n| `getStrokeStyle()` | Returns name of active tool defining ink style \r\n| `setStrokeStyle(toolName: string)` | Changes ink style to reflect provided tool name (pen, pencil, highlighter, or eraser) | \r\n| `copyCanvasContents()` | Copies canvas state to clipboard via Clipboard API (if supported by browser) |\r\n| `saveCanvasContents()` | Opens native file system to allow user to save canvas state as png image |\r\n| `eraseAll()` | Deletes all visible and cached canvas ink |\r\n| `getCanvas()` | Returns inner html canvas object for advanced use cases |\r\n| `getScale()` | Returns canvas size relative to its content's aspect ratio \r\n| `requestDrawCanvas()` | Triggers an additional canvas redraw if one is not already queued up |\r\n| `setMinWidth(newMinWidth: number)` | Changes minimum canvas width and overrides default 300px value |\r\n\r\n\r\n## inking-toolbar\r\n\r\n### Properties\r\n\r\n| Property | Attribute | Description | Type | Default |\r\n| -------------------- | -------------------- | ------------------------------------------------------------------------------- | --------- | --------------------------------------------------- |\r\n| `orientation` | `orientation` | Toolbar layout direction | `string` | `horizontal` |\r\n| `verticalAlignment` | `vertical` | Toolbar layout vertical alignment | `string` | `top` |\r\n| `horizontalAlignment` | `horizontal` | Toolbar layout horizontal alignment | `string` | `left` |\r\n| `targetInkingCanvas` | `canvas` | Connects toolbar to canvas whose name matches this value | `string` | `\"\"` |\r\n\r\n\r\n\r\n### Methods\r\n\r\n| Name | Description |\r\n| --------------- | -------------------------- |\r\n| `getCurrentToolName()` | Returns the active tool name \r\n| `getCurrentStrokeColor()` | Returns the current toolbar ink color of the active tool | |\r\n| `getCurrentStrokeColorName()` | Returns the current stroke color name of the active tool | Sets the current stroke color name for the active tool |\r\n| `getCurrentStrokeSize()` | Returns the current stroke width of the active tool \r\n| `requestDrawSineCanvas()` | Triggers an additional example stroke redraw if one is not already queued up |\r\n\r\n## Styling\r\n\r\n### Shadow parts\r\n\r\nYou can style the different parts of pwa-inking using [CSS ::part selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/::part). Below are the list of parts available for styling:\r\n\r\n| Component | Part Name | Description |\r\n| - | - | - |\r\n|`inking-canvas` | `canvas` | The html canvas object |\r\n| `inking-toolbar-pen` | `button` | The toolbar pen button |\r\n| `inking-toolbar-pencil` | `button` | The toolbar pencil button |\r\n| `inking-toolbar-highlighter` | `button` | The toolbar highlighter button |\r\n| `inking-toolbar-eraser` | `button` | The toolbar eraser button |\r\n| `inking-toolbar-copy` | `button` | The toolbar copy button |\r\n| `inking-toolbar-save` | `button` | The toolbar save button |\r\n\r\n### Styling samples\r\n\r\nRemove the canvas border:\r\n```css\r\n inking-canvas::part(canvas) {\r\n border: none;\r\n }\r\n```\r\nChange the save button color:\r\n```css\r\n inking-toolbar-save::part(button) {\r\n background-color: blue;\r\n }\r\n```\r\n\r\nTry it: [live](https://pwa-inking-styling-samples.glitch.me/) | [code](https://glitch.com/edit/#!/pwa-inking-styling-samples?path=index.html%3A29%3A20)\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"3ed333f9ceb4e886a36b392fe435f82ad4180454","_id":"@pwabuilder/pwa-inking@1.0.8","_nodeVersion":"13.9.0","_npmVersion":"6.14.2","dist":{"integrity":"sha512-bscCpg0rfk01OQePTpFZHYpyhFPNK4Wo0bt8uMHI6rDgi0sT1zemGPi3SH4QuBxDCIyusWN3Kkp2o3f2HP7l1Q==","shasum":"cd4a0a68ea80d25b86ce4fd613fd52f1eb2a1d86","tarball":"https://registry.npmjs.org/@pwabuilder/pwa-inking/-/pwa-inking-1.0.8.tgz","fileCount":28,"unpackedSize":891387,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIbmBCRA9TVsSAnZWagAAJtsP/0rtfGHoQI7uNgO8KDXZ\n0oUBrp1aArTb7la2P9dlW4qDqq8jtxYewMGzWklCo5peiinqzrqUaVMCWrL/\nzat2aGjgauyUJqqxqF1Dog6rQ8/JNcytIxMAllG7+dwaDMPO/GMwTeBgRxkM\nmYuRW11u75r43sgLAQGJnt12z5S1Cm5AN/6iFXsZ6/hASkpiLJBxvz75rrnd\n6BmjueQxYNbEV1C9uQ48N8RfSXKtqO4WAWDAdSX+xZGqjTbp0T/4p5pOt++h\nYjAHdXtYFVRwcpXNjIfo7QQ6aCUKZtLvbur84rRFxH5qzmDPmMKVP3Q0Fzba\nR2i96r8852qQk//mPD4e2qa4AEKrSymccJrnuwM7tXQzKsgeoekIuApod4n+\nzFuxKVWY8J+Rq3CDnY1dSJOhxWUWKq0e58ezN5ghyEHXys7P+36MOwWF+778\nTrphTzSJ8bP6PtNFu1fW2hknsnd+WsoBFCWM9kEY288wVm+nNhsEaYx6EVaJ\nukAT58d/4coXrDsN+L42dHyub6Y7U9BF9ZR0IPz7OodposnxfGjJskQfnFRd\n5PVepO1124MskPr0Q09h4nD/ZcGotts1t8yCL2F5RCU9DRXTEVXSsm+eifmI\nXH2Q7tFxTbITypSngjKGepWkOi3MRyZxqnq9n8UbP/iLwGUfGMuw91Pr8vCm\n0bnY\r\n=2RvY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDvimSLDtEsUatxoqikjeo4nPP/NqBOxYr89uxvYM4aBAIhAPHRmP4pds9oKhguy8e1WIF0vmZoo6JxWcdEfW9fNdG5"}]},"maintainers":[{"name":"pwabuilder","email":"juwillis@microsoft.com"}],"_npmUser":{"name":"pwabuilder","email":"juwillis@microsoft.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/pwa-inking_1.0.8_1596045697164_0.1641289830184618"},"_hasShrinkwrap":false},"1.0.9":{"name":"@pwabuilder/pwa-inking","version":"1.0.9","description":"A [web component](https://meowni.ca/posts/web-components-with-otters/) from the [PWABuilder](https://pwabuilder.com) team that allows you to quickly add a 2D inking canvas (with an optional toolbar) to your Progressive Web App 🎨 ✨","main":"dist/index.js","module":"dist/index.js","scripts":{"start":"concurrently \"tsc --watch\" \"es-dev-server --app-index index.html --node-resolve --watch --open\"","build":"rimraf /dist && tsc && rollup -c","ts":"tsc"},"author":"","license":"ISC","dependencies":{"browser-nativefs":"^0.8.2","es-dev-server":"^1.45.1","idb-keyval":"^3.2.0","lit-element":"^2.2.1","pointer-tracker":"^2.2.1","typescript":"^3.8.3"},"devDependencies":{"@rollup/plugin-strip":"^1.3.3","concurrently":"^5.2.0","rimraf":"^3.0.2","rollup":"^2.3.3","rollup-plugin-minify-html-literals":"^1.2.3","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-terser":"^5.3.0"},"readme":"# pwa-inking\r\n\r\nA [web component](https://meowni.ca/posts/web-components-with-otters/) from the [PWABuilder](https://pwabuilder.com) team that allows you to quickly add a 2D inking canvas (with an optional toolbar) to your Progressive Web App 🎨 ✨\r\n\r\n_Built with [lit-element](https://lit-element.polymer-project.org/)_\r\n\r\n## What does it look like?\r\n\r\n![An image of what the component looks like](assets/images/example.png?raw=true \"pwa-inking\")\r\n\r\n## Supported Browsers\r\n- Edge\r\n- Chrome\r\n- Firefox\r\n- Safari\r\n\r\n## Using this component\r\n\r\n## Install\r\n\r\nThere are two ways to use this component. For simple projects or just to get started fast, we recommend using the component by script tag. If your project is using [npm](https://www.npmjs.com/) then we recommend using the npm package.\r\n\r\n### Script tag\r\n\r\n1. Add this script tag in the head of your index.html:\r\n\r\n```html\r\n \r\n```\r\n\r\n### NPM\r\n\r\n1. Run this command in your project directory:\r\n```shell\r\n npm install @pwabuilder/pwa-inking\r\n```\r\n\r\n2. Add this import statement to your script file:\r\n```js\r\n import @pwabuilder/pwa-inking\r\n```\r\n\r\n## Adding the component to your code\r\n\r\n### Canvas only\r\n\r\nYou can use the element `` anywhere in your template, JSX, html, etc. By itself, you will get a blank, bordered canvas which you can control through its APIs (see [table](#inking-canvas) for details).\r\n\r\n```html\r\n \r\n```\r\n\r\nTry it: [live](https://pwa-inking-canvas-only.glitch.me/) | [code](https://glitch.com/edit/#!/pwa-inking-canvas-only?path=index.html%3A20%3A41)\r\n\r\n### Canvas with default toolbar\r\n\r\nYou can also add the `` element within the `` element so the user can control the canvas visually. To connect these elements, their respective `canvas` and `name` attribute values must match. The default toolbar contains all 6 tools in the following order: pen, pencil, highlighter, eraser, copy, and save.\r\n\r\n```html\r\n \r\n \r\n \r\n```\r\n\r\nTry it: [live](https://pwa-inking.glitch.me/) | [code](https://glitch.com/edit/#!/pwa-inking?path=index.html%3A1%3A0)\r\n\r\n### Canvas with customized toolbar\r\n\r\nYou can also specify the toolbar layout and select which subset of tools you want to include.\r\n\r\n| Toolbar layout options | Possible values | \r\n| ---------------------- | ---------------------------------------------------------- | \r\n| `orientation` | horizontal or vertical | \r\n| `vertical` | top, center, or bottom |\r\n| `horizontal` | left, center, or right ||\r\n\r\nAvailable tool components (which can be added in any order):\r\n\r\n- ``\r\n- ``\r\n- ``\r\n- ``\r\n- ``\r\n- ``\r\n\r\nExample usage:\r\n\r\n```html\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n```\r\n\r\nTry it: [live](https://pwa-inking-customized-toolbar.glitch.me/) | [code](https://glitch.com/edit/#!/pwa-inking-customized-toolbar?path=index.html%3A25%3A55)\r\n\r\n## Default inking behavior\r\n\r\nBy default `` will create ink strokes with a width depending on the active pointer event:\r\n\r\n| Pointer event | Property influencing ink stroke width | Ink stroke width details\r\n| ------------------- | ------------------------------------------- | --------------------------------------------------------- |\r\n| `mouse` | none | Should match the default inking-toolbar tool slider value |\r\n| `touch` | `width` | Changes with surface area of inking screen pressed |\r\n| `pen` | `pressure` | Changes with downward force applied to inking screen |\r\n\r\n\r\nIf a browser does not provide a value for its pointer event's pressure/width, then the canvas should default to treating this input like a mouse event.\r\n\r\nThe stroke width regardless of pointer event type can be set and fixed through the ``.\r\n\r\n## APIs\r\n\r\n## inking-canvas\r\n\r\n### Properties\r\n\r\n| Property | Attribute | Description | Type | Default |\r\n| -------------------- | -------------------- | ------------------------------------------------------------------------------- | --------- | --------------------------------------------------- |\r\n| `name` | `name` | Used to connect an inking toolbar | `string` | `\"\"` |\r\n| `canvasHeight` | `height` | Fills parent height default | `number` | `-1` |\r\n| `canvasWidth` | `width` | Fills parent width by default | `number` | `-1` |\r\n\r\n\r\n### Methods\r\n\r\n| Name | Description |\r\n| --------------- | -------------------------- |\r\n| `getStrokeColor()` | Returns ink color \r\n| `setStrokeColor(color: string)` | Changes ink color |\r\n| `getStrokeSize()` | Returns ink stroke width \r\n| `setStrokeSize(strokeSize: number)` | Changes ink stroke width |\r\n| `getStrokeStyle()` | Returns name of active tool defining ink style \r\n| `setStrokeStyle(toolName: string)` | Changes ink style to reflect provided tool name (pen, pencil, highlighter, or eraser) | \r\n| `copyCanvasContents()` | Copies canvas state to clipboard via Clipboard API (if supported by browser) |\r\n| `saveCanvasContents()` | Opens native file system to allow user to save canvas state as png image |\r\n| `eraseAll()` | Deletes all visible and cached canvas ink |\r\n| `getCanvas()` | Returns inner html canvas object for advanced use cases |\r\n| `getScale()` | Returns canvas size relative to its content's aspect ratio \r\n| `requestDrawCanvas()` | Triggers an additional canvas redraw if one is not already queued up |\r\n| `setMinWidth(newMinWidth: number)` | Changes minimum canvas width and overrides default 300px value |\r\n\r\n\r\n## inking-toolbar\r\n\r\n### Properties\r\n\r\n| Property | Attribute | Description | Type | Default |\r\n| -------------------- | -------------------- | ------------------------------------------------------------------------------- | --------- | --------------------------------------------------- |\r\n| `orientation` | `orientation` | Toolbar layout direction | `string` | `horizontal` |\r\n| `verticalAlignment` | `vertical` | Toolbar layout vertical alignment | `string` | `top` |\r\n| `horizontalAlignment` | `horizontal` | Toolbar layout horizontal alignment | `string` | `left` |\r\n| `targetInkingCanvas` | `canvas` | Connects toolbar to canvas whose name matches this value | `string` | `\"\"` |\r\n\r\n\r\n\r\n### Methods\r\n\r\n| Name | Description |\r\n| --------------- | -------------------------- |\r\n| `getCurrentToolName()` | Returns the active tool name \r\n| `getCurrentStrokeColor()` | Returns the current toolbar ink color of the active tool | |\r\n| `getCurrentStrokeColorName()` | Returns the current stroke color name of the active tool | Sets the current stroke color name for the active tool |\r\n| `getCurrentStrokeSize()` | Returns the current stroke width of the active tool \r\n| `requestDrawSineCanvas()` | Triggers an additional example stroke redraw if one is not already queued up |\r\n\r\n## Styling\r\n\r\n### Shadow parts\r\n\r\nYou can style the different parts of pwa-inking using [CSS ::part selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/::part). Below are the list of parts available for styling:\r\n\r\n| Component | Part Name | Description |\r\n| - | - | - |\r\n|`inking-canvas` | `canvas` | The html canvas object |\r\n| `inking-toolbar-pen` | `button` | The toolbar pen button |\r\n| `inking-toolbar-pencil` | `button` | The toolbar pencil button |\r\n| `inking-toolbar-highlighter` | `button` | The toolbar highlighter button |\r\n| `inking-toolbar-eraser` | `button` | The toolbar eraser button |\r\n| `inking-toolbar-copy` | `button` | The toolbar copy button |\r\n| `inking-toolbar-save` | `button` | The toolbar save button |\r\n\r\n### Styling samples\r\n\r\nRemove the canvas border:\r\n```css\r\n inking-canvas::part(canvas) {\r\n border: none;\r\n }\r\n```\r\nChange the save button color:\r\n```css\r\n inking-toolbar-save::part(button) {\r\n background-color: blue;\r\n }\r\n```\r\n\r\nTry it: [live](https://pwa-inking-styling-samples.glitch.me/) | [code](https://glitch.com/edit/#!/pwa-inking-styling-samples?path=index.html%3A29%3A20)\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"d9b22c1d6caa95c66324e7d19ed4574a7257c01b","_id":"@pwabuilder/pwa-inking@1.0.9","_nodeVersion":"13.9.0","_npmVersion":"6.14.2","dist":{"integrity":"sha512-OhAieaVOulIwu36yun+3XL+/ONz4X8jhUQrwEbeDhlY4u/SceQruRVVsMGjs9d82GV13sIWpV5cFgM+FZN6u3w==","shasum":"1290aa43be7cae737062634db8fe5e6c4805b076","tarball":"https://registry.npmjs.org/@pwabuilder/pwa-inking/-/pwa-inking-1.0.9.tgz","fileCount":28,"unpackedSize":891656,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIcFACRA9TVsSAnZWagAAMy0P/jy8s++E+l8dPurzf8V6\nLisK2+lJUBgMaDqm+V7+WtTWUdVfH+tFAzaWvdvJv8MC/vQoT7U7E23PzN2Z\nF9w2w4Fpys5wiSQCcEq7+JWWWxn9U2oAr6dQ4UHd+BKpQgRr7VbM7A3tncb1\nKXMgnGO39NqeTg2JvAVTXN5XeF22n+qqBc+Y9QtUNguQAA7aR01UnwivTVi9\ni/+04BQdHxrx6Fy0VraHpmFdf0MZOH/6fFUZlw3DS7XxptCciHes8UB9y4vF\nutBXwuIct2jVpVkHoHhnbisEtZ5AHcUeTFStWegj19atKN7ZPKDGZPgwMmEZ\nwfajA6QCyW9lQSBcjcRKLCr53Pqc1z8qn3OhEHxRDi6MYxCS4UzS8DHo5aMf\ns9WBRBCV6tNuVDafriXv/AacH2K6vNT2lj4bpDEiH/aFqUF5KL5o/d1LrR7j\njr0CYFWJs9NWYpOYXQdzZoO8PwkcYWrLpC5snB96haMj+juK2MDaGPu7GmKB\nN1jTDHQ6IR2ajX/tqxL/BYRlLRwApCDwsDRiddtE685MmZEOtGyy/WnifOln\nywKF18JAKrKmxEv0CRitnTfaSnlKEMUZrReVmlgsJzuC5V4PIIJS4VEu7xrH\nMP+C5p3bg+/tDvLYsUjIZTKhH7QBkBO2YThTpvU3e0ofex7xRcWl4Ter531I\nFddb\r\n=mZyt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG41ygHoUuU5Hzqzs609cB1WvCrTGaaZ3FBlc6IJUWjgAiEAowcdEVbeD+waclJB7Bu7rbN951Oko/z46EZOoVsoAMg="}]},"maintainers":[{"name":"pwabuilder","email":"juwillis@microsoft.com"}],"_npmUser":{"name":"pwabuilder","email":"juwillis@microsoft.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/pwa-inking_1.0.9_1596047679557_0.06775484256588271"},"_hasShrinkwrap":false},"1.0.10":{"name":"@pwabuilder/pwa-inking","version":"1.0.10","description":"A [web component](https://meowni.ca/posts/web-components-with-otters/) from the [PWABuilder](https://pwabuilder.com) team that allows you to quickly add a 2D inking canvas (with an optional toolbar) to your Progressive Web App 🎨 ✨","main":"dist/index.js","module":"dist/index.js","scripts":{"start":"concurrently \"tsc --watch\" \"es-dev-server --app-index index.html --node-resolve --watch --open\"","build":"rimraf /dist && tsc && rollup -c","ts":"tsc"},"author":"","license":"ISC","dependencies":{"browser-nativefs":"^0.8.2","es-dev-server":"^1.45.1","idb-keyval":"^3.2.0","lit-element":"^2.2.1","pointer-tracker":"^2.2.1","typescript":"^3.8.3"},"devDependencies":{"@rollup/plugin-strip":"^1.3.3","concurrently":"^5.2.0","rimraf":"^3.0.2","rollup":"^2.3.3","rollup-plugin-minify-html-literals":"^1.2.3","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-terser":"^5.3.0"},"readme":"# pwa-inking\r\n\r\nA [web component](https://meowni.ca/posts/web-components-with-otters/) from the [PWABuilder](https://pwabuilder.com) team that allows you to quickly add a 2D inking canvas (with an optional toolbar) to your Progressive Web App 🎨 ✨\r\n\r\n_Built with [lit-element](https://lit-element.polymer-project.org/)_\r\n\r\n## What does it look like?\r\n\r\n![An image of what the component looks like](assets/images/example.png?raw=true \"pwa-inking\")\r\n\r\n## Supported Browsers\r\n- Edge\r\n- Chrome\r\n- Firefox\r\n- Safari\r\n\r\n## Using this component\r\n\r\n## Install\r\n\r\nThere are two ways to use this component. For simple projects or just to get started fast, we recommend using the component by script tag. If your project is using [npm](https://www.npmjs.com/) then we recommend using the npm package.\r\n\r\n### Script tag\r\n\r\n1. Add this script tag in the head of your index.html:\r\n\r\n```html\r\n \r\n```\r\n\r\n### NPM\r\n\r\n1. Run this command in your project directory:\r\n```shell\r\n npm install @pwabuilder/pwa-inking\r\n```\r\n\r\n2. Add this import statement to your script file:\r\n```js\r\n import @pwabuilder/pwa-inking\r\n```\r\n\r\n## Adding the component to your code\r\n\r\n### Canvas only\r\n\r\nYou can use the element `` anywhere in your template, JSX, html, etc. By itself, you will get a blank, bordered canvas which you can control through its APIs (see [table](#inking-canvas) for details).\r\n\r\n```html\r\n \r\n```\r\n\r\nTry it: [live](https://pwa-inking-canvas-only.glitch.me/) | [code](https://glitch.com/edit/#!/pwa-inking-canvas-only?path=index.html%3A20%3A41)\r\n\r\n### Canvas with default toolbar\r\n\r\nYou can also add the `` element within the `` element so the user can control the canvas visually. To connect these elements, their respective `canvas` and `name` attribute values must match. The default toolbar contains all 6 tools in the following order: pen, pencil, highlighter, eraser, copy, and save.\r\n\r\n```html\r\n \r\n \r\n \r\n```\r\n\r\nTry it: [live](https://pwa-inking.glitch.me/) | [code](https://glitch.com/edit/#!/pwa-inking?path=index.html%3A1%3A0)\r\n\r\n### Canvas with customized toolbar\r\n\r\nYou can also specify the toolbar layout and select which subset of tools you want to include.\r\n\r\n| Toolbar layout options | Possible values | \r\n| ---------------------- | ---------------------------------------------------------- | \r\n| `orientation` | horizontal or vertical | \r\n| `vertical` | top, center, or bottom |\r\n| `horizontal` | left, center, or right ||\r\n\r\nAvailable tool components (which can be added in any order):\r\n\r\n- ``\r\n- ``\r\n- ``\r\n- ``\r\n- ``\r\n- ``\r\n\r\nExample usage:\r\n\r\n```html\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n```\r\n\r\nTry it: [live](https://pwa-inking-customized-toolbar.glitch.me/) | [code](https://glitch.com/edit/#!/pwa-inking-customized-toolbar?path=index.html%3A25%3A55)\r\n\r\n## Default inking behavior\r\n\r\nBy default `` will create ink strokes with a width depending on the active pointer event:\r\n\r\n| Pointer event | Property influencing ink stroke width | Ink stroke width details\r\n| ------------------- | ------------------------------------------- | --------------------------------------------------------- |\r\n| `mouse` | none | Should match the default inking-toolbar tool slider value |\r\n| `touch` | `width` | Changes with surface area of inking screen pressed |\r\n| `pen` | `pressure` | Changes with downward force applied to inking screen |\r\n\r\n\r\nIf a browser does not provide a value for its pointer event's pressure/width, then the canvas should default to treating this input like a mouse event.\r\n\r\nThe stroke width regardless of pointer event type can be set and fixed through the ``.\r\n\r\n## APIs\r\n\r\n## inking-canvas\r\n\r\n### Properties\r\n\r\n| Property | Attribute | Description | Type | Default |\r\n| -------------------- | -------------------- | ------------------------------------------------------------------------------- | --------- | --------------------------------------------------- |\r\n| `name` | `name` | Used to connect an inking toolbar | `string` | `\"\"` |\r\n| `canvasHeight` | `height` | Fills parent height default | `number` | `-1` |\r\n| `canvasWidth` | `width` | Fills parent width by default | `number` | `-1` |\r\n\r\n\r\n### Methods\r\n\r\n| Name | Description |\r\n| --------------- | -------------------------- |\r\n| `getStrokeColor()` | Returns ink color \r\n| `setStrokeColor(color: string)` | Changes ink color |\r\n| `getStrokeSize()` | Returns ink stroke width \r\n| `setStrokeSize(strokeSize: number)` | Changes ink stroke width |\r\n| `getStrokeStyle()` | Returns name of active tool defining ink style \r\n| `setStrokeStyle(toolName: string)` | Changes ink style to reflect provided tool name (pen, pencil, highlighter, or eraser) | \r\n| `copyCanvasContents()` | Copies canvas state to clipboard via Clipboard API (if supported by browser) |\r\n| `saveCanvasContents()` | Opens native file system to allow user to save canvas state as png image |\r\n| `eraseAll()` | Deletes all visible and cached canvas ink |\r\n| `getCanvas()` | Returns inner html canvas object for advanced use cases |\r\n| `getScale()` | Returns canvas size relative to its content's aspect ratio \r\n| `requestDrawCanvas()` | Triggers an additional canvas redraw if one is not already queued up |\r\n| `setMinWidth(newMinWidth: number)` | Changes minimum canvas width and overrides default 300px value |\r\n\r\n\r\n## inking-toolbar\r\n\r\n### Properties\r\n\r\n| Property | Attribute | Description | Type | Default |\r\n| -------------------- | -------------------- | ------------------------------------------------------------------------------- | --------- | --------------------------------------------------- |\r\n| `orientation` | `orientation` | Toolbar layout direction | `string` | `horizontal` |\r\n| `verticalAlignment` | `vertical` | Toolbar layout vertical alignment | `string` | `top` |\r\n| `horizontalAlignment` | `horizontal` | Toolbar layout horizontal alignment | `string` | `left` |\r\n| `targetInkingCanvas` | `canvas` | Connects toolbar to canvas whose name matches this value | `string` | `\"\"` |\r\n\r\n\r\n\r\n### Methods\r\n\r\n| Name | Description |\r\n| --------------- | -------------------------- |\r\n| `getCurrentToolName()` | Returns the active tool name \r\n| `getCurrentStrokeColor()` | Returns the current toolbar ink color of the active tool | |\r\n| `getCurrentStrokeColorName()` | Returns the current stroke color name of the active tool | Sets the current stroke color name for the active tool |\r\n| `getCurrentStrokeSize()` | Returns the current stroke width of the active tool \r\n| `requestDrawSineCanvas()` | Triggers an additional example stroke redraw if one is not already queued up |\r\n\r\n## Styling\r\n\r\n### Shadow parts\r\n\r\nYou can style the different parts of pwa-inking using [CSS ::part selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/::part). Below are the list of parts available for styling:\r\n\r\n| Component | Part Name | Description |\r\n| - | - | - |\r\n|`inking-canvas` | `canvas` | The html canvas object |\r\n| `inking-toolbar-pen` | `button` | The toolbar pen button |\r\n| `inking-toolbar-pencil` | `button` | The toolbar pencil button |\r\n| `inking-toolbar-highlighter` | `button` | The toolbar highlighter button |\r\n| `inking-toolbar-eraser` | `button` | The toolbar eraser button |\r\n| `inking-toolbar-copy` | `button` | The toolbar copy button |\r\n| `inking-toolbar-save` | `button` | The toolbar save button |\r\n\r\n### Styling samples\r\n\r\nRemove the canvas border:\r\n```css\r\n inking-canvas::part(canvas) {\r\n border: none;\r\n }\r\n```\r\nChange the save button color:\r\n```css\r\n inking-toolbar-save::part(button) {\r\n background-color: blue;\r\n }\r\n```\r\n\r\nTry it: [live](https://pwa-inking-styling-samples.glitch.me/) | [code](https://glitch.com/edit/#!/pwa-inking-styling-samples?path=index.html%3A29%3A20)\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"7929b69c3fdafe8a1ae8a219772df61cc8988743","_id":"@pwabuilder/pwa-inking@1.0.10","_nodeVersion":"13.9.0","_npmVersion":"6.14.2","dist":{"integrity":"sha512-eJUFq4wNX9S6aanB9W9s99iDS4bbAXBqiJnf8GKs5Mevbtc7qrR7d4+MtVoXJe9Ys3w85Fn4umR92g9TMybPXg==","shasum":"ed7107d25c5f8845bb7ebfebe9bfb1f89441338a","tarball":"https://registry.npmjs.org/@pwabuilder/pwa-inking/-/pwa-inking-1.0.10.tgz","fileCount":28,"unpackedSize":892595,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIdj6CRA9TVsSAnZWagAAiRMQAIhUfdDDS/JQWs+fuUgM\nCPmgGfI/G8URARq8/jn69OUJe0jeTr27g8s7z0VIws/4AVG9+oJdYDAFjk31\ncn7+dKQHLriskuQrYWzpzm6hlpoBFG10LqQ/EpleINDA5bjILucqY2xsoP0c\nmN+CwQ+XIGaGDJ4BjjI09IQdYsbQWLX5WR/Oke0R2Wf4Y05PpIXo4Bgkwp2+\nwtvTzCUtU6fF1eV+2GobY3FMQsNhXf/0Ce+FPkIko+9z37K7BteaakyfYa9E\n8crxJdfG+oHaus0gxelEsVXPO5NJkddAPfjy3ZKI5oIukIGigtZXEIFHXPue\nYGXmshZrQn89bJ55x9bP5TsXFSj51ALdcJ0xnOC8Mc0JtvasSf2/fA0Fnpuc\n/S8H8mGYre55TDy9jzQOefQGkkc3ylrLFOSaa965Y02SoGl2AkN8lXLabske\naZqUXGAHIujmMuMv6C9xnxwB3LKUqcSgLrHlqou1GxxTabcKvJnkht9waEhR\ng4wo2iQt6jClhigMHdXx+vtgBzxGMr4snt00Krtq/sT0ZST2fIQYDYs8Rdiy\nBzmt6qBp/gukgRhK9NFtcBZlfe1OU3OhDN+DBRrd6KSVl0Eozc+P+uRoAEm0\n4tkbZZUzKtXuUWU0cfnYIol0ynW9M0ZOo6+j2yqa00ILkOhYahzDFtJOxDOD\nu+//\r\n=YIcC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEbpIk4OUoo5rAAEGr8B6wOT0lL5rU+80mqC2IZRP5mbAiEAiQUitBhf8Gx2myku/fbvLrbeA2NhmY5z9vBtpLwkiW0="}]},"maintainers":[{"name":"pwabuilder","email":"juwillis@microsoft.com"}],"_npmUser":{"name":"pwabuilder","email":"juwillis@microsoft.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/pwa-inking_1.0.10_1596053753948_0.12071721000865199"},"_hasShrinkwrap":false},"1.0.11":{"name":"@pwabuilder/pwa-inking","version":"1.0.11","description":"A [web component](https://meowni.ca/posts/web-components-with-otters/) from the [PWABuilder](https://pwabuilder.com) team that allows you to quickly add a 2D inking canvas (with an optional toolbar) to your Progressive Web App 🎨 ✨","main":"dist/index.js","module":"dist/index.js","scripts":{"start":"concurrently \"tsc --watch\" \"es-dev-server --app-index index.html --node-resolve --watch --open\"","build":"rimraf /dist && tsc && rollup -c","ts":"tsc"},"author":"","license":"ISC","dependencies":{"browser-nativefs":"^0.8.2","es-dev-server":"^1.45.1","idb-keyval":"^3.2.0","lit-element":"^2.2.1","pointer-tracker":"^2.2.1","typescript":"^3.8.3"},"devDependencies":{"@rollup/plugin-strip":"^1.3.3","concurrently":"^5.2.0","rimraf":"^3.0.2","rollup":"^2.3.3","rollup-plugin-minify-html-literals":"^1.2.3","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-terser":"^5.3.0"},"readme":"# pwa-inking\r\n\r\nA [web component](https://meowni.ca/posts/web-components-with-otters/) from the [PWABuilder](https://pwabuilder.com) team that allows you to quickly add a 2D inking canvas (with an optional toolbar) to your Progressive Web App 🎨 ✨\r\n\r\n_Built with [lit-element](https://lit-element.polymer-project.org/)_\r\n\r\n## What does it look like?\r\n\r\n![An image of what the component looks like](assets/images/example.png?raw=true \"pwa-inking\")\r\n\r\n## Supported Browsers\r\n- Edge\r\n- Chrome\r\n- Firefox\r\n- Safari\r\n\r\n## Using this component\r\n\r\n## Install\r\n\r\nThere are two ways to use this component. For simple projects or just to get started fast, we recommend using the component by script tag. If your project is using [npm](https://www.npmjs.com/) then we recommend using the npm package.\r\n\r\n### Script tag\r\n\r\n1. Add this script tag in the head of your index.html:\r\n\r\n```html\r\n \r\n```\r\n\r\n### NPM\r\n\r\n1. Run this command in your project directory:\r\n```shell\r\n npm install @pwabuilder/pwa-inking\r\n```\r\n\r\n2. Add this import statement to your script file:\r\n```js\r\n import @pwabuilder/pwa-inking\r\n```\r\n\r\n## Adding the component to your code\r\n\r\n### Canvas only\r\n\r\nYou can use the element `` anywhere in your template, JSX, html, etc. By itself, you will get a blank, bordered canvas which you can control through its APIs (see [table](#inking-canvas) for details).\r\n\r\n```html\r\n \r\n```\r\n\r\nTry it: [live](https://pwa-inking-canvas-only.glitch.me/) | [code](https://glitch.com/edit/#!/pwa-inking-canvas-only?path=index.html%3A20%3A41)\r\n\r\n### Canvas with default toolbar\r\n\r\nYou can also add the `` element within the `` element so the user can control the canvas visually. To connect these elements, their respective `canvas` and `name` attribute values must match. The default toolbar contains all 6 tools in the following order: pen, pencil, highlighter, eraser, copy, and save.\r\n\r\n```html\r\n \r\n \r\n \r\n```\r\n\r\nTry it: [live](https://pwa-inking.glitch.me/) | [code](https://glitch.com/edit/#!/pwa-inking?path=index.html%3A1%3A0)\r\n\r\n### Canvas with customized toolbar\r\n\r\nYou can also specify the toolbar layout and select which subset of tools you want to include.\r\n\r\n| Toolbar layout options | Possible values | \r\n| ---------------------- | ---------------------------------------------------------- | \r\n| `orientation` | horizontal or vertical | \r\n| `vertical` | top, center, or bottom |\r\n| `horizontal` | left, center, or right ||\r\n\r\nAvailable tool components (which can be added in any order):\r\n\r\n- ``\r\n- ``\r\n- ``\r\n- ``\r\n- ``\r\n- ``\r\n\r\nExample usage:\r\n\r\n```html\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n```\r\n\r\nTry it: [live](https://pwa-inking-customized-toolbar.glitch.me/) | [code](https://glitch.com/edit/#!/pwa-inking-customized-toolbar?path=index.html%3A25%3A55)\r\n\r\n## Default inking behavior\r\n\r\nBy default `` will create ink strokes with a width depending on the active pointer event:\r\n\r\n| Pointer event | Property influencing ink stroke width | Ink stroke width details\r\n| ------------------- | ------------------------------------------- | --------------------------------------------------------- |\r\n| `mouse` | none | Should match the default inking-toolbar tool slider value |\r\n| `touch` | `width` | Changes with surface area of inking screen pressed |\r\n| `pen` | `pressure` | Changes with downward force applied to inking screen |\r\n\r\n\r\nIf a browser does not provide a value for its pointer event's pressure/width, then the canvas should default to treating this input like a mouse event.\r\n\r\nThe stroke width regardless of pointer event type can be set and fixed through the ``.\r\n\r\n## APIs\r\n\r\n## inking-canvas\r\n\r\n### Properties\r\n\r\n| Property | Attribute | Description | Type | Default |\r\n| -------------------- | -------------------- | ------------------------------------------------------------------------------- | --------- | --------------------------------------------------- |\r\n| `name` | `name` | Used to connect an inking toolbar | `string` | `\"\"` |\r\n| `canvasHeight` | `height` | Fills parent height default | `number` | `-1` |\r\n| `canvasWidth` | `width` | Fills parent width by default | `number` | `-1` |\r\n\r\n\r\n### Methods\r\n\r\n| Name | Description |\r\n| --------------- | -------------------------- |\r\n| `getStrokeColor()` | Returns ink color \r\n| `setStrokeColor(color: string)` | Changes ink color |\r\n| `getStrokeSize()` | Returns ink stroke width \r\n| `setStrokeSize(strokeSize: number)` | Changes ink stroke width |\r\n| `getStrokeStyle()` | Returns name of active tool defining ink style \r\n| `setStrokeStyle(toolName: string)` | Changes ink style to reflect provided tool name (pen, pencil, highlighter, or eraser) | \r\n| `copyCanvasContents()` | Copies canvas state to clipboard via Clipboard API (if supported by browser) |\r\n| `saveCanvasContents()` | Opens native file system to allow user to save canvas state as png image |\r\n| `eraseAll()` | Deletes all visible and cached canvas ink |\r\n| `getCanvas()` | Returns inner html canvas object for advanced use cases |\r\n| `getScale()` | Returns canvas size relative to its content's aspect ratio \r\n| `requestDrawCanvas()` | Triggers an additional canvas redraw if one is not already queued up |\r\n| `setMinWidth(newMinWidth: number)` | Changes minimum canvas width and overrides default 300px value |\r\n\r\n\r\n## inking-toolbar\r\n\r\n### Properties\r\n\r\n| Property | Attribute | Description | Type | Default |\r\n| -------------------- | -------------------- | ------------------------------------------------------------------------------- | --------- | --------------------------------------------------- |\r\n| `orientation` | `orientation` | Toolbar layout direction | `string` | `horizontal` |\r\n| `verticalAlignment` | `vertical` | Toolbar layout vertical alignment | `string` | `top` |\r\n| `horizontalAlignment` | `horizontal` | Toolbar layout horizontal alignment | `string` | `left` |\r\n| `targetInkingCanvas` | `canvas` | Connects toolbar to canvas whose name matches this value | `string` | `\"\"` |\r\n\r\n\r\n\r\n### Methods\r\n\r\n| Name | Description |\r\n| --------------- | -------------------------- |\r\n| `getCurrentToolName()` | Returns the active tool name \r\n| `getCurrentStrokeColor()` | Returns the current toolbar ink color of the active tool | |\r\n| `getCurrentStrokeColorName()` | Returns the current stroke color name of the active tool | Sets the current stroke color name for the active tool |\r\n| `getCurrentStrokeSize()` | Returns the current stroke width of the active tool \r\n| `requestDrawSineCanvas()` | Triggers an additional example stroke redraw if one is not already queued up |\r\n\r\n## Styling\r\n\r\n### Shadow parts\r\n\r\nYou can style the different parts of pwa-inking using [CSS ::part selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/::part). Below are the list of parts available for styling:\r\n\r\n| Component | Part Name | Description |\r\n| - | - | - |\r\n|`inking-canvas` | `canvas` | The html canvas object |\r\n| `inking-toolbar-pen` | `button` | The toolbar pen button |\r\n| `inking-toolbar-pencil` | `button` | The toolbar pencil button |\r\n| `inking-toolbar-highlighter` | `button` | The toolbar highlighter button |\r\n| `inking-toolbar-eraser` | `button` | The toolbar eraser button |\r\n| `inking-toolbar-copy` | `button` | The toolbar copy button |\r\n| `inking-toolbar-save` | `button` | The toolbar save button |\r\n\r\n### Styling samples\r\n\r\nRemove the canvas border:\r\n```css\r\n inking-canvas::part(canvas) {\r\n border: none;\r\n }\r\n```\r\nChange the save button color:\r\n```css\r\n inking-toolbar-save::part(button) {\r\n background-color: blue;\r\n }\r\n```\r\n\r\nTry it: [live](https://pwa-inking-styling-samples.glitch.me/) | [code](https://glitch.com/edit/#!/pwa-inking-styling-samples?path=index.html%3A29%3A20)\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"6c5232998b5009cbf62f9a5debea3eea2b79074d","_id":"@pwabuilder/pwa-inking@1.0.11","_nodeVersion":"13.9.0","_npmVersion":"6.14.2","dist":{"integrity":"sha512-Bv/NlJTu5MBKdR/Lc2Q08YPZzzBwd8WAczoqQ7GJWr682xdV0epA1kSTrfK3w3Av+RG11H+tzM7bAzvZgSiBuQ==","shasum":"384c23d44fbc737e09cfb857352e1526b2f1126a","tarball":"https://registry.npmjs.org/@pwabuilder/pwa-inking/-/pwa-inking-1.0.11.tgz","fileCount":28,"unpackedSize":894961,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJGP0CRA9TVsSAnZWagAA+O4P/0h0tLqLMv3AGQbzOqza\nKBYKQmsNtMrY6ht6xqsceHxE1kPk8cWBXY8yGO/yfk2zugviS+J5g00lEAwy\nobs6DGzPvHfkri+aBI+mWKa7pq+cdLLeswtmaqkzaL2sG5fQh2x7R+88uWvV\njjhdr/3OozccUpmo+4NDKfU4l3UP77T9nwGL1iBuL/qWlgKoQHFnHT7qxXTF\nC0wYizZVNcCPwE+mu9asrGfAABcwg3J5joTplzNqDwU3PgfBVk7MqbmZrOkx\nuWUgw82EW3wlqK1C31ohT4WMUffMIUdIVkky02lkw4WUeJ7Euok41hcG4mYw\n3DY3BFl404BSl+g4s9R40+WSUZaRNkniVQzrKwTniQMvKB9Qq6cbZ9nLn918\nd1GuoXu0D6CkxdA0wcSHijDkjw88VHivMae84anQya1MeILiE50yTWwEsiWR\nKie58Vv0GwCFPFyEjsIwx8oyrE9UEGqXGXVefCBEBXn9nLRLyUB9iJ74U5BF\nZwY7e90YS8Rsd2zpNGT9idlvqML8OiDMN7W/qgJBTMSI68SMsHnvd54RB++B\nzWWyKkbc4YoM5jJAYpObulTdhP+VRxFbR9M8C+qFBdUF/S679FL3WG/ViBBa\nmw/Yp0eklxcWcJ3DOsLp9RHrVfLdb9V1MvQPhsC2JrIRnNe3D1SGA9cAj+Zf\nb7vs\r\n=KJno\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCDukYoxvyApPR07DY3xjgeLRbJBz1Y0ZOuXGoOHvLKDgIhAL9GC0UTwYovGCIocrtfp+EKp4R2NFXXGqMKq8Q9aoD1"}]},"maintainers":[{"name":"pwabuilder","email":"juwillis@microsoft.com"}],"_npmUser":{"name":"pwabuilder","email":"juwillis@microsoft.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/pwa-inking_1.0.11_1596220403624_0.7672946878548226"},"_hasShrinkwrap":false},"1.0.12":{"name":"@pwabuilder/pwa-inking","version":"1.0.12","description":"A [web component](https://meowni.ca/posts/web-components-with-otters/) from the [PWABuilder](https://pwabuilder.com) team that allows you to quickly add a 2D inking canvas (with an optional toolbar) to your Progressive Web App 🎨 ✨","main":"dist/index.js","module":"dist/index.js","scripts":{"start":"concurrently \"tsc --watch\" \"es-dev-server --app-index index.html --node-resolve --watch --open\"","build":"rimraf /dist && tsc && rollup -c","ts":"tsc"},"author":"","license":"ISC","dependencies":{"browser-nativefs":"^0.8.2","es-dev-server":"^1.45.1","idb-keyval":"^3.2.0","lit-element":"^2.2.1","pointer-tracker":"^2.2.1","typescript":"^3.8.3"},"devDependencies":{"@rollup/plugin-strip":"^1.3.3","concurrently":"^5.2.0","rimraf":"^3.0.2","rollup":"^2.3.3","rollup-plugin-minify-html-literals":"^1.2.3","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-terser":"^5.3.0"},"readme":"# pwa-inking\r\n\r\nA [web component](https://meowni.ca/posts/web-components-with-otters/) from the [PWABuilder](https://pwabuilder.com) team that allows you to quickly add a 2D inking canvas (with an optional toolbar) to your Progressive Web App 🎨 ✨\r\n\r\n_Built with [lit-element](https://lit-element.polymer-project.org/)_\r\n\r\n## What does it look like?\r\n\r\n![An image of what the component looks like](assets/images/example.png?raw=true \"pwa-inking\")\r\n\r\n## Supported Browsers\r\n- Edge\r\n- Chrome\r\n- Firefox\r\n- Safari\r\n\r\n## Using this component\r\n\r\n## Install\r\n\r\nThere are two ways to use this component. For simple projects or just to get started fast, we recommend using the component by script tag. If your project is using [npm](https://www.npmjs.com/) then we recommend using the npm package.\r\n\r\n### Script tag\r\n\r\n1. Add this script tag in the head of your index.html:\r\n\r\n```html\r\n \r\n```\r\n\r\n### NPM\r\n\r\n1. Run this command in your project directory:\r\n```shell\r\n npm install @pwabuilder/pwa-inking\r\n```\r\n\r\n2. Add this import statement to your script file:\r\n```js\r\n import @pwabuilder/pwa-inking\r\n```\r\n\r\n## Adding the component to your code\r\n\r\n### Canvas only\r\n\r\nYou can use the element `` anywhere in your template, JSX, html, etc. By itself, you will get a blank, bordered canvas which you can control through its APIs (see [table](#inking-canvas) for details).\r\n\r\n```html\r\n \r\n```\r\n\r\nTry it: [live](https://pwa-inking-canvas-only.glitch.me/) | [code](https://glitch.com/edit/#!/pwa-inking-canvas-only?path=index.html%3A20%3A41)\r\n\r\n### Canvas with default toolbar\r\n\r\nYou can also add the `` element within the `` element so the user can control the canvas visually. To connect these elements, their respective `canvas` and `name` attribute values must match. The default toolbar contains all 6 tools in the following order: pen, pencil, highlighter, eraser, copy, and save.\r\n\r\n```html\r\n \r\n \r\n \r\n```\r\n\r\nTry it: [live](https://pwa-inking.glitch.me/) | [code](https://glitch.com/edit/#!/pwa-inking?path=index.html%3A1%3A0)\r\n\r\n### Canvas with customized toolbar\r\n\r\nYou can also specify the toolbar layout and select which subset of tools you want to include.\r\n\r\n| Toolbar layout options | Possible values | \r\n| ---------------------- | ---------------------------------------------------------- | \r\n| `orientation` | horizontal or vertical | \r\n| `vertical` | top, center, or bottom |\r\n| `horizontal` | left, center, or right ||\r\n\r\nAvailable tool components (which can be added in any order):\r\n\r\n- ``\r\n- ``\r\n- ``\r\n- ``\r\n- ``\r\n- ``\r\n\r\nExample usage:\r\n\r\n```html\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n```\r\n\r\nTry it: [live](https://pwa-inking-customized-toolbar.glitch.me/) | [code](https://glitch.com/edit/#!/pwa-inking-customized-toolbar?path=index.html%3A25%3A55)\r\n\r\n## Default inking behavior\r\n\r\nBy default `` will create ink strokes with a width depending on the active pointer event:\r\n\r\n| Pointer event | Property influencing ink stroke width | Ink stroke width details\r\n| ------------------- | ------------------------------------------- | --------------------------------------------------------- |\r\n| `mouse` | none | Should match the default inking-toolbar tool slider value |\r\n| `touch` | `width` | Changes with surface area of inking screen pressed |\r\n| `pen` | `pressure` | Changes with downward force applied to inking screen |\r\n\r\n\r\nIf a browser does not provide a value for its pointer event's pressure/width, then the canvas should default to treating this input like a mouse event.\r\n\r\nThe stroke width regardless of pointer event type can be set and fixed through the ``.\r\n\r\n## APIs\r\n\r\n## inking-canvas\r\n\r\n### Properties\r\n\r\n| Property | Attribute | Description | Type | Default |\r\n| -------------------- | -------------------- | ------------------------------------------------------------------------------- | --------- | --------------------------------------------------- |\r\n| `name` | `name` | Used to connect an inking toolbar | `string` | `\"\"` |\r\n| `canvasHeight` | `height` | Fills parent height default | `number` | `-1` |\r\n| `canvasWidth` | `width` | Fills parent width by default | `number` | `-1` |\r\n\r\n\r\n### Methods\r\n\r\n| Name | Description |\r\n| --------------- | -------------------------- |\r\n| `getStrokeColor()` | Returns ink color \r\n| `setStrokeColor(color: string)` | Changes ink color |\r\n| `getStrokeSize()` | Returns ink stroke width \r\n| `setStrokeSize(strokeSize: number)` | Changes ink stroke width |\r\n| `getStrokeStyle()` | Returns name of active tool defining ink style \r\n| `setStrokeStyle(toolName: string)` | Changes ink style to reflect provided tool name (pen, pencil, highlighter, or eraser) | \r\n| `copyCanvasContents()` | Copies canvas state to clipboard via Clipboard API (if supported by browser) |\r\n| `saveCanvasContents()` | Opens native file system to allow user to save canvas state as png image |\r\n| `eraseAll()` | Deletes all visible and cached canvas ink |\r\n| `getCanvas()` | Returns inner html canvas object for advanced use cases |\r\n| `getScale()` | Returns canvas size relative to its content's aspect ratio \r\n| `requestDrawCanvas()` | Triggers an additional canvas redraw if one is not already queued up |\r\n| `setMinWidth(newMinWidth: number)` | Changes minimum canvas width and overrides default 300px value |\r\n\r\n\r\n## inking-toolbar\r\n\r\n### Properties\r\n\r\n| Property | Attribute | Description | Type | Default |\r\n| -------------------- | -------------------- | ------------------------------------------------------------------------------- | --------- | --------------------------------------------------- |\r\n| `orientation` | `orientation` | Toolbar layout direction | `string` | `horizontal` |\r\n| `verticalAlignment` | `vertical` | Toolbar layout vertical alignment | `string` | `top` |\r\n| `horizontalAlignment` | `horizontal` | Toolbar layout horizontal alignment | `string` | `left` |\r\n| `targetInkingCanvas` | `canvas` | Connects toolbar to canvas whose name matches this value | `string` | `\"\"` |\r\n\r\n\r\n\r\n### Methods\r\n\r\n| Name | Description |\r\n| --------------- | -------------------------- |\r\n| `getCurrentToolName()` | Returns the active tool name \r\n| `getCurrentStrokeColor()` | Returns the current toolbar ink color of the active tool | |\r\n| `getCurrentStrokeColorName()` | Returns the current stroke color name of the active tool | Sets the current stroke color name for the active tool |\r\n| `getCurrentStrokeSize()` | Returns the current stroke width of the active tool \r\n| `requestDrawSineCanvas()` | Triggers an additional example stroke redraw if one is not already queued up |\r\n\r\n## Styling\r\n\r\n### Shadow parts\r\n\r\nYou can style the different parts of pwa-inking using [CSS ::part selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/::part). Below are the list of parts available for styling:\r\n\r\n| Component | Part Name | Description |\r\n| - | - | - |\r\n|`inking-canvas` | `canvas` | The html canvas object |\r\n| `inking-toolbar-pen` | `button` | The toolbar pen button |\r\n| `inking-toolbar-pencil` | `button` | The toolbar pencil button |\r\n| `inking-toolbar-highlighter` | `button` | The toolbar highlighter button |\r\n| `inking-toolbar-eraser` | `button` | The toolbar eraser button |\r\n| `inking-toolbar-copy` | `button` | The toolbar copy button |\r\n| `inking-toolbar-save` | `button` | The toolbar save button |\r\n\r\n### Styling samples\r\n\r\nRemove the canvas border:\r\n```css\r\n inking-canvas::part(canvas) {\r\n border: none;\r\n }\r\n```\r\nChange the save button color:\r\n```css\r\n inking-toolbar-save::part(button) {\r\n background-color: blue;\r\n }\r\n```\r\n\r\nTry it: [live](https://pwa-inking-styling-samples.glitch.me/) | [code](https://glitch.com/edit/#!/pwa-inking-styling-samples?path=index.html%3A29%3A20)\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"6c5232998b5009cbf62f9a5debea3eea2b79074d","_id":"@pwabuilder/pwa-inking@1.0.12","_nodeVersion":"13.9.0","_npmVersion":"6.14.2","dist":{"integrity":"sha512-H2o3vRHshjT9V7p1hPjjORbG2ERC9l9W/H/bkw3bpczVdKKDDr7z8FZLTuo+Ckim8ss4g4fC3EJUWwv6xVoDFg==","shasum":"71cb08bcfeeb119b6e28f43cdfedc1171ef036c0","tarball":"https://registry.npmjs.org/@pwabuilder/pwa-inking/-/pwa-inking-1.0.12.tgz","fileCount":28,"unpackedSize":895256,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJGgLCRA9TVsSAnZWagAAOi4P/juC4TqxGCAgqMyBICNu\nzE6mI1buE3+t6HegJdlrosMDWENJKG2C+XUBhmMmdfI2raAoKgb2wFMsPpn8\n49B+5bPcDVwT9bdEGfGSzl0E7f0wpCbE/4MX6IBMGRXCE4m7s15YrA/0JVyi\nwNU6pJHm1lDzR2LfFynVWHIxrurInQsgB3J7agBH42+SfSfhBZI/VJNdhSGL\np5epCqfp59eaMAFXmSIeah5D63+p059kIIt9LMK0bMazjGya5inF4M95pj+n\n4e1tcLdC00FvM2fy/pEV5m+cOL4EHdmf4I66VV09qjmMZSX4HDEClWb/Aipr\ngPKMlHijD72yHfI2mbTzUdk84Zk4lbCiZ6V1UF1DKbwmV7/ls6na5IJ+Iufq\nMY/7ziBZxq2VqjE1Xbfbe9nfkek6odAM98qyFcJmKMkckjI3e3i7oGOT6jlT\nKKF0d+onPkPXufMXo2FRaVI/53sZd7aAxrZ2OGMPCz88hg/GKWQW8+PHMLZm\nE0lgTQuqVyiqNA1/S/ndYVyBBJ83UuBXbWOpfVnh2ZWdrTgT1qpN7Y1ZpY/N\n2vpTx8URnwkTogxFLdc/vxrx/Oo1VxI+H2XYrYTRpGT7wUpvskviRPLQZWC9\naBzTTWxPQEl3wdrz0SI2hhmYUWgr8nuImXn7Ii4eAv6HIYRgYlSlqFtemXyS\nD6uM\r\n=tLOv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGxMbtqgI7Tt3U0V5h61gICwxhonHQohvz6gA4movNVlAiBSZJuflvNWwoRFiTkX137oRt18OsD90MPg7cRmf08ISA=="}]},"maintainers":[{"name":"pwabuilder","email":"juwillis@microsoft.com"}],"_npmUser":{"name":"pwabuilder","email":"juwillis@microsoft.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/pwa-inking_1.0.12_1596221450898_0.4135158684047868"},"_hasShrinkwrap":false},"1.0.13":{"name":"@pwabuilder/pwa-inking","version":"1.0.13","description":"A [web component](https://meowni.ca/posts/web-components-with-otters/) from the [PWABuilder](https://pwabuilder.com) team that allows you to quickly add a 2D inking canvas (with an optional toolbar) to your Progressive Web App 🎨 ✨","main":"dist/index.js","module":"dist/index.js","scripts":{"start":"concurrently \"tsc --watch\" \"es-dev-server --app-index index.html --node-resolve --watch --open\"","build":"rimraf /dist && tsc && rollup -c","ts":"tsc"},"author":"","license":"ISC","dependencies":{"browser-nativefs":"^0.8.2","es-dev-server":"^1.45.1","idb-keyval":"^3.2.0","lit-element":"^2.2.1","pointer-tracker":"^2.2.1","typescript":"^3.8.3"},"devDependencies":{"@rollup/plugin-strip":"^1.3.3","concurrently":"^5.2.0","rimraf":"^3.0.2","rollup":"^2.3.3","rollup-plugin-minify-html-literals":"^1.2.3","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-terser":"^5.3.0"},"readme":"# pwa-inking\r\n\r\nA [web component](https://meowni.ca/posts/web-components-with-otters/) from the [PWABuilder](https://pwabuilder.com) team that allows you to quickly add a 2D inking canvas (with an optional toolbar) to your Progressive Web App 🎨 ✨\r\n\r\n_Built with [lit-element](https://lit-element.polymer-project.org/)_\r\n\r\n## What does it look like?\r\n\r\n![An image of what the component looks like](assets/images/example.png?raw=true \"pwa-inking\")\r\n\r\n## Supported Browsers\r\n- Edge\r\n- Chrome\r\n- Firefox\r\n- Safari\r\n\r\n## Using this component\r\n\r\n## Install\r\n\r\nThere are two ways to use this component. For simple projects or just to get started fast, we recommend using the component by script tag. If your project is using [npm](https://www.npmjs.com/) then we recommend using the npm package.\r\n\r\n### Script tag\r\n\r\n1. Add this script tag in the head of your index.html:\r\n\r\n```html\r\n \r\n```\r\n\r\n### NPM\r\n\r\n1. Run this command in your project directory:\r\n```shell\r\n npm install @pwabuilder/pwa-inking\r\n```\r\n\r\n2. Add this import statement to your script file:\r\n```js\r\n import @pwabuilder/pwa-inking\r\n```\r\n\r\n## Adding the component to your code\r\n\r\n### Canvas only\r\n\r\nYou can use the element `` anywhere in your template, JSX, html, etc. By itself, you will get a blank, bordered canvas which you can control through its APIs (see [table](#inking-canvas) for details).\r\n\r\n```html\r\n \r\n```\r\n\r\nTry it: [live](https://pwa-inking-canvas-only.glitch.me/) | [code](https://glitch.com/edit/#!/pwa-inking-canvas-only?path=index.html%3A20%3A41)\r\n\r\n### Canvas with default toolbar\r\n\r\nYou can also add the `` element within the `` element so the user can control the canvas visually. To connect these elements, their respective `canvas` and `name` attribute values must match. The default toolbar contains all 6 tools in the following order: pen, pencil, highlighter, eraser, copy, and save.\r\n\r\n```html\r\n \r\n \r\n \r\n```\r\n\r\nTry it: [live](https://pwa-inking.glitch.me/) | [code](https://glitch.com/edit/#!/pwa-inking?path=index.html%3A1%3A0)\r\n\r\n### Canvas with customized toolbar\r\n\r\nYou can also specify the toolbar layout and select which subset of tools you want to include.\r\n\r\n| Toolbar layout options | Possible values | \r\n| ---------------------- | ---------------------------------------------------------- | \r\n| `orientation` | horizontal or vertical | \r\n| `vertical` | top, center, or bottom |\r\n| `horizontal` | left, center, or right ||\r\n\r\nAvailable tool components (which can be added in any order):\r\n\r\n- ``\r\n- ``\r\n- ``\r\n- ``\r\n- ``\r\n- ``\r\n\r\nExample usage:\r\n\r\n```html\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n```\r\n\r\nTry it: [live](https://pwa-inking-customized-toolbar.glitch.me/) | [code](https://glitch.com/edit/#!/pwa-inking-customized-toolbar?path=index.html%3A25%3A55)\r\n\r\n## Default inking behavior\r\n\r\nBy default `` will create ink strokes with a width depending on the active pointer event:\r\n\r\n| Pointer event | Property influencing ink stroke width | Ink stroke width details\r\n| ------------------- | ------------------------------------------- | --------------------------------------------------------- |\r\n| `mouse` | none | Should match the default inking-toolbar tool slider value |\r\n| `touch` | `width` | Changes with surface area of inking screen pressed |\r\n| `pen` | `pressure` | Changes with downward force applied to inking screen |\r\n\r\n\r\nIf a browser does not provide a value for its pointer event's pressure/width, then the canvas should default to treating this input like a mouse event.\r\n\r\nThe stroke width regardless of pointer event type can be set and fixed through the ``.\r\n\r\n## APIs\r\n\r\n## inking-canvas\r\n\r\n### Properties\r\n\r\n| Property | Attribute | Description | Type | Default |\r\n| -------------------- | -------------------- | ------------------------------------------------------------------------------- | --------- | --------------------------------------------------- |\r\n| `name` | `name` | Used to connect an inking toolbar | `string` | `\"\"` |\r\n| `canvasHeight` | `height` | Fills parent height default | `number` | `-1` |\r\n| `canvasWidth` | `width` | Fills parent width by default | `number` | `-1` |\r\n\r\n\r\n### Methods\r\n\r\n| Name | Description |\r\n| --------------- | -------------------------- |\r\n| `getStrokeColor()` | Returns ink color \r\n| `setStrokeColor(color: string)` | Changes ink color |\r\n| `getStrokeSize()` | Returns ink stroke width \r\n| `setStrokeSize(strokeSize: number)` | Changes ink stroke width |\r\n| `getStrokeStyle()` | Returns name of active tool defining ink style \r\n| `setStrokeStyle(toolName: string)` | Changes ink style to reflect provided tool name (pen, pencil, highlighter, or eraser) | \r\n| `copyCanvasContents()` | Copies canvas state to clipboard via Clipboard API (if supported by browser) |\r\n| `saveCanvasContents()` | Opens native file system to allow user to save canvas state as png image |\r\n| `eraseAll()` | Deletes all visible and cached canvas ink |\r\n| `getCanvas()` | Returns inner html canvas object for advanced use cases |\r\n| `getScale()` | Returns canvas size relative to its content's aspect ratio \r\n| `requestDrawCanvas()` | Triggers an additional canvas redraw if one is not already queued up |\r\n| `setMinWidth(newMinWidth: number)` | Changes minimum canvas width and overrides default 300px value |\r\n\r\n\r\n## inking-toolbar\r\n\r\n### Properties\r\n\r\n| Property | Attribute | Description | Type | Default |\r\n| -------------------- | -------------------- | ------------------------------------------------------------------------------- | --------- | --------------------------------------------------- |\r\n| `orientation` | `orientation` | Toolbar layout direction | `string` | `horizontal` |\r\n| `verticalAlignment` | `vertical` | Toolbar layout vertical alignment | `string` | `top` |\r\n| `horizontalAlignment` | `horizontal` | Toolbar layout horizontal alignment | `string` | `left` |\r\n| `targetInkingCanvas` | `canvas` | Connects toolbar to canvas whose name matches this value | `string` | `\"\"` |\r\n\r\n\r\n\r\n### Methods\r\n\r\n| Name | Description |\r\n| --------------- | -------------------------- |\r\n| `getCurrentToolName()` | Returns the active tool name \r\n| `getCurrentStrokeColor()` | Returns the current toolbar ink color of the active tool | |\r\n| `getCurrentStrokeColorName()` | Returns the current stroke color name of the active tool | Sets the current stroke color name for the active tool |\r\n| `getCurrentStrokeSize()` | Returns the current stroke width of the active tool \r\n| `requestDrawSineCanvas()` | Triggers an additional example stroke redraw if one is not already queued up |\r\n\r\n## Styling\r\n\r\n### Shadow parts\r\n\r\nYou can style the different parts of pwa-inking using [CSS ::part selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/::part). Below are the list of parts available for styling:\r\n\r\n| Component | Part Name | Description |\r\n| - | - | - |\r\n|`inking-canvas` | `canvas` | The html canvas object |\r\n| `inking-toolbar-pen` | `button` | The toolbar pen button |\r\n| `inking-toolbar-pencil` | `button` | The toolbar pencil button |\r\n| `inking-toolbar-highlighter` | `button` | The toolbar highlighter button |\r\n| `inking-toolbar-eraser` | `button` | The toolbar eraser button |\r\n| `inking-toolbar-copy` | `button` | The toolbar copy button |\r\n| `inking-toolbar-save` | `button` | The toolbar save button |\r\n\r\n### Styling samples\r\n\r\nRemove the canvas border:\r\n```css\r\n inking-canvas::part(canvas) {\r\n border: none;\r\n }\r\n```\r\nChange the save button color:\r\n```css\r\n inking-toolbar-save::part(button) {\r\n background-color: blue;\r\n }\r\n```\r\n\r\nTry it: [live](https://pwa-inking-styling-samples.glitch.me/) | [code](https://glitch.com/edit/#!/pwa-inking-styling-samples?path=index.html%3A29%3A20)\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"fb4493d73ba33f33d17afa8ccb9a9754e3ed105c","_id":"@pwabuilder/pwa-inking@1.0.13","_nodeVersion":"13.9.0","_npmVersion":"6.14.2","dist":{"integrity":"sha512-iSUCb8/TN5htemy3Q76v1kwCU9xKNam1QMsu1NQsCO6BaDUFHlZdZZyBAXTLhzi7Bykl4uU3EEYwtMcwgcpUgw==","shasum":"b2a1c43676d145db43e78d7271a074cbcd3b3b4d","tarball":"https://registry.npmjs.org/@pwabuilder/pwa-inking/-/pwa-inking-1.0.13.tgz","fileCount":28,"unpackedSize":892575,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKyoQCRA9TVsSAnZWagAAYYcQAJrRiKYN7HDJJ05UZyWl\nt062cSr8hWucEQW2CN7BJ0wv+ARmamfsikEAjifkAs3NncgwidDIOPGFZpdu\npWuJhlQTgOLvdR1I+HaStbVyKYJopeulE+rF+2YhX7TInOucGwZPEJ3CY2ir\nM7cNjVysjCwjdz4DoGvmm3GZs446QyL3vjvb43QDVQ4+Rj3W9vNnqNEiHH2V\n3L4lsjIGUxYwMWrPCGN3HMYT02RFalzJxxv+HW8Ks4wCEI7r9giPAQx2h+WK\nQlw7fYcxCuoS8qUUNmVHyc7dfaSCu7Qn94aoBRTuLdzspKBhcL5/0cAYUkKj\nph5ZKPJ6hNNvfgoIys53vuBnwz+obbOBmpUmrfFSFv/h6iYDGXyn39m13E9t\nLkukHPULct0dyc3AKr5K9sw1+IwD/xdtnph1wbRX9r7uZLqSJBVmtqaYoHTX\nkZGLVR2kldxB0Prj+972SWAw3YohE8l5lkGjVdfAVkd+3p3GPPSfWMVb3jTV\nUIaIitZG8rcmHeqLfXhSV19e1G48Bs5uKfJnzJCrb0oleiPi0X0lMklb0Uyd\nG5FwjqqM6mXy9y0fxPJic3iWTGV2FGP8jjefpQ/H/xoGW0305L9TNpcR3yab\nTSI9o7ycjowegv3Afzi6sIm5zSPh3SpcSRJ7vxaEIuvGe9l9MKE9GE+9jgve\nKkuI\r\n=Ij8J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCXUPEZdWwSi8oYd9nu9BxZL7nMQ/4gaLtyUMftI1LU1QIhAPc1njOKfbzGgBLaB3pxP5GqE87dxAxc+i3Ww9XL6Qv2"}]},"maintainers":[{"name":"pwabuilder","email":"juwillis@microsoft.com"}],"_npmUser":{"name":"pwabuilder","email":"juwillis@microsoft.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/pwa-inking_1.0.13_1596664335770_0.18069323570477502"},"_hasShrinkwrap":false},"1.0.14":{"name":"@pwabuilder/pwa-inking","version":"1.0.14","description":"A [web component](https://meowni.ca/posts/web-components-with-otters/) from the [PWABuilder](https://pwabuilder.com) team that allows you to quickly add a 2D inking canvas (with an optional toolbar) to your Progressive Web App 🎨 ✨","main":"dist/index.js","module":"dist/index.js","scripts":{"start":"concurrently \"tsc --watch\" \"es-dev-server --app-index index.html --node-resolve --watch --open\"","build":"rimraf /dist && tsc && rollup -c","ts":"tsc"},"author":"","license":"ISC","dependencies":{"browser-nativefs":"^0.8.2","es-dev-server":"^1.45.1","idb-keyval":"^3.2.0","lit-element":"^2.2.1","pointer-tracker":"^2.2.1","typescript":"^3.8.3"},"devDependencies":{"@rollup/plugin-strip":"^1.3.3","concurrently":"^5.2.0","rimraf":"^3.0.2","rollup":"^2.3.3","rollup-plugin-minify-html-literals":"^1.2.3","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-terser":"^5.3.0"},"readme":"# pwa-inking\r\n\r\nA [web component](https://meowni.ca/posts/web-components-with-otters/) from the [PWABuilder](https://pwabuilder.com) team that allows you to quickly add a 2D inking canvas (with an optional toolbar) to your Progressive Web App 🎨 ✨\r\n\r\n_Built with [lit-element](https://lit-element.polymer-project.org/)_\r\n\r\n## What does it look like?\r\n\r\n![An image of what the component looks like](assets/images/example.png?raw=true \"pwa-inking\")\r\n\r\n## Supported Browsers\r\n- Edge\r\n- Chrome\r\n- Firefox\r\n- Safari\r\n\r\n## Using this component\r\n\r\n## Install\r\n\r\nThere are two ways to use this component. For simple projects or just to get started fast, we recommend using the component by script tag. If your project is using [npm](https://www.npmjs.com/) then we recommend using the npm package.\r\n\r\n### Script tag\r\n\r\n1. Add this script tag in the head of your index.html:\r\n\r\n```html\r\n \r\n```\r\n\r\n### NPM\r\n\r\n1. Run this command in your project directory:\r\n```shell\r\n npm install @pwabuilder/pwa-inking\r\n```\r\n\r\n2. Add this import statement to your script file:\r\n```js\r\n import @pwabuilder/pwa-inking\r\n```\r\n\r\n## Adding the component to your code\r\n\r\n### Canvas only\r\n\r\nYou can use the element `` anywhere in your template, JSX, html, etc. By itself, you will get a blank, bordered canvas which you can control through its APIs (see [table](#inking-canvas) for details).\r\n\r\n```html\r\n \r\n```\r\n\r\nTry it: [live](https://pwa-inking-canvas-only.glitch.me/) | [code](https://glitch.com/edit/#!/pwa-inking-canvas-only?path=index.html%3A20%3A41)\r\n\r\n### Canvas with default toolbar\r\n\r\nYou can also add the `` element within the `` element so the user can control the canvas visually. To connect these elements, their respective `canvas` and `name` attribute values must match. The default toolbar contains all 6 tools in the following order: pen, pencil, highlighter, eraser, copy, and save.\r\n\r\n```html\r\n \r\n \r\n \r\n```\r\n\r\nTry it: [live](https://pwa-inking.glitch.me/) | [code](https://glitch.com/edit/#!/pwa-inking?path=index.html%3A1%3A0)\r\n\r\n### Canvas with customized toolbar\r\n\r\nYou can also specify the toolbar layout and select which subset of tools you want to include.\r\n\r\n| Toolbar layout options | Possible values | \r\n| ---------------------- | ---------------------------------------------------------- | \r\n| `orientation` | horizontal or vertical | \r\n| `vertical` | top, center, or bottom |\r\n| `horizontal` | left, center, or right ||\r\n\r\nAvailable tool components (which can be added in any order):\r\n\r\n- ``\r\n- ``\r\n- ``\r\n- ``\r\n- ``\r\n- ``\r\n\r\nExample usage:\r\n\r\n```html\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n```\r\n\r\nTry it: [live](https://pwa-inking-customized-toolbar.glitch.me/) | [code](https://glitch.com/edit/#!/pwa-inking-customized-toolbar?path=index.html%3A25%3A55)\r\n\r\n## Default inking behavior\r\n\r\nBy default `` will create ink strokes with a width depending on the active pointer event:\r\n\r\n| Pointer event | Property influencing ink stroke width | Ink stroke width details\r\n| ------------------- | ------------------------------------------- | --------------------------------------------------------- |\r\n| `mouse` | none | Should match the default inking-toolbar tool slider value |\r\n| `touch` | `width` | Changes with surface area of inking screen pressed |\r\n| `pen` | `pressure` | Changes with downward force applied to inking screen |\r\n\r\n\r\nIf a browser does not provide a value for its pointer event's pressure/width, then the canvas should default to treating this input like a mouse event.\r\n\r\nThe stroke width regardless of pointer event type can be set and fixed through the ``.\r\n\r\n## APIs\r\n\r\n## inking-canvas\r\n\r\n### Properties\r\n\r\n| Property | Attribute | Description | Type | Default |\r\n| -------------------- | -------------------- | ------------------------------------------------------------------------------- | --------- | --------------------------------------------------- |\r\n| `name` | `name` | Used to connect an inking toolbar | `string` | `\"\"` |\r\n| `canvasHeight` | `height` | Fills parent height default | `number` | `-1` |\r\n| `canvasWidth` | `width` | Fills parent width by default | `number` | `-1` |\r\n\r\n\r\n### Methods\r\n\r\n| Name | Description |\r\n| --------------- | -------------------------- |\r\n| `getStrokeColor()` | Returns ink color \r\n| `setStrokeColor(color: string)` | Changes ink color |\r\n| `getStrokeSize()` | Returns ink stroke width \r\n| `setStrokeSize(strokeSize: number)` | Changes ink stroke width |\r\n| `getStrokeStyle()` | Returns name of active tool defining ink style \r\n| `setStrokeStyle(toolName: string)` | Changes ink style to reflect provided tool name (pen, pencil, highlighter, or eraser) | \r\n| `copyCanvasContents()` | Copies canvas state to clipboard via Clipboard API (if supported by browser) |\r\n| `saveCanvasContents()` | Opens native file system to allow user to save canvas state as png image |\r\n| `eraseAll()` | Deletes all visible and cached canvas ink |\r\n| `getCanvas()` | Returns inner html canvas object for advanced use cases |\r\n| `getScale()` | Returns canvas size relative to its content's aspect ratio \r\n| `requestDrawCanvas()` | Triggers an additional canvas redraw if one is not already queued up |\r\n| `setMinWidth(newMinWidth: number)` | Changes minimum canvas width and overrides default 300px value |\r\n\r\n\r\n## inking-toolbar\r\n\r\n### Properties\r\n\r\n| Property | Attribute | Description | Type | Default |\r\n| -------------------- | -------------------- | ------------------------------------------------------------------------------- | --------- | --------------------------------------------------- |\r\n| `orientation` | `orientation` | Toolbar layout direction | `string` | `horizontal` |\r\n| `verticalAlignment` | `vertical` | Toolbar layout vertical alignment | `string` | `top` |\r\n| `horizontalAlignment` | `horizontal` | Toolbar layout horizontal alignment | `string` | `left` |\r\n| `targetInkingCanvas` | `canvas` | Connects toolbar to canvas whose name matches this value | `string` | `\"\"` |\r\n\r\n\r\n\r\n### Methods\r\n\r\n| Name | Description |\r\n| --------------- | -------------------------- |\r\n| `getCurrentToolName()` | Returns the active tool name \r\n| `getCurrentStrokeColor()` | Returns the current toolbar ink color of the active tool | |\r\n| `getCurrentStrokeColorName()` | Returns the current stroke color name of the active tool | Sets the current stroke color name for the active tool |\r\n| `getCurrentStrokeSize()` | Returns the current stroke width of the active tool \r\n| `requestDrawSineCanvas()` | Triggers an additional example stroke redraw if one is not already queued up |\r\n\r\n## Styling\r\n\r\n### Shadow parts\r\n\r\nYou can style the different parts of pwa-inking using [CSS ::part selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/::part). Below are the list of parts available for styling:\r\n\r\n| Component | Part Name | Description |\r\n| - | - | - |\r\n|`inking-canvas` | `canvas` | The html canvas object |\r\n| `inking-toolbar-pen` | `button` | The toolbar pen button |\r\n| `inking-toolbar-pencil` | `button` | The toolbar pencil button |\r\n| `inking-toolbar-highlighter` | `button` | The toolbar highlighter button |\r\n| `inking-toolbar-eraser` | `button` | The toolbar eraser button |\r\n| `inking-toolbar-copy` | `button` | The toolbar copy button |\r\n| `inking-toolbar-save` | `button` | The toolbar save button |\r\n\r\n### Styling samples\r\n\r\nRemove the canvas border:\r\n```css\r\n inking-canvas::part(canvas) {\r\n border: none;\r\n }\r\n```\r\nChange the save button color:\r\n```css\r\n inking-toolbar-save::part(button) {\r\n background-color: blue;\r\n }\r\n```\r\n\r\nTry it: [live](https://pwa-inking-styling-samples.glitch.me/) | [code](https://glitch.com/edit/#!/pwa-inking-styling-samples?path=index.html%3A29%3A20)\r\n\r\n\r\n","readmeFilename":"README.md","gitHead":"f8cb13c8ecc55fc83ed7c0baf50fa6513b2da16f","_id":"@pwabuilder/pwa-inking@1.0.14","_nodeVersion":"13.9.0","_npmVersion":"6.14.2","dist":{"integrity":"sha512-qPXcTPAaBdq5ZwF7uNeqfWgaARJeYSXpu5BQK9ZtCpd2Q91R+29lRMjrIKy25ULMtSiBKn+sO+UPj8VlCZewIw==","shasum":"8e3db3f1b6cb6489be3a5400ae83435b48c8da50","tarball":"https://registry.npmjs.org/@pwabuilder/pwa-inking/-/pwa-inking-1.0.14.tgz","fileCount":28,"unpackedSize":893786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLdIeCRA9TVsSAnZWagAAJQQP/3uQtizge4udylYSl33J\nqFihP245Du8Fzl2RkyOPfc8hieLV1KANo0UhnuIi04cMI1bnQoZd9hGEdEkJ\n5/1nlj2YLpbLlXnAVu0anatRwh+jrbiI+wAMAEa2SNEVgyhgIA2xHtbXBE8P\nSkqP33P2XG33rC3AGlhPkR/3QxbK5Mlteczg2A05P6Q6HBZThiOdjPXf04nm\n9JeLyoqQCTGL89YEJUtKznS/DwhCuFiwf+eA/EkyCt6ouv/zxle2CE2ggNaU\nerz6Xi0QsElAHRZIUvsrxzKrtgzVqLkORecLFIu7ppq34bUo7NRdfQBl6nQ7\nlMWqOyLwJ2YycWpgmMclNlhEC0aO6YJhfGhm9iKt9KyQ29Ne6EdGfl9bKLY8\nccEMNTRF3WvBU27WYOlMy5ccwOzWlSuc0O3P3/W8iwjuww9jrQBtHyl9nxzx\nmq0I4iZVluOeFpLhkuqi2ZtpZw8r+1heMDiQJVPUm/OZLaydYNFAiOOS0k1G\nl2/7OvfS0S9eY+E++010+639OuXburZ9tzwVOCKMdNo3mR9ggcTYDZomlqe/\nflgXnK5GqZI1f4TaJIH9lvpGgOaO4u3pTs/7yq425MGDuj7imgo96SsL6cA0\nNvqr6UT7aUJg4Ei9pJrWlTwVGZ4F23H8veCoR82bhatDIrRGYLXduDxFYjAj\ngkbg\r\n=AXQY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC9ixz3HRSl8xtn3pn5aMCL95oOlklNIqaWM8sD+CWm+gIgHJd5mluuHxspd78vjWxTuvLETtKPsBfQJZvQ+C1k6HE="}]},"maintainers":[{"name":"pwabuilder","email":"juwillis@microsoft.com"}],"_npmUser":{"name":"pwabuilder","email":"juwillis@microsoft.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/pwa-inking_1.0.14_1596838430191_0.07166947365750898"},"_hasShrinkwrap":false},"1.0.15":{"name":"@pwabuilder/pwa-inking","version":"1.0.15","description":"A [web component](https://meowni.ca/posts/web-components-with-otters/) from the [PWABuilder](https://pwabuilder.com) team that allows you to quickly add a 2D inking canvas (with an optional toolbar) to your Progressive Web App 🎨 ✨","main":"dist/index.js","module":"dist/index.js","scripts":{"start":"concurrently \"tsc --watch\" \"es-dev-server --hostname 0.0.0.0 --app-index index.html --node-resolve --watch --open http://localhost:8000","build":"rimraf /dist && tsc && rollup -c","ts":"tsc"},"author":"","license":"ISC","dependencies":{"browser-nativefs":"^0.8.2","es-dev-server":"^1.45.1","idb-keyval":"^3.2.0","lit-element":"^2.2.1","pointer-tracker":"^2.2.1","typescript":"^3.8.3"},"devDependencies":{"@rollup/plugin-strip":"^1.3.3","concurrently":"^5.2.0","rimraf":"^3.0.2","rollup":"^2.3.3","rollup-plugin-minify-html-literals":"^1.2.3","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-terser":"^5.3.0"},"gitHead":"27a56576f2b6db76558643456556e604dddc020e","_id":"@pwabuilder/pwa-inking@1.0.15","_nodeVersion":"13.9.0","_npmVersion":"6.14.2","dist":{"integrity":"sha512-awkua/seFxb0JD+78DUFGYIAhCZV0G/UJzsN2mYzsq3rxKj/cZ4qLZuuDzzsRLcOnRH6gyvyZeikmvU6xrZE2g==","shasum":"1a983827640462564678dbb16c22249ac1a6537f","tarball":"https://registry.npmjs.org/@pwabuilder/pwa-inking/-/pwa-inking-1.0.15.tgz","fileCount":28,"unpackedSize":927539,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWrs+CRA9TVsSAnZWagAAoYMP/3Xqv3hZj/S4QdKqPMGW\ngLlFEwwpPXAGa6MVyquAavjU0LiSAa8oC6qx2B/28ND+ZM+yDlGZ0Z1C/rfv\nnPoL7YqI3GQi87B0d0py8hMbYFGpJ6jfoSLyfWMZdQCznVzIUPU/N1uq1weG\nmnd70c9/+8h6ui9VioXQisnMHSo2JUKvZz+oDkSRE6A1bg3FYJxUCkJUBesZ\nHe2zUarHqYXWX7mwWmyBaA6BDFrLKncuPuZDvu+fLoHvwKTYedDIHVZAC1qI\njYqQAoO1Jnv2rCFIY/Un2c5OwPl907aEdtZj/t3VWe8CGrqQcsVmxeWtgpi0\nbLZXNSILLJORluDoZKO3oum5ZaOeh3rt2xTJEPcS6rQZIAr1YFVPBi2r1TxT\nxefeyNlMwp/1jVK7OiII0hxskNrqL1YNCLaiHlmjd0tmsIjyCmJI+bDhJJMi\njPRe/ZolQWxggGIbKDxKcI7LD7lOeMTOKnMySiy81e/DafXUm/LNjBho/nEn\nz3WVCXbGLLLAQnwE5BGS0056+Iqr4Jc8qrLZA++DMrBNPM8Wonby6ikaCH3p\nkpn9Q6MOuw/i2uCfn873lsTfHH3EoA3xEgIsXMXXJexh35VMwzNcmFE3STAU\n5iw6o4PGB6rwU3M3j4+ZFwCcJMXcii6cG2+HTBPs0uCTXk2nhvelrtJq8rzf\nDGQQ\r\n=7lMz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH7LLZUL5fdf3D34h1B7eDBOrrT6kGXkQ4GyOYWAtez4AiEAvHBouvJoKGm+H9V0Ckb9E+3DO2pakyc0H8gpW8vVaFg="}]},"maintainers":[{"name":"pwabuilder","email":"juwillis@microsoft.com"}],"_npmUser":{"name":"pwabuilder","email":"juwillis@microsoft.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/pwa-inking_1.0.15_1599781694204_0.5771151631678584"},"_hasShrinkwrap":false},"1.0.16":{"name":"@pwabuilder/pwa-inking","version":"1.0.16","description":"A [web component](https://meowni.ca/posts/web-components-with-otters/) from the [PWABuilder](https://pwabuilder.com) team that allows you to quickly add a 2D inking canvas (with an optional toolbar) to your Progressive Web App 🎨 ✨","main":"dist/index.js","module":"dist/index.js","scripts":{"start":"concurrently \"tsc --watch\" \"es-dev-server --app-index index.html --node-resolve --watch --open\"","build":"rimraf /dist && tsc && rollup -c","ts":"tsc"},"author":"","license":"ISC","dependencies":{"browser-nativefs":"^0.8.2","es-dev-server":"^1.45.1","idb-keyval":"^3.2.0","lit-element":"^2.2.1","pointer-tracker":"^2.2.1","typescript":"^3.8.3"},"devDependencies":{"@rollup/plugin-strip":"^1.3.3","concurrently":"^5.2.0","rimraf":"^3.0.2","rollup":"^2.3.3","rollup-plugin-minify-html-literals":"^1.2.3","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-terser":"^5.3.0"},"gitHead":"2eed8eaba8c2a08c4d97b336e967d1cbe94167fc","_id":"@pwabuilder/pwa-inking@1.0.16","_nodeVersion":"13.9.0","_npmVersion":"6.14.2","dist":{"integrity":"sha512-vCdEVZKjdM+Yrx261RwHl+BIsll14Jx/mhivzx7uygmPKm/1YnE2V0iltoqHh8DrltgUkNphuE7ZSTIw9DwKEQ==","shasum":"4dda5ee2443115630c85661a0aaeeb107a440eff","tarball":"https://registry.npmjs.org/@pwabuilder/pwa-inking/-/pwa-inking-1.0.16.tgz","fileCount":28,"unpackedSize":927267,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW8HrCRA9TVsSAnZWagAApNIP/0+PxFyGTnjPXLbTvwCv\nlRS9Lc6ByE/7Vx9EbyRYidAafA+hsUPyJQv4WhayFsc3Bwsg1oqXNbWAq/xq\nXj1grX/wV78angl4fZkhVYt5xP+kY+w7sd0BMQvIeS6MiALaAiypPNlmt5FJ\n79ng7XYRi3wI7qbbPOurigz69A51DIzRB5lOAbmGjQRPFdOL1v+eUtSxjX6b\nf3PHw6pXT7ulqK/i5nivZ1H8z73TryVI9MK8mzdK1It7h9HbDAtqOhI0EmBS\n+l83i5aNvpDqwqyszFl79shh7f9GxbgeNZv6b6rT1gzC2JNCxCS9f1av6dg/\n0R1SPfOQeHwRe2i1EA6t+Z5hDsD6hqnEVaKk1yp3C8Z1QEqupb+nasMafFfi\n9qgnP77hF91aXIAA1LPOnO4ZXreYWnNq6WMkFKq6Zf92WtEPeOe0EoestIdd\no+HH3GyVq0JGejQAxC4F5cC0J1sG/mZjdZJDOBgKzaYJ0qdo6lK+Kfby7l/4\nzrTIlepos/QQbp5SUA52Rz4hx/rqydCH7wL51ne3TYnvUT1ZCYn1SdIg0jKC\ntreJ8EeL/01a5qQygOjMqzcnosnGfzIgHGq54vcNmxGGfhQ1AdfHPTMNxpgw\n1n2dDcwlc2rriy7O7KXHQTBNGBTx2HqUKk59jZBwpcKzjJ9Rr0raTmMf0zhc\ngIyI\r\n=ORrp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDgXfJkR6ydQfX/LddMUkg+iGRY+xig2yIiXWBBcaEMagIgJAngi81MVQd3eBBms4ypPqVR5u3LVw1wkKe95XNmm2g="}]},"maintainers":[{"name":"pwabuilder","email":"juwillis@microsoft.com"}],"_npmUser":{"name":"pwabuilder","email":"juwillis@microsoft.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/pwa-inking_1.0.16_1599848938852_0.5852110789476563"},"_hasShrinkwrap":false}},"time":{"created":"2020-05-11T21:53:43.785Z","0.5.0":"2020-05-11T21:53:43.944Z","modified":"2023-03-29T20:48:13.773Z","0.5.1":"2020-05-11T22:57:54.572Z","0.5.2":"2020-05-12T15:16:43.075Z","0.5.3":"2020-05-12T15:46:12.267Z","0.5.4":"2020-05-12T16:38:30.197Z","0.5.5":"2020-05-14T00:28:56.670Z","0.5.6":"2020-06-02T23:51:40.008Z","0.5.7":"2020-06-08T21:31:15.814Z","0.5.8":"2020-06-08T22:10:30.244Z","0.5.9":"2020-06-08T23:47:11.272Z","0.9.0":"2020-06-24T17:42:49.623Z","0.9.1":"2020-06-24T21:18:58.141Z","0.9.2":"2020-06-24T21:56:33.192Z","0.9.3":"2020-07-01T23:39:07.970Z","0.9.4":"2020-07-04T01:18:31.403Z","0.9.5":"2020-07-14T20:32:37.893Z","1.0.0":"2020-07-14T22:16:53.013Z","1.0.1":"2020-07-14T23:53:03.815Z","1.0.2":"2020-07-24T17:27:30.806Z","1.0.3":"2020-07-24T23:54:48.709Z","1.0.4":"2020-07-27T20:45:28.517Z","1.0.5":"2020-07-27T21:44:58.162Z","1.0.6":"2020-07-28T21:20:21.182Z","1.0.7":"2020-07-29T00:04:54.951Z","1.0.8":"2020-07-29T18:01:37.313Z","1.0.9":"2020-07-29T18:34:39.728Z","1.0.10":"2020-07-29T20:15:54.143Z","1.0.11":"2020-07-31T18:33:23.911Z","1.0.12":"2020-07-31T18:50:51.008Z","1.0.13":"2020-08-05T21:52:16.006Z","1.0.14":"2020-08-07T22:13:50.356Z","1.0.15":"2020-09-10T23:48:14.318Z","1.0.16":"2020-09-11T18:28:58.964Z"},"maintainers":[{"email":"zachteutsch@gmail.com","name":"zteutsch"},{"email":"nikola.metulev@gmail.com","name":"metulev"},{"email":"juwillis@microsoft.com","name":"mani-builder"}],"license":"ISC","readme":"# pwa-inking\r\n\r\nA [web component](https://meowni.ca/posts/web-components-with-otters/) from the [PWABuilder](https://pwabuilder.com) team that allows you to quickly add a 2D inking canvas (with an optional toolbar) to your Progressive Web App 🎨 ✨\r\n\r\n_Built with [lit-element](https://lit-element.polymer-project.org/)_\r\n\r\n## What does it look like?\r\n\r\n![An image of what the component looks like](assets/images/example.png?raw=true \"pwa-inking\")\r\n\r\n## Supported Browsers\r\n- Edge\r\n- Chrome\r\n- Firefox\r\n- Safari\r\n\r\n## Using this component\r\n\r\n## Install\r\n\r\nThere are two ways to use this component. For simple projects or just to get started fast, we recommend using the component by script tag. If your project is using [npm](https://www.npmjs.com/) then we recommend using the npm package.\r\n\r\n### Script tag\r\n\r\n1. Add this script tag in the head of your index.html:\r\n\r\n```html\r\n \r\n```\r\n\r\n### NPM\r\n\r\n1. Run this command in your project directory:\r\n```shell\r\n npm install @pwabuilder/pwa-inking\r\n```\r\n\r\n2. Add this import statement to your script file:\r\n```js\r\n import @pwabuilder/pwa-inking\r\n```\r\n\r\n## Adding the component to your code\r\n\r\n### Canvas only\r\n\r\nYou can use the element `` anywhere in your template, JSX, html, etc. By itself, you will get a blank, bordered canvas which you can control through its APIs (see [table](#inking-canvas) for details). Every `` must have a distinct name so that its data can be properly cached, transmitted, etc.\r\n\r\n```html\r\n \r\n```\r\n\r\nTry it: [live](https://pwa-inking-canvas-only.glitch.me/) | [code](https://glitch.com/edit/#!/pwa-inking-canvas-only?path=index.html%3A20%3A41)\r\n\r\n### Canvas with default toolbar\r\n\r\nYou can also add the `` element within the `` element so the user can control the canvas visually. To connect these elements, their respective `canvas` and `name` attribute values must match. The default toolbar contains all 6 tools in the following order: pen, pencil, highlighter, eraser, copy, and save.\r\n\r\n```html\r\n \r\n \r\n \r\n```\r\n\r\nTry it: [live](https://pwa-inking.glitch.me/) | [code](https://glitch.com/edit/#!/pwa-inking?path=index.html%3A1%3A0)\r\n\r\n### Canvas with customized toolbar\r\n\r\nYou can also specify the toolbar layout and select which subset of tools you want to include.\r\n\r\n| Toolbar layout options | Possible values | \r\n| ---------------------- | ---------------------------------------------------------- | \r\n| `orientation` | horizontal or vertical | \r\n| `vertical` | top, center, or bottom |\r\n| `horizontal` | left, center, or right ||\r\n\r\nAvailable tool components (which can be added in any order):\r\n\r\n- ``\r\n- ``\r\n- ``\r\n- ``\r\n- ``\r\n- ``\r\n\r\nExample usage:\r\n\r\n```html\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n```\r\n\r\nTry it: [live](https://pwa-inking-customized-toolbar.glitch.me/) | [code](https://glitch.com/edit/#!/pwa-inking-customized-toolbar?path=index.html%3A25%3A55)\r\n\r\n## Default inking behavior\r\n\r\nBy default `` will create ink strokes with a width depending on the active pointer event:\r\n\r\n| Pointer event | Property influencing ink stroke width | Ink stroke width details\r\n| ------------------- | ------------------------------------------- | --------------------------------------------------------- |\r\n| `mouse` | none | Should match the default inking-toolbar tool slider value |\r\n| `touch` | `width` | Changes with surface area of inking screen pressed |\r\n| `pen` | `pressure` | Changes with downward force applied to inking screen |\r\n\r\n\r\nIf a browser does not provide a value for its pointer event's pressure/width, then the canvas should default to treating this input like a mouse event.\r\n\r\nThe stroke width regardless of pointer event type can be set and fixed through the ``.\r\n\r\n## Live sharing\r\n\r\nThe `` supports live sharing the drawing of its contents on different browsers and devices. A custom event is broadcasted for external influencers to collect. The following snippet detailing the stroke data is taken from the inking-canvas source code:\r\n\r\n```js\r\n // broadcast stroke details for live sharing\r\n let inkingCanvasPointerMoveEvent = new CustomEvent(\"inking-canvas-pointer-move\", { \r\n detail: { \r\n pointer: pointer,\r\n previous: previous,\r\n event: event,\r\n x0: previous.clientX,\r\n y0: previous.clientY,\r\n x1: (event as PointerEvent).clientX,\r\n y1: (event as PointerEvent).clientY,\r\n color: this.strokeColor,\r\n pointerType: (event as PointerEvent).pointerType,\r\n pressure: (event as PointerEvent).pressure,\r\n width: (event as PointerEvent).width,\r\n strokeSize: this.strokeSize,\r\n toolStyle: this.toolStyle,\r\n inkingCanvasName: this.name\r\n }\r\n });\r\n this.dispatchEvent(inkingCanvasPointerMoveEvent);\r\n```\r\n\r\nExternal strokes (ones originally drawn on a different browser or device) can also be drawn on the local `` instance by accepting a data package like the one defined above using the `drawRemoteStrokes(strokeData: any)` function.\r\n\r\nYou can use any websocket-based sharing solution to broadcast and deliver stroke data. It is recommended to prevent stroke duplication by ensuring the recipient client is not the stroke's origin and that the destination `` matches the origin `` by name (in case the app hosts multiple instances of the component).\r\n\r\nThe following code is a snippet from a [Socket.IO](https://socket.io/) example [client](https://glitch.com/edit/#!/pwabuilder-inking-live?path=src%2Fscript%2Fpages%2Fapp-home.ts%3A116%3A9) (found in src/script/pages/app-home.ts):\r\n\r\n```js\r\n socket.on('drawing', (data: any) => {\r\n   if (data.originID !== this.socket.id) {\r\n if (data.contents.inkingCanvasName === this.firstInkingCanvas.name) {\r\n            this.firstInkingCanvas.drawRemoteStroke(data.contents);\r\n } else if (data.contents.inkingCanvasName === this.secondInkingCanvas.name) {\r\n this.secondInkingCanvas.drawRemoteStroke(data.contents);\r\n }\r\n }\r\n });\r\n```\r\n\r\nTry it: [live](https://pwabuilder-inking-live.glitch.me/) | [code](https://glitch.com/edit/#!/pwabuilder-inking-live?path=src%2Fscript%2Fpages%2Fapp-home.ts%3A116%3A9)\r\n\r\n## APIs\r\n\r\n## inking-canvas\r\n\r\n### Properties\r\n\r\n| Property | Attribute | Description | Type | Default |\r\n| -------------------- | -------------------- | ------------------------------------------------------------------------------- | --------- | --------------------------------------------------- |\r\n| `name` | `name` | Used to connect an inking toolbar | `string` | `\"\"` |\r\n| `canvasHeight` | `height` | Fills parent height default | `number` | `-1` |\r\n| `canvasWidth` | `width` | Fills parent width by default | `number` | `-1` |\r\n\r\n\r\n### Methods\r\n\r\n| Name | Description |\r\n| --------------- | -------------------------- |\r\n| `getStrokeColor()` | Returns ink color \r\n| `setStrokeColor(color: string)` | Changes ink color |\r\n| `getStrokeSize()` | Returns ink stroke width \r\n| `setStrokeSize(strokeSize: number)` | Changes ink stroke width |\r\n| `getStrokeStyle()` | Returns name of active tool defining ink style \r\n| `setStrokeStyle(toolName: string)` | Changes ink style to reflect provided tool name (pen, pencil, highlighter, or eraser) | \r\n| `copyCanvasContents()` | Copies canvas state to clipboard via Clipboard API (if supported by browser) |\r\n| `saveCanvasContents()` | Opens native file system to allow user to save canvas state as png image |\r\n| `drawRemoteStroke(strokeData: any)` | Draws remote stroke to local canvas based on passed pointer event and remote canvas state |\r\n| `eraseAll()` | Deletes all visible and cached canvas ink |\r\n| `getCanvas()` | Returns inner html canvas object for advanced use cases |\r\n| `getScale()` | Returns canvas size relative to its content's aspect ratio \r\n| `requestDrawCanvas()` | Triggers an additional canvas redraw if one is not already queued up |\r\n| `setMinWidth(newMinWidth: number)` | Changes minimum canvas width and overrides default 300px value |\r\n\r\n\r\n## inking-toolbar\r\n\r\n### Properties\r\n\r\n| Property | Attribute | Description | Type | Default |\r\n| -------------------- | -------------------- | ------------------------------------------------------------------------------- | --------- | --------------------------------------------------- |\r\n| `orientation` | `orientation` | Toolbar layout direction | `string` | `horizontal` |\r\n| `verticalAlignment` | `vertical` | Toolbar layout vertical alignment | `string` | `top` |\r\n| `horizontalAlignment` | `horizontal` | Toolbar layout horizontal alignment | `string` | `left` |\r\n| `targetInkingCanvas` | `canvas` | Connects toolbar to canvas whose name matches this value | `string` | `\"\"` |\r\n\r\n\r\n\r\n### Methods\r\n\r\n| Name | Description |\r\n| --------------- | -------------------------- |\r\n| `getCurrentToolName()` | Returns the active tool name \r\n| `getCurrentStrokeColor()` | Returns the current toolbar ink color of the active tool | |\r\n| `getCurrentStrokeColorName()` | Returns the current stroke color name of the active tool | Sets the current stroke color name for the active tool |\r\n| `getCurrentStrokeSize()` | Returns the current stroke width of the active tool \r\n| `requestDrawSineCanvas()` | Triggers an additional example stroke redraw if one is not already queued up |\r\n\r\n## Styling\r\n\r\n### Shadow parts\r\n\r\nYou can style the different parts of pwa-inking using [CSS ::part selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/::part). Below are the list of parts available for styling:\r\n\r\n| Component | Part Name | Description |\r\n| - | - | - |\r\n|`inking-canvas` | `canvas` | The html canvas object |\r\n| `inking-toolbar-pen` | `button` | The toolbar pen button |\r\n| `inking-toolbar-pencil` | `button` | The toolbar pencil button |\r\n| `inking-toolbar-highlighter` | `button` | The toolbar highlighter button |\r\n| `inking-toolbar-eraser` | `button` | The toolbar eraser button |\r\n| `inking-toolbar-copy` | `button` | The toolbar copy button |\r\n| `inking-toolbar-save` | `button` | The toolbar save button |\r\n\r\n### Styling samples\r\n\r\nRemove the canvas border:\r\n```css\r\n inking-canvas::part(canvas) {\r\n border: none;\r\n }\r\n```\r\nChange the save button color:\r\n```css\r\n inking-toolbar-save::part(button) {\r\n background-color: blue;\r\n }\r\n```\r\n\r\nTry it: [live](https://pwa-inking-styling-samples.glitch.me/) | [code](https://glitch.com/edit/#!/pwa-inking-styling-samples?path=index.html%3A29%3A20)\r\n\r\n\r\n","readmeFilename":"README.md","description":"A [web component](https://meowni.ca/posts/web-components-with-otters/) from the [PWABuilder](https://pwabuilder.com) team that allows you to quickly add a 2D inking canvas (with an optional toolbar) to your Progressive Web App 🎨 ✨"}