\n {\n this.props.onItemSelect({ type: 'set-color', value: color.hex });\n }} />\n }\n\n renderBrushSelection = () => {\n const content = strokeOptions.map(opt => (\n , document.getElementById('root'));\n\n// If you want your app to work offline and load faster, you can change\n// unregister() to register() below. Note this comes with some pitfalls.\n// Learn more about service workers: https://bit.ly/CRA-PWA\nserviceWorker.unregister();\n","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAkCAYAAADy19hsAAAAAXNSR0IArs4c6QAAAO5JREFUWAnt1iELwlAQwPF3563IGNhtwqLN4AfZR5B9AuMUV3SgWdTPYDctm40rgm1NMSjIdr7ZJhiFG9za2yu/9+fBO2Ma9kGS7LrPR3GW7gaEaDIJF/R6tcCYgqSDrQ8rI/m+m2fZbSgd7Dh4kW5UnxbQAlpACwgsALPZJrBv81ygrUayxlU0DdeEBr2Si15tV+ICoVOxPgOFRN8vU+PAxMAnYLP8dSIp/wHwKMWiDi2gBbSAFmhQAYjj7YCZA+lmRDxE0SglYOgzl2PpYGu8WmPauOFHwf++WlpYC38VINej/f3O4qf5dpvzyv4G/2Y1YKiGryMAAAAASUVORK5CYII=\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAkCAYAAAD7PHgWAAAAAXNSR0IArs4c6QAABLVJREFUWAnNWE9sFFUYf9/b/qEpJitpY6MY0WhBE4gnoxezcDBq6MHGGhO8LLRuD1o1gRIp+2c6dImNKZGLbCkSDeEAaoqo8YSNXrBRUrh5ISFp0nJqkxZot7vz/H2z+zbTZXZ2Z7ZaJ+m+975/7zff+/68KYmAj2FkUkKpZE3qREYyGUvVJFsmFCpb17T0Ba5gMbJ3bxdNTf04VdMGDiHfAAOA09sFAukLYB3gAoOsGeAGgAsEkrQWAPSQEu8pofaBtlXT/+NxmQRdUyQuIKku894hpZQM0eMXhFDDWO/EXxMzNunhvRlDz75IV+e1X69OhhrkE73w2rFNAuS17e7ffr8xKy1l9XpJbSpPiV4pBHVuKgiPzZUSOwFQhT1kqrKI6I4kGiRJe9ratz3SvIXCJBtfJCnizKtqwFNAhRs8+VWYyLjR8KNPJgYG3lwtE72J9c1MJjM2Py/SQomPyvg1LwMDJCmPJBLvf+61UywWuw/+xyhhy+jbQ16ylXiBABKJK9XA8YamefZ5y7KOoth2q0oIqtCDAZSNR73scm01jcxnyrI+gedCQcHxHgEA0o14/NDflQAi7hpNY/wbgHoX4IpiNCNJfGsJOU1kzUspW+HZZ4Ql3hAk3sILtVay5xsgjuvPSsbGxi613J1b+B6F//WCDM3KkPgwHo9NuuhcB+3iyMjZx/JrVho6B11k/HtQES24GWLa0tLCCMqWDQ4l5q8tLU37Bwej81oeMRmB5yK81hfYoaG+u1geQkhMw99fwpul+wHLoQ76fdQONw14Yg+OtFhOaLYcHOvY4PgW7nITjydjGUEqUW7bN0C83gvlRnidy1mHMdj2+FidnnOTd6MhFHACNOPk+QaII9h94sTES04jp0//3ExCvV2g0UyFmHOquM4RFrhaCcPJ9A2Qla1c3nQaWVycfRkJ28I0zlYnz+98+/amXwD0ntbzncWsiIx7zTDOpJPJ/uI1TT2nDXIp4bkzITQP4RHRhce+oWtGceTEiUajK8NG5hZIrzA5EEDbnhKfDqcyrc0tDcezK/l2gLbJXOd4UkoIm1r40eDslUuigJ4q8MScPeIn0BFrZYAaWHmQu42xS9O4COt5HWPpkwMepMX6rlyqDfHXpsHYHUKI68U6l9J0Hp0fXslU/7p655RDuXmaDwSxuISrnKjYttYp1brg9lXHc/LkxLN4YR3T00g6OleHvYdV0Vu5fT3MqI2Szeb7S5JEE/J4ou8cQF4sEeuccOPn3hrETDo93ol6+kFBl+tp3yUcMVmJVOwADvwdAP0BzOUgxp06SJqD6K0xJ63a/NSp8+G1rLqC421mWXwLH2FslQO1mkUXPncYK5+b4qIN44p7K7cve+4ir0nsOQaHZN3FNMh/l0jG7M60oQDZuGme6bbygv8rUCxhuAuifXGH4CLMMvrhhOCY42PVngO4q/jO6dHfORsOkDc3zfH9ylJfIR7bNRhszO3rFsoHF+GtXEoc2VoQI7rc0SEO4FtmraSnJxs9jo6e71i5v/oFylk3bHt2LICfw7keQ1J8jfm6hvOveND5sgx09cFaFN58FTvvwP5PIcqy8B5AiT8g+xO8Nun0mlP/fz//B2mVzqFyR5mxAAAAAElFTkSuQmCC\"","module.exports = \"data:image/png;base64,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\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAiCAYAAAAzrKu4AAAAAXNSR0IArs4c6QAAAvlJREFUWAm12E1oE0EUB/B5m178oBisqGj9ACniUZS2hwpNi1SIBRFyFAQhaj1oLxa0KWk86MEiCJIUL4IKCqJoTyLGNlaLSu+CaL0ofpSCFKzaZvy/xI3ZdLM7sx8Ly85m37z97ezszG5IhLhk0rlkUYrzZIjLqVTyis6pIjrBOrHDw7lTUsprqNMopOjp6owv5J+NTarmCAVWQhXlVUYQ0QdsolKIbh2coXoFqnEWlKDbHftaWkjQda6P23oxk86eVckVaIvVonbuih6Jx+NLT/OPxibGpzcBtFu15UhFrxJjh0okEktmXfQ3yqRHR6WQx/g3g8TA4NDxS+bx2m0gMDeUeVIdnG+YKkoX5wumi9LBeYZ5RaniPMH8olRw2rCgUG44LVjQqHo4MuiM8sgfFopxmLbk+o3iJIozvI+59bQSLEwUO/L5fMOXz/ImitsYScLIuN7KahSu7XvTuuj2vr7EPCcMYmFUYfztLUxViTJKnBgcSuYcW8yKYoZsmv02d39k5O6KMFGcuy6sGkVkTAoSLxG/iLmue/7H3EO/uHotZV6wLWwZSsg2dMh2VHoTBM4NxbhlfcwOhcm3+vVoCvX2YG3Ae9aT1Y3R3v7+xE9OprKooDiPBaaAMs/tCaeKssA0UJ5wOqgKzANKC6eLKsHKn1gyW9rhpw8dvaZPmYh6W8fb6gXFJzLwgZDiAga3j/hcaNVEcdU2rLZPq1cUJ43EYr2GkHI/ymvAew7gFpQtDwUHuiybcfwV1g1Yd/z5tdDac+DQg/fvvt6oHdFd8lQOlwC4neeKUl4o/0oTRKKD388rUeqF/7eVxKyUYm31NKOeBi3GwfhCLnR1HsSoLmLY3YoGK3htOYNoCnmakWelVxSbKgNnEDi09CJa6RPyNvtBWWC84wf3D/Uaadr9othi248sfY7oBU70m4MdFylXoV/uLcfQNP7hueMY73AwEqHHtjCuY8E5JAnp0ExdWBmXPSoFHUbZ9i0kFBSaXRjGvVByB5H0L3iDUykVsTc9AAAAAElFTkSuQmCC\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAgCAYAAABpRpp6AAAAAXNSR0IArs4c6QAAA8hJREFUWAnNmEtsDHEcx/+/mUFLVFcQFxqh0nUQDm5SKQdJE8LBihCUdLdJ6UE0RTuz3Ucf8bh4JJ1W0sTjoBLCweOinsHRsZHiIppwoURtZ+bv+9+atfbVGWt3zWH///9vfo/P//X7TZaxIj69vfrSSKi/MZ+QUj7Gbm0NQybOuB4J9R12a2vrFxVYBOWck8XZ2UhIb7Uh3LRFB7bhLM5PAlq1x07bkgELQECHw516l1NYoVdUYEUxeSoczvSJcGf/mVR5tnFRgbNBcGYdCYX08+J8Z9Ox5UUFnpyUZDtwWst5czisDwA6J9O0M0pzPI1gcHCw7P17czU3zbUWY8uRFyqRyzyMUSUjXsU5q87lghhdqVnl2e/z+cxMenkDDw0NySMjnzdwk+/A1q4nIi9WKftKZqJIlRFdX7yY7Q4EApNpr1IFTseRyMAyblpHcGl8sFnk1M6pHhG7VeOdj4X2xZJtXK9wJDJYbVmxdlSA3XCkJDv7130cj3tLqmZub2homLB9OwYeHh5WnjwZOcY4adjyGbaDQrcAfFA+Z/bW1ta930QsR8Dd3XqNMckuAXRdoQEz+6enZeVKfVvbwfGcKUQYR6N9tYB9UTpYQcHXT0wYbaKXEzgU6ttiGnQfsPOEcskeZI3a2pWdIn5WYGSBesbZDcyurGSgIjDRZa/Xs6uurs6IDzPBANZrmeYLvKvI9L5YMmSJi2rQH0BuRw2aetJWuKfnqscyrdt4XVJYrOwFwPqTYQVyGnAs9hVfTnzF1HxK9Et0JhgMHAJs2tfdH2lNZATLpIe4ZH/I3WNTDLHG8d0wjqBTLWNfEH02FqM2pz+iLsB2ZNNJgInC8PjRyCsorsqmnCwHyEdUu5ec6JXE+CjJbJSx8tGKioWfWlrqfyTr2v1o9GKVaRjv7HFqSxJTNa0pmipPHidK67PHr3fiRVZY1PbvuLJ3JEY35ZnK8+PHD7xJdpRvnySpVdP8p6fzkwA2OT+ariy2lt0H5DXPgspbzc2+r+k6+Uni55RYC2DPO/EUB0aB2ITtXWMbAPIHZ1K/ovCe9vbAB1tegNZC6mpSNf+AU9+/Vpj24TLEbTDjR9ieBk1tfOvUyd/oIY7JSDqgao2X3Ngruq7PGPvAtoitwQ1s68A5im+TGy8OdWVZJlw6oW3gou7p0BqvOTRNqEljY7QRR2AuZrtfDQZOFQo2EZFRTJJpR0ewyTWs8IEjwTdjZQ+73ZrfAM57kmTFUMG2qar/rnOrFE38kdGTf6FIcVrAoTSrXDlX+GNQwBn8765/Ak9fQ0omqpMTAAAAAElFTkSuQmCC\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAAAXNSR0IArs4c6QAABaNJREFUWAntWG1sFEUYntndaw+vAgcBgUSwfkCq/lA0ERIrqcZEjDHEj4o1wRRKjxBFBBrg4Oh95FpIbdUIoddCTyGk0l/+4I9RKaU2qL/8o7UaUSuWEAKtVHvcXW/G591jyRZObvd6pyFhkt333dl5nnl23pmdd5exm6Tw7u5u7dSpX9z/td6SkjmXNmx4Nm61X6239/QDUiS/tQrIV7uRkTOvgutjq3yK1Yb/dzvNLKCouOgezpPj5rp8+/HLsgecd9nlnSB0yZLSwYqKioIKDfgj4Jd2dbKbJvS3hNqObRbArRHNMkC2b09Y9bbRWQB79hy8XQixMJlMlXHOXVLyYSYlbBZghtt5FxoKtT0vBHsDgpbGY+MuySSnfmH1s6FBSrE4Go1+Ul1dfdmou5HNm1C/v20lZ2KvSImZRoc3HDjJ6gZ/S6wJBlvD06fP35dt35/0Ympo+GgmXuL9ENkJgbpIzlkMoe5hnK8vdjoemjqt2F3s5AtUTV2qcLaaM/452sYwzjOkYM0jw78PBINty4wHzGQnNaJ+f+ujyUSsG8QlRI4Y/8VVxevz1X6QobMR1A3i+ApHlOZvPJbcgofZLKVcAOxnoUDkTV+9J5IBm/vOFAxGHgM5daqLVFTWWb5skftfRF7X99ata0Z3+dfVqxq7D4/4JcQ6hJStoUDb9usaoyKn0Dc0dMySQh4HXoVYoXBlo8+3riqXPGHHDs/ZsvvdT4HnQxKIRRcOhSIryDeXnISOJxI0krcRkaJpb/nqa983k9r1KysrEwj5Gog9hpHlIiUPNzZ23G3msS0UIa/Bak6TcH54586avWbCXH0sPlE8xVGFafAjOEqS8WTYzGVLaFdXl4qQv6MTcPZnWZm72kw2WZ/mraLyzVf4XwkG2x8xOG0J7e+/uArAaQRGhLYgZCmDKF8Wi/EYXm+9NAWYEOsNXltCMdNrCQiiUb/fc8AgybdVGD9InFhYz0GwrtGeUMYXEwGXrIdsoYricGJUOUVrdjjcvoT6sSy0uXnfnXjGIl2cqkZ1W6CT1/v6BSQu3xG9TPEyspaFxuOOhwlAxeXiJ3SngCdMrz/S9GIeWctCUym5KA3kctOmmotpv4Bnyc4Su2BsLlnLQrnk+lZJU5z+rhC4kAVr3kX8XMq/yVoWCoEXCIDC+/oG70i7hTtzJvWQQ6E+shNGpvfkwHGkbNh4ri+onGXUSplAImHMIaM235bfS9FTZLqfCUKx0srpZqaCrP1qkSlB/41OXK3Is0M7khSpuXhFSa6xk0SvaRofGh9n6W0rW4eCl+MlvALHM7RzEFE2SE73hXjhCu4byq7IR8JivezeHZmfiLPTEKmqXK3aWb+20zraWsvGxiPuZGL0Z0TXzRWlbteuWj23sLGYGNu2zTOI0eygLgUTYSQp6Q3AmgZLrZLxUa8ukvNzU6Y49xsgW0IJ5HQ6/AjEGEa1FElKXlI8Q0wg0P40Eom36RqhDtTVrdJfTXRtWyhSsSF8oG0hMNbdWuSnG3V/kqdQ6OAizlJHaVph7nc//sTCdjOlbaEERja+nzOllXzkp+8GAq0NtLjoOpcSCEQq8Ne7j0IO/GnN4Xz52s+anMlpd+rtGTiCZV9J4rA3f6o5+Eav1/ODVbFNTYdcY2OxOiS3O4ChV+WvjiK+PBNHzkJJDI1iKNTug+MnHyWF6RBlinLI56vpw7Xp7UuIdAGmFEnxS3hI+lTWdzlKljVH0Yte7+rzRjuznZRQgwgdP4k/JE2QruerVA+R5/EAX8MbwqQ4h3tT4c9DHaVtDxpYCBzGD4nG2XPYex6PJ2nUX2vzIpRIaUTDwQMrhUzVQmU5rtVrOzNfQ+BPTCpHHcWulu3bXxs238vk502ombyl5cCMsVGxHPMAOYGch42QwnsJxxA2szOqo+gLhPh7Myab/w/97QoMxx+djwAAAABJRU5ErkJggg==\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAiCAYAAAA3WXuFAAAAAXNSR0IArs4c6QAAArhJREFUWAntWM1rU0EQ33nvtajxgxT1IuohYPUf0JPgB4go2FPixaM0gUD15Cl9aWwpQk/ejIqgaJWcvSmIH6eeBAV7tCoo0oJYW0ubfetvN9lQ2t330pfQiHEg7O7MzsxvZ2aT2RADlUrle8TYCUwdud5MEiD4nvJHchelX8wBaKT8mzGxRc47Rbv39O3I5zO/6hERXqeAaL/LywsKw6anSAOwjX8doNBUEdEMTvJeMPaJBOP1Ux1A5Z1HLbq2U4IfEKOnqNbPcg8JkYDOPkwPC8H2S56NjICI2BwMXB0eHpwEqGCt8vVS+Tl4p9fy9Ro6r/1idkCv9VipVNzp6R9pEQQ3wdur+XJcWupVF8yUsqpglPb93EMTGKmMiH2Ro5UE+2qSZTIZ7vuDT1yPpSGvmvasB0T0uFjMvjBtbhevUMi9Qgbum+wpQIgEDl0jxxGTeh53RO2o8Ifr0yOTXAFCgc7Vhd/6+/uemTa2m4fUvUS511NPi6lUz0/pQwFyPW+AHCdPDp2ReY5yjlvTRATCrcj6JIedg88r8H1W+1W3rFC4PAV1+WmKhEwx7m+r5PvZd7AhPw1aX9QNUWcmsQC1I2W248YCZDPWDn53AGolpd0RoVZq6X+EoqIXK0L4pm75p8MGLBYgm7F28LsDUCsp/TcihOZjV1i9oOK3hcnDZBuO0Pj47UNohk6FGUWrdHJs7O7RsD02WeT1HR29c0Tw4EbNgNiJbvkYHG61GdT8Wp8u3qBN/Y5WbjaZTFwbGrqk2lS9xzSqjtEk0Dw0h8mAiQt6Ld9AzVDtTw12XD2aoDA/v3gLw9so3Q2nLMqgTc45hb10G2qRgFw38QHhX2hoxJrQrOf1fmxGNbKGpJGJiQeJlZXqwdUGOecqea4bqJFzr76u8TnvUWvPEzyV2j6jXxWrbZjmfwBFX7nA7R6xQAAAAABJRU5ErkJggg==\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAgCAYAAABpRpp6AAAAAXNSR0IArs4c6QAABBdJREFUWAnNWF1oVEcUnrm7m92ErPUXNVSxaDBabEH7oNAWAqEPLQVFsloK/lW8CXmopkglZO+GTQzahzwEbdjUuviLLvpg8QfrT+JP2zdBBbMafBAf1Jhk1URMNntn+s1tbnKT7K737u5Nc2GZuWe+c843Z86cO7MOksHDOaeSVBRsbz/floF6ViqSVe1IJOIIBlvDlJAdVnVzgbdEuK2tzRl9EDtOON+MKPNcELBqw2lWAZHNu3Xz4SmwXGdWxw6cKcLhcNgT7YidQUy/sYOEFZvvJRwKhQqePomf44SXWTFsFzZtDh88GCl8/oxcSkaWUjq1cnjfvtAHPd2xS4TwNcmihT3nSCa3W4bqNPFpajo0s79P/ROkVk0cNUroHQT6JeE0Rgh9hcn1SpRGGSV3SkqmR30+n2pE56I/gXBj4+E5Q/Ghq3D+STYOKCXvsEnvU0KvEskZUZQf7mZjT9cdQ3jv3tB8NUGuIbLLdECuWkygk1By1Ot1H9i1aytWI7NnhHBDw+EFTI2DLCnOzJRprTeI+gFnnqeppmZzj2mtYaBGuL7+t4+Yql6HbJFVA5niEfEelKiq2kDFaSs2aH19uBiRBVn+oRXFXGERsUjhNGdldfX2XjM2Jc7iLf8XWUEQxdzX35f4G2V0oSnCTpfrO5Ske2bAdmGwb5YODpC/kJrv3exaDou62/dGvYz5fmYXKXN2abfkIKv9fvlxKrz2aRb54/aQMnxu/0kFnBw5n81U/sf+/b97U/kbOUvs2SO/njV7xlcgfSMVeJLkywcHEifwLdBWf7zPEcJioKrK1z93HvkaJefKeOBkvoPstw3B1qQ3mqSzaG6+6H4Ve3oWiunOvwyrcQF578GmEUs4DRP1IjDe/9rsDkewEcsvKCjZvXtTlzFYSQkLgLhhRDt6T4FMqhvG80BdxXyjMWNfnKO7uogYX0wYWYyJLCGErUQZExu70IhN2af0WCAgbzKOpyQsQOIOd+vGo2M4D280Kg330xJOgtdE4hLb2fn6Y1XlnxPGyjGBLzEwJjUNukxyuEv8/q2duiztjaO0tDSBtPget+RBcfHUlbJph4+cou6L36/agUsl5ZyRDUiDNeM2m8RY/CfgKnSfaSOsg4QRkG4BaVmXIX9fKAF5nv6eizYYDK1A+gSxomtH7dEBV55rYU3NtpdClmopRvHogRxXlB2VOGU1jxnI8YuiyPeVOnmdw0m/gM/hjwf3JBKJct2VKcICrJGuk38E6V90Zbva2lr5dn5B/qdY/qOaD8bW675ME9YVEIGfYSiov9vVopy99QfkLWJVxcZsbDwyS/iyTFgoKXUVAdweakXfzmd0VclJNvRO+5shI8KCJPLtkJ1kjbZdbu9ORHmRUTbl+zgQFU15kskI/gs+gmh5hbYcfQAAAABJRU5ErkJggg==\"","module.exports = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAoCAYAAAC4h3lxAAAAAXNSR0IArs4c6QAABTpJREFUWAnVWW9oW1UUv+e9pE2KxeGftVs/TNqBKG7gOsqoRFSEIY6hVPth4GAi1K5LygYub+mmV9Ym7xWsNJ0tRZ0yh2K1OtfKUIdWhCnTKfMPKG7KBsNlo+qcNmnz3rueG3qbmzRt0zZJ0/eh59zz7rvn9zvv3HPPS4Esw2tgYEA9ezZyt9N5wzlYDvi7ugbcV69errNt4kHAHsRcTxgZ3bCxssZRjAQofW1FNHr9HmDEw4B4rkT+2MgYKeFY2SRgBcjzjY2NVlEQCAT6VxEr5rEBPIjQE4v+sw6lkgCLfwRoEWwAGGPgeJWPl4SApr20lhDrXg4WI+uxzFhNAhwOsroYO6IbO//ic/NOgFKmTEz0rrcsE/MXEoCZbVZmBTTjJGAOoobFrbxs4kDg0AbbtDYznhKJDcduFA4XKzF9PtYN32axTn7egMVuZQQOEsZU4ShXEhSlW15LkQe50oOG9yMCbHeu1pPW+TUYbDkhjUleCHAHhtHaQwD6ZGeL1XEPhTGFUnZ63ghwsG73Oh86PLlY4InnAa65ytTX09fKKwFK7zdd7vLH0ekv6Y7nOwbCDlPa8m/6c3klwJ1RuuNvUBxbUP0z3Xm2YwBiE3AeyjQ/7wS4U11vOYfVo4EQiGcCMbcNhnR952+Z5hWEAHes694RTIPnMoGYy6aoLKV0yvPzcpDJDoTetje8yQJ2DLuFCmHLSgL8YBi+9TPNLcgb8Pt7tpmEjMwbPKJWGMwYfU4q5yelHCnGGEzEbj6IkoOQTn34DM8IXlFmfRtYgkddZeU7RkY+QP6Zr7ylEP8IiUQuH8F24rEU1wAvV1eXtly8GF9txu3T2CyvTLkvDRSAYMjwtUmmaaoUlWn3FmygtGc1foQcx3a5VizCSyFG6xkE1DVpu9Dm737UZPApkigV84TE+abicPaK8Uwy53uAd6KxqH0a830KPDq/js3d1pDRKsAn8HQYracwlZ7KCI7BYEdH86WM9yRjTgloWk+DbdlfIPgq4QP7lwuqo6QeK8mHwiZLw/AexTOiQ7ZxHdTUrjP9vhjnjIDfHw4wm72DG7ZMLI7RPeUqc9YFg80/TtkyKKHQrgOYMoPiFupfo+1LMZ5NLppAOBwu1fzdb+BmxSjiJ/jkhSCOVlWRByhtviJsM0neYbrcru34zJnEHJi9dMrrTDmUjdnqlPatjEbj7yP4+uQzgCzYAb2zdVpaJOdk1tra+qrMePxYdU1pfVNTU1Ztx4IJBAJ9d9lmfJgRtkbAwUiOYbf+RKjT956wzVfiTyoubABj2T63IAKY7w9j1N9CJ+XCEb7+S4qqbg0Gd30rbIWQ894DWGl2Y4ocl8FjzfjG5VZwsxYWPA9Q1m+gv7/f+fv58V5MmdS6DfBuRUXl9j17GqOFiHi6j6wIUPrKTbHo2CCWyPvkBfCobw/q3md5FZHthdTnJLB/f+/tZtwcRvBrk8BgHGv8k3gIvZm0LY02KwFNCz/IDyeEtkLAw80aURk80tHp+0rYllLOuImx0jRjpTmRAp6Q7xlx1RULeB64ad0o/+fBd2ciL9rM9sqJjXk+5HKr2yht4n180VwpKeT39+NvmONvY+SnfnvkSLEhe8FV5t1LKdhFg3wSyBQBTeutJswcws16ZxIkxEEhT+u673DSVlxagsC+fWGPbTF+/N8i4GHKjCL4hlDI97mwFaMETeu7jbD4T3IbjOB/djjJlvZ23/liBC1jUhRm3iGDx4T/hJHSTcsBPCeirKkuOYl5NIz6f3yz1tauesgwmq7JLItZ/x+crrodPc6MSgAAAABJRU5ErkJggg==\""],"sourceRoot":""}
\n
\n );\n }\n}","import React from 'react';\n\nimport IconBrush from './img/brush@2x.png';\nimport IconImage from './img/image@2x.png';\nimport IconPen from './img/pen@2x.png';\nimport IconErase from './img/eraser@2x.png';\nimport IconRedo from './img/redo@2x.png';\nimport IconShape from './img/shape@2x.png';\nimport IconText from './img/text@2x.png';\nimport IconUndo from './img/undo@2x.png';\n\nexport default class PrimaryToolBar extends React.Component {\n handleFileUploadRef = (r) => {\n // omer file upload absolute?\n this.fileUpload = r;\n }\n\n handleFileUpload = () => {\n this.fileUpload.click();\n }\n\n renderLine1() {\n return (\n \n
\n )\n }\n\n renderLine2() {\n return (\n \n \n\n \n\n \n \n 
\n \n \n 
\n \n \n 
\n \n {!this.props.hidePhoto &&\n <>\n \n \n \n }\n
\n \n
\n )\n }\n \n render() {\n return (\n \n \n \n \n 
\n \n
\n \n {this.renderLine1()}\n {this.renderLine2()}\n
\n );\n }\n}","export const strokeOptions = [\n {\n name: 'thin',\n value: 2,\n cssBorderWidth: 1\n },\n {\n name: 'medium',\n value: 5,\n cssBorderWidth: 2\n },\n {\n name: 'thick',\n value: 10,\n cssBorderWidth: 4\n },\n {\n name: 'extra thick',\n value: 20,\n cssBorderWidth: 7\n },\n];\n// export const strokeOptions = [...strokeOpts, ...strokeOpts.map(a => Object.assign({}, a, { name: a.name + '-dashed', isDashed: true }))];\n ","import React from 'react';\nimport { GithubPicker } from 'react-color'\nimport { strokeOptions } from './constants';\n\nimport IconArrow from './img/arrow@2x.png';\nimport IconLine from './img/line@2x.png';\nimport IconRect from './img/rectangle@2x.png';\nimport IconEllipse from './img/ellipse@2x.png';\n\nexport default class SecondaryToolBar extends React.Component {\n\n colors = ['#000', '#B80000', '#DB3E00', '#FCCB00', '#008B02', '#006B76', '#1273DE', '#004DCF', '#5300EB',\n '#EB9694', '#FAD0C3', '#FEF3BD', '#C1E1C5', '#BEDADC', '#C4DEF6', '#BED3F3', '#D4C4FB'];\n\n renderColorSelection = () => {\n const additionalColors = this.props.colorType === 'secondary' ? ['transparent'] : [];\n return \n {\n this.props.onItemSelect({\n type: 'set-brush',\n value: opt.value,\n isDashed: false\n })\n }}\n >\n \n \n {\n this.props.onItemSelect({\n type: 'set-brush',\n value: opt.value,\n isDashed: true\n })\n }}\n >\n \n \n
\n ));\n return (\n {opt.name}
\n {content}
\n );\n }\n\n renderShapeSelection = () => {\n return (\n \n {\n this.props.onItemSelect({\n type: 'set-shape',\n value: 'Arrow',\n })\n }}\n >\n 
\n \n {\n this.props.onItemSelect({\n type: 'set-shape',\n value: 'Line',\n })\n }}\n >\n 
\n \n {\n this.props.onItemSelect({\n type: 'set-shape',\n value: 'Rectangle',\n })\n }}\n >\n 
\n \n {\n this.props.onItemSelect({\n type: 'set-shape',\n value: 'Ellipse',\n })\n }}\n >\n 
\n \n
\n )\n }\n\n // TODO: refactor.\n render() {\n const { selected } = this.props;\n if (!selected) {\n return null;\n } else if (selected === 'color-picker') {\n return this.renderColorSelection();\n } else if (selected === 'brush-picker') {\n return this.renderBrushSelection();\n } else if (selected === 'shape-picker') {\n return this.renderShapeSelection();\n }\n return (\n\n
);\n }\n}\n","\nexport default class JPencil extends window.LC.toolsBase.ToolWithStroke {\n begin(x, y, lc) {\n this.color = lc.getColor(\"primary\");\n this.currentShape = this.makeShape();\n this.currentShape.addPoint(this.makePoint(x, y, lc));\n this.lastEventTime = Date.now();\n }\n\n continue(x, y, lc) {\n const timeDiff = Date.now() - this.lastEventTime;\n\n if (timeDiff > this.eventTimeThreshold) {\n this.lastEventTime += timeDiff;\n this.currentShape.addPoint(this.makePoint(x, y, lc));\n lc.drawShapeInProgress(this.currentShape);\n }\n }\n\n end(x, y, lc) {\n lc.saveShape(this.currentShape);\n this.currentShape = undefined;\n }\n\n makePoint(x, y, lc) {\n return window.LC.shapes.createShape(\"Point\", {\n x,\n y,\n size: lc.getStrokeWidth(),\n color: this.color,\n });\n }\n\n makeShape() {\n return window.LC.shapes.createShape(\"LinePath\");\n }\n didBecomeActive() {\n\n }\n unsubscribe() {\n \n }\n}\n\nJPencil.prototype.name = \"JPencil\";\nJPencil.prototype.iconName = \"pencil\";\nJPencil.prototype.eventTimeThreshold = 10;\n\n","import Pencil from \"./Pencil\";\nimport {createShape} from \"../literally_canvas/shapes\";\n\nclass Eraser extends Pencil {\n makePoint(x, y, lc) {\n return createShape(\"Point\", {\n x,\n y,\n size: this.strokeWidth,\n color: this.color,\n });\n }\n makeShape() {\n return createShape(\"ErasedLinePath\");\n }\n}\n\nEraser.prototype.name = \"JEraser\";\nEraser.prototype.iconName = \"eraser\";\nEraser.prototype.eventTimeThreshold = 10;\n\nexport default Eraser;\n","// just for adding dash feature.\nexport default () => {\n const { defineShape, createShape } = window.LC.shapes;\n defineShape(\"Rectangle\", {\n constructor(args) {\n if (args == null) {\n args = {};\n }\n this.x = args.x || 0;\n this.y = args.y || 0;\n this.width = args.width || 0;\n this.height = args.height || 0;\n this.strokeWidth = args.strokeWidth || 1;\n this.strokeColor = args.strokeColor || \"black\";\n this.dash = args.dash;\n this.fillColor = args.fillColor || \"transparent\";\n },\n\n getBoundingRect() {\n return {\n x: this.x - this.strokeWidth / 2,\n y: this.y - this.strokeWidth / 2,\n width: this.width + this.strokeWidth,\n height: this.height + this.strokeWidth,\n };\n },\n toJSON() {\n return {\n x: this.x,\n y: this.y,\n width: this.width,\n height: this.height,\n strokeWidth: this.strokeWidth,\n strokeColor: this.strokeColor,\n fillColor: this.fillColor,\n };\n },\n fromJSON(data) {\n return createShape(\"Rectangle\", data);\n },\n move(moveInfo) {\n if (moveInfo == null) {\n moveInfo = {};\n }\n this.x = this.x - moveInfo.xDiff;\n this.y = this.y - moveInfo.yDiff;\n },\n setUpperLeft(upperLeft) {\n if (upperLeft == null) {\n upperLeft = {};\n }\n this.x = upperLeft.x;\n this.y = upperLeft.y;\n },\n });\n\n // this is pretty similar to the Rectangle shape. maybe consolidate somehow.\n defineShape(\"Ellipse\", {\n constructor(args) {\n if (args == null) {\n args = {};\n }\n this.x = args.x || 0;\n this.y = args.y || 0;\n this.width = args.width || 0;\n this.height = args.height || 0;\n this.strokeWidth = args.strokeWidth || 1;\n this.strokeColor = args.strokeColor || \"black\";\n this.dash = args.dash;\n this.fillColor = args.fillColor || \"transparent\";\n },\n\n getBoundingRect() {\n return {\n x: this.x - this.strokeWidth / 2,\n y: this.y - this.strokeWidth / 2,\n width: this.width + this.strokeWidth,\n height: this.height + this.strokeWidth,\n };\n },\n toJSON() {\n return {\n x: this.x,\n y: this.y,\n width: this.width,\n height: this.height,\n strokeWidth: this.strokeWidth,\n strokeColor: this.strokeColor,\n fillColor: this.fillColor,\n };\n },\n fromJSON(data) {\n return createShape(\"Ellipse\", data);\n },\n move(moveInfo) {\n if (moveInfo == null) {\n moveInfo = {};\n }\n this.x = this.x - moveInfo.xDiff;\n this.y = this.y - moveInfo.yDiff;\n },\n setUpperLeft(upperLeft) {\n if (upperLeft == null) {\n upperLeft = {};\n }\n this.x = upperLeft.x;\n this.y = upperLeft.y;\n },\n });\n\n defineShape(\"Line\", {\n constructor(args) {\n if (args == null) {\n args = {};\n }\n this.x1 = args.x1 || 0;\n this.y1 = args.y1 || 0;\n this.x2 = args.x2 || 0;\n this.y2 = args.y2 || 0;\n this.strokeWidth = args.strokeWidth || 1;\n this.color = args.color || \"black\";\n this.capStyle = args.capStyle || \"round\";\n this.endCapShapes = args.endCapShapes || [null, null];\n this.dash = args.dash || null;\n },\n\n getBoundingRect() {\n return {\n x: Math.min(this.x1, this.x2) - this.strokeWidth / 2,\n y: Math.min(this.y1, this.y2) - this.strokeWidth / 2,\n width: Math.abs(this.x2 - this.x1) + this.strokeWidth / 2,\n height: Math.abs(this.y2 - this.y1) + this.strokeWidth / 2,\n };\n },\n toJSON() {\n return {\n x1: this.x1,\n y1: this.y1,\n x2: this.x2,\n y2: this.y2,\n strokeWidth: this.strokeWidth,\n color: this.color,\n capStyle: this.capStyle,\n dash: this.dash,\n endCapShapes: this.endCapShapes,\n };\n },\n fromJSON(data) {\n return createShape(\"Line\", data);\n },\n move(moveInfo) {\n if (moveInfo == null) {\n moveInfo = {};\n }\n this.x1 = this.x1 - moveInfo.xDiff;\n this.y1 = this.y1 - moveInfo.yDiff;\n this.x2 = this.x2 - moveInfo.xDiff;\n this.y2 = this.y2 - moveInfo.yDiff;\n },\n setUpperLeft(upperLeft) {\n if (upperLeft == null) {\n upperLeft = {};\n }\n const br = this.getBoundingRect();\n const xDiff = br.x - upperLeft.x;\n const yDiff = br.y - upperLeft.y;\n this.move({xDiff, yDiff});\n },\n });\n\n const defineCanvasRenderer = window.LC.canvasRenderer.defineCanvasRenderer;\n defineCanvasRenderer(\"Rectangle\", function(ctx, shape) {\n let {x} = shape;\n let {y} = shape;\n if (shape.strokeWidth % 2 !== 0) {\n x += 0.5;\n y += 0.5;\n }\n \n ctx.fillStyle = shape.fillColor;\n ctx.fillRect(x, y, shape.width, shape.height);\n ctx.lineWidth = shape.strokeWidth;\n ctx.strokeStyle = shape.strokeColor;\n if (shape.dash) {\n ctx.setLineDash(shape.dash);\n }\n ctx.strokeRect(x, y, shape.width, shape.height);\n });\n \n defineCanvasRenderer(\"Ellipse\", function(ctx, shape) {\n ctx.save();\n const halfWidth = Math.floor(shape.width / 2);\n const halfHeight = Math.floor(shape.height / 2);\n const centerX = shape.x + halfWidth;\n const centerY = shape.y + halfHeight;\n \n ctx.translate(centerX, centerY);\n ctx.scale(1, Math.abs(shape.height / shape.width));\n ctx.beginPath();\n ctx.arc(0, 0, Math.abs(halfWidth), 0, Math.PI * 2);\n ctx.closePath();\n ctx.restore();\n \n ctx.fillStyle = shape.fillColor;\n if (shape.dash) {\n ctx.setLineDash(shape.dash);\n }\n ctx.fill();\n ctx.lineWidth = shape.strokeWidth;\n ctx.strokeStyle = shape.strokeColor;\n ctx.stroke();\n });\n\n \n\n}\n","\nexport default class JRectangle extends window.LC.toolsBase.ToolWithStroke {\n begin(x, y, lc) {\n return this.currentShape = window.LC.shapes.createShape('Rectangle', {\n x, y,\n strokeWidth: lc.getStrokeWidth(),\n dash: (function() {\n if( lc.isDashed())\n {\n return [lc.getStrokeWidth() * 2, lc.getStrokeWidth() * 4];\n }\n return null;\n }\n ).call(this),\n strokeColor: lc.getColor('primary'),\n fillColor: lc.getColor('secondary')});\n }\n \n continue(x, y, lc) {\n this.currentShape.width = x - this.currentShape.x;\n this.currentShape.height = y - this.currentShape.y;\n return lc.drawShapeInProgress(this.currentShape);\n }\n \n end(x, y, lc) {\n // If there is no height or width, dont save\n if ((this.currentShape.height === 0) || (this.currentShape.width === 0)) {\n return;\n }\n return lc.saveShape(this.currentShape);\n }\n didBecomeActive() {\n\n }\n unsubscribe() {\n \n }\n}\n\nJRectangle.prototype.name = \"JRectangle\";\nJRectangle.prototype.iconName = \"rectangle\";\nJRectangle.prototype.eventTimeThreshold = 10;\n\n","\nexport default class JEllipse extends window.LC.toolsBase.ToolWithStroke {\n begin(x, y, lc) {\n return this.currentShape = window.LC.shapes.createShape('Ellipse', {\n x: x,\n y: y,\n dash: (function() {\n switch (false) {\n case !lc.isDashed():\n return [lc.getStrokeWidth() * 2, lc.getStrokeWidth() * 4];\n default:\n return null;\n }\n }).call(this),\n strokeWidth: lc.getStrokeWidth(),\n strokeColor: lc.getColor('primary'),\n fillColor: lc.getColor('secondary')\n });\n }\n \n continue(x, y, lc) {\n this.currentShape.width = x - this.currentShape.x;\n this.currentShape.height = y - this.currentShape.y;\n return lc.drawShapeInProgress(this.currentShape);\n }\n \n end(x, y, lc) {\n return lc.saveShape(this.currentShape);\n }\n didBecomeActive() {\n\n }\n unsubscribe() {\n \n }\n}\n\nJEllipse.prototype.name = \"JEllipse\";\nJEllipse.prototype.iconName = \"ellipse\";\nJEllipse.prototype.eventTimeThreshold = 10;\n\n","\nexport default class JArrow extends window.LC.toolsBase.ToolWithStroke {\n begin(x, y, lc) {\n return this.currentShape = window.LC.shapes.createShape('Line', {\n x1: x,\n y1: y,\n x2: x,\n y2: y,\n strokeWidth: lc.getStrokeWidth(),\n dash: (function() {\n switch (false) {\n case !lc.isDashed():\n return [lc.getStrokeWidth() * 2, lc.getStrokeWidth() * 4];\n default:\n return null;\n }\n }).call(this),\n endCapShapes: [null, 'arrow'],\n color: lc.getColor('primary')\n });\n }\n\n continue(x, y, lc) {\n this.currentShape.x2 = x;\n this.currentShape.y2 = y;\n return lc.drawShapeInProgress(this.currentShape);\n }\n\n end(x, y, lc) {\n lc.saveShape(this.currentShape);\n this.currentShape = undefined;\n }\n\n didBecomeActive() {\n\n }\n unsubscribe() {\n \n }\n}\n\nJArrow.prototype.name = \"JArrow\";\nJArrow.prototype.iconName = \"arrow\";\nJArrow.prototype.eventTimeThreshold = 10;\n\n","\nexport default class JLine extends window.LC.toolsBase.ToolWithStroke {\n begin(x, y, lc) {\n return this.currentShape = window.LC.shapes.createShape('Line', {\n x1: x,\n y1: y,\n x2: x,\n y2: y,\n strokeWidth: lc.getStrokeWidth(),\n dash: (function() {\n switch (false) {\n case !lc.isDashed():\n return [lc.getStrokeWidth() * 2, lc.getStrokeWidth() * 4];\n default:\n return null;\n }\n }).call(this),\n endCapShapes: this.hasEndArrow ? [null, 'arrow'] : null,\n color: lc.getColor('primary')\n });\n }\n\n continue(x, y, lc) {\n this.currentShape.x2 = x;\n this.currentShape.y2 = y;\n return lc.drawShapeInProgress(this.currentShape);\n }\n\n end(x, y, lc) {\n lc.saveShape(this.currentShape);\n this.currentShape = undefined;\n }\n\n didBecomeActive() {\n\n }\n unsubscribe() {\n \n }\n}\n\nJLine.prototype.name = \"JLine\";\nJLine.prototype.iconName = \"line\";\nJLine.prototype.eventTimeThreshold = 10;\n\n","/*\n * decaffeinate suggestions:\n * DS001: Remove Babel/TypeScript constructor workaround\n * DS102: Remove unnecessary code created because of implicit returns\n * DS206: Consider reworking classes to avoid initClass\n * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md\n */\nlet Text;\n\nconst getIsPointInBox = function(point, box) {\n if (point.x < box.x) { return false; }\n if (point.y < box.y) { return false; }\n if (point.x > (box.x + box.width)) { return false; }\n if (point.y > (box.y + box.height)) { return false; }\n return true;\n};\n\n\nexport default (Text = (function() {\n Text = class Text extends window.LC.toolsBase.Tool { \n static initClass() {\n \n this.prototype.name = 'Text';\n this.prototype.iconName = 'text';\n \n this.prototype.optionsStyle = 'font';\n }\n\n constructor(props) {\n super(props);\n this.text = '';\n this.font = 'bold 18px sans-serif';\n this.currentShape = null;\n this.currentShapeState = null;\n this.initialShapeBoundingRect = null;\n this.dragAction = null;\n this.didDrag = false;\n }\n\n didBecomeActive(lc) {\n const unsubscribeFuncs = [];\n this.unsubscribe = () => {\n return unsubscribeFuncs.map((func) =>\n func());\n };\n\n const switchAway = () => {\n this._ensureNotEditing(lc);\n this._clearCurrentShape(lc);\n return lc.repaintLayer('main');\n };\n\n const updateInputEl = () => this._updateInputEl(lc);\n\n unsubscribeFuncs.push(lc.on('drawingChange', switchAway));\n unsubscribeFuncs.push(lc.on('zoom', updateInputEl));\n unsubscribeFuncs.push(lc.on('imageSizeChange', updateInputEl));\n unsubscribeFuncs.push(lc.on('snapshotLoad', () => {\n this._clearCurrentShape(lc);\n return lc.repaintLayer('main');\n })\n );\n\n unsubscribeFuncs.push(lc.on('primaryColorChange', newColor => {\n if (!this.currentShape) { return; }\n this.currentShape.color = newColor;\n this._updateInputEl(lc);\n return lc.repaintLayer('main');\n })\n );\n\n return unsubscribeFuncs.push(lc.on('setFont', font => {\n if (!this.currentShape) { return; }\n this.font = font;\n this.currentShape.setFont(font);\n this._setShapesInProgress(lc);\n this._updateInputEl(lc);\n return lc.repaintLayer('main');\n })\n );\n }\n\n willBecomeInactive(lc) {\n if (this.currentShape) {\n this._ensureNotEditing(lc);\n this.commit(lc);\n }\n return this.unsubscribe();\n }\n\n setText(text) {\n return this.text = text;\n }\n\n _ensureNotEditing(lc) {\n if (this.currentShapeState === 'editing') {\n return this._exitEditingState(lc);\n }\n }\n\n _clearCurrentShape(lc) {\n this.currentShape = null;\n this.initialShapeBoundingRect = null;\n this.currentShapeState = null;\n return lc.setShapesInProgress([]);\n }\n\n commit(lc) {\n if (this.currentShape.text) { lc.saveShape(this.currentShape); }\n this._clearCurrentShape(lc);\n return lc.repaintLayer('main');\n }\n\n _getSelectionShape(ctx, backgroundColor=null) {\n return window.LC.shapes.createShape('SelectionBox', {shape: this.currentShape, ctx, backgroundColor});\n }\n\n _setShapesInProgress(lc) {\n switch (this.currentShapeState) {\n case 'selected':\n return lc.setShapesInProgress([this._getSelectionShape(lc.ctx), this.currentShape]);\n case 'editing':\n return lc.setShapesInProgress([this._getSelectionShape(lc.ctx, '#fff')]);\n default:\n return lc.setShapesInProgress([this.currentShape]);\n }\n }\n\n begin(x, y, lc) {\n this.dragAction = 'none';\n this.didDrag = false;\n\n if ((this.currentShapeState === 'selected') || (this.currentShapeState === 'editing')) {\n const br = this.currentShape.getBoundingRect(lc.ctx);\n const selectionShape = this._getSelectionShape(lc.ctx);\n const selectionBox = selectionShape.getBoundingRect();\n const point = {x, y};\n if (getIsPointInBox(point, br)) {\n this.dragAction = 'move';\n }\n if (getIsPointInBox(point, selectionShape.getBottomRightHandleRect())) {\n this.dragAction = 'resizeBottomRight';\n }\n if (getIsPointInBox(point, selectionShape.getTopLeftHandleRect())) {\n this.dragAction = 'resizeTopLeft';\n }\n if (getIsPointInBox(point, selectionShape.getBottomLeftHandleRect())) {\n this.dragAction = 'resizeBottomLeft';\n }\n if (getIsPointInBox(point, selectionShape.getTopRightHandleRect())) {\n this.dragAction = 'resizeTopRight';\n }\n\n if ((this.dragAction === 'none') && (this.currentShapeState === 'editing')) {\n this.dragAction = 'stop-editing';\n this._exitEditingState(lc);\n this.commit(lc);\n }\n } else {\n this.color = lc.getColor('primary');\n this.currentShape = window.LC.shapes.createShape('Text', {x, y, text: this.text, color: this.color, font: this.font, v: 1});\n this.dragAction = 'place';\n this.currentShapeState = 'selected';\n }\n\n if (this.dragAction === 'none') {\n this.commit(lc);\n return;\n }\n\n this.initialShapeBoundingRect = this.currentShape.getBoundingRect(lc.ctx);\n this.dragOffset = {\n x: x - this.initialShapeBoundingRect.x,\n y: y - this.initialShapeBoundingRect.y\n };\n\n this._setShapesInProgress(lc);\n return lc.repaintLayer('main');\n }\n\n continue(x, y, lc) {\n if (this.dragAction === 'none') {\n return;\n }\n\n const br = this.initialShapeBoundingRect;\n const brRight = br.x + br.width;\n const brBottom = br.y + br.height;\n switch (this.dragAction) {\n case 'place':\n this.currentShape.x = x;\n this.currentShape.y = y;\n this.didDrag = true;\n break;\n case 'move':\n this.currentShape.x = x - this.dragOffset.x;\n this.currentShape.y = y - this.dragOffset.y;\n this.didDrag = true;\n break;\n case 'resizeBottomRight':\n this.currentShape.setSize(\n x - (this.dragOffset.x - this.initialShapeBoundingRect.width) - br.x,\n y - (this.dragOffset.y - this.initialShapeBoundingRect.height) - br.y);\n break;\n case 'resizeTopLeft':\n this.currentShape.setSize(\n (brRight - x) + this.dragOffset.x,\n (brBottom - y) + this.dragOffset.y);\n this.currentShape.setPosition(x - this.dragOffset.x, y - this.dragOffset.y);\n break;\n case 'resizeBottomLeft':\n this.currentShape.setSize(\n (brRight - x) + this.dragOffset.x,\n y - (this.dragOffset.y - this.initialShapeBoundingRect.height) - br.y);\n this.currentShape.setPosition(x - this.dragOffset.x, this.currentShape.y);\n break;\n case 'resizeTopRight':\n this.currentShape.setSize(\n x - (this.dragOffset.x - this.initialShapeBoundingRect.width) - br.x,\n (brBottom - y) + this.dragOffset.y);\n this.currentShape.setPosition(this.currentShape.x, y - this.dragOffset.y);\n break;\n }\n\n this._setShapesInProgress(lc);\n lc.repaintLayer('main');\n\n return this._updateInputEl(lc);\n }\n\n end(x, y, lc) {\n if (!this.currentShape) { return; } // we may have committed at start time\n\n // use auto height once user lets go of selection corner\n this.currentShape.setSize(this.currentShape.forcedWidth, 0);\n\n if (this.currentShapeState === 'selected') {\n if ((this.dragAction === 'place') || ((this.dragAction === 'move') && !this.didDrag)) {\n this._enterEditingState(lc);\n }\n }\n\n this._setShapesInProgress(lc);\n lc.repaintLayer('main');\n return this._updateInputEl(lc);\n }\n\n _enterEditingState(lc) {\n this.currentShapeState = 'editing';\n\n if (this.inputEl) { throw \"State error\"; }\n\n this.inputEl = document.createElement('textarea');\n this.inputEl.className = 'text-tool-input';\n this.inputEl.style.position = 'absolute';\n this.inputEl.style.transformOrigin = '0px 0px';\n this.inputEl.style.backgroundColor = 'transparent';\n this.inputEl.style.border = 'none';\n this.inputEl.style.outline = 'none';\n this.inputEl.style.margin = '0';\n this.inputEl.style.padding = '4px';\n this.inputEl.style.zIndex = '1000';\n this.inputEl.style.overflow = 'hidden';\n this.inputEl.style.resize = 'none';\n\n this.inputEl.value = this.currentShape.text;\n\n this.inputEl.addEventListener('mousedown', e => e.stopPropagation());\n this.inputEl.addEventListener('touchstart', e => e.stopPropagation());\n\n const onChange = e => {\n this.currentShape.setText(e.target.value);\n this.currentShape.enforceMaxBoundingRect(lc);\n this._setShapesInProgress(lc);\n lc.repaintLayer('main');\n this._updateInputEl(lc);\n return e.stopPropagation();\n };\n\n this.inputEl.addEventListener('keydown', () => this._updateInputEl(lc, true));\n this.inputEl.addEventListener('keyup', onChange);\n this.inputEl.addEventListener('change', onChange);\n\n this._updateInputEl(lc);\n\n lc.containerEl.appendChild(this.inputEl);\n this.inputEl.focus();\n\n return this._setShapesInProgress(lc);\n }\n\n _exitEditingState(lc) {\n this.currentShapeState = 'selected';\n lc.containerEl.removeChild(this.inputEl);\n this.inputEl = null;\n\n this._setShapesInProgress(lc);\n return lc.repaintLayer('main');\n }\n\n _updateInputEl(lc, withMargin=false) {\n if (!this.inputEl) { return; }\n const br = this.currentShape.getBoundingRect(lc.ctx, true);\n this.inputEl.style.font = this.currentShape.font;\n this.inputEl.style.color = this.currentShape.color;\n this.inputEl.style.left =\n `${((lc.position.x / lc.backingScale) + (br.x * lc.scale)) - 4}px`;\n this.inputEl.style.top =\n `${((lc.position.y / lc.backingScale) + (br.y * lc.scale)) - 4}px`;\n\n if (withMargin && !this.currentShape.forcedWidth) {\n this.inputEl.style.width =\n `${br.width + 10 + this.currentShape.renderer.emDashWidth}px`;\n } else {\n this.inputEl.style.width = `${br.width + 12}px`;\n }\n\n if (withMargin) {\n this.inputEl.style.height =\n `${br.height + 10 + this.currentShape.renderer.metrics.leading}px`;\n } else {\n this.inputEl.style.height = `${br.height + 10}px`;\n }\n\n const transformString = `scale(${lc.scale})`;\n this.inputEl.style.transform = transformString;\n this.inputEl.style.webkitTransform= transformString;\n this.inputEl.style.MozTransform= transformString;\n this.inputEl.style.msTransform= transformString;\n return this.inputEl.style.OTransform= transformString;\n }\n };\n Text.initClass();\n return Text;\n})());\n","import React from 'react';\nimport loadImage from 'blueimp-load-image';\nimport './literally_canvas'\nimport CanvasContainer from './CanvasContainer';\nimport './App.css';\nimport PrimaryToolBar from './PrimaryToolBar';\nimport SecondaryToolBar from './SecondaryToolBar';\nimport JPencil from './CanvasTools/Pencil';\nimport JEraser from './CanvasTools/Eraser';\nimport initializeCanvasRenderers from './initializeCanvasRenderers';\nimport JRectangle from './CanvasTools/Rectangle';\nimport JEllipse from './CanvasTools/Ellipse';\nimport JArrow from './CanvasTools/Arrow';\nimport JLine from './CanvasTools/Line';\nimport Text from './CanvasTools/Text';\n\nclass App extends React.Component {\n state = {\n selected: false,\n penColor: '#000',\n fillColor: 'transparent',\n brushSize: 5,\n selectedShape: 'Pencil',\n hideUpload: false,\n newUpload: false,\n formData: {},\n valid: false\n };\n\n availableShapes = [\n { name: 'Pencil', fn: JPencil },\n { name: 'Eraser', fn: JEraser },\n { name: 'Ellipse', fn: JEllipse },\n { name: 'Rectangle', fn: JRectangle },\n { name: 'Arrow', fn: JArrow },\n { name: 'Line', fn: JLine },\n { name: 'Text', fn: Text },\n ];\n\n componentDidMount() {\n this.LC = new window.LC.LiterallyCanvas(\n this.canvasFrameDOM,\n {\n ...window.LC.LiterallyCanvas.defaultOptions,\n tools: this.availableShapes.map(a => a.fn),\n unsubscribe: () => {}\n }\n );\n window.ourLC = this.LC;\n\n // Inject dash logic.\n this.LC.isDashed = () => {\n return this.state.isDashed;\n }\n this.LC.getStrokeWidth = () => this.state.brushSize;\n initializeCanvasRenderers();\n this.LC.setColor('secondary', 'transparent');\n this.subscribeToWidget();\n window.addEventListener('resize', this.onDocumentResize);\n }\n\n backgroundSizes = {\n width: 300,\n height: 300\n };\n\n buttonsAndMargins = 151;\n\n onDocumentResize = () => {\n // TODO: // do it.\n const width = window.getComputedStyle(document.body).width;\n const widthNumber = parseInt(width.replace('px', ''));\n const minHeight = 300;\n const minWidth = 300;\n const ratio = this.backgroundSizes.width / this.backgroundSizes.height;\n\n }\n\n setInitialSizes = () => {\n const { width, height } = window.document.body.getBoundingClientRect();\n const expectedHeight = height - this.buttonsAndMargins;\n this.canvasContainerDOM.style.height = `${expectedHeight }px`;\n this.canvasContainerDOM.style.width = `${width}px`;\n this.canvasFrameDOM.style.height = `${expectedHeight}px`;\n this.canvasFrameDOM.style.width = `${width}px`;\n\n this.LC.setImageSize(width, expectedHeight);\n this.LC.repaintLayer('background');\n this.LC.respondToSizeChange();\n }\n\n addListenerMulti = (element, eventNames, listener) => {\n var events = eventNames.split(' ');\n for (var i = 0, iLen = events.length; i < iLen; i++) {\n element.addEventListener(events[i], listener, false);\n }\n }\n\n subscribeToWidget = () => {\n const JFCustomWidget = window.JFCustomWidget;\n JFCustomWidget.subscribe('ready', (formData) => {\n this.setState({ formData });\n const { onlyBlankCanvas, uploadImage } = JFCustomWidget.getWidgetSettings();\n let imageSrc = '';\n this.setInitialSizes();\n const exportScale = this.canvasScale >= 1 ? this.canvasScale : 1 / this.canvasScale;\n\n // on canvas change send data to JotForm\n let canvasFrame = document.getElementById('canvas_frame');\n this.addListenerMulti(canvasFrame, 'mouseup touchend keyup', () => {\n setTimeout(() => {\n JFCustomWidget.sendData({\n valid: true,\n value: window.ourLC.getImage({ scale: exportScale }).toDataURL()\n });\n // update the state if not valid\n if (!this.state.valid) {\n JFCustomWidget.hideWidgetError();\n this.setState({\n valid: true\n });\n } \n }, 10);\n });\n\n // trigger mouseup on mouseleave #4888506\n canvasFrame.addEventListener('mouseleave', () => {\n const mouseUpEvent = document.createEvent('MouseEvent');\n mouseUpEvent.initMouseEvent('mouseup', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);\n canvasFrame.dispatchEvent(mouseUpEvent);\n });\n\n // set initial sizes again on cards if there is an issue with the load\n JFCustomWidget.subscribe('show', () => {\n if (parseInt(this.canvasContainerDOM.style.width) < 25) {\n this.setInitialSizes();\n }\n });\n\n // edit mode\n if (formData && formData.value) {\n JFCustomWidget.sendDisableOrEnableButtons({\n type: 'disableButtons'\n });\n imageSrc = window.JFCustomWidgetUtils.getFormDomain() + formData.value + '?' + new Date().getTime();\n\n if (onlyBlankCanvas == 'true') {\n this.setState({\n hideUpload: true\n });\n }\n // check enterprise\n if (formData.enterprise) {\n imageSrc = 'https://' + formData.enterprise + '/' + formData.value;\n }\n // check src for save and continue mode\n if(/^(?:data:image)/.test(formData.value)) {\n imageSrc = formData.value;\n }\n this.setLCBackgroundFromURL(imageSrc);\n } else {\n if (onlyBlankCanvas == 'true') {\n this.setState({\n hideUpload: true\n });\n } else if (uploadImage && uploadImage.base) {\n JFCustomWidget.sendDisableOrEnableButtons({\n type: 'disableButtons'\n });\n imageSrc = `https://${uploadImage.url}/uploads/${uploadImage.owner}/form_files/${uploadImage.base}`;\n if (uploadImage.url === 'www.jotform.com') {\n imageSrc = `https://files.jotform.com/jufs/${uploadImage.owner}/form_files/${uploadImage.base}`;\n }\n if(window.location.href.indexOf('offline_forms=true') !== -1) {\n try {\n const src = window.location.href; // Offline file path\n const arr = src.split('/'); // For remove last path item like .../index.html\n const split =`/${arr[arr.length-1]}`;\n imageSrc = `${src.replace(split, '')}/${uploadImage.url === 'www.jotform.com' ? 'jufs' : 'uploads'}/${uploadImage.owner}/form_files/${uploadImage.base}`;\n }catch (e){\n console.log(\"Offline Path Error\")\n }\n }\n this.setLCBackgroundFromURL(imageSrc);\n }\n }\n\n // resize frame\n JFCustomWidget.requestFrameResize({\n height: document.body.offsetHeight + 10\n });\n\n JFCustomWidget.subscribe('submit', () => {\n var valid = this.state.valid;\n if (formData && formData.value) {\n valid = true;\n }\n\n this.LC.tools.forEach(tool => {\n if(tool?.currentShapeState === 'editing'){\n //before submit commit waiting changes (for Text)\n tool.commit(this.LC);\n }\n });\n \n // send value to JotForm\n JFCustomWidget.sendSubmit({\n valid: valid,\n value: valid ? this.LC.getImage({ scale: exportScale }).toDataURL() : ''\n });\n });\n });\n }\n\n showPenColorPicker = () => {\n this.setState({ selected: 'color-picker', colorType: 'primary' });\n }\n\n showfillColorPicker = () => {\n this.setState({ selected: 'color-picker', colorType: 'secondary' });\n }\n\n showBrushPicker = () => {\n this.setState({ selected: 'brush-picker' });\n }\n\n showShapePicker = () => {\n this.setState({ selected: 'shape-picker' });\n }\n\n get canvasContainerDOM() {\n return document.getElementById('canvas_container');\n }\n\n get canvasFrameDOM () {\n return document.getElementById('canvas_frame');\n }\n\n get documentWidth() {\n const width = window.getComputedStyle(document.body).width;\n const widthNumber = parseInt(width.replace('px', ''));\n return widthNumber;\n }\n\n canvasScale = 1;\n\n setLCBackgroundFromImage = (img) => {\n // watermark\n // this.LC.setWatermarkImage(img);\n // or bg\n // img.width = expectedWidth;\n const optWidth = (this.state.formData.viewWidth && this.state.formData.width > this.state.formData.viewWidth) ? this.state.formData.viewWidth : this.state.formData.width;\n const expectedWidth = optWidth > img.width ? img.width > 255 ? img.width : 255 : optWidth;\n const canvasScale = 1 / (img.width / expectedWidth);\n const expectedHeight = img.height * canvasScale;\n this.canvasScale = canvasScale;\n // const expectedHeight = expectedWidth === img.width ? img.height : (this.documentWidth * img.height) / img.width;\n\n this.canvasContainerDOM.style.height = `${expectedHeight}px`;\n this.canvasContainerDOM.style.width = `${expectedWidth}px`;\n this.canvasFrameDOM.style.height = expectedHeight - 2 + 'px';\n this.canvasFrameDOM.style.width = expectedWidth - 2 + 'px';\n window.JFCustomWidget.requestFrameResize({ width: expectedWidth, height: expectedHeight + this.buttonsAndMargins + 25 });\n const backgroundShape = window.LC.shapes.createShape(\n 'Image', { x: 0, y: 0, image: img, scale: canvasScale });\n this.LC.setImageSize(expectedWidth, expectedHeight);\n this.LC.backgroundShapes = [backgroundShape];\n this.LC.repaintLayer('background');\n this.LC.respondToSizeChange();\n window.JFCustomWidget.sendDisableOrEnableButtons({\n type: 'enableButtons'\n });\n }\n\n\n setLCBackgroundFromURL = (imgSrc, addCors = true) => {\n const img = document.createElement('img');\n if (addCors) {\n img.crossOrigin = 'crossorigin';\n } else {\n img.crossOrigin = 'use-credentials';\n }\n img.addEventListener('load', () => {\n this.setLCBackgroundFromImage(img);\n });\n img.addEventListener('error', () => {\n if (addCors) { // Second try for enterprise servers\n this.setLCBackgroundFromURL(imgSrc, false);\n } else {\n window.JFCustomWidget.sendDisableOrEnableButtons({\n type: 'enableButtons'\n });\n }\n });\n img.src = imgSrc;\n }\n\n handlePhoto = (event) => {\n const hasFile = event.target.files.length > 0;\n if (hasFile) {\n const firstFile = event.target.files[0];\n const exportScale = this.canvasScale >= 1 ? this.canvasScale : 1 / this.canvasScale;\n if (!firstFile.type.indexOf('image') === -1) {\n alert('Only images');\n return;\n }\n // set bg\n const image = loadImage(firstFile, (img, details) => {\n this.setLCBackgroundFromImage(img);\n }, {\n orientation: false,\n canvas: false\n });\n this.setState({\n newUpload: true,\n valid: true\n });\n window.JFCustomWidget.sendData({\n valid: true,\n value: window.ourLC.getImage({ scale: exportScale }).toDataURL()\n });\n window.JFCustomWidget.hideWidgetError();\n }\n }\n\n handleClear = () => {\n this.LC.clear();\n // also reset widget data if no newUpload\n if (!this.state.newUpload) {\n window.JFCustomWidget.sendData({\n value: ''\n });\n this.setState({\n valid: false\n }); \n }\n }\n\n handleUndo = () => {\n this.LC.undo();\n }\n\n handleRedo = () => {\n this.LC.redo();\n }\n\n handleSecondaryToolbarSelect = (opts) => {\n const { type, value } = opts;\n if (type === 'set-color') {\n const key = this.state.colorType === 'primary' ? 'penColor' : 'fillColor'\n this.setState({\n [key]: value\n });\n this.LC.setColor(this.state.colorType, value);\n } else if (type === 'set-brush') {\n this.setState({\n isDashed: opts.isDashed,\n brushSize: value\n });\n } else if (type === 'set-shape') {\n this.setState({\n selectedShape: value\n });\n const toolIndex = this.availableShapes.findIndex(t => t.name === value);\n this.LC.setTool(new this.LC.opts.tools[toolIndex](this.LC));\n }\n this.setState({ selected: null });\n }\n\n handlePenSelection = () => {\n this.handleSecondaryToolbarSelect({ type: 'set-shape', value: 'Pencil' });\n }\n\n handleEraseSelection = () => {\n this.handleSecondaryToolbarSelect({ type: 'set-shape', value: 'Eraser' });\n }\n\n handleTextSelection = () => {\n this.handleSecondaryToolbarSelect({ type: 'set-shape', value: 'Text' });\n }\n\n render() {\n return (\n \n \n
\n )\n }\n}\n\nexport default App;\n","// This optional code is used to register a service worker.\n// register() is not called by default.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on subsequent visits to a page, after all the\n// existing tabs open on the page have been closed, since previously cached\n// resources are updated in the background.\n\n// To learn more about the benefits of this model and instructions on how to\n// opt-in, read https://bit.ly/CRA-PWA\n\nconst isLocalhost = Boolean(\n window.location.hostname === 'localhost' ||\n // [::1] is the IPv6 localhost address.\n window.location.hostname === '[::1]' ||\n // 127.0.0.1/8 is considered localhost for IPv4.\n window.location.hostname.match(\n /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n )\n);\n\nexport function register(config) {\n if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\n // The URL constructor is available in all browsers that support SW.\n const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);\n if (publicUrl.origin !== window.location.origin) {\n // Our service worker won't work if PUBLIC_URL is on a different origin\n // from what our page is served on. This might happen if a CDN is used to\n // serve assets; see https://github.com/facebook/create-react-app/issues/2374\n return;\n }\n\n window.addEventListener('load', () => {\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n if (isLocalhost) {\n // This is running on localhost. Let's check if a service worker still exists or not.\n checkValidServiceWorker(swUrl, config);\n\n // Add some additional logging to localhost, pointing developers to the\n // service worker/PWA documentation.\n navigator.serviceWorker.ready.then(() => {\n console.log(\n 'This web app is being served cache-first by a service ' +\n 'worker. To learn more, visit https://bit.ly/CRA-PWA'\n );\n });\n } else {\n // Is not localhost. Just register service worker\n registerValidSW(swUrl, config);\n }\n });\n }\n}\n\nfunction registerValidSW(swUrl, config) {\n navigator.serviceWorker\n .register(swUrl)\n .then(registration => {\n registration.onupdatefound = () => {\n const installingWorker = registration.installing;\n if (installingWorker == null) {\n return;\n }\n installingWorker.onstatechange = () => {\n if (installingWorker.state === 'installed') {\n if (navigator.serviceWorker.controller) {\n // At this point, the updated precached content has been fetched,\n // but the previous service worker will still serve the older\n // content until all client tabs are closed.\n console.log(\n 'New content is available and will be used when all ' +\n 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'\n );\n\n // Execute callback\n if (config && config.onUpdate) {\n config.onUpdate(registration);\n }\n } else {\n // At this point, everything has been precached.\n // It's the perfect time to display a\n // \"Content is cached for offline use.\" message.\n console.log('Content is cached for offline use.');\n\n // Execute callback\n if (config && config.onSuccess) {\n config.onSuccess(registration);\n }\n }\n }\n };\n };\n })\n .catch(error => {\n console.error('Error during service worker registration:', error);\n });\n}\n\nfunction checkValidServiceWorker(swUrl, config) {\n // Check if the service worker can be found. If it can't reload the page.\n fetch(swUrl)\n .then(response => {\n // Ensure service worker exists, and that we really are getting a JS file.\n const contentType = response.headers.get('content-type');\n if (\n response.status === 404 ||\n (contentType != null && contentType.indexOf('javascript') === -1)\n ) {\n // No service worker found. Probably a different app. Reload the page.\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister().then(() => {\n window.location.reload();\n });\n });\n } else {\n // Service worker found. Proceed as normal.\n registerValidSW(swUrl, config);\n }\n })\n .catch(() => {\n console.log(\n 'No internet connection found. App is running in offline mode.'\n );\n });\n}\n\nexport function unregister() {\n if ('serviceWorker' in navigator) {\n navigator.serviceWorker.ready.then(registration => {\n registration.unregister();\n });\n }\n}\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\nimport * as serviceWorker from './serviceWorker';\n\nReactDOM.render(\n \n \n
\n \n \n
\n