kritzel-react 0.1.30 → 0.1.32

package/dist/kritzel-stencil/src/classes/objects/line.class.js

@@ -0,0 +1,608 @@
+import { KritzelBaseObject } from './base-object.class';
+import { KritzelGeometryHelper } from '../../helpers/geometry.helper';
+import { KritzelColorHelper } from '../../helpers/color.helper';
+export class KritzelLine extends KritzelBaseObject {
+    get d() {
+        if (this.controlX !== undefined && this.controlY !== undefined) {
+            return `M ${this.startX} ${this.startY} Q ${this.controlX} ${this.controlY} ${this.endX} ${this.endY}`;
+        }
+        return `M ${this.startX} ${this.startY} L ${this.endX} ${this.endY}`;
+    }
+    get viewBox() {
+        return `${this.x} ${this.y} ${this.width} ${this.height}`;
+    }
+    constructor(config) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        super();
+        this.__class__ = 'KritzelLine';
+        this.scale = 1;
+        this.isVisible = true;
+        this.isDebugInfoVisible = true;
+        this.isCompleted = false;
+        this._adjustedPoints = null;
+        this._clipInfo = null;
+        this.options = config;
+        this.startX = (_a = config === null || config === void 0 ? void 0 : config.startX) !== null && _a !== void 0 ? _a : 0;
+        this.startY = (_b = config === null || config === void 0 ? void 0 : config.startY) !== null && _b !== void 0 ? _b : 0;
+        this.endX = (_c = config === null || config === void 0 ? void 0 : config.endX) !== null && _c !== void 0 ? _c : 0;
+        this.endY = (_d = config === null || config === void 0 ? void 0 : config.endY) !== null && _d !== void 0 ? _d : 0;
+        this.controlX = config === null || config === void 0 ? void 0 : config.controlX;
+        this.controlY = config === null || config === void 0 ? void 0 : config.controlY;
+        this.translateX = (_e = config === null || config === void 0 ? void 0 : config.translateX) !== null && _e !== void 0 ? _e : 0;
+        this.translateY = (_f = config === null || config === void 0 ? void 0 : config.translateY) !== null && _f !== void 0 ? _f : 0;
+        this.scale = (_g = config === null || config === void 0 ? void 0 : config.scale) !== null && _g !== void 0 ? _g : 1;
+        this.strokeWidth = (_h = config === null || config === void 0 ? void 0 : config.strokeWidth) !== null && _h !== void 0 ? _h : 4;
+        this.stroke = (_j = config === null || config === void 0 ? void 0 : config.stroke) !== null && _j !== void 0 ? _j : { light: '#000000', dark: '#ffffff' };
+        this.startAnchor = config === null || config === void 0 ? void 0 : config.startAnchor;
+        this.endAnchor = config === null || config === void 0 ? void 0 : config.endAnchor;
+        this.arrows = config === null || config === void 0 ? void 0 : config.arrows;
+        this.updateDimensions();
+    }
+    static create(core, options) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        const object = new KritzelLine();
+        object._core = core;
+        object.id = object.generateId();
+        object.workspaceId = core.store.state.activeWorkspace.id;
+        object.options = options;
+        object.startX = (_a = options === null || options === void 0 ? void 0 : options.startX) !== null && _a !== void 0 ? _a : 0;
+        object.startY = (_b = options === null || options === void 0 ? void 0 : options.startY) !== null && _b !== void 0 ? _b : 0;
+        object.endX = (_c = options === null || options === void 0 ? void 0 : options.endX) !== null && _c !== void 0 ? _c : 0;
+        object.endY = (_d = options === null || options === void 0 ? void 0 : options.endY) !== null && _d !== void 0 ? _d : 0;
+        object.controlX = options === null || options === void 0 ? void 0 : options.controlX;
+        object.controlY = options === null || options === void 0 ? void 0 : options.controlY;
+        object.translateX = (_e = options === null || options === void 0 ? void 0 : options.translateX) !== null && _e !== void 0 ? _e : 0;
+        object.translateY = (_f = options === null || options === void 0 ? void 0 : options.translateY) !== null && _f !== void 0 ? _f : 0;
+        object.scale = (_g = options === null || options === void 0 ? void 0 : options.scale) !== null && _g !== void 0 ? _g : 1;
+        object.strokeWidth = (_h = options === null || options === void 0 ? void 0 : options.strokeWidth) !== null && _h !== void 0 ? _h : 4;
+        object.stroke = (_j = options === null || options === void 0 ? void 0 : options.stroke) !== null && _j !== void 0 ? _j : { light: '#000000', dark: '#ffffff' };
+        object.opacity = (_k = options === null || options === void 0 ? void 0 : options.opacity) !== null && _k !== void 0 ? _k : 1;
+        object.startAnchor = options === null || options === void 0 ? void 0 : options.startAnchor;
+        object.endAnchor = options === null || options === void 0 ? void 0 : options.endAnchor;
+        object.arrows = options === null || options === void 0 ? void 0 : options.arrows;
+        object.zIndex = core.store.currentZIndex;
+        object.updateDimensions();
+        return object;
+    }
+    resize(x, y, width, height) {
+        if (width <= 1 || height <= 1) {
+            return;
+        }
+        const scaleX = width / this.width;
+        const scaleY = height / this.height;
+        // Scale the line endpoints
+        this.startX = this.startX * scaleX;
+        this.startY = this.startY * scaleY;
+        this.endX = this.endX * scaleX;
+        this.endY = this.endY * scaleY;
+        if (this.controlX !== undefined && this.controlY !== undefined) {
+            this.controlX = this.controlX * scaleX;
+            this.controlY = this.controlY * scaleY;
+        }
+        // Recalculate dimensions from scaled endpoints
+        const { minX, minY, maxX, maxY } = this.calculateBoundingBox();
+        this.width = maxX - minX;
+        this.height = maxY - minY;
+        this.x = minX;
+        this.y = minY;
+        // Set the new position
+        this.translateX = x;
+        this.translateY = y;
+        this._adjustedPoints = null;
+        this._clipInfo = null;
+        this._core.store.state.objects.update(this);
+        // Update anchors after the line is updated
+        this._core.anchorManager.updateAnchorsForObject(this.id);
+        if (this.startAnchor) {
+            this._core.anchorManager.updateAnchorsForObject(this.startAnchor.objectId);
+        }
+        if (this.endAnchor) {
+            this._core.anchorManager.updateAnchorsForObject(this.endAnchor.objectId);
+        }
+    }
+    rotate(value) {
+        this.rotation = value;
+        this._adjustedPoints = null;
+        this._clipInfo = null;
+        this._core.store.state.objects.update(this);
+    }
+    move(startX, startY, endX, endY) {
+        const deltaX = (startX - endX) / this._core.store.state.scale;
+        const deltaY = (startY - endY) / this._core.store.state.scale;
+        this.translateX += deltaX;
+        this.translateY += deltaY;
+        // If the line is anchored, we need to ensure the anchored endpoints stay at the target
+        if (this.startAnchor) {
+            this._core.anchorManager.updateAnchorsForObject(this.startAnchor.objectId);
+        }
+        if (this.endAnchor) {
+            this._core.anchorManager.updateAnchorsForObject(this.endAnchor.objectId);
+        }
+        this._adjustedPoints = null;
+        this._clipInfo = null;
+        this._core.store.state.objects.update(this);
+    }
+    hitTest(x, y) {
+        var _a, _b, _c, _d;
+        const minHitThreshold = 20;
+        const strokeWidth = Math.max(this.strokeWidth, minHitThreshold);
+        const halfStroke = strokeWidth / this.scale / 2;
+        if (this._adjustedPoints === null) {
+            this._adjustedPoints = this.computeAdjustedPoints();
+        }
+        // For curved lines, use distance to the Bezier curve
+        if (this.controlX !== undefined && this.controlY !== undefined) {
+            const clip = this.getClipInfo();
+            const startT = (_b = (_a = clip.start) === null || _a === void 0 ? void 0 : _a.t) !== null && _b !== void 0 ? _b : 0;
+            const endT = (_d = (_c = clip.end) === null || _c === void 0 ? void 0 : _c.t) !== null && _d !== void 0 ? _d : 1;
+            const distance = this.pointToBezierDistance(x, y, startT, endT);
+            return distance <= halfStroke;
+        }
+        // For straight lines, use distance to line segment
+        const clip = this.getClipInfo();
+        const p1 = clip.start ? [clip.start.x, clip.start.y] : this._adjustedPoints[0];
+        const p2 = clip.end ? [clip.end.x, clip.end.y] : this._adjustedPoints[1];
+        const distance = this.pointToLineSegmentDistance(x, y, p1[0], p1[1], p2[0], p2[1]);
+        return distance <= halfStroke;
+    }
+    hitTestPolygon(polygon) {
+        var _a, _b, _c, _d;
+        const halfStroke = this.strokeWidth / this.scale / 2;
+        if (this._adjustedPoints === null) {
+            this._adjustedPoints = this.computeAdjustedPoints();
+        }
+        const clip = this.getClipInfo();
+        const polyPoints = [
+            { x: polygon.bottomLeft.x, y: polygon.bottomLeft.y },
+            { x: polygon.bottomRight.x, y: polygon.bottomRight.y },
+            { x: polygon.topRight.x, y: polygon.topRight.y },
+            { x: polygon.topLeft.x, y: polygon.topLeft.y },
+        ];
+        // Check if any endpoint is inside the polygon
+        // Use clipped endpoints
+        const p1 = clip.start ? [clip.start.x, clip.start.y] : this._adjustedPoints[0];
+        const p2 = clip.end ? [clip.end.x, clip.end.y] : this._adjustedPoints[1];
+        const endpoints = [p1, p2];
+        for (const [px, py] of endpoints) {
+            if (KritzelGeometryHelper.isPointInPolygon({ x: px, y: py }, polyPoints)) {
+                return true;
+            }
+        }
+        // Check if any polygon vertex is on the line/curve
+        for (const pt of polyPoints) {
+            if (this.hitTest(pt.x, pt.y)) {
+                return true;
+            }
+        }
+        // For curved lines, sample points along the curve and check if any are inside the polygon
+        if (this.controlX !== undefined && this.controlY !== undefined) {
+            const p0 = this._adjustedPoints[0];
+            const p2 = this._adjustedPoints[1];
+            const controlAdjusted = this.computeAdjustedControlPoint();
+            const startT = (_b = (_a = clip.start) === null || _a === void 0 ? void 0 : _a.t) !== null && _b !== void 0 ? _b : 0;
+            const endT = (_d = (_c = clip.end) === null || _c === void 0 ? void 0 : _c.t) !== null && _d !== void 0 ? _d : 1;
+            const samples = 20;
+            for (let i = 0; i <= samples; i++) {
+                const fraction = i / samples;
+                const t = startT + fraction * (endT - startT);
+                const oneMinusT = 1 - t;
+                const bx = oneMinusT * oneMinusT * p0[0] + 2 * oneMinusT * t * controlAdjusted[0] + t * t * p2[0];
+                const by = oneMinusT * oneMinusT * p0[1] + 2 * oneMinusT * t * controlAdjusted[1] + t * t * p2[1];
+                if (KritzelGeometryHelper.isPointInPolygon({ x: bx, y: by }, polyPoints)) {
+                    return true;
+                }
+                // Also check if curve point is within stroke distance of polygon edges
+                for (let j = 0; j < polyPoints.length; j++) {
+                    const q1 = polyPoints[j];
+                    const q2 = polyPoints[(j + 1) % polyPoints.length];
+                    const d = this.pointToLineSegmentDistance(bx, by, q1.x, q1.y, q2.x, q2.y);
+                    if (d <= halfStroke) {
+                        return true;
+                    }
+                }
+            }
+            return false;
+        }
+        // For straight lines, check if line intersects any polygon edge
+        const checkP1 = { x: p1[0], y: p1[1] };
+        const checkP2 = { x: p2[0], y: p2[1] };
+        for (let j = 0; j < polyPoints.length; j++) {
+            const q1 = polyPoints[j];
+            const q2 = polyPoints[(j + 1) % polyPoints.length];
+            if (KritzelGeometryHelper.intersectLines(checkP1, checkP2, q1, q2)) {
+                return true;
+            }
+            // Check distance from polygon edges to line segment
+            const d1 = this.pointToLineSegmentDistance(q1.x, q1.y, checkP1.x, checkP1.y, checkP2.x, checkP2.y);
+            const d2 = this.pointToLineSegmentDistance(q2.x, q2.y, checkP1.x, checkP1.y, checkP2.x, checkP2.y);
+            const d3 = this.pointToLineSegmentDistance(checkP1.x, checkP1.y, q1.x, q1.y, q2.x, q2.y);
+            const d4 = this.pointToLineSegmentDistance(checkP2.x, checkP2.y, q1.x, q1.y, q2.x, q2.y);
+            const minD = Math.min(d1, d2, d3, d4);
+            if (minD <= halfStroke) {
+                return true;
+            }
+        }
+        return false;
+    }
+    updatePosition(x, y) {
+        this.translateX = x;
+        this.translateY = y;
+        this._adjustedPoints = null;
+        this._clipInfo = null;
+        this._core.store.state.objects.update(this);
+    }
+    /**
+     * Updates a specific endpoint of the line (start or end).
+     * The coordinates are in viewBox-local space (relative to x, y origin).
+     * This method recalculates the bounding box dimensions.
+     *
+     * @param handleType - Which endpoint to update: 'start' or 'end'
+     * @param newX - New X coordinate in viewBox-local space
+     * @param newY - New Y coordinate in viewBox-local space
+     */
+    updateEndpoint(handleType, newX, newY) {
+        // Update the appropriate endpoint
+        if (handleType === 'start') {
+            this.startX = newX;
+            this.startY = newY;
+        }
+        else {
+            this.endX = newX;
+            this.endY = newY;
+        }
+        const oldWidth = this.width;
+        const oldHeight = this.height;
+        // Recalculate the bounding box (viewBox dimensions)
+        const { minX, minY, maxX, maxY } = this.calculateBoundingBox();
+        // Calculate the change in origin (in local coordinates)
+        const deltaX = minX - this.x;
+        const deltaY = minY - this.y;
+        const newWidth = maxX - minX;
+        const newHeight = maxY - minY;
+        const deltaWidth = newWidth - oldWidth;
+        const deltaHeight = newHeight - oldHeight;
+        const deltaCx = deltaWidth / 2;
+        const deltaCy = deltaHeight / 2;
+        // Update viewBox dimensions
+        this.x = minX;
+        this.y = minY;
+        this.width = newWidth;
+        this.height = newHeight;
+        // Rotate the delta to world coordinates before applying to translate
+        const cos = Math.cos(this.rotation);
+        const sin = Math.sin(this.rotation);
+        // We need to compensate for:
+        // 1. The shift of the top-left corner (deltaX, deltaY)
+        // 2. The shift of the center point (deltaCx, deltaCy) which affects rotation pivot
+        // Formula: DeltaT = R(DeltaPos + DeltaCenter) - DeltaCenter
+        const vx = deltaX + deltaCx;
+        const vy = deltaY + deltaCy;
+        const rotatedVx = vx * cos - vy * sin;
+        const rotatedVy = vx * sin + vy * cos;
+        const correctionX = rotatedVx - deltaCx;
+        const correctionY = rotatedVy - deltaCy;
+        // Adjust translateX/Y to compensate for the origin shift
+        // so the line stays visually in the same position
+        this.translateX += correctionX / this.scale;
+        this.translateY += correctionY / this.scale;
+        // Clear cached adjusted points
+        this._adjustedPoints = null;
+        this._clipInfo = null;
+        this._core.store.state.objects.update(this);
+    }
+    updateControlPoint(newX, newY) {
+        this.controlX = newX;
+        this.controlY = newY;
+        const oldWidth = this.width;
+        const oldHeight = this.height;
+        // Recalculate the bounding box (viewBox dimensions)
+        const { minX, minY, maxX, maxY } = this.calculateBoundingBox();
+        // Calculate the change in origin (in local coordinates)
+        const deltaX = minX - this.x;
+        const deltaY = minY - this.y;
+        const newWidth = maxX - minX;
+        const newHeight = maxY - minY;
+        const deltaWidth = newWidth - oldWidth;
+        const deltaHeight = newHeight - oldHeight;
+        const deltaCx = deltaWidth / 2;
+        const deltaCy = deltaHeight / 2;
+        // Update viewBox dimensions
+        this.x = minX;
+        this.y = minY;
+        this.width = newWidth;
+        this.height = newHeight;
+        // Rotate the delta to world coordinates before applying to translate
+        const cos = Math.cos(this.rotation);
+        const sin = Math.sin(this.rotation);
+        // We need to compensate for:
+        // 1. The shift of the top-left corner (deltaX, deltaY)
+        // 2. The shift of the center point (deltaCx, deltaCy) which affects rotation pivot
+        // Formula: DeltaT = R(DeltaPos + DeltaCenter) - DeltaCenter
+        const vx = deltaX + deltaCx;
+        const vy = deltaY + deltaCy;
+        const rotatedVx = vx * cos - vy * sin;
+        const rotatedVy = vx * sin + vy * cos;
+        const correctionX = rotatedVx - deltaCx;
+        const correctionY = rotatedVy - deltaCy;
+        // Adjust translateX/Y to compensate for the origin shift
+        // so the line stays visually in the same position
+        this.translateX += correctionX / this.scale;
+        this.translateY += correctionY / this.scale;
+        // Clear cached adjusted points
+        this._adjustedPoints = null;
+        this._clipInfo = null;
+        this._core.store.state.objects.update(this);
+    }
+    computeAdjustedPoints() {
+        const points = [
+            [this.startX, this.startY],
+            [this.endX, this.endY],
+        ];
+        const angle = this.rotation;
+        const cos = Math.cos(angle);
+        const sin = Math.sin(angle);
+        const xs = points.map(p => p[0]);
+        const ys = points.map(p => p[1]);
+        const pivot = {
+            x: (Math.min(...xs) + Math.max(...xs)) / 2,
+            y: (Math.min(...ys) + Math.max(...ys)) / 2,
+        };
+        const { x: cx, y: cy } = pivot;
+        const rotatedPoints = points.map(([x, y]) => {
+            const dx = x - cx;
+            const dy = y - cy;
+            return [cx + dx * cos - dy * sin, cy + dx * sin + dy * cos];
+        });
+        return rotatedPoints.map(([px, py]) => [(px - this.x) / this.scale + this.translateX, (py - this.y) / this.scale + this.translateY]);
+    }
+    pointToLineSegmentDistance(x, y, x1, y1, x2, y2) {
+        const A = x - x1;
+        const B = y - 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 = x - xx;
+        const dy = y - yy;
+        return Math.sqrt(dx * dx + dy * dy);
+    }
+    /**
+     * Calculates the minimum distance from a point to a quadratic Bezier curve.
+     * Uses sampling along the curve to find the closest point.
+     */
+    pointToBezierDistance(x, y, startT = 0, endT = 1) {
+        if (this._adjustedPoints === null) {
+            this._adjustedPoints = this.computeAdjustedPoints();
+        }
+        const p0 = this._adjustedPoints[0];
+        const p2 = this._adjustedPoints[1];
+        // Calculate the adjusted control point
+        const controlAdjusted = this.computeAdjustedControlPoint();
+        let minDistance = Infinity;
+        const samples = 20; // Number of samples along the curve
+        for (let i = 0; i <= samples; i++) {
+            const fraction = i / samples;
+            const t = startT + fraction * (endT - startT);
+            const oneMinusT = 1 - t;
+            // Quadratic Bezier: B(t) = (1-t)²P₀ + 2(1-t)tP₁ + t²P₂
+            const bx = oneMinusT * oneMinusT * p0[0] + 2 * oneMinusT * t * controlAdjusted[0] + t * t * p2[0];
+            const by = oneMinusT * oneMinusT * p0[1] + 2 * oneMinusT * t * controlAdjusted[1] + t * t * p2[1];
+            const dx = x - bx;
+            const dy = y - by;
+            const distance = Math.sqrt(dx * dx + dy * dy);
+            if (distance < minDistance) {
+                minDistance = distance;
+            }
+        }
+        return minDistance;
+    }
+    getClipInfo() {
+        if (this._clipInfo)
+            return this._clipInfo;
+        const startAnchor = this.startAnchor;
+        const endAnchor = this.endAnchor;
+        const result = {};
+        if (startAnchor) {
+            const target = this._core.anchorManager.findAnchorTarget(this, 'start');
+            if (target) {
+                const clip = this._core.anchorManager.computeAnchorClipInfo(this, 'start', target);
+                if (clip) {
+                    result.start = { x: clip.worldX, y: clip.worldY, t: clip.t };
+                }
+            }
+        }
+        if (endAnchor) {
+            const target = this._core.anchorManager.findAnchorTarget(this, 'end');
+            if (target) {
+                const clip = this._core.anchorManager.computeAnchorClipInfo(this, 'end', target);
+                if (clip) {
+                    result.end = { x: clip.worldX, y: clip.worldY, t: clip.t };
+                }
+            }
+        }
+        this._clipInfo = result;
+        return result;
+    }
+    /**
+     * Computes the adjusted control point in world coordinates, accounting for rotation and translation.
+     */
+    computeAdjustedControlPoint() {
+        if (this.controlX === undefined || this.controlY === undefined) {
+            // Return midpoint if no control point
+            return [(this.startX + this.endX) / 2, (this.startY + this.endY) / 2];
+        }
+        const angle = this.rotation;
+        const cos = Math.cos(angle);
+        const sin = Math.sin(angle);
+        // Calculate pivot (center of bounding box for endpoints)
+        const xs = [this.startX, this.endX];
+        const ys = [this.startY, this.endY];
+        const pivot = {
+            x: (Math.min(...xs) + Math.max(...xs)) / 2,
+            y: (Math.min(...ys) + Math.max(...ys)) / 2,
+        };
+        const { x: cx, y: cy } = pivot;
+        // Rotate control point around pivot
+        const dx = this.controlX - cx;
+        const dy = this.controlY - cy;
+        const rotatedX = cx + dx * cos - dy * sin;
+        const rotatedY = cy + dx * sin + dy * cos;
+        // Transform to world coordinates
+        return [(rotatedX - this.x) / this.scale + this.translateX, (rotatedY - this.y) / this.scale + this.translateY];
+    }
+    get rotatedPolygon() {
+        const padding = this.padding;
+        // Use the bounding box which accounts for curve extrema
+        const { minX, minY, maxX, maxY } = KritzelLine.calculateBoundingBox(this.startX, this.startY, this.endX, this.endY, this.controlX, this.controlY, this.strokeWidth);
+        // Convert to local coordinates (relative to this.x, this.y)
+        const localMinX = minX - this.x + padding;
+        const localMinY = minY - this.y + padding;
+        const localMaxX = maxX - this.x + padding;
+        const localMaxY = maxY - this.y + padding;
+        const c1 = { x: localMinX, y: localMinY }; // top-left
+        const c2 = { x: localMaxX, y: localMinY }; // top-right
+        const c3 = { x: localMaxX, y: localMaxY }; // bottom-right
+        const c4 = { x: localMinX, y: localMaxY }; // bottom-left
+        const cx = this.totalWidth / 2;
+        const cy = this.totalHeight / 2;
+        const angle = this.rotation;
+        const cos = Math.cos(angle);
+        const sin = Math.sin(angle);
+        const transform = (p) => {
+            const rx = (p.x - cx) * cos - (p.y - cy) * sin + cx;
+            const ry = (p.x - cx) * sin + (p.y - cy) * cos + cy;
+            return {
+                x: rx / this.scale + this.translateX,
+                y: ry / this.scale + this.translateY,
+            };
+        };
+        return {
+            topLeft: transform(c1),
+            topRight: transform(c2),
+            bottomRight: transform(c3),
+            bottomLeft: transform(c4),
+        };
+    }
+    /**
+     * Calculates the tight bounding box for a quadratic Bezier curve or straight line.
+     * For curves, it finds the extrema points where the derivative equals zero.
+     */
+    static calculateBoundingBox(startX, startY, endX, endY, controlX, controlY, strokeWidth) {
+        let minX = Math.min(startX, endX);
+        let minY = Math.min(startY, endY);
+        let maxX = Math.max(startX, endX);
+        let maxY = Math.max(startY, endY);
+        if (controlX !== undefined && controlY !== undefined) {
+            // For a quadratic Bezier: B(t) = (1-t)²P₀ + 2(1-t)tP₁ + t²P₂
+            // Derivative: B'(t) = 2(1-t)(P₁-P₀) + 2t(P₂-P₁) = 0
+            // Solving for t: t = (P₀ - P₁) / (P₀ - 2P₁ + P₂)
+            // Find extrema for X
+            const aX = startX - 2 * controlX + endX;
+            if (aX !== 0) {
+                const tX = (startX - controlX) / aX;
+                if (tX > 0 && tX < 1) {
+                    const extremaX = (1 - tX) * (1 - tX) * startX + 2 * (1 - tX) * tX * controlX + tX * tX * endX;
+                    minX = Math.min(minX, extremaX);
+                    maxX = Math.max(maxX, extremaX);
+                }
+            }
+            // Find extrema for Y
+            const aY = startY - 2 * controlY + endY;
+            if (aY !== 0) {
+                const tY = (startY - controlY) / aY;
+                if (tY > 0 && tY < 1) {
+                    const extremaY = (1 - tY) * (1 - tY) * startY + 2 * (1 - tY) * tY * controlY + tY * tY * endY;
+                    minY = Math.min(minY, extremaY);
+                    maxY = Math.max(maxY, extremaY);
+                }
+            }
+        }
+        const halfStroke = strokeWidth / 2;
+        return {
+            minX: minX - halfStroke,
+            minY: minY - halfStroke,
+            maxX: maxX + halfStroke,
+            maxY: maxY + halfStroke,
+        };
+    }
+    calculateBoundingBox() {
+        return KritzelLine.calculateBoundingBox(this.startX, this.startY, this.endX, this.endY, this.controlX, this.controlY, this.strokeWidth);
+    }
+    updateDimensions() {
+        const { minX, minY, maxX, maxY } = this.calculateBoundingBox();
+        this.width = maxX - minX;
+        this.height = maxY - minY;
+        this.x = minX;
+        this.y = minY;
+        this.translateX = (this.x + this.translateX) / this.scale;
+        this.translateY = (this.y + this.translateY) / this.scale;
+    }
+    /** Get unique marker ID for SVG defs at the start of the line */
+    get startMarkerId() {
+        return `arrow-start-${this.id}`;
+    }
+    /** Get unique marker ID for SVG defs at the end of the line */
+    get endMarkerId() {
+        return `arrow-end-${this.id}`;
+    }
+    /** Get the arrow size for start or end, defaulting to strokeWidth * 3 */
+    getArrowSize(end) {
+        var _a, _b, _c;
+        const config = end === 'start' ? (_a = this.arrows) === null || _a === void 0 ? void 0 : _a.start : (_b = this.arrows) === null || _b === void 0 ? void 0 : _b.end;
+        return (_c = config === null || config === void 0 ? void 0 : config.size) !== null && _c !== void 0 ? _c : this.strokeWidth * 3;
+    }
+    /** Get the arrow fill color for start or end, defaulting to stroke color */
+    getArrowFill(end) {
+        var _a, _b, _c;
+        const config = end === 'start' ? (_a = this.arrows) === null || _a === void 0 ? void 0 : _a.start : (_b = this.arrows) === null || _b === void 0 ? void 0 : _b.end;
+        const color = (_c = config === null || config === void 0 ? void 0 : config.fill) !== null && _c !== void 0 ? _c : this.stroke;
+        return KritzelColorHelper.resolveThemeColor(color);
+    }
+    /**
+     * Generate SVG path data for an arrow head based on the given style.
+     * The path is designed to fit in a 10x10 viewBox with the tip at (10, 5).
+     * @param style The arrow head style
+     * @returns SVG path data string
+     */
+    getArrowPath(style = 'triangle') {
+        switch (style) {
+            case 'triangle':
+                return 'M 0 0 L 10 5 L 0 10 z';
+            case 'open':
+                return 'M 0 0 L 10 5 L 0 10';
+            case 'diamond':
+                return 'M 0 5 L 5 0 L 10 5 L 5 10 z';
+            case 'circle':
+                return 'M 5,0 A 5,5 0 1,1 5,10 A 5,5 0 1,1 5,0';
+            default:
+                return 'M 0 0 L 10 5 L 0 10 z';
+        }
+    }
+    /** Check if start arrow is enabled */
+    get hasStartArrow() {
+        var _a, _b;
+        return ((_b = (_a = this.arrows) === null || _a === void 0 ? void 0 : _a.start) === null || _b === void 0 ? void 0 : _b.enabled) === true;
+    }
+    /** Check if end arrow is enabled */
+    get hasEndArrow() {
+        var _a, _b;
+        return ((_b = (_a = this.arrows) === null || _a === void 0 ? void 0 : _a.end) === null || _b === void 0 ? void 0 : _b.enabled) === true;
+    }
+}