@pixel-point/toolcraft 0.0.7 → 0.0.9

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":
@@ -279,6 +309,7 @@ function VectorPadHandle({ isDragging }: { isDragging: boolean }): React.JSX.Ele
 function VectorPadField({
   name,
   onValueChange,
+  padCoordinateMode,
   padShape = "compact",
   padVariant = "default",
   x,
@@ -287,9 +318,13 @@ function VectorPadField({
   const [isPointerDragging, setIsPointerDragging] = React.useState(false);
   const normalizedX = normalizeVectorCoordinate(x);
   const normalizedY = normalizeVectorCoordinate(y);
-  const point = getVectorPoint(normalizedX, normalizedY);
+  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 updateVector = (
     nextX: string,
@@ -321,17 +356,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;
   }
 
@@ -352,12 +421,19 @@ function VectorPadField({
           "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",
           padShape === "square" ? "aspect-square" : "h-[142px]",
         )}
+        data-vector-pad-coordinate-mode={coordinateMode}
         data-vector-pad-shape={padShape}
         data-vector-pad-variant={padVariant}
         onLostPointerCapture={stopPointerDrag}
         onPointerCancel={stopPointerDrag}
         onPointerDown={(event) => {
           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-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,
@@ -109,6 +133,10 @@ function PanelSectionCollapsibleBody({
 }): React.JSX.Element | null {
   const [shouldRender, setShouldRender] = React.useState(!collapsed);
   const [isVisuallyCollapsed, setIsVisuallyCollapsed] = React.useState(collapsed);
+  const suppressControlTransitions =
+    useInitialPanelSectionControlTransitionSuppression(
+      `${collapsed ? "collapsed" : "expanded"}:${shouldRender ? "mounted" : "unmounted"}`,
+    );
 
   React.useEffect(() => {
     if (collapsed) {
@@ -155,11 +183,59 @@ function PanelSectionCollapsibleBody({
       data-slot="panel-section-collapsible-body"
       onTransitionEnd={handleTransitionEnd}
     >
-      <div className="min-h-0 overflow-hidden">{children}</div>
+      <div
+        className="min-h-0 overflow-hidden"
+        data-toolcraft-controls-mounting={
+          suppressControlTransitions ? "true" : undefined
+        }
+      >
+        {children}
+      </div>
     </div>
   );
 }
 
+function useInitialPanelSectionControlTransitionSuppression(
+  dependency: unknown,
+): boolean {
+  const [suppressionState, setSuppressionState] = React.useState(() => ({
+    dependency,
+    isSuppressing: true,
+  }));
+
+  React.useEffect(() => {
+    setSuppressionState({ dependency, isSuppressing: true });
+
+    if (typeof window === "undefined") {
+      return undefined;
+    }
+
+    if (typeof window.requestAnimationFrame !== "function") {
+      const timeout = window.setTimeout(() => {
+        setSuppressionState({ dependency, isSuppressing: false });
+      }, 0);
+
+      return () => window.clearTimeout(timeout);
+    }
+
+    let secondFrame = 0;
+    const firstFrame = window.requestAnimationFrame(() => {
+      secondFrame = window.requestAnimationFrame(() => {
+        setSuppressionState({ dependency, isSuppressing: false });
+      });
+    });
+
+    return () => {
+      window.cancelAnimationFrame(firstFrame);
+      window.cancelAnimationFrame(secondFrame);
+    };
+  }, [dependency]);
+
+  return (
+    suppressionState.dependency !== dependency || suppressionState.isSuppressing
+  );
+}
+
 function getPanelSectionChildKey(
   child: React.ReactNode,
   index: number,