@joint/core 4.0.0

package/src/dia/attributes/legacy.mjs

@@ -0,0 +1,148 @@
+import { Point } from '../../g/index.mjs';
+import { isPercentage } from '../../util/util.mjs';
+
+function positionWrapper(axis, dimension, origin) {
+    return function(value, refBBox) {
+        var valuePercentage = isPercentage(value);
+        value = parseFloat(value);
+        if (valuePercentage) {
+            value /= 100;
+        }
+
+        var delta;
+        if (isFinite(value)) {
+            var refOrigin = refBBox[origin]();
+            if (valuePercentage || value > 0 && value < 1) {
+                delta = refOrigin[axis] + refBBox[dimension] * value;
+            } else {
+                delta = refOrigin[axis] + value;
+            }
+        }
+
+        var point = Point();
+        point[axis] = delta || 0;
+        return point;
+    };
+}
+
+function setWrapper(attrName, dimension) {
+    return function(value, refBBox) {
+        var isValuePercentage = isPercentage(value);
+        value = parseFloat(value);
+        if (isValuePercentage) {
+            value /= 100;
+        }
+
+        var attrs = {};
+        if (isFinite(value)) {
+            var attrValue = (isValuePercentage || value >= 0 && value <= 1)
+                ? value * refBBox[dimension]
+                : Math.max(value + refBBox[dimension], 0);
+            attrs[attrName] = attrValue;
+        }
+
+        return attrs;
+    };
+}
+
+const legacyAttributesNS = {
+
+    // if `refX` is in [0, 1] then `refX` is a fraction of bounding box width
+    // if `refX` is < 0 then `refX`'s absolute values is the right coordinate of the bounding box
+    // otherwise, `refX` is the left coordinate of the bounding box
+    'ref-x': {
+        position: positionWrapper('x', 'width', 'origin')
+    },
+
+    'ref-y': {
+        position: positionWrapper('y', 'height', 'origin')
+    },
+
+    // `ref-dx` and `ref-dy` define the offset of the sub-element relative to the right and/or bottom
+    // coordinate of the reference element.
+
+    'ref-dx': {
+        position: positionWrapper('x', 'width', 'corner')
+    },
+
+    'ref-dy': {
+        position: positionWrapper('y', 'height', 'corner')
+    },
+
+    // 'ref-width'/'ref-height' defines the width/height of the sub-element relatively to
+    // the reference element size
+    // val in 0..1         ref-width = 0.75 sets the width to 75% of the ref. el. width
+    // val < 0 || val > 1  ref-height = -20 sets the height to the ref. el. height shorter by 20
+
+    'ref-width': {
+        set: setWrapper('width', 'width')
+    },
+
+    'ref-height': {
+        set: setWrapper('height', 'height')
+    },
+
+    'ref-rx': {
+        set: setWrapper('rx', 'width')
+    },
+
+    'ref-ry': {
+        set: setWrapper('ry', 'height')
+    },
+
+    'ref-cx': {
+        set: setWrapper('cx', 'width')
+    },
+
+    'ref-cy': {
+        set: setWrapper('cy', 'height')
+    },
+
+    'ref-r-inscribed': {
+        set: (function(attrName) {
+            var widthFn = setWrapper(attrName, 'width');
+            var heightFn = setWrapper(attrName, 'height');
+            return function(value, refBBox) {
+                var fn = (refBBox.height > refBBox.width) ? widthFn : heightFn;
+                return fn(value, refBBox);
+            };
+        })('r')
+    },
+
+    'ref-r-circumscribed': {
+        set: function(value, refBBox) {
+            var isValuePercentage = isPercentage(value);
+            value = parseFloat(value);
+            if (isValuePercentage) {
+                value /= 100;
+            }
+
+            var diagonalLength = Math.sqrt((refBBox.height * refBBox.height) + (refBBox.width * refBBox.width));
+
+            var rValue;
+            if (isFinite(value)) {
+                if (isValuePercentage || value >= 0 && value <= 1) rValue = value * diagonalLength;
+                else rValue = Math.max(value + diagonalLength, 0);
+            }
+
+            return { r: rValue };
+        }
+    },
+};
+
+// NOTE: refX & refY are SVG attributes that define the reference point of the marker.
+// That's why we need to define both variants: `refX` and `ref-x` (and `refY` and `ref-y`).
+legacyAttributesNS['refX'] = legacyAttributesNS['ref-x'];
+legacyAttributesNS['refY'] = legacyAttributesNS['ref-y'];
+
+// This allows to combine both absolute and relative positioning
+// refX: 50%, refX2: 20
+legacyAttributesNS['ref-x2'] = legacyAttributesNS['ref-x'];
+legacyAttributesNS['ref-y2'] = legacyAttributesNS['ref-y'];
+legacyAttributesNS['ref-width2'] = legacyAttributesNS['ref-width'];
+legacyAttributesNS['ref-height2'] = legacyAttributesNS['ref-height'];
+
+// Aliases
+legacyAttributesNS['ref-r'] = legacyAttributesNS['ref-r-inscribed'];
+
+export default legacyAttributesNS;

package/src/dia/attributes/offset.mjs

@@ -0,0 +1,53 @@
+
+// Offset attributes require the cell view to be rendered before they can be applied
+// (they must be appended to the DOM).
+
+import { Point } from '../../g/index.mjs';
+import { isPercentage } from '../../util/util.mjs';
+
+function offsetWrapper(axis, dimension, corner) {
+    return function(value, nodeBBox) {
+        var delta;
+        if (value === 'middle') {
+            delta = nodeBBox[dimension] / 2;
+        } else if (value === corner) {
+            delta = nodeBBox[dimension];
+        } else if (isFinite(value)) {
+            // TODO: or not to do a breaking change?
+            delta = (value > -1 && value < 1) ? (-nodeBBox[dimension] * value) : -value;
+        } else if (isPercentage(value)) {
+            delta = nodeBBox[dimension] * parseFloat(value) / 100;
+        } else {
+            delta = 0;
+        }
+
+        var point = new Point();
+        point[axis] = -(nodeBBox[axis] + delta);
+        return point;
+    };
+}
+
+const offsetAttributesNS = {
+
+    // `x-alignment` when set to `middle` causes centering of the sub-element around its new x coordinate.
+    // `x-alignment` when set to `right` uses the x coordinate as referenced to the right of the bbox.
+    'x-alignment': {
+        offset: offsetWrapper('x', 'width', 'right')
+    },
+
+    // `y-alignment` when set to `middle` causes centering of the sub-element around its new y coordinate.
+    // `y-alignment` when set to `bottom` uses the y coordinate as referenced to the bottom of the bbox.
+    'y-alignment': {
+        offset: offsetWrapper('y', 'height', 'bottom')
+    },
+
+    'reset-offset': {
+        offset: function(val, nodeBBox) {
+            return (val)
+                ? { x: -nodeBBox.x, y: -nodeBBox.y }
+                : { x: 0, y: 0 };
+        }
+    },
+};
+
+export default offsetAttributesNS;

package/src/dia/attributes/props.mjs

@@ -0,0 +1,30 @@
+import { isPlainObject } from '../../util/util.mjs';
+
+const validPropertiesList = ['checked', 'selected', 'disabled', 'readOnly', 'contentEditable', 'value', 'indeterminate'];
+
+const validProperties = validPropertiesList.reduce((acc, key) => {
+    acc[key] = true;
+    return acc;
+}, {});
+
+const props = {
+    qualify: function(properties) {
+        return isPlainObject(properties);
+    },
+    set: function(properties, _, node) {
+        Object.keys(properties).forEach(function(key) {
+            if (validProperties[key] && key in node) {
+                const value = properties[key];
+                if (node.tagName === 'SELECT' && Array.isArray(value)) {
+                    Array.from(node.options).forEach(function(option, index) {
+                        option.selected = value.includes(option.value);
+                    });
+                } else {
+                    node[key] = value;
+                }
+            }
+        });
+    }
+};
+
+export default props;

package/src/dia/attributes/shape.mjs

@@ -0,0 +1,92 @@
+import { Path, Polyline } from '../../g/index.mjs';
+import $ from '../../mvc/Dom/index.mjs';
+import V from '../../V/index.mjs';
+
+function shapeWrapper(shapeConstructor, opt) {
+    var cacheName = 'joint-shape';
+    var resetOffset = opt && opt.resetOffset;
+    return function(value, refBBox, node) {
+        var cache = $.data.get(node, cacheName);
+        if (!cache || cache.value !== value) {
+            // only recalculate if value has changed
+            var cachedShape = shapeConstructor(value);
+            cache = {
+                value: value,
+                shape: cachedShape,
+                shapeBBox: cachedShape.bbox()
+            };
+            $.data.set(node, cacheName, cache);
+        }
+
+        var shape = cache.shape.clone();
+        var shapeBBox = cache.shapeBBox.clone();
+        var shapeOrigin = shapeBBox.origin();
+        var refOrigin = refBBox.origin();
+
+        shapeBBox.x = refOrigin.x;
+        shapeBBox.y = refOrigin.y;
+
+        var fitScale = refBBox.maxRectScaleToFit(shapeBBox, refOrigin);
+        // `maxRectScaleToFit` can give Infinity if width or height is 0
+        var sx = (shapeBBox.width === 0 || refBBox.width === 0) ? 1 : fitScale.sx;
+        var sy = (shapeBBox.height === 0 || refBBox.height === 0) ? 1 : fitScale.sy;
+
+        shape.scale(sx, sy, shapeOrigin);
+        if (resetOffset) {
+            shape.translate(-shapeOrigin.x, -shapeOrigin.y);
+        }
+
+        return shape;
+    };
+}
+
+// `d` attribute for SVGPaths
+function dWrapper(opt) {
+    function pathConstructor(value) {
+        return new Path(V.normalizePathData(value));
+    }
+
+    var shape = shapeWrapper(pathConstructor, opt);
+    return function(value, refBBox, node) {
+        var path = shape(value, refBBox, node);
+        return {
+            d: path.serialize()
+        };
+    };
+}
+
+// `points` attribute for SVGPolylines and SVGPolygons
+function pointsWrapper(opt) {
+    var shape = shapeWrapper(Polyline, opt);
+    return function(value, refBBox, node) {
+        var polyline = shape(value, refBBox, node);
+        return {
+            points: polyline.serialize()
+        };
+    };
+}
+
+const shapeAttributesNS = {
+
+    'ref-d-reset-offset': {
+        set: dWrapper({ resetOffset: true })
+    },
+
+    'ref-d-keep-offset': {
+        set: dWrapper({ resetOffset: false })
+    },
+
+    'ref-points-reset-offset': {
+        set: pointsWrapper({ resetOffset: true })
+    },
+
+    'ref-points-keep-offset': {
+        set: pointsWrapper({ resetOffset: false })
+    },
+};
+
+// Aliases
+shapeAttributesNS['ref-d'] = shapeAttributesNS['ref-d-reset-offset'];
+shapeAttributesNS['ref-points'] = shapeAttributesNS['ref-points-reset-offset'];
+
+export default shapeAttributesNS;

package/src/dia/attributes/text.mjs

@@ -0,0 +1,180 @@
+import { assign, isPlainObject, isObject, isPercentage, breakText } from '../../util/util.mjs';
+import { isCalcAttribute, evalCalcAttribute } from './calc.mjs';
+import $ from '../../mvc/Dom/index.mjs';
+import V from '../../V/index.mjs';
+
+function isTextInUse(_value, _node, attrs) {
+    return (attrs.text !== undefined);
+}
+
+const textAttributesNS = {
+
+    'line-height': {
+        qualify: isTextInUse
+    },
+
+    'text-vertical-anchor': {
+        qualify: isTextInUse
+    },
+
+    'text-path': {
+        qualify: isTextInUse
+    },
+
+    'annotations': {
+        qualify: isTextInUse
+    },
+
+    'eol': {
+        qualify: isTextInUse
+    },
+
+    'display-empty': {
+        qualify: isTextInUse
+    },
+
+    'text': {
+        qualify: function(_text, _node, attrs) {
+            const textWrap = attrs['text-wrap'];
+            return !textWrap || !isPlainObject(textWrap);
+        },
+        set: function(text, refBBox, node, attrs) {
+            const cacheName = 'joint-text';
+            const cache = $.data.get(node, cacheName);
+            const lineHeight = attrs['line-height'];
+            const textVerticalAnchor = attrs['text-vertical-anchor'];
+            const displayEmpty = attrs['display-empty'];
+            const fontSize = attrs['font-size'];
+            const annotations = attrs.annotations;
+            const eol = attrs.eol;
+            const x = attrs.x;
+            let textPath = attrs['text-path'];
+            // Update the text only if there was a change in the string
+            // or any of its attributes.
+            const textHash = JSON.stringify([text, lineHeight, annotations, textVerticalAnchor, eol, displayEmpty, textPath, x, fontSize]);
+            if (cache === undefined || cache !== textHash) {
+                // Chrome bug:
+                // <tspan> positions defined as `em` are not updated
+                // when container `font-size` change.
+                if (fontSize) node.setAttribute('font-size', fontSize);
+                // Text Along Path Selector
+                if (isObject(textPath)) {
+                    const pathSelector = textPath.selector;
+                    if (typeof pathSelector === 'string') {
+                        const pathNode = this.findNode(pathSelector);
+                        if (pathNode instanceof SVGPathElement) {
+                            textPath = assign({ 'xlink:href': '#' + pathNode.id }, textPath);
+                        }
+                    }
+                }
+                V(node).text('' + text, {
+                    lineHeight,
+                    annotations,
+                    textPath,
+                    x,
+                    textVerticalAnchor,
+                    eol,
+                    displayEmpty
+                });
+                $.data.set(node, cacheName, textHash);
+            }
+        }
+    },
+
+    'text-wrap': {
+        qualify: isPlainObject,
+        set: function(value, refBBox, node, attrs) {
+            var size = {};
+            // option `width`
+            var width = value.width || 0;
+            if (isPercentage(width)) {
+                size.width = refBBox.width * parseFloat(width) / 100;
+            } else if (isCalcAttribute(width)) {
+                size.width = Number(evalCalcAttribute(width, refBBox));
+            } else {
+                if (value.width === null) {
+                    // breakText() requires width to be specified.
+                    size.width = Infinity;
+                } else if (width <= 0) {
+                    size.width = refBBox.width + width;
+                } else {
+                    size.width = width;
+                }
+            }
+            // option `height`
+            var height = value.height || 0;
+            if (isPercentage(height)) {
+                size.height = refBBox.height * parseFloat(height) / 100;
+            } else if (isCalcAttribute(height)) {
+                size.height = Number(evalCalcAttribute(height, refBBox));
+            } else {
+                if (value.height === null) {
+                    // if height is not specified breakText() does not
+                    // restrict the height of the text.
+                } else if (height <= 0) {
+                    size.height = refBBox.height + height;
+                } else {
+                    size.height = height;
+                }
+            }
+            // option `text`
+            var wrappedText;
+            var text = value.text;
+            if (text === undefined) text = attrs.text;
+            if (text !== undefined) {
+                const breakTextFn = value.breakText || breakText;
+                wrappedText = breakTextFn('' + text, size, {
+                    'font-weight': attrs['font-weight'],
+                    'font-size': attrs['font-size'],
+                    'font-family': attrs['font-family'],
+                    'lineHeight': attrs['line-height'],
+                    'letter-spacing': attrs['letter-spacing']
+                }, {
+                    // Provide an existing SVG Document here
+                    // instead of creating a temporary one over again.
+                    svgDocument: this.paper.svg,
+                    ellipsis: value.ellipsis,
+                    hyphen: value.hyphen,
+                    separator: value.separator,
+                    maxLineCount: value.maxLineCount,
+                    preserveSpaces: value.preserveSpaces
+                });
+            } else {
+                wrappedText = '';
+            }
+            textAttributesNS.text.set.call(this, wrappedText, refBBox, node, attrs);
+        }
+    },
+
+    'title': {
+        qualify: function(title, node) {
+            // HTMLElement title is specified via an attribute (i.e. not an element)
+            return node instanceof SVGElement;
+        },
+        set: function(title, refBBox, node) {
+            var cacheName = 'joint-title';
+            var cache = $.data.get(node, cacheName);
+            if (cache === undefined || cache !== title) {
+                $.data.set(node, cacheName, title);
+                if (node.tagName === 'title') {
+                    // The target node is a <title> element.
+                    node.textContent = title;
+                    return;
+                }
+                // Generally <title> element should be the first child element of its parent.
+                var firstChild = node.firstElementChild;
+                if (firstChild && firstChild.tagName === 'title') {
+                    // Update an existing title
+                    firstChild.textContent = title;
+                } else {
+                    // Create a new title
+                    var titleNode = document.createElementNS(node.namespaceURI, 'title');
+                    titleNode.textContent = title;
+                    node.insertBefore(titleNode, firstChild);
+                }
+            }
+        }
+    },
+};
+
+export default textAttributesNS;

package/src/dia/index.mjs

@@ -0,0 +1,13 @@
+export * from './Graph.mjs';
+export * from './attributes/index.mjs';
+export * from './PaperLayer.mjs';
+export * from './Cell.mjs';
+export * from './CellView.mjs';
+export * from './Element.mjs';
+export * from './ElementView.mjs';
+export * from './Link.mjs';
+export * from './LinkView.mjs';
+export * from './Paper.mjs';
+export * from './ToolView.mjs';
+export * from './ToolsView.mjs';
+export * from './HighlighterView.mjs';

package/src/dia/layers/GridLayer.mjs

@@ -0,0 +1,176 @@
+import { PaperLayer } from '../PaperLayer.mjs';
+import {
+    isFunction,
+    isString,
+    defaults,
+    omit,
+    assign,
+    merge,
+} from '../../util/index.mjs';
+import V from '../../V/index.mjs';
+
+export const GridLayer = PaperLayer.extend({
+
+    style: {
+        'pointer-events': 'none'
+    },
+
+    _gridCache: null,
+    _gridSettings: null,
+
+    init() {
+        PaperLayer.prototype.init.apply(this, arguments);
+        const { options: { paper }} = this;
+        this._gridCache = null;
+        this._gridSettings = [];
+        this.listenTo(paper, 'transform resize', this.updateGrid);
+    },
+
+    setGrid(drawGrid) {
+        this._gridSettings = this.getGridSettings(drawGrid);
+        this.renderGrid();
+    },
+
+    getGridSettings(drawGrid) {
+        const gridSettings = [];
+        if (drawGrid) {
+            const optionsList = Array.isArray(drawGrid) ? drawGrid : [drawGrid || {}];
+            optionsList.forEach((item) => {
+                gridSettings.push(...this._resolveDrawGridOption(item));
+            });
+        }
+        return gridSettings;
+    },
+
+    removeGrid() {
+        const { _gridCache: grid } = this;
+        if (!grid) return;
+        grid.root.remove();
+        this._gridCache = null;
+    },
+
+    renderGrid() {
+
+        const { options: { paper }} = this;
+        const { _gridSettings: gridSettings } = this;
+
+        this.removeGrid();
+
+        if (gridSettings.length === 0) return;
+
+        const gridSize = paper.options.drawGridSize || paper.options.gridSize;
+        if (gridSize <= 1) {
+            return;
+        }
+
+        const refs = this._getGridRefs();
+
+        gridSettings.forEach((gridLayerSetting, index) => {
+
+            const id = 'pattern_' + index;
+            const options = merge({}, gridLayerSetting);
+            const { scaleFactor = 1 } = options;
+            options.width = gridSize * scaleFactor || 1;
+            options.height = gridSize * scaleFactor || 1;
+
+            let vPattern;
+            if (!refs.exist(id)) {
+                vPattern = V('pattern', { id: id, patternUnits: 'userSpaceOnUse' }, V(options.markup));
+                refs.add(id, vPattern);
+            } else {
+                vPattern = refs.get(id);
+            }
+
+            if (isFunction(options.render)) {
+                options.render(vPattern.node.firstChild, options, paper);
+            }
+            vPattern.attr({
+                width: options.width,
+                height: options.height
+            });
+        });
+
+        refs.root.appendTo(this.el);
+        this.updateGrid();
+    },
+
+    updateGrid() {
+
+        const { _gridCache: grid, _gridSettings: gridSettings, options: { paper }} = this;
+        if (!grid) return;
+        const { root: vSvg, patterns } = grid;
+        const { x, y, width, height } = paper.getArea();
+        vSvg.attr({ x, y, width, height });
+        for (const patternId in patterns) {
+            const vPattern = patterns[patternId];
+            vPattern.attr({ x: -x, y: -y });
+        }
+        gridSettings.forEach((options, index) => {
+            if (isFunction(options.update)) {
+                const vPattern = patterns['pattern_' + index];
+                options.update(vPattern.node.firstChild, options, paper);
+            }
+        });
+    },
+
+    _getGridRefs() {
+        let { _gridCache: grid } = this;
+        if (grid) return grid;
+        const defsVEl = V('defs');
+        const svgVEl = V('svg', { width: '100%', height: '100%' }, [defsVEl]);
+        grid = this._gridCache = {
+            root: svgVEl,
+            patterns: {},
+            add: function(id, patternVEl) {
+                const rectVEl = V('rect', { width: '100%', height: '100%', fill: `url(#${id})` });
+                defsVEl.append(patternVEl);
+                svgVEl.append(rectVEl);
+                this.patterns[id] = patternVEl;
+            },
+            get: function(id) {
+                return this.patterns[id];
+            },
+            exist: function(id) {
+                return this.patterns[id] !== undefined;
+            }
+        };
+        return grid;
+    },
+
+    _resolveDrawGridOption(opt) {
+
+        var namespace = this.options.patterns;
+        if (isString(opt) && Array.isArray(namespace[opt])) {
+            return namespace[opt].map(function(item) {
+                return assign({}, item);
+            });
+        }
+
+        var options = opt || { args: [{}] };
+        var isArray = Array.isArray(options);
+        var name = options.name;
+
+        if (!isArray && !name && !options.markup) {
+            name = 'dot';
+        }
+
+        if (name && Array.isArray(namespace[name])) {
+            var pattern = namespace[name].map(function(item) {
+                return assign({}, item);
+            });
+
+            var args = Array.isArray(options.args) ? options.args : [options.args || {}];
+
+            defaults(args[0], omit(opt, 'args'));
+            for (var i = 0; i < args.length; i++) {
+                if (pattern[i]) {
+                    assign(pattern[i], args[i]);
+                }
+            }
+            return pattern;
+        }
+
+        return isArray ? options : [options];
+    },
+
+});