@pixel-point/toolcraft 0.0.8 → 0.0.11

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

@@ -17,6 +17,14 @@ export type VectorControlValue = {
   y: string;
 };
 
+type VectorPadAxisLock = "x" | "y";
+
+type VectorPadDragStart = {
+  clientX: number;
+  clientY: number;
+  value: VectorControlValue;
+};
+
 export type VectorPadVariant =
   | "default"
   | "whiteBalance"
@@ -24,10 +32,13 @@ export type VectorPadVariant =
   | "chromaOffset"
   | "toneBias";
 
+export type VectorPadCoordinateMode = "cartesian" | "screen";
+
 export type VectorControlProps = VectorControlValue & {
   defaultValue?: Partial<VectorControlValue>;
   name: string;
   onValueChange?: ControlValueChangeHandler<VectorControlValue>;
+  padCoordinateMode?: VectorPadCoordinateMode;
   padShape?: "compact" | "square";
   padVariant?: VectorPadVariant;
   xLabel?: string;
@@ -38,10 +49,20 @@ function clamp(value: number, min = 0, max = 1): number {
   return Math.min(max, Math.max(min, value));
 }
 
-function pointFromEvent(event: React.PointerEvent<HTMLElement>): CurvePoint {
+function getDefaultPadCoordinateMode(
+  padVariant: VectorPadVariant,
+): VectorPadCoordinateMode {
+  return padVariant === "default" ? "screen" : "cartesian";
+}
+
+function pointFromEvent(
+  event: React.PointerEvent<HTMLElement>,
+  coordinateMode: VectorPadCoordinateMode,
+): CurvePoint {
   const rect = event.currentTarget.getBoundingClientRect();
   const x = clamp((event.clientX - rect.left) / rect.width);
-  const y = clamp(1 - (event.clientY - rect.top) / rect.height);
+  const yRatio = clamp((event.clientY - rect.top) / rect.height);
+  const y = coordinateMode === "screen" ? yRatio : 1 - yRatio;
 
   return { x, y };
 }
@@ -54,6 +75,8 @@ type VectorPadStyle = React.CSSProperties & {
   "--xy-pad-y": string;
 };
 
+const vectorPadAxisLockThresholdPx = 2;
+
 const whiteBalancePadBackgroundImage =
   "linear-gradient(90deg,color-mix(in oklab, #2f7cff 72%, transparent),color-mix(in oklab, var(--foreground) 8%, transparent) 50%,color-mix(in oklab, #ff9a22 78%, transparent)),linear-gradient(180deg,color-mix(in oklab, #d84f9a 68%, transparent),transparent 49%,color-mix(in oklab, #42ba62 72%, transparent)),radial-gradient(circle at 50% 50%,color-mix(in oklab, var(--foreground) 7%, transparent),color-mix(in oklab, var(--background) 14%, transparent) 62%)";
 
@@ -73,13 +96,20 @@ const vectorPadBackgroundImages: Partial<Record<VectorPadVariant, string>> = {
   whiteBalance: whiteBalancePadBackgroundImage,
 };
 
-function getVectorPoint(x: string, y: string): VectorPadStyle {
+function getVectorPoint(
+  x: string,
+  y: string,
+  coordinateMode: VectorPadCoordinateMode,
+): VectorPadStyle {
   const parsedX = Number.parseFloat(x);
   const parsedY = Number.parseFloat(y);
   const clampedX = Number.isFinite(parsedX) ? clamp(parsedX, -1, 1) : 0;
   const clampedY = Number.isFinite(parsedY) ? clamp(parsedY, -1, 1) : 0;
   const xPosition = `${(clampedX + 1) * 50}%`;
-  const yPosition = `${(1 - (clampedY + 1) / 2) * 100}%`;
+  const yPosition =
+    coordinateMode === "screen"
+      ? `${((clampedY + 1) / 2) * 100}%`
+      : `${(1 - (clampedY + 1) / 2) * 100}%`;
 
   return {
     "--xy-pad-display-x":
@@ -93,13 +123,25 @@ function getVectorPoint(x: string, y: string): VectorPadStyle {
 }
 
 function getVectorValueLabel(x: string, y: string): string {
-  return `${x}, ${y}`;
+  return `${formatVectorPadCoordinate(x)}, ${formatVectorPadCoordinate(y)}`;
 }
 
 function normalizeVectorCoordinate(value: string | undefined): string {
   return typeof value === "string" && value.trim() ? value : "0.00";
 }
 
+function formatVectorPadCoordinate(value: string | undefined): string {
+  const parsedValue = Number.parseFloat(normalizeVectorCoordinate(value));
+
+  if (!Number.isFinite(parsedValue)) {
+    return "0.00";
+  }
+
+  const roundedValue = Math.abs(parsedValue) < 0.005 ? 0 : clamp(parsedValue, -1, 1);
+
+  return roundedValue.toFixed(2);
+}
+
 function parseVectorValueDraft(value: string): VectorControlValue | null {
   const matches = value.match(/[+-]?(?:\d+(?:[.,]\d+)?|[.,]\d+)/g);
 
@@ -277,20 +319,28 @@ function VectorPadHandle({ isDragging }: { isDragging: boolean }): React.JSX.Ele
 }
 
 function VectorPadField({
+  defaultValue,
   name,
   onValueChange,
+  padCoordinateMode,
   padShape = "compact",
   padVariant = "default",
   x,
   y,
 }: VectorControlProps): React.JSX.Element {
   const [isPointerDragging, setIsPointerDragging] = React.useState(false);
-  const normalizedX = normalizeVectorCoordinate(x);
-  const normalizedY = normalizeVectorCoordinate(y);
-  const point = getVectorPoint(normalizedX, normalizedY);
+  const normalizedX = formatVectorPadCoordinate(x);
+  const normalizedY = formatVectorPadCoordinate(y);
+  const coordinateMode =
+    padCoordinateMode ?? getDefaultPadCoordinateMode(padVariant);
+  const point = getVectorPoint(normalizedX, normalizedY, coordinateMode);
   const valueLabel = getVectorValueLabel(normalizedX, normalizedY);
   const vectorPadBackgroundImage = vectorPadBackgroundImages[padVariant];
+  const axisLockRef = React.useRef<VectorPadAxisLock | null>(null);
+  const dragStartRef = React.useRef<VectorPadDragStart | null>(null);
   const liveHistoryGroupRef = React.useRef<string | null>(null);
+  const resetX = formatVectorPadCoordinate(defaultValue?.x);
+  const resetY = formatVectorPadCoordinate(defaultValue?.y);
   const updateVector = (
     nextX: string,
     nextY: string,
@@ -321,17 +371,51 @@ function VectorPadField({
   }
 
   function updateFromPointer(event: React.PointerEvent<HTMLButtonElement>): void {
-    const nextPoint = pointFromEvent(event);
+    const nextPoint = pointFromEvent(event, coordinateMode);
+    const nextValue: VectorControlValue = {
+      x: (nextPoint.x * 2 - 1).toFixed(2),
+      y: (nextPoint.y * 2 - 1).toFixed(2),
+    };
+    const dragStart = dragStartRef.current;
+
+    if (event.shiftKey && dragStart) {
+      if (!axisLockRef.current) {
+        const deltaX = event.clientX - dragStart.clientX;
+        const deltaY = event.clientY - dragStart.clientY;
+
+        if (Math.hypot(deltaX, deltaY) < vectorPadAxisLockThresholdPx) {
+          updateVector(
+            dragStart.value.x,
+            dragStart.value.y,
+            getLiveHistoryMeta(),
+          );
+          return;
+        }
+
+        axisLockRef.current = Math.abs(deltaX) >= Math.abs(deltaY) ? "x" : "y";
+      }
+
+      updateVector(
+        axisLockRef.current === "x" ? nextValue.x : dragStart.value.x,
+        axisLockRef.current === "y" ? nextValue.y : dragStart.value.y,
+        getLiveHistoryMeta(),
+      );
+      return;
+    }
+
+    axisLockRef.current = null;
 
     updateVector(
-      (nextPoint.x * 2 - 1).toFixed(2),
-      (nextPoint.y * 2 - 1).toFixed(2),
+      nextValue.x,
+      nextValue.y,
       getLiveHistoryMeta(),
     );
   }
 
   function stopPointerDrag(): void {
     setIsPointerDragging(false);
+    axisLockRef.current = null;
+    dragStartRef.current = null;
     liveHistoryGroupRef.current = null;
   }
 
@@ -349,15 +433,28 @@ function VectorPadField({
       <button
         aria-label={`${name} X/Y pad`}
         className={cn(
-          "relative w-full cursor-default! touch-none overflow-hidden rounded-[calc(var(--radius)+2px)] bg-[linear-gradient(180deg,color-mix(in_oklab,var(--foreground)_4%,transparent),color-mix(in_oklab,var(--foreground)_1%,transparent))] focus-visible:shadow-[0_0_0_3px_color-mix(in_oklab,var(--foreground)_12%,transparent)] focus-visible:outline-none",
+          "relative w-full cursor-default! touch-none overflow-hidden rounded-[calc(var(--radius)+2px)] bg-[linear-gradient(180deg,color-mix(in_oklab,var(--foreground)_4%,transparent),color-mix(in_oklab,var(--foreground)_1%,transparent))] select-none focus-visible:shadow-[0_0_0_3px_color-mix(in_oklab,var(--foreground)_12%,transparent)] focus-visible:outline-none",
           padShape === "square" ? "aspect-square" : "h-[142px]",
         )}
+        data-vector-pad-coordinate-mode={coordinateMode}
         data-vector-pad-shape={padShape}
         data-vector-pad-variant={padVariant}
+        onDoubleClick={(event) => {
+          event.preventDefault();
+          stopPointerDrag();
+          updateVector(resetX, resetY);
+        }}
         onLostPointerCapture={stopPointerDrag}
         onPointerCancel={stopPointerDrag}
         onPointerDown={(event) => {
+          event.preventDefault();
           setIsPointerDragging(true);
+          axisLockRef.current = null;
+          dragStartRef.current = {
+            clientX: event.clientX,
+            clientY: event.clientY,
+            value: { x: normalizedX, y: normalizedY },
+          };
           event.currentTarget.setPointerCapture(event.pointerId);
           updateFromPointer(event);
         }}

package/templates/ui/components/panel/panel-actions.tsx

@@ -85,7 +85,7 @@ function getPanelActionIcon(action: PanelActionOption): ReactNode {
 
   const Icon = panelActionIconComponents[action.icon];
 
-  return <Icon data-icon="inline-start" />;
+  return <Icon data-icon="inline-start" data-icon-name={action.icon} />;
 }
 
 function getPanelActionAriaLabel(

package/templates/ui/components/panel/panel-section.tsx

@@ -53,11 +53,11 @@ export function PanelSection({
       {childArray.map((child, index) => (
         <ControlItem
           allowCompoundDividers={shouldRenderInnerDividers}
-          compoundDividerPlacement={
-            shouldRenderInnerDividers && childArray.length > 1 && index === 0
-              ? "bottom"
-              : "both"
-          }
+          compoundDividerPlacement={getCompoundDividerPlacement({
+            childCount: childArray.length,
+            index,
+            shouldRenderInnerDividers,
+          })}
           flush={flush || isActionSection}
           key={getPanelSectionChildKey(child, index)}
         >
@@ -100,6 +100,30 @@ export function PanelSection({
   );
 }
 
+function getCompoundDividerPlacement({
+  childCount,
+  index,
+  shouldRenderInnerDividers,
+}: {
+  childCount: number;
+  index: number;
+  shouldRenderInnerDividers: boolean;
+}): "both" | "bottom" | "top" {
+  if (!shouldRenderInnerDividers || childCount <= 1) {
+    return "both";
+  }
+
+  if (index === 0) {
+    return "bottom";
+  }
+
+  if (index === childCount - 1) {
+    return "top";
+  }
+
+  return "both";
+}
+
 function PanelSectionCollapsibleBody({
   collapsed,
   children,