Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 15 commits into from
Feb 28, 2022
Merged

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

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
23ae97b
feat(graph): simple layout graph support dragging
kongmoumou Jul 29, 2021
78b2475
test(graph): add simple graph draggable test case
kongmoumou Jul 29, 2021
1d962f6
feat(graph): update circular layout helper function
kongmoumou Jul 31, 2021
ae38c73
feat(graph): support draggable for all graph layout ('none' | 'circul…
kongmoumou Jul 31, 2021
ebae264
test(graph): add graph draggable test case
kongmoumou Jul 31, 2021
8144dcc
Revert "test(graph): add simple graph draggable test case"
kongmoumou Jul 31, 2021
5f8f0c6
fix(graph): node el check for circular layout
kongmoumou Aug 5, 2021
db01e51
fix(graph): remove GraphNode `_fixed` field
kongmoumou Aug 6, 2021
2b1595d
fix(graph): use zrender/vector calculate node layout
kongmoumou Aug 6, 2021
7891815
Merge remote-tracking branch 'upstream/next' into feat-simple-graph-d…
kongmoumou Sep 5, 2021
472e72b
fix: not trigger roam on el's child
kongmoumou Sep 28, 2021
657f379
fix: fix code
kongmoumou Sep 29, 2021
aeb66aa
fix: remove useless code
kongmoumou Sep 29, 2021
45a1ebd
fix: store fixed state in layout object
kongmoumou Sep 29, 2021
155364a
fix: use mouse position calculate circular layout
kongmoumou Sep 29, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 32 additions & 39 deletions src/chart/graph/GraphView.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,9 @@ import List from '../../data/List';
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';
}
Expand Down Expand Up @@ -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;
Expand All @@ -131,21 +136,38 @@ 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]);
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) {
forceLayout.setUnfixed(idx);
}
});
}
el.setDraggable(draggable && !!forceLayout);
el.setDraggable(draggable);

const focus = itemModel.get(['emphasis', 'focus']);

Expand All @@ -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;
Expand Down
69 changes: 65 additions & 4 deletions src/chart/graph/circularLayoutHelper.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 List from '../../data/List';
import * as zrUtil from 'zrender/src/core/util';
import {getCurvenessForEdge} from '../helper/multipleGraphEdgeHelper';
Expand Down Expand Up @@ -51,7 +52,8 @@ const _symbolRadiansHalf: number[] = [];
*/
export function circularLayout(
seriesModel: GraphSeriesModel,
basedOn: 'value' | 'symbolSize'
basedOn: 'value' | 'symbolSize',
draggingNode?: GraphNode
) {
const coordSys = seriesModel.coordinateSystem;
if (coordSys && coordSys.type !== 'view') {
Expand All @@ -77,6 +79,25 @@ export function circularLayout(
return;
}

if (draggingNode) {
const [tempX, tempY] = draggingNode.getLayout();
const tan = (tempY - cy) / (tempX - cx);
const radian = -Math.atan(tan);

tempX > cx
kongmoumou marked this conversation as resolved.
Show resolved Hide resolved
? draggingNode.setLayout([
r * Math.cos(radian) + cx,
r * -Math.sin(radian) + cy
]) : draggingNode.setLayout([
r * -Math.cos(radian) + cx,
r * Math.sin(radian) + cy
]);

const circularRotateLabel = seriesModel.get('layout') === 'circular'
kongmoumou marked this conversation as resolved.
Show resolved Hide resolved
&& seriesModel.get(['circular', 'rotateLabel']);
rotateNodeLabel(draggingNode, circularRotateLabel, cx, cy);
}

_layoutNodesBasedOn[basedOn](seriesModel, graph, nodeData, r, cx, cy, count);

graph.eachEdge(function (edge, index) {
Expand Down Expand Up @@ -163,11 +184,51 @@ const _layoutNodesBasedOn: Record<'value' | 'symbolSize', LayoutNode> = {
const radianHalf = halfRemainRadian + _symbolRadiansHalf[node.dataIndex];

angle += radianHalf;
node.setLayout([
// auto circular layout for not dragged node
!node.getFixed() && node.setLayout([
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For the circularLayout, perhaps using

node !== draggingNode

Can also do the same?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Only automatically set circular layout for the node not dragged yet, so should check node's fixed state, not only the dragging node. 😂

r * Math.cos(angle) + cx,
r * Math.sin(angle) + cy
]);
angle += radianHalf;
});
}
};

export function rotateNodeLabel(
node: GraphNode,
circularRotateLabel: boolean,
cx: number,
cy: number
) {
const nodeModel = node.getModel<GraphNodeItemOption>();
const el = node.getGraphicEl() as Symbol;
kongmoumou marked this conversation as resolved.
Show resolved Hide resolved
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 {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This logic do not only related to 'circular layout'. All other layout use it.
Should we put this logic in file circularLayoutHelper.ts?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Or maybe graphHelper.ts ?

symbolPath.setTextConfig({
rotation: labelRotate *= Math.PI / 180
});
}
}
11 changes: 11 additions & 0 deletions src/data/Graph.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -333,6 +333,9 @@ class GraphNode {
// Used in traverse of Graph
__visited: boolean;

// NOTE: only use in circular layout
private _fixed: boolean = false;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think there is a better place to store the fixed status rather than the very basic graph structure. In fact, series-graph.node has fixed option. But currently it's only for force layout.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Currently store in the fixed option of nodeModel


constructor(id?: string, dataIndex?: number) {
this.id = id == null ? '' : id;
this.dataIndex = dataIndex == null ? -1 : dataIndex;
Expand Down Expand Up @@ -387,6 +390,14 @@ class GraphNode {
}
return dataIndices;
}

setFixed(fixed: boolean) {
this._fixed = fixed;
}

getFixed() {
return this._fixed;
}
}


Expand Down
Loading