feat(graph): support draggable for all graph layout ('none' | 'circul…

…ar' | 'force')

src/chart/graph/GraphView.ts

@@ -38,6 +38,7 @@ 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';
@@ -124,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;
@@ -133,20 +136,30 @@ class GraphView extends ChartView {
  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]);
- }
- // handle simple layout dragging
- if (!seriesModel.get('layout') || seriesModel.get('layout') === 'none') {
- data.setItemLayout(idx, [el.x, el.y]);
- // update edge
- simpleLayoutEdge(seriesModel.getGraph(), seriesModel);
- this.updateLayout(seriesModel);
+ 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':
+ // mark node fixed
+ node.setFixed(true);
+ data.setItemLayout(idx, [el.x, el.y]);
+ // recalculate circular layout
+ circularLayout(seriesModel, 'symbolSize', node);
+ 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) {
@@ -179,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/data/Graph.ts

@@ -333,6 +333,9 @@ class GraphNode {
  // Used in traverse of Graph
  __visited: boolean;
 
+ // NOTE: only use in circular layout
+ private _fixed: boolean = false;
+
  constructor(id?: string, dataIndex?: number) {
  this.id = id == null ? '' : id;
  this.dataIndex = dataIndex == null ? -1 : dataIndex;
@@ -387,6 +390,14 @@ class GraphNode {
  }
  return dataIndices;
  }
+
+ setFixed(fixed: boolean) {
+ this._fixed = fixed;
+ }
+
+ getFixed() {
+ return this._fixed;
+ }
 }