feat: 提供更新图标标注方法

Author: xinming.lxj

__tests__/unit/core/index-spec.ts

@@ -318,4 +318,31 @@ describe('core', () => {
 
     plot.destroy();
   });
+
+  it('update annotations', () => {
+    const line = new Line(createDiv(), {
+      data: partySupport.filter((o) => o.type === 'FF'),
+      xField: 'date',
+      yField: 'value',
+      annotations: [
+        { type: 'line', start: ['min', 'median'], end: ['max', 'median'], id: 'ID' },
+        { type: 'line', start: ['min', 'median'], end: ['max', 'median'] },
+      ],
+    });
+
+    line.render();
+
+    expect(line.chart.getController('annotation').getComponents().length).toBe(2);
+
+    line.updateAnnotation([{ type: 'image', start: ['min', 'median'], end: ['max', 'median'], src: 'xx', id: 'ID' }]);
+
+    const annotations = line.chart.getController('annotation').getComponents();
+    expect(annotations.length).toBe(2);
+    expect(annotations.find((co) => co.extra.id === 'ID').component.get('type')).toBe('image');
+
+    line.updateAnnotation([{ type: 'image', start: ['min', 'median'], end: ['max', 'median'], src: 'xx' }]);
+    expect(line.chart.getController('annotation').getComponents().length).toBe(3);
+
+    line.destroy();
+  });
 });

examples/component/annotation/demo/line-annotation-position.jsx

@@ -31,6 +31,7 @@ const Plot = () => {
       annotations: [
         {
           type: 'line',
+          id: 'line',
           /** 起始位置 */
           start: [startX, startY],
           /** 结束位置 */
@@ -58,34 +59,24 @@ const Plot = () => {
 
   useEffect(() => {
     if (plotRef?.current) {
-      // fixme 提供更新 annotation 的方法
-      const annotationController = plotRef.current.chart.getController('annotation');
-      annotationController.clear(true);
       let label = '辅助线';
       if (startY === endY) {
-        label = options.find(opt => opt.value === startY)?.label || label;
+        label = options.find((opt) => opt.value === startY)?.label || label;
       }
-      annotationController.annotation({
-        type: 'line',
-        /** 起始位置 */
-        start: [startX, startY],
-        /** 结束位置 */
-        end: [endX, endY],
-        text: {
-          content: label,
-          position: 'right',
-          offsetY: 18,
-          style: {
-            textAlign: 'right',
+
+      plotRef.current.updateAnnotation([
+        {
+          type: 'line',
+          id: 'line',
+          /** 起始位置 */
+          start: [startX, startY],
+          /** 结束位置 */
+          end: [endX, endY],
+          text: {
+            content: label,
           },
         },
-        style: {
-          lineWidth: 0.5,
-          lineDash: [4, 4],
-        },
-      });
-
-      plotRef.current.chart.render(true);
+      ]);
     }
   }, [startX, startY, endX, endY]);
 

src/core/plot.ts

@@ -2,7 +2,7 @@ import { Chart, Event, Element } from '@antv/g2';
 import { each } from '@antv/util';
 import EE from '@antv/event-emitter';
 import { bind } from 'size-sensor';
-import { Options, StateName, StateCondition, Size, StateObject } from '../types';
+import { Options, StateName, StateCondition, Size, StateObject, Annotation } from '../types';
 import { getContainerSize, getAllElementsRecursively, deepAssign, pick } from '../utils';
 import { Adaptor } from './adaptor';
 
@@ -236,6 +236,31 @@ export abstract class Plot<O extends PickOptions> extends EE {
     this.chart.changeSize(width, height);
   }
 
+  /**
+   * 更新图表标注, 通过 id 标识
+   */
+  public updateAnnotation(annotations: Annotation[]): void {
+    const incoming = [...annotations];
+    const controller = this.chart.getController('annotation');
+    const current = controller.getComponents().map((co) => co.extra);
+
+    controller.clear(true);
+    for (let i = 0; i < current.length; i++) {
+      let annotation = current[i];
+
+      const findIndex = incoming.findIndex((item) => item.id === annotation.id);
+      if (findIndex !== -1) {
+        annotation = deepAssign({}, annotation, incoming[findIndex]);
+        incoming.splice(findIndex, 1);
+      }
+      controller.annotation(annotation);
+    }
+
+    incoming.forEach((annotation) => controller.annotation(annotation));
+
+    this.chart.render(true);
+  }
+
   /**
    * 销毁
    */

src/types/annotation.ts

@@ -1,6 +1,6 @@
 import { Types } from '@antv/g2';
 
-export type Annotation =
+type AnnotationOption =
   | Types.ArcOption
   | Types.ImageOption
   | Types.LineOption
@@ -11,3 +11,5 @@ export type Annotation =
   | Types.DataRegionOption
   | Types.ShapeAnnotationOption
   | Types.HtmlAnnotationOption;
+
+export type Annotation = { id?: string } & AnnotationOption;

src/types/index.ts

@@ -6,6 +6,7 @@ export * from './statistic';
 export * from './meta';
 export * from './axis';
 export * from './interaction';
+export * from './annotation';
 export * from './locale';
 export * from './button';