@joint/core 4.2.0-alpha.0 → 4.2.0-alpha.1

package/dist/joint.nowrap.js

@@ -1,10 +1,10 @@
-/*! JointJS v4.2.0-alpha.0 (2025-06-16) - JavaScript diagramming library
-
+/*! JointJS v4.2.0-alpha.1 (2025-09-25) - JavaScript diagramming library
 
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at http://mozilla.org/MPL/2.0/.
 */
+
 var joint = (function (exports) {
 	'use strict';
 
@@ -9859,8 +9859,11 @@ var joint = (function (exports) {
 	  });
 
 	  /**
-	   * @param {SVGGElement} toElem
-	   * @returns {SVGMatrix}
+	   * Calculates the transformation matrix from this element to the target element.
+	   * @param {SVGElement|V} target - The target element.
+	   * @param {Object} [opt] - Options object for transformation calculation.
+	   * @param {boolean} [opt.safe] - Use a safe traversal method to compute the matrix.
+	   * @returns {DOMMatrix} The transformation matrix from this element to the target element.
 	   */
 	  VPrototype.getTransformToElement = function (target, opt) {
 	    const node = this.node;
@@ -10193,11 +10196,18 @@ var joint = (function (exports) {
 	  }
 	  VPrototype.text = function (content, opt) {
 	    if (content && typeof content !== 'string') throw new Error('Vectorizer: text() expects the first argument to be a string.');
-
-	    // Replace all spaces with the Unicode No-break space (http://www.fileformat.info/info/unicode/char/a0/index.htm).
-	    // IE would otherwise collapse all spaces into one.
-	    content = V.sanitizeText(content);
 	    opt || (opt = {});
+
+	    // Backwards-compatibility: if no content was provided, treat it as an
+	    // empty string so that subsequent string operations (e.g. split) do
+	    // not throw and behaviour matches the previous implementation that
+	    // always sanitised the input.
+	    if (content == null) content = '';
+	    if (opt.useNoBreakSpace) {
+	      // Replace all spaces with the Unicode No-break space (http://www.fileformat.info/info/unicode/char/a0/index.htm).
+	      // IE would otherwise collapse all spaces into one.
+	      content = V.sanitizeText(content);
+	    }
 	    // Should we allow the text to be selected?
 	    var displayEmpty = opt.displayEmpty;
 	    // End of Line character
@@ -10940,6 +10950,9 @@ var joint = (function (exports) {
 	  // also exposed so that the programmer can use it in case he needs to. This is useful e.g. in tests
 	  // when you want to compare the actual DOM text content without having to add the unicode character in
 	  // the place of all spaces.
+	  /**
+	   * @deprecated Use regular spaces and rely on xml:space="preserve" instead.
+	   */
 	  V.sanitizeText = function (text) {
 	    return (text || '').replace(/ /g, '\u00A0');
 	  };
@@ -12487,6 +12500,14 @@ var joint = (function (exports) {
 	});
 
 	const config$3 = {
+	  // How the cell attributes are merged when `cell.prop()` is called.
+	  // DEFAULT: the arrays are merged into the source array.
+	  cellMergeStrategy: null,
+	  // How the cell default attributes are merged with the attributes provided
+	  // in the cell constructor.
+	  // DEFAULT: the arrays are merged by replacing the source array
+	  // with the destination array.
+	  cellDefaultsMergeStrategy: null,
 	  // When set to `true` the cell selectors could be defined as CSS selectors.
 	  // If not, only JSON Markup selectors are taken into account.
 	  useCSSSelectors: false,
@@ -15031,9 +15052,10 @@ var joint = (function (exports) {
 	      const eol = attrs.eol;
 	      const x = attrs.x;
 	      let textPath = attrs['text-path'];
+	      const useNoBreakSpace = attrs['use-no-break-space'] === true;
 	      // Update the text only if there was a change in the string
 	      // or any of its attributes.
-	      const textHash = JSON.stringify([text, lineHeight, annotations, textVerticalAnchor, eol, displayEmpty, textPath, x, fontSize]);
+	      const textHash = JSON.stringify([text, lineHeight, annotations, textVerticalAnchor, eol, displayEmpty, textPath, x, fontSize, useNoBreakSpace]);
 	      if (cache === undefined || cache !== textHash) {
 	        // Chrome bug:
 	        // <tspan> positions defined as `em` are not updated
@@ -15058,7 +15080,8 @@ var joint = (function (exports) {
 	          x,
 	          textVerticalAnchor,
 	          eol,
-	          displayEmpty
+	          displayEmpty,
+	          useNoBreakSpace
 	        });
 	        $.data.set(node, cacheName, textHash);
 	      }
@@ -15574,12 +15597,18 @@ var joint = (function (exports) {
 	    if (defaults = result(this, 'defaults')) {
 	      //<custom code>
 	      // Replaced the call to _.defaults with util.merge.
-	      const customizer = options && options.mergeArrays === true ? false : attributesMerger;
+	      const customizer = options && options.mergeArrays === true ? false : config$3.cellDefaultsMergeStrategy || attributesMerger;
 	      attrs = merge({}, defaults, attrs, customizer);
 	      //</custom code>
 	    }
 	    this.set(attrs, options);
 	    this.changed = {};
+	    if (options && options.portLayoutNamespace) {
+	      this.portLayoutNamespace = options.portLayoutNamespace;
+	    }
+	    if (options && options.portLabelLayoutNamespace) {
+	      this.portLabelLayoutNamespace = options.portLabelLayoutNamespace;
+	    }
 	    this.initialize.apply(this, arguments);
 	  },
 	  translate: function (dx, dy, opt) {
@@ -15973,7 +16002,11 @@ var joint = (function (exports) {
 	    if (!opt.deep) {
 	      // Shallow cloning.
 
-	      var clone = Model.prototype.clone.apply(this, arguments);
+	      // Preserve the original's `portLayoutNamespace` and `portLabelLayoutNamespace`.
+	      const clone = new this.constructor(this.attributes, {
+	        portLayoutNamespace: this.portLayoutNamespace,
+	        portLabelLayoutNamespace: this.portLabelLayoutNamespace
+	      });
 	      // We don't want the clone to have the same ID as the original.
 	      clone.set(this.getIdAttribute(), this.generateId());
 	      // A shallow cloned element does not carry over the original embeds.
@@ -15985,7 +16018,7 @@ var joint = (function (exports) {
 	    } else {
 	      // Deep cloning.
 
-	      // For a deep clone, simply call `graph.cloneCells()` with the cell and all its embedded cells.
+	      // For a deep clone, simply call `util.cloneCells()` with the cell and all its embedded cells.
 	      return toArray$1(cloneCells([this].concat(this.getEmbeddedCells({
 	        deep: true
 	      }))));
@@ -16050,7 +16083,7 @@ var joint = (function (exports) {
 	        options.rewrite && unsetByPath(baseAttributes, path, '/');
 
 	        // Merge update with the model attributes.
-	        var attributes = merge(baseAttributes, update);
+	        var attributes = merge(baseAttributes, update, config$3.cellMergeStrategy);
 	        // Finally, set the property to the updated attributes.
 	        return this.set(property, attributes[property], options);
 	      } else {
@@ -16072,11 +16105,11 @@ var joint = (function (exports) {
 	      // Merging the values of changed attributes with the current ones.
 	      const {
 	        changedValue
-	      } = merge({}, {
+	      } = merge(merge({}, {
 	        changedValue: this.attributes[key]
-	      }, {
+	      }), {
 	        changedValue: props[key]
-	      });
+	      }, config$3.cellMergeStrategy);
 	      changedAttributes[key] = changedValue;
 	    }
 	    return this.set(changedAttributes, options);
@@ -16310,9 +16343,10 @@ var joint = (function (exports) {
 	  }
 	}, {
 	  getAttributeDefinition: function (attrName) {
-	    var defNS = this.attributes;
-	    var globalDefNS = attributes;
-	    return defNS && defNS[attrName] || globalDefNS[attrName];
+	    const defNS = this.attributes;
+	    const globalDefNS = attributes;
+	    const definition = defNS && defNS[attrName] || globalDefNS[attrName];
+	    return definition !== undefined ? definition : null;
 	  },
 	  define: function (type, defaults, protoProps, staticProps) {
 	    protoProps = assign({
@@ -16618,6 +16652,22 @@ var joint = (function (exports) {
 		wrappers: wrappers
 	};
 
+	function parseCoordinate(coordinate, dimension, bbox, value) {
+	  if (isPercentage(value)) {
+	    return parseFloat(value) / 100 * bbox[dimension];
+	  }
+	  if (isCalcExpression(value)) {
+	    return Number(evalCalcExpression(value, bbox));
+	  }
+	  if (typeof value === 'string') {
+	    const num = Number(value);
+	    if (isNaN(num)) {
+	      throw new TypeError(`Cannot convert port coordinate ${coordinate}: "${value}" to a number`);
+	    }
+	    return num;
+	  }
+	  return value;
+	}
 	function portTransformAttrs(point, angle, opt) {
 	  var trans = point.toJSON();
 	  trans.angle = angle || 0;
@@ -16661,19 +16711,9 @@ var joint = (function (exports) {
 	    y,
 	    angle
 	  } = args;
-	  if (isPercentage(x)) {
-	    x = parseFloat(x) / 100 * bbox.width;
-	  } else if (isCalcExpression(x)) {
-	    x = Number(evalCalcExpression(x, bbox));
-	  }
-	  if (isPercentage(y)) {
-	    y = parseFloat(y) / 100 * bbox.height;
-	  } else if (isCalcExpression(y)) {
-	    y = Number(evalCalcExpression(y, bbox));
-	  }
 	  return {
-	    x,
-	    y,
+	    x: parseCoordinate('x', 'width', bbox, x),
+	    y: parseCoordinate('y', 'height', bbox, y),
 	    angle
 	  };
 	}
@@ -16693,7 +16733,7 @@ var joint = (function (exports) {
 	 * @param {Object=} opt opt Group options
 	 * @returns {Array<g.Point>}
 	 */
-	const absolute = function (ports, elBBox) {
+	const absolute = function (ports, elBBox, opt) {
 	  return ports.map(port => {
 	    const transformation = argPoint(elBBox, port).round().toJSON();
 	    transformation.angle = port.angle || 0;
@@ -16702,6 +16742,7 @@ var joint = (function (exports) {
 	};
 
 	/**
+	 * @deprecated
 	 * @param {Array<Object>} ports
 	 * @param {g.Rect} elBBox
 	 * @param {Object=} opt opt Group options
@@ -16966,7 +17007,7 @@ var joint = (function (exports) {
 	    }
 	  });
 	}
-	const manual = function (_portPosition, _elBBox, opt) {
+	const manual = function (portPosition, elBBox, opt) {
 	  return labelAttributes(opt);
 	};
 	const left$1 = function (portPosition, elBBox, opt) {
@@ -17047,13 +17088,20 @@ var joint = (function (exports) {
 		top: top$1
 	};
 
-	var PortData = function (data) {
-	  var clonedData = cloneDeep(data) || {};
+	const DEFAULT_PORT_POSITION_NAME = 'left';
+	const DEFAULT_ABSOLUTE_PORT_POSITION_NAME = 'absolute';
+	const DEFAULT_PORT_LABEL_POSITION_NAME = 'left';
+	const PortData = function (model) {
+	  const {
+	    portLayoutNamespace = Port,
+	    portLabelLayoutNamespace = PortLabel
+	  } = model;
+	  const clonedData = cloneDeep(model.get('ports')) || {};
 	  this.ports = [];
 	  this.portsMap = {};
 	  this.groups = {};
-	  this.portLayoutNamespace = Port;
-	  this.portLabelLayoutNamespace = PortLabel;
+	  this.portLayoutNamespace = portLayoutNamespace;
+	  this.portLabelLayoutNamespace = portLabelLayoutNamespace;
 	  this.metrics = {};
 	  this.metricsKey = null;
 	  this._init(clonedData);
@@ -17078,6 +17126,8 @@ var joint = (function (exports) {
 	      return port.group === groupName;
 	    });
 	  },
+	  // Calculate SVG transformations based on evaluated group + port data
+	  // NOTE: This function is also called for ports without a group (groupName = undefined)
 	  getGroupPortsMetrics: function (groupName, rect) {
 	    const {
 	      x = 0,
@@ -17096,29 +17146,36 @@ var joint = (function (exports) {
 	      // Return cached metrics
 	      return groupPortsMetrics;
 	    }
+
 	    // Calculate the metrics
 	    groupPortsMetrics = this.resolveGroupPortsMetrics(groupName, new Rect(x, y, width, height));
 	    this.metrics[groupName] = groupPortsMetrics;
 	    return groupPortsMetrics;
 	  },
 	  resolveGroupPortsMetrics: function (groupName, elBBox) {
-	    var group = this.getGroup(groupName);
-	    var ports = this.getPortsByGroup(groupName);
-	    var groupPosition = group.position || {};
-	    var groupPositionName = groupPosition.name;
-	    var namespace = this.portLayoutNamespace;
-	    if (!namespace[groupPositionName]) {
-	      groupPositionName = 'left';
-	    }
-	    var groupArgs = groupPosition.args || {};
-	    var portsArgs = ports.map(function (port) {
+	    // `groupName` of `undefined` (= not a string) means "the group of ports which do not have the `group` property".
+	    const isNoGroup = groupName === undefined;
+	    const group = this.getGroup(groupName);
+	    const ports = this.getPortsByGroup(groupName);
+	    const portsArgs = ports.map(function (port) {
 	      return port && port.position && port.position.args;
 	    });
-	    var groupPortTransformations = namespace[groupPositionName](portsArgs, elBBox, groupArgs);
-	    var accumulator = {
+
+	    // Get an array of transformations of individual ports according to the group's port layout function:
+	    let groupPortTransformations;
+	    if (isNoGroup) {
+	      // Apply default port layout function to the set of ports without `group` property.
+	      const noGroup = this._evaluateGroup({});
+	      groupPortTransformations = this._getGroupPortTransformations(noGroup, portsArgs, elBBox);
+	    } else {
+	      groupPortTransformations = this._getGroupPortTransformations(group, portsArgs, elBBox);
+	    }
+	    let accumulator = {
 	      ports: ports,
 	      result: {}
 	    };
+
+	    // For each individual port transformation, find the information necessary to calculate SVG transformations:
 	    toArray$1(groupPortTransformations).reduce((res, portTransformation, index) => {
 	      const port = res.ports[index];
 	      const portId = port.id;
@@ -17126,7 +17183,7 @@ var joint = (function (exports) {
 	        index,
 	        portId,
 	        portTransformation: portTransformation,
-	        labelTransformation: this._getPortLabelLayout(port, Point(portTransformation), elBBox),
+	        labelTransformation: this._getPortLabelTransformation(port, Point(portTransformation), elBBox),
 	        portAttrs: port.attrs,
 	        portSize: port.size,
 	        labelSize: port.label.size
@@ -17135,16 +17192,24 @@ var joint = (function (exports) {
 	    }, accumulator);
 	    return accumulator.result;
 	  },
-	  _getPortLabelLayout: function (port, portPosition, elBBox) {
-	    var namespace = this.portLabelLayoutNamespace;
-	    var labelPosition = port.label.position.name || 'left';
-	    if (namespace[labelPosition]) {
-	      return namespace[labelPosition](portPosition, elBBox, port.label.position.args);
+	  _getGroupPortTransformations: function (group, portsArgs, elBBox) {
+	    const groupPosition = group.position || {};
+	    const groupPositionArgs = groupPosition.args || {};
+	    const groupPositionLayoutCallback = groupPosition.layoutCallback;
+	    return groupPositionLayoutCallback(portsArgs, elBBox, groupPositionArgs);
+	  },
+	  _getPortLabelTransformation: function (port, portPosition, elBBox) {
+	    const portLabelPosition = port.label.position || {};
+	    const portLabelPositionArgs = portLabelPosition.args || {};
+	    const portLabelPositionLayoutCallback = portLabelPosition.layoutCallback;
+	    if (portLabelPositionLayoutCallback) {
+	      return portLabelPositionLayoutCallback(portPosition, elBBox, portLabelPositionArgs);
 	    }
 	    return null;
 	  },
 	  _init: function (data) {
-	    // prepare groups
+	    // Prepare groups:
+	    // NOTE: This overwrites passed group properties with evaluated group properties.
 	    if (isObject(data.groups)) {
 	      var groups = Object.keys(data.groups);
 	      for (var i = 0, n = groups.length; i < n; i++) {
@@ -17153,7 +17218,8 @@ var joint = (function (exports) {
 	      }
 	    }
 
-	    // prepare ports
+	    // Prepare ports:
+	    // NOTE: This overwrites passed port properties with evaluated port properties, plus mixed-in evaluated group properties (see above).
 	    var ports = toArray$1(data.items);
 	    for (var j = 0, m = ports.length; j < m; j++) {
 	      const resolvedPort = this._evaluatePort(ports[j]);
@@ -17162,23 +17228,155 @@ var joint = (function (exports) {
 	    }
 	  },
 	  _evaluateGroup: function (group) {
-	    return merge(group, {
-	      position: this._getPosition(group.position, true),
-	      label: this._getLabel(group, true)
+	    return merge({}, group, {
+	      position: this._evaluateGroupPositionProperty(group),
+	      label: this._evaluateGroupLabelProperty(group)
+	    });
+	  },
+	  _evaluateGroupPositionProperty: function (group) {
+	    const namespace = this.portLayoutNamespace;
+	    const groupPosition = group.position;
+	    if (groupPosition === undefined) {
+	      const layoutCallback = this._resolveLayoutCallbackOrThrow(namespace, DEFAULT_PORT_POSITION_NAME, 'Default port group');
+	      return {
+	        layoutCallback
+	      };
+	    } else if (isFunction(groupPosition)) {
+	      return {
+	        layoutCallback: groupPosition
+	      };
+	    } else if (isObject(groupPosition)) {
+	      if (groupPosition.name) {
+	        const layoutCallback = this._resolveLayoutCallbackOrThrow(namespace, groupPosition.name, 'Provided port group');
+	        return {
+	          layoutCallback,
+	          args: groupPosition.args
+	        };
+	      } else {
+	        const layoutCallback = this._resolveLayoutCallbackOrThrow(namespace, DEFAULT_PORT_POSITION_NAME, 'Default port group');
+	        return {
+	          layoutCallback,
+	          args: groupPosition.args
+	        };
+	      }
+	    } else if (isString(groupPosition)) {
+	      // TODO: Remove legacy signature (see `this._evaluateGroupLabelPositionProperty()`).
+	      const layoutCallback = this._resolveLayoutCallbackOrThrow(namespace, groupPosition, 'Provided port group');
+	      return {
+	        layoutCallback
+	      };
+	    } else if (Array.isArray(groupPosition)) {
+	      // TODO: Remove legacy signature (see `this._evaluateGroupLabelPositionProperty()`).
+	      const layoutCallback = this._resolveLayoutCallbackOrThrow(namespace, DEFAULT_ABSOLUTE_PORT_POSITION_NAME, 'Default absolute port group');
+	      return {
+	        layoutCallback,
+	        args: {
+	          x: groupPosition[0],
+	          y: groupPosition[1]
+	        }
+	      };
+	    } else {
+	      throw new Error('dia.Element: Provided port group position value has an invalid type.');
+	    }
+	  },
+	  _evaluateGroupLabelProperty: function (group) {
+	    const groupLabel = group.label;
+	    if (!groupLabel) {
+	      return {
+	        position: this._evaluateGroupLabelPositionProperty({})
+	      };
+	    }
+	    return merge({}, groupLabel, {
+	      position: this._evaluateGroupLabelPositionProperty(groupLabel)
 	    });
 	  },
+	  _evaluateGroupLabelPositionProperty: function (groupLabel) {
+	    const namespace = this.portLabelLayoutNamespace;
+	    const groupLabelPosition = groupLabel.position;
+	    if (groupLabelPosition === undefined) {
+	      const layoutCallback = this._resolveLayoutCallbackOrThrow(namespace, DEFAULT_PORT_LABEL_POSITION_NAME, 'Default port group label');
+	      return {
+	        layoutCallback
+	      };
+	    } else if (isFunction(groupLabelPosition)) {
+	      return {
+	        layoutCallback: groupLabelPosition
+	      };
+	    } else if (isObject(groupLabelPosition)) {
+	      if (groupLabelPosition.name) {
+	        const layoutCallback = this._resolveLayoutCallbackOrThrow(namespace, groupLabelPosition.name, 'Provided port group label');
+	        return {
+	          layoutCallback,
+	          args: groupLabelPosition.args
+	        };
+	      } else {
+	        const layoutCallback = this._resolveLayoutCallbackOrThrow(namespace, DEFAULT_PORT_LABEL_POSITION_NAME, 'Default port group label');
+	        return {
+	          layoutCallback,
+	          args: groupLabelPosition.args
+	        };
+	      }
+	    } else {
+	      throw new Error('dia.Element: Provided port group label position value has an invalid type.');
+	    }
+	  },
 	  _evaluatePort: function (port) {
-	    var evaluated = assign({}, port);
-	    var group = this.getGroup(port.group);
+	    const group = this.getGroup(port.group);
+	    const evaluated = assign({}, port);
 	    evaluated.markup = evaluated.markup || group.markup;
 	    evaluated.attrs = merge({}, group.attrs, evaluated.attrs);
-	    evaluated.position = this._createPositionNode(group, evaluated);
-	    evaluated.label = merge({}, group.label, this._getLabel(evaluated));
-	    evaluated.z = this._getZIndex(group, evaluated);
+	    evaluated.position = this._evaluatePortPositionProperty(group, evaluated);
+	    evaluated.label = this._evaluatePortLabelProperty(group, evaluated);
+	    evaluated.z = this._evaluatePortZProperty(group, evaluated);
 	    evaluated.size = assign({}, group.size, evaluated.size);
 	    return evaluated;
 	  },
-	  _getZIndex: function (group, port) {
+	  _evaluatePortPositionProperty: function (group, port) {
+	    return {
+	      args: merge({},
+	      // NOTE: `x != null` is equivalent to `x !== null && x !== undefined`.
+	      group.position != null ? group.position.args : {},
+	      // Port can overwrite `group.position.args` via `port.position.args` or `port.args`.
+	      // TODO: Remove `port.args` backwards compatibility.
+	      port.position != null && port.position.args != null ? port.position.args : port.args)
+	    };
+	  },
+	  _evaluatePortLabelProperty: function (group, port) {
+	    const groupLabel = group.label;
+	    const portLabel = port.label;
+	    if (!portLabel) {
+	      return assign({}, groupLabel);
+	    }
+	    return merge({}, groupLabel, merge({}, portLabel, {
+	      position: this._evaluatePortLabelPositionProperty(portLabel)
+	    }));
+	  },
+	  _evaluatePortLabelPositionProperty: function (portLabel) {
+	    const namespace = this.portLabelLayoutNamespace;
+	    const portLabelPosition = portLabel.position;
+	    if (portLabelPosition === undefined) {
+	      return {};
+	    } else if (isFunction(portLabelPosition)) {
+	      return {
+	        layoutCallback: portLabelPosition
+	      };
+	    } else if (isObject(portLabelPosition)) {
+	      if (portLabelPosition.name) {
+	        const layoutCallback = this._resolveLayoutCallbackOrThrow(namespace, portLabelPosition.name, 'Provided port label');
+	        return {
+	          layoutCallback,
+	          args: portLabelPosition.args
+	        };
+	      } else {
+	        return {
+	          args: portLabelPosition.args
+	        };
+	      }
+	    } else {
+	      throw new Error('dia.Element: Provided port label position value has an invalid type.');
+	    }
+	  },
+	  _evaluatePortZProperty: function (group, port) {
 	    if (isNumber(port.z)) {
 	      return port.z;
 	    }
@@ -17187,47 +17385,12 @@ var joint = (function (exports) {
 	    }
 	    return 'auto';
 	  },
-	  _createPositionNode: function (group, port) {
-	    return merge({
-	      name: 'left',
-	      args: {}
-	    }, group.position, {
-	      // TODO: remove `port.args` backwards compatibility
-	      // NOTE: `x != null` is equivalent to `x !== null && x !== undefined`
-	      args: port.position != null && port.position.args != null ? port.position.args : port.args
-	    });
-	  },
-	  _getPosition: function (position, setDefault) {
-	    var args = {};
-	    var positionName;
-	    if (isFunction(position)) {
-	      positionName = 'fn';
-	      args.fn = position;
-	    } else if (isString(position)) {
-	      positionName = position;
-	    } else if (position === undefined) {
-	      positionName = setDefault ? 'left' : null;
-	    } else if (Array.isArray(position)) {
-	      positionName = 'absolute';
-	      args.x = position[0];
-	      args.y = position[1];
-	    } else if (isObject(position)) {
-	      positionName = position.name;
-	      assign(args, position.args);
-	    }
-	    var result = {
-	      args: args
-	    };
-	    if (positionName) {
-	      result.name = positionName;
+	  _resolveLayoutCallbackOrThrow: function (namespace, name, errorSubstring) {
+	    const layoutCallback = namespace[name];
+	    if (!layoutCallback) {
+	      throw new Error(`dia.Element: ${errorSubstring} layout name is not recognized.`);
 	    }
-	    return result;
-	  },
-	  _getLabel: function (item, setDefaults) {
-	    var label = item.label || {};
-	    var ret = label;
-	    ret.position = this._getPosition(label.position, setDefaults);
-	    return ret;
+	    return layoutCallback;
 	  }
 	};
 	const elementPortPrototype = {
@@ -17567,7 +17730,7 @@ var joint = (function (exports) {
 	    if (this._portSettingsData) {
 	      prevPortData = this._portSettingsData.getPorts();
 	    }
-	    this._portSettingsData = new PortData(this.get('ports'));
+	    this._portSettingsData = new PortData(this);
 	    var curPortData = this._portSettingsData.getPorts();
 	    if (prevPortData) {
 	      var added = curPortData.filter(function (item) {
@@ -18275,8 +18438,10 @@ var joint = (function (exports) {
 	  _fitToElements: function (opt = {}) {
 	    let minBBox = null;
 	    if (opt.minRect) {
-	      // Coerce `opt.minRect` to g.Rect (missing properties = 0).
-	      minBBox = new Rect(opt.minRect);
+	      // Coerce `opt.minRect` to g.Rect
+	      // (missing properties are taken from this element's current bbox).
+	      const minRect = assign(this.getBBox(), opt.minRect);
+	      minBBox = new Rect(minRect);
 	    }
 	    const elementsBBox = this.graph.getCellsBBox(opt.elements);
 	    // If no `opt.elements` were provided, do nothing (but if `opt.minRect` was provided, set that as this element's bbox instead).
@@ -18946,9 +19111,12 @@ var joint = (function (exports) {
 	    svgforeignobject: function () {
 	      return !!document.createElementNS && /SVGForeignObject/.test({}.toString.call(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')));
 	    },
-	    // works for iOS browsers too
-	    isSafari: function () {
-	      return /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);
+	    // works for: (1) macOS Safari, (2) any WKWebView, (3) any iOS browser (including Safari, CriOS, EdgiOS, OPR, FxiOS)
+	    isAppleWebKit: function () {
+	      const userAgent = navigator.userAgent;
+	      const isAppleWebKit = /applewebkit/i.test(userAgent);
+	      const isChromium = /chrome/i.test(userAgent); // e.g. Chrome, Edge, Opera, SamsungBrowser
+	      return isAppleWebKit && !isChromium;
 	    }
 	  },
 	  addTest: function (name, fn) {
@@ -20822,7 +20990,7 @@ var joint = (function (exports) {
 	// Creating a ViewBase creates its initial element outside of the DOM,
 	// if an existing element is not provided...
 	var ViewBase = function (options) {
-	  this.cid = uniqueId('view');
+	  this.cid = options && options.cid || uniqueId('view');
 	  this.preinitialize.apply(this, arguments);
 	  assign(this, pick(options, viewOptions));
 	  this._ensureElement();
@@ -20978,8 +21146,11 @@ var joint = (function (exports) {
 	  childNodes: null,
 	  DETACHABLE: true,
 	  UPDATE_PRIORITY: 2,
+	  /** @deprecated is no longer used (moved to Paper) */
 	  FLAG_INSERT: 1 << 30,
+	  /** @deprecated is no longer used */
 	  FLAG_REMOVE: 1 << 29,
+	  /** @deprecated is no longer used */
 	  FLAG_INIT: 1 << 28,
 	  constructor: function (options) {
 	    this.requireSetThemeOverride = options && !!options.theme;
@@ -22091,6 +22262,31 @@ var joint = (function (exports) {
 	      return null;
 	    }
 	  },
+	  // Check if the cellView has a highlighter with the given `id`.
+	  // If no `id` is provided, it checks if the cellView has any highlighter.
+	  has(cellView, id = null) {
+	    const {
+	      cid
+	    } = cellView;
+	    const {
+	      _views
+	    } = this;
+	    const refs = _views[cid];
+	    if (!refs) return false;
+	    if (id === null) {
+	      // any highlighter
+	      for (let hid in refs) {
+	        if (refs[hid] instanceof this) return true;
+	      }
+	      return false;
+	    } else {
+	      // single highlighter
+	      if (id in refs) {
+	        if (refs[id] instanceof this) return true;
+	      }
+	      return false;
+	    }
+	  },
 	  add(cellView, nodeSelector, id, opt = {}) {
 	    if (!id) throw new Error('dia.HighlighterView: An ID required.');
 	    // Search the existing view amongst all the highlighters
@@ -28834,6 +29030,14 @@ var joint = (function (exports) {
 	  }
 	});
 
+	// Internal tag to identify this object as a cell view instance.
+	// Used instead of `instanceof` for performance and cross-frame safety.
+
+	const CELL_VIEW_MARKER = Symbol('joint.cellViewMarker');
+	Object.defineProperty(CellView.prototype, CELL_VIEW_MARKER, {
+	  value: true
+	});
+
 	const Flags$1 = {
 	  TOOLS: CellView.Flags.TOOLS,
 	  UPDATE: 'UPDATE',
@@ -29187,7 +29391,8 @@ var joint = (function (exports) {
 	      });
 	      data.initialParentId = parentId;
 	    } else {
-	      data.initialParentId = null;
+	      // `data.initialParentId` can be explicitly set to a dummy value to enable validation of unembedding.
+	      data.initialParentId = data.initialParentId || null;
 	    }
 	  },
 	  processEmbedding: function (data = {}, evt, x, y) {
@@ -29666,6 +29871,8 @@ var joint = (function (exports) {
 	  _labelCache: null,
 	  _labelSelectors: null,
 	  _V: null,
+	  _sourceMagnet: null,
+	  _targetMagnet: null,
 	  _dragData: null,
 	  // deprecated
 
@@ -29702,23 +29909,34 @@ var joint = (function (exports) {
 	  initFlag: [Flags.RENDER, Flags.SOURCE, Flags.TARGET, Flags.TOOLS],
 	  UPDATE_PRIORITY: 1,
 	  EPSILON: 1e-6,
-	  confirmUpdate: function (flags, opt) {
-	    opt || (opt = {});
+	  confirmUpdate: function (flags, opt = {}) {
+	    const {
+	      paper,
+	      model
+	    } = this;
+	    const {
+	      attributes
+	    } = model;
+	    const {
+	      source: {
+	        id: sourceId
+	      },
+	      target: {
+	        id: targetId
+	      }
+	    } = attributes;
 	    if (this.hasFlag(flags, Flags.SOURCE)) {
-	      if (!this.updateEndProperties('source')) return flags;
+	      this._sourceMagnet = null; // reset cached source magnet
+	      this.checkEndModel('source', sourceId);
 	      flags = this.removeFlag(flags, Flags.SOURCE);
 	    }
 	    if (this.hasFlag(flags, Flags.TARGET)) {
-	      if (!this.updateEndProperties('target')) return flags;
+	      this._targetMagnet = null; // reset cached target magnet
+	      this.checkEndModel('target', targetId);
 	      flags = this.removeFlag(flags, Flags.TARGET);
 	    }
-	    const {
-	      paper,
-	      sourceView,
-	      targetView
-	    } = this;
-	    if (paper && (sourceView && !paper.isViewMounted(sourceView) || targetView && !paper.isViewMounted(targetView))) {
-	      // Wait for the sourceView and targetView to be rendered
+	    if (paper && (sourceId && !paper.isCellVisible(sourceId) || targetId && !paper.isCellVisible(targetId))) {
+	      // Wait for the source and target views to be rendered
 	      return flags;
 	    }
 	    if (this.hasFlag(flags, Flags.RENDER)) {
@@ -29726,18 +29944,12 @@ var joint = (function (exports) {
 	      this.updateHighlighters(true);
 	      this.updateTools(opt);
 	      flags = this.removeFlag(flags, [Flags.RENDER, Flags.UPDATE, Flags.LABELS, Flags.TOOLS, Flags.CONNECTOR]);
-	      if (env.test('isSafari')) {
-	        this.__fixSafariBug268376();
+	      if (env.test('isAppleWebKit')) {
+	        this.__fixWebKitBug268376();
 	      }
 	      return flags;
 	    }
 	    let updateHighlighters = false;
-	    const {
-	      model
-	    } = this;
-	    const {
-	      attributes
-	    } = model;
 	    let updateLabels = this.hasFlag(flags, Flags.LABELS);
 	    if (updateLabels) {
 	      this.onLabelsChange(model, attributes.labels, opt);
@@ -29776,8 +29988,8 @@ var joint = (function (exports) {
 	    }
 	    return flags;
 	  },
-	  __fixSafariBug268376: function () {
-	    // Safari has a bug where any change after the first render is not reflected in the DOM.
+	  __fixWebKitBug268376: function () {
+	    // WebKit has a bug where any change after the first render is not reflected in the DOM.
 	    // https://bugs.webkit.org/show_bug.cgi?id=268376
 	    const {
 	      el
@@ -30446,40 +30658,11 @@ var joint = (function (exports) {
 	      if (id && id in metrics) delete metrics[id].magnetMatrix;
 	    }
 	  },
-	  updateEndProperties: function (endType) {
-	    const {
-	      model,
-	      paper
-	    } = this;
-	    const endViewProperty = `${endType}View`;
-	    const endDef = model.get(endType);
-	    const endId = endDef && endDef.id;
-	    if (!endId) {
-	      // the link end is a point ~ rect 0x0
-	      this[endViewProperty] = null;
-	      this.updateEndMagnet(endType);
-	      return true;
-	    }
-	    const endModel = paper.getModelById(endId);
-	    if (!endModel) throw new Error('LinkView: invalid ' + endType + ' cell.');
-	    const endView = endModel.findView(paper);
-	    if (!endView) {
-	      // A view for a model should always exist
-	      return false;
-	    }
-	    this[endViewProperty] = endView;
-	    this.updateEndMagnet(endType);
-	    return true;
-	  },
-	  updateEndMagnet: function (endType) {
-	    const endMagnetProperty = `${endType}Magnet`;
-	    const endView = this.getEndView(endType);
-	    if (endView) {
-	      let connectedMagnet = endView.getMagnetFromLinkEnd(this.model.get(endType));
-	      if (connectedMagnet === endView.el) connectedMagnet = null;
-	      this[endMagnetProperty] = connectedMagnet;
-	    } else {
-	      this[endMagnetProperty] = null;
+	  checkEndModel: function (endType, endId) {
+	    if (!endId) return;
+	    const endModel = this.paper.getModelById(endId);
+	    if (!endModel) {
+	      throw new Error(`LinkView: invalid ${endType} cell.`);
 	    }
 	  },
 	  _getLabelPositionProperty: function (idx) {
@@ -31244,52 +31427,30 @@ var joint = (function (exports) {
 	    let isSnapped = false;
 	    // checking view in close area of the pointer
 
-	    var r = snapLinks.radius || 50;
-	    var viewsInArea = paper.findElementViewsInArea({
-	      x: x - r,
-	      y: y - r,
-	      width: 2 * r,
-	      height: 2 * r
-	    }, snapLinks.findInAreaOptions);
-	    var prevClosestView = data.closestView || null;
-	    var prevClosestMagnet = data.closestMagnet || null;
-	    var prevMagnetProxy = data.magnetProxy || null;
+	    const radius = snapLinks.radius || 50;
+	    const findInAreaOptions = snapLinks.findInAreaOptions;
+	    const prevClosestView = data.closestView || null;
+	    const prevClosestMagnet = data.closestMagnet || null;
+	    const prevMagnetProxy = data.magnetProxy || null;
 	    data.closestView = data.closestMagnet = data.magnetProxy = null;
-	    var minDistance = Number.MAX_VALUE;
-	    var pointer = new Point(x, y);
-	    viewsInArea.forEach(function (view) {
-	      const candidates = [];
-	      // skip connecting to the element in case '.': { magnet: false } attribute present
-	      if (view.el.getAttribute('magnet') !== 'false') {
-	        candidates.push({
-	          bbox: view.model.getBBox(),
-	          magnet: view.el
-	        });
+	    const isValidCandidate = (view, magnet) => {
+	      // Do not snap to the current view
+	      if (view === this) {
+	        return false;
 	      }
-	      view.$('[magnet]').toArray().forEach(magnet => {
-	        candidates.push({
-	          bbox: view.getNodeBBox(magnet),
-	          magnet
-	        });
-	      });
-	      candidates.forEach(candidate => {
-	        const {
-	          magnet,
-	          bbox
-	        } = candidate;
-	        // find distance from the center of the model to pointer coordinates
-	        const distance = bbox.center().squaredDistance(pointer);
-	        // the connection is looked up in a circle area by `distance < r`
-	        if (distance < minDistance) {
-	          const isAlreadyValidated = prevClosestMagnet === magnet;
-	          if (isAlreadyValidated || paper.options.validateConnection.apply(paper, data.validateConnectionArgs(view, view.el === magnet ? null : magnet))) {
-	            minDistance = distance;
-	            data.closestView = view;
-	            data.closestMagnet = magnet;
-	          }
-	        }
-	      });
-	    }, this);
+	      const isAlreadyValidated = prevClosestMagnet === magnet;
+	      return isAlreadyValidated || paper.options.validateConnection.apply(paper, data.validateConnectionArgs(view, view.el === magnet ? null : magnet));
+	    };
+	    const closest = paper.findClosestMagnetToPoint({
+	      x,
+	      y
+	    }, {
+	      radius,
+	      findInAreaOptions,
+	      filter: isValidCandidate
+	    });
+	    data.closestView = closest ? closest.view : null;
+	    data.closestMagnet = closest ? closest.magnet : null;
 	    var end;
 	    var magnetProxy = null;
 	    var closestView = data.closestView;
@@ -31583,6 +31744,72 @@ var joint = (function (exports) {
 	}, {
 	  Flags: Flags
 	});
+	Object.defineProperty(LinkView.prototype, 'sourceView', {
+	  enumerable: true,
+	  get: function () {
+	    const source = this.model.attributes.source;
+	    if (source.id && this.paper) {
+	      return this.paper.findViewByModel(source.id);
+	    }
+	    return null;
+	  }
+	});
+	Object.defineProperty(LinkView.prototype, 'targetView', {
+	  enumerable: true,
+	  get: function () {
+	    const target = this.model.attributes.target;
+	    if (target.id && this.paper) {
+	      return this.paper.findViewByModel(target.id);
+	    }
+	    return null;
+	  }
+	});
+	Object.defineProperty(LinkView.prototype, 'sourceMagnet', {
+	  enumerable: true,
+	  get: function () {
+	    const sourceView = this.sourceView;
+	    if (!sourceView) return null;
+	    let sourceMagnet = null;
+	    // Check if the magnet is already found and cached.
+	    // We need to check if the cached magnet is still part of the source view.
+	    // The source view might have been disposed and recreated, or the magnet might have been changed.
+	    const cachedSourceMagnet = this._sourceMagnet;
+	    if (cachedSourceMagnet && sourceView.el.contains(cachedSourceMagnet)) {
+	      sourceMagnet = cachedSourceMagnet;
+	    } else {
+	      // If the cached magnet is not valid, we need to find the magnet.
+	      sourceMagnet = sourceView.getMagnetFromLinkEnd(this.model.attributes.source);
+	    }
+	    this._sourceMagnet = sourceMagnet;
+	    if (sourceMagnet === sourceView.el) {
+	      // If the source magnet is the element itself, we treat it as no magnet.
+	      return null;
+	    }
+	    return sourceMagnet;
+	  }
+	});
+	Object.defineProperty(LinkView.prototype, 'targetMagnet', {
+	  enumerable: true,
+	  get: function () {
+	    const targetView = this.targetView;
+	    if (!targetView) return null;
+	    let targetMagnet = null;
+	    // Check if the magnet is already found and cached (See `sourceMagnet` for explanation).
+	    const cachedTargetMagnet = this._targetMagnet;
+	    if (cachedTargetMagnet && targetView.el.contains(cachedTargetMagnet)) {
+	      targetMagnet = cachedTargetMagnet;
+	    } else {
+	      // If the cached magnet is not valid, we need to find the magnet.
+	      targetMagnet = targetView.getMagnetFromLinkEnd(this.model.attributes.target);
+	    }
+	    this._targetMagnet = targetMagnet;
+	    if (targetMagnet === targetView.el) {
+	      // If the target magnet is the element itself, we treat it as no magnet.
+	      return null;
+	    }
+	    return targetMagnet;
+	  }
+	});
 	Object.defineProperty(LinkView.prototype, 'sourceBBox', {
 	  enumerable: true,
 	  get: function () {
@@ -31614,6 +31841,128 @@ var joint = (function (exports) {
 	  }
 	});
 
+	/**
+	 * Deque implementation for managing a double-ended queue.
+	 * This implementation uses a doubly linked list for efficient operations.
+	 * It supports operations like push, pop, move to head, and delete.
+	 * The deque maintains a map for O(1) access to nodes by key.
+	 */
+	class Deque {
+	  constructor() {
+	    this.head = null;
+	    this.tail = null;
+	    this.map = new Map(); // key -> node
+	  }
+
+	  // Return an array of keys in the deque
+	  keys() {
+	    let current = this.head;
+	    const keys = [];
+	    while (current) {
+	      keys.push(current.key);
+	      current = current.next;
+	    }
+	    return keys;
+	  }
+
+	  // Return the first node and remove it from the deque
+	  popHead() {
+	    if (!this.head) return null;
+	    const node = this.head;
+	    this.map.delete(node.key);
+	    this.head = node.next;
+	    if (this.head) {
+	      this.head.prev = null;
+	    } else {
+	      this.tail = null;
+	    }
+	    return node;
+	  }
+
+	  // Add a new node to the back of the deque
+	  pushTail(key, value) {
+	    if (this.map.has(key)) {
+	      throw new Error(`Key "${key}" already exists in the deque.`);
+	    }
+	    const node = {
+	      key,
+	      value,
+	      prev: null,
+	      next: null
+	    };
+	    this.map.set(key, node);
+	    if (!this.tail) {
+	      this.head = this.tail = node;
+	    } else {
+	      this.tail.next = node;
+	      node.prev = this.tail;
+	      this.tail = node;
+	    }
+	  }
+
+	  // Move a node from the deque to the head
+	  moveToHead(key) {
+	    const node = this.map.get(key);
+	    if (!node) return;
+	    if (node === this.head) return; // already at head
+	    // Remove node from its current position
+	    if (node.prev) node.prev.next = node.next;
+	    if (node.next) node.next.prev = node.prev;
+	    if (node === this.tail) this.tail = node.prev; // if it's the tail
+	    if (node === this.head) this.head = node.next; // if it's the head
+	    // Move node to head
+	    node.prev = null;
+	    node.next = this.head;
+	    if (this.head) {
+	      this.head.prev = node; // link old head back to new head
+	    }
+	    this.head = node; // update head to be the moved node
+	    if (!this.tail) {
+	      this.tail = node; // if it was the only node, set tail as well
+	    }
+	  }
+
+	  // Return the first node without removing it
+	  peekHead() {
+	    return this.head || null;
+	  }
+
+	  // Move the head node to the back of the deque
+	  rotate() {
+	    if (!this.head || !this.head.next) return;
+	    this.tail.next = this.head; // link tail to head
+	    this.head.prev = this.tail; // link head back to tail
+	    this.tail = this.head; // update tail to be the old head
+	    this.head = this.head.next; // move head to the next node
+	    this.tail.next = null; // set new tail's next to null
+	    this.head.prev = null; // set new head's prev to null
+	  }
+
+	  // Remove a node from the deque
+	  delete(key) {
+	    const node = this.map.get(key);
+	    if (!node) return;
+	    if (node.prev) node.prev.next = node.next;else this.head = node.next;
+	    if (node.next) node.next.prev = node.prev;else this.tail = node.prev;
+	    this.map.delete(key);
+	  }
+
+	  // Does the deque contain a node with the given key?
+	  has(key) {
+	    return this.map.has(key);
+	  }
+
+	  // Get the node with the given key
+	  get(key) {
+	    return this.map.get(key) || null;
+	  }
+
+	  // Number of nodes in the deque
+	  get length() {
+	    return this.map.size;
+	  }
+	}
+
 	const GridLayer = PaperLayer.extend({
 	  style: {
 	    'pointer-events': 'none'
@@ -31855,6 +32204,7 @@ var joint = (function (exports) {
 	}, {
 	  name: LayersNames.TOOLS
 	}];
+	const CELL_VIEW_PLACEHOLDER_MARKER = Symbol('joint.cellViewPlaceholderMarker');
 	const Paper = View.extend({
 	  className: 'paper',
 	  options: {
@@ -32005,6 +32355,7 @@ var joint = (function (exports) {
 	    sorting: sortingTypes.APPROX,
 	    frozen: false,
 	    autoFreeze: false,
+	    viewManagement: false,
 	    // no docs yet
 	    onViewUpdate: function (view, flag, priority, opt, paper) {
 	      // Do not update connected links when:
@@ -32012,7 +32363,7 @@ var joint = (function (exports) {
 	      // 2. the view was just mounted (added back to the paper by viewport function)
 	      // 3. the change was marked as `isolate`.
 	      // 4. the view model was just removed from the graph
-	      if (flag & (view.FLAG_INSERT | view.FLAG_REMOVE) || opt.mounting || opt.isolate) return;
+	      if (flag & (paper.FLAG_INSERT | paper.FLAG_REMOVE) || opt.mounting || opt.isolate) return;
 	      paper.requestConnectedLinksUpdate(view, priority, opt);
 	    },
 	    // no docs yet
@@ -32111,6 +32462,10 @@ var joint = (function (exports) {
 	  DEFAULT_FIND_BUFFER: 200,
 	  // Default layer to insert the cell views into.
 	  DEFAULT_CELL_LAYER: LayersNames.CELLS,
+	  // Update flags
+	  FLAG_INSERT: 1 << 30,
+	  FLAG_REMOVE: 1 << 29,
+	  FLAG_INIT: 1 << 28,
 	  init: function () {
 	    const {
 	      options
@@ -32122,6 +32477,10 @@ var joint = (function (exports) {
 	    }
 	    const model = this.model = options.model || new Graph();
 
+	    // This property tells us if we need to keep the compatibility
+	    // with the v4 API and behavior.
+	    this.legacyMode = !options.viewManagement;
+
 	    // Layers (SVGGroups)
 	    this._layers = {
 	      viewsMap: {},
@@ -32135,6 +32494,8 @@ var joint = (function (exports) {
 
 	    // Hash of all cell views.
 	    this._views = {};
+	    this._viewPlaceholders = {};
+	    this._idToCid = {};
 
 	    // Mouse wheel events buffer
 	    this._mw_evt_buffer = {
@@ -32144,24 +32505,21 @@ var joint = (function (exports) {
 
 	    // 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 () {
 	    if (this._updates && this._updates.id) cancelFrame(this._updates.id);
 	    return this._updates = {
 	      id: null,
 	      priorities: [{}, {}, {}],
-	      unmountedCids: [],
-	      mountedCids: [],
-	      unmounted: {},
-	      mounted: {},
+	      unmountedList: new Deque(),
+	      mountedList: new Deque(),
 	      count: 0,
 	      keyFrozen: false,
 	      freezeKey: null,
 	      sort: false,
 	      disabled: false,
-	      idle: false
+	      idle: false,
+	      freshAfterReset: true
 	    };
 	  },
 	  startListening: function () {
@@ -32184,14 +32542,21 @@ var joint = (function (exports) {
 	    }
 	  },
 	  onCellRemoved: function (cell, _, opt) {
-	    const view = this.findViewByModel(cell);
-	    if (view) this.requestViewUpdate(view, view.FLAG_REMOVE, view.UPDATE_PRIORITY, opt);
+	    const viewLike = this._getCellViewLike(cell);
+	    if (!viewLike) return;
+	    if (viewLike[CELL_VIEW_PLACEHOLDER_MARKER]) {
+	      this._unregisterCellViewPlaceholder(viewLike);
+	    } else {
+	      this.requestViewUpdate(viewLike, this.FLAG_REMOVE, viewLike.UPDATE_PRIORITY, opt);
+	    }
 	  },
 	  onCellChange: function (cell, opt) {
 	    if (cell === this.model.attributes.cells) return;
 	    if (cell.hasChanged('layer') || 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);
+	      const viewLike = this._getCellViewLike(cell);
+	      if (viewLike) {
+	        this.requestViewUpdate(viewLike, this.FLAG_INSERT, viewLike.UPDATE_PRIORITY, opt);
+	      }
 	    }
 	  },
 	  onGraphReset: function (collection, opt) {
@@ -32203,7 +32568,7 @@ var joint = (function (exports) {
 	    this.sortViews();
 	  },
 	  onGraphBatchStop: function (data) {
-	    if (this.isFrozen()) return;
+	    if (this.isFrozen() || this.isIdle()) return;
 	    var name = data && data.batchName;
 	    var graph = this.model;
 	    if (!this.isAsync()) {
@@ -32263,6 +32628,16 @@ var joint = (function (exports) {
 	      // Return the default highlighting options into the user specified options.
 	      options.highlighting = defaultsDeep({}, highlighting, defaultHighlighting);
 	    }
+	    // Copy and set defaults for the view management options.
+	    options.viewManagement = defaults({}, options.viewManagement, {
+	      // Whether to lazy initialize the cell views.
+	      lazyInitialize: !!options.viewManagement,
+	      // default `true` if options.viewManagement provided
+	      // Whether to add initialized cell views into the unmounted queue.
+	      initializeUnmounted: false,
+	      // Whether to dispose the cell views that are not visible.
+	      disposeHidden: false
+	    });
 	  },
 	  children: function () {
 	    var ns = V.namespace;
@@ -32641,47 +33016,46 @@ var joint = (function (exports) {
 	      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);
+	        var linkView = this._getCellViewLike(link);
 	        if (!linkView) continue;
-	        var flagLabels = ['UPDATE'];
-	        if (link.getTargetCell() === model) flagLabels.push('TARGET');
-	        if (link.getSourceCell() === model) flagLabels.push('SOURCE');
+	        // We do not have to update placeholder views.
+	        // They will be updated on initial render.
+	        if (linkView[CELL_VIEW_PLACEHOLDER_MARKER]) continue;
 	        var nextPriority = Math.max(priority + 1, linkView.UPDATE_PRIORITY);
-	        this.scheduleViewUpdate(linkView, linkView.getFlag(flagLabels), nextPriority, opt);
+	        this.scheduleViewUpdate(linkView, linkView.getFlag(LinkView.Flags.UPDATE), nextPriority, opt);
 	      }
 	    }
 	  },
 	  forcePostponedViewUpdate: function (view, flag) {
 	    if (!view || !(view instanceof CellView)) return false;
-	    var model = view.model;
+	    const model = view.model;
 	    if (model.isElement()) return false;
-	    if ((flag & view.getFlag(['SOURCE', 'TARGET'])) === 0) {
-	      var dumpOptions = {
-	        silent: true
-	      };
-	      // 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, dumpOptions);
-	        view.updateEndMagnet('source');
-	      }
-	      var targetFlag = 0;
-	      var targetView = this.findViewByModel(model.getTargetCell());
-	      if (targetView && !this.isViewMounted(targetView)) {
-	        targetFlag = this.dumpView(targetView, dumpOptions);
-	        view.updateEndMagnet('target');
-	      }
-	      if (sourceFlag === 0 && targetFlag === 0) {
-	        // If leftover flag is 0, all view updates were done.
-	        return !this.dumpView(view, dumpOptions);
-	      }
+	    const dumpOptions = {
+	      silent: true
+	    };
+	    // LinkView is waiting for the target or the source cellView to be rendered
+	    // This can happen when the cells are not in the viewport.
+	    let sourceFlag = 0;
+	    const sourceCell = model.getSourceCell();
+	    if (sourceCell && !this.isCellVisible(sourceCell)) {
+	      const sourceView = this.findViewByModel(sourceCell);
+	      sourceFlag = this.dumpView(sourceView, dumpOptions);
+	    }
+	    let targetFlag = 0;
+	    const targetCell = model.getTargetCell();
+	    if (targetCell && !this.isCellVisible(targetCell)) {
+	      const targetView = this.findViewByModel(targetCell);
+	      targetFlag = this.dumpView(targetView, dumpOptions);
+	    }
+	    if (sourceFlag === 0 && targetFlag === 0) {
+	      // If leftover flag is 0, all view updates were done.
+	      return !this.dumpView(view, dumpOptions);
 	    }
 	    return false;
 	  },
 	  requestViewUpdate: function (view, flag, priority, opt) {
 	    opt || (opt = {});
+	    // Note: `scheduleViewUpdate` wakes up the paper if it is idle.
 	    this.scheduleViewUpdate(view, flag, priority, opt);
 	    var isAsync = this.isAsync();
 	    if (this.isFrozen() || isAsync && opt.async !== false) return;
@@ -32694,15 +33068,15 @@ var joint = (function (exports) {
 	      _updates: updates,
 	      options
 	    } = this;
-	    if (updates.idle) {
-	      if (options.autoFreeze) {
-	        updates.idle = false;
-	        this.unfreeze();
-	      }
+	    if (updates.idle && options.autoFreeze) {
+	      this.legacyMode ? this.unfreeze() // Restart rendering loop without original options
+	      : this.wakeUp();
 	    }
 	    const {
 	      FLAG_REMOVE,
-	      FLAG_INSERT,
+	      FLAG_INSERT
+	    } = this;
+	    const {
 	      UPDATE_PRIORITY,
 	      cid
 	    } = view;
@@ -32749,16 +33123,13 @@ var joint = (function (exports) {
 	  dumpView: function (view, opt = {}) {
 	    const flag = this.dumpViewUpdate(view);
 	    if (!flag) return 0;
-	    const shouldNotify = !opt.silent;
-	    if (shouldNotify) this.notifyBeforeRender(opt);
+	    this.notifyBeforeRender(opt);
 	    const leftover = this.updateView(view, flag, opt);
-	    if (shouldNotify) {
-	      const stats = {
-	        updated: 1,
-	        priority: view.UPDATE_PRIORITY
-	      };
-	      this.notifyAfterRender(stats, opt);
-	    }
+	    const stats = {
+	      updated: 1,
+	      priority: view.UPDATE_PRIORITY
+	    };
+	    this.notifyAfterRender(stats, opt);
 	    return leftover;
 	  },
 	  updateView: function (view, flag, opt) {
@@ -32766,10 +33137,12 @@ var joint = (function (exports) {
 	    const {
 	      FLAG_REMOVE,
 	      FLAG_INSERT,
-	      FLAG_INIT,
+	      FLAG_INIT
+	    } = this;
+	    const {
 	      model
 	    } = view;
-	    if (view instanceof CellView) {
+	    if (view[CELL_VIEW_MARKER]) {
 	      if (flag & FLAG_REMOVE) {
 	        this.removeView(model);
 	        return 0;
@@ -32795,58 +33168,70 @@ var joint = (function (exports) {
 	  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];
+	    if (updates.unmountedList.has(cid)) return 0;
+	    const flag = this.FLAG_INSERT;
+	    updates.unmountedList.pushTail(cid, flag);
+	    updates.mountedList.delete(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];
+	    if (updates.mountedList.has(cid)) return 0;
+	    const unmountedItem = updates.unmountedList.get(cid);
+	    const flag = unmountedItem ? unmountedItem.value : 0;
+	    updates.unmountedList.delete(cid);
+	    updates.mountedList.pushTail(cid);
 	    return flag;
 	  },
-	  isViewMounted: function (view) {
-	    if (!view) return false;
-	    var cid = view.cid;
-	    var updates = this._updates;
-	    return cid in updates.mounted;
+	  isCellVisible: function (cellOrId) {
+	    const cid = cellOrId && this._idToCid[cellOrId.id || cellOrId];
+	    if (!cid) return false; // The view is not registered.
+	    return this.isViewMounted(cid);
+	  },
+	  isViewMounted: function (viewOrCid) {
+	    if (!viewOrCid) return false;
+	    let cid;
+	    if (viewOrCid[CELL_VIEW_MARKER] || viewOrCid[CELL_VIEW_PLACEHOLDER_MARKER]) {
+	      cid = viewOrCid.cid;
+	    } else {
+	      cid = viewOrCid;
+	    }
+	    return this._updates.mountedList.has(cid);
 	  },
+	  /**
+	   * @deprecated use `updateCellsVisibility` instead.
+	   * `paper.updateCellsVisibility({ cellVisibility: () => true });`
+	   */
 	  dumpViews: function (opt) {
-	    var passingOpt = defaults({}, opt, {
+	    // Update cell visibility without `cellVisibility` callback i.e. make the cells visible
+	    const passingOpt = defaults({}, opt, {
+	      cellVisibility: null,
 	      viewport: null
 	    });
-	    this.checkViewport(passingOpt);
-	    this.updateViews(passingOpt);
+	    this.updateCellsVisibility(passingOpt);
 	  },
-	  // Synchronous views update
-	  updateViews: function (opt) {
+	  /**
+	   * Process all scheduled updates synchronously.
+	   */
+	  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 batchStats = this.updateViewsBatch({
+	      ...opt,
+	      batchSize: Infinity
+	    });
 	    const stats = {
-	      updated: updateCount,
-	      batches: batchCount,
-	      priority
+	      updated: batchStats.updated,
+	      priority: batchStats.priority,
+	      // For backward compatibility. Will be removed in the future.
+	      batches: Number.isFinite(opt.batchSize) ? Math.ceil(batchStats.updated / opt.batchSize) : 1
 	    };
 	    this.notifyAfterRender(stats, opt);
 	    return stats;
 	  },
 	  hasScheduledUpdates: function () {
-	    const priorities = this._updates.priorities;
+	    const updates = this._updates;
+	    const priorities = updates.priorities;
 	    const priorityIndexes = Object.keys(priorities); // convert priorities to a dense array
 	    let i = priorityIndexes.length;
 	    while (i > 0 && i--) {
@@ -32859,15 +33244,43 @@ var joint = (function (exports) {
 	    opt || (opt = {});
 	    data || (data = {
 	      processed: 0,
-	      priority: MIN_PRIORITY
+	      priority: MIN_PRIORITY,
+	      checkedUnmounted: 0,
+	      checkedMounted: 0
 	    });
 	    const {
 	      _updates: updates,
 	      options
 	    } = this;
-	    const id = updates.id;
-	    if (id) {
+	    const {
+	      id,
+	      mountedList,
+	      unmountedList,
+	      freshAfterReset
+	    } = updates;
+
+	    // Should we run the next batch update this frame?
+	    let runBatchUpdate = true;
+	    if (!id) {
+	      // If there's no scheduled frame, no batch update is needed.
+	      runBatchUpdate = false;
+	    } else {
+	      // Cancel any scheduled frame.
 	      cancelFrame(id);
+	      if (freshAfterReset) {
+	        // First update after a reset.
+	        updates.freshAfterReset = false;
+	        // When `initializeUnmounted` is enabled, there are no scheduled updates.
+	        // We check whether the `mountedList` and `unmountedList` are empty.
+	        if (!this.legacyMode && mountedList.length === 0 && unmountedList.length === 0) {
+	          // No updates to process; We trigger before/after render events via `updateViews`.
+	          // Note: If `autoFreeze` is enabled, 'idle' event triggers next frame.
+	          this.updateViews();
+	          runBatchUpdate = false;
+	        }
+	      }
+	    }
+	    if (runBatchUpdate) {
 	      if (data.processed === 0 && this.hasScheduledUpdates()) {
 	        this.notifyBeforeRender(opt);
 	      }
@@ -32876,7 +33289,7 @@ var joint = (function (exports) {
 	        mountBatchSize: MOUNT_BATCH_SIZE - stats.mounted,
 	        unmountBatchSize: MOUNT_BATCH_SIZE - stats.unmounted
 	      });
-	      const checkStats = this.checkViewport(passingOpt);
+	      const checkStats = this.scheduleCellsVisibilityUpdate(passingOpt);
 	      const unmountCount = checkStats.unmounted;
 	      const mountCount = checkStats.mounted;
 	      let processed = data.processed;
@@ -32897,11 +33310,21 @@ var joint = (function (exports) {
 	        } else {
 	          data.processed = processed;
 	        }
+	        data.checkedUnmounted = 0;
+	        data.checkedMounted = 0;
 	      } else {
-	        if (!updates.idle) {
-	          if (options.autoFreeze) {
+	        data.checkedUnmounted += Math.max(passingOpt.mountBatchSize, 0);
+	        data.checkedMounted += Math.max(passingOpt.unmountBatchSize, 0);
+	        // The `scheduleCellsVisibilityUpdate` could have scheduled some insertions
+	        // (note that removals are currently done synchronously).
+	        if (options.autoFreeze && !this.hasScheduledUpdates()) {
+	          // If there are no updates scheduled and we checked all unmounted views,
+	          if (data.checkedUnmounted >= unmountedList.length && data.checkedMounted >= mountedList.length) {
+	            // We freeze the paper and notify the idle state.
 	            this.freeze();
-	            updates.idle = true;
+	            updates.idle = {
+	              wakeUpOptions: opt
+	            };
 	            this.trigger('render:idle', opt);
 	          }
 	        }
@@ -32920,6 +33343,7 @@ var joint = (function (exports) {
 	    updates.id = nextFrame(this.updateViewsAsync, this, opt, data);
 	  },
 	  notifyBeforeRender: function (opt = {}) {
+	    if (opt.silent) return;
 	    let beforeFn = opt.beforeRender;
 	    if (typeof beforeFn !== 'function') {
 	      beforeFn = this.options.beforeRender;
@@ -32928,6 +33352,7 @@ var joint = (function (exports) {
 	    beforeFn.call(this, opt, this);
 	  },
 	  notifyAfterRender: function (stats, opt = {}) {
+	    if (opt.silent) return;
 	    let afterFn = opt.afterRender;
 	    if (typeof afterFn !== 'function') {
 	      afterFn = this.options.afterRender;
@@ -32937,6 +33362,58 @@ var joint = (function (exports) {
 	    }
 	    this.trigger('render:done', stats, opt);
 	  },
+	  prioritizeCellViewMount: function (cellOrId) {
+	    if (!cellOrId) return false;
+	    const cid = this._idToCid[cellOrId.id || cellOrId];
+	    if (!cid) return false;
+	    const {
+	      unmountedList
+	    } = this._updates;
+	    if (!unmountedList.has(cid)) return false;
+	    // Move the view to the head of the mounted list
+	    unmountedList.moveToHead(cid);
+	    return true;
+	  },
+	  prioritizeCellViewUnmount: function (cellOrId) {
+	    if (!cellOrId) return false;
+	    const cid = this._idToCid[cellOrId.id || cellOrId];
+	    if (!cid) return false;
+	    const {
+	      mountedList
+	    } = this._updates;
+	    if (!mountedList.has(cid)) return false;
+	    // Move the view to the head of the unmounted list
+	    mountedList.moveToHead(cid);
+	    return true;
+	  },
+	  _evalCellVisibility: function (viewLike, isMounted, visibilityCallback) {
+	    if (!visibilityCallback || !viewLike.DETACHABLE) return true;
+	    if (this.legacyMode) {
+	      return visibilityCallback.call(this, viewLike, isMounted, this);
+	    }
+	    // The visibility check runs for CellView only.
+	    if (!viewLike[CELL_VIEW_MARKER] && !viewLike[CELL_VIEW_PLACEHOLDER_MARKER]) return true;
+	    // The cellView model must be a member of this graph.
+	    if (viewLike.model.graph !== this.model) {
+	      // It could have been removed from the graph.
+	      // If the view was mounted, we keep it mounted.
+	      return isMounted;
+	    }
+	    return visibilityCallback.call(this, viewLike.model, isMounted, this);
+	  },
+	  _getCellVisibilityCallback: function (opt) {
+	    const {
+	      options
+	    } = this;
+	    if (this.legacyMode) {
+	      const viewportFn = 'viewport' in opt ? opt.viewport : options.viewport;
+	      if (typeof viewportFn === 'function') return viewportFn;
+	    } else {
+	      const isVisibleFn = 'cellVisibility' in opt ? opt.cellVisibility : options.cellVisibility;
+	      if (typeof isVisibleFn === 'function') return isVisibleFn;
+	    }
+	    return null;
+	  },
 	  updateViewsBatch: function (opt) {
 	    opt || (opt = {});
 	    var batchSize = opt.batchSize || UPDATE_BATCH_SIZE;
@@ -32949,8 +33426,7 @@ var joint = (function (exports) {
 	    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;
+	    const visibilityCb = this._getCellVisibilityCallback(opt);
 	    var postponeViewFn = options.onViewPostponed;
 	    if (typeof postponeViewFn !== 'function') postponeViewFn = null;
 	    var priorityIndexes = Object.keys(priorities); // convert priorities to a dense array
@@ -32964,31 +33440,53 @@ var joint = (function (exports) {
 	        }
 	        var view = views[cid];
 	        if (!view) {
-	          // This should not occur
-	          delete priorityUpdates[cid];
-	          continue;
+	          view = this._viewPlaceholders[cid];
+	          if (!view) {
+	            /**
+	             * This can occur when:
+	             * - the model is removed and a new model with the same id is added
+	             * - the view `initialize` method was overridden and the view was not registered
+	             * - an mvc.View scheduled an update, was removed and paper was not notified
+	             */
+	            delete priorityUpdates[cid];
+	            continue;
+	          }
 	        }
 	        var currentFlag = priorityUpdates[cid];
-	        if ((currentFlag & view.FLAG_REMOVE) === 0) {
+	        if ((currentFlag & this.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)) {
+	          const isMounted = !updates.unmountedList.has(cid);
+	          if (!this._evalCellVisibility(view, isMounted, visibilityCb)) {
 	            // Unmount View
-	            if (!isDetached) {
+	            if (isMounted) {
+	              // The view is currently mounted. Hide the view (detach or remove it).
 	              this.registerUnmountedView(view);
-	              this.detachView(view);
+	              this._hideView(view);
+	            } else {
+	              // The view is not mounted. We can just update the unmounted list.
+	              // We ADD the current flag to the flag that was already scheduled.
+	              this._mergeUnmountedViewScheduledUpdates(cid, currentFlag);
 	            }
-	            updates.unmounted[cid] |= currentFlag;
+	            // Delete the current update as it has been processed.
 	            delete priorityUpdates[cid];
 	            unmountCount++;
 	            continue;
 	          }
 	          // Mount View
-	          if (isDetached) {
-	            currentFlag |= view.FLAG_INSERT;
+	          if (view[CELL_VIEW_PLACEHOLDER_MARKER]) {
+	            view = this._resolveCellViewPlaceholder(view);
+	            // Newly initialized view needs to be initialized
+	            currentFlag |= this.getCellViewInitFlag(view);
+	          }
+	          if (!isMounted) {
+	            currentFlag |= this.FLAG_INSERT;
 	            mountCount++;
 	          }
 	          currentFlag |= this.registerMountedView(view);
+	        } else if (view[CELL_VIEW_PLACEHOLDER_MARKER]) {
+	          // We are trying to remove a placeholder view.
+	          // This should not occur as the placeholder should have been unregistered
+	          continue;
 	        }
 	        var leftoverFlag = this.updateView(view, currentFlag, opt);
 	        if (leftoverFlag > 0) {
@@ -33014,102 +33512,127 @@ var joint = (function (exports) {
 	      empty: empty
 	    };
 	  },
+	  getCellViewInitFlag: function (cellView) {
+	    return this.FLAG_INIT | cellView.getFlag(result(cellView, 'initFlag'));
+	  },
+	  /**
+	   * @ignore This method returns an array of cellViewLike objects and therefore
+	   * is meant for internal/test use only.
+	   * The view placeholders are not exposed via public API.
+	  */
 	  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]];
+	    const unmountedViews = new Array(updates.unmountedList.length);
+	    const unmountedCids = updates.unmountedList.keys();
+	    let i = 0;
+	    for (const cid of unmountedCids) {
+	      // If the view is a placeholder, it won't be in the global views map
+	      // If the view is not a cell view, it won't be in the viewPlaceholders map
+	      unmountedViews[i++] = views[cid] || this._viewPlaceholders[cid];
 	    }
 	    return unmountedViews;
 	  },
+	  /**
+	   * @ignore This method returns an array of cellViewLike objects and therefore
+	   * is meant for internal/test use only.
+	   * The view placeholders are not exposed via public API.
+	   */
 	  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]];
+	    const mountedViews = new Array(updates.mountedList.length);
+	    const mountedCids = updates.mountedList.keys();
+	    let i = 0;
+	    for (const cid of mountedCids) {
+	      mountedViews[i++] = views[cid] || this._viewPlaceholders[cid];
 	    }
 	    return mountedViews;
 	  },
-	  checkUnmountedViews: function (viewportFn, opt) {
+	  checkUnmountedViews: function (visibilityCb, opt) {
 	    opt || (opt = {});
 	    var mountCount = 0;
-	    if (typeof viewportFn !== 'function') viewportFn = null;
+	    if (typeof visibilityCb !== 'function') visibilityCb = 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)) {
+	    var unmountedList = updates.unmountedList;
+	    for (var i = 0, n = Math.min(unmountedList.length, batchSize); i < n; i++) {
+	      const {
+	        key: cid
+	      } = unmountedList.peekHead();
+	      let view = views[cid] || this._viewPlaceholders[cid];
+	      if (!view) {
+	        // This should not occur
+	        continue;
+	      }
+	      if (!this._evalCellVisibility(view, false, visibilityCb)) {
 	        // Push at the end of all unmounted ids, so this can be check later again
-	        unmountedCids.push(cid);
+	        unmountedList.rotate();
 	        continue;
 	      }
+	      // Remove the view from the unmounted list
+	      const {
+	        value: prevFlag
+	      } = unmountedList.popHead();
 	      mountCount++;
-	      var flag = this.registerMountedView(view);
+	      const flag = this.registerMountedView(view) | prevFlag;
 	      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) {
+	  checkMountedViews: function (visibilityCb, opt) {
 	    opt || (opt = {});
 	    var unmountCount = 0;
-	    if (typeof viewportFn !== 'function') return unmountCount;
+	    if (typeof visibilityCb !== '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)) {
+	    const mountedList = updates.mountedList;
+	    for (var i = 0, n = Math.min(mountedList.length, batchSize); i < n; i++) {
+	      const {
+	        key: cid
+	      } = mountedList.peekHead();
+	      const view = views[cid];
+	      if (!view) {
+	        // A view (not a cell view) has been removed from the paper.
+	        // Remove it from the mounted list and continue.
+	        mountedList.popHead();
+	        continue;
+	      }
+	      if (this._evalCellVisibility(view, true, visibilityCb)) {
 	        // Push at the end of all mounted ids, so this can be check later again
-	        mountedCids.push(cid);
+	        mountedList.rotate();
 	        continue;
 	      }
+	      // Remove the view from the mounted list
+	      mountedList.popHead();
 	      unmountCount++;
 	      var flag = this.registerUnmountedView(view);
-	      if (flag) this.detachView(view);
+	      if (flag) {
+	        this._hideView(view);
+	      }
 	    }
-	    // Get rid of views, that have been unmounted
-	    mountedCids.splice(0, i);
 	    return unmountCount;
 	  },
 	  checkViewVisibility: function (cellView, opt = {}) {
-	    let viewportFn = 'viewport' in opt ? opt.viewport : this.options.viewport;
-	    if (typeof viewportFn !== 'function') viewportFn = null;
+	    const visibilityCb = this._getCellVisibilityCallback(opt);
 	    const updates = this._updates;
 	    const {
-	      mounted,
-	      unmounted
+	      mountedList,
+	      unmountedList
 	    } = updates;
-	    const visible = !cellView.DETACHABLE || !viewportFn || viewportFn.call(this, cellView, false, this);
+	    const visible = this._evalCellVisibility(cellView, false, visibilityCb);
 	    let isUnmounted = false;
 	    let isMounted = false;
-	    if (cellView.cid in mounted && !visible) {
+	    if (mountedList.has(cellView.cid) && !visible) {
 	      const flag = this.registerUnmountedView(cellView);
-	      if (flag) this.detachView(cellView);
-	      const i = updates.mountedCids.indexOf(cellView.cid);
-	      updates.mountedCids.splice(i, 1);
+	      if (flag) this._hideView(cellView);
+	      mountedList.delete(cellView.cid);
 	      isUnmounted = true;
 	    }
-	    if (!isUnmounted && cellView.cid in unmounted && visible) {
-	      const i = updates.unmountedCids.indexOf(cellView.cid);
-	      updates.unmountedCids.splice(i, 1);
-	      var flag = this.registerMountedView(cellView);
+	    if (!isUnmounted && unmountedList.has(cellView.cid) && visible) {
+	      const unmountedItem = unmountedList.get(cellView.cid);
+	      unmountedList.delete(cellView.cid);
+	      const flag = unmountedItem.value | this.registerMountedView(cellView);
 	      if (flag) this.scheduleViewUpdate(cellView, flag, cellView.UPDATE_PRIORITY, {
 	        mounting: true
 	      });
@@ -33120,24 +33643,64 @@ var joint = (function (exports) {
 	      unmounted: isUnmounted ? 1 : 0
 	    };
 	  },
-	  checkViewport: function (opt) {
-	    var passingOpt = defaults({}, opt, {
+	  /**
+	   * @public
+	   * Update the visibility of a single cell.
+	   */
+	  updateCellVisibility: function (cell, opt = {}) {
+	    const cellViewLike = this._getCellViewLike(cell);
+	    if (!cellViewLike) return;
+	    const stats = this.checkViewVisibility(cellViewLike, opt);
+	    // Note: `unmounted` views are removed immediately
+	    if (stats.mounted > 0) {
+	      // Mounting is scheduled. Run the update.
+	      // Note: the view might be a placeholder.
+	      this.requireView(cell, opt);
+	    }
+	  },
+	  /**
+	   * @public
+	   * Update the visibility of all cells.
+	   */
+	  updateCellsVisibility: function (opt = {}) {
+	    // Check the visibility of all cells and schedule their updates.
+	    this.scheduleCellsVisibilityUpdate(opt);
+	    // Perform the scheduled updates while avoiding re-evaluating the visibility.
+	    const keepCurrentVisibility = (_, isVisible) => isVisible;
+	    this.updateViews({
+	      ...opt,
+	      cellVisibility: keepCurrentVisibility
+	    });
+	  },
+	  /**
+	   * @protected
+	   * Run visibility checks for all cells and schedule their updates.
+	   */
+	  scheduleCellsVisibilityUpdate(opt) {
+	    const passingOpt = defaults({}, opt, {
 	      mountBatchSize: Infinity,
 	      unmountBatchSize: Infinity
 	    });
-	    var viewportFn = 'viewport' in passingOpt ? passingOpt.viewport : this.options.viewport;
-	    var unmountedCount = this.checkMountedViews(viewportFn, passingOpt);
+	    const visibilityCb = this._getCellVisibilityCallback(passingOpt);
+	    const unmountedCount = this.checkMountedViews(visibilityCb, 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 unmountedList = this._updates.unmountedList;
+	      passingOpt.mountBatchSize = Math.min(unmountedList.length - unmountedCount, passingOpt.mountBatchSize);
 	    }
-	    var mountedCount = this.checkUnmountedViews(viewportFn, passingOpt);
+	    const mountedCount = this.checkUnmountedViews(visibilityCb, passingOpt);
 	    return {
 	      mounted: mountedCount,
 	      unmounted: unmountedCount
 	    };
 	  },
+	  /**
+	   * @deprecated use `updateCellsVisibility` instead
+	   * This method will be renamed and made private in the future.
+	   */
+	  checkViewport: function (opt) {
+	    return this.scheduleCellsVisibilityUpdate(opt);
+	  },
 	  freeze: function (opt) {
 	    opt || (opt = {});
 	    var updates = this._updates;
@@ -33153,6 +33716,10 @@ var joint = (function (exports) {
 	    this.options.frozen = true;
 	    var id = updates.id;
 	    updates.id = null;
+	    if (!this.legacyMode) {
+	      // Make sure the `freeze()` method ends the idle state.
+	      updates.idle = false;
+	    }
 	    if (this.isAsync() && id) cancelFrame(id);
 	  },
 	  unfreeze: function (opt) {
@@ -33165,6 +33732,7 @@ var joint = (function (exports) {
 	    updates.freezeKey = null;
 	    // key passed, but the paper is already freezed
 	    if (key && key === freezeKey && updates.keyFrozen) return;
+	    updates.idle = false;
 	    if (this.isAsync()) {
 	      this.freeze();
 	      this.updateViewsAsync(opt);
@@ -33177,11 +33745,22 @@ var joint = (function (exports) {
 	      updates.sort = false;
 	    }
 	  },
+	  wakeUp: function () {
+	    if (!this.isIdle()) return;
+	    this.unfreeze(this._updates.idle.wakeUpOptions);
+	  },
 	  isAsync: function () {
 	    return !!this.options.async;
 	  },
 	  isFrozen: function () {
-	    return !!this.options.frozen;
+	    return !!this.options.frozen && !this.isIdle();
+	  },
+	  isIdle: function () {
+	    if (this.legacyMode) {
+	      // Not implemented in the legacy mode.
+	      return false;
+	    }
+	    return !!(this._updates && this._updates.idle);
 	  },
 	  isExactSorting: function () {
 	    return this.options.sorting === sortingTypes.EXACT;
@@ -33461,21 +34040,65 @@ var joint = (function (exports) {
 	    }
 	    return restrictedArea;
 	  },
-	  createViewForModel: function (cell) {
+	  _resolveCellViewPlaceholder: function (placeholder) {
+	    const {
+	      model,
+	      viewClass,
+	      cid
+	    } = placeholder;
+	    const view = this._initializeCellView(viewClass, model, cid);
+	    this._registerCellView(view);
+	    this._unregisterCellViewPlaceholder(placeholder);
+	    return view;
+	  },
+	  _registerCellViewPlaceholder: function (cell, cid = uniqueId('view')) {
+	    const ViewClass = this._resolveCellViewClass(cell);
+	    const placeholder = {
+	      // A tag to identify the placeholder from a CellView.
+	      [CELL_VIEW_PLACEHOLDER_MARKER]: true,
+	      cid,
+	      model: cell,
+	      DETACHABLE: true,
+	      viewClass: ViewClass,
+	      UPDATE_PRIORITY: ViewClass.prototype.UPDATE_PRIORITY
+	    };
+	    this._viewPlaceholders[cid] = placeholder;
+	    return placeholder;
+	  },
+	  _registerCellView: function (cellView) {
+	    cellView.paper = this;
+	    this._views[cellView.model.id] = cellView;
+	  },
+	  _unregisterCellViewPlaceholder: function (placeholder) {
+	    delete this._viewPlaceholders[placeholder.cid];
+	  },
+	  _initializeCellView: function (ViewClass, cell, cid) {
+	    const {
+	      options
+	    } = this;
+	    const {
+	      interactive,
+	      labelsLayer
+	    } = options;
+	    return new ViewClass({
+	      cid,
+	      model: cell,
+	      interactive,
+	      labelsLayer: labelsLayer === true ? LayersNames.LABELS : labelsLayer
+	    });
+	  },
+	  _resolveCellViewClass: function (cell) {
 	    const {
 	      options
 	    } = this;
+	    const {
+	      cellViewNamespace
+	    } = options;
+	    const type = cell.get('type') + 'View';
+	    const namespaceViewClass = getByPath(cellViewNamespace, type, '.');
 	    // A class taken from the paper options.
-	    var optionalViewClass;
-
-	    // A default basic class (either dia.ElementView or dia.LinkView)
-	    var defaultViewClass;
-
-	    // A special class defined for this model in the corresponding namespace.
-	    // e.g. joint.shapes.standard.Rectangle searches for joint.shapes.standard.RectangleView
-	    var namespace = options.cellViewNamespace;
-	    var type = cell.get('type') + 'View';
-	    var namespaceViewClass = getByPath(namespace, type, '.');
+	    let optionalViewClass;
+	    let defaultViewClass;
 	    if (cell.isLink()) {
 	      optionalViewClass = options.linkView;
 	      defaultViewClass = LinkView;
@@ -33483,7 +34106,6 @@ var joint = (function (exports) {
 	      optionalViewClass = options.elementView;
 	      defaultViewClass = ElementView;
 	    }
-
 	    // a) the paper options view is a class (deprecated)
 	    //  1. search the namespace for a view
 	    //  2. if no view was found, use view from the paper options
@@ -33491,12 +34113,33 @@ var joint = (function (exports) {
 	    //  1. call the function from the paper options
 	    //  2. if no view was return, search the namespace for a view
 	    //  3. if no view was found, use the default
-	    var ViewClass = optionalViewClass.prototype instanceof ViewBase ? namespaceViewClass || optionalViewClass : optionalViewClass.call(this, cell) || namespaceViewClass || defaultViewClass;
-	    return new ViewClass({
-	      model: cell,
-	      interactive: options.interactive,
-	      labelsLayer: options.labelsLayer === true ? LayersNames.LABELS : options.labelsLayer
-	    });
+	    return optionalViewClass.prototype instanceof ViewBase ? namespaceViewClass || optionalViewClass : optionalViewClass.call(this, cell) || namespaceViewClass || defaultViewClass;
+	  },
+	  // Returns a CellView instance or its placeholder for the given cell.
+	  _getCellViewLike: function (cell) {
+	    let id;
+	    if (isString(cell) || isNumber(cell)) {
+	      // If the cell is a string or number, it is an id of the view.
+	      id = cell;
+	    } else if (cell) {
+	      // If the cell is an object, it should have an id property.
+	      id = cell.id;
+	    } else {
+	      // If the cell is falsy, return null.
+	      return null;
+	    }
+	    const view = this._views[id];
+	    if (view) return view;
+
+	    // If the view is not found, it may be a placeholder
+	    const cid = this._idToCid[id];
+	    if (cid) {
+	      return this._viewPlaceholders[cid];
+	    }
+	    return null;
+	  },
+	  createViewForModel: function (cell, cid) {
+	    return this._initializeCellView(this._resolveCellViewClass(cell), cell, cid);
 	  },
 	  removeView: function (cell) {
 	    const {
@@ -33512,13 +34155,14 @@ var joint = (function (exports) {
 	        cid
 	      } = view;
 	      const {
-	        mounted,
-	        unmounted
+	        mountedList,
+	        unmountedList
 	      } = _updates;
 	      view.remove();
 	      delete _views[id];
-	      delete mounted[cid];
-	      delete unmounted[cid];
+	      delete this._idToCid[id];
+	      mountedList.delete(cid);
+	      unmountedList.delete(cid);
 	    }
 	    return view;
 	  },
@@ -33532,7 +34176,7 @@ var joint = (function (exports) {
 	    if (id in views) {
 	      view = views[id];
 	      if (view.model === cell) {
-	        flag = view.FLAG_INSERT;
+	        flag = this.FLAG_INSERT;
 	        create = false;
 	      } else {
 	        // The view for this `id` already exist.
@@ -33542,13 +34186,42 @@ var joint = (function (exports) {
 	      }
 	    }
 	    if (create) {
-	      view = views[id] = this.createViewForModel(cell);
-	      view.paper = this;
-	      flag = this.registerUnmountedView(view) | this.FLAG_INIT | view.getFlag(result(view, 'initFlag'));
+	      const {
+	        viewManagement
+	      } = this.options;
+	      const cid = uniqueId('view');
+	      this._idToCid[cell.id] = cid;
+	      if (viewManagement.lazyInitialize) {
+	        // Register only a placeholder for the view
+	        view = this._registerCellViewPlaceholder(cell, cid);
+	        flag = this.registerUnmountedView(view);
+	      } else {
+	        // Create a new view instance
+	        view = this.createViewForModel(cell, cid);
+	        this._registerCellView(view);
+	        flag = this.registerUnmountedView(view);
+	        // The newly created view needs to be initialized
+	        flag |= this.getCellViewInitFlag(view);
+	      }
+	      if (viewManagement.initializeUnmounted) {
+	        // Save the initialization flags for later and exit early
+	        this._mergeUnmountedViewScheduledUpdates(cid, flag);
+	        return view;
+	      }
 	    }
 	    this.requestViewUpdate(view, flag, view.UPDATE_PRIORITY, opt);
 	    return view;
 	  },
+	  // Update the view flags in the `unmountedList` using the bitwise OR operation
+	  _mergeUnmountedViewScheduledUpdates: function (cid, flag) {
+	    const {
+	      unmountedList
+	    } = this._updates;
+	    const unmountedItem = unmountedList.get(cid);
+	    if (unmountedItem) {
+	      unmountedItem.value |= flag;
+	    }
+	  },
 	  onImageDragStart: function () {
 	    // This is the only way to prevent image dragging in Firefox that works.
 	    // Setting -moz-user-select: none, draggable="false" attribute or user-drag: none didn't help.
@@ -33558,11 +34231,11 @@ var joint = (function (exports) {
 	  resetViews: function (cells, opt) {
 	    opt || (opt = {});
 	    cells || (cells = []);
+	    // Allows to unfreeze normally while in the idle state using autoFreeze option
+	    const key = (this.legacyMode ? this.options.autoFreeze : this.isIdle()) ? null : 'reset';
 	    this._resetUpdates();
 	    // clearing views removes any event listeners
 	    this.removeViews();
-	    // Allows to unfreeze normally while in the idle state using autoFreeze option
-	    const key = this.options.autoFreeze ? null : 'reset';
 	    this.freeze({
 	      key
 	    });
@@ -33575,15 +34248,23 @@ var joint = (function (exports) {
 	    this.sortViews();
 	  },
 	  removeViews: function () {
-	    invoke(this._views, 'remove');
+	    // Remove all views and their references from the paper.
+	    for (const id in this._views) {
+	      const view = this._views[id];
+	      if (view) {
+	        view.remove();
+	      }
+	    }
 	    this._views = {};
+	    this._viewPlaceholders = {};
+	    this._idToCid = {};
 	  },
 	  sortViews: function () {
 	    if (!this.isExactSorting()) {
 	      // noop
 	      return;
 	    }
-	    if (this.isFrozen()) {
+	    if (this.isFrozen() || this.isIdle()) {
 	      // sort views once unfrozen
 	      this._updates.sort = true;
 	      return;
@@ -33622,9 +34303,54 @@ var joint = (function (exports) {
 	    }
 	    view.onMount(isInitialInsert);
 	  },
-	  detachView(view) {
-	    view.unmount();
-	    view.onDetach();
+	  _hideView: function (viewLike) {
+	    if (!viewLike || viewLike[CELL_VIEW_PLACEHOLDER_MARKER]) {
+	      // A placeholder view was never mounted
+	      return;
+	    }
+	    if (viewLike[CELL_VIEW_MARKER]) {
+	      this._hideCellView(viewLike);
+	    } else {
+	      // A generic view that is not a cell view.
+	      viewLike.unmount();
+	    }
+	  },
+	  // If `cellVisibility` returns `false`, the view will be hidden using this method.
+	  _hideCellView: function (cellView) {
+	    if (this.options.viewManagement.disposeHidden) {
+	      if (this._disposeCellView(cellView)) return;
+	    }
+	    // Detach the view from the paper, but keep it in memory
+	    this._detachCellView(cellView);
+	  },
+	  _disposeCellView: function (cellView) {
+	    if (HighlighterView.has(cellView) || cellView.hasTools()) {
+	      // We currently do not dispose views which has a highlighter or tools attached
+	      // Note: Possible improvement would be to serialize highlighters/tools and
+	      // restore them on view re-mount.
+	      return false;
+	    }
+	    const cell = cellView.model;
+	    // Remove the view from the paper and dispose it
+	    cellView.remove();
+	    delete this._views[cell.id];
+	    this._registerCellViewPlaceholder(cell, cellView.cid);
+	    return true;
+	  },
+	  // Dispose (release resources) all hidden views.
+	  disposeHiddenCellViews: function () {
+	    // Only cell views can be in the unmounted list (not in the legacy mode).
+	    if (this.legacyMode) return;
+	    const unmountedCids = this._updates.unmountedList.keys();
+	    for (const cid of unmountedCids) {
+	      const cellView = views[cid];
+	      cellView && this._disposeCellView(cellView);
+	    }
+	  },
+	  // Detach a view from the paper, but keep it in memory.
+	  _detachCellView(cellView) {
+	    cellView.unmount();
+	    cellView.onDetach();
 	  },
 	  // Find the first view climbing up the DOM tree starting at element `el`. Note that `el` can also
 	  // be a selector or a jQuery object.
@@ -33635,9 +34361,31 @@ var joint = (function (exports) {
 	    return undefined;
 	  },
 	  // Find a view for a model `cell`. `cell` can also be a string or number representing a model `id`.
-	  findViewByModel: function (cell) {
-	    var id = isString(cell) || isNumber(cell) ? cell : cell && cell.id;
-	    return this._views[id];
+	  findViewByModel: function (cellOrId) {
+	    const cellViewLike = this._getCellViewLike(cellOrId);
+	    if (!cellViewLike) return undefined;
+	    if (cellViewLike[CELL_VIEW_MARKER]) {
+	      // If the view is not a placeholder, return it directly
+	      return cellViewLike;
+	    }
+	    // We do not expose placeholder views directly. We resolve them before returning.
+	    const cellView = this._resolveCellViewPlaceholder(cellViewLike);
+	    const flag = this.getCellViewInitFlag(cellView);
+	    if (this.isViewMounted(cellView)) {
+	      // The view was acting as a placeholder and is already present in the `mounted` list,
+	      // indicating that its visibility has been checked, but the update hasn't occurred yet.
+	      // Placeholders are resolved during the update routine. Since we're handling it
+	      // manually here, we must ensure the view is properly initialized on the next update.
+	      this.scheduleViewUpdate(cellView, flag, cellView.UPDATE_PRIORITY, {
+	        // It's important to run in isolation to avoid triggering the update of
+	        // connected links
+	        isolate: true
+	      });
+	    } else {
+	      // Update the flags in the `unmounted` list
+	      this._mergeUnmountedViewScheduledUpdates(cellView.cid, flag);
+	    }
+	    return cellView;
 	  },
 	  // Find all views at given point
 	  findViewsFromPoint: function (p) {
@@ -33684,6 +34432,93 @@ var joint = (function (exports) {
 	    // because the `strict` option works differently for querying at a point
 	    extArea => this.model.findCellsInArea(extArea), opt);
 	  },
+	  findClosestMagnetToPoint: function (point, options = {}) {
+	    let minDistance = Number.MAX_SAFE_INTEGER;
+	    let bestPriority = -Infinity;
+	    const pointer = new Point(point);
+	    const radius = options.radius || Number.MAX_SAFE_INTEGER;
+	    const viewsInArea = this.findCellViewsInArea({
+	      x: pointer.x - radius,
+	      y: pointer.y - radius,
+	      width: 2 * radius,
+	      height: 2 * radius
+	    }, options.findInAreaOptions);
+	    // Enable all connections by default
+	    const filterFn = typeof options.filter === 'function' ? options.filter : null;
+	    let closestView = null;
+	    let closestMagnet = null;
+
+	    // Note: If snapRadius is smaller than magnet size, views will not be found.
+	    viewsInArea.forEach(view => {
+	      const candidates = [];
+	      const {
+	        model
+	      } = view;
+	      // skip connecting to the element in case '.': { magnet: false } attribute present
+	      if (view.el.getAttribute('magnet') !== 'false') {
+	        if (model.isLink()) {
+	          const connection = view.getConnection();
+	          candidates.push({
+	            // find distance from the closest point of a link to pointer coordinates
+	            priority: 0,
+	            distance: connection.closestPoint(pointer).squaredDistance(pointer),
+	            magnet: view.el
+	          });
+	        } else {
+	          candidates.push({
+	            // Set the priority to the level of nested elements of the model
+	            // To ensure that the embedded cells get priority over the parent cells
+	            priority: model.getAncestors().length,
+	            // find distance from the center of the model to pointer coordinates
+	            distance: model.getBBox().center().squaredDistance(pointer),
+	            magnet: view.el
+	          });
+	        }
+	      }
+	      view.$('[magnet]').toArray().forEach(magnet => {
+	        const magnetBBox = view.getNodeBBox(magnet);
+	        let magnetDistance = magnetBBox.pointNearestToPoint(pointer).squaredDistance(pointer);
+	        if (magnetBBox.containsPoint(pointer)) {
+	          // Pointer sits inside this magnet.
+	          // Push its distance far into the negative range so any
+	          // "under-pointer" magnet outranks magnets that are only nearby
+	          // (positive distance) and every non-magnet candidate.
+	          // We add the original distance back to keep ordering among
+	          // overlapping magnets: the one whose border is closest to the
+	          // pointer (smaller original distance) still wins.
+	          magnetDistance = -Number.MAX_SAFE_INTEGER + magnetDistance;
+	        }
+
+	        // Check if magnet is inside the snap radius.
+	        if (magnetDistance <= radius * radius) {
+	          candidates.push({
+	            // Give magnets priority over other candidates.
+	            priority: Number.MAX_SAFE_INTEGER,
+	            distance: magnetDistance,
+	            magnet
+	          });
+	        }
+	      });
+	      candidates.forEach(candidate => {
+	        const {
+	          magnet,
+	          distance,
+	          priority
+	        } = candidate;
+	        const isBetterCandidate = priority > bestPriority || priority === bestPriority && distance < minDistance;
+	        if (isBetterCandidate && (!filterFn || filterFn(view, magnet))) {
+	          bestPriority = priority;
+	          minDistance = distance;
+	          closestView = view;
+	          closestMagnet = magnet;
+	        }
+	      });
+	    });
+	    return closestView ? {
+	      view: closestView,
+	      magnet: closestMagnet
+	    } : null;
+	  },
 	  _findInExtendedArea: function (area, findCellsFn, opt = {}) {
 	    const {
 	      buffer = this.DEFAULT_FIND_BUFFER
@@ -34066,8 +34901,11 @@ var joint = (function (exports) {
 	    if (mousemoved <= this.options.moveThreshold) return;
 	    evt = normalizeEvent(evt);
 	    var localPoint = this.snapToGrid(evt.clientX, evt.clientY);
-	    var view = data.sourceView;
+	    let view = data.sourceView;
 	    if (view) {
+	      // The view could have been disposed during dragging
+	      // e.g. dragged outside of the viewport and hidden
+	      view = this.findViewByModel(view.model);
 	      view.pointermove(evt, localPoint.x, localPoint.y);
 	    } else {
 	      this.trigger('blank:pointermove', evt, localPoint.x, localPoint.y);
@@ -34078,8 +34916,11 @@ var joint = (function (exports) {
 	    this.undelegateDocumentEvents();
 	    var normalizedEvt = normalizeEvent(evt);
 	    var localPoint = this.snapToGrid(normalizedEvt.clientX, normalizedEvt.clientY);
-	    var view = this.eventData(evt).sourceView;
+	    let view = this.eventData(evt).sourceView;
 	    if (view) {
+	      // The view could have been disposed during dragging
+	      // e.g. dragged outside of the viewport and hidden
+	      view = this.findViewByModel(view.model);
 	      view.pointerup(normalizedEvt, localPoint.x, localPoint.y);
 	    } else {
 	      this.trigger('blank:pointerup', normalizedEvt, localPoint.x, localPoint.y);
@@ -34945,6 +35786,9 @@ var joint = (function (exports) {
 	  isVisible: function () {
 	    return !!this._visible;
 	  },
+	  isOverlay: function () {
+	    return !!this.parentView && this.parentView.hasLayer();
+	  },
 	  focus: function () {
 	    var opacity = this.options.focusOpacity;
 	    if (isFinite(opacity)) this.el.style.opacity = opacity;
@@ -35090,6 +35934,15 @@ var joint = (function (exports) {
 	    }
 	    this.tools = null;
 	  },
+	  getLayer() {
+	    const {
+	      layer = LayersNames.TOOLS
+	    } = this.options;
+	    return layer;
+	  },
+	  hasLayer() {
+	    return !!this.getLayer();
+	  },
 	  mount: function () {
 	    const {
 	      options,
@@ -35097,12 +35950,11 @@ var joint = (function (exports) {
 	    } = this;
 	    const {
 	      relatedView,
-	      layer = LayersNames.TOOLS,
 	      z
 	    } = options;
 	    if (relatedView) {
-	      if (layer) {
-	        relatedView.paper.getLayerView(layer).insertSortedNode(el, z);
+	      if (this.hasLayer()) {
+	        relatedView.paper.getLayerView(this.getLayer()).insertSortedNode(el, z);
 	      } else {
 	        relatedView.el.appendChild(el);
 	      }
@@ -35113,6 +35965,7 @@ var joint = (function (exports) {
 
 	var index$2 = {
 		__proto__: null,
+		CELL_VIEW_MARKER: CELL_VIEW_MARKER,
 		Cell: Cell,
 		CellView: CellView,
 		Element: Element$1,
@@ -35461,12 +36314,57 @@ var joint = (function (exports) {
 	  VertexHandle: VertexHandle // keep as class property
 	});
 
-	function getViewBBox(view, useModelGeometry) {
+	/**
+	 * Common helper for getting a cell view’s bounding box,
+	 * configurable with `useModelGeometry`, `relative`, and `el`.
+	 */
+	function getViewBBox(view, {
+	  useModelGeometry = false,
+	  relative = false,
+	  el = view.el
+	} = {}) {
 	  const {
 	    model
 	  } = view;
-	  if (useModelGeometry) return model.getBBox();
-	  return model.isLink() ? view.getConnection().bbox() : view.getNodeUnrotatedBBox(view.el);
+	  let bbox;
+	  if (useModelGeometry) {
+	    // cell model bbox
+	    bbox = model.getBBox();
+	  } else if (model.isLink()) {
+	    // link view bbox
+	    bbox = view.getConnection().bbox();
+	  } else {
+	    // element view bbox
+	    bbox = view.getNodeUnrotatedBBox(el);
+	  }
+	  if (relative) {
+	    // Relative to the element position.
+	    const position = model.position();
+	    bbox.x -= position.x;
+	    bbox.y -= position.y;
+	  }
+	  return bbox;
+	}
+
+	/**
+	 * Retrieves the tool options.
+	 * Automatically overrides `useModelGeometry` and `rotate`
+	 * if the tool is positioned relative to the element.
+	 */
+	function getToolOptions(toolView) {
+	  // Positioning is relative if the tool is drawn within the element view.
+	  const relative = !toolView.isOverlay();
+	  const {
+	    useModelGeometry,
+	    rotate,
+	    ...otherOptions
+	  } = toolView.options;
+	  return {
+	    ...otherOptions,
+	    useModelGeometry: useModelGeometry || relative,
+	    rotate: rotate || relative,
+	    relative
+	  };
 	}
 	function getAnchor(coords, view, magnet) {
 	  // take advantage of an existing logic inside of the
@@ -36304,29 +37202,40 @@ var joint = (function (exports) {
 	    return this;
 	  },
 	  updateHandle: function (handleNode) {
+	    const {
+	      options: {
+	        handleAttributes
+	      }
+	    } = this;
+	    handleNode.setAttribute('transform', this.getHandleTransformString());
+	    if (handleAttributes) {
+	      for (let attrName in handleAttributes) {
+	        handleNode.setAttribute(attrName, handleAttributes[attrName]);
+	      }
+	    }
+	  },
+	  getHandleTransformString() {
 	    const {
 	      relatedView,
 	      options
 	    } = this;
+	    const {
+	      scale
+	    } = options;
 	    const {
 	      model
 	    } = relatedView;
 	    const relativePos = this.getPosition(relatedView, this);
-	    const absolutePos = model.getAbsolutePointFromRelative(relativePos);
-	    const {
-	      handleAttributes,
-	      scale
-	    } = options;
-	    let transformString = `translate(${absolutePos.x},${absolutePos.y})`;
+	    const translate = this.isOverlay()
+	    // The tool is rendered in the coordinate system of the paper
+	    ? model.getAbsolutePointFromRelative(relativePos)
+	    // The tool is rendered in the coordinate system of the relatedView
+	    : relativePos;
+	    let transformString = `translate(${translate.x},${translate.y})`;
 	    if (scale) {
 	      transformString += ` scale(${scale})`;
 	    }
-	    handleNode.setAttribute('transform', transformString);
-	    if (handleAttributes) {
-	      for (let attrName in handleAttributes) {
-	        handleNode.setAttribute(attrName, handleAttributes[attrName]);
-	      }
-	    }
+	    return transformString;
 	  },
 	  updateExtras: function (extrasNode) {
 	    const {
@@ -36334,19 +37243,40 @@ var joint = (function (exports) {
 	      options
 	    } = this;
 	    const {
-	      selector
-	    } = this.options;
+	      selector,
+	      relative,
+	      useModelGeometry
+	    } = getToolOptions(this);
 	    if (!selector) {
+	      // Hide the extras if no selector is given.
 	      this.toggleExtras(false);
 	      return;
 	    }
-	    const magnet = relatedView.findNode(selector);
-	    if (!magnet) throw new Error('Control: invalid selector.');
+	    // Get the size for the extras rectangle and update it.
+	    let bbox;
+	    if (useModelGeometry) {
+	      if (selector !== 'root') {
+	        // A selector other than null or `root` was provided.
+	        console.warn('Control: selector will be ignored when `useModelGeometry` is used.');
+	      }
+	      bbox = getViewBBox(relatedView, {
+	        useModelGeometry,
+	        relative
+	      });
+	    } else {
+	      // The reference node for calculating the bounding box of the extras.
+	      const el = relatedView.findNode(selector);
+	      if (!el) throw new Error('Control: invalid selector.');
+	      bbox = getViewBBox(relatedView, {
+	        el
+	      });
+	    }
 	    let padding = options.padding;
 	    if (!isFinite(padding)) padding = 0;
-	    const bbox = relatedView.getNodeUnrotatedBBox(magnet);
 	    const model = relatedView.model;
-	    const angle = model.angle();
+	    // With relative positioning, rotation is implicit
+	    // (the tool rotates along with the element).
+	    const angle = relative ? 0 : model.angle();
 	    const center = bbox.center();
 	    if (angle) center.rotate(model.getCenter(), -angle);
 	    bbox.inflate(padding);
@@ -36557,8 +37487,7 @@ var joint = (function (exports) {
 	  },
 	  getElementMatrix() {
 	    const {
-	      relatedView: view,
-	      options
+	      relatedView: view
 	    } = this;
 	    let {
 	      x = 0,
@@ -36566,9 +37495,13 @@ var joint = (function (exports) {
 	      offset = {},
 	      useModelGeometry,
 	      rotate,
-	      scale
-	    } = options;
-	    let bbox = getViewBBox(view, useModelGeometry);
+	      scale,
+	      relative
+	    } = getToolOptions(this);
+	    let bbox = getViewBBox(view, {
+	      useModelGeometry,
+	      relative
+	    });
 	    const angle = view.model.angle();
 	    if (!rotate) bbox = bbox.bbox(angle);
 	    const {
@@ -36586,7 +37519,9 @@ var joint = (function (exports) {
 	      y = Number(evalCalcExpression(y, bbox));
 	    }
 	    let matrix = V.createSVGMatrix().translate(bbox.x + bbox.width / 2, bbox.y + bbox.height / 2);
-	    if (rotate) matrix = matrix.rotate(angle);
+	    // With relative positioning, rotation is implicit
+	    // (the tool rotates along with the element).
+	    if (rotate && !relative) matrix = matrix.rotate(angle);
 	    matrix = matrix.translate(x + offsetX - bbox.width / 2, y + offsetY - bbox.height / 2);
 	    if (scale) matrix = matrix.scale(scale);
 	    return matrix;
@@ -36684,26 +37619,32 @@ var joint = (function (exports) {
 	  update: function () {
 	    const {
 	      relatedView: view,
-	      options,
 	      vel
 	    } = this;
 	    const {
 	      useModelGeometry,
-	      rotate
-	    } = options;
-	    const padding = normalizeSides(options.padding);
-	    let bbox = getViewBBox(view, useModelGeometry).moveAndExpand({
-	      x: -padding.left,
-	      y: -padding.top,
-	      width: padding.left + padding.right,
-	      height: padding.top + padding.bottom
+	      rotate,
+	      relative,
+	      padding
+	    } = getToolOptions(this);
+	    const normalizedPadding = normalizeSides(padding);
+	    let bbox = getViewBBox(view, {
+	      useModelGeometry,
+	      relative
+	    }).moveAndExpand({
+	      x: -normalizedPadding.left,
+	      y: -normalizedPadding.top,
+	      width: normalizedPadding.left + normalizedPadding.right,
+	      height: normalizedPadding.top + normalizedPadding.bottom
 	    });
-	    var model = view.model;
-	    if (model.isElement()) {
-	      var angle = model.angle();
+	    const model = view.model;
+	    // With relative positioning, rotation is implicit
+	    // (the tool rotates along with the element).
+	    if (model.isElement() && !relative) {
+	      const angle = model.angle();
 	      if (angle) {
 	        if (rotate) {
-	          var origin = model.getCenter();
+	          const origin = model.getCenter();
 	          vel.rotate(angle, origin.x, origin.y, {
 	            absolute: true
 	          });
@@ -36929,13 +37870,16 @@ var joint = (function (exports) {
 	  getTrackMatrix() {
 	    return V.createSVGMatrix();
 	  },
+	  getTrackMatrixAbsolute() {
+	    return this.getTrackMatrix();
+	  },
 	  getTrackRatioFromEvent(evt) {
 	    const {
 	      relatedView,
 	      trackPath
 	    } = this;
 	    const localPoint = relatedView.paper.clientToLocalPoint(evt.clientX, evt.clientY);
-	    const trackPoint = V.transformPoint(localPoint, this.getTrackMatrix().inverse());
+	    const trackPoint = V.transformPoint(localPoint, this.getTrackMatrixAbsolute().inverse());
 	    return trackPath.closestPointLength(trackPoint);
 	  },
 	  canShowButton() {
@@ -36989,32 +37933,40 @@ var joint = (function (exports) {
 	const HoverConnect = HoverConnect$1.extend({
 	  getTrackPath() {
 	    const {
-	      relatedView: view,
-	      options
+	      relatedView: view
 	    } = this;
 	    let {
 	      useModelGeometry,
+	      relative,
 	      trackPath = 'M 0 0 H calc(w) V calc(h) H 0 Z'
-	    } = options;
+	    } = getToolOptions(this);
 	    if (typeof trackPath === 'function') {
 	      trackPath = trackPath.call(this, view);
 	    }
 	    if (isCalcExpression(trackPath)) {
-	      const bbox = getViewBBox(view, useModelGeometry);
+	      const bbox = getViewBBox(view, {
+	        useModelGeometry,
+	        relative
+	      });
 	      trackPath = evalCalcExpression(trackPath, bbox);
 	    }
 	    return new Path$1(V.normalizePathData(trackPath));
 	  },
 	  getTrackMatrix() {
+	    if (this.isOverlay()) return this.getTrackMatrixAbsolute();
+	    return V.createSVGMatrix();
+	  },
+	  getTrackMatrixAbsolute() {
 	    const {
-	      relatedView: view,
-	      options
+	      relatedView: view
 	    } = this;
 	    let {
 	      useModelGeometry,
 	      rotate
-	    } = options;
-	    let bbox = getViewBBox(view, useModelGeometry);
+	    } = getToolOptions(this);
+	    let bbox = getViewBBox(view, {
+	      useModelGeometry
+	    });
 	    const angle = view.model.angle();
 	    if (!rotate) bbox = bbox.bbox(angle);
 	    let matrix = V.createSVGMatrix().translate(bbox.x + bbox.width / 2, bbox.y + bbox.height / 2);
@@ -37034,7 +37986,7 @@ var joint = (function (exports) {
 		Remove: Remove
 	};
 
-	var version = "4.2.0-alpha.0";
+	var version = "4.2.0-alpha.1";
 
 	const Vectorizer = V;
 	const layout$1 = {