viteboard 0.1.0

package/src/elements/renderElement.ts

@@ -0,0 +1,509 @@
+import type { BoardElement } from "./types";
+import type { ImageCache } from "../canvas/ImageCache";
+
+export type RenderContext = {
+  ctx: CanvasRenderingContext2D;
+  scale: number;
+  /** level of detail: 2 = full, 1 = simplified (<25%), 0 = blocks (<10%) */
+  lod: 0 | 1 | 2;
+  theme: "light" | "dark";
+  imageCache: ImageCache;
+};
+
+const textMeasureCache = new Map<string, string[]>();
+const TEXT_CACHE_LIMIT = 2000;
+
+export function invalidateTextCache(elementId: string): void {
+  for (const key of textMeasureCache.keys()) {
+    if (key.startsWith(elementId + "|")) textMeasureCache.delete(key);
+  }
+}
+
+export function getRenderedTextFontSize(el: BoardElement): number {
+  if (el.data.shapeKind === "chevron") {
+    const byHeight = Math.abs(el.height) * 0.34;
+    const byWidth = Math.abs(el.width) * 0.18;
+    return Math.round(Math.max(13, Math.min(48, byHeight, byWidth)));
+  }
+  return el.style.fontSize ?? 14;
+}
+
+function wrapText(
+  ctx: CanvasRenderingContext2D,
+  cacheKey: string,
+  text: string,
+  maxWidth: number
+): string[] {
+  const cached = textMeasureCache.get(cacheKey);
+  if (cached) return cached;
+
+  const lines: string[] = [];
+  for (const paragraph of text.split("\n")) {
+    if (paragraph === "") {
+      lines.push("");
+      continue;
+    }
+    const words = paragraph.split(" ");
+    let line = "";
+    for (const word of words) {
+      const test = line === "" ? word : line + " " + word;
+      if (ctx.measureText(test).width > maxWidth && line !== "") {
+        lines.push(line);
+        line = word;
+      } else {
+        line = test;
+      }
+    }
+    lines.push(line);
+  }
+
+  if (textMeasureCache.size > TEXT_CACHE_LIMIT) textMeasureCache.clear();
+  textMeasureCache.set(cacheKey, lines);
+  return lines;
+}
+
+function roundRectPath(
+  ctx: CanvasRenderingContext2D,
+  x: number,
+  y: number,
+  w: number,
+  h: number,
+  r: number
+): void {
+  const radius = Math.min(r, w / 2, h / 2);
+  ctx.beginPath();
+  ctx.moveTo(x + radius, y);
+  ctx.arcTo(x + w, y, x + w, y + h, radius);
+  ctx.arcTo(x + w, y + h, x, y + h, radius);
+  ctx.arcTo(x, y + h, x, y, radius);
+  ctx.arcTo(x, y, x + w, y, radius);
+  ctx.closePath();
+}
+
+export function renderElement(el: BoardElement, rc: RenderContext): void {
+  const { ctx, lod } = rc;
+  ctx.save();
+  ctx.globalAlpha = el.style.opacity ?? 1;
+
+  if (lod === 0) {
+    renderAsBlock(el, rc);
+    ctx.restore();
+    return;
+  }
+
+  switch (el.type) {
+    case "sticky":
+      renderSticky(el, rc);
+      break;
+    case "task":
+      renderTask(el, rc);
+      break;
+    case "rectangle":
+    case "frame":
+      renderRectangle(el, rc);
+      break;
+    case "ellipse":
+      renderEllipse(el, rc);
+      break;
+    case "text":
+      renderText(el, rc);
+      break;
+    case "line":
+    case "arrow":
+    case "connector":
+      renderLineArrow(el, rc);
+      break;
+    case "image":
+    case "screenshot":
+      renderImage(el, rc);
+      break;
+    default:
+      renderRectangle(el, rc);
+  }
+  ctx.restore();
+}
+
+function renderAsBlock(el: BoardElement, rc: RenderContext): void {
+  const { ctx } = rc;
+  if (el.type === "line" || el.type === "arrow" || el.type === "connector") {
+    ctx.strokeStyle = el.style.stroke ?? (rc.theme === "dark" ? "#888" : "#999");
+    ctx.lineWidth = Math.max(1 / rc.scale, el.style.strokeWidth ?? 2);
+    ctx.beginPath();
+    ctx.moveTo(el.x, el.y);
+    ctx.lineTo(el.x + el.width, el.y + el.height);
+    ctx.stroke();
+    return;
+  }
+  ctx.fillStyle =
+    el.style.fill ?? (rc.theme === "dark" ? "#3a3d42" : "#d8d8d4");
+  ctx.fillRect(el.x, el.y, el.width, el.height);
+}
+
+function applyShadow(el: BoardElement, rc: RenderContext): void {
+  if (el.style.shadow && rc.lod === 2) {
+    rc.ctx.shadowColor =
+      rc.theme === "dark" ? "rgba(0,0,0,0.5)" : "rgba(0,0,0,0.14)";
+    rc.ctx.shadowBlur = 8 * rc.scale;
+    rc.ctx.shadowOffsetY = 2 * rc.scale;
+  }
+}
+
+function clearShadow(rc: RenderContext): void {
+  rc.ctx.shadowColor = "transparent";
+  rc.ctx.shadowBlur = 0;
+  rc.ctx.shadowOffsetY = 0;
+}
+
+function renderSticky(el: BoardElement, rc: RenderContext): void {
+  const { ctx, lod } = rc;
+  const fill = el.style.fill ?? "#fef08a";
+  applyShadow(el, rc);
+  roundRectPath(ctx, el.x, el.y, el.width, el.height, el.style.borderRadius ?? 12);
+  ctx.fillStyle = fill;
+  ctx.fill();
+  clearShadow(rc);
+
+  if (lod === 2) {
+    const text = (el.data.text as string) ?? "";
+    if (text) {
+      drawWrappedText(el, rc, text, 14);
+    }
+  }
+}
+
+function renderTask(el: BoardElement, rc: RenderContext): void {
+  const { ctx, lod } = rc;
+  const checked = el.data.checked === true;
+  const isDark = rc.theme === "dark";
+  const radius = el.style.borderRadius ?? 14;
+  applyShadow(el, rc);
+  roundRectPath(ctx, el.x, el.y, el.width, el.height, radius);
+  ctx.fillStyle = el.style.fill ?? (isDark ? "#17191b" : "#ffffff");
+  ctx.fill();
+  clearShadow(rc);
+
+  ctx.strokeStyle = el.style.stroke ?? (isDark ? "rgba(255,255,255,0.12)" : "rgba(0,0,0,0.09)");
+  ctx.lineWidth = el.style.strokeWidth ?? 1;
+  ctx.stroke();
+
+  if (lod < 2) return;
+
+  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;
+  roundRectPath(ctx, boxX, boxY, boxSize, boxSize, 6);
+  ctx.fillStyle = checked ? "#0078d4" : isDark ? "#111314" : "#f3f2f1";
+  ctx.fill();
+  ctx.strokeStyle = checked ? "#0078d4" : isDark ? "rgba(255,255,255,0.18)" : "rgba(0,0,0,0.13)";
+  ctx.lineWidth = 1.4;
+  ctx.stroke();
+
+  if (checked) {
+    ctx.strokeStyle = "#ffffff";
+    ctx.lineWidth = 2.1;
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+    ctx.beginPath();
+    ctx.moveTo(boxX + boxSize * 0.26, boxY + boxSize * 0.52);
+    ctx.lineTo(boxX + boxSize * 0.43, boxY + boxSize * 0.68);
+    ctx.lineTo(boxX + boxSize * 0.75, boxY + boxSize * 0.32);
+    ctx.stroke();
+  }
+
+  const text = (el.data.text as string) ?? "";
+  if (!text) return;
+  const leftPad = 50;
+  const rightPad = 16;
+  const fontSize = el.style.fontSize ?? 15;
+  const fontFamily =
+    el.style.fontFamily ??
+    '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif';
+  ctx.font = `${el.style.fontWeight ?? "650"} ${fontSize}px ${fontFamily}`;
+  ctx.fillStyle = checked ? (isDark ? "#a7aaa8" : "#777777") : el.style.textColor ?? (isDark ? "#f6f6f3" : "#252829");
+  ctx.textAlign = "left";
+  ctx.textBaseline = "middle";
+
+  ctx.save();
+  ctx.beginPath();
+  ctx.rect(el.x + leftPad, el.y, Math.max(10, el.width - leftPad - rightPad), el.height);
+  ctx.clip();
+  ctx.fillText(text, el.x + leftPad, el.y + el.height / 2);
+  if (checked) {
+    const metrics = ctx.measureText(text);
+    const lineY = el.y + el.height / 2 + 1;
+    ctx.strokeStyle = isDark ? "rgba(167,170,168,0.58)" : "rgba(119,119,119,0.48)";
+    ctx.lineWidth = 1.3;
+    ctx.beginPath();
+    ctx.moveTo(el.x + leftPad, lineY);
+    ctx.lineTo(el.x + leftPad + Math.min(metrics.width, el.width - leftPad - rightPad), lineY);
+    ctx.stroke();
+  }
+  ctx.restore();
+}
+
+function drawText(
+  ctx: CanvasRenderingContext2D,
+  value: string,
+  x: number,
+  y: number,
+  fontSize: number,
+  color: string,
+  fontWeight: string,
+  fontFamily = '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
+): void {
+  ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
+  ctx.fillStyle = color;
+  ctx.textAlign = "left";
+  ctx.textBaseline = "alphabetic";
+  ctx.fillText(value, x, y);
+}
+
+function renderRectangle(el: BoardElement, rc: RenderContext): void {
+  const { ctx, lod } = rc;
+  const shapeKind = (el.data.shapeKind as string | undefined) ?? "rectangle";
+  const r = el.style.borderRadius ?? 0;
+  applyShadow(el, rc);
+  if (shapeKind === "diamond") {
+    pathDiamond(ctx, el);
+  } else if (shapeKind === "triangle") {
+    pathTriangle(ctx, el);
+  } else if (shapeKind === "chevron") {
+    pathChevron(ctx, el);
+  } else if (shapeKind === "pill") {
+    roundRectPath(ctx, el.x, el.y, el.width, el.height, Math.min(Math.abs(el.height) / 2, Math.abs(el.width) / 2));
+  } else if (r > 0) {
+    roundRectPath(ctx, el.x, el.y, el.width, el.height, r);
+  } else {
+    ctx.beginPath();
+    ctx.rect(el.x, el.y, el.width, el.height);
+  }
+  if (el.style.fill && el.style.fill !== "transparent") {
+    ctx.fillStyle = el.style.fill;
+    ctx.fill();
+  }
+  clearShadow(rc);
+  if (el.style.stroke && (el.style.strokeWidth ?? 0) > 0) {
+    ctx.strokeStyle = el.style.stroke;
+    ctx.lineWidth = el.style.strokeWidth ?? 1;
+    ctx.stroke();
+  }
+  if (lod === 2) {
+    const text = (el.data.text as string) ?? "";
+    if (text) {
+      const textPadding =
+        shapeKind === "chevron" ? Math.min(Math.abs(el.width) * 0.18, Math.abs(el.height) * 0.55) + 8 : 10;
+      drawWrappedText(el, rc, text, textPadding);
+    }
+  }
+}
+
+function pathDiamond(ctx: CanvasRenderingContext2D, el: BoardElement): void {
+  const x = el.x;
+  const y = el.y;
+  const w = el.width;
+  const h = el.height;
+  ctx.beginPath();
+  ctx.moveTo(x + w / 2, y);
+  ctx.lineTo(x + w, y + h / 2);
+  ctx.lineTo(x + w / 2, y + h);
+  ctx.lineTo(x, y + h / 2);
+  ctx.closePath();
+}
+
+function pathTriangle(ctx: CanvasRenderingContext2D, el: BoardElement): void {
+  const x = el.x;
+  const y = el.y;
+  const w = el.width;
+  const h = el.height;
+  ctx.beginPath();
+  ctx.moveTo(x + w / 2, y);
+  ctx.lineTo(x + w, y + h);
+  ctx.lineTo(x, y + h);
+  ctx.closePath();
+}
+
+function pathChevron(ctx: CanvasRenderingContext2D, el: BoardElement): void {
+  const x = el.x;
+  const y = el.y;
+  const w = el.width;
+  const h = el.height;
+  const notch = Math.min(Math.abs(w) * 0.22, Math.abs(h) * 0.62);
+  ctx.beginPath();
+  ctx.moveTo(x, y);
+  ctx.lineTo(x + w - notch, y);
+  ctx.lineTo(x + w, y + h / 2);
+  ctx.lineTo(x + w - notch, y + h);
+  ctx.lineTo(x, y + h);
+  ctx.lineTo(x + notch, y + h / 2);
+  ctx.closePath();
+}
+
+function renderEllipse(el: BoardElement, rc: RenderContext): void {
+  const { ctx, lod } = rc;
+  applyShadow(el, rc);
+  ctx.beginPath();
+  ctx.ellipse(
+    el.x + el.width / 2,
+    el.y + el.height / 2,
+    Math.abs(el.width / 2),
+    Math.abs(el.height / 2),
+    0,
+    0,
+    Math.PI * 2
+  );
+  if (el.style.fill && el.style.fill !== "transparent") {
+    ctx.fillStyle = el.style.fill;
+    ctx.fill();
+  }
+  clearShadow(rc);
+  if (el.style.stroke && (el.style.strokeWidth ?? 0) > 0) {
+    ctx.strokeStyle = el.style.stroke;
+    ctx.lineWidth = el.style.strokeWidth ?? 1;
+    ctx.stroke();
+  }
+  if (lod === 2) {
+    const text = (el.data.text as string) ?? "";
+    if (text) drawWrappedText(el, rc, text, 10);
+  }
+}
+
+function renderText(el: BoardElement, rc: RenderContext): void {
+  if (rc.lod < 2) {
+    // tiny placeholder bar when far out
+    rc.ctx.fillStyle = rc.theme === "dark" ? "#55585e" : "#c5c5c0";
+    rc.ctx.fillRect(el.x, el.y, el.width, Math.min(el.height, 6 / rc.scale));
+    return;
+  }
+  const text = (el.data.text as string) ?? "";
+  drawWrappedText(el, rc, text, 0, "left", "top");
+}
+
+function drawWrappedText(
+  el: BoardElement,
+  rc: RenderContext,
+  text: string,
+  padding: number,
+  align: "center" | "left" = "center",
+  vAlign: "middle" | "top" = "middle"
+): void {
+  const { ctx } = rc;
+  const isChevron = el.data.shapeKind === "chevron";
+  const fontSize = getRenderedTextFontSize(el);
+  const fontFamily =
+    el.style.fontFamily ??
+    '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif';
+  const fontWeight = isChevron ? "750" : el.style.fontWeight ?? "400";
+  ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
+  ctx.fillStyle =
+    el.style.textColor ?? (rc.theme === "dark" && el.type === "text" ? "#f2f2f2" : "#1f2933");
+
+  const maxWidth = Math.max(10, el.width - padding * 2);
+  const cacheKey = `${el.id}|${el.updatedAt}|${fontSize}|${maxWidth.toFixed(0)}`;
+  const lines = wrapText(ctx, cacheKey, text, maxWidth);
+  const lineHeight = fontSize * 1.35;
+  const totalHeight = lines.length * lineHeight;
+
+  let startY: number;
+  if (vAlign === "middle") {
+    startY = el.y + el.height / 2 - totalHeight / 2 + lineHeight / 2;
+  } else {
+    startY = el.y + padding + lineHeight / 2;
+  }
+
+  ctx.textBaseline = "middle";
+  ctx.textAlign = align;
+  const tx = align === "center" ? el.x + el.width / 2 : el.x + padding;
+
+  // clip to element bounds
+  ctx.save();
+  ctx.beginPath();
+  ctx.rect(el.x, el.y, el.width, el.height);
+  ctx.clip();
+  for (let i = 0; i < lines.length; i++) {
+    ctx.fillText(lines[i], tx, startY + i * lineHeight);
+  }
+  ctx.restore();
+}
+
+function renderLineArrow(el: BoardElement, rc: RenderContext): void {
+  const { ctx, lod } = rc;
+  const x1 = el.x;
+  const y1 = el.y;
+  const x2 = el.x + el.width;
+  const y2 = el.y + el.height;
+  const stroke = el.style.stroke ?? (rc.theme === "dark" ? "#d1d5db" : "#374151");
+  const strokeWidth = el.style.strokeWidth ?? 2;
+
+  ctx.strokeStyle = stroke;
+  ctx.fillStyle = stroke;
+  ctx.lineWidth = strokeWidth;
+  ctx.beginPath();
+  ctx.moveTo(x1, y1);
+  ctx.lineTo(x2, y2);
+  ctx.stroke();
+
+  if (lod >= 1) {
+    const angle = Math.atan2(y2 - y1, x2 - x1);
+    const headLen = Math.max(11, strokeWidth * 5.5);
+    if (el.style.arrowEnd ?? el.type === "arrow") {
+      drawArrowhead(ctx, x2, y2, angle, headLen);
+    }
+    if (el.style.arrowStart) {
+      drawArrowhead(ctx, x1, y1, angle + Math.PI, headLen);
+    }
+  }
+}
+
+function drawArrowhead(
+  ctx: CanvasRenderingContext2D,
+  x: number,
+  y: number,
+  angle: number,
+  len: number
+): void {
+  ctx.beginPath();
+  ctx.moveTo(x, y);
+  ctx.lineTo(
+    x - len * Math.cos(angle - Math.PI / 6),
+    y - len * Math.sin(angle - Math.PI / 6)
+  );
+  ctx.lineTo(
+    x - len * Math.cos(angle + Math.PI / 6),
+    y - len * Math.sin(angle + Math.PI / 6)
+  );
+  ctx.closePath();
+  ctx.fill();
+}
+
+function renderImage(el: BoardElement, rc: RenderContext): void {
+  const { ctx, imageCache } = rc;
+  const src = el.data.src as string | undefined;
+  const assetId = el.data.assetId as string | undefined;
+  // File-backed boards reference images by `src` path; legacy boards by assetId.
+  const img = src ? imageCache.getBySrc(src) : assetId ? imageCache.get(assetId) : null;
+
+  if (img) {
+    if (rc.lod === 1 && rc.scale < 0.15) {
+      ctx.fillStyle = rc.theme === "dark" ? "#3a3d42" : "#d8d8d4";
+      ctx.fillRect(el.x, el.y, el.width, el.height);
+      return;
+    }
+    ctx.drawImage(img, el.x, el.y, el.width, el.height);
+  } else {
+    // placeholder / broken state
+    ctx.fillStyle = rc.theme === "dark" ? "#2a2d31" : "#ececea";
+    ctx.fillRect(el.x, el.y, el.width, el.height);
+    ctx.strokeStyle = rc.theme === "dark" ? "#4a4d52" : "#c9c9c5";
+    ctx.lineWidth = 1 / rc.scale;
+    ctx.strokeRect(el.x, el.y, el.width, el.height);
+    if (rc.lod === 2) {
+      const isMissing = src ? imageCache.isMissingSrc(src) : assetId ? imageCache.isMissing(assetId) : false;
+      const status = isMissing ? "Missing image" : "Loading…";
+      ctx.font = `12px -apple-system, sans-serif`;
+      ctx.fillStyle = rc.theme === "dark" ? "#9ca3af" : "#6b7280";
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      ctx.fillText(status, el.x + el.width / 2, el.y + el.height / 2);
+    }
+  }
+}

package/src/elements/types.ts

@@ -0,0 +1,118 @@
+export type ElementType =
+  | "sticky"
+  | "task"
+  | "rectangle"
+  | "ellipse"
+  | "text"
+  | "line"
+  | "arrow"
+  | "connector"
+  | "image"
+  | "screenshot"
+  | "frame"
+  | "templateGroup";
+
+export type ElementStyle = {
+  fill?: string;
+  stroke?: string;
+  strokeWidth?: number;
+  opacity?: number;
+  borderRadius?: number;
+  shadow?: boolean;
+  fontSize?: number;
+  fontFamily?: string;
+  fontWeight?: string;
+  textColor?: string;
+  arrowStart?: boolean;
+  arrowEnd?: boolean;
+};
+
+export type BoardElement = {
+  id: string;
+  type: ElementType;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  rotation: number;
+  zIndex: number;
+  locked: boolean;
+  hidden: boolean;
+  createdAt: number;
+  updatedAt: number;
+  style: ElementStyle;
+  data: Record<string, unknown>;
+};
+
+export type ImageElementData = {
+  assetId: string;
+  originalWidth: number;
+  originalHeight: number;
+  alt?: string;
+};
+
+export type LocalAsset = {
+  id: string;
+  type: "image";
+  mimeType: string;
+  blob: Blob;
+  width: number;
+  height: number;
+  sizeBytes: number;
+  createdAt: number;
+  updatedAt: number;
+  name?: string;
+};
+
+export type BoardDocument = {
+  version: 1;
+  id: string;
+  title: string;
+  createdAt: number;
+  updatedAt: number;
+  viewport: {
+    offsetX: number;
+    offsetY: number;
+    scale: number;
+  };
+  theme: "light" | "dark";
+  elements: BoardElement[];
+  assetIds: string[];
+};
+
+let idCounter = 0;
+
+export function generateId(): string {
+  idCounter = (idCounter + 1) % 0xffff;
+  return (
+    Date.now().toString(36) +
+    "-" +
+    idCounter.toString(36) +
+    "-" +
+    Math.random().toString(36).slice(2, 8)
+  );
+}
+
+export function createElement(
+  type: ElementType,
+  partial: Partial<BoardElement> = {}
+): BoardElement {
+  const now = Date.now();
+  return {
+    id: generateId(),
+    type,
+    x: 0,
+    y: 0,
+    width: 100,
+    height: 100,
+    rotation: 0,
+    zIndex: 0,
+    locked: false,
+    hidden: false,
+    createdAt: now,
+    updatedAt: now,
+    style: {},
+    data: {},
+    ...partial,
+  };
+}