@pixel-point/toolcraft 0.0.2

package/templates/ui/components/controls/curves/curves-control.tsx

@@ -0,0 +1,445 @@
+"use client";
+
+import * as React from "react";
+import { useEffect, useRef, useState } from "react";
+
+import {
+  createControlHistoryGroupId,
+  type ControlChangeMeta,
+  type ControlValueChangeHandler,
+  type CurveChannel,
+  type CurvePoint,
+} from "../control-types";
+import { ControlFieldLabel } from "../../control-layout";
+import { ChannelTabs, CurveGraph, singleCurveChannels } from "./curve-graph";
+import {
+  type CurveInterpolation,
+  constrainCurvePoint,
+  defaultCurveInterpolation,
+  getCurvePointAtX,
+  insertCurvePoint,
+  isPointNearCurve,
+  normalizeCurvePoints,
+  pointFromSvgEvent,
+  removeCurvePoint,
+  replaceCurvePoint,
+} from "./curve-geometry";
+
+const playControlAddSound = () => undefined;
+const playControlDeleteSound = () => undefined;
+const playControlDragEndSound = () => undefined;
+const playControlDragStartSound = () => undefined;
+const playControlSelectSound = () => undefined;
+
+export type CurvesControlValue = {
+  activeChannel: CurveChannel;
+  points: Record<CurveChannel, readonly CurvePoint[]>;
+  selectedPointIndex?: number;
+};
+
+export type CurvesControlVariant = "rgb" | "single";
+
+export type CurvesControlProps = {
+  activeChannel?: CurveChannel;
+  interpolation?: CurveInterpolation;
+  name?: string;
+  onValueChange?: ControlValueChangeHandler<CurvesControlValue>;
+  points?: Record<CurveChannel, readonly CurvePoint[]>;
+  selectedPointIndex?: number;
+  variant?: CurvesControlVariant;
+};
+
+type CurveEditorProps = {
+  activeChannel: CurveChannel;
+  interpolation: CurveInterpolation;
+  onValueChange?: CurvesControlProps["onValueChange"];
+  points: Record<CurveChannel, readonly CurvePoint[]>;
+  selectedPointIndex?: number;
+};
+
+type DraggingPoint = {
+  channel: CurveChannel;
+  hasMoved: boolean;
+  index: number;
+};
+
+function useCurveEditor({
+  activeChannel,
+  interpolation,
+  onValueChange,
+  points,
+  selectedPointIndex,
+}: CurveEditorProps) {
+  const graphRef = useRef<SVGSVGElement>(null);
+  const dragHistoryGroupRef = useRef<string | null>(null);
+  const [draggingPoint, setDraggingPoint] = useState<DraggingPoint | null>(
+    null,
+  );
+  const activePoints = normalizeCurvePoints(points[activeChannel]);
+
+  function updateCurve(
+    nextPoints: readonly CurvePoint[],
+    nextSelectedIndex: number | null,
+    meta?: ControlChangeMeta,
+  ): void {
+    onValueChange?.(
+      {
+        activeChannel,
+        points: { ...points, [activeChannel]: normalizeCurvePoints(nextPoints) },
+        selectedPointIndex: nextSelectedIndex ?? undefined,
+      },
+      meta,
+    );
+  }
+
+  function pointFromEvent(
+    event: Pick<PointerEvent, "clientX" | "clientY">,
+  ): CurvePoint {
+    return pointFromSvgEvent(event, graphRef.current);
+  }
+
+  function movePoint(
+    index: number,
+    point: CurvePoint,
+    meta?: ControlChangeMeta,
+  ): void {
+    updateCurve(
+      replaceCurvePoint(
+        activePoints,
+        index,
+        constrainCurvePoint(activePoints, index, point),
+      ),
+      null,
+      meta,
+    );
+  }
+
+  function addPoint(event: React.PointerEvent<SVGRectElement>): void {
+    event.preventDefault();
+    const point = pointFromEvent(event);
+
+    if (!isPointNearCurve(activePoints, point, undefined, interpolation)) {
+      if (selectedPointIndex !== undefined) {
+        updateCurve(activePoints, null);
+      }
+      return;
+    }
+
+    const nextCurve = insertCurvePoint(
+      activePoints,
+      getCurvePointAtX(activePoints, point.x, interpolation),
+    );
+    updateCurve(nextCurve.points, null);
+    setDraggingPoint({
+      channel: activeChannel,
+      hasMoved: true,
+      index: nextCurve.index,
+    });
+    playControlAddSound();
+  }
+
+  function removePoint(index: number): void {
+    if (index > 0 && index < activePoints.length - 1) {
+      updateCurve(removeCurvePoint(activePoints, index), null);
+      playControlDeleteSound();
+    }
+  }
+
+  useCurveDragging({
+    activeChannel,
+    dragHistoryGroupRef,
+    draggingPoint,
+    movePoint,
+    pointFromEvent,
+    setDraggingPoint,
+    stopDragging: () => {
+      dragHistoryGroupRef.current = null;
+      setDraggingPoint(null);
+    },
+  });
+  useClearCurveSelectionOnOutsidePointerDown({
+    activePoints,
+    graphRef,
+    selectedPointIndex: selectedPointIndex ?? null,
+    updateCurve,
+  });
+
+  function startDraggingPoint(index: number): void {
+    dragHistoryGroupRef.current = createControlHistoryGroupId(
+      `curves:${activeChannel}`,
+    );
+    setDraggingPoint({
+      channel: activeChannel,
+      hasMoved: false,
+      index,
+    });
+  }
+
+  return {
+    activePoints,
+    draggingPoint,
+    addPoint,
+    draggingPointIndex:
+      draggingPoint?.channel === activeChannel ? draggingPoint.index : null,
+    graphRef,
+    movePoint,
+    removePoint,
+    selectedPointIndex: selectedPointIndex ?? null,
+    startDraggingPoint,
+    selectPoint: (index: number, meta?: ControlChangeMeta) =>
+      updateCurve(activePoints, index, meta),
+    updateCurve,
+  };
+}
+
+const defaultActiveChannel = "RGB" satisfies CurveChannel;
+const defaultName = "Curves";
+const defaultCurvePoints = {
+  B: [
+    { x: 0, y: 0 },
+    { x: 0.5, y: 0.5 },
+    { x: 1, y: 1 },
+  ],
+  G: [
+    { x: 0, y: 0 },
+    { x: 0.5, y: 0.5 },
+    { x: 1, y: 1 },
+  ],
+  R: [
+    { x: 0, y: 0 },
+    { x: 0.5, y: 0.5 },
+    { x: 1, y: 1 },
+  ],
+  RGB: [
+    { x: 0, y: 0 },
+    { x: 0.5, y: 0.5 },
+    { x: 1, y: 1 },
+  ],
+} satisfies Record<CurveChannel, readonly CurvePoint[]>;
+const defaultSelectedPointIndex = 1;
+
+function withDefaultCurvePoints(
+  points: Record<CurveChannel, readonly CurvePoint[]> | undefined,
+): Record<CurveChannel, readonly CurvePoint[]> {
+  return { ...defaultCurvePoints, ...points };
+}
+
+function useClearCurveSelectionOnOutsidePointerDown({
+  activePoints,
+  graphRef,
+  selectedPointIndex,
+  updateCurve,
+}: {
+  activePoints: readonly CurvePoint[];
+  graphRef: React.RefObject<SVGSVGElement | null>;
+  selectedPointIndex: number | null;
+  updateCurve: (
+    nextPoints: readonly CurvePoint[],
+    nextSelectedIndex: number | null,
+  ) => void;
+}): void {
+  useEffect(() => {
+    if (selectedPointIndex === null) {
+      return;
+    }
+
+    function handlePointerDown(event: PointerEvent): void {
+      if (!graphRef.current?.contains(event.target as Node)) {
+        updateCurve(activePoints, null);
+      }
+    }
+
+    window.addEventListener("pointerdown", handlePointerDown);
+
+    return () => {
+      window.removeEventListener("pointerdown", handlePointerDown);
+    };
+  }, [activePoints, graphRef, selectedPointIndex, updateCurve]);
+}
+
+function useCurveDragging({
+  activeChannel,
+  dragHistoryGroupRef,
+  draggingPoint,
+  movePoint,
+  pointFromEvent,
+  setDraggingPoint,
+  stopDragging,
+}: {
+  activeChannel: CurveChannel;
+  dragHistoryGroupRef: React.MutableRefObject<string | null>;
+  draggingPoint: DraggingPoint | null;
+  movePoint: (
+    index: number,
+    point: CurvePoint,
+    meta?: ControlChangeMeta,
+  ) => void;
+  pointFromEvent: (
+    event: Pick<PointerEvent, "clientX" | "clientY">,
+  ) => CurvePoint;
+  setDraggingPoint: React.Dispatch<React.SetStateAction<DraggingPoint | null>>;
+  stopDragging: () => void;
+}): void {
+  useEffect(() => {
+    const currentDrag = draggingPoint;
+    if (!currentDrag) {
+      return;
+    }
+
+    const activeDrag: DraggingPoint = currentDrag;
+
+    function handlePointerMove(event: PointerEvent): void {
+      if (activeDrag.channel === activeChannel) {
+        dragHistoryGroupRef.current ??= createControlHistoryGroupId(
+          `curves:${activeChannel}`,
+        );
+        movePoint(activeDrag.index, pointFromEvent(event), {
+          history: "merge",
+          historyGroup: dragHistoryGroupRef.current,
+        });
+        setDraggingPoint((currentPoint) =>
+          currentPoint === activeDrag
+            ? { ...currentPoint, hasMoved: true }
+            : currentPoint,
+        );
+      }
+    }
+
+    function handleStopDragging(): void {
+      playControlDragEndSound();
+      stopDragging();
+    }
+
+    window.addEventListener("pointermove", handlePointerMove);
+    window.addEventListener("pointerup", handleStopDragging);
+    window.addEventListener("pointercancel", handleStopDragging);
+
+    return () => {
+      window.removeEventListener("pointermove", handlePointerMove);
+      window.removeEventListener("pointerup", handleStopDragging);
+      window.removeEventListener("pointercancel", handleStopDragging);
+    };
+  });
+}
+
+export function CurvesControl(props: CurvesControlProps): React.JSX.Element {
+  const {
+    activeChannel: controlledActiveChannel,
+    interpolation: controlledInterpolation,
+    name = defaultName,
+    onValueChange,
+    points: controlledPoints,
+    selectedPointIndex: controlledSelectedPointIndex,
+    variant = "rgb",
+  } = props;
+  const singleCurve = variant === "single";
+  const interpolation =
+    controlledInterpolation ?? (singleCurve ? "monotone" : defaultCurveInterpolation);
+  const isActiveChannelControlled = "activeChannel" in props;
+  const isPointsControlled = controlledPoints !== undefined;
+  const isSelectedPointIndexControlled = "selectedPointIndex" in props;
+  const [uncontrolledActiveChannel, setUncontrolledActiveChannel] =
+    useState<CurveChannel>(defaultActiveChannel);
+  const [uncontrolledPoints, setUncontrolledPoints] =
+    useState<Record<CurveChannel, readonly CurvePoint[]>>(defaultCurvePoints);
+  const [uncontrolledSelectedPointIndex, setUncontrolledSelectedPointIndex] =
+    useState<number | undefined>(defaultSelectedPointIndex);
+  const activeChannel = singleCurve
+    ? defaultActiveChannel
+    : controlledActiveChannel ?? uncontrolledActiveChannel;
+  const points = withDefaultCurvePoints(controlledPoints ?? uncontrolledPoints);
+  const selectedPointIndex = isSelectedPointIndexControlled
+    ? controlledSelectedPointIndex
+    : uncontrolledSelectedPointIndex;
+
+  function handleValueChange(
+    value: CurvesControlValue,
+    meta?: ControlChangeMeta,
+  ): void {
+    if (!isActiveChannelControlled) {
+      setUncontrolledActiveChannel(value.activeChannel);
+    }
+    if (!isPointsControlled) {
+      setUncontrolledPoints(value.points);
+    }
+    if (!isSelectedPointIndexControlled) {
+      setUncontrolledSelectedPointIndex(value.selectedPointIndex);
+    }
+    onValueChange?.(value, meta);
+  }
+
+  const editor = useCurveEditor({
+    activeChannel,
+    interpolation,
+    onValueChange: handleValueChange,
+    points,
+    selectedPointIndex,
+  });
+
+  return (
+    <div className="flex min-w-0 flex-col gap-3" aria-label={name}>
+      {singleCurve ? (
+        <ControlFieldLabel>{name}</ControlFieldLabel>
+      ) : (
+        <div className="flex min-w-0 flex-col gap-2">
+          <ChannelTabs
+            name={name}
+            onValueChange={(nextChannel) => {
+              handleValueChange({ activeChannel: nextChannel, points });
+              playControlSelectSound();
+            }}
+            value={activeChannel}
+          />
+        </div>
+      )}
+      <CurveGraph
+        activeChannel={activeChannel}
+        activePoints={editor.activePoints}
+        ariaLabel={singleCurve ? `${name} curve editor` : "Color curves editor"}
+        channels={singleCurve ? singleCurveChannels : undefined}
+        draggingPointIndex={editor.draggingPointIndex}
+        graphRef={editor.graphRef}
+        interpolation={interpolation}
+        onBackgroundPointerDown={editor.addPoint}
+        onPointDoubleClick={(index, event) => {
+          event.stopPropagation();
+          editor.removePoint(index);
+        }}
+        onPointKeyDown={(index, event) => {
+          handlePointKeyDown(index, event, editor);
+        }}
+        onPointPointerDown={(index, event) => {
+          event.stopPropagation();
+          event.currentTarget.setPointerCapture?.(event.pointerId);
+          editor.selectPoint(index, { history: "skip" });
+          playControlDragStartSound();
+          editor.startDraggingPoint(index);
+        }}
+        onPointPointerUp={() => undefined}
+        points={points}
+        selectedPointIndex={editor.selectedPointIndex}
+      />
+    </div>
+  );
+}
+
+function handlePointKeyDown(
+  index: number,
+  event: React.KeyboardEvent<HTMLButtonElement>,
+  editor: ReturnType<typeof useCurveEditor>,
+): void {
+  if (event.key === "Enter" || event.key === " ") {
+    event.preventDefault();
+    editor.updateCurve(editor.activePoints, index, { history: "skip" });
+    playControlSelectSound();
+    return;
+  }
+
+  if (
+    (event.key === "Backspace" || event.key === "Delete") &&
+    editor.selectedPointIndex === index
+  ) {
+    event.preventDefault();
+    editor.removePoint(index);
+  }
+}

package/templates/ui/components/controls/curves/index.ts

@@ -0,0 +1,6 @@
+"use client";
+
+export { CurvesControl } from "./curves-control";
+export { getCurvePointAtX } from "./curve-geometry";
+export type { CurveInterpolation } from "./curve-geometry";
+export type { CurvesControlProps, CurvesControlVariant } from "./curves-control";

package/templates/ui/components/controls/file-drop/file-drop-control.tsx

@@ -0,0 +1,191 @@
+"use client";
+
+import * as React from "react";
+import { CloudArrowUpIcon, XIcon } from "@phosphor-icons/react";
+
+import { cn } from "../../../lib/utils";
+import { Button, Field } from "../../primitives";
+
+export type FileDropPreview = {
+  alt?: string;
+  size?: {
+    height: number;
+    width: number;
+  };
+  src: string;
+};
+
+export type FileDropControlProps = {
+  accept: string;
+  onClear?: () => void;
+  onFileSelect?: (file: File) => void;
+  preview?: FileDropPreview;
+};
+
+function isDragLeavingCurrentTarget(event: React.DragEvent<HTMLElement>): boolean {
+  const nextTarget = event.relatedTarget;
+
+  return !(nextTarget instanceof Node && event.currentTarget.contains(nextTarget));
+}
+
+function getFileInputAccept(accept: string): string {
+  return accept
+    .split(",")
+    .map((part) => part.trim().toLowerCase())
+    .flatMap((part) => {
+      switch (part) {
+        case "gif":
+          return [".gif", "image/gif"];
+        case "heic":
+          return [".heic", "image/heic"];
+        case "heif":
+          return [".heif", "image/heif"];
+        case "jpg":
+        case "jpeg":
+          return [".jpg", ".jpeg", "image/jpeg"];
+        case "png":
+          return [".png", "image/png"];
+        case "svg":
+          return [".svg", "image/svg+xml"];
+        case "tif":
+        case "tiff":
+          return [".tif", ".tiff", "image/tiff"];
+        case "webp":
+          return [".webp", "image/webp"];
+        default:
+          return part.startsWith(".") || part.includes("/") ? [part] : [];
+      }
+    })
+    .join(",");
+}
+
+function getPreviewImageStyle(size: FileDropPreview["size"]): React.CSSProperties {
+  if (!size || size.height <= 0 || size.width <= 0) {
+    return { width: "100%" };
+  }
+
+  const maxWidth = Math.max(1, (196 * size.width) / size.height);
+
+  return {
+    width: `min(100%, ${maxWidth.toFixed(2)}px)`,
+  };
+}
+
+export function FileDropControl({
+  accept,
+  onClear,
+  onFileSelect,
+  preview,
+}: FileDropControlProps): React.JSX.Element {
+  const inputRef = React.useRef<HTMLInputElement>(null);
+  const [dragOver, setDragOver] = React.useState(false);
+  const hasPreview = Boolean(preview?.src);
+
+  function handleFile(file: File | undefined): void {
+    if (!file) {
+      return;
+    }
+
+    onFileSelect?.(file);
+  }
+
+  function openFileDialog(): void {
+    inputRef.current?.click();
+  }
+
+  function handleDropTargetKeyDown(event: React.KeyboardEvent<HTMLDivElement>): void {
+    if (event.key !== "Enter" && event.key !== " ") {
+      return;
+    }
+
+    event.preventDefault();
+    openFileDialog();
+  }
+
+  return (
+    <Field className="min-w-0 gap-2">
+      <input
+        accept={getFileInputAccept(accept)}
+        aria-hidden="true"
+        className="hidden"
+        onChange={(event) => {
+          handleFile(event.currentTarget.files?.[0]);
+          event.currentTarget.value = "";
+        }}
+        ref={inputRef}
+        tabIndex={-1}
+        type="file"
+      />
+      <div
+        aria-label={hasPreview ? "Replace image file" : "Browse image file"}
+        className={cn(
+          "group/file-upload relative flex min-h-16 w-full cursor-pointer flex-col items-center justify-center gap-1.5 rounded-lg border border-dashed border-[color:color-mix(in_oklab,var(--border)_18%,transparent)] bg-[color:color-mix(in_oklab,var(--foreground)_3%,transparent)] text-center shadow-none transition-[background-color,border-color,box-shadow] duration-150 ease-out hover:border-[color:color-mix(in_oklab,var(--border)_35%,transparent)] hover:bg-[color:color-mix(in_oklab,var(--foreground)_6%,transparent)] data-[drag-over=true]:border-[color:color-mix(in_oklab,var(--link)_28%,transparent)] data-[drag-over=true]:bg-[color:color-mix(in_oklab,var(--link)_13%,transparent)] data-[drag-over=true]:shadow-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--background)]",
+          hasPreview ? "overflow-hidden p-2" : "px-3 py-3",
+        )}
+        data-drag-over={dragOver}
+        onClick={openFileDialog}
+        onDragEnter={(event) => {
+          event.preventDefault();
+          setDragOver(true);
+        }}
+        onDragLeave={(event) => {
+          if (isDragLeavingCurrentTarget(event)) {
+            setDragOver(false);
+          }
+        }}
+        onDragOver={(event) => {
+          event.preventDefault();
+          setDragOver(true);
+        }}
+        onDrop={(event) => {
+          event.preventDefault();
+          setDragOver(false);
+          handleFile(event.dataTransfer?.files?.[0]);
+        }}
+        onKeyDown={handleDropTargetKeyDown}
+        role="button"
+        tabIndex={0}
+      >
+        {hasPreview ? (
+          <>
+            <img
+              alt={preview?.alt ?? ""}
+              className="block h-auto max-h-[196px] max-w-full rounded-[calc(var(--radius-lg)-4px)] object-contain"
+              draggable={false}
+              height={preview?.size?.height}
+              src={preview?.src}
+              style={getPreviewImageStyle(preview?.size)}
+              width={preview?.size?.width}
+            />
+            {onClear ? (
+              <Button
+                aria-label="Remove image"
+                className="absolute top-3 right-3"
+                onClick={(event) => {
+                  event.stopPropagation();
+                  onClear();
+                }}
+                size="icon-sm"
+                type="button"
+                variant="ghost"
+              >
+                <XIcon className="drop-shadow-[0_2px_1px_color-mix(in_oklab,var(--background)_80%,transparent)]" />
+              </Button>
+            ) : null}
+          </>
+        ) : (
+          <>
+            <CloudArrowUpIcon
+              className="size-6 flex-none text-[color:var(--muted-foreground)] transition-colors duration-150 ease-out group-data-[drag-over=true]/file-upload:text-[color:var(--link)]"
+              weight="light"
+            />
+            <p className="m-0 flex max-w-full flex-col text-xs leading-tight text-[color:color-mix(in_oklab,var(--foreground)_60%,transparent)] transition-colors duration-150 ease-out group-hover/file-upload:text-[color:color-mix(in_oklab,var(--foreground)_85%,transparent)] group-data-[drag-over=true]/file-upload:text-[color:var(--link)]">
+              <span>Click to upload an image</span>
+              <span>or drag it onto the canvas</span>
+            </p>
+          </>
+        )}
+      </div>
+    </Field>
+  );
+}

package/templates/ui/components/controls/file-drop/index.ts

@@ -0,0 +1,5 @@
+"use client";
+
+export { FileDropControl } from "./file-drop-control";
+export type { FileDropControlProps } from "./file-drop-control";
+export type { FileDropPreview } from "./file-drop-control";