kritzel-react 0.1.30 → 0.1.32

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

@@ -0,0 +1,1343 @@
+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 };