diff --git a/Layout.js b/Layout.js index 96fb746..3b097e9 100644 --- a/Layout.js +++ b/Layout.js @@ -51,11 +51,11 @@ class Layout { this.groups_ = []; for (let group of this.graph_.groups) { let nodes = this.nodesFromGraphNodes(group.nodes); - this.groups_.push(new LayoutGroup(nodes)); + this.groups_.push(new LayoutGroup(group, nodes)); } for (let subgraph of this.graph_.nodesBySubgraph.values()) { let nodes = this.nodesFromGraphNodes(subgraph); - this.groups_.push(new LayoutGroup(nodes)); + this.groups_.push(new LayoutGroup(null, nodes)); } } @@ -133,10 +133,11 @@ class Layout { fixOrigin() { let min = [Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER]; let max = [Number.MIN_SAFE_INTEGER, Number.MIN_SAFE_INTEGER]; - for (let node of this.nodes_) { + for (let group of this.groups_) { + let [groupMin, groupMax] = group.getMinMax(); for (let i of [0, 1]) { - min[i] = Math.min(min[i], node.pos[i]); - max[i] = Math.max(max[i], node.pos[i]); + min[i] = Math.min(min[i], groupMin[i]); + max[i] = Math.max(max[i], groupMax[i]); } } // Offset is negative minimum, e.g min -1 means +1 to all values @@ -164,11 +165,13 @@ class Layout { nodes.sort((a, b) => a.pos[i] - b.pos[i]); } for (let node of nodes) { - steps.push({ - type: 'node', - pos: node.pos, - label: node.graphNode.label, - }); + steps.push(node.getStep()); + } + for (let group of this.groups_) { + let step = group.getStep(); + if (step) { + steps.push(step); + } } return steps; diff --git a/LayoutGroup.js b/LayoutGroup.js index 8be8649..f82a0f9 100644 --- a/LayoutGroup.js +++ b/LayoutGroup.js @@ -1,5 +1,6 @@ class LayoutGroup { - constructor(nodes) { + constructor(graphGroup, nodes) { + this.graphGroup_ = graphGroup; this.nodes = new Set(nodes); this.tension = 0; } @@ -49,4 +50,34 @@ class LayoutGroup { } } } + + getMinMax() { + let min = [Number.MAX_SAFE_INTEGER, Number.MAX_SAFE_INTEGER]; + let max = [Number.MIN_SAFE_INTEGER, Number.MIN_SAFE_INTEGER]; + for (let node of this.nodes) { + for (let i of [0, 1]) { + min[i] = Math.min(min[i], node.pos[i]); + max[i] = Math.max(max[i], node.pos[i]); + } + } + if (this.graphGroup_ && this.graphGroup_.label) { + // Room for the label + --min[1]; + } + return [min, max]; + } + + getStep() { + if (!this.graphGroup_) { + return null; + } + + let [min, max] = this.getMinMax(); + return { + type: 'group', + min: min, + max: max, + label: this.graphGroup_.label, + }; + } } diff --git a/LayoutNode.js b/LayoutNode.js index 4500641..8340b92 100644 --- a/LayoutNode.js +++ b/LayoutNode.js @@ -1,6 +1,6 @@ class LayoutNode { constructor(graphNode, nodesByPos, pos) { - this.graphNode = graphNode; + this.graphNode_ = graphNode; this.nodesByPos_ = nodesByPos; this.pos = pos; @@ -9,7 +9,7 @@ class LayoutNode { resolveAffinity(nodesByGraphNode) { this.affinity_ = []; - for (let aff of this.graphNode.affinity) { + for (let aff of this.graphNode_.affinity) { this.affinity_.push({ node: nodesByGraphNode.get(aff.node), distanceToWeight: aff.distanceToWeight, @@ -65,4 +65,12 @@ class LayoutNode { restorePos() { this.moveTo(this.savedPos_); } + + getStep() { + return { + type: 'node', + pos: this.pos, + label: this.graphNode_.label, + }; + } } diff --git a/architype.css b/architype.css index 8a83d91..49d480e 100644 --- a/architype.css +++ b/architype.css @@ -133,7 +133,7 @@ body { justify-content: center; text-align: center; font-size: 20px; - word-break: break-all; + overflow-wrap: anywhere; border-radius: 10px; padding: 3px; @@ -154,11 +154,11 @@ body { justify-content: flex-start; text-align: center; font-size: 20px; - word-break: break-all; + overflow-wrap: anywhere; border-radius: 10px; margin-top: 20px; - padding: 3px; + padding: 5px; border: 1px dashed white; overflow: hidden;