pmx-canvas 0.1.9 → 0.1.11

package/src/server/diagram-presets.ts

@@ -115,6 +115,84 @@ function elementHasCameraUpdate(elements: Array<Record<string, unknown>>): boole
   return elements.some((element) => element.type === 'cameraUpdate');
 }
 
+function hasRenderableExcalidrawElement(elements: Array<Record<string, unknown>>): boolean {
+  return elements.some((element) => {
+    if (element.isDeleted === true) return false;
+    if (element.type === 'cameraUpdate' || element.type === 'restoreCheckpoint' || element.type === 'delete') return false;
+    if (typeof element.type !== 'string' || element.type.length === 0) return false;
+    if (element.type === 'text') {
+      return typeof element.text === 'string' && element.text.trim().length > 0;
+    }
+    return finiteNumber(element.x) !== null && finiteNumber(element.y) !== null;
+  });
+}
+
+function normalizeExcalidrawBoundText(elements: Array<Record<string, unknown>>): Array<Record<string, unknown>> {
+  const elementsById = new Map<string, Record<string, unknown>>();
+  for (const element of elements) {
+    if (typeof element.id === 'string') elementsById.set(element.id, element);
+  }
+
+  let changed = false;
+  const boundElementIdsByContainer = new Map<string, Set<string>>();
+  const labelByContainer = new Map<string, Record<string, unknown>>();
+  const textIdsConvertedToLabels = new Set<string>();
+
+  for (const element of elements) {
+    if (element.type !== 'text' || typeof element.id !== 'string' || typeof element.containerId !== 'string') continue;
+    const container = elementsById.get(element.containerId);
+    if (!container) continue;
+    const ids = boundElementIdsByContainer.get(element.containerId) ?? new Set<string>();
+    ids.add(element.id);
+    boundElementIdsByContainer.set(element.containerId, ids);
+    const text = typeof element.text === 'string' ? element.text.trim() : '';
+    if (!isRecord(container.label) && text.length > 0) {
+      labelByContainer.set(element.containerId, {
+        text,
+        ...(typeof element.fontSize === 'number' && Number.isFinite(element.fontSize) ? { fontSize: element.fontSize } : {}),
+      });
+      textIdsConvertedToLabels.add(element.id);
+    }
+  }
+
+  const normalized = elements.flatMap<Record<string, unknown>>((element) => {
+    if (typeof element.id === 'string' && textIdsConvertedToLabels.has(element.id)) {
+      changed = true;
+      return [];
+    }
+    if (typeof element.id !== 'string') return element;
+    const boundTextIds = boundElementIdsByContainer.get(element.id);
+    const label = labelByContainer.get(element.id);
+    if ((!boundTextIds || boundTextIds.size === 0) && !label) return element;
+
+    const existing = Array.isArray(element.boundElements)
+      ? element.boundElements.filter(isRecord)
+      : [];
+    const remainingExisting = existing.filter((boundElement) => {
+      return !(boundElement.type === 'text' && typeof boundElement.id === 'string' && textIdsConvertedToLabels.has(boundElement.id));
+    });
+    const existingTextIds = new Set(
+      remainingExisting
+        .filter((boundElement) => boundElement.type === 'text' && typeof boundElement.id === 'string')
+        .map((boundElement) => boundElement.id as string),
+    );
+    const missing = [...(boundTextIds ?? [])]
+      .filter((id) => !textIdsConvertedToLabels.has(id) && !existingTextIds.has(id));
+    if (missing.length === 0 && !label && remainingExisting.length === existing.length) return element;
+
+    changed = true;
+    return {
+      ...element,
+      ...(label ? { label } : {}),
+      ...(remainingExisting.length > 0 || missing.length > 0
+        ? { boundElements: [...remainingExisting, ...missing.map((id) => ({ type: 'text', id }))] }
+        : {}),
+    };
+  });
+
+  return changed ? normalized : elements;
+}
+
 function resolveExcalidrawCameraSize(width: number, height: number): { width: number; height: number } {
   const requiredWidth = Math.max(EXCALIDRAW_MIN_CAMERA_WIDTH, width);
   const requiredHeight = Math.max(EXCALIDRAW_MIN_CAMERA_HEIGHT, height);
@@ -205,19 +283,19 @@ function withInferredCameraUpdate(
 
 export function normalizeExcalidrawElements(elements: unknown): string {
   const parsed = parseExcalidrawElements(elements);
-  return JSON.stringify(parsed.length > 0 ? parsed : DEFAULT_EXCALIDRAW_ELEMENTS);
+  return JSON.stringify(hasRenderableExcalidrawElement(parsed) ? parsed : DEFAULT_EXCALIDRAW_ELEMENTS);
 }
 
 export function normalizeExcalidrawElementsForToolInput(elements: unknown): string {
   const parsed = parseExcalidrawElements(elements);
-  const seeded = parsed.length > 0 ? parsed : [...DEFAULT_EXCALIDRAW_ELEMENTS];
-  return JSON.stringify(withInferredCameraUpdate(seeded));
+  const seeded = hasRenderableExcalidrawElement(parsed) ? parsed : [...DEFAULT_EXCALIDRAW_ELEMENTS];
+  return JSON.stringify(withInferredCameraUpdate(normalizeExcalidrawBoundText(seeded)));
 }
 
 export function normalizeExcalidrawCheckpointDataForToolInput(data: unknown): string | null {
   const elements = parseExcalidrawCheckpointElements(data);
 
-  return elements ? JSON.stringify(withInferredCameraUpdate(elements)) : null;
+  return elements ? JSON.stringify(withInferredCameraUpdate(normalizeExcalidrawBoundText(elements))) : null;
 }
 
 export function buildExcalidrawRestoreCheckpointToolInput(checkpointId: string, data?: unknown): string {

package/src/server/index.ts

@@ -162,6 +162,7 @@ export class PmxCanvas extends EventEmitter {
     y?: number;
     width?: number;
     height?: number;
+    strictSize?: boolean;
   }): string {
     if (input.type === 'webpage') {
       throw new Error('Use addWebpageNode for webpage nodes so page content is fetched and cached on the server.');
@@ -171,6 +172,7 @@ export class PmxCanvas extends EventEmitter {
       defaultWidth: 360,
       defaultHeight: 200,
       fileMode: 'path',
+      ...(input.strictSize ? { strictSize: true } : {}),
     });
 
     emitPrimaryWorkbenchEvent('canvas-layout-update', { layout: canvasState.getLayout() });
@@ -191,6 +193,7 @@ export class PmxCanvas extends EventEmitter {
     y?: number;
     width?: number;
     height?: number;
+    strictSize?: boolean;
   }): Promise<{ ok: boolean; id: string; error?: string; fetch: { ok: boolean; error?: string } }> {
     const { id } = addCanvasNode({
       type: 'webpage',
@@ -200,6 +203,7 @@ export class PmxCanvas extends EventEmitter {
       ...(typeof input.y === 'number' ? { y: input.y } : {}),
       ...(typeof input.width === 'number' ? { width: input.width } : {}),
       ...(typeof input.height === 'number' ? { height: input.height } : {}),
+      ...(input.strictSize ? { strictSize: true } : {}),
       defaultWidth: 520,
       defaultHeight: 420,
     });
@@ -238,7 +242,8 @@ export class PmxCanvas extends EventEmitter {
       patch.data !== undefined ||
       patch.title !== undefined ||
       patch.content !== undefined ||
-      typeof patch.arrangeLocked === 'boolean'
+      typeof patch.arrangeLocked === 'boolean' ||
+      typeof patch.strictSize === 'boolean'
     ) {
       resolvedPatch.data = {
         ...existing.data,
@@ -246,6 +251,7 @@ export class PmxCanvas extends EventEmitter {
         ...(typeof patch.title === 'string' ? { title: patch.title } : {}),
         ...(typeof patch.content === 'string' ? { content: patch.content } : {}),
         ...(typeof patch.arrangeLocked === 'boolean' ? { arrangeLocked: patch.arrangeLocked } : {}),
+        ...(typeof patch.strictSize === 'boolean' ? { strictSize: patch.strictSize } : {}),
       };
     }
 

package/src/server/server.ts

@@ -828,6 +828,24 @@ function findOnlyPendingCanvasExtAppNodeId(serverName: string, toolName: string)
   return matchId;
 }
 
+function extAppEventGeometryPatch(
+  node: CanvasNodeState,
+  payload: PrimaryWorkbenchEventPayload,
+): Partial<Pick<CanvasNodeState, 'position' | 'size'>> {
+  const x = typeof payload.x === 'number' ? payload.x : undefined;
+  const y = typeof payload.y === 'number' ? payload.y : undefined;
+  const width = typeof payload.width === 'number' ? payload.width : undefined;
+  const height = typeof payload.height === 'number' ? payload.height : undefined;
+  return {
+    ...(x !== undefined || y !== undefined
+      ? { position: { x: x ?? node.position.x, y: y ?? node.position.y } }
+      : {}),
+    ...(width !== undefined || height !== undefined
+      ? { size: { width: width ?? node.size.width, height: height ?? node.size.height } }
+      : {}),
+  };
+}
+
 function toSseFrame(event: string, payload: PrimaryWorkbenchEventPayload): Uint8Array {
   const id = nextWorkbenchEventId++;
   const lines = [`id: ${id}`, `event: ${event}`, `data: ${JSON.stringify(payload)}`, ''];
@@ -1250,6 +1268,7 @@ async function createCanvasWebpageNode(body: Record<string, unknown>): Promise<R
     ...(typeof body.title === 'string' ? { title: body.title } : {}),
     content: normalizedUrl,
     ...(extraData ? { data: extraData } : {}),
+    ...(body.strictSize === true ? { strictSize: true } : {}),
     ...geometry,
     ...(geometry.width === undefined ? { width: WEBPAGE_NODE_DEFAULT_SIZE.width } : {}),
     ...(geometry.height === undefined ? { height: WEBPAGE_NODE_DEFAULT_SIZE.height } : {}),
@@ -1312,6 +1331,7 @@ async function handleCanvasAddNode(req: Request): Promise<Response> {
       ...(typeof body.title === 'string' ? { title: body.title } : {}),
       ...(typeof content === 'string' ? { content } : {}),
       ...(extraData ? { data: extraData } : {}),
+      ...(body.strictSize === true ? { strictSize: true } : {}),
       ...geometry,
       defaultWidth: 360,
       defaultHeight: 200,
@@ -1475,7 +1495,7 @@ async function handleCanvasUpdateNode(nodeId: string, req: Request): Promise<Res
     } catch (error) {
       return responseJson({ ok: false, error: error instanceof Error ? error.message : String(error) }, 400);
     }
-  } else if (body.title !== undefined || body.content !== undefined || body.data || typeof body.arrangeLocked === 'boolean') {
+  } else if (body.title !== undefined || body.content !== undefined || body.data || typeof body.arrangeLocked === 'boolean' || typeof body.strictSize === 'boolean') {
     const data = { ...existing.data };
     if (body.title !== undefined) {
       data.title = String(body.title);
@@ -1485,6 +1505,7 @@ async function handleCanvasUpdateNode(nodeId: string, req: Request): Promise<Res
     }
     if (body.content !== undefined) data.content = String(body.content);
     if (typeof body.arrangeLocked === 'boolean') data.arrangeLocked = body.arrangeLocked;
+    if (typeof body.strictSize === 'boolean') data.strictSize = body.strictSize;
     // Merge extra data fields (for status, context, ledger, trace nodes)
     if (body.data && typeof body.data === 'object' && !Array.isArray(body.data)) {
       Object.assign(data, body.data as Record<string, unknown>);
@@ -1720,6 +1741,7 @@ async function handleCanvasAddJsonRender(req: Request): Promise<Response> {
     const result = createCanvasJsonRenderNode({
       ...(title ? { title } : {}),
       spec: rawSpec,
+      ...(body.strictSize === true ? { strictSize: true } : {}),
       ...geometry,
     });
     emitPrimaryWorkbenchEvent('canvas-layout-update', { layout: canvasState.getLayout() });
@@ -1756,6 +1778,8 @@ async function handleCanvasAddGraph(req: Request): Promise<Response> {
     const y = pickFiniteNumber(body, 'y') ?? (position ? pickFiniteNumber(position, 'y') : undefined);
     const width = pickPositiveNumber(body, 'width') ?? (size ? pickPositiveNumber(size, 'width') : undefined);
     const nodeHeight = pickPositiveNumber(body, 'nodeHeight') ?? (size ? pickPositiveNumber(size, 'height') : undefined);
+    const showLegend = typeof body.showLegend === 'boolean' ? body.showLegend : undefined;
+    const showLabels = typeof body.showLabels === 'boolean' ? body.showLabels : undefined;
     const result = createCanvasGraphNode({
       title,
       graphType,
@@ -1775,6 +1799,9 @@ async function handleCanvasAddGraph(req: Request): Promise<Response> {
       ...(typeof body.barColor === 'string' ? { barColor: body.barColor } : {}),
       ...(typeof body.lineColor === 'string' ? { lineColor: body.lineColor } : {}),
       ...(typeof body.height === 'number' ? { height: body.height } : {}),
+      ...(showLegend !== undefined ? { showLegend } : {}),
+      ...(showLabels !== undefined ? { showLabels } : {}),
+      ...(body.strictSize === true ? { strictSize: true } : {}),
       ...(x !== undefined ? { x } : {}),
       ...(y !== undefined ? { y } : {}),
       ...(width !== undefined ? { width } : {}),
@@ -3336,7 +3363,10 @@ function syncEventToCanvasState(event: string, payload: PrimaryWorkbenchEventPay
       if (previousSessionId && nextSessionId && previousSessionId !== nextSessionId) {
         closeMcpAppSession(previousSessionId);
       }
-      canvasState.updateNode(id, { data: { ...existing.data, ...dataPatch } });
+      canvasState.updateNode(id, {
+        data: { ...existing.data, ...dataPatch },
+        ...extAppEventGeometryPatch(existing, payload),
+      });
     } else {
       const reusableNodeId =
         typeof payload.serverName === 'string' &&
@@ -3355,6 +3385,7 @@ function syncEventToCanvasState(event: string, payload: PrimaryWorkbenchEventPay
         }
         canvasState.updateNode(reusableNodeId, {
           data: { ...reusableNode.data, ...dataPatch },
+          ...extAppEventGeometryPatch(reusableNode, payload),
         });
         return;
       }