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,56 +1,37 @@
|
|
|
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"] = void 0;
|
|
9
|
-
|
|
10
7
|
var _react = _interopRequireDefault(require("react"));
|
|
11
|
-
|
|
12
8
|
var _withStyles = _interopRequireDefault(require("@material-ui/core/styles/withStyles"));
|
|
13
|
-
|
|
14
9
|
var _isObject = _interopRequireDefault(require("lodash/isObject"));
|
|
15
|
-
|
|
16
10
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
17
|
-
|
|
18
11
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
19
|
-
|
|
20
|
-
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); }
|
|
21
|
-
|
|
22
|
-
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
|
23
|
-
|
|
12
|
+
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); }
|
|
13
|
+
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); }
|
|
14
|
+
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
|
24
15
|
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); }; }
|
|
25
|
-
|
|
26
|
-
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
|
|
27
|
-
|
|
16
|
+
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); }
|
|
28
17
|
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
|
29
|
-
|
|
30
18
|
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; } }
|
|
31
|
-
|
|
32
|
-
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
|
33
|
-
|
|
19
|
+
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
|
34
20
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
35
|
-
|
|
36
|
-
function
|
|
37
|
-
|
|
38
|
-
function
|
|
39
|
-
|
|
40
|
-
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
41
|
-
|
|
21
|
+
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); } }
|
|
22
|
+
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
|
|
23
|
+
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; }
|
|
24
|
+
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
25
|
+
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); }
|
|
42
26
|
var Color = /*#__PURE__*/function () {
|
|
43
27
|
function Color(r, g, b) {
|
|
44
28
|
_classCallCheck(this, Color);
|
|
45
|
-
|
|
46
29
|
_defineProperty(this, "rgb", {
|
|
47
30
|
r: 0,
|
|
48
31
|
g: 0,
|
|
49
32
|
b: 0
|
|
50
33
|
});
|
|
51
|
-
|
|
52
34
|
_defineProperty(this, "identifier", null);
|
|
53
|
-
|
|
54
35
|
this.rgb = {
|
|
55
36
|
r: Color.clamp(r),
|
|
56
37
|
g: Color.clamp(g),
|
|
@@ -58,7 +39,6 @@ var Color = /*#__PURE__*/function () {
|
|
|
58
39
|
};
|
|
59
40
|
this.identifier = this.hex;
|
|
60
41
|
}
|
|
61
|
-
|
|
62
42
|
_createClass(Color, [{
|
|
63
43
|
key: "hex",
|
|
64
44
|
get: function get() {
|
|
@@ -80,26 +60,25 @@ var Color = /*#__PURE__*/function () {
|
|
|
80
60
|
key: "fromRGB",
|
|
81
61
|
value: function fromRGB(_ref) {
|
|
82
62
|
var r = _ref.r,
|
|
83
|
-
|
|
84
|
-
|
|
63
|
+
g = _ref.g,
|
|
64
|
+
b = _ref.b;
|
|
85
65
|
return new Color(r, g, b);
|
|
86
66
|
}
|
|
87
67
|
}, {
|
|
88
68
|
key: "fromHEX",
|
|
89
69
|
value: function fromHEX(hex) {
|
|
90
70
|
var _Color$hexToRgb = Color.hexToRgb(hex),
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
71
|
+
r = _Color$hexToRgb.r,
|
|
72
|
+
g = _Color$hexToRgb.g,
|
|
73
|
+
b = _Color$hexToRgb.b;
|
|
95
74
|
return new Color(r, g, b);
|
|
96
75
|
}
|
|
97
76
|
}, {
|
|
98
77
|
key: "rgb2hex",
|
|
99
78
|
value: function rgb2hex(_ref2) {
|
|
100
79
|
var r = _ref2.r,
|
|
101
|
-
|
|
102
|
-
|
|
80
|
+
g = _ref2.g,
|
|
81
|
+
b = _ref2.b;
|
|
103
82
|
return "#".concat("00000".concat((r << 16 | g << 8 | b).toString(16)).slice(-6));
|
|
104
83
|
}
|
|
105
84
|
}, {
|
|
@@ -118,44 +97,35 @@ var Color = /*#__PURE__*/function () {
|
|
|
118
97
|
} : null;
|
|
119
98
|
}
|
|
120
99
|
}]);
|
|
121
|
-
|
|
122
100
|
return Color;
|
|
123
101
|
}();
|
|
124
|
-
|
|
125
102
|
function generatePalette() {
|
|
126
103
|
var numColors = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
|
|
127
104
|
var numShades = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 3;
|
|
128
105
|
var colors = [];
|
|
129
|
-
|
|
130
106
|
for (var r = 1; r <= numColors; r++) {
|
|
131
107
|
var sr = r / numColors * 255;
|
|
132
|
-
|
|
133
108
|
for (var g = 1; g <= numColors; g++) {
|
|
134
109
|
var sg = g / numColors * 255;
|
|
135
|
-
|
|
136
110
|
for (var b = 1; b <= numColors; b++) {
|
|
137
111
|
var sb = b / numColors * 255;
|
|
138
112
|
var shades = [];
|
|
139
|
-
|
|
140
113
|
for (var s = 1; s <= numShades; s++) {
|
|
141
114
|
var a = s / numShades;
|
|
142
115
|
var color = new Color(sr * a, sg * a, sb * a);
|
|
143
116
|
color.label = color.hex;
|
|
144
117
|
shades.push(color);
|
|
145
118
|
}
|
|
146
|
-
|
|
147
119
|
colors.push(shades);
|
|
148
120
|
}
|
|
149
121
|
}
|
|
150
122
|
}
|
|
151
|
-
|
|
152
123
|
return {
|
|
153
124
|
numColors: numColors,
|
|
154
125
|
numShades: numShades,
|
|
155
126
|
colors: colors
|
|
156
127
|
};
|
|
157
128
|
}
|
|
158
|
-
|
|
159
129
|
var styles = {
|
|
160
130
|
colorPalette: {
|
|
161
131
|
display: 'block',
|
|
@@ -177,27 +147,19 @@ var styles = {
|
|
|
177
147
|
"float": 'left'
|
|
178
148
|
}
|
|
179
149
|
};
|
|
180
|
-
|
|
181
150
|
var ColorPalette = /*#__PURE__*/function (_React$Component) {
|
|
182
151
|
_inherits(ColorPalette, _React$Component);
|
|
183
|
-
|
|
184
152
|
var _super = _createSuper(ColorPalette);
|
|
185
|
-
|
|
186
153
|
function ColorPalette() {
|
|
187
154
|
var _this;
|
|
188
|
-
|
|
189
155
|
_classCallCheck(this, ColorPalette);
|
|
190
|
-
|
|
191
156
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
192
157
|
args[_key] = arguments[_key];
|
|
193
158
|
}
|
|
194
|
-
|
|
195
159
|
_this = _super.call.apply(_super, [this].concat(args));
|
|
196
|
-
|
|
197
160
|
_defineProperty(_assertThisInitialized(_this), "state", {
|
|
198
161
|
show: false
|
|
199
162
|
});
|
|
200
|
-
|
|
201
163
|
_defineProperty(_assertThisInitialized(_this), "toggle", function () {
|
|
202
164
|
return _this.setState(function (_ref3) {
|
|
203
165
|
var show = _ref3.show;
|
|
@@ -206,21 +168,17 @@ var ColorPalette = /*#__PURE__*/function (_React$Component) {
|
|
|
206
168
|
};
|
|
207
169
|
});
|
|
208
170
|
});
|
|
209
|
-
|
|
210
171
|
return _this;
|
|
211
172
|
}
|
|
212
|
-
|
|
213
173
|
_createClass(ColorPalette, [{
|
|
214
174
|
key: "render",
|
|
215
175
|
value: function render() {
|
|
216
176
|
var _this$props = this.props,
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
177
|
+
palette = _this$props.palette,
|
|
178
|
+
onChange = _this$props.onChange,
|
|
179
|
+
classes = _this$props.classes,
|
|
180
|
+
value = _this$props.value;
|
|
222
181
|
var _palette = palette || generatePalette(3, 5);
|
|
223
|
-
|
|
224
182
|
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("button", {
|
|
225
183
|
type: "button",
|
|
226
184
|
onClick: this.toggle
|
|
@@ -239,8 +197,8 @@ var ColorPalette = /*#__PURE__*/function (_React$Component) {
|
|
|
239
197
|
}
|
|
240
198
|
}, colors.map(function (color, ci) {
|
|
241
199
|
var hex = color.hex,
|
|
242
|
-
|
|
243
|
-
|
|
200
|
+
label = color.label,
|
|
201
|
+
identifier = color.identifier;
|
|
244
202
|
var currentColorValue = (0, _isObject["default"])(value.identifier) ? value.identifier.color : value.identifier;
|
|
245
203
|
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
246
204
|
className: classes.colorBlock,
|
|
@@ -259,25 +217,19 @@ var ColorPalette = /*#__PURE__*/function (_React$Component) {
|
|
|
259
217
|
})));
|
|
260
218
|
}
|
|
261
219
|
}]);
|
|
262
|
-
|
|
263
220
|
return ColorPalette;
|
|
264
221
|
}(_react["default"].Component);
|
|
265
|
-
|
|
266
222
|
_defineProperty(ColorPalette, "propTypes", {
|
|
267
223
|
palette: _propTypes["default"].object,
|
|
268
224
|
classes: _propTypes["default"].object,
|
|
269
225
|
value: _propTypes["default"].object,
|
|
270
226
|
onChange: _propTypes["default"].func
|
|
271
227
|
});
|
|
272
|
-
|
|
273
228
|
_defineProperty(ColorPalette, "defaultProps", {
|
|
274
229
|
palette: {},
|
|
275
230
|
classes: {},
|
|
276
231
|
value: {}
|
|
277
232
|
});
|
|
278
|
-
|
|
279
|
-
var _default = (0, _withStyles["default"])(styles, {
|
|
233
|
+
var _default = exports["default"] = (0, _withStyles["default"])(styles, {
|
|
280
234
|
name: 'Designer-ColorPalette'
|
|
281
|
-
})(ColorPalette);
|
|
282
|
-
|
|
283
|
-
exports["default"] = _default;
|
|
235
|
+
})(ColorPalette);
|
|
@@ -1,160 +1,112 @@
|
|
|
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.SelectionToolbox = 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 _ToolboxContainer = _interopRequireDefault(require("../Toolbox/ToolboxContainer"));
|
|
17
|
-
|
|
18
11
|
var _ToolboxRow = _interopRequireDefault(require("../Toolbox/ToolboxRow"));
|
|
19
|
-
|
|
20
12
|
var _TextTools = _interopRequireDefault(require("./TextTools"));
|
|
21
|
-
|
|
22
13
|
var _CanvasProvider = require("../../CanvasInterface/CanvasProvider");
|
|
23
|
-
|
|
24
14
|
var _Canvas = require("../../CanvasInterface/Canvas");
|
|
25
|
-
|
|
26
15
|
var _Logger = _interopRequireDefault(require("../../Utils/Logger"));
|
|
27
|
-
|
|
28
16
|
var _styles = _interopRequireDefault(require("./styles"));
|
|
29
|
-
|
|
30
17
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
31
|
-
|
|
32
|
-
function ownKeys(
|
|
33
|
-
|
|
34
|
-
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; }
|
|
35
|
-
|
|
18
|
+
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); }
|
|
19
|
+
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; }
|
|
20
|
+
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; }
|
|
36
21
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
37
|
-
|
|
38
|
-
function
|
|
39
|
-
|
|
40
|
-
function
|
|
41
|
-
|
|
42
|
-
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); }
|
|
43
|
-
|
|
44
|
-
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
|
45
|
-
|
|
22
|
+
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); } }
|
|
23
|
+
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
|
|
24
|
+
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); }
|
|
25
|
+
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
|
46
26
|
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); }; }
|
|
47
|
-
|
|
48
|
-
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
|
|
49
|
-
|
|
27
|
+
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); }
|
|
50
28
|
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
|
51
|
-
|
|
52
29
|
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; } }
|
|
53
|
-
|
|
54
|
-
function
|
|
55
|
-
|
|
56
|
-
function
|
|
57
|
-
|
|
30
|
+
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
|
31
|
+
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; }
|
|
32
|
+
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
33
|
+
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); }
|
|
58
34
|
var logger = new _Logger["default"]('SelectionToolbox');
|
|
59
|
-
|
|
60
|
-
var SelectionToolbox = /*#__PURE__*/function (_React$Component) {
|
|
35
|
+
var SelectionToolbox = exports.SelectionToolbox = /*#__PURE__*/function (_React$Component) {
|
|
61
36
|
_inherits(SelectionToolbox, _React$Component);
|
|
62
|
-
|
|
63
37
|
var _super = _createSuper(SelectionToolbox);
|
|
64
|
-
|
|
65
38
|
function SelectionToolbox() {
|
|
66
39
|
var _this;
|
|
67
|
-
|
|
68
40
|
_classCallCheck(this, SelectionToolbox);
|
|
69
|
-
|
|
70
41
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
71
42
|
args[_key] = arguments[_key];
|
|
72
43
|
}
|
|
73
|
-
|
|
74
44
|
_this = _super.call.apply(_super, [this].concat(args));
|
|
75
|
-
|
|
76
45
|
_defineProperty(_assertThisInitialized(_this), "state", {
|
|
77
46
|
rotation: 0,
|
|
78
47
|
scaling: 0
|
|
79
48
|
});
|
|
80
|
-
|
|
81
49
|
_defineProperty(_assertThisInitialized(_this), "onRotationChange", function (evt) {
|
|
82
50
|
var canvas = _this.props.canvas;
|
|
83
51
|
var selectedObject = canvas.selectedObject;
|
|
84
|
-
|
|
85
52
|
if (selectedObject) {
|
|
86
53
|
var rotation = evt.target.value;
|
|
87
54
|
selectedObject.rotation = rotation;
|
|
88
|
-
|
|
89
55
|
_this.setState({
|
|
90
56
|
rotation: rotation
|
|
91
57
|
});
|
|
92
58
|
}
|
|
93
59
|
});
|
|
94
|
-
|
|
95
60
|
_defineProperty(_assertThisInitialized(_this), "onScalingChange", function (evt) {
|
|
96
61
|
var canvas = _this.props.canvas;
|
|
97
62
|
var selectedObject = canvas.selectedObject;
|
|
98
|
-
|
|
99
63
|
if (selectedObject) {
|
|
100
64
|
var scaling = +evt.target.value;
|
|
101
65
|
selectedObject.scaling = scaling;
|
|
102
|
-
|
|
103
66
|
_this.setState({
|
|
104
67
|
scaling: scaling
|
|
105
68
|
});
|
|
106
69
|
}
|
|
107
70
|
});
|
|
108
|
-
|
|
109
71
|
_defineProperty(_assertThisInitialized(_this), "onMoveUpClick", function () {
|
|
110
72
|
var canvas = _this.props.canvas;
|
|
111
73
|
var selectedObject = canvas.selectedObject;
|
|
112
|
-
|
|
113
74
|
if (selectedObject) {
|
|
114
75
|
var idx = selectedObject.getIndex();
|
|
115
76
|
selectedObject.setIndex(idx + 1);
|
|
116
77
|
}
|
|
117
78
|
});
|
|
118
|
-
|
|
119
79
|
_defineProperty(_assertThisInitialized(_this), "onMoveDownClick", function () {
|
|
120
80
|
var canvas = _this.props.canvas;
|
|
121
81
|
var selectedObject = canvas.selectedObject;
|
|
122
|
-
|
|
123
82
|
if (selectedObject) {
|
|
124
83
|
var idx = selectedObject.getIndex();
|
|
125
84
|
selectedObject.setIndex(idx - 1);
|
|
126
85
|
}
|
|
127
86
|
});
|
|
128
|
-
|
|
129
87
|
_defineProperty(_assertThisInitialized(_this), "onLockChange", function (evt) {
|
|
130
88
|
var canvas = _this.props.canvas;
|
|
131
89
|
var selectedObject = canvas.selectedObject;
|
|
132
|
-
|
|
133
90
|
if (selectedObject) {
|
|
134
91
|
selectedObject.locked = evt.target.checked;
|
|
135
92
|
}
|
|
136
93
|
});
|
|
137
|
-
|
|
138
94
|
_defineProperty(_assertThisInitialized(_this), "onAutoFitChange", function (evt) {
|
|
139
95
|
var canvas = _this.props.canvas;
|
|
140
96
|
var selectedObject = canvas.selectedObject;
|
|
141
|
-
|
|
142
97
|
if (selectedObject) {
|
|
143
98
|
selectedObject.autoFit = evt.target.checked;
|
|
144
99
|
}
|
|
145
100
|
});
|
|
146
|
-
|
|
147
101
|
return _this;
|
|
148
102
|
}
|
|
149
|
-
|
|
150
103
|
_createClass(SelectionToolbox, [{
|
|
151
104
|
key: "componentDidUpdate",
|
|
152
105
|
value: function componentDidUpdate(prevProps) {
|
|
153
106
|
var selectedObject = this.props.selectedObject;
|
|
154
|
-
|
|
155
107
|
if (selectedObject && selectedObject !== prevProps.selectedObject) {
|
|
156
108
|
var rotation = selectedObject.rotation,
|
|
157
|
-
|
|
109
|
+
scaling = selectedObject.scaling;
|
|
158
110
|
this.setState({
|
|
159
111
|
rotation: rotation,
|
|
160
112
|
scaling: scaling
|
|
@@ -165,22 +117,20 @@ var SelectionToolbox = /*#__PURE__*/function (_React$Component) {
|
|
|
165
117
|
key: "renderObjectTools",
|
|
166
118
|
value: function renderObjectTools(renderObj) {
|
|
167
119
|
var renderObjectTools = this.props.renderObjectTools;
|
|
168
|
-
|
|
169
120
|
if (renderObjectTools) {
|
|
170
121
|
return renderObjectTools(renderObj);
|
|
171
|
-
}
|
|
172
|
-
|
|
173
|
-
|
|
122
|
+
}
|
|
123
|
+
// render default
|
|
174
124
|
var selectedObject = renderObj.selectedObject,
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
125
|
+
_renderObj$state = renderObj.state,
|
|
126
|
+
rotation = _renderObj$state.rotation,
|
|
127
|
+
scaling = _renderObj$state.scaling,
|
|
128
|
+
onRotationChange = renderObj.onRotationChange,
|
|
129
|
+
onScalingChange = renderObj.onScalingChange,
|
|
130
|
+
onMoveUpClick = renderObj.onMoveUpClick,
|
|
131
|
+
onMoveDownClick = renderObj.onMoveDownClick,
|
|
132
|
+
onLockChange = renderObj.onLockChange,
|
|
133
|
+
onAutoFitChange = renderObj.onAutoFitChange;
|
|
184
134
|
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_ToolboxRow["default"], null, /*#__PURE__*/_react["default"].createElement("label", null, "Rotation: ", /*#__PURE__*/_react["default"].createElement("input", {
|
|
185
135
|
type: "range",
|
|
186
136
|
min: "0",
|
|
@@ -224,7 +174,6 @@ var SelectionToolbox = /*#__PURE__*/function (_React$Component) {
|
|
|
224
174
|
key: "renderTextTools",
|
|
225
175
|
value: function renderTextTools(renderObj) {
|
|
226
176
|
var renderTextTools = this.props.renderTextTools;
|
|
227
|
-
|
|
228
177
|
if (renderTextTools) {
|
|
229
178
|
return renderTextTools(_objectSpread(_objectSpread({}, renderObj), {}, {
|
|
230
179
|
components: {
|
|
@@ -232,7 +181,6 @@ var SelectionToolbox = /*#__PURE__*/function (_React$Component) {
|
|
|
232
181
|
}
|
|
233
182
|
}));
|
|
234
183
|
}
|
|
235
|
-
|
|
236
184
|
return /*#__PURE__*/_react["default"].createElement(_TextTools["default"], renderObj);
|
|
237
185
|
}
|
|
238
186
|
}, {
|
|
@@ -240,18 +188,17 @@ var SelectionToolbox = /*#__PURE__*/function (_React$Component) {
|
|
|
240
188
|
value: function render() {
|
|
241
189
|
logger.log('render SelectionToolbox');
|
|
242
190
|
var props = this.props,
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
191
|
+
onRotationChange = this.onRotationChange,
|
|
192
|
+
onScalingChange = this.onScalingChange,
|
|
193
|
+
onMoveUpClick = this.onMoveUpClick,
|
|
194
|
+
onMoveDownClick = this.onMoveDownClick,
|
|
195
|
+
onLockChange = this.onLockChange,
|
|
196
|
+
onAutoFitChange = this.onAutoFitChange,
|
|
197
|
+
state = this.state;
|
|
250
198
|
var children = props.children,
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
199
|
+
selectedObject = props.selectedObject,
|
|
200
|
+
canvas = props.canvas,
|
|
201
|
+
classes = props.classes;
|
|
255
202
|
if (selectedObject) {
|
|
256
203
|
if (typeof children === 'function') {
|
|
257
204
|
// call the render prop with all the necessary input
|
|
@@ -271,9 +218,8 @@ var SelectionToolbox = /*#__PURE__*/function (_React$Component) {
|
|
|
271
218
|
TextTools: _TextTools["default"]
|
|
272
219
|
}
|
|
273
220
|
});
|
|
274
|
-
}
|
|
275
|
-
|
|
276
|
-
|
|
221
|
+
}
|
|
222
|
+
// render default
|
|
277
223
|
return /*#__PURE__*/_react["default"].createElement(_ToolboxContainer["default"], {
|
|
278
224
|
className: classes.selectionToolboxContainer
|
|
279
225
|
}, this.renderObjectTools({
|
|
@@ -294,16 +240,11 @@ var SelectionToolbox = /*#__PURE__*/function (_React$Component) {
|
|
|
294
240
|
canvas: canvas
|
|
295
241
|
}));
|
|
296
242
|
}
|
|
297
|
-
|
|
298
243
|
return null;
|
|
299
244
|
}
|
|
300
245
|
}]);
|
|
301
|
-
|
|
302
246
|
return SelectionToolbox;
|
|
303
247
|
}(_react["default"].Component);
|
|
304
|
-
|
|
305
|
-
exports.SelectionToolbox = SelectionToolbox;
|
|
306
|
-
|
|
307
248
|
_defineProperty(SelectionToolbox, "propTypes", {
|
|
308
249
|
children: _propTypes["default"].func,
|
|
309
250
|
selectedObject: _propTypes["default"].object,
|
|
@@ -311,9 +252,6 @@ _defineProperty(SelectionToolbox, "propTypes", {
|
|
|
311
252
|
renderTextTools: _propTypes["default"].func,
|
|
312
253
|
canvas: _propTypes["default"].instanceOf(_Canvas.AbstractCanvas).isRequired
|
|
313
254
|
});
|
|
314
|
-
|
|
315
|
-
var _default = (0, _withStyles["default"])(_styles["default"], {
|
|
255
|
+
var _default = exports["default"] = (0, _withStyles["default"])(_styles["default"], {
|
|
316
256
|
name: 'Designer-SelectionToolbox'
|
|
317
|
-
})((0, _CanvasProvider.withCanvas)((0, _CanvasProvider.withCanvasState)(SelectionToolbox)));
|
|
318
|
-
|
|
319
|
-
exports["default"] = _default;
|
|
257
|
+
})((0, _CanvasProvider.withCanvas)((0, _CanvasProvider.withCanvasState)(SelectionToolbox)));
|