kritzel-react 0.1.32 → 0.1.34

package/dist/kritzel-stencil/src/components/core/kritzel-engine/kritzel-engine.js

@@ -1,1343 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import { Component, Host, Listen, Element, Prop, Method, State, Event, Watch } from '@stencil/core';
-import { KritzelViewport } from '../../../classes/core/viewport.class';
-import { KritzelSelectionTool } from '../../../classes/tools/selection-tool.class';
-import { KritzelSelectionBox } from '../../../classes/objects/selection-box.class';
-import { KritzelKeyHandler } from '../../../classes/handlers/key.handler';
-import { KritzelBaseTool } from '../../../classes/tools/base-tool.class';
-import { KritzelEraserTool } from '../../../classes/tools/eraser-tool.class';
-import { KritzelKeyboardHelper } from '../../../helpers/keyboard.helper';
-import { KritzelContextMenuHandler } from '../../../classes/handlers/context-menu.handler';
-import { KritzelToolRegistry } from '../../../classes/registries/tool.registry';
-import { KritzelEventHelper } from '../../../helpers/event.helper';
-import { KritzelClassHelper } from '../../../helpers/class.helper';
-import { ABSOLUTE_SCALE_MAX, ABSOLUTE_SCALE_MIN } from '../../../constants/engine.constants';
-import { KritzelCore } from '../../../classes/core/core.class';
-import { KritzelDevicesHelper } from '../../../helpers/devices.helper';
-import { throttle } from 'lodash';
-import { KritzelColorHelper } from '../../../helpers/color.helper';
-import { toPng, toSvg } from 'html-to-image';
-import { KritzelThemeManager } from '../../../classes/managers/theme.manager';
-let KritzelEngine = class KritzelEngine {
-    onWorkspaceChange(newWorkspace) {
-        var _a;
-        const currentWorkspaceId = (_a = this.core.store.state.activeWorkspace) === null || _a === void 0 ? void 0 : _a.id;
-        const newWorkspaceId = newWorkspace === null || newWorkspace === void 0 ? void 0 : newWorkspace.id;
-        if (currentWorkspaceId !== newWorkspaceId) {
-            this.core.beforeWorkspaceChange();
-            this.core.initializeWorkspace(newWorkspace);
-        }
-    }
-    validateScaleMax(newValue) {
-        if (newValue > ABSOLUTE_SCALE_MAX) {
-            console.warn(`scaleMax cannot be greater than ${ABSOLUTE_SCALE_MAX}.`);
-            this.scaleMax = ABSOLUTE_SCALE_MAX;
-            this.core.store.state.scaleMax = this.scaleMax;
-        }
-        else {
-            this.core.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.core.store.state.scaleMin = this.scaleMin;
-        }
-        else {
-            this.core.store.state.scaleMin = newValue;
-        }
-    }
-    onCursorTargetChange(newValue) {
-        this.core.cursorManager.setTargetElement(newValue || document.body);
-    }
-    onLockDrawingScaleChange(newValue) {
-        this.core.store.state.lockDrawingScale = newValue;
-    }
-    onThemeChange(newValue) {
-        this.core.themeManager.setTheme(newValue);
-    }
-    triggerSelectionChange() {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.objectsSelectionChange.emit();
-        });
-    }
-    handleWheel(ev) {
-        var _a, _b;
-        if (this.core.store.isDisabled) {
-            return;
-        }
-        if (this.core.store.state.isContextMenuVisible) {
-            this.hideContextMenu();
-        }
-        this.viewport.handleWheel(ev);
-        (_b = (_a = this.core.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 (this.core.store.isDisabled) {
-            return;
-        }
-        if (KritzelDevicesHelper.isTouchDevice()) {
-            KritzelEventHelper.onLongPress(ev, (event) => this.longpress.emit(event));
-        }
-        this.host.setPointerCapture(ev.pointerId);
-        this.core.store.state.pointers.set(ev.pointerId, ev);
-        this.viewport.handlePointerDown(ev);
-        (_b = (_a = this.core.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.core.store.isDisabled) {
-            return;
-        }
-        if (this.core.store.state.pointers.has(ev.pointerId)) {
-            this.core.store.state.pointers.set(ev.pointerId, ev);
-        }
-        if (this.core.store.state.pointers.size > 1) {
-            this.throttledPointerMoveMulti(ev);
-        }
-        // Update cursor for handle hover states using elementsFromPoint
-        this.core.cursorManager.updateHoverState(ev);
-        this.viewport.handlePointerMove(ev);
-        (_b = (_a = this.core.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.core.store.isDisabled) {
-            return;
-        }
-        this.core.store.state.pointers.delete(ev.pointerId);
-        if (this.host.hasPointerCapture(ev.pointerId)) {
-            this.host.releasePointerCapture(ev.pointerId);
-        }
-        // Reset cursor to default when all pointers are released
-        if (this.core.store.state.pointers.size === 0) {
-            this.core.cursorManager.resetToDefault();
-        }
-        this.viewport.handlePointerUp(ev);
-        (_b = (_a = this.core.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.core.store.isDisabled) {
-            return;
-        }
-        if (this.host.hasPointerCapture(ev.pointerId)) {
-            this.host.releasePointerCapture(ev.pointerId);
-        }
-        this.core.store.state.pointers.delete(ev.pointerId);
-        // Reset cursor to default when all pointers are released
-        if (this.core.store.state.pointers.size === 0) {
-            this.core.cursorManager.resetToDefault();
-        }
-        this.viewport.handlePointerUp(ev);
-        (_b = (_a = this.core.store.state) === null || _a === void 0 ? void 0 : _a.activeTool) === null || _b === void 0 ? void 0 : _b.handlePointerUp(ev);
-    }
-    handleLongPress(ev) {
-        this.contextMenuHandler.handleContextMenu(ev.detail);
-    }
-    handleContextMenu(ev) {
-        ev.preventDefault();
-        if (this.core.store.isDisabled) {
-            return;
-        }
-        if (ev.pointerType === 'touch' || ev.pointerType === 'pen') {
-            return;
-        }
-        this.contextMenuHandler.handleContextMenu(ev);
-    }
-    handleResize() {
-        this.viewport.handleResize();
-    }
-    handleKeyDown(ev) {
-        if (this.core.store.isDisabled) {
-            return;
-        }
-        this.keyHandler.handleKeyDown(ev);
-    }
-    handleKeyUp(ev) {
-        if (this.core.store.isDisabled) {
-            return;
-        }
-        this.keyHandler.handleKeyUp(ev);
-    }
-    preventDoubleTapZoomOnTouchDevices(ev) {
-        ev.preventDefault();
-    }
-    registerTool(toolName, toolClass, toolConfig) {
-        return __awaiter(this, void 0, void 0, function* () {
-            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.core);
-            if (toolConfig) {
-                Object.entries(toolConfig).forEach(([key, value]) => {
-                    registeredTool[key] = value;
-                });
-            }
-            return Promise.resolve(registeredTool);
-        });
-    }
-    changeActiveTool(tool) {
-        return __awaiter(this, void 0, void 0, function* () {
-            var _a;
-            if (this.core.store.state.activeTool === tool) {
-                return;
-            }
-            (_a = this.core.store.state.activeTool) === null || _a === void 0 ? void 0 : _a.onDeactivate();
-            this.core.store.setState('activeTool', tool);
-            this.core.deselectAllObjects();
-            tool === null || tool === void 0 ? void 0 : tool.onActivate();
-        });
-    }
-    disable() {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.core.store.state.isEnabled = false;
-            this.core.rerender();
-        });
-    }
-    enable() {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.core.store.state.isEnabled = true;
-            this.core.rerender();
-        });
-    }
-    delete() {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.core.delete();
-        });
-    }
-    copy() {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.core.copy();
-        });
-    }
-    paste(x, y) {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.core.paste(x, y);
-        });
-    }
-    bringForward(object) {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.core.bringForward(object);
-        });
-    }
-    sendBackward(object) {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.core.sendBackward(object);
-        });
-    }
-    bringToFront(object) {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.core.bringToFront(object);
-        });
-    }
-    sendToBack(object) {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.core.sendToBack(object);
-        });
-    }
-    group() {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.core.group();
-        });
-    }
-    ungroup() {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.core.ungroup();
-        });
-    }
-    undo() {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.core.undo();
-        });
-    }
-    redo() {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.core.redo();
-        });
-    }
-    hideContextMenu() {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.core.store.state.pointers.clear();
-            this.core.store.state.isContextMenuVisible = false;
-            this.core.store.state.objects.remove(o => o instanceof KritzelSelectionBox);
-            this.core.store.setSelectionBox(null);
-            this.core.store.state.isSelecting = false;
-            this.core.store.state.isEnabled = true;
-            this.core.rerender();
-        });
-    }
-    getObjectById(id) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const object = this.core.store.allObjects.find(obj => obj.id === id);
-            return object || null;
-        });
-    }
-    addObject(object) {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.core.deselectAllObjects();
-            object.id = object.generateId();
-            object._core = this.core;
-            object.scale = object.scale ? object.scale : this.core.store.state.scale;
-            object.zIndex = this.core.store.currentZIndex;
-            this.core.addObject(object);
-            this.core.rerender();
-            return object;
-        });
-    }
-    updateObject(object, updatedProperties) {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.core.deselectAllObjects();
-            this.core.updateObject(object, updatedProperties);
-            this.core.rerender();
-            return object;
-        });
-    }
-    removeObject(object) {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.core.deselectAllObjects();
-            this.core.store.state.objects.remove(o => o.id === object.id);
-            this.core.rerender();
-            return object;
-        });
-    }
-    getSelectedObjects() {
-        return __awaiter(this, void 0, void 0, function* () {
-            const selectionGroup = this.core.store.selectionGroup;
-            return selectionGroup ? selectionGroup.objects : [];
-        });
-    }
-    getDisplayableShortcuts() {
-        return __awaiter(this, void 0, void 0, function* () {
-            return this.keyHandler.getDisplayableShortcuts();
-        });
-    }
-    selectObjects(objects) {
-        return __awaiter(this, void 0, void 0, function* () {
-            var _a;
-            (_a = this.core.store.state.activeTool) === null || _a === void 0 ? void 0 : _a.onDeactivate();
-            this.core.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
-            this.core.deselectAllObjects();
-            this.core.selectObjects(objects);
-        });
-    }
-    selectAllObjectsInViewport() {
-        return __awaiter(this, void 0, void 0, function* () {
-            var _a;
-            (_a = this.core.store.state.activeTool) === null || _a === void 0 ? void 0 : _a.onDeactivate();
-            this.core.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
-            this.core.deselectAllObjects();
-            this.core.selectAllObjectsInViewport();
-        });
-    }
-    clearSelection() {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.core.clearSelection();
-        });
-    }
-    centerObjectInViewport(object) {
-        return __awaiter(this, void 0, void 0, function* () {
-            object.centerInViewport();
-            this.core.updateObject(object, object);
-            this.core.rerender();
-            return object;
-        });
-    }
-    backToContent() {
-        return __awaiter(this, void 0, void 0, function* () {
-            return this.viewport.centerFitNearestContent(20);
-        });
-    }
-    getCopiedObjects() {
-        return __awaiter(this, void 0, void 0, function* () {
-            return this.core.store.state.copiedObjects || [];
-        });
-    }
-    getScreenshot() {
-        return __awaiter(this, arguments, void 0, function* (format = 'png') {
-            if (!this.host)
-                return null;
-            // Save critical state before screenshot to restore after
-            const savedState = {
-                objects: this.core.store.state.objects,
-                activeWorkspace: this.core.store.state.activeWorkspace,
-                workspaces: this.core.store.state.workspaces,
-                activeTool: this.core.store.state.activeTool,
-                isReady: this.core.store.state.isReady,
-                translateX: this.core.store.state.translateX,
-                translateY: this.core.store.state.translateY,
-                scale: this.core.store.state.scale,
-            };
-            const options = {
-                filter: (node) => {
-                    // Exclude the context menu and debug panel from the screenshot
-                    if (node.tagName === 'KRITZEL-CONTEXT-MENU') {
-                        return false;
-                    }
-                    if (node.classList && node.classList.contains('debug-panel')) {
-                        return false;
-                    }
-                    return true;
-                },
-            };
-            let result;
-            try {
-                if (format === 'svg') {
-                    result = yield toSvg(this.host, options);
-                }
-                else {
-                    result = yield toPng(this.host, options);
-                }
-            }
-            finally {
-                // Restore state after screenshot in case cloning caused any side effects
-                this.core.store.state.objects = savedState.objects;
-                this.core.store.state.activeWorkspace = savedState.activeWorkspace;
-                this.core.store.state.workspaces = savedState.workspaces;
-                this.core.store.state.activeTool = savedState.activeTool;
-                this.core.store.state.isReady = savedState.isReady;
-                this.core.store.state.translateX = savedState.translateX;
-                this.core.store.state.translateY = savedState.translateY;
-                this.core.store.state.scale = savedState.scale;
-                this.core.rerender();
-            }
-            return result;
-        });
-    }
-    exportViewportAsPng() {
-        return __awaiter(this, void 0, void 0, function* () {
-            var _a, _b;
-            try {
-                const activeWorkspaceName = ((_b = (_a = this.core.store.state) === null || _a === void 0 ? void 0 : _a.activeWorkspace) === null || _b === void 0 ? void 0 : _b.name) || 'workspace';
-                // timestamp format: YYYY-MM-DDTHH-mm-ss-sssZ, clearing colons/dots for safe filename
-                const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
-                const filename = `${activeWorkspaceName}-${timestamp}.png`;
-                const dataUrl = yield this.getScreenshot('png');
-                const link = document.createElement('a');
-                link.download = filename;
-                link.href = dataUrl;
-                link.click();
-            }
-            catch (error) {
-                console.error('Failed to export viewport as PNG:', error);
-            }
-        });
-    }
-    exportViewportAsSvg() {
-        return __awaiter(this, void 0, void 0, function* () {
-            var _a, _b;
-            try {
-                const activeWorkspaceName = ((_b = (_a = this.core.store.state) === null || _a === void 0 ? void 0 : _a.activeWorkspace) === null || _b === void 0 ? void 0 : _b.name) || 'workspace';
-                // timestamp format: YYYY-MM-DDTHH-mm-ss-sssZ, clearing colons/dots for safe filename
-                const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
-                const filename = `${activeWorkspaceName}-${timestamp}.svg`;
-                const dataUrl = yield this.getScreenshot('svg');
-                const link = document.createElement('a');
-                link.download = filename;
-                link.href = dataUrl;
-                link.click();
-            }
-            catch (error) {
-                console.error('Failed to export viewport as SVG:', error);
-            }
-        });
-    }
-    createWorkspace(workspace) {
-        return __awaiter(this, void 0, void 0, function* () {
-            yield this.core.createWorkspace(workspace);
-            this.workspacesChange.emit(this.core.store.state.workspaces);
-            return workspace;
-        });
-    }
-    updateWorkspace(workspace) {
-        return __awaiter(this, void 0, void 0, function* () {
-            yield this.core.updateWorkspace(workspace);
-            this.workspacesChange.emit(this.core.store.state.workspaces);
-        });
-    }
-    deleteWorkspace(workspace) {
-        return __awaiter(this, void 0, void 0, function* () {
-            yield this.core.deleteWorkspace(workspace);
-            this.workspacesChange.emit(this.core.store.state.workspaces);
-        });
-    }
-    getWorkspaces() {
-        return __awaiter(this, void 0, void 0, function* () {
-            return yield this.core.getWorkspaces();
-        });
-    }
-    getActiveWorkspace() {
-        return __awaiter(this, void 0, void 0, function* () {
-            return this.core.store.state.activeWorkspace;
-        });
-    }
-    get isSelecting() {
-        return this.core.store.state.activeTool instanceof KritzelSelectionTool && this.core.store.state.isSelecting;
-    }
-    get isSelectionActive() {
-        return this.core.store.state.activeTool instanceof KritzelSelectionTool && this.core.store.selectionGroup !== null;
-    }
-    constructor() {
-        this.scaleMax = ABSOLUTE_SCALE_MAX;
-        this.scaleMin = ABSOLUTE_SCALE_MIN;
-        /** When true, objects are drawn at a fixed visual size regardless of zoom level */
-        this.lockDrawingScale = true;
-        /** The current theme to apply to the editor */
-        this.theme = 'light';
-        this.forceUpdate = 0;
-        this.throttledPointerMoveMulti = throttle((ev) => {
-            var _a, _b;
-            this.viewport.handlePointerMove(ev);
-            (_b = (_a = this.core.store.state) === null || _a === void 0 ? void 0 : _a.activeTool) === null || _b === void 0 ? void 0 : _b.handlePointerMove(ev);
-        }, 16);
-        this.contextMenuElement = null;
-        this._lastHadSelectionGroup = false;
-        this.core = new KritzelCore(this);
-    }
-    disconnectedCallback() {
-        this.throttledPointerMoveMulti.cancel();
-        // Clean up current workspace's ObjectMap
-        if (this.core.store.state.objects) {
-            this.core.store.state.objects.destroy();
-        }
-        // Clean up AppStateMap (workspaces Y.Doc)
-        this.core.appStateMap.destroy();
-        // Clean up managers
-        this.core.cursorManager.cleanup();
-        this.core.themeManager.cleanup();
-    }
-    componentWillLoad() {
-        this.validateScaleMax(this.scaleMax);
-        this.validateScaleMin(this.scaleMin);
-        this.core.store.state.lockDrawingScale = this.lockDrawingScale;
-    }
-    componentDidLoad() {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.contextMenuHandler = new KritzelContextMenuHandler(this.core, this.globalContextMenuItems, this.objectContextMenuItems);
-            this.keyHandler = new KritzelKeyHandler(this.core);
-            this.viewport = new KritzelViewport(this.core, this.host);
-            // Initialize cursor manager with target element and shadow root
-            this.core.cursorManager.setTargetElement(this.cursorTarget || document.body);
-            this.core.cursorManager.setShadowRoot(this.host.shadowRoot);
-            // Initialize theme manager with kritzel-editor as target element
-            const editorElement = this.host.closest('kritzel-editor');
-            this.core.themeManager.setTargetElement(editorElement || this.host);
-            // Set sync configuration if provided
-            if (this.syncConfig) {
-                this.core.setSyncConfig(this.syncConfig);
-            }
-            // Initialize Yjs document and persistence layer
-            yield this.core.initializeYjs();
-            // Initialize workspace (will load from Yjs if available)
-            yield this.core.initializeWorkspace(this.workspace);
-            // Register callback for remote workspace changes
-            this.core.appStateMap.onRemoteChange(() => {
-                this.workspacesChange.emit(this.core.store.state.workspaces);
-            });
-            this._registerStateChangeListeners();
-            if (this.core.store.state.isReady === false) {
-                this.core.store.state.isReady = true;
-                this.isEngineReady.emit(this.core.store.state);
-            }
-        });
-    }
-    emitObjectsChange() {
-        const objects = this.core.store.allObjects;
-        const undoState = this.core.store.state.objects.undoState;
-        const hasSelectionGroup = this.core.store.selectionGroup !== null;
-        this.objectsChange.emit(objects);
-        this.undoStateChange.emit(undoState);
-        if (this._lastHadSelectionGroup !== hasSelectionGroup) {
-            this._lastHadSelectionGroup = hasSelectionGroup;
-            this.objectsSelectionChange.emit();
-        }
-    }
-    _registerStateChangeListeners() {
-        this.core.store.onStateChange('activeTool', this._handleActiveToolChange.bind(this));
-    }
-    _handleActiveToolChange(activeTool) {
-        if (!(activeTool instanceof KritzelSelectionTool)) {
-            this.core.clearSelection();
-            this.core.store.state.objects.remove(o => o instanceof KritzelSelectionBox);
-            this.core.store.setSelectionBox(null);
-            this.core.store.state.isSelecting = false;
-            this.core.store.state.isResizeHandleSelected = false;
-            this.core.store.state.isRotationHandleSelected = false;
-        }
-        this.core.store.state.skipContextMenu = false;
-        this.core.store.state.copiedObjects = null;
-        this.activeToolChange.emit(activeTool);
-        KritzelKeyboardHelper.forceHideKeyboard();
-        this.core.rerender();
-    }
-    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;
-        const currentTheme = KritzelThemeManager.getStoredTheme();
-        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;
-        const viewportCenterX = this.core.store.state.viewportWidth / 2 + this.core.store.state.translateX;
-        const viewportCenterY = this.core.store.state.viewportHeight / 2 + this.core.store.state.translateY;
-        const visibleObjects = this.core.store.objectsToRender;
-        this.core.cursorManager.applyCursor();
-        if (this.core.store.totalObjectCount > 0 && this.core.store.state.hasViewportChanged) {
-            this.objectsInViewportChange.emit(visibleObjects);
-            this.core.store.state.hasViewportChanged = false;
-        }
-        return (React.createElement(Host, null,
-            this.core.store.state.debugInfo.showViewportInfo && (React.createElement("div", { class: "debug-panel" },
-                React.createElement("div", null,
-                    "ActiveWorkspaceId: ", (_b = (_a = this.core.store.state) === null || _a === void 0 ? void 0 : _a.activeWorkspace) === null || _b === void 0 ? void 0 :
-                    _b.id),
-                React.createElement("div", null,
-                    "ActiveWorkspaceName: ", (_d = (_c = this.core.store.state) === null || _c === void 0 ? void 0 : _c.activeWorkspace) === null || _d === void 0 ? void 0 :
-                    _d.name),
-                React.createElement("div", null,
-                    "TranslateX: ", (_e = this.core.store.state) === null || _e === void 0 ? void 0 :
-                    _e.translateX),
-                React.createElement("div", null,
-                    "TranslateY: ", (_f = this.core.store.state) === null || _f === void 0 ? void 0 :
-                    _f.translateY),
-                React.createElement("div", null,
-                    "ViewportWidth: ", (_g = this.core.store.state) === null || _g === void 0 ? void 0 :
-                    _g.viewportWidth),
-                React.createElement("div", null,
-                    "ViewportHeight: ", (_h = this.core.store.state) === null || _h === void 0 ? void 0 :
-                    _h.viewportHeight),
-                React.createElement("div", null,
-                    "PointerCount: ",
-                    this.core.store.state.pointers.size),
-                React.createElement("div", null,
-                    "Scale: ", (_j = this.core.store.state) === null || _j === void 0 ? void 0 :
-                    _j.scale),
-                React.createElement("div", null,
-                    "ActiveTool: ", (_l = (_k = this.core.store.state) === null || _k === void 0 ? void 0 : _k.activeTool) === null || _l === void 0 ? void 0 :
-                    _l.name),
-                React.createElement("div", null,
-                    "HasViewportChanged: ",
-                    ((_m = this.core.store.state) === null || _m === void 0 ? void 0 : _m.hasViewportChanged) ? 'true' : 'false'),
-                React.createElement("div", null,
-                    "IsEnabled: ",
-                    ((_o = this.core.store.state) === null || _o === void 0 ? void 0 : _o.isEnabled) ? 'true' : 'false'),
-                React.createElement("div", null,
-                    "IsScaling: ",
-                    ((_p = this.core.store.state) === null || _p === void 0 ? void 0 : _p.isScaling) ? 'true' : 'false'),
-                React.createElement("div", null,
-                    "IsPanning: ",
-                    ((_q = this.core.store.state) === null || _q === void 0 ? void 0 : _q.isPanning) ? 'true' : 'false'),
-                React.createElement("div", null,
-                    "IsSelecting: ",
-                    this.isSelecting ? 'true' : 'false'),
-                React.createElement("div", null,
-                    "IsSelectionActive: ",
-                    this.isSelectionActive ? 'true' : 'false'),
-                React.createElement("div", null,
-                    "IsResizeHandleSelected: ",
-                    this.core.store.state.isResizeHandleSelected ? 'true' : 'false'),
-                React.createElement("div", null,
-                    "IsRotationHandleSelected: ",
-                    this.core.store.state.isRotationHandleSelected ? 'true' : 'false'),
-                React.createElement("div", null,
-                    "IsRotationHandleHovered: ",
-                    this.core.store.state.isRotationHandleHovered ? 'true' : 'false'),
-                React.createElement("div", null,
-                    "IsDrawing: ",
-                    this.core.store.state.isDrawing ? 'true' : 'false'),
-                React.createElement("div", null,
-                    "IsWriting: ",
-                    this.core.store.state.isWriting ? 'true' : 'false'),
-                React.createElement("div", null,
-                    "IsPointerDown: ",
-                    this.core.store.isPointerDown ? 'true' : 'false'),
-                React.createElement("div", null,
-                    "PointerX: ", (_r = this.core.store.state) === null || _r === void 0 ? void 0 :
-                    _r.pointerX),
-                React.createElement("div", null,
-                    "PointerY: ", (_s = this.core.store.state) === null || _s === void 0 ? void 0 :
-                    _s.pointerY),
-                React.createElement("div", null,
-                    "SelectedObjects: ",
-                    ((_t = this.core.store.selectionGroup) === null || _t === void 0 ? void 0 : _t.objects.length) || 0),
-                React.createElement("div", null,
-                    "ViewportCenter: (",
-                    viewportCenterX.toFixed(2),
-                    ", ",
-                    viewportCenterY.toFixed(2),
-                    ")"))),
-            React.createElement("div", { id: "origin", class: "origin", style: {
-                    transform: `matrix(${(_u = this.core.store.state) === null || _u === void 0 ? void 0 : _u.scale}, 0, 0, ${(_v = this.core.store.state) === null || _v === void 0 ? void 0 : _v.scale}, ${(_w = this.core.store.state) === null || _w === void 0 ? void 0 : _w.translateX}, ${(_x = this.core.store.state) === null || _x === void 0 ? void 0 : _x.translateY})`,
-                } }, visibleObjects === null || visibleObjects === void 0 ? void 0 :
-                visibleObjects.map(object => {
-                    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, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36;
-                    return (React.createElement("div", { key: object.id, id: object.id, class: "object", style: {
-                            transform: object === null || object === void 0 ? void 0 : object.transformationMatrix,
-                            transformOrigin: 'top left',
-                            position: 'absolute',
-                            zIndex: object.zIndex.toString(),
-                            pointerEvents: this.core.store.state.isScaling ? 'none' : 'auto',
-                        } },
-                        KritzelClassHelper.isInstanceOf(object, 'KritzelPath') && (React.createElement("svg", { ref: el => object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: {
-                                height: (object === null || object === void 0 ? void 0 : object.totalHeight) + 'px',
-                                width: (object === null || object === void 0 ? void 0 : object.totalWidth) + 'px',
-                                left: '0',
-                                top: '0',
-                                position: 'absolute',
-                                transform: object.rotationDegrees !== 0 ? `rotate(${object.rotationDegrees}deg)` : undefined,
-                                transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
-                                opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
-                                pointerEvents: object.markedForRemoval ? 'none' : 'auto',
-                                overflow: 'visible',
-                            }, viewBox: object === null || object === void 0 ? void 0 : object.viewBox },
-                            React.createElement("path", { d: object === null || object === void 0 ? void 0 : object.d, fill: KritzelColorHelper.resolveThemeColor(object.fill, currentTheme), stroke: KritzelColorHelper.resolveThemeColor(object === null || object === void 0 ? void 0 : object.stroke, currentTheme), "shape-rendering": object.isLowRes() ? 'optimizeSpeed' : 'auto' }))),
-                        KritzelClassHelper.isInstanceOf(object, 'KritzelLine') && (React.createElement("svg", { ref: el => object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: {
-                                height: (object === null || object === void 0 ? void 0 : object.totalHeight) + 'px',
-                                width: (object === null || object === void 0 ? void 0 : object.totalWidth) + 'px',
-                                left: '0',
-                                top: '0',
-                                position: 'absolute',
-                                transform: object.rotationDegrees !== 0 ? `rotate(${object.rotationDegrees}deg)` : undefined,
-                                transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
-                                opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
-                                pointerEvents: object.markedForRemoval ? 'none' : 'auto',
-                                overflow: 'visible',
-                            }, viewBox: object === null || object === void 0 ? void 0 : object.viewBox },
-                            (object.hasStartArrow || object.hasEndArrow) && (React.createElement("defs", null,
-                                object.hasStartArrow && (React.createElement("marker", { id: object.startMarkerId, markerWidth: object.getArrowSize('start'), markerHeight: object.getArrowSize('start'), refX: 0, refY: object.getArrowSize('start') / 2, orient: "auto-start-reverse", markerUnits: "userSpaceOnUse" },
-                                    React.createElement("path", { d: object.getArrowPath((_b = (_a = object.arrows) === null || _a === void 0 ? void 0 : _a.start) === null || _b === void 0 ? void 0 : _b.style), fill: object.getArrowFill('start'), transform: `scale(${object.getArrowSize('start') / 10})` }))),
-                                object.hasEndArrow && (React.createElement("marker", { id: object.endMarkerId, markerWidth: object.getArrowSize('end'), markerHeight: object.getArrowSize('end'), refX: 0, refY: object.getArrowSize('end') / 2, orient: "auto", markerUnits: "userSpaceOnUse" },
-                                    React.createElement("path", { d: object.getArrowPath((_d = (_c = object.arrows) === null || _c === void 0 ? void 0 : _c.end) === null || _d === void 0 ? void 0 : _d.style), fill: object.getArrowFill('end'), transform: `scale(${object.getArrowSize('end') / 10})` }))))),
-                            React.createElement("path", { d: this.core.anchorManager.computeClippedLinePath(object), fill: "none", stroke: "transparent", "stroke-width": Math.max((object === null || object === void 0 ? void 0 : object.strokeWidth) || 0, 10), "stroke-linecap": "round" }),
-                            React.createElement("path", { d: this.core.anchorManager.computeClippedLinePath(object), fill: "none", stroke: KritzelColorHelper.resolveThemeColor(object === null || object === void 0 ? void 0 : object.stroke, currentTheme), "stroke-width": object === null || object === void 0 ? void 0 : object.strokeWidth, "stroke-linecap": "round", "marker-start": object.hasStartArrow ? `url(#${object.startMarkerId})` : undefined, "marker-end": object.hasEndArrow ? `url(#${object.endMarkerId})` : undefined }))),
-                        KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && (React.createElement("img", { ref: el => object.mount(el), src: object.src, style: {
-                                position: 'absolute',
-                                left: '0',
-                                top: '0',
-                                width: object.totalWidth + 'px',
-                                height: object.totalHeight + 'px',
-                                transform: object.rotationDegrees !== 0 ? `rotate(${object.rotationDegrees}deg)` : undefined,
-                                transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
-                                opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
-                                pointerEvents: object.markedForRemoval ? 'none' : 'auto',
-                                backgroundColor: KritzelColorHelper.resolveThemeColor(object.backgroundColor, currentTheme),
-                                borderColor: KritzelColorHelper.resolveThemeColor(object.borderColor, currentTheme),
-                                borderWidth: object.borderWidth + 'px',
-                                borderStyle: 'solid',
-                                padding: object.padding + 'px',
-                                overflow: 'visible',
-                                userSelect: 'none',
-                                imageRendering: this.core.store.state.isScaling || this.core.store.state.isPanning ? 'pixelated' : 'auto',
-                            }, draggable: false, onDragStart: e => e.preventDefault() })),
-                        KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement') && (React.createElement("div", { ref: el => object.mount(el), style: {
-                                position: 'absolute',
-                                left: '0',
-                                top: '0',
-                                width: object.totalWidth + 'px',
-                                height: object.totalHeight + 'px',
-                                transform: object.rotationDegrees !== 0 ? `rotate(${object.rotationDegrees}deg)` : undefined,
-                                transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
-                                opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
-                                pointerEvents: object.markedForRemoval ? 'none' : 'auto',
-                                backgroundColor: KritzelColorHelper.resolveThemeColor(object.backgroundColor, currentTheme),
-                                borderColor: KritzelColorHelper.resolveThemeColor(object.borderColor, currentTheme),
-                                borderWidth: object.borderWidth + 'px',
-                                borderStyle: 'solid',
-                                padding: object.padding + 'px',
-                                overflow: 'hidden',
-                                display: 'block',
-                            } })),
-                        KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') && !this.core.displaySelectionLineUI(object) && (React.createElement("div", { ref: el => object.mount(el), style: {
-                                position: 'absolute',
-                                left: '0',
-                                top: '0',
-                                width: object.totalWidth + 'px',
-                                height: object.totalHeight + 'px',
-                                transform: object.rotationDegrees !== 0 ? `rotate(${object.rotationDegrees}deg)` : undefined,
-                                transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
-                                opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
-                                pointerEvents: object.markedForRemoval ? 'none' : 'auto',
-                            } })),
-                        KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionBox') && (React.createElement("div", { ref: el => object.mount(el), style: {
-                                position: 'absolute',
-                                left: '0',
-                                top: '0',
-                                width: object.totalWidth + 'px',
-                                height: object.totalHeight + 'px',
-                                transform: object.rotationDegrees !== 0 ? `rotate(${object.rotationDegrees}deg)` : undefined,
-                                transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
-                                opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
-                                pointerEvents: object.markedForRemoval ? 'none' : 'auto',
-                                backgroundColor: KritzelColorHelper.resolveThemeColor(object.backgroundColor, currentTheme),
-                                borderColor: KritzelColorHelper.resolveThemeColor(object.borderColor, currentTheme),
-                                borderWidth: object.borderWidth + 'px',
-                                borderStyle: 'solid',
-                            } })),
-                        KritzelClassHelper.isInstanceOf(object, 'KritzelText') && (React.createElement("div", { style: {
-                                position: 'absolute',
-                                left: '0',
-                                top: '0',
-                                width: object.totalWidth + 'px',
-                                height: object.totalHeight + 'px',
-                                transform: object.rotationDegrees !== 0 ? `rotate(${object.rotationDegrees}deg)` : undefined,
-                                transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
-                                opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
-                                pointerEvents: object.markedForRemoval ? 'none' : 'auto',
-                            } },
-                            React.createElement("div", { id: "text-object", ref: el => object.mount(el), onPointerDown: e => object.handlePointerDown(e), onPointerMove: e => object.handlePointerMove(e), onPointerUp: e => object.handlePointerUp(e), style: {
-                                    minWidth: object.initialWidth + 'px',
-                                    minHeight: object.initialHeight + 'px',
-                                    maxWidth: '500px',
-                                    height: 'auto',
-                                    width: 'max-content',
-                                    transformOrigin: 'top left',
-                                    transform: `scale(${object.scaleFactor})`,
-                                    backgroundColor: KritzelColorHelper.resolveThemeColor(object.backgroundColor, currentTheme),
-                                    overflow: 'visible',
-                                } }))),
-                        KritzelClassHelper.isInstanceOf(object, 'KritzelShape') && (React.createElement("div", { ref: el => object.mount(el), onPointerDown: e => object.handlePointerDown(e), onPointerMove: e => object.handlePointerMove(e), onPointerUp: e => object.handlePointerUp(e), style: {
-                                position: 'absolute',
-                                left: '0',
-                                top: '0',
-                                width: object.totalWidth + 'px',
-                                height: object.totalHeight + 'px',
-                                transform: object.rotationDegrees !== 0 ? `rotate(${object.rotationDegrees}deg)` : undefined,
-                                transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
-                                opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
-                                pointerEvents: object.markedForRemoval ? 'none' : 'auto',
-                                overflow: 'visible',
-                            } },
-                            React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
-                                    position: 'absolute',
-                                    top: '0',
-                                    left: '0',
-                                    width: '100%',
-                                    height: '100%',
-                                    overflow: 'visible',
-                                    pointerEvents: 'none',
-                                }, viewBox: object.viewBox, preserveAspectRatio: "none" },
-                                React.createElement("path", { d: object.getSvgPath(), fill: KritzelColorHelper.resolveThemeColor(object.fillColor, currentTheme), stroke: KritzelColorHelper.resolveThemeColor(object.strokeColor, currentTheme), "stroke-width": object.strokeWidth })),
-                            React.createElement("div", { ref: el => object.mountTextEditor(el), style: {
-                                    position: 'absolute',
-                                    top: '0',
-                                    left: '0',
-                                    width: '100%',
-                                    height: '100%',
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    justifyContent: 'center',
-                                    textAlign: 'center',
-                                    overflow: 'hidden',
-                                    pointerEvents: object.isEditing ? 'auto' : 'none',
-                                } }))),
-                        this.core.store.state.debugInfo.showObjectInfo && object.isDebugInfoVisible && (React.createElement("div", { style: {
-                                pointerEvents: 'none',
-                                position: 'absolute',
-                                left: `${object.totalWidth}px`,
-                                top: '0',
-                                zIndex: (object.zIndex + 2).toString(),
-                            } },
-                            React.createElement("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } },
-                                "Id: ",
-                                object.id),
-                            React.createElement("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } },
-                                "width: ",
-                                object.width),
-                            React.createElement("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } },
-                                "height: ",
-                                object.height),
-                            React.createElement("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } },
-                                "translateX: ",
-                                object.translateX),
-                            React.createElement("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } },
-                                "translateY: ",
-                                object.translateY),
-                            React.createElement("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } },
-                                "rotationDegrees: ",
-                                object.rotationDegrees),
-                            React.createElement("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } },
-                                "zIndex: ",
-                                object.zIndex))),
-                        (this.core.displaySelectionGroupUI(object) || this.core.displaySelectionLineUI(object)) && (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
-                                zIndex: (object.zIndex + 1).toString(),
-                                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: `${object.totalWidth / 2}px ${object.totalHeight / 2}px`,
-                                overflow: 'visible',
-                                pointerEvents: 'none',
-                            } },
-                            this.core.displaySelectionGroupUI(object) && (React.createElement("g", { class: "selection-group-ui", style: { pointerEvents: 'none' } },
-                                React.createElement("g", { class: "selection-group-borders" },
-                                    React.createElement("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} / ${(_e = this.core.store.state) === null || _e === void 0 ? void 0 : _e.scale})`,
-                                            strokeLinecap: 'square',
-                                        } }),
-                                    React.createElement("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} / ${(_f = this.core.store.state) === null || _f === void 0 ? void 0 : _f.scale})`,
-                                            strokeLinecap: 'square',
-                                        } }),
-                                    React.createElement("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} / ${(_g = this.core.store.state) === null || _g === void 0 ? void 0 : _g.scale})`,
-                                            strokeLinecap: 'square',
-                                        } }),
-                                    React.createElement("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} / ${(_h = this.core.store.state) === null || _h === void 0 ? void 0 : _h.scale})`,
-                                            strokeLinecap: 'square',
-                                        } })),
-                                !this.isSelecting && (React.createElement("g", { class: "selection-group-handles", style: { pointerEvents: 'auto' } },
-                                    React.createElement("rect", { class: "resize-handle top-left", x: `${(-(baseHandleSize - 1) * object.scale) / ((_j = this.core.store.state) === null || _j === void 0 ? void 0 : _j.scale)}`, y: `${(-(baseHandleSize - 1) * object.scale) / ((_k = this.core.store.state) === null || _k === void 0 ? void 0 : _k.scale)}`, width: `${((baseHandleSize - 1) * 2 * object.scale) / ((_l = this.core.store.state) === null || _l === void 0 ? void 0 : _l.scale)}`, height: `${((baseHandleSize - 1) * 2 * object.scale) / ((_m = this.core.store.state) === null || _m === void 0 ? void 0 : _m.scale)}`, style: {
-                                            fill: 'var(--kritzel-selection-handle-color, #ffffff)',
-                                            stroke: 'var(--kritzel-selection-handle-stroke-color, #007AFF)',
-                                            strokeWidth: `calc(2px * ${object.scale} / ${(_o = this.core.store.state) === null || _o === void 0 ? void 0 : _o.scale})`,
-                                            paintOrder: 'fill',
-                                        } }),
-                                    React.createElement("rect", { class: "resize-handle-overlay top-left", x: `${(-baseHandleTouchSize * object.scale) / ((_p = this.core.store.state) === null || _p === void 0 ? void 0 : _p.scale)}`, y: `${(-baseHandleTouchSize * object.scale) / ((_q = this.core.store.state) === null || _q === void 0 ? void 0 : _q.scale)}`, width: `${(baseHandleTouchSize * 2 * object.scale) / ((_r = this.core.store.state) === null || _r === void 0 ? void 0 : _r.scale)}`, height: `${(baseHandleTouchSize * 2 * object.scale) / ((_s = this.core.store.state) === null || _s === void 0 ? void 0 : _s.scale)}`, style: {
-                                            fill: 'transparent',
-                                            paintOrder: 'fill',
-                                        } }),
-                                    React.createElement("rect", { class: "resize-handle top-right", x: `${object.totalWidth - ((baseHandleSize - 1) * object.scale) / ((_t = this.core.store.state) === null || _t === void 0 ? void 0 : _t.scale)}`, y: `${(-(baseHandleSize - 1) * object.scale) / ((_u = this.core.store.state) === null || _u === void 0 ? void 0 : _u.scale)}`, width: `${((baseHandleSize - 1) * 2 * object.scale) / ((_v = this.core.store.state) === null || _v === void 0 ? void 0 : _v.scale)}`, height: `${((baseHandleSize - 1) * 2 * object.scale) / ((_w = this.core.store.state) === null || _w === void 0 ? void 0 : _w.scale)}`, style: {
-                                            fill: 'var(--kritzel-selection-handle-color, #ffffff)',
-                                            stroke: 'var(--kritzel-selection-handle-stroke-color, #007AFF)',
-                                            strokeWidth: `calc(2px * ${object.scale} / ${(_x = this.core.store.state) === null || _x === void 0 ? void 0 : _x.scale})`,
-                                            paintOrder: 'fill',
-                                        } }),
-                                    React.createElement("rect", { class: "resize-handle-overlay top-right", x: `${object.totalWidth - (baseHandleTouchSize * object.scale) / ((_y = this.core.store.state) === null || _y === void 0 ? void 0 : _y.scale)}`, y: `${(-baseHandleTouchSize * object.scale) / ((_z = this.core.store.state) === null || _z === void 0 ? void 0 : _z.scale)}`, width: `${(baseHandleTouchSize * 2 * object.scale) / ((_0 = this.core.store.state) === null || _0 === void 0 ? void 0 : _0.scale)}`, height: `${(baseHandleTouchSize * 2 * object.scale) / ((_1 = this.core.store.state) === null || _1 === void 0 ? void 0 : _1.scale)}`, style: {
-                                            fill: 'transparent',
-                                            paintOrder: 'fill',
-                                        } }),
-                                    React.createElement("rect", { class: "resize-handle bottom-left", x: `${(-(baseHandleSize - 1) * object.scale) / ((_2 = this.core.store.state) === null || _2 === void 0 ? void 0 : _2.scale)}`, y: `${object.totalHeight - ((baseHandleSize - 1) * object.scale) / ((_3 = this.core.store.state) === null || _3 === void 0 ? void 0 : _3.scale)}`, width: `${((baseHandleSize - 1) * 2 * object.scale) / ((_4 = this.core.store.state) === null || _4 === void 0 ? void 0 : _4.scale)}`, height: `${((baseHandleSize - 1) * 2 * object.scale) / ((_5 = this.core.store.state) === null || _5 === void 0 ? void 0 : _5.scale)}`, style: {
-                                            fill: 'var(--kritzel-selection-handle-color, #ffffff)',
-                                            stroke: 'var(--kritzel-selection-handle-stroke-color, #007AFF)',
-                                            strokeWidth: `calc(2px * ${object.scale} / ${(_6 = this.core.store.state) === null || _6 === void 0 ? void 0 : _6.scale})`,
-                                            paintOrder: 'fill',
-                                        } }),
-                                    React.createElement("rect", { class: "resize-handle-overlay bottom-left", x: `${(-baseHandleTouchSize * object.scale) / ((_7 = this.core.store.state) === null || _7 === void 0 ? void 0 : _7.scale)}`, y: `${object.totalHeight - (baseHandleTouchSize * object.scale) / ((_8 = this.core.store.state) === null || _8 === void 0 ? void 0 : _8.scale)}`, width: `${(baseHandleTouchSize * 2 * object.scale) / ((_9 = this.core.store.state) === null || _9 === void 0 ? void 0 : _9.scale)}`, height: `${(baseHandleTouchSize * 2 * object.scale) / ((_10 = this.core.store.state) === null || _10 === void 0 ? void 0 : _10.scale)}`, style: {
-                                            fill: 'transparent',
-                                            paintOrder: 'fill',
-                                        } }),
-                                    React.createElement("rect", { class: "resize-handle bottom-right", x: `${object.totalWidth - ((baseHandleSize - 1) * object.scale) / ((_11 = this.core.store.state) === null || _11 === void 0 ? void 0 : _11.scale)}`, y: `${object.totalHeight - ((baseHandleSize - 1) * object.scale) / ((_12 = this.core.store.state) === null || _12 === void 0 ? void 0 : _12.scale)}`, width: `${((baseHandleSize - 1) * 2 * object.scale) / ((_13 = this.core.store.state) === null || _13 === void 0 ? void 0 : _13.scale)}`, height: `${((baseHandleSize - 1) * 2 * object.scale) / ((_14 = this.core.store.state) === null || _14 === void 0 ? void 0 : _14.scale)}`, style: {
-                                            fill: 'var(--kritzel-selection-handle-color, #ffffff)',
-                                            stroke: 'var(--kritzel-selection-handle-stroke-color, #007AFF)',
-                                            strokeWidth: `calc(2px * ${object.scale} / ${(_15 = this.core.store.state) === null || _15 === void 0 ? void 0 : _15.scale})`,
-                                            paintOrder: 'fill',
-                                        } }),
-                                    React.createElement("rect", { class: "resize-handle-overlay bottom-right", x: `${object.totalWidth - (baseHandleTouchSize * object.scale) / ((_16 = this.core.store.state) === null || _16 === void 0 ? void 0 : _16.scale)}`, y: `${object.totalHeight - (baseHandleTouchSize * object.scale) / ((_17 = this.core.store.state) === null || _17 === void 0 ? void 0 : _17.scale)}`, width: `${(baseHandleTouchSize * 2 * object.scale) / ((_18 = this.core.store.state) === null || _18 === void 0 ? void 0 : _18.scale)}`, height: `${(baseHandleTouchSize * 2 * object.scale) / ((_19 = this.core.store.state) === null || _19 === void 0 ? void 0 : _19.scale)}`, style: {
-                                            fill: 'transparent',
-                                            paintOrder: 'fill',
-                                        } }),
-                                    React.createElement("line", { x1: object.totalWidth / 2, y1: "0", x2: object.totalWidth / 2, y2: -((15 * object.scale) / ((_20 = this.core.store.state) === null || _20 === void 0 ? void 0 : _20.scale)), style: {
-                                            stroke: 'var(--kritzel-selection-border-color, #007AFF)',
-                                            strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${(_21 = this.core.store.state) === null || _21 === void 0 ? void 0 : _21.scale})`,
-                                        } }),
-                                    React.createElement("circle", { class: "rotation-handle", cx: object.totalWidth / 2, cy: -((15 * object.scale) / ((_22 = this.core.store.state) === null || _22 === void 0 ? void 0 : _22.scale)), r: `${((baseHandleSize - 1) * object.scale) / ((_23 = this.core.store.state) === null || _23 === void 0 ? void 0 : _23.scale)}`, style: {
-                                            fill: 'var(--kritzel-selection-handle-color, #ffffff)',
-                                            stroke: 'var(--kritzel-selection-handle-stroke-color, #007AFF)',
-                                            strokeWidth: `calc(2px * ${object.scale} / ${(_24 = this.core.store.state) === null || _24 === void 0 ? void 0 : _24.scale})`,
-                                            paintOrder: 'fill',
-                                        } }),
-                                    React.createElement("circle", { class: "rotation-handle-overlay", cx: object.totalWidth / 2, cy: -((15 * object.scale) / ((_25 = this.core.store.state) === null || _25 === void 0 ? void 0 : _25.scale)), r: `${(baseHandleTouchSize * object.scale) / ((_26 = this.core.store.state) === null || _26 === void 0 ? void 0 : _26.scale)}`, style: {
-                                            fill: 'transparent',
-                                            paintOrder: 'fill',
-                                        } }))))),
-                            this.core.displaySelectionLineUI(object) && KritzelClassHelper.isInstanceOf(object, 'KritzelLine') && (React.createElement("g", { class: "selection-line-ui", style: { pointerEvents: 'none' } },
-                                React.createElement("g", { class: "selection-line-borders" },
-                                    React.createElement("path", { class: "selection-line-border", d: this.core.anchorManager.computeClippedLinePath(object, true), style: {
-                                            stroke: 'var(--kritzel-selection-border-color, #007AFF)',
-                                            strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${(_27 = this.core.store.state) === null || _27 === void 0 ? void 0 : _27.scale})`,
-                                            strokeLinecap: 'round',
-                                            fill: 'none',
-                                        } })),
-                                !this.isSelecting && (React.createElement("g", { class: "selection-line-handles", style: { pointerEvents: 'auto' } },
-                                    React.createElement("circle", { class: "selection-line-handle start", cx: object.startX - object.x, cy: object.startY - object.y, r: `${((baseHandleSize - 1) * object.scale) / ((_28 = this.core.store.state) === null || _28 === void 0 ? void 0 : _28.scale)}`, style: {
-                                            fill: 'var(--kritzel-selection-handle-color, #000000)',
-                                            stroke: 'var(--kritzel-selection-handle-stroke-color, #007AFF)',
-                                            strokeWidth: `calc(2px * ${object.scale} / ${(_29 = this.core.store.state) === null || _29 === void 0 ? void 0 : _29.scale})`,
-                                            paintOrder: 'fill',
-                                        } }),
-                                    React.createElement("circle", { class: "selection-line-handle-overlay start", cx: object.startX - object.x, cy: object.startY - object.y, r: `${(baseHandleTouchSize * object.scale) / ((_30 = this.core.store.state) === null || _30 === void 0 ? void 0 : _30.scale)}`, style: {
-                                            fill: 'transparent',
-                                            paintOrder: 'fill',
-                                        } }),
-                                    React.createElement("circle", { class: "selection-line-handle center", cx: object.controlX !== undefined
-                                            ? (object.startX + 2 * object.controlX + object.endX) / 4 - object.x
-                                            : (object.startX - object.x + object.endX - object.x) / 2, cy: object.controlY !== undefined
-                                            ? (object.startY + 2 * object.controlY + object.endY) / 4 - object.y
-                                            : (object.startY - object.y + object.endY - object.y) / 2, r: `${((baseHandleSize - 1) * object.scale) / ((_31 = this.core.store.state) === null || _31 === void 0 ? void 0 : _31.scale)}`, style: {
-                                            fill: 'var(--kritzel-selection-handle-color, #000000)',
-                                            stroke: 'var(--kritzel-selection-handle-stroke-color, #007AFF)',
-                                            strokeWidth: `calc(2px * ${object.scale} / ${(_32 = this.core.store.state) === null || _32 === void 0 ? void 0 : _32.scale})`,
-                                            paintOrder: 'fill',
-                                        } }),
-                                    React.createElement("circle", { class: "selection-line-handle-overlay center", cx: object.controlX !== undefined
-                                            ? (object.startX + 2 * object.controlX + object.endX) / 4 - object.x
-                                            : (object.startX - object.x + object.endX - object.x) / 2, cy: object.controlY !== undefined
-                                            ? (object.startY + 2 * object.controlY + object.endY) / 4 - object.y
-                                            : (object.startY - object.y + object.endY - object.y) / 2, r: `${(baseHandleTouchSize * object.scale) / ((_33 = this.core.store.state) === null || _33 === void 0 ? void 0 : _33.scale)}`, style: {
-                                            fill: 'transparent',
-                                            paintOrder: 'fill',
-                                        } }),
-                                    React.createElement("circle", { class: "selection-line-handle end", cx: object.endX - object.x, cy: object.endY - object.y, r: `${((baseHandleSize - 1) * object.scale) / ((_34 = this.core.store.state) === null || _34 === void 0 ? void 0 : _34.scale)}`, style: {
-                                            fill: 'var(--kritzel-selection-handle-color, #000000)',
-                                            stroke: 'var(--kritzel-selection-handle-stroke-color, #007AFF)',
-                                            strokeWidth: `calc(2px * ${object.scale} / ${(_35 = this.core.store.state) === null || _35 === void 0 ? void 0 : _35.scale})`,
-                                            paintOrder: 'fill',
-                                        } }),
-                                    React.createElement("circle", { class: "selection-line-handle-overlay end", cx: object.endX - object.x, cy: object.endY - object.y, r: `${(baseHandleTouchSize * object.scale) / ((_36 = this.core.store.state) === null || _36 === void 0 ? void 0 : _36.scale)}`, style: {
-                                            fill: 'transparent',
-                                            paintOrder: 'fill',
-                                        } })))))))));
-                }),
-                (() => {
-                    const data = this.core.anchorManager.getAnchorLinesRenderData();
-                    if (!data)
-                        return null;
-                    return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", class: "anchor-lines", style: {
-                            position: 'absolute',
-                            left: '0',
-                            top: '0',
-                            width: '1px',
-                            height: '1px',
-                            pointerEvents: 'none',
-                            zIndex: '9998',
-                            overflow: 'visible',
-                        } },
-                        data.startAnchorViz && (React.createElement("g", { class: "anchor-line-start" },
-                            data.startAnchorViz.pathD ? (React.createElement("path", { d: data.startAnchorViz.pathD, style: {
-                                    stroke: 'var(--kritzel-snap-line-stroke, rgba(0, 0, 0, 0.3))',
-                                    strokeWidth: `${data.lineStrokeWidth}`,
-                                    strokeDasharray: data.dashArray,
-                                    strokeLinecap: 'round',
-                                    fill: 'none',
-                                } })) : (React.createElement("line", { x1: data.startAnchorViz.edgeX, y1: data.startAnchorViz.edgeY, x2: data.startAnchorViz.centerX, y2: data.startAnchorViz.centerY, style: {
-                                    stroke: 'var(--kritzel-snap-line-stroke, rgba(0, 0, 0, 0.3))',
-                                    strokeWidth: `${data.lineStrokeWidth}`,
-                                    strokeDasharray: data.dashArray,
-                                    strokeLinecap: 'round',
-                                } })),
-                            React.createElement("circle", { cx: data.startAnchorViz.centerX, cy: data.startAnchorViz.centerY, r: data.indicatorRadius, style: {
-                                    fill: 'var(--kritzel-snap-indicator-fill, rgba(0, 0, 0))',
-                                    stroke: 'var(--kritzel-snap-indicator-stroke, #007bff)',
-                                    strokeWidth: data.indicatorStrokeWidth,
-                                } }))),
-                        data.endAnchorViz && (React.createElement("g", { class: "anchor-line-end" },
-                            data.endAnchorViz.pathD ? (React.createElement("path", { d: data.endAnchorViz.pathD, style: {
-                                    stroke: 'var(--kritzel-snap-line-stroke, rgba(0, 0, 0, 0.2))',
-                                    strokeWidth: `${data.lineStrokeWidth}`,
-                                    strokeDasharray: data.dashArray,
-                                    strokeLinecap: 'round',
-                                    fill: 'none',
-                                } })) : (React.createElement("line", { x1: data.endAnchorViz.edgeX, y1: data.endAnchorViz.edgeY, x2: data.endAnchorViz.centerX, y2: data.endAnchorViz.centerY, style: {
-                                    stroke: 'var(--kritzel-snap-line-stroke, rgba(0, 0, 0, 0.2))',
-                                    strokeWidth: `${data.lineStrokeWidth}`,
-                                    strokeDasharray: data.dashArray,
-                                    strokeLinecap: 'round',
-                                } })),
-                            React.createElement("circle", { cx: data.endAnchorViz.centerX, cy: data.endAnchorViz.centerY, r: data.indicatorRadius, style: {
-                                    fill: 'var(--kritzel-snap-indicator-fill, rgba(59, 130, 246, 0.3))',
-                                    stroke: 'var(--kritzel-snap-indicator-stroke, #007bff)',
-                                    strokeWidth: data.indicatorStrokeWidth,
-                                } })))));
-                })(),
-                (() => {
-                    const data = this.core.anchorManager.getSnapIndicatorRenderData();
-                    if (!data)
-                        return null;
-                    return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", class: "snap-indicator", style: {
-                            position: 'absolute',
-                            left: '0',
-                            top: '0',
-                            width: '1px',
-                            height: '1px',
-                            pointerEvents: 'none',
-                            zIndex: '9999',
-                            overflow: 'visible',
-                        } },
-                        React.createElement("g", null,
-                            data.snapLinePath ? (React.createElement("path", { d: data.snapLinePath, fill: "none", style: {
-                                    stroke: 'var(--kritzel-snap-line-stroke, rgba(0, 0, 0, 0.2))',
-                                    strokeWidth: data.lineStrokeWidth,
-                                    strokeDasharray: data.dashArray,
-                                    strokeLinecap: 'round',
-                                } })) : (data.edgeX !== undefined &&
-                                data.edgeY !== undefined && (React.createElement("line", { x1: data.edgeX, y1: data.edgeY, x2: data.centerX, y2: data.centerY, style: {
-                                    stroke: 'var(--kritzel-snap-line-stroke, rgba(0, 0, 0, 0.2))',
-                                    strokeWidth: data.lineStrokeWidth,
-                                    strokeDasharray: data.dashArray,
-                                    strokeLinecap: 'round',
-                                } }))),
-                            React.createElement("circle", { cx: data.centerX, cy: data.centerY, r: data.indicatorRadius, style: {
-                                    fill: 'var(--kritzel-snap-indicator-fill, rgba(59, 130, 246, 0.3))',
-                                    stroke: 'var(--kritzel-snap-indicator-stroke, #007bff)',
-                                    strokeWidth: data.indicatorStrokeWidth,
-                                } }))));
-                })()),
-            this.core.store.state.isContextMenuVisible && (React.createElement("kritzel-context-menu", { class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.core.store.state.contextMenuItems, objects: ((_y = this.core.store.selectionGroup) === null || _y === void 0 ? void 0 : _y.objects) || [], style: {
-                    position: 'fixed',
-                    left: `${this.core.store.state.contextMenuX}px`,
-                    top: `${this.core.store.state.contextMenuY}px`,
-                    zIndex: '10002',
-                }, onActionSelected: event => {
-                    var _a;
-                    event.detail.action({
-                        x: (-this.core.store.state.translateX + this.core.store.state.contextMenuX) / this.core.store.state.scale,
-                        y: (-this.core.store.state.translateY + this.core.store.state.contextMenuY) / this.core.store.state.scale,
-                    }, (_a = this.core.store.selectionGroup) === null || _a === void 0 ? void 0 : _a.objects);
-                    this.hideContextMenu();
-                }, onClose: () => this.hideContextMenu() })),
-            ((_z = this.core.store.state) === null || _z === void 0 ? void 0 : _z.activeTool) instanceof KritzelEraserTool && !this.core.store.state.isScaling && React.createElement("kritzel-cursor-trail", { core: this.core })));
-    }
-};
-__decorate([
-    Element()
-], KritzelEngine.prototype, "host", void 0);
-__decorate([
-    Prop()
-], KritzelEngine.prototype, "workspace", void 0);
-__decorate([
-    Prop()
-], KritzelEngine.prototype, "syncConfig", void 0);
-__decorate([
-    Watch('workspace')
-], KritzelEngine.prototype, "onWorkspaceChange", null);
-__decorate([
-    Prop()
-], KritzelEngine.prototype, "activeTool", void 0);
-__decorate([
-    Prop()
-], KritzelEngine.prototype, "globalContextMenuItems", void 0);
-__decorate([
-    Prop()
-], KritzelEngine.prototype, "objectContextMenuItems", void 0);
-__decorate([
-    Prop({ mutable: true })
-], KritzelEngine.prototype, "scaleMax", void 0);
-__decorate([
-    Watch('scaleMax')
-], KritzelEngine.prototype, "validateScaleMax", null);
-__decorate([
-    Prop({ mutable: true })
-], KritzelEngine.prototype, "scaleMin", void 0);
-__decorate([
-    Watch('scaleMin')
-], KritzelEngine.prototype, "validateScaleMin", null);
-__decorate([
-    Prop()
-], KritzelEngine.prototype, "cursorTarget", void 0);
-__decorate([
-    Watch('cursorTarget')
-], KritzelEngine.prototype, "onCursorTargetChange", null);
-__decorate([
-    Prop()
-], KritzelEngine.prototype, "lockDrawingScale", void 0);
-__decorate([
-    Watch('lockDrawingScale')
-], KritzelEngine.prototype, "onLockDrawingScaleChange", null);
-__decorate([
-    Prop()
-], KritzelEngine.prototype, "theme", void 0);
-__decorate([
-    Watch('theme')
-], KritzelEngine.prototype, "onThemeChange", null);
-__decorate([
-    Event()
-], KritzelEngine.prototype, "isEngineReady", void 0);
-__decorate([
-    Event()
-], KritzelEngine.prototype, "activeToolChange", void 0);
-__decorate([
-    Event()
-], KritzelEngine.prototype, "objectsSelectionChange", void 0);
-__decorate([
-    Event()
-], KritzelEngine.prototype, "workspacesChange", void 0);
-__decorate([
-    Event()
-], KritzelEngine.prototype, "longpress", void 0);
-__decorate([
-    Event()
-], KritzelEngine.prototype, "objectsChange", void 0);
-__decorate([
-    Event()
-], KritzelEngine.prototype, "undoStateChange", void 0);
-__decorate([
-    Event()
-], KritzelEngine.prototype, "objectsInViewportChange", void 0);
-__decorate([
-    State()
-], KritzelEngine.prototype, "forceUpdate", void 0);
-__decorate([
-    Method()
-], KritzelEngine.prototype, "triggerSelectionChange", null);
-__decorate([
-    Listen('wheel', { passive: true })
-], KritzelEngine.prototype, "handleWheel", null);
-__decorate([
-    Listen('pointerdown', { passive: false })
-], KritzelEngine.prototype, "handlePointerDown", null);
-__decorate([
-    Listen('pointermove', { passive: false })
-], KritzelEngine.prototype, "handlePointerMove", null);
-__decorate([
-    Listen('pointerup', { passive: false })
-], KritzelEngine.prototype, "handlePointerUp", null);
-__decorate([
-    Listen('pointercancel', { passive: false })
-], KritzelEngine.prototype, "handlePointerCancel", null);
-__decorate([
-    Listen('longpress', { passive: true })
-], KritzelEngine.prototype, "handleLongPress", null);
-__decorate([
-    Listen('contextmenu', { capture: false })
-], KritzelEngine.prototype, "handleContextMenu", null);
-__decorate([
-    Listen('resize', { target: 'window' })
-], KritzelEngine.prototype, "handleResize", null);
-__decorate([
-    Listen('keydown', { target: 'window' })
-], KritzelEngine.prototype, "handleKeyDown", null);
-__decorate([
-    Listen('keyup', { target: 'window' })
-], KritzelEngine.prototype, "handleKeyUp", null);
-__decorate([
-    Listen('dblclick', { target: 'document' })
-], KritzelEngine.prototype, "preventDoubleTapZoomOnTouchDevices", null);
-__decorate([
-    Method()
-], KritzelEngine.prototype, "registerTool", null);
-__decorate([
-    Method()
-], KritzelEngine.prototype, "changeActiveTool", null);
-__decorate([
-    Method()
-], KritzelEngine.prototype, "disable", null);
-__decorate([
-    Method()
-], KritzelEngine.prototype, "enable", null);
-__decorate([
-    Method()
-], KritzelEngine.prototype, "delete", null);
-__decorate([
-    Method()
-], KritzelEngine.prototype, "copy", null);
-__decorate([
-    Method()
-], KritzelEngine.prototype, "paste", null);
-__decorate([
-    Method()
-], KritzelEngine.prototype, "bringForward", null);
-__decorate([
-    Method()
-], KritzelEngine.prototype, "sendBackward", null);
-__decorate([
-    Method()
-], KritzelEngine.prototype, "bringToFront", null);
-__decorate([
-    Method()
-], KritzelEngine.prototype, "sendToBack", null);
-__decorate([
-    Method()
-], KritzelEngine.prototype, "group", null);
-__decorate([
-    Method()
-], KritzelEngine.prototype, "ungroup", null);
-__decorate([
-    Method()
-], KritzelEngine.prototype, "undo", null);
-__decorate([
-    Method()
-], KritzelEngine.prototype, "redo", null);
-__decorate([
-    Method()
-], KritzelEngine.prototype, "hideContextMenu", null);
-__decorate([
-    Method()
-], KritzelEngine.prototype, "getObjectById", null);
-__decorate([
-    Method()
-], KritzelEngine.prototype, "addObject", null);
-__decorate([
-    Method()
-], KritzelEngine.prototype, "updateObject", null);
-__decorate([
-    Method()
-], KritzelEngine.prototype, "removeObject", null);
-__decorate([
-    Method()
-], KritzelEngine.prototype, "getSelectedObjects", null);
-__decorate([
-    Method()
-], KritzelEngine.prototype, "getDisplayableShortcuts", null);
-__decorate([
-    Method()
-], KritzelEngine.prototype, "selectObjects", null);
-__decorate([
-    Method()
-], KritzelEngine.prototype, "selectAllObjectsInViewport", null);
-__decorate([
-    Method()
-], KritzelEngine.prototype, "clearSelection", null);
-__decorate([
-    Method()
-], KritzelEngine.prototype, "centerObjectInViewport", null);
-__decorate([
-    Method()
-], KritzelEngine.prototype, "backToContent", null);
-__decorate([
-    Method()
-], KritzelEngine.prototype, "getCopiedObjects", null);
-__decorate([
-    Method()
-], KritzelEngine.prototype, "getScreenshot", null);
-__decorate([
-    Method()
-], KritzelEngine.prototype, "exportViewportAsPng", null);
-__decorate([
-    Method()
-], KritzelEngine.prototype, "exportViewportAsSvg", null);
-__decorate([
-    Method()
-], KritzelEngine.prototype, "createWorkspace", null);
-__decorate([
-    Method()
-], KritzelEngine.prototype, "updateWorkspace", null);
-__decorate([
-    Method()
-], KritzelEngine.prototype, "deleteWorkspace", null);
-__decorate([
-    Method()
-], KritzelEngine.prototype, "getWorkspaces", null);
-__decorate([
-    Method()
-], KritzelEngine.prototype, "getActiveWorkspace", null);
-KritzelEngine = __decorate([
-    Component({
-        tag: 'kritzel-engine',
-        styleUrl: 'kritzel-engine.css',
-        shadow: true,
-    })
-], KritzelEngine);
-export { KritzelEngine };