@joint/core 4.0.0

package/src/highlighters/mask.mjs

@@ -0,0 +1,220 @@
+import V from '../V/index.mjs';
+import { HighlighterView } from '../dia/HighlighterView.mjs';
+
+const MASK_CLIP = 20;
+
+function forEachDescendant(vel, fn) {
+    const descendants = vel.children();
+    while (descendants.length > 0) {
+        const descendant = descendants.shift();
+        if (fn(descendant)) {
+            descendants.push(...descendant.children());
+        }
+    }
+}
+
+export const mask = HighlighterView.extend({
+
+    tagName: 'rect',
+    className: 'highlight-mask',
+    attributes: {
+        'pointer-events': 'none'
+    },
+
+    options: {
+        padding: 3,
+        maskClip: MASK_CLIP,
+        deep: false,
+        attrs: {
+            'stroke': '#FEB663',
+            'stroke-width': 3,
+            'stroke-linecap': 'butt',
+            'stroke-linejoin': 'miter',
+        }
+    },
+
+    VISIBLE: 'white',
+    INVISIBLE: 'black',
+
+    MASK_ROOT_ATTRIBUTE_BLACKLIST: [
+        'marker-start',
+        'marker-end',
+        'marker-mid',
+        'transform',
+        'stroke-dasharray',
+        'class',
+    ],
+
+    MASK_CHILD_ATTRIBUTE_BLACKLIST: [
+        'stroke',
+        'fill',
+        'stroke-width',
+        'stroke-opacity',
+        'stroke-dasharray',
+        'fill-opacity',
+        'marker-start',
+        'marker-end',
+        'marker-mid',
+        'class',
+    ],
+
+    // TODO: change the list to a function callback
+    MASK_REPLACE_TAGS: [
+        'FOREIGNOBJECT',
+        'IMAGE',
+        'USE',
+        'TEXT',
+        'TSPAN',
+        'TEXTPATH'
+    ],
+
+    // TODO: change the list to a function callback
+    MASK_REMOVE_TAGS: [
+        'TEXT',
+        'TSPAN',
+        'TEXTPATH'
+    ],
+
+    transformMaskChild(cellView, childEl) {
+        const {
+            MASK_CHILD_ATTRIBUTE_BLACKLIST,
+            MASK_REPLACE_TAGS,
+            MASK_REMOVE_TAGS
+        } = this;
+        const childTagName = childEl.tagName();
+        // Do not include the element in the mask's image
+        if (!V.isSVGGraphicsElement(childEl) || MASK_REMOVE_TAGS.includes(childTagName)) {
+            childEl.remove();
+            return false;
+        }
+        // Replace the element with a rectangle
+        if (MASK_REPLACE_TAGS.includes(childTagName)) {
+            // Note: clone() method does not change the children ids
+            const originalChild = cellView.vel.findOne(`#${childEl.id}`);
+            if (originalChild) {
+                const { node: originalNode } = originalChild;
+                let childBBox = cellView.getNodeBoundingRect(originalNode);
+                if (cellView.model.isElement()) {
+                    childBBox = V.transformRect(childBBox, cellView.getNodeMatrix(originalNode));
+                }
+                const replacement = V('rect', childBBox.toJSON());
+                const { x: ox, y: oy } = childBBox.center();
+                const { angle, cx = ox, cy = oy } = originalChild.rotate();
+                if (angle) replacement.rotate(angle, cx, cy);
+                // Note: it's not important to keep the same sibling index since all subnodes are filled
+                childEl.parent().append(replacement);
+            }
+            childEl.remove();
+            return false;
+        }
+        // Keep the element, but clean it from certain attributes
+        MASK_CHILD_ATTRIBUTE_BLACKLIST.forEach(attrName => {
+            if (attrName === 'fill' && childEl.attr('fill') === 'none') return;
+            childEl.removeAttr(attrName);
+        });
+        return true;
+    },
+
+    transformMaskRoot(_cellView, rootEl) {
+        const { MASK_ROOT_ATTRIBUTE_BLACKLIST } = this;
+        MASK_ROOT_ATTRIBUTE_BLACKLIST.forEach(attrName => {
+            rootEl.removeAttr(attrName);
+        });
+    },
+
+    getMaskShape(cellView, vel) {
+        const { options, MASK_REPLACE_TAGS } = this;
+        const { deep } = options;
+        const tagName = vel.tagName();
+        let maskRoot;
+        if (tagName === 'G') {
+            if (!deep) return null;
+            maskRoot = vel.clone();
+            forEachDescendant(maskRoot, maskChild => this.transformMaskChild(cellView, maskChild));
+        } else {
+            if (MASK_REPLACE_TAGS.includes(tagName)) return null;
+            maskRoot = vel.clone();
+        }
+        this.transformMaskRoot(cellView, maskRoot);
+        return maskRoot;
+    },
+
+    getMaskId() {
+        return `highlight-mask-${this.cid}`;
+    },
+
+    getMask(cellView, vNode) {
+
+        const { VISIBLE, INVISIBLE, options } = this;
+        const { padding, attrs } = options;
+        // support both `strokeWidth` and `stroke-width` attribute names
+        const strokeWidth = parseFloat(V('g').attr(attrs).attr('stroke-width'));
+        const hasNodeFill = vNode.attr('fill') !== 'none';
+        let magnetStrokeWidth = parseFloat(vNode.attr('stroke-width'));
+        if (isNaN(magnetStrokeWidth)) magnetStrokeWidth = 1;
+        // stroke of the invisible shape
+        const minStrokeWidth = magnetStrokeWidth + padding * 2;
+        // stroke of the visible shape
+        const maxStrokeWidth = minStrokeWidth + strokeWidth * 2;
+        let maskEl = this.getMaskShape(cellView, vNode);
+        if (!maskEl) {
+            const nodeBBox = cellView.getNodeBoundingRect(vNode.node);
+            // Make sure the rect is visible
+            nodeBBox.inflate(nodeBBox.width ? 0 : 0.5, nodeBBox.height ? 0 : 0.5);
+            maskEl =  V('rect', nodeBBox.toJSON());
+        }
+        maskEl.attr(attrs);
+        return V('mask', {
+            'id': this.getMaskId()
+        }).append([
+            maskEl.clone().attr({
+                'fill': hasNodeFill ? VISIBLE : 'none',
+                'stroke': VISIBLE,
+                'stroke-width': maxStrokeWidth
+            }),
+            maskEl.clone().attr({
+                'fill': hasNodeFill ? INVISIBLE : 'none',
+                'stroke': INVISIBLE,
+                'stroke-width': minStrokeWidth
+            })
+        ]);
+    },
+
+    removeMask(paper) {
+        const maskNode = paper.svg.getElementById(this.getMaskId());
+        if (maskNode) {
+            paper.defs.removeChild(maskNode);
+        }
+    },
+
+    addMask(paper, maskEl) {
+        paper.defs.appendChild(maskEl.node);
+    },
+
+    highlight(cellView, node) {
+        const { options, vel } = this;
+        const { padding, attrs, maskClip = MASK_CLIP, layer } = options;
+        const color = ('stroke' in attrs) ? attrs['stroke'] : '#000000';
+        if (!layer && node === cellView.el) {
+            // If the highlighter is appended to the cellView
+            // and we measure the size of the cellView wrapping group
+            // it's necessary to remove the highlighter first
+            vel.remove();
+        }
+        const highlighterBBox = cellView.getNodeBoundingRect(node).inflate(padding + maskClip);
+        const highlightMatrix = this.getNodeMatrix(cellView, node);
+        const maskEl = this.getMask(cellView, V(node));
+        this.addMask(cellView.paper, maskEl);
+        vel.attr(highlighterBBox.toJSON());
+        vel.attr({
+            'transform': V.matrixToTransformString(highlightMatrix),
+            'mask': `url(#${maskEl.id})`,
+            'fill': color
+        });
+    },
+
+    unhighlight(cellView) {
+        this.removeMask(cellView.paper);
+    }
+
+});

package/src/highlighters/opacity.mjs

@@ -0,0 +1,17 @@
+import { HighlighterView } from '../dia/HighlighterView.mjs';
+
+export const opacity = HighlighterView.extend({
+
+    UPDATABLE: false,
+    MOUNTABLE: false,
+
+    highlight: function(_cellView, node) {
+        const { alphaValue = 0.3 } = this.options;
+        node.style.opacity = alphaValue;
+    },
+
+    unhighlight: function(_cellView, node) {
+        node.style.opacity = '';
+    }
+
+});

package/src/highlighters/stroke.mjs

@@ -0,0 +1,100 @@
+import { assign } from '../util/index.mjs';
+import V from '../V/index.mjs';
+import { HighlighterView } from '../dia/HighlighterView.mjs';
+
+export const stroke = HighlighterView.extend({
+
+    tagName: 'path',
+    className: 'highlight-stroke',
+    attributes: {
+        'pointer-events': 'none',
+        'fill': 'none'
+    },
+
+    options: {
+        padding: 3,
+        rx: 0,
+        ry: 0,
+        useFirstSubpath: false,
+        attrs: {
+            'stroke-width': 3,
+            'stroke': '#FEB663'
+        }
+    },
+
+    getPathData(cellView, node) {
+        const { options } = this;
+        const { useFirstSubpath } = options;
+        let d;
+        try {
+            const vNode = V(node);
+            d = vNode.convertToPathData().trim();
+            if (vNode.tagName() === 'PATH' && useFirstSubpath) {
+                const secondSubpathIndex = d.search(/.M/i) + 1;
+                if (secondSubpathIndex > 0) {
+                    d = d.substr(0, secondSubpathIndex);
+                }
+            }
+        } catch (error) {
+            // Failed to get path data from magnet element.
+            // Draw a rectangle around the node instead.
+            const nodeBBox = cellView.getNodeBoundingRect(node);
+            d = V.rectToPath(assign({}, options, nodeBBox.toJSON()));
+        }
+        return d;
+    },
+
+    highlightConnection(cellView) {
+        this.vel.attr('d', cellView.getSerializedConnection());
+    },
+
+    highlightNode(cellView, node) {
+        const { vel, options } = this;
+        const { padding, layer } = options;
+        let highlightMatrix = this.getNodeMatrix(cellView, node);
+        // Add padding to the highlight element.
+        if (padding) {
+            if (!layer && node === cellView.el) {
+                // If the highlighter is appended to the cellView
+                // and we measure the size of the cellView wrapping group
+                // it's necessary to remove the highlighter first
+                vel.remove();
+            }
+            let nodeBBox = cellView.getNodeBoundingRect(node);
+            const cx = nodeBBox.x + (nodeBBox.width / 2);
+            const cy = nodeBBox.y + (nodeBBox.height / 2);
+            nodeBBox = V.transformRect(nodeBBox, highlightMatrix);
+            const width = Math.max(nodeBBox.width, 1);
+            const height = Math.max(nodeBBox.height, 1);
+            const sx = (width + padding) / width;
+            const sy = (height + padding) / height;
+            const paddingMatrix = V.createSVGMatrix({
+                a: sx,
+                b: 0,
+                c: 0,
+                d: sy,
+                e: cx - sx * cx,
+                f: cy - sy * cy
+            });
+            highlightMatrix = highlightMatrix.multiply(paddingMatrix);
+        }
+        vel.attr({
+            'd': this.getPathData(cellView, node),
+            'transform': V.matrixToTransformString(highlightMatrix)
+        });
+    },
+
+    highlight(cellView, node) {
+        const { vel, options } = this;
+        vel.attr(options.attrs);
+        if (options.nonScalingStroke) {
+            vel.attr('vector-effect', 'non-scaling-stroke');
+        }
+        if (cellView.isNodeConnection(node)) {
+            this.highlightConnection(cellView);
+        } else {
+            this.highlightNode(cellView, node);
+        }
+    }
+
+});

package/src/layout/index.mjs

@@ -0,0 +1,4 @@
+import * as Port from './ports/port.mjs';
+import * as PortLabel from './ports/portLabel.mjs';
+
+export { Port, PortLabel };

package/src/layout/ports/port.mjs

@@ -0,0 +1,188 @@
+import { evalCalcAttribute, isCalcAttribute } from '../../dia/attributes/calc.mjs';
+import * as g from '../../g/index.mjs';
+import * as util from '../../util/index.mjs';
+
+function portTransformAttrs(point, angle, opt) {
+
+    var trans = point.toJSON();
+
+    trans.angle = angle || 0;
+
+    return util.defaults({}, opt, trans);
+}
+
+function lineLayout(ports, p1, p2, elBBox) {
+    return ports.map(function(port, index, ports) {
+        var p = this.pointAt(((index + 0.5) / ports.length));
+        // `dx`,`dy` per port offset option
+        if (port.dx || port.dy) {
+            p.offset(port.dx || 0, port.dy || 0);
+        }
+        return portTransformAttrs(p.round(), 0, argTransform(elBBox, port));
+    }, g.line(p1, p2));
+}
+
+function ellipseLayout(ports, elBBox, startAngle, stepFn) {
+
+    var center = elBBox.center();
+    var ratio = elBBox.width / elBBox.height;
+    var p1 = elBBox.topMiddle();
+
+    var ellipse = g.Ellipse.fromRect(elBBox);
+
+    return ports.map(function(port, index, ports) {
+
+        var angle = startAngle + stepFn(index, ports.length);
+        var p2 = p1.clone()
+            .rotate(center, -angle)
+            .scale(ratio, 1, center);
+
+        var theta = port.compensateRotation ? -ellipse.tangentTheta(p2) : 0;
+
+        // `dx`,`dy` per port offset option
+        if (port.dx || port.dy) {
+            p2.offset(port.dx || 0, port.dy || 0);
+        }
+
+        // `dr` delta radius option
+        if (port.dr) {
+            p2.move(center, port.dr);
+        }
+
+        return portTransformAttrs(p2.round(), theta, argTransform(elBBox, port));
+    });
+}
+
+
+function argTransform(bbox, args) {
+    let { x, y, angle } = args;
+    if (util.isPercentage(x)) {
+        x = parseFloat(x) / 100 * bbox.width;
+    } else if (isCalcAttribute(x)) {
+        x = Number(evalCalcAttribute(x, bbox));
+    }
+    if (util.isPercentage(y)) {
+        y = parseFloat(y) / 100 * bbox.height;
+    } else if (isCalcAttribute(y)) {
+        y = Number(evalCalcAttribute(y, bbox));
+    }
+    return { x, y, angle };
+}
+
+// Creates a point stored in arguments
+function argPoint(bbox, args) {
+    const { x, y } = argTransform(bbox, args);
+    return new g.Point(x || 0, y || 0);
+}
+
+
+/**
+ * @param {Array<Object>} ports
+ * @param {g.Rect} elBBox
+ * @param {Object=} opt opt Group options
+ * @returns {Array<g.Point>}
+ */
+export const absolute = function(ports, elBBox) {
+    return ports.map(port => {
+        const transformation = argPoint(elBBox, port).round().toJSON();
+        transformation.angle = port.angle || 0;
+        return transformation;
+    });
+};
+
+/**
+ * @param {Array<Object>} ports
+ * @param {g.Rect} elBBox
+ * @param {Object=} opt opt Group options
+ * @returns {Array<g.Point>}
+ */
+export const fn = function(ports, elBBox, opt) {
+    return opt.fn(ports, elBBox, opt);
+};
+
+/**
+ * @param {Array<Object>} ports
+ * @param {g.Rect} elBBox
+ * @param {Object=} opt opt Group options
+ * @returns {Array<g.Point>}
+ */
+export const line = function(ports, elBBox, opt) {
+
+    var start = argPoint(elBBox, opt.start || elBBox.origin());
+    var end = argPoint(elBBox, opt.end || elBBox.corner());
+
+    return lineLayout(ports, start, end, elBBox);
+};
+
+/**
+ * @param {Array<Object>} ports
+ * @param {g.Rect} elBBox
+ * @param {Object=} opt opt Group options
+ * @returns {Array<g.Point>}
+ */
+export const left = function(ports, elBBox, opt) {
+    return lineLayout(ports, elBBox.origin(), elBBox.bottomLeft(), elBBox);
+};
+
+/**
+ * @param {Array<Object>} ports
+ * @param {g.Rect} elBBox
+ * @param {Object=} opt opt Group options
+ * @returns {Array<g.Point>}
+ */
+export const right = function(ports, elBBox, opt) {
+    return lineLayout(ports, elBBox.topRight(), elBBox.corner(), elBBox);
+};
+
+/**
+ * @param {Array<Object>} ports
+ * @param {g.Rect} elBBox
+ * @param {Object=} opt opt Group options
+ * @returns {Array<g.Point>}
+ */
+export const top = function(ports, elBBox, opt) {
+    return lineLayout(ports, elBBox.origin(), elBBox.topRight(), elBBox);
+};
+
+/**
+ * @param {Array<Object>} ports
+ * @param {g.Rect} elBBox
+ * @param {Object=} opt opt Group options
+ * @returns {Array<g.Point>}
+ */
+export const bottom = function(ports, elBBox, opt) {
+    return lineLayout(ports, elBBox.bottomLeft(), elBBox.corner(), elBBox);
+};
+
+/**
+ * @param {Array<Object>} ports
+ * @param {g.Rect} elBBox
+ * @param {Object=} opt Group options
+ * @returns {Array<g.Point>}
+ */
+export const ellipseSpread = function(ports, elBBox, opt) {
+
+    var startAngle = opt.startAngle || 0;
+    var stepAngle = opt.step || 360 / ports.length;
+
+    return ellipseLayout(ports, elBBox, startAngle, function(index) {
+        return index * stepAngle;
+    });
+};
+
+/**
+ * @param {Array<Object>} ports
+ * @param {g.Rect} elBBox
+ * @param {Object=} opt Group options
+ * @returns {Array<g.Point>}
+ */
+export const ellipse = function(ports, elBBox, opt) {
+
+    var startAngle = opt.startAngle || 0;
+    var stepAngle = opt.step || 20;
+
+    return ellipseLayout(ports, elBBox, startAngle, function(index, count) {
+        return (index + 0.5 - count / 2) * stepAngle;
+    });
+};
+