@inweb/viewer-visualize 25.5.4 → 25.6.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/viewer-visualize.js +43 -12
- package/dist/viewer-visualize.js.map +1 -1
- package/dist/viewer-visualize.min.js +1 -1
- package/dist/viewer-visualize.module.js +50 -14
- package/dist/viewer-visualize.module.js.map +1 -1
- package/lib/Viewer/Markup/IMarkup.d.ts +10 -1
- package/lib/Viewer/Markup/Impl/Konva/KonvaMarkup.d.ts +3 -1
- package/lib/Viewer/Markup/Impl/Visualize/VisualizeMarkup.d.ts +2 -0
- package/package.json +4 -4
- package/src/Viewer/Markup/Api/Impl/Konva/KonvaEllipse.ts +8 -0
- package/src/Viewer/Markup/Api/Impl/Konva/KonvaRectangle.ts +10 -2
- package/src/Viewer/Markup/Api/Impl/Konva/KonvaText.ts +7 -0
- package/src/Viewer/Markup/IMarkup.ts +12 -1
- package/src/Viewer/Markup/Impl/Konva/KonvaMarkup.ts +20 -9
- package/src/Viewer/Markup/Impl/Visualize/VisualizeMarkup.ts +3 -1
package/dist/viewer-visualize.js
CHANGED
|
@@ -3060,6 +3060,7 @@
|
|
|
3060
3060
|
*/
|
|
3061
3061
|
var MarkupMode;
|
|
3062
3062
|
(function (MarkupMode) {
|
|
3063
|
+
MarkupMode["SelectMarkup"] = "SelectMarkup";
|
|
3063
3064
|
MarkupMode["Line"] = "Line";
|
|
3064
3065
|
MarkupMode["Text"] = "Text";
|
|
3065
3066
|
MarkupMode["Rectangle"] = "Rectangle";
|
|
@@ -14696,6 +14697,11 @@
|
|
|
14696
14697
|
this.setRotation(attrs.rotation);
|
|
14697
14698
|
const newWidth = this._ref.width() * attrs.scaleX;
|
|
14698
14699
|
const newHeight = this._ref.height() * attrs.scaleY;
|
|
14700
|
+
const minWidth = 50;
|
|
14701
|
+
if (newWidth < minWidth || newHeight < Math.round(this.getFontSize())) {
|
|
14702
|
+
this._ref.scale({ x: 1, y: 1 });
|
|
14703
|
+
return;
|
|
14704
|
+
}
|
|
14699
14705
|
if (Math.abs(attrs.scaleX - 1) > 10e-6) {
|
|
14700
14706
|
this._ref.width(newWidth);
|
|
14701
14707
|
}
|
|
@@ -14786,8 +14792,14 @@
|
|
|
14786
14792
|
const attrs = e.target.attrs;
|
|
14787
14793
|
if (attrs.rotation !== this.getRotation())
|
|
14788
14794
|
this.setRotation(attrs.rotation);
|
|
14789
|
-
|
|
14790
|
-
|
|
14795
|
+
let newWidth = this._ref.width() * attrs.scaleX;
|
|
14796
|
+
let newHeight = this._ref.height() * attrs.scaleY;
|
|
14797
|
+
const minWidth = 50;
|
|
14798
|
+
const minHeight = 50;
|
|
14799
|
+
if (newWidth < minWidth || newHeight < minHeight) {
|
|
14800
|
+
this._ref.scale({ x: 1, y: 1 });
|
|
14801
|
+
return;
|
|
14802
|
+
}
|
|
14791
14803
|
if (Math.abs(attrs.scaleX - 1) > 10e-6) {
|
|
14792
14804
|
this.setWidth(newWidth);
|
|
14793
14805
|
}
|
|
@@ -14886,6 +14898,12 @@
|
|
|
14886
14898
|
this.setRotation(attrs.rotation);
|
|
14887
14899
|
const newRadiusX = this._ref.radiusX() * attrs.scaleX;
|
|
14888
14900
|
const newRadiusY = this._ref.radiusY() * attrs.scaleY;
|
|
14901
|
+
const minRadiusX = 25;
|
|
14902
|
+
const minRadiusY = 25;
|
|
14903
|
+
if (newRadiusX < minRadiusX || newRadiusY < minRadiusY) {
|
|
14904
|
+
this._ref.scale({ x: 1, y: 1 });
|
|
14905
|
+
return;
|
|
14906
|
+
}
|
|
14889
14907
|
if (Math.abs(attrs.scaleX - 1) > 10e-6) {
|
|
14890
14908
|
this.setRadiusX(newRadiusX);
|
|
14891
14909
|
}
|
|
@@ -15314,6 +15332,13 @@
|
|
|
15314
15332
|
///////////////////////////////////////////////////////////////////////////////
|
|
15315
15333
|
// move to separate class and create factory with enum?
|
|
15316
15334
|
const MarkupMode2Konva = new Map([
|
|
15335
|
+
[
|
|
15336
|
+
MarkupMode.SelectMarkup,
|
|
15337
|
+
{
|
|
15338
|
+
name: "SelectMarkup",
|
|
15339
|
+
initializer: () => { },
|
|
15340
|
+
},
|
|
15341
|
+
],
|
|
15317
15342
|
[
|
|
15318
15343
|
MarkupMode.Line,
|
|
15319
15344
|
{
|
|
@@ -15384,6 +15409,8 @@
|
|
|
15384
15409
|
this._zIndex = 1;
|
|
15385
15410
|
this._markupContainerName = "markupContainer";
|
|
15386
15411
|
this.lineWidth = 4;
|
|
15412
|
+
this.lineType = "solid";
|
|
15413
|
+
this.fontSize = 34;
|
|
15387
15414
|
this.changeActiveDragger = (event) => {
|
|
15388
15415
|
const draggerName = event.data;
|
|
15389
15416
|
this._markupContainer.className = this._canvasOriginal.className
|
|
@@ -15477,8 +15504,9 @@
|
|
|
15477
15504
|
const hex = new MarkupColor(r, g, b).HexColor;
|
|
15478
15505
|
Object.values(MarkupMode).forEach((mode) => {
|
|
15479
15506
|
this.konvaLayerFind(mode).forEach((x) => {
|
|
15480
|
-
|
|
15481
|
-
|
|
15507
|
+
var _a;
|
|
15508
|
+
const konvaObj = (_a = MarkupMode2Konva.get(mode)) === null || _a === void 0 ? void 0 : _a.initializer(x);
|
|
15509
|
+
if (konvaObj && konvaObj.setColor)
|
|
15482
15510
|
konvaObj.setColor(hex);
|
|
15483
15511
|
});
|
|
15484
15512
|
});
|
|
@@ -15679,6 +15707,7 @@
|
|
|
15679
15707
|
const konvaShapes = this._konvaLayer.find(konvaShape.name).filter((x) => x.parent instanceof Konva.Layer);
|
|
15680
15708
|
return konvaShapes;
|
|
15681
15709
|
}
|
|
15710
|
+
return [];
|
|
15682
15711
|
}
|
|
15683
15712
|
initializeKonva() {
|
|
15684
15713
|
// first we need Konva core things: stage and layer
|
|
@@ -15693,6 +15722,7 @@
|
|
|
15693
15722
|
this._konvaLayer = layer;
|
|
15694
15723
|
const transformer = new Konva.Transformer({
|
|
15695
15724
|
shouldOverdrawWholeArea: false,
|
|
15725
|
+
keepRatio: false,
|
|
15696
15726
|
});
|
|
15697
15727
|
this._konvaTransformer = transformer;
|
|
15698
15728
|
layer.add(transformer);
|
|
@@ -15823,7 +15853,7 @@
|
|
|
15823
15853
|
transformer.nodes([]);
|
|
15824
15854
|
return;
|
|
15825
15855
|
}
|
|
15826
|
-
if (this._markupMode === MarkupMode.Text) {
|
|
15856
|
+
if (this._markupMode === MarkupMode.Text || this._markupMode === MarkupMode.SelectMarkup) {
|
|
15827
15857
|
if (e.target.className === "Text" && transformer.nodes().length === 1 && transformer.nodes()[0] === e.target) {
|
|
15828
15858
|
if (this._textInputRef && this._textInputRef.value)
|
|
15829
15859
|
this.addText(this._textInputRef.value, this._textInputPos, this._textInputAngle);
|
|
@@ -15835,7 +15865,7 @@
|
|
|
15835
15865
|
this.removeTextInput();
|
|
15836
15866
|
}
|
|
15837
15867
|
}
|
|
15838
|
-
if (this._markupMode === MarkupMode.Image) {
|
|
15868
|
+
if (this._markupMode === MarkupMode.Image || this._markupMode === MarkupMode.SelectMarkup) {
|
|
15839
15869
|
if (e.target.className === "Image" && transformer.nodes().length === 1 && transformer.nodes()[0] === e.target) {
|
|
15840
15870
|
if (this._imageInputRef && this._imageInputRef.value)
|
|
15841
15871
|
this.addImage(this._imageInputPos, this._imageInputRef.value, 0, 0);
|
|
@@ -15923,9 +15953,9 @@
|
|
|
15923
15953
|
lines.push({
|
|
15924
15954
|
id: konvaLine.id(),
|
|
15925
15955
|
points: worldPoints.map((p) => this.getPoint3dFromArray(p)),
|
|
15926
|
-
color: konvaLine.getColor() || "ff0000",
|
|
15927
|
-
type: konvaLine.getLineType() ||
|
|
15928
|
-
width: konvaLine.getLineWidth() ||
|
|
15956
|
+
color: konvaLine.getColor() || "#ff0000",
|
|
15957
|
+
type: konvaLine.getLineType() || this.lineType,
|
|
15958
|
+
width: konvaLine.getLineWidth() || this.lineWidth,
|
|
15929
15959
|
});
|
|
15930
15960
|
});
|
|
15931
15961
|
return lines;
|
|
@@ -16115,7 +16145,7 @@
|
|
|
16115
16145
|
}
|
|
16116
16146
|
const konvaLine = new KonvaLine({
|
|
16117
16147
|
points,
|
|
16118
|
-
type: type ||
|
|
16148
|
+
type: type || this.lineType,
|
|
16119
16149
|
width: width || this.lineWidth,
|
|
16120
16150
|
color: color || this._markupColor.HexColor,
|
|
16121
16151
|
id,
|
|
@@ -16222,7 +16252,7 @@
|
|
|
16222
16252
|
position: { x: position.x, y: position.y },
|
|
16223
16253
|
text: specifiedText,
|
|
16224
16254
|
rotation: angle,
|
|
16225
|
-
fontSize,
|
|
16255
|
+
fontSize: fontSize || this.fontSize,
|
|
16226
16256
|
color: color || this._markupColor.HexColor,
|
|
16227
16257
|
id,
|
|
16228
16258
|
});
|
|
@@ -16444,7 +16474,8 @@
|
|
|
16444
16474
|
class VisualizeMarkup {
|
|
16445
16475
|
constructor() {
|
|
16446
16476
|
this._markupColor = { r: 255, g: 0, b: 0 };
|
|
16447
|
-
this.lineWidth =
|
|
16477
|
+
this.lineWidth = 4;
|
|
16478
|
+
this.fontSize = 34;
|
|
16448
16479
|
}
|
|
16449
16480
|
initialize(viewer, canvas, canvasEvents) {
|
|
16450
16481
|
this._viewer = viewer;
|