@joint/core 4.0.0

package/src/elementTools/Control.mjs

@@ -0,0 +1,153 @@
+import { ToolView } from '../dia/ToolView.mjs';
+import * as util from '../util/index.mjs';
+
+export const Control = ToolView.extend({
+    tagName: 'g',
+    children: [{
+        tagName: 'circle',
+        selector: 'handle',
+        attributes: {
+            'cursor': 'pointer',
+            'stroke-width': 2,
+            'stroke': '#FFFFFF',
+            'fill': '#33334F',
+            'r': 6
+        }
+    }, {
+        tagName: 'rect',
+        selector: 'extras',
+        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: {
+        handleAttributes: null,
+        selector: 'root',
+        padding: 6,
+        scale: null
+    },
+
+    getPosition: function() {
+        // To be overridden
+    },
+    setPosition: function() {
+        // To be overridden
+    },
+    resetPosition: function() {
+        // To be overridden
+    },
+    onRender: function() {
+        this.renderChildren();
+        this.toggleExtras(false);
+        this.update();
+    },
+    update: function() {
+        const { handle, extras } = this.childNodes;
+        if (handle) {
+            this.updateHandle(handle);
+        } else {
+            throw new Error('Control: markup selector `handle` is required');
+        }
+        if (extras) {
+            this.updateExtras(extras);
+        }
+        return this;
+    },
+    updateHandle: function(handleNode) {
+        const { relatedView, options } = this;
+        const { model } = relatedView;
+        const relativePos = this.getPosition(relatedView, this);
+        const absolutePos = model.getAbsolutePointFromRelative(relativePos);
+        const { handleAttributes, scale } = options;
+        let transformString =  `translate(${absolutePos.x},${absolutePos.y})`;
+        if (scale) {
+            transformString += ` scale(${scale})`;
+        }
+        handleNode.setAttribute('transform', transformString);
+        if (handleAttributes) {
+            for (let attrName in handleAttributes) {
+                handleNode.setAttribute(attrName, handleAttributes[attrName]);
+            }
+        }
+    },
+    updateExtras: function(extrasNode) {
+        const { relatedView, options } = this;
+        const { selector } = this.options;
+        if (!selector) {
+            this.toggleExtras(false);
+            return;
+        }
+        const magnet = relatedView.findNode(selector);
+        if (!magnet) throw new Error('Control: invalid selector.');
+        let padding = options.padding;
+        if (!isFinite(padding)) padding = 0;
+        const bbox = relatedView.getNodeUnrotatedBBox(magnet);
+        const model = relatedView.model;
+        const angle = model.angle();
+        const center = bbox.center();
+        if (angle) center.rotate(model.getBBox().center(), -angle);
+        bbox.inflate(padding);
+        extrasNode.setAttribute('x', -bbox.width / 2);
+        extrasNode.setAttribute('y', -bbox.height / 2);
+        extrasNode.setAttribute('width', bbox.width);
+        extrasNode.setAttribute('height', bbox.height);
+        extrasNode.setAttribute('transform', `translate(${center.x},${center.y}) rotate(${angle})`);
+    },
+    toggleExtras: function(visible) {
+        const { extras } = this.childNodes;
+        if (!extras) return;
+        extras.style.display = (visible) ? '' : 'none';
+    },
+    onPointerDown: function(evt) {
+        const { relatedView, paper } = this;
+        if (this.guard(evt)) return;
+        evt.stopPropagation();
+        evt.preventDefault();
+        paper.undelegateEvents();
+        this.delegateDocumentEvents();
+        this.focus();
+        this.toggleExtras(true);
+        relatedView.model.startBatch('control-move', { ui: true, tool: this.cid });
+    },
+    onPointerMove: function(evt) {
+        const { relatedView, paper } = this;
+        const { model } = relatedView;
+        const { clientX, clientY } = util.normalizeEvent(evt);
+        const coords = paper.clientToLocalPoint(clientX, clientY);
+        const relativeCoords = model.getRelativePointFromAbsolute(coords);
+        this.setPosition(relatedView, relativeCoords, this);
+        this.update();
+    },
+    onPointerUp: function(_evt) {
+        const { relatedView, paper } = this;
+        paper.delegateEvents();
+        this.undelegateDocumentEvents();
+        this.blur();
+        this.toggleExtras(false);
+        relatedView.model.stopBatch('control-move', { ui: true, tool: this.cid });
+    },
+    onPointerDblClick: function() {
+        const { relatedView } = this;
+        this.resetPosition(relatedView, this);
+        this.update();
+    }
+
+});

package/src/elementTools/HoverConnect.mjs

@@ -0,0 +1,37 @@
+import { HoverConnect as LinkHoverConnect } from '../linkTools/HoverConnect.mjs';
+import V from '../V/index.mjs';
+import * as g from '../g/index.mjs';
+import { getViewBBox } from '../linkTools/helpers.mjs';
+import { isCalcAttribute, evalCalcAttribute } from '../dia/attributes/calc.mjs';
+
+export const HoverConnect = LinkHoverConnect.extend({
+
+    getTrackPath() {
+        const { relatedView: view, options } = this;
+        let {
+            useModelGeometry,
+            trackPath =  'M 0 0 H calc(w) V calc(h) H 0 Z'
+        } = options;
+        if (typeof trackPath === 'function') {
+            trackPath = trackPath.call(this, view);
+        }
+        if (isCalcAttribute(trackPath)) {
+            const bbox = getViewBBox(view, useModelGeometry);
+            trackPath = evalCalcAttribute(trackPath, bbox);
+        }
+        return new g.Path(V.normalizePathData(trackPath));
+    },
+
+    getTrackMatrix() {
+        const { relatedView: view, options } = this;
+        let { useModelGeometry, rotate } = options;
+        let bbox = getViewBBox(view, useModelGeometry);
+        const angle = view.model.angle();
+        if (!rotate) bbox = bbox.bbox(angle);
+        let matrix = V.createSVGMatrix().translate(bbox.x + bbox.width / 2, bbox.y + bbox.height / 2);
+        if (rotate) matrix = matrix.rotate(angle);
+        matrix = matrix.translate(- bbox.width / 2, - bbox.height / 2);
+        return matrix;
+    }
+
+});

package/src/elementTools/index.mjs

@@ -0,0 +1,5 @@
+export * from './Control.mjs';
+export { Button, Remove } from '../linkTools/Button.mjs';
+export { Connect } from '../linkTools/Connect.mjs';
+export { Boundary } from '../linkTools/Boundary.mjs';
+export { HoverConnect } from './HoverConnect.mjs';

package/src/env/index.mjs

@@ -0,0 +1,43 @@
+export const env = {
+
+    _results: {},
+
+    _tests: {
+
+        svgforeignobject: function() {
+            return !!document.createElementNS &&
+                /SVGForeignObject/.test(({}).toString.call(document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')));
+        }
+    },
+
+    addTest: function(name, fn) {
+
+        return this._tests[name] = fn;
+    },
+
+    test: function(name) {
+
+        var fn = this._tests[name];
+
+        if (!fn) {
+            throw new Error('Test not defined ("' + name + '"). Use `joint.env.addTest(name, fn) to add a new test.`');
+        }
+
+        var result = this._results[name];
+
+        if (typeof result !== 'undefined') {
+            return result;
+        }
+
+        try {
+            result = fn();
+        } catch (error) {
+            result = false;
+        }
+
+        // Cache the test result.
+        this._results[name] = result;
+
+        return result;
+    }
+};

package/src/g/bezier.mjs

@@ -0,0 +1,175 @@
+import { Path } from './path.mjs';
+import { Curve } from './curve.mjs';
+import { Point } from './point.mjs';
+
+export const bezier = {
+
+    // Cubic Bezier curve path through points.
+    // @deprecated
+    // @param {array} points Array of points through which the smooth line will go.
+    // @return {array} SVG Path commands as an array
+    curveThroughPoints: function(points) {
+
+        console.warn('deprecated');
+
+        return new Path(Curve.throughPoints(points)).serialize();
+    },
+
+    // Get open-ended Bezier Spline Control Points.
+    // @deprecated
+    // @param knots Input Knot Bezier spline points (At least two points!).
+    // @param firstControlPoints Output First Control points. Array of knots.length - 1 length.
+    // @param secondControlPoints Output Second Control points. Array of knots.length - 1 length.
+    getCurveControlPoints: function(knots) {
+
+        console.warn('deprecated');
+
+        var firstControlPoints = [];
+        var secondControlPoints = [];
+        var n = knots.length - 1;
+        var i;
+
+        // Special case: Bezier curve should be a straight line.
+        if (n == 1) {
+            // 3P1 = 2P0 + P3
+            firstControlPoints[0] = new Point(
+                (2 * knots[0].x + knots[1].x) / 3,
+                (2 * knots[0].y + knots[1].y) / 3
+            );
+
+            // P2 = 2P1 – P0
+            secondControlPoints[0] = new Point(
+                2 * firstControlPoints[0].x - knots[0].x,
+                2 * firstControlPoints[0].y - knots[0].y
+            );
+
+            return [firstControlPoints, secondControlPoints];
+        }
+
+        // Calculate first Bezier control points.
+        // Right hand side vector.
+        var rhs = [];
+
+        // Set right hand side X values.
+        for (i = 1; i < n - 1; i++) {
+            rhs[i] = 4 * knots[i].x + 2 * knots[i + 1].x;
+        }
+
+        rhs[0] = knots[0].x + 2 * knots[1].x;
+        rhs[n - 1] = (8 * knots[n - 1].x + knots[n].x) / 2.0;
+
+        // Get first control points X-values.
+        var x = this.getFirstControlPoints(rhs);
+
+        // Set right hand side Y values.
+        for (i = 1; i < n - 1; ++i) {
+            rhs[i] = 4 * knots[i].y + 2 * knots[i + 1].y;
+        }
+
+        rhs[0] = knots[0].y + 2 * knots[1].y;
+        rhs[n - 1] = (8 * knots[n - 1].y + knots[n].y) / 2.0;
+
+        // Get first control points Y-values.
+        var y = this.getFirstControlPoints(rhs);
+
+        // Fill output arrays.
+        for (i = 0; i < n; i++) {
+            // First control point.
+            firstControlPoints.push(new Point(x[i], y[i]));
+
+            // Second control point.
+            if (i < n - 1) {
+                secondControlPoints.push(new Point(
+                    2 * knots [i + 1].x - x[i + 1],
+                    2 * knots[i + 1].y - y[i + 1]
+                ));
+
+            } else {
+                secondControlPoints.push(new Point(
+                    (knots[n].x + x[n - 1]) / 2,
+                    (knots[n].y + y[n - 1]) / 2)
+                );
+            }
+        }
+
+        return [firstControlPoints, secondControlPoints];
+    },
+
+    // Divide a Bezier curve into two at point defined by value 't' <0,1>.
+    // Using deCasteljau algorithm. http://math.stackexchange.com/a/317867
+    // @deprecated
+    // @param control points (start, control start, control end, end)
+    // @return a function that accepts t and returns 2 curves.
+    getCurveDivider: function(p0, p1, p2, p3) {
+
+        console.warn('deprecated');
+
+        var curve = new Curve(p0, p1, p2, p3);
+
+        return function divideCurve(t) {
+
+            var divided = curve.divide(t);
+
+            return [{
+                p0: divided[0].start,
+                p1: divided[0].controlPoint1,
+                p2: divided[0].controlPoint2,
+                p3: divided[0].end
+            }, {
+                p0: divided[1].start,
+                p1: divided[1].controlPoint1,
+                p2: divided[1].controlPoint2,
+                p3: divided[1].end
+            }];
+        };
+    },
+
+    // Solves a tridiagonal system for one of coordinates (x or y) of first Bezier control points.
+    // @deprecated
+    // @param rhs Right hand side vector.
+    // @return Solution vector.
+    getFirstControlPoints: function(rhs) {
+
+        console.warn('deprecated');
+
+        var n = rhs.length;
+        // `x` is a solution vector.
+        var x = [];
+        var tmp = [];
+        var b = 2.0;
+
+        x[0] = rhs[0] / b;
+
+        // Decomposition and forward substitution.
+        for (var i = 1; i < n; i++) {
+            tmp[i] = 1 / b;
+            b = (i < n - 1 ? 4.0 : 3.5) - tmp[i];
+            x[i] = (rhs[i] - x[i - 1]) / b;
+        }
+
+        for (i = 1; i < n; i++) {
+            // Backsubstitution.
+            x[n - i - 1] -= tmp[n - i] * x[n - i];
+        }
+
+        return x;
+    },
+
+    // Solves an inversion problem -- Given the (x, y) coordinates of a point which lies on
+    // a parametric curve x = x(t)/w(t), y = y(t)/w(t), find the parameter value t
+    // which corresponds to that point.
+    // @deprecated
+    // @param control points (start, control start, control end, end)
+    // @return a function that accepts a point and returns t.
+    getInversionSolver: function(p0, p1, p2, p3) {
+
+        console.warn('deprecated');
+
+        var curve = new Curve(p0, p1, p2, p3);
+
+        return function solveInversion(p) {
+
+            return curve.closestPointT(p);
+        };
+    }
+};