@inweb/viewer-visualize 25.8.0 → 25.8.2
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.
|
@@ -734,6 +734,29 @@ class MarkupColor {
|
|
|
734
734
|
}
|
|
735
735
|
}
|
|
736
736
|
|
|
737
|
+
class WorldTransform {
|
|
738
|
+
screenToWorld(position) {
|
|
739
|
+
return {
|
|
740
|
+
x: position.x,
|
|
741
|
+
y: position.y,
|
|
742
|
+
z: 0
|
|
743
|
+
};
|
|
744
|
+
}
|
|
745
|
+
worldToScreen(position) {
|
|
746
|
+
return {
|
|
747
|
+
x: position.x,
|
|
748
|
+
y: position.y
|
|
749
|
+
};
|
|
750
|
+
}
|
|
751
|
+
getScale() {
|
|
752
|
+
return {
|
|
753
|
+
x: 1,
|
|
754
|
+
y: 1,
|
|
755
|
+
z: 1
|
|
756
|
+
};
|
|
757
|
+
}
|
|
758
|
+
}
|
|
759
|
+
|
|
737
760
|
const LineTypeSpecs = new Map([ [ "solid", [] ], [ "dot", [ 30, 30, .001, 30 ] ], [ "dash", [ 30, 30 ] ] ]);
|
|
738
761
|
|
|
739
762
|
class KonvaLine {
|
|
@@ -1644,7 +1667,7 @@ class KonvaMarkup {
|
|
|
1644
1667
|
initialize(container, pointerEvents, viewer, worldTransformer) {
|
|
1645
1668
|
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>');
|
|
1646
1669
|
this._viewer = viewer;
|
|
1647
|
-
this._worldTransformer = worldTransformer;
|
|
1670
|
+
this._worldTransformer = worldTransformer !== null && worldTransformer !== void 0 ? worldTransformer : new WorldTransform;
|
|
1648
1671
|
this._container = container;
|
|
1649
1672
|
this._pointerEvents = pointerEvents !== null && pointerEvents !== void 0 ? pointerEvents : [];
|
|
1650
1673
|
this._markupContainer = document.createElement("div");
|
|
@@ -1783,13 +1806,6 @@ class KonvaMarkup {
|
|
|
1783
1806
|
clearSelected() {
|
|
1784
1807
|
this._konvaTransformer.nodes([]);
|
|
1785
1808
|
}
|
|
1786
|
-
getPoint3dFromArray(array) {
|
|
1787
|
-
return {
|
|
1788
|
-
x: array[0],
|
|
1789
|
-
y: array[1],
|
|
1790
|
-
z: array[2]
|
|
1791
|
-
};
|
|
1792
|
-
}
|
|
1793
1809
|
fillViewpointShapes(viewpoint) {
|
|
1794
1810
|
const markupLines = this.getMarkupLines();
|
|
1795
1811
|
if (markupLines && markupLines.length > 0) {
|
|
@@ -2080,7 +2096,7 @@ class KonvaMarkup {
|
|
|
2080
2096
|
const konvaLine = new KonvaLine(null, line);
|
|
2081
2097
|
lines.push({
|
|
2082
2098
|
id: konvaLine.id(),
|
|
2083
|
-
points: worldPoints
|
|
2099
|
+
points: worldPoints,
|
|
2084
2100
|
color: konvaLine.getColor() || "#ff0000",
|
|
2085
2101
|
type: konvaLine.getLineType() || this.lineType,
|
|
2086
2102
|
width: konvaLine.getLineWidth() || this.lineWidth
|
|
@@ -2094,14 +2110,15 @@ class KonvaMarkup {
|
|
|
2094
2110
|
const textScale = this._worldTransformer.getScale();
|
|
2095
2111
|
this.konvaLayerFind("Text").forEach((text => {
|
|
2096
2112
|
if (!text) return;
|
|
2097
|
-
const position =
|
|
2113
|
+
const position = {
|
|
2098
2114
|
x: text.x(),
|
|
2099
2115
|
y: text.y()
|
|
2100
|
-
}
|
|
2116
|
+
};
|
|
2117
|
+
const worldPoint = this._worldTransformer.screenToWorld(position);
|
|
2101
2118
|
const shape = new KonvaText(null, text);
|
|
2102
2119
|
texts.push({
|
|
2103
2120
|
id: shape.id(),
|
|
2104
|
-
position:
|
|
2121
|
+
position: worldPoint,
|
|
2105
2122
|
text: shape.getText(),
|
|
2106
2123
|
text_size: textSize * textScale.y,
|
|
2107
2124
|
angle: shape.getRotation(),
|
|
@@ -2119,7 +2136,7 @@ class KonvaMarkup {
|
|
|
2119
2136
|
const shape = new KonvaRectangle(null, rect);
|
|
2120
2137
|
rectangles.push({
|
|
2121
2138
|
id: shape.id(),
|
|
2122
|
-
position:
|
|
2139
|
+
position: worldPoint,
|
|
2123
2140
|
width: shape.getWidth(),
|
|
2124
2141
|
height: shape.getHeigth(),
|
|
2125
2142
|
line_width: shape.getLineWidth(),
|
|
@@ -2136,7 +2153,7 @@ class KonvaMarkup {
|
|
|
2136
2153
|
const shape = new KonvaEllipse(null, ellipse);
|
|
2137
2154
|
ellipses.push({
|
|
2138
2155
|
id: shape.id(),
|
|
2139
|
-
position:
|
|
2156
|
+
position: worldPoint,
|
|
2140
2157
|
radius: {
|
|
2141
2158
|
x: ellipse.getRadiusX(),
|
|
2142
2159
|
y: ellipse.getRadiusY()
|
|
@@ -2164,8 +2181,8 @@ class KonvaMarkup {
|
|
|
2164
2181
|
const shape = new KonvaArrow(null, arrow);
|
|
2165
2182
|
arrows.push({
|
|
2166
2183
|
id: shape.id(),
|
|
2167
|
-
start:
|
|
2168
|
-
end:
|
|
2184
|
+
start: worldStartPoint,
|
|
2185
|
+
end: worldEndPoint,
|
|
2169
2186
|
color: shape.getColor()
|
|
2170
2187
|
});
|
|
2171
2188
|
}));
|
|
@@ -2179,7 +2196,7 @@ class KonvaMarkup {
|
|
|
2179
2196
|
const shape = new KonvaImage(null, image);
|
|
2180
2197
|
images.push({
|
|
2181
2198
|
id: shape.id(),
|
|
2182
|
-
position:
|
|
2199
|
+
position: worldPoint,
|
|
2183
2200
|
src: shape.getSrc(),
|
|
2184
2201
|
width: shape.getWidth(),
|
|
2185
2202
|
height: shape.getHeight()
|
|
@@ -2195,7 +2212,7 @@ class KonvaMarkup {
|
|
|
2195
2212
|
const shape = new KonvaCloud(null, cloud);
|
|
2196
2213
|
clouds.push({
|
|
2197
2214
|
id: shape.id(),
|
|
2198
|
-
position:
|
|
2215
|
+
position: worldPoint,
|
|
2199
2216
|
width: shape.getWidth(),
|
|
2200
2217
|
height: shape.getHeigth(),
|
|
2201
2218
|
line_width: shape.getLineWidth(),
|