fix(editor): autoplay animations, keep their slots filled and let panels resize

Author: dnlblasco

resources/js/components/MenuSidebar.tsx

@@ -1,6 +1,8 @@
 import { useState } from 'react';
 import { menuKey } from '../editor/menus';
 import { ContextMenu } from './ContextMenu';
+import { ResizeHandle } from './ResizeHandle';
+import { usePanelWidth } from '../editor/panelWidth';
 import type { MenuDescriptor } from '../types/editor';
 
 interface MenuSidebarProps {
@@ -28,9 +30,10 @@ const SECTIONS: Section[] = [
 export function MenuSidebar({ menus, activeKey, onOpen, onCreate, onDelete }: MenuSidebarProps) {
     const [collapsed, setCollapsed] = useState<Record<string, boolean>>({});
     const [menu, setMenu] = useState<{ menu: MenuDescriptor; x: number; y: number } | null>(null);
+    const [width, setWidth] = usePanelWidth('sidebar', 280);
 
     return (
-        <aside className="ide-sidebar">
+        <aside className="ide-sidebar" style={{ width: `${width}px` }}>
             <div className="sidebar-header">Server Menus</div>
 
             <div className="sidebar-content">
@@ -92,6 +95,8 @@ export function MenuSidebar({ menus, activeKey, onOpen, onCreate, onDelete }: Me
                 })}
             </div>
 
+            <ResizeHandle edge="right" width={width} min={200} max={500} onResize={setWidth} />
+
             {menu !== null && (
                 <ContextMenu
                     x={menu.x}

resources/js/components/ResizeHandle.tsx

@@ -0,0 +1,65 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+interface ResizeHandleProps {
+    /** Which edge of the panel the handle sits on. */
+    edge: 'left' | 'right';
+    width: number;
+    min: number;
+    max: number;
+    onResize: (width: number) => void;
+}
+
+/**
+ * Drags a panel wider or narrower.
+ *
+ * The pointer is captured for the duration, so the drag survives moving over
+ * the editor, an iframe or outside the window.
+ */
+export function ResizeHandle({ edge, width, min, max, onResize }: ResizeHandleProps) {
+    const [dragging, setDragging] = useState(false);
+    const start = useRef({ x: 0, width: 0 });
+
+    const move = useCallback(
+        (event: PointerEvent): void => {
+            const delta = event.clientX - start.current.x;
+            const next = start.current.width + (edge === 'right' ? delta : -delta);
+
+            onResize(Math.max(min, Math.min(max, next)));
+        },
+        [edge, max, min, onResize],
+    );
+
+    useEffect(() => {
+        if (!dragging) {
+            return;
+        }
+
+        const stop = (): void => setDragging(false);
+
+        document.addEventListener('pointermove', move);
+        document.addEventListener('pointerup', stop);
+        document.body.style.cursor = 'ew-resize';
+        document.body.style.userSelect = 'none';
+
+        return () => {
+            document.removeEventListener('pointermove', move);
+            document.removeEventListener('pointerup', stop);
+            document.body.style.cursor = '';
+            document.body.style.userSelect = '';
+        };
+    }, [dragging, move]);
+
+    return (
+        <div
+            className={`panel-resize-handle panel-resize-${edge}`}
+            role="separator"
+            aria-orientation="vertical"
+            aria-label="Resize panel"
+            onPointerDown={event => {
+                start.current = { x: event.clientX, width };
+                setDragging(true);
+                event.preventDefault();
+            }}
+        />
+    );
+}

resources/js/components/visual/VisualEditor.tsx

@@ -1,11 +1,13 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { normalizeMenuSize, VALID_CHEST_SIZES } from '../../editor/config';
-import { itemsAtTick, TICK_MS } from '../../editor/animation';
+import { canvasItems, slotAnimations, TICK_MS } from '../../editor/animation';
 import { applyVisualEdit, readVisual } from '../../editor/yamlDocument';
 import { ItemEditor } from './ItemEditor';
 import { ItemPalette } from './ItemPalette';
 import { MenuCanvas } from './MenuCanvas';
 import { SlotContextMenu, type SlotMenuTarget } from './SlotContextMenu';
+import { ResizeHandle } from '../ResizeHandle';
+import { usePanelWidth } from '../../editor/panelWidth';
 import { MenuSettings } from './MenuSettings';
 import { AnimationEditor } from './AnimationEditor';
 import { GlobalTimeline } from './GlobalTimeline';
@@ -30,7 +32,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 [panelWidth, setPanelWidth] = usePanelWidth('visual-panel', 350);
 
     const parsed = useMemo(() => {
         try {
@@ -40,6 +42,8 @@ export function VisualEditor({ source, platform, serverVersion, onChange }: Visu
         }
     }, [source, platform]);
 
+    const playback = usePlayback(parsed.menu !== null && slotAnimations(parsed.menu).length > 0);
+
     if (parsed.menu === null) {
         return (
             <div className="visual-editor-container">
@@ -99,7 +103,7 @@ export function VisualEditor({ source, platform, serverVersion, onChange }: Visu
 
                     <MenuCanvas
                         size={normalizeMenuSize(menu.size)}
-                        items={playback.playing ? itemsAtTick(menu, playback.tick) : menu.items}
+                        items={canvasItems(menu, playback.tick, playback.playing)}
                         selectedSlot={selectedSlot}
                         serverVersion={serverVersion}
                         onSelect={slot => {
@@ -134,7 +138,9 @@ export function VisualEditor({ source, platform, serverVersion, onChange }: Visu
                     <GlobalTimeline menu={menu} serverVersion={serverVersion} playback={playback} />
                 </div>
 
-                <div className="visual-editor-right-panel">
+                <div className="visual-editor-right-panel" style={{ width: `${panelWidth}px` }}>
+                    <ResizeHandle edge="left" width={panelWidth} min={250} max={600} onResize={setPanelWidth} />
+
                     <div className="visual-editor-tabs">
                         {PANELS.map(tab => (
                             <button
@@ -236,10 +242,21 @@ export interface Playback {
  * 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 {
+function usePlayback(hasAnimations: boolean): Playback {
     const [playing, setPlaying] = useState(false);
     const [tick, setTick] = useState(0);
 
+    // The menu animates on its own once it loads, the way it does in game.
+    useEffect(() => {
+        if (!hasAnimations) {
+            return;
+        }
+
+        const start = setTimeout(() => setPlaying(true), 500);
+
+        return () => clearTimeout(start);
+    }, [hasAnimations]);
+
     useEffect(() => {
         if (!playing) {
             return;

resources/js/editor/__tests__/animation.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { frameAt, itemsAtTick, slotAnimations } from '../animation';
+import { canvasItems, frameAt, itemsAtTick, slotAnimations } from '../animation';
 import type { VisualJavaMenu } from '../model';
 
 function menuWith(animations: VisualJavaMenu['animations']): VisualJavaMenu {
@@ -106,3 +106,27 @@ describe('itemsAtTick', () => {
         expect(menu.items[13]).toBeUndefined();
     });
 });
+
+describe('canvasItems', () => {
+    const menu = menuWith({
+        spin: {
+            interval: 2,
+            frames: {
+                one: { material: 'RED_WOOL', amount: 1, slot: 13 },
+                two: { material: 'BLUE_WOOL', amount: 1, slot: 13 },
+            },
+        },
+    });
+
+    it('shows the live frame while playing', () => {
+        expect(canvasItems(menu, 2, true)[13].material).toBe('BLUE_WOOL');
+    });
+
+    it('keeps the first frame when stopped, so the slot never looks empty', () => {
+        expect(canvasItems(menu, 2, false)[13].material).toBe('RED_WOOL');
+    });
+
+    it('still shows the static items when stopped', () => {
+        expect(canvasItems(menu, 0, false)[4].material).toBe('STONE');
+    });
+});

resources/js/editor/animation.ts

@@ -41,8 +41,10 @@ export function frameAt(animation: SlotAnimation, tick: number): VisualItem {
 }
 
 /**
- * The menu's items with every animated slot replaced by its current frame, so
- * the canvas shows what the player would see while it plays.
+ * The menu's items with every animated slot showing its current frame.
+ *
+ * An animated slot usually has no entry in `items`, so it must keep showing a
+ * frame even when stopped, or the menu looks half empty the moment you pause.
  */
 export function itemsAtTick(menu: VisualJavaMenu, tick: number): Record<number, VisualItem> {
     const items = { ...menu.items };
@@ -53,3 +55,10 @@ export function itemsAtTick(menu: VisualJavaMenu, tick: number): Record<number,
 
     return items;
 }
+
+/**
+ * What the canvas shows: the live frame while playing, the first frame at rest.
+ */
+export function canvasItems(menu: VisualJavaMenu, tick: number, playing: boolean): Record<number, VisualItem> {
+    return itemsAtTick(menu, playing ? tick : 0);
+}

resources/js/editor/panelWidth.ts

@@ -0,0 +1,38 @@
+import { useCallback, useState } from 'react';
+
+const STORAGE_PREFIX = 'bluemenu.panel.';
+
+/**
+ * A panel width the viewer can drag, remembered for their browser.
+ *
+ * Storage can be unavailable (a private window, blocked site data), so both
+ * reading and writing fall back to the default rather than throwing.
+ */
+export function usePanelWidth(name: string, fallback: number): [number, (width: number) => void] {
+    const [width, setWidth] = useState(() => read(name, fallback));
+
+    const update = useCallback(
+        (next: number): void => {
+            setWidth(next);
+
+            try {
+                localStorage.setItem(STORAGE_PREFIX + name, String(Math.round(next)));
+            } catch {
+                // The width still applies for this session.
+            }
+        },
+        [name],
+    );
+
+    return [width, update];
+}
+
+function read(name: string, fallback: number): number {
+    try {
+        const stored = Number(localStorage.getItem(STORAGE_PREFIX + name));
+
+        return Number.isFinite(stored) && stored > 0 ? stored : fallback;
+    } catch {
+        return fallback;
+    }
+}