@inweb/markup 25.7.10 → 25.8.1

package/dist/markup.js

@@ -11525,6 +11525,40 @@
 	    }
 	}
 
+	///////////////////////////////////////////////////////////////////////////////
+	// Copyright (C) 2002-2024, Open Design Alliance (the "Alliance").
+	// All rights reserved.
+	//
+	// This software and its documentation and related materials are owned by
+	// the Alliance. The software may only be incorporated into application
+	// programs owned by members of the Alliance, subject to a signed
+	// Membership Agreement and Supplemental Software License Agreement with the
+	// Alliance. The structure and organization of this software are the valuable
+	// trade secrets of the Alliance and its suppliers. The software is also
+	// protected by copyright law and international treaty provisions. Application
+	// programs incorporating this software must include the following statement
+	// with their copyright notices:
+	//
+	//   This application incorporates Open Design Alliance software pursuant to a
+	//   license agreement with Open Design Alliance.
+	//   Open Design Alliance Copyright (C) 2002-2024 by Open Design Alliance.
+	//   All rights reserved.
+	//
+	// By use of this software, its documentation or related materials, you
+	// acknowledge and accept the above terms.
+	///////////////////////////////////////////////////////////////////////////////
+	class WorldTransform {
+	    screenToWorld(position) {
+	        return { x: position.x, y: position.y, z: 0 };
+	    }
+	    worldToScreen(position) {
+	        return { x: position.x, y: position.y };
+	    }
+	    getScale() {
+	        return { x: 1, y: 1, z: 1 };
+	    }
+	}
+
 	const LineTypeSpecs = new Map([
 	    ["solid", []],
 	    ["dot", [30, 30, 0.001, 30]],
@@ -12347,31 +12381,37 @@
 	    },
 	    Line: {
 	        name: "Line",
-	        initializer: (ref) => new KonvaLine(null, ref),
+	        initializer: (ref, params = null) => new KonvaLine(params, ref),
+	        zIndex: 1,
 	    },
 	    Text: {
 	        name: "Text",
-	        initializer: (ref) => new KonvaText(null, ref),
+	        initializer: (ref, params = null) => new KonvaText(params, ref),
 	    },
 	    Rectangle: {
 	        name: "Rect",
-	        initializer: (ref) => new KonvaRectangle(null, ref),
+	        initializer: (ref, params = null) => new KonvaRectangle(params, ref),
+	        zIndex: 1,
 	    },
 	    Ellipse: {
 	        name: "Ellipse",
-	        initializer: (ref) => new KonvaEllipse(null, ref),
+	        initializer: (ref, params = null) => new KonvaEllipse(params, ref),
+	        zIndex: 1,
 	    },
 	    Arrow: {
 	        name: "Arrow",
-	        initializer: (ref) => new KonvaArrow(null, ref),
+	        initializer: (ref, params = null) => new KonvaArrow(params, ref),
+	        zIndex: 1,
 	    },
 	    Image: {
 	        name: "Image",
-	        initializer: (ref) => new KonvaImage(null, ref),
+	        initializer: (ref, params = null) => new KonvaImage(params, ref),
+	        zIndex: 0,
 	    },
 	    Cloud: {
 	        name: "Cloud",
 	        initializer: (ref) => new KonvaCloud(null, ref),
+	        zIndex: 1,
 	    },
 	};
 	/**
@@ -12410,7 +12450,7 @@
 	        this.pan = (event) => {
 	            const dX = event.dX / window.devicePixelRatio;
 	            const dY = event.dY / window.devicePixelRatio;
-	            Object.keys(MarkupMode2Konva).forEach((mode) => this.konvaLayerFind(mode).forEach((ref) => ref.move({ x: dX, y: dY })));
+	            this.getObjects().forEach((obj) => obj.ref().move({ x: dX, y: dY }));
 	        };
 	        this.redirectToViewer = (event) => {
 	            if (this._viewer)
@@ -12421,7 +12461,7 @@
 	        if (!Konva)
 	            throw new Error('Markup: Error during initialization. Konva is not initialized. Update node_modules or add to your page <script src="https://unpkg.com/konva@9/konva.min.js"></script>');
 	        this._viewer = viewer;
-	        this._worldTransformer = worldTransformer;
+	        this._worldTransformer = worldTransformer !== null && worldTransformer !== void 0 ? worldTransformer : new WorldTransform();
 	        this._container = container;
 	        this._pointerEvents = pointerEvents !== null && pointerEvents !== void 0 ? pointerEvents : [];
 	        this._markupContainer = document.createElement("div");
@@ -12467,8 +12507,8 @@
 	    clearOverlay() {
 	        this.removeTextInput();
 	        this.removeImageInput();
-	        this._konvaTransformer.nodes([]);
-	        Object.keys(MarkupMode2Konva).forEach((mode) => this.konvaLayerFind(mode).forEach((ref) => ref.destroy()));
+	        this.clearSelected();
+	        this.getObjects().forEach((obj) => obj.ref().destroy());
 	    }
 	    getMarkupColor() {
 	        return this._markupColor.RGB;
@@ -12476,24 +12516,21 @@
 	    setMarkupColor(r, g, b) {
 	        this._markupColor.setColor(r, g, b);
 	    }
-	    colorizeAllMarkup(r = 255, g = 0, b = 0) {
-	        const hex = new MarkupColor(r, g, b).HexColor;
-	        Object.keys(MarkupMode2Konva).forEach((mode) => {
-	            this.konvaLayerFind(mode).forEach((ref) => {
-	                const konvaShape = MarkupMode2Konva[mode];
-	                const konvaObj = konvaShape.initializer(ref);
-	                if (konvaObj.setColor)
-	                    konvaObj.setColor(hex);
-	            });
+	    colorizeAllMarkup(r, g, b) {
+	        const hexColor = new MarkupColor(r, g, b).HexColor;
+	        this.getObjects().forEach((obj) => {
+	            const colorable = obj;
+	            if (colorable && colorable.setColor)
+	                colorable.setColor(hexColor);
 	        });
 	        this._konvaLayer.draw();
 	    }
 	    colorizeSelectedMarkups(r, g, b) {
+	        const hexColor = new MarkupColor(r, g, b).HexColor;
 	        this.getSelectedObjects().forEach((obj) => {
 	            const colorable = obj;
-	            if (colorable && colorable.setColor) {
-	                colorable.setColor(new MarkupColor(r, g, b).HexColor);
-	            }
+	            if (colorable && colorable.setColor)
+	                colorable.setColor(hexColor);
 	        });
 	    }
 	    setViewpoint(viewpoint) {
@@ -12533,99 +12570,35 @@
 	        return this;
 	    }
 	    createObject(type, params) {
-	        let object = null;
-	        let zIndex = this._zIndex;
-	        // TODO: factory?
-	        switch (type.toLocaleLowerCase()) {
-	            case "line":
-	                object = new KonvaLine(params);
-	                zIndex = 1;
-	                break;
-	            case "text":
-	                object = new KonvaText(params);
-	                break;
-	            case "rectangle":
-	                object = new KonvaRectangle(params);
-	                zIndex = 1;
-	                break;
-	            case "ellipse":
-	                object = new KonvaEllipse(params);
-	                zIndex = 1;
-	                break;
-	            case "arrow":
-	                object = new KonvaArrow(params);
-	                break;
-	            case "image":
-	                object = new KonvaImage(params);
-	                zIndex = 0;
-	                break;
-	            case "cloud":
-	                object = new KonvaCloud(params);
-	                zIndex = 1;
-	                break;
-	            default:
-	                throw new Error("Markup CreateObject - unsupported type has been detected.");
-	        }
+	        var _a;
+	        const konvaShape = MarkupMode2Konva[type];
+	        if (!konvaShape || !konvaShape.initializer)
+	            throw new Error(`Markup CreateObject - unsupported markup type ${type}`);
+	        const object = konvaShape.initializer(null, params);
 	        this.addObject(object);
-	        // Set zIndex only when shape has been added to Layer else we will get "Konva warning: Node has no parent. zIndex parameter is ignored."
-	        object.setZIndex(zIndex);
+	        // Set zIndex only when shape has been added to Layer else we will get
+	        // "Konva warning: Node has no parent. zIndex parameter is ignored."
+	        object.setZIndex((_a = konvaShape.zIndex) !== null && _a !== void 0 ? _a : this._zIndex);
 	        this._zIndex++;
 	        return object;
 	    }
 	    getObjects() {
 	        const objects = [];
-	        this.konvaLayerFind("Line").forEach((line) => {
-	            objects.push(new KonvaLine(null, line));
-	        });
-	        this.konvaLayerFind("Text").forEach((text) => {
-	            objects.push(new KonvaText(null, text));
-	        });
-	        this.konvaLayerFind("Rectangle").forEach((rectangle) => {
-	            objects.push(new KonvaRectangle(null, rectangle));
-	        });
-	        this.konvaLayerFind("Ellipse").forEach((ellipse) => {
-	            objects.push(new KonvaEllipse(null, ellipse));
-	        });
-	        this.konvaLayerFind("Arrow").forEach((arrow) => {
-	            objects.push(new KonvaArrow(null, arrow));
-	        });
-	        this.konvaLayerFind("Image").forEach((image) => {
-	            objects.push(new KonvaImage(null, image));
-	        });
-	        this.konvaLayerFind("Cloud").forEach((cloud) => {
-	            objects.push(new KonvaCloud(null, cloud));
+	        Object.keys(MarkupMode2Konva).forEach((type) => {
+	            const konvaShape = MarkupMode2Konva[type];
+	            this.konvaLayerFind(type).forEach((ref) => objects.push(konvaShape.initializer(ref)));
 	        });
 	        return objects;
 	    }
 	    getSelectedObjects() {
-	        const objects = [];
-	        this._konvaTransformer.nodes().forEach((obj) => {
-	            const konvaShapeName = obj.className;
-	            switch (konvaShapeName) {
-	                case "Line":
-	                    objects.push(new KonvaLine(null, obj));
-	                    break;
-	                case "Text":
-	                    objects.push(new KonvaText(null, obj));
-	                    break;
-	                case "Rect":
-	                    objects.push(new KonvaRectangle(null, obj));
-	                    break;
-	                case "Ellipse":
-	                    objects.push(new KonvaEllipse(null, obj));
-	                    break;
-	                case "Arrow":
-	                    objects.push(new KonvaArrow(null, obj));
-	                    break;
-	                case "Image":
-	                    objects.push(new KonvaImage(null, obj));
-	                    break;
-	                case "Cloud":
-	                    objects.push(new KonvaCloud(null, obj));
-	                    break;
-	            }
-	        });
-	        return objects;
+	        return this._konvaTransformer
+	            .nodes()
+	            .map((ref) => {
+	            const name = ref.className;
+	            const konvaShape = Object.values(MarkupMode2Konva).find((shape) => shape.name === name);
+	            return konvaShape ? konvaShape.initializer(ref) : null;
+	        })
+	            .filter((x) => x);
 	    }
 	    selectObjects(objects) {
 	        const selectedObjs = this._konvaTransformer.nodes().concat(objects.map((x) => x.ref()));
@@ -12634,9 +12607,6 @@
 	    clearSelected() {
 	        this._konvaTransformer.nodes([]);
 	    }
-	    getPoint3dFromArray(array) {
-	        return { x: array[0], y: array[1], z: array[2] };
-	    }
 	    fillViewpointShapes(viewpoint) {
 	        const markupLines = this.getMarkupLines();
 	        if (markupLines && markupLines.length > 0) {
@@ -12684,8 +12654,8 @@
 	    addObject(object) {
 	        this._konvaLayer.add(object.ref());
 	    }
-	    konvaLayerFind(markupShape) {
-	        const konvaShape = MarkupMode2Konva[markupShape];
+	    konvaLayerFind(type) {
+	        const konvaShape = MarkupMode2Konva[type];
 	        if (konvaShape && konvaShape.initializer) {
 	            // for "draggable" Konva uses Rectangles in Transformer. We need only Shapes from layer.
 	            return this._konvaLayer.find(konvaShape.name).filter((ref) => ref.parent === this._konvaLayer);
@@ -12931,7 +12901,7 @@
 	            const konvaLine = new KonvaLine(null, line);
 	            lines.push({
 	                id: konvaLine.id(),
-	                points: worldPoints.map((p) => this.getPoint3dFromArray(p)),
+	                points: worldPoints,
 	                color: konvaLine.getColor() || "#ff0000",
 	                type: konvaLine.getLineType() || this.lineType,
 	                width: konvaLine.getLineWidth() || this.lineWidth,
@@ -12946,14 +12916,12 @@
 	        this.konvaLayerFind("Text").forEach((text) => {
 	            if (!text)
 	                return;
-	            const position = this._worldTransformer.screenToWorld({
-	                x: text.x(),
-	                y: text.y(),
-	            });
+	            const position = { x: text.x(), y: text.y() };
+	            const worldPoint = this._worldTransformer.screenToWorld(position);
 	            const shape = new KonvaText(null, text);
 	            texts.push({
 	                id: shape.id(),
-	                position: this.getPoint3dFromArray(position),
+	                position: worldPoint,
 	                text: shape.getText(),
 	                text_size: textSize * textScale.y,
 	                angle: shape.getRotation(),
@@ -12971,7 +12939,7 @@
 	            const shape = new KonvaRectangle(null, rect);
 	            rectangles.push({
 	                id: shape.id(),
-	                position: this.getPoint3dFromArray(worldPoint),
+	                position: worldPoint,
 	                width: shape.getWidth(),
 	                height: shape.getHeigth(),
 	                line_width: shape.getLineWidth(),
@@ -12988,7 +12956,7 @@
 	            const shape = new KonvaEllipse(null, ellipse);
 	            ellipses.push({
 	                id: shape.id(),
-	                position: this.getPoint3dFromArray(worldPoint),
+	                position: worldPoint,
 	                radius: { x: ellipse.getRadiusX(), y: ellipse.getRadiusY() },
 	                line_width: shape.getLineWidth(),
 	                color: shape.getColor(),
@@ -13008,8 +12976,8 @@
 	            const shape = new KonvaArrow(null, arrow);
 	            arrows.push({
 	                id: shape.id(),
-	                start: this.getPoint3dFromArray(worldStartPoint),
-	                end: this.getPoint3dFromArray(worldEndPoint),
+	                start: worldStartPoint,
+	                end: worldEndPoint,
 	                color: shape.getColor(),
 	            });
 	        });
@@ -13023,7 +12991,7 @@
 	            const shape = new KonvaImage(null, image);
 	            images.push({
 	                id: shape.id(),
-	                position: this.getPoint3dFromArray(worldPoint),
+	                position: worldPoint,
 	                src: shape.getSrc(),
 	                width: shape.getWidth(),
 	                height: shape.getHeight(),
@@ -13039,7 +13007,7 @@
 	            const shape = new KonvaCloud(null, cloud);
 	            clouds.push({
 	                id: shape.id(),
-	                position: this.getPoint3dFromArray(worldPoint),
+	                position: worldPoint,
 	                width: shape.getWidth(),
 	                height: shape.getHeigth(),
 	                line_width: shape.getLineWidth(),