kritzel-react 0.1.32 → 0.1.34

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

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

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

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