@ankorar/nodex 0.0.1

package/src/state/mindMapHistory.ts

@@ -0,0 +1,96 @@
+import { create } from "zustand";
+
+import type { MindMapNode, MindMapPos } from "./mindMap";
+
+export type MindMapSnapshot = {
+  nodes: MindMapNode[];
+  selectedNodeId: string | null;
+  editingNodeId: string | null;
+  offset: MindMapPos;
+  scale: number;
+};
+
+type MindMapHistoryState = {
+  past: MindMapSnapshot[];
+  future: MindMapSnapshot[];
+  resetVersion: number;
+  pushSnapshot: (snapshot: MindMapSnapshot) => void;
+  undo: (
+    current: MindMapSnapshot,
+    apply: (snapshot: MindMapSnapshot) => void
+  ) => void;
+  redo: (
+    current: MindMapSnapshot,
+    apply: (snapshot: MindMapSnapshot) => void
+  ) => void;
+  clear: () => void;
+};
+
+const HISTORY_LIMIT = 100;
+
+const cloneNodes = (nodes: MindMapNode[]): MindMapNode[] =>
+  nodes.map((node) => ({
+    ...node,
+    pos: { ...node.pos },
+    style: { ...node.style, padding: { ...node.style.padding } },
+    childrens: cloneNodes(node.childrens),
+  }));
+
+export const createMindMapSnapshot = (
+  source: MindMapSnapshot
+): MindMapSnapshot => ({
+  nodes: cloneNodes(source.nodes),
+  selectedNodeId: source.selectedNodeId,
+  editingNodeId: source.editingNodeId,
+  offset: { ...source.offset },
+  scale: source.scale,
+});
+
+const cloneSnapshot = (snapshot: MindMapSnapshot): MindMapSnapshot =>
+  createMindMapSnapshot(snapshot);
+
+export const useMindMapHistory = create<MindMapHistoryState>((set, get) => ({
+  past: [],
+  future: [],
+  resetVersion: 0,
+  pushSnapshot: (snapshot) => {
+    set((state) => ({
+      past: [...state.past, snapshot].slice(-HISTORY_LIMIT),
+      future: [],
+    }));
+  },
+  undo: (current, apply) => {
+    const { past, future } = get();
+    if (past.length === 0) {
+      return;
+    }
+    const snapshot = past[past.length - 1];
+    apply(cloneSnapshot(snapshot));
+    set({
+      past: past.slice(0, -1),
+      future: [current, ...future],
+    });
+  },
+  redo: (current, apply) => {
+    const { past, future } = get();
+    if (future.length === 0) {
+      return;
+    }
+    const snapshot = future[0];
+    apply(cloneSnapshot(snapshot));
+    set({
+      past: [...past, current].slice(-HISTORY_LIMIT),
+      future: future.slice(1),
+    });
+  },
+  clear: () =>
+    set((state) => ({
+      past: [],
+      future: [],
+      resetVersion: state.resetVersion + 1,
+    })),
+}));
+
+export function clearMindMapHistory() {
+  useMindMapHistory.getState().clear();
+}

package/src/styles.input.css

@@ -0,0 +1,95 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@source "./**/*.{ts,tsx}";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.145 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.145 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --border: oklch(0.269 0 0);
+  --input: oklch(0.269 0 0);
+  --ring: oklch(0.439 0 0);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+}
+
+@layer utilities {
+  .scrollbar {
+    scrollbar-width: thin;
+    scrollbar-color: rgb(148 163 184) transparent;
+  }
+  .scrollbar::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+  .scrollbar::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  .scrollbar::-webkit-scrollbar-thumb {
+    background-color: rgb(148 163 184);
+    border-radius: 9999px;
+    border: 2px solid transparent;
+    background-clip: padding-box;
+  }
+  .scrollbar::-webkit-scrollbar-thumb:hover {
+    background-color: rgb(100 116 139);
+  }
+}

package/src/utils/exportMindMapAsHighQualityImage.ts

@@ -0,0 +1,327 @@
+import type { MindMapNode } from "../state/mindMap";
+import {
+  getNodesBounds,
+  getNodeWrapper,
+  getSegmentLines,
+  type SegmentLine,
+} from "../components/mindMap/Segments";
+
+const DEFAULT_FONT_FAMILY = '"Geist", "Inter", system-ui, sans-serif';
+const SEGMENT_STROKE_WIDTH = 6;
+const LINE_HEIGHT_FACTOR = 1.15;
+
+/** Pixel scale factor for export (2–4). Higher = larger image and sharper text when zooming. */
+export const HIGH_QUALITY_EXPORT_SCALE = 3;
+
+/** Padding around the map content in the exported image (in logical pixels). */
+const EXPORT_PADDING = 48;
+
+/**
+ * Browser canvas size limits (~16k per side / ~268M pixels in Chrome). We cap dimensions
+ * so large maps still export: we reduce scale automatically when needed.
+ */
+const MAX_CANVAS_DIMENSION = 16384;
+
+/** Collects all visible nodes from the tree (depth-first). */
+function getFlatVisibleNodes(nodes: MindMapNode[]): MindMapNode[] {
+  const out: MindMapNode[] = [];
+  function walk(list: MindMapNode[]) {
+    for (const node of list) {
+      if (!node.isVisible) continue;
+      out.push(node);
+      walk(node.childrens);
+    }
+  }
+  walk(nodes);
+  return out;
+}
+
+function getNodeFontWeight(node: MindMapNode): number {
+  if (!node.style.isBold) return 400;
+  return node.type === "central" ? 700 : 600;
+}
+
+/**
+ * Splits node text into lines that fit within maxWidth using canvas measureText.
+ */
+function getTextLines(
+  ctx: CanvasRenderingContext2D,
+  text: string,
+  maxWidth: number,
+  fontSize: number,
+  fontWeight: number,
+  isItalic: boolean,
+): string[] {
+  if (!text.trim()) return [""];
+  const font = `${isItalic ? "italic" : "normal"} ${fontWeight} ${fontSize}px ${DEFAULT_FONT_FAMILY}`;
+  ctx.font = font;
+  const lines: string[] = [];
+  const paragraphs = text.split("\n");
+  for (const para of paragraphs) {
+    const words = para.split(/\s+/).filter(Boolean);
+    if (words.length === 0) {
+      lines.push("");
+      continue;
+    }
+    let current = words[0];
+    for (let i = 1; i < words.length; i++) {
+      const next = `${current} ${words[i]}`;
+      const m = ctx.measureText(next);
+      const w = m.actualBoundingBoxRight !== undefined
+        ? m.actualBoundingBoxLeft + m.actualBoundingBoxRight
+        : m.width;
+      if (w <= maxWidth) {
+        current = next;
+      } else {
+        lines.push(current);
+        current = words[i];
+      }
+    }
+    if (current) lines.push(current);
+  }
+  return lines.length ? lines : [""];
+}
+
+function drawSegment(
+  ctx: CanvasRenderingContext2D,
+  seg: SegmentLine,
+): void {
+  ctx.beginPath();
+  ctx.moveTo(seg.start.x, seg.start.y);
+  ctx.bezierCurveTo(
+    seg.controlStart.x,
+    seg.controlStart.y,
+    seg.controlEnd.x,
+    seg.controlEnd.y,
+    seg.end.x,
+    seg.end.y,
+  );
+  ctx.strokeStyle = seg.color;
+  ctx.lineWidth = SEGMENT_STROKE_WIDTH;
+  ctx.lineCap = "round";
+  ctx.stroke();
+}
+
+function drawNode(
+  ctx: CanvasRenderingContext2D,
+  node: MindMapNode,
+): void {
+  const w = getNodeWrapper(node);
+  const x = w.left;
+  const y = w.top;
+  const innerX = x + node.style.wrapperPadding;
+  const innerY = y + node.style.wrapperPadding;
+  const innerW = node.style.w;
+  const innerH = node.style.h;
+  const radius = node.type === "central" ? Math.min(innerW, innerH) / 2 : 12;
+
+  if (node.type === "central") {
+    const cx = innerX + innerW / 2;
+    const cy = innerY + innerH / 2;
+    const r = Math.min(innerW, innerH) / 2;
+    ctx.fillStyle = "transparent";
+    ctx.strokeStyle = node.style.color || "#94a3b8";
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.arc(cx, cy, r, 0, Math.PI * 2);
+    ctx.stroke();
+  } else {
+    ctx.fillStyle = node.style.backgroundColor || "transparent";
+    ctx.strokeStyle = node.style.color || "#94a3b8";
+    ctx.lineWidth = 1;
+    roundRect(ctx, innerX, innerY, innerW, innerH, radius);
+    ctx.fill();
+    ctx.stroke();
+  }
+
+  const fontWeight = getNodeFontWeight(node);
+  const fontSize = node.style.fontSize;
+  const isItalic = node.style.isItalic;
+  const textColor = node.style.textColor || "#0f172a";
+  const align = node.style.textAlign;
+  const paddingX = node.style.padding.x;
+  const paddingY = node.style.padding.y;
+  const textAreaW = innerW - paddingX * 2;
+  const textAreaH = innerH - paddingY * 2;
+
+  if (node.type === "image") {
+    const label = node.text.trim()
+      ? (node.text.length > 40 ? node.text.slice(0, 37) + "…" : node.text)
+      : "[imagem]";
+    ctx.fillStyle = "#64748b";
+    ctx.font = `${fontSize}px ${DEFAULT_FONT_FAMILY}`;
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+    ctx.fillText(
+      label,
+      innerX + innerW / 2,
+      innerY + innerH / 2,
+    );
+    return;
+  }
+
+  const lines = getTextLines(
+    ctx,
+    node.text,
+    textAreaW,
+    fontSize,
+    fontWeight,
+    isItalic,
+  );
+  const lineHeight = Math.ceil(fontSize * LINE_HEIGHT_FACTOR);
+  ctx.font = `${isItalic ? "italic" : "normal"} ${fontWeight} ${fontSize}px ${DEFAULT_FONT_FAMILY}`;
+  ctx.fillStyle = textColor;
+  ctx.textBaseline = "top";
+
+  const totalTextHeight = lines.length * lineHeight;
+  let startY = innerY + paddingY;
+  if (lines.length > 1 && totalTextHeight < textAreaH) {
+    const blockOffset = (textAreaH - totalTextHeight) / 2;
+    if (align === "center") startY += blockOffset;
+  }
+
+  for (let i = 0; i < lines.length; i++) {
+    const lineY = startY + i * lineHeight;
+    let textX: number;
+    if (align === "center") {
+      textX = innerX + innerW / 2;
+      ctx.textAlign = "center";
+    } else if (align === "right") {
+      textX = innerX + innerW - paddingX;
+      ctx.textAlign = "right";
+    } else {
+      textX = innerX + paddingX;
+      ctx.textAlign = "left";
+    }
+    ctx.fillText(lines[i], textX, lineY, textAreaW);
+  }
+}
+
+function roundRect(
+  ctx: CanvasRenderingContext2D,
+  x: number,
+  y: number,
+  w: number,
+  h: number,
+  r: number,
+): void {
+  if (r <= 0) {
+    ctx.rect(x, y, w, h);
+    return;
+  }
+  ctx.beginPath();
+  ctx.moveTo(x + r, y);
+  ctx.lineTo(x + w - r, y);
+  ctx.quadraticCurveTo(x + w, y, x + w, y + r);
+  ctx.lineTo(x + w, y + h - r);
+  ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
+  ctx.lineTo(x + r, y + h);
+  ctx.quadraticCurveTo(x, y + h, x, y + h - r);
+  ctx.lineTo(x, y + r);
+  ctx.quadraticCurveTo(x, y, x + r, y);
+  ctx.closePath();
+}
+
+export type ExportImageOptions = {
+  /** Scale factor (default: HIGH_QUALITY_EXPORT_SCALE). Higher = larger file, sharper when zooming. */
+  scale?: number;
+  /** Optional filename for download (without extension). */
+  filename?: string;
+  /** Background color of the exported image (e.g. "white", "#1e293b"). Defaults to "#f8fafc". */
+  exportBackgroundColor?: string;
+};
+
+export type CreateMindMapCanvasOptions = {
+  scale?: number;
+  /** Background color of the exported canvas. Defaults to "#f8fafc". */
+  exportBackgroundColor?: string;
+};
+
+/**
+ * Renders the mind map to a canvas and returns it (for PNG export or PDF). Returns null if no visible nodes or canvas unavailable.
+ */
+export function createMindMapExportCanvas(
+  nodes: MindMapNode[],
+  options: CreateMindMapCanvasOptions = {},
+): HTMLCanvasElement | null {
+  const scale = Math.min(4, Math.max(1, options.scale ?? HIGH_QUALITY_EXPORT_SCALE));
+  const flat = getFlatVisibleNodes(nodes);
+  if (flat.length === 0) return null;
+
+  const bounds = getNodesBounds(nodes);
+  if (!bounds) return null;
+
+  const padding = EXPORT_PADDING;
+  const contentW = bounds.maxX - bounds.minX + padding * 2;
+  const contentH = bounds.maxY - bounds.minY + padding * 2;
+
+  const maxScaleByW = contentW > 0 ? MAX_CANVAS_DIMENSION / contentW : scale;
+  const maxScaleByH = contentH > 0 ? MAX_CANVAS_DIMENSION / contentH : scale;
+  const effectiveScale = Math.min(scale, maxScaleByW, maxScaleByH);
+  const canvasW = Math.min(
+    MAX_CANVAS_DIMENSION,
+    Math.ceil(contentW * effectiveScale),
+  );
+  const canvasH = Math.min(
+    MAX_CANVAS_DIMENSION,
+    Math.ceil(contentH * effectiveScale),
+  );
+
+  const canvas = document.createElement("canvas");
+  canvas.width = canvasW;
+  canvas.height = canvasH;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return null;
+
+  const backgroundColor = options.exportBackgroundColor ?? "#f8fafc";
+  ctx.fillStyle = backgroundColor;
+  ctx.fillRect(0, 0, canvasW, canvasH);
+
+  ctx.save();
+  ctx.scale(effectiveScale, effectiveScale);
+  ctx.translate(-bounds.minX + padding, -bounds.minY + padding);
+
+  const segmentLines = getSegmentLines(nodes);
+  for (const seg of segmentLines) drawSegment(ctx, seg);
+  for (const node of flat) drawNode(ctx, node);
+
+  ctx.restore();
+  return canvas;
+}
+
+/**
+ * Renders the current mind map to a high-resolution PNG and triggers a download.
+ * Uses a scale factor so that zooming into the image keeps text readable even on very large maps.
+ * Must be called in a browser environment with the mind map already mounted.
+ */
+export function exportMindMapAsHighQualityImage(
+  nodes: MindMapNode[],
+  options: ExportImageOptions = {},
+): Promise<void> {
+  const filename = options.filename ?? `mind-map-${Date.now()}`;
+  const canvas = createMindMapExportCanvas(nodes, {
+    scale: options.scale,
+    exportBackgroundColor: options.exportBackgroundColor,
+  });
+  if (!canvas) return Promise.resolve();
+
+  return new Promise((resolve, reject) => {
+    canvas.toBlob(
+      (blob) => {
+        if (!blob) {
+          reject(new Error("Failed to create image blob"));
+          return;
+        }
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = `${filename}.png`;
+        a.click();
+        URL.revokeObjectURL(url);
+        resolve();
+      },
+      "image/png",
+      1,
+    );
+  });
+}

package/src/utils/exportMindMapAsMarkdown.ts

@@ -0,0 +1,102 @@
+import type { MindMapNode } from "../state/mindMap";
+
+/**
+ * Escapes markdown special characters in a line so it can be used inside list items.
+ */
+function escapeMarkdownLine(text: string): string {
+  return text
+    .replace(/\\/g, "\\\\")
+    .replace(/^#+\s/g, (m) => "\\".repeat(m.length) + m)
+    .replace(/^\s*[-*+]\s/g, "\\- ")
+    .replace(/^\d+\.\s/g, (m) => m.replace(".", "\\."))
+    .replace(/\[/g, "\\[")
+    .replace(/\]/g, "\\]")
+    .replace(/^>/g, "\\>")
+    .replace(/^\s*\d+\./gm, (m) => m.replace(".", "\\."));
+}
+
+function nodeToMarkdownLine(node: MindMapNode): string {
+  const trimmed = node.text.trim();
+  if (node.type === "image") {
+    if (!trimmed) return "[imagem]";
+    try {
+      new URL(trimmed);
+      return `[imagem](${trimmed})`;
+    } catch {
+      return trimmed || "[imagem]";
+    }
+  }
+  return escapeMarkdownLine(trimmed || "(vazio)");
+}
+
+const MAX_HEADING_LEVEL = 6;
+
+function walkToMarkdown(nodes: MindMapNode[], depth: number): string[] {
+  const lines: string[] = [];
+  const visible = nodes.filter((n) => n.isVisible);
+  const sorted = [...visible].sort((a, b) => a.sequence - b.sequence);
+  const headingLevel = Math.min(depth + 1, MAX_HEADING_LEVEL);
+  const prefix = "#".repeat(headingLevel);
+
+  for (const node of sorted) {
+    const content = nodeToMarkdownLine(node);
+    lines.push(`${prefix} ${content}`);
+    lines.push("");
+    if (node.childrens.length > 0) {
+      lines.push(...walkToMarkdown(node.childrens, depth + 1));
+    }
+  }
+  return lines;
+}
+
+/**
+ * Converts the mind map tree to formatted Markdown.
+ * Hierarchy is expressed with heading levels: # (central), ## (first level), ### (second), etc.
+ * So the outline is clear in any Markdown viewer.
+ */
+export function mindMapToMarkdown(nodes: MindMapNode[]): string {
+  if (nodes.length === 0) return "";
+
+  const roots = nodes.filter((n) => n.isVisible);
+  if (roots.length === 0) return "";
+
+  const lines: string[] = [];
+  const sortedRoots = [...roots].sort((a, b) => a.sequence - b.sequence);
+
+  for (const root of sortedRoots) {
+    const title = root.text.trim() || "Mapa mental";
+    const escapedTitle = title.replace(/^#+\s*/, "").replace(/\n/g, " ");
+    lines.push(`# ${escapedTitle}`);
+    lines.push("");
+    if (root.childrens.length > 0) {
+      lines.push(...walkToMarkdown(root.childrens, 1));
+    }
+  }
+
+  return lines.join("\n").trimEnd();
+}
+
+export type ExportMarkdownOptions = {
+  /** Filename for download (without extension). */
+  filename?: string;
+};
+
+/**
+ * Builds markdown from the given nodes and triggers download of a .md file.
+ */
+export function exportMindMapAsMarkdown(
+  nodes: MindMapNode[],
+  options: ExportMarkdownOptions = {},
+): void {
+  const md = mindMapToMarkdown(nodes);
+  if (!md) return;
+
+  const filename = options.filename ?? `mind-map-${Date.now()}`;
+  const blob = new Blob([md], { type: "text/markdown;charset=utf-8" });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = `${filename}.md`;
+  a.click();
+  URL.revokeObjectURL(url);
+}