From 8cd41ee6478f53a20eef48b00c7faba082425722 Mon Sep 17 00:00:00 2001 From: Aaron Date: Fri, 10 May 2024 18:12:31 +0800 Subject: [PATCH] fix: fix animation and theme (#5718) * fix(spec): migrate missed states changes * refactor: use fillOpacity, strokeOpacity to replace inherited opacity * refactor: adjust inherited style logic * feat: support badges and ports animation * test: update test case and snapshots --- .../g6/__tests__/dataset/element-edges.json | 17 + .../g6/__tests__/dataset/element-nodes.json | 30 ++ .../demos/animation-element-state-switch.ts | 16 +- .../demos/element-edge-cubic-horizontal.ts | 39 +-- .../demos/element-edge-cubic-vertical.ts | 39 +-- .../g6/__tests__/demos/element-edge-cubic.ts | 39 +-- .../g6/__tests__/demos/element-edge-line.ts | 39 +-- .../__tests__/demos/element-edge-quadratic.ts | 39 +-- .../g6/__tests__/demos/element-node-badges.ts | 101 ++++++ .../g6/__tests__/demos/element-node-circle.ts | 40 +-- .../__tests__/demos/element-node-diamond.ts | 40 +-- .../g6/__tests__/demos/element-node-donut.ts | 32 +- .../__tests__/demos/element-node-ellipse.ts | 40 +-- .../__tests__/demos/element-node-hexagon.ts | 38 +-- .../g6/__tests__/demos/element-node-image.ts | 45 +-- .../g6/__tests__/demos/element-node-rect.ts | 40 +-- .../g6/__tests__/demos/element-node-star.ts | 40 +-- .../__tests__/demos/element-node-triangle.ts | 41 +-- packages/g6/__tests__/demos/element-state.ts | 6 +- packages/g6/__tests__/demos/index.ts | 1 + .../element-state-switch/default-0.svg | 4 +- .../element-state-switch/default-1000.svg | 4 +- .../element-state-switch/default-200.svg | 4 +- .../brush-select/brush-selected-1.svg | 18 +- .../brush-select/brush-selected-2.svg | 6 +- .../brush-select/brush-selected-3.svg | 18 +- .../brush-select/brush-selected-4.svg | 18 +- .../brush-select/brush-selected-5.svg | 18 +- .../brush-select/brush-selected-mode-diff.svg | 18 +- .../brush-selected-mode-union.svg | 18 +- .../brush-select/brush-selecting-5.svg | 18 +- .../behaviors/click-element/custom-state.svg | 306 +++++++++--------- .../behaviors/click-element/edge-1-degree.svg | 4 +- .../behaviors/click-element/node-1-degree.svg | 56 ++-- .../behaviors/hover-element/1-degree-edge.svg | 304 ++++++++--------- .../behaviors/hover-element/1-degree-node.svg | 278 ++++++++-------- .../behaviors/hover-element/2-degree-edge.svg | 278 ++++++++-------- .../behaviors/hover-element/2-degree-node.svg | 262 +++++++-------- .../behaviors/hover-element/state.svg | 306 +++++++++--------- .../lasso-select/lasso-selected-1.svg | 18 +- .../lasso-select/lasso-selected-2.svg | 6 +- .../lasso-select/lasso-selected-3.svg | 6 +- .../lasso-select/lasso-selected-5.svg | 18 +- .../lasso-select/lasso-selected-mode-diff.svg | 18 +- .../lasso-selected-mode-union.svg | 18 +- .../lasso-select/lasso-selecting-5.svg | 18 +- .../edges/cubic-horizontal/default.svg | 26 +- .../elements/edges/cubic-vertical/default.svg | 26 +- .../elements/edges/cubic/default.svg | 26 +- .../snapshots/elements/edges/line/default.svg | 26 +- .../elements/edges/quadratic/default.svg | 26 +- .../elements/nodes/circle/default.svg | 22 +- .../elements/nodes/diamond/default.svg | 22 +- .../elements/nodes/donut/default.svg | 22 +- .../elements/nodes/ellipse/default.svg | 22 +- .../elements/nodes/hexagon/default.svg | 20 +- .../elements/nodes/image/default.svg | 24 +- .../snapshots/elements/nodes/rect/default.svg | 22 +- .../snapshots/elements/nodes/star/default.svg | 20 +- .../elements/nodes/triangle/default.svg | 35 +- .../snapshots/elements/state/default.svg | 4 +- .../state/setState-single-default.svg | 4 +- .../elements/state/setState-single.svg | 4 +- .../snapshots/elements/state/setState.svg | 4 +- .../snapshots/plugins/bubble-sets/default.svg | 2 +- .../bubble-sets/element-position-update.svg | 2 +- .../plugins/bubble-sets/member-add.svg | 2 +- .../plugins/bubble-sets/member-remove.svg | 2 +- .../plugins/bubble-sets/member-update.svg | 2 +- .../plugins/bubble-sets/non-member-add.svg | 2 +- .../plugins/bubble-sets/non-member-remove.svg | 2 +- .../plugins/bubble-sets/non-member-update.svg | 2 +- .../plugins/bubble-sets/options-update.svg | 2 +- .../hull/plugin-hull/addMember__node3.svg | 2 +- .../hull/plugin-hull/corner__rounded.svg | 2 +- .../hull/plugin-hull/corner__sharp.svg | 2 +- .../hull/plugin-hull/corner__smooth.svg | 2 +- .../plugins/hull/plugin-hull/default.svg | 2 +- .../plugin-hull/labelAutoRotate__false.svg | 2 +- .../plugin-hull/labelAutoRotate__true.svg | 2 +- .../plugin-hull/labelCloseToHull__false.svg | 2 +- .../plugin-hull/labelCloseToHull__true.svg | 2 +- .../plugin-hull/labelPlacement__bottom.svg | 2 +- .../hull/plugin-hull/labelPlacement__left.svg | 2 +- .../plugin-hull/labelPlacement__right.svg | 2 +- .../hull/plugin-hull/labelPlacement__top.svg | 2 +- .../plugins/hull/plugin-hull/padding__0.svg | 2 +- .../plugins/hull/plugin-hull/padding__20.svg | 2 +- .../hull/plugin-hull/removeMember__node1.svg | 2 +- .../plugins/hull/plugin-hull/updateMember.svg | 2 +- .../plugin-hull/updateMember__position.svg | 2 +- .../snapshots/runtime/element/default.svg | 4 +- .../runtime/element/visibility/hidden.svg | 6 +- .../runtime/element/visibility/visible.svg | 6 +- .../animations/element-state-switch.spec.ts | 14 +- .../g6/__tests__/unit/runtime/element.spec.ts | 7 +- .../unit/runtime/graph/event.spec.ts | 6 +- .../unit/runtime/graph/graph.spec.ts | 2 +- .../g6/__tests__/unit/utils/animation.spec.ts | 60 ---- packages/g6/src/animations/executor.ts | 31 +- packages/g6/src/animations/types.ts | 6 +- packages/g6/src/elements/nodes/base-node.ts | 3 +- packages/g6/src/elements/nodes/image.ts | 4 +- packages/g6/src/elements/shapes/base-shape.ts | 40 ++- packages/g6/src/plugins/bubble-sets.ts | 3 +- packages/g6/src/plugins/hull/index.ts | 4 +- packages/g6/src/runtime/data.ts | 4 +- packages/g6/src/runtime/element.ts | 4 +- packages/g6/src/runtime/graph.ts | 2 +- packages/g6/src/themes/base.ts | 25 +- packages/g6/src/utils/animation.ts | 46 +-- packages/g6/src/utils/prefix.ts | 18 +- 112 files changed, 1555 insertions(+), 1911 deletions(-) create mode 100644 packages/g6/__tests__/dataset/element-edges.json create mode 100644 packages/g6/__tests__/dataset/element-nodes.json create mode 100644 packages/g6/__tests__/demos/element-node-badges.ts diff --git a/packages/g6/__tests__/dataset/element-edges.json b/packages/g6/__tests__/dataset/element-edges.json new file mode 100644 index 0000000000..bd49f2608d --- /dev/null +++ b/packages/g6/__tests__/dataset/element-edges.json @@ -0,0 +1,17 @@ +{ + "nodes": [ + { "id": "node1" }, + { "id": "node2" }, + { "id": "node3" }, + { "id": "node4" }, + { "id": "node5" }, + { "id": "node6" } + ], + "edges": [ + { "id": "line-default", "source": "node1", "target": "node2" }, + { "id": "line-active", "source": "node1", "target": "node3", "states": ["active"] }, + { "id": "line-selected", "source": "node1", "target": "node4", "states": ["selected"] }, + { "id": "line-highlight", "source": "node1", "target": "node5", "states": ["highlight"] }, + { "id": "line-inactive", "source": "node1", "target": "node6", "states": ["inactive"] } + ] +} diff --git a/packages/g6/__tests__/dataset/element-nodes.json b/packages/g6/__tests__/dataset/element-nodes.json new file mode 100644 index 0000000000..77bb49c891 --- /dev/null +++ b/packages/g6/__tests__/dataset/element-nodes.json @@ -0,0 +1,30 @@ +{ + "nodes": [ + { "id": "default" }, + { "id": "halo", "style": { "halo": true } }, + { + "id": "badges", + "style": { + "badges": [ + { "text": "A", "placement": "right-top" }, + { "text": "Important", "placement": "right" }, + { "text": "Notice", "placement": "right-bottom" } + ], + "badgeFontSize": 8, + "badgePadding": [1, 4] + } + }, + { + "id": "ports", + "style": { + "portR": 3, + "ports": [{ "placement": "left" }, { "placement": "right" }, { "placement": "top" }, { "placement": "bottom" }] + } + }, + { "id": "active", "states": ["active"] }, + { "id": "selected", "states": ["selected"] }, + { "id": "highlight", "states": ["highlight"] }, + { "id": "inactive", "states": ["inactive"] }, + { "id": "disabled", "states": ["disabled"] } + ] +} diff --git a/packages/g6/__tests__/demos/animation-element-state-switch.ts b/packages/g6/__tests__/demos/animation-element-state-switch.ts index ffde845721..c08ca6ed72 100644 --- a/packages/g6/__tests__/demos/animation-element-state-switch.ts +++ b/packages/g6/__tests__/demos/animation-element-state-switch.ts @@ -6,12 +6,12 @@ export const animationElementStateSwitch: TestCase = async (context) => { ...context, data: { nodes: [ - { id: 'node-1', style: { x: 50, y: 50, states: ['active', 'selected'] } }, + { id: 'node-1', states: ['active', 'selected'], style: { x: 50, y: 50 } }, { id: 'node-2', style: { x: 200, y: 50 } }, - { id: 'node-3', style: { x: 125, y: 150, states: ['active'] } }, + { id: 'node-3', states: ['active'], style: { x: 125, y: 150 } }, ], edges: [ - { source: 'node-1', target: 'node-2', style: { states: ['active'] } }, + { source: 'node-1', target: 'node-2', states: ['active'] }, { source: 'node-2', target: 'node-3' }, { source: 'node-3', target: 'node-1' }, ], @@ -60,13 +60,13 @@ export const animationElementStateSwitch: TestCase = async (context) => { const play = () => { graph.updateData({ nodes: [ - { id: 'node-1', style: { states: [] } }, - { id: 'node-2', style: { states: ['active'] } }, - { id: 'node-3', style: { states: ['selected'] } }, + { id: 'node-1', states: [] }, + { id: 'node-2', states: ['active'] }, + { id: 'node-3', states: ['selected'] }, ], edges: [ - { source: 'node-1', target: 'node-2', style: { states: [] } }, - { source: 'node-2', target: 'node-3', style: { states: ['active'] } }, + { source: 'node-1', target: 'node-2', states: [] }, + { source: 'node-2', target: 'node-3', states: ['active'] }, ], }); graph.draw(); diff --git a/packages/g6/__tests__/demos/element-edge-cubic-horizontal.ts b/packages/g6/__tests__/demos/element-edge-cubic-horizontal.ts index db2ac94bb2..2ef0de45f5 100644 --- a/packages/g6/__tests__/demos/element-edge-cubic-horizontal.ts +++ b/packages/g6/__tests__/demos/element-edge-cubic-horizontal.ts @@ -1,37 +1,7 @@ import { Graph } from '@/src'; +import data from '@@/dataset/element-edges.json'; export const elementEdgeCubicHorizontal: TestCase = async (context) => { - const data = { - nodes: [{ id: 'node1' }, { id: 'node2' }, { id: 'node3' }, { id: 'node4' }, { id: 'node5' }, { id: 'node6' }], - edges: [ - { - id: 'line-default', - source: 'node1', - target: 'node2', - }, - { - id: 'line-active', - source: 'node1', - target: 'node3', - }, - { - id: 'line-selected', - source: 'node1', - target: 'node4', - }, - { - id: 'line-highlight', - source: 'node1', - target: 'node5', - }, - { - id: 'line-inactive', - source: 'node1', - target: 'node6', - }, - ], - }; - const graph = new Graph({ ...context, data, @@ -60,12 +30,5 @@ export const elementEdgeCubicHorizontal: TestCase = async (context) => { await graph.render(); - graph.setElementState({ - 'line-active': 'active', - 'line-selected': 'selected', - 'line-highlight': 'highlight', - 'line-inactive': 'inactive', - }); - return graph; }; diff --git a/packages/g6/__tests__/demos/element-edge-cubic-vertical.ts b/packages/g6/__tests__/demos/element-edge-cubic-vertical.ts index 3d31acf5ab..9235080089 100644 --- a/packages/g6/__tests__/demos/element-edge-cubic-vertical.ts +++ b/packages/g6/__tests__/demos/element-edge-cubic-vertical.ts @@ -1,37 +1,7 @@ import { Graph } from '@/src'; +import data from '@@/dataset/element-edges.json'; export const elementEdgeCubicVertical: TestCase = async (context) => { - const data = { - nodes: [{ id: 'node1' }, { id: 'node2' }, { id: 'node3' }, { id: 'node4' }, { id: 'node5' }, { id: 'node6' }], - edges: [ - { - id: 'line-default', - source: 'node1', - target: 'node2', - }, - { - id: 'line-active', - source: 'node1', - target: 'node3', - }, - { - id: 'line-selected', - source: 'node1', - target: 'node4', - }, - { - id: 'line-highlight', - source: 'node1', - target: 'node5', - }, - { - id: 'line-inactive', - source: 'node1', - target: 'node6', - }, - ], - }; - const graph = new Graph({ ...context, data, @@ -60,12 +30,5 @@ export const elementEdgeCubicVertical: TestCase = async (context) => { await graph.render(); - graph.setElementState({ - 'line-active': 'active', - 'line-selected': 'selected', - 'line-highlight': 'highlight', - 'line-inactive': 'inactive', - }); - return graph; }; diff --git a/packages/g6/__tests__/demos/element-edge-cubic.ts b/packages/g6/__tests__/demos/element-edge-cubic.ts index 24f0a2bb99..703380431e 100644 --- a/packages/g6/__tests__/demos/element-edge-cubic.ts +++ b/packages/g6/__tests__/demos/element-edge-cubic.ts @@ -1,37 +1,7 @@ import { Graph } from '@/src'; +import data from '@@/dataset/element-edges.json'; export const elementEdgeCubic: TestCase = async (context) => { - const data = { - nodes: [{ id: 'node1' }, { id: 'node2' }, { id: 'node3' }, { id: 'node4' }, { id: 'node5' }, { id: 'node6' }], - edges: [ - { - id: 'line-default', - source: 'node1', - target: 'node2', - }, - { - id: 'line-active', - source: 'node1', - target: 'node3', - }, - { - id: 'line-selected', - source: 'node1', - target: 'node4', - }, - { - id: 'line-highlight', - source: 'node1', - target: 'node5', - }, - { - id: 'line-inactive', - source: 'node1', - target: 'node6', - }, - ], - }; - const graph = new Graph({ ...context, data, @@ -52,12 +22,5 @@ export const elementEdgeCubic: TestCase = async (context) => { await graph.render(); - graph.setElementState({ - 'line-active': 'active', - 'line-selected': 'selected', - 'line-highlight': 'highlight', - 'line-inactive': 'inactive', - }); - return graph; }; diff --git a/packages/g6/__tests__/demos/element-edge-line.ts b/packages/g6/__tests__/demos/element-edge-line.ts index 62621fdd1e..f49ed34504 100644 --- a/packages/g6/__tests__/demos/element-edge-line.ts +++ b/packages/g6/__tests__/demos/element-edge-line.ts @@ -1,37 +1,7 @@ import { Graph } from '@/src'; +import data from '@@/dataset/element-edges.json'; export const elementEdgeLine: TestCase = async (context) => { - const data = { - nodes: [{ id: 'node1' }, { id: 'node2' }, { id: 'node3' }, { id: 'node4' }, { id: 'node5' }, { id: 'node6' }], - edges: [ - { - id: 'line-default', - source: 'node1', - target: 'node2', - }, - { - id: 'line-active', - source: 'node1', - target: 'node3', - }, - { - id: 'line-selected', - source: 'node1', - target: 'node4', - }, - { - id: 'line-highlight', - source: 'node1', - target: 'node5', - }, - { - id: 'line-inactive', - source: 'node1', - target: 'node6', - }, - ], - }; - const graph = new Graph({ ...context, data, @@ -52,12 +22,5 @@ export const elementEdgeLine: TestCase = async (context) => { await graph.render(); - graph.setElementState({ - 'line-active': 'active', - 'line-selected': 'selected', - 'line-highlight': 'highlight', - 'line-inactive': 'inactive', - }); - return graph; }; diff --git a/packages/g6/__tests__/demos/element-edge-quadratic.ts b/packages/g6/__tests__/demos/element-edge-quadratic.ts index ec5f6e8adf..42a7fc1313 100644 --- a/packages/g6/__tests__/demos/element-edge-quadratic.ts +++ b/packages/g6/__tests__/demos/element-edge-quadratic.ts @@ -1,37 +1,7 @@ import { Graph } from '@/src'; +import data from '@@/dataset/element-edges.json'; export const elementEdgeQuadratic: TestCase = async (context) => { - const data = { - nodes: [{ id: 'node1' }, { id: 'node2' }, { id: 'node3' }, { id: 'node4' }, { id: 'node5' }, { id: 'node6' }], - edges: [ - { - id: 'line-default', - source: 'node1', - target: 'node2', - }, - { - id: 'line-active', - source: 'node1', - target: 'node3', - }, - { - id: 'line-selected', - source: 'node1', - target: 'node4', - }, - { - id: 'line-highlight', - source: 'node1', - target: 'node5', - }, - { - id: 'line-inactive', - source: 'node1', - target: 'node6', - }, - ], - }; - const graph = new Graph({ ...context, data, @@ -52,12 +22,5 @@ export const elementEdgeQuadratic: TestCase = async (context) => { await graph.render(); - graph.setElementState({ - 'line-active': 'active', - 'line-selected': 'selected', - 'line-highlight': 'highlight', - 'line-inactive': 'inactive', - }); - return graph; }; diff --git a/packages/g6/__tests__/demos/element-node-badges.ts b/packages/g6/__tests__/demos/element-node-badges.ts new file mode 100644 index 0000000000..5ecfd29a0b --- /dev/null +++ b/packages/g6/__tests__/demos/element-node-badges.ts @@ -0,0 +1,101 @@ +import { Graph } from '@/src'; + +export const elementNodeBadges: TestCase = async (context) => { + const graph = new Graph({ + ...context, + data: { + nodes: [ + { + id: 'node-1', + style: { + x: 150, + y: 150, + size: 100, + badges: [ + { text: 'left', placement: 'left' }, + { text: 'right', placement: 'right' }, + { text: 'top', placement: 'top' }, + { text: 'bottom', placement: 'bottom' }, + // { text: 'top-left', placement: 'top-left' }, + // { text: 'top-right', placement: 'top-right' }, + // { text: 'bottom-left', placement: 'bottom-left' }, + // { text: 'bottom-right', placement: 'bottom-right' }, + ], + badgeFontSize: 8, + badgePadding: [10, 10], + }, + }, + ], + }, + }); + + await graph.render(); + + elementNodeBadges.form = (panel) => { + const config = { + add: () => { + graph.updateNodeData([ + { + id: 'node-1', + style: { + badges: [ + { text: 'left', placement: 'left' }, + { text: 'right', placement: 'right' }, + { text: 'top', placement: 'top' }, + { text: 'bottom', placement: 'bottom' }, + { text: 'top-left', placement: 'top-left' }, + { text: 'top-right', placement: 'top-right' }, + { text: 'bottom-left', placement: 'bottom-left' }, + { text: 'bottom-right', placement: 'bottom-right' }, + ], + }, + }, + ]); + graph.draw(); + }, + update: () => { + graph.updateNodeData([ + { + id: 'node-1', + style: { + badges: [ + { text: 'left', placement: 'left', backgroundFill: 'red' }, + { text: 'right', placement: 'right' }, + { text: 'top', placement: 'top' }, + { text: 'bottom', placement: 'bottom' }, + { text: 'top-left', placement: 'top-left' }, + { text: 'top-right', placement: 'top-right' }, + { text: 'bottom-left', placement: 'bottom-left' }, + { text: 'bottom-right', placement: 'bottom-right' }, + ], + }, + }, + ]); + graph.draw(); + }, + remove: () => { + graph.updateNodeData([ + { + id: 'node-1', + style: { + badges: [ + { text: 'left', placement: 'left' }, + { text: 'right', placement: 'right' }, + { text: 'top', placement: 'top' }, + { text: 'bottom', placement: 'bottom' }, + ], + }, + }, + ]); + graph.draw(); + }, + }; + return [ + panel.add(config, 'add').name('Add Badge'), + panel.add(config, 'update').name('Update Badge'), + panel.add(config, 'remove').name('Remove Badge'), + ]; + }; + + return graph; +}; diff --git a/packages/g6/__tests__/demos/element-node-circle.ts b/packages/g6/__tests__/demos/element-node-circle.ts index 261360f5d5..6a99ad9abc 100644 --- a/packages/g6/__tests__/demos/element-node-circle.ts +++ b/packages/g6/__tests__/demos/element-node-circle.ts @@ -1,21 +1,7 @@ import { Graph } from '@/src'; -import { idOf } from '@/src/utils/id'; +import data from '@@/dataset/element-nodes.json'; export const elementNodeCircle: TestCase = async (context) => { - const data = { - nodes: [ - { id: 'circle' }, - { id: 'circle-halo' }, - { id: 'circle-badges' }, - { id: 'circle-ports' }, - { id: 'circle-active' }, - { id: 'circle-selected' }, - { id: 'circle-highlight' }, - { id: 'circle-inactive' }, - { id: 'circle-disabled' }, - ], - }; - const graph = new Graph({ ...context, data, @@ -27,22 +13,6 @@ export const elementNodeCircle: TestCase = async (context) => { iconHeight: 20, iconWidth: 20, iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg', - halo: (d) => idOf(d).toString().includes('halo'), - portR: 3, - ports: (d) => - idOf(d).toString().includes('ports') - ? [{ placement: 'left' }, { placement: 'right' }, { placement: 'top' }, { placement: 'bottom' }] - : [], - badges: (d) => - idOf(d).toString().includes('badges') - ? [ - { text: 'A', placement: 'right-top' }, - { text: 'Important', placement: 'right' }, - { text: 'Notice', placement: 'right-bottom' }, - ] - : [], - badgeFontSize: 8, - badgePadding: [1, 4], }, }, layout: { @@ -52,13 +22,5 @@ export const elementNodeCircle: TestCase = async (context) => { await graph.render(); - graph.setElementState({ - 'circle-active': 'active', - 'circle-selected': 'selected', - 'circle-highlight': 'highlight', - 'circle-inactive': 'inactive', - 'circle-disabled': 'disabled', - }); - return graph; }; diff --git a/packages/g6/__tests__/demos/element-node-diamond.ts b/packages/g6/__tests__/demos/element-node-diamond.ts index 31301ed09f..620d9f32da 100644 --- a/packages/g6/__tests__/demos/element-node-diamond.ts +++ b/packages/g6/__tests__/demos/element-node-diamond.ts @@ -1,21 +1,7 @@ import { Graph } from '@/src'; -import { idOf } from '@/src/utils/id'; +import data from '@@/dataset/element-nodes.json'; export const elementNodeDiamond: TestCase = async (context) => { - const data = { - nodes: [ - { id: 'diamond' }, - { id: 'diamond-halo' }, - { id: 'diamond-badges' }, - { id: 'diamond-ports' }, - { id: 'diamond-active' }, - { id: 'diamond-selected' }, - { id: 'diamond-highlight' }, - { id: 'diamond-inactive' }, - { id: 'diamond-disabled' }, - ], - }; - const graph = new Graph({ ...context, data, @@ -27,22 +13,6 @@ export const elementNodeDiamond: TestCase = async (context) => { iconWidth: 20, iconHeight: 20, iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg', - halo: (d) => idOf(d).toString().includes('halo'), - portR: 3, - ports: (d) => - idOf(d).toString().includes('ports') - ? [{ placement: 'left' }, { placement: 'right' }, { placement: 'top' }, { placement: 'bottom' }] - : [], - badges: (d) => - idOf(d).toString().includes('badges') - ? [ - { text: 'A', placement: 'right-top' }, - { text: 'Important', placement: 'right' }, - { text: 'Notice', placement: 'right-bottom' }, - ] - : [], - badgeFontSize: 8, - badgePadding: [1, 4], }, }, layout: { @@ -51,13 +21,5 @@ export const elementNodeDiamond: TestCase = async (context) => { }); await graph.render(); - graph.setElementState({ - 'diamond-active': 'active', - 'diamond-selected': 'selected', - 'diamond-highlight': 'highlight', - 'diamond-inactive': 'inactive', - 'diamond-disabled': 'disabled', - }); - return graph; }; diff --git a/packages/g6/__tests__/demos/element-node-donut.ts b/packages/g6/__tests__/demos/element-node-donut.ts index 1d6e642ec8..9141a83b7f 100644 --- a/packages/g6/__tests__/demos/element-node-donut.ts +++ b/packages/g6/__tests__/demos/element-node-donut.ts @@ -5,7 +5,7 @@ export const elementNodeDonut: TestCase = async (context) => { const data = { nodes: [ { - id: 'donut', + id: 'default', style: { innerR: '60%', donuts: [ @@ -18,25 +18,26 @@ export const elementNodeDonut: TestCase = async (context) => { }, }, { - id: 'donut-halo', + id: 'halo', style: { donuts: [{ color: 'red' }, { color: 'green' }], }, }, { - id: 'donut-badges', + id: 'badges', style: { donuts: [1, 2, 3], }, }, { - id: 'donut-ports', + id: 'ports', style: { donuts: [1, 1, 1], }, }, { - id: 'donut-active', + id: 'active', + states: ['active'], style: { donuts: [ { @@ -49,13 +50,15 @@ export const elementNodeDonut: TestCase = async (context) => { }, }, { - id: 'donut-selected', + id: 'selected', + states: ['selected'], style: { donuts: [{ value: 1000 }, { value: 20 }], }, }, { - id: 'donut-highlight', + id: 'highlight', + states: ['highlight'], style: { donutLineWidth: 1, donutStroke: '#fff', @@ -63,14 +66,16 @@ export const elementNodeDonut: TestCase = async (context) => { }, }, { - id: 'donut-inactive', + id: 'inactive', + states: ['inactive'], style: { innerR: 0, donuts: [{ fill: 'red' }, { fill: 'green' }], }, }, { - id: 'donut-disabled', + id: 'disabled', + states: ['disabled'], style: { innerR: '50%', donuts: [{ color: 'green' }, { color: 'red' }], @@ -109,6 +114,7 @@ export const elementNodeDonut: TestCase = async (context) => { badgePadding: [1, 4], }, }, + // TODO fixme when animation is enabled animation: false, layout: { type: 'grid', @@ -118,13 +124,5 @@ export const elementNodeDonut: TestCase = async (context) => { await graph.render(); - graph.setElementState({ - 'donut-active': 'active', - 'donut-selected': 'selected', - 'donut-highlight': 'highlight', - 'donut-inactive': 'inactive', - 'donut-disabled': 'disabled', - }); - return graph; }; diff --git a/packages/g6/__tests__/demos/element-node-ellipse.ts b/packages/g6/__tests__/demos/element-node-ellipse.ts index 51e9c9841c..388146b95f 100644 --- a/packages/g6/__tests__/demos/element-node-ellipse.ts +++ b/packages/g6/__tests__/demos/element-node-ellipse.ts @@ -1,21 +1,7 @@ import { Graph } from '@/src'; -import { idOf } from '@/src/utils/id'; +import data from '@@/dataset/element-nodes.json'; export const elementNodeEllipse: TestCase = async (context) => { - const data = { - nodes: [ - { id: 'ellipse' }, - { id: 'ellipse-halo' }, - { id: 'ellipse-badges' }, - { id: 'ellipse-ports' }, - { id: 'ellipse-active' }, - { id: 'ellipse-selected' }, - { id: 'ellipse-highlight' }, - { id: 'ellipse-inactive' }, - { id: 'ellipse-disabled' }, - ], - }; - const graph = new Graph({ ...context, data, @@ -27,22 +13,6 @@ export const elementNodeEllipse: TestCase = async (context) => { iconHeight: 20, iconWidth: 20, iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg', - halo: (d) => idOf(d).toString().includes('halo'), - portR: 3, - ports: (d) => - idOf(d).toString().includes('ports') - ? [{ placement: 'left' }, { placement: 'right' }, { placement: 'top' }, { placement: 'bottom' }] - : [], - badges: (d) => - idOf(d).toString().includes('badges') - ? [ - { text: 'A', placement: 'right-top' }, - { text: 'Important', placement: 'right' }, - { text: 'Notice', placement: 'right-bottom' }, - ] - : [], - badgeFontSize: 8, - badgePadding: [1, 4], }, }, layout: { @@ -52,13 +22,5 @@ export const elementNodeEllipse: TestCase = async (context) => { await graph.render(); - graph.setElementState({ - 'ellipse-active': 'active', - 'ellipse-selected': 'selected', - 'ellipse-highlight': 'highlight', - 'ellipse-inactive': 'inactive', - 'ellipse-disabled': 'disabled', - }); - return graph; }; diff --git a/packages/g6/__tests__/demos/element-node-hexagon.ts b/packages/g6/__tests__/demos/element-node-hexagon.ts index 923415bacf..4d45103df4 100644 --- a/packages/g6/__tests__/demos/element-node-hexagon.ts +++ b/packages/g6/__tests__/demos/element-node-hexagon.ts @@ -1,21 +1,7 @@ import { Graph } from '@/src'; -import { idOf } from '@/src/utils/id'; +import data from '@@/dataset/element-nodes.json'; export const elementNodeHexagon: TestCase = async (context) => { - const data = { - nodes: [ - { id: 'hexagon' }, - { id: 'hexagon-halo' }, - { id: 'hexagon-badges' }, - { id: 'hexagon-ports' }, - { id: 'hexagon-active' }, - { id: 'hexagon-selected' }, - { id: 'hexagon-highlight' }, - { id: 'hexagon-inactive' }, - { id: 'hexagon-disabled' }, - ], - }; - const graph = new Graph({ ...context, data, @@ -25,22 +11,6 @@ export const elementNodeHexagon: TestCase = async (context) => { size: 40, labelText: (d) => d.id!, iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg', - halo: (d) => idOf(d).toString().includes('halo'), - portR: 3, - ports: (d) => - idOf(d).toString().includes('ports') - ? [{ placement: 'left' }, { placement: 'right' }, { placement: 'top' }, { placement: 'bottom' }] - : [], - badges: (d) => - idOf(d).toString().includes('badges') - ? [ - { text: 'A', placement: 'right-top' }, - { text: 'Important', placement: 'right' }, - { text: 'Notice', placement: 'right-bottom' }, - ] - : [], - badgeFontSize: 8, - badgePadding: [1, 4], }, }, layout: { @@ -50,11 +20,5 @@ export const elementNodeHexagon: TestCase = async (context) => { await graph.render(); - graph.setElementState('hexagon-active', 'active'); - graph.setElementState('hexagon-selected', 'selected'); - graph.setElementState('hexagon-highlight', 'highlight'); - graph.setElementState('hexagon-inactive', 'inactive'); - graph.setElementState('hexagon-disabled', 'disabled'); - return graph; }; diff --git a/packages/g6/__tests__/demos/element-node-image.ts b/packages/g6/__tests__/demos/element-node-image.ts index cfd34de7ad..b673eadde4 100644 --- a/packages/g6/__tests__/demos/element-node-image.ts +++ b/packages/g6/__tests__/demos/element-node-image.ts @@ -1,21 +1,7 @@ import { Graph } from '@/src'; -import { idOf } from '@/src/utils/id'; +import data from '@@/dataset/element-nodes.json'; export const elementNodeImage: TestCase = async (context) => { - const data = { - nodes: [ - { id: 'image' }, - { id: 'image-halo' }, - { id: 'image-badges' }, - { id: 'image-ports' }, - { id: 'image-active' }, - { id: 'image-selected' }, - { id: 'image-highlight' }, - { id: 'image-inactive' }, - { id: 'image-disabled' }, - ], - }; - const graph = new Graph({ ...context, data, @@ -25,27 +11,14 @@ export const elementNodeImage: TestCase = async (context) => { size: 40, labelText: (d) => d.id!, src: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ', - halo: (d) => idOf(d).toString().includes('halo'), haloStroke: '#227eff', - portR: 3, - ports: (d) => - idOf(d).toString().includes('ports') - ? [{ placement: 'left' }, { placement: 'right' }, { placement: 'top' }, { placement: 'bottom' }] - : [], - badges: (d) => - idOf(d).toString().includes('badges') - ? [ - { text: 'A', placement: 'right-top' }, - { text: 'Important', placement: 'right' }, - { text: 'Notice', placement: 'right-bottom' }, - ] - : [], - badgeFontSize: 8, - badgePadding: [1, 4], }, state: { + inactive: { + fillOpacity: 0.5, + }, disabled: { - opacity: 0.2, + fillOpacity: 0.2, }, }, }, @@ -56,13 +29,5 @@ export const elementNodeImage: TestCase = async (context) => { await graph.render(); - graph.setElementState({ - 'image-active': 'active', - 'image-selected': 'selected', - 'image-highlight': 'highlight', - 'image-inactive': 'inactive', - 'image-disabled': 'disabled', - }); - return graph; }; diff --git a/packages/g6/__tests__/demos/element-node-rect.ts b/packages/g6/__tests__/demos/element-node-rect.ts index 68f668712d..8ee0eb1d7d 100644 --- a/packages/g6/__tests__/demos/element-node-rect.ts +++ b/packages/g6/__tests__/demos/element-node-rect.ts @@ -1,21 +1,7 @@ import { Graph } from '@/src'; -import { idOf } from '@/src/utils/id'; +import data from '@@/dataset/element-nodes.json'; export const elementNodeRect: TestCase = async (context) => { - const data = { - nodes: [ - { id: 'rect' }, - { id: 'rect-halo' }, - { id: 'rect-badges' }, - { id: 'rect-ports' }, - { id: 'rect-active' }, - { id: 'rect-selected' }, - { id: 'rect-highlight' }, - { id: 'rect-inactive' }, - { id: 'rect-disabled' }, - ], - }; - const graph = new Graph({ ...context, data, @@ -28,22 +14,6 @@ export const elementNodeRect: TestCase = async (context) => { iconWidth: 20, iconHeight: 20, iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg', - halo: (d) => idOf(d).toString().includes('halo'), - portR: 3, - ports: (d) => - idOf(d).toString().includes('ports') - ? [{ placement: 'left' }, { placement: 'right' }, { placement: 'top' }, { placement: 'bottom' }] - : [], - badges: (d) => - idOf(d).toString().includes('badges') - ? [ - { text: 'A', placement: 'right-top' }, - { text: 'Important', placement: 'right' }, - { text: 'Notice', placement: 'right-bottom' }, - ] - : [], - badgeFontSize: 8, - badgePadding: [1, 4], }, }, layout: { @@ -53,13 +23,5 @@ export const elementNodeRect: TestCase = async (context) => { await graph.render(); - graph.setElementState({ - 'rect-active': 'active', - 'rect-selected': 'selected', - 'rect-highlight': 'highlight', - 'rect-inactive': 'inactive', - 'rect-disabled': 'disabled', - }); - return graph; }; diff --git a/packages/g6/__tests__/demos/element-node-star.ts b/packages/g6/__tests__/demos/element-node-star.ts index 09501e9311..ca9cfe058d 100644 --- a/packages/g6/__tests__/demos/element-node-star.ts +++ b/packages/g6/__tests__/demos/element-node-star.ts @@ -1,21 +1,7 @@ import { Graph } from '@/src'; -import { idOf } from '@/src/utils/id'; +import data from '@@/dataset/element-nodes.json'; export const elementNodeStar: TestCase = async (context) => { - const data = { - nodes: [ - { id: 'star' }, - { id: 'star-halo' }, - { id: 'star-badges' }, - { id: 'star-ports' }, - { id: 'star-active' }, - { id: 'star-selected' }, - { id: 'star-highlight' }, - { id: 'star-inactive' }, - { id: 'star-disabled' }, - ], - }; - const graph = new Graph({ ...context, data, @@ -25,22 +11,6 @@ export const elementNodeStar: TestCase = async (context) => { size: 40, labelText: (d) => d.id!, iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg', - halo: (d) => idOf(d).toString().includes('halo'), - portR: 3, - ports: (d) => - idOf(d).toString().includes('ports') - ? [{ placement: 'left' }, { placement: 'right' }, { placement: 'top' }, { placement: 'bottom' }] - : [], - badges: (d) => - idOf(d).toString().includes('badges') - ? [ - { text: 'A', placement: 'right-top' }, - { text: 'Important', placement: 'right' }, - { text: 'Notice', placement: 'right-bottom' }, - ] - : [], - badgeFontSize: 8, - badgePadding: [1, 4], }, }, layout: { @@ -50,13 +20,5 @@ export const elementNodeStar: TestCase = async (context) => { await graph.render(); - graph.setElementState({ - 'star-active': 'active', - 'star-selected': 'selected', - 'star-highlight': 'highlight', - 'star-inactive': 'inactive', - 'star-disabled': 'disabled', - }); - return graph; }; diff --git a/packages/g6/__tests__/demos/element-node-triangle.ts b/packages/g6/__tests__/demos/element-node-triangle.ts index 56e644615b..e175e3c038 100644 --- a/packages/g6/__tests__/demos/element-node-triangle.ts +++ b/packages/g6/__tests__/demos/element-node-triangle.ts @@ -1,20 +1,7 @@ import { Graph } from '@/src'; -import { idOf } from '@/src/utils/id'; +import data from '@@/dataset/element-nodes.json'; export const elementNodeTriangle: TestCase = async (context) => { - const data = { - nodes: [ - { id: 'triangle' }, - { id: 'triangle-halo' }, - { id: 'triangle-badges' }, - { id: 'triangle-ports', data: { direction: 'left' } }, - { id: 'triangle-active' }, - { id: 'triangle-selected' }, - { id: 'triangle-highlight' }, - { id: 'triangle-inactive' }, - ], - }; - const graph = new Graph({ ...context, data, @@ -22,25 +9,10 @@ export const elementNodeTriangle: TestCase = async (context) => { type: 'triangle', // 👈🏻 Node shape type. style: { size: 40, - direction: (d: any) => d.data?.direction, + direction: (d: any) => (d.id === 'ports' ? 'left' : undefined), labelText: (d) => d.id!, iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg', - halo: (d) => idOf(d).toString().includes('halo'), - portR: 3, - ports: (d) => - idOf(d).toString().includes('ports') - ? [{ placement: 'left' }, { placement: 'top' }, { placement: 'bottom' }] - : [], - badges: (d) => - idOf(d).toString().includes('badges') - ? [ - { text: 'A', placement: 'right-top' }, - { text: 'Important', placement: 'right' }, - { text: 'Notice', placement: 'right-bottom' }, - ] - : [], - badgeFontSize: 8, - badgePadding: [1, 4], + ports: (d) => (d.id === 'ports' ? [{ placement: 'left' }, { placement: 'top' }, { placement: 'bottom' }] : []), }, }, layout: { @@ -50,12 +22,5 @@ export const elementNodeTriangle: TestCase = async (context) => { await graph.render(); - graph.setElementState({ - 'triangle-active': 'active', - 'triangle-selected': 'selected', - 'triangle-highlight': 'highlight', - 'triangle-inactive': 'inactive', - }); - return graph; }; diff --git a/packages/g6/__tests__/demos/element-state.ts b/packages/g6/__tests__/demos/element-state.ts index f30b9b2a39..8aa26a9c2c 100644 --- a/packages/g6/__tests__/demos/element-state.ts +++ b/packages/g6/__tests__/demos/element-state.ts @@ -5,12 +5,12 @@ export const elementState: TestCase = async (context) => { ...context, data: { nodes: [ - { id: 'node-1', style: { x: 50, y: 50, states: ['active', 'selected'] } }, + { id: 'node-1', states: ['active', 'selected'], style: { x: 50, y: 50 } }, { id: 'node-2', style: { x: 200, y: 50 } }, - { id: 'node-3', style: { x: 125, y: 150, states: ['active'] } }, + { id: 'node-3', states: ['active'], style: { x: 125, y: 150 } }, ], edges: [ - { id: 'edge-1', source: 'node-1', target: 'node-2', style: { states: ['active'] } }, + { id: 'edge-1', source: 'node-1', target: 'node-2', states: ['active'] }, { id: 'edge-2', source: 'node-2', target: 'node-3' }, { id: 'edge-3', source: 'node-3', target: 'node-1' }, ], diff --git a/packages/g6/__tests__/demos/index.ts b/packages/g6/__tests__/demos/index.ts index e8c002bfe1..9579fcf006 100644 --- a/packages/g6/__tests__/demos/index.ts +++ b/packages/g6/__tests__/demos/index.ts @@ -34,6 +34,7 @@ export * from './element-edge-port'; export * from './element-edge-quadratic'; export * from './element-label-background'; export * from './element-label-oversized'; +export * from './element-node-badges'; export * from './element-node-circle'; export * from './element-node-diamond'; export * from './element-node-donut'; diff --git a/packages/g6/__tests__/snapshots/animations/element-state-switch/default-0.svg b/packages/g6/__tests__/snapshots/animations/element-state-switch/default-0.svg index ad31c61d3b..b2a74d0c31 100644 --- a/packages/g6/__tests__/snapshots/animations/element-state-switch/default-0.svg +++ b/packages/g6/__tests__/snapshots/animations/element-state-switch/default-0.svg @@ -14,8 +14,8 @@ - - + + diff --git a/packages/g6/__tests__/snapshots/animations/element-state-switch/default-1000.svg b/packages/g6/__tests__/snapshots/animations/element-state-switch/default-1000.svg index 87032ccce0..d6c06dfefe 100644 --- a/packages/g6/__tests__/snapshots/animations/element-state-switch/default-1000.svg +++ b/packages/g6/__tests__/snapshots/animations/element-state-switch/default-1000.svg @@ -14,8 +14,8 @@ - - + + diff --git a/packages/g6/__tests__/snapshots/animations/element-state-switch/default-200.svg b/packages/g6/__tests__/snapshots/animations/element-state-switch/default-200.svg index 80db630349..db9846d19f 100644 --- a/packages/g6/__tests__/snapshots/animations/element-state-switch/default-200.svg +++ b/packages/g6/__tests__/snapshots/animations/element-state-switch/default-200.svg @@ -14,8 +14,8 @@ - - + + diff --git a/packages/g6/__tests__/snapshots/behaviors/brush-select/brush-selected-1.svg b/packages/g6/__tests__/snapshots/behaviors/brush-select/brush-selected-1.svg index 76be5c0ae0..7833772d36 100644 --- a/packages/g6/__tests__/snapshots/behaviors/brush-select/brush-selected-1.svg +++ b/packages/g6/__tests__/snapshots/behaviors/brush-select/brush-selected-1.svg @@ -5,7 +5,7 @@ - + @@ -16,8 +16,8 @@ - - + + @@ -27,8 +27,8 @@ - - + + @@ -38,8 +38,8 @@ - - + + @@ -49,8 +49,8 @@ - - + + diff --git a/packages/g6/__tests__/snapshots/behaviors/brush-select/brush-selected-2.svg b/packages/g6/__tests__/snapshots/behaviors/brush-select/brush-selected-2.svg index 9b6f768c6f..2e9797c93d 100644 --- a/packages/g6/__tests__/snapshots/behaviors/brush-select/brush-selected-2.svg +++ b/packages/g6/__tests__/snapshots/behaviors/brush-select/brush-selected-2.svg @@ -5,7 +5,7 @@ - + @@ -16,8 +16,8 @@ - - + + diff --git a/packages/g6/__tests__/snapshots/behaviors/brush-select/brush-selected-3.svg b/packages/g6/__tests__/snapshots/behaviors/brush-select/brush-selected-3.svg index 76be5c0ae0..7833772d36 100644 --- a/packages/g6/__tests__/snapshots/behaviors/brush-select/brush-selected-3.svg +++ b/packages/g6/__tests__/snapshots/behaviors/brush-select/brush-selected-3.svg @@ -5,7 +5,7 @@ - + @@ -16,8 +16,8 @@ - - + + @@ -27,8 +27,8 @@ - - + + @@ -38,8 +38,8 @@ - - + + @@ -49,8 +49,8 @@ - - + + diff --git a/packages/g6/__tests__/snapshots/behaviors/brush-select/brush-selected-4.svg b/packages/g6/__tests__/snapshots/behaviors/brush-select/brush-selected-4.svg index 76be5c0ae0..7833772d36 100644 --- a/packages/g6/__tests__/snapshots/behaviors/brush-select/brush-selected-4.svg +++ b/packages/g6/__tests__/snapshots/behaviors/brush-select/brush-selected-4.svg @@ -5,7 +5,7 @@ - + @@ -16,8 +16,8 @@ - - + + @@ -27,8 +27,8 @@ - - + + @@ -38,8 +38,8 @@ - - + + @@ -49,8 +49,8 @@ - - + + diff --git a/packages/g6/__tests__/snapshots/behaviors/brush-select/brush-selected-5.svg b/packages/g6/__tests__/snapshots/behaviors/brush-select/brush-selected-5.svg index a3f9e79fcd..365809e65a 100644 --- a/packages/g6/__tests__/snapshots/behaviors/brush-select/brush-selected-5.svg +++ b/packages/g6/__tests__/snapshots/behaviors/brush-select/brush-selected-5.svg @@ -5,7 +5,7 @@ - + @@ -16,8 +16,8 @@ - - + + @@ -27,8 +27,8 @@ - - + + @@ -38,8 +38,8 @@ - - + + @@ -49,8 +49,8 @@ - - + + diff --git a/packages/g6/__tests__/snapshots/behaviors/brush-select/brush-selected-mode-diff.svg b/packages/g6/__tests__/snapshots/behaviors/brush-select/brush-selected-mode-diff.svg index a3f9e79fcd..365809e65a 100644 --- a/packages/g6/__tests__/snapshots/behaviors/brush-select/brush-selected-mode-diff.svg +++ b/packages/g6/__tests__/snapshots/behaviors/brush-select/brush-selected-mode-diff.svg @@ -5,7 +5,7 @@ - + @@ -16,8 +16,8 @@ - - + + @@ -27,8 +27,8 @@ - - + + @@ -38,8 +38,8 @@ - - + + @@ -49,8 +49,8 @@ - - + + diff --git a/packages/g6/__tests__/snapshots/behaviors/brush-select/brush-selected-mode-union.svg b/packages/g6/__tests__/snapshots/behaviors/brush-select/brush-selected-mode-union.svg index a3f9e79fcd..365809e65a 100644 --- a/packages/g6/__tests__/snapshots/behaviors/brush-select/brush-selected-mode-union.svg +++ b/packages/g6/__tests__/snapshots/behaviors/brush-select/brush-selected-mode-union.svg @@ -5,7 +5,7 @@ - + @@ -16,8 +16,8 @@ - - + + @@ -27,8 +27,8 @@ - - + + @@ -38,8 +38,8 @@ - - + + @@ -49,8 +49,8 @@ - - + + diff --git a/packages/g6/__tests__/snapshots/behaviors/brush-select/brush-selecting-5.svg b/packages/g6/__tests__/snapshots/behaviors/brush-select/brush-selecting-5.svg index 95a42d082a..548ea2d474 100644 --- a/packages/g6/__tests__/snapshots/behaviors/brush-select/brush-selecting-5.svg +++ b/packages/g6/__tests__/snapshots/behaviors/brush-select/brush-selecting-5.svg @@ -5,7 +5,7 @@ - + @@ -16,8 +16,8 @@ - - + + @@ -27,8 +27,8 @@ - - + + @@ -38,8 +38,8 @@ - - + + @@ -49,8 +49,8 @@ - - + + diff --git a/packages/g6/__tests__/snapshots/behaviors/click-element/custom-state.svg b/packages/g6/__tests__/snapshots/behaviors/click-element/custom-state.svg index def1b2391d..9060a8a5bc 100644 --- a/packages/g6/__tests__/snapshots/behaviors/click-element/custom-state.svg +++ b/packages/g6/__tests__/snapshots/behaviors/click-element/custom-state.svg @@ -7,421 +7,421 @@ - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + @@ -436,167 +436,167 @@ - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + diff --git a/packages/g6/__tests__/snapshots/behaviors/click-element/edge-1-degree.svg b/packages/g6/__tests__/snapshots/behaviors/click-element/edge-1-degree.svg index 75c6ab3350..3fd0c289a9 100644 --- a/packages/g6/__tests__/snapshots/behaviors/click-element/edge-1-degree.svg +++ b/packages/g6/__tests__/snapshots/behaviors/click-element/edge-1-degree.svg @@ -7,8 +7,8 @@ - - + + diff --git a/packages/g6/__tests__/snapshots/behaviors/click-element/node-1-degree.svg b/packages/g6/__tests__/snapshots/behaviors/click-element/node-1-degree.svg index 6e482a7303..e85cd07ec1 100644 --- a/packages/g6/__tests__/snapshots/behaviors/click-element/node-1-degree.svg +++ b/packages/g6/__tests__/snapshots/behaviors/click-element/node-1-degree.svg @@ -7,8 +7,8 @@ - - + + @@ -18,8 +18,8 @@ - - + + @@ -29,8 +29,8 @@ - - + + @@ -40,8 +40,8 @@ - - + + @@ -51,8 +51,8 @@ - - + + @@ -62,8 +62,8 @@ - - + + @@ -73,8 +73,8 @@ - - + + @@ -84,8 +84,8 @@ - - + + @@ -95,8 +95,8 @@ - - + + @@ -106,8 +106,8 @@ - - + + @@ -117,8 +117,8 @@ - - + + @@ -128,8 +128,8 @@ - - + + @@ -139,8 +139,8 @@ - - + + @@ -150,8 +150,8 @@ - - + + diff --git a/packages/g6/__tests__/snapshots/behaviors/hover-element/1-degree-edge.svg b/packages/g6/__tests__/snapshots/behaviors/hover-element/1-degree-edge.svg index 6bc9e892ba..f6690635a5 100644 --- a/packages/g6/__tests__/snapshots/behaviors/hover-element/1-degree-edge.svg +++ b/packages/g6/__tests__/snapshots/behaviors/hover-element/1-degree-edge.svg @@ -7,8 +7,8 @@ - - + + @@ -18,414 +18,414 @@ - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + @@ -448,162 +448,162 @@ - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + diff --git a/packages/g6/__tests__/snapshots/behaviors/hover-element/1-degree-node.svg b/packages/g6/__tests__/snapshots/behaviors/hover-element/1-degree-node.svg index 4ff6949ad1..6095986a66 100644 --- a/packages/g6/__tests__/snapshots/behaviors/hover-element/1-degree-node.svg +++ b/packages/g6/__tests__/snapshots/behaviors/hover-element/1-degree-node.svg @@ -7,8 +7,8 @@ - - + + @@ -18,8 +18,8 @@ - - + + @@ -29,8 +29,8 @@ - - + + @@ -40,8 +40,8 @@ - - + + @@ -51,8 +51,8 @@ - - + + @@ -62,8 +62,8 @@ - - + + @@ -73,8 +73,8 @@ - - + + @@ -84,8 +84,8 @@ - - + + @@ -95,8 +95,8 @@ - - + + @@ -106,8 +106,8 @@ - - + + @@ -117,8 +117,8 @@ - - + + @@ -128,8 +128,8 @@ - - + + @@ -139,8 +139,8 @@ - - + + @@ -150,8 +150,8 @@ - - + + @@ -161,323 +161,323 @@ - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + @@ -532,7 +532,7 @@ - + @@ -577,7 +577,7 @@ - + @@ -614,87 +614,87 @@ - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + diff --git a/packages/g6/__tests__/snapshots/behaviors/hover-element/2-degree-edge.svg b/packages/g6/__tests__/snapshots/behaviors/hover-element/2-degree-edge.svg index 4ff6949ad1..6095986a66 100644 --- a/packages/g6/__tests__/snapshots/behaviors/hover-element/2-degree-edge.svg +++ b/packages/g6/__tests__/snapshots/behaviors/hover-element/2-degree-edge.svg @@ -7,8 +7,8 @@ - - + + @@ -18,8 +18,8 @@ - - + + @@ -29,8 +29,8 @@ - - + + @@ -40,8 +40,8 @@ - - + + @@ -51,8 +51,8 @@ - - + + @@ -62,8 +62,8 @@ - - + + @@ -73,8 +73,8 @@ - - + + @@ -84,8 +84,8 @@ - - + + @@ -95,8 +95,8 @@ - - + + @@ -106,8 +106,8 @@ - - + + @@ -117,8 +117,8 @@ - - + + @@ -128,8 +128,8 @@ - - + + @@ -139,8 +139,8 @@ - - + + @@ -150,8 +150,8 @@ - - + + @@ -161,323 +161,323 @@ - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + @@ -532,7 +532,7 @@ - + @@ -577,7 +577,7 @@ - + @@ -614,87 +614,87 @@ - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + diff --git a/packages/g6/__tests__/snapshots/behaviors/hover-element/2-degree-node.svg b/packages/g6/__tests__/snapshots/behaviors/hover-element/2-degree-node.svg index 2e6a77e5fc..f063efa3d2 100644 --- a/packages/g6/__tests__/snapshots/behaviors/hover-element/2-degree-node.svg +++ b/packages/g6/__tests__/snapshots/behaviors/hover-element/2-degree-node.svg @@ -7,8 +7,8 @@ - - + + @@ -18,8 +18,8 @@ - - + + @@ -29,8 +29,8 @@ - - + + @@ -40,8 +40,8 @@ - - + + @@ -51,8 +51,8 @@ - - + + @@ -62,8 +62,8 @@ - - + + @@ -73,8 +73,8 @@ - - + + @@ -84,8 +84,8 @@ - - + + @@ -95,8 +95,8 @@ - - + + @@ -106,8 +106,8 @@ - - + + @@ -117,8 +117,8 @@ - - + + @@ -128,8 +128,8 @@ - - + + @@ -139,8 +139,8 @@ - - + + @@ -150,8 +150,8 @@ - - + + @@ -161,8 +161,8 @@ - - + + @@ -172,8 +172,8 @@ - - + + @@ -183,8 +183,8 @@ - - + + @@ -194,8 +194,8 @@ - - + + @@ -205,8 +205,8 @@ - - + + @@ -216,8 +216,8 @@ - - + + @@ -227,8 +227,8 @@ - - + + @@ -238,8 +238,8 @@ - - + + @@ -249,8 +249,8 @@ - - + + @@ -260,8 +260,8 @@ - - + + @@ -271,8 +271,8 @@ - - + + @@ -282,8 +282,8 @@ - - + + @@ -293,8 +293,8 @@ - - + + @@ -304,8 +304,8 @@ - - + + @@ -315,8 +315,8 @@ - - + + @@ -326,8 +326,8 @@ - - + + @@ -337,8 +337,8 @@ - - + + @@ -348,8 +348,8 @@ - - + + @@ -359,8 +359,8 @@ - - + + @@ -370,8 +370,8 @@ - - + + @@ -381,8 +381,8 @@ - - + + @@ -392,176 +392,176 @@ - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + @@ -720,7 +720,7 @@ - + @@ -749,7 +749,7 @@ - + @@ -762,47 +762,47 @@ - + - + - + - + - + - + - + - + - + diff --git a/packages/g6/__tests__/snapshots/behaviors/hover-element/state.svg b/packages/g6/__tests__/snapshots/behaviors/hover-element/state.svg index def1b2391d..9060a8a5bc 100644 --- a/packages/g6/__tests__/snapshots/behaviors/hover-element/state.svg +++ b/packages/g6/__tests__/snapshots/behaviors/hover-element/state.svg @@ -7,421 +7,421 @@ - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + @@ -436,167 +436,167 @@ - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + diff --git a/packages/g6/__tests__/snapshots/behaviors/lasso-select/lasso-selected-1.svg b/packages/g6/__tests__/snapshots/behaviors/lasso-select/lasso-selected-1.svg index 76be5c0ae0..7833772d36 100644 --- a/packages/g6/__tests__/snapshots/behaviors/lasso-select/lasso-selected-1.svg +++ b/packages/g6/__tests__/snapshots/behaviors/lasso-select/lasso-selected-1.svg @@ -5,7 +5,7 @@ - + @@ -16,8 +16,8 @@ - - + + @@ -27,8 +27,8 @@ - - + + @@ -38,8 +38,8 @@ - - + + @@ -49,8 +49,8 @@ - - + + diff --git a/packages/g6/__tests__/snapshots/behaviors/lasso-select/lasso-selected-2.svg b/packages/g6/__tests__/snapshots/behaviors/lasso-select/lasso-selected-2.svg index 3286faf5d3..bec0d08da3 100644 --- a/packages/g6/__tests__/snapshots/behaviors/lasso-select/lasso-selected-2.svg +++ b/packages/g6/__tests__/snapshots/behaviors/lasso-select/lasso-selected-2.svg @@ -5,7 +5,7 @@ - + @@ -37,8 +37,8 @@ - - + + diff --git a/packages/g6/__tests__/snapshots/behaviors/lasso-select/lasso-selected-3.svg b/packages/g6/__tests__/snapshots/behaviors/lasso-select/lasso-selected-3.svg index 9b6f768c6f..2e9797c93d 100644 --- a/packages/g6/__tests__/snapshots/behaviors/lasso-select/lasso-selected-3.svg +++ b/packages/g6/__tests__/snapshots/behaviors/lasso-select/lasso-selected-3.svg @@ -5,7 +5,7 @@ - + @@ -16,8 +16,8 @@ - - + + diff --git a/packages/g6/__tests__/snapshots/behaviors/lasso-select/lasso-selected-5.svg b/packages/g6/__tests__/snapshots/behaviors/lasso-select/lasso-selected-5.svg index a3f9e79fcd..365809e65a 100644 --- a/packages/g6/__tests__/snapshots/behaviors/lasso-select/lasso-selected-5.svg +++ b/packages/g6/__tests__/snapshots/behaviors/lasso-select/lasso-selected-5.svg @@ -5,7 +5,7 @@ - + @@ -16,8 +16,8 @@ - - + + @@ -27,8 +27,8 @@ - - + + @@ -38,8 +38,8 @@ - - + + @@ -49,8 +49,8 @@ - - + + diff --git a/packages/g6/__tests__/snapshots/behaviors/lasso-select/lasso-selected-mode-diff.svg b/packages/g6/__tests__/snapshots/behaviors/lasso-select/lasso-selected-mode-diff.svg index a3f9e79fcd..365809e65a 100644 --- a/packages/g6/__tests__/snapshots/behaviors/lasso-select/lasso-selected-mode-diff.svg +++ b/packages/g6/__tests__/snapshots/behaviors/lasso-select/lasso-selected-mode-diff.svg @@ -5,7 +5,7 @@ - + @@ -16,8 +16,8 @@ - - + + @@ -27,8 +27,8 @@ - - + + @@ -38,8 +38,8 @@ - - + + @@ -49,8 +49,8 @@ - - + + diff --git a/packages/g6/__tests__/snapshots/behaviors/lasso-select/lasso-selected-mode-union.svg b/packages/g6/__tests__/snapshots/behaviors/lasso-select/lasso-selected-mode-union.svg index a3f9e79fcd..365809e65a 100644 --- a/packages/g6/__tests__/snapshots/behaviors/lasso-select/lasso-selected-mode-union.svg +++ b/packages/g6/__tests__/snapshots/behaviors/lasso-select/lasso-selected-mode-union.svg @@ -5,7 +5,7 @@ - + @@ -16,8 +16,8 @@ - - + + @@ -27,8 +27,8 @@ - - + + @@ -38,8 +38,8 @@ - - + + @@ -49,8 +49,8 @@ - - + + diff --git a/packages/g6/__tests__/snapshots/behaviors/lasso-select/lasso-selecting-5.svg b/packages/g6/__tests__/snapshots/behaviors/lasso-select/lasso-selecting-5.svg index c0677d1f34..dff54e03a0 100644 --- a/packages/g6/__tests__/snapshots/behaviors/lasso-select/lasso-selecting-5.svg +++ b/packages/g6/__tests__/snapshots/behaviors/lasso-select/lasso-selecting-5.svg @@ -5,7 +5,7 @@ - + @@ -16,8 +16,8 @@ - - + + @@ -27,8 +27,8 @@ - - + + @@ -38,8 +38,8 @@ - - + + @@ -49,8 +49,8 @@ - - + + diff --git a/packages/g6/__tests__/snapshots/elements/edges/cubic-horizontal/default.svg b/packages/g6/__tests__/snapshots/elements/edges/cubic-horizontal/default.svg index 4bc4d75325..0d31950165 100644 --- a/packages/g6/__tests__/snapshots/elements/edges/cubic-horizontal/default.svg +++ b/packages/g6/__tests__/snapshots/elements/edges/cubic-horizontal/default.svg @@ -28,8 +28,8 @@ - - + + @@ -51,14 +51,14 @@ - + - - + + - + @@ -76,10 +76,10 @@ - + - + @@ -99,16 +99,16 @@ - - + + - - + + - + diff --git a/packages/g6/__tests__/snapshots/elements/edges/cubic-vertical/default.svg b/packages/g6/__tests__/snapshots/elements/edges/cubic-vertical/default.svg index 8dbb67d66f..aca0370da8 100644 --- a/packages/g6/__tests__/snapshots/elements/edges/cubic-vertical/default.svg +++ b/packages/g6/__tests__/snapshots/elements/edges/cubic-vertical/default.svg @@ -28,8 +28,8 @@ - - + + @@ -51,14 +51,14 @@ - + - - + + - + @@ -76,10 +76,10 @@ - + - + @@ -99,16 +99,16 @@ - - + + - - + + - + diff --git a/packages/g6/__tests__/snapshots/elements/edges/cubic/default.svg b/packages/g6/__tests__/snapshots/elements/edges/cubic/default.svg index 46400b8389..2666992040 100644 --- a/packages/g6/__tests__/snapshots/elements/edges/cubic/default.svg +++ b/packages/g6/__tests__/snapshots/elements/edges/cubic/default.svg @@ -28,8 +28,8 @@ - - + + @@ -51,14 +51,14 @@ - + - - + + - + @@ -76,10 +76,10 @@ - + - + @@ -99,16 +99,16 @@ - - + + - - + + - + diff --git a/packages/g6/__tests__/snapshots/elements/edges/line/default.svg b/packages/g6/__tests__/snapshots/elements/edges/line/default.svg index a55634d0ba..cacf332441 100644 --- a/packages/g6/__tests__/snapshots/elements/edges/line/default.svg +++ b/packages/g6/__tests__/snapshots/elements/edges/line/default.svg @@ -28,8 +28,8 @@ - - + + @@ -51,14 +51,14 @@ - + - - + + - + @@ -76,10 +76,10 @@ - + - + @@ -99,16 +99,16 @@ - - + + - - + + - + diff --git a/packages/g6/__tests__/snapshots/elements/edges/quadratic/default.svg b/packages/g6/__tests__/snapshots/elements/edges/quadratic/default.svg index a32c0b820d..8fc9a17b00 100644 --- a/packages/g6/__tests__/snapshots/elements/edges/quadratic/default.svg +++ b/packages/g6/__tests__/snapshots/elements/edges/quadratic/default.svg @@ -28,8 +28,8 @@ - - + + @@ -51,14 +51,14 @@ - + - - + + - + @@ -76,10 +76,10 @@ - + - + @@ -99,16 +99,16 @@ - - + + - - + + - + diff --git a/packages/g6/__tests__/snapshots/elements/nodes/circle/default.svg b/packages/g6/__tests__/snapshots/elements/nodes/circle/default.svg index 193a5adb3c..b1570d4223 100644 --- a/packages/g6/__tests__/snapshots/elements/nodes/circle/default.svg +++ b/packages/g6/__tests__/snapshots/elements/nodes/circle/default.svg @@ -12,7 +12,7 @@ - circle + default @@ -32,7 +32,7 @@ - circle-halo + halo @@ -49,7 +49,7 @@ - circle-badges + badges @@ -102,7 +102,7 @@ - circle-ports + ports @@ -134,7 +134,7 @@ - circle-active + active @@ -154,7 +154,7 @@ - circle-selected + selected @@ -166,12 +166,12 @@ - + - circle-highlight + highlight @@ -183,12 +183,12 @@ - + - circle-inactive + inactive @@ -205,7 +205,7 @@ - circle-disabled + disabled diff --git a/packages/g6/__tests__/snapshots/elements/nodes/diamond/default.svg b/packages/g6/__tests__/snapshots/elements/nodes/diamond/default.svg index 5af707fd65..9296cfcbdc 100644 --- a/packages/g6/__tests__/snapshots/elements/nodes/diamond/default.svg +++ b/packages/g6/__tests__/snapshots/elements/nodes/diamond/default.svg @@ -12,7 +12,7 @@ - diamond + default @@ -32,7 +32,7 @@ - diamond-halo + halo @@ -49,7 +49,7 @@ - diamond-badges + badges @@ -102,7 +102,7 @@ - diamond-ports + ports @@ -134,7 +134,7 @@ - diamond-active + active @@ -154,7 +154,7 @@ - diamond-selected + selected @@ -171,7 +171,7 @@ - diamond-highlight + highlight @@ -183,18 +183,18 @@ - + - diamond-inactive + inactive - + @@ -205,7 +205,7 @@ - diamond-disabled + disabled diff --git a/packages/g6/__tests__/snapshots/elements/nodes/donut/default.svg b/packages/g6/__tests__/snapshots/elements/nodes/donut/default.svg index 47d934404c..79c4c083c7 100644 --- a/packages/g6/__tests__/snapshots/elements/nodes/donut/default.svg +++ b/packages/g6/__tests__/snapshots/elements/nodes/donut/default.svg @@ -12,7 +12,7 @@ - donut + default @@ -35,7 +35,7 @@ - donut-halo + halo @@ -58,7 +58,7 @@ - donut-badges + badges @@ -120,7 +120,7 @@ - donut-ports + ports @@ -161,7 +161,7 @@ - donut-active + active @@ -187,7 +187,7 @@ - donut-selected + selected @@ -205,12 +205,12 @@ - + - donut-highlight + highlight @@ -231,12 +231,12 @@ - + - donut-inactive + inactive @@ -259,7 +259,7 @@ - donut-disabled + disabled diff --git a/packages/g6/__tests__/snapshots/elements/nodes/ellipse/default.svg b/packages/g6/__tests__/snapshots/elements/nodes/ellipse/default.svg index 837e44f632..e034e7cb47 100644 --- a/packages/g6/__tests__/snapshots/elements/nodes/ellipse/default.svg +++ b/packages/g6/__tests__/snapshots/elements/nodes/ellipse/default.svg @@ -12,7 +12,7 @@ - ellipse + default @@ -32,7 +32,7 @@ - ellipse-halo + halo @@ -49,7 +49,7 @@ - ellipse-badges + badges @@ -102,7 +102,7 @@ - ellipse-ports + ports @@ -134,7 +134,7 @@ - ellipse-active + active @@ -154,7 +154,7 @@ - ellipse-selected + selected @@ -166,12 +166,12 @@ - + - ellipse-highlight + highlight @@ -183,12 +183,12 @@ - + - ellipse-inactive + inactive @@ -205,7 +205,7 @@ - ellipse-disabled + disabled diff --git a/packages/g6/__tests__/snapshots/elements/nodes/hexagon/default.svg b/packages/g6/__tests__/snapshots/elements/nodes/hexagon/default.svg index 0796235d19..7ee8bf0bf5 100644 --- a/packages/g6/__tests__/snapshots/elements/nodes/hexagon/default.svg +++ b/packages/g6/__tests__/snapshots/elements/nodes/hexagon/default.svg @@ -12,7 +12,7 @@ - hexagon + default @@ -32,7 +32,7 @@ - hexagon-halo + halo @@ -49,7 +49,7 @@ - hexagon-badges + badges @@ -102,7 +102,7 @@ - hexagon-ports + ports @@ -134,7 +134,7 @@ - hexagon-active + active @@ -154,7 +154,7 @@ - hexagon-selected + selected @@ -171,7 +171,7 @@ - hexagon-highlight + highlight @@ -183,12 +183,12 @@ - + - hexagon-inactive + inactive @@ -205,7 +205,7 @@ - hexagon-disabled + disabled diff --git a/packages/g6/__tests__/snapshots/elements/nodes/image/default.svg b/packages/g6/__tests__/snapshots/elements/nodes/image/default.svg index 4d67a1c836..de6fadd39f 100644 --- a/packages/g6/__tests__/snapshots/elements/nodes/image/default.svg +++ b/packages/g6/__tests__/snapshots/elements/nodes/image/default.svg @@ -12,7 +12,7 @@ - image + default @@ -27,7 +27,7 @@ - image-halo + halo @@ -39,7 +39,7 @@ - image-badges + badges @@ -87,7 +87,7 @@ - image-ports + ports @@ -114,7 +114,7 @@ - image-active + active @@ -129,43 +129,43 @@ - image-selected + selected - + - image-highlight + highlight - + - image-inactive + inactive - + - image-disabled + disabled diff --git a/packages/g6/__tests__/snapshots/elements/nodes/rect/default.svg b/packages/g6/__tests__/snapshots/elements/nodes/rect/default.svg index 9477adab9c..12d2efbd47 100644 --- a/packages/g6/__tests__/snapshots/elements/nodes/rect/default.svg +++ b/packages/g6/__tests__/snapshots/elements/nodes/rect/default.svg @@ -12,7 +12,7 @@ - rect + default @@ -32,7 +32,7 @@ - rect-halo + halo @@ -49,7 +49,7 @@ - rect-badges + badges @@ -102,7 +102,7 @@ - rect-ports + ports @@ -134,7 +134,7 @@ - rect-active + active @@ -154,7 +154,7 @@ - rect-selected + selected @@ -166,12 +166,12 @@ - + - rect-highlight + highlight @@ -183,12 +183,12 @@ - + - rect-inactive + inactive @@ -205,7 +205,7 @@ - rect-disabled + disabled diff --git a/packages/g6/__tests__/snapshots/elements/nodes/star/default.svg b/packages/g6/__tests__/snapshots/elements/nodes/star/default.svg index 4e2a6e54a3..ed3f9a17c6 100644 --- a/packages/g6/__tests__/snapshots/elements/nodes/star/default.svg +++ b/packages/g6/__tests__/snapshots/elements/nodes/star/default.svg @@ -12,7 +12,7 @@ - star + default @@ -32,7 +32,7 @@ - star-halo + halo @@ -49,7 +49,7 @@ - star-badges + badges @@ -102,7 +102,7 @@ - star-ports + ports @@ -134,7 +134,7 @@ - star-active + active @@ -154,7 +154,7 @@ - star-selected + selected @@ -171,7 +171,7 @@ - star-highlight + highlight @@ -183,12 +183,12 @@ - + - star-inactive + inactive @@ -205,7 +205,7 @@ - star-disabled + disabled diff --git a/packages/g6/__tests__/snapshots/elements/nodes/triangle/default.svg b/packages/g6/__tests__/snapshots/elements/nodes/triangle/default.svg index c8a01e62c5..835399c55a 100644 --- a/packages/g6/__tests__/snapshots/elements/nodes/triangle/default.svg +++ b/packages/g6/__tests__/snapshots/elements/nodes/triangle/default.svg @@ -12,7 +12,7 @@ - triangle + default @@ -32,7 +32,7 @@ - triangle-halo + halo @@ -49,7 +49,7 @@ - triangle-badges + badges @@ -102,7 +102,7 @@ - triangle-ports + ports @@ -131,7 +131,7 @@ - triangle-active + active @@ -151,7 +151,7 @@ - triangle-selected + selected @@ -168,7 +168,7 @@ - triangle-highlight + highlight @@ -180,12 +180,12 @@ - + - triangle-inactive + inactive @@ -195,6 +195,23 @@ + + + + + + + + disabled + + + + + + + + + diff --git a/packages/g6/__tests__/snapshots/elements/state/default.svg b/packages/g6/__tests__/snapshots/elements/state/default.svg index e635de0aac..872c401771 100644 --- a/packages/g6/__tests__/snapshots/elements/state/default.svg +++ b/packages/g6/__tests__/snapshots/elements/state/default.svg @@ -7,8 +7,8 @@ - - + + diff --git a/packages/g6/__tests__/snapshots/elements/state/setState-single-default.svg b/packages/g6/__tests__/snapshots/elements/state/setState-single-default.svg index 84887348ed..0a642625b4 100644 --- a/packages/g6/__tests__/snapshots/elements/state/setState-single-default.svg +++ b/packages/g6/__tests__/snapshots/elements/state/setState-single-default.svg @@ -14,8 +14,8 @@ - - + + diff --git a/packages/g6/__tests__/snapshots/elements/state/setState-single.svg b/packages/g6/__tests__/snapshots/elements/state/setState-single.svg index c25c483814..5a6e629b62 100644 --- a/packages/g6/__tests__/snapshots/elements/state/setState-single.svg +++ b/packages/g6/__tests__/snapshots/elements/state/setState-single.svg @@ -14,8 +14,8 @@ - - + + diff --git a/packages/g6/__tests__/snapshots/elements/state/setState.svg b/packages/g6/__tests__/snapshots/elements/state/setState.svg index c7d07f35bf..8995e4d292 100644 --- a/packages/g6/__tests__/snapshots/elements/state/setState.svg +++ b/packages/g6/__tests__/snapshots/elements/state/setState.svg @@ -14,8 +14,8 @@ - - + + diff --git a/packages/g6/__tests__/snapshots/plugins/bubble-sets/default.svg b/packages/g6/__tests__/snapshots/plugins/bubble-sets/default.svg index 5d4e44290a..28a31948ed 100644 --- a/packages/g6/__tests__/snapshots/plugins/bubble-sets/default.svg +++ b/packages/g6/__tests__/snapshots/plugins/bubble-sets/default.svg @@ -5,7 +5,7 @@ - + diff --git a/packages/g6/__tests__/snapshots/plugins/bubble-sets/element-position-update.svg b/packages/g6/__tests__/snapshots/plugins/bubble-sets/element-position-update.svg index 8226733110..2b36441b6f 100644 --- a/packages/g6/__tests__/snapshots/plugins/bubble-sets/element-position-update.svg +++ b/packages/g6/__tests__/snapshots/plugins/bubble-sets/element-position-update.svg @@ -5,7 +5,7 @@ - + diff --git a/packages/g6/__tests__/snapshots/plugins/bubble-sets/member-add.svg b/packages/g6/__tests__/snapshots/plugins/bubble-sets/member-add.svg index 7401e11105..3468893ce6 100644 --- a/packages/g6/__tests__/snapshots/plugins/bubble-sets/member-add.svg +++ b/packages/g6/__tests__/snapshots/plugins/bubble-sets/member-add.svg @@ -5,7 +5,7 @@ - + diff --git a/packages/g6/__tests__/snapshots/plugins/bubble-sets/member-remove.svg b/packages/g6/__tests__/snapshots/plugins/bubble-sets/member-remove.svg index 5d4e44290a..28a31948ed 100644 --- a/packages/g6/__tests__/snapshots/plugins/bubble-sets/member-remove.svg +++ b/packages/g6/__tests__/snapshots/plugins/bubble-sets/member-remove.svg @@ -5,7 +5,7 @@ - + diff --git a/packages/g6/__tests__/snapshots/plugins/bubble-sets/member-update.svg b/packages/g6/__tests__/snapshots/plugins/bubble-sets/member-update.svg index fd51e3cbcf..32fb1c3fda 100644 --- a/packages/g6/__tests__/snapshots/plugins/bubble-sets/member-update.svg +++ b/packages/g6/__tests__/snapshots/plugins/bubble-sets/member-update.svg @@ -5,7 +5,7 @@ - + diff --git a/packages/g6/__tests__/snapshots/plugins/bubble-sets/non-member-add.svg b/packages/g6/__tests__/snapshots/plugins/bubble-sets/non-member-add.svg index 12ff1ab748..9b795f05bd 100644 --- a/packages/g6/__tests__/snapshots/plugins/bubble-sets/non-member-add.svg +++ b/packages/g6/__tests__/snapshots/plugins/bubble-sets/non-member-add.svg @@ -5,7 +5,7 @@ - + diff --git a/packages/g6/__tests__/snapshots/plugins/bubble-sets/non-member-remove.svg b/packages/g6/__tests__/snapshots/plugins/bubble-sets/non-member-remove.svg index 5d4e44290a..28a31948ed 100644 --- a/packages/g6/__tests__/snapshots/plugins/bubble-sets/non-member-remove.svg +++ b/packages/g6/__tests__/snapshots/plugins/bubble-sets/non-member-remove.svg @@ -5,7 +5,7 @@ - + diff --git a/packages/g6/__tests__/snapshots/plugins/bubble-sets/non-member-update.svg b/packages/g6/__tests__/snapshots/plugins/bubble-sets/non-member-update.svg index 7f9e8b399f..dca0ce5dfc 100644 --- a/packages/g6/__tests__/snapshots/plugins/bubble-sets/non-member-update.svg +++ b/packages/g6/__tests__/snapshots/plugins/bubble-sets/non-member-update.svg @@ -5,7 +5,7 @@ - + diff --git a/packages/g6/__tests__/snapshots/plugins/bubble-sets/options-update.svg b/packages/g6/__tests__/snapshots/plugins/bubble-sets/options-update.svg index 7aba6d6b2d..7290b96c0b 100644 --- a/packages/g6/__tests__/snapshots/plugins/bubble-sets/options-update.svg +++ b/packages/g6/__tests__/snapshots/plugins/bubble-sets/options-update.svg @@ -5,7 +5,7 @@ - + diff --git a/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/addMember__node3.svg b/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/addMember__node3.svg index 8645911026..bcd43d2423 100644 --- a/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/addMember__node3.svg +++ b/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/addMember__node3.svg @@ -5,7 +5,7 @@ - + diff --git a/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/corner__rounded.svg b/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/corner__rounded.svg index 98209a7a31..512d26ec3b 100644 --- a/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/corner__rounded.svg +++ b/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/corner__rounded.svg @@ -5,7 +5,7 @@ - + diff --git a/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/corner__sharp.svg b/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/corner__sharp.svg index 8a352af04b..bd51b86aa1 100644 --- a/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/corner__sharp.svg +++ b/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/corner__sharp.svg @@ -5,7 +5,7 @@ - + diff --git a/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/corner__smooth.svg b/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/corner__smooth.svg index 6d14dd4560..78b2b45e2a 100644 --- a/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/corner__smooth.svg +++ b/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/corner__smooth.svg @@ -5,7 +5,7 @@ - + diff --git a/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/default.svg b/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/default.svg index fdd9902b09..953cbe6351 100644 --- a/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/default.svg +++ b/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/default.svg @@ -5,7 +5,7 @@ - + diff --git a/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/labelAutoRotate__false.svg b/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/labelAutoRotate__false.svg index 9e2b0d1084..f6e205a492 100644 --- a/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/labelAutoRotate__false.svg +++ b/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/labelAutoRotate__false.svg @@ -5,7 +5,7 @@ - + diff --git a/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/labelAutoRotate__true.svg b/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/labelAutoRotate__true.svg index 8e5fb1d8d0..69b466956f 100644 --- a/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/labelAutoRotate__true.svg +++ b/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/labelAutoRotate__true.svg @@ -5,7 +5,7 @@ - + diff --git a/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/labelCloseToHull__false.svg b/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/labelCloseToHull__false.svg index 394967048c..1168f5e9be 100644 --- a/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/labelCloseToHull__false.svg +++ b/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/labelCloseToHull__false.svg @@ -5,7 +5,7 @@ - + diff --git a/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/labelCloseToHull__true.svg b/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/labelCloseToHull__true.svg index 197b9f77c8..b7adbc472c 100644 --- a/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/labelCloseToHull__true.svg +++ b/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/labelCloseToHull__true.svg @@ -5,7 +5,7 @@ - + diff --git a/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/labelPlacement__bottom.svg b/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/labelPlacement__bottom.svg index 8e5fb1d8d0..69b466956f 100644 --- a/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/labelPlacement__bottom.svg +++ b/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/labelPlacement__bottom.svg @@ -5,7 +5,7 @@ - + diff --git a/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/labelPlacement__left.svg b/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/labelPlacement__left.svg index 23538ce4c8..3ca565cf76 100644 --- a/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/labelPlacement__left.svg +++ b/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/labelPlacement__left.svg @@ -5,7 +5,7 @@ - + diff --git a/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/labelPlacement__right.svg b/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/labelPlacement__right.svg index 639938d1cd..84a6c18dd6 100644 --- a/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/labelPlacement__right.svg +++ b/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/labelPlacement__right.svg @@ -5,7 +5,7 @@ - + diff --git a/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/labelPlacement__top.svg b/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/labelPlacement__top.svg index d852215a70..2dad97f224 100644 --- a/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/labelPlacement__top.svg +++ b/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/labelPlacement__top.svg @@ -5,7 +5,7 @@ - + diff --git a/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/padding__0.svg b/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/padding__0.svg index 8e5fb1d8d0..69b466956f 100644 --- a/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/padding__0.svg +++ b/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/padding__0.svg @@ -5,7 +5,7 @@ - + diff --git a/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/padding__20.svg b/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/padding__20.svg index 1ea55b140f..c9f6406ce4 100644 --- a/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/padding__20.svg +++ b/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/padding__20.svg @@ -5,7 +5,7 @@ - + diff --git a/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/removeMember__node1.svg b/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/removeMember__node1.svg index cdb9696b1a..8766b0de20 100644 --- a/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/removeMember__node1.svg +++ b/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/removeMember__node1.svg @@ -5,7 +5,7 @@ - + diff --git a/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/updateMember.svg b/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/updateMember.svg index cadd90be1b..31509447b1 100644 --- a/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/updateMember.svg +++ b/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/updateMember.svg @@ -5,7 +5,7 @@ - + diff --git a/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/updateMember__position.svg b/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/updateMember__position.svg index 98c0ef07d1..98ffc012a7 100644 --- a/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/updateMember__position.svg +++ b/packages/g6/__tests__/snapshots/plugins/hull/plugin-hull/updateMember__position.svg @@ -5,7 +5,7 @@ - + diff --git a/packages/g6/__tests__/snapshots/runtime/element/default.svg b/packages/g6/__tests__/snapshots/runtime/element/default.svg index f748c3940b..08bff4293e 100644 --- a/packages/g6/__tests__/snapshots/runtime/element/default.svg +++ b/packages/g6/__tests__/snapshots/runtime/element/default.svg @@ -20,8 +20,8 @@ - - + + diff --git a/packages/g6/__tests__/snapshots/runtime/element/visibility/hidden.svg b/packages/g6/__tests__/snapshots/runtime/element/visibility/hidden.svg index b806d757aa..868bb3a00a 100644 --- a/packages/g6/__tests__/snapshots/runtime/element/visibility/hidden.svg +++ b/packages/g6/__tests__/snapshots/runtime/element/visibility/hidden.svg @@ -14,8 +14,8 @@ - - + + @@ -39,7 +39,7 @@ - + diff --git a/packages/g6/__tests__/snapshots/runtime/element/visibility/visible.svg b/packages/g6/__tests__/snapshots/runtime/element/visibility/visible.svg index c655237491..21a4697054 100644 --- a/packages/g6/__tests__/snapshots/runtime/element/visibility/visible.svg +++ b/packages/g6/__tests__/snapshots/runtime/element/visibility/visible.svg @@ -14,8 +14,8 @@ - - + + @@ -39,7 +39,7 @@ - + diff --git a/packages/g6/__tests__/unit/animations/element-state-switch.spec.ts b/packages/g6/__tests__/unit/animations/element-state-switch.spec.ts index 999aea5237..3dde9c3570 100644 --- a/packages/g6/__tests__/unit/animations/element-state-switch.spec.ts +++ b/packages/g6/__tests__/unit/animations/element-state-switch.spec.ts @@ -4,19 +4,19 @@ import { createDemoGraph } from '@@/utils'; describe('animation element state switch', () => { it('animation element state switch', async () => { const graph = await createDemoGraph(animationElementStateSwitch, { animation: true }); - await expect(graph).toMatchAnimation(__filename, [0, 200, 1000], () => { + await expect(graph).toMatchAnimation(__filename, [0, 200, 1000], async () => { graph.updateData({ nodes: [ - { id: 'node-1', style: { states: [] } }, - { id: 'node-2', style: { states: ['active'] } }, - { id: 'node-3', style: { states: ['selected'] } }, + { id: 'node-1', states: [] }, + { id: 'node-2', states: ['active'] }, + { id: 'node-3', states: ['selected'] }, ], edges: [ - { source: 'node-1', target: 'node-2', style: { states: [] } }, - { source: 'node-2', target: 'node-3', style: { states: ['active'] } }, + { source: 'node-1', target: 'node-2', states: [] }, + { source: 'node-2', target: 'node-3', states: ['active'] }, ], }); - graph.draw(); + await graph.draw(); }); graph.destroy(); }); diff --git a/packages/g6/__tests__/unit/runtime/element.spec.ts b/packages/g6/__tests__/unit/runtime/element.spec.ts index a115d92dae..de01d809f1 100644 --- a/packages/g6/__tests__/unit/runtime/element.spec.ts +++ b/packages/g6/__tests__/unit/runtime/element.spec.ts @@ -14,7 +14,7 @@ describe('ElementController', () => { nodes: [ { id: 'node-1', style: { x: 100, y: 100, fill: 'red', stroke: 'pink', lineWidth: 1 }, data: { value: 100 } }, { id: 'node-2', style: { x: 150, y: 100 }, data: { value: 150 } }, - { id: 'node-3', combo: 'combo-1', style: { x: 125, y: 150, states: ['selected'] }, data: { value: 150 } }, + { id: 'node-3', combo: 'combo-1', states: ['selected'], style: { x: 125, y: 150 }, data: { value: 150 } }, ], edges: [ { id: 'edge-1', source: 'node-1', target: 'node-2', data: { weight: 250 } }, @@ -22,7 +22,8 @@ describe('ElementController', () => { id: 'edge-2', source: 'node-2', target: 'node-3', - style: { lineWidth: 5, states: ['active', 'selected'] }, + states: ['active', 'selected'], + style: { lineWidth: 5 }, data: { weight: 300 }, }, ], @@ -132,7 +133,6 @@ describe('ElementController', () => { expect(elementController.getElementComputedStyle('node', node3)).toEqual({ ...LIGHT_THEME.node?.style, ...LIGHT_THEME.node?.state?.selected, - states: ['selected'], // from state fill: 'purple', // from palette @@ -151,7 +151,6 @@ describe('ElementController', () => { ...LIGHT_THEME.edge?.state?.selected, lineWidth: 4, stroke: 'red', - states: ['active', 'selected'], }); const comboStyle = elementController.getElementComputedStyle('combo', combo1); diff --git a/packages/g6/__tests__/unit/runtime/graph/event.spec.ts b/packages/g6/__tests__/unit/runtime/graph/event.spec.ts index 32c8a66155..102840101f 100644 --- a/packages/g6/__tests__/unit/runtime/graph/event.spec.ts +++ b/packages/g6/__tests__/unit/runtime/graph/event.spec.ts @@ -134,12 +134,12 @@ describe('event', () => { graph.on(GraphEvent.AFTER_ELEMENT_DESTROY, destroy); // state change - graph.updateNodeData([{ id: 'node-1', style: { states: ['active'] } }]); + graph.updateNodeData([{ id: 'node-1', states: ['active'] }]); await graph.draw(); expect(update).toHaveBeenCalledTimes(2); expect(update.mock.calls[0][0].data.id).toEqual('node-1'); - expect(update.mock.calls[0][0].data.style.states).toEqual(['active']); + expect(update.mock.calls[0][0].data.states).toEqual(['active']); // 同时会更新相邻的边 / It will also update the adjacent edge expect(update.mock.calls[1][0].data.id).toEqual('edge-1'); @@ -148,7 +148,7 @@ describe('event', () => { graph.setElementState('node-1', []); expect(update).toHaveBeenCalledTimes(2); expect(update.mock.calls[0][0].data.id).toEqual('node-1'); - expect(update.mock.calls[0][0].data.style.states).toEqual([]); + expect(update.mock.calls[0][0].data.states).toEqual([]); expect(update.mock.calls[1][0].data.id).toEqual('edge-1'); graph.destroy(); diff --git a/packages/g6/__tests__/unit/runtime/graph/graph.spec.ts b/packages/g6/__tests__/unit/runtime/graph/graph.spec.ts index bdf270869a..0b1d8e73e8 100644 --- a/packages/g6/__tests__/unit/runtime/graph/graph.spec.ts +++ b/packages/g6/__tests__/unit/runtime/graph/graph.spec.ts @@ -218,7 +218,7 @@ describe('Graph', () => { expect(graph.getElementState('node-1')).toEqual(['selected']); expect(graph.getElementState('node-2')).toEqual([]); expect(graph.getElementDataByState('node', 'selected')).toEqual([ - { id: 'node-1', data: {}, style: { states: ['selected'] } }, + { id: 'node-1', data: {}, style: {}, states: ['selected'] }, ]); }); diff --git a/packages/g6/__tests__/unit/utils/animation.spec.ts b/packages/g6/__tests__/unit/utils/animation.spec.ts index 3cb630049a..de452a6062 100644 --- a/packages/g6/__tests__/unit/utils/animation.spec.ts +++ b/packages/g6/__tests__/unit/utils/animation.spec.ts @@ -3,7 +3,6 @@ import { AnimatableTask } from '@/src/types'; import { createAnimationsProxy, executeAnimatableTasks, - executeAnimation, getAnimation, inferDefaultValue, preprocessKeyframes, @@ -64,65 +63,6 @@ describe('animation', () => { ]); }); - it('executeAnimation', () => { - class Shape { - children: Shape[] = []; - - appendChild(shape: Shape) { - this.children.push(shape); - return shape; - } - - animate(keyframes: Keyframe[], options: any) { - this.record.push({ keyframes, options }); - return { keyframes, options }; - } - - record: any = []; - } - const node: any = new Shape(); - const key = new Shape(); - const halo = new Shape(); - const label = new Shape(); - - node.appendChild(key); - node.appendChild(halo); - node.appendChild(label); - - const keyframes = [ - { opacity: 0, x: 100 }, - { opacity: 1, y: 100 }, - ]; - - const options: KeyframeAnimationOptions = { duration: 1000, fill: 'both' }; - - executeAnimation(node, keyframes, options); - - expect(node.record).toEqual([{ keyframes, options }]); - - const subKeyframes = [{ opacity: 0 }, { opacity: 1 }]; - expect(key.record).toEqual([ - { - keyframes: subKeyframes, - options, - }, - ]); - - expect(halo.record).toEqual([ - { - keyframes: subKeyframes, - options, - }, - ]); - - expect(label.record).toEqual([ - { - keyframes: subKeyframes, - options, - }, - ]); - }); - it('inferDefaultValue', () => { expect(inferDefaultValue('x')).toBe(0); expect(inferDefaultValue('y')).toBe(0); diff --git a/packages/g6/src/animations/executor.ts b/packages/g6/src/animations/executor.ts index 0ca5f9a53b..dffe987561 100644 --- a/packages/g6/src/animations/executor.ts +++ b/packages/g6/src/animations/executor.ts @@ -2,7 +2,7 @@ import type { DisplayObject, IAnimation } from '@antv/g'; import { isString, upperFirst } from '@antv/util'; import { DEFAULT_ELEMENTS_ANIMATION_OPTIONS } from '../constants'; import { getExtension } from '../registry'; -import { createAnimationsProxy, executeAnimation, inferDefaultValue, preprocessKeyframes } from '../utils/animation'; +import { createAnimationsProxy, inferDefaultValue, preprocessKeyframes } from '../utils/animation'; import type { AnimationExecutor } from './types'; /** @@ -34,9 +34,13 @@ export const executor: AnimationExecutor = (element, animation, commonEffectTimi * @param shapeID - 图形 ID | shape ID * @returns 图形关键帧样式 | keyframe style of the shape */ - const getKeyframeStyle = (shapeID?: string) => { + const getKeyframeStyle = ( + shapeID?: string, + ): { shape: DisplayObject; fromStyle: Record; toStyle: Record } | null => { if (shapeID) { - const shape = element.getElementById(shapeID) as DisplayObject; + const shape = element.getShape(shapeID); + if (!shape) return null; + const name = `get${upperFirst(shapeID)}Style` as keyof typeof element; const styler: (attrs?: Record) => Record = @@ -54,14 +58,15 @@ export const executor: AnimationExecutor = (element, animation, commonEffectTimi } }; - let keyResult: IAnimation; + let mainResult: IAnimation; - const results = animations + const subResults = animations .map(({ fields, shape: shapeID, states: enabledStates, ...individualEffectTiming }) => { if (enabledStates === undefined || enabledStates?.some((state) => states.includes(state))) { - const { shape, fromStyle, toStyle } = getKeyframeStyle(shapeID); + const keyframeStyle = getKeyframeStyle(shapeID); + if (!keyframeStyle) return null; - if (!shape) return null; + const { shape, fromStyle, toStyle } = keyframeStyle; const keyframes: Keyframe[] = [{}, {}]; @@ -70,13 +75,13 @@ export const executor: AnimationExecutor = (element, animation, commonEffectTimi Object.assign(keyframes[1], { [attr]: toStyle[attr] ?? inferDefaultValue(attr) }); }); - const result = executeAnimation(shape, preprocessKeyframes(keyframes), { + const result = shape.animate(preprocessKeyframes(keyframes), { ...DEFAULT_ELEMENTS_ANIMATION_OPTIONS, ...commonEffectTiming, ...individualEffectTiming, }); - if (shapeID === undefined) keyResult = result!; + if (shapeID === undefined) mainResult = result!; return result; } @@ -84,12 +89,12 @@ export const executor: AnimationExecutor = (element, animation, commonEffectTimi }) .filter(Boolean) as IAnimation[]; - const mainResult = keyResult! || results?.[0]; + const result = mainResult! || subResults?.[0]; - if (!mainResult) return null; + if (!result) return null; return createAnimationsProxy( - mainResult, - results.filter((result) => result !== mainResult), + result, + subResults.filter((result) => result !== result), ); }; diff --git a/packages/g6/src/animations/types.ts b/packages/g6/src/animations/types.ts index 761208ab77..fa34eae8b0 100644 --- a/packages/g6/src/animations/types.ts +++ b/packages/g6/src/animations/types.ts @@ -1,5 +1,5 @@ -import type { DisplayObject, IAnimation, IAnimationEffectTiming } from '@antv/g'; -import type { State } from '../types'; +import type { IAnimation, IAnimationEffectTiming } from '@antv/g'; +import type { Element, State } from '../types'; /** * 为 string 时,会从注册的动画中获取 @@ -60,7 +60,7 @@ export type AnimationEffectTiming = Partial< >; export type AnimationExecutor = ( - shape: DisplayObject, + shape: Element, animation: Animation | false, baseEffectTiming: AnimationEffectTiming, context: AnimationContext, diff --git a/packages/g6/src/elements/nodes/base-node.ts b/packages/g6/src/elements/nodes/base-node.ts index 6bcca4e6e5..d722825359 100644 --- a/packages/g6/src/elements/nodes/base-node.ts +++ b/packages/g6/src/elements/nodes/base-node.ts @@ -280,13 +280,14 @@ export abstract class BaseNode(this.getGraphicStyle(restAttributes), 'badge'); badgeOptions.forEach((option, i) => { badgesShapeStyle[i] = { backgroundFill: colors ? colors[i % colors?.length] : undefined, + opacity, ...badgeStyle, ...this.getBadgeStyle(option), }; diff --git a/packages/g6/src/elements/nodes/image.ts b/packages/g6/src/elements/nodes/image.ts index beffb7f253..e6baa4fd49 100644 --- a/packages/g6/src/elements/nodes/image.ts +++ b/packages/g6/src/elements/nodes/image.ts @@ -44,8 +44,10 @@ export class Image extends BaseNode { protected getKeyStyle(attributes: Required): GImageStyleProps { const [width, height] = this.getSize(attributes); - const keyStyle = super.getKeyStyle(attributes); + const { fillOpacity, opacity = fillOpacity, ...keyStyle } = super.getKeyStyle(attributes); + return { + opacity, ...keyStyle, width, height, diff --git a/packages/g6/src/elements/shapes/base-shape.ts b/packages/g6/src/elements/shapes/base-shape.ts index e5fb70a89f..e5d50a51f3 100644 --- a/packages/g6/src/elements/shapes/base-shape.ts +++ b/packages/g6/src/elements/shapes/base-shape.ts @@ -1,9 +1,10 @@ import type { BaseStyleProps, DisplayObject, DisplayObjectConfig, Group, IAnimation } from '@antv/g'; import { CustomElement } from '@antv/g'; -import { deepMix } from '@antv/util'; +import { deepMix, isEmpty, isFunction, upperFirst } from '@antv/util'; import type { Keyframe } from '../../types'; import { createAnimationsProxy, preprocessKeyframes } from '../../utils/animation'; import { updateStyle } from '../../utils/element'; +import { subObject } from '../../utils/prefix'; import { setVisibility } from '../../utils/visibility'; export interface BaseShapeStyleProps extends BaseStyleProps { @@ -30,7 +31,7 @@ export abstract class BaseShape extends this.bindEvents(); } - get parsedAttributes() { + protected get parsedAttributes() { return this.attributes as Required; } @@ -123,6 +124,8 @@ export abstract class BaseShape extends } public animate(keyframes: Keyframe[], options?: number | KeyframeAnimationOptions): IAnimation | null { + if (keyframes.length === 0) return null; + const animationMap: IAnimation[] = []; const result = super.animate(keyframes, options); @@ -136,10 +139,10 @@ export abstract class BaseShape extends Object.entries(this.shapeMap).forEach(([key, shape]) => { // 如果存在方法名为 `get${key}Style` 的方法,则使用该方法获取样式,并自动为该图形实例创建动画 // if there is a method named `get${key}Style`, use this method to get style and automatically create animation for the shape instance - const methodName = `get${key[0].toUpperCase()}${key.slice(1)}Style` as keyof this; + const methodName = `get${upperFirst(key)}Style` as keyof this; const method = this[methodName]; - if (typeof method === 'function') { + if (isFunction(method)) { const subKeyframes: Keyframe[] = keyframes.map((style) => method.call(this, { ...this.attributes, ...style }), ); @@ -148,12 +151,41 @@ export abstract class BaseShape extends if (result) animationMap.push(result); } }); + + // 针对 badges/ports 执行动画 + const badges = subObject(this.shapeMap, 'badge-'); + const ports = subObject(this.shapeMap, 'port-'); + + const handleShapeSet = (shapeSet: Record, name: string) => { + if (!isEmpty(shapeSet)) { + const methodName = `get${upperFirst(name)}Style` as keyof this; + const method = this[methodName]; + if (isFunction(method)) { + const itemsKeyframes = keyframes.map((style) => method.call(this, { ...this.attributes, ...style })); + Object.entries(itemsKeyframes[0]).map(([key]) => { + const subKeyframes = itemsKeyframes.map((styles) => styles[key]); + const shape = shapeSet[key]; + if (shape) { + const result = shape.animate(preprocessKeyframes(subKeyframes), options); + if (result) animationMap.push(result); + } + }); + } + } + }; + + handleShapeSet(badges, 'badges'); + handleShapeSet(ports, 'ports'); } } return createAnimationsProxy(animationMap); } + public getShape(key: string): DisplayObject | undefined { + return this.shapeMap[key]; + } + private setVisibility() { const { visibility } = this.attributes; setVisibility(this, visibility); diff --git a/packages/g6/src/plugins/bubble-sets.ts b/packages/g6/src/plugins/bubble-sets.ts index ee7e77aacf..759533bf35 100644 --- a/packages/g6/src/plugins/bubble-sets.ts +++ b/packages/g6/src/plugins/bubble-sets.ts @@ -68,8 +68,9 @@ export class BubbleSets extends BasePlugin { avoidMembers: [], /** shape style */ fill: 'lightblue', + fillOpacity: 0.2, stroke: 'blue', - opacity: 0.2, + strokeOpacity: 0.2, /** bubbleSetJS config */ ...defaultOptions, }; diff --git a/packages/g6/src/plugins/hull/index.ts b/packages/g6/src/plugins/hull/index.ts index d23d90a582..9e362636e7 100644 --- a/packages/g6/src/plugins/hull/index.ts +++ b/packages/g6/src/plugins/hull/index.ts @@ -88,8 +88,10 @@ export class Hull extends BasePlugin { concavity: Infinity, /** hull style */ fill: 'lightblue', + fillOpacity: 0.2, + labelOpacity: 1, stroke: 'blue', - opacity: 0.2, + strokeOpacity: 0.2, }; constructor(context: RuntimeContext, options: HullOptions) { diff --git a/packages/g6/src/runtime/data.ts b/packages/g6/src/runtime/data.ts index 731d36a406..d458868458 100644 --- a/packages/g6/src/runtime/data.ts +++ b/packages/g6/src/runtime/data.ts @@ -248,11 +248,11 @@ export class DataController { public getElementDataByState(elementType: ElementType, state: string) { const elementData = this.getElementData(elementType); - return elementData.filter((datum) => datum.style?.states?.includes(state)); + return elementData.filter((datum) => datum.states?.includes(state)); } public getElementState(id: ID): State[] { - return this.getElementsData([id])?.[0]?.style?.states || []; + return this.getElementsData([id])?.[0]?.states || []; } public hasNode(id: ID) { diff --git a/packages/g6/src/runtime/element.ts b/packages/g6/src/runtime/element.ts index e4d1ed49a1..c85bc8f0bf 100644 --- a/packages/g6/src/runtime/element.ts +++ b/packages/g6/src/runtime/element.ts @@ -262,7 +262,7 @@ export class ElementController { return ( id: ID, - shape: DisplayObject, + shape: Element, originalStyle: Record, modifiedStyle?: Record, ) => { @@ -675,7 +675,7 @@ export class ElementController { type AnimationExecutor = ( id: ID, - shape: DisplayObject, + shape: Element, originalStyle: Record, modifiedStyle?: Record, ) => IAnimation | null; diff --git a/packages/g6/src/runtime/graph.ts b/packages/g6/src/runtime/graph.ts index 071b427ec9..b3060810ff 100644 --- a/packages/g6/src/runtime/graph.ts +++ b/packages/g6/src/runtime/graph.ts @@ -1452,7 +1452,7 @@ export class Graph extends EventEmitter { const dataToUpdate: Required = { nodes: [], edges: [], combos: [] }; Object.entries(config).forEach(([id, value]) => { const elementType = this.getElementType(id); - dataToUpdate[`${elementType}s`].push({ id, style: { states: parseState(value) } }); + dataToUpdate[`${elementType}s`].push({ id, states: parseState(value) }); }); this.updateData(dataToUpdate); diff --git a/packages/g6/src/themes/base.ts b/packages/g6/src/themes/base.ts index b4f32a2ff7..5244a714db 100644 --- a/packages/g6/src/themes/base.ts +++ b/packages/g6/src/themes/base.ts @@ -79,6 +79,7 @@ export function create(tokens: ThemeTokens): Theme { badgePadding: [1, 4], badgePalette: nodeBadgePalette, fill: nodeColor, + fillOpacity: 1, halo: false, haloLineWidth: 12, haloStrokeOpacity: 0.25, @@ -95,7 +96,6 @@ export function create(tokens: ThemeTokens): Theme { labelFontWeight: 400, labelOpacity: 1, lineWidth: 0, - opacity: 1, portFill: nodeColor, portLineWidth: 1, portStroke: nodeStroke, @@ -122,9 +122,10 @@ export function create(tokens: ThemeTokens): Theme { }, inactive: { donutOpacity: 0.25, + fillOpacity: 0.25, iconOpacity: 0.25, labelOpacity: 0.25, - opacity: 0.25, + strokeOpacity: 0.25, }, disabled: { fill: nodeColorDisabled, @@ -142,6 +143,7 @@ export function create(tokens: ThemeTokens): Theme { edge: { palette: edgePaletteOptions, style: { + fillOpacity: 1, halo: false, haloLineWidth: 12, haloStrokeOpacity: 0.25, @@ -158,8 +160,8 @@ export function create(tokens: ThemeTokens): Theme { labelPlacement: 'center', labelTextBaseline: 'middle', lineWidth: 1, - opacity: 1, stroke: edgeColor, + strokeOpacity: 1, }, state: { selected: { @@ -176,8 +178,9 @@ export function create(tokens: ThemeTokens): Theme { lineWidth: 2, }, inactive: { + fillOpacity: 0.25, labelOpacity: 0.25, - opacity: 0.25, + strokeOpacity: 0.25, }, disabled: { stroke: edgeColorDisabled, @@ -188,7 +191,10 @@ export function create(tokens: ThemeTokens): Theme { enter: 'fade', exit: 'fade', visibility: 'fade', - update: [{ fields: ['path', 'stroke'], shape: 'key' }], + update: [ + { fields: ['path', 'stroke'], shape: 'key' }, + { fields: ['path', 'stroke'], shape: 'halo' }, + ], }, }, combo: { @@ -212,7 +218,8 @@ export function create(tokens: ThemeTokens): Theme { labelOpacity: 1, lineDash: 0, lineWidth: 1, - opacity: 1, + fillOpacity: 1, + strokeOpacity: 1, padding: 10, stroke: comboStroke, }, @@ -231,14 +238,16 @@ export function create(tokens: ThemeTokens): Theme { lineWidth: 4, }, inactive: { + fillOpacity: 0.65, labelOpacity: 0.25, - opacity: 0.65, + strokeOpacity: 0.65, }, disabled: { fill: comboColorDisabled, + fillOpacity: 0.25, labelOpacity: 0.25, - opacity: 0.25, stroke: comboStrokeDisabled, + strokeOpacity: 0.25, }, }, animation: { diff --git a/packages/g6/src/utils/animation.ts b/packages/g6/src/utils/animation.ts index f1ec1f7ba1..3e85d1a5e7 100644 --- a/packages/g6/src/utils/animation.ts +++ b/packages/g6/src/utils/animation.ts @@ -1,10 +1,9 @@ -import type { DisplayObject, IAnimation } from '@antv/g'; +import type { IAnimation } from '@antv/g'; import { isEqual, isNil, isObject } from '@antv/util'; import { DEFAULT_ANIMATION_OPTIONS } from '../constants'; import type { GraphOptions } from '../spec'; import type { AnimatableTask, Keyframe } from '../types'; import { isNode } from './element'; -import { getDescendantShapes } from './shape'; export function createAnimationsProxy(animations: IAnimation[]): IAnimation | null; export function createAnimationsProxy(sourceAnimation: IAnimation, targetAnimations: IAnimation[]): IAnimation; @@ -93,49 +92,6 @@ export function preprocessKeyframes(keyframes: Keyframe[]): Keyframe[] { }, [] as Keyframe[]); } -/** - * 对图形执行动画 - * - * Animate the shape - * @param shape - 待执行动画的图形 | the shape to be animated - * @param keyframes - 动画关键帧 | keyframes of the animation - * @param options - 动画配置项 | animation options - * @returns 动画对象 | animation object - * @remarks - * 在设置 enableCSSParsing 为 false 后,复合图形无法继承父属性,因此对于一些需要继承父属性的动画,需要对所有子图形执行相同的动画 - * - * After setting enableCSSParsing to false, the compound shape cannot inherit the parent attribute, so for some animations that need to inherit the parent attribute, the same animation needs to be performed on all child shapes - */ -export function executeAnimation( - shape: T, - keyframes: Keyframe[], - options: KeyframeAnimationOptions, -) { - if (keyframes.length === 0) return null; - const inheritedAttrs = ['opacity']; - - const needInheritAnimation = keyframes.some((keyframe) => - Object.keys(keyframe).some((attr) => inheritedAttrs.includes(attr)), - ); - - if (!needInheritAnimation) return shape.animate(keyframes, options); - const inheritAttrsKeyframes = keyframes.map((keyframe) => { - const newKeyframe: Keyframe = {}; - Object.entries(keyframe).forEach(([attr, value]) => { - if (inheritedAttrs.includes(attr)) { - newKeyframe[attr] = value; - } - }); - return newKeyframe; - }); - - const descendants = getDescendantShapes(shape); - - const keyShapeAnimation = shape.animate(keyframes, options); - const descendantAnimations = descendants.map((descendant) => descendant.animate(inheritAttrsKeyframes, options)!); - return createAnimationsProxy(keyShapeAnimation!, descendantAnimations); -} - /** * 获取属性的默认值 * diff --git a/packages/g6/src/utils/prefix.ts b/packages/g6/src/utils/prefix.ts index 69f3ffadfa..033e69899e 100644 --- a/packages/g6/src/utils/prefix.ts +++ b/packages/g6/src/utils/prefix.ts @@ -52,13 +52,27 @@ export function removePrefix(string: string, prefix?: string, lowercaseFirstLett * @returns 子样式 | sub style */ export function subStyleProps>(style: object, prefix: string) { - return Object.entries(style).reduce((acc, [key, value]) => { + const subStyle = Object.entries(style).reduce((acc, [key, value]) => { if (key === 'className' || key === 'class') return acc; if (startsWith(key, prefix)) { - acc[removePrefix(key, prefix) as keyof T] = value; + Object.assign(acc, { [removePrefix(key, prefix)]: value }); } return acc; }, {} as T); + + // 向下传递透明度,但避免覆盖子样式中的透明度属性 + // Pass down opacity, but avoid overwriting the opacity property in the sub-style + if ('opacity' in style) { + const subOpacityKey = addPrefix('opacity', prefix) as keyof typeof style; + const opacity = style.opacity as number; + + if (subOpacityKey in style) { + const subOpacity = style[subOpacityKey] as number; + Object.assign(subStyle, { opacity: opacity * subOpacity }); + } else Object.assign(subStyle, { opacity }); + } + + return subStyle; } /**