@inweb/markup 25.7.10 → 25.8.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/markup.js +45 -106
- package/dist/markup.js.map +1 -1
- package/dist/markup.min.js +1 -1
- package/dist/markup.module.js +39 -118
- package/dist/markup.module.js.map +1 -1
- package/lib/markup/Konva/KonvaMarkup.d.ts +1 -1
- package/package.json +3 -3
- package/src/markup/Konva/KonvaMarkup.ts +43 -120
package/dist/markup.module.js
CHANGED
|
@@ -866,31 +866,37 @@ const MarkupMode2Konva = {
|
|
|
866
866
|
},
|
|
867
867
|
Line: {
|
|
868
868
|
name: "Line",
|
|
869
|
-
initializer: ref => new KonvaLine(
|
|
869
|
+
initializer: (ref, params = null) => new KonvaLine(params, ref),
|
|
870
|
+
zIndex: 1
|
|
870
871
|
},
|
|
871
872
|
Text: {
|
|
872
873
|
name: "Text",
|
|
873
|
-
initializer: ref => new KonvaText(
|
|
874
|
+
initializer: (ref, params = null) => new KonvaText(params, ref)
|
|
874
875
|
},
|
|
875
876
|
Rectangle: {
|
|
876
877
|
name: "Rect",
|
|
877
|
-
initializer: ref => new KonvaRectangle(
|
|
878
|
+
initializer: (ref, params = null) => new KonvaRectangle(params, ref),
|
|
879
|
+
zIndex: 1
|
|
878
880
|
},
|
|
879
881
|
Ellipse: {
|
|
880
882
|
name: "Ellipse",
|
|
881
|
-
initializer: ref => new KonvaEllipse(
|
|
883
|
+
initializer: (ref, params = null) => new KonvaEllipse(params, ref),
|
|
884
|
+
zIndex: 1
|
|
882
885
|
},
|
|
883
886
|
Arrow: {
|
|
884
887
|
name: "Arrow",
|
|
885
|
-
initializer: ref => new KonvaArrow(
|
|
888
|
+
initializer: (ref, params = null) => new KonvaArrow(params, ref),
|
|
889
|
+
zIndex: 1
|
|
886
890
|
},
|
|
887
891
|
Image: {
|
|
888
892
|
name: "Image",
|
|
889
|
-
initializer: ref => new KonvaImage(
|
|
893
|
+
initializer: (ref, params = null) => new KonvaImage(params, ref),
|
|
894
|
+
zIndex: 0
|
|
890
895
|
},
|
|
891
896
|
Cloud: {
|
|
892
897
|
name: "Cloud",
|
|
893
|
-
initializer: ref => new KonvaCloud(null, ref)
|
|
898
|
+
initializer: ref => new KonvaCloud(null, ref),
|
|
899
|
+
zIndex: 1
|
|
894
900
|
}
|
|
895
901
|
};
|
|
896
902
|
|
|
@@ -921,10 +927,10 @@ class KonvaMarkup {
|
|
|
921
927
|
this.pan = event => {
|
|
922
928
|
const dX = event.dX / window.devicePixelRatio;
|
|
923
929
|
const dY = event.dY / window.devicePixelRatio;
|
|
924
|
-
|
|
930
|
+
this.getObjects().forEach((obj => obj.ref().move({
|
|
925
931
|
x: dX,
|
|
926
932
|
y: dY
|
|
927
|
-
})))
|
|
933
|
+
})));
|
|
928
934
|
};
|
|
929
935
|
this.redirectToViewer = event => {
|
|
930
936
|
if (this._viewer) this._viewer.emit(event);
|
|
@@ -977,8 +983,8 @@ class KonvaMarkup {
|
|
|
977
983
|
clearOverlay() {
|
|
978
984
|
this.removeTextInput();
|
|
979
985
|
this.removeImageInput();
|
|
980
|
-
this.
|
|
981
|
-
|
|
986
|
+
this.clearSelected();
|
|
987
|
+
this.getObjects().forEach((obj => obj.ref().destroy()));
|
|
982
988
|
}
|
|
983
989
|
getMarkupColor() {
|
|
984
990
|
return this._markupColor.RGB;
|
|
@@ -986,23 +992,19 @@ class KonvaMarkup {
|
|
|
986
992
|
setMarkupColor(r, g, b) {
|
|
987
993
|
this._markupColor.setColor(r, g, b);
|
|
988
994
|
}
|
|
989
|
-
colorizeAllMarkup(r
|
|
990
|
-
const
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
const konvaObj = konvaShape.initializer(ref);
|
|
995
|
-
if (konvaObj.setColor) konvaObj.setColor(hex);
|
|
996
|
-
}));
|
|
995
|
+
colorizeAllMarkup(r, g, b) {
|
|
996
|
+
const hexColor = new MarkupColor(r, g, b).HexColor;
|
|
997
|
+
this.getObjects().forEach((obj => {
|
|
998
|
+
const colorable = obj;
|
|
999
|
+
if (colorable && colorable.setColor) colorable.setColor(hexColor);
|
|
997
1000
|
}));
|
|
998
1001
|
this._konvaLayer.draw();
|
|
999
1002
|
}
|
|
1000
1003
|
colorizeSelectedMarkups(r, g, b) {
|
|
1004
|
+
const hexColor = new MarkupColor(r, g, b).HexColor;
|
|
1001
1005
|
this.getSelectedObjects().forEach((obj => {
|
|
1002
1006
|
const colorable = obj;
|
|
1003
|
-
if (colorable && colorable.setColor)
|
|
1004
|
-
colorable.setColor(new MarkupColor(r, g, b).HexColor);
|
|
1005
|
-
}
|
|
1007
|
+
if (colorable && colorable.setColor) colorable.setColor(hexColor);
|
|
1006
1008
|
}));
|
|
1007
1009
|
}
|
|
1008
1010
|
setViewpoint(viewpoint) {
|
|
@@ -1045,110 +1047,29 @@ class KonvaMarkup {
|
|
|
1045
1047
|
return this;
|
|
1046
1048
|
}
|
|
1047
1049
|
createObject(type, params) {
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
object = new KonvaLine(params);
|
|
1053
|
-
zIndex = 1;
|
|
1054
|
-
break;
|
|
1055
|
-
|
|
1056
|
-
case "text":
|
|
1057
|
-
object = new KonvaText(params);
|
|
1058
|
-
break;
|
|
1059
|
-
|
|
1060
|
-
case "rectangle":
|
|
1061
|
-
object = new KonvaRectangle(params);
|
|
1062
|
-
zIndex = 1;
|
|
1063
|
-
break;
|
|
1064
|
-
|
|
1065
|
-
case "ellipse":
|
|
1066
|
-
object = new KonvaEllipse(params);
|
|
1067
|
-
zIndex = 1;
|
|
1068
|
-
break;
|
|
1069
|
-
|
|
1070
|
-
case "arrow":
|
|
1071
|
-
object = new KonvaArrow(params);
|
|
1072
|
-
break;
|
|
1073
|
-
|
|
1074
|
-
case "image":
|
|
1075
|
-
object = new KonvaImage(params);
|
|
1076
|
-
zIndex = 0;
|
|
1077
|
-
break;
|
|
1078
|
-
|
|
1079
|
-
case "cloud":
|
|
1080
|
-
object = new KonvaCloud(params);
|
|
1081
|
-
zIndex = 1;
|
|
1082
|
-
break;
|
|
1083
|
-
|
|
1084
|
-
default:
|
|
1085
|
-
throw new Error("Markup CreateObject - unsupported type has been detected.");
|
|
1086
|
-
}
|
|
1050
|
+
var _a;
|
|
1051
|
+
const konvaShape = MarkupMode2Konva[type];
|
|
1052
|
+
if (!konvaShape || !konvaShape.initializer) throw new Error(`Markup CreateObject - unsupported markup type ${type}`);
|
|
1053
|
+
const object = konvaShape.initializer(null, params);
|
|
1087
1054
|
this.addObject(object);
|
|
1088
|
-
object.setZIndex(zIndex);
|
|
1055
|
+
object.setZIndex((_a = konvaShape.zIndex) !== null && _a !== void 0 ? _a : this._zIndex);
|
|
1089
1056
|
this._zIndex++;
|
|
1090
1057
|
return object;
|
|
1091
1058
|
}
|
|
1092
1059
|
getObjects() {
|
|
1093
1060
|
const objects = [];
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
|
|
1097
|
-
this.konvaLayerFind("Text").forEach((text => {
|
|
1098
|
-
objects.push(new KonvaText(null, text));
|
|
1099
|
-
}));
|
|
1100
|
-
this.konvaLayerFind("Rectangle").forEach((rectangle => {
|
|
1101
|
-
objects.push(new KonvaRectangle(null, rectangle));
|
|
1102
|
-
}));
|
|
1103
|
-
this.konvaLayerFind("Ellipse").forEach((ellipse => {
|
|
1104
|
-
objects.push(new KonvaEllipse(null, ellipse));
|
|
1105
|
-
}));
|
|
1106
|
-
this.konvaLayerFind("Arrow").forEach((arrow => {
|
|
1107
|
-
objects.push(new KonvaArrow(null, arrow));
|
|
1108
|
-
}));
|
|
1109
|
-
this.konvaLayerFind("Image").forEach((image => {
|
|
1110
|
-
objects.push(new KonvaImage(null, image));
|
|
1111
|
-
}));
|
|
1112
|
-
this.konvaLayerFind("Cloud").forEach((cloud => {
|
|
1113
|
-
objects.push(new KonvaCloud(null, cloud));
|
|
1061
|
+
Object.keys(MarkupMode2Konva).forEach((type => {
|
|
1062
|
+
const konvaShape = MarkupMode2Konva[type];
|
|
1063
|
+
this.konvaLayerFind(type).forEach((ref => objects.push(konvaShape.initializer(ref))));
|
|
1114
1064
|
}));
|
|
1115
1065
|
return objects;
|
|
1116
1066
|
}
|
|
1117
1067
|
getSelectedObjects() {
|
|
1118
|
-
|
|
1119
|
-
|
|
1120
|
-
const
|
|
1121
|
-
|
|
1122
|
-
|
|
1123
|
-
objects.push(new KonvaLine(null, obj));
|
|
1124
|
-
break;
|
|
1125
|
-
|
|
1126
|
-
case "Text":
|
|
1127
|
-
objects.push(new KonvaText(null, obj));
|
|
1128
|
-
break;
|
|
1129
|
-
|
|
1130
|
-
case "Rect":
|
|
1131
|
-
objects.push(new KonvaRectangle(null, obj));
|
|
1132
|
-
break;
|
|
1133
|
-
|
|
1134
|
-
case "Ellipse":
|
|
1135
|
-
objects.push(new KonvaEllipse(null, obj));
|
|
1136
|
-
break;
|
|
1137
|
-
|
|
1138
|
-
case "Arrow":
|
|
1139
|
-
objects.push(new KonvaArrow(null, obj));
|
|
1140
|
-
break;
|
|
1141
|
-
|
|
1142
|
-
case "Image":
|
|
1143
|
-
objects.push(new KonvaImage(null, obj));
|
|
1144
|
-
break;
|
|
1145
|
-
|
|
1146
|
-
case "Cloud":
|
|
1147
|
-
objects.push(new KonvaCloud(null, obj));
|
|
1148
|
-
break;
|
|
1149
|
-
}
|
|
1150
|
-
}));
|
|
1151
|
-
return objects;
|
|
1068
|
+
return this._konvaTransformer.nodes().map((ref => {
|
|
1069
|
+
const name = ref.className;
|
|
1070
|
+
const konvaShape = Object.values(MarkupMode2Konva).find((shape => shape.name === name));
|
|
1071
|
+
return konvaShape ? konvaShape.initializer(ref) : null;
|
|
1072
|
+
})).filter((x => x));
|
|
1152
1073
|
}
|
|
1153
1074
|
selectObjects(objects) {
|
|
1154
1075
|
const selectedObjs = this._konvaTransformer.nodes().concat(objects.map((x => x.ref())));
|
|
@@ -1211,8 +1132,8 @@ class KonvaMarkup {
|
|
|
1211
1132
|
addObject(object) {
|
|
1212
1133
|
this._konvaLayer.add(object.ref());
|
|
1213
1134
|
}
|
|
1214
|
-
konvaLayerFind(
|
|
1215
|
-
const konvaShape = MarkupMode2Konva[
|
|
1135
|
+
konvaLayerFind(type) {
|
|
1136
|
+
const konvaShape = MarkupMode2Konva[type];
|
|
1216
1137
|
if (konvaShape && konvaShape.initializer) {
|
|
1217
1138
|
return this._konvaLayer.find(konvaShape.name).filter((ref => ref.parent === this._konvaLayer));
|
|
1218
1139
|
}
|