pixelweaver 0.1.0

package/src/lib/ui/view-commands.ts

@@ -0,0 +1,629 @@
+/**
+ * View Commands -- zoom, display, panels, toolbars, layouts, theme.
+ *
+ * Also owns the view-controls toolbar population and the context menu
+ * entries for the canvas (which contain Undo/Redo).
+ */
+
+import type { PluginModule } from '../core/plugin-loader.js';
+import { dockState } from '../dock/dock-state.svelte.js';
+import { presets } from '../dock/dock-presets.js';
+import { clearLayout } from '../dock/dock-persistence.js';
+import { resetAllToolbarConfigs } from './toolbar-config.js';
+import { themeState } from './theme.svelte.js';
+import { canvasState } from '../canvas/canvas-state.svelte.js';
+import {
+  ZOOM_STEPS,
+  zoomStepUp,
+  zoomStepDown,
+  DEFAULT_ZOOM,
+} from '../canvas/zoom-utils.js';
+import {
+  viewportCenter,
+  getViewportElement,
+} from '../canvas/viewport-utils.js';
+import ZoomIn from '~icons/lucide/zoom-in';
+import ZoomOut from '~icons/lucide/zoom-out';
+import Scan from '~icons/lucide/scan';
+import Moon from '~icons/lucide/moon';
+import Palette from '~icons/lucide/palette';
+import Layers from '~icons/lucide/layers';
+import Film from '~icons/lucide/film';
+import LayoutDashboard from '~icons/lucide/layout-dashboard';
+import Wrench from '~icons/lucide/wrench';
+import SlidersHorizontal from '~icons/lucide/sliders-horizontal';
+import RotateCcw from '~icons/lucide/rotate-ccw';
+import Fullscreen from '~icons/lucide/fullscreen';
+import Crosshair from '~icons/lucide/crosshair';
+import Hash from '~icons/lucide/hash';
+import Grid3x3 from '~icons/lucide/grid-3x3';
+import Repeat from '~icons/lucide/repeat';
+import Eclipse from '~icons/lucide/eclipse';
+import Diamond from '~icons/lucide/diamond';
+import ArrowLeftRight from '~icons/lucide/arrow-left-right';
+import ScanLine from '~icons/lucide/scan-line';
+
+export const viewCommandsPlugin: PluginModule = {
+  name: 'ui/view-commands',
+  version: '1.0.0',
+  dependencies: [],
+  register(api) {
+    // --- Zoom commands ---
+
+    api.addCommand('zoom_in', {
+      tier: 'project',
+      execute() {
+        const [cx, cy] = viewportCenter();
+        canvasState.setZoomAnimated(zoomStepUp(canvasState.zoom), cx, cy);
+      },
+      undo() {},
+      describe() { return 'Zoomed in'; },
+      label: 'Zoom In',
+      category: 'View',
+      defaultShortcut: '=',
+      icon: ZoomIn,
+    });
+    api.addMenuItem('menu:view:zoom-in', {
+      commandId: 'zoom_in',
+      menuPath: 'view',
+      group: 'zoom',
+      order: 10,
+      label: 'Zoom In',
+    });
+
+    api.addCommand('zoom_out', {
+      tier: 'project',
+      execute() {
+        const [cx, cy] = viewportCenter();
+        canvasState.setZoomAnimated(zoomStepDown(canvasState.zoom), cx, cy);
+      },
+      undo() {},
+      describe() { return 'Zoomed out'; },
+      label: 'Zoom Out',
+      category: 'View',
+      defaultShortcut: '-',
+      icon: ZoomOut,
+    });
+    api.addMenuItem('menu:view:zoom-out', {
+      commandId: 'zoom_out',
+      menuPath: 'view',
+      group: 'zoom',
+      order: 20,
+      label: 'Zoom Out',
+    });
+
+    api.addCommand('zoom_reset', {
+      tier: 'project',
+      execute() {
+        const [cx, cy] = viewportCenter();
+        canvasState.setZoomAnimated(DEFAULT_ZOOM, cx, cy);
+      },
+      undo() {},
+      describe() { return 'Reset zoom'; },
+      label: 'Reset Zoom',
+      category: 'View',
+      icon: Scan,
+    });
+    api.addMenuItem('menu:view:zoom-reset', {
+      commandId: 'zoom_reset',
+      menuPath: 'view',
+      group: 'zoom',
+      order: 30,
+      label: 'Reset Zoom',
+    });
+
+    api.addCommand('fit_to_view', {
+      tier: 'project',
+      icon: Fullscreen,
+      execute() {
+        // Find the canvas viewport element to get its dimensions
+        const el = getViewportElement();
+        if (!el) return;
+        const rect = el.getBoundingClientRect();
+        if (rect.width === 0 || rect.height === 0) return;
+        // Pick the largest zoom step that keeps the canvas within 90% of viewport
+        const padding = 0.9;
+        const maxW = rect.width * padding;
+        const maxH = rect.height * padding;
+        let bestZoom: number = ZOOM_STEPS[0];
+        for (const step of ZOOM_STEPS) {
+          if (canvasState.canvasWidth * step <= maxW && canvasState.canvasHeight * step <= maxH) {
+            bestZoom = step;
+          }
+        }
+        const [cx, cy] = viewportCenter();
+        canvasState.setZoomAnimated(bestZoom, cx, cy);
+        // Center at the chosen zoom
+        const canvasPixelW = canvasState.canvasWidth * bestZoom;
+        const canvasPixelH = canvasState.canvasHeight * bestZoom;
+        canvasState.panX = Math.round((rect.width - canvasPixelW) / 2);
+        canvasState.panY = Math.round((rect.height - canvasPixelH) / 2);
+      },
+      undo() {},
+      describe() { return 'Fit canvas to viewport'; },
+      label: 'Fit to View',
+      category: 'View',
+    });
+    api.addMenuItem('menu:view:fit-to-view', {
+      commandId: 'fit_to_view',
+      menuPath: 'view',
+      group: 'zoom',
+      order: 40,
+      label: 'Fit to View',
+    });
+
+    api.addCommand('center_canvas', {
+      tier: 'project',
+      icon: Crosshair,
+      execute() {
+        const el = getViewportElement();
+        if (!el) return;
+        const rect = el.getBoundingClientRect();
+        const canvasPixelW = canvasState.canvasWidth * canvasState.zoom;
+        const canvasPixelH = canvasState.canvasHeight * canvasState.zoom;
+        canvasState.panX = Math.round((rect.width - canvasPixelW) / 2);
+        canvasState.panY = Math.round((rect.height - canvasPixelH) / 2);
+      },
+      undo() {},
+      describe() { return 'Center canvas in viewport'; },
+      label: 'Center Canvas',
+      category: 'View',
+    });
+    api.addMenuItem('menu:view:center-canvas', {
+      commandId: 'center_canvas',
+      menuPath: 'view',
+      group: 'zoom',
+      order: 50,
+      label: 'Center Canvas',
+    });
+
+    // --- Display toggles ---
+
+    api.addCommand('toggle_grid', {
+      tier: 'project',
+      icon: Hash,
+      execute() { canvasState.showGrid = !canvasState.showGrid; },
+      undo() {},
+      describe() { return 'Toggle pixel grid overlay'; },
+      label: 'Toggle Grid',
+      category: 'View',
+    });
+    api.addMenuItem('menu:view:toggle-grid', {
+      commandId: 'toggle_grid',
+      menuPath: 'view',
+      group: 'display',
+      order: 20,
+      label: 'Toggle Grid',
+    });
+
+    api.addCommand('toggle_pixel_grid', {
+      tier: 'project',
+      icon: Grid3x3,
+      execute() { canvasState.showPixelGrid = !canvasState.showPixelGrid; },
+      undo() {},
+      describe() { return 'Toggle sub-pixel grid'; },
+      label: 'Toggle Pixel Grid',
+      category: 'View',
+    });
+    api.addMenuItem('menu:view:toggle-pixel-grid', {
+      commandId: 'toggle_pixel_grid',
+      menuPath: 'view',
+      group: 'display',
+      order: 30,
+      label: 'Toggle Pixel Grid',
+    });
+
+    api.addCommand('toggle_tile_mode', {
+      tier: 'project',
+      icon: Repeat,
+      execute() { canvasState.tileMode = !canvasState.tileMode; },
+      undo() {},
+      describe() { return 'Toggle tile mode'; },
+      label: 'Toggle Tile Mode',
+      category: 'View',
+    });
+    api.addMenuItem('menu:view:toggle-tile-mode', {
+      commandId: 'toggle_tile_mode',
+      menuPath: 'view',
+      group: 'display',
+      order: 40,
+      label: 'Toggle Tile Mode',
+    });
+
+    api.addCommand('toggle_onion_skin', {
+      tier: 'project',
+      icon: Eclipse,
+      execute() { canvasState.onionSkin = !canvasState.onionSkin; },
+      undo() {},
+      describe() { return 'Toggle onion skinning'; },
+      label: 'Toggle Onion Skin',
+      category: 'View',
+    });
+    api.addMenuItem('menu:view:toggle-onion-skin', {
+      commandId: 'toggle_onion_skin',
+      menuPath: 'view',
+      group: 'display',
+      order: 50,
+      label: 'Toggle Onion Skin',
+    });
+
+    api.addCommand('toggle_iso_guide', {
+      tier: 'project',
+      icon: Diamond,
+      execute() { canvasState.isoGuide = !canvasState.isoGuide; },
+      undo() {},
+      describe() { return 'Toggle isometric guide'; },
+      label: 'Toggle Iso Guide',
+      category: 'View',
+    });
+    api.addMenuItem('menu:view:toggle-iso-guide', {
+      commandId: 'toggle_iso_guide',
+      menuPath: 'view',
+      group: 'display',
+      order: 60,
+      label: 'Toggle Iso Guide',
+    });
+
+    api.addCommand('toggle_theme', {
+      tier: 'project',
+      execute() { themeState.toggle(); },
+      undo() {},
+      describe() { return 'Toggled theme'; },
+      label: 'Toggle Theme',
+      category: 'View',
+      icon: Moon,
+    });
+    api.addMenuItem('menu:view:toggle-theme', {
+      commandId: 'toggle_theme',
+      menuPath: 'view',
+      group: 'display',
+      order: 10,
+      label: 'Toggle Theme',
+    });
+
+    // --- Editor mode toggle (switch between Canvas and Level Editor) ---
+
+    api.addCommand('toggle_editor_mode', {
+      tier: 'project',
+      icon: ArrowLeftRight,
+      execute() {
+        const dvApi = dockState.api;
+        if (!dvApi) return;
+        const canvasPanel = dvApi.getPanel('canvas');
+        const levelPanel = dvApi.getPanel('level-editor');
+        if (!canvasPanel || !levelPanel) return;
+        // If canvas is active (or neither is), switch to level editor; otherwise switch to canvas
+        if (canvasPanel.api.isActive) {
+          levelPanel.api.setActive();
+        } else {
+          canvasPanel.api.setActive();
+        }
+      },
+      undo() {},
+      describe() { return 'Toggle editor mode'; },
+      label: 'Toggle Editor Mode',
+      category: 'View',
+      defaultShortcut: 'Ctrl+Tab',
+    });
+    api.addMenuItem('menu:view:toggle-editor-mode', {
+      commandId: 'toggle_editor_mode',
+      menuPath: 'view',
+      group: 'editor-mode',
+      order: 5,
+      label: 'Toggle Editor Mode',
+    });
+
+    // --- View > Panels submenu ---
+
+    api.addCommand('toggle_panel_colors', {
+      tier: 'project',
+      execute() {
+        if (dockState.isPanelVisible('colors')) {
+          dockState.removePanel('colors');
+        } else {
+          dockState.addPanel('colors');
+        }
+      },
+      undo() {},
+      describe() { return 'Toggle Colors panel'; },
+      label: 'Colors',
+      category: 'View',
+      icon: Palette,
+    });
+    api.addMenuItem('menu:view:panel:colors', {
+      commandId: 'toggle_panel_colors',
+      menuPath: 'view/panels',
+      group: 'panels',
+      order: 10,
+      label: 'Colors',
+    });
+
+    api.addCommand('toggle_panel_layers', {
+      tier: 'project',
+      execute() {
+        if (dockState.isPanelVisible('layers')) {
+          dockState.removePanel('layers');
+        } else {
+          dockState.addPanel('layers');
+        }
+      },
+      undo() {},
+      describe() { return 'Toggle Layers panel'; },
+      label: 'Layers',
+      category: 'View',
+      icon: Layers,
+    });
+    api.addMenuItem('menu:view:panel:layers', {
+      commandId: 'toggle_panel_layers',
+      menuPath: 'view/panels',
+      group: 'panels',
+      order: 20,
+      label: 'Layers',
+    });
+
+    api.addCommand('toggle_panel_frames', {
+      tier: 'project',
+      execute() {
+        if (dockState.isPanelVisible('frames')) {
+          dockState.removePanel('frames');
+        } else {
+          dockState.addPanel('frames');
+        }
+      },
+      undo() {},
+      describe() { return 'Toggle Animation panel'; },
+      label: 'Animation',
+      category: 'View',
+      icon: Film,
+    });
+    api.addMenuItem('menu:view:panel:frames', {
+      commandId: 'toggle_panel_frames',
+      menuPath: 'view/panels',
+      group: 'panels',
+      order: 30,
+      label: 'Animation',
+    });
+
+    api.addCommand('toggle_panel_seam_checker', {
+      tier: 'project',
+      execute() {
+        if (dockState.isPanelVisible('seam-checker')) {
+          dockState.removePanel('seam-checker');
+        } else {
+          dockState.addPanel('seam-checker');
+        }
+      },
+      undo() {},
+      describe() { return 'Toggle Seam Checker panel'; },
+      label: 'Seam Checker',
+      category: 'View',
+      icon: ScanLine,
+    });
+    api.addMenuItem('menu:view:panel:seam-checker', {
+      commandId: 'toggle_panel_seam_checker',
+      menuPath: 'view/panels',
+      group: 'panels',
+      order: 40,
+      label: 'Seam Checker',
+    });
+
+    // --- View > Toolbars submenu ---
+
+    api.addCommand('toggle_toolbar_drawing', {
+      tier: 'project',
+      icon: Wrench,
+      execute() {
+        if (dockState.isPanelVisible('toolbar-drawing-tools')) {
+          dockState.removePanel('toolbar-drawing-tools');
+        } else {
+          dockState.addPanel('toolbar-drawing-tools');
+        }
+      },
+      undo() {},
+      describe() { return 'Toggle Drawing Tools toolbar'; },
+      label: 'Drawing Tools',
+      category: 'View',
+    });
+    api.addMenuItem('menu:view:toolbar:drawing', {
+      commandId: 'toggle_toolbar_drawing',
+      menuPath: 'view/toolbars',
+      group: 'toolbars',
+      order: 10,
+      label: 'Drawing Tools',
+    });
+
+    api.addCommand('toggle_toolbar_view_controls', {
+      tier: 'project',
+      icon: SlidersHorizontal,
+      execute() {
+        if (dockState.isPanelVisible('toolbar-view-controls')) {
+          dockState.removePanel('toolbar-view-controls');
+        } else {
+          dockState.addPanel('toolbar-view-controls');
+        }
+      },
+      undo() {},
+      describe() { return 'Toggle View Controls toolbar'; },
+      label: 'View Controls',
+      category: 'View',
+    });
+    api.addMenuItem('menu:view:toolbar:view-controls', {
+      commandId: 'toggle_toolbar_view_controls',
+      menuPath: 'view/toolbars',
+      group: 'toolbars',
+      order: 20,
+      label: 'View Controls',
+    });
+
+    api.addCommand('reset_toolbar_config', {
+      tier: 'project',
+      icon: RotateCcw,
+      execute() { resetAllToolbarConfigs(); },
+      undo() {},
+      describe() { return 'Reset all toolbar configurations'; },
+      label: 'Reset Toolbars',
+      category: 'View',
+    });
+    api.addMenuItem('menu:view:toolbar:reset', {
+      commandId: 'reset_toolbar_config',
+      menuPath: 'view/toolbars',
+      group: 'reset',
+      order: 100,
+      label: 'Reset Toolbars',
+    });
+
+    // --- View > Layouts submenu ---
+
+    for (const preset of presets) {
+      const presetKey = preset.name.toLowerCase().replace(/\s+/g, '-');
+      api.addCommand(`layout_${presetKey}`, {
+        tier: 'project',
+        execute() { preset.apply(); },
+        undo() {},
+        describe() { return `Applied ${preset.name} layout`; },
+        label: preset.name,
+        category: 'View',
+      });
+      api.addMenuItem(`menu:view:layout:${presetKey}`, {
+        commandId: `layout_${presetKey}`,
+        menuPath: 'view/layouts',
+        group: 'presets',
+        order: presets.indexOf(preset) * 10 + 10,
+        label: `${preset.name} -- ${preset.description}`,
+      });
+    }
+
+    // Reset Layout clears saved state and applies Default preset
+    api.addCommand('reset_layout', {
+      tier: 'project',
+      execute() {
+        clearLayout();
+        const defaultPreset = presets.find(p => p.name === 'Default');
+        defaultPreset?.apply();
+      },
+      undo() {},
+      describe() { return 'Reset layout to default'; },
+      label: 'Reset Layout',
+      category: 'View',
+      icon: LayoutDashboard,
+    });
+    api.addMenuItem('menu:view:layout:reset', {
+      commandId: 'reset_layout',
+      menuPath: 'view/layouts',
+      group: 'reset',
+      order: 100,
+      label: 'Reset Layout',
+    });
+
+    // --- View controls toolbar ---
+
+    api.addToolbarItem('toolbar:view-controls:undo', {
+      toolbarId: 'view-controls',
+      kind: 'command',
+      targetId: 'undo',
+      group: 'history',
+      order: 10,
+    });
+    api.addToolbarItem('toolbar:view-controls:redo', {
+      toolbarId: 'view-controls',
+      kind: 'command',
+      targetId: 'redo',
+      group: 'history',
+      order: 20,
+    });
+    api.addToolbarItem('toolbar:view-controls:zoom_in', {
+      toolbarId: 'view-controls',
+      kind: 'command',
+      targetId: 'zoom_in',
+      group: 'zoom',
+      order: 10,
+    });
+    api.addToolbarItem('toolbar:view-controls:zoom_out', {
+      toolbarId: 'view-controls',
+      kind: 'command',
+      targetId: 'zoom_out',
+      group: 'zoom',
+      order: 20,
+    });
+    api.addToolbarItem('toolbar:view-controls:zoom_reset', {
+      toolbarId: 'view-controls',
+      kind: 'command',
+      targetId: 'zoom_reset',
+      group: 'zoom',
+      order: 30,
+    });
+    api.addToolbarItem('toolbar:view-controls:fit_to_view', {
+      toolbarId: 'view-controls',
+      kind: 'command',
+      targetId: 'fit_to_view',
+      group: 'zoom',
+      order: 40,
+    });
+    api.addToolbarItem('toolbar:view-controls:center_canvas', {
+      toolbarId: 'view-controls',
+      kind: 'command',
+      targetId: 'center_canvas',
+      group: 'zoom',
+      order: 50,
+    });
+    api.addToolbarItem('toolbar:view-controls:toggle_grid', {
+      toolbarId: 'view-controls',
+      kind: 'command',
+      targetId: 'toggle_grid',
+      group: 'display',
+      order: 10,
+    });
+    api.addToolbarItem('toolbar:view-controls:toggle_pixel_grid', {
+      toolbarId: 'view-controls',
+      kind: 'command',
+      targetId: 'toggle_pixel_grid',
+      group: 'display',
+      order: 20,
+    });
+    api.addToolbarItem('toolbar:view-controls:toggle_tile_mode', {
+      toolbarId: 'view-controls',
+      kind: 'command',
+      targetId: 'toggle_tile_mode',
+      group: 'display',
+      order: 30,
+    });
+    api.addToolbarItem('toolbar:view-controls:toggle_onion_skin', {
+      toolbarId: 'view-controls',
+      kind: 'command',
+      targetId: 'toggle_onion_skin',
+      group: 'display',
+      order: 40,
+    });
+    api.addToolbarItem('toolbar:view-controls:toggle_iso_guide', {
+      toolbarId: 'view-controls',
+      kind: 'command',
+      targetId: 'toggle_iso_guide',
+      group: 'display',
+      order: 50,
+    });
+    api.addToolbarItem('toolbar:view-controls:toggle-editor-mode', {
+      toolbarId: 'view-controls',
+      kind: 'command',
+      targetId: 'toggle_editor_mode',
+      group: 'editor',
+      order: 60,
+    });
+
+    // --- Context menu: canvas ---
+
+    api.addMenuItem('ctx:canvas:undo', {
+      commandId: 'undo',
+      menuPath: 'context/canvas',
+      group: 'edit',
+      order: 10,
+      label: 'Undo',
+    });
+    api.addMenuItem('ctx:canvas:redo', {
+      commandId: 'redo',
+      menuPath: 'context/canvas',
+      group: 'edit',
+      order: 20,
+      label: 'Redo',
+    });
+  },
+};