@yorab/react-paint 0.6.3 → 0.6.4
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 +119 -0
- package/README.md +0 -1
- package/dist/components/App.js +30 -22
- package/dist/components/Canvas.js +5 -5
- package/dist/components/common/Button.js +4 -4
- package/dist/components/common/Loading.js +3 -3
- package/dist/components/common/Modal.js +3 -3
- package/dist/components/common/Panel.js +2 -2
- package/dist/components/common/Snackbar.js +2 -2
- package/dist/components/settings/ColorField.js +5 -5
- package/dist/components/settings/FontFamilyField.js +2 -2
- package/dist/components/settings/LayoutButton.js +1 -1
- package/dist/components/settings/Layouts.js +10 -10
- package/dist/components/settings/LineArrowField.js +3 -3
- package/dist/components/settings/LineTypeField.js +2 -2
- package/dist/components/settings/RangeField.js +1 -1
- package/dist/components/settings/SelectField.js +2 -2
- package/dist/components/settings/SettingsBar.js +3 -3
- package/dist/components/toolbox/EditTextBox.js +23 -9
- package/dist/components/toolbox/MenuGroup.js +2 -2
- package/dist/components/toolbox/PictureUrlInput.js +1 -1
- package/dist/components/toolbox/Toolbar.js +3 -3
- package/dist/components/toolbox/ToolbarGroup.js +2 -2
- package/dist/styles.css +55 -55
- package/package.json +1 -1
package/Changelog.md
ADDED
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
# V0.6.4
|
|
2
|
+
|
|
3
|
+
- fix TextEdit copy/paste containing html
|
|
4
|
+
- add clearCallback in opts to override clear button behavior
|
|
5
|
+
|
|
6
|
+
# V0.6.3
|
|
7
|
+
|
|
8
|
+
- Rename 'lib' prop in 'label'
|
|
9
|
+
- update dash settings
|
|
10
|
+
- update clear icon
|
|
11
|
+
- update color settings UI
|
|
12
|
+
|
|
13
|
+
# V0.6.2
|
|
14
|
+
|
|
15
|
+
- Lock : can't select shape by click on it (only via layers panel)
|
|
16
|
+
- Clear : reset state to shapes prop by default if not undefined
|
|
17
|
+
- update icons
|
|
18
|
+
- Add responsive to settings UI
|
|
19
|
+
|
|
20
|
+
# V0.6.1
|
|
21
|
+
|
|
22
|
+
- Fix shapes prop not refreshing component (introduced by 0.6.0)
|
|
23
|
+
|
|
24
|
+
# V0.6.0
|
|
25
|
+
|
|
26
|
+
- Fix text opacity range dancing in edit mode
|
|
27
|
+
- Fix opacity not visually shown in edit mode
|
|
28
|
+
- add delete button in layouts panel and update style
|
|
29
|
+
- update shape selection priority : use layers order, unless an anchor is
|
|
30
|
+
- stored data format updated
|
|
31
|
+
|
|
32
|
+
# V0.5.1
|
|
33
|
+
|
|
34
|
+
- add possibility to update default settings for a tool
|
|
35
|
+
- fix png export not working with url pic
|
|
36
|
+
- fix pictures missing id
|
|
37
|
+
- fix text tool
|
|
38
|
+
- double click for editing text is now working on mobile
|
|
39
|
+
- add bold and italic for text
|
|
40
|
+
|
|
41
|
+
# V0.5.0
|
|
42
|
+
|
|
43
|
+
- Add tool presets feature
|
|
44
|
+
|
|
45
|
+
# V.0.4.2
|
|
46
|
+
|
|
47
|
+
- fix toolgroup not displayed
|
|
48
|
+
- add passive prop to event listener
|
|
49
|
+
|
|
50
|
+
# V.0.4.1
|
|
51
|
+
|
|
52
|
+
- prevent mounting selection canvas when viewer mode
|
|
53
|
+
- prevent drawing selection when not needed
|
|
54
|
+
- Click on toolbar tool group always enable a tool
|
|
55
|
+
- fix input and select options not being impacted by
|
|
56
|
+
- new reponsive for toolbar
|
|
57
|
+
|
|
58
|
+
# V.0.4.0
|
|
59
|
+
|
|
60
|
+
- Add possibility to customize UI from props
|
|
61
|
+
|
|
62
|
+
# V.0.3.1
|
|
63
|
+
|
|
64
|
+
- Add prop to change canvas background color
|
|
65
|
+
- Move some props to options
|
|
66
|
+
- fix Picture shape not being saved and not triggering onDataChanged
|
|
67
|
+
- small picture are upscaled to fit container when imported
|
|
68
|
+
- Add prop to choose to display save/load/export
|
|
69
|
+
|
|
70
|
+
# V.0.3.0 :
|
|
71
|
+
|
|
72
|
+
- prevent picture from url submit to reload page
|
|
73
|
+
- add gridVisible prop and default to false
|
|
74
|
+
- rename withLayouts to layersManipulation and reduce possible values
|
|
75
|
+
- move every options inside options prop
|
|
76
|
+
- remove ajv and any kind of json validation
|
|
77
|
+
- limit snackbar use on success and always log errors
|
|
78
|
+
- fit size and center uploaded picture
|
|
79
|
+
- Add new viewer mode
|
|
80
|
+
- add borders on bars
|
|
81
|
+
- display shape id in layer panel
|
|
82
|
+
- Export : round values to 2 decimal points
|
|
83
|
+
- Export and import : remove temporary values (id) from stored file
|
|
84
|
+
- Clean unknown shape format from imported data
|
|
85
|
+
- Use ref for onDataChanged prop to avoid rerender if callback changes
|
|
86
|
+
- Calculate container size to resize canvas instead of CSS
|
|
87
|
+
- use requestAnimationFrame to improve perf
|
|
88
|
+
- fix TextEdit position and size not working with canvas resized
|
|
89
|
+
- fix anchors area becoming too small after rezsize
|
|
90
|
+
- add MIT license to project
|
|
91
|
+
- other minor fixes
|
|
92
|
+
- minor design improvements
|
|
93
|
+
|
|
94
|
+
# V.0.2.2 :
|
|
95
|
+
|
|
96
|
+
- Migrate to react 18
|
|
97
|
+
- fix Picture type
|
|
98
|
+
- change pen join and cap to round
|
|
99
|
+
- replace loading snackbar with proper loader
|
|
100
|
+
- support for canGrow and canShrink prop
|
|
101
|
+
- rename project
|
|
102
|
+
- release on npm
|
|
103
|
+
|
|
104
|
+
# V.0.2.1 :
|
|
105
|
+
|
|
106
|
+
- better ui for input modal
|
|
107
|
+
- lock functionnality
|
|
108
|
+
- toggle grid
|
|
109
|
+
- layouts panel UI
|
|
110
|
+
|
|
111
|
+
# V.0.2.0 :
|
|
112
|
+
|
|
113
|
+
- fix for scaling brush
|
|
114
|
+
- fix snackbar
|
|
115
|
+
- refonte UI toolbar
|
|
116
|
+
- update examples
|
|
117
|
+
- button with icons
|
|
118
|
+
- mini toolbar to fix
|
|
119
|
+
- provide tool for url only
|
package/README.md
CHANGED
package/dist/components/App.js
CHANGED
|
@@ -71,49 +71,49 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
|
71
71
|
|
|
72
72
|
var StyledApp = /*#__PURE__*/(0, _react2.styled)("div")({
|
|
73
73
|
name: "StyledApp",
|
|
74
|
-
"class": "
|
|
74
|
+
"class": "s1v9piyg",
|
|
75
75
|
vars: {
|
|
76
|
-
"
|
|
76
|
+
"s1v9piyg-0": [function (props) {
|
|
77
77
|
return props.toolbarBackgroundColor;
|
|
78
78
|
}],
|
|
79
|
-
"
|
|
79
|
+
"s1v9piyg-1": [function (props) {
|
|
80
80
|
return props.dividerColor;
|
|
81
81
|
}],
|
|
82
|
-
"
|
|
82
|
+
"s1v9piyg-2": [function (props) {
|
|
83
83
|
return props.fontRadius;
|
|
84
84
|
}, "px"],
|
|
85
|
-
"
|
|
85
|
+
"s1v9piyg-3": [function (props) {
|
|
86
86
|
return props.fontDisabledColor;
|
|
87
87
|
}],
|
|
88
|
-
"
|
|
88
|
+
"s1v9piyg-4": [function (props) {
|
|
89
89
|
return props.fontDisabledBackgroundColor;
|
|
90
90
|
}],
|
|
91
|
-
"
|
|
91
|
+
"s1v9piyg-5": [function (props) {
|
|
92
92
|
return props.fontColor;
|
|
93
93
|
}],
|
|
94
|
-
"
|
|
94
|
+
"s1v9piyg-6": [function (props) {
|
|
95
95
|
return props.fontBackgroundColor;
|
|
96
96
|
}],
|
|
97
|
-
"
|
|
97
|
+
"s1v9piyg-7": [function (props) {
|
|
98
98
|
return props.fontSelectedColor;
|
|
99
99
|
}],
|
|
100
|
-
"
|
|
100
|
+
"s1v9piyg-8": [function (props) {
|
|
101
101
|
return props.fontSelectedBackgroundColor;
|
|
102
102
|
}],
|
|
103
|
-
"
|
|
103
|
+
"s1v9piyg-9": [function (props) {
|
|
104
104
|
return props.fontHoverColor;
|
|
105
105
|
}],
|
|
106
|
-
"
|
|
106
|
+
"s1v9piyg-10": [function (props) {
|
|
107
107
|
return props.fontHoverBackgroundColor;
|
|
108
108
|
}],
|
|
109
|
-
"
|
|
109
|
+
"s1v9piyg-11": [function (props) {
|
|
110
110
|
return props.canvasBackgroundColor;
|
|
111
111
|
}],
|
|
112
|
-
"
|
|
112
|
+
"s1v9piyg-12": [function (_ref) {
|
|
113
113
|
var canvasWidth = _ref.canvasWidth;
|
|
114
114
|
return "min(100%, ".concat(canvasWidth, "px)");
|
|
115
115
|
}],
|
|
116
|
-
"
|
|
116
|
+
"s1v9piyg-13": [function (_ref2) {
|
|
117
117
|
var canvasWidth = _ref2.canvasWidth;
|
|
118
118
|
return canvasWidth;
|
|
119
119
|
}, "px"]
|
|
@@ -121,13 +121,13 @@ var StyledApp = /*#__PURE__*/(0, _react2.styled)("div")({
|
|
|
121
121
|
});
|
|
122
122
|
var StyledRow = /*#__PURE__*/(0, _react2.styled)("div")({
|
|
123
123
|
name: "StyledRow",
|
|
124
|
-
"class": "
|
|
124
|
+
"class": "s6o5tmu",
|
|
125
125
|
vars: {
|
|
126
|
-
"
|
|
126
|
+
"s6o5tmu-1": [function (_ref3) {
|
|
127
127
|
var width = _ref3.width;
|
|
128
128
|
return width;
|
|
129
129
|
}, "px"],
|
|
130
|
-
"
|
|
130
|
+
"s6o5tmu-2": [function (_ref4) {
|
|
131
131
|
var aspectRatio = _ref4.aspectRatio;
|
|
132
132
|
return aspectRatio;
|
|
133
133
|
}]
|
|
@@ -143,6 +143,7 @@ var DEFAULT_OPTIONS = {
|
|
|
143
143
|
withUploadPicture: true,
|
|
144
144
|
withUrlPicture: false,
|
|
145
145
|
availableTools: _tools.DEFAULT_SHAPE_TOOLS,
|
|
146
|
+
clearCallback: 'empty',
|
|
146
147
|
uiStyle: {
|
|
147
148
|
toolbarBackgroundColor: 'white',
|
|
148
149
|
dividerColor: '#36418129',
|
|
@@ -188,6 +189,7 @@ var App = function App(_ref5) {
|
|
|
188
189
|
withLoadAndSave = _DEFAULT_OPTIONS$opti.withLoadAndSave,
|
|
189
190
|
withUploadPicture = _DEFAULT_OPTIONS$opti.withUploadPicture,
|
|
190
191
|
withUrlPicture = _DEFAULT_OPTIONS$opti.withUrlPicture,
|
|
192
|
+
clearCallback = _DEFAULT_OPTIONS$opti.clearCallback,
|
|
191
193
|
availableToolsFromProps = _DEFAULT_OPTIONS$opti.availableTools;
|
|
192
194
|
|
|
193
195
|
var _DEFAULT_OPTIONS$uiSt = _objectSpread(_objectSpread({}, DEFAULT_OPTIONS.uiStyle), (_options$uiStyle = options === null || options === void 0 ? void 0 : options.uiStyle) !== null && _options$uiStyle !== void 0 ? _options$uiStyle : {}),
|
|
@@ -355,14 +357,20 @@ var App = function App(_ref5) {
|
|
|
355
357
|
};
|
|
356
358
|
}(), [resetCanvas]);
|
|
357
359
|
var clearCanvas = (0, _react.useCallback)(function () {
|
|
358
|
-
if (
|
|
360
|
+
if (typeof clearCallback !== 'string') {
|
|
359
361
|
void loadImportedData({
|
|
360
|
-
shapes:
|
|
362
|
+
shapes: clearCallback()
|
|
361
363
|
}, false);
|
|
362
364
|
} else {
|
|
363
|
-
|
|
365
|
+
if (clearCallback === 'defaultShapes' && shapesFromProps !== undefined) {
|
|
366
|
+
void loadImportedData({
|
|
367
|
+
shapes: shapesFromProps
|
|
368
|
+
}, false);
|
|
369
|
+
} else {
|
|
370
|
+
resetCanvas();
|
|
371
|
+
}
|
|
364
372
|
}
|
|
365
|
-
}, [resetCanvas, loadImportedData, shapesFromProps]);
|
|
373
|
+
}, [resetCanvas, loadImportedData, shapesFromProps, clearCallback]);
|
|
366
374
|
var selectShape = (0, _react.useCallback)(function (shape) {
|
|
367
375
|
setActiveTool(_tools.SELECTION_TOOL);
|
|
368
376
|
setSelectedShape(shape);
|
|
@@ -73,21 +73,21 @@ var renderSelectionCanvas = function renderSelectionCanvas(selectionCtx, selecti
|
|
|
73
73
|
|
|
74
74
|
var StyledCanvasBox = /*#__PURE__*/(0, _react2.styled)("div")({
|
|
75
75
|
name: "StyledCanvasBox",
|
|
76
|
-
"class": "
|
|
76
|
+
"class": "s9czb9p"
|
|
77
77
|
});
|
|
78
78
|
var StyledCanvasContainer = /*#__PURE__*/(0, _react2.styled)("div")({
|
|
79
79
|
name: "StyledCanvasContainer",
|
|
80
|
-
"class": "
|
|
80
|
+
"class": "s1538eht"
|
|
81
81
|
});
|
|
82
82
|
var StyledDrawCanvas = /*#__PURE__*/(0, _react2.styled)("canvas")({
|
|
83
83
|
name: "StyledDrawCanvas",
|
|
84
|
-
"class": "
|
|
84
|
+
"class": "s101qxdc"
|
|
85
85
|
});
|
|
86
86
|
var StyledSelectionCanvas = /*#__PURE__*/(0, _react2.styled)("canvas")({
|
|
87
87
|
name: "StyledSelectionCanvas",
|
|
88
|
-
"class": "
|
|
88
|
+
"class": "sa4oq48",
|
|
89
89
|
vars: {
|
|
90
|
-
"
|
|
90
|
+
"sa4oq48-0": [function (_ref) {
|
|
91
91
|
var cursor = _ref.cursor;
|
|
92
92
|
return cursor;
|
|
93
93
|
}]
|
|
@@ -19,19 +19,19 @@ var _excluded = ["hidden", "disabled", "selected", "icon", "children", "classNam
|
|
|
19
19
|
_excluded2 = ["hidden", "disabled", "selected", "icon", "children", "type"];
|
|
20
20
|
var StyledButton = /*#__PURE__*/(0, _react2.styled)("button")({
|
|
21
21
|
name: "StyledButton",
|
|
22
|
-
"class": "
|
|
22
|
+
"class": "sq3bzv4"
|
|
23
23
|
});
|
|
24
24
|
var StyledButtonContent = /*#__PURE__*/(0, _react2.styled)("span")({
|
|
25
25
|
name: "StyledButtonContent",
|
|
26
|
-
"class": "
|
|
26
|
+
"class": "sst453j"
|
|
27
27
|
});
|
|
28
28
|
var StyledIcon = /*#__PURE__*/(0, _react2.styled)("span")({
|
|
29
29
|
name: "StyledIcon",
|
|
30
|
-
"class": "
|
|
30
|
+
"class": "s1q5lsc2"
|
|
31
31
|
});
|
|
32
32
|
var StyledChildren = /*#__PURE__*/(0, _react2.styled)("span")({
|
|
33
33
|
name: "StyledChildren",
|
|
34
|
-
"class": "
|
|
34
|
+
"class": "s1dis2j8"
|
|
35
35
|
});
|
|
36
36
|
|
|
37
37
|
var Button = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
|
|
@@ -24,15 +24,15 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
24
24
|
var TRANSITION_DURATION = 300;
|
|
25
25
|
var StyledLoading = /*#__PURE__*/(0, _react.styled)("div")({
|
|
26
26
|
name: "StyledLoading",
|
|
27
|
-
"class": "
|
|
27
|
+
"class": "s9j48u3"
|
|
28
28
|
});
|
|
29
29
|
var StyledLoader = /*#__PURE__*/(0, _react.styled)("div")({
|
|
30
30
|
name: "StyledLoader",
|
|
31
|
-
"class": "
|
|
31
|
+
"class": "s4auclc"
|
|
32
32
|
});
|
|
33
33
|
var StyledShape = /*#__PURE__*/(0, _react.styled)("div")({
|
|
34
34
|
name: "StyledShape",
|
|
35
|
-
"class": "
|
|
35
|
+
"class": "s1l3fbq"
|
|
36
36
|
});
|
|
37
37
|
|
|
38
38
|
var Loading = function Loading(_ref) {
|
|
@@ -15,15 +15,15 @@ var _style = require("../../constants/style");
|
|
|
15
15
|
|
|
16
16
|
var StyledModal = /*#__PURE__*/(0, _react2.styled)("div")({
|
|
17
17
|
name: "StyledModal",
|
|
18
|
-
"class": "
|
|
18
|
+
"class": "s1c8tp02"
|
|
19
19
|
});
|
|
20
20
|
var StyledPanel = /*#__PURE__*/(0, _react2.styled)("div")({
|
|
21
21
|
name: "StyledPanel",
|
|
22
|
-
"class": "
|
|
22
|
+
"class": "svkxpz4"
|
|
23
23
|
});
|
|
24
24
|
var StyledMask = /*#__PURE__*/(0, _react2.styled)("div")({
|
|
25
25
|
name: "StyledMask",
|
|
26
|
-
"class": "
|
|
26
|
+
"class": "s1s9jyyg"
|
|
27
27
|
});
|
|
28
28
|
|
|
29
29
|
var Modal = function Modal(_ref) {
|
|
@@ -19,11 +19,11 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
19
19
|
|
|
20
20
|
var StyledPanel = /*#__PURE__*/(0, _react2.styled)("div")({
|
|
21
21
|
name: "StyledPanel",
|
|
22
|
-
"class": "
|
|
22
|
+
"class": "s1xzg253"
|
|
23
23
|
});
|
|
24
24
|
var StyledTitle = /*#__PURE__*/(0, _react2.styled)("h3")({
|
|
25
25
|
name: "StyledTitle",
|
|
26
|
-
"class": "
|
|
26
|
+
"class": "s17qj3jh"
|
|
27
27
|
});
|
|
28
28
|
|
|
29
29
|
var Panel = function Panel(_ref) {
|
|
@@ -27,11 +27,11 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
27
27
|
|
|
28
28
|
var StyledSnackbar = /*#__PURE__*/(0, _react2.styled)("div")({
|
|
29
29
|
name: "StyledSnackbar",
|
|
30
|
-
"class": "
|
|
30
|
+
"class": "s1xssqat"
|
|
31
31
|
});
|
|
32
32
|
var StyledSnackbarContainer = /*#__PURE__*/(0, _react2.styled)("div")({
|
|
33
33
|
name: "StyledSnackbarContainer",
|
|
34
|
-
"class": "
|
|
34
|
+
"class": "s1bgtt22"
|
|
35
35
|
});
|
|
36
36
|
|
|
37
37
|
var Snackbar = function Snackbar(_ref) {
|
|
@@ -29,9 +29,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
29
29
|
|
|
30
30
|
var StyledColor = /*#__PURE__*/(0, _react2.styled)("div")({
|
|
31
31
|
name: "StyledColor",
|
|
32
|
-
"class": "
|
|
32
|
+
"class": "snh2jyk",
|
|
33
33
|
vars: {
|
|
34
|
-
"
|
|
34
|
+
"snh2jyk-0": [function (_ref) {
|
|
35
35
|
var color = _ref.color;
|
|
36
36
|
return color;
|
|
37
37
|
}]
|
|
@@ -39,13 +39,13 @@ var StyledColor = /*#__PURE__*/(0, _react2.styled)("div")({
|
|
|
39
39
|
});
|
|
40
40
|
var StyleWrapper = /*#__PURE__*/(0, _react2.styled)("div")({
|
|
41
41
|
name: "StyleWrapper",
|
|
42
|
-
"class": "
|
|
42
|
+
"class": "sfm1cqx"
|
|
43
43
|
});
|
|
44
44
|
var StyledCustomColor = /*#__PURE__*/(0, _react2.styled)("div")({
|
|
45
45
|
name: "StyledCustomColor",
|
|
46
|
-
"class": "
|
|
46
|
+
"class": "sttf061",
|
|
47
47
|
vars: {
|
|
48
|
-
"
|
|
48
|
+
"sttf061-0": [function (_ref2) {
|
|
49
49
|
var color = _ref2.color;
|
|
50
50
|
return color;
|
|
51
51
|
}]
|
|
@@ -19,9 +19,9 @@ var _icons = require("../../constants/icons");
|
|
|
19
19
|
|
|
20
20
|
var StyledOption = /*#__PURE__*/(0, _react2.styled)("span")({
|
|
21
21
|
name: "StyledOption",
|
|
22
|
-
"class": "
|
|
22
|
+
"class": "smpmxx5",
|
|
23
23
|
vars: {
|
|
24
|
-
"
|
|
24
|
+
"smpmxx5-0": [function (_ref) {
|
|
25
25
|
var family = _ref.family;
|
|
26
26
|
return family;
|
|
27
27
|
}]
|
|
@@ -17,7 +17,7 @@ var _Button = _interopRequireDefault(require("../common/Button"));
|
|
|
17
17
|
|
|
18
18
|
var StyleToggleLayoutButton = /*#__PURE__*/(0, _react2.styled)(_Button["default"])({
|
|
19
19
|
name: "StyleToggleLayoutButton",
|
|
20
|
-
"class": "
|
|
20
|
+
"class": "sj7hhjx"
|
|
21
21
|
});
|
|
22
22
|
|
|
23
23
|
var LayoutButton = function LayoutButton(_ref) {
|
|
@@ -33,43 +33,43 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
33
33
|
|
|
34
34
|
var StyledLayouts = /*#__PURE__*/(0, _react2.styled)("div")({
|
|
35
35
|
name: "StyledLayouts",
|
|
36
|
-
"class": "
|
|
36
|
+
"class": "su3a8bs"
|
|
37
37
|
});
|
|
38
38
|
var StyledRemoveButton = /*#__PURE__*/(0, _react2.styled)(_Button["default"])({
|
|
39
39
|
name: "StyledRemoveButton",
|
|
40
|
-
"class": "
|
|
40
|
+
"class": "szboplp"
|
|
41
41
|
});
|
|
42
42
|
var StyledLayout = /*#__PURE__*/(0, _react2.styled)("div")({
|
|
43
43
|
name: "StyledLayout",
|
|
44
|
-
"class": "
|
|
44
|
+
"class": "sff5xt"
|
|
45
45
|
});
|
|
46
46
|
var StyledVisibleButton = /*#__PURE__*/(0, _react2.styled)(_Button["default"])({
|
|
47
47
|
name: "StyledVisibleButton",
|
|
48
|
-
"class": "
|
|
48
|
+
"class": "sj3bift"
|
|
49
49
|
});
|
|
50
50
|
var StyledLockedButton = /*#__PURE__*/(0, _react2.styled)(_Button["default"])({
|
|
51
51
|
name: "StyledLockedButton",
|
|
52
|
-
"class": "
|
|
52
|
+
"class": "s10ip0a4"
|
|
53
53
|
});
|
|
54
54
|
var StyledGridButton = /*#__PURE__*/(0, _react2.styled)(_Button["default"])({
|
|
55
55
|
name: "StyledGridButton",
|
|
56
|
-
"class": "
|
|
56
|
+
"class": "s1j9uq9o"
|
|
57
57
|
});
|
|
58
58
|
var StyledSeparator = /*#__PURE__*/(0, _react2.styled)("div")({
|
|
59
59
|
name: "StyledSeparator",
|
|
60
|
-
"class": "
|
|
60
|
+
"class": "s156ddbb"
|
|
61
61
|
});
|
|
62
62
|
var StyledPanelLayouts = /*#__PURE__*/(0, _react2.styled)(_Panel["default"])({
|
|
63
63
|
name: "StyledPanelLayouts",
|
|
64
|
-
"class": "
|
|
64
|
+
"class": "s11gt4hl"
|
|
65
65
|
});
|
|
66
66
|
var StyledScrollingContent = /*#__PURE__*/(0, _react2.styled)("div")({
|
|
67
67
|
name: "StyledScrollingContent",
|
|
68
|
-
"class": "
|
|
68
|
+
"class": "s13cxqhq"
|
|
69
69
|
});
|
|
70
70
|
var StyledPlaceholder = /*#__PURE__*/(0, _react2.styled)("div")({
|
|
71
71
|
name: "StyledPlaceholder",
|
|
72
|
-
"class": "
|
|
72
|
+
"class": "s1idv8qv"
|
|
73
73
|
});
|
|
74
74
|
|
|
75
75
|
var Layout = function Layout(_ref) {
|
|
@@ -19,15 +19,15 @@ var _icons = require("../../constants/icons");
|
|
|
19
19
|
|
|
20
20
|
var StyledLeftTriangle = /*#__PURE__*/(0, _react2.styled)("span")({
|
|
21
21
|
name: "StyledLeftTriangle",
|
|
22
|
-
"class": "
|
|
22
|
+
"class": "s1xxj4yl"
|
|
23
23
|
});
|
|
24
24
|
var StyledRightTriangle = /*#__PURE__*/(0, _react2.styled)("span")({
|
|
25
25
|
name: "StyledRightTriangle",
|
|
26
|
-
"class": "
|
|
26
|
+
"class": "sbd6jc8"
|
|
27
27
|
});
|
|
28
28
|
var StyledOption = /*#__PURE__*/(0, _react2.styled)("span")({
|
|
29
29
|
name: "StyledOption",
|
|
30
|
-
"class": "
|
|
30
|
+
"class": "scawaat"
|
|
31
31
|
});
|
|
32
32
|
|
|
33
33
|
var LineArrowOption = function LineArrowOption(_ref) {
|
|
@@ -19,11 +19,11 @@ var _icons = require("../../constants/icons");
|
|
|
19
19
|
|
|
20
20
|
var StyledLine = /*#__PURE__*/(0, _react2.styled)("span")({
|
|
21
21
|
name: "StyledLine",
|
|
22
|
-
"class": "
|
|
22
|
+
"class": "s1qssg4n"
|
|
23
23
|
});
|
|
24
24
|
var StyledOption = /*#__PURE__*/(0, _react2.styled)("span")({
|
|
25
25
|
name: "StyledOption",
|
|
26
|
-
"class": "
|
|
26
|
+
"class": "se26iq6"
|
|
27
27
|
});
|
|
28
28
|
|
|
29
29
|
var LineTypeOption = function LineTypeOption(_ref) {
|
|
@@ -27,7 +27,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
27
27
|
|
|
28
28
|
var StyledLabel = /*#__PURE__*/(0, _react2.styled)("label")({
|
|
29
29
|
name: "StyledLabel",
|
|
30
|
-
"class": "
|
|
30
|
+
"class": "s9mugpt"
|
|
31
31
|
});
|
|
32
32
|
|
|
33
33
|
var RangeField = function RangeField(_ref) {
|
|
@@ -27,11 +27,11 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
27
27
|
|
|
28
28
|
var StyledButton = /*#__PURE__*/(0, _react2.styled)(_Button["default"])({
|
|
29
29
|
name: "StyledButton",
|
|
30
|
-
"class": "
|
|
30
|
+
"class": "s1ktxhkr"
|
|
31
31
|
});
|
|
32
32
|
var StyleWrapper = /*#__PURE__*/(0, _react2.styled)("div")({
|
|
33
33
|
name: "StyleWrapper",
|
|
34
|
-
"class": "
|
|
34
|
+
"class": "s5sp14o"
|
|
35
35
|
});
|
|
36
36
|
|
|
37
37
|
var SelectField = function SelectField(_ref) {
|
|
@@ -56,15 +56,15 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
|
56
56
|
var SETTING_WIDTH = 40;
|
|
57
57
|
var StyledSettingsBar = /*#__PURE__*/(0, _react2.styled)("div")({
|
|
58
58
|
name: "StyledSettingsBar",
|
|
59
|
-
"class": "
|
|
59
|
+
"class": "s16z54di"
|
|
60
60
|
});
|
|
61
61
|
var StyledSeparator = /*#__PURE__*/(0, _react2.styled)("div")({
|
|
62
62
|
name: "StyledSeparator",
|
|
63
|
-
"class": "
|
|
63
|
+
"class": "sa7lzh9"
|
|
64
64
|
});
|
|
65
65
|
var StyledToolsModal = /*#__PURE__*/(0, _react2.styled)(_Modal["default"])({
|
|
66
66
|
name: "StyledToolsModal",
|
|
67
|
-
"class": "
|
|
67
|
+
"class": "s7b85in"
|
|
68
68
|
});
|
|
69
69
|
|
|
70
70
|
var SettingsItems = function SettingsItems(_ref) {
|
|
@@ -27,29 +27,29 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
27
27
|
|
|
28
28
|
var StyledEditBox = /*#__PURE__*/(0, _react2.styled)("div")({
|
|
29
29
|
name: "StyledEditBox",
|
|
30
|
-
"class": "
|
|
30
|
+
"class": "s1unz6yq",
|
|
31
31
|
vars: {
|
|
32
|
-
"
|
|
32
|
+
"s1unz6yq-0": [function (_ref) {
|
|
33
33
|
var transform = _ref.transform;
|
|
34
34
|
return transform;
|
|
35
35
|
}],
|
|
36
|
-
"
|
|
36
|
+
"s1unz6yq-1": [function (_ref2) {
|
|
37
37
|
var color = _ref2.color;
|
|
38
38
|
return color;
|
|
39
39
|
}],
|
|
40
|
-
"
|
|
40
|
+
"s1unz6yq-2": [function (_ref3) {
|
|
41
41
|
var padding = _ref3.padding;
|
|
42
42
|
return padding;
|
|
43
43
|
}, "px"],
|
|
44
|
-
"
|
|
44
|
+
"s1unz6yq-3": [function (_ref4) {
|
|
45
45
|
var fontsize = _ref4.fontsize;
|
|
46
46
|
return fontsize;
|
|
47
47
|
}, "px"],
|
|
48
|
-
"
|
|
48
|
+
"s1unz6yq-5": [function (_ref5) {
|
|
49
49
|
var fontfamily = _ref5.fontfamily;
|
|
50
50
|
return fontfamily;
|
|
51
51
|
}],
|
|
52
|
-
"
|
|
52
|
+
"s1unz6yq-6": [function (_ref6) {
|
|
53
53
|
var opacity = _ref6.opacity;
|
|
54
54
|
return opacity;
|
|
55
55
|
}]
|
|
@@ -74,8 +74,22 @@ var EditTextBox = function EditTextBox(_ref7) {
|
|
|
74
74
|
|
|
75
75
|
(0, _react.useEffect)(function () {
|
|
76
76
|
if (!ref.current) return;
|
|
77
|
-
|
|
78
|
-
|
|
77
|
+
var currentNode = ref.current;
|
|
78
|
+
|
|
79
|
+
var handlePaste = function handlePaste(e) {
|
|
80
|
+
var _e$clipboardData;
|
|
81
|
+
|
|
82
|
+
e.preventDefault();
|
|
83
|
+
var text = (_e$clipboardData = e.clipboardData) === null || _e$clipboardData === void 0 ? void 0 : _e$clipboardData.getData('text/plain');
|
|
84
|
+
document.execCommand('insertText', false, text); //TODO use Clipboard API when ready
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
currentNode.addEventListener('paste', handlePaste);
|
|
88
|
+
currentNode.innerHTML = (0, _string.convertStringArrayToDivContent)(defaultValue);
|
|
89
|
+
currentNode.focus();
|
|
90
|
+
return function () {
|
|
91
|
+
currentNode.removeEventListener('paste', handlePaste);
|
|
92
|
+
};
|
|
79
93
|
}, [defaultValue]);
|
|
80
94
|
var position = (0, _react.useMemo)(function () {
|
|
81
95
|
var _getShapeInfos = (0, _shapeData.getShapeInfos)(shape, selectionPadding),
|
|
@@ -39,11 +39,11 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
39
39
|
|
|
40
40
|
var StyledPanel = /*#__PURE__*/(0, _react2.styled)(_Panel["default"])({
|
|
41
41
|
name: "StyledPanel",
|
|
42
|
-
"class": "
|
|
42
|
+
"class": "s1uphjfh"
|
|
43
43
|
});
|
|
44
44
|
var StyledRelative = /*#__PURE__*/(0, _react2.styled)("div")({
|
|
45
45
|
name: "StyledRelative",
|
|
46
|
-
"class": "
|
|
46
|
+
"class": "s1e5a6k5"
|
|
47
47
|
});
|
|
48
48
|
|
|
49
49
|
var MenuGroup = function MenuGroup(_ref) {
|
|
@@ -27,7 +27,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
27
27
|
|
|
28
28
|
var StyledInputModal = /*#__PURE__*/(0, _react2.styled)(_Modal["default"])({
|
|
29
29
|
name: "StyledInputModal",
|
|
30
|
-
"class": "
|
|
30
|
+
"class": "s95bkm9"
|
|
31
31
|
});
|
|
32
32
|
|
|
33
33
|
var PictureUrlModal = function PictureUrlModal(_ref) {
|
|
@@ -44,15 +44,15 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
44
44
|
var TOOL_WIDTH = 40;
|
|
45
45
|
var StyledShrinkableTools = /*#__PURE__*/(0, _react2.styled)("div")({
|
|
46
46
|
name: "StyledShrinkableTools",
|
|
47
|
-
"class": "
|
|
47
|
+
"class": "so6hnjf"
|
|
48
48
|
});
|
|
49
49
|
var StyledToolbox = /*#__PURE__*/(0, _react2.styled)("div")({
|
|
50
50
|
name: "StyledToolbox",
|
|
51
|
-
"class": "
|
|
51
|
+
"class": "s1c1dllr"
|
|
52
52
|
});
|
|
53
53
|
var StyledToolsModal = /*#__PURE__*/(0, _react2.styled)(_Modal["default"])({
|
|
54
54
|
name: "StyledToolsModal",
|
|
55
|
-
"class": "
|
|
55
|
+
"class": "s1g032mh"
|
|
56
56
|
});
|
|
57
57
|
var TOOLBAR_STRUCTURE = [{
|
|
58
58
|
title: 'brush',
|
|
@@ -29,11 +29,11 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
29
29
|
|
|
30
30
|
var StyledPanel = /*#__PURE__*/(0, _react2.styled)(_Panel["default"])({
|
|
31
31
|
name: "StyledPanel",
|
|
32
|
-
"class": "
|
|
32
|
+
"class": "s1bvz4xj"
|
|
33
33
|
});
|
|
34
34
|
var StyledRelative = /*#__PURE__*/(0, _react2.styled)("div")({
|
|
35
35
|
name: "StyledRelative",
|
|
36
|
-
"class": "
|
|
36
|
+
"class": "siejlch"
|
|
37
37
|
});
|
|
38
38
|
|
|
39
39
|
var ToolbarGroup = function ToolbarGroup(_ref) {
|
package/dist/styles.css
CHANGED
|
@@ -31,58 +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
|
-
.layoutPanelOpened .
|
|
70
|
-
.
|
|
71
|
-
.
|
|
72
|
-
.
|
|
73
|
-
.
|
|
74
|
-
.
|
|
75
|
-
.
|
|
76
|
-
.
|
|
77
|
-
.
|
|
78
|
-
.
|
|
79
|
-
.
|
|
80
|
-
.
|
|
81
|
-
.
|
|
82
|
-
.
|
|
83
|
-
.
|
|
84
|
-
.
|
|
85
|
-
.
|
|
86
|
-
.
|
|
87
|
-
.
|
|
88
|
-
.
|
|
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
|
+
.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:20px;height:20px;box-sizing:border-box;border-radius:50%;}.snh2jyk[data-mode='fill']{border:1px solid #80808038;background:var(--snh2jyk-0);}.snh2jyk[data-mode='stroke']{border:4px solid #80808038;}.snh2jyk[data-mode='stroke']:after{content:'';display:block;border-radius:100%;border:2px solid var(--snh2jyk-0);position:relative;width:18px;height:18px;left:-3px;top:-3px;box-sizing:border-box;}
|
|
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:20px;height:20px;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;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='2']{position:relative;left:3px;}.se26iq6[data-type='2'] .s1qssg4n:nth-child(3n-1){background:currentColor;width:12px;}.se26iq6[data-type='2'] .s1qssg4n:nth-child(n+11){display:none;}.se26iq6[data-type='1'] .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);}
|