viteboard 0.1.0

package/src/app/ExportPng.ts

@@ -0,0 +1,107 @@
+import type { BoardState } from "./BoardState";
+import type { ImageCache } from "../canvas/ImageCache";
+import { renderElement } from "../elements/renderElement";
+
+function contentBounds(state: BoardState): { x: number; y: number; w: number; h: number } | null {
+  if (state.elements.length === 0) return null;
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  for (const el of state.elements) {
+    if (el.hidden) continue;
+    minX = Math.min(minX, Math.min(el.x, el.x + el.width));
+    minY = Math.min(minY, Math.min(el.y, el.y + el.height));
+    maxX = Math.max(maxX, Math.max(el.x, el.x + el.width));
+    maxY = Math.max(maxY, Math.max(el.y, el.y + el.height));
+  }
+  if (!Number.isFinite(minX)) return null;
+  const pad = 48;
+  return { x: minX - pad, y: minY - pad, w: maxX - minX + pad * 2, h: maxY - minY + pad * 2 };
+}
+
+function renderRegionToCanvas(
+  state: BoardState,
+  imageCache: ImageCache,
+  region: { x: number; y: number; w: number; h: number },
+  scale: number
+): HTMLCanvasElement {
+  const MAX_DIM = 8192;
+  let outW = Math.round(region.w * scale);
+  let outH = Math.round(region.h * scale);
+  if (outW > MAX_DIM || outH > MAX_DIM) {
+    const f = MAX_DIM / Math.max(outW, outH);
+    scale *= f;
+    outW = Math.round(region.w * scale);
+    outH = Math.round(region.h * scale);
+  }
+
+  const canvas = document.createElement("canvas");
+  canvas.width = Math.max(1, outW);
+  canvas.height = Math.max(1, outH);
+  const ctx = canvas.getContext("2d")!;
+
+  const bg = state.theme === "dark" ? "#111315" : "#f3f2f1";
+  ctx.fillStyle = bg;
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+  ctx.scale(scale, scale);
+  ctx.translate(-region.x, -region.y);
+
+  const sorted = state.getSorted();
+  for (const el of sorted) {
+    if (el.hidden) continue;
+    // simple culling against region
+    if (
+      Math.max(el.x, el.x + el.width) < region.x ||
+      Math.min(el.x, el.x + el.width) > region.x + region.w ||
+      Math.max(el.y, el.y + el.height) < region.y ||
+      Math.min(el.y, el.y + el.height) > region.y + region.h
+    )
+      continue;
+    renderElement(el, { ctx, scale, lod: 2, theme: state.theme, imageCache });
+  }
+  return canvas;
+}
+
+function canvasToBlob(canvas: HTMLCanvasElement): Promise<Blob> {
+  return new Promise((resolve, reject) => {
+    canvas.toBlob((blob) => {
+      if (blob) resolve(blob);
+      else reject(new Error("PNG encode failed"));
+    }, "image/png");
+  });
+}
+
+export async function exportViewportPng(
+  state: BoardState,
+  imageCache: ImageCache,
+  screenWidth: number,
+  screenHeight: number
+): Promise<Blob> {
+  const vp = state.viewport;
+  const region = {
+    x: -vp.offsetX / vp.scale,
+    y: -vp.offsetY / vp.scale,
+    w: screenWidth / vp.scale,
+    h: screenHeight / vp.scale,
+  };
+  const canvas = renderRegionToCanvas(state, imageCache, region, vp.scale);
+  return canvasToBlob(canvas);
+}
+
+export async function exportFullBoardPng(
+  state: BoardState,
+  imageCache: ImageCache
+): Promise<Blob | null> {
+  const region = contentBounds(state);
+  if (!region) return null;
+  const canvas = renderRegionToCanvas(state, imageCache, region, 1);
+  return canvasToBlob(canvas);
+}
+
+export function downloadBlob(blob: Blob, filename: string): void {
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  a.click();
+  URL.revokeObjectURL(url);
+}

package/src/app/ImageInsertService.ts

@@ -0,0 +1,141 @@
+import type { BoardState } from "../app/BoardState";
+import type { CommandManager } from "../app/CommandManager";
+import type { ImageCache } from "../canvas/ImageCache";
+import { assetStore } from "../storage/AssetStore";
+import { createElement } from "../elements/types";
+import { screenToWorld } from "../canvas/Viewport";
+
+const ACCEPTED_TYPES = ["image/png", "image/jpeg", "image/webp", "image/gif"];
+const LARGE_ASSET_BYTES = 5 * 1024 * 1024;
+
+/**
+ * Shared image insertion pipeline used by paste, drag-and-drop and the
+ * toolbar image tool. In workspace mode it writes images into the active docs
+ * root; the IndexedDB path remains as a legacy fallback.
+ */
+export class ImageInsertService {
+  private state: BoardState;
+  private commands: CommandManager;
+  private imageCache: ImageCache;
+  private notify: (msg: string) => void;
+  private uploadImage?: (blob: Blob, name?: string) => Promise<string>;
+
+  constructor(
+    state: BoardState,
+    commands: CommandManager,
+    imageCache: ImageCache,
+    notify: (msg: string) => void,
+    uploadImage?: (blob: Blob, name?: string) => Promise<string>
+  ) {
+    this.state = state;
+    this.commands = commands;
+    this.imageCache = imageCache;
+    this.notify = notify;
+    this.uploadImage = uploadImage;
+  }
+
+  async insertBlob(
+    blob: Blob,
+    screenX: number,
+    screenY: number,
+    name?: string
+  ): Promise<void> {
+    if (!ACCEPTED_TYPES.includes(blob.type)) {
+      this.notify("Unsupported image type");
+      return;
+    }
+    if (blob.size > LARGE_ASSET_BYTES) {
+      this.notify("Large image added — consider optimizing it for git");
+    }
+
+    // Decode once for natural dimensions + cache pre-warm.
+    let naturalW = 0;
+    let naturalH = 0;
+    let bitmap: ImageBitmap | null = null;
+    try {
+      bitmap = await createImageBitmap(blob);
+      naturalW = bitmap.width;
+      naturalH = bitmap.height;
+    } catch {
+      this.notify("Could not decode image");
+      return;
+    }
+
+    // File-backed (git) mode: write the image to disk and reference it by path.
+    // Legacy mode: store the blob in IndexedDB and reference it by assetId.
+    const imageData: Record<string, unknown> = {
+      originalWidth: naturalW,
+      originalHeight: naturalH,
+      alt: name,
+    };
+
+    if (this.uploadImage) {
+      try {
+        const src = await this.uploadImage(blob, name);
+        imageData.src = src;
+        if (bitmap) this.imageCache.setBySrc(src, bitmap);
+      } catch (err) {
+        this.notify("Failed to save image to disk");
+        console.error("Image upload failed", err);
+        return;
+      }
+    } else {
+      try {
+        const asset = await assetStore.createFromBlob(blob, name);
+        imageData.assetId = asset.id;
+        if (bitmap) this.imageCache.set(asset.id, bitmap);
+      } catch (err) {
+        this.notify("Failed to store image (storage quota?)");
+        console.error("Asset store failed", err);
+        return;
+      }
+    }
+
+    const world = screenToWorld(screenX, screenY, this.state.viewport);
+    // scale down very large images to a sane on-board size
+    const maxDim = 480 / Math.min(1, this.state.viewport.scale);
+    let w = naturalW;
+    let h = naturalH;
+    const largest = Math.max(w, h);
+    if (largest > maxDim) {
+      const f = maxDim / largest;
+      w *= f;
+      h *= f;
+    }
+
+    const el = createElement("image", {
+      x: world.x - w / 2,
+      y: world.y - h / 2,
+      width: w,
+      height: h,
+      zIndex: this.state.maxZIndex() + 1,
+      data: imageData,
+    });
+
+    const state = this.state;
+    this.commands.execute(
+      "insert-image",
+      () => {
+        if (!state.elementsById.has(el.id)) state.addElement(el);
+        state.emitChange();
+      },
+      () => {
+        state.removeElement(el.id);
+        state.emitChange();
+      }
+    );
+
+    state.clearSelection();
+    state.selectedIds.add(el.id);
+    state.requestRender();
+  }
+
+  async insertFiles(files: FileList | File[], screenX: number, screenY: number): Promise<void> {
+    let offset = 0;
+    for (const file of Array.from(files)) {
+      if (!file.type.startsWith("image/")) continue;
+      await this.insertBlob(file, screenX + offset, screenY + offset, file.name);
+      offset += 24;
+    }
+  }
+}

package/src/app/KeyboardShortcuts.ts

@@ -0,0 +1,124 @@
+import type { BoardState } from "./BoardState";
+import type { CommandManager } from "./CommandManager";
+import type { ElementActions } from "./ElementActions";
+import type { ToolController } from "../tools/ToolController";
+import { zoomAt } from "../canvas/Viewport";
+
+export type ShortcutDeps = {
+  state: BoardState;
+  commands: CommandManager;
+  actions: ElementActions;
+  toolController: ToolController;
+  resetView: () => void;
+};
+
+export function bindKeyboardShortcuts(deps: ShortcutDeps, signal?: AbortSignal): void {
+  const { state, commands, actions, toolController } = deps;
+
+  window.addEventListener("keydown", (e) => {
+    const target = e.target as HTMLElement | null;
+    if (
+      target &&
+      (target.tagName === "TEXTAREA" ||
+        target.tagName === "INPUT" ||
+        target.isContentEditable)
+    ) {
+      return;
+    }
+
+    const mod = e.metaKey || e.ctrlKey;
+    const nudge = e.shiftKey ? 10 : 1;
+
+    if (!mod) {
+      switch (e.key) {
+        case "ArrowLeft":
+          e.preventDefault();
+          actions.nudgeSelection(-nudge, 0);
+          return;
+        case "ArrowRight":
+          e.preventDefault();
+          actions.nudgeSelection(nudge, 0);
+          return;
+        case "ArrowUp":
+          e.preventDefault();
+          actions.nudgeSelection(0, -nudge);
+          return;
+        case "ArrowDown":
+          e.preventDefault();
+          actions.nudgeSelection(0, nudge);
+          return;
+      }
+    }
+
+    if (mod) {
+      switch (e.key.toLowerCase()) {
+        case "d":
+          e.preventDefault();
+          actions.duplicateSelection();
+          return;
+        case "z":
+          e.preventDefault();
+          if (e.shiftKey) commands.redo();
+          else commands.undo();
+          return;
+        case "]":
+          e.preventDefault();
+          if (e.shiftKey) actions.bringToFront();
+          else actions.bringForward();
+          return;
+        case "[":
+          e.preventDefault();
+          if (e.shiftKey) actions.sendToBack();
+          else actions.sendBackward();
+          return;
+        case "=":
+        case "+":
+          e.preventDefault();
+          zoomAt(state.viewport, window.innerWidth / 2, window.innerHeight / 2, state.viewport.scale * 1.2);
+          state.requestRender();
+          return;
+        case "-":
+          e.preventDefault();
+          zoomAt(state.viewport, window.innerWidth / 2, window.innerHeight / 2, state.viewport.scale / 1.2);
+          state.requestRender();
+          return;
+        case "0":
+          e.preventDefault();
+          deps.resetView();
+          return;
+        case "a":
+          e.preventDefault();
+          state.clearSelection();
+          for (const el of state.elements) {
+            if (!el.locked && !el.hidden) state.selectedIds.add(el.id);
+          }
+          state.requestRender();
+          return;
+      }
+      return;
+    }
+
+    switch (e.key) {
+      case "Delete":
+      case "Backspace":
+        e.preventDefault();
+        actions.deleteSelection();
+        return;
+      case "Escape":
+        toolController.cancel();
+        toolController.setTool("select");
+        return;
+    }
+
+    switch (e.key.toLowerCase()) {
+      case "v": toolController.setTool("select"); return;
+      case "h": toolController.setTool("hand"); return;
+      case "s": toolController.setTool("sticky"); return;
+      case "r": toolController.setTool("rectangle"); return;
+      case "o": toolController.setTool("ellipse"); return;
+      case "t": toolController.setTool("text"); return;
+      case "a": toolController.setTool("arrow"); return;
+      case "i": toolController.setTool("image"); return;
+    }
+  }, { signal });
+}

package/src/app/main.ts

@@ -0,0 +1,6 @@
+import { Shell } from "../shell/Shell";
+
+const root = document.getElementById("app");
+if (!root) throw new Error("Missing #app root element");
+
+new Shell(root);

package/src/board/BoardPreview.ts

@@ -0,0 +1,189 @@
+import { ContentApi } from "../content/ContentApi";
+import { ImageCache } from "../canvas/ImageCache";
+import { assetStore } from "../storage/AssetStore";
+import { renderElement, type RenderContext } from "../elements/renderElement";
+import { validateBoardDocument } from "../storage/BoardSerializer";
+import type { BoardDocument, BoardElement } from "../elements/types";
+
+export type BoardPreviewOptions = {
+  rootId: string;
+  src: string;
+  srcCandidates?: string[];
+  region: [number, number, number, number] | null;
+  height: number;
+  title: string | null;
+  theme: "light" | "dark";
+};
+
+/**
+ * A read-only, static render of a board cropped to a world-space region.
+ * Used to embed boards inside markdown docs. No tools, no event loop — it
+ * paints once (and again when lazy images finish decoding or on resize),
+ * which keeps docs VitePress-fast even with several embeds on a page.
+ */
+export class BoardPreview {
+  readonly element: HTMLElement;
+  private canvas: HTMLCanvasElement;
+  private ctx: CanvasRenderingContext2D;
+  private imageCache: ImageCache;
+  private doc: BoardDocument | null = null;
+  private region: [number, number, number, number] = [0, 0, 100, 100];
+  private opts: BoardPreviewOptions;
+  private openLink: HTMLAnchorElement;
+  private ro: ResizeObserver;
+
+  constructor(figure: HTMLElement, opts: BoardPreviewOptions) {
+    this.opts = opts;
+    this.element = figure;
+    figure.classList.add("board-embed");
+    figure.textContent = "";
+
+    const frame = document.createElement("div");
+    frame.className = "board-embed-frame";
+    frame.style.height = opts.height + "px";
+
+    this.canvas = document.createElement("canvas");
+    this.ctx = this.canvas.getContext("2d") as CanvasRenderingContext2D;
+    frame.appendChild(this.canvas);
+    figure.appendChild(frame);
+
+    const open = document.createElement("a");
+    open.className = "board-embed-open";
+    const regionParam = opts.region ? `?region=${encodeURIComponent(opts.region.join(","))}` : "";
+    open.href = `#/root/${encodeURIComponent(opts.rootId)}/boards/${encodeURIComponent(opts.src)}${regionParam}`;
+    open.textContent = "Open board →";
+    this.openLink = open;
+    frame.appendChild(open);
+
+    if (opts.title) {
+      const cap = document.createElement("figcaption");
+      cap.textContent = opts.title;
+      figure.appendChild(cap);
+    }
+
+    this.imageCache = new ImageCache(assetStore, () => this.render(), (src) =>
+      ContentApi.assetUrl(this.opts.rootId, src)
+    );
+    this.ro = new ResizeObserver(() => this.render());
+    this.ro.observe(frame);
+
+    void this.load();
+  }
+
+  private async load(): Promise<void> {
+    try {
+      const candidates = this.opts.srcCandidates?.length ? this.opts.srcCandidates : [this.opts.src];
+      let doc: BoardDocument | null = null;
+      let resolvedSrc = this.opts.src;
+      for (const src of candidates) {
+        const raw = await ContentApi.getBoard(this.opts.rootId, src);
+        doc = raw ? validateBoardDocument(raw) : null;
+        if (doc) {
+          resolvedSrc = src;
+          break;
+        }
+      }
+      if (!doc) return this.renderError(`Board "${this.opts.src}" not found`);
+      this.opts.src = resolvedSrc;
+      const regionParam = this.opts.region ? `?region=${encodeURIComponent(this.opts.region.join(","))}` : "";
+      this.openLink.href =
+        `#/root/${encodeURIComponent(this.opts.rootId)}/boards/${encodeURIComponent(resolvedSrc)}${regionParam}`;
+      this.doc = doc;
+      this.region = this.opts.region ?? boundsOf(doc.elements);
+      this.render();
+    } catch {
+      this.renderError("Failed to load board");
+    }
+  }
+
+  private renderError(msg: string): void {
+    this.element.querySelector(".board-embed-frame")?.classList.add("error");
+    const frame = this.element.querySelector(".board-embed-frame");
+    if (frame) {
+      frame.innerHTML = "";
+      const span = document.createElement("span");
+      span.className = "board-embed-msg";
+      span.textContent = msg;
+      frame.appendChild(span);
+    }
+  }
+
+  render(): void {
+    if (!this.doc) return;
+    const frame = this.canvas.parentElement as HTMLElement;
+    const cssW = Math.max(1, frame.clientWidth);
+    const cssH = Math.max(1, frame.clientHeight);
+    const dpr = Math.max(1, window.devicePixelRatio || 1);
+
+    this.canvas.width = Math.round(cssW * dpr);
+    this.canvas.height = Math.round(cssH * dpr);
+    this.canvas.style.width = cssW + "px";
+    this.canvas.style.height = cssH + "px";
+
+    const ctx = this.ctx;
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    ctx.clearRect(0, 0, cssW, cssH);
+
+    // background matching the canvas theme
+    ctx.fillStyle = this.opts.theme === "dark" ? "#111315" : "#f3f2f1";
+    ctx.fillRect(0, 0, cssW, cssH);
+
+    const [rx, ry, rw, rh] = this.region;
+    if (rw <= 0 || rh <= 0) return;
+
+    // "contain" fit: the region rectangle fits centered within the canvas
+    const scale = Math.min(cssW / rw, cssH / rh);
+    const offsetX = (cssW - rw * scale) / 2 - rx * scale;
+    const offsetY = (cssH - rh * scale) / 2 - ry * scale;
+
+    ctx.save();
+    ctx.translate(offsetX, offsetY);
+    ctx.scale(scale, scale);
+
+    const rc: RenderContext = {
+      ctx,
+      scale,
+      lod: 2,
+      theme: this.opts.theme,
+      imageCache: this.imageCache,
+    };
+
+    // cull to the visible region (with margin) for speed
+    const margin = Math.max(rw, rh) * 0.1;
+    for (const el of [...this.doc.elements].sort((a, b) => a.zIndex - b.zIndex)) {
+      if (el.hidden) continue;
+      if (
+        el.x + el.width < rx - margin ||
+        el.x > rx + rw + margin ||
+        el.y + el.height < ry - margin ||
+        el.y > ry + rh + margin
+      ) {
+        continue;
+      }
+      renderElement(el, rc);
+    }
+    ctx.restore();
+  }
+
+  destroy(): void {
+    this.ro.disconnect();
+    this.imageCache.clear();
+  }
+}
+
+/** Bounding box of all elements with a little padding. */
+function boundsOf(elements: BoardElement[]): [number, number, number, number] {
+  if (elements.length === 0) return [0, 0, 800, 600];
+  let minX = Infinity,
+    minY = Infinity,
+    maxX = -Infinity,
+    maxY = -Infinity;
+  for (const el of elements) {
+    minX = Math.min(minX, el.x, el.x + el.width);
+    minY = Math.min(minY, el.y, el.y + el.height);
+    maxX = Math.max(maxX, el.x, el.x + el.width);
+    maxY = Math.max(maxY, el.y, el.y + el.height);
+  }
+  const pad = 40;
+  return [minX - pad, minY - pad, maxX - minX + pad * 2, maxY - minY + pad * 2];
+}