circuitjson-toolkit 1.0.17 → 1.1.0

package/src/ui/CircuitJsonSchematicSvgRenderer.mjs

@@ -1,9 +1,17 @@
 import { CircuitJsonIndexer } from '../core/CircuitJsonIndexer.mjs'
 import { CircuitJsonUnits } from '../core/CircuitJsonUnits.mjs'
+import { CircuitJsonLegacyNormalizer } from '../core/context/CircuitJsonLegacyNormalizer.mjs'
 import { CircuitJsonSchematicSvgArcPath } from './CircuitJsonSchematicSvgArcPath.mjs'
+import { CircuitJsonSchematicDebugRenderer } from './CircuitJsonSchematicDebugRenderer.mjs'
+import { CircuitJsonSchematicLineRenderer } from './CircuitJsonSchematicLineRenderer.mjs'
+import { CircuitJsonSchematicImageSvgRenderer } from './CircuitJsonSchematicImageSvgRenderer.mjs'
+import { CircuitJsonSchematicSheetSymbolSvgRenderer } from './CircuitJsonSchematicSheetSymbolSvgRenderer.mjs'
 import { CircuitJsonSchematicSvgPortMetadata } from './CircuitJsonSchematicSvgPortMetadata.mjs'
 import { CircuitJsonSchematicSvgPrimitiveAttributes } from './CircuitJsonSchematicSvgPrimitiveAttributes.mjs'
 import { CircuitJsonSchematicTableSvgRenderer } from './CircuitJsonSchematicTableSvgRenderer.mjs'
+import { SchematicGeometryBounds } from './SchematicGeometryBounds.mjs'
+import { SafeXmlText } from './SafeXmlText.mjs'
+import { SchematicTextAnchor } from './SchematicTextAnchor.mjs'
 
 /**
  * Renders standards-shaped schematic element arrays into app-compatible SVG.
@@ -12,26 +20,53 @@ export class CircuitJsonSchematicSvgRenderer {
     /**
      * Renders one schematic document into SVG markup.
      * @param {object | object[]} documentModel Parsed document model.
+     * @param {{ assets?: object[] }} [options] Render resources.
      * @returns {string}
      */
-    static render(documentModel) {
-        const elements =
-            CircuitJsonSchematicSvgRenderer.#elements(documentModel)
-        const index = CircuitJsonIndexer.index(elements)
-        const bounds = CircuitJsonSchematicSvgRenderer.#bounds(index)
+    static render(documentModel, options = {}) {
+        const prepared = documentModel?.elementsByType instanceof Map
+        const index = prepared
+            ? documentModel
+            : CircuitJsonIndexer.index(
+                  CircuitJsonLegacyNormalizer.normalize(
+                      CircuitJsonSchematicSvgRenderer.#elements(documentModel)
+                  )
+              )
+        const sourcePorts = CircuitJsonSchematicSvgPortMetadata.sourcePorts(
+            CircuitJsonSchematicSvgRenderer.#all(index, 'source_port')
+        )
+        const portHintCache = new WeakMap()
+        const bounds = prepared
+            ? SchematicGeometryBounds.resolve(index, sourcePorts, portHintCache)
+            : SchematicGeometryBounds.legacy(index)
         const viewBox = CircuitJsonSchematicSvgRenderer.#viewBox(bounds)
-
         return (
-            '<svg class="schematic-svg schematic-svg--circuitjson" xmlns="http://www.w3.org/2000/svg" role="img" viewBox="' +
+            '<svg class="schematic-svg schematic-svg--circuitjson" xmlns="http://www.w3.org/2000/svg" role="img"' +
+            (prepared ? ' font-size="1"' : '') +
+            ' viewBox="' +
             CircuitJsonSchematicSvgRenderer.#formatViewBox(viewBox) +
             '">' +
             CircuitJsonSchematicSvgRenderer.#renderSheet(bounds) +
+            CircuitJsonSchematicImageSvgRenderer.render(
+                CircuitJsonSchematicSvgRenderer.#all(index, 'schematic_image'),
+                options.assets || documentModel?.assets || []
+            ) +
             CircuitJsonSchematicSvgRenderer.#renderComponents(index) +
             CircuitJsonSchematicSvgRenderer.#renderSymbols(index) +
             CircuitJsonSchematicSvgRenderer.#renderGroups(index) +
+            CircuitJsonSchematicSheetSymbolSvgRenderer.render(
+                CircuitJsonSchematicSvgRenderer.#all(
+                    index,
+                    'schematic_sheet_symbol'
+                )
+            ) +
             CircuitJsonSchematicSvgRenderer.#renderLines(index) +
             CircuitJsonSchematicSvgRenderer.#renderShapes(index) +
-            CircuitJsonSchematicSvgRenderer.#renderPorts(index) +
+            CircuitJsonSchematicSvgRenderer.#renderPorts(
+                index,
+                sourcePorts,
+                portHintCache
+            ) +
             CircuitJsonSchematicSvgRenderer.#renderTables(index) +
             CircuitJsonSchematicSvgRenderer.#renderTexts(index) +
             CircuitJsonSchematicSvgRenderer.#renderProbes(index) +
@@ -75,11 +110,7 @@ export class CircuitJsonSchematicSvgRenderer {
         )
     }
 
-    /**
-     * Renders schematic component boxes.
-     * @param {{ elementsByType: Map<string, object[]> }} index Element index.
-     * @returns {string}
-     */
+    /** @param {{ elementsByType: Map<string, object[]> }} index Element index. @returns {string} Schematic component markup. */
     static #renderComponents(index) {
         const sourceNames = CircuitJsonSchematicSvgRenderer.#sourceNames(index)
         const components = CircuitJsonSchematicSvgRenderer.#all(
@@ -101,6 +132,16 @@ export class CircuitJsonSchematicSvgRenderer {
                 String(component.name || 'U' + (componentIndex + 1))
             const x = center.x - size.width / 2
             const y = center.y - size.height / 2
+            const label =
+                component.show_label === false
+                    ? ''
+                    : '<text class="schematic-component__label" x="' +
+                      CircuitJsonSchematicSvgRenderer.#formatNumber(center.x) +
+                      '" y="' +
+                      CircuitJsonSchematicSvgRenderer.#formatNumber(center.y) +
+                      '" text-anchor="middle" dominant-baseline="central">' +
+                      CircuitJsonSchematicSvgRenderer.#escapeHtml(key) +
+                      '</text>'
 
             return (
                 '<g class="schematic-component" data-component-key="' +
@@ -118,13 +159,9 @@ export class CircuitJsonSchematicSvgRenderer {
                 CircuitJsonSchematicSvgRenderer.#formatNumber(size.width) +
                 '" height="' +
                 CircuitJsonSchematicSvgRenderer.#formatNumber(size.height) +
-                '"></rect><text class="schematic-component__label" x="' +
-                CircuitJsonSchematicSvgRenderer.#formatNumber(center.x) +
-                '" y="' +
-                CircuitJsonSchematicSvgRenderer.#formatNumber(center.y) +
-                '" text-anchor="middle" dominant-baseline="central">' +
-                CircuitJsonSchematicSvgRenderer.#escapeHtml(key) +
-                '</text></g>'
+                '"></rect>' +
+                label +
+                '</g>'
             )
         })
 
@@ -256,8 +293,8 @@ export class CircuitJsonSchematicSvgRenderer {
             .flatMap((type) =>
                 CircuitJsonSchematicSvgRenderer.#all(index, type)
             )
-            .map((element) =>
-                CircuitJsonSchematicSvgRenderer.#lineElement(element)
+            .flatMap((element) =>
+                CircuitJsonSchematicLineRenderer.render(element)
             )
             .filter(Boolean)
         return lines.length
@@ -265,38 +302,6 @@ export class CircuitJsonSchematicSvgRenderer {
             : ''
     }
 
-    /**
-     * Renders one schematic line.
-     * @param {object} element Source element.
-     * @returns {string}
-     */
-    static #lineElement(element) {
-        const start = CircuitJsonSchematicSvgRenderer.#point({
-            x: element.x1 ?? element.start?.x,
-            y: element.y1 ?? element.start?.y
-        })
-        const end = CircuitJsonSchematicSvgRenderer.#point({
-            x: element.x2 ?? element.end?.x,
-            y: element.y2 ?? element.end?.y
-        })
-        if (!start || !end) return ''
-        return (
-            '<line class="schematic-wire" x1="' +
-            CircuitJsonSchematicSvgRenderer.#formatNumber(start.x) +
-            '" y1="' +
-            CircuitJsonSchematicSvgRenderer.#formatNumber(start.y) +
-            '" x2="' +
-            CircuitJsonSchematicSvgRenderer.#formatNumber(end.x) +
-            '" y2="' +
-            CircuitJsonSchematicSvgRenderer.#formatNumber(end.y) +
-            '"' +
-            CircuitJsonSchematicSvgPrimitiveAttributes.attributes(element, {
-                fill: false
-            }) +
-            '></line>'
-        )
-    }
-
     /**
      * Renders schematic rectangle and circle shapes.
      * @param {{ elementsByType: Map<string, object[]> }} index Element index.
@@ -418,11 +423,13 @@ export class CircuitJsonSchematicSvgRenderer {
         const radius = CircuitJsonUnits.optionalLength(element.radius)
         if (!center || radius === null) return ''
         const startAngle = CircuitJsonUnits.angle(
-            element.start_angle ?? element.startAngle,
+            element.start_angle_degrees ??
+                element.start_angle ??
+                element.startAngle,
             0
         )
         const endAngle = CircuitJsonUnits.angle(
-            element.end_angle ?? element.endAngle,
+            element.end_angle_degrees ?? element.end_angle ?? element.endAngle,
             360
         )
         const start = CircuitJsonSchematicSvgRenderer.#polarPoint(
@@ -435,23 +442,56 @@ export class CircuitJsonSchematicSvgRenderer {
             radius,
             endAngle
         )
-        const largeArc = Math.abs(endAngle - startAngle) > 180 ? 1 : 0
-
-        return (
-            '<path class="schematic-shape schematic-shape--arc" d="M ' +
-            CircuitJsonSchematicSvgRenderer.#formatNumber(start.x) +
-            ' ' +
-            CircuitJsonSchematicSvgRenderer.#formatNumber(start.y) +
+        const standardAngles =
+            element.start_angle_degrees !== undefined ||
+            element.end_angle_degrees !== undefined
+        const sweep =
+            element.direction === 'clockwise'
+                ? 1
+                : element.direction === 'counterclockwise' || standardAngles
+                  ? 0
+                  : 1
+        const span = CircuitJsonSchematicSvgRenderer.#directedAngleSpan(
+            startAngle,
+            endAngle,
+            sweep
+        )
+        const largeArc = span > 180 ? 1 : 0
+        const midpoint = CircuitJsonSchematicSvgRenderer.#polarPoint(
+            center,
+            radius,
+            startAngle + (sweep ? 180 : -180)
+        )
+        /**
+         * Builds one SVG arc command for the resolved circle.
+         * @param {{ x: number, y: number }} point Command endpoint.
+         * @param {boolean} [fullTurn] Whether this is half of a full turn.
+         * @returns {string} SVG path command.
+         */
+        const arcEnd = (point, fullTurn = false) =>
             ' A ' +
             CircuitJsonSchematicSvgRenderer.#formatNumber(radius) +
             ' ' +
             CircuitJsonSchematicSvgRenderer.#formatNumber(radius) +
             ' 0 ' +
-            largeArc +
-            ' 1 ' +
-            CircuitJsonSchematicSvgRenderer.#formatNumber(end.x) +
+            (fullTurn ? 0 : largeArc) +
             ' ' +
-            CircuitJsonSchematicSvgRenderer.#formatNumber(end.y) +
+            sweep +
+            ' ' +
+            CircuitJsonSchematicSvgRenderer.#formatNumber(point.x) +
+            ' ' +
+            CircuitJsonSchematicSvgRenderer.#formatNumber(point.y)
+        const path =
+            span === 360
+                ? arcEnd(midpoint, true) + arcEnd(start, true)
+                : arcEnd(end)
+
+        return (
+            '<path class="schematic-shape schematic-shape--arc" d="M ' +
+            CircuitJsonSchematicSvgRenderer.#formatNumber(start.x) +
+            ' ' +
+            CircuitJsonSchematicSvgRenderer.#formatNumber(start.y) +
+            path +
             '"' +
             CircuitJsonSchematicSvgPrimitiveAttributes.attributes(element, {
                 fill: false
@@ -487,12 +527,11 @@ export class CircuitJsonSchematicSvgRenderer {
     /**
      * Renders schematic ports.
      * @param {{ elementsByType: Map<string, object[]> }} index Element index.
+     * @param {Map<string, object>} sourcePorts Source-port lookup.
+     * @param {WeakMap<object, string>} portHintCache Render-scoped hint cache.
      * @returns {string}
      */
-    static #renderPorts(index) {
-        const sourcePorts = CircuitJsonSchematicSvgPortMetadata.sourcePorts(
-            CircuitJsonSchematicSvgRenderer.#all(index, 'source_port')
-        )
+    static #renderPorts(index, sourcePorts, portHintCache) {
         const ports = CircuitJsonSchematicSvgRenderer.#all(
             index,
             'schematic_port'
@@ -500,7 +539,8 @@ export class CircuitJsonSchematicSvgRenderer {
             .map((element) =>
                 CircuitJsonSchematicSvgRenderer.#portElement(
                     element,
-                    sourcePorts
+                    sourcePorts,
+                    portHintCache
                 )
             )
             .filter(Boolean)
@@ -513,16 +553,18 @@ export class CircuitJsonSchematicSvgRenderer {
      * Renders one schematic port marker.
      * @param {object} element Port element.
      * @param {Map<string, object>} sourcePorts Source port lookup.
+     * @param {WeakMap<object, string>} portHintCache Render-scoped hint cache.
      * @returns {string}
      */
-    static #portElement(element, sourcePorts) {
+    static #portElement(element, sourcePorts, portHintCache) {
         const center = CircuitJsonSchematicSvgRenderer.#center(element)
         if (!center) return ''
         const sourcePortId = String(element.source_port_id || '').trim()
         const sourcePort = sourcePorts.get(sourcePortId) || null
         const label = CircuitJsonSchematicSvgPortMetadata.label(
             element,
-            sourcePort
+            sourcePort,
+            portHintCache
         )
 
         return (
@@ -592,6 +634,7 @@ export class CircuitJsonSchematicSvgRenderer {
             element.ccw_rotation ?? element.rotation,
             0
         )
+        const anchor = element.anchor || element.anchor_side
         const attributes = [
             'class="schematic-text"',
             'x="' +
@@ -607,6 +650,15 @@ export class CircuitJsonSchematicSvgRenderer {
                     '"'
             )
         }
+        if (anchor) {
+            const alignment = SchematicTextAnchor.resolve(anchor)
+            attributes.push('text-anchor="' + alignment.textAnchor + '"')
+            if (alignment.baseline) {
+                attributes.push(
+                    'dominant-baseline="' + alignment.baseline + '"'
+                )
+            }
+        }
         if (rotation) {
             attributes.push(
                 'transform="rotate(' +
@@ -655,7 +707,9 @@ export class CircuitJsonSchematicSvgRenderer {
      * @returns {string}
      */
     static #probeElement(element) {
-        const center = CircuitJsonSchematicSvgRenderer.#center(element)
+        const center =
+            CircuitJsonSchematicSvgRenderer.#point(element.position) ||
+            CircuitJsonSchematicSvgRenderer.#center(element)
         if (!center) return ''
         const label = String(element.name || element.label || '').trim()
         return (
@@ -687,45 +741,13 @@ export class CircuitJsonSchematicSvgRenderer {
             index,
             'schematic_debug_object'
         )
-            .map((element) =>
-                CircuitJsonSchematicSvgRenderer.#debugObjectElement(element)
-            )
+            .map((element) => CircuitJsonSchematicDebugRenderer.render(element))
             .filter(Boolean)
         return objects.length
             ? '<g class="schematic-debug-objects">' + objects.join('') + '</g>'
             : ''
     }
 
-    /**
-     * Renders one schematic debug object.
-     * @param {object} element Debug element.
-     * @returns {string}
-     */
-    static #debugObjectElement(element) {
-        const rect = CircuitJsonSchematicSvgRenderer.#rectAttributes(element)
-        const center = CircuitJsonSchematicSvgRenderer.#center(element)
-        if (!rect || !center) return ''
-        const message = String(element.message || '').trim()
-
-        return (
-            '<g class="schematic-debug-object" data-schematic-debug-object-id="' +
-            CircuitJsonSchematicSvgRenderer.#escapeHtml(
-                element.schematic_debug_object_id || ''
-            ) +
-            '"><title>' +
-            CircuitJsonSchematicSvgRenderer.#escapeHtml(message) +
-            '</title><rect ' +
-            rect +
-            '></rect><text x="' +
-            CircuitJsonSchematicSvgRenderer.#formatNumber(center.x) +
-            '" y="' +
-            CircuitJsonSchematicSvgRenderer.#formatNumber(center.y) +
-            '" text-anchor="middle" dominant-baseline="central">' +
-            CircuitJsonSchematicSvgRenderer.#escapeHtml(message) +
-            '</text></g>'
-        )
-    }
-
     /**
      * Renders schematic warning and error markers.
      * @param {{ elements: object[] }} index Element index.
@@ -733,9 +755,13 @@ export class CircuitJsonSchematicSvgRenderer {
      */
     static #renderDiagnostics(index) {
         const diagnostics = (index.elements || [])
-            .filter((element) =>
-                /(?:error|warning)/iu.test(String(element?.type || ''))
-            )
+            .filter((element) => {
+                const type = String(element?.type || '')
+                return (
+                    type.startsWith('schematic_') &&
+                    /(?:error|warning)/iu.test(type)
+                )
+            })
             .map((element) =>
                 CircuitJsonSchematicSvgRenderer.#diagnosticElement(element)
             )
@@ -796,38 +822,6 @@ export class CircuitJsonSchematicSvgRenderer {
         )
     }
 
-    /**
-     * Resolves schematic bounds.
-     * @param {{ elements: object[], elementsByType: Map<string, object[]> }} index Element index.
-     * @returns {{ minX: number, minY: number, maxX: number, maxY: number, width: number, height: number }}
-     */
-    static #bounds(index) {
-        const sheet = CircuitJsonSchematicSvgRenderer.#all(
-            index,
-            'schematic_sheet'
-        )[0]
-        const width = CircuitJsonUnits.optionalLength(sheet?.width)
-        const height = CircuitJsonUnits.optionalLength(sheet?.height)
-        if (width !== null && height !== null) {
-            return {
-                minX: 0,
-                minY: 0,
-                maxX: width,
-                maxY: height,
-                width,
-                height
-            }
-        }
-        return {
-            minX: -10,
-            minY: -10,
-            maxX: 10,
-            maxY: 10,
-            width: 20,
-            height: 20
-        }
-    }
-
     /**
      * Builds a padded SVG viewBox.
      * @param {object} bounds Bounds.
@@ -939,6 +933,19 @@ export class CircuitJsonSchematicSvgRenderer {
         }
     }
 
+    /**
+     * Resolves the positive span for an SVG sweep direction.
+     * @param {number} start Start angle in degrees.
+     * @param {number} end End angle in degrees.
+     * @param {0 | 1} sweep SVG sweep flag.
+     * @returns {number} Directed span in degrees.
+     */
+    static #directedAngleSpan(start, end, sweep) {
+        const difference = sweep ? end - start : start - end
+        const span = ((difference % 360) + 360) % 360
+        return span === 0 && start !== end ? 360 : span
+    }
+
     /**
      * Builds a polyline point string.
      * @param {{ x: number, y: number }[]} points Points.
@@ -985,10 +992,6 @@ export class CircuitJsonSchematicSvgRenderer {
      * @returns {string}
      */
     static #escapeHtml(value) {
-        return String(value ?? '')
-            .replaceAll('&', '&amp;')
-            .replaceAll('<', '&lt;')
-            .replaceAll('>', '&gt;')
-            .replaceAll('"', '&quot;')
+        return SafeXmlText.escape(value)
     }
 }