@yorab/react-paint 0.5.0 → 0.6.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.
- package/Changelog.md +107 -0
- package/README.md +0 -7
- package/dist/components/App.js +114 -79
- package/dist/components/Canvas.js +7 -7
- package/dist/components/common/Button.js +4 -4
- package/dist/components/common/Loading.js +3 -3
- package/dist/components/common/Modal.js +8 -4
- package/dist/components/common/Panel.js +5 -2
- package/dist/components/common/Snackbar.js +2 -2
- package/dist/components/settings/ColorField.js +11 -5
- package/dist/components/settings/FontFamilyField.js +6 -3
- package/dist/components/settings/LayoutButton.js +1 -1
- package/dist/components/settings/Layouts.js +18 -9
- package/dist/components/settings/LineArrowField.js +7 -4
- package/dist/components/settings/LineTypeField.js +7 -4
- package/dist/components/settings/PointsNumberField.js +4 -1
- package/dist/components/settings/RangeField.js +6 -3
- package/dist/components/settings/SelectField.js +11 -4
- package/dist/components/settings/SettingsBar.js +246 -131
- package/dist/components/settings/ToggleField.js +56 -0
- package/dist/components/toolbox/EditTextBox.js +23 -16
- package/dist/components/toolbox/MenuGroup.js +11 -11
- package/dist/components/toolbox/PictureUrlInput.js +1 -1
- package/dist/components/toolbox/Toolbar.js +13 -7
- package/dist/components/toolbox/ToolbarGroup.js +13 -11
- package/dist/constants/icons.js +18 -8
- package/dist/constants/tools.js +10 -2
- package/dist/hooks/useDoubleClick.js +46 -0
- package/dist/hooks/useDrawableCanvas.js +29 -45
- package/dist/styles.css +55 -51
- package/dist/utils/data.js +27 -5
- package/dist/utils/draw.js +3 -3
- package/dist/utils/file.js +15 -14
- package/dist/utils/intersect.js +1 -0
- package/dist/utils/selection.js +1 -1
- package/dist/utils/transform.js +23 -10
- package/package.json +1 -1
package/dist/styles.css
CHANGED
|
@@ -31,54 +31,58 @@
|
|
|
31
31
|
min-width: 0;
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
-
.
|
|
35
|
-
.
|
|
36
|
-
.
|
|
37
|
-
.
|
|
38
|
-
.
|
|
39
|
-
.
|
|
40
|
-
.
|
|
41
|
-
.
|
|
42
|
-
.
|
|
43
|
-
.
|
|
44
|
-
.
|
|
45
|
-
.
|
|
46
|
-
.
|
|
47
|
-
.
|
|
48
|
-
.
|
|
49
|
-
.
|
|
50
|
-
.
|
|
51
|
-
.
|
|
52
|
-
.
|
|
53
|
-
.
|
|
54
|
-
.
|
|
55
|
-
.
|
|
56
|
-
.
|
|
57
|
-
.
|
|
58
|
-
.
|
|
59
|
-
.
|
|
60
|
-
.
|
|
61
|
-
.
|
|
62
|
-
.
|
|
63
|
-
.
|
|
64
|
-
.
|
|
65
|
-
.
|
|
66
|
-
.
|
|
67
|
-
.
|
|
68
|
-
.
|
|
69
|
-
.
|
|
70
|
-
.
|
|
71
|
-
.
|
|
72
|
-
.
|
|
73
|
-
.
|
|
74
|
-
.
|
|
75
|
-
.
|
|
76
|
-
.
|
|
77
|
-
.
|
|
78
|
-
.
|
|
79
|
-
.
|
|
80
|
-
.
|
|
81
|
-
.
|
|
82
|
-
.
|
|
83
|
-
.
|
|
84
|
-
.
|
|
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);}.s1unz6yq[data-fontbold='true']{font-weight:bold;}.s1unz6yq[data-fontitalic='true']{font-style:italic;}
|
|
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%;}
|
|
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
|
+
.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
|
+
.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
|
+
.sst453j{width:100%;box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:2px 6px;}
|
|
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
|
+
.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%;}
|
|
44
|
+
.s17qj3jh{margin-bottom:8px;margin-top:4px;font-size:18px;}
|
|
45
|
+
.su3a8bs{display:inline-block;background:var(--toolbar-bg);box-sizing:border-box;overflow-y:auto;min-width:200px;}
|
|
46
|
+
.szboplp{margin:2px 0;}.szboplp:not(:hover){opacity:0.2;}
|
|
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
|
+
.sj3bift{margin:2px 0;}.sj3bift[data-visible='false']{opacity:0.2;}
|
|
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;}
|
|
56
|
+
.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;}
|
|
58
|
+
.s1e5a6k5{position:relative;display:inline-block;}
|
|
59
|
+
.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
|
+
.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;}
|
|
61
|
+
.s1s9jyyg{position:absolute;left:0;top:0;right:0;bottom:0;background:#00000073;}
|
|
62
|
+
.s95bkm9 form{grid-template-columns:3fr 1fr 1fr;}.s95bkm9 form input{color:var(--font-color);border:1px solid var(--font-color);background:var(--toolbar-bg);outline:none;}
|
|
63
|
+
.so6hnjf{-webkit-flex:1;-ms-flex:1;flex:1;position:relative;height:100%;text-align:center;height:36px;}
|
|
64
|
+
.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;}
|
|
65
|
+
.s1g032mh{grid-template-columns:1fr 1fr 1fr;}
|
|
66
|
+
.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;}
|
|
67
|
+
.sfm1cqx{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;}
|
|
68
|
+
.sttf061{width:24px;height:24px;box-sizing:border-box;border-radius:50%;color:var(--sttf061-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;}
|
|
69
|
+
.layoutPanelOpened .sj7hhjx.sj7hhjx{color:var(--font-selected-color);background:var(--font-selected-bg);}.sj7hhjx[data-hidden='1']{display:none;}
|
|
70
|
+
.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;max-width:100%;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;}
|
|
71
|
+
.s1ktxhkr{padding:16px;}
|
|
72
|
+
.s5sp14o{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;}
|
|
73
|
+
.smpmxx5{font-family:var(--smpmxx5-0);}
|
|
74
|
+
.s1qssg4n{display:inline-block;width:6px;height:2px;background:transparent;vertical-align:middle;}
|
|
75
|
+
.se26iq6{display:inline-block;}.se26iq6[data-type='0'] .s1qssg4n{background:currentColor;}.se26iq6[data-type='1']{position:relative;left:3px;}.se26iq6[data-type='1'] .s1qssg4n:nth-child(3n-1){background:currentColor;width:12px;}.se26iq6[data-type='1'] .s1qssg4n:nth-child(n+11){display:none;}.se26iq6[data-type='2'] .s1qssg4n:nth-child(2n+1){background:currentColor;}
|
|
76
|
+
.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 currentColor;}
|
|
77
|
+
.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 currentColor;}
|
|
78
|
+
.scawaat{position:relative;display:inline-block;width:60px;height:2px;background:currentColor;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;}
|
|
79
|
+
.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
|
+
.sa7lzh9{-webkit-flex:1;-ms-flex:1;flex:1;}
|
|
81
|
+
.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;}
|
|
84
|
+
.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);}}
|
|
86
|
+
.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
|
+
.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);}
|
package/dist/utils/data.js
CHANGED
|
@@ -5,7 +5,7 @@ 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.addDefaultAndTempShapeProps = void 0;
|
|
8
|
+
exports.roundValues = exports.createShape = exports.createPicture = exports.copyShape = exports.cleanShapesBeforeExport = exports.buildDataToExport = exports.addDefaultAndTempShapeProps = void 0;
|
|
9
9
|
|
|
10
10
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
11
11
|
|
|
@@ -43,7 +43,7 @@ var createPicture = function createPicture(fileOrUrl, maxPictureWidth, maxPictur
|
|
|
43
43
|
y: (maxPictureHeight - height) / 2,
|
|
44
44
|
width: width,
|
|
45
45
|
height: height,
|
|
46
|
-
src: img.src,
|
|
46
|
+
src: fileOrUrl instanceof File ? img.src : fileOrUrl,
|
|
47
47
|
img: img,
|
|
48
48
|
translation: [0, 0],
|
|
49
49
|
rotation: 0
|
|
@@ -51,10 +51,18 @@ var createPicture = function createPicture(fileOrUrl, maxPictureWidth, maxPictur
|
|
|
51
51
|
resolve(pictureShape);
|
|
52
52
|
};
|
|
53
53
|
|
|
54
|
+
img.onerror = function () {
|
|
55
|
+
reject(new Error('Some images could not be loaded'));
|
|
56
|
+
};
|
|
57
|
+
|
|
54
58
|
if (fileOrUrl instanceof File) {
|
|
55
59
|
img.src = URL.createObjectURL(fileOrUrl);
|
|
56
60
|
} else {
|
|
57
|
-
|
|
61
|
+
(0, _file.fetchAndStringify)(fileOrUrl).then(function (picData) {
|
|
62
|
+
img.src = picData;
|
|
63
|
+
})["catch"](function () {
|
|
64
|
+
img.src = ''; // to trigger onerror
|
|
65
|
+
});
|
|
58
66
|
}
|
|
59
67
|
|
|
60
68
|
img.onerror = function () {
|
|
@@ -70,6 +78,8 @@ var createPicture = function createPicture(fileOrUrl, maxPictureWidth, maxPictur
|
|
|
70
78
|
exports.createPicture = createPicture;
|
|
71
79
|
|
|
72
80
|
var createShape = function createShape(ctx, shape, cursorPosition) {
|
|
81
|
+
var _shape$settings$fontB, _shape$settings, _shape$settings$fontI, _shape$settings2;
|
|
82
|
+
|
|
73
83
|
switch (shape.type) {
|
|
74
84
|
case _Shapes.ShapeEnum.brush:
|
|
75
85
|
shape.settings;
|
|
@@ -167,8 +177,8 @@ var createShape = function createShape(ctx, shape, cursorPosition) {
|
|
|
167
177
|
};
|
|
168
178
|
|
|
169
179
|
case _Shapes.ShapeEnum.text:
|
|
170
|
-
var defaultValue = [];
|
|
171
|
-
var fontSize = (0, _transform.calculateTextFontSize)(ctx, defaultValue, 50, shape.settings.fontFamily["default"]);
|
|
180
|
+
var defaultValue = ['Texte'];
|
|
181
|
+
var 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"]);
|
|
172
182
|
return {
|
|
173
183
|
toolId: shape.id,
|
|
174
184
|
type: _Shapes.ShapeEnum.text,
|
|
@@ -277,6 +287,18 @@ var cleanShapesBeforeExport = function cleanShapesBeforeExport(shapes) {
|
|
|
277
287
|
|
|
278
288
|
exports.cleanShapesBeforeExport = cleanShapesBeforeExport;
|
|
279
289
|
|
|
290
|
+
var buildDataToExport = function buildDataToExport(shapes, width, height) {
|
|
291
|
+
return {
|
|
292
|
+
shapes: cleanShapesBeforeExport(shapes),
|
|
293
|
+
config: {
|
|
294
|
+
width: width,
|
|
295
|
+
height: height
|
|
296
|
+
}
|
|
297
|
+
};
|
|
298
|
+
};
|
|
299
|
+
|
|
300
|
+
exports.buildDataToExport = buildDataToExport;
|
|
301
|
+
|
|
280
302
|
var addDefaultAndTempShapeProps = function addDefaultAndTempShapeProps(shape) {
|
|
281
303
|
return _objectSpread(_objectSpread({}, shape), {}, {
|
|
282
304
|
id: _fp["default"].uniqueId("".concat(shape.type, "_"))
|
package/dist/utils/draw.js
CHANGED
|
@@ -225,12 +225,12 @@ var drawRect = function drawRect(ctx, rect) {
|
|
|
225
225
|
exports.drawRect = drawRect;
|
|
226
226
|
|
|
227
227
|
var drawText = function drawText(ctx, text) {
|
|
228
|
-
var _text$style, _text$style$fontFamil, _text$
|
|
228
|
+
var _text$style, _text$style2, _text$style3, _text$style$fontFamil, _text$style4;
|
|
229
229
|
|
|
230
230
|
updateDrawStyle(ctx, text.style);
|
|
231
231
|
if (ctx.globalAlpha === 0 || !((_text$style = text.style) !== null && _text$style !== void 0 && _text$style.strokeColor) || text.style.strokeColor === 'transparent') return;
|
|
232
|
-
ctx.font = "".concat(text.fontSize, "px ").concat((_text$style$fontFamil = (_text$
|
|
233
|
-
ctx.textBaseline = '
|
|
232
|
+
ctx.font = "".concat((_text$style2 = text.style) !== null && _text$style2 !== void 0 && _text$style2.fontItalic ? 'italic' : '', " ").concat((_text$style3 = text.style) !== null && _text$style3 !== void 0 && _text$style3.fontBold ? 'bold' : '', " ").concat(text.fontSize, "px ").concat((_text$style$fontFamil = (_text$style4 = text.style) === null || _text$style4 === void 0 ? void 0 : _text$style4.fontFamily) !== null && _text$style$fontFamil !== void 0 ? _text$style$fontFamil : _style.STYLE_FONT_DEFAULT);
|
|
233
|
+
ctx.textBaseline = 'top';
|
|
234
234
|
ctx.fillStyle = text.style.strokeColor;
|
|
235
235
|
|
|
236
236
|
for (var i = 0; i < text.value.length; i++) {
|
package/dist/utils/file.js
CHANGED
|
@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
-
exports.getCanvasImage = exports.getBase64Image = exports.fetchAndStringify = exports.encodeShapesInString = exports.downloadFile = exports.
|
|
8
|
+
exports.getCanvasImage = exports.getBase64Image = exports.fetchAndStringify = exports.encodeShapesInString = exports.downloadFile = exports.decodeJson = exports.decodeImportedData = void 0;
|
|
9
9
|
|
|
10
10
|
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
|
|
11
11
|
|
|
@@ -80,9 +80,9 @@ var getCanvasImage = function getCanvasImage(shapes, canvasOffset, width, height
|
|
|
80
80
|
|
|
81
81
|
exports.getCanvasImage = getCanvasImage;
|
|
82
82
|
|
|
83
|
-
var encodeShapesInString = function encodeShapesInString(shapes) {
|
|
84
|
-
var
|
|
85
|
-
return encodeObjectToString(
|
|
83
|
+
var encodeShapesInString = function encodeShapesInString(shapes, width, height) {
|
|
84
|
+
var dataToExport = (0, _data.buildDataToExport)(shapes, width, height);
|
|
85
|
+
return encodeObjectToString(dataToExport);
|
|
86
86
|
};
|
|
87
87
|
|
|
88
88
|
exports.encodeShapesInString = encodeShapesInString;
|
|
@@ -123,14 +123,15 @@ var decodeJson = /*#__PURE__*/function () {
|
|
|
123
123
|
|
|
124
124
|
exports.decodeJson = decodeJson;
|
|
125
125
|
|
|
126
|
-
var
|
|
126
|
+
var decodeImportedData = /*#__PURE__*/function () {
|
|
127
127
|
var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(shapesForJson) {
|
|
128
|
-
var promisesArray, shapes;
|
|
128
|
+
var promisesArray, jsonShapes, shapes;
|
|
129
129
|
return _regenerator["default"].wrap(function _callee2$(_context2) {
|
|
130
130
|
while (1) {
|
|
131
131
|
switch (_context2.prev = _context2.next) {
|
|
132
132
|
case 0:
|
|
133
133
|
promisesArray = [];
|
|
134
|
+
jsonShapes = shapesForJson.shapes;
|
|
134
135
|
shapes = _fp["default"].flow(_fp["default"].map(function (shape) {
|
|
135
136
|
if (!_fp["default"].includes(shape.type, _Shapes.ShapeEnum)) return null;
|
|
136
137
|
|
|
@@ -157,20 +158,20 @@ var decodePicturesInShapes = /*#__PURE__*/function () {
|
|
|
157
158
|
img.src = shape.src;
|
|
158
159
|
}
|
|
159
160
|
|
|
160
|
-
return _objectSpread(_objectSpread({}, shape), {}, {
|
|
161
|
+
return (0, _data.addDefaultAndTempShapeProps)(_objectSpread(_objectSpread({}, shape), {}, {
|
|
161
162
|
img: img
|
|
162
|
-
});
|
|
163
|
+
}));
|
|
163
164
|
}
|
|
164
165
|
|
|
165
166
|
return (0, _data.addDefaultAndTempShapeProps)(shape);
|
|
166
|
-
}), _fp["default"].compact)(
|
|
167
|
-
_context2.next =
|
|
167
|
+
}), _fp["default"].compact)(jsonShapes);
|
|
168
|
+
_context2.next = 5;
|
|
168
169
|
return Promise.all(promisesArray);
|
|
169
170
|
|
|
170
|
-
case
|
|
171
|
+
case 5:
|
|
171
172
|
return _context2.abrupt("return", shapes);
|
|
172
173
|
|
|
173
|
-
case
|
|
174
|
+
case 6:
|
|
174
175
|
case "end":
|
|
175
176
|
return _context2.stop();
|
|
176
177
|
}
|
|
@@ -178,9 +179,9 @@ var decodePicturesInShapes = /*#__PURE__*/function () {
|
|
|
178
179
|
}, _callee2);
|
|
179
180
|
}));
|
|
180
181
|
|
|
181
|
-
return function
|
|
182
|
+
return function decodeImportedData(_x2) {
|
|
182
183
|
return _ref2.apply(this, arguments);
|
|
183
184
|
};
|
|
184
185
|
}();
|
|
185
186
|
|
|
186
|
-
exports.
|
|
187
|
+
exports.decodeImportedData = decodeImportedData;
|
package/dist/utils/intersect.js
CHANGED
|
@@ -128,6 +128,7 @@ exports.applyRotationToVector = applyRotationToVector;
|
|
|
128
128
|
var checkPositionIntersection = function checkPositionIntersection(shape, position, canvasOffset, selectionPadding) {
|
|
129
129
|
var currentScale = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
|
|
130
130
|
var checkAnchors = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
|
|
131
|
+
if (shape.locked) return false;
|
|
131
132
|
var scaleWithMinCap = Math.min(1, currentScale);
|
|
132
133
|
|
|
133
134
|
var _getShapeInfos = (0, _shapeData.getShapeInfos)(shape, selectionPadding),
|
package/dist/utils/selection.js
CHANGED
|
@@ -54,7 +54,7 @@ var selectShape = function selectShape(shapes, cursorPosition, currentScale, can
|
|
|
54
54
|
};
|
|
55
55
|
var newSelectionMode = getNewSelectionData(positionIntersection, selectedShape, cursorPosition, selectionPadding);
|
|
56
56
|
|
|
57
|
-
if (newSelectionMode) {
|
|
57
|
+
if ((newSelectionMode === null || newSelectionMode === void 0 ? void 0 : newSelectionMode.mode) === _Mode.SelectionModeLib.resize || (newSelectionMode === null || newSelectionMode === void 0 ? void 0 : newSelectionMode.mode) === _Mode.SelectionModeLib.rotate) {
|
|
58
58
|
return {
|
|
59
59
|
shape: selectedShape,
|
|
60
60
|
mode: newSelectionMode
|
package/dist/utils/transform.js
CHANGED
|
@@ -135,7 +135,13 @@ var updatePolygonLinesCount = function updatePolygonLinesCount(shape, newPointsC
|
|
|
135
135
|
if (currentPointsCount === newPointsCount) return shape;
|
|
136
136
|
|
|
137
137
|
if (currentPointsCount > newPointsCount) {
|
|
138
|
-
|
|
138
|
+
var totalPoints = shape.points.slice(0, newPointsCount);
|
|
139
|
+
return _objectSpread(_objectSpread({}, shape), {}, {
|
|
140
|
+
points: totalPoints,
|
|
141
|
+
style: _objectSpread(_objectSpread({}, shape.style), {}, {
|
|
142
|
+
pointsCount: totalPoints.length
|
|
143
|
+
})
|
|
144
|
+
});
|
|
139
145
|
} else {
|
|
140
146
|
//TODO : better distribution for new points
|
|
141
147
|
var nbPointsToAdd = newPointsCount - currentPointsCount;
|
|
@@ -144,7 +150,14 @@ var updatePolygonLinesCount = function updatePolygonLinesCount(shape, newPointsC
|
|
|
144
150
|
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)];
|
|
145
151
|
}))(nbPointsToAdd);
|
|
146
152
|
|
|
147
|
-
|
|
153
|
+
var _totalPoints = [shape.points[0]].concat((0, _toConsumableArray2["default"])(newPoints), (0, _toConsumableArray2["default"])(shape.points.slice(1, shape.points.length)));
|
|
154
|
+
|
|
155
|
+
return _objectSpread(_objectSpread({}, shape), {}, {
|
|
156
|
+
points: _totalPoints,
|
|
157
|
+
style: _objectSpread(_objectSpread({}, shape.style), {}, {
|
|
158
|
+
pointsCount: _totalPoints.length
|
|
159
|
+
})
|
|
160
|
+
});
|
|
148
161
|
}
|
|
149
162
|
};
|
|
150
163
|
|
|
@@ -260,11 +273,11 @@ var resizeRect = function resizeRect(cursorPosition, canvasOffset, originalShape
|
|
|
260
273
|
exports.resizeRect = resizeRect;
|
|
261
274
|
|
|
262
275
|
var resizeText = function resizeText(ctx, cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding) {
|
|
263
|
-
var _newRect$style;
|
|
276
|
+
var _newRect$style$fontBo, _newRect$style, _newRect$style$fontIt, _newRect$style2, _newRect$style3;
|
|
264
277
|
|
|
265
278
|
var newRect = resizeRect(cursorPosition, canvasOffset, originalShape, selectionMode, selectionPadding, true);
|
|
266
279
|
return _objectSpread(_objectSpread({}, newRect), {}, {
|
|
267
|
-
fontSize: calculateTextFontSize(ctx, newRect.value, newRect.width, (_newRect$style = newRect.style) === null || _newRect$style === void 0 ? void 0 : _newRect$style.fontFamily)
|
|
280
|
+
fontSize: calculateTextFontSize(ctx, newRect.value, newRect.width, (_newRect$style$fontBo = (_newRect$style = newRect.style) === null || _newRect$style === void 0 ? void 0 : _newRect$style.fontBold) !== null && _newRect$style$fontBo !== void 0 ? _newRect$style$fontBo : false, (_newRect$style$fontIt = (_newRect$style2 = newRect.style) === null || _newRect$style2 === void 0 ? void 0 : _newRect$style2.fontItalic) !== null && _newRect$style$fontIt !== void 0 ? _newRect$style$fontIt : false, (_newRect$style3 = newRect.style) === null || _newRect$style3 === void 0 ? void 0 : _newRect$style3.fontFamily)
|
|
268
281
|
});
|
|
269
282
|
};
|
|
270
283
|
|
|
@@ -332,11 +345,11 @@ var transformShape = function transformShape(ctx, shape, cursorPosition, canvasO
|
|
|
332
345
|
|
|
333
346
|
exports.transformShape = transformShape;
|
|
334
347
|
|
|
335
|
-
var calculateTextFontSize = function calculateTextFontSize(ctx, text, maxWidth) {
|
|
348
|
+
var calculateTextFontSize = function calculateTextFontSize(ctx, text, maxWidth, fontBold, fontItalic) {
|
|
336
349
|
var _$flow;
|
|
337
350
|
|
|
338
|
-
var fontFamily = arguments.length >
|
|
339
|
-
ctx.font = "1px ".concat(fontFamily);
|
|
351
|
+
var fontFamily = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : _style.STYLE_FONT_DEFAULT;
|
|
352
|
+
ctx.font = "".concat(fontItalic ? 'italic' : '', " ").concat(fontBold ? 'bold' : '', " 1px ").concat(fontFamily);
|
|
340
353
|
return (_$flow = _fp["default"].flow(_fp["default"].map(function (value) {
|
|
341
354
|
return maxWidth / ctx.measureText(value).width;
|
|
342
355
|
}), _fp["default"].min)(text)) !== null && _$flow !== void 0 ? _$flow : _style.STYLE_FONT_SIZE_DEFAULT;
|
|
@@ -344,11 +357,11 @@ var calculateTextFontSize = function calculateTextFontSize(ctx, text, maxWidth)
|
|
|
344
357
|
|
|
345
358
|
exports.calculateTextFontSize = calculateTextFontSize;
|
|
346
359
|
|
|
347
|
-
var calculateTextWidth = function calculateTextWidth(ctx, text, fontSize) {
|
|
360
|
+
var calculateTextWidth = function calculateTextWidth(ctx, text, fontSize, fontBold, fontItalic) {
|
|
348
361
|
var _$flow2;
|
|
349
362
|
|
|
350
|
-
var fontFamily = arguments.length >
|
|
351
|
-
ctx.font = "".concat(fontSize, "px ").concat(fontFamily);
|
|
363
|
+
var fontFamily = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : _style.STYLE_FONT_DEFAULT;
|
|
364
|
+
ctx.font = "".concat(fontItalic ? 'italic' : '', " ").concat(fontBold ? 'bold' : '', " ").concat(fontSize, "px ").concat(fontFamily);
|
|
352
365
|
return (_$flow2 = _fp["default"].flow(_fp["default"].map(function (value) {
|
|
353
366
|
return ctx.measureText(value).width;
|
|
354
367
|
}), _fp["default"].max)(text)) !== null && _$flow2 !== void 0 ? _$flow2 : 20;
|