@easemate/web-kit 0.1.0

package/build/components/curve/canvas.js

@@ -0,0 +1,1204 @@
+import { html, svg } from 'lit-html';
+import { BEZIER_CONTROL_MAX_Y, BEZIER_CONTROL_MIN_Y, DEFAULT_HANDLE_LENGTH, DRAG_ACTIVATION_DISTANCE_PX_SQUARED, HIT_AREA_RADIUS, LINEAR_HIT_THRESHOLD, LINEAR_PATH_SAMPLES, SVG_HEIGHT, SVG_WIDTH } from "./constants.js";
+import { canvasStyles } from "./styles.js";
+import { generateGridLines } from "./svg-renderer.js";
+import { EasingType, MAX_LINEAR_POINTS } from "./types.js";
+import { clampPoint, cloneLinearPoint, cubicBezierPath, ensureLinearPointId, getLinearApproximation, linearDisplayPath, MIN_LINEAR_DELTA, normalizeLinearPoints, normalizeVector, vectorLength } from "./utils.js";
+import { Component } from '~/decorators/Component';
+import { Prop } from '~/decorators/Prop';
+import { Query } from '~/decorators/Query';
+import { dispatchControlEvent } from '~/elements/shared';
+@Component({
+    tag: 'ease-curve-canvas',
+    styles: canvasStyles,
+    template() {
+        const hoverPreviewPath = this.getHoverCurvePath();
+        const controlElements = this.getControlElements();
+        const hoverInsertElements = this.getHoverInsertElements();
+        const curvePath = this.getCurvePath();
+        return html `
+      <svg
+        viewBox="0 0 ${SVG_WIDTH} ${SVG_HEIGHT}"
+        width="${SVG_WIDTH}"
+        height="${SVG_HEIGHT}"
+        @pointerdown=${this.handlePointerDown}
+        @pointermove=${this.handlePointerMove}
+        @pointerup=${this.handlePointerUp}
+        @pointerleave=${this.handlePointerLeave}
+        @pointercancel=${this.handlePointerLeave}
+      >
+        ${this.showGrid ? svg `<g style="view-transition-name: grid-lines">${this.getGridLines()}</g>` : null}
+        ${hoverPreviewPath ? html `<path class="curve-path curve-path--preview" d=${hoverPreviewPath}></path>` : null}
+        <path class="curve-path" d=${curvePath} />
+        ${controlElements}
+        ${hoverInsertElements}
+      </svg>
+    `;
+    }
+})
+export class CurveCanvas extends HTMLElement {
+    @Prop({ reflect: true })
+    accessor easingType;
+    @Prop({ type: Object, reflect: false })
+    accessor points;
+    @Prop({ type: Boolean, reflect: true, defaultValue: true })
+    accessor showGrid;
+    @Prop({ type: Boolean, reflect: true, defaultValue: false })
+    accessor snapToGrid;
+    @Prop({ type: Number, reflect: true, defaultValue: 8 })
+    accessor gridSize = 8;
+    @Prop({ type: Number, reflect: false, defaultValue: null })
+    accessor focusedLinearIndex = null;
+    @Prop({ type: Number, reflect: true, defaultValue: 0 })
+    accessor simplify = 0;
+    @Prop({ type: Number, reflect: true, defaultValue: 5 })
+    accessor round = 5;
+    @Query('svg')
+    accessor svgElement;
+    #isDragging = false;
+    #dragIndex = null;
+    #dragMode = null;
+    #hoverPoint = null;
+    #hoverInsertPreview = null;
+    #dragStartPoints = null;
+    #dragPointId = null;
+    #pendingDrag = null;
+    #getEventTarget = () => {
+        const root = this.getRootNode();
+        if (root instanceof ShadowRoot && root.host instanceof HTMLElement) {
+            return root.host;
+        }
+        return this;
+    };
+    #renderCubicBezier = () => {
+        const points = this.#getCubicBezierPoints();
+        if (!points) {
+            console.warn('Invalid cubic-bezier points for rendering:', this.points);
+            return [];
+        }
+        try {
+            const anchorStart = this.#toSvgCoords({ x: 0, y: 0 });
+            const anchorEnd = this.#toSvgCoords({ x: 1, y: 1 });
+            const controlOne = this.#toSvgCoords(points.p1);
+            const controlTwo = this.#toSvgCoords(points.p2);
+            const elements = [];
+            const handlePathOne = this.#createHandlePath(anchorStart, controlOne);
+            const handlePathTwo = this.#createHandlePath(anchorEnd, controlTwo);
+            elements.push(svg `<circle
+        class="hit-area-point"
+        cx="${controlOne.x}"
+        cy="${controlOne.y}"
+        r="${HIT_AREA_RADIUS}"
+        data-index="0"
+        data-role="point"
+      />`);
+            elements.push(svg `<circle
+        class="hit-area-point"
+        cx="${controlTwo.x}"
+        cy="${controlTwo.y}"
+        r="${HIT_AREA_RADIUS}"
+        data-index="1"
+        data-role="point"
+      />`);
+            if (handlePathOne) {
+                elements.push(svg `<path
+          class="control-point ${this.#dragIndex === 0 && this.#dragMode === 'point' ? 'selected' : ''}"
+          d="${handlePathOne}"
+          data-index="0"
+          data-role="point"
+        />`);
+            }
+            if (handlePathTwo) {
+                elements.push(svg `<path
+          class="control-point ${this.#dragIndex === 1 && this.#dragMode === 'point' ? 'selected' : ''}"
+          d="${handlePathTwo}"
+          data-index="1"
+          data-role="point"
+        />`);
+            }
+            elements.push(svg `<circle class="anchor-point-start" cx="${anchorStart.x}" cy="${anchorStart.y}" />`);
+            elements.push(svg `<circle class="anchor-point-start" cx="${anchorEnd.x}" cy="${anchorEnd.y}" />`);
+            return elements;
+        }
+        catch (error) {
+            console.error('Error rendering cubic-bezier elements:', error);
+            return [];
+        }
+    };
+    #toSvgCoords = (p) => {
+        return {
+            x: p.x * SVG_WIDTH,
+            y: (1 - p.y) * SVG_HEIGHT
+        };
+    };
+    #renderLinear = () => {
+        const points = this.#getLinearPoints();
+        if (!points) {
+            return [];
+        }
+        try {
+            const elements = [];
+            const focusedIndex = this.focusedLinearIndex;
+            points.forEach((point, index) => {
+                if (!point) {
+                    return;
+                }
+                const isPointFocused = focusedIndex === index;
+                const isDraggingPoint = this.#isDragging && this.#dragIndex === index;
+                if (!isPointFocused && !isDraggingPoint) {
+                    return;
+                }
+                const anchorSvg = this.#toSvgCoords(point);
+                if (index > 0 && (point.cpInX !== undefined || point.cpInY !== undefined)) {
+                    this.#renderLinearHandle(elements, point, anchorSvg, index, 'In');
+                }
+                if (index < points.length - 1 && (point.cpOutX !== undefined || point.cpOutY !== undefined)) {
+                    this.#renderLinearHandle(elements, point, anchorSvg, index, 'Out');
+                }
+            });
+            points.forEach((point, index) => {
+                if (!point) {
+                    return;
+                }
+                const isPointFocused = focusedIndex === index;
+                const isPointActive = (this.#dragMode === 'point' && this.#dragIndex === index) || isPointFocused;
+                const anchorSvg = this.#toSvgCoords(point);
+                elements.push(svg `<circle
+          class="hit-area-point"
+          cx="${anchorSvg.x}"
+          cy="${anchorSvg.y}"
+          r="${HIT_AREA_RADIUS}"
+          data-index="${index}"
+          data-role="point"
+        />`);
+                elements.push(svg `<circle
+          class="linear-point ${isPointActive ? 'selected' : ''}"
+          cx="${anchorSvg.x}"
+          cy="${anchorSvg.y}"
+          data-index="${index}"
+          data-role="point"
+          title="Point P${index + 1}: ${Math.round(point.x * 100)}%, ${Math.round(point.y * 100)}%"
+        />`);
+            });
+            return elements;
+        }
+        catch (error) {
+            console.error('Error rendering linear points:', error);
+            return [];
+        }
+    };
+    #renderLinearHandle(elements, point, anchorSvg, index, direction) {
+        const dx = direction === 'In' ? (point.cpInX ?? 0) : (point.cpOutX ?? 0);
+        const dy = direction === 'In' ? (point.cpInY ?? 0) : (point.cpOutY ?? 0);
+        const handlePos = { x: point.x + dx, y: point.y + dy };
+        const handleSvg = this.#toSvgCoords(handlePos);
+        const role = direction === 'In' ? 'handleIn' : 'handleOut';
+        const dragMode = direction === 'In' ? 'handleIn' : 'handleOut';
+        const isHandleActive = this.#dragMode === dragMode && this.#dragIndex === index;
+        const handlePath = this.#createHandlePath(anchorSvg, handleSvg);
+        if (!handlePath) {
+            return;
+        }
+        elements.push(svg `<circle
+        class="hit-area-handle"
+        cx="${handleSvg.x}"
+        cy="${handleSvg.y}"
+        r="${HIT_AREA_RADIUS}"
+        data-index="${index}"
+        data-role="${role}"
+    />`);
+        elements.push(svg `<path
+        class="linear-handle ${isHandleActive ? 'selected' : ''}"
+        d="${handlePath}"
+        data-index="${index}"
+        data-role="${role}"
+        title="Handle ${direction}: ${Math.round(handlePos.x * 100)}%, ${Math.round(handlePos.y * 100)}%"
+    />`);
+    }
+    #getCurvePath = () => {
+        try {
+            if (this.easingType === EasingType.CUBIC_BEZIER) {
+                const points = this.#getCubicBezierPoints();
+                if (!points) {
+                    console.warn('Invalid cubic-bezier points:', this.points);
+                    return '';
+                }
+                return cubicBezierPath(points);
+            }
+            const points = this.#getLinearPoints();
+            if (!points || points.length < 2) {
+                return '';
+            }
+            if (this.simplify > 0) {
+                const approxPoints = getLinearApproximation(points, {
+                    simplify: this.simplify,
+                    round: this.round
+                });
+                return linearDisplayPath(approxPoints);
+            }
+            return linearDisplayPath(points);
+        }
+        catch (error) {
+            console.error('Error generating curve path:', error);
+            return '';
+        }
+    };
+    #getHoverCurvePath = () => {
+        if (this.#isDragging) {
+            return '';
+        }
+        try {
+            if (this.easingType === EasingType.CUBIC_BEZIER) {
+                const hoverPoint = this.#hoverPoint;
+                if (!hoverPoint) {
+                    return '';
+                }
+                const points = this.#getCubicBezierPoints();
+                if (!points) {
+                    return '';
+                }
+                return cubicBezierPath({
+                    p1: hoverPoint,
+                    p2: points.p2
+                });
+            }
+            if (this.easingType === EasingType.LINEAR) {
+                return this.#hoverInsertPreview?.path ?? '';
+            }
+            return '';
+        }
+        catch (error) {
+            console.error('Error generating hover curve path:', error);
+            return '';
+        }
+    };
+    getHoverInsertElements() {
+        if (this.easingType !== EasingType.LINEAR) {
+            return null;
+        }
+        const preview = this.#hoverInsertPreview;
+        if (!preview || !preview.insertedPoint) {
+            return null;
+        }
+        const point = preview.insertedPoint;
+        const anchor = this.#toSvgCoords(point);
+        const elements = [];
+        if (point.cpInX !== undefined || point.cpInY !== undefined) {
+            const handlePoint = this.#toSvgCoords({
+                x: point.x + (point.cpInX ?? 0),
+                y: point.y + (point.cpInY ?? 0)
+            });
+            const handlePath = this.#createHandlePath(anchor, handlePoint);
+            if (handlePath) {
+                elements.push(svg `<path
+            class="linear-handle linear-handle--preview"
+            d="${handlePath}"
+          />`);
+            }
+        }
+        if (point.cpOutX !== undefined || point.cpOutY !== undefined) {
+            const handlePoint = this.#toSvgCoords({
+                x: point.x + (point.cpOutX ?? 0),
+                y: point.y + (point.cpOutY ?? 0)
+            });
+            const handlePath = this.#createHandlePath(anchor, handlePoint);
+            if (handlePath) {
+                elements.push(svg `<path
+            class="linear-handle linear-handle--preview"
+            d="${handlePath}"
+          />`);
+            }
+        }
+        elements.push(svg `<circle class="linear-point linear-point--preview" cx="${anchor.x}" cy="${anchor.y}" />`);
+        return svg `<g class="linear-preview-group" pointer-events="none">${elements}</g>`;
+    }
+    #createHandlePath(anchorSvg, handleSvg) {
+        const vecX = handleSvg.x - anchorSvg.x;
+        const vecY = handleSvg.y - anchorSvg.y;
+        const length = Math.sqrt(vecX * vecX + vecY * vecY);
+        const circleRadius = 4.5;
+        const barHalfHeight = 0.66;
+        if (length < circleRadius + 2) {
+            return null;
+        }
+        const dirX = vecX / length;
+        const dirY = vecY / length;
+        const perpX = -dirY;
+        const perpY = dirX;
+        const cx = handleSvg.x;
+        const cy = handleSvg.y;
+        const transitionZone = Math.min(8, (length - circleRadius) * 0.5);
+        const barEndDist = length - circleRadius - transitionZone;
+        const barTopStartX = anchorSvg.x + perpX * barHalfHeight;
+        const barTopStartY = anchorSvg.y + perpY * barHalfHeight;
+        const barBottomStartX = anchorSvg.x - perpX * barHalfHeight;
+        const barBottomStartY = anchorSvg.y - perpY * barHalfHeight;
+        const barTopEndX = anchorSvg.x + dirX * barEndDist + perpX * barHalfHeight;
+        const barTopEndY = anchorSvg.y + dirY * barEndDist + perpY * barHalfHeight;
+        const barBottomEndX = anchorSvg.x + dirX * barEndDist - perpX * barHalfHeight;
+        const barBottomEndY = anchorSvg.y + dirY * barEndDist - perpY * barHalfHeight;
+        const circleTopX = cx + perpX * circleRadius;
+        const circleTopY = cy + perpY * circleRadius;
+        const circleBottomX = cx - perpX * circleRadius;
+        const circleBottomY = cy - perpY * circleRadius;
+        const ctrl1Dist = transitionZone * 0.35;
+        const ctrl2Dist = transitionZone * 0.65;
+        const ctrl1TopX = barTopEndX + dirX * ctrl1Dist;
+        const ctrl1TopY = barTopEndY + dirY * ctrl1Dist;
+        const ctrl2TopX = circleTopX - dirX * ctrl2Dist;
+        const ctrl2TopY = circleTopY - dirY * ctrl2Dist;
+        const ctrl1BottomX = barBottomEndX + dirX * ctrl1Dist;
+        const ctrl1BottomY = barBottomEndY + dirY * ctrl1Dist;
+        const ctrl2BottomX = circleBottomX - dirX * ctrl2Dist;
+        const ctrl2BottomY = circleBottomY - dirY * ctrl2Dist;
+        return `
+      M ${circleBottomX} ${circleBottomY}
+      C ${ctrl2BottomX} ${ctrl2BottomY} ${ctrl1BottomX} ${ctrl1BottomY} ${barBottomEndX} ${barBottomEndY}
+      L ${barBottomStartX} ${barBottomStartY}
+      A ${barHalfHeight} ${barHalfHeight} 0 0 0 ${barTopStartX} ${barTopStartY}
+      L ${barTopEndX} ${barTopEndY}
+      C ${ctrl1TopX} ${ctrl1TopY} ${ctrl2TopX} ${ctrl2TopY} ${circleTopX} ${circleTopY}
+      A ${circleRadius} ${circleRadius} 0 1 0 ${circleBottomX} ${circleBottomY}
+      Z
+    `;
+    }
+    #getCubicBezierPoints = () => {
+        if (Array.isArray(this.points)) {
+            return null;
+        }
+        return this.points ?? null;
+    };
+    #getLinearPoints = () => {
+        if (!Array.isArray(this.points)) {
+            return null;
+        }
+        this.#ensureLinearPointIds(this.points);
+        return this.points;
+    };
+    #ensureLinearPointIds = (points) => {
+        if (!points) {
+            return;
+        }
+        for (const point of points) {
+            if (!point) {
+                continue;
+            }
+            ensureLinearPointId(point);
+        }
+    };
+    #createLinearStartPointMap = (points) => {
+        if (!points) {
+            return null;
+        }
+        const map = new Map();
+        for (const point of points) {
+            if (!point) {
+                continue;
+            }
+            const id = ensureLinearPointId(point);
+            map.set(id, cloneLinearPoint(point));
+        }
+        return map;
+    };
+    #getDistanceToLinearPath(point, points) {
+        if (points.length < 2) {
+            return Number.POSITIVE_INFINITY;
+        }
+        let minDistanceSquared = Number.POSITIVE_INFINITY;
+        for (let index = 0; index < points.length - 1; index += 1) {
+            const start = points[index];
+            const end = points[index + 1];
+            if (!start || !end) {
+                continue;
+            }
+            const cp1 = {
+                x: start.x + (start.cpOutX ?? 0),
+                y: start.y + (start.cpOutY ?? 0)
+            };
+            const cp2 = {
+                x: end.x + (end.cpInX ?? 0),
+                y: end.y + (end.cpInY ?? 0)
+            };
+            for (let sample = 0; sample <= LINEAR_PATH_SAMPLES; sample += 1) {
+                const t = sample / LINEAR_PATH_SAMPLES;
+                const samplePoint = evaluateCubicPointNormalized(t, start, cp1, cp2, end);
+                const dx = point.x - samplePoint.x;
+                const dy = point.y - samplePoint.y;
+                const distanceSquared = dx * dx + dy * dy;
+                if (distanceSquared < minDistanceSquared) {
+                    minDistanceSquared = distanceSquared;
+                }
+            }
+        }
+        return Math.sqrt(minDistanceSquared);
+    }
+    #isPointNearLinearPath(point, points) {
+        const distance = this.#getDistanceToLinearPath(point, points);
+        return distance <= LINEAR_HIT_THRESHOLD;
+    }
+    #isNearExistingPointOrHandle(position, points) {
+        const mouseSvg = this.#toSvgCoords(position);
+        const thresholdSquared = HIT_AREA_RADIUS * HIT_AREA_RADIUS;
+        for (const point of points) {
+            if (!point) {
+                continue;
+            }
+            const pointSvg = this.#toSvgCoords(point);
+            const dx = pointSvg.x - mouseSvg.x;
+            const dy = pointSvg.y - mouseSvg.y;
+            if (dx * dx + dy * dy < thresholdSquared) {
+                return true;
+            }
+            if (point.cpInX !== undefined || point.cpInY !== undefined) {
+                const handleIn = {
+                    x: point.x + (point.cpInX ?? 0),
+                    y: point.y + (point.cpInY ?? 0)
+                };
+                const handleInSvg = this.#toSvgCoords(handleIn);
+                const hdx = handleInSvg.x - mouseSvg.x;
+                const hdy = handleInSvg.y - mouseSvg.y;
+                if (hdx * hdx + hdy * hdy < thresholdSquared) {
+                    return true;
+                }
+            }
+            if (point.cpOutX !== undefined || point.cpOutY !== undefined) {
+                const handleOut = {
+                    x: point.x + (point.cpOutX ?? 0),
+                    y: point.y + (point.cpOutY ?? 0)
+                };
+                const handleOutSvg = this.#toSvgCoords(handleOut);
+                const hdx = handleOutSvg.x - mouseSvg.x;
+                const hdy = handleOutSvg.y - mouseSvg.y;
+                if (hdx * hdx + hdy * hdy < thresholdSquared) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+    #getMousePosition = (event, options) => {
+        const svgElement = this.svgElement;
+        if (!svgElement) {
+            return { x: 0, y: 0 };
+        }
+        const rect = svgElement.getBoundingClientRect();
+        const svgX = event.clientX - rect.left;
+        const svgY = event.clientY - rect.top;
+        let x = svgX / rect.width;
+        let y = 1 - svgY / rect.height;
+        const skipSnap = options?.skipSnap ?? false;
+        const shouldSnap = !skipSnap &&
+            this.snapToGrid &&
+            !(this.#isDragging && (this.#dragMode === 'handleIn' || this.#dragMode === 'handleOut'));
+        if (shouldSnap) {
+            const ratioX = SVG_WIDTH / this.gridSize;
+            const ratioY = SVG_HEIGHT / this.gridSize;
+            x = Math.round(x * ratioX) / ratioX;
+            y = Math.round(y * ratioY) / ratioY;
+        }
+        const bezierBounds = this.easingType === EasingType.CUBIC_BEZIER
+            ? { minY: BEZIER_CONTROL_MIN_Y, maxY: BEZIER_CONTROL_MAX_Y }
+            : undefined;
+        return clampPoint({ x, y }, bezierBounds);
+    };
+    #constrainLinearPoint = (index, position, points) => {
+        let x = position.x;
+        if (index === 0) {
+            x = 0;
+        }
+        else if (index === points.length - 1) {
+            x = 1;
+        }
+        else {
+            x = Math.min(Math.max(x, MIN_LINEAR_DELTA), 1 - MIN_LINEAR_DELTA);
+        }
+        const clamped = clampPoint({ x, y: position.y }, { minY: -2, maxY: 3 });
+        const sourcePoint = points[index];
+        return {
+            ...sourcePoint,
+            x: clamped.x,
+            y: clamped.y
+        };
+    };
+    #emitPoints = (value, event) => {
+        const target = this.#getEventTarget();
+        const detail = { value, event };
+        dispatchControlEvent(target, 'points-change', detail);
+    };
+    #notifyLinearFocus = (index, event) => {
+        if (this.easingType !== EasingType.LINEAR) {
+            return;
+        }
+        const target = this.#getEventTarget();
+        const detail = { value: index, event };
+        dispatchControlEvent(target, 'linear-point-focus', detail);
+    };
+    #toggleLinearHandleLinking = (index, event) => {
+        const points = this.#getLinearPoints();
+        if (!points || index < 0 || index >= points.length) {
+            return;
+        }
+        const point = points[index];
+        if (!point) {
+            return;
+        }
+        const updatedPoints = [...points];
+        const updatedPoint = { ...point };
+        updatedPoints[index] = updatedPoint;
+        const newLinkingState = !updatedPoint.isLinked;
+        updatedPoint.isLinked = newLinkingState;
+        updatedPoint.mirrorLength = Boolean(newLinkingState);
+        if (newLinkingState) {
+            this.#ensureLinkedHandles(updatedPoint, index, points);
+        }
+        const normalizedPoints = normalizeLinearPoints(updatedPoints);
+        this.points = normalizedPoints;
+        this.#emitPoints(normalizedPoints, event);
+        this.#notifyLinearFocus(index, event);
+        this.requestRender();
+    };
+    #ensureLinkedHandles(point, index, points) {
+        const prev = points[index - 1];
+        const next = points[index + 1];
+        let refDx = point.cpOutX ?? -(point.cpInX ?? 0);
+        let refDy = point.cpOutY ?? -(point.cpInY ?? 0);
+        if (refDx === 0 && refDy === 0) {
+            let dirX = 0;
+            let dirY = 0;
+            if (prev && next) {
+                dirX = next.x - prev.x;
+                dirY = next.y - prev.y;
+            }
+            else if (next) {
+                dirX = next.x - point.x;
+                dirY = next.y - point.y;
+            }
+            else if (prev) {
+                dirX = point.x - prev.x;
+                dirY = point.y - prev.y;
+            }
+            else {
+                dirX = 1;
+                dirY = 0;
+            }
+            const direction = normalizeVector(dirX, dirY);
+            const length = DEFAULT_HANDLE_LENGTH;
+            point.cpInX = -direction.dx * length;
+            point.cpInY = -direction.dy * length;
+            point.cpOutX = direction.dx * length;
+            point.cpOutY = direction.dy * length;
+            refDx = point.cpOutX;
+            refDy = point.cpOutY;
+        }
+        if (refDx === 0 && refDy === 0) {
+            return;
+        }
+        const normalized = normalizeVector(refDx, refDy);
+        const referenceLength = vectorLength(refDx, refDy) || DEFAULT_HANDLE_LENGTH;
+        const inLength = vectorLength(point.cpInX ?? 0, point.cpInY ?? 0) || referenceLength;
+        point.cpInX = -normalized.dx * inLength;
+        point.cpInY = -normalized.dy * inLength;
+        const outLength = vectorLength(point.cpOutX ?? 0, point.cpOutY ?? 0) || referenceLength;
+        point.cpOutX = normalized.dx * outLength;
+        point.cpOutY = normalized.dy * outLength;
+        if (point.mirrorLength !== false) {
+            this.#alignLinkedHandleLengths(point);
+        }
+    }
+    #alignLinkedHandleLengths(point) {
+        if (!point.isLinked) {
+            point.mirrorLength = false;
+            return;
+        }
+        const outLength = vectorLength(point.cpOutX ?? 0, point.cpOutY ?? 0);
+        const inLength = vectorLength(point.cpInX ?? 0, point.cpInY ?? 0);
+        const targetLength = Math.max(outLength, inLength);
+        if (targetLength <= 0) {
+            return;
+        }
+        if (outLength > 0) {
+            const outDirection = normalizeVector(point.cpOutX ?? 0, point.cpOutY ?? 0);
+            point.cpOutX = outDirection.dx * targetLength;
+            point.cpOutY = outDirection.dy * targetLength;
+        }
+        else if (inLength > 0) {
+            const inDirection = normalizeVector(point.cpInX ?? 0, point.cpInY ?? 0);
+            point.cpOutX = -inDirection.dx * targetLength;
+            point.cpOutY = -inDirection.dy * targetLength;
+        }
+        if (inLength > 0) {
+            const inDirection = normalizeVector(point.cpInX ?? 0, point.cpInY ?? 0);
+            point.cpInX = inDirection.dx * targetLength;
+            point.cpInY = inDirection.dy * targetLength;
+        }
+        else if (outLength > 0) {
+            const outDirection = normalizeVector(point.cpOutX ?? 0, point.cpOutY ?? 0);
+            point.cpInX = -outDirection.dx * targetLength;
+            point.cpInY = -outDirection.dy * targetLength;
+        }
+    }
+    getGridLines() {
+        return generateGridLines(this.gridSize);
+    }
+    getControlElements() {
+        return this.easingType === EasingType.CUBIC_BEZIER ? this.#renderCubicBezier() : this.#renderLinear();
+    }
+    getCurvePath() {
+        return this.#getCurvePath();
+    }
+    getHoverCurvePath() {
+        return this.#getHoverCurvePath();
+    }
+    handlePointerDown = (event) => {
+        event.preventDefault();
+        let linearPoints = this.easingType === EasingType.LINEAR ? this.#getLinearPoints() : null;
+        this.#dragStartPoints = this.#createLinearStartPointMap(linearPoints);
+        this.#pendingDrag = null;
+        this.#dragPointId = null;
+        const target = event.target;
+        if (!(target instanceof SVGElement)) {
+            return;
+        }
+        const role = target.getAttribute('data-role');
+        const indexAttribute = target.getAttribute('data-index');
+        if (indexAttribute !== null) {
+            const index = Number.parseInt(indexAttribute, 10);
+            if (Number.isNaN(index)) {
+                return;
+            }
+            if (this.easingType === EasingType.LINEAR) {
+                if (role === 'handleIn' || role === 'handleOut') {
+                    const point = linearPoints?.[index];
+                    if (point) {
+                        this.#dragPointId = ensureLinearPointId(point);
+                    }
+                    this.svgElement?.setPointerCapture(event.pointerId);
+                    this.#isDragging = true;
+                    this.#dragMode = role;
+                    this.#dragIndex = index;
+                    this.#pendingDrag = null;
+                    this.#hoverPoint = null;
+                    this.#notifyLinearFocus(index, event);
+                    this.handlePointerMove(event);
+                    this.requestRender();
+                    return;
+                }
+                if (role === 'point') {
+                    if (event.detail === 2) {
+                        this.#toggleLinearHandleLinking(index, event);
+                        return;
+                    }
+                    const point = linearPoints?.[index];
+                    if (point) {
+                        this.#dragPointId = ensureLinearPointId(point);
+                    }
+                    this.#notifyLinearFocus(index, event);
+                    this.svgElement?.setPointerCapture(event.pointerId);
+                    this.#isDragging = false;
+                    this.#dragMode = 'point';
+                    this.#dragIndex = index;
+                    this.#pendingDrag = {
+                        mode: 'point',
+                        index,
+                        startX: event.clientX,
+                        startY: event.clientY
+                    };
+                    this.#hoverPoint = null;
+                    this.requestRender();
+                    return;
+                }
+            }
+            if (this.easingType === EasingType.CUBIC_BEZIER && role === 'point') {
+                this.svgElement?.setPointerCapture(event.pointerId);
+                this.#isDragging = true;
+                this.#dragMode = 'point';
+                this.#dragIndex = index;
+                this.#hoverPoint = null;
+                this.requestRender();
+                return;
+            }
+        }
+        if (indexAttribute === null) {
+            if (this.easingType === EasingType.LINEAR) {
+                const insertResult = this.#insertLinearPoint(this.#getMousePosition(event), event);
+                if (insertResult) {
+                    linearPoints = this.#getLinearPoints();
+                    this.#dragStartPoints = this.#createLinearStartPointMap(linearPoints);
+                    this.#dragPointId = insertResult.pointId;
+                    this.svgElement?.setPointerCapture(event.pointerId);
+                    this.#isDragging = true;
+                    this.#dragMode = 'point';
+                    this.#dragIndex = insertResult.index;
+                    this.#pendingDrag = null;
+                    this.#hoverPoint = null;
+                    this.#notifyLinearFocus(insertResult.index, event);
+                    this.requestRender();
+                    return;
+                }
+                else {
+                    this.#notifyLinearFocus(null, event);
+                }
+            }
+            if (this.easingType === EasingType.CUBIC_BEZIER) {
+                this.#hoverPoint = this.#getMousePosition(event);
+                this.svgElement?.setPointerCapture(event.pointerId);
+                this.#isDragging = true;
+                this.#dragMode = 'point';
+                this.#dragIndex = 0;
+                this.#pendingDrag = null;
+                this.handlePointerMove(event);
+                this.requestRender();
+                return;
+            }
+        }
+    };
+    handlePointerMove = (event) => {
+        if (!this.svgElement) {
+            return;
+        }
+        const skipSnapForPending = !this.#isDragging && this.#pendingDrag !== null && this.#pendingDrag.mode === 'point';
+        let position = this.#getMousePosition(event, { skipSnap: skipSnapForPending });
+        if (this.#pendingDrag && !this.#isDragging) {
+            const deltaX = event.clientX - this.#pendingDrag.startX;
+            const deltaY = event.clientY - this.#pendingDrag.startY;
+            const distanceSquared = deltaX * deltaX + deltaY * deltaY;
+            if (distanceSquared >= DRAG_ACTIVATION_DISTANCE_PX_SQUARED) {
+                this.#isDragging = true;
+                this.#pendingDrag = null;
+                if (skipSnapForPending) {
+                    position = this.#getMousePosition(event);
+                }
+            }
+            else {
+                return;
+            }
+        }
+        if (this.#isDragging && this.#dragIndex !== null) {
+            event.preventDefault();
+            this.#hoverInsertPreview = null;
+            if (this.easingType === EasingType.LINEAR) {
+                const points = this.#getLinearPoints();
+                if (!points || this.#dragIndex >= points.length) {
+                    return;
+                }
+                if (this.#dragMode === 'point') {
+                    this.#handleLinearPointDrag(points, this.#dragIndex, position, event);
+                    return;
+                }
+                if (this.#dragMode === 'handleIn' || this.#dragMode === 'handleOut') {
+                    this.#handleLinearHandleDrag(points, this.#dragIndex, position, event);
+                    return;
+                }
+            }
+            if (this.easingType === EasingType.CUBIC_BEZIER) {
+                const points = this.#getCubicBezierPoints();
+                if (!points) {
+                    return;
+                }
+                const updatedPoints = { ...points };
+                let adjustedPosition = position;
+                if (event.shiftKey) {
+                    const reference = this.#dragIndex === 0 ? points.p1 : points.p2;
+                    if (reference) {
+                        const deltaX = Math.abs(position.x - reference.x);
+                        const deltaY = Math.abs(position.y - reference.y);
+                        adjustedPosition = deltaX > deltaY ? { x: position.x, y: reference.y } : { x: reference.x, y: position.y };
+                    }
+                }
+                const clampedPosition = clampPoint(adjustedPosition, {
+                    minY: BEZIER_CONTROL_MIN_Y,
+                    maxY: BEZIER_CONTROL_MAX_Y
+                });
+                if (this.#dragIndex === 0) {
+                    updatedPoints.p1 = clampedPosition;
+                }
+                else if (this.#dragIndex === 1) {
+                    updatedPoints.p2 = clampedPosition;
+                }
+                else {
+                    return;
+                }
+                this.points = updatedPoints;
+                this.#emitPoints(updatedPoints, event);
+                this.requestRender();
+                return;
+            }
+            return;
+        }
+        if (this.easingType === EasingType.LINEAR) {
+            const points = this.#getLinearPoints();
+            // Use rawPosition for the hit test to avoid flickering when snapToGrid is on
+            if (points && this.#isNearExistingPointOrHandle(position, points)) {
+                this.#hoverInsertPreview = null;
+                this.#hoverPoint = null;
+                this.requestRender();
+                return;
+            }
+            const preview = this.#buildLinearInsertPreview(position);
+            this.#hoverInsertPreview = preview;
+            if (!preview) {
+                this.#hoverPoint = null;
+                this.requestRender();
+                return;
+            }
+        }
+        else {
+            this.#hoverInsertPreview = null;
+        }
+        this.#hoverPoint = position;
+        this.requestRender();
+    };
+    #handleLinearPointDrag(points, index, position, event) {
+        let workingPosition = position;
+        const currentPoint = points[index];
+        const activePointId = currentPoint ? (this.#dragPointId ?? ensureLinearPointId(currentPoint)) : null;
+        if (event.shiftKey && this.#dragStartPoints && activePointId) {
+            const startPoint = this.#dragStartPoints.get(activePointId);
+            if (startPoint) {
+                const deltaX = Math.abs(position.x - startPoint.x);
+                const deltaY = Math.abs(position.y - startPoint.y);
+                workingPosition = deltaX > deltaY ? { x: position.x, y: startPoint.y } : { x: startPoint.x, y: position.y };
+            }
+        }
+        const constrainedPoint = this.#constrainLinearPoint(index, workingPosition, points);
+        const updatedPoints = points.map((point, i) => {
+            if (i === index) {
+                return constrainedPoint;
+            }
+            return { ...point };
+        });
+        const normalizedPoints = normalizeLinearPoints(updatedPoints);
+        this.points = normalizedPoints;
+        this.#emitPoints(normalizedPoints, event);
+        if (activePointId) {
+            const newIndex = normalizedPoints.findIndex((point) => point?.id === activePointId);
+            if (newIndex !== -1) {
+                this.#dragIndex = newIndex;
+                this.#dragPointId = activePointId;
+                this.#notifyLinearFocus(newIndex, event);
+            }
+            else {
+                this.#notifyLinearFocus(index, event);
+            }
+        }
+        else {
+            this.#notifyLinearFocus(index, event);
+        }
+        this.requestRender();
+    }
+    #handleLinearHandleDrag(points, index, position, event) {
+        const point = points[index];
+        if (!point) {
+            return;
+        }
+        const activePointId = this.#dragPointId ?? ensureLinearPointId(point);
+        const direction = this.#dragMode === 'handleIn' ? 'In' : 'Out';
+        let dx = position.x - point.x;
+        const dy = position.y - point.y;
+        if (direction === 'In') {
+            dx = Math.min(0, dx);
+        }
+        else {
+            dx = Math.max(0, dx);
+        }
+        let isLinked = point.isLinked ?? false;
+        if (event.shiftKey) {
+            isLinked = false;
+        }
+        const updatedPoints = [...points];
+        const updatedPoint = { ...point };
+        updatedPoints[index] = updatedPoint;
+        updatedPoint.isLinked = isLinked;
+        if (direction === 'In') {
+            updatedPoint.cpInX = dx;
+            updatedPoint.cpInY = dy;
+        }
+        else {
+            updatedPoint.cpOutX = dx;
+            updatedPoint.cpOutY = dy;
+        }
+        const mirrorAngle = isLinked;
+        const mirrorLength = mirrorAngle && updatedPoint.mirrorLength !== false;
+        if (mirrorAngle || mirrorLength) {
+            const draggedLength = vectorLength(dx, dy);
+            if (draggedLength <= MIN_LINEAR_DELTA) {
+                if (direction === 'In') {
+                    delete updatedPoint.cpInX;
+                    delete updatedPoint.cpInY;
+                    if (mirrorAngle) {
+                        delete updatedPoint.cpOutX;
+                        delete updatedPoint.cpOutY;
+                    }
+                }
+                else {
+                    delete updatedPoint.cpOutX;
+                    delete updatedPoint.cpOutY;
+                    if (mirrorAngle) {
+                        delete updatedPoint.cpInX;
+                        delete updatedPoint.cpInY;
+                    }
+                }
+            }
+            else {
+                const normalized = normalizeVector(dx, dy);
+                if (mirrorAngle) {
+                    if (direction === 'In') {
+                        const existingLength = mirrorLength
+                            ? draggedLength
+                            : vectorLength(updatedPoint.cpOutX ?? 0, updatedPoint.cpOutY ?? 0) || draggedLength;
+                        updatedPoint.cpOutX = -normalized.dx * existingLength;
+                        updatedPoint.cpOutY = -normalized.dy * existingLength;
+                    }
+                    else {
+                        const existingLength = mirrorLength
+                            ? draggedLength
+                            : vectorLength(updatedPoint.cpInX ?? 0, updatedPoint.cpInY ?? 0) || draggedLength;
+                        updatedPoint.cpInX = -normalized.dx * existingLength;
+                        updatedPoint.cpInY = -normalized.dy * existingLength;
+                    }
+                }
+                else if (mirrorLength) {
+                    if (direction === 'In') {
+                        const inDirection = normalizeVector(updatedPoint.cpInX ?? 0, updatedPoint.cpInY ?? 0);
+                        const outDirection = normalizeVector(updatedPoint.cpOutX ?? 0, updatedPoint.cpOutY ?? 0);
+                        const outLength = vectorLength(updatedPoint.cpOutX ?? 0, updatedPoint.cpOutY ?? 0);
+                        if (outLength > 0) {
+                            updatedPoint.cpOutX = outDirection.dx * draggedLength;
+                            updatedPoint.cpOutY = outDirection.dy * draggedLength;
+                        }
+                        updatedPoint.cpInX = inDirection.dx * draggedLength;
+                        updatedPoint.cpInY = inDirection.dy * draggedLength;
+                    }
+                    else {
+                        const inDirection = normalizeVector(updatedPoint.cpInX ?? 0, updatedPoint.cpInY ?? 0);
+                        const outDirection = normalizeVector(updatedPoint.cpOutX ?? 0, updatedPoint.cpOutY ?? 0);
+                        const inLength = vectorLength(updatedPoint.cpInX ?? 0, updatedPoint.cpInY ?? 0);
+                        if (inLength > 0) {
+                            updatedPoint.cpInX = inDirection.dx * draggedLength;
+                            updatedPoint.cpInY = inDirection.dy * draggedLength;
+                        }
+                        updatedPoint.cpOutX = outDirection.dx * draggedLength;
+                        updatedPoint.cpOutY = outDirection.dy * draggedLength;
+                    }
+                }
+                if (mirrorLength) {
+                    this.#alignLinkedHandleLengths(updatedPoint);
+                }
+            }
+        }
+        const normalizedPoints = normalizeLinearPoints(updatedPoints);
+        this.points = normalizedPoints;
+        this.#emitPoints(normalizedPoints, event);
+        if (activePointId) {
+            const newIndex = normalizedPoints.findIndex((candidate) => candidate?.id === activePointId);
+            if (newIndex !== -1) {
+                this.#dragIndex = newIndex;
+                this.#dragPointId = activePointId;
+                this.#notifyLinearFocus(newIndex, event);
+            }
+            else {
+                this.#notifyLinearFocus(index, event);
+            }
+        }
+        else {
+            this.#notifyLinearFocus(index, event);
+        }
+        this.requestRender();
+    }
+    handlePointerUp = (event) => {
+        const previousIndex = this.#dragIndex;
+        if (this.svgElement?.hasPointerCapture(event.pointerId)) {
+            this.svgElement.releasePointerCapture(event.pointerId);
+        }
+        this.#isDragging = false;
+        this.#dragIndex = null;
+        this.#dragMode = null;
+        this.#dragStartPoints = null;
+        this.#dragPointId = null;
+        this.#pendingDrag = null;
+        this.#hoverInsertPreview = null;
+        if (previousIndex !== null && this.easingType === EasingType.LINEAR) {
+            this.#notifyLinearFocus(previousIndex, event);
+        }
+        this.requestRender();
+    };
+    handlePointerLeave = (event) => {
+        if (this.#isDragging) {
+            this.handlePointerUp(event);
+        }
+        this.#pendingDrag = null;
+        this.#hoverPoint = null;
+        this.#dragPointId = null;
+        this.#hoverInsertPreview = null;
+        this.requestRender();
+    };
+    #insertLinearPoint(position, event) {
+        const preview = this.#hoverInsertPreview ?? this.#buildLinearInsertPreview(position);
+        if (!preview) {
+            return null;
+        }
+        const { normalizedPoints, insertedIndex, insertedPoint } = preview;
+        const insertedPointId = insertedPoint ? ensureLinearPointId(insertedPoint) : null;
+        this.points = normalizedPoints;
+        this.#emitPoints(normalizedPoints, event);
+        this.requestRender();
+        this.#hoverInsertPreview = null;
+        return {
+            index: insertedIndex,
+            pointId: insertedPointId
+        };
+    }
+    #buildLinearInsertPreview(position) {
+        if (this.easingType !== EasingType.LINEAR) {
+            return null;
+        }
+        const points = this.#getLinearPoints();
+        if (!points || points.length >= MAX_LINEAR_POINTS) {
+            return null;
+        }
+        // Allow Y values outside [0, 1] for bounce/elastic effects
+        const clamped = clampPoint(position, { minY: -2, maxY: 3 });
+        if (!this.#isPointNearLinearPath(clamped, points)) {
+            return null;
+        }
+        const insertIndex = points.findIndex((point) => clamped.x < point.x);
+        if (insertIndex <= 0) {
+            return null;
+        }
+        const prev = points[insertIndex - 1];
+        const next = points[insertIndex];
+        if (!prev || !next) {
+            return null;
+        }
+        if (clamped.x - prev.x < MIN_LINEAR_DELTA || next.x - clamped.x < MIN_LINEAR_DELTA) {
+            return null;
+        }
+        let updatedPoints;
+        let insertedPointId = null;
+        const splitResult = splitCurveSegment(prev, next, clamped);
+        if (splitResult) {
+            const { prev: newPrev, newPoint, next: newNext } = splitResult;
+            insertedPointId = ensureLinearPointId(newPoint);
+            updatedPoints = [
+                ...points.slice(0, insertIndex - 1),
+                newPrev,
+                newPoint,
+                newNext,
+                ...points.slice(insertIndex + 1)
+            ];
+        }
+        else {
+            const newPoint = {
+                x: clamped.x,
+                y: clamped.y,
+                cpInX: -0.1,
+                cpInY: 0,
+                cpOutX: 0.1,
+                cpOutY: 0,
+                isLinked: true,
+                mirrorLength: true
+            };
+            insertedPointId = ensureLinearPointId(newPoint);
+            updatedPoints = [...points.slice(0, insertIndex), newPoint, ...points.slice(insertIndex)];
+        }
+        const normalizedPoints = normalizeLinearPoints(updatedPoints);
+        const normalizedIndex = insertedPointId !== null ? normalizedPoints.findIndex((point) => point?.id === insertedPointId) : -1;
+        const insertedIndex = normalizedIndex !== -1 ? normalizedIndex : insertIndex;
+        const insertedPoint = normalizedPoints[insertedIndex];
+        if (!insertedPoint) {
+            return null;
+        }
+        return {
+            path: linearDisplayPath(normalizedPoints),
+            normalizedPoints,
+            insertedIndex,
+            insertedPoint
+        };
+    }
+}
+const lerp = (a, b, t) => a + (b - a) * t;
+const lerpPoint = (p1, p2, t) => {
+    return {
+        x: lerp(p1.x, p2.x, t),
+        y: lerp(p1.y, p2.y, t)
+    };
+};
+// Helper to find t for a given x on a cubic bezier curve
+const findTForX = (x, p0, cp1, cp2, p3) => {
+    let minT = 0;
+    let maxT = 1;
+    let t = 0.5;
+    const tolerance = 0.0001;
+    const maxIterations = 20;
+    // Use binary search since x is monotonic
+    for (let i = 0; i < maxIterations; i++) {
+        const px = (1 - t) ** 3 * p0.x + 3 * (1 - t) ** 2 * t * cp1.x + 3 * (1 - t) * t ** 2 * cp2.x + t ** 3 * p3.x;
+        if (Math.abs(px - x) < tolerance) {
+            return t;
+        }
+        if (px < x) {
+            minT = t;
+        }
+        else {
+            maxT = t;
+        }
+        t = (minT + maxT) / 2;
+    }
+    return t;
+};
+const splitCurveSegment = (prev, next, position) => {
+    const cp1 = {
+        x: prev.x + (prev.cpOutX ?? 0),
+        y: prev.y + (prev.cpOutY ?? 0)
+    };
+    const cp2 = {
+        x: next.x + (next.cpInX ?? 0),
+        y: next.y + (next.cpInY ?? 0)
+    };
+    const wasCurved = prev.cpOutX || prev.cpOutY || next.cpInX || next.cpInY;
+    if (!wasCurved) {
+        return null;
+    }
+    // Find the correct t parameter that corresponds to the mouse X position
+    const t = findTForX(position.x, prev, cp1, cp2, next);
+    const P01 = lerpPoint(prev, cp1, t);
+    const P12 = lerpPoint(cp1, cp2, t);
+    const P23 = lerpPoint(cp2, next, t);
+    const P012 = lerpPoint(P01, P12, t);
+    const P123 = lerpPoint(P12, P23, t);
+    const P_new = lerpPoint(P012, P123, t);
+    const newPoint = {
+        x: P_new.x,
+        y: P_new.y,
+        cpInX: P012.x - P_new.x,
+        cpInY: P012.y - P_new.y,
+        cpOutX: P123.x - P_new.x,
+        cpOutY: P123.y - P_new.y,
+        isLinked: true,
+        mirrorLength: prev.mirrorLength === false && next.mirrorLength
+    };
+    ensureLinearPointId(newPoint);
+    const newPrev = {
+        ...prev,
+        cpOutX: P01.x - prev.x,
+        cpOutY: P01.y - prev.y
+    };
+    const newNext = {
+        ...next,
+        cpInX: P23.x - next.x,
+        cpInY: P23.y - next.y
+    };
+    return {
+        prev: newPrev,
+        newPoint,
+        next: newNext
+    };
+};
+const evaluateCubicPointNormalized = (t, p0, cp1, cp2, p3) => {
+    const P01 = lerpPoint(p0, cp1, t);
+    const P12 = lerpPoint(cp1, cp2, t);
+    const P23 = lerpPoint(cp2, p3, t);
+    const P012 = lerpPoint(P01, P12, t);
+    const P123 = lerpPoint(P12, P23, t);
+    return lerpPoint(P012, P123, t);
+};