diff --git a/__tests__/unit/util/style-spec.ts b/__tests__/unit/util/style-spec.ts index e9d74d07f..870026d18 100644 --- a/__tests__/unit/util/style-spec.ts +++ b/__tests__/unit/util/style-spec.ts @@ -1,9 +1,9 @@ -import { createDom } from '@antv/dom-util'; +import { createDOM } from '@antv/util'; import { applyStyleSheet } from '../../../src/util'; describe('getStyle', () => { test('applyStyleSheet', async () => { - const dom = createDom("
"); + const dom = createDOM("
"); const styleSheet = { '.a': { width: '100px', diff --git a/package.json b/package.json index 24634679a..87151899a 100644 --- a/package.json +++ b/package.json @@ -49,10 +49,9 @@ "component" ], "dependencies": { - "@antv/dom-util": "^2.0.3", "@antv/g": "^5.15.15", "@antv/scale": "^0.4.3", - "@antv/util": "^3.3.1", + "@antv/util": "^3.3.5", "svg-path-parser": "^1.1.0" }, "peerDependencies": { diff --git a/src/ui/axis/guides/labels.ts b/src/ui/axis/guides/labels.ts index 999dd97cc..de73ea300 100644 --- a/src/ui/axis/guides/labels.ts +++ b/src/ui/axis/guides/labels.ts @@ -1,5 +1,5 @@ import type { IAnimation } from '@antv/g'; -import { get, isFunction, memoize } from '@antv/util'; +import { get, isFunction } from '@antv/util'; import type { StandardAnimationOption } from '../../../animation'; import { fadeOut, onAnimateFinished, onAnimatesFinished, transition, transitionShape } from '../../../animation'; import type { DisplayObject, TextStyleProps } from '../../../shapes'; @@ -30,21 +30,18 @@ import { getFactor } from '../utils'; import { getValuePos } from './line'; import { filterExec, getCallbackStyle, getLabelVector, getLineTangentVector } from './utils'; -const angleNormalizer = (angle: number) => { +function angleNormalizer(angle: number) { let normalizedAngle = angle; while (normalizedAngle < 0) normalizedAngle += 360; return Math.round(normalizedAngle % 360); -}; +} -const getAngle = memoize( - (v1: Vector2, v2: Vector2) => { - const [x1, y1] = v1; - const [x2, y2] = v2; - const [dot, det] = [x1 * x2 + y1 * y2, x1 * y2 - y1 * x2]; - return Math.atan2(det, dot); - }, - (v1, v2) => [...v1, ...v2].join() -); +function getAngle(v1: Vector2, v2: Vector2) { + const [x1, y1] = v1; + const [x2, y2] = v2; + const [dot, det] = [x1 * x2 + y1 * y2, x1 * y2 - y1 * x2]; + return Math.atan2(det, dot); +} /** to correct label rotation to avoid inverted character */ function correctLabelRotation(_rotate: number) { diff --git a/src/ui/axis/guides/line.ts b/src/ui/axis/guides/line.ts index c02f9bae8..5639300f1 100644 --- a/src/ui/axis/guides/line.ts +++ b/src/ui/axis/guides/line.ts @@ -1,4 +1,4 @@ -import { get, memoize } from '@antv/util'; +import { get } from '@antv/util'; import type { AnimationResult, StandardAnimationOption } from '../../../animation'; import { transition } from '../../../animation'; import type { DisplayObject, Line } from '../../../shapes'; @@ -21,32 +21,23 @@ type LineDatum = { className: string; }; -export const getLinearValuePos = memoize( - (value: number, attr: RequiredLinearAxisStyleProps): Vector2 => { - const { - startPos: [sx, sy], - endPos: [ex, ey], - } = attr; - const [dx, dy] = [ex - sx, ey - sy]; - return [sx + dx * value, sy + dy * value]; - }, - (value, attr) => [value, ...attr.startPos, ...attr.endPos].join() -); +export function getLinearValuePos(value: number, attr: RequiredLinearAxisStyleProps): Vector2 { + const { + startPos: [sx, sy], + endPos: [ex, ey], + } = attr; + const [dx, dy] = [ex - sx, ey - sy]; + return [sx + dx * value, sy + dy * value]; +} -export const getArcValuePos = memoize( - (value: number, attr: RequiredArcAxisStyleProps): Vector2 => { - const { - radius, - center: [cx, cy], - } = attr; - const angle = degToRad(getLineAngle(value, attr)); - return [cx + radius * Math.cos(angle), cy + radius * Math.sin(angle)]; - }, - (value, attr: RequiredArcAxisStyleProps) => { - const { startAngle, endAngle, radius, center } = attr; - return [value, startAngle, endAngle, radius, ...center].join(); - } -); +export function getArcValuePos(value: number, attr: RequiredArcAxisStyleProps): Vector2 { + const { + radius, + center: [cx, cy], + } = attr; + const angle = degToRad(getLineAngle(value, attr)); + return [cx + radius * Math.cos(angle), cy + radius * Math.sin(angle)]; +} export function getValuePos(value: number, attr: RequiredAxisStyleProps) { if (attr.type === 'linear') return getLinearValuePos(value, attr); diff --git a/src/ui/axis/guides/ticks.ts b/src/ui/axis/guides/ticks.ts index 25f8cb871..7473d4d8f 100644 --- a/src/ui/axis/guides/ticks.ts +++ b/src/ui/axis/guides/ticks.ts @@ -1,4 +1,4 @@ -import { isFunction, memoize } from '@antv/util'; +import { isFunction } from '@antv/util'; import type { GenericAnimation, StandardAnimationOption } from '../../../animation'; import { fadeOut, onAnimateFinished, transition } from '../../../animation'; import type { Group } from '../../../shapes'; @@ -15,16 +15,13 @@ export function getTickVector(value: number, attr: RequiredAxisStyleProps): Vect return getDirectionVector(value, attr.tickDirection, attr); } -export const getTickPoints = memoize( - (unitVector: Vector2, tickLength: number) => { - const [dx, dy] = unitVector; - return [ - [0, 0], - [dx * tickLength, dy * tickLength], - ]; - }, - (unitVector, tickLength) => [...unitVector, tickLength].join() -); +export function getTickPoints(unitVector: Vector2, tickLength: number) { + const [dx, dy] = unitVector; + return [ + [0, 0], + [dx * tickLength, dy * tickLength], + ]; +} function getTickLineLayout( datum: AxisDatum, diff --git a/src/ui/axis/guides/utils.ts b/src/ui/axis/guides/utils.ts index f5d116098..5327c821b 100644 --- a/src/ui/axis/guides/utils.ts +++ b/src/ui/axis/guides/utils.ts @@ -1,4 +1,4 @@ -import { isFunction, memoize } from '@antv/util'; +import { isFunction } from '@antv/util'; import type { CallableObject, Vector2 } from '../../../types'; import { degToRad, getCallbackValue, normalize, vertical } from '../../../util'; import type { @@ -35,34 +35,23 @@ export function filterExec(data: T[], filter?: (...args: any) => boolean): T[ /** ---- to avoid cycle dependency */ -export const getLineAngle = memoize( - (value: number, attr: RequiredArcAxisStyleProps) => { - const { startAngle, endAngle } = attr; - return (endAngle - startAngle) * value + startAngle; - }, - (value, attr) => [value, attr.startAngle, attr.endAngle].join() -); - -export const getLineTangentVector = memoize( - (value: number, attr: RequiredAxisStyleProps) => { - if (attr.type === 'linear') { - const { - startPos: [startX, startY], - endPos: [endX, endY], - } = attr; - const [dx, dy] = [endX - startX, endY - startY]; - return normalize([dx, dy]); - } +export function getLineAngle(value: number, attr: RequiredArcAxisStyleProps) { + const { startAngle, endAngle } = attr; + return (endAngle - startAngle) * value + startAngle; +} - const angle = degToRad(getLineAngle(value, attr)); - return [-Math.sin(angle), Math.cos(angle)] as Vector2; - }, - (value, attr: RequiredAxisStyleProps) => { - const dependencies = baseDependencies(attr); - attr.type === 'arc' && dependencies.push(value); - return dependencies.join(); +export function getLineTangentVector(value: number, attr: RequiredAxisStyleProps) { + if (attr.type === 'linear') { + const { + startPos: [startX, startY], + endPos: [endX, endY], + } = attr; + const [dx, dy] = [endX - startX, endY - startY]; + return normalize([dx, dy]); } -); + const angle = degToRad(getLineAngle(value, attr)); + return [-Math.sin(angle), Math.cos(angle)] as Vector2; +} export function getDirectionVector(value: number, direction: Direction, attr: RequiredAxisStyleProps): Vector2 { const tangentVector = getLineTangentVector(value, attr); diff --git a/src/ui/legend/continuous.ts b/src/ui/legend/continuous.ts index e1cd3fd79..1a02416b4 100644 --- a/src/ui/legend/continuous.ts +++ b/src/ui/legend/continuous.ts @@ -1,6 +1,6 @@ import { CustomEvent } from '@antv/g'; import { Linear } from '@antv/scale'; -import { clamp, isUndefined, memoize } from '@antv/util'; +import { clamp, isUndefined } from '@antv/util'; import { Component } from '../../core'; import type { DisplayObject, TextStyleProps } from '../../shapes'; import { Group } from '../../shapes'; @@ -36,15 +36,12 @@ import { getSafetySelections, getStepValueByValue, ifHorizontal } from './utils' export type { ContinuousOptions, ContinuousStyleProps }; -const getMinMax = memoize( - (data: ContinuousDatum[]) => { - return { - min: Math.min(...data.map((d) => d.value)), - max: Math.max(...data.map((d) => d.value)), - }; - }, - (data) => data.map((d: any) => d.id) -); +function getMinMax(data: ContinuousDatum[]) { + return { + min: Math.min(...data.map((d) => d.value)), + max: Math.max(...data.map((d) => d.value)), + }; +} export class Continuous extends Component { constructor(options: ContinuousOptions) { diff --git a/src/ui/tooltip/index.ts b/src/ui/tooltip/index.ts index 805c02419..c8dfb5b27 100644 --- a/src/ui/tooltip/index.ts +++ b/src/ui/tooltip/index.ts @@ -1,5 +1,4 @@ -import { createDom } from '@antv/dom-util'; -import { substitute } from '@antv/util'; +import { substitute, createDOM } from '@antv/util'; import { Component } from '../../core'; import { Group } from '../../shapes'; import { applyStyleSheet, throttle } from '../../util'; @@ -35,7 +34,7 @@ export class Tooltip extends Component { const { data, template } = this.attributes; return data.map(({ name = '', color = 'black', index, ...rest }, idx) => { const datum = { name, color, index: index ?? idx, ...rest }; - return createDom(substitute(template.item!, datum)) as HTMLElement; + return createDOM(substitute(template.item!, datum)) as HTMLElement; }); } @@ -111,7 +110,7 @@ export class Tooltip extends Component { */ private initShape() { const { template } = this.attributes; - this.element = createDom(template.container!) as HTMLElement; + this.element = createDOM(template.container!) as HTMLElement; if (this.id) this.element.setAttribute('id', this.id); } diff --git a/src/util/text.ts b/src/util/text.ts index 0ecd507c4..c4ad254b7 100644 --- a/src/util/text.ts +++ b/src/util/text.ts @@ -17,7 +17,8 @@ export const measureTextWidth = memoize( return ctx!.measureText(content).width; }, (text: any, font?: any) => - [isString(text) ? text : text.style.text.toString(), Object.values(font || getFont(text as Text)).join()].join('') + [isString(text) ? text : text.style.text.toString(), Object.values(font || getFont(text as Text)).join()].join(''), + 4096 ); export const getFont = (textShape: Text) => {