feat(behaviors): add drag node behavior (#5503)

* refactor: export idOf util

* refactor(runtime): setElementVisibility support set animation individually

* feat(utils): add setCacheStyle util

* fix(runtime): fix issue that setVisibility call in a short period of time

* fix(elements): fix edge arrow that create and animate error

* refactor(elements): adjust nodelike default style props'

* feat(behaviors): add drag node behavior

* test(behaviors): add drag node test snapshots

* test(behavior): update test case and snapshot

* refactor: adjust exports

packages/g6/__tests__/demo/case/behavior-drag-node.ts

@@ -0,0 +1,48 @@
+import { Graph } from '@/src';
+import type { STDTestCase } from '../types';
+
+export const behaviorDragNode: STDTestCase = async (context) => {
+ const graph = new Graph({
+ ...context,
+ data: {
+ nodes: [
+ { id: 'node-1', style: { x: 100, y: 100 } },
+ { id: 'node-2', style: { x: 200, y: 100, parentId: 'combo-1' } },
+ { id: 'node-3', style: { x: 100, y: 200 } },
+ { id: 'node-4', style: { x: 200, y: 200, parentId: 'combo-1' } },
+ ],
+ edges: [
+ { source: 'node-1', target: 'node-2' },
+ { source: 'node-2', target: 'node-4' },
+ { source: 'node-1', target: 'node-3' },
+ { source: 'node-3', target: 'node-4' },
+ ],
+ combos: [{ id: 'combo-1' }],
+ },
+ node: { style: { size: 20 } },
+ edge: {
+ style: { endArrow: true },
+ },
+ behaviors: [{ type: 'drag-node' }],
+ });
+
+ await graph.render();
+
+ behaviorDragNode.form = (panel) => {
+ const config = {
+ enable: true,
+ hideEdges: 'none',
+ shadow: false,
+ };
+ const handleChange = () => {
+ graph.setBehaviors([{ type: 'drag-node', ...config }]);
+ };
+ return [
+ panel.add(config, 'enable').onChange(handleChange),
+ panel.add(config, 'hideEdges', ['none', 'in', 'out', 'both']).onChange(handleChange),
+ panel.add(config, 'shadow').onChange(handleChange),
+ ];
+ };
+
+ return graph;
+};

packages/g6/__tests__/demo/case/index.ts

@@ -1,4 +1,5 @@
 export * from './behavior-drag-canvas';
+export * from './behavior-drag-node';
 export * from './behavior-zoom-canvas';
 export * from './combo';
 export * from './common-graph';

packages/g6/__tests__/demo/static/controller-layout-compact-box.ts

@@ -1,5 +1,5 @@
 import type { G6Spec } from '@/src';
-import { Graph, treeToGraphData } from '@/src';
+import { Graph, Utils } from '@/src';
 import tree from '@@/dataset/algorithm-category.json';
 import type { STDTestCase } from '../types';
 
@@ -9,7 +9,7 @@ export const controllerLayoutCompactBox: STDTestCase = async (context) => {
  x: 50,
  y: 300,
  zoom: 0.5,
- data: treeToGraphData(tree),
+ data: Utils.treeToGraphData(tree),
  theme: 'light',
  layout: {
  type: 'compact-box',

packages/g6/__tests__/demo/static/controller-layout-dendrogram.ts

@@ -1,5 +1,5 @@
 import type { G6Spec } from '@/src';
-import { Graph, treeToGraphData } from '@/src';
+import { Graph, Utils } from '@/src';
 import tree from '@@/dataset/algorithm-category.json';
 import type { STDTestCase } from '../types';
 
@@ -9,7 +9,7 @@ export const controllerLayoutDendrogram: STDTestCase = async (context) => {
  x: -200,
  y: 350,
  zoom: 0.5,
- data: treeToGraphData(tree),
+ data: Utils.treeToGraphData(tree),
  theme: 'light',
  layout: {
  type: 'dendrogram',

packages/g6/__tests__/demo/static/controller-layout-indented.ts

@@ -1,5 +1,5 @@
 import type { G6Spec } from '@/src';
-import { Graph, treeToGraphData } from '@/src';
+import { Graph, Utils } from '@/src';
 import tree from '@@/dataset/file-system.json';
 import type { STDTestCase } from '../types';
 
@@ -8,7 +8,7 @@ export const controllerLayoutIndented: STDTestCase = async (context) => {
  ...context,
  y: -200,
  zoom: 0.5,
- data: treeToGraphData(tree),
+ data: Utils.treeToGraphData(tree),
  theme: 'light',
  layout: {
  type: 'indented',

packages/g6/__tests__/demo/static/controller-layout-mindmap.ts

@@ -1,5 +1,5 @@
 import type { G6Spec } from '@/src';
-import { Graph, treeToGraphData } from '@/src';
+import { Graph, Utils } from '@/src';
 import tree from '@@/dataset/algorithm-category.json';
 import type { STDTestCase } from '../types';
 
@@ -9,7 +9,7 @@ export const controllerLayoutMindmap: STDTestCase = async (context) => {
  x: 350,
  y: 100,
  zoom: 0.4,
- data: treeToGraphData(tree),
+ data: Utils.treeToGraphData(tree),
  theme: 'light',
  layout: {
  type: 'mindmap',