@pixel-point/toolcraft 0.0.13 → 0.0.15

package/templates/ui/components/controls/gradient/gradient-control-utils.ts

@@ -1,4 +1,5 @@
 import type { GradientStop, GradientType } from "../control-types";
+import { getNativeColorPickerValue } from "../color/color-value-utils";
 
 export type IndexedGradientStop = GradientStop & { originalIndex: number };
 
@@ -50,17 +51,7 @@ export function normalizeStopOpacity(opacity: string): number {
 }
 
 export function normalizeColorInput(value: string): string {
-  const trimmedValue = value.trim();
-
-  if (/^[\da-f]{6}$/i.test(trimmedValue)) {
-    return `#${trimmedValue.toUpperCase()}`;
-  }
-
-  if (/^#[\da-f]{6}$/i.test(trimmedValue)) {
-    return trimmedValue.toUpperCase();
-  }
-
-  return getNativeColorPickerValue(trimmedValue).toUpperCase();
+  return getNativeColorPickerValue(value).toUpperCase();
 }
 
 export function formatColorInputValue(color: string): string {
@@ -69,20 +60,6 @@ export function formatColorInputValue(color: string): string {
   return normalizedColor.slice(1);
 }
 
-export function getNativeColorPickerValue(color: string): string {
-  const trimmedColor = color.trim();
-
-  if (/^#[\da-f]{6}$/i.test(trimmedColor)) {
-    return trimmedColor.toUpperCase();
-  }
-
-  if (/^[\da-f]{6}$/i.test(trimmedColor)) {
-    return `#${trimmedColor.toUpperCase()}`;
-  }
-
-  return "#000000";
-}
-
 export function sortStops(stops: readonly GradientStop[]): GradientStop[] {
   return [...stops].sort(
     (left, right) => parseStopPosition(left.position) - parseStopPosition(right.position),

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

@@ -1,61 +1,25 @@
 "use client";
 
-import {
-  useEffect,
-  useRef,
-  useState,
-  type Dispatch,
-  type MutableRefObject,
-  type RefObject,
-  type SetStateAction,
-} from "react";
+import type * as React from "react";
+import { useEffect, useRef, useState } from "react";
 
 import { Field } from "../../primitives";
-import { selectedItemBorderClassName } from "../../primitives/selection-state";
 import {
-  createControlHistoryGroupId,
   type ControlChangeMeta,
   type ControlValueChangeHandler,
   type GradientStop,
   type GradientType,
 } from "../control-types";
-import { cn } from "../../../lib/utils";
 import {
-  addGradientStop,
-  formatStopPosition,
   getGradientAngle,
   getGradientBackground,
   getGradientType,
-  getIndexedStops,
-  getPositionFromTrack,
-  getStopCssColor,
-  isButtonTarget,
-  maxGradientStops,
-  minGradientStops,
-  parseStopPosition,
-  removeGradientStop,
-  updateStopAt,
-  type IndexedGradientStop,
 } from "./gradient-control-utils";
 import { GradientStopsList } from "./gradient-stop-list";
+import { useGradientStopsController } from "./gradient-stops-controller";
+import { GradientStopsTrack } from "./gradient-stops-track";
 import { GradientToolbar } from "./gradient-toolbar";
 
-const playControlDragEndSound = () => undefined;
-const playControlDragStartSound = () => undefined;
-const playGradientAngleSound = (_previousAngle: number, _nextAngle: number) =>
-  undefined;
-const playGradientStopUpdateSound = (
-  _previousStop: GradientStop | undefined,
-  _nextStop: Partial<GradientStop>,
-) => undefined;
-
-function useGradientStopSelectionSound(
-  _selectedIndex: number | null,
-  setSelectedIndex: Dispatch<SetStateAction<number | null>>,
-) {
-  return (nextIndex: number) => setSelectedIndex(nextIndex);
-}
-
 export type GradientControlProps = {
   angle?: number;
   gradientType?: GradientType;
@@ -68,430 +32,6 @@ export type GradientControlProps = {
   stops: readonly GradientStop[];
 };
 
-type GradientStopsControllerOptions = {
-  angle: number;
-  gradientType: GradientType;
-  name: string;
-  onValueChange?: ControlValueChangeHandler<{
-    angle: number;
-    gradientType: GradientType;
-    stops: readonly GradientStop[];
-  }>;
-  stops: readonly GradientStop[];
-  trackRef: RefObject<HTMLDivElement | null>;
-};
-
-type GradientStopActionsOptions = GradientStopsControllerOptions & {
-  activeStop: GradientStop | null;
-  setSelectedIndex: Dispatch<SetStateAction<number | null>>;
-};
-
-function useGradientStopActions({
-  activeStop,
-  angle,
-  gradientType,
-  onValueChange,
-  setSelectedIndex,
-  stops,
-}: GradientStopActionsOptions) {
-  function updateGradient(
-    nextGradient: {
-      angle?: number;
-      gradientType?: GradientType;
-      stops?: readonly GradientStop[];
-    },
-    meta?: ControlChangeMeta,
-  ): void {
-    const nextValue = {
-      angle: nextGradient.angle ?? angle,
-      gradientType: nextGradient.gradientType ?? gradientType,
-      stops: nextGradient.stops ?? stops,
-    };
-
-    if (meta) {
-      onValueChange?.(nextValue, meta);
-      return;
-    }
-
-    onValueChange?.(nextValue);
-  }
-
-  function updateStop(
-    index: number,
-    nextStop: Partial<GradientStop>,
-    meta?: ControlChangeMeta,
-  ): void {
-    playGradientStopUpdateSound(stops[index], nextStop);
-    updateGradient({ stops: updateStopAt(stops, index, nextStop) }, meta);
-  }
-
-  function addStop(position = "50%"): void {
-    if (stops.length >= maxGradientStops) {
-      return;
-    }
-
-    const { nextStop, nextStops } = addGradientStop(
-      stops,
-      activeStop,
-      position,
-    );
-
-    updateGradient({ stops: nextStops });
-    setSelectedIndex(nextStops.indexOf(nextStop));
-  }
-
-  function removeStop(index: number): void {
-    if (stops.length <= minGradientStops) {
-      return;
-    }
-
-    const nextStops = removeGradientStop(stops, index);
-
-    updateGradient({ stops: nextStops });
-    setSelectedIndex(
-      nextStops.length > 0 ? Math.min(index, nextStops.length - 1) : null,
-    );
-  }
-
-  return {
-    addStop,
-    removeStop,
-    updateAngle: (nextAngle: number, meta?: ControlChangeMeta) => {
-      playGradientAngleSound(angle, nextAngle);
-      updateGradient({ angle: nextAngle }, meta);
-    },
-    updateGradientType: (nextType: GradientType) =>
-      updateGradient({ gradientType: nextType }),
-    updateStop,
-  };
-}
-
-type GradientStopActions = ReturnType<typeof useGradientStopActions>;
-
-function getGradientDragHistoryMeta(
-  name: string,
-  dragHistoryGroupRef: MutableRefObject<string | null>,
-): ControlChangeMeta {
-  dragHistoryGroupRef.current ??= createControlHistoryGroupId(`gradient:${name}`);
-
-  return {
-    history: "merge",
-    historyGroup: dragHistoryGroupRef.current,
-  };
-}
-
-function useGradientStopDragWindowEvents({
-  actions,
-  dragHistoryGroupRef,
-  draggingIndex,
-  name,
-  setDraggingIndex,
-  trackRef,
-}: {
-  actions: GradientStopActions;
-  dragHistoryGroupRef: MutableRefObject<string | null>;
-  draggingIndex: number | null;
-  name: string;
-  setDraggingIndex: Dispatch<SetStateAction<number | null>>;
-  trackRef: RefObject<HTMLDivElement | null>;
-}): void {
-  useEffect(() => {
-    const activeDraggingIndex = draggingIndex;
-
-    if (activeDraggingIndex === null) {
-      return;
-    }
-
-    const stopIndex = activeDraggingIndex;
-
-    function handlePointerMove(event: PointerEvent): void {
-      actions.updateStop(
-        stopIndex,
-        {
-          position: getPositionFromTrack(trackRef.current, event.clientX),
-        },
-        getGradientDragHistoryMeta(name, dragHistoryGroupRef),
-      );
-    }
-
-    function stopDragging(): void {
-      playControlDragEndSound();
-      setDraggingIndex(null);
-      dragHistoryGroupRef.current = null;
-    }
-
-    window.addEventListener("pointermove", handlePointerMove);
-    window.addEventListener("pointerup", stopDragging);
-    window.addEventListener("pointercancel", stopDragging);
-
-    return () => {
-      window.removeEventListener("pointermove", handlePointerMove);
-      window.removeEventListener("pointerup", stopDragging);
-      window.removeEventListener("pointercancel", stopDragging);
-    };
-  });
-}
-
-function useGradientStopsController(options: GradientStopsControllerOptions) {
-  const { stops, trackRef } = options;
-  const [draggingIndex, setDraggingIndex] = useState<number | null>(null);
-  const dragHistoryGroupRef = useRef<string | null>(null);
-  const [selectedIndex, setSelectedIndex] = useState<number | null>(0);
-  const activeStop =
-    selectedIndex === null ? null : (stops[selectedIndex] ?? null);
-  const actions = useGradientStopActions({
-    ...options,
-    activeStop,
-    setSelectedIndex,
-  });
-  const selectStop = useGradientStopSelectionSound(
-    selectedIndex,
-    setSelectedIndex,
-  );
-
-  useGradientStopDragWindowEvents({
-    actions,
-    dragHistoryGroupRef,
-    draggingIndex,
-    name: options.name,
-    setDraggingIndex,
-    trackRef,
-  });
-
-  function handleTrackPointerDown(
-    event: React.PointerEvent<HTMLDivElement>,
-  ): void {
-    if (
-      draggingIndex !== null ||
-      stops.length >= maxGradientStops ||
-      isButtonTarget(event.target)
-    ) {
-      return;
-    }
-
-    actions.addStop(getPositionFromTrack(trackRef.current, event.clientX));
-  }
-
-  function handleTrackPointerMove(
-    event: React.PointerEvent<HTMLDivElement>,
-  ): void {
-    if (draggingIndex === null) {
-      return;
-    }
-
-    actions.updateStop(
-      draggingIndex,
-      {
-        position: getPositionFromTrack(trackRef.current, event.clientX),
-      },
-      getGradientDragHistoryMeta(options.name, dragHistoryGroupRef),
-    );
-  }
-
-  function handleStartDrag(
-    index: number,
-    event: React.PointerEvent<HTMLButtonElement>,
-  ): void {
-    event.preventDefault();
-    event.stopPropagation();
-    event.currentTarget.focus();
-    event.currentTarget.setPointerCapture(event.pointerId);
-    playControlDragStartSound();
-    dragHistoryGroupRef.current = createControlHistoryGroupId(`gradient:${options.name}`);
-    setDraggingIndex(index);
-    selectStop(index);
-  }
-
-  function handleStopDoubleClick(
-    index: number,
-    event: React.MouseEvent<HTMLButtonElement>,
-  ): void {
-    event.stopPropagation();
-    actions.removeStop(index);
-  }
-
-  function handleStopKeyDown(
-    index: number,
-    event: React.KeyboardEvent<HTMLButtonElement>,
-  ): void {
-    if (event.key !== "Delete" && event.key !== "Backspace") {
-      return;
-    }
-
-    if (selectedIndex !== index) {
-      return;
-    }
-
-    event.preventDefault();
-    event.stopPropagation();
-    actions.removeStop(index);
-  }
-
-  return {
-    ...actions,
-    draggingIndex,
-    handleStopDoubleClick,
-    handleStopKeyDown,
-    handleStartDrag,
-    handleTrackPointerDown,
-    handleTrackPointerMove,
-    indexedStops: getIndexedStops(stops),
-    selectStop,
-    selectedIndex,
-    setDraggingIndex: (nextIndex: number | null) => {
-      setDraggingIndex(nextIndex);
-      if (nextIndex === null) {
-        dragHistoryGroupRef.current = null;
-      }
-    },
-    setSelectedIndex,
-  };
-}
-
-const gradientStopPinEdgeInset = 2;
-
-function getGradientStopPinLeftPosition(position: number): string {
-  const stopPosition = formatStopPosition(position);
-  const pixelOffset = gradientStopPinEdgeInset * (1 - position * 2);
-
-  if (Math.abs(pixelOffset) < 0.01) {
-    return stopPosition;
-  }
-
-  const offsetOperator = pixelOffset > 0 ? "+" : "-";
-  const offsetValue = Number(Math.abs(pixelOffset).toFixed(2));
-
-  return `calc(${stopPosition} ${offsetOperator} ${offsetValue}px)`;
-}
-
-function GradientStopPin({
-  isDragging,
-  isSelected,
-  onDoubleClick,
-  onKeyDown,
-  onPointerDown,
-  stop,
-}: {
-  isDragging: boolean;
-  isSelected: boolean;
-  onDoubleClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
-  onKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
-  onPointerDown: (event: React.PointerEvent<HTMLButtonElement>) => void;
-  stop: IndexedGradientStop;
-}): React.JSX.Element {
-  const stopPosition = parseStopPosition(stop.position);
-
-  return (
-    <button
-      aria-label={`Gradient stop ${stop.originalIndex + 1}`}
-      aria-pressed={isSelected}
-      className={cn(
-        "absolute top-1 z-10 flex touch-none -translate-x-1/2 cursor-grab flex-col items-center rounded-lg outline-none",
-        "active:cursor-grabbing",
-        isDragging && "cursor-grabbing",
-      )}
-      onDoubleClick={onDoubleClick}
-      onKeyDown={onKeyDown}
-      onPointerDown={onPointerDown}
-      style={{ left: getGradientStopPinLeftPosition(stopPosition) }}
-      type="button"
-    >
-      <span
-        className={cn(
-          "flex size-[22px] items-center justify-center rounded-md bg-[color:var(--muted)] shadow-[0_4px_7px_color-mix(in_oklab,var(--background)_30%,transparent)] transition-colors",
-          isSelected && "bg-[color:var(--accent)]",
-        )}
-      >
-        <span
-          aria-hidden="true"
-          className={cn(
-            "h-3.5 max-h-3.5 min-h-3.5 w-3.5 max-w-3.5 min-w-3.5 flex-none rounded-[4px] border border-[color:color-mix(in_oklab,var(--border)_10%,transparent)]",
-            isSelected && selectedItemBorderClassName,
-          )}
-          style={{ backgroundColor: getStopCssColor(stop) }}
-        />
-      </span>
-      <svg
-        aria-hidden="true"
-        className={cn(
-          "h-1 w-2.5 text-[color:var(--muted)] transition-colors",
-          isSelected && "text-[color:var(--accent)]",
-        )}
-        fill="none"
-        viewBox="0 0 10 4"
-      >
-        <path d="M0 0H10L5.72 3.42Q5 4.08 4.28 3.42L0 0Z" fill="currentColor" />
-      </svg>
-    </button>
-  );
-}
-
-function GradientStopsTrack({
-  gradient,
-  onDragEnd,
-  onPointerDown,
-  onPointerMove,
-  onRemoveStop,
-  onRemoveStopByKey,
-  onStartDrag,
-  selectedIndex,
-  stops,
-  trackRef,
-  draggingIndex,
-}: {
-  gradient: string;
-  draggingIndex: number | null;
-  onDragEnd: () => void;
-  onPointerDown: (event: React.PointerEvent<HTMLDivElement>) => void;
-  onPointerMove: (event: React.PointerEvent<HTMLDivElement>) => void;
-  onRemoveStop: (
-    index: number,
-    event: React.MouseEvent<HTMLButtonElement>,
-  ) => void;
-  onRemoveStopByKey: (
-    index: number,
-    event: React.KeyboardEvent<HTMLButtonElement>,
-  ) => void;
-  onStartDrag: (
-    index: number,
-    event: React.PointerEvent<HTMLButtonElement>,
-  ) => void;
-  selectedIndex: number | null;
-  stops: readonly IndexedGradientStop[];
-  trackRef: React.RefObject<HTMLDivElement | null>;
-}): React.JSX.Element {
-  return (
-    <div
-      aria-label="Gradient stops track"
-      className="app-no-drag relative mt-1 h-12 w-full touch-none cursor-crosshair"
-      onPointerCancel={onDragEnd}
-      onPointerDown={onPointerDown}
-      onPointerMove={onPointerMove}
-      onPointerUp={onDragEnd}
-      ref={trackRef}
-    >
-      <div className="absolute inset-x-0 top-4 h-6 overflow-hidden rounded-md border border-[color:color-mix(in_oklab,var(--border)_10%,transparent)]">
-        <div
-          aria-hidden="true"
-          className="absolute inset-0 rounded-[inherit]"
-          style={{ background: gradient }}
-        />
-      </div>
-      {stops.map((stop) => (
-        <GradientStopPin
-          isDragging={draggingIndex === stop.originalIndex}
-          isSelected={selectedIndex === stop.originalIndex}
-          key={stop.originalIndex}
-          onDoubleClick={(event) => onRemoveStop(stop.originalIndex, event)}
-          onKeyDown={(event) => onRemoveStopByKey(stop.originalIndex, event)}
-          onPointerDown={(event) => onStartDrag(stop.originalIndex, event)}
-          stop={stop}
-        />
-      ))}
-    </div>
-  );
-}
-
 export function GradientControl({
   angle: angleProp,
   gradientType: gradientTypeProp,