viteboard 0.1.0

package/src/testing/StressTestPanel.ts

@@ -0,0 +1,64 @@
+import type { StressTestGenerator } from "./StressTestGenerator";
+import type { CanvasRenderer } from "../canvas/CanvasRenderer";
+import { showToast } from "../ui/Modal";
+
+export class StressTestPanel {
+  element: HTMLDivElement;
+  visible = false;
+
+  constructor(parent: HTMLElement, generator: StressTestGenerator, renderer: CanvasRenderer) {
+    this.element = document.createElement("div");
+    this.element.className = "stress-panel";
+
+    const addBtn = (text: string, onClick: () => void, danger = false) => {
+      const btn = document.createElement("button");
+      btn.className = "btn" + (danger ? " danger" : "");
+      btn.textContent = text;
+      btn.addEventListener("click", onClick);
+      this.element.appendChild(btn);
+    };
+
+    const gen = (n: number) => () => {
+      generator.generate(n);
+      showToast(`Generated ${n.toLocaleString()} elements in ${generator.lastGenerateMs.toFixed(0)}ms`);
+    };
+
+    addBtn("+100", gen(100));
+    addBtn("+1,000", gen(1000));
+    addBtn("+5,000", gen(5000));
+    addBtn("+10,000", gen(10000));
+    addBtn("+20,000", gen(20000));
+    addBtn("+100 images", () => {
+      generator.generateImagePlaceholders(100);
+      showToast("Generated 100 image placeholders");
+    });
+    addBtn("Mixed PM board", () => {
+      generator.generateMixedPmBoard();
+      showToast("Generated mixed PM board");
+    });
+    addBtn("Shuffle positions", () => generator.randomizePositions());
+    addBtn("Shuffle colors", () => generator.randomizeColors());
+    addBtn("Shuffle z-index", () => generator.randomizeZIndex());
+    addBtn("Toggle culling", () => {
+      renderer.cullingEnabled = !renderer.cullingEnabled;
+      showToast(`Viewport culling ${renderer.cullingEnabled ? "enabled" : "disabled"}`);
+      renderer.state.requestRender();
+    });
+    addBtn("Toggle LOD", () => {
+      renderer.lodEnabled = !renderer.lodEnabled;
+      showToast(`Simplified rendering ${renderer.lodEnabled ? "enabled" : "disabled"}`);
+      renderer.state.requestRender();
+    });
+    addBtn("Clear generated", () => {
+      generator.clearGenerated();
+      showToast("Cleared generated elements");
+    }, true);
+
+    parent.appendChild(this.element);
+  }
+
+  toggle(): void {
+    this.visible = !this.visible;
+    this.element.classList.toggle("visible", this.visible);
+  }
+}

package/src/tools/ArrowTool.ts

@@ -0,0 +1,87 @@
+import type { Tool, ToolContext } from "./ToolContext";
+import { createElement, type BoardElement } from "../elements/types";
+import { screenToWorld } from "../canvas/Viewport";
+
+export class ArrowTool implements Tool {
+  name = "arrow" as const;
+  cursor = "crosshair";
+
+  private drawing = false;
+  private startWorld = { x: 0, y: 0 };
+  private preview: BoardElement | null = null;
+
+  onPointerDown(e: PointerEvent, ctx: ToolContext): void {
+    const { state } = ctx;
+    this.drawing = true;
+    this.startWorld = screenToWorld(e.clientX, e.clientY, state.viewport);
+    this.preview = createElement("arrow", {
+      x: this.startWorld.x,
+      y: this.startWorld.y,
+      width: 0,
+      height: 0,
+      zIndex: state.maxZIndex() + 1,
+      style: {
+        stroke: state.theme === "dark" ? "#d1d5db" : "#374151",
+        strokeWidth: 2,
+        arrowEnd: true,
+      },
+    });
+    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 dx = world.x - this.startWorld.x;
+    let dy = world.y - this.startWorld.y;
+    if (e.shiftKey) {
+      // snap to 45-degree increments
+      const angle = Math.atan2(dy, dx);
+      const snapped = Math.round(angle / (Math.PI / 4)) * (Math.PI / 4);
+      const len = Math.hypot(dx, dy);
+      dx = Math.cos(snapped) * len;
+      dy = Math.sin(snapped) * len;
+    }
+    this.preview.width = dx;
+    this.preview.height = dy;
+    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 (Math.hypot(el.width, el.height) < 8) {
+      state.requestRender();
+      return;
+    }
+
+    commands.execute(
+      "create-arrow",
+      () => {
+        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/ImageTool.ts

@@ -0,0 +1,39 @@
+import type { Tool, ToolContext } from "./ToolContext";
+
+/**
+ * The image "tool" opens a file picker; insertion logic lives in
+ * ImageInsertService which is shared with paste and drag-and-drop.
+ */
+export class ImageTool implements Tool {
+  name = "image" as const;
+  cursor = "default";
+
+  private onInsert: (files: FileList, x: number, y: number) => void;
+
+  constructor(onInsert: (files: FileList, x: number, y: number) => void) {
+    this.onInsert = onInsert;
+  }
+
+  onActivate(ctx: ToolContext): void {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = "image/png,image/jpeg,image/webp,image/gif";
+    input.multiple = true;
+    input.onchange = () => {
+      if (input.files && input.files.length > 0) {
+        this.onInsert(
+          input.files,
+          window.innerWidth / 2,
+          window.innerHeight / 2
+        );
+      }
+      ctx.setTool("select");
+    };
+    input.oncancel = () => ctx.setTool("select");
+    input.click();
+  }
+
+  onPointerDown(_e: PointerEvent, _ctx: ToolContext): void {}
+  onPointerMove(_e: PointerEvent, _ctx: ToolContext): void {}
+  onPointerUp(_e: PointerEvent, _ctx: ToolContext): void {}
+}

package/src/tools/PanTool.ts

@@ -0,0 +1,34 @@
+import type { Tool, ToolContext } from "./ToolContext";
+
+export class PanTool implements Tool {
+  name = "hand" as const;
+  cursor = "grab";
+
+  private panning = false;
+  private last = { x: 0, y: 0 };
+
+  onPointerDown(e: PointerEvent, ctx: ToolContext): void {
+    this.panning = true;
+    this.last = { x: e.clientX, y: e.clientY };
+    ctx.setCursor("grabbing");
+  }
+
+  onPointerMove(e: PointerEvent, ctx: ToolContext): void {
+    if (!this.panning) return;
+    const vp = ctx.state.viewport;
+    vp.offsetX += e.clientX - this.last.x;
+    vp.offsetY += e.clientY - this.last.y;
+    this.last = { x: e.clientX, y: e.clientY };
+    ctx.state.requestRender();
+  }
+
+  onPointerUp(_e: PointerEvent, ctx: ToolContext): void {
+    this.panning = false;
+    ctx.setCursor("grab");
+  }
+
+  onCancel(ctx: ToolContext): void {
+    this.panning = false;
+    ctx.setCursor("grab");
+  }
+}

package/src/tools/SelectTool.ts

@@ -0,0 +1,377 @@
+import type { Tool, ToolContext } from "./ToolContext";
+import type { BoardElement } from "../elements/types";
+import { screenToWorld } from "../canvas/Viewport";
+import { handlePoints, type HandleId } from "../canvas/CanvasRenderer";
+import { invalidateTextCache } from "../elements/renderElement";
+
+type DragMode = "none" | "move" | "marquee" | "resize" | "endpoint";
+
+type Snapshot = { id: string; x: number; y: number; width: number; height: number };
+
+const HANDLE_HIT_RADIUS = 7;
+
+const HANDLE_CURSORS: Record<HandleId, string> = {
+  nw: "nwse-resize",
+  n: "ns-resize",
+  ne: "nesw-resize",
+  e: "ew-resize",
+  se: "nwse-resize",
+  s: "ns-resize",
+  sw: "nesw-resize",
+  w: "ew-resize",
+};
+
+export class SelectTool implements Tool {
+  name = "select" as const;
+  cursor = "default";
+
+  private mode: DragMode = "none";
+  private startScreen = { x: 0, y: 0 };
+  private startWorld = { x: 0, y: 0 };
+  private snapshots: Snapshot[] = [];
+  private activeHandle: HandleId | null = null;
+  private endpointIsStart = false;
+  private moved = false;
+  private pointerDownHitId: string | null = null;
+
+  onPointerDown(e: PointerEvent, ctx: ToolContext): void {
+    const { state, hitTester, renderer } = ctx;
+    this.startScreen = { x: e.clientX, y: e.clientY };
+    this.startWorld = screenToWorld(e.clientX, e.clientY, state.viewport);
+    this.moved = false;
+
+    // 1. resize handle on current selection?
+    const handle = this.hitHandle(e, ctx);
+    if (handle) {
+      this.mode = "resize";
+      this.activeHandle = handle;
+      this.takeSnapshots(state.getSelected());
+      return;
+    }
+
+    // 2. arrow/line endpoint?
+    const selected = state.getSelected();
+    if (selected.length === 1 && this.isLinear(selected[0])) {
+      const ep = this.hitEndpoint(e, selected[0], ctx);
+      if (ep !== null) {
+        this.mode = "endpoint";
+        this.endpointIsStart = ep;
+        this.takeSnapshots(selected);
+        return;
+      }
+    }
+
+    // 3. element under cursor?
+    const hit = hitTester.hitTest(this.startWorld.x, this.startWorld.y, state.viewport.scale);
+    if (hit) {
+      this.pointerDownHitId = hit.id;
+      if (e.shiftKey) {
+        if (state.selectedIds.has(hit.id)) state.selectedIds.delete(hit.id);
+        else state.selectedIds.add(hit.id);
+      } else if (!state.selectedIds.has(hit.id)) {
+        state.clearSelection();
+        state.selectedIds.add(hit.id);
+      }
+      this.mode = "move";
+      this.takeSnapshots(state.getSelected());
+      state.requestRender();
+      return;
+    }
+
+    // 4. empty canvas: marquee
+    if (!e.shiftKey) state.clearSelection();
+    this.mode = "marquee";
+    renderer.overlay.marquee = { x: e.clientX, y: e.clientY, w: 0, h: 0 };
+    state.requestRender();
+  }
+
+  onPointerMove(e: PointerEvent, ctx: ToolContext): void {
+    const { state, renderer, hitTester } = ctx;
+
+    if (this.mode === "none") {
+      // hover feedback + handle cursors
+      const handle = this.hitHandle(e, ctx);
+      if (handle) {
+        ctx.setCursor(HANDLE_CURSORS[handle]);
+        return;
+      }
+      const world = screenToWorld(e.clientX, e.clientY, state.viewport);
+      const hit = hitTester.hitTest(world.x, world.y, state.viewport.scale);
+      const newHover = hit ? hit.id : null;
+      ctx.setCursor(hit ? "move" : "default");
+      if (newHover !== state.hoveredId) {
+        state.hoveredId = newHover;
+        state.requestRender();
+      }
+      return;
+    }
+
+    const dxScreen = e.clientX - this.startScreen.x;
+    const dyScreen = e.clientY - this.startScreen.y;
+    if (Math.abs(dxScreen) + Math.abs(dyScreen) > 2) this.moved = true;
+
+    const dx = dxScreen / state.viewport.scale;
+    const dy = dyScreen / state.viewport.scale;
+
+    if (this.mode === "move") {
+      for (const snap of this.snapshots) {
+        const el = state.elementsById.get(snap.id);
+        if (!el || el.locked) continue;
+        el.x = snap.x + dx;
+        el.y = snap.y + dy;
+      }
+      state.requestRender();
+    } else if (this.mode === "marquee") {
+      renderer.overlay.marquee = {
+        x: this.startScreen.x,
+        y: this.startScreen.y,
+        w: dxScreen,
+        h: dyScreen,
+      };
+      state.requestRender();
+    } else if (this.mode === "resize" && this.activeHandle) {
+      this.applyResize(dx, dy, e.shiftKey, ctx);
+      state.requestRender();
+    } else if (this.mode === "endpoint") {
+      const snap = this.snapshots[0];
+      const el = state.elementsById.get(snap.id);
+      if (el) {
+        if (this.endpointIsStart) {
+          el.x = snap.x + dx;
+          el.y = snap.y + dy;
+          el.width = snap.width - dx;
+          el.height = snap.height - dy;
+        } else {
+          el.width = snap.width + dx;
+          el.height = snap.height + dy;
+        }
+      }
+      state.requestRender();
+    }
+  }
+
+  onPointerUp(e: PointerEvent, ctx: ToolContext): void {
+    const { state, renderer, hitTester, commands } = ctx;
+
+    if (this.mode === "marquee") {
+      const m = renderer.overlay.marquee;
+      renderer.overlay.marquee = null;
+      if (m && (Math.abs(m.w) > 3 || Math.abs(m.h) > 3)) {
+        const a = screenToWorld(m.x, m.y, state.viewport);
+        const b = screenToWorld(m.x + m.w, m.y + m.h, state.viewport);
+        const hits = hitTester.elementsInRect(a.x, a.y, b.x - a.x, b.y - a.y);
+        for (const el of hits) state.selectedIds.add(el.id);
+      }
+      state.requestRender();
+    } else if (
+      (this.mode === "move" || this.mode === "resize" || this.mode === "endpoint") &&
+      this.moved
+    ) {
+      // push undo command with before/after snapshots
+      const before = this.snapshots;
+      const after: Snapshot[] = before.map((s) => {
+        const el = state.elementsById.get(s.id)!;
+        return { id: s.id, x: el.x, y: el.y, width: el.width, height: el.height };
+      });
+      const apply = (snaps: Snapshot[]) => {
+        for (const s of snaps) {
+          const el = state.elementsById.get(s.id);
+          if (!el) continue;
+          el.x = s.x;
+          el.y = s.y;
+          el.width = s.width;
+          el.height = s.height;
+          el.updatedAt = Date.now();
+          invalidateTextCache(el.id);
+        }
+        state.emitChange();
+      };
+      for (const s of after) {
+        const el = state.elementsById.get(s.id);
+        if (el) {
+          el.updatedAt = Date.now();
+          invalidateTextCache(el.id);
+        }
+      }
+      commands.push(
+        this.mode,
+        () => apply(after),
+        () => apply(before)
+      );
+      state.emitChange();
+    } else if (this.mode === "move" && !this.moved) {
+      this.toggleTaskIfCheckboxClick(e, ctx);
+    }
+
+    this.mode = "none";
+    this.activeHandle = null;
+    this.snapshots = [];
+    this.pointerDownHitId = null;
+  }
+
+  onDoubleClick(e: PointerEvent, ctx: ToolContext): void {
+    const { state, hitTester } = ctx;
+    const world = screenToWorld(e.clientX, e.clientY, state.viewport);
+    const hit = hitTester.hitTest(world.x, world.y, state.viewport.scale);
+    if (hit && (hit.type === "sticky" || hit.type === "task" || hit.type === "text" || hit.type === "rectangle" || hit.type === "ellipse" || hit.type === "frame")) {
+      ctx.openTextEditor(hit);
+    }
+  }
+
+  onCancel(ctx: ToolContext): void {
+    // restore snapshots if mid-drag
+    if (this.mode !== "none" && this.snapshots.length > 0) {
+      for (const s of this.snapshots) {
+        const el = ctx.state.elementsById.get(s.id);
+        if (!el) continue;
+        el.x = s.x;
+        el.y = s.y;
+        el.width = s.width;
+        el.height = s.height;
+      }
+    }
+    ctx.renderer.overlay.marquee = null;
+    this.mode = "none";
+    ctx.state.clearSelection();
+    ctx.state.requestRender();
+  }
+
+  // ---------- helpers ----------
+
+  private isLinear(el: BoardElement): boolean {
+    return el.type === "line" || el.type === "arrow" || el.type === "connector";
+  }
+
+  private takeSnapshots(elements: BoardElement[]): void {
+    this.snapshots = elements.map((el) => ({
+      id: el.id,
+      x: el.x,
+      y: el.y,
+      width: el.width,
+      height: el.height,
+    }));
+  }
+
+  private toggleTaskIfCheckboxClick(e: PointerEvent, ctx: ToolContext): void {
+    const { state, hitTester, commands } = ctx;
+    const world = screenToWorld(e.clientX, e.clientY, state.viewport);
+    const hit = hitTester.hitTest(world.x, world.y, state.viewport.scale);
+    if (!hit || hit.id !== this.pointerDownHitId || hit.type !== "task") return;
+    if (!this.hitTaskCheckbox(world.x, world.y, hit)) return;
+    const before = hit.data.checked === true;
+    const after = !before;
+    const id = hit.id;
+    const apply = (checked: boolean) => {
+      const el = state.elementsById.get(id);
+      if (!el) return;
+      el.data.checked = checked;
+      el.updatedAt = Date.now();
+      state.emitChange();
+    };
+    commands.execute("toggle-task", () => apply(after), () => apply(before));
+  }
+
+  private hitTaskCheckbox(wx: number, wy: number, el: BoardElement): boolean {
+    const boxSize = Math.min(22, Math.max(16, el.height * 0.38));
+    const boxX = el.x + 16;
+    const boxY = el.y + el.height / 2 - boxSize / 2;
+    const pad = 8;
+    return wx >= boxX - pad && wx <= boxX + boxSize + pad && wy >= boxY - pad && wy <= boxY + boxSize + pad;
+  }
+
+  private hitHandle(e: PointerEvent, ctx: ToolContext): HandleId | null {
+    const { state, renderer } = ctx;
+    const selected = state.getSelected();
+    if (selected.length === 0) return null;
+    if (selected.length === 1 && this.isLinear(selected[0])) return null;
+
+    let bbox;
+    if (selected.length === 1) {
+      bbox = renderer.elementScreenBBox(selected[0]);
+    } else {
+      let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+      for (const el of selected) {
+        const b = renderer.elementScreenBBox(el);
+        minX = Math.min(minX, b.x);
+        minY = Math.min(minY, b.y);
+        maxX = Math.max(maxX, b.x + b.w);
+        maxY = Math.max(maxY, b.y + b.h);
+      }
+      bbox = { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
+    }
+
+    for (const p of handlePoints(bbox)) {
+      if (
+        Math.abs(e.clientX - p.x) <= HANDLE_HIT_RADIUS &&
+        Math.abs(e.clientY - p.y) <= HANDLE_HIT_RADIUS
+      ) {
+        return p.id;
+      }
+    }
+    return null;
+  }
+
+  private hitEndpoint(e: PointerEvent, el: BoardElement, ctx: ToolContext): boolean | null {
+    const vp = ctx.state.viewport;
+    const sx1 = el.x * vp.scale + vp.offsetX;
+    const sy1 = el.y * vp.scale + vp.offsetY;
+    const sx2 = (el.x + el.width) * vp.scale + vp.offsetX;
+    const sy2 = (el.y + el.height) * vp.scale + vp.offsetY;
+    if (Math.hypot(e.clientX - sx1, e.clientY - sy1) <= HANDLE_HIT_RADIUS + 2) return true;
+    if (Math.hypot(e.clientX - sx2, e.clientY - sy2) <= HANDLE_HIT_RADIUS + 2) return false;
+    return null;
+  }
+
+  private applyResize(dx: number, dy: number, preserveAspect: boolean, ctx: ToolContext): void {
+    const { state } = ctx;
+    const h = this.activeHandle!;
+
+    // group bbox in world coords from snapshots
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    for (const s of this.snapshots) {
+      minX = Math.min(minX, Math.min(s.x, s.x + s.width));
+      minY = Math.min(minY, Math.min(s.y, s.y + s.height));
+      maxX = Math.max(maxX, Math.max(s.x, s.x + s.width));
+      maxY = Math.max(maxY, Math.max(s.y, s.y + s.height));
+    }
+    const ow = maxX - minX;
+    const oh = maxY - minY;
+    if (ow === 0 || oh === 0) return;
+
+    let nx = minX, ny = minY, nw = ow, nh = oh;
+    if (h.includes("e")) nw = ow + dx;
+    if (h.includes("w")) { nx = minX + dx; nw = ow - dx; }
+    if (h.includes("s")) nh = oh + dy;
+    if (h.includes("n")) { ny = minY + dy; nh = oh - dy; }
+
+    if (preserveAspect && (h === "nw" || h === "ne" || h === "se" || h === "sw")) {
+      const ratio = ow / oh;
+      if (Math.abs(nw / ow) > Math.abs(nh / oh)) {
+        const newH = nw / ratio;
+        if (h.includes("n")) ny = ny + (nh - newH);
+        nh = newH;
+      } else {
+        const newW = nh * ratio;
+        if (h.includes("w")) nx = nx + (nw - newW);
+        nw = newW;
+      }
+    }
+
+    const MIN = 4;
+    if (Math.abs(nw) < MIN || Math.abs(nh) < MIN) return;
+
+    const scaleX = nw / ow;
+    const scaleY = nh / oh;
+
+    for (const s of this.snapshots) {
+      const el = state.elementsById.get(s.id);
+      if (!el || el.locked) continue;
+      el.x = nx + (s.x - minX) * scaleX;
+      el.y = ny + (s.y - minY) * scaleY;
+      el.width = s.width * scaleX;
+      el.height = s.height * scaleY;
+      el.updatedAt = Date.now();
+      invalidateTextCache(el.id);
+    }
+  }
+}