@joint/core 4.0.4 → 4.1.0-beta.1

package/src/linkTools/RotateLabel.mjs

@@ -0,0 +1,110 @@
+import * as g from '../g/index.mjs';
+import { Control } from '../cellTools/Control.mjs';
+
+export const RotateLabel = Control.extend({
+
+    xAxisVector: new g.Point(1, 0),
+
+    children() {
+        const {
+            buttonColor = '#333',
+            iconColor = '#fff',
+            outlineColor = '#fff'
+        } = this.options;
+        return [{
+            selector: 'handle',
+            tagName: 'g',
+            attributes: {
+                cursor: 'grab',
+            },
+            children: [{
+                tagName: 'circle',
+                attributes: {
+                    r: 10,
+                    fill: buttonColor,
+                    stroke: outlineColor,
+                },
+            }, {
+                tagName: 'path',
+                attributes: {
+                    d: 'M -5 0 A 5 5 0 1 1 0 5',
+                    fill: 'transparent',
+                    stroke: iconColor,
+                    strokeWidth: 2,
+                    strokeLinecap: 'round',
+                },
+            }, {
+                tagName: 'path',
+                attributes: {
+                    d: 'M -3 5 L 0 2.5 0 7.5 Z',
+                    fill: iconColor,
+                    stroke: iconColor,
+                    strokeWidth: 1,
+                    transform: 'rotate(-5, -3, 5)',
+                }
+            }]
+        }];
+    },
+
+    getPosition(view) {
+        const { offset = 0 } = this.options;
+        const { x = 0, y = 0 } = typeof offset === 'number' ? { x: 0, y: offset } : offset;
+        const label = this.getLabel();
+        const labelPosition = this.getLabelPosition(label);
+        const coords = view.getLabelCoordinates(labelPosition);
+        let { angle = 0, args = {}} = labelPosition;
+        const keepGradient = args.keepGradient;
+        if (keepGradient) {
+            const tangent = view.getTangentAtRatio(
+                view.getClosestPointRatio(coords)
+            );
+            if (tangent) {
+                // link slope angle
+                angle += tangent.vector().vectorAngle(this.xAxisVector) || 0;
+            }
+        }
+        const matrix = new DOMMatrix()
+            .translate(coords.x, coords.y)
+            .rotate(angle)
+            .translate(x, y);
+        return new g.Point(matrix.e, matrix.f);
+    },
+
+    // Override the default `computeVisibility` method to hide the tool if the label is not present.
+    computeVisibility() {
+        const visibility = Control.prototype.computeVisibility.apply(this, arguments);
+        return visibility && !!this.getLabel();
+    },
+
+    setPosition(view, coordinates) {
+        const model = view.model;
+        const label = this.getLabel();
+        if (!label) return;
+        const labelPosition = this.getLabelPosition(label);
+        const position = view.getLabelCoordinates(labelPosition);
+        const angle = 90 - position.theta(coordinates);
+        const index = this.getLabelIndex();
+        model.prop(['labels', index, 'position', 'angle'], angle);
+    },
+
+    resetPosition(view) {
+        const model = view.model;
+        const index = this.getLabelIndex();
+        model.prop(['labels', index, 'position', 'angle'], 0);
+    },
+
+    getLabelIndex() {
+        return this.options.labelIndex || 0;
+    },
+
+    getLabel() {
+        return this.relatedView.model.label(this.getLabelIndex()) || null;
+    },
+
+    getLabelPosition(label) {
+        const view = this.relatedView;
+        const labelPosition = view._normalizeLabelPosition(label.position);
+        return view._mergeLabelPositionProperty(labelPosition, view._getDefaultLabelPositionProperty());
+    },
+
+});

package/src/linkTools/Segments.mjs

@@ -3,7 +3,7 @@ import V from '../V/index.mjs';
 import * as util from '../util/index.mjs';
 import * as mvc from '../mvc/index.mjs';
 import { ToolView } from '../dia/ToolView.mjs';
-import { getAnchor } from './helpers.mjs';
+import { getAnchor } from '../cellTools/helpers.mjs';
 
 var SegmentHandle = mvc.View.extend({
     tagName: 'g',

package/src/linkTools/Vertices.mjs

@@ -65,6 +65,8 @@ export const Vertices = ToolView.extend({
         snapRadius: 20,
         redundancyRemoval: true,
         vertexAdding: true,
+        // vertexRemoving: true,
+        // vertexMoving: true,
         stopPropagation: true,
         scale: null
     },
@@ -80,19 +82,48 @@ export const Vertices = ToolView.extend({
         }
     }],
     handles: null,
+    interactiveLinkNode: null,
     events: {
         'mousedown .joint-vertices-path': 'onPathPointerDown',
         'touchstart .joint-vertices-path': 'onPathPointerDown'
     },
+    linkEvents: {
+        mousedown: 'onLinkPointerDown',
+        touchstart: 'onLinkPointerDown'
+    },
     onRender: function() {
-        if (this.options.vertexAdding) {
-            this.renderChildren();
-            this.updatePath();
+        const { vertexAdding } = this.options;
+        if (vertexAdding) {
+            const { interactiveLinkNode = null } = vertexAdding;
+            if (interactiveLinkNode) {
+                this.delegateLinkEvents(interactiveLinkNode);
+            } else {
+                this.renderChildren();
+                this.updatePath();
+            }
         }
         this.resetHandles();
         this.renderHandles();
         return this;
     },
+    delegateLinkEvents: function(selector) {
+        this.undelegateLinkEvents();
+        const el = this.relatedView.findNode(selector);
+        if (!el) {
+            console.warn(`Interactive link node "${selector}" not found.`);
+            return;
+        }
+        el.classList.add('joint-vertices-path');
+        this.interactiveLinkNode = el;
+        this.delegateElementEvents(el, this.linkEvents);
+    },
+    undelegateLinkEvents: function() {
+        const el = this.interactiveLinkNode;
+        if (!el) return;
+        this.undelegateElementEvents(el);
+        el.classList.remove('joint-vertices-path');
+        this.interactiveLinkNode = null;
+    },
     update: function() {
         var relatedView = this.relatedView;
         var vertices = relatedView.model.vertices();
@@ -146,7 +177,8 @@ export const Vertices = ToolView.extend({
         }
     },
     updatePath: function() {
-        var connection = this.childNodes.connection;
+        if (this.interactiveLinkNode) return;
+        const connection = this.childNodes.connection;
         if (connection) connection.setAttribute('d', this.relatedView.getSerializedConnection());
     },
     startHandleListening: function(handle) {
@@ -245,8 +277,13 @@ export const Vertices = ToolView.extend({
         this.eventData(normalizedEvent, { vertexAdded: true });
         handle.onPointerDown(normalizedEvent);
     },
+    onLinkPointerDown: function(evt) {
+        this.relatedView.preventDefaultInteraction(evt);
+        this.onPathPointerDown(evt);
+    },
     onRemove: function() {
         this.resetHandles();
+        this.undelegateLinkEvents();
     }
 }, {
     VertexHandle: VertexHandle // keep as class property

package/src/linkTools/index.mjs

@@ -1,8 +1,11 @@
 export * from './Vertices.mjs';
 export * from './Segments.mjs';
 export * from './Arrowhead.mjs';
-export * from './Boundary.mjs';
 export * from './Anchor.mjs';
-export * from './Button.mjs';
-export * from './Connect.mjs';
-export * from './HoverConnect.mjs';
+export * from './RotateLabel.mjs';
+
+export * from '../cellTools/Button.mjs';
+export * from '../cellTools/Boundary.mjs';
+export * from '../cellTools/Connect.mjs';
+export * from '../cellTools/HoverConnect.mjs';
+export * from '../cellTools/Control.mjs';

package/src/mvc/View.mjs

@@ -1,5 +1,4 @@
 import $ from './Dom/index.mjs';
-
 import * as util from '../util/index.mjs';
 import V from '../V/index.mjs';
 import { ViewBase } from './ViewBase.mjs';

package/src/mvc/ViewBase.mjs

@@ -35,7 +35,8 @@ export var ViewBase = function(options) {
 var delegateEventSplitter = /^(\S+)\s*(.*)$/;
 
 // List of view options to be set as properties.
-var viewOptions = ['model', 'collection', 'el', 'id', 'attributes', 'className', 'tagName', 'events'];
+// TODO: `style` attribute is not supported in ViewBase class yet, but only in View class that extends ViewBase.
+var viewOptions = ['model', 'collection', 'el', 'id', 'attributes', 'className', 'tagName', 'events', 'style'];
 
 // Set up all inheritable **ViewBase** properties and methods.
 assign(ViewBase.prototype, Events, {