viteboard 0.1.0 → 0.1.2

package/src/testing/StressTestPanel.ts

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

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

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

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

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