@joint/core 4.1.3 → 4.2.0-alpha.1

package/src/dia/Paper.mjs

@@ -28,17 +28,20 @@ import {
     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 { CellView } from './CellView.mjs';
+import { View, views as viewsRegistry } from '../mvc/index.mjs';
+import { CellView, CELL_VIEW_MARKER } 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 { HighlighterView } from './HighlighterView.mjs';
+import { Deque } from '../alg/Deque.mjs';
 import * as highlighters from '../highlighters/index.mjs';
 import * as linkAnchors from '../linkAnchors/index.mjs';
 import * as connectionPoints from '../connectionPoints/index.mjs';
@@ -96,6 +99,8 @@ const defaultLayers = [{
     name: LayersNames.TOOLS
 }];
 
+const CELL_VIEW_PLACEHOLDER_MARKER = Symbol('joint.cellViewPlaceholderMarker');
+
 export const Paper = View.extend({
 
     className: 'paper',
@@ -267,6 +272,8 @@ 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:
@@ -274,7 +281,7 @@ export const Paper = View.extend({
             // 2. the view was just mounted (added back to the paper by viewport function)
             // 3. the change was marked as `isolate`.
             // 4. the view model was just removed from the graph
-            if ((flag & (view.FLAG_INSERT | view.FLAG_REMOVE)) || opt.mounting || opt.isolate) return;
+            if ((flag & (paper.FLAG_INSERT | paper.FLAG_REMOVE)) || opt.mounting || opt.isolate) return;
             paper.requestConnectedLinksUpdate(view, priority, opt);
         },
 
@@ -387,6 +394,14 @@ 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,
+
+    // Update flags
+    FLAG_INSERT: 1<<30,
+    FLAG_REMOVE: 1<<29,
+    FLAG_INIT: 1<<28,
+
     init: function() {
 
         const { options } = this;
@@ -398,8 +413,16 @@ export const Paper = View.extend({
 
         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 = {};
+        this._layers = {
+            viewsMap: {},
+            namesMap: {},
+            order: [],
+        };
 
         this.cloneOptions();
         this.render();
@@ -408,6 +431,8 @@ export const Paper = View.extend({
 
         // Hash of all cell views.
         this._views = {};
+        this._viewPlaceholders = {};
+        this._idToCid = {};
 
         // Mouse wheel events buffer
         this._mw_evt_buffer = {
@@ -417,8 +442,6 @@ 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();
     },
 
     _resetUpdates: function() {
@@ -427,16 +450,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,
         };
     },
 
@@ -465,15 +487,25 @@ 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);
+        const viewLike = this._getCellViewLike(cell);
+        if (!viewLike) return;
+        if (viewLike[CELL_VIEW_PLACEHOLDER_MARKER]) {
+            this._unregisterCellViewPlaceholder(viewLike);
+        } else {
+            this.requestViewUpdate(viewLike, this.FLAG_REMOVE, viewLike.UPDATE_PRIORITY, opt);
+        }
     },
 
     onCellChange: function(cell, opt) {
         if (cell === this.model.attributes.cells) return;
-        if (cell.hasChanged('z') && this.options.sorting === sortingTypes.APPROX) {
-            const view = this.findViewByModel(cell);
-            if (view) this.requestViewUpdate(view, view.FLAG_INSERT, view.UPDATE_PRIORITY, opt);
+        if (
+            cell.hasChanged('layer') ||
+            (cell.hasChanged('z') && this.options.sorting === sortingTypes.APPROX)
+        ) {
+            const viewLike = this._getCellViewLike(cell);
+            if (viewLike) {
+                this.requestViewUpdate(viewLike, this.FLAG_INSERT, viewLike.UPDATE_PRIORITY, opt);
+            }
         }
     },
 
@@ -488,7 +520,7 @@ export const Paper = View.extend({
     },
 
     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()) {
@@ -548,6 +580,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() {
@@ -588,19 +629,122 @@ export const Paper = View.extend({
     },
 
     hasLayerView(layerName) {
-        return  (layerName in this._layers);
+        return  (layerName in this._layers.viewsMap);
     },
 
     getLayerView(layerName) {
-        const { _layers } = this;
-        if (layerName in _layers) return _layers[layerName];
-        throw new Error(`dia.Paper: Unknown layer "${layerName}"`);
+        const { _layers: { viewsMap }} = this;
+        if (layerName in viewsMap) return viewsMap[layerName];
+        throw new Error(`dia.Paper: Unknown layer "${layerName}".`);
     },
 
     getLayerNode(layerName) {
         return this.getLayerView(layerName).el;
     },
 
+    _removeLayer(layerView) {
+        this._unregisterLayer(layerView);
+        layerView.remove();
+    },
+
+    _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];
+    },
+
+    _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;
+    },
+
+    _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;
+    },
+
+    _getLayerName(layerView) {
+        const { _layers: { namesMap }} = this;
+        return namesMap[layerView.cid];
+    },
+
+    _requireLayerView(layer) {
+        const layerView = this._getLayerView(layer);
+        if (!layerView) {
+            if (layer instanceof PaperLayer) {
+                throw new Error('dia.Paper: The layer is not registered.');
+            } else {
+                throw new Error(`dia.Paper: Unknown layer "${layer}".`);
+            }
+        }
+        return layerView;
+    },
+
+    hasLayer(layer) {
+        return this._getLayerView(layer) !== null;
+    },
+
+    removeLayer(layer) {
+        const layerView = this._requireLayerView(layer);
+        if (!layerView.isEmpty()) {
+            throw new Error('dia.Paper: The layer is not empty.');
+        }
+        this._removeLayer(layerView);
+    },
+
+    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);
+            this.layers.insertBefore(layerView.el, beforeLayerView.el);
+        }
+    },
+
+    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 });
+    },
+
+    getLayerNames() {
+        // Returns a sorted array of layer names.
+        return this._layers.order.slice();
+    },
+
+    getLayers() {
+        // Returns a sorted array of layer views.
+        return this.getLayerNames().map(name => this.getLayerView(name));
+    },
+
     render: function() {
 
         this.renderChildren();
@@ -645,14 +789,15 @@ export const Paper = View.extend({
         }
     },
 
+    renderLayer: function(name) {
+        const layerView = this.createLayer(name);
+        this.addLayer(name, layerView);
+        return layerView;
+    },
+
     renderLayers: function(layers = defaultLayers) {
         this.removeLayers();
-        // TODO: Layers to be read from the graph `layers` attribute
-        layers.forEach(({ name, sorted }) => {
-            const layerView = this.createLayer(name);
-            this.layers.appendChild(layerView.el);
-            this._layers[name] = layerView;
-        });
+        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);
@@ -670,18 +815,13 @@ export const Paper = View.extend({
     },
 
     removeLayers: function() {
-        const { _layers } = this;
-        Object.keys(_layers).forEach(name => {
-            _layers[name].remove();
-            delete _layers[name];
-        });
+        const { _layers: { viewsMap }} = this;
+        Object.values(viewsMap).forEach(layerView => this._removeLayer(layerView));
     },
 
     resetLayers: function() {
-        const { _layers } = this;
-        Object.keys(_layers).forEach(name => {
-            _layers[name].removePivots();
-        });
+        const { _layers: { viewsMap }} = this;
+        Object.values(viewsMap).forEach(layerView => layerView.removePivots());
     },
 
     update: function() {
@@ -816,47 +956,46 @@ export const Paper = View.extend({
             var links = this.model.getConnectedLinks(model);
             for (var j = 0, n = links.length; j < n; j++) {
                 var link = links[j];
-                var linkView = this.findViewByModel(link);
+                var linkView = this._getCellViewLike(link);
                 if (!linkView) continue;
-                var flagLabels = ['UPDATE'];
-                if (link.getTargetCell() === model) flagLabels.push('TARGET');
-                if (link.getSourceCell() === model) flagLabels.push('SOURCE');
+                // We do not have to update placeholder views.
+                // They will be updated on initial render.
+                if (linkView[CELL_VIEW_PLACEHOLDER_MARKER]) continue;
                 var nextPriority = Math.max(priority + 1, linkView.UPDATE_PRIORITY);
-                this.scheduleViewUpdate(linkView, linkView.getFlag(flagLabels), nextPriority, opt);
+                this.scheduleViewUpdate(linkView, linkView.getFlag(LinkView.Flags.UPDATE), nextPriority, opt);
             }
         }
     },
 
     forcePostponedViewUpdate: function(view, flag) {
         if (!view || !(view instanceof CellView)) return false;
-        var model = view.model;
+        const model = view.model;
         if (model.isElement()) return false;
-        if ((flag & view.getFlag(['SOURCE', 'TARGET'])) === 0) {
-            var dumpOptions = { silent: true };
-            // LinkView is waiting for the target or the source cellView to be rendered
-            // This can happen when the cells are not in the viewport.
-            var sourceFlag = 0;
-            var sourceView = this.findViewByModel(model.getSourceCell());
-            if (sourceView && !this.isViewMounted(sourceView)) {
-                sourceFlag = this.dumpView(sourceView, dumpOptions);
-                view.updateEndMagnet('source');
-            }
-            var targetFlag = 0;
-            var targetView = this.findViewByModel(model.getTargetCell());
-            if (targetView && !this.isViewMounted(targetView)) {
-                targetFlag = this.dumpView(targetView, dumpOptions);
-                view.updateEndMagnet('target');
-            }
-            if (sourceFlag === 0 && targetFlag === 0) {
-                // If leftover flag is 0, all view updates were done.
-                return !this.dumpView(view, dumpOptions);
-            }
+        const dumpOptions = { silent: true };
+        // LinkView is waiting for the target or the source cellView to be rendered
+        // This can happen when the cells are not in the viewport.
+        let sourceFlag = 0;
+        const sourceCell = model.getSourceCell();
+        if (sourceCell && !this.isCellVisible(sourceCell)) {
+            const sourceView = this.findViewByModel(sourceCell);
+            sourceFlag = this.dumpView(sourceView, dumpOptions);
+        }
+        let targetFlag = 0;
+        const targetCell = model.getTargetCell();
+        if (targetCell && !this.isCellVisible(targetCell)) {
+            const targetView = this.findViewByModel(targetCell);
+            targetFlag = this.dumpView(targetView, dumpOptions);
+        }
+        if (sourceFlag === 0 && targetFlag === 0) {
+            // If leftover flag is 0, all view updates were done.
+            return !this.dumpView(view, dumpOptions);
         }
         return false;
     },
 
     requestViewUpdate: function(view, flag, priority, opt) {
         opt || (opt = {});
+        // Note: `scheduleViewUpdate` wakes up the paper if it is idle.
         this.scheduleViewUpdate(view, flag, priority, opt);
         var isAsync = this.isAsync();
         if (this.isFrozen() || (isAsync && opt.async !== false)) return;
@@ -867,13 +1006,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
@@ -919,20 +1059,18 @@ 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[CELL_VIEW_MARKER]) {
             if (flag & FLAG_REMOVE) {
                 this.removeView(model);
                 return 0;
@@ -960,57 +1098,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--) {
@@ -1022,11 +1173,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);
             }
@@ -1035,7 +1213,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;
@@ -1056,11 +1234,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);
                     }
                 }
@@ -1080,6 +1269,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;
@@ -1089,6 +1279,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;
@@ -1099,6 +1290,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;
@@ -1111,8 +1352,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
@@ -1124,33 +1364,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) {
@@ -1177,104 +1440,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;
         }
@@ -1285,25 +1569,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;
@@ -1319,6 +1643,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);
     },
 
@@ -1332,6 +1660,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);
@@ -1345,12 +1674,25 @@ export const Paper = View.extend({
         }
     },
 
+    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() {
@@ -1650,21 +1992,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 ? LayersNames.LABELS : labelsLayer
+        });
+    },
+
+    _resolveCellViewClass: function(cell) {
+        const { options } = this;
+        const { cellViewNamespace } = options;
+        const type = cell.get('type') + 'View';
+        const namespaceViewClass = getByPath(cellViewNamespace, type, '.');
+        // A class taken from the paper options.
+        let optionalViewClass;
+        let defaultViewClass;
         if (cell.isLink()) {
             optionalViewClass = options.linkView;
             defaultViewClass = LinkView;
@@ -1672,7 +2050,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
@@ -1680,29 +2057,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;
     },
@@ -1716,7 +2118,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.
@@ -1726,14 +2128,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.
@@ -1744,11 +2174,11 @@ 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);
@@ -1758,10 +2188,16 @@ export const Paper = View.extend({
     },
 
     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() {
@@ -1770,7 +2206,7 @@ export const Paper = View.extend({
             // noop
             return;
         }
-        if (this.isFrozen()) {
+        if (this.isFrozen() || this.isIdle()) {
             // sort views once unfrozen
             this._updates.sort = true;
             return;
@@ -1796,8 +2232,11 @@ export const Paper = View.extend({
     },
 
     insertView: function(view, isInitialInsert) {
-        const layerView = this.getLayerView(LayersNames.CELLS);
         const { el, model } = view;
+
+        const layerName = model.get('layer') || this.DEFAULT_CELL_LAYER;
+        const layerView = this.getLayerView(layerName);
+
         switch (this.options.sorting) {
             case sortingTypes.APPROX:
                 layerView.insertSortedNode(el, model.get('z'));
@@ -1810,9 +2249,58 @@ export const Paper = View.extend({
         view.onMount(isInitialInsert);
     },
 
-    detachView(view) {
-        view.unmount();
-        view.onDetach();
+    _hideView: function(viewLike) {
+        if (!viewLike || viewLike[CELL_VIEW_PLACEHOLDER_MARKER]) {
+            // A placeholder view was never mounted
+            return;
+        }
+        if (viewLike[CELL_VIEW_MARKER]) {
+            this._hideCellView(viewLike);
+        } else {
+            // A generic view that is not a cell view.
+            viewLike.unmount();
+        }
+    },
+
+    // If `cellVisibility` returns `false`, the view will be hidden using this method.
+    _hideCellView: function(cellView) {
+        if (this.options.viewManagement.disposeHidden) {
+            if (this._disposeCellView(cellView)) return;
+        }
+        // Detach the view from the paper, but keep it in memory
+        this._detachCellView(cellView);
+    },
+
+    _disposeCellView: function(cellView) {
+        if (HighlighterView.has(cellView) || cellView.hasTools()) {
+            // We currently do not dispose views which has a highlighter or tools attached
+            // Note: Possible improvement would be to serialize highlighters/tools and
+            // restore them on view re-mount.
+            return false;
+        }
+        const cell = cellView.model;
+        // Remove the view from the paper and dispose it
+        cellView.remove();
+        delete this._views[cell.id];
+        this._registerCellViewPlaceholder(cell, cellView.cid);
+        return true;
+    },
+
+    // Dispose (release resources) all hidden views.
+    disposeHiddenCellViews: function() {
+        // Only cell views can be in the unmounted list (not in the legacy mode).
+        if (this.legacyMode) return;
+        const unmountedCids = this._updates.unmountedList.keys();
+        for (const cid of unmountedCids) {
+            const cellView = 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
@@ -1830,11 +2318,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
@@ -1913,6 +2422,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,
@@ -2365,8 +2960,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);
@@ -2383,8 +2981,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);
@@ -3254,4 +3855,3 @@ export const Paper = View.extend({
         }]
     }
 });
-