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 69% rename from __tests__/unit/ui/marker/index.spec.ts rename to __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-marker-spec.ts b/__tests__/unit/ui/marker/parse-marker-spec.ts new file mode 100644 index 000000000..c0d833183 --- /dev/null +++ b/__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'); + }); +}); 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/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', }, }); 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/ui/marker/index.ts b/src/ui/marker/index.ts index 4aaff13c4..76b42920a 100644 --- a/src/ui/marker/index.ts +++ b/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 { attrs: { x: 0, y: 0, - r: 16, + size: 16, }, }; @@ -74,7 +74,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 +94,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 +107,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 +118,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; +} diff --git a/src/util/index.ts b/src/util/index.ts index 7196da897..e97d8370b 100644 --- a/src/util/index.ts +++ b/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'; + 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