castle-web-cli 0.4.104 → 0.4.106

package/kits/physics-2d/editors/SceneEditor.jsx

@@ -50,6 +50,7 @@ import { SelectionOverlay } from './SelectionOverlay';
 import { BlueprintLibrary, BlueprintThumbnail } from './BlueprintLibrary';
 import { behaviorClasses, findBehaviorClass } from './behaviorRegistry';
 import { useEditHistory, useUndoRedoShortcuts } from './editorHistory';
+import { useTwoFingerZoomPan } from '../engine/gestureZoomPan';
 // A blueprint file's `actors[0]` has no `id` (it's the template, not an
 // instance) -- injected/stripped at the read/write boundary below so the rest
 // of this editor (selection, drag, inspector) can keep treating it like any
@@ -69,6 +70,18 @@ const ZOOM_CONTROLS_STYLE = {
   gap: 4,
   zIndex: 5,
 };
+// Floating undo/redo cluster in the top-left of the stage — the flow single-editor
+// mount renders no header, so this is the only on-screen undo affordance there
+// (the two/three-finger tap gestures are the touch equivalent).
+const UNDO_CONTROLS_STYLE = {
+  position: 'absolute',
+  left: 10,
+  top: 10,
+  display: 'flex',
+  flexDirection: 'row',
+  gap: 6,
+  zIndex: 5,
+};
 const EDIT_VIEWPORT = {
   width: cardSize.width * 3,
   height: cardSize.height * 3,
@@ -291,6 +304,24 @@ export function SceneEditor({
     recordSceneSnapshot: history.recordSnapshot,
   });
   const playPointer = usePlayPointerGesture({ canvasRef, runtimeRef });
+  // Touch: one finger selects/drags actors, a second finger pinch-zooms about the
+  // centroid and pans. The second finger aborts the in-flight one-finger drag so
+  // it doesn't strand a half-move. Off in play — the running game owns touch.
+  useTwoFingerZoomPan({
+    targetRef: canvasRef,
+    enabled: !isPlaying,
+    onGestureStart: () => {
+      gesture.cancel();
+      panGesture.cancel();
+    },
+    onGestureMove: ({ factor, cx, cy, dx, dy }) => {
+      panGesture.zoomByFactorAtPointer(cx, cy, factor);
+      panGesture.panByScreenDelta(-dx, -dy);
+    },
+    // Procreate convention: two-finger tap undoes, three-finger tap redoes.
+    onUndo: () => history.undo(),
+    onRedo: () => history.redo(),
+  });
   useSelectionKeyboard({
     sceneData,
     selectedActorIds,
@@ -533,6 +564,9 @@ export function SceneEditor({
                 <canvas
                   ref={canvasRef}
                   className={cx(styles.stageCanvas, !isPlaying && styles.stageCanvasEdit)}
+                  // Own the raw multi-touch stream so a two-finger pinch zooms the
+                  // editor instead of the browser page (see useTwoFingerZoomPan).
+                  style={{ touchAction: 'none' }}
                   // Focusable so pointer-down pulls keyboard focus into this
                   // editor iframe and Cmd+Z reaches our undo handler instead of
                   // the browser's (see PxArtEditor startTool for the full
@@ -592,6 +626,22 @@ export function SceneEditor({
                 />
               )}
             </div>
+            {!isPlaying && (
+              <div style={UNDO_CONTROLS_STYLE}>
+                <IconButton
+                  icon="undo"
+                  label="Undo"
+                  onClick={history.undo}
+                  disabled={!history.canUndo}
+                />
+                <IconButton
+                  icon="redo"
+                  label="Redo"
+                  onClick={history.redo}
+                  disabled={!history.canRedo}
+                />
+              </div>
+            )}
             {!isPlaying && (
               <div style={ZOOM_CONTROLS_STYLE}>
                 <IconButton
@@ -949,7 +999,20 @@ function useSelectionGesture(args) {
     current.marqueeRef.current = null;
     dragRef.current = null;
   }, []);
-  return { onPointerDown, onPointerMove, onPointerUp };
+  // Abandon an in-flight select/move/marquee drag (a second finger has started a
+  // zoom/pan gesture). Clears the pending long-press and marquee so nothing is
+  // left half-applied; a partial actor-move stays where it landed (undoable).
+  const cancel = useCallback(() => {
+    const drag = dragRef.current;
+    if (!drag) return;
+    if (drag.longPressTimer !== null) {
+      window.clearTimeout(drag.longPressTimer);
+      drag.longPressTimer = null;
+    }
+    argsRef.current.marqueeRef.current = null;
+    dragRef.current = null;
+  }, []);
+  return { onPointerDown, onPointerMove, onPointerUp, cancel };
 }
 function getSnapSettings(sceneData) {
   const rawSize = sceneData.editor?.gridSize;
@@ -1200,6 +1263,11 @@ function usePanGesture({ canvasRef, editCameraRef, isPlaying }) {
   }, []);
   const isSpacePanning = useCallback(() => spaceDownRef.current, []);
   const isActive = useCallback(() => Boolean(dragRef.current), []);
+  // Drop an in-flight pan drag without applying anything more (used when a
+  // two-finger gesture takes over from a one-finger pan).
+  const cancel = useCallback(() => {
+    dragRef.current = null;
+  }, []);
   // Button-driven zoom about the canvas center, and a reset-to-fit that restores
   // the initial camera (zoom 1 = the card exactly fills the viewport).
   const zoomAtCenter = useCallback(
@@ -1220,8 +1288,11 @@ function usePanGesture({ canvasRef, editCameraRef, isPlaying }) {
     onPointerUp,
     isSpacePanning,
     isActive,
+    cancel,
     zoomAtCenter,
     resetView,
+    zoomByFactorAtPointer,
+    panByScreenDelta,
   };
 }
 function handleShiftPointerDown(drag, actor, current) {

package/kits/physics-2d/editors/editorHistory.js

@@ -66,6 +66,10 @@ export function useEditHistory(text, onChange, path) {
   // { key, time } of the most recent coalescable commit. Undo/redo/
   // recordSnapshot null this out so a later commit never coalesces across them.
   const coalesceRef = useRef({ key: null, time: 0 });
+  // Redo stack that the most recent recordSnapshot cleared, so cancelSnapshot can
+  // put it back if that gesture is aborted (e.g. a second finger starts a
+  // pinch/tap over an in-progress stroke) instead of leaving redo destroyed.
+  const lastSnapshotRedoRef = useRef(null);
   function commit(nextText, { coalesceKey } = {}) {
     if (nextText === text) return;
     const now = Date.now();
@@ -85,11 +89,24 @@ export function useEditHistory(text, onChange, path) {
   }
   function recordSnapshot() {
     coalesceRef.current = { key: null, time: 0 };
+    lastSnapshotRedoRef.current = historyRef.current.redo;
     setHistory((current) => ({
       undo: [...current.undo, text].slice(-HISTORY_LIMIT),
       redo: [],
     }));
   }
+  // Reverse the most recent recordSnapshot: drop the snapshot it pushed onto undo
+  // and restore the redo stack it cleared. For aborting a stroke that recorded but
+  // must leave no trace (its file text is reverted separately). Safe to call when
+  // nothing was recorded — it just no-ops the redo restore.
+  function cancelSnapshot() {
+    const savedRedo = lastSnapshotRedoRef.current;
+    lastSnapshotRedoRef.current = null;
+    setHistory((current) => ({
+      undo: current.undo.slice(0, -1),
+      redo: savedRedo ?? current.redo,
+    }));
+  }
   function undo() {
     coalesceRef.current = { key: null, time: 0 };
     const current = historyRef.current;
@@ -121,6 +138,7 @@ export function useEditHistory(text, onChange, path) {
     canUndo: trimTrailingNoOps(history.undo, text).length > 0,
     canRedo: trimLeadingNoOps(history.redo, text).length > 0,
     recordSnapshot,
+    cancelSnapshot,
   };
 }
 

package/kits/physics-2d/editors/pxArtTimeline.jsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { faEye, faEyeSlash, faLink, faStopwatch } from '@fortawesome/free-solid-svg-icons';
 import { colorForKeyV2, paletteLookup, resolveCell, resolveCellGrid } from '../engine/pxart';
-import { Icon, IconButton, styles as ui } from '../engine/ui';
+import { Icon, IconButton, SheetGrabHandle, styles as ui, useCompactViewport, useMobileSheet } from '../engine/ui';
 import { cellKind, forEachGridCell, setupSpriteCanvas } from './pxArtEditorModel';
 import tl from './pxArtTimeline.module.css';
 
@@ -132,15 +132,50 @@ function useResizableTimelineHeight() {
 // frame controls, linked-cell affordances, onion-skin toggles, playback, and a
 // tags editor. All mutation flows through `actions` (wired in PxArtEditor).
 export function PxArtTimeline({ sprite, selection, playing, onion, actions }) {
-  const { sectionRef, height, dragging, startDrag } = useResizableTimelineHeight();
+  // Hooks run unconditionally (order-stable); only the render branches on viewport.
+  const compact = useCompactViewport();
+  const resizable = useResizableTimelineHeight();
+  // Default to the collapsed peek so the canvas starts with the most room; a fresh
+  // storage key so an earlier expanded height from testing doesn't override that.
+  const sheet = useMobileSheet({
+    baseClassName: tl.timelineDrawer,
+    storageKey: 'pxart-drawer',
+    defaultPeek: true,
+  });
+  const grid = (
+    <div className={tl.scroll}>
+      <TimelineGrid sprite={sprite} selection={selection} actions={actions} />
+    </div>
+  );
+  if (compact) {
+    // Mobile: a collapsible bottom drawer. The peek height shows the grab handle +
+    // the CURRENT layer; pull the handle up to reveal the full layers x frames grid.
+    // The height feeds the in-flow .editorLeft column, so collapsing hands the freed
+    // space straight to the canvas.
+    return (
+      <section {...sheet.rootProps}>
+        <div {...sheet.grabProps}>
+          <SheetGrabHandle />
+        </div>
+        <TimelineBar
+          sprite={sprite}
+          selection={selection}
+          playing={playing}
+          onion={onion}
+          actions={actions}
+        />
+        {grid}
+      </section>
+    );
+  }
   return (
-    <section ref={sectionRef} className={tl.timeline} style={{ height: `${height}px` }}>
+    <section ref={resizable.sectionRef} className={tl.timeline} style={{ height: `${resizable.height}px` }}>
       <div
-        className={dragging ? tl.resizeHandle + ' ' + tl.resizeHandleActive : tl.resizeHandle}
+        className={resizable.dragging ? tl.resizeHandle + ' ' + tl.resizeHandleActive : tl.resizeHandle}
         role="separator"
         aria-orientation="horizontal"
         aria-label="Resize timeline"
-        onPointerDown={startDrag}
+        onPointerDown={resizable.startDrag}
       />
       <TimelineBar
         sprite={sprite}
@@ -149,9 +184,7 @@ export function PxArtTimeline({ sprite, selection, playing, onion, actions }) {
         onion={onion}
         actions={actions}
       />
-      <div className={tl.scroll}>
-        <TimelineGrid sprite={sprite} selection={selection} actions={actions} />
-      </div>
+      {grid}
       {SHOW_TAGS ? <TagsPanel sprite={sprite} actions={actions} /> : null}
     </section>
   );

package/kits/physics-2d/editors/pxArtTimeline.module.css

@@ -137,6 +137,24 @@
   overflow: auto;
 }
 
+/* Mobile: the timeline is a collapsible in-flow drawer. Its height is driven by
+   useMobileSheet's --sheet-h and it's a flex:0 child of .editorLeft, so collapsing
+   it (drag the grab handle down / tap) hands the freed height to the canvas. */
+.timelineDrawer {
+  position: relative;
+  flex: 0 0 auto;
+  height: var(--sheet-h, 40vh);
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border-top: 1px solid var(--castle-inspector-divider);
+  background: var(--castle-workspace-bg);
+  color: var(--castle-inspector-text);
+  font-size: 13px;
+}
+
+
 .grid {
   display: inline-flex;
   flex-direction: column;

package/kits/physics-2d/engine/gestureZoomPan.js

@@ -0,0 +1,145 @@
+import { useEffect, useRef } from 'react';
+
+// A multi-finger contact resolves to a TAP (undo/redo) only if the whole contact
+// is this brief and never moved past the slop; longer or larger is a drag.
+const TAP_MAX_MS = 450;
+// Pinch/pan must move this many px (spread or centroid) before it's treated as a
+// drag. Under it the two fingers are still a candidate tap and nothing is applied
+// — this is what keeps a two-finger TAP (undo) cleanly apart from a pinch.
+const GESTURE_SLOP = 10;
+
+// Shared touch gestures for the canvas editors (scene + pxart):
+//   one finger        -> the editor's own tool (draw / select), untouched here
+//   two-finger drag   -> pinch-zoom about the centroid + pan  (onGestureMove)
+//   two-finger TAP    -> undo   (onUndo)
+//   three-finger TAP  -> redo   (onRedo)     [Procreate convention]
+//
+// Tap resolution waits for EVERY finger to lift and then keys off the PEAK finger
+// count reached during the contact — so it doesn't matter whether the fingers land
+// or lift together (an early first-lift used to resolve a three-finger tap as two).
+//
+// A second finger aborts the in-flight one-finger action (onGestureStart) so a
+// gesture never strands a half-stroke. Gesture touches are stopPropagation'd so
+// they never reach the editor's own pointer handlers. onGestureMove emits one
+// step: { factor, cx, cy, dx, dy } — a zoom factor about the pinch centroid plus
+// the centroid's screen-space movement — which each editor applies its own way.
+// The target must have `touch-action: none` for the pinch/pan to beat the browser;
+// the taps work without it (a tap doesn't move, so the browser never scrolls).
+export function useTwoFingerZoomPan({
+  targetRef,
+  enabled = true,
+  onGestureStart,
+  onGestureMove,
+  onGestureEnd,
+  onUndo,
+  onRedo,
+}) {
+  // Callbacks in a ref so the listeners attach once and never need re-binding.
+  const cb = useRef(null);
+  cb.current = { onGestureStart, onGestureMove, onGestureEnd, onUndo, onRedo };
+  useEffect(() => {
+    if (!enabled) return undefined;
+    const el = targetRef.current;
+    if (!el) return undefined;
+    const pts = new Map(); // pointerId -> { x, y }
+    // Per touch-sequence state (a sequence = first finger down … all fingers up):
+    let maxFingers = 0; // peak simultaneous fingers — decides undo (2) vs redo (3)
+    let multiStart = 0; // timeStamp the contact first reached two fingers
+    let startDist = 0;
+    let startCx = 0;
+    let startCy = 0;
+    let committed = false; // moved past slop → a pinch/pan drag, not a tap
+    let lastDist = 0;
+    let lastCx = 0;
+    let lastCy = 0;
+    const isTouch = (event) => event.pointerType === 'touch';
+    const twoFinger = () => {
+      const [a, b] = [...pts.values()];
+      return {
+        cx: (a.x + b.x) / 2,
+        cy: (a.y + b.y) / 2,
+        dist: Math.hypot(a.x - b.x, a.y - b.y),
+      };
+    };
+    const onDown = (event) => {
+      if (!isTouch(event)) return;
+      pts.set(event.pointerId, { x: event.clientX, y: event.clientY });
+      if (pts.size > maxFingers) maxFingers = pts.size;
+      if (pts.size === 2) {
+        const m = twoFinger();
+        multiStart = event.timeStamp;
+        startDist = lastDist = m.dist;
+        startCx = lastCx = m.cx;
+        startCy = lastCy = m.cy;
+        committed = false;
+        cb.current.onGestureStart?.(); // abort any in-flight one-finger action
+      }
+      if (pts.size >= 2) event.stopPropagation();
+    };
+    const onMove = (event) => {
+      if (!isTouch(event) || !pts.has(event.pointerId)) return;
+      pts.set(event.pointerId, { x: event.clientX, y: event.clientY });
+      if (pts.size < 2) return;
+      event.preventDefault();
+      event.stopPropagation();
+      if (pts.size !== 2) return; // zoom/pan is a two-finger interaction only
+      const m = twoFinger();
+      if (!committed) {
+        const spread = Math.abs(m.dist - startDist);
+        const slid = Math.hypot(m.cx - startCx, m.cy - startCy);
+        if (spread <= GESTURE_SLOP && slid <= GESTURE_SLOP) return; // still a candidate tap
+        committed = true;
+        // Reset the baseline to here so the first applied step doesn't jump by the
+        // whole slop distance.
+        lastDist = m.dist;
+        lastCx = m.cx;
+        lastCy = m.cy;
+        return;
+      }
+      const factor = lastDist > 0 && m.dist > 0 ? m.dist / lastDist : 1;
+      cb.current.onGestureMove?.({
+        factor,
+        cx: m.cx,
+        cy: m.cy,
+        dx: m.cx - lastCx,
+        dy: m.cy - lastCy,
+      });
+      lastDist = m.dist;
+      lastCx = m.cx;
+      lastCy = m.cy;
+    };
+    const onUp = (event) => {
+      if (pts.size >= 2 || committed) event.stopPropagation();
+      if (!pts.delete(event.pointerId)) return;
+      if (committed && pts.size < 2) cb.current.onGestureEnd?.();
+      if (pts.size > 0) return;
+      // Every finger is up — resolve the whole contact. A still (never a drag),
+      // brief multi-finger tap is undo at peak 2, redo at peak 3. Keying off the
+      // peak count makes it immune to the order fingers landed or lifted.
+      if (!committed && maxFingers >= 2 && event.timeStamp - multiStart < TAP_MAX_MS) {
+        if (maxFingers === 2) cb.current.onUndo?.();
+        else if (maxFingers === 3) cb.current.onRedo?.();
+      }
+      maxFingers = 0;
+      committed = false;
+      multiStart = 0;
+    };
+    // CAPTURE phase, not bubble: the artboard canvas captures the first finger
+    // (startTool → setPointerCapture) and consumes touches, so a bubble-phase
+    // listener misses fingers landing on/near it — three-finger taps rarely
+    // registered there. Capturing means we see every pointer BEFORE any descendant
+    // can swallow it, so the finger count is reliable wherever the taps land; and
+    // stopPropagation on the 2nd/3rd finger then keeps them out of the canvas too.
+    const opts = { passive: false, capture: true };
+    el.addEventListener('pointerdown', onDown, opts);
+    el.addEventListener('pointermove', onMove, opts);
+    el.addEventListener('pointerup', onUp, opts);
+    el.addEventListener('pointercancel', onUp, opts);
+    return () => {
+      el.removeEventListener('pointerdown', onDown, opts);
+      el.removeEventListener('pointermove', onMove, opts);
+      el.removeEventListener('pointerup', onUp, opts);
+      el.removeEventListener('pointercancel', onUp, opts);
+    };
+  }, [targetRef, enabled]);
+}