@joint/core 4.0.0

package/src/anchors/index.mjs

@@ -0,0 +1,123 @@
+import * as util from '../util/index.mjs';
+import { toRad } from '../g/index.mjs';
+import { resolveRef } from '../linkAnchors/index.mjs';
+
+function bboxWrapper(method) {
+
+    return function(view, magnet, ref, opt) {
+
+        var rotate = !!opt.rotate;
+        var bbox = (rotate) ? view.getNodeUnrotatedBBox(magnet) : view.getNodeBBox(magnet);
+        var anchor = bbox[method]();
+
+        var dx = opt.dx;
+        if (dx) {
+            var dxPercentage = util.isPercentage(dx);
+            dx = parseFloat(dx);
+            if (isFinite(dx)) {
+                if (dxPercentage) {
+                    dx /= 100;
+                    dx *= bbox.width;
+                }
+                anchor.x += dx;
+            }
+        }
+
+        var dy = opt.dy;
+        if (dy) {
+            var dyPercentage = util.isPercentage(dy);
+            dy = parseFloat(dy);
+            if (isFinite(dy)) {
+                if (dyPercentage) {
+                    dy /= 100;
+                    dy *= bbox.height;
+                }
+                anchor.y += dy;
+            }
+        }
+
+        return (rotate) ? anchor.rotate(view.model.getBBox().center(), -view.model.angle()) : anchor;
+    };
+}
+
+function _perpendicular(view, magnet, refPoint, opt) {
+
+    var angle = view.model.angle();
+    var bbox = view.getNodeBBox(magnet);
+    var anchor = bbox.center();
+    var topLeft = bbox.origin();
+    var bottomRight = bbox.corner();
+
+    var padding = opt.padding;
+    if (!isFinite(padding)) padding = 0;
+
+    if ((topLeft.y + padding) <= refPoint.y && refPoint.y <= (bottomRight.y - padding)) {
+        var dy = (refPoint.y - anchor.y);
+        anchor.x += (angle === 0 || angle === 180) ? 0 : dy * 1 / Math.tan(toRad(angle));
+        anchor.y += dy;
+    } else if ((topLeft.x + padding) <= refPoint.x && refPoint.x <= (bottomRight.x - padding)) {
+        var dx = (refPoint.x - anchor.x);
+        anchor.y += (angle === 90 || angle === 270) ? 0 : dx * Math.tan(toRad(angle));
+        anchor.x += dx;
+    }
+
+    return anchor;
+}
+
+function _midSide(view, magnet, refPoint, opt) {
+
+    var rotate = !!opt.rotate;
+    var bbox, angle, center;
+    if (rotate) {
+        bbox = view.getNodeUnrotatedBBox(magnet);
+        center = view.model.getBBox().center();
+        angle = view.model.angle();
+    } else {
+        bbox = view.getNodeBBox(magnet);
+    }
+
+    var padding = opt.padding;
+    if (isFinite(padding)) bbox.inflate(padding);
+
+    if (rotate) refPoint.rotate(center, angle);
+
+    var side = bbox.sideNearestToPoint(refPoint);
+    var anchor;
+    switch (side) {
+        case 'left':
+            anchor = bbox.leftMiddle();
+            break;
+        case 'right':
+            anchor = bbox.rightMiddle();
+            break;
+        case 'top':
+            anchor = bbox.topMiddle();
+            break;
+        case 'bottom':
+            anchor = bbox.bottomMiddle();
+            break;
+    }
+
+    return (rotate) ? anchor.rotate(center, -angle) : anchor;
+}
+
+// Can find anchor from model, when there is no selector or the link end
+// is connected to a port
+function _modelCenter(view, _magnet, _refPoint, opt, endType) {
+    return view.model.getPointFromConnectedLink(this.model, endType).offset(opt.dx, opt.dy);
+}
+
+//joint.anchors
+export const center = bboxWrapper('center');
+export const top = bboxWrapper('topMiddle');
+export const bottom = bboxWrapper('bottomMiddle');
+export const left = bboxWrapper('leftMiddle');
+export const right = bboxWrapper('rightMiddle');
+export const topLeft = bboxWrapper('origin');
+export const topRight = bboxWrapper('topRight');
+export const bottomLeft = bboxWrapper('bottomLeft');
+export const bottomRight = bboxWrapper('corner');
+export const perpendicular = resolveRef(_perpendicular);
+export const midSide = resolveRef(_midSide);
+export const modelCenter = _modelCenter;
+

package/src/config/index.mjs

@@ -0,0 +1,12 @@
+export const config = {
+    // When set to `true` the cell selectors could be defined as CSS selectors.
+    // If not, only JSON Markup selectors are taken into account.
+    useCSSSelectors: false,
+    // The class name prefix config is for advanced use only.
+    // Be aware that if you change the prefix, the JointJS CSS will no longer function properly.
+    classNamePrefix: 'joint-',
+    defaultTheme: 'default',
+    // The maximum delay required for two consecutive touchend events to be interpreted
+    // as a double-tap.
+    doubleTapInterval: 300
+};

package/src/connectionPoints/index.mjs

@@ -0,0 +1,202 @@
+import * as g from '../g/index.mjs';
+import V from '../V/index.mjs';
+import * as util from '../util/index.mjs';
+
+function offsetPoint(p1, p2, offset) {
+    if (util.isPlainObject(offset)) {
+        const { x, y } = offset;
+        if (isFinite(y)) {
+            const line =  new g.Line(p2, p1);
+            const { start, end } = line.parallel(y);
+            p2 = start;
+            p1 = end;
+        }
+        offset = x;
+    }
+    if (!isFinite(offset)) return p1;
+    var length = p1.distance(p2);
+    if (offset === 0 && length > 0) return p1;
+    return p1.move(p2, -Math.min(offset, length - 1));
+}
+
+function stroke(magnet) {
+
+    var stroke = magnet.getAttribute('stroke-width');
+    if (stroke === null) return 0;
+    return parseFloat(stroke) || 0;
+}
+
+function alignLine(line, type, offset = 0) {
+    let coordinate, a, b, direction;
+    const { start, end } = line;
+    switch (type) {
+        case 'left':
+            coordinate = 'x';
+            a = end;
+            b = start;
+            direction = -1;
+            break;
+        case 'right':
+            coordinate = 'x';
+            a = start;
+            b = end;
+            direction = 1;
+            break;
+        case 'top':
+            coordinate = 'y';
+            a = end;
+            b = start;
+            direction = -1;
+            break;
+        case 'bottom':
+            coordinate = 'y';
+            a = start;
+            b = end;
+            direction = 1;
+            break;
+        default:
+            return;
+    }
+    if (start[coordinate] < end[coordinate]) {
+        a[coordinate] = b[coordinate];
+    } else {
+        b[coordinate] = a[coordinate];
+    }
+    if (isFinite(offset)) {
+        a[coordinate] += direction * offset;
+        b[coordinate] += direction * offset;
+    }
+}
+
+// Connection Points
+
+function anchorConnectionPoint(line, _view, _magnet, opt) {
+    let { offset, alignOffset, align } = opt;
+    if (align) alignLine(line, align, alignOffset);
+    return offsetPoint(line.end, line.start, offset);
+}
+
+function bboxIntersection(line, view, magnet, opt) {
+
+    var bbox = view.getNodeBBox(magnet);
+    if (opt.stroke) bbox.inflate(stroke(magnet) / 2);
+    var intersections = line.intersect(bbox);
+    var cp = (intersections)
+        ? line.start.chooseClosest(intersections)
+        : line.end;
+    return offsetPoint(cp, line.start, opt.offset);
+}
+
+function rectangleIntersection(line, view, magnet, opt) {
+
+    var angle = view.model.angle();
+    if (angle === 0) {
+        return bboxIntersection(line, view, magnet, opt);
+    }
+
+    var bboxWORotation = view.getNodeUnrotatedBBox(magnet);
+    if (opt.stroke) bboxWORotation.inflate(stroke(magnet) / 2);
+    var center = bboxWORotation.center();
+    var lineWORotation = line.clone().rotate(center, angle);
+    var intersections = lineWORotation.setLength(1e6).intersect(bboxWORotation);
+    var cp = (intersections)
+        ? lineWORotation.start.chooseClosest(intersections).rotate(center, -angle)
+        : line.end;
+    return offsetPoint(cp, line.start, opt.offset);
+}
+
+function findShapeNode(magnet) {
+    if (!magnet) return null;
+    var node = magnet;
+    do {
+        var tagName = node.tagName;
+        if (typeof tagName !== 'string') return null;
+        tagName = tagName.toUpperCase();
+        if (tagName === 'G') {
+            node = node.firstElementChild;
+        } else if (tagName === 'TITLE') {
+            node = node.nextElementSibling;
+        } else break;
+    } while (node);
+    return node;
+}
+
+var BNDR_SUBDIVISIONS = 'segmentSubdivisons';
+var BNDR_SHAPE_BBOX = 'shapeBBox';
+
+function boundaryIntersection(line, view, magnet, opt) {
+
+    var node, intersection;
+    var selector = opt.selector;
+    var anchor = line.end;
+
+    if (typeof selector === 'string') {
+        node = view.findNode(selector);
+    } else if (selector === false) {
+        node = magnet;
+    } else if (Array.isArray(selector)) {
+        node = util.getByPath(magnet, selector);
+    } else {
+        node = findShapeNode(magnet);
+    }
+
+    if (!V.isSVGGraphicsElement(node)) {
+        if (node === magnet || !V.isSVGGraphicsElement(magnet)) return anchor;
+        node = magnet;
+    }
+
+    var localShape = view.getNodeShape(node);
+    var magnetMatrix = view.getNodeMatrix(node);
+    var translateMatrix = view.getRootTranslateMatrix();
+    var rotateMatrix = view.getRootRotateMatrix();
+    var targetMatrix = translateMatrix.multiply(rotateMatrix).multiply(magnetMatrix);
+    var localMatrix = targetMatrix.inverse();
+    var localLine = V.transformLine(line, localMatrix);
+    var localRef = localLine.start.clone();
+    var data = view.getNodeData(node);
+
+    if (opt.insideout === false) {
+        if (!data[BNDR_SHAPE_BBOX]) data[BNDR_SHAPE_BBOX] = localShape.bbox();
+        var localBBox = data[BNDR_SHAPE_BBOX];
+        if (localBBox.containsPoint(localRef)) return anchor;
+    }
+
+    // Caching segment subdivisions for paths
+    var pathOpt;
+    if (localShape instanceof g.Path) {
+        var precision = opt.precision || 2;
+        if (!data[BNDR_SUBDIVISIONS]) data[BNDR_SUBDIVISIONS] = localShape.getSegmentSubdivisions({ precision: precision });
+        pathOpt = {
+            precision: precision,
+            segmentSubdivisions: data[BNDR_SUBDIVISIONS]
+        };
+    }
+
+    if (opt.extrapolate === true) localLine.setLength(1e6);
+
+    intersection = localLine.intersect(localShape, pathOpt);
+    if (intersection) {
+        // More than one intersection
+        if (V.isArray(intersection)) intersection = localRef.chooseClosest(intersection);
+    } else if (opt.sticky === true) {
+        // No intersection, find the closest point instead
+        if (localShape instanceof g.Rect) {
+            intersection = localShape.pointNearestToPoint(localRef);
+        } else if (localShape instanceof g.Ellipse) {
+            intersection = localShape.intersectionWithLineFromCenterToPoint(localRef);
+        } else {
+            intersection = localShape.closestPoint(localRef, pathOpt);
+        }
+    }
+
+    var cp = (intersection) ? V.transformPoint(intersection, targetMatrix) : anchor;
+    var cpOffset = opt.offset || 0;
+    if (opt.stroke) cpOffset += stroke(node) / 2;
+
+    return offsetPoint(cp, line.start, cpOffset);
+}
+
+export const anchor = anchorConnectionPoint;
+export const bbox = bboxIntersection;
+export const rectangle = rectangleIntersection;
+export const boundary = boundaryIntersection;

package/src/connectionStrategies/index.mjs

@@ -0,0 +1,73 @@
+import * as util from '../util/index.mjs';
+
+function abs2rel(absolute, max) {
+
+    if (max === 0) return '0%';
+    // round to 3 decimal places
+    const dp = 1000;
+    const relative = Math.round(absolute / max * 100 * dp) / dp;
+    return `${relative}%`;
+}
+
+function pin(relative) {
+
+    return function(end, view, magnet, coords) {
+        var fn = (view.isNodeConnection(magnet)) ? pinnedLinkEnd : pinnedElementEnd;
+        return fn(relative, end, view, magnet, coords);
+    };
+}
+
+function pinnedElementEnd(relative, end, view, magnet, coords) {
+
+    var angle = view.model.angle();
+    var bbox = view.getNodeUnrotatedBBox(magnet);
+    var origin = view.model.getBBox().center();
+    coords.rotate(origin, angle);
+    var dx = coords.x - bbox.x;
+    var dy = coords.y - bbox.y;
+
+    if (relative) {
+        dx = abs2rel(dx, bbox.width);
+        dy = abs2rel(dy, bbox.height);
+    }
+
+    end.anchor = {
+        name: 'topLeft',
+        args: {
+            dx: dx,
+            dy: dy,
+            rotate: true
+        }
+    };
+
+    return end;
+}
+
+function pinnedLinkEnd(relative, end, view, _magnet, coords) {
+
+    var connection = view.getConnection();
+    if (!connection) return end;
+    var length = connection.closestPointLength(coords);
+    if (relative) {
+        var totalLength = connection.length();
+        end.anchor = {
+            name: 'connectionRatio',
+            args: {
+                ratio: length / totalLength
+            }
+        };
+    } else {
+        end.anchor = {
+            name: 'connectionLength',
+            args: {
+                length: length
+            }
+        };
+    }
+    return end;
+}
+
+export const useDefaults = util.noop;
+export const pinAbsolute = pin(false);
+export const pinRelative = pin(true);
+