@inweb/markup 26.4.0 → 26.4.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.
- package/dist/markup.js +561 -126
- package/dist/markup.js.map +1 -1
- package/dist/markup.min.js +1 -1
- package/dist/markup.module.js +672 -138
- package/dist/markup.module.js.map +1 -1
- package/lib/markup/IMarkupArrow.d.ts +8 -8
- package/lib/markup/IMarkupCloud.d.ts +12 -5
- package/lib/markup/IMarkupEllipse.d.ts +4 -4
- package/lib/markup/IMarkupImage.d.ts +3 -3
- package/lib/markup/IMarkupLine.d.ts +2 -2
- package/lib/markup/IMarkupObject.d.ts +4 -0
- package/lib/markup/IMarkupRectangle.d.ts +10 -3
- package/lib/markup/IMarkupText.d.ts +3 -3
- package/lib/markup/Konva/KonvaArrow.d.ts +4 -1
- package/lib/markup/Konva/KonvaCloud.d.ts +4 -1
- package/lib/markup/Konva/KonvaEllipse.d.ts +4 -1
- package/lib/markup/Konva/KonvaImage.d.ts +4 -1
- package/lib/markup/Konva/KonvaLine.d.ts +4 -1
- package/lib/markup/Konva/KonvaMarkup.d.ts +2 -2
- package/lib/markup/Konva/KonvaRectangle.d.ts +4 -1
- package/lib/markup/Konva/KonvaText.d.ts +4 -1
- package/package.json +3 -3
- package/src/markup/IMarkupArrow.ts +8 -8
- package/src/markup/IMarkupCloud.ts +10 -5
- package/src/markup/IMarkupEllipse.ts +4 -4
- package/src/markup/IMarkupImage.ts +3 -3
- package/src/markup/IMarkupLine.ts +2 -2
- package/src/markup/IMarkupObject.ts +5 -0
- package/src/markup/IMarkupRectangle.ts +8 -3
- package/src/markup/IMarkupText.ts +3 -3
- package/src/markup/Konva/KonvaArrow.ts +49 -4
- package/src/markup/Konva/KonvaCloud.ts +110 -11
- package/src/markup/Konva/KonvaEllipse.ts +102 -2
- package/src/markup/Konva/KonvaImage.ts +60 -2
- package/src/markup/Konva/KonvaLine.ts +97 -3
- package/src/markup/Konva/KonvaMarkup.ts +182 -166
- package/src/markup/Konva/KonvaRectangle.ts +103 -4
- package/src/markup/Konva/KonvaText.ts +61 -2
|
@@ -1,5 +1,30 @@
|
|
|
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
|
+
|
|
1
24
|
import Konva from "konva";
|
|
2
25
|
import { IMarkupLine, IMarkupLineParams, MarkupLineType } from "../IMarkupLine";
|
|
26
|
+
import { IWorldTransform } from "../IWorldTransform";
|
|
27
|
+
import { WorldTransform } from "../WorldTransform";
|
|
3
28
|
|
|
4
29
|
const LineTypeSpecs = new Map<string, number[]>([
|
|
5
30
|
["solid", []],
|
|
@@ -9,10 +34,24 @@ const LineTypeSpecs = new Map<string, number[]>([
|
|
|
9
34
|
|
|
10
35
|
export class KonvaLine implements IMarkupLine {
|
|
11
36
|
private _ref: Konva.Line;
|
|
37
|
+
private _worldTransformer: IWorldTransform;
|
|
38
|
+
|
|
39
|
+
constructor(params: IMarkupLineParams, ref = null, worldTransformer = new WorldTransform()) {
|
|
40
|
+
this._worldTransformer = worldTransformer;
|
|
12
41
|
|
|
13
|
-
constructor(params: IMarkupLineParams, ref = null) {
|
|
14
42
|
if (ref) {
|
|
15
43
|
this._ref = ref;
|
|
44
|
+
let wcsPoints = this._ref.getAttr("wcsPoints");
|
|
45
|
+
if (!wcsPoints) {
|
|
46
|
+
wcsPoints = [];
|
|
47
|
+
let points = this._ref.points();
|
|
48
|
+
let wcsPoint;
|
|
49
|
+
for (let i = 0; i < points.length; i += 2) {
|
|
50
|
+
wcsPoint = this._worldTransformer.screenToWorld({ x: points[i], y: points[i + 1] });
|
|
51
|
+
wcsPoints.push({ x: wcsPoint.x, y: wcsPoint.y, z: wcsPoint.z });
|
|
52
|
+
}
|
|
53
|
+
this._ref.setAttr("wcsPoints", wcsPoints);
|
|
54
|
+
}
|
|
16
55
|
return;
|
|
17
56
|
}
|
|
18
57
|
|
|
@@ -24,7 +63,12 @@ export class KonvaLine implements IMarkupLine {
|
|
|
24
63
|
];
|
|
25
64
|
|
|
26
65
|
const konvaPoints = [];
|
|
27
|
-
|
|
66
|
+
const wcsPoints = [];
|
|
67
|
+
params.points.forEach((point) => {
|
|
68
|
+
konvaPoints.push(point.x, point.y);
|
|
69
|
+
let wcsPoint = this._worldTransformer.screenToWorld({ x: point.x, y: point.y });
|
|
70
|
+
wcsPoints.push({ x: wcsPoint.x, y: wcsPoint.y, z: wcsPoint.z });
|
|
71
|
+
});
|
|
28
72
|
|
|
29
73
|
this._ref = new Konva.Line({
|
|
30
74
|
stroke: params.color ?? "#ff0000",
|
|
@@ -38,12 +82,42 @@ export class KonvaLine implements IMarkupLine {
|
|
|
38
82
|
dash: LineTypeSpecs.get(params.type) || [],
|
|
39
83
|
});
|
|
40
84
|
|
|
85
|
+
this._ref.setAttr("wcsPoints", wcsPoints);
|
|
86
|
+
|
|
41
87
|
this._ref.on("transform", (e) => {
|
|
42
88
|
const attrs = e.target.attrs;
|
|
43
89
|
|
|
44
90
|
if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
|
|
45
91
|
});
|
|
46
92
|
|
|
93
|
+
this._ref.on("transformend", (e) => {
|
|
94
|
+
const absoluteTransform = this._ref.getAbsoluteTransform();
|
|
95
|
+
|
|
96
|
+
let wcsPoints = [];
|
|
97
|
+
let points = this._ref.points();
|
|
98
|
+
let wcsPoint;
|
|
99
|
+
for (let i = 0; i < points.length; i += 2) {
|
|
100
|
+
const position = absoluteTransform.point({ x: points[i], y: points[i + 1] });
|
|
101
|
+
wcsPoint = this._worldTransformer.screenToWorld({ x: position.x, y: position.y });
|
|
102
|
+
wcsPoints.push({ x: wcsPoint.x, y: wcsPoint.y, z: wcsPoint.z });
|
|
103
|
+
}
|
|
104
|
+
this._ref.setAttr("wcsPoints", wcsPoints);
|
|
105
|
+
});
|
|
106
|
+
|
|
107
|
+
this._ref.on("dragend", (e) => {
|
|
108
|
+
const absoluteTransform = this._ref.getAbsoluteTransform();
|
|
109
|
+
|
|
110
|
+
let wcsPoints = [];
|
|
111
|
+
let points = this._ref.points();
|
|
112
|
+
let wcsPoint;
|
|
113
|
+
for (let i = 0; i < points.length; i += 2) {
|
|
114
|
+
const position = absoluteTransform.point({ x: points[i], y: points[i + 1] });
|
|
115
|
+
wcsPoint = this._worldTransformer.screenToWorld({ x: position.x, y: position.y });
|
|
116
|
+
wcsPoints.push({ x: wcsPoint.x, y: wcsPoint.y, z: wcsPoint.z });
|
|
117
|
+
}
|
|
118
|
+
this._ref.setAttr("wcsPoints", wcsPoints);
|
|
119
|
+
});
|
|
120
|
+
|
|
47
121
|
this._ref.id(this._ref._id.toString());
|
|
48
122
|
}
|
|
49
123
|
|
|
@@ -87,7 +161,7 @@ export class KonvaLine implements IMarkupLine {
|
|
|
87
161
|
this._ref.zIndex(zIndex);
|
|
88
162
|
}
|
|
89
163
|
|
|
90
|
-
delete() {
|
|
164
|
+
delete(): void {
|
|
91
165
|
this._ref.destroy();
|
|
92
166
|
this._ref = null;
|
|
93
167
|
}
|
|
@@ -128,10 +202,30 @@ export class KonvaLine implements IMarkupLine {
|
|
|
128
202
|
|
|
129
203
|
addPoints(points: [{ x: number; y: number }]) {
|
|
130
204
|
let newPoints = this._ref.points();
|
|
205
|
+
let wcsPoints = this._ref.getAttr("wcsPoints");
|
|
131
206
|
points.forEach((point) => {
|
|
132
207
|
newPoints = newPoints.concat([point.x, point.y]);
|
|
208
|
+
let wcsPoint = this._worldTransformer.screenToWorld(point);
|
|
209
|
+
wcsPoints.push(wcsPoint);
|
|
133
210
|
});
|
|
134
211
|
|
|
135
212
|
this._ref.points(newPoints);
|
|
136
213
|
}
|
|
214
|
+
|
|
215
|
+
updateScreenCoordinates(): void {
|
|
216
|
+
let wcsPoints = this._ref.getAttr("wcsPoints");
|
|
217
|
+
let points = [];
|
|
218
|
+
let invert = this._ref.getAbsoluteTransform().copy();
|
|
219
|
+
invert = invert.invert();
|
|
220
|
+
wcsPoints.forEach((point) => {
|
|
221
|
+
let screenPoint = this._worldTransformer.worldToScreen(point);
|
|
222
|
+
screenPoint = invert.point({ x: screenPoint.x, y: screenPoint.y });
|
|
223
|
+
points.push(screenPoint.x);
|
|
224
|
+
points.push(screenPoint.y);
|
|
225
|
+
});
|
|
226
|
+
|
|
227
|
+
this._ref.points([]);
|
|
228
|
+
this._ref.points(points);
|
|
229
|
+
this._ref.clearCache();
|
|
230
|
+
}
|
|
137
231
|
}
|