@volter/editor-threejs 0.5.66 → 0.5.68

package/src/kit/components/ViewportViewMenu.tsx

@@ -0,0 +1,155 @@
+import { faCamera, faCaretDown, faEllipsisVertical } from '@fortawesome/free-solid-svg-icons';
+import {
+  Button,
+  EditorIcon,
+  EditorPopover,
+  IconButton,
+  Inline,
+  Stack,
+  Text,
+  Tooltip,
+} from '@volter/editor-sdk/widgets';
+import { useEffect, useRef, useState, useSyncExternalStore } from 'react';
+import type { ShellStore } from '@volter/editor-sdk/kit/shell-store';
+import {
+  setThreeViewportProjection,
+  subscribeThreeViewportPresentation,
+  threeViewportPresentation,
+} from '@volter/editor-sdk/kit/three-viewport-presentation';
+import {
+  object3DDocumentSession,
+  object3DDocumentSessionsVersion,
+  subscribeObject3DDocumentSessions,
+} from '../authoring/object3d-document-session-registry';
+
+const NO_SESSION_SUBSCRIBE = () => () => {};
+const ZERO = () => 0;
+
+/** The standard Scene-view camera menu: projection and axis views in one
+ * place. These are editor-camera choices only. */
+/** The stage's projection + axis-view presets. `shell` is the STAGE's own
+ *  store's shell, so a preset drives the stage the control is mounted over
+ *  (ARCHITECTURE-CORE §One stage unit 4).
+ *
+ *  A DOCUMENT STAGE IS PAINTED BY ITS SESSION (`Object3DDocumentSession.camera()`), and the
+ *  editor-wide projection (`setThreeViewportProjection`) reaches only the world root's stage
+ *  (`world-root-stage.ts` is its one subscriber): over a document the Perspective and
+ *  Orthographic buttons changed nothing, the defect `ViewportFurniture`'s projection toggle
+ *  records. With `documentId` naming a stage that has a session, the menu drives that session,
+ *  as the document toolbar's view menu does; the world root keeps the editor-wide value.
+ *
+ *  `label` draws the trigger as the view's NAME (the look's `stage.chrome.viewName`: Godot's
+ *  "⋮ Perspective", Unreal's "Perspective" pill) instead of the camera icon; `kebab` puts
+ *  Godot's three dots before it. */
+export function ViewportViewMenu({
+  shell,
+  documentId,
+  label,
+  kebab = false,
+}: {
+  readonly shell: Pick<ShellStore, 'setViewPreset'>;
+  readonly documentId?: string;
+  readonly label?: string;
+  readonly kebab?: boolean;
+}) {
+  const state = useSyncExternalStore(
+    subscribeThreeViewportPresentation,
+    threeViewportPresentation,
+    threeViewportPresentation,
+  );
+  useSyncExternalStore(subscribeObject3DDocumentSessions, object3DDocumentSessionsVersion);
+  const session = documentId ? object3DDocumentSession(documentId) : null;
+  useSyncExternalStore(session?.subscribe ?? NO_SESSION_SUBSCRIBE, session?.getSnapshot ?? ZERO, session?.getSnapshot ?? ZERO);
+  const projection = session ? session.projection() : state.projection;
+  const setProjection = (next: 'perspective' | 'orthographic'): void => {
+    if (session) session.setProjection(next);
+    else setThreeViewportProjection(next);
+  };
+  const [open, setOpen] = useState(false);
+  const anchor = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (!open) return;
+    const close = (event: MouseEvent) => {
+      if (!anchor.current?.contains(event.target as Node)) setOpen(false);
+    };
+    document.addEventListener('mousedown', close);
+    return () => document.removeEventListener('mousedown', close);
+  }, [open]);
+
+  const preset = (view: 'top' | 'front' | 'right'): void => {
+    if (session) {
+      session.setViewPreset(view, 'view');
+      return;
+    }
+    setThreeViewportProjection('orthographic');
+    shell.setViewPreset(view);
+  };
+
+  return (
+    <div ref={anchor} className="vgai-viewport-popover-anchor">
+      {label === undefined ? (
+        <Tooltip text={projection === 'perspective' ? 'Perspective' : 'Orthographic'}>
+          <IconButton
+            aria-label="Viewport views"
+            aria-expanded={open}
+            size="comfortable"
+            onClick={() => setOpen((value) => !value)}
+          >
+            <EditorIcon icon={open ? faCaretDown : faCamera} size="md" />
+          </IconButton>
+        </Tooltip>
+      ) : (
+        <Button
+          size="comfortable"
+          variant="ghost"
+          aria-label="Viewport views"
+          aria-expanded={open}
+          data-testid="viewport-view-name"
+          onClick={() => setOpen((value) => !value)}
+        >
+          {kebab ? <EditorIcon icon={faEllipsisVertical} size="sm" /> : null}
+          {label}
+        </Button>
+      )}
+      {open ? (
+        <EditorPopover style={{ minWidth: 230 }}>
+          <Stack gap={3}>
+            <Text variant="caption" tone="muted">
+              Projection
+            </Text>
+            <Inline gap={1}>
+              <Button
+                size="compact"
+                variant={projection === 'perspective' ? 'primary' : 'ghost'}
+                onClick={() => setProjection('perspective')}
+              >
+                Perspective
+              </Button>
+              <Button
+                size="compact"
+                variant={projection === 'orthographic' ? 'primary' : 'ghost'}
+                onClick={() => setProjection('orthographic')}
+              >
+                Orthographic
+              </Button>
+            </Inline>
+            <Text variant="caption" tone="muted">
+              Axis View
+            </Text>
+            <Inline gap={1}>
+              <Button size="compact" variant="ghost" onClick={() => preset('top')}>
+                Top
+              </Button>
+              <Button size="compact" variant="ghost" onClick={() => preset('front')}>
+                Front
+              </Button>
+              <Button size="compact" variant="ghost" onClick={() => preset('right')}>
+                Right
+              </Button>
+            </Inline>
+          </Stack>
+        </EditorPopover>
+      ) : null}
+    </div>
+  );
+}

package/src/kit/components/asset-viewers/EntityModelDocument.tsx

@@ -0,0 +1,121 @@
+import { threeStateOf } from '../../three-state';
+import { themeVars } from '@volter/editor-sdk/widgets';
+import { liveMixerFor } from '@volter/editor-threejs/animation/live-mixers';
+import { useCallback, useSyncExternalStore } from 'react';
+import type * as THREE from 'three';
+import {
+  assetPreviewSubject,
+  createAssetPreviewSnapshot,
+  disposeAssetPreviewSnapshot,
+} from '../../asset-preview';
+import { useEditorStore } from '@volter/editor-sdk/kit/editor-runtime';
+import { Object3DDocumentViewport } from '../StageHost';
+
+function entityClips(source: THREE.Object3D): THREE.AnimationClip[] {
+  const discovered = new Set<THREE.AnimationClip>();
+  source.traverse((object) => {
+    const live = liveMixerFor(object);
+    if (live) for (const clip of live.clips.values()) discovered.add(clip);
+    for (const clip of object.animations) discovered.add(clip);
+  });
+  return [...discovered];
+}
+
+/**
+ * Isolated native projection of a live `Object3D`; the source graph is never
+ * reparented (`createAssetPreviewSnapshot` copies it).
+ *
+ * The object comes in already resolved, so this component has no way to fail
+ * for a thing that is on screen — it is the honest shared body of both the
+ * Asset Lab's entity document ({@link EntityModelDocument}, which resolves the
+ * scene entity and owns the "no longer available" case) and the inspector's
+ * preview section (`components/InspectorObjectPreview.tsx`), whose subject the
+ * composer has already proved previewable.
+ */
+export function Object3DSnapshotDocument({
+  documentId,
+  source,
+  sourcePath,
+  displayName,
+  active,
+  chromeless = false,
+  revision = 0,
+  modelSource,
+}: {
+  readonly documentId: string;
+  readonly source: THREE.Object3D;
+  /** Human-readable provenance line for the viewport's own chrome. */
+  readonly sourcePath?: string;
+  readonly displayName: string;
+  readonly active: boolean;
+  readonly chromeless?: boolean;
+  /** Bump to rebuild the snapshot when the source graph mutated in place. */
+  readonly revision?: number;
+  readonly modelSource?: { readonly kind: 'entity'; readonly entityId: string };
+}) {
+  const build = useCallback(() => {
+    // The mesh under the click, or the skeleton root that owns its bones.
+    const root = createAssetPreviewSnapshot(assetPreviewSubject(source));
+    const animations = entityClips(source);
+    root.animations = [...animations];
+    return {
+      root,
+      animations,
+      dispose() {
+        disposeAssetPreviewSnapshot(root);
+      },
+    };
+  }, [source, revision]);
+  return (
+    <Object3DDocumentViewport
+      documentId={documentId}
+      sourcePath={sourcePath ?? displayName}
+      displayName={displayName}
+      build={build}
+      active={active}
+      chromeless={chromeless}
+      // The chromeless host is the inspector's preview, which remounts on
+      // every selection — it draws through the shared renderer instead of
+      // building one per click (`inspector-preview-renderer.ts`). A full
+      // document lives as long as its panel and keeps its own.
+      rendererLane={chromeless ? 'inspector-preview' : 'own'}
+      assetType="entity"
+      {...(modelSource ? { modelSource } : {})}
+    />
+  );
+}
+
+/** The Asset Lab document for one live scene entity. */
+export function EntityModelDocument({
+  documentId,
+  entityId,
+  displayName,
+  active,
+}: {
+  readonly documentId: string;
+  readonly entityId: string;
+  readonly displayName: string;
+  readonly active: boolean;
+}) {
+  const store = threeStateOf(useEditorStore());
+  const storeVersion = useSyncExternalStore(store.shell.subscribe, store.shell.getSnapshot);
+  const source = store.objectMap.get(entityId);
+
+  if (!source)
+    return (
+      <div role="alert" style={{ padding: 20, color: themeVars.semantic.danger }}>
+        Scene entity {entityId} is no longer available.
+      </div>
+    );
+  return (
+    <Object3DSnapshotDocument
+      documentId={documentId}
+      source={source}
+      sourcePath={`Entity ${entityId}`}
+      displayName={displayName}
+      active={active}
+      revision={storeVersion}
+      modelSource={{ kind: 'entity', entityId }}
+    />
+  );
+}