@joint/core 4.0.0

package/src/layout/ports/portLabel.mjs

@@ -0,0 +1,224 @@
+import * as g from '../../g/index.mjs';
+import * as util from '../../util/index.mjs';
+
+function labelAttributes(opt1, opt2) {
+
+    // use value from `opt2` if it is missing in `opt1`
+    // use value from this object if it is missing in `opt2` as well
+    return util.defaultsDeep({}, opt1, opt2, {
+        x: 0,
+        y: 0,
+        angle: 0,
+        attrs: {}
+    });
+}
+
+function getBBoxAngles(elBBox) {
+
+    var center = elBBox.center();
+
+    var tl = center.theta(elBBox.origin());
+    var bl = center.theta(elBBox.bottomLeft());
+    var br = center.theta(elBBox.corner());
+    var tr = center.theta(elBBox.topRight());
+
+    return [tl, tr, br, bl];
+}
+
+function outsideLayout(portPosition, elBBox, autoOrient, opt) {
+
+    opt = util.defaults({}, opt, { offset: 15 });
+    var angle = elBBox.center().theta(portPosition);
+
+    var tx, ty, y, textAnchor;
+    var offset = opt.offset;
+    var orientAngle = 0;
+
+    const [topLeftAngle, bottomLeftAngle, bottomRightAngle, topRightAngle] = getBBoxAngles(elBBox);
+    if ((angle < bottomLeftAngle) || (angle > bottomRightAngle)) {
+        y = '.3em';
+        tx = offset;
+        ty = 0;
+        textAnchor = 'start';
+    } else if (angle < topLeftAngle) {
+        tx = 0;
+        ty = -offset;
+        if (autoOrient) {
+            orientAngle = -90;
+            textAnchor = 'start';
+            y = '.3em';
+        } else {
+            textAnchor = 'middle';
+            y = '0';
+        }
+    } else if (angle < topRightAngle) {
+        y = '.3em';
+        tx = -offset;
+        ty = 0;
+        textAnchor = 'end';
+    } else {
+        tx = 0;
+        ty = offset;
+        if (autoOrient) {
+            orientAngle = 90;
+            textAnchor = 'start';
+            y = '.3em';
+        } else {
+            textAnchor = 'middle';
+            y = '.6em';
+        }
+    }
+
+    var round = Math.round;
+    return labelAttributes(opt, {
+        x: round(tx),
+        y: round(ty),
+        angle: orientAngle,
+        attrs: { labelText: { y, textAnchor }}
+    });
+}
+
+function insideLayout(portPosition, elBBox, autoOrient, opt) {
+
+    opt = util.defaults({}, opt, { offset: 15 });
+    var angle = elBBox.center().theta(portPosition);
+
+    var tx, ty, y, textAnchor;
+    var offset = opt.offset;
+    var orientAngle = 0;
+
+    const [topLeftAngle, bottomLeftAngle, bottomRightAngle, topRightAngle] = getBBoxAngles(elBBox);
+    if ((angle < bottomLeftAngle) || (angle > bottomRightAngle)) {
+        y = '.3em';
+        tx = -offset;
+        ty = 0;
+        textAnchor = 'end';
+    } else if (angle < topLeftAngle) {
+        tx = 0;
+        ty = offset;
+        if (autoOrient) {
+            orientAngle = 90;
+            textAnchor = 'start';
+            y = '.3em';
+        } else {
+            textAnchor = 'middle';
+            y = '.6em';
+        }
+    } else if (angle < topRightAngle) {
+        y = '.3em';
+        tx = offset;
+        ty = 0;
+        textAnchor = 'start';
+    } else {
+        tx = 0;
+        ty = -offset;
+        if (autoOrient) {
+            orientAngle = -90;
+            textAnchor = 'start';
+            y = '.3em';
+        } else {
+            textAnchor = 'middle';
+            y = '0';
+        }
+    }
+
+    var round = Math.round;
+    return labelAttributes(opt, {
+        x: round(tx),
+        y: round(ty),
+        angle: orientAngle,
+        attrs: { labelText: { y, textAnchor }}
+    });
+}
+
+function radialLayout(portCenterOffset, autoOrient, opt) {
+
+    opt = util.defaults({}, opt, { offset: 20 });
+
+    var origin = g.point(0, 0);
+    var angle = -portCenterOffset.theta(origin);
+    var orientAngle = angle;
+    var offset = portCenterOffset.clone()
+        .move(origin, opt.offset)
+        .difference(portCenterOffset)
+        .round();
+
+    var y = '.3em';
+    var textAnchor;
+
+    if ((angle + 90) % 180 === 0) {
+        textAnchor = autoOrient ? 'end' : 'middle';
+        if (!autoOrient && angle === -270) {
+            y = '0em';
+        }
+    } else if (angle > -270 && angle < -90) {
+        textAnchor = 'start';
+        orientAngle = angle - 180;
+    } else {
+        textAnchor = 'end';
+    }
+
+    var round = Math.round;
+    return labelAttributes(opt, {
+        x: round(offset.x),
+        y: round(offset.y),
+        angle: ((autoOrient) ? orientAngle : 0),
+        attrs: { labelText: { y, textAnchor }}
+    });
+}
+
+export const manual = function(_portPosition, _elBBox, opt) {
+    return labelAttributes(opt);
+};
+
+export const left = function(portPosition, elBBox, opt) {
+    return labelAttributes(opt, {
+        x: -15,
+        attrs: { labelText: { y: '.3em', textAnchor: 'end' }},
+    });
+};
+
+export const right = function(portPosition, elBBox, opt) {
+    return labelAttributes(opt, {
+        x: 15,
+        attrs: { labelText: { y: '.3em', textAnchor: 'start' }},
+    });
+};
+
+export const top = function(portPosition, elBBox, opt) {
+    return labelAttributes(opt, {
+        y: -15,
+        attrs: { labelText: { y: '0', textAnchor: 'middle' }},
+    });
+};
+
+export const bottom = function(portPosition, elBBox, opt) {
+    return labelAttributes(opt, {
+        y: 15,
+        attrs: { labelText: { y: '.6em', textAnchor: 'middle' }},
+    });
+};
+
+export const outsideOriented = function(portPosition, elBBox, opt) {
+    return outsideLayout(portPosition, elBBox, true, opt);
+};
+
+export const outside = function(portPosition, elBBox, opt) {
+    return outsideLayout(portPosition, elBBox, false, opt);
+};
+
+export const insideOriented = function(portPosition, elBBox, opt) {
+    return insideLayout(portPosition, elBBox, true, opt);
+};
+
+export const inside = function(portPosition, elBBox, opt) {
+    return insideLayout(portPosition, elBBox, false, opt);
+};
+
+export const radial = function(portPosition, elBBox, opt) {
+    return radialLayout(portPosition.difference(elBBox.center()), false, opt);
+};
+
+export const radialOriented = function(portPosition, elBBox, opt) {
+    return radialLayout(portPosition.difference(elBBox.center()), true, opt);
+};

package/src/linkAnchors/index.mjs

@@ -0,0 +1,76 @@
+import { Line, Point } from '../g/index.mjs';
+import { isPercentage } from '../util/index.mjs';
+
+function connectionRatio(view, _magnet, _refPoint, opt) {
+
+    var ratio = ('ratio' in opt) ? opt.ratio : 0.5;
+    return view.getPointAtRatio(ratio);
+}
+
+function connectionLength(view, _magnet, _refPoint, opt) {
+
+    var length = ('length' in opt) ? opt.length : 20;
+    return view.getPointAtLength(length);
+}
+
+function _connectionPerpendicular(view, _magnet, refPoint, opt) {
+
+    var OFFSET = 1e6;
+    var path = view.getConnection();
+    var segmentSubdivisions = view.getConnectionSubdivisions();
+    var verticalLine = new Line(refPoint.clone().offset(0, OFFSET), refPoint.clone().offset(0, -OFFSET));
+    var horizontalLine = new Line(refPoint.clone().offset(OFFSET, 0), refPoint.clone().offset(-OFFSET, 0));
+    var verticalIntersections = verticalLine.intersect(path, { segmentSubdivisions: segmentSubdivisions });
+    var horizontalIntersections = horizontalLine.intersect(path, { segmentSubdivisions: segmentSubdivisions });
+    var intersections = [];
+    if (verticalIntersections) Array.prototype.push.apply(intersections, verticalIntersections);
+    if (horizontalIntersections) Array.prototype.push.apply(intersections, horizontalIntersections);
+    if (intersections.length > 0) return refPoint.chooseClosest(intersections);
+    if ('fallbackAt' in opt) {
+        return getPointAtLink(view, opt.fallbackAt);
+    }
+    return connectionClosest(view, _magnet, refPoint, opt);
+}
+
+function _connectionClosest(view, _magnet, refPoint, _opt) {
+
+    var closestPoint = view.getClosestPoint(refPoint);
+    if (!closestPoint) return new Point();
+    return closestPoint;
+}
+
+export function resolveRef(fn) {
+    return function(view, magnet, ref, opt) {
+        if (ref instanceof Element) {
+            var refView = this.paper.findView(ref);
+            var refPoint;
+            if (refView) {
+                if (refView.isNodeConnection(ref)) {
+                    var distance = ('fixedAt' in opt) ? opt.fixedAt : '50%';
+                    refPoint = getPointAtLink(refView, distance);
+                } else {
+                    refPoint = refView.getNodeBBox(ref).center();
+                }
+            } else {
+                // Something went wrong
+                refPoint = new Point();
+            }
+            return fn.call(this, view, magnet, refPoint, opt);
+        }
+        return fn.apply(this, arguments);
+    };
+}
+
+function getPointAtLink(view, value) {
+    var parsedValue = parseFloat(value);
+    if (isPercentage(value)) {
+        return view.getPointAtRatio(parsedValue / 100);
+    } else {
+        return view.getPointAtLength(parsedValue);
+    }
+}
+
+// joint.linkAnchors
+export { connectionRatio, connectionLength };
+export const connectionPerpendicular = resolveRef(_connectionPerpendicular);
+export const connectionClosest = resolveRef(_connectionClosest);

package/src/linkTools/Anchor.mjs

@@ -0,0 +1,235 @@
+import * as g from '../g/index.mjs';
+import * as util from '../util/index.mjs';
+import { ToolView } from '../dia/ToolView.mjs';
+import { getAnchor, snapAnchor } from './helpers.mjs';
+
+const Anchor = ToolView.extend({
+    tagName: 'g',
+    type: null,
+    children: [{
+        tagName: 'circle',
+        selector: 'anchor',
+        attributes: {
+            'cursor': 'pointer'
+        }
+    }, {
+        tagName: 'rect',
+        selector: 'area',
+        attributes: {
+            'pointer-events': 'none',
+            'fill': 'none',
+            'stroke': '#33334F',
+            'stroke-dasharray': '2,4',
+            'rx': 5,
+            'ry': 5
+        }
+    }],
+    events: {
+        mousedown: 'onPointerDown',
+        touchstart: 'onPointerDown',
+        dblclick: 'onPointerDblClick',
+        dbltap: 'onPointerDblClick'
+    },
+    documentEvents: {
+        mousemove: 'onPointerMove',
+        touchmove: 'onPointerMove',
+        mouseup: 'onPointerUp',
+        touchend: 'onPointerUp',
+        touchcancel: 'onPointerUp'
+    },
+    options: {
+        snap: snapAnchor,
+        anchor: getAnchor,
+        scale: null,
+        resetAnchor: true,
+        customAnchorAttributes: {
+            'stroke-width': 4,
+            'stroke': '#33334F',
+            'fill': '#FFFFFF',
+            'r': 5
+        },
+        defaultAnchorAttributes: {
+            'stroke-width': 2,
+            'stroke': '#FFFFFF',
+            'fill': '#33334F',
+            'r': 6
+        },
+        areaPadding: 6,
+        snapRadius: 10,
+        restrictArea: true,
+        redundancyRemoval: true
+    },
+    onRender: function() {
+        this.renderChildren();
+        this.toggleArea(false);
+        this.update();
+    },
+    update: function() {
+        var type = this.type;
+        var relatedView = this.relatedView;
+        var view = relatedView.getEndView(type);
+        if (view) {
+            this.updateAnchor();
+            this.updateArea();
+            this.el.style.display = '';
+        } else {
+            this.el.style.display = 'none';
+        }
+        return this;
+    },
+    updateAnchor: function() {
+        var childNodes = this.childNodes;
+        if (!childNodes) return;
+        var anchorNode = childNodes.anchor;
+        if (!anchorNode) return;
+        var relatedView = this.relatedView;
+        var type = this.type;
+        var position = relatedView.getEndAnchor(type);
+        var options = this.options;
+        var customAnchor = relatedView.model.prop([type, 'anchor']);
+        let transformString =  `translate(${position.x},${position.y})`;
+        if (options.scale) {
+            transformString += ` scale(${options.scale})`;
+        }
+        anchorNode.setAttribute('transform', transformString);
+        var anchorAttributes = (customAnchor) ? options.customAnchorAttributes : options.defaultAnchorAttributes;
+        for (var attrName in anchorAttributes) {
+            anchorNode.setAttribute(attrName, anchorAttributes[attrName]);
+        }
+    },
+    updateArea: function() {
+        var childNodes = this.childNodes;
+        if (!childNodes) return;
+        var areaNode = childNodes.area;
+        if (!areaNode) return;
+        var relatedView = this.relatedView;
+        var type = this.type;
+        var view = relatedView.getEndView(type);
+        var model = view.model;
+        var magnet = relatedView.getEndMagnet(type);
+        var padding = this.options.areaPadding;
+        if (!isFinite(padding)) padding = 0;
+        var bbox, angle, center;
+        if (view.isNodeConnection(magnet)) {
+            bbox = view.getNodeBBox(magnet);
+            angle = 0;
+            center = bbox.center();
+        } else {
+            bbox = view.getNodeUnrotatedBBox(magnet);
+            angle = model.angle();
+            center = bbox.center();
+            if (angle) center.rotate(model.getBBox().center(), -angle);
+            // TODO: get the link's magnet rotation into account
+        }
+        bbox.inflate(padding);
+        areaNode.setAttribute('x', -bbox.width / 2);
+        areaNode.setAttribute('y', -bbox.height / 2);
+        areaNode.setAttribute('width', bbox.width);
+        areaNode.setAttribute('height', bbox.height);
+        areaNode.setAttribute('transform', 'translate(' + center.x + ',' + center.y + ') rotate(' + angle + ')');
+    },
+    toggleArea: function(visible) {
+        var childNodes = this.childNodes;
+        if (!childNodes) return;
+        var areaNode = childNodes.area;
+        if (!areaNode) return;
+        areaNode.style.display = (visible) ? '' : 'none';
+    },
+    onPointerDown: function(evt) {
+        if (this.guard(evt)) return;
+        evt.stopPropagation();
+        evt.preventDefault();
+        this.paper.undelegateEvents();
+        this.delegateDocumentEvents();
+        this.focus();
+        this.toggleArea(this.options.restrictArea);
+        this.relatedView.model.startBatch('anchor-move', { ui: true, tool: this.cid });
+    },
+    resetAnchor: function(anchor) {
+        var type = this.type;
+        var relatedModel = this.relatedView.model;
+        if (anchor) {
+            relatedModel.prop([type, 'anchor'], anchor, {
+                rewrite: true,
+                ui: true,
+                tool: this.cid
+            });
+        } else {
+            relatedModel.removeProp([type, 'anchor'], {
+                ui: true,
+                tool: this.cid
+            });
+        }
+    },
+    onPointerMove: function(evt) {
+
+        var relatedView = this.relatedView;
+        var type = this.type;
+        var view = relatedView.getEndView(type);
+        var model = view.model;
+        var magnet = relatedView.getEndMagnet(type);
+        var normalizedEvent = util.normalizeEvent(evt);
+        var coords = this.paper.clientToLocalPoint(normalizedEvent.clientX, normalizedEvent.clientY);
+        var snapFn = this.options.snap;
+        if (typeof snapFn === 'function') {
+            coords = snapFn.call(relatedView, coords, view, magnet, type, relatedView, this);
+            coords = new g.Point(coords);
+        }
+
+        if (this.options.restrictArea) {
+            if (view.isNodeConnection(magnet)) {
+                // snap coords to the link's connection
+                var pointAtConnection = view.getClosestPoint(coords);
+                if (pointAtConnection) coords = pointAtConnection;
+            } else {
+                // snap coords within node bbox
+                var bbox = view.getNodeUnrotatedBBox(magnet);
+                var angle = model.angle();
+                var origin = model.getBBox().center();
+                var rotatedCoords = coords.clone().rotate(origin, angle);
+                if (!bbox.containsPoint(rotatedCoords)) {
+                    coords = bbox.pointNearestToPoint(rotatedCoords).rotate(origin, -angle);
+                }
+            }
+        }
+
+        var anchor;
+        var anchorFn = this.options.anchor;
+        if (typeof anchorFn === 'function') {
+            anchor = anchorFn.call(relatedView, coords, view, magnet, type, relatedView);
+        }
+
+        this.resetAnchor(anchor);
+        this.update();
+    },
+
+    onPointerUp: function(evt) {
+        const normalizedEvent = util.normalizeEvent(evt);
+        this.paper.delegateEvents();
+        this.undelegateDocumentEvents();
+        this.blur();
+        this.toggleArea(false);
+        var linkView = this.relatedView;
+        if (this.options.redundancyRemoval) linkView.removeRedundantLinearVertices({ ui: true, tool: this.cid });
+        linkView.checkMouseleave(normalizedEvent);
+        linkView.model.stopBatch('anchor-move', { ui: true, tool: this.cid });
+    },
+
+    onPointerDblClick: function() {
+        var anchor = this.options.resetAnchor;
+        if (anchor === false) return; // reset anchor disabled
+        if (anchor === true) anchor = null; // remove the current anchor
+        this.resetAnchor(util.cloneDeep(anchor));
+        this.update();
+    }
+});
+
+export const SourceAnchor = Anchor.extend({
+    name: 'source-anchor',
+    type: 'source'
+});
+
+export const TargetAnchor = Anchor.extend({
+    name: 'target-anchor',
+    type: 'target'
+});

package/src/linkTools/Arrowhead.mjs

@@ -0,0 +1,103 @@
+import * as g from '../g/index.mjs';
+import V from '../V/index.mjs';
+import * as util from '../util/index.mjs';
+import { ToolView } from '../dia/ToolView.mjs';
+
+// End Markers
+const Arrowhead = ToolView.extend({
+    tagName: 'path',
+    xAxisVector: new g.Point(1, 0),
+    events: {
+        mousedown: 'onPointerDown',
+        touchstart: 'onPointerDown'
+    },
+    documentEvents: {
+        mousemove: 'onPointerMove',
+        touchmove: 'onPointerMove',
+        mouseup: 'onPointerUp',
+        touchend: 'onPointerUp',
+        touchcancel: 'onPointerUp'
+    },
+    options: {
+        scale: null
+    },
+    onRender: function() {
+        this.update();
+    },
+    update: function() {
+        var ratio = this.ratio;
+        var view = this.relatedView;
+        var tangent = view.getTangentAtRatio(ratio);
+        var position, angle;
+        if (tangent) {
+            position = tangent.start;
+            angle = tangent.vector().vectorAngle(this.xAxisVector) || 0;
+        } else {
+            position = view.getPointAtRatio(ratio);
+            angle = 0;
+        }
+        if (!position) return this;
+        var matrix = V.createSVGMatrix().translate(position.x, position.y).rotate(angle);
+        const { scale } = this.options;
+        if (scale) matrix = matrix.scale(scale);
+        this.vel.transform(matrix, { absolute: true });
+        return this;
+    },
+    onPointerDown: function(evt) {
+        if (this.guard(evt)) return;
+        evt.stopPropagation();
+        evt.preventDefault();
+        var relatedView = this.relatedView;
+        relatedView.model.startBatch('arrowhead-move', { ui: true, tool: this.cid });
+        relatedView.startArrowheadMove(this.arrowheadType);
+        this.delegateDocumentEvents();
+        relatedView.paper.undelegateEvents();
+        this.focus();
+        this.el.style.pointerEvents = 'none';
+    },
+    onPointerMove: function(evt) {
+        var normalizedEvent = util.normalizeEvent(evt);
+        var coords = this.paper.snapToGrid(normalizedEvent.clientX, normalizedEvent.clientY);
+        this.relatedView.pointermove(normalizedEvent, coords.x, coords.y);
+    },
+    onPointerUp: function(evt) {
+        this.undelegateDocumentEvents();
+        var relatedView = this.relatedView;
+        var paper = relatedView.paper;
+        var normalizedEvent = util.normalizeEvent(evt);
+        var coords = paper.snapToGrid(normalizedEvent.clientX, normalizedEvent.clientY);
+        relatedView.pointerup(normalizedEvent, coords.x, coords.y);
+        paper.delegateEvents();
+        this.blur();
+        this.el.style.pointerEvents = '';
+        relatedView.model.stopBatch('arrowhead-move', { ui: true, tool: this.cid });
+    }
+});
+
+export const TargetArrowhead = Arrowhead.extend({
+    name: 'target-arrowhead',
+    ratio: 1,
+    arrowheadType: 'target',
+    attributes: {
+        'd': 'M -10 -8 10 0 -10 8 Z',
+        'fill': '#33334F',
+        'stroke': '#FFFFFF',
+        'stroke-width': 2,
+        'cursor': 'move',
+        'class': 'target-arrowhead'
+    }
+});
+
+export const SourceArrowhead = Arrowhead.extend({
+    name: 'source-arrowhead',
+    ratio: 0,
+    arrowheadType: 'source',
+    attributes: {
+        'd': 'M 10 -8 -10 0 10 8 Z',
+        'fill': '#33334F',
+        'stroke': '#FFFFFF',
+        'stroke-width': 2,
+        'cursor': 'move',
+        'class': 'source-arrowhead'
+    }
+});

package/src/linkTools/Boundary.mjs

@@ -0,0 +1,48 @@
+
+import * as util from '../util/index.mjs';
+import { ToolView } from '../dia/ToolView.mjs';
+import { getViewBBox } from './helpers.mjs';
+
+export const Boundary = ToolView.extend({
+    name: 'boundary',
+    tagName: 'rect',
+    options: {
+        padding: 10,
+        useModelGeometry: false,
+    },
+    attributes: {
+        'fill': 'none',
+        'stroke': '#33334F',
+        'stroke-width': .5,
+        'stroke-dasharray': '5, 5',
+        'pointer-events': 'none'
+    },
+    onRender: function() {
+        this.update();
+    },
+    update: function() {
+        const { relatedView: view, options, vel } = this;
+        const { useModelGeometry, rotate } = options;
+        const padding = util.normalizeSides(options.padding);
+        let bbox = getViewBBox(view, useModelGeometry).moveAndExpand({
+            x: -padding.left,
+            y: -padding.top,
+            width: padding.left + padding.right,
+            height: padding.top + padding.bottom
+        });
+        var model = view.model;
+        if (model.isElement()) {
+            var angle = model.angle();
+            if (angle) {
+                if (rotate) {
+                    var origin = model.getBBox().center();
+                    vel.rotate(angle, origin.x, origin.y, { absolute: true });
+                } else {
+                    bbox = bbox.bbox(angle);
+                }
+            }
+        }
+        vel.attr(bbox.toJSON());
+        return this;
+    }
+});