From 49880e3dee1122833bfae879a990cf1af63679aa Mon Sep 17 00:00:00 2001 From: Aaron Date: Thu, 17 Oct 2024 10:26:44 +0800 Subject: [PATCH] refactor: simplify CSSProperty --- packages/g-lite/src/css/CSSProperty.ts | 12 +---- .../g-lite/src/css/parser/transform-origin.ts | 45 +------------------ .../src/css/properties/CSSPropertyAngle.ts | 10 +---- .../src/css/properties/CSSPropertyColor.ts | 1 - .../src/css/properties/CSSPropertyFilter.ts | 3 -- .../CSSPropertyLengthOrPercentage.ts | 8 ---- .../src/css/properties/CSSPropertyNumber.ts | 9 +--- .../properties/CSSPropertyOffsetDistance.ts | 10 +---- .../src/css/properties/CSSPropertyOpacity.ts | 10 +---- .../src/css/properties/CSSPropertyPath.ts | 1 - .../src/css/properties/CSSPropertyPoints.ts | 4 +- .../css/properties/CSSPropertyTransform.ts | 10 +---- .../properties/CSSPropertyTransformOrigin.ts | 7 --- .../src/css/properties/CSSPropertyZIndex.ts | 3 -- .../src/utils/interpolation.ts | 2 +- 15 files changed, 10 insertions(+), 125 deletions(-) diff --git a/packages/g-lite/src/css/CSSProperty.ts b/packages/g-lite/src/css/CSSProperty.ts index 93de9ca334..2e57f56709 100644 --- a/packages/g-lite/src/css/CSSProperty.ts +++ b/packages/g-lite/src/css/CSSProperty.ts @@ -41,17 +41,7 @@ export interface CSSProperty { * '10px' -> CSS.px(10) * '180deg' -> CSS.deg(180) */ - parser: CSSPropertyParser; - - /** - * Don't use memoize, eg. during animation. - */ - parserUnmemoize: CSSPropertyParser; - - /** - * Ignore CSS syntax. - */ - parserWithCSSDisabled: CSSPropertyParser; + parser?: CSSPropertyParser; /** * convert parsed value to used value. diff --git a/packages/g-lite/src/css/parser/transform-origin.ts b/packages/g-lite/src/css/parser/transform-origin.ts index be3e1977d0..63c4ca08ab 100644 --- a/packages/g-lite/src/css/parser/transform-origin.ts +++ b/packages/g-lite/src/css/parser/transform-origin.ts @@ -1,10 +1,7 @@ import { isString } from '@antv/util'; import type { CSSUnitValue } from '../cssom'; import { getOrCreateUnitValue } from '../CSSStyleValuePool'; -import { - parseLengthOrPercentage, - parseLengthOrPercentageUnmemoize, -} from './dimension'; +import { parseLengthOrPercentage } from './dimension'; import { memoize } from '../../utils/memoize'; /** @@ -51,46 +48,6 @@ export const parseTransformOrigin = memoize( } }, ); -export const parseTransformOriginUnmemoize = ( - value: string | number[], -): [CSSUnitValue, CSSUnitValue] => { - if (isString(value)) { - if (value === 'text-anchor') { - return [getOrCreateUnitValue(0, 'px'), getOrCreateUnitValue(0, 'px')]; - } - - const values = value.split(' '); - if (values.length === 1) { - if (values[0] === 'top' || values[0] === 'bottom') { - // 'top' -> 'center top' - values[1] = values[0]; - values[0] = 'center'; - } else { - // '50px' -> '50px center' - values[1] = 'center'; - } - } - - if (values.length !== 2) { - return null; - } - - // eg. center bottom - return [ - parseLengthOrPercentageUnmemoize( - convertKeyword2Percent(values[0]), - ) as CSSUnitValue, - parseLengthOrPercentageUnmemoize( - convertKeyword2Percent(values[1]), - ) as CSSUnitValue, - ]; - } else { - return [ - getOrCreateUnitValue(value[0] || 0, 'px'), - getOrCreateUnitValue(value[1] || 0, 'px'), - ]; - } -}; function convertKeyword2Percent(keyword: string) { if (keyword === 'center') { diff --git a/packages/g-lite/src/css/properties/CSSPropertyAngle.ts b/packages/g-lite/src/css/properties/CSSPropertyAngle.ts index 4ad7198f27..30f7d6667c 100644 --- a/packages/g-lite/src/css/properties/CSSPropertyAngle.ts +++ b/packages/g-lite/src/css/properties/CSSPropertyAngle.ts @@ -2,18 +2,10 @@ import type { DisplayObject } from '../../display-objects'; import type { CSSUnitValue } from '../cssom'; import type { CSSProperty } from '../CSSProperty'; import { mergeNumbers } from '../parser'; -import { - convertAngleUnit, - parseAngle, - parseAngleUnmemoize, -} from '../parser/dimension'; +import { convertAngleUnit } from '../parser/dimension'; export class CSSPropertyAngle implements Partial> { - parser = parseAngle; - parserUnmemoize = parseAngleUnmemoize; - parserWithCSSDisabled = null; - mixer = mergeNumbers; calculator( diff --git a/packages/g-lite/src/css/properties/CSSPropertyColor.ts b/packages/g-lite/src/css/properties/CSSPropertyColor.ts index d94d912f4f..3ac87e73a0 100644 --- a/packages/g-lite/src/css/properties/CSSPropertyColor.ts +++ b/packages/g-lite/src/css/properties/CSSPropertyColor.ts @@ -16,7 +16,6 @@ export class CSSPropertyColor > { parser = parseColor; - parserWithCSSDisabled = parseColor; calculator( name: string, oldParsed: CSSRGB | CSSGradientValue[] | CSSKeywordValue | Pattern, diff --git a/packages/g-lite/src/css/properties/CSSPropertyFilter.ts b/packages/g-lite/src/css/properties/CSSPropertyFilter.ts index ccde70bdbe..f1f9dbb79f 100644 --- a/packages/g-lite/src/css/properties/CSSPropertyFilter.ts +++ b/packages/g-lite/src/css/properties/CSSPropertyFilter.ts @@ -1,7 +1,6 @@ import { CSSKeywordValue } from '../cssom'; import type { CSSProperty } from '../CSSProperty'; import type { ParsedFilterStyleProperty } from '../parser'; -import { parseFilter } from '../parser/filter'; export class CSSPropertyFilter implements @@ -9,8 +8,6 @@ export class CSSPropertyFilter CSSProperty > { - parser = parseFilter; - calculator( name: string, oldParsed: ParsedFilterStyleProperty[], diff --git a/packages/g-lite/src/css/properties/CSSPropertyLengthOrPercentage.ts b/packages/g-lite/src/css/properties/CSSPropertyLengthOrPercentage.ts index b900579fc1..242b4b20e3 100644 --- a/packages/g-lite/src/css/properties/CSSPropertyLengthOrPercentage.ts +++ b/packages/g-lite/src/css/properties/CSSPropertyLengthOrPercentage.ts @@ -7,10 +7,6 @@ import type { GlobalRuntime } from '../../global-runtime'; import type { CSSProperty } from '../CSSProperty'; import { CSSUnitValue, UnitType } from '../cssom'; import { mergeNumbers } from '../parser'; -import { - parseLengthOrPercentage, - parseLengthOrPercentageUnmemoize, -} from '../parser/dimension'; function getFontSize(object: DisplayObject): number { const { fontSize } = object.parsedStyle as ParsedTextStyleProps; @@ -23,10 +19,6 @@ function getFontSize(object: DisplayObject): number { export class CSSPropertyLengthOrPercentage implements Partial> { - parser = parseLengthOrPercentage; - parserUnmemoize = parseLengthOrPercentageUnmemoize; - parserWithCSSDisabled = null; - mixer = mergeNumbers; /** diff --git a/packages/g-lite/src/css/properties/CSSPropertyNumber.ts b/packages/g-lite/src/css/properties/CSSPropertyNumber.ts index 8d3b6217f5..c87755db8f 100644 --- a/packages/g-lite/src/css/properties/CSSPropertyNumber.ts +++ b/packages/g-lite/src/css/properties/CSSPropertyNumber.ts @@ -1,18 +1,11 @@ import type { CSSUnitValue } from '../cssom'; import type { CSSProperty } from '../CSSProperty'; -import { - mergeNumbers, - parseNumber, - parseNumberUnmemoize, -} from '../parser/numeric'; +import { mergeNumbers } from '../parser/numeric'; export class CSSPropertyNumber implements Partial> { mixer = mergeNumbers; - parser = parseNumber; - parserUnmemoize = parseNumberUnmemoize; - parserWithCSSDisabled = null; calculator( name: string, oldParsed: CSSUnitValue, diff --git a/packages/g-lite/src/css/properties/CSSPropertyOffsetDistance.ts b/packages/g-lite/src/css/properties/CSSPropertyOffsetDistance.ts index 1d276676d7..fc21ad5f93 100644 --- a/packages/g-lite/src/css/properties/CSSPropertyOffsetDistance.ts +++ b/packages/g-lite/src/css/properties/CSSPropertyOffsetDistance.ts @@ -2,18 +2,10 @@ import { Shape } from '../../types'; import type { DisplayObject } from '../../display-objects'; import type { CSSUnitValue } from '../cssom'; import type { CSSProperty } from '../CSSProperty'; -import { - clampedMergeNumbers, - parseNumber, - parseNumberUnmemoize, -} from '../parser/numeric'; +import { clampedMergeNumbers } from '../parser/numeric'; export class CSSPropertyOffsetDistance implements Partial> { - parser = parseNumber; - parserUnmemoize = parseNumberUnmemoize; - parserWithCSSDisabled = null; - calculator( name: string, oldParsed: CSSUnitValue, diff --git a/packages/g-lite/src/css/properties/CSSPropertyOpacity.ts b/packages/g-lite/src/css/properties/CSSPropertyOpacity.ts index 2950e6f758..bd1facc253 100644 --- a/packages/g-lite/src/css/properties/CSSPropertyOpacity.ts +++ b/packages/g-lite/src/css/properties/CSSPropertyOpacity.ts @@ -1,10 +1,6 @@ import type { CSSUnitValue } from '../cssom'; import type { CSSProperty } from '../CSSProperty'; -import { - clampedMergeNumbers, - parseNumber, - parseNumberUnmemoize, -} from '../parser/numeric'; +import { clampedMergeNumbers } from '../parser/numeric'; /** * opacity @@ -12,10 +8,6 @@ import { export class CSSPropertyOpacity implements Partial> { - parser = parseNumber; - parserUnmemoize = parseNumberUnmemoize; - parserWithCSSDisabled = null; - calculator( name: string, oldParsed: CSSUnitValue, diff --git a/packages/g-lite/src/css/properties/CSSPropertyPath.ts b/packages/g-lite/src/css/properties/CSSPropertyPath.ts index 060280061c..38a9775e70 100644 --- a/packages/g-lite/src/css/properties/CSSPropertyPath.ts +++ b/packages/g-lite/src/css/properties/CSSPropertyPath.ts @@ -13,7 +13,6 @@ export class CSSPropertyPath * path2Curve */ parser = parsePath; - parserWithCSSDisabled = parsePath; calculator( name: string, diff --git a/packages/g-lite/src/css/properties/CSSPropertyPoints.ts b/packages/g-lite/src/css/properties/CSSPropertyPoints.ts index cfee6f4dbd..6a70d21c51 100644 --- a/packages/g-lite/src/css/properties/CSSPropertyPoints.ts +++ b/packages/g-lite/src/css/properties/CSSPropertyPoints.ts @@ -1,5 +1,5 @@ import type { CSSProperty } from '../CSSProperty'; -import { parsePoints, mergePoints } from '../parser/points'; +import { mergePoints } from '../parser/points'; export class CSSPropertyPoints implements @@ -18,7 +18,5 @@ export class CSSPropertyPoints > > { - parser = parsePoints; - mixer = mergePoints; } diff --git a/packages/g-lite/src/css/properties/CSSPropertyTransform.ts b/packages/g-lite/src/css/properties/CSSPropertyTransform.ts index a5780deba0..380726e74c 100644 --- a/packages/g-lite/src/css/properties/CSSPropertyTransform.ts +++ b/packages/g-lite/src/css/properties/CSSPropertyTransform.ts @@ -4,11 +4,7 @@ import { parsedTransformToMat4 } from '../../utils'; import { CSSKeywordValue } from '../cssom'; import type { CSSProperty } from '../CSSProperty'; import type { ParsedTransform } from '../parser/transform'; -import { - mergeTransforms, - parseTransform, - parseTransformUnmemoize, -} from '../parser/transform'; +import { mergeTransforms, parseTransformUnmemoize } from '../parser/transform'; /** * @see /zh/docs/api/animation#支持变换的属性 @@ -46,9 +42,7 @@ export class CSSPropertyTransform CSSProperty > { - parser = parseTransform; - parserUnmemoize = parseTransformUnmemoize; - parserWithCSSDisabled = parseTransformUnmemoize; + parser = parseTransformUnmemoize; calculator( name: string, diff --git a/packages/g-lite/src/css/properties/CSSPropertyTransformOrigin.ts b/packages/g-lite/src/css/properties/CSSPropertyTransformOrigin.ts index 6f55358a63..86266576bf 100644 --- a/packages/g-lite/src/css/properties/CSSPropertyTransformOrigin.ts +++ b/packages/g-lite/src/css/properties/CSSPropertyTransformOrigin.ts @@ -2,10 +2,6 @@ import { DisplayObject } from '../../display-objects'; import { ParsedBaseStyleProps } from '../../types'; import { UnitType, type CSSUnitValue } from '../cssom'; import type { CSSProperty } from '../CSSProperty'; -import { - parseTransformOrigin, - parseTransformOriginUnmemoize, -} from '../parser/transform-origin'; /** * @see https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-origin @@ -18,9 +14,6 @@ export class CSSPropertyTransformOrigin CSSProperty<[CSSUnitValue, CSSUnitValue], [CSSUnitValue, CSSUnitValue]> > { - parser = parseTransformOrigin; - parserUnmemoize = parseTransformOriginUnmemoize; - postProcessor(object: DisplayObject) { const { transformOrigin } = object.parsedStyle as ParsedBaseStyleProps; if ( diff --git a/packages/g-lite/src/css/properties/CSSPropertyZIndex.ts b/packages/g-lite/src/css/properties/CSSPropertyZIndex.ts index 9bed044317..7908e1612b 100644 --- a/packages/g-lite/src/css/properties/CSSPropertyZIndex.ts +++ b/packages/g-lite/src/css/properties/CSSPropertyZIndex.ts @@ -2,13 +2,10 @@ import { SortReason } from '../../components'; import type { DisplayObject } from '../../display-objects'; import type { CSSUnitValue } from '../cssom'; import type { CSSProperty } from '../CSSProperty'; -import { parseNumber, parseNumberUnmemoize } from '../parser/numeric'; export class CSSPropertyZIndex implements Partial> { - parser = parseNumber; - parserUnmemoize = parseNumberUnmemoize; calculator( name: string, oldParsed: CSSUnitValue, diff --git a/packages/g-web-animations-api/src/utils/interpolation.ts b/packages/g-web-animations-api/src/utils/interpolation.ts index 48f9ba637a..794300700d 100644 --- a/packages/g-web-animations-api/src/utils/interpolation.ts +++ b/packages/g-web-animations-api/src/utils/interpolation.ts @@ -198,7 +198,7 @@ function propertyInterpolation( ); if (propertyHandler) { - const parser = propertyHandler.parserWithCSSDisabled; + const parser = propertyHandler.parser; const usedLeft = parser ? parser(left, target) : left; const usedRight = parser ? parser(right, target) : right;