@antv/infographic 0.1.2 → 0.1.3

package/src/templates/hierarchy-mindmap.ts

@@ -0,0 +1,129 @@
+import type {
+  DesignOptions,
+  HierarchyMindmapProps,
+  TemplateOptions,
+} from '../designs';
+
+const BRANCH_GRADIENT: Partial<HierarchyMindmapProps> = {
+  edgeType: 'curved',
+  edgeColorMode: 'gradient',
+  edgeWidth: 2,
+  colorMode: 'branch',
+  levelGap: 80,
+  nodeGap: 18,
+};
+
+const LEVEL_GRADIENT: Partial<HierarchyMindmapProps> = {
+  edgeType: 'curved',
+  edgeWidth: 2,
+  edgeColorMode: 'gradient',
+  colorMode: 'level',
+  levelGap: 80,
+  nodeGap: 18,
+};
+
+const LINED_PALETTE = {
+  type: 'lined-text',
+  usePaletteColor: true,
+  showUnderline: true,
+  underlineThickness: 2,
+};
+
+const CAPSULE = {
+  type: 'capsule-item',
+};
+
+const CIRCULAR_PROGRESS = {
+  type: 'circular-progress',
+};
+
+const ROUNDED_RECT_NODE = {
+  type: 'rounded-rect-node',
+  positionH: 'center',
+} as const;
+
+const COMPACT_CARD = {
+  type: 'compact-card',
+};
+
+const createStructure = (
+  gradient: Partial<HierarchyMindmapProps>,
+  edgeAlign?: HierarchyMindmapProps['edgeAlign'],
+): Partial<HierarchyMindmapProps> & { type: string } => ({
+  type: 'hierarchy-mindmap',
+  ...(edgeAlign !== undefined ? { edgeAlign } : {}),
+  ...gradient,
+});
+
+const createTemplate = (
+  key: string,
+  gradient: Partial<HierarchyMindmapProps>,
+  item: DesignOptions['item'],
+  edgeAlign?: HierarchyMindmapProps['edgeAlign'],
+): [string, TemplateOptions] => [
+  key,
+  {
+    design: {
+      structure: createStructure(gradient, edgeAlign),
+      item,
+    },
+  },
+];
+
+export const hierarchyMindmapTemplates: Record<string, TemplateOptions> =
+  Object.fromEntries([
+    createTemplate(
+      'hierarchy-mindmap-branch-gradient-lined-palette',
+      BRANCH_GRADIENT,
+      LINED_PALETTE,
+      'bottom',
+    ),
+    createTemplate(
+      'hierarchy-mindmap-level-gradient-lined-palette',
+      LEVEL_GRADIENT,
+      LINED_PALETTE,
+      'bottom',
+    ),
+    createTemplate(
+      'hierarchy-mindmap-branch-gradient-capsule-item',
+      BRANCH_GRADIENT,
+      CAPSULE,
+    ),
+    createTemplate(
+      'hierarchy-mindmap-level-gradient-capsule-item',
+      LEVEL_GRADIENT,
+      CAPSULE,
+    ),
+    createTemplate(
+      'hierarchy-mindmap-branch-gradient-circle-progress',
+      BRANCH_GRADIENT,
+      CIRCULAR_PROGRESS,
+      0.4,
+    ),
+    createTemplate(
+      'hierarchy-mindmap-level-gradient-circle-progress',
+      LEVEL_GRADIENT,
+      CIRCULAR_PROGRESS,
+      0.4,
+    ),
+    createTemplate(
+      'hierarchy-mindmap-branch-gradient-rounded-rect',
+      BRANCH_GRADIENT,
+      ROUNDED_RECT_NODE,
+    ),
+    createTemplate(
+      'hierarchy-mindmap-level-gradient-rounded-rect',
+      LEVEL_GRADIENT,
+      ROUNDED_RECT_NODE,
+    ),
+    createTemplate(
+      'hierarchy-mindmap-branch-gradient-compact-card',
+      BRANCH_GRADIENT,
+      COMPACT_CARD,
+    ),
+    createTemplate(
+      'hierarchy-mindmap-level-gradient-compact-card',
+      LEVEL_GRADIENT,
+      COMPACT_CARD,
+    ),
+  ]);

package/src/types/attrs.ts

@@ -1,3 +1,5 @@
+import { TextHorizontalAlign, TextVerticalAlign } from './text';
+
 export type NumericalValue = number | string | undefined;
 export type TextualValue = string | undefined;
 
@@ -10,26 +12,25 @@ export type BaseAttributes = {
 };
 
 export type IconAttributes = {
-  id?: NumericalValue;
-  class?: NumericalValue;
+  id?: TextualValue;
+  class?: TextualValue;
   x?: NumericalValue;
   y?: NumericalValue;
   width?: NumericalValue;
   height?: NumericalValue;
-  href?: NumericalValue;
-  fill?: NumericalValue;
+  href?: TextualValue;
+  fill?: TextualValue;
   'fill-opacity'?: NumericalValue;
   opacity?: NumericalValue;
 };
 
 export type TextAttributes = {
-  id?: NumericalValue;
-  class?: NumericalValue;
+  id?: TextualValue;
+  class?: TextualValue;
   x?: NumericalValue;
   y?: NumericalValue;
   width?: NumericalValue;
   height?: NumericalValue;
-  'text-alignment'?: TextualValue;
   'font-family'?: TextualValue;
   'font-size'?: NumericalValue;
   'font-weight'?: NumericalValue;
@@ -37,11 +38,14 @@ export type TextAttributes = {
   'font-variant'?: NumericalValue;
   'letter-spacing'?: NumericalValue;
   'line-height'?: NumericalValue;
-  fill?: NumericalValue;
-  stroke?: NumericalValue;
+  fill?: TextualValue;
+  stroke?: TextualValue;
   'stroke-width'?: NumericalValue;
-  'text-anchor'?: NumericalValue;
-  'dominant-baseline'?: NumericalValue;
+  'text-anchor'?: TextualValue;
+  'dominant-baseline'?: TextualValue;
+  // extend for alignment
+  'data-horizontal-align'?: TextHorizontalAlign;
+  'data-vertical-align'?: TextVerticalAlign;
 };
 
 export type ShapeAttributes = {
@@ -51,8 +55,8 @@ export type ShapeAttributes = {
   'fill-rule'?: 'nonzero' | 'evenodd' | 'inherit' | undefined;
   stroke?: TextualValue;
   'stroke-width'?: NumericalValue;
-  'stroke-linecap'?: NumericalValue;
-  'stroke-linejoin'?: NumericalValue;
+  'stroke-linecap'?: TextualValue;
+  'stroke-linejoin'?: TextualValue;
   'stroke-dasharray'?: NumericalValue;
   'stroke-dashoffset'?: NumericalValue;
   'stroke-opacity'?: NumericalValue;

package/src/types/data.ts

@@ -7,6 +7,7 @@ export interface ItemDatum {
   value?: number;
   illus?: string | ResourceConfig;
   children?: ItemDatum[];
+  attributes?: Record<string, object>;
   [key: string]: any;
 }
 
@@ -15,5 +16,6 @@ export interface Data {
   desc?: string;
   items: ItemDatum[];
   illus?: Record<string, string | ResourceConfig>;
+  attributes?: Record<string, object>;
   [key: string]: any;
 }

package/src/types/element.ts

@@ -1,6 +1,6 @@
 export type GeometryElement = SVGGraphicsElement;
 export type TextElement = SVGForeignObjectElement;
-export type IconElement = SVGUseElement;
+export type IconElement = SVGUseElement | SVGGElement;
 export type ButtonElement = SVGUseElement;
 export type IllusElement = SVGGElement;
 export type IllusEntity = SVGUseElement;

package/src/types/event.ts

@@ -0,0 +1,6 @@
+export interface IEventEmitter {
+  on(event: string | symbol, listener: (...args: any[]) => void): this;
+  emit(event: string | symbol, ...args: any[]): boolean;
+  off(event: string | symbol, listener: (...args: any[]) => void): this;
+  removeAllListeners(event?: string | symbol): this;
+}

package/src/types/index.ts

@@ -1,6 +1,8 @@
 export type * from './attrs';
 export type * from './data';
 export type * from './element';
+export type * from './event';
 export type * from './font';
 export type * from './padding';
 export type * from './resource';
+export type * from './text';

package/src/{renderer/types → types}/text.ts

@@ -1,3 +1,2 @@
 export type TextHorizontalAlign = 'LEFT' | 'CENTER' | 'RIGHT';
 export type TextVerticalAlign = 'TOP' | 'MIDDLE' | 'BOTTOM';
-export type TextAlignment = [TextHorizontalAlign, TextVerticalAlign];

package/src/utils/attrs.ts

@@ -0,0 +1,9 @@
+export function getCommonAttrs<T extends Record<string, any>>(attrs: T[]) {
+  return Object.keys(attrs[0]).reduce((acc, key) => {
+    const k = key as keyof T;
+    if (attrs.every((attr) => attr[k] === attrs[0][k])) {
+      acc[k] = attrs[0][k];
+    }
+    return acc;
+  }, {} as T);
+}

package/src/utils/element.ts

@@ -0,0 +1,26 @@
+import { ElementTypeEnum } from '../constants';
+import { isIconElement } from './recognizer';
+
+export function setElementRole(
+  element: SVGElement | HTMLElement,
+  role: string,
+) {
+  element.setAttribute('data-element-type', role);
+}
+
+export function getElementByRole(
+  element: SVGElement | HTMLElement,
+  role: string,
+) {
+  return element.querySelector(`[data-element-type="${role}"]`);
+}
+
+export function getElementRole(
+  element: SVGElement | HTMLElement,
+): ElementTypeEnum {
+  if (isIconElement(element as any)) return ElementTypeEnum.ItemIcon;
+  return (
+    (element.getAttribute('data-element-type') as ElementTypeEnum) ||
+    ElementTypeEnum.Unknown
+  );
+}

package/src/utils/icon.ts

@@ -1,51 +1,71 @@
-import { ElementTypeEnum } from '../constants';
 import { getResourceHref, ResourceConfig } from '../resource';
 import type { IconAttributes, IconElement } from '../types';
 import { createElement, getAttributes, setAttributes } from './svg';
 
+const ICON_RESOURCE_CACHE = new WeakMap<IconElement, string | ResourceConfig>();
+
+export function getIconResourceConfig(
+  icon: IconElement,
+): string | ResourceConfig | null {
+  return ICON_RESOURCE_CACHE.get(icon) || null;
+}
+
 export function createIconElement(
   value: string | ResourceConfig,
   attrs: IconAttributes = {},
 ): IconElement {
   const icon = createElement<IconElement>('use', {
-    'data-element-type': ElementTypeEnum.Icon,
     ...attrs,
     href: getResourceHref(value),
   });
 
   applyIconColor(icon);
 
+  ICON_RESOURCE_CACHE.set(icon, value);
+
   return icon;
 }
 
-export function updateIconElement(
-  icon: IconElement,
-  name?: string,
-  attrs?: IconAttributes,
-): void {
-  if (name) setAttributes(icon, { href: getResourceHref(name) });
-  if (attrs) setAttributes(icon, attrs);
-  applyIconColor(icon);
+export function applyIconColor(icon: IconElement) {
+  const { stroke, fill } = getAttributes(icon, ['fill', 'stroke']);
+  icon.style.color = fill || stroke || 'currentColor';
 }
 
-export function getIconElement(element: SVGElement): IconElement | null {
-  if (!isIconElement(element)) return null;
-  if (element.tagName === 'use') {
-    return element as IconElement;
+export function getIconEntity(icon: IconElement): SVGUseElement | null {
+  if (icon.tagName === 'use') {
+    return icon as SVGUseElement;
   }
-  return element.querySelector<IconElement>(
-    `use[data-element-type="${ElementTypeEnum.Icon}"]`,
-  );
+  return icon.querySelector('use');
 }
 
-export function isIconElement(element: SVGElement): element is IconElement {
-  return (
-    element?.getAttribute('data-element-type') === ElementTypeEnum.Icon ||
-    element?.getAttribute('data-element-type') === ElementTypeEnum.IconGroup
-  );
+export function getIconAttrs(icon: IconElement): IconAttributes {
+  const entity = getIconEntity(icon);
+  if (!entity) return {};
+  const attrs = getAttributes(entity, [
+    'width',
+    'height',
+    'x',
+    'y',
+    'width',
+    'height',
+    'fill',
+    'fill-opacity',
+    'stroke',
+    'opacity',
+  ]);
+
+  return attrs;
 }
 
-function applyIconColor(icon: IconElement) {
-  const { stroke, fill } = getAttributes(icon, ['fill', 'stroke']);
-  icon.style.color = fill || stroke || 'currentColor';
+export function updateIconElement(
+  icon: IconElement,
+  value?: string | ResourceConfig,
+  attrs?: IconAttributes,
+): void {
+  const entity = getIconEntity(icon);
+  if (!entity) return;
+
+  if (value) setAttributes(entity, { href: getResourceHref(value) });
+  if (attrs) setAttributes(entity, attrs);
+  applyIconColor(entity);
 }

package/src/utils/index.ts

@@ -1,12 +1,17 @@
+export * from './attrs';
 export * from './color';
 export * from './data';
+export * from './element';
 export * from './font';
 export * from './get-types';
+export * from './hash';
 export * from './icon';
 export * from './item';
 export * from './join';
+export * from './measure-text';
 export * from './padding';
 export * from './recognizer';
+export * from './style';
 export * from './svg';
 export * from './text';
 export * from './uuid';

package/src/utils/measure-text.ts

@@ -0,0 +1,38 @@
+import { measureText as measure, registerFont } from 'measury';
+import AlibabaPuHuiTi from 'measury/fonts/AlibabaPuHuiTi-Regular';
+import { TextProps } from '../jsx';
+import { DEFAULT_FONT } from '../renderer';
+
+registerFont(AlibabaPuHuiTi);
+
+export function measureText(
+  text: string | number | undefined = '',
+  attrs: TextProps,
+): { width: number; height: number } {
+  if (attrs.width && attrs.height) {
+    return { width: attrs.width, height: attrs.height };
+  }
+
+  let width = 0;
+  let height = 0;
+
+  const {
+    fontFamily = DEFAULT_FONT,
+    fontSize = 14,
+    fontWeight = 'normal',
+    lineHeight = 1.4,
+  } = attrs;
+
+  const metrics = measure(text.toString(), {
+    fontFamily,
+    fontSize: +fontSize,
+    fontWeight,
+    lineHeight,
+  });
+
+  // 额外添加 1% 宽高
+  width ||= Math.ceil(metrics.width * 1.01);
+  height ||= Math.ceil(metrics.height * 1.01);
+
+  return { width, height };
+}

package/src/utils/recognizer.ts

@@ -1,5 +1,10 @@
+import { COMPONENT_ROLE, ElementTypeEnum } from '../constants';
+import { Element, GeometryElement, TextElement } from '../types';
+import { getElementByRole, getElementRole } from './element';
+import { getTextEntity } from './text';
+
 const is = (element: SVGElement, role: string) => {
-  return element.dataset.elementType === role;
+  return element?.dataset?.elementType === role;
 };
 export const isSVG = (element: any): element is SVGSVGElement =>
   element instanceof SVGElement && element.tagName === 'svg';
@@ -14,6 +19,8 @@ export const isText = (element: SVGElement): element is SVGTextElement =>
 export const isGroup = (element: SVGElement): element is SVGGElement =>
   element instanceof SVGElement && element.tagName === 'g';
 export const isItemIcon = (element: SVGElement) => is(element, 'item-icon');
+export const isItemIconGroup = (element: SVGElement) =>
+  is(element, 'item-icon-group');
 export const isItemLabel = (element: SVGElement) => is(element, 'item-label');
 export const isItemDesc = (element: SVGElement) => is(element, 'item-desc');
 export const isItemValue = (element: SVGElement) => is(element, 'item-value');
@@ -22,3 +29,70 @@ export const isEditArea = (element: SVGElement) => is(element, 'edit-area');
 export const isBtnsGroup = (element: SVGElement) => is(element, 'btns-group');
 export const isBtnAdd = (element: SVGElement) => is(element, 'btn-add');
 export const isBtnRemove = (element: SVGElement) => is(element, 'btn-remove');
+export const isRoughElement = (element: SVGElement) =>
+  is(element, 'rough-element');
+export const isRoughVolume = (element: SVGElement) =>
+  is(element, 'rough-volume');
+
+export function isForeignObjectElement(
+  element: any,
+): element is SVGForeignObjectElement {
+  return element.tagName === 'foreignObject';
+}
+
+export function isTextEntity(element: any): element is HTMLSpanElement {
+  return element.tagName === 'SPAN';
+}
+
+export function isEditableText(node: SVGElement): node is TextElement {
+  const role = getElementRole(node);
+  return [
+    ElementTypeEnum.Title,
+    ElementTypeEnum.Desc,
+    ElementTypeEnum.ItemLabel,
+    ElementTypeEnum.ItemDesc,
+  ].includes(role);
+}
+
+export function isEditingText(element: SVGElement | null): boolean {
+  if (!element) return false;
+  if (!isEditableText(element)) return false;
+
+  const span = getTextEntity(element);
+  if (!span) return false;
+  return span.hasAttribute('contenteditable');
+}
+
+export function isGeometryElement(
+  element: Element,
+): element is GeometryElement {
+  const tagName = element.tagName.toLowerCase();
+  return [
+    'rect',
+    'circle',
+    'ellipse',
+    'line',
+    'polygon',
+    'polyline',
+    'path',
+  ].includes(tagName);
+}
+
+export function isIconElement(element: SVGElement): boolean {
+  return isItemIcon(element) || isItemIconGroup(element);
+}
+
+/**
+ * 对于编辑器插件、交互挂载的DOM元素，识别其是否为信息图组件的一部分
+ * 在元素中操作时不会触发编辑器的取消激活行为
+ */
+export function isInfographicComponent(element: HTMLElement): boolean {
+  let current: HTMLElement | null = element;
+  while (current) {
+    if (getElementByRole(current, COMPONENT_ROLE)) {
+      return true;
+    }
+    current = current.parentElement;
+  }
+  return false;
+}

package/src/utils/style.ts

@@ -0,0 +1,8 @@
+export function injectStyleOnce(id: string, styles: string) {
+  if (document.getElementById(id)) return;
+
+  const style = document.createElement('style');
+  style.id = id;
+  style.textContent = styles;
+  document.head.appendChild(style);
+}