kritzel-react 0.1.30 → 0.1.32

package/dist/kritzel-stencil/src/classes/core/reviver.class.js

@@ -0,0 +1,97 @@
+import { KritzelImage } from "../objects/image.class";
+import { KritzelLine } from "../objects/line.class";
+import { KritzelPath } from "../objects/path.class";
+import { KritzelShape } from "../objects/shape.class";
+import { KritzelSelectionGroup } from "../objects/selection-group.class";
+import { KritzelGroup } from "../objects/group.class";
+import { KritzelText } from "../objects/text.class";
+import { KritzelBrushTool } from "../tools/brush-tool.class";
+import { KritzelEraserTool } from "../tools/eraser-tool.class";
+import { KritzelImageTool } from "../tools/image-tool.class";
+import { KritzelLineTool } from "../tools/line-tool.class";
+import { KritzelSelectionTool } from "../tools/selection-tool.class";
+import { KritzelTextTool } from "../tools/text-tool.class";
+import { KritzelShapeTool } from "../tools/shape-tool.class";
+import { KritzelCustomElement } from "../objects/custom-element.class";
+import { KritzelWorkspace } from "../..";
+export class KritzelReviver {
+    constructor(core) {
+        this._core = core;
+    }
+    revive(obj) {
+        if (obj && typeof obj === 'object') {
+            if (obj.__class__) {
+                let revivedObj;
+                switch (obj.__class__) {
+                    case 'KritzelPath':
+                        revivedObj = KritzelPath.create(this._core).deserialize(obj);
+                        break;
+                    case 'KritzelLine':
+                        revivedObj = KritzelLine.create(this._core).deserialize(obj);
+                        break;
+                    case 'KritzelText':
+                        revivedObj = KritzelText.create(this._core, obj.fontSize, obj.fontFamily).deserialize(obj);
+                        break;
+                    case 'KritzelShape':
+                        revivedObj = KritzelShape.create(this._core, {
+                            shapeType: obj.shapeType,
+                            fillColor: obj.fillColor,
+                            strokeColor: obj.strokeColor,
+                            strokeWidth: obj.strokeWidth,
+                            fontSize: obj.fontSize,
+                            fontFamily: obj.fontFamily,
+                            fontColor: obj.fontColor,
+                        }).deserialize(obj);
+                        break;
+                    case 'KritzelImage':
+                        revivedObj = KritzelImage.create(this._core).deserialize(obj);
+                        break;
+                    case 'KritzelCustomElement':
+                        revivedObj = KritzelCustomElement.create(this._core).deserialize(obj);
+                        break;
+                    case 'KritzelSelectionGroup':
+                        revivedObj = KritzelSelectionGroup.create(this._core).deserialize(obj);
+                        break;
+                    case 'KritzelGroup':
+                        revivedObj = KritzelGroup.create(this._core).deserialize(obj);
+                        break;
+                    case 'KritzelWorkspace':
+                        revivedObj = KritzelWorkspace.create(this._core, obj).deserialize(obj);
+                        break;
+                    case 'KritzelBrushTool':
+                        revivedObj = new KritzelBrushTool(this._core);
+                        break;
+                    case 'KritzelEraserTool':
+                        revivedObj = new KritzelEraserTool(this._core);
+                        break;
+                    case 'KritzelImageTool':
+                        revivedObj = new KritzelImageTool(this._core);
+                        break;
+                    case 'KritzelSelectionTool':
+                        revivedObj = new KritzelSelectionTool(this._core);
+                        break;
+                    case 'KritzelTextTool':
+                        revivedObj = new KritzelTextTool(this._core);
+                        break;
+                    case 'KritzelLineTool':
+                        revivedObj = new KritzelLineTool(this._core);
+                        break;
+                    case 'KritzelShapeTool':
+                        revivedObj = new KritzelShapeTool(this._core);
+                        break;
+                    default:
+                        revivedObj = obj;
+                }
+                return revivedObj;
+            }
+            const newObj = Array.isArray(obj) ? [] : {};
+            for (const key in obj) {
+                if (Object.prototype.hasOwnProperty.call(obj, key)) {
+                    newObj[key] = this.revive(obj[key]);
+                }
+            }
+            return newObj;
+        }
+        return obj;
+    }
+}

package/dist/kritzel-stencil/src/classes/core/store.class.js

@@ -0,0 +1,153 @@
+import { KritzelSelectionGroup } from '../objects/selection-group.class';
+import { KritzelSelectionBox } from '../objects/selection-box.class';
+import { KritzelText } from '../objects/text.class';
+import { KritzelShape } from '../objects/shape.class';
+import { KritzelPath } from '../objects/path.class';
+import { KritzelLine } from '../objects/line.class';
+import { KritzelObjectMap } from '../structures/object-map.structure';
+export class KritzelStore {
+    get state() {
+        return this._state;
+    }
+    get currentZIndex() {
+        return Math.max(0, ...this._state.objects.filter(o => !(o instanceof KritzelSelectionGroup) && !(o instanceof KritzelSelectionBox)).map(o => o.zIndex)) + 1;
+    }
+    get totalObjectCount() {
+        return this._state.objects.totalCount;
+    }
+    get allObjects() {
+        return this._state.objects.allObjects();
+    }
+    get objectsInViewport() {
+        const viewportBounds = {
+            x: -this._state.translateX / this._state.scale,
+            y: -this._state.translateY / this._state.scale,
+            z: this._state.scale,
+            width: this._state.viewportWidth / this._state.scale,
+            height: this._state.viewportHeight / this._state.scale,
+            depth: 100,
+        };
+        return this._state.objects
+            .query(viewportBounds)
+            .filter(obj => !(obj instanceof KritzelSelectionGroup) && !(obj instanceof KritzelSelectionBox))
+            .sort((a, b) => a.zIndex - b.zIndex);
+    }
+    get objectsToRender() {
+        const objects = this.objectsInViewport;
+        // Add selection objects explicitly since they are filtered out of objectsInViewport
+        const selectionGroup = this.selectionGroup;
+        if (selectionGroup) {
+            objects.push(selectionGroup);
+        }
+        const selectionBox = this.selectionBox;
+        if (selectionBox) {
+            objects.push(selectionBox);
+        }
+        // Sort combined list by zIndex to ensure correct rendering order
+        // This is fast since objectsInViewport is already small compared to allObjects
+        return objects.sort((a, b) => a.zIndex - b.zIndex);
+    }
+    get allNonSelectionObjects() {
+        return this._state.objects.allObjects().filter(o => !(o instanceof KritzelSelectionGroup) && !(o instanceof KritzelSelectionBox));
+    }
+    get selectedObjects() {
+        return this.allObjects.filter(o => !(o instanceof KritzelSelectionGroup)).filter(o => o.isSelected);
+    }
+    get selectionBox() {
+        if (this._selectionBoxCacheValid) {
+            return this._cachedSelectionBox;
+        }
+        const selectionBoxes = this._state.objects.filter(o => o instanceof KritzelSelectionBox);
+        this._cachedSelectionBox = selectionBoxes.length > 0 ? selectionBoxes[0] : null;
+        this._selectionBoxCacheValid = true;
+        return this._cachedSelectionBox;
+    }
+    get selectionGroup() {
+        if (this._selectionGroupCacheValid) {
+            return this._cachedSelectionGroup;
+        }
+        const selectionGroups = this._state.objects.filter(o => o instanceof KritzelSelectionGroup);
+        this._cachedSelectionGroup = selectionGroups.length > 0 ? selectionGroups[0] : null;
+        this._selectionGroupCacheValid = true;
+        return this._cachedSelectionGroup;
+    }
+    /**
+     * Invalidate cached selection objects. Call this when selection objects are inserted or removed.
+     */
+    invalidateSelectionCache() {
+        this._selectionBoxCacheValid = false;
+        this._selectionGroupCacheValid = false;
+    }
+    /**
+     * Directly set the cached selection box reference for O(1) access.
+     * Use this when creating the selection box to avoid a filter lookup.
+     */
+    setSelectionBox(box) {
+        this._cachedSelectionBox = box;
+        this._selectionBoxCacheValid = true;
+    }
+    /**
+     * Directly set the cached selection group reference for O(1) access.
+     * Use this when creating the selection group to avoid a filter lookup.
+     */
+    setSelectionGroup(group) {
+        this._cachedSelectionGroup = group;
+        this._selectionGroupCacheValid = true;
+    }
+    get activeText() {
+        const activeTexts = this._state.objects.filter(o => o instanceof KritzelText && o.isEditing);
+        return activeTexts.length > 0 ? activeTexts[0] : null;
+    }
+    get activeShape() {
+        const activeShapes = this._state.objects.filter(o => o instanceof KritzelShape && o.isEditing);
+        return activeShapes.length > 0 ? activeShapes[0] : null;
+    }
+    get currentPath() {
+        const drawingPaths = this._state.objects.filter(o => o instanceof KritzelPath && o.isCompleted === false);
+        return drawingPaths.length > 0 ? drawingPaths[0] : null;
+    }
+    get currentLine() {
+        const drawingLines = this._state.objects.filter(o => o instanceof KritzelLine && o.isCompleted === false);
+        return drawingLines.length > 0 ? drawingLines[0] : null;
+    }
+    get offsetX() {
+        return this._state.host.getBoundingClientRect().left;
+    }
+    get offsetY() {
+        return this._state.host.getBoundingClientRect().top;
+    }
+    get isDisabled() {
+        return this._state.isEnabled === false || this._state.isReady === false || this._state.activeWorkspace === null;
+    }
+    get isPointerDown() {
+        return this._state.pointers.size > 0;
+    }
+    constructor(state) {
+        this._listeners = new Map();
+        // Cached references for O(1) access to frequently accessed special objects
+        this._cachedSelectionBox = null;
+        this._cachedSelectionGroup = null;
+        this._selectionBoxCacheValid = false;
+        this._selectionGroupCacheValid = false;
+        this._state = state;
+        this._state.objects = new KritzelObjectMap();
+    }
+    onStateChange(property, listener) {
+        if (!this._listeners.has(property)) {
+            this._listeners.set(property, new Set());
+        }
+        this._listeners.get(property).add(listener);
+    }
+    getState(property) {
+        return this._state[property];
+    }
+    setState(property, value) {
+        const oldValue = this._state[property];
+        if (oldValue !== value) {
+            this._state[property] = value;
+            if (this._listeners.has(property)) {
+                this._listeners.get(property).forEach(listener => listener(value, oldValue, String(property)));
+            }
+        }
+    }
+}

package/dist/kritzel-stencil/src/classes/core/viewport.class.js

@@ -0,0 +1,311 @@
+import { KritzelMouseButton } from '../../enums/event-button.enum';
+import { KritzelSelectionBox } from '../objects/selection-box.class';
+import { debounce } from 'lodash';
+export class KritzelViewport {
+    constructor(core, host) {
+        this._animationFrameId = null;
+        this.initialTouchDistance = 0;
+        this.startX = 0;
+        this.startY = 0;
+        this._core = core;
+        this._core.store.state.host = host;
+        this._core.store.state.viewportWidth = host.clientWidth;
+        this._core.store.state.viewportHeight = host.clientHeight;
+        this._core.store.state.startX = 0;
+        this._core.store.state.startY = 0;
+        this._core.store.state.translateX = 0;
+        this._core.store.state.translateY = 0;
+        this._debounceUpdate = debounce(() => {
+            this._core.updateWorkspaceViewport(this._core.store.state.translateX, this._core.store.state.translateY, this._core.store.state.scale);
+        }, 300);
+        this._debounceEndScaling = debounce(() => {
+            this._core.store.state.isScaling = false;
+            this._core.rerender();
+        }, 100);
+    }
+    /**
+     * Cancels any pending debounced viewport updates.
+     * Should be called before switching workspaces to prevent the old workspace's
+     * viewport state from being saved to the new workspace.
+     */
+    cancelPendingUpdates() {
+        this._debounceUpdate.cancel();
+    }
+    handleResize() {
+        this._core.store.state.viewportWidth = this._core.store.state.host.clientWidth;
+        this._core.store.state.viewportHeight = this._core.store.state.host.clientHeight;
+        this._core.store.state.hasViewportChanged = true;
+        this._core.rerender();
+    }
+    handlePointerDown(event) {
+        // Cancel any ongoing viewport animation when user starts interacting
+        this.cancelViewportAnimation();
+        if (event.pointerType === 'mouse') {
+            const adjustedClientX = event.clientX - this._core.store.offsetX;
+            const adjustedClientY = event.clientY - this._core.store.offsetY;
+            if (event.button === KritzelMouseButton.Right) {
+                this._core.store.state.isPanning = true;
+                this._core.store.state.startX = adjustedClientX;
+                this._core.store.state.startY = adjustedClientY;
+            }
+        }
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
+            const activePointers = Array.from(this._core.store.state.pointers.values());
+            if (activePointers.length === 2) {
+                const currentPath = this._core.store.currentPath;
+                if (currentPath) {
+                    this._core.store.state.objects.remove(obj => obj.id === currentPath.id);
+                }
+                // Clear selection box when scaling starts to prevent it from remaining on screen
+                if (this._core.store.state.isSelecting) {
+                    this._core.store.state.isSelecting = false;
+                    this._core.store.state.objects.remove(obj => obj instanceof KritzelSelectionBox);
+                    this._core.store.setSelectionBox(null);
+                    // Clear selection preview state from objects - use selectedObjects for efficiency
+                    this._core.store.selectedObjects.forEach(object => {
+                        object.isSelected = false;
+                    });
+                }
+                this._core.store.state.isScaling = true;
+                const firstTouchX = activePointers[0].clientX - this._core.store.offsetX;
+                const firstTouchY = activePointers[0].clientY - this._core.store.offsetY;
+                const secondTouchX = activePointers[1].clientX - this._core.store.offsetX;
+                const secondTouchY = activePointers[1].clientY - this._core.store.offsetY;
+                this.initialTouchDistance = Math.sqrt(Math.pow(firstTouchX - secondTouchX, 2) + Math.pow(firstTouchY - secondTouchY, 2));
+                this.startX = (firstTouchX + secondTouchX) / 2;
+                this.startY = (firstTouchY + secondTouchY) / 2;
+                this._core.rerender();
+            }
+        }
+    }
+    handlePointerMove(event) {
+        if (event.pointerType === 'mouse') {
+            const hostRect = this._core.store.state.host.getBoundingClientRect();
+            const xRelativeToHost = event.clientX - hostRect.left;
+            const yRelativeToHost = event.clientY - hostRect.top;
+            this._core.store.state.pointerX = (xRelativeToHost - this._core.store.state.translateX) / this._core.store.state.scale;
+            this._core.store.state.pointerY = (yRelativeToHost - this._core.store.state.translateY) / this._core.store.state.scale;
+            if (this._core.store.state.isPanning) {
+                const dx = xRelativeToHost - this._core.store.state.startX;
+                const dy = yRelativeToHost - this._core.store.state.startY;
+                this._core.store.state.translateX += dx;
+                this._core.store.state.translateY += dy;
+                this._core.store.state.startX = xRelativeToHost;
+                this._core.store.state.startY = yRelativeToHost;
+                this._core.store.state.hasViewportChanged = true;
+                this._core.store.state.skipContextMenu = true;
+                this._core.rerender();
+                this._debounceUpdate();
+            }
+        }
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
+            const hostRect = this._core.store.state.host.getBoundingClientRect();
+            const xRelativeToHost = event.clientX - hostRect.left;
+            const yRelativeToHost = event.clientY - hostRect.top;
+            this._core.store.state.pointerX = (xRelativeToHost - this._core.store.state.translateX) / this._core.store.state.scale;
+            this._core.store.state.pointerY = (yRelativeToHost - this._core.store.state.translateY) / this._core.store.state.scale;
+            const activePointers = Array.from(this._core.store.state.pointers.values());
+            if (activePointers.length === 2) {
+                const firstTouchX = activePointers[0].clientX - this._core.store.offsetX;
+                const firstTouchY = activePointers[0].clientY - this._core.store.offsetY;
+                const secondTouchX = activePointers[1].clientX - this._core.store.offsetX;
+                const secondTouchY = activePointers[1].clientY - this._core.store.offsetY;
+                const currentTouchDistance = Math.sqrt(Math.pow(firstTouchX - secondTouchX, 2) + Math.pow(firstTouchY - secondTouchY, 2));
+                const midpointX = (firstTouchX + secondTouchX) / 2;
+                const midpointY = (firstTouchY + secondTouchY) / 2;
+                const scaleRatio = currentTouchDistance / this.initialTouchDistance;
+                const newScale = this._core.store.state.scale * scaleRatio;
+                if (newScale > this._core.store.state.scaleMax || newScale < this._core.store.state.scaleMin) {
+                    this._core.store.state.translateX = this._core.store.state.translateX + midpointX - this.startX;
+                    this._core.store.state.translateY = this._core.store.state.translateY + midpointY - this.startY;
+                }
+                else {
+                    const translateXAdjustment = (midpointX - this._core.store.state.translateX) * (scaleRatio - 1);
+                    const translateYAdjustment = (midpointY - this._core.store.state.translateY) * (scaleRatio - 1);
+                    this._core.store.state.translateX = this._core.store.state.translateX + midpointX - this.startX - translateXAdjustment;
+                    this._core.store.state.translateY = this._core.store.state.translateY + midpointY - this.startY - translateYAdjustment;
+                    this._core.store.state.scale = newScale;
+                    this.initialTouchDistance = currentTouchDistance;
+                }
+                this.startX = midpointX;
+                this.startY = midpointY;
+                this._core.store.state.hasViewportChanged = true;
+                this._core.rerender();
+                this._debounceUpdate();
+            }
+        }
+    }
+    handlePointerUp(event) {
+        if (event.pointerType === 'mouse') {
+            if (this._core.store.state.isPanning) {
+                this._core.store.state.isPanning = false;
+                this._core.rerender();
+            }
+        }
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
+            if (this._core.store.state.pointers.size === 0) {
+                this._debounceEndScaling();
+            }
+        }
+    }
+    handleWheel(event) {
+        // Cancel any ongoing viewport animation when user scrolls
+        this.cancelViewportAnimation();
+        if (event.ctrlKey) {
+            this.handleZoom(event);
+        }
+        else {
+            this.handlePan(event);
+        }
+    }
+    centerInViewport(object) {
+        const { scale, viewportWidth, viewportHeight } = this._core.store.state;
+        const { x, y, width, height } = object.rotatedBoundingBox;
+        const objectCenterX = x + width / 2;
+        const objectCenterY = y + height / 2;
+        this._core.store.state.translateX = viewportWidth / 2 - objectCenterX * scale;
+        this._core.store.state.translateY = viewportHeight / 2 - objectCenterY * scale;
+        this._core.store.state.hasViewportChanged = true;
+        this._core.rerender();
+        this._debounceUpdate();
+    }
+    centerFitInViewport(object) {
+        const scaleX = this._core.store.state.viewportWidth / (object.rotatedBoundingBox.width * 1.1);
+        const scaleY = this._core.store.state.viewportHeight / (object.rotatedBoundingBox.height * 1.1);
+        const newScale = Math.min(scaleX, scaleY, this._core.store.state.scaleMax);
+        const clampedScale = Math.max(newScale, this._core.store.state.scaleMin);
+        this._core.store.state.scale = clampedScale;
+        this.centerInViewport(object);
+    }
+    handleZoom(event) {
+        this._core.store.state.isScaling = true;
+        const rect = this._core.store.state.host.getBoundingClientRect();
+        const xRelativeToHost = event.clientX - rect.left;
+        const yRelativeToHost = event.clientY - rect.top;
+        this._core.store.state.pointerX = (xRelativeToHost - this._core.store.state.translateX) / this._core.store.state.scale;
+        this._core.store.state.pointerY = (yRelativeToHost - this._core.store.state.translateY) / this._core.store.state.scale;
+        const rawScaleFactor = 1 + (event.deltaY * -0.012);
+        const scaleFactor = Math.max(0.8, Math.min(1.2, rawScaleFactor));
+        const newScale = Math.min(this._core.store.state.scaleMax, Math.max(this._core.store.state.scaleMin, this._core.store.state.scale * scaleFactor));
+        const scaleRatio = newScale / this._core.store.state.scale;
+        const translateXAdjustment = (xRelativeToHost - this._core.store.state.translateX) * (scaleRatio - 1);
+        const translateYAdjustment = (yRelativeToHost - this._core.store.state.translateY) * (scaleRatio - 1);
+        this._core.store.state.scale = newScale;
+        this._core.store.state.translateX = this._core.store.state.translateX - translateXAdjustment;
+        this._core.store.state.translateY = this._core.store.state.translateY - translateYAdjustment;
+        // Apply horizontal pan from trackpad pinch+drag gestures
+        if (event.deltaX !== 0) {
+            this._core.store.state.translateX -= event.deltaX * 0.8;
+        }
+        this._core.store.state.hasViewportChanged = true;
+        this._core.rerender();
+        this._debounceUpdate();
+        this._debounceEndScaling();
+    }
+    handlePan(event) {
+        const panSpeed = 0.8;
+        this._core.store.state.translateX = this._core.store.state.translateX - event.deltaX * panSpeed;
+        this._core.store.state.translateY = this._core.store.state.translateY - event.deltaY * panSpeed;
+        this._core.store.state.hasViewportChanged = true;
+        this._core.rerender();
+        this._debounceUpdate();
+    }
+    /**
+     * Cancels any ongoing viewport animation.
+     * Called when user interacts with the canvas during animation.
+     */
+    cancelViewportAnimation() {
+        if (this._animationFrameId !== null) {
+            cancelAnimationFrame(this._animationFrameId);
+            this._animationFrameId = null;
+        }
+    }
+    /**
+     * Animates the viewport to the specified position and scale.
+     * @param targetTranslateX - Target X translation
+     * @param targetTranslateY - Target Y translation
+     * @param targetScale - Target scale
+     * @param duration - Animation duration in milliseconds (default 150)
+     */
+    animateViewportTo(targetTranslateX, targetTranslateY, targetScale, duration = 150) {
+        // Cancel any existing animation
+        this.cancelViewportAnimation();
+        const startTranslateX = this._core.store.state.translateX;
+        const startTranslateY = this._core.store.state.translateY;
+        const startScale = this._core.store.state.scale;
+        const startTime = performance.now();
+        const animate = (currentTime) => {
+            const elapsed = currentTime - startTime;
+            const progress = Math.min(elapsed / duration, 1);
+            // easeOutCubic easing function
+            const eased = 1 - Math.pow(1 - progress, 3);
+            this._core.store.state.translateX = startTranslateX + (targetTranslateX - startTranslateX) * eased;
+            this._core.store.state.translateY = startTranslateY + (targetTranslateY - startTranslateY) * eased;
+            this._core.store.state.scale = startScale + (targetScale - startScale) * eased;
+            this._core.store.state.hasViewportChanged = true;
+            this._core.rerender();
+            if (progress < 1) {
+                this._animationFrameId = requestAnimationFrame(animate);
+            }
+            else {
+                this._animationFrameId = null;
+                this._debounceUpdate();
+            }
+        };
+        this._animationFrameId = requestAnimationFrame(animate);
+    }
+    /**
+     * Centers and fits the nearest content objects in the viewport.
+     * Finds up to maxObjects closest objects to the current viewport center
+     * and animates the viewport to show them.
+     * @param maxObjects - Maximum number of objects to consider (default 20)
+     * @returns true if content was found and viewport is animating, false if no content exists
+     */
+    centerFitNearestContent(maxObjects = 20) {
+        const allObjects = this._core.store.allNonSelectionObjects;
+        if (allObjects.length === 0) {
+            return false;
+        }
+        // Calculate current viewport center in canvas coordinates
+        const viewportCenterX = -this._core.store.state.translateX / this._core.store.state.scale + this._core.store.state.viewportWidth / 2 / this._core.store.state.scale;
+        const viewportCenterY = -this._core.store.state.translateY / this._core.store.state.scale + this._core.store.state.viewportHeight / 2 / this._core.store.state.scale;
+        // Sort objects by distance from viewport center (using object center)
+        const objectsWithDistance = allObjects.map(obj => {
+            const bounds = obj.rotatedBoundingBox;
+            const objectCenterX = bounds.x + bounds.width / 2;
+            const objectCenterY = bounds.y + bounds.height / 2;
+            const distance = Math.sqrt(Math.pow(objectCenterX - viewportCenterX, 2) + Math.pow(objectCenterY - viewportCenterY, 2));
+            return { obj, distance };
+        });
+        objectsWithDistance.sort((a, b) => a.distance - b.distance);
+        // Take up to maxObjects closest objects
+        const nearestObjects = objectsWithDistance.slice(0, maxObjects).map(item => item.obj);
+        // Calculate combined bounds of nearest objects
+        let minX = Infinity;
+        let minY = Infinity;
+        let maxX = -Infinity;
+        let maxY = -Infinity;
+        for (const obj of nearestObjects) {
+            const bounds = obj.rotatedBoundingBox;
+            minX = Math.min(minX, bounds.x);
+            minY = Math.min(minY, bounds.y);
+            maxX = Math.max(maxX, bounds.x + bounds.width);
+            maxY = Math.max(maxY, bounds.y + bounds.height);
+        }
+        const contentWidth = maxX - minX;
+        const contentHeight = maxY - minY;
+        const contentCenterX = minX + contentWidth / 2;
+        const contentCenterY = minY + contentHeight / 2;
+        // Calculate scale to fit with 10% padding
+        const scaleX = this._core.store.state.viewportWidth / (contentWidth * 1.1);
+        const scaleY = this._core.store.state.viewportHeight / (contentHeight * 1.1);
+        const newScale = Math.min(scaleX, scaleY, this._core.store.state.scaleMax);
+        const clampedScale = Math.max(newScale, this._core.store.state.scaleMin);
+        // Calculate target translation to center content
+        const targetTranslateX = this._core.store.state.viewportWidth / 2 - contentCenterX * clampedScale;
+        const targetTranslateY = this._core.store.state.viewportHeight / 2 - contentCenterY * clampedScale;
+        // Animate to the target position
+        this.animateViewportTo(targetTranslateX, targetTranslateY, clampedScale);
+        return true;
+    }
+}

package/dist/kritzel-stencil/src/classes/core/workspace.class.js

@@ -0,0 +1,34 @@
+export class KritzelWorkspace {
+    constructor(id, name, viewport = { translateX: 0, translateY: 0, scale: 1 }) {
+        this.__class__ = 'KritzelWorkspace';
+        this.id = id;
+        this.name = name;
+        this.createdAt = new Date();
+        this.updatedAt = new Date();
+        this.viewport = viewport;
+    }
+    static create(core, obj) {
+        const workspace = new KritzelWorkspace(obj.id, obj.name, obj.viewport);
+        workspace._core = core;
+        return workspace;
+    }
+    addObject(obj) {
+        this._core.engine.addObject(obj);
+    }
+    serialize() {
+        return {
+            __class__: this.__class__,
+            id: this.id,
+            name: this.name,
+            createdAt: this.createdAt.toISOString(),
+            updatedAt: this.updatedAt.toISOString(),
+            viewport: this.viewport,
+        };
+    }
+    deserialize(object) {
+        Object.assign(this, object);
+        this.createdAt = new Date(object.createdAt);
+        this.updatedAt = new Date(object.updatedAt);
+        return this;
+    }
+}

package/dist/kritzel-stencil/src/classes/handlers/base.handler.js

@@ -0,0 +1,6 @@
+export class KritzelBaseHandler {
+    constructor(core) {
+        this._core = core;
+        void this._core; // Avoid unused variable warning
+    }
+}

package/dist/kritzel-stencil/src/classes/handlers/context-menu.handler.js

@@ -0,0 +1,63 @@
+import { KritzelSelectionGroup } from '../objects/selection-group.class';
+import { KritzelBaseHandler } from './base.handler';
+import { KritzelSelectionTool } from '../tools/selection-tool.class';
+import { KritzelSelectionBox } from '../objects/selection-box.class';
+export class KritzelContextMenuHandler extends KritzelBaseHandler {
+    constructor(core, globalContextMenuItems, objectContextMenuItems) {
+        super(core);
+        this.globalContextMenuItems = [];
+        this.objectContextMenuItems = [];
+        this.globalContextMenuItems = globalContextMenuItems;
+        this.objectContextMenuItems = objectContextMenuItems;
+    }
+    handleContextMenu(event) {
+        var _a;
+        if (!(this._core.store.state.activeTool instanceof KritzelSelectionTool)) {
+            return;
+        }
+        if (this._core.store.state.skipContextMenu) {
+            this._core.store.state.skipContextMenu = false;
+            return;
+        }
+        const selectionTool = this._core.store.state.activeTool;
+        (_a = selectionTool === null || selectionTool === void 0 ? void 0 : selectionTool.moveHandler) === null || _a === void 0 ? void 0 : _a.cancelPendingDrag();
+        if (this._core.store.selectionBox) {
+            this._core.store.state.objects.remove(object => object instanceof KritzelSelectionBox);
+            this._core.store.setSelectionBox(null);
+            this._core.store.state.isSelecting = false;
+        }
+        const selectedObject = this._core.getObjectFromPointerEvent(event, '.object');
+        if (selectedObject && !(selectedObject instanceof KritzelSelectionGroup) && !(selectedObject instanceof KritzelSelectionBox)) {
+            const selectionGroup = KritzelSelectionGroup.create(this._core);
+            selectionGroup.addOrRemove(selectedObject);
+            selectionGroup.isSelected = true;
+            selectionGroup.rotation = selectedObject.rotation;
+            this._core.store.state.isSelecting = false;
+            const currentSelectionGroup = this._core.store.selectionGroup;
+            if (currentSelectionGroup) {
+                this._core.removeSelectionGroup();
+            }
+            this._core.addSelectionGroup(selectionGroup);
+            this._core.rerender();
+        }
+        this._core.store.state.contextMenuItems = this._core.store.selectionGroup ? this.objectContextMenuItems : this.globalContextMenuItems;
+        let x = event.clientX - this._core.store.offsetX;
+        let y = event.clientY - this._core.store.offsetY;
+        const menuWidthEstimate = 150;
+        const menuHeightEstimate = 200;
+        const margin = 10;
+        if (x + menuWidthEstimate > window.innerWidth - margin) {
+            x = window.innerWidth - menuWidthEstimate - margin;
+        }
+        if (y + menuHeightEstimate > window.innerHeight - margin) {
+            y = window.innerHeight - menuHeightEstimate - margin;
+        }
+        x = Math.max(margin, x);
+        y = Math.max(margin, y);
+        this._core.store.state.contextMenuX = x;
+        this._core.store.state.contextMenuY = y;
+        this._core.store.state.isContextMenuVisible = true;
+        this._core.store.state.isEnabled = false;
+        this._core.rerender();
+    }
+}