kritzel-stencil 0.0.126 → 0.0.128

package/dist/stencil/kritzel-engine.entry.js

@@ -1,1318 +0,0 @@
-import { r as registerInstance, a as createEvent, h, d as Host, e as getElement } from './index-Df69oUcb.js';
-import { K as KritzelMouseButton } from './event-button.enum-D8W6LE-c.js';
-import { d as KritzelEventHelper, e as KritzelBaseCommand, A as AddObjectCommand, f as KritzelToolRegistry, g as KritzelBaseTool, h as KritzelKeyboardHelper } from './brush-tool.class-D1U3x9_Y.js';
-import { d as KritzelSelectionGroup, e as KrtizelSelectionBox, R as RemoveSelectionGroupCommand, f as RemoveObjectCommand, B as BatchCommand, A as AddSelectionGroupCommand, g as KritzelBaseHandler, c as KritzelSelectionTool, a as KritzelEraserTool } from './image-tool.class-uKAmXFSl.js';
-import { K as KritzelContextMenu } from './kritzel-context-menu-DPHV6MRm.js';
-import { A as ABSOLUTE_SCALE_MAX, a as ABSOLUTE_SCALE_MIN } from './engine.constants-DsjjAmnl.js';
-
-class KritzelViewport {
-    constructor(store, host) {
-        this.initialTouchDistance = 0;
-        this.startX = 0;
-        this.startY = 0;
-        this._store = store;
-        this._store.state.host = host;
-        this._store.state.viewportWidth = host.clientWidth;
-        this._store.state.viewportHeight = host.clientHeight;
-        this._store.state.startX = 0;
-        this._store.state.startY = 0;
-        this._store.state.translateX = 0;
-        this._store.state.translateY = 0;
-    }
-    handleResize() {
-        this._store.state.viewportWidth = this._store.state.host.clientWidth;
-        this._store.state.viewportHeight = this._store.state.host.clientHeight;
-        this._store.state.hasViewportChanged = true;
-        this._store.rerender();
-    }
-    handlePointerDown(event) {
-        if (event.pointerType === 'mouse') {
-            const adjustedClientX = event.clientX - this._store.offsetX;
-            const adjustedClientY = event.clientY - this._store.offsetY;
-            if (event.button === KritzelMouseButton.Right) {
-                this._store.state.isPanning = true;
-                this._store.state.startX = adjustedClientX;
-                this._store.state.startY = adjustedClientY;
-            }
-        }
-        if (event.pointerType === 'touch') {
-            const activePointers = Array.from(this._store.state.pointers.values());
-            if (activePointers.length === 2) {
-                this._store.state.currentPath = null;
-                this._store.state.isScaling = true;
-                const firstTouchX = activePointers[0].clientX - this._store.offsetX;
-                const firstTouchY = activePointers[0].clientY - this._store.offsetY;
-                const secondTouchX = activePointers[1].clientX - this._store.offsetX;
-                const secondTouchY = activePointers[1].clientY - this._store.offsetY;
-                this.initialTouchDistance = Math.sqrt(Math.pow(firstTouchX - secondTouchX, 2) + Math.pow(firstTouchY - secondTouchY, 2));
-                this.startX = (firstTouchX + secondTouchX) / 2;
-                this.startY = (firstTouchY + secondTouchY) / 2;
-                this._store.rerender();
-            }
-        }
-    }
-    handlePointerMove(event) {
-        if (event.pointerType === 'mouse') {
-            const hostRect = this._store.state.host.getBoundingClientRect();
-            const xRelativeToHost = event.clientX - hostRect.left;
-            const yRelativeToHost = event.clientY - hostRect.top;
-            this._store.state.pointerX = (xRelativeToHost - this._store.state.translateX) / this._store.state.scale;
-            this._store.state.pointerY = (yRelativeToHost - this._store.state.translateY) / this._store.state.scale;
-            if (this._store.state.isPanning) {
-                this._store.state.translateX -= this._store.state.startX - xRelativeToHost;
-                this._store.state.translateY -= this._store.state.startY - yRelativeToHost;
-                this._store.state.startX = xRelativeToHost;
-                this._store.state.startY = yRelativeToHost;
-                this._store.state.hasViewportChanged = true;
-                this._store.state.skipContextMenu = true;
-                this._store.rerender();
-            }
-        }
-        if (event.pointerType === 'touch') {
-            const hostRect = this._store.state.host.getBoundingClientRect();
-            const xRelativeToHost = event.clientX - hostRect.left;
-            const yRelativeToHost = event.clientY - hostRect.top;
-            this._store.state.pointerX = (xRelativeToHost - this._store.state.translateX) / this._store.state.scale;
-            this._store.state.pointerY = (yRelativeToHost - this._store.state.translateY) / this._store.state.scale;
-            const activePointers = Array.from(this._store.state.pointers.values());
-            if (activePointers.length === 2) {
-                const firstTouchX = activePointers[0].clientX - this._store.offsetX;
-                const firstTouchY = activePointers[0].clientY - this._store.offsetY;
-                const secondTouchX = activePointers[1].clientX - this._store.offsetX;
-                const secondTouchY = activePointers[1].clientY - this._store.offsetY;
-                const currentTouchDistance = Math.sqrt(Math.pow(firstTouchX - secondTouchX, 2) + Math.pow(firstTouchY - secondTouchY, 2));
-                const midpointX = (firstTouchX + secondTouchX) / 2;
-                const midpointY = (firstTouchY + secondTouchY) / 2;
-                const scaleRatio = currentTouchDistance / this.initialTouchDistance;
-                const newScale = this._store.state.scale * scaleRatio;
-                if (newScale > this._store.state.scaleMax || newScale < this._store.state.scaleMin) {
-                    this._store.state.translateX += midpointX - this.startX;
-                    this._store.state.translateY += midpointY - this.startY;
-                }
-                else {
-                    const translateXAdjustment = (midpointX - this._store.state.translateX) * (scaleRatio - 1);
-                    const translateYAdjustment = (midpointY - this._store.state.translateY) * (scaleRatio - 1);
-                    this._store.state.translateX += midpointX - this.startX - translateXAdjustment;
-                    this._store.state.translateY += midpointY - this.startY - translateYAdjustment;
-                    this._store.state.scale = newScale;
-                    this.initialTouchDistance = currentTouchDistance;
-                }
-                this.startX = midpointX;
-                this.startY = midpointY;
-                this._store.state.hasViewportChanged = true;
-                this._store.rerender();
-            }
-        }
-    }
-    handlePointerUp(event) {
-        if (event.pointerType === 'mouse') {
-            if (this._store.state.isPanning) {
-                this._store.state.isPanning = false;
-                this._store.rerender();
-            }
-        }
-        if (event.pointerType === 'touch') {
-            this._store.state.isScaling = false;
-            this._store.rerender();
-        }
-    }
-    handleWheel(event) {
-        event.preventDefault();
-        if (event.ctrlKey === true && KritzelEventHelper.isMainMouseWheel(event)) {
-            this.handleZoom(event);
-        }
-        if (!event.ctrlKey) {
-            this.handlePan(event);
-        }
-    }
-    handleZoom(event) {
-        const rect = this._store.state.host.getBoundingClientRect();
-        const xRelativeToHost = event.clientX - rect.left;
-        const yRelativeToHost = event.clientY - rect.top;
-        this._store.state.pointerX = (xRelativeToHost - this._store.state.translateX) / this._store.state.scale;
-        this._store.state.pointerY = (yRelativeToHost - this._store.state.translateY) / this._store.state.scale;
-        const delta = event.deltaY > 0 ? -this._store.state.scaleStep * this._store.state.scale : this._store.state.scaleStep * this._store.state.scale;
-        const newScale = Math.min(this._store.state.scaleMax, Math.max(this._store.state.scaleMin, this._store.state.scale + delta));
-        const scaleRatio = newScale / this._store.state.scale;
-        const translateXAdjustment = (xRelativeToHost - this._store.state.translateX) * (scaleRatio - 1);
-        const translateYAdjustment = (yRelativeToHost - this._store.state.translateY) * (scaleRatio - 1);
-        this._store.state.scale = newScale;
-        this._store.state.translateX -= translateXAdjustment;
-        this._store.state.translateY -= translateYAdjustment;
-        this._store.state.hasViewportChanged = true;
-        this._store.rerender();
-    }
-    handlePan(event) {
-        const panSpeed = 0.8;
-        this._store.state.translateX -= event.deltaX * panSpeed;
-        this._store.state.translateY -= event.deltaY * panSpeed;
-        this._store.state.hasViewportChanged = true;
-        this._store.rerender();
-    }
-}
-
-class UpdateViewportCommand extends KritzelBaseCommand {
-    constructor(store, initiator, previousViewport) {
-        super(store, initiator);
-        this.previousViewport = previousViewport;
-        this.currentViewport = {
-            scale: this._store.state.scale,
-            translateX: this._store.state.translateX,
-            translateY: this._store.state.translateY,
-        };
-    }
-    execute() {
-        this._store.state.scale = this.currentViewport.scale;
-        this._store.state.translateX = this.currentViewport.translateX;
-        this._store.state.translateY = this.currentViewport.translateY;
-    }
-    undo() {
-        this._store.state.scale = this.previousViewport.scale;
-        this._store.state.translateX = this.previousViewport.translateX;
-        this._store.state.translateY = this.previousViewport.translateY;
-    }
-}
-
-class KritzelCircularBuffer {
-    constructor(capacity) {
-        this.head = 0;
-        this.tail = 0;
-        this.size = 0;
-        this.capacity = capacity;
-        this.buffer = new Array(capacity).fill(null);
-    }
-    add(item) {
-        this.buffer[this.head] = item;
-        this.head = (this.head + 1) % this.capacity;
-        if (this.size < this.capacity) {
-            this.size++;
-        }
-        else {
-            this.tail = (this.tail + 1) % this.capacity;
-        }
-    }
-    pop() {
-        if (this.size === 0) {
-            return null;
-        }
-        this.head = (this.head - 1 + this.capacity) % this.capacity;
-        const item = this.buffer[this.head];
-        this.buffer[this.head] = null;
-        this.size--;
-        return item;
-    }
-    peek() {
-        if (this.size === 0) {
-            return null;
-        }
-        const lastIndex = (this.head - 1 + this.capacity) % this.capacity;
-        return this.buffer[lastIndex];
-    }
-    isEmpty() {
-        return this.size === 0;
-    }
-    clear() {
-        this.buffer.fill(null);
-        this.head = 0;
-        this.tail = 0;
-        this.size = 0;
-    }
-}
-
-class KritzelHistory {
-    constructor(store) {
-        this._store = store;
-        this.undoStack = new KritzelCircularBuffer(this._store.state.historyBufferSize);
-        this.redoStack = new KritzelCircularBuffer(this._store.state.historyBufferSize);
-        this.previousViewport = {
-            scale: this._store.state.scale,
-            scaleStep: this._store.state.scaleStep,
-            translateX: this._store.state.translateX,
-            translateY: this._store.state.translateY,
-        };
-    }
-    executeCommand(command) {
-        if (this._store.state.hasViewportChanged) {
-            this.addUpdateViewportCommand();
-        }
-        command.execute();
-        if (this._store.state.debugInfo.logCommands)
-            console.info('add', command);
-        this.undoStack.add(command);
-        if (this.redoStack.isEmpty() === false) {
-            this.redoStack.clear();
-        }
-        this._store.rerender();
-    }
-    undo() {
-        if (this._store.state.hasViewportChanged) {
-            const command = new UpdateViewportCommand(this._store, this, this.previousViewport);
-            command.undo();
-            this._store.state.hasViewportChanged = false;
-            this._store.rerender();
-            return;
-        }
-        const command = this.undoStack.pop();
-        if (command) {
-            command.undo();
-            if (this._store.state.debugInfo.logCommands)
-                console.info('undo', command);
-            this.redoStack.add(command);
-        }
-        this._store.rerender();
-    }
-    redo() {
-        const command = this.redoStack.pop();
-        if (command) {
-            command.execute();
-            if (this._store.state.debugInfo.logCommands)
-                console.info('redo', command);
-            this.undoStack.add(command);
-        }
-        this._store.rerender();
-    }
-    addUpdateViewportCommand() {
-        const command = new UpdateViewportCommand(this._store, this, this.previousViewport);
-        command.execute();
-        this.undoStack.add(command);
-        if (this.redoStack.isEmpty() === false) {
-            this.redoStack.clear();
-        }
-        this._store.state.hasViewportChanged = false;
-        this.previousViewport = {
-            scale: this._store.state.scale,
-            scaleStep: this._store.state.scaleStep,
-            translateX: this._store.state.translateX,
-            translateY: this._store.state.translateY,
-        };
-    }
-}
-
-class KritzelOctree {
-    constructor(bounds, capacity = 8) {
-        this.objects = [];
-        this.children = null;
-        this.bounds = bounds;
-        this.capacity = capacity;
-    }
-    insert(object) {
-        if (!this.intersects(object.rotatedBoundingBox, this.bounds)) {
-            return false;
-        }
-        if (this.objects.length < this.capacity && this.children === null) {
-            this.objects.push(object);
-            return true;
-        }
-        if (this.children === null) {
-            this.subdivide();
-        }
-        for (const child of this.children) {
-            if (child.insert(object)) {
-                return true;
-            }
-        }
-        return false;
-    }
-    update(object) {
-        const index = this.objects.findIndex(o => o.id === object.id);
-        if (index !== -1) {
-            this.objects[index] = object;
-            return true;
-        }
-        if (this.children !== null) {
-            for (const child of this.children) {
-                if (child.update(object)) {
-                    return true;
-                }
-            }
-        }
-        return false;
-    }
-    remove(predicate) {
-        const index = this.objects.findIndex(o => predicate(o));
-        if (index !== -1) {
-            this.objects.splice(index, 1);
-        }
-        if (this.children !== null) {
-            for (const child of this.children) {
-                child.remove(predicate);
-            }
-        }
-    }
-    query(range) {
-        const results = [];
-        if (!this.intersects(range, this.bounds)) {
-            return results;
-        }
-        for (const object of this.objects) {
-            if (this.intersects(object.rotatedBoundingBox, range)) {
-                results.push(object);
-            }
-        }
-        if (this.children !== null) {
-            for (const child of this.children) {
-                results.push(...child.query(range));
-            }
-        }
-        return results;
-    }
-    filter(predicate) {
-        const results = this.objects.filter(o => predicate(o));
-        if (this.children !== null) {
-            for (const child of this.children) {
-                results.push(...child.filter(predicate));
-            }
-        }
-        return results;
-    }
-    allObjects() {
-        const results = [...this.objects];
-        if (this.children !== null) {
-            for (const child of this.children) {
-                results.push(...child.allObjects());
-            }
-        }
-        return results;
-    }
-    subdivide() {
-        const { x, y, z, width, height, depth } = this.bounds;
-        const halfWidth = width / 2;
-        const halfHeight = height / 2;
-        const halfDepth = depth / 2;
-        this.children = [
-            new KritzelOctree({ x, y, z, width: halfWidth, height: halfHeight, depth: halfDepth }, this.capacity),
-            new KritzelOctree({ x: x + halfWidth, y, z, width: halfWidth, height: halfHeight, depth: halfDepth }, this.capacity),
-            new KritzelOctree({ x, y: y + halfHeight, z, width: halfWidth, height: halfHeight, depth: halfDepth }, this.capacity),
-            new KritzelOctree({ x: x + halfWidth, y: y + halfHeight, z, width: halfWidth, height: halfHeight, depth: halfDepth }, this.capacity),
-            new KritzelOctree({ x, y, z: z + halfDepth, width: halfWidth, height: halfHeight, depth: halfDepth }, this.capacity),
-            new KritzelOctree({ x: x + halfWidth, y, z: z + halfDepth, width: halfWidth, height: halfHeight, depth: halfDepth }, this.capacity),
-            new KritzelOctree({ x, y: y + halfHeight, z: z + halfDepth, width: halfWidth, height: halfHeight, depth: halfDepth }, this.capacity),
-            new KritzelOctree({ x: x + halfWidth, y: y + halfHeight, z: z + halfDepth, width: halfWidth, height: halfHeight, depth: halfDepth }, this.capacity),
-        ];
-    }
-    intersects(a, b) {
-        return !(a.x >= b.x + b.width || // a is completely to the right of b
-            a.x + a.width <= b.x || // a is completely to the left of b
-            a.y >= b.y + b.height || // a is completely below b
-            a.y + a.height <= b.y // a is completely above b
-        );
-    }
-}
-
-class UpdateObjectCommand extends KritzelBaseCommand {
-    constructor(store, initiator, object, updatedProperties) {
-        super(store, initiator);
-        this.object = object;
-        this.updatedProperties = updatedProperties;
-        this.previousProperties = {};
-        for (const key in updatedProperties) {
-            if (updatedProperties.hasOwnProperty(key)) {
-                this.previousProperties[key] = this.object[key];
-            }
-        }
-    }
-    execute() {
-        for (const key in this.updatedProperties) {
-            if (this.updatedProperties.hasOwnProperty(key)) {
-                this.object[key] = this.updatedProperties[key];
-            }
-        }
-    }
-    undo() {
-        for (const key in this.previousProperties) {
-            if (this.previousProperties.hasOwnProperty(key)) {
-                this.object[key] = this.previousProperties[key];
-            }
-        }
-    }
-}
-
-const DEFAULT_ENGINE_STATE = {
-    activeTool: null,
-    activeText: null,
-    currentPath: null,
-    copiedObjects: null,
-    objectsOctree: null,
-    selectionBox: null,
-    selectionGroup: null,
-    resizeHandleType: null,
-    hasViewportChanged: false,
-    isReady: false,
-    isEnabled: true,
-    isScaling: false,
-    isPanning: false,
-    isFocused: false,
-    isSelecting: false,
-    isResizing: false,
-    isResizeHandleSelected: false,
-    isRotating: false,
-    isRotationHandleSelected: false,
-    isDragging: false,
-    isDrawing: false,
-    isErasing: false,
-    isWriting: false,
-    isCtrlKeyPressed: false,
-    isContextMenuVisible: false,
-    contextMenuItems: [],
-    contextMenuX: 0,
-    contextMenuY: 0,
-    skipContextMenu: false,
-    debugInfo: {
-        showObjectInfo: false,
-        showViewportInfo: false,
-        logCommands: false,
-    },
-    host: null,
-    pointerX: 0,
-    pointerY: 0,
-    scale: 1,
-    scaleMax: 1,
-    scaleMin: 1,
-    scaleStep: 0.05,
-    startX: 0,
-    startY: 0,
-    translateX: 0,
-    translateXMax: 400,
-    translateXMin: 0,
-    translateY: 0,
-    translateYMax: 400,
-    translateYMin: 0,
-    viewportWidth: 0,
-    viewportHeight: 0,
-    historyBufferSize: 1000,
-    longTouchTimeout: null,
-    longTouchDelay: 300,
-    pointers: new Map()
-};
-
-class KritzelStore {
-    get history() {
-        return this._history;
-    }
-    get state() {
-        return this._state;
-    }
-    get currentZIndex() {
-        return this._state.objectsOctree.filter(o => !(o instanceof KritzelSelectionGroup) && !(o instanceof KrtizelSelectionBox)).length;
-    }
-    get allObjects() {
-        return this._state.objectsOctree.allObjects();
-    }
-    get selectedObjects() {
-        return this.allObjects.filter(o => !(o instanceof KritzelSelectionGroup)).filter(o => o.isSelected);
-    }
-    get offsetX() {
-        return this._state.host.getBoundingClientRect().left;
-    }
-    get offsetY() {
-        return this._state.host.getBoundingClientRect().top;
-    }
-    constructor(kritzelEngine) {
-        this._listeners = new Map();
-        this.objects = [];
-        this._state = DEFAULT_ENGINE_STATE;
-        this._kritzelEngine = kritzelEngine;
-        this._history = new KritzelHistory(this);
-        this._state.objectsOctree = new KritzelOctree({
-            x: -Infinity,
-            y: -Infinity,
-            z: -Infinity,
-            width: Infinity,
-            height: Infinity,
-            depth: Infinity,
-        });
-    }
-    rerender() {
-        const viewportBounds = {
-            x: -this._state.translateX / this._state.scale,
-            y: -this._state.translateY / this._state.scale,
-            z: this._state.scale,
-            width: this._state.viewportWidth / this._state.scale,
-            height: this._state.viewportHeight / this._state.scale,
-            depth: 100,
-        };
-        this.objects = this._state.objectsOctree.query(viewportBounds);
-        if (this._kritzelEngine) {
-            this._kritzelEngine.forceUpdate++;
-        }
-    }
-    findObjectById(id) {
-        for (const object of this.allObjects) {
-            if (object.id === id) {
-                return object;
-            }
-        }
-        return null;
-    }
-    deselectAllObjects() {
-        if (this._state.selectionGroup) {
-            this._history.executeCommand(new RemoveSelectionGroupCommand(this, this));
-        }
-    }
-    onStateChange(property, listener) {
-        if (!this._listeners.has(property)) {
-            this._listeners.set(property, new Set());
-        }
-        this._listeners.get(property).add(listener);
-    }
-    setState(property, value) {
-        const oldValue = this._state[property];
-        if (oldValue !== value) {
-            this._state[property] = value;
-            if (this._listeners.has(property)) {
-                this._listeners.get(property).forEach(listener => listener(value, oldValue, String(property)));
-            }
-        }
-    }
-    delete() {
-        if (!this.state.selectionGroup) {
-            return;
-        }
-        const deleteSelectedObjectsCommand = this.state.selectionGroup.objects.map(obj => new RemoveObjectCommand(this, this.state.selectionGroup, obj));
-        const removeSelectionGroupCommand = new RemoveSelectionGroupCommand(this, this.state.selectionGroup);
-        const commands = [...deleteSelectedObjectsCommand, removeSelectionGroupCommand];
-        this.history.executeCommand(new BatchCommand(this, this.state.selectionGroup, commands));
-    }
-    deleteObject(id, isHistoryUpdated = true) {
-        const object = this.findObjectById(id);
-        if (object) {
-            if (isHistoryUpdated) {
-                const removeObjectCommand = new RemoveObjectCommand(this, this, object);
-                this.history.executeCommand(removeObjectCommand);
-            }
-            else {
-                this._state.objectsOctree.remove(obj => obj.id === id);
-                this.rerender();
-            }
-        }
-    }
-    copy() {
-        this.state.copiedObjects = this.state.selectionGroup.copy();
-    }
-    paste(x, y) {
-        this.state.copiedObjects.isSelected = true;
-        const adjustedX = x !== undefined ? x : this.state.copiedObjects.translateX + 25;
-        const adjustedY = y !== undefined ? y : this.state.copiedObjects.translateY + 25;
-        this.state.copiedObjects.updatePosition(adjustedX, adjustedY);
-        const commands = [];
-        if (this.state.selectionGroup !== null) {
-            commands.push(new RemoveSelectionGroupCommand(this, this.state.selectionGroup));
-        }
-        const addCopiedObjectsCommands = this.state.copiedObjects.objects.map(obj => new AddObjectCommand(this, this, obj));
-        const addCopiedObjectsAsSelectionGroupCommand = new AddSelectionGroupCommand(this, this, this.state.copiedObjects);
-        commands.push(...addCopiedObjectsCommands, addCopiedObjectsAsSelectionGroupCommand);
-        this.history.executeCommand(new BatchCommand(this, this, commands));
-        this.state.isSelecting = false;
-        this.state.copiedObjects = this.state.selectionGroup.copy();
-        this.setState('activeTool', KritzelToolRegistry.getTool('selection'));
-    }
-    bringForward(object) {
-        const max = this.allObjects.length + 1;
-        const objects = object ? [object] : this.state.selectionGroup.objects;
-        const increaseZIndexCommands = objects.map(obj => {
-            if (obj.zIndex === max) {
-                return;
-            }
-            return new UpdateObjectCommand(this, this, obj, { zIndex: obj.zIndex + 1 });
-        });
-        this.history.executeCommand(new BatchCommand(this, this, increaseZIndexCommands));
-    }
-    sendBackward(object) {
-        const min = 0;
-        const objects = object ? [object] : this.state.selectionGroup.objects;
-        const decreaseZIndexCommands = objects.map(obj => {
-            if (obj.zIndex === min) {
-                return;
-            }
-            return new UpdateObjectCommand(this, this, obj, { zIndex: obj.zIndex - 1 });
-        });
-        this.history.executeCommand(new BatchCommand(this, this, decreaseZIndexCommands));
-    }
-    bringToFront(object) {
-        const max = Math.max(...this.allObjects.map(obj => obj.zIndex)) + 1;
-        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));
-    }
-    sendToBack(object) {
-        const min = Math.min(...this.allObjects.map(obj => obj.zIndex)) - 1;
-        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));
-    }
-    selectObjects(objects) {
-        if (objects.length === 0) {
-            return;
-        }
-        const selectionGroup = KritzelSelectionGroup.create(this);
-        objects.forEach(obj => {
-            obj.isSelected = false;
-            selectionGroup.addOrRemove(obj);
-        });
-        selectionGroup.isSelected = true;
-        this.state.selectionGroup = selectionGroup;
-        if (objects.length === 1) {
-            selectionGroup.rotation = selectionGroup.objects[0].rotation;
-        }
-        this.history.executeCommand(new AddSelectionGroupCommand(this, this, selectionGroup));
-    }
-    selectAllObjectsInViewport() {
-        const objectsInViewport = this._state.objectsOctree
-            .query({
-            x: -this._state.translateX / this._state.scale,
-            y: -this._state.translateY / this._state.scale,
-            z: this._state.scale,
-            width: this._state.viewportWidth / this._state.scale,
-            height: this._state.viewportHeight / this._state.scale,
-            depth: 100,
-        })
-            .filter(o => !(o instanceof KritzelSelectionGroup) && !(o instanceof KrtizelSelectionBox) && !(o instanceof KritzelContextMenu));
-        if (objectsInViewport.length > 0) {
-            const selectionGroup = KritzelSelectionGroup.create(this);
-            objectsInViewport.forEach(obj => {
-                obj.isSelected = false;
-                selectionGroup.addOrRemove(obj);
-            });
-            selectionGroup.isSelected = true;
-            this.state.isSelecting = false;
-            if (objectsInViewport.length === 1) {
-                selectionGroup.rotation = selectionGroup.objects[0].rotation;
-            }
-            this.history.executeCommand(new AddSelectionGroupCommand(this, this, selectionGroup));
-            this.setState('activeTool', KritzelToolRegistry.getTool('selection'));
-        }
-    }
-    clearSelection() {
-        const command = new RemoveSelectionGroupCommand(this, this.state.selectionGroup);
-        this.history.executeCommand(command);
-        this.state.selectionGroup = null;
-        this.state.selectionBox = null;
-        this.state.isSelecting = false;
-        this.state.isResizeHandleSelected = false;
-        this.state.isRotationHandleSelected = false;
-    }
-    resetActiveText() {
-        if (this.state.activeText && this.state.activeText.value === ' ') {
-            this.deleteObject(this.state.activeText.id, false);
-            this.history.undoStack.pop();
-        }
-        this.state.activeText = null;
-    }
-    getObjectFromPointerEvent(event, selector = '.object') {
-        var _a;
-        const shadowRoot = (_a = this.state.host) === null || _a === void 0 ? void 0 : _a.shadowRoot;
-        if (!shadowRoot)
-            return null;
-        const clientX = event.clientX;
-        const clientY = event.clientY;
-        const elementAtPoint = shadowRoot.elementFromPoint(clientX, clientY);
-        if (!elementAtPoint)
-            return null;
-        const selectedObject = elementAtPoint.closest(selector);
-        if (selectedObject) {
-            return this.allObjects.find(object => selectedObject.id === object.id);
-        }
-        return null;
-    }
-    getObjectsFromPointerEvent(event, selector = '.object') {
-        var _a;
-        const shadowRoot = (_a = this.state.host) === null || _a === void 0 ? void 0 : _a.shadowRoot;
-        if (!shadowRoot)
-            return [];
-        const clientX = event.clientX;
-        const clientY = event.clientY;
-        const elementsAtPoint = shadowRoot.elementsFromPoint(clientX, clientY);
-        if (!elementsAtPoint || elementsAtPoint.length === 0)
-            return [];
-        const objectIds = new Set();
-        elementsAtPoint.forEach(element => {
-            const selectedObject = element.closest(selector);
-            if (selectedObject && selectedObject.id) {
-                objectIds.add(selectedObject.id);
-            }
-        });
-        if (objectIds.size > 0) {
-            return this.allObjects.filter(object => objectIds.has(object.id)).sort((a, b) => b.zIndex - a.zIndex);
-        }
-        return [];
-    }
-    getCanvasPoint(event) {
-        if (!this.state.host) {
-            return { x: 0, y: 0 };
-        }
-        // Get the position of the kritzel-engine host element relative to the viewport
-        const hostRect = this.state.host.getBoundingClientRect();
-        // 1. Make the pointer coordinates relative to the host element
-        const xRelativeToHost = event.clientX - hostRect.left;
-        const yRelativeToHost = event.clientY - hostRect.top;
-        // 2. Reverse the translation applied to the #origin div
-        const xWithoutTranslate = xRelativeToHost - this.state.translateX;
-        const yWithoutTranslate = yRelativeToHost - this.state.translateY;
-        // 3. Reverse the scaling to get the final world coordinates
-        const worldX = xWithoutTranslate / this.state.scale;
-        const worldY = yWithoutTranslate / this.state.scale;
-        return { x: worldX, y: worldY };
-    }
-}
-
-class KritzelKeyHandler extends KritzelBaseHandler {
-    constructor(store) {
-        super(store);
-    }
-    handleKeyDown(event) {
-        if (this._store.state.isFocused === false) {
-            event.preventDefault();
-            return;
-        }
-        this._store.state.isCtrlKeyPressed = event.ctrlKey;
-        if (this._store.state.isCtrlKeyPressed) {
-            event.preventDefault();
-        }
-        if (event.key === 'Escape' && this._store.state.selectionGroup) {
-            this._store.clearSelection();
-        }
-        if (event.key === 'Delete' && this._store.state.selectionGroup) {
-            this._store.delete();
-        }
-        if (event.key === 'z' && event.ctrlKey) {
-            this._store.history.undo();
-        }
-        if (event.key === 'y' && event.ctrlKey) {
-            this._store.history.redo();
-        }
-        if (event.key === 's' && event.ctrlKey) {
-            this._store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
-            this._store.deselectAllObjects();
-        }
-        if (event.key === 'b' && event.ctrlKey) {
-            this._store.setState('activeTool', KritzelToolRegistry.getTool('brush'));
-            this._store.deselectAllObjects();
-        }
-        if (event.key === 'e' && event.ctrlKey) {
-            this._store.setState('activeTool', KritzelToolRegistry.getTool('eraser'));
-            this._store.deselectAllObjects();
-        }
-        if (event.key === 'i' && event.ctrlKey) {
-            this._store.setState('activeTool', KritzelToolRegistry.getTool('image'));
-            this._store.deselectAllObjects();
-        }
-        if (event.key === 'x' && event.ctrlKey) {
-            this._store.setState('activeTool', KritzelToolRegistry.getTool('text'));
-            this._store.deselectAllObjects();
-        }
-        if (event.key === 'c' && event.ctrlKey && this._store.state.selectionGroup) {
-            this._store.copy();
-            this._store.rerender();
-        }
-        if (event.key === 'v' && event.ctrlKey && this._store.state.copiedObjects) {
-            this._store.paste();
-        }
-        if (event.key === '+' && event.ctrlKey && this._store.state.selectionGroup) {
-            this._store.bringForward();
-        }
-        if (event.key === '-' && event.ctrlKey && this._store.state.selectionGroup) {
-            this._store.sendBackward();
-        }
-        if (event.key === '*' && event.shiftKey && this._store.state.selectionGroup) {
-            this._store.bringToFront();
-        }
-        if (event.key === '_' && event.shiftKey && this._store.state.selectionGroup) {
-            this._store.sendToBack();
-        }
-        if (event.key === 'a' && event.ctrlKey && this._store.state.activeText) {
-            this._store.state.activeText.selectAll();
-        }
-        if (event.key === 'v' && event.ctrlKey && this._store.state.activeText) {
-            this._store.state.activeText.insertFromClipboard();
-        }
-    }
-    handleKeyUp(event) {
-        if (this._store.state.isFocused === false) {
-            return;
-        }
-        this._store.state.isCtrlKeyPressed = event.ctrlKey;
-    }
-}
-
-class KritzelContextMenuHandler extends KritzelBaseHandler {
-    constructor(store, globalContextMenuItems, objectContextMenuItems) {
-        super(store);
-        this.globalContextMenuItems = [];
-        this.objectContextMenuItems = [];
-        this.globalContextMenuItems = globalContextMenuItems;
-        this.objectContextMenuItems = objectContextMenuItems;
-    }
-    handleContextMenu(event) {
-        if (this._store.state.skipContextMenu) {
-            this._store.state.skipContextMenu = false;
-            return;
-        }
-        const selectedObject = this._store.getObjectFromPointerEvent(event, '.object');
-        if (selectedObject && !(selectedObject instanceof KritzelSelectionGroup)) {
-            this._store.state.selectionGroup = KritzelSelectionGroup.create(this._store);
-            this._store.state.selectionGroup.addOrRemove(selectedObject);
-            this._store.state.selectionGroup.isSelected = true;
-            this._store.state.selectionGroup.rotation = selectedObject.rotation;
-            this._store.state.isSelecting = false;
-            this._store.history.executeCommand(new AddSelectionGroupCommand(this._store, this, this._store.state.selectionGroup));
-        }
-        this._store.state.contextMenuItems = this._store.state.selectionGroup ? this.objectContextMenuItems : this.globalContextMenuItems;
-        let x = event.clientX - this._store.offsetX;
-        let y = event.clientY - this._store.offsetY;
-        const menuWidthEstimate = 150;
-        const menuHeightEstimate = 200;
-        const margin = 10;
-        if (x + menuWidthEstimate > window.innerWidth - margin) {
-            x = window.innerWidth - menuWidthEstimate - margin;
-        }
-        if (y + menuHeightEstimate > window.innerHeight - margin) {
-            y = window.innerHeight - menuHeightEstimate - margin;
-        }
-        x = Math.max(margin, x);
-        y = Math.max(margin, y);
-        this._store.state.contextMenuX = x;
-        this._store.state.contextMenuY = y;
-        this._store.state.isContextMenuVisible = true;
-        this._store.state.isEnabled = false;
-        this._store.rerender();
-    }
-}
-
-class KritzelClassHelper {
-    static isInstanceOf(object, className) {
-        return object.__class__ === className;
-    }
-}
-
-const kritzelEngineCss = ":host{display:block;position:relative;height:100%;width:100%;overflow:hidden;background-color:var(--kritzel-engine-background-color, #ffffff)}:host,:host *{touch-action:none;user-select:none}.debug-panel{position:absolute;pointer-events:none;top:0;right:0}.origin{position:relative;top:0;left:0;height:0;width:0;pointer-events:none;-webkit-transform-origin:top left;-moz-transform-origin:top left;transform-origin:top left;overflow:visible}.object{overflow:visible}textarea{all:unset;box-sizing:border-box;outline:none !important;border:none !important;overflow:visible}.resize-handle-overlay.top-left,.resize-handle-overlay.bottom-right{cursor:nwse-resize}.resize-handle-overlay.top-right,.resize-handle-overlay.bottom-left{cursor:nesw-resize}.rotation-handle-overlay{cursor:grab}";
-
-const KritzelEngine = class {
-    validateScaleMax(newValue) {
-        if (newValue > ABSOLUTE_SCALE_MAX) {
-            console.warn(`scaleMax cannot be greater than ${ABSOLUTE_SCALE_MAX}.`);
-            this.scaleMax = ABSOLUTE_SCALE_MAX;
-            this.store.state.scaleMax = this.scaleMax;
-        }
-        else {
-            this.store.state.scaleMax = newValue;
-        }
-    }
-    validateScaleMin(newValue) {
-        if (newValue < ABSOLUTE_SCALE_MIN) {
-            console.warn(`scaleMin cannot be less than ${ABSOLUTE_SCALE_MIN}.`);
-            this.scaleMin = ABSOLUTE_SCALE_MIN;
-            this.store.state.scaleMin = this.scaleMin;
-        }
-        else {
-            this.store.state.scaleMin = newValue;
-        }
-    }
-    get isSelecting() {
-        return this.store.state.activeTool instanceof KritzelSelectionTool && this.store.state.isSelecting;
-    }
-    get isSelectionActive() {
-        return this.store.state.activeTool instanceof KritzelSelectionTool && this.store.state.selectionGroup !== null;
-    }
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.isEngineReady = createEvent(this, "isEngineReady", 7);
-        this.activeToolChange = createEvent(this, "activeToolChange", 7);
-        this.scaleMax = ABSOLUTE_SCALE_MAX;
-        this.scaleMin = ABSOLUTE_SCALE_MIN;
-        this.forceUpdate = 0;
-        this.contextMenuElement = null;
-        this.store = new KritzelStore(this);
-    }
-    componentWillLoad() {
-        this.validateScaleMax(this.scaleMax);
-        this.validateScaleMin(this.scaleMin);
-    }
-    componentDidLoad() {
-        this.contextMenuHandler = new KritzelContextMenuHandler(this.store, this.globalContextMenuItems, this.objectContextMenuItems);
-        this.keyHandler = new KritzelKeyHandler(this.store);
-        this.viewport = new KritzelViewport(this.store, this.host);
-        this._registerStateChangeListeners();
-        if (this.store.state.isReady === false) {
-            this.store.state.isReady = true;
-            this.isEngineReady.emit();
-        }
-    }
-    handleWheel(ev) {
-        var _a, _b;
-        if (this.store.state.isContextMenuVisible) {
-            this.hideContextMenu();
-        }
-        this.viewport.handleWheel(ev);
-        (_b = (_a = this.store.state) === null || _a === void 0 ? void 0 : _a.activeTool) === null || _b === void 0 ? void 0 : _b.handleWheel(ev);
-    }
-    handlePointerDown(ev) {
-        var _a, _b;
-        if (KritzelEventHelper.isPointerEventOnContextMenu(ev) === false && this.store.state.isContextMenuVisible) {
-            this.hideContextMenu();
-            return;
-        }
-        if (this.store.state.isEnabled === false) {
-            return;
-        }
-        KritzelEventHelper.onLongTouchPress(ev, (event) => {
-            if (!(this.store.state.activeTool instanceof KritzelSelectionTool)) {
-                return;
-            }
-            this.contextMenuHandler.handleContextMenu(event);
-        });
-        this.host.setPointerCapture(ev.pointerId);
-        this.store.state.pointers.set(ev.pointerId, ev);
-        this.viewport.handlePointerDown(ev);
-        (_b = (_a = this.store.state) === null || _a === void 0 ? void 0 : _a.activeTool) === null || _b === void 0 ? void 0 : _b.handlePointerDown(ev);
-    }
-    handlePointerMove(ev) {
-        var _a, _b;
-        if (this.store.state.isEnabled === false) {
-            return;
-        }
-        this.store.state.pointers.set(ev.pointerId, ev);
-        this.viewport.handlePointerMove(ev);
-        (_b = (_a = this.store.state) === null || _a === void 0 ? void 0 : _a.activeTool) === null || _b === void 0 ? void 0 : _b.handlePointerMove(ev);
-    }
-    handlePointerUp(ev) {
-        var _a, _b;
-        if (this.store.state.isEnabled === false) {
-            return;
-        }
-        this.store.state.pointers.delete(ev.pointerId);
-        this.host.releasePointerCapture(ev.pointerId);
-        this.viewport.handlePointerUp(ev);
-        (_b = (_a = this.store.state) === null || _a === void 0 ? void 0 : _a.activeTool) === null || _b === void 0 ? void 0 : _b.handlePointerUp(ev);
-    }
-    handlePointerCancel(ev) {
-        var _a, _b;
-        if (this.store.state.isEnabled === false) {
-            return;
-        }
-        this.host.releasePointerCapture(ev.pointerId);
-        this.store.state.pointers.delete(ev.pointerId);
-        this.viewport.handlePointerUp(ev);
-        (_b = (_a = this.store.state) === null || _a === void 0 ? void 0 : _a.activeTool) === null || _b === void 0 ? void 0 : _b.handlePointerUp(ev);
-    }
-    handleContextMenu(ev) {
-        ev.preventDefault();
-        if (this.store.state.isEnabled === false) {
-            return;
-        }
-        if (ev.pointerType === 'touch') {
-            return;
-        }
-        this.contextMenuHandler.handleContextMenu(ev);
-    }
-    handleResize() {
-        this.viewport.handleResize();
-    }
-    handleKeyDown(ev) {
-        this.keyHandler.handleKeyDown(ev);
-    }
-    handleKeyUp(ev) {
-        this.keyHandler.handleKeyUp(ev);
-    }
-    updateFocus(ev) {
-        const rect = this.store.state.host.getBoundingClientRect();
-        const isInside = ev.clientX >= rect.left && ev.clientX <= rect.right && ev.clientY >= rect.top && ev.clientY <= rect.bottom;
-        const path = ev.composedPath();
-        const kritzelEngineElement = this.host.closest('kritzel-engine');
-        const isInKritzelEngine = path.includes(kritzelEngineElement || this.host);
-        this.store.setState('isFocused', isInside && isInKritzelEngine);
-    }
-    async registerTool(toolName, toolClass, toolConfig) {
-        if (typeof toolClass !== 'function' || !(toolClass.prototype instanceof KritzelBaseTool)) {
-            console.error(`Failed to register tool "${toolName}": Tool class must be a constructor function`);
-            return null;
-        }
-        const registeredTool = KritzelToolRegistry.registerTool(toolName, toolClass, this.store);
-        if (toolConfig) {
-            Object.entries(toolConfig).forEach(([key, value]) => {
-                registeredTool[key] = value;
-            });
-        }
-        return Promise.resolve(registeredTool);
-    }
-    async changeActiveTool(tool) {
-        var _a;
-        (_a = this.store.state.activeTool) === null || _a === void 0 ? void 0 : _a.onDeactivate();
-        this.store.setState('activeTool', tool);
-        this.store.deselectAllObjects();
-        tool === null || tool === void 0 ? void 0 : tool.onActivate();
-    }
-    async setFocus() {
-        this.host.focus();
-        this.store.state.isFocused = true;
-    }
-    async disable() {
-        this.store.state.isEnabled = false;
-        this.forceUpdate++;
-    }
-    async enable() {
-        this.store.state.isEnabled = true;
-        this.forceUpdate++;
-    }
-    async delete() {
-        this.store.delete();
-    }
-    async copy() {
-        this.store.copy();
-    }
-    async paste(x, y) {
-        this.store.paste(x, y);
-    }
-    async bringForward(object) {
-        this.store.bringForward(object);
-    }
-    async sendBackward(object) {
-        this.store.sendBackward(object);
-    }
-    async bringToFront(object) {
-        this.store.bringToFront(object);
-    }
-    async sendToBack(object) {
-        this.store.sendToBack(object);
-    }
-    async undo() {
-        this.store.history.undo();
-    }
-    async redo() {
-        this.store.history.redo();
-    }
-    async hideContextMenu() {
-        this.store.state.pointers.clear();
-        this.store.state.isContextMenuVisible = false;
-        this.store.state.selectionBox = null;
-        this.store.state.isSelecting = false;
-    }
-    async getObjectById(id) {
-        const object = this.store.objects.find(obj => obj.id === id);
-        return object || null;
-    }
-    async addObject(object) {
-        this.store.deselectAllObjects();
-        object.id = object.generateId();
-        object._store = this.store;
-        object.scale = object.scale ? object.scale : this.store.state.scale;
-        object.zIndex = this.store.currentZIndex;
-        const command = new AddObjectCommand(this.store, this, object);
-        this.store.history.executeCommand(command);
-        return object;
-    }
-    async updateObject(object, updatedProperties) {
-        this.store.deselectAllObjects();
-        const command = new UpdateObjectCommand(this.store, this, object, updatedProperties);
-        this.store.history.executeCommand(command);
-        return object;
-    }
-    async removeObject(object) {
-        this.store.deselectAllObjects();
-        const command = new RemoveObjectCommand(this.store, this, object);
-        this.store.history.executeCommand(command);
-        return object;
-    }
-    async getSelectedObjects() {
-        return this.store.state.selectionGroup ? this.store.state.selectionGroup.objects : [];
-    }
-    async selectObjects(objects) {
-        var _a;
-        (_a = this.store.state.activeTool) === null || _a === void 0 ? void 0 : _a.onDeactivate();
-        this.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
-        this.store.deselectAllObjects();
-        this.store.selectObjects(objects);
-    }
-    async selectAllObjectsInViewport() {
-        var _a;
-        (_a = this.store.state.activeTool) === null || _a === void 0 ? void 0 : _a.onDeactivate();
-        this.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
-        this.store.deselectAllObjects();
-        this.store.selectAllObjectsInViewport();
-    }
-    async clearSelection() {
-        this.store.clearSelection();
-    }
-    async centerObjectInViewport(object) {
-        object.centerInViewport();
-        const command = new UpdateObjectCommand(this.store, this, object, object);
-        this.store.history.executeCommand(command);
-        return object;
-    }
-    async getCopiedObjects() {
-        var _a;
-        return ((_a = this.store.state.copiedObjects) === null || _a === void 0 ? void 0 : _a.objects) || [];
-    }
-    _registerStateChangeListeners() {
-        this.store.onStateChange('activeTool', this._handleActiveToolChange.bind(this));
-        this.store.onStateChange('isFocused', this._handleIsFocusedChange.bind(this));
-    }
-    _handleActiveToolChange(activeTool) {
-        if (!(activeTool instanceof KritzelSelectionTool)) {
-            this.store.clearSelection();
-        }
-        this.store.state.skipContextMenu = false;
-        this.activeToolChange.emit(activeTool);
-        KritzelKeyboardHelper.forceHideKeyboard();
-    }
-    _handleIsFocusedChange(isFocused) {
-        if (!isFocused) {
-            this.store.resetActiveText();
-        }
-    }
-    render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4;
-        const computedStyle = window.getComputedStyle(this.host);
-        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: '10a88c74cc96dc353b55bd42c116e5dd3adcf40f' }, h("div", { key: 'a385ba0e880acc8835b4dced3a1dc42ac4967634', class: "debug-panel", style: { display: this.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, h("div", { key: '84768a6978341ceffa0c43078440c10258396ab2' }, "TranslateX: ", (_a = this.store.state) === null || _a === void 0 ? void 0 :
-            _a.translateX), h("div", { key: 'daaeeeb2859bf05f4bf97b0342f269f32958ee8e' }, "TranslateY: ", (_b = this.store.state) === null || _b === void 0 ? void 0 :
-            _b.translateY), h("div", { key: '882cd55cea6a694e07b440504c76a2676c9d6a35' }, "ViewportWidth: ", (_c = this.store.state) === null || _c === void 0 ? void 0 :
-            _c.viewportWidth), h("div", { key: 'f609c147e7fd9e3228b7b440507d432fe6e7c3d1' }, "ViewportHeight: ", (_d = this.store.state) === null || _d === void 0 ? void 0 :
-            _d.viewportHeight), h("div", { key: 'd07a0f4cd96f5c29a53813260b425ed056db4176' }, "ObjectsInViewport. ", this.store.objects.length), h("div", { key: 'ac39c77acee2b3ca6b6a4136fb01f3ca0215e2f9' }, "Scale: ", (_e = this.store.state) === null || _e === void 0 ? void 0 :
-            _e.scale), h("div", { key: 'dcda96e3285be12c3d62830829b61c4be19c1d83' }, "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: '0ac588ddaab0921425bffa47420abeae80ce8cbf' }, "HasViewportChanged: ", ((_h = this.store.state) === null || _h === void 0 ? void 0 : _h.hasViewportChanged) ? 'true' : 'false'), h("div", { key: '56baf174f2be1cf55c232b1dac7f3194581ffb09' }, "IsEnabled: ", ((_j = this.store.state) === null || _j === void 0 ? void 0 : _j.isEnabled) ? 'true' : 'false'), h("div", { key: 'b865e7690c228d798ff72a4bcebf7f4bd868ddd8' }, "IsScaling: ", ((_k = this.store.state) === null || _k === void 0 ? void 0 : _k.isScaling) ? 'true' : 'false'), h("div", { key: 'a5590a4c56e1f499c9ba72415567ec262b5d1ec0' }, "IsPanning: ", ((_l = this.store.state) === null || _l === void 0 ? void 0 : _l.isPanning) ? 'true' : 'false'), h("div", { key: '52945f8e10f2703d87371b63c7caf43ad98bf60e' }, "IsFocused: ", this.store.state.isFocused ? 'true' : 'false'), h("div", { key: '93c6a4ca860a8cf60c136ae1e33d55d0645dd534' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: '8cd515d5558bbc79f8a36121fc7c1ed19e506f4b' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: 'bae172be8b381e917f378a9d261fcbb4592f7dd9' }, "IsResizeHandleSelected: ", this.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: 'bcc2e0edada2a46d188c4f0133b865a1401d3181' }, "IsRotationHandleSelected: ", this.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: 'a63af8b0116a12a9f55863c9ddeb913f35ad4efa' }, "IsDrawing: ", this.store.state.isDrawing ? 'true' : 'false'), h("div", { key: '105286223979bb9081fa179b52615bf7a614f7ce' }, "IsWriting: ", this.store.state.isWriting ? 'true' : 'false'), h("div", { key: '246883d2e1e21379c1b62cd6dd75d8433e2dd538' }, "PointerX: ", (_m = this.store.state) === null || _m === void 0 ? void 0 :
-            _m.pointerX), h("div", { key: 'd49120e78afb1ad52c6c2f4a9388f69959d4d804' }, "PointerY: ", (_o = this.store.state) === null || _o === void 0 ? void 0 :
-            _o.pointerY), h("div", { key: '09012207e7dee163c2ff18010fb7aada269316d9' }, "SelectedObjects: ", ((_p = this.store.state.selectionGroup) === null || _p === void 0 ? void 0 : _p.objects.length) || 0)), h("div", { key: '62930df28cf3c374fd382efa2aac81fd827bad4d', id: "origin", class: "origin", style: {
-                transform: `matrix(${(_q = this.store.state) === null || _q === void 0 ? void 0 : _q.scale}, 0, 0, ${(_r = this.store.state) === null || _r === void 0 ? void 0 : _r.scale}, ${(_s = this.store.state) === null || _s === void 0 ? void 0 : _s.translateX}, ${(_t = this.store.state) === null || _t === void 0 ? void 0 : _t.translateY})`,
-            } }, (_u = this.store.objects) === null || _u === void 0 ? void 0 :
-            _u.map(object => {
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
-                return (h("div", { style: { transform: object === null || object === void 0 ? void 0 : object.transformationMatrix, transformOrigin: 'top left', zIndex: object.zIndex.toString(), position: 'absolute' } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", key: object.id, id: object.id, class: "object", style: {
-                        height: object === null || object === void 0 ? void 0 : object.totalHeight.toString(),
-                        width: object === null || object === void 0 ? void 0 : object.totalWidth.toString(),
-                        left: '0',
-                        top: '0',
-                        position: 'absolute',
-                        transform: `rotate(${object.rotationDegrees}deg)`,
-                        transformOrigin: 'center',
-                        opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
-                        pointerEvents: object.markedForRemoval ? 'none' : 'auto',
-                    } }, h("foreignObject", { x: "0", y: "0", width: object.totalWidth.toString(), height: object.totalHeight.toString(), style: {
-                        minHeight: '0',
-                        minWidth: '0',
-                        backgroundColor: object.backgroundColor,
-                        borderColor: object.borderColor,
-                        borderWidth: object.borderWidth + 'px',
-                        borderStyle: 'solid',
-                        padding: object.padding + 'px',
-                        overflow: 'visible',
-                    } }, KritzelClassHelper.isInstanceOf(object, 'KritzelPath') && (h("svg", { ref: el => el ? object.mount(el) : object.unmount(), xmlns: "http://www.w3.org/2000/svg", style: {
-                        height: object === null || object === void 0 ? void 0 : object.height.toString(),
-                        width: object === null || object === void 0 ? void 0 : object.width.toString(),
-                        position: 'absolute',
-                        overflow: 'visible',
-                    }, viewBox: object === null || object === void 0 ? void 0 : object.viewBox }, h("path", { d: object === null || object === void 0 ? void 0 : object.d, fill: object.fill, stroke: object === null || object === void 0 ? void 0 : object.stroke }))), KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && (h("img", { ref: el => el ? object.mount(el) : object.unmount(), src: object.src, style: {
-                        width: '100%',
-                        height: '100%',
-                        userSelect: 'none',
-                        pointerEvents: 'none',
-                    }, draggable: false, onDragStart: e => e.preventDefault() })), KritzelClassHelper.isInstanceOf(object, 'KritzelText') && (h("textarea", { ref: el => el ? object.mount(el) : object.unmount(), value: object.value, onKeyDown: event => object.handleKeyDown(event), onInput: event => object.handleInput(event), rows: object.rows, style: {
-                        width: '100%',
-                        height: '100%',
-                        color: object.fontColor,
-                        fontSize: ((_a = object.fontSize) === null || _a === void 0 ? void 0 : _a.toString()) + 'px',
-                        fontFamily: object.fontFamily,
-                        border: 'none',
-                        outline: 'none',
-                        resize: 'none',
-                        overflow: 'hidden',
-                        display: 'block',
-                        padding: '1px',
-                        whiteSpace: 'nowrap',
-                        pointerEvents: object.isReadonly ? 'none' : 'auto',
-                        cursor: object.isReadonly ? 'default' : 'text',
-                        caretColor: object.isReadonly ? 'transparent' : 'auto',
-                    } })), KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement') && (h("div", { ref: el => el ? object.mount(el) : object.unmount(), style: {
-                        width: '100%',
-                        height: '100%',
-                        pointerEvents: 'auto',
-                        overflow: 'hidden',
-                        display: 'block',
-                    } })), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') && (h("div", { ref: el => el ? object.mount(el) : object.unmount(), style: {
-                        width: '100%',
-                        height: '100%',
-                    } })), KritzelClassHelper.isInstanceOf(object, 'KrtizelSelectionBox') && (h("div", { ref: el => el ? object.mount(el) : object.unmount(), style: {
-                        width: '100%',
-                        height: '100%',
-                    } }))), h("line", { x1: "0", y1: "0", x2: object.totalWidth, y2: "0", style: {
-                        stroke: 'var(--kritzel-selection-border-color, #007AFF)',
-                        strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${(_b = this.store.state) === null || _b === void 0 ? void 0 : _b.scale})`,
-                        strokeLinecap: 'square',
-                    }, visibility: object.isSelected ? 'visible' : 'hidden' }), h("line", { x1: "0", y1: "0", x2: "0", y2: object.totalHeight, style: {
-                        stroke: 'var(--kritzel-selection-border-color, #007AFF)',
-                        strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${(_c = this.store.state) === null || _c === void 0 ? void 0 : _c.scale})`,
-                        strokeLinecap: 'square',
-                    }, visibility: object.isSelected ? 'visible' : 'hidden' }), h("line", { x1: "0", y1: object.totalHeight, x2: object.totalWidth, y2: object.totalHeight, style: {
-                        stroke: 'var(--kritzel-selection-border-color, #007AFF)',
-                        strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${(_d = this.store.state) === null || _d === void 0 ? void 0 : _d.scale})`,
-                        strokeLinecap: 'square',
-                    }, visibility: object.isSelected ? 'visible' : 'hidden' }), h("line", { x1: object.totalWidth, y1: "0", x2: object.totalWidth, y2: object.totalHeight, style: {
-                        stroke: 'var(--kritzel-selection-border-color, #007AFF)',
-                        strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${(_e = this.store.state) === null || _e === void 0 ? void 0 : _e.scale})`,
-                        strokeLinecap: 'square',
-                    }, visibility: object.isSelected ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle top-left", cx: "0", cy: "0", r: `${(baseHandleSize * object.scale) / ((_f = this.store.state) === null || _f === void 0 ? void 0 : _f.scale)}`, style: {
-                        fill: 'var(--kritzel-selection-handle-color, #000000)',
-                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle-overlay top-left", cx: "0", cy: "0", r: `${(baseHandleTouchSize * object.scale) / ((_g = this.store.state) === null || _g === void 0 ? void 0 : _g.scale)}`, style: {
-                        fill: 'transparent',
-                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle top-right", cx: object.totalWidth, cy: "0", r: `${(baseHandleSize * object.scale) / ((_h = this.store.state) === null || _h === void 0 ? void 0 : _h.scale)}`, style: {
-                        fill: 'var(--kritzel-selection-handle-color, #000000)',
-                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle-overlay top-right", cx: object.totalWidth, cy: "0", r: `${(baseHandleTouchSize * object.scale) / ((_j = this.store.state) === null || _j === void 0 ? void 0 : _j.scale)}`, style: {
-                        fill: 'transparent',
-                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle bottom-left", cx: "0", cy: object.totalHeight, r: `${(baseHandleSize * object.scale) / ((_k = this.store.state) === null || _k === void 0 ? void 0 : _k.scale)}`, style: {
-                        fill: 'var(--kritzel-selection-handle-color, #000000)',
-                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle-overlay bottom-left", cx: "0", cy: object.totalHeight, r: `${(baseHandleTouchSize * object.scale) / ((_l = this.store.state) === null || _l === void 0 ? void 0 : _l.scale)}`, style: {
-                        fill: 'transparent',
-                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle bottom-right", cx: object.totalWidth, cy: object.totalHeight, r: `${(baseHandleSize * object.scale) / ((_m = this.store.state) === null || _m === void 0 ? void 0 : _m.scale)}`, style: {
-                        fill: 'var(--kritzel-selection-handle-color, #000000)',
-                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle-overlay bottom-right", cx: object.totalWidth, cy: object.totalHeight, r: `${(baseHandleTouchSize * object.scale) / ((_o = this.store.state) === null || _o === void 0 ? void 0 : _o.scale)}`, style: {
-                        fill: 'transparent',
-                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("line", { x1: object.totalWidth / 2, y1: "0", x2: object.totalWidth / 2, y2: -((15 * object.scale) / ((_p = this.store.state) === null || _p === void 0 ? void 0 : _p.scale)), style: {
-                        stroke: 'var(--kritzel-selection-border-color, #007AFF)',
-                        strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${(_q = this.store.state) === null || _q === void 0 ? void 0 : _q.scale})`,
-                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "rotation-handle", cx: object.totalWidth / 2, cy: -((15 * object.scale) / ((_r = this.store.state) === null || _r === void 0 ? void 0 : _r.scale)), r: `${(baseHandleSize * object.scale) / ((_s = this.store.state) === null || _s === void 0 ? void 0 : _s.scale)}`, style: {
-                        fill: 'var(--kritzel-selection-handle-color, #000000)',
-                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "rotation-handle-overlay", cx: object.totalWidth / 2, cy: -((15 * object.scale) / ((_t = this.store.state) === null || _t === void 0 ? void 0 : _t.scale)), r: `${(baseHandleTouchSize * object.scale) / ((_u = this.store.state) === null || _u === void 0 ? void 0 : _u.scale)}`, style: {
-                        fill: 'transparent',
-                        cursor: 'grab',
-                    }, visibility: object.isSelected && !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.isDebugInfoVisible ? '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("div", { style: { whiteSpace: 'nowrap' } }, "x: ", object.x), h("div", { style: { whiteSpace: 'nowrap' } }, "y: ", object.y)))))));
-            }), h("svg", { key: '754094fce45e3c34dec0430215c6e29af1f5eec6', class: "object", xmlns: "http://www.w3.org/2000/svg", style: {
-                height: (_v = this.store.state.currentPath) === null || _v === void 0 ? void 0 : _v.height.toString(),
-                width: (_w = this.store.state.currentPath) === null || _w === void 0 ? void 0 : _w.width.toString(),
-                left: '0',
-                top: '0',
-                zIndex: (_x = this.store.state.currentPath) === null || _x === void 0 ? void 0 : _x.zIndex.toString(),
-                position: 'absolute',
-                transform: (_y = this.store.state.currentPath) === null || _y === void 0 ? void 0 : _y.transformationMatrix,
-                transformOrigin: 'top left',
-                overflow: 'visible',
-            }, viewBox: (_z = this.store.state.currentPath) === null || _z === void 0 ? void 0 : _z.viewBox }, h("path", { key: '738ac0a32f474973a3fe41a6dd40f03fdfe0fa2e', d: (_0 = this.store.state.currentPath) === null || _0 === void 0 ? void 0 : _0.d, fill: (_1 = this.store.state.currentPath) === null || _1 === void 0 ? void 0 : _1.fill, stroke: (_2 = this.store.state.currentPath) === null || _2 === void 0 ? void 0 : _2.stroke }))), this.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: 'f322bc10aef729232d42f0622bdc56ab76bb8a7e', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.store.state.contextMenuItems, objects: ((_3 = this.store.state.selectionGroup) === null || _3 === void 0 ? void 0 : _3.objects) || [], style: {
-                position: 'fixed',
-                left: `${this.store.state.contextMenuX}px`,
-                top: `${this.store.state.contextMenuY}px`,
-                zIndex: '10000',
-            }, onActionSelected: event => {
-                var _a;
-                event.detail.action({
-                    x: (-this.store.state.translateX + this.store.state.contextMenuX) / this.store.state.scale,
-                    y: (-this.store.state.translateY + this.store.state.contextMenuY) / this.store.state.scale,
-                }, (_a = this.store.state.selectionGroup) === null || _a === void 0 ? void 0 : _a.objects);
-                this.hideContextMenu();
-            } })), ((_4 = this.store.state) === null || _4 === void 0 ? void 0 : _4.activeTool) instanceof KritzelEraserTool && !this.store.state.isScaling && h("kritzel-cursor-trail", { key: '8025a5b432840f6859c4306568383d66c2edf33f', store: this.store })));
-    }
-    get host() { return getElement(this); }
-    static get watchers() { return {
-        "scaleMax": ["validateScaleMax"],
-        "scaleMin": ["validateScaleMin"]
-    }; }
-};
-KritzelEngine.style = kritzelEngineCss;
-
-export { KritzelEngine as kritzel_engine };
-//# sourceMappingURL=kritzel-engine.entry.esm.js.map
-
-//# sourceMappingURL=kritzel-engine.entry.js.map