@stocksharp/diagram 0.2.2 → 0.3.0

package/src/embed.ts

@@ -11,6 +11,8 @@ import { StockSharpDiagram } from './diagram/stocksharp-diagram.js';
 import { StockSharpCatalog } from './diagram/catalog.js';
 import { DiagramNode, Link, Node, Port, PortType } from './diagram/types.js';
 import type { FullscreenRequestedPayload } from './diagram/api.js';
+import { toPortDynamicMode } from './core/model.js';
+import type { PortDynamicMode } from './core/model.js';
 
 interface PalettePort {
 	key: string;
@@ -19,7 +21,7 @@ interface PalettePort {
 	maxLinks?: number;
 	availableTypes?: string[];
 	isDynamic?: boolean;
-	dynamicMode?: string;
+	dynamicMode?: PortDynamicMode;
 }
 
 interface PaletteElement {
@@ -166,59 +168,136 @@ function toDiagramNodes(
 // Walk the persisted Content.Value.Scheme.Model.{Nodes,Links} structure into
 // the thin scheme. Defensive at every field so a partially
 // broken document yields as many nodes as are readable; a wholly unusable one yields an empty scheme.
+// Every reader below narrows rather than asserts: the input is arbitrary JSON
+// from a URL or an inline <script>, so a type assertion here would only be a
+// promise the data never made. Anything unreadable is skipped, never thrown on.
+function isRecord(value: unknown): value is Record<string, unknown> {
+	return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+function asRecord(value: unknown): Record<string, unknown> | undefined {
+	return isRecord(value) ? value : undefined;
+}
+
+function asArray(value: unknown): unknown[] {
+	return Array.isArray(value) ? value : [];
+}
+
+function asString(value: unknown): string {
+	return typeof value === 'string' ? value : '';
+}
+
+function asFiniteNumber(value: unknown): number {
+	return typeof value === 'number' && Number.isFinite(value) ? value : 0;
+}
+
 function nodeName(node: Record<string, unknown>): string {
-	const settings = node?.Settings as Record<string, unknown> | undefined;
-	const parameters = settings?.Parameters as Record<string, unknown> | undefined;
-	const nameParam = parameters?.Name as Record<string, unknown> | undefined;
-	const nameVal = nameParam?.Value;
-	if (typeof nameVal === 'string' && nameVal.length > 0)
-		return nameVal;
-	if (typeof node?.Figure === 'string' && (node.Figure as string).length > 0)
-		return node.Figure as string;
-	return typeof node?.Key === 'string' ? node.Key as string : '';
+	const named = asRecord(asRecord(asRecord(node.Settings)?.Parameters)?.Name)?.Value;
+	if (typeof named === 'string' && named.length > 0)
+		return named;
+	const figure = asString(node.Figure);
+	return figure.length > 0 ? figure : asString(node.Key);
 }
 
 function parseRawScheme(raw: unknown): DiagramEmbedScheme {
 	const nodes: DiagramEmbedSchemeNode[] = [];
 	const links: DiagramEmbedSchemeLink[] = [];
 
-	const root = raw as Record<string, unknown>;
-	const content = root?.Content as Record<string, unknown> | undefined;
-	const value = content?.Value as Record<string, unknown> | undefined;
-	const scheme = value?.Scheme as Record<string, unknown> | undefined;
-	const model = scheme?.Model as Record<string, unknown> | undefined;
-	if (!model)
+	const model = asRecord(asRecord(asRecord(asRecord(raw)?.Content)?.Value)?.Scheme)?.Model;
+	const fields = asRecord(model);
+	if (fields === undefined)
 		return { nodes, links };
 
-	for (const raw of (model.Nodes as Record<string, unknown>[] ?? [])) {
-		const key = raw?.Key;
+	for (const entry of asArray(fields.Nodes)) {
+		const node = asRecord(entry);
+		if (node === undefined)
+			continue;
+		const key = node.Key;
 		if (typeof key !== 'string' || key.length === 0)
 			continue;
 		nodes.push({
 			id: key,
-			typeId: typeof raw.TypeId === 'string' ? raw.TypeId : '',
-			name: nodeName(raw),
-			x: typeof raw.X === 'number' ? raw.X : 0,
-			y: typeof raw.Y === 'number' ? raw.Y : 0,
+			typeId: asString(node.TypeId),
+			name: nodeName(node),
+			x: asFiniteNumber(node.X),
+			y: asFiniteNumber(node.Y),
 		});
 	}
 
-	for (const raw of (model.Links as Record<string, unknown>[] ?? [])) {
-		const from = raw?.From;
-		const to = raw?.To;
+	for (const entry of asArray(fields.Links)) {
+		const link = asRecord(entry);
+		if (link === undefined)
+			continue;
+		const from = link.From;
+		const to = link.To;
 		if (typeof from !== 'string' || typeof to !== 'string')
 			continue;
 		links.push({
 			from,
-			fromPort: typeof raw.FromPort === 'string' ? raw.FromPort : '',
+			fromPort: asString(link.FromPort),
 			to,
-			toPort: typeof raw.ToPort === 'string' ? raw.ToPort : '',
+			toPort: asString(link.ToPort),
 		});
 	}
 
 	return { nodes, links };
 }
 
+function parsePalettePorts(value: unknown): PalettePort[] {
+	const ports: PalettePort[] = [];
+	for (const entry of asArray(value)) {
+		const port = asRecord(entry);
+		if (port === undefined)
+			continue;
+		const key = asString(port.key);
+		if (key.length === 0)
+			continue;
+		ports.push({
+			key,
+			name: asString(port.name),
+			type: asString(port.type),
+			maxLinks: asFiniteNumber(port.maxLinks),
+			availableTypes: asArray(port.availableTypes).filter((item): item is string => typeof item === 'string'),
+			isDynamic: port.isDynamic === true,
+			dynamicMode: toPortDynamicMode(port.dynamicMode),
+		});
+	}
+	return ports;
+}
+
+function parsePalette(value: unknown): Palette {
+	const socketTypes: Palette['socketTypes'] = [];
+	const elements: PaletteElement[] = [];
+	const root = asRecord(value);
+	if (root === undefined)
+		return { socketTypes, elements };
+
+	for (const entry of asArray(root.socketTypes)) {
+		const socket = asRecord(entry);
+		const name = asString(socket?.name);
+		if (name.length === 0)
+			continue;
+		socketTypes.push({ name, color: asString(socket?.color) });
+	}
+
+	for (const entry of asArray(root.elements)) {
+		const element = asRecord(entry);
+		const typeId = asString(element?.typeId);
+		if (element === undefined || typeId.length === 0)
+			continue;
+		elements.push({
+			typeId,
+			name: asString(element.name),
+			groupName: asString(element.groupName),
+			icon: asString(element.icon),
+			inPorts: parsePalettePorts(element.inPorts),
+			outPorts: parsePalettePorts(element.outPorts),
+		});
+	}
+
+	return { socketTypes, elements };
+}
+
 export async function renderScheme(
 	div: HTMLElement,
 	paletteUrl: string,
@@ -237,7 +316,12 @@ async function renderSchemeAtRevision(
 ): Promise<DiagramEmbedHandle | null> {
 	if (renderRevisions.get(div) !== revision)
 		return null;
-	const palette = (await fetch(paletteUrl).then((r) => r.json())) as Palette;
+	// Same treatment the schema fetch gets: a non-2xx answer is a failure, not a
+	// body to parse. Callers that degrade already catch it.
+	const response = await fetch(paletteUrl);
+	if (!response.ok)
+		throw new Error(`Palette request to ${paletteUrl} failed with status ${response.status}.`);
+	const palette = parsePalette(await response.json());
 	if (renderRevisions.get(div) !== revision)
 		return null;
 	const catalog = buildCatalog(palette);
@@ -245,9 +329,17 @@ async function renderSchemeAtRevision(
 	disposeActiveRender(div);
 	div.classList.remove('ss-diagram-error');
 	div.replaceChildren();
+	// The host page passes its wording the same way it passes the error texts: through the dataset,
+	// "enter|exit". Left out, the button keeps its English defaults.
+	const [enterLabel, exitLabel] = (div.dataset.diagramFullscreen ?? '').split('|');
+
 	let diagram: StockSharpDiagram;
 	try {
-		diagram = new StockSharpDiagram({ div, catalog });
+		diagram = new StockSharpDiagram({
+			div,
+			catalog,
+			...(enterLabel && exitLabel ? { fullscreenLabels: { enter: enterLabel, exit: exitLabel } } : {}),
+		});
 	} catch (error) {
 		div.replaceChildren();
 		throw error;
@@ -404,6 +496,25 @@ function stopDisconnectedHostObserverWhenIdle(): void {
 	disconnectedHostObserver = null;
 }
 
+interface EmbedErrorTexts {
+	load: string;
+	empty: string;
+	draw: string;
+}
+
+// The host overrides the inline notes with data-diagram-errors="load|empty|draw".
+// Each slot falls back when it is empty rather than when it is absent: split on a
+// missing attribute yields [''], one present empty string, so a destructuring
+// default would never fire and the note would render blank.
+function errorTexts(div: HTMLElement): EmbedErrorTexts {
+	const parts = (div.dataset.diagramErrors ?? '').split('|');
+	return {
+		load: parts[0] || 'Diagram source could not be loaded.',
+		empty: parts[1] || 'Diagram is empty or malformed.',
+		draw: parts[2] || 'Diagram could not be rendered.',
+	};
+}
+
 function note(div: HTMLElement, message: string, revision: number): void {
 	if (renderRevisions.get(div) !== revision) return;
 	disposeActiveRender(div);
@@ -421,30 +532,29 @@ export async function renderFromSource(
 	options: DiagramEmbedOptions = {},
 ): Promise<DiagramEmbedHandle | null> {
 	const revision = beginRender(div);
-	const errors = (div.dataset.diagramErrors ?? '').split('|');
-	const [errLoad = 'Diagram source could not be loaded.', errEmpty = 'Diagram is empty or malformed.', errDraw = 'Diagram could not be rendered.'] = errors;
+	const errors = errorTexts(div);
 
 	let raw: unknown;
 	try {
 		const resp = await fetch(srcUrl);
-		if (!resp.ok) { note(div, errLoad, revision); return null; }
+		if (!resp.ok) { note(div, errors.load, revision); return null; }
 		const text = (await resp.text()).replace(/^/, '');
 		raw = JSON.parse(text);
 	} catch {
-		note(div, errLoad, revision);
+		note(div, errors.load, revision);
 		return null;
 	}
 
 	const scheme = parseRawScheme(raw);
 	if (scheme.nodes.length === 0) {
-		note(div, errEmpty, revision);
+		note(div, errors.empty, revision);
 		return null;
 	}
 
 	try {
 		return await renderSchemeAtRevision(div, paletteUrl, scheme, revision, options);
 	} catch {
-		note(div, errDraw, revision);
+		note(div, errors.draw, revision);
 		return null;
 	}
 }
@@ -459,27 +569,26 @@ export async function renderFromInline(
 	options: DiagramEmbedOptions = {},
 ): Promise<DiagramEmbedHandle | null> {
 	const revision = beginRender(div);
-	const errors = (div.dataset.diagramErrors ?? '').split('|');
-	const [, errEmpty = 'Diagram is empty or malformed.', errDraw = 'Diagram could not be rendered.'] = errors;
+	const errors = errorTexts(div);
 
 	let raw: unknown;
 	try {
 		raw = JSON.parse(json);
 	} catch {
-		note(div, errEmpty, revision);
+		note(div, errors.empty, revision);
 		return null;
 	}
 
 	const scheme = parseRawScheme(raw);
 	if (scheme.nodes.length === 0) {
-		note(div, errEmpty, revision);
+		note(div, errors.empty, revision);
 		return null;
 	}
 
 	try {
 		return await renderSchemeAtRevision(div, paletteUrl, scheme, revision, options);
 	} catch {
-		note(div, errDraw, revision);
+		note(div, errors.draw, revision);
 		return null;
 	}
 }

package/src/index.ts

@@ -36,6 +36,7 @@ export type {
     JsonObject,
     JsonPrimitive,
     JsonValue,
+    PortDynamicMode,
 } from './core/model.js';
 
 export {
@@ -43,6 +44,7 @@ export {
     createDiagramNodeRuntimeState,
     createDiagramPortRuntimeState,
     createDiagramRuntimeState,
+    cloneDiagramNodeErrors,
     cloneDiagramRuntimeState,
     createDiagramSelection,
     createDiagramViewState,
@@ -64,6 +66,7 @@ export type {
     DiagramGlobalErrorKind,
     DiagramInteractionPermissions,
     DiagramNodeErrorKind,
+    DiagramNodeErrors,
     DiagramNodePortRuntimeState,
     DiagramNodeRuntimeState,
     DiagramPortDirection,
@@ -71,6 +74,7 @@ export type {
     DiagramRuntimeState,
     DiagramSelectedPort,
     DiagramSelection,
+    DiagramSnapshot,
     DiagramViewState,
 } from './core/state.js';