@joint/core 4.1.2 → 4.2.0-alpha.0

package/src/dia/Element.mjs

@@ -1,6 +1,6 @@
 import { Cell } from './Cell.mjs';
 import { Point, toRad, normalizeAngle, Rect } from '../g/index.mjs';
-import { isNumber, isObject, interpolate, assign, invoke, normalizeSides } from '../util/index.mjs';
+import { isNumber, isObject, interpolate, assign, invoke, normalizeSides, omit } from '../util/index.mjs';
 import { elementPortPrototype } from './ports.mjs';
 
 // Element base model.
@@ -344,22 +344,24 @@ export const Element = Cell.extend({
         const { graph } = this;
         if (!graph) throw new Error('Element must be part of a graph.');
 
-        const childElements = this.getEmbeddedCells().filter(cell => cell.isElement());
-        if (childElements.length === 0) return this;
+        // Get element children, optionally filtered according to `opt.filter`.
+        const filteredChildElements = this._getFilteredChildElements(opt.filter);
 
         this.startBatch('fit-embeds', opt);
 
         if (opt.deep) {
             // `opt.deep = true` means "fit to all descendants".
             // As the first action of the fitting algorithm, recursively apply `fitToChildren()` on all descendants.
-            // - i.e. the algorithm is applied in reverse-depth order - start from deepest descendant, then go up (= this element).
-            invoke(childElements, 'fitToChildren', opt);
+            // - i.e. the algorithm is applied in reverse-depth order - start from deepest descendant, then go up (= this element)
+            // - omit `opt.minRect` - it only makes sense for the first level of recursion if there are no filtered children, but in this case we do have filtered children
+            invoke(filteredChildElements, 'fitToChildren', omit(opt, 'minRect'));
         }
 
         // Set new size and position of this element, based on:
-        // - union of bboxes of all children
+        // - union of bboxes of filtered element children
         // - inflated by given `opt.padding`
-        this._fitToElements(Object.assign({ elements: childElements }, opt));
+        // - containing at least `opt.minRect` (if this is the first level of recursion and there are no filtered children)
+        this._fitToElements(Object.assign({ elements: filteredChildElements }, opt));
 
         this.stopBatch('fit-embeds');
 
@@ -375,25 +377,27 @@ export const Element = Cell.extend({
         // If the current element is `opt.terminator`, it means that this element has already been processed as parent so we can exit now.
         if (opt.deep && opt.terminator && ((opt.terminator === this) || (opt.terminator === this.id))) return this;
 
+        // If this element has no parent, there is nothing for us to do.
         const parentElement = this.getParentCell();
         if (!parentElement || !parentElement.isElement()) return this;
 
-        // Get all children of parent element (i.e. this element + any sibling elements).
-        const siblingElements = parentElement.getEmbeddedCells().filter(cell => cell.isElement());
-        if (siblingElements.length === 0) return this;
+        // Get element children of parent element (i.e. this element + any sibling elements), optionally filtered according to `opt.filter`.
+        const filteredSiblingElements = parentElement._getFilteredChildElements(opt.filter);
 
         this.startBatch('fit-parent', opt);
 
         // Set new size and position of parent element, based on:
-        // - union of bboxes of all children of parent element (i.e. this element + any sibling elements)
+        // - union of bboxes of filtered element children of parent element (i.e. this element + any sibling elements)
         // - inflated by given `opt.padding`
-        parentElement._fitToElements(Object.assign({ elements: siblingElements }, opt));
+        // - containing at least `opt.minRect` (if this is the first level of recursion and there are no filtered siblings)
+        parentElement._fitToElements(Object.assign({ elements: filteredSiblingElements }, opt));
 
         if (opt.deep) {
             // `opt.deep = true` means "fit all ancestors to their respective children".
             // As the last action of the fitting algorithm, recursively apply `fitParent()` on all ancestors.
-            // - i.e. the algorithm is applied in reverse-depth order - start from deepest descendant (= this element), then go up.
-            parentElement.fitParent(opt);
+            // - i.e. the algorithm is applied in reverse-depth order - start from deepest descendant (= this element), then go up
+            // - omit `opt.minRect` - `minRect` is not relevant for the parent of parent element (and upwards)
+            parentElement.fitParent(omit(opt, 'minRect'));
         }
 
         this.stopBatch('fit-parent');
@@ -401,45 +405,85 @@ export const Element = Cell.extend({
         return this;
     },
 
+    _getFilteredChildElements: function(filter) {
+
+        let filterFn;
+        if (typeof filter === 'function') {
+            filterFn = (cell) => (cell.isElement() && filter(cell));
+        } else {
+            filterFn = (cell) => (cell.isElement());
+        }
+        return this.getEmbeddedCells().filter(filterFn);
+    },
+
     // Assumption: This element is part of a graph.
     _fitToElements: function(opt = {}) {
 
+        let minBBox = null;
+        if (opt.minRect) {
+            // Coerce `opt.minRect` to g.Rect (missing properties = 0).
+            minBBox = new Rect(opt.minRect);
+        }
+
         const elementsBBox = this.graph.getCellsBBox(opt.elements);
-        // If no `opt.elements` were provided, do nothing.
-        if (!elementsBBox) return;
+        // If no `opt.elements` were provided, do nothing (but if `opt.minRect` was provided, set that as this element's bbox instead).
+        if (!elementsBBox) {
+            this._setBBox(minBBox, opt);
+            return;
+        }
 
         const { expandOnly, shrinkOnly } = opt;
-        // This combination is meaningless, do nothing.
-        if (expandOnly && shrinkOnly) return;
+        // This combination is meaningless, do nothing (but if `opt.minRect` was provided, set that as this element's bbox instead).
+        if (expandOnly && shrinkOnly) {
+            this._setBBox(minBBox, opt);
+            return;
+        }
 
         // Calculate new size and position of this element based on:
         // - union of bboxes of `opt.elements`
-        // - inflated by `opt.padding` (if not provided, all four properties = 0)
+        // - inflated by normalized `opt.padding` (missing sides = 0)
         let { x, y, width, height } = elementsBBox;
         const { left, right, top, bottom } = normalizeSides(opt.padding);
         x -= left;
         y -= top;
         width += left + right;
         height += bottom + top;
-        let resultBBox = new Rect(x, y, width, height);
+        let contentBBox = new Rect(x, y, width, height);
 
         if (expandOnly) {
             // Non-shrinking is enforced by taking union of this element's current bbox with bbox calculated from `opt.elements`.
-            resultBBox = this.getBBox().union(resultBBox);
+            contentBBox = this.getBBox().union(contentBBox);
 
         } else if (shrinkOnly) {
             // Non-expansion is enforced by taking intersection of this element's current bbox with bbox calculated from `opt.elements`.
-            const intersectionBBox = this.getBBox().intersect(resultBBox);
-            // If all children are outside this element's current bbox, then `intersectionBBox` is `null` - does not make sense, do nothing.
-            if (!intersectionBBox) return;
+            const intersectionBBox = this.getBBox().intersect(contentBBox);
+            // If all children are outside this element's current bbox, then `intersectionBBox` is `null`.
+            // That does not make sense, do nothing (but if `opt.minRect` was provided, set that as this element's bbox instead).
+            if (!intersectionBBox) {
+                this._setBBox(minBBox, opt);
+                return;
+            }
 
-            resultBBox =  intersectionBBox;
+            contentBBox = intersectionBBox;
         }
 
         // Set the new size and position of this element.
+        // - if `opt.minRect` was provided, add it via union to calculated bbox
+        let resultBBox = contentBBox;
+        if (minBBox) {
+            resultBBox = resultBBox.union(minBBox);
+        }
+        this._setBBox(resultBBox, opt);
+    },
+
+    _setBBox: function(bbox, opt) {
+
+        if (!bbox) return;
+
+        const { x, y, width, height } = bbox;
         this.set({
-            position: { x: resultBBox.x, y: resultBBox.y },
-            size: { width: resultBBox.width, height: resultBBox.height }
+            position: { x, y },
+            size: { width, height }
         }, opt);
     },
 
@@ -451,7 +495,7 @@ export const Element = Cell.extend({
 
         if (origin) {
 
-            var center = this.getBBox().center();
+            var center = this.getCenter();
             var size = this.get('size');
             var position = this.get('position');
             center.rotate(origin, this.get('angle') - angle);
@@ -497,6 +541,11 @@ export const Element = Cell.extend({
         return bbox;
     },
 
+    getCenter: function() {
+        const { position: { x, y }, size: { width, height }} = this.attributes;
+        return new Point(x + width / 2, y + height / 2);
+    },
+
     getPointFromConnectedLink: function(link, endType) {
         // Center of the model
         var bbox = this.getBBox();
@@ -506,14 +555,9 @@ export const Element = Cell.extend({
         if (!endDef) return center;
         var portId = endDef.port;
         if (!portId || !this.hasPort(portId)) return center;
-        var portGroup = this.portProp(portId, ['group']);
-        var portsPositions = this.getPortsPositions(portGroup);
-        var portCenter = new Point(portsPositions[portId]).offset(bbox.origin());
-        var angle = this.angle();
-        if (angle) portCenter.rotate(center, -angle);
-        return portCenter;
+        return this.getPortCenter(portId);
     }
+
 });
 
 assign(Element.prototype, elementPortPrototype);
-

package/src/dia/ElementView.mjs

@@ -804,17 +804,23 @@ export const ElementView = CellView.extend({
 
     // Drag Handlers
 
+    snapToGrid: function(evt, x, y) {
+        const grid = this.paper.options.gridSize;
+        return {
+            x: snapToGrid(x, grid),
+            y: snapToGrid(y, grid)
+        };
+    },
+
     drag: function(evt, x, y) {
 
         var paper = this.paper;
-        var grid = paper.options.gridSize;
         var element = this.model;
         var data = this.eventData(evt);
         var { pointerOffset, restrictedArea, embedding } = data;
 
         // Make sure the new element's position always snaps to the current grid
-        var elX = snapToGrid(x + pointerOffset.x, grid);
-        var elY = snapToGrid(y + pointerOffset.y, grid);
+        const { x: elX, y: elY } = this.snapToGrid(evt, x + pointerOffset.x, y + pointerOffset.y);
 
         element.position(elX, elY, { restrictedArea, deep: true, ui: true });
 

package/src/dia/HighlighterView.mjs

@@ -1,6 +1,6 @@
 import * as mvc from '../mvc/index.mjs';
 import V from '../V/index.mjs';
-import { isPlainObject, result } from '../util/util.mjs';
+import { isNumber, isPlainObject, result } from '../util/util.mjs';
 
 function toArray(obj) {
     if (!obj) return [];
@@ -71,7 +71,7 @@ export const HighlighterView = mvc.View.extend({
             }
         } else if (nodeSelector) {
             el = V.toNode(nodeSelector);
-            if (!(el instanceof SVGElement)) el = null;
+            if (!(el instanceof SVGElement) || !cellView.el.contains(el)) el = null;
         }
         return el ? el : null;
     },
@@ -106,8 +106,8 @@ export const HighlighterView = mvc.View.extend({
             this.transform();
             return;
         }
-        const { vel: cellViewRoot, paper } = cellView;
-        const { layer: layerName } = options;
+        const { paper } = cellView;
+        const { layer: layerName, z } = options;
         if (layerName) {
             let vGroup;
             if (detachedTransformGroup) {
@@ -117,20 +117,41 @@ export const HighlighterView = mvc.View.extend({
                 vGroup = V('g').addClass('highlight-transform').append(el);
             }
             this.transformGroup = vGroup;
-            paper.getLayerView(layerName).insertSortedNode(vGroup.node, options.z);
+            paper.getLayerView(layerName).insertSortedNode(vGroup.node, z);
         } else {
-            // TODO: prepend vs append
-            if (!el.parentNode || el.nextSibling) {
-                // Not appended yet or not the last child
-                cellViewRoot.append(el);
+            const children = cellView.el.children;
+
+            const index = Math.max(z, 0);
+            const beforeChild = children[index];
+
+            // If the provided `z` is a number and there is an element on the index,
+            // we need to insert the highlighter before the element on the index.
+            // Otherwise, the highlighter will be appended as the last child.
+            const toBeInserted = isNumber(z) && beforeChild;
+            const isElementAtTargetPosition = toBeInserted
+                // If the element is being inserted, check if it is not already at the correct position.
+                ? el === beforeChild
+                // If the element is being appended, check if it is not already last child.
+                : !el.nextElementSibling;
+
+            // If the element is already mounted and does not require repositioning, do nothing.
+            if (el.parentNode && isElementAtTargetPosition) return;
+
+            if (toBeInserted) {
+                cellView.el.insertBefore(el, beforeChild);
+            } else {
+                cellView.el.appendChild(el);
             }
         }
     },
 
     unmount() {
-        const { MOUNTABLE, transformGroup, vel } = this;
+        const { MOUNTABLE, transformGroup, vel, options } = this;
         if (!MOUNTABLE) return;
-        if (transformGroup) {
+        if (options.layer) {
+            if (!transformGroup) return;
+            // else: if `transformGroup` is not null, it means the highlighter
+            // has not been mounted yet
             this.transformGroup = null;
             this.detachedTransformGroup = transformGroup;
             transformGroup.remove();

package/src/dia/Paper.mjs

@@ -387,6 +387,9 @@ 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,
+
     init: function() {
 
         const { options } = this;
@@ -399,7 +402,11 @@ export const Paper = View.extend({
         const model = this.model = options.model || new Graph;
 
         // Layers (SVGGroups)
-        this._layers = {};
+        this._layers = {
+            viewsMap: {},
+            namesMap: {},
+            order: [],
+        };
 
         this.cloneOptions();
         this.render();
@@ -471,7 +478,10 @@ export const Paper = View.extend({
 
     onCellChange: function(cell, opt) {
         if (cell === this.model.attributes.cells) return;
-        if (cell.hasChanged('z') && this.options.sorting === sortingTypes.APPROX) {
+        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);
         }
@@ -588,19 +598,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 +758,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 +784,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() {
@@ -1796,8 +1905,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'));

package/src/dia/PaperLayer.mjs

@@ -22,7 +22,9 @@ export const PaperLayer = View.extend({
     },
 
     className: function() {
-        return addClassNamePrefix(`${this.options.name}-layer`);
+        const { name } = this.options;
+        if (!name) return null;
+        return addClassNamePrefix(`${name}-layer`);
     },
 
     init: function() {
@@ -70,6 +72,11 @@ export const PaperLayer = View.extend({
         const { el, pivotNodes } = this;
         for (let z in pivotNodes) el.removeChild(pivotNodes[z]);
         this.pivotNodes = {};
-    }
+    },
+
+    isEmpty: function() {
+        // Check if the layer has any child elements (pivot comments are not counted).
+        return this.el.children.length === 0;
+    },
 
 });

package/src/dia/attributes/text.mjs

@@ -148,10 +148,19 @@ const textAttributesNS = {
                 // TODO: change the `lineHeight` to breakText option.
                 wrapFontAttributes.lineHeight = attrs['line-height'];
 
+                let svgDocument = this.paper.svg;
+                if (!svgDocument.checkVisibility()) {
+                    // If the paper is visible, we can utilize
+                    // its SVG element to measure the text size
+                    // when breaking the text.
+                    // Otherwise, we need to create a temporary
+                    // SVG document and append it to the DOM,
+                    // (the default behavior of `breakText`).
+                    svgDocument = null;
+                }
+
                 wrappedText = breakTextFn('' + text, size, wrapFontAttributes, {
-                    // Provide an existing SVG Document here
-                    // instead of creating a temporary one over again.
-                    svgDocument: this.paper.svg,
+                    svgDocument,
                     ellipsis: value.ellipsis,
                     hyphen: value.hyphen,
                     separator: value.separator,

package/src/dia/layers/GridLayer.mjs

@@ -177,4 +177,9 @@ export const GridLayer = PaperLayer.extend({
         return isArray ? options : [options];
     },
 
+    isEmpty() {
+        const { _gridCache: grid } = this;
+        return this.el.children.length === (grid ? 1 : 0);
+    }
+
 });