viteboard 0.1.1 → 0.1.2

package/src/tools/SelectTool.ts

@@ -1,377 +0,0 @@
-import type { Tool, ToolContext } from "./ToolContext";
-import type { BoardElement } from "../elements/types";
-import { screenToWorld } from "../canvas/Viewport";
-import { handlePoints, type HandleId } from "../canvas/CanvasRenderer";
-import { invalidateTextCache } from "../elements/renderElement";
-
-type DragMode = "none" | "move" | "marquee" | "resize" | "endpoint";
-
-type Snapshot = { id: string; x: number; y: number; width: number; height: number };
-
-const HANDLE_HIT_RADIUS = 7;
-
-const HANDLE_CURSORS: Record<HandleId, string> = {
-  nw: "nwse-resize",
-  n: "ns-resize",
-  ne: "nesw-resize",
-  e: "ew-resize",
-  se: "nwse-resize",
-  s: "ns-resize",
-  sw: "nesw-resize",
-  w: "ew-resize",
-};
-
-export class SelectTool implements Tool {
-  name = "select" as const;
-  cursor = "default";
-
-  private mode: DragMode = "none";
-  private startScreen = { x: 0, y: 0 };
-  private startWorld = { x: 0, y: 0 };
-  private snapshots: Snapshot[] = [];
-  private activeHandle: HandleId | null = null;
-  private endpointIsStart = false;
-  private moved = false;
-  private pointerDownHitId: string | null = null;
-
-  onPointerDown(e: PointerEvent, ctx: ToolContext): void {
-    const { state, hitTester, renderer } = ctx;
-    this.startScreen = { x: e.clientX, y: e.clientY };
-    this.startWorld = screenToWorld(e.clientX, e.clientY, state.viewport);
-    this.moved = false;
-
-    // 1. resize handle on current selection?
-    const handle = this.hitHandle(e, ctx);
-    if (handle) {
-      this.mode = "resize";
-      this.activeHandle = handle;
-      this.takeSnapshots(state.getSelected());
-      return;
-    }
-
-    // 2. arrow/line endpoint?
-    const selected = state.getSelected();
-    if (selected.length === 1 && this.isLinear(selected[0])) {
-      const ep = this.hitEndpoint(e, selected[0], ctx);
-      if (ep !== null) {
-        this.mode = "endpoint";
-        this.endpointIsStart = ep;
-        this.takeSnapshots(selected);
-        return;
-      }
-    }
-
-    // 3. element under cursor?
-    const hit = hitTester.hitTest(this.startWorld.x, this.startWorld.y, state.viewport.scale);
-    if (hit) {
-      this.pointerDownHitId = hit.id;
-      if (e.shiftKey) {
-        if (state.selectedIds.has(hit.id)) state.selectedIds.delete(hit.id);
-        else state.selectedIds.add(hit.id);
-      } else if (!state.selectedIds.has(hit.id)) {
-        state.clearSelection();
-        state.selectedIds.add(hit.id);
-      }
-      this.mode = "move";
-      this.takeSnapshots(state.getSelected());
-      state.requestRender();
-      return;
-    }
-
-    // 4. empty canvas: marquee
-    if (!e.shiftKey) state.clearSelection();
-    this.mode = "marquee";
-    renderer.overlay.marquee = { x: e.clientX, y: e.clientY, w: 0, h: 0 };
-    state.requestRender();
-  }
-
-  onPointerMove(e: PointerEvent, ctx: ToolContext): void {
-    const { state, renderer, hitTester } = ctx;
-
-    if (this.mode === "none") {
-      // hover feedback + handle cursors
-      const handle = this.hitHandle(e, ctx);
-      if (handle) {
-        ctx.setCursor(HANDLE_CURSORS[handle]);
-        return;
-      }
-      const world = screenToWorld(e.clientX, e.clientY, state.viewport);
-      const hit = hitTester.hitTest(world.x, world.y, state.viewport.scale);
-      const newHover = hit ? hit.id : null;
-      ctx.setCursor(hit ? "move" : "default");
-      if (newHover !== state.hoveredId) {
-        state.hoveredId = newHover;
-        state.requestRender();
-      }
-      return;
-    }
-
-    const dxScreen = e.clientX - this.startScreen.x;
-    const dyScreen = e.clientY - this.startScreen.y;
-    if (Math.abs(dxScreen) + Math.abs(dyScreen) > 2) this.moved = true;
-
-    const dx = dxScreen / state.viewport.scale;
-    const dy = dyScreen / state.viewport.scale;
-
-    if (this.mode === "move") {
-      for (const snap of this.snapshots) {
-        const el = state.elementsById.get(snap.id);
-        if (!el || el.locked) continue;
-        el.x = snap.x + dx;
-        el.y = snap.y + dy;
-      }
-      state.requestRender();
-    } else if (this.mode === "marquee") {
-      renderer.overlay.marquee = {
-        x: this.startScreen.x,
-        y: this.startScreen.y,
-        w: dxScreen,
-        h: dyScreen,
-      };
-      state.requestRender();
-    } else if (this.mode === "resize" && this.activeHandle) {
-      this.applyResize(dx, dy, e.shiftKey, ctx);
-      state.requestRender();
-    } else if (this.mode === "endpoint") {
-      const snap = this.snapshots[0];
-      const el = state.elementsById.get(snap.id);
-      if (el) {
-        if (this.endpointIsStart) {
-          el.x = snap.x + dx;
-          el.y = snap.y + dy;
-          el.width = snap.width - dx;
-          el.height = snap.height - dy;
-        } else {
-          el.width = snap.width + dx;
-          el.height = snap.height + dy;
-        }
-      }
-      state.requestRender();
-    }
-  }
-
-  onPointerUp(e: PointerEvent, ctx: ToolContext): void {
-    const { state, renderer, hitTester, commands } = ctx;
-
-    if (this.mode === "marquee") {
-      const m = renderer.overlay.marquee;
-      renderer.overlay.marquee = null;
-      if (m && (Math.abs(m.w) > 3 || Math.abs(m.h) > 3)) {
-        const a = screenToWorld(m.x, m.y, state.viewport);
-        const b = screenToWorld(m.x + m.w, m.y + m.h, state.viewport);
-        const hits = hitTester.elementsInRect(a.x, a.y, b.x - a.x, b.y - a.y);
-        for (const el of hits) state.selectedIds.add(el.id);
-      }
-      state.requestRender();
-    } else if (
-      (this.mode === "move" || this.mode === "resize" || this.mode === "endpoint") &&
-      this.moved
-    ) {
-      // push undo command with before/after snapshots
-      const before = this.snapshots;
-      const after: Snapshot[] = before.map((s) => {
-        const el = state.elementsById.get(s.id)!;
-        return { id: s.id, x: el.x, y: el.y, width: el.width, height: el.height };
-      });
-      const apply = (snaps: Snapshot[]) => {
-        for (const s of snaps) {
-          const el = state.elementsById.get(s.id);
-          if (!el) continue;
-          el.x = s.x;
-          el.y = s.y;
-          el.width = s.width;
-          el.height = s.height;
-          el.updatedAt = Date.now();
-          invalidateTextCache(el.id);
-        }
-        state.emitChange();
-      };
-      for (const s of after) {
-        const el = state.elementsById.get(s.id);
-        if (el) {
-          el.updatedAt = Date.now();
-          invalidateTextCache(el.id);
-        }
-      }
-      commands.push(
-        this.mode,
-        () => apply(after),
-        () => apply(before)
-      );
-      state.emitChange();
-    } else if (this.mode === "move" && !this.moved) {
-      this.toggleTaskIfCheckboxClick(e, ctx);
-    }
-
-    this.mode = "none";
-    this.activeHandle = null;
-    this.snapshots = [];
-    this.pointerDownHitId = null;
-  }
-
-  onDoubleClick(e: PointerEvent, ctx: ToolContext): void {
-    const { state, hitTester } = ctx;
-    const world = screenToWorld(e.clientX, e.clientY, state.viewport);
-    const hit = hitTester.hitTest(world.x, world.y, state.viewport.scale);
-    if (hit && (hit.type === "sticky" || hit.type === "task" || hit.type === "text" || hit.type === "rectangle" || hit.type === "ellipse" || hit.type === "frame" || hit.type === "arrow" || hit.type === "line" || hit.type === "connector")) {
-      ctx.openTextEditor(hit);
-    }
-  }
-
-  onCancel(ctx: ToolContext): void {
-    // restore snapshots if mid-drag
-    if (this.mode !== "none" && this.snapshots.length > 0) {
-      for (const s of this.snapshots) {
-        const el = ctx.state.elementsById.get(s.id);
-        if (!el) continue;
-        el.x = s.x;
-        el.y = s.y;
-        el.width = s.width;
-        el.height = s.height;
-      }
-    }
-    ctx.renderer.overlay.marquee = null;
-    this.mode = "none";
-    ctx.state.clearSelection();
-    ctx.state.requestRender();
-  }
-
-  // ---------- helpers ----------
-
-  private isLinear(el: BoardElement): boolean {
-    return el.type === "line" || el.type === "arrow" || el.type === "connector";
-  }
-
-  private takeSnapshots(elements: BoardElement[]): void {
-    this.snapshots = elements.map((el) => ({
-      id: el.id,
-      x: el.x,
-      y: el.y,
-      width: el.width,
-      height: el.height,
-    }));
-  }
-
-  private toggleTaskIfCheckboxClick(e: PointerEvent, ctx: ToolContext): void {
-    const { state, hitTester, commands } = ctx;
-    const world = screenToWorld(e.clientX, e.clientY, state.viewport);
-    const hit = hitTester.hitTest(world.x, world.y, state.viewport.scale);
-    if (!hit || hit.id !== this.pointerDownHitId || hit.type !== "task") return;
-    if (!this.hitTaskCheckbox(world.x, world.y, hit)) return;
-    const before = hit.data.checked === true;
-    const after = !before;
-    const id = hit.id;
-    const apply = (checked: boolean) => {
-      const el = state.elementsById.get(id);
-      if (!el) return;
-      el.data.checked = checked;
-      el.updatedAt = Date.now();
-      state.emitChange();
-    };
-    commands.execute("toggle-task", () => apply(after), () => apply(before));
-  }
-
-  private hitTaskCheckbox(wx: number, wy: number, el: BoardElement): boolean {
-    const boxSize = Math.min(22, Math.max(16, el.height * 0.38));
-    const boxX = el.x + 16;
-    const boxY = el.y + el.height / 2 - boxSize / 2;
-    const pad = 8;
-    return wx >= boxX - pad && wx <= boxX + boxSize + pad && wy >= boxY - pad && wy <= boxY + boxSize + pad;
-  }
-
-  private hitHandle(e: PointerEvent, ctx: ToolContext): HandleId | null {
-    const { state, renderer } = ctx;
-    const selected = state.getSelected();
-    if (selected.length === 0) return null;
-    if (selected.length === 1 && this.isLinear(selected[0])) return null;
-
-    let bbox;
-    if (selected.length === 1) {
-      bbox = renderer.elementScreenBBox(selected[0]);
-    } else {
-      let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
-      for (const el of selected) {
-        const b = renderer.elementScreenBBox(el);
-        minX = Math.min(minX, b.x);
-        minY = Math.min(minY, b.y);
-        maxX = Math.max(maxX, b.x + b.w);
-        maxY = Math.max(maxY, b.y + b.h);
-      }
-      bbox = { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
-    }
-
-    for (const p of handlePoints(bbox)) {
-      if (
-        Math.abs(e.clientX - p.x) <= HANDLE_HIT_RADIUS &&
-        Math.abs(e.clientY - p.y) <= HANDLE_HIT_RADIUS
-      ) {
-        return p.id;
-      }
-    }
-    return null;
-  }
-
-  private hitEndpoint(e: PointerEvent, el: BoardElement, ctx: ToolContext): boolean | null {
-    const vp = ctx.state.viewport;
-    const sx1 = el.x * vp.scale + vp.offsetX;
-    const sy1 = el.y * vp.scale + vp.offsetY;
-    const sx2 = (el.x + el.width) * vp.scale + vp.offsetX;
-    const sy2 = (el.y + el.height) * vp.scale + vp.offsetY;
-    if (Math.hypot(e.clientX - sx1, e.clientY - sy1) <= HANDLE_HIT_RADIUS + 2) return true;
-    if (Math.hypot(e.clientX - sx2, e.clientY - sy2) <= HANDLE_HIT_RADIUS + 2) return false;
-    return null;
-  }
-
-  private applyResize(dx: number, dy: number, preserveAspect: boolean, ctx: ToolContext): void {
-    const { state } = ctx;
-    const h = this.activeHandle!;
-
-    // group bbox in world coords from snapshots
-    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
-    for (const s of this.snapshots) {
-      minX = Math.min(minX, Math.min(s.x, s.x + s.width));
-      minY = Math.min(minY, Math.min(s.y, s.y + s.height));
-      maxX = Math.max(maxX, Math.max(s.x, s.x + s.width));
-      maxY = Math.max(maxY, Math.max(s.y, s.y + s.height));
-    }
-    const ow = maxX - minX;
-    const oh = maxY - minY;
-    if (ow === 0 || oh === 0) return;
-
-    let nx = minX, ny = minY, nw = ow, nh = oh;
-    if (h.includes("e")) nw = ow + dx;
-    if (h.includes("w")) { nx = minX + dx; nw = ow - dx; }
-    if (h.includes("s")) nh = oh + dy;
-    if (h.includes("n")) { ny = minY + dy; nh = oh - dy; }
-
-    if (preserveAspect && (h === "nw" || h === "ne" || h === "se" || h === "sw")) {
-      const ratio = ow / oh;
-      if (Math.abs(nw / ow) > Math.abs(nh / oh)) {
-        const newH = nw / ratio;
-        if (h.includes("n")) ny = ny + (nh - newH);
-        nh = newH;
-      } else {
-        const newW = nh * ratio;
-        if (h.includes("w")) nx = nx + (nw - newW);
-        nw = newW;
-      }
-    }
-
-    const MIN = 4;
-    if (Math.abs(nw) < MIN || Math.abs(nh) < MIN) return;
-
-    const scaleX = nw / ow;
-    const scaleY = nh / oh;
-
-    for (const s of this.snapshots) {
-      const el = state.elementsById.get(s.id);
-      if (!el || el.locked) continue;
-      el.x = nx + (s.x - minX) * scaleX;
-      el.y = ny + (s.y - minY) * scaleY;
-      el.width = s.width * scaleX;
-      el.height = s.height * scaleY;
-      el.updatedAt = Date.now();
-      invalidateTextCache(el.id);
-    }
-  }
-}

package/src/tools/ShapeTool.ts

@@ -1,106 +0,0 @@
-import type { Tool, ToolContext } from "./ToolContext";
-import type { ToolName } from "./ToolContext";
-import { createElement, type BoardElement, type ElementType } from "../elements/types";
-import { screenToWorld } from "../canvas/Viewport";
-
-type ShapeToolName = Extract<ToolName, "rectangle" | "ellipse" | "diamond" | "triangle" | "pill" | "chevron" | "parallelogram" | "hexagon" | "cylinder">;
-
-export class ShapeTool implements Tool {
-  name: ShapeToolName;
-  cursor = "crosshair";
-
-  private shapeType: ElementType;
-  private shapeKind: ShapeToolName;
-  private drawing = false;
-  private startWorld = { x: 0, y: 0 };
-  private preview: BoardElement | null = null;
-
-  constructor(name: ShapeToolName) {
-    this.name = name;
-    this.shapeKind = name;
-    this.shapeType = name === "ellipse" ? "ellipse" : "rectangle";
-  }
-
-  onPointerDown(e: PointerEvent, ctx: ToolContext): void {
-    const { state } = ctx;
-    this.drawing = true;
-    this.startWorld = screenToWorld(e.clientX, e.clientY, state.viewport);
-    const isDark = state.theme === "dark";
-    const isGraphicShape = !["rectangle", "ellipse", "pill", "cylinder"].includes(this.shapeKind);
-    this.preview = createElement(this.shapeType, {
-      x: this.startWorld.x,
-      y: this.startWorld.y,
-      width: 0,
-      height: 0,
-      zIndex: state.maxZIndex() + 1,
-      style: {
-        fill: isGraphicShape ? "#0078d4" : isDark ? "#2a2d33" : "#ffffff",
-        stroke: isGraphicShape ? "#495057" : isDark ? "#9ca3af" : "#374151",
-        strokeWidth: isGraphicShape ? 0 : 1.5,
-        borderRadius: this.shapeKind === "pill" ? 999 : this.shapeKind === "rectangle" ? 8 : 0,
-        fontSize: 14,
-        textColor: isGraphicShape ? "#ffffff" : isDark ? "#f2f2f2" : "#1f2933",
-      },
-      data: { text: "", shapeKind: this.shapeKind },
-    });
-    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 w = world.x - this.startWorld.x;
-    let h = world.y - this.startWorld.y;
-    if (e.shiftKey) {
-      const size = Math.max(Math.abs(w), Math.abs(h));
-      w = Math.sign(w || 1) * size;
-      h = Math.sign(h || 1) * size;
-    }
-    this.preview.x = Math.min(this.startWorld.x, this.startWorld.x + w);
-    this.preview.y = Math.min(this.startWorld.y, this.startWorld.y + h);
-    this.preview.width = Math.abs(w);
-    this.preview.height = Math.abs(h);
-    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 (el.width < 4 || el.height < 4) {
-      // tiny click: create a default-size shape
-      el.width = this.shapeKind === "chevron" ? 210 : 160;
-      el.height = this.shapeKind === "chevron" ? 76 : 100;
-      el.x -= el.width / 2;
-      el.y -= el.height / 2;
-    }
-
-    commands.execute(
-      "create-shape",
-      () => {
-        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");
-  }
-
-  onCancel(ctx: ToolContext): void {
-    this.drawing = false;
-    this.preview = null;
-    ctx.renderer.overlay.preview = null;
-    ctx.state.requestRender();
-  }
-}

package/src/tools/StickyTool.ts

@@ -1,69 +0,0 @@
-import type { Tool, ToolContext } from "./ToolContext";
-import { createElement } from "../elements/types";
-import { screenToWorld } from "../canvas/Viewport";
-
-export const STICKY_COLORS = [
-  "#fef08a",
-  "#fdba74",
-  "#fca5a5",
-  "#f9a8d4",
-  "#d8b4fe",
-  "#a5b4fc",
-  "#93c5fd",
-  "#86efac",
-];
-
-let lastStickyColor = STICKY_COLORS[0];
-
-export function getLastStickyColor(): string {
-  return lastStickyColor;
-}
-
-export function setLastStickyColor(color: string): void {
-  lastStickyColor = color;
-}
-
-export class StickyTool implements Tool {
-  name = "sticky" as const;
-  cursor = "crosshair";
-
-  onPointerDown(e: PointerEvent, ctx: ToolContext): void {
-    const { state, commands } = ctx;
-    const world = screenToWorld(e.clientX, e.clientY, state.viewport);
-    const el = createElement("sticky", {
-      x: world.x - 110,
-      y: world.y - 80,
-      width: 220,
-      height: 160,
-      zIndex: state.maxZIndex() + 1,
-      style: {
-        fill: getLastStickyColor(),
-        borderRadius: 12,
-        shadow: true,
-        fontSize: 15,
-        textColor: "#1f2933",
-      },
-      data: { text: "" },
-    });
-
-    commands.execute(
-      "create-sticky",
-      () => {
-        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");
-    ctx.openTextEditor(el);
-  }
-
-  onPointerMove(_e: PointerEvent, _ctx: ToolContext): void {}
-  onPointerUp(_e: PointerEvent, _ctx: ToolContext): void {}
-}

package/src/tools/TaskTool.ts

@@ -1,52 +0,0 @@
-import type { Tool, ToolContext } from "./ToolContext";
-import { createElement } from "../elements/types";
-import { screenToWorld } from "../canvas/Viewport";
-
-export class TaskTool implements Tool {
-  name = "task" as const;
-  cursor = "crosshair";
-
-  onPointerDown(e: PointerEvent, ctx: ToolContext): void {
-    const { state, commands } = ctx;
-    const world = screenToWorld(e.clientX, e.clientY, state.viewport);
-    const isDark = state.theme === "dark";
-    const el = createElement("task", {
-      x: world.x - 140,
-      y: world.y - 28,
-      width: 280,
-      height: 56,
-      zIndex: state.maxZIndex() + 1,
-      style: {
-        fill: isDark ? "#17191b" : "#ffffff",
-        stroke: isDark ? "rgba(255,255,255,0.12)" : "rgba(0,0,0,0.09)",
-        strokeWidth: 1,
-        borderRadius: 14,
-        shadow: true,
-        fontSize: 15,
-        fontWeight: "650",
-        textColor: isDark ? "#f6f6f3" : "#252829",
-      },
-      data: { text: "Task title", checked: false },
-    });
-
-    commands.execute(
-      "create-task",
-      () => {
-        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");
-    ctx.openTextEditor(el);
-  }
-
-  onPointerMove(_e: PointerEvent, _ctx: ToolContext): void {}
-  onPointerUp(_e: PointerEvent, _ctx: ToolContext): void {}
-}

package/src/tools/TextTool.ts

@@ -1,45 +0,0 @@
-import type { Tool, ToolContext } from "./ToolContext";
-import { createElement } from "../elements/types";
-import { screenToWorld } from "../canvas/Viewport";
-
-export class TextTool implements Tool {
-  name = "text" as const;
-  cursor = "text";
-
-  onPointerDown(e: PointerEvent, ctx: ToolContext): void {
-    const { state, commands } = ctx;
-    const world = screenToWorld(e.clientX, e.clientY, state.viewport);
-    const el = createElement("text", {
-      x: world.x,
-      y: world.y - 12,
-      width: 240,
-      height: 28,
-      zIndex: state.maxZIndex() + 1,
-      style: {
-        fontSize: 16,
-        textColor: state.theme === "dark" ? "#f2f2f2" : "#1f2933",
-      },
-      data: { text: "" },
-    });
-
-    commands.execute(
-      "create-text",
-      () => {
-        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");
-    ctx.openTextEditor(el);
-  }
-
-  onPointerMove(_e: PointerEvent, _ctx: ToolContext): void {}
-  onPointerUp(_e: PointerEvent, _ctx: ToolContext): void {}
-}

package/src/tools/ToolContext.ts

@@ -1,51 +0,0 @@
-import type { BoardState } from "../app/BoardState";
-import type { CommandManager } from "../app/CommandManager";
-import type { CanvasRenderer } from "../canvas/CanvasRenderer";
-import type { CanvasSurface } from "../canvas/CanvasSurface";
-import type { HitTester } from "../canvas/HitTester";
-import type { BoardElement } from "../elements/types";
-
-export type ToolName =
-  | "select"
-  | "hand"
-  | "sticky"
-  | "task"
-  | "rectangle"
-  | "ellipse"
-  | "diamond"
-  | "triangle"
-  | "pill"
-  | "chevron"
-  | "parallelogram"
-  | "hexagon"
-  | "cylinder"
-  | "text"
-  | "arrow"
-  | "dashedArrow"
-  | "twoWayArrow"
-  | "labeledArrow"
-  | "sidedLabelArrow"
-  | "image";
-
-export type ToolContext = {
-  state: BoardState;
-  renderer: CanvasRenderer;
-  surface: CanvasSurface;
-  hitTester: HitTester;
-  commands: CommandManager;
-  setTool: (tool: ToolName) => void;
-  setCursor: (cursor: string) => void;
-  openTextEditor: (el: BoardElement) => void;
-};
-
-export interface Tool {
-  name: ToolName;
-  cursor: string;
-  onPointerDown(e: PointerEvent, ctx: ToolContext): void;
-  onPointerMove(e: PointerEvent, ctx: ToolContext): void;
-  onPointerUp(e: PointerEvent, ctx: ToolContext): void;
-  onDoubleClick?(e: PointerEvent, ctx: ToolContext): void;
-  onCancel?(ctx: ToolContext): void;
-  onActivate?(ctx: ToolContext): void;
-  onDeactivate?(ctx: ToolContext): void;
-}