@antv/infographic 0.1.1 → 0.1.3

package/src/designs/structures/index.ts

@@ -1,7 +1,11 @@
+export * from './chart-bar';
 export * from './chart-column';
+export * from './chart-line';
+export * from './chart-pie';
 export * from './compare-binary-horizontal';
 export * from './compare-hierarchy-left-right';
 export * from './compare-hierarchy-row';
+export * from './hierarchy-mindmap';
 export * from './hierarchy-tree';
 export * from './list-column';
 export * from './list-grid';

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

@@ -1,3 +1,4 @@
+import { ElementTypeEnum } from '../../constants';
 import type { ComponentType, JSXElement } from '../../jsx';
 import { Ellipse, getElementBounds, Group, Path, Text } from '../../jsx';
 import { BtnAdd, BtnRemove, BtnsGroup, ItemsGroup } from '../components';
@@ -267,7 +268,6 @@ export const ListSector: ComponentType<ListSectorProps> = (props) => {
         />
       )}
       <Text
-        id="title"
         x={titleCenterX - titleWidth / 2}
         y={titleCenterY - titleHeight / 2}
         width={titleWidth}
@@ -277,6 +277,7 @@ export const ListSector: ComponentType<ListSectorProps> = (props) => {
         fontSize={24}
         fontWeight="bold"
         fill={themeColors.colorText}
+        data-element-type={ElementTypeEnum.Title}
       >
         {title}
       </Text>

package/src/designs/structures/sequence-ascending-steps.tsx

@@ -17,7 +17,6 @@ export const SequenceAscendingSteps: ComponentType<
   const { title, desc, items = [] } = data;
 
   const titleContent = Title ? <Title title={title} desc={desc} /> : null;
-
   const itemBounds = getElementBounds(
     <Item indexes={[0]} data={data} datum={items[0]} />,
   );

package/src/designs/structures/sequence-circular.tsx

@@ -352,7 +352,7 @@ export const SequenceCircular: ComponentType<SequenceCircularProps> = (
       flexDirection="column"
       justifyContent="center"
       alignItems="center"
-      gap={50}
+      gap={70}
     >
       {titleContent}
       <Group>

package/src/designs/structures/sequence-cylinders-3d.tsx

@@ -380,17 +380,17 @@ const createCylinderElements = (
     />,
   );
 
-  const numberX = x;
-  const numberY = topY + 2;
+  const numberX = x - 10;
+  const numberY = topY - 15;
   const scaleY = 0.6;
   const skewX = -0.6;
-  const transformValue = `translate(${numberX}, ${numberY}) matrix(1, 0, ${skewX}, ${scaleY}, 0, 0) translate(${-numberX}, ${-numberY})`;
+  const transformValue = `translate(${numberX}, ${numberY}) matrix(1, 0, ${skewX}, ${scaleY}, 0, 0)`;
 
   elements.push(
     <Text
       id={`cylinder-number-${index}`}
-      x={numberX}
-      y={numberY}
+      width={50}
+      height={50}
       fontFamily="Arial Black, sans-serif"
       fontSize={32}
       fontWeight={900}

package/src/designs/structures/sequence-roadmap-vertical.tsx

@@ -94,7 +94,8 @@ function renderItemRow({
     ),
     label: (
       <Text
-        x={isLeft ? iconX - 10 : iconX + iconSize + 10}
+        width={40}
+        x={isLeft ? iconX - 50 : iconX + iconSize + 10}
         y={iconY + iconSize / 2 - 15}
         fontSize={30}
         fill={color}

package/src/designs/structures/sequence-zigzag-pucks-3d.tsx

@@ -17,13 +17,13 @@ const PUCK_HEIGHT = 108;
 const ITEM_TO_PUCK_GAP = 30;
 
 const PUCK_TOP_PATH =
-  'M0 34.4903C0 37.8781 0.849901 41.1522 2.43491 44.2451C4.23514 47.7639 6.98606 51.0482 10.5164 54.0008C21.3317 63.0477 39.4607 68.9799 59.9998 68.9799C80.5391 68.9799 98.6691 63.0477 109.483 54.0008C113.013 51.0482 115.765 47.7639 117.564 44.2451C119.149 41.1522 120 37.8781 120 34.4903C120 15.4417 93.1366 0 59.9998 0C26.8632 0 0 15.4417 0 34.4903Z';
+  'M4.49144e-05 34.4898C4.49144e-05 37.8786 0.848973 41.152 2.43571 44.2444C4.23516 47.7642 6.98514 51.0472 10.517 54.0009C21.331 63.047 39.4615 68.9814 59.9991 68.9814C80.5385 68.9814 98.6672 63.047 109.483 54.0009C113.013 51.0472 115.765 47.7642 117.564 44.2444C119.149 41.152 120 37.8786 120 34.4898C120 15.4407 93.1364 0 59.9991 0C26.8635 0 4.49144e-05 15.4407 4.49144e-05 34.4898Z';
 
 const PUCK_MIDDLE_PATH =
-  'M0 34.4904V53.9996C0 57.3885 0.849901 60.6616 2.43491 63.7555C9.75384 78.0548 32.7566 88.4909 59.9998 88.4909C87.2438 88.4909 110.246 78.0548 117.564 63.7555C119.149 60.6616 120 57.3885 120 53.9996V34.4904C120 37.8781 119.149 41.1522 117.564 44.2451C115.765 47.7639 113.013 51.0482 109.483 54.0008C98.6691 63.0477 80.5391 68.9799 59.9998 68.9799C39.4607 68.9799 21.3317 63.0477 10.5164 54.0008C6.98606 51.0482 4.23514 47.7639 2.43491 44.2451C0.849901 41.1522 0 37.8781 0 34.4904Z';
+  'M4.49145e-05 34.4898V53.9991C4.49145e-05 57.3879 0.848973 60.6613 2.43571 63.7556C9.75425 78.0545 32.7562 88.4907 59.999 88.4907C87.2438 88.4907 110.246 78.0545 117.564 63.7556C119.149 60.6613 120 57.3879 120 53.9991V34.4898C120 37.8786 119.149 41.152 117.564 44.2444C115.765 47.7642 113.013 51.0472 109.483 54.0009C98.6672 63.047 80.5385 68.9814 59.999 68.9814C39.4615 68.9814 21.3309 63.047 10.5169 54.0009C6.98509 51.0472 4.23516 47.7642 2.43567 44.2444C0.848928 41.152 4.49145e-05 37.8786 4.49145e-05 34.4898Z';
 
 const PUCK_BOTTOM_PATH =
-  'M0 53.9996V73.5106C0 92.5595 26.8632 108 59.9998 108C93.1366 108 120 92.5595 120 73.5106V53.9996C120 57.3885 119.149 60.6616 117.564 63.7555C110.246 78.0548 87.2438 88.4909 59.9998 88.4909C32.7566 88.4909 9.75384 78.0548 2.43491 63.7555C0.849901 60.6616 0 57.3885 0 53.9996Z';
+  'M0 53.9991V73.5102C0 92.5593 26.8634 108 59.999 108C93.1363 108 120 92.5593 120 73.5102V53.9991C120 57.3879 119.149 60.6613 117.564 63.7556C110.246 78.0545 87.2438 88.4907 59.999 88.4907C32.7562 88.4907 9.75425 78.0545 2.43571 63.7556C0.848973 60.6613 0 57.3879 0 53.9991Z';
 
 const DropShadowFilter = (
   <filter
@@ -35,31 +35,18 @@ const DropShadowFilter = (
     filterUnits="userSpaceOnUse"
     colorInterpolationFilters="sRGB"
   >
-    <feFlood floodOpacity="0" result="BackgroundImageFix" />
+    <feOffset dx="-7" dy="7" in="SourceAlpha" result="offset" />
+    <feGaussianBlur stdDeviation="7.5" in="offset" result="blurred" />
     <feColorMatrix
-      in="SourceAlpha"
+      in="blurred"
       type="matrix"
-      values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-      result="hardAlpha"
-    />
-    <feOffset dx="-7" dy="7" />
-    <feGaussianBlur stdDeviation="7.5" />
-    <feComposite in2="hardAlpha" operator="out" />
-    <feColorMatrix
-      type="matrix"
-      values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"
-    />
-    <feBlend
-      mode="normal"
-      in2="BackgroundImageFix"
-      result="effect1_dropShadow"
-    />
-    <feBlend
-      mode="normal"
-      in="SourceGraphic"
-      in2="effect1_dropShadow"
-      result="shape"
+      values="0 0 0 0 0 
+              0 0 0 0 0 
+              0 0 0 0 0 
+              0 0 0 0.3 0"
+      result="shadow"
     />
+    <feBlend mode="normal" in="SourceGraphic" in2="shadow" />
   </filter>
 );
 
@@ -163,6 +150,12 @@ export const SequenceZigzagPucks3d: ComponentType<
           <Path d={PUCK_TOP_PATH} fill={currentColor || colorPrimary} />
           <Path d={PUCK_MIDDLE_PATH} fill={`url(#${gradientId1})`} />
           <Path d={PUCK_BOTTOM_PATH} fill={`url(#${gradientId2})`} />
+          <rect
+            fill="transparent"
+            y={PUCK_HEIGHT}
+            width={PUCK_WIDTH}
+            height={20}
+          />
         </ShapesGroup>
         <text
           x={65}

package/src/editor/commands/Batch.ts

@@ -0,0 +1,24 @@
+import type { ICommand, IStateManager } from '../types';
+
+export class BatchCommand implements ICommand {
+  constructor(private commands: ICommand[]) {}
+
+  async apply(state: IStateManager) {
+    for (const command of this.commands) {
+      await command.apply(state);
+    }
+  }
+
+  async undo(state: IStateManager) {
+    for (let i = this.commands.length - 1; i >= 0; i--) {
+      await this.commands[i].undo(state);
+    }
+  }
+
+  serialize() {
+    return {
+      type: 'batch',
+      commands: this.commands.map((cmd) => cmd.serialize()),
+    };
+  }
+}

package/src/editor/commands/UpdateElement.ts

@@ -0,0 +1,115 @@
+import type { Element, IconElement } from '../../types';
+import {
+  getAttributes,
+  getIconAttrs,
+  getIconEntity,
+  getTextElementProps,
+  isEditableText,
+  isIconElement,
+  setAttributes,
+  updateIconElement,
+  updateTextElement,
+} from '../../utils';
+import type {
+  ElementProps,
+  ICommand,
+  IStateManager,
+  TextProps,
+} from '../types';
+
+export class UpdateElementCommand implements ICommand {
+  private original?: Partial<ElementProps>;
+
+  constructor(
+    private element: Element,
+    private modified: Partial<ElementProps>,
+    original?: Partial<ElementProps>,
+  ) {
+    const computedOriginal = getOriginalProps(element, modified);
+    this.original = mergeOriginalProps(computedOriginal, original);
+  }
+
+  async apply(state: IStateManager) {
+    updateElement(this.element, this.modified);
+    state.updateElement(this.element, this.modified);
+  }
+
+  async undo(state: IStateManager) {
+    if (this.original) {
+      updateElement(this.element, this.original);
+      state.updateElement(this.element, this.original);
+    }
+  }
+
+  serialize() {
+    return {
+      type: 'update-element',
+      elementId: this.element.id,
+      modified: this.modified,
+      original: this.original,
+    };
+  }
+}
+
+function updateElement(element: Element, props: Partial<ElementProps>) {
+  if (isEditableText(element)) {
+    updateTextElement(element, props as TextProps);
+  } else if (isIconElement(element)) {
+    updateIconElement(element as IconElement, undefined, props.attributes);
+  } else if (props.attributes) {
+    setAttributes(element, props.attributes);
+  }
+}
+
+function getOriginalProps(
+  element: Element,
+  modified: Partial<ElementProps>,
+): Partial<ElementProps> | undefined {
+  const modifiedAttrKeys = Object.keys(modified.attributes || {});
+  const originalAttributes = getAttributes(element, modifiedAttrKeys, false);
+
+  const assignModifiedAttributes = (attrs?: Record<string, any>) => {
+    if (!attrs) return;
+    modifiedAttrKeys.forEach((key) => {
+      if (key in attrs) originalAttributes[key] = attrs[key];
+    });
+  };
+
+  const original = {
+    ...modified,
+    attributes: originalAttributes,
+  };
+
+  if (isEditableText(element)) {
+    const { attributes } = getTextElementProps(element);
+    assignModifiedAttributes(attributes);
+  } else if (isIconElement(element)) {
+    const entity = getIconEntity(element);
+    if (!entity) return;
+    assignModifiedAttributes(getIconAttrs(element));
+  }
+  // TODO illus
+
+  return original;
+}
+
+function mergeOriginalProps(
+  computed: Partial<ElementProps> | undefined,
+  provided: Partial<ElementProps> | undefined,
+): Partial<ElementProps> | undefined {
+  if (!computed) return provided;
+  if (!provided) return computed;
+
+  const mergedAttributes = {
+    ...(computed.attributes || {}),
+    ...(provided.attributes || {}),
+  };
+
+  return {
+    ...computed,
+    ...provided,
+    attributes: Object.keys(mergedAttributes).length
+      ? mergedAttributes
+      : undefined,
+  };
+}

package/src/editor/commands/UpdateOptions.ts

@@ -0,0 +1,31 @@
+import type { ParsedInfographicOptions } from '../../options';
+import type { ICommand, IStateManager } from '../types';
+
+export class UpdateOptionsCommand implements ICommand {
+  constructor(
+    private options: Partial<ParsedInfographicOptions>,
+    private original?: ParsedInfographicOptions,
+  ) {}
+
+  async apply(state: IStateManager) {
+    const prev = state.getOptions();
+    if (!this.original) {
+      this.original = prev;
+    }
+    state.updateOptions({ ...prev, ...this.options });
+  }
+
+  async undo(state: IStateManager) {
+    if (this.original) {
+      state.updateOptions(this.original);
+    }
+  }
+
+  serialize() {
+    return {
+      type: 'update-options',
+      options: this.options,
+      original: this.original,
+    };
+  }
+}

package/src/editor/commands/UpdateText.ts

@@ -0,0 +1,54 @@
+import type { TextElement } from '../../types';
+import { getElementRole, getTextContent, setTextContent } from '../../utils';
+import type { ICommand, IStateManager } from '../types';
+import { getIndexesFromElement } from '../utils';
+
+export class UpdateTextCommand implements ICommand {
+  private originalText: string;
+  private modifiedText: string;
+
+  constructor(
+    private element: TextElement,
+    newText: string,
+    originalText?: string,
+  ) {
+    this.originalText = originalText ?? getTextContent(element);
+    this.modifiedText = newText;
+  }
+
+  async apply(state: IStateManager) {
+    if (this.originalText === this.modifiedText) return;
+    setTextContent(this.element, this.modifiedText);
+    updateItemText(state, this.element, this.modifiedText);
+  }
+
+  async undo(state: IStateManager) {
+    if (this.originalText === this.modifiedText) return;
+    setTextContent(this.element, this.originalText);
+    updateItemText(state, this.element, this.originalText);
+  }
+
+  serialize() {
+    return {
+      type: 'update-text',
+      elementId: this.element.id,
+      original: this.originalText,
+      modified: this.modifiedText,
+    };
+  }
+}
+
+function updateItemText(
+  state: IStateManager,
+  element: TextElement,
+  text: string,
+) {
+  const role = getElementRole(element);
+  if (role.startsWith('item-')) {
+    const key = role.replace('item-', '');
+    const indexes = getIndexesFromElement(element);
+    state.updateItemDatum(indexes, { [key]: text });
+  } else {
+    state.updateData(role, text);
+  }
+}

package/src/editor/commands/index.ts

@@ -0,0 +1,4 @@
+export * from './Batch';
+export * from './UpdateElement';
+export * from './UpdateOptions';
+export * from './UpdateText';

package/src/editor/editor.ts

@@ -0,0 +1,78 @@
+import type { ParsedInfographicOptions } from '../options';
+import type { IEventEmitter } from '../types';
+import {
+  CommandManager,
+  InteractionManager,
+  PluginManager,
+  StateManager,
+} from './managers';
+import type {
+  ICommandManager,
+  IEditor,
+  IPluginManager,
+  IStateManager,
+} from './types';
+
+export class Editor implements IEditor {
+  state: IStateManager;
+  commander: ICommandManager;
+  plugin: IPluginManager;
+  interaction: InteractionManager;
+
+  constructor(
+    private emitter: IEventEmitter,
+    private document: SVGSVGElement,
+    private options: ParsedInfographicOptions,
+  ) {
+    if (!document.isConnected) {
+      throw new Error('The provided document is not connected to the DOM.');
+    }
+    document.style.userSelect = 'none';
+
+    const commander = new CommandManager();
+    const state = new StateManager();
+    const plugin = new PluginManager();
+    const interaction = new InteractionManager();
+
+    commander.init({ state, emitter });
+    state.init({
+      emitter,
+      editor: this,
+      commander,
+      options,
+    });
+    plugin.init(
+      {
+        emitter,
+        editor: this,
+        commander,
+        state,
+      },
+      options.plugins,
+    );
+    interaction.init({
+      emitter,
+      editor: this,
+      commander,
+      state,
+      interactions: options.interactions,
+    });
+
+    this.commander = commander;
+    this.state = state;
+    this.plugin = plugin;
+    this.interaction = interaction;
+  }
+
+  getDocument() {
+    return this.document;
+  }
+
+  destroy() {
+    this.document.style.userSelect = '';
+    this.interaction.destroy();
+    this.plugin.destroy();
+    this.commander.destroy();
+    this.state.destroy();
+  }
+}

package/src/editor/index.ts

@@ -0,0 +1,4 @@
+export { Editor } from './editor';
+export * from './interactions';
+export * from './plugins';
+export type * from './types';

package/src/editor/interactions/base.ts

@@ -0,0 +1,25 @@
+import type { IEventEmitter } from '../../types';
+import type {
+  ICommandManager,
+  IEditor,
+  IInteraction,
+  IInteractionManager,
+  IStateManager,
+  InteractionInitOptions,
+} from '../types';
+
+export abstract class Interaction implements IInteraction {
+  abstract name: string;
+
+  protected emitter!: IEventEmitter;
+  protected editor!: IEditor;
+  protected commander!: ICommandManager;
+  protected state!: IStateManager;
+  protected interaction!: IInteractionManager;
+
+  init(options: InteractionInitOptions) {
+    Object.assign(this, options);
+  }
+
+  abstract destroy(): void;
+}