@maxgraph/core
Version:
maxGraph is a fully client side JavaScript diagramming library that uses SVG and HTML for rendering.
174 lines (170 loc) • 6.2 kB
JavaScript
/*
Copyright 2021-present The maxGraph project Contributors
Copyright (c) 2006-2015, JGraph Ltd
Copyright (c) 2006-2015, Gaudenz Alder
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import Point from '../geometry/Point.js';
import CellStatePreview from '../cell/CellStatePreview.js';
import Animation from './Animation.js';
/**
* Implements animation for morphing cells.
*
* Here is an example of using this class for animating the result of a layout algorithm:
*
* ```javascript
* graph.getDataModel().beginUpdate();
* try {
* const circleLayout = new CircleLayout(graph);
* circleLayout.execute(graph.getDefaultParent());
* } finally {
* const morph = new Morphing(graph);
* morph.addListener(mxEvent.DONE, () => {
* graph.getDataModel().endUpdate();
* });
*
* morph.startAnimation();
* }
* ```
*
* @category Animation
*/
class Morphing extends Animation {
/**
* Constructs an animation.
*
* @param graph Reference to the enclosing {@link AbstractGraph}.
* @param steps Optional number of steps in the morphing animation. Default is 6.
* @param ease Optional easing constant for the animation. Default is 1.5.
* @param delay Optional delay between the animation steps. Passed to {@link Animation}.
*/
constructor(graph, steps = 6, ease = 1.5, delay) {
super(delay);
/**
* Contains the current step.
*/
this.step = 0;
/**
* Optional array of cells to be animated. If this is not specified
* then all cells are checked and animated if they have been moved
* in the current transaction.
*/
this.cells = null;
this.graph = graph;
this.steps = steps;
this.ease = ease;
}
/**
* Animation step.
*/
updateAnimation() {
super.updateAnimation();
const move = new CellStatePreview(this.graph);
if (this.cells != null) {
// Animates the given cells individually without recursion
for (const cell of this.cells) {
this.animateCell(cell, move, false);
}
}
else {
// Animates all changed cells by using recursion to find
// the changed cells but not for the animation itself
this.animateCell(this.graph.getDataModel().getRoot(), move, true);
}
this.show(move);
if (move.isEmpty() || this.step++ >= this.steps) {
this.stopAnimation();
}
}
/**
* Shows the changes in the given <CellStatePreview>.
*/
show(move) {
move.show();
}
/**
* Animates the given cell state using <CellStatePreview.moveState>.
*/
animateCell(cell, move, recurse = false) {
const state = this.graph.getView().getState(cell);
let delta = null;
if (state != null) {
// Moves the animated state from where it will be after the model
// change by subtracting the given delta vector from that location
delta = this.getDelta(state);
if (cell.isVertex() && (delta.x != 0 || delta.y != 0)) {
const translate = this.graph.view.getTranslate();
const scale = this.graph.view.getScale();
delta.x += translate.x * scale;
delta.y += translate.y * scale;
move.moveState(state, -delta.x / this.ease, -delta.y / this.ease);
}
}
if (recurse && !this.stopRecursion(state, delta)) {
const childCount = cell.getChildCount();
for (let i = 0; i < childCount; i += 1) {
this.animateCell(cell.getChildAt(i), move, recurse);
}
}
}
/**
* Returns true if the animation should not recursively find more
* deltas for children if the given parent state has been animated.
*/
stopRecursion(state = null, delta = null) {
return delta != null && (delta.x != 0 || delta.y != 0);
}
/**
* Returns the vector between the current rendered state and the future
* location of the state after the display will be updated.
*/
getDelta(state) {
const origin = this.getOriginForCell(state.cell);
const translate = this.graph.getView().getTranslate();
const scale = this.graph.getView().getScale();
const x = state.x / scale - translate.x;
const y = state.y / scale - translate.y;
return new Point((origin.x - x) * scale, (origin.y - y) * scale);
}
/**
* Returns the top, left corner of the given cell. TODO: Improve performance
* by using caching inside this method as the result per cell never changes
* during the lifecycle of this object.
*/
getOriginForCell(cell = null) {
let result = null;
if (cell != null) {
const parent = cell.getParent();
const geo = cell.getGeometry();
result = this.getOriginForCell(parent);
// TODO: Handle offsets
if (geo != null && parent != null) {
if (geo.relative) {
const pgeo = parent.getGeometry();
if (pgeo != null) {
result.x += geo.x * pgeo.width;
result.y += geo.y * pgeo.height;
}
}
else {
result.x += geo.x;
result.y += geo.y;
}
}
}
if (result == null) {
const t = this.graph.view.getTranslate();
result = new Point(-t.x, -t.y);
}
return result;
}
}
export default Morphing;