Bus width labels (#101)

nobodywasishere · web-flow · commit 10177f952840 · 2021-03-24T22:51:59.000-05:00
* Update built/ to latest version of Typescript code

* Bus wires have double width, also added width_* classes to every wire for more customization

* Add inline bus width numbers with a class busLabel_* for customization
diff --git a/README.md b/README.md
@@ -475,6 +475,20 @@ The elkjs layout properties are also defined in the skin file.
 ```
 Any properties specified here will get passed along to the layout engine. Node and edge properties aren't configurable (yet).
 
+Using the classes `.busLabel_*` and `.width_*` (where * indicates the bus width) in the `<style>` tag at the top of the skin file (or the resulting svg), styling based on bus width can be added to lines and labels.
+
+For instance, to turn off bus width labels for buses of two wires, simply add:
+```svg
+.busLabel_2 {
+    fill-opacity: 0;
+}
+```
+To change the color of all lines of width 4 to red, simply add:
+```svg
+line.width_4 {
+    stroke: red;
+}
+```
 ## Input JSON
 Yosys JSON includes more information than we need. We only render one module (either the first or the module with an attribute "top"). If the cell name matches one of the aliases of a template from the skin, then it will use it as a template for the SVG file. Port directions are optional for cells that are defined in the skin (not generic cells).
 
diff --git a/built/Cell.js b/built/Cell.js
@@ -90,28 +90,28 @@ var Cell = /** @class */ (function () {
         get: function () {
             return this.type;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     Object.defineProperty(Cell.prototype, "Key", {
         get: function () {
             return this.key;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     Object.defineProperty(Cell.prototype, "InputPorts", {
         get: function () {
             return this.inputPorts;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     Object.defineProperty(Cell.prototype, "OutputPorts", {
         get: function () {
             return this.outputPorts;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     Cell.prototype.maxOutVal = function (atLeast) {
@@ -242,7 +242,8 @@ var Cell = /** @class */ (function () {
         var tempclone = clone(template);
         for (var _i = 0, _a = cell.labels; _i < _a.length; _i++) {
             var label = _a[_i];
-            var attrName = label.id.split('.')[2];
+            var labelIDSplit = label.id.split('.');
+            var attrName = labelIDSplit[labelIDSplit.length - 1];
             setTextAttribute(tempclone, attrName, label.text);
         }
         for (var i = 2; i < tempclone.length; i++) {
diff --git a/built/FlatModule.js b/built/FlatModule.js
@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.removeDups = exports.addToDefaultDict = exports.arrayToBitstring = exports.FlatModule = void 0;
 var Skin_1 = require("./Skin");
 var Cell_1 = require("./Cell");
 var _ = require("lodash");
diff --git a/built/Port.js b/built/Port.js
@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Port = void 0;
 var Cell_1 = require("./Cell");
 var _ = require("lodash");
 var Port = /** @class */ (function () {
@@ -11,7 +12,7 @@ var Port = /** @class */ (function () {
         get: function () {
             return this.key;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     Port.prototype.keyIn = function (pids) {
diff --git a/built/Skin.js b/built/Skin.js
@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Skin = void 0;
 var onml = require("onml");
 var _ = require("lodash");
 var Skin;
diff --git a/built/drawModule.js b/built/drawModule.js
@@ -7,6 +7,7 @@ var __spreadArrays = (this && this.__spreadArrays) || function () {
     return r;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.removeDummyEdges = void 0;
 var elkGraph_1 = require("./elkGraph");
 var Skin_1 = require("./Skin");
 var _ = require("lodash");
@@ -26,7 +27,9 @@ function drawModule(g, module) {
     removeDummyEdges(g);
     var lines = _.flatMap(g.edges, function (e) {
         var netId = elkGraph_1.ElkModel.wireNameLookup[e.id];
-        var netName = 'net_' + netId.slice(1, netId.length - 1);
+        var numWires = netId.split(',').length - 2;
+        var lineStyle = 'stroke-width: ' + (numWires > 1 ? 2 : 1);
+        var netName = 'net_' + netId.slice(1, netId.length - 1) + ' width_' + numWires;
         return _.flatMap(e.sections, function (s) {
             var startPoint = s.startPoint;
             s.bendPoints = s.bendPoints || [];
@@ -37,6 +40,7 @@ function drawModule(g, module) {
                         y1: startPoint.y,
                         y2: b.y,
                         class: netName,
+                        style: lineStyle,
                     }];
                 startPoint = b;
                 return l;
@@ -46,7 +50,7 @@ function drawModule(g, module) {
                     return ['circle', {
                             cx: j.x,
                             cy: j.y,
-                            r: 2,
+                            r: (numWires > 1 ? 3 : 2),
                             style: 'fill:#000',
                             class: netName,
                         }];
@@ -59,10 +63,54 @@ function drawModule(g, module) {
                         y1: startPoint.y,
                         y2: s.endPoint.y,
                         class: netName,
+                        style: lineStyle,
                     }]];
             return bends.concat(line);
         });
     });
+    var labels;
+    for (var index in g.edges) {
+        if (g.edges.hasOwnProperty(index)) {
+            var e = g.edges[index];
+            var netId = elkGraph_1.ElkModel.wireNameLookup[e.id];
+            var numWires = netId.split(',').length - 2;
+            var netName = 'net_' + netId.slice(1, netId.length - 1) +
+                ' width_' + numWires +
+                ' busLabel_' + numWires;
+            if (e.labels !== undefined &&
+                e.labels[0] !== undefined &&
+                e.labels[0].text !== undefined) {
+                var label = [
+                    ['rect',
+                        {
+                            x: e.labels[0].x + 1,
+                            y: e.labels[0].y - 1,
+                            width: (e.labels[0].text.length + 2) * 6 - 2,
+                            height: 9,
+                            class: netName,
+                            style: 'fill: white; stroke: none',
+                        },
+                    ], ['text',
+                        {
+                            x: e.labels[0].x,
+                            y: e.labels[0].y + 7,
+                            class: netName,
+                        },
+                        '/' + e.labels[0].text + '/',
+                    ],
+                ];
+                if (labels !== undefined) {
+                    labels = labels.concat(label);
+                }
+                else {
+                    labels = label;
+                }
+            }
+        }
+    }
+    if (labels !== undefined && labels.length > 0) {
+        lines = lines.concat(labels);
+    }
     var svgAttrs = Skin_1.default.skin[1];
     svgAttrs.width = g.width.toString();
     svgAttrs.height = g.height.toString();
diff --git a/built/elkGraph.js b/built/elkGraph.js
@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildElkGraph = exports.ElkModel = void 0;
 var _ = require("lodash");
 var ElkModel;
 (function (ElkModel) {
@@ -14,17 +15,18 @@ function buildElkGraph(module) {
     ElkModel.edgeIndex = 0;
     ElkModel.dummyNum = 0;
     var edges = _.flatMap(module.wires, function (w) {
+        var numWires = w.netName.split(',').length - 2;
         // at least one driver and at least one rider and no laterals
         if (w.drivers.length > 0 && w.riders.length > 0 && w.laterals.length === 0) {
             var ret = [];
-            route(w.drivers, w.riders, ret);
+            route(w.drivers, w.riders, ret, numWires);
             return ret;
             // at least one driver or rider and at least one lateral
         }
         else if (w.drivers.concat(w.riders).length > 0 && w.laterals.length > 0) {
             var ret = [];
-            route(w.drivers, w.laterals, ret);
-            route(w.laterals, w.riders, ret);
+            route(w.drivers, w.laterals, ret, numWires);
+            route(w.laterals, w.riders, ret, numWires);
             return ret;
             // at least two drivers and no riders
         }
@@ -114,22 +116,41 @@ function addDummy(children) {
     children.push(child);
     return dummyId;
 }
-function route(sourcePorts, targetPorts, edges) {
+function route(sourcePorts, targetPorts, edges, numWires) {
     var newEdges = (_.flatMap(sourcePorts, function (sourcePort) {
         var sourceParentKey = sourcePort.parentNode.key;
         var sourceKey = sourceParentKey + '.' + sourcePort.key;
+        var edgeLabel;
+        if (numWires > 1) {
+            edgeLabel = [{
+                    id: '',
+                    text: String(numWires),
+                    width: 4,
+                    height: 6,
+                    x: 0,
+                    y: 0,
+                    layoutOptions: {
+                        'org.eclipse.elk.edgeLabels.inline': true,
+                    },
+                }];
+        }
         return targetPorts.map(function (targetPort) {
             var targetParentKey = targetPort.parentNode.key;
             var targetKey = targetParentKey + '.' + targetPort.key;
             var id = 'e' + ElkModel.edgeIndex;
             var edge = {
                 id: id,
+                labels: edgeLabel,
                 sources: [sourceKey],
                 targets: [targetKey],
             };
             ElkModel.wireNameLookup[id] = targetPort.wire.netName;
             if (sourcePort.parentNode.type !== '$dff') {
-                edge.layoutOptions = { 'org.eclipse.elk.layered.priority.direction': 10 };
+                edge.layoutOptions = { 'org.eclipse.elk.layered.priority.direction': 10,
+                    'org.eclipse.elk.edge.thickness': (numWires > 1 ? 2 : 1) };
+            }
+            else {
+                edge.layoutOptions = { 'org.eclipse.elk.edge.thickness': (numWires > 1 ? 2 : 1) };
             }
             ElkModel.edgeIndex += 1;
             return edge;
diff --git a/built/index.js b/built/index.js
@@ -1,5 +1,6 @@
 'use strict';
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.render = exports.dumpLayout = void 0;
 var ELK = require("elkjs");
 var onml = require("onml");
 var FlatModule_1 = require("./FlatModule");
diff --git a/built/netlistsvg.bundle.js b/built/netlistsvg.bundle.js
diff --git a/lib/drawModule.ts b/lib/drawModule.ts
diff --git a/lib/elkGraph.ts b/lib/elkGraph.ts
