@yorab/react-paint 0.6.6 → 0.7.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (64) hide show
  1. package/README.md +3 -5
  2. package/dist/components/App.js +30 -57
  3. package/dist/components/Canvas.js +32 -40
  4. package/dist/components/common/Button.js +4 -4
  5. package/dist/components/common/Loading.js +8 -5
  6. package/dist/components/common/Modal.js +3 -3
  7. package/dist/components/common/Panel.js +7 -11
  8. package/dist/components/common/Snackbar.js +6 -6
  9. package/dist/components/settings/ColorField.js +3 -3
  10. package/dist/components/settings/FontFamilyField.js +1 -1
  11. package/dist/components/settings/Layouts.js +36 -26
  12. package/dist/components/settings/LineArrowField.js +3 -3
  13. package/dist/components/settings/LineTypeField.js +2 -2
  14. package/dist/components/settings/RangeField.js +1 -1
  15. package/dist/components/settings/SelectField.js +1 -1
  16. package/dist/components/settings/SettingsBar.js +9 -7
  17. package/dist/components/toolbox/EditTextBox.js +19 -9
  18. package/dist/components/toolbox/MenuGroup.js +9 -7
  19. package/dist/components/toolbox/Toolbar.js +7 -9
  20. package/dist/components/toolbox/ToolbarGroup.js +24 -11
  21. package/dist/constants/app.js +51 -0
  22. package/dist/constants/icons.js +2 -8
  23. package/dist/constants/loading.js +8 -0
  24. package/dist/constants/shapes.js +4 -2
  25. package/dist/constants/snackbar.js +6 -14
  26. package/dist/constants/style.js +12 -9
  27. package/dist/constants/tools.js +20 -24
  28. package/dist/hooks/useComponent.js +3 -1
  29. package/dist/hooks/useDrawableCanvas.js +35 -37
  30. package/dist/hooks/useKeyboard.js +60 -33
  31. package/dist/hooks/useShapes.js +2 -2
  32. package/dist/styles.css +16 -13
  33. package/dist/types/Mode.js +1 -13
  34. package/dist/types/Shapes.js +1 -17
  35. package/dist/types/snackbar.js +5 -0
  36. package/dist/types/tools.js +1 -18
  37. package/dist/utils/canvas.js +49 -0
  38. package/dist/utils/data.js +5 -248
  39. package/dist/utils/dom.js +12 -0
  40. package/dist/utils/file.js +12 -7
  41. package/dist/utils/intersect.js +29 -66
  42. package/dist/utils/migration.js +59 -0
  43. package/dist/utils/selection.js +9 -11
  44. package/dist/utils/shapes/brush.js +135 -0
  45. package/dist/utils/shapes/circle.js +93 -0
  46. package/dist/utils/shapes/curve.js +55 -0
  47. package/dist/utils/shapes/default.js +73 -0
  48. package/dist/utils/shapes/ellipse.js +101 -0
  49. package/dist/utils/shapes/grid.js +36 -0
  50. package/dist/utils/shapes/index.js +341 -0
  51. package/dist/utils/shapes/line.js +179 -0
  52. package/dist/utils/shapes/picture.js +88 -0
  53. package/dist/utils/shapes/polygon.js +69 -0
  54. package/dist/utils/shapes/rectangle.js +100 -0
  55. package/dist/utils/shapes/text.js +128 -0
  56. package/dist/utils/shapes/triangle.js +24 -0
  57. package/dist/utils/style.js +10 -12
  58. package/dist/utils/toolbar.js +9 -11
  59. package/dist/utils/transform.js +25 -261
  60. package/dist/utils/trigo.js +42 -0
  61. package/package.json +7 -8
  62. package/dist/types/keyboard.js +0 -28
  63. package/dist/utils/draw.js +0 -431
  64. package/dist/utils/shapeData.js +0 -155
package/dist/styles.css CHANGED
@@ -33,28 +33,31 @@
33
33
 
34
34
  .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);opacity:var(--s1unz6yq-6);width:-webkit-max-content;width:-moz-max-content;width:max-content;}.s1unz6yq[data-fontbold='true']{font-weight:bold;}.s1unz6yq[data-fontitalic='true']{font-style:italic;}
35
35
  .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;}
36
- .s1538eht{position:relative;background-color:var(--canvas-bg);background-repeat:repeat;background-size:16px;overflow:hidden;display:grid;}.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%;}
36
+ .s1538eht{position:relative;background-color:var(--canvas-bg);background-repeat:repeat;background-size:16px;overflow:hidden;display:grid;}.s1538eht[data-grow='true']{width:100%;height:100%;}
37
37
  .s101qxdc{-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;}.s101qxdc[data-grow='true']{width:100%;}
38
38
  .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;grid-area:1 / 1;cursor:var(--sa4oq48-0);}.sa4oq48[data-grow='true']{width:100%;}
39
39
  .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;}
40
40
  .sst453j{width:100%;box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:2px 6px;}
41
41
  .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;}
42
42
  .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;}
43
- .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;box-sizing:border-box;}.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;}.s1xzg253[data-fitcontainer='true']{max-width:100%;}
43
+ .s1xzg253{position:absolute;z-index:3;background:var(--toolbar-bg);box-shadow:0 3px 8px rgb(0 0 0 / 24%);padding:8px;border-radius:8px;white-space:nowrap;box-sizing:border-box;}.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;}.s1xzg253[data-position='bottom']{bottom:100%;}.s1xzg253[data-position='top']{top:100%;}.s1xzg253[data-fitcontainer='true']{max-width:100%;}
44
44
  .s17qj3jh{margin-bottom:8px;margin-top:4px;font-size:18px;}
45
45
  .su3a8bs{display:inline-block;background:var(--toolbar-bg);box-sizing:border-box;overflow-y:auto;min-width:200px;}
46
46
  .szboplp{margin:2px 0;}.szboplp:not(:hover){opacity:0.2;}
47
47
  .sff5xt{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;}.sff5xt[data-is-over='1']{border:3px dotted var(--font-hover-bg);}.sff5xt[data-is-dragging='1']{opacity:0.4;}.sff5xt[data-selected='1']{color:var(--font-selected-color);background:var(--font-selected-bg);}.sff5xt[data-selected='1'] .szboplp{color:white;}.sff5xt[data-selected='0'][data-disabled='0']{background:var(--font-bg);color:var(--font-color);}.sff5xt[data-selected='0'][data-disabled='0']:hover{color:var(--font-hover-color);background:var(--font-hover-bg);}.sff5xt[data-disabled='1']{cursor:default;color:var(--font-disabled-color);background:var(--font-disabled-bg);}.sff5xt[data-disabled='0']{cursor:move;}.sff5xt > span{height:20px;line-height:1;color:#8a8a8a;}.sff5xt > span > svg{fill:#8a8a8a;width:20px;height:20px;padding:0 4px;-webkit-transform:scale(0.75);-ms-transform:scale(0.75);transform:scale(0.75);}
48
48
  .sj3bift{margin:2px 0;}.sj3bift[data-visible='false']{opacity:0.2;}
49
49
  .s10ip0a4{margin:2px 0;}.s10ip0a4[data-locked='false']{opacity:0.2;}
50
- .s1j9uq9o[data-grid='false'] svg{opacity:0.2;}
51
- .s156ddbb{-webkit-flex:1;-ms-flex:1;flex:1;}
52
- .s11gt4hl{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;}
53
- .s13cxqhq{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;}
54
- .s1idv8qv{opacity:0.6;text-align:center;padding:12px 0px;}
55
- .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;}
50
+ .s1j9uq9o span{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
51
+ .s156ddbb{min-width:60px;font-weight:bold;}
52
+ .s11gt4hl{-webkit-flex:1;-ms-flex:1;flex:1;}
53
+ .s13cxqhq.s13cxqhq{bottom:0;top:unset;}
54
+ .s1idv8qv{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;max-height:100%;}
55
+ .s1mhvlda{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;}
56
+ .sr4amic{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;}
57
+ .s13llc5i{opacity:0.6;text-align:center;padding:12px 0px;}
58
+ .s1bvz4xj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.s1bvz4xj[data-vertical='1']{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
56
59
  .siejlch{position:relative;display:inline-block;}
57
- .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;}
60
+ .s1uphjfh{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.s1uphjfh[data-vertical='1']{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
58
61
  .s1e5a6k5{position:relative;display:inline-block;}
59
62
  .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;}.s1c8tp02[data-position='center']{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.s1c8tp02[data-position='bottom']{-webkit-align-items:end;-webkit-box-align:end;-ms-flex-align:end;align-items:end;}
60
63
  .svkxpz4{display:grid;background:var(--toolbar-bg);box-shadow:0 3px 8px rgb(0 0 0 / 24%);padding:4px;border-radius:8px;white-space:nowrap;position:relative;}
@@ -79,10 +82,10 @@
79
82
  .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;}
80
83
  .sa7lzh9{-webkit-flex:1;-ms-flex:1;flex:1;}
81
84
  .s7b85in{grid-template-columns:repeat(auto-fill,40px);width:100%;}
82
- .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);}
83
- .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;}
85
+ .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='infos']{background:#646464;color:white;}.s1xssqat[data-type='error']{background:#911717;color:white;}.s1xssqat[data-type='success']{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);}
86
+ .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:0;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
84
87
  .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;}
85
- .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);}}
88
+ .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);}}
86
89
  .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;}
87
90
  .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;-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);}
88
- .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);}
91
+ .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-1);}.s6o5tmu[data-grow='true']{width:100%;}.s6o5tmu[data-grow='false']{width:var(--s6o5tmu-0);}
@@ -2,16 +2,4 @@
2
2
 
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
- });
6
- exports.SelectionModeLib = void 0;
7
- let SelectionModeLib;
8
- exports.SelectionModeLib = SelectionModeLib;
9
-
10
- (function (SelectionModeLib) {
11
- SelectionModeLib["default"] = "default";
12
- SelectionModeLib["brush"] = "brush";
13
- SelectionModeLib["resize"] = "resize";
14
- SelectionModeLib["rotate"] = "rotate";
15
- SelectionModeLib["translate"] = "translate";
16
- SelectionModeLib["textedition"] = "textedition";
17
- })(SelectionModeLib || (exports.SelectionModeLib = SelectionModeLib = {}));
5
+ });
@@ -2,20 +2,4 @@
2
2
 
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
- });
6
- exports.ShapeEnum = void 0;
7
- let ShapeEnum;
8
- exports.ShapeEnum = ShapeEnum;
9
-
10
- (function (ShapeEnum) {
11
- ShapeEnum["brush"] = "brush";
12
- ShapeEnum["rect"] = "rect";
13
- ShapeEnum["square"] = "square";
14
- ShapeEnum["line"] = "line";
15
- ShapeEnum["polygon"] = "polygon";
16
- ShapeEnum["circle"] = "circle";
17
- ShapeEnum["curve"] = "curve";
18
- ShapeEnum["ellipse"] = "ellipse";
19
- ShapeEnum["picture"] = "picture";
20
- ShapeEnum["text"] = "text";
21
- })(ShapeEnum || (exports.ShapeEnum = ShapeEnum = {}));
5
+ });
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
@@ -2,21 +2,4 @@
2
2
 
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
- });
6
- exports.ActionsEnum = void 0;
7
- // default
8
- let ActionsEnum;
9
- exports.ActionsEnum = ActionsEnum;
10
-
11
- (function (ActionsEnum) {
12
- ActionsEnum["selection"] = "selection";
13
- ActionsEnum["undo"] = "undo";
14
- ActionsEnum["redo"] = "redo";
15
- ActionsEnum["clear"] = "clear";
16
- ActionsEnum["export"] = "export";
17
- ActionsEnum["loadFile"] = "loadfile";
18
- ActionsEnum["saveFile"] = "savefile";
19
- ActionsEnum["move"] = "move";
20
- ActionsEnum["uploadPicture"] = "uploadpicture";
21
- ActionsEnum["addUrlPicture"] = "addurlpicture";
22
- })(ActionsEnum || (exports.ActionsEnum = ActionsEnum = {}));
5
+ });
@@ -0,0 +1,49 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.updateCanvasContext = exports.transformCanvas = exports.initCanvasContext = void 0;
7
+
8
+ var _shapes = require("../constants/shapes");
9
+
10
+ var _style = require("../constants/style");
11
+
12
+ const initCanvasContext = ctx => {
13
+ ctx.lineCap = 'round';
14
+ ctx.lineJoin = 'round';
15
+ };
16
+
17
+ exports.initCanvasContext = initCanvasContext;
18
+
19
+ const updateCanvasContext = function (ctx) {
20
+ let style = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
21
+ const {
22
+ fillColor = 'transparent',
23
+ globalAlpha = 100,
24
+ strokeColor = _shapes.SELECTION_DEFAULT_COLOR,
25
+ lineWidth = _shapes.SELECTION_DEFAULT_WIDTH,
26
+ lineDash = 0
27
+ } = style;
28
+ globalAlpha !== undefined && (ctx.globalAlpha = globalAlpha / 100);
29
+ fillColor && (ctx.fillStyle = fillColor);
30
+ strokeColor && (ctx.strokeStyle = strokeColor);
31
+ lineWidth && (ctx.lineWidth = lineWidth);
32
+ lineDash !== undefined && lineWidth && ctx.setLineDash([_style.LINE_DASH_DATA[lineDash][0] * lineWidth, _style.LINE_DASH_DATA[lineDash][1] * lineWidth]);
33
+ };
34
+
35
+ exports.updateCanvasContext = updateCanvasContext;
36
+
37
+ const transformCanvas = (ctx, responsiveScale, canvasOffset, rotation, translation) => {
38
+ ctx.save();
39
+ ctx.scale(responsiveScale, responsiveScale);
40
+ ctx.translate(canvasOffset[0], canvasOffset[1]);
41
+
42
+ if (rotation !== 0) {
43
+ ctx.translate(translation[0], translation[1]);
44
+ ctx.rotate(rotation);
45
+ ctx.translate(-translation[0], -translation[1]);
46
+ }
47
+ };
48
+
49
+ exports.transformCanvas = transformCanvas;
@@ -5,267 +5,24 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports.roundValues = exports.createShape = exports.createPicture = exports.copyShape = exports.cleanShapesBeforeExport = exports.buildDataToExport = exports.addDefaultAndTempShapeProps = void 0;
8
+ exports.cleanShapesBeforeExport = exports.buildDataToExport = exports.addDefaultAndTempShapeProps = void 0;
9
9
 
10
10
  var _fp = _interopRequireDefault(require("lodash/fp"));
11
11
 
12
- var _transform = require("./transform");
13
-
14
- var _Shapes = require("../types/Shapes");
15
-
16
12
  var _file = require("./file");
17
13
 
18
- var _tools = require("../constants/tools");
19
-
20
- const createPicture = (fileOrUrl, maxPictureWidth, maxPictureHeight) => {
21
- return new Promise((resolve, reject) => {
22
- const img = new Image();
23
-
24
- img.onload = () => {
25
- const [width, height] = (0, _transform.fitContentInsideContainer)(img.width, img.height, maxPictureWidth, maxPictureHeight, true);
26
- const pictureShape = {
27
- toolId: _tools.DEFAULT_SHAPE_PICTURE.id,
28
- type: _Shapes.ShapeEnum.picture,
29
- id: _fp.default.uniqueId("".concat(_Shapes.ShapeEnum.picture, "_")),
30
- x: (maxPictureWidth - width) / 2,
31
- y: (maxPictureHeight - height) / 2,
32
- width,
33
- height,
34
- src: fileOrUrl instanceof File ? img.src : fileOrUrl,
35
- img,
36
- translation: [0, 0],
37
- rotation: 0
38
- };
39
- resolve(pictureShape);
40
- };
41
-
42
- img.onerror = () => {
43
- reject(new Error('Some images could not be loaded'));
44
- };
45
-
46
- if (fileOrUrl instanceof File) {
47
- img.src = URL.createObjectURL(fileOrUrl);
48
- } else {
49
- (0, _file.fetchAndStringify)(fileOrUrl).then(picData => {
50
- img.src = picData;
51
- }).catch(() => {
52
- img.src = ''; // to trigger onerror
53
- });
54
- }
55
-
56
- img.onerror = () => {
57
- reject(new Error('Error while loading the src'));
58
- };
59
-
60
- setTimeout(() => {
61
- reject(new Error('Timeout while loading the src'));
62
- }, 4000);
63
- });
64
- };
65
-
66
- exports.createPicture = createPicture;
67
-
68
- const createShape = (ctx, shape, cursorPosition) => {
69
- var _shape$settings$fontB, _shape$settings, _shape$settings$fontI, _shape$settings2;
70
-
71
- switch (shape.type) {
72
- case _Shapes.ShapeEnum.brush:
73
- shape.settings;
74
- return {
75
- toolId: shape.id,
76
- type: _Shapes.ShapeEnum.brush,
77
- id: _fp.default.uniqueId("".concat(shape.type, "_")),
78
- points: [[cursorPosition]],
79
- translation: [0, 0],
80
- rotation: 0,
81
- style: {
82
- globalAlpha: shape.settings.opacity.default,
83
- strokeColor: shape.settings.strokeColor.default,
84
- lineWidth: shape.settings.lineWidth.default,
85
- lineDash: shape.settings.lineDash.default
86
- }
87
- };
88
-
89
- case _Shapes.ShapeEnum.line:
90
- return {
91
- toolId: shape.id,
92
- type: _Shapes.ShapeEnum.line,
93
- id: _fp.default.uniqueId("".concat(shape.type, "_")),
94
- points: [cursorPosition, cursorPosition],
95
- translation: [0, 0],
96
- rotation: 0,
97
- style: {
98
- globalAlpha: shape.settings.opacity.default,
99
- strokeColor: shape.settings.strokeColor.default,
100
- lineWidth: shape.settings.lineWidth.default,
101
- lineDash: shape.settings.lineDash.default,
102
- lineArrow: shape.settings.lineArrow.default
103
- }
104
- };
105
-
106
- case _Shapes.ShapeEnum.polygon:
107
- return {
108
- toolId: shape.id,
109
- type: _Shapes.ShapeEnum.polygon,
110
- id: _fp.default.uniqueId("".concat(shape.type, "_")),
111
- points: _fp.default.flow(_fp.default.range(0), _fp.default.map(() => cursorPosition))(shape.settings.pointsCount.default),
112
- translation: [0, 0],
113
- rotation: 0,
114
- style: {
115
- globalAlpha: shape.settings.opacity.default,
116
- fillColor: shape.settings.fillColor.default,
117
- strokeColor: shape.settings.strokeColor.default,
118
- lineWidth: shape.settings.lineWidth.default,
119
- lineDash: shape.settings.lineDash.default,
120
- pointsCount: shape.settings.pointsCount.default
121
- }
122
- };
123
-
124
- case _Shapes.ShapeEnum.curve:
125
- return {
126
- toolId: shape.id,
127
- type: _Shapes.ShapeEnum.curve,
128
- id: _fp.default.uniqueId("".concat(shape.type, "_")),
129
- points: _fp.default.flow(_fp.default.range(0), _fp.default.map(() => cursorPosition))(shape.settings.pointsCount.default),
130
- translation: [0, 0],
131
- rotation: 0,
132
- style: {
133
- globalAlpha: shape.settings.opacity.default,
134
- fillColor: shape.settings.fillColor.default,
135
- strokeColor: shape.settings.strokeColor.default,
136
- lineWidth: shape.settings.lineWidth.default,
137
- lineDash: shape.settings.lineDash.default,
138
- pointsCount: shape.settings.pointsCount.default
139
- }
140
- };
141
-
142
- case _Shapes.ShapeEnum.rect:
143
- case _Shapes.ShapeEnum.square:
144
- return {
145
- toolId: shape.id,
146
- type: shape.type,
147
- id: _fp.default.uniqueId("".concat(shape.type, "_")),
148
- x: cursorPosition[0],
149
- y: cursorPosition[1],
150
- width: 1,
151
- height: 1,
152
- translation: [0, 0],
153
- rotation: 0,
154
- style: {
155
- globalAlpha: shape.settings.opacity.default,
156
- fillColor: shape.settings.fillColor.default,
157
- strokeColor: shape.settings.strokeColor.default,
158
- lineWidth: shape.settings.lineWidth.default,
159
- lineDash: shape.settings.lineDash.default
160
- }
161
- };
162
-
163
- case _Shapes.ShapeEnum.text:
164
- const defaultValue = ['Texte'];
165
- const fontSize = (0, _transform.calculateTextFontSize)(ctx, defaultValue, 50, (_shape$settings$fontB = (_shape$settings = shape.settings) === null || _shape$settings === void 0 ? void 0 : _shape$settings.fontBold.default) !== null && _shape$settings$fontB !== void 0 ? _shape$settings$fontB : false, (_shape$settings$fontI = (_shape$settings2 = shape.settings) === null || _shape$settings2 === void 0 ? void 0 : _shape$settings2.fontItalic.default) !== null && _shape$settings$fontI !== void 0 ? _shape$settings$fontI : false, shape.settings.fontFamily.default);
166
- return {
167
- toolId: shape.id,
168
- type: _Shapes.ShapeEnum.text,
169
- id: _fp.default.uniqueId("".concat(shape.type, "_")),
170
- x: cursorPosition[0],
171
- y: cursorPosition[1],
172
- value: defaultValue,
173
- fontSize,
174
- width: 50,
175
- height: fontSize * (defaultValue.length || 1),
176
- translation: [0, 0],
177
- rotation: 0,
178
- style: {
179
- globalAlpha: shape.settings.opacity.default,
180
- strokeColor: shape.settings.strokeColor.default,
181
- fontFamily: shape.settings.fontFamily.default
182
- }
183
- };
184
-
185
- case _Shapes.ShapeEnum.ellipse:
186
- return {
187
- toolId: shape.id,
188
- type: _Shapes.ShapeEnum.ellipse,
189
- id: _fp.default.uniqueId("".concat(shape.type, "_")),
190
- x: cursorPosition[0],
191
- y: cursorPosition[1],
192
- radiusX: 0,
193
- radiusY: 0,
194
- translation: [0, 0],
195
- rotation: 0,
196
- style: {
197
- globalAlpha: shape.settings.opacity.default,
198
- fillColor: shape.settings.fillColor.default,
199
- strokeColor: shape.settings.strokeColor.default,
200
- lineWidth: shape.settings.lineWidth.default,
201
- lineDash: shape.settings.lineDash.default
202
- }
203
- };
204
-
205
- case _Shapes.ShapeEnum.circle:
206
- return {
207
- toolId: shape.id,
208
- type: _Shapes.ShapeEnum.circle,
209
- id: _fp.default.uniqueId("".concat(shape.type, "_")),
210
- x: cursorPosition[0],
211
- y: cursorPosition[1],
212
- radius: 0,
213
- translation: [0, 0],
214
- rotation: 0,
215
- style: {
216
- globalAlpha: shape.settings.opacity.default,
217
- fillColor: shape.settings.fillColor.default,
218
- strokeColor: shape.settings.strokeColor.default,
219
- lineWidth: shape.settings.lineWidth.default,
220
- lineDash: shape.settings.lineDash.default
221
- }
222
- };
223
- }
224
- };
225
-
226
- exports.createShape = createShape;
227
-
228
- const copyShape = shape => {
229
- return { ...shape,
230
- id: _fp.default.uniqueId("".concat(shape.type, "_")),
231
- translation: [shape.translation[0] + 20, shape.translation[1] + 20]
232
- };
233
- };
234
-
235
- exports.copyShape = copyShape;
236
-
237
- const roundValues = function (prop) {
238
- let precision = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
239
-
240
- if (_fp.default.isArray(prop)) {
241
- return prop.map(roundValues);
242
- }
243
-
244
- if (_fp.default.isObject(prop)) {
245
- return _fp.default.mapValues(roundValues, prop);
246
- }
247
-
248
- if (_fp.default.isNumber(prop)) {
249
- return +prop.toFixed(precision);
250
- }
251
-
252
- return prop;
253
- };
254
-
255
- exports.roundValues = roundValues;
256
-
257
14
  const cleanShapesBeforeExport = shapes => {
258
15
  const propsToOmit = ['img', 'id'];
259
16
  return shapes.map(shape => {
260
- if (shape.type === _Shapes.ShapeEnum.picture) {
17
+ if (shape.type === 'picture') {
261
18
  if (!shape.src.startsWith('http')) {
262
- return roundValues(_fp.default.omit(propsToOmit, { ...shape,
19
+ return _fp.default.omit(propsToOmit, { ...shape,
263
20
  src: (0, _file.getBase64Image)(shape.img)
264
- }));
21
+ });
265
22
  }
266
23
  }
267
24
 
268
- return roundValues(_fp.default.omit(propsToOmit, shape));
25
+ return _fp.default.omit(propsToOmit, shape);
269
26
  });
270
27
  };
271
28
 
@@ -0,0 +1,12 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.isEventInsideNode = void 0;
7
+
8
+ const isEventInsideNode = (event, node) => {
9
+ return !(event.target instanceof Node) || !node ? false : node.contains(event.target);
10
+ };
11
+
12
+ exports.isEventInsideNode = isEventInsideNode;
@@ -7,13 +7,17 @@ Object.defineProperty(exports, "__esModule", {
7
7
  });
8
8
  exports.getCanvasImage = exports.getBase64Image = exports.fetchAndStringify = exports.encodeShapesInString = exports.downloadFile = exports.decodeJson = exports.decodeImportedData = void 0;
9
9
 
10
- var _fp = _interopRequireDefault(require("lodash/fp"));
10
+ var _shapes = require("../constants/shapes");
11
11
 
12
- var _Shapes = require("../types/Shapes");
12
+ var _fp = _interopRequireDefault(require("lodash/fp"));
13
13
 
14
14
  var _data = require("./data");
15
15
 
16
- var _draw = require("./draw");
16
+ var _canvas = require("./canvas");
17
+
18
+ var _migration = require("./migration");
19
+
20
+ var _shapes2 = require("./shapes");
17
21
 
18
22
  const fetchAndStringify = url => {
19
23
  return fetch(url).then(response => response.blob()).then(myBlob => URL.createObjectURL(myBlob));
@@ -56,9 +60,10 @@ const getCanvasImage = (shapes, canvasOffset, width, height, selectionPadding) =
56
60
  const ctx = newCanvas.getContext('2d');
57
61
  if (!ctx) return '';
58
62
  ctx.clearRect(0, 0, width, height);
63
+ (0, _canvas.initCanvasContext)(ctx);
59
64
 
60
65
  for (let i = shapes.length - 1; i >= 0; i--) {
61
- (0, _draw.drawShape)(ctx, shapes[i], 1, canvasOffset, selectionPadding);
66
+ (0, _shapes2.drawShape)(ctx, shapes[i], 1, canvasOffset, selectionPadding);
62
67
  }
63
68
 
64
69
  return newCanvas.toDataURL('image/png');
@@ -96,10 +101,10 @@ const decodeImportedData = async shapesForJson => {
96
101
  const promisesArray = [];
97
102
  const jsonShapes = shapesForJson.shapes;
98
103
 
99
- const shapes = _fp.default.flow(_fp.default.map(shape => {
100
- if (!_fp.default.includes(shape.type, _Shapes.ShapeEnum)) return null;
104
+ const shapes = _fp.default.flow(shapes => (0, _migration.migrateShapesV065)(shapes), _fp.default.map(shape => {
105
+ if (!_shapes.ShapeTypeArray.includes(shape.type)) return null;
101
106
 
102
- if (shape.type === _Shapes.ShapeEnum.picture) {
107
+ if (shape.type === 'picture') {
103
108
  const img = new Image();
104
109
  const newPromise = new Promise((resolve, reject) => {
105
110
  img.onload = () => {