@vgai/editor 0.2.0 → 0.4.0-canary.20260715.0

package/src/components/asset-viewers/MaterialAssetEditor.tsx

@@ -0,0 +1,540 @@
+import { resolveUrl } from '@engine/loader';
+import { createMaterial } from '@engine/scene/material-factory';
+import {
+  Button,
+  Checkbox,
+  ColorSwatchInput,
+  Select,
+  TextInput,
+  themeVars,
+} from '../../design-system';
+import '@engine/scene/materials';
+import {
+  type MaterialFile,
+  MaterialFileSchema,
+  type SceneMaterial,
+} from '@engine/scene/schema/material';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import * as THREE from 'three';
+import {
+  registerWorkspaceDocumentSaveHandler,
+  setWorkspaceDocumentDirty,
+} from '../../workspace-document-registry';
+import { subscribeProjectAsset, writeProjectAsset } from '../asset-editor-persistence';
+import { AssetValidationError } from './InputMapViewer';
+
+export function validateMaterialForEditor(
+  json: unknown,
+): { ok: true; data: MaterialFile } | { ok: false; issues: string[] } {
+  const result = MaterialFileSchema.safeParse(json);
+  if (result.success) return { ok: true, data: result.data };
+  return {
+    ok: false,
+    issues: result.error.issues.map(
+      (issue) => `${issue.path.join('.') || '(root)'}: ${issue.message}`,
+    ),
+  };
+}
+
+export interface MaterialEditorDraft {
+  readonly raw: string;
+  readonly file: MaterialFile | null;
+  readonly issues: string[];
+}
+
+export function parseMaterialEditorDraft(raw: string): MaterialEditorDraft {
+  let result: ReturnType<typeof validateMaterialForEditor>;
+  try {
+    result = validateMaterialForEditor(JSON.parse(raw));
+  } catch (reason) {
+    return {
+      raw,
+      file: null,
+      issues: [`Invalid JSON: ${reason instanceof Error ? reason.message : String(reason)}`],
+    };
+  }
+  return result.ok
+    ? { raw, file: result.data, issues: [] }
+    : { raw, file: null, issues: result.issues };
+}
+
+function validateMaterialText(
+  raw: string,
+): { ok: true; data: MaterialFile } | { ok: false; issues: string[] } {
+  const draft = parseMaterialEditorDraft(raw);
+  return draft.file ? { ok: true, data: draft.file } : { ok: false, issues: draft.issues };
+}
+
+export function materialEditorDraftFromFile(file: MaterialFile): MaterialEditorDraft {
+  const result = validateMaterialForEditor(file);
+  return {
+    raw: JSON.stringify(file, null, 2),
+    file,
+    issues: result.ok ? [] : result.issues,
+  };
+}
+
+function Field({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <label
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 3,
+        fontSize: 11,
+        color: themeVars.content.muted,
+      }}
+    >
+      {label}
+      {children}
+    </label>
+  );
+}
+
+/** The actual engine material factory rendered on a Three.js sphere. This is
+ * the same descriptor-to-material path used by editor scenes and Play. */
+function MaterialRuntimePreview({ material }: { material: SceneMaterial }) {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const meshRef = useRef<THREE.Mesh | null>(null);
+  const materialRef = useRef<THREE.Material | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    let renderer: THREE.WebGLRenderer;
+    try {
+      renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+    } catch (reason) {
+      setError(reason instanceof Error ? reason.message : String(reason));
+      return;
+    }
+    renderer.outputColorSpace = THREE.SRGBColorSpace;
+    renderer.toneMapping = THREE.ACESFilmicToneMapping;
+    renderer.toneMappingExposure = 1;
+    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+    container.appendChild(renderer.domElement);
+
+    const scene = new THREE.Scene();
+    scene.background = new THREE.Color(0x202226);
+    scene.add(new THREE.HemisphereLight(0xffffff, 0x30343a, 1.4));
+    const key = new THREE.DirectionalLight(0xffffff, 3);
+    key.position.set(3, 4, 5);
+    scene.add(key);
+    const rim = new THREE.DirectionalLight(0x8fb8ff, 1.5);
+    rim.position.set(-4, 1, -3);
+    scene.add(rim);
+
+    const geometry = new THREE.SphereGeometry(1, 64, 32);
+    const initialMaterial = new THREE.MeshStandardMaterial({ color: 0x808080 });
+    const mesh = new THREE.Mesh(geometry, initialMaterial);
+    materialRef.current = initialMaterial;
+    meshRef.current = mesh;
+    scene.add(mesh);
+    const camera = new THREE.PerspectiveCamera(34, 1, 0.1, 20);
+    camera.position.set(0, 0, 4.4);
+
+    const resize = () => {
+      const width = Math.max(1, container.clientWidth);
+      const height = Math.max(1, container.clientHeight);
+      renderer.setSize(width, height, false);
+      camera.aspect = width / height;
+      camera.updateProjectionMatrix();
+    };
+    resize();
+    const resizeObserver = new ResizeObserver(resize);
+    resizeObserver.observe(container);
+
+    let raf = 0;
+    const render = () => {
+      raf = requestAnimationFrame(render);
+      mesh.rotation.y += 0.003;
+      renderer.render(scene, camera);
+    };
+    render();
+    return () => {
+      cancelAnimationFrame(raf);
+      resizeObserver.disconnect();
+      meshRef.current = null;
+      materialRef.current?.dispose();
+      materialRef.current = null;
+      geometry.dispose();
+      renderer.dispose();
+      renderer.forceContextLoss();
+      renderer.domElement.remove();
+    };
+  }, []);
+
+  useEffect(() => {
+    const mesh = meshRef.current;
+    if (!mesh) return;
+    try {
+      const next = createMaterial(material);
+      const previous = materialRef.current;
+      mesh.material = next;
+      materialRef.current = next;
+      previous?.dispose();
+      setError(null);
+    } catch (reason) {
+      setError(reason instanceof Error ? reason.message : String(reason));
+    }
+  }, [material]);
+
+  return (
+    <div
+      ref={containerRef}
+      data-testid="material-asset-preview"
+      style={{
+        position: 'relative',
+        width: '100%',
+        minHeight: 280,
+        aspectRatio: '1',
+        overflow: 'hidden',
+        borderRadius: themeVars.shape.medium,
+        background: themeVars.surface.inset,
+      }}
+    >
+      {error && (
+        <div
+          data-testid="material-preview-error"
+          style={{
+            position: 'absolute',
+            inset: 'auto 8px 8px',
+            color: themeVars.semantic.danger,
+            fontSize: 10,
+          }}
+        >
+          Runtime preview: {error}
+        </div>
+      )}
+    </div>
+  );
+}
+
+async function saveMaterialAsset(
+  assetPath: string,
+  fileName: string,
+  raw: string,
+): Promise<MaterialFile> {
+  const result = validateMaterialText(raw);
+  if (!result.ok) throw new Error(result.issues.join('\n'));
+  const ok = await writeProjectAsset(assetPath, `${JSON.stringify(result.data, null, 2)}\n`, {
+    label: `Edit ${fileName}`,
+    kind: 'material',
+  });
+  if (!ok) throw new Error('The project history rejected the material write.');
+  return result.data;
+}
+
+// biome-ignore lint/complexity/noExcessiveCognitiveComplexity: one document coordinates schema load, synchronized JSON/form drafts, runtime preview, and persistence.
+export function MaterialAssetEditor({
+  assetPath,
+  documentId,
+}: {
+  assetPath: string;
+  documentId: string;
+}) {
+  const [draft, setDraft] = useState<MaterialEditorDraft>(() => parseMaterialEditorDraft(''));
+  const [loading, setLoading] = useState(true);
+  const [loadIssues, setLoadIssues] = useState<string[] | null>(null);
+  const [saveError, setSaveError] = useState<string | null>(null);
+  const [saved, setSaved] = useState(false);
+  const [revision, setRevision] = useState(0);
+  const fileName = assetPath.split('/').pop() ?? assetPath;
+
+  useEffect(
+    () => subscribeProjectAsset(assetPath, () => setRevision((value) => value + 1)),
+    [assetPath],
+  );
+
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    setLoadIssues(null);
+    fetch(resolveUrl(assetPath), { cache: 'no-store' })
+      .then((response) => {
+        if (!response.ok) throw new Error(`HTTP ${response.status}`);
+        return response.text();
+      })
+      .then((content) => {
+        if (cancelled) return;
+        const result = validateMaterialText(content);
+        setDraft(
+          result.ok ? materialEditorDraftFromFile(result.data) : parseMaterialEditorDraft(content),
+        );
+        setWorkspaceDocumentDirty(documentId, false);
+      })
+      .catch((reason) => {
+        if (!cancelled) setLoadIssues([reason instanceof Error ? reason.message : String(reason)]);
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [assetPath, documentId, revision]);
+
+  const changeFile = useCallback(
+    (next: MaterialFile) => {
+      setDraft(materialEditorDraftFromFile(next));
+      setSaved(false);
+      setSaveError(null);
+      setWorkspaceDocumentDirty(documentId, true);
+    },
+    [documentId],
+  );
+
+  const save = useCallback(async (): Promise<boolean> => {
+    setSaved(false);
+    setSaveError(null);
+    try {
+      const savedFile = await saveMaterialAsset(assetPath, fileName, draft.raw);
+      setDraft(materialEditorDraftFromFile(savedFile));
+      setWorkspaceDocumentDirty(documentId, false);
+      setSaved(true);
+      return true;
+    } catch (reason) {
+      setSaveError(reason instanceof Error ? reason.message : String(reason));
+      return false;
+    }
+  }, [assetPath, documentId, draft.raw, fileName]);
+
+  useEffect(() => registerWorkspaceDocumentSaveHandler(documentId, save), [documentId, save]);
+
+  const setRawDirty = (value: string) => {
+    // A valid JSON edit immediately becomes the form's draft. Invalid JSON
+    // disables the form rather than leaving a stale object that could erase it.
+    setDraft(parseMaterialEditorDraft(value));
+    setSaved(false);
+    setSaveError(null);
+    setWorkspaceDocumentDirty(documentId, true);
+  };
+
+  if (loading)
+    return (
+      <div style={{ padding: 16, color: themeVars.content.muted, fontSize: 12 }}>Loading…</div>
+    );
+  if (loadIssues) {
+    return <AssetValidationError kind="material" fileName={fileName} issues={loadIssues} />;
+  }
+
+  const file = draft.file;
+  const material = file?.material;
+  const showPbr = material?.type === 'standard' || material?.type === 'physical';
+  const updateMaterial = (partial: Partial<SceneMaterial>) => {
+    if (!file || !material) return;
+    changeFile({ ...file, material: { ...material, ...partial } });
+  };
+
+  return (
+    <div
+      style={{
+        padding: 16,
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fit, minmax(min(300px, 100%), 1fr))',
+        gap: 18,
+      }}
+    >
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+        <div style={{ fontSize: 13, fontWeight: 600, color: themeVars.content.primary }}>
+          {fileName}
+        </div>
+        {file && material ? (
+          <>
+            <MaterialRuntimePreview material={material} />
+            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
+              <Field label="Name">
+                <TextInput
+                  className="vgai-input"
+                  value={file.name}
+                  onChange={(event) => changeFile({ ...file, name: event.target.value })}
+                />
+              </Field>
+              <Field label="Type">
+                <Select
+                  className="vgai-select"
+                  value={material.type}
+                  onChange={(event) => {
+                    const type = event.target.value as SceneMaterial['type'];
+                    updateMaterial({
+                      type,
+                      ...(type === 'custom' ? { def: material.def ?? '' } : {}),
+                    });
+                  }}
+                >
+                  <option value="standard">standard</option>
+                  <option value="physical">physical</option>
+                  <option value="basic">basic</option>
+                  <option value="toon">toon</option>
+                  <option value="custom">custom</option>
+                </Select>
+              </Field>
+              {material.type === 'custom' && (
+                <Field label="Registered definition">
+                  <TextInput
+                    className="vgai-input"
+                    value={material.def ?? ''}
+                    placeholder="material registry name"
+                    onChange={(event) => updateMaterial({ def: event.target.value })}
+                  />
+                </Field>
+              )}
+              <Field label="Base color">
+                <ColorSwatchInput
+                  value={material.color ?? '#ffffff'}
+                  onChange={(event) => updateMaterial({ color: event.target.value })}
+                />
+              </Field>
+              <Field label="Emissive">
+                <ColorSwatchInput
+                  value={material.emissive ?? '#000000'}
+                  onChange={(event) => updateMaterial({ emissive: event.target.value })}
+                />
+              </Field>
+              {showPbr && (
+                <>
+                  <Field label="Metalness">
+                    <TextInput
+                      className="vgai-input"
+                      type="number"
+                      min="0"
+                      max="1"
+                      step="0.05"
+                      value={material.metalness ?? 0}
+                      onChange={(event) =>
+                        updateMaterial({ metalness: Number(event.target.value) })
+                      }
+                    />
+                  </Field>
+                  <Field label="Roughness">
+                    <TextInput
+                      className="vgai-input"
+                      type="number"
+                      min="0"
+                      max="1"
+                      step="0.05"
+                      value={material.roughness ?? 0.5}
+                      onChange={(event) =>
+                        updateMaterial({ roughness: Number(event.target.value) })
+                      }
+                    />
+                  </Field>
+                </>
+              )}
+              <Field label="Opacity">
+                <TextInput
+                  className="vgai-input"
+                  type="number"
+                  min="0"
+                  max="1"
+                  step="0.05"
+                  value={material.opacity ?? 1}
+                  onChange={(event) => updateMaterial({ opacity: Number(event.target.value) })}
+                />
+              </Field>
+              <Field label="Side">
+                <Select
+                  className="vgai-select"
+                  value={material.side ?? 'front'}
+                  onChange={(event) =>
+                    updateMaterial({ side: event.target.value as SceneMaterial['side'] })
+                  }
+                >
+                  <option value="front">front</option>
+                  <option value="back">back</option>
+                  <option value="double">double</option>
+                </Select>
+              </Field>
+            </div>
+            <label
+              style={{
+                fontSize: 11,
+                color: themeVars.content.primary,
+                display: 'flex',
+                alignItems: 'center',
+                gap: 6,
+              }}
+            >
+              <Checkbox
+                className="vgai-checkbox"
+                checked={material.transparent ?? false}
+                onChange={(event) => updateMaterial({ transparent: event.target.checked })}
+              />
+              Transparent
+            </label>
+          </>
+        ) : (
+          <div
+            data-testid="material-form-disabled"
+            style={{
+              padding: 12,
+              color: themeVars.semantic.danger,
+              border: `1px solid ${themeVars.semantic.danger}`,
+              borderRadius: themeVars.shape.small,
+            }}
+          >
+            Fix the JSON validation errors to re-enable the visual material controls.
+          </div>
+        )}
+        <div style={{ fontSize: 10, color: themeVars.content.dim }}>
+          The JSON editor exposes every schema field, including texture maps, custom uniforms, and
+          physical layers.
+        </div>
+      </div>
+      <div style={{ minWidth: 0, display: 'flex', flexDirection: 'column', gap: 8 }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          <span
+            style={{ color: themeVars.content.primary, fontSize: 12, fontWeight: 600, flex: 1 }}
+          >
+            Material definition
+          </span>
+          {saved && <span style={{ color: themeVars.semantic.success, fontSize: 11 }}>Saved</span>}
+          <Button type="button" variant="primary" size="compact" onClick={() => void save()}>
+            Save
+          </Button>
+        </div>
+        <textarea
+          aria-label="Material JSON"
+          className="vgai-input"
+          spellCheck={false}
+          value={draft.raw}
+          onChange={(event) => setRawDirty(event.target.value)}
+          style={{
+            flex: 1,
+            minHeight: 460,
+            resize: 'vertical',
+            fontFamily: 'var(--vgai-font-mono)',
+            fontSize: 11,
+            lineHeight: 1.5,
+            padding: 10,
+          }}
+        />
+        {draft.issues.length > 0 && (
+          <pre
+            style={{
+              margin: 0,
+              color: themeVars.semantic.danger,
+              whiteSpace: 'pre-wrap',
+              fontSize: 10,
+            }}
+          >
+            {draft.issues.join('\n')}
+          </pre>
+        )}
+        {saveError && (
+          <pre
+            style={{
+              margin: 0,
+              color: themeVars.semantic.danger,
+              whiteSpace: 'pre-wrap',
+              fontSize: 10,
+            }}
+          >
+            {saveError}
+          </pre>
+        )}
+      </div>
+    </div>
+  );
+}