pi-tldraw 0.1.0

package/mcp-app/src/widget/focused/format.ts

@@ -0,0 +1,366 @@
+/**
+ * Focused shape format types and conversion utilities.
+ * Ported from tldraw/tldraw templates/agent/shared/format/
+ */
+import { TLDefaultFillStyle, TLDefaultSizeStyle, TLGeoShapeGeoStyle, TLShapeId } from 'tldraw'
+
+// ---- Colors ----
+
+export const FOCUSED_COLORS = [
+	'red',
+	'light-red',
+	'green',
+	'light-green',
+	'blue',
+	'light-blue',
+	'orange',
+	'yellow',
+	'black',
+	'violet',
+	'light-violet',
+	'grey',
+	'white',
+] as const
+
+type FocusedColor = (typeof FOCUSED_COLORS)[number]
+
+export function asColor(color: string): FocusedColor {
+	if (FOCUSED_COLORS.includes(color as FocusedColor)) {
+		return color as FocusedColor
+	}
+	switch (color) {
+		case 'pink':
+		case 'light-pink':
+			return 'light-violet'
+	}
+	return 'black'
+}
+
+// ---- Fill ----
+
+type FocusedFill = 'none' | 'tint' | 'background' | 'solid' | 'pattern'
+
+const FOCUSED_TO_SHAPE_FILLS: Record<FocusedFill, TLDefaultFillStyle> = {
+	none: 'none',
+	solid: 'lined-fill',
+	background: 'semi',
+	tint: 'solid',
+	pattern: 'pattern',
+}
+
+const SHAPE_TO_FOCUSED_FILLS: Record<TLDefaultFillStyle, FocusedFill> = {
+	none: 'none',
+	fill: 'solid',
+	'lined-fill': 'solid',
+	semi: 'background',
+	solid: 'tint',
+	pattern: 'pattern',
+}
+
+export function convertFocusedFillToTldrawFill(fill: FocusedFill): TLDefaultFillStyle {
+	return FOCUSED_TO_SHAPE_FILLS[fill]
+}
+
+export function convertTldrawFillToFocusedFill(fill: TLDefaultFillStyle): FocusedFill {
+	return SHAPE_TO_FOCUSED_FILLS[fill]
+}
+
+// ---- Font Size ----
+
+const FONT_SIZE_MULTIPLIERS: Record<TLDefaultSizeStyle, number> = {
+	s: 1.125,
+	m: 1.5,
+	l: 2.25,
+	xl: 2.75,
+}
+
+const DEFAULT_BASE_FONT_SIZE = 16
+
+export function convertFocusedFontSizeToTldrawFontSizeAndScale(
+	targetFontSize: number,
+	baseFontSize = DEFAULT_BASE_FONT_SIZE
+) {
+	const fontSizeEntries = Object.entries(FONT_SIZE_MULTIPLIERS)
+	let closestSize = fontSizeEntries[0]
+	let closestPixelSize = closestSize[1] * baseFontSize
+	let minDifference = Math.abs(targetFontSize - closestPixelSize)
+
+	for (const [size, multiplier] of fontSizeEntries) {
+		const pixelSize = multiplier * baseFontSize
+		const difference = Math.abs(targetFontSize - pixelSize)
+		if (difference < minDifference) {
+			minDifference = difference
+			closestSize = [size, multiplier]
+			closestPixelSize = pixelSize
+		}
+	}
+
+	const textSize = closestSize[0] as TLDefaultSizeStyle
+	const scale = targetFontSize / closestPixelSize
+
+	return { textSize, scale }
+}
+
+export function convertTldrawFontSizeAndScaleToFocusedFontSize(
+	textSize: TLDefaultSizeStyle,
+	scale: number,
+	baseFontSize = DEFAULT_BASE_FONT_SIZE
+) {
+	return Math.round(FONT_SIZE_MULTIPLIERS[textSize] * baseFontSize * scale)
+}
+
+// ---- Geo Shape Types ----
+
+export type FocusedGeoShapeType =
+	| 'rectangle'
+	| 'ellipse'
+	| 'triangle'
+	| 'diamond'
+	| 'hexagon'
+	| 'pill'
+	| 'cloud'
+	| 'x-box'
+	| 'check-box'
+	| 'heart'
+	| 'pentagon'
+	| 'octagon'
+	| 'star'
+	| 'parallelogram-right'
+	| 'parallelogram-left'
+	| 'trapezoid'
+	| 'fat-arrow-right'
+	| 'fat-arrow-left'
+	| 'fat-arrow-up'
+	| 'fat-arrow-down'
+
+export const FOCUSED_TO_GEO_TYPES: Record<FocusedGeoShapeType, TLGeoShapeGeoStyle> = {
+	rectangle: 'rectangle',
+	ellipse: 'ellipse',
+	triangle: 'triangle',
+	diamond: 'diamond',
+	hexagon: 'hexagon',
+	pill: 'oval',
+	cloud: 'cloud',
+	'x-box': 'x-box',
+	'check-box': 'check-box',
+	heart: 'heart',
+	pentagon: 'pentagon',
+	octagon: 'octagon',
+	star: 'star',
+	'parallelogram-right': 'rhombus',
+	'parallelogram-left': 'rhombus-2',
+	trapezoid: 'trapezoid',
+	'fat-arrow-right': 'arrow-right',
+	'fat-arrow-left': 'arrow-left',
+	'fat-arrow-up': 'arrow-up',
+	'fat-arrow-down': 'arrow-down',
+} as const
+
+export const GEO_TO_FOCUSED_TYPES: Record<TLGeoShapeGeoStyle, FocusedGeoShapeType> = {
+	rectangle: 'rectangle',
+	ellipse: 'ellipse',
+	triangle: 'triangle',
+	diamond: 'diamond',
+	hexagon: 'hexagon',
+	oval: 'pill',
+	cloud: 'cloud',
+	'x-box': 'x-box',
+	'check-box': 'check-box',
+	heart: 'heart',
+	pentagon: 'pentagon',
+	octagon: 'octagon',
+	star: 'star',
+	rhombus: 'parallelogram-right',
+	'rhombus-2': 'parallelogram-left',
+	trapezoid: 'trapezoid',
+	'arrow-right': 'fat-arrow-right',
+	'arrow-left': 'fat-arrow-left',
+	'arrow-up': 'fat-arrow-up',
+	'arrow-down': 'fat-arrow-down',
+} as const
+
+// ---- ID Conversion ----
+
+export function convertSimpleIdToTldrawId(id: string): TLShapeId {
+	if (id.startsWith('shape:')) return id as TLShapeId
+	return ('shape:' + id) as TLShapeId
+}
+
+export function convertTldrawIdToSimpleId(id: TLShapeId): string {
+	return id.slice(6)
+}
+
+// ---- Text Anchor ----
+
+export type FocusedTextAnchor =
+	| 'bottom-center'
+	| 'bottom-left'
+	| 'bottom-right'
+	| 'center-left'
+	| 'center-right'
+	| 'center'
+	| 'top-center'
+	| 'top-left'
+	| 'top-right'
+
+// ---- Focused Shape Types ----
+
+/**
+ * Geometric shapes like rectangles, ellipses, triangles, and other predefined forms.
+ * The _type field determines the geometric form.
+ */
+export interface FocusedGeoShape {
+	/** Geometric shape type */
+	_type: FocusedGeoShapeType
+	/** Shape color */
+	color: FocusedColor
+	/** Fill style */
+	fill: FocusedFill
+	/** Height in pixels */
+	h: number
+	/** Metadata note */
+	note: string
+	/** Unique shape identifier */
+	shapeId: string
+	/** Text label inside the shape */
+	text?: string
+	/** Text alignment */
+	textAlign?: 'start' | 'middle' | 'end'
+	/** Width in pixels */
+	w: number
+	/** X position */
+	x: number
+	/** Y position */
+	y: number
+}
+
+/** A straight line between two points. */
+export interface FocusedLineShape {
+	/** Always 'line' */
+	_type: 'line'
+	/** Line color */
+	color: FocusedColor
+	/** Metadata note */
+	note: string
+	/** Unique shape identifier */
+	shapeId: string
+	/** Start X */
+	x1: number
+	/** End X */
+	x2: number
+	/** Start Y */
+	y1: number
+	/** End Y */
+	y2: number
+}
+
+/** A sticky note. */
+export interface FocusedNoteShape {
+	/** Always 'note' */
+	_type: 'note'
+	/** Note color */
+	color: FocusedColor
+	/** Metadata note */
+	note: string
+	/** Unique shape identifier */
+	shapeId: string
+	/** Note text content */
+	text?: string
+	/** X position */
+	x: number
+	/** Y position */
+	y: number
+}
+
+/** A text shape for placing text on the canvas. */
+export interface FocusedTextShape {
+	/** Always 'text' */
+	_type: 'text'
+	/** Where the (x,y) point anchors on the text bounding box */
+	anchor: FocusedTextAnchor
+	/** Text color */
+	color: FocusedColor
+	/** Font size in pixels */
+	fontSize?: number
+	/** Max width before wrapping (null = auto-size) */
+	maxWidth: number | null
+	/** Metadata note */
+	note: string
+	/** Unique shape identifier */
+	shapeId: string
+	/** Text content */
+	text: string
+	/** X position */
+	x: number
+	/** Y position */
+	y: number
+}
+
+/** An arrow connecting two points or shapes. Use fromId/toId to bind to shapes. */
+export interface FocusedArrowShape {
+	/** Always 'arrow' */
+	_type: 'arrow'
+	/** Arrow color */
+	color: FocusedColor
+	/** Shape ID to bind the arrow start to */
+	fromId: string | null
+	/** Metadata note */
+	note: string
+	/** Unique shape identifier */
+	shapeId: string
+	/** Arrow label text */
+	text?: string
+	/** Shape ID to bind the arrow end to */
+	toId: string | null
+	/** Start X */
+	x1: number
+	/** End X */
+	x2: number
+	/** Start Y */
+	y1: number
+	/** End Y */
+	y2: number
+	/** Signed bend amount for the curve */
+	bend?: number
+	/** Arrow routing style */
+	kind?: 'arc' | 'elbow'
+}
+
+/** A freehand drawing. */
+export interface FocusedDrawShape {
+	/** Always 'draw' */
+	_type: 'draw'
+	/** Stroke color */
+	color: FocusedColor
+	/** Fill style */
+	fill?: FocusedFill
+	/** Metadata note */
+	note: string
+	/** Unique shape identifier */
+	shapeId: string
+}
+
+/** Fallback for unsupported shape types. */
+export interface FocusedUnknownShape {
+	/** Always 'unknown' */
+	_type: 'unknown'
+	/** Metadata note */
+	note: string
+	/** Unique shape identifier */
+	shapeId: string
+	/** Original tldraw shape type */
+	subType: string
+	/** X position */
+	x: number
+	/** Y position */
+	y: number
+}
+
+export type FocusedShape =
+	| FocusedGeoShape
+	| FocusedLineShape
+	| FocusedNoteShape
+	| FocusedTextShape
+	| FocusedArrowShape
+	| FocusedDrawShape
+	| FocusedUnknownShape

package/mcp-app/src/widget/focused/to-focused.ts

@@ -0,0 +1,258 @@
+/**
+ * Convert tldraw TLShape → FocusedShape.
+ * Ported from tldraw/tldraw templates/agent/shared/format/convertTldrawShapeToFocusedShape.ts
+ */
+import {
+	Box,
+	createShapeId,
+	Editor,
+	isPageId,
+	reverseRecordsDiff,
+	TLArrowBinding,
+	TLArrowShape,
+	TLDrawShape,
+	TLGeoShape,
+	TLLineShape,
+	TLNoteShape,
+	TLShape,
+	TLTextShape,
+	Vec,
+} from 'tldraw'
+import {
+	convertTldrawFillToFocusedFill,
+	convertTldrawFontSizeAndScaleToFocusedFontSize,
+	convertTldrawIdToSimpleId,
+	GEO_TO_FOCUSED_TYPES,
+	type FocusedArrowShape,
+	type FocusedDrawShape,
+	type FocusedGeoShape,
+	type FocusedLineShape,
+	type FocusedNoteShape,
+	type FocusedShape,
+	type FocusedTextAnchor,
+	type FocusedTextShape,
+	type FocusedUnknownShape,
+} from './format'
+
+export function convertTldrawShapeToFocusedShape(editor: Editor, shape: TLShape): FocusedShape {
+	switch (shape.type) {
+		case 'text':
+			return convertTextShapeToFocused(editor, shape as TLTextShape)
+		case 'geo':
+			return convertGeoShapeToFocused(editor, shape as TLGeoShape)
+		case 'line':
+			return convertLineShapeToFocused(editor, shape as TLLineShape)
+		case 'arrow':
+			return convertArrowShapeToFocused(editor, shape as TLArrowShape)
+		case 'note':
+			return convertNoteShapeToFocused(editor, shape as TLNoteShape)
+		case 'draw':
+			return convertDrawShapeToFocused(editor, shape as TLDrawShape)
+		default:
+			return convertUnknownShapeToFocused(editor, shape)
+	}
+}
+
+function convertDrawShapeToFocused(_editor: Editor, shape: TLDrawShape): FocusedDrawShape {
+	return {
+		_type: 'draw',
+		color: shape.props.color,
+		fill: convertTldrawFillToFocusedFill(shape.props.fill),
+		note: (shape.meta.note as string) ?? '',
+		shapeId: convertTldrawIdToSimpleId(shape.id),
+	}
+}
+
+function convertTextShapeToFocused(editor: Editor, shape: TLTextShape): FocusedTextShape {
+	const util = editor.getShapeUtil(shape)
+	const text = util.getText(shape) ?? ''
+	const bounds = getSimpleBounds(editor, shape)
+	const textSize = shape.props.size
+	const baseFontSize = editor.getTheme('default')?.fontSize ?? 16
+
+	const position = new Vec()
+	let anchor: FocusedTextAnchor = 'top-left'
+	switch (shape.props.textAlign) {
+		case 'middle': {
+			anchor = 'top-center'
+			position.x = bounds.center.x
+			position.y = bounds.top
+			break
+		}
+		case 'end': {
+			anchor = 'top-right'
+			position.x = bounds.right
+			position.y = bounds.top
+			break
+		}
+		case 'start': {
+			anchor = 'top-left'
+			position.x = bounds.left
+			position.y = bounds.top
+			break
+		}
+	}
+
+	return {
+		_type: 'text',
+		anchor,
+		color: shape.props.color,
+		fontSize: convertTldrawFontSizeAndScaleToFocusedFontSize(
+			textSize,
+			shape.props.scale,
+			baseFontSize
+		),
+		maxWidth: shape.props.autoSize ? null : shape.props.w,
+		note: (shape.meta.note as string) ?? '',
+		shapeId: convertTldrawIdToSimpleId(shape.id),
+		text,
+		x: position.x,
+		y: position.y,
+	}
+}
+
+function convertGeoShapeToFocused(editor: Editor, shape: TLGeoShape): FocusedGeoShape {
+	const util = editor.getShapeUtil(shape)
+	const text = util.getText(shape)
+	const bounds = getSimpleBounds(editor, shape)
+	const shapeTextAlign = shape.props.align
+
+	let newTextAlign: FocusedGeoShape['textAlign']
+	switch (shapeTextAlign) {
+		case 'start-legacy':
+			newTextAlign = 'start'
+			break
+		case 'middle-legacy':
+			newTextAlign = 'middle'
+			break
+		case 'end-legacy':
+			newTextAlign = 'end'
+			break
+		default:
+			newTextAlign = shapeTextAlign
+			break
+	}
+
+	return {
+		_type: GEO_TO_FOCUSED_TYPES[shape.props.geo],
+		color: shape.props.color,
+		fill: convertTldrawFillToFocusedFill(shape.props.fill),
+		h: shape.props.h,
+		note: (shape.meta.note as string) ?? '',
+		shapeId: convertTldrawIdToSimpleId(shape.id),
+		text: text ?? '',
+		textAlign: newTextAlign,
+		w: shape.props.w,
+		x: bounds.x,
+		y: bounds.y,
+	}
+}
+
+function convertLineShapeToFocused(editor: Editor, shape: TLLineShape): FocusedLineShape {
+	const bounds = getSimpleBounds(editor, shape)
+	const points = Object.values(shape.props.points).sort((a, b) => a.index.localeCompare(b.index))
+	return {
+		_type: 'line',
+		color: shape.props.color,
+		note: (shape.meta.note as string) ?? '',
+		shapeId: convertTldrawIdToSimpleId(shape.id),
+		x1: points[0].x + bounds.x,
+		x2: points[1].x + bounds.x,
+		y1: points[0].y + bounds.y,
+		y2: points[1].y + bounds.y,
+	}
+}
+
+function convertArrowShapeToFocused(editor: Editor, shape: TLArrowShape): FocusedArrowShape {
+	const bounds = getSimpleBounds(editor, shape)
+	const bindings = editor.store.query.records('binding').get()
+	const arrowBindings = bindings.filter(
+		(b) => b.type === 'arrow' && b.fromId === shape.id
+	) as TLArrowBinding[]
+	const startBinding = arrowBindings.find((b) => b.props.terminal === 'start')
+	const endBinding = arrowBindings.find((b) => b.props.terminal === 'end')
+
+	return {
+		_type: 'arrow',
+		bend: shape.props.bend * -1,
+		kind: shape.props.kind,
+		color: shape.props.color,
+		fromId: startBinding ? convertTldrawIdToSimpleId(startBinding.toId) : null,
+		note: (shape.meta.note as string) ?? '',
+		shapeId: convertTldrawIdToSimpleId(shape.id),
+		text: editor.getShapeUtil(shape).getText(shape) ?? '',
+		toId: endBinding ? convertTldrawIdToSimpleId(endBinding.toId) : null,
+		x1: shape.props.start.x + bounds.x,
+		x2: shape.props.end.x + bounds.x,
+		y1: shape.props.start.y + bounds.y,
+		y2: shape.props.end.y + bounds.y,
+	}
+}
+
+function convertNoteShapeToFocused(editor: Editor, shape: TLNoteShape): FocusedNoteShape {
+	const util = editor.getShapeUtil(shape)
+	const text = util.getText(shape)
+	const bounds = getSimpleBounds(editor, shape)
+	return {
+		_type: 'note',
+		color: shape.props.color,
+		note: (shape.meta.note as string) ?? '',
+		shapeId: convertTldrawIdToSimpleId(shape.id),
+		text: text ?? '',
+		x: bounds.x,
+		y: bounds.y,
+	}
+}
+
+function convertUnknownShapeToFocused(editor: Editor, shape: TLShape): FocusedUnknownShape {
+	const bounds = getSimpleBounds(editor, shape)
+	return {
+		_type: 'unknown',
+		note: (shape.meta.note as string) ?? '',
+		shapeId: convertTldrawIdToSimpleId(shape.id),
+		subType: shape.type,
+		x: bounds.x,
+		y: bounds.y,
+	}
+}
+
+function getSimpleBounds(editor: Editor, shape: TLShape): Box {
+	const pagePoint = getShapePagePoint(editor, shape)
+
+	const props = shape.props as { w?: number; h?: number }
+	if (props.w !== undefined && props.h !== undefined) {
+		return new Box(pagePoint.x, pagePoint.y, props.w, props.h)
+	}
+
+	const bounds = editor.getShapePageBounds(shape)
+	if (bounds) {
+		return new Box(pagePoint.x, pagePoint.y, bounds.w, bounds.h)
+	}
+
+	let mockBounds: Box | undefined
+	const diff = editor.store.extractingChanges(() => {
+		editor.run(
+			() => {
+				const mockId = createShapeId()
+				editor.createShape({ ...shape, id: mockId })
+				mockBounds = editor.getShapePageBounds(mockId)
+			},
+			{ ignoreShapeLock: false, history: 'ignore' }
+		)
+	})
+	const reverseDiff = reverseRecordsDiff(diff)
+	editor.store.applyDiff(reverseDiff)
+
+	if (!mockBounds) {
+		throw new Error('Failed to get bounds for shape')
+	}
+	return new Box(pagePoint.x, pagePoint.y, mockBounds.w, mockBounds.h)
+}
+
+function getShapePagePoint(editor: Editor, shape: TLShape): Vec {
+	if (isPageId(shape.parentId)) {
+		return new Vec(shape.x, shape.y)
+	}
+	const parentTransform = editor.getShapePageTransform(shape.parentId)
+	return parentTransform.applyToPoint(new Vec(shape.x, shape.y))
+}