diff --git a/examples/x6-example-features/src/pages/animation/1.tsx b/examples/x6-example-features/src/pages/animation/1.tsx index 683f705d723..c5f58747feb 100644 --- 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 index 2df941cde0c..10bdcdffcfd 100644 --- 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 index f5dd99eb5b6..c1a5cccc3eb 100644 --- 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 index 59b0e650b43..492d04eed57 100644 --- 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 index ce83395309c..56cbfe19d61 100644 --- 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 index 38125cd08e1..8c39fd0c8a2 100644 --- 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(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, @@ -123,6 +123,6 @@ export namespace Animation { delay?: number duration?: number timing?: Timing.Names | Timing.Definition - interpolation?: (from: T, to: T) => (time: number) => T + interp?: (from: T, to: T) => (time: number) => T } }