@pie-element/drawing-response 4.6.1-beta.0 → 4.6.1-beta.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.
- package/configure/package.json +2 -2
- package/package.json +2 -2
- package/configure/lib/button.js +0 -61
- package/configure/lib/button.js.map +0 -1
- package/configure/lib/defaults.js +0 -56
- package/configure/lib/defaults.js.map +0 -1
- package/configure/lib/image-container.js +0 -364
- package/configure/lib/image-container.js.map +0 -1
- package/configure/lib/index.js +0 -188
- package/configure/lib/index.js.map +0 -1
- package/configure/lib/root.js +0 -256
- package/configure/lib/root.js.map +0 -1
- package/controller/lib/defaults.js +0 -16
- package/controller/lib/defaults.js.map +0 -1
- package/controller/lib/index.js +0 -84
- package/controller/lib/index.js.map +0 -1
- package/lib/drawing-response/button.js +0 -74
- package/lib/drawing-response/button.js.map +0 -1
- package/lib/drawing-response/constants.js +0 -44
- package/lib/drawing-response/constants.js.map +0 -1
- package/lib/drawing-response/container.js +0 -342
- package/lib/drawing-response/container.js.map +0 -1
- package/lib/drawing-response/drawable-circle.js +0 -119
- package/lib/drawing-response/drawable-circle.js.map +0 -1
- package/lib/drawing-response/drawable-eraser.js +0 -100
- package/lib/drawing-response/drawable-eraser.js.map +0 -1
- package/lib/drawing-response/drawable-free-path.js +0 -112
- package/lib/drawing-response/drawable-free-path.js.map +0 -1
- package/lib/drawing-response/drawable-helper.js +0 -46
- package/lib/drawing-response/drawable-helper.js.map +0 -1
- package/lib/drawing-response/drawable-image.js +0 -60
- package/lib/drawing-response/drawable-image.js.map +0 -1
- package/lib/drawing-response/drawable-line.js +0 -114
- package/lib/drawing-response/drawable-line.js.map +0 -1
- package/lib/drawing-response/drawable-main.js +0 -406
- package/lib/drawing-response/drawable-main.js.map +0 -1
- package/lib/drawing-response/drawable-palette.js +0 -174
- package/lib/drawing-response/drawable-palette.js.map +0 -1
- package/lib/drawing-response/drawable-rectangle.js +0 -119
- package/lib/drawing-response/drawable-rectangle.js.map +0 -1
- package/lib/drawing-response/drawable-text.js +0 -378
- package/lib/drawing-response/drawable-text.js.map +0 -1
- package/lib/drawing-response/drawable-transformer.js +0 -95
- package/lib/drawing-response/drawable-transformer.js.map +0 -1
- package/lib/drawing-response/factory.js +0 -35
- package/lib/drawing-response/factory.js.map +0 -1
- package/lib/drawing-response/icon.js +0 -71
- package/lib/drawing-response/icon.js.map +0 -1
- package/lib/drawing-response/index.js +0 -125
- package/lib/drawing-response/index.js.map +0 -1
- package/lib/index.js +0 -118
- package/lib/index.js.map +0 -1
|
@@ -1,119 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports["default"] = void 0;
|
|
9
|
-
|
|
10
|
-
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
11
|
-
|
|
12
|
-
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
13
|
-
|
|
14
|
-
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
|
|
15
|
-
|
|
16
|
-
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
17
|
-
|
|
18
|
-
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
|
|
19
|
-
|
|
20
|
-
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
|
21
|
-
|
|
22
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
23
|
-
|
|
24
|
-
var _react = _interopRequireDefault(require("react"));
|
|
25
|
-
|
|
26
|
-
var _reactKonva = require("react-konva");
|
|
27
|
-
|
|
28
|
-
var _drawableHelper = _interopRequireDefault(require("./drawable-helper"));
|
|
29
|
-
|
|
30
|
-
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
|
|
31
|
-
|
|
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; } }
|
|
33
|
-
|
|
34
|
-
var RectangleDrawable = /*#__PURE__*/function (_DrawableHelper) {
|
|
35
|
-
(0, _inherits2["default"])(RectangleDrawable, _DrawableHelper);
|
|
36
|
-
|
|
37
|
-
var _super = _createSuper(RectangleDrawable);
|
|
38
|
-
|
|
39
|
-
function RectangleDrawable(_props) {
|
|
40
|
-
var _this;
|
|
41
|
-
|
|
42
|
-
(0, _classCallCheck2["default"])(this, RectangleDrawable);
|
|
43
|
-
_this = _super.call(this, _props, RectangleDrawable.TYPE);
|
|
44
|
-
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleDragEnd", function (props, event) {
|
|
45
|
-
var deltaX = _this.startx - event.target.getX();
|
|
46
|
-
var deltaY = _this.starty - event.target.getY();
|
|
47
|
-
_this.startx = event.target.getX();
|
|
48
|
-
_this.starty = event.target.getY();
|
|
49
|
-
_this.x = _this.x - deltaX;
|
|
50
|
-
_this.y = _this.y - deltaY;
|
|
51
|
-
props.handleSessionChange();
|
|
52
|
-
});
|
|
53
|
-
var startx = _props.startx,
|
|
54
|
-
starty = _props.starty,
|
|
55
|
-
x = _props.x,
|
|
56
|
-
y = _props.y;
|
|
57
|
-
_this.startx = startx;
|
|
58
|
-
_this.starty = starty;
|
|
59
|
-
_this.x = x || startx;
|
|
60
|
-
_this.y = y || starty;
|
|
61
|
-
_this.width = x - startx || 0;
|
|
62
|
-
_this.height = y - starty || 0;
|
|
63
|
-
return _this;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
(0, _createClass2["default"])(RectangleDrawable, [{
|
|
67
|
-
key: "registerMovement",
|
|
68
|
-
value: function registerMovement(x, y) {
|
|
69
|
-
this.x = x;
|
|
70
|
-
this.y = y;
|
|
71
|
-
this.width = this.x - this.startx;
|
|
72
|
-
this.height = this.y - this.starty;
|
|
73
|
-
}
|
|
74
|
-
}, {
|
|
75
|
-
key: "handleOnClick",
|
|
76
|
-
value: function handleOnClick(props) {
|
|
77
|
-
var paint = props.paint,
|
|
78
|
-
paintColor = props.paintColor,
|
|
79
|
-
forceUpdate = props.forceUpdate;
|
|
80
|
-
|
|
81
|
-
if (paint) {
|
|
82
|
-
this.paintColor = paintColor;
|
|
83
|
-
forceUpdate();
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
}, {
|
|
87
|
-
key: "render",
|
|
88
|
-
value: function render(props) {
|
|
89
|
-
var _this2 = this;
|
|
90
|
-
|
|
91
|
-
var draggable = props.draggable,
|
|
92
|
-
key = props.key,
|
|
93
|
-
onMouseOverElement = props.onMouseOverElement,
|
|
94
|
-
onMouseOutElement = props.onMouseOutElement;
|
|
95
|
-
return /*#__PURE__*/_react["default"].createElement(_reactKonva.Rect, {
|
|
96
|
-
key: key,
|
|
97
|
-
height: this.height,
|
|
98
|
-
width: this.width,
|
|
99
|
-
fill: this.paintColor || this.fillColor,
|
|
100
|
-
onClick: function onClick() {
|
|
101
|
-
return _this2.handleOnClick(props);
|
|
102
|
-
},
|
|
103
|
-
onDragEnd: this.handleDragEnd.bind(this, props),
|
|
104
|
-
onMouseEnter: onMouseOverElement,
|
|
105
|
-
onMouseLeave: onMouseOutElement,
|
|
106
|
-
stroke: this.outlineColor,
|
|
107
|
-
draggable: draggable,
|
|
108
|
-
strokeWidth: 2,
|
|
109
|
-
x: this.startx,
|
|
110
|
-
y: this.starty
|
|
111
|
-
});
|
|
112
|
-
}
|
|
113
|
-
}]);
|
|
114
|
-
return RectangleDrawable;
|
|
115
|
-
}(_drawableHelper["default"]);
|
|
116
|
-
|
|
117
|
-
exports["default"] = RectangleDrawable;
|
|
118
|
-
(0, _defineProperty2["default"])(RectangleDrawable, "TYPE", 'RectangleDrawable');
|
|
119
|
-
//# sourceMappingURL=drawable-rectangle.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/drawing-response/drawable-rectangle.jsx"],"names":["RectangleDrawable","props","TYPE","event","deltaX","startx","target","getX","deltaY","starty","getY","x","y","handleSessionChange","width","height","paint","paintColor","forceUpdate","draggable","key","onMouseOverElement","onMouseOutElement","fillColor","handleOnClick","handleDragEnd","bind","outlineColor","DrawableHelper"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Rect } from 'react-konva';\n\nimport DrawableHelper from './drawable-helper';\n\nexport default class RectangleDrawable extends DrawableHelper {\n static TYPE = 'RectangleDrawable';\n constructor(props) {\n super(props, RectangleDrawable.TYPE);\n const { startx, starty, x, y } = props;\n this.startx = startx;\n this.starty = starty;\n this.x = x || startx;\n this.y = y || starty;\n this.width = x - startx || 0;\n this.height = y - starty || 0;\n }\n\n registerMovement(x, y) {\n this.x = x;\n this.y = y;\n this.width = this.x - this.startx;\n this.height = this.y - this.starty;\n }\n\n handleOnClick(props) {\n const { paint, paintColor, forceUpdate } = props;\n\n if (paint) {\n this.paintColor = paintColor;\n forceUpdate();\n }\n }\n\n handleDragEnd = (props, event) => {\n const deltaX = this.startx - event.target.getX();\n const deltaY = this.starty - event.target.getY();\n\n this.startx = event.target.getX();\n this.starty = event.target.getY();\n\n this.x = this.x - deltaX;\n this.y = this.y - deltaY;\n\n props.handleSessionChange();\n };\n\n render(props) {\n const { draggable, key, onMouseOverElement, onMouseOutElement } = props;\n\n return (\n <Rect\n key={key}\n height={this.height}\n width={this.width}\n fill={this.paintColor || this.fillColor}\n onClick={() => this.handleOnClick(props)}\n onDragEnd={this.handleDragEnd.bind(this, props)}\n onMouseEnter={onMouseOverElement}\n onMouseLeave={onMouseOutElement}\n stroke={this.outlineColor}\n draggable={draggable}\n strokeWidth={2}\n x={this.startx}\n y={this.starty}\n />\n );\n }\n}\n"],"file":"drawable-rectangle.js"}
|
|
@@ -1,378 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports.generateId = exports["default"] = void 0;
|
|
9
|
-
|
|
10
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
|
-
|
|
12
|
-
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
13
|
-
|
|
14
|
-
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
15
|
-
|
|
16
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
17
|
-
|
|
18
|
-
var _react = _interopRequireDefault(require("react"));
|
|
19
|
-
|
|
20
|
-
var _reactKonva = require("react-konva");
|
|
21
|
-
|
|
22
|
-
var _drawableTransformer = _interopRequireDefault(require("./drawable-transformer"));
|
|
23
|
-
|
|
24
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
25
|
-
|
|
26
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
27
|
-
|
|
28
|
-
var generateId = function generateId() {
|
|
29
|
-
return Math.random().toString(36).substring(2) + new Date().getTime().toString(36);
|
|
30
|
-
};
|
|
31
|
-
|
|
32
|
-
exports.generateId = generateId;
|
|
33
|
-
|
|
34
|
-
var TextDrawable = /*#__PURE__*/function () {
|
|
35
|
-
function TextDrawable(props) {
|
|
36
|
-
var _this = this;
|
|
37
|
-
|
|
38
|
-
(0, _classCallCheck2["default"])(this, TextDrawable);
|
|
39
|
-
(0, _defineProperty2["default"])(this, "removeEventListeners", function () {
|
|
40
|
-
return _this.eventListenersDetachArray.forEach(function (fn) {
|
|
41
|
-
return fn();
|
|
42
|
-
});
|
|
43
|
-
});
|
|
44
|
-
(0, _defineProperty2["default"])(this, "setAll", function (all) {
|
|
45
|
-
_this.all = all;
|
|
46
|
-
|
|
47
|
-
_this.props.forceUpdate();
|
|
48
|
-
});
|
|
49
|
-
(0, _defineProperty2["default"])(this, "addNewTextEntry", function () {
|
|
50
|
-
var all = _this.all;
|
|
51
|
-
var id = generateId();
|
|
52
|
-
all.push({
|
|
53
|
-
id: id,
|
|
54
|
-
isDefault: true,
|
|
55
|
-
label: 'Double click to edit this text. Press Enter to submit.',
|
|
56
|
-
width: 200,
|
|
57
|
-
x: (all.length + 1) * 5 + 50,
|
|
58
|
-
y: (all.length + 1) * 5 + 50,
|
|
59
|
-
textVisible: true,
|
|
60
|
-
transformerVisible: true,
|
|
61
|
-
textareaVisible: false,
|
|
62
|
-
createdAt: new Date(),
|
|
63
|
-
type: 'text-entry'
|
|
64
|
-
});
|
|
65
|
-
|
|
66
|
-
_this.props.handleSessionChange();
|
|
67
|
-
});
|
|
68
|
-
(0, _defineProperty2["default"])(this, "handleMouseDown", function () {
|
|
69
|
-
return _this.props.toggleTextSelected(true);
|
|
70
|
-
});
|
|
71
|
-
(0, _defineProperty2["default"])(this, "handleMouseUp", function () {
|
|
72
|
-
return _this.props.toggleTextSelected(false);
|
|
73
|
-
});
|
|
74
|
-
(0, _defineProperty2["default"])(this, "handleClick", function (e, id) {
|
|
75
|
-
var current = _this.all.filter(function (item) {
|
|
76
|
-
return item.id === id;
|
|
77
|
-
})[0];
|
|
78
|
-
|
|
79
|
-
current.transformerVisible = true;
|
|
80
|
-
|
|
81
|
-
_this.props.forceUpdate();
|
|
82
|
-
});
|
|
83
|
-
(0, _defineProperty2["default"])(this, "handleDblClick", function (e, text) {
|
|
84
|
-
var id = text.id,
|
|
85
|
-
isDefault = text.isDefault;
|
|
86
|
-
|
|
87
|
-
_this.toggleTextarea(id, true);
|
|
88
|
-
|
|
89
|
-
var textNode = _this[TextDrawable.getTextNode(id)];
|
|
90
|
-
|
|
91
|
-
var textareaNode = _this[TextDrawable.getTextareaNode(id)];
|
|
92
|
-
|
|
93
|
-
var areaPosition = textNode._lastPos;
|
|
94
|
-
textareaNode.value = isDefault ? '' : textNode.text();
|
|
95
|
-
textareaNode.style.position = 'absolute';
|
|
96
|
-
textareaNode.style.top = areaPosition.y + 'px';
|
|
97
|
-
textareaNode.style.left = areaPosition.x + 'px';
|
|
98
|
-
textareaNode.style.width = textNode.width() - textNode.padding() * 2 + 'px';
|
|
99
|
-
textareaNode.style.height = textNode.height() - textNode.padding() * 2 + 5 + 'px';
|
|
100
|
-
textareaNode.style.fontSize = textNode.fontSize() + 'px';
|
|
101
|
-
textareaNode.style.border = 'none';
|
|
102
|
-
textareaNode.style.padding = '0px';
|
|
103
|
-
textareaNode.style.margin = '0px';
|
|
104
|
-
textareaNode.style.overflow = 'hidden';
|
|
105
|
-
textareaNode.style.background = 'none';
|
|
106
|
-
textareaNode.style.outline = 'none';
|
|
107
|
-
textareaNode.style.resize = 'none';
|
|
108
|
-
textareaNode.style.lineHeight = textNode.lineHeight();
|
|
109
|
-
textareaNode.style.fontFamily = textNode.fontFamily();
|
|
110
|
-
textareaNode.style.transformOrigin = 'left top';
|
|
111
|
-
textareaNode.style.textAlign = textNode.align();
|
|
112
|
-
textareaNode.style.color = textNode.fill();
|
|
113
|
-
var rotation = textNode.rotation();
|
|
114
|
-
var transform = '';
|
|
115
|
-
|
|
116
|
-
if (rotation) {
|
|
117
|
-
transform += 'rotateZ(' + rotation + 'deg)';
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
var px = 0;
|
|
121
|
-
var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
|
|
122
|
-
|
|
123
|
-
if (isFirefox) {
|
|
124
|
-
px += 2 + Math.round(textNode.fontSize() / 20);
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
transform += 'translateY(-' + px + 'px)';
|
|
128
|
-
textareaNode.style.transform = transform;
|
|
129
|
-
textareaNode.style.height = 'auto';
|
|
130
|
-
textareaNode.style.height = textareaNode.scrollHeight + 3 + 'px';
|
|
131
|
-
textareaNode.focus();
|
|
132
|
-
|
|
133
|
-
var keyDownHandler = function keyDownHandler(e) {
|
|
134
|
-
// hide on enter but don't hide on shift + enter
|
|
135
|
-
if (e.keyCode === 13 && !e.shiftKey) {
|
|
136
|
-
_this.toggleTextarea(id, false);
|
|
137
|
-
|
|
138
|
-
_this.saveValue(id, textNode, textareaNode);
|
|
139
|
-
} // on esc do not set value back to node
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
if (e.keyCode === 27) {
|
|
143
|
-
_this.toggleTextarea(id, false);
|
|
144
|
-
}
|
|
145
|
-
};
|
|
146
|
-
|
|
147
|
-
textareaNode.addEventListener('keydown', keyDownHandler);
|
|
148
|
-
|
|
149
|
-
_this.eventListenersDetachArray.push(function () {
|
|
150
|
-
return textareaNode.removeEventListener('keydown', keyDownHandler);
|
|
151
|
-
});
|
|
152
|
-
|
|
153
|
-
var blurHandler = function blurHandler() {
|
|
154
|
-
_this.showOnlyTextNodes();
|
|
155
|
-
|
|
156
|
-
_this.saveValue(id, textNode, textareaNode);
|
|
157
|
-
};
|
|
158
|
-
|
|
159
|
-
textareaNode.addEventListener('blur', blurHandler);
|
|
160
|
-
|
|
161
|
-
_this.eventListenersDetachArray.push(function () {
|
|
162
|
-
return textareaNode.removeEventListener('blur', blurHandler);
|
|
163
|
-
});
|
|
164
|
-
|
|
165
|
-
_this.initializeDefault(id, isDefault);
|
|
166
|
-
|
|
167
|
-
_this.props.forceUpdate();
|
|
168
|
-
});
|
|
169
|
-
(0, _defineProperty2["default"])(this, "handleTransform", function (e, textNode) {
|
|
170
|
-
_this[textNode].setAttrs({
|
|
171
|
-
width: _this[textNode].width() * _this[textNode].scaleX(),
|
|
172
|
-
scaleX: _this.props.scale
|
|
173
|
-
});
|
|
174
|
-
});
|
|
175
|
-
this.all = props && props.all || [];
|
|
176
|
-
this.eventListenersDetachArray = [];
|
|
177
|
-
}
|
|
178
|
-
|
|
179
|
-
(0, _createClass2["default"])(TextDrawable, [{
|
|
180
|
-
key: "showOnlyTextNodes",
|
|
181
|
-
value: function showOnlyTextNodes() {
|
|
182
|
-
this.all.map(function (item) {
|
|
183
|
-
item.textVisible = true;
|
|
184
|
-
item.transformerVisible = false;
|
|
185
|
-
item.textareaVisible = false;
|
|
186
|
-
});
|
|
187
|
-
}
|
|
188
|
-
}, {
|
|
189
|
-
key: "toggleTextarea",
|
|
190
|
-
value: function toggleTextarea(id, value) {
|
|
191
|
-
this.all = this.all.map(function (item) {
|
|
192
|
-
if (item.id === id) {
|
|
193
|
-
return _objectSpread(_objectSpread({}, item), {}, {
|
|
194
|
-
textVisible: !value,
|
|
195
|
-
transformerVisible: !value,
|
|
196
|
-
textareaVisible: value
|
|
197
|
-
});
|
|
198
|
-
}
|
|
199
|
-
|
|
200
|
-
return item;
|
|
201
|
-
});
|
|
202
|
-
this.props.forceUpdate();
|
|
203
|
-
}
|
|
204
|
-
}, {
|
|
205
|
-
key: "initializeDefault",
|
|
206
|
-
value: function initializeDefault(id, isDefault) {
|
|
207
|
-
if (isDefault) {
|
|
208
|
-
var current = this.all.filter(function (item) {
|
|
209
|
-
return item.id === id;
|
|
210
|
-
})[0];
|
|
211
|
-
current.isDefault = false;
|
|
212
|
-
}
|
|
213
|
-
}
|
|
214
|
-
}, {
|
|
215
|
-
key: "saveValue",
|
|
216
|
-
value: function saveValue(id, textNode, textareaNode) {
|
|
217
|
-
if (textareaNode.value) {
|
|
218
|
-
textNode.text(textareaNode.value);
|
|
219
|
-
} else {
|
|
220
|
-
this.all = this.all.filter(function (text) {
|
|
221
|
-
return text.id !== id;
|
|
222
|
-
});
|
|
223
|
-
this.props.forceUpdate();
|
|
224
|
-
}
|
|
225
|
-
|
|
226
|
-
this.props.handleSessionChange();
|
|
227
|
-
}
|
|
228
|
-
}, {
|
|
229
|
-
key: "renderTextareas",
|
|
230
|
-
value: function renderTextareas() {
|
|
231
|
-
var _this2 = this;
|
|
232
|
-
|
|
233
|
-
return this.all.map(function (text) {
|
|
234
|
-
var id = text.id,
|
|
235
|
-
textareaVisible = text.textareaVisible;
|
|
236
|
-
var textareaNode = "textarea_".concat(id);
|
|
237
|
-
return /*#__PURE__*/_react["default"].createElement("textarea", {
|
|
238
|
-
key: textareaNode,
|
|
239
|
-
ref: function ref(textarea) {
|
|
240
|
-
_this2[textareaNode] = textarea;
|
|
241
|
-
},
|
|
242
|
-
style: {
|
|
243
|
-
display: "".concat(textareaVisible ? 'block' : 'none')
|
|
244
|
-
}
|
|
245
|
-
});
|
|
246
|
-
});
|
|
247
|
-
}
|
|
248
|
-
}, {
|
|
249
|
-
key: "setInitialProps",
|
|
250
|
-
value: function setInitialProps(props) {
|
|
251
|
-
if (!this.props) {
|
|
252
|
-
this.props = props;
|
|
253
|
-
}
|
|
254
|
-
}
|
|
255
|
-
}, {
|
|
256
|
-
key: "render",
|
|
257
|
-
value: function render(props) {
|
|
258
|
-
var _this3 = this;
|
|
259
|
-
|
|
260
|
-
this.setInitialProps(props);
|
|
261
|
-
|
|
262
|
-
if (props.stage) {
|
|
263
|
-
var newStage = props.stage; // setting the handler only once
|
|
264
|
-
|
|
265
|
-
if (newStage !== this.stage) {
|
|
266
|
-
var stageClickHandler = function stageClickHandler(e) {
|
|
267
|
-
if (e.target !== _this3.stage) {
|
|
268
|
-
return;
|
|
269
|
-
}
|
|
270
|
-
|
|
271
|
-
_this3.showOnlyTextNodes();
|
|
272
|
-
|
|
273
|
-
_this3.props.forceUpdate();
|
|
274
|
-
};
|
|
275
|
-
|
|
276
|
-
newStage.on('click', stageClickHandler);
|
|
277
|
-
this.eventListenersDetachArray.push(function () {
|
|
278
|
-
return newStage.off('click', stageClickHandler);
|
|
279
|
-
});
|
|
280
|
-
}
|
|
281
|
-
|
|
282
|
-
this.stage = newStage;
|
|
283
|
-
}
|
|
284
|
-
|
|
285
|
-
return this.all.map(function (text) {
|
|
286
|
-
var id = text.id,
|
|
287
|
-
label = text.label,
|
|
288
|
-
x = text.x,
|
|
289
|
-
y = text.y,
|
|
290
|
-
width = text.width,
|
|
291
|
-
textVisible = text.textVisible,
|
|
292
|
-
rotation = text.rotation,
|
|
293
|
-
transformerVisible = text.transformerVisible;
|
|
294
|
-
var textNode = "text_".concat(id);
|
|
295
|
-
var transformerNode = "transformer_".concat(id);
|
|
296
|
-
var extraProps = {};
|
|
297
|
-
|
|
298
|
-
if (!props.disabled) {
|
|
299
|
-
extraProps = {
|
|
300
|
-
onClick: function onClick(e) {
|
|
301
|
-
return _this3.handleClick(e, id);
|
|
302
|
-
},
|
|
303
|
-
onTap: function onTap(e) {
|
|
304
|
-
return _this3.handleClick(e, id);
|
|
305
|
-
},
|
|
306
|
-
onDblClick: function onDblClick(e) {
|
|
307
|
-
return _this3.handleDblClick(e, text);
|
|
308
|
-
},
|
|
309
|
-
onDblTap: function onDblTap(e) {
|
|
310
|
-
return _this3.handleDblClick(e, text);
|
|
311
|
-
},
|
|
312
|
-
onTransform: function onTransform(e) {
|
|
313
|
-
return _this3.handleTransform(e, textNode);
|
|
314
|
-
},
|
|
315
|
-
onTransformEnd: _this3.props.handleSessionChange,
|
|
316
|
-
onMouseDown: _this3.handleMouseDown,
|
|
317
|
-
onTouchStart: _this3.handleMouseDown,
|
|
318
|
-
onMouseUp: _this3.handleMouseUp,
|
|
319
|
-
onTouchEnd: _this3.handleMouseUp,
|
|
320
|
-
onDragEnd: _this3.props.handleSessionChange,
|
|
321
|
-
onMouseEnter: _this3.props.onMouseOverElement,
|
|
322
|
-
onMouseLeave: _this3.props.onMouseOutElement
|
|
323
|
-
};
|
|
324
|
-
}
|
|
325
|
-
|
|
326
|
-
if (rotation) {
|
|
327
|
-
extraProps.rotation = rotation;
|
|
328
|
-
}
|
|
329
|
-
|
|
330
|
-
return [/*#__PURE__*/_react["default"].createElement(_reactKonva.Text, (0, _extends2["default"])({
|
|
331
|
-
key: id,
|
|
332
|
-
bubbles: true,
|
|
333
|
-
id: id,
|
|
334
|
-
ref: function ref(text) {
|
|
335
|
-
_this3[textNode] = text;
|
|
336
|
-
},
|
|
337
|
-
text: text.text || label,
|
|
338
|
-
name: textNode,
|
|
339
|
-
x: x,
|
|
340
|
-
y: y,
|
|
341
|
-
width: width,
|
|
342
|
-
draggable: !props.disabled,
|
|
343
|
-
visible: textVisible,
|
|
344
|
-
fontSize: 16
|
|
345
|
-
}, extraProps)), transformerVisible && /*#__PURE__*/_react["default"].createElement(_drawableTransformer["default"], {
|
|
346
|
-
key: "transformer_".concat(id),
|
|
347
|
-
ref: function ref(text) {
|
|
348
|
-
_this3[transformerNode] = text;
|
|
349
|
-
},
|
|
350
|
-
selectedShapeName: textNode,
|
|
351
|
-
onMouseDown: _this3.handleMouseDown,
|
|
352
|
-
onTouchStart: _this3.handleMouseDown,
|
|
353
|
-
onMouseUp: _this3.handleMouseUp,
|
|
354
|
-
onTouchEnd: _this3.handleMouseUp
|
|
355
|
-
})];
|
|
356
|
-
});
|
|
357
|
-
}
|
|
358
|
-
}], [{
|
|
359
|
-
key: "getTextareaNode",
|
|
360
|
-
value: function getTextareaNode(id) {
|
|
361
|
-
return "textarea_".concat(id);
|
|
362
|
-
}
|
|
363
|
-
}, {
|
|
364
|
-
key: "getTextNode",
|
|
365
|
-
value: function getTextNode(id) {
|
|
366
|
-
return "text_".concat(id);
|
|
367
|
-
}
|
|
368
|
-
}, {
|
|
369
|
-
key: "getTransformerNode",
|
|
370
|
-
value: function getTransformerNode(id) {
|
|
371
|
-
return "transformer_".concat(id);
|
|
372
|
-
}
|
|
373
|
-
}]);
|
|
374
|
-
return TextDrawable;
|
|
375
|
-
}();
|
|
376
|
-
|
|
377
|
-
exports["default"] = TextDrawable;
|
|
378
|
-
//# sourceMappingURL=drawable-text.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/drawing-response/drawable-text.jsx"],"names":["generateId","Math","random","toString","substring","Date","getTime","TextDrawable","props","eventListenersDetachArray","forEach","fn","all","forceUpdate","id","push","isDefault","label","width","x","length","y","textVisible","transformerVisible","textareaVisible","createdAt","type","handleSessionChange","toggleTextSelected","e","current","filter","item","text","toggleTextarea","textNode","getTextNode","textareaNode","getTextareaNode","areaPosition","_lastPos","value","style","position","top","left","padding","height","fontSize","border","margin","overflow","background","outline","resize","lineHeight","fontFamily","transformOrigin","textAlign","align","color","fill","rotation","transform","px","isFirefox","navigator","userAgent","toLowerCase","indexOf","round","scrollHeight","focus","keyDownHandler","keyCode","shiftKey","saveValue","addEventListener","removeEventListener","blurHandler","showOnlyTextNodes","initializeDefault","setAttrs","scaleX","scale","map","textarea","display","setInitialProps","stage","newStage","stageClickHandler","target","on","off","transformerNode","extraProps","disabled","onClick","handleClick","onTap","onDblClick","handleDblClick","onDblTap","onTransform","handleTransform","onTransformEnd","onMouseDown","handleMouseDown","onTouchStart","onMouseUp","handleMouseUp","onTouchEnd","onDragEnd","onMouseEnter","onMouseOverElement","onMouseLeave","onMouseOutElement"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Text } from 'react-konva';\n\nimport Transformer from './drawable-transformer';\n\nexport const generateId = () => Math.random().toString(36).substring(2) + new Date().getTime().toString(36);\n\nexport default class TextDrawable {\n static getTextareaNode(id) {\n return `textarea_${id}`;\n }\n\n static getTextNode(id) {\n return `text_${id}`;\n }\n\n static getTransformerNode(id) {\n return `transformer_${id}`;\n }\n\n constructor(props) {\n this.all = (props && props.all) || [];\n this.eventListenersDetachArray = [];\n }\n\n removeEventListeners = () => this.eventListenersDetachArray.forEach((fn) => fn());\n\n setAll = (all) => {\n this.all = all;\n this.props.forceUpdate();\n };\n\n addNewTextEntry = () => {\n const all = this.all;\n const id = generateId();\n\n all.push({\n id: id,\n isDefault: true,\n label: 'Double click to edit this text. Press Enter to submit.',\n width: 200,\n x: (all.length + 1) * 5 + 50,\n y: (all.length + 1) * 5 + 50,\n textVisible: true,\n transformerVisible: true,\n textareaVisible: false,\n createdAt: new Date(),\n type: 'text-entry',\n });\n\n this.props.handleSessionChange();\n };\n\n showOnlyTextNodes() {\n this.all.map((item) => {\n item.textVisible = true;\n item.transformerVisible = false;\n item.textareaVisible = false;\n });\n }\n\n toggleTextarea(id, value) {\n this.all = this.all.map((item) => {\n if (item.id === id) {\n return {\n ...item,\n textVisible: !value,\n transformerVisible: !value,\n textareaVisible: value,\n };\n }\n return item;\n });\n this.props.forceUpdate();\n }\n\n initializeDefault(id, isDefault) {\n if (isDefault) {\n const current = this.all.filter((item) => item.id === id)[0];\n current.isDefault = false;\n }\n }\n\n saveValue(id, textNode, textareaNode) {\n if (textareaNode.value) {\n textNode.text(textareaNode.value);\n } else {\n this.all = this.all.filter((text) => text.id !== id);\n this.props.forceUpdate();\n }\n\n this.props.handleSessionChange();\n }\n\n handleMouseDown = () => this.props.toggleTextSelected(true);\n handleMouseUp = () => this.props.toggleTextSelected(false);\n\n handleClick = (e, id) => {\n const current = this.all.filter((item) => item.id === id)[0];\n current.transformerVisible = true;\n this.props.forceUpdate();\n };\n\n handleDblClick = (e, text) => {\n const { id, isDefault } = text;\n this.toggleTextarea(id, true);\n\n const textNode = this[TextDrawable.getTextNode(id)];\n const textareaNode = this[TextDrawable.getTextareaNode(id)];\n\n const areaPosition = textNode._lastPos;\n\n textareaNode.value = isDefault ? '' : textNode.text();\n textareaNode.style.position = 'absolute';\n textareaNode.style.top = areaPosition.y + 'px';\n textareaNode.style.left = areaPosition.x + 'px';\n textareaNode.style.width = textNode.width() - textNode.padding() * 2 + 'px';\n textareaNode.style.height = textNode.height() - textNode.padding() * 2 + 5 + 'px';\n textareaNode.style.fontSize = textNode.fontSize() + 'px';\n textareaNode.style.border = 'none';\n textareaNode.style.padding = '0px';\n textareaNode.style.margin = '0px';\n textareaNode.style.overflow = 'hidden';\n textareaNode.style.background = 'none';\n textareaNode.style.outline = 'none';\n textareaNode.style.resize = 'none';\n textareaNode.style.lineHeight = textNode.lineHeight();\n textareaNode.style.fontFamily = textNode.fontFamily();\n textareaNode.style.transformOrigin = 'left top';\n textareaNode.style.textAlign = textNode.align();\n textareaNode.style.color = textNode.fill();\n\n let rotation = textNode.rotation();\n let transform = '';\n if (rotation) {\n transform += 'rotateZ(' + rotation + 'deg)';\n }\n\n let px = 0;\n const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;\n\n if (isFirefox) {\n px += 2 + Math.round(textNode.fontSize() / 20);\n }\n\n transform += 'translateY(-' + px + 'px)';\n\n textareaNode.style.transform = transform;\n textareaNode.style.height = 'auto';\n textareaNode.style.height = textareaNode.scrollHeight + 3 + 'px';\n\n textareaNode.focus();\n\n const keyDownHandler = (e) => {\n // hide on enter but don't hide on shift + enter\n if (e.keyCode === 13 && !e.shiftKey) {\n this.toggleTextarea(id, false);\n this.saveValue(id, textNode, textareaNode);\n }\n\n // on esc do not set value back to node\n if (e.keyCode === 27) {\n this.toggleTextarea(id, false);\n }\n };\n\n textareaNode.addEventListener('keydown', keyDownHandler);\n\n this.eventListenersDetachArray.push(() => textareaNode.removeEventListener('keydown', keyDownHandler));\n\n const blurHandler = () => {\n this.showOnlyTextNodes();\n this.saveValue(id, textNode, textareaNode);\n };\n\n textareaNode.addEventListener('blur', blurHandler);\n\n this.eventListenersDetachArray.push(() => textareaNode.removeEventListener('blur', blurHandler));\n\n this.initializeDefault(id, isDefault);\n this.props.forceUpdate();\n };\n\n handleTransform = (e, textNode) => {\n this[textNode].setAttrs({\n width: this[textNode].width() * this[textNode].scaleX(),\n scaleX: this.props.scale,\n });\n };\n\n renderTextareas() {\n return this.all.map((text) => {\n const { id, textareaVisible } = text;\n const textareaNode = `textarea_${id}`;\n\n return (\n <textarea\n key={textareaNode}\n ref={(textarea) => {\n this[textareaNode] = textarea;\n }}\n style={{ display: `${textareaVisible ? 'block' : 'none'}` }}\n />\n );\n });\n }\n\n setInitialProps(props) {\n if (!this.props) {\n this.props = props;\n }\n }\n\n render(props) {\n this.setInitialProps(props);\n\n if (props.stage) {\n const newStage = props.stage;\n\n // setting the handler only once\n if (newStage !== this.stage) {\n const stageClickHandler = (e) => {\n if (e.target !== this.stage) {\n return;\n }\n\n this.showOnlyTextNodes();\n this.props.forceUpdate();\n };\n\n newStage.on('click', stageClickHandler);\n\n this.eventListenersDetachArray.push(() => newStage.off('click', stageClickHandler));\n }\n\n this.stage = newStage;\n }\n\n return this.all.map((text) => {\n const { id, label, x, y, width, textVisible, rotation, transformerVisible } = text;\n\n const textNode = `text_${id}`;\n const transformerNode = `transformer_${id}`;\n let extraProps = {};\n\n if (!props.disabled) {\n extraProps = {\n onClick: (e) => this.handleClick(e, id),\n onTap: (e) => this.handleClick(e, id),\n onDblClick: (e) => this.handleDblClick(e, text),\n onDblTap: (e) => this.handleDblClick(e, text),\n onTransform: (e) => this.handleTransform(e, textNode),\n onTransformEnd: this.props.handleSessionChange,\n onMouseDown: this.handleMouseDown,\n onTouchStart: this.handleMouseDown,\n onMouseUp: this.handleMouseUp,\n onTouchEnd: this.handleMouseUp,\n onDragEnd: this.props.handleSessionChange,\n onMouseEnter: this.props.onMouseOverElement,\n onMouseLeave: this.props.onMouseOutElement,\n };\n }\n\n if (rotation) {\n extraProps.rotation = rotation;\n }\n\n return [\n <Text\n key={id}\n bubbles={true}\n id={id}\n ref={(text) => {\n this[textNode] = text;\n }}\n text={text.text || label}\n name={textNode}\n x={x}\n y={y}\n width={width}\n draggable={!props.disabled}\n visible={textVisible}\n fontSize={16}\n {...extraProps}\n />,\n transformerVisible && (\n <Transformer\n key={`transformer_${id}`}\n ref={(text) => {\n this[transformerNode] = text;\n }}\n selectedShapeName={textNode}\n onMouseDown={this.handleMouseDown}\n onTouchStart={this.handleMouseDown}\n onMouseUp={this.handleMouseUp}\n onTouchEnd={this.handleMouseUp}\n />\n ),\n ];\n });\n }\n}\n"],"file":"drawable-text.js"}
|
|
@@ -1,95 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports["default"] = void 0;
|
|
9
|
-
|
|
10
|
-
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
|
-
|
|
12
|
-
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
13
|
-
|
|
14
|
-
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
15
|
-
|
|
16
|
-
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
17
|
-
|
|
18
|
-
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
|
|
19
|
-
|
|
20
|
-
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
|
21
|
-
|
|
22
|
-
var _react = _interopRequireDefault(require("react"));
|
|
23
|
-
|
|
24
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
25
|
-
|
|
26
|
-
var _reactKonva = require("react-konva");
|
|
27
|
-
|
|
28
|
-
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
|
|
29
|
-
|
|
30
|
-
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
|
-
var TransformerComponent = /*#__PURE__*/function (_React$Component) {
|
|
33
|
-
(0, _inherits2["default"])(TransformerComponent, _React$Component);
|
|
34
|
-
|
|
35
|
-
var _super = _createSuper(TransformerComponent);
|
|
36
|
-
|
|
37
|
-
function TransformerComponent() {
|
|
38
|
-
(0, _classCallCheck2["default"])(this, TransformerComponent);
|
|
39
|
-
return _super.apply(this, arguments);
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
(0, _createClass2["default"])(TransformerComponent, [{
|
|
43
|
-
key: "componentDidMount",
|
|
44
|
-
value: function componentDidMount() {
|
|
45
|
-
this.checkNode();
|
|
46
|
-
}
|
|
47
|
-
}, {
|
|
48
|
-
key: "componentDidUpdate",
|
|
49
|
-
value: function componentDidUpdate() {
|
|
50
|
-
this.checkNode();
|
|
51
|
-
}
|
|
52
|
-
}, {
|
|
53
|
-
key: "checkNode",
|
|
54
|
-
value: function checkNode() {
|
|
55
|
-
// here we need to manually attach or detach Transformer node
|
|
56
|
-
var stage = this.transformer.getStage();
|
|
57
|
-
var selectedShapeName = this.props.selectedShapeName;
|
|
58
|
-
var selectedNode = stage.findOne(".".concat(selectedShapeName)); // do nothing if selected node is already attached
|
|
59
|
-
|
|
60
|
-
if (selectedNode === this.transformer.node()) {
|
|
61
|
-
return;
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
if (selectedNode) {
|
|
65
|
-
// attach to another node
|
|
66
|
-
this.transformer.attachTo(selectedNode);
|
|
67
|
-
} else {
|
|
68
|
-
// remove transformer
|
|
69
|
-
this.transformer.detach();
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
this.transformer.getLayer().batchDraw();
|
|
73
|
-
}
|
|
74
|
-
}, {
|
|
75
|
-
key: "render",
|
|
76
|
-
value: function render() {
|
|
77
|
-
var _this = this;
|
|
78
|
-
|
|
79
|
-
return /*#__PURE__*/_react["default"].createElement(_reactKonva.Transformer, (0, _extends2["default"])({
|
|
80
|
-
ref: function ref(node) {
|
|
81
|
-
_this.transformer = node;
|
|
82
|
-
},
|
|
83
|
-
enabledAnchors: ['middle-left', 'middle-right']
|
|
84
|
-
}, this.props));
|
|
85
|
-
}
|
|
86
|
-
}]);
|
|
87
|
-
return TransformerComponent;
|
|
88
|
-
}(_react["default"].Component);
|
|
89
|
-
|
|
90
|
-
TransformerComponent.propTypes = {
|
|
91
|
-
selectedShapeName: _propTypes["default"].string.isRequired
|
|
92
|
-
};
|
|
93
|
-
var _default = TransformerComponent;
|
|
94
|
-
exports["default"] = _default;
|
|
95
|
-
//# sourceMappingURL=drawable-transformer.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/drawing-response/drawable-transformer.jsx"],"names":["TransformerComponent","checkNode","stage","transformer","getStage","selectedShapeName","props","selectedNode","findOne","node","attachTo","detach","getLayer","batchDraw","React","Component","propTypes","PropTypes","string","isRequired"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;IAEMA,oB;;;;;;;;;;;;WACJ,6BAAoB;AAClB,WAAKC,SAAL;AACD;;;WAED,8BAAqB;AACnB,WAAKA,SAAL;AACD;;;WAED,qBAAY;AACV;AACA,UAAMC,KAAK,GAAG,KAAKC,WAAL,CAAiBC,QAAjB,EAAd;AACA,UAAQC,iBAAR,GAA8B,KAAKC,KAAnC,CAAQD,iBAAR;AAEA,UAAME,YAAY,GAAGL,KAAK,CAACM,OAAN,YAAkBH,iBAAlB,EAArB,CALU,CAMV;;AACA,UAAIE,YAAY,KAAK,KAAKJ,WAAL,CAAiBM,IAAjB,EAArB,EAA8C;AAC5C;AACD;;AAED,UAAIF,YAAJ,EAAkB;AAChB;AACA,aAAKJ,WAAL,CAAiBO,QAAjB,CAA0BH,YAA1B;AACD,OAHD,MAGO;AACL;AACA,aAAKJ,WAAL,CAAiBQ,MAAjB;AACD;;AACD,WAAKR,WAAL,CAAiBS,QAAjB,GAA4BC,SAA5B;AACD;;;WAED,kBAAS;AAAA;;AACP,0BACE,gCAAC,uBAAD;AACE,QAAA,GAAG,EAAE,aAACJ,IAAD,EAAU;AACb,UAAA,KAAI,CAACN,WAAL,GAAmBM,IAAnB;AACD,SAHH;AAIE,QAAA,cAAc,EAAE,CAAC,aAAD,EAAgB,cAAhB;AAJlB,SAKM,KAAKH,KALX,EADF;AASD;;;EAxCgCQ,kBAAMC,S;;AA2CzCf,oBAAoB,CAACgB,SAArB,GAAiC;AAC/BX,EAAAA,iBAAiB,EAAEY,sBAAUC,MAAV,CAAiBC;AADL,CAAjC;eAIenB,oB","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Transformer } from 'react-konva';\n\nclass TransformerComponent extends React.Component {\n componentDidMount() {\n this.checkNode();\n }\n\n componentDidUpdate() {\n this.checkNode();\n }\n\n checkNode() {\n // here we need to manually attach or detach Transformer node\n const stage = this.transformer.getStage();\n const { selectedShapeName } = this.props;\n\n const selectedNode = stage.findOne(`.${selectedShapeName}`);\n // do nothing if selected node is already attached\n if (selectedNode === this.transformer.node()) {\n return;\n }\n\n if (selectedNode) {\n // attach to another node\n this.transformer.attachTo(selectedNode);\n } else {\n // remove transformer\n this.transformer.detach();\n }\n this.transformer.getLayer().batchDraw();\n }\n\n render() {\n return (\n <Transformer\n ref={(node) => {\n this.transformer = node;\n }}\n enabledAnchors={['middle-left', 'middle-right']}\n {...this.props}\n />\n );\n }\n}\n\nTransformerComponent.propTypes = {\n selectedShapeName: PropTypes.string.isRequired,\n};\n\nexport default TransformerComponent;\n"],"file":"drawable-transformer.js"}
|