@inweb/markup 26.9.3 → 26.9.5

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 (6) hide show
  1. package/dist/markup.js +36 -348
  2. package/dist/markup.js.map +1 -1
  3. package/dist/markup.min.js +23 -0
  4. package/dist/markup.module.js +647 -933
  5. package/dist/markup.module.js.map +1 -1
  6. package/package.json +3 -3
package/dist/markup.module.js CHANGED
@@ -1,25 +1,37 @@
1
- import Konva from "konva";
1
+ ///////////////////////////////////////////////////////////////////////////////
2
+ // Copyright (C) 2002-2025, Open Design Alliance (the "Alliance").
3
+ // All rights reserved.
4
+ //
5
+ // This software and its documentation and related materials are owned by
6
+ // the Alliance. The software may only be incorporated into application
7
+ // programs owned by members of the Alliance, subject to a signed
8
+ // Membership Agreement and Supplemental Software License Agreement with the
9
+ // Alliance. The structure and organization of this software are the valuable
10
+ // trade secrets of the Alliance and its suppliers. The software is also
11
+ // protected by copyright law and international treaty provisions. Application
12
+ // programs incorporating this software must include the following statement
13
+ // with their copyright notices:
14
+ //
15
+ // This application incorporates Open Design Alliance software pursuant to a
16
+ // license agreement with Open Design Alliance.
17
+ // Open Design Alliance Copyright (C) 2002-2025 by Open Design Alliance.
18
+ // All rights reserved.
19
+ //
20
+ // By use of this software, its documentation or related materials, you
21
+ // acknowledge and accept the above terms.
22
+ ///////////////////////////////////////////////////////////////////////////////
23
+
24
+ import Konva from 'konva';
2
25
 
3
26
  class WorldTransform {
4
27
  screenToWorld(position) {
5
- return {
6
- x: position.x,
7
- y: position.y,
8
- z: 0
9
- };
28
+ return { x: position.x, y: position.y, z: 0 };
10
29
  }
11
30
  worldToScreen(position) {
12
- return {
13
- x: position.x,
14
- y: position.y
15
- };
31
+ return { x: position.x, y: position.y };
16
32
  }
17
33
  getScale() {
18
- return {
19
- x: 1,
20
- y: 1,
21
- z: 1
22
- };
34
+ return { x: 1, y: 1, z: 1 };
23
35
  }
24
36
  }
25
37
 
@@ -31,11 +43,7 @@ class MarkupColor {
31
43
  return "#" + this.HEX;
32
44
  }
33
45
  asRGB() {
34
- return {
35
- r: this.R,
36
- g: this.G,
37
- b: this.B
38
- };
46
+ return { r: this.R, g: this.G, b: this.B };
39
47
  }
40
48
  setColor(r, g, b) {
41
49
  this.R = r;
@@ -44,7 +52,7 @@ class MarkupColor {
44
52
  this.HEX = this.rgbToHex(r, g, b);
45
53
  }
46
54
  rgbToHex(r, g, b) {
47
- const valueToHex = c => {
55
+ const valueToHex = (c) => {
48
56
  const hex = c.toString(16);
49
57
  return hex === "0" ? "00" : hex;
50
58
  };
@@ -52,10 +60,13 @@ class MarkupColor {
52
60
  }
53
61
  }
54
62
 
55
- const LineTypeSpecs = new Map([ [ "solid", [] ], [ "dot", [ 30, 30, .001, 30 ] ], [ "dash", [ 30, 30 ] ] ]);
56
-
63
+ const LineTypeSpecs = new Map([
64
+ ["solid", []],
65
+ ["dot", [30, 30, 0.001, 30]],
66
+ ["dash", [30, 30]],
67
+ ]);
57
68
  class KonvaLine {
58
- constructor(params, ref = null, worldTransformer = new WorldTransform) {
69
+ constructor(params, ref = null, worldTransformer = new WorldTransform()) {
59
70
  var _a, _b;
60
71
  this._worldTransformer = worldTransformer;
61
72
  if (ref) {
@@ -66,41 +77,26 @@ class KonvaLine {
66
77
  const points = this._ref.points();
67
78
  let wcsPoint;
68
79
  for (let i = 0; i < points.length; i += 2) {
69
- wcsPoint = this._worldTransformer.screenToWorld({
70
- x: points[i],
71
- y: points[i + 1]
72
- });
73
- wcsPoints.push({
74
- x: wcsPoint.x,
75
- y: wcsPoint.y,
76
- z: wcsPoint.z
77
- });
80
+ wcsPoint = this._worldTransformer.screenToWorld({ x: points[i], y: points[i + 1] });
81
+ wcsPoints.push({ x: wcsPoint.x, y: wcsPoint.y, z: wcsPoint.z });
78
82
  }
79
83
  this._ref.setAttr("wcsPoints", wcsPoints);
80
84
  }
81
85
  return;
82
86
  }
83
- if (!params) params = {};
84
- if (!params.points) params.points = [ {
85
- x: 0,
86
- y: 0
87
- }, {
88
- x: 100,
89
- y: 100
90
- } ];
87
+ if (!params)
88
+ params = {};
89
+ if (!params.points)
90
+ params.points = [
91
+ { x: 0, y: 0 },
92
+ { x: 100, y: 100 },
93
+ ];
91
94
  const konvaPoints = [];
92
95
  const wcsPoints = [];
93
- params.points.forEach(point => {
96
+ params.points.forEach((point) => {
94
97
  konvaPoints.push(point.x, point.y);
95
- const wcsPoint = this._worldTransformer.screenToWorld({
96
- x: point.x,
97
- y: point.y
98
- });
99
- wcsPoints.push({
100
- x: wcsPoint.x,
101
- y: wcsPoint.y,
102
- z: wcsPoint.z
103
- });
98
+ const wcsPoint = this._worldTransformer.screenToWorld({ x: point.x, y: point.y });
99
+ wcsPoints.push({ x: wcsPoint.x, y: wcsPoint.y, z: wcsPoint.z });
104
100
  });
105
101
  this._ref = new Konva.Line({
106
102
  stroke: (_a = params.color) !== null && _a !== void 0 ? _a : "#ff0000",
@@ -111,12 +107,13 @@ class KonvaLine {
111
107
  points: konvaPoints,
112
108
  draggable: true,
113
109
  strokeScaleEnabled: false,
114
- dash: LineTypeSpecs.get(params.type) || []
110
+ dash: LineTypeSpecs.get(params.type) || [],
115
111
  });
116
112
  this._ref.setAttr("wcsPoints", wcsPoints);
117
- this._ref.on("transform", e => {
113
+ this._ref.on("transform", (e) => {
118
114
  const attrs = e.target.attrs;
119
- if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
115
+ if (attrs.rotation !== this._ref.rotation())
116
+ this._ref.rotation(attrs.rotation);
120
117
  });
121
118
  this._ref.on("transformend", () => {
122
119
  const absoluteTransform = this._ref.getAbsoluteTransform();
@@ -124,19 +121,9 @@ class KonvaLine {
124
121
  const points = this._ref.points();
125
122
  let wcsPoint;
126
123
  for (let i = 0; i < points.length; i += 2) {
127
- const position = absoluteTransform.point({
128
- x: points[i],
129
- y: points[i + 1]
130
- });
131
- wcsPoint = this._worldTransformer.screenToWorld({
132
- x: position.x,
133
- y: position.y
134
- });
135
- wcsPoints.push({
136
- x: wcsPoint.x,
137
- y: wcsPoint.y,
138
- z: wcsPoint.z
139
- });
124
+ const position = absoluteTransform.point({ x: points[i], y: points[i + 1] });
125
+ wcsPoint = this._worldTransformer.screenToWorld({ x: position.x, y: position.y });
126
+ wcsPoints.push({ x: wcsPoint.x, y: wcsPoint.y, z: wcsPoint.z });
140
127
  }
141
128
  this._ref.setAttr("wcsPoints", wcsPoints);
142
129
  });
@@ -146,19 +133,9 @@ class KonvaLine {
146
133
  const points = this._ref.points();
147
134
  let wcsPoint;
148
135
  for (let i = 0; i < points.length; i += 2) {
149
- const position = absoluteTransform.point({
150
- x: points[i],
151
- y: points[i + 1]
152
- });
153
- wcsPoint = this._worldTransformer.screenToWorld({
154
- x: position.x,
155
- y: position.y
156
- });
157
- wcsPoints.push({
158
- x: wcsPoint.x,
159
- y: wcsPoint.y,
160
- z: wcsPoint.z
161
- });
136
+ const position = absoluteTransform.point({ x: points[i], y: points[i + 1] });
137
+ wcsPoint = this._worldTransformer.screenToWorld({ x: position.x, y: position.y });
138
+ wcsPoints.push({ x: wcsPoint.x, y: wcsPoint.y, z: wcsPoint.z });
162
139
  }
163
140
  this._ref.setAttr("wcsPoints", wcsPoints);
164
141
  });
@@ -211,29 +188,28 @@ class KonvaLine {
211
188
  const typeSpecs = this._ref.dash() || [];
212
189
  let type;
213
190
  switch (typeSpecs) {
214
- case LineTypeSpecs.get("dot"):
215
- type = "dot";
216
- break;
217
-
218
- case LineTypeSpecs.get("dash"):
219
- type = "dash";
220
- break;
221
-
222
- default:
223
- type = "solid";
224
- break;
191
+ case LineTypeSpecs.get("dot"):
192
+ type = "dot";
193
+ break;
194
+ case LineTypeSpecs.get("dash"):
195
+ type = "dash";
196
+ break;
197
+ default:
198
+ type = "solid";
199
+ break;
225
200
  }
226
201
  return type;
227
202
  }
228
203
  setLineType(type) {
229
204
  const specs = LineTypeSpecs.get(type);
230
- if (specs) this._ref.dash(specs);
205
+ if (specs)
206
+ this._ref.dash(specs);
231
207
  }
232
208
  addPoints(points) {
233
209
  let newPoints = this._ref.points();
234
210
  const wcsPoints = this._ref.getAttr("wcsPoints");
235
- points.forEach(point => {
236
- newPoints = newPoints.concat([ point.x, point.y ]);
211
+ points.forEach((point) => {
212
+ newPoints = newPoints.concat([point.x, point.y]);
237
213
  const wcsPoint = this._worldTransformer.screenToWorld(point);
238
214
  wcsPoints.push(wcsPoint);
239
215
  });
@@ -244,12 +220,9 @@ class KonvaLine {
244
220
  const points = [];
245
221
  let invert = this._ref.getAbsoluteTransform().copy();
246
222
  invert = invert.invert();
247
- wcsPoints.forEach(point => {
223
+ wcsPoints.forEach((point) => {
248
224
  let screenPoint = this._worldTransformer.worldToScreen(point);
249
- screenPoint = invert.point({
250
- x: screenPoint.x,
251
- y: screenPoint.y
252
- });
225
+ screenPoint = invert.point({ x: screenPoint.x, y: screenPoint.y });
253
226
  points.push(screenPoint.x);
254
227
  points.push(screenPoint.y);
255
228
  });
@@ -260,7 +233,7 @@ class KonvaLine {
260
233
  }
261
234
 
262
235
  class KonvaText {
263
- constructor(params, ref = null, worldTransformer = new WorldTransform) {
236
+ constructor(params, ref = null, worldTransformer = new WorldTransform()) {
264
237
  var _a, _b, _c;
265
238
  this.TEXT_FONT_FAMILY = "Calibri";
266
239
  this._worldTransformer = worldTransformer;
@@ -268,19 +241,16 @@ class KonvaText {
268
241
  this._ref = ref;
269
242
  const wcsStart = this._ref.getAttr("wcsStart");
270
243
  if (!wcsStart) {
271
- this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({
272
- x: ref.x(),
273
- y: ref.y()
274
- }));
244
+ this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({ x: ref.x(), y: ref.y() }));
275
245
  }
276
246
  return;
277
247
  }
278
- if (!params) params = {};
279
- if (!params.position) params.position = {
280
- x: 0,
281
- y: 0
282
- };
283
- if (!params.text) params.text = "default";
248
+ if (!params)
249
+ params = {};
250
+ if (!params.position)
251
+ params.position = { x: 0, y: 0 };
252
+ if (!params.text)
253
+ params.text = "default";
284
254
  this._ref = new Konva.Text({
285
255
  x: params.position.x,
286
256
  y: params.position.y,
@@ -290,52 +260,46 @@ class KonvaText {
290
260
  fill: (_b = params.color) !== null && _b !== void 0 ? _b : "#ff0000",
291
261
  align: "left",
292
262
  draggable: true,
293
- rotation: (_c = params.rotation) !== null && _c !== void 0 ? _c : 0
263
+ rotation: (_c = params.rotation) !== null && _c !== void 0 ? _c : 0,
294
264
  });
295
265
  this._ref.width(this._ref.getTextWidth());
296
- this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({
297
- x: params.position.x,
298
- y: params.position.y
299
- }));
300
- this._ref.on("transform", e => {
266
+ this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({ x: params.position.x, y: params.position.y }));
267
+ this._ref.on("transform", (e) => {
301
268
  const attrs = e.target.attrs;
302
- if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
303
- const scaleByX = Math.abs(attrs.scaleX - 1) > 1e-5;
304
- const scaleByY = Math.abs(attrs.scaleY - 1) > 1e-5;
269
+ if (attrs.rotation !== this._ref.rotation())
270
+ this._ref.rotation(attrs.rotation);
271
+ const scaleByX = Math.abs(attrs.scaleX - 1) > 10e-6;
272
+ const scaleByY = Math.abs(attrs.scaleY - 1) > 10e-6;
305
273
  let newWidth = this._ref.width();
306
- if (scaleByX) newWidth *= attrs.scaleX;
274
+ if (scaleByX)
275
+ newWidth *= attrs.scaleX;
307
276
  let newHeight = this._ref.height();
308
- if (scaleByY) newHeight *= attrs.scaleY;
277
+ if (scaleByY)
278
+ newHeight *= attrs.scaleY;
309
279
  const minWidth = 50;
310
- if (newWidth < minWidth) newWidth = minWidth;
311
- if (newHeight < Math.round(this.getFontSize())) newHeight = Math.round(this.getFontSize());
280
+ if (newWidth < minWidth)
281
+ newWidth = minWidth;
282
+ if (newHeight < Math.round(this.getFontSize()))
283
+ newHeight = Math.round(this.getFontSize());
312
284
  if (scaleByX) {
313
285
  this._ref.width(newWidth);
314
286
  }
315
287
  if (scaleByY) {
316
288
  this._ref.height(newHeight);
317
289
  }
318
- this._ref.scale({
319
- x: 1,
320
- y: 1
321
- });
290
+ this._ref.scale({ x: 1, y: 1 });
322
291
  });
323
- this._ref.on("transformend", e => {
292
+ this._ref.on("transformend", (e) => {
324
293
  const attrs = e.target.attrs;
325
- if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
294
+ if (attrs.rotation !== this._ref.rotation())
295
+ this._ref.rotation(attrs.rotation);
326
296
  const absoluteTransform = this._ref.getStage().getAbsoluteTransform();
327
- const position = absoluteTransform.point({
328
- x: this._ref.x(),
329
- y: this._ref.y()
330
- });
297
+ const position = absoluteTransform.point({ x: this._ref.x(), y: this._ref.y() });
331
298
  this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld(position));
332
299
  });
333
300
  this._ref.on("dragend", () => {
334
301
  const absoluteTransform = this._ref.getStage().getAbsoluteTransform();
335
- const position = absoluteTransform.point({
336
- x: this._ref.x(),
337
- y: this._ref.y()
338
- });
302
+ const position = absoluteTransform.point({ x: this._ref.x(), y: this._ref.y() });
339
303
  this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld(position));
340
304
  });
341
305
  this._ref.id(this._ref._id.toString());
@@ -384,14 +348,8 @@ class KonvaText {
384
348
  return this._ref.getPosition();
385
349
  }
386
350
  setPosition(x, y) {
387
- this._ref.setPosition({
388
- x: x,
389
- y: y
390
- });
391
- this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({
392
- x: x,
393
- y: y
394
- }));
351
+ this._ref.setPosition({ x, y });
352
+ this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({ x, y }));
395
353
  }
396
354
  getFontSize() {
397
355
  return this._ref.fontSize();
@@ -404,15 +362,12 @@ class KonvaText {
404
362
  let invert = this._ref.getStage().getAbsoluteTransform().copy();
405
363
  invert = invert.invert();
406
364
  const positionStart = invert.point(screenPositionStart);
407
- this._ref.position({
408
- x: positionStart.x,
409
- y: positionStart.y
410
- });
365
+ this._ref.position({ x: positionStart.x, y: positionStart.y });
411
366
  }
412
367
  }
413
368
 
414
369
  class KonvaRectangle {
415
- constructor(params, ref = null, worldTransformer = new WorldTransform) {
370
+ constructor(params, ref = null, worldTransformer = new WorldTransform()) {
416
371
  var _a, _b, _c, _d;
417
372
  this._worldTransformer = worldTransformer;
418
373
  if (ref) {
@@ -420,44 +375,30 @@ class KonvaRectangle {
420
375
  const wcsStart = this._ref.getAttr("wcsStart");
421
376
  const wcsEnd = this._ref.getAttr("wcsEnd");
422
377
  if (!wcsStart) {
423
- this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({
424
- x: ref.x(),
425
- y: ref.y()
426
- }));
378
+ this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({ x: ref.x(), y: ref.y() }));
427
379
  }
428
380
  if (!wcsEnd) {
429
- const rightBottomPoint = {
430
- x: ref.x() + ref.width(),
431
- y: ref.y() + ref.height()
432
- };
433
- this._ref.setAttr("wcsEnd", this._worldTransformer.screenToWorld({
434
- x: rightBottomPoint.x,
435
- y: rightBottomPoint.y
436
- }));
381
+ const rightBottomPoint = { x: ref.x() + ref.width(), y: ref.y() + ref.height() };
382
+ this._ref.setAttr("wcsEnd", this._worldTransformer.screenToWorld({ x: rightBottomPoint.x, y: rightBottomPoint.y }));
437
383
  }
438
384
  return;
439
385
  }
440
- if (!params) params = {};
441
- if (!params.position) params.position = {
442
- x: 0,
443
- y: 0
444
- };
386
+ if (!params)
387
+ params = {};
388
+ if (!params.position)
389
+ params.position = { x: 0, y: 0 };
445
390
  if (params.position2) {
446
391
  params.width = params.position2.x - params.position.x;
447
392
  params.height = params.position2.y - params.position.y;
448
- } else {
393
+ }
394
+ else {
449
395
  if (!params.width || !params.height) {
450
- params.position2 = {
451
- x: 200,
452
- y: 200
453
- };
396
+ params.position2 = { x: 200, y: 200 };
454
397
  params.width = 200;
455
398
  params.height = 200;
456
- } else {
457
- params.position2 = {
458
- x: params.position.x + params.width,
459
- y: params.position.y + params.height
460
- };
399
+ }
400
+ else {
401
+ params.position2 = { x: params.position.x + params.width, y: params.position.y + params.height };
461
402
  }
462
403
  }
463
404
  this._ref = new Konva.Rect({
@@ -471,64 +412,48 @@ class KonvaRectangle {
471
412
  width: (_c = params.width) !== null && _c !== void 0 ? _c : 200,
472
413
  height: (_d = params.height) !== null && _d !== void 0 ? _d : 200,
473
414
  draggable: true,
474
- strokeScaleEnabled: false
415
+ strokeScaleEnabled: false,
475
416
  });
476
- this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({
477
- x: params.position.x,
478
- y: params.position.y
479
- }));
480
- this._ref.setAttr("wcsEnd", this._worldTransformer.screenToWorld({
481
- x: params.position2.x,
482
- y: params.position2.y
483
- }));
484
- this._ref.on("transform", e => {
417
+ this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({ x: params.position.x, y: params.position.y }));
418
+ this._ref.setAttr("wcsEnd", this._worldTransformer.screenToWorld({ x: params.position2.x, y: params.position2.y }));
419
+ this._ref.on("transform", (e) => {
485
420
  const attrs = e.target.attrs;
486
- const scaleByX = Math.abs(attrs.scaleX - 1) > 1e-5;
487
- const scaleByY = Math.abs(attrs.scaleY - 1) > 1e-5;
421
+ const scaleByX = Math.abs(attrs.scaleX - 1) > 10e-6;
422
+ const scaleByY = Math.abs(attrs.scaleY - 1) > 10e-6;
488
423
  let newWidth = this._ref.width();
489
- if (scaleByX) newWidth *= attrs.scaleX;
424
+ if (scaleByX)
425
+ newWidth *= attrs.scaleX;
490
426
  let newHeight = this._ref.height();
491
- if (scaleByY) newHeight *= attrs.scaleY;
427
+ if (scaleByY)
428
+ newHeight *= attrs.scaleY;
492
429
  const minWidth = 50;
493
430
  const minHeight = 50;
494
- if (newWidth < minWidth) newWidth = minWidth;
495
- if (newHeight < minHeight) newHeight = minHeight;
431
+ if (newWidth < minWidth)
432
+ newWidth = minWidth;
433
+ if (newHeight < minHeight)
434
+ newHeight = minHeight;
496
435
  if (scaleByX) {
497
436
  this._ref.width(newWidth);
498
437
  }
499
438
  if (scaleByY) {
500
439
  this._ref.height(newHeight);
501
440
  }
502
- this._ref.scale({
503
- x: 1,
504
- y: 1
505
- });
441
+ this._ref.scale({ x: 1, y: 1 });
506
442
  });
507
- this._ref.on("transformend", e => {
443
+ this._ref.on("transformend", (e) => {
508
444
  const attrs = e.target.attrs;
509
- if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
445
+ if (attrs.rotation !== this._ref.rotation())
446
+ this._ref.rotation(attrs.rotation);
510
447
  const absoluteTransform = this._ref.getStage().getAbsoluteTransform();
511
- const position = absoluteTransform.point({
512
- x: this._ref.x(),
513
- y: this._ref.y()
514
- });
448
+ const position = absoluteTransform.point({ x: this._ref.x(), y: this._ref.y() });
515
449
  this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld(position));
516
- this._ref.setAttr("wcsEnd", this._worldTransformer.screenToWorld({
517
- x: position.x + this._ref.width(),
518
- y: position.y + this._ref.height()
519
- }));
450
+ this._ref.setAttr("wcsEnd", this._worldTransformer.screenToWorld({ x: position.x + this._ref.width(), y: position.y + this._ref.height() }));
520
451
  });
521
452
  this._ref.on("dragend", () => {
522
453
  const absoluteTransform = this._ref.getStage().getAbsoluteTransform();
523
- const position = absoluteTransform.point({
524
- x: this._ref.x(),
525
- y: this._ref.y()
526
- });
454
+ const position = absoluteTransform.point({ x: this._ref.x(), y: this._ref.y() });
527
455
  this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld(position));
528
- this._ref.setAttr("wcsEnd", this._worldTransformer.screenToWorld({
529
- x: position.x + this._ref.width(),
530
- y: position.y + this._ref.height()
531
- }));
456
+ this._ref.setAttr("wcsEnd", this._worldTransformer.screenToWorld({ x: position.x + this._ref.width(), y: position.y + this._ref.height() }));
532
457
  });
533
458
  this._ref.id(this._ref._id.toString());
534
459
  }
@@ -543,35 +468,20 @@ class KonvaRectangle {
543
468
  }
544
469
  setWidth(w) {
545
470
  this._ref.width(w);
546
- const rightLowerPoint = {
547
- x: this._ref.x() + w,
548
- y: this._ref.y() + this._ref.height()
549
- };
471
+ const rightLowerPoint = { x: this._ref.x() + w, y: this._ref.y() + this._ref.height() };
550
472
  const wcsRightLowerPoint = this._worldTransformer.screenToWorld(rightLowerPoint);
551
473
  this._ref.setAttr("wcsEnd", wcsRightLowerPoint);
552
474
  }
553
475
  setHeight(h) {
554
476
  this._ref.height(h);
555
- const rightLowerPoint = {
556
- x: this._ref.x() + this._ref.width(),
557
- y: this._ref.y() + h
558
- };
477
+ const rightLowerPoint = { x: this._ref.x() + this._ref.width(), y: this._ref.y() + h };
559
478
  const wcsRightLowerPoint = this._worldTransformer.screenToWorld(rightLowerPoint);
560
479
  this._ref.setAttr("wcsEnd", wcsRightLowerPoint);
561
480
  }
562
481
  setPosition(x, y) {
563
- this._ref.setPosition({
564
- x: x,
565
- y: y
566
- });
567
- this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({
568
- x: x,
569
- y: y
570
- }));
571
- const rightLowerPoint = {
572
- x: x + this._ref.width(),
573
- y: y + this._ref.y()
574
- };
482
+ this._ref.setPosition({ x, y });
483
+ this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({ x, y }));
484
+ const rightLowerPoint = { x: x + this._ref.width(), y: y + this._ref.y() };
575
485
  const wcsRightLowerPoint = this._worldTransformer.screenToWorld(rightLowerPoint);
576
486
  this._ref.setAttr("wcsEnd", wcsRightLowerPoint);
577
487
  }
@@ -622,10 +532,7 @@ class KonvaRectangle {
622
532
  invert = invert.invert();
623
533
  const positionStart = invert.point(screenPositionStart);
624
534
  const positionEnd = invert.point(screenPositionEnd);
625
- this._ref.position({
626
- x: positionStart.x,
627
- y: positionStart.y
628
- });
535
+ this._ref.position({ x: positionStart.x, y: positionStart.y });
629
536
  this._ref.width(Math.abs(positionEnd.x - positionStart.x));
630
537
  this._ref.height(Math.abs(positionEnd.y - positionStart.y));
631
538
  }
@@ -636,7 +543,7 @@ function getDistanceIn2D(p1, p2) {
636
543
  }
637
544
 
638
545
  class KonvaEllipse {
639
- constructor(params, ref = null, worldTransformer = new WorldTransform) {
546
+ constructor(params, ref = null, worldTransformer = new WorldTransform()) {
640
547
  var _a, _b, _c;
641
548
  this._worldTransformer = worldTransformer;
642
549
  if (ref) {
@@ -645,42 +552,31 @@ class KonvaEllipse {
645
552
  const radiusX = this._ref.getAttr("wcsRadiusX");
646
553
  const radiusY = this._ref.getAttr("wcsRadiusY");
647
554
  if (!wcsPosition) {
648
- this._ref.setAttr("wcsPosition", this._worldTransformer.screenToWorld({
649
- x: ref.x(),
650
- y: ref.y()
651
- }));
555
+ this._ref.setAttr("wcsPosition", this._worldTransformer.screenToWorld({ x: ref.x(), y: ref.y() }));
652
556
  }
653
557
  if (!radiusX) {
654
- this._ref.setAttr("wcsRadiusX", this._worldTransformer.screenToWorld({
655
- x: ref.x() + ref.radiusX(),
656
- y: ref.y()
657
- }));
558
+ this._ref.setAttr("wcsRadiusX", this._worldTransformer.screenToWorld({ x: ref.x() + ref.radiusX(), y: ref.y() }));
658
559
  }
659
560
  if (!radiusY) {
660
- this._ref.setAttr("wcsRadiusY", this._worldTransformer.screenToWorld({
661
- x: ref.x(),
662
- y: ref.y() + ref.radiusY()
663
- }));
561
+ this._ref.setAttr("wcsRadiusY", this._worldTransformer.screenToWorld({ x: ref.x(), y: ref.y() + ref.radiusY() }));
664
562
  }
665
563
  return;
666
564
  }
667
- if (!params) params = {};
668
- if (!params.position) params.position = {
669
- x: 0,
670
- y: 0
671
- };
565
+ if (!params)
566
+ params = {};
567
+ if (!params.position)
568
+ params.position = { x: 0, y: 0 };
672
569
  if (params.position2) {
673
- (_a = params.radius) !== null && _a !== void 0 ? _a : params.radius = {
674
- x: 0,
675
- y: 0
676
- };
570
+ (_a = params.radius) !== null && _a !== void 0 ? _a : (params.radius = { x: 0, y: 0 });
677
571
  params.radius.x = getDistanceIn2D(params.position, params.position2);
678
- if (params.position3) params.radius.y = getDistanceIn2D(params.position, params.position3); else params.radius.x = params.radius.y;
679
- } else {
680
- if (!params.radius) params.radius = {
681
- x: 25,
682
- y: 25
683
- };
572
+ if (params.position3)
573
+ params.radius.y = getDistanceIn2D(params.position, params.position3);
574
+ else
575
+ params.radius.x = params.radius.y;
576
+ }
577
+ else {
578
+ if (!params.radius)
579
+ params.radius = { x: 25, y: 25 };
684
580
  }
685
581
  this._ref = new Konva.Ellipse({
686
582
  stroke: (_b = params.color) !== null && _b !== void 0 ? _b : "#ff0000",
@@ -693,90 +589,58 @@ class KonvaEllipse {
693
589
  radiusX: params.radius.x,
694
590
  radiusY: params.radius.y,
695
591
  draggable: true,
696
- strokeScaleEnabled: false
592
+ strokeScaleEnabled: false,
697
593
  });
698
- this._ref.setAttr("wcsPosition", this._worldTransformer.screenToWorld({
699
- x: params.position.x,
700
- y: params.position.y
701
- }));
702
- this._ref.setAttr("wcsRadiusX", this._worldTransformer.screenToWorld({
703
- x: this._ref.x() + params.radius.x,
704
- y: this._ref.y()
705
- }));
706
- this._ref.setAttr("wcsRadiusY", this._worldTransformer.screenToWorld({
707
- x: this._ref.x(),
708
- y: this._ref.y() + params.radius.y
709
- }));
710
- this._ref.on("transform", e => {
594
+ this._ref.setAttr("wcsPosition", this._worldTransformer.screenToWorld({ x: params.position.x, y: params.position.y }));
595
+ this._ref.setAttr("wcsRadiusX", this._worldTransformer.screenToWorld({ x: this._ref.x() + params.radius.x, y: this._ref.y() }));
596
+ this._ref.setAttr("wcsRadiusY", this._worldTransformer.screenToWorld({ x: this._ref.x(), y: this._ref.y() + params.radius.y }));
597
+ this._ref.on("transform", (e) => {
711
598
  const attrs = e.target.attrs;
712
- if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
713
- const scaleByX = Math.abs(attrs.scaleX - 1) > 1e-5;
714
- const scaleByY = Math.abs(attrs.scaleY - 1) > 1e-5;
599
+ if (attrs.rotation !== this._ref.rotation())
600
+ this._ref.rotation(attrs.rotation);
601
+ const scaleByX = Math.abs(attrs.scaleX - 1) > 10e-6;
602
+ const scaleByY = Math.abs(attrs.scaleY - 1) > 10e-6;
715
603
  let newRadiusX = this._ref.radiusX();
716
- if (scaleByX) newRadiusX *= attrs.scaleX;
604
+ if (scaleByX)
605
+ newRadiusX *= attrs.scaleX;
717
606
  let newRadiusY = this._ref.radiusY();
718
- if (scaleByY) newRadiusY *= attrs.scaleY;
607
+ if (scaleByY)
608
+ newRadiusY *= attrs.scaleY;
719
609
  const minRadiusX = 25;
720
610
  const minRadiusY = 25;
721
- if (newRadiusX < minRadiusX) newRadiusX = minRadiusX;
722
- if (newRadiusY < minRadiusY) newRadiusY = minRadiusY;
611
+ if (newRadiusX < minRadiusX)
612
+ newRadiusX = minRadiusX;
613
+ if (newRadiusY < minRadiusY)
614
+ newRadiusY = minRadiusY;
723
615
  if (e.evt.ctrlKey || e.evt.shiftKey) {
724
616
  if (scaleByX) {
725
- this._ref.radius({
726
- x: newRadiusX,
727
- y: newRadiusX
728
- });
729
- } else {
730
- this._ref.radius({
731
- x: newRadiusY,
732
- y: newRadiusY
733
- });
617
+ this._ref.radius({ x: newRadiusX, y: newRadiusX });
618
+ }
619
+ else {
620
+ this._ref.radius({ x: newRadiusY, y: newRadiusY });
734
621
  }
735
- } else {
736
- this._ref.radius({
737
- x: newRadiusX,
738
- y: newRadiusY
739
- });
740
622
  }
741
- this._ref.scale({
742
- x: 1,
743
- y: 1
744
- });
623
+ else {
624
+ this._ref.radius({ x: newRadiusX, y: newRadiusY });
625
+ }
626
+ this._ref.scale({ x: 1, y: 1 });
745
627
  });
746
628
  this._ref.on("transformend", () => {
747
629
  const absoluteTransform = this._ref.getStage().getAbsoluteTransform();
748
- const position = absoluteTransform.point({
749
- x: this._ref.x(),
750
- y: this._ref.y()
751
- });
630
+ const position = absoluteTransform.point({ x: this._ref.x(), y: this._ref.y() });
752
631
  this._ref.setAttr("wcsPosition", this._worldTransformer.screenToWorld(position));
753
- const radiusX = absoluteTransform.point({
754
- x: this._ref.x() + this._ref.radiusX(),
755
- y: this._ref.y()
756
- });
632
+ const radiusX = absoluteTransform.point({ x: this._ref.x() + this._ref.radiusX(), y: this._ref.y() });
757
633
  this._ref.setAttr("wcsRadiusX", this._worldTransformer.screenToWorld(radiusX));
758
- const radiusY = absoluteTransform.point({
759
- x: this._ref.x(),
760
- y: this._ref.y() + this._ref.radiusY()
761
- });
634
+ const radiusY = absoluteTransform.point({ x: this._ref.x(), y: this._ref.y() + this._ref.radiusY() });
762
635
  this._ref.setAttr("wcsRadiusY", this._worldTransformer.screenToWorld(radiusY));
763
636
  });
764
637
  this._ref.on("dragend", () => {
765
638
  const absoluteTransform = this._ref.getStage().getAbsoluteTransform();
766
- const position = absoluteTransform.point({
767
- x: this._ref.x(),
768
- y: this._ref.y()
769
- });
639
+ const position = absoluteTransform.point({ x: this._ref.x(), y: this._ref.y() });
770
640
  this._ref.setAttr("wcsPosition", this._worldTransformer.screenToWorld(position));
771
- const radiusX = absoluteTransform.point({
772
- x: this._ref.x() + this._ref.radiusX(),
773
- y: this._ref.y()
774
- });
641
+ const radiusX = absoluteTransform.point({ x: this._ref.x() + this._ref.radiusX(), y: this._ref.y() });
775
642
  this._ref.setAttr("wcsRadiusX", this._worldTransformer.screenToWorld(radiusX));
776
- const radiusY = absoluteTransform.point({
777
- x: this._ref.x(),
778
- y: this._ref.y() + this._ref.radiusY()
779
- });
643
+ const radiusY = absoluteTransform.point({ x: this._ref.x(), y: this._ref.y() + this._ref.radiusY() });
780
644
  this._ref.setAttr("wcsRadiusY", this._worldTransformer.screenToWorld(radiusY));
781
645
  });
782
646
  this._ref.id(this._ref._id.toString());
@@ -785,34 +649,22 @@ class KonvaEllipse {
785
649
  return this._ref.position();
786
650
  }
787
651
  setPosition(x, y) {
788
- this._ref.setPosition({
789
- x: x,
790
- y: y
791
- });
792
- this._ref.setAttr("wcsPosition", this._worldTransformer.screenToWorld({
793
- x: x,
794
- y: y
795
- }));
652
+ this._ref.setPosition({ x, y });
653
+ this._ref.setAttr("wcsPosition", this._worldTransformer.screenToWorld({ x, y }));
796
654
  }
797
655
  getRadiusX() {
798
656
  return this._ref.radiusX();
799
657
  }
800
658
  setRadiusX(r) {
801
659
  this._ref.radiusX(r);
802
- this._ref.setAttr("wcsRadiusX", this._worldTransformer.screenToWorld({
803
- x: this._ref.x() + r,
804
- y: this._ref.y()
805
- }));
660
+ this._ref.setAttr("wcsRadiusX", this._worldTransformer.screenToWorld({ x: this._ref.x() + r, y: this._ref.y() }));
806
661
  }
807
662
  getRadiusY() {
808
663
  return this._ref.radiusY();
809
664
  }
810
665
  setRadiusY(r) {
811
666
  this._ref.radiusY(r);
812
- this._ref.setAttr("wcsRadiusY", this._worldTransformer.screenToWorld({
813
- x: this._ref.x(),
814
- y: this._ref.y() + r
815
- }));
667
+ this._ref.setAttr("wcsRadiusY", this._worldTransformer.screenToWorld({ x: this._ref.x(), y: this._ref.y() + r }));
816
668
  }
817
669
  getLineWidth() {
818
670
  return this._ref.strokeWidth();
@@ -860,48 +712,35 @@ class KonvaEllipse {
860
712
  const radiusY = this._worldTransformer.worldToScreen(this._ref.getAttr("wcsRadiusY"));
861
713
  let invert = this._ref.getStage().getAbsoluteTransform().copy();
862
714
  invert = invert.invert();
863
- const position = invert.point({
864
- x: screenPosition.x,
865
- y: screenPosition.y
866
- });
867
- this._ref.position({
868
- x: position.x,
869
- y: position.y
870
- });
715
+ const position = invert.point({ x: screenPosition.x, y: screenPosition.y });
716
+ this._ref.position({ x: position.x, y: position.y });
871
717
  this._ref.radius({
872
718
  x: Math.abs(invert.point(radiusX).x - position.x),
873
- y: Math.abs(invert.point(radiusY).y - position.y)
719
+ y: Math.abs(invert.point(radiusY).y - position.y),
874
720
  });
875
721
  }
876
722
  }
877
723
 
878
724
  class KonvaArrow {
879
- constructor(params, ref = null, worldTransformer = new WorldTransform) {
725
+ constructor(params, ref = null, worldTransformer = new WorldTransform()) {
880
726
  var _a, _b;
881
727
  this._worldTransformer = worldTransformer;
882
728
  if (ref) {
883
729
  this._ref = ref;
884
730
  const wcsStart = this._ref.getAttr("wcsStart");
885
731
  const wcsEnd = this._ref.getAttr("wcsEnd");
886
- if (!wcsStart) this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({
887
- x: ref.points()[0],
888
- y: ref.points()[1]
889
- }));
890
- if (!wcsEnd) this._ref.setAttr("wcsEnd", this._worldTransformer.screenToWorld({
891
- x: ref.points()[2],
892
- y: ref.points()[3]
893
- }));
732
+ if (!wcsStart)
733
+ this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({ x: ref.points()[0], y: ref.points()[1] }));
734
+ if (!wcsEnd)
735
+ this._ref.setAttr("wcsEnd", this._worldTransformer.screenToWorld({ x: ref.points()[2], y: ref.points()[3] }));
894
736
  return;
895
737
  }
896
- if (!params) params = {};
897
- if (!params.start) params.start = {
898
- x: 0,
899
- y: 0
900
- };
901
- if (!params.end) params.end = {
902
- x: 100,
903
- y: 100
904
- };
738
+ if (!params)
739
+ params = {};
740
+ if (!params.start)
741
+ params.start = { x: 0, y: 0 };
742
+ if (!params.end)
743
+ params.end = { x: 100, y: 100 };
905
744
  this._ref = new Konva.Arrow({
906
745
  stroke: (_a = params.color) !== null && _a !== void 0 ? _a : "#ff0000",
907
746
  fill: (_b = params.color) !== null && _b !== void 0 ? _b : "#ff0000",
@@ -909,45 +748,28 @@ class KonvaArrow {
909
748
  globalCompositeOperation: "source-over",
910
749
  lineCap: "round",
911
750
  lineJoin: "round",
912
- points: [ params.start.x, params.start.y, params.end.x, params.end.y ],
751
+ points: [params.start.x, params.start.y, params.end.x, params.end.y],
913
752
  draggable: true,
914
- strokeScaleEnabled: false
753
+ strokeScaleEnabled: false,
915
754
  });
916
- this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({
917
- x: params.start.x,
918
- y: params.start.y
919
- }));
920
- this._ref.setAttr("wcsEnd", this._worldTransformer.screenToWorld({
921
- x: params.end.x,
922
- y: params.end.y
923
- }));
924
- this._ref.on("transformend", e => {
755
+ this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({ x: params.start.x, y: params.start.y }));
756
+ this._ref.setAttr("wcsEnd", this._worldTransformer.screenToWorld({ x: params.end.x, y: params.end.y }));
757
+ this._ref.on("transformend", (e) => {
925
758
  const attrs = e.target.attrs;
926
- if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
759
+ if (attrs.rotation !== this._ref.rotation())
760
+ this._ref.rotation(attrs.rotation);
927
761
  const points = this._ref.points();
928
762
  const absoluteTransform = this._ref.getAbsoluteTransform();
929
- const transformStart = absoluteTransform.point({
930
- x: points[0],
931
- y: points[1]
932
- });
933
- const transformEnd = absoluteTransform.point({
934
- x: points[2],
935
- y: points[3]
936
- });
763
+ const transformStart = absoluteTransform.point({ x: points[0], y: points[1] });
764
+ const transformEnd = absoluteTransform.point({ x: points[2], y: points[3] });
937
765
  this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld(transformStart));
938
766
  this._ref.setAttr("wcsEnd", this._worldTransformer.screenToWorld(transformEnd));
939
767
  });
940
- this._ref.on("dragend", e => {
768
+ this._ref.on("dragend", (e) => {
941
769
  const points = this._ref.points();
942
770
  const absoluteTransform = e.target.getAbsoluteTransform();
943
- const transformStart = absoluteTransform.point({
944
- x: points[0],
945
- y: points[1]
946
- });
947
- const transformEnd = absoluteTransform.point({
948
- x: points[2],
949
- y: points[3]
950
- });
771
+ const transformStart = absoluteTransform.point({ x: points[0], y: points[1] });
772
+ const transformEnd = absoluteTransform.point({ x: points[2], y: points[3] });
951
773
  this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld(transformStart));
952
774
  this._ref.setAttr("wcsEnd", this._worldTransformer.screenToWorld(transformEnd));
953
775
  });
@@ -990,133 +812,110 @@ class KonvaArrow {
990
812
  }
991
813
  getPoints() {
992
814
  const points = this._ref.points();
993
- return [ {
994
- x: points[0],
995
- y: points[1]
996
- }, {
997
- x: points[2],
998
- y: points[3]
999
- } ];
815
+ return [
816
+ { x: points[0], y: points[1] },
817
+ { x: points[2], y: points[3] },
818
+ ];
1000
819
  }
1001
820
  setPoints(points) {
1002
821
  if (points.length === 2) {
1003
- this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({
1004
- x: points[0].x,
1005
- y: points[0].y
1006
- }));
1007
- this._ref.setAttr("wcsEnd", this._worldTransformer.screenToWorld({
1008
- x: points[1].x,
1009
- y: points[1].y
1010
- }));
1011
- this._ref.points([ points[0].x, points[0].y, points[1].x, points[1].y ]);
822
+ this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({ x: points[0].x, y: points[0].y }));
823
+ this._ref.setAttr("wcsEnd", this._worldTransformer.screenToWorld({ x: points[1].x, y: points[1].y }));
824
+ this._ref.points([points[0].x, points[0].y, points[1].x, points[1].y]);
1012
825
  }
1013
826
  }
1014
827
  getStartPoint() {
1015
828
  const points = this._ref.points();
1016
- return {
1017
- x: points[0],
1018
- y: points[1]
1019
- };
829
+ return { x: points[0], y: points[1] };
1020
830
  }
1021
831
  setStartPoint(x, y) {
1022
832
  const points = this._ref.points();
1023
- this._ref.points([ x, y, points[2], points[3] ]);
1024
- this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({
1025
- x: x,
1026
- y: y
1027
- }));
833
+ this._ref.points([x, y, points[2], points[3]]);
834
+ this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({ x, y }));
1028
835
  }
1029
836
  getEndPoint() {
1030
837
  const points = this._ref.points();
1031
- return {
1032
- x: points[2],
1033
- y: points[3]
1034
- };
838
+ return { x: points[2], y: points[3] };
1035
839
  }
1036
840
  setEndPoint(x, y) {
1037
841
  const points = this._ref.points();
1038
- this._ref.points([ points[0], points[1], x, y ]);
1039
- this._ref.setAttr("wcsEnd", this._worldTransformer.screenToWorld({
1040
- x: x,
1041
- y: y
1042
- }));
842
+ this._ref.points([points[0], points[1], x, y]);
843
+ this._ref.setAttr("wcsEnd", this._worldTransformer.screenToWorld({ x, y }));
1043
844
  }
1044
845
  updateScreenCoordinates() {
1045
846
  const screenStartPoint = this._worldTransformer.worldToScreen(this._ref.getAttr("wcsStart"));
1046
847
  const screenEndPoint = this._worldTransformer.worldToScreen(this._ref.getAttr("wcsEnd"));
1047
848
  let invert = this._ref.getAbsoluteTransform().copy();
1048
849
  invert = invert.invert();
1049
- const startPoint = invert.point({
1050
- x: screenStartPoint.x,
1051
- y: screenStartPoint.y
1052
- });
1053
- const endPoint = invert.point({
1054
- x: screenEndPoint.x,
1055
- y: screenEndPoint.y
1056
- });
1057
- this._ref.points([ startPoint.x, startPoint.y, endPoint.x, endPoint.y ]);
850
+ const startPoint = invert.point({ x: screenStartPoint.x, y: screenStartPoint.y });
851
+ const endPoint = invert.point({ x: screenEndPoint.x, y: screenEndPoint.y });
852
+ this._ref.points([startPoint.x, startPoint.y, endPoint.x, endPoint.y]);
1058
853
  }
1059
854
  }
1060
855
 
1061
856
  class KonvaImage {
1062
- constructor(params, ref = null, worldTransformer = new WorldTransform) {
857
+ constructor(params, ref = null, worldTransformer = new WorldTransform()) {
1063
858
  var _a, _b;
1064
859
  this._ratio = 1;
1065
- this.EPSILON = 1e-5;
860
+ this.EPSILON = 10e-6;
1066
861
  this.BASE64_HEADER_START = "data:image/";
1067
862
  this.BASE64_NOT_FOUND = "data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAADsAAAA7AF5KHG9AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAmhJREFUWIXtlr9rVEEQxz+H8RQUJIdeIopYm0vkCg0GBBtbG1NF7Kxt7dR/IGIw/uhTaBNLERURg2kCEUyCYCPi70b0InjGS57FzOZN3r19d+9HJIVfWO52dma/s7Mz8xa2KAaBCWAR+AkECWOmSOIdwC1gtQOpHc+NfQ8wClQ8+1d0vcdH/lQ3bSIRGAZ2pTjAqNovANXIWlXlAXA2zvi2Ln4AjqYgtagYEutENSLvjRoOImFv5iB32Ae8UrLXwFBk3h9ndF0VJnKSO9gTu3yKu5Z1LKnS8YIcABgw5Ks692JZFXcXRJ46Aq6kikCnHNi/mQ50WwVtfaIoBzL3gRk2drSscJ2wrc4VvUoe2wn/41/iBfoVLRnBGnDSY3AAKacy8AmYR+o7K1zCl6wgrgpOAc/MuhvfgMuk+1JGHQgSBcAloKXy78AjYBppJk5/noTulseBMZ23iD/piHFkEdgTQzKk+5wHjmHC3cmBg0BD5xcSTrFXyQPgIWFtDwMvab+2N8DpbhyY1v/3E8gdDgNfVX9SCVZ0/gW4B0wB71S2BpxLcuCM/jaQSHSDEeAX4VMuAG4gTzyHbcAVXXO6GxxwIX+vvxe7JHcYQ07nHqklj96UIW/YhSWzMKcep8VVtf8B1Dw6h4DfhB+sdbgn2R+gnoEc5NR3dZ+3QJ9H74HqXLPCGlJyTfI9y3YCs0owq3OLOpKkLeBI1HhSDT/mdKIPiUCARMTlQx34TMLjtww8IczmO8AJ/N/2JNSQXAiQ671JePePge0+wzJSQq4FFzlaenIvucUAkiQLhC/mLGNZ9xgn5s63BP4CCk0QDtm4BhoAAAAASUVORK5CYII=";
1068
863
  this._worldTransformer = worldTransformer;
1069
864
  if (ref) {
1070
- if (!ref.src || !ref.src.startsWith(this.BASE64_HEADER_START)) ref.src = this.BASE64_NOT_FOUND;
1071
- if (ref.height() <= this.EPSILON) ref.height(32);
1072
- if (ref.width() <= this.EPSILON) ref.width(32);
865
+ if (!ref.src || !ref.src.startsWith(this.BASE64_HEADER_START))
866
+ ref.src = this.BASE64_NOT_FOUND;
867
+ if (ref.height() <= this.EPSILON)
868
+ ref.height(32);
869
+ if (ref.width() <= this.EPSILON)
870
+ ref.width(32);
1073
871
  this._ref = ref;
1074
872
  this._canvasImage = ref.image();
1075
- this._ratio = this._ref.height() <= this.EPSILON || this._ref.width() <= this.EPSILON ? 1 : this._ref.height() / this._ref.width();
873
+ this._ratio =
874
+ this._ref.height() <= this.EPSILON || this._ref.width() <= this.EPSILON
875
+ ? 1
876
+ : this._ref.height() / this._ref.width();
1076
877
  const wcsStart = this._ref.getAttr("wcsStart");
1077
878
  const wcsEnd = this._ref.getAttr("wcsEnd");
1078
879
  if (!wcsStart) {
1079
- this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({
1080
- x: ref.x(),
1081
- y: ref.y()
1082
- }));
880
+ this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({ x: ref.x(), y: ref.y() }));
1083
881
  }
1084
882
  if (!wcsEnd) {
1085
- const rightBottomPoint = {
1086
- x: ref.x() + ref.width(),
1087
- y: ref.y() + ref.height()
1088
- };
1089
- this._ref.setAttr("wcsEnd", this._worldTransformer.screenToWorld({
1090
- x: rightBottomPoint.x,
1091
- y: rightBottomPoint.y
1092
- }));
883
+ const rightBottomPoint = { x: ref.x() + ref.width(), y: ref.y() + ref.height() };
884
+ this._ref.setAttr("wcsEnd", this._worldTransformer.screenToWorld({ x: rightBottomPoint.x, y: rightBottomPoint.y }));
1093
885
  }
1094
886
  return;
1095
887
  }
1096
- if (!params) params = {};
1097
- if (!params.position) params.position = {
1098
- x: 0,
1099
- y: 0
1100
- };
1101
- if (!params.src || !params.src.startsWith(this.BASE64_HEADER_START)) params.src = this.BASE64_NOT_FOUND;
888
+ if (!params)
889
+ params = {};
890
+ if (!params.position)
891
+ params.position = { x: 0, y: 0 };
892
+ if (!params.src || !params.src.startsWith(this.BASE64_HEADER_START))
893
+ params.src = this.BASE64_NOT_FOUND;
1102
894
  if (params.position2) {
1103
895
  params.width = params.position2.x - params.position.x;
1104
896
  params.height = params.position2.y - params.position.y;
1105
897
  }
1106
- this._canvasImage = new Image;
898
+ this._canvasImage = new Image();
1107
899
  this._canvasImage.onload = () => {
1108
900
  this._ref.image(this._canvasImage);
1109
- if (this._ref.height() <= this.EPSILON) this._ref.height(this._canvasImage.height);
1110
- if (this._ref.width() <= this.EPSILON) this._ref.width(this._canvasImage.width);
1111
- this._ratio = this._ref.height() <= this.EPSILON || this._ref.width() <= this.EPSILON ? 1 : this._ref.height() / this._ref.width();
1112
- if ((params.width <= this.EPSILON || params.height <= this.EPSILON) && (params.maxWidth >= this.EPSILON || params.maxWidth >= this.EPSILON)) {
901
+ if (this._ref.height() <= this.EPSILON)
902
+ this._ref.height(this._canvasImage.height);
903
+ if (this._ref.width() <= this.EPSILON)
904
+ this._ref.width(this._canvasImage.width);
905
+ this._ratio =
906
+ this._ref.height() <= this.EPSILON || this._ref.width() <= this.EPSILON
907
+ ? 1
908
+ : this._ref.height() / this._ref.width();
909
+ if ((params.width <= this.EPSILON || params.height <= this.EPSILON) &&
910
+ (params.maxWidth >= this.EPSILON || params.maxWidth >= this.EPSILON)) {
1113
911
  const heightOutOfCanvas = params.maxHeight - this._canvasImage.height;
1114
912
  const widthOutOfCanvas = params.maxWidth - this._canvasImage.width;
1115
913
  if (heightOutOfCanvas <= this.EPSILON || widthOutOfCanvas <= this.EPSILON) {
1116
914
  if (widthOutOfCanvas <= this.EPSILON && widthOutOfCanvas < heightOutOfCanvas / this._ratio) {
1117
915
  this._ref.height(params.maxWidth * this._ratio);
1118
916
  this._ref.width(params.maxWidth);
1119
- } else {
917
+ }
918
+ else {
1120
919
  this._ref.width(params.maxHeight / this._ratio);
1121
920
  this._ref.height(params.maxHeight);
1122
921
  }
@@ -1124,12 +923,12 @@ class KonvaImage {
1124
923
  }
1125
924
  const wcsEnd = this._worldTransformer.screenToWorld({
1126
925
  x: params.position.x + this._ref.width(),
1127
- y: params.position.y + this._ref.height()
926
+ y: params.position.y + this._ref.height(),
1128
927
  });
1129
928
  this._ref.setAttr("wcsEnd", wcsEnd);
1130
929
  };
1131
930
  this._canvasImage.onerror = () => {
1132
- this._canvasImage.onerror = function() {};
931
+ this._canvasImage.onerror = function () { };
1133
932
  this._canvasImage.src = this.BASE64_NOT_FOUND;
1134
933
  };
1135
934
  this._canvasImage.src = params.src;
@@ -1139,30 +938,32 @@ class KonvaImage {
1139
938
  image: this._canvasImage,
1140
939
  width: (_a = params.width) !== null && _a !== void 0 ? _a : 0,
1141
940
  height: (_b = params.height) !== null && _b !== void 0 ? _b : 0,
1142
- draggable: true
941
+ draggable: true,
1143
942
  });
1144
- this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({
1145
- x: params.position.x,
1146
- y: params.position.y
1147
- }));
1148
- this._ref.on("transform", e => {
943
+ this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({ x: params.position.x, y: params.position.y }));
944
+ this._ref.on("transform", (e) => {
1149
945
  const attrs = e.target.attrs;
1150
- if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
1151
- const scaleByX = Math.abs(attrs.scaleX - 1) > 1e-5;
1152
- const scaleByY = Math.abs(attrs.scaleY - 1) > 1e-5;
946
+ if (attrs.rotation !== this._ref.rotation())
947
+ this._ref.rotation(attrs.rotation);
948
+ const scaleByX = Math.abs(attrs.scaleX - 1) > 10e-6;
949
+ const scaleByY = Math.abs(attrs.scaleY - 1) > 10e-6;
1153
950
  let newWidth = this._ref.width();
1154
- if (scaleByX) newWidth *= attrs.scaleX;
951
+ if (scaleByX)
952
+ newWidth *= attrs.scaleX;
1155
953
  let newHeight = this._ref.height();
1156
- if (scaleByY) newHeight *= attrs.scaleY;
954
+ if (scaleByY)
955
+ newHeight *= attrs.scaleY;
1157
956
  if (e.evt.ctrlKey || e.evt.shiftKey) {
1158
957
  if (scaleByX) {
1159
958
  this._ref.width(newWidth);
1160
959
  this._ref.height(newWidth * this._ratio);
1161
- } else {
960
+ }
961
+ else {
1162
962
  this._ref.width(newHeight / this._ratio);
1163
963
  this._ref.height(newHeight);
1164
964
  }
1165
- } else {
965
+ }
966
+ else {
1166
967
  if (scaleByX) {
1167
968
  this._ref.width(newWidth);
1168
969
  }
@@ -1170,34 +971,19 @@ class KonvaImage {
1170
971
  this._ref.height(newHeight);
1171
972
  }
1172
973
  }
1173
- this._ref.scale({
1174
- x: 1,
1175
- y: 1
1176
- });
974
+ this._ref.scale({ x: 1, y: 1 });
1177
975
  });
1178
976
  this._ref.on("transformend", () => {
1179
977
  const absoluteTransform = this._ref.getStage().getAbsoluteTransform();
1180
- const position = absoluteTransform.point({
1181
- x: this._ref.x(),
1182
- y: this._ref.y()
1183
- });
978
+ const position = absoluteTransform.point({ x: this._ref.x(), y: this._ref.y() });
1184
979
  this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld(position));
1185
- this._ref.setAttr("wcsEnd", this._worldTransformer.screenToWorld({
1186
- x: position.x + this._ref.width(),
1187
- y: position.y + this._ref.height()
1188
- }));
980
+ this._ref.setAttr("wcsEnd", this._worldTransformer.screenToWorld({ x: position.x + this._ref.width(), y: position.y + this._ref.height() }));
1189
981
  });
1190
982
  this._ref.on("dragend", () => {
1191
983
  const absoluteTransform = this._ref.getStage().getAbsoluteTransform();
1192
- const position = absoluteTransform.point({
1193
- x: this._ref.x(),
1194
- y: this._ref.y()
1195
- });
984
+ const position = absoluteTransform.point({ x: this._ref.x(), y: this._ref.y() });
1196
985
  this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld(position));
1197
- this._ref.setAttr("wcsEnd", this._worldTransformer.screenToWorld({
1198
- x: position.x + this._ref.width(),
1199
- y: position.y + this._ref.height()
1200
- }));
986
+ this._ref.setAttr("wcsEnd", this._worldTransformer.screenToWorld({ x: position.x + this._ref.width(), y: position.y + this._ref.height() }));
1201
987
  });
1202
988
  this._ref.id(this._ref._id.toString());
1203
989
  }
@@ -1213,10 +999,7 @@ class KonvaImage {
1213
999
  setWidth(w) {
1214
1000
  this._ref.width(w);
1215
1001
  this._ref.height(w * this._ratio);
1216
- const rightLowerPoint = {
1217
- x: this._ref.x() + w,
1218
- y: this._ref.y() + this._ref.height()
1219
- };
1002
+ const rightLowerPoint = { x: this._ref.x() + w, y: this._ref.y() + this._ref.height() };
1220
1003
  const wcsRightLowerPoint = this._worldTransformer.screenToWorld(rightLowerPoint);
1221
1004
  this._ref.setAttr("wcsEnd", wcsRightLowerPoint);
1222
1005
  }
@@ -1226,10 +1009,7 @@ class KonvaImage {
1226
1009
  setHeight(h) {
1227
1010
  this._ref.height(h);
1228
1011
  this._ref.width(h / this._ratio);
1229
- const rightLowerPoint = {
1230
- x: this._ref.x() + this._ref.width(),
1231
- y: this._ref.y() + h
1232
- };
1012
+ const rightLowerPoint = { x: this._ref.x() + this._ref.width(), y: this._ref.y() + h };
1233
1013
  const wcsRightLowerPoint = this._worldTransformer.screenToWorld(rightLowerPoint);
1234
1014
  this._ref.setAttr("wcsEnd", wcsRightLowerPoint);
1235
1015
  }
@@ -1265,18 +1045,9 @@ class KonvaImage {
1265
1045
  return this._ref.getPosition();
1266
1046
  }
1267
1047
  setPosition(x, y) {
1268
- this._ref.setPosition({
1269
- x: x,
1270
- y: y
1271
- });
1272
- this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({
1273
- x: x,
1274
- y: y
1275
- }));
1276
- const rightLowerPoint = {
1277
- x: x + this._ref.width(),
1278
- y: y + this._ref.y()
1279
- };
1048
+ this._ref.setPosition({ x, y });
1049
+ this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({ x, y }));
1050
+ const rightLowerPoint = { x: x + this._ref.width(), y: y + this._ref.y() };
1280
1051
  const wcsRightLowerPoint = this._worldTransformer.screenToWorld(rightLowerPoint);
1281
1052
  this._ref.setAttr("wcsEnd", wcsRightLowerPoint);
1282
1053
  }
@@ -1287,17 +1058,14 @@ class KonvaImage {
1287
1058
  invert = invert.invert();
1288
1059
  const positionStart = invert.point(screenPositionStart);
1289
1060
  const positionEnd = invert.point(screenPositionEnd);
1290
- this._ref.position({
1291
- x: positionStart.x,
1292
- y: positionStart.y
1293
- });
1061
+ this._ref.position({ x: positionStart.x, y: positionStart.y });
1294
1062
  this._ref.width(Math.abs(positionEnd.x - positionStart.x));
1295
1063
  this._ref.height(Math.abs(positionEnd.y - positionStart.y));
1296
1064
  }
1297
1065
  }
1298
1066
 
1299
1067
  class KonvaCloud {
1300
- constructor(params, ref = null, worldTransformer = new WorldTransform) {
1068
+ constructor(params, ref = null, worldTransformer = new WorldTransform()) {
1301
1069
  var _a, _b, _c, _d;
1302
1070
  this._worldTransformer = worldTransformer;
1303
1071
  if (ref) {
@@ -1305,44 +1073,30 @@ class KonvaCloud {
1305
1073
  const wcsStart = this._ref.getAttr("wcsStart");
1306
1074
  const wcsEnd = this._ref.getAttr("wcsEnd");
1307
1075
  if (!wcsStart) {
1308
- this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({
1309
- x: ref.x(),
1310
- y: ref.y()
1311
- }));
1076
+ this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({ x: ref.x(), y: ref.y() }));
1312
1077
  }
1313
1078
  if (!wcsEnd) {
1314
- const rightBottomPoint = {
1315
- x: ref.x() + ref.width(),
1316
- y: ref.y() + ref.height()
1317
- };
1318
- this._ref.setAttr("wcsEnd", this._worldTransformer.screenToWorld({
1319
- x: rightBottomPoint.x,
1320
- y: rightBottomPoint.y
1321
- }));
1079
+ const rightBottomPoint = { x: ref.x() + ref.width(), y: ref.y() + ref.height() };
1080
+ this._ref.setAttr("wcsEnd", this._worldTransformer.screenToWorld({ x: rightBottomPoint.x, y: rightBottomPoint.y }));
1322
1081
  }
1323
1082
  return;
1324
1083
  }
1325
- if (!params) params = {};
1326
- if (!params.position) params.position = {
1327
- x: 0,
1328
- y: 0
1329
- };
1084
+ if (!params)
1085
+ params = {};
1086
+ if (!params.position)
1087
+ params.position = { x: 0, y: 0 };
1330
1088
  if (params.position2) {
1331
1089
  params.width = params.position2.x - params.position.x;
1332
1090
  params.height = params.position2.y - params.position.y;
1333
- } else {
1091
+ }
1092
+ else {
1334
1093
  if (!params.width || !params.height) {
1335
- params.position2 = {
1336
- x: 200,
1337
- y: 200
1338
- };
1094
+ params.position2 = { x: 200, y: 200 };
1339
1095
  params.width = 200;
1340
1096
  params.height = 200;
1341
- } else {
1342
- params.position2 = {
1343
- x: params.position.x + params.width,
1344
- y: params.position.y + params.height
1345
- };
1097
+ }
1098
+ else {
1099
+ params.position2 = { x: params.position.x + params.width, y: params.position.y + params.height };
1346
1100
  }
1347
1101
  }
1348
1102
  const ARC_RADIUS = 8;
@@ -1362,36 +1116,26 @@ class KonvaCloud {
1362
1116
  sceneFunc: (context, shape) => {
1363
1117
  const width = this._ref.width();
1364
1118
  const height = this._ref.height();
1365
- const points = [ {
1366
- x: 0,
1367
- y: 0
1368
- }, {
1369
- x: 0 + width,
1370
- y: 0
1371
- }, {
1372
- x: 0 + width,
1373
- y: 0 + height
1374
- }, {
1375
- x: 0,
1376
- y: 0 + height
1377
- }, {
1378
- x: 0,
1379
- y: 0
1380
- } ];
1381
- if (width >= MIN_CLOUD_WIDTH - 1 || height >= MIN_CLOUD_HEIGHT - 1) drawCloud(ARC_RADIUS, ARC_LENGTH); else if (width >= MIN_CLOUD_WIDTH / 2 || height >= MIN_CLOUD_HEIGHT / 2) drawCloud(ARC_RADIUS / 2, ARC_LENGTH / 2); else drawRectangle();
1119
+ const points = [
1120
+ { x: 0, y: 0 },
1121
+ { x: 0 + width, y: 0 },
1122
+ { x: 0 + width, y: 0 + height },
1123
+ { x: 0, y: 0 + height },
1124
+ { x: 0, y: 0 },
1125
+ ];
1126
+ if (width >= MIN_CLOUD_WIDTH - 1 || height >= MIN_CLOUD_HEIGHT - 1)
1127
+ drawCloud(ARC_RADIUS, ARC_LENGTH);
1128
+ else if (width >= MIN_CLOUD_WIDTH / 2 || height >= MIN_CLOUD_HEIGHT / 2)
1129
+ drawCloud(ARC_RADIUS / 2, ARC_LENGTH / 2);
1130
+ else
1131
+ drawRectangle();
1382
1132
  function calculateMidpoint(position) {
1383
1133
  const midX = position.x + width / 2;
1384
1134
  const midY = position.y + height / 2;
1385
- return {
1386
- x: midX,
1387
- y: midY
1388
- };
1135
+ return { x: midX, y: midY };
1389
1136
  }
1390
1137
  function drawCloud(arcRadius, arcLength) {
1391
- const midPoint = calculateMidpoint({
1392
- x: 0,
1393
- y: 0
1394
- });
1138
+ const midPoint = calculateMidpoint({ x: 0, y: 0 });
1395
1139
  context.beginPath();
1396
1140
  for (let iPoint = 0; iPoint < points.length - 1; iPoint++) {
1397
1141
  let approxArcLength = arcLength;
@@ -1411,7 +1155,8 @@ class KonvaCloud {
1411
1155
  for (let iArc = 0; iArc < arcCount; iArc++) {
1412
1156
  if (counterClockwise) {
1413
1157
  context.arc(pX, pY, arcRadius, endAngle, startAngle);
1414
- } else {
1158
+ }
1159
+ else {
1415
1160
  context.arc(pX, pY, arcRadius, startAngle, endAngle);
1416
1161
  }
1417
1162
  pX += dx / arcCount;
@@ -1430,70 +1175,56 @@ class KonvaCloud {
1430
1175
  context.closePath();
1431
1176
  context.fillStrokeShape(shape);
1432
1177
  }
1433
- }
1178
+ },
1434
1179
  });
1435
1180
  this._ref.className = "Cloud";
1436
- this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({
1437
- x: params.position.x,
1438
- y: params.position.y
1439
- }));
1440
- this._ref.setAttr("wcsEnd", this._worldTransformer.screenToWorld({
1441
- x: params.position2.x,
1442
- y: params.position2.y
1443
- }));
1444
- this._ref.on("transform", e => {
1181
+ this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({ x: params.position.x, y: params.position.y }));
1182
+ this._ref.setAttr("wcsEnd", this._worldTransformer.screenToWorld({ x: params.position2.x, y: params.position2.y }));
1183
+ this._ref.on("transform", (e) => {
1445
1184
  const attrs = e.target.attrs;
1446
- const scaleByX = Math.abs(attrs.scaleX - 1) > 1e-5;
1447
- const scaleByY = Math.abs(attrs.scaleY - 1) > 1e-5;
1185
+ const scaleByX = Math.abs(attrs.scaleX - 1) > 10e-6;
1186
+ const scaleByY = Math.abs(attrs.scaleY - 1) > 10e-6;
1448
1187
  let newWidth = this._ref.width();
1449
- if (scaleByX) newWidth *= attrs.scaleX;
1188
+ if (scaleByX)
1189
+ newWidth *= attrs.scaleX;
1450
1190
  let newHeight = this._ref.height();
1451
- if (scaleByY) newHeight *= attrs.scaleY;
1452
- if (newWidth < MIN_CLOUD_WIDTH) newWidth = MIN_CLOUD_WIDTH;
1453
- if (newHeight < MIN_CLOUD_HEIGHT) newHeight = MIN_CLOUD_HEIGHT;
1191
+ if (scaleByY)
1192
+ newHeight *= attrs.scaleY;
1193
+ if (newWidth < MIN_CLOUD_WIDTH)
1194
+ newWidth = MIN_CLOUD_WIDTH;
1195
+ if (newHeight < MIN_CLOUD_HEIGHT)
1196
+ newHeight = MIN_CLOUD_HEIGHT;
1454
1197
  if (scaleByX) {
1455
1198
  this._ref.width(newWidth);
1456
1199
  }
1457
1200
  if (scaleByY) {
1458
1201
  this._ref.height(newHeight);
1459
1202
  }
1460
- this._ref.scale({
1461
- x: 1,
1462
- y: 1
1463
- });
1203
+ this._ref.scale({ x: 1, y: 1 });
1464
1204
  });
1465
- this._ref.on("transformend", e => {
1205
+ this._ref.on("transformend", (e) => {
1466
1206
  const attrs = e.target.attrs;
1467
- if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
1207
+ if (attrs.rotation !== this._ref.rotation())
1208
+ this._ref.rotation(attrs.rotation);
1468
1209
  const absoluteTransform = this._ref.getStage().getAbsoluteTransform();
1469
- const position = absoluteTransform.point({
1470
- x: this._ref.x(),
1471
- y: this._ref.y()
1472
- });
1210
+ const position = absoluteTransform.point({ x: this._ref.x(), y: this._ref.y() });
1473
1211
  this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld(position));
1474
- this._ref.setAttr("wcsEnd", this._worldTransformer.screenToWorld({
1475
- x: position.x + this._ref.width(),
1476
- y: position.y + this._ref.height()
1477
- }));
1212
+ this._ref.setAttr("wcsEnd", this._worldTransformer.screenToWorld({ x: position.x + this._ref.width(), y: position.y + this._ref.height() }));
1478
1213
  });
1479
1214
  this._ref.on("dragend", () => {
1480
1215
  const absoluteTransform = this._ref.getStage().getAbsoluteTransform();
1481
- const position = absoluteTransform.point({
1482
- x: this._ref.x(),
1483
- y: this._ref.y()
1484
- });
1216
+ const position = absoluteTransform.point({ x: this._ref.x(), y: this._ref.y() });
1485
1217
  this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld(position));
1486
- this._ref.setAttr("wcsEnd", this._worldTransformer.screenToWorld({
1487
- x: position.x + this._ref.width(),
1488
- y: position.y + this._ref.height()
1489
- }));
1490
- });
1491
- this._ref.getSelfRect = () => ({
1492
- x: 0 - ARC_RADIUS,
1493
- y: 0 - ARC_RADIUS,
1494
- width: this._ref.width() + 2 * ARC_RADIUS,
1495
- height: this._ref.height() + 2 * ARC_RADIUS
1496
- });
1218
+ this._ref.setAttr("wcsEnd", this._worldTransformer.screenToWorld({ x: position.x + this._ref.width(), y: position.y + this._ref.height() }));
1219
+ });
1220
+ this._ref.getSelfRect = () => {
1221
+ return {
1222
+ x: 0 - ARC_RADIUS,
1223
+ y: 0 - ARC_RADIUS,
1224
+ width: this._ref.width() + 2 * ARC_RADIUS,
1225
+ height: this._ref.height() + 2 * ARC_RADIUS,
1226
+ };
1227
+ };
1497
1228
  this._ref.id(this._ref._id.toString());
1498
1229
  }
1499
1230
  ref() {
@@ -1534,18 +1265,9 @@ class KonvaCloud {
1534
1265
  return this._ref.position();
1535
1266
  }
1536
1267
  setPosition(x, y) {
1537
- this._ref.position({
1538
- x: x,
1539
- y: y
1540
- });
1541
- this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({
1542
- x: x,
1543
- y: y
1544
- }));
1545
- const rightLowerPoint = {
1546
- x: x + this._ref.width(),
1547
- y: y + this._ref.y()
1548
- };
1268
+ this._ref.position({ x, y });
1269
+ this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({ x, y }));
1270
+ const rightLowerPoint = { x: x + this._ref.width(), y: y + this._ref.y() };
1549
1271
  const wcsRightLowerPoint = this._worldTransformer.screenToWorld(rightLowerPoint);
1550
1272
  this._ref.setAttr("wcsEnd", wcsRightLowerPoint);
1551
1273
  }
@@ -1554,10 +1276,7 @@ class KonvaCloud {
1554
1276
  }
1555
1277
  setWidth(w) {
1556
1278
  this._ref.width(w);
1557
- const rightLowerPoint = {
1558
- x: this._ref.x() + w,
1559
- y: this._ref.y() + this._ref.height()
1560
- };
1279
+ const rightLowerPoint = { x: this._ref.x() + w, y: this._ref.y() + this._ref.height() };
1561
1280
  const wcsRightLowerPoint = this._worldTransformer.screenToWorld(rightLowerPoint);
1562
1281
  this._ref.setAttr("wcsEnd", wcsRightLowerPoint);
1563
1282
  }
@@ -1566,10 +1285,7 @@ class KonvaCloud {
1566
1285
  }
1567
1286
  setHeight(h) {
1568
1287
  this._ref.height(h);
1569
- const rightLowerPoint = {
1570
- x: this._ref.x() + this._ref.width(),
1571
- y: this._ref.y() + h
1572
- };
1288
+ const rightLowerPoint = { x: this._ref.x() + this._ref.width(), y: this._ref.y() + h };
1573
1289
  const wcsRightLowerPoint = this._worldTransformer.screenToWorld(rightLowerPoint);
1574
1290
  this._ref.setAttr("wcsEnd", wcsRightLowerPoint);
1575
1291
  }
@@ -1586,10 +1302,7 @@ class KonvaCloud {
1586
1302
  invert = invert.invert();
1587
1303
  const positionStart = invert.point(screenPositionStart);
1588
1304
  const positionEnd = invert.point(screenPositionEnd);
1589
- this._ref.position({
1590
- x: positionStart.x,
1591
- y: positionStart.y
1592
- });
1305
+ this._ref.position({ x: positionStart.x, y: positionStart.y });
1593
1306
  this._ref.width(Math.abs(positionEnd.x - positionStart.x));
1594
1307
  this._ref.height(Math.abs(positionEnd.y - positionStart.y));
1595
1308
  }
@@ -1598,38 +1311,37 @@ class KonvaCloud {
1598
1311
  const MarkupMode2Konva = {
1599
1312
  SelectMarkup: {
1600
1313
  name: "SelectMarkup",
1601
- initializer: null
1314
+ initializer: null,
1602
1315
  },
1603
1316
  Line: {
1604
1317
  name: "Line",
1605
- initializer: (ref, params = null, ...attr) => new KonvaLine(params, ref, ...attr)
1318
+ initializer: (ref, params = null, ...attr) => new KonvaLine(params, ref, ...attr),
1606
1319
  },
1607
1320
  Text: {
1608
1321
  name: "Text",
1609
- initializer: (ref, params = null, ...attr) => new KonvaText(params, ref, ...attr)
1322
+ initializer: (ref, params = null, ...attr) => new KonvaText(params, ref, ...attr),
1610
1323
  },
1611
1324
  Rectangle: {
1612
1325
  name: "Rect",
1613
- initializer: (ref, params = null, ...attr) => new KonvaRectangle(params, ref, ...attr)
1326
+ initializer: (ref, params = null, ...attr) => new KonvaRectangle(params, ref, ...attr),
1614
1327
  },
1615
1328
  Ellipse: {
1616
1329
  name: "Ellipse",
1617
- initializer: (ref, params = null, ...attr) => new KonvaEllipse(params, ref, ...attr)
1330
+ initializer: (ref, params = null, ...attr) => new KonvaEllipse(params, ref, ...attr),
1618
1331
  },
1619
1332
  Arrow: {
1620
1333
  name: "Arrow",
1621
- initializer: (ref, params = null, ...attr) => new KonvaArrow(params, ref, ...attr)
1334
+ initializer: (ref, params = null, ...attr) => new KonvaArrow(params, ref, ...attr),
1622
1335
  },
1623
1336
  Image: {
1624
1337
  name: "Image",
1625
- initializer: (ref, params = null, ...attr) => new KonvaImage(params, ref, ...attr)
1338
+ initializer: (ref, params = null, ...attr) => new KonvaImage(params, ref, ...attr),
1626
1339
  },
1627
1340
  Cloud: {
1628
1341
  name: "Cloud",
1629
- initializer: (ref, params = null, ...attr) => new KonvaCloud(params, ref, ...attr)
1630
- }
1342
+ initializer: (ref, params = null, ...attr) => new KonvaCloud(params, ref, ...attr),
1343
+ },
1631
1344
  };
1632
-
1633
1345
  function debounce(func, wait) {
1634
1346
  let timeout = null;
1635
1347
  return (...args) => {
@@ -1642,7 +1354,6 @@ function debounce(func, wait) {
1642
1354
  }, wait);
1643
1355
  };
1644
1356
  }
1645
-
1646
1357
  class KonvaMarkup {
1647
1358
  constructor() {
1648
1359
  this._markupIsActive = false;
@@ -1650,58 +1361,72 @@ class KonvaMarkup {
1650
1361
  this.lineWidth = 4;
1651
1362
  this.lineType = "solid";
1652
1363
  this.fontSize = 34;
1653
- this.changeActiveDragger = event => {
1364
+ this.changeActiveDragger = (event) => {
1654
1365
  const draggerName = event.data;
1655
- this._markupContainer.className = this._container.className.split(" ").filter(x => !x.startsWith("oda-cursor-")).filter(x => x).concat(`oda-cursor-${draggerName.toLowerCase()}`).join(" ");
1366
+ this._markupContainer.className = this._container.className
1367
+ .split(" ")
1368
+ .filter((x) => !x.startsWith("oda-cursor-"))
1369
+ .filter((x) => x)
1370
+ .concat(`oda-cursor-${draggerName.toLowerCase()}`)
1371
+ .join(" ");
1656
1372
  this.removeTextInput();
1657
1373
  this.removeImageInput();
1658
1374
  this.enableEditMode(draggerName);
1659
1375
  };
1660
- this.resizeContainer = entries => {
1661
- if (!entries || !entries[0] || !entries[0].contentRect) return;
1662
- const {width: width, height: height} = entries[0].contentRect;
1663
- if (!width || !height) return;
1664
- if (!this._konvaStage) return;
1376
+ this.resizeContainer = (entries) => {
1377
+ if (!entries || !entries[0] || !entries[0].contentRect)
1378
+ return;
1379
+ const { width, height } = entries[0].contentRect;
1380
+ if (!width || !height)
1381
+ return;
1382
+ if (!this._konvaStage)
1383
+ return;
1665
1384
  this._konvaStage.width(width);
1666
1385
  this._konvaStage.height(height);
1667
- this.getObjects().forEach(markupObject => {
1386
+ this.getObjects().forEach((markupObject) => {
1668
1387
  markupObject.updateScreenCoordinates();
1669
1388
  });
1670
1389
  };
1671
- this.resizeViewer = event => {
1672
- const {width: width, height: height} = event;
1673
- if (!width || !height) return;
1674
- if (!this._konvaStage) return;
1390
+ this.resizeViewer = (event) => {
1391
+ const { width, height } = event;
1392
+ if (!width || !height)
1393
+ return;
1394
+ if (!this._konvaStage)
1395
+ return;
1675
1396
  this._konvaStage.width(width);
1676
1397
  this._konvaStage.height(height);
1677
- this.getObjects().forEach(markupObject => {
1398
+ this.getObjects().forEach((markupObject) => {
1678
1399
  markupObject.updateScreenCoordinates();
1679
1400
  });
1680
1401
  };
1681
1402
  this.pan = () => {
1682
- this.getObjects().forEach(markupObject => {
1403
+ this.getObjects().forEach((markupObject) => {
1683
1404
  markupObject.updateScreenCoordinates();
1684
1405
  });
1685
1406
  };
1686
1407
  this.zoomAt = () => {
1687
- this.getObjects().forEach(markupObject => {
1408
+ this.getObjects().forEach((markupObject) => {
1688
1409
  markupObject.updateScreenCoordinates();
1689
1410
  });
1690
1411
  };
1691
- this.redirectToViewer = event => {
1692
- if (this._viewer) this._viewer.emit(event);
1412
+ this.redirectToViewer = (event) => {
1413
+ if (this._viewer)
1414
+ this._viewer.emit(event);
1693
1415
  };
1694
1416
  this.getRelativePointPosition = (point, node) => {
1695
1417
  const transform = node.getAbsoluteTransform().copy();
1696
1418
  transform.invert();
1697
1419
  return transform.point(point);
1698
1420
  };
1699
- this.getRelativePointerPosition = node => this.getRelativePointPosition(node.getStage().getPointerPosition(), node);
1421
+ this.getRelativePointerPosition = (node) => {
1422
+ return this.getRelativePointPosition(node.getStage().getPointerPosition(), node);
1423
+ };
1700
1424
  }
1701
1425
  initialize(container, containerEvents, viewer, worldTransformer) {
1702
- if (!Konva) throw new Error('Markup error: Konva is not initialized. Forgot to add <script src="https://unpkg.com/konva@9/konva.min.js"><\/script> to your page?');
1426
+ if (!Konva)
1427
+ throw new Error('Markup error: Konva is not initialized. Forgot to add <script src="https://unpkg.com/konva@9/konva.min.js"></script> to your page?');
1703
1428
  this._viewer = viewer;
1704
- this._worldTransformer = worldTransformer !== null && worldTransformer !== void 0 ? worldTransformer : new WorldTransform;
1429
+ this._worldTransformer = worldTransformer !== null && worldTransformer !== void 0 ? worldTransformer : new WorldTransform();
1705
1430
  this._container = container;
1706
1431
  this._markupContainer = document.createElement("div");
1707
1432
  this._markupContainer.id = "markup-container";
@@ -1712,7 +1437,10 @@ class KonvaMarkup {
1712
1437
  this._markupContainer.style.pointerEvents = "none";
1713
1438
  const parentDiv = this._container.parentElement;
1714
1439
  parentDiv.appendChild(this._markupContainer);
1715
- if (viewer) this._viewer.addEventListener("resize", this.resizeViewer); else this._resizeObserver = new ResizeObserver(debounce(this.resizeContainer, 100));
1440
+ if (viewer)
1441
+ this._viewer.addEventListener("resize", this.resizeViewer);
1442
+ else
1443
+ this._resizeObserver = new ResizeObserver(debounce(this.resizeContainer, 100));
1716
1444
  this._markupColor.setColor(255, 0, 0);
1717
1445
  this.initializeKonva();
1718
1446
  if (this._viewer) {
@@ -1738,103 +1466,81 @@ class KonvaMarkup {
1738
1466
  this._worldTransformer = undefined;
1739
1467
  this._markupIsActive = false;
1740
1468
  }
1741
- syncOverlay() {}
1469
+ syncOverlay() { }
1742
1470
  clearOverlay() {
1743
1471
  this.removeTextInput();
1744
1472
  this.removeImageInput();
1745
1473
  this.clearSelected();
1746
- this.getObjects().forEach(obj => obj.delete());
1474
+ this.getObjects().forEach((obj) => obj.delete());
1747
1475
  }
1748
1476
  getMarkupColor() {
1749
1477
  return this._markupColor.asRGB();
1750
1478
  }
1751
1479
  setMarkupColor(r, g, b) {
1752
1480
  this._markupColor.setColor(r, g, b);
1753
- this.redirectToViewer({
1754
- type: "changemarkupcolor",
1755
- data: {
1756
- r: r,
1757
- g: g,
1758
- b: b
1759
- }
1760
- });
1481
+ this.redirectToViewer({ type: "changemarkupcolor", data: { r, g, b } });
1761
1482
  }
1762
1483
  colorizeAllMarkup(r, g, b) {
1763
1484
  this.setMarkupColor(r, g, b);
1764
1485
  const hexColor = new MarkupColor(r, g, b).asHex();
1765
- this.getObjects().filter(obj => {
1766
- var _a;
1767
- return (_a = obj.setColor) === null || _a === void 0 ? void 0 : _a.call(obj, hexColor);
1768
- });
1486
+ this.getObjects().filter((obj) => { var _a; return (_a = obj.setColor) === null || _a === void 0 ? void 0 : _a.call(obj, hexColor); });
1769
1487
  }
1770
1488
  colorizeSelectedMarkups(r, g, b) {
1771
1489
  const hexColor = new MarkupColor(r, g, b).asHex();
1772
- this.getSelectedObjects().filter(obj => {
1773
- var _a;
1774
- return (_a = obj.setColor) === null || _a === void 0 ? void 0 : _a.call(obj, hexColor);
1775
- });
1490
+ this.getSelectedObjects().filter((obj) => { var _a; return (_a = obj.setColor) === null || _a === void 0 ? void 0 : _a.call(obj, hexColor); });
1776
1491
  }
1777
1492
  setViewpoint(viewpoint) {
1778
1493
  var _a, _b, _c, _d, _e, _f, _g, _h;
1779
1494
  this.clearSelected();
1780
1495
  this.removeTextInput();
1781
1496
  this.removeImageInput();
1782
- this._konvaStage.scale({
1783
- x: 1,
1784
- y: 1
1785
- });
1786
- this._konvaStage.position({
1787
- x: 0,
1788
- y: 0
1789
- });
1790
- const markupColor = ((_a = viewpoint.custom_fields) === null || _a === void 0 ? void 0 : _a.markup_color) || {
1791
- r: 255,
1792
- g: 0,
1793
- b: 0
1794
- };
1497
+ this._konvaStage.scale({ x: 1, y: 1 });
1498
+ this._konvaStage.position({ x: 0, y: 0 });
1499
+ const markupColor = ((_a = viewpoint.custom_fields) === null || _a === void 0 ? void 0 : _a.markup_color) || { r: 255, g: 0, b: 0 };
1795
1500
  this.setMarkupColor(markupColor.r, markupColor.g, markupColor.b);
1796
- (_b = viewpoint.lines) === null || _b === void 0 ? void 0 : _b.forEach(line => {
1501
+ (_b = viewpoint.lines) === null || _b === void 0 ? void 0 : _b.forEach((line) => {
1797
1502
  const linePoints = [];
1798
- line.points.forEach(point => {
1503
+ line.points.forEach((point) => {
1799
1504
  const screenPoint = this._worldTransformer.worldToScreen(point);
1800
1505
  linePoints.push(screenPoint.x);
1801
1506
  linePoints.push(screenPoint.y);
1802
1507
  });
1803
1508
  this.addLine(linePoints, line.color, line.type, line.width, line.id);
1804
1509
  });
1805
- (_c = viewpoint.texts) === null || _c === void 0 ? void 0 : _c.forEach(text => {
1510
+ (_c = viewpoint.texts) === null || _c === void 0 ? void 0 : _c.forEach((text) => {
1806
1511
  const screenPoint = this._worldTransformer.worldToScreen(text.position);
1807
1512
  this.addText(text.text, screenPoint, text.angle, text.color, text.text_size, text.font_size, text.id);
1808
1513
  });
1809
- (_d = viewpoint.rectangles) === null || _d === void 0 ? void 0 : _d.forEach(rect => {
1514
+ (_d = viewpoint.rectangles) === null || _d === void 0 ? void 0 : _d.forEach((rect) => {
1810
1515
  const screenPoint = this._worldTransformer.worldToScreen(rect.position);
1811
1516
  const screenPoint2 = rect.position2 ? this._worldTransformer.worldToScreen(rect.position2) : null;
1812
1517
  this.addRectangle(screenPoint, screenPoint2, rect.width, rect.height, rect.line_width, rect.color, rect.id);
1813
1518
  });
1814
- (_e = viewpoint.ellipses) === null || _e === void 0 ? void 0 : _e.forEach(ellipse => {
1519
+ (_e = viewpoint.ellipses) === null || _e === void 0 ? void 0 : _e.forEach((ellipse) => {
1815
1520
  const screenPoint = this._worldTransformer.worldToScreen(ellipse.position);
1816
1521
  const screenPoint2 = ellipse.position2 ? this._worldTransformer.worldToScreen(ellipse.position2) : null;
1817
1522
  const screenPoint3 = ellipse.position3 ? this._worldTransformer.worldToScreen(ellipse.position3) : null;
1818
1523
  this.addEllipse(screenPoint, screenPoint2, screenPoint3, ellipse.radius, ellipse.line_width, ellipse.color, ellipse.id);
1819
1524
  });
1820
- (_f = viewpoint.arrows) === null || _f === void 0 ? void 0 : _f.forEach(arrow => {
1525
+ (_f = viewpoint.arrows) === null || _f === void 0 ? void 0 : _f.forEach((arrow) => {
1821
1526
  const startPoint = this._worldTransformer.worldToScreen(arrow.start);
1822
1527
  const endPoint = this._worldTransformer.worldToScreen(arrow.end);
1823
1528
  this.addArrow(startPoint, endPoint, arrow.color, arrow.id);
1824
1529
  });
1825
- (_g = viewpoint.clouds) === null || _g === void 0 ? void 0 : _g.forEach(cloud => {
1530
+ (_g = viewpoint.clouds) === null || _g === void 0 ? void 0 : _g.forEach((cloud) => {
1826
1531
  const screenPoint = this._worldTransformer.worldToScreen(cloud.position);
1827
1532
  const screenPoint2 = cloud.position2 ? this._worldTransformer.worldToScreen(cloud.position2) : null;
1828
1533
  this.addCloud(screenPoint, screenPoint2, cloud.width, cloud.height, cloud.line_width, cloud.color, cloud.id);
1829
1534
  });
1830
- (_h = viewpoint.images) === null || _h === void 0 ? void 0 : _h.forEach(image => {
1535
+ (_h = viewpoint.images) === null || _h === void 0 ? void 0 : _h.forEach((image) => {
1831
1536
  const screenPoint = this._worldTransformer.worldToScreen(image.position);
1832
1537
  const screenPoint2 = image.position2 ? this._worldTransformer.worldToScreen(image.position2) : null;
1833
1538
  this.addImage(screenPoint, screenPoint2, image.src, image.width, image.height, image.id);
1834
1539
  });
1835
1540
  }
1836
1541
  getViewpoint(viewpoint) {
1837
- if (!viewpoint) viewpoint = {};
1542
+ if (!viewpoint)
1543
+ viewpoint = {};
1838
1544
  viewpoint.lines = this.getMarkupLines();
1839
1545
  viewpoint.texts = this.getMarkupTexts();
1840
1546
  viewpoint.arrows = this.getMarkupArrows();
@@ -1842,12 +1548,8 @@ class KonvaMarkup {
1842
1548
  viewpoint.ellipses = this.getMarkupEllipses();
1843
1549
  viewpoint.images = this.getMarkupImages();
1844
1550
  viewpoint.rectangles = this.getMarkupRectangles();
1845
- viewpoint.custom_fields = {
1846
- markup_color: this.getMarkupColor()
1847
- };
1848
- viewpoint.snapshot = {
1849
- data: this.combineMarkupWithDrawing()
1850
- };
1551
+ viewpoint.custom_fields = { markup_color: this.getMarkupColor() };
1552
+ viewpoint.snapshot = { data: this.combineMarkupWithDrawing() };
1851
1553
  return viewpoint;
1852
1554
  }
1853
1555
  enableEditMode(mode) {
@@ -1857,7 +1559,8 @@ class KonvaMarkup {
1857
1559
  this.removeImageInput();
1858
1560
  this._markupContainer.style.pointerEvents = "none";
1859
1561
  this._markupIsActive = false;
1860
- } else {
1562
+ }
1563
+ else {
1861
1564
  this._markupMode = mode;
1862
1565
  this._markupContainer.style.pointerEvents = "all";
1863
1566
  this._markupIsActive = true;
@@ -1866,66 +1569,83 @@ class KonvaMarkup {
1866
1569
  }
1867
1570
  createObject(type, params) {
1868
1571
  const konvaShape = MarkupMode2Konva[type];
1869
- if (!konvaShape || !konvaShape.initializer) throw new Error(`Markup CreateObject - unsupported markup type ${type}`);
1572
+ if (!konvaShape || !konvaShape.initializer)
1573
+ throw new Error(`Markup CreateObject - unsupported markup type ${type}`);
1870
1574
  const object = konvaShape.initializer(null, params, this._worldTransformer);
1871
1575
  this.addObject(object);
1872
1576
  return object;
1873
1577
  }
1874
1578
  getObjects() {
1875
1579
  const objects = [];
1876
- Object.keys(MarkupMode2Konva).forEach(type => {
1580
+ Object.keys(MarkupMode2Konva).forEach((type) => {
1877
1581
  const konvaShape = MarkupMode2Konva[type];
1878
- this.konvaLayerFind(type).forEach(ref => objects.push(konvaShape.initializer(ref, null, this._worldTransformer)));
1582
+ this.konvaLayerFind(type).forEach((ref) => objects.push(konvaShape.initializer(ref, null, this._worldTransformer)));
1879
1583
  });
1880
1584
  return objects;
1881
1585
  }
1882
1586
  getSelectedObjects() {
1883
- if (!this._konvaTransformer) return [];
1884
- return this._konvaTransformer.nodes().map(ref => {
1587
+ if (!this._konvaTransformer)
1588
+ return [];
1589
+ return this._konvaTransformer
1590
+ .nodes()
1591
+ .map((ref) => {
1885
1592
  const name = ref.className;
1886
- const konvaShape = Object.values(MarkupMode2Konva).find(shape => shape.name === name);
1593
+ const konvaShape = Object.values(MarkupMode2Konva).find((shape) => shape.name === name);
1887
1594
  return konvaShape ? konvaShape.initializer(ref, null, this._worldTransformer) : null;
1888
- }).filter(x => x);
1595
+ })
1596
+ .filter((x) => x);
1889
1597
  }
1890
1598
  selectObjects(objects) {
1891
- if (!this._konvaTransformer) return;
1892
- const selectedObjs = this._konvaTransformer.nodes().concat(objects.map(x => x.ref()));
1599
+ if (!this._konvaTransformer)
1600
+ return;
1601
+ const selectedObjs = this._konvaTransformer.nodes().concat(objects.map((x) => x.ref()));
1893
1602
  this._konvaTransformer.nodes(selectedObjs);
1894
1603
  }
1895
1604
  clearSelected() {
1896
- if (this._konvaTransformer) this._konvaTransformer.nodes([]);
1605
+ if (this._konvaTransformer)
1606
+ this._konvaTransformer.nodes([]);
1897
1607
  }
1898
1608
  addObject(object) {
1899
- if (object.type() === "Image") this._groupImages.add(object.ref()); else if (object.type() === "Text") this._groupTexts.add(object.ref()); else this._groupGeometry.add(object.ref());
1609
+ if (object.type() === "Image")
1610
+ this._groupImages.add(object.ref());
1611
+ else if (object.type() === "Text")
1612
+ this._groupTexts.add(object.ref());
1613
+ else
1614
+ this._groupGeometry.add(object.ref());
1900
1615
  }
1901
1616
  konvaLayerFind(type) {
1902
- if (!this._konvaLayer) return [];
1617
+ if (!this._konvaLayer)
1618
+ return [];
1903
1619
  const konvaShape = MarkupMode2Konva[type];
1904
- if (!konvaShape || !konvaShape.initializer) return [];
1905
- return this._konvaLayer.find(konvaShape.name).filter(ref => ref.parent === this._konvaLayer || ref.parent === this._groupImages || ref.parent === this._groupGeometry || ref.parent === this._groupTexts);
1620
+ if (!konvaShape || !konvaShape.initializer)
1621
+ return [];
1622
+ return this._konvaLayer
1623
+ .find(konvaShape.name)
1624
+ .filter((ref) => ref.parent === this._konvaLayer ||
1625
+ ref.parent === this._groupImages ||
1626
+ ref.parent === this._groupGeometry ||
1627
+ ref.parent === this._groupTexts);
1906
1628
  }
1907
1629
  initializeKonva() {
1908
1630
  const stage = new Konva.Stage({
1909
1631
  container: this._markupContainer,
1910
1632
  width: this._container.clientWidth,
1911
- height: this._container.clientHeight
1633
+ height: this._container.clientHeight,
1912
1634
  });
1913
1635
  this._konvaStage = stage;
1914
- const layer = new Konva.Layer({
1915
- pixelRation: window.devicePixelRatio
1916
- });
1636
+ const layer = new Konva.Layer({ pixelRation: window.devicePixelRatio });
1917
1637
  stage.add(layer);
1918
- this._groupImages = new Konva.Group;
1638
+ this._groupImages = new Konva.Group();
1919
1639
  layer.add(this._groupImages);
1920
- this._groupGeometry = new Konva.Group;
1640
+ this._groupGeometry = new Konva.Group();
1921
1641
  layer.add(this._groupGeometry);
1922
- this._groupTexts = new Konva.Group;
1642
+ this._groupTexts = new Konva.Group();
1923
1643
  layer.add(this._groupTexts);
1924
1644
  this._konvaLayer = layer;
1925
1645
  const transformer = new Konva.Transformer({
1926
1646
  shouldOverdrawWholeArea: false,
1927
1647
  keepRatio: false,
1928
- flipEnabled: false
1648
+ flipEnabled: false,
1929
1649
  });
1930
1650
  layer.add(transformer);
1931
1651
  this._konvaTransformer = transformer;
@@ -1933,21 +1653,23 @@ class KonvaMarkup {
1933
1653
  let lastLine;
1934
1654
  let mouseDownPos;
1935
1655
  let lastObj;
1936
- stage.on("mousedown touchstart", e => {
1937
- if (!this._markupIsActive || e.target !== stage || this._markupMode === "Text" || this._markupMode === "Image") return;
1656
+ stage.on("mousedown touchstart", (e) => {
1657
+ if (!this._markupIsActive || e.target !== stage || this._markupMode === "Text" || this._markupMode === "Image")
1658
+ return;
1938
1659
  if (e.target === stage && transformer.nodes().length > 0) {
1939
1660
  transformer.nodes([]);
1940
1661
  return;
1941
1662
  }
1942
1663
  const pos = this.getRelativePointerPosition(stage);
1943
1664
  mouseDownPos = pos;
1944
- isPaint = [ "Arrow", "Cloud", "Ellipse", "Line", "Rectangle" ].some(m => m === this._markupMode);
1665
+ isPaint = ["Arrow", "Cloud", "Ellipse", "Line", "Rectangle"].some((m) => m === this._markupMode);
1945
1666
  if (this._markupMode === "Line") {
1946
- lastLine = this.addLine([ pos.x, pos.y, pos.x, pos.y ]);
1667
+ lastLine = this.addLine([pos.x, pos.y, pos.x, pos.y]);
1947
1668
  }
1948
1669
  });
1949
1670
  stage.on("mouseup touchend", () => {
1950
- if (!this._markupIsActive) return;
1671
+ if (!this._markupIsActive)
1672
+ return;
1951
1673
  if (isPaint) {
1952
1674
  const pos = this.getRelativePointerPosition(stage);
1953
1675
  const defParams = mouseDownPos && pos.x === mouseDownPos.x && pos.y === mouseDownPos.y;
@@ -1957,31 +1679,16 @@ class KonvaMarkup {
1957
1679
  const dY = defParams ? 200 : Math.abs(mouseDownPos.y - pos.y);
1958
1680
  if (defParams) {
1959
1681
  if (this._markupMode === "Rectangle") {
1960
- this.addRectangle({
1961
- x: startX,
1962
- y: startY
1963
- }, null, dX, dY);
1964
- } else if (this._markupMode === "Ellipse") {
1965
- this.addEllipse({
1966
- x: startX,
1967
- y: startY
1968
- }, null, null, {
1969
- x: dX / 2,
1970
- y: dY / 2
1971
- });
1972
- } else if (this._markupMode === "Arrow") {
1973
- this.addArrow({
1974
- x: mouseDownPos.x,
1975
- y: mouseDownPos.y
1976
- }, {
1977
- x: defParams ? mouseDownPos.x + 200 : pos.x,
1978
- y: defParams ? startY : pos.y
1979
- });
1980
- } else if (this._markupMode === "Cloud") {
1981
- this.addCloud({
1982
- x: startX,
1983
- y: startY
1984
- }, null, Math.max(100, dX), Math.max(100, dY));
1682
+ this.addRectangle({ x: startX, y: startY }, null, dX, dY);
1683
+ }
1684
+ else if (this._markupMode === "Ellipse") {
1685
+ this.addEllipse({ x: startX, y: startY }, null, null, { x: dX / 2, y: dY / 2 });
1686
+ }
1687
+ else if (this._markupMode === "Arrow") {
1688
+ this.addArrow({ x: mouseDownPos.x, y: mouseDownPos.y }, { x: defParams ? mouseDownPos.x + 200 : pos.x, y: defParams ? startY : pos.y });
1689
+ }
1690
+ else if (this._markupMode === "Cloud") {
1691
+ this.addCloud({ x: startX, y: startY }, null, Math.max(100, dX), Math.max(100, dY));
1985
1692
  }
1986
1693
  }
1987
1694
  }
@@ -1989,7 +1696,8 @@ class KonvaMarkup {
1989
1696
  isPaint = false;
1990
1697
  });
1991
1698
  stage.on("mousemove touchmove", () => {
1992
- if (!this._markupIsActive) return;
1699
+ if (!this._markupIsActive)
1700
+ return;
1993
1701
  if (!isPaint) {
1994
1702
  return;
1995
1703
  }
@@ -2000,63 +1708,58 @@ class KonvaMarkup {
2000
1708
  const dX = defParams ? 200 : Math.abs(mouseDownPos.x - pos.x);
2001
1709
  const dY = defParams ? 200 : Math.abs(mouseDownPos.y - pos.y);
2002
1710
  if (this._markupMode === "Line") {
2003
- lastLine.addPoints([ {
2004
- x: pos.x,
2005
- y: pos.y
2006
- } ]);
2007
- } else if (this._markupMode === "Arrow") {
2008
- if (lastObj) lastObj.setEndPoint(pos.x, pos.y); else lastObj = this.addArrow({
2009
- x: mouseDownPos.x,
2010
- y: mouseDownPos.y
2011
- }, {
2012
- x: pos.x,
2013
- y: pos.y
2014
- });
2015
- } else if (this._markupMode === "Rectangle") {
1711
+ lastLine.addPoints([{ x: pos.x, y: pos.y }]);
1712
+ }
1713
+ else if (this._markupMode === "Arrow") {
1714
+ if (lastObj)
1715
+ lastObj.setEndPoint(pos.x, pos.y);
1716
+ else
1717
+ lastObj = this.addArrow({ x: mouseDownPos.x, y: mouseDownPos.y }, { x: pos.x, y: pos.y });
1718
+ }
1719
+ else if (this._markupMode === "Rectangle") {
2016
1720
  if (lastObj) {
2017
1721
  lastObj.setPosition(startX, startY);
2018
1722
  lastObj.setWidth(dX);
2019
1723
  lastObj.setHeight(dY);
2020
- } else lastObj = this.addRectangle({
2021
- x: startX,
2022
- y: startY
2023
- }, null, dX, dY);
2024
- } else if (this._markupMode === "Ellipse") {
1724
+ }
1725
+ else
1726
+ lastObj = this.addRectangle({ x: startX, y: startY }, null, dX, dY);
1727
+ }
1728
+ else if (this._markupMode === "Ellipse") {
2025
1729
  if (lastObj) {
2026
1730
  lastObj.setPosition(startX, startY);
2027
1731
  lastObj.setRadiusX(dX);
2028
1732
  lastObj.setRadiusY(dY);
2029
- } else lastObj = this.addEllipse({
2030
- x: startX,
2031
- y: startY
2032
- }, null, null, {
2033
- x: dX,
2034
- y: dY
2035
- });
2036
- } else if (this._markupMode === "Cloud") {
1733
+ }
1734
+ else
1735
+ lastObj = this.addEllipse({ x: startX, y: startY }, null, null, { x: dX, y: dY });
1736
+ }
1737
+ else if (this._markupMode === "Cloud") {
2037
1738
  if (lastObj) {
2038
1739
  lastObj.setPosition(startX, startY);
2039
1740
  lastObj.setWidth(Math.max(100, dX));
2040
1741
  lastObj.setHeight(Math.max(100, dY));
2041
- } else lastObj = this.addCloud({
2042
- x: startX,
2043
- y: startY
2044
- }, null, dX, dY);
1742
+ }
1743
+ else
1744
+ lastObj = this.addCloud({ x: startX, y: startY }, null, dX, dY);
2045
1745
  }
2046
1746
  });
2047
- stage.on("click tap", e => {
2048
- if (!this._markupIsActive) return;
1747
+ stage.on("click tap", (e) => {
1748
+ if (!this._markupIsActive)
1749
+ return;
2049
1750
  if (e.target === stage) {
2050
1751
  if (this._markupMode === "Text") {
2051
- if (this._textInputRef && this._textInputRef.value) this.addText(this._textInputRef.value, this._textInputPos, this._textInputAngle); else if (transformer.nodes().length === 0) {
1752
+ if (this._textInputRef && this._textInputRef.value)
1753
+ this.addText(this._textInputRef.value, this._textInputPos, this._textInputAngle);
1754
+ else if (transformer.nodes().length === 0) {
2052
1755
  const pos = this.getRelativePointerPosition(stage);
2053
1756
  this.createTextInput(pos, e.evt.pageX, e.evt.pageY, 0, null);
2054
1757
  }
2055
- } else if (this._markupMode === "Image") {
2056
- if (this._imageInputRef && this._imageInputRef.value) this.addImage({
2057
- x: this._imageInputPos.x,
2058
- y: this._imageInputPos.y
2059
- }, null, this._imageInputRef.value, 0, 0, this._imageInputRef.value); else if (transformer.nodes().length === 0) {
1758
+ }
1759
+ else if (this._markupMode === "Image") {
1760
+ if (this._imageInputRef && this._imageInputRef.value)
1761
+ this.addImage({ x: this._imageInputPos.x, y: this._imageInputPos.y }, null, this._imageInputRef.value, 0, 0, this._imageInputRef.value);
1762
+ else if (transformer.nodes().length === 0) {
2060
1763
  const pos = this.getRelativePointerPosition(stage);
2061
1764
  this.createImageInput(pos);
2062
1765
  }
@@ -2066,51 +1769,59 @@ class KonvaMarkup {
2066
1769
  }
2067
1770
  if (this._markupMode === "Text" || this._markupMode === "SelectMarkup") {
2068
1771
  if (e.target.className === "Text" && transformer.nodes().length === 1 && transformer.nodes()[0] === e.target) {
2069
- if (this._textInputRef && this._textInputRef.value) this.addText(this._textInputRef.value, this._textInputPos, this._textInputAngle); else this.createTextInput({
2070
- x: e.target.attrs.x,
2071
- y: e.target.attrs.y
2072
- }, e.evt.pageX, e.evt.pageY, e.target.attrs.rotation, e.target.attrs.text);
1772
+ if (this._textInputRef && this._textInputRef.value)
1773
+ this.addText(this._textInputRef.value, this._textInputPos, this._textInputAngle);
1774
+ else
1775
+ this.createTextInput({ x: e.target.attrs.x, y: e.target.attrs.y }, e.evt.pageX, e.evt.pageY, e.target.attrs.rotation, e.target.attrs.text);
2073
1776
  return;
2074
- } else {
1777
+ }
1778
+ else {
2075
1779
  this.removeTextInput();
2076
1780
  }
2077
1781
  }
2078
1782
  if (this._markupMode === "Image" || this._markupMode === "SelectMarkup") {
2079
1783
  if (e.target.className === "Image" && transformer.nodes().length === 1 && transformer.nodes()[0] === e.target) {
2080
- if (this._imageInputRef && this._imageInputRef.value) this.addImage(this._imageInputPos, null, this._imageInputRef.value, 0, 0); else this.createImageInput({
2081
- x: e.target.attrs.x,
2082
- y: e.target.attrs.y
2083
- });
1784
+ if (this._imageInputRef && this._imageInputRef.value)
1785
+ this.addImage(this._imageInputPos, null, this._imageInputRef.value, 0, 0);
1786
+ else
1787
+ this.createImageInput({ x: e.target.attrs.x, y: e.target.attrs.y });
2084
1788
  return;
2085
- } else {
1789
+ }
1790
+ else {
2086
1791
  this.removeImageInput();
2087
1792
  }
2088
1793
  }
2089
- if (transformer.nodes().filter(x => x.className === "Cloud" || x.className === "Image").length > 0 || e.target.className === "Cloud" || e.target.className === "Image") {
1794
+ if (transformer.nodes().filter((x) => x.className === "Cloud" || x.className === "Image").length > 0 ||
1795
+ e.target.className === "Cloud" ||
1796
+ e.target.className === "Image") {
2090
1797
  transformer.rotateEnabled(false);
2091
- } else {
1798
+ }
1799
+ else {
2092
1800
  transformer.rotateEnabled(true);
2093
1801
  }
2094
1802
  const metaPressed = e.evt.shiftKey || e.evt.ctrlKey || e.evt.metaKey;
2095
1803
  const isSelected = transformer.nodes().indexOf(e.target) >= 0;
2096
1804
  if (!metaPressed && !isSelected) {
2097
- transformer.nodes([ e.target ]);
2098
- } else if (metaPressed && isSelected) {
1805
+ transformer.nodes([e.target]);
1806
+ }
1807
+ else if (metaPressed && isSelected) {
2099
1808
  const nodes = transformer.nodes().slice();
2100
1809
  nodes.splice(nodes.indexOf(e.target), 1);
2101
1810
  transformer.nodes(nodes);
2102
- } else if (metaPressed && !isSelected) {
2103
- const nodes = transformer.nodes().concat([ e.target ]);
1811
+ }
1812
+ else if (metaPressed && !isSelected) {
1813
+ const nodes = transformer.nodes().concat([e.target]);
2104
1814
  transformer.nodes(nodes);
2105
1815
  }
2106
1816
  });
2107
1817
  const container = stage.container();
2108
1818
  container.tabIndex = 1;
2109
1819
  container.focus();
2110
- container.addEventListener("keydown", e => {
2111
- if (!this._markupIsActive) return;
1820
+ container.addEventListener("keydown", (e) => {
1821
+ if (!this._markupIsActive)
1822
+ return;
2112
1823
  if (e.code === "Delete") {
2113
- this.getSelectedObjects().forEach(obj => obj.delete());
1824
+ this.getSelectedObjects().forEach((obj) => obj.delete());
2114
1825
  this.clearSelected();
2115
1826
  return;
2116
1827
  }
@@ -2132,16 +1843,17 @@ class KonvaMarkup {
2132
1843
  }
2133
1844
  getMarkupLines() {
2134
1845
  const lines = [];
2135
- this.konvaLayerFind("Line").forEach(ref => {
1846
+ this.konvaLayerFind("Line").forEach((ref) => {
2136
1847
  const wcsPoints = ref.getAttr("wcsPoints");
2137
- if (!wcsPoints) return;
1848
+ if (!wcsPoints)
1849
+ return;
2138
1850
  const konvaLine = new KonvaLine(null, ref, this._worldTransformer);
2139
1851
  const line = {
2140
1852
  id: konvaLine.id(),
2141
1853
  points: wcsPoints,
2142
1854
  color: konvaLine.getColor() || "#ff0000",
2143
1855
  type: konvaLine.getLineType() || this.lineType,
2144
- width: konvaLine.getLineWidth() || this.lineWidth
1856
+ width: konvaLine.getLineWidth() || this.lineWidth,
2145
1857
  };
2146
1858
  lines.push(line);
2147
1859
  });
@@ -2149,8 +1861,8 @@ class KonvaMarkup {
2149
1861
  }
2150
1862
  getMarkupTexts() {
2151
1863
  const texts = [];
2152
- this.konvaLayerFind("Text").forEach(ref => {
2153
- const textSize = .02;
1864
+ this.konvaLayerFind("Text").forEach((ref) => {
1865
+ const textSize = 0.02;
2154
1866
  const textScale = this._worldTransformer.getScale();
2155
1867
  const wcsPosition = ref.getAttr("wcsStart");
2156
1868
  const stageAbsoluteTransform = this._konvaStage.getAbsoluteTransform();
@@ -2162,7 +1874,7 @@ class KonvaMarkup {
2162
1874
  text_size: textSize * textScale.y,
2163
1875
  angle: shape.getRotation(),
2164
1876
  color: shape.getColor(),
2165
- font_size: shape.getFontSize() * stageAbsoluteTransform.getMatrix()[0]
1877
+ font_size: shape.getFontSize() * stageAbsoluteTransform.getMatrix()[0],
2166
1878
  };
2167
1879
  texts.push(text);
2168
1880
  });
@@ -2170,7 +1882,7 @@ class KonvaMarkup {
2170
1882
  }
2171
1883
  getMarkupRectangles() {
2172
1884
  const rectangles = [];
2173
- this.konvaLayerFind("Rectangle").forEach(ref => {
1885
+ this.konvaLayerFind("Rectangle").forEach((ref) => {
2174
1886
  const wcsStart = ref.getAttr("wcsStart");
2175
1887
  const wcsEnd = ref.getAttr("wcsEnd");
2176
1888
  const screenStart = this._worldTransformer.worldToScreen(wcsStart);
@@ -2183,7 +1895,7 @@ class KonvaMarkup {
2183
1895
  width: Math.abs(screenStart.x - screenEnd.x),
2184
1896
  height: Math.abs(screenStart.y - screenEnd.y),
2185
1897
  line_width: shape.getLineWidth(),
2186
- color: shape.getColor()
1898
+ color: shape.getColor(),
2187
1899
  };
2188
1900
  rectangles.push(rectangle);
2189
1901
  });
@@ -2191,7 +1903,7 @@ class KonvaMarkup {
2191
1903
  }
2192
1904
  getMarkupEllipses() {
2193
1905
  const ellipses = [];
2194
- this.konvaLayerFind("Ellipse").forEach(ref => {
1906
+ this.konvaLayerFind("Ellipse").forEach((ref) => {
2195
1907
  const wcsPosition = ref.getAttr("wcsPosition");
2196
1908
  const wcsPosition2 = ref.getAttr("wcsRadiusX");
2197
1909
  const wcsPosition3 = ref.getAttr("wcsRadiusY");
@@ -2205,10 +1917,10 @@ class KonvaMarkup {
2205
1917
  position3: wcsPosition3,
2206
1918
  radius: {
2207
1919
  x: ref.getRadiusX() * scale,
2208
- y: ref.getRadiusY() * scale
1920
+ y: ref.getRadiusY() * scale,
2209
1921
  },
2210
1922
  line_width: shape.getLineWidth(),
2211
- color: shape.getColor()
1923
+ color: shape.getColor(),
2212
1924
  };
2213
1925
  ellipses.push(ellipse);
2214
1926
  });
@@ -2216,7 +1928,7 @@ class KonvaMarkup {
2216
1928
  }
2217
1929
  getMarkupArrows() {
2218
1930
  const arrows = [];
2219
- this.konvaLayerFind("Arrow").forEach(ref => {
1931
+ this.konvaLayerFind("Arrow").forEach((ref) => {
2220
1932
  const wcsStart = ref.getAttr("wcsStart");
2221
1933
  const wcsEnd = ref.getAttr("wcsEnd");
2222
1934
  const shape = new KonvaArrow(null, ref, this._worldTransformer);
@@ -2224,7 +1936,7 @@ class KonvaMarkup {
2224
1936
  id: shape.id(),
2225
1937
  start: wcsStart,
2226
1938
  end: wcsEnd,
2227
- color: shape.getColor()
1939
+ color: shape.getColor(),
2228
1940
  };
2229
1941
  arrows.push(arrow);
2230
1942
  });
@@ -2232,7 +1944,7 @@ class KonvaMarkup {
2232
1944
  }
2233
1945
  getMarkupImages() {
2234
1946
  const images = [];
2235
- this.konvaLayerFind("Image").forEach(ref => {
1947
+ this.konvaLayerFind("Image").forEach((ref) => {
2236
1948
  const wcsStart = ref.getAttr("wcsStart");
2237
1949
  const wcsEnd = ref.getAttr("wcsEnd");
2238
1950
  const stageAbsoluteTransform = this._konvaStage.getAbsoluteTransform();
@@ -2244,7 +1956,7 @@ class KonvaMarkup {
2244
1956
  position2: wcsEnd,
2245
1957
  src: shape.getSrc(),
2246
1958
  width: shape.getWidth() * scale,
2247
- height: shape.getHeight() * scale
1959
+ height: shape.getHeight() * scale,
2248
1960
  };
2249
1961
  images.push(image);
2250
1962
  });
@@ -2252,7 +1964,7 @@ class KonvaMarkup {
2252
1964
  }
2253
1965
  getMarkupClouds() {
2254
1966
  const clouds = [];
2255
- this.konvaLayerFind("Cloud").forEach(ref => {
1967
+ this.konvaLayerFind("Cloud").forEach((ref) => {
2256
1968
  const wcsStart = ref.getAttr("wcsStart");
2257
1969
  const wcsEnd = ref.getAttr("wcsEnd");
2258
1970
  const screenStart = this._worldTransformer.worldToScreen(wcsStart);
@@ -2265,7 +1977,7 @@ class KonvaMarkup {
2265
1977
  width: Math.abs(screenStart.x - screenEnd.x),
2266
1978
  height: Math.abs(screenStart.y - screenEnd.y),
2267
1979
  line_width: shape.getLineWidth(),
2268
- color: shape.getColor()
1980
+ color: shape.getColor(),
2269
1981
  };
2270
1982
  clouds.push(cloud);
2271
1983
  });
@@ -2278,28 +1990,25 @@ class KonvaMarkup {
2278
1990
  tempCanvas.width = this._konvaStage.width();
2279
1991
  tempCanvas.height = this._konvaStage.height();
2280
1992
  const ctx = tempCanvas.getContext("2d");
2281
- if (this._container instanceof HTMLCanvasElement) ctx.drawImage(this._container, 0, 0);
2282
- ctx.drawImage(this._konvaStage.toCanvas({
2283
- pixelRatio: window.devicePixelRatio
2284
- }), 0, 0);
1993
+ if (this._container instanceof HTMLCanvasElement)
1994
+ ctx.drawImage(this._container, 0, 0);
1995
+ ctx.drawImage(this._konvaStage.toCanvas({ pixelRatio: window.devicePixelRatio }), 0, 0);
2285
1996
  }
2286
- return tempCanvas.toDataURL("image/jpeg", .25);
1997
+ return tempCanvas.toDataURL("image/jpeg", 0.25);
2287
1998
  }
2288
1999
  addLine(linePoints, color, type, width, id) {
2289
- if (!linePoints || linePoints.length === 0) return;
2000
+ if (!linePoints || linePoints.length === 0)
2001
+ return;
2290
2002
  const points = [];
2291
2003
  for (let i = 0; i < linePoints.length; i += 2) {
2292
- points.push({
2293
- x: linePoints[i],
2294
- y: linePoints[i + 1]
2295
- });
2004
+ points.push({ x: linePoints[i], y: linePoints[i + 1] });
2296
2005
  }
2297
2006
  const konvaLine = new KonvaLine({
2298
- points: points,
2007
+ points,
2299
2008
  type: type || this.lineType,
2300
2009
  width: width || this.lineWidth,
2301
2010
  color: color || this._markupColor.asHex(),
2302
- id: id
2011
+ id,
2303
2012
  }, null, this._worldTransformer);
2304
2013
  this.addObject(konvaLine);
2305
2014
  return konvaLine;
@@ -2317,7 +2026,7 @@ class KonvaMarkup {
2317
2026
  this._textInputRef.style.fontSize = `${this.fontSize}px`;
2318
2027
  this._textInputRef.style.color = `${this._markupColor.asHex()}`;
2319
2028
  this._textInputRef.style.fontFamily = "Calibri";
2320
- this._textInputRef.onkeydown = event => {
2029
+ this._textInputRef.onkeydown = (event) => {
2321
2030
  if (event.key === "Enter" && !event.shiftKey) {
2322
2031
  event.preventDefault();
2323
2032
  this.addText(this._textInputRef.value, this._textInputPos, this._textInputAngle);
@@ -2327,12 +2036,14 @@ class KonvaMarkup {
2327
2036
  this.removeTextInput();
2328
2037
  }
2329
2038
  };
2330
- if (text) this._textInputRef.value = text;
2039
+ if (text)
2040
+ this._textInputRef.value = text;
2331
2041
  document.body.appendChild(this._textInputRef);
2332
2042
  setTimeout(() => {
2333
2043
  this._textInputRef.focus();
2334
2044
  }, 50);
2335
- } else {
2045
+ }
2046
+ else {
2336
2047
  this.removeTextInput();
2337
2048
  }
2338
2049
  }
@@ -2345,28 +2056,27 @@ class KonvaMarkup {
2345
2056
  }
2346
2057
  createImageInput(pos) {
2347
2058
  if (!this._imageInputRef) {
2348
- const convertBase64 = file => new Promise((resolve, reject) => {
2349
- const fileReader = new FileReader;
2350
- fileReader.readAsDataURL(file);
2351
- fileReader.onload = () => {
2352
- resolve(fileReader.result);
2353
- };
2354
- fileReader.onerror = error => {
2355
- reject(error);
2356
- };
2357
- });
2059
+ const convertBase64 = (file) => {
2060
+ return new Promise((resolve, reject) => {
2061
+ const fileReader = new FileReader();
2062
+ fileReader.readAsDataURL(file);
2063
+ fileReader.onload = () => {
2064
+ resolve(fileReader.result);
2065
+ };
2066
+ fileReader.onerror = (error) => {
2067
+ reject(error);
2068
+ };
2069
+ });
2070
+ };
2358
2071
  this._imageInputPos = pos;
2359
2072
  this._imageInputRef = document.createElement("input");
2360
2073
  this._imageInputRef.style.display = "none";
2361
2074
  this._imageInputRef.type = "file";
2362
2075
  this._imageInputRef.accept = "image/png, image/jpeg";
2363
- this._imageInputRef.onchange = async event => {
2076
+ this._imageInputRef.onchange = async (event) => {
2364
2077
  const file = event.target.files[0];
2365
2078
  const base64 = await convertBase64(file);
2366
- this.addImage({
2367
- x: this._imageInputPos.x,
2368
- y: this._imageInputPos.y
2369
- }, null, base64.toString(), 0, 0);
2079
+ this.addImage({ x: this._imageInputPos.x, y: this._imageInputPos.y }, null, base64.toString(), 0, 0);
2370
2080
  };
2371
2081
  this._imageInputRef.oncancel = () => {
2372
2082
  this.removeImageInput();
@@ -2375,7 +2085,8 @@ class KonvaMarkup {
2375
2085
  setTimeout(() => {
2376
2086
  this._imageInputRef.click();
2377
2087
  }, 50);
2378
- } else {
2088
+ }
2089
+ else {
2379
2090
  this.removeImageInput();
2380
2091
  }
2381
2092
  }
@@ -2387,98 +2098,101 @@ class KonvaMarkup {
2387
2098
  }
2388
2099
  addText(text, position, angle, color, textSize, fontSize, id) {
2389
2100
  var _a;
2390
- if (!text) return;
2101
+ if (!text)
2102
+ return;
2391
2103
  (_a = this.getSelectedObjects().shift()) === null || _a === void 0 ? void 0 : _a.delete();
2392
2104
  this.clearSelected();
2393
2105
  this.removeTextInput();
2394
- const tolerance = 1e-6;
2106
+ const tolerance = 1.0e-6;
2395
2107
  if (textSize && textSize > tolerance && (!fontSize || fontSize < tolerance)) {
2396
- const size = .02;
2108
+ const size = 0.02;
2397
2109
  const scale = this._worldTransformer.getScale();
2398
2110
  fontSize = textSize / (scale.y / size) / 34;
2399
2111
  }
2400
2112
  const konvaText = new KonvaText({
2401
- position: {
2402
- x: position.x,
2403
- y: position.y
2404
- },
2405
- text: text,
2113
+ position: { x: position.x, y: position.y },
2114
+ text,
2406
2115
  rotation: angle,
2407
2116
  fontSize: fontSize || this.fontSize,
2408
2117
  color: color || this._markupColor.asHex(),
2409
- id: id
2118
+ id,
2410
2119
  }, null, this._worldTransformer);
2411
2120
  this.addObject(konvaText);
2412
2121
  return konvaText;
2413
2122
  }
2414
2123
  addRectangle(position, position2, width, height, lineWidth, color, id) {
2415
- if (!position) return;
2124
+ if (!position)
2125
+ return;
2416
2126
  const konvaRectangle = new KonvaRectangle({
2417
- position: position,
2418
- position2: position2,
2419
- width: width,
2420
- height: height,
2127
+ position,
2128
+ position2,
2129
+ width,
2130
+ height,
2421
2131
  lineWidth: lineWidth || this.lineWidth,
2422
2132
  color: color || this._markupColor.asHex(),
2423
- id: id
2133
+ id,
2424
2134
  }, null, this._worldTransformer);
2425
2135
  this.addObject(konvaRectangle);
2426
2136
  return konvaRectangle;
2427
2137
  }
2428
2138
  addEllipse(position, position2, position3, radius, lineWidth, color, id) {
2429
- if (!position) return;
2139
+ if (!position)
2140
+ return;
2430
2141
  const konvaEllipse = new KonvaEllipse({
2431
- position: position,
2432
- position2: position2,
2433
- position3: position3,
2434
- radius: radius,
2435
- lineWidth: lineWidth,
2142
+ position,
2143
+ position2,
2144
+ position3,
2145
+ radius,
2146
+ lineWidth,
2436
2147
  color: color || this._markupColor.asHex(),
2437
- id: id
2148
+ id,
2438
2149
  }, null, this._worldTransformer);
2439
2150
  this.addObject(konvaEllipse);
2440
2151
  return konvaEllipse;
2441
2152
  }
2442
2153
  addArrow(start, end, color, id) {
2443
- if (!start || !end) return;
2154
+ if (!start || !end)
2155
+ return;
2444
2156
  const konvaArrow = new KonvaArrow({
2445
- start: start,
2446
- end: end,
2157
+ start,
2158
+ end,
2447
2159
  color: color || this._markupColor.asHex(),
2448
- id: id
2160
+ id,
2449
2161
  }, null, this._worldTransformer);
2450
2162
  this.addObject(konvaArrow);
2451
2163
  return konvaArrow;
2452
2164
  }
2453
2165
  addCloud(position, position2, width, height, lineWidth, color, id) {
2454
- if (!position || !width || !height) return;
2166
+ if (!position || !width || !height)
2167
+ return;
2455
2168
  const konvaCloud = new KonvaCloud({
2456
- position: position,
2457
- position2: position2,
2458
- width: width,
2459
- height: height,
2169
+ position,
2170
+ position2,
2171
+ width,
2172
+ height,
2460
2173
  color: color || this._markupColor.asHex(),
2461
2174
  lineWidth: lineWidth || this.lineWidth,
2462
- id: id
2175
+ id,
2463
2176
  }, null, this._worldTransformer);
2464
2177
  this.addObject(konvaCloud);
2465
2178
  return konvaCloud;
2466
2179
  }
2467
2180
  addImage(position, position2, src, width, height, id) {
2468
2181
  var _a;
2469
- if (!position || !src) return;
2182
+ if (!position || !src)
2183
+ return;
2470
2184
  (_a = this.getSelectedObjects().shift()) === null || _a === void 0 ? void 0 : _a.delete();
2471
2185
  this.clearSelected();
2472
2186
  this.removeImageInput();
2473
2187
  const konvaImage = new KonvaImage({
2474
- position: position,
2475
- position2: position2,
2476
- src: src,
2477
- width: width,
2478
- height: height,
2188
+ position,
2189
+ position2,
2190
+ src,
2191
+ width,
2192
+ height,
2479
2193
  maxWidth: this._konvaStage.width() - position.x,
2480
2194
  maxHeight: this._konvaStage.height() - position.y,
2481
- id: id
2195
+ id,
2482
2196
  }, null, this._worldTransformer);
2483
2197
  this.addObject(konvaImage);
2484
2198
  return konvaImage;