@inweb/markup 25.8.19 → 25.8.21

package/dist/markup.module.js

@@ -1,24 +1,24 @@
 import Konva from "konva";
 
 class MarkupColor {
-    get HexColor() {
-        return "#" + this._hex;
+    constructor(r, g, b) {
+        this.setColor(r, g, b);
+    }
+    asHex() {
+        return "#" + this.HEX;
     }
-    get RGB() {
+    asRGB() {
         return {
             r: this.R,
             g: this.G,
             b: this.B
         };
     }
-    constructor(r, g, b) {
-        this.setColor(r, g, b);
-    }
     setColor(r, g, b) {
         this.R = r;
         this.G = g;
         this.B = b;
-        this._hex = this.rgbToHex(r, g, b);
+        this.HEX = this.rgbToHex(r, g, b);
     }
     rgbToHex(r, g, b) {
         const valueToHex = c => {
@@ -61,7 +61,14 @@ class KonvaLine {
             this._ref = ref;
             return;
         }
-        if (!params || !params.points) return;
+        if (!params) params = {};
+        if (!params.points) params.points = [ {
+            x: 50,
+            y: 50
+        }, {
+            x: 100,
+            y: 100
+        } ];
         const konvaPoints = [];
         params.points.forEach((point => konvaPoints.push(point.x, point.y)));
         this._ref = new Konva.Line({
@@ -163,7 +170,12 @@ class KonvaText {
             this._ref = ref;
             return;
         }
-        if (!params || !params.position || !params.text) return;
+        if (!params) params = {};
+        if (!params.position) params.position = {
+            x: 100,
+            y: 100
+        };
+        if (!params.text) params.text = "default";
         this._ref = new Konva.Text({
             x: params.position.x,
             y: params.position.y,
@@ -265,7 +277,11 @@ class KonvaRectangle {
             this._ref = ref;
             return;
         }
-        if (!params || !params.position) return;
+        if (!params) params = {};
+        if (!params.position) params.position = {
+            x: 100,
+            y: 100
+        };
         this._ref = new Konva.Rect({
             stroke: (_a = params.color) !== null && _a !== void 0 ? _a : "#ff0000",
             strokeWidth: (_b = params.lineWidth) !== null && _b !== void 0 ? _b : 4,
@@ -375,7 +391,15 @@ class KonvaEllipse {
             this._ref = ref;
             return;
         }
-        if (!params || !params.position || !params.radius) return;
+        if (!params) params = {};
+        if (!params.position) params.position = {
+            x: 100,
+            y: 100
+        };
+        if (!params.radius) params.radius = {
+            x: 25,
+            y: 25
+        };
         this._ref = new Konva.Ellipse({
             stroke: (_a = params.color) !== null && _a !== void 0 ? _a : "#ff0000",
             strokeWidth: (_b = params.lineWidth) !== null && _b !== void 0 ? _b : 4,
@@ -497,7 +521,15 @@ class KonvaArrow {
             this._ref = ref;
             return;
         }
-        if (!params || !params.start || !params.end) return;
+        if (!params) params = {};
+        if (!params.start) params.start = {
+            x: 50,
+            y: 50
+        };
+        if (!params.end) params.end = {
+            x: 100,
+            y: 100
+        };
         this._ref = new Konva.Arrow({
             stroke: (_a = params.color) !== null && _a !== void 0 ? _a : "#ff0000",
             fill: (_b = params.color) !== null && _b !== void 0 ? _b : "#ff0000",
@@ -594,22 +626,24 @@ class KonvaImage {
         var _a, _b;
         this._ratio = 1;
         this.EPSILON = 1e-5;
+        this.BASE64_NOT_FOUND = "data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAADsAAAA7AF5KHG9AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAmhJREFUWIXtlr9rVEEQxz+H8RQUJIdeIopYm0vkCg0GBBtbG1NF7Kxt7dR/IGIw/uhTaBNLERURg2kCEUyCYCPi70b0InjGS57FzOZN3r19d+9HJIVfWO52dma/s7Mz8xa2KAaBCWAR+AkECWOmSOIdwC1gtQOpHc+NfQ8wClQ8+1d0vcdH/lQ3bSIRGAZ2pTjAqNovANXIWlXlAXA2zvi2Ln4AjqYgtagYEutENSLvjRoOImFv5iB32Ae8UrLXwFBk3h9ndF0VJnKSO9gTu3yKu5Z1LKnS8YIcABgw5Ks692JZFXcXRJ46Aq6kikCnHNi/mQ50WwVtfaIoBzL3gRk2drSscJ2wrc4VvUoe2wn/41/iBfoVLRnBGnDSY3AAKacy8AmYR+o7K1zCl6wgrgpOAc/MuhvfgMuk+1JGHQgSBcAloKXy78AjYBppJk5/noTulseBMZ23iD/piHFkEdgTQzKk+5wHjmHC3cmBg0BD5xcSTrFXyQPgIWFtDwMvab+2N8DpbhyY1v/3E8gdDgNfVX9SCVZ0/gW4B0wB71S2BpxLcuCM/jaQSHSDEeAX4VMuAG4gTzyHbcAVXXO6GxxwIX+vvxe7JHcYQ07nHqklj96UIW/YhSWzMKcep8VVtf8B1Dw6h4DfhB+sdbgn2R+gnoEc5NR3dZ+3QJ9H74HqXLPCGlJyTfI9y3YCs0owq3OLOpKkLeBI1HhSDT/mdKIPiUCARMTlQx34TMLjtww8IczmO8AJ/N/2JNSQXAiQ671JePePge0+wzJSQq4FFzlaenIvucUAkiQLhC/mLGNZ9xgn5s63BP4CCk0QDtm4BhoAAAAASUVORK5CYII=";
+        this.BASE64_HEADER_START = "data:image/";
         if (ref) {
+            if (!ref.src || !ref.src.startsWith(this.BASE64_HEADER_START)) ref.src = this.BASE64_NOT_FOUND;
+            if (ref.height() <= this.EPSILON) ref.height(32);
+            if (ref.width() <= this.EPSILON) ref.width(32);
             this._ref = ref;
             this._canvasImage = ref.image();
             this._ratio = this._ref.height() <= this.EPSILON || this._ref.width() <= this.EPSILON ? 1 : this._ref.height() / this._ref.width();
             return;
         }
-        if (!params || !params.position || !params.src) return;
+        if (!params) params = {};
+        if (!params.position) params.position = {
+            x: 50,
+            y: 50
+        };
+        if (!params.src || !params.src.startsWith(this.BASE64_HEADER_START)) params.src = this.BASE64_NOT_FOUND;
         this._canvasImage = new Image;
-        this._ref = new Konva.Image({
-            x: params.position.x,
-            y: params.position.y,
-            image: this._canvasImage,
-            width: (_a = params.width) !== null && _a !== void 0 ? _a : 0,
-            height: (_b = params.height) !== null && _b !== void 0 ? _b : 0,
-            draggable: true
-        });
         this._canvasImage.onload = () => {
             this._ref.image(this._canvasImage);
             if (this._ref.height() <= this.EPSILON) this._ref.height(this._canvasImage.height);
@@ -629,7 +663,19 @@ class KonvaImage {
                 }
             }
         };
+        this._canvasImage.onerror = () => {
+            this._canvasImage.onerror = function() {};
+            this._canvasImage.src = this.BASE64_NOT_FOUND;
+        };
         this._canvasImage.src = params.src;
+        this._ref = new Konva.Image({
+            x: params.position.x,
+            y: params.position.y,
+            image: this._canvasImage,
+            width: (_a = params.width) !== null && _a !== void 0 ? _a : 0,
+            height: (_b = params.height) !== null && _b !== void 0 ? _b : 0,
+            draggable: true
+        });
         this._ref.on("transform", (e => {
             const attrs = e.target.attrs;
             if (attrs.rotation !== this._ref.rotation()) this._ref.rotation(attrs.rotation);
@@ -728,7 +774,11 @@ class KonvaCloud {
             this._ref = ref;
             return;
         }
-        if (!params || !params.position) return;
+        if (!params) params = {};
+        if (!params.position) params.position = {
+            x: 100,
+            y: 100
+        };
         const arcRadius = 16;
         this._ref = new Konva.Shape({
             x: params.position.x,
@@ -933,7 +983,7 @@ const MarkupMode2Konva = {
 
 class KonvaMarkup {
     constructor() {
-        this._pointerEvents = [];
+        this._containerEvents = [];
         this._markupIsActive = false;
         this._markupColor = new MarkupColor(255, 0, 0);
         this.lineWidth = 4;
@@ -965,12 +1015,12 @@ class KonvaMarkup {
             if (this._viewer) this._viewer.emit(event);
         };
     }
-    initialize(container, pointerEvents, viewer, worldTransformer) {
+    initialize(container, containerEvents, viewer, worldTransformer) {
         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?');
         this._viewer = viewer;
         this._worldTransformer = worldTransformer !== null && worldTransformer !== void 0 ? worldTransformer : new WorldTransform;
         this._container = container;
-        this._pointerEvents = pointerEvents !== null && pointerEvents !== void 0 ? pointerEvents : [];
+        this._containerEvents = containerEvents !== null && containerEvents !== void 0 ? containerEvents : [];
         this._markupContainer = document.createElement("div");
         this._markupContainer.id = "markup-container";
         this._markupContainer.style.position = "absolute";
@@ -984,7 +1034,7 @@ class KonvaMarkup {
         this._markupColor.setColor(255, 0, 0);
         this.initializeKonva();
         if (this._viewer) {
-            this._pointerEvents.forEach((x => this._markupContainer.addEventListener(x, this.redirectToViewer)));
+            this._containerEvents.forEach((x => this._markupContainer.addEventListener(x, this.redirectToViewer)));
             this._viewer.addEventListener("changeactivedragger", this.changeActiveDragger);
             this._viewer.addEventListener("pan", this.pan);
         }
@@ -994,7 +1044,7 @@ class KonvaMarkup {
         if (this._viewer) {
             this._viewer.removeEventListener("pan", this.pan);
             this._viewer.removeEventListener("changeactivedragger", this.changeActiveDragger);
-            this._pointerEvents.forEach((x => this._markupContainer.removeEventListener(x, this.redirectToViewer)));
+            this._containerEvents.forEach((x => this._markupContainer.removeEventListener(x, this.redirectToViewer)));
         }
         this.destroyKonva();
         (_a = this._resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
@@ -1014,20 +1064,20 @@ class KonvaMarkup {
         this.getObjects().forEach((obj => obj.delete()));
     }
     getMarkupColor() {
-        return this._markupColor.RGB;
+        return this._markupColor.asRGB();
     }
     setMarkupColor(r, g, b) {
         this._markupColor.setColor(r, g, b);
     }
     colorizeAllMarkup(r, g, b) {
-        const hexColor = new MarkupColor(r, g, b).HexColor;
+        const hexColor = new MarkupColor(r, g, b).asHex();
         this.getObjects().filter((obj => {
             var _a;
             return (_a = obj.setColor) === null || _a === void 0 ? void 0 : _a.call(obj, hexColor);
         }));
     }
     colorizeSelectedMarkups(r, g, b) {
-        const hexColor = new MarkupColor(r, g, b).HexColor;
+        const hexColor = new MarkupColor(r, g, b).asHex();
         this.getSelectedObjects().filter((obj => {
             var _a;
             return (_a = obj.setColor) === null || _a === void 0 ? void 0 : _a.call(obj, hexColor);
@@ -1551,7 +1601,7 @@ class KonvaMarkup {
             points: points,
             type: type || this.lineType,
             width: width || this.lineWidth,
-            color: color || this._markupColor.HexColor,
+            color: color || this._markupColor.asHex(),
             id: id
         });
         this.addObject(konvaLine);
@@ -1568,7 +1618,7 @@ class KonvaMarkup {
             this._textInputRef.style.top = inputY + "px";
             this._textInputRef.style.left = inputX + "px";
             this._textInputRef.style.fontSize = `${this.fontSize}px`;
-            this._textInputRef.style.color = `${this._markupColor.HexColor}`;
+            this._textInputRef.style.color = `${this._markupColor.asHex()}`;
             this._textInputRef.style.fontFamily = "Calibri";
             this._textInputRef.onkeydown = event => {
                 if (event.key === "Enter" && !event.shiftKey) {
@@ -1658,7 +1708,7 @@ class KonvaMarkup {
             text: text,
             rotation: angle,
             fontSize: fontSize || this.fontSize,
-            color: color || this._markupColor.HexColor,
+            color: color || this._markupColor.asHex(),
             id: id
         });
         this.addObject(konvaText);
@@ -1671,7 +1721,7 @@ class KonvaMarkup {
             width: width,
             height: height,
             lineWidth: lineWidth || this.lineWidth,
-            color: color || this._markupColor.HexColor,
+            color: color || this._markupColor.asHex(),
             id: id
         });
         this.addObject(konvaRectangle);
@@ -1683,7 +1733,7 @@ class KonvaMarkup {
             position: position,
             radius: radius,
             lineWidth: lineWidth,
-            color: color || this._markupColor.HexColor,
+            color: color || this._markupColor.asHex(),
             id: id
         });
         this.addObject(konvaEllipse);
@@ -1694,7 +1744,7 @@ class KonvaMarkup {
         const konvaArrow = new KonvaArrow({
             start: start,
             end: end,
-            color: color || this._markupColor.HexColor,
+            color: color || this._markupColor.asHex(),
             id: id
         });
         this.addObject(konvaArrow);
@@ -1706,7 +1756,7 @@ class KonvaMarkup {
             position: position,
             width: width,
             height: height,
-            color: color || this._markupColor.HexColor,
+            color: color || this._markupColor.asHex(),
             lineWidth: lineWidth || this.lineWidth,
             id: id
         });