@inweb/markup 25.8.19 → 25.8.21

package/dist/markup.js

@@ -11478,43 +11478,44 @@
 	// acknowledge and accept the above terms.
 	///////////////////////////////////////////////////////////////////////////////
 	/**
-	 * Markup color.
+	 * Defines the markup color helper object.
 	 */
 	class MarkupColor {
 	    /**
-	     * Color in #000000 format
+	     * Creates an instance of the color.
+	     *
+	     * @param r - The `red` component of the color, as a number between 0 and 255.
+	     * @param g - The `green` component of the color, as a number between 0 and 255.
+	     * @param b - The `blue` component of the color, as a number between 0 and 255.
 	     */
-	    get HexColor() {
-	        return "#" + this._hex;
+	    constructor(r, g, b) {
+	        this.setColor(r, g, b);
 	    }
 	    /**
-	     * Color as object with r,g,b properties
+	     * Returns the color as a string in hexadecimal color syntax `#RGB` using its primary color
+	     * components (red, green, blue) written as hexadecimal numbers.
 	     */
-	    get RGB() {
-	        return { r: this.R, g: this.G, b: this.B };
+	    asHex() {
+	        return "#" + this.HEX;
 	    }
 	    /**
-	     * Create an instance of Color
-	     *
-	     * @param r - Red color in [0,255] range
-	     * @param g - Green color in [0,255] range
-	     * @param b - Blue color in [0,255] range
+	     * Returns the color as an {r, g, b} object.
 	     */
-	    constructor(r, g, b) {
-	        this.setColor(r, g, b);
+	    asRGB() {
+	        return { r: this.R, g: this.G, b: this.B };
 	    }
 	    /**
-	     * Set Color for current instance
+	     * Sets the color.
 	     *
-	     * @param r - Red color in [0,255] range
-	     * @param g - Green color in [0,255] range
-	     * @param b - Blue color in [0,255] range
+	     * @param r - The `red` component of the color, as a number between 0 and 255.
+	     * @param g - The `green` component of the color, as a number between 0 and 255.
+	     * @param b - The `blue` component of the color, as a number between 0 and 255.
 	     */
 	    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) => {
@@ -11571,8 +11572,13 @@
 	            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({
@@ -11674,8 +11680,12 @@
 	            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,
@@ -11776,8 +11786,10 @@
 	            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,
@@ -11886,8 +11898,12 @@
 	            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,
@@ -12002,8 +12018,12 @@
 	            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",
@@ -12092,8 +12112,15 @@
 	        var _a, _b;
 	        this._ratio = 1;
 	        this.EPSILON = 10e-6;
+	        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.height() === 0 || ref.width() === 0) return;
+	            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 =
@@ -12102,17 +12129,13 @@
 	                    : 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)
@@ -12140,7 +12163,19 @@
 	                }
 	            }
 	        };
+	        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())
@@ -12238,8 +12273,10 @@
 	            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,
@@ -12436,7 +12473,7 @@
 	 */
 	class KonvaMarkup {
 	    constructor() {
-	        this._pointerEvents = [];
+	        this._containerEvents = [];
 	        this._markupIsActive = false;
 	        this._markupColor = new MarkupColor(255, 0, 0);
 	        this.lineWidth = 4;
@@ -12473,13 +12510,13 @@
 	                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";
@@ -12494,7 +12531,7 @@
 	        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);
 	        }
@@ -12504,7 +12541,7 @@
 	        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();
@@ -12524,17 +12561,17 @@
 	        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); });
 	    }
 	    setViewpoint(viewpoint) {
@@ -13071,7 +13108,7 @@
 	            points,
 	            type: type || this.lineType,
 	            width: width || this.lineWidth,
-	            color: color || this._markupColor.HexColor,
+	            color: color || this._markupColor.asHex(),
 	            id,
 	        });
 	        this.addObject(konvaLine);
@@ -13088,7 +13125,7 @@
 	            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) {
@@ -13180,7 +13217,7 @@
 	            text,
 	            rotation: angle,
 	            fontSize: fontSize || this.fontSize,
-	            color: color || this._markupColor.HexColor,
+	            color: color || this._markupColor.asHex(),
 	            id,
 	        });
 	        this.addObject(konvaText);
@@ -13194,7 +13231,7 @@
 	            width,
 	            height,
 	            lineWidth: lineWidth || this.lineWidth,
-	            color: color || this._markupColor.HexColor,
+	            color: color || this._markupColor.asHex(),
 	            id,
 	        });
 	        this.addObject(konvaRectangle);
@@ -13207,7 +13244,7 @@
 	            position,
 	            radius,
 	            lineWidth,
-	            color: color || this._markupColor.HexColor,
+	            color: color || this._markupColor.asHex(),
 	            id,
 	        });
 	        this.addObject(konvaEllipse);
@@ -13219,7 +13256,7 @@
 	        const konvaArrow = new KonvaArrow({
 	            start,
 	            end,
-	            color: color || this._markupColor.HexColor,
+	            color: color || this._markupColor.asHex(),
 	            id,
 	        });
 	        this.addObject(konvaArrow);
@@ -13232,7 +13269,7 @@
 	            position,
 	            width,
 	            height,
-	            color: color || this._markupColor.HexColor,
+	            color: color || this._markupColor.asHex(),
 	            lineWidth: lineWidth || this.lineWidth,
 	            id,
 	        });