viteboard 0.1.1 → 0.1.2

package/src/board/BoardService.ts

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

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

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

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