@processmaker/modeler 1.46.2 → 1.46.4

package/dist/modeler.umd.js

@@ -32730,7 +32730,8 @@ function isPoint(item) {
       listeningToMouseup: false,
       listeningToMouseleave: false,
       vertices: null,
-      anchorPointFunction: getDefaultAnchorPoint
+      anchorPointFunction: getDefaultAnchorPoint,
+      onChangeWasFired: false
     };
   },
   watch: {
@@ -32881,6 +32882,9 @@ function isPoint(item) {
       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);
+      // Listens to the 'pointerup' event when a link is interacted with on the shape.
+      // When the event occurs, the 'pointerUpHandler' method is invoked to handle the pointer up action.
+      this.shape.listenTo(this.paper, 'link:pointerup', this.pointerUpHandler);
       var sourceShape = this.shape.getSourceElement();
       sourceShape.embed(this.shape);
       this.$emit('set-shape-stacking', sourceShape);
@@ -32934,67 +32938,168 @@ function isPoint(item) {
       }))();
     },
     /**
-      * On Change vertices handler
-      * @param {Object} link
-      * @param {Array} vertices
-      * @param {Object} options
-      */
-    onChangeTargets: function onChangeTargets(link, vertices, options) {
+     * Handles the pointer up event.
+     * Performs actions based on changes in the target shape.
+     * @async
+     */
+    pointerUpHandler: function pointerUpHandler() {
       var _this5 = this;
       return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+        var targetChanged, _this5$isValid, targetNode, targetConfig, isValid;
         return _regeneratorRuntime().wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
-              if (!(options !== null && options !== void 0 && options.ui)) {
-                _context2.next = 8;
+              if (_this5.onChangeWasFired) {
+                _context2.next = 2;
                 break;
               }
-              _context2.next = 3;
-              return _this5.$nextTick();
-            case 3:
-              _context2.next = 5;
-              return _this5.waitForUpdateWaypoints();
-            case 5:
-              _this5.listeningToMouseleave = false;
-              _context2.next = 8;
+              return _context2.abrupt("return");
+            case 2:
+              // Check if the target shape has changed.
+              targetChanged = _this5.target.id !== _this5.currentTarget.id;
+              if (!targetChanged) {
+                _context2.next = 20;
+                break;
+              }
+              // Disable the 'onChange' event to prevent redundant processing.
+              _this5.onChangeWasFired = false;
+              // Extract information about the new target shape
+              targetNode = get_default()(_this5.currentTarget, 'component.node');
+              targetConfig = targetNode && _this5.nodeRegistry[targetNode.type]; // Validate the flow with the new target node.
+              isValid = (_this5$isValid = _this5.isValid) === null || _this5$isValid === void 0 ? void 0 : _this5$isValid.call(_this5, {
+                sourceShape: _this5.sourceShape,
+                targetShape: _this5.currentTarget,
+                targetConfig: targetConfig
+              }); // If the flow is valid, update the target and related information.
+              if (!isValid) {
+                _context2.next = 17;
+                break;
+              }
+              _this5.setTarget(_this5.currentTarget);
+              _this5.target = _this5.currentTarget;
+              // Optionally update definition links.
+              if (_this5.updateDefinitionLinks) {
+                _this5.updateDefinitionLinks();
+              }
+              _this5.listeningToMouseleave = true;
+              // Store waypoints asynchronously.
+              _context2.next = 15;
               return _this5.storeWaypoints();
-            case 8:
+            case 15:
+              _context2.next = 18;
+              break;
+            case 17:
+              // If the flow is not valid, revert to the previous target.
+              _this5.setTarget(_this5.target);
+            case 18:
+              _context2.next = 21;
+              break;
+            case 20:
+              // the target was not changed, set the target with the anchor offset.
+              _this5.setTarget(_this5.target, _this5.getAnchorOffset());
+            case 21:
             case "end":
               return _context2.stop();
           }
         }, _callee2);
       }))();
     },
-    onChangeVertices: function onChangeVertices(link, vertices, options) {
+    /**
+     * Calculates the offset between the target anchor point and the position of the target element.
+     *
+     * @returns {Object} An object representing the offset with 'x' and 'y' properties.
+     */
+    getAnchorOffset: function getAnchorOffset() {
+      // Get the waypoints of the sequence flow
+      var sequenceFlowWaypoints = this.node.diagram.waypoint;
+      // Get the last waypoint, which is the target anchor point
+      var targetAnchorPoint = sequenceFlowWaypoints[sequenceFlowWaypoints.length - 1];
+      // Get the position (x, y) of the target element
+      var _this$target$position = this.target.position(),
+        targetX = _this$target$position.x,
+        targetY = _this$target$position.y;
+      // Calculate and return the offset between the target anchor point and the target element position
+      return {
+        x: targetAnchorPoint.x - targetX,
+        y: targetAnchorPoint.y - targetY
+      };
+    },
+    /**
+     * Handles changes in target shapes for a link.
+     * @async
+     * @param {Link} link - The link whose target is being changed.
+     * @param {Vertices} vertices - The new vertices information.
+     * @param {Object} options - Additional options.
+     */
+    onChangeTargets: function onChangeTargets(link, vertices, options) {
       var _this6 = this;
       return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
+        var newTarget;
         return _regeneratorRuntime().wrap(function _callee3$(_context3) {
           while (1) switch (_context3.prev = _context3.next) {
             case 0:
-              if (!(options !== null && options !== void 0 && options.ui)) {
-                _context3.next = 6;
+              _this6.onChangeWasFired = true;
+              if (!(options !== null && options !== void 0 && options.ui && vertices.id)) {
+                _context3.next = 15;
                 break;
               }
-              _this6.updateWaypoints();
-              _context3.next = 4;
+              newTarget = _this6.paper.getModelById(vertices.id);
+              if (!(_this6.currentTarget.id !== newTarget.id)) {
+                _context3.next = 8;
+                break;
+              }
+              // Change the target if it's different from the current target
+              _this6.currentTarget = newTarget;
+              _this6.listeningToMouseleave = true;
+              _context3.next = 15;
+              break;
+            case 8:
+              _context3.next = 10;
               return _this6.$nextTick();
-            case 4:
+            case 10:
+              _context3.next = 12;
+              return _this6.waitForUpdateWaypoints();
+            case 12:
               _this6.listeningToMouseleave = false;
-              _this6.$emit('save-state');
-            case 6:
+              _context3.next = 15;
+              return _this6.storeWaypoints();
+            case 15:
             case "end":
               return _context3.stop();
           }
         }, _callee3);
       }))();
     },
-    updateWaypoints: function updateWaypoints() {
+    onChangeVertices: function onChangeVertices(link, vertices, options) {
       var _this7 = this;
+      return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
+        return _regeneratorRuntime().wrap(function _callee4$(_context4) {
+          while (1) switch (_context4.prev = _context4.next) {
+            case 0:
+              if (!(options !== null && options !== void 0 && options.ui)) {
+                _context4.next = 6;
+                break;
+              }
+              _this7.updateWaypoints();
+              _context4.next = 4;
+              return _this7.$nextTick();
+            case 4:
+              _this7.listeningToMouseleave = false;
+              _this7.$emit('save-state');
+            case 6:
+            case "end":
+              return _context4.stop();
+          }
+        }, _callee4);
+      }))();
+    },
+    updateWaypoints: function updateWaypoints() {
+      var _this8 = this;
       this.linkView = this.shape.findView(this.paper);
       var start = this.linkView.sourceAnchor;
       var end = this.linkView.targetAnchor;
       this.node.diagram.waypoint = [start].concat(_toConsumableArray(this.shape.vertices()), [end]).map(function (point) {
-        return _this7.moddle.create('dc:Point', point);
+        return _this8.moddle.create('dc:Point', point);
       });
       if (!this.listeningToMouseup) {
         this.listeningToMouseup = true;
@@ -33002,7 +33107,7 @@ function isPoint(item) {
       }
     },
     updateLinkTarget: function updateLinkTarget(_ref) {
-      var _this8 = this;
+      var _this9 = this;
       var clientX = _ref.clientX,
         clientY = _ref.clientY;
       var localMousePosition = this.paper.clientToLocalPoint({
@@ -33031,22 +33136,22 @@ function isPoint(item) {
       setShapeColor(this.target, validNodeColor);
       this.paper.el.removeEventListener('mousemove', this.updateLinkTarget);
       this.shape.listenToOnce(this.paper, 'cell:pointerclick', function () {
-        _this8.completeLink();
-        _this8.updateWaypoints();
-        _this8.updateWaypoints.flush();
-        if (_this8.updateDefinitionLinks) {
-          _this8.updateDefinitionLinks();
+        _this9.completeLink();
+        _this9.updateWaypoints();
+        _this9.updateWaypoints.flush();
+        if (_this9.updateDefinitionLinks) {
+          _this9.updateDefinitionLinks();
         }
-        if (_this8.linkView && ['processmaker-modeler-association', 'processmaker-modeler-data-input-association'].includes(_this8.shape.component.node.type)) {
-          _this8.$parent.multiplayerHook(_this8.shape.component.node, false);
+        if (_this9.linkView && ['processmaker-modeler-association', 'processmaker-modeler-data-input-association'].includes(_this9.shape.component.node.type)) {
+          _this9.$parent.multiplayerHook(_this9.shape.component.node, false);
         }
-        _this8.$emit('save-state');
+        _this9.$emit('save-state');
       });
       this.shape.listenToOnce(this.paper, 'cell:mouseleave', function () {
-        _this8.paper.el.addEventListener('mousemove', _this8.updateLinkTarget);
-        _this8.shape.stopListening(_this8.paper, 'cell:pointerclick');
-        resetShapeColor(_this8.target);
-        _this8.$emit('set-cursor', 'not-allowed');
+        _this9.paper.el.addEventListener('mousemove', _this9.updateLinkTarget);
+        _this9.shape.stopListening(_this9.paper, 'cell:pointerclick');
+        resetShapeColor(_this9.target);
+        _this9.$emit('set-cursor', 'not-allowed');
       });
     },
     removeLink: function removeLink() {
@@ -33080,6 +33185,12 @@ function isPoint(item) {
       var toolsView = new external_jointjs_.dia.ToolsView({
         tools: [verticesTool, sourceAnchorTool, targetAnchorTool]
       });
+      if (this.shape.component.node.type === 'processmaker-modeler-sequence-flow') {
+        toolsView = new external_jointjs_.dia.ToolsView({
+          tools: [verticesTool, sourceAnchorTool, targetAnchorTool, new external_jointjs_.linkTools.TargetArrowhead()]
+        });
+      }
+      this.currentTarget = this.shape.getTargetElement();
       this.shapeView.addTools(toolsView);
       this.shapeView.hideTools();
     },
@@ -33096,49 +33207,49 @@ function isPoint(item) {
     this.emitSave.bind(this);
   },
   mounted: function mounted() {
-    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) {
+    var _this10 = this;
+    return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5() {
+      var targetRef, targetShape, sequenceFlowWaypoints, sourceAnchorPoint, targetAnchorPoint, _targetShape$position, targetX, targetY, targetAnchorOffset, _this10$sourceShape$p, sourceX, sourceY, sourceAnchorOffset, sequenceVertices;
+      return _regeneratorRuntime().wrap(function _callee5$(_context5) {
+        while (1) switch (_context5.prev = _context5.next) {
           case 0:
-            _context4.next = 2;
-            return _this9.$nextTick();
+            _context5.next = 2;
+            return _this10.$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. */
 
-            _this9.sourceShape = _this9.findSourceShape();
-            _this9.setSource(_this9.sourceShape);
-            _this9.$once('click', function () {
-              _this9.$nextTick(function () {
+            _this10.sourceShape = _this10.findSourceShape();
+            _this10.setSource(_this10.sourceShape);
+            _this10.$once('click', function () {
+              _this10.$nextTick(function () {
                 if (store.getters.isReadOnly) {
                   return;
                 }
-                _this9.setupLinkTools();
+                _this10.setupLinkTools();
               });
             });
-            targetRef = _this9.getTargetRef ? _this9.getTargetRef() : _this9.node.definition.get('targetRef'); // if flow doesn't have a targetRef such as incomplete node, return
+            targetRef = _this10.getTargetRef ? _this10.getTargetRef() : _this10.node.definition.get('targetRef'); // if flow doesn't have a targetRef such as incomplete node, return
             if (targetRef) {
-              _context4.next = 8;
+              _context5.next = 8;
               break;
             }
-            return _context4.abrupt("return");
+            return _context5.abrupt("return");
           case 8:
             if (targetRef.id) {
-              targetShape = _this9.graph.getElements().find(function (element) {
+              targetShape = _this10.graph.getElements().find(function (element) {
                 return element.component && element.component.node.definition === targetRef;
               });
-              _this9.target = targetShape;
-              sequenceFlowWaypoints = _this9.node.diagram.waypoint;
-              sourceAnchorPoint = _this9.node.diagram.waypoint[0];
+              _this10.target = targetShape;
+              sequenceFlowWaypoints = _this10.node.diagram.waypoint;
+              sourceAnchorPoint = _this10.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
               };
-              _this9$sourceShape$po = _this9.sourceShape.position(), sourceX = _this9$sourceShape$po.x, sourceY = _this9$sourceShape$po.y;
+              _this10$sourceShape$p = _this10.sourceShape.position(), sourceX = _this10$sourceShape$p.x, sourceY = _this10$sourceShape$p.y;
               sourceAnchorOffset = {
                 x: sourceAnchorPoint.x - sourceX,
                 y: sourceAnchorPoint.y - sourceY
@@ -33152,38 +33263,38 @@ function isPoint(item) {
                     y: y
                   };
                 });
-                _this9.shape.vertices(sequenceVertices);
+                _this10.shape.vertices(sequenceVertices);
               }
-              _this9.setSource(_this9.sourceShape, sourceAnchorOffset);
-              _this9.setTarget(targetShape, targetAnchorOffset);
-              _this9.completeLink();
+              _this10.setSource(_this10.sourceShape, sourceAnchorOffset);
+              _this10.setTarget(targetShape, targetAnchorOffset);
+              _this10.completeLink();
             } else {
-              _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);
+              _this10.setTarget(targetRef);
+              _this10.paper.setInteractivity(false);
+              _this10.paper.el.addEventListener('mousemove', _this10.updateLinkTarget);
+              _this10.$emit('set-cursor', 'not-allowed');
+              if (_this10.isValidConnection) {
+                _this10.shape.stopListening(_this10.paper, 'blank:pointerdown link:pointerdown element:pointerdown', _this10.removeLink);
               } else {
-                _this9.shape.listenToOnce(_this9.paper, 'blank:pointerdown link:pointerdown element:pointerdown', _this9.removeLink);
+                _this10.shape.listenToOnce(_this10.paper, 'blank:pointerdown link:pointerdown element:pointerdown', _this10.removeLink);
               }
             }
-            _this9.updateRouter();
-            _this9.shape.on('change:vertices', function () {
+            _this10.updateRouter();
+            _this10.shape.on('change:vertices', function () {
               this.component.$emit('shape-resize');
             });
             if (store.getters.isReadOnly) {
-              _this9.$nextTick(function () {
-                _this9.paperManager.awaitScheduledUpdates().then(function () {
-                  _this9.setShapeHighlight();
+              _this10.$nextTick(function () {
+                _this10.paperManager.awaitScheduledUpdates().then(function () {
+                  _this10.setShapeHighlight();
                 });
               });
             }
           case 12:
           case "end":
-            return _context4.stop();
+            return _context5.stop();
         }
-      }, _callee4);
+      }, _callee5);
     }))();
   },
   beforeDestroy: function beforeDestroy() {
@@ -39043,8 +39154,8 @@ var eventBasedGateway_id = 'processmaker-modeler-event-based-gateway';
     }, documentationAccordionConfig, advancedAccordionConfig]
   }]
 });
-;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/nodes/sequenceFlow/sequenceFlow.vue?vue&type=template&id=2c6f2b84&
-var sequenceFlowvue_type_template_id_2c6f2b84_render = function render() {
+;// CONCATENATED MODULE: ./node_modules/babel-loader/lib/index.js??clonedRuleSet-83.use[1]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/cli-service/node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/nodes/sequenceFlow/sequenceFlow.vue?vue&type=template&id=1aebd17d&
+var sequenceFlowvue_type_template_id_1aebd17d_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('crown-config', _vm._g({
@@ -39063,7 +39174,7 @@ var sequenceFlowvue_type_template_id_2c6f2b84_render = function render() {
     }
   }, _vm.$listeners));
 };
-var sequenceFlowvue_type_template_id_2c6f2b84_staticRenderFns = [];
+var sequenceFlowvue_type_template_id_1aebd17d_staticRenderFns = [];
 
 ;// CONCATENATED MODULE: ./src/components/nodes/sequenceFlow/sequenceFlowConfig.js
 var namePosition = {
@@ -39182,7 +39293,7 @@ var SequenceFlow = /*#__PURE__*/function (_Flow) {
   },
   computed: {
     isValidConnection: function isValidConnection() {
-      return SequenceFlow.isValid({
+      return this.isValid({
         sourceShape: this.sourceShape,
         targetShape: this.target,
         targetConfig: this.targetConfig
@@ -39229,6 +39340,9 @@ var SequenceFlow = /*#__PURE__*/function (_Flow) {
     }
   },
   methods: {
+    isValid: function isValid(params) {
+      return SequenceFlow.isValid(params);
+    },
     setDefaultMarker: function setDefaultMarker(value) {
       this.shape.attr('line', {
         sourceMarker: {
@@ -39293,8 +39407,8 @@ var SequenceFlow = /*#__PURE__*/function (_Flow) {
 ;
 var sequenceFlow_component = normalizeComponent(
   sequenceFlow_sequenceFlowvue_type_script_lang_js_,
-  sequenceFlowvue_type_template_id_2c6f2b84_render,
-  sequenceFlowvue_type_template_id_2c6f2b84_staticRenderFns,
+  sequenceFlowvue_type_template_id_1aebd17d_render,
+  sequenceFlowvue_type_template_id_1aebd17d_staticRenderFns,
   false,
   null,
   null,