viteboard 0.1.0

package/src/tools/ShapeTool.ts

@@ -0,0 +1,106 @@
+import type { Tool, ToolContext } from "./ToolContext";
+import type { ToolName } from "./ToolContext";
+import { createElement, type BoardElement, type ElementType } from "../elements/types";
+import { screenToWorld } from "../canvas/Viewport";
+
+type ShapeToolName = Extract<ToolName, "rectangle" | "ellipse" | "diamond" | "triangle" | "pill" | "chevron">;
+
+export class ShapeTool implements Tool {
+  name: ShapeToolName;
+  cursor = "crosshair";
+
+  private shapeType: ElementType;
+  private shapeKind: ShapeToolName;
+  private drawing = false;
+  private startWorld = { x: 0, y: 0 };
+  private preview: BoardElement | null = null;
+
+  constructor(name: ShapeToolName) {
+    this.name = name;
+    this.shapeKind = name;
+    this.shapeType = name === "ellipse" ? "ellipse" : "rectangle";
+  }
+
+  onPointerDown(e: PointerEvent, ctx: ToolContext): void {
+    const { state } = ctx;
+    this.drawing = true;
+    this.startWorld = screenToWorld(e.clientX, e.clientY, state.viewport);
+    const isDark = state.theme === "dark";
+    const isGraphicShape = !["rectangle", "ellipse", "pill"].includes(this.shapeKind);
+    this.preview = createElement(this.shapeType, {
+      x: this.startWorld.x,
+      y: this.startWorld.y,
+      width: 0,
+      height: 0,
+      zIndex: state.maxZIndex() + 1,
+      style: {
+        fill: isGraphicShape ? "#0078d4" : isDark ? "#2a2d33" : "#ffffff",
+        stroke: isGraphicShape ? "#495057" : isDark ? "#9ca3af" : "#374151",
+        strokeWidth: isGraphicShape ? 0 : 1.5,
+        borderRadius: this.shapeKind === "pill" ? 999 : this.shapeKind === "rectangle" ? 8 : 0,
+        fontSize: 14,
+        textColor: isGraphicShape ? "#ffffff" : isDark ? "#f2f2f2" : "#1f2933",
+      },
+      data: { text: "", shapeKind: this.shapeKind },
+    });
+    ctx.renderer.overlay.preview = this.preview;
+  }
+
+  onPointerMove(e: PointerEvent, ctx: ToolContext): void {
+    if (!this.drawing || !this.preview) return;
+    const world = screenToWorld(e.clientX, e.clientY, ctx.state.viewport);
+    let w = world.x - this.startWorld.x;
+    let h = world.y - this.startWorld.y;
+    if (e.shiftKey) {
+      const size = Math.max(Math.abs(w), Math.abs(h));
+      w = Math.sign(w || 1) * size;
+      h = Math.sign(h || 1) * size;
+    }
+    this.preview.x = Math.min(this.startWorld.x, this.startWorld.x + w);
+    this.preview.y = Math.min(this.startWorld.y, this.startWorld.y + h);
+    this.preview.width = Math.abs(w);
+    this.preview.height = Math.abs(h);
+    ctx.state.requestRender();
+  }
+
+  onPointerUp(_e: PointerEvent, ctx: ToolContext): void {
+    const { state, commands } = ctx;
+    if (!this.drawing || !this.preview) return;
+    this.drawing = false;
+    ctx.renderer.overlay.preview = null;
+
+    const el = this.preview;
+    this.preview = null;
+
+    if (el.width < 4 || el.height < 4) {
+      // tiny click: create a default-size shape
+      el.width = this.shapeKind === "chevron" ? 210 : 160;
+      el.height = this.shapeKind === "chevron" ? 76 : 100;
+      el.x -= el.width / 2;
+      el.y -= el.height / 2;
+    }
+
+    commands.execute(
+      "create-shape",
+      () => {
+        if (!state.elementsById.has(el.id)) state.addElement(el);
+        state.emitChange();
+      },
+      () => {
+        state.removeElement(el.id);
+        state.emitChange();
+      }
+    );
+
+    state.clearSelection();
+    state.selectedIds.add(el.id);
+    ctx.setTool("select");
+  }
+
+  onCancel(ctx: ToolContext): void {
+    this.drawing = false;
+    this.preview = null;
+    ctx.renderer.overlay.preview = null;
+    ctx.state.requestRender();
+  }
+}

package/src/tools/StickyTool.ts

@@ -0,0 +1,69 @@
+import type { Tool, ToolContext } from "./ToolContext";
+import { createElement } from "../elements/types";
+import { screenToWorld } from "../canvas/Viewport";
+
+export const STICKY_COLORS = [
+  "#fef08a",
+  "#fdba74",
+  "#fca5a5",
+  "#f9a8d4",
+  "#d8b4fe",
+  "#a5b4fc",
+  "#93c5fd",
+  "#86efac",
+];
+
+let lastStickyColor = STICKY_COLORS[0];
+
+export function getLastStickyColor(): string {
+  return lastStickyColor;
+}
+
+export function setLastStickyColor(color: string): void {
+  lastStickyColor = color;
+}
+
+export class StickyTool implements Tool {
+  name = "sticky" as const;
+  cursor = "crosshair";
+
+  onPointerDown(e: PointerEvent, ctx: ToolContext): void {
+    const { state, commands } = ctx;
+    const world = screenToWorld(e.clientX, e.clientY, state.viewport);
+    const el = createElement("sticky", {
+      x: world.x - 110,
+      y: world.y - 80,
+      width: 220,
+      height: 160,
+      zIndex: state.maxZIndex() + 1,
+      style: {
+        fill: getLastStickyColor(),
+        borderRadius: 12,
+        shadow: true,
+        fontSize: 15,
+        textColor: "#1f2933",
+      },
+      data: { text: "" },
+    });
+
+    commands.execute(
+      "create-sticky",
+      () => {
+        if (!state.elementsById.has(el.id)) state.addElement(el);
+        state.emitChange();
+      },
+      () => {
+        state.removeElement(el.id);
+        state.emitChange();
+      }
+    );
+
+    state.clearSelection();
+    state.selectedIds.add(el.id);
+    ctx.setTool("select");
+    ctx.openTextEditor(el);
+  }
+
+  onPointerMove(_e: PointerEvent, _ctx: ToolContext): void {}
+  onPointerUp(_e: PointerEvent, _ctx: ToolContext): void {}
+}

package/src/tools/TaskTool.ts

@@ -0,0 +1,52 @@
+import type { Tool, ToolContext } from "./ToolContext";
+import { createElement } from "../elements/types";
+import { screenToWorld } from "../canvas/Viewport";
+
+export class TaskTool implements Tool {
+  name = "task" as const;
+  cursor = "crosshair";
+
+  onPointerDown(e: PointerEvent, ctx: ToolContext): void {
+    const { state, commands } = ctx;
+    const world = screenToWorld(e.clientX, e.clientY, state.viewport);
+    const isDark = state.theme === "dark";
+    const el = createElement("task", {
+      x: world.x - 140,
+      y: world.y - 28,
+      width: 280,
+      height: 56,
+      zIndex: state.maxZIndex() + 1,
+      style: {
+        fill: isDark ? "#17191b" : "#ffffff",
+        stroke: isDark ? "rgba(255,255,255,0.12)" : "rgba(0,0,0,0.09)",
+        strokeWidth: 1,
+        borderRadius: 14,
+        shadow: true,
+        fontSize: 15,
+        fontWeight: "650",
+        textColor: isDark ? "#f6f6f3" : "#252829",
+      },
+      data: { text: "Task title", checked: false },
+    });
+
+    commands.execute(
+      "create-task",
+      () => {
+        if (!state.elementsById.has(el.id)) state.addElement(el);
+        state.emitChange();
+      },
+      () => {
+        state.removeElement(el.id);
+        state.emitChange();
+      }
+    );
+
+    state.clearSelection();
+    state.selectedIds.add(el.id);
+    ctx.setTool("select");
+    ctx.openTextEditor(el);
+  }
+
+  onPointerMove(_e: PointerEvent, _ctx: ToolContext): void {}
+  onPointerUp(_e: PointerEvent, _ctx: ToolContext): void {}
+}

package/src/tools/TextTool.ts

@@ -0,0 +1,45 @@
+import type { Tool, ToolContext } from "./ToolContext";
+import { createElement } from "../elements/types";
+import { screenToWorld } from "../canvas/Viewport";
+
+export class TextTool implements Tool {
+  name = "text" as const;
+  cursor = "text";
+
+  onPointerDown(e: PointerEvent, ctx: ToolContext): void {
+    const { state, commands } = ctx;
+    const world = screenToWorld(e.clientX, e.clientY, state.viewport);
+    const el = createElement("text", {
+      x: world.x,
+      y: world.y - 12,
+      width: 240,
+      height: 28,
+      zIndex: state.maxZIndex() + 1,
+      style: {
+        fontSize: 16,
+        textColor: state.theme === "dark" ? "#f2f2f2" : "#1f2933",
+      },
+      data: { text: "" },
+    });
+
+    commands.execute(
+      "create-text",
+      () => {
+        if (!state.elementsById.has(el.id)) state.addElement(el);
+        state.emitChange();
+      },
+      () => {
+        state.removeElement(el.id);
+        state.emitChange();
+      }
+    );
+
+    state.clearSelection();
+    state.selectedIds.add(el.id);
+    ctx.setTool("select");
+    ctx.openTextEditor(el);
+  }
+
+  onPointerMove(_e: PointerEvent, _ctx: ToolContext): void {}
+  onPointerUp(_e: PointerEvent, _ctx: ToolContext): void {}
+}

package/src/tools/ToolContext.ts

@@ -0,0 +1,44 @@
+import type { BoardState } from "../app/BoardState";
+import type { CommandManager } from "../app/CommandManager";
+import type { CanvasRenderer } from "../canvas/CanvasRenderer";
+import type { CanvasSurface } from "../canvas/CanvasSurface";
+import type { HitTester } from "../canvas/HitTester";
+import type { BoardElement } from "../elements/types";
+
+export type ToolName =
+  | "select"
+  | "hand"
+  | "sticky"
+  | "task"
+  | "rectangle"
+  | "ellipse"
+  | "diamond"
+  | "triangle"
+  | "pill"
+  | "chevron"
+  | "text"
+  | "arrow"
+  | "image";
+
+export type ToolContext = {
+  state: BoardState;
+  renderer: CanvasRenderer;
+  surface: CanvasSurface;
+  hitTester: HitTester;
+  commands: CommandManager;
+  setTool: (tool: ToolName) => void;
+  setCursor: (cursor: string) => void;
+  openTextEditor: (el: BoardElement) => void;
+};
+
+export interface Tool {
+  name: ToolName;
+  cursor: string;
+  onPointerDown(e: PointerEvent, ctx: ToolContext): void;
+  onPointerMove(e: PointerEvent, ctx: ToolContext): void;
+  onPointerUp(e: PointerEvent, ctx: ToolContext): void;
+  onDoubleClick?(e: PointerEvent, ctx: ToolContext): void;
+  onCancel?(ctx: ToolContext): void;
+  onActivate?(ctx: ToolContext): void;
+  onDeactivate?(ctx: ToolContext): void;
+}

package/src/tools/ToolController.ts

@@ -0,0 +1,178 @@
+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

@@ -0,0 +1,58 @@
+/**
+ * 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

@@ -0,0 +1,75 @@
+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");
+  }
+}