refactor: simplify CSSProperty

antvis · Oct 17, 2024 · 6c69975 · 6c69975
1 parent 631715f
commit 6c69975
Show file tree

Hide file tree

Showing 17 changed files with 12 additions and 173 deletions.
diff --git a/packages/g-lite/src/css/CSSProperty.ts b/packages/g-lite/src/css/CSSProperty.ts
@@ -41,17 +41,7 @@ export interface CSSProperty<Parsed, Used> {
    * '10px' -> CSS.px(10)
    * '180deg' -> CSS.deg(180)
    */
-  parser: CSSPropertyParser<Parsed>;
-
-  /**
-   * Don't use memoize, eg. during animation.
-   */
-  parserUnmemoize: CSSPropertyParser<Parsed>;
-
-  /**
-   * Ignore CSS syntax.
-   */
-  parserWithCSSDisabled: CSSPropertyParser<Parsed>;
+  parser?: CSSPropertyParser<Parsed>;
 
   /**
    * 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
@@ -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
@@ -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<CSSProperty<CSSUnitValue, number>>
 {
-  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
@@ -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
@@ -1,16 +1,13 @@
 import { CSSKeywordValue } from '../cssom';
 import type { CSSProperty } from '../CSSProperty';
 import type { ParsedFilterStyleProperty } from '../parser';
-import { parseFilter } from '../parser/filter';
 
 export class CSSPropertyFilter
   implements
     Partial<
       CSSProperty<ParsedFilterStyleProperty[], ParsedFilterStyleProperty[]>
     >
 {
-  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
@@ -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<CSSProperty<CSSUnitValue, number>>
 {
-  parser = parseLengthOrPercentage;
-  parserUnmemoize = parseLengthOrPercentageUnmemoize;
-  parserWithCSSDisabled = null;
-
   mixer = mergeNumbers;
 
   /**

diff --git a/packages/g-lite/src/css/properties/CSSPropertyLengthOrPercentage12.ts b/packages/g-lite/src/css/properties/CSSPropertyLengthOrPercentage12.ts
@@ -1,8 +1,6 @@
-import { isNumber } from '@antv/util';
 import type { CSSUnitValue } from '../cssom';
 import type { CSSProperty } from '../CSSProperty';
 import { mergeNumberLists } from '../parser';
-import { parseDimensionArray } from '../parser/dimension';
 
 /**
  * format to Tuple2<CSSUnitValue>
@@ -13,21 +11,9 @@ import { parseDimensionArray } from '../parser/dimension';
  * rect.style.lineDash = '10 10';
  */
 export class CSSPropertyLengthOrPercentage12
-  implements Partial<CSSProperty<[CSSUnitValue, CSSUnitValue], [number, number]>>
+  implements
+    Partial<CSSProperty<[CSSUnitValue, CSSUnitValue], [number, number]>>
 {
-  parser(radius: string | number | number[]) {
-    const parsed = parseDimensionArray(isNumber(radius) ? [radius] : radius);
-
-    let formatted: [CSSUnitValue, CSSUnitValue];
-    if (parsed.length === 1) {
-      formatted = [parsed[0], parsed[0]];
-    } else {
-      formatted = [parsed[0], parsed[1]];
-    }
-
-    return formatted;
-  }
-
   calculator(
     name: string,
     oldParsed: [CSSUnitValue, CSSUnitValue],

diff --git a/packages/g-lite/src/css/properties/CSSPropertyLengthOrPercentage14.ts b/packages/g-lite/src/css/properties/CSSPropertyLengthOrPercentage14.ts
@@ -1,8 +1,6 @@
-import { isNumber } from '@antv/util';
 import type { CSSUnitValue } from '../cssom';
 import type { CSSProperty } from '../CSSProperty';
 import { mergeNumberLists } from '../parser';
-import { parseDimensionArray } from '../parser/dimension';
 
 /**
  * used in rounded rect
@@ -21,24 +19,6 @@ export class CSSPropertyLengthOrPercentage14
       >
     >
 {
-  parser(radius: string | number | number[]) {
-    const parsed = parseDimensionArray(isNumber(radius) ? [radius] : radius);
-
-    let formatted: [CSSUnitValue, CSSUnitValue, CSSUnitValue, CSSUnitValue];
-    // format to Tuple<CSSUnitValue>
-    if (parsed.length === 1) {
-      formatted = [parsed[0], parsed[0], parsed[0], parsed[0]];
-    } else if (parsed.length === 2) {
-      formatted = [parsed[0], parsed[1], parsed[0], parsed[1]];
-    } else if (parsed.length === 3) {
-      formatted = [parsed[0], parsed[1], parsed[2], parsed[1]];
-    } else {
-      formatted = [parsed[0], parsed[1], parsed[2], parsed[3]];
-    }
-
-    return formatted;
-  }
-
   calculator(
     name: string,
     oldParsed: [CSSUnitValue, CSSUnitValue, CSSUnitValue, CSSUnitValue],

diff --git 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<CSSProperty<CSSUnitValue, number>>
 {
   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
@@ -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<CSSProperty<CSSUnitValue, number>>
 {
-  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
@@ -1,21 +1,13 @@
 import type { CSSUnitValue } from '../cssom';
 import type { CSSProperty } from '../CSSProperty';
-import {
-  clampedMergeNumbers,
-  parseNumber,
-  parseNumberUnmemoize,
-} from '../parser/numeric';
+import { clampedMergeNumbers } from '../parser/numeric';
 
 /**
  * opacity
  */
 export class CSSPropertyOpacity
   implements Partial<CSSProperty<CSSUnitValue, number>>
 {
-  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
@@ -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
@@ -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
@@ -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<CSSKeywordValue | ParsedTransform[], ParsedTransform[]>
     >
 {
-  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
@@ -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
@@ -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<CSSProperty<CSSUnitValue, number>>
 {
-  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
@@ -180,25 +180,13 @@ function propertyInterpolation(
 ) {
   const metadata = propertyMetadataCache[property];
 
-  // discrete step
-  // if (property === 'visibility') {
-  //   return function (t: number) {
-  //     if (t === 0) return left;
-  //     if (t === 1) return right;
-
-  //     debugger;
-
-  //     return t < 0.5 ? left : right;
-  //   };
-  // }
-
   if (metadata && metadata.syntax && metadata.int) {
     const propertyHandler = runtime.styleValueRegistry.getPropertySyntax(
       metadata.syntax,
     );
 
     if (propertyHandler) {
-      const parser = propertyHandler.parserWithCSSDisabled;
+      const parser = propertyHandler.parser;
       const usedLeft = parser ? parser(left, target) : left;
       const usedRight = parser ? parser(right, target) : right;