@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
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { IWorldTransform } from "./IWorldTransform";
|
|
2
|
+
export declare class WorldTransform implements IWorldTransform {
|
|
3
|
+
screenToWorld(position: {
|
|
4
|
+
x: number;
|
|
5
|
+
y: number;
|
|
6
|
+
}): {
|
|
7
|
+
x: number;
|
|
8
|
+
y: number;
|
|
9
|
+
z: number;
|
|
10
|
+
};
|
|
11
|
+
worldToScreen(position: {
|
|
12
|
+
x: number;
|
|
13
|
+
y: number;
|
|
14
|
+
z: number;
|
|
15
|
+
}): {
|
|
16
|
+
x: number;
|
|
17
|
+
y: number;
|
|
18
|
+
};
|
|
19
|
+
getScale(): {
|
|
20
|
+
x: number;
|
|
21
|
+
y: number;
|
|
22
|
+
z: number;
|
|
23
|
+
};
|
|
24
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@inweb/markup",
|
|
3
|
-
"version": "25.7.
|
|
3
|
+
"version": "25.7.12",
|
|
4
4
|
"description": "JavaScript 2D markups",
|
|
5
5
|
"homepage": "https://cloud.opendesign.com/docs/index.html",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE",
|
|
@@ -26,8 +26,8 @@
|
|
|
26
26
|
"docs": "typedoc"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@inweb/eventemitter2": "~25.7.
|
|
30
|
-
"@inweb/viewer-core": "~25.7.
|
|
29
|
+
"@inweb/eventemitter2": "~25.7.12",
|
|
30
|
+
"@inweb/viewer-core": "~25.7.12"
|
|
31
31
|
},
|
|
32
32
|
"devDependencies": {
|
|
33
33
|
"canvas": "^2.11.2",
|
|
@@ -31,6 +31,7 @@ import { IMarkupObject } from "../IMarkupObject";
|
|
|
31
31
|
import { IMarkupColorable } from "../IMarkupColorable";
|
|
32
32
|
import { MarkupLineType } from "../IMarkupLine";
|
|
33
33
|
import { MarkupColor } from "./MarkupColor";
|
|
34
|
+
import { WorldTransform } from "../WorldTransform";
|
|
34
35
|
import { KonvaLine } from "./KonvaLine";
|
|
35
36
|
import { KonvaText } from "./KonvaText";
|
|
36
37
|
import { KonvaRectangle } from "./KonvaRectangle";
|
|
@@ -117,7 +118,7 @@ export class KonvaMarkup implements IMarkup {
|
|
|
117
118
|
);
|
|
118
119
|
|
|
119
120
|
this._viewer = viewer;
|
|
120
|
-
this._worldTransformer = worldTransformer;
|
|
121
|
+
this._worldTransformer = worldTransformer ?? new WorldTransform();
|
|
121
122
|
this._container = container;
|
|
122
123
|
this._pointerEvents = pointerEvents ?? [];
|
|
123
124
|
|
|
@@ -415,10 +416,6 @@ export class KonvaMarkup implements IMarkup {
|
|
|
415
416
|
this._konvaTransformer.nodes([]);
|
|
416
417
|
}
|
|
417
418
|
|
|
418
|
-
private getPoint3dFromArray(array) {
|
|
419
|
-
return { x: array[0], y: array[1], z: array[2] };
|
|
420
|
-
}
|
|
421
|
-
|
|
422
419
|
private fillViewpointShapes(viewpoint) {
|
|
423
420
|
const markupLines = this.getMarkupLines();
|
|
424
421
|
if (markupLines && markupLines.length > 0) {
|
|
@@ -739,7 +736,7 @@ export class KonvaMarkup implements IMarkup {
|
|
|
739
736
|
const konvaLine = new KonvaLine(null, line);
|
|
740
737
|
lines.push({
|
|
741
738
|
id: konvaLine.id(),
|
|
742
|
-
points: worldPoints
|
|
739
|
+
points: worldPoints,
|
|
743
740
|
color: konvaLine.getColor() || "#ff0000",
|
|
744
741
|
type: konvaLine.getLineType() || this.lineType,
|
|
745
742
|
width: konvaLine.getLineWidth() || this.lineWidth,
|
|
@@ -758,15 +755,13 @@ export class KonvaMarkup implements IMarkup {
|
|
|
758
755
|
this.konvaLayerFind("Text").forEach((text) => {
|
|
759
756
|
if (!text) return;
|
|
760
757
|
|
|
761
|
-
const position =
|
|
762
|
-
|
|
763
|
-
y: text.y(),
|
|
764
|
-
});
|
|
758
|
+
const position = { x: text.x(), y: text.y() };
|
|
759
|
+
const worldPoint = this._worldTransformer.screenToWorld(position);
|
|
765
760
|
|
|
766
761
|
const shape = new KonvaText(null, text);
|
|
767
762
|
texts.push({
|
|
768
763
|
id: shape.id(),
|
|
769
|
-
position:
|
|
764
|
+
position: worldPoint,
|
|
770
765
|
text: shape.getText(),
|
|
771
766
|
text_size: textSize * textScale.y,
|
|
772
767
|
angle: shape.getRotation(),
|
|
@@ -787,7 +782,7 @@ export class KonvaMarkup implements IMarkup {
|
|
|
787
782
|
const shape = new KonvaRectangle(null, rect);
|
|
788
783
|
rectangles.push({
|
|
789
784
|
id: shape.id(),
|
|
790
|
-
position:
|
|
785
|
+
position: worldPoint,
|
|
791
786
|
width: shape.getWidth(),
|
|
792
787
|
height: shape.getHeigth(),
|
|
793
788
|
line_width: shape.getLineWidth(),
|
|
@@ -807,7 +802,7 @@ export class KonvaMarkup implements IMarkup {
|
|
|
807
802
|
const shape = new KonvaEllipse(null, ellipse);
|
|
808
803
|
ellipses.push({
|
|
809
804
|
id: shape.id(),
|
|
810
|
-
position:
|
|
805
|
+
position: worldPoint,
|
|
811
806
|
radius: { x: ellipse.getRadiusX(), y: ellipse.getRadiusY() },
|
|
812
807
|
line_width: shape.getLineWidth(),
|
|
813
808
|
color: shape.getColor(),
|
|
@@ -832,8 +827,8 @@ export class KonvaMarkup implements IMarkup {
|
|
|
832
827
|
const shape = new KonvaArrow(null, arrow);
|
|
833
828
|
arrows.push({
|
|
834
829
|
id: shape.id(),
|
|
835
|
-
start:
|
|
836
|
-
end:
|
|
830
|
+
start: worldStartPoint,
|
|
831
|
+
end: worldEndPoint,
|
|
837
832
|
color: shape.getColor(),
|
|
838
833
|
});
|
|
839
834
|
});
|
|
@@ -850,7 +845,7 @@ export class KonvaMarkup implements IMarkup {
|
|
|
850
845
|
const shape = new KonvaImage(null, image);
|
|
851
846
|
images.push({
|
|
852
847
|
id: shape.id(),
|
|
853
|
-
position:
|
|
848
|
+
position: worldPoint,
|
|
854
849
|
src: shape.getSrc(),
|
|
855
850
|
width: shape.getWidth(),
|
|
856
851
|
height: shape.getHeight(),
|
|
@@ -869,7 +864,7 @@ export class KonvaMarkup implements IMarkup {
|
|
|
869
864
|
const shape = new KonvaCloud(null, cloud);
|
|
870
865
|
clouds.push({
|
|
871
866
|
id: shape.id(),
|
|
872
|
-
position:
|
|
867
|
+
position: worldPoint,
|
|
873
868
|
width: shape.getWidth(),
|
|
874
869
|
height: shape.getHeigth(),
|
|
875
870
|
line_width: shape.getLineWidth(),
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
///////////////////////////////////////////////////////////////////////////////
|
|
2
|
+
// Copyright (C) 2002-2024, 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-2024 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
|
+
|
|
24
|
+
import { IWorldTransform } from "./IWorldTransform";
|
|
25
|
+
|
|
26
|
+
export class WorldTransform implements IWorldTransform {
|
|
27
|
+
screenToWorld(position: { x: number; y: number }): { x: number; y: number; z: number } {
|
|
28
|
+
return { x: position.x, y: position.y, z: 0 };
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
worldToScreen(position: { x: number; y: number; z: number }): { x: number; y: number } {
|
|
32
|
+
return { x: position.x, y: position.y };
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
getScale(): { x: number; y: number; z: number } {
|
|
36
|
+
return { x: 1, y: 1, z: 1 };
|
|
37
|
+
}
|
|
38
|
+
}
|