kritzel-stencil 0.0.124 → 0.0.126

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

@@ -0,0 +1,1318 @@
+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