viteboard 0.1.0

package/src/canvas/ImageCache.ts

@@ -0,0 +1,123 @@
+import type { AssetStore } from "../storage/AssetStore";
+
+/**
+ * In-memory cache of decoded ImageBitmaps keyed by asset ID.
+ * Decoding happens once, asynchronously; a re-render is requested when done.
+ */
+export class ImageCache {
+  private cache = new Map<string, ImageBitmap>();
+  private loading = new Set<string>();
+  private missing = new Set<string>();
+  private assetStore: AssetStore;
+  private onLoaded: () => void;
+  private resolveSrcUrl?: (src: string) => string;
+
+  constructor(assetStore: AssetStore, onLoaded: () => void, resolveSrcUrl?: (src: string) => string) {
+    this.assetStore = assetStore;
+    this.onLoaded = onLoaded;
+    this.resolveSrcUrl = resolveSrcUrl;
+  }
+
+  get(assetId: string): ImageBitmap | null {
+    const bmp = this.cache.get(assetId);
+    if (bmp) return bmp;
+    if (!this.loading.has(assetId) && !this.missing.has(assetId)) {
+      void this.load(assetId);
+    }
+    return null;
+  }
+
+  isMissing(assetId: string): boolean {
+    return this.missing.has(assetId);
+  }
+
+  /** Resolve a board image `data.src` (relative content path or URL) to a URL. */
+  private srcToUrl(src: string): string {
+    if (this.resolveSrcUrl) return this.resolveSrcUrl(src);
+    if (/^(https?:)?\/\//.test(src) || src.startsWith("/") || src.startsWith("data:")) {
+      return src;
+    }
+    return `/__api/asset?path=${encodeURIComponent(src)}`;
+  }
+
+  keyForSrc(src: string): string {
+    return this.srcToUrl(src);
+  }
+
+  /** Load a file-backed image by its `data.src` path (used by git-based boards). */
+  getBySrc(src: string): ImageBitmap | null {
+    const url = this.srcToUrl(src);
+    const bmp = this.cache.get(url);
+    if (bmp) return bmp;
+    if (!this.loading.has(url) && !this.missing.has(url)) void this.loadUrl(url);
+    return null;
+  }
+
+  isMissingSrc(src: string): boolean {
+    return this.missing.has(this.srcToUrl(src));
+  }
+
+  private async loadUrl(url: string): Promise<void> {
+    this.loading.add(url);
+    try {
+      const res = await fetch(url);
+      if (!res.ok) {
+        this.missing.add(url);
+        return;
+      }
+      const blob = await res.blob();
+      const bitmap = await createImageBitmap(blob);
+      this.cache.set(url, bitmap);
+      this.onLoaded();
+    } catch {
+      this.missing.add(url);
+    } finally {
+      this.loading.delete(url);
+    }
+  }
+
+  /** Put a freshly created bitmap directly into the cache. */
+  set(assetId: string, bitmap: ImageBitmap): void {
+    this.cache.set(assetId, bitmap);
+    this.missing.delete(assetId);
+  }
+
+  setBySrc(src: string, bitmap: ImageBitmap): void {
+    this.set(this.srcToUrl(src), bitmap);
+  }
+
+  private async load(assetId: string): Promise<void> {
+    this.loading.add(assetId);
+    try {
+      const asset = await this.assetStore.get(assetId);
+      if (!asset) {
+        this.missing.add(assetId);
+        return;
+      }
+      const bitmap = await createImageBitmap(asset.blob);
+      this.cache.set(assetId, bitmap);
+      this.onLoaded();
+    } catch {
+      this.missing.add(assetId);
+    } finally {
+      this.loading.delete(assetId);
+    }
+  }
+
+  evict(assetId: string): void {
+    const bmp = this.cache.get(assetId);
+    if (bmp) bmp.close();
+    this.cache.delete(assetId);
+    this.missing.delete(assetId);
+  }
+
+  clear(): void {
+    for (const bmp of this.cache.values()) bmp.close();
+    this.cache.clear();
+    this.missing.clear();
+  }
+
+  get size(): number {
+    return this.cache.size;
+  }
+}

package/src/canvas/PerformanceMonitor.ts

@@ -0,0 +1,31 @@
+/**
+ * Tracks FPS via rAF sampling and aggregates render/hit-test/save timings.
+ */
+export class PerformanceMonitor {
+  fps = 0;
+  private frameCount = 0;
+  private lastSample = performance.now();
+  private running = false;
+
+  start(): void {
+    if (this.running) return;
+    this.running = true;
+    const tick = () => {
+      if (!this.running) return;
+      this.frameCount++;
+      const now = performance.now();
+      const elapsed = now - this.lastSample;
+      if (elapsed >= 1000) {
+        this.fps = Math.round((this.frameCount * 1000) / elapsed);
+        this.frameCount = 0;
+        this.lastSample = now;
+      }
+      requestAnimationFrame(tick);
+    };
+    requestAnimationFrame(tick);
+  }
+
+  stop(): void {
+    this.running = false;
+  }
+}

package/src/canvas/RenderScheduler.ts

@@ -0,0 +1,26 @@
+/**
+ * Ensures rendering happens at most once per animation frame.
+ */
+export class RenderScheduler {
+  private rafId: number | null = null;
+  private renderFn: () => void;
+
+  constructor(renderFn: () => void) {
+    this.renderFn = renderFn;
+  }
+
+  requestRender(): void {
+    if (this.rafId !== null) return;
+    this.rafId = requestAnimationFrame(() => {
+      this.rafId = null;
+      this.renderFn();
+    });
+  }
+
+  cancel(): void {
+    if (this.rafId !== null) {
+      cancelAnimationFrame(this.rafId);
+      this.rafId = null;
+    }
+  }
+}

package/src/canvas/Viewport.ts

@@ -0,0 +1,77 @@
+export type Viewport = {
+  offsetX: number;
+  offsetY: number;
+  scale: number;
+};
+
+export type ViewportBounds = {
+  left: number;
+  top: number;
+  right: number;
+  bottom: number;
+};
+
+export const MIN_ZOOM = 0.05;
+export const MAX_ZOOM = 40;
+export const DEFAULT_ZOOM = 1;
+
+export function screenToWorld(
+  screenX: number,
+  screenY: number,
+  viewport: Viewport
+): { x: number; y: number } {
+  return {
+    x: (screenX - viewport.offsetX) / viewport.scale,
+    y: (screenY - viewport.offsetY) / viewport.scale,
+  };
+}
+
+export function worldToScreen(
+  worldX: number,
+  worldY: number,
+  viewport: Viewport
+): { x: number; y: number } {
+  return {
+    x: worldX * viewport.scale + viewport.offsetX,
+    y: worldY * viewport.scale + viewport.offsetY,
+  };
+}
+
+export function clampZoom(scale: number): number {
+  return Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, scale));
+}
+
+/**
+ * Cursor-centered zoom: the world point under the cursor stays under the
+ * cursor after the zoom is applied.
+ */
+export function zoomAt(
+  viewport: Viewport,
+  cursorX: number,
+  cursorY: number,
+  newScale: number
+): void {
+  const clamped = clampZoom(newScale);
+  const worldBeforeZoom = {
+    x: (cursorX - viewport.offsetX) / viewport.scale,
+    y: (cursorY - viewport.offsetY) / viewport.scale,
+  };
+  viewport.scale = clamped;
+  viewport.offsetX = cursorX - worldBeforeZoom.x * viewport.scale;
+  viewport.offsetY = cursorY - worldBeforeZoom.y * viewport.scale;
+}
+
+export function getViewportBounds(
+  viewport: Viewport,
+  screenWidth: number,
+  screenHeight: number
+): ViewportBounds {
+  const topLeft = screenToWorld(0, 0, viewport);
+  const bottomRight = screenToWorld(screenWidth, screenHeight, viewport);
+  return {
+    left: topLeft.x,
+    top: topLeft.y,
+    right: bottomRight.x,
+    bottom: bottomRight.y,
+  };
+}

package/src/content/ContentApi.ts

@@ -0,0 +1,258 @@
+import type { BoardDocument } from "../elements/types";
+
+export type TreeNode =
+  | { type: "file"; name: string; path: string }
+  | { type: "dir"; name: string; path: string; children: TreeNode[] };
+
+export type DocsRootSummary = {
+  id: string;
+  projectId: string;
+  projectLabel: string;
+  relativePath: string;
+  displayPath: string;
+};
+
+export type WorkspaceProject = {
+  id: string;
+  label: string;
+  docsRoots: DocsRootSummary[];
+};
+
+export type WorkspaceState = {
+  projects: WorkspaceProject[];
+};
+
+export type PickProjectResult = {
+  cancelled: boolean;
+  workspace: WorkspaceState;
+  addedProjectId?: string;
+};
+
+const API = "/__api";
+
+async function json<T>(res: Response): Promise<T> {
+  if (!res.ok) {
+    let detail = "";
+    try {
+      detail = (await res.json())?.error ?? "";
+    } catch {
+      /* ignore */
+    }
+    throw new Error(`${res.status} ${res.statusText}${detail ? ` — ${detail}` : ""}`);
+  }
+  return res.json() as Promise<T>;
+}
+
+export const ContentApi = {
+  async getWorkspace(): Promise<WorkspaceState> {
+    return json<WorkspaceState>(await fetch(`${API}/workspace`));
+  },
+
+  async removeProject(projectId: string): Promise<void> {
+    await json(
+      await fetch(
+        `${API}/workspace/project?id=${encodeURIComponent(projectId)}`,
+        { method: "DELETE" }
+      )
+    );
+  },
+
+  async pickAndAddProject(): Promise<PickProjectResult> {
+    return json<PickProjectResult>(
+      await fetch(`${API}/workspace/pick-project`, {
+        method: "POST",
+      })
+    );
+  },
+
+  async ensureProjectDocsRoot(projectId: string): Promise<DocsRootSummary> {
+    const data = await json<{ root: DocsRootSummary }>(
+      await fetch(`${API}/workspace/project/docs-root`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ projectId }),
+      })
+    );
+    return data.root;
+  },
+
+  async getTree(rootId: string): Promise<TreeNode[]> {
+    const data = await json<{ tree: TreeNode[] }>(
+      await fetch(`${API}/tree?rootId=${encodeURIComponent(rootId)}`)
+    );
+    return data.tree;
+  },
+
+  async getProjectTree(projectId: string): Promise<TreeNode[]> {
+    const data = await json<{ tree: TreeNode[] }>(
+      await fetch(`${API}/project-tree?projectId=${encodeURIComponent(projectId)}`)
+    );
+    return data.tree;
+  },
+
+  async createDocsFolder(projectId: string, parentPath: string): Promise<void> {
+    await json(
+      await fetch(`${API}/workspace/project/create-docs-folder`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ projectId, parentPath }),
+      })
+    );
+  },
+
+  async readFile(rootId: string, path: string): Promise<string> {
+    const data = await json<{ content: string }>(
+      await fetch(
+        `${API}/file?rootId=${encodeURIComponent(rootId)}&path=${encodeURIComponent(path)}`
+      )
+    );
+    return data.content;
+  },
+
+  async writeFile(rootId: string, path: string, content: string): Promise<void> {
+    await json(
+      await fetch(`${API}/file`, {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ rootId, path, content }),
+      })
+    );
+  },
+
+  async createDirectory(rootId: string, path: string): Promise<void> {
+    await json(
+      await fetch(`${API}/directory`, {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ rootId, path }),
+      })
+    );
+  },
+
+  async getBoard(rootId: string, id: string): Promise<BoardDocument | null> {
+    const res = await fetch(
+      `${API}/board?rootId=${encodeURIComponent(rootId)}&id=${encodeURIComponent(id)}`
+    );
+    if (res.status === 404) return null;
+    const data = await json<{ doc: BoardDocument }>(res);
+    return data.doc;
+  },
+
+  async saveBoard(rootId: string, id: string, doc: BoardDocument): Promise<void> {
+    await json(
+      await fetch(`${API}/board`, {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ rootId, id, doc }),
+      })
+    );
+  },
+
+  async deleteFile(rootId: string, filePath: string): Promise<void> {
+    await json(
+      await fetch(
+        `${API}/file?rootId=${encodeURIComponent(rootId)}&path=${encodeURIComponent(filePath)}`,
+        { method: "DELETE" }
+      )
+    );
+  },
+
+  async renameFile(rootId: string, oldPath: string, newPath: string, ignoreMissing = false): Promise<void> {
+    await json(
+      await fetch(`${API}/file`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ rootId, oldPath, newPath, ignoreMissing }),
+      })
+    );
+  },
+
+  async deleteBoard(rootId: string, id: string): Promise<void> {
+    await json(
+      await fetch(
+        `${API}/board?rootId=${encodeURIComponent(rootId)}&id=${encodeURIComponent(id)}`,
+        { method: "DELETE" }
+      )
+    );
+  },
+
+  assetUrl(rootId: string, path: string): string {
+    return `${API}/asset?rootId=${encodeURIComponent(rootId)}&path=${encodeURIComponent(path)}`;
+  },
+
+  async uploadAsset(rootId: string, name: string, base64: string): Promise<string> {
+    const data = await json<{ path: string }>(
+      await fetch(`${API}/asset`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ rootId, name, base64 }),
+      })
+    );
+    return data.path;
+  },
+};
+
+export function filesUnder(tree: TreeNode[], folder: string): TreeNode[] {
+  const root = tree.find((n) => n.type === "dir" && n.name === folder);
+  if (!root || root.type !== "dir") return [];
+  const out: TreeNode[] = [];
+  const walk = (nodes: TreeNode[]) => {
+    for (const n of nodes) {
+      if (n.type === "file") out.push(n);
+      else walk(n.children);
+    }
+  };
+  walk(root.children);
+  return out;
+}
+
+export function firstMarkdownPath(tree: TreeNode[]): string | null {
+  for (const node of tree) {
+    if (node.type === "file" && node.name.endsWith(".md")) return node.path;
+    if (node.type === "dir") {
+      const found = firstMarkdownPath(node.children);
+      if (found) return found;
+    }
+  }
+  return null;
+}
+
+export function normalizeRelativePath(input: string): string {
+  const parts: string[] = [];
+  for (const raw of input.replace(/\\/g, "/").split("/")) {
+    const part = raw.trim();
+    if (!part || part === ".") continue;
+    if (part === "..") {
+      if (parts.length > 0) parts.pop();
+      continue;
+    }
+    parts.push(part);
+  }
+  return parts.join("/");
+}
+
+export function dirnamePosix(filePath: string): string {
+  const normalized = normalizeRelativePath(filePath);
+  const idx = normalized.lastIndexOf("/");
+  return idx === -1 ? "" : normalized.slice(0, idx);
+}
+
+export function resolveDocPath(fromFile: string, target: string): string {
+  if (/^(https?:|mailto:|tel:|#|data:)/.test(target)) return target;
+  if (target.startsWith("/")) return normalizeRelativePath(target);
+  const base = dirnamePosix(fromFile);
+  return normalizeRelativePath(base ? `${base}/${target}` : target);
+}
+
+export function relativePathBetween(fromFile: string, toPath: string): string {
+  const fromDir = dirnamePosix(fromFile);
+  const fromParts = fromDir ? fromDir.split("/").filter(Boolean) : [];
+  const toParts = normalizeRelativePath(toPath).split("/").filter(Boolean);
+  let shared = 0;
+  while (shared < fromParts.length && shared < toParts.length && fromParts[shared] === toParts[shared]) {
+    shared++;
+  }
+  const up = fromParts.slice(shared).map(() => "..");
+  const down = toParts.slice(shared);
+  return [...up, ...down].join("/") || toParts[toParts.length - 1] || "";
+}