kritzel-stencil 0.0.112 → 0.0.114

package/dist/cjs/app-globals-V2Kpy_OQ.js

@@ -0,0 +1,8 @@
+'use strict';
+
+const globalScripts = () => {};
+
+exports.globalScripts = globalScripts;
+//# sourceMappingURL=app-globals-V2Kpy_OQ.js.map
+
+//# sourceMappingURL=app-globals-V2Kpy_OQ.js.map

package/dist/cjs/app-globals-V2Kpy_OQ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-globals-V2Kpy_OQ.js","sources":["@stencil/core/internal/app-globals"],"sourcesContent":["export const globalScripts = () => {};\nexport const globalStyles = \"\";\n"],"names":[],"mappings":";;AAAY,MAAC,aAAa,GAAG,MAAM;;;;"}

package/dist/cjs/index-C2M4eyxF.js

@@ -0,0 +1,652 @@
+'use strict';
+
+class KritzelToolRegistry {
+    static registerTool(toolName, constructor, store) {
+        const toolInstance = new constructor(store);
+        toolInstance.name = toolName;
+        this.registry[toolName] = toolInstance;
+        return toolInstance;
+    }
+    static getTool(toolName) {
+        const toolInstance = this.registry[toolName];
+        if (!toolInstance) {
+            console.warn(`Unknown tool: ${toolName}`);
+            return null;
+        }
+        return toolInstance;
+    }
+}
+KritzelToolRegistry.registry = {};
+
+class KritzelBaseTool {
+    constructor(store) {
+        this.__class__ = this.constructor.name;
+        this.name = 'base-tool';
+        this._store = store;
+    }
+    onActivate() {
+        // default implementation
+    }
+    onDeactivate() {
+        // default implementation
+    }
+    handlePointerDown(_event) {
+        // default implementation
+    }
+    handlePointerMove(_event) {
+        // default implementation
+    }
+    handlePointerUp(_event) {
+        // default implementation
+    }
+    handleWheel(_event) {
+        // default implementation
+    }
+    revive(object) {
+        Object.assign(this, object);
+        return this;
+    }
+}
+
+class KritzelBaseCommand {
+    constructor(store, initiator) {
+        var _a, _b;
+        this._store = store;
+        this.initiator = (_b = (_a = initiator === null || initiator === void 0 ? void 0 : initiator.constructor) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : 'Unknown';
+        this.isUndoable = true;
+    }
+    execute() {
+        throw new Error('Method not implemented.');
+    }
+    undo() {
+        throw new Error('Method not implemented.');
+    }
+}
+
+class AddObjectCommand extends KritzelBaseCommand {
+    constructor(store, initiator, object) {
+        super(store, initiator);
+        this.object = object;
+    }
+    execute() {
+        this._store.state.objectsOctree.insert(this.object);
+    }
+    undo() {
+        this._store.state.objectsOctree.remove(object => object.id === this.object.id);
+    }
+}
+
+exports.KritzelMouseButton = void 0;
+(function (KritzelMouseButton) {
+    KritzelMouseButton[KritzelMouseButton["Left"] = 0] = "Left";
+    KritzelMouseButton[KritzelMouseButton["Middle"] = 1] = "Middle";
+    KritzelMouseButton[KritzelMouseButton["Right"] = 2] = "Right";
+})(exports.KritzelMouseButton || (exports.KritzelMouseButton = {}));
+
+class KritzelEventHelper {
+    static isRightClick(ev) {
+        return ev.button === exports.KritzelMouseButton.Right;
+    }
+    static isLeftClick(ev) {
+        return ev.button === exports.KritzelMouseButton.Left;
+    }
+    static isMainMouseWheel(event) {
+        return Math.abs(event.deltaY) > 0 && Math.abs(event.deltaX) === 0 && Number.isInteger(event.deltaY);
+    }
+    static isPointerEventOnContextMenu(event) {
+        const path = event.composedPath();
+        const contextMenu = path.find(element => element.classList && element.classList.contains('context-menu'));
+        return !!contextMenu;
+    }
+    static onLongTouchPress(event, onSuccess, onCancel) {
+        if (event.pointerType !== 'touch') {
+            onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+            return () => { };
+        }
+        const longPressTimeout = 400;
+        const moveThreshold = 10;
+        const startX = event.clientX;
+        const startY = event.clientY;
+        const target = event.target;
+        const timer = setTimeout(() => {
+            removeListeners();
+            onSuccess(event);
+        }, longPressTimeout);
+        const cancel = () => {
+            clearTimeout(timer);
+            removeListeners();
+            onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+        };
+        const onPointerMove = (e) => {
+            if (Math.abs(e.clientX - startX) > moveThreshold || Math.abs(e.clientY - startY) > moveThreshold) {
+                cancel();
+            }
+        };
+        const onPointerUp = () => {
+            cancel();
+        };
+        const onPointerCancel = () => {
+            cancel();
+        };
+        const removeListeners = () => {
+            target.removeEventListener('pointermove', onPointerMove);
+            target.removeEventListener('pointerup', onPointerUp);
+            target.removeEventListener('pointercancel', onPointerCancel);
+        };
+        target.addEventListener('pointermove', onPointerMove, { passive: true });
+        target.addEventListener('pointerup', onPointerUp, { once: true });
+        target.addEventListener('pointercancel', onPointerCancel, { once: true });
+        return cancel;
+    }
+}
+
+class KritzelKeyboardHelper {
+    static forceHideKeyboard() {
+        if (document.activeElement instanceof HTMLElement) {
+            document.activeElement.blur();
+        }
+    }
+    static enableInteractiveWidget() {
+        const meta = document.querySelector('meta[name="viewport"][content*="interactive-widget=resizes-content"]');
+        if (meta) {
+            let currentContent = meta.getAttribute('content');
+            if (!currentContent.includes('interactive-widget=resizes-content')) {
+                currentContent += ', interactive-widget=resizes-content';
+            }
+            meta.setAttribute('content', currentContent);
+        }
+    }
+    static disableInteractiveWidget() {
+        const meta = document.querySelector('meta[name="viewport"][content*="interactive-widget=resizes-content"]');
+        if (meta) {
+            let currentContent = meta.getAttribute('content');
+            let newContent = currentContent.replace(/\s*interactive-widget=resizes-content\s*[,;]?/g, '');
+            newContent = newContent
+                .replace(/,(\s*,)+/g, ',')
+                .replace(/^,/, '')
+                .replace(/,$/, '')
+                .trim();
+            meta.setAttribute('content', newContent);
+        }
+    }
+}
+
+class KritzelTextTool extends KritzelBaseTool {
+    constructor(store) {
+        super(store);
+        this.fontFamily = 'Arial';
+        this.fontSize = 16;
+        this.fontColor = '#000000';
+        this.palette = [
+            '#000000',
+            '#FFFFFF',
+            '#FF0000',
+            '#00FF00',
+            '#0000FF',
+            '#FFFF00',
+            '#FF00FF',
+            '#00FFFF',
+            '#808080',
+            '#C0C0C0',
+            '#800000',
+            '#008000',
+            '#000080',
+            '#808000',
+            '#800080',
+        ];
+    }
+    handlePointerDown(event) {
+        if (event.cancelable) {
+            event.preventDefault();
+        }
+        if (event.pointerType === 'mouse') {
+            const path = event.composedPath().slice(1);
+            const objectElement = path.find(element => element.classList && element.classList.contains('object'));
+            const object = this._store.findObjectById(objectElement === null || objectElement === void 0 ? void 0 : objectElement.id);
+            if (this._store.state.activeText === null && object && object instanceof KritzelText) {
+                this._store.state.activeText = object;
+                object.focus();
+                return;
+            }
+            if (this._store.state.activeText !== null && object instanceof KritzelText) {
+                object.focus();
+                return;
+            }
+            if (this._store.state.activeText !== null) {
+                this._store.resetActiveText();
+                this._store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
+                return;
+            }
+            if (KritzelEventHelper.isLeftClick(event) === false) {
+                return;
+            }
+            const clientX = event.clientX - this._store.offsetX;
+            const clientY = event.clientY - this._store.offsetY;
+            const text = KritzelText.create(this._store, this.fontSize, this.fontFamily);
+            text.fontColor = this.fontColor;
+            text.translateX = (clientX - this._store.state.translateX) / this._store.state.scale;
+            text.translateY = (clientY - this._store.state.translateY) / this._store.state.scale;
+            text.zIndex = this._store.currentZIndex;
+            this._store.state.activeText = text;
+            this._store.history.executeCommand(new AddObjectCommand(this._store, this, text));
+        }
+        if (event.pointerType === 'touch') {
+            const activePointers = Array.from(this._store.state.pointers.values());
+            const path = event.composedPath().slice(1);
+            const objectElement = path.find(element => element.classList && element.classList.contains('object'));
+            const object = this._store.findObjectById(objectElement === null || objectElement === void 0 ? void 0 : objectElement.id);
+            if (this._store.state.activeText === null && object && object instanceof KritzelText) {
+                this._store.state.activeText = object;
+                object.focus();
+                return;
+            }
+            if (this._store.state.activeText !== null && object instanceof KritzelText) {
+                object.focus();
+                return;
+            }
+            if (this._store.state.activeText !== null) {
+                this._store.resetActiveText();
+                this._store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
+                return;
+            }
+            if (activePointers.length > 1) {
+                return;
+            }
+            KritzelKeyboardHelper.disableInteractiveWidget();
+            const clientX = Math.round(activePointers[0].clientX - this._store.offsetX);
+            const clientY = Math.round(activePointers[0].clientY - this._store.offsetY);
+            const text = KritzelText.create(this._store, this.fontSize, this.fontFamily);
+            text.fontColor = this.fontColor;
+            text.translateX = (clientX - this._store.state.translateX) / this._store.state.scale;
+            text.translateY = (clientY - this._store.state.translateY) / this._store.state.scale;
+            text.zIndex = this._store.currentZIndex;
+            this._store.state.activeText = text;
+            this._store.history.executeCommand(new AddObjectCommand(this._store, this, text));
+        }
+    }
+    handlePointerUp(event) {
+        var _a, _b, _c, _d;
+        if (event.cancelable) {
+            event.preventDefault();
+        }
+        if (event.pointerType === 'mouse') {
+            (_a = this._store.state.activeText) === null || _a === void 0 ? void 0 : _a.adjustTextareaSize();
+            (_b = this._store.state.activeText) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+        if (event.pointerType === 'touch') {
+            (_c = this._store.state.activeText) === null || _c === void 0 ? void 0 : _c.adjustTextareaSize();
+            (_d = this._store.state.activeText) === null || _d === void 0 ? void 0 : _d.focus();
+            KritzelKeyboardHelper.enableInteractiveWidget();
+        }
+    }
+}
+
+var __rest = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+class ObjectHelper {
+    static generateUUID() {
+        return Math.random().toString(36).substr(2, 9);
+    }
+    static clone(objOrObjs) {
+        const cloneObject = (obj) => {
+            const remainingProps = __rest(obj, ["_store", "_elementRef", "totalWidth", "totalHeight"]);
+            return structuredClone(remainingProps);
+        };
+        if (Array.isArray(objOrObjs)) {
+            return objOrObjs.map(cloneObject);
+        }
+        return cloneObject(objOrObjs);
+    }
+    static isEmpty(obj) {
+        if (obj === null || obj === undefined) {
+            return true;
+        }
+        return (Object === null || Object === void 0 ? void 0 : Object.keys(obj).length) === 0 && (obj === null || obj === void 0 ? void 0 : obj.constructor) === Object;
+    }
+}
+
+class KritzelBaseObject {
+    get totalWidth() {
+        return this.width + this.padding * 2;
+    }
+    get totalHeight() {
+        return this.height + this.padding * 2;
+    }
+    set elementRef(element) {
+        this._elementRef = element;
+    }
+    get elementRef() {
+        return this._elementRef;
+    }
+    get boundingBox() {
+        return {
+            x: this.translateX,
+            y: this.translateY,
+            z: this.scale,
+            width: this.totalWidth / this.scale,
+            height: this.totalHeight / this.scale,
+            depth: 0,
+        };
+    }
+    get rotatedBoundingBox() {
+        return {
+            x: this.minXRotated,
+            y: this.minYRotated,
+            z: this.scale,
+            width: this.maxXRotated - this.minXRotated,
+            height: this.maxYRotated - this.minYRotated,
+            depth: 0,
+        };
+    }
+    get rotatedPolygon() {
+        const cx = (this.translateX + this.totalWidth / 2 / this.scale);
+        const cy = (this.translateY + this.totalHeight / 2 / this.scale);
+        const angle = this.rotation;
+        const adjustedWidth = this.totalWidth / this.scale;
+        const adjustedHeight = this.totalHeight / this.scale;
+        const corners = {
+            topLeft: { x: this.translateX, y: this.translateY },
+            topRight: { x: this.translateX + adjustedWidth, y: this.translateY },
+            bottomRight: { x: this.translateX + adjustedWidth, y: this.translateY + adjustedHeight },
+            bottomLeft: { x: this.translateX, y: this.translateY + adjustedHeight },
+        };
+        const rotatedCorners = Object.keys(corners).reduce((acc, key) => {
+            const corner = corners[key];
+            const rotatedX = Math.cos(angle) * (corner.x - cx) - Math.sin(angle) * (corner.y - cy) + cx;
+            const rotatedY = Math.sin(angle) * (corner.x - cx) + Math.cos(angle) * (corner.y - cy) + cy;
+            acc[key] = { x: rotatedX, y: rotatedY };
+            return acc;
+        }, {});
+        return rotatedCorners;
+    }
+    get minXRotated() {
+        const corners = [
+            this.rotatedPolygon.topLeft.x,
+            this.rotatedPolygon.topRight.x,
+            this.rotatedPolygon.bottomRight.x,
+            this.rotatedPolygon.bottomLeft.x,
+        ];
+        return Math.min(...corners);
+    }
+    get minYRotated() {
+        const corners = [
+            this.rotatedPolygon.topLeft.y,
+            this.rotatedPolygon.topRight.y,
+            this.rotatedPolygon.bottomRight.y,
+            this.rotatedPolygon.bottomLeft.y,
+        ];
+        return Math.min(...corners);
+    }
+    get maxXRotated() {
+        const corners = [
+            this.rotatedPolygon.topLeft.x,
+            this.rotatedPolygon.topRight.x,
+            this.rotatedPolygon.bottomRight.x,
+            this.rotatedPolygon.bottomLeft.x,
+        ];
+        return Math.max(...corners);
+    }
+    get maxYRotated() {
+        const corners = [
+            this.rotatedPolygon.topLeft.y,
+            this.rotatedPolygon.topRight.y,
+            this.rotatedPolygon.bottomRight.y,
+            this.rotatedPolygon.bottomLeft.y,
+        ];
+        return Math.max(...corners);
+    }
+    get transformationMatrix() {
+        const scale = 1 / this.scale;
+        const translateX = this.translateX;
+        const translateY = this.translateY;
+        return `matrix(${scale}, 0, 0, ${scale}, ${translateX}, ${translateY})`;
+    }
+    get rotationDegrees() {
+        return this.rotation * (180 / Math.PI);
+    }
+    get centerX() {
+        return this.translateX + this.totalWidth / 2;
+    }
+    get centerY() {
+        return this.translateY + this.totalHeight / 2;
+    }
+    constructor() {
+        this.__class__ = 'KritzelBaseObject';
+        this.visible = true;
+        this.borderWidth = 0;
+        this.opacity = 1;
+        this.padding = 0;
+        this.selected = false;
+        this.resizing = false;
+        this.rotation = 0;
+        this.markedForRemoval = false;
+        this.isMounted = false;
+        this.zIndex = 0;
+        this.debugInfoVisible = false;
+        this.id = this.generateId();
+    }
+    static create(store) {
+        const object = new KritzelBaseObject();
+        object._store = store;
+        object.zIndex = store.currentZIndex;
+        return object;
+    }
+    mount(element) {
+        if (this.isMounted) {
+            return;
+        }
+        this.elementRef = element;
+        this.isMounted = true;
+    }
+    generateId() {
+        return ObjectHelper.generateUUID();
+    }
+    isInViewport() {
+        const viewportBounds = {
+            x: -this._store.state.translateX / this._store.state.scale,
+            y: -this._store.state.translateY / this._store.state.scale,
+            width: this._store.state.viewportWidth / this._store.state.scale,
+            height: this._store.state.viewportHeight / this._store.state.scale};
+        return this.boundingBox.x < viewportBounds.x + viewportBounds.width &&
+            this.boundingBox.x + this.boundingBox.width > viewportBounds.x &&
+            this.boundingBox.y < viewportBounds.y + viewportBounds.height &&
+            this.boundingBox.y + this.boundingBox.height > viewportBounds.y;
+    }
+    centerInViewport() {
+        const scale = this._store.state.scale;
+        this.translateX = (this._store.state.viewportWidth / 2 - this.totalWidth / 2 - this._store.state.translateX) / scale;
+        this.translateY = (this._store.state.viewportHeight / 2 - this.totalHeight / 2 - this._store.state.translateY) / scale;
+    }
+    move(startX, startY, endX, endY) {
+        const deltaX = (startX - endX) / this._store.state.scale;
+        const deltaY = (startY - endY) / this._store.state.scale;
+        this.translateX += deltaX;
+        this.translateY += deltaY;
+    }
+    resize(x, y, width, height) {
+        if (width <= 1 || height <= 1) {
+            return;
+        }
+        this.width = width;
+        this.height = height;
+        this.translateX = x;
+        this.translateY = y;
+    }
+    rotate(value) {
+        this.rotation = value;
+    }
+    copy() {
+        const copiedObject = Object.create(Object.getPrototypeOf(this));
+        Object.assign(copiedObject, this);
+        copiedObject.id = this.generateId();
+        copiedObject.isMounted = false;
+        return copiedObject;
+    }
+    onSelectedClick() {
+        // This method can be overridden by subclasses to handle click events when the object is selected.
+    }
+    revive(object) {
+        Object.assign(this, object);
+        return this;
+    }
+}
+
+class KritzelText extends KritzelBaseObject {
+    get isReadonly() {
+        return !(this._store.state.activeTool instanceof KritzelTextTool);
+    }
+    constructor(config) {
+        super();
+        this.__class__ = 'KritzelText';
+        this.value = '';
+        this.fontFamily = 'Arial';
+        this.fontSize = 8;
+        this.fontColor = '#000000';
+        this.initialWidth = 3;
+        this.isNew = true;
+        this.debugInfoVisible = true;
+        this.rows = 1;
+        if (config) {
+            this.value = config.value || ' ';
+            this.translateX = config.translateX || 0;
+            this.translateY = config.translateY || 0;
+            this.fontSize = config.fontSize || 8;
+            this.fontFamily = config.fontFamily || 'Arial';
+            this.fontColor = config.fontColor || '#000000';
+            this.height = config.height || this.fontSize * 1.2;
+            this.width = config.width || 0;
+            this.scale = config.scale || 1;
+        }
+    }
+    static create(store, fontSize, fontFamily) {
+        const object = new KritzelText();
+        object._store = store;
+        object.fontSize = fontSize;
+        object.fontFamily = fontFamily;
+        object.translateX = 0;
+        object.translateY = 0;
+        object.width = object.initialWidth / (object._store.state.scale < 0 ? object._store.state.scale : 1);
+        object.height = (object.fontSize * 1.2) / (object._store.state.scale < 0 ? object._store.state.scale : 1);
+        object.padding = 5;
+        object.backgroundColor = 'transparent';
+        object.scale = object._store.state.scale;
+        object.value = ' ';
+        object.zIndex = store.currentZIndex;
+        return object;
+    }
+    mount(element) {
+        if ((this.isMounted && this.elementRef === element) || this.isInViewport() === false) {
+            return;
+        }
+        this.elementRef = element;
+        this.isMounted = true;
+    }
+    resize(x, y, width, height) {
+        if (width <= 1 || height <= 1) {
+            return;
+        }
+        const scaleFactor = height / this.height;
+        this.fontSize = this.fontSize * scaleFactor;
+        this.width = this.width * scaleFactor;
+        this.height = height;
+        this.translateX = x;
+        this.translateY = y;
+    }
+    handleKeyDown(event) {
+        if (this.isReadonly) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    }
+    handleInput(event) {
+        const target = event.target;
+        if (target.value === '') {
+            this.value = ' ';
+            target.value = ' ';
+            target.selectionStart = target.selectionEnd = target.value.length;
+        }
+        else {
+            this.value = target.value.trim();
+        }
+        this.adjustTextareaSize();
+    }
+    adjustTextareaSize() {
+        if (this.elementRef) {
+            const span = document.createElement('span');
+            span.style.position = 'absolute';
+            span.style.whiteSpace = 'pre-wrap';
+            span.style.visibility = 'hidden';
+            span.style.fontSize = window.getComputedStyle(this.elementRef).fontSize;
+            span.style.fontFamily = window.getComputedStyle(this.elementRef).fontFamily;
+            span.innerHTML = this.elementRef.value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br>') + '<br>';
+            document.body.appendChild(span);
+            const textWidth = span.offsetWidth;
+            const textHeight = span.offsetHeight;
+            document.body.removeChild(span);
+            this.width = textWidth;
+            this.height = textHeight;
+            this._store.rerender();
+        }
+    }
+    focus() {
+        if (this.elementRef) {
+            this.elementRef.focus();
+        }
+    }
+    selectAll() {
+        if (this.elementRef) {
+            this.elementRef.select();
+        }
+    }
+    insertFromClipboard() {
+        if (this.elementRef) {
+            this.elementRef.focus();
+            try {
+                navigator.clipboard.readText().then(text => {
+                    const start = this.elementRef.selectionStart;
+                    const end = this.elementRef.selectionEnd;
+                    const value = this.elementRef.value;
+                    this.elementRef.value = value.substring(0, start) + text + value.substring(end);
+                    this.elementRef.selectionStart = this.elementRef.selectionEnd = start + text.length;
+                    this.value = this.elementRef.value;
+                    this.adjustTextareaSize();
+                });
+            }
+            catch (err) {
+                console.error('Failed to read clipboard contents:', err);
+            }
+        }
+    }
+    onSelectedClick() {
+        this._store.setState('activeTool', KritzelToolRegistry.getTool('text'));
+        this._store.state.selectionGroup = null;
+        this._store.state.selectionBox = null;
+        this._store.state.activeText = this;
+        setTimeout(() => {
+            this.focus();
+        }, 300);
+    }
+}
+
+exports.AddObjectCommand = AddObjectCommand;
+exports.KritzelBaseCommand = KritzelBaseCommand;
+exports.KritzelBaseObject = KritzelBaseObject;
+exports.KritzelBaseTool = KritzelBaseTool;
+exports.KritzelEventHelper = KritzelEventHelper;
+exports.KritzelKeyboardHelper = KritzelKeyboardHelper;
+exports.KritzelText = KritzelText;
+exports.KritzelTextTool = KritzelTextTool;
+exports.KritzelToolRegistry = KritzelToolRegistry;
+exports.ObjectHelper = ObjectHelper;
+//# sourceMappingURL=index-C2M4eyxF.js.map
+
+//# sourceMappingURL=index-C2M4eyxF.js.map