jointjs
Version:
JavaScript diagramming library
1,395 lines (1,199 loc) • 95.9 kB
JavaScript
import V from '../V/index.mjs';
import {
isNumber,
assign,
nextFrame,
isObject,
cancelFrame,
defaults,
defaultsDeep,
addClassNamePrefix,
normalizeSides,
isFunction,
isPlainObject,
getByPath,
sortElements,
isString,
normalizeEvent,
omit,
result,
merge,
camelCase,
cloneDeep,
invoke,
hashCode,
filter as _filter,
template,
toArray,
has
} from '../util/index.mjs';
import { Rect, Point, toRad } from '../g/index.mjs';
import { View, views } from '../mvc/index.mjs';
import { CellView } from './CellView.mjs';
import { ElementView } from './ElementView.mjs';
import { LinkView } from './LinkView.mjs';
import { Link } from './Link.mjs';
import { Cell } from './Cell.mjs';
import { Graph } from './Graph.mjs';
import * as highlighters from '../highlighters/index.mjs';
import * as linkAnchors from '../linkAnchors/index.mjs';
import * as connectionPoints from '../connectionPoints/index.mjs';
import * as anchors from '../anchors/index.mjs';
import $ from 'jquery';
import Backbone from 'backbone';
const sortingTypes = {
NONE: 'sorting-none',
APPROX: 'sorting-approximate',
EXACT: 'sorting-exact'
};
const LayersNames = {
CELLS: 'cells',
BACK: 'back',
FRONT: 'front',
TOOLS: 'tools'
};
const MOUNT_BATCH_SIZE = 1000;
const UPDATE_BATCH_SIZE = Infinity;
const MIN_PRIORITY = 9007199254740991; // Number.MAX_SAFE_INTEGER
const HighlightingTypes = CellView.Highlighting;
const defaultHighlighting = {
[HighlightingTypes.DEFAULT]: {
name: 'stroke',
options: {
padding: 3
}
},
[HighlightingTypes.MAGNET_AVAILABILITY]: {
name: 'addClass',
options: {
className: 'available-magnet'
}
},
[HighlightingTypes.ELEMENT_AVAILABILITY]: {
name: 'addClass',
options: {
className: 'available-cell'
}
}
};
export const Paper = View.extend({
className: 'paper',
options: {
width: 800,
height: 600,
origin: { x: 0, y: 0 }, // x,y coordinates in top-left corner
gridSize: 1,
// Whether or not to draw the grid lines on the paper's DOM element.
// e.g drawGrid: true, drawGrid: { color: 'red', thickness: 2 }
drawGrid: false,
// Whether or not to draw the background on the paper's DOM element.
// e.g. background: { color: 'lightblue', image: '/paper-background.png', repeat: 'flip-xy' }
background: false,
perpendicularLinks: false,
elementView: ElementView,
linkView: LinkView,
snapLabels: false, // false, true
snapLinks: false, // false, true, { radius: value }
// When set to FALSE, an element may not have more than 1 link with the same source and target element.
multiLinks: true,
// For adding custom guard logic.
guard: function(evt, view) {
// FALSE means the event isn't guarded.
return false;
},
highlighting: defaultHighlighting,
// Prevent the default context menu from being displayed.
preventContextMenu: true,
// Prevent the default action for blank:pointer<action>.
preventDefaultBlankAction: true,
// Restrict the translation of elements by given bounding box.
// Option accepts a boolean:
// true - the translation is restricted to the paper area
// false - no restrictions
// A method:
// restrictTranslate: function(elementView) {
// var parentId = elementView.model.get('parent');
// return parentId && this.model.getCell(parentId).getBBox();
// },
// Or a bounding box:
// restrictTranslate: { x: 10, y: 10, width: 790, height: 590 }
restrictTranslate: false,
// Marks all available magnets with 'available-magnet' class name and all available cells with
// 'available-cell' class name. Marks them when dragging a link is started and unmark
// when the dragging is stopped.
markAvailable: false,
// Defines what link model is added to the graph after an user clicks on an active magnet.
// Value could be the Backbone.model or a function returning the Backbone.model
// defaultLink: function(elementView, magnet) { return condition ? new customLink1() : new customLink2() }
defaultLink: new Link,
// A connector that is used by links with no connector defined on the model.
// e.g. { name: 'rounded', args: { radius: 5 }} or a function
defaultConnector: { name: 'normal' },
// A router that is used by links with no router defined on the model.
// e.g. { name: 'oneSide', args: { padding: 10 }} or a function
defaultRouter: { name: 'normal' },
defaultAnchor: { name: 'center' },
defaultLinkAnchor: { name: 'connectionRatio' },
defaultConnectionPoint: { name: 'bbox' },
/* CONNECTING */
connectionStrategy: null,
// Check whether to add a new link to the graph when user clicks on an a magnet.
validateMagnet: function(_cellView, magnet, _evt) {
return magnet.getAttribute('magnet') !== 'passive';
},
// Check whether to allow or disallow the link connection while an arrowhead end (source/target)
// being changed.
validateConnection: function(cellViewS, _magnetS, cellViewT, _magnetT, end, _linkView) {
return (end === 'target' ? cellViewT : cellViewS) instanceof ElementView;
},
/* EMBEDDING */
// Enables embedding. Re-parent the dragged element with elements under it and makes sure that
// all links and elements are visible taken the level of embedding into account.
embeddingMode: false,
// Check whether to allow or disallow the element embedding while an element being translated.
validateEmbedding: function(childView, parentView) {
// by default all elements can be in relation child-parent
return true;
},
// Check whether to allow or disallow an embedded element to be unembedded / to become a root.
validateUnembedding: function(childView) {
// by default all elements can become roots
return true;
},
// Determines the way how a cell finds a suitable parent when it's dragged over the paper.
// The cell with the highest z-index (visually on the top) will be chosen.
findParentBy: 'bbox', // 'bbox'|'center'|'origin'|'corner'|'topRight'|'bottomLeft'
// If enabled only the element on the very front is taken into account for the embedding.
// If disabled the elements under the dragged view are tested one by one
// (from front to back) until a valid parent found.
frontParentOnly: true,
// Interactive flags. See online docs for the complete list of interactive flags.
interactive: {
labelMove: false
},
// When set to true the links can be pinned to the paper.
// i.e. link source/target can be a point e.g. link.get('source') ==> { x: 100, y: 100 };
linkPinning: true,
// Custom validation after an interaction with a link ends.
// Recognizes a function. If `false` is returned, the link is disallowed (removed or reverted)
// (linkView, paper) => boolean
allowLink: null,
// Allowed number of mousemove events after which the pointerclick event will be still triggered.
clickThreshold: 0,
// Number of required mousemove events before the first pointermove event will be triggered.
moveThreshold: 0,
// Number of required mousemove events before the a link is created out of the magnet.
// Or string `onleave` so the link is created when the pointer leaves the magnet
magnetThreshold: 0,
// Rendering Options
sorting: sortingTypes.EXACT,
frozen: false,
// no docs yet
onViewUpdate: function(view, flag, priority, opt, paper) {
// Do not update connected links when:
// 1. the view was just inserted (added to the graph and rendered)
// 2. the view was just mounted (added back to the paper by viewport function)
// 3. the change was marked as `isolate`.
if ((flag & view.FLAG_INSERT) || opt.mounting || opt.isolate) return;
paper.requestConnectedLinksUpdate(view, priority, opt);
},
// no docs yet
onViewPostponed: function(view, flag, paper) {
return paper.forcePostponedViewUpdate(view, flag);
},
beforeRender: null, // function(opt, paper) { },
afterRender: null, // function(stats, opt, paper) {
viewport: null,
// Default namespaces
cellViewNamespace: null,
routerNamespace: null,
connectorNamespace: null,
highlighterNamespace: highlighters,
anchorNamespace: anchors,
linkAnchorNamespace: linkAnchors,
connectionPointNamespace: connectionPoints
},
events: {
'dblclick': 'pointerdblclick',
'contextmenu': 'contextmenu',
'mousedown': 'pointerdown',
'touchstart': 'pointerdown',
'mouseover': 'mouseover',
'mouseout': 'mouseout',
'mouseenter': 'mouseenter',
'mouseleave': 'mouseleave',
'mousewheel': 'mousewheel',
'DOMMouseScroll': 'mousewheel',
'mouseenter .joint-cell': 'mouseenter',
'mouseleave .joint-cell': 'mouseleave',
'mouseenter .joint-tools': 'mouseenter',
'mouseleave .joint-tools': 'mouseleave',
'mousedown .joint-cell [event]': 'onevent', // interaction with cell with `event` attribute set
'touchstart .joint-cell [event]': 'onevent',
'mousedown .joint-cell [magnet]': 'onmagnet', // interaction with cell with `magnet` attribute set
'touchstart .joint-cell [magnet]': 'onmagnet',
'dblclick .joint-cell [magnet]': 'magnetpointerdblclick',
'contextmenu .joint-cell [magnet]': 'magnetcontextmenu',
'mousedown .joint-link .label': 'onlabel', // interaction with link label
'touchstart .joint-link .label': 'onlabel',
'dragstart .joint-cell image': 'onImageDragStart' // firefox fix
},
documentEvents: {
'mousemove': 'pointermove',
'touchmove': 'pointermove',
'mouseup': 'pointerup',
'touchend': 'pointerup',
'touchcancel': 'pointerup'
},
svg: null,
viewport: null,
defs: null,
tools: null,
$background: null,
layers: null,
$grid: null,
$document: null,
_zPivots: null,
// For storing the current transformation matrix (CTM) of the paper's viewport.
_viewportMatrix: null,
// For verifying whether the CTM is up-to-date. The viewport transform attribute
// could have been manipulated directly.
_viewportTransformString: null,
// Updates data (priorities, unmounted views etc.)
_updates: null,
// Paper Layers
_layers: null,
SORT_DELAYING_BATCHES: ['add', 'to-front', 'to-back'],
UPDATE_DELAYING_BATCHES: ['translate'],
MIN_SCALE: 1e-6,
init: function() {
const { options, el } = this;
if (!options.cellViewNamespace) {
/* global joint: true */
options.cellViewNamespace = typeof joint !== 'undefined' && has(joint, 'shapes') ? joint.shapes : null;
/* global joint: false */
}
const model = this.model = options.model || new Graph;
// Layers (SVGGroups)
// TODO: layer classes
this._layers = {};
this.setGrid(options.drawGrid);
this.cloneOptions();
this.render();
this.setDimensions();
this.startListening();
// Hash of all cell views.
this._views = {};
// z-index pivots
this._zPivots = {};
// Reference to the paper owner document
this.$document = $(el.ownerDocument);
// Render existing cells in the graph
this.resetViews(model.attributes.cells.models);
// Start the Rendering Loop
if (!this.isFrozen() && this.isAsync()) this.updateViewsAsync();
},
_resetUpdates: function() {
return this._updates = {
id: null,
priorities: [{}, {}, {}],
unmountedCids: [],
mountedCids: [],
unmounted: {},
mounted: {},
count: 0,
keyFrozen: false,
freezeKey: null,
sort: false
};
},
startListening: function() {
var model = this.model;
this.listenTo(model, 'add', this.onCellAdded)
.listenTo(model, 'remove', this.onCellRemoved)
.listenTo(model, 'change', this.onCellChange)
.listenTo(model, 'reset', this.onGraphReset)
.listenTo(model, 'sort', this.onGraphSort)
.listenTo(model, 'batch:stop', this.onGraphBatchStop);
this.on('cell:highlight', this.onCellHighlight)
.on('cell:unhighlight', this.onCellUnhighlight)
.on('scale translate', this.update);
},
onCellAdded: function(cell, _, opt) {
var position = opt.position;
if (this.isAsync() || !isNumber(position)) {
this.renderView(cell, opt);
} else {
if (opt.maxPosition === position) this.freeze({ key: 'addCells' });
this.renderView(cell, opt);
if (position === 0) this.unfreeze({ key: 'addCells' });
}
},
onCellRemoved: function(cell, _, opt) {
const view = this.findViewByModel(cell);
if (view) this.requestViewUpdate(view, view.FLAG_REMOVE, view.UPDATE_PRIORITY, opt);
},
onCellChange: function(cell, opt) {
if (cell === this.model.attributes.cells) return;
if (cell.hasChanged('z') && this.options.sorting === sortingTypes.APPROX) {
const view = this.findViewByModel(cell);
if (view) this.requestViewUpdate(view, view.FLAG_INSERT, view.UPDATE_PRIORITY, opt);
}
},
onGraphReset: function(collection, opt) {
this.removeZPivots();
this.resetViews(collection.models, opt);
},
onGraphSort: function() {
if (this.model.hasActiveBatch(this.SORT_DELAYING_BATCHES)) return;
this.sortViews();
},
onGraphBatchStop: function(data) {
if (this.isFrozen()) return;
var name = data && data.batchName;
var graph = this.model;
if (!this.isAsync()) {
var updateDelayingBatches = this.UPDATE_DELAYING_BATCHES;
if (updateDelayingBatches.includes(name) && !graph.hasActiveBatch(updateDelayingBatches)) {
this.updateViews(data);
}
}
var sortDelayingBatches = this.SORT_DELAYING_BATCHES;
if (sortDelayingBatches.includes(name) && !graph.hasActiveBatch(sortDelayingBatches)) {
this.sortViews();
}
},
cloneOptions: function() {
const { options } = this;
const {
defaultConnector,
defaultRouter,
defaultConnectionPoint,
defaultAnchor,
defaultLinkAnchor,
origin,
highlighting,
cellViewNamespace,
interactive
} = options;
// Default cellView namespace for ES5
/* global joint: true */
if (!cellViewNamespace && typeof joint !== 'undefined' && has(joint, 'shapes')) {
options.cellViewNamespace = joint.shapes;
}
/* global joint: false */
// Here if a function was provided, we can not clone it, as this would result in loosing the function.
// If the default is used, the cloning is necessary in order to prevent modifying the options on prototype.
if (!isFunction(defaultConnector)) {
options.defaultConnector = cloneDeep(defaultConnector);
}
if (!isFunction(defaultRouter)) {
options.defaultRouter = cloneDeep(defaultRouter);
}
if (!isFunction(defaultConnectionPoint)) {
options.defaultConnectionPoint = cloneDeep(defaultConnectionPoint);
}
if (!isFunction(defaultAnchor)) {
options.defaultAnchor = cloneDeep(defaultAnchor);
}
if (!isFunction(defaultLinkAnchor)) {
options.defaultLinkAnchor = cloneDeep(defaultLinkAnchor);
}
if (isPlainObject(interactive)) {
options.interactive = assign({}, interactive);
}
if (isPlainObject(highlighting)) {
// Return the default highlighting options into the user specified options.
options.highlighting = defaultsDeep({}, highlighting, defaultHighlighting);
}
options.origin = assign({}, origin);
},
children: function() {
var ns = V.namespace;
return [{
namespaceURI: ns.xhtml,
tagName: 'div',
className: addClassNamePrefix('paper-background'),
selector: 'background'
}, {
namespaceURI: ns.xhtml,
tagName: 'div',
className: addClassNamePrefix('paper-grid'),
selector: 'grid'
}, {
namespaceURI: ns.svg,
tagName: 'svg',
attributes: {
'width': '100%',
'height': '100%',
'xmlns:xlink': ns.xlink
},
selector: 'svg',
children: [{
// Append `<defs>` element to the SVG document. This is useful for filters and gradients.
// It's desired to have the defs defined before the viewport (e.g. to make a PDF document pick up defs properly).
tagName: 'defs',
selector: 'defs'
}, {
tagName: 'g',
className: addClassNamePrefix('layers'),
selector: 'layers',
children: [{
tagName: 'g',
className: addClassNamePrefix('back-layer'),
selector: 'back',
}, {
tagName: 'g',
className: addClassNamePrefix('cells-layer viewport'),
selector: 'cells',
}, {
tagName: 'g',
className: addClassNamePrefix('front-layer'),
selector: 'front',
}, {
tagName: 'g',
className: addClassNamePrefix('tools-layer'),
selector: 'tools'
}]
}]
}];
},
getLayerNode(layerName) {
const { _layers } = this;
if (layerName in _layers) return _layers[layerName];
throw new Error(`dia.Paper: Unknown layer "${layerName}"`);
},
render: function() {
this.renderChildren();
const { childNodes, options } = this;
const { svg, cells, defs, tools, layers, back, front, background, grid } = childNodes;
this.svg = svg;
this.defs = defs;
this.tools = tools;
this.cells = cells;
this.layers = layers;
this.$background = $(background);
this.$grid = $(grid);
assign(this._layers, {
[LayersNames.BACK]: back,
[LayersNames.CELLS]: cells,
[LayersNames.FRONT]: front,
[LayersNames.TOOLS]: tools
});
V.ensureId(svg);
// backwards compatibility
this.viewport = cells;
if (options.background) {
this.drawBackground(options.background);
}
if (options.drawGrid) {
this.drawGrid();
}
return this;
},
update: function() {
if (this.options.drawGrid) {
this.drawGrid();
}
if (this._background) {
this.updateBackgroundImage(this._background);
}
return this;
},
matrix: function(ctm) {
var viewport = this.layers;
// Getter:
if (ctm === undefined) {
var transformString = viewport.getAttribute('transform');
if ((this._viewportTransformString || null) === transformString) {
// It's ok to return the cached matrix. The transform attribute has not changed since
// the matrix was stored.
ctm = this._viewportMatrix;
} else {
// The viewport transform attribute has changed. Measure the matrix and cache again.
ctm = viewport.getCTM();
this._viewportMatrix = ctm;
this._viewportTransformString = transformString;
}
// Clone the cached current transformation matrix.
// If no matrix previously stored the identity matrix is returned.
return V.createSVGMatrix(ctm);
}
// Setter:
ctm = V.createSVGMatrix(ctm);
var ctmString = V.matrixToTransformString(ctm);
viewport.setAttribute('transform', ctmString);
this._viewportMatrix = ctm;
this._viewportTransformString = viewport.getAttribute('transform');
return this;
},
clientMatrix: function() {
return V.createSVGMatrix(this.cells.getScreenCTM());
},
requestConnectedLinksUpdate: function(view, priority, opt) {
if (view instanceof CellView) {
var model = view.model;
var links = this.model.getConnectedLinks(model);
for (var j = 0, n = links.length; j < n; j++) {
var link = links[j];
var linkView = this.findViewByModel(link);
if (!linkView) continue;
var flagLabels = ['UPDATE'];
if (link.getTargetCell() === model) flagLabels.push('TARGET');
if (link.getSourceCell() === model) flagLabels.push('SOURCE');
var nextPriority = Math.max(priority + 1, linkView.UPDATE_PRIORITY);
this.scheduleViewUpdate(linkView, linkView.getFlag(flagLabels), nextPriority, opt);
}
}
},
forcePostponedViewUpdate: function(view, flag) {
if (!view || !(view instanceof CellView)) return false;
var model = view.model;
if (model.isElement()) return false;
if ((flag & view.getFlag(['SOURCE', 'TARGET'])) === 0) {
// LinkView is waiting for the target or the source cellView to be rendered
// This can happen when the cells are not in the viewport.
var sourceFlag = 0;
var sourceView = this.findViewByModel(model.getSourceCell());
if (sourceView && !this.isViewMounted(sourceView)) {
sourceFlag = this.dumpView(sourceView);
view.updateEndMagnet('source');
}
var targetFlag = 0;
var targetView = this.findViewByModel(model.getTargetCell());
if (targetView && !this.isViewMounted(targetView)) {
targetFlag = this.dumpView(targetView);
view.updateEndMagnet('target');
}
if (sourceFlag === 0 && targetFlag === 0) {
// If leftover flag is 0, all view updates were done.
return !this.dumpView(view);
}
}
return false;
},
requestViewUpdate: function(view, flag, priority, opt) {
opt || (opt = {});
this.scheduleViewUpdate(view, flag, priority, opt);
var isAsync = this.isAsync();
if (this.isFrozen() || (isAsync && opt.async !== false)) return;
if (this.model.hasActiveBatch(this.UPDATE_DELAYING_BATCHES)) return;
var stats = this.updateViews(opt);
if (isAsync) this.notifyAfterRender(stats, opt);
},
scheduleViewUpdate: function(view, type, priority, opt) {
const { _updates: updates, options } = this;
const { FLAG_REMOVE, FLAG_INSERT, UPDATE_PRIORITY, cid } = view;
let priorityUpdates = updates.priorities[priority];
if (!priorityUpdates) priorityUpdates = updates.priorities[priority] = {};
// Move higher priority updates to this priority
if (priority > UPDATE_PRIORITY) {
// Not the default priority for this view. It's most likely a link view
// connected to another link view, which triggered the update.
// TODO: If there is an update scheduled with a lower priority already, we should
// change the requested priority to the lowest one. Does not seem to be critical
// right now, as it "only" results in multiple updates on the same view.
for (let i = priority - 1; i >= UPDATE_PRIORITY; i--) {
const prevPriorityUpdates = updates.priorities[i];
if (!prevPriorityUpdates || !(cid in prevPriorityUpdates)) continue;
priorityUpdates[cid] |= prevPriorityUpdates[cid];
delete prevPriorityUpdates[cid];
}
}
let currentType = priorityUpdates[cid] || 0;
// Prevent cycling
if ((currentType & type) === type) return;
if (!currentType) updates.count++;
if (type & FLAG_REMOVE && currentType & FLAG_INSERT) {
// When a view is removed we need to remove the insert flag as this is a reinsert
priorityUpdates[cid] ^= FLAG_INSERT;
} else if (type & FLAG_INSERT && currentType & FLAG_REMOVE) {
// When a view is added we need to remove the remove flag as this is view was previously removed
priorityUpdates[cid] ^= FLAG_REMOVE;
}
priorityUpdates[cid] |= type;
const viewUpdateFn = options.onViewUpdate;
if (typeof viewUpdateFn === 'function') viewUpdateFn.call(this, view, type, priority, opt || {}, this);
},
dumpViewUpdate: function(view) {
if (!view) return 0;
var updates = this._updates;
var cid = view.cid;
var priorityUpdates = updates.priorities[view.UPDATE_PRIORITY];
var flag = this.registerMountedView(view) | priorityUpdates[cid];
delete priorityUpdates[cid];
return flag;
},
dumpView: function(view, opt) {
var flag = this.dumpViewUpdate(view);
if (!flag) return 0;
return this.updateView(view, flag, opt);
},
updateView: function(view, flag, opt) {
if (!view) return 0;
const { FLAG_REMOVE, FLAG_INSERT, model } = view;
if (view instanceof CellView) {
if (flag & FLAG_REMOVE) {
this.removeView(model);
return 0;
}
if (flag & FLAG_INSERT) {
this.insertView(view);
flag ^= FLAG_INSERT;
}
}
if (!flag) return 0;
return view.confirmUpdate(flag, opt || {});
},
requireView: function(model, opt) {
var view = this.findViewByModel(model);
if (!view) return null;
this.dumpView(view, opt);
return view;
},
registerUnmountedView: function(view) {
var cid = view.cid;
var updates = this._updates;
if (cid in updates.unmounted) return 0;
var flag = updates.unmounted[cid] |= view.FLAG_INSERT;
updates.unmountedCids.push(cid);
delete updates.mounted[cid];
return flag;
},
registerMountedView: function(view) {
var cid = view.cid;
var updates = this._updates;
if (cid in updates.mounted) return 0;
updates.mounted[cid] = true;
updates.mountedCids.push(cid);
var flag = updates.unmounted[cid] || 0;
delete updates.unmounted[cid];
return flag;
},
isViewMounted: function(view) {
if (!view) return false;
var cid = view.cid;
var updates = this._updates;
return (cid in updates.mounted);
},
dumpViews: function(opt) {
var passingOpt = defaults({}, opt, { viewport: null });
this.checkViewport(passingOpt);
this.updateViews(passingOpt);
},
// Synchronous views update
updateViews: function(opt) {
this.notifyBeforeRender(opt);
let batchStats;
let updateCount = 0;
let batchCount = 0;
let priority = MIN_PRIORITY;
do {
batchCount++;
batchStats = this.updateViewsBatch(opt);
updateCount += batchStats.updated;
priority = Math.min(batchStats.priority, priority);
} while (!batchStats.empty);
const stats = { updated: updateCount, batches: batchCount, priority };
this.notifyAfterRender(stats, opt);
return stats;
},
hasScheduledUpdates: function() {
const priorities = this._updates.priorities;
const priorityIndexes = Object.keys(priorities); // convert priorities to a dense array
let i = priorityIndexes.length;
while (i > 0 && i--) {
// a faster way how to check if an object is empty
for (let _key in priorities[priorityIndexes[i]]) return true;
}
return false;
},
updateViewsAsync: function(opt, data) {
opt || (opt = {});
data || (data = { processed: 0, priority: MIN_PRIORITY });
var updates = this._updates;
var id = updates.id;
if (id) {
cancelFrame(id);
if (data.processed === 0 && this.hasScheduledUpdates()) {
this.notifyBeforeRender(opt);
}
var stats = this.updateViewsBatch(opt);
var passingOpt = defaults({}, opt, {
mountBatchSize: MOUNT_BATCH_SIZE - stats.mounted,
unmountBatchSize: MOUNT_BATCH_SIZE - stats.unmounted
});
var checkStats = this.checkViewport(passingOpt);
var unmountCount = checkStats.unmounted;
var mountCount = checkStats.mounted;
var processed = data.processed;
var total = updates.count;
if (stats.updated > 0) {
// Some updates have been just processed
processed += stats.updated + stats.unmounted;
stats.processed = processed;
data.priority = Math.min(stats.priority, data.priority);
if (stats.empty && mountCount === 0) {
stats.unmounted += unmountCount;
stats.mounted += mountCount;
stats.priority = data.priority;
this.notifyAfterRender(stats, opt);
data.processed = 0;
updates.count = 0;
} else {
data.processed = processed;
}
}
// Progress callback
var progressFn = opt.progress;
if (total && typeof progressFn === 'function') {
progressFn.call(this, stats.empty, processed, total, stats, this);
}
// The current frame could have been canceled in a callback
if (updates.id !== id) return;
}
updates.id = nextFrame(this.updateViewsAsync, this, opt, data);
},
notifyBeforeRender: function(opt = {}) {
let beforeFn = opt.beforeRender;
if (typeof beforeFn !== 'function') {
beforeFn = this.options.beforeRender;
if (typeof beforeFn !== 'function') return;
}
beforeFn.call(this, opt, this);
},
notifyAfterRender: function(stats, opt = {}) {
let afterFn = opt.afterRender;
if (typeof afterFn !== 'function') {
afterFn = this.options.afterRender;
}
if (typeof afterFn === 'function') {
afterFn.call(this, stats, opt, this);
}
this.trigger('render:done', stats, opt);
},
updateViewsBatch: function(opt) {
opt || (opt = {});
var batchSize = opt.batchSize || UPDATE_BATCH_SIZE;
var updates = this._updates;
var updateCount = 0;
var postponeCount = 0;
var unmountCount = 0;
var mountCount = 0;
var maxPriority = MIN_PRIORITY;
var empty = true;
var options = this.options;
var priorities = updates.priorities;
var viewportFn = 'viewport' in opt ? opt.viewport : options.viewport;
if (typeof viewportFn !== 'function') viewportFn = null;
var postponeViewFn = options.onViewPostponed;
if (typeof postponeViewFn !== 'function') postponeViewFn = null;
var priorityIndexes = Object.keys(priorities); // convert priorities to a dense array
main: for (var i = 0, n = priorityIndexes.length; i < n; i++) {
var priority = priorityIndexes[i];
var priorityUpdates = priorities[priority];
for (var cid in priorityUpdates) {
if (updateCount >= batchSize) {
empty = false;
break main;
}
var view = views[cid];
if (!view) {
// This should not occur
delete priorityUpdates[cid];
continue;
}
var currentFlag = priorityUpdates[cid];
if ((currentFlag & view.FLAG_REMOVE) === 0) {
// We should never check a view for viewport if we are about to remove the view
var isDetached = cid in updates.unmounted;
if (view.DETACHABLE && viewportFn && !viewportFn.call(this, view, !isDetached, this)) {
// Unmount View
if (!isDetached) {
this.registerUnmountedView(view);
view.unmount();
}
updates.unmounted[cid] |= currentFlag;
delete priorityUpdates[cid];
unmountCount++;
continue;
}
// Mount View
if (isDetached) {
currentFlag |= view.FLAG_INSERT;
mountCount++;
}
currentFlag |= this.registerMountedView(view);
}
var leftoverFlag = this.updateView(view, currentFlag, opt);
if (leftoverFlag > 0) {
// View update has not finished completely
priorityUpdates[cid] = leftoverFlag;
if (!postponeViewFn || !postponeViewFn.call(this, view, leftoverFlag, this) || priorityUpdates[cid]) {
postponeCount++;
empty = false;
continue;
}
}
if (maxPriority > priority) maxPriority = priority;
updateCount++;
delete priorityUpdates[cid];
}
}
return {
priority: maxPriority,
updated: updateCount,
postponed: postponeCount,
unmounted: unmountCount,
mounted: mountCount,
empty: empty
};
},
getUnmountedViews: function() {
const updates = this._updates;
const unmountedCids = Object.keys(updates.unmounted);
const n = unmountedCids.length;
const unmountedViews = new Array(n);
for (var i = 0; i < n; i++) {
unmountedViews[i] = views[unmountedCids[i]];
}
return unmountedViews;
},
getMountedViews: function() {
const updates = this._updates;
const mountedCids = Object.keys(updates.mounted);
const n = mountedCids.length;
const mountedViews = new Array(n);
for (var i = 0; i < n; i++) {
mountedViews[i] = views[mountedCids[i]];
}
return mountedViews;
},
checkUnmountedViews: function(viewportFn, opt) {
opt || (opt = {});
var mountCount = 0;
if (typeof viewportFn !== 'function') viewportFn = null;
var batchSize = 'mountBatchSize' in opt ? opt.mountBatchSize : Infinity;
var updates = this._updates;
var unmountedCids = updates.unmountedCids;
var unmounted = updates.unmounted;
for (var i = 0, n = Math.min(unmountedCids.length, batchSize); i < n; i++) {
var cid = unmountedCids[i];
if (!(cid in unmounted)) continue;
var view = views[cid];
if (!view) continue;
if (view.DETACHABLE && viewportFn && !viewportFn.call(this, view, false, this)) {
// Push at the end of all unmounted ids, so this can be check later again
unmountedCids.push(cid);
continue;
}
mountCount++;
var flag = this.registerMountedView(view);
if (flag) this.scheduleViewUpdate(view, flag, view.UPDATE_PRIORITY, { mounting: true });
}
// Get rid of views, that have been mounted
unmountedCids.splice(0, i);
return mountCount;
},
checkMountedViews: function(viewportFn, opt) {
opt || (opt = {});
var unmountCount = 0;
if (typeof viewportFn !== 'function') return unmountCount;
var batchSize = 'unmountBatchSize' in opt ? opt.unmountBatchSize : Infinity;
var updates = this._updates;
var mountedCids = updates.mountedCids;
var mounted = updates.mounted;
for (var i = 0, n = Math.min(mountedCids.length, batchSize); i < n; i++) {
var cid = mountedCids[i];
if (!(cid in mounted)) continue;
var view = views[cid];
if (!view) continue;
if (!view.DETACHABLE || viewportFn.call(this, view, true, this)) {
// Push at the end of all mounted ids, so this can be check later again
mountedCids.push(cid);
continue;
}
unmountCount++;
var flag = this.registerUnmountedView(view);
if (flag) view.unmount();
}
// Get rid of views, that have been unmounted
mountedCids.splice(0, i);
return unmountCount;
},
checkViewport: function(opt) {
var passingOpt = defaults({}, opt, {
mountBatchSize: Infinity,
unmountBatchSize: Infinity
});
var viewportFn = 'viewport' in passingOpt ? passingOpt.viewport : this.options.viewport;
var unmountedCount = this.checkMountedViews(viewportFn, passingOpt);
if (unmountedCount > 0) {
// Do not check views, that have been just unmounted and pushed at the end of the cids array
var unmountedCids = this._updates.unmountedCids;
passingOpt.mountBatchSize = Math.min(unmountedCids.length - unmountedCount, passingOpt.mountBatchSize);
}
var mountedCount = this.checkUnmountedViews(viewportFn, passingOpt);
return {
mounted: mountedCount,
unmounted: unmountedCount
};
},
freeze: function(opt) {
opt || (opt = {});
var updates = this._updates;
var key = opt.key;
var isFrozen = this.options.frozen;
var freezeKey = updates.freezeKey;
if (key && key !== freezeKey) {
// key passed, but the paper is already freezed with another key
if (isFrozen && freezeKey) return;
updates.freezeKey = key;
updates.keyFrozen = isFrozen;
}
this.options.frozen = true;
var id = updates.id;
updates.id = null;
if (this.isAsync() && id) cancelFrame(id);
},
unfreeze: function(opt) {
opt || (opt = {});
var updates = this._updates;
var key = opt.key;
var freezeKey = updates.freezeKey;
// key passed, but the paper is already freezed with another key
if (key && freezeKey && key !== freezeKey) return;
updates.freezeKey = null;
// key passed, but the paper is already freezed
if (key && key === freezeKey && updates.keyFrozen) return;
if (this.isAsync()) {
this.freeze();
this.updateViewsAsync(opt);
} else {
this.updateViews(opt);
}
this.options.frozen = updates.keyFrozen = false;
if (updates.sort) {
this.sortViews();
updates.sort = false;
}
},
isAsync: function() {
return !!this.options.async;
},
isFrozen: function() {
return !!this.options.frozen;
},
isExactSorting: function() {
return this.options.sorting === sortingTypes.EXACT;
},
onRemove: function() {
this.freeze();
//clean up all DOM elements/views to prevent memory leaks
this.removeViews();
},
getComputedSize: function() {
var options = this.options;
var w = options.width;
var h = options.height;
if (!isNumber(w)) w = this.el.clientWidth;
if (!isNumber(h)) h = this.el.clientHeight;
return { width: w, height: h };
},
setDimensions: function(width, height) {
var options = this.options;
var w = (width === undefined) ? options.width : width;
var h = (height === undefined) ? options.height : height;
this.options.width = w;
this.options.height = h;
if (isNumber(w)) w = Math.round(w);
if (isNumber(h)) h = Math.round(h);
this.$el.css({
width: (w === null) ? '' : w,
height: (h === null) ? '' : h
});
var computedSize = this.getComputedSize();
this.trigger('resize', computedSize.width, computedSize.height);
},
setOrigin: function(ox, oy) {
return this.translate(ox || 0, oy || 0, { absolute: true });
},
// Expand/shrink the paper to fit the content. Snap the width/height to the grid
// defined in `gridWidth`, `gridHeight`. `padding` adds to the resulting width/height of the paper.
// When options { fitNegative: true } it also translates the viewport in order to make all
// the content visible.
fitToContent: function(gridWidth, gridHeight, padding, opt) { // alternatively function(opt)
if (isObject(gridWidth)) {
// first parameter is an option object
opt = gridWidth;
gridWidth = opt.gridWidth || 1;
gridHeight = opt.gridHeight || 1;
padding = opt.padding || 0;
} else {
opt || (opt = {});
gridWidth = gridWidth || 1;
gridHeight = gridHeight || 1;
padding = padding || 0;
}
// Calculate the paper size to accommodate all the graph's elements.
var minWidth = Math.max(opt.minWidth || 0, gridWidth);
var minHeight = Math.max(opt.minHeight || 0, gridHeight);
var maxWidth = opt.maxWidth || Number.MAX_VALUE;
var maxHeight = opt.maxHeight || Number.MAX_VALUE;
var newOrigin = opt.allowNewOrigin;
padding = normalizeSides(padding);
var area = ('contentArea' in opt) ? new Rect(opt.contentArea) : this.getContentArea(opt);
var currentScale = this.scale();
var currentTranslate = this.translate();
var sx = currentScale.sx;
var sy = currentScale.sy;
area.x *= sx;
area.y *= sy;
area.width *= sx;
area.height *= sy;
var calcWidth = Math.ceil((area.width + area.x) / gridWidth);
var calcHeight = Math.ceil((area.height + area.y) / gridHeight);
if (!opt.allowNegativeBottomRight) {
calcWidth = Math.max(calcWidth, 1);
calcHeight = Math.max(calcHeight, 1);
}
calcWidth *= gridWidth;
calcHeight *= gridHeight;
var tx = 0;
var ty = 0;
if ((newOrigin === 'negative' && area.x < 0) || (newOrigin === 'positive' && area.x >= 0) || newOrigin === 'any') {
tx = Math.ceil(-area.x / gridWidth) * gridWidth;
tx += padding.left;
calcWidth += tx;
}
if ((newOrigin === 'negative' && area.y < 0) || (newOrigin === 'positive' && area.y >= 0) || newOrigin === 'any') {
ty = Math.ceil(-area.y / gridHeight) * gridHeight;
ty += padding.top;
calcHeight += ty;
}
calcWidth += padding.right;
calcHeight += padding.bottom;
// Make sure the resulting width and height are greater than minimum.
calcWidth = Math.max(calcWidth, minWidth);
calcHeight = Math.max(calcHeight, minHeight);
// Make sure the resulting width and height are lesser than maximum.
calcWidth = Math.min(calcWidth, maxWidth);
calcHeight = Math.min(calcHeight, maxHeight);
var computedSize = this.getComputedSize();
var dimensionChange = calcWidth != computedSize.width || calcHeight != computedSize.height;
var originChange = tx != currentTranslate.tx || ty != currentTranslate.ty;
// Change the dimensions only if there is a size discrepancy or an origin change
if (originChange) {
this.translate(tx, ty);
}
if (dimensionChange) {
this.setDimensions(calcWidth, calcHeight);
}
return new Rect(-tx / sx, -ty / sy, calcWidth / sx, calcHeight / sy);
},
scaleContentToFit: function(opt) {
opt || (opt = {});
var contentBBox, contentLocalOrigin;
if ('contentArea' in opt) {
var contentArea = opt.contentArea;
contentBBox = this.localToPaperRect(contentArea);
contentLocalOrigin = new Point(contentArea);
} else {
contentBBox = this.getContentBBox(opt);
contentLocalOrigin = this.paperToLocalPoint(contentBBox);
}
if (!contentBBox.width || !contentBBox.height) return;
defaults(opt, {
padding: 0,
preserveAspectRatio: true,
scaleGrid: null,
minScale: 0,
maxScale: Number.MAX_VALUE
//minScaleX
//minScaleY
//maxScaleX
//maxScaleY
//fittingBBox
});
var padding = normalizeSides(opt.padding);
var minScaleX = opt.minScaleX || opt.minScale;
var maxScaleX = opt.maxScaleX || opt.maxScale;
var minScaleY = opt.minScaleY || opt.minScale;
var maxScaleY = opt.maxScaleY || opt.maxScale;
var fittingBBox;
if (opt.fittingBBox) {
fittingBBox = opt.fittingBBox;
} else {
var currentTranslate = this.translate();
var computedSize = this.getComputedSize();
fittingBBox = {
x: currentTranslate.tx,
y: currentTranslate.ty,
width: computedSize.width,
height: computedSize.height
};
}
fittingBBox = new Rect(fittingBBox).moveAndExpand({
x: padding.left,
y: padding.top,
width: -padding.left - padding.right,
height: -padding.top - padding.bottom
});
var currentScale = this.scale();
var newSx = fittingBBox.width / contentBBox.width * currentScale.sx;
var newSy = fittingBBox.height / contentBBox.height * currentScale.sy;
if (opt.preserveAspectRatio) {
newSx = newSy = Math.min(newSx, newSy);
}
// snap scale to a grid
if (opt.scaleGrid) {
var gridSize = opt.scaleGrid;
newSx = gridSize * Math.floor(newSx / gridSize);
newSy = gridSize * Math.floor(newSy / gridSize);
}
// scale min/max boundaries
newSx = Math.min(maxScaleX, Math.max(minScaleX, newSx));
newSy = Math.min(maxScaleY, Math.max(minScaleY, newSy));
var origin = this.options.origin;
var newOx = fittingBBox.x - contentLocalOrigin.x * newSx - origin.x;
var newOy = fittingBBox.y - contentLocalOrigin.y * newSy - origin.y;
this.scale(newSx, newSy);
this.translate(newOx, newOy);
},
// Return the dimensions of the content area in local units (without transformations).
getContentArea: function(opt) {
if (opt && opt.useModelGeometry) {
return this.model.getBBox() || new Rect();
}
return V(this.cells).getBBox();
},
// Return the dimensions of the content bbox in the paper units (as it appears on screen).
getContentBBox: function(opt) {
return this.localToPaperRect(this.getContentArea(opt));
},
// Returns a geometry rectangle representing the entire
// paper area (coordinates from the left paper border to the right one
// and the top border to the bottom one).
getArea: function() {
return this.paperToLocalRect(this.getComputedSize());
},
getRestrictedArea: function(...args) {
const { restrictTranslate } = this.options;
let restrictedArea;
if (isFunction(restrictTranslate)) {
// A method returning a bounding box
restrictedArea = restrictTranslate.apply(this, args);
} else if (restrictTranslate === true) {
// The paper area
restrictedArea = this.getArea();
} else if (!restrictTranslate) {
// falsy value
restrictedArea = null;
} else {
// any other value
restrictedArea = new Rect(restrictTranslate);
}
return restrictedArea;
},
createViewForModel: function(cell) {
// A class taken from the paper options.