feat(graph): make graph node draggable in none and circular layout

src/chart/graph/GraphView.ts

@@ -37,6 +37,9 @@ import SeriesData from '../../data/SeriesData';
 import Line from '../helper/Line';
 import { getECData } from '../../util/innerStore';
 
+import { simpleLayoutEdge } from './simpleLayoutHelper';
+import { circularLayout, rotateNodeLabel } from './circularLayoutHelper';
+
 function isViewCoordSys(coordSys: CoordinateSystem): coordSys is View {
     return coordSys.type === 'view';
 }
@@ -122,6 +125,8 @@ class GraphView extends ChartView {
             this._startForceLayoutIteration(forceLayout, layoutAnimation);
         }
 
+        const layout = seriesModel.get('layout');
+
         data.graph.eachNode((node) => {
             const idx = node.dataIndex;
             const el = node.getGraphicEl() as Symbol;
@@ -130,22 +135,39 @@ class GraphView extends ChartView {
             el.off('drag').off('dragend');
             const draggable = itemModel.get('draggable');
             if (draggable) {
-                el.on('drag', () => {
-                    if (forceLayout) {
-                        forceLayout.warmUp();
-                        !this._layouting
-                            && this._startForceLayoutIteration(forceLayout, layoutAnimation);
-                        forceLayout.setFixed(idx);
-                        // Write position back to layout
-                        data.setItemLayout(idx, [el.x, el.y]);
+                el.on('drag', (e) => {
+                    switch (layout) {
+                        case 'force':
+                            forceLayout.warmUp();
+                            !this._layouting
+                                && this._startForceLayoutIteration(forceLayout, layoutAnimation);
+                            forceLayout.setFixed(idx);
+                            // Write position back to layout
+                            data.setItemLayout(idx, [el.x, el.y]);
+                            break;
+                        case 'circular':
+                            data.setItemLayout(idx, [el.x, el.y]);
+                            // mark node fixed
+                            node.setLayout({ fixed: true }, true);
+                            // recalculate circular layout
+                            circularLayout(seriesModel, 'symbolSize', node, [e.offsetX, e.offsetY]);
+                            this.updateLayout(seriesModel);
+                            break;
+                        case 'none':
+                        default:
+                            data.setItemLayout(idx, [el.x, el.y]);
+                            // update edge
+                            simpleLayoutEdge(seriesModel.getGraph(), seriesModel);
+                            this.updateLayout(seriesModel);
+                            break;
                     }
                 }).on('dragend', () => {
                     if (forceLayout) {
                         forceLayout.setUnfixed(idx);
                     }
                 });
             }
-            el.setDraggable(draggable && !!forceLayout);
+            el.setDraggable(draggable);
 
             const focus = itemModel.get(['emphasis', 'focus']);
 
@@ -170,37 +192,8 @@ class GraphView extends ChartView {
             && seriesModel.get(['circular', 'rotateLabel']);
         const cx = data.getLayout('cx');
         const cy = data.getLayout('cy');
-        data.eachItemGraphicEl(function (el: Symbol, idx) {
-            const itemModel = data.getItemModel<GraphNodeItemOption>(idx);
-            let labelRotate = itemModel.get(['label', 'rotate']) || 0;
-            const symbolPath = el.getSymbolPath();
-            if (circularRotateLabel) {
-                const pos = data.getItemLayout(idx);
-                let rad = Math.atan2(pos[1] - cy, pos[0] - cx);
-                if (rad < 0) {
-                    rad = Math.PI * 2 + rad;
-                }
-                const isLeft = pos[0] < cx;
-                if (isLeft) {
-                    rad = rad - Math.PI;
-                }
-                const textPosition = isLeft ? 'left' as const : 'right' as const;
-
-                symbolPath.setTextConfig({
-                    rotation: -rad,
-                    position: textPosition,
-                    origin: 'center'
-                });
-                const emphasisState = symbolPath.ensureState('emphasis');
-                zrUtil.extend(emphasisState.textConfig || (emphasisState.textConfig = {}), {
-                    position: textPosition
-                });
-            }
-            else {
-                symbolPath.setTextConfig({
-                    rotation: labelRotate *= Math.PI / 180
-                });
-            }
+        data.graph.eachNode((node) => {
+            rotateNodeLabel(node, circularRotateLabel, cx, cy);
         });
 
         this._firstRender = false;

src/chart/graph/circularLayoutHelper.ts

@@ -20,8 +20,9 @@
 
 import * as vec2 from 'zrender/src/core/vector';
 import {getSymbolSize, getNodeGlobalScale} from './graphHelper';
-import GraphSeriesModel, { GraphEdgeItemOption } from './GraphSeries';
-import Graph from '../../data/Graph';
+import GraphSeriesModel, { GraphEdgeItemOption, GraphNodeItemOption } from './GraphSeries';
+import Graph, { GraphNode } from '../../data/Graph';
+import Symbol from '../helper/Symbol';
 import SeriesData from '../../data/SeriesData';
 import * as zrUtil from 'zrender/src/core/util';
 import {getCurvenessForEdge} from '../helper/multipleGraphEdgeHelper';
@@ -51,7 +52,9 @@ const _symbolRadiansHalf: number[] = [];
  */
 export function circularLayout(
     seriesModel: GraphSeriesModel,
-    basedOn: 'value' | 'symbolSize'
+    basedOn: 'value' | 'symbolSize',
+    draggingNode?: GraphNode,
+    pointer?: [number, number]
 ) {
     const coordSys = seriesModel.coordinateSystem;
     if (coordSys && coordSys.type !== 'view') {
@@ -77,6 +80,17 @@ export function circularLayout(
         return;
     }
 
+    if (draggingNode) {
+        const [tempX, tempY] = coordSys.pointToData(pointer) as [number, number];
+        const v = [tempX - cx, tempY - cy];
+        vec2.normalize(v, v);
+        vec2.scale(v, v, r);
+        draggingNode.setLayout([cx + v[0], cy + v[1]], true);
+
+        const circularRotateLabel = seriesModel.get(['circular', 'rotateLabel']);
+        rotateNodeLabel(draggingNode, circularRotateLabel, cx, cy);
+    }
+
     _layoutNodesBasedOn[basedOn](seriesModel, graph, nodeData, r, cx, cy, count);
 
     graph.eachEdge(function (edge, index) {
@@ -163,11 +177,58 @@ const _layoutNodesBasedOn: Record<'value' | 'symbolSize', LayoutNode> = {
             const radianHalf = halfRemainRadian + _symbolRadiansHalf[node.dataIndex];
 
             angle += radianHalf;
-            node.setLayout([
+            // init circular layout for
+            // 1. layout undefined node
+            // 2. not fixed node
+            (!node.getLayout() || !node.getLayout().fixed)
+            && node.setLayout([
                 r * Math.cos(angle) + cx,
                 r * Math.sin(angle) + cy
             ]);
             angle += radianHalf;
         });
     }
 };
+
+export function rotateNodeLabel(
+    node: GraphNode,
+    circularRotateLabel: boolean,
+    cx: number,
+    cy: number
+) {
+    const el = node.getGraphicEl() as Symbol;
+    // need to check if el exists. '-' value may not create node element.
+    if (!el) {
+        return;
+    }
+    const nodeModel = node.getModel<GraphNodeItemOption>();
+    let labelRotate = nodeModel.get(['label', 'rotate']) || 0;
+    const symbolPath = el.getSymbolPath();
+    if (circularRotateLabel) {
+        const pos = node.getLayout();
+        let rad = Math.atan2(pos[1] - cy, pos[0] - cx);
+        if (rad < 0) {
+            rad = Math.PI * 2 + rad;
+        }
+        const isLeft = pos[0] < cx;
+        if (isLeft) {
+            rad = rad - Math.PI;
+        }
+        const textPosition = isLeft ? 'left' as const : 'right' as const;
+
+        symbolPath.setTextConfig({
+            rotation: -rad,
+            position: textPosition,
+            origin: 'center'
+        });
+        const emphasisState = symbolPath.ensureState('emphasis');
+        zrUtil.extend(emphasisState.textConfig || (emphasisState.textConfig = {}), {
+            position: textPosition
+        });
+    }
+    else {
+        symbolPath.setTextConfig({
+            rotation: labelRotate *= Math.PI / 180
+        });
+    }
+}

src/component/helper/RoamController.ts

@@ -173,12 +173,19 @@ class RoamController extends Eventful<{
     }
 
     private _mousedownHandler(e: ZRElementEvent) {
-        if (eventTool.isMiddleOrRightButtonOnMouseUpDown(e)
-            || (e.target && e.target.draggable)
-        ) {
+        if (eventTool.isMiddleOrRightButtonOnMouseUpDown(e)) {
             return;
         }
 
+        let el = e.target;
+        while (el) {
+            if (el.draggable) {
+                return;
+            }
+            // check if host is draggable
+            el = el.__hostTarget || el.parent;
+        }
+
         const x = e.offsetX;
         const y = e.offsetY;