fix(editor): open in visual mode, play animations and fill wide screens

Author: dnlblasco

resources/css/editor-extras.css

@@ -225,3 +225,22 @@
     gap: 4px;
     align-items: center;
 }
+
+/* The inherited rules size CodeMirror 5 (.CodeMirror); this editor is on
+   CodeMirror 6, whose root is .cm-editor. Without a flex basis it sizes to its
+   content and leaves the rest of a wide screen blank. */
+.yaml-editor,
+.editor-body > .cm-theme {
+    flex: 1;
+    min-width: 0;
+    height: 100%;
+}
+
+.yaml-editor .cm-editor {
+    height: 100%;
+}
+
+.yaml-editor .cm-scroller {
+    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+    font-size: 14px;
+}

resources/js/components/DemoWorkspace.tsx

@@ -18,7 +18,8 @@ export function DemoWorkspace() {
     const { store, dispatch } = useEditorStore();
     const notify = useToast();
     const [diagnostics, setDiagnostics] = useState<MenuDiagnostics | null>(null);
-    const [visualMode, setVisualMode] = useState(false);
+    // Menus open in the visual editor, as they did before the migration.
+    const [visualMode, setVisualMode] = useState(true);
 
     const current = activeTab(store);
 

resources/js/components/EditorWorkspace.tsx

@@ -26,7 +26,8 @@ export function EditorWorkspace({ sessionId, session, realtimeReady }: EditorWor
     const notify = useToast();
     const [diagnostics, setDiagnostics] = useState<MenuDiagnostics | null>(null);
     const [busy, setBusy] = useState(false);
-    const [visualMode, setVisualMode] = useState(false);
+    // Menus open in the visual editor, as they did before the migration.
+    const [visualMode, setVisualMode] = useState(true);
     const [terminalOpen, setTerminalOpen] = useState(false);
     const [loadError, setLoadError] = useState<string | null>(null);
 

resources/js/components/YamlEditor.tsx

@@ -24,7 +24,7 @@ export function YamlEditor({ value, onChange }: YamlEditorProps) {
             onChange={onChange}
             indentWithTab={false}
             basicSetup={{ lineNumbers: true, foldGutter: true, autocompletion: false, highlightActiveLine: true }}
-            className="h-full text-sm"
+            className="yaml-editor"
         />
     );
 }

resources/js/components/visual/AnimationEditor.tsx

@@ -1,41 +1,37 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { ItemIcon } from './ItemIcon';
 import { MaterialSelector } from './MaterialSelector';
+import type { Playback } from './VisualEditor';
 import type { VisualAnimation, VisualItem, VisualJavaMenu } from '../../editor/model';
 
 interface AnimationEditorProps {
     menu: VisualJavaMenu;
     serverVersion: string | null;
     onChange: (menu: VisualJavaMenu) => void;
+    playback: Playback;
 }
 
-/** Ticks per frame, as the plugin counts them. A tick is 50ms. */
+/** Ticks per frame, as the plugin counts them. */
 const DEFAULT_INTERVAL = 2;
-const TICK_MS = 50;
 
 /**
  * The animation strip: one card per frame, played back at the configured rate
  * so the sequence can be judged without opening the game.
  */
-export function AnimationEditor({ menu, serverVersion, onChange }: AnimationEditorProps) {
+export function AnimationEditor({ menu, serverVersion, onChange, playback }: AnimationEditorProps) {
     const names = Object.keys(menu.animations);
     const [selected, setSelected] = useState<string | null>(names[0] ?? null);
-    const [playing, setPlaying] = useState(false);
-    const [frameIndex, setFrameIndex] = useState(0);
+    const [picked, setPicked] = useState(0);
 
     const active = selected === null ? undefined : menu.animations[selected];
     const frames = active === undefined ? [] : Object.entries(active.frames);
 
-    useEffect(() => {
-        if (!playing || active === undefined || frames.length < 2) {
-            return;
-        }
-
-        const period = Math.max(1, active.interval) * TICK_MS;
-        const timer = setInterval(() => setFrameIndex(current => (current + 1) % frames.length), period);
-
-        return () => clearInterval(timer);
-    }, [playing, active, frames.length]);
+    // While it plays, the strip follows the shared clock; otherwise it shows
+    // whichever frame is being edited.
+    const frameIndex =
+        playback.playing && frames.length > 0
+            ? Math.floor(playback.tick / Math.max(1, active?.interval ?? DEFAULT_INTERVAL)) % frames.length
+            : Math.min(picked, Math.max(0, frames.length - 1));
 
     if (names.length === 0) {
         return (
@@ -73,7 +69,7 @@ export function AnimationEditor({ menu, serverVersion, onChange }: AnimationEdit
                         value={selected ?? ''}
                         onChange={event => {
                             setSelected(event.target.value);
-                            setFrameIndex(0);
+                            setPicked(0);
                         }}
                         aria-label="Animation"
                     >
@@ -84,10 +80,10 @@ export function AnimationEditor({ menu, serverVersion, onChange }: AnimationEdit
                         ))}
                     </select>
 
-                    <button type="button" className="btn btn-secondary btn-sm" onClick={() => setPlaying(true)} title="Play">
+                    <button type="button" className="btn btn-secondary btn-sm" onClick={playback.play} title="Play">
                         ▶️
                     </button>
-                    <button type="button" className="btn btn-secondary btn-sm" onClick={() => setPlaying(false)} title="Stop">
+                    <button type="button" className="btn btn-secondary btn-sm" onClick={playback.stop} title="Stop">
                         ⏹️
                     </button>
                     <button
@@ -131,12 +127,12 @@ export function AnimationEditor({ menu, serverVersion, onChange }: AnimationEdit
                 {frames.map(([key, frame], index) => (
                     <div
                         key={key}
-                        className={`timeline-frame${playing && index === frameIndex ? ' active' : ''}`}
+                        className={`timeline-frame${index === frameIndex ? ' active' : ''}`}
                         title={`Frame ${index + 1}: ${frame.material}`}
                         role="button"
                         tabIndex={0}
-                        onClick={() => setFrameIndex(index)}
-                        onKeyDown={event => event.key === 'Enter' && setFrameIndex(index)}
+                        onClick={() => setPicked(index)}
+                        onKeyDown={event => event.key === 'Enter' && setPicked(index)}
                     >
                         <div className="timeline-frame-number">{index + 1}</div>
                         <div className="timeline-frame-preview">
@@ -157,7 +153,7 @@ export function AnimationEditor({ menu, serverVersion, onChange }: AnimationEdit
                         const next = { ...active.frames };
                         delete next[frames[frameIndex][0]];
                         update({ ...active, frames: next });
-                        setFrameIndex(0);
+                        setPicked(0);
                     }}
                 />
             )}

resources/js/components/visual/GlobalTimeline.tsx

@@ -1,36 +1,22 @@
-import { useEffect, useState } from 'react';
+import { frameAt, slotAnimations } from '../../editor/animation';
 import { ItemIcon } from './ItemIcon';
+import type { Playback } from './VisualEditor';
 import type { VisualJavaMenu } from '../../editor/model';
 
 interface GlobalTimelineProps {
     menu: VisualJavaMenu;
     serverVersion: string | null;
+    playback: Playback;
 }
 
-/** A Minecraft tick. */
-const TICK_MS = 50;
-
 /**
  * Every animation of the menu on one grid, played together.
  *
  * Animations that share a slot or run at different intervals only reveal how
  * they look side by side, which a single slot timeline cannot show.
  */
-export function GlobalTimeline({ menu, serverVersion }: GlobalTimelineProps) {
-    const [playing, setPlaying] = useState(false);
-    const [tick, setTick] = useState(0);
-
-    const rows = Object.entries(menu.animations);
-
-    useEffect(() => {
-        if (!playing) {
-            return;
-        }
-
-        const timer = setInterval(() => setTick(current => current + 1), TICK_MS);
-
-        return () => clearInterval(timer);
-    }, [playing]);
+export function GlobalTimeline({ menu, serverVersion, playback }: GlobalTimelineProps) {
+    const rows = slotAnimations(menu);
 
     if (rows.length === 0) {
         return null;
@@ -41,20 +27,20 @@ export function GlobalTimeline({ menu, serverVersion }: GlobalTimelineProps) {
             <div className="global-timeline-header">
                 <div className="global-timeline-header-left">
                     <span className="global-timeline-title">🎬 Global Animation Timeline</span>
-                    <span className="global-timeline-status">{playing ? 'Playing' : 'Stopped'}</span>
+                    <span className="global-timeline-status">{playback.playing ? 'Playing' : 'Stopped'}</span>
                 </div>
 
                 <div className="global-timeline-controls">
-                    <button type="button" className="btn btn-secondary btn-sm" onClick={() => setPlaying(true)} title="Play">
+                    <button type="button" className="btn btn-secondary btn-sm" onClick={playback.play} title="Play">
                         ▶️ Play
                     </button>
-                    <button type="button" className="btn btn-secondary btn-sm" onClick={() => setPlaying(false)} title="Stop">
+                    <button type="button" className="btn btn-secondary btn-sm" onClick={playback.stop} title="Stop">
                         ⏹️ Stop
                     </button>
                     <button
                         type="button"
                         className="btn btn-secondary btn-sm"
-                        onClick={() => setTick(0)}
+                        onClick={playback.reset}
                         title="Back to the first frame"
                     >
                         🔄 Reset
@@ -63,25 +49,25 @@ export function GlobalTimeline({ menu, serverVersion }: GlobalTimelineProps) {
             </div>
 
             <div className="global-timeline-rows">
-                {rows.map(([name, animation]) => {
-                    const frames = Object.entries(animation.frames);
-                    const interval = Math.max(1, animation.interval);
-                    const current = frames.length === 0 ? -1 : Math.floor(tick / interval) % frames.length;
+                {rows.map(animation => {
+                    const current = frameAt(animation, playback.tick);
 
                     return (
-                        <div key={name} className="global-timeline-row">
+                        <div key={animation.key} className="global-timeline-row">
                             <div className="global-timeline-row-header">
-                                <span className="global-timeline-slot-label">{name}</span>
+                                <span className="global-timeline-slot-label">
+                                    {animation.key} · slot {animation.slot}
+                                </span>
                                 <span className="global-timeline-info">
-                                    {frames.length} frames · every {interval} ticks
+                                    {animation.frames.length} frames · every {animation.interval} ticks
                                 </span>
                             </div>
 
                             <div className="global-timeline-frames-container">
-                                {frames.map(([key, frame], index) => (
+                                {animation.frames.map((frame, index) => (
                                     <div
-                                        key={key}
-                                        className={`global-timeline-frame${playing && index === current ? ' active' : ''}`}
+                                        key={`${animation.key}-${index}`}
+                                        className={`global-timeline-frame${playback.playing && frame === current ? ' active' : ''}`}
                                         title={`${frame.material} (frame ${index + 1})`}
                                     >
                                         <ItemIcon item={frame} serverVersion={serverVersion} variant="canvas" />

resources/js/components/visual/VisualEditor.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { normalizeMenuSize, VALID_CHEST_SIZES } from '../../editor/config';
+import { itemsAtTick, TICK_MS } from '../../editor/animation';
 import { applyVisualEdit, readVisual } from '../../editor/yamlDocument';
 import { ItemEditor } from './ItemEditor';
 import { ItemPalette } from './ItemPalette';
@@ -29,6 +30,7 @@ export function VisualEditor({ source, platform, serverVersion, onChange }: Visu
     // Copied items live for the session, so one can be pasted across menus.
     const [clipboard, setClipboard] = useState<VisualItem | null>(null);
     const [panel, setPanel] = useState<PanelKey>('palette');
+    const playback = usePlayback();
 
     const parsed = useMemo(() => {
         try {
@@ -97,7 +99,7 @@ export function VisualEditor({ source, platform, serverVersion, onChange }: Visu
 
                     <MenuCanvas
                         size={normalizeMenuSize(menu.size)}
-                        items={menu.items}
+                        items={playback.playing ? itemsAtTick(menu, playback.tick) : menu.items}
                         selectedSlot={selectedSlot}
                         serverVersion={serverVersion}
                         onSelect={slot => {
@@ -127,9 +129,9 @@ export function VisualEditor({ source, platform, serverVersion, onChange }: Visu
                         }}
                     />
 
-                    <AnimationEditor menu={menu} serverVersion={serverVersion} onChange={commit} />
+                    <AnimationEditor menu={menu} serverVersion={serverVersion} onChange={commit} playback={playback} />
 
-                    <GlobalTimeline menu={menu} serverVersion={serverVersion} />
+                    <GlobalTimeline menu={menu} serverVersion={serverVersion} playback={playback} />
                 </div>
 
                 <div className="visual-editor-right-panel">
@@ -222,6 +224,41 @@ const PANELS: { key: PanelKey; label: string }[] = [
     { key: 'item', label: 'Item Editor' },
 ];
 
+export interface Playback {
+    playing: boolean;
+    tick: number;
+    play: () => void;
+    stop: () => void;
+    reset: () => void;
+}
+
+/**
+ * Drives every animation of the menu off one tick counter, so two animations
+ * with different intervals stay in step exactly as they do in game.
+ */
+function usePlayback(): Playback {
+    const [playing, setPlaying] = useState(false);
+    const [tick, setTick] = useState(0);
+
+    useEffect(() => {
+        if (!playing) {
+            return;
+        }
+
+        const timer = setInterval(() => setTick(current => current + 1), TICK_MS);
+
+        return () => clearInterval(timer);
+    }, [playing]);
+
+    return {
+        playing,
+        tick,
+        play: () => setPlaying(true),
+        stop: () => setPlaying(false),
+        reset: () => setTick(0),
+    };
+}
+
 interface SlotShortcuts {
     slot: number | null;
     item: VisualItem | undefined;