@inweb/markup 25.8.20 → 25.8.22
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 +35 -34
- package/dist/markup.js.map +1 -1
- package/dist/markup.min.js +1 -1
- package/dist/markup.module.js +22 -22
- package/dist/markup.module.js.map +1 -1
- package/lib/index.d.ts +1 -1
- package/lib/markup/IMarkup.d.ts +27 -16
- package/lib/markup/IMarkupArrow.d.ts +8 -16
- package/lib/markup/IMarkupCloud.d.ts +9 -18
- package/lib/markup/IMarkupColorable.d.ts +5 -4
- package/lib/markup/IMarkupEllipse.d.ts +9 -18
- package/lib/markup/IMarkupImage.d.ts +14 -17
- package/lib/markup/IMarkupLine.d.ts +44 -11
- package/lib/markup/IMarkupObject.d.ts +25 -15
- package/lib/markup/IMarkupRectangle.d.ts +9 -18
- package/lib/markup/IMarkupText.d.ts +7 -14
- package/lib/markup/IWorldTransform.d.ts +1 -1
- package/lib/markup/Konva/KonvaLine.d.ts +2 -11
- package/lib/markup/Konva/KonvaMarkup.d.ts +2 -2
- package/lib/markup/Konva/MarkupColor.d.ts +19 -18
- package/package.json +3 -3
- package/src/index.ts +1 -1
- package/src/markup/IMarkup.ts +28 -16
- package/src/markup/IMarkupArrow.ts +8 -16
- package/src/markup/IMarkupCloud.ts +9 -18
- package/src/markup/IMarkupColorable.ts +5 -4
- package/src/markup/IMarkupEllipse.ts +9 -18
- package/src/markup/IMarkupImage.ts +14 -17
- package/src/markup/IMarkupLine.ts +46 -11
- package/src/markup/IMarkupObject.ts +25 -15
- package/src/markup/IMarkupRectangle.ts +9 -18
- package/src/markup/IMarkupText.ts +7 -14
- package/src/markup/IWorldTransform.ts +1 -1
- package/src/markup/Konva/KonvaArrow.ts +1 -1
- package/src/markup/Konva/KonvaCloud.ts +1 -1
- package/src/markup/Konva/KonvaEllipse.ts +1 -1
- package/src/markup/Konva/KonvaImage.ts +1 -1
- package/src/markup/Konva/KonvaLine.ts +3 -12
- package/src/markup/Konva/KonvaMarkup.ts +15 -15
- package/src/markup/Konva/KonvaText.ts +1 -1
- package/src/markup/Konva/MarkupColor.ts +22 -23
package/dist/markup.module.js
CHANGED
|
@@ -1,24 +1,24 @@
|
|
|
1
1
|
import Konva from "konva";
|
|
2
2
|
|
|
3
3
|
class MarkupColor {
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
constructor(r, g, b) {
|
|
5
|
+
this.setColor(r, g, b);
|
|
6
|
+
}
|
|
7
|
+
asHex() {
|
|
8
|
+
return "#" + this.HEX;
|
|
6
9
|
}
|
|
7
|
-
|
|
10
|
+
asRGB() {
|
|
8
11
|
return {
|
|
9
12
|
r: this.R,
|
|
10
13
|
g: this.G,
|
|
11
14
|
b: this.B
|
|
12
15
|
};
|
|
13
16
|
}
|
|
14
|
-
constructor(r, g, b) {
|
|
15
|
-
this.setColor(r, g, b);
|
|
16
|
-
}
|
|
17
17
|
setColor(r, g, b) {
|
|
18
18
|
this.R = r;
|
|
19
19
|
this.G = g;
|
|
20
20
|
this.B = b;
|
|
21
|
-
this.
|
|
21
|
+
this.HEX = this.rgbToHex(r, g, b);
|
|
22
22
|
}
|
|
23
23
|
rgbToHex(r, g, b) {
|
|
24
24
|
const valueToHex = c => {
|
|
@@ -983,7 +983,7 @@ const MarkupMode2Konva = {
|
|
|
983
983
|
|
|
984
984
|
class KonvaMarkup {
|
|
985
985
|
constructor() {
|
|
986
|
-
this.
|
|
986
|
+
this._containerEvents = [];
|
|
987
987
|
this._markupIsActive = false;
|
|
988
988
|
this._markupColor = new MarkupColor(255, 0, 0);
|
|
989
989
|
this.lineWidth = 4;
|
|
@@ -1015,12 +1015,12 @@ class KonvaMarkup {
|
|
|
1015
1015
|
if (this._viewer) this._viewer.emit(event);
|
|
1016
1016
|
};
|
|
1017
1017
|
}
|
|
1018
|
-
initialize(container,
|
|
1018
|
+
initialize(container, containerEvents, viewer, worldTransformer) {
|
|
1019
1019
|
if (!Konva) throw new Error('Markup error: Konva is not initialized. Forgot to add <script src="https://unpkg.com/konva@9/konva.min.js"><\/script> to your page?');
|
|
1020
1020
|
this._viewer = viewer;
|
|
1021
1021
|
this._worldTransformer = worldTransformer !== null && worldTransformer !== void 0 ? worldTransformer : new WorldTransform;
|
|
1022
1022
|
this._container = container;
|
|
1023
|
-
this.
|
|
1023
|
+
this._containerEvents = containerEvents !== null && containerEvents !== void 0 ? containerEvents : [];
|
|
1024
1024
|
this._markupContainer = document.createElement("div");
|
|
1025
1025
|
this._markupContainer.id = "markup-container";
|
|
1026
1026
|
this._markupContainer.style.position = "absolute";
|
|
@@ -1034,7 +1034,7 @@ class KonvaMarkup {
|
|
|
1034
1034
|
this._markupColor.setColor(255, 0, 0);
|
|
1035
1035
|
this.initializeKonva();
|
|
1036
1036
|
if (this._viewer) {
|
|
1037
|
-
this.
|
|
1037
|
+
this._containerEvents.forEach((x => this._markupContainer.addEventListener(x, this.redirectToViewer)));
|
|
1038
1038
|
this._viewer.addEventListener("changeactivedragger", this.changeActiveDragger);
|
|
1039
1039
|
this._viewer.addEventListener("pan", this.pan);
|
|
1040
1040
|
}
|
|
@@ -1044,7 +1044,7 @@ class KonvaMarkup {
|
|
|
1044
1044
|
if (this._viewer) {
|
|
1045
1045
|
this._viewer.removeEventListener("pan", this.pan);
|
|
1046
1046
|
this._viewer.removeEventListener("changeactivedragger", this.changeActiveDragger);
|
|
1047
|
-
this.
|
|
1047
|
+
this._containerEvents.forEach((x => this._markupContainer.removeEventListener(x, this.redirectToViewer)));
|
|
1048
1048
|
}
|
|
1049
1049
|
this.destroyKonva();
|
|
1050
1050
|
(_a = this._resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
|
|
@@ -1064,20 +1064,20 @@ class KonvaMarkup {
|
|
|
1064
1064
|
this.getObjects().forEach((obj => obj.delete()));
|
|
1065
1065
|
}
|
|
1066
1066
|
getMarkupColor() {
|
|
1067
|
-
return this._markupColor.
|
|
1067
|
+
return this._markupColor.asRGB();
|
|
1068
1068
|
}
|
|
1069
1069
|
setMarkupColor(r, g, b) {
|
|
1070
1070
|
this._markupColor.setColor(r, g, b);
|
|
1071
1071
|
}
|
|
1072
1072
|
colorizeAllMarkup(r, g, b) {
|
|
1073
|
-
const hexColor = new MarkupColor(r, g, b).
|
|
1073
|
+
const hexColor = new MarkupColor(r, g, b).asHex();
|
|
1074
1074
|
this.getObjects().filter((obj => {
|
|
1075
1075
|
var _a;
|
|
1076
1076
|
return (_a = obj.setColor) === null || _a === void 0 ? void 0 : _a.call(obj, hexColor);
|
|
1077
1077
|
}));
|
|
1078
1078
|
}
|
|
1079
1079
|
colorizeSelectedMarkups(r, g, b) {
|
|
1080
|
-
const hexColor = new MarkupColor(r, g, b).
|
|
1080
|
+
const hexColor = new MarkupColor(r, g, b).asHex();
|
|
1081
1081
|
this.getSelectedObjects().filter((obj => {
|
|
1082
1082
|
var _a;
|
|
1083
1083
|
return (_a = obj.setColor) === null || _a === void 0 ? void 0 : _a.call(obj, hexColor);
|
|
@@ -1601,7 +1601,7 @@ class KonvaMarkup {
|
|
|
1601
1601
|
points: points,
|
|
1602
1602
|
type: type || this.lineType,
|
|
1603
1603
|
width: width || this.lineWidth,
|
|
1604
|
-
color: color || this._markupColor.
|
|
1604
|
+
color: color || this._markupColor.asHex(),
|
|
1605
1605
|
id: id
|
|
1606
1606
|
});
|
|
1607
1607
|
this.addObject(konvaLine);
|
|
@@ -1618,7 +1618,7 @@ class KonvaMarkup {
|
|
|
1618
1618
|
this._textInputRef.style.top = inputY + "px";
|
|
1619
1619
|
this._textInputRef.style.left = inputX + "px";
|
|
1620
1620
|
this._textInputRef.style.fontSize = `${this.fontSize}px`;
|
|
1621
|
-
this._textInputRef.style.color = `${this._markupColor.
|
|
1621
|
+
this._textInputRef.style.color = `${this._markupColor.asHex()}`;
|
|
1622
1622
|
this._textInputRef.style.fontFamily = "Calibri";
|
|
1623
1623
|
this._textInputRef.onkeydown = event => {
|
|
1624
1624
|
if (event.key === "Enter" && !event.shiftKey) {
|
|
@@ -1708,7 +1708,7 @@ class KonvaMarkup {
|
|
|
1708
1708
|
text: text,
|
|
1709
1709
|
rotation: angle,
|
|
1710
1710
|
fontSize: fontSize || this.fontSize,
|
|
1711
|
-
color: color || this._markupColor.
|
|
1711
|
+
color: color || this._markupColor.asHex(),
|
|
1712
1712
|
id: id
|
|
1713
1713
|
});
|
|
1714
1714
|
this.addObject(konvaText);
|
|
@@ -1721,7 +1721,7 @@ class KonvaMarkup {
|
|
|
1721
1721
|
width: width,
|
|
1722
1722
|
height: height,
|
|
1723
1723
|
lineWidth: lineWidth || this.lineWidth,
|
|
1724
|
-
color: color || this._markupColor.
|
|
1724
|
+
color: color || this._markupColor.asHex(),
|
|
1725
1725
|
id: id
|
|
1726
1726
|
});
|
|
1727
1727
|
this.addObject(konvaRectangle);
|
|
@@ -1733,7 +1733,7 @@ class KonvaMarkup {
|
|
|
1733
1733
|
position: position,
|
|
1734
1734
|
radius: radius,
|
|
1735
1735
|
lineWidth: lineWidth,
|
|
1736
|
-
color: color || this._markupColor.
|
|
1736
|
+
color: color || this._markupColor.asHex(),
|
|
1737
1737
|
id: id
|
|
1738
1738
|
});
|
|
1739
1739
|
this.addObject(konvaEllipse);
|
|
@@ -1744,7 +1744,7 @@ class KonvaMarkup {
|
|
|
1744
1744
|
const konvaArrow = new KonvaArrow({
|
|
1745
1745
|
start: start,
|
|
1746
1746
|
end: end,
|
|
1747
|
-
color: color || this._markupColor.
|
|
1747
|
+
color: color || this._markupColor.asHex(),
|
|
1748
1748
|
id: id
|
|
1749
1749
|
});
|
|
1750
1750
|
this.addObject(konvaArrow);
|
|
@@ -1756,7 +1756,7 @@ class KonvaMarkup {
|
|
|
1756
1756
|
position: position,
|
|
1757
1757
|
width: width,
|
|
1758
1758
|
height: height,
|
|
1759
|
-
color: color || this._markupColor.
|
|
1759
|
+
color: color || this._markupColor.asHex(),
|
|
1760
1760
|
lineWidth: lineWidth || this.lineWidth,
|
|
1761
1761
|
id: id
|
|
1762
1762
|
});
|