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

kongmoumou · 2021-07-29T07:02:12Z

Brief Information

This pull request is in the type of:

bug fixing
new feature
others

What does this PR do?

make graph node draggable when layout: 'none' and layout: 'circular'

Fixed issues

Allow nodes to be draggable when layout is set to none, or keep nodes fixed when dragged in force-layout graph #14510

Details

Before: What was the problem?

Currently, draggable only work in layout: 'force'

After: How is it fixed in this PR?

set node draggable
update node layout, then recalculate edge layout
update the graph

Misc

The API has been changed (docs: update graph draggable option echarts-doc#197).
This PR depends on ZRender changes (fix(draggable): draggable not working on Element's textContent ecomfe/zrender#834).

Related test cases or examples to use the new APIs

test/graph-draggable.html

Others

Merging options

Please squash the commits into a single one when merge.

Other information

echarts-bot · 2021-07-29T07:02:14Z

Thanks for your contribution!
The community will review it ASAP. In the meanwhile, please checkout the coding standard and Wiki about How to make a pull request.

…ar' | 'force')

This reverts commit 78b2475.

src/chart/graph/circularLayoutHelper.ts

pissang · 2021-08-06T05:13:19Z

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;


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.

Currently store in the fixed option of nodeModel

pissang · 2021-08-06T05:16:06Z

src/chart/graph/circularLayoutHelper.ts

@@ -163,11 +184,55 @@ 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([


For the circularLayout, perhaps using

node !== draggingNode

Can also do the same?

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

100pah · 2021-09-29T07:17:15Z

@kongmoumou

Now I use the mouse position to calculate node layout, it may have better ux

I have a try:

Old:
https://echarts-try.surge.sh/graph-draggable-old/graph-draggable.html

New:
https://echarts-try.surge.sh/graph-draggable/graph-draggable.html

I think the "New" one is better. But what's your opinion about it?

kongmoumou · 2021-09-29T07:19:48Z

@kongmoumou

Now I use the mouse position to calculate node layout, it may have better ux

I have a try:

Old: https://echarts-try.surge.sh/graph-draggable-old/graph-draggable.html

New: https://echarts-try.surge.sh/graph-draggable/graph-draggable.html

I think the "New" one is better. But what's your point about it?

I agree with u 😂, the "new" one is more controllable.

100pah · 2021-09-29T07:22:37Z

In the demo above I just do something like:

and

            const pointerVec = [draggingPointer[0] - cx, draggingPointer[1] - cy];
            pointerRad = Math.atan2(pointerVec[1], pointerVec[0]);
            const layout = [cx + r * Math.cos(pointerRad), cy + r * Math.sin(pointerRad)];
            draggingNode.setLayout(layout);

kongmoumou · 2021-09-29T07:34:09Z

In the demo above I just do something like:

and

            const pointerVec = [draggingPointer[0] - cx, draggingPointer[1] - cy];
            pointerRad = Math.atan2(pointerVec[1], pointerVec[0]);
            const layout = [cx + r * Math.cos(pointerRad), cy + r * Math.sin(pointerRad)];
            draggingNode.setLayout(layout);

Thx~ I use the same approach, u could review the latest code. 😂

alexresolute · 2022-02-01T17:52:53Z

Hi, has there been any update on this? Dragging nodes without force mode enabled would be a very helpful feature!

apitts · 2022-02-22T07:28:31Z

This is also an essential feature for me. If I can help in any way with this pull request please let me know!

100pah

LGTM

echarts-bot · 2022-02-28T04:14:29Z

Congratulations! Your PR has been merged. Thanks for your contribution! 👍

jayarjo · 2022-03-14T09:57:01Z

@pissang @kongmoumou how one is supposed to grab the new coordinates of the node, after it was dragged? I checked the source and I see that pre-defined event handlers for drag and dragend are forcefully wiped off.

We need to grab new coordinates and sync them with the backend.

kongmoumou · 2022-03-22T05:03:01Z

Maybe try this 😂 @jayarjo

echarts.getInstanceByDom($0)._chartsViews[0]._model.getData().getItemLayout(0) // dragged node index

kongmoumou · 2022-09-26T07:54:33Z

Hi @Ovilia , is there any plan when to release this feature~😂

plainheart · 2022-11-11T09:28:36Z

@kongmoumou Thanks for your work! But we are sorry this feature was not mentioned in the release note of v5.4.0 and it can't work due to some unexpected reason. I've listed this feature in v5.4.1.

…#15428, apache/echarts#17792)

kongmoumou · 2022-11-16T06:52:00Z

Thx a lot 🎉~

kongmoumou added 2 commits July 29, 2021 14:41

feat(graph): simple layout graph support dragging

23ae97b

test(graph): add simple graph draggable test case

78b2475

pull-request-size bot added the size/S label Jul 29, 2021

echarts-bot bot added PR: awaiting review PR: first-time contributor labels Jul 29, 2021

Ovilia self-requested a review July 29, 2021 07:04

kongmoumou added 4 commits August 1, 2021 00:25

feat(graph): update circular layout helper function

1d962f6

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

ae38c73

…ar' | 'force')

test(graph): add graph draggable test case

ebae264

Revert "test(graph): add simple graph draggable test case"

8144dcc

This reverts commit 78b2475.

pull-request-size bot added size/L and removed size/S labels Jul 31, 2021

pissang requested changes Aug 5, 2021

View reviewed changes

src/chart/graph/circularLayoutHelper.ts Show resolved Hide resolved

echarts-bot bot added PR: revision needed and removed PR: awaiting review labels Aug 5, 2021

fix(graph): node el check for circular layout

5f8f0c6

echarts-bot bot added PR: awaiting review and removed PR: revision needed labels Aug 5, 2021

pissang requested changes Aug 6, 2021

View reviewed changes

echarts-bot bot added PR: revision needed and removed PR: awaiting review labels Aug 6, 2021

pissang modified the milestones: 5.2, 5.3 Aug 6, 2021

kongmoumou added 2 commits August 6, 2021 15:38

fix(graph): remove GraphNode _fixed field

db01e51

fix(graph): use zrender/vector calculate node layout

2b1595d

echarts-bot bot added PR: awaiting review and removed PR: revision needed labels Aug 6, 2021

kongmoumou requested a review from pissang August 6, 2021 11:47

kongmoumou requested a review from 100pah September 29, 2021 07:34

pissang modified the milestones: 5.3, 5.4 Feb 21, 2022

100pah approved these changes Feb 28, 2022

View reviewed changes

pissang approved these changes Feb 28, 2022

View reviewed changes

100pah merged commit ff68ced into apache:next Feb 28, 2022

echarts-bot bot removed the PR: revision needed label Feb 28, 2022

Ovilia added the PR: doc ready label Jun 13, 2022

Ovilia removed this from the 5.4 milestone Sep 1, 2022

Ovilia added this to the 5.4.0 milestone Oct 19, 2022

kongmoumou mentioned this pull request Oct 19, 2022

fix(graph): draggable only work on force layout #17792

Merged

8 tasks

plainheart modified the milestones: 5.4.0, 5.4.1 Nov 11, 2022

plainheart changed the title ~~feat(graph): simple graph draggable. close #14510~~ feat(graph): make graph node draggable in none and circular layout Nov 11, 2022

This comment was marked as outdated.

Sign in to view

plainheart added a commit to apache/echarts-doc that referenced this pull request Nov 11, 2022

feat(graph): add support hint for draggable option. (apache/echarts…

e63a542

…#15428, apache/echarts#17792)

uier mentioned this pull request Nov 18, 2022

Graph Discovery Visualization UniCourse-TW/Frontend#28

Open

X-oss-byte mentioned this pull request May 25, 2024

[Snyk] Upgrade echarts from 5.4.1 to 5.5.0 X-oss-byte/mempool#84

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

kongmoumou commented Jul 29, 2021 •

edited

Loading

echarts-bot bot commented Jul 29, 2021

pissang Aug 6, 2021

kongmoumou Aug 6, 2021

pissang Aug 6, 2021

kongmoumou Aug 6, 2021

100pah commented Sep 29, 2021 •

edited

Loading

kongmoumou commented Sep 29, 2021

100pah commented Sep 29, 2021 •

edited

Loading

kongmoumou commented Sep 29, 2021

alexresolute commented Feb 1, 2022

apitts commented Feb 22, 2022

100pah left a comment

echarts-bot bot commented Feb 28, 2022

jayarjo commented Mar 14, 2022 •

edited

Loading

kongmoumou commented Mar 22, 2022

kongmoumou commented Sep 26, 2022

This comment was marked as outdated.

plainheart commented Nov 11, 2022

kongmoumou commented Nov 16, 2022

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

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

Conversation

kongmoumou commented Jul 29, 2021 • edited Loading

Brief Information

What does this PR do?

Fixed issues

Details

Before: What was the problem?

After: How is it fixed in this PR?

Misc

Related test cases or examples to use the new APIs

Others

Merging options

Other information

echarts-bot bot commented Jul 29, 2021

pissang Aug 6, 2021

Choose a reason for hiding this comment

kongmoumou Aug 6, 2021

Choose a reason for hiding this comment

pissang Aug 6, 2021

Choose a reason for hiding this comment

kongmoumou Aug 6, 2021

Choose a reason for hiding this comment

100pah commented Sep 29, 2021 • edited Loading

kongmoumou commented Sep 29, 2021

100pah commented Sep 29, 2021 • edited Loading

kongmoumou commented Sep 29, 2021

alexresolute commented Feb 1, 2022

apitts commented Feb 22, 2022

100pah left a comment

Choose a reason for hiding this comment

echarts-bot bot commented Feb 28, 2022

jayarjo commented Mar 14, 2022 • edited Loading

kongmoumou commented Mar 22, 2022

kongmoumou commented Sep 26, 2022

This comment was marked as outdated.

plainheart commented Nov 11, 2022

kongmoumou commented Nov 16, 2022

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

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

kongmoumou commented Jul 29, 2021 •

edited

Loading

100pah commented Sep 29, 2021 •

edited

Loading

100pah commented Sep 29, 2021 •

edited

Loading

jayarjo commented Mar 14, 2022 •

edited

Loading