@pixel-point/toolcraft 0.0.2

package/templates/ui/components/controls/curves/curve-graph.tsx

@@ -0,0 +1,390 @@
+import { useId } from "react";
+
+import type { CurveChannel, CurvePoint } from "../control-types";
+import {
+  ChannelTabs as SharedChannelTabs,
+  channelMeta as sharedChannelMeta,
+} from "../channel-tabs";
+import {
+  type CurveInterpolation,
+  curveGraphMax,
+  curveGraphSize,
+  curveGridStops,
+  curveInset,
+  defaultCurveInterpolation,
+  getCurvePath,
+  mapPointToSvg,
+  normalizeCurvePoints,
+} from "./curve-geometry";
+
+export const curveChannels = [
+  "RGB",
+  "R",
+  "G",
+  "B",
+] as const satisfies readonly CurveChannel[];
+export const singleCurveChannels = ["RGB"] as const satisfies readonly CurveChannel[];
+export const channelMeta = sharedChannelMeta;
+const curveGraphRadius = 6;
+const curvePointHandleViewportSize = 20;
+const curvePointHandleViewportRadius = curvePointHandleViewportSize / 2;
+
+export function ChannelTabs({
+  name,
+  onValueChange,
+  value,
+}: {
+  name: string;
+  onValueChange: (value: CurveChannel) => void;
+  value: CurveChannel;
+}): React.JSX.Element {
+  return (
+    <SharedChannelTabs
+      ariaLabel={name}
+      channels={curveChannels}
+      name={name}
+      onValueChange={onValueChange}
+      value={value}
+    />
+  );
+}
+
+export function CurveGraph({
+  activeChannel,
+  activePoints,
+  ariaLabel = "Color curves editor",
+  channels = curveChannels,
+  draggingPointIndex,
+  graphRef,
+  interpolation = defaultCurveInterpolation,
+  onBackgroundPointerDown,
+  onPointDoubleClick,
+  onPointKeyDown,
+  onPointPointerDown,
+  onPointPointerUp,
+  points,
+  selectedPointIndex,
+}: CurveGraphProps): React.JSX.Element {
+  const clipPathId = `curve-graph-${useId().replaceAll(":", "")}`;
+  const showReferenceLine = shouldShowReferenceLine(points, channels);
+
+  return (
+    <svg
+      aria-label={ariaLabel}
+      className="app-no-drag group/curve-graph block aspect-square w-full overflow-visible select-none"
+      ref={graphRef}
+      role="img"
+      style={{ overflow: "visible", touchAction: "none" }}
+      viewBox={`${curveInset} ${curveInset} ${curveGraphSize} ${curveGraphSize}`}
+    >
+      <defs>
+        <clipPath id={clipPathId}>
+          <rect
+            height={curveGraphSize}
+            rx={curveGraphRadius}
+            width={curveGraphSize}
+            x={curveInset}
+            y={curveInset}
+          />
+        </clipPath>
+      </defs>
+      <rect
+        fill="transparent"
+        height={curveGraphSize}
+        onPointerDown={onBackgroundPointerDown}
+        width={curveGraphSize}
+        x={curveInset}
+        y={curveInset}
+      />
+      <CurveGrid
+        clipPathId={clipPathId}
+        showReferenceLine={showReferenceLine}
+      />
+      <CurvePaths
+        activeChannel={activeChannel}
+        channels={channels}
+        clipPathId={clipPathId}
+        interpolation={interpolation}
+        points={points}
+      />
+      <CurvePointHandles
+        activeChannel={activeChannel}
+        activePoints={activePoints}
+        draggingPointIndex={draggingPointIndex}
+        onPointDoubleClick={onPointDoubleClick}
+        onPointKeyDown={onPointKeyDown}
+        onPointPointerDown={onPointPointerDown}
+        onPointPointerUp={onPointPointerUp}
+        selectedPointIndex={selectedPointIndex}
+      />
+    </svg>
+  );
+}
+
+type CurveGraphProps = {
+  activeChannel: CurveChannel;
+  activePoints: readonly CurvePoint[];
+  ariaLabel?: string;
+  channels?: readonly CurveChannel[];
+  draggingPointIndex: number | null;
+  graphRef: React.RefObject<SVGSVGElement | null>;
+  interpolation?: CurveInterpolation;
+  onBackgroundPointerDown: React.PointerEventHandler<SVGRectElement>;
+  onPointDoubleClick: (
+    index: number,
+    event: React.MouseEvent<HTMLButtonElement>,
+  ) => void;
+  onPointKeyDown: (
+    index: number,
+    event: React.KeyboardEvent<HTMLButtonElement>,
+  ) => void;
+  onPointPointerDown: (
+    index: number,
+    event: React.PointerEvent<HTMLButtonElement>,
+  ) => void;
+  onPointPointerUp: (
+    index: number,
+    event: React.PointerEvent<HTMLButtonElement>,
+  ) => void;
+  points: Record<CurveChannel, readonly CurvePoint[]>;
+  selectedPointIndex: number | null;
+};
+
+function shouldShowReferenceLine(
+  points: Record<CurveChannel, readonly CurvePoint[]>,
+  channels: readonly CurveChannel[] = curveChannels,
+): boolean {
+  return channels.every((channel) => !isIdentityCurve(points[channel]));
+}
+
+function isIdentityCurve(points: readonly CurvePoint[]): boolean {
+  const normalizedPoints = normalizeCurvePoints(points);
+
+  return (
+    normalizedPoints.length > 0 &&
+    normalizedPoints.every((point) => Math.abs(point.x - point.y) < 0.0001)
+  );
+}
+
+function CurveGrid({
+  clipPathId,
+  showReferenceLine,
+}: {
+  clipPathId: string;
+  showReferenceLine: boolean;
+}): React.JSX.Element {
+  return (
+    <g pointerEvents="none">
+      <rect
+        fill="color-mix(in oklab, var(--background) 20%, transparent)"
+        height={curveGraphSize}
+        rx={curveGraphRadius}
+        width={curveGraphSize}
+        x={curveInset}
+        y={curveInset}
+      />
+      <g clipPath={`url(#${clipPathId})`}>
+        {curveGridStops.map((stop) => {
+          const position = curveInset + stop * curveGraphSize;
+
+          return (
+            <g key={stop}>
+              <line
+                stroke="color-mix(in oklab, var(--foreground) 5%, transparent)"
+                strokeWidth="1"
+                x1={position}
+                x2={position}
+                y1={curveInset}
+                y2={curveGraphMax}
+              />
+              <line
+                stroke="color-mix(in oklab, var(--foreground) 5%, transparent)"
+                strokeWidth="1"
+                x1={curveInset}
+                x2={curveGraphMax}
+                y1={position}
+                y2={position}
+              />
+            </g>
+          );
+        })}
+        {showReferenceLine ? (
+          <path
+            d={`M ${curveInset} ${curveGraphMax} L ${curveGraphMax} ${curveInset}`}
+            data-curve-reference-line=""
+            fill="none"
+            stroke="color-mix(in oklab, var(--foreground) 16%, transparent)"
+            strokeDasharray="4 5"
+            strokeWidth="1"
+          />
+        ) : null}
+      </g>
+      <rect
+        fill="none"
+        height={curveGraphSize}
+        rx={curveGraphRadius}
+        stroke="color-mix(in oklab, var(--border) 15%, transparent)"
+        strokeWidth="1"
+        width={curveGraphSize}
+        x={curveInset}
+        y={curveInset}
+      />
+    </g>
+  );
+}
+
+function CurvePaths({
+  activeChannel,
+  channels,
+  clipPathId,
+  interpolation,
+  points,
+}: {
+  activeChannel: CurveChannel;
+  channels: readonly CurveChannel[];
+  clipPathId: string;
+  interpolation: CurveInterpolation;
+  points: Record<CurveChannel, readonly CurvePoint[]>;
+}): React.JSX.Element {
+  return (
+    <g clipPath={`url(#${clipPathId})`} pointerEvents="none">
+      {channels.map((channel) => (
+        <path
+          d={getCurvePath(points[channel], interpolation)}
+          data-curve-interpolation={interpolation}
+          fill="none"
+          key={channel}
+          opacity={channel === activeChannel ? 1 : 0.15}
+          stroke={channelMeta[channel].color}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={channel === activeChannel ? 2 : 1.5}
+        />
+      ))}
+    </g>
+  );
+}
+
+function CurvePointHandles({
+  activeChannel,
+  activePoints,
+  draggingPointIndex,
+  onPointDoubleClick,
+  onPointKeyDown,
+  onPointPointerDown,
+  onPointPointerUp,
+  selectedPointIndex,
+}: {
+  activeChannel: CurveChannel;
+  activePoints: readonly CurvePoint[];
+  draggingPointIndex: number | null;
+  onPointDoubleClick: (
+    index: number,
+    event: React.MouseEvent<HTMLButtonElement>,
+  ) => void;
+  onPointKeyDown: (
+    index: number,
+    event: React.KeyboardEvent<HTMLButtonElement>,
+  ) => void;
+  onPointPointerDown: (
+    index: number,
+    event: React.PointerEvent<HTMLButtonElement>,
+  ) => void;
+  onPointPointerUp: (
+    index: number,
+    event: React.PointerEvent<HTMLButtonElement>,
+  ) => void;
+  selectedPointIndex: number | null;
+}): React.JSX.Element {
+  const handlesVisible =
+    selectedPointIndex !== null || draggingPointIndex !== null;
+
+  return (
+    <g
+      className={
+        handlesVisible
+          ? "opacity-100 transition-opacity duration-150 ease-out"
+          : "opacity-0 transition-opacity duration-150 ease-out group-hover/curve-graph:opacity-100 group-focus-within/curve-graph:opacity-100"
+      }
+      data-curve-point-handles=""
+    >
+      {activePoints.map((point, index) => (
+        <CurvePointHandle
+          activeChannel={activeChannel}
+          index={index}
+          dragging={draggingPointIndex === index}
+          key={`${activeChannel}-${point.x}-${point.y}-${index}`}
+          onPointDoubleClick={onPointDoubleClick}
+          onPointKeyDown={onPointKeyDown}
+          onPointPointerDown={onPointPointerDown}
+          onPointPointerUp={onPointPointerUp}
+          point={point}
+          selected={selectedPointIndex === index}
+        />
+      ))}
+    </g>
+  );
+}
+
+function CurvePointHandle({
+  activeChannel,
+  dragging,
+  index,
+  onPointDoubleClick,
+  onPointKeyDown,
+  onPointPointerDown,
+  onPointPointerUp,
+  point,
+  selected,
+}: {
+  activeChannel: CurveChannel;
+  dragging: boolean;
+  index: number;
+  onPointDoubleClick: (
+    index: number,
+    event: React.MouseEvent<HTMLButtonElement>,
+  ) => void;
+  onPointKeyDown: (
+    index: number,
+    event: React.KeyboardEvent<HTMLButtonElement>,
+  ) => void;
+  onPointPointerDown: (
+    index: number,
+    event: React.PointerEvent<HTMLButtonElement>,
+  ) => void;
+  onPointPointerUp: (
+    index: number,
+    event: React.PointerEvent<HTMLButtonElement>,
+  ) => void;
+  point: CurvePoint;
+  selected: boolean;
+}): React.JSX.Element {
+  const [pointX, pointY] = mapPointToSvg(point);
+  const color = channelMeta[activeChannel].color;
+
+  return (
+    <foreignObject
+      className="overflow-visible"
+      height={curvePointHandleViewportSize}
+      width={curvePointHandleViewportSize}
+      x={pointX - curvePointHandleViewportRadius}
+      y={pointY - curvePointHandleViewportRadius}
+    >
+      <div className="flex size-full items-center justify-center">
+        <button
+          aria-label={`Curve point ${index + 1}`}
+          aria-pressed={selected ? true : undefined}
+          data-dragging={dragging}
+          data-selected={selected}
+          className="m-0 flex size-2.5 cursor-grab items-center justify-center rounded-full border-2 bg-[color:var(--background)] p-0 shadow-[0_1px_4px_color-mix(in_oklab,var(--background)_70%,transparent)] outline-none transition-[background-color,width,height] duration-150 ease-out hover:size-3 hover:bg-[color:var(--background)] active:size-3 active:cursor-grabbing active:bg-[color:var(--background)] data-[dragging=true]:size-3 data-[selected=true]:size-3 data-[selected=true]:bg-[color:var(--foreground)]"
+          onDoubleClick={(event) => onPointDoubleClick(index, event)}
+          onKeyDown={(event) => onPointKeyDown(index, event)}
+          onPointerDown={(event) => onPointPointerDown(index, event)}
+          onPointerUp={(event) => onPointPointerUp(index, event)}
+          style={{ borderColor: selected ? "var(--foreground)" : color }}
+          type="button"
+        />
+      </div>
+    </foreignObject>
+  );
+}