@joint/core 4.0.0

package/src/connectors/jumpover.mjs

@@ -0,0 +1,452 @@
+import * as util from '../util/index.mjs';
+import * as g from '../g/index.mjs';
+
+// default size of jump if not specified in options
+var JUMP_SIZE = 5;
+
+// available jump types
+// first one taken as default
+var JUMP_TYPES = ['arc', 'gap', 'cubic'];
+
+// default radius
+var RADIUS = 0;
+
+// takes care of math. error for case when jump is too close to end of line
+var CLOSE_PROXIMITY_PADDING = 1;
+
+// list of connector types not to jump over.
+var IGNORED_CONNECTORS = ['smooth'];
+
+// internal constants for round segment
+var _13 = 1 / 3;
+var _23 = 2 / 3;
+
+function sortPointsAscending(p1, p2) {
+
+    let { x: x1, y: y1 } = p1;
+    let { x: x2, y: y2 } = p2;
+
+    if (x1 > x2) {
+
+        let swap = x1;
+        x1 = x2;
+        x2 = swap;
+
+        swap = y1;
+        y1 = y2;
+        y2 = swap;
+    }
+
+    if (y1 > y2) {
+        let swap = x1;
+        x1 = x2;
+        x2 = swap;
+
+        swap = y1;
+        y1 = y2;
+        y2 = swap;
+    }
+
+    return [new g.Point(x1, y1), new g.Point(x2, y2)];
+}
+
+function overlapExists(line1, line2) {
+
+    const [{ x: x1, y: y1 }, { x: x2, y: y2 }] = sortPointsAscending(line1.start, line1.end);
+    const [{ x: x3, y: y3 }, { x: x4, y: y4 }] = sortPointsAscending(line2.start, line2.end);
+
+    const xMatch = x1 <= x4 && x3 <= x2;
+    const yMatch = y1 <= y4 && y3 <= y2;
+
+    return xMatch && yMatch;
+}
+
+/**
+ * Transform start/end and route into series of lines
+ * @param {g.point} sourcePoint start point
+ * @param {g.point} targetPoint end point
+ * @param {g.point[]} route optional list of route
+ * @return {g.line[]} [description]
+ */
+function createLines(sourcePoint, targetPoint, route) {
+    // make a flattened array of all points
+    var points = [].concat(sourcePoint, route, targetPoint);
+    return points.reduce(function(resultLines, point, idx) {
+        // if there is a next point, make a line with it
+        var nextPoint = points[idx + 1];
+        if (nextPoint != null) {
+            resultLines[idx] = g.line(point, nextPoint);
+        }
+        return resultLines;
+    }, []);
+}
+
+function setupUpdating(jumpOverLinkView) {
+    var paper = jumpOverLinkView.paper;
+    var updateList = paper._jumpOverUpdateList;
+
+    // first time setup for this paper
+    if (updateList == null) {
+        updateList = paper._jumpOverUpdateList = [];
+        var graph = paper.model;
+        graph.on('batch:stop', function() {
+            if (this.hasActiveBatch()) return;
+            updateJumpOver(paper);
+        });
+        graph.on('reset', function() {
+            updateList = paper._jumpOverUpdateList = [];
+        });
+    }
+
+    // add this link to a list so it can be updated when some other link is updated
+    if (updateList.indexOf(jumpOverLinkView) < 0) {
+        updateList.push(jumpOverLinkView);
+
+        // watch for change of connector type or removal of link itself
+        // to remove the link from a list of jump over connectors
+        jumpOverLinkView.listenToOnce(jumpOverLinkView.model, 'change:connector remove', function() {
+            updateList.splice(updateList.indexOf(jumpOverLinkView), 1);
+        });
+    }
+}
+
+/**
+ * Handler for a batch:stop event to force
+ * update of all registered links with jump over connector
+ * @param {object} batchEvent optional object with info about batch
+ */
+function updateJumpOver(paper) {
+    var updateList = paper._jumpOverUpdateList;
+    for (var i = 0; i < updateList.length; i++) {
+        const linkView = updateList[i];
+        const updateFlag = linkView.getFlag(linkView.constructor.Flags.CONNECTOR);
+        linkView.requestUpdate(updateFlag);
+    }
+}
+
+/**
+ * Utility function to collect all intersection points of a single
+ * line against group of other lines.
+ * @param {g.line} line where to find points
+ * @param {g.line[]} crossCheckLines lines to cross
+ * @return {g.point[]} list of intersection points
+ */
+function findLineIntersections(line, crossCheckLines) {
+    return util.toArray(crossCheckLines).reduce(function(res, crossCheckLine) {
+        var intersection = line.intersection(crossCheckLine);
+        if (intersection) {
+            res.push(intersection);
+        }
+        return res;
+    }, []);
+}
+
+/**
+ * Sorting function for list of points by their distance.
+ * @param {g.point} p1 first point
+ * @param {g.point} p2 second point
+ * @return {number} squared distance between points
+ */
+function sortPoints(p1, p2) {
+    return g.line(p1, p2).squaredLength();
+}
+
+/**
+ * Split input line into multiple based on intersection points.
+ * @param {g.line} line input line to split
+ * @param {g.point[]} intersections points where to split the line
+ * @param {number} jumpSize the size of jump arc (length empty spot on a line)
+ * @return {g.line[]} list of lines being split
+ */
+function createJumps(line, intersections, jumpSize) {
+    return intersections.reduce(function(resultLines, point, idx) {
+        // skipping points that were merged with the previous line
+        // to make bigger arc over multiple lines that are close to each other
+        if (point.skip === true) {
+            return resultLines;
+        }
+
+        // always grab the last line from buffer and modify it
+        var lastLine = resultLines.pop() || line;
+
+        // calculate start and end of jump by moving by a given size of jump
+        var jumpStart = g.point(point).move(lastLine.start, -(jumpSize));
+        var jumpEnd = g.point(point).move(lastLine.start, +(jumpSize));
+
+        // now try to look at the next intersection point
+        var nextPoint = intersections[idx + 1];
+        if (nextPoint != null) {
+            var distance = jumpEnd.distance(nextPoint);
+            if (distance <= jumpSize) {
+                // next point is close enough, move the jump end by this
+                // difference and mark the next point to be skipped
+                jumpEnd = nextPoint.move(lastLine.start, distance);
+                nextPoint.skip = true;
+            }
+        } else {
+            // this block is inside of `else` as an optimization so the distance is
+            // not calculated when we know there are no other intersection points
+            var endDistance = jumpStart.distance(lastLine.end);
+            // if the end is too close to possible jump, draw remaining line instead of a jump
+            if (endDistance < jumpSize * 2 + CLOSE_PROXIMITY_PADDING) {
+                resultLines.push(lastLine);
+                return resultLines;
+            }
+        }
+
+        var startDistance = jumpEnd.distance(lastLine.start);
+        if (startDistance < jumpSize * 2 + CLOSE_PROXIMITY_PADDING) {
+            // if the start of line is too close to jump, draw that line instead of a jump
+            resultLines.push(lastLine);
+            return resultLines;
+        }
+
+        // finally create a jump line
+        var jumpLine = g.line(jumpStart, jumpEnd);
+        // it's just simple line but with a `isJump` property
+        jumpLine.isJump = true;
+
+        resultLines.push(
+            g.line(lastLine.start, jumpStart),
+            jumpLine,
+            g.line(jumpEnd, lastLine.end)
+        );
+        return resultLines;
+    }, []);
+}
+
+/**
+ * Assemble `D` attribute of a SVG path by iterating given lines.
+ * @param {g.line[]} lines source lines to use
+ * @param {number} jumpSize the size of jump arc (length empty spot on a line)
+ * @param {number} radius the radius
+ * @return {string}
+ */
+function buildPath(lines, jumpSize, jumpType, radius) {
+
+    var path = new g.Path();
+    var segment;
+
+    // first move to the start of a first line
+    segment = g.Path.createSegment('M', lines[0].start);
+    path.appendSegment(segment);
+
+    // make a paths from lines
+    util.toArray(lines).forEach(function(line, index) {
+
+        if (line.isJump) {
+            var angle, diff;
+
+            var control1, control2;
+
+            if (jumpType === 'arc') { // approximates semicircle with 2 curves
+                angle = -90;
+                // determine rotation of arc based on difference between points
+                diff = line.start.difference(line.end);
+                // make sure the arc always points up (or right)
+                var xAxisRotate = Number((diff.x < 0) || (diff.x === 0 && diff.y < 0));
+                if (xAxisRotate) angle += 180;
+
+                var midpoint = line.midpoint();
+                var centerLine = new g.Line(midpoint, line.end).rotate(midpoint, angle);
+
+                var halfLine;
+
+                // first half
+                halfLine = new g.Line(line.start, midpoint);
+
+                control1 = halfLine.pointAt(2 / 3).rotate(line.start, angle);
+                control2 = centerLine.pointAt(1 / 3).rotate(centerLine.end, -angle);
+
+                segment = g.Path.createSegment('C', control1, control2, centerLine.end);
+                path.appendSegment(segment);
+
+                // second half
+                halfLine = new g.Line(midpoint, line.end);
+
+                control1 = centerLine.pointAt(1 / 3).rotate(centerLine.end, angle);
+                control2 = halfLine.pointAt(1 / 3).rotate(line.end, -angle);
+
+                segment = g.Path.createSegment('C', control1, control2, line.end);
+                path.appendSegment(segment);
+
+            } else if (jumpType === 'gap') {
+                segment = g.Path.createSegment('M', line.end);
+                path.appendSegment(segment);
+
+            } else if (jumpType === 'cubic') { // approximates semicircle with 1 curve
+                angle = line.start.theta(line.end);
+
+                var xOffset = jumpSize * 0.6;
+                var yOffset = jumpSize * 1.35;
+
+                // determine rotation of arc based on difference between points
+                diff = line.start.difference(line.end);
+                // make sure the arc always points up (or right)
+                xAxisRotate = Number((diff.x < 0) || (diff.x === 0 && diff.y < 0));
+                if (xAxisRotate) yOffset *= -1;
+
+                control1 = g.Point(line.start.x + xOffset, line.start.y + yOffset).rotate(line.start, angle);
+                control2 = g.Point(line.end.x - xOffset, line.end.y + yOffset).rotate(line.end, angle);
+
+                segment = g.Path.createSegment('C', control1, control2, line.end);
+                path.appendSegment(segment);
+            }
+
+        } else {
+            var nextLine = lines[index + 1];
+            if (radius == 0 || !nextLine || nextLine.isJump) {
+                segment = g.Path.createSegment('L', line.end);
+                path.appendSegment(segment);
+            } else {
+                buildRoundedSegment(radius, path, line.end, line.start, nextLine.end);
+            }
+        }
+    });
+
+    return path;
+}
+
+function buildRoundedSegment(offset, path, curr, prev, next) {
+    var prevDistance = curr.distance(prev) / 2;
+    var nextDistance = curr.distance(next) / 2;
+
+    var startMove = -Math.min(offset, prevDistance);
+    var endMove = -Math.min(offset, nextDistance);
+
+    var roundedStart = curr.clone().move(prev, startMove).round();
+    var roundedEnd = curr.clone().move(next, endMove).round();
+
+    var control1 = new g.Point((_13 * roundedStart.x) + (_23 * curr.x), (_23 * curr.y) + (_13 * roundedStart.y));
+    var control2 = new g.Point((_13 * roundedEnd.x) + (_23 * curr.x), (_23 * curr.y) + (_13 * roundedEnd.y));
+
+    var segment;
+    segment = g.Path.createSegment('L', roundedStart);
+    path.appendSegment(segment);
+
+    segment = g.Path.createSegment('C', control1, control2, roundedEnd);
+    path.appendSegment(segment);
+}
+
+/**
+ * Actual connector function that will be run on every update.
+ * @param {g.point} sourcePoint start point of this link
+ * @param {g.point} targetPoint end point of this link
+ * @param {g.point[]} route of this link
+ * @param {object} opt options
+ * @property {number} size optional size of a jump arc
+ * @return {string} created `D` attribute of SVG path
+ */
+export const jumpover = function(sourcePoint, targetPoint, route, opt) { // eslint-disable-line max-params
+
+    setupUpdating(this);
+
+    var raw = opt.raw;
+    var jumpSize = opt.size || JUMP_SIZE;
+    var jumpType = opt.jump && ('' + opt.jump).toLowerCase();
+    var radius = opt.radius || RADIUS;
+    var ignoreConnectors = opt.ignoreConnectors || IGNORED_CONNECTORS;
+
+    // grab the first jump type as a default if specified one is invalid
+    if (JUMP_TYPES.indexOf(jumpType) === -1) {
+        jumpType = JUMP_TYPES[0];
+    }
+
+    var paper = this.paper;
+    var graph = paper.model;
+    var allLinks = graph.getLinks();
+
+    // there is just one link, draw it directly
+    if (allLinks.length === 1) {
+        return buildPath(
+            createLines(sourcePoint, targetPoint, route),
+            jumpSize, jumpType, radius
+        );
+    }
+
+    var thisModel = this.model;
+    var thisIndex = allLinks.indexOf(thisModel);
+    var defaultConnector = paper.options.defaultConnector || {};
+
+    // not all links are meant to be jumped over.
+    var links = allLinks.filter(function(link, idx) {
+
+        var connector = link.get('connector') || defaultConnector;
+
+        // avoid jumping over links with connector type listed in `ignored connectors`.
+        if (util.toArray(ignoreConnectors).includes(connector.name)) {
+            return false;
+        }
+        // filter out links that are above this one and  have the same connector type
+        // otherwise there would double hoops for each intersection
+        if (idx > thisIndex) {
+            return connector.name !== 'jumpover';
+        }
+        return true;
+    });
+
+    // find views for all links
+    var linkViews = links.map(function(link) {
+        return paper.findViewByModel(link);
+    });
+
+    // create lines for this link
+    var thisLines = createLines(
+        sourcePoint,
+        targetPoint,
+        route
+    );
+
+    // create lines for all other links
+    var linkLines = linkViews.map(function(linkView) {
+        if (linkView == null) {
+            return [];
+        }
+        if (linkView === this) {
+            return thisLines;
+        }
+        return createLines(
+            linkView.sourcePoint,
+            linkView.targetPoint,
+            linkView.route
+        );
+    }, this);
+
+    // transform lines for this link by splitting with jump lines at
+    // points of intersection with other links
+    var jumpingLines = thisLines.reduce(function(resultLines, thisLine) {
+        // iterate all links and grab the intersections with this line
+        // these are then sorted by distance so the line can be split more easily
+        var intersections = links.reduce(function(res, link, i) {
+            // don't intersection with itself
+            if (link !== thisModel) {
+
+                const linkLinesToTest = linkLines[i].slice();
+                const overlapIndex = linkLinesToTest.findIndex((line) => overlapExists(thisLine, line));
+
+                // Overlap occurs and the end point of one segment lies on thisLine
+                if (overlapIndex > -1 && thisLine.containsPoint(linkLinesToTest[overlapIndex].end)) {
+                    // Remove the next segment because there will never be a jump
+                    linkLinesToTest.splice(overlapIndex + 1, 1);
+                }
+                const lineIntersections = findLineIntersections(thisLine, linkLinesToTest);
+                res.push.apply(res, lineIntersections);
+            }
+            return res;
+        }, []).sort(function(a, b) {
+            return sortPoints(thisLine.start, a) - sortPoints(thisLine.start, b);
+        });
+
+        if (intersections.length > 0) {
+            // split the line based on found intersection points
+            resultLines.push.apply(resultLines, createJumps(thisLine, intersections, jumpSize));
+        } else {
+            // without any intersection the line goes uninterrupted
+            resultLines.push(thisLine);
+        }
+        return resultLines;
+    }, []);
+
+    var path = buildPath(jumpingLines, jumpSize, jumpType, radius);
+    return (raw) ? path : path.serialize();
+};

package/src/connectors/normal.mjs

@@ -0,0 +1,12 @@
+import { straight } from './straight.mjs';
+
+export const normal = function(sourcePoint, targetPoint, route = [], opt = {}) {
+
+    const { raw } = opt;
+    const localOpt = {
+        cornerType: 'point',
+        raw
+    };
+
+    return straight(sourcePoint, targetPoint, route, localOpt);
+};

package/src/connectors/rounded.mjs

@@ -0,0 +1,17 @@
+import { straight } from './straight.mjs';
+
+const CORNER_RADIUS = 10;
+const PRECISION = 0;
+
+export const rounded = function(sourcePoint, targetPoint, route = [], opt = {}) {
+
+    const { radius = CORNER_RADIUS, raw } = opt;
+    const localOpt = {
+        cornerType: 'cubic',
+        cornerRadius: radius,
+        precision: PRECISION,
+        raw
+    };
+
+    return straight(sourcePoint, targetPoint, route, localOpt);
+};

package/src/connectors/smooth.mjs

@@ -0,0 +1,44 @@
+import * as g from '../g/index.mjs';
+
+export const smooth = function(sourcePoint, targetPoint, route, opt) {
+
+    var raw = opt && opt.raw;
+    var path;
+
+    if (route && route.length !== 0) {
+
+        var points = [sourcePoint].concat(route).concat([targetPoint]);
+        var curves = g.Curve.throughPoints(points);
+
+        path = new g.Path(curves);
+
+    } else {
+        // if we have no route, use a default cubic bezier curve
+        // cubic bezier requires two control points
+        // the control points have `x` midway between source and target
+        // this produces an S-like curve
+
+        path = new g.Path();
+
+        var segment;
+
+        segment = g.Path.createSegment('M', sourcePoint);
+        path.appendSegment(segment);
+
+        if ((Math.abs(sourcePoint.x - targetPoint.x)) >= (Math.abs(sourcePoint.y - targetPoint.y))) {
+            var controlPointX = (sourcePoint.x + targetPoint.x) / 2;
+
+            segment = g.Path.createSegment('C', controlPointX, sourcePoint.y, controlPointX, targetPoint.y, targetPoint.x, targetPoint.y);
+            path.appendSegment(segment);
+
+        } else {
+            var controlPointY = (sourcePoint.y + targetPoint.y) / 2;
+
+            segment = g.Path.createSegment('C', sourcePoint.x, controlPointY, targetPoint.x, controlPointY, targetPoint.x, targetPoint.y);
+            path.appendSegment(segment);
+
+        }
+    }
+
+    return (raw) ? path : path.serialize();
+};

package/src/connectors/straight.mjs

@@ -0,0 +1,110 @@
+import * as g from '../g/index.mjs';
+
+const CornerTypes = {
+    POINT: 'point',
+    CUBIC: 'cubic',
+    LINE: 'line',
+    GAP: 'gap'
+};
+
+const DEFINED_CORNER_TYPES = Object.values(CornerTypes);
+
+const CORNER_RADIUS = 10;
+const PRECISION = 1;
+
+export const straight = function(sourcePoint, targetPoint, routePoints = [], opt = {}) {
+
+    const {
+        cornerType = CornerTypes.POINT,
+        cornerRadius = CORNER_RADIUS,
+        cornerPreserveAspectRatio = false,
+        precision = PRECISION,
+        raw = false
+    } = opt;
+
+    if (DEFINED_CORNER_TYPES.indexOf(cornerType) === -1) {
+        // unknown `cornerType` provided => error
+        throw new Error('Invalid `cornerType` provided to `straight` connector.');
+    }
+
+    let path;
+
+    if ((cornerType === CornerTypes.POINT) || !cornerRadius) {
+        // default option => normal connector
+        // simply connect all points with straight lines
+        const points = [sourcePoint].concat(routePoints).concat([targetPoint]);
+        const polyline = new g.Polyline(points);
+        path = new g.Path(polyline);
+
+    } else {
+        // `cornerType` is not unknown and not 'point' (default) => must be one of other valid types
+        path = new g.Path();
+
+        // add initial gap segment = to source point
+        path.appendSegment(g.Path.createSegment('M', sourcePoint));
+
+        let nextDistance;
+        const routePointsLength = routePoints.length;
+        for (let i = 0; i < routePointsLength; i++) {
+
+            const curr = new g.Point(routePoints[i]);
+            const prev = (routePoints[i - 1] || sourcePoint);
+            const next = (routePoints[i + 1] || targetPoint);
+            const prevDistance = (nextDistance || (curr.distance(prev) / 2)); // try to re-use previously-computed `nextDistance`
+            nextDistance = (curr.distance(next) / 2);
+
+            let startMove, endMove;
+            if (!cornerPreserveAspectRatio) {
+                // `startMove` and `endMove` may be different
+                // (this happens when next or previous path point is closer than `2 * cornerRadius`)
+                startMove = -Math.min(cornerRadius, prevDistance);
+                endMove = -Math.min(cornerRadius, nextDistance);
+            } else {
+                // force `startMove` and `endMove` to be the same
+                startMove = endMove = -Math.min(cornerRadius, prevDistance, nextDistance);
+            }
+
+            // to find `cornerStart` and `cornerEnd`, the logic is as follows (using `cornerStart` as example):
+            // - find a point lying on the line `prev - startMove` such that...
+            // - ...the point lies `abs(startMove)` distance away from `curr`...
+            // - ...and its coordinates are rounded to whole numbers
+            const cornerStart = curr.clone().move(prev, startMove).round(precision);
+            const cornerEnd = curr.clone().move(next, endMove).round(precision);
+
+            // add in-between straight segment = from previous route point to corner start point
+            // (may have zero length)
+            path.appendSegment(g.Path.createSegment('L', cornerStart));
+
+            // add corner segment = from corner start point to corner end point
+            switch (cornerType) {
+                case CornerTypes.CUBIC: {
+                    // corner is rounded
+                    const _13 = (1 / 3);
+                    const _23 = (2 / 3);
+                    const control1 = new g.Point((_13 * cornerStart.x) + (_23 * curr.x), (_23 * curr.y) + (_13 * cornerStart.y));
+                    const control2 = new g.Point((_13 * cornerEnd.x) + (_23 * curr.x), (_23 * curr.y) + (_13 * cornerEnd.y));
+                    path.appendSegment(g.Path.createSegment('C', control1, control2, cornerEnd));
+                    break;
+                }
+                case CornerTypes.LINE: {
+                    // corner has bevel
+                    path.appendSegment(g.Path.createSegment('L', cornerEnd));
+                    break;
+                }
+                case CornerTypes.GAP: {
+                    // corner has empty space
+                    path.appendSegment(g.Path.createSegment('M', cornerEnd));
+                    break;
+                }
+                // default: no segment is created
+            }
+        }
+
+        // add final straight segment = from last corner end point to target point
+        // (= or from start point to end point, if there are no route points)
+        // (may have zero length)
+        path.appendSegment(g.Path.createSegment('L', targetPoint));
+    }
+
+    return ((raw) ? path : path.serialize());
+};