@inweb/markup 25.7.10 → 25.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/markup.js +45 -106
- package/dist/markup.js.map +1 -1
- package/dist/markup.min.js +1 -1
- package/dist/markup.module.js +39 -118
- package/dist/markup.module.js.map +1 -1
- package/lib/markup/Konva/KonvaMarkup.d.ts +1 -1
- package/package.json +3 -3
- package/src/markup/Konva/KonvaMarkup.ts +43 -120
package/dist/markup.js
CHANGED
|
@@ -12347,31 +12347,37 @@
|
|
|
12347
12347
|
},
|
|
12348
12348
|
Line: {
|
|
12349
12349
|
name: "Line",
|
|
12350
|
-
initializer: (ref) => new KonvaLine(
|
|
12350
|
+
initializer: (ref, params = null) => new KonvaLine(params, ref),
|
|
12351
|
+
zIndex: 1,
|
|
12351
12352
|
},
|
|
12352
12353
|
Text: {
|
|
12353
12354
|
name: "Text",
|
|
12354
|
-
initializer: (ref) => new KonvaText(
|
|
12355
|
+
initializer: (ref, params = null) => new KonvaText(params, ref),
|
|
12355
12356
|
},
|
|
12356
12357
|
Rectangle: {
|
|
12357
12358
|
name: "Rect",
|
|
12358
|
-
initializer: (ref) => new KonvaRectangle(
|
|
12359
|
+
initializer: (ref, params = null) => new KonvaRectangle(params, ref),
|
|
12360
|
+
zIndex: 1,
|
|
12359
12361
|
},
|
|
12360
12362
|
Ellipse: {
|
|
12361
12363
|
name: "Ellipse",
|
|
12362
|
-
initializer: (ref) => new KonvaEllipse(
|
|
12364
|
+
initializer: (ref, params = null) => new KonvaEllipse(params, ref),
|
|
12365
|
+
zIndex: 1,
|
|
12363
12366
|
},
|
|
12364
12367
|
Arrow: {
|
|
12365
12368
|
name: "Arrow",
|
|
12366
|
-
initializer: (ref) => new KonvaArrow(
|
|
12369
|
+
initializer: (ref, params = null) => new KonvaArrow(params, ref),
|
|
12370
|
+
zIndex: 1,
|
|
12367
12371
|
},
|
|
12368
12372
|
Image: {
|
|
12369
12373
|
name: "Image",
|
|
12370
|
-
initializer: (ref) => new KonvaImage(
|
|
12374
|
+
initializer: (ref, params = null) => new KonvaImage(params, ref),
|
|
12375
|
+
zIndex: 0,
|
|
12371
12376
|
},
|
|
12372
12377
|
Cloud: {
|
|
12373
12378
|
name: "Cloud",
|
|
12374
12379
|
initializer: (ref) => new KonvaCloud(null, ref),
|
|
12380
|
+
zIndex: 1,
|
|
12375
12381
|
},
|
|
12376
12382
|
};
|
|
12377
12383
|
/**
|
|
@@ -12410,7 +12416,7 @@
|
|
|
12410
12416
|
this.pan = (event) => {
|
|
12411
12417
|
const dX = event.dX / window.devicePixelRatio;
|
|
12412
12418
|
const dY = event.dY / window.devicePixelRatio;
|
|
12413
|
-
|
|
12419
|
+
this.getObjects().forEach((obj) => obj.ref().move({ x: dX, y: dY }));
|
|
12414
12420
|
};
|
|
12415
12421
|
this.redirectToViewer = (event) => {
|
|
12416
12422
|
if (this._viewer)
|
|
@@ -12467,8 +12473,8 @@
|
|
|
12467
12473
|
clearOverlay() {
|
|
12468
12474
|
this.removeTextInput();
|
|
12469
12475
|
this.removeImageInput();
|
|
12470
|
-
this.
|
|
12471
|
-
|
|
12476
|
+
this.clearSelected();
|
|
12477
|
+
this.getObjects().forEach((obj) => obj.ref().destroy());
|
|
12472
12478
|
}
|
|
12473
12479
|
getMarkupColor() {
|
|
12474
12480
|
return this._markupColor.RGB;
|
|
@@ -12476,24 +12482,21 @@
|
|
|
12476
12482
|
setMarkupColor(r, g, b) {
|
|
12477
12483
|
this._markupColor.setColor(r, g, b);
|
|
12478
12484
|
}
|
|
12479
|
-
colorizeAllMarkup(r
|
|
12480
|
-
const
|
|
12481
|
-
|
|
12482
|
-
|
|
12483
|
-
|
|
12484
|
-
|
|
12485
|
-
if (konvaObj.setColor)
|
|
12486
|
-
konvaObj.setColor(hex);
|
|
12487
|
-
});
|
|
12485
|
+
colorizeAllMarkup(r, g, b) {
|
|
12486
|
+
const hexColor = new MarkupColor(r, g, b).HexColor;
|
|
12487
|
+
this.getObjects().forEach((obj) => {
|
|
12488
|
+
const colorable = obj;
|
|
12489
|
+
if (colorable && colorable.setColor)
|
|
12490
|
+
colorable.setColor(hexColor);
|
|
12488
12491
|
});
|
|
12489
12492
|
this._konvaLayer.draw();
|
|
12490
12493
|
}
|
|
12491
12494
|
colorizeSelectedMarkups(r, g, b) {
|
|
12495
|
+
const hexColor = new MarkupColor(r, g, b).HexColor;
|
|
12492
12496
|
this.getSelectedObjects().forEach((obj) => {
|
|
12493
12497
|
const colorable = obj;
|
|
12494
|
-
if (colorable && colorable.setColor)
|
|
12495
|
-
colorable.setColor(
|
|
12496
|
-
}
|
|
12498
|
+
if (colorable && colorable.setColor)
|
|
12499
|
+
colorable.setColor(hexColor);
|
|
12497
12500
|
});
|
|
12498
12501
|
}
|
|
12499
12502
|
setViewpoint(viewpoint) {
|
|
@@ -12533,99 +12536,35 @@
|
|
|
12533
12536
|
return this;
|
|
12534
12537
|
}
|
|
12535
12538
|
createObject(type, params) {
|
|
12536
|
-
|
|
12537
|
-
|
|
12538
|
-
|
|
12539
|
-
|
|
12540
|
-
|
|
12541
|
-
object = new KonvaLine(params);
|
|
12542
|
-
zIndex = 1;
|
|
12543
|
-
break;
|
|
12544
|
-
case "text":
|
|
12545
|
-
object = new KonvaText(params);
|
|
12546
|
-
break;
|
|
12547
|
-
case "rectangle":
|
|
12548
|
-
object = new KonvaRectangle(params);
|
|
12549
|
-
zIndex = 1;
|
|
12550
|
-
break;
|
|
12551
|
-
case "ellipse":
|
|
12552
|
-
object = new KonvaEllipse(params);
|
|
12553
|
-
zIndex = 1;
|
|
12554
|
-
break;
|
|
12555
|
-
case "arrow":
|
|
12556
|
-
object = new KonvaArrow(params);
|
|
12557
|
-
break;
|
|
12558
|
-
case "image":
|
|
12559
|
-
object = new KonvaImage(params);
|
|
12560
|
-
zIndex = 0;
|
|
12561
|
-
break;
|
|
12562
|
-
case "cloud":
|
|
12563
|
-
object = new KonvaCloud(params);
|
|
12564
|
-
zIndex = 1;
|
|
12565
|
-
break;
|
|
12566
|
-
default:
|
|
12567
|
-
throw new Error("Markup CreateObject - unsupported type has been detected.");
|
|
12568
|
-
}
|
|
12539
|
+
var _a;
|
|
12540
|
+
const konvaShape = MarkupMode2Konva[type];
|
|
12541
|
+
if (!konvaShape || !konvaShape.initializer)
|
|
12542
|
+
throw new Error(`Markup CreateObject - unsupported markup type ${type}`);
|
|
12543
|
+
const object = konvaShape.initializer(null, params);
|
|
12569
12544
|
this.addObject(object);
|
|
12570
|
-
// Set zIndex only when shape has been added to Layer else we will get
|
|
12571
|
-
|
|
12545
|
+
// Set zIndex only when shape has been added to Layer else we will get
|
|
12546
|
+
// "Konva warning: Node has no parent. zIndex parameter is ignored."
|
|
12547
|
+
object.setZIndex((_a = konvaShape.zIndex) !== null && _a !== void 0 ? _a : this._zIndex);
|
|
12572
12548
|
this._zIndex++;
|
|
12573
12549
|
return object;
|
|
12574
12550
|
}
|
|
12575
12551
|
getObjects() {
|
|
12576
12552
|
const objects = [];
|
|
12577
|
-
|
|
12578
|
-
|
|
12579
|
-
|
|
12580
|
-
this.konvaLayerFind("Text").forEach((text) => {
|
|
12581
|
-
objects.push(new KonvaText(null, text));
|
|
12582
|
-
});
|
|
12583
|
-
this.konvaLayerFind("Rectangle").forEach((rectangle) => {
|
|
12584
|
-
objects.push(new KonvaRectangle(null, rectangle));
|
|
12585
|
-
});
|
|
12586
|
-
this.konvaLayerFind("Ellipse").forEach((ellipse) => {
|
|
12587
|
-
objects.push(new KonvaEllipse(null, ellipse));
|
|
12588
|
-
});
|
|
12589
|
-
this.konvaLayerFind("Arrow").forEach((arrow) => {
|
|
12590
|
-
objects.push(new KonvaArrow(null, arrow));
|
|
12591
|
-
});
|
|
12592
|
-
this.konvaLayerFind("Image").forEach((image) => {
|
|
12593
|
-
objects.push(new KonvaImage(null, image));
|
|
12594
|
-
});
|
|
12595
|
-
this.konvaLayerFind("Cloud").forEach((cloud) => {
|
|
12596
|
-
objects.push(new KonvaCloud(null, cloud));
|
|
12553
|
+
Object.keys(MarkupMode2Konva).forEach((type) => {
|
|
12554
|
+
const konvaShape = MarkupMode2Konva[type];
|
|
12555
|
+
this.konvaLayerFind(type).forEach((ref) => objects.push(konvaShape.initializer(ref)));
|
|
12597
12556
|
});
|
|
12598
12557
|
return objects;
|
|
12599
12558
|
}
|
|
12600
12559
|
getSelectedObjects() {
|
|
12601
|
-
|
|
12602
|
-
|
|
12603
|
-
|
|
12604
|
-
|
|
12605
|
-
|
|
12606
|
-
|
|
12607
|
-
|
|
12608
|
-
|
|
12609
|
-
objects.push(new KonvaText(null, obj));
|
|
12610
|
-
break;
|
|
12611
|
-
case "Rect":
|
|
12612
|
-
objects.push(new KonvaRectangle(null, obj));
|
|
12613
|
-
break;
|
|
12614
|
-
case "Ellipse":
|
|
12615
|
-
objects.push(new KonvaEllipse(null, obj));
|
|
12616
|
-
break;
|
|
12617
|
-
case "Arrow":
|
|
12618
|
-
objects.push(new KonvaArrow(null, obj));
|
|
12619
|
-
break;
|
|
12620
|
-
case "Image":
|
|
12621
|
-
objects.push(new KonvaImage(null, obj));
|
|
12622
|
-
break;
|
|
12623
|
-
case "Cloud":
|
|
12624
|
-
objects.push(new KonvaCloud(null, obj));
|
|
12625
|
-
break;
|
|
12626
|
-
}
|
|
12627
|
-
});
|
|
12628
|
-
return objects;
|
|
12560
|
+
return this._konvaTransformer
|
|
12561
|
+
.nodes()
|
|
12562
|
+
.map((ref) => {
|
|
12563
|
+
const name = ref.className;
|
|
12564
|
+
const konvaShape = Object.values(MarkupMode2Konva).find((shape) => shape.name === name);
|
|
12565
|
+
return konvaShape ? konvaShape.initializer(ref) : null;
|
|
12566
|
+
})
|
|
12567
|
+
.filter((x) => x);
|
|
12629
12568
|
}
|
|
12630
12569
|
selectObjects(objects) {
|
|
12631
12570
|
const selectedObjs = this._konvaTransformer.nodes().concat(objects.map((x) => x.ref()));
|
|
@@ -12684,8 +12623,8 @@
|
|
|
12684
12623
|
addObject(object) {
|
|
12685
12624
|
this._konvaLayer.add(object.ref());
|
|
12686
12625
|
}
|
|
12687
|
-
konvaLayerFind(
|
|
12688
|
-
const konvaShape = MarkupMode2Konva[
|
|
12626
|
+
konvaLayerFind(type) {
|
|
12627
|
+
const konvaShape = MarkupMode2Konva[type];
|
|
12689
12628
|
if (konvaShape && konvaShape.initializer) {
|
|
12690
12629
|
// for "draggable" Konva uses Rectangles in Transformer. We need only Shapes from layer.
|
|
12691
12630
|
return this._konvaLayer.find(konvaShape.name).filter((ref) => ref.parent === this._konvaLayer);
|