@inweb/markup 25.7.11 → 25.7.12
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 -16
- package/dist/markup.js.map +1 -1
- package/dist/markup.min.js +1 -1
- package/dist/markup.module.js +35 -18
- package/dist/markup.module.js.map +1 -1
- package/lib/markup/Konva/KonvaMarkup.d.ts +0 -1
- package/lib/markup/WorldTransform.d.ts +24 -0
- package/package.json +3 -3
- package/src/markup/Konva/KonvaMarkup.ts +12 -17
- package/src/markup/WorldTransform.ts +38 -0
package/dist/markup.module.js
CHANGED
|
@@ -29,6 +29,29 @@ class MarkupColor {
|
|
|
29
29
|
}
|
|
30
30
|
}
|
|
31
31
|
|
|
32
|
+
class WorldTransform {
|
|
33
|
+
screenToWorld(position) {
|
|
34
|
+
return {
|
|
35
|
+
x: position.x,
|
|
36
|
+
y: position.y,
|
|
37
|
+
z: 0
|
|
38
|
+
};
|
|
39
|
+
}
|
|
40
|
+
worldToScreen(position) {
|
|
41
|
+
return {
|
|
42
|
+
x: position.x,
|
|
43
|
+
y: position.y
|
|
44
|
+
};
|
|
45
|
+
}
|
|
46
|
+
getScale() {
|
|
47
|
+
return {
|
|
48
|
+
x: 1,
|
|
49
|
+
y: 1,
|
|
50
|
+
z: 1
|
|
51
|
+
};
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
|
|
32
55
|
const LineTypeSpecs = new Map([ [ "solid", [] ], [ "dot", [ 30, 30, .001, 30 ] ], [ "dash", [ 30, 30 ] ] ]);
|
|
33
56
|
|
|
34
57
|
class KonvaLine {
|
|
@@ -933,7 +956,7 @@ class KonvaMarkup {
|
|
|
933
956
|
initialize(container, pointerEvents, viewer, worldTransformer) {
|
|
934
957
|
if (!Konva) throw new Error('Markup: Error during initialization. Konva is not initialized. Update node_modules or add to your page <script src="https://unpkg.com/konva@9/konva.min.js"><\/script>');
|
|
935
958
|
this._viewer = viewer;
|
|
936
|
-
this._worldTransformer = worldTransformer;
|
|
959
|
+
this._worldTransformer = worldTransformer !== null && worldTransformer !== void 0 ? worldTransformer : new WorldTransform;
|
|
937
960
|
this._container = container;
|
|
938
961
|
this._pointerEvents = pointerEvents !== null && pointerEvents !== void 0 ? pointerEvents : [];
|
|
939
962
|
this._markupContainer = document.createElement("div");
|
|
@@ -1157,13 +1180,6 @@ class KonvaMarkup {
|
|
|
1157
1180
|
clearSelected() {
|
|
1158
1181
|
this._konvaTransformer.nodes([]);
|
|
1159
1182
|
}
|
|
1160
|
-
getPoint3dFromArray(array) {
|
|
1161
|
-
return {
|
|
1162
|
-
x: array[0],
|
|
1163
|
-
y: array[1],
|
|
1164
|
-
z: array[2]
|
|
1165
|
-
};
|
|
1166
|
-
}
|
|
1167
1183
|
fillViewpointShapes(viewpoint) {
|
|
1168
1184
|
const markupLines = this.getMarkupLines();
|
|
1169
1185
|
if (markupLines && markupLines.length > 0) {
|
|
@@ -1454,7 +1470,7 @@ class KonvaMarkup {
|
|
|
1454
1470
|
const konvaLine = new KonvaLine(null, line);
|
|
1455
1471
|
lines.push({
|
|
1456
1472
|
id: konvaLine.id(),
|
|
1457
|
-
points: worldPoints
|
|
1473
|
+
points: worldPoints,
|
|
1458
1474
|
color: konvaLine.getColor() || "#ff0000",
|
|
1459
1475
|
type: konvaLine.getLineType() || this.lineType,
|
|
1460
1476
|
width: konvaLine.getLineWidth() || this.lineWidth
|
|
@@ -1468,14 +1484,15 @@ class KonvaMarkup {
|
|
|
1468
1484
|
const textScale = this._worldTransformer.getScale();
|
|
1469
1485
|
this.konvaLayerFind("Text").forEach((text => {
|
|
1470
1486
|
if (!text) return;
|
|
1471
|
-
const position =
|
|
1487
|
+
const position = {
|
|
1472
1488
|
x: text.x(),
|
|
1473
1489
|
y: text.y()
|
|
1474
|
-
}
|
|
1490
|
+
};
|
|
1491
|
+
const worldPoint = this._worldTransformer.screenToWorld(position);
|
|
1475
1492
|
const shape = new KonvaText(null, text);
|
|
1476
1493
|
texts.push({
|
|
1477
1494
|
id: shape.id(),
|
|
1478
|
-
position:
|
|
1495
|
+
position: worldPoint,
|
|
1479
1496
|
text: shape.getText(),
|
|
1480
1497
|
text_size: textSize * textScale.y,
|
|
1481
1498
|
angle: shape.getRotation(),
|
|
@@ -1493,7 +1510,7 @@ class KonvaMarkup {
|
|
|
1493
1510
|
const shape = new KonvaRectangle(null, rect);
|
|
1494
1511
|
rectangles.push({
|
|
1495
1512
|
id: shape.id(),
|
|
1496
|
-
position:
|
|
1513
|
+
position: worldPoint,
|
|
1497
1514
|
width: shape.getWidth(),
|
|
1498
1515
|
height: shape.getHeigth(),
|
|
1499
1516
|
line_width: shape.getLineWidth(),
|
|
@@ -1510,7 +1527,7 @@ class KonvaMarkup {
|
|
|
1510
1527
|
const shape = new KonvaEllipse(null, ellipse);
|
|
1511
1528
|
ellipses.push({
|
|
1512
1529
|
id: shape.id(),
|
|
1513
|
-
position:
|
|
1530
|
+
position: worldPoint,
|
|
1514
1531
|
radius: {
|
|
1515
1532
|
x: ellipse.getRadiusX(),
|
|
1516
1533
|
y: ellipse.getRadiusY()
|
|
@@ -1538,8 +1555,8 @@ class KonvaMarkup {
|
|
|
1538
1555
|
const shape = new KonvaArrow(null, arrow);
|
|
1539
1556
|
arrows.push({
|
|
1540
1557
|
id: shape.id(),
|
|
1541
|
-
start:
|
|
1542
|
-
end:
|
|
1558
|
+
start: worldStartPoint,
|
|
1559
|
+
end: worldEndPoint,
|
|
1543
1560
|
color: shape.getColor()
|
|
1544
1561
|
});
|
|
1545
1562
|
}));
|
|
@@ -1553,7 +1570,7 @@ class KonvaMarkup {
|
|
|
1553
1570
|
const shape = new KonvaImage(null, image);
|
|
1554
1571
|
images.push({
|
|
1555
1572
|
id: shape.id(),
|
|
1556
|
-
position:
|
|
1573
|
+
position: worldPoint,
|
|
1557
1574
|
src: shape.getSrc(),
|
|
1558
1575
|
width: shape.getWidth(),
|
|
1559
1576
|
height: shape.getHeight()
|
|
@@ -1569,7 +1586,7 @@ class KonvaMarkup {
|
|
|
1569
1586
|
const shape = new KonvaCloud(null, cloud);
|
|
1570
1587
|
clouds.push({
|
|
1571
1588
|
id: shape.id(),
|
|
1572
|
-
position:
|
|
1589
|
+
position: worldPoint,
|
|
1573
1590
|
width: shape.getWidth(),
|
|
1574
1591
|
height: shape.getHeigth(),
|
|
1575
1592
|
line_width: shape.getLineWidth(),
|