@tldraw/mermaid 4.6.0-canary.00a8c03b5687

package/src/mindmapDiagram.ts

@@ -0,0 +1,169 @@
+import type { MindmapNode } from 'mermaid/dist/diagrams/mindmap/mindmapTypes.js'
+import type { TLDefaultColorStyle, TLDefaultSizeStyle, TLGeoShapeGeoStyle } from 'tldraw'
+import type {
+	DiagramMermaidBlueprint,
+	MermaidBlueprintEdge,
+	MermaidBlueprintGeoNode,
+} from './blueprint'
+import { parseRgbToTldrawColor } from './colors'
+import type { ParsedNode } from './svgParsing'
+import { parseNodesFromSvg, scaleLayout } from './svgParsing'
+import { LAYOUT_SCALE } from './utils'
+
+const MINDMAP_NODE_TYPE = {
+	DEFAULT: 0,
+	ROUNDED_RECT: 1,
+	RECT: 2,
+	CIRCLE: 3,
+	CLOUD: 4,
+	BANG: 5,
+	HEXAGON: 6,
+} as const
+
+function mapMindmapTypeToGeo(type: number): TLGeoShapeGeoStyle {
+	switch (type) {
+		case MINDMAP_NODE_TYPE.CIRCLE:
+			return 'ellipse'
+		case MINDMAP_NODE_TYPE.CLOUD:
+			return 'cloud'
+		case MINDMAP_NODE_TYPE.HEXAGON:
+			return 'hexagon'
+		case MINDMAP_NODE_TYPE.BANG:
+			return 'star'
+		case MINDMAP_NODE_TYPE.RECT:
+		case MINDMAP_NODE_TYPE.ROUNDED_RECT:
+		case MINDMAP_NODE_TYPE.DEFAULT:
+		default:
+			return 'rectangle'
+	}
+}
+
+function getEdgeSizeForLevel(parentLevel: number): TLDefaultSizeStyle {
+	if (parentLevel <= 0) return 'l'
+	if (parentLevel === 1) return 'm'
+	return 's'
+}
+
+interface FlatNode {
+	id: string
+	label: string
+	type: number
+	level: number
+	parentId: string | undefined
+	section: number | undefined
+	isRoot: boolean
+}
+
+function flattenMindmapTree(
+	node: MindmapNode,
+	parentId: string | undefined,
+	out: FlatNode[]
+): void {
+	out.push({
+		id: String(node.id),
+		label: node.descr,
+		type: node.type,
+		level: node.level,
+		parentId,
+		section: node.section,
+		isRoot: !!node.isRoot,
+	})
+	for (const child of node.children) {
+		flattenMindmapTree(child, String(node.id), out)
+	}
+}
+
+/**
+ * Pre-parsed SVG layout for mindmap diagram converters.
+ * Contains already-scaled node positions extracted from the SVG.
+ */
+export interface ParsedMindmapLayout {
+	nodes: Map<string, ParsedNode>
+}
+
+function parseMindmapNodeId(domId: string): string {
+	const match = domId.match(/^node_(\d+)$/)
+	return match ? match[1] : domId
+}
+
+/** Parse mindmap-specific SVG layout data for use by {@link mindmapToBlueprint}. */
+export function parseMindmapLayout(root: Element): ParsedMindmapLayout {
+	const nodes = parseNodesFromSvg(root, '.node', parseMindmapNodeId)
+	scaleLayout(nodes, new Map(), [], LAYOUT_SCALE)
+	return { nodes }
+}
+
+/** Convert a parsed Mermaid mindmap into a tldraw blueprint of nodes and edges. */
+export function mindmapToBlueprint(
+	layout: ParsedMindmapLayout,
+	mindmapTree: MindmapNode,
+	svgRoot: Element
+): DiagramMermaidBlueprint {
+	const flatNodes: FlatNode[] = []
+	flattenMindmapTree(mindmapTree, undefined, flatNodes)
+
+	const { nodes: svgNodes } = layout
+
+	const nodeColors = new Map<string, TLDefaultColorStyle>()
+	for (const el of svgRoot.querySelectorAll('.node')) {
+		const rawId = el.getAttribute('id') || ''
+		const id = parseMindmapNodeId(rawId)
+		const shape =
+			el.querySelector('rect, circle, ellipse, polygon, path') ??
+			el.querySelector('.label-container')
+		if (shape) {
+			const parsed = parseRgbToTldrawColor(getComputedStyle(shape as Element).fill)
+			if (parsed) nodeColors.set(id, parsed.color)
+		}
+	}
+
+	const nodes: MermaidBlueprintGeoNode[] = []
+	const edges: MermaidBlueprintEdge[] = []
+	const levelById = new Map(flatNodes.map((n) => [n.id, n.level]))
+
+	for (const flatNode of flatNodes) {
+		const svgNode = svgNodes.get(flatNode.id)
+		if (!svgNode) continue
+
+		const geo = mapMindmapTypeToGeo(flatNode.type)
+		const color = nodeColors.get(flatNode.id) ?? 'black'
+
+		let { width: w, height: h } = svgNode
+		if (flatNode.type === MINDMAP_NODE_TYPE.CIRCLE) {
+			w = h = Math.max(w, h)
+		}
+
+		nodes.push({
+			id: flatNode.id,
+			x: svgNode.center.x - w / 2,
+			y: svgNode.center.y - h / 2,
+			w,
+			h,
+			geo,
+			label: flatNode.label || undefined,
+			fill: 'solid',
+			color,
+			size: flatNode.isRoot ? 'l' : 'm',
+			align: 'middle',
+			verticalAlign: 'middle',
+		})
+
+		// Edge from parent to this node
+		if (flatNode.parentId) {
+			const parentLevel = levelById.get(flatNode.parentId) ?? 0
+			edges.push({
+				startNodeId: flatNode.parentId,
+				endNodeId: flatNode.id,
+				bend: 0,
+				arrowheadEnd: 'none',
+				arrowheadStart: 'none',
+				size: getEdgeSizeForLevel(parentLevel),
+				color,
+			})
+		}
+	}
+
+	const nodeIds = new Set(nodes.map((n) => n.id))
+	const validEdges = edges.filter((e) => nodeIds.has(e.startNodeId) && nodeIds.has(e.endNodeId))
+	return { nodes, edges: validEdges }
+}

package/src/renderBlueprint.ts

@@ -0,0 +1,373 @@
+import {
+	createShapeId,
+	Editor,
+	IndexKey,
+	TLGeoShape,
+	TLLineShape,
+	TLShapeId,
+	toRichText,
+	Vec,
+} from 'tldraw'
+import type {
+	DiagramMermaidBlueprint,
+	MermaidBlueprintEdge,
+	MermaidBlueprintGeoNode,
+	MermaidBlueprintLineNode,
+} from './blueprint'
+import { orderTopDown, sanitizeDiagramText } from './utils'
+
+/** @public */
+export interface BlueprintRenderingOptions {
+	centerOnPosition?: boolean
+	position?: { x: number; y: number }
+}
+
+const defaultBlueprintRenderingOptions = {
+	centerOnPosition: true,
+}
+
+/** @public */
+export function renderBlueprint(
+	editor: Editor,
+	blueprint: DiagramMermaidBlueprint,
+	opts?: BlueprintRenderingOptions
+) {
+	const options = { ...defaultBlueprintRenderingOptions, ...(opts || {}) }
+	const { nodes, edges, lines } = blueprint
+
+	const bounds = computeBlueprintBounds(nodes, lines)
+	const center = options.position
+		? options.position
+		: editor.user.getIsPasteAtCursorMode()
+			? editor.inputs.getCurrentPagePoint()
+			: editor.getViewportPageBounds().center
+	const offsetX = options.centerOnPosition
+		? center.x - (bounds.maxX + bounds.minX) / 2
+		: center.x - bounds.minX
+	const offsetY = options.centerOnPosition
+		? center.y - (bounds.maxY + bounds.minY) / 2
+		: center.y - bounds.minY
+
+	const ordered = orderTopDown(
+		nodes,
+		(n) => n.id,
+		(n) => n.parentId
+	)
+	const nodeById = new Map(nodes.map((node) => [node.id, node]))
+
+	const shapeIds = new Map<string, TLShapeId>()
+
+	// Lines first so nodes render on top (z-order = creation order in tldraw)
+	if (lines) {
+		for (const line of lines) {
+			const lineId = createShapeId()
+			shapeIds.set(line.id, lineId)
+			editor.createShape<TLLineShape>({
+				id: lineId,
+				type: 'line',
+				x: offsetX + line.x,
+				y: offsetY + line.y,
+				props: {
+					dash: line.dash ?? 'solid',
+					size: line.size ?? 's',
+					color: line.color ?? 'black',
+					spline: 'line',
+					points: {
+						a1: { id: 'a1', index: 'a1' as IndexKey, x: 0, y: 0 },
+						a2: { id: 'a2', index: 'a2' as IndexKey, x: line.endX ?? 0, y: line.endY },
+					},
+				},
+			})
+		}
+	}
+
+	for (const node of ordered) {
+		const shapeId = createShapeId()
+		shapeIds.set(node.id, shapeId)
+
+		const parent = node.parentId ? nodeById.get(node.parentId) : undefined
+		const parentShapeId = node.parentId ? shapeIds.get(node.parentId) : undefined
+
+		const absoluteX = offsetX + node.x
+		const absoluteY = offsetY + node.y
+		const x = parent ? absoluteX - (offsetX + parent.x) : absoluteX
+		const y = parent ? absoluteY - (offsetY + parent.y) : absoluteY
+
+		editor.createShape<TLGeoShape>({
+			id: shapeId,
+			type: 'geo',
+			x,
+			y,
+			parentId: parentShapeId,
+			props: {
+				geo: node.geo,
+				w: node.w,
+				h: node.h,
+				fill: node.fill ?? 'none',
+				color: node.color ?? 'black',
+				dash: node.dash ?? 'draw',
+				size: node.size ?? 'm',
+				...(node.label && { richText: toRichText(sanitizeDiagramText(node.label)) }),
+				...(node.align && { align: node.align }),
+				...(node.verticalAlign && { verticalAlign: node.verticalAlign }),
+			},
+		})
+	}
+
+	const arrowIds: TLShapeId[] = []
+	for (const edge of edges) {
+		const arrowId = createArrowFromEdge(editor, edge, shapeIds)
+		if (arrowId) arrowIds.push(arrowId)
+	}
+
+	// Create sub-groups and track which shape IDs are consumed by a group
+	const groupedIds = new Set<TLShapeId>()
+	const subGroupIds: TLShapeId[] = []
+	if (blueprint.groups) {
+		for (const group of blueprint.groups) {
+			const members: TLShapeId[] = []
+			for (const blueprintId of group) {
+				const memberShapeId = shapeIds.get(blueprintId)
+				if (memberShapeId) {
+					members.push(memberShapeId)
+					groupedIds.add(memberShapeId)
+				}
+			}
+			if (members.length > 1) {
+				editor.groupShapes(members)
+				const first = editor.getShape(members[0])
+				if (first && first.parentId !== editor.getCurrentPageId()) {
+					subGroupIds.push(first.parentId as TLShapeId)
+				} else {
+					subGroupIds.push(members[0])
+				}
+			} else if (members.length === 1) {
+				subGroupIds.push(members[0])
+			}
+		}
+	}
+
+	// Collect ungrouped top-level IDs
+	const topLevelIds: TLShapeId[] = [...subGroupIds]
+	for (const node of nodes) {
+		if (!node.parentId) {
+			const nodeShapeId = shapeIds.get(node.id)
+			if (nodeShapeId && !groupedIds.has(nodeShapeId)) topLevelIds.push(nodeShapeId)
+		}
+	}
+	if (lines) {
+		for (const line of lines) {
+			const lineShapeId = shapeIds.get(line.id)
+			if (lineShapeId && !groupedIds.has(lineShapeId)) topLevelIds.push(lineShapeId)
+		}
+	}
+	topLevelIds.push(...arrowIds)
+
+	let rootShapeId: TLShapeId | undefined
+	if (topLevelIds.length > 1) {
+		editor.groupShapes(topLevelIds)
+		const first = editor.getShape(topLevelIds[0])
+		if (first && first.parentId !== editor.getCurrentPageId()) {
+			rootShapeId = first.parentId as TLShapeId
+		}
+	} else if (topLevelIds.length === 1) {
+		rootShapeId = topLevelIds[0]
+	}
+
+	if (rootShapeId) {
+		const actualBounds = editor.getShapePageBounds(rootShapeId)
+		if (actualBounds) {
+			const desiredX = options.centerOnPosition ? center.x - actualBounds.w / 2 : center.x
+			const desiredY = options.centerOnPosition ? center.y - actualBounds.h / 2 : center.y
+			const dx = desiredX - actualBounds.x
+			const dy = desiredY - actualBounds.y
+			if (Math.abs(dx) > 0.5 || Math.abs(dy) > 0.5) {
+				const shape = editor.getShape(rootShapeId)!
+				editor.updateShape({
+					id: rootShapeId,
+					type: shape.type,
+					x: shape.x + dx,
+					y: shape.y + dy,
+				})
+			}
+		}
+	}
+}
+
+function makeArrowBinding(
+	arrowId: TLShapeId,
+	targetId: TLShapeId,
+	terminal: 'start' | 'end',
+	anchor: { x: number; y: number },
+	isExact: boolean,
+	isPrecise: boolean
+) {
+	return {
+		fromId: arrowId,
+		toId: targetId,
+		type: 'arrow' as const,
+		props: { terminal, normalizedAnchor: anchor, isExact, isPrecise },
+	}
+}
+
+function createArrowFromEdge(
+	editor: Editor,
+	edge: MermaidBlueprintEdge,
+	shapeIds: Map<string, TLShapeId>
+): TLShapeId | undefined {
+	const startShapeId = shapeIds.get(edge.startNodeId)
+	const endShapeId = shapeIds.get(edge.endNodeId)
+	if (!startShapeId || !endShapeId) return undefined
+
+	const startBounds = editor.getShapePageBounds(startShapeId)
+	const endBounds = editor.getShapePageBounds(endShapeId)
+	if (!startBounds || !endBounds) return undefined
+
+	const arrowId = createShapeId()
+	const isSelfLoop = startShapeId === endShapeId
+	const hasPreciseAnchors = edge.anchorStartY !== undefined || edge.anchorEndY !== undefined
+
+	let labelText = edge.label
+	if (edge.decoration?.type === 'autonumber') {
+		const num = edge.decoration.value
+		labelText = labelText ? `${num}  ${labelText}` : num
+	}
+
+	const baseProps = {
+		dash: edge.dash ?? ('solid' as const),
+		size: edge.size ?? ('s' as const),
+		arrowheadEnd: edge.arrowheadEnd ?? ('arrow' as const),
+		...(edge.arrowheadStart && { arrowheadStart: edge.arrowheadStart }),
+		color: edge.color ?? ('black' as const),
+		...(labelText && { richText: toRichText(sanitizeDiagramText(labelText)) }),
+	}
+
+	if (hasPreciseAnchors) {
+		const startAnchorY = edge.anchorStartY ?? 0.5
+		const endAnchorY = edge.anchorEndY ?? 0.5
+		const exactStart = edge.isExact ?? true
+		const preciseStart = edge.isPrecise ?? true
+		const exactEnd = edge.isExactEnd ?? exactStart
+		const preciseEnd = edge.isPreciseEnd ?? preciseStart
+
+		const startPoint = {
+			x: startBounds.x + startBounds.w * 0.5,
+			y: startBounds.y + startBounds.h * startAnchorY,
+		}
+		const endPoint = {
+			x: endBounds.x + endBounds.w * 0.5,
+			y: endBounds.y + endBounds.h * endAnchorY,
+		}
+		const origin = {
+			x: Math.min(startPoint.x, endPoint.x),
+			y: Math.min(startPoint.y, endPoint.y),
+		}
+
+		editor.run(() => {
+			editor.createShape({
+				id: arrowId,
+				type: 'arrow',
+				x: origin.x,
+				y: origin.y,
+				props: {
+					...baseProps,
+					start: { x: startPoint.x - origin.x, y: startPoint.y - origin.y },
+					end: { x: endPoint.x - origin.x, y: endPoint.y - origin.y },
+					bend: edge.bend,
+				},
+			})
+			editor.createBindings([
+				makeArrowBinding(
+					arrowId,
+					startShapeId,
+					'start',
+					{ x: 0.5, y: startAnchorY },
+					exactStart,
+					preciseStart
+				),
+				makeArrowBinding(
+					arrowId,
+					endShapeId,
+					'end',
+					{ x: 0.5, y: endAnchorY },
+					exactEnd,
+					preciseEnd
+				),
+			])
+		})
+		return arrowId
+	}
+
+	if (isSelfLoop) {
+		editor.run(() => {
+			editor.createShape({
+				id: arrowId,
+				type: 'arrow',
+				x: startBounds.x,
+				y: startBounds.y,
+				props: {
+					...baseProps,
+					start: { x: startBounds.w / 2, y: 0 },
+					end: { x: startBounds.w, y: startBounds.h / 2 },
+					bend: -80,
+				},
+			})
+			editor.createBindings([
+				makeArrowBinding(arrowId, startShapeId, 'start', { x: 0.9, y: 0.5 }, false, false),
+				makeArrowBinding(arrowId, endShapeId, 'end', { x: 0.85, y: 0.8 }, false, false),
+			])
+		})
+		return arrowId
+	}
+
+	const startCenter = startBounds.center
+	const endCenter = endBounds.center
+	const arrowOrigin = Vec.Min(startCenter, endCenter)
+
+	editor.run(() => {
+		editor.createShape({
+			id: arrowId,
+			type: 'arrow',
+			x: arrowOrigin.x,
+			y: arrowOrigin.y,
+			props: {
+				...baseProps,
+				start: { x: startCenter.x - arrowOrigin.x, y: startCenter.y - arrowOrigin.y },
+				end: { x: endCenter.x - arrowOrigin.x, y: endCenter.y - arrowOrigin.y },
+				bend: edge.bend,
+			},
+		})
+		editor.createBindings([
+			makeArrowBinding(arrowId, startShapeId, 'start', { x: 0.5, y: 0.5 }, false, false),
+			makeArrowBinding(arrowId, endShapeId, 'end', { x: 0.5, y: 0.5 }, false, false),
+		])
+	})
+
+	return arrowId
+}
+
+function computeBlueprintBounds(
+	nodes: MermaidBlueprintGeoNode[],
+	lines?: MermaidBlueprintLineNode[]
+): { minX: number; minY: number; maxX: number; maxY: number } {
+	let minX = Infinity,
+		minY = Infinity,
+		maxX = -Infinity,
+		maxY = -Infinity
+	for (const node of nodes) {
+		if (node.parentId) continue
+		minX = Math.min(minX, node.x)
+		minY = Math.min(minY, node.y)
+		maxX = Math.max(maxX, node.x + node.w)
+		maxY = Math.max(maxY, node.y + node.h)
+	}
+	if (lines) {
+		for (const line of lines) {
+			minX = Math.min(minX, line.x)
+			minY = Math.min(minY, line.y)
+			maxX = Math.max(maxX, line.x)
+			maxY = Math.max(maxY, line.y + line.endY)
+		}
+	}
+	return { minX, minY, maxX, maxY }
+}