feat(materials): add campaign materials overlay for sessions

Let GMs manage and show images over the scene from the editor and control panel, with zoom tools, help docs, and full ru/en i18n. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-07-17 11:05:38 +08:00
parent 195d4be086
commit 61875be857
39 changed files with 2521 additions and 22 deletions
@@ -0,0 +1,153 @@
+import React, { useCallback, useEffect, useState } from 'react';
+
+import { ipcChannels, type SessionState } from '../../shared/ipc/contracts';
+import type { MaterialId } from '../../shared/types';
+import { MaterialsBrowser } from '../editor/MaterialsBrowser';
+import matStyles from '../editor/MaterialsModals.module.css';
+import { useEditorI18n } from '../editor/i18n/EditorI18nContext';
+import { getDndApi } from '../shared/dndApi';
+import { useMaterialsOverlayState } from '../shared/materials/useMaterialsOverlayState';
+import { Button } from '../shared/ui/controls';
+
+import styles from './MaterialsApp.module.css';
+
+function ZoomInIcon() {
+  return (
+    <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden>
+      <circle cx="10.5" cy="10.5" r="6.25" fill="none" stroke="currentColor" strokeWidth="1.8" />
+      <path d="M15.2 15.2 20 20" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
+      <path
+        d="M10.5 7.8v5.4M7.8 10.5h5.4"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.8"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+function ZoomOutIcon() {
+  return (
+    <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden>
+      <circle cx="10.5" cy="10.5" r="6.25" fill="none" stroke="currentColor" strokeWidth="1.8" />
+      <path d="M15.2 15.2 20 20" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
+      <path d="M7.8 10.5h5.4" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+export function MaterialsApp() {
+  const { t } = useEditorI18n();
+  const api = getDndApi();
+  const [session, setSession] = useState<SessionState | null>(null);
+  const [overlay, overlayApi] = useMaterialsOverlayState();
+  const [selectedId, setSelectedId] = useState<MaterialId | null>(null);
+  const onSelect = useCallback((id: MaterialId | null) => setSelectedId(id), []);
+
+  useEffect(() => {
+    void api.invoke(ipcChannels.project.get, {}).then(({ project }) => {
+      setSession({ project, currentSceneId: project?.currentSceneId ?? null });
+      const mats = project?.materials ?? [];
+      setSelectedId(mats[0]?.id ?? null);
+    });
+    return api.on(ipcChannels.session.stateChanged, ({ state }) => {
+      setSession(state);
+    });
+  }, [api]);
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        if (overlay?.activeMaterialId) {
+          void overlayApi.dispatch({ kind: 'hide' });
+          return;
+        }
+        if (overlay?.zoomTool) {
+          void overlayApi.dispatch({ kind: 'zoomTool.set', tool: null });
+          return;
+        }
+        window.close();
+      }
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [overlay?.activeMaterialId, overlay?.zoomTool, overlayApi]);
+
+  const materials = session?.project?.materials ?? [];
+  const activeId = overlay?.activeMaterialId ?? null;
+  const zoomTool = overlay?.zoomTool ?? null;
+
+  return (
+    <div className={styles.page}>
+      <MaterialsBrowser
+        mode="runtime"
+        fillHeight
+        listOnly
+        className={styles.browser}
+        materials={materials}
+        selectedId={selectedId}
+        onSelect={onSelect}
+        activeMaterialId={activeId}
+        onTileActivate={(id) => {
+          void overlayApi.dispatch({ kind: 'toggle', materialId: id });
+        }}
+        toolbar={
+          <>
+            <div className={matStyles.browserToolbarRow}>
+              <Button
+                variant={zoomTool === 'zoomIn' ? 'primary' : 'ghost'}
+                iconOnly
+                title={t('materials.zoomIn')}
+                ariaLabel={t('materials.zoomIn')}
+                tooltipPlacement="bottom"
+                onClick={() => {
+                  void overlayApi.dispatch({
+                    kind: 'zoomTool.set',
+                    tool: zoomTool === 'zoomIn' ? null : 'zoomIn',
+                  });
+                }}
+              >
+                <ZoomInIcon />
+              </Button>
+              <Button
+                variant={zoomTool === 'zoomOut' ? 'primary' : 'ghost'}
+                iconOnly
+                title={t('materials.zoomOut')}
+                ariaLabel={t('materials.zoomOut')}
+                tooltipPlacement="bottom"
+                onClick={() => {
+                  void overlayApi.dispatch({
+                    kind: 'zoomTool.set',
+                    tool: zoomTool === 'zoomOut' ? null : 'zoomOut',
+                  });
+                }}
+              >
+                <ZoomOutIcon />
+              </Button>
+            </div>
+            {activeId ? (
+              <Button
+                title={t('materials.closeOverlay')}
+                ariaLabel={t('materials.closeOverlay')}
+                tooltipPlacement="bottom"
+                onClick={() => {
+                  void overlayApi.dispatch({ kind: 'hide' });
+                }}
+              >
+                {t('materials.closeOverlay')}
+              </Button>
+            ) : null}
+            <div className={matStyles.browserToolbarHint}>
+              {zoomTool === 'zoomIn'
+                ? t('materials.zoomInHint')
+                : zoomTool === 'zoomOut'
+                  ? t('materials.zoomOutHint')
+                  : t('materials.zoomIdleHint')}
+            </div>
+          </>
+        }
+      />
+    </div>
+  );
+}