@pixel-point/toolcraft 0.0.18 → 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__/controls-panel.color-applicability-layout.test.tsx

@@ -0,0 +1,134 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  defineToolcraft,
+  fireEvent,
+  renderControlsPanelWithSchema,
+  screen,
+  waitFor,
+} from "../testing/controls-panel-test-utils";
+
+describe("ControlsPanel applicable color layout", () => {
+  it("pairs mixed-section colors only inside the same semantic group", async () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                trackEnabled: {
+                  defaultValue: true,
+                  label: "Track",
+                  target: "track.enabled",
+                  type: "switch",
+                },
+                trackColor: {
+                  applicability: {
+                    all: [{ equals: true, target: "track.enabled" }],
+                    mode: "conditional",
+                  },
+                  defaultValue: { hex: "#F1F1F1" },
+                  label: "Track color",
+                  semanticGroup: "track-line",
+                  target: "track.color",
+                  type: "color",
+                },
+                lowerColor: {
+                  defaultValue: { hex: "#7A9CBD" },
+                  label: "Lower",
+                  semanticGroup: "track-range",
+                  target: "track.lower",
+                  type: "color",
+                },
+                upperColor: {
+                  defaultValue: { hex: "#52AAFF" },
+                  label: "Upper",
+                  semanticGroup: "track-range",
+                  target: "track.upper",
+                  type: "color",
+                },
+              },
+              title: "Track Appearance",
+            },
+          ],
+          title: "Generation Controls",
+        },
+      },
+    });
+
+    const { container } = renderControlsPanelWithSchema(schema);
+    const colorRows = [
+      ...container.querySelectorAll('[data-slot="color-control-grid"]'),
+    ];
+
+    expect(colorRows).toHaveLength(1);
+    expect(colorRows[0]?.textContent).toContain("Lower");
+    expect(colorRows[0]?.textContent).toContain("Upper");
+    expect(colorRows[0]?.textContent).not.toContain("Track color");
+
+    const trackSwitch = container.querySelector<HTMLElement>(
+      '[data-toolcraft-control-id="trackEnabled"] [role="switch"]',
+    );
+    expect(trackSwitch).toBeTruthy();
+    fireEvent.click(trackSwitch as HTMLElement);
+
+    await waitFor(() => {
+      expect(screen.queryByLabelText("Track color hex")).toBeNull();
+      expect(screen.getByLabelText("Lower hex")).toBeTruthy();
+      expect(screen.getByLabelText("Upper hex")).toBeTruthy();
+    });
+  });
+
+  it("keeps visible members of an implicit color bank when a peer is hidden", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                secondaryEnabled: {
+                  defaultValue: false,
+                  label: "Secondary",
+                  target: "palette.secondaryEnabled",
+                  type: "switch",
+                },
+              },
+              title: "Palette Options",
+            },
+            {
+              controls: {
+                primaryColor: {
+                  defaultValue: { hex: "#F1F1F1" },
+                  label: "Primary",
+                  target: "palette.primary",
+                  type: "color",
+                },
+                secondaryColor: {
+                  applicability: {
+                    all: [
+                      { equals: true, target: "palette.secondaryEnabled" },
+                    ],
+                    mode: "conditional",
+                  },
+                  defaultValue: { hex: "#7A9CBD" },
+                  label: "Secondary",
+                  target: "palette.secondary",
+                  type: "color",
+                },
+              },
+              title: "Palette Roles",
+            },
+          ],
+          title: "Generation Controls",
+        },
+      },
+    });
+
+    renderControlsPanelWithSchema(schema);
+
+    expect(screen.getByLabelText("Primary hex")).toBeTruthy();
+    expect(screen.queryByLabelText("Secondary hex")).toBeNull();
+  });
+});

package/templates/runtime/react/controls-panel/__tests__/controls-panel.color-layout.test.tsx

@@ -5,10 +5,25 @@ import {
   renderControlsPanel,
   renderControlsPanelWithSchema,
   screen,
-  waitFor
+  waitFor,
 } from "../testing/controls-panel-test-utils";
 
 describe("ControlsPanel color layout controls", () => {
+  it("stores real Color edits in the canonical string shape", async () => {
+    renderControlsPanel();
+    const input = screen.getByLabelText("Fill hex") as HTMLInputElement;
+
+    fireEvent.change(input, { target: { value: "#E02067" } });
+    fireEvent.keyDown(input, { key: "Enter" });
+
+    await waitFor(() => {
+      const values = JSON.parse(
+        screen.getByTestId("values-json").textContent ?? "{}",
+      );
+      expect(values["style.fill"]).toBe("#E02067");
+    });
+  });
+
   it("renders paired color controls as one compound color grid item", () => {
     renderControlsPanel();
 

package/templates/runtime/react/controls-panel/__tests__/controls-panel.render-isolation.test.tsx

@@ -443,12 +443,14 @@ describe("ControlsPanel render isolation", () => {
                 fill: {
                   defaultValue: { hex: "#000000" },
                   label: "Fill",
+                  semanticGroup: "shape-colors",
                   target: "shape.fill",
                   type: "color",
                 },
                 stroke: {
                   defaultValue: { hex: "#ffffff" },
                   label: "Stroke",
+                  semanticGroup: "shape-colors",
                   target: "shape.stroke",
                   type: "color",
                 },

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

@@ -118,4 +118,43 @@ describe("ControlsPanel scene export actions", () => {
     );
     expect(alert.textContent).toBe("The cropped scene is too large to export.");
   });
+
+  it("routes typed SVG export through runtime and never through onPanelAction", async () => {
+    const onPanelAction = vi.fn();
+    const renderFrame = vi.fn();
+    renderControlsPanelWithSchema(
+      createExportSchema([
+        {
+          label: "Export SVG",
+          role: "export-svg",
+          value: "export.svg",
+          variant: "default",
+        },
+      ]),
+      {
+        onPanelAction,
+        sceneExport: {
+          productSceneRequired: false,
+          svgExportRenderer: {
+            baseFileName: "scene",
+            renderFrame,
+          },
+          visibility: defaultToolcraftRuntimeSceneVisibility,
+        },
+      },
+    );
+
+    const exportButton = screen.getByRole("button", { name: "Export SVG" });
+    expect(
+      exportButton.querySelector('[data-icon-name="upload-simple"]'),
+    ).toBeTruthy();
+    fireEvent.click(exportButton);
+
+    const alert = await screen.findByRole("alert");
+    expect(renderFrame).toHaveBeenCalledOnce();
+    expect(alert.getAttribute("data-panel-action-feedback-code")).toBe(
+      "svg-content-empty",
+    );
+    expect(onPanelAction).not.toHaveBeenCalled();
+  });
 });

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

@@ -100,9 +100,9 @@ describe("ControlsPanel runtime setup controls", () => {
     fireEvent.blur(widthInput);
 
     expect(screen.getByTestId("canvas-size").textContent).toBe("1600,1080");
-    expect(screen.getAllByText("Custom...").length).toBeGreaterThan(0);
-    expect(screen.getByDisplayValue("40")).toBeTruthy();
-    expect(screen.getByDisplayValue("27")).toBeTruthy();
+    expect(screen.getAllByText("Custom").length).toBeGreaterThan(0);
+    expect(screen.queryByDisplayValue("40")).toBeNull();
+    expect(screen.queryByDisplayValue("27")).toBeNull();
     expect(JSON.parse(screen.getByTestId("values-json").textContent ?? "{}")).toMatchObject({
       "canvas.aspectRatio": {
         height: 27,

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

@@ -54,9 +54,6 @@ describe("ControlsPanel source collection", () => {
       screen.getByTestId("values-json").textContent ?? "{}",
     );
 
-    expect(values["fills.sections"]).toEqual([
-      { hex: "#DFFF1A" },
-      { hex: "#123456" },
-    ]);
+    expect(values["fills.sections"]).toEqual(["#DFFF1A", "#123456"]);
   });
 });

package/templates/runtime/react/controls-panel/__tests__/controls-panel.source-color-bank.test.tsx

@@ -60,8 +60,8 @@ describe("ControlsPanel source color bank", () => {
       screen.getByTestId("values-json").textContent ?? "{}",
     );
     expect(values["fills.sections"]).toEqual([
-      ...sourceColors.slice(0, 18),
-      { hex: "#123456" },
+      ...sourceColors.slice(0, 18).map(({ hex }) => hex),
+      "#123456",
     ]);
   });
 });