castle-web-cli 0.4.129 → 0.4.130

package/kits/physics-3d/engine3d/editor3dInspector.jsx

@@ -0,0 +1,404 @@
+// Inspector components for the 3d scene editor -- a direct port of the 2d
+// SceneEditor's (unexported) inspector internals, running against the shared
+// behavior registry, ui primitives, and blueprint helpers from the imported
+// physics-2d kit. Behavior classes may carry a custom `static Inspector`;
+// everything else renders through AutoInspector.
+import React, { useState } from 'react';
+import {
+  CheckboxField,
+  ColorField,
+  Icon,
+  NumberField,
+  Panel,
+  TextField,
+  styles,
+} from '@imports/castle.physics-2d/engine/ui';
+import { AutoInspector } from '@imports/castle.physics-2d/engine/autoInspector';
+import {
+  behaviorClasses,
+  findBehaviorClass,
+} from '@imports/castle.physics-2d/editors/behaviorRegistry';
+import {
+  countBlueprintInstances,
+  isInheritedProp,
+} from '@imports/castle.physics-2d/engine/blueprint';
+import { BlueprintThumbnail } from '@imports/castle.physics-2d/editors/BlueprintLibrary';
+
+// Only 3d-vocabulary behaviors belong in the add-behavior picker and panels --
+// the imported 2d kit's behaviors are also in the registry (Layout, Sprite,
+// Collider, ...), but attaching them to 3d actors does nothing.
+const HIDDEN_BEHAVIORS = new Set([
+  'Layout',
+  'Sprite',
+  'Collider',
+  'Camera',
+  'RigidBody',
+  'Joints',
+  'Draggable',
+  'Slingshot',
+  'AnalogStick',
+  'Goal',
+  'Sound',
+  'Tone',
+  'Video',
+]);
+
+export function editorBehaviors() {
+  return behaviorClasses.filter((Behavior) => !HIDDEN_BEHAVIORS.has(Behavior.behaviorName));
+}
+
+export function initialBehaviorProps(Behavior, actor, sprites) {
+  if (Behavior.initialProps && actor) return Behavior.initialProps(actor, { sprites });
+  return { ...Behavior.defaultProps };
+}
+
+function makeOverrideContext({ Behavior, rawComponent, templateProps, setComponent }) {
+  const baselineOf = (prop) =>
+    templateProps && prop in templateProps ? templateProps[prop] : Behavior?.defaultProps?.[prop];
+  return {
+    isOverridden: (prop) =>
+      isInheritedProp(Behavior, prop) && !!rawComponent && prop in rawComponent,
+    anyOverridden: () =>
+      !!rawComponent && Object.keys(rawComponent).some((prop) => isInheritedProp(Behavior, prop)),
+    baseline: baselineOf,
+    reset: (prop) => setComponent({ [prop]: baselineOf(prop) }),
+  };
+}
+
+export function SceneInspector3D({ sceneData, onChangeScene, onChangeGround }) {
+  const ground = sceneData.ground ?? {};
+  return (
+    <>
+      <Panel title="Scene">
+        <TextField
+          label="Name"
+          value={sceneData.name ?? ''}
+          onChange={(name) => onChangeScene({ name })}
+        />
+      </Panel>
+      <Panel title="Ground">
+        <TextField
+          label="Art"
+          value={ground.art ?? ''}
+          onChange={(art) => onChangeGround({ art })}
+        />
+        <NumberField
+          label="Tile Size"
+          value={ground.tile ?? 2}
+          min={0.5}
+          step={0.5}
+          onChange={(tile) => onChangeGround({ tile })}
+        />
+        <ColorField
+          label="Color"
+          value={ground.color ?? '#22222b'}
+          onChange={(color) => onChangeGround({ color })}
+        />
+      </Panel>
+    </>
+  );
+}
+
+export function MultiSelectInspector3D({ count, onDeselectAll }) {
+  return (
+    <div style={{ padding: '14px 16px', display: 'flex', flexDirection: 'column', gap: 12 }}>
+      <div style={{ fontSize: 13, opacity: 0.8 }}>
+        {count} actor{count === 1 ? '' : 's'} selected
+      </div>
+      <div style={{ display: 'flex', gap: 8 }}>
+        <button
+          type="button"
+          onClick={onDeselectAll}
+          style={{
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: 6,
+            padding: '6px 10px',
+            background: 'transparent',
+            color: 'inherit',
+            border: '1px solid var(--castle-inspector-divider)',
+            borderRadius: 6,
+            cursor: 'pointer',
+            fontSize: 13,
+          }}>
+          <Icon name="times" /> Deselect all
+        </button>
+      </div>
+    </div>
+  );
+}
+
+// Sidebar inspector for a hotbar-selected blueprint: badge + name header, then
+// the template's components through ActorInspector3D as a synthetic actor.
+export function BlueprintInspector3D({ name, template, sprites, blueprintPath, files, actions }) {
+  const templateActor = { id: '__blueprint__', components: template.components };
+  const instanceCount = countBlueprintInstances(files, blueprintPath);
+  return (
+    <>
+      <div className={styles.instanceHeader}>
+        <div className={styles.instanceHeaderName}>
+          <BlueprintThumbnail blueprint={template} sprites={sprites} />
+          <div className={styles.instanceHeaderNameCol}>
+            <input
+              className={styles.blueprintNameInput}
+              value={name}
+              onChange={(event) => actions.rename(event.target.value)}
+              aria-label="Blueprint name"
+              spellCheck={false}
+            />
+            <span className={styles.instanceHeaderId}>
+              {instanceCount} {instanceCount === 1 ? 'actor' : 'actors'}
+            </span>
+          </div>
+        </div>
+      </div>
+      <ActorInspector3D
+        selectedActor={templateActor}
+        rawActor={templateActor}
+        sprites={sprites}
+        files={files}
+        onSetComponent={(actorId, behaviorName, nextProps) =>
+          actions.setComponent(behaviorName, nextProps)
+        }
+        onAddBehavior={(actorId, behaviorName) => actions.addBehavior(behaviorName)}
+        onRemoveBehavior={(actorId, behaviorName) => actions.removeBehavior(behaviorName)}
+      />
+    </>
+  );
+}
+
+export function ActorInspector3D({
+  selectedActor,
+  rawActor,
+  blueprintName,
+  blueprintTemplate,
+  sprites,
+  files,
+  showAddBehavior = true,
+  onSetComponent,
+  onAddBehavior,
+  onRemoveBehavior,
+  onEditBlueprint,
+}) {
+  const isInstance = Boolean(rawActor?.blueprint);
+  const presentNames = new Set(
+    Object.entries(selectedActor.components)
+      .filter(([, component]) => !!component)
+      .map(([behaviorName]) => behaviorName)
+  );
+  const availableBehaviors = editorBehaviors().filter(
+    (candidate) => !presentNames.has(candidate.behaviorName)
+  );
+  // 2d-vocabulary components are hidden from the panels too -- a 3d blueprint
+  // may carry a `Sprite` purely as its hotbar thumbnail icon.
+  const PANEL_ORDER = ['Transform', 'Model', 'Shape', 'Body', 'Solid'];
+  const panelRank = (name) => {
+    const index = PANEL_ORDER.indexOf(name);
+    return index === -1 ? PANEL_ORDER.length : index;
+  };
+  const behaviorEntries = Object.entries(selectedActor.components)
+    .filter(([behaviorName, component]) => !!component && !HIDDEN_BEHAVIORS.has(behaviorName))
+    .sort(([a], [b]) => panelRank(a) - panelRank(b) || a.localeCompare(b));
+  // For an instance, behaviors it doesn't already override are collapsed
+  // behind a reveal button; Transform and overridden behaviors stay visible.
+  const [showAllBehaviors, setShowAllBehaviors] = useState(false);
+  const isPinnedBehavior = (behaviorName) =>
+    behaviorName === 'Transform' || Boolean(rawActor?.components?.[behaviorName]);
+  const collapsed = isInstance && !showAllBehaviors;
+  const visibleEntries = collapsed
+    ? behaviorEntries.filter(([behaviorName]) => isPinnedBehavior(behaviorName))
+    : behaviorEntries;
+  const showReveal = collapsed && visibleEntries.length < behaviorEntries.length;
+  return (
+    <>
+      {isInstance ? (
+        <InstanceHeader
+          selectedActor={selectedActor}
+          blueprintName={blueprintName}
+          blueprintTemplate={blueprintTemplate}
+          sprites={sprites}
+          onEditBlueprint={onEditBlueprint}
+        />
+      ) : null}
+      {showAddBehavior ? (
+        <AddBehaviorPicker
+          available={availableBehaviors}
+          onAdd={(behaviorName) => onAddBehavior(selectedActor.id, behaviorName)}
+        />
+      ) : null}
+      {visibleEntries.map(([behaviorName, component], index) => (
+        <BehaviorPanel
+          key={behaviorName}
+          behaviorName={behaviorName}
+          component={component}
+          selectedActor={selectedActor}
+          rawActor={rawActor}
+          blueprintTemplate={blueprintTemplate}
+          isInstance={isInstance}
+          sprites={sprites}
+          files={files}
+          isLast={index === visibleEntries.length - 1 && !showReveal}
+          onSetComponent={onSetComponent}
+          onRemoveBehavior={onRemoveBehavior}
+        />
+      ))}
+      {showReveal ? (
+        <button
+          type="button"
+          className={styles.revealOverridesButton}
+          onClick={() => setShowAllBehaviors(true)}>
+          <Icon name="chevron-down" />
+          <span>Override behavior properties</span>
+        </button>
+      ) : null}
+    </>
+  );
+}
+
+function InstanceHeader({
+  selectedActor,
+  blueprintName,
+  blueprintTemplate,
+  sprites,
+  onEditBlueprint,
+}) {
+  return (
+    <div className={styles.instanceHeader}>
+      <div className={styles.instanceHeaderName}>
+        <BlueprintThumbnail
+          blueprint={blueprintTemplate ?? { components: selectedActor.components }}
+          sprites={sprites}
+        />
+        <div className={styles.instanceHeaderNameCol}>
+          <span className={styles.instanceHeaderNameText}>
+            <strong className={styles.instanceHeaderNameStrong}>{blueprintName}</strong> Actor
+          </span>
+          <span className={styles.instanceHeaderId}>id: {selectedActor.id}</span>
+        </div>
+      </div>
+      {onEditBlueprint ? (
+        <button
+          type="button"
+          className={styles.instanceForkButton}
+          onClick={onEditBlueprint}
+          title="Select this blueprint in the hotbar">
+          <Icon name="pencil" />
+          <span>Edit blueprint</span>
+        </button>
+      ) : null}
+    </div>
+  );
+}
+
+function BehaviorPanel({
+  behaviorName,
+  component,
+  selectedActor,
+  rawActor,
+  blueprintTemplate,
+  isInstance,
+  sprites,
+  files,
+  isLast,
+  onSetComponent,
+  onRemoveBehavior,
+}) {
+  const Behavior = findBehaviorClass(behaviorName);
+  const Inspector = Behavior?.Inspector;
+  const setComponent = (nextProps) => onSetComponent(selectedActor.id, behaviorName, nextProps);
+  const override = isInstance
+    ? makeOverrideContext({
+        Behavior,
+        rawComponent: rawActor?.components?.[behaviorName],
+        templateProps: blueprintTemplate?.components?.[behaviorName],
+        setComponent,
+      })
+    : null;
+  const body = Inspector ? (
+    <Panel title={behaviorName} overridden={override?.anyOverridden()}>
+      <Inspector
+        actor={selectedActor}
+        component={component}
+        files={files}
+        sprites={sprites}
+        setComponent={setComponent}
+        override={override}
+      />
+    </Panel>
+  ) : (
+    <AutoInspector
+      behaviorName={behaviorName}
+      defaultProps={Behavior?.defaultProps ?? component}
+      component={component}
+      setComponent={setComponent}
+      override={override}
+    />
+  );
+  // Transform is core to every actor; a component an instance only has via
+  // its blueprint has nothing to remove either.
+  const removable =
+    behaviorName !== 'Transform' && (!isInstance || Boolean(rawActor.components?.[behaviorName]));
+  return (
+    <div
+      style={{
+        position: 'relative',
+        borderBottom: isLast ? undefined : '1px solid var(--castle-inspector-divider)',
+      }}>
+      {removable ? (
+        <button
+          type="button"
+          aria-label={`Remove ${behaviorName}`}
+          title={`Remove ${behaviorName}`}
+          onClick={() => onRemoveBehavior(selectedActor.id, behaviorName)}
+          style={{
+            position: 'absolute',
+            top: 14,
+            right: 16,
+            border: 'none',
+            background: 'transparent',
+            padding: 0,
+            margin: 0,
+            cursor: 'pointer',
+            color: 'inherit',
+            fontSize: 16,
+            lineHeight: 1,
+          }}>
+          <Icon name="trash" />
+        </button>
+      ) : null}
+      {body}
+    </div>
+  );
+}
+
+function AddBehaviorPicker({ available, onAdd }) {
+  if (!available.length) return null;
+  return (
+    <div
+      style={{
+        height: 'var(--castle-hotbar-row-full)',
+        padding: '0 16px',
+        display: 'flex',
+        alignItems: 'center',
+        borderBottom: '1px solid var(--castle-inspector-divider)',
+      }}>
+      <select
+        className={styles.select}
+        value=""
+        onChange={(event) => {
+          if (event.target.value) onAdd(event.target.value);
+        }}>
+        <option value="">+ Add behavior</option>
+        {available.map((behavior) => (
+          <option key={behavior.behaviorName} value={behavior.behaviorName}>
+            {behavior.behaviorName}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}
+
+// Unused import keepalive: CheckboxField is part of the field set custom
+// behavior inspectors reach for; re-export so they can import from one place.
+export { CheckboxField };

package/kits/physics-3d/engine3d/editorChrome.jsx

@@ -0,0 +1,218 @@
+// Chrome shared by the kit's editors (scene + model): the debounced file
+// saver, the stage canvas, the undo/redo + mode/action button overlays, and
+// the common keyboard shortcuts. One place so the editors stay in the same
+// design system by construction.
+import React, { forwardRef, useEffect, useRef } from 'react';
+import { onBeforeRestart, writeFile } from 'castle-web-sdk';
+import { Button, Icon, IconButton } from '@imports/castle.physics-2d/engine/ui';
+
+// Custom glyphs for concepts the kit's icon set doesn't cover, drawn to match
+// its filled-silhouette look (512 viewbox, currentColor fill).
+const CUSTOM_GLYPHS = {
+  cylinder: 'M96 116 a160 60 0 0 1 320 0 V396 a160 60 0 0 1 -320 0 Z',
+  capsule: 'M256 32 a128 128 0 0 1 128 128 v192 a128 128 0 0 1 -256 0 V160 A128 128 0 0 1 256 32 Z',
+  face: 'M256 72 L456 256 L256 440 L56 256 Z',
+  vertices:
+    'M128 112 a56 56 0 1 0 0.1 0 Z M384 112 a56 56 0 1 0 0.1 0 Z M256 344 a56 56 0 1 0 0.1 0 Z',
+  extrude: 'M256 24 L368 136 H296 V232 H216 V136 H144 Z M96 288 H416 V456 H96 Z',
+};
+
+function CustomIcon({ glyph }) {
+  const path = CUSTOM_GLYPHS[glyph];
+  if (!path) return null;
+  return (
+    <svg
+      viewBox="0 0 512 512"
+      aria-hidden="true"
+      style={{ width: '1em', height: '1em', display: 'inline-block', fill: 'currentColor' }}>
+      <path d={path} fillRule="evenodd" />
+    </svg>
+  );
+}
+
+// Files-panel-style hotbar button: icon + name, never wrapping. `icon` names
+// the kit's icon set; `glyph` picks a custom one above.
+export function HotbarButton({ icon, glyph, label, ...props }) {
+  return (
+    <Button {...props}>
+      <span
+        style={{
+          display: 'inline-flex',
+          alignItems: 'center',
+          gap: 7,
+          whiteSpace: 'nowrap',
+        }}>
+        {glyph ? <CustomIcon glyph={glyph} /> : icon ? <Icon name={icon} /> : null}
+        <span>{label}</span>
+      </span>
+    </Button>
+  );
+}
+
+// Stage tool buttons run a bit bigger than the default IconButton.
+export const TOOL_BUTTON_STYLE = { width: 40, height: 40, fontSize: 17 };
+
+const UNDO_STYLE = {
+  position: 'absolute',
+  left: 10,
+  top: 10,
+  display: 'flex',
+  flexDirection: 'row',
+  gap: 6,
+  zIndex: 5,
+};
+const MODE_STYLE = {
+  position: 'absolute',
+  right: 8,
+  top: 10,
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 4,
+  zIndex: 5,
+};
+
+// Debounced per-path writeFile, flushed before a reload -- the same save
+// behavior as the imported kit's SingleEditor.
+export function useFileSaver3D() {
+  const pending = useRef({});
+  const timers = useRef({});
+  function schedule(path, text) {
+    pending.current[path] = text;
+    if (timers.current[path]) window.clearTimeout(timers.current[path]);
+    timers.current[path] = window.setTimeout(() => {
+      delete timers.current[path];
+      const value = pending.current[path];
+      delete pending.current[path];
+      void writeFile(path, value).catch((error) => console.error(`save failed: ${error}`));
+    }, 500);
+  }
+  useEffect(
+    () =>
+      onBeforeRestart(async () => {
+        for (const timer of Object.values(timers.current)) window.clearTimeout(timer);
+        timers.current = {};
+        const writes = Object.entries(pending.current);
+        pending.current = {};
+        await Promise.all(writes.map(([path, value]) => writeFile(path, value)));
+      }),
+    []
+  );
+  return { schedule, hasPending: (path) => pending.current[path] !== undefined };
+}
+
+export function isEditableTarget(target) {
+  return (
+    target?.tagName === 'INPUT' ||
+    target?.tagName === 'TEXTAREA' ||
+    target?.tagName === 'SELECT' ||
+    target?.getAttribute?.('contenteditable') === 'true'
+  );
+}
+
+// The editors' shared keys: cmd+z / cmd+shift+z undo/redo, cmd+d duplicate,
+// delete/backspace remove, 1/2/3 pick select/move/rotate, escape deselects.
+// Handlers are read through a latest-ref so callers can pass fresh closures.
+export function useEditorShortcuts(handlers) {
+  const latest = useRef(null);
+  latest.current = handlers;
+  useEffect(() => {
+    const onKeyDown = (event) => {
+      if (isEditableTarget(event.target)) return;
+      const h = latest.current;
+      const meta = event.metaKey || event.ctrlKey;
+      if (meta && event.key.toLowerCase() === 'z') {
+        event.preventDefault();
+        if (event.shiftKey) h.history.redo();
+        else h.history.undo();
+      } else if (meta && event.key.toLowerCase() === 'd') {
+        event.preventDefault();
+        h.onDuplicate?.();
+      } else if (event.key === 'Backspace' || event.key === 'Delete') {
+        h.onDelete?.();
+      } else if (event.key === '1') h.setMode('select');
+      else if (event.key === '2') h.setMode('move');
+      else if (event.key === '3') h.setMode('rotate');
+      else if (event.key === 'Escape') h.onEscape?.();
+    };
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, []);
+}
+
+export const StageCanvas = forwardRef(function StageCanvas(props, ref) {
+  return (
+    <canvas
+      ref={ref}
+      tabIndex={-1}
+      style={{
+        position: 'absolute',
+        inset: 0,
+        width: '100%',
+        height: '100%',
+        display: 'block',
+        outline: 'none',
+        touchAction: 'none',
+      }}
+      onPointerDown={(event) => event.currentTarget.focus({ preventScroll: true })}
+      {...props}
+    />
+  );
+});
+
+// Undo/redo top-left; select/move/rotate (plus duplicate/delete when handlers
+// are given) down the right edge.
+export function StageControls({ history, mode, setMode, onDuplicate, onDelete, actionsDisabled }) {
+  const modeButton = (value, icon, label) => (
+    <IconButton
+      icon={icon}
+      label={label}
+      active={mode === value}
+      style={TOOL_BUTTON_STYLE}
+      onClick={() => setMode(value)}
+    />
+  );
+  return (
+    <>
+      <div style={UNDO_STYLE}>
+        <IconButton
+          icon="undo"
+          label="Undo"
+          style={TOOL_BUTTON_STYLE}
+          onClick={history.undo}
+          disabled={!history.canUndo}
+        />
+        <IconButton
+          icon="redo"
+          label="Redo"
+          style={TOOL_BUTTON_STYLE}
+          onClick={history.redo}
+          disabled={!history.canRedo}
+        />
+      </div>
+      <div style={MODE_STYLE}>
+        {modeButton('select', 'marquee', 'Select (1)')}
+        {modeButton('move', 'move', 'Move (2)')}
+        {modeButton('rotate', 'rotate', 'Rotate (3)')}
+        {onDuplicate || onDelete ? <div style={{ height: 8 }} /> : null}
+        {onDuplicate ? (
+          <IconButton
+            icon="clone"
+            label="Duplicate"
+            style={TOOL_BUTTON_STYLE}
+            disabled={actionsDisabled}
+            onClick={onDuplicate}
+          />
+        ) : null}
+        {onDelete ? (
+          <IconButton
+            icon="trash"
+            label="Delete"
+            style={TOOL_BUTTON_STYLE}
+            disabled={actionsDisabled}
+            onClick={onDelete}
+          />
+        ) : null}
+      </div>
+    </>
+  );
+}