@inweb/markup 26.9.2 → 26.9.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/markup.js +831 -788
- package/dist/markup.js.map +1 -1
- package/dist/markup.min.js +1 -1
- package/dist/markup.module.js +150 -150
- package/dist/markup.module.js.map +1 -1
- package/package.json +3 -3
- package/src/markup/Konva/KonvaMarkup.ts +2 -2
package/dist/markup.module.js
CHANGED
|
@@ -90,7 +90,7 @@ class KonvaLine {
|
|
|
90
90
|
} ];
|
|
91
91
|
const konvaPoints = [];
|
|
92
92
|
const wcsPoints = [];
|
|
93
|
-
params.points.forEach(
|
|
93
|
+
params.points.forEach(point => {
|
|
94
94
|
konvaPoints.push(point.x, point.y);
|
|
95
95
|
const wcsPoint = this._worldTransformer.screenToWorld({
|
|
96
96
|
x: point.x,
|
|
@@ -101,10 +101,10 @@ class KonvaLine {
|
|
|
101
101
|
y: wcsPoint.y,
|
|
102
102
|
z: wcsPoint.z
|
|
103
103
|
});
|
|
104
|
-
})
|
|
104
|
+
});
|
|
105
105
|
this._ref = new Konva.Line({
|
|
106
|
-
stroke: (_a = params.color) !== null && _a !==
|
|
107
|
-
strokeWidth: (_b = params.width) !== null && _b !==
|
|
106
|
+
stroke: (_a = params.color) !== null && _a !== void 0 ? _a : "#ff0000",
|
|
107
|
+
strokeWidth: (_b = params.width) !== null && _b !== void 0 ? _b : 4,
|
|
108
108
|
globalCompositeOperation: "source-over",
|
|
109
109
|
lineCap: "round",
|
|
110
110
|
lineJoin: "round",
|
|
@@ -114,11 +114,11 @@ class KonvaLine {
|
|
|
114
114
|
dash: LineTypeSpecs.get(params.type) || []
|
|
115
115
|
});
|
|
116
116
|
this._ref.setAttr("wcsPoints", wcsPoints);
|
|
117
|
-
this._ref.on("transform",
|
|
117
|
+
this._ref.on("transform", e => {
|
|
118
118
|
const attrs = e.target.attrs;
|
|
119
119
|
if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
|
|
120
|
-
})
|
|
121
|
-
this._ref.on("transformend", (
|
|
120
|
+
});
|
|
121
|
+
this._ref.on("transformend", () => {
|
|
122
122
|
const absoluteTransform = this._ref.getAbsoluteTransform();
|
|
123
123
|
const wcsPoints = [];
|
|
124
124
|
const points = this._ref.points();
|
|
@@ -139,8 +139,8 @@ class KonvaLine {
|
|
|
139
139
|
});
|
|
140
140
|
}
|
|
141
141
|
this._ref.setAttr("wcsPoints", wcsPoints);
|
|
142
|
-
})
|
|
143
|
-
this._ref.on("dragend", (
|
|
142
|
+
});
|
|
143
|
+
this._ref.on("dragend", () => {
|
|
144
144
|
const absoluteTransform = this._ref.getAbsoluteTransform();
|
|
145
145
|
const wcsPoints = [];
|
|
146
146
|
const points = this._ref.points();
|
|
@@ -161,7 +161,7 @@ class KonvaLine {
|
|
|
161
161
|
});
|
|
162
162
|
}
|
|
163
163
|
this._ref.setAttr("wcsPoints", wcsPoints);
|
|
164
|
-
})
|
|
164
|
+
});
|
|
165
165
|
this._ref.id(this._ref._id.toString());
|
|
166
166
|
}
|
|
167
167
|
ref() {
|
|
@@ -232,11 +232,11 @@ class KonvaLine {
|
|
|
232
232
|
addPoints(points) {
|
|
233
233
|
let newPoints = this._ref.points();
|
|
234
234
|
const wcsPoints = this._ref.getAttr("wcsPoints");
|
|
235
|
-
points.forEach(
|
|
235
|
+
points.forEach(point => {
|
|
236
236
|
newPoints = newPoints.concat([ point.x, point.y ]);
|
|
237
237
|
const wcsPoint = this._worldTransformer.screenToWorld(point);
|
|
238
238
|
wcsPoints.push(wcsPoint);
|
|
239
|
-
})
|
|
239
|
+
});
|
|
240
240
|
this._ref.points(newPoints);
|
|
241
241
|
}
|
|
242
242
|
updateScreenCoordinates() {
|
|
@@ -244,7 +244,7 @@ class KonvaLine {
|
|
|
244
244
|
const points = [];
|
|
245
245
|
let invert = this._ref.getAbsoluteTransform().copy();
|
|
246
246
|
invert = invert.invert();
|
|
247
|
-
wcsPoints.forEach(
|
|
247
|
+
wcsPoints.forEach(point => {
|
|
248
248
|
let screenPoint = this._worldTransformer.worldToScreen(point);
|
|
249
249
|
screenPoint = invert.point({
|
|
250
250
|
x: screenPoint.x,
|
|
@@ -252,7 +252,7 @@ class KonvaLine {
|
|
|
252
252
|
});
|
|
253
253
|
points.push(screenPoint.x);
|
|
254
254
|
points.push(screenPoint.y);
|
|
255
|
-
})
|
|
255
|
+
});
|
|
256
256
|
this._ref.points([]);
|
|
257
257
|
this._ref.points(points);
|
|
258
258
|
this._ref.clearCache();
|
|
@@ -285,19 +285,19 @@ class KonvaText {
|
|
|
285
285
|
x: params.position.x,
|
|
286
286
|
y: params.position.y,
|
|
287
287
|
text: params.text,
|
|
288
|
-
fontSize: (_a = params.fontSize) !== null && _a !==
|
|
288
|
+
fontSize: (_a = params.fontSize) !== null && _a !== void 0 ? _a : 34,
|
|
289
289
|
fontFamily: this.TEXT_FONT_FAMILY,
|
|
290
|
-
fill: (_b = params.color) !== null && _b !==
|
|
290
|
+
fill: (_b = params.color) !== null && _b !== void 0 ? _b : "#ff0000",
|
|
291
291
|
align: "left",
|
|
292
292
|
draggable: true,
|
|
293
|
-
rotation: (_c = params.rotation) !== null && _c !==
|
|
293
|
+
rotation: (_c = params.rotation) !== null && _c !== void 0 ? _c : 0
|
|
294
294
|
});
|
|
295
295
|
this._ref.width(this._ref.getTextWidth());
|
|
296
296
|
this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({
|
|
297
297
|
x: params.position.x,
|
|
298
298
|
y: params.position.y
|
|
299
299
|
}));
|
|
300
|
-
this._ref.on("transform",
|
|
300
|
+
this._ref.on("transform", e => {
|
|
301
301
|
const attrs = e.target.attrs;
|
|
302
302
|
if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
|
|
303
303
|
const scaleByX = Math.abs(attrs.scaleX - 1) > 1e-5;
|
|
@@ -319,8 +319,8 @@ class KonvaText {
|
|
|
319
319
|
x: 1,
|
|
320
320
|
y: 1
|
|
321
321
|
});
|
|
322
|
-
})
|
|
323
|
-
this._ref.on("transformend",
|
|
322
|
+
});
|
|
323
|
+
this._ref.on("transformend", e => {
|
|
324
324
|
const attrs = e.target.attrs;
|
|
325
325
|
if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
|
|
326
326
|
const absoluteTransform = this._ref.getStage().getAbsoluteTransform();
|
|
@@ -329,15 +329,15 @@ class KonvaText {
|
|
|
329
329
|
y: this._ref.y()
|
|
330
330
|
});
|
|
331
331
|
this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld(position));
|
|
332
|
-
})
|
|
333
|
-
this._ref.on("dragend", (
|
|
332
|
+
});
|
|
333
|
+
this._ref.on("dragend", () => {
|
|
334
334
|
const absoluteTransform = this._ref.getStage().getAbsoluteTransform();
|
|
335
335
|
const position = absoluteTransform.point({
|
|
336
336
|
x: this._ref.x(),
|
|
337
337
|
y: this._ref.y()
|
|
338
338
|
});
|
|
339
339
|
this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld(position));
|
|
340
|
-
})
|
|
340
|
+
});
|
|
341
341
|
this._ref.id(this._ref._id.toString());
|
|
342
342
|
}
|
|
343
343
|
ref() {
|
|
@@ -461,15 +461,15 @@ class KonvaRectangle {
|
|
|
461
461
|
}
|
|
462
462
|
}
|
|
463
463
|
this._ref = new Konva.Rect({
|
|
464
|
-
stroke: (_a = params.color) !== null && _a !==
|
|
465
|
-
strokeWidth: (_b = params.lineWidth) !== null && _b !==
|
|
464
|
+
stroke: (_a = params.color) !== null && _a !== void 0 ? _a : "#ff0000",
|
|
465
|
+
strokeWidth: (_b = params.lineWidth) !== null && _b !== void 0 ? _b : 4,
|
|
466
466
|
globalCompositeOperation: "source-over",
|
|
467
467
|
lineCap: "round",
|
|
468
468
|
lineJoin: "round",
|
|
469
469
|
x: params.position.x,
|
|
470
470
|
y: params.position.y,
|
|
471
|
-
width: (_c = params.width) !== null && _c !==
|
|
472
|
-
height: (_d = params.height) !== null && _d !==
|
|
471
|
+
width: (_c = params.width) !== null && _c !== void 0 ? _c : 200,
|
|
472
|
+
height: (_d = params.height) !== null && _d !== void 0 ? _d : 200,
|
|
473
473
|
draggable: true,
|
|
474
474
|
strokeScaleEnabled: false
|
|
475
475
|
});
|
|
@@ -481,7 +481,7 @@ class KonvaRectangle {
|
|
|
481
481
|
x: params.position2.x,
|
|
482
482
|
y: params.position2.y
|
|
483
483
|
}));
|
|
484
|
-
this._ref.on("transform",
|
|
484
|
+
this._ref.on("transform", e => {
|
|
485
485
|
const attrs = e.target.attrs;
|
|
486
486
|
const scaleByX = Math.abs(attrs.scaleX - 1) > 1e-5;
|
|
487
487
|
const scaleByY = Math.abs(attrs.scaleY - 1) > 1e-5;
|
|
@@ -503,8 +503,8 @@ class KonvaRectangle {
|
|
|
503
503
|
x: 1,
|
|
504
504
|
y: 1
|
|
505
505
|
});
|
|
506
|
-
})
|
|
507
|
-
this._ref.on("transformend",
|
|
506
|
+
});
|
|
507
|
+
this._ref.on("transformend", e => {
|
|
508
508
|
const attrs = e.target.attrs;
|
|
509
509
|
if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
|
|
510
510
|
const absoluteTransform = this._ref.getStage().getAbsoluteTransform();
|
|
@@ -517,8 +517,8 @@ class KonvaRectangle {
|
|
|
517
517
|
x: position.x + this._ref.width(),
|
|
518
518
|
y: position.y + this._ref.height()
|
|
519
519
|
}));
|
|
520
|
-
})
|
|
521
|
-
this._ref.on("dragend", (
|
|
520
|
+
});
|
|
521
|
+
this._ref.on("dragend", () => {
|
|
522
522
|
const absoluteTransform = this._ref.getStage().getAbsoluteTransform();
|
|
523
523
|
const position = absoluteTransform.point({
|
|
524
524
|
x: this._ref.x(),
|
|
@@ -529,7 +529,7 @@ class KonvaRectangle {
|
|
|
529
529
|
x: position.x + this._ref.width(),
|
|
530
530
|
y: position.y + this._ref.height()
|
|
531
531
|
}));
|
|
532
|
-
})
|
|
532
|
+
});
|
|
533
533
|
this._ref.id(this._ref._id.toString());
|
|
534
534
|
}
|
|
535
535
|
getPosition() {
|
|
@@ -670,7 +670,7 @@ class KonvaEllipse {
|
|
|
670
670
|
y: 0
|
|
671
671
|
};
|
|
672
672
|
if (params.position2) {
|
|
673
|
-
(_a = params.radius) !== null && _a !==
|
|
673
|
+
(_a = params.radius) !== null && _a !== void 0 ? _a : params.radius = {
|
|
674
674
|
x: 0,
|
|
675
675
|
y: 0
|
|
676
676
|
};
|
|
@@ -683,8 +683,8 @@ class KonvaEllipse {
|
|
|
683
683
|
};
|
|
684
684
|
}
|
|
685
685
|
this._ref = new Konva.Ellipse({
|
|
686
|
-
stroke: (_b = params.color) !== null && _b !==
|
|
687
|
-
strokeWidth: (_c = params.lineWidth) !== null && _c !==
|
|
686
|
+
stroke: (_b = params.color) !== null && _b !== void 0 ? _b : "#ff0000",
|
|
687
|
+
strokeWidth: (_c = params.lineWidth) !== null && _c !== void 0 ? _c : 4,
|
|
688
688
|
globalCompositeOperation: "source-over",
|
|
689
689
|
lineCap: "round",
|
|
690
690
|
lineJoin: "round",
|
|
@@ -707,7 +707,7 @@ class KonvaEllipse {
|
|
|
707
707
|
x: this._ref.x(),
|
|
708
708
|
y: this._ref.y() + params.radius.y
|
|
709
709
|
}));
|
|
710
|
-
this._ref.on("transform",
|
|
710
|
+
this._ref.on("transform", e => {
|
|
711
711
|
const attrs = e.target.attrs;
|
|
712
712
|
if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
|
|
713
713
|
const scaleByX = Math.abs(attrs.scaleX - 1) > 1e-5;
|
|
@@ -742,8 +742,8 @@ class KonvaEllipse {
|
|
|
742
742
|
x: 1,
|
|
743
743
|
y: 1
|
|
744
744
|
});
|
|
745
|
-
})
|
|
746
|
-
this._ref.on("transformend", (
|
|
745
|
+
});
|
|
746
|
+
this._ref.on("transformend", () => {
|
|
747
747
|
const absoluteTransform = this._ref.getStage().getAbsoluteTransform();
|
|
748
748
|
const position = absoluteTransform.point({
|
|
749
749
|
x: this._ref.x(),
|
|
@@ -760,8 +760,8 @@ class KonvaEllipse {
|
|
|
760
760
|
y: this._ref.y() + this._ref.radiusY()
|
|
761
761
|
});
|
|
762
762
|
this._ref.setAttr("wcsRadiusY", this._worldTransformer.screenToWorld(radiusY));
|
|
763
|
-
})
|
|
764
|
-
this._ref.on("dragend", (
|
|
763
|
+
});
|
|
764
|
+
this._ref.on("dragend", () => {
|
|
765
765
|
const absoluteTransform = this._ref.getStage().getAbsoluteTransform();
|
|
766
766
|
const position = absoluteTransform.point({
|
|
767
767
|
x: this._ref.x(),
|
|
@@ -778,7 +778,7 @@ class KonvaEllipse {
|
|
|
778
778
|
y: this._ref.y() + this._ref.radiusY()
|
|
779
779
|
});
|
|
780
780
|
this._ref.setAttr("wcsRadiusY", this._worldTransformer.screenToWorld(radiusY));
|
|
781
|
-
})
|
|
781
|
+
});
|
|
782
782
|
this._ref.id(this._ref._id.toString());
|
|
783
783
|
}
|
|
784
784
|
getPosition() {
|
|
@@ -903,8 +903,8 @@ class KonvaArrow {
|
|
|
903
903
|
y: 100
|
|
904
904
|
};
|
|
905
905
|
this._ref = new Konva.Arrow({
|
|
906
|
-
stroke: (_a = params.color) !== null && _a !==
|
|
907
|
-
fill: (_b = params.color) !== null && _b !==
|
|
906
|
+
stroke: (_a = params.color) !== null && _a !== void 0 ? _a : "#ff0000",
|
|
907
|
+
fill: (_b = params.color) !== null && _b !== void 0 ? _b : "#ff0000",
|
|
908
908
|
strokeWidth: 4,
|
|
909
909
|
globalCompositeOperation: "source-over",
|
|
910
910
|
lineCap: "round",
|
|
@@ -921,7 +921,7 @@ class KonvaArrow {
|
|
|
921
921
|
x: params.end.x,
|
|
922
922
|
y: params.end.y
|
|
923
923
|
}));
|
|
924
|
-
this._ref.on("transformend",
|
|
924
|
+
this._ref.on("transformend", e => {
|
|
925
925
|
const attrs = e.target.attrs;
|
|
926
926
|
if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
|
|
927
927
|
const points = this._ref.points();
|
|
@@ -936,8 +936,8 @@ class KonvaArrow {
|
|
|
936
936
|
});
|
|
937
937
|
this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld(transformStart));
|
|
938
938
|
this._ref.setAttr("wcsEnd", this._worldTransformer.screenToWorld(transformEnd));
|
|
939
|
-
})
|
|
940
|
-
this._ref.on("dragend",
|
|
939
|
+
});
|
|
940
|
+
this._ref.on("dragend", e => {
|
|
941
941
|
const points = this._ref.points();
|
|
942
942
|
const absoluteTransform = e.target.getAbsoluteTransform();
|
|
943
943
|
const transformStart = absoluteTransform.point({
|
|
@@ -950,7 +950,7 @@ class KonvaArrow {
|
|
|
950
950
|
});
|
|
951
951
|
this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld(transformStart));
|
|
952
952
|
this._ref.setAttr("wcsEnd", this._worldTransformer.screenToWorld(transformEnd));
|
|
953
|
-
})
|
|
953
|
+
});
|
|
954
954
|
this._ref.id(this._ref._id.toString());
|
|
955
955
|
}
|
|
956
956
|
ref() {
|
|
@@ -1137,15 +1137,15 @@ class KonvaImage {
|
|
|
1137
1137
|
x: params.position.x,
|
|
1138
1138
|
y: params.position.y,
|
|
1139
1139
|
image: this._canvasImage,
|
|
1140
|
-
width: (_a = params.width) !== null && _a !==
|
|
1141
|
-
height: (_b = params.height) !== null && _b !==
|
|
1140
|
+
width: (_a = params.width) !== null && _a !== void 0 ? _a : 0,
|
|
1141
|
+
height: (_b = params.height) !== null && _b !== void 0 ? _b : 0,
|
|
1142
1142
|
draggable: true
|
|
1143
1143
|
});
|
|
1144
1144
|
this._ref.setAttr("wcsStart", this._worldTransformer.screenToWorld({
|
|
1145
1145
|
x: params.position.x,
|
|
1146
1146
|
y: params.position.y
|
|
1147
1147
|
}));
|
|
1148
|
-
this._ref.on("transform",
|
|
1148
|
+
this._ref.on("transform", e => {
|
|
1149
1149
|
const attrs = e.target.attrs;
|
|
1150
1150
|
if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
|
|
1151
1151
|
const scaleByX = Math.abs(attrs.scaleX - 1) > 1e-5;
|
|
@@ -1174,8 +1174,8 @@ class KonvaImage {
|
|
|
1174
1174
|
x: 1,
|
|
1175
1175
|
y: 1
|
|
1176
1176
|
});
|
|
1177
|
-
})
|
|
1178
|
-
this._ref.on("transformend", (
|
|
1177
|
+
});
|
|
1178
|
+
this._ref.on("transformend", () => {
|
|
1179
1179
|
const absoluteTransform = this._ref.getStage().getAbsoluteTransform();
|
|
1180
1180
|
const position = absoluteTransform.point({
|
|
1181
1181
|
x: this._ref.x(),
|
|
@@ -1186,8 +1186,8 @@ class KonvaImage {
|
|
|
1186
1186
|
x: position.x + this._ref.width(),
|
|
1187
1187
|
y: position.y + this._ref.height()
|
|
1188
1188
|
}));
|
|
1189
|
-
})
|
|
1190
|
-
this._ref.on("dragend", (
|
|
1189
|
+
});
|
|
1190
|
+
this._ref.on("dragend", () => {
|
|
1191
1191
|
const absoluteTransform = this._ref.getStage().getAbsoluteTransform();
|
|
1192
1192
|
const position = absoluteTransform.point({
|
|
1193
1193
|
x: this._ref.x(),
|
|
@@ -1198,7 +1198,7 @@ class KonvaImage {
|
|
|
1198
1198
|
x: position.x + this._ref.width(),
|
|
1199
1199
|
y: position.y + this._ref.height()
|
|
1200
1200
|
}));
|
|
1201
|
-
})
|
|
1201
|
+
});
|
|
1202
1202
|
this._ref.id(this._ref._id.toString());
|
|
1203
1203
|
}
|
|
1204
1204
|
getSrc() {
|
|
@@ -1352,10 +1352,10 @@ class KonvaCloud {
|
|
|
1352
1352
|
this._ref = new Konva.Shape({
|
|
1353
1353
|
x: params.position.x,
|
|
1354
1354
|
y: params.position.y,
|
|
1355
|
-
width: (_a = params.width) !== null && _a !==
|
|
1356
|
-
height: (_b = params.height) !== null && _b !==
|
|
1357
|
-
stroke: (_c = params.color) !== null && _c !==
|
|
1358
|
-
strokeWidth: (_d = params.lineWidth) !== null && _d !==
|
|
1355
|
+
width: (_a = params.width) !== null && _a !== void 0 ? _a : 200,
|
|
1356
|
+
height: (_b = params.height) !== null && _b !== void 0 ? _b : 200,
|
|
1357
|
+
stroke: (_c = params.color) !== null && _c !== void 0 ? _c : "#ff0000",
|
|
1358
|
+
strokeWidth: (_d = params.lineWidth) !== null && _d !== void 0 ? _d : 4,
|
|
1359
1359
|
draggable: true,
|
|
1360
1360
|
strokeScaleEnabled: false,
|
|
1361
1361
|
globalCompositeOperation: "source-over",
|
|
@@ -1441,7 +1441,7 @@ class KonvaCloud {
|
|
|
1441
1441
|
x: params.position2.x,
|
|
1442
1442
|
y: params.position2.y
|
|
1443
1443
|
}));
|
|
1444
|
-
this._ref.on("transform",
|
|
1444
|
+
this._ref.on("transform", e => {
|
|
1445
1445
|
const attrs = e.target.attrs;
|
|
1446
1446
|
const scaleByX = Math.abs(attrs.scaleX - 1) > 1e-5;
|
|
1447
1447
|
const scaleByY = Math.abs(attrs.scaleY - 1) > 1e-5;
|
|
@@ -1461,8 +1461,8 @@ class KonvaCloud {
|
|
|
1461
1461
|
x: 1,
|
|
1462
1462
|
y: 1
|
|
1463
1463
|
});
|
|
1464
|
-
})
|
|
1465
|
-
this._ref.on("transformend",
|
|
1464
|
+
});
|
|
1465
|
+
this._ref.on("transformend", e => {
|
|
1466
1466
|
const attrs = e.target.attrs;
|
|
1467
1467
|
if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
|
|
1468
1468
|
const absoluteTransform = this._ref.getStage().getAbsoluteTransform();
|
|
@@ -1475,8 +1475,8 @@ class KonvaCloud {
|
|
|
1475
1475
|
x: position.x + this._ref.width(),
|
|
1476
1476
|
y: position.y + this._ref.height()
|
|
1477
1477
|
}));
|
|
1478
|
-
})
|
|
1479
|
-
this._ref.on("dragend", (
|
|
1478
|
+
});
|
|
1479
|
+
this._ref.on("dragend", () => {
|
|
1480
1480
|
const absoluteTransform = this._ref.getStage().getAbsoluteTransform();
|
|
1481
1481
|
const position = absoluteTransform.point({
|
|
1482
1482
|
x: this._ref.x(),
|
|
@@ -1487,7 +1487,7 @@ class KonvaCloud {
|
|
|
1487
1487
|
x: position.x + this._ref.width(),
|
|
1488
1488
|
y: position.y + this._ref.height()
|
|
1489
1489
|
}));
|
|
1490
|
-
})
|
|
1490
|
+
});
|
|
1491
1491
|
this._ref.getSelfRect = () => ({
|
|
1492
1492
|
x: 0 - ARC_RADIUS,
|
|
1493
1493
|
y: 0 - ARC_RADIUS,
|
|
@@ -1636,10 +1636,10 @@ function debounce(func, wait) {
|
|
|
1636
1636
|
if (timeout) {
|
|
1637
1637
|
clearTimeout(timeout);
|
|
1638
1638
|
}
|
|
1639
|
-
timeout = setTimeout((
|
|
1639
|
+
timeout = setTimeout(() => {
|
|
1640
1640
|
timeout = null;
|
|
1641
1641
|
func(...args);
|
|
1642
|
-
}
|
|
1642
|
+
}, wait);
|
|
1643
1643
|
};
|
|
1644
1644
|
}
|
|
1645
1645
|
|
|
@@ -1652,7 +1652,7 @@ class KonvaMarkup {
|
|
|
1652
1652
|
this.fontSize = 34;
|
|
1653
1653
|
this.changeActiveDragger = event => {
|
|
1654
1654
|
const draggerName = event.data;
|
|
1655
|
-
this._markupContainer.className = this._container.className.split(" ").filter(
|
|
1655
|
+
this._markupContainer.className = this._container.className.split(" ").filter(x => !x.startsWith("oda-cursor-")).filter(x => x).concat(`oda-cursor-${draggerName.toLowerCase()}`).join(" ");
|
|
1656
1656
|
this.removeTextInput();
|
|
1657
1657
|
this.removeImageInput();
|
|
1658
1658
|
this.enableEditMode(draggerName);
|
|
@@ -1664,9 +1664,9 @@ class KonvaMarkup {
|
|
|
1664
1664
|
if (!this._konvaStage) return;
|
|
1665
1665
|
this._konvaStage.width(width);
|
|
1666
1666
|
this._konvaStage.height(height);
|
|
1667
|
-
this.getObjects().forEach(
|
|
1667
|
+
this.getObjects().forEach(markupObject => {
|
|
1668
1668
|
markupObject.updateScreenCoordinates();
|
|
1669
|
-
})
|
|
1669
|
+
});
|
|
1670
1670
|
};
|
|
1671
1671
|
this.resizeViewer = event => {
|
|
1672
1672
|
const {width: width, height: height} = event;
|
|
@@ -1674,19 +1674,19 @@ class KonvaMarkup {
|
|
|
1674
1674
|
if (!this._konvaStage) return;
|
|
1675
1675
|
this._konvaStage.width(width);
|
|
1676
1676
|
this._konvaStage.height(height);
|
|
1677
|
-
this.getObjects().forEach(
|
|
1677
|
+
this.getObjects().forEach(markupObject => {
|
|
1678
1678
|
markupObject.updateScreenCoordinates();
|
|
1679
|
-
})
|
|
1679
|
+
});
|
|
1680
1680
|
};
|
|
1681
1681
|
this.pan = () => {
|
|
1682
|
-
this.getObjects().forEach(
|
|
1682
|
+
this.getObjects().forEach(markupObject => {
|
|
1683
1683
|
markupObject.updateScreenCoordinates();
|
|
1684
|
-
})
|
|
1684
|
+
});
|
|
1685
1685
|
};
|
|
1686
1686
|
this.zoomAt = () => {
|
|
1687
|
-
this.getObjects().forEach(
|
|
1687
|
+
this.getObjects().forEach(markupObject => {
|
|
1688
1688
|
markupObject.updateScreenCoordinates();
|
|
1689
|
-
})
|
|
1689
|
+
});
|
|
1690
1690
|
};
|
|
1691
1691
|
this.redirectToViewer = event => {
|
|
1692
1692
|
if (this._viewer) this._viewer.emit(event);
|
|
@@ -1701,7 +1701,7 @@ class KonvaMarkup {
|
|
|
1701
1701
|
initialize(container, containerEvents, viewer, worldTransformer) {
|
|
1702
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?');
|
|
1703
1703
|
this._viewer = viewer;
|
|
1704
|
-
this._worldTransformer = worldTransformer !== null && worldTransformer !==
|
|
1704
|
+
this._worldTransformer = worldTransformer !== null && worldTransformer !== void 0 ? worldTransformer : new WorldTransform;
|
|
1705
1705
|
this._container = container;
|
|
1706
1706
|
this._markupContainer = document.createElement("div");
|
|
1707
1707
|
this._markupContainer.id = "markup-container";
|
|
@@ -1729,9 +1729,9 @@ class KonvaMarkup {
|
|
|
1729
1729
|
this._viewer.removeEventListener("changeactivedragger", this.changeActiveDragger);
|
|
1730
1730
|
}
|
|
1731
1731
|
this.destroyKonva();
|
|
1732
|
-
(_a = this._resizeObserver) === null || _a ===
|
|
1732
|
+
(_a = this._resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
1733
1733
|
this._resizeObserver = undefined;
|
|
1734
|
-
(_b = this._markupContainer) === null || _b ===
|
|
1734
|
+
(_b = this._markupContainer) === null || _b === void 0 ? void 0 : _b.remove();
|
|
1735
1735
|
this._markupContainer = undefined;
|
|
1736
1736
|
this._container = undefined;
|
|
1737
1737
|
this._viewer = undefined;
|
|
@@ -1743,7 +1743,7 @@ class KonvaMarkup {
|
|
|
1743
1743
|
this.removeTextInput();
|
|
1744
1744
|
this.removeImageInput();
|
|
1745
1745
|
this.clearSelected();
|
|
1746
|
-
this.getObjects().forEach(
|
|
1746
|
+
this.getObjects().forEach(obj => obj.delete());
|
|
1747
1747
|
}
|
|
1748
1748
|
getMarkupColor() {
|
|
1749
1749
|
return this._markupColor.asRGB();
|
|
@@ -1762,17 +1762,17 @@ class KonvaMarkup {
|
|
|
1762
1762
|
colorizeAllMarkup(r, g, b) {
|
|
1763
1763
|
this.setMarkupColor(r, g, b);
|
|
1764
1764
|
const hexColor = new MarkupColor(r, g, b).asHex();
|
|
1765
|
-
this.getObjects().filter(
|
|
1765
|
+
this.getObjects().filter(obj => {
|
|
1766
1766
|
var _a;
|
|
1767
|
-
return (_a = obj.setColor) === null || _a ===
|
|
1768
|
-
})
|
|
1767
|
+
return (_a = obj.setColor) === null || _a === void 0 ? void 0 : _a.call(obj, hexColor);
|
|
1768
|
+
});
|
|
1769
1769
|
}
|
|
1770
1770
|
colorizeSelectedMarkups(r, g, b) {
|
|
1771
1771
|
const hexColor = new MarkupColor(r, g, b).asHex();
|
|
1772
|
-
this.getSelectedObjects().filter(
|
|
1772
|
+
this.getSelectedObjects().filter(obj => {
|
|
1773
1773
|
var _a;
|
|
1774
|
-
return (_a = obj.setColor) === null || _a ===
|
|
1775
|
-
})
|
|
1774
|
+
return (_a = obj.setColor) === null || _a === void 0 ? void 0 : _a.call(obj, hexColor);
|
|
1775
|
+
});
|
|
1776
1776
|
}
|
|
1777
1777
|
setViewpoint(viewpoint) {
|
|
1778
1778
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
@@ -1787,51 +1787,51 @@ class KonvaMarkup {
|
|
|
1787
1787
|
x: 0,
|
|
1788
1788
|
y: 0
|
|
1789
1789
|
});
|
|
1790
|
-
const markupColor = ((_a = viewpoint.custom_fields) === null || _a ===
|
|
1790
|
+
const markupColor = ((_a = viewpoint.custom_fields) === null || _a === void 0 ? void 0 : _a.markup_color) || {
|
|
1791
1791
|
r: 255,
|
|
1792
1792
|
g: 0,
|
|
1793
1793
|
b: 0
|
|
1794
1794
|
};
|
|
1795
1795
|
this.setMarkupColor(markupColor.r, markupColor.g, markupColor.b);
|
|
1796
|
-
(_b = viewpoint.lines) === null || _b ===
|
|
1796
|
+
(_b = viewpoint.lines) === null || _b === void 0 ? void 0 : _b.forEach(line => {
|
|
1797
1797
|
const linePoints = [];
|
|
1798
|
-
line.points.forEach(
|
|
1798
|
+
line.points.forEach(point => {
|
|
1799
1799
|
const screenPoint = this._worldTransformer.worldToScreen(point);
|
|
1800
1800
|
linePoints.push(screenPoint.x);
|
|
1801
1801
|
linePoints.push(screenPoint.y);
|
|
1802
|
-
})
|
|
1802
|
+
});
|
|
1803
1803
|
this.addLine(linePoints, line.color, line.type, line.width, line.id);
|
|
1804
|
-
})
|
|
1805
|
-
(_c = viewpoint.texts) === null || _c ===
|
|
1804
|
+
});
|
|
1805
|
+
(_c = viewpoint.texts) === null || _c === void 0 ? void 0 : _c.forEach(text => {
|
|
1806
1806
|
const screenPoint = this._worldTransformer.worldToScreen(text.position);
|
|
1807
1807
|
this.addText(text.text, screenPoint, text.angle, text.color, text.text_size, text.font_size, text.id);
|
|
1808
|
-
})
|
|
1809
|
-
(_d = viewpoint.rectangles) === null || _d ===
|
|
1808
|
+
});
|
|
1809
|
+
(_d = viewpoint.rectangles) === null || _d === void 0 ? void 0 : _d.forEach(rect => {
|
|
1810
1810
|
const screenPoint = this._worldTransformer.worldToScreen(rect.position);
|
|
1811
1811
|
const screenPoint2 = rect.position2 ? this._worldTransformer.worldToScreen(rect.position2) : null;
|
|
1812
1812
|
this.addRectangle(screenPoint, screenPoint2, rect.width, rect.height, rect.line_width, rect.color, rect.id);
|
|
1813
|
-
})
|
|
1814
|
-
(_e = viewpoint.ellipses) === null || _e ===
|
|
1813
|
+
});
|
|
1814
|
+
(_e = viewpoint.ellipses) === null || _e === void 0 ? void 0 : _e.forEach(ellipse => {
|
|
1815
1815
|
const screenPoint = this._worldTransformer.worldToScreen(ellipse.position);
|
|
1816
1816
|
const screenPoint2 = ellipse.position2 ? this._worldTransformer.worldToScreen(ellipse.position2) : null;
|
|
1817
1817
|
const screenPoint3 = ellipse.position3 ? this._worldTransformer.worldToScreen(ellipse.position3) : null;
|
|
1818
1818
|
this.addEllipse(screenPoint, screenPoint2, screenPoint3, ellipse.radius, ellipse.line_width, ellipse.color, ellipse.id);
|
|
1819
|
-
})
|
|
1820
|
-
(_f = viewpoint.arrows) === null || _f ===
|
|
1819
|
+
});
|
|
1820
|
+
(_f = viewpoint.arrows) === null || _f === void 0 ? void 0 : _f.forEach(arrow => {
|
|
1821
1821
|
const startPoint = this._worldTransformer.worldToScreen(arrow.start);
|
|
1822
1822
|
const endPoint = this._worldTransformer.worldToScreen(arrow.end);
|
|
1823
1823
|
this.addArrow(startPoint, endPoint, arrow.color, arrow.id);
|
|
1824
|
-
})
|
|
1825
|
-
(_g = viewpoint.clouds) === null || _g ===
|
|
1824
|
+
});
|
|
1825
|
+
(_g = viewpoint.clouds) === null || _g === void 0 ? void 0 : _g.forEach(cloud => {
|
|
1826
1826
|
const screenPoint = this._worldTransformer.worldToScreen(cloud.position);
|
|
1827
1827
|
const screenPoint2 = cloud.position2 ? this._worldTransformer.worldToScreen(cloud.position2) : null;
|
|
1828
1828
|
this.addCloud(screenPoint, screenPoint2, cloud.width, cloud.height, cloud.line_width, cloud.color, cloud.id);
|
|
1829
|
-
})
|
|
1830
|
-
(_h = viewpoint.images) === null || _h ===
|
|
1829
|
+
});
|
|
1830
|
+
(_h = viewpoint.images) === null || _h === void 0 ? void 0 : _h.forEach(image => {
|
|
1831
1831
|
const screenPoint = this._worldTransformer.worldToScreen(image.position);
|
|
1832
1832
|
const screenPoint2 = image.position2 ? this._worldTransformer.worldToScreen(image.position2) : null;
|
|
1833
1833
|
this.addImage(screenPoint, screenPoint2, image.src, image.width, image.height, image.id);
|
|
1834
|
-
})
|
|
1834
|
+
});
|
|
1835
1835
|
}
|
|
1836
1836
|
getViewpoint(viewpoint) {
|
|
1837
1837
|
if (!viewpoint) viewpoint = {};
|
|
@@ -1873,23 +1873,23 @@ class KonvaMarkup {
|
|
|
1873
1873
|
}
|
|
1874
1874
|
getObjects() {
|
|
1875
1875
|
const objects = [];
|
|
1876
|
-
Object.keys(MarkupMode2Konva).forEach(
|
|
1876
|
+
Object.keys(MarkupMode2Konva).forEach(type => {
|
|
1877
1877
|
const konvaShape = MarkupMode2Konva[type];
|
|
1878
|
-
this.konvaLayerFind(type).forEach(
|
|
1879
|
-
})
|
|
1878
|
+
this.konvaLayerFind(type).forEach(ref => objects.push(konvaShape.initializer(ref, null, this._worldTransformer)));
|
|
1879
|
+
});
|
|
1880
1880
|
return objects;
|
|
1881
1881
|
}
|
|
1882
1882
|
getSelectedObjects() {
|
|
1883
1883
|
if (!this._konvaTransformer) return [];
|
|
1884
|
-
return this._konvaTransformer.nodes().map(
|
|
1884
|
+
return this._konvaTransformer.nodes().map(ref => {
|
|
1885
1885
|
const name = ref.className;
|
|
1886
|
-
const konvaShape = Object.values(MarkupMode2Konva).find(
|
|
1886
|
+
const konvaShape = Object.values(MarkupMode2Konva).find(shape => shape.name === name);
|
|
1887
1887
|
return konvaShape ? konvaShape.initializer(ref, null, this._worldTransformer) : null;
|
|
1888
|
-
})
|
|
1888
|
+
}).filter(x => x);
|
|
1889
1889
|
}
|
|
1890
1890
|
selectObjects(objects) {
|
|
1891
1891
|
if (!this._konvaTransformer) return;
|
|
1892
|
-
const selectedObjs = this._konvaTransformer.nodes().concat(objects.map(
|
|
1892
|
+
const selectedObjs = this._konvaTransformer.nodes().concat(objects.map(x => x.ref()));
|
|
1893
1893
|
this._konvaTransformer.nodes(selectedObjs);
|
|
1894
1894
|
}
|
|
1895
1895
|
clearSelected() {
|
|
@@ -1902,7 +1902,7 @@ class KonvaMarkup {
|
|
|
1902
1902
|
if (!this._konvaLayer) return [];
|
|
1903
1903
|
const konvaShape = MarkupMode2Konva[type];
|
|
1904
1904
|
if (!konvaShape || !konvaShape.initializer) return [];
|
|
1905
|
-
return this._konvaLayer.find(konvaShape.name).filter(
|
|
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);
|
|
1906
1906
|
}
|
|
1907
1907
|
initializeKonva() {
|
|
1908
1908
|
const stage = new Konva.Stage({
|
|
@@ -1933,7 +1933,7 @@ class KonvaMarkup {
|
|
|
1933
1933
|
let lastLine;
|
|
1934
1934
|
let mouseDownPos;
|
|
1935
1935
|
let lastObj;
|
|
1936
|
-
stage.on("mousedown touchstart",
|
|
1936
|
+
stage.on("mousedown touchstart", e => {
|
|
1937
1937
|
if (!this._markupIsActive || e.target !== stage || this._markupMode === "Text" || this._markupMode === "Image") return;
|
|
1938
1938
|
if (e.target === stage && transformer.nodes().length > 0) {
|
|
1939
1939
|
transformer.nodes([]);
|
|
@@ -1941,12 +1941,12 @@ class KonvaMarkup {
|
|
|
1941
1941
|
}
|
|
1942
1942
|
const pos = this.getRelativePointerPosition(stage);
|
|
1943
1943
|
mouseDownPos = pos;
|
|
1944
|
-
isPaint = [ "Arrow", "Cloud", "Ellipse", "Line", "Rectangle" ].some(
|
|
1944
|
+
isPaint = [ "Arrow", "Cloud", "Ellipse", "Line", "Rectangle" ].some(m => m === this._markupMode);
|
|
1945
1945
|
if (this._markupMode === "Line") {
|
|
1946
1946
|
lastLine = this.addLine([ pos.x, pos.y, pos.x, pos.y ]);
|
|
1947
1947
|
}
|
|
1948
|
-
})
|
|
1949
|
-
stage.on("mouseup touchend", (
|
|
1948
|
+
});
|
|
1949
|
+
stage.on("mouseup touchend", () => {
|
|
1950
1950
|
if (!this._markupIsActive) return;
|
|
1951
1951
|
if (isPaint) {
|
|
1952
1952
|
const pos = this.getRelativePointerPosition(stage);
|
|
@@ -1987,8 +1987,8 @@ class KonvaMarkup {
|
|
|
1987
1987
|
}
|
|
1988
1988
|
lastObj = undefined;
|
|
1989
1989
|
isPaint = false;
|
|
1990
|
-
})
|
|
1991
|
-
stage.on("mousemove touchmove", (
|
|
1990
|
+
});
|
|
1991
|
+
stage.on("mousemove touchmove", () => {
|
|
1992
1992
|
if (!this._markupIsActive) return;
|
|
1993
1993
|
if (!isPaint) {
|
|
1994
1994
|
return;
|
|
@@ -2043,8 +2043,8 @@ class KonvaMarkup {
|
|
|
2043
2043
|
y: startY
|
|
2044
2044
|
}, null, dX, dY);
|
|
2045
2045
|
}
|
|
2046
|
-
})
|
|
2047
|
-
stage.on("click tap",
|
|
2046
|
+
});
|
|
2047
|
+
stage.on("click tap", e => {
|
|
2048
2048
|
if (!this._markupIsActive) return;
|
|
2049
2049
|
if (e.target === stage) {
|
|
2050
2050
|
if (this._markupMode === "Text") {
|
|
@@ -2086,7 +2086,7 @@ class KonvaMarkup {
|
|
|
2086
2086
|
this.removeImageInput();
|
|
2087
2087
|
}
|
|
2088
2088
|
}
|
|
2089
|
-
if (transformer.nodes().filter(
|
|
2089
|
+
if (transformer.nodes().filter(x => x.className === "Cloud" || x.className === "Image").length > 0 || e.target.className === "Cloud" || e.target.className === "Image") {
|
|
2090
2090
|
transformer.rotateEnabled(false);
|
|
2091
2091
|
} else {
|
|
2092
2092
|
transformer.rotateEnabled(true);
|
|
@@ -2103,26 +2103,26 @@ class KonvaMarkup {
|
|
|
2103
2103
|
const nodes = transformer.nodes().concat([ e.target ]);
|
|
2104
2104
|
transformer.nodes(nodes);
|
|
2105
2105
|
}
|
|
2106
|
-
})
|
|
2106
|
+
});
|
|
2107
2107
|
const container = stage.container();
|
|
2108
2108
|
container.tabIndex = 1;
|
|
2109
2109
|
container.focus();
|
|
2110
|
-
container.addEventListener("keydown",
|
|
2110
|
+
container.addEventListener("keydown", e => {
|
|
2111
2111
|
if (!this._markupIsActive) return;
|
|
2112
2112
|
if (e.code === "Delete") {
|
|
2113
|
-
this.getSelectedObjects().forEach(
|
|
2113
|
+
this.getSelectedObjects().forEach(obj => obj.delete());
|
|
2114
2114
|
this.clearSelected();
|
|
2115
2115
|
return;
|
|
2116
2116
|
}
|
|
2117
2117
|
e.preventDefault();
|
|
2118
|
-
})
|
|
2118
|
+
});
|
|
2119
2119
|
}
|
|
2120
2120
|
destroyKonva() {
|
|
2121
2121
|
var _a;
|
|
2122
2122
|
this.removeTextInput();
|
|
2123
2123
|
this.removeImageInput();
|
|
2124
2124
|
this.clearOverlay();
|
|
2125
|
-
(_a = this._konvaStage) === null || _a ===
|
|
2125
|
+
(_a = this._konvaStage) === null || _a === void 0 ? void 0 : _a.destroy();
|
|
2126
2126
|
this._groupImages = undefined;
|
|
2127
2127
|
this._groupGeometry = undefined;
|
|
2128
2128
|
this._groupTexts = undefined;
|
|
@@ -2132,7 +2132,7 @@ class KonvaMarkup {
|
|
|
2132
2132
|
}
|
|
2133
2133
|
getMarkupLines() {
|
|
2134
2134
|
const lines = [];
|
|
2135
|
-
this.konvaLayerFind("Line").forEach(
|
|
2135
|
+
this.konvaLayerFind("Line").forEach(ref => {
|
|
2136
2136
|
const wcsPoints = ref.getAttr("wcsPoints");
|
|
2137
2137
|
if (!wcsPoints) return;
|
|
2138
2138
|
const konvaLine = new KonvaLine(null, ref, this._worldTransformer);
|
|
@@ -2144,12 +2144,12 @@ class KonvaMarkup {
|
|
|
2144
2144
|
width: konvaLine.getLineWidth() || this.lineWidth
|
|
2145
2145
|
};
|
|
2146
2146
|
lines.push(line);
|
|
2147
|
-
})
|
|
2147
|
+
});
|
|
2148
2148
|
return lines;
|
|
2149
2149
|
}
|
|
2150
2150
|
getMarkupTexts() {
|
|
2151
2151
|
const texts = [];
|
|
2152
|
-
this.konvaLayerFind("Text").forEach(
|
|
2152
|
+
this.konvaLayerFind("Text").forEach(ref => {
|
|
2153
2153
|
const textSize = .02;
|
|
2154
2154
|
const textScale = this._worldTransformer.getScale();
|
|
2155
2155
|
const wcsPosition = ref.getAttr("wcsStart");
|
|
@@ -2165,12 +2165,12 @@ class KonvaMarkup {
|
|
|
2165
2165
|
font_size: shape.getFontSize() * stageAbsoluteTransform.getMatrix()[0]
|
|
2166
2166
|
};
|
|
2167
2167
|
texts.push(text);
|
|
2168
|
-
})
|
|
2168
|
+
});
|
|
2169
2169
|
return texts;
|
|
2170
2170
|
}
|
|
2171
2171
|
getMarkupRectangles() {
|
|
2172
2172
|
const rectangles = [];
|
|
2173
|
-
this.konvaLayerFind("Rectangle").forEach(
|
|
2173
|
+
this.konvaLayerFind("Rectangle").forEach(ref => {
|
|
2174
2174
|
const wcsStart = ref.getAttr("wcsStart");
|
|
2175
2175
|
const wcsEnd = ref.getAttr("wcsEnd");
|
|
2176
2176
|
const screenStart = this._worldTransformer.worldToScreen(wcsStart);
|
|
@@ -2186,12 +2186,12 @@ class KonvaMarkup {
|
|
|
2186
2186
|
color: shape.getColor()
|
|
2187
2187
|
};
|
|
2188
2188
|
rectangles.push(rectangle);
|
|
2189
|
-
})
|
|
2189
|
+
});
|
|
2190
2190
|
return rectangles;
|
|
2191
2191
|
}
|
|
2192
2192
|
getMarkupEllipses() {
|
|
2193
2193
|
const ellipses = [];
|
|
2194
|
-
this.konvaLayerFind("Ellipse").forEach(
|
|
2194
|
+
this.konvaLayerFind("Ellipse").forEach(ref => {
|
|
2195
2195
|
const wcsPosition = ref.getAttr("wcsPosition");
|
|
2196
2196
|
const wcsPosition2 = ref.getAttr("wcsRadiusX");
|
|
2197
2197
|
const wcsPosition3 = ref.getAttr("wcsRadiusY");
|
|
@@ -2211,12 +2211,12 @@ class KonvaMarkup {
|
|
|
2211
2211
|
color: shape.getColor()
|
|
2212
2212
|
};
|
|
2213
2213
|
ellipses.push(ellipse);
|
|
2214
|
-
})
|
|
2214
|
+
});
|
|
2215
2215
|
return ellipses;
|
|
2216
2216
|
}
|
|
2217
2217
|
getMarkupArrows() {
|
|
2218
2218
|
const arrows = [];
|
|
2219
|
-
this.konvaLayerFind("Arrow").forEach(
|
|
2219
|
+
this.konvaLayerFind("Arrow").forEach(ref => {
|
|
2220
2220
|
const wcsStart = ref.getAttr("wcsStart");
|
|
2221
2221
|
const wcsEnd = ref.getAttr("wcsEnd");
|
|
2222
2222
|
const shape = new KonvaArrow(null, ref, this._worldTransformer);
|
|
@@ -2227,12 +2227,12 @@ class KonvaMarkup {
|
|
|
2227
2227
|
color: shape.getColor()
|
|
2228
2228
|
};
|
|
2229
2229
|
arrows.push(arrow);
|
|
2230
|
-
})
|
|
2230
|
+
});
|
|
2231
2231
|
return arrows;
|
|
2232
2232
|
}
|
|
2233
2233
|
getMarkupImages() {
|
|
2234
2234
|
const images = [];
|
|
2235
|
-
this.konvaLayerFind("Image").forEach(
|
|
2235
|
+
this.konvaLayerFind("Image").forEach(ref => {
|
|
2236
2236
|
const wcsStart = ref.getAttr("wcsStart");
|
|
2237
2237
|
const wcsEnd = ref.getAttr("wcsEnd");
|
|
2238
2238
|
const stageAbsoluteTransform = this._konvaStage.getAbsoluteTransform();
|
|
@@ -2247,12 +2247,12 @@ class KonvaMarkup {
|
|
|
2247
2247
|
height: shape.getHeight() * scale
|
|
2248
2248
|
};
|
|
2249
2249
|
images.push(image);
|
|
2250
|
-
})
|
|
2250
|
+
});
|
|
2251
2251
|
return images;
|
|
2252
2252
|
}
|
|
2253
2253
|
getMarkupClouds() {
|
|
2254
2254
|
const clouds = [];
|
|
2255
|
-
this.konvaLayerFind("Cloud").forEach(
|
|
2255
|
+
this.konvaLayerFind("Cloud").forEach(ref => {
|
|
2256
2256
|
const wcsStart = ref.getAttr("wcsStart");
|
|
2257
2257
|
const wcsEnd = ref.getAttr("wcsEnd");
|
|
2258
2258
|
const screenStart = this._worldTransformer.worldToScreen(wcsStart);
|
|
@@ -2268,7 +2268,7 @@ class KonvaMarkup {
|
|
|
2268
2268
|
color: shape.getColor()
|
|
2269
2269
|
};
|
|
2270
2270
|
clouds.push(cloud);
|
|
2271
|
-
})
|
|
2271
|
+
});
|
|
2272
2272
|
return clouds;
|
|
2273
2273
|
}
|
|
2274
2274
|
combineMarkupWithDrawing() {
|
|
@@ -2329,23 +2329,23 @@ class KonvaMarkup {
|
|
|
2329
2329
|
};
|
|
2330
2330
|
if (text) this._textInputRef.value = text;
|
|
2331
2331
|
document.body.appendChild(this._textInputRef);
|
|
2332
|
-
setTimeout((
|
|
2332
|
+
setTimeout(() => {
|
|
2333
2333
|
this._textInputRef.focus();
|
|
2334
|
-
}
|
|
2334
|
+
}, 50);
|
|
2335
2335
|
} else {
|
|
2336
2336
|
this.removeTextInput();
|
|
2337
2337
|
}
|
|
2338
2338
|
}
|
|
2339
2339
|
removeTextInput() {
|
|
2340
2340
|
var _a;
|
|
2341
|
-
(_a = this._textInputRef) === null || _a ===
|
|
2341
|
+
(_a = this._textInputRef) === null || _a === void 0 ? void 0 : _a.remove();
|
|
2342
2342
|
this._textInputRef = null;
|
|
2343
2343
|
this._textInputPos = null;
|
|
2344
2344
|
this._textInputAngle = 0;
|
|
2345
2345
|
}
|
|
2346
2346
|
createImageInput(pos) {
|
|
2347
2347
|
if (!this._imageInputRef) {
|
|
2348
|
-
const convertBase64 = file => new Promise((
|
|
2348
|
+
const convertBase64 = file => new Promise((resolve, reject) => {
|
|
2349
2349
|
const fileReader = new FileReader;
|
|
2350
2350
|
fileReader.readAsDataURL(file);
|
|
2351
2351
|
fileReader.onload = () => {
|
|
@@ -2354,7 +2354,7 @@ class KonvaMarkup {
|
|
|
2354
2354
|
fileReader.onerror = error => {
|
|
2355
2355
|
reject(error);
|
|
2356
2356
|
};
|
|
2357
|
-
})
|
|
2357
|
+
});
|
|
2358
2358
|
this._imageInputPos = pos;
|
|
2359
2359
|
this._imageInputRef = document.createElement("input");
|
|
2360
2360
|
this._imageInputRef.style.display = "none";
|
|
@@ -2372,23 +2372,23 @@ class KonvaMarkup {
|
|
|
2372
2372
|
this.removeImageInput();
|
|
2373
2373
|
};
|
|
2374
2374
|
document.body.appendChild(this._imageInputRef);
|
|
2375
|
-
setTimeout((
|
|
2375
|
+
setTimeout(() => {
|
|
2376
2376
|
this._imageInputRef.click();
|
|
2377
|
-
}
|
|
2377
|
+
}, 50);
|
|
2378
2378
|
} else {
|
|
2379
2379
|
this.removeImageInput();
|
|
2380
2380
|
}
|
|
2381
2381
|
}
|
|
2382
2382
|
removeImageInput() {
|
|
2383
2383
|
var _a;
|
|
2384
|
-
(_a = this._imageInputRef) === null || _a ===
|
|
2384
|
+
(_a = this._imageInputRef) === null || _a === void 0 ? void 0 : _a.remove();
|
|
2385
2385
|
this._imageInputRef = null;
|
|
2386
2386
|
this._imageInputPos = null;
|
|
2387
2387
|
}
|
|
2388
2388
|
addText(text, position, angle, color, textSize, fontSize, id) {
|
|
2389
2389
|
var _a;
|
|
2390
2390
|
if (!text) return;
|
|
2391
|
-
(_a = this.getSelectedObjects().
|
|
2391
|
+
(_a = this.getSelectedObjects().shift()) === null || _a === void 0 ? void 0 : _a.delete();
|
|
2392
2392
|
this.clearSelected();
|
|
2393
2393
|
this.removeTextInput();
|
|
2394
2394
|
const tolerance = 1e-6;
|
|
@@ -2467,7 +2467,7 @@ class KonvaMarkup {
|
|
|
2467
2467
|
addImage(position, position2, src, width, height, id) {
|
|
2468
2468
|
var _a;
|
|
2469
2469
|
if (!position || !src) return;
|
|
2470
|
-
(_a = this.getSelectedObjects().
|
|
2470
|
+
(_a = this.getSelectedObjects().shift()) === null || _a === void 0 ? void 0 : _a.delete();
|
|
2471
2471
|
this.clearSelected();
|
|
2472
2472
|
this.removeImageInput();
|
|
2473
2473
|
const konvaImage = new KonvaImage({
|