From 472fa89920e50bee3e5aa871ad46eea091df0cf1 Mon Sep 17 00:00:00 2001 From: Yuxin <55794321+yvonneyx@users.noreply.github.com> Date: Wed, 5 Jun 2024 11:25:03 +0800 Subject: [PATCH] refactor(element): adjust node and edge style; add badge to BaseEdge (#5806) * refactor(element): adjust node and edge * test: update snapshots and ci issues * fix: fix cr issue --- .../g6/__tests__/dataset/element-nodes.json | 20 +- .../__tests__/demos/behavior-click-select.ts | 10 +- .../g6/__tests__/demos/element-edge-line.ts | 5 + .../g6/__tests__/demos/element-edge-size.ts | 31 + .../g6/__tests__/demos/element-node-circle.ts | 7 +- .../__tests__/demos/element-node-diamond.ts | 5 +- .../g6/__tests__/demos/element-node-donut.ts | 3 +- .../__tests__/demos/element-node-ellipse.ts | 3 +- .../__tests__/demos/element-node-hexagon.ts | 3 +- .../g6/__tests__/demos/element-node-rect.ts | 5 +- .../g6/__tests__/demos/element-node-star.ts | 3 +- .../__tests__/demos/element-node-triangle.ts | 3 +- packages/g6/__tests__/demos/index.ts | 1 + packages/g6/__tests__/demos/perf-fcp.ts | 3 +- packages/g6/__tests__/index.html | 1 + .../element-combo-drag/collapse-combo-0.svg | 6 +- .../bugs/element-combo-drag/default.svg | 12 +- .../bugs/element-combo-drag/drag-combo-0.svg | 6 +- .../bugs/element-combo-drag/drag-node-2.svg | 6 +- .../element-edge-update-arrow/default.svg | 16 +- .../update-arrow.svg | 16 +- .../element-state-switch/default-0.svg | 8 +- .../element-state-switch/default-1000.svg | 10 +- .../element-state-switch/default-200.svg | 10 +- .../click-custom-edge4.svg | 40 +- .../click-edge1-move.svg | 8 +- .../click-edge1.svg | 8 +- .../click-edge2.svg | 16 +- .../click-edge3.svg | 24 +- .../click-edge4-combo.svg | 32 +- .../drag-custom-edge4.svg | 40 +- .../drag-edge1-move.svg | 8 +- .../behavior-create-edge-drag/drag-edge1.svg | 8 +- .../behavior-create-edge-drag/drag-edge2.svg | 16 +- .../behavior-create-edge-drag/drag-edge3.svg | 24 +- .../drag-edge4-combo.svg | 32 +- .../behaviors/brush-select/brush-clear-1.svg | 44 +- .../behaviors/brush-select/brush-clear-2.svg | 44 +- .../behaviors/brush-select/brush-clear-3.svg | 44 +- .../behaviors/brush-select/brush-clear-4.svg | 44 +- .../behaviors/brush-select/brush-clear-5.svg | 44 +- .../brush-select/brush-clear-mode-diff.svg | 44 +- .../brush-clear-mode-intersect.svg | 44 +- .../brush-select/brush-clear-mode-union.svg | 44 +- .../brush-select/brush-select-clear.svg | 44 +- .../brush-select/brush-selected-1.svg | 70 +- .../brush-select/brush-selected-2.svg | 54 +- .../brush-select/brush-selected-3.svg | 70 +- .../brush-select/brush-selected-4.svg | 70 +- .../brush-select/brush-selected-5.svg | 70 +- .../brush-select/brush-selected-mode-diff.svg | 70 +- .../brush-selected-mode-intersect.svg | 44 +- .../brush-selected-mode-union.svg | 70 +- .../brush-select/brush-selecting-1.svg | 44 +- .../brush-select/brush-selecting-2.svg | 44 +- .../brush-select/brush-selecting-3.svg | 44 +- .../brush-select/brush-selecting-4.svg | 44 +- .../brush-select/brush-selecting-5.svg | 70 +- .../brush-selecting-mode-diff.svg | 44 +- .../brush-selecting-mode-intersect.svg | 44 +- .../brush-selecting-mode-union.svg | 44 +- .../behaviors/brush-select/default.svg | 44 +- .../behaviors/click-select/after-deselect.svg | 308 ++--- .../behaviors/click-select/after-select.svg | 310 ++--- .../click-select/custom-neighborState.svg | 394 +++---- .../behaviors/click-select/custom-state.svg | 310 ++--- .../behaviors/click-select/default.svg | 308 ++--- .../behaviors/click-select/edge-1-degree.svg | 316 ++--- .../behaviors/click-select/multiple-meta.svg | 308 ++--- .../behaviors/click-select/multiple-shift.svg | 312 ++--- .../behaviors/click-select/node-1-degree.svg | 394 +++---- .../collapse-combo-1-expand-combo-2-0.svg | 14 +- .../collapse-combo-1-expand-combo-2-1000.svg | 22 +- .../collapse-combo-1-expand-combo-2-500.svg | 20 +- .../collapse-combo-2-0.svg | 42 +- .../collapse-combo-2-1000.svg | 2 +- .../collapse-combo-2-500.svg | 42 +- .../collapse-expand-combo/default.svg | 20 +- .../expand-combo-1-0.svg | 42 +- .../expand-combo-1-1000.svg | 42 +- .../expand-combo-1-500.svg | 42 +- .../collapse-expand-node/collapse-A-0.svg | 42 +- .../collapse-expand-node/collapse-A-1000.svg | 6 +- .../collapse-expand-node/collapse-A-500.svg | 42 +- .../collapse-expand-node/collapse-B-0.svg | 30 +- .../collapse-expand-node/collapse-B-1000.svg | 18 +- .../collapse-expand-node/collapse-B-500.svg | 30 +- .../collapse-expand-node/default.svg | 30 +- .../collapse-expand-node/expand-A-0.svg | 54 +- .../collapse-expand-node/expand-A-1000.svg | 54 +- .../collapse-expand-node/expand-A-500.svg | 54 +- .../collapse-expand-node/expand-B-again-0.svg | 42 +- .../expand-B-again-1000.svg | 42 +- .../expand-B-again-500.svg | 42 +- .../collapse-expand-node/expand-C-0.svg | 30 +- .../collapse-expand-node/expand-C-1000.svg | 30 +- .../collapse-expand-node/expand-C-500.svg | 30 +- .../collapse-expand/collapse-combo-2.svg | 2 +- .../behaviors/collapse-expand/default.svg | 20 +- .../collapse-expand/expand-combo-1.svg | 42 +- .../behaviors/drag-element-combo/default.svg | 42 +- .../drag-combo-1-after-drop-move.svg | 42 +- .../drag-combo-1-after-drop-out.svg | 42 +- .../drag-combo-1-before-drop-move.svg | 42 +- .../drag-combo-1-before-drop-out.svg | 42 +- .../drag-combo-2-after-drop-into.svg | 42 +- .../drag-combo-2-before-drop-into.svg | 42 +- .../drag-node-1-after-drop-into.svg | 42 +- .../drag-node-1-after-drop-move.svg | 42 +- .../drag-node-1-after-drop-out.svg | 42 +- .../drag-node-1-before-drop-into.svg | 42 +- .../drag-node-1-before-drop-move.svg | 42 +- .../drag-node-1-before-drop-out.svg | 42 +- .../drag-node-2-after-drop-out.svg | 42 +- .../drag-node-2-before-drop-out.svg | 42 +- .../behaviors/drag-element/after-drag.svg | 32 +- .../behaviors/drag-element/default.svg | 32 +- .../drag-combo-shadow-after-drag.svg | 32 +- .../drag-element/drag-combo-shadow.svg | 32 +- .../behaviors/drag-element/drag-combo.svg | 32 +- .../behaviors/drag-element/hideEdge-both.svg | 32 +- .../behaviors/drag-element/hideEdge-in.svg | 32 +- .../behaviors/drag-element/hideEdge-out.svg | 32 +- .../drag-element/shadow-after-drag.svg | 32 +- .../behaviors/drag-element/shadow.svg | 32 +- .../behaviors/focus-element/default.svg | 32 +- .../behaviors/focus-element/focus-combo.svg | 32 +- .../behaviors/focus-element/focus-node-1.svg | 32 +- .../behaviors/focus-element/focus-node-2.svg | 32 +- .../behaviors/focus-element/focus-node-3.svg | 32 +- .../behaviors/focus-element/focus-node-4.svg | 32 +- .../hover-activate/1-degree-edge.svg | 244 ++-- .../hover-activate/1-degree-node.svg | 270 ++--- .../hover-activate/2-degree-edge.svg | 270 ++--- .../hover-activate/2-degree-node.svg | 286 ++--- .../behaviors/hover-activate/after-hover.svg | 2 +- .../behaviors/hover-activate/state.svg | 242 ++-- .../behaviors/lasso-select/default.svg | 44 +- .../behaviors/lasso-select/lasso-clear-1.svg | 44 +- .../behaviors/lasso-select/lasso-clear-2.svg | 44 +- .../behaviors/lasso-select/lasso-clear-3.svg | 44 +- .../behaviors/lasso-select/lasso-clear-4.svg | 44 +- .../behaviors/lasso-select/lasso-clear-5.svg | 44 +- .../lasso-select/lasso-clear-mode-diff.svg | 44 +- .../lasso-clear-mode-intersect.svg | 44 +- .../lasso-select/lasso-clear-mode-union.svg | 44 +- .../lasso-select/lasso-select-clear.svg | 44 +- .../lasso-select/lasso-selected-1.svg | 70 +- .../lasso-select/lasso-selected-2.svg | 54 +- .../lasso-select/lasso-selected-3.svg | 54 +- .../lasso-select/lasso-selected-4.svg | 44 +- .../lasso-select/lasso-selected-5.svg | 70 +- .../lasso-select/lasso-selected-mode-diff.svg | 70 +- .../lasso-selected-mode-intersect.svg | 44 +- .../lasso-selected-mode-union.svg | 70 +- .../lasso-select/lasso-selecting-1.svg | 44 +- .../lasso-select/lasso-selecting-2.svg | 44 +- .../lasso-select/lasso-selecting-3.svg | 44 +- .../lasso-select/lasso-selecting-4.svg | 44 +- .../lasso-select/lasso-selecting-5.svg | 70 +- .../lasso-selecting-mode-diff.svg | 44 +- .../lasso-selecting-mode-intersect.svg | 44 +- .../lasso-selecting-mode-union.svg | 44 +- .../elements/change-type/change-type.svg | 8 +- .../elements/change-type/default.svg | 8 +- .../elements/combo/circle-collapse-center.svg | 2 +- .../combo/circle-marker-childCount.svg | 2 +- .../elements/combo/circle-marker-custom.svg | 2 +- .../combo/circle-marker-descendantCount.svg | 2 +- .../combo/circle-marker-nodeCount.svg | 2 +- .../snapshots/elements/combo/default.svg | 42 +- .../elements/combo/rect-collapse-center.svg | 20 +- .../elements/edges/arrow/default.svg | 112 +- .../edges/cubic-horizontal/default.svg | 96 +- .../elements/edges/cubic-vertical/default.svg | 96 +- .../elements/edges/cubic/default.svg | 84 +- .../elements/edges/custom-arrow/default.svg | 42 +- .../snapshots/elements/edges/line/default.svg | 144 ++- .../elements/edges/loop-curve/default.svg | 76 +- .../elements/edges/loop-polyline/default.svg | 68 +- .../polyline-animation/controlPoints.svg | 8 +- ...edge-polyline-router-has-controlPoints.svg | 8 +- .../edge-polyline-router-no-controlPoints.svg | 8 +- .../edges/polyline-animation/radius.svg | 8 +- .../elements/edges/polyline/default.svg | 52 +- .../snapshots/elements/edges/port/default.svg | 100 +- .../elements/edges/quadratic/default.svg | 84 +- .../snapshots/elements/edges/size/default.svg | 152 +++ .../elements/label-background/default.svg | 40 +- .../elements/label-oversized/default.svg | 20 +- .../elements/nodes/circle/default.svg | 147 ++- .../elements/nodes/diamond/default.svg | 147 ++- .../elements/nodes/donut/default.svg | 90 +- .../elements/nodes/ellipse/default.svg | 129 ++- .../elements/nodes/hexagon/default.svg | 129 ++- .../elements/nodes/image/default.svg | 93 +- .../snapshots/elements/nodes/rect/default.svg | 147 ++- .../snapshots/elements/nodes/star/default.svg | 129 ++- .../elements/nodes/triangle/default.svg | 129 ++- .../snapshots/elements/port/port_hidden.svg | 24 +- .../elements/port/port_linkToCenter.svg | 24 +- .../snapshots/elements/port/port_show.svg | 24 +- .../elements/position-combo/default.svg | 42 +- .../snapshots/elements/state/default.svg | 10 +- .../state/setState-single-default.svg | 10 +- .../elements/state/setState-single.svg | 14 +- .../snapshots/elements/state/setState.svg | 12 +- .../snapshots/elements/visibility/default.svg | 46 +- .../elements/visibility/hide-single.svg | 46 +- .../snapshots/elements/visibility/hide.svg | 46 +- .../elements/visibility/show-and-hide.svg | 46 +- .../elements/visibility/show-single.svg | 46 +- .../snapshots/elements/visibility/show.svg | 46 +- .../snapshots/elements/z-index/default.svg | 20 +- .../elements/z-index/drag-combo-1.svg | 20 +- .../elements/z-index/drag-combo-2.svg | 20 +- .../elements/z-index/drag-combo-3.svg | 20 +- .../elements/z-index/drag-overlap-combo-3.svg | 20 +- .../z-index/drag-overlap-combo-4(1).svg | 20 +- .../z-index/drag-overlap-combo-4(2).svg | 20 +- .../z-index/drag-overlap-combo-4(3).svg | 20 +- .../elements/z-index/drag-overlap-node-1.svg | 20 +- .../elements/z-index/drag-overlap-node-2.svg | 20 +- .../elements/z-index/drag-overlap-node-3.svg | 20 +- .../snapshots/layouts/circular/basic.svg | 310 ++--- .../configuration-translate-division.svg | 550 ++++----- .../circular/configuration-translate.svg | 550 ++++----- .../snapshots/layouts/circular/degree.svg | 686 +++++------ .../snapshots/layouts/circular/division.svg | 686 +++++------ .../snapshots/layouts/circular/spiral.svg | 686 +++++------ .../layouts/combo-layout/combined.svg | 170 +-- .../snapshots/layouts/compact-box/basic.svg | 308 ++--- .../layouts/compact-box/left-align.svg | 126 +- .../layouts/compact-box/top-to-bottom.svg | 126 +- .../snapshots/layouts/concentric/default.svg | 1020 ++++++++--------- .../custom-layout-horizontal/default.svg | 42 +- .../snapshots/layouts/d3-force/default.svg | 70 +- .../layouts/dagre/antv-flow-combo.svg | 126 +- .../snapshots/layouts/dagre/antv-flow.svg | 112 +- .../snapshots/layouts/dagre/dagre.svg | 24 +- .../snapshots/layouts/dendrogram/basic.svg | 308 ++--- .../snapshots/layouts/dendrogram/tb.svg | 308 ++--- .../snapshots/layouts/fruchterman/basic.svg | 444 +++---- .../snapshots/layouts/fruchterman/cluster.svg | 444 +++---- .../snapshots/layouts/grid/sortby-default.svg | 444 +++---- .../snapshots/layouts/grid/sortby-id.svg | 444 +++---- .../__tests__/snapshots/layouts/mds/ld100.svg | 446 +++---- .../layouts/mindmap/h-custom-side.svg | 126 +- .../snapshots/layouts/mindmap/h-left.svg | 126 +- .../snapshots/layouts/mindmap/h-right.svg | 126 +- .../__tests__/snapshots/layouts/mindmap/h.svg | 126 +- .../snapshots/layouts/radial-layout/basic.svg | 436 +++---- .../prevent-overlap-unstrict.svg | 730 ++++++------ .../layouts/radial-layout/prevent-overlap.svg | 732 ++++++------ .../snapshots/layouts/radial-layout/sort.svg | 668 +++++------ .../snapshots/plugins/bubble-sets/default.svg | 74 +- .../bubble-sets/element-position-update.svg | 74 +- .../plugins/bubble-sets/member-add.svg | 74 +- .../plugins/bubble-sets/member-remove.svg | 74 +- .../plugins/bubble-sets/member-update.svg | 74 +- .../plugins/bubble-sets/non-member-add.svg | 74 +- .../plugins/bubble-sets/non-member-remove.svg | 74 +- .../plugins/bubble-sets/non-member-update.svg | 74 +- .../plugins/bubble-sets/options-update.svg | 74 +- .../history/plugin-history/addData-redo.svg | 30 +- .../history/plugin-history/addData-undo.svg | 20 +- .../history/plugin-history/addData.svg | 30 +- .../history/plugin-history/collapse-redo.svg | 2 +- .../history/plugin-history/collapse-undo.svg | 20 +- .../history/plugin-history/collapse.svg | 2 +- .../plugin-history/deleteData-redo.svg | 4 +- .../plugin-history/deleteData-undo.svg | 20 +- .../history/plugin-history/deleteData.svg | 4 +- .../history/plugin-history/expand-redo.svg | 42 +- .../history/plugin-history/expand-undo.svg | 20 +- .../plugins/history/plugin-history/expand.svg | 42 +- .../plugin-history/hideElement-redo.svg | 20 +- .../plugin-history/hideElement-undo.svg | 20 +- .../history/plugin-history/hideElement.svg | 20 +- .../plugin-history/setElementZIndex-redo.svg | 20 +- .../plugin-history/setElementZIndex-undo.svg | 20 +- .../plugin-history/setElementZIndex.svg | 20 +- .../plugin-history/setElementsState-redo.svg | 22 +- .../plugin-history/setElementsState-undo.svg | 20 +- .../plugin-history/setElementsState.svg | 22 +- .../plugin-history/updateData-redo.svg | 20 +- .../plugin-history/updateData-undo.svg | 20 +- .../history/plugin-history/updateData.svg | 20 +- .../hull/plugin-hull/addMember__node3.svg | 74 +- .../hull/plugin-hull/corner__rounded.svg | 74 +- .../hull/plugin-hull/corner__sharp.svg | 74 +- .../hull/plugin-hull/corner__smooth.svg | 74 +- .../plugins/hull/plugin-hull/default.svg | 74 +- .../plugin-hull/labelAutoRotate__false.svg | 74 +- .../plugin-hull/labelAutoRotate__true.svg | 74 +- .../plugin-hull/labelCloseToHull__false.svg | 74 +- .../plugin-hull/labelCloseToHull__true.svg | 74 +- .../plugin-hull/labelPlacement__bottom.svg | 74 +- .../hull/plugin-hull/labelPlacement__left.svg | 74 +- .../plugin-hull/labelPlacement__right.svg | 74 +- .../hull/plugin-hull/labelPlacement__top.svg | 74 +- .../plugins/hull/plugin-hull/padding__0.svg | 74 +- .../plugins/hull/plugin-hull/padding__20.svg | 74 +- .../hull/plugin-hull/removeMember__node1.svg | 74 +- .../plugins/hull/plugin-hull/updateMember.svg | 74 +- .../plugin-hull/updateMember__position.svg | 74 +- .../snapshots/plugins/legend/click-again.svg | 338 +++--- .../snapshots/plugins/legend/click.svg | 364 +++--- .../snapshots/plugins/legend/mouseenter.svg | 364 +++--- .../snapshots/plugins/legend/mouseleave.svg | 338 +++--- .../snapshots/plugins/legend/normal.svg | 338 +++--- .../timebar/backward-1-time-modify.svg | 68 +- .../timebar/backward-1-time-visibility.svg | 632 +++++----- .../snapshots/plugins/timebar/default.svg | 632 +++++----- .../plugins/timebar/forward-1-time-modify.svg | 162 +-- .../timebar/forward-1-time-visibility.svg | 632 +++++----- .../plugins/timebar/forward-2-time-modify.svg | 256 ++--- .../plugins/timebar/play-1-time-modify.svg | 68 +- .../plugins/timebar/play-2-time-modify.svg | 162 +-- .../plugins/timebar/reset-modify.svg | 632 +++++----- .../plugins/timebar/reset-visibility.svg | 632 +++++----- .../snapshots/plugins/tooltip/edge.svg | 530 ++++----- .../snapshots/plugins/tooltip/hover.svg | 530 ++++----- .../snapshots/plugins/tooltip/node.svg | 530 ++++----- .../plugins/tooltip/show-tooltip-by-id.svg | 530 ++++----- .../snapshots/runtime/element/default.svg | 22 +- .../runtime/graph/graph/after-draw.svg | 8 +- .../runtime/graph/graph/after-layout.svg | 10 +- .../runtime/graph/graph/after-rotate-90.svg | 10 +- .../graph/graph/after-translate-node-1.svg | 10 +- .../runtime/graph/graph/after-translate.svg | 10 +- .../runtime/graph/graph/after-zoom-2.svg | 10 +- .../runtime/graph/graph/before-draw.svg | 308 ++--- .../runtime/graph/graph/before-layout.svg | 10 +- .../snapshots/runtime/viewport/rotate-135.svg | 8 +- .../snapshots/runtime/viewport/rotate-90.svg | 8 +- .../snapshots/runtime/viewport/translate.svg | 8 +- .../snapshots/runtime/viewport/zoom-0.5.svg | 8 +- .../snapshots/runtime/viewport/zoom-2.svg | 8 +- .../theme/theme_node_palette_spectral.svg | 310 ++--- .../bundle-add-orange-edge__after.svg | 164 +-- .../bundle-add-orange-edge__before.svg | 156 +-- .../bundle-mode.svg | 156 +-- .../bundle-remove-purple-edge__after.svg | 152 +-- .../bundle-remove-purple-edge__before.svg | 164 +-- .../bundle-update-orange-edge__after.svg | 164 +-- .../bundle-update-orange-edge__before.svg | 164 +-- .../merge-mode.svg | 64 +- .../unit/elements/edges/size.spec.ts | 11 + .../unit/runtime/graph/graph.spec.ts | 8 +- packages/g6/__tests__/unit/utils/edge.spec.ts | 14 + .../g6/__tests__/unit/utils/element.spec.ts | 2 +- .../g6/__tests__/unit/utils/symbol.spec.ts | 2 +- packages/g6/src/elements/edges/base-edge.ts | 62 +- packages/g6/src/elements/nodes/base-node.ts | 7 +- packages/g6/src/elements/nodes/circle.ts | 2 +- packages/g6/src/elements/nodes/ellipse.ts | 2 +- packages/g6/src/elements/nodes/image.ts | 2 +- packages/g6/src/elements/nodes/rect.ts | 7 +- packages/g6/src/elements/shapes/badge.ts | 6 + packages/g6/src/elements/shapes/label.ts | 23 +- packages/g6/src/themes/base.ts | 92 +- packages/g6/src/themes/dark.ts | 37 +- packages/g6/src/themes/light.ts | 20 +- packages/g6/src/types/edge.ts | 32 +- packages/g6/src/utils/edge.ts | 50 +- packages/g6/src/utils/node.ts | 23 + packages/g6/src/utils/symbol.ts | 2 +- .../common/api/elements/nodes/base-node.md | 6 +- .../site/examples/element/edge/demo/cubic.js | 9 + .../site/examples/element/edge/demo/line.js | 9 + .../examples/element/edge/demo/quadratic.js | 9 + .../site/examples/element/node/demo/circle.js | 9 +- .../examples/element/node/demo/diamond.js | 7 +- .../site/examples/element/node/demo/donut.js | 10 +- .../examples/element/node/demo/ellipse.js | 10 +- .../examples/element/node/demo/hexagon.js | 7 +- .../site/examples/element/node/demo/image.js | 4 + .../site/examples/element/node/demo/rect.js | 10 +- .../element/node/demo/rounded-rect.js | 7 +- .../site/examples/element/node/demo/star.js | 7 +- .../examples/element/node/demo/triangle.js | 7 +- 382 files changed, 18760 insertions(+), 17908 deletions(-) create mode 100644 packages/g6/__tests__/demos/element-edge-size.ts create mode 100644 packages/g6/__tests__/snapshots/elements/edges/size/default.svg create mode 100644 packages/g6/__tests__/unit/elements/edges/size.spec.ts create mode 100644 packages/g6/src/utils/node.ts diff --git a/packages/g6/__tests__/dataset/element-nodes.json b/packages/g6/__tests__/dataset/element-nodes.json index 77bb49c891f..d84c3eb0348 100644 --- a/packages/g6/__tests__/dataset/element-nodes.json +++ b/packages/g6/__tests__/dataset/element-nodes.json @@ -6,7 +6,14 @@ "id": "badges", "style": { "badges": [ - { "text": "A", "placement": "right-top" }, + { + "text": "\ue603", + "fontFamily": "iconfont", + "backgroundWidth": 12, + "backgroundHeight": 12, + "placement": "right-top", + "offsetX": -3 + }, { "text": "Important", "placement": "right" }, { "text": "Notice", "placement": "right-bottom" } ], @@ -14,6 +21,12 @@ "badgePadding": [1, 4] } }, + { + "id": "icon", + "style": { + "iconSrc": "https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg" + } + }, { "id": "ports", "style": { @@ -25,6 +38,9 @@ { "id": "selected", "states": ["selected"] }, { "id": "highlight", "states": ["highlight"] }, { "id": "inactive", "states": ["inactive"] }, - { "id": "disabled", "states": ["disabled"] } + { + "id": "disabled", + "states": ["disabled"] + } ] } diff --git a/packages/g6/__tests__/demos/behavior-click-select.ts b/packages/g6/__tests__/demos/behavior-click-select.ts index 76b34eb0b2f..c8392ed5212 100644 --- a/packages/g6/__tests__/demos/behavior-click-select.ts +++ b/packages/g6/__tests__/demos/behavior-click-select.ts @@ -6,15 +6,7 @@ export const behaviorClickSelect: TestCase = async (context) => { const graph = new Graph({ ...context, data, - layout: { - type: 'd3-force', - }, - node: { - style: { - size: 20, - }, - }, - zoomRange: [0.5, 5], + layout: { type: 'd3-force' }, behaviors: [{ type: 'click-select', key: 'click-select' }, 'drag-element'], }); diff --git a/packages/g6/__tests__/demos/element-edge-line.ts b/packages/g6/__tests__/demos/element-edge-line.ts index f49ed34504b..764df6c3a95 100644 --- a/packages/g6/__tests__/demos/element-edge-line.ts +++ b/packages/g6/__tests__/demos/element-edge-line.ts @@ -11,6 +11,11 @@ export const elementEdgeLine: TestCase = async (context) => { labelText: (d) => d.id!, labelBackground: true, endArrow: true, + badge: true, + badgeText: '\ue603', + badgeFontFamily: 'iconfont', + badgeBackgroundWidth: 12, + badgeBackgroundHeight: 12, }, }, layout: { diff --git a/packages/g6/__tests__/demos/element-edge-size.ts b/packages/g6/__tests__/demos/element-edge-size.ts new file mode 100644 index 00000000000..27cf5e089ea --- /dev/null +++ b/packages/g6/__tests__/demos/element-edge-size.ts @@ -0,0 +1,31 @@ +import { Graph } from '@/src'; + +export const elementEdgeSize: TestCase = async (context) => { + const data = { + nodes: new Array(14).fill(0).map((_, i) => ({ id: `node${i + 1}` })), + edges: [1, 2, 4, 6, 8, 10, 12].map((lineWidth, i) => ({ + id: `edge-${i}`, + source: `node${i * 2 + 1}`, + target: `node${i * 2 + 2}`, + style: { lineWidth }, + })), + }; + + const graph = new Graph({ + ...context, + data, + edge: { + type: 'line', // 👈🏻 Edge shape type. + style: { endArrow: true }, + }, + layout: { + type: 'grid', + cols: 2, + }, + behaviors: ['drag-element'], + }); + + await graph.render(); + + return graph; +}; diff --git a/packages/g6/__tests__/demos/element-node-circle.ts b/packages/g6/__tests__/demos/element-node-circle.ts index 6a99ad9abc0..eb8326d6298 100644 --- a/packages/g6/__tests__/demos/element-node-circle.ts +++ b/packages/g6/__tests__/demos/element-node-circle.ts @@ -8,11 +8,10 @@ export const elementNodeCircle: TestCase = async (context) => { node: { type: 'circle', // 👈🏻 Node shape type. style: { - size: 40, + iconFontFamily: 'iconfont', + iconText: '\ue602', labelText: (d) => d.id!, - iconHeight: 20, - iconWidth: 20, - iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg', + size: 40, }, }, layout: { diff --git a/packages/g6/__tests__/demos/element-node-diamond.ts b/packages/g6/__tests__/demos/element-node-diamond.ts index 620d9f32da9..714251dd75e 100644 --- a/packages/g6/__tests__/demos/element-node-diamond.ts +++ b/packages/g6/__tests__/demos/element-node-diamond.ts @@ -10,9 +10,8 @@ export const elementNodeDiamond: TestCase = async (context) => { style: { size: 40, labelText: (d) => d.id!, - iconWidth: 20, - iconHeight: 20, - iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg', + iconFontFamily: 'iconfont', + iconText: '\ue602', }, }, layout: { diff --git a/packages/g6/__tests__/demos/element-node-donut.ts b/packages/g6/__tests__/demos/element-node-donut.ts index 9141a83b7fb..716865f5fa7 100644 --- a/packages/g6/__tests__/demos/element-node-donut.ts +++ b/packages/g6/__tests__/demos/element-node-donut.ts @@ -95,7 +95,8 @@ export const elementNodeDonut: TestCase = async (context) => { labelText: (d) => d.id, iconHeight: 20, iconWidth: 20, - iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg', + iconFontFamily: 'iconfont', + iconText: '\ue602', halo: (d) => idOf(d).toString().includes('halo'), portR: 3, ports: (d) => diff --git a/packages/g6/__tests__/demos/element-node-ellipse.ts b/packages/g6/__tests__/demos/element-node-ellipse.ts index 388146b95f1..463d405208f 100644 --- a/packages/g6/__tests__/demos/element-node-ellipse.ts +++ b/packages/g6/__tests__/demos/element-node-ellipse.ts @@ -12,7 +12,8 @@ export const elementNodeEllipse: TestCase = async (context) => { labelText: (d) => d.id!, iconHeight: 20, iconWidth: 20, - iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg', + iconFontFamily: 'iconfont', + iconText: '\ue602', }, }, layout: { diff --git a/packages/g6/__tests__/demos/element-node-hexagon.ts b/packages/g6/__tests__/demos/element-node-hexagon.ts index 4d45103df4e..c21dd3b24af 100644 --- a/packages/g6/__tests__/demos/element-node-hexagon.ts +++ b/packages/g6/__tests__/demos/element-node-hexagon.ts @@ -10,7 +10,8 @@ export const elementNodeHexagon: TestCase = async (context) => { style: { size: 40, labelText: (d) => d.id!, - iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg', + iconFontFamily: 'iconfont', + iconText: '\ue602', }, }, layout: { diff --git a/packages/g6/__tests__/demos/element-node-rect.ts b/packages/g6/__tests__/demos/element-node-rect.ts index 8ee0eb1d7df..6e4b78d5695 100644 --- a/packages/g6/__tests__/demos/element-node-rect.ts +++ b/packages/g6/__tests__/demos/element-node-rect.ts @@ -11,9 +11,8 @@ export const elementNodeRect: TestCase = async (context) => { radius: 4, // 👈🏻 Set the radius. size: 40, labelText: (d) => d.id!, - iconWidth: 20, - iconHeight: 20, - iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg', + iconFontFamily: 'iconfont', + iconText: '\ue602', }, }, layout: { diff --git a/packages/g6/__tests__/demos/element-node-star.ts b/packages/g6/__tests__/demos/element-node-star.ts index ca9cfe058df..7a984e25ce0 100644 --- a/packages/g6/__tests__/demos/element-node-star.ts +++ b/packages/g6/__tests__/demos/element-node-star.ts @@ -10,7 +10,8 @@ export const elementNodeStar: TestCase = async (context) => { style: { size: 40, labelText: (d) => d.id!, - iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg', + iconFontFamily: 'iconfont', + iconText: '\ue602', }, }, layout: { diff --git a/packages/g6/__tests__/demos/element-node-triangle.ts b/packages/g6/__tests__/demos/element-node-triangle.ts index af6ab593a77..492ee29fd2f 100644 --- a/packages/g6/__tests__/demos/element-node-triangle.ts +++ b/packages/g6/__tests__/demos/element-node-triangle.ts @@ -11,7 +11,8 @@ export const elementNodeTriangle: TestCase = async (context) => { size: 40, direction: (d: any) => (d.id === 'ports' ? 'left' : 'up'), labelText: (d) => d.id!, - iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg', + iconFontFamily: 'iconfont', + iconText: '\ue602', ports: (d) => (d.id === 'ports' ? [{ placement: 'left' }, { placement: 'top' }, { placement: 'bottom' }] : []), }, }, diff --git a/packages/g6/__tests__/demos/index.ts b/packages/g6/__tests__/demos/index.ts index 902ae75c34d..3389a2f7336 100644 --- a/packages/g6/__tests__/demos/index.ts +++ b/packages/g6/__tests__/demos/index.ts @@ -33,6 +33,7 @@ export { elementEdgePolyline } from './element-edge-polyline'; export { elementEdgePolylineAnimation } from './element-edge-polyline-animation'; export { elementEdgePort } from './element-edge-port'; export { elementEdgeQuadratic } from './element-edge-quadratic'; +export { elementEdgeSize } from './element-edge-size'; export { elementLabelBackground } from './element-label-background'; export { elementLabelOversized } from './element-label-oversized'; export { elementNodeBadges } from './element-node-badges'; diff --git a/packages/g6/__tests__/demos/perf-fcp.ts b/packages/g6/__tests__/demos/perf-fcp.ts index 39faa9902ae..39bec70fe4c 100644 --- a/packages/g6/__tests__/demos/perf-fcp.ts +++ b/packages/g6/__tests__/demos/perf-fcp.ts @@ -16,7 +16,8 @@ export const perfFCP: TestCase = async (context) => { labelText: (d) => d.id!, iconHeight: 20, iconWidth: 20, - iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg', + iconFontFamily: 'iconfont', + iconText: '\ue602', }, }, layout: { diff --git a/packages/g6/__tests__/index.html b/packages/g6/__tests__/index.html index ca1d33b2116..3789c15fc22 100644 --- a/packages/g6/__tests__/index.html +++ b/packages/g6/__tests__/index.html @@ -5,6 +5,7 @@ G6: Preview