castle-web-cli 0.4.85 → 0.4.87

package/kits/basic-2d/behaviors/Collider.jsx

@@ -1,58 +1,204 @@
-import React from 'react';
-import { Panel, SelectField } from '../engine/ui';
+import React, { useState } from 'react';
+import { Icon, NumberField, Panel, SelectField } from '../engine/ui';
 import { AutoFields, overrideProps } from '../engine/autoInspector';
-import { getColliderRect, intersects } from '../engine/collider';
+import { computeAutoFit, getColliderRect, getColliderShape, intersects } from '../engine/collider';
+import { extensionDefaultProps } from '../engine/behaviorExtensions';
+
+// Collapsible "Dimensions" section. The header row's label lines up exactly with
+// the field labels above/below (both start at the panel body's 16px left pad);
+// the open/closed caret floats in the left gutter without shifting the label.
+// `margin-bottom: 12px` matches a field row's `padding-bottom`, so the gap to
+// the next entry is the same whether the section is open or closed.
+const dimHeaderRowStyle = {
+  position: 'relative',
+  display: 'flex',
+  alignItems: 'center',
+  gap: 10,
+  minHeight: 28,
+  margin: '0 0 12px',
+};
+const dimToggleStyle = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  background: 'none',
+  border: 'none',
+  padding: 0,
+  margin: 0,
+  color: 'var(--castle-inspector-text)',
+  fontFamily: 'inherit',
+  fontSize: 14,
+  cursor: 'pointer',
+};
+// The caret sits in the panel's left gutter (label column starts at x=16).
+const dimCaretStyle = {
+  position: 'absolute',
+  left: -14,
+  top: '50%',
+  transform: 'translateY(-50%)',
+  display: 'inline-flex',
+  alignItems: 'center',
+  fontSize: 11,
+  opacity: 0.65,
+};
+const autoFitLinkStyle = {
+  background: 'none',
+  border: 'none',
+  padding: 0,
+  color: '#4aa3ff',
+  fontFamily: 'inherit',
+  fontSize: 13,
+  cursor: 'pointer',
+};
+const dimBodyStyle = { paddingLeft: 14 };
 
 export class Collider {
   static behaviorName = 'Collider';
 
   static defaultProps = {
-    kind: 'solid',
-    mode: 'auto',
-    width: 50,
-    height: 50,
+    shape: 'box',
+    // width/height/radius are intentionally NOT defaulted: an unset size means
+    // "match the actor's Layout box" (see engine/collider.js manualRect and the
+    // effective values in the inspector). Defaulting them to a fixed number made
+    // every collider shrink to that number instead of tracking the actor.
+    radius: 0,
     offsetX: 0,
     offsetY: 0,
+    // `isTrigger` marks a sensor: it still reports overlaps (draws yellow, reads
+    // as a pass-through zone for pickup/goal logic) but does not block on its
+    // own -- collisions are data you act on. Kit modules can register MORE
+    // Collider fields from outside this file (the physics module adds
+    // bounciness/friction material); see engine/behaviorExtensions.js. That's
+    // why this file is byte-identical across kits -- the physics-only fields
+    // live in physics/extensions/, not here.
+    isTrigger: false,
     debug: false,
+    ...extensionDefaultProps('Collider'),
   };
 
   constructor(props) {
     this.props = props;
   }
 
+  // Seed props when the collider is first added to an actor: snap it to the
+  // sprite's opaque-pixel bounds (what "Auto-fit to sprite" computes) so a new
+  // collider frames the art rather than the whole Layout box. Falls back to the
+  // unset (Layout-box) size when there's nothing to fit to -- no sprite, tile
+  // mode, or transparent art. The editor's addBehavior calls this (see
+  // editors/SceneEditor.jsx initialBehaviorProps).
+  static initialProps(actor, ctx) {
+    const fit = computeAutoFit(actor, ctx?.sprites);
+    return fit ? { ...Collider.defaultProps, ...fit } : { ...Collider.defaultProps };
+  }
+
   draw(actor, scene, ctx, options) {
     if (!options.showDebugColliders && !this.props.debug) return;
-    const rect = getColliderRect(actor, scene.sprites);
-    if (!rect) return;
+    const geom = getColliderShape(actor, scene.sprites);
+    if (!geom) return;
+    // A sensor (isTrigger) reads as a pass-through zone; a solid as a wall.
+    const isSensor = Boolean(this.props.isTrigger) || this.props.kind === 'pickup';
     ctx.save();
-    ctx.strokeStyle = this.props.kind === 'pickup' ? '#ffe17a' : '#8db7ff';
+    ctx.strokeStyle = isSensor ? '#ffe17a' : '#8db7ff';
     ctx.lineWidth = 2;
-    ctx.strokeRect(rect.x + 1, rect.y + 1, rect.width - 2, rect.height - 2);
+    if (geom.shape === 'circle') {
+      ctx.beginPath();
+      ctx.arc(geom.cx, geom.cy, geom.radius, 0, Math.PI * 2);
+      ctx.stroke();
+    } else {
+      ctx.strokeRect(geom.x + 1, geom.y + 1, geom.width - 2, geom.height - 2);
+    }
     ctx.restore();
   }
 
-  static Inspector({ component, setComponent, override }) {
+  static Inspector({ actor, component, sprites, setComponent, override }) {
+    const [dimOpen, setDimOpen] = useState(true);
+    const layout = actor?.components?.Layout ?? {};
+    const shape = component.shape ?? Collider.defaultProps.shape;
+    // Unset width/height/radius track the actor's Layout box; surface that
+    // effective value so a field never reads blank while the collider is sized.
+    const width = component.width ?? layout.width ?? 50;
+    const height = component.height ?? layout.height ?? 50;
+    const effectiveRadius = component.radius > 0 ? component.radius : Math.min(width, height) / 2;
+
+    // "Auto-fit to sprite": the explicit dims/offset that match the sprite's
+    // opaque-pixel bounds. Only offered when the collider isn't already fitted.
+    const autoFit = computeAutoFit(actor, sprites);
+    let autoFitPatch = null;
+    if (autoFit) {
+      autoFitPatch =
+        shape === 'circle'
+          ? { radius: Math.round(Math.min(autoFit.width, autoFit.height) / 2), offsetX: autoFit.offsetX, offsetY: autoFit.offsetY }
+          : { width: autoFit.width, height: autoFit.height, offsetX: autoFit.offsetX, offsetY: autoFit.offsetY };
+    }
+    const currentValue = (key) => {
+      if (key === 'radius') return effectiveRadius;
+      if (key === 'width') return width;
+      if (key === 'height') return height;
+      return component[key] ?? 0;
+    };
+    const alreadyFitted =
+      autoFitPatch && Object.entries(autoFitPatch).every(([key, value]) => Math.abs(currentValue(key) - value) < 0.6);
+
     return (
       <Panel title="Collider" overridden={override?.anyOverridden()}>
         <SelectField
-          label="Kind"
-          value={component.kind}
-          onChange={(kind) => setComponent({ kind: kind })}
-          options={['solid', 'pickup']}
-          {...overrideProps(override, 'kind')}
-        />
-        <SelectField
-          label="Mode"
-          value={component.mode}
-          onChange={(mode) => setComponent({ mode: mode })}
-          options={['auto', 'manual']}
-          {...overrideProps(override, 'mode')}
+          label="Shape"
+          value={component.shape}
+          onChange={(value) => setComponent({ shape: value })}
+          options={['box', 'circle']}
+          {...overrideProps(override, 'shape')}
         />
+        <div style={dimHeaderRowStyle}>
+          <span style={dimCaretStyle}>
+            <Icon name={dimOpen ? 'chevron-down' : 'chevron-right'} />
+          </span>
+          <button type="button" onClick={() => setDimOpen((open) => !open)} style={dimToggleStyle}>
+            Dimensions
+          </button>
+          {autoFitPatch && !alreadyFitted ? (
+            <button type="button" onClick={() => setComponent(autoFitPatch)} style={autoFitLinkStyle}>
+              Auto-fit to sprite
+            </button>
+          ) : null}
+        </div>
+        {dimOpen ? (
+          <div style={dimBodyStyle}>
+            {shape === 'circle' ? (
+              <NumberField
+                label="Radius"
+                value={effectiveRadius}
+                onChange={(value) => setComponent({ radius: value })}
+                {...overrideProps(override, 'radius')}
+              />
+            ) : (
+              <>
+                <NumberField
+                  label="Width"
+                  value={width}
+                  onChange={(value) => setComponent({ width: value })}
+                  {...overrideProps(override, 'width')}
+                />
+                <NumberField
+                  label="Height"
+                  value={height}
+                  onChange={(value) => setComponent({ height: value })}
+                  {...overrideProps(override, 'height')}
+                />
+              </>
+            )}
+            <AutoFields
+              defaultProps={Collider.defaultProps}
+              component={component}
+              setComponent={setComponent}
+              only={['offsetX', 'offsetY']}
+              override={override}
+            />
+          </div>
+        ) : null}
         <AutoFields
           defaultProps={Collider.defaultProps}
           component={component}
           setComponent={setComponent}
-          exclude={['kind', 'mode']}
+          exclude={['shape', 'width', 'height', 'radius', 'offsetX', 'offsetY']}
           override={override}
         />
       </Panel>
@@ -64,4 +210,4 @@ export class Collider {
 // scene (e.g. editors/SelectionOverlay.jsx, which passes the merged preview
 // actors plus the sprites map). See engine/collider.js for the single
 // implementation.
-export { getColliderRect, intersects };
+export { getColliderRect, getColliderShape, intersects };

package/kits/basic-2d/behaviors/Layout.jsx

@@ -8,6 +8,9 @@ export class Layout {
     rotation: 0,
     width: 50,
     height: 50,
+    // Show the Layout box (the invisible frame the sprite fills and the collider
+    // derives from) as a dashed outline, in editor and play. Per-actor toggle.
+    debug: false,
   };
 
   // Position/rotation/z never inherit from a blueprint: they're always written
@@ -16,6 +19,13 @@ export class Layout {
   // affects newly placed instances, never moves ones already placed. Because
   // they're always instance-local, they're also never surfaced as blueprint
   // "overrides" in the inspector. width/height default to inherited (absent).
+  //
+  // Size is width/height in card units -- the same space you compose in. A
+  // user-facing scaleX/scaleY (relative to the sprite's native pixels) was
+  // tried and reverted: it only pays off under pixel-perfect (integer scales),
+  // and in today's card-units model it just adds a conversion + couples Layout
+  // to the Sprite. Revisit scale fields when pixel-perfect mode lands. See
+  // ~/castle/cauldron-rendering-scale-model.md.
   static propertyMeta = {
     x: { inherit: false },
     y: { inherit: false },
@@ -26,4 +36,18 @@ export class Layout {
   constructor(props) {
     this.props = props;
   }
+
+  // Outline the Layout box when `debug` is on. Drawn in the actor's own rotated
+  // frame (so it rotates with the actor), with a distinct dashed lavender style
+  // so it reads separately from the solid collider debug and the selection box.
+  draw(actor, scene, ctx) {
+    if (!this.props.debug) return;
+    const { x, y, width, height } = this.props;
+    ctx.save();
+    ctx.strokeStyle = 'rgba(190, 178, 255, 0.75)';
+    ctx.setLineDash([4, 3]);
+    ctx.lineWidth = 1.5;
+    ctx.strokeRect(x + 0.5, y + 0.5, width - 1, height - 1);
+    ctx.restore();
+  }
 }

package/kits/basic-2d/editors/PlayOnly.jsx

@@ -5,20 +5,22 @@ import { useLiveDeckFiles } from '../engine/liveReload';
 import { collectAssets } from '../engine/assets';
 import { ScenePlayer } from '../engine/ScenePlayer';
 import { behaviorClasses } from './behaviorRegistry';
-// Play-mode entry point. Intentionally thin: it locates the start scene and
-// hands it to the engine's `ScenePlayer`, which owns the runtime and input.
-// Deck/game logic belongs in `scenes/` and `behaviors/`, not here.
-// Files are live: scene/drawing edits re-key the player against fresh data;
-// code changes reload this context (see engine/liveReload.js).
-export function PlayOnly() {
+// Play-mode entry point. Plays the scene named by `?scene=<path>` (the shell's
+// Play panel sets this), defaulting to `scenes/main.scene`. It renders ONLY the
+// game — the scene picker lives in the Play panel chrome (the shell), not here,
+// so nothing floats over the game surface and steals input. Files are live:
+// scene/drawing edits re-key the player against fresh data.
+const DEFAULT_SCENE = 'scenes/main.scene';
+
+export function PlayOnly({ initialScene } = {}) {
   const { files, dataVersion } = useLiveDeckFiles();
-  const sceneText = files['scenes/main.scene'] ?? '';
-  const { value: sceneData } = parseJsonFile('scenes/main.scene', sceneText);
+  const scenePath = initialScene && files[initialScene] !== undefined ? initialScene : DEFAULT_SCENE;
+  const { value: sceneData } = parseJsonFile(scenePath, files[scenePath] ?? '');
   if (!sceneData) return null;
   const { sprites } = collectAssets(files);
   return (
     <ScenePlayer
-      key={dataVersion}
+      key={`${scenePath}:${dataVersion}`}
       sceneData={sceneData}
       sprites={sprites}
       files={files}

package/kits/basic-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}