viteboard 0.1.0

package/src/board/BoardService.ts

@@ -0,0 +1,222 @@
+import { ContentApi, normalizeRelativePath, type TreeNode } from "../content/ContentApi";
+import { validateBoardDocument } from "../storage/BoardSerializer";
+import type { BoardDocument } from "../elements/types";
+
+export type BoardSummary = {
+  id: string;
+  title: string;
+  elementCount: number;
+  updatedAt: number;
+  filePath: string;
+};
+
+const SUFFIX = ".board.json";
+
+export function boardIdFromFilePath(filePath: string): string {
+  return filePath.replace(/\.board\.json$/, "");
+}
+
+export function normalizeBoardId(input: string): string {
+  return input
+    .trim()
+    .replace(/^\/+/, "")
+    .replace(/\.board\.json$/, "");
+}
+
+export function resolveBoardIdFromDoc(src: string, docPath: string): string {
+  return resolveBoardIdCandidatesFromDoc(src, docPath)[0] ?? "";
+}
+
+export function resolveBoardIdCandidatesFromDoc(src: string, docPath: string): string[] {
+  const raw = src.trim();
+  const id = normalizeBoardId(src);
+  if (!id) return [];
+  
+  // Explicit relative paths (./foo or ../foo) - resolve relative to doc's directory
+  if (raw.startsWith("./") || raw.startsWith("../")) {
+    const idx = docPath.lastIndexOf("/");
+    const dir = idx === -1 ? "" : docPath.slice(0, idx);
+    return [normalizeRelativePath(dir ? `${dir}/${id}` : id)];
+  }
+  
+  // Absolute paths starting with / - resolve from root, with sibling fallback
+  if (raw.startsWith("/")) {
+    const idx = docPath.lastIndexOf("/");
+    const dir = idx === -1 ? "" : docPath.slice(0, idx);
+    const relative = normalizeRelativePath(dir ? `${dir}/${id}` : id);
+    // Try: 1) absolute path, 2) relative from doc's directory, 3) parent directory
+    const candidates = [id];
+    if (relative && relative !== id) candidates.push(relative);
+    if (dir) {
+      const parentDir = dir.includes("/") ? dir.slice(0, dir.lastIndexOf("/")) : "";
+      const parentRelative = normalizeRelativePath(parentDir ? `${parentDir}/${id}` : id);
+      if (parentRelative && !candidates.includes(parentRelative)) {
+        candidates.push(parentRelative);
+      }
+    }
+    return candidates;
+  }
+  
+  // Bare paths (no prefix) - smart resolution
+  const idx = docPath.lastIndexOf("/");
+  const dir = idx === -1 ? "" : docPath.slice(0, idx);
+  const relative = normalizeRelativePath(dir ? `${dir}/${id}` : id);
+  // Try: 1) same directory as doc, 2) absolute from root
+  return relative && relative !== id ? [relative, id] : [id];
+}
+
+function slugify(text: string): string {
+  return (
+    text
+      .toLowerCase()
+      .replace(/[^\w\s-]/g, "")
+      .trim()
+      .replace(/\s+/g, "-")
+      .slice(0, 48) || "board"
+  );
+}
+
+function blobToBase64(blob: Blob): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const result = reader.result as string;
+      resolve(result.slice(result.indexOf(",") + 1));
+    };
+    reader.onerror = () => reject(reader.error);
+    reader.readAsDataURL(blob);
+  });
+}
+
+/** File-backed board operations used by the Docs shell. */
+export const BoardService = {
+  async listIds(rootId: string): Promise<string[]> {
+    const tree = await ContentApi.getTree(rootId);
+    return allBoardFiles(tree)
+      .map((f) => boardIdFromFilePath(f.path));
+  },
+
+  async list(rootId: string): Promise<BoardSummary[]> {
+    const ids = await this.listIds(rootId);
+    const out: BoardSummary[] = [];
+    for (const id of ids) {
+      const doc = await this.load(rootId, id);
+      if (doc) {
+        out.push({
+          id,
+          title: doc.title,
+          elementCount: doc.elements.length,
+          updatedAt: doc.updatedAt,
+          filePath: `${id}.board.json`,
+        });
+      }
+    }
+    out.sort((a, b) => b.updatedAt - a.updatedAt);
+    return out;
+  },
+
+  async load(rootId: string, id: string): Promise<BoardDocument | undefined> {
+    const raw = await ContentApi.getBoard(rootId, id);
+    if (!raw) return undefined;
+    return validateBoardDocument(raw) ?? undefined;
+  },
+
+  async save(rootId: string, doc: BoardDocument): Promise<void> {
+    await ContentApi.saveBoard(rootId, doc.id, doc);
+  },
+
+  async delete(rootId: string, id: string): Promise<void> {
+    await ContentApi.deleteBoard(rootId, id);
+  },
+
+  async move(rootId: string, id: string, targetDir: string): Promise<string> {
+    const doc = await this.load(rootId, id);
+    if (!doc) throw new Error("Board not found");
+    const name = id.split("/").pop() ?? id;
+    const cleanTarget = targetDir.replace(/^\/+|\/+$/g, "");
+    const newId = cleanTarget ? `${cleanTarget}/${name}` : name;
+    if (newId === id) return id;
+    const existing = new Set(await this.listIds(rootId));
+    if (existing.has(newId)) throw new Error("A board already exists there");
+    const now = Date.now();
+    await ContentApi.saveBoard(rootId, newId, { ...doc, id: newId, updatedAt: now });
+    await ContentApi.deleteBoard(rootId, id);
+    return newId;
+  },
+
+  async rename(rootId: string, id: string, title: string): Promise<string> {
+    const doc = await this.load(rootId, id);
+    if (!doc) throw new Error("Board not found");
+    const dir = id.includes("/") ? id.slice(0, id.lastIndexOf("/")) : "";
+    const slug = slugify(title);
+    const newId = dir ? `${dir}/${slug}` : slug;
+    const now = Date.now();
+    if (newId === id) {
+      await ContentApi.saveBoard(rootId, id, { ...doc, title: title.trim() || doc.title, updatedAt: now });
+      return id;
+    }
+    const existing = new Set(await this.listIds(rootId));
+    if (existing.has(newId)) throw new Error("A board already exists with that name");
+    await ContentApi.saveBoard(rootId, newId, {
+      ...doc,
+      id: newId,
+      title: title.trim() || doc.title,
+      updatedAt: now,
+    });
+    await ContentApi.deleteBoard(rootId, id);
+    return newId;
+  },
+
+  /**
+   * Creates a new board file. If `dirPath` is provided (e.g. "backend/api"),
+   * the board is placed at `<dirPath>/<slug>.board.json` relative to the docs
+   * root; otherwise it lands at `<slug>.board.json`.
+   */
+  async create(
+    rootId: string,
+    title: string,
+    theme: "light" | "dark",
+    dirPath = ""
+  ): Promise<string> {
+    const existing = new Set(await this.listIds(rootId));
+    const slug = slugify(title);
+    // Prefix slug with dirPath so the file lands in the right subdir.
+    const prefix = dirPath ? `${dirPath.replace(/^\/+|\/+$/g, "")}/` : "";
+    let id = `${prefix}${slug}`;
+    if (existing.has(id)) id = `${id}-${Date.now().toString(36)}`;
+    const now = Date.now();
+    const doc: BoardDocument = {
+      version: 1,
+      id,
+      title: title.trim() || "Untitled Board",
+      createdAt: now,
+      updatedAt: now,
+      viewport: { offsetX: 0, offsetY: 0, scale: 1 },
+      theme,
+      elements: [],
+      assetIds: [],
+    };
+    await ContentApi.saveBoard(rootId, id, doc);
+    return id;
+  },
+
+  async uploadImage(rootId: string, blob: Blob, name?: string): Promise<string> {
+    const base64 = await blobToBase64(blob);
+    return ContentApi.uploadAsset(rootId, name ?? "image.png", base64);
+  },
+};
+
+function allBoardFiles(tree: TreeNode[]): Array<Extract<TreeNode, { type: "file" }>> {
+  const out: Array<Extract<TreeNode, { type: "file" }>> = [];
+  const walk = (nodes: TreeNode[]) => {
+    for (const node of nodes) {
+      if (node.type === "file") {
+        if (node.name.endsWith(SUFFIX)) out.push(node);
+      } else {
+        walk(node.children);
+      }
+    }
+  };
+  walk(tree);
+  return out;
+}

package/src/canvas/CanvasRenderer.ts

@@ -0,0 +1,253 @@
+import type { CanvasSurface } from "./CanvasSurface";
+import type { BoardState } from "../app/BoardState";
+import type { ImageCache } from "./ImageCache";
+import { getViewportBounds, worldToScreen } from "./Viewport";
+import { renderElement, type RenderContext } from "../elements/renderElement";
+import type { BoardElement } from "../elements/types";
+
+export type OverlayState = {
+  marquee: { x: number; y: number; w: number; h: number } | null;
+  preview: BoardElement | null;
+};
+
+export class CanvasRenderer {
+  surface: CanvasSurface;
+  state: BoardState;
+  imageCache: ImageCache;
+  overlay: OverlayState = { marquee: null, preview: null };
+
+  lastRenderMs = 0;
+  visibleCount = 0;
+  cullingEnabled = true;
+  lodEnabled = true;
+
+  constructor(surface: CanvasSurface, state: BoardState, imageCache: ImageCache) {
+    this.surface = surface;
+    this.state = state;
+    this.imageCache = imageCache;
+  }
+
+  private getLod(): 0 | 1 | 2 {
+    if (!this.lodEnabled) return 2;
+    const s = this.state.viewport.scale;
+    if (s < 0.1) return 0;
+    if (s < 0.25) return 1;
+    return 2;
+  }
+
+  render(): void {
+    const start = performance.now();
+    this.renderGrid();
+    this.renderObjects();
+    this.renderOverlay();
+    this.lastRenderMs = performance.now() - start;
+  }
+
+  // ---------- Layer 0: background grid ----------
+
+  private renderGrid(): void {
+    const { surface, state } = this;
+    const ctx = surface.beginLayer(0);
+    const vp = state.viewport;
+
+    const bgColor = getComputedStyle(document.documentElement)
+      .getPropertyValue("--bg-canvas")
+      .trim();
+    const dotColor = getComputedStyle(document.documentElement)
+      .getPropertyValue("--grid-dot")
+      .trim();
+
+    ctx.fillStyle = bgColor || "#f3f2f1";
+    ctx.fillRect(0, 0, surface.width, surface.height);
+
+    // adaptive grid spacing: keep dots between 16-64 screen px
+    const baseSpacing = 32;
+    let spacing = baseSpacing * vp.scale;
+    // Guard against a corrupt/degenerate scale (0, negative, NaN, Infinity).
+    // Without this, the normalization loops below would never terminate and
+    // would freeze the whole tab with no error.
+    if (!Number.isFinite(spacing) || spacing <= 0) return;
+    while (spacing < 16) spacing *= 2;
+    while (spacing > 64) spacing /= 2;
+    if (spacing < 4) return; // too dense, skip
+
+    const offsetX = ((vp.offsetX % spacing) + spacing) % spacing;
+    const offsetY = ((vp.offsetY % spacing) + spacing) % spacing;
+    const dotRadius = Math.min(1.5, Math.max(0.75, vp.scale * 0.9));
+
+    ctx.fillStyle = dotColor || "rgba(0,0,0,0.14)";
+    ctx.beginPath();
+    for (let x = offsetX; x < surface.width; x += spacing) {
+      for (let y = offsetY; y < surface.height; y += spacing) {
+        ctx.moveTo(x + dotRadius, y);
+        ctx.arc(x, y, dotRadius, 0, Math.PI * 2);
+      }
+    }
+    ctx.fill();
+  }
+
+  // ---------- Layer 1: board objects ----------
+
+  private renderObjects(): void {
+    const { surface, state } = this;
+    const ctx = surface.beginLayer(1);
+    const vp = state.viewport;
+
+    ctx.translate(vp.offsetX, vp.offsetY);
+    ctx.scale(vp.scale, vp.scale);
+
+    const bounds = getViewportBounds(vp, surface.width, surface.height);
+    const elements = this.cullingEnabled
+      ? state.getVisibleElements(bounds)
+      : state.getSorted().filter((e) => !e.hidden);
+    this.visibleCount = elements.length;
+
+    const rc: RenderContext = {
+      ctx,
+      scale: vp.scale,
+      lod: this.getLod(),
+      theme: state.theme,
+      imageCache: this.imageCache,
+    };
+
+    for (const el of elements) {
+      renderElement(el, rc);
+    }
+  }
+
+  // ---------- Layer 2: selection, hover, previews ----------
+
+  private renderOverlay(): void {
+    const { surface, state } = this;
+    const ctx = surface.beginLayer(2);
+    const vp = state.viewport;
+
+    const selectionColor = getComputedStyle(document.documentElement)
+      .getPropertyValue("--selection")
+      .trim() || "#6e6e6e";
+
+    // hover highlight
+    if (state.hoveredId && !state.selectedIds.has(state.hoveredId)) {
+      const el = state.elementsById.get(state.hoveredId);
+      if (el) {
+        const bbox = this.elementScreenBBox(el);
+        ctx.strokeStyle = selectionColor;
+        ctx.globalAlpha = 0.45;
+        ctx.lineWidth = 1.5;
+        ctx.strokeRect(bbox.x, bbox.y, bbox.w, bbox.h);
+        ctx.globalAlpha = 1;
+      }
+    }
+
+    // selection
+    const selected = state.getSelected();
+    if (selected.length > 0) {
+      ctx.strokeStyle = selectionColor;
+      ctx.lineWidth = 1.5;
+
+      let minX = Infinity,
+        minY = Infinity,
+        maxX = -Infinity,
+        maxY = -Infinity;
+
+      for (const el of selected) {
+        const bbox = this.elementScreenBBox(el);
+        ctx.strokeRect(bbox.x, bbox.y, bbox.w, bbox.h);
+        minX = Math.min(minX, bbox.x);
+        minY = Math.min(minY, bbox.y);
+        maxX = Math.max(maxX, bbox.x + bbox.w);
+        maxY = Math.max(maxY, bbox.y + bbox.h);
+      }
+
+      // group bounding box for multi-select
+      if (selected.length > 1) {
+        ctx.setLineDash([4, 4]);
+        ctx.strokeRect(minX - 4, minY - 4, maxX - minX + 8, maxY - minY + 8);
+        ctx.setLineDash([]);
+      }
+
+      // resize handles (single selection or group box)
+      const hx = selected.length === 1 ? this.elementScreenBBox(selected[0]) : { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
+      this.drawHandles(ctx, hx, selectionColor);
+    }
+
+    // marquee
+    if (this.overlay.marquee) {
+      const m = this.overlay.marquee;
+      ctx.fillStyle = selectionColor + "22";
+      ctx.strokeStyle = selectionColor;
+      ctx.lineWidth = 1;
+      ctx.fillRect(m.x, m.y, m.w, m.h);
+      ctx.strokeRect(m.x, m.y, m.w, m.h);
+    }
+
+    // tool preview (drawing in progress)
+    if (this.overlay.preview) {
+      ctx.save();
+      ctx.translate(vp.offsetX, vp.offsetY);
+      ctx.scale(vp.scale, vp.scale);
+      ctx.globalAlpha = 0.8;
+      renderElement(this.overlay.preview, {
+        ctx,
+        scale: vp.scale,
+        lod: 2,
+        theme: state.theme,
+        imageCache: this.imageCache,
+      });
+      ctx.restore();
+    }
+  }
+
+  elementScreenBBox(el: BoardElement): { x: number; y: number; w: number; h: number } {
+    const vp = this.state.viewport;
+    const x1 = Math.min(el.x, el.x + el.width);
+    const y1 = Math.min(el.y, el.y + el.height);
+    const x2 = Math.max(el.x, el.x + el.width);
+    const y2 = Math.max(el.y, el.y + el.height);
+    const tl = worldToScreen(x1, y1, vp);
+    const br = worldToScreen(x2, y2, vp);
+    return { x: tl.x, y: tl.y, w: br.x - tl.x, h: br.y - tl.y };
+  }
+
+  private drawHandles(
+    ctx: CanvasRenderingContext2D,
+    bbox: { x: number; y: number; w: number; h: number },
+    color: string
+  ): void {
+    const size = 8;
+    const half = size / 2;
+    const points = handlePoints(bbox);
+    ctx.fillStyle = getComputedStyle(document.documentElement)
+      .getPropertyValue("--bg-panel")
+      .trim() || "#fff";
+    ctx.strokeStyle = color;
+    ctx.lineWidth = 1.5;
+    for (const p of points) {
+      ctx.beginPath();
+      ctx.rect(p.x - half, p.y - half, size, size);
+      ctx.fill();
+      ctx.stroke();
+    }
+  }
+}
+
+export type HandleId = "nw" | "n" | "ne" | "e" | "se" | "s" | "sw" | "w";
+
+export function handlePoints(bbox: {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}): { id: HandleId; x: number; y: number }[] {
+  const { x, y, w, h } = bbox;
+  return [
+    { id: "nw", x, y },
+    { id: "n", x: x + w / 2, y },
+    { id: "ne", x: x + w, y },
+    { id: "e", x: x + w, y: y + h / 2 },
+    { id: "se", x: x + w, y: y + h },
+    { id: "s", x: x + w / 2, y: y + h },
+    { id: "sw", x, y: y + h },
+    { id: "w", x, y: y + h / 2 },
+  ];
+}

package/src/canvas/CanvasSurface.ts

@@ -0,0 +1,70 @@
+/**
+ * Manages stacked canvas layers with devicePixelRatio handling.
+ * Layer 0: background grid
+ * Layer 1: board objects
+ * Layer 2: selection/handles/previews
+ */
+export class CanvasSurface {
+  container: HTMLDivElement;
+  layers: HTMLCanvasElement[] = [];
+  contexts: CanvasRenderingContext2D[] = [];
+  width = 0;
+  height = 0;
+  dpr = 1;
+
+  private resizeListeners: (() => void)[] = [];
+
+  constructor(parent: HTMLElement, layerCount = 3, signal?: AbortSignal) {
+    this.container = document.createElement("div");
+    this.container.className = "canvas-stack";
+    parent.appendChild(this.container);
+
+    for (let i = 0; i < layerCount; i++) {
+      const canvas = document.createElement("canvas");
+      const ctx = canvas.getContext("2d", {
+        alpha: i !== 0 ? true : false,
+      }) as CanvasRenderingContext2D;
+      this.container.appendChild(canvas);
+      this.layers.push(canvas);
+      this.contexts.push(ctx);
+    }
+
+    this.resize();
+    window.addEventListener(
+      "resize",
+      () => {
+        this.resize();
+        for (const fn of this.resizeListeners) fn();
+      },
+      { signal }
+    );
+  }
+
+  get interactionLayer(): HTMLCanvasElement {
+    return this.layers[this.layers.length - 1];
+  }
+
+  onResize(fn: () => void): void {
+    this.resizeListeners.push(fn);
+  }
+
+  resize(): void {
+    this.dpr = Math.max(1, window.devicePixelRatio || 1);
+    this.width = window.innerWidth;
+    this.height = window.innerHeight;
+    for (const canvas of this.layers) {
+      canvas.width = Math.round(this.width * this.dpr);
+      canvas.height = Math.round(this.height * this.dpr);
+      canvas.style.width = this.width + "px";
+      canvas.style.height = this.height + "px";
+    }
+  }
+
+  /** Reset transform to identity * dpr and clear the layer. */
+  beginLayer(index: number): CanvasRenderingContext2D {
+    const ctx = this.contexts[index];
+    ctx.setTransform(this.dpr, 0, 0, this.dpr, 0, 0);
+    ctx.clearRect(0, 0, this.width, this.height);
+    return ctx;
+  }
+}

package/src/canvas/HitTester.ts

@@ -0,0 +1,110 @@
+import type { BoardElement } from "../elements/types";
+import type { BoardState } from "../app/BoardState";
+
+/**
+ * Distance from a point to a line segment, in world units.
+ */
+function distToSegment(
+  px: number,
+  py: number,
+  x1: number,
+  y1: number,
+  x2: number,
+  y2: number
+): number {
+  const dx = x2 - x1;
+  const dy = y2 - y1;
+  const lenSq = dx * dx + dy * dy;
+  if (lenSq === 0) return Math.hypot(px - x1, py - y1);
+  let t = ((px - x1) * dx + (py - y1) * dy) / lenSq;
+  t = Math.max(0, Math.min(1, t));
+  return Math.hypot(px - (x1 + t * dx), py - (y1 + t * dy));
+}
+
+export class HitTester {
+  private state: BoardState;
+  lastHitTestMs = 0;
+
+  constructor(state: BoardState) {
+    this.state = state;
+  }
+
+  /**
+   * Returns the topmost element at the given world point, or null.
+   */
+  hitTest(worldX: number, worldY: number, scale: number): BoardElement | null {
+    const start = performance.now();
+    const sorted = this.state.getSorted();
+    const tolerance = 6 / scale;
+    let result: BoardElement | null = null;
+
+    for (let i = sorted.length - 1; i >= 0; i--) {
+      const el = sorted[i];
+      if (el.hidden || el.locked) continue;
+      if (this.hitsElement(el, worldX, worldY, tolerance)) {
+        result = el;
+        break;
+      }
+    }
+
+    this.lastHitTestMs = performance.now() - start;
+    return result;
+  }
+
+  hitsElement(
+    el: BoardElement,
+    wx: number,
+    wy: number,
+    tolerance: number
+  ): boolean {
+    if (el.type === "line" || el.type === "arrow" || el.type === "connector") {
+      return (
+        distToSegment(wx, wy, el.x, el.y, el.x + el.width, el.y + el.height) <=
+        Math.max(tolerance, (el.style.strokeWidth ?? 2) / 2 + tolerance)
+      );
+    }
+
+    const x1 = Math.min(el.x, el.x + el.width);
+    const x2 = Math.max(el.x, el.x + el.width);
+    const y1 = Math.min(el.y, el.y + el.height);
+    const y2 = Math.max(el.y, el.y + el.height);
+
+    if (wx < x1 || wx > x2 || wy < y1 || wy > y2) return false;
+
+    if (el.type === "ellipse") {
+      const cx = (x1 + x2) / 2;
+      const cy = (y1 + y2) / 2;
+      const rx = (x2 - x1) / 2;
+      const ry = (y2 - y1) / 2;
+      if (rx === 0 || ry === 0) return false;
+      const nx = (wx - cx) / rx;
+      const ny = (wy - cy) / ry;
+      return nx * nx + ny * ny <= 1;
+    }
+
+    return true;
+  }
+
+  /** Elements fully or partially inside a world-space rect (for marquee). */
+  elementsInRect(
+    rx: number,
+    ry: number,
+    rw: number,
+    rh: number
+  ): BoardElement[] {
+    const x1 = Math.min(rx, rx + rw);
+    const x2 = Math.max(rx, rx + rw);
+    const y1 = Math.min(ry, ry + rh);
+    const y2 = Math.max(ry, ry + rh);
+    const out: BoardElement[] = [];
+    for (const el of this.state.elements) {
+      if (el.hidden || el.locked) continue;
+      const ex1 = Math.min(el.x, el.x + el.width);
+      const ex2 = Math.max(el.x, el.x + el.width);
+      const ey1 = Math.min(el.y, el.y + el.height);
+      const ey2 = Math.max(el.y, el.y + el.height);
+      if (ex1 >= x1 && ex2 <= x2 && ey1 >= y1 && ey2 <= y2) out.push(el);
+    }
+    return out;
+  }
+}