viteboard 0.1.0

package/src/app/BoardState.ts

@@ -0,0 +1,130 @@
+import type { BoardElement } from "../elements/types";
+import type { Viewport, ViewportBounds } from "../canvas/Viewport";
+import { DEFAULT_ZOOM } from "../canvas/Viewport";
+
+export type Theme = "light" | "dark";
+
+type Listener = () => void;
+
+export class BoardState {
+  boardId = "default-board";
+  title = "Untitled Board";
+  createdAt = Date.now();
+
+  viewport: Viewport = { offsetX: 0, offsetY: 0, scale: DEFAULT_ZOOM };
+  theme: Theme = "light";
+
+  elements: BoardElement[] = [];
+  elementsById = new Map<string, BoardElement>();
+  selectedIds = new Set<string>();
+  hoveredId: string | null = null;
+
+  /** sorted render cache */
+  private sortedCache: BoardElement[] | null = null;
+
+  private changeListeners: Listener[] = [];
+  private renderListeners: Listener[] = [];
+
+  // ---------- change events ----------
+
+  onChange(fn: Listener): void {
+    this.changeListeners.push(fn);
+  }
+
+  onRenderNeeded(fn: Listener): void {
+    this.renderListeners.push(fn);
+  }
+
+  /** structural/document change: triggers autosave + render */
+  emitChange(): void {
+    this.sortedCache = null;
+    for (const fn of this.changeListeners) fn();
+    this.requestRender();
+  }
+
+  /** visual-only change: triggers render only */
+  requestRender(): void {
+    for (const fn of this.renderListeners) fn();
+  }
+
+  // ---------- elements ----------
+
+  addElement(el: BoardElement): void {
+    this.elements.push(el);
+    this.elementsById.set(el.id, el);
+    this.sortedCache = null;
+  }
+
+  removeElement(id: string): BoardElement | undefined {
+    const el = this.elementsById.get(id);
+    if (!el) return undefined;
+    this.elementsById.delete(id);
+    const idx = this.elements.indexOf(el);
+    if (idx >= 0) this.elements.splice(idx, 1);
+    this.selectedIds.delete(id);
+    this.sortedCache = null;
+    return el;
+  }
+
+  getSorted(): BoardElement[] {
+    if (!this.sortedCache) {
+      this.sortedCache = [...this.elements].sort((a, b) => a.zIndex - b.zIndex);
+    }
+    return this.sortedCache;
+  }
+
+  invalidateSort(): void {
+    this.sortedCache = null;
+  }
+
+  maxZIndex(): number {
+    let max = 0;
+    for (const el of this.elements) if (el.zIndex > max) max = el.zIndex;
+    return max;
+  }
+
+  minZIndex(): number {
+    let min = 0;
+    for (const el of this.elements) if (el.zIndex < min) min = el.zIndex;
+    return min;
+  }
+
+  getSelected(): BoardElement[] {
+    const out: BoardElement[] = [];
+    for (const id of this.selectedIds) {
+      const el = this.elementsById.get(id);
+      if (el) out.push(el);
+    }
+    return out;
+  }
+
+  clearSelection(): void {
+    this.selectedIds.clear();
+  }
+
+  getVisibleElements(bounds: ViewportBounds): BoardElement[] {
+    const out: BoardElement[] = [];
+    for (const el of this.getSorted()) {
+      if (el.hidden) continue;
+      if (isElementVisible(el, bounds)) out.push(el);
+    }
+    return out;
+  }
+}
+
+export function isElementVisible(
+  element: BoardElement,
+  bounds: ViewportBounds
+): boolean {
+  // lines/arrows can have negative w/h semantics; use normalized bbox
+  const x1 = Math.min(element.x, element.x + element.width);
+  const x2 = Math.max(element.x, element.x + element.width);
+  const y1 = Math.min(element.y, element.y + element.height);
+  const y2 = Math.max(element.y, element.y + element.height);
+  return !(
+    x2 < bounds.left ||
+    x1 > bounds.right ||
+    y2 < bounds.top ||
+    y1 > bounds.bottom
+  );
+}

package/src/app/ClipboardService.ts

@@ -0,0 +1,159 @@
+import type { BoardState } from "./BoardState";
+import type { ElementActions } from "./ElementActions";
+import type { ImageInsertService } from "./ImageInsertService";
+import { createElement, type BoardElement } from "../elements/types";
+import { validateElement } from "../storage/BoardSerializer";
+import { screenToWorld } from "../canvas/Viewport";
+
+/**
+ * Paste priority: board elements (internal) > image data > plain text.
+ */
+export class ClipboardService {
+  private state: BoardState;
+  private actions: ElementActions;
+  private imageInsert: ImageInsertService;
+  private internalClipboard: BoardElement[] = [];
+  lastPointer = { x: window.innerWidth / 2, y: window.innerHeight / 2 };
+
+  constructor(
+    state: BoardState,
+    actions: ElementActions,
+    imageInsert: ImageInsertService,
+    signal?: AbortSignal
+  ) {
+    this.state = state;
+    this.actions = actions;
+    this.imageInsert = imageInsert;
+
+    window.addEventListener("pointermove", (e) => {
+      this.lastPointer = { x: e.clientX, y: e.clientY };
+    }, { signal });
+
+    window.addEventListener("paste", (e) => {
+      if (this.isEditingText(e.target)) return;
+      void this.handlePaste(e as ClipboardEvent);
+    }, { signal });
+
+    window.addEventListener("copy", (e) => {
+      if (this.isEditingText(e.target)) return;
+      if (this.copySelection()) e.preventDefault();
+    }, { signal });
+
+    window.addEventListener("cut", (e) => {
+      if (this.isEditingText(e.target)) return;
+      if (this.copySelection()) {
+        this.actions.deleteSelection();
+        e.preventDefault();
+      }
+    }, { signal });
+  }
+
+  private isEditingText(target: EventTarget | null): boolean {
+    const el = target as HTMLElement | null;
+    return (
+      !!el &&
+      (el.tagName === "TEXTAREA" || el.tagName === "INPUT" || el.isContentEditable)
+    );
+  }
+
+  copySelection(): boolean {
+    const selected = this.state.getSelected();
+    if (selected.length === 0) return false;
+    this.internalClipboard = selected.map((el) => ({
+      ...el,
+      style: { ...el.style },
+      data: { ...el.data },
+    }));
+    return true;
+  }
+
+  private async handlePaste(e: ClipboardEvent): Promise<void> {
+    const items = e.clipboardData?.items;
+
+    // 1. image data
+    if (items) {
+      for (const item of items) {
+        if (item.type.startsWith("image/")) {
+          const blob = item.getAsFile();
+          if (blob) {
+            e.preventDefault();
+            await this.imageInsert.insertBlob(
+              blob,
+              this.lastPointer.x,
+              this.lastPointer.y,
+              "Pasted screenshot"
+            );
+            return;
+          }
+        }
+      }
+    }
+
+    // 2. internal board elements
+    if (this.internalClipboard.length > 0) {
+      e.preventDefault();
+      this.pasteInternal();
+      return;
+    }
+
+    // 3. plain text
+    const text = e.clipboardData?.getData("text/plain");
+    if (text && text.trim()) {
+      e.preventDefault();
+      this.pasteText(text.trim());
+    }
+  }
+
+  private pasteInternal(): void {
+    const world = screenToWorld(this.lastPointer.x, this.lastPointer.y, this.state.viewport);
+
+    // center of clipboard contents
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    for (const el of this.internalClipboard) {
+      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));
+    }
+    const cx = (minX + maxX) / 2;
+    const cy = (minY + maxY) / 2;
+
+    let z = this.state.maxZIndex();
+    const clones: BoardElement[] = [];
+    for (const raw of this.internalClipboard) {
+      const validated = validateElement(raw);
+      if (!validated) continue;
+      const clone = this.actions.cloneElement(validated, 0);
+      clone.x = validated.x + (world.x - cx);
+      clone.y = validated.y + (world.y - cy);
+      clone.zIndex = ++z;
+      clones.push(clone);
+    }
+    if (clones.length === 0) return;
+
+    this.actions.insertElements(clones, "paste");
+    this.state.clearSelection();
+    for (const clone of clones) this.state.selectedIds.add(clone.id);
+    this.state.requestRender();
+  }
+
+  private pasteText(text: string): void {
+    const world = screenToWorld(this.lastPointer.x, this.lastPointer.y, this.state.viewport);
+    const el = createElement("text", {
+      x: world.x,
+      y: world.y,
+      width: Math.min(420, Math.max(160, text.length * 8)),
+      height: 28,
+      zIndex: this.state.maxZIndex() + 1,
+      style: {
+        fontSize: 16,
+        textColor: this.state.theme === "dark" ? "#f2f2f2" : "#1f2933",
+      },
+      data: { text: text.slice(0, 5000) },
+    });
+    this.actions.insertElements([el], "paste-text");
+    this.state.clearSelection();
+    this.state.selectedIds.add(el.id);
+    this.state.requestRender();
+  }
+}

package/src/app/CommandManager.ts

@@ -0,0 +1,66 @@
+import { generateId } from "../elements/types";
+
+export type Command = {
+  id: string;
+  type: string;
+  timestamp: number;
+  do: () => void;
+  undo: () => void;
+};
+
+const MAX_HISTORY = 200;
+
+export class CommandManager {
+  private undoStack: Command[] = [];
+  private redoStack: Command[] = [];
+
+  /** Execute a command and push it onto the undo stack. */
+  execute(type: string, doFn: () => void, undoFn: () => void): void {
+    const cmd: Command = {
+      id: generateId(),
+      type,
+      timestamp: Date.now(),
+      do: doFn,
+      undo: undoFn,
+    };
+    cmd.do();
+    this.undoStack.push(cmd);
+    if (this.undoStack.length > MAX_HISTORY) this.undoStack.shift();
+    this.redoStack.length = 0;
+  }
+
+  /** Push an already-applied change (e.g. completed drag) without re-running it. */
+  push(type: string, doFn: () => void, undoFn: () => void): void {
+    const cmd: Command = {
+      id: generateId(),
+      type,
+      timestamp: Date.now(),
+      do: doFn,
+      undo: undoFn,
+    };
+    this.undoStack.push(cmd);
+    if (this.undoStack.length > MAX_HISTORY) this.undoStack.shift();
+    this.redoStack.length = 0;
+  }
+
+  undo(): boolean {
+    const cmd = this.undoStack.pop();
+    if (!cmd) return false;
+    cmd.undo();
+    this.redoStack.push(cmd);
+    return true;
+  }
+
+  redo(): boolean {
+    const cmd = this.redoStack.pop();
+    if (!cmd) return false;
+    cmd.do();
+    this.undoStack.push(cmd);
+    return true;
+  }
+
+  clear(): void {
+    this.undoStack.length = 0;
+    this.redoStack.length = 0;
+  }
+}

package/src/app/ElementActions.ts

@@ -0,0 +1,152 @@
+import type { BoardState } from "./BoardState";
+import type { CommandManager } from "./CommandManager";
+import type { BoardElement } from "../elements/types";
+import { generateId } from "../elements/types";
+
+/**
+ * Shared element operations: delete, duplicate, layering. All undoable.
+ */
+export class ElementActions {
+  private state: BoardState;
+  private commands: CommandManager;
+
+  constructor(state: BoardState, commands: CommandManager) {
+    this.state = state;
+    this.commands = commands;
+  }
+
+  deleteSelection(): void {
+    const selected = this.state.getSelected().filter((el) => !el.locked);
+    if (selected.length === 0) return;
+    const state = this.state;
+    const copies = selected.map((el) => el);
+
+    this.commands.execute(
+      "delete",
+      () => {
+        for (const el of copies) state.removeElement(el.id);
+        state.emitChange();
+      },
+      () => {
+        for (const el of copies) {
+          if (!state.elementsById.has(el.id)) state.addElement(el);
+        }
+        state.emitChange();
+      }
+    );
+  }
+
+  duplicateSelection(offset = 24): BoardElement[] {
+    const selected = this.state.getSelected();
+    if (selected.length === 0) return [];
+    const clones = selected.map((el) => this.cloneElement(el, offset));
+    this.insertElements(clones, "duplicate");
+    this.state.clearSelection();
+    for (const clone of clones) this.state.selectedIds.add(clone.id);
+    this.state.requestRender();
+    return clones;
+  }
+
+  cloneElement(el: BoardElement, offset: number): BoardElement {
+    const now = Date.now();
+    return {
+      ...el,
+      id: generateId(),
+      x: el.x + offset,
+      y: el.y + offset,
+      zIndex: this.state.maxZIndex() + 1,
+      createdAt: now,
+      updatedAt: now,
+      style: { ...el.style },
+      data: { ...el.data },
+    };
+  }
+
+  insertElements(elements: BoardElement[], commandType: string): void {
+    const state = this.state;
+    this.commands.execute(
+      commandType,
+      () => {
+        for (const el of elements) {
+          if (!state.elementsById.has(el.id)) state.addElement(el);
+        }
+        state.emitChange();
+      },
+      () => {
+        for (const el of elements) state.removeElement(el.id);
+        state.emitChange();
+      }
+    );
+  }
+
+  nudgeSelection(dx: number, dy: number): void {
+    const selected = this.state.getSelected().filter((el) => !el.locked);
+    if (selected.length === 0) return;
+    const state = this.state;
+    const before = selected.map((el) => ({ id: el.id, x: el.x, y: el.y, updatedAt: el.updatedAt }));
+    const after = selected.map((el) => ({
+      id: el.id,
+      x: el.x + dx,
+      y: el.y + dy,
+      updatedAt: Date.now(),
+    }));
+    const apply = (snaps: typeof before): void => {
+      for (const snap of snaps) {
+        const el = state.elementsById.get(snap.id);
+        if (!el) continue;
+        el.x = snap.x;
+        el.y = snap.y;
+        el.updatedAt = snap.updatedAt;
+      }
+      state.emitChange();
+    };
+    this.commands.execute("nudge", () => apply(after), () => apply(before));
+  }
+
+  // ---------- layering ----------
+
+  private applyZChange(mutate: (el: BoardElement) => void): void {
+    const selected = this.state.getSelected();
+    if (selected.length === 0) return;
+    const state = this.state;
+    const before = selected.map((el) => ({ id: el.id, z: el.zIndex }));
+
+    for (const el of selected) mutate(el);
+    state.invalidateSort();
+
+    const after = selected.map((el) => ({ id: el.id, z: el.zIndex }));
+    const apply = (snaps: { id: string; z: number }[]) => {
+      for (const s of snaps) {
+        const el = state.elementsById.get(s.id);
+        if (el) el.zIndex = s.z;
+      }
+      state.invalidateSort();
+      state.emitChange();
+    };
+
+    this.commands.push(
+      "layer",
+      () => apply(after),
+      () => apply(before)
+    );
+    state.emitChange();
+  }
+
+  bringForward(): void {
+    this.applyZChange((el) => (el.zIndex += 1));
+  }
+
+  sendBackward(): void {
+    this.applyZChange((el) => (el.zIndex -= 1));
+  }
+
+  bringToFront(): void {
+    let top = this.state.maxZIndex();
+    this.applyZChange((el) => (el.zIndex = ++top));
+  }
+
+  sendToBack(): void {
+    let bottom = this.state.minZIndex();
+    this.applyZChange((el) => (el.zIndex = --bottom));
+  }
+}

package/src/app/EmbedRegionSelector.ts

@@ -0,0 +1,103 @@
+export type ScreenRect = { x: number; y: number; w: number; h: number };
+
+/**
+ * Full-screen drag-to-select overlay. The user drags a rectangle over the board
+ * and we hand back the selected screen-space rectangle (or null if cancelled).
+ * The caller converts it to a world-space region for an embed snippet.
+ */
+export class EmbedRegionSelector {
+  private overlay: HTMLElement;
+  private rectEl: HTMLElement;
+  private abort = new AbortController();
+  private start: { x: number; y: number } | null = null;
+  private onComplete: (rect: ScreenRect | null) => void;
+  private done = false;
+
+  static begin(root: HTMLElement, onComplete: (rect: ScreenRect | null) => void): void {
+    new EmbedRegionSelector(root, onComplete);
+  }
+
+  private constructor(root: HTMLElement, onComplete: (rect: ScreenRect | null) => void) {
+    this.onComplete = onComplete;
+
+    this.overlay = document.createElement("div");
+    this.overlay.className = "embed-select-overlay";
+
+    const hint = document.createElement("div");
+    hint.className = "embed-select-hint";
+    hint.textContent = "Drag to select the area to embed · Esc to cancel";
+    this.overlay.appendChild(hint);
+
+    this.rectEl = document.createElement("div");
+    this.rectEl.className = "embed-select-rect";
+    this.rectEl.style.display = "none";
+    this.overlay.appendChild(this.rectEl);
+
+    root.appendChild(this.overlay);
+
+    const signal = this.abort.signal;
+    this.overlay.addEventListener("pointerdown", (e) => this.onDown(e), { signal });
+    this.overlay.addEventListener("pointermove", (e) => this.onMove(e), { signal });
+    this.overlay.addEventListener("pointerup", (e) => this.onUp(e), { signal });
+    window.addEventListener(
+      "keydown",
+      (e) => {
+        if (e.key === "Escape") {
+          e.preventDefault();
+          this.finish(null);
+        }
+      },
+      { signal }
+    );
+  }
+
+  private onDown(e: PointerEvent): void {
+    e.preventDefault();
+    this.start = { x: e.clientX, y: e.clientY };
+    this.rectEl.style.display = "block";
+    this.draw(e.clientX, e.clientY);
+    this.overlay.setPointerCapture(e.pointerId);
+  }
+
+  private onMove(e: PointerEvent): void {
+    if (!this.start) return;
+    this.draw(e.clientX, e.clientY);
+  }
+
+  private onUp(e: PointerEvent): void {
+    if (!this.start) return;
+    const rect = this.rectFrom(e.clientX, e.clientY);
+    // Ignore accidental clicks / tiny drags.
+    if (rect.w < 8 || rect.h < 8) {
+      this.finish(null);
+      return;
+    }
+    this.finish(rect);
+  }
+
+  private rectFrom(curX: number, curY: number): ScreenRect {
+    const s = this.start!;
+    return {
+      x: Math.min(s.x, curX),
+      y: Math.min(s.y, curY),
+      w: Math.abs(curX - s.x),
+      h: Math.abs(curY - s.y),
+    };
+  }
+
+  private draw(curX: number, curY: number): void {
+    const r = this.rectFrom(curX, curY);
+    this.rectEl.style.left = `${r.x}px`;
+    this.rectEl.style.top = `${r.y}px`;
+    this.rectEl.style.width = `${r.w}px`;
+    this.rectEl.style.height = `${r.h}px`;
+  }
+
+  private finish(rect: ScreenRect | null): void {
+    if (this.done) return;
+    this.done = true;
+    this.abort.abort();
+    this.overlay.remove();
+    this.onComplete(rect);
+  }
+}