@joint/core 4.0.0

package/src/dia/PaperLayer.mjs

@@ -0,0 +1,75 @@
+import { View } from '../mvc/index.mjs';
+import { addClassNamePrefix } from '../util/util.mjs';
+
+export const LayersNames = {
+    GRID: 'grid',
+    CELLS: 'cells',
+    BACK: 'back',
+    FRONT: 'front',
+    TOOLS: 'tools',
+    LABELS: 'labels'
+};
+
+export const PaperLayer = View.extend({
+
+    tagName: 'g',
+    svgElement: true,
+    pivotNodes: null,
+    defaultTheme: null,
+
+    options: {
+        name: ''
+    },
+
+    className: function() {
+        return addClassNamePrefix(`${this.options.name}-layer`);
+    },
+
+    init: function() {
+        this.pivotNodes = {};
+    },
+
+    insertSortedNode: function(node, z) {
+        this.el.insertBefore(node, this.insertPivot(z));
+    },
+
+    insertNode: function(node) {
+        const { el } = this;
+        if (node.parentNode !== el) {
+            el.appendChild(node);
+        }
+    },
+
+    insertPivot: function(z) {
+        const { el, pivotNodes } = this;
+        z = +z;
+        z || (z = 0);
+        let pivotNode = pivotNodes[z];
+        if (pivotNode) return pivotNode;
+        pivotNode = pivotNodes[z] = document.createComment('z-index:' + (z + 1));
+        let neighborZ = -Infinity;
+        for (let currentZ in pivotNodes) {
+            currentZ = +currentZ;
+            if (currentZ < z && currentZ > neighborZ) {
+                neighborZ = currentZ;
+                if (neighborZ === z - 1) continue;
+            }
+        }
+        if (neighborZ !== -Infinity) {
+            const neighborPivot = pivotNodes[neighborZ];
+            // Insert After
+            el.insertBefore(pivotNode, neighborPivot.nextSibling);
+        } else {
+            // First Child
+            el.insertBefore(pivotNode, el.firstChild);
+        }
+        return pivotNode;
+    },
+
+    removePivots: function() {
+        const { el, pivotNodes } = this;
+        for (let z in pivotNodes) el.removeChild(pivotNodes[z]);
+        this.pivotNodes = {};
+    }
+
+});

package/src/dia/ToolView.mjs

@@ -0,0 +1,69 @@
+import * as mvc from '../mvc/index.mjs';
+
+export const ToolView = mvc.View.extend({
+    name: null,
+    tagName: 'g',
+    className: 'tool',
+    svgElement: true,
+    _visible: true,
+
+    init: function() {
+        var name = this.name;
+        if (name) this.vel.attr('data-tool-name', name);
+    },
+
+    configure: function(view, toolsView) {
+        this.relatedView = view;
+        this.paper = view.paper;
+        this.parentView = toolsView;
+        this.simulateRelatedView(this.el);
+        // Delegate events in case the ToolView was removed from the DOM and reused.
+        this.delegateEvents();
+        return this;
+    },
+
+    simulateRelatedView: function(el) {
+        if (el) el.setAttribute('model-id', this.relatedView.model.id);
+    },
+
+    getName: function() {
+        return this.name;
+    },
+
+    show: function() {
+        this.el.style.display = '';
+        this._visible = true;
+    },
+
+    hide: function() {
+        this.el.style.display = 'none';
+        this._visible = false;
+    },
+
+    isVisible: function() {
+        return !!this._visible;
+    },
+
+    focus: function() {
+        var opacity = this.options.focusOpacity;
+        if (isFinite(opacity)) this.el.style.opacity = opacity;
+        this.parentView.focusTool(this);
+    },
+
+    blur: function() {
+        this.el.style.opacity = '';
+        this.parentView.blurTool(this);
+    },
+
+    update: function() {
+        // to be overridden
+    },
+
+    guard: function(evt) {
+        // Let the context-menu event bubble up to the relatedView
+        const { paper, relatedView } = this;
+        if (!paper || !relatedView) return true;
+        return paper.guard(evt, relatedView);
+    }
+});
+

package/src/dia/ToolsView.mjs

@@ -0,0 +1,128 @@
+import * as mvc from '../mvc/index.mjs';
+import * as util from '../util/index.mjs';
+import { CellView } from './CellView.mjs';
+import { LayersNames } from './PaperLayer.mjs';
+import { ToolView } from './ToolView.mjs';
+
+export const ToolsView = mvc.View.extend({
+    tagName: 'g',
+    className: 'tools',
+    svgElement: true,
+    tools: null,
+    isRendered: false,
+    options: {
+        tools: null,
+        relatedView: null,
+        name: null,
+        // layer?: LayersNames.TOOLS
+        // z?: number
+    },
+
+    configure: function(options) {
+        options = util.assign(this.options, options);
+        var tools = options.tools;
+        if (!Array.isArray(tools)) return this;
+        var relatedView = options.relatedView;
+        if (!(relatedView instanceof CellView)) return this;
+        var views = this.tools = [];
+        for (var i = 0, n = tools.length; i < n; i++) {
+            var tool = tools[i];
+            if (!(tool instanceof ToolView)) continue;
+            tool.configure(relatedView, this);
+            this.vel.append(tool.el);
+            views.push(tool);
+        }
+        this.isRendered = false;
+        relatedView.requestUpdate(relatedView.getFlag('TOOLS'));
+        return this;
+    },
+
+    getName: function() {
+        return this.options.name;
+    },
+
+    update: function(opt) {
+
+        opt || (opt = {});
+        var tools = this.tools;
+        if (!tools) return this;
+        var isRendered = this.isRendered;
+        for (var i = 0, n = tools.length; i < n; i++) {
+            var tool = tools[i];
+            if (!isRendered) {
+                // First update executes render()
+                tool.render();
+            } else if (opt.tool !== tool.cid && tool.isVisible()) {
+                tool.update();
+            }
+        }
+        if (!this.isMounted()) {
+            this.mount();
+        }
+        if (!isRendered) {
+            // Make sure tools are visible (if they were hidden and the tool removed)
+            this.blurTool();
+            this.isRendered = true;
+        }
+        return this;
+    },
+
+    focusTool: function(focusedTool) {
+
+        var tools = this.tools;
+        if (!tools) return this;
+        for (var i = 0, n = tools.length; i < n; i++) {
+            var tool = tools[i];
+            if (focusedTool === tool) {
+                tool.show();
+            } else {
+                tool.hide();
+            }
+        }
+        return this;
+    },
+
+    blurTool: function(blurredTool) {
+        var tools = this.tools;
+        if (!tools) return this;
+        for (var i = 0, n = tools.length; i < n; i++) {
+            var tool = tools[i];
+            if (tool !== blurredTool && !tool.isVisible()) {
+                tool.show();
+                tool.update();
+            }
+        }
+        return this;
+    },
+
+    hide: function() {
+        return this.focusTool(null);
+    },
+
+    show: function() {
+        return this.blurTool(null);
+    },
+
+    onRemove: function() {
+        var tools = this.tools;
+        if (!tools) return this;
+        for (var i = 0, n = tools.length; i < n; i++) {
+            tools[i].remove();
+        }
+        this.tools = null;
+    },
+
+    mount: function() {
+        const { options, el } = this;
+        const { relatedView, layer = LayersNames.TOOLS, z } = options;
+        if (relatedView) {
+            if (layer) {
+                relatedView.paper.getLayerView(layer).insertSortedNode(el, z);
+            } else {
+                relatedView.el.appendChild(el);
+            }
+        }
+        return this;
+    }
+
+});

package/src/dia/attributes/calc.mjs

@@ -0,0 +1,128 @@
+const props = {
+    x: 'x',
+    y: 'y',
+    width: 'w',
+    height: 'h',
+    minimum: 's',
+    maximum: 'l',
+    diagonal: 'd'
+};
+const propsList = Object.keys(props).map(key => props[key]).join('');
+const numberPattern = '[-+]?[0-9]*\\.?[0-9]+(?:[eE][-+]?[0-9]+)?';
+const findSpacesRegex = /\s/g;
+const parseExpressionRegExp = new RegExp(`^(${numberPattern}\\*)?([${propsList}])(/${numberPattern})?([-+]{1,2}${numberPattern})?$`, 'g');
+
+function throwInvalid(expression) {
+    throw new Error(`Invalid calc() expression: ${expression}`);
+}
+
+export function evalCalcExpression(expression, bbox) {
+    const match = parseExpressionRegExp.exec(expression.replace(findSpacesRegex, ''));
+    if (!match) throwInvalid(expression);
+    parseExpressionRegExp.lastIndex = 0; // reset regex results for the next run
+    const [,multiply, property, divide, add] = match;
+    const { x, y, width, height } = bbox;
+    let value = 0;
+    switch (property) {
+        case props.width: {
+            value = width;
+            break;
+        }
+        case props.height: {
+            value = height;
+            break;
+        }
+        case props.x: {
+            value = x;
+            break;
+        }
+        case props.y: {
+            value = y;
+            break;
+        }
+        case props.minimum: {
+            value = Math.min(height, width);
+            break;
+        }
+        case props.maximum: {
+            value = Math.max(height, width);
+            break;
+        }
+        case props.diagonal: {
+            value = Math.sqrt((height * height) + (width * width));
+            break;
+        }
+    }
+    if (multiply) {
+        // e.g "2*"
+        value *= parseFloat(multiply);
+    }
+    if (divide) {
+        // e.g "/2"
+        value /= parseFloat(divide.slice(1));
+    }
+    if (add) {
+        value += evalAddExpression(add);
+    }
+    return value;
+}
+
+function evalAddExpression(addExpression) {
+    if (!addExpression) return 0;
+    const [sign] = addExpression;
+    switch (sign) {
+        case '+': {
+            return parseFloat(addExpression.substr(1));
+        }
+        case '-': {
+            return -parseFloat(addExpression.substr(1));
+        }
+    }
+    return parseFloat(addExpression);
+}
+
+export function isCalcAttribute(value) {
+    return typeof value === 'string' && value.includes('calc');
+}
+
+const calcStart = 'calc(';
+const calcStartOffset = calcStart.length;
+
+export function evalCalcAttribute(attributeValue, refBBox) {
+    let value = attributeValue;
+    let startSearchIndex = 0;
+    do {
+        let calcIndex = value.indexOf(calcStart, startSearchIndex);
+        if (calcIndex === -1) return value;
+        let calcEndIndex = calcIndex + calcStartOffset;
+        let brackets = 1;
+        findClosingBracket: do {
+            switch (value[calcEndIndex]) {
+                case '(': {
+                    brackets++;
+                    break;
+                }
+                case ')': {
+                    brackets--;
+                    if (brackets === 0) break findClosingBracket;
+                    break;
+                }
+                case undefined: {
+                    // Could not find the closing bracket.
+                    throwInvalid(value);
+                }
+            }
+            calcEndIndex++;
+        } while (true);
+        // Get the calc() expression without nested calcs (recursion)
+        let expression = value.slice(calcIndex + calcStartOffset, calcEndIndex);
+        if (isCalcAttribute(expression)) {
+            expression = evalCalcAttribute(expression, refBBox);
+        }
+        // Eval the calc() expression without nested calcs.
+        const calcValue = String(evalCalcExpression(expression, refBBox));
+        // Replace the calc() expression and continue search
+        value = value.slice(0, calcIndex) + calcValue + value.slice(calcEndIndex + 1);
+        startSearchIndex = calcIndex + calcValue.length;
+    } while (true);
+}

package/src/dia/attributes/connection.mjs

@@ -0,0 +1,75 @@
+import { Point } from '../../g/index.mjs';
+
+function atConnectionWrapper(method, opt) {
+    var zeroVector = new Point(1, 0);
+    return function(value) {
+        var p, angle;
+        var tangent = this[method](value);
+        if (tangent) {
+            angle = (opt.rotate) ? tangent.vector().vectorAngle(zeroVector) : 0;
+            p = tangent.start;
+        } else {
+            p = this.path.start;
+            angle = 0;
+        }
+        if (angle === 0) return { transform: 'translate(' + p.x + ',' + p.y + ')' };
+        return { transform: 'translate(' + p.x + ',' + p.y + ') rotate(' + angle + ')' };
+    };
+}
+
+function isLinkView() {
+    return this.model.isLink();
+}
+
+const connectionAttributesNS = {
+
+    'connection': {
+        qualify: isLinkView,
+        set: function({ stubs = 0 }) {
+            let d;
+            if (isFinite(stubs) && stubs !== 0) {
+                let offset;
+                if (stubs < 0) {
+                    offset = (this.getConnectionLength() + stubs) / 2;
+                } else {
+                    offset = stubs;
+                }
+                const path = this.getConnection();
+                const segmentSubdivisions = this.getConnectionSubdivisions();
+                const sourceParts = path.divideAtLength(offset, { segmentSubdivisions });
+                const targetParts = path.divideAtLength(-offset, { segmentSubdivisions });
+                if (sourceParts && targetParts) {
+                    d = `${sourceParts[0].serialize()} ${targetParts[1].serialize()}`;
+                }
+            }
+
+            return { d: d || this.getSerializedConnection() };
+        }
+    },
+
+    'at-connection-length-keep-gradient': {
+        qualify: isLinkView,
+        set: atConnectionWrapper('getTangentAtLength', { rotate: true })
+    },
+
+    'at-connection-length-ignore-gradient': {
+        qualify: isLinkView,
+        set: atConnectionWrapper('getTangentAtLength', { rotate: false })
+    },
+
+    'at-connection-ratio-keep-gradient': {
+        qualify: isLinkView,
+        set: atConnectionWrapper('getTangentAtRatio', { rotate: true })
+    },
+
+    'at-connection-ratio-ignore-gradient': {
+        qualify: isLinkView,
+        set: atConnectionWrapper('getTangentAtRatio', { rotate: false })
+    }
+
+};
+
+connectionAttributesNS['at-connection-length'] = connectionAttributesNS['at-connection-length-keep-gradient'];
+connectionAttributesNS['at-connection-ratio'] = connectionAttributesNS['at-connection-ratio-keep-gradient'];
+
+export default connectionAttributesNS;

package/src/dia/attributes/defs.mjs

@@ -0,0 +1,76 @@
+import { assign, isPlainObject } from '../../util/util.mjs';
+
+function contextMarker(context) {
+    var marker = {};
+    // Stroke
+    // The context 'fill' is disregarded here. The usual case is to use the marker with a connection
+    // (for which 'fill' attribute is set to 'none').
+    var stroke = context.stroke;
+    if (typeof stroke === 'string') {
+        marker['stroke'] = stroke;
+        marker['fill'] = stroke;
+    }
+    // Opacity
+    // Again the context 'fill-opacity' is ignored.
+    var strokeOpacity = context['stroke-opacity'];
+    if (strokeOpacity === undefined) strokeOpacity = context.opacity;
+    if (strokeOpacity !== undefined) {
+        marker['stroke-opacity'] = strokeOpacity;
+        marker['fill-opacity'] = strokeOpacity;
+    }
+    return marker;
+}
+
+function setPaintURL(def) {
+    const { paper } = this;
+    const url = (def.type === 'pattern')
+        ? paper.definePattern(def)
+        : paper.defineGradient(def);
+    return `url(#${url})`;
+}
+
+const defsAttributesNS = {
+
+    'source-marker': {
+        qualify: isPlainObject,
+        set: function(marker, refBBox, node, attrs) {
+            marker = assign(contextMarker(attrs), marker);
+            return { 'marker-start': 'url(#' + this.paper.defineMarker(marker) + ')' };
+        }
+    },
+
+    'target-marker': {
+        qualify: isPlainObject,
+        set: function(marker, refBBox, node, attrs) {
+            marker = assign(contextMarker(attrs), { 'transform': 'rotate(180)' }, marker);
+            return { 'marker-end': 'url(#' + this.paper.defineMarker(marker) + ')' };
+        }
+    },
+
+    'vertex-marker': {
+        qualify: isPlainObject,
+        set: function(marker, refBBox, node, attrs) {
+            marker = assign(contextMarker(attrs), marker);
+            return { 'marker-mid': 'url(#' + this.paper.defineMarker(marker) + ')' };
+        }
+    },
+
+    'fill': {
+        qualify: isPlainObject,
+        set: setPaintURL
+    },
+
+    'stroke': {
+        qualify: isPlainObject,
+        set: setPaintURL
+    },
+
+    'filter': {
+        qualify: isPlainObject,
+        set: function(filter) {
+            return 'url(#' + this.paper.defineFilter(filter) + ')';
+        }
+    },
+};
+
+export default defsAttributesNS;

package/src/dia/attributes/eval.mjs

@@ -0,0 +1,64 @@
+import { isCalcAttribute, evalCalcAttribute } from './calc.mjs';
+
+const calcAttributesList = [
+    'transform',
+    'x',
+    'y',
+    'cx',
+    'cy',
+    'dx',
+    'dy',
+    'x1',
+    'y1',
+    'x2',
+    'y2',
+    'points',
+    'd',
+    'r',
+    'rx',
+    'ry',
+    'width',
+    'height',
+    'stroke-width',
+    'font-size',
+];
+
+const positiveValueList = [
+    'r',
+    'rx',
+    'ry',
+    'width',
+    'height',
+    'stroke-width',
+    'font-size',
+];
+
+const calcAttributes = calcAttributesList.reduce((acc, attrName) => {
+    acc[attrName] = true;
+    return acc;
+}, {});
+
+const positiveValueAttributes = positiveValueList.reduce((acc, attrName) => {
+    acc[attrName] = true;
+    return acc;
+}, {});
+
+export function evalAttributes(attrs, refBBox) {
+    const evalAttrs = {};
+    for (let attrName in attrs) {
+        if (!attrs.hasOwnProperty(attrName)) continue;
+        evalAttrs[attrName] = evalAttribute(attrName, attrs[attrName], refBBox);
+    }
+    return evalAttrs;
+}
+
+export function evalAttribute(attrName, attrValue, refBBox) {
+    if (attrName in calcAttributes && isCalcAttribute(attrValue)) {
+        let evalAttrValue = evalCalcAttribute(attrValue, refBBox);
+        if (attrName in positiveValueAttributes) {
+            evalAttrValue = Math.max(0, evalAttrValue);
+        }
+        return evalAttrValue;
+    }
+    return attrValue;
+}

package/src/dia/attributes/index.mjs

@@ -0,0 +1,69 @@
+import { assign, isPlainObject } from '../../util/util.mjs';
+import $ from '../../mvc/Dom/index.mjs';
+import V from '../../V/index.mjs';
+
+import props from './props.mjs';
+import legacyAttributesNS from './legacy.mjs';
+import textAttributesNS from './text.mjs';
+import connectionAttributesNS from './connection.mjs';
+import shapeAttributesNS from './shape.mjs';
+import defsAttributesNS from './defs.mjs';
+import offsetAttributesNS from './offset.mjs';
+
+function setIfChangedWrapper(attribute) {
+    return function setIfChanged(value, _, node) {
+        const vel = V(node);
+        if (vel.attr(attribute) === value) return;
+        vel.attr(attribute, value);
+    };
+}
+
+const attributesNS = {
+
+    'ref': {
+        // We do not set `ref` attribute directly on an element.
+        // The attribute itself does not qualify for relative positioning.
+    },
+
+    'href': {
+        set: setIfChangedWrapper('href')
+    },
+
+    'xlink:href': {
+        set: setIfChangedWrapper('xlink:href')
+    },
+
+    // `port` attribute contains the `id` of the port that the underlying magnet represents.
+    'port': {
+        set: function(port) {
+            return (port === null || port.id === undefined) ? port : port.id;
+        }
+    },
+
+    // `style` attribute is special in the sense that it sets the CSS style of the sub-element.
+    'style': {
+        qualify: isPlainObject,
+        set: function(styles, refBBox, node) {
+            $(node).css(styles);
+        }
+    },
+
+    'html': {
+        set: function(html, refBBox, node) {
+            $(node).html(html + '');
+        }
+    },
+
+    // Properties setter (set various properties on the node)
+    props,
+};
+
+assign(attributesNS, legacyAttributesNS);
+assign(attributesNS, textAttributesNS);
+assign(attributesNS, connectionAttributesNS);
+assign(attributesNS, shapeAttributesNS);
+assign(attributesNS, defsAttributesNS);
+assign(attributesNS, offsetAttributesNS);
+
+export const attributes = attributesNS;
+