@pixel-point/toolcraft 0.0.17 → 0.0.19

package/templates/runtime/react/canvas/use-canvas-viewport-interactions.ts

@@ -5,6 +5,14 @@ import * as React from "react";
 import { clampToolcraftCanvasZoom } from "../../state/canvas-zoom";
 import type { ToolcraftExternalStore } from "../../state/toolcraft-external-store";
 import type { ToolcraftPoint } from "../../state/types";
+import {
+  createCanvasPinchState,
+  getCanvasPointerCenter,
+  getCanvasPointerDistance,
+  getPinchedCanvasViewport,
+  getZoomedCanvasOffset,
+  type CanvasPinchState,
+} from "./canvas-viewport-geometry";
 
 type CanvasDragState = {
   originX: number;
@@ -14,6 +22,18 @@ type CanvasDragState = {
   startY: number;
 };
 
+type CanvasGesturePinchState = {
+  anchor: ToolcraftPoint;
+  startOffset: ToolcraftPoint;
+  startZoom: number;
+};
+
+type CanvasGestureEvent = Event & {
+  clientX?: number;
+  clientY?: number;
+  scale?: number;
+};
+
 const wheelZoomSensitivity = 0.12;
 const wheelPinchZoomSensitivity = 0.5;
 const wheelCommitIdleMs = 120;
@@ -27,9 +47,9 @@ function isEventTargetInsideElement(
 
 function getNextWheelZoom(
   currentZoom: number,
-  event: Pick<WheelEvent, "ctrlKey" | "deltaY">,
+  event: Pick<WheelEvent, "ctrlKey" | "deltaY" | "metaKey">,
 ): number {
-  const sensitivity = event.ctrlKey
+  const sensitivity = event.ctrlKey || event.metaKey
     ? wheelPinchZoomSensitivity
     : wheelZoomSensitivity;
   const rawDelta = -event.deltaY * sensitivity;
@@ -38,35 +58,6 @@ function getNextWheelZoom(
   return clampToolcraftCanvasZoom(currentZoom + zoomDelta);
 }
 
-function getZoomedCanvasOffset({
-  clientX,
-  clientY,
-  currentZoom,
-  nextZoom,
-  offset,
-  viewportElement,
-}: {
-  clientX: number;
-  clientY: number;
-  currentZoom: number;
-  nextZoom: number;
-  offset: ToolcraftPoint;
-  viewportElement: HTMLElement;
-}): ToolcraftPoint {
-  const rect = viewportElement.getBoundingClientRect();
-  const currentScale = currentZoom / 100;
-  const nextScale = nextZoom / 100;
-  const pointerX = clientX - rect.left - rect.width / 2;
-  const pointerY = clientY - rect.top - rect.height / 2;
-  const worldX = (pointerX - offset.x) / currentScale;
-  const worldY = (pointerY - offset.y) / currentScale;
-
-  return {
-    x: pointerX - worldX * nextScale,
-    y: pointerY - worldY * nextScale,
-  };
-}
-
 export function useCanvasViewportInteractions({
   draggable,
   store,
@@ -75,11 +66,19 @@ export function useCanvasViewportInteractions({
   store: ToolcraftExternalStore;
 }): {
   handlePointerDown: React.PointerEventHandler<HTMLDivElement>;
+  handlePointerDownCapture: React.PointerEventHandler<HTMLDivElement>;
   handlePointerMove: React.PointerEventHandler<HTMLDivElement>;
+  handlePointerMoveCapture: React.PointerEventHandler<HTMLDivElement>;
   handlePointerUp: React.PointerEventHandler<HTMLDivElement>;
+  handlePointerUpCapture: React.PointerEventHandler<HTMLDivElement>;
   viewportRef: React.RefObject<HTMLDivElement | null>;
 } {
+  const activeTouchPointersRef = React.useRef<Map<number, ToolcraftPoint>>(
+    new Map(),
+  );
   const dragRef = React.useRef<CanvasDragState | null>(null);
+  const gesturePinchRef = React.useRef<CanvasGesturePinchState | null>(null);
+  const pinchRef = React.useRef<CanvasPinchState | null>(null);
   const viewportRef = React.useRef<HTMLDivElement | null>(null);
   const wheelCommitTimerRef = React.useRef<number | undefined>(undefined);
   const commitPendingWheel = React.useCallback((): void => {
@@ -114,13 +113,15 @@ export function useCanvasViewportInteractions({
         '[data-slot="toolcraft-runtime-app"]',
       ) ?? viewportElement;
     const listenerOptions: AddEventListenerOptions = { capture: true, passive: false };
+    const isBrowserZoomWheel = (event: WheelEvent): boolean =>
+      event.ctrlKey || event.metaKey;
     const handleWheel = (event: WheelEvent): void => {
       const targetIsInsideCanvas = isEventTargetInsideElement(
         event.target,
         viewportElement,
       );
       if (!targetIsInsideCanvas) {
-        if (event.ctrlKey) {
+        if (isBrowserZoomWheel(event)) {
           event.preventDefault();
           event.stopPropagation();
         }
@@ -132,7 +133,7 @@ export function useCanvasViewportInteractions({
       event.stopPropagation();
       const { offset, zoom } = store.getState().canvas;
 
-      if (!event.ctrlKey) {
+      if (!isBrowserZoomWheel(event)) {
         store.dispatchTransient({
           offset: {
             x: offset.x - event.deltaX,
@@ -165,7 +166,82 @@ export function useCanvasViewportInteractions({
       });
     };
 
+    const handleGestureStart = (event: Event): void => {
+      event.preventDefault();
+
+      if (!isEventTargetInsideElement(event.target, viewportElement)) {
+        gesturePinchRef.current = null;
+        return;
+      }
+
+      commitPendingWheel();
+      const gestureEvent = event as CanvasGestureEvent;
+      const rect = viewportElement.getBoundingClientRect();
+      const { offset, zoom } = store.getState().canvas;
+      gesturePinchRef.current = {
+        anchor: {
+          x: gestureEvent.clientX ?? rect.left + rect.width / 2,
+          y: gestureEvent.clientY ?? rect.top + rect.height / 2,
+        },
+        startOffset: offset,
+        startZoom: zoom,
+      };
+    };
+    const handleGestureChange = (event: Event): void => {
+      event.preventDefault();
+      const gesture = gesturePinchRef.current;
+
+      if (!gesture) {
+        return;
+      }
+
+      const scale = (event as CanvasGestureEvent).scale;
+
+      if (!Number.isFinite(scale) || scale === undefined || scale <= 0) {
+        return;
+      }
+
+      const zoom = clampToolcraftCanvasZoom(gesture.startZoom * scale);
+      store.dispatchTransient({
+        offset: getZoomedCanvasOffset({
+          clientX: gesture.anchor.x,
+          clientY: gesture.anchor.y,
+          currentZoom: gesture.startZoom,
+          nextZoom: zoom,
+          offset: gesture.startOffset,
+          viewportElement,
+        }),
+        type: "canvas.setViewport",
+        zoom,
+      });
+    };
+    const handleGestureEnd = (event: Event): void => {
+      event.preventDefault();
+
+      if (!gesturePinchRef.current) {
+        return;
+      }
+
+      gesturePinchRef.current = null;
+      store.commitTransient("viewport");
+    };
+
     workspaceElement.addEventListener("wheel", handleWheel, listenerOptions);
+    workspaceElement.addEventListener(
+      "gesturestart",
+      handleGestureStart,
+      listenerOptions,
+    );
+    workspaceElement.addEventListener(
+      "gesturechange",
+      handleGestureChange,
+      listenerOptions,
+    );
+    workspaceElement.addEventListener(
+      "gestureend",
+      handleGestureEnd,
+      listenerOptions,
+    );
 
     return () => {
       workspaceElement.removeEventListener(
@@ -173,25 +249,195 @@ export function useCanvasViewportInteractions({
         handleWheel,
         listenerOptions,
       );
+      workspaceElement.removeEventListener("gesturestart", handleGestureStart);
+      workspaceElement.removeEventListener("gesturechange", handleGestureChange);
+      workspaceElement.removeEventListener("gestureend", handleGestureEnd);
 
       const hasPendingWheel = wheelCommitTimerRef.current !== undefined;
-      const hasActiveDrag = dragRef.current !== null;
+      const hasActivePointerGesture =
+        dragRef.current !== null ||
+        gesturePinchRef.current !== null ||
+        pinchRef.current !== null ||
+        activeTouchPointersRef.current.size > 0;
 
       if (wheelCommitTimerRef.current !== undefined) {
         window.clearTimeout(wheelCommitTimerRef.current);
         wheelCommitTimerRef.current = undefined;
       }
 
-      if (hasPendingWheel || hasActiveDrag) {
+      if (hasPendingWheel || hasActivePointerGesture) {
+        activeTouchPointersRef.current.clear();
         dragRef.current = null;
+        gesturePinchRef.current = null;
+        pinchRef.current = null;
         store.commitTransient("viewport");
       }
     };
   }, [commitPendingWheel, scheduleWheelCommit, store]);
 
+  const handlePointerDownCapture: React.PointerEventHandler<HTMLDivElement> =
+    React.useCallback(
+      (event) => {
+        if (event.pointerType !== "touch") {
+          return;
+        }
+
+        activeTouchPointersRef.current.set(event.pointerId, {
+          x: event.clientX,
+          y: event.clientY,
+        });
+
+        if (activeTouchPointersRef.current.size < 2) {
+          return;
+        }
+
+        event.preventDefault();
+        event.stopPropagation();
+        commitPendingWheel();
+
+        if (typeof event.currentTarget.setPointerCapture === "function") {
+          for (const pointerId of activeTouchPointersRef.current.keys()) {
+            event.currentTarget.setPointerCapture(pointerId);
+          }
+        }
+
+        const { offset, zoom } = store.getState().canvas;
+        dragRef.current = null;
+        pinchRef.current = createCanvasPinchState(
+          activeTouchPointersRef.current,
+          offset,
+          zoom,
+        );
+      },
+      [commitPendingWheel, store],
+    );
+
+  const handlePointerMoveCapture: React.PointerEventHandler<HTMLDivElement> =
+    React.useCallback(
+      (event) => {
+        if (
+          event.pointerType !== "touch" ||
+          !activeTouchPointersRef.current.has(event.pointerId)
+        ) {
+          return;
+        }
+
+        activeTouchPointersRef.current.set(event.pointerId, {
+          x: event.clientX,
+          y: event.clientY,
+        });
+
+        const pinch = pinchRef.current;
+
+        if (!pinch) {
+          return;
+        }
+
+        event.preventDefault();
+        event.stopPropagation();
+        const first = activeTouchPointersRef.current.get(pinch.pointerIds[0]);
+        const second = activeTouchPointersRef.current.get(pinch.pointerIds[1]);
+
+        if (!first || !second) {
+          return;
+        }
+
+        const firstPointer = { pointerId: pinch.pointerIds[0], ...first };
+        const secondPointer = { pointerId: pinch.pointerIds[1], ...second };
+        const currentDistance = getCanvasPointerDistance(
+          firstPointer,
+          secondPointer,
+        );
+
+        if (currentDistance <= 0) {
+          return;
+        }
+
+        store.dispatchTransient({
+          ...getPinchedCanvasViewport({
+            currentCenter: getCanvasPointerCenter(firstPointer, secondPointer),
+            currentDistance,
+            pinch,
+            viewportElement: event.currentTarget,
+          }),
+          type: "canvas.setViewport",
+        });
+      },
+      [store],
+    );
+
+  const handlePointerUpCapture: React.PointerEventHandler<HTMLDivElement> =
+    React.useCallback(
+      (event) => {
+        if (
+          event.pointerType !== "touch" ||
+          !activeTouchPointersRef.current.has(event.pointerId)
+        ) {
+          return;
+        }
+
+        if (
+          typeof event.currentTarget.hasPointerCapture === "function" &&
+          event.currentTarget.hasPointerCapture(event.pointerId)
+        ) {
+          event.currentTarget.releasePointerCapture(event.pointerId);
+        }
+
+        activeTouchPointersRef.current.delete(event.pointerId);
+
+        if (!pinchRef.current) {
+          return;
+        }
+
+        event.preventDefault();
+        event.stopPropagation();
+        const { offset, zoom } = store.getState().canvas;
+        pinchRef.current = createCanvasPinchState(
+          activeTouchPointersRef.current,
+          offset,
+          zoom,
+        );
+
+        if (pinchRef.current) {
+          return;
+        }
+
+        const remainingTouch = activeTouchPointersRef.current.entries().next();
+
+        if (!remainingTouch.done && draggable) {
+          const [pointerId, point] = remainingTouch.value;
+          dragRef.current = {
+            originX: offset.x,
+            originY: offset.y,
+            pointerId,
+            startX: point.x,
+            startY: point.y,
+          };
+          return;
+        }
+
+        for (const pointerId of activeTouchPointersRef.current.keys()) {
+          if (
+            typeof event.currentTarget.hasPointerCapture === "function" &&
+            event.currentTarget.hasPointerCapture(pointerId)
+          ) {
+            event.currentTarget.releasePointerCapture(pointerId);
+          }
+        }
+
+        activeTouchPointersRef.current.clear();
+        dragRef.current = null;
+        store.commitTransient("viewport");
+      },
+      [draggable, store],
+    );
+
   const handlePointerDown: React.PointerEventHandler<HTMLDivElement> = React.useCallback(
     (event) => {
-      if (!draggable || event.button !== 0) {
+      if (
+        !draggable ||
+        (event.pointerType !== "touch" && event.button !== 0)
+      ) {
         return;
       }
 
@@ -255,8 +501,11 @@ export function useCanvasViewportInteractions({
 
   return {
     handlePointerDown,
+    handlePointerDownCapture,
     handlePointerMove,
+    handlePointerMoveCapture,
     handlePointerUp,
+    handlePointerUpCapture,
     viewportRef,
   };
 }

package/templates/runtime/react/controls-panel/__tests__/control-conditions.test.ts

@@ -9,6 +9,67 @@ import {
 } from "../conditions/control-conditions";
 
 describe("Toolcraft control conditions", () => {
+  it("requires every applicability predicate to match", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                sides: {
+                  applicability: {
+                    all: [
+                      { equals: "create", target: "source.mode" },
+                      {
+                        oneOf: ["polygon", "star"],
+                        target: "shape.kind",
+                      },
+                    ],
+                    mode: "conditional",
+                  },
+                  target: "shape.sides",
+                  type: "slider",
+                },
+              },
+              title: "Shape",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+    const control = schema.panels.controls?.sections.find(
+      (section) => section.title === "Shape",
+    )?.controls.sides;
+
+    expect(control).toBeTruthy();
+    expect(
+      isToolcraftControlVisible(
+        createToolcraftState(schema, {
+          values: { "shape.kind": "star", "source.mode": "upload" },
+        }),
+        control!,
+      ),
+    ).toBe(false);
+    expect(
+      isToolcraftControlVisible(
+        createToolcraftState(schema, {
+          values: { "shape.kind": "heart", "source.mode": "create" },
+        }),
+        control!,
+      ),
+    ).toBe(false);
+    expect(
+      isToolcraftControlVisible(
+        createToolcraftState(schema, {
+          values: { "shape.kind": "star", "source.mode": "create" },
+        }),
+        control!,
+      ),
+    ).toBe(true);
+  });
+
   it("resolves timeline runtime targets through the canonical condition helpers", () => {
     const schema = defineToolcraft({
       canvas: { enabled: true, renderScale: true, sizing: { mode: "editable-output" } },

package/templates/runtime/react/controls-panel/__tests__/controls-panel.collection-actions.test.tsx

@@ -54,6 +54,9 @@ describe("ControlsPanel collection actions", () => {
     expect(collectionHeader?.lastElementChild?.contains(addButton)).toBe(true);
     expect(colorGrid).toBeTruthy();
     expect(colorGrid?.children).toHaveLength(2);
+    expect(
+      container.querySelector('[data-slot="collection-item-groups"]'),
+    ).toBeNull();
     expect(screen.queryByText("Color 1")).toBeNull();
     expect(screen.queryByText("Color 2")).toBeNull();
 
@@ -77,6 +80,92 @@ describe("ControlsPanel collection actions", () => {
     expect((removeButton as HTMLButtonElement).disabled).toBe(true);
   });
 
+  it("adds, edits, separates, and removes complete logical item records", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: false },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                layers: {
+                  defaultValue: [
+                    {
+                      invert: true,
+                      rendererToken: "keep",
+                      strength: 0.4,
+                    },
+                  ],
+                  itemControls: {
+                    strength: {
+                      defaultValue: 0.5,
+                      label: "Strength",
+                      max: 1,
+                      min: 0,
+                      step: 0.1,
+                      type: "slider",
+                    },
+                    invert: {
+                      defaultValue: false,
+                      label: "Invert",
+                      type: "switch",
+                    },
+                  },
+                  itemLabel: "Layer",
+                  minItems: 1,
+                  target: "surface.layers",
+                  type: "collectionActions",
+                },
+              },
+              title: "Surface Layers",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+    const { container } = renderControlsPanelWithSchema(schema);
+
+    expect(
+      container.querySelectorAll('[data-slot="collection-item-group"]'),
+    ).toHaveLength(1);
+    expect(screen.queryByText(/Item 1/u)).toBeNull();
+
+    fireEvent.click(screen.getByRole("button", { name: "Add Layer" }));
+    let values = JSON.parse(
+      screen.getByTestId("values-json").textContent ?? "{}",
+    );
+    expect(values["surface.layers"]).toEqual([
+      { invert: true, rendererToken: "keep", strength: 0.4 },
+      { invert: false, strength: 0.5 },
+    ]);
+
+    const groups = container.querySelectorAll(
+      '[data-slot="collection-item-group"]',
+    );
+    expect(groups).toHaveLength(2);
+    expect(groups[0]?.className).not.toContain("border-t");
+    expect(groups[1]?.className).toContain("border-t");
+
+    fireEvent.click(
+      screen.getAllByRole("button", { name: "Edit Strength value" })[0]!,
+    );
+    const editor = screen.getByRole("textbox", { name: "Strength value" });
+    editor.textContent = "0.7";
+    fireEvent.keyDown(editor, { key: "Enter" });
+    values = JSON.parse(screen.getByTestId("values-json").textContent ?? "{}");
+    expect(values["surface.layers"][0]).toEqual({
+      invert: true,
+      rendererToken: "keep",
+      strength: 0.7,
+    });
+
+    fireEvent.click(screen.getByRole("button", { name: "Remove Layer" }));
+    expect(
+      container.querySelectorAll('[data-slot="collection-item-group"]'),
+    ).toHaveLength(1);
+  });
+
   it("renders collection item controls beyond color lists", () => {
     const schema = defineToolcraft({
       canvas: { enabled: false },