Merge pull request highcharts#22078 from highcharts/bugfix/packedbubb…

…le-drag-bugs

Bugfix/packedbubble-various-drag-bugs

samples/highcharts/demo/packed-bubble-project-status/demo.details

@@ -0,0 +1,11 @@
+---
+name: Packed bubble project status
+authors:
+  - Grzegorz Blachliński
+js_wrap: b
+tags:
+  - Highcharts demo
+  - Animation
+categories:
+  - Scatter and bubble charts
+...

samples/highcharts/series-packedbubble/packed-dashboard/demo.js → samples/highcharts/demo/packed-bubble-project-status/demo.js

@@ -18,12 +18,16 @@ Highcharts.chart('container', {
             minSize: '15%',
             maxSize: '50%',
             layoutAlgorithm: {
-                initialPositionRadius: 100,
+                maxSpeed: 2,
+                initialPositionRadius: 1,
                 splitSeries: true,
                 parentNodeLimit: true,
                 dragBetweenSeries: true,
+                friction: -0.9,
                 parentNodeOptions: {
-                    bubblePadding: 20
+                    maxSpeed: 1,
+                    bubblePadding: 20,
+                    initialPositionRadius: 120
                 }
             },
             dataLabels: {

samples/highcharts/demo/packed-bubble-project-status/demo.js~

@@ -0,0 +1,118 @@
+Highcharts.chart('container', {
+    chart: {
+        type: 'packedbubble',
+        height: '100%'
+    },
+    title: {
+        text: 'Team Dashboard'
+    },
+    subtitle: {
+        text: 'Currently planned work for team'
+    },
+    tooltip: {
+        useHTML: true,
+        pointFormat: '<b>{point.name}:</b> {point.value}'
+    },
+    plotOptions: {
+        packedbubble: {
+            minSize: '15%',
+            maxSize: '50%',
+            layoutAlgorithm: {
+                maxSpeed: 2,
+                initialPositionRadius: 1,
+                splitSeries: true,
+                parentNodeLimit: true,
+                dragBetweenSeries: true,
+                friction: -0.9,
+                parentNodeOptions: {
+                    maxSpeed: 1,
+                    bubblePadding: 20,
+                    initialPositionRadius: 120
+                }
+            },
+            dataLabels: {
+                enabled: true,
+                format: '{point.shortName}',
+                parentNodeFormat: '{point.series.name}',
+                style: {
+                    fontSize: '0.9em'
+                }
+            }
+        }
+    },
+    series: [{
+        name: 'Backlog',
+        color: 'rgba(0, 40, 130, 0.8)',
+        data: [{
+            name: 'Test web page performance',
+            shortName: 'Test page',
+            value: 5
+        }, {
+            name: 'Bike trip',
+            shortName: 'trip',
+            value: 1
+        },
+        {
+            name: 'Code-review meeting',
+            shortName: 'CR',
+            value: 4
+        },
+        {
+            name: 'Allow user to change nickname',
+            shortName: 'Nickname',
+            value: 2
+        }]
+    }, {
+        name: 'To Do',
+        color: 'rgba(200, 100, 100, 0.8)',
+        data: [{
+            name: 'Create newsletter template',
+            shortName: 'Newsletter',
+            value: 2
+        }, {
+            name: 'Produce financial raport for Q2',
+            shortName: 'Report',
+            value: 10
+        }, {
+            name: 'Meeting with sales team',
+            shortName: 'Meeting',
+            value: 10
+        }]
+    }, {
+        name: 'In Progress',
+        color: 'rgba(0,100,100, 0.8)',
+        data: [{
+            name: 'Develop an android App',
+            shortName: 'Development',
+            value: 9
+        }, {
+            name: 'Document the API',
+            shortName: 'API',
+            value: 7
+        }]
+    }, {
+        name: 'To Verify',
+        color: 'rgba(200, 100, 200, 0.8)',
+        data: [{
+            name: 'Develop an IOS App',
+            shortName: 'Development',
+            value: 9
+        }, {
+            name: 'Change default login page',
+            shortName: 'webpage',
+            value: 5
+        }]
+    }, {
+        name: 'Done',
+        color: 'rgba(70,220,50,0.8)',
+        data: [{
+            name: 'Strategy meeting with Management',
+            shortName: 'Meeting',
+            value: 5
+        }, {
+            name: 'Kanban Packed Bubble migration',
+            shortName: 'Migration',
+            value: 3
+        }]
+    }]
+});

ts/Series/DragNodesComposition.ts

@@ -113,14 +113,25 @@ function onChartLoad(
 
     let mousedownUnbinder: Function,
         mousemoveUnbinder: Function,
-        mouseupUnbinder: Function;
+        mouseupUnbinder: Function,
+        point: DragNodesPoint;
 
     if (chart.container) {
         mousedownUnbinder = addEvent(
             chart.container,
             'mousedown',
             (event: PointerEvent): void => {
-                const point = chart.hoverPoint;
+
+                if (mousemoveUnbinder) {
+                    mousemoveUnbinder();
+                }
+
+                if (mouseupUnbinder) {
+                    mouseupUnbinder();
+                }
+
+                point = chart.hoverPoint;
+
                 if (
                     point &&
                     point.series &&

ts/Series/PackedBubble/PackedBubbleIntegration.ts

@@ -35,31 +35,56 @@ import VerletIntegration from '../Networkgraph/VerletIntegration.js';
  */
 function barycenter(this: PackedBubbleLayout): void {
     const layout = this,
-        gravitationalConstant = layout.options.gravitationalConstant,
+        gravitationalConstant = layout.options.gravitationalConstant || 0,
         box = layout.box,
-        nodes = layout.nodes as Array<PackedBubblePoint>;
+        nodes = layout.nodes as Array<PackedBubblePoint>,
+        nodeCountSqrt = Math.sqrt(nodes.length);
 
     let centerX: number,
         centerY: number;
 
     for (const node of nodes) {
-        if (layout.options.splitSeries && !node.isParentNode) {
-            centerX = (node.series.parentNode as any).plotX;
-            centerY = (node.series.parentNode as any).plotY;
-        } else {
-            centerX = box.width / 2;
-            centerY = box.height / 2;
-        }
+
         if (!node.fixedPosition) {
-            (node.plotX as any) -=
-                ((node.plotX as any) - (centerX as any)) *
-                (gravitationalConstant as any) /
-                (node.mass * Math.sqrt(nodes.length));
-
-            (node.plotY as any) -=
-                ((node.plotY as any) - (centerY as any)) *
-                (gravitationalConstant as any) /
-                (node.mass * Math.sqrt(nodes.length));
+            const massTimesNodeCountSqrt = node.mass * nodeCountSqrt,
+                plotX = node.plotX || 0,
+                plotY = node.plotY || 0,
+                series = node.series,
+                parentNode = series.parentNode;
+
+            if (
+                layout.options.splitSeries &&
+                parentNode &&
+                !node.isParentNode
+            ) {
+                centerX = parentNode.plotX || 0;
+                centerY = parentNode.plotY || 0;
+            } else {
+                centerX = box.width / 2;
+                centerY = box.height / 2;
+            }
+
+            node.plotX = plotX - (
+                (plotX - centerX) *
+                gravitationalConstant /
+                massTimesNodeCountSqrt
+            );
+
+            node.plotY = plotY - (
+                (plotY - centerY) *
+                gravitationalConstant /
+                massTimesNodeCountSqrt
+            );
+
+            if (
+                series.chart.hoverPoint === node &&
+
+                // If redrawHalo exists we know its a draggable series and any
+                // halo present should be redrawn to update its visual position
+                series.redrawHalo && series.halo
+            ) {
+                series.redrawHalo(node);
+            }
         }
     }
 }

ts/Series/PackedBubble/PackedBubbleLayout.ts

@@ -327,7 +327,7 @@ namespace PackedBubbleLayout {
          * In case of split series, this option allows user to drag and
          * drop points between series, for changing point related series.
          *
-         * @sample highcharts/series-packedbubble/packed-dashboard/
+         * @sample highcharts/demo/packed-bubble-project-status/
          *         Example of drag'n drop bubbles for bubble kanban
          */
         dragBetweenSeries?: boolean;

ts/Series/PackedBubble/PackedBubbleSeries.ts

@@ -708,7 +708,11 @@ class PackedBubbleSeries extends BubbleSeries {
             let distanceXY,
                 distanceR;
 
-            if (parentNodeLayout && layout.options.dragBetweenSeries) {
+            if (
+                !point.isParentNode &&
+                parentNodeLayout &&
+                layout.options.dragBetweenSeries
+            ) {
                 parentNodeLayout.nodes.forEach((node): void => {
                     if (
                         point && point.marker &&

ts/Series/PackedBubble/PackedBubbleSeriesDefaults.ts

@@ -174,7 +174,7 @@ const PackedBubbleSeriesDefaults: PackedBubbleSeriesOptions = {
         },
 
         /**
-         * @sample {highcharts} highcharts/series-packedbubble/packed-dashboard
+         * @sample {highcharts} highcharts/demo/packed-bubble-project-status/
          *         Dashboard with dataLabels on parentNodes
          *
          * @declare Highcharts.SeriesPackedBubbleDataLabelsTextPathOptionsObject
@@ -269,7 +269,7 @@ const PackedBubbleSeriesDefaults: PackedBubbleSeriesOptions = {
          * In case of split series, this option allows user to drag and
          * drop points between series, for changing point related series.
          *
-         * @sample highcharts/series-packedbubble/packed-dashboard/
+         * @sample highcharts/demo/packed-bubble-project-status/
          *         Example of drag'n drop bubbles for bubble kanban
          */
         dragBetweenSeries: false,
@@ -345,7 +345,8 @@ const PackedBubbleSeriesDefaults: PackedBubbleSeriesOptions = {
         maxSpeed: 5,
         gravitationalConstant: 0.01,
         friction: -0.981
-    }
+    },
+    stickyTracking: false
 };
 
 /* *

ts/Series/PackedBubble/PackedBubbleSeriesOptions.d.ts

@@ -204,7 +204,7 @@ export interface PackedBubbleSeriesOptions
     sizeBy?: BubbleSizeByValue;
 
     states?: SeriesStatesOptions<PackedBubbleSeries>;
-
+    stickyTracking: false;
     tooltip?: Partial<TooltipOptions>;
 
     /**