@yorab/react-paint 0.4.0 → 0.5.0

package/dist/styles.css

@@ -31,57 +31,54 @@
   min-width: 0;
 }
 
-.s1unz6yq{position:absolute;display:inline-block;outline:none;left:0px;top:0px;-webkit-transform-origin:left top;-ms-transform-origin:left top;transform-origin:left top;box-sizing:border-box;-webkit-transform:var(--s1unz6yq-0);-ms-transform:var(--s1unz6yq-0);transform:var(--s1unz6yq-0);color:var(--s1unz6yq-1);padding:var(--s1unz6yq-2);font-size:var(--s1unz6yq-3);line-height:var(--s1unz6yq-3);font-family:var(--s1unz6yq-5);}
-.s9czb9p{-webkit-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
-.s1538eht{position:relative;background-color:var(--canvas-bg);background-repeat:repeat;background-size:16px;overflow:hidden;}.s1538eht[data-grid='true']{background-image:url("data:image/svg+xml,%3Csvg%20id%3D%22svg%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22400%22%20height%3D%22400%22%20viewBox%3D%220%2C%200%2C%20400%2C400%22%3E%3Cg%20id%3D%22svgg%22%3E%3Cpath%20id%3D%22path0%22%20d%3D%22M204.800%2094.600%20C%20204.800%20188.933%2C204.802%20189.200%2C205.600%20189.200%20C%20206.248%20189.200%2C206.400%20189.467%2C206.400%20190.600%20C%20206.400%20191.733%2C206.552%20192.000%2C207.200%20192.000%20C%20207.733%20192.000%2C208.000%20192.267%2C208.000%20192.800%20C%20208.000%20193.244%2C208.267%20193.600%2C208.600%20193.600%20C%20208.933%20193.600%2C209.200%20193.956%2C209.200%20194.400%20C%20209.200%20195.067%2C209.467%20195.200%2C210.800%20195.200%20C%20212.133%20195.200%2C212.400%20195.333%2C212.400%20196.000%20C%20212.400%20196.798%2C212.667%20196.800%2C306.200%20196.800%20L%20400.000%20196.800%20400.000%2098.400%20L%20400.000%200.000%20302.400%200.000%20L%20204.800%200.000%20204.800%2094.600%20M0.000%20302.400%20L%200.000%20400.000%2098.400%20400.000%20L%20196.800%20400.000%20196.800%20306.200%20C%20196.800%20212.667%2C196.798%20212.400%2C196.000%20212.400%20C%20195.333%20212.400%2C195.200%20212.133%2C195.200%20210.800%20C%20195.200%20209.467%2C195.067%20209.200%2C194.400%20209.200%20C%20193.956%20209.200%2C193.600%20208.933%2C193.600%20208.600%20C%20193.600%20208.267%2C193.244%20208.000%2C192.800%20208.000%20C%20192.267%20208.000%2C192.000%20207.733%2C192.000%20207.200%20C%20192.000%20206.552%2C191.733%20206.400%2C190.600%20206.400%20C%20189.467%20206.400%2C189.200%20206.248%2C189.200%20205.600%20C%20189.200%20204.802%2C188.933%20204.800%2C94.600%20204.800%20L%200.000%20204.800%200.000%20302.400%20%22%20stroke%3D%22none%22%20fill%3D%22%23fcfcfc%22%20fill-rule%3D%22evenodd%22%3E%3C%2Fpath%3E%3Cpath%20id%3D%22path1%22%20d%3D%22M0.000%20100.000%20L%200.000%20200.000%2096.800%20200.000%20C%20193.333%20200.000%2C193.600%20199.998%2C193.600%20199.200%20C%20193.600%20198.533%2C193.867%20198.400%2C195.200%20198.400%20C%20196.533%20198.400%2C196.800%20198.267%2C196.800%20197.600%20C%20196.800%20197.067%2C197.067%20196.800%2C197.600%20196.800%20C%20198.267%20196.800%2C198.400%20196.533%2C198.400%20195.200%20C%20198.400%20193.867%2C198.533%20193.600%2C199.200%20193.600%20C%20199.998%20193.600%2C200.000%20193.333%2C200.000%2096.800%20L%20200.000%200.000%20100.000%200.000%20L%200.000%200.000%200.000%20100.000%20M208.000%20202.400%20C%20208.000%20203.067%2C207.733%20203.200%2C206.400%20203.200%20C%20205.067%20203.200%2C204.800%20203.333%2C204.800%20204.000%20C%20204.800%20204.533%2C204.533%20204.800%2C204.000%20204.800%20C%20203.333%20204.800%2C203.200%20205.067%2C203.200%20206.400%20C%20203.200%20207.733%2C203.067%20208.000%2C202.400%20208.000%20C%20201.602%20208.000%2C201.600%20208.267%2C201.600%20304.000%20L%20201.600%20400.000%20300.800%20400.000%20L%20400.000%20400.000%20400.000%20300.800%20L%20400.000%20201.600%20304.000%20201.600%20C%20208.267%20201.600%2C208.000%20201.602%2C208.000%20202.400%20%22%20stroke%3D%22none%22%20fill%3D%22%23e4e4e4%22%20fill-rule%3D%22evenodd%22%3E%3C%2Fpath%3E%3Cpath%20id%3D%22path2%22%20d%3D%22%22%20stroke%3D%22none%22%20fill%3D%22%23f4100f0%22%20fill-rule%3D%22evenodd%22%3E%3C%2Fpath%3E%3Cpath%20id%3D%22path3%22%20d%3D%22%22%20stroke%3D%22none%22%20fill%3D%22%23f4100f0%22%20fill-rule%3D%22evenodd%22%3E%3C%2Fpath%3E%3Cpath%20id%3D%22path4%22%20d%3D%22%22%20stroke%3D%22none%22%20fill%3D%22%23f4100f0%22%20fill-rule%3D%22evenodd%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");}.s1538eht[data-grow='true']{width:100%;height:100%;}
-.s101qxdc{position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;max-width:100%;touch-action:none;display:block;}.s101qxdc[data-grow='true']{width:100%;}
-.sa4oq48{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;max-width:100%;touch-action:none;display:block;cursor:var(--sa4oq48-0);}.sa4oq48[data-grow='true']{width:100%;}
-.sq3bzv4{min-width:32px;height:32px;font-size:14px;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;box-sizing:border-box;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;background:none;border:none;cursor:pointer;border-radius:var(--font-radius);color:var(--font-color);margin:2px 4px;padding:0;}.sq3bzv4[data-selected='1']{color:var(--font-selected-color);background:var(--font-selected-bg);}.sq3bzv4[data-hidden='1']{visibility:hidden;}.sq3bzv4[data-disabled='1']{cursor:default;color:var(--font-disabled-color);background:var(--font-disabled-bg);}.sq3bzv4[data-selected='0'][data-disabled='0']{background:var(--font-bg);color:var(--font-color);}.sq3bzv4[data-selected='0'][data-disabled='0']:hover{color:var(--font-hover-color);background:var(--font-hover-bg);}.sq3bzv4[data-disabled='0']{cursor:pointer;}.sq3bzv4 svg{fill:currentColor;width:20px;height:20px;}.sq3bzv4 input{position:absolute;visibility:hidden;}
-.sst453j{width:100%;box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:2px 6px;}
-.s1q5lsc2{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
-.s1dis2j8{-webkit-flex:1;-ms-flex:1;flex:1;text-align:left;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.s1dis2j8 + .s1q5lsc2{margin-left:12px;}
-.s1xzg253{position:absolute;z-index:3;background:var(--toolbar-bg);bottom:100%;box-shadow:0 3px 8px rgb(0 0 0 / 24%);padding:8px;border-radius:8px;white-space:nowrap;}.s1xzg253[data-alignment='left']{left:0;margin:4px;}.s1xzg253[data-alignment='center']{left:50%;-webkit-transform:translate3d(-50%,0px,0px);-ms-transform:translate3d(-50%,0px,0px);transform:translate3d(-50%,0px,0px);margin:4px 0px;}.s1xzg253[data-alignment='right']{right:0;margin:4px;}
-.s17qj3jh{margin-bottom:8px;margin-top:4px;font-size:18px;}
-.su3a8bs{display:inline-block;background:var(--toolbar-bg);box-sizing:border-box;overflow-y:auto;min-width:200px;}
-.szboplp{border:3px solid transparent;padding:4px 0px;position:relative;background:var(--toolbar-bg);box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}.szboplp[data-is-over='1']{border:3px dotted var(--font-hover-bg);}.szboplp[data-is-dragging='1']{opacity:0.4;}.szboplp[data-selected='1']{color:var(--font-selected-color);background:var(--font-selected-bg);}.szboplp[data-selected='0'][data-disabled='0']{background:var(--font-bg);color:var(--font-color);}.szboplp[data-selected='0'][data-disabled='0']:hover{color:var(--font-hover-color);background:var(--font-hover-bg);}.szboplp[data-disabled='1']{cursor:default;color:var(--font-disabled-color);background:var(--font-disabled-bg);}.szboplp[data-disabled='0']{cursor:move;}.szboplp > span{height:20px;}.szboplp > span > svg{fill:#8a8a8a;width:20px;height:20px;padding:0 16px;}
-.sff5xt[data-visible='false']{opacity:0.2;}
-.sj3bift[data-locked='false']{opacity:0.2;}
-.s10ip0a4[data-grid='false'] svg{opacity:0.2;}
-.s1j9uq9o{-webkit-flex:1;-ms-flex:1;flex:1;}
-.s156ddbb{bottom:0;left:unset;top:unset;max-height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
-.s11gt4hl{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;overflow-y:auto;}
-.s13cxqhq{opacity:0.6;text-align:center;padding:12px 0px;}
-.s1bvz4xj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;bottom:unset;top:100%;}.s1bvz4xj[data-vertical='1']{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
-.siejlch{position:relative;display:inline-block;}
-.s1uphjfh{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;bottom:unset;top:100%;}.s1uphjfh[data-vertical='1']{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
-.s1e5a6k5{position:relative;display:inline-block;}
-.s1c8tp02{z-index:3;position:absolute;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;left:0;right:0;bottom:0;top:0;}
-.svkxpz4{display:grid;background:var(--toolbar-bg);box-shadow:0 3px 8px rgb(0 0 0 / 24%);padding:12px;border-radius:8px;white-space:nowrap;position:relative;}
-.s1s9jyyg{position:absolute;left:0;top:0;right:0;bottom:0;background:#00000073;}
-.s95bkm9 form{grid-template-columns:3fr 1fr 1fr;}.s95bkm9 form input{color:var(--font-color);border:1px solid var(--font-color);outline:none;}
-.so6hnjf{-webkit-flex:1;-ms-flex:1;flex:1;position:relative;height:100%;text-align:center;max-height:72px;}
-.s1c1dllr{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;max-height:36px;background:var(--toolbar-bg);border-bottom:1px solid var(--divider-color);box-sizing:border-box;}
-.s1g032mh{display:inline-block;text-align:left;margin-right:36px;text-align:right;}.s1g032mh + *{position:absolute;right:0;bottom:36px;}
-.s4owjrv{grid-template-columns:1fr 1fr 1fr;}
-.snh2jyk{width:24px;height:24px;box-sizing:border-box;border-radius:50%;border:1px solid gray;background:var(--snh2jyk-0);background-repeat:repeat;background-size:16px;}
-.sfm1cqx{width:36px;height:36px;box-sizing:border-box;border-radius:50%;color:var(--sfm1cqx-0);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:baseline;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;font-size:48px;line-height:36px;position:relative;bottom:6px;font-weight:bold;}
-.sttf061{border-radius:50%;}
-.layoutPanelOpened .sj7hhjx.sj7hhjx{color:var(--font-selected-color);background:var(--font-selected-bg);}.sj7hhjx[data-hidden='1']{display:none;}
-.s9mugpt{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
-.s1ktxhkr{padding:16px;}
-.smpmxx5{font-family:var(--smpmxx5-0);}
-
-.s1qssg4n{display:inline-block;width:6px;height:2px;background:transparent;vertical-align:middle;}
-.se26iq6{display:inline-block;}.se26iq6[data-type='0'] .s1qssg4n{background:black;}.se26iq6[data-type='1']{position:relative;left:3px;}.se26iq6[data-type='1'] .s1qssg4n:nth-child(3n-1){background:black;width:12px;}.se26iq6[data-type='1'] .s1qssg4n:nth-child(n+11){display:none;}.se26iq6[data-type='2'] .s1qssg4n:nth-child(2n+1){background:black;}
-.s1xxj4yl{position:absolute;left:0;top:50%;-webkit-transform:translate3d(-25%,-50%,0px);-ms-transform:translate3d(-25%,-50%,0px);transform:translate3d(-25%,-50%,0px);display:inline-block;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:15px solid black;}
-.sbd6jc8{position:absolute;right:0;top:50%;-webkit-transform:translate3d(25%,-50%,0px);-ms-transform:translate3d(25%,-50%,0px);transform:translate3d(25%,-50%,0px);display:inline-block;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:15px solid black;}
-.scawaat{position:relative;display:inline-block;width:60px;height:2px;background:black;vertical-align:middle;}.scawaat[data-type='0'] .s1xxj4yl,.scawaat[data-type='1'] .s1xxj4yl{display:none;}.scawaat[data-type='0'] .sbd6jc8,.scawaat[data-type='2'] .sbd6jc8{display:none;}
-.s16z54di{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:var(--toolbar-bg);position:relative;height:36px;border-top:1px solid var(--divider-color);box-sizing:border-box;}
-.sa7lzh9{-webkit-flex:1;-ms-flex:1;flex:1;}
-.s1xssqat{display:inline-block;padding:12px 48px;margin:4px;max-width:calc(100% - 24px);overflow-wrap:break-word;box-sizing:border-box;-webkit-transition:all 500ms;transition:all 500ms;opacity:0;-webkit-transform:translate3d(0px,40px,0px);-ms-transform:translate3d(0px,40px,0px);transform:translate3d(0px,40px,0px);}.s1xssqat[data-type='0']{background:#646464;color:white;}.s1xssqat[data-type='1']{background:#c3a200;color:black;}.s1xssqat[data-type='2']{background:#911717;color:white;}.s1xssqat[data-type='3']{background:#088900;color:white;}.s1xssqat[data-is-shown='1']{opacity:1;-webkit-transform:translate3d(0px,0px,0px);-ms-transform:translate3d(0px,0px,0px);transform:translate3d(0px,0px,0px);}.s1xssqat[data-is-shown='0']{opacity:0;-webkit-transform:translate3d(0px,40px,0px);-ms-transform:translate3d(0px,40px,0px);transform:translate3d(0px,40px,0px);}
-.s1bgtt22{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;position:absolute;z-index:4;bottom:0;left:0;right:0;height:0px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
-.s9j48u3{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:absolute;z-index:2;top:0;bottom:0;left:0;right:0;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:#00000050;-webkit-transition:opacity 300ms linear;transition:opacity 300ms linear;opacity:0;}.s9j48u3[data-loading='visible']{opacity:1;}
-.s4auclc{width:40px;height:40px;position:relative;-webkit-transform:rotate(10deg);-ms-transform:rotate(10deg);transform:rotate(10deg);-webkit-animation:react-paint-rotation-s4auclc 1s infinite;animation:react-paint-rotation-s4auclc 1s infinite;}@-webkit-keyframes react-paint-rotation-s4auclc{from{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes react-paint-rotation-s4auclc{from{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}
-.s1l3fbq{border-radius:50%;position:absolute;width:15px;height:15px;}.s1l3fbq:nth-child(1){left:0;background-color:#5c6bc0;}.s1l3fbq:nth-child(2){right:0;background-color:#8bc34a;}.s1l3fbq:nth-child(3){bottom:0;background-color:#ffb74d;}.s1l3fbq:nth-child(4){bottom:0;right:0;background-color:#f44336;}
-.s1v9piyg{--toolbar-bg:var(--s1v9piyg-0);--divider-color:var(--s1v9piyg-1);--font-radius:var(--s1v9piyg-2);--font-disabled-color:var(--s1v9piyg-3);--font-disabled-bg:var(--s1v9piyg-4);--font-color:var(--s1v9piyg-5);--font-bg:var(--s1v9piyg-6);--font-selected-color:var(--s1v9piyg-7);--font-selected-bg:var(--s1v9piyg-8);--font-hover-color:var(--s1v9piyg-9);--font-hover-bg:var(--s1v9piyg-10);--canvas-bg:var(--s1v9piyg-11);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;color:var(--font-color);position:relative;overflow:hidden;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.s1v9piyg hr{width:100%;border:none;border-top:1px solid var(--divider-color);}.s1v9piyg[data-grow='false']{max-width:var(--s1v9piyg-12);}.s1v9piyg[data-shrink='false']{min-width:var(--s1v9piyg-13);}
-.s6o5tmu{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;position:relative;max-width:100%;z-index:1;aspect-ratio:var(--s6o5tmu-2);}.s6o5tmu[data-grow='true']{width:100%;}.s6o5tmu[data-grow='false']{width:var(--s6o5tmu-1);}
+.se8ufj4{position:absolute;display:inline-block;outline:none;left:0px;top:0px;-webkit-transform-origin:left top;-ms-transform-origin:left top;transform-origin:left top;box-sizing:border-box;-webkit-transform:var(--se8ufj4-0);-ms-transform:var(--se8ufj4-0);transform:var(--se8ufj4-0);color:var(--se8ufj4-1);padding:var(--se8ufj4-2);font-size:var(--se8ufj4-3);line-height:var(--se8ufj4-3);font-family:var(--se8ufj4-5);}
+.s14cny8z{-webkit-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
+.s16bxms6{position:relative;background-color:var(--canvas-bg);background-repeat:repeat;background-size:16px;overflow:hidden;display:grid;}.s16bxms6[data-grid='true']{background-image:url("data:image/svg+xml,%3Csvg%20id%3D%22svg%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22400%22%20height%3D%22400%22%20viewBox%3D%220%2C%200%2C%20400%2C400%22%3E%3Cg%20id%3D%22svgg%22%3E%3Cpath%20id%3D%22path0%22%20d%3D%22M204.800%2094.600%20C%20204.800%20188.933%2C204.802%20189.200%2C205.600%20189.200%20C%20206.248%20189.200%2C206.400%20189.467%2C206.400%20190.600%20C%20206.400%20191.733%2C206.552%20192.000%2C207.200%20192.000%20C%20207.733%20192.000%2C208.000%20192.267%2C208.000%20192.800%20C%20208.000%20193.244%2C208.267%20193.600%2C208.600%20193.600%20C%20208.933%20193.600%2C209.200%20193.956%2C209.200%20194.400%20C%20209.200%20195.067%2C209.467%20195.200%2C210.800%20195.200%20C%20212.133%20195.200%2C212.400%20195.333%2C212.400%20196.000%20C%20212.400%20196.798%2C212.667%20196.800%2C306.200%20196.800%20L%20400.000%20196.800%20400.000%2098.400%20L%20400.000%200.000%20302.400%200.000%20L%20204.800%200.000%20204.800%2094.600%20M0.000%20302.400%20L%200.000%20400.000%2098.400%20400.000%20L%20196.800%20400.000%20196.800%20306.200%20C%20196.800%20212.667%2C196.798%20212.400%2C196.000%20212.400%20C%20195.333%20212.400%2C195.200%20212.133%2C195.200%20210.800%20C%20195.200%20209.467%2C195.067%20209.200%2C194.400%20209.200%20C%20193.956%20209.200%2C193.600%20208.933%2C193.600%20208.600%20C%20193.600%20208.267%2C193.244%20208.000%2C192.800%20208.000%20C%20192.267%20208.000%2C192.000%20207.733%2C192.000%20207.200%20C%20192.000%20206.552%2C191.733%20206.400%2C190.600%20206.400%20C%20189.467%20206.400%2C189.200%20206.248%2C189.200%20205.600%20C%20189.200%20204.802%2C188.933%20204.800%2C94.600%20204.800%20L%200.000%20204.800%200.000%20302.400%20%22%20stroke%3D%22none%22%20fill%3D%22%23fcfcfc%22%20fill-rule%3D%22evenodd%22%3E%3C%2Fpath%3E%3Cpath%20id%3D%22path1%22%20d%3D%22M0.000%20100.000%20L%200.000%20200.000%2096.800%20200.000%20C%20193.333%20200.000%2C193.600%20199.998%2C193.600%20199.200%20C%20193.600%20198.533%2C193.867%20198.400%2C195.200%20198.400%20C%20196.533%20198.400%2C196.800%20198.267%2C196.800%20197.600%20C%20196.800%20197.067%2C197.067%20196.800%2C197.600%20196.800%20C%20198.267%20196.800%2C198.400%20196.533%2C198.400%20195.200%20C%20198.400%20193.867%2C198.533%20193.600%2C199.200%20193.600%20C%20199.998%20193.600%2C200.000%20193.333%2C200.000%2096.800%20L%20200.000%200.000%20100.000%200.000%20L%200.000%200.000%200.000%20100.000%20M208.000%20202.400%20C%20208.000%20203.067%2C207.733%20203.200%2C206.400%20203.200%20C%20205.067%20203.200%2C204.800%20203.333%2C204.800%20204.000%20C%20204.800%20204.533%2C204.533%20204.800%2C204.000%20204.800%20C%20203.333%20204.800%2C203.200%20205.067%2C203.200%20206.400%20C%20203.200%20207.733%2C203.067%20208.000%2C202.400%20208.000%20C%20201.602%20208.000%2C201.600%20208.267%2C201.600%20304.000%20L%20201.600%20400.000%20300.800%20400.000%20L%20400.000%20400.000%20400.000%20300.800%20L%20400.000%20201.600%20304.000%20201.600%20C%20208.267%20201.600%2C208.000%20201.602%2C208.000%20202.400%20%22%20stroke%3D%22none%22%20fill%3D%22%23e4e4e4%22%20fill-rule%3D%22evenodd%22%3E%3C%2Fpath%3E%3Cpath%20id%3D%22path2%22%20d%3D%22%22%20stroke%3D%22none%22%20fill%3D%22%23f4100f0%22%20fill-rule%3D%22evenodd%22%3E%3C%2Fpath%3E%3Cpath%20id%3D%22path3%22%20d%3D%22%22%20stroke%3D%22none%22%20fill%3D%22%23f4100f0%22%20fill-rule%3D%22evenodd%22%3E%3C%2Fpath%3E%3Cpath%20id%3D%22path4%22%20d%3D%22%22%20stroke%3D%22none%22%20fill%3D%22%23f4100f0%22%20fill-rule%3D%22evenodd%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");}.s16bxms6[data-grow='true']{width:100%;height:100%;}
+.spzzsat{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;max-width:100%;touch-action:none;display:block;grid-area:1 / 1;}.spzzsat[data-grow='true']{width:100%;}
+.s1egrskk{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;max-width:100%;touch-action:none;display:block;grid-area:1 / 1;cursor:var(--s1egrskk-0);}.s1egrskk[data-grow='true']{width:100%;}
+.sc6yefj{min-width:32px;height:32px;font-size:14px;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;box-sizing:border-box;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;background:none;border:none;cursor:pointer;border-radius:var(--font-radius);color:var(--font-color);margin:2px 4px;padding:0;}.sc6yefj[data-selected='1']{color:var(--font-selected-color);background:var(--font-selected-bg);}.sc6yefj[data-hidden='1']{visibility:hidden;}.sc6yefj[data-disabled='1']{cursor:default;color:var(--font-disabled-color);background:var(--font-disabled-bg);}.sc6yefj[data-selected='0'][data-disabled='0']{background:var(--font-bg);color:var(--font-color);}.sc6yefj[data-selected='0'][data-disabled='0']:hover{color:var(--font-hover-color);background:var(--font-hover-bg);}.sc6yefj[data-disabled='0']{cursor:pointer;}.sc6yefj svg{fill:currentColor;width:20px;height:20px;}.sc6yefj input{position:absolute;visibility:hidden;}
+.s2aizej{width:100%;box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:2px 6px;}
+.s13rkw3s{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
+.s1qkcrgj{-webkit-flex:1;-ms-flex:1;flex:1;text-align:left;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.s1qkcrgj + .s13rkw3s{margin-left:12px;}
+.s2dsyaf{position:absolute;z-index:3;background:var(--toolbar-bg);bottom:100%;box-shadow:0 3px 8px rgb(0 0 0 / 24%);padding:8px;border-radius:8px;white-space:nowrap;}.s2dsyaf[data-alignment='left']{left:0;margin:4px;}.s2dsyaf[data-alignment='center']{left:50%;-webkit-transform:translate3d(-50%,0px,0px);-ms-transform:translate3d(-50%,0px,0px);transform:translate3d(-50%,0px,0px);margin:4px 0px;}.s2dsyaf[data-alignment='right']{right:0;margin:4px;}
+.s1f032bv{margin-bottom:8px;margin-top:4px;font-size:18px;}
+.sw61axo{display:inline-block;background:var(--toolbar-bg);box-sizing:border-box;overflow-y:auto;min-width:200px;}
+.s1shoasi{border:3px solid transparent;padding:4px 0px;position:relative;background:var(--toolbar-bg);box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}.s1shoasi[data-is-over='1']{border:3px dotted var(--font-hover-bg);}.s1shoasi[data-is-dragging='1']{opacity:0.4;}.s1shoasi[data-selected='1']{color:var(--font-selected-color);background:var(--font-selected-bg);}.s1shoasi[data-selected='0'][data-disabled='0']{background:var(--font-bg);color:var(--font-color);}.s1shoasi[data-selected='0'][data-disabled='0']:hover{color:var(--font-hover-color);background:var(--font-hover-bg);}.s1shoasi[data-disabled='1']{cursor:default;color:var(--font-disabled-color);background:var(--font-disabled-bg);}.s1shoasi[data-disabled='0']{cursor:move;}.s1shoasi > span{height:20px;}.s1shoasi > span > svg{fill:#8a8a8a;width:20px;height:20px;padding:0 16px;}
+.s1adt0vs[data-visible='false']{opacity:0.2;}
+.svyjq0t[data-locked='false']{opacity:0.2;}
+.s1vztggb[data-grid='false'] svg{opacity:0.2;}
+.s1fgf9tg{-webkit-flex:1;-ms-flex:1;flex:1;}
+.s1rl6big{bottom:0;left:unset;top:unset;max-height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
+.sbpkotp{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;overflow-y:auto;}
+.s12cgrwn{opacity:0.6;text-align:center;padding:12px 0px;}
+.s3kynji{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;bottom:unset;top:100%;}.s3kynji[data-vertical='1']{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
+.s1614rl3{position:relative;display:inline-block;}
+.s1qu0ers{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;bottom:unset;top:100%;}.s1qu0ers[data-vertical='1']{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
+.s1y35t9y{position:relative;display:inline-block;}
+.s1hezj2d{z-index:3;position:absolute;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;left:0;right:0;bottom:0;top:0;}
+.spuj31h{display:grid;background:var(--toolbar-bg);box-shadow:0 3px 8px rgb(0 0 0 / 24%);padding:12px;border-radius:8px;white-space:nowrap;position:relative;}
+.s1ulcd40{position:absolute;left:0;top:0;right:0;bottom:0;background:#00000073;}
+.s1rncfwv form{grid-template-columns:3fr 1fr 1fr;}.s1rncfwv form input{color:var(--font-color);border:1px solid var(--font-color);background:var(--toolbar-bg);outline:none;}
+.s1gorp95{-webkit-flex:1;-ms-flex:1;flex:1;position:relative;height:100%;text-align:center;height:36px;}
+.s1ivsaf6{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;max-height:36px;background:var(--toolbar-bg);border-bottom:1px solid var(--divider-color);box-sizing:border-box;}
+.sv0y70r{grid-template-columns:1fr 1fr 1fr;}
+.s1dqu4j7{width:24px;height:24px;box-sizing:border-box;border-radius:50%;border:1px solid gray;background:var(--s1dqu4j7-0);background-repeat:repeat;background-size:16px;}
+.s1j0ldko{width:24px;height:24px;box-sizing:border-box;border-radius:50%;color:var(--s1j0ldko-0);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:baseline;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;line-height:36px;font-weight:bold;}
+.layoutPanelOpened .sb1jkk3.sb1jkk3{color:var(--font-selected-color);background:var(--font-selected-bg);}.sb1jkk3[data-hidden='1']{display:none;}
+.s4h1871{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
+.sfr849o{padding:16px;}
+.s16o63ah{font-family:var(--s16o63ah-0);}
+.s1yz5lc1{display:inline-block;width:6px;height:2px;background:transparent;vertical-align:middle;}
+.s1k64iv7{display:inline-block;}.s1k64iv7[data-type='0'] .s1yz5lc1{background:currentColor;}.s1k64iv7[data-type='1']{position:relative;left:3px;}.s1k64iv7[data-type='1'] .s1yz5lc1:nth-child(3n-1){background:currentColor;width:12px;}.s1k64iv7[data-type='1'] .s1yz5lc1:nth-child(n+11){display:none;}.s1k64iv7[data-type='2'] .s1yz5lc1:nth-child(2n+1){background:currentColor;}
+.s1bq28wy{position:absolute;left:0;top:50%;-webkit-transform:translate3d(-25%,-50%,0px);-ms-transform:translate3d(-25%,-50%,0px);transform:translate3d(-25%,-50%,0px);display:inline-block;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:15px solid currentColor;}
+.sej9ve5{position:absolute;right:0;top:50%;-webkit-transform:translate3d(25%,-50%,0px);-ms-transform:translate3d(25%,-50%,0px);transform:translate3d(25%,-50%,0px);display:inline-block;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:15px solid currentColor;}
+.s5asd7a{position:relative;display:inline-block;width:60px;height:2px;background:currentColor;vertical-align:middle;}.s5asd7a[data-type='0'] .s1bq28wy,.s5asd7a[data-type='1'] .s1bq28wy{display:none;}.s5asd7a[data-type='0'] .sej9ve5,.s5asd7a[data-type='2'] .sej9ve5{display:none;}
+.s17kh6p4{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:var(--toolbar-bg);position:relative;height:36px;border-top:1px solid var(--divider-color);box-sizing:border-box;}
+.s1fluhcn{-webkit-flex:1;-ms-flex:1;flex:1;}
+.s1xg1lj6{display:inline-block;padding:12px 48px;margin:4px;max-width:calc(100% - 24px);overflow-wrap:break-word;box-sizing:border-box;-webkit-transition:all 500ms;transition:all 500ms;opacity:0;-webkit-transform:translate3d(0px,40px,0px);-ms-transform:translate3d(0px,40px,0px);transform:translate3d(0px,40px,0px);}.s1xg1lj6[data-type='0']{background:#646464;color:white;}.s1xg1lj6[data-type='1']{background:#c3a200;color:black;}.s1xg1lj6[data-type='2']{background:#911717;color:white;}.s1xg1lj6[data-type='3']{background:#088900;color:white;}.s1xg1lj6[data-is-shown='1']{opacity:1;-webkit-transform:translate3d(0px,0px,0px);-ms-transform:translate3d(0px,0px,0px);transform:translate3d(0px,0px,0px);}.s1xg1lj6[data-is-shown='0']{opacity:0;-webkit-transform:translate3d(0px,40px,0px);-ms-transform:translate3d(0px,40px,0px);transform:translate3d(0px,40px,0px);}
+.sg1lk71{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;position:absolute;z-index:4;bottom:0;left:0;right:0;height:0px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
+.s15r7ba{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:absolute;z-index:2;top:0;bottom:0;left:0;right:0;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:#00000050;-webkit-transition:opacity 300ms linear;transition:opacity 300ms linear;opacity:0;}.s15r7ba[data-loading='visible']{opacity:1;}
+.s19n4ela{width:40px;height:40px;position:relative;-webkit-transform:rotate(10deg);-ms-transform:rotate(10deg);transform:rotate(10deg);-webkit-animation:react-paint-rotation-s19n4ela 1s infinite;animation:react-paint-rotation-s19n4ela 1s infinite;}@-webkit-keyframes react-paint-rotation-s19n4ela{from{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes react-paint-rotation-s19n4ela{from{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}
+.ssemdwq{border-radius:50%;position:absolute;width:15px;height:15px;}.ssemdwq:nth-child(1){left:0;background-color:#5c6bc0;}.ssemdwq:nth-child(2){right:0;background-color:#8bc34a;}.ssemdwq:nth-child(3){bottom:0;background-color:#ffb74d;}.ssemdwq:nth-child(4){bottom:0;right:0;background-color:#f44336;}
+.sdhgr8u{--toolbar-bg:var(--sdhgr8u-0);--divider-color:var(--sdhgr8u-1);--font-radius:var(--sdhgr8u-2);--font-disabled-color:var(--sdhgr8u-3);--font-disabled-bg:var(--sdhgr8u-4);--font-color:var(--sdhgr8u-5);--font-bg:var(--sdhgr8u-6);--font-selected-color:var(--sdhgr8u-7);--font-selected-bg:var(--sdhgr8u-8);--font-hover-color:var(--sdhgr8u-9);--font-hover-bg:var(--sdhgr8u-10);--canvas-bg:var(--sdhgr8u-11);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;color:var(--font-color);position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.sdhgr8u hr{width:100%;border:none;border-top:1px solid var(--divider-color);}.sdhgr8u[data-grow='false']{max-width:var(--sdhgr8u-12);}.sdhgr8u[data-shrink='false']{min-width:var(--sdhgr8u-13);}
+.sm24hcl{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;position:relative;max-width:100%;z-index:1;aspect-ratio:var(--sm24hcl-2);}.sm24hcl[data-grow='true']{width:100%;}.sm24hcl[data-grow='false']{width:var(--sm24hcl-1);}

package/dist/types/Shapes.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ToolEnum = exports.ShapeEnum = void 0;
+exports.ShapeEnum = void 0;
 var ShapeEnum;
 exports.ShapeEnum = ShapeEnum;
 
@@ -18,18 +18,4 @@ exports.ShapeEnum = ShapeEnum;
   ShapeEnum["ellipse"] = "ellipse";
   ShapeEnum["picture"] = "picture";
   ShapeEnum["text"] = "text";
-})(ShapeEnum || (exports.ShapeEnum = ShapeEnum = {}));
-
-var ToolEnum;
-exports.ToolEnum = ToolEnum;
-
-(function (ToolEnum) {
-  ToolEnum["selection"] = "selection";
-  ToolEnum["undo"] = "undo";
-  ToolEnum["redo"] = "redo";
-  ToolEnum["clear"] = "clear";
-  ToolEnum["export"] = "export";
-  ToolEnum["loadFile"] = "loadfile";
-  ToolEnum["saveFile"] = "savefile";
-  ToolEnum["move"] = "move";
-})(ToolEnum || (exports.ToolEnum = ToolEnum = {}));
+})(ShapeEnum || (exports.ShapeEnum = ShapeEnum = {}));

package/dist/types/tools.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ActionsEnum = void 0;
+// default
+var ActionsEnum;
+exports.ActionsEnum = ActionsEnum;
+
+(function (ActionsEnum) {
+  ActionsEnum["selection"] = "selection";
+  ActionsEnum["undo"] = "undo";
+  ActionsEnum["redo"] = "redo";
+  ActionsEnum["clear"] = "clear";
+  ActionsEnum["export"] = "export";
+  ActionsEnum["loadFile"] = "loadfile";
+  ActionsEnum["saveFile"] = "savefile";
+  ActionsEnum["move"] = "move";
+  ActionsEnum["uploadPicture"] = "uploadpicture";
+  ActionsEnum["addUrlPicture"] = "addurlpicture";
+})(ActionsEnum || (exports.ActionsEnum = ActionsEnum = {}));

package/dist/utils/data.js

@@ -19,6 +19,8 @@ var _Shapes = require("../types/Shapes");
 
 var _file = require("./file");
 
+var _tools = require("../constants/tools");
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -34,6 +36,7 @@ var createPicture = function createPicture(fileOrUrl, maxPictureWidth, maxPictur
           height = _fitContentInsideCont2[1];
 
       var pictureShape = {
+        toolId: _tools.DEFAULT_SHAPE_PICTURE.id,
         type: _Shapes.ShapeEnum.picture,
         id: _fp["default"].uniqueId("".concat(_Shapes.ShapeEnum.picture, "_")),
         x: (maxPictureWidth - width) / 2,
@@ -66,74 +69,110 @@ var createPicture = function createPicture(fileOrUrl, maxPictureWidth, maxPictur
 
 exports.createPicture = createPicture;
 
-var createShape = function createShape(ctx, shape, cursorPosition, defaultConf) {
-  var _defaultConf$style$po, _defaultConf$style, _defaultConf$style$po2, _defaultConf$style2, _defaultConf$style3;
-
-  switch (shape) {
+var createShape = function createShape(ctx, shape, cursorPosition) {
+  switch (shape.type) {
     case _Shapes.ShapeEnum.brush:
+      shape.settings;
       return {
+        toolId: shape.id,
         type: _Shapes.ShapeEnum.brush,
-        id: _fp["default"].uniqueId("".concat(shape, "_")),
+        id: _fp["default"].uniqueId("".concat(shape.type, "_")),
         points: [[cursorPosition]],
         translation: [0, 0],
         rotation: 0,
-        style: defaultConf.style
+        style: {
+          globalAlpha: shape.settings.opacity["default"],
+          strokeColor: shape.settings.strokeColor["default"],
+          lineWidth: shape.settings.lineWidth["default"],
+          lineDash: shape.settings.lineDash["default"]
+        }
       };
 
     case _Shapes.ShapeEnum.line:
       return {
+        toolId: shape.id,
         type: _Shapes.ShapeEnum.line,
-        id: _fp["default"].uniqueId("".concat(shape, "_")),
+        id: _fp["default"].uniqueId("".concat(shape.type, "_")),
         points: [cursorPosition, cursorPosition],
         translation: [0, 0],
         rotation: 0,
-        style: defaultConf.style
+        style: {
+          globalAlpha: shape.settings.opacity["default"],
+          strokeColor: shape.settings.strokeColor["default"],
+          lineWidth: shape.settings.lineWidth["default"],
+          lineDash: shape.settings.lineDash["default"],
+          lineArrow: shape.settings.lineArrow["default"]
+        }
       };
 
     case _Shapes.ShapeEnum.polygon:
       return {
+        toolId: shape.id,
         type: _Shapes.ShapeEnum.polygon,
-        id: _fp["default"].uniqueId("".concat(shape, "_")),
+        id: _fp["default"].uniqueId("".concat(shape.type, "_")),
         points: _fp["default"].flow(_fp["default"].range(0), _fp["default"].map(function () {
           return cursorPosition;
-        }))((_defaultConf$style$po = (_defaultConf$style = defaultConf.style) === null || _defaultConf$style === void 0 ? void 0 : _defaultConf$style.pointsCount) !== null && _defaultConf$style$po !== void 0 ? _defaultConf$style$po : 3),
+        }))(shape.settings.pointsCount["default"]),
         translation: [0, 0],
         rotation: 0,
-        style: defaultConf.style
+        style: {
+          globalAlpha: shape.settings.opacity["default"],
+          fillColor: shape.settings.fillColor["default"],
+          strokeColor: shape.settings.strokeColor["default"],
+          lineWidth: shape.settings.lineWidth["default"],
+          lineDash: shape.settings.lineDash["default"],
+          pointsCount: shape.settings.pointsCount["default"]
+        }
       };
 
     case _Shapes.ShapeEnum.curve:
       return {
+        toolId: shape.id,
         type: _Shapes.ShapeEnum.curve,
-        id: _fp["default"].uniqueId("".concat(shape, "_")),
+        id: _fp["default"].uniqueId("".concat(shape.type, "_")),
         points: _fp["default"].flow(_fp["default"].range(0), _fp["default"].map(function () {
           return cursorPosition;
-        }))((_defaultConf$style$po2 = (_defaultConf$style2 = defaultConf.style) === null || _defaultConf$style2 === void 0 ? void 0 : _defaultConf$style2.pointsCount) !== null && _defaultConf$style$po2 !== void 0 ? _defaultConf$style$po2 : 3),
+        }))(shape.settings.pointsCount["default"]),
         translation: [0, 0],
         rotation: 0,
-        style: defaultConf.style
+        style: {
+          globalAlpha: shape.settings.opacity["default"],
+          fillColor: shape.settings.fillColor["default"],
+          strokeColor: shape.settings.strokeColor["default"],
+          lineWidth: shape.settings.lineWidth["default"],
+          lineDash: shape.settings.lineDash["default"],
+          pointsCount: shape.settings.pointsCount["default"]
+        }
       };
 
     case _Shapes.ShapeEnum.rect:
     case _Shapes.ShapeEnum.square:
       return {
-        type: shape,
-        id: _fp["default"].uniqueId("".concat(shape, "_")),
+        toolId: shape.id,
+        type: shape.type,
+        id: _fp["default"].uniqueId("".concat(shape.type, "_")),
         x: cursorPosition[0],
         y: cursorPosition[1],
         width: 1,
         height: 1,
         translation: [0, 0],
         rotation: 0,
-        style: defaultConf.style
+        style: {
+          globalAlpha: shape.settings.opacity["default"],
+          fillColor: shape.settings.fillColor["default"],
+          strokeColor: shape.settings.strokeColor["default"],
+          lineWidth: shape.settings.lineWidth["default"],
+          lineDash: shape.settings.lineDash["default"]
+        }
       };
 
     case _Shapes.ShapeEnum.text:
       var defaultValue = [];
-      var fontSize = (0, _transform.calculateTextFontSize)(ctx, defaultValue, 50, (_defaultConf$style3 = defaultConf.style) === null || _defaultConf$style3 === void 0 ? void 0 : _defaultConf$style3.fontFamily);
+      var fontSize = (0, _transform.calculateTextFontSize)(ctx, defaultValue, 50, shape.settings.fontFamily["default"]);
       return {
+        toolId: shape.id,
         type: _Shapes.ShapeEnum.text,
-        id: _fp["default"].uniqueId("".concat(shape, "_")),
+        id: _fp["default"].uniqueId("".concat(shape.type, "_")),
         x: cursorPosition[0],
         y: cursorPosition[1],
         value: defaultValue,
@@ -142,33 +181,50 @@ var createShape = function createShape(ctx, shape, cursorPosition, defaultConf)
         height: fontSize * (defaultValue.length || 1),
         translation: [0, 0],
         rotation: 0,
-        style: defaultConf.style
+        style: {
+          globalAlpha: shape.settings.opacity["default"],
+          strokeColor: shape.settings.strokeColor["default"],
+          fontFamily: shape.settings.fontFamily["default"]
+        }
       };
 
     case _Shapes.ShapeEnum.ellipse:
       return {
+        toolId: shape.id,
         type: _Shapes.ShapeEnum.ellipse,
-        id: _fp["default"].uniqueId("".concat(shape, "_")),
+        id: _fp["default"].uniqueId("".concat(shape.type, "_")),
         x: cursorPosition[0],
         y: cursorPosition[1],
         radiusX: 0,
         radiusY: 0,
         translation: [0, 0],
         rotation: 0,
-        style: defaultConf.style
+        style: {
+          globalAlpha: shape.settings.opacity["default"],
+          fillColor: shape.settings.fillColor["default"],
+          strokeColor: shape.settings.strokeColor["default"],
+          lineWidth: shape.settings.lineWidth["default"],
+          lineDash: shape.settings.lineDash["default"]
+        }
       };
 
     case _Shapes.ShapeEnum.circle:
-    default:
       return {
+        toolId: shape.id,
         type: _Shapes.ShapeEnum.circle,
-        id: _fp["default"].uniqueId("".concat(shape, "_")),
+        id: _fp["default"].uniqueId("".concat(shape.type, "_")),
         x: cursorPosition[0],
         y: cursorPosition[1],
         radius: 0,
         translation: [0, 0],
         rotation: 0,
-        style: defaultConf.style
+        style: {
+          globalAlpha: shape.settings.opacity["default"],
+          fillColor: shape.settings.fillColor["default"],
+          strokeColor: shape.settings.strokeColor["default"],
+          lineWidth: shape.settings.lineWidth["default"],
+          lineDash: shape.settings.lineDash["default"]
+        }
       };
   }
 };

package/dist/utils/style.js

@@ -24,7 +24,8 @@ var getShapePicture = function getShapePicture(shape) {
       return _icons.curveIcon;
 
     case _Shapes.ShapeEnum.rect:
-      return _icons.recIcon;
+      return _icons.squareIcon;
+    // temporary
 
     case _Shapes.ShapeEnum.square:
       return _icons.squareIcon;
@@ -33,7 +34,8 @@ var getShapePicture = function getShapePicture(shape) {
       return _icons.circleIcon;
 
     case _Shapes.ShapeEnum.ellipse:
-      return _icons.ellipseIcon;
+      return _icons.circleIcon;
+    // temporary
 
     case _Shapes.ShapeEnum.text:
       return _icons.textIcon;

package/dist/utils/toolbar.js

@@ -5,33 +5,88 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getCurrentStructure = void 0;
+exports.sanitizeTools = exports.getCurrentStructure = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _Shapes = require("../types/Shapes");
+
 var _fp = _interopRequireDefault(require("lodash/fp"));
 
+var _tools = require("../constants/tools");
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var getCurrentStructure = function getCurrentStructure(availableTools, defaultStructure) {
-  return _fp["default"].flow(_fp["default"].map(function (group) {
+  return _fp["default"].flow(_fp["default"].flatMap(function (group) {
     if (!_fp["default"].isObject(group)) {
-      if (_fp["default"].includes(group, availableTools)) {
-        return group;
-      }
-
-      return null;
+      return _fp["default"].filter({
+        type: group
+      }, availableTools);
     }
 
-    var tools = _fp["default"].intersection(availableTools, group.tools);
+    var toolsType = _fp["default"].filter(function (tool) {
+      return _fp["default"].includes(tool.type, group.toolsType);
+    }, availableTools);
 
-    if (!tools) return null;
+    if (!toolsType) return null;
     return _objectSpread(_objectSpread({}, group), {}, {
-      tools: tools
+      toolsType: toolsType
     });
   }), _fp["default"].compact)(defaultStructure);
 };
 
-exports.getCurrentStructure = getCurrentStructure;
+exports.getCurrentStructure = getCurrentStructure;
+
+var sanitizeTools = function sanitizeTools(tools) {
+  var withPicture = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+
+  var customizer = function customizer(objValue, srcValue) {
+    if (_fp["default"].isArray(objValue)) {
+      return srcValue;
+    }
+  };
+
+  return _fp["default"].flow(_fp["default"].map(function (tool) {
+    if (!_fp["default"].isObject(tool)) return null;
+
+    switch (_fp["default"].get('type', tool)) {
+      case _Shapes.ShapeEnum.brush:
+        return _fp["default"].mergeWith(customizer, _tools.DEFAULT_SHAPE_BRUSH, tool);
+
+      case _Shapes.ShapeEnum.circle:
+        return _fp["default"].mergeWith(customizer, _tools.DEFAULT_SHAPE_CIRCLE, tool);
+
+      case _Shapes.ShapeEnum.curve:
+        return _fp["default"].mergeWith(customizer, _tools.DEFAULT_SHAPE_CURVE, tool);
+
+      case _Shapes.ShapeEnum.ellipse:
+        return _fp["default"].mergeWith(customizer, _tools.DEFAULT_SHAPE_ELLIPSE, tool);
+
+      case _Shapes.ShapeEnum.line:
+        return _fp["default"].mergeWith(customizer, _tools.DEFAULT_SHAPE_LINE, tool);
+
+      case _Shapes.ShapeEnum.polygon:
+        return _fp["default"].mergeWith(customizer, _tools.DEFAULT_SHAPE_POLYGON, tool);
+
+      case _Shapes.ShapeEnum.rect:
+        return _fp["default"].mergeWith(customizer, _tools.DEFAULT_SHAPE_RECT, tool);
+
+      case _Shapes.ShapeEnum.square:
+        return _fp["default"].mergeWith(customizer, _tools.DEFAULT_SHAPE_SQUARE, tool);
+
+      case _Shapes.ShapeEnum.text:
+        return _fp["default"].mergeWith(customizer, _tools.DEFAULT_SHAPE_TEXT, tool);
+    }
+
+    return null;
+  }), function (tools) {
+    return withPicture ? [].concat((0, _toConsumableArray2["default"])(tools), [_tools.DEFAULT_SHAPE_PICTURE]) : tools;
+  }, _fp["default"].compact)(tools);
+};
+
+exports.sanitizeTools = sanitizeTools;

package/dist/utils/transform.js

@@ -135,7 +135,7 @@ var updatePolygonLinesCount = function updatePolygonLinesCount(shape, newPointsC
   if (currentPointsCount === newPointsCount) return shape;
 
   if (currentPointsCount > newPointsCount) {
-    return _fp["default"].set('points', shape.points.slice(0, newPointsCount), shape);
+    return _fp["default"].set('style.pointsCount', shape.points.slice(0, newPointsCount), shape);
   } else {
     //TODO : better distribution for new points
     var nbPointsToAdd = newPointsCount - currentPointsCount;
@@ -144,7 +144,7 @@ var updatePolygonLinesCount = function updatePolygonLinesCount(shape, newPointsC
       return [shape.points[0][0] + (shape.points[1][0] - shape.points[0][0]) * (index + 1) / (nbPointsToAdd + 1), shape.points[0][1] + (shape.points[1][1] - shape.points[0][1]) * (index + 1) / (nbPointsToAdd + 1)];
     }))(nbPointsToAdd);
 
-    return _fp["default"].set('points', [shape.points[0]].concat((0, _toConsumableArray2["default"])(newPoints), (0, _toConsumableArray2["default"])(shape.points.slice(1, shape.points.length))), shape);
+    return _fp["default"].set('style.pointsCount', [shape.points[0]].concat((0, _toConsumableArray2["default"])(newPoints), (0, _toConsumableArray2["default"])(shape.points.slice(1, shape.points.length))), shape);
   }
 };
 
@@ -339,7 +339,7 @@ var calculateTextFontSize = function calculateTextFontSize(ctx, text, maxWidth)
   ctx.font = "1px ".concat(fontFamily);
   return (_$flow = _fp["default"].flow(_fp["default"].map(function (value) {
     return maxWidth / ctx.measureText(value).width;
-  }), _fp["default"].min)(text)) !== null && _$flow !== void 0 ? _$flow : 12;
+  }), _fp["default"].min)(text)) !== null && _$flow !== void 0 ? _$flow : _style.STYLE_FONT_SIZE_DEFAULT;
 };
 
 exports.calculateTextFontSize = calculateTextFontSize;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yorab/react-paint",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "keywords": [],
   "author": "Yohann Rabatel",
   "license": "MIT",