viteboard 0.1.1 → 0.1.2

package/src/tools/ToolController.ts

@@ -1,178 +0,0 @@
-import type { Tool, ToolContext, ToolName } from "./ToolContext";
-import { zoomAt } from "../canvas/Viewport";
-
-const LINE_HEIGHT_PX = 16;
-const PAGE_HEIGHT_PX = 720;
-const MAX_WHEEL_DELTA = 120;
-const ZOOM_SENSITIVITY = 0.0032;
-
-export class ToolController {
-  private tools = new Map<ToolName, Tool>();
-  private active: Tool;
-  private ctx: ToolContext;
-  private target: HTMLElement;
-
-  /** spacebar / middle-mouse temporary pan */
-  private spaceDown = false;
-  private tempPanning = false;
-  private panLast = { x: 0, y: 0 };
-
-  private toolChangeListeners: ((tool: ToolName) => void)[] = [];
-  private signal?: AbortSignal;
-
-  constructor(target: HTMLElement, ctx: ToolContext, tools: Tool[], signal?: AbortSignal) {
-    this.target = target;
-    this.ctx = ctx;
-    this.signal = signal;
-    for (const tool of tools) this.tools.set(tool.name, tool);
-    this.active = this.tools.get("select")!;
-    this.bindEvents();
-  }
-
-  get activeName(): ToolName {
-    return this.active.name;
-  }
-
-  onToolChange(fn: (tool: ToolName) => void): void {
-    this.toolChangeListeners.push(fn);
-  }
-
-  setTool(name: ToolName): void {
-    if (this.active.name === name) {
-      // re-trigger activate for tools like image picker
-      this.active.onActivate?.(this.ctx);
-      return;
-    }
-    this.active.onDeactivate?.(this.ctx);
-    const tool = this.tools.get(name);
-    if (!tool) return;
-    this.active = tool;
-    this.ctx.setCursor(tool.cursor);
-    tool.onActivate?.(this.ctx);
-    for (const fn of this.toolChangeListeners) fn(name);
-  }
-
-  cancel(): void {
-    this.active.onCancel?.(this.ctx);
-  }
-
-  private bindEvents(): void {
-    const t = this.target;
-
-    t.addEventListener("pointerdown", (e) => {
-      // middle mouse, right mouse, or spacebar temporarily pan.
-      if (e.button === 1 || e.button === 2 || this.spaceDown) {
-        e.preventDefault();
-        this.tempPanning = true;
-        this.panLast = { x: e.clientX, y: e.clientY };
-        this.ctx.setCursor("grabbing");
-        t.setPointerCapture(e.pointerId);
-        return;
-      }
-      if (e.button !== 0) return;
-      t.setPointerCapture(e.pointerId);
-      this.active.onPointerDown(e, this.ctx);
-    });
-
-    t.addEventListener("pointermove", (e) => {
-      if (this.tempPanning) {
-        const vp = this.ctx.state.viewport;
-        vp.offsetX += e.clientX - this.panLast.x;
-        vp.offsetY += e.clientY - this.panLast.y;
-        this.panLast = { x: e.clientX, y: e.clientY };
-        this.ctx.state.requestRender();
-        return;
-      }
-      this.active.onPointerMove(e, this.ctx);
-    });
-
-    t.addEventListener("pointerup", (e) => {
-      if (this.tempPanning) {
-        this.tempPanning = false;
-        this.ctx.setCursor(this.spaceDown ? "grab" : this.active.cursor);
-        return;
-      }
-      this.active.onPointerUp(e, this.ctx);
-    });
-
-    t.addEventListener("pointercancel", () => {
-      if (!this.tempPanning) return;
-      this.tempPanning = false;
-      this.ctx.setCursor(this.spaceDown ? "grab" : this.active.cursor);
-    });
-
-    t.addEventListener("dblclick", (e) => {
-      this.active.onDoubleClick?.(e as unknown as PointerEvent, this.ctx);
-    });
-
-    // wheel: zoom (ctrl/cmd or pinch) and trackpad pan
-    t.addEventListener(
-      "wheel",
-      (e) => {
-        e.preventDefault();
-        const vp = this.ctx.state.viewport;
-        const dx = normalizeWheelDelta(e.deltaX, e.deltaMode, this.ctx.state.viewport.scale);
-        const dy = normalizeWheelDelta(e.deltaY, e.deltaMode, this.ctx.state.viewport.scale);
-        if (e.ctrlKey || e.metaKey) {
-          // pinch-zoom or ctrl+wheel: cursor-centered zoom with normalized deltas
-          const factor = Math.exp(-clampWheelDelta(dy) * ZOOM_SENSITIVITY);
-          zoomAt(vp, e.clientX, e.clientY, vp.scale * factor);
-        } else {
-          // trackpad two-finger pan / mouse wheel scroll.
-          // Shift+wheel pans horizontally to make wide boards easier to navigate.
-          if (e.shiftKey && Math.abs(dx) < Math.abs(dy)) {
-            vp.offsetX -= dy;
-          } else {
-            vp.offsetX -= dx;
-            vp.offsetY -= dy;
-          }
-        }
-        this.ctx.state.requestRender();
-      },
-      { passive: false }
-    );
-
-    // spacebar temporary hand tool
-    window.addEventListener("keydown", (e) => {
-      if (e.code === "Space" && !this.isEditingText(e)) {
-        if (!this.spaceDown) {
-          this.spaceDown = true;
-          if (!this.tempPanning) this.ctx.setCursor("grab");
-        }
-        e.preventDefault();
-      }
-    }, { signal: this.signal });
-
-    window.addEventListener("keyup", (e) => {
-      if (e.code === "Space") {
-        this.spaceDown = false;
-        if (!this.tempPanning) this.ctx.setCursor(this.active.cursor);
-      }
-    }, { signal: this.signal });
-
-    // prevent context menu so right-drag can pan cleanly.
-    t.addEventListener("contextmenu", (e) => e.preventDefault());
-  }
-
-  private isEditingText(e: KeyboardEvent): boolean {
-    const target = e.target as HTMLElement | null;
-    return (
-      !!target &&
-      (target.tagName === "TEXTAREA" ||
-        target.tagName === "INPUT" ||
-        target.isContentEditable)
-    );
-  }
-}
-
-function normalizeWheelDelta(delta: number, deltaMode: number, scale: number): number {
-  const modeFactor = deltaMode === 1 ? LINE_HEIGHT_PX : deltaMode === 2 ? PAGE_HEIGHT_PX : 1;
-  const pixels = delta * modeFactor;
-  // When zoomed far out, slightly reduce pan velocity to avoid overshooting.
-  const zoomFriction = scale < 0.5 ? 0.8 : scale > 2 ? 1.08 : 1;
-  return pixels * zoomFriction;
-}
-
-function clampWheelDelta(delta: number): number {
-  return Math.max(-MAX_WHEEL_DELTA, Math.min(MAX_WHEEL_DELTA, delta));
-}

package/src/ui/Modal.ts

@@ -1,58 +0,0 @@
-/**
- * Minimal modal helper. Content is built with DOM APIs (no user innerHTML).
- */
-export function openModal(title: string, build: (body: HTMLDivElement, close: () => void) => void): void {
-  const backdrop = document.createElement("div");
-  backdrop.className = "modal-backdrop";
-
-  const modal = document.createElement("div");
-  modal.className = "modal";
-  modal.setAttribute("role", "dialog");
-  modal.setAttribute("aria-label", title);
-
-  const closeBtn = document.createElement("button");
-  closeBtn.className = "modal-close";
-  closeBtn.textContent = "✕";
-  closeBtn.setAttribute("aria-label", "Close");
-
-  const heading = document.createElement("h2");
-  heading.textContent = title;
-
-  const body = document.createElement("div");
-
-  const close = () => backdrop.remove();
-  closeBtn.addEventListener("click", close);
-  backdrop.addEventListener("click", (e) => {
-    if (e.target === backdrop) close();
-  });
-  backdrop.addEventListener("keydown", (e) => {
-    e.stopPropagation();
-    if (e.key === "Escape") close();
-  });
-
-  modal.appendChild(closeBtn);
-  modal.appendChild(heading);
-  modal.appendChild(body);
-  backdrop.appendChild(modal);
-  document.body.appendChild(backdrop);
-
-  build(body, close);
-  closeBtn.focus();
-}
-
-let toastEl: HTMLDivElement | null = null;
-let toastTimer: number | null = null;
-
-export function showToast(message: string): void {
-  if (!toastEl) {
-    toastEl = document.createElement("div");
-    toastEl.className = "toast";
-    document.body.appendChild(toastEl);
-  }
-  toastEl.textContent = message;
-  toastEl.classList.add("visible");
-  if (toastTimer !== null) clearTimeout(toastTimer);
-  toastTimer = window.setTimeout(() => {
-    toastEl?.classList.remove("visible");
-  }, 2600);
-}

package/src/ui/PerformanceOverlay.ts

@@ -1,75 +0,0 @@
-import type { BoardState } from "../app/BoardState";
-import type { CanvasRenderer } from "../canvas/CanvasRenderer";
-import type { HitTester } from "../canvas/HitTester";
-import type { PerformanceMonitor } from "../canvas/PerformanceMonitor";
-import type { ImageCache } from "../canvas/ImageCache";
-import { boardStore } from "../storage/LocalBoardStore";
-import { assetStore } from "../storage/AssetStore";
-
-export class PerformanceOverlay {
-  element: HTMLDivElement;
-  visible = false;
-
-  private state: BoardState;
-  private renderer: CanvasRenderer;
-  private hitTester: HitTester;
-  private monitor: PerformanceMonitor;
-  private imageCache: ImageCache;
-  private timer: number | null = null;
-  private storageEstimate = "–";
-
-  constructor(
-    parent: HTMLElement,
-    state: BoardState,
-    renderer: CanvasRenderer,
-    hitTester: HitTester,
-    monitor: PerformanceMonitor,
-    imageCache: ImageCache
-  ) {
-    this.state = state;
-    this.renderer = renderer;
-    this.hitTester = hitTester;
-    this.monitor = monitor;
-    this.imageCache = imageCache;
-    this.element = document.createElement("div");
-    this.element.className = "perf-overlay";
-    parent.appendChild(this.element);
-  }
-
-  toggle(): void {
-    this.visible = !this.visible;
-    this.element.classList.toggle("visible", this.visible);
-    if (this.visible) {
-      this.monitor.start();
-      this.update();
-      this.timer = window.setInterval(() => this.update(), 500);
-      void this.refreshStorage();
-    } else if (this.timer !== null) {
-      clearInterval(this.timer);
-      this.timer = null;
-    }
-  }
-
-  private async refreshStorage(): Promise<void> {
-    const bytes = await assetStore.totalSizeBytes();
-    this.storageEstimate = (bytes / (1024 * 1024)).toFixed(1) + "MB";
-  }
-
-  private update(): void {
-    const vp = this.state.viewport;
-    const lines = [
-      `FPS: ${this.monitor.fps}`,
-      `Total elements: ${this.state.elements.length.toLocaleString()}`,
-      `Visible elements: ${this.renderer.visibleCount.toLocaleString()}`,
-      `Render time: ${this.renderer.lastRenderMs.toFixed(1)}ms`,
-      `Hit-test time: ${this.hitTester.lastHitTestMs.toFixed(2)}ms`,
-      `Save time: ${boardStore.lastSaveMs.toFixed(0)}ms`,
-      `Image cache: ${this.imageCache.size}`,
-      `Estimated storage: ${this.storageEstimate}`,
-      `Zoom: ${Math.round(vp.scale * 100)}%`,
-      `Viewport: x: ${Math.round(-vp.offsetX / vp.scale)}, y: ${Math.round(-vp.offsetY / vp.scale)}`,
-      `Culling: ${this.renderer.cullingEnabled ? "on" : "off"}  LOD: ${this.renderer.lodEnabled ? "on" : "off"}`,
-    ];
-    this.element.textContent = lines.join("\n");
-  }
-}

package/src/ui/StorageManager.ts

@@ -1,94 +0,0 @@
-import { openModal, showToast } from "./Modal";
-import type { BoardState } from "../app/BoardState";
-import { assetStore } from "../storage/AssetStore";
-import { boardStore } from "../storage/LocalBoardStore";
-
-function formatBytes(bytes: number): string {
-  if (bytes < 1024) return bytes + " B";
-  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + " KB";
-  return (bytes / (1024 * 1024)).toFixed(1) + " MB";
-}
-
-export function openStorageManager(
-  state: BoardState,
-  onClearBoard: () => void,
-  onResetAll: () => void
-): void {
-  openModal("Local storage", async (body, close) => {
-    const rows = document.createElement("div");
-    body.appendChild(rows);
-
-    const addRow = (name: string, value: string) => {
-      const row = document.createElement("div");
-      row.className = "storage-row";
-      const a = document.createElement("span");
-      a.textContent = name;
-      const b = document.createElement("span");
-      b.textContent = value;
-      row.appendChild(a);
-      row.appendChild(b);
-      rows.appendChild(row);
-    };
-
-    addRow("Elements on board", String(state.elements.length));
-
-    const boardJson = JSON.stringify(state.elements);
-    addRow("Board data size", formatBytes(boardJson.length));
-
-    const assetKeys = await assetStore.getAllKeys();
-    addRow("Image assets", String(assetKeys.length));
-
-    const assetBytes = await assetStore.totalSizeBytes();
-    addRow("Image asset size", formatBytes(assetBytes));
-
-    const est = await boardStore.estimateStorage();
-    if (est.quota > 0) {
-      addRow(
-        "Browser storage",
-        `${formatBytes(est.usage)} of ${formatBytes(est.quota)}`
-      );
-    }
-
-    const actions = document.createElement("div");
-    actions.className = "modal-actions";
-
-    const clearUnusedBtn = document.createElement("button");
-    clearUnusedBtn.className = "btn";
-    clearUnusedBtn.textContent = "Clear unused assets";
-    clearUnusedBtn.addEventListener("click", async () => {
-      const referenced = new Set<string>();
-      for (const el of state.elements) {
-        const id = el.data.assetId;
-        if (typeof id === "string") referenced.add(id);
-      }
-      const removed = await assetStore.clearUnused(referenced);
-      showToast(`Removed ${removed} unused asset${removed === 1 ? "" : "s"}`);
-      close();
-    });
-    actions.appendChild(clearUnusedBtn);
-
-    const clearBoardBtn = document.createElement("button");
-    clearBoardBtn.className = "btn danger";
-    clearBoardBtn.textContent = "Clear board";
-    clearBoardBtn.addEventListener("click", () => {
-      if (confirm("Remove all elements from this board?")) {
-        onClearBoard();
-        close();
-      }
-    });
-    actions.appendChild(clearBoardBtn);
-
-    const resetBtn = document.createElement("button");
-    resetBtn.className = "btn danger";
-    resetBtn.textContent = "Reset all local data";
-    resetBtn.addEventListener("click", () => {
-      if (confirm("Delete ALL local boards, assets and preferences? This cannot be undone.")) {
-        onResetAll();
-        close();
-      }
-    });
-    actions.appendChild(resetBtn);
-
-    body.appendChild(actions);
-  });
-}

package/src/ui/TemplatePicker.ts

@@ -1,67 +0,0 @@
-import { openModal } from "./Modal";
-import { TEMPLATES } from "../templates";
-import type { BoardState } from "../app/BoardState";
-import type { CommandManager } from "../app/CommandManager";
-import { screenToWorld } from "../canvas/Viewport";
-import type { BoardElement } from "../elements/types";
-
-export function openTemplatePicker(state: BoardState, commands: CommandManager): void {
-  openModal("Insert a template", (body, close) => {
-    const grid = document.createElement("div");
-    grid.className = "template-grid";
-
-    for (const def of TEMPLATES) {
-      const card = document.createElement("button");
-      card.className = "template-card";
-
-      const name = document.createElement("span");
-      name.className = "t-name";
-      name.textContent = def.name;
-
-      const desc = document.createElement("span");
-      desc.className = "t-desc";
-      desc.textContent = def.description;
-
-      card.appendChild(name);
-      card.appendChild(desc);
-      card.addEventListener("click", () => {
-        insertTemplate(state, commands, def.build);
-        close();
-      });
-      grid.appendChild(card);
-    }
-
-    body.appendChild(grid);
-  });
-}
-
-function insertTemplate(
-  state: BoardState,
-  commands: CommandManager,
-  build: (ox: number, oy: number, theme: "light" | "dark", baseZ: number) => BoardElement[]
-): void {
-  const center = screenToWorld(
-    window.innerWidth / 2,
-    window.innerHeight / 2,
-    state.viewport
-  );
-  const elements = build(center.x - 380, center.y - 280, state.theme, state.maxZIndex());
-
-  commands.execute(
-    "insert-template",
-    () => {
-      for (const el of elements) {
-        if (!state.elementsById.has(el.id)) state.addElement(el);
-      }
-      state.emitChange();
-    },
-    () => {
-      for (const el of elements) state.removeElement(el.id);
-      state.emitChange();
-    }
-  );
-
-  state.clearSelection();
-  for (const el of elements) state.selectedIds.add(el.id);
-  state.requestRender();
-}