@yorab/react-paint 0.7.1 → 0.7.3
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.
|
@@ -185,6 +185,7 @@ const Canvas = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
|
|
|
185
185
|
shape: selectedShape,
|
|
186
186
|
defaultValue: selectionMode.defaultValue,
|
|
187
187
|
updateValue: updateSelectedShapeText,
|
|
188
|
+
saveShapes: saveShapes,
|
|
188
189
|
selectionPadding: selectionPadding
|
|
189
190
|
})));
|
|
190
191
|
});
|
|
@@ -73,9 +73,11 @@ const EditTextBox = _ref7 => {
|
|
|
73
73
|
shape,
|
|
74
74
|
defaultValue,
|
|
75
75
|
updateValue,
|
|
76
|
+
saveShapes,
|
|
76
77
|
selectionPadding
|
|
77
78
|
} = _ref7;
|
|
78
79
|
const ref = (0, _react.useRef)(null);
|
|
80
|
+
const saveShapesRef = (0, _react.useRef)(saveShapes);
|
|
79
81
|
|
|
80
82
|
const updateContentEditable = e => {
|
|
81
83
|
updateValue((0, _string.convertDivContentToStringArray)(e.target.innerHTML));
|
|
@@ -100,6 +102,12 @@ const EditTextBox = _ref7 => {
|
|
|
100
102
|
currentNode.removeEventListener('paste', handlePaste);
|
|
101
103
|
};
|
|
102
104
|
}, [defaultValue]);
|
|
105
|
+
(0, _react.useEffect)(() => {
|
|
106
|
+
const saveText = saveShapesRef.current;
|
|
107
|
+
return () => {
|
|
108
|
+
saveText();
|
|
109
|
+
};
|
|
110
|
+
}, []);
|
|
103
111
|
const position = (0, _react.useMemo)(() => {
|
|
104
112
|
const {
|
|
105
113
|
borders,
|
|
@@ -107,7 +115,7 @@ const EditTextBox = _ref7 => {
|
|
|
107
115
|
} = (0, _shapes.getShapeInfos)(shape, selectionPadding);
|
|
108
116
|
return (0, _trigo.rotatePoint)({
|
|
109
117
|
point: [borders.x, borders.y],
|
|
110
|
-
rotation: shape.rotation,
|
|
118
|
+
rotation: -shape.rotation,
|
|
111
119
|
origin: center
|
|
112
120
|
});
|
|
113
121
|
}, [shape, selectionPadding]);
|
package/dist/styles.css
CHANGED
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
min-width: 0;
|
|
32
32
|
}
|
|
33
33
|
|
|
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;}
|
|
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;background:none;}.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
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%;}
|
package/dist/utils/string.js
CHANGED
|
@@ -9,8 +9,8 @@ exports.decodeHtmlEntities = exports.convertStringArrayToDivContent = exports.co
|
|
|
9
9
|
|
|
10
10
|
var _fp = _interopRequireDefault(require("lodash/fp"));
|
|
11
11
|
|
|
12
|
-
const
|
|
13
|
-
const stripDivRegexp = /<(\/)?div(\/?\s?)>/
|
|
12
|
+
const stripAllTagsRegexp = /(<([^>]+)>)/gi;
|
|
13
|
+
const stripDivRegexp = /<(\/)?div(\/?\s?)>/gi;
|
|
14
14
|
|
|
15
15
|
const convertStringArrayToDivContent = toConvert => {
|
|
16
16
|
return toConvert.map(val => "<div>".concat(val === '' ? '<br/>' : val, "</div>")).join('');
|
|
@@ -29,7 +29,7 @@ exports.decodeHtmlEntities = decodeHtmlEntities;
|
|
|
29
29
|
const convertDivContentToStringArray = toConvert => {
|
|
30
30
|
return _fp.default.flow(divContent => decodeHtmlEntities(divContent), divContent => divContent.split('<div>'), _fp.default.flatMap(val => {
|
|
31
31
|
const newVal = val.replaceAll(stripDivRegexp, '');
|
|
32
|
-
return newVal === '' ? undefined : newVal.replaceAll(
|
|
32
|
+
return newVal === '' ? undefined : newVal.replaceAll(stripAllTagsRegexp, '');
|
|
33
33
|
}), _fp.default.reject(_fp.default.isUndefined))(toConvert);
|
|
34
34
|
};
|
|
35
35
|
|