example how to load netlistsvg json #26

Nic30 · Oct 4, 2021 · 563baff · 563baff
1 parent 8e604ba
commit 563baff
Show file tree

Hide file tree

Showing 4 changed files with 827 additions and 18 deletions.
diff --git a/examples/example.html b/examples/example.html
@@ -7,6 +7,7 @@
   <!-- <script type="text/javascript" src="../node_modules/d3/dist/d3.min.js"></script>  -->
   <script type="text/javascript" src="../node_modules/elkjs/lib/elk.bundled.js"></script>
   <script type="text/javascript" src="../dist/d3-hwschematic.js"></script>
+  <script type="text/javascript" src="./netlistsvgTod3Hwschematic.js"></script>
   <link href="../dist/d3-hwschematic.css" rel="stylesheet">
   <style>
   	body {
@@ -15,7 +16,15 @@
   </style>
 </head>
 <body>
-    <input type="file" id="file-input" />
+    <label>
+        Open schematic:
+        <input type="file" id="file-input" />
+    </label>
+    <label>
+        Open netlistsvg schematic:
+        <input type="file" id="file-input-netlistsvg" />
+    </label>
+
     <svg id="scheme-placeholder"></svg>
     <script>
         // schematic rendering script
@@ -71,17 +80,24 @@
             if (!file) {
               return;
             }
+            var transformation = null;
+            if (e.target.id == 'file-input-netlistsvg') {
+               transformation = netlistsvgToD3Hwschematic;
+            }
             setUrlParameterByName("schematic", "schemes/" + file.name);
             var reader = new FileReader();
             reader.onload = function(e) {
               var contents = e.target.result;
-              displayContents(contents);
+              displayContents(contents, transformation);
             };
             reader.readAsText(file);
           }
 
-          function displayContents(contents) {
+          function displayContents(contents, transformation) {
             var graph = JSON.parse(contents);
+            if (transformation) {
+                graph = transformation(graph);
+            }
             if (graph.hwMeta && graph.hwMeta.name)
                  document.title = graph.hwMeta.name;
             // load the data and render the elements
@@ -91,6 +107,10 @@
           document.getElementById('file-input')
             .addEventListener('change', readSingleFile, false);
 
+          document.getElementById('file-input-netlistsvg')
+            .addEventListener('change', readSingleFile, false);
+
+
           function getUrlParameterByName(name, url) {
               if (!url) url = window.location.href;
               url = new URL(url);

diff --git a/examples/netlistsvgTod3Hwschematic.js b/examples/netlistsvgTod3Hwschematic.js
@@ -0,0 +1,84 @@
+/*
+This involves:
+* creating of hwMeta property
+* elkjs 0.7.1 -> 0.7.0 conversion
+   * "properties" vs "layoutOptions"
+   * edge source/target format ([node.id, port.id] vs port.id only)
+
+*/
+
+
+function netlistsvgToD3HwschematicCollectParentsOfPorts(netlistsvgJson, res) {
+    (netlistsvgJson.ports || []).forEach(p => {
+        res[p.id] = netlistsvgJson.id;
+    });
+    (netlistsvgJson.children || []).forEach(c => {
+        netlistsvgToD3HwschematicCollectParentsOfPorts(c, res);
+    });
+}
+
+function netlistsvgToD3HwschematicPort(netlistsvgPort) {
+    netlistsvgPort.children = [];
+    netlistsvgPort.direction = netlistsvgPort.x <= 0 ? "INPUT" : "OUTPUT";
+    var name = netlistsvgPort.id;
+    var labels = netlistsvgPort.labels;
+    if (labels && labels.length) {
+        name = labels[0].text
+    }
+    netlistsvgPort.hwMeta = {
+        "connectedAsParent": false,
+        "level": 0,
+        "name": name,
+    };
+    netlistsvgPort.properties = netlistsvgPort.layoutOptions || {};
+    netlistsvgPort.properties.side  = netlistsvgPort.x <= 0 ? "WEST" : "EAST";
+
+    delete netlistsvgPort["labels"];
+
+    return netlistsvgPort;
+}
+
+function netlistsvgToD3HwschematicEdge(netlistsvgEdge, parentsOfPorts) {
+    netlistsvgEdge.sources = netlistsvgEdge.sources.map(s => [parentsOfPorts[s], s]);
+    netlistsvgEdge.targets = netlistsvgEdge.targets.map(t => [parentsOfPorts[t], t]);
+    return netlistsvgEdge;
+}
+
+function _netlistsvgToD3Hwschematic(netlistsvgJson, parentsOfPorts) {
+    netlistsvgJson.properties = netlistsvgJson.layoutOptions || {};
+    var children = netlistsvgJson.children;
+    if (children) {
+        netlistsvgJson.children = children.map(c => _netlistsvgToD3Hwschematic(c, parentsOfPorts));
+    }
+
+    var name = netlistsvgJson.id;
+    var labels = netlistsvgJson.labels;
+    if (labels && labels.length)
+        labels = labels[0].text;
+
+    netlistsvgJson.hwMeta = {
+        "name": name,
+        "maxId": 0,
+    };
+
+    var ports = netlistsvgJson.ports;
+    if (ports && ports.length) {
+        netlistsvgJson.ports = ports.map(netlistsvgToD3HwschematicPort);
+    }
+    var edges = netlistsvgJson.edges;
+    if (edges && edges.length) {
+        netlistsvgJson.edges = edges.map(e => netlistsvgToD3HwschematicEdge(e, parentsOfPorts));
+    }
+
+
+    delete netlistsvgJson["labels"];
+
+    return netlistsvgJson;
+}
+
+
+function netlistsvgToD3Hwschematic(netlistsvgJson) {
+    var parentsOfPorts = {};
+    netlistsvgToD3HwschematicCollectParentsOfPorts(netlistsvgJson, parentsOfPorts);
+    return _netlistsvgToD3Hwschematic(netlistsvgJson, parentsOfPorts);
+}