@yorab/react-paint 0.2.2

package/dist/styles.css

@@ -0,0 +1,88 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
+    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background: #F3F3F3;
+}
+
+.examples {
+  display: flex;
+}
+
+.menu {
+  width: 250px;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.menu a {
+  margin: 8px;
+  padding: 4px;
+}
+
+.menu a.selected {
+  color: green;
+}
+
+.currentApp {
+  flex: 1;
+  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;-webkit-transform:var(--s1unz6yq-0);-ms-transform:var(--s1unz6yq-0);transform:var(--s1unz6yq-0);color:var(--s1unz6yq-1);font-size:var(--s1unz6yq-2);line-height:var(--s1unz6yq-2);font-family:var(--s1unz6yq-4);}
+.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:white;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:8px;color:var(--text-color);margin:2px 4px;padding:0;}.sq3bzv4[data-selected='1']{color:var(--text-color-selected);background:var(--bg-color-selected);}.sq3bzv4[data-hidden='1']{visibility:hidden;}.sq3bzv4[data-disabled='1']{opacity:0.25;cursor:default;}.sq3bzv4[data-selected='0'][data-disabled='0']:hover{background:var(--btn-hover);}.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(--bg-color);bottom:100%;box-shadow:0 3px 8px rgb(0 0 0 / 24%);padding:4px;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(--bg-color);box-sizing:border-box;overflow-y:auto;min-width:200px;}
+.szboplp{border:3px solid transparent;padding:4px 0px;position:relative;background:var(--bg-color);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(--btn-hover);}.szboplp[data-is-dragging='1']{opacity:0.4;}.szboplp[data-selected='1']{color:var(--text-color-selected);border:3px solid var(--bg-color-selected);}.szboplp[data-selected='0'][data-disabled='0']:hover{background:var(--btn-hover);}.szboplp[data-disabled='1']{opacity:0.25;cursor:default;}.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;}.s11gt4hl hr{opacity:0.6;width:100%;border:none;border-top:1px solid var(--text-color);}
+.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;}.s1uphjfh hr{width:100%;border:none;border-top:1px solid var(--text-color);opacity:0.6;}
+.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(--bg-color);box-shadow:0 3px 8px rgb(0 0 0 / 24%);padding:4px;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(--text-color);border:2px solid var(--text-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(--bg-color);}
+.s1g032mh{display:inline-block;text-align:left;background:var(--bg-color);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{color:var(--text-color-selected);background:var(--bg-color-selected);}.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(--bg-color);position:relative;}
+.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-editor-rotation-s4auclc 1s infinite;animation:react-paint-editor-rotation-s4auclc 1s infinite;}@-webkit-keyframes react-paint-editor-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-editor-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{--bg-color:white;--text-color:#364181;--btn-hover:#afd8d8;--bg-color-selected:#364181;--text-color-selected:white;--shrinkedcanvas-bg-color:white;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;color:var(--text-color);position:relative;overflow:hidden;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.s1v9piyg[data-grow='false']{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;max-width:var(--s1v9piyg-0);}.s1v9piyg[data-shrink='false']{min-width:var(--s1v9piyg-1);}
+.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);}.layoutPanelOpened .s6o5tmu{background:var(--shrinkedcanvas-bg-color);}.s6o5tmu[data-grow='true']{width:100%;}.s6o5tmu[data-grow='false']{width:var(--s6o5tmu-1);}

package/dist/types/Mode.d.ts

@@ -0,0 +1,51 @@
+import { Point, DrawableShape } from './Shapes';
+export declare enum SelectionModeLib {
+    'default' = "default",
+    'brush' = "brush",
+    'resize' = "resize",
+    'rotate' = "rotate",
+    'translate' = "translate",
+    'textedition' = "textedition"
+}
+export declare type SelectionModeDefault = {
+    mode: SelectionModeLib.default;
+};
+export declare type SelectionModeBrush = {
+    mode: SelectionModeLib.brush;
+};
+export declare type SelectionModeEditText = {
+    mode: SelectionModeLib.textedition;
+    defaultValue: string[];
+};
+export declare type SelectionModeResize<AnchorType extends Point | number = Point> = {
+    mode: SelectionModeLib.resize;
+    cursorStartPosition: Point;
+    originalShape: DrawableShape;
+    anchor: AnchorType;
+};
+export declare type SelectionModeRotate = {
+    mode: SelectionModeLib.rotate;
+    cursorStartPosition: Point;
+    originalShape: DrawableShape;
+    center: Point;
+};
+export declare type SelectionModeTranslate = {
+    mode: SelectionModeLib.translate;
+    cursorStartPosition: Point;
+    originalShape: DrawableShape;
+};
+export declare type SelectionModeData<AnchorType extends Point | number> = SelectionModeDefault | SelectionModeBrush | SelectionModeResize<AnchorType> | SelectionModeRotate | SelectionModeTranslate | SelectionModeEditText;
+export declare type HoverModeData = {
+    mode: SelectionModeLib.default;
+} | {
+    mode: SelectionModeLib.resize;
+    anchor: Point | number;
+} | {
+    mode: SelectionModeLib.brush;
+} | {
+    mode: SelectionModeLib.rotate;
+} | {
+    mode: SelectionModeLib.translate;
+} | {
+    mode: SelectionModeLib.textedition;
+};

package/dist/types/Mode.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelectionModeLib = void 0;
+var SelectionModeLib;
+exports.SelectionModeLib = SelectionModeLib;
+
+(function (SelectionModeLib) {
+  SelectionModeLib["default"] = "default";
+  SelectionModeLib["brush"] = "brush";
+  SelectionModeLib["resize"] = "resize";
+  SelectionModeLib["rotate"] = "rotate";
+  SelectionModeLib["translate"] = "translate";
+  SelectionModeLib["textedition"] = "textedition";
+})(SelectionModeLib || (exports.SelectionModeLib = SelectionModeLib = {}));

package/dist/types/Shapes.d.ts

@@ -0,0 +1,122 @@
+export declare enum ShapeEnum {
+    'brush' = "brush",
+    'rect' = "rect",
+    'square' = "square",
+    'line' = "line",
+    'polygon' = "polygon",
+    'circle' = "circle",
+    'curve' = "curve",
+    'ellipse' = "ellipse",
+    'picture' = "picture",
+    'text' = "text"
+}
+export declare enum ToolEnum {
+    selection = "selection",
+    undo = "undo",
+    redo = "redo",
+    clear = "clear",
+    export = "export",
+    loadFile = "loadfile",
+    saveFile = "savefile",
+    move = "move"
+}
+export declare type ToolsType = ShapeEnum | ToolEnum;
+export declare type Point = [number, number];
+export declare type StyledShape = {
+    visible?: boolean;
+    locked?: boolean;
+    style?: {
+        fillColor?: string;
+        globalAlpha?: number;
+        strokeColor?: string;
+        lineWidth?: number;
+        lineDash?: number;
+        lineArrow?: number;
+        pointsCount?: number;
+        fontFamily?: string;
+    };
+};
+declare type Drawable = {
+    id: string;
+    translation: Point;
+    rotation: number;
+};
+export declare type Rect = StyledShape & {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export declare type Square = Rect;
+export declare type StoredPicture = Rect & {
+    src: string;
+};
+export declare type Picture = StoredPicture & {
+    img: HTMLImageElement;
+};
+export declare type Text = Rect & {
+    value: string[];
+    fontSize: number;
+};
+export declare type Line = StyledShape & {
+    points: [Point, Point];
+};
+export declare type Triangle = StyledShape & {
+    points: [Point, Point, Point];
+};
+export declare type Polygon = StyledShape & {
+    points: Point[];
+};
+export declare type Curve = StyledShape & {
+    points: Point[];
+};
+export declare type Brush = StyledShape & {
+    points: Point[][];
+};
+export declare type Circle = StyledShape & {
+    x: number;
+    y: number;
+    radius: number;
+};
+export declare type Ellipse = StyledShape & {
+    x: number;
+    y: number;
+    radiusX: number;
+    radiusY: number;
+};
+export declare type DrawableRect = Rect & Drawable & {
+    type: ShapeEnum.rect;
+};
+export declare type DrawableSquare = Square & Drawable & {
+    type: ShapeEnum.square;
+};
+export declare type DrawablePictureJson = StoredPicture & Drawable & {
+    type: ShapeEnum.picture;
+};
+export declare type DrawablePicture = Picture & Drawable & {
+    type: ShapeEnum.picture;
+};
+export declare type DrawableText = Text & Drawable & {
+    type: ShapeEnum.text;
+};
+export declare type DrawableLine = Line & Drawable & {
+    type: ShapeEnum.line;
+};
+export declare type DrawablePolygon = Polygon & Drawable & {
+    type: ShapeEnum.polygon;
+};
+export declare type DrawableCurve = Curve & Drawable & {
+    type: ShapeEnum.curve;
+};
+export declare type DrawableBrush = Brush & Drawable & {
+    type: ShapeEnum.brush;
+};
+export declare type DrawableCircle = Circle & Drawable & {
+    type: ShapeEnum.circle;
+};
+export declare type DrawableEllipse = Ellipse & Drawable & {
+    type: ShapeEnum.ellipse;
+};
+export declare type DrawableShape = DrawableRect | DrawableSquare | DrawablePicture | DrawableText | DrawableLine | DrawablePolygon | DrawableCurve | DrawableBrush | DrawableCircle | DrawableEllipse;
+export declare type DrawableShapeJson = DrawableRect | DrawableSquare | DrawablePictureJson | DrawableText | DrawableLine | DrawableCurve | DrawablePolygon | DrawableBrush | DrawableCircle | DrawableEllipse;
+export {};

package/dist/types/Shapes.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ToolEnum = exports.ShapeEnum = void 0;
+var ShapeEnum;
+exports.ShapeEnum = ShapeEnum;
+
+(function (ShapeEnum) {
+  ShapeEnum["brush"] = "brush";
+  ShapeEnum["rect"] = "rect";
+  ShapeEnum["square"] = "square";
+  ShapeEnum["line"] = "line";
+  ShapeEnum["polygon"] = "polygon";
+  ShapeEnum["circle"] = "circle";
+  ShapeEnum["curve"] = "curve";
+  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 = {}));

package/dist/types/keyboard.d.ts

@@ -0,0 +1,15 @@
+export declare enum KeyboardCode {
+    ArrowUp = "ArrowUp",
+    ArrowDown = "ArrowDown",
+    ArrowLeft = "ArrowLeft",
+    ArrowRight = "ArrowRight",
+    Delete = "Delete",
+    Backspace = "Backspace",
+    Escape = "Escape",
+    Z = "z",
+    Y = "y"
+}
+export declare enum KeyboardCommand {
+    Copy = "copy",
+    Paste = "paste"
+}

package/dist/types/keyboard.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.KeyboardCommand = exports.KeyboardCode = void 0;
+var KeyboardCode;
+exports.KeyboardCode = KeyboardCode;
+
+(function (KeyboardCode) {
+  KeyboardCode["ArrowUp"] = "ArrowUp";
+  KeyboardCode["ArrowDown"] = "ArrowDown";
+  KeyboardCode["ArrowLeft"] = "ArrowLeft";
+  KeyboardCode["ArrowRight"] = "ArrowRight";
+  KeyboardCode["Delete"] = "Delete";
+  KeyboardCode["Backspace"] = "Backspace";
+  KeyboardCode["Escape"] = "Escape";
+  KeyboardCode["Z"] = "z";
+  KeyboardCode["Y"] = "y";
+})(KeyboardCode || (exports.KeyboardCode = KeyboardCode = {}));
+
+var KeyboardCommand;
+exports.KeyboardCommand = KeyboardCommand;
+
+(function (KeyboardCommand) {
+  KeyboardCommand["Copy"] = "copy";
+  KeyboardCommand["Paste"] = "paste";
+})(KeyboardCommand || (exports.KeyboardCommand = KeyboardCommand = {}));

package/dist/utils/data.d.ts

@@ -0,0 +1,4 @@
+import { DrawablePicture, Point, DrawableShape, ShapeEnum, StyledShape } from 'types/Shapes';
+export declare const createPicture: (fileOrUrl: File | string, maxPictureSize: number) => Promise<DrawablePicture>;
+export declare const createShape: (ctx: CanvasRenderingContext2D, shape: ShapeEnum, cursorPosition: Point, defaultConf: StyledShape) => DrawableShape;
+export declare const copyShape: (shape: DrawableShape) => DrawableShape;

package/dist/utils/data.js

@@ -0,0 +1,178 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createShape = exports.createPicture = exports.copyShape = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _fp = _interopRequireDefault(require("lodash/fp"));
+
+var _transform = require("./transform");
+
+var _Shapes = require("../types/Shapes");
+
+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 createPicture = function createPicture(fileOrUrl, maxPictureSize) {
+  return new Promise(function (resolve, reject) {
+    var img = new Image();
+
+    img.onload = function () {
+      var maxSize = Math.min(Math.max(img.width, img.height), maxPictureSize);
+      var imgRatio = img.width / img.height;
+      var pictureShape = {
+        type: _Shapes.ShapeEnum.picture,
+        id: _fp["default"].uniqueId(_Shapes.ShapeEnum.picture),
+        x: 0,
+        y: 0,
+        width: imgRatio < 1 ? imgRatio * maxSize : maxSize,
+        height: imgRatio > 1 ? maxSize / imgRatio : maxSize,
+        src: img.src,
+        img: img,
+        translation: [0, 0],
+        rotation: 0
+      };
+      resolve(pictureShape);
+    };
+
+    if (fileOrUrl instanceof File) {
+      img.src = URL.createObjectURL(fileOrUrl);
+    } else {
+      img.src = fileOrUrl;
+    }
+
+    img.onerror = function () {
+      reject(new Error('Error while loading the src'));
+    };
+
+    setTimeout(function () {
+      reject(new Error('Timeout while loading the src'));
+    }, 4000);
+  });
+};
+
+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) {
+    case _Shapes.ShapeEnum.brush:
+      return {
+        type: _Shapes.ShapeEnum.brush,
+        id: _fp["default"].uniqueId(shape),
+        points: [[cursorPosition]],
+        translation: [0, 0],
+        rotation: 0,
+        style: defaultConf.style
+      };
+
+    case _Shapes.ShapeEnum.line:
+      return {
+        type: _Shapes.ShapeEnum.line,
+        id: _fp["default"].uniqueId(shape),
+        points: [cursorPosition, cursorPosition],
+        translation: [0, 0],
+        rotation: 0,
+        style: defaultConf.style
+      };
+
+    case _Shapes.ShapeEnum.polygon:
+      return {
+        type: _Shapes.ShapeEnum.polygon,
+        id: _fp["default"].uniqueId(shape),
+        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),
+        translation: [0, 0],
+        rotation: 0,
+        style: defaultConf.style
+      };
+
+    case _Shapes.ShapeEnum.curve:
+      return {
+        type: _Shapes.ShapeEnum.curve,
+        id: _fp["default"].uniqueId(shape),
+        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),
+        translation: [0, 0],
+        rotation: 0,
+        style: defaultConf.style
+      };
+
+    case _Shapes.ShapeEnum.rect:
+    case _Shapes.ShapeEnum.square:
+      return {
+        type: shape,
+        id: _fp["default"].uniqueId(shape),
+        x: cursorPosition[0],
+        y: cursorPosition[1],
+        width: 1,
+        height: 1,
+        translation: [0, 0],
+        rotation: 0,
+        style: defaultConf.style
+      };
+
+    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);
+      return {
+        type: _Shapes.ShapeEnum.text,
+        id: _fp["default"].uniqueId(shape),
+        x: cursorPosition[0],
+        y: cursorPosition[1],
+        value: defaultValue,
+        fontSize: fontSize,
+        width: 50,
+        height: fontSize * (defaultValue.length || 1),
+        translation: [0, 0],
+        rotation: 0,
+        style: defaultConf.style
+      };
+
+    case _Shapes.ShapeEnum.ellipse:
+      return {
+        type: _Shapes.ShapeEnum.ellipse,
+        id: _fp["default"].uniqueId(shape),
+        x: cursorPosition[0],
+        y: cursorPosition[1],
+        radiusX: 0,
+        radiusY: 0,
+        translation: [0, 0],
+        rotation: 0,
+        style: defaultConf.style
+      };
+
+    case _Shapes.ShapeEnum.circle:
+    default:
+      return {
+        type: _Shapes.ShapeEnum.circle,
+        id: _fp["default"].uniqueId(shape),
+        x: cursorPosition[0],
+        y: cursorPosition[1],
+        radius: 0,
+        translation: [0, 0],
+        rotation: 0,
+        style: defaultConf.style
+      };
+  }
+};
+
+exports.createShape = createShape;
+
+var copyShape = function copyShape(shape) {
+  return _objectSpread(_objectSpread({}, shape), {}, {
+    id: _fp["default"].uniqueId(shape.type),
+    translation: [shape.translation[0] + 20, shape.translation[1] + 20]
+  });
+};
+
+exports.copyShape = copyShape;

package/dist/utils/draw.d.ts

@@ -0,0 +1,18 @@
+import { Circle, Ellipse, Line, Picture, Polygon, Rect, DrawableShape, Point, Brush, Text, Triangle, Curve } from 'types/Shapes';
+export declare const drawBrush: (ctx: CanvasRenderingContext2D, brush: Brush) => void;
+export declare const drawTriangle: (ctx: CanvasRenderingContext2D, triangle: Triangle) => void;
+export declare const drawLine: (ctx: CanvasRenderingContext2D, line: Line) => void;
+export declare const drawPolygon: (ctx: CanvasRenderingContext2D, polygon: Polygon) => void;
+export declare const drawCurve: (ctx: CanvasRenderingContext2D, curve: Curve) => void;
+export declare const drawCircle: (ctx: CanvasRenderingContext2D, circle: Circle) => void;
+export declare const drawEllipse: (ctx: CanvasRenderingContext2D, ellipse: Ellipse) => void;
+export declare const drawRect: (ctx: CanvasRenderingContext2D, rect: Rect) => void;
+export declare const drawText: (ctx: CanvasRenderingContext2D, text: Text) => void;
+export declare const drawPicture: (ctx: CanvasRenderingContext2D, picture: Picture) => void;
+export declare const drawShape: (ctx: CanvasRenderingContext2D, shape: DrawableShape, canvasOffset: Point) => void;
+export declare const drawSelection: ({ ctx, shape, canvasOffset, withAnchors }: {
+    ctx: CanvasRenderingContext2D;
+    shape: DrawableShape;
+    canvasOffset: Point;
+    withAnchors?: boolean | undefined;
+}) => void;