From 732e8682a6baf1daa272ade041b43929569a5543 Mon Sep 17 00:00:00 2001 From: "yangtao.yangtao" Date: Thu, 15 Jul 2021 11:37:19 +0800 Subject: [PATCH 1/4] =?UTF-8?q?refactor(marker):=20=E6=8A=BD=E5=8F=96?= =?UTF-8?q?=E4=BA=86parseMarker=E6=96=B9=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/ui/marker/index.ts | 38 +++++++++----------------------------- src/ui/marker/utils.ts | 22 ++++++++++++++++++++++ 2 files changed, 31 insertions(+), 29 deletions(-) create mode 100644 src/ui/marker/utils.ts diff --git a/src/ui/marker/index.ts b/src/ui/marker/index.ts index 0600ccc94..d33212e83 100644 --- a/src/ui/marker/index.ts +++ b/src/ui/marker/index.ts @@ -1,7 +1,8 @@ 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 { parseMarker } from './utils'; import { MarkerAttrs, MarkerOptions, FunctionalSymbol } from './types'; import { circle, square, diamond, triangleDown, triangle } from './symbol'; @@ -37,7 +38,7 @@ export class Marker extends GUI { attrs: { x: 0, y: 0, - r: 16, + size: 16, }, }; @@ -74,7 +75,7 @@ export class Marker extends GUI { 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 +95,10 @@ export class Marker extends GUI { // 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 +108,8 @@ export class Marker extends GUI { // 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 +119,6 @@ export class Marker extends GUI { ...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; - } } // 内置的组件 diff --git a/src/ui/marker/utils.ts b/src/ui/marker/utils.ts new file mode 100644 index 000000000..c7795a90d --- /dev/null +++ b/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; +} From cfa3ee07f1d1e4f4e3e162dff8ebc5b402b4c788 Mon Sep 17 00:00:00 2001 From: "yangtao.yangtao" Date: Thu, 15 Jul 2021 11:37:54 +0800 Subject: [PATCH 2/4] =?UTF-8?q?test(marker):=20=E5=AE=8C=E5=96=84=E4=BA=86?= =?UTF-8?q?=E5=8D=95=E5=85=83=E6=B5=8B=E8=AF=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- __tests__/unit/ui/marker/index.spec.ts | 17 ++++++++++++++++- __tests__/unit/ui/marker/parse.spec.ts | 26 ++++++++++++++++++++++++++ 2 files changed, 42 insertions(+), 1 deletion(-) create mode 100644 __tests__/unit/ui/marker/parse.spec.ts diff --git a/__tests__/unit/ui/marker/index.spec.ts b/__tests__/unit/ui/marker/index.spec.ts index f4163aa79..52bf58173 100644 --- a/__tests__/unit/ui/marker/index.spec.ts +++ b/__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'); }); }); diff --git a/__tests__/unit/ui/marker/parse.spec.ts b/__tests__/unit/ui/marker/parse.spec.ts new file mode 100644 index 000000000..c0d833183 --- /dev/null +++ b/__tests__/unit/ui/marker/parse.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'); + }); +}); From 81c6bf050b148815e986ead79ab74fc1a395a76f Mon Sep 17 00:00:00 2001 From: "yangtao.yangtao" Date: Thu, 15 Jul 2021 11:38:19 +0800 Subject: [PATCH 3/4] =?UTF-8?q?docs(marker):=20=E6=9B=B4=E6=96=B0=E4=BA=86?= =?UTF-8?q?=E7=BD=91=E7=AB=99=E6=A1=88=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/marker/basic/demo/register-symbol.ts | 2 +- examples/marker/basic/demo/triangle.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/marker/basic/demo/register-symbol.ts b/examples/marker/basic/demo/register-symbol.ts index 77c23bf50..cbe1efa0c 100644 --- a/examples/marker/basic/demo/register-symbol.ts +++ b/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', }, }); diff --git a/examples/marker/basic/demo/triangle.ts b/examples/marker/basic/demo/triangle.ts index e57227e31..2d2d3b3ea 100644 --- a/examples/marker/basic/demo/triangle.ts +++ b/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', }, }); From f58ccc699cbd684249b8b6ac96fd9a29d65dfad2 Mon Sep 17 00:00:00 2001 From: Aarebecca Date: Mon, 19 Jul 2021 10:31:40 +0800 Subject: [PATCH 4/4] =?UTF-8?q?test:=20=E4=BF=AE=E6=94=B9=E4=BA=86?= =?UTF-8?q?=E5=8D=95=E6=B5=8B=E6=96=87=E4=BB=B6=E5=91=BD=E5=90=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- __tests__/bugs/{issue-1.spec.ts => issue-1-spec.ts} | 0 __tests__/unit/{index.spec.ts => index-spec.ts} | 0 .../unit/ui/button/{disabled.spec.ts => disabled-spec.ts} | 0 __tests__/unit/ui/button/{index.spec.ts => index-spec.ts} | 0 __tests__/unit/ui/icon/{index.spec.ts => index-spec.ts} | 0 __tests__/unit/ui/marker/{index.spec.ts => index-spec.ts} | 0 .../ui/marker/{parse.spec.ts => parse-marker-spec.ts} | 0 .../unit/ui/scrollbar/{index.spec.ts => index-spec.ts} | 0 __tests__/unit/ui/slider/{index.spec.ts => index-spec.ts} | 0 .../unit/ui/sparkline/{index.spec.ts => index-spec.ts} | 0 .../unit/ui/sparkline/{path.spec.ts => path-spec.ts} | 0 .../unit/ui/sparkline/{util.spec.ts => util-spec.ts} | 0 __tests__/unit/util/number-spec.ts | 8 ++++++++ __tests__/unit/util/{text.spec.ts => text-spec.ts} | 0 package.json | 2 +- src/index.ts | 2 +- src/util/index.ts | 2 +- src/util/{utils.ts => number.ts} | 0 18 files changed, 11 insertions(+), 3 deletions(-) rename __tests__/bugs/{issue-1.spec.ts => issue-1-spec.ts} (100%) rename __tests__/unit/{index.spec.ts => index-spec.ts} (100%) rename __tests__/unit/ui/button/{disabled.spec.ts => disabled-spec.ts} (100%) rename __tests__/unit/ui/button/{index.spec.ts => index-spec.ts} (100%) rename __tests__/unit/ui/icon/{index.spec.ts => index-spec.ts} (100%) rename __tests__/unit/ui/marker/{index.spec.ts => index-spec.ts} (100%) rename __tests__/unit/ui/marker/{parse.spec.ts => parse-marker-spec.ts} (100%) rename __tests__/unit/ui/scrollbar/{index.spec.ts => index-spec.ts} (100%) rename __tests__/unit/ui/slider/{index.spec.ts => index-spec.ts} (100%) rename __tests__/unit/ui/sparkline/{index.spec.ts => index-spec.ts} (100%) rename __tests__/unit/ui/sparkline/{path.spec.ts => path-spec.ts} (100%) rename __tests__/unit/ui/sparkline/{util.spec.ts => util-spec.ts} (100%) create mode 100644 __tests__/unit/util/number-spec.ts rename __tests__/unit/util/{text.spec.ts => text-spec.ts} (100%) rename src/util/{utils.ts => number.ts} (100%) diff --git a/__tests__/bugs/issue-1.spec.ts b/__tests__/bugs/issue-1-spec.ts similarity index 100% rename from __tests__/bugs/issue-1.spec.ts rename to __tests__/bugs/issue-1-spec.ts diff --git a/__tests__/unit/index.spec.ts b/__tests__/unit/index-spec.ts similarity index 100% rename from __tests__/unit/index.spec.ts rename to __tests__/unit/index-spec.ts diff --git a/__tests__/unit/ui/button/disabled.spec.ts b/__tests__/unit/ui/button/disabled-spec.ts similarity index 100% rename from __tests__/unit/ui/button/disabled.spec.ts rename to __tests__/unit/ui/button/disabled-spec.ts diff --git a/__tests__/unit/ui/button/index.spec.ts b/__tests__/unit/ui/button/index-spec.ts similarity index 100% rename from __tests__/unit/ui/button/index.spec.ts rename to __tests__/unit/ui/button/index-spec.ts diff --git a/__tests__/unit/ui/icon/index.spec.ts b/__tests__/unit/ui/icon/index-spec.ts similarity index 100% rename from __tests__/unit/ui/icon/index.spec.ts rename to __tests__/unit/ui/icon/index-spec.ts diff --git a/__tests__/unit/ui/marker/index.spec.ts b/__tests__/unit/ui/marker/index-spec.ts similarity index 100% rename from __tests__/unit/ui/marker/index.spec.ts rename to __tests__/unit/ui/marker/index-spec.ts diff --git a/__tests__/unit/ui/marker/parse.spec.ts b/__tests__/unit/ui/marker/parse-marker-spec.ts similarity index 100% rename from __tests__/unit/ui/marker/parse.spec.ts rename to __tests__/unit/ui/marker/parse-marker-spec.ts diff --git a/__tests__/unit/ui/scrollbar/index.spec.ts b/__tests__/unit/ui/scrollbar/index-spec.ts similarity index 100% rename from __tests__/unit/ui/scrollbar/index.spec.ts rename to __tests__/unit/ui/scrollbar/index-spec.ts diff --git a/__tests__/unit/ui/slider/index.spec.ts b/__tests__/unit/ui/slider/index-spec.ts similarity index 100% rename from __tests__/unit/ui/slider/index.spec.ts rename to __tests__/unit/ui/slider/index-spec.ts diff --git a/__tests__/unit/ui/sparkline/index.spec.ts b/__tests__/unit/ui/sparkline/index-spec.ts similarity index 100% rename from __tests__/unit/ui/sparkline/index.spec.ts rename to __tests__/unit/ui/sparkline/index-spec.ts diff --git a/__tests__/unit/ui/sparkline/path.spec.ts b/__tests__/unit/ui/sparkline/path-spec.ts similarity index 100% rename from __tests__/unit/ui/sparkline/path.spec.ts rename to __tests__/unit/ui/sparkline/path-spec.ts diff --git a/__tests__/unit/ui/sparkline/util.spec.ts b/__tests__/unit/ui/sparkline/util-spec.ts similarity index 100% rename from __tests__/unit/ui/sparkline/util.spec.ts rename to __tests__/unit/ui/sparkline/util-spec.ts diff --git a/__tests__/unit/util/number-spec.ts b/__tests__/unit/util/number-spec.ts new file mode 100644 index 000000000..1e19c0d81 --- /dev/null +++ b/__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); + }); +}); diff --git a/__tests__/unit/util/text.spec.ts b/__tests__/unit/util/text-spec.ts similarity index 100% rename from __tests__/unit/util/text.spec.ts rename to __tests__/unit/util/text-spec.ts diff --git a/package.json b/package.json index 24ea8653f..6646c814d 100644 --- a/package.json +++ b/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" ], diff --git a/src/index.ts b/src/index.ts index bf294f5b2..7c1d7ca2e 100644 --- a/src/index.ts +++ b/src/index.ts @@ -2,4 +2,4 @@ export * from './ui'; // 方法 -export { svg2marker, getEllipsisText, measureTextWidth } from './util'; +export { svg2marker, getEllipsisText, measureTextWidth, toPrecision } from './util'; diff --git a/src/util/index.ts b/src/util/index.ts index 4df96ee2b..12fc3e336 100644 --- a/src/util/index.ts +++ b/src/util/index.ts @@ -1,3 +1,3 @@ export { svg2marker } from './svg2marker'; export { measureTextWidth, getEllipsisText } from './text'; -export { toPrecision } from './utils'; +export { toPrecision } from './number'; diff --git a/src/util/utils.ts b/src/util/number.ts similarity index 100% rename from src/util/utils.ts rename to src/util/number.ts