@antv/infographic 0.0.1-beta.1

package/src/designs/structures/list-grid.tsx

@@ -0,0 +1,118 @@
+/** @jsxImportSource @antv/infographic-jsx */
+import type { ComponentType, JSXElement } from '@antv/infographic-jsx';
+import { getElementBounds, Group } from '@antv/infographic-jsx';
+import { BtnAdd, BtnRemove, BtnsGroup, ItemsGroup } from '../components';
+import { FlexLayout } from '../layouts';
+import { registerStructure } from './registry';
+import type { BaseStructureProps } from './types';
+
+export interface ListGridProps extends BaseStructureProps {
+  columns?: number;
+  gap?: number;
+  zigzag?: boolean;
+}
+
+export const ListGrid: ComponentType<ListGridProps> = (props) => {
+  const { Title, Item, data, columns = 3, gap = 24, zigzag } = props;
+  const { title, desc, items = [] } = data;
+
+  const titleContent = Title ? <Title title={title} desc={desc} /> : null;
+
+  const btnBounds = getElementBounds(<BtnAdd indexes={[0]} />);
+  const itemBounds = getElementBounds(
+    <Item indexes={[0]} data={data} datum={items[0]} positionH="center" />,
+  );
+
+  const btnElements: JSXElement[] = [];
+  const itemElements: JSXElement[] = [];
+
+  const rowHeight = itemBounds.height + gap;
+  const colWidth = itemBounds.width + gap;
+
+  // Track processed rows for left/right buttons
+  const processedRows = new Set<number>();
+
+  items.forEach((item, index) => {
+    const row = Math.floor(index / columns);
+    const col = index % columns;
+    const itemX = col * colWidth;
+    const itemY = row * rowHeight;
+    const indexes = [index];
+
+    itemElements.push(
+      <Item
+        indexes={indexes}
+        datum={item}
+        data={data}
+        x={itemX}
+        y={itemY}
+        positionH="center"
+        positionV={zigzag && index % 2 === 0 ? 'normal' : 'flipped'}
+      />,
+    );
+
+    // Remove button - positioned below item
+    btnElements.push(
+      <BtnRemove
+        indexes={indexes}
+        x={itemX + (itemBounds.width - btnBounds.width) / 2}
+        y={itemY + itemBounds.height}
+      />,
+    );
+
+    // Add horizontal buttons between items (vertically centered with items)
+    if (col < columns - 1) {
+      btnElements.push(
+        <BtnAdd
+          indexes={[index + 1]}
+          x={itemX + itemBounds.width + (gap - btnBounds.width) / 2}
+          y={itemY + (itemBounds.height - btnBounds.height) / 2}
+        />,
+      );
+    }
+
+    // Add button at the left side of first item in each row
+    if (col === 0 && !processedRows.has(row)) {
+      btnElements.push(
+        <BtnAdd
+          indexes={[index]}
+          x={itemX - gap / 2 - btnBounds.width / 2}
+          y={itemY + (itemBounds.height - btnBounds.height) / 2}
+        />,
+      );
+      processedRows.add(row);
+    }
+
+    // Add button at the right side of last item in each row
+    const isLastInRow = col === columns - 1 || index === items.length - 1;
+    if (isLastInRow) {
+      btnElements.push(
+        <BtnAdd
+          indexes={[index + 1]}
+          x={itemX + itemBounds.width + gap / 2 - btnBounds.width / 2}
+          y={itemY + (itemBounds.height - btnBounds.height) / 2}
+        />,
+      );
+    }
+  });
+
+  return (
+    <FlexLayout
+      id="infographic-container"
+      flexDirection="column"
+      justifyContent="center"
+      alignItems="center"
+    >
+      {titleContent}
+      <Group>
+        <ItemsGroup>{itemElements}</ItemsGroup>
+        <BtnsGroup>{btnElements}</BtnsGroup>
+      </Group>
+    </FlexLayout>
+  );
+};
+
+registerStructure('list-grid', {
+  component: ListGrid,
+  composites: ['title', 'item'],
+});

package/src/designs/structures/list-pyramid.tsx

@@ -0,0 +1,132 @@
+/** @jsxImportSource @antv/infographic-jsx */
+import type { ComponentType, JSXElement } from '@antv/infographic-jsx';
+import { getElementBounds, Group } from '@antv/infographic-jsx';
+import { BtnAdd, BtnRemove, BtnsGroup, ItemsGroup } from '../components';
+import { FlexLayout } from '../layouts';
+import { registerStructure } from './registry';
+import type { BaseStructureProps } from './types';
+
+export interface ListPyramidProps extends BaseStructureProps {
+  gap?: number;
+  levelGap?: number;
+}
+
+export const ListPyramid: ComponentType<ListPyramidProps> = (props) => {
+  const { Title, Item, data, gap = 20, levelGap = 20 } = props;
+  const { title, desc, items = [] } = data;
+
+  const titleContent = Title ? <Title title={title} desc={desc} /> : null;
+
+  const btnBounds = getElementBounds(<BtnAdd indexes={[0]} />);
+  const itemBounds = getElementBounds(
+    <Item indexes={[0]} data={data} datum={items[0]} positionH="center" />,
+  );
+
+  const btnElements: JSXElement[] = [];
+  const itemElements: JSXElement[] = [];
+
+  const levels = Math.ceil(Math.sqrt(items.length));
+  const levelSizes: number[] = [];
+  let remainingItems = items.length;
+
+  for (let level = 0; level < levels; level++) {
+    const itemsInLevel = Math.min(level + 1, remainingItems);
+    levelSizes.push(itemsInLevel);
+    remainingItems -= itemsInLevel;
+    if (remainingItems <= 0) break;
+  }
+
+  let itemIndex = 0;
+  const maxLevelSize = Math.max(...levelSizes);
+  const maxLevelWidth =
+    maxLevelSize * itemBounds.width + (maxLevelSize - 1) * gap;
+  const baseOffset = maxLevelWidth / 2;
+
+  levelSizes.forEach((levelSize, level) => {
+    const levelY = level * (itemBounds.height + levelGap);
+    const totalLevelWidth =
+      levelSize * itemBounds.width + (levelSize - 1) * gap;
+    const startX = baseOffset - totalLevelWidth / 2;
+
+    for (let i = 0; i < levelSize && itemIndex < items.length; i++) {
+      const itemX = startX + i * (itemBounds.width + gap);
+      const item = items[itemIndex];
+      const indexes = [itemIndex];
+
+      itemElements.push(
+        <Item
+          indexes={indexes}
+          datum={item}
+          data={data}
+          x={itemX}
+          y={levelY}
+          positionH="center"
+        />,
+      );
+
+      // Remove button - positioned below item
+      btnElements.push(
+        <BtnRemove
+          indexes={indexes}
+          x={itemX + (itemBounds.width - btnBounds.width) / 2}
+          y={levelY + itemBounds.height}
+        />,
+      );
+
+      // Add horizontal buttons between items (vertically centered with items)
+      if (i < levelSize - 1) {
+        btnElements.push(
+          <BtnAdd
+            indexes={[itemIndex + 1]}
+            x={itemX + itemBounds.width + (gap - btnBounds.width) / 2}
+            y={levelY + (itemBounds.height - btnBounds.height) / 2}
+          />,
+        );
+      }
+
+      // Add button at the left side of first item in each level
+      if (i === 0) {
+        btnElements.push(
+          <BtnAdd
+            indexes={[itemIndex]}
+            x={itemX - gap / 2 - btnBounds.width / 2}
+            y={levelY + (itemBounds.height - btnBounds.height) / 2}
+          />,
+        );
+      }
+
+      // Add button at the right side of last item in each level
+      if (i === levelSize - 1) {
+        btnElements.push(
+          <BtnAdd
+            indexes={[itemIndex + 1]}
+            x={itemX + itemBounds.width + gap / 2 - btnBounds.width / 2}
+            y={levelY + (itemBounds.height - btnBounds.height) / 2}
+          />,
+        );
+      }
+
+      itemIndex++;
+    }
+  });
+
+  return (
+    <FlexLayout
+      id="infographic-container"
+      flexDirection="column"
+      justifyContent="center"
+      alignItems="center"
+    >
+      {titleContent}
+      <Group>
+        <ItemsGroup>{itemElements}</ItemsGroup>
+        <BtnsGroup>{btnElements}</BtnsGroup>
+      </Group>
+    </FlexLayout>
+  );
+};
+
+registerStructure('list-pyramid', {
+  component: ListPyramid,
+  composites: ['title', 'item'],
+});

package/src/designs/structures/list-row.tsx

@@ -0,0 +1,90 @@
+/** @jsxImportSource @antv/infographic-jsx */
+import type { ComponentType, JSXElement } from '@antv/infographic-jsx';
+import { getElementBounds, Group } from '@antv/infographic-jsx';
+import { BtnAdd, BtnRemove, BtnsGroup, ItemsGroup } from '../components';
+import { FlexLayout } from '../layouts';
+import { registerStructure } from './registry';
+import type { BaseStructureProps } from './types';
+
+export interface ListRowProps extends BaseStructureProps {
+  gap?: number;
+  zigzag?: boolean;
+}
+
+export const ListRow: ComponentType<ListRowProps> = (props) => {
+  const { Title, Item, data, gap = 20, zigzag } = props;
+  const { title, desc, items = [] } = data;
+
+  const titleContent = Title ? <Title title={title} desc={desc} /> : null;
+
+  const btnBounds = getElementBounds(<BtnAdd indexes={[0]} />);
+  const itemBounds = getElementBounds(
+    <Item indexes={[0]} data={data} datum={items[0]} positionH="center" />,
+  );
+
+  const btnElements: JSXElement[] = [];
+  const itemElements: JSXElement[] = [];
+
+  const btnAddY = (itemBounds.height - btnBounds.height) / 2;
+  const btnRemoveY = itemBounds.height;
+
+  items.forEach((item, index) => {
+    const itemX = (itemBounds.width + gap) * index;
+    const indexes = [index];
+    itemElements.push(
+      <Item
+        indexes={indexes}
+        datum={item}
+        data={data}
+        x={itemX}
+        positionH="center"
+        positionV={zigzag && index % 2 === 0 ? 'normal' : 'flipped'}
+      />,
+    );
+
+    btnElements.push(
+      <BtnRemove
+        indexes={indexes}
+        x={itemX + (itemBounds.width - btnBounds.width) / 2}
+        y={btnRemoveY}
+      />,
+    );
+
+    const btnAddX =
+      index === 0
+        ? -(gap + btnBounds.width) / 2
+        : itemX - (gap + btnBounds.width) / 2;
+
+    btnElements.push(<BtnAdd indexes={indexes} x={btnAddX} y={btnAddY} />);
+  });
+
+  if (items.length > 0) {
+    const lastItemX = (itemBounds.width + gap) * (items.length - 1);
+    const extraAddBtnX =
+      lastItemX + itemBounds.width + (gap - btnBounds.width) / 2;
+
+    btnElements.push(
+      <BtnAdd indexes={[items.length]} x={extraAddBtnX} y={btnAddY} />,
+    );
+  }
+
+  return (
+    <FlexLayout
+      id="infographic-container"
+      flexDirection="column"
+      justifyContent="center"
+      alignItems="center"
+    >
+      {titleContent}
+      <Group>
+        <ItemsGroup>{itemElements}</ItemsGroup>
+        <BtnsGroup>{btnElements}</BtnsGroup>
+      </Group>
+    </FlexLayout>
+  );
+};
+
+registerStructure('list-row', {
+  component: ListRow,
+  composites: ['title', 'item'],
+});

package/src/designs/structures/list-sector.tsx

@@ -0,0 +1,296 @@
+/** @jsxImportSource @antv/infographic-jsx */
+import type { ComponentType, JSXElement } from '@antv/infographic-jsx';
+import {
+  Ellipse,
+  getElementBounds,
+  Group,
+  Path,
+  Text,
+} from '@antv/infographic-jsx';
+import { BtnAdd, BtnRemove, BtnsGroup, ItemsGroup } from '../components';
+import { getPaletteColor, getThemeColors } from '../utils';
+import { registerStructure } from './registry';
+import type { BaseStructureProps } from './types';
+
+export interface ListSectorProps extends BaseStructureProps {
+  outerRadius?: number;
+  innerRadius?: number;
+  startAngle?: number;
+  endAngle?: number;
+  gapAngle?: number;
+}
+
+export const ListSector: ComponentType<ListSectorProps> = (props) => {
+  const {
+    Item,
+    data,
+    outerRadius = 250,
+    innerRadius = 120,
+    startAngle = -90,
+    endAngle = 270,
+    gapAngle = 1,
+    options,
+  } = props;
+  const { title, items = [] } = data;
+
+  const themeColors = getThemeColors(options.themeConfig);
+
+  const btnBounds = getElementBounds(<BtnAdd indexes={[0]} />);
+
+  const btnElements: JSXElement[] = [];
+  const itemElements: JSXElement[] = [];
+  const sectorElements: JSXElement[] = [];
+
+  const centerX = outerRadius + 100;
+  const centerY = outerRadius + 100;
+
+  const totalAngle = endAngle - startAngle;
+  const isFullCircle = Math.abs(totalAngle - 360) < 0.01;
+  // 非圆形时，最后一个扇形后面不需要间隔角度
+  const totalGapAngle =
+    items.length > 0
+      ? gapAngle * (isFullCircle ? items.length : items.length - 1)
+      : 0;
+  const totalUsableAngle = totalAngle - totalGapAngle;
+  const anglePerSector = items.length > 0 ? totalUsableAngle / items.length : 0;
+
+  items.forEach((item, index) => {
+    const indexes = [index];
+    const currentStartAngle = startAngle + (anglePerSector + gapAngle) * index;
+    const currentEndAngle = currentStartAngle + anglePerSector;
+
+    // 计算间隙在不同半径上对应的角度偏移
+    // 目标：让内圆和外圆上的弧长间隙相等，从而实现平行边
+    const gapArcLength = (gapAngle * Math.PI * outerRadius) / 180;
+    const innerGapAngle = (gapArcLength / innerRadius) * (180 / Math.PI);
+    const outerGapAngle = gapAngle;
+
+    // 外圆：使用原始的间隙角度
+    const outerStartAngleRad =
+      ((currentStartAngle + outerGapAngle / 2) * Math.PI) / 180;
+    const outerEndAngleRad =
+      ((currentEndAngle - outerGapAngle / 2) * Math.PI) / 180;
+
+    // 内圆：使用调整后的间隙角度，使弧长间隙与外圆相等
+    const innerStartAngleRad =
+      ((currentStartAngle + innerGapAngle / 2) * Math.PI) / 180;
+    const innerEndAngleRad =
+      ((currentEndAngle - innerGapAngle / 2) * Math.PI) / 180;
+
+    const outerStartX = centerX + outerRadius * Math.cos(outerStartAngleRad);
+    const outerStartY = centerY + outerRadius * Math.sin(outerStartAngleRad);
+    const outerEndX = centerX + outerRadius * Math.cos(outerEndAngleRad);
+    const outerEndY = centerY + outerRadius * Math.sin(outerEndAngleRad);
+
+    const innerStartX = centerX + innerRadius * Math.cos(innerStartAngleRad);
+    const innerStartY = centerY + innerRadius * Math.sin(innerStartAngleRad);
+    const innerEndX = centerX + innerRadius * Math.cos(innerEndAngleRad);
+    const innerEndY = centerY + innerRadius * Math.sin(innerEndAngleRad);
+
+    const largeArcFlag = anglePerSector > 180 ? 1 : 0;
+
+    const arcPath = `
+      M ${outerStartX} ${outerStartY}
+      A ${outerRadius} ${outerRadius} 0 ${largeArcFlag} 1 ${outerEndX} ${outerEndY}
+      L ${innerEndX} ${innerEndY}
+      A ${innerRadius} ${innerRadius} 0 ${largeArcFlag} 0 ${innerStartX} ${innerStartY}
+      Z
+    `.trim();
+
+    const color = getPaletteColor(options, indexes);
+
+    sectorElements.push(
+      <Path
+        id="shape-sector"
+        d={arcPath}
+        fill={color}
+        width={outerRadius * 2 + 200}
+        height={outerRadius * 2 + 200}
+      />,
+    );
+
+    const midAngle = currentStartAngle + anglePerSector / 2;
+    const midAngleRad = (midAngle * Math.PI) / 180;
+
+    const midRadius = (outerRadius + innerRadius) / 2;
+
+    const arcThickness = outerRadius - innerRadius;
+    const midAngleRadian = (anglePerSector * Math.PI) / 180;
+    const arcLength = midRadius * midAngleRadian;
+
+    const maxWidth = Math.min(arcLength * 0.8, arcThickness * 0.9);
+    const maxHeight = Math.min(arcThickness * 0.9, arcLength * 0.8);
+
+    const itemBounds = getElementBounds(
+      <Item
+        indexes={[0]}
+        data={data}
+        datum={items[0]}
+        positionH="center"
+        width={maxWidth}
+        height={maxHeight}
+      />,
+    );
+
+    const itemX =
+      centerX + midRadius * Math.cos(midAngleRad) - itemBounds.width / 2;
+    const itemY =
+      centerY + midRadius * Math.sin(midAngleRad) - itemBounds.height / 2;
+
+    itemElements.push(
+      <Item
+        indexes={indexes}
+        datum={item}
+        data={data}
+        x={itemX}
+        y={itemY}
+        positionH="center"
+        width={maxWidth}
+        height={maxHeight}
+        themeColors={{
+          ...getThemeColors({
+            colorBg: getPaletteColor(options, indexes),
+            colorPrimary: options.themeConfig?.colorBg || 'white',
+          }),
+        }}
+      />,
+    );
+
+    const btnRemoveRadius = outerRadius + 10;
+    const btnRemoveX =
+      centerX + btnRemoveRadius * Math.cos(midAngleRad) - btnBounds.width / 2;
+    const btnRemoveY =
+      centerY + btnRemoveRadius * Math.sin(midAngleRad) - btnBounds.height / 2;
+
+    btnElements.push(
+      <BtnRemove indexes={indexes} x={btnRemoveX} y={btnRemoveY} />,
+    );
+
+    // 非圆形时，最后一个扇形后面不添加按钮
+    if (isFullCircle || index < items.length - 1) {
+      const gapMidAngle = currentEndAngle + gapAngle / 2;
+      const gapMidAngleRad = (gapMidAngle * Math.PI) / 180;
+      const btnAddRadius = midRadius;
+      const btnAddX =
+        centerX + btnAddRadius * Math.cos(gapMidAngleRad) - btnBounds.width / 2;
+      const btnAddY =
+        centerY +
+        btnAddRadius * Math.sin(gapMidAngleRad) -
+        btnBounds.height / 2;
+
+      btnElements.push(
+        <BtnAdd indexes={[index + 1]} x={btnAddX} y={btnAddY} />,
+      );
+    }
+  });
+
+  if (items.length > 0) {
+    const firstGapMidAngle = startAngle - gapAngle / 2;
+    const firstGapMidAngleRad = (firstGapMidAngle * Math.PI) / 180;
+    const midRadius = (outerRadius + innerRadius) / 2;
+    const btnAddX =
+      centerX + midRadius * Math.cos(firstGapMidAngleRad) - btnBounds.width / 2;
+    const btnAddY =
+      centerY +
+      midRadius * Math.sin(firstGapMidAngleRad) -
+      btnBounds.height / 2;
+
+    btnElements.push(<BtnAdd indexes={[0]} x={btnAddX} y={btnAddY} />);
+  }
+
+  const centerRadius = innerRadius * 0.9;
+
+  // 计算 title 的位置和尺寸：对于非完整圆形，title 应该位于扇形区域的中心
+  let titleCenterX = centerX;
+  let titleCenterY = centerY;
+  let titleWidth = centerRadius * 1.4;
+  let titleHeight = centerRadius * 1.4;
+
+  if (!isFullCircle) {
+    // 扇形区域的中心位于圆心和扇形中点之间
+    const midAngle = (startAngle + endAngle) / 2;
+    const midAngleRad = (midAngle * Math.PI) / 180;
+    // title 位于扇形半径的一半处
+    const titleRadius = centerRadius * 0.5;
+    titleCenterX = centerX + titleRadius * Math.cos(midAngleRad);
+    titleCenterY = centerY + titleRadius * Math.sin(midAngleRad);
+
+    // 根据扇形角度计算合适的宽高
+    // 扇形弧长决定宽度，径向距离决定高度
+    const arcLength = (totalAngle * Math.PI * titleRadius) / 180;
+    titleWidth = Math.min(arcLength * 0.8, centerRadius * 1.4);
+    titleHeight = Math.min(titleRadius * 1.5, centerRadius * 1.4);
+  }
+
+  // 绘制中间的扇形区域
+  let centerSectorPath = '';
+  if (isFullCircle) {
+    // 完整圆形时使用 Ellipse
+    centerSectorPath = '';
+  } else {
+    // 非完整圆形时绘制扇形
+    const centerStartAngleRad = (startAngle * Math.PI) / 180;
+    const centerEndAngleRad = (endAngle * Math.PI) / 180;
+
+    const centerStartX = centerX + centerRadius * Math.cos(centerStartAngleRad);
+    const centerStartY = centerY + centerRadius * Math.sin(centerStartAngleRad);
+    const centerEndX = centerX + centerRadius * Math.cos(centerEndAngleRad);
+    const centerEndY = centerY + centerRadius * Math.sin(centerEndAngleRad);
+
+    const centerLargeArcFlag = totalAngle > 180 ? 1 : 0;
+
+    centerSectorPath = `
+      M ${centerX} ${centerY}
+      L ${centerStartX} ${centerStartY}
+      A ${centerRadius} ${centerRadius} 0 ${centerLargeArcFlag} 1 ${centerEndX} ${centerEndY}
+      Z
+    `.trim();
+  }
+
+  return (
+    <Group id="infographic-container">
+      <Group>{sectorElements}</Group>
+      {isFullCircle ? (
+        <Ellipse
+          id="shape-center-circle"
+          x={centerX - centerRadius}
+          y={centerY - centerRadius}
+          width={centerRadius * 2}
+          height={centerRadius * 2}
+          fill={themeColors.colorPrimaryBg}
+          fillOpacity={0.5}
+        />
+      ) : (
+        <Path
+          id="shape-center-sector"
+          d={centerSectorPath}
+          fill={themeColors.colorPrimaryBg}
+          fillOpacity={0.5}
+          width={outerRadius * 2 + 200}
+          height={outerRadius * 2 + 200}
+        />
+      )}
+      <Text
+        id="title"
+        x={titleCenterX - titleWidth / 2}
+        y={titleCenterY - titleHeight / 2}
+        width={titleWidth}
+        height={titleHeight}
+        alignHorizontal="center"
+        alignVertical="center"
+        fontSize={24}
+        fontWeight="bold"
+        fill={themeColors.colorText}
+      >
+        {title}
+      </Text>
+      <ItemsGroup>{itemElements}</ItemsGroup>
+      <BtnsGroup>{btnElements}</BtnsGroup>
+    </Group>
+  );
+};
+
+registerStructure('list-sector', {
+  component: ListSector,
+  composites: ['title', 'item'],
+});