kritzel-react 0.1.30 → 0.1.32

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

@@ -0,0 +1,18 @@
+import { KritzelBaseHandler } from './base.handler';
+export class KritzelHoverHandler extends KritzelBaseHandler {
+    constructor(core) {
+        super(core);
+    }
+    handlePointerMove(event) {
+        if (event.pointerType === 'mouse') {
+            const hoveredObject = this._core.getObjectFromPointerEvent(event, '.object');
+            if (!hoveredObject)
+                return;
+            const x = this._core.store.state.pointerX;
+            const y = this._core.store.state.pointerY;
+            hoveredObject.isHovered = hoveredObject.hitTest(x, y);
+        }
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
+        }
+    }
+}

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

@@ -0,0 +1,76 @@
+import { KritzelToolRegistry } from '../registries/tool.registry';
+import { KritzelBaseHandler } from './base.handler';
+export class KritzelKeyHandler extends KritzelBaseHandler {
+    constructor(core) {
+        super(core);
+        this.shortcuts = [
+            // General
+            { key: 'Escape', label: 'Clear Selection', category: 'General', condition: c => !!c.store.selectionGroup, action: c => c.clearSelection() },
+            { key: 'Delete', label: 'Delete Selected', category: 'General', condition: c => !!c.store.selectionGroup, action: c => c.delete() },
+            { key: 'a', ctrl: true, label: 'Select All in Viewport', category: 'General', action: c => c.selectAllObjectsInViewport() },
+            { key: 'A', ctrl: true, shift: true, label: 'Select All Objects', category: 'General', action: c => c.selectAllObjects() },
+            // Undo/Redo
+            { key: 'z', ctrl: true, label: 'Undo', category: 'Undo/Redo', action: c => c.undo() },
+            { key: 'y', ctrl: true, label: 'Redo', category: 'Undo/Redo', action: c => c.redo() },
+            // Tool selection (Ctrl+1-9)
+            { key: '1', ctrl: true, label: 'Tool 1', category: 'Tool Selection', action: () => this.switchToolByIndex(0) },
+            { key: '2', ctrl: true, label: 'Tool 2', category: 'Tool Selection', action: () => this.switchToolByIndex(1) },
+            { key: '3', ctrl: true, label: 'Tool 3', category: 'Tool Selection', action: () => this.switchToolByIndex(2) },
+            { key: '4', ctrl: true, label: 'Tool 4', category: 'Tool Selection', action: () => this.switchToolByIndex(3) },
+            { key: '5', ctrl: true, label: 'Tool 5', category: 'Tool Selection', action: () => this.switchToolByIndex(4) },
+            { key: '6', ctrl: true, label: 'Tool 6', category: 'Tool Selection', action: () => this.switchToolByIndex(5) },
+            { key: '7', ctrl: true, label: 'Tool 7', category: 'Tool Selection', action: () => this.switchToolByIndex(6) },
+            { key: '8', ctrl: true, label: 'Tool 8', category: 'Tool Selection', action: () => this.switchToolByIndex(7) },
+            { key: '9', ctrl: true, label: 'Tool 9', category: 'Tool Selection', action: () => this.switchToolByIndex(8) },
+            // Clipboard
+            {
+                key: 'c',
+                ctrl: true,
+                label: 'Copy',
+                category: 'Clipboard',
+                condition: c => !!c.store.selectionGroup,
+                action: c => {
+                    c.copy();
+                    c.rerender();
+                },
+            },
+            { key: 'v', ctrl: true, label: 'Paste', category: 'Clipboard', condition: c => !!c.store.state.copiedObjects && !c.store.activeText, action: c => c.paste() },
+            // Object layering
+            { key: '+', ctrl: true, label: 'Bring Forward', category: 'Object Layering', condition: c => !!c.store.selectionGroup, action: c => c.bringForward() },
+            { key: '-', ctrl: true, label: 'Send Backward', category: 'Object Layering', condition: c => !!c.store.selectionGroup, action: c => c.sendBackward() },
+            { key: '*', shift: true, label: 'Bring to Front', category: 'Object Layering', condition: c => !!c.store.selectionGroup, action: c => c.bringToFront() },
+            { key: '_', shift: true, label: 'Send to Back', category: 'Object Layering', condition: c => !!c.store.selectionGroup, action: c => c.sendToBack() },
+            // Grouping
+            { key: 'g', ctrl: true, label: 'Group', category: 'Grouping', condition: c => !!c.store.selectionGroup && c.store.selectionGroup.objects.length >= 2, action: c => c.group() },
+            { key: 'G', ctrl: true, shift: true, label: 'Ungroup', category: 'Grouping', condition: c => !!c.store.selectionGroup, action: c => c.ungroup() },
+        ];
+    }
+    switchToolByIndex(index) {
+        const toolInstance = KritzelToolRegistry.getToolByIndex(index);
+        if (toolInstance) {
+            this._core.store.setState('activeTool', toolInstance);
+            this._core.deselectAllObjects();
+            toolInstance.onActivate();
+        }
+    }
+    handleKeyDown(event) {
+        this._core.store.state.isCtrlKeyPressed = event.ctrlKey;
+        const shortcut = this.shortcuts.find(s => s.key === event.key && !!s.ctrl === event.ctrlKey && !!s.shift === event.shiftKey && (!s.condition || s.condition(this._core)));
+        if (shortcut) {
+            event.preventDefault();
+            shortcut.action(this._core);
+        }
+    }
+    handleKeyUp(event) {
+        this._core.store.state.isCtrlKeyPressed = event.ctrlKey;
+    }
+    getDisplayableShortcuts() {
+        return this.shortcuts.map(({ key, ctrl, shift, label, category }) => ({
+            key,
+            ctrl,
+            shift,
+            label,
+            category,
+        }));
+    }
+}

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

@@ -0,0 +1,382 @@
+import { KritzelEventHelper } from '../../helpers/event.helper';
+import { KritzelLine } from '../objects/line.class';
+import { KritzelBaseHandler } from './base.handler';
+import { KritzelColorHelper } from '../../helpers/color.helper';
+export class KritzelLineHandleHandler extends KritzelBaseHandler {
+    constructor(core) {
+        super(core);
+        this.initialMouseX = 0;
+        this.initialMouseY = 0;
+        this.initialStartX = 0;
+        this.initialStartY = 0;
+        this.initialEndX = 0;
+        this.initialEndY = 0;
+        this.initialTranslateX = 0;
+        this.initialTranslateY = 0;
+        this.hasMoved = false;
+        /** Current snap target during drag, if any */
+        this.currentSnapTarget = null;
+    }
+    reset() {
+        this.initialMouseX = 0;
+        this.initialMouseY = 0;
+        this.initialStartX = 0;
+        this.initialStartY = 0;
+        this.initialEndX = 0;
+        this.initialEndY = 0;
+        this.initialControlX = undefined;
+        this.initialControlY = undefined;
+        this.initialTranslateX = 0;
+        this.initialTranslateY = 0;
+        this.hasMoved = false;
+        this.currentSnapTarget = null;
+        this._core.anchorManager.clearSnapCandidate();
+    }
+    handlePointerDown(event) {
+        if (event.pointerType === 'mouse') {
+            if (KritzelEventHelper.isLeftClick(event)) {
+                this.startHandleDrag(event);
+            }
+        }
+        if (event.pointerType === 'touch' || event.pointerType === 'pen') {
+            const activePointers = Array.from(this._core.store.state.pointers.values());
+            if (activePointers.length === 1) {
+                this.startHandleDrag(event);
+            }
+        }
+    }
+    startHandleDrag(event) {
+        const line = this.getSelectedLine();
+        if (!line || !this._core.store.state.isLineHandleSelected) {
+            return;
+        }
+        const clientX = event.clientX - this._core.store.offsetX;
+        const clientY = event.clientY - this._core.store.offsetY;
+        this._core.store.state.isLineHandleDragging = true;
+        this.initialMouseX = clientX;
+        this.initialMouseY = clientY;
+        // Store initial line state
+        this.initialStartX = line.startX;
+        this.initialStartY = line.startY;
+        this.initialEndX = line.endX;
+        this.initialEndY = line.endY;
+        this.initialControlX = line.controlX;
+        this.initialControlY = line.controlY;
+        this.initialTranslateX = line.translateX;
+        this.initialTranslateY = line.translateY;
+        // Remove existing anchor for this endpoint when starting to drag
+        const handleType = this._core.store.state.lineHandleType;
+        if (handleType === 'start' || handleType === 'end') {
+            this._core.anchorManager.removeAnchor(line.id, handleType);
+        }
+        clearTimeout(this._core.store.state.longTouchTimeout);
+    }
+    handlePointerMove(event) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const line = this.getSelectedLine();
+        if (!line || !this._core.store.state.isLineHandleDragging) {
+            return;
+        }
+        const clientX = event.clientX - this._core.store.offsetX;
+        const clientY = event.clientY - this._core.store.offsetY;
+        const dx = clientX - this.initialMouseX;
+        const dy = clientY - this.initialMouseY;
+        const moveThreshold = 3;
+        if (Math.abs(dx) > moveThreshold || Math.abs(dy) > moveThreshold) {
+            this.hasMoved = true;
+        }
+        if (!this.hasMoved) {
+            return;
+        }
+        const viewportScale = this._core.store.state.scale;
+        const objectScale = line.scale || 1;
+        const rotation = line.rotation;
+        // Convert mouse delta to world coordinates
+        const worldDx = dx / viewportScale;
+        const worldDy = dy / viewportScale;
+        // Rotate the delta into the line's local coordinate system
+        const cos = Math.cos(-rotation);
+        const sin = Math.sin(-rotation);
+        const localDx = (worldDx * cos - worldDy * sin) * objectScale;
+        const localDy = (worldDx * sin + worldDy * cos) * objectScale;
+        const handleType = this._core.store.state.lineHandleType;
+        if (handleType === 'start') {
+            // Calculate world position directly from mouse position for snap detection
+            const worldX = (clientX - this._core.store.state.translateX) / viewportScale;
+            const worldY = (clientY - this._core.store.state.translateY) / viewportScale;
+            // Get other endpoint's anchor to prevent anchoring both to same object
+            const otherAnchorId = (_a = line.endAnchor) === null || _a === void 0 ? void 0 : _a.objectId;
+            // Check for snap target
+            const snapTarget = this._core.anchorManager.findSnapTarget(worldX, worldY, line.id, otherAnchorId);
+            this.currentSnapTarget = snapTarget;
+            if (snapTarget) {
+                // Snap to target center - convert world coords to local
+                const localCoords = this.worldToLineLocal(line, snapTarget.centerX, snapTarget.centerY);
+                this.updateLineEndpoint(line, localCoords.x, localCoords.y, this.initialEndX, this.initialEndY);
+                // Get the other endpoint's world position for edge intersection calculation
+                const otherEndpointWorld = this.lineLocalToWorld(line, this.initialEndX, this.initialEndY);
+                // Calculate edge intersection point using AnchorManager to support curves
+                const targetObject = this._core.store.allNonSelectionObjects.find(obj => obj.id === snapTarget.objectId);
+                let edgeX;
+                let edgeY;
+                let t;
+                if (targetObject) {
+                    const clipInfo = this._core.anchorManager.computeAnchorClipInfo(line, 'start', targetObject);
+                    if (clipInfo) {
+                        edgeX = clipInfo.worldX;
+                        edgeY = clipInfo.worldY;
+                        t = clipInfo.t;
+                    }
+                }
+                // Calculate control point in world coordinates if it exists
+                let controlWorld = undefined;
+                if (line.controlX !== undefined && line.controlY !== undefined) {
+                    controlWorld = this.lineLocalToWorld(line, line.controlX, line.controlY);
+                }
+                // Update snap indicator
+                this._core.anchorManager.setSnapCandidate({
+                    objectId: snapTarget.objectId,
+                    endpoint: 'start',
+                    centerX: snapTarget.centerX,
+                    centerY: snapTarget.centerY,
+                    lineEndpointX: otherEndpointWorld.x,
+                    lineEndpointY: otherEndpointWorld.y,
+                    controlX: controlWorld === null || controlWorld === void 0 ? void 0 : controlWorld.x,
+                    controlY: controlWorld === null || controlWorld === void 0 ? void 0 : controlWorld.y,
+                    t,
+                    edgeX,
+                    edgeY,
+                    lineStroke: KritzelColorHelper.resolveThemeColor(line.stroke),
+                    lineStrokeWidth: line.strokeWidth / line.scale,
+                    arrowOffset: line.hasStartArrow ? line.getArrowSize('start') / line.scale : undefined,
+                    arrowStyle: line.hasStartArrow ? (_c = (_b = line.arrows) === null || _b === void 0 ? void 0 : _b.start) === null || _c === void 0 ? void 0 : _c.style : undefined,
+                    arrowFill: line.hasStartArrow ? line.getArrowFill('start') : undefined,
+                });
+            }
+            else {
+                // No snap - use regular position
+                const newStartX = this.initialStartX + localDx;
+                const newStartY = this.initialStartY + localDy;
+                this.updateLineEndpoint(line, newStartX, newStartY, this.initialEndX, this.initialEndY);
+                // Clear snap indicator
+                this._core.anchorManager.clearSnapCandidate();
+            }
+        }
+        else if (handleType === 'end') {
+            // Calculate world position directly from mouse position for snap detection
+            const worldX = (clientX - this._core.store.state.translateX) / viewportScale;
+            const worldY = (clientY - this._core.store.state.translateY) / viewportScale;
+            // Get other endpoint's anchor to prevent anchoring both to same object
+            const otherAnchorId = (_d = line.startAnchor) === null || _d === void 0 ? void 0 : _d.objectId;
+            // Check for snap target
+            const snapTarget = this._core.anchorManager.findSnapTarget(worldX, worldY, line.id, otherAnchorId);
+            this.currentSnapTarget = snapTarget;
+            if (snapTarget) {
+                // Snap to target center - convert world coords to local
+                const localCoords = this.worldToLineLocal(line, snapTarget.centerX, snapTarget.centerY);
+                this.updateLineEndpoint(line, this.initialStartX, this.initialStartY, localCoords.x, localCoords.y);
+                // Get the other endpoint's world position for edge intersection calculation
+                const otherEndpointWorld = this.lineLocalToWorld(line, this.initialStartX, this.initialStartY);
+                // Calculate edge intersection point using AnchorManager to support curves
+                const targetObject = this._core.store.allNonSelectionObjects.find(obj => obj.id === snapTarget.objectId);
+                let edgeX;
+                let edgeY;
+                let t;
+                if (targetObject) {
+                    const clipInfo = this._core.anchorManager.computeAnchorClipInfo(line, 'end', targetObject);
+                    if (clipInfo) {
+                        edgeX = clipInfo.worldX;
+                        edgeY = clipInfo.worldY;
+                        t = clipInfo.t;
+                    }
+                }
+                // Calculate control point in world coordinates if it exists
+                let controlWorld = undefined;
+                if (line.controlX !== undefined && line.controlY !== undefined) {
+                    controlWorld = this.lineLocalToWorld(line, line.controlX, line.controlY);
+                }
+                // Update snap indicator
+                this._core.anchorManager.setSnapCandidate({
+                    objectId: snapTarget.objectId,
+                    endpoint: 'end',
+                    centerX: snapTarget.centerX,
+                    centerY: snapTarget.centerY,
+                    lineEndpointX: otherEndpointWorld.x,
+                    lineEndpointY: otherEndpointWorld.y,
+                    controlX: controlWorld === null || controlWorld === void 0 ? void 0 : controlWorld.x,
+                    controlY: controlWorld === null || controlWorld === void 0 ? void 0 : controlWorld.y,
+                    t,
+                    edgeX,
+                    edgeY,
+                    lineStroke: KritzelColorHelper.resolveThemeColor(line.stroke),
+                    lineStrokeWidth: line.strokeWidth / line.scale,
+                    arrowOffset: line.hasEndArrow ? line.getArrowSize('end') / line.scale : undefined,
+                    arrowStyle: line.hasEndArrow ? (_f = (_e = line.arrows) === null || _e === void 0 ? void 0 : _e.end) === null || _f === void 0 ? void 0 : _f.style : undefined,
+                    arrowFill: line.hasEndArrow ? line.getArrowFill('end') : undefined,
+                });
+            }
+            else {
+                // No snap - use regular position
+                const newEndX = this.initialEndX + localDx;
+                const newEndY = this.initialEndY + localDy;
+                this.updateLineEndpoint(line, this.initialStartX, this.initialStartY, newEndX, newEndY);
+                // Clear snap indicator
+                this._core.anchorManager.clearSnapCandidate();
+            }
+        }
+        else if (handleType === 'center') {
+            const startControlX = (_g = this.initialControlX) !== null && _g !== void 0 ? _g : (this.initialStartX + this.initialEndX) / 2;
+            const startControlY = (_h = this.initialControlY) !== null && _h !== void 0 ? _h : (this.initialStartY + this.initialEndY) / 2;
+            const newControlX = startControlX + localDx * 2;
+            const newControlY = startControlY + localDy * 2;
+            // Check distance to line segment for snapping back to straight
+            const x1 = line.startX;
+            const y1 = line.startY;
+            const x2 = line.endX;
+            const y2 = line.endY;
+            const A = newControlX - x1;
+            const B = newControlY - y1;
+            const C = x2 - x1;
+            const D = y2 - y1;
+            const dot = A * C + B * D;
+            const len_sq = C * C + D * D;
+            let param = -1;
+            if (len_sq !== 0) {
+                param = dot / len_sq;
+            }
+            let xx, yy;
+            if (param < 0) {
+                xx = x1;
+                yy = y1;
+            }
+            else if (param > 1) {
+                xx = x2;
+                yy = y2;
+            }
+            else {
+                xx = x1 + param * C;
+                yy = y1 + param * D;
+            }
+            const dx = newControlX - xx;
+            const dy = newControlY - yy;
+            const distance = Math.sqrt(dx * dx + dy * dy);
+            // Threshold for snapping back to straight line
+            const snapToStraightThreshold = 15;
+            if (distance < snapToStraightThreshold) {
+                line.updateControlPoint(undefined, undefined);
+            }
+            else {
+                line.updateControlPoint(newControlX, newControlY);
+            }
+        }
+        this._core.rerender();
+    }
+    /**
+     * Converts world coordinates to a line's local coordinate system.
+     */
+    worldToLineLocal(line, worldX, worldY) {
+        const dx = (worldX - line.translateX) * line.scale;
+        const dy = (worldY - line.translateY) * line.scale;
+        const cx = line.totalWidth / 2;
+        const cy = line.totalHeight / 2;
+        const cos = Math.cos(-line.rotation);
+        const sin = Math.sin(-line.rotation);
+        const rotatedX = (dx - cx) * cos - (dy - cy) * sin + cx;
+        const rotatedY = (dx - cx) * sin + (dy - cy) * cos + cy;
+        return {
+            x: rotatedX + line.x,
+            y: rotatedY + line.y,
+        };
+    }
+    /**
+     * Converts a line's local coordinate system to world coordinates.
+     */
+    lineLocalToWorld(line, localX, localY) {
+        const px = localX - line.x;
+        const py = localY - line.y;
+        const cx = line.totalWidth / 2;
+        const cy = line.totalHeight / 2;
+        const cos = Math.cos(line.rotation);
+        const sin = Math.sin(line.rotation);
+        const rotatedX = (px - cx) * cos - (py - cy) * sin + cx;
+        const rotatedY = (px - cx) * sin + (py - cy) * cos + cy;
+        return {
+            x: rotatedX / line.scale + line.translateX,
+            y: rotatedY / line.scale + line.translateY,
+        };
+    }
+    updateLineEndpoint(line, startX, startY, endX, endY) {
+        // Calculate new bounding box using the static method that accounts for curve extrema
+        const { minX, minY, maxX, maxY } = KritzelLine.calculateBoundingBox(startX, startY, endX, endY, line.controlX, line.controlY, line.strokeWidth);
+        const newWidth = maxX - minX;
+        const newHeight = maxY - minY;
+        // Calculate old bounding box
+        const { minX: oldMinX, minY: oldMinY, maxX: oldMaxX, maxY: oldMaxY, } = KritzelLine.calculateBoundingBox(this.initialStartX, this.initialStartY, this.initialEndX, this.initialEndY, this.initialControlX, this.initialControlY, line.strokeWidth);
+        const oldWidth = oldMaxX - oldMinX;
+        const oldHeight = oldMaxY - oldMinY;
+        // Calculate center shift in local space
+        const shiftX = minX - oldMinX;
+        const shiftY = minY - oldMinY;
+        const deltaCx = shiftX + (newWidth - oldWidth) / 2;
+        const deltaCy = shiftY + (newHeight - oldHeight) / 2;
+        // Convert the center shift to world coordinates
+        const rotation = line.rotation;
+        const cos = Math.cos(rotation);
+        const sin = Math.sin(rotation);
+        const scale = 1 / line.scale;
+        const rotatedDeltaCx = deltaCx * cos - deltaCy * sin;
+        const rotatedDeltaCy = deltaCx * sin + deltaCy * cos;
+        // Calculate new translate
+        const newTranslateX = this.initialTranslateX + scale * (oldWidth - newWidth) / 2 + scale * rotatedDeltaCx;
+        const newTranslateY = this.initialTranslateY + scale * (oldHeight - newHeight) / 2 + scale * rotatedDeltaCy;
+        // Update the line properties
+        line.startX = startX;
+        line.startY = startY;
+        line.endX = endX;
+        line.endY = endY;
+        line.x = minX;
+        line.y = minY;
+        line.width = newWidth;
+        line.height = newHeight;
+        // Adjust translateX/Y to compensate for the bounding box shift
+        line.translateX = newTranslateX;
+        line.translateY = newTranslateY;
+        // Clear cached adjusted points
+        line._adjustedPoints = null;
+        this._core.store.state.objects.update(line);
+    }
+    handlePointerUp(_event) {
+        if (this._core.store.state.isLineHandleDragging) {
+            const line = this.getSelectedLine();
+            const handleType = this._core.store.state.lineHandleType;
+            if (line && this.hasMoved) {
+                // If we were snapped to a target, create the anchor
+                if (this.currentSnapTarget && (handleType === 'start' || handleType === 'end')) {
+                    this._core.anchorManager.setAnchor(line.id, handleType, this.currentSnapTarget.objectId);
+                }
+                // Refresh the selection group dimensions after line endpoint change
+                const selectionGroup = this._core.store.selectionGroup;
+                if (selectionGroup) {
+                    selectionGroup.refreshObjectDimensions();
+                    selectionGroup.update();
+                    this._core.engine.emitObjectsChange();
+                    this._core.store.state.hasObjectsChanged = true;
+                }
+            }
+            this._core.store.state.isLineHandleDragging = false;
+            this.reset();
+            this._core.rerender();
+        }
+    }
+    getSelectedLine() {
+        const selectionGroup = this._core.store.selectionGroup;
+        if (!selectionGroup || selectionGroup.objects.length !== 1) {
+            return null;
+        }
+        const object = selectionGroup.objects[0];
+        if (object instanceof KritzelLine) {
+            return object;
+        }
+        return null;
+    }
+}