refactor marker

__tests__/unit/ui/marker/index.spec.ts → __tests__/unit/ui/marker/index-spec.ts

@@ -28,9 +28,18 @@ const marker = new Marker({
     fill: 'green',
   },
 });
+
 canvas.appendChild(marker);
 
 describe('marker', () => {
+  test('basic', () => {
+    expect(marker.attr('x')).toBe(50);
+    expect(marker.attr('y')).toBe(50);
+    expect(marker.attr('size')).toBe(16);
+    expect(marker.attr('fill')).toBe('green');
+    expect(marker.attr('symbol')).toBe('triangle-down');
+  });
+
   test('customize marker', async () => {
     Marker.registerSymbol(
       'star',
@@ -43,9 +52,15 @@ describe('marker', () => {
       symbol: 'star',
       x: 50,
       y: 50,
-      size: 16,
+      size: 20,
       stroke: 'red',
     });
+    expect(marker.attr('x')).toBe(50);
+    expect(marker.attr('y')).toBe(50);
+    expect(marker.attr('size')).toBe(20);
+    expect(marker.attr('fill')).toBe('green');
+    expect(marker.attr('symbol')).toBe('star');
+    expect(marker.attr('stroke')).toBe('red');
   });
 });
 

__tests__/unit/ui/marker/parse-marker-spec.ts

@@ -0,0 +1,26 @@
+import { parseMarker } from '../../../../src/ui/marker/utils';
+
+describe('parseMarker', () => {
+  test('symbol', async () => {
+    expect(parseMarker('square')).toBe('symbol');
+    expect(
+      parseMarker((x, y, r) => {
+        return [];
+      })
+    ).toBe('symbol');
+  });
+
+  test('img', async () => {
+    expect(
+      parseMarker(
+        'data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'
+      )
+    ).toBe('base64');
+
+    expect(parseMarker('https://gw.alipayobjects.com/zos/rmsportal/fSPDqijMJrYFdODpgEBV.png')).toBe('url');
+  });
+
+  test('unknown', async () => {
+    expect(parseMarker(undefined)).toBe('default');
+  });
+});

__tests__/unit/util/number-spec.ts

@@ -0,0 +1,8 @@
+import { toPrecision } from '../../../src';
+
+describe('number', () => {
+  test('toPrecision', async () => {
+    expect(toPrecision(0.12345, 2)).toBe(0.12);
+    expect(toPrecision(0.12345, 3)).toBe(0.12);
+  });
+});

examples/marker/basic/demo/register-symbol.ts

@@ -28,7 +28,7 @@ const marker = new Marker({
     symbol: 'star',
     x: 50,
     y: 50,
-    r: 16,
+    size: 16,
     fill: 'orange',
   },
 });

examples/marker/basic/demo/triangle.ts

@@ -21,7 +21,7 @@ const marker = new Marker({
     symbol: 'triangle-down',
     x: 50,
     y: 50,
-    r: 16,
+    size: 16,
     fill: 'green',
   },
 });

package.json

@@ -83,7 +83,7 @@
     "testTimeout": 30000,
     "preset": "ts-jest",
     "collectCoverage": true,
-    "testRegex": "(/__tests__/.*\\.(test|spec))\\.ts$",
+    "testRegex": "/__tests__/.*-spec\\.ts?$",
     "setupFilesAfterEnv": [
       "./jest.setup.js"
     ],

src/index.ts

@@ -2,4 +2,4 @@
 export * from './ui';
 
 // 方法
-export { svg2marker, getEllipsisText, measureTextWidth } from './util';
+export { svg2marker, getEllipsisText, measureTextWidth, toPrecision } from './util';

src/ui/marker/index.ts

@@ -1,5 +1,5 @@
 import { Path, Image } from '@antv/g';
-import { deepMix, isFunction, isObject, isString } from '@antv/util';
+import { deepMix, isFunction } from '@antv/util';
 import { GUI } from '../core/gui';
 import type { DisplayObject } from '../../types';
 import type { MarkerAttrs, MarkerOptions, FunctionalSymbol } from './types';
@@ -37,7 +37,7 @@ export class Marker extends GUI<MarkerAttrs> {
     attrs: {
       x: 0,
       y: 0,
-      r: 16,
+      size: 16,
     },
   };
 
@@ -74,7 +74,7 @@ export class Marker extends GUI<MarkerAttrs> {
 
   private createMarker() {
     const { symbol } = this.attributes;
-    const markerType = this.parseMarker(symbol);
+    const markerType = parseMarker(symbol);
     if (['base64', 'url', 'image'].includes(markerType)) {
       this.markerShape = new Image({
         name: 'marker-image',
@@ -94,10 +94,10 @@ export class Marker extends GUI<MarkerAttrs> {
 
   // symbol marker
   private getMarkerSymbolAttrs() {
-    const { x, y, r, symbol, ...args } = this.attributes;
-    const halfR = r / 2;
+    const { x, y, size, symbol, ...args } = this.attributes;
+    const halfR = size / 2;
     const symbolFn = isFunction(symbol) ? symbol : Marker.MARKER_SYMBOL_MAP.get(symbol);
-    const path = symbolFn(x, y, r);
+    const path = symbolFn(x, y, size);
     return {
       path,
       r: halfR,
@@ -107,8 +107,8 @@ export class Marker extends GUI<MarkerAttrs> {
 
   // image marker
   private getMarkerImageAttrs() {
-    const { r, symbol, ...args } = this.attributes;
-    const r2 = r * 2;
+    const { size, symbol, ...args } = this.attributes;
+    const r2 = size * 2;
     return {
       x: -r2,
       y: -r2,
@@ -118,27 +118,6 @@ export class Marker extends GUI<MarkerAttrs> {
       ...args,
     };
   }
-
-  /**
-   * 解析marker类型
-   */
-  private parseMarker(icon: MarkerOptions['symbol'] | string) {
-    let type = 'default';
-    if (isObject(icon) && icon instanceof Image) type = 'image';
-    else if (isFunction(icon)) type = 'symbol';
-    else if (isString(icon)) {
-      const dataURLsPattern = new RegExp('data:(image|text)');
-      if (icon.match(dataURLsPattern)) {
-        type = 'base64';
-      } else if (/^(https?:\/\/(([a-zA-Z0-9]+-?)+[a-zA-Z0-9]+\.)+[a-zA-Z]+)(:\d+)?(\/.*)?(\?.*)?(#.*)?$/.test(icon)) {
-        type = 'url';
-      } else {
-        // 不然就当作symbol string 处理
-        type = 'symbol';
-      }
-    }
-    return type;
-  }
 }
 
 // 内置的组件

src/ui/marker/utils.ts

@@ -0,0 +1,22 @@
+import { isObject, isString, isFunction } from '@antv/util';
+import { MarkerOptions } from './types';
+/**
+ * 解析marker类型
+ */
+export function parseMarker(icon: MarkerOptions['symbol'] | string) {
+  let type = 'default';
+  if (isObject(icon) && icon instanceof Image) type = 'image';
+  else if (isFunction(icon)) type = 'symbol';
+  else if (isString(icon)) {
+    const dataURLsPattern = new RegExp('data:(image|text)');
+    if (icon.match(dataURLsPattern)) {
+      type = 'base64';
+    } else if (/^(https?:\/\/(([a-zA-Z0-9]+-?)+[a-zA-Z0-9]+\.)+[a-zA-Z]+)(:\d+)?(\/.*)?(\?.*)?(#.*)?$/.test(icon)) {
+      type = 'url';
+    } else {
+      // 不然就当作symbol string 处理
+      type = 'symbol';
+    }
+  }
+  return type;
+}

src/util/index.ts

@@ -1,5 +1,6 @@
 export { svg2marker } from './svg2marker';
 export { measureTextWidth, getEllipsisText } from './text';
-export { toPrecision } from './utils';
+export { toPrecision } from './number';
 export { normalPadding } from './padding';
 export { getDefaultStyle, getStateStyle } from './style';
+