castle-web-cli 0.4.177 → 0.4.179

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

@@ -0,0 +1,90 @@
+import { TAP_CLAIM } from './physics/controls';
+
+// Built-in tap. Any enabled behavior may implement `onTap(actor, scene)`; the
+// actor is then a tap target with no extra component. Fires on release inside
+// the hit zone (Collider when present, else the axis-aligned Layout box).
+// Screen-space Text uses screen coords so a HUD label hits where it draws.
+//
+// Claims at TAP_CLAIM: beats a greedy control (stick, grab-anywhere sling) so
+// the finger isn't also those, and yields to a targeted control (Draggable, a
+// sling pressed on its own body) that claims later the same frame.
+
+export function updateTaps(scene) {
+  for (const actor of scene.actors.values()) {
+    const id = actor.runtime?._tapPointerId;
+    if (id == null) continue;
+    const held = scene.pointers.get(id);
+    if (held?.down) {
+      if (!scene.ownsPointer(id, actor.id)) clearTap(actor);
+      else actor.runtime._tapInside = hits(actor, scene, held);
+      continue;
+    }
+    const stillOwned = held ? scene.ownsPointer(id, actor.id) : true;
+    const inside = held ? hits(actor, scene, held) : Boolean(actor.runtime._tapInside);
+    if (stillOwned && inside && hasOnTap(scene, actor)) fireTap(scene, actor);
+    clearTap(actor);
+  }
+
+  for (const pointer of scene.pointers.values()) {
+    if (!pointer.justPressed) continue;
+    const actor = topTapActor(scene, pointer);
+    if (!actor) continue;
+    if (!scene.claimPointer(pointer.id, actor.id, TAP_CLAIM)) continue;
+    actor.runtime._tapPointerId = pointer.id;
+    actor.runtime._tapInside = true;
+    // A click that ends before the next frame is justPressed with down:false.
+    if (!pointer.down) {
+      if (scene.ownsPointer(pointer.id, actor.id)) fireTap(scene, actor);
+      clearTap(actor);
+    }
+  }
+}
+
+function fireTap(scene, actor) {
+  scene.forEachBehavior(actor, (inst) => inst.onTap?.(actor, scene));
+}
+
+function clearTap(actor) {
+  actor.runtime._tapPointerId = null;
+  actor.runtime._tapInside = false;
+}
+
+function hasOnTap(scene, actor) {
+  for (const [name, props] of Object.entries(actor.components ?? {})) {
+    if (!props || props.$enabled === false) continue;
+    const Behavior = scene.behaviors.get(name);
+    if (typeof Behavior?.prototype?.onTap === 'function') return true;
+  }
+  return false;
+}
+
+function topTapActor(scene, pointer) {
+  let best = null;
+  let bestZ = -Infinity;
+  for (const actor of scene.actors.values()) {
+    if (!hasOnTap(scene, actor)) continue;
+    const z = actor.components?.Layout?.z ?? 0;
+    if (z < bestZ) continue;
+    if (!hits(actor, scene, pointer)) continue;
+    best = actor;
+    bestZ = z;
+  }
+  return best;
+}
+
+function pointerCoords(actor, pointer) {
+  if (actor.components?.Text?.space === 'screen') {
+    return { x: pointer.screenX, y: pointer.screenY };
+  }
+  return { x: pointer.x, y: pointer.y };
+}
+
+function hits(actor, scene, pointer) {
+  const { x, y } = pointerCoords(actor, pointer);
+  if (actor.components?.Collider && scene.physics?.containsPoint) {
+    return scene.physics.containsPoint(actor, x, y);
+  }
+  const layout = actor.components?.Layout;
+  if (!layout) return false;
+  return x >= layout.x && x <= layout.x + layout.width && y >= layout.y && y <= layout.y + layout.height;
+}

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

@@ -0,0 +1,94 @@
+// Canvas text layout helpers shared by the Text behavior and editor chrome.
+// Pure: no imports. Callers set `ctx.font` before wrapText / pass size+font into
+// drawTextBlock.
+
+// Greedy word-wrap against the ctx's current font. Paragraphs split on `\n`
+// (after normalizing `\r\n`); an empty paragraph yields an empty line. A single
+// word wider than maxWidth stays on its own line and overflows.
+export function wrapText(ctx, text, maxWidth) {
+  const source = String(text ?? '').replace(/\r\n/g, '\n');
+  const paragraphs = source.split('\n');
+  const lines = [];
+  for (const paragraph of paragraphs) {
+    if (!paragraph) {
+      lines.push('');
+      continue;
+    }
+    const words = paragraph.split(/\s+/);
+    let line = '';
+    for (const word of words) {
+      if (!word) continue;
+      const next = line ? `${line} ${word}` : word;
+      if (line && ctx.measureText(next).width > maxWidth) {
+        lines.push(line);
+        line = word;
+      } else {
+        line = next;
+      }
+    }
+    lines.push(line);
+  }
+  return lines;
+}
+
+const ALIGN_X = { left: 0, center: 0.5, right: 1 };
+const ALIGN_Y = { top: 0, middle: 0.5, bottom: 1 };
+
+// Draw wrapped, aligned text into a box. No vertical clipping — lines that
+// overrun the box still paint (OG Text parity). Returns the laid-out lines
+// and the resolved line height in card units.
+export function drawTextBlock(
+  ctx,
+  {
+    x,
+    y,
+    width,
+    height,
+    text,
+    size = 24,
+    font = 'sans-serif',
+    color = '#131313',
+    align = 'left',
+    verticalAlign = 'top',
+    padding = 0,
+    lineHeight = 1.25,
+    outlineWidth = 0,
+    outlineColor = '#ffffff',
+  }
+) {
+  const pad = Math.max(0, Number(padding) || 0);
+  const innerW = Math.max(0, width - pad * 2);
+  const innerH = Math.max(0, height - pad * 2);
+  const fontSize = Number.isFinite(size) ? size : 24;
+  const lineH = fontSize * (Number.isFinite(lineHeight) ? lineHeight : 1.25);
+
+  ctx.save();
+  ctx.font = `${fontSize}px ${font}`;
+  ctx.textAlign = align === 'center' || align === 'right' ? align : 'left';
+  ctx.textBaseline = 'middle';
+
+  const lines = wrapText(ctx, text, innerW);
+  const blockH = lines.length * lineH;
+  const yFactor = ALIGN_Y[verticalAlign] ?? 0;
+  const blockTop = y + pad + (innerH - blockH) * yFactor;
+  const xFactor = ALIGN_X[align] ?? 0;
+  const anchorX = x + pad + innerW * xFactor;
+
+  const stroke = Number(outlineWidth) > 0 && Boolean(outlineColor);
+  const fill = Boolean(color);
+  if (stroke) {
+    ctx.lineWidth = outlineWidth;
+    ctx.strokeStyle = outlineColor;
+    ctx.lineJoin = 'round';
+    ctx.miterLimit = 2;
+  }
+  if (fill) ctx.fillStyle = color;
+
+  for (let i = 0; i < lines.length; i++) {
+    const ly = blockTop + lineH * (i + 0.5);
+    if (stroke) ctx.strokeText(lines[i], anchorX, ly);
+    if (fill) ctx.fillText(lines[i], anchorX, ly);
+  }
+  ctx.restore();
+  return { lines, lineHeight: lineH };
+}

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

@@ -419,6 +419,26 @@ export function TextField({ label, value, onChange, overridden, defaultValue, on
     </FieldRow>
   );
 }
+export function TextAreaField({
+  label,
+  value,
+  onChange,
+  rows = 3,
+  overridden,
+  defaultValue,
+  onReset,
+}) {
+  return (
+    <FieldRow label={label} overridden={overridden} defaultValue={defaultValue} onReset={onReset}>
+      <textarea
+        className={styles.textarea}
+        rows={rows}
+        value={value ?? ''}
+        onChange={(event) => onChange(event.target.value)}
+      />
+    </FieldRow>
+  );
+}
 function numberText(v) {
   return Number.isFinite(v) ? String(v) : '0';
 }

package/kits/physics-2d/engine/ui.module.css

@@ -1773,6 +1773,7 @@
 
 .fieldRowOverridden .input,
 .fieldRowOverridden .select,
+.fieldRowOverridden .textarea,
 .fieldRowOverridden .colorInput,
 .fieldRowOverridden .checkbox {
   border-color: var(--castle-override-border);
@@ -1883,6 +1884,13 @@
   color: var(--castle-inspector-muted);
 }
 
+/* PaletteColorField: swatch + hex in the closed chrome. */
+.paletteColorField {
+  gap: 8px;
+  padding-left: 6px;
+  min-height: 32px;
+}
+
 /* SpriteField: closed chrome carries a tiny thumb beside the basename so you
    can see which art is selected without opening the picker. */
 .spriteField {
@@ -2326,8 +2334,8 @@
 
 .textarea {
   min-height: 0;
-  resize: none;
-  font-family: var(--castle-font-mono);
+  resize: vertical;
+  font-family: inherit;
   font-size: 14px;
   line-height: 1.45;
 }

package/kits/physics-3d/castle.json

@@ -36,7 +36,8 @@
         "new": "New scene",
         "icon": "globe",
         "editor": "kit",
-        "data": true
+        "data": true,
+        "width": 650
       },
       {
         "ext": ".pxmodel",
@@ -44,7 +45,8 @@
         "new": "New model",
         "icon": "cube-transparent",
         "editor": "kit",
-        "data": true
+        "data": true,
+        "width": 480
       },
       {
         "ext": ".jsx",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "castle-web-cli",
-  "version": "0.4.177",
+  "version": "0.4.179",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/castle-xyz/castle-experimental-web.git"