feat(element): add donut

packages/g6/__tests__/demos/element-node-donut.ts

@@ -0,0 +1,130 @@
+import { Graph } from '@/src';
+import { idOf } from '@/src/utils/id';
+
+export const elementNodeDonut: TestCase = async (context) => {
+  const data = {
+    nodes: [
+      {
+        id: 'donut',
+        style: {
+          innerRadius: '60%',
+          donuts: [
+            {
+              color: 'orange',
+              lineWidth: 2,
+            },
+          ],
+          color: 'purple',
+        },
+      },
+      {
+        id: 'donut-halo',
+        style: {
+          donuts: [{ color: 'red' }, { color: 'green' }],
+        },
+      },
+      {
+        id: 'donut-badges',
+        style: {
+          donuts: [1, 2, 3],
+        },
+      },
+      {
+        id: 'donut-ports',
+        style: {
+          donuts: [1, 1, 1],
+        },
+      },
+      {
+        id: 'donut-active',
+        style: {
+          donuts: [
+            {
+              value: 20,
+            },
+            {
+              value: 1000,
+            },
+          ],
+        },
+      },
+      {
+        id: 'donut-selected',
+        style: {
+          donuts: [{ value: 1000 }, { value: 20 }],
+        },
+      },
+      {
+        id: 'donut-highlight',
+        style: {
+          donutLineWidth: 1,
+          donutStroke: '#fff',
+          donuts: [1, 2, 3],
+        },
+      },
+      {
+        id: 'donut-inactive',
+        style: {
+          innerRadius: 0,
+          donuts: [{ fill: 'red' }, { fill: 'green' }],
+        },
+      },
+      {
+        id: 'donut-disabled',
+        style: {
+          innerRadius: '50%',
+          donuts: [{ color: 'green' }, { color: 'red' }],
+        },
+      },
+    ],
+  };
+
+  const graph = new Graph({
+    ...context,
+    data,
+    node: {
+      type: 'donut', // 👈🏻 Node shape type.
+      style: {
+        size: 40,
+        innerRadius: (d: any) => d.style.innerRadius ?? '50%',
+        labelText: (d) => d.id,
+        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],
+      },
+    },
+    animation: false,
+    layout: {
+      type: 'grid',
+    },
+    behaviors: ['drag-element'],
+  });
+
+  await graph.render();
+
+  graph.setElementState({
+    'donut-active': 'active',
+    'donut-selected': 'selected',
+    'donut-highlight': 'highlight',
+    'donut-inactive': 'inactive',
+    'donut-disabled': 'disabled',
+  });
+
+  return graph;
+};

packages/g6/__tests__/demos/index.ts

@@ -35,6 +35,7 @@ export * from './element-label-background';
 export * from './element-label-oversized';
 export * from './element-node-circle';
 export * from './element-node-diamond';
+export * from './element-node-donut';
 export * from './element-node-ellipse';
 export * from './element-node-hexagon';
 export * from './element-node-html';

packages/g6/__tests__/unit/elements/nodes/donut.spec.ts

@@ -0,0 +1,11 @@
+import { elementNodeDonut } from '@/__tests__/demos';
+import { createDemoGraph } from '@@/utils';
+
+describe('element label oversized', () => {
+  it('render', async () => {
+    const graph = await createDemoGraph(elementNodeDonut);
+    await expect(graph).toMatchSnapshot(__filename);
+
+    graph.destroy();
+  });
+});

packages/g6/__tests__/unit/registry.spec.ts

@@ -5,6 +5,7 @@ import {
   CubicHorizontal,
   CubicVertical,
   Diamond,
+  Donut,
   Ellipse,
   HTML,
   Hexagon,
@@ -33,6 +34,7 @@ describe('registry', () => {
       star: Star,
       triangle: Triangle,
       diamond: Diamond,
+      donut: Donut,
       hexagon: Hexagon,
       html: HTML,
     });

packages/g6/src/elements/nodes/donut.ts

@@ -0,0 +1,137 @@
+import { Path } from '@antv/g';
+import { deepMix, isNumber, isString } from '@antv/util';
+import { getPaletteColors } from '../../utils/palette';
+import { subStyleProps } from '../../utils/prefix';
+import { parseSize } from '../../utils/size';
+import { Circle } from './circle';
+
+import type { BaseStyleProps, DisplayObjectConfig, Group } from '@antv/g';
+import type { PrefixObject } from '../../types';
+import type { CircleStyleProps } from './circle';
+
+interface Round extends BaseStyleProps {
+  /**
+   * <zh/> 数值，用于计算比例
+   *
+   * <en/> Numerical value used to calculate the scale.
+   */
+  value: number;
+  /**
+   * <zh/> 颜色
+   *
+   * <en/> Color.
+   */
+  color?: string;
+}
+
+export interface DonutStyleProps extends CircleStyleProps, PrefixObject<BaseStyleProps, 'donut'> {
+  /**
+   * <zh/> 内环半径，使用百分比或者像素值
+   *
+   * <en/> Inner ring radius, using percentage or pixel value.
+   */
+  innerRadius?: string | number;
+  /**
+   * <zh/> 圆环数据
+   *
+   * <en/> Donut data.
+   */
+  donuts?: number[] | Round[];
+  /**
+   * <zh/> 颜色或者色板名
+   *
+   * <en/> Color or palette.
+   */
+  colors?: string | string[];
+}
+
+export class Donut extends Circle {
+  static defaultStyleProps: Partial<DonutStyleProps> = {
+    innerRadius: '50%',
+    donuts: [],
+    colors: 'tableau',
+  };
+
+  constructor(options: DisplayObjectConfig<DonutStyleProps>) {
+    super(deepMix({}, { style: Donut.defaultStyleProps }, options));
+  }
+
+  protected drawDonutShape(attributes: Required<DonutStyleProps>, container: Group): void {
+    const { donuts, innerRadius = 0, size } = attributes;
+    if (!donuts?.length) return;
+
+    const parsedDonuts = donuts.map((round) => (isNumber(round) ? { value: round } : round) as Round);
+
+    const style = subStyleProps<BaseStyleProps>(this.getGraphicStyle(attributes), 'donut');
+
+    const colors = getPaletteColors(attributes.colors);
+    if (!colors) return;
+
+    const sum = parsedDonuts.reduce((acc, cur) => acc + (cur.value ?? 0), 0);
+
+    let start = 0;
+    parsedDonuts.forEach((round, index) => {
+      const { value = 0, color = colors[index % colors.length], ...roundStyle } = round;
+      const outerR = parseSize(size)[0] / 2;
+      const innerR = isString(innerRadius) ? (outerR * parseInt(innerRadius)) / 100 : innerRadius;
+      const angle = (sum === 0 ? 1 / parsedDonuts.length : value / sum) * 360;
+
+      this.upsert(
+        `round${index}`,
+        Path,
+        {
+          ...style,
+          path: arc(outerR, innerR, start, start + angle),
+          fill: color,
+          ...roundStyle,
+        },
+        container,
+      );
+
+      start += angle;
+    });
+  }
+
+  public render(attributes: Required<DonutStyleProps>, container: Group = this) {
+    super.render(attributes, container);
+    this.drawDonutShape(attributes, container);
+  }
+}
+
+const point = (x: number, y: number, r: number, angel: number) => [x + Math.sin(angel) * r, y - Math.cos(angel) * r];
+
+const full = (x: number, y: number, R: number, r: number) => {
+  if (r <= 0 || R <= r) {
+    return [['M', x - R, y], ['A', R, R, 0, 1, 1, x + R, y], ['A', R, R, 0, 1, 1, x - R, y], ['Z']];
+  }
+  return [
+    ['M', x - R, y],
+    ['A', R, R, 0, 1, 1, x + R, y],
+    ['A', R, R, 0, 1, 1, x - R, y],
+    ['Z'],
+    ['M', x + r, y],
+    ['A', r, r, 0, 1, 0, x - r, y],
+    ['A', r, r, 0, 1, 0, x + r, y],
+    ['Z'],
+  ];
+};
+
+const part = (x: number, y: number, R: number, r: number, start: number, end: number) => {
+  const [s, e] = [(start / 360) * 2 * Math.PI, (end / 360) * 2 * Math.PI];
+  const P = [point(x, y, r, s), point(x, y, R, s), point(x, y, R, e), point(x, y, r, e)];
+  const flag = e - s > Math.PI ? 1 : 0;
+  return [
+    ['M', P[0][0], P[0][1]],
+    ['L', P[1][0], P[1][1]],
+    ['A', R, R, 0, flag, 1, P[2][0], P[2][1]],
+    ['L', P[3][0], P[3][1]],
+    ['A', r, r, 0, flag, 0, P[0][0], P[0][1]],
+    ['Z'],
+  ];
+};
+
+const arc = (R = 0, r = 0, start: number, end: number) => {
+  const [x, y] = [0, 0];
+  if (Math.abs(start - end) % 360 < 0.000001) return full(x, y, R, r);
+  return part(x, y, R, r, start, end);
+};

packages/g6/src/elements/nodes/index.ts

@@ -1,6 +1,7 @@
 export { BaseNode } from './base-node';
 export { Circle } from './circle';
 export { Diamond } from './diamond';
+export { Donut } from './donut';
 export { Ellipse } from './ellipse';
 export { Hexagon } from './hexagon';
 export { HTML } from './html';
@@ -12,6 +13,7 @@ export { Triangle } from './triangle';
 export type { BaseNodeStyleProps } from './base-node';
 export type { CircleStyleProps } from './circle';
 export type { DiamondStyleProps } from './diamond';
+export type { DonutStyleProps } from './donut';
 export type { EllipseStyleProps } from './ellipse';
 export type { HexagonStyleProps } from './hexagon';
 export type { HTMLStyleProps } from './html';

packages/g6/src/exports.ts

@@ -16,7 +16,19 @@ export {
 } from './constants';
 export { BaseCombo, CircleCombo, RectCombo } from './elements/combos';
 export { BaseEdge, Cubic, CubicHorizontal, CubicVertical, Line, Polyline, Quadratic } from './elements/edges';
-export { BaseNode, Circle, Diamond, Ellipse, HTML, Hexagon, Image, Rect, Star, Triangle } from './elements/nodes';
+export {
+  BaseNode,
+  Circle,
+  Diamond,
+  Donut,
+  Ellipse,
+  HTML,
+  Hexagon,
+  Image,
+  Rect,
+  Star,
+  Triangle,
+} from './elements/nodes';
 export { BaseShape } from './elements/shapes';
 export { BasePlugin, CameraSetting, History } from './plugins';
 export { getExtension, getExtensions, register } from './registry';

packages/g6/src/registry/build-in.ts

@@ -19,6 +19,7 @@ import {
   CubicHorizontal,
   CubicVertical,
   Diamond,
+  Donut,
   Ellipse,
   HTML,
   Hexagon,
@@ -121,6 +122,7 @@ export const BUILT_IN_EXTENSIONS: ExtensionRegistry = {
     image: Image,
     rect: Rect,
     star: Star,
+    donut: Donut,
     triangle: Triangle,
   },
   palette: {

packages/g6/src/themes/base.ts

@@ -34,6 +34,7 @@ type ThemeTokens = {
   nodeStroke: string;
   nodeBadgePalette?: string[];
   nodePaletteOptions?: PaletteOptions;
+  donutPaletteOptions?: PaletteOptions;
   edgeColor: string;
   edgeColorDisabled: string;
   edgePaletteOptions?: PaletteOptions;
@@ -120,13 +121,15 @@ export function create(tokens: ThemeTokens): Theme {
           strokeOpacity: 0.85,
         },
         inactive: {
+          donutOpacity: 0.25,
           iconOpacity: 0.25,
           labelOpacity: 0.25,
           opacity: 0.25,
         },
         disabled: {
           color: nodeColorDisabled,
           labelOpacity: 0.25,
+          donutOpacity: 0.25,
         },
       },
       animation: {