kritzel-stencil 0.0.113 → 0.0.115

package/dist/esm/kritzel-brush-style_18.entry.js

@@ -1,4 +1,5 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-BOJOOWaP.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-CGHvfMWF.js';
+import { K as KritzelBaseObject, a as KritzelBaseTool, b as KritzelEventHelper, A as AddObjectCommand, c as KritzelTextTool, d as KritzelMouseButton, e as KritzelBaseCommand, f as KritzelText, O as ObjectHelper, g as KritzelToolRegistry, h as KritzelKeyboardHelper } from './index-rckCSz7Y.js';
 
 const kritzelBrushStyleCss = ":host{display:flex;align-items:flex-start;gap:8px;padding:8px;box-sizing:border-box;width:100%}.brush-style-button{display:flex;justify-content:center;align-items:center;width:42px;height:32px;padding:0;border:none;outline:none;background:none;cursor:default;border-radius:0;color:var(--control-text-color);font-weight:bold;-webkit-tap-highlight-color:transparent}.font-style-button:not(:last-child){border-right:1px solid #333333}.font-style-button:hover{background-color:var(--control-hover-bg)}.font-style-button:active{background-color:var(--control-active-bg)}.font-style-button.selected,.font-style-button.selected:hover,.font-style-button.selected:active{background-color:var(--control-selected-bg);color:var(--control-selected-color)}";
 
@@ -223,98 +224,6 @@ const KritzelControlTextConfig = class {
 };
 KritzelControlTextConfig.style = kritzelControlTextConfigCss;
 
-var KritzelMouseButton;
-(function (KritzelMouseButton) {
-    KritzelMouseButton[KritzelMouseButton["Left"] = 0] = "Left";
-    KritzelMouseButton[KritzelMouseButton["Middle"] = 1] = "Middle";
-    KritzelMouseButton[KritzelMouseButton["Right"] = 2] = "Right";
-})(KritzelMouseButton || (KritzelMouseButton = {}));
-
-class KritzelEventHelper {
-    static isRightClick(ev) {
-        return ev.button === KritzelMouseButton.Right;
-    }
-    static isLeftClick(ev) {
-        return ev.button === 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 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);
-    }
-}
-
 var cjs = {};
 
 var hasRequiredCjs;
@@ -336,225 +245,6 @@ class KritzelMathHelper {
     }
 }
 
-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 KritzelPath extends KritzelBaseObject {
     constructor() {
         super(...arguments);
@@ -673,36 +363,6 @@ class KritzelPath extends KritzelBaseObject {
     }
 }
 
-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 KritzelBrushTool extends KritzelBaseTool {
     constructor(store) {
         super(store);
@@ -815,302 +475,6 @@ class KritzelBrushTool extends KritzelBaseTool {
     }
 }
 
-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 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);
-    }
-}
-
-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();
-        }
-    }
-}
-
 class KritzelDevicesHelper {
     static isTouchDevice() {
         return window.matchMedia('(any-pointer: coarse)').matches;
@@ -2924,6 +2288,27 @@ const KritzelEditor = class {
         this.customSvgIcons = {};
         this.hideControls = false;
     }
+    async getObjectById(id) {
+        return this.engineRef.getObjectById(id);
+    }
+    async addObject(object) {
+        return this.engineRef.addObject(object);
+    }
+    async updateObject(object, updatedProperties) {
+        return this.engineRef.updateObject(object, updatedProperties);
+    }
+    async removeObject(object) {
+        return this.engineRef.removeObject(object);
+    }
+    async selectObjects(objects) {
+        return this.engineRef.selectObjects(objects);
+    }
+    async selectAllObjectsInViewport() {
+        return this.engineRef.selectAllObjectsInViewport();
+    }
+    async clearSelection() {
+        this.engineRef.clearSelection();
+    }
     handleTouchStart(event) {
         if (event.cancelable) {
             event.preventDefault();
@@ -2945,7 +2330,7 @@ const KritzelEditor = class {
         }
     }
     render() {
-        return (h(Host, { key: '009fe43f85f368b2f60b31947596e1423f60e28d' }, h("kritzel-engine", { key: '76fa90e8c283723d546d02ab4eacc111047d6b9d', ref: el => (this.engineRef = el) }), h("kritzel-controls", { key: 'a7381534ab01236d12135f7a9f1a486c9b4be05a', ref: el => (this.controlsRef = el), controls: this.controls, style: this.hideControls ? { display: 'none' } : { display: 'flex' } })));
+        return (h(Host, { key: '5192399124222f7bd8a8d66054e6053befdebdfb' }, h("kritzel-engine", { key: '5fe3019675f579dfd14bb0072422de1e97f4fe18', ref: el => (this.engineRef = el) }), h("kritzel-controls", { key: '99f382d75380d770a634cbdbe873c29bf95a7b08', ref: el => (this.controlsRef = el), controls: this.controls, style: this.hideControls ? { display: 'none' } : { display: 'flex' } })));
     }
     get host() { return getElement(this); }
 };
@@ -3536,9 +2921,10 @@ class KritzelStore {
         this.state.copiedObjects = this.state.selectionGroup.copy();
         this.setState('activeTool', KritzelToolRegistry.getTool('selection'));
     }
-    moveUp() {
+    bringForward(object) {
         const max = this.allObjects.length + 1;
-        const increaseZIndexCommands = this.state.selectionGroup.objects.map(obj => {
+        const objects = object ? [object] : this.state.selectionGroup.objects;
+        const increaseZIndexCommands = objects.map(obj => {
             if (obj.zIndex === max) {
                 return;
             }
@@ -3546,9 +2932,10 @@ class KritzelStore {
         });
         this.history.executeCommand(new BatchCommand(this, this, increaseZIndexCommands));
     }
-    moveDown() {
+    sendBackward(object) {
         const min = 0;
-        const decreaseZIndexCommands = this.state.selectionGroup.objects.map(obj => {
+        const objects = object ? [object] : this.state.selectionGroup.objects;
+        const decreaseZIndexCommands = objects.map(obj => {
             if (obj.zIndex === min) {
                 return;
             }
@@ -3556,16 +2943,18 @@ class KritzelStore {
         });
         this.history.executeCommand(new BatchCommand(this, this, decreaseZIndexCommands));
     }
-    moveToTop() {
+    bringToFront(object) {
         const max = this.allObjects.length + 1;
-        const increaseZIndexCommands = this.state.selectionGroup.objects.map(obj => {
+        const objects = object ? [object] : this.state.selectionGroup.objects;
+        const increaseZIndexCommands = objects.map(obj => {
             return new UpdateObjectCommand(this, this, obj, { zIndex: max });
         });
         this.history.executeCommand(new BatchCommand(this, this, increaseZIndexCommands));
     }
-    moveToBottom() {
+    sendToBack(object) {
         const min = -1;
-        const decreaseZIndexCommands = this.state.selectionGroup.objects.map(obj => {
+        const objects = object ? [object] : this.state.selectionGroup.objects;
+        const decreaseZIndexCommands = objects.map(obj => {
             return new UpdateObjectCommand(this, this, obj, { zIndex: min });
         });
         this.history.executeCommand(new BatchCommand(this, this, decreaseZIndexCommands));
@@ -3710,16 +3099,16 @@ class KritzelKeyHandler extends KritzelBaseHandler {
             this._store.paste();
         }
         if (event.key === '+' && event.ctrlKey && this._store.state.selectionGroup) {
-            this._store.moveUp();
+            this._store.bringForward();
         }
         if (event.key === '-' && event.ctrlKey && this._store.state.selectionGroup) {
-            this._store.moveDown();
+            this._store.sendBackward();
         }
         if (event.key === '*' && event.shiftKey && this._store.state.selectionGroup) {
-            this._store.moveToTop();
+            this._store.bringToFront();
         }
         if (event.key === '_' && event.shiftKey && this._store.state.selectionGroup) {
-            this._store.moveToBottom();
+            this._store.sendToBack();
         }
         if (event.key === 'a' && event.ctrlKey && this._store.state.activeText) {
             this._store.state.activeText.selectAll();
@@ -3974,11 +3363,17 @@ const KritzelEngine = class {
     async paste(x, y) {
         this.store.paste(x, y);
     }
-    async moveToTop() {
-        this.store.moveToTop();
+    async bringForward(object) {
+        this.store.bringForward(object);
+    }
+    async sendBackward(object) {
+        this.store.sendBackward(object);
+    }
+    async moveToTop(object) {
+        this.store.bringToFront(object);
     }
-    async moveToBottom() {
-        this.store.moveToBottom();
+    async moveToBottom(object) {
+        this.store.sendToBack(object);
     }
     async undo() {
         this.store.history.undo();
@@ -4040,15 +3435,15 @@ const KritzelEngine = class {
         const baseHandleSizePx = computedStyle.getPropertyValue('--kritzel-selection-handle-size').trim() || '6px';
         const baseHandleSize = parseFloat(baseHandleSizePx);
         const baseHandleTouchSize = baseHandleSize * 2 < 14 ? 14 : baseHandleSize;
-        return (h(Host, { key: '632d8633bd27520dedda2e6eb84862d280fa6714' }, h("div", { key: 'fda3cdc033d97e1f17ae8fcede94933ae73458b3', class: "debug-panel", style: { display: this.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, h("div", { key: '823aac3e9b58615e7c499163bd9101675a62ff70' }, "TranslateX: ", (_a = this.store.state) === null || _a === void 0 ? void 0 :
-            _a.translateX), h("div", { key: '5d138212f0fefcaea7dc839f6d5f3e9c68c19681' }, "TranslateY: ", (_b = this.store.state) === null || _b === void 0 ? void 0 :
-            _b.translateY), h("div", { key: '8342eabd22ba71b58fe8346a182904cf5f4ccbb9' }, "ViewportWidth: ", (_c = this.store.state) === null || _c === void 0 ? void 0 :
-            _c.viewportWidth), h("div", { key: '325546fc07c2cfec7808e661d82f21db06d53aea' }, "ViewportHeight: ", (_d = this.store.state) === null || _d === void 0 ? void 0 :
-            _d.viewportHeight), h("div", { key: '2b1826604f561c58ad573d5545a0913498345b1f' }, "ObjectsInViewport. ", this.store.objects.length), h("div", { key: '749b56a6bfd63c838c89c55595bedd6749ee89ad' }, "Scale: ", (_e = this.store.state) === null || _e === void 0 ? void 0 :
-            _e.scale), h("div", { key: '0ee63c810198cb583c4e419f14503f5fb8d71d32' }, "ActiveTool: ", (_g = (_f = this.store.state) === null || _f === void 0 ? void 0 : _f.activeTool) === null || _g === void 0 ? void 0 :
-            _g.name), h("div", { key: '5facf47db6f093db24b12fa4b4453d20af1b1f57' }, "HasViewportChanged: ", ((_h = this.store.state) === null || _h === void 0 ? void 0 : _h.hasViewportChanged) ? 'true' : 'false'), h("div", { key: '948069683ac1568257dab4dbd5d1b3e9926ac501' }, "IsEnabled: ", ((_j = this.store.state) === null || _j === void 0 ? void 0 : _j.isEnabled) ? 'true' : 'false'), h("div", { key: 'a3e5bf4522b9d515bc7d346dbc9803af12eb60f5' }, "IsScaling: ", ((_k = this.store.state) === null || _k === void 0 ? void 0 : _k.isScaling) ? 'true' : 'false'), h("div", { key: 'ce8fc21cd938e7a58fef489b086b5111b1612353' }, "IsPanning: ", ((_l = this.store.state) === null || _l === void 0 ? void 0 : _l.isPanning) ? 'true' : 'false'), h("div", { key: '5725282e17bbe0766ebe010377070df81c1542d2' }, "IsFocused: ", this.store.state.isFocused ? 'true' : 'false'), h("div", { key: '8805bbfac86078d2a0541d60a53a3c6a9585a1db' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: '1801d4d8297e36f4c14022c411ce5a1889042398' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: 'd269982265e35a511eeb892969b3e47eb21b023f' }, "IsResizeHandleSelected: ", this.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: '1362e4c3d93a8452705e5fb1a1ba6a0ffdb3c557' }, "IsRotationHandleSelected: ", this.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: '2181e07738e56e10c57c4d6a06acdd667a14da83' }, "IsDrawing: ", this.store.state.isDrawing ? 'true' : 'false'), h("div", { key: '57b96821b4fb1cbc97ec7083fc523c0bdba7539b' }, "IsWriting: ", this.store.state.isWriting ? 'true' : 'false'), h("div", { key: 'c7302e6ce4635e04aa92a24878dd3cbce8724228' }, "CursorX: ", (_m = this.store.state) === null || _m === void 0 ? void 0 :
-            _m.cursorX), h("div", { key: '93b01e5d147ca445e6645749043bb7fb46852f39' }, "CursorY: ", (_o = this.store.state) === null || _o === void 0 ? void 0 :
-            _o.cursorY)), h("div", { key: '7b535830bbd75ca61e09d6984120e17168911d7d', class: "origin", style: {
+        return (h(Host, { key: '46b1c0d4000229b7881636625af38db319ff49ae' }, h("div", { key: '7b91f710711ff1fefd395c38f79004c84a3df74d', class: "debug-panel", style: { display: this.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, h("div", { key: '63568d0cceef92262bbf40f54f84d5003302f7c1' }, "TranslateX: ", (_a = this.store.state) === null || _a === void 0 ? void 0 :
+            _a.translateX), h("div", { key: 'cd7a9f6bf33d547b23814468c1d2ae726f5d5576' }, "TranslateY: ", (_b = this.store.state) === null || _b === void 0 ? void 0 :
+            _b.translateY), h("div", { key: '42788d635e64f1e1f1da2f6b0ec8cf0fec988769' }, "ViewportWidth: ", (_c = this.store.state) === null || _c === void 0 ? void 0 :
+            _c.viewportWidth), h("div", { key: 'bd674b2a6b13b22ad177d2bc0527a6b2d41d523f' }, "ViewportHeight: ", (_d = this.store.state) === null || _d === void 0 ? void 0 :
+            _d.viewportHeight), h("div", { key: 'faa9581a80b8020ebe4f48cfbea4b0a91a17b1d0' }, "ObjectsInViewport. ", this.store.objects.length), h("div", { key: '74e9671f7f546debca0884e74e7b5cdbba0810de' }, "Scale: ", (_e = this.store.state) === null || _e === void 0 ? void 0 :
+            _e.scale), h("div", { key: '7f14af283874e226cfdcdf5bf17c0c4f6935f154' }, "ActiveTool: ", (_g = (_f = this.store.state) === null || _f === void 0 ? void 0 : _f.activeTool) === null || _g === void 0 ? void 0 :
+            _g.name), h("div", { key: '5d9bb07762326387a04d99d9d1f0487c809a8d13' }, "HasViewportChanged: ", ((_h = this.store.state) === null || _h === void 0 ? void 0 : _h.hasViewportChanged) ? 'true' : 'false'), h("div", { key: '65b54f060f162e328d8756845a991b84cd377fa8' }, "IsEnabled: ", ((_j = this.store.state) === null || _j === void 0 ? void 0 : _j.isEnabled) ? 'true' : 'false'), h("div", { key: '0593106ef382e3a4b4368f503d435550ee52b686' }, "IsScaling: ", ((_k = this.store.state) === null || _k === void 0 ? void 0 : _k.isScaling) ? 'true' : 'false'), h("div", { key: '2d9102c016bbc89bd3f61b46c364663d822ae773' }, "IsPanning: ", ((_l = this.store.state) === null || _l === void 0 ? void 0 : _l.isPanning) ? 'true' : 'false'), h("div", { key: '5393b7974bf7e8c391ec67945610b0051d155393' }, "IsFocused: ", this.store.state.isFocused ? 'true' : 'false'), h("div", { key: '3591db55fdf4b92162f4d516d307b9f42a6f996a' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: '2fef15767414c841b320705638328f45ab6e01b7' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: '20cf1b12790c3f7112484de2343ed157536f072f' }, "IsResizeHandleSelected: ", this.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: 'b23da45c9f13deb827f837651ab4e09cdb435aa9' }, "IsRotationHandleSelected: ", this.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: '6c3d8cf2aeacf3c9e7930eca83676bfa59f3d2cb' }, "IsDrawing: ", this.store.state.isDrawing ? 'true' : 'false'), h("div", { key: 'c87abe35d1aa55d11d321cec3d78f6722a04d114' }, "IsWriting: ", this.store.state.isWriting ? 'true' : 'false'), h("div", { key: '3d371da3b1075c5b116ae0db50ae5b8d22e6c2eb' }, "CursorX: ", (_m = this.store.state) === null || _m === void 0 ? void 0 :
+            _m.cursorX), h("div", { key: '1a426883cfbfd742aa127d7fff92080586f4af62' }, "CursorY: ", (_o = this.store.state) === null || _o === void 0 ? void 0 :
+            _o.cursorY)), h("div", { key: '5de09bb5222a271a3163d7226e012cb86c722a7e', class: "origin", style: {
                 transform: `matrix(${(_p = this.store.state) === null || _p === void 0 ? void 0 : _p.scale}, 0, 0, ${(_q = this.store.state) === null || _q === void 0 ? void 0 : _q.scale}, ${(_r = this.store.state) === null || _r === void 0 ? void 0 : _r.translateX}, ${(_s = this.store.state) === null || _s === void 0 ? void 0 : _s.translateY})`,
             } }, (_t = this.store.objects) === null || _t === void 0 ? void 0 :
             _t.map(object => {
@@ -4145,7 +3540,7 @@ const KritzelEngine = class {
                         fill: 'transparent',
                         cursor: 'grab',
                     }, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), h("g", { style: { display: this.store.state.debugInfo.showObjectInfo ? 'block' : 'none', pointerEvents: 'none' } }, h("foreignObject", { x: object.totalWidth.toString(), y: "0", width: "400px", height: "160px", style: { minHeight: '0', minWidth: '0', display: object.debugInfoVisible ? 'block' : 'none' } }, h("div", { style: { width: '100%', height: '100%' } }, h("div", { style: { whiteSpace: 'nowrap' } }, "zIndex: ", object.zIndex), h("div", { style: { whiteSpace: 'nowrap' } }, "translateX: ", object.translateX), h("div", { style: { whiteSpace: 'nowrap' } }, "translateY: ", object.translateY), h("div", { style: { whiteSpace: 'nowrap' } }, "width: ", object.width), h("div", { style: { whiteSpace: 'nowrap' } }, "height: ", object.height), h("div", { style: { whiteSpace: 'nowrap' } }, "scale: ", object.scale), h("div", { style: { whiteSpace: 'nowrap' } }, "rotation: ", object.rotation)))))));
-            }), h("svg", { key: 'cce82d436a044879bfbb900a836978c392f232ae', class: "object", xmlns: "http://www.w3.org/2000/svg", style: {
+            }), h("svg", { key: '684971a4c93f5d8cdf52497d0f3f81dc21ece397', class: "object", xmlns: "http://www.w3.org/2000/svg", style: {
                 height: (_u = this.store.state.currentPath) === null || _u === void 0 ? void 0 : _u.height.toString(),
                 width: (_v = this.store.state.currentPath) === null || _v === void 0 ? void 0 : _v.width.toString(),
                 left: '0',
@@ -4155,12 +3550,12 @@ const KritzelEngine = class {
                 transform: (_x = this.store.state.currentPath) === null || _x === void 0 ? void 0 : _x.transformationMatrix,
                 transformOrigin: 'top left',
                 overflow: 'visible',
-            }, viewBox: (_y = this.store.state.currentPath) === null || _y === void 0 ? void 0 : _y.viewBox }, h("path", { key: '1c0366598a805faffc965824c30c05fe1f1e0f74', d: (_z = this.store.state.currentPath) === null || _z === void 0 ? void 0 : _z.d, fill: (_0 = this.store.state.currentPath) === null || _0 === void 0 ? void 0 : _0.fill, stroke: (_1 = this.store.state.currentPath) === null || _1 === void 0 ? void 0 : _1.stroke }))), this.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: '624855529efbe7a5de784e3e1ce2b82282fac63a', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.store.state.contextMenuItems, style: {
+            }, viewBox: (_y = this.store.state.currentPath) === null || _y === void 0 ? void 0 : _y.viewBox }, h("path", { key: 'e29e0b110612e569a8fada121d749f66ab5e2aae', d: (_z = this.store.state.currentPath) === null || _z === void 0 ? void 0 : _z.d, fill: (_0 = this.store.state.currentPath) === null || _0 === void 0 ? void 0 : _0.fill, stroke: (_1 = this.store.state.currentPath) === null || _1 === void 0 ? void 0 : _1.stroke }))), this.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: '81b88db00390e6ba768b7432e941a87ba56e54e5', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.store.state.contextMenuItems, style: {
                 position: 'fixed',
                 left: `${this.store.state.contextMenuX}px`,
                 top: `${this.store.state.contextMenuY}px`,
                 zIndex: '10000',
-            }, onActionSelected: event => this.handleContextMenuAction(event) })), ((_2 = this.store.state) === null || _2 === void 0 ? void 0 : _2.activeTool) instanceof KritzelEraserTool && !this.store.state.isScaling && h("kritzel-cursor-trail", { key: 'd09a4701c43b8acec4e9daa09b69f545eebe95b7', store: this.store })));
+            }, onActionSelected: event => this.handleContextMenuAction(event) })), ((_2 = this.store.state) === null || _2 === void 0 ? void 0 : _2.activeTool) instanceof KritzelEraserTool && !this.store.state.isScaling && h("kritzel-cursor-trail", { key: '700ef43b524157ef757973fc039b2d74e7920578', store: this.store })));
     }
     get host() { return getElement(this); }
 };