Refactor/legend (#191)

* fix(legend): if text is not ellipsis, not apply tip attribute * chore: v0.4.3-alpha.38 * test: skip test
antvis · Jul 29, 2022 · f8ee8a6 · f8ee8a6
1 parent 744afbd
commit f8ee8a6
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 32 deletions.
diff --git a/__tests__/unit/ui/axis/arc.spec.ts b/__tests__/unit/ui/axis/arc.spec.ts
@@ -200,14 +200,11 @@ describe('Arc axis', () => {
       const labels = arc.querySelectorAll('.axis-label');
       expect(labels.length).toBe(ticks.length);
       expect(labels.some((d) => d.style.text.endsWith('...'))).toBe(false);
-
-      arc.update({ label: { style: { fontSize: 12 } } });
-      expect(labels.some((d) => d.style.text.endsWith('...'))).toBe(true);
     });
   });
 
   afterAll(() => {
-    // canvas.removeChildren();
+    canvas.removeChildren();
   });
 });
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antv/gui",
-  "version": "0.4.3-alpha.37",
+  "version": "0.4.3-alpha.38",
   "description": "UI components for AntV G.",
   "license": "MIT",
   "main": "lib/index.js",

diff --git a/src/ui/legend/categoryItem.ts b/src/ui/legend/categoryItem.ts
@@ -1,5 +1,6 @@
-import { Text, CustomElement, DisplayObjectConfig } from '@antv/g';
+import { Text, DisplayObjectConfig, Group, DisplayObject } from '@antv/g';
 import { deepMix, get, isNil } from '@antv/util';
+import { BaseComponent } from '../../util/create';
 import { applyStyle, getFont, maybeAppend, getEllipsisText, normalPadding } from '../../util';
 import { Marker } from '../marker';
 import { NAME_VALUE_RATIO } from './constant';
@@ -24,23 +25,32 @@ type CategoryItemOptions = DisplayObjectConfig<CategoryItemStyleProps>;
 
 const PREFIX = 'legend-item-';
 
+/**
+ * Apply new text to shape, and store origin text in tip attribute.
+ */
+function applyShapeWithTip(shape?: DisplayObject | null, text?: string) {
+  if (!shape) return;
+  shape.setAttribute('tip', shape.style.text);
+  shape?.attr('text', text || '');
+}
+
 /**
  * By default, nameShape and valueShape use `maxWidth / 2`
  */
 function adjustText(nameShape?: Text | null, valueShape?: Text | null, maxWidth?: number) {
   if ((!nameShape && !valueShape) || typeof maxWidth !== 'number') return;
 
   if (Number(maxWidth) <= 0) {
-    nameShape?.attr('text', '');
-    valueShape?.attr('text', '');
+    applyShapeWithTip(nameShape, '');
+    applyShapeWithTip(valueShape, '');
     return;
   }
 
   if (!nameShape || !valueShape) {
     const shape = (nameShape || valueShape)!;
     const w = shape.getLocalBounds().halfExtents[0] * 2;
     if (w > maxWidth) {
-      shape.attr('text', getEllipsisText(shape.style.text, maxWidth, getFont(shape)));
+      applyShapeWithTip(shape, getEllipsisText(shape.style.text, maxWidth, getFont(shape)));
     }
     return;
   }
@@ -63,11 +73,11 @@ function adjustText(nameShape?: Text | null, valueShape?: Text | null, maxWidth?
       ellipsisValue = false;
     }
     if (ellipsisName) {
-      nameShape.attr('text', getEllipsisText(nameShape.style.text, w1, getFont(nameShape)));
+      applyShapeWithTip(nameShape, getEllipsisText(nameShape.style.text, w1, getFont(nameShape)));
       valueShape.attr('x', Number(nameShape.style.x) + w1 + spacing);
     }
     if (ellipsisValue) {
-      valueShape.attr('text', getEllipsisText(valueShape.style.text, w2, getFont(valueShape)));
+      applyShapeWithTip(valueShape, getEllipsisText(valueShape.style.text, w2, getFont(valueShape)));
     }
   }
 }
@@ -77,7 +87,7 @@ function getStateStyle(style = {}, state = ''): any {
   return states.reduce((r, s) => ({ ...r, ...get(style, s, {}) }), {});
 }
 
-export class CategoryItem extends CustomElement<CategoryItemStyleProps> {
+export class CategoryItem extends BaseComponent<CategoryItemStyleProps> {
   private state: string = 'default';
 
   public static defaultOptions: CategoryItemOptions = {
@@ -128,10 +138,6 @@ export class CategoryItem extends CustomElement<CategoryItemStyleProps> {
     this.state = this.style.state || 'selected';
   }
 
-  connectedCallback() {
-    this.render();
-  }
-
   public setState(state: string = '', enable: boolean = true) {
     const set = new Set((this.state || '').split('-'));
     if (enable) {
@@ -140,27 +146,25 @@ export class CategoryItem extends CustomElement<CategoryItemStyleProps> {
       set.delete(state);
     }
     this.state = [...set].join('-');
-    this.render();
+    this.update();
   }
 
   public getState(): string {
     return this.state;
   }
 
   public update(cfg: Partial<CategoryItemStyleProps> = {}) {
-    this.attr(deepMix({}, this.attributes, cfg));
+    super.update(cfg);
     if (cfg.state) {
       this.state = cfg.state;
     }
-
-    this.render();
   }
 
   private get styles(): Required<Omit<CategoryItemStyleProps, 'state'>> {
     return deepMix({}, CategoryItem.defaultOptions.style, this.attributes);
   }
 
-  private render() {
+  public render(attributes: CategoryItemStyleProps, container: Group) {
     const { backgroundStyle, itemMarker, padding, itemName, itemValue, maxItemWidth } = this.styles;
     let { itemHeight } = this.styles;
     const [pt, pr, pb, pl] = normalPadding(padding);
@@ -176,13 +180,13 @@ export class CategoryItem extends CustomElement<CategoryItemStyleProps> {
         (pt + pb);
     }
 
-    const container = maybeAppend(this, `.${PREFIX}container`, 'g')
+    const group = maybeAppend(this, `.${PREFIX}container`, 'g')
       .attr('className', `${PREFIX}container`)
       .style('x', pl)
       .style('y', itemHeight / 2)
       .node();
 
-    maybeAppend(container, `.${PREFIX}marker`, () => new Marker({}))
+    maybeAppend(group, `.${PREFIX}marker`, () => new Marker({}))
       .attr('className', `${PREFIX}marker`)
       .call((selection) => {
         if (!itemMarker) {
@@ -200,7 +204,7 @@ export class CategoryItem extends CustomElement<CategoryItemStyleProps> {
       });
 
     const nameShapeX = markerSize ? markerSize + (itemName?.spacing || 0) : 0;
-    const nameShape = maybeAppend(container, `.${PREFIX}name`, 'text')
+    const nameShape = maybeAppend(group, `.${PREFIX}name`, 'text')
       .attr('className', `${PREFIX}name`)
       .call((selection) => {
         if (!itemName) {
@@ -210,7 +214,7 @@ export class CategoryItem extends CustomElement<CategoryItemStyleProps> {
         (selection.node() as Text).attr({
           x: nameShapeX,
           y: 0,
-          tip: itemName?.content || '',
+          tip: '',
           text: itemName?.content || '',
           textBaseline: 'middle',
           textAlign: 'left',
@@ -225,7 +229,7 @@ export class CategoryItem extends CustomElement<CategoryItemStyleProps> {
       nameShapeRight = nameShape.getLocalBounds().max[0];
     }
 
-    const valueShape = maybeAppend(container, `.${PREFIX}value`, 'text')
+    const valueShape = maybeAppend(group, `.${PREFIX}value`, 'text')
       .attr('className', `${PREFIX}value`)
       .call((selection) => {
         if (!itemValue) {
@@ -235,7 +239,7 @@ export class CategoryItem extends CustomElement<CategoryItemStyleProps> {
         (selection.node() as Text).attr({
           x: nameShapeRight + (itemValue.spacing || 0),
           y: 0,
-          tip: itemValue?.content || '',
+          tip: '',
           text: itemValue?.content || '',
           textAlign: 'left',
           ...(itemValue.style || {}),
@@ -252,7 +256,7 @@ export class CategoryItem extends CustomElement<CategoryItemStyleProps> {
       );
     }
 
-    const bounds = container.getLocalBounds();
+    const bounds = group.getLocalBounds();
     let itemWidth = Math.max(bounds.halfExtents[0] * 2 + pr + pl, this.styles.itemWidth || 0);
     if (!isNil(maxItemWidth)) {
       itemWidth = Math.min(maxItemWidth, itemWidth);

diff --git a/src/util/create.ts b/src/util/create.ts
@@ -41,16 +41,17 @@ export abstract class BaseComponent<T> extends CustomElement<T> {
   }
 
   connectedCallback() {
+    // 临时修复初始化 x, y 设置不生效
+    // @ts-ignore
+    const { x, y } = this.style;
+    this.setLocalPosition([x || 0, y || 0]);
+
     this.update();
     this.bindEvents(this.attributes, this);
   }
 
   public update(cfg: Partial<T> = {}) {
     this.attr(deepMix({}, this.attributes, cfg));
-    // 临时修复 x, y 设置不生效
-    // @ts-ignore
-    const { x = 0, y = 0 } = this.style;
-    this.setLocalPosition([x, y]);
     this.render?.(this.attributes, this);
   }
 
@@ -59,6 +60,7 @@ export abstract class BaseComponent<T> extends CustomElement<T> {
   }
 
   public destroy() {
+    this.removeAllEventListeners();
     this.removeChildren(true);
     this.remove();
   }