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

package/src/dia/Paper.mjs

@@ -1,4 +1,5 @@
 import V from '../V/index.mjs';
+import * as g from '../g/index.mjs';
 import {
     isNumber,
     assign,
@@ -12,7 +13,6 @@ import {
     isFunction,
     isPlainObject,
     getByPath,
-    sortElements,
     isString,
     guid,
     normalizeEvent,
@@ -23,31 +23,49 @@ import {
     result,
     camelCase,
     cloneDeep,
+    clone,
     invoke,
     hashCode,
     filter as _filter,
     parseDOMJSON,
     toArray,
-    has
+    has,
+    uniqueId,
 } from '../util/index.mjs';
 import { ViewBase } from '../mvc/ViewBase.mjs';
 import { Rect, Point, toRad } from '../g/index.mjs';
-import { View, views } from '../mvc/index.mjs';
+import { View, views as viewsRegistry } from '../mvc/index.mjs';
 import { CellView } from './CellView.mjs';
 import { ElementView } from './ElementView.mjs';
 import { LinkView } from './LinkView.mjs';
-import { Cell } from './Cell.mjs';
 import { Graph } from './Graph.mjs';
-import { LayersNames, PaperLayer } from './PaperLayer.mjs';
+import { LayerView } from './LayerView.mjs';
+import { GraphLayerView } from './GraphLayerView.mjs';
+import { LegacyGraphLayerView } from './LegacyGraphLayerView.mjs';
+import { HighlighterView } from './HighlighterView.mjs';
+import { Deque } from '../alg/Deque.mjs';
+import {
+    CELL_MARKER, CELL_VIEW_MARKER, LAYER_VIEW_MARKER, GRAPH_LAYER_VIEW_MARKER
+} from './symbols.mjs';
 import * as highlighters from '../highlighters/index.mjs';
 import * as linkAnchors from '../linkAnchors/index.mjs';
 import * as connectionPoints from '../connectionPoints/index.mjs';
 import * as anchors from '../anchors/index.mjs';
 
 import $ from '../mvc/Dom/index.mjs';
-import { GridLayer } from './layers/GridLayer.mjs';
+import { GridLayerView } from './GridLayerView.mjs';
+
+const paperLayers = {
+    GRID: 'grid',
+    BACK: 'back',
+    /** @deprecated */
+    CELLS: 'cells',
+    FRONT: 'front',
+    TOOLS: 'tools',
+    LABELS: 'labels'
+};
 
-const sortingTypes = {
+export const sortingTypes = {
     NONE: 'sorting-none',
     APPROX: 'sorting-approximate',
     EXACT: 'sorting-exact'
@@ -82,22 +100,223 @@ const defaultHighlighting = {
     }
 };
 
-const defaultLayers = [{
-    name: LayersNames.GRID,
-}, {
-    name: LayersNames.BACK,
+const gridPatterns = {
+
+    dot: [{
+        color: '#AAAAAA',
+        thickness: 1,
+        markup: 'rect',
+        render: function(el, opt) {
+            V(el).attr({
+                width: opt.thickness,
+                height: opt.thickness,
+                fill: opt.color
+            });
+        }
+    }],
+
+    fixedDot: [{
+        color: '#AAAAAA',
+        thickness: 1,
+        markup: 'rect',
+        render: function(el, opt) {
+            V(el).attr({ fill: opt.color });
+        },
+        update: function(el, opt, paper) {
+            const { sx, sy } = paper.scale();
+            const width = sx <= 1 ? opt.thickness : opt.thickness / sx;
+            const height = sy <= 1 ? opt.thickness : opt.thickness / sy;
+            V(el).attr({ width, height });
+        }
+    }],
+
+    mesh: [{
+        color: '#AAAAAA',
+        thickness: 1,
+        markup: 'path',
+        render: function(el, opt) {
+
+            var d;
+            var width = opt.width;
+            var height = opt.height;
+            var thickness = opt.thickness;
+
+            if (width - thickness >= 0 && height - thickness >= 0) {
+                d = ['M', width, 0, 'H0 M0 0 V0', height].join(' ');
+            } else {
+                d = 'M 0 0 0 0';
+            }
+
+            V(el).attr({ 'd': d, stroke: opt.color, 'stroke-width': opt.thickness });
+        }
+    }],
+
+    doubleMesh: [{
+        color: '#AAAAAA',
+        thickness: 1,
+        markup: 'path',
+        render: function(el, opt) {
+
+            var d;
+            var width = opt.width;
+            var height = opt.height;
+            var thickness = opt.thickness;
+
+            if (width - thickness >= 0 && height - thickness >= 0) {
+                d = ['M', width, 0, 'H0 M0 0 V0', height].join(' ');
+            } else {
+                d = 'M 0 0 0 0';
+            }
+
+            V(el).attr({ 'd': d, stroke: opt.color, 'stroke-width': opt.thickness });
+        }
+    }, {
+        color: '#000000',
+        thickness: 3,
+        scaleFactor: 4,
+        markup: 'path',
+        render: function(el, opt) {
+
+            var d;
+            var width = opt.width;
+            var height = opt.height;
+            var thickness = opt.thickness;
+
+            if (width - thickness >= 0 && height - thickness >= 0) {
+                d = ['M', width, 0, 'H0 M0 0 V0', height].join(' ');
+            } else {
+                d = 'M 0 0 0 0';
+            }
+
+            V(el).attr({ 'd': d, stroke: opt.color, 'stroke-width': opt.thickness });
+        }
+    }]
+};
+
+const backgroundPatterns = {
+
+    flipXy: function(img) {
+        // d b
+        // q p
+
+        var canvas = document.createElement('canvas');
+        var imgWidth = img.width;
+        var imgHeight = img.height;
+
+        canvas.width = 2 * imgWidth;
+        canvas.height = 2 * imgHeight;
+
+        var ctx = canvas.getContext('2d');
+        // top-left image
+        ctx.drawImage(img, 0, 0, imgWidth, imgHeight);
+        // xy-flipped bottom-right image
+        ctx.setTransform(-1, 0, 0, -1, canvas.width, canvas.height);
+        ctx.drawImage(img, 0, 0, imgWidth, imgHeight);
+        // x-flipped top-right image
+        ctx.setTransform(-1, 0, 0, 1, canvas.width, 0);
+        ctx.drawImage(img, 0, 0, imgWidth, imgHeight);
+        // y-flipped bottom-left image
+        ctx.setTransform(1, 0, 0, -1, 0, canvas.height);
+        ctx.drawImage(img, 0, 0, imgWidth, imgHeight);
+
+        return canvas;
+    },
+
+    flipX: function(img) {
+        // d b
+        // d b
+
+        var canvas = document.createElement('canvas');
+        var imgWidth = img.width;
+        var imgHeight = img.height;
+
+        canvas.width = imgWidth * 2;
+        canvas.height = imgHeight;
+
+        var ctx = canvas.getContext('2d');
+        // left image
+        ctx.drawImage(img, 0, 0, imgWidth, imgHeight);
+        // flipped right image
+        ctx.translate(2 * imgWidth, 0);
+        ctx.scale(-1, 1);
+        ctx.drawImage(img, 0, 0, imgWidth, imgHeight);
+
+        return canvas;
+    },
+
+    flipY: function(img) {
+        // d d
+        // q q
+
+        var canvas = document.createElement('canvas');
+        var imgWidth = img.width;
+        var imgHeight = img.height;
+
+        canvas.width = imgWidth;
+        canvas.height = imgHeight * 2;
+
+        var ctx = canvas.getContext('2d');
+        // top image
+        ctx.drawImage(img, 0, 0, imgWidth, imgHeight);
+        // flipped bottom image
+        ctx.translate(0, 2 * imgHeight);
+        ctx.scale(1, -1);
+        ctx.drawImage(img, 0, 0, imgWidth, imgHeight);
+
+        return canvas;
+    },
+
+    watermark: function(img, opt) {
+        //   d
+        // d
+
+        opt = opt || {};
+
+        var imgWidth = img.width;
+        var imgHeight = img.height;
+
+        var canvas = document.createElement('canvas');
+        canvas.width = imgWidth * 3;
+        canvas.height = imgHeight * 3;
+
+        var ctx = canvas.getContext('2d');
+        var angle = isNumber(opt.watermarkAngle) ? -opt.watermarkAngle : -20;
+        var radians = toRad(angle);
+        var stepX = canvas.width / 4;
+        var stepY = canvas.height / 4;
+
+        for (var i = 0; i < 4; i++) {
+            for (var j = 0; j < 4; j++) {
+                if ((i + j) % 2 > 0) {
+                    // reset the current transformations
+                    ctx.setTransform(1, 0, 0, 1, (2 * i - 1) * stepX, (2 * j - 1) * stepY);
+                    ctx.rotate(radians);
+                    ctx.drawImage(img, -imgWidth / 2, -imgHeight / 2, imgWidth, imgHeight);
+                }
+            }
+        }
+
+        return canvas;
+    }
+};
+
+const implicitLayers = [{
+    id: paperLayers.GRID,
+    type: 'GridLayerView',
+    patterns: gridPatterns
 }, {
-    name: LayersNames.CELLS,
+    id: paperLayers.BACK,
 }, {
-    name: LayersNames.LABELS,
+    id: paperLayers.LABELS,
 }, {
-    name: LayersNames.FRONT
+    id: paperLayers.FRONT
 }, {
-    name: LayersNames.TOOLS
+    id: paperLayers.TOOLS
 }];
 
-export const Paper = View.extend({
+const CELL_VIEW_PLACEHOLDER_MARKER = Symbol('joint.cellViewPlaceholderMarker');
 
+export const Paper = View.extend({
     className: 'paper',
 
     options: {
@@ -173,7 +392,7 @@ export const Paper = View.extend({
         // }
         defaultLink: function() {
             // Do not create hard dependency on the joint.shapes.standard namespace (by importing the standard.Link model directly)
-            const { cellNamespace } = this.model.get('cells');
+            const { cellNamespace } = this.model.layerCollection;
             const ctor = getByPath(cellNamespace, ['standard', 'Link']);
             if (!ctor) throw new Error('dia.Paper: no default link model found. Use `options.defaultLink` to specify a default link model.');
             return new ctor();
@@ -267,14 +486,28 @@ export const Paper = View.extend({
 
         autoFreeze: false,
 
+        viewManagement: false,
+
         // no docs yet
         onViewUpdate: function(view, flag, priority, opt, paper) {
-            // Do not update connected links when:
-            // 1. the view was just inserted (added to the graph and rendered)
-            // 2. the view was just mounted (added back to the paper by viewport function)
-            // 3. the change was marked as `isolate`.
-            // 4. the view model was just removed from the graph
-            if ((flag & (view.FLAG_INSERT | view.FLAG_REMOVE)) || opt.mounting || opt.isolate) return;
+            if (opt.mounting || opt.isolate) {
+                // Do not update connected links when:
+                // - the view was just mounted (added back to the paper by viewport function)
+                // - the change was marked as `isolate`.
+                return;
+            }
+            // Always update connected links when the view model was replaced with another model
+            // with the same id.
+            // Note: the removal is done in 2 steps: remove the old model, add the new model.
+            // We update connected links on the add step.
+            if (!(opt.replace && opt.add)) {
+                if ((flag & (paper.FLAG_INSERT | paper.FLAG_REMOVE))) {
+                    // Do not update connected links when:
+                    // - the view was just inserted (added to the graph and rendered)
+                    // - the view model was just removed from the graph
+                    return;
+                }
+            }
             paper.requestConnectedLinksUpdate(view, priority, opt);
         },
 
@@ -293,6 +526,8 @@ export const Paper = View.extend({
 
         cellViewNamespace: null,
 
+        layerViewNamespace: null,
+
         routerNamespace: null,
 
         connectorNamespace: null,
@@ -305,7 +540,7 @@ export const Paper = View.extend({
 
         connectionPointNamespace: connectionPoints,
 
-        overflow: false
+        overflow: false,
     },
 
     events: {
@@ -349,11 +584,13 @@ export const Paper = View.extend({
     `,
 
     svg: null,
-    viewport: null,
     defs: null,
     tools: null,
     layers: null,
 
+    // deprecated, use layers element instead
+    viewport: null,
+
     // For storing the current transformation matrix (CTM) of the paper's viewport.
     _viewportMatrix: null,
     // For verifying whether the CTM is up-to-date. The viewport transform attribute
@@ -364,7 +601,6 @@ export const Paper = View.extend({
     // Paper Layers
     _layers: null,
 
-    SORT_DELAYING_BATCHES: ['add', 'to-front', 'to-back'],
     UPDATE_DELAYING_BATCHES: ['translate'],
     // If you interact with these elements,
     // the default interaction such as `element move` is prevented.
@@ -387,8 +623,15 @@ export const Paper = View.extend({
     // to mitigate the differences between the model and view geometry.
     DEFAULT_FIND_BUFFER: 200,
 
-    // Default layer to insert the cell views into.
-    DEFAULT_CELL_LAYER: LayersNames.CELLS,
+    FLAG_INSERT: 1<<30,
+    FLAG_REMOVE: 1<<29,
+    FLAG_INIT: 1<<28,
+
+    // Layers that are always present on the paper (e.g. grid, back, front, tools)
+    implicitLayers,
+
+    // Reference layer for inserting new graph layers.
+    graphLayerRefId: paperLayers.LABELS,
 
     init: function() {
 
@@ -399,23 +642,36 @@ export const Paper = View.extend({
             /* eslint-enable no-undef */
         }
 
+        const defaultLayerViewNamespace = {
+            LayerView,
+            GraphLayerView,
+            GridLayerView,
+        };
+
+        this.layerViewNamespace = defaultsDeep({}, options.layerViewNamespace || {}, defaultLayerViewNamespace);
+
         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: {},
-            namesMap: {},
             order: [],
         };
 
+        // Hash of all cell views.
+        this._views = {};
+        this._viewPlaceholders = {};
+        this._idToCid = {};
+
         this.cloneOptions();
         this.render();
         this._setDimensions();
         this.startListening();
 
-        // Hash of all cell views.
-        this._views = {};
-
         // Mouse wheel events buffer
         this._mw_evt_buffer = {
             event: null,
@@ -423,9 +679,7 @@ export const Paper = View.extend({
         };
 
         // Render existing cells in the graph
-        this.resetViews(model.attributes.cells.models);
-        // Start the Rendering Loop
-        if (!this.isFrozen() && this.isAsync()) this.updateViewsAsync();
+        this.resetViews(model.getCells());
     },
 
     _resetUpdates: function() {
@@ -434,16 +688,15 @@ export const Paper = View.extend({
         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,
         };
     },
 
@@ -451,10 +704,13 @@ export const Paper = View.extend({
         var model = this.model;
         this.listenTo(model, 'add', this.onCellAdded)
             .listenTo(model, 'remove', this.onCellRemoved)
-            .listenTo(model, 'change', this.onCellChange)
             .listenTo(model, 'reset', this.onGraphReset)
-            .listenTo(model, 'sort', this.onGraphSort)
             .listenTo(model, 'batch:stop', this.onGraphBatchStop);
+
+        this.listenTo(model, 'layer:add', this.onGraphLayerAdd)
+            .listenTo(model, 'layer:remove', this.onGraphLayerRemove)
+            .listenTo(model, 'layers:sort', this.onGraphLayerCollectionSort);
+
         this.on('cell:highlight', this.onCellHighlight)
             .on('cell:unhighlight', this.onCellUnhighlight)
             .on('transform', this.update);
@@ -472,33 +728,28 @@ export const Paper = View.extend({
     },
 
     onCellRemoved: function(cell, _, opt) {
-        const view = this.findViewByModel(cell);
-        if (view) this.requestViewUpdate(view, view.FLAG_REMOVE, view.UPDATE_PRIORITY, opt);
-    },
-
-    onCellChange: function(cell, opt) {
-        if (cell === this.model.attributes.cells) return;
-        if (
-            cell.hasChanged('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) return;
+        if (viewLike[CELL_VIEW_PLACEHOLDER_MARKER]) {
+            this._unregisterCellViewPlaceholder(viewLike);
+        } else {
+            this.requestViewUpdate(viewLike, this.FLAG_REMOVE, viewLike.UPDATE_PRIORITY, opt);
         }
     },
 
-    onGraphReset: function(collection, opt) {
-        this.resetLayers();
-        this.resetViews(collection.models, opt);
-    },
-
-    onGraphSort: function() {
-        if (this.model.hasActiveBatch(this.SORT_DELAYING_BATCHES)) return;
-        this.sortViews();
+    onGraphReset: function(_collection, opt) {
+        // Re-render all graph layer views
+        // but keep the implicit layer views.
+        this.renderGraphLayerViews();
+        this.resetLayerViews();
+        // Backward compatibility: reassign the `cells` property
+        // with the default layer view.
+        this.assertLayerViews();
+        this.resetViews(this.model.getCells(), opt);
     },
 
     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()) {
@@ -507,10 +758,95 @@ export const Paper = View.extend({
                 this.updateViews(data);
             }
         }
-        var sortDelayingBatches = this.SORT_DELAYING_BATCHES;
-        if (sortDelayingBatches.includes(name) && !graph.hasActiveBatch(sortDelayingBatches)) {
-            this.sortViews();
+    },
+
+    /**
+    * @protected
+    * @description When a new layer is added to the graph, we create a new layer view
+    **/
+    onGraphLayerAdd: function(layer, _, opt) {
+        if (this.hasLayerView(layer.id)) return;
+
+        const layerView = this.createLayerView({
+            id: layer.id,
+            model: layer
+        });
+
+        const layers = this.model.getLayers();
+        let before;
+        // Note: There is always at least one graph layer.
+        if (layers[layers.length - 1] === layer) {
+            // This is the last layer, so insert before the labels layer
+            before = paperLayers.LABELS;
+        } else {
+            // There is a layer after the current one, so insert before that one
+            const index = layers.indexOf(layer);
+            before = layers[index + 1].id;
         }
+
+        this.addLayerView(layerView, { before });
+    },
+
+    /**
+     * @protected
+     * @description When a layer is removed from the graph, we remove the corresponding layer view
+     **/
+    onGraphLayerRemove: function(layer, _, opt) {
+        if (!this.hasLayerView(layer)) return;
+
+        // Request layer removal. Since the UPDATE_PRIORITY is lower
+        // than cells update priority, the cell views will be removed first.
+        this.requestLayerViewRemoval(layer);
+    },
+
+    /**
+     * @protected
+     * @description When the graph layer collection is sorted,
+     * we reorder all graph layer views.
+     **/
+    onGraphLayerCollectionSort: function(layerCollection) {
+        layerCollection.each(layer => {
+            if (!this.hasLayerView(layer)) return;
+
+            this.moveLayerView(layer, { before: this.graphLayerRefId });
+        });
+    },
+
+    /**
+     * @protected
+     * @description Resets all graph layer views.
+     */
+    renderGraphLayerViews: function() {
+        // Remove all existing graph layer views
+        // Note: we don't use `getGraphLayerViews()` here because
+        // rendered graph layer views could be different from the ones
+        // in the graph layer collection (`onResetGraphLayerCollectionReset`).
+        this.getLayerViews().forEach(layerView => {
+            if (!layerView[GRAPH_LAYER_VIEW_MARKER]) return;
+            this._removeLayerView(layerView);
+        });
+        // Create and insert new graph layer views
+        this.model.getLayers().forEach(layer => {
+            const layerView = this.createLayerView({
+                id: layer.id,
+                model: layer
+            });
+            // Insert the layer view into the paper layers, just before the labels layer.
+            // All cell layers are positioned between the "back" and "labels" layers,
+            // with the default "cells" layer originally occupying this position.
+            this.addLayerView(layerView, { before: this.graphLayerRefId });
+        });
+    },
+
+    /**
+     * @protected
+     * @description Renders all implicit layer views.
+     */
+    renderImplicitLayerViews: function() {
+        this.implicitLayers.forEach(layerInit => {
+            const layerView = this.createLayerView(layerInit);
+            this.addLayerView(layerView);
+        });
     },
 
     cloneOptions: function() {
@@ -558,6 +894,15 @@ export const Paper = View.extend({
             // 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() {
@@ -597,121 +942,301 @@ export const Paper = View.extend({
         }];
     },
 
-    hasLayerView(layerName) {
-        return  (layerName in this._layers.viewsMap);
+    /**
+     * @public
+     * @description Checks whether the layer view exists by the given layer id or layer model.
+     * @param {string|dia.GraphLayer} layerRef - Layer id or layer model.
+     * @return {boolean} True if the layer view exists, false otherwise.
+     */
+    hasLayerView(layerRef) {
+        let layerId;
+        if (isString(layerRef)) {
+            layerId = layerRef;
+        } else if (layerRef) {
+            layerId = layerRef.id;
+        } else {
+            return false;
+        }
+        return (layerId in this._layers.viewsMap);
     },
 
-    getLayerView(layerName) {
-        const { _layers: { viewsMap }} = this;
-        if (layerName in viewsMap) return viewsMap[layerName];
-        throw new Error(`dia.Paper: Unknown layer "${layerName}".`);
-    },
+    /**
+     * @public
+     * @description Returns the layer view by the given layer id or layer model.
+     * @param {string|dia.GraphLayer} layerRef - Layer id or layer model.
+     * @return {dia.LayerView} The layer view.
+     * @throws {Error} if the layer view is not found
+     */
+    getLayerView(layerRef) {
 
-    getLayerNode(layerName) {
-        return this.getLayerView(layerName).el;
-    },
+        let layerId;
+        if (isString(layerRef)) {
+            layerId = layerRef;
+        } else if (layerRef) {
+            layerId = layerRef.id;
+        } else {
+            throw new Error('dia.Paper: No layer provided.');
+        }
 
-    _removeLayer(layerView) {
-        this._unregisterLayer(layerView);
-        layerView.remove();
-    },
+        const layerView = this._layers.viewsMap[layerId];
+        if (!layerView) {
+            throw new Error(`dia.Paper: Unknown layer view "${layerId}".`);
+        }
 
-    _unregisterLayer(layerView) {
-        const { _layers: { viewsMap, namesMap, order }} = this;
-        const layerName = this._getLayerName(layerView);
-        order.splice(order.indexOf(layerName), 1);
-        delete namesMap[layerView.cid];
-        delete viewsMap[layerName];
+        return layerView;
     },
 
-    _registerLayer(layerName, layerView, beforeLayerView) {
-        const { _layers: { viewsMap, namesMap, order }} = this;
-        if (beforeLayerView) {
-            const beforeLayerName = this._getLayerName(beforeLayerView);
-            order.splice(order.indexOf(beforeLayerName), 0, layerName);
-        } else {
-            order.push(layerName);
-        }
-        viewsMap[layerName] = layerView;
-        namesMap[layerView.cid] = layerName;
+    /**
+     * @deprecated use `getLayerView(layerId).el` instead
+     */
+    getLayerNode(layerId) {
+        return this.getLayerView(layerId).el;
     },
 
-    _getLayerView(layer) {
-        const { _layers: { namesMap, viewsMap }} = this;
-        if (layer instanceof PaperLayer) {
-            if (layer.cid in namesMap) return layer;
-            return null;
-        }
-        if (layer in viewsMap) return viewsMap[layer];
-        return null;
+    /**
+     * @protected
+     * @description Removes the given layer view from the paper.
+     * It does not check whether the layer view is empty.
+     * @param {dia.LayerView} layerView - The layer view to remove.
+     */
+    _removeLayerView(layerView) {
+        this._unregisterLayerView(layerView);
+        layerView.remove();
     },
 
-    _getLayerName(layerView) {
-        const { _layers: { namesMap }} = this;
-        return namesMap[layerView.cid];
+
+    /**
+     * @protected
+     * @description Removes all layer views from the paper.
+     * It does not check whether the layer views are empty.
+     */
+    _removeLayerViews: function() {
+        Object.values(this._layers.viewsMap).forEach(layerView => {
+            this._removeLayerView(layerView);
+        });
     },
 
-    _requireLayerView(layer) {
-        const layerView = this._getLayerView(layer);
-        if (!layerView) {
-            if (layer instanceof PaperLayer) {
-                throw new Error('dia.Paper: The layer is not registered.');
+    /**
+     * @protected
+     * @description Unregisters the given layer view from the paper.
+     * @param {dia.LayerView} layerView - The layer view to unregister.
+     */
+    _unregisterLayerView(layerView) {
+        const { _layers: { viewsMap, order }} = this;
+        const layerId = layerView.id;
+        // Remove the layer id from the order list.
+        const layerIndex = order.indexOf(layerId);
+        if (layerIndex !== -1) {
+            order.splice(layerIndex, 1);
+        }
+        // Unlink the layer view from the paper.
+        layerView.unsetPaperReference();
+        // Remove the layer view from the paper's registry.
+        delete viewsMap[layerId];
+    },
+
+    /**
+     * @protected
+     * @description Registers the given layer view in the paper.
+     * @param {dia.LayerView} layerView - The layer view to register.
+     * @throws {Error} if the layer view is not an instance of dia.LayerView
+     * @throws {Error} if the layer view already exists in the paper
+     */
+    _registerLayerView(layerView) {
+        if (!layerView || !layerView[LAYER_VIEW_MARKER]) {
+            throw new Error('dia.Paper: The layer view must be an instance of dia.LayerView.');
+        }
+
+        if (this.hasLayerView(layerView.id)) {
+            throw new Error(`dia.Paper: The layer view "${layerView.id}" already exists.`);
+        }
+        // Link the layer view back to the paper.
+        layerView.setPaperReference(this);
+        // Store the layer view in the paper's registry.
+        this._layers.viewsMap[layerView.id] = layerView;
+    },
+
+    /**
+     * @public
+     * @description Removes the layer view by the given layer id or layer model.
+     * @param {string|dia.GraphLayer} layerRef - Layer id or layer model.
+     * @throws {Error} if the layer view is not empty
+     */
+    removeLayerView(layerRef) {
+        const layerView = this.getLayerView(layerRef);
+        if (!layerView.isEmpty()) {
+            throw new Error('dia.Paper: The layer view is not empty.');
+        }
+
+        this._removeLayerView(layerView);
+    },
+
+    /**
+     * @protected
+     * @description Schedules the layer view removal by the given layer id or layer model.
+     * The actual removal will be performed during the paper update cycle.
+     * @param {string|dia.GraphLayer} layerRef - Layer id or layer model.
+     * @param {Object} [opt] - Update options.
+     */
+    requestLayerViewRemoval(layerRef, opt) {
+        const layerView = this.getLayerView(layerRef);
+        const { FLAG_REMOVE } = this;
+        const { UPDATE_PRIORITY } = layerView;
+
+        this.requestViewUpdate(layerView, FLAG_REMOVE, UPDATE_PRIORITY, opt);
+    },
+
+    /**
+     * @public
+     * @internal not documented
+     * @description Schedules the cell view insertion into the appropriate layer view.
+     * The actual insertion will be performed during the paper update cycle.
+     * @param {dia.Cell} cell - The cell model whose view should be inserted.
+     * @param {Object} [opt] - Update options.
+     */
+    requestCellViewInsertion(cell, opt) {
+        const viewLike = this._getCellViewLike(cell);
+        if (!viewLike) return;
+        this.requestViewUpdate(viewLike, this.FLAG_INSERT, viewLike.UPDATE_PRIORITY, opt);
+    },
+
+    /**
+     * @private
+     * Helper method for addLayerView and moveLayerView methods
+     */
+    _getBeforeLayerViewFromOptions(layerView, options) {
+        let { before = null, index } = options;
+
+        if (before && index !== undefined) {
+            throw new Error('dia.Paper: Options "before" and "index" are mutually exclusive.');
+        }
+
+        let computedBefore;
+        if (index !== undefined) {
+            const { _layers: { order }} = this;
+            if (index >= order.length) {
+                // If index is greater than the number of layers,
+                // return before as null (move to the end).
+                computedBefore = null;
+            } else if (index < 0) {
+                // If index is negative, move to the beginning.
+                computedBefore = order[0];
             } else {
-                throw new Error(`dia.Paper: Unknown layer "${layer}".`);
+                const originalIndex = order.indexOf(layerView.id);
+                if (originalIndex !== -1 && index > originalIndex) {
+                    // If moving a layer upwards in the stack, we need to adjust the index
+                    // to account for the layer being removed from its original position.
+                    index += 1;
+                }
+                // Otherwise, get the layer ID at the specified index.
+                computedBefore = order[index] || null;
             }
+        } else {
+            computedBefore = before;
         }
-        return layerView;
+
+        return computedBefore ? this.getLayerView(computedBefore) : null;
     },
 
-    hasLayer(layer) {
-        return this._getLayerView(layer) !== null;
+    /**
+     * @public
+     * @description Adds the layer view to the paper.
+     * @param {dia.LayerView} layerView - The layer view to add.
+     * @param {Object} [options] - Adding options.
+     * @param {string|dia.GraphLayer} [options.before] - Layer id or layer model before
+     */
+    addLayerView(layerView, options = {}) {
+        this._registerLayerView(layerView);
+
+        const beforeLayerView = this._getBeforeLayerViewFromOptions(layerView, options);
+        this.insertLayerView(layerView, beforeLayerView);
     },
 
-    removeLayer(layer) {
-        const layerView = this._requireLayerView(layer);
-        if (!layerView.isEmpty()) {
-            throw new Error('dia.Paper: The layer is not empty.');
-        }
-        this._removeLayer(layerView);
+    /**
+     * @public
+     * @description Moves the layer view.
+     * @param {Paper.LayerRef} layerRef - The layer view reference to move.
+     * @param {Object} [options] - Moving options.
+     * @param {Paper.LayerRef} [options.before] - Layer id or layer model before
+     * @param {number} [options.index] - Zero-based index to which to move the layer view.
+     */
+    moveLayerView(layerRef, options = {}) {
+        const layerView = this.getLayerView(layerRef);
+
+        const beforeLayerView = this._getBeforeLayerViewFromOptions(layerView, options);
+        this.insertLayerView(layerView, beforeLayerView);
     },
 
-    addLayer(layerName, layerView, options = {}) {
-        if (!layerName || typeof layerName !== 'string') {
-            throw new Error('dia.Paper: The layer name must be provided.');
-        }
-        if (this._getLayerView(layerName)) {
-            throw new Error(`dia.Paper: The layer "${layerName}" already exists.`);
-        }
-        if (!(layerView instanceof PaperLayer)) {
-            throw new Error('dia.Paper: The layer view is not an instance of dia.PaperLayer.');
-        }
-        const { insertBefore } = options;
-        if (!insertBefore) {
-            this._registerLayer(layerName, layerView, null);
-            this.layers.appendChild(layerView.el);
-        } else {
-            const beforeLayerView = this._requireLayerView(insertBefore);
-            this._registerLayer(layerName, layerView, beforeLayerView);
+    /**
+     * @protected
+     * @description Inserts the layer view into the paper.
+     * If the layer view already exists in the paper, it is moved to the new position.
+     * @param {dia.LayerView} layerView - The layer view to insert.
+     * @param {dia.LayerView} [before] - Layer view before
+     * which the layer view should be inserted.
+     */
+    insertLayerView(layerView, beforeLayerView) {
+        const layerId = layerView.id;
+
+        const { _layers: { order }} = this;
+        const currentLayerIndex = order.indexOf(layerId);
+
+        // Should the layer view be inserted before another layer view?
+        if (beforeLayerView) {
+            const beforeLayerViewId = beforeLayerView.id;
+            if (layerId === beforeLayerViewId) {
+                // The layer view is already in the right place.
+                return;
+            }
+
+            let beforeLayerPosition = order.indexOf(beforeLayerViewId);
+            // Remove from the `order` list if the layer view is already in the order.
+            if (currentLayerIndex !== -1) {
+                if (currentLayerIndex < beforeLayerPosition) {
+                    beforeLayerPosition -= 1;
+                }
+                order.splice(currentLayerIndex, 1);
+            }
+            order.splice(beforeLayerPosition, 0, layerId);
             this.layers.insertBefore(layerView.el, beforeLayerView.el);
+            return;
         }
-    },
 
-    moveLayer(layer, insertBefore) {
-        const layerView = this._requireLayerView(layer);
-        if (layerView === this._getLayerView(insertBefore)) return;
-        const layerName = this._getLayerName(layerView);
-        this._unregisterLayer(layerView);
-        this.addLayer(layerName, layerView, { insertBefore });
+        // Remove from the `order` list if the layer view is already in the order.
+        // This is needed for the case when the layer view is inserted in the new position.
+        if (currentLayerIndex !== -1) {
+            order.splice(currentLayerIndex, 1);
+        }
+        order.push(layerId);
+        this.layers.appendChild(layerView.el);
     },
 
-    getLayerNames() {
-        // Returns a sorted array of layer names.
+    /**
+     * @protected
+     * @description Returns an array of layer view ids in the order they are rendered.
+     * @returns {string[]} An array of layer view ids.
+     */
+    getLayerViewOrder() {
         return this._layers.order.slice();
     },
 
-    getLayers() {
-        // Returns a sorted array of layer views.
-        return this.getLayerNames().map(name => this.getLayerView(name));
+    /**
+     * @public
+     * @description Returns an array of layer views in the order they are rendered.
+     * @returns {dia.LayerView[]} An array of layer views.
+     */
+    getLayerViews() {
+        return this.getLayerViewOrder().map(id => this.getLayerView(id));
+    },
+
+    /**
+     * @public
+     * @description Returns an array of graph layer views in the order they are rendered.
+     * @returns {dia.GraphLayerView[]} An array of graph layer views.
+     */
+    getGraphLayerViews() {
+        const { _layers: { viewsMap }} = this;
+        return this.model.getLayers().map(layer => viewsMap[layer.id]);
     },
 
     render: function() {
@@ -727,7 +1252,7 @@ export const Paper = View.extend({
         this.defs = defs;
         this.layers = layers;
 
-        this.renderLayers();
+        this.renderLayerViews();
 
         V.ensureId(svg);
 
@@ -749,48 +1274,86 @@ export const Paper = View.extend({
         V(this.svg).prepend(V.createSVGStyle(css));
     },
 
-    createLayer(name) {
-        switch (name) {
-            case LayersNames.GRID:
-                return new GridLayer({ name, paper: this, patterns: this.constructor.gridPatterns });
-            default:
-                return new PaperLayer({ name });
+    /**
+     * @protected
+     * @description Creates a layer view instance based on the provided options.
+     * It finds the appropriate layer view constructor from the paper's
+     * `layerViewNamespace` and instantiates it.
+     * @param {*} options See `dia.LayerView` options.
+     * @returns {dia.LayerView}
+     */
+    createLayerView(options) {
+        if (options == null) {
+            throw new Error('dia.Paper: Layer view options are required.');
         }
-    },
 
-    renderLayer: function(name) {
-        const layerView = this.createLayer(name);
-        this.addLayer(name, layerView);
-        return layerView;
-    },
+        if (options.id == null) {
+            throw new Error('dia.Paper: Layer view id is required.');
+        }
+
+        const viewOptions = clone(options);
+
+        let viewConstructor;
+        if (viewOptions.model) {
+            const modelType = viewOptions.model.get('type') || viewOptions.model.constructor.name;
+            const type = modelType + 'View';
+
+            // For backward compatibility we use the LegacyGraphLayerView for the default `cells` layer.
+            if (this.model.layersController.legacyMode) {
+                viewConstructor = LegacyGraphLayerView;
+            } else {
+                viewConstructor = this.layerViewNamespace[type] || LayerView;
+            }
+        } else {
+            // Paper layers
+            const type = viewOptions.type;
+            viewConstructor = this.layerViewNamespace[type] || LayerView;
+        }
+
+        return new viewConstructor(viewOptions);
+    },
+
+    /**
+     * @protected
+     * @description Renders all paper layer views and graph layer views.
+     */
+    renderLayerViews: function() {
+        this._removeLayerViews();
+        // Render the paper layers.
+        this.renderImplicitLayerViews();
+        // Render the layers.
+        this.renderGraphLayerViews();
+        // Ensure that essential layer views are present.
+        this.assertLayerViews();
+    },
+
+    /**
+     * @protected
+     * @description Ensures that essential layer views are present on the paper.
+     * @throws {Error} if any of the essential layer views is missing
+     */
+    assertLayerViews: function() {
+        // Throws an exception if essential layer views are missing.
+        const cellsLayerView = this.getLayerView(this.model.getDefaultLayer().id);
+        const toolsLayerView = this.getLayerView(paperLayers.TOOLS);
+        const labelsLayerView = this.getLayerView(paperLayers.LABELS);
 
-    renderLayers: function(layers = defaultLayers) {
-        this.removeLayers();
-        layers.forEach(({ name }) => this.renderLayer(name));
-        // Throws an exception if doesn't exist
-        const cellsLayerView = this.getLayerView(LayersNames.CELLS);
-        const toolsLayerView = this.getLayerView(LayersNames.TOOLS);
-        const labelsLayerView = this.getLayerView(LayersNames.LABELS);
         // backwards compatibility
         this.tools = toolsLayerView.el;
         this.cells = this.viewport = cellsLayerView.el;
-        // user-select: none;
-        cellsLayerView.vel.addClass(addClassNamePrefix('viewport'));
+        // Backwards compatibility: same as `LegacyGraphLayerView` we keep
+        // the `viewport` class on the labels layer.
         labelsLayerView.vel.addClass(addClassNamePrefix('viewport'));
-        cellsLayerView.el.style.webkitUserSelect = 'none';
-        cellsLayerView.el.style.userSelect = 'none';
         labelsLayerView.el.style.webkitUserSelect = 'none';
         labelsLayerView.el.style.userSelect = 'none';
     },
 
-    removeLayers: function() {
-        const { _layers: { viewsMap }} = this;
-        Object.values(viewsMap).forEach(layerView => this._removeLayer(layerView));
-    },
-
-    resetLayers: function() {
-        const { _layers: { viewsMap }} = this;
-        Object.values(viewsMap).forEach(layerView => layerView.removePivots());
+    /**
+     * @protected
+     * @description Resets all layer views.
+     */
+    resetLayerViews: function() {
+        this.getLayerViews().forEach(layerView => layerView.reset());
     },
 
     update: function() {
@@ -916,56 +1479,54 @@ export const Paper = View.extend({
 
     clientMatrix: function() {
 
-        return V.createSVGMatrix(this.cells.getScreenCTM());
+        return V.createSVGMatrix(this.layers.getScreenCTM());
     },
 
     requestConnectedLinksUpdate: function(view, priority, opt) {
-        if (view instanceof CellView) {
-            var model = view.model;
-            var links = this.model.getConnectedLinks(model);
-            for (var j = 0, n = links.length; j < n; j++) {
-                var link = links[j];
-                var linkView = this.findViewByModel(link);
-                if (!linkView) continue;
-                var flagLabels = ['UPDATE'];
-                if (link.getTargetCell() === model) flagLabels.push('TARGET');
-                if (link.getSourceCell() === model) flagLabels.push('SOURCE');
-                var nextPriority = Math.max(priority + 1, linkView.UPDATE_PRIORITY);
-                this.scheduleViewUpdate(linkView, linkView.getFlag(flagLabels), nextPriority, opt);
-            }
+        if (!view || !view[CELL_VIEW_MARKER]) return;
+        var model = view.model;
+        var links = this.model.getConnectedLinks(model);
+        for (var j = 0, n = links.length; j < n; j++) {
+            var link = links[j];
+            var linkView = this._getCellViewLike(link);
+            if (!linkView) continue;
+            // 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(LinkView.Flags.UPDATE), nextPriority, opt);
         }
     },
 
     forcePostponedViewUpdate: function(view, flag) {
-        if (!view || !(view instanceof CellView)) return false;
-        var model = view.model;
+        if (!view || !view[CELL_VIEW_MARKER]) return false;
+        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;
@@ -976,13 +1537,14 @@ export const Paper = View.extend({
 
     scheduleViewUpdate: function(view, type, priority, opt) {
         const { _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, UPDATE_PRIORITY, cid } = view;
+        const { FLAG_REMOVE, FLAG_INSERT } = this;
+        const { UPDATE_PRIORITY, cid } = view;
+
         let priorityUpdates = updates.priorities[priority];
         if (!priorityUpdates) priorityUpdates = updates.priorities[priority] = {};
         // Move higher priority updates to this priority
@@ -1028,20 +1590,24 @@ export const Paper = View.extend({
     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) {
         if (!view) return 0;
-        const { FLAG_REMOVE, FLAG_INSERT, FLAG_INIT, model } = view;
-        if (view instanceof CellView) {
+        const { FLAG_REMOVE, FLAG_INSERT, FLAG_INIT } = this;
+        const { model } = view;
+        if (view[GRAPH_LAYER_VIEW_MARKER]) {
+            if (flag & FLAG_REMOVE) {
+                this.removeLayerView(view);
+                return 0;
+            }
+        }
+        if (view[CELL_VIEW_MARKER]) {
             if (flag & FLAG_REMOVE) {
                 this.removeView(model);
                 return 0;
@@ -1069,57 +1635,70 @@ export const Paper = View.extend({
     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, { viewport: null });
-        this.checkViewport(passingOpt);
-        this.updateViews(passingOpt);
+        // Update cell visibility without `cellVisibility` callback i.e. make the cells visible
+        const passingOpt = defaults({}, opt, { cellVisibility: null, viewport: null });
+        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 stats = { updated: updateCount, batches: batchCount, priority };
+        const batchStats = this.updateViewsBatch({ ...opt, batchSize: Infinity });
+        const stats = {
+            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--) {
@@ -1131,11 +1710,38 @@ export const Paper = View.extend({
 
     updateViewsAsync: function(opt, data) {
         opt || (opt = {});
-        data || (data = { processed: 0, priority: MIN_PRIORITY });
+        data || (data = {
+            processed: 0,
+            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);
             }
@@ -1144,7 +1750,7 @@ export const Paper = View.extend({
                 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;
@@ -1165,11 +1771,22 @@ export const Paper = View.extend({
                 } 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);
                     }
                 }
@@ -1189,6 +1806,7 @@ export const Paper = View.extend({
     },
 
     notifyBeforeRender: function(opt = {}) {
+        if (opt.silent) return;
         let beforeFn = opt.beforeRender;
         if (typeof beforeFn !== 'function') {
             beforeFn = this.options.beforeRender;
@@ -1198,6 +1816,7 @@ export const Paper = View.extend({
     },
 
     notifyAfterRender: function(stats, opt = {}) {
+        if (opt.silent) return;
         let afterFn = opt.afterRender;
         if (typeof afterFn !== 'function') {
             afterFn = this.options.afterRender;
@@ -1208,6 +1827,56 @@ export const Paper = View.extend({
         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;
@@ -1220,8 +1889,7 @@ export const Paper = View.extend({
         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
@@ -1233,33 +1901,56 @@ export const Paper = View.extend({
                     empty = false;
                     break main;
                 }
-                var view = views[cid];
+                var view = viewsRegistry[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) {
@@ -1286,104 +1977,125 @@ export const Paper = View.extend({
         };
     },
 
+    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++] = viewsRegistry[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++] = viewsRegistry[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 = viewsRegistry[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 = viewsRegistry[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 } = updates;
-        const visible = !cellView.DETACHABLE || !viewportFn || viewportFn.call(this, cellView, false, this);
+        const { mountedList, unmountedList } = updates;
+
+        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 });
             isMounted = true;
         }
@@ -1394,25 +2106,65 @@ export const Paper = View.extend({
         };
     },
 
-    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;
@@ -1428,6 +2180,10 @@ export const Paper = View.extend({
         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);
     },
 
@@ -1441,6 +2197,7 @@ export const Paper = View.extend({
         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);
@@ -1449,17 +2206,30 @@ export const Paper = View.extend({
         }
         this.options.frozen = updates.keyFrozen = false;
         if (updates.sort) {
-            this.sortViews();
+            this.sortLayerViews();
             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() {
@@ -1471,8 +2241,8 @@ export const Paper = View.extend({
         this.freeze();
         this._updates.disabled = true;
         //clean up all DOM elements/views to prevent memory leaks
-        this.removeLayers();
         this.removeViews();
+        this._removeLayerViews();
     },
 
     getComputedSize: function() {
@@ -1720,7 +2490,17 @@ export const Paper = View.extend({
             return this.model.getBBox() || new Rect();
         }
 
-        return V(this.cells).getBBox();
+        const graphLayerViews = this.getGraphLayerViews();
+        // Return an empty rectangle if there are no layers
+        // should not happen in practice
+        if (graphLayerViews.length === 0) {
+            return new Rect();
+        }
+
+        // Combine content area rectangles from all layers,
+        // considering only graph layer views to exclude non-cell elements (e.g., grid, tools)
+        const bbox = g.Rect.fromRectUnion(...graphLayerViews.map(view => view.vel.getBBox()));
+        return bbox;
     },
 
     // Return the dimensions of the content bbox in the paper units (as it appears on screen).
@@ -1759,21 +2539,57 @@ export const Paper = View.extend({
         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;
+    },
 
-        const { options } = this;
-        // A class taken from the paper options.
-        var optionalViewClass;
+    _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;
+    },
 
-        // A default basic class (either dia.ElementView or dia.LinkView)
-        var defaultViewClass;
+    _registerCellView: function(cellView) {
+        cellView.paper = this;
+        this._views[cellView.model.id] = cellView;
+    },
 
-        // 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, '.');
+    _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 ? paperLayers.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.
+        let optionalViewClass;
+        let defaultViewClass;
         if (cell.isLink()) {
             optionalViewClass = options.linkView;
             defaultViewClass = LinkView;
@@ -1781,7 +2597,6 @@ export const Paper = View.extend({
             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
@@ -1789,29 +2604,54 @@ export const Paper = View.extend({
         //  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)
+        return (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
-        });
+    // 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;
     },
 
-    removeView: function(cell) {
+    createViewForModel: function(cell, cid) {
+        return this._initializeCellView(this._resolveCellViewClass(cell), cell, cid);
+    },
 
+    removeView: function(cell) {
         const { id } = cell;
         const { _views, _updates } = this;
         const view = _views[id];
         if (view) {
             var { cid } = view;
-            const { mounted, unmounted } = _updates;
+            const { 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;
     },
@@ -1825,7 +2665,7 @@ export const Paper = View.extend({
         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.
@@ -1835,14 +2675,42 @@ export const Paper = View.extend({
             }
         }
         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.
@@ -1853,78 +2721,112 @@ export const Paper = View.extend({
     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 });
         for (var i = 0, n = cells.length; i < n; i++) {
             this.renderView(cells[i], opt);
         }
         this.unfreeze({ key });
-        this.sortViews();
+        this.sortLayerViews();
     },
 
     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() {
-
+    sortLayerViews: function() {
         if (!this.isExactSorting()) {
             // noop
             return;
         }
-        if (this.isFrozen()) {
+        if (this.isFrozen() || this.isIdle()) {
             // sort views once unfrozen
             this._updates.sort = true;
             return;
         }
-        this.sortViewsExact();
+        this.sortLayerViewsExact();
     },
 
-    sortViewsExact: function() {
+    sortLayerViewsExact: function() {
+        this.getGraphLayerViews().forEach(view => view.sortExact());
+    },
 
-        // Run insertion sort algorithm in order to efficiently sort DOM elements according to their
-        // associated model `z` attribute.
+    insertView: function(view, isInitialInsert) {
 
-        var cellNodes = Array.from(this.cells.childNodes).filter(node => node.getAttribute('model-id'));
-        var cells = this.model.get('cells');
+        // layer can be null if it is added to the graph with 'dry' option
+        const layerId = this.model.getCellLayerId(view.model);
+        const layerView = this.getLayerView(layerId);
 
-        sortElements(cellNodes, function(a, b) {
-            var cellA = cells.get(a.getAttribute('model-id'));
-            var cellB = cells.get(b.getAttribute('model-id'));
-            var zA = cellA.attributes.z || 0;
-            var zB = cellB.attributes.z || 0;
-            return (zA === zB) ? 0 : (zA < zB) ? -1 : 1;
-        });
+        layerView.insertCellView(view);
+
+        view.onMount(isInitialInsert);
     },
 
-    insertView: function(view, isInitialInsert) {
-        const { el, model } = view;
+    _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();
+        }
+    },
 
-        const layerName = model.get('layer') || this.DEFAULT_CELL_LAYER;
-        const layerView = this.getLayerView(layerName);
+    // 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);
+    },
 
-        switch (this.options.sorting) {
-            case sortingTypes.APPROX:
-                layerView.insertSortedNode(el, model.get('z'));
-                break;
-            case sortingTypes.EXACT:
-            default:
-                layerView.insertNode(el);
-                break;
+    _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;
         }
-        view.onMount(isInitialInsert);
+        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;
     },
 
-    detachView(view) {
-        view.unmount();
-        view.onDetach();
+    // 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 = viewsRegistry[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
@@ -1932,7 +2834,7 @@ export const Paper = View.extend({
     findView: function($el) {
 
         var el = isString($el)
-            ? this.cells.querySelector($el)
+            ? this.layers.querySelector($el)
             : $el instanceof $ ? $el[0] : $el;
 
         var id = this.findAttribute('model-id', el);
@@ -1942,11 +2844,32 @@ export const Paper = View.extend({
     },
 
     // 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
@@ -1957,7 +2880,7 @@ export const Paper = View.extend({
         var views = this.model.getElements().map(this.findViewByModel, this);
 
         return views.filter(function(view) {
-            return view && view.vel.getBBox({ target: this.cells }).containsPoint(p);
+            return view && view.vel.getBBox({ target: this.layers }).containsPoint(p);
         }, this);
     },
 
@@ -1971,7 +2894,7 @@ export const Paper = View.extend({
         var method = opt.strict ? 'containsRect' : 'intersect';
 
         return views.filter(function(view) {
-            return view && rect[method](view.vel.getBBox({ target: this.cells }));
+            return view && rect[method](view.vel.getBBox({ target: this.layers }));
         }, this);
     },
 
@@ -2025,6 +2948,92 @@ export const Paper = View.extend({
         );
     },
 
+    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,
@@ -2477,8 +3486,11 @@ export const Paper = View.extend({
 
         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);
@@ -2495,8 +3507,11 @@ export const Paper = View.extend({
 
         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);
@@ -2797,7 +3812,7 @@ export const Paper = View.extend({
             return true;
         }
 
-        if (view && view.model && (view.model instanceof Cell)) {
+        if (view && view.model && (view.model[CELL_MARKER])) {
             return false;
         }
 
@@ -2813,13 +3828,13 @@ export const Paper = View.extend({
         options.gridSize = gridSize;
         if (options.drawGrid && !options.drawGridSize) {
             // Do not redraw the grid if the `drawGridSize` is set.
-            this.getLayerView(LayersNames.GRID).renderGrid();
+            this.getLayerView(paperLayers.GRID).renderGrid();
         }
         return this;
     },
 
     setGrid: function(drawGrid) {
-        this.getLayerView(LayersNames.GRID).setGrid(drawGrid);
+        this.getLayerView(paperLayers.GRID).setGrid(drawGrid);
         return this;
     },
 
@@ -3168,202 +4183,8 @@ export const Paper = View.extend({
 
     sorting: sortingTypes,
 
-    Layers: LayersNames,
+    Layers: paperLayers,
 
-    backgroundPatterns: {
-
-        flipXy: function(img) {
-            // d b
-            // q p
-
-            var canvas = document.createElement('canvas');
-            var imgWidth = img.width;
-            var imgHeight = img.height;
-
-            canvas.width = 2 * imgWidth;
-            canvas.height = 2 * imgHeight;
-
-            var ctx = canvas.getContext('2d');
-            // top-left image
-            ctx.drawImage(img, 0, 0, imgWidth, imgHeight);
-            // xy-flipped bottom-right image
-            ctx.setTransform(-1, 0, 0, -1, canvas.width, canvas.height);
-            ctx.drawImage(img, 0, 0, imgWidth, imgHeight);
-            // x-flipped top-right image
-            ctx.setTransform(-1, 0, 0, 1, canvas.width, 0);
-            ctx.drawImage(img, 0, 0, imgWidth, imgHeight);
-            // y-flipped bottom-left image
-            ctx.setTransform(1, 0, 0, -1, 0, canvas.height);
-            ctx.drawImage(img, 0, 0, imgWidth, imgHeight);
-
-            return canvas;
-        },
-
-        flipX: function(img) {
-            // d b
-            // d b
-
-            var canvas = document.createElement('canvas');
-            var imgWidth = img.width;
-            var imgHeight = img.height;
-
-            canvas.width = imgWidth * 2;
-            canvas.height = imgHeight;
-
-            var ctx = canvas.getContext('2d');
-            // left image
-            ctx.drawImage(img, 0, 0, imgWidth, imgHeight);
-            // flipped right image
-            ctx.translate(2 * imgWidth, 0);
-            ctx.scale(-1, 1);
-            ctx.drawImage(img, 0, 0, imgWidth, imgHeight);
-
-            return canvas;
-        },
-
-        flipY: function(img) {
-            // d d
-            // q q
-
-            var canvas = document.createElement('canvas');
-            var imgWidth = img.width;
-            var imgHeight = img.height;
-
-            canvas.width = imgWidth;
-            canvas.height = imgHeight * 2;
-
-            var ctx = canvas.getContext('2d');
-            // top image
-            ctx.drawImage(img, 0, 0, imgWidth, imgHeight);
-            // flipped bottom image
-            ctx.translate(0, 2 * imgHeight);
-            ctx.scale(1, -1);
-            ctx.drawImage(img, 0, 0, imgWidth, imgHeight);
-
-            return canvas;
-        },
-
-        watermark: function(img, opt) {
-            //   d
-            // d
-
-            opt = opt || {};
-
-            var imgWidth = img.width;
-            var imgHeight = img.height;
-
-            var canvas = document.createElement('canvas');
-            canvas.width = imgWidth * 3;
-            canvas.height = imgHeight * 3;
-
-            var ctx = canvas.getContext('2d');
-            var angle = isNumber(opt.watermarkAngle) ? -opt.watermarkAngle : -20;
-            var radians = toRad(angle);
-            var stepX = canvas.width / 4;
-            var stepY = canvas.height / 4;
-
-            for (var i = 0; i < 4; i++) {
-                for (var j = 0; j < 4; j++) {
-                    if ((i + j) % 2 > 0) {
-                        // reset the current transformations
-                        ctx.setTransform(1, 0, 0, 1, (2 * i - 1) * stepX, (2 * j - 1) * stepY);
-                        ctx.rotate(radians);
-                        ctx.drawImage(img, -imgWidth / 2, -imgHeight / 2, imgWidth, imgHeight);
-                    }
-                }
-            }
-
-            return canvas;
-        }
-    },
-
-    gridPatterns: {
-        dot: [{
-            color: '#AAAAAA',
-            thickness: 1,
-            markup: 'rect',
-            render: function(el, opt) {
-                V(el).attr({
-                    width: opt.thickness,
-                    height: opt.thickness,
-                    fill: opt.color
-                });
-            }
-        }],
-        fixedDot: [{
-            color: '#AAAAAA',
-            thickness: 1,
-            markup: 'rect',
-            render: function(el, opt) {
-                V(el).attr({ fill: opt.color });
-            },
-            update: function(el, opt, paper) {
-                const { sx, sy } = paper.scale();
-                const width = sx <= 1 ? opt.thickness : opt.thickness / sx;
-                const height = sy <= 1 ? opt.thickness : opt.thickness / sy;
-                V(el).attr({ width, height });
-            }
-        }],
-        mesh: [{
-            color: '#AAAAAA',
-            thickness: 1,
-            markup: 'path',
-            render: function(el, opt) {
-
-                var d;
-                var width = opt.width;
-                var height = opt.height;
-                var thickness = opt.thickness;
-
-                if (width - thickness >= 0 && height - thickness >= 0) {
-                    d = ['M', width, 0, 'H0 M0 0 V0', height].join(' ');
-                } else {
-                    d = 'M 0 0 0 0';
-                }
-
-                V(el).attr({ 'd': d, stroke: opt.color, 'stroke-width': opt.thickness });
-            }
-        }],
-        doubleMesh: [{
-            color: '#AAAAAA',
-            thickness: 1,
-            markup: 'path',
-            render: function(el, opt) {
-
-                var d;
-                var width = opt.width;
-                var height = opt.height;
-                var thickness = opt.thickness;
-
-                if (width - thickness >= 0 && height - thickness >= 0) {
-                    d = ['M', width, 0, 'H0 M0 0 V0', height].join(' ');
-                } else {
-                    d = 'M 0 0 0 0';
-                }
-
-                V(el).attr({ 'd': d, stroke: opt.color, 'stroke-width': opt.thickness });
-            }
-        }, {
-            color: '#000000',
-            thickness: 3,
-            scaleFactor: 4,
-            markup: 'path',
-            render: function(el, opt) {
-
-                var d;
-                var width = opt.width;
-                var height = opt.height;
-                var thickness = opt.thickness;
-
-                if (width - thickness >= 0 && height - thickness >= 0) {
-                    d = ['M', width, 0, 'H0 M0 0 V0', height].join(' ');
-                } else {
-                    d = 'M 0 0 0 0';
-                }
-
-                V(el).attr({ 'd': d, stroke: opt.color, 'stroke-width': opt.thickness });
-            }
-        }]
-    }
+    backgroundPatterns,
+    gridPatterns,
 });
-