@antv/infographic 0.1.1 → 0.1.3

package/lib/utils/text.js

@@ -3,37 +3,64 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTextEntity = getTextEntity;
 exports.createTextElement = createTextElement;
+exports.updateTextElement = updateTextElement;
+exports.getTextStyle = getTextStyle;
+exports.getTextContent = getTextContent;
+exports.setTextContent = setTextContent;
+exports.getTextElementProps = getTextElementProps;
 const camelCase_1 = __importDefault(require("lodash-es/camelCase"));
 const font_1 = require("./font");
+const recognizer_1 = require("./recognizer");
 const svg_1 = require("./svg");
+function getTextEntity(text) {
+    if (!(0, recognizer_1.isForeignObjectElement)(text))
+        return null;
+    return text.querySelector('span');
+}
 function createTextElement(textContent, attributes) {
-    const span = document.createElement('span');
-    span.textContent = textContent;
-    Object.assign(span.style, getTextStyle(attributes));
+    const entity = document.createElement('span');
+    const foreignObject = (0, svg_1.createElement)('foreignObject', { overflow: 'visible' });
+    foreignObject.appendChild(entity);
+    updateTextElement(foreignObject, { textContent, attributes });
+    return foreignObject;
+}
+function updateTextElement(text, props) {
+    const { textContent, attributes } = props;
+    if (textContent !== undefined) {
+        setTextContent(text, textContent);
+    }
+    if (!attributes)
+        return;
+    const entity = getTextEntity(text);
     let { width, height } = attributes;
-    if (!width || !height) {
-        const rect = measureTextSpan(span);
-        if (!width)
-            width = String(rect.width);
-        if (!height)
-            height = String(rect.height);
+    const textAttrs = {};
+    if (entity) {
+        Object.assign(entity.style, getTextStyle(attributes));
+        if (!width || !height) {
+            const rect = measureTextSpan(entity);
+            if (!width && !text.hasAttribute('width'))
+                width = String(rect.width);
+            if (!height && !text.hasAttribute('height'))
+                height = String(rect.height);
+        }
+        // 以下属性需要完成包围盒测量后再设置
+        const { 'data-horizontal-align': horizontal, 'data-vertical-align': vertical, } = attributes;
+        Object.assign(entity.style, alignToFlex(horizontal, vertical));
     }
-    // 以下属性需要完成包围盒测量后再设置
-    const { id, x, y, 'text-alignment': textAlignment = 'LEFT TOP' } = attributes;
-    const [horizontal, vertical] = getTextAlignment(textAlignment);
-    Object.assign(span.style, alignToFlex(horizontal, vertical));
-    const foreignObject = (0, svg_1.createElement)('foreignObject', {
-        id,
-        x,
-        y,
-        width,
-        height,
-        overflow: 'visible',
-        'data-element-type': "text" /* ElementTypeEnum.Text */,
-    });
-    foreignObject.appendChild(span);
-    return foreignObject;
+    const { id, x, y } = attributes;
+    if (id)
+        textAttrs.id = id;
+    if (x !== undefined)
+        textAttrs.x = String(x);
+    if (y !== undefined)
+        textAttrs.y = String(y);
+    if (width !== undefined)
+        textAttrs.width = String(width);
+    if (height !== undefined)
+        textAttrs.height = String(height);
+    (0, svg_1.setAttributes)(text, textAttrs);
 }
 function alignToFlex(horizontal, vertical) {
     const style = {
@@ -42,6 +69,7 @@ function alignToFlex(horizontal, vertical) {
         display: 'flex',
         flexWrap: 'wrap',
         wordBreak: 'break-word',
+        whiteSpace: 'pre-wrap',
     };
     switch (horizontal) {
         case 'LEFT':
@@ -74,14 +102,17 @@ function alignToFlex(horizontal, vertical) {
     return style;
 }
 function getTextStyle(attributes) {
-    const { x, y, width, height, ['text-alignment']: textAlignment, ['font-size']: fontSize, ['letter-spacing']: letterSpacing, ['line-height']: lineHeight, fill, ['stroke-width']: strokeWidth, ['text-anchor']: textAnchor, // omit
+    const { x, y, width, height, ['data-horizontal-align']: horizontalAlign, // omit
+    ['data-vertical-align']: verticalAlign, // omit
+    ['font-size']: fontSize, ['letter-spacing']: letterSpacing, ['line-height']: lineHeight, fill, ['stroke-width']: strokeWidth, ['text-anchor']: textAnchor, // omit
     ['dominant-baseline']: dominantBaseline, // omit
     ['font-family']: fontFamily, ...restAttrs } = attributes;
     const style = {
-        color: fill,
         overflow: 'visible',
         // userSelect: 'none',
     };
+    if (fill)
+        style.color = fill;
     Object.entries(restAttrs).forEach(([key, value]) => {
         style[(0, camelCase_1.default)(key)] = value;
     });
@@ -96,8 +127,9 @@ function getTextStyle(attributes) {
         style.letterSpacing = `${letterSpacing}px`;
     if (strokeWidth)
         style.strokeWidth = `${strokeWidth}px`;
-    if (fontFamily)
-        style.fontFamily = (0, font_1.encodeFontFamily)(fontFamily);
+    style.fontFamily = fontFamily
+        ? (0, font_1.encodeFontFamily)(fontFamily)
+        : fontFamily || '';
     return style;
 }
 function measureTextSpan(span) {
@@ -112,10 +144,59 @@ function measureTextSpan(span) {
     span.style.visibility = 'visible';
     return rect;
 }
-function getTextAlignment(alignment) {
-    if (!alignment) {
-        return ['LEFT', 'TOP'];
+function getTextContent(text) {
+    return getTextEntity(text)?.innerText || '';
+}
+function setTextContent(text, content) {
+    const entity = getTextEntity(text);
+    if (entity) {
+        entity.innerText = content;
+    }
+}
+function getTextElementProps(text) {
+    const entity = getTextEntity(text);
+    if (!entity)
+        return {};
+    const { color, fontSize, fontFamily, justifyContent, alignContent, fontWeight, } = entity.style;
+    const [horizontal, vertical] = flexToAlign(justifyContent, alignContent);
+    const attrs = {
+        'data-horizontal-align': horizontal,
+        'data-vertical-align': vertical,
+    };
+    if (fontFamily)
+        attrs['font-family'] = (0, font_1.decodeFontFamily)(fontFamily);
+    if (fontWeight)
+        attrs['font-weight'] = fontWeight;
+    if (fontSize)
+        attrs['font-size'] = String(parseInt(fontSize));
+    if (color)
+        attrs['fill'] = color;
+    return { attributes: attrs, textContent: getTextContent(text) };
+}
+function flexToAlign(justifyContent, alignContent) {
+    let horizontal = 'LEFT';
+    let vertical = 'TOP';
+    switch (justifyContent) {
+        case 'flex-start':
+            horizontal = 'LEFT';
+            break;
+        case 'center':
+            horizontal = 'CENTER';
+            break;
+        case 'flex-end':
+            horizontal = 'RIGHT';
+            break;
+    }
+    switch (alignContent) {
+        case 'flex-start':
+            vertical = 'TOP';
+            break;
+        case 'center':
+            vertical = 'MIDDLE';
+            break;
+        case 'flex-end':
+            vertical = 'BOTTOM';
+            break;
     }
-    const [horizontal = 'CENTER', vertical = 'MIDDLE'] = alignment.split(' ');
     return [horizontal, vertical];
 }

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@antv/infographic",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "An Infographic Generation and Rendering Framework, bring words to life!",
   "keywords": [
     "antv",
     "infographic",
     "visualization"
   ],
+  "repository": "git@github.com:antvis/Infographic.git",
   "license": "MIT",
   "author": "Aarebecca",
   "exports": {
@@ -52,6 +53,7 @@
     "lint": "run-s lint:root lint:site",
     "lint:root": "eslint . --ext .ts,.tsx --ignore-pattern 'site/**' && npm run check:test",
     "lint:site": "npm --prefix site run lint",
+    "prepublishOnly": "npm run ci",
     "size": "size-limit",
     "test": "vitest --run --coverage"
   },
@@ -74,10 +76,12 @@
     "singleQuote": true
   },
   "dependencies": {
+    "@antv/hierarchy": "^0.7.0",
     "css": "^3.0.0",
     "culori": "^4.0.2",
     "d3": "^7.9.0",
     "lodash-es": "^4.17.21",
+    "measury": "^0.1.3",
     "roughjs": "^4.6.6",
     "round-polygon": "^0.6.7",
     "tinycolor2": "^1.6.0"
@@ -99,6 +103,7 @@
     "@vitest/coverage-v8": "^3.2.4",
     "csstype": "^3.2.2",
     "eslint": "^9.35.0",
+    "eventemitter3": "^5.0.1",
     "globals": "^16.4.0",
     "gzip-size": "^7.0.0",
     "husky": "^9.1.7",
@@ -135,6 +140,5 @@
       "limit": "500 Kb",
       "path": "dist/infographic.min.js"
     }
-  ],
-  "repository": "git@github.com:antvis/Infographic.git"
+  ]
 }

package/src/constants/components.ts

@@ -0,0 +1 @@
+export const COMPONENT_ROLE = 'infographic-component';

package/src/constants/element.ts

@@ -1,11 +1,23 @@
+/**
+ * Infographic 抽象元素类型枚举
+ */
 export const enum ElementTypeEnum {
   Background = 'background',
-  Text = 'text',
-  IconGroup = 'icon-group',
-  Icon = 'icon',
-  Geometry = 'geometry',
-  Button = 'button',
+  Title = 'title',
+  Desc = 'desc',
+  ItemsGroup = 'items-group',
+  ItemIconGroup = 'item-icon-group',
+  ItemIcon = 'item-icon',
+  ItemLabel = 'item-label',
+  ItemDesc = 'item-desc',
+  ItemValue = 'item-value',
+  ItemsIllus = 'items-illus',
+  BtnAdd = 'btn-add',
+  BtnRemove = 'btn-remove',
   IllusGroup = 'illus-group',
   IllusVolume = 'illus-volume',
   Illus = 'illus',
+  BtnsGroup = 'btns-group',
+
+  Unknown = 'unknown',
 }

package/src/constants/index.ts

@@ -1 +1,3 @@
+export * from './components';
 export * from './element';
+export * from './shape';

package/src/constants/shape.ts

@@ -0,0 +1,16 @@
+/**
+ * 基本图形类型枚举
+ */
+export const enum ShapeTypeEnum {
+  Group = 'group',
+  Text = 'text',
+  Rectangle = 'rectangle',
+  Circle = 'circle',
+  Ellipse = 'ellipse',
+  Line = 'line',
+  Polyline = 'polyline',
+  Polygon = 'polygon',
+  Path = 'path',
+  Image = 'image',
+  Icon = 'icon',
+}

package/src/designs/components/Btn.tsx

@@ -1,3 +1,4 @@
+import { ElementTypeEnum } from '../../constants';
 import type { RectProps } from '../../jsx';
 import { Rect } from '../../jsx';
 
@@ -13,7 +14,7 @@ export const BtnAdd = (props: BtnProps) => {
     width: 20,
     height: 20,
     'data-indexes': indexes,
-    'data-element-type': 'btn-add',
+    'data-element-type': ElementTypeEnum.BtnAdd,
   };
   return <Rect {...defaultProps} {...restProps} />;
 };
@@ -26,7 +27,7 @@ export const BtnRemove = (props: BtnProps) => {
     width: 20,
     height: 20,
     'data-indexes': indexes,
-    'data-element-type': 'btn-remove',
+    'data-element-type': ElementTypeEnum.BtnRemove,
   };
   return <Rect {...defaultProps} {...restProps} />;
 };

package/src/designs/components/BtnsGroup.tsx

@@ -1,3 +1,4 @@
+import { ElementTypeEnum } from '../../constants';
 import type { GroupProps } from '../../jsx';
 import { Group } from '../../jsx';
 
@@ -5,6 +6,12 @@ export interface BtnsGroupProps extends GroupProps {}
 
 export const BtnsGroup = (props: BtnsGroupProps) => {
   return (
-    <Group data-element-type="btns-group" width={0} height={0} {...props} />
+    <Group
+      data-element-type={ElementTypeEnum.BtnsGroup}
+      width={0}
+      height={0}
+      {...props}
+      display="none"
+    />
   );
 };

package/src/designs/components/Illus.tsx

@@ -1,3 +1,4 @@
+import { ElementTypeEnum } from '../../constants';
 import type { RectProps } from '../../jsx';
 import { Rect } from '../../jsx';
 
@@ -13,9 +14,9 @@ export const Illus = ({ indexes, ...props }: IllusProps) => {
 
   if (indexes) {
     finalProps['data-indexes'] = indexes;
-    finalProps['data-element-type'] = 'item-illus';
+    finalProps['data-element-type'] = ElementTypeEnum.ItemsIllus;
   } else {
-    finalProps['data-element-type'] = 'illus';
+    finalProps['data-element-type'] = ElementTypeEnum.Illus;
   }
 
   return <Rect {...finalProps} />;

package/src/designs/components/ItemDesc.tsx

@@ -1,3 +1,4 @@
+import { ElementTypeEnum } from '../../constants';
 import type { TextProps } from '../../jsx';
 import { Text } from '../../jsx';
 
@@ -15,7 +16,6 @@ export const ItemDesc = ({
   if (!children) return null;
 
   const finalProps: TextProps = {
-    width: 100,
     fontSize: 14,
     fill: '#666',
     wordWrap: true,
@@ -32,7 +32,7 @@ export const ItemDesc = ({
     <Text
       {...finalProps}
       data-indexes={indexes}
-      data-element-type="item-desc"
+      data-element-type={ElementTypeEnum.ItemDesc}
     />
   );
 };

package/src/designs/components/ItemIcon.tsx

@@ -1,3 +1,4 @@
+import { ElementTypeEnum } from '../../constants';
 import type { RectProps } from '../../jsx';
 import { Ellipse, Group, Rect } from '../../jsx';
 
@@ -44,7 +45,7 @@ export const ItemIconCircle = (props: ItemIconProps & { colorBg?: string }) => {
       {...restProps}
       width={size}
       height={size}
-      data-element-type="item-icon-group"
+      data-element-type={ElementTypeEnum.ItemIconGroup}
     >
       <Ellipse
         width={size}
@@ -55,7 +56,7 @@ export const ItemIconCircle = (props: ItemIconProps & { colorBg?: string }) => {
       <Rect
         {...iconProps}
         data-indexes={indexes}
-        data-element-type="item-icon"
+        data-element-type={ElementTypeEnum.ItemIcon}
       />
     </Group>
   );

package/src/designs/components/ItemLabel.tsx

@@ -1,3 +1,4 @@
+import { ElementTypeEnum } from '../../constants';
 import type { TextProps } from '../../jsx';
 import { Text } from '../../jsx';
 
@@ -10,7 +11,6 @@ export const ItemLabel = ({ indexes, children, ...props }: ItemLabelProps) => {
     fontSize: 18,
     fontWeight: 'bold',
     fill: '#252525',
-    width: 100,
     lineHeight: 1.4,
     children,
     ...props,
@@ -24,7 +24,7 @@ export const ItemLabel = ({ indexes, children, ...props }: ItemLabelProps) => {
     <Text
       {...finalProps}
       data-indexes={indexes}
-      data-element-type="item-label"
+      data-element-type={ElementTypeEnum.ItemLabel}
     />
   );
 };

package/src/designs/components/ItemValue.tsx

@@ -1,3 +1,4 @@
+import { ElementTypeEnum } from '../../constants';
 import type { TextProps } from '../../jsx';
 import { Text } from '../../jsx';
 
@@ -14,7 +15,6 @@ export const ItemValue = ({
   ...props
 }: ItemValueProps) => {
   const finalProps: TextProps = {
-    width: 100,
     fontSize: 14,
     fill: '#666',
     wordWrap: true,
@@ -32,7 +32,7 @@ export const ItemValue = ({
     <Text
       {...finalProps}
       data-indexes={indexes}
-      data-element-type="item-value"
+      data-element-type={ElementTypeEnum.ItemValue}
     />
   );
 };

package/src/designs/components/ItemsGroup.tsx

@@ -1,8 +1,9 @@
+import { ElementTypeEnum } from '../../constants';
 import type { GroupProps } from '../../jsx';
 import { Group } from '../../jsx';
 
 export interface ItemsGroupProps extends GroupProps {}
 
 export const ItemsGroup = (props: ItemsGroupProps) => {
-  return <Group data-element-type="items-group" {...props} />;
+  return <Group data-element-type={ElementTypeEnum.ItemsGroup} {...props} />;
 };

package/src/designs/components/Title.tsx

@@ -15,7 +15,6 @@ export const Title = (props: TitleProps) => {
   const {
     x = 0,
     y = 0,
-    width = 720,
     alignHorizontal = 'center',
     title,
     desc,
@@ -26,8 +25,6 @@ export const Title = (props: TitleProps) => {
     const defaultProps: TextProps = {
       fontSize: 24,
       fill: themeColors.colorPrimaryText,
-      width,
-      height: 32,
       lineHeight: 1.4,
       alignHorizontal,
     };
@@ -42,7 +39,6 @@ export const Title = (props: TitleProps) => {
     const defaultProps: TextProps = {
       fontSize: 16,
       fill: themeColors.colorTextSecondary,
-      width,
       alignHorizontal,
       lineHeight: 1.4,
       height: subTitleLineNumber * 24,
@@ -57,7 +53,14 @@ export const Title = (props: TitleProps) => {
   if (!title && !desc) return null;
 
   return (
-    <FlexLayout flexDirection="column" x={x} y={y} width={width} gap={8}>
+    <FlexLayout
+      flexDirection="column"
+      justifyContent="center"
+      alignItems="center"
+      x={x}
+      y={y}
+      gap={8}
+    >
       {title && <MainTitle />}
       {desc && <Desc />}
     </FlexLayout>

package/src/designs/items/CandyCardLite.tsx

@@ -24,8 +24,8 @@ export const CandyCardLite: ComponentType<CandyCardLiteProps> = (props) => {
         y={0}
         width={width}
         height={height}
-        rx={18}
-        ry={18}
+        rx={22}
+        ry={22}
         fill={themeColors.colorPrimaryBg}
         stroke={themeColors.colorPrimary}
         data-element-type="shape"
@@ -37,7 +37,7 @@ export const CandyCardLite: ComponentType<CandyCardLiteProps> = (props) => {
         y={0.5}
         width={85}
         height={65}
-        d="M0.496704 0H61.7558C74.0725 0 84.0571 9.99394 84.0571 22.3221V60.1302L78.4401 62.9458C64.9296 68.1198 49.0492 65.0802 38.3968 53.9843L10.7444 25.1801C5.41799 19.6306 2.15489 12.855 0.935998 5.80383L0.496704 0Z"
+        d="M0 0H62.4495C74.9557 0 85.4549 10.8574 84.4557 23.1875V60.1875L77.8772 62.5839C64.3776 67.6876 48.51 64.6893 37.8662 53.7441L10.2361 25.3312C4.91402 19.8571 1.65356 13.1736 0.435652 6.21819L0 0Z"
         fill={themeColors.colorBg}
         data-element-type="shape"
       />

package/src/designs/items/CircularProgress.tsx

@@ -36,6 +36,7 @@ export const CircularProgress: ComponentType<CircularProgressProps> = (
   const start = strokeWidth / 2;
   const d = size - strokeWidth;
 
+  const isFullCircle = percentage >= 1;
   const angle = percentage * 360;
   const pathData = describeArc(center, center, radius, 0, angle);
 
@@ -54,14 +55,24 @@ export const CircularProgress: ComponentType<CircularProgressProps> = (
       />
 
       {/* 进度圆环 */}
-      <Path
-        d={pathData}
-        fill="none"
-        stroke={themeColors.colorPrimary}
-        strokeWidth={strokeWidth}
-        strokeLinecap="round"
-        data-element-type="shape"
-      />
+      {isFullCircle ? (
+        <Ellipse
+          {...bounds}
+          fill="none"
+          stroke={themeColors.colorPrimary}
+          strokeWidth={strokeWidth}
+          data-element-type="shape"
+        />
+      ) : (
+        <Path
+          d={pathData}
+          fill="none"
+          stroke={themeColors.colorPrimary}
+          strokeWidth={strokeWidth}
+          strokeLinecap="round"
+          data-element-type="shape"
+        />
+      )}
 
       {/* 中心数值 */}
       <ItemValue

package/src/designs/items/HorizontalIconArrow.tsx

@@ -16,7 +16,6 @@ import {
   ShapesGroup,
 } from '../components';
 import { FlexLayout } from '../layouts';
-import { AlignLayout } from '../layouts/Align';
 import { getItemProps } from '../utils';
 import { registerItem } from './registry';
 import type { BaseItemProps } from './types';
@@ -115,15 +114,15 @@ export const HorizontalIconArrow: ComponentType<HorizontalIconArrowProps> = (
             <Gap height={iconGap} />
           </>
         )}
-        <AlignLayout horizontal="center" vertical="middle">
+        <Group>
           <HorizontalArrow
             width={width}
             height={arrowHeight}
             fill={themeColors.colorPrimary}
           />
           <Text
-            width={width}
-            height={arrowHeight}
+            x={width / 2}
+            y={arrowHeight / 2}
             alignHorizontal="center"
             alignVertical="middle"
             fill={themeColors.colorWhite}
@@ -136,7 +135,7 @@ export const HorizontalIconArrow: ComponentType<HorizontalIconArrowProps> = (
                   .padStart(2, '0')
                   .slice(-2)}
           </Text>
-        </AlignLayout>
+        </Group>
         {!isVNormal ? (
           <>
             {dotLine}

package/src/designs/items/HorizontalIconLine.tsx

@@ -87,10 +87,14 @@ export const HorizontalIconLine: ComponentType<HorizontalIconLineProps> = (
     </Text>
   ) : null;
   const timeBounds = getElementBounds(time);
-
   const lineHeight = 18;
   const line = (
-    <AlignLayout horizontal="center" width={width} height={lineHeight}>
+    <AlignLayout
+      horizontal="center"
+      vertical="middle"
+      width={width}
+      height={lineHeight}
+    >
       <Rect
         width={width}
         height={lineHeight}
@@ -98,20 +102,13 @@ export const HorizontalIconLine: ComponentType<HorizontalIconLineProps> = (
         data-element-type="shape"
       />
       <Ellipse
-        y={-3}
         width={lineHeight + 6}
         height={lineHeight + 6}
         fill={themeColors.colorBg}
         fillOpacity={0.5}
         data-element-type="shape"
       />
-      <Ellipse
-        y={(lineHeight - 12) / 2}
-        width={12}
-        height={12}
-        fill="white"
-        data-element-type="shape"
-      />
+      <Ellipse width={12} height={12} fill="white" data-element-type="shape" />
     </AlignLayout>
   );
 

package/src/designs/items/IconBadge.tsx

@@ -78,7 +78,6 @@ export const IconBadge: ComponentType<IconBadgeProps> = (props) => {
       {/* 数值徽章 */}
       <Ellipse
         x={size - badgeSize + 4}
-        y={0}
         width={badgeSize}
         height={badgeSize}
         fill={`url(#${badgeGradientId})`}
@@ -86,8 +85,9 @@ export const IconBadge: ComponentType<IconBadgeProps> = (props) => {
 
       {/* 徽章数值 */}
       <Text
-        x={size - badgeSize / 2 + 4}
-        y={badgeSize / 2}
+        x={size - badgeSize + 4}
+        width={badgeSize}
+        height={badgeSize}
         fontSize={10}
         fontWeight="bold"
         fill={themeColors.colorWhite}