Fixed #11632, networkgraph nodes cut off.

highcharts · Aug 8, 2019 · 8c8180c · 8c8180c
1 parent d276323
commit 8c8180c
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 3 deletions.
diff --git a/js/modules/networkgraph/layouts.js b/js/modules/networkgraph/layouts.js
@@ -377,7 +377,7 @@ H.layouts['reingold-fruchterman'].prototype, {
      * @private
      */
     applyLimitBox: function (node, box) {
-        var radius = node.marker && node.marker.radius || 0;
+        var radius = node.radius;
         /*
         TO DO: Consider elastic collision instead of stopping.
         o' means end position when hitting plotting area edge:

diff --git a/js/modules/networkgraph/networkgraph.src.js b/js/modules/networkgraph/networkgraph.src.js
@@ -485,6 +485,7 @@ seriesType('networkgraph', 'line',
         for (i = this.nodes.length - 1; i >= 0; i--) {
             node = this.nodes[i];
             node.degree = node.getDegree();
+            node.radius = pick(node.marker && node.marker.radius, this.options.marker && this.options.marker.radius, 0);
             // If node exists, but it's not available in nodeLookup,
             // then it's leftover from previous runs (e.g. setData)
             if (!this.nodeLookup[node.id]) {

diff --git a/samples/unit-tests/series-networkgraph/networkgraph/demo.js b/samples/unit-tests/series-networkgraph/networkgraph/demo.js
@@ -196,3 +196,58 @@ QUnit.test('Network Graph', function (assert) {
         'Clearing nodes and links in `series.update()` should not throw errors (#11176)'
     );
 });
+
+QUnit.test('Markers', function (assert) {
+    const chart = Highcharts.chart('container', {
+        chart: {
+            margin: [0, 0, 0, 0]
+        },
+        plotOptions: {
+            networkgraph: {
+                layoutAlgorithm: {
+                    gravitationalConstant: 0,
+                    integration: 'verlet'
+                },
+                marker: {
+                    radius: 50
+                }
+            }
+        },
+        title: {
+            text: null
+        },
+        series: [{
+            type: 'networkgraph',
+            keys: ['from', 'to'],
+            data: [
+                [1, 1],
+                [2, 2],
+                [3, 4],
+                [2, 3],
+                [4, 5]
+            ]
+        }]
+    });
+
+    chart.series[0].nodes.forEach(node => {
+        assert.ok(
+            node.plotY - node.radius >= 0,
+            `Node: ${node.id} should be within the plotting area - top edge (#11632).`
+        );
+
+        assert.ok(
+            node.plotX + node.radius <= chart.plotWidth,
+            `Node: ${node.id} should be within the plotting area - right edge (#11632).`
+        );
+
+        assert.ok(
+            node.plotY + node.radius <= chart.plotHeight,
+            `Node: ${node.id} should be within the plotting area - bottom edge (#11632).`
+        );
+
+        assert.ok(
+            node.plotX - node.radius >= 0,
+            `Node: ${node.id} should be within the plotting area - left edge (#11632).`
+        );
+    });
+});
diff --git a/ts/modules/networkgraph/layouts.ts b/ts/modules/networkgraph/layouts.ts
@@ -736,10 +736,10 @@ H.extend(
          */
         applyLimitBox: function (
             this: Highcharts.NetworkgraphLayout,
-            node: Highcharts.Point,
+            node: Highcharts.NetworkgraphPoint,
             box: Highcharts.Dictionary<number>
         ): void {
-            var radius = node.marker && node.marker.radius || 0;
+            var radius = node.radius;
             /*
             TO DO: Consider elastic collision instead of stopping.
             o' means end position when hitting plotting area edge:

diff --git a/ts/modules/networkgraph/networkgraph.src.ts b/ts/modules/networkgraph/networkgraph.src.ts
@@ -111,6 +111,7 @@ declare global {
             public mass: NodesPoint['mass'];
             public offset: NodesPoint['offset'];
             public options: NetworkgraphPointOptions;
+            public radius: number;
             public series: NetworkgraphSeries;
             public setNodeState: NodesMixin['setNodeState'];
             public to: NodesPoint['to'];
@@ -708,6 +709,11 @@ seriesType<Highcharts.NetworkgraphSeriesOptions>(
                 node = this.nodes[i];
 
                 node.degree = node.getDegree();
+                node.radius = pick(
+                    node.marker && node.marker.radius,
+                    this.options.marker && this.options.marker.radius,
+                    0
+                );
 
                 // If node exists, but it's not available in nodeLookup,
                 // then it's leftover from previous runs (e.g. setData)