feat: ✨ add animating

packages/x6-vector/src/animating/animator/types.ts

@@ -0,0 +1,37 @@
+import type { Morpher } from '../morpher/morpher'
+
+export type PrepareMethod<TAnimator> = (
+  this: TAnimator,
+  animator: TAnimator,
+) => any
+
+export type RunMethod<TAnimator> = (
+  this: TAnimator,
+  animator: TAnimator,
+  positionOrDelta: number,
+) => any
+
+export type RetargetMethod<TAnimator, TTarget = any, TExtra = any> = (
+  this: TAnimator,
+  animator: TAnimator,
+  target: TTarget,
+  extra: TExtra,
+) => any
+
+interface Executor<TAnimator> {
+  prepare: PrepareMethod<TAnimator>
+  run: RunMethod<TAnimator>
+  retarget?: RetargetMethod<TAnimator> | null
+  ready: boolean
+  finished: boolean
+  isTransform?: boolean
+}
+
+export type Executors<TAnimator> = Executor<TAnimator>[]
+
+export interface History<TAnimator> {
+  [method: string]: {
+    morpher: Morpher<any, any, any>
+    executor: Executor<TAnimator>
+  }
+}

packages/x6-vector/src/animating/animator/util.ts

@@ -0,0 +1,66 @@
+import type { Animator } from './index'
+import type { Primer } from '../../element/dom/primer'
+import { Options, When } from '../types'
+import { Stepper } from '../stepper/stepper'
+
+export namespace Util {
+  let id = 0
+  export function generateId() {
+    const ret = id
+    id += 1
+    return ret
+  }
+
+  export const defaults = {
+    duration: 400,
+    delay: 0,
+  }
+
+  export function sanitise(
+    duration: number | Options = defaults.duration,
+    delay: number = defaults.delay,
+    when: When = 'after',
+  ) {
+    let times = 1
+    let swing = false
+    let wait = 0
+
+    if (typeof duration === 'object' && !(duration instanceof Stepper)) {
+      const options = duration
+      // eslint-disable-next-line no-param-reassign
+      duration = duration.duration || defaults.duration
+      // eslint-disable-next-line no-param-reassign
+      delay = options.delay || delay
+      // eslint-disable-next-line no-param-reassign
+      when = options.when || when
+      swing = options.swing || swing
+      times = options.times || times
+      wait = options.wait || wait
+    }
+
+    return {
+      delay,
+      swing,
+      times,
+      wait,
+      when,
+      duration: duration as number,
+    }
+  }
+
+  export function create<TType extends typeof Animator>(
+    Type: TType,
+    element: Primer,
+    duration?: Partial<Options> | number,
+    delay?: number,
+    when?: When,
+  ) {
+    const o = sanitise(duration, delay, when)
+    const timeline = element.timeline()
+    return new Type(o.duration)
+      .loop(o)
+      .element(element)
+      .timeline(timeline.play())
+      .schedule(o.delay, o.when)
+  }
+}

packages/x6-vector/src/animating/extension/c-animator copy.ts

@@ -0,0 +1,29 @@
+// import { Point } from '../../struct/point'
+// import { Morphable } from '../morpher/morphable'
+// import { MorphableUnitNumber } from '../morpher/morphable-unit-number'
+// import { Morpher } from '../morpher/morpher'
+// import type { VectorElement } from '../../element'
+// import { HTMLAnimator } from './html-animator'
+// import { Box } from '../../struct/box'
+// import { MorphableBox } from '../morpher/morphable-box'
+
+// export class VectorAnimator<
+//   TTarget extends VectorElement = VectorElement
+// > extends VectorAnimator<TTarget> {
+
+//   update(o) {
+//     if (typeof o !== 'object') {
+//       return this.update({
+//         offset: arguments[0],
+//         color: arguments[1],
+//         opacity: arguments[2],
+//       })
+//     }
+
+//     if (o.opacity != null) this.attr('stop-opacity', o.opacity)
+//     if (o.color != null) this.attr('stop-color', o.color)
+//     if (o.offset != null) this.attr('offset', o.offset)
+
+//     return this
+//   }
+// }

packages/x6-vector/src/animating/extension/container/a.ts

@@ -0,0 +1,8 @@
+import { A } from '../../../element/container/a'
+import { SVGContainerGeometryAnimator } from './container-geometry'
+
+@SVGAAnimator.register('A')
+export class SVGAAnimator extends SVGContainerGeometryAnimator<
+  SVGAElement,
+  A
+> {}

packages/x6-vector/src/animating/extension/container/clippath.ts

@@ -0,0 +1,8 @@
+import { ClipPath } from '../../../element/container/clippath'
+import { SVGContainerAnimator } from './container'
+
+@SVGClipPathAnimator.register('ClipPath')
+export class SVGClipPathAnimator extends SVGContainerAnimator<
+  SVGClipPathElement,
+  ClipPath
+> {}

packages/x6-vector/src/animating/extension/container/container-geometry.ts

@@ -0,0 +1,7 @@
+import { GeometryContainer } from '../../../element/container/container-geometry'
+import { SVGContainerAnimator } from './container'
+
+export class SVGContainerGeometryAnimator<
+  TSVGElement extends SVGAElement | SVGGElement,
+  TTarget extends GeometryContainer<TSVGElement> = GeometryContainer<TSVGElement>
+> extends SVGContainerAnimator<TSVGElement, TTarget> {}

packages/x6-vector/src/animating/extension/container/container-viewbox.ts

@@ -0,0 +1,44 @@
+import { Point } from '../../../struct/point'
+import { Viewbox } from '../../../element/container/container-viewbox'
+import { Morpher } from '../../morpher/morpher'
+import { MorphableBox } from '../../morpher/morphable-box'
+import { SVGAnimator } from '../svg'
+
+export class SVGViewboxAnimator<
+  TSVGElement extends
+    | SVGSVGElement
+    | SVGSymbolElement
+    | SVGPatternElement
+    | SVGMarkerElement,
+  TTarget extends Viewbox<TSVGElement> = Viewbox<TSVGElement>
+> extends SVGAnimator<TSVGElement, TTarget> {
+  zoom(level: number, point: Point.PointLike) {
+    if (this.retarget('zoom', level, point)) {
+      return this
+    }
+    const origin = { x: point.x, y: point.y }
+    const morpher = new Morpher<[number], number, number>(this.stepper).to(
+      level,
+    )
+    this.queue<number, Point.PointLike>(
+      (animator) => {
+        morpher.from(animator.element().zoom())
+      },
+      (animator, pos) => {
+        animator.element().zoom(morpher.at(pos), origin)
+        return morpher.done()
+      },
+      (animator, newLevel, newPoint) => {
+        origin.x = newPoint.x
+        origin.y = newPoint.y
+        morpher.to(newLevel)
+      },
+    )
+    this.remember('zoom', morpher)
+    return this
+  }
+
+  viewbox(x: number, y: number, width: number, height: number) {
+    return this.queueObject('viewbox', new MorphableBox(x, y, width, height))
+  }
+}

packages/x6-vector/src/animating/extension/container/container.ts

@@ -0,0 +1,7 @@
+import { Container } from '../../../element/container/container'
+import { SVGAnimator } from '../svg'
+
+export class SVGContainerAnimator<
+  TSVGElement extends SVGElement,
+  TTarget extends Container<TSVGElement> = Container<TSVGElement>
+> extends SVGAnimator<TSVGElement, TTarget> {}

packages/x6-vector/src/animating/extension/container/defs.ts

@@ -0,0 +1,5 @@
+import { Defs } from '../../../element/container/defs'
+import { SVGAnimator } from '../svg'
+
+@SVGDefsAnimator.register('Defs')
+export class SVGDefsAnimator extends SVGAnimator<SVGDefsElement, Defs> {}

packages/x6-vector/src/animating/extension/container/g.ts

@@ -0,0 +1,8 @@
+import { G } from '../../../element/container/g'
+import { SVGContainerGeometryAnimator } from './container-geometry'
+
+@SVGGAnimator.register('G')
+export class SVGGAnimator extends SVGContainerGeometryAnimator<
+  SVGGElement,
+  G
+> {}

packages/x6-vector/src/animating/extension/container/gradient.ts

@@ -0,0 +1,8 @@
+import { Gradient } from '../../../element/container/gradient'
+import { SVGContainerAnimator } from './container'
+
+@SVGGradientAnimator.register('Gradient')
+export class SVGGradientAnimator extends SVGContainerAnimator<
+  SVGLinearGradientElement | SVGRadialGradientElement,
+  Gradient
+> {}

packages/x6-vector/src/animating/extension/container/marker.ts

@@ -0,0 +1,8 @@
+import { Marker } from '../../../element/container/marker'
+import { SVGViewboxAnimator } from './container-viewbox'
+
+@SVGMarkerAnimator.register('Marker')
+export class SVGMarkerAnimator extends SVGViewboxAnimator<
+  SVGMarkerElement,
+  Marker
+> {}

packages/x6-vector/src/animating/extension/container/mask.ts

@@ -0,0 +1,8 @@
+import { Mask } from '../../../element/container/mask'
+import { SVGContainerAnimator } from './container'
+
+@SVGMaskAnimator.register('Mask')
+export class SVGMaskAnimator extends SVGContainerAnimator<
+  SVGMaskElement,
+  Mask
+> {}

packages/x6-vector/src/animating/extension/container/pattern.ts

@@ -0,0 +1,8 @@
+import { Pattern } from '../../../element/container/pattern'
+import { SVGViewboxAnimator } from './container-viewbox'
+
+@SVGPatternAnimator.register('Pattern')
+export class SVGPatternAnimator extends SVGViewboxAnimator<
+  SVGPatternElement,
+  Pattern
+> {}

packages/x6-vector/src/animating/extension/container/svg.ts

@@ -0,0 +1,5 @@
+import { Svg } from '../../../element/container/svg'
+import { SVGViewboxAnimator } from './container-viewbox'
+
+@SVGSVGAnimator.register('Svg')
+export class SVGSVGAnimator extends SVGViewboxAnimator<SVGSVGElement, Svg> {}

packages/x6-vector/src/animating/extension/container/symbol.ts

@@ -0,0 +1,8 @@
+import { Symbol } from '../../../element/container/symbol'
+import { SVGViewboxAnimator } from './container-viewbox'
+
+@SVGSymbolAnimator.register('Symbol')
+export class SVGSymbolAnimator extends SVGViewboxAnimator<
+  SVGSymbolElement,
+  Symbol // eslint-disable-line
+> {}