fix: animation examples

antvis · Jun 1, 2020 · e439f5b · e439f5b
1 parent 23fb270
commit e439f5b
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 25 deletions.
diff --git a/examples/x6-example-features/src/pages/animation/1.tsx b/examples/x6-example-features/src/pages/animation/1.tsx
@@ -10,7 +10,7 @@ export default class Example extends React.Component {
       container: this.container,
       width: 650,
       height: 400,
-      gridSize: 1,
+      grid: 1,
     })
 
     const ball = graph.addNode({
@@ -50,7 +50,7 @@ export default class Example extends React.Component {
     ball.transition('attrs/body/fill', '#FFFF00', {
       delay: 3000,
       duration: 500,
-      interpolate: Interpolation.color,
+      interp: Interp.color,
     })
 
     ball.transition(
@@ -60,7 +60,7 @@ export default class Example extends React.Component {
         delay: 5000,
         duration: 2000,
         easing: 'easeInBounce',
-        interpolation: (
+        interp: (
           start: { text: String; fontSize: number },
           end: { text: String; fontSize: number },
         ) => {
@@ -95,7 +95,7 @@ export default class Example extends React.Component {
       cell.transition('position', 20, {
         delay: 0,
         duration: 5000,
-        interpolation: function (a: Point.PointLike, b: number) {
+        interp: function (a: Point.PointLike, b: number) {
           return function (t: number) {
             return {
               x: a.x + 10 * b * (Math.cos(t * 2 * Math.PI) - 1),

diff --git a/examples/x6-example-features/src/pages/animation/2.tsx b/examples/x6-example-features/src/pages/animation/2.tsx
@@ -13,7 +13,7 @@ class BallView extends NodeView {
       delay: (1 + Math.random()) * 3000,
       duration: 3000,
       timing: 'inout',
-      interpolation: function (a: number, b: number) {
+      interp: function (a: number, b: number) {
         return function (t: number) {
           return a + b * (1 - Math.abs(1 - 2 * t))
         }
@@ -67,7 +67,7 @@ class BallView extends NodeView {
 
     this.cell.transition('position', options, {
       duration: 100 * flightTime,
-      interpolation(
+      interp(
         position: Point.PointLike,
         params: { speed: number; angle: number },
       ) {
@@ -131,11 +131,8 @@ class BallView extends NodeView {
         this.graph.options.width,
         this.graph.options.height,
       )
-      const interpolation = Interp.color('#ffffff', '#ff0000')
-      edge.attr(
-        'line/targetMarker/fill',
-        interpolation(dist / maxDist / Math.sqrt(2)),
-      )
+      const interp = Interp.color('#ffffff', '#ff0000')
+      edge.attr('line/targetMarker/fill', interp(dist / maxDist / Math.sqrt(2)))
     })
   }
 

diff --git a/examples/x6-example-features/src/pages/embed/nested.tsx b/examples/x6-example-features/src/pages/embed/nested.tsx
@@ -10,7 +10,7 @@ export default class Example extends React.Component {
       container: this.container,
       width: 800,
       height: 600,
-      gridSize: 10,
+      grid: 10,
     })
 
     const r1 = graph.addNode({

diff --git a/examples/x6-example-features/src/pages/expand/index.tsx b/examples/x6-example-features/src/pages/expand/index.tsx
@@ -157,14 +157,16 @@ export default class Example extends React.Component {
       width: 800,
       height: 600,
       grid: 1,
-      defaultConnectionPoint: { name: 'boundary' },
+      connecting: {
+        connectionPoint: 'boundary',
+        validateMagnet: function (cellView: CellView, magnet: Element) {
+          var cell = (cellView.cell as any) as TogglableRect
+          var portId = magnet.getAttribute('port')
+          return portId ? !cell.isPortCollapsed(portId) : true
+        },
+      },
       magnetThreshold: 'onleave',
       clickThreshold: 5,
-      validateMagnet: function (cellView: CellView, magnet: Element) {
-        var cell = (cellView.cell as any) as TogglableRect
-        var portId = magnet.getAttribute('port')
-        return portId ? !cell.isPortCollapsed(portId) : true
-      },
     })
 
     graph.on('node:click', ({ view }) => {

diff --git a/examples/x6-example-features/src/pages/fta/index.tsx b/examples/x6-example-features/src/pages/fta/index.tsx
@@ -18,10 +18,15 @@ export default class Example extends React.Component {
       container: this.container,
       width: 1000,
       height: 800,
+      connecting: {
+        connectionPoint: {
+          name: 'boundary',
+          args: { extrapolate: true },
+        },
+        connector: 'rounded',
+        router: 'orth',
+      },
       sorting: 'approx',
-      defaultConnectionPoint: { name: 'boundary', args: { extrapolate: true } },
-      defaultConnector: { name: 'rounded' },
-      defaultRouter: { name: 'orth' },
       async: true,
       interactive: false,
       frozen: true,

diff --git a/packages/x6/src/model/animation.ts b/packages/x6/src/model/animation.ts
@@ -35,12 +35,12 @@ export class Animation {
     }
 
     const current = this.cell.getPropByPath<T>(path)
-    const interpolation = localOptions.interpolation
+    const interp = localOptions.interp
 
     let interpolate: any
 
-    if (interpolation) {
-      interpolate = interpolation(current, target)
+    if (interp) {
+      interpolate = interp(current, target)
     } else if (typeof target === 'object') {
       interpolate = Interp.object(
         current as KeyValue<number>,
@@ -123,6 +123,6 @@ export namespace Animation {
     delay?: number
     duration?: number
     timing?: Timing.Names | Timing.Definition
-    interpolation?: <T>(from: T, to: T) => (time: number) => T
+    interp?: <T>(from: T, to: T) => (time: number) => T
   }
 }