redhotmagma-graphics-editor 1.41.1 → 1.42.0
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/App.js +90 -165
- package/CanvasAdapters/Mock/Canvas.js +71 -125
- package/CanvasAdapters/Mock/Objects/CanvasObject.js +23 -40
- package/CanvasAdapters/Mock/Objects/Group.js +15 -46
- package/CanvasAdapters/Mock/Objects/Image.js +15 -46
- package/CanvasAdapters/Mock/Objects/Text.js +15 -51
- package/CanvasAdapters/Mock/index.js +0 -1
- package/CanvasAdapters/PaperJs/Canvas.js +268 -398
- package/CanvasAdapters/PaperJs/CanvasRepository.js +6 -23
- package/CanvasAdapters/PaperJs/Modifiers/FontSizeMin.js +2 -5
- package/CanvasAdapters/PaperJs/Objects/CanvasObject.js +33 -65
- package/CanvasAdapters/PaperJs/Objects/Group.js +14 -48
- package/CanvasAdapters/PaperJs/Objects/Image.js +58 -114
- package/CanvasAdapters/PaperJs/Objects/Text.js +43 -99
- package/CanvasAdapters/PaperJs/Utils/HTML2Paper.js +57 -108
- package/CanvasAdapters/PaperJs/Utils/SVGfix.js +9 -30
- package/CanvasAdapters/PaperJs/Utils/StyleParams.js +10 -21
- package/CanvasAdapters/PaperJs/Utils/TextToSVGRepository.js +53 -86
- package/CanvasAdapters/PaperJs/Utils/TextToSVGUtils.js +4 -14
- package/CanvasAdapters/PaperJs/Utils/UTF8Base64.js +3 -24
- package/CanvasAdapters/PaperJs/Utils/UseColorLayer.js +58 -0
- package/CanvasAdapters/PaperJs/Utils/UseMask.js +183 -279
- package/CanvasAdapters/PaperJs/Utils/__tests__/SVGfix.test.js +0 -1
- package/CanvasAdapters/PaperJs/Utils/__tests__/TextToSVGUtils.test.js +0 -1
- package/CanvasAdapters/PaperJs/Utils/__tests__/updateFontStyle.test.js +0 -1
- package/CanvasAdapters/PaperJs/Utils/updateFontStyle.js +5 -11
- package/CanvasAdapters/PaperJs/index.js +0 -1
- package/CanvasInterface/Canvas.js +145 -235
- package/CanvasInterface/CanvasProvider.js +25 -75
- package/CanvasInterface/Objects/CanvasObject.js +68 -148
- package/CanvasInterface/Objects/index.js +0 -1
- package/CanvasInterface/Observable.js +10 -29
- package/CanvasInterface/canvasConnect.js +12 -44
- package/CanvasInterface/index.js +1 -7
- package/Components/Canvas/Canvas.js +14 -41
- package/Components/Canvas/CanvasContainer.js +5 -18
- package/Components/Canvas/styles.js +2 -3
- package/Components/DelayedContainer.js +14 -39
- package/Components/Editor/Editor.js +47 -102
- package/Components/Editor/EditorContainer.js +47 -131
- package/Components/Editor/styles.js +2 -3
- package/Components/InlineToolbox/InlineToolbox.js +49 -142
- package/Components/InlineToolbox/InlineToolboxButton.js +9 -19
- package/Components/InlineToolbox/styles.js +2 -3
- package/Components/ManipulableContainer.js +15 -41
- package/Components/ResizeDetect/ResizeDetect.js +14 -47
- package/Components/Rulers/Ruler.js +20 -68
- package/Components/Rulers/Rulers.js +14 -46
- package/Components/Rulers/styles.js +2 -3
- package/Components/SelectionToolbox/ColorPalette.js +25 -73
- package/Components/SelectionToolbox/SelectionToolbox.js +39 -101
- package/Components/SelectionToolbox/TextTools.js +81 -157
- package/Components/SelectionToolbox/styles.js +2 -3
- package/Components/StandardToolbox/StandardToolbox.js +81 -144
- package/Components/TextEditor/TextEditor.js +67 -182
- package/Components/TextEditor/TextEditorStateProvider.js +20 -56
- package/Components/Toolbox/ToolboxContainer.js +5 -18
- package/Components/Toolbox/ToolboxRow.js +4 -16
- package/Components/Toolbox/styles.js +2 -3
- package/Utils/Calc2D.js +3 -9
- package/Utils/DOM.js +22 -80
- package/Utils/Device.js +2 -6
- package/Utils/Image.js +17 -11
- package/Utils/Logger.js +8 -32
- package/Utils/Range.js +6 -33
- package/Utils/String.js +2 -8
- package/Utils/UnitConversion.js +3 -9
- package/Utils/__tests__/Calc2D.test.js +1 -3
- package/Utils/__tests__/DOM.test.js +17 -25
- package/Utils/__tests__/Range.test.js +0 -1
- package/_demos/UsingExternalControls/App.js +13 -48
- package/_demos/UsingRenderProps/App.js +15 -54
- package/index.js +2 -6
- package/package.json +5 -7
- package/src/App.js +35 -38
- package/src/CanvasAdapters/PaperJs/Canvas.ts +11 -0
- package/src/CanvasAdapters/PaperJs/Utils/UseColorLayer.js +56 -0
- package/src/Components/InlineToolbox/InlineToolbox.js +2 -2
- package/src/Components/SelectionToolbox/TextTools.js +1 -1
- package/src/_demos/UsingExternalControls/App.js +25 -28
- package/src/_demos/UsingRenderProps/App.js +16 -19
- package/src/index.js +2 -2
|
@@ -1,66 +1,39 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
|
4
|
-
|
|
5
3
|
Object.defineProperty(exports, "__esModule", {
|
|
6
4
|
value: true
|
|
7
5
|
});
|
|
8
6
|
exports["default"] = exports.TextTools = void 0;
|
|
9
|
-
|
|
10
7
|
var _react = _interopRequireDefault(require("react"));
|
|
11
|
-
|
|
12
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
13
|
-
|
|
14
9
|
var _withStyles = _interopRequireDefault(require("@material-ui/core/styles/withStyles"));
|
|
15
|
-
|
|
16
10
|
var _isObject = _interopRequireDefault(require("lodash/isObject"));
|
|
17
|
-
|
|
18
11
|
var _get = _interopRequireDefault(require("lodash/get"));
|
|
19
|
-
|
|
20
12
|
var _ToolboxRow = _interopRequireDefault(require("../Toolbox/ToolboxRow"));
|
|
21
|
-
|
|
22
13
|
var _TextEditor = _interopRequireDefault(require("../TextEditor/TextEditor"));
|
|
23
|
-
|
|
24
14
|
var _TextEditorStateProvider = require("../TextEditor/TextEditorStateProvider");
|
|
25
|
-
|
|
26
15
|
var _ColorPalette = _interopRequireDefault(require("./ColorPalette"));
|
|
27
|
-
|
|
28
16
|
var _Canvas = require("../../CanvasInterface/Canvas");
|
|
29
|
-
|
|
30
17
|
var _styles = _interopRequireDefault(require("./styles"));
|
|
31
|
-
|
|
32
18
|
var _StyleParams = require("../../CanvasAdapters/PaperJs/Utils/StyleParams");
|
|
33
|
-
|
|
34
19
|
var _String = require("../../Utils/String");
|
|
35
|
-
|
|
36
20
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
37
|
-
|
|
38
|
-
function ownKeys(
|
|
39
|
-
|
|
40
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
41
|
-
|
|
21
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
22
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
23
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
42
24
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
43
|
-
|
|
44
|
-
function
|
|
45
|
-
|
|
46
|
-
function
|
|
47
|
-
|
|
48
|
-
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
|
|
49
|
-
|
|
50
|
-
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
|
51
|
-
|
|
25
|
+
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
|
|
26
|
+
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
|
|
27
|
+
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
|
|
28
|
+
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
|
52
29
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
53
|
-
|
|
54
|
-
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
|
|
55
|
-
|
|
30
|
+
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
|
|
56
31
|
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
|
57
|
-
|
|
58
32
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
59
|
-
|
|
60
|
-
function
|
|
61
|
-
|
|
62
|
-
function
|
|
63
|
-
|
|
33
|
+
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
|
34
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
35
|
+
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
36
|
+
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
64
37
|
var fontFamilyList = [{
|
|
65
38
|
name: 'Arial',
|
|
66
39
|
value: 'Arial, Helvetica, sans-serif'
|
|
@@ -75,64 +48,47 @@ var fontFamilyList = [{
|
|
|
75
48
|
value: '"Courier New", Courier, monospace'
|
|
76
49
|
}];
|
|
77
50
|
var fontSizeList = [8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 26, 28, 36, 48, 72];
|
|
78
|
-
|
|
79
|
-
var TextTools = /*#__PURE__*/function (_React$Component) {
|
|
51
|
+
var TextTools = exports.TextTools = /*#__PURE__*/function (_React$Component) {
|
|
80
52
|
_inherits(TextTools, _React$Component);
|
|
81
|
-
|
|
82
53
|
var _super = _createSuper(TextTools);
|
|
83
|
-
|
|
84
54
|
function TextTools() {
|
|
85
55
|
var _this;
|
|
86
|
-
|
|
87
56
|
_classCallCheck(this, TextTools);
|
|
88
|
-
|
|
89
57
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
90
58
|
args[_key] = arguments[_key];
|
|
91
59
|
}
|
|
92
|
-
|
|
93
60
|
_this = _super.call.apply(_super, [this].concat(args));
|
|
94
|
-
|
|
95
61
|
_defineProperty(_assertThisInitialized(_this), "rteRef", _this.props.rteRef || /*#__PURE__*/_react["default"].createRef());
|
|
96
|
-
|
|
97
62
|
_defineProperty(_assertThisInitialized(_this), "handleCommand", function (evt, value) {
|
|
98
63
|
evt.preventDefault();
|
|
99
|
-
|
|
100
64
|
_this.props.textEditorState.formatDoc(evt.target.value, value);
|
|
101
65
|
});
|
|
102
|
-
|
|
103
66
|
_defineProperty(_assertThisInitialized(_this), "onChangeHTML", function (htmlElement) {
|
|
104
67
|
var _assertThisInitialize = _assertThisInitialized(_this),
|
|
105
|
-
|
|
106
|
-
|
|
68
|
+
selectedObject = _assertThisInitialize.props.canvas.selectedObject;
|
|
107
69
|
if (selectedObject) {
|
|
108
70
|
selectedObject.contentHTML = htmlElement;
|
|
109
71
|
}
|
|
110
72
|
});
|
|
111
|
-
|
|
112
73
|
_defineProperty(_assertThisInitialized(_this), "onChangeProp", function (prop, value) {
|
|
113
74
|
var _assertThisInitialize2 = _assertThisInitialized(_this),
|
|
114
|
-
|
|
115
|
-
|
|
75
|
+
selectedObject = _assertThisInitialize2.props.canvas.selectedObject;
|
|
116
76
|
if (selectedObject) {
|
|
117
77
|
selectedObject[prop] = value;
|
|
118
78
|
}
|
|
119
|
-
|
|
120
79
|
var _this$props$textEdito = _this.props.textEditorState,
|
|
121
|
-
|
|
122
|
-
|
|
80
|
+
currentStyle = _this$props$textEdito.currentStyle,
|
|
81
|
+
updateCurrentStyle = _this$props$textEdito.updateCurrentStyle;
|
|
123
82
|
updateCurrentStyle(_objectSpread(_objectSpread({}, currentStyle), {}, _defineProperty({}, prop, value)));
|
|
124
83
|
});
|
|
125
|
-
|
|
126
84
|
_defineProperty(_assertThisInitialized(_this), "renderLineTools", function (renderObj) {
|
|
127
85
|
var renderLineTools = _this.props.renderLineTools;
|
|
128
|
-
|
|
129
86
|
if (renderLineTools) {
|
|
130
87
|
return renderLineTools(renderObj);
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
|
|
88
|
+
}
|
|
89
|
+
// render default
|
|
134
90
|
var handleCommand = renderObj.handleCommand,
|
|
135
|
-
|
|
91
|
+
ToolboxRow = renderObj.components.ToolboxRow;
|
|
136
92
|
return /*#__PURE__*/_react["default"].createElement(ToolboxRow, null, /*#__PURE__*/_react["default"].createElement("button", {
|
|
137
93
|
type: "button",
|
|
138
94
|
value: "justifyLeft",
|
|
@@ -147,33 +103,27 @@ var TextTools = /*#__PURE__*/function (_React$Component) {
|
|
|
147
103
|
onMouseDown: handleCommand
|
|
148
104
|
}, "Right"));
|
|
149
105
|
});
|
|
150
|
-
|
|
151
106
|
_defineProperty(_assertThisInitialized(_this), "renderInlineTools", function (renderObj) {
|
|
152
107
|
var renderInlineTools = _this.props.renderInlineTools;
|
|
153
|
-
|
|
154
108
|
if (!renderObj.textEditorState) {
|
|
155
109
|
return null;
|
|
156
110
|
}
|
|
157
|
-
|
|
158
111
|
if (renderInlineTools) {
|
|
159
112
|
return renderInlineTools(renderObj);
|
|
160
|
-
}
|
|
161
|
-
|
|
162
|
-
|
|
113
|
+
}
|
|
114
|
+
// render default
|
|
163
115
|
var handleCommand = renderObj.handleCommand,
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
116
|
+
ToolboxRow = renderObj.components.ToolboxRow,
|
|
117
|
+
renderColorPalette = renderObj.renderColorPalette,
|
|
118
|
+
fontFamilyList = renderObj.fontFamilyList,
|
|
119
|
+
textEditorState = renderObj.textEditorState,
|
|
120
|
+
selectedObject = renderObj.selectedObject;
|
|
169
121
|
var formatDoc = textEditorState.formatDoc;
|
|
170
|
-
|
|
171
122
|
var _textEditorState$getS = textEditorState.getStyleValues(),
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
123
|
+
isBold = _textEditorState$getS.isBold,
|
|
124
|
+
isItalic = _textEditorState$getS.isItalic,
|
|
125
|
+
fontFamily = _textEditorState$getS.fontFamily,
|
|
126
|
+
fontSize = _textEditorState$getS.fontSize;
|
|
177
127
|
var fontSizeMin = selectedObject.fontSizeMin;
|
|
178
128
|
return /*#__PURE__*/_react["default"].createElement(ToolboxRow, null, /*#__PURE__*/_react["default"].createElement("button", {
|
|
179
129
|
type: "button",
|
|
@@ -212,17 +162,14 @@ var TextTools = /*#__PURE__*/function (_React$Component) {
|
|
|
212
162
|
}, font.name);
|
|
213
163
|
})), renderColorPalette(renderObj));
|
|
214
164
|
});
|
|
215
|
-
|
|
216
165
|
_defineProperty(_assertThisInitialized(_this), "renderColorPalette", function (renderObj) {
|
|
217
166
|
var _this$props = _this.props,
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
167
|
+
textEditorState = _this$props.textEditorState,
|
|
168
|
+
renderColorPalette = _this$props.renderColorPalette;
|
|
221
169
|
if (renderColorPalette) {
|
|
222
170
|
return renderColorPalette(renderObj);
|
|
223
|
-
}
|
|
224
|
-
|
|
225
|
-
|
|
171
|
+
}
|
|
172
|
+
// render default
|
|
226
173
|
var ColorPalette = renderObj.components.ColorPalette;
|
|
227
174
|
return /*#__PURE__*/_react["default"].createElement(ColorPalette, {
|
|
228
175
|
onChange: function onChange(evt, color) {
|
|
@@ -231,23 +178,21 @@ var TextTools = /*#__PURE__*/function (_React$Component) {
|
|
|
231
178
|
value: textEditorState.currentStyle.color
|
|
232
179
|
});
|
|
233
180
|
});
|
|
234
|
-
|
|
235
181
|
_defineProperty(_assertThisInitialized(_this), "renderTextEditor", function (renderObj) {
|
|
236
182
|
var classes = renderObj.classes,
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
183
|
+
rteRef = renderObj.rteRef,
|
|
184
|
+
editorRef = renderObj.editorRef,
|
|
185
|
+
selectedObject = renderObj.selectedObject,
|
|
186
|
+
onChangeHTML = renderObj.onChangeHTML,
|
|
187
|
+
onChangeProp = renderObj.onChangeProp,
|
|
188
|
+
fullTextCommandList = renderObj.fullTextCommandList,
|
|
189
|
+
autoFocusWhenMounted = renderObj.autoFocusWhenMounted,
|
|
190
|
+
canvas = renderObj.canvas,
|
|
191
|
+
textEditorElementProps = renderObj.textEditorElementProps,
|
|
192
|
+
disableLinebreaks = renderObj.disableLinebreaks;
|
|
247
193
|
var selectedCanvasObject = canvas.selectedObject;
|
|
248
194
|
var explicitStyleParams = selectedCanvasObject ? selectedCanvasObject.getExplicitStyleParams() : {};
|
|
249
195
|
var renderTextEditor = _this.props.renderTextEditor;
|
|
250
|
-
|
|
251
196
|
if (renderTextEditor) {
|
|
252
197
|
return renderTextEditor(_objectSpread(_objectSpread({}, renderObj), {}, {
|
|
253
198
|
explicitStyleParams: explicitStyleParams,
|
|
@@ -256,7 +201,6 @@ var TextTools = /*#__PURE__*/function (_React$Component) {
|
|
|
256
201
|
}
|
|
257
202
|
}));
|
|
258
203
|
}
|
|
259
|
-
|
|
260
204
|
return /*#__PURE__*/_react["default"].createElement(_TextEditor["default"], {
|
|
261
205
|
className: classes.textEditorContent,
|
|
262
206
|
ref: editorRef,
|
|
@@ -271,21 +215,18 @@ var TextTools = /*#__PURE__*/function (_React$Component) {
|
|
|
271
215
|
disableLinebreaks: disableLinebreaks
|
|
272
216
|
});
|
|
273
217
|
});
|
|
274
|
-
|
|
275
218
|
return _this;
|
|
276
219
|
}
|
|
277
|
-
|
|
278
220
|
_createClass(TextTools, [{
|
|
279
221
|
key: "componentDidMount",
|
|
280
222
|
value: function componentDidMount() {
|
|
281
223
|
// update the default style with the first font in the list
|
|
282
224
|
var _this$props2 = this.props,
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
225
|
+
fontFamilyList = _this$props2.fontFamilyList,
|
|
226
|
+
_this$props2$textEdit = _this$props2.textEditorState,
|
|
227
|
+
defaultStyle = _this$props2$textEdit.defaultStyle,
|
|
228
|
+
updateDefaultStyle = _this$props2$textEdit.updateDefaultStyle,
|
|
229
|
+
updateCurrentStyle = _this$props2$textEdit.updateCurrentStyle;
|
|
289
230
|
if (fontFamilyList.length > 0) {
|
|
290
231
|
updateDefaultStyle(_objectSpread(_objectSpread({}, defaultStyle), {}, {
|
|
291
232
|
fontFamily: fontFamilyList[0].value
|
|
@@ -299,24 +240,23 @@ var TextTools = /*#__PURE__*/function (_React$Component) {
|
|
|
299
240
|
key: "componentDidUpdate",
|
|
300
241
|
value: function componentDidUpdate(prevProps) {
|
|
301
242
|
var _this$props3 = this.props,
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
243
|
+
fontFamilyList = _this$props3.fontFamilyList,
|
|
244
|
+
_this$props3$textEdit = _this$props3.textEditorState,
|
|
245
|
+
defaultStyle = _this$props3$textEdit.defaultStyle,
|
|
246
|
+
updateDefaultStyle = _this$props3$textEdit.updateDefaultStyle,
|
|
247
|
+
updateCurrentStyle = _this$props3$textEdit.updateCurrentStyle,
|
|
248
|
+
currentStyle = _this$props3$textEdit.currentStyle,
|
|
249
|
+
resetDefaultStyle = _this$props3$textEdit.resetDefaultStyle,
|
|
250
|
+
selectedObject = _this$props3.selectedObject;
|
|
310
251
|
var editorContent = this.rteRef.current;
|
|
311
|
-
|
|
312
252
|
if (fontFamilyList !== prevProps.fontFamilyList && fontFamilyList.length > 0) {
|
|
313
253
|
updateDefaultStyle({
|
|
314
254
|
fontFamily: fontFamilyList[0].value
|
|
315
255
|
});
|
|
316
|
-
}
|
|
256
|
+
}
|
|
257
|
+
// when there is 0 span's in Text field cursor is always shown in default color even when new color is selected from colorPalette.
|
|
317
258
|
// so required to change color of Text field to currentColor
|
|
318
259
|
|
|
319
|
-
|
|
320
260
|
if (selectedObject.uuid !== prevProps.selectedObject.uuid) {
|
|
321
261
|
var defaultColor = (0, _isObject["default"])(defaultStyle.color.identifier) ? defaultStyle.color.identifier : (0, _String.parseObjectSafe)(defaultStyle.color.identifier);
|
|
322
262
|
var styleParams = (0, _StyleParams.collectStyleParams)(selectedObject.content);
|
|
@@ -331,21 +271,17 @@ var TextTools = /*#__PURE__*/function (_React$Component) {
|
|
|
331
271
|
custom: !!isCustom
|
|
332
272
|
}
|
|
333
273
|
};
|
|
334
|
-
|
|
335
274
|
if (colorObj.identifier.palette) {
|
|
336
275
|
colorObj.identifier = JSON.stringify(colorObj.identifier);
|
|
337
276
|
}
|
|
338
|
-
|
|
339
277
|
updateCurrentStyle({
|
|
340
278
|
color: colorObj,
|
|
341
279
|
fontSize: selectedObject.fontSize
|
|
342
280
|
});
|
|
343
281
|
resetDefaultStyle();
|
|
344
282
|
}
|
|
345
|
-
|
|
346
283
|
var colorChanged = currentStyle.color.value !== prevProps.textEditorState.currentStyle.color.value;
|
|
347
|
-
|
|
348
|
-
if (colorChanged && editorContent.innerText.trim() === '') {
|
|
284
|
+
if (colorChanged && editorContent && editorContent.innerText && editorContent.innerText.trim() === '') {
|
|
349
285
|
updateDefaultStyle({
|
|
350
286
|
color: currentStyle.color
|
|
351
287
|
});
|
|
@@ -355,26 +291,25 @@ var TextTools = /*#__PURE__*/function (_React$Component) {
|
|
|
355
291
|
key: "render",
|
|
356
292
|
value: function render() {
|
|
357
293
|
var handleCommand = this.handleCommand,
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
294
|
+
renderColorPalette = this.renderColorPalette,
|
|
295
|
+
renderLineTools = this.renderLineTools,
|
|
296
|
+
renderInlineTools = this.renderInlineTools,
|
|
297
|
+
onChangeHTML = this.onChangeHTML,
|
|
298
|
+
onChangeProp = this.onChangeProp,
|
|
299
|
+
rteRef = this.rteRef,
|
|
300
|
+
props = this.props,
|
|
301
|
+
updateCurrentStyle = this.updateCurrentStyle,
|
|
302
|
+
renderTextEditor = this.renderTextEditor;
|
|
367
303
|
var canvas = props.canvas,
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
304
|
+
selectedObject = props.selectedObject,
|
|
305
|
+
classes = props.classes,
|
|
306
|
+
fontFamilyList = props.fontFamilyList,
|
|
307
|
+
fontSizeList = props.fontSizeList,
|
|
308
|
+
children = props.children,
|
|
309
|
+
fullTextCommandList = props.fullTextCommandList,
|
|
310
|
+
autoFocusWhenMounted = props.autoFocusWhenMounted,
|
|
311
|
+
textEditorState = props.textEditorState,
|
|
312
|
+
editorRef = props.editorRef;
|
|
378
313
|
if (selectedObject) {
|
|
379
314
|
var renderObj = {
|
|
380
315
|
handleCommand: handleCommand,
|
|
@@ -399,23 +334,16 @@ var TextTools = /*#__PURE__*/function (_React$Component) {
|
|
|
399
334
|
fontSizeList: fontSizeList,
|
|
400
335
|
fullTextCommandList: fullTextCommandList
|
|
401
336
|
};
|
|
402
|
-
|
|
403
337
|
if (typeof children === 'function') {
|
|
404
338
|
return children(renderObj);
|
|
405
339
|
}
|
|
406
|
-
|
|
407
340
|
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, renderLineTools(renderObj), renderInlineTools(renderObj), /*#__PURE__*/_react["default"].createElement(_ToolboxRow["default"], null, renderTextEditor(renderObj)));
|
|
408
341
|
}
|
|
409
|
-
|
|
410
342
|
return null;
|
|
411
343
|
}
|
|
412
344
|
}]);
|
|
413
|
-
|
|
414
345
|
return TextTools;
|
|
415
346
|
}(_react["default"].Component);
|
|
416
|
-
|
|
417
|
-
exports.TextTools = TextTools;
|
|
418
|
-
|
|
419
347
|
_defineProperty(TextTools, "propTypes", {
|
|
420
348
|
renderLineTools: _propTypes["default"].func,
|
|
421
349
|
renderInlineTools: _propTypes["default"].func,
|
|
@@ -431,7 +359,6 @@ _defineProperty(TextTools, "propTypes", {
|
|
|
431
359
|
fontSizeList: _propTypes["default"].arrayOf(_propTypes["default"].number.isRequired).isRequired,
|
|
432
360
|
classes: _propTypes["default"].object.isRequired
|
|
433
361
|
});
|
|
434
|
-
|
|
435
362
|
_defineProperty(TextTools, "defaultProps", {
|
|
436
363
|
fontFamilyList: fontFamilyList,
|
|
437
364
|
fontSizeList: fontSizeList,
|
|
@@ -439,9 +366,6 @@ _defineProperty(TextTools, "defaultProps", {
|
|
|
439
366
|
fullTextCommandList: [],
|
|
440
367
|
withStateProvider: false
|
|
441
368
|
});
|
|
442
|
-
|
|
443
|
-
var _default = (0, _withStyles["default"])(_styles["default"], {
|
|
369
|
+
var _default = exports["default"] = (0, _withStyles["default"])(_styles["default"], {
|
|
444
370
|
name: 'Designer-TextTools'
|
|
445
|
-
})((0, _TextEditorStateProvider.withTextEditorState)(TextTools));
|
|
446
|
-
|
|
447
|
-
exports["default"] = _default;
|
|
371
|
+
})((0, _TextEditorStateProvider.withTextEditorState)(TextTools));
|
|
@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports["default"] = void 0;
|
|
7
|
-
var _default = {
|
|
7
|
+
var _default = exports["default"] = {
|
|
8
8
|
textEditorContent: {
|
|
9
9
|
border: '1px solid black',
|
|
10
10
|
background: '#FFF',
|
|
@@ -14,5 +14,4 @@ var _default = {
|
|
|
14
14
|
position: 'fixed',
|
|
15
15
|
bottom: 0
|
|
16
16
|
}
|
|
17
|
-
};
|
|
18
|
-
exports["default"] = _default;
|
|
17
|
+
};
|