@pixel-point/toolcraft 0.0.13 → 0.0.15

package/templates/runtime/react/timeline/timeline-easing-editor.tsx

@@ -0,0 +1,409 @@
+'use client';
+
+import * as React from 'react';
+import { useEffect, useRef, useState } from 'react';
+
+import type { ToolcraftTimelineKeyframeEasing } from '../../state/types';
+import {
+  areEasingControlPointsEqual,
+  getEasingEditorControlPoints,
+  interpolateTimelineEasingControlPoints,
+  type TimelineBezierControlPoints,
+} from './timeline-easing-model';
+import {
+  easingEditorFrameHeight,
+  easingEditorFrameOffsetX,
+  easingEditorFrameOffsetY,
+  easingEditorFrameWidth,
+  easingEditorGridInset,
+  easingEditorGridSize,
+  getEasingEditorPoint,
+  getEasingPreviewPath,
+} from './timeline-easing-geometry';
+
+type TimelineCurveEditorDragTarget = 'p1' | 'p2';
+
+const timelineEasingCurveAnimationDurationMs = 180;
+
+export function TimelineEasingEditor({
+  easing,
+  onChange,
+}: {
+  easing: ToolcraftTimelineKeyframeEasing;
+  onChange: (easing: ToolcraftTimelineKeyframeEasing) => void;
+}): React.JSX.Element {
+  const svgRef = useRef<SVGSVGElement | null>(null);
+  const [dragTarget, setDragTarget] = useState<TimelineCurveEditorDragTarget | null>(null);
+  const targetControlPoints = getEasingEditorControlPoints(easing);
+  const targetControlPointsKey = `${easing.type}:${targetControlPoints.join(',')}`;
+  const [displayedControlPoints, setDisplayedControlPoints] =
+    useState<TimelineBezierControlPoints>(targetControlPoints);
+  const displayedControlPointsRef =
+    useRef<TimelineBezierControlPoints>(displayedControlPoints);
+  const animationFrameRef = useRef<number | null>(null);
+  const [isCurveAnimating, setIsCurveAnimating] = useState(false);
+  const isStep = easing.type === 'step';
+  const renderedControlPoints = dragTarget ? targetControlPoints : displayedControlPoints;
+  const [startX, startY] = getEasingEditorPoint(0, 0);
+  const [endX, endY] = getEasingEditorPoint(1, 1);
+  const [firstX, firstY] = getEasingEditorPoint(renderedControlPoints[0], renderedControlPoints[1]);
+  const [secondX, secondY] = getEasingEditorPoint(
+    renderedControlPoints[2],
+    renderedControlPoints[3],
+  );
+  const setAnimatedControlPoints = (
+    nextControlPoints: TimelineBezierControlPoints,
+  ): void => {
+    displayedControlPointsRef.current = nextControlPoints;
+    setDisplayedControlPoints(nextControlPoints);
+  };
+  const getEditorPointFromClient = (
+    clientX: number,
+    clientY: number,
+  ): { x: number; y: number } | null => {
+    if (!svgRef.current) {
+      return null;
+    }
+    const rect = svgRef.current.getBoundingClientRect();
+
+    if (!(rect.width > 0 && rect.height > 0)) {
+      return null;
+    }
+
+    const scale = Math.min(
+      rect.width / easingEditorFrameWidth,
+      rect.height / easingEditorFrameHeight,
+    );
+
+    if (!(scale > 0)) {
+      return null;
+    }
+
+    const viewBoxLeft = rect.left + (rect.width - easingEditorFrameWidth * scale) / 2;
+    const viewBoxTop = rect.top + (rect.height - easingEditorFrameHeight * scale) / 2;
+    const pointerX = (clientX - viewBoxLeft) / scale - easingEditorFrameOffsetX;
+    const pointerY = (clientY - viewBoxTop) / scale - easingEditorFrameOffsetY;
+
+    return {
+      x: Math.max(0, Math.min(1, (pointerX - easingEditorGridInset) / easingEditorGridSize)),
+      y: Math.max(-1, Math.min(2, 1 - (pointerY - easingEditorGridInset) / easingEditorGridSize)),
+    };
+  };
+  const updateControlPoint = (
+    target: TimelineCurveEditorDragTarget,
+    nextPoint: { x: number; y: number },
+  ): void => {
+    const nextControlPoints = [...targetControlPoints] as TimelineBezierControlPoints;
+
+    if (target === 'p1') {
+      nextControlPoints[0] = nextPoint.x;
+      nextControlPoints[1] = nextPoint.y;
+    } else {
+      nextControlPoints[2] = nextPoint.x;
+      nextControlPoints[3] = nextPoint.y;
+    }
+
+    onChange({ controlPoints: nextControlPoints, type: 'bezier' });
+  };
+  const handleDragMove = (event: PointerEvent): void => {
+    if (!dragTarget) {
+      return;
+    }
+
+    const nextPoint = getEditorPointFromClient(event.clientX, event.clientY);
+
+    if (!nextPoint) {
+      return;
+    }
+
+    updateControlPoint(dragTarget, nextPoint);
+  };
+
+  useEffect(() => {
+    const nextControlPoints = [...targetControlPoints] as TimelineBezierControlPoints;
+
+    if (animationFrameRef.current !== null) {
+      window.cancelAnimationFrame(animationFrameRef.current);
+      animationFrameRef.current = null;
+    }
+
+    if (
+      dragTarget ||
+      typeof window === 'undefined' ||
+      !window.requestAnimationFrame ||
+      window.matchMedia?.('(prefers-reduced-motion: reduce)').matches
+    ) {
+      setIsCurveAnimating(false);
+      setAnimatedControlPoints(nextControlPoints);
+      return undefined;
+    }
+
+    const startControlPoints = displayedControlPointsRef.current;
+
+    if (areEasingControlPointsEqual(startControlPoints, nextControlPoints)) {
+      setIsCurveAnimating(false);
+      setAnimatedControlPoints(nextControlPoints);
+      return undefined;
+    }
+
+    let animationStartTime: number | null = null;
+
+    setIsCurveAnimating(true);
+
+    const tick = (timestamp: number): void => {
+      animationStartTime ??= timestamp;
+
+      const progress = Math.min(
+        1,
+        (timestamp - animationStartTime) / timelineEasingCurveAnimationDurationMs,
+      );
+
+      setAnimatedControlPoints(
+        interpolateTimelineEasingControlPoints(startControlPoints, nextControlPoints, progress),
+      );
+
+      if (progress < 1) {
+        animationFrameRef.current = window.requestAnimationFrame(tick);
+        return;
+      }
+
+      animationFrameRef.current = null;
+      setIsCurveAnimating(false);
+      setAnimatedControlPoints(nextControlPoints);
+    };
+
+    animationFrameRef.current = window.requestAnimationFrame(tick);
+
+    return () => {
+      if (animationFrameRef.current !== null) {
+        window.cancelAnimationFrame(animationFrameRef.current);
+        animationFrameRef.current = null;
+      }
+    };
+  }, [dragTarget, targetControlPointsKey]);
+
+  useEffect(() => {
+    if (!dragTarget) {
+      return;
+    }
+
+    const handlePointerUp = (): void => {
+      setDragTarget(null);
+    };
+    const previousCursor = document.body.style.cursor;
+
+    document.body.style.cursor = 'grabbing';
+    window.addEventListener('pointermove', handleDragMove);
+    window.addEventListener('pointerup', handlePointerUp);
+    window.addEventListener('pointercancel', handlePointerUp);
+
+    return () => {
+      document.body.style.cursor = previousCursor;
+      window.removeEventListener('pointermove', handleDragMove);
+      window.removeEventListener('pointerup', handlePointerUp);
+      window.removeEventListener('pointercancel', handlePointerUp);
+    };
+  }, [targetControlPoints, dragTarget, handleDragMove]);
+
+  const startControlPointDrag =
+    (target: TimelineCurveEditorDragTarget) => (event: React.PointerEvent<SVGElement>) => {
+      event.preventDefault();
+      event.stopPropagation();
+      setDragTarget(target);
+    };
+  const startCurveDrag = (event: React.PointerEvent<SVGPathElement>): void => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    const point = getEditorPointFromClient(event.clientX, event.clientY);
+
+    if (!point) {
+      return;
+    }
+
+    setDragTarget(point.x <= 0.5 ? 'p1' : 'p2');
+  };
+
+  return (
+    <svg
+      aria-label="Easing curve editor"
+      className="w-[240px] shrink-0 select-none"
+      data-animating={isCurveAnimating ? 'true' : undefined}
+      data-curve-animation-duration={timelineEasingCurveAnimationDurationMs}
+      data-slot="timeline-easing-editor"
+      height={easingEditorFrameHeight}
+      ref={svgRef}
+      role="img"
+      style={{ touchAction: 'none' }}
+      viewBox={`0 0 ${easingEditorFrameWidth} ${easingEditorFrameHeight}`}
+      width={easingEditorFrameWidth}
+    >
+      <g transform={`translate(${easingEditorFrameOffsetX} ${easingEditorFrameOffsetY})`}>
+        <rect
+          fill="none"
+          height={easingEditorGridSize}
+          rx={2}
+          stroke="color-mix(in oklab, var(--border) 10%, transparent)"
+          strokeWidth={1}
+          width={easingEditorGridSize}
+          x={easingEditorGridInset}
+          y={easingEditorGridInset}
+        />
+        {[0.25, 0.5, 0.75].map((point) => {
+          const [gridX] = getEasingEditorPoint(point, 0);
+          const [, gridY] = getEasingEditorPoint(0, point);
+
+          return (
+            <g key={point}>
+              <line
+                stroke="color-mix(in oklab, var(--border) 6%, transparent)"
+                strokeWidth={1}
+                x1={gridX}
+                x2={gridX}
+                y1={easingEditorGridInset}
+                y2={easingEditorGridInset + easingEditorGridSize}
+              />
+              <line
+                stroke="color-mix(in oklab, var(--border) 6%, transparent)"
+                strokeWidth={1}
+                x1={easingEditorGridInset}
+                x2={easingEditorGridInset + easingEditorGridSize}
+                y1={gridY}
+                y2={gridY}
+              />
+            </g>
+          );
+        })}
+        <line
+          stroke="color-mix(in oklab, var(--foreground) 12%, transparent)"
+          strokeDasharray="3 3"
+          strokeWidth={1}
+          x1={startX}
+          x2={endX}
+          y1={startY}
+          y2={endY}
+        />
+        {isStep ? (
+          <>
+            <line
+              data-slot="timeline-easing-step-horizontal"
+              stroke="color-mix(in oklab, var(--foreground) 85%, transparent)"
+              strokeLinecap="round"
+              strokeWidth={2}
+              x1={startX}
+              x2={endX}
+              y1={startY}
+              y2={startY}
+            />
+            <line
+              data-slot="timeline-easing-step-vertical"
+              stroke="color-mix(in oklab, var(--foreground) 85%, transparent)"
+              strokeLinecap="round"
+              strokeWidth={1.5}
+              x1={endX}
+              x2={endX}
+              y1={startY}
+              y2={endY}
+            />
+          </>
+        ) : (
+          <>
+            <line
+              stroke="color-mix(in oklab, var(--foreground) 25%, transparent)"
+              strokeWidth={1}
+              x1={startX}
+              x2={firstX}
+              y1={startY}
+              y2={firstY}
+            />
+            <line
+              stroke="color-mix(in oklab, var(--foreground) 25%, transparent)"
+              strokeWidth={1}
+              x1={endX}
+              x2={secondX}
+              y1={endY}
+              y2={secondY}
+            />
+            <line
+              className="cursor-grab active:cursor-grabbing"
+              data-slot="timeline-easing-control-line-hit-area"
+              onPointerDown={startControlPointDrag('p1')}
+              pointerEvents="stroke"
+              stroke="transparent"
+              strokeLinecap="round"
+              strokeWidth={18}
+              x1={startX}
+              x2={firstX}
+              y1={startY}
+              y2={firstY}
+            />
+            <line
+              className="cursor-grab active:cursor-grabbing"
+              data-slot="timeline-easing-control-line-hit-area"
+              onPointerDown={startControlPointDrag('p2')}
+              pointerEvents="stroke"
+              stroke="transparent"
+              strokeLinecap="round"
+              strokeWidth={18}
+              x1={endX}
+              x2={secondX}
+              y1={endY}
+              y2={secondY}
+            />
+            <path
+              d={getEasingPreviewPath(renderedControlPoints)}
+              data-slot="timeline-easing-curve"
+              fill="none"
+              stroke="color-mix(in oklab, var(--foreground) 85%, transparent)"
+              strokeLinecap="round"
+              strokeWidth={2}
+            />
+            <path
+              className="cursor-grab active:cursor-grabbing"
+              d={getEasingPreviewPath(renderedControlPoints)}
+              data-slot="timeline-easing-curve-hit-area"
+              fill="none"
+              onPointerDown={startCurveDrag}
+              pointerEvents="stroke"
+              stroke="transparent"
+              strokeLinecap="round"
+              strokeWidth={18}
+            />
+            <circle
+              cx={startX}
+              cy={startY}
+              fill="color-mix(in oklab, var(--foreground) 50%, transparent)"
+              r={3}
+            />
+            <circle
+              cx={endX}
+              cy={endY}
+              fill="color-mix(in oklab, var(--foreground) 50%, transparent)"
+              r={3}
+            />
+            <circle
+              className="cursor-grab active:cursor-grabbing"
+              cx={firstX}
+              cy={firstY}
+              fill="var(--foreground)"
+              onPointerDown={startControlPointDrag('p1')}
+              r={5}
+              stroke="color-mix(in oklab, var(--background) 70%, transparent)"
+              strokeWidth={1}
+            />
+            <circle
+              className="cursor-grab active:cursor-grabbing"
+              cx={secondX}
+              cy={secondY}
+              fill="var(--foreground)"
+              onPointerDown={startControlPointDrag('p2')}
+              r={5}
+              stroke="color-mix(in oklab, var(--background) 70%, transparent)"
+              strokeWidth={1}
+            />
+          </>
+        )}
+      </g>
+    </svg>
+  );
+}

package/templates/runtime/react/timeline/timeline-easing-geometry.ts

@@ -0,0 +1,42 @@
+'use client';
+
+import type { TimelineBezierControlPoints } from './timeline-easing-model';
+
+export const easingEditorViewBoxSize = 180;
+export const easingEditorGridInset = 24;
+export const easingEditorGridSize = 132;
+export const easingEditorFrameWidth = 220;
+export const easingEditorFrameHeight = 240;
+export const easingEditorFrameOffsetX = (easingEditorFrameWidth - easingEditorViewBoxSize) / 2;
+export const easingEditorFrameOffsetY = (easingEditorFrameHeight - easingEditorViewBoxSize) / 2;
+export const timelineEasingPresetIconSize = 20;
+export const timelineEasingPresetIconViewBoxSize = 28;
+export const timelineEasingPresetIconLineColor = 'color-mix(in oklab, var(--border) 60%, transparent)';
+
+export function getEasingEditorPoint(x: number, y: number): [number, number] {
+  return [
+    easingEditorGridInset + easingEditorGridSize * x,
+    easingEditorGridInset + (1 - y) * easingEditorGridSize,
+  ];
+}
+
+export function getEasingIconPath(
+  controlPoints: TimelineBezierControlPoints,
+  size: number,
+): string {
+  const pointX = (point: number): number => 3 + point * (size - 6);
+  const pointY = (point: number): number => size - 3 - point * (size - 6);
+
+  return `M ${pointX(0)} ${pointY(0)} C ${pointX(controlPoints[0])} ${pointY(
+    controlPoints[1],
+  )}, ${pointX(controlPoints[2])} ${pointY(controlPoints[3])}, ${pointX(1)} ${pointY(1)}`;
+}
+
+export function getEasingPreviewPath(controlPoints: TimelineBezierControlPoints): string {
+  const [startX, startY] = getEasingEditorPoint(0, 0);
+  const [firstX, firstY] = getEasingEditorPoint(controlPoints[0], controlPoints[1]);
+  const [secondX, secondY] = getEasingEditorPoint(controlPoints[2], controlPoints[3]);
+  const [endX, endY] = getEasingEditorPoint(1, 1);
+
+  return `M ${startX} ${startY} C ${firstX} ${firstY}, ${secondX} ${secondY}, ${endX} ${endY}`;
+}

package/templates/runtime/react/timeline/timeline-easing-icons.tsx

@@ -0,0 +1,135 @@
+'use client';
+
+import * as React from 'react';
+
+import type { ToolcraftTimelineKeyframeEasing } from '../../state/types';
+import type { TimelineBezierControlPoints } from './timeline-easing-model';
+import {
+  getEasingIconPath,
+  timelineEasingPresetIconLineColor,
+  timelineEasingPresetIconSize,
+  timelineEasingPresetIconViewBoxSize,
+} from './timeline-easing-geometry';
+
+export function TimelineEasingCurveIcon({
+  className,
+  easing,
+  size = 20,
+}: {
+  className?: string;
+  easing: ToolcraftTimelineKeyframeEasing;
+  size?: number;
+}): React.JSX.Element {
+  if (easing.type === 'step') {
+    return (
+      <svg
+        aria-hidden="true"
+        className={className ? `pointer-events-none ${className}` : 'pointer-events-none'}
+        fill="none"
+        height={size}
+        viewBox={`0 0 ${size} ${size}`}
+        width={size}
+      >
+        <path
+          d={`M 3 ${size - 3} H ${size - 3} V 3`}
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeWidth={1.5}
+        />
+      </svg>
+    );
+  }
+
+  return (
+    <svg
+      aria-hidden="true"
+      className={className ? `pointer-events-none ${className}` : 'pointer-events-none'}
+      fill="none"
+      height={size}
+      viewBox={`0 0 ${size} ${size}`}
+      width={size}
+    >
+      <path
+        d={getEasingIconPath(easing.controlPoints, size)}
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeWidth={1.5}
+      />
+    </svg>
+  );
+}
+
+export function TimelineEasingPresetIcon({
+  controlPoints,
+}: {
+  controlPoints: TimelineBezierControlPoints;
+}): React.JSX.Element {
+  const iconSize = timelineEasingPresetIconViewBoxSize;
+  const iconInset = 4;
+  const iconGridSize = iconSize - iconInset * 2;
+  const pointX = (point: number): number => iconInset + point * iconGridSize;
+  const pointY = (point: number): number => iconInset + (1 - point) * iconGridSize;
+  const path = `M ${pointX(0)} ${pointY(0)} C ${pointX(controlPoints[0])} ${pointY(
+    controlPoints[1],
+  )}, ${pointX(controlPoints[2])} ${pointY(controlPoints[3])}, ${pointX(1)} ${pointY(1)}`;
+
+  return (
+    <svg
+      aria-hidden="true"
+      className="pointer-events-none shrink-0"
+      data-slot="timeline-easing-preset-icon"
+      fill="none"
+      height={timelineEasingPresetIconSize}
+      viewBox={`0 0 ${iconSize} ${iconSize}`}
+      width={timelineEasingPresetIconSize}
+    >
+      <rect
+        fill="color-mix(in oklab, currentColor 8%, transparent)"
+        height={iconGridSize}
+        rx={2}
+        stroke="color-mix(in oklab, currentColor 18%, transparent)"
+        strokeWidth={1}
+        width={iconGridSize}
+        x={iconInset}
+        y={iconInset}
+      />
+      <path
+        d={path}
+        stroke={timelineEasingPresetIconLineColor}
+        strokeLinecap="round"
+        strokeWidth={1}
+      />
+    </svg>
+  );
+}
+
+export function TimelineEasingStepPresetIcon(): React.JSX.Element {
+  return (
+    <svg
+      aria-hidden="true"
+      className="pointer-events-none shrink-0"
+      data-slot="timeline-easing-step-icon"
+      fill="none"
+      height={timelineEasingPresetIconSize}
+      viewBox="0 0 28 28"
+      width={timelineEasingPresetIconSize}
+    >
+      <rect
+        fill="color-mix(in oklab, currentColor 8%, transparent)"
+        height={20}
+        rx={2}
+        stroke="color-mix(in oklab, currentColor 18%, transparent)"
+        strokeWidth={1}
+        width={20}
+        x={4}
+        y={4}
+      />
+      <path
+        d="M 4 24 H 24 V 4"
+        stroke={timelineEasingPresetIconLineColor}
+        strokeLinecap="round"
+        strokeWidth={1}
+      />
+    </svg>
+  );
+}

package/templates/runtime/react/timeline/timeline-easing-model.test.ts

@@ -0,0 +1,87 @@
+import { describe, expect, it } from 'vitest';
+
+import type { ToolcraftTimelineKeyframeEasing } from '../../state/types';
+import {
+  findTimelineEasingPresetName,
+  getEasingEditorControlPoints,
+  getEasingInputValue,
+  getToolcraftTimelineKeyframeEasing,
+  interpolateTimelineEasingControlPoints,
+  normalizeToolcraftTimelineKeyframeEasing,
+  parseToolcraftTimelineKeyframeEasing,
+} from './timeline-easing-model';
+
+describe('timeline easing model', () => {
+  it('parses bare and CSS cubic-bezier control point values', () => {
+    expect(parseToolcraftTimelineKeyframeEasing('0.19, 1, 0.22, 1')).toEqual({
+      controlPoints: [0.19, 1, 0.22, 1],
+      type: 'bezier',
+    });
+    expect(
+      parseToolcraftTimelineKeyframeEasing('cubic-bezier(0.19, 1, 0.22, 1)'),
+    ).toEqual({
+      controlPoints: [0.19, 1, 0.22, 1],
+      type: 'bezier',
+    });
+  });
+
+  it('parses step easing and fills partial bezier values from the active easing', () => {
+    expect(parseToolcraftTimelineKeyframeEasing('step')).toEqual({ type: 'step' });
+    expect(
+      parseToolcraftTimelineKeyframeEasing('0.2, 0.7', {
+        controlPoints: [0.1, 0.3, 0.6, 0.9],
+        type: 'bezier',
+      }),
+    ).toEqual({
+      controlPoints: [0.2, 0.7, 0.6, 0.9],
+      type: 'bezier',
+    });
+  });
+
+  it('normalizes external easing objects into bounded runtime easing values', () => {
+    expect(
+      normalizeToolcraftTimelineKeyframeEasing({
+        controlPoints: [-1, -3, 2, 5],
+        type: 'bezier',
+      }),
+    ).toEqual({
+      controlPoints: [0, -1, 1, 2],
+      type: 'bezier',
+    });
+    expect(normalizeToolcraftTimelineKeyframeEasing({ type: 'step' })).toEqual({
+      type: 'step',
+    });
+  });
+
+  it('clones fallback easing values instead of exposing shared control point arrays', () => {
+    const easing = getToolcraftTimelineKeyframeEasing(undefined);
+
+    expect(easing).toEqual({
+      controlPoints: [0.65, 0, 0.35, 1],
+      type: 'bezier',
+    });
+
+    if (easing.type === 'bezier') {
+      easing.controlPoints[0] = 0;
+    }
+
+    expect(getToolcraftTimelineKeyframeEasing(undefined)).toEqual({
+      controlPoints: [0.65, 0, 0.35, 1],
+      type: 'bezier',
+    });
+  });
+
+  it('maps known presets, editor points, interpolation, and input formatting', () => {
+    const smooth = {
+      controlPoints: [0.65, 0, 0.35, 1],
+      type: 'bezier',
+    } satisfies ToolcraftTimelineKeyframeEasing;
+
+    expect(findTimelineEasingPresetName(smooth)).toBe('smooth');
+    expect(getEasingEditorControlPoints({ type: 'step' })).toEqual([0, 0, 1, 1]);
+    expect(getEasingInputValue(smooth)).toBe('0.65, 0, 0.35, 1');
+    expect(interpolateTimelineEasingControlPoints([0, 0, 1, 1], [1, 1, 0, 0], 1)).toEqual([
+      1, 1, 0, 0,
+    ]);
+  });
+});