castle-web-cli 0.4.74 → 0.4.76

package/kits/basic-3d/behaviors/Mesh.jsx

@@ -1,82 +0,0 @@
-import React from 'react';
-import * as THREE from 'three';
-import { Panel, SelectField } from '../engine/ui';
-import { AutoFields } from '../engine/autoInspector';
-import {
-  applyStandardMaterial,
-  buildGeometry,
-  buildStandardMaterial,
-  geometryKinds,
-  renderTarget,
-  replaceGroupChild,
-} from '../engine/threeUtil';
-
-// A single primitive mesh: sized geometry + a standard PBR material. For
-// multi-part shapes use a Model behavior pointing at a `.model` file instead.
-export class Mesh {
-  static behaviorName = 'Mesh';
-
-  static defaultProps = {
-    geometry: 'box',
-    width: 1,
-    height: 1,
-    depth: 1,
-    color: '#8db7ffff',
-    roughness: 0.8,
-    metalness: 0,
-    emissive: '#00000000',
-    opacity: 1,
-    castShadow: true,
-    receiveShadow: true,
-  };
-
-  constructor(props) {
-    this.props = props;
-  }
-
-  sync(actor, scene) {
-    const target = renderTarget(actor, scene);
-    if (!target) return;
-    const { group, cache } = target;
-    const geometryKey = JSON.stringify([
-      this.props.geometry,
-      this.props.width,
-      this.props.height,
-      this.props.depth,
-    ]);
-    if (!cache._mesh || cache._meshGeometryKey !== geometryKey) {
-      const geometry = buildGeometry(
-        this.props.geometry,
-        this.props.width,
-        this.props.height,
-        this.props.depth
-      );
-      const mesh = new THREE.Mesh(geometry, buildStandardMaterial(this.props));
-      cache._mesh = replaceGroupChild(group, cache._mesh, mesh);
-      cache._meshGeometryKey = geometryKey;
-    }
-    // Material props are cheap to apply in place every frame.
-    applyStandardMaterial(cache._mesh.material, this.props);
-    cache._mesh.castShadow = !!this.props.castShadow;
-    cache._mesh.receiveShadow = !!this.props.receiveShadow;
-  }
-
-  static Inspector({ component, setComponent }) {
-    return (
-      <Panel title="Mesh">
-        <SelectField
-          label="Geometry"
-          value={component.geometry}
-          onChange={(geometry) => setComponent({ geometry })}
-          options={geometryKinds}
-        />
-        <AutoFields
-          defaultProps={Mesh.defaultProps}
-          component={component}
-          setComponent={setComponent}
-          exclude={['geometry']}
-        />
-      </Panel>
-    );
-  }
-}

package/kits/basic-3d/behaviors/Model.jsx

@@ -1,61 +0,0 @@
-import React from 'react';
-import { Panel, SelectField } from '../engine/ui';
-import { AutoFields } from '../engine/autoInspector';
-import { buildModelGroup, renderTarget, replaceGroupChild } from '../engine/threeUtil';
-
-// Renders a `.model` file (a list of primitive parts -- the 3d analog of the
-// 2d kit's `.drawing`) scaled by the actor's Transform. `tint` multiplies
-// every part color; white or omitted keeps the original colors.
-export class Model {
-  static behaviorName = 'Model';
-
-  static defaultProps = {
-    file: 'models/block.model',
-    tint: '#ffffffff',
-  };
-
-  constructor(props) {
-    this.props = props;
-  }
-
-  sync(actor, scene) {
-    const target = renderTarget(actor, scene);
-    if (!target) return;
-    const { group, cache } = target;
-    const modelData = scene.models[this.props.file];
-    if (!modelData) {
-      if (cache._model) {
-        cache._model = replaceGroupChild(group, cache._model, null);
-        cache._modelKey = null;
-      }
-      return;
-    }
-    // Model files are parsed once per text change (a fresh object identity),
-    // so identity + tint is a sufficient rebuild key.
-    if (cache._modelData !== modelData || cache._modelTint !== this.props.tint) {
-      cache._model = replaceGroupChild(group, cache._model, buildModelGroup(modelData, this.props.tint));
-      cache._modelData = modelData;
-      cache._modelTint = this.props.tint;
-    }
-  }
-
-  static Inspector({ component, setComponent, files }) {
-    const modelFiles = Object.keys(files).filter((path) => path.endsWith('.model'));
-    return (
-      <Panel title="Model">
-        <SelectField
-          label="File"
-          value={component.file}
-          onChange={(file) => setComponent({ file })}
-          options={modelFiles}
-        />
-        <AutoFields
-          defaultProps={Model.defaultProps}
-          component={component}
-          setComponent={setComponent}
-          only={['tint']}
-        />
-      </Panel>
-    );
-  }
-}

package/kits/basic-3d/behaviors/Transform.jsx

@@ -1,35 +0,0 @@
-import { degreesToRadians } from '../engine/threeUtil';
-
-// Position / rotation / scale of the actor's group in world units. `x`/`y`/`z`
-// is the actor's CENTER; rotations are degrees; the ground plane is XZ, +Y up.
-export class Transform {
-  static behaviorName = 'Transform';
-
-  static defaultProps = {
-    x: 0,
-    y: 0,
-    z: 0,
-    rotationX: 0,
-    rotationY: 0,
-    rotationZ: 0,
-    scaleX: 1,
-    scaleY: 1,
-    scaleZ: 1,
-  };
-
-  constructor(props) {
-    this.props = props;
-  }
-
-  sync(actor, scene) {
-    const group = scene.actorGroup(actor);
-    if (!group) return;
-    group.position.set(this.props.x, this.props.y, this.props.z);
-    group.rotation.set(
-      degreesToRadians(this.props.rotationX),
-      degreesToRadians(this.props.rotationY),
-      degreesToRadians(this.props.rotationZ)
-    );
-    group.scale.set(this.props.scaleX || 1, this.props.scaleY || 1, this.props.scaleZ || 1);
-  }
-}

package/kits/basic-3d/editors/App.jsx

@@ -1,147 +0,0 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { writeFile } from 'castle-web-sdk';
-import {
-  flatFileOrder,
-  formatJson,
-  getFileKind,
-  initialFiles,
-  parseModels,
-} from '../engine/files';
-import { AppShell, cx, MainEditor, styles } from '../engine/ui';
-import { CodeEditor } from './CodeEditor';
-import { ModelEditor } from './ModelEditor';
-import { FileBrowser } from './FileBrowser';
-import { SceneEditor } from './SceneEditor';
-export function App() {
-  const [files, setFiles] = useState(initialFiles);
-  const [selectedPath, setSelectedPath] = useState('scenes/main.scene');
-  const [filesSheetOpen, setFilesSheetOpen] = useState(false);
-  const [selectedActorIds, setSelectedActorIds] = useState([]);
-  const [multiSelectMode, setMultiSelectMode] = useState(false);
-  const saveTimersRef = useRef({});
-  const saveVersionsRef = useRef({});
-  const models = useMemo(() => parseModels(files), [files]);
-  function updateSelectedFile(nextText) {
-    const path = selectedPath;
-    setFiles((current) => ({
-      ...current,
-      [path]: nextText,
-    }));
-    scheduleFileWrite(path, nextText);
-  }
-  function scheduleFileWrite(path, nextText) {
-    const version = (saveVersionsRef.current[path] ?? 0) + 1;
-    saveVersionsRef.current[path] = version;
-    const existingTimer = saveTimersRef.current[path];
-    if (existingTimer) window.clearTimeout(existingTimer);
-    saveTimersRef.current[path] = window.setTimeout(() => {
-      delete saveTimersRef.current[path];
-      writeFile(path, nextText).catch((error) => {
-        if (saveVersionsRef.current[path] !== version) return;
-        const message = error instanceof Error ? error.message : String(error);
-        console.error(`Failed to save ${path}: ${message}`);
-      });
-    }, 1500);
-  }
-  const kind = getFileKind(selectedPath);
-  const text = files[selectedPath] ?? '';
-  function selectFile(path) {
-    setSelectedPath(path);
-    setFilesSheetOpen(false);
-    setSelectedActorIds([]);
-    setMultiSelectMode(false);
-  }
-  const onToggleFiles = () => {
-    setFilesSheetOpen((previous) => !previous);
-    setSelectedActorIds([]);
-    setMultiSelectMode(false);
-  };
-  // Alt+Up / Alt+Down steps through files in file-browser sidebar order.
-  useEffect(() => {
-    function onKeyDown(event) {
-      if (!event.altKey || event.metaKey || event.ctrlKey) return;
-      if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown') return;
-      const active = document.activeElement;
-      if (
-        active &&
-        (active.tagName === 'INPUT' ||
-          active.tagName === 'TEXTAREA' ||
-          active.tagName === 'SELECT' ||
-          active.isContentEditable ||
-          active.closest('.cm-editor'))
-      ) {
-        return;
-      }
-      const order = flatFileOrder(Object.keys(files));
-      const index = order.indexOf(selectedPath);
-      if (index === -1) return;
-      const nextIndex = event.key === 'ArrowUp' ? index - 1 : index + 1;
-      if (nextIndex < 0 || nextIndex >= order.length) return;
-      event.preventDefault();
-      selectFile(order[nextIndex]);
-    }
-    window.addEventListener('keydown', onKeyDown);
-    return () => window.removeEventListener('keydown', onKeyDown);
-  }, [files, selectedPath]);
-  return (
-    <AppShell>
-      <FileBrowser
-        files={files}
-        selectedPath={selectedPath}
-        onSelect={selectFile}
-        sheetOpen={filesSheetOpen}
-        onSheetOpenChange={setFilesSheetOpen}
-      />
-      {filesSheetOpen ? (
-        <div
-          className={cx(styles.sheetBackdrop, styles.mobileOnly)}
-          onClick={() => setFilesSheetOpen(false)}
-        />
-      ) : null}
-      <MainEditor>
-        {kind === 'scene' ? (
-          <SceneEditor
-            path={selectedPath}
-            text={text}
-            files={files}
-            models={models}
-            onChange={updateSelectedFile}
-            onToggleFiles={onToggleFiles}
-            filesOpen={filesSheetOpen}
-            selectedActorIds={selectedActorIds}
-            onSelectActorIds={setSelectedActorIds}
-            multiSelectMode={multiSelectMode}
-            onSetMultiSelectMode={setMultiSelectMode}
-          />
-        ) : null}
-        {kind === 'model' ? (
-          <ModelEditor
-            path={selectedPath}
-            text={text}
-            onChange={updateSelectedFile}
-            onToggleFiles={onToggleFiles}
-            filesOpen={filesSheetOpen}
-          />
-        ) : null}
-        {kind === 'code' ? (
-          <CodeEditor
-            path={selectedPath}
-            text={text}
-            onChange={updateSelectedFile}
-            onToggleFiles={onToggleFiles}
-            filesOpen={filesSheetOpen}
-          />
-        ) : null}
-        {kind === 'text' ? (
-          <CodeEditor
-            path={selectedPath}
-            text={formatJson(text)}
-            onChange={updateSelectedFile}
-            onToggleFiles={onToggleFiles}
-            filesOpen={filesSheetOpen}
-          />
-        ) : null}
-      </MainEditor>
-    </AppShell>
-  );
-}

package/kits/basic-3d/editors/CodeEditor.jsx

@@ -1,112 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import { javascript } from '@codemirror/lang-javascript';
-import { HighlightStyle, indentUnit, syntaxHighlighting } from '@codemirror/language';
-import { EditorState } from '@codemirror/state';
-import { EditorView } from '@codemirror/view';
-import { tags } from '@lezer/highlight';
-import { basicSetup } from 'codemirror';
-import { basename } from '../engine/files';
-import { EditorBody, EditorHeader, styles } from '../engine/ui';
-const castleHighlightStyle = HighlightStyle.define([
-  { tag: tags.strong, color: '#285CC4' },
-  { tag: tags.namespace, color: '#BB7547' },
-  { tag: tags.keyword, color: '#BC4A9B' },
-  { tag: [tags.literal, tags.inserted], color: '#5DAF8D' },
-  { tag: [tags.string, tags.deleted], color: '#E86A73' },
-  { tag: tags.comment, color: '#8B93AF', fontStyle: 'italic' },
-]);
-const castleCodeTheme = EditorView.theme({
-  '&': {
-    height: '100%',
-    fontSize: '9pt',
-    backgroundColor: '#fff',
-  },
-  '&.cm-editor.cm-focused': {
-    outline: 'none',
-  },
-  '.cm-scroller': {
-    overflow: 'auto',
-    fontFamily: 'Menlo, Monaco, Lucida Console, monospace',
-  },
-  '.cm-content': {
-    minHeight: '100%',
-    color: '#322b28',
-    paddingBottom: '400px',
-    paddingRight: '80px',
-  },
-  '.cm-gutters': {
-    display: 'none',
-  },
-  '.cm-activeLine': {
-    backgroundColor: '#eeeeeea0',
-  },
-  '.cm-activeLineGutter': {
-    color: '#000',
-    backgroundColor: '#ddd',
-  },
-});
-export function CodeEditor({ path, text, onChange, onToggleFiles, filesOpen }) {
-  const editorRef = useRef(null);
-  const viewRef = useRef(null);
-  const onChangeRef = useRef(onChange);
-  const initialTextRef = useRef(text);
-  const applyingExternalTextRef = useRef(false);
-  useEffect(() => {
-    onChangeRef.current = onChange;
-  }, [onChange]);
-  // The editor is created once per `path`; the initial doc comes from a ref
-  // so `text` is not a dep of this effect (subsequent `text` updates flow
-  // through the second effect below). On `path` change we read whatever the
-  // latest `text` is at the moment of mount.
-  initialTextRef.current = text;
-  useEffect(() => {
-    if (!editorRef.current) return undefined;
-    const view = new EditorView({
-      parent: editorRef.current,
-      state: EditorState.create({
-        doc: initialTextRef.current,
-        extensions: [
-          basicSetup,
-          javascript({ jsx: true, typescript: true }),
-          indentUnit.of('  '),
-          castleCodeTheme,
-          syntaxHighlighting(castleHighlightStyle),
-          EditorView.updateListener.of((update) => {
-            if (!update.docChanged || applyingExternalTextRef.current) return;
-            onChangeRef.current(update.state.doc.toString());
-          }),
-        ],
-      }),
-    });
-    viewRef.current = view;
-    return () => {
-      view.destroy();
-      viewRef.current = null;
-    };
-  }, [path]);
-  useEffect(() => {
-    const view = viewRef.current;
-    if (!view) return;
-    const currentText = view.state.doc.toString();
-    if (currentText === text) return;
-    applyingExternalTextRef.current = true;
-    view.dispatch({
-      changes: {
-        from: 0,
-        to: currentText.length,
-        insert: text,
-      },
-    });
-    applyingExternalTextRef.current = false;
-  }, [text]);
-  return (
-    <>
-      <EditorHeader title={basename(path)} onToggleFiles={onToggleFiles} filesOpen={filesOpen} />
-      <EditorBody>
-        <div className={styles.codeEditor}>
-          <div ref={editorRef} className={styles.codeMirrorHost} />
-        </div>
-      </EditorBody>
-    </>
-  );
-}

package/kits/basic-3d/editors/FileBrowser.jsx

@@ -1,143 +0,0 @@
-import React, { useState } from 'react';
-import { basename } from '../engine/files';
-import { cx, Icon, SheetGrabHandle, styles, useMobileSheet } from '../engine/ui';
-export function FileBrowser({
-  files,
-  selectedPath,
-  onSelect,
-  sheetOpen = false,
-  onSheetOpenChange,
-}) {
-  const tree = buildFileTree(Object.keys(files));
-  const [expanded, setExpanded] = useState(() => new Set(collectDirectoryPaths(tree)));
-  const sheet = useMobileSheet({
-    snap: sheetOpen ? 'high' : 'hidden',
-    baseClassName: styles.fileBrowser,
-    onTransition: (direction) => {
-      if (direction !== 'up') onSheetOpenChange?.(false);
-    },
-  });
-  function toggle(path) {
-    setExpanded((current) => {
-      const next = new Set(current);
-      if (next.has(path)) next.delete(path);
-      else next.add(path);
-      return next;
-    });
-  }
-  return (
-    <aside {...sheet.rootProps}>
-      <div {...sheet.grabProps}>
-        <SheetGrabHandle label="Files" hint={basename(selectedPath)} />
-      </div>
-      <div className={styles.fileBrowserHeader}>
-        <div>
-          <div className={styles.fileBrowserTitle}>Deck Files</div>
-        </div>
-      </div>
-      <div className={styles.fileTree}>
-        {tree.children.map((node) => (
-          <FileNode
-            key={node.path}
-            node={node}
-            depth={0}
-            expanded={expanded}
-            selectedPath={selectedPath}
-            onSelect={onSelect}
-            onToggle={toggle}
-          />
-        ))}
-      </div>
-    </aside>
-  );
-}
-function FileNode({ node, depth, expanded, selectedPath, onSelect, onToggle }) {
-  const depthStyle = { '--file-depth': depth };
-  if (node.type === 'directory') {
-    const isExpanded = expanded.has(node.path);
-    return (
-      <div className={styles.fileBranch}>
-        <button
-          className={styles.fileDirRow}
-          style={depthStyle}
-          onClick={() => onToggle(node.path)}>
-          <span className={styles.fileDisclosure}>
-            <Icon name={isExpanded ? 'chevron-down' : 'chevron-right'} />
-          </span>
-          <span>{node.name}</span>
-        </button>
-        {isExpanded ? (
-          <div>
-            {node.children.map((child) => (
-              <FileNode
-                key={child.path}
-                node={child}
-                depth={depth + 1}
-                expanded={expanded}
-                selectedPath={selectedPath}
-                onSelect={onSelect}
-                onToggle={onToggle}
-              />
-            ))}
-          </div>
-        ) : null}
-      </div>
-    );
-  }
-  // File rows nest under their directory header: extra left padding so
-  // file text sits to the right of the parent directory header.
-  const fileRowStyle = {
-    ...depthStyle,
-    paddingLeft: `calc(9px + ${depth} * 16px + 7px)`,
-  };
-  return (
-    <button
-      className={cx(styles.fileRow, selectedPath === node.path && styles.fileRowSelected)}
-      style={fileRowStyle}
-      onClick={() => onSelect(node.path)}>
-      <span>{basename(node.path)}</span>
-    </button>
-  );
-}
-function buildFileTree(paths) {
-  const root = {
-    type: 'directory',
-    name: '',
-    path: '',
-    children: [],
-    childMap: new Map(),
-  };
-  for (const path of paths) {
-    const parts = path.split('/');
-    let parent = root;
-    for (let index = 0; index < parts.length; index++) {
-      const name = parts[index];
-      const nodePath = parts.slice(0, index + 1).join('/');
-      const isFile = index === parts.length - 1;
-      if (!parent.childMap?.has(name)) {
-        const node = isFile
-          ? { type: 'file', name, path: nodePath }
-          : { type: 'directory', name, path: nodePath, children: [], childMap: new Map() };
-        parent.childMap?.set(name, node);
-        parent.children.push(node);
-      }
-      const child = parent.childMap?.get(name);
-      if (!child || child.type !== 'directory') break;
-      parent = child;
-    }
-  }
-  pruneChildMaps(root);
-  return root;
-}
-function pruneChildMaps(node) {
-  if (node.type !== 'directory') return;
-  for (const child of node.children) pruneChildMaps(child);
-  delete node.childMap;
-}
-function collectDirectoryPaths(node) {
-  if (node.type !== 'directory') return [];
-  return [
-    ...(node.path ? [node.path] : []),
-    ...node.children.flatMap((child) => collectDirectoryPaths(child)),
-  ];
-}