react-design-editor 0.0.50 → 0.0.52

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.
Files changed (100) hide show
  1. package/dist/react-design-editor.js +7739 -7114
  2. package/dist/react-design-editor.min.js +1 -1
  3. package/dist/react-design-editor.min.js.LICENSE.txt +2 -0
  4. package/lib/Canvas.d.ts +18 -18
  5. package/lib/Canvas.js +172 -172
  6. package/lib/CanvasObject.d.ts +10 -10
  7. package/lib/CanvasObject.js +96 -96
  8. package/lib/constants/code.d.ts +19 -19
  9. package/lib/constants/code.js +22 -22
  10. package/lib/constants/defaults.d.ts +38 -38
  11. package/lib/constants/defaults.js +69 -69
  12. package/lib/constants/index.d.ts +3 -3
  13. package/lib/constants/index.js +26 -26
  14. package/lib/handlers/AlignmentHandler.d.ts +18 -18
  15. package/lib/handlers/AlignmentHandler.js +58 -58
  16. package/lib/handlers/AnimationHandler.d.ts +50 -50
  17. package/lib/handlers/AnimationHandler.js +346 -346
  18. package/lib/handlers/ChartHandler.d.ts +8 -8
  19. package/lib/handlers/ChartHandler.js +8 -8
  20. package/lib/handlers/ContextmenuHandler.d.ts +28 -28
  21. package/lib/handlers/ContextmenuHandler.js +65 -65
  22. package/lib/handlers/CropHandler.d.ts +43 -43
  23. package/lib/handlers/CropHandler.js +261 -261
  24. package/lib/handlers/CustomHandler.d.ts +7 -7
  25. package/lib/handlers/CustomHandler.js +10 -10
  26. package/lib/handlers/DrawingHandler.d.ts +28 -28
  27. package/lib/handlers/DrawingHandler.js +318 -318
  28. package/lib/handlers/ElementHandler.d.ts +80 -80
  29. package/lib/handlers/ElementHandler.js +154 -154
  30. package/lib/handlers/EventHandler.d.ts +170 -170
  31. package/lib/handlers/EventHandler.js +880 -880
  32. package/lib/handlers/FiberHandler.d.ts +6 -6
  33. package/lib/handlers/FiberHandler.js +23 -23
  34. package/lib/handlers/GridHandler.d.ts +19 -19
  35. package/lib/handlers/GridHandler.js +77 -77
  36. package/lib/handlers/GuidelineHandler.d.ts +61 -61
  37. package/lib/handlers/GuidelineHandler.js +315 -315
  38. package/lib/handlers/Handler.d.ts +618 -618
  39. package/lib/handlers/Handler.js +1645 -1645
  40. package/lib/handlers/ImageHandler.d.ts +307 -307
  41. package/lib/handlers/ImageHandler.js +528 -528
  42. package/lib/handlers/InteractionHandler.d.ts +45 -45
  43. package/lib/handlers/InteractionHandler.js +168 -164
  44. package/lib/handlers/LinkHandler.d.ts +115 -115
  45. package/lib/handlers/LinkHandler.js +247 -247
  46. package/lib/handlers/NodeHandler.d.ts +50 -50
  47. package/lib/handlers/NodeHandler.js +274 -274
  48. package/lib/handlers/PortHandler.d.ts +22 -22
  49. package/lib/handlers/PortHandler.js +179 -179
  50. package/lib/handlers/ShortcutHandler.d.ts +119 -119
  51. package/lib/handlers/ShortcutHandler.js +151 -151
  52. package/lib/handlers/TooltipHandler.d.ts +33 -33
  53. package/lib/handlers/TooltipHandler.js +91 -91
  54. package/lib/handlers/TransactionHandler.d.ts +59 -59
  55. package/lib/handlers/TransactionHandler.js +137 -137
  56. package/lib/handlers/WorkareaHandler.d.ts +43 -43
  57. package/lib/handlers/WorkareaHandler.js +354 -354
  58. package/lib/handlers/ZoomHandler.d.ts +48 -48
  59. package/lib/handlers/ZoomHandler.js +143 -143
  60. package/lib/handlers/index.d.ts +23 -23
  61. package/lib/handlers/index.js +48 -48
  62. package/lib/index.d.ts +6 -6
  63. package/lib/index.js +20 -20
  64. package/lib/objects/Arrow.d.ts +2 -2
  65. package/lib/objects/Arrow.js +40 -40
  66. package/lib/objects/Chart.d.ts +10 -10
  67. package/lib/objects/Chart.js +117 -117
  68. package/lib/objects/CirclePort.d.ts +2 -2
  69. package/lib/objects/CirclePort.js +28 -28
  70. package/lib/objects/Cube.d.ts +5 -5
  71. package/lib/objects/Cube.js +71 -71
  72. package/lib/objects/CurvedLink.d.ts +2 -2
  73. package/lib/objects/CurvedLink.js +51 -51
  74. package/lib/objects/Element.d.ts +13 -13
  75. package/lib/objects/Element.js +77 -77
  76. package/lib/objects/Gif.d.ts +3 -3
  77. package/lib/objects/Gif.js +41 -41
  78. package/lib/objects/Iframe.d.ts +9 -9
  79. package/lib/objects/Iframe.js +63 -63
  80. package/lib/objects/Line.d.ts +2 -2
  81. package/lib/objects/Line.js +24 -24
  82. package/lib/objects/Link.d.ts +15 -15
  83. package/lib/objects/Link.js +107 -107
  84. package/lib/objects/Node.d.ts +59 -59
  85. package/lib/objects/Node.js +271 -271
  86. package/lib/objects/OrthogonalLink.d.ts +2 -2
  87. package/lib/objects/OrthogonalLink.js +54 -54
  88. package/lib/objects/Port.d.ts +12 -12
  89. package/lib/objects/Port.js +28 -28
  90. package/lib/objects/Svg.d.ts +12 -12
  91. package/lib/objects/Svg.js +93 -93
  92. package/lib/objects/Video.d.ts +14 -14
  93. package/lib/objects/Video.js +113 -113
  94. package/lib/objects/index.d.ts +15 -15
  95. package/lib/objects/index.js +32 -32
  96. package/lib/utils/ObjectUtil.d.ts +408 -408
  97. package/lib/utils/ObjectUtil.js +13 -13
  98. package/lib/utils/index.d.ts +1 -1
  99. package/lib/utils/index.js +13 -13
  100. package/package.json +1 -1
package/lib/handlers/DrawingHandler.js CHANGED
@@ -1,318 +1,318 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const fabric_1 = require("fabric");
4
- const uuidv4_1 = require("uuidv4");
5
- const objects_1 = require("../objects");
6
- class DrawingHandler {
7
- constructor(handler) {
8
- this.polygon = {
9
- init: () => {
10
- this.handler.interactionHandler.drawing('polygon');
11
- this.handler.pointArray = [];
12
- this.handler.lineArray = [];
13
- this.handler.activeLine = null;
14
- this.handler.activeShape = null;
15
- },
16
- finish: () => {
17
- this.handler.pointArray.forEach(point => {
18
- this.handler.canvas.remove(point);
19
- });
20
- this.handler.lineArray.forEach(line => {
21
- this.handler.canvas.remove(line);
22
- });
23
- this.handler.canvas.remove(this.handler.activeLine);
24
- this.handler.canvas.remove(this.handler.activeShape);
25
- this.handler.pointArray = [];
26
- this.handler.lineArray = [];
27
- this.handler.activeLine = null;
28
- this.handler.activeShape = null;
29
- this.handler.canvas.renderAll();
30
- this.handler.interactionHandler.selection();
31
- },
32
- addPoint: (opt) => {
33
- const { e, absolutePointer } = opt;
34
- const { x, y } = absolutePointer;
35
- const circle = new fabric_1.fabric.Circle({
36
- radius: 1,
37
- fill: '#ffffff',
38
- stroke: '#333333',
39
- strokeWidth: 0.5,
40
- left: x,
41
- top: y,
42
- selectable: false,
43
- hasBorders: false,
44
- hasControls: false,
45
- originX: 'center',
46
- originY: 'center',
47
- hoverCursor: 'pointer',
48
- });
49
- circle.set({
50
- id: uuidv4_1.uuid(),
51
- });
52
- if (!this.handler.pointArray.length) {
53
- circle.set({
54
- fill: 'red',
55
- });
56
- }
57
- const points = [x, y, x, y];
58
- const line = new fabric_1.fabric.Line(points, {
59
- strokeWidth: 1,
60
- fill: '#999999',
61
- stroke: '#999999',
62
- originX: 'center',
63
- originY: 'center',
64
- selectable: false,
65
- hasBorders: false,
66
- hasControls: false,
67
- evented: false,
68
- });
69
- line.set({
70
- class: 'line',
71
- });
72
- if (this.handler.activeShape) {
73
- const position = this.handler.canvas.getPointer(e);
74
- const activeShapePoints = this.handler.activeShape.get('points');
75
- activeShapePoints.push({
76
- x: position.x,
77
- y: position.y,
78
- });
79
- const polygon = new fabric_1.fabric.Polygon(activeShapePoints, {
80
- stroke: '#333333',
81
- strokeWidth: 1,
82
- fill: '#cccccc',
83
- opacity: 0.1,
84
- selectable: false,
85
- hasBorders: false,
86
- hasControls: false,
87
- evented: false,
88
- });
89
- this.handler.canvas.remove(this.handler.activeShape);
90
- this.handler.canvas.add(polygon);
91
- this.handler.activeShape = polygon;
92
- this.handler.canvas.renderAll();
93
- }
94
- else {
95
- const polyPoint = [{ x, y }];
96
- const polygon = new fabric_1.fabric.Polygon(polyPoint, {
97
- stroke: '#333333',
98
- strokeWidth: 1,
99
- fill: '#cccccc',
100
- opacity: 0.1,
101
- selectable: false,
102
- hasBorders: false,
103
- hasControls: false,
104
- evented: false,
105
- });
106
- this.handler.activeShape = polygon;
107
- this.handler.canvas.add(polygon);
108
- }
109
- this.handler.activeLine = line;
110
- this.handler.pointArray.push(circle);
111
- this.handler.lineArray.push(line);
112
- this.handler.canvas.add(line);
113
- this.handler.canvas.add(circle);
114
- },
115
- generate: (pointArray) => {
116
- const points = [];
117
- const id = uuidv4_1.uuid();
118
- pointArray.forEach(point => {
119
- points.push({
120
- x: point.left,
121
- y: point.top,
122
- });
123
- this.handler.canvas.remove(point);
124
- });
125
- this.handler.lineArray.forEach(line => {
126
- this.handler.canvas.remove(line);
127
- });
128
- this.handler.canvas.remove(this.handler.activeShape).remove(this.handler.activeLine);
129
- const option = {
130
- id,
131
- points,
132
- type: 'polygon',
133
- stroke: 'rgba(0, 0, 0, 1)',
134
- strokeWidth: 1,
135
- fill: 'rgba(0, 0, 0, 0.25)',
136
- opacity: 1,
137
- objectCaching: !this.handler.editable,
138
- name: 'New polygon',
139
- superType: 'drawing',
140
- };
141
- this.handler.add(option, false);
142
- this.handler.pointArray = [];
143
- this.handler.activeLine = null;
144
- this.handler.activeShape = null;
145
- this.handler.interactionHandler.selection();
146
- },
147
- };
148
- this.line = {
149
- init: () => {
150
- this.handler.interactionHandler.drawing('line');
151
- this.handler.pointArray = [];
152
- this.handler.activeLine = null;
153
- },
154
- finish: () => {
155
- this.handler.pointArray.forEach(point => {
156
- this.handler.canvas.remove(point);
157
- });
158
- this.handler.canvas.remove(this.handler.activeLine);
159
- this.handler.pointArray = [];
160
- this.handler.activeLine = null;
161
- this.handler.canvas.renderAll();
162
- this.handler.interactionHandler.selection();
163
- },
164
- addPoint: (opt) => {
165
- const { absolutePointer } = opt;
166
- const { x, y } = absolutePointer;
167
- const circle = new fabric_1.fabric.Circle({
168
- radius: 3,
169
- fill: '#ffffff',
170
- stroke: '#333333',
171
- strokeWidth: 0.5,
172
- left: x,
173
- top: y,
174
- selectable: false,
175
- hasBorders: false,
176
- hasControls: false,
177
- originX: 'center',
178
- originY: 'center',
179
- hoverCursor: 'pointer',
180
- });
181
- if (!this.handler.pointArray.length) {
182
- circle.set({
183
- fill: 'red',
184
- });
185
- }
186
- const points = [x, y, x, y];
187
- this.handler.activeLine = new objects_1.Line(points, {
188
- strokeWidth: 2,
189
- fill: '#999999',
190
- stroke: '#999999',
191
- originX: 'center',
192
- originY: 'center',
193
- selectable: false,
194
- hasBorders: false,
195
- hasControls: false,
196
- evented: false,
197
- });
198
- this.handler.activeLine.set({
199
- class: 'line',
200
- });
201
- this.handler.pointArray.push(circle);
202
- this.handler.canvas.add(this.handler.activeLine);
203
- this.handler.canvas.add(circle);
204
- },
205
- generate: (opt) => {
206
- const { absolutePointer } = opt;
207
- const { x, y } = absolutePointer;
208
- let points = [];
209
- const id = uuidv4_1.uuid();
210
- this.handler.pointArray.forEach(point => {
211
- points = points.concat(point.left, point.top, x, y);
212
- this.handler.canvas.remove(point);
213
- });
214
- this.handler.canvas.remove(this.handler.activeLine);
215
- const option = {
216
- id,
217
- points,
218
- type: 'line',
219
- stroke: 'rgba(0, 0, 0, 1)',
220
- strokeWidth: 3,
221
- opacity: 1,
222
- objectCaching: !this.handler.editable,
223
- name: 'New line',
224
- superType: 'drawing',
225
- };
226
- this.handler.add(option, false);
227
- this.handler.pointArray = [];
228
- this.handler.activeLine = null;
229
- this.handler.interactionHandler.selection();
230
- },
231
- };
232
- this.arrow = {
233
- init: () => {
234
- this.handler.interactionHandler.drawing('arrow');
235
- this.handler.pointArray = [];
236
- this.handler.activeLine = null;
237
- },
238
- finish: () => {
239
- this.handler.pointArray.forEach(point => {
240
- this.handler.canvas.remove(point);
241
- });
242
- this.handler.canvas.remove(this.handler.activeLine);
243
- this.handler.pointArray = [];
244
- this.handler.activeLine = null;
245
- this.handler.canvas.renderAll();
246
- this.handler.interactionHandler.selection();
247
- },
248
- addPoint: (opt) => {
249
- const { absolutePointer } = opt;
250
- const { x, y } = absolutePointer;
251
- const circle = new fabric_1.fabric.Circle({
252
- radius: 3,
253
- fill: '#ffffff',
254
- stroke: '#333333',
255
- strokeWidth: 0.5,
256
- left: x,
257
- top: y,
258
- selectable: false,
259
- hasBorders: false,
260
- hasControls: false,
261
- originX: 'center',
262
- originY: 'center',
263
- hoverCursor: 'pointer',
264
- });
265
- if (!this.handler.pointArray.length) {
266
- circle.set({
267
- fill: 'red',
268
- });
269
- }
270
- const points = [x, y, x, y];
271
- this.handler.activeLine = new objects_1.Arrow(points, {
272
- strokeWidth: 2,
273
- fill: '#999999',
274
- stroke: '#999999',
275
- class: 'line',
276
- originX: 'center',
277
- originY: 'center',
278
- selectable: false,
279
- hasBorders: false,
280
- hasControls: false,
281
- evented: false,
282
- });
283
- this.handler.pointArray.push(circle);
284
- this.handler.canvas.add(this.handler.activeLine);
285
- this.handler.canvas.add(circle);
286
- },
287
- generate: (opt) => {
288
- const { absolutePointer } = opt;
289
- const { x, y } = absolutePointer;
290
- let points = [];
291
- this.handler.pointArray.forEach(point => {
292
- points = points.concat(point.left, point.top, x, y);
293
- this.handler.canvas.remove(point);
294
- });
295
- this.handler.canvas.remove(this.handler.activeLine);
296
- const option = {
297
- id: uuidv4_1.uuid(),
298
- points,
299
- type: 'arrow',
300
- stroke: 'rgba(0, 0, 0, 1)',
301
- strokeWidth: 3,
302
- opacity: 1,
303
- objectCaching: !this.handler.editable,
304
- name: 'New line',
305
- superType: 'drawing',
306
- };
307
- this.handler.add(option, false);
308
- this.handler.pointArray = [];
309
- this.handler.activeLine = null;
310
- this.handler.interactionHandler.selection();
311
- },
312
- };
313
- this.orthogonal = {};
314
- this.curve = {};
315
- this.handler = handler;
316
- }
317
- }
318
- exports.default = DrawingHandler;
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ const fabric_1 = require("fabric");
4
+ const uuidv4_1 = require("uuidv4");
5
+ const objects_1 = require("../objects");
6
+ class DrawingHandler {
7
+ constructor(handler) {
8
+ this.polygon = {
9
+ init: () => {
10
+ this.handler.interactionHandler.drawing('polygon');
11
+ this.handler.pointArray = [];
12
+ this.handler.lineArray = [];
13
+ this.handler.activeLine = null;
14
+ this.handler.activeShape = null;
15
+ },
16
+ finish: () => {
17
+ this.handler.pointArray.forEach(point => {
18
+ this.handler.canvas.remove(point);
19
+ });
20
+ this.handler.lineArray.forEach(line => {
21
+ this.handler.canvas.remove(line);
22
+ });
23
+ this.handler.canvas.remove(this.handler.activeLine);
24
+ this.handler.canvas.remove(this.handler.activeShape);
25
+ this.handler.pointArray = [];
26
+ this.handler.lineArray = [];
27
+ this.handler.activeLine = null;
28
+ this.handler.activeShape = null;
29
+ this.handler.canvas.renderAll();
30
+ this.handler.interactionHandler.selection();
31
+ },
32
+ addPoint: (opt) => {
33
+ const { e, absolutePointer } = opt;
34
+ const { x, y } = absolutePointer;
35
+ const circle = new fabric_1.fabric.Circle({
36
+ radius: 1,
37
+ fill: '#ffffff',
38
+ stroke: '#333333',
39
+ strokeWidth: 0.5,
40
+ left: x,
41
+ top: y,
42
+ selectable: false,
43
+ hasBorders: false,
44
+ hasControls: false,
45
+ originX: 'center',
46
+ originY: 'center',
47
+ hoverCursor: 'pointer',
48
+ });
49
+ circle.set({
50
+ id: uuidv4_1.uuid(),
51
+ });
52
+ if (!this.handler.pointArray.length) {
53
+ circle.set({
54
+ fill: 'red',
55
+ });
56
+ }
57
+ const points = [x, y, x, y];
58
+ const line = new fabric_1.fabric.Line(points, {
59
+ strokeWidth: 1,
60
+ fill: '#999999',
61
+ stroke: '#999999',
62
+ originX: 'center',
63
+ originY: 'center',
64
+ selectable: false,
65
+ hasBorders: false,
66
+ hasControls: false,
67
+ evented: false,
68
+ });
69
+ line.set({
70
+ class: 'line',
71
+ });
72
+ if (this.handler.activeShape) {
73
+ const position = this.handler.canvas.getPointer(e);
74
+ const activeShapePoints = this.handler.activeShape.get('points');
75
+ activeShapePoints.push({
76
+ x: position.x,
77
+ y: position.y,
78
+ });
79
+ const polygon = new fabric_1.fabric.Polygon(activeShapePoints, {
80
+ stroke: '#333333',
81
+ strokeWidth: 1,
82
+ fill: '#cccccc',
83
+ opacity: 0.1,
84
+ selectable: false,
85
+ hasBorders: false,
86
+ hasControls: false,
87
+ evented: false,
88
+ });
89
+ this.handler.canvas.remove(this.handler.activeShape);
90
+ this.handler.canvas.add(polygon);
91
+ this.handler.activeShape = polygon;
92
+ this.handler.canvas.renderAll();
93
+ }
94
+ else {
95
+ const polyPoint = [{ x, y }];
96
+ const polygon = new fabric_1.fabric.Polygon(polyPoint, {
97
+ stroke: '#333333',
98
+ strokeWidth: 1,
99
+ fill: '#cccccc',
100
+ opacity: 0.1,
101
+ selectable: false,
102
+ hasBorders: false,
103
+ hasControls: false,
104
+ evented: false,
105
+ });
106
+ this.handler.activeShape = polygon;
107
+ this.handler.canvas.add(polygon);
108
+ }
109
+ this.handler.activeLine = line;
110
+ this.handler.pointArray.push(circle);
111
+ this.handler.lineArray.push(line);
112
+ this.handler.canvas.add(line);
113
+ this.handler.canvas.add(circle);
114
+ },
115
+ generate: (pointArray) => {
116
+ const points = [];
117
+ const id = uuidv4_1.uuid();
118
+ pointArray.forEach(point => {
119
+ points.push({
120
+ x: point.left,
121
+ y: point.top,
122
+ });
123
+ this.handler.canvas.remove(point);
124
+ });
125
+ this.handler.lineArray.forEach(line => {
126
+ this.handler.canvas.remove(line);
127
+ });
128
+ this.handler.canvas.remove(this.handler.activeShape).remove(this.handler.activeLine);
129
+ const option = {
130
+ id,
131
+ points,
132
+ type: 'polygon',
133
+ stroke: 'rgba(0, 0, 0, 1)',
134
+ strokeWidth: 1,
135
+ fill: 'rgba(0, 0, 0, 0.25)',
136
+ opacity: 1,
137
+ objectCaching: !this.handler.editable,
138
+ name: 'New polygon',
139
+ superType: 'drawing',
140
+ };
141
+ this.handler.add(option, false);
142
+ this.handler.pointArray = [];
143
+ this.handler.activeLine = null;
144
+ this.handler.activeShape = null;
145
+ this.handler.interactionHandler.selection();
146
+ },
147
+ };
148
+ this.line = {
149
+ init: () => {
150
+ this.handler.interactionHandler.drawing('line');
151
+ this.handler.pointArray = [];
152
+ this.handler.activeLine = null;
153
+ },
154
+ finish: () => {
155
+ this.handler.pointArray.forEach(point => {
156
+ this.handler.canvas.remove(point);
157
+ });
158
+ this.handler.canvas.remove(this.handler.activeLine);
159
+ this.handler.pointArray = [];
160
+ this.handler.activeLine = null;
161
+ this.handler.canvas.renderAll();
162
+ this.handler.interactionHandler.selection();
163
+ },
164
+ addPoint: (opt) => {
165
+ const { absolutePointer } = opt;
166
+ const { x, y } = absolutePointer;
167
+ const circle = new fabric_1.fabric.Circle({
168
+ radius: 3,
169
+ fill: '#ffffff',
170
+ stroke: '#333333',
171
+ strokeWidth: 0.5,
172
+ left: x,
173
+ top: y,
174
+ selectable: false,
175
+ hasBorders: false,
176
+ hasControls: false,
177
+ originX: 'center',
178
+ originY: 'center',
179
+ hoverCursor: 'pointer',
180
+ });
181
+ if (!this.handler.pointArray.length) {
182
+ circle.set({
183
+ fill: 'red',
184
+ });
185
+ }
186
+ const points = [x, y, x, y];
187
+ this.handler.activeLine = new objects_1.Line(points, {
188
+ strokeWidth: 2,
189
+ fill: '#999999',
190
+ stroke: '#999999',
191
+ originX: 'center',
192
+ originY: 'center',
193
+ selectable: false,
194
+ hasBorders: false,
195
+ hasControls: false,
196
+ evented: false,
197
+ });
198
+ this.handler.activeLine.set({
199
+ class: 'line',
200
+ });
201
+ this.handler.pointArray.push(circle);
202
+ this.handler.canvas.add(this.handler.activeLine);
203
+ this.handler.canvas.add(circle);
204
+ },
205
+ generate: (opt) => {
206
+ const { absolutePointer } = opt;
207
+ const { x, y } = absolutePointer;
208
+ let points = [];
209
+ const id = uuidv4_1.uuid();
210
+ this.handler.pointArray.forEach(point => {
211
+ points = points.concat(point.left, point.top, x, y);
212
+ this.handler.canvas.remove(point);
213
+ });
214
+ this.handler.canvas.remove(this.handler.activeLine);
215
+ const option = {
216
+ id,
217
+ points,
218
+ type: 'line',
219
+ stroke: 'rgba(0, 0, 0, 1)',
220
+ strokeWidth: 3,
221
+ opacity: 1,
222
+ objectCaching: !this.handler.editable,
223
+ name: 'New line',
224
+ superType: 'drawing',
225
+ };
226
+ this.handler.add(option, false);
227
+ this.handler.pointArray = [];
228
+ this.handler.activeLine = null;
229
+ this.handler.interactionHandler.selection();
230
+ },
231
+ };
232
+ this.arrow = {
233
+ init: () => {
234
+ this.handler.interactionHandler.drawing('arrow');
235
+ this.handler.pointArray = [];
236
+ this.handler.activeLine = null;
237
+ },
238
+ finish: () => {
239
+ this.handler.pointArray.forEach(point => {
240
+ this.handler.canvas.remove(point);
241
+ });
242
+ this.handler.canvas.remove(this.handler.activeLine);
243
+ this.handler.pointArray = [];
244
+ this.handler.activeLine = null;
245
+ this.handler.canvas.renderAll();
246
+ this.handler.interactionHandler.selection();
247
+ },
248
+ addPoint: (opt) => {
249
+ const { absolutePointer } = opt;
250
+ const { x, y } = absolutePointer;
251
+ const circle = new fabric_1.fabric.Circle({
252
+ radius: 3,
253
+ fill: '#ffffff',
254
+ stroke: '#333333',
255
+ strokeWidth: 0.5,
256
+ left: x,
257
+ top: y,
258
+ selectable: false,
259
+ hasBorders: false,
260
+ hasControls: false,
261
+ originX: 'center',
262
+ originY: 'center',
263
+ hoverCursor: 'pointer',
264
+ });
265
+ if (!this.handler.pointArray.length) {
266
+ circle.set({
267
+ fill: 'red',
268
+ });
269
+ }
270
+ const points = [x, y, x, y];
271
+ this.handler.activeLine = new objects_1.Arrow(points, {
272
+ strokeWidth: 2,
273
+ fill: '#999999',
274
+ stroke: '#999999',
275
+ class: 'line',
276
+ originX: 'center',
277
+ originY: 'center',
278
+ selectable: false,
279
+ hasBorders: false,
280
+ hasControls: false,
281
+ evented: false,
282
+ });
283
+ this.handler.pointArray.push(circle);
284
+ this.handler.canvas.add(this.handler.activeLine);
285
+ this.handler.canvas.add(circle);
286
+ },
287
+ generate: (opt) => {
288
+ const { absolutePointer } = opt;
289
+ const { x, y } = absolutePointer;
290
+ let points = [];
291
+ this.handler.pointArray.forEach(point => {
292
+ points = points.concat(point.left, point.top, x, y);
293
+ this.handler.canvas.remove(point);
294
+ });
295
+ this.handler.canvas.remove(this.handler.activeLine);
296
+ const option = {
297
+ id: uuidv4_1.uuid(),
298
+ points,
299
+ type: 'arrow',
300
+ stroke: 'rgba(0, 0, 0, 1)',
301
+ strokeWidth: 3,
302
+ opacity: 1,
303
+ objectCaching: !this.handler.editable,
304
+ name: 'New line',
305
+ superType: 'drawing',
306
+ };
307
+ this.handler.add(option, false);
308
+ this.handler.pointArray = [];
309
+ this.handler.activeLine = null;
310
+ this.handler.interactionHandler.selection();
311
+ },
312
+ };
313
+ this.orthogonal = {};
314
+ this.curve = {};
315
+ this.handler = handler;
316
+ }
317
+ }
318
+ exports.default = DrawingHandler;