castle-web-cli 0.4.86 → 0.4.87

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/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) {

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Panel } from '../../engine/ui';
 import { AutoFields } from '../../engine/autoInspector';
-import { inActorWorldSpace, slingLaunch, slingPull } from '../controls';
+import { inActorWorldSpace, pressOnDraggable, slingLaunch, slingPull } from '../controls';
 
 // Slingshot: pull back and release to fling the actor the opposite way
 // (angry-birds style) -- the physics feel of castle-client's Sling. While
@@ -31,8 +31,14 @@ export class Slingshot {
     const pressed = p.down && !rt._slingWasDown;
     rt._slingWasDown = p.down;
 
+    // A press on a draggable is consumed by the drag; otherwise the sling grabs
+    // (anywhere, or on its own actor when grabAnywhere is off).
     const grabAnywhere = this.props.grabAnywhere ?? true;
-    if (pressed && (grabAnywhere || scene.actorAt(p.x, p.y)?.id === actor.id)) {
+    if (
+      pressed &&
+      !pressOnDraggable(scene) &&
+      (grabAnywhere || scene.actorAt(p.x, p.y)?.id === actor.id)
+    ) {
       rt._slinging = true;
       // Anchor at the press point (like castle-client): the aim/launch depends
       // on the drag gesture, not where the press landed relative to the actor.

package/kits/physics-2d/physics/controls.js

@@ -29,6 +29,20 @@ export function chaseVelocity(target, layout, props = {}) {
   return { x: (target.x - c.x) * stiffness, y: (target.y - c.y) * stiffness };
 }
 
+// --- Touch ownership -------------------------------------------------------
+// Hierarchy: a press that lands ON a Draggable object is CONSUMED by that drag,
+// so Slingshot/AnalogStick ignore it. A press anywhere else is shared -- both
+// Slingshot and AnalogStick act (no fair way to rank them). So the only gate the
+// non-drag controls need is this: did the current press land on a draggable?
+// Stateless -- a pure per-press query (the controls only ask on their press
+// edge), so there's no owner to latch and nothing to reset.
+export function pressOnDraggable(scene) {
+  const p = scene.pointer;
+  if (!p.down) return false;
+  const hit = scene.actorAt(p.x, p.y);
+  return !!hit && !!hit.components.Draggable;
+}
+
 // Run `draw(ctx)` in world space, undoing the actor's Layout rotation that the
 // runtime applies about the actor's center. Overlay controls (Slingshot,
 // AnalogStick) use this so their on-screen UI stays anchored where the user

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "castle-web-cli",
-  "version": "0.4.86",
+  "version": "0.4.87",
   "type": "module",
   "bin": {
     "castle-web": "./dist/index.js"