@yarkivaev/scada 2.3.64 → 2.3.65

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yarkivaev/scada",
-  "version": "2.3.64",
+  "version": "2.3.65",
   "description": "SCADA domain objects, state persistence, and plant monitoring",
   "repository": {
     "type": "git",

package/src/infrastructure/http/plant/routes/infraRoute.js

@@ -43,6 +43,9 @@ export default function infraRoute() {
         route('GET', '/infra/graph.js', (req, res) => {
             sendFile(res, 'infra/graph.js', 'text/javascript; charset=utf-8');
         }),
+        route('GET', '/infra/graphLayout.js', (req, res) => {
+            sendFile(res, 'infra/graphLayout.js', 'text/javascript; charset=utf-8');
+        }),
         route('GET', '/infra/panel.js', (req, res) => {
             sendFile(res, 'infra/panel.js', 'text/javascript; charset=utf-8');
         })

package/src/infrastructure/http/plant/ui/infra/graph.js

@@ -1,3 +1,5 @@
+import positions from './graphLayout.js';
+
 const SVG = 'http://www.w3.org/2000/svg';
 
 function shops(nodes) {
@@ -6,31 +8,11 @@ function shops(nodes) {
     });
 }
 
-function children(nodes, parentId, kind) {
-    return nodes.filter((node) => {
-        return node.parent === parentId && node.kind === kind;
-    });
-}
-
-function placed(graph) {
-    const positions = {};
-    shops(graph.nodes).forEach((area, i) => {
-        const x = 170 + i * 280;
-        positions[area.id] = { x, y: 56 };
-        children(graph.nodes, area.id, 'machine').forEach((item, j) => {
-            const y = 150 + j * 96;
-            positions[item.id] = { x, y };
-            children(graph.nodes, item.id, 'collector').forEach((col, k) => {
-                positions[col.id] = { x: x + 96, y: y + k * 26 };
-            });
-        });
-    });
-    graph.nodes.filter((node) => {
-        return node.kind === 'collector' && !positions[node.id];
-    }).forEach((node, i) => {
-        positions[node.id] = { x: 72, y: 88 + i * 54 };
+function floor(placed) {
+    const ys = Object.values(placed).map((item) => {
+        return item.y + 80;
     });
-    return positions;
+    return Math.max(520, ...ys);
 }
 
 function el(name, attrs) {
@@ -41,10 +23,10 @@ function el(name, attrs) {
     return node;
 }
 
-function paintLink(svg, graph, positions) {
+function paintLink(svg, graph, laid) {
     graph.links.forEach((link) => {
-        const from = positions[link.from];
-        const to = positions[link.to];
+        const from = laid[link.from];
+        const to = laid[link.to];
         if (!from || !to) {
             return;
         }
@@ -95,12 +77,12 @@ export default function draw(svg, graph, onClick) {
         svg.removeChild(svg.firstChild);
     }
     const columns = Math.max(shops(graph.nodes).length, 1);
-    svg.setAttribute('viewBox', `0 0 ${Math.max(960, columns * 280 + 120)} 520`);
-    const positions = placed(graph);
-    paintLink(svg, graph, positions);
+    const laid = positions(graph);
+    svg.setAttribute('viewBox', `0 0 ${Math.max(960, columns * 280 + 120)} ${floor(laid)}`);
+    paintLink(svg, graph, laid);
     graph.nodes.forEach((node) => {
-        if (positions[node.id]) {
-            paintNode(svg, node, positions[node.id], onClick);
+        if (laid[node.id]) {
+            paintNode(svg, node, laid[node.id], onClick);
         }
     });
 }

package/src/infrastructure/http/plant/ui/infra/graphLayout.js

@@ -0,0 +1,68 @@
+function shops(nodes) {
+    return nodes.filter((node) => {
+        return node.kind === 'shop';
+    });
+}
+
+function children(nodes, parentId, kind) {
+    return nodes.filter((node) => {
+        return node.parent === parentId && node.kind === kind;
+    });
+}
+
+function nest(nodes, item, x, y, placed) {
+    children(nodes, item.id, 'collector').forEach((col, k) => {
+        placed[col.id] = { x: x + 96, y: y + k * 26 };
+    });
+}
+
+function machines(nodes, area, x, base, placed) {
+    children(nodes, area.id, 'machine').forEach((item, j) => {
+        const y = base + j * 96;
+        placed[item.id] = { x, y };
+        nest(nodes, item, x, y, placed);
+    });
+}
+
+function extras(nodes, area, x, placed) {
+    const items = children(nodes, area.id, 'collector');
+    items.forEach((col, k) => {
+        placed[col.id] = { x, y: 108 + k * 28 };
+    });
+    return items.length;
+}
+
+function column(area, index, nodes, placed) {
+    const x = 170 + index * 280;
+    placed[area.id] = { x, y: 56 };
+    const count = extras(nodes, area, x, placed);
+    const base = count === 0 ? 150 : 108 + count * 28 + 50;
+    machines(nodes, area, x, base, placed);
+}
+
+function leftovers(nodes, placed) {
+    nodes.filter((node) => {
+        return node.kind === 'collector' && !placed[node.id];
+    }).forEach((node, i) => {
+        placed[node.id] = { x: 72, y: 88 + i * 54 };
+    });
+}
+
+/**
+ * Column positions for topology nodes by parent and kind.
+ *
+ * @param {object} graph - topology contract { nodes }
+ * @returns {object} id -> { x, y }
+ *
+ * @example
+ *   positions({ nodes: [{ id: 'area-1', kind: 'shop' }] })['area-1'].x === 170;
+ */
+export default function positions(graph) {
+    const nodes = graph.nodes || [];
+    const placed = {};
+    shops(nodes).forEach((area, i) => {
+        column(area, i, nodes, placed);
+    });
+    leftovers(nodes, placed);
+    return placed;
+}