viteboard 0.1.0 → 0.1.2

package/src/tools/ShapeTool.ts

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

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

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

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

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

@@ -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");
-  }
-}