castle-web-cli 0.4.85 → 0.4.87

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

@@ -1,8 +1,8 @@
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { frameCount, renderSpriteFrame, TRANSPARENT } from '../engine/pxart';
 import { renderSmoothSpriteFrame } from '../engine/pxartSmooth';
 import { basename } from '../engine/files';
-import { EditorBody, styles } from '../engine/ui';
+import { EditorBody, IconButton, styles } from '../engine/ui';
 import { eventToCell } from './pixelCanvas';
 import { forEachDab } from './pixelGeometry';
 import { PixelArtboard, PixelEditorHeader, usePixelEditorShell } from './pixelEditorChrome';
@@ -74,6 +74,24 @@ import tl from './pxArtTimeline.module.css';
 const ONION_WARM = '#ff7a3c';
 const ONION_COOL = '#3ca0ff';
 
+// Artboard zoom bounds and wheel sensitivity. zoom 1 = fit (the artboard fills
+// its region); zooming in scrolls the surrounding viewport to pan.
+const MIN_ART_ZOOM = 1;
+const MAX_ART_ZOOM = 12;
+const ART_ZOOM_WHEEL_SPEED = 0.01;
+// Floating zoom/pan control cluster, tucked into the true bottom-right corner of
+// the artboard region (over the palette column's empty lower area — the palette
+// keeps its swatches top-aligned).
+const PXART_ZOOM_CONTROLS_STYLE = {
+  position: 'absolute',
+  right: 8,
+  bottom: 8,
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 4,
+  zIndex: 5,
+};
+
 // Native CSS cursors over the artboard, keyed by the active tool. The transient
 // eyedropper (picker mode) overrides any of these with 'crosshair'. Tools not
 // listed fall back to the default cursor.
@@ -147,11 +165,109 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
     eraseSize,
     activeKey,
   });
-  const { canvasStyle } = useArtboardFit({
+  const { canvasStyle, displaySize } = useArtboardFit({
     wrapRef: canvasWrapRef,
     sizeBarRef: canvasSizeBarRef,
     resolution: sprite?.resolution ?? { width: 16, height: 16 },
   });
+  // Artboard zoom + pan. `zoom` scales the canvas above its fit size; the
+  // surrounding viewport (overflow: auto) scrolls to pan. Middle-drag pans and
+  // the wheel zooms at the cursor (wired below); the button cluster drives the
+  // same via `applyZoom`.
+  const viewportRef = useRef(null);
+  const panRef = useRef(null);
+  const [zoom, setZoom] = useState(1);
+  const zoomRef = useRef(zoom);
+  zoomRef.current = zoom;
+  // Set zoom to `nextRaw` (clamped) while pinning the point under (anchorX,
+  // anchorY) client coords — defaulting to the viewport center. Scroll is fixed
+  // up on the next frame, once the resized canvas has laid out.
+  const applyZoom = useCallback((nextRaw, anchorX, anchorY) => {
+    const vp = viewportRef.current;
+    const z0 = zoomRef.current;
+    const z1 = Math.max(MIN_ART_ZOOM, Math.min(MAX_ART_ZOOM, nextRaw));
+    if (!vp || z1 === z0) return;
+    const rect = vp.getBoundingClientRect();
+    const ax = (Number.isFinite(anchorX) ? anchorX : rect.left + rect.width / 2) - rect.left;
+    const ay = (Number.isFinite(anchorY) ? anchorY : rect.top + rect.height / 2) - rect.top;
+    const contentX = vp.scrollLeft + ax;
+    const contentY = vp.scrollTop + ay;
+    const ratio = z1 / z0;
+    setZoom(z1);
+    requestAnimationFrame(() => {
+      vp.scrollLeft = contentX * ratio - ax;
+      vp.scrollTop = contentY * ratio - ay;
+    });
+  }, []);
+  const resetZoom = useCallback(() => {
+    setZoom(1);
+    const vp = viewportRef.current;
+    if (vp) requestAnimationFrame(() => {
+      vp.scrollLeft = 0;
+      vp.scrollTop = 0;
+    });
+  }, []);
+  // Wheel zoom as a NATIVE non-passive listener so preventDefault stops the
+  // page/browser zoom underneath. Delta is clamped so a chunky mouse notch is a
+  // sane step while trackpad deltas stay smooth.
+  useEffect(() => {
+    const vp = viewportRef.current;
+    if (!vp) return undefined;
+    const onWheel = (event) => {
+      event.preventDefault();
+      const clamped = Math.max(-50, Math.min(50, event.deltaY));
+      applyZoom(zoomRef.current * Math.exp(-clamped * ART_ZOOM_WHEEL_SPEED), event.clientX, event.clientY);
+    };
+    vp.addEventListener('wheel', onWheel, { passive: false });
+    return () => vp.removeEventListener('wheel', onWheel, { passive: false });
+  }, [applyZoom]);
+  // Middle-button drag pans by scrolling the viewport. Intercept in the capture
+  // phase so the press never reaches the canvas's draw handler (startTool).
+  const onViewportPointerDownCapture = (event) => {
+    // Pan on a middle-button drag or a ⌘+left-drag (metaKey). Both are caught in
+    // the capture phase so the press never reaches the canvas's draw handler.
+    const startsPan = event.button === 1 || (event.button === 0 && event.metaKey);
+    if (!startsPan) return;
+    event.preventDefault();
+    event.stopPropagation();
+    const vp = viewportRef.current;
+    vp.setPointerCapture(event.pointerId);
+    panRef.current = { id: event.pointerId, x: event.clientX, y: event.clientY };
+  };
+  const onViewportPointerMove = (event) => {
+    const pan = panRef.current;
+    if (!pan || pan.id !== event.pointerId) return;
+    const vp = viewportRef.current;
+    vp.scrollLeft -= event.clientX - pan.x;
+    vp.scrollTop -= event.clientY - pan.y;
+    pan.x = event.clientX;
+    pan.y = event.clientY;
+  };
+  const onViewportPointerUp = (event) => {
+    const pan = panRef.current;
+    if (!pan || pan.id !== event.pointerId) return;
+    try {
+      viewportRef.current?.releasePointerCapture(event.pointerId);
+    } catch {
+      // pointer capture may already be gone
+    }
+    panRef.current = null;
+  };
+  // Viewport is sized to the fit baseline; the canvas inside scales by zoom, so
+  // zoom > 1 overflows and the viewport scrolls (= pan).
+  const artboardViewportStyle = displaySize
+    ? {
+        width: displaySize.width,
+        height: displaySize.height,
+        maxWidth: '100%',
+        maxHeight: '100%',
+        overflow: 'auto',
+        touchAction: 'none',
+      }
+    : { overflow: 'auto' };
+  const artboardCanvasStyle = displaySize
+    ? { width: displaySize.width * zoom, height: displaySize.height * zoom }
+    : canvasStyle;
   // `canvasStyle`'s width is the artboard's CURRENT display size (recomputed
   // by useArtboardFit's own ResizeObserver whenever the wrap resizes — e.g. a
   // dockview panel drag). Feeding it in here is what keeps the supersampled
@@ -437,7 +553,7 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
     <PxArtShell path={path} subtitle={pxArtSubtitle(sprite)} shell={headerShell} chrome={chrome} editorBodyRef={editorBodyRef}>
       <div className={styles.drawingEditor}>
         <div className={tl.editorLeft}>
-          <div className={tl.artboardRegion}>
+          <div className={tl.artboardRegion} style={{ position: 'relative' }}>
             <div className={styles.artboardToolColumn}>
               <PixelToolStrip
                 tools={PIXEL_TOOLS}
@@ -464,19 +580,28 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
                     />
                   </div>
                 </div>
-                <PixelArtboard
-                  canvasRef={canvasRef}
-                  smoothRef={smoothRef}
-                  overlayRef={overlayRef}
-                  style={{ ...canvasStyle, cursor }}
-                  handlers={{
-                    onPointerDown: startTool,
-                    onPointerMove: handlePointerMove,
-                    onPointerUp: finishTool,
-                    onPointerCancel: finishTool,
-                    onPointerLeave: clearHover,
-                  }}
-                />
+                <div
+                  ref={viewportRef}
+                  style={artboardViewportStyle}
+                  onPointerDownCapture={onViewportPointerDownCapture}
+                  onPointerMove={onViewportPointerMove}
+                  onPointerUp={onViewportPointerUp}
+                  onPointerCancel={onViewportPointerUp}
+                >
+                  <PixelArtboard
+                    canvasRef={canvasRef}
+                    smoothRef={smoothRef}
+                    overlayRef={overlayRef}
+                    style={{ ...artboardCanvasStyle, cursor }}
+                    handlers={{
+                      onPointerDown: startTool,
+                      onPointerMove: handlePointerMove,
+                      onPointerUp: finishTool,
+                      onPointerCancel: finishTool,
+                      onPointerLeave: clearHover,
+                    }}
+                  />
+                </div>
               </div>
             </div>
             <div className={styles.paintColumn}>
@@ -494,6 +619,19 @@ export function PxArtEditor({ path, text, onChange, ...chrome }) {
                 selectActions={selectActions}
               />
             </div>
+            <div style={PXART_ZOOM_CONTROLS_STYLE}>
+              <IconButton
+                icon="zoom-in"
+                label="Zoom in"
+                onClick={() => applyZoom(zoomRef.current * 1.25)}
+              />
+              <IconButton
+                icon="zoom-out"
+                label="Zoom out"
+                onClick={() => applyZoom(zoomRef.current * 0.8)}
+              />
+              <IconButton icon="fit" label="Fit" onClick={resetZoom} />
+            </div>
           </div>
           <PxArtTimeline
             sprite={sprite}

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

@@ -58,6 +58,17 @@ const BLUEPRINT_TEMPLATE_ACTOR_ID = '__template__';
 const LONG_PRESS_MS = 500;
 const DRAG_THRESHOLD = 4;
 const DEFAULT_GRID_SIZE = 25;
+// Floating zoom/pan control cluster, tucked into the bottom-right corner of the
+// stage workspace (matches the art editor's placement).
+const ZOOM_CONTROLS_STYLE = {
+  position: 'absolute',
+  right: 8,
+  bottom: 8,
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 4,
+  zIndex: 5,
+};
 const EDIT_VIEWPORT = {
   width: cardSize.width * 3,
   height: cardSize.height * 3,
@@ -321,7 +332,9 @@ export function SceneEditor({
       const Behavior = findBehaviorClass(behaviorName);
       if (!Behavior) return;
       updateBlueprintTemplate((components) => {
-        components[behaviorName] = { ...Behavior.defaultProps };
+        // The template's own components (Layout/Sprite) are the actor context an
+        // initialProps hook (e.g. Collider auto-fit) reads from.
+        components[behaviorName] = initialBehaviorProps(Behavior, { components }, sprites);
       });
     },
     removeBehavior: (behaviorName) =>
@@ -347,6 +360,8 @@ export function SceneEditor({
     selectedActorIds,
     onSelectActorIds,
     isBlueprintFile,
+    sprites,
+    resolvedActors: previewSceneData?.actors,
   });
   const snapSettings = getSnapSettings(sceneData);
   const stageWrapStyle = {
@@ -464,35 +479,22 @@ export function SceneEditor({
         <div className={styles.sceneWorkspace}>
           <div className={styles.sceneTools}>
             {isBlueprintFile ? null : (
-              <>
-                {/* Open (or focus) a Play panel in the shell for this scene.
-                    Lives here in the visible toolbar because the scene editor's
-                    header only renders in the combined editor, not the shell. */}
-                <IconButton
-                  icon="external"
-                  label="Open play preview"
-                  onClick={(event) => {
-                    event.currentTarget.blur();
-                    window.parent.postMessage({ type: 'castle-open-playtest', scene: path }, '*');
-                  }}
-                />
-                <BlueprintLibrary
-                  files={files}
-                  sprites={sprites}
-                  canvasRef={canvasRef}
-                  editCameraRef={editCameraRef}
-                  isPlaying={isPlaying}
-                  selectedBlueprintPath={selectedBlueprintPath}
-                  instanceBlueprintPath={rawSelectedActor?.blueprint ?? null}
-                  onSelectBlueprint={onSelectBlueprint}
-                  onAddActor={onAddActor}
-                  dragPlace={dragPlace}
-                  onDeleteBlueprint={onDeleteBlueprint}
-                />
-              </>
+              <BlueprintLibrary
+                files={files}
+                sprites={sprites}
+                canvasRef={canvasRef}
+                editCameraRef={editCameraRef}
+                isPlaying={isPlaying}
+                selectedBlueprintPath={selectedBlueprintPath}
+                instanceBlueprintPath={rawSelectedActor?.blueprint ?? null}
+                onSelectBlueprint={onSelectBlueprint}
+                onAddActor={onAddActor}
+                dragPlace={dragPlace}
+                onDeleteBlueprint={onDeleteBlueprint}
+              />
             )}
           </div>
-          <div className={styles.stageWrap} style={stageWrapStyle}>
+          <div className={styles.stageWrap} style={{ ...stageWrapStyle, position: 'relative' }}>
             <div className={styles.stageCard} data-castle-card>
               <div className={cx(styles.stageCardClip, !isPlaying && styles.stageCardEditSurface)}>
                 <canvas
@@ -507,7 +509,12 @@ export function SceneEditor({
                   onPointerDown={(event) => {
                     event.currentTarget.focus({ preventScroll: true });
                     if (isPlaying) return playPointer.onPointerDown(event);
-                    if (panGesture.isSpacePanning()) return panGesture.onPointerDown(event);
+                    if (
+                      panGesture.isSpacePanning() ||
+                      event.button === 1 ||
+                      (event.button === 0 && event.metaKey)
+                    )
+                      return panGesture.onPointerDown(event);
                     return gesture.onPointerDown(event);
                   }}
                   onPointerMove={(event) =>
@@ -551,6 +558,25 @@ export function SceneEditor({
                 />
               )}
             </div>
+            {!isPlaying && (
+              <div style={ZOOM_CONTROLS_STYLE}>
+                <IconButton
+                  icon="zoom-in"
+                  label="Zoom in"
+                  onClick={() => panGesture.zoomAtCenter(1.25)}
+                />
+                <IconButton
+                  icon="zoom-out"
+                  label="Zoom out"
+                  onClick={() => panGesture.zoomAtCenter(0.8)}
+                />
+                <IconButton
+                  icon="fit"
+                  label="Reset view"
+                  onClick={() => panGesture.resetView()}
+                />
+              </div>
+            )}
           </div>
           <aside {...inspectorSheet.rootProps}>
             <div {...inspectorSheet.grabProps}>
@@ -655,7 +681,17 @@ function HeaderPlaybackButtons({ isPlaying, setIsPlaying, history }) {
 // remove-behavior stay whole-component operations straight against the
 // instance's own sparse `components` -- there's no per-property baseline to
 // diff when a component doesn't exist on one side at all.
-function makeSceneActions({ sceneData, files, serialize, commit, selectedActorIds, onSelectActorIds, isBlueprintFile }) {
+// Props to seed a behavior with when it's freshly added to `actor`. A behavior
+// may define `static initialProps(actor, { sprites })` to derive props from the
+// actor it lands on (e.g. Collider snaps to the sprite's opaque-pixel bounds);
+// otherwise it starts from `defaultProps`. `actor` is the resolved actor
+// (Layout/Sprite merged) or, for a blueprint template, `{ components }`.
+function initialBehaviorProps(Behavior, actor, sprites) {
+  if (Behavior.initialProps && actor) return Behavior.initialProps(actor, { sprites });
+  return { ...Behavior.defaultProps };
+}
+
+function makeSceneActions({ sceneData, files, serialize, commit, selectedActorIds, onSelectActorIds, isBlueprintFile, sprites, resolvedActors }) {
   function commitScene(next, options) {
     commit(serialize(next), options);
   }
@@ -667,8 +703,9 @@ function makeSceneActions({ sceneData, files, serialize, commit, selectedActorId
     addBehavior: (actorId, behaviorName) => {
       const Behavior = findBehaviorClass(behaviorName);
       if (!Behavior) return;
+      const resolved = resolvedActors?.find((actor) => actor.id === actorId);
       commitScene(
-        setActorComponent(sceneData, actorId, behaviorName, { ...Behavior.defaultProps })
+        setActorComponent(sceneData, actorId, behaviorName, initialBehaviorProps(Behavior, resolved, sprites))
       );
     },
     removeBehavior: (actorId, behaviorName) =>
@@ -1021,18 +1058,19 @@ function usePanGesture({ canvasRef, editCameraRef, isPlaying }) {
     const onWheel = (event) => {
       if (isPlayingRef.current) return;
       event.preventDefault();
-      // Trackpad pinch (and Ctrl+wheel) surface as wheel events with ctrlKey set
-      // in Chromium; route those to zoom and leave plain scroll as pan.
-      if (event.ctrlKey) {
-        if (gestureActive) return;
-        zoomByFactorAtPointer(
-          event.clientX,
-          event.clientY,
-          Math.exp(-event.deltaY * ZOOM_WHEEL_SPEED)
-        );
-      } else {
-        panByScreenDelta(event.deltaX, event.deltaY);
-      }
+      // Safari fires ctrl+wheel alongside its own gesture* pinch events; skip the
+      // wheel while a pinch is mid-flight so zoom isn't applied twice.
+      if (gestureActive) return;
+      // The wheel zooms at the cursor (standard editor affordance). Trackpad
+      // pinch and Ctrl+wheel arrive here too (Chromium sets ctrlKey) and map to
+      // the same zoom. Clamp per-event delta so a chunky mouse-wheel notch
+      // (deltaY ~100) is a sane step (≤1.65x) while trackpad deltas stay smooth.
+      const clampedDeltaY = Math.max(-50, Math.min(50, event.deltaY));
+      zoomByFactorAtPointer(
+        event.clientX,
+        event.clientY,
+        Math.exp(-clampedDeltaY * ZOOM_WHEEL_SPEED)
+      );
     };
     const onGestureStart = (event) => {
       if (isPlayingRef.current) return;
@@ -1073,7 +1111,13 @@ function usePanGesture({ canvasRef, editCameraRef, isPlaying }) {
     };
   }, [canvasRef, panByScreenDelta, zoomByFactorAtPointer]);
   const onPointerDown = useCallback((event) => {
-    if (isPlaying || !spaceDownRef.current) return;
+    if (isPlaying) return;
+    // Pan when Space is held (existing modifier), on a middle-button drag, or on
+    // a ⌘+left-drag (metaKey) — matching the art editor. preventDefault also
+    // suppresses the browser's middle-click autoscroll.
+    const middle = event.button === 1;
+    const cmdDrag = event.button === 0 && event.metaKey;
+    if (!spaceDownRef.current && !middle && !cmdDrag) return;
     event.preventDefault();
     event.currentTarget.setPointerCapture(event.pointerId);
     dragRef.current = { id: event.pointerId, lastX: event.clientX, lastY: event.clientY };
@@ -1102,7 +1146,29 @@ function usePanGesture({ canvasRef, editCameraRef, isPlaying }) {
   }, []);
   const isSpacePanning = useCallback(() => spaceDownRef.current, []);
   const isActive = useCallback(() => Boolean(dragRef.current), []);
-  return { onPointerDown, onPointerMove, onPointerUp, isSpacePanning, isActive };
+  // 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(
+    (factor) => {
+      const canvas = canvasRef.current;
+      if (!canvas) return;
+      const rect = canvas.getBoundingClientRect();
+      zoomByFactorAtPointer(rect.left + rect.width / 2, rect.top + rect.height / 2, factor);
+    },
+    [canvasRef, zoomByFactorAtPointer]
+  );
+  const resetView = useCallback(() => {
+    editCameraRef.current = { x: 0, y: 0, zoom: 1 };
+  }, [editCameraRef]);
+  return {
+    onPointerDown,
+    onPointerMove,
+    onPointerUp,
+    isSpacePanning,
+    isActive,
+    zoomAtCenter,
+    resetView,
+  };
 }
 function handleShiftPointerDown(drag, actor, current) {
   if (actor) {

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

@@ -98,5 +98,8 @@ export function useArtboardFit({ wrapRef, sizeBarRef, resolution }) {
     ? { width: `${displaySize.width}px`, height: `${displaySize.height}px` }
     : undefined;
 
-  return { canvasStyle, refit: fit };
+  // `displaySize` (numeric px, or null) is the fit baseline the zoom/pan layer
+  // multiplies against; `canvasStyle` is the same value pre-formatted for the
+  // unzoomed render path.
+  return { canvasStyle, displaySize, refit: fit };
 }

package/kits/physics-2d/engine/ScenePlayer.jsx

@@ -93,7 +93,20 @@ export function ScenePlayer({ sceneData, sprites, files, behaviorClasses, onFirs
       <canvas
         ref={canvasRef}
         tabIndex={0}
-        style={{ width: '100%', height: '100%', display: 'block', outline: 'none' }}
+        style={{
+          width: '100%',
+          height: '100%',
+          display: 'block',
+          outline: 'none',
+          // Claim touches for the game: without this, a mobile WebView
+          // (castle-client) treats a drag as a scroll/pan gesture and fires
+          // `pointercancel` mid-drag, so a held Draggable/Slingshot loses its
+          // grip. Also suppress long-press text selection / callout.
+          touchAction: 'none',
+          userSelect: 'none',
+          WebkitUserSelect: 'none',
+          WebkitTouchCallout: 'none',
+        }}
       />
       <SceneUI getRuntime={getRuntime} />
       {error ? <PlayErrorOverlay error={error} onRestart={onRestart} /> : null}

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

@@ -0,0 +1,28 @@
+// Behavior field extensions. A self-contained kit module (like `physics/`) can
+// add fields to a behavior defined in the shared core WITHOUT editing that
+// behavior's file -- so the core behavior stays byte-identical across kits and
+// the module owns its own additions. Each extension module under any
+// `<module>/extensions/*.js` exports:
+//
+//   export const behaviorExtension = {
+//     behaviorName: 'Collider',
+//     defaultProps: { bounciness: 0, friction: 0.1 },
+//   };
+//
+// A behavior folds its registered extensions into its own `defaultProps` (see
+// behaviors/Collider.jsx `...extensionDefaultProps('Collider')`); the inspector
+// already renders leftover defaultProps generically, so registered fields show
+// up with no inspector change. Empty in a kit with no `*/extensions/` dir (e.g.
+// basic-2d). Symmetric with engine/systemRegistry.js and editors/behaviorRegistry.js.
+const modules = import.meta.glob('../*/extensions/*.js', { eager: true });
+const extensions = Object.values(modules)
+  .map((mod) => mod.behaviorExtension)
+  .filter(Boolean);
+
+// Merged defaultProps that registered extensions contribute to `behaviorName`
+// (empty object when none). Later extensions win on a key collision.
+export function extensionDefaultProps(behaviorName) {
+  return extensions
+    .filter((ext) => ext.behaviorName === behaviorName)
+    .reduce((acc, ext) => ({ ...acc, ...ext.defaultProps }), {});
+}

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

@@ -174,9 +174,13 @@ export function getColliderShape(actor, sprites) {
 // dynamically. Returns null when there's nothing to fit to (no Sprite, tile
 // mode, or fully transparent art). Powers the inspector's "Auto-fit to sprite".
 export function computeAutoFit(actor, sprites) {
-  const layout = actor?.components?.Layout;
+  const rawLayout = actor?.components?.Layout;
   const spriteProps = actor?.components?.Sprite;
-  if (!layout || !spriteProps) return null;
+  if (!rawLayout || !spriteProps) return null;
+  // Blueprint templates omit x/y (position is instance-local). x/y cancel out of
+  // the offset delta below, so default them to 0 -- otherwise an undefined x/y
+  // (auto-fitting a template, e.g. on add) turns the offsets into NaN.
+  const layout = { ...rawLayout, x: rawLayout.x ?? 0, y: rawLayout.y ?? 0 };
   const rect = autoRect(layout, spriteProps, sprites?.[spriteProps.file]);
   if (!rect || rect.width <= 0 || rect.height <= 0) return null;
   // manualRect centers a width x height box in the Layout box; the offset is the

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

@@ -1,7 +1,7 @@
 import { initialFiles, parseJsonFile } from './files';
 import { getBlueprintTemplate, mergeComponents } from './blueprint';
-import { installPhysics } from '../physics';
 import { getColliderRect, intersects, spriteIsEmpty } from './collider';
+import { systemInstallers } from './systemRegistry';
 
 const CARD_WIDTH = 500;
 const CARD_HEIGHT = 700;
@@ -45,14 +45,13 @@ export class SceneRuntime {
     this.status = undefined;
     // Registered systems run once per frame after all behavior `update`s (see
     // `update`). A system is a plain object with an optional
-    // `afterBehaviors(scene, dt)` hook; this is the seam the physics module
-    // plugs into so it stays decoupled from the core runtime and portable to
-    // other kits.
+    // `afterBehaviors(scene, dt)` hook; kits register systems from `systems/*.js`
+    // (see makeScene), so the engine core stays decoupled from any specific one.
     this.systems = [];
     this.load(sceneData);
   }
 
-  // Register a per-frame system (e.g. the physics simulation). Systems step in
+  // Register a per-frame system (e.g. a physics simulation). Systems step in
   // registration order, after behaviors, every `update`. Returns the system.
   registerSystem(system) {
     this.systems.push(system);
@@ -102,8 +101,8 @@ export class SceneRuntime {
   }
 
   clone() {
-    // Route through makeScene so the clone gets the same registered systems
-    // (physics) as a freshly-made runtime.
+    // Route through makeScene so the clone gets the same registered systems as a
+    // freshly-made runtime.
     return makeScene(this.serialize(), [...this.behaviors.values()], this.sprites, this.files);
   }
 
@@ -206,9 +205,9 @@ export class SceneRuntime {
     for (const actor of this.getActors()) {
       this.forEachBehavior(actor, (instance) => instance.update?.(actor, this, dt));
     }
-    // Behaviors have expressed their intent (velocities, forces) for this
-    // frame; now let registered systems advance (physics integrates, writes
-    // results back to Layout, and dispatches collision callbacks).
+    // Behaviors have expressed their intent (velocities, forces) for this frame;
+    // now let registered systems advance (e.g. physics integrates, writes results
+    // back to Layout, and dispatches collision callbacks).
     for (const system of this.systems) {
       system.afterBehaviors?.(this, dt);
     }
@@ -322,10 +321,10 @@ export class SceneRuntime {
 
 export function makeScene(sceneData, behaviors, sprites, files) {
   const runtime = new SceneRuntime(sceneData, behaviors, sprites, files);
-  // Physics is a self-contained module registered as a runtime system. The
-  // matter engine is created lazily on the first simulation step, so draw-only
+  // Install any runtime systems the kit provides (systems/*.js) -- no-op in a kit
+  // with none. A system's engine is created lazily on first use, so draw-only
   // editor previews (which never call update) stay free.
-  installPhysics(runtime);
+  for (const install of systemInstallers) install(runtime);
   return runtime;
 }
 

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

@@ -0,0 +1,12 @@
+// Discover per-frame runtime systems from `systems/*.js`. Each such module
+// exports `installSystem(runtime)`, which is called once for every created
+// SceneRuntime (see engine/scene.js `makeScene`) to register itself via
+// `runtime.registerSystem(...)`. A system is a plain object with an optional
+// `afterBehaviors(scene, dt)` hook, run once per frame after all behavior
+// updates. Empty in a kit with no `systems/` dir (e.g. basic-2d); a kit adds a
+// system by dropping a file here -- no edits to the engine required. Symmetric
+// with editors/behaviorRegistry.js.
+const modules = import.meta.glob('../systems/*.js', { eager: true });
+export const systemInstallers = Object.values(modules)
+  .map((mod) => mod.installSystem)
+  .filter((fn) => typeof fn === 'function');

package/kits/physics-2d/engine/ui.jsx

@@ -13,6 +13,7 @@ import {
   faCode,
   faCodeBranch,
   faEraser,
+  faExpand,
   faExternalLinkAlt,
   faEyeDropper,
   faFile,
@@ -27,6 +28,8 @@ import {
   faPlay,
   faPlus,
   faRedo,
+  faSearchMinus,
+  faSearchPlus,
   faShapes,
   faSlash,
   faVectorSquare,
@@ -180,6 +183,7 @@ const icons = {
   // FA5 has no faCodeFork (that's the FA6 name); faCodeBranch is the fork glyph.
   'code-fork': faCodeBranch,
   eraser: faEraser,
+  expand: faExpand,
   external: faExternalLinkAlt,
   eyedropper: faEyeDropper,
   fill: faFillDrip,
@@ -199,6 +203,9 @@ const icons = {
   plus: faPlus,
   redo: faRedo,
   rotate: faSyncAlt,
+  'zoom-in': faSearchPlus,
+  'zoom-out': faSearchMinus,
+  fit: faExpand,
   shapes: faShapes,
   slash: faSlash,
   square: faSquare,

package/kits/physics-2d/physics/behaviors/AnalogStick.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Panel, SelectField } from '../../engine/ui';
 import { AutoFields, overrideProps } from '../../engine/autoInspector';
-import { analogVelocity, inActorWorldSpace, stickVector } from '../controls';
+import { analogVelocity, inActorWorldSpace, pressOnDraggable, stickVector } from '../controls';
 
 // AnalogStick: an on-screen virtual joystick that drives the actor it's on --
 // the look and feel of castle-client's Analog Stick. Press anywhere to place
@@ -29,7 +29,9 @@ export class AnalogStick {
     const rt = actor.runtime;
     const pressed = p.down && !rt._stickWasDown;
     rt._stickWasDown = p.down;
-    if (pressed) rt._stickOrigin = { x: p.x, y: p.y };
+    // A press on a draggable is consumed by the drag; every other press drives
+    // the stick.
+    if (pressed && !pressOnDraggable(scene)) rt._stickOrigin = { x: p.x, y: p.y };
 
     // Only drive velocity while the stick is actually held.
     if (p.down && rt._stickOrigin) {