feat: add light and dark theme; node supports new badgePalette attr…

…ibute (#5467) * feat(node): support new badgePalette attribute * feat: add light theme and dark theme;update demo and test panel * refactor(site): update site demos * refactor: rename disable to disabled * refactor: rename disable to disabled --------- Co-authored-by: Aaron <[email protected]>
antvis · Feb 26, 2024 · 634d596 · 634d596
1 parent 1096dd9
commit 634d596
Show file tree

Hide file tree

Showing 56 changed files with 11,099 additions and 2,572 deletions.
diff --git a/packages/g6/__tests__/demo/animation/controller-element.ts b/packages/g6/__tests__/demo/animation/controller-element.ts
@@ -36,9 +36,9 @@ export const controllerElement: AnimationTestCase = async (context) => {
   await graph.draw();
 
   graph.addNodeData([
-    { id: 'node-4', style: { x: 50, y: 200, stroke: 'orange' } },
-    { id: 'node-5', style: { x: 75, y: 150, stroke: 'purple' } },
-    { id: 'node-6', style: { x: 200, y: 100, stroke: 'cyan' } },
+    { id: 'node-4', style: { x: 50, y: 200, fill: 'orange' } },
+    { id: 'node-5', style: { x: 75, y: 150, fill: 'purple' } },
+    { id: 'node-6', style: { x: 200, y: 100, fill: 'cyan' } },
   ]);
 
   graph.removeNodeData(['node-1']);

diff --git a/packages/g6/__tests__/demo/static/edge-line.ts b/packages/g6/__tests__/demo/static/edge-line.ts
@@ -2,78 +2,34 @@ import { Graph } from '@/src';
 import type { StaticTestCase } from '../types';
 
 export const edgeLine: StaticTestCase = async (context) => {
-  const { canvas, animation } = context;
+  const { canvas, animation, theme } = context;
+
+  const edgeIds = ['line-default', 'line-active', 'line-selected', 'line-highlight', 'line-inactive', 'line-disabled'];
 
   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',
-      },
-    ],
+    nodes: new Array(7).fill(0).map((_, i) => ({ id: `node${i + 1}` })),
+    edges: edgeIds.map((id, i) => ({
+      id,
+      source: 'node1',
+      target: `node${i + 2}`,
+    })),
   };
 
   const graph = new Graph({
     container: canvas,
+    theme,
     data,
     node: {
       style: {
         type: 'circle', // 👈🏻 Node shape type.
-        size: 40,
-        color: '#1783FF',
       },
     },
     edge: {
       style: {
         type: 'line', // 👈🏻 Edge shape type.
-        color: 'rgb(153, 173, 209)',
         labelText: (d: any) => d.id,
-        labelBackgroundPadding: 0,
-        labelBackgroundFill: '#fff',
-        labelBackgroundLineWidth: 0,
-        labelBackgroundOpacity: 0.75,
         endArrow: true,
       },
-      state: {
-        active: {
-          halo: true,
-        },
-        selected: {
-          lineWidth: 2,
-          labelFontWeight: 700,
-          halo: true,
-        },
-        highlight: {
-          halo: false,
-          lineWidth: 2,
-          labelFontWeight: 700,
-        },
-        inactive: {
-          color: 'rgb(210, 218, 233)',
-        },
-      },
     },
     layout: {
       type: 'radial',
@@ -89,4 +45,5 @@ export const edgeLine: StaticTestCase = async (context) => {
   graph.setElementState('line-selected', 'selected');
   graph.setElementState('line-highlight', 'highlight');
   graph.setElementState('line-inactive', 'inactive');
+  graph.setElementState('line-disabled', 'disabled');
 };
diff --git a/packages/g6/__tests__/demo/static/node-circle.ts b/packages/g6/__tests__/demo/static/node-circle.ts
@@ -2,7 +2,7 @@ import { Graph } from '@/src';
 import type { StaticTestCase } from '../types';
 
 export const nodeCircle: StaticTestCase = async (context) => {
-  const { canvas } = context;
+  const { canvas, animation, theme } = context;
 
   const data = {
     nodes: [
@@ -14,65 +14,44 @@ export const nodeCircle: StaticTestCase = async (context) => {
       { id: 'circle-selected' },
       { id: 'circle-highlight' },
       { id: 'circle-inactive' },
+      { id: 'circle-disabled' },
     ],
   };
 
   const graph = new Graph({
     container: canvas,
     data,
+    theme,
     node: {
       style: {
         type: 'circle', // 👈🏻 Node shape type.
         size: 40,
-        fill: '#1783FF',
+        labelMaxWidth: 120,
         labelText: (d: any) => d.id,
+        iconHeight: 20,
+        iconWidth: 20,
         iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
-        iconWidth: 30,
-        iconHeight: 30,
         halo: (d: any) => d.id.includes('halo'),
         ports: (d: any) =>
           d.id.includes('ports')
             ? [{ position: 'left' }, { position: 'right' }, { position: 'top' }, { position: 'bottom' }]
             : [],
-        portStroke: '#31d0c6',
-        portFill: '#fff',
-        portR: 2,
-        portLineWidth: 1,
         badges: (d: any) =>
           d.id.includes('badges')
             ? [
-                { text: 'A', position: 'right-top', backgroundFill: '#8291b2' },
-                { text: 'Important', position: 'right', backgroundFill: '#e66c5b' },
-                { text: 'Notice', position: 'right-bottom', backgroundFill: '#e5b95e' },
+                { text: 'A', position: 'right-top' },
+                { text: 'Important', position: 'right' },
+                { text: 'Notice', position: 'right-bottom' },
               ]
             : [],
-        badgeFill: '#fff',
         badgeFontSize: 8,
         badgePadding: [1, 4],
       },
-      state: {
-        active: {
-          halo: true,
-        },
-        selected: {
-          halo: true,
-          lineWidth: 2,
-          stroke: '#000',
-        },
-        highlight: {
-          halo: false,
-          lineWidth: 2,
-          stroke: '#000',
-        },
-        inactive: {
-          opacity: 0.2,
-        },
-      },
     },
     layout: {
       type: 'grid',
     },
-    animation: false,
+    animation,
   });
 
   await graph.render();
@@ -81,4 +60,5 @@ export const nodeCircle: StaticTestCase = async (context) => {
   graph.setElementState('circle-selected', 'selected');
   graph.setElementState('circle-highlight', 'highlight');
   graph.setElementState('circle-inactive', 'inactive');
+  graph.setElementState('circle-disabled', 'disabled');
 };
diff --git a/packages/g6/__tests__/demo/static/node-ellipse.ts b/packages/g6/__tests__/demo/static/node-ellipse.ts
@@ -2,7 +2,7 @@ import { Graph } from '@/src';
 import type { StaticTestCase } from '../types';
 
 export const nodeEllipse: StaticTestCase = async (context) => {
-  const { canvas } = context;
+  const { canvas, animation, theme } = context;
 
   const data = {
     nodes: [
@@ -14,63 +14,44 @@ export const nodeEllipse: StaticTestCase = async (context) => {
       { id: 'ellipse-selected' },
       { id: 'ellipse-highlight' },
       { id: 'ellipse-inactive' },
+      { id: 'ellipse-disabled' },
     ],
   };
 
   const graph = new Graph({
     container: canvas,
+    theme,
     data,
     node: {
       style: {
         type: 'ellipse', // 👈🏻 Node shape type.
         size: [45, 35],
-        fill: '#1783FF',
+        labelMaxWidth: 120,
         labelText: (d: any) => d.id,
+        iconHeight: 20,
+        iconWidth: 20,
         iconSrc: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
         halo: (d: any) => d.id.includes('halo'),
         ports: (d: any) =>
           d.id.includes('ports')
             ? [{ position: 'left' }, { position: 'right' }, { position: 'top' }, { position: 'bottom' }]
             : [],
-        portStroke: '#31d0c6',
-        portFill: '#fff',
-        portR: 2,
-        portLineWidth: 1,
         badges: (d: any) =>
           d.id.includes('badges')
             ? [
-                { text: 'A', position: 'right-top', backgroundFill: '#8291b2' },
-                { text: 'Important', position: 'right', backgroundFill: '#e66c5b' },
-                { text: 'Notice', position: 'right-bottom', backgroundFill: '#e5b95e' },
+                { text: 'A', position: 'right-top' },
+                { text: 'Important', position: 'right' },
+                { text: 'Notice', position: 'right-bottom' },
               ]
             : [],
-        badgeFill: '#fff',
         badgeFontSize: 8,
         badgePadding: [1, 4],
       },
-      state: {
-        active: {
-          halo: true,
-        },
-        selected: {
-          halo: true,
-          lineWidth: 2,
-          stroke: '#000',
-        },
-        highlight: {
-          halo: false,
-          lineWidth: 2,
-          stroke: '#000',
-        },
-        inactive: {
-          opacity: 0.2,
-        },
-      },
     },
     layout: {
       type: 'grid',
     },
-    animation: false,
+    animation,
   });
 
   await graph.render();
@@ -79,4 +60,5 @@ export const nodeEllipse: StaticTestCase = async (context) => {
   graph.setElementState('ellipse-selected', 'selected');
   graph.setElementState('ellipse-highlight', 'highlight');
   graph.setElementState('ellipse-inactive', 'inactive');
+  graph.setElementState('ellipse-disabled', 'disabled');
 };
diff --git a/packages/g6/__tests__/demo/static/node-image.ts b/packages/g6/__tests__/demo/static/node-image.ts
@@ -2,7 +2,7 @@ import { Graph } from '@/src';
 import type { StaticTestCase } from '../types';
 
 export const nodeImage: StaticTestCase = async (context) => {
-  const { canvas } = context;
+  const { canvas, animation, theme } = context;
 
   const data = {
     nodes: [
@@ -14,67 +14,54 @@ export const nodeImage: StaticTestCase = async (context) => {
       { id: 'image-selected' },
       { id: 'image-highlight' },
       { id: 'image-inactive' },
+      { id: 'image-disabled' },
     ],
   };
 
   const graph = new Graph({
     container: canvas,
+    theme,
     data,
     node: {
       style: {
         type: 'image', // 👈🏻 Node shape type.
         size: 40,
+        labelMaxWidth: 120,
         labelText: (d: any) => d.id,
         src: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',
         halo: (d: any) => d.id.includes('halo'),
-        haloStroke: '#1783FF',
+        haloStroke: '#227eff',
         ports: (d: any) =>
           d.id.includes('ports')
             ? [{ position: 'left' }, { position: 'right' }, { position: 'top' }, { position: 'bottom' }]
             : [],
-        portStroke: '#31d0c6',
-        portFill: '#fff',
-        portR: 2,
-        portLineWidth: 1,
         badges: (d: any) =>
           d.id.includes('badges')
             ? [
-                { text: 'A', position: 'right-top', backgroundFill: '#8291b2' },
-                { text: 'Important', position: 'right', backgroundFill: '#e66c5b' },
-                { text: 'Notice', position: 'right-bottom', backgroundFill: '#e5b95e' },
+                { text: 'A', position: 'right-top' },
+                { text: 'Important', position: 'right' },
+                { text: 'Notice', position: 'right-bottom' },
               ]
             : [],
-        badgeFill: '#fff',
         badgeFontSize: 8,
         badgePadding: [1, 4],
       },
       state: {
-        active: {
-          halo: true,
-        },
-        selected: {
-          halo: true,
-          labelFontWeight: 700,
-          labelFontSize: 14,
-        },
-        highlight: {
-          halo: false,
-          labelFontWeight: 700,
-        },
-        inactive: {
+        disabled: {
           opacity: 0.2,
         },
       },
     },
     layout: {
       type: 'grid',
     },
-    animation: false,
+    animation,
   });
 
   await graph.render();
   graph.setElementState('image-active', 'active');
   graph.setElementState('image-selected', 'selected');
   graph.setElementState('image-highlight', 'highlight');
   graph.setElementState('image-inactive', 'inactive');
+  graph.setElementState('image-disabled', 'disabled');
 };