viteboard 0.1.1 → 0.1.2

package/src/testing/StressTestGenerator.ts

@@ -1,134 +0,0 @@
-import type { BoardState } from "../app/BoardState";
-import { createElement, type BoardElement, type ElementType } from "../elements/types";
-import { STICKY_COLORS } from "../tools/StickyTool";
-
-const SHAPE_FILLS = [
-  "#93c5fd", "#a5b4fc", "#86efac", "#fdba74", "#fca5a5",
-  "#d8b4fe", "#f9a8d4", "#fef08a", "#ffffff", "#e5e7eb",
-];
-
-const WORDS = [
-  "Onboarding", "Checkout", "Retention", "Activation", "Churn risk",
-  "API gateway", "User insight", "Edge case", "Quick win", "Tech debt",
-  "Experiment", "Metric", "Persona", "Journey", "Feature flag",
-];
-
-function rand(min: number, max: number): number {
-  return min + Math.random() * (max - min);
-}
-
-function pick<T>(arr: T[]): T {
-  return arr[Math.floor(Math.random() * arr.length)];
-}
-
-const STRESS_TAG = "stress";
-
-export class StressTestGenerator {
-  private state: BoardState;
-  lastGenerateMs = 0;
-
-  constructor(state: BoardState) {
-    this.state = state;
-  }
-
-  generate(count: number): void {
-    const start = performance.now();
-    const spread = Math.sqrt(count) * 280;
-    const types: ElementType[] = ["sticky", "rectangle", "ellipse", "text", "arrow"];
-    let z = this.state.maxZIndex();
-
-    const batch: BoardElement[] = [];
-    for (let i = 0; i < count; i++) {
-      const type = pick(types);
-      const x = rand(-spread / 2, spread / 2);
-      const y = rand(-spread / 2, spread / 2);
-      let el: BoardElement;
-      if (type === "sticky") {
-        el = createElement("sticky", {
-          x, y, width: 220, height: 160, zIndex: ++z,
-          style: { fill: pick(STICKY_COLORS), borderRadius: 12, shadow: true, fontSize: 14, textColor: "#1f2933" },
-          data: { text: pick(WORDS), [STRESS_TAG]: true },
-        });
-      } else if (type === "rectangle" || type === "ellipse") {
-        el = createElement(type, {
-          x, y, width: rand(80, 300), height: rand(60, 200), zIndex: ++z,
-          style: { fill: pick(SHAPE_FILLS), stroke: "#37415188", strokeWidth: 1.5, borderRadius: type === "rectangle" ? 8 : 0 },
-          data: { [STRESS_TAG]: true },
-        });
-      } else if (type === "text") {
-        el = createElement("text", {
-          x, y, width: 200, height: 28, zIndex: ++z,
-          style: { fontSize: 16, textColor: this.state.theme === "dark" ? "#f2f2f2" : "#1f2933" },
-          data: { text: pick(WORDS), [STRESS_TAG]: true },
-        });
-      } else {
-        el = createElement("arrow", {
-          x, y, width: rand(-250, 250), height: rand(-250, 250), zIndex: ++z,
-          style: { stroke: pick(SHAPE_FILLS), strokeWidth: 2, arrowEnd: true },
-          data: { [STRESS_TAG]: true },
-        });
-      }
-      batch.push(el);
-    }
-
-    for (const el of batch) this.state.addElement(el);
-    this.lastGenerateMs = performance.now() - start;
-    this.state.emitChange();
-  }
-
-  generateImagePlaceholders(count: number): void {
-    const spread = Math.sqrt(count) * 420;
-    let z = this.state.maxZIndex();
-    for (let i = 0; i < count; i++) {
-      const el = createElement("image", {
-        x: rand(-spread / 2, spread / 2),
-        y: rand(-spread / 2, spread / 2),
-        width: 320,
-        height: 220,
-        zIndex: ++z,
-        data: { assetId: "stress-placeholder-" + i, [STRESS_TAG]: true },
-      });
-      this.state.addElement(el);
-    }
-    this.state.emitChange();
-  }
-
-  generateMixedPmBoard(): void {
-    this.generate(300);
-  }
-
-  randomizePositions(): void {
-    const spread = Math.sqrt(this.state.elements.length) * 280;
-    for (const el of this.state.elements) {
-      if (!el.data[STRESS_TAG]) continue;
-      el.x = rand(-spread / 2, spread / 2);
-      el.y = rand(-spread / 2, spread / 2);
-    }
-    this.state.emitChange();
-  }
-
-  randomizeColors(): void {
-    for (const el of this.state.elements) {
-      if (!el.data[STRESS_TAG]) continue;
-      if (el.type === "sticky") el.style.fill = pick(STICKY_COLORS);
-      else if (el.type === "rectangle" || el.type === "ellipse") el.style.fill = pick(SHAPE_FILLS);
-      else if (el.type === "arrow") el.style.stroke = pick(SHAPE_FILLS);
-    }
-    this.state.emitChange();
-  }
-
-  randomizeZIndex(): void {
-    for (const el of this.state.elements) {
-      if (!el.data[STRESS_TAG]) continue;
-      el.zIndex = Math.floor(rand(0, this.state.elements.length));
-    }
-    this.state.invalidateSort();
-    this.state.emitChange();
-  }
-
-  clearGenerated(): void {
-    const toRemove = this.state.elements.filter((el) => el.data[STRESS_TAG]);
-    for (const el of toRemove) this.state.removeElement(el.id);
-    this.state.emitChange();
-  }
-}

package/src/testing/StressTestPanel.ts

@@ -1,64 +0,0 @@
-import type { StressTestGenerator } from "./StressTestGenerator";
-import type { CanvasRenderer } from "../canvas/CanvasRenderer";
-import { showToast } from "../ui/Modal";
-
-export class StressTestPanel {
-  element: HTMLDivElement;
-  visible = false;
-
-  constructor(parent: HTMLElement, generator: StressTestGenerator, renderer: CanvasRenderer) {
-    this.element = document.createElement("div");
-    this.element.className = "stress-panel";
-
-    const addBtn = (text: string, onClick: () => void, danger = false) => {
-      const btn = document.createElement("button");
-      btn.className = "btn" + (danger ? " danger" : "");
-      btn.textContent = text;
-      btn.addEventListener("click", onClick);
-      this.element.appendChild(btn);
-    };
-
-    const gen = (n: number) => () => {
-      generator.generate(n);
-      showToast(`Generated ${n.toLocaleString()} elements in ${generator.lastGenerateMs.toFixed(0)}ms`);
-    };
-
-    addBtn("+100", gen(100));
-    addBtn("+1,000", gen(1000));
-    addBtn("+5,000", gen(5000));
-    addBtn("+10,000", gen(10000));
-    addBtn("+20,000", gen(20000));
-    addBtn("+100 images", () => {
-      generator.generateImagePlaceholders(100);
-      showToast("Generated 100 image placeholders");
-    });
-    addBtn("Mixed PM board", () => {
-      generator.generateMixedPmBoard();
-      showToast("Generated mixed PM board");
-    });
-    addBtn("Shuffle positions", () => generator.randomizePositions());
-    addBtn("Shuffle colors", () => generator.randomizeColors());
-    addBtn("Shuffle z-index", () => generator.randomizeZIndex());
-    addBtn("Toggle culling", () => {
-      renderer.cullingEnabled = !renderer.cullingEnabled;
-      showToast(`Viewport culling ${renderer.cullingEnabled ? "enabled" : "disabled"}`);
-      renderer.state.requestRender();
-    });
-    addBtn("Toggle LOD", () => {
-      renderer.lodEnabled = !renderer.lodEnabled;
-      showToast(`Simplified rendering ${renderer.lodEnabled ? "enabled" : "disabled"}`);
-      renderer.state.requestRender();
-    });
-    addBtn("Clear generated", () => {
-      generator.clearGenerated();
-      showToast("Cleared generated elements");
-    }, true);
-
-    parent.appendChild(this.element);
-  }
-
-  toggle(): void {
-    this.visible = !this.visible;
-    this.element.classList.toggle("visible", this.visible);
-  }
-}

package/src/tools/ArrowTool.ts

@@ -1,97 +0,0 @@
-import type { Tool, ToolContext } from "./ToolContext";
-import { createElement, type BoardElement } from "../elements/types";
-import { screenToWorld } from "../canvas/Viewport";
-
-type ArrowToolName = Extract<Tool["name"], "arrow" | "dashedArrow" | "twoWayArrow" | "labeledArrow" | "sidedLabelArrow">;
-
-export class ArrowTool implements Tool {
-  name: ArrowToolName;
-  cursor = "crosshair";
-
-  private drawing = false;
-  private startWorld = { x: 0, y: 0 };
-  private preview: BoardElement | null = null;
-
-  constructor(name: ArrowToolName = "arrow") {
-    this.name = name;
-  }
-
-  onPointerDown(e: PointerEvent, ctx: ToolContext): void {
-    const { state } = ctx;
-    this.drawing = true;
-    this.startWorld = screenToWorld(e.clientX, e.clientY, state.viewport);
-    this.preview = createElement("arrow", {
-      x: this.startWorld.x,
-      y: this.startWorld.y,
-      width: 0,
-      height: 0,
-      zIndex: state.maxZIndex() + 1,
-      style: {
-        stroke: state.theme === "dark" ? "#d1d5db" : "#374151",
-        strokeWidth: 2,
-        arrowEnd: true,
-        arrowStart: this.name === "twoWayArrow",
-        strokeDash: this.name === "dashedArrow" || e.altKey ? [8, 6] : undefined,
-      },
-      data: { text: "", labelPosition: this.name === "sidedLabelArrow" ? "sides" : "center" },
-    });
-    ctx.renderer.overlay.preview = this.preview;
-  }
-
-  onPointerMove(e: PointerEvent, ctx: ToolContext): void {
-    if (!this.drawing || !this.preview) return;
-    const world = screenToWorld(e.clientX, e.clientY, ctx.state.viewport);
-    let dx = world.x - this.startWorld.x;
-    let dy = world.y - this.startWorld.y;
-    if (e.shiftKey) {
-      // snap to 45-degree increments
-      const angle = Math.atan2(dy, dx);
-      const snapped = Math.round(angle / (Math.PI / 4)) * (Math.PI / 4);
-      const len = Math.hypot(dx, dy);
-      dx = Math.cos(snapped) * len;
-      dy = Math.sin(snapped) * len;
-    }
-    this.preview.width = dx;
-    this.preview.height = dy;
-    ctx.state.requestRender();
-  }
-
-  onPointerUp(_e: PointerEvent, ctx: ToolContext): void {
-    const { state, commands } = ctx;
-    if (!this.drawing || !this.preview) return;
-    this.drawing = false;
-    ctx.renderer.overlay.preview = null;
-
-    const el = this.preview;
-    this.preview = null;
-
-    if (Math.hypot(el.width, el.height) < 8) {
-      state.requestRender();
-      return;
-    }
-
-    commands.execute(
-      "create-arrow",
-      () => {
-        if (!state.elementsById.has(el.id)) state.addElement(el);
-        state.emitChange();
-      },
-      () => {
-        state.removeElement(el.id);
-        state.emitChange();
-      }
-    );
-
-    state.clearSelection();
-    state.selectedIds.add(el.id);
-    ctx.setTool("select");
-    if (this.name === "labeledArrow" || this.name === "sidedLabelArrow") ctx.openTextEditor(el);
-  }
-
-  onCancel(ctx: ToolContext): void {
-    this.drawing = false;
-    this.preview = null;
-    ctx.renderer.overlay.preview = null;
-    ctx.state.requestRender();
-  }
-}

package/src/tools/ImageTool.ts

@@ -1,39 +0,0 @@
-import type { Tool, ToolContext } from "./ToolContext";
-
-/**
- * The image "tool" opens a file picker; insertion logic lives in
- * ImageInsertService which is shared with paste and drag-and-drop.
- */
-export class ImageTool implements Tool {
-  name = "image" as const;
-  cursor = "default";
-
-  private onInsert: (files: FileList, x: number, y: number) => void;
-
-  constructor(onInsert: (files: FileList, x: number, y: number) => void) {
-    this.onInsert = onInsert;
-  }
-
-  onActivate(ctx: ToolContext): void {
-    const input = document.createElement("input");
-    input.type = "file";
-    input.accept = "image/png,image/jpeg,image/webp,image/gif";
-    input.multiple = true;
-    input.onchange = () => {
-      if (input.files && input.files.length > 0) {
-        this.onInsert(
-          input.files,
-          window.innerWidth / 2,
-          window.innerHeight / 2
-        );
-      }
-      ctx.setTool("select");
-    };
-    input.oncancel = () => ctx.setTool("select");
-    input.click();
-  }
-
-  onPointerDown(_e: PointerEvent, _ctx: ToolContext): void {}
-  onPointerMove(_e: PointerEvent, _ctx: ToolContext): void {}
-  onPointerUp(_e: PointerEvent, _ctx: ToolContext): void {}
-}

package/src/tools/PanTool.ts

@@ -1,34 +0,0 @@
-import type { Tool, ToolContext } from "./ToolContext";
-
-export class PanTool implements Tool {
-  name = "hand" as const;
-  cursor = "grab";
-
-  private panning = false;
-  private last = { x: 0, y: 0 };
-
-  onPointerDown(e: PointerEvent, ctx: ToolContext): void {
-    this.panning = true;
-    this.last = { x: e.clientX, y: e.clientY };
-    ctx.setCursor("grabbing");
-  }
-
-  onPointerMove(e: PointerEvent, ctx: ToolContext): void {
-    if (!this.panning) return;
-    const vp = ctx.state.viewport;
-    vp.offsetX += e.clientX - this.last.x;
-    vp.offsetY += e.clientY - this.last.y;
-    this.last = { x: e.clientX, y: e.clientY };
-    ctx.state.requestRender();
-  }
-
-  onPointerUp(_e: PointerEvent, ctx: ToolContext): void {
-    this.panning = false;
-    ctx.setCursor("grab");
-  }
-
-  onCancel(ctx: ToolContext): void {
-    this.panning = false;
-    ctx.setCursor("grab");
-  }
-}