refactor: 去除animation namespace等

Author: heshenglei

src/model/animation.ts

@@ -7,7 +7,7 @@ export class Animation {
     [path: string]: {
       startValue: any
       targetValue: any
-      options: Animation.StartOptions<any>
+      options: AnimationStartOptions<any>
     }
   } = {}
 
@@ -17,14 +17,14 @@ export class Animation {
     return Object.keys(this.ids)
   }
 
-  start<T extends Animation.TargetValue>(
+  start<T extends AnimationTargetValue>(
     path: string | string[],
     targetValue: T,
-    options: Animation.StartOptions<T> = {},
+    options: AnimationStartOptions<T> = {},
     delim = '/',
   ): () => void {
     const startValue = this.cell.getPropByPath<T>(path)
-    const localOptions = ObjectExt.defaults(options, Animation.defaultOptions)
+    const localOptions = ObjectExt.defaults(options, defaultOptions)
     const timing = this.getTiming(localOptions.timing)
     const interpolate = this.getInterp<T>(
       localOptions.interp,
@@ -45,7 +45,9 @@ export class Animation {
 
       if (
         dir === 'normal' ||
+        // alternate 时迭代次数为奇数时正向，偶数时反向
         (dir === 'alternate' && !isOdd) ||
+        // alternate-reverse 时迭代次数为 偶数时正向，奇数时反向
         (dir === 'alternate-reverse' && isOdd)
       ) {
         return timeFraction
@@ -64,27 +66,28 @@ export class Animation {
     }
 
     const iterate = () => {
-      const now = new Date().getTime()
+      const now = Date.now()
       if (startTime === 0) {
         startTime = now
       }
 
+      const { duration, iterations, fill } = localOptions
       const elapsed = now - startTime
-      const iterationIndex = Math.floor(elapsed / localOptions.duration)
-      const localTime = elapsed % localOptions.duration
-      const timeFraction = localTime / localOptions.duration
+      const iterationIndex = Math.floor(elapsed / duration)
+      const localTime = elapsed % duration
+      const timeFraction = localTime / duration
 
       let progress = calculateDirectionProgress(timeFraction, iterationIndex)
 
-      if (iterationIndex < localOptions.iterations) {
+      if (iterationIndex < iterations) {
         this.ids[key] = requestAnimationFrame(iterate)
 
         updateProgressState(progress)
       } else {
         // 动画结束
-        if (localOptions.fill === 'forwards') {
+        if (fill === 'forwards') {
           progress = calculateDirectionProgress(1, iterationIndex - 1)
-        } else if (localOptions.fill === 'none') {
+        } else if (fill === 'none') {
           progress = 0
         }
         progress = Math.round(progress)
@@ -109,12 +112,12 @@ export class Animation {
       options.start && options.start(this.getArgs<T>(key))
     }, options.delay)
 
-    return this.stop.bind(this, path, delim, options)
+    return this.stop.bind(this, path, options, delim)
   }
 
-  stop<T extends Animation.TargetValue>(
+  stop<T extends AnimationTargetValue>(
     path: string | string[],
-    options: Animation.StopOptions<T> = {},
+    options: AnimationStopOptions<T> = {},
     delim = '/',
   ) {
     const paths = Array.isArray(path) ? path : path.split(delim)
@@ -158,7 +161,7 @@ export class Animation {
     return typeof timing === 'string' ? Timing[timing] : timing
   }
 
-  private getInterp<T extends Animation.TargetValue>(
+  private getInterp<T extends AnimationTargetValue>(
     interp: Interp.Definition<any> | undefined,
     startValue: T,
     targetValue: T,
@@ -185,9 +188,9 @@ export class Animation {
     )
   }
 
-  private getArgs<T extends Animation.TargetValue>(
+  private getArgs<T extends AnimationTargetValue>(
     key: string,
-  ): Animation.CallbackArgs<T> {
+  ): AnimationCallbackArgs<T> {
     const data = this.cache[key]
     return {
       path: key,
@@ -198,75 +201,73 @@ export class Animation {
   }
 }
 
-export namespace Animation {
-  export interface BaseOptions {
-    delay: number
-    duration: number
-    timing: Timing.Names | Timing.Definition
-    iterations?: number
-    direction?: 'normal' | 'reverse' | 'alternate' | 'alternate-reverse'
-    fill?: 'none' | 'forwards'
-  }
+export interface AnimationBaseOptions {
+  delay: number
+  duration: number
+  timing: Timing.Names | Timing.Definition
+  iterations?: number
+  direction?: 'normal' | 'reverse' | 'alternate' | 'alternate-reverse'
+  fill?: 'none' | 'forwards'
+}
 
-  export type TargetValue = string | number | KeyValue<number>
+export type AnimationTargetValue = string | number | KeyValue<number>
 
-  export interface CallbackArgs<T> {
-    cell: Cell
-    path: string
-    startValue: T
-    targetValue: T
-  }
+export interface AnimationCallbackArgs<T> {
+  cell: Cell
+  path: string
+  startValue: T
+  targetValue: T
+}
 
-  export interface ProgressArgs<T> extends CallbackArgs<T> {
-    progress: number
-    currentValue: T
-  }
+export interface AnimationProgressArgs<T> extends AnimationCallbackArgs<T> {
+  progress: number
+  currentValue: T
+}
 
-  export interface StopArgs<T> extends CallbackArgs<T> {
-    jumpedToEnd?: boolean
-  }
+export interface AnimationStopArgs<T> extends AnimationCallbackArgs<T> {
+  jumpedToEnd?: boolean
+}
 
-  export interface StartOptions<T>
-    extends Partial<BaseOptions>,
-      StopOptions<T> {
-    interp?: Interp.Definition<any>
-    /**
-     * A function to call when the animation begins.
-     */
-    start?: (options: CallbackArgs<T>) => void
-    /**
-     * A function to be called after each step of the animation, only once per
-     * animated element regardless of the number of animated properties.
-     */
-    progress?: (options: ProgressArgs<T>) => void
-  }
+export interface AnimationStartOptions<T>
+  extends Partial<AnimationBaseOptions>,
+    AnimationStopOptions<T> {
+  interp?: Interp.Definition<any>
+  /**
+   * A function to call when the animation begins.
+   */
+  start?: (options: AnimationCallbackArgs<T>) => void
+  /**
+   * A function to be called after each step of the animation, only once per
+   * animated element regardless of the number of animated properties.
+   */
+  progress?: (options: AnimationProgressArgs<T>) => void
+}
 
-  export interface StopOptions<T> {
-    /**
-     * A Boolean indicating whether to complete the animation immediately.
-     * Defaults to `false`.
-     */
-    jumpedToEnd?: boolean
-    /**
-     * A function that is called once the animation completes.
-     */
-    complete?: (options: CallbackArgs<T>) => void
-    /**
-     * A function to be called when the animation stops.
-     */
-    stop?: (options: StopArgs<T>) => void
-    /**
-     * A function to be called when the animation completes or stops.
-     */
-    finish?: (options: CallbackArgs<T>) => void
-  }
+export interface AnimationStopOptions<T> {
+  /**
+   * A Boolean indicating whether to complete the animation immediately.
+   * Defaults to `false`.
+   */
+  jumpedToEnd?: boolean
+  /**
+   * A function that is called once the animation completes.
+   */
+  complete?: (options: AnimationCallbackArgs<T>) => void
+  /**
+   * A function to be called when the animation stops.
+   */
+  stop?: (options: AnimationStopArgs<T>) => void
+  /**
+   * A function to be called when the animation completes or stops.
+   */
+  finish?: (options: AnimationCallbackArgs<T>) => void
+}
 
-  export const defaultOptions: BaseOptions = {
-    delay: 10,
-    duration: 100,
-    timing: 'linear',
-    iterations: 1,
-    direction: 'normal',
-    fill: 'none',
-  }
+export const defaultOptions: AnimationBaseOptions = {
+  delay: 10,
+  duration: 100,
+  timing: 'linear',
+  iterations: 1,
+  direction: 'normal',
+  fill: 'none',
 }

src/model/cell.ts

@@ -21,7 +21,15 @@ import {
 } from '../registry'
 import type { CellView } from '../view'
 import type { MarkupType } from '../view/markup'
-import { Animation } from './animation'
+import {
+  Animation,
+  type AnimationCallbackArgs,
+  type AnimationProgressArgs,
+  type AnimationStartOptions,
+  type AnimationStopArgs,
+  type AnimationStopOptions,
+  type AnimationTargetValue,
+} from './animation'
 import type { Edge } from './edge'
 import type { Model } from './model'
 import type { Node } from './node'
@@ -1092,19 +1100,19 @@ export class Cell<
   transition<K extends keyof Properties>(
     path: K,
     target: Properties[K],
-    options?: Animation.StartOptions<Properties[K]>,
+    options?: AnimationStartOptions<Properties[K]>,
     delim?: string,
   ): () => void
-  transition<T extends Animation.TargetValue>(
+  transition<T extends AnimationTargetValue>(
     path: string | string[],
     target: T,
-    options?: Animation.StartOptions<T>,
+    options?: AnimationStartOptions<T>,
     delim?: string,
   ): () => void
-  transition<T extends Animation.TargetValue>(
+  transition<T extends AnimationTargetValue>(
     path: string | string[],
     target: T,
-    options: Animation.StartOptions<T> = {},
+    options: AnimationStartOptions<T> = {},
     delim = '/',
   ) {
     return this.animation.start(
@@ -1118,9 +1126,9 @@ export class Cell<
     )
   }
 
-  stopTransition<T extends Animation.TargetValue>(
+  stopTransition<T extends AnimationTargetValue>(
     path: string | string[],
-    options?: Animation.StopOptions<T>,
+    options?: AnimationStopOptions<T>,
     delim = '/',
   ) {
     this.animation.stop(path, options, delim)
@@ -1604,11 +1612,11 @@ export namespace Cell {
 
 export namespace Cell {
   export interface EventArgs {
-    'transition:start': Animation.CallbackArgs<Animation.TargetValue>
-    'transition:progress': Animation.ProgressArgs<Animation.TargetValue>
-    'transition:complete': Animation.CallbackArgs<Animation.TargetValue>
-    'transition:stop': Animation.StopArgs<Animation.TargetValue>
-    'transition:finish': Animation.CallbackArgs<Animation.TargetValue>
+    'transition:start': AnimationCallbackArgs<AnimationTargetValue>
+    'transition:progress': AnimationProgressArgs<AnimationTargetValue>
+    'transition:complete': AnimationCallbackArgs<AnimationTargetValue>
+    'transition:stop': AnimationStopArgs<AnimationTargetValue>
+    'transition:finish': AnimationCallbackArgs<AnimationTargetValue>
 
     // common
     'change:*': ChangeAnyKeyArgs

src/model/node.ts

@@ -10,7 +10,7 @@ import {
 import { Angle, Point, Rectangle } from '../geometry'
 import { Registry } from '../registry/registry'
 import { Markup, type MarkupType } from '../view/markup'
-import type { Animation } from './animation'
+import type { AnimationStartOptions } from './animation'
 import { Cell } from './cell'
 import type { Edge } from './edge'
 import { PortManager } from './port'
@@ -1036,7 +1036,7 @@ export namespace Node {
   }
 
   export interface TranslateOptions extends Cell.TranslateOptions {
-    transition?: boolean | Animation.StartOptions<Point.PointLike>
+    transition?: boolean | AnimationStartOptions<Point.PointLike>
     restrict?: Rectangle.RectangleLike | null
     exclude?: Cell[]
   }