@joint/core 4.0.0

package/src/linkTools/Button.mjs

@@ -0,0 +1,121 @@
+import { evalCalcAttribute, isCalcAttribute } from '../dia/attributes/calc.mjs';
+import { ToolView } from '../dia/ToolView.mjs';
+import { getViewBBox } from './helpers.mjs';
+import * as util from '../util/index.mjs';
+import * as g from '../g/index.mjs';
+import V from '../V/index.mjs';
+
+export const Button = ToolView.extend({
+    name: 'button',
+    events: {
+        'mousedown': 'onPointerDown',
+        'touchstart': 'onPointerDown'
+    },
+    options: {
+        distance: 0,
+        offset: 0,
+        scale: null,
+        rotate: false
+    },
+    onRender: function() {
+        this.renderChildren(this.options.markup);
+        this.update();
+    },
+    update: function() {
+        this.position();
+        return this;
+    },
+    position: function() {
+        const { vel } = this;
+        vel.transform(this.getCellMatrix(), { absolute: true });
+    },
+    getCellMatrix() {
+        return this.relatedView.model.isLink() ? this.getLinkMatrix() : this.getElementMatrix();
+    },
+    getElementMatrix() {
+        const { relatedView: view, options } = this;
+        let { x = 0, y = 0, offset = {}, useModelGeometry, rotate, scale } = options;
+        let bbox = getViewBBox(view, useModelGeometry);
+        const angle = view.model.angle();
+        if (!rotate) bbox = bbox.bbox(angle);
+        const { x: offsetX = 0, y: offsetY = 0 } = offset;
+        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));
+        }
+        let matrix = V.createSVGMatrix().translate(bbox.x + bbox.width / 2, bbox.y + bbox.height / 2);
+        if (rotate) matrix = matrix.rotate(angle);
+        matrix = matrix.translate(x + offsetX - bbox.width / 2, y + offsetY - bbox.height / 2);
+        if (scale) matrix = matrix.scale(scale);
+        return matrix;
+    },
+    getLinkMatrix() {
+        const { relatedView: view, options } = this;
+        const { offset = 0, distance = 0, rotate, scale } = options;
+        let tangent, position, angle;
+        if (util.isPercentage(distance)) {
+            tangent = view.getTangentAtRatio(parseFloat(distance) / 100);
+        } else {
+            tangent = view.getTangentAtLength(distance);
+        }
+        if (tangent) {
+            position = tangent.start;
+            angle = tangent.vector().vectorAngle(new g.Point(1, 0)) || 0;
+        } else {
+            position = view.getConnection().start;
+            angle = 0;
+        }
+        let matrix = V.createSVGMatrix()
+            .translate(position.x, position.y)
+            .rotate(angle)
+            .translate(0, offset);
+        if (!rotate) matrix = matrix.rotate(-angle);
+        if (scale) matrix = matrix.scale(scale);
+        return matrix;
+    },
+    onPointerDown: function(evt) {
+        if (this.guard(evt)) return;
+        evt.stopPropagation();
+        evt.preventDefault();
+        var actionFn = this.options.action;
+        if (typeof actionFn === 'function') {
+            actionFn.call(this.relatedView, evt, this.relatedView, this);
+        }
+    }
+});
+
+export const Remove = Button.extend({
+    name: 'remove',
+    children: [{
+        tagName: 'circle',
+        selector: 'button',
+        attributes: {
+            'r': 7,
+            'fill': '#FF1D00',
+            'cursor': 'pointer'
+        }
+    }, {
+        tagName: 'path',
+        selector: 'icon',
+        attributes: {
+            'd': 'M -3 -3 3 3 M -3 3 3 -3',
+            'fill': 'none',
+            'stroke': '#FFFFFF',
+            'stroke-width': 2,
+            'pointer-events': 'none'
+        }
+    }],
+    options: {
+        distance: 60,
+        offset: 0,
+        action: function(evt, view, tool) {
+            view.model.remove({ ui: true, tool: tool.cid });
+        }
+    }
+});

package/src/linkTools/Connect.mjs

@@ -0,0 +1,85 @@
+import { Button } from './Button.mjs';
+import * as util from '../util/index.mjs';
+
+export const Connect = Button.extend({
+    name: 'connect',
+    documentEvents: {
+        mousemove: 'drag',
+        touchmove: 'drag',
+        mouseup: 'dragend',
+        touchend: 'dragend',
+        touchcancel: 'dragend'
+    },
+    children: [{
+        tagName: 'circle',
+        selector: 'button',
+        attributes: {
+            'r': 7,
+            'fill': '#333333',
+            'cursor': 'pointer'
+        }
+    }, {
+        tagName: 'path',
+        selector: 'icon',
+        attributes: {
+            'd': 'M -4 -1 L 0 -1 L 0 -4 L 4 0 L 0 4 0 1 -4 1 z',
+            'fill': '#FFFFFF',
+            'stroke': 'none',
+            'stroke-width': 2,
+            'pointer-events': 'none'
+        }
+    }],
+    options: {
+        distance: 80,
+        offset: 0,
+        magnet: (view) => view.el,
+        action: (evt, _view, tool) => tool.dragstart(evt),
+    },
+    getMagnetNode: function() {
+        const { options, relatedView } = this;
+        const { magnet } = options;
+        let magnetNode;
+        switch (typeof magnet) {
+            case 'function': {
+                magnetNode = magnet.call(this, relatedView, this);
+                break;
+            }
+            case 'string': {
+                magnetNode = relatedView.findNode(magnet);
+                break;
+            }
+            default: {
+                magnetNode = magnet;
+                break;
+            }
+        }
+        if (!magnetNode) magnetNode = relatedView.el;
+        if (magnetNode instanceof SVGElement) return magnetNode;
+        throw new Error('Connect: magnet must be an SVGElement');
+    },
+    dragstart: function(evt) {
+        const { paper, relatedView } = this;
+        const normalizedEvent = util.normalizeEvent(evt);
+        const { x, y } = paper.clientToLocalPoint(normalizedEvent.clientX, normalizedEvent.clientY);
+        relatedView.dragLinkStart(normalizedEvent, this.getMagnetNode(), x, y);
+        paper.undelegateEvents();
+        this.delegateDocumentEvents(null, normalizedEvent.data);
+        this.focus();
+    },
+    drag: function(evt) {
+        const { paper, relatedView } = this;
+        const normalizedEvent = util.normalizeEvent(evt);
+        const { x, y } = paper.snapToGrid(normalizedEvent.clientX, normalizedEvent.clientY);
+        relatedView.dragLink(normalizedEvent, x, y);
+    },
+    dragend: function(evt) {
+        const { paper, relatedView } = this;
+        const normalizedEvent = util.normalizeEvent(evt);
+        const { x, y } = paper.snapToGrid(normalizedEvent.clientX, normalizedEvent.clientY);
+        relatedView.dragLinkEnd(normalizedEvent, x, y);
+        this.undelegateDocumentEvents();
+        paper.delegateEvents();
+        this.blur();
+        relatedView.checkMouseleave(normalizedEvent);
+    }
+});

package/src/linkTools/HoverConnect.mjs

@@ -0,0 +1,161 @@
+import { Connect } from '../linkTools/Connect.mjs';
+import V from '../V/index.mjs';
+import $ from '../mvc/Dom/index.mjs';
+import * as util from '../util/index.mjs';
+import * as g from '../g/index.mjs';
+
+export const HoverConnect = Connect.extend({
+
+    name: 'hover-connect',
+
+    defaultMarkup: [
+        {
+            tagName: 'circle',
+            attributes: {
+                'r': 7,
+                'fill': '#333333',
+                'cursor': 'pointer'
+            }
+        },
+        {
+            tagName: 'path',
+            attributes: {
+                'd': 'M -4 -1 L 0 -1 L 0 -4 L 4 0 L 0 4 0 1 -4 1 z',
+                'fill': '#FFFFFF',
+                'stroke': 'none',
+                'stroke-width': 2
+            }
+        }
+    ],
+
+    children() {
+        const { options, defaultMarkup } = this;
+        return [
+            {
+                tagName: 'path',
+                selector: 'track',
+                attributes: {
+                    'fill': 'none',
+                    'stroke': 'transparent',
+                    'stroke-width': options.trackWidth || 15,
+                    'cursor': 'pointer'
+                }
+            },
+            {
+                tagName: 'g',
+                selector: 'button',
+                attributes: {
+                    'pointer-events': 'none',
+                    'display': 'none'
+                },
+                children: options.markup || defaultMarkup
+            }
+        ];
+    },
+
+    events: Object.assign({
+        mousemove: 'onMousemove',
+        mouseenter: 'onMouseenter',
+        mouseleave: 'onMouseleave'
+    }, Connect.prototype.events),
+
+    onRender: function() {
+        this.renderChildren();
+        this.update();
+    },
+
+    trackPath: null,
+
+    update() {
+        const { childNodes } = this;
+        this.trackPath = this.getTrackPath();
+        Connect.prototype.update.apply(this, arguments);
+        childNodes.track.setAttribute(
+            'd',
+            this.trackPath.serialize()
+        );
+    },
+
+    position() {
+        const { el, childNodes } = this;
+        childNodes.button.setAttribute(
+            'transform',
+            V.matrixToTransformString(this.getButtonMatrix())
+        );
+        el.setAttribute(
+            'transform',
+            V.matrixToTransformString(this.getTrackMatrix())
+        );
+    },
+
+    getButtonMatrix() {
+        const { options, trackPath } = this;
+        const { offset = 0, distance = 0, rotate, scale } = options;
+        let tangent, position, angle;
+        if (util.isPercentage(distance)) {
+            tangent = trackPath.tangentAtRatio(parseFloat(distance) / 100);
+        } else {
+            tangent = trackPath.tangentAtLength(distance);
+        }
+        if (tangent) {
+            position = tangent.start;
+            angle = tangent.vector().vectorAngle(new g.Point(1, 0)) || 0;
+        } else {
+            position = trackPath.start;
+            angle = 0;
+        }
+        let matrix = V.createSVGMatrix()
+            .translate(position.x, position.y)
+            .rotate(angle)
+            .translate(0, offset);
+        if (!rotate) matrix = matrix.rotate(-angle);
+        if (scale) matrix = matrix.scale(scale);
+        return matrix;
+    },
+
+    getTrackPath() {
+        return this.relatedView.getConnection();
+    },
+
+    getTrackMatrix() {
+        return V.createSVGMatrix();
+    },
+
+    getTrackRatioFromEvent(evt) {
+        const { relatedView, trackPath } = this;
+        const localPoint = relatedView.paper.clientToLocalPoint(evt.clientX, evt.clientY);
+        const trackPoint = V.transformPoint(localPoint, this.getTrackMatrix().inverse());
+        return trackPath.closestPointLength(trackPoint);
+    },
+
+    canShowButton() {
+        // Has been the paper events undelegated? If so, we can't show the button.
+        // TODO: add a method to the paper to check if the events are delegated.
+        return $.event.has(this.paper.el);
+    },
+
+    showButton() {
+        this.childNodes.button.style.display = 'block';
+    },
+
+    hideButton() {
+        this.childNodes.button.style.display = '';
+    },
+
+    onMousemove(evt) {
+        const { trackPath } = this;
+        if (!trackPath) return;
+        const { options } = this;
+        options.distance = this.getTrackRatioFromEvent(evt);
+        this.position();
+    },
+
+    onMouseenter() {
+        if (!this.canShowButton()) return;
+        this.showButton();
+    },
+
+    onMouseleave() {
+        this.hideButton();
+    }
+});