@processmaker/modeler 1.39.2 → 1.39.4

package/dist/modeler.common.js

@@ -27044,6 +27044,7 @@ function isPoint(item) {
       sourceShape: null,
       target: null,
       listeningToMouseup: false,
+      listeningToMouseleave: false,
       vertices: null,
       anchorPointFunction: getDefaultAnchorPoint
     };
@@ -27175,10 +27176,11 @@ function isPoint(item) {
       var targetShape = this.shape.getTargetElement();
       resetShapeColor(targetShape);
       this.shape.on('change:vertices', this.onChangeVertices);
-      this.shape.on('change:source', this.onChangeVertices);
-      this.shape.on('change:target', this.onChangeVertices);
+      this.shape.on('change:source', this.onChangeTargets);
+      this.shape.on('change:target', this.onChangeTargets);
       this.shape.listenTo(this.sourceShape, 'change:position', this.updateWaypoints);
       this.shape.listenTo(targetShape, 'change:position', this.updateWaypoints);
+      this.shape.listenTo(this.paper, 'link:mouseleave', this.storeWaypoints);
       var sourceShape = this.shape.getSourceElement();
       sourceShape.embed(this.shape);
       this.$emit('set-shape-stacking', sourceShape);
@@ -27191,46 +27193,90 @@ function isPoint(item) {
         resolve();
       });
     },
+    storeWaypoints: function storeWaypoints() {
+      var _this4 = this;
+      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+        return _regeneratorRuntime().wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              if (!(_this4.highlighted && !_this4.listeningToMouseleave)) {
+                _context.next = 6;
+                break;
+              }
+              _this4.updateWaypoints();
+              _context.next = 4;
+              return _this4.$nextTick();
+            case 4:
+              _this4.listeningToMouseleave = true;
+              _this4.$emit('save-state');
+            case 6:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }))();
+    },
     /**
       * On Change vertices handler
       * @param {Object} link
       * @param {Array} vertices
       * @param {Object} options
       */
-    onChangeVertices: function onChangeVertices(link, vertices, options) {
-      var _this4 = this;
-      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-        return _regeneratorRuntime().wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
+    onChangeTargets: function onChangeTargets(link, vertices, options) {
+      var _this5 = this;
+      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+        return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
             case 0:
               if (!(options && options.ui)) {
-                _context.next = 8;
+                _context2.next = 7;
                 break;
               }
-              _context.next = 3;
-              return _this4.$nextTick();
+              _context2.next = 3;
+              return _this5.$nextTick();
             case 3:
-              _context.next = 5;
-              return _this4.waitForUpdateWaypoints();
+              _context2.next = 5;
+              return _this5.waitForUpdateWaypoints();
             case 5:
-              _context.next = 7;
-              return _this4.$nextTick();
+              _context2.next = 7;
+              return _this5.storeWaypoints();
             case 7:
-              _this4.$emit('save-state');
-            case 8:
             case "end":
-              return _context.stop();
+              return _context2.stop();
           }
-        }, _callee);
+        }, _callee2);
+      }))();
+    },
+    onChangeVertices: function onChangeVertices(link, vertices, options) {
+      var _this6 = this;
+      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
+        return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
+            case 0:
+              if (!(options && options.ui)) {
+                _context3.next = 6;
+                break;
+              }
+              _this6.updateWaypoints();
+              _context3.next = 4;
+              return _this6.$nextTick();
+            case 4:
+              _this6.listeningToMouseleave = false;
+              _this6.$emit('save-state');
+            case 6:
+            case "end":
+              return _context3.stop();
+          }
+        }, _callee3);
       }))();
     },
     updateWaypoints: function updateWaypoints() {
-      var _this5 = this;
+      var _this7 = this;
       var linkView = this.shape.findView(this.paper);
       var start = linkView.sourceAnchor;
       var end = linkView.targetAnchor;
       this.node.diagram.waypoint = [start].concat(_toConsumableArray(this.shape.vertices()), [end]).map(function (point) {
-        return _this5.moddle.create('dc:Point', point);
+        return _this7.moddle.create('dc:Point', point);
       });
       if (!this.listeningToMouseup) {
         this.listeningToMouseup = true;
@@ -27238,7 +27284,7 @@ function isPoint(item) {
       }
     },
     updateLinkTarget: function updateLinkTarget(_ref) {
-      var _this6 = this;
+      var _this8 = this;
       var clientX = _ref.clientX,
         clientY = _ref.clientY;
       var localMousePosition = this.paper.clientToLocalPoint({
@@ -27267,19 +27313,19 @@ function isPoint(item) {
       setShapeColor(this.target, validNodeColor);
       this.paper.el.removeEventListener('mousemove', this.updateLinkTarget);
       this.shape.listenToOnce(this.paper, 'cell:pointerclick', function () {
-        _this6.completeLink();
-        _this6.updateWaypoints();
-        _this6.updateWaypoints.flush();
-        if (_this6.updateDefinitionLinks) {
-          _this6.updateDefinitionLinks();
+        _this8.completeLink();
+        _this8.updateWaypoints();
+        _this8.updateWaypoints.flush();
+        if (_this8.updateDefinitionLinks) {
+          _this8.updateDefinitionLinks();
         }
-        _this6.$emit('save-state');
+        _this8.$emit('save-state');
       });
       this.shape.listenToOnce(this.paper, 'cell:mouseleave', function () {
-        _this6.paper.el.addEventListener('mousemove', _this6.updateLinkTarget);
-        _this6.shape.stopListening(_this6.paper, 'cell:pointerclick');
-        resetShapeColor(_this6.target);
-        _this6.$emit('set-cursor', 'not-allowed');
+        _this8.paper.el.addEventListener('mousemove', _this8.updateLinkTarget);
+        _this8.shape.stopListening(_this8.paper, 'cell:pointerclick');
+        resetShapeColor(_this8.target);
+        _this8.$emit('set-cursor', 'not-allowed');
       });
     },
     removeLink: function removeLink() {
@@ -27329,49 +27375,49 @@ function isPoint(item) {
     this.emitSave.bind(this);
   },
   mounted: function mounted() {
-    var _this7 = this;
-    return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
-      var targetRef, targetShape, sequenceFlowWaypoints, sourceAnchorPoint, targetAnchorPoint, _targetShape$position, targetX, targetY, targetAnchorOffset, _this7$sourceShape$po, sourceX, sourceY, sourceAnchorOffset, sequenceVertices;
-      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
+    var _this9 = this;
+    return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
+      var targetRef, targetShape, sequenceFlowWaypoints, sourceAnchorPoint, targetAnchorPoint, _targetShape$position, targetX, targetY, targetAnchorOffset, _this9$sourceShape$po, sourceX, sourceY, sourceAnchorOffset, sequenceVertices;
+      return _regeneratorRuntime().wrap(function _callee4$(_context4) {
+        while (1) switch (_context4.prev = _context4.next) {
           case 0:
-            _context2.next = 2;
-            return _this7.$nextTick();
+            _context4.next = 2;
+            return _this9.$nextTick();
           case 2:
             /* Use nextTick to ensure this code runs after the component it is mixed into mounts.
              * This will ensure this.shape is defined. */
 
-            _this7.sourceShape = _this7.findSourceShape();
-            _this7.setSource(_this7.sourceShape);
-            _this7.$once('click', function () {
-              _this7.$nextTick(function () {
+            _this9.sourceShape = _this9.findSourceShape();
+            _this9.setSource(_this9.sourceShape);
+            _this9.$once('click', function () {
+              _this9.$nextTick(function () {
                 if (store.getters.isReadOnly) {
                   return;
                 }
-                _this7.setupLinkTools();
+                _this9.setupLinkTools();
               });
             });
-            targetRef = _this7.getTargetRef ? _this7.getTargetRef() : _this7.node.definition.get('targetRef'); // if flow doesn't have a targetRef such as incomplete node, return
+            targetRef = _this9.getTargetRef ? _this9.getTargetRef() : _this9.node.definition.get('targetRef'); // if flow doesn't have a targetRef such as incomplete node, return
             if (targetRef) {
-              _context2.next = 8;
+              _context4.next = 8;
               break;
             }
-            return _context2.abrupt("return");
+            return _context4.abrupt("return");
           case 8:
             if (targetRef.id) {
-              targetShape = _this7.graph.getElements().find(function (element) {
+              targetShape = _this9.graph.getElements().find(function (element) {
                 return element.component && element.component.node.definition === targetRef;
               });
-              _this7.target = targetShape;
-              sequenceFlowWaypoints = _this7.node.diagram.waypoint;
-              sourceAnchorPoint = _this7.node.diagram.waypoint[0];
+              _this9.target = targetShape;
+              sequenceFlowWaypoints = _this9.node.diagram.waypoint;
+              sourceAnchorPoint = _this9.node.diagram.waypoint[0];
               targetAnchorPoint = sequenceFlowWaypoints[sequenceFlowWaypoints.length - 1];
               _targetShape$position = targetShape.position(), targetX = _targetShape$position.x, targetY = _targetShape$position.y;
               targetAnchorOffset = {
                 x: targetAnchorPoint.x - targetX,
                 y: targetAnchorPoint.y - targetY
               };
-              _this7$sourceShape$po = _this7.sourceShape.position(), sourceX = _this7$sourceShape$po.x, sourceY = _this7$sourceShape$po.y;
+              _this9$sourceShape$po = _this9.sourceShape.position(), sourceX = _this9$sourceShape$po.x, sourceY = _this9$sourceShape$po.y;
               sourceAnchorOffset = {
                 x: sourceAnchorPoint.x - sourceX,
                 y: sourceAnchorPoint.y - sourceY
@@ -27385,38 +27431,38 @@ function isPoint(item) {
                     y: y
                   };
                 });
-                _this7.shape.vertices(sequenceVertices);
+                _this9.shape.vertices(sequenceVertices);
               }
-              _this7.setSource(_this7.sourceShape, sourceAnchorOffset);
-              _this7.setTarget(targetShape, targetAnchorOffset);
-              _this7.completeLink();
+              _this9.setSource(_this9.sourceShape, sourceAnchorOffset);
+              _this9.setTarget(targetShape, targetAnchorOffset);
+              _this9.completeLink();
             } else {
-              _this7.setTarget(targetRef);
-              _this7.paper.setInteractivity(false);
-              _this7.paper.el.addEventListener('mousemove', _this7.updateLinkTarget);
-              _this7.$emit('set-cursor', 'not-allowed');
-              if (_this7.isValidConnection) {
-                _this7.shape.stopListening(_this7.paper, 'blank:pointerdown link:pointerdown element:pointerdown', _this7.removeLink);
+              _this9.setTarget(targetRef);
+              _this9.paper.setInteractivity(false);
+              _this9.paper.el.addEventListener('mousemove', _this9.updateLinkTarget);
+              _this9.$emit('set-cursor', 'not-allowed');
+              if (_this9.isValidConnection) {
+                _this9.shape.stopListening(_this9.paper, 'blank:pointerdown link:pointerdown element:pointerdown', _this9.removeLink);
               } else {
-                _this7.shape.listenToOnce(_this7.paper, 'blank:pointerdown link:pointerdown element:pointerdown', _this7.removeLink);
+                _this9.shape.listenToOnce(_this9.paper, 'blank:pointerdown link:pointerdown element:pointerdown', _this9.removeLink);
               }
             }
-            _this7.updateRouter();
-            _this7.shape.on('change:vertices', function () {
+            _this9.updateRouter();
+            _this9.shape.on('change:vertices', function () {
               this.component.$emit('shape-resize');
             });
             if (store.getters.isReadOnly) {
-              _this7.$nextTick(function () {
-                _this7.paperManager.awaitScheduledUpdates().then(function () {
-                  _this7.setShapeHighlight();
+              _this9.$nextTick(function () {
+                _this9.paperManager.awaitScheduledUpdates().then(function () {
+                  _this9.setShapeHighlight();
                 });
               });
             }
           case 12:
           case "end":
-            return _context2.stop();
+            return _context4.stop();
         }
-      }, _callee2);
+      }, _callee4);
     }))();
   },
   beforeDestroy: function beforeDestroy() {