@pixel-point/toolcraft 0.0.17 → 0.0.19

package/templates/runtime/react/app-shell/toolcraft-app.tsx

@@ -11,9 +11,11 @@ import {
 import type { ToolcraftState } from "../../state/types";
 import {
   getToolcraftExportRendererCoverageErrors,
-  type ToolcraftProductExportRenderer,
-} from "../../export";
+} from "../../export/export-renderer-coverage";
+import type { ToolcraftProductExportRenderer } from "../../export/product-export-renderer";
+import type { ToolcraftProductSvgExportRenderer } from "../../export/product-svg-export-renderer";
 import { CanvasShell } from "../canvas/canvas-shell";
+import { ToolcraftProductSceneBoundsBoundary } from "../canvas/product-scene-surface";
 import {
   ControlsPanel,
   type ToolcraftPanelActionHandler,
@@ -33,12 +35,14 @@ export type ToolcraftAppComposition = {
   canvasContent?: React.ReactNode;
   controlRenderers?: ToolcraftControlRendererMap;
   exportRenderer?: ToolcraftProductExportRenderer;
+  infiniteCanvasContent?: React.ReactNode;
   modelPresentation?: ToolcraftModelPresentationMode;
   onPanelAction?: ToolcraftPanelActionHandler;
   renderDefaultCanvasMedia?: boolean;
   rendererPipelineRegistration?: AnyToolcraftRendererPipelineRegistration;
   sceneBoundsProvider?: ToolcraftProductSceneBoundsProvider;
   schema: ResolvedToolcraftAppSchema;
+  svgExportRenderer?: ToolcraftProductSvgExportRenderer;
 };
 
 export type ToolcraftAppProps = ToolcraftAppComposition & {
@@ -61,6 +65,7 @@ function ToolcraftAppContent({
   canvasContent,
   className,
   controlRenderers,
+  infiniteCanvasContent,
   onPanelAction,
   renderDefaultCanvasMedia = true,
   sceneExport,
@@ -100,7 +105,10 @@ function ToolcraftAppContent({
       }}
     >
       {surfaces.canvas.enabled ? (
-        <CanvasShell renderDefaultMedia={renderDefaultCanvasMedia}>
+        <CanvasShell
+          infiniteCanvasContent={infiniteCanvasContent}
+          renderDefaultMedia={renderDefaultCanvasMedia}
+        >
           {canvasContent}
         </CanvasShell>
       ) : null}
@@ -133,6 +141,7 @@ export function ToolcraftApp({
   rendererPipelineRegistration,
   sceneBoundsProvider,
   schema,
+  svgExportRenderer,
   ...props
 }: ToolcraftAppProps): React.JSX.Element {
   const suppressedModelTargets = modelPresentation?.mode === "custom"
@@ -146,6 +155,7 @@ export function ToolcraftApp({
     exportRenderer,
     productSceneRequired,
     schema,
+    svgExportRenderer,
   });
   if (exportRendererErrors.length > 0) {
     throw new Error(
@@ -156,6 +166,7 @@ export function ToolcraftApp({
     ...(sceneBoundsProvider ? { boundsProvider: sceneBoundsProvider } : {}),
     ...(exportRenderer ? { exportRenderer } : {}),
     productSceneRequired,
+    ...(svgExportRenderer ? { svgExportRenderer } : {}),
     visibility: createToolcraftRuntimeSceneVisibility({
       renderDefaultImages: renderDefaultCanvasMedia,
       suppressedModelTargets,
@@ -168,12 +179,16 @@ export function ToolcraftApp({
       rendererPipelineRegistration={rendererPipelineRegistration}
       schema={schema}
     >
-      <ToolcraftAppContent
-        {...props}
-        canvasContent={canvasContent}
-        renderDefaultCanvasMedia={renderDefaultCanvasMedia}
-        sceneExport={sceneExport}
-      />
+      <ToolcraftProductSceneBoundsBoundary
+        boundsProvider={sceneBoundsProvider}
+      >
+        <ToolcraftAppContent
+          {...props}
+          canvasContent={canvasContent}
+          renderDefaultCanvasMedia={renderDefaultCanvasMedia}
+          sceneExport={sceneExport}
+        />
+      </ToolcraftProductSceneBoundsBoundary>
     </ToolcraftRoot>
   );
 }

package/templates/runtime/react/canvas/canvas-shell-interactions.test.tsx

@@ -35,6 +35,23 @@ function CaptureStore({
   return null;
 }
 
+function createGestureEvent(
+  type: "gesturechange" | "gestureend" | "gesturestart",
+  properties: { clientX?: number; clientY?: number; scale?: number } = {},
+): Event {
+  const event = new Event(type, { bubbles: true, cancelable: true });
+  Object.defineProperties(
+    event,
+    Object.fromEntries(
+      Object.entries(properties).map(([key, value]) => [
+        key,
+        { configurable: true, value },
+      ]),
+    ),
+  );
+  return event;
+}
+
 describe("CanvasShell viewport interactions", () => {
   it("updates runtime canvas offset while panning", () => {
     let store: ToolcraftExternalStore | undefined;
@@ -238,6 +255,19 @@ describe("CanvasShell viewport interactions", () => {
     expect(screen.getByTestId("canvas-offset").textContent).toBe("0,0");
     expect(overlay.closest("[data-toolcraft-canvas-world]")).toBeNull();
 
+    const gestureStart = createGestureEvent("gesturestart", { scale: 1 });
+    const gestureChange = createGestureEvent("gesturechange", { scale: 1.5 });
+    const gestureEnd = createGestureEvent("gestureend");
+
+    expect(overlay.dispatchEvent(gestureStart)).toBe(false);
+    expect(overlay.dispatchEvent(gestureChange)).toBe(false);
+    expect(overlay.dispatchEvent(gestureEnd)).toBe(false);
+    expect(gestureStart.defaultPrevented).toBe(true);
+    expect(gestureChange.defaultPrevented).toBe(true);
+    expect(gestureEnd.defaultPrevented).toBe(true);
+    expect(screen.getByTestId("canvas-zoom").textContent).toBe("100");
+    expect(screen.getByTestId("canvas-offset").textContent).toBe("0,0");
+
     const scrollEvent = new WheelEvent("wheel", {
       bubbles: true,
       cancelable: true,

package/templates/runtime/react/canvas/canvas-shell-pinch-interactions.test.tsx

@@ -0,0 +1,155 @@
+import { cleanup, fireEvent, screen, waitFor } from "@testing-library/react";
+import type * as React from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import type { ToolcraftExternalStore } from "../../state/toolcraft-external-store";
+import { useToolcraftStore } from "../app-shell/toolcraft-store-context";
+import {
+  CanvasStateProbe,
+  mockCanvasRect,
+  renderCanvasShell,
+} from "./canvas-shell-test-utils";
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+});
+
+function CaptureStore({
+  capture,
+}: {
+  capture: (store: ToolcraftExternalStore) => void;
+}): null {
+  capture(useToolcraftStore());
+  return null;
+}
+
+function createGestureEvent(
+  type: "gesturechange" | "gestureend" | "gesturestart",
+  properties: { clientX?: number; clientY?: number; scale?: number } = {},
+): Event {
+  const event = new Event(type, { bubbles: true, cancelable: true });
+  Object.defineProperties(
+    event,
+    Object.fromEntries(
+      Object.entries(properties).map(([key, value]) => [
+        key,
+        { configurable: true, value },
+      ]),
+    ),
+  );
+  return event;
+}
+
+describe("CanvasShell pinch interactions", () => {
+  it("keeps a native browser gesture pinch inside the canvas viewport", async () => {
+    let store: ToolcraftExternalStore | undefined;
+    renderCanvasShell({
+      afterCanvas: (
+        <>
+          <CaptureStore capture={(value) => { store = value; }} />
+          <CanvasStateProbe />
+        </>
+      ),
+      frameProps: {
+        "data-slot": "toolcraft-runtime-app",
+      } as React.HTMLAttributes<HTMLDivElement>,
+    });
+
+    const canvas = screen.getByRole("application", { name: "Canvas viewport" });
+    const world = canvas.querySelector("[data-toolcraft-canvas-world]") as HTMLElement;
+    mockCanvasRect(canvas);
+    const gestureStart = createGestureEvent("gesturestart", {
+      clientX: 600,
+      clientY: 300,
+      scale: 1,
+    });
+    const gestureChange = createGestureEvent("gesturechange", {
+      clientX: 600,
+      clientY: 300,
+      scale: 1.5,
+    });
+
+    expect(canvas.dispatchEvent(gestureStart)).toBe(false);
+    expect(gestureStart.defaultPrevented).toBe(true);
+    expect(canvas.dispatchEvent(gestureChange)).toBe(false);
+    expect(gestureChange.defaultPrevented).toBe(true);
+    expect(store?.getState().canvas).toMatchObject({
+      offset: { x: -100, y: 0 },
+      zoom: 150,
+    });
+    expect(store?.getCommittedState().canvas.zoom).toBe(100);
+    await waitFor(() => {
+      expect(world.style.transform).toContain("translate(-100px");
+      expect(world.style.transform).toContain("scale(1.5)");
+    });
+
+    const gestureEnd = createGestureEvent("gestureend");
+    expect(canvas.dispatchEvent(gestureEnd)).toBe(false);
+    expect(gestureEnd.defaultPrevented).toBe(true);
+    expect(store?.getCommittedState().canvas).toMatchObject({
+      offset: { x: -100, y: 0 },
+      zoom: 150,
+    });
+  });
+
+  it("zooms and pans the canvas from a two-touch pinch gesture", () => {
+    let store: ToolcraftExternalStore | undefined;
+    renderCanvasShell({
+      afterCanvas: (
+        <>
+          <CaptureStore capture={(value) => { store = value; }} />
+          <CanvasStateProbe />
+        </>
+      ),
+      children: (
+        <div
+          data-testid="touch-owned-product"
+          onPointerDown={(event) => event.stopPropagation()}
+        />
+      ),
+    });
+
+    const canvas = screen.getByRole("application", { name: "Canvas viewport" });
+    const touchSurface = screen.getByTestId("touch-owned-product");
+    mockCanvasRect(canvas);
+    fireEvent.pointerDown(touchSurface, {
+      button: 0,
+      clientX: 300,
+      clientY: 300,
+      pointerId: 1,
+      pointerType: "touch",
+    });
+    fireEvent.pointerDown(touchSurface, {
+      button: 0,
+      clientX: 500,
+      clientY: 300,
+      pointerId: 2,
+      pointerType: "touch",
+    });
+    fireEvent.pointerMove(touchSurface, {
+      clientX: 700,
+      clientY: 300,
+      pointerId: 2,
+      pointerType: "touch",
+    });
+
+    expect(store?.getState().canvas).toMatchObject({
+      offset: { x: 100, y: 0 },
+      zoom: 200,
+    });
+    expect(store?.getCommittedState().canvas).toMatchObject({
+      offset: { x: 0, y: 0 },
+      zoom: 100,
+    });
+    fireEvent.pointerUp(touchSurface, { pointerId: 2, pointerType: "touch" });
+    fireEvent.pointerUp(touchSurface, { pointerId: 1, pointerType: "touch" });
+
+    expect(screen.getByTestId("canvas-offset").textContent).toBe("100,0");
+    expect(screen.getByTestId("canvas-zoom").textContent).toBe("200");
+    expect(store?.getCommittedState().canvas).toMatchObject({
+      offset: { x: 100, y: 0 },
+      zoom: 200,
+    });
+  });
+});

package/templates/runtime/react/canvas/canvas-shell-rendering.test.tsx

@@ -8,12 +8,49 @@ import {
   createUploadDefaultSchema,
   renderCanvasShell,
 } from "./canvas-shell-test-utils";
+import { useToolcraftProductSceneFrame } from "./product-scene-surface";
 
 afterEach(() => {
   cleanup();
 });
 
 describe("CanvasShell rendering", () => {
+  it("uses product bounds as the live infinite preview frame", () => {
+    function ProductFrameProbe(): React.JSX.Element {
+      const frame = useToolcraftProductSceneFrame();
+      return <output data-testid="product-frame">{JSON.stringify(frame)}</output>;
+    }
+
+    const { container } = renderCanvasShell({
+      children: <ProductFrameProbe />,
+      initialState: {
+        canvas: {
+          mode: "infinite",
+          offset: { x: 0, y: 0 },
+          size: { height: 200, unit: "px", width: 300 },
+          zoom: 100,
+        },
+      },
+      productSceneBoundsProvider: () => [
+        { height: 260, width: 420, x: -210, y: -130 },
+      ],
+    });
+    const productScene = container.querySelector<HTMLElement>(
+      "[data-toolcraft-product-scene]",
+    );
+
+    expect(productScene?.style.height).toBe("260px");
+    expect(productScene?.style.left).toBe("-210px");
+    expect(productScene?.style.top).toBe("-130px");
+    expect(productScene?.style.width).toBe("420px");
+    expect(screen.getByTestId("product-frame").textContent).toBe(
+      JSON.stringify({
+        kind: "infinite",
+        rect: { height: 260, width: 420, x: -210, y: -130 },
+      }),
+    );
+  });
+
   it("renders the editable canvas at the schema size", () => {
     const { container } = renderCanvasShell();
 
@@ -59,6 +96,45 @@ describe("CanvasShell rendering", () => {
     ).toBe("");
   });
 
+  it("mounts product viewport content only in Infinity behind the transformed world", () => {
+    const finite = renderCanvasShell({
+      infiniteCanvasContent: <div data-testid="infinite-viewport-content" />,
+    });
+
+    expect(
+      finite.container.querySelector("[data-toolcraft-infinite-canvas-content]"),
+    ).toBeNull();
+    finite.unmount();
+
+    const { container } = renderCanvasShell({
+      children: <div data-testid="bounded-product-content" />,
+      infiniteCanvasContent: <div data-testid="infinite-viewport-content" />,
+      initialState: {
+        canvas: {
+          mode: "infinite",
+          offset: { x: 42, y: -18 },
+          size: { height: 200, unit: "px", width: 300 },
+          zoom: 75,
+        },
+      },
+    });
+    const backdrop = container.querySelector<HTMLElement>(
+      "[data-toolcraft-infinite-canvas-content]",
+    );
+    const world = container.querySelector<HTMLElement>(
+      "[data-toolcraft-canvas-world]",
+    );
+
+    expect(backdrop).toBeTruthy();
+    expect(backdrop?.className).toContain("pointer-events-none");
+    expect(backdrop?.className).toContain("absolute");
+    expect(backdrop?.className).toContain("inset-0");
+    expect(backdrop?.style.transform).toBe("");
+    expect(backdrop?.nextElementSibling).toBe(world);
+    expect(screen.getByTestId("infinite-viewport-content")).toBeTruthy();
+    expect(screen.getByTestId("bounded-product-content")).toBeTruthy();
+  });
+
   it("fills the complete infinite viewport with the selected Background color", () => {
     const { container } = renderCanvasShell({
       initialState: {
@@ -87,7 +163,7 @@ describe("CanvasShell rendering", () => {
     ).toBeNull();
   });
 
-  it("fills the infinite viewport from the live structured color value", () => {
+  it("normalizes structured color ingress before filling the infinite viewport", () => {
     const { container } = renderCanvasShell({
       initialState: {
         canvas: {

package/templates/runtime/react/canvas/canvas-shell-test-utils.tsx

@@ -3,10 +3,12 @@ import type * as React from "react";
 import { vi } from "vitest";
 
 import { defineToolcraft } from "../../schema/define-toolcraft";
+import type { ToolcraftProductSceneBoundsProvider } from "../../scene";
 import type { ToolcraftInitialState } from "../../state/types";
 import { ToolcraftRoot } from "../app-shell/toolcraft-root";
 import { useToolcraft } from "../app-shell/use-toolcraft";
 import { CanvasShell } from "./canvas-shell";
+import { ToolcraftProductSceneBoundsBoundary } from "./product-scene-surface";
 
 export function createSchema() {
   return defineToolcraft({
@@ -121,7 +123,9 @@ type RenderCanvasShellOptions = {
   afterCanvas?: React.ReactNode;
   children?: React.ReactNode;
   frameProps?: React.HTMLAttributes<HTMLDivElement>;
+  infiniteCanvasContent?: React.ReactNode;
   initialState?: ToolcraftInitialState;
+  productSceneBoundsProvider?: ToolcraftProductSceneBoundsProvider;
   schema?: ReturnType<typeof defineToolcraft>;
 };
 
@@ -129,7 +133,9 @@ export function renderCanvasShell({
   afterCanvas,
   children,
   frameProps,
+  infiniteCanvasContent,
   initialState,
+  productSceneBoundsProvider,
   schema = createSchema(),
 }: RenderCanvasShellOptions = {}) {
   const { style, ...restFrameProps } = frameProps ?? {};
@@ -140,7 +146,13 @@ export function renderCanvasShell({
         {...restFrameProps}
         style={{ height: 640, position: "relative", width: 640, ...style }}
       >
-        <CanvasShell>{children}</CanvasShell>
+        <ToolcraftProductSceneBoundsBoundary
+          boundsProvider={productSceneBoundsProvider}
+        >
+          <CanvasShell infiniteCanvasContent={infiniteCanvasContent}>
+            {children}
+          </CanvasShell>
+        </ToolcraftProductSceneBoundsBoundary>
         {afterCanvas}
       </div>
     </ToolcraftRoot>,

package/templates/runtime/react/canvas/canvas-shell.tsx

@@ -17,6 +17,7 @@ import {
 } from "./use-canvas-drop-import";
 import { useCanvasViewportInteractions } from "./use-canvas-viewport-interactions";
 import { useToolcraftCanvasFrame } from "./use-toolcraft-canvas-frame";
+import { ToolcraftProductSceneSurface } from "./product-scene-surface";
 import { useToolcraftStore } from "../app-shell/toolcraft-store-context";
 import { useToolcraftSourceAssetCoordinator } from "../app-shell/toolcraft-source-asset-context";
 import { useToolcraftCommittedSelector } from "../app-shell/toolcraft-selectors";
@@ -32,6 +33,7 @@ const directCanvasModelOperationTargets = [DIRECT_CANVAS_OPERATION_TARGET] as co
 
 export type CanvasShellProps = {
   children?: React.ReactNode;
+  infiniteCanvasContent?: React.ReactNode;
   renderDefaultMedia?: boolean;
 };
 
@@ -58,6 +60,7 @@ const selectSelectedLayerId = (state: ToolcraftState) => state.selectedLayerId;
 
 export function CanvasShell({
   children,
+  infiniteCanvasContent,
   renderDefaultMedia = true,
 }: CanvasShellProps): React.JSX.Element {
   const dispatch = useToolcraftDispatch();
@@ -112,11 +115,18 @@ export function CanvasShell({
     uploadPresentation.feedback ??
     (uploadPresentation.directOperation ? (directCanvasPresentation?.feedback ?? null) : null);
   const uploadEnabled = canvasSchema.upload;
-  const { handlePointerDown, handlePointerMove, handlePointerUp, viewportRef } =
-    useCanvasViewportInteractions({
-      draggable: canvasSchema.draggable,
-      store,
-    });
+  const {
+    handlePointerDown,
+    handlePointerDownCapture,
+    handlePointerMove,
+    handlePointerMoveCapture,
+    handlePointerUp,
+    handlePointerUpCapture,
+    viewportRef,
+  } = useCanvasViewportInteractions({
+    draggable: canvasSchema.draggable,
+    store,
+  });
   const handleDrop = useCanvasDropImport({
     coordinator: sourceAssetCoordinator,
     onPresentationChange: setUploadPresentation,
@@ -159,9 +169,13 @@ export function CanvasShell({
       onDragOver={beginDragOver}
       onDrop={handleDrop}
       onPointerCancel={handlePointerUp}
+      onPointerCancelCapture={handlePointerUpCapture}
       onPointerDown={handlePointerDown}
+      onPointerDownCapture={handlePointerDownCapture}
       onPointerMove={handlePointerMove}
+      onPointerMoveCapture={handlePointerMoveCapture}
       onPointerUp={handlePointerUp}
+      onPointerUpCapture={handlePointerUpCapture}
       ref={viewportRef}
       role="application"
       style={
@@ -170,6 +184,14 @@ export function CanvasShell({
           : undefined
       }
     >
+      {canvasFrame.kind === "infinite" && infiniteCanvasContent ? (
+        <div
+          className="pointer-events-none absolute inset-0 overflow-hidden"
+          data-toolcraft-infinite-canvas-content=""
+        >
+          {infiniteCanvasContent}
+        </div>
+      ) : null}
       <CanvasViewportWorld>
         {renderEditableCanvas ? (
           <CanvasSceneSurface frame={canvasFrame}>
@@ -193,7 +215,11 @@ export function CanvasShell({
               : null}
             {children ? (
               <CanvasSceneSlot frame={canvasFrame}>
-                {children}
+                <ToolcraftProductSceneSurface
+                  frame={canvasFrame}
+                >
+                  {children}
+                </ToolcraftProductSceneSurface>
               </CanvasSceneSlot>
             ) : null}
           </CanvasSceneSurface>

package/templates/runtime/react/canvas/canvas-viewport-geometry.ts

@@ -0,0 +1,133 @@
+import { clampToolcraftCanvasZoom } from "../../state/canvas-zoom";
+import type { ToolcraftPoint } from "../../state/types";
+
+type CanvasPointerPosition = ToolcraftPoint & {
+  pointerId: number;
+};
+
+export type CanvasPinchState = {
+  pointerIds: readonly [number, number];
+  startCenter: ToolcraftPoint;
+  startDistance: number;
+  startOffset: ToolcraftPoint;
+  startZoom: number;
+};
+
+export 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 getCanvasPointerCenter(
+  first: CanvasPointerPosition,
+  second: CanvasPointerPosition,
+): ToolcraftPoint {
+  return {
+    x: (first.x + second.x) / 2,
+    y: (first.y + second.y) / 2,
+  };
+}
+
+export function getCanvasPointerDistance(
+  first: CanvasPointerPosition,
+  second: CanvasPointerPosition,
+): number {
+  return Math.hypot(second.x - first.x, second.y - first.y);
+}
+
+function getFirstTouchPair(
+  pointers: ReadonlyMap<number, ToolcraftPoint>,
+): readonly [CanvasPointerPosition, CanvasPointerPosition] | null {
+  const entries = Array.from(pointers.entries()).slice(0, 2);
+
+  if (entries.length < 2) {
+    return null;
+  }
+
+  return [
+    { pointerId: entries[0][0], ...entries[0][1] },
+    { pointerId: entries[1][0], ...entries[1][1] },
+  ];
+}
+
+export function createCanvasPinchState(
+  pointers: ReadonlyMap<number, ToolcraftPoint>,
+  offset: ToolcraftPoint,
+  zoom: number,
+): CanvasPinchState | null {
+  const pair = getFirstTouchPair(pointers);
+
+  if (!pair) {
+    return null;
+  }
+
+  const startDistance = getCanvasPointerDistance(pair[0], pair[1]);
+
+  if (startDistance <= 0) {
+    return null;
+  }
+
+  return {
+    pointerIds: [pair[0].pointerId, pair[1].pointerId],
+    startCenter: getCanvasPointerCenter(pair[0], pair[1]),
+    startDistance,
+    startOffset: offset,
+    startZoom: zoom,
+  };
+}
+
+export function getPinchedCanvasViewport({
+  currentCenter,
+  currentDistance,
+  pinch,
+  viewportElement,
+}: {
+  currentCenter: ToolcraftPoint;
+  currentDistance: number;
+  pinch: CanvasPinchState;
+  viewportElement: HTMLElement;
+}): { offset: ToolcraftPoint; zoom: number } {
+  const zoom = clampToolcraftCanvasZoom(
+    pinch.startZoom * (currentDistance / pinch.startDistance),
+  );
+  const anchoredOffset = getZoomedCanvasOffset({
+    clientX: pinch.startCenter.x,
+    clientY: pinch.startCenter.y,
+    currentZoom: pinch.startZoom,
+    nextZoom: zoom,
+    offset: pinch.startOffset,
+    viewportElement,
+  });
+
+  return {
+    offset: {
+      x: anchoredOffset.x + currentCenter.x - pinch.startCenter.x,
+      y: anchoredOffset.y + currentCenter.y - pinch.startCenter.y,
+    },
+    zoom,
+  };
+}