feat: set node ports without rendering graphics (#5509)

* feat: set node ports without rendering graphics * refactor: optimize port style * test: add ut
antvis · Mar 11, 2024 · acd154f · acd154f
1 parent 2fb69fc
commit acd154f
Show file tree

Hide file tree

Showing 36 changed files with 267 additions and 158 deletions.
diff --git a/packages/g6/__tests__/demo/static/controller-layout-dendrogram.ts b/packages/g6/__tests__/demo/static/controller-layout-dendrogram.ts
@@ -23,6 +23,14 @@ export const controllerLayoutDendrogram: STDTestCase = async (context) => {
         labelText: (data: any) => data.id,
         labelPlacement: 'right',
         labelMaxWidth: 200,
+        ports: [
+          {
+            placement: 'right',
+          },
+          {
+            placement: 'left',
+          },
+        ],
       },
     },
     edge: {

diff --git a/packages/g6/__tests__/demo/static/node-circle.ts b/packages/g6/__tests__/demo/static/node-circle.ts
@@ -32,6 +32,7 @@ export const nodeCircle: StaticTestCase = async (context) => {
         iconWidth: 20,
         iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
         halo: (d: any) => d.id.includes('halo'),
+        portR: 3,
         ports: (d: any) =>
           d.id.includes('ports')
             ? [{ placement: 'left' }, { placement: 'right' }, { placement: 'top' }, { placement: 'bottom' }]

diff --git a/packages/g6/__tests__/demo/static/node-diamond.ts b/packages/g6/__tests__/demo/static/node-diamond.ts
@@ -31,6 +31,7 @@ export const nodeDiamond: StaticTestCase = async (context) => {
         iconHeight: 20,
         iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
         halo: (d: any) => d.id.includes('halo'),
+        portR: 3,
         ports: (d: any) =>
           d.id.includes('ports')
             ? [{ placement: 'left' }, { placement: 'right' }, { placement: 'top' }, { placement: 'bottom' }]

diff --git a/packages/g6/__tests__/demo/static/node-ellipse.ts b/packages/g6/__tests__/demo/static/node-ellipse.ts
@@ -32,6 +32,7 @@ export const nodeEllipse: StaticTestCase = async (context) => {
         iconWidth: 20,
         iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
         halo: (d: any) => d.id.includes('halo'),
+        portR: 3,
         ports: (d: any) =>
           d.id.includes('ports')
             ? [{ placement: 'left' }, { placement: 'right' }, { placement: 'top' }, { placement: 'bottom' }]

diff --git a/packages/g6/__tests__/demo/static/node-image.ts b/packages/g6/__tests__/demo/static/node-image.ts
@@ -31,6 +31,7 @@ export const nodeImage: StaticTestCase = async (context) => {
         src: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',
         halo: (d: any) => d.id.includes('halo'),
         haloStroke: '#227eff',
+        portR: 3,
         ports: (d: any) =>
           d.id.includes('ports')
             ? [{ placement: 'left' }, { placement: 'right' }, { placement: 'top' }, { placement: 'bottom' }]

diff --git a/packages/g6/__tests__/demo/static/node-rect.ts b/packages/g6/__tests__/demo/static/node-rect.ts
@@ -33,6 +33,7 @@ export const nodeRect: StaticTestCase = async (context) => {
         iconHeight: 20,
         iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
         halo: (d: any) => d.id.includes('halo'),
+        portR: 3,
         ports: (d: any) =>
           d.id.includes('ports')
             ? [{ placement: 'left' }, { placement: 'right' }, { placement: 'top' }, { placement: 'bottom' }]

diff --git a/packages/g6/__tests__/demo/static/node-star.ts b/packages/g6/__tests__/demo/static/node-star.ts
@@ -30,6 +30,7 @@ export const nodeStar: StaticTestCase = async (context) => {
         labelText: (d: any) => d.id,
         iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
         halo: (d: any) => d.id.includes('halo'),
+        portR: 3,
         ports: (d: any) =>
           d.id.includes('ports')
             ? [{ placement: 'left' }, { placement: 'right' }, { placement: 'top' }, { placement: 'bottom' }]

diff --git a/packages/g6/__tests__/demo/static/node-triangle.ts b/packages/g6/__tests__/demo/static/node-triangle.ts
@@ -30,6 +30,7 @@ export const nodeTriangle: StaticTestCase = async (context) => {
         labelText: (d: any) => d.id,
         iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
         halo: (d: any) => d.id.includes('halo'),
+        portR: 3,
         ports: (d: any) =>
           d.id.includes('ports') ? [{ placement: 'left' }, { placement: 'top' }, { placement: 'bottom' }] : [],
         badges: (d: any) =>