@processmaker/modeler 1.30.0 → 1.30.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/modeler",
-  "version": "1.30.0",
+  "version": "1.30.2",
   "scripts": {
     "serve": "vue-cli-service serve",
     "open-cypress": "TZ=UTC cypress open",

package/src/components/crown/crownButtons/associationFlowButton.vue

@@ -20,6 +20,8 @@ import connectIcon from '@/assets/connect-artifacts.svg';
 import CrownButton from '@/components/crown/crownButtons/crownButton';
 import { direction } from '@/components/nodes/association/associationConfig';
 import Node from '@/components/nodes/node';
+import store from '@/store';
+import { V } from 'jointjs';
 
 export default {
   components: { CrownButton },
@@ -29,12 +31,23 @@ export default {
       connectIcon,
     };
   },
+  computed: {
+    paper: () => store.getters.paper,
+  },
   methods: {
     addAssociation(cellView, evt, x, y) {
       this.$emit('toggle-crown-state', false);
+      const { clientX, clientY } = cellView;
+      let point = null;
+      if (cellView){
+        point = V(this.paper.viewport).toLocalPoint(clientX, clientY);
+      }
       const associationLink = this.moddle.create('bpmn:Association', {
         sourceRef: this.shape.component.node.definition,
-        targetRef: { x, y },
+        targetRef: {
+          x: x ? x : point.x,
+          y: y ? y : point.y,
+        },
         associationDirection: direction.none,
       });
 

package/src/components/crown/crownConfig/crownConfig.vue

@@ -222,6 +222,8 @@ export default {
       if (!store.getters.allowSavingElementPosition) {
         return;
       }
+
+      this.$emit('save-state');
     },
     repositionCrown() {
       const shapeView = this.shape.findView(this.paper);

package/src/components/modeler/Modeler.vue

@@ -1190,6 +1190,7 @@ export default {
       if (!this.isDragging && this.dragStart) {
         // is clicked over the shape
         if (cellView) {
+          this.$refs.selector.stopDrag(event);
           this.$refs.selector.selectElement(cellView, event.shiftKey);
         } else {
           this.clearSelection();

package/src/components/modeler/Selection.vue

@@ -53,7 +53,6 @@ export default {
       isSelecting: false,
       isSelected: false,
       selected: [],
-      conectedLinks:[],
       dragging: false,
       style:  {
         left: '0px',
@@ -97,7 +96,6 @@ export default {
   watch: {
     // whenever selected changes
     selected(newSelected) {
-      this.prepareConectedLinks(newSelected);
       this.addToHighlightedNodes(newSelected);
     },
   },
@@ -296,24 +294,6 @@ export default {
       });
       return elements;
     },
-    /**
-     * Prepare the conectedLinks collection
-     * @param {Array} shapes 
-     */
-    prepareConectedLinks(shapes){
-      const { paper } = this.paperManager;
-      this.conectedLinks = [];
-      shapes.forEach((shape) => {
-        const conectedLinks = this.graph.getConnectedLinks(shape.model);
-        conectedLinks.forEach((link) => {
-          const linkView = paper.findViewByModel(link);
-          if (!this.conectedLinks.some(obj => obj.id === linkView.id)) {
-            this.conectedLinks.push(linkView);
-          }
-        });
- 
-      });
-    },
     /**
      * Return the bounding box of the selected elements,
      * @param {Array} selected
@@ -387,7 +367,7 @@ export default {
         // remove from selection the selected flows that belongs to a selected pools
         if (shape.model.component  && flowTypes.includes(shape.model.component.node.type)) {
           const parent = shape.model.getParentCell();
-          if (parent.component && parent.component.node.pool) {
+          if (parent && parent.component && parent.component.node.pool) {
             return !selectedPoolsIds.includes(parent.component.node.pool.component.node.id);
           }
         }
@@ -495,27 +475,13 @@ export default {
      * @param {Object} event
      */
     stopDrag() {
+      this.overPoolStopDrag();
+      this.$emit('save-state');
       this.dragging = false;
       this.stopForceMove = false;
       // Readjusts the selection box, taking into consideration elements
       // that are anchored and did not move, such as boundary events. 
       this.updateSelectionBox();
-      this.updateFlowsWaypoint();
-      this.overPoolStopDrag();
-    },
-    /**
-     * Selector will update the waypoints of the related flows
-     */
-    updateFlowsWaypoint(){
-      this.conectedLinks.forEach((link)=> {
-        if (link.model.component && link.model.get('type') === 'standard.Link'){
-          const start = link.sourceAnchor;
-          const end = link.targetAnchor;
-          link.model.component.node.diagram.waypoint = [start,
-            ...link.model.component.shape.vertices(),
-            end].map(point => link.model.component.moddle.create('dc:Point', point));
-        }
-      });
     },
     /**
      * Translate the Selected shapes adding some custom validations
@@ -666,14 +632,12 @@ export default {
      */
     overPoolStopDrag(){
       if (this.isNotPoolChilds(this.selected)) {
-        this.$emit('save-state');
         return;
       }
       if (this.isOutOfThePool) {
         this.rollbackSelection();
       } else {
         this.expandToFitElement(this.selected);
-        this.$emit('save-state');
       }
     },
     /**
@@ -695,7 +659,6 @@ export default {
           shape.model.translate(deltaX/scale.sx, deltaY/scale.sy);
         });
       this.isOutOfThePool = false;
-      this.updateFlowsWaypoint();
       await store.commit('allowSavingElementPosition');
       this.paperManager.setStateValid();
       await this.$nextTick();
@@ -771,6 +734,7 @@ export default {
             node: pool.component.node,
             bounds: pool.getBBox(),
           });
+          this.$emit('save-state');
         }
       }
     },

package/src/components/nodes/boundaryEvent/boundaryEvent.vue

@@ -218,6 +218,7 @@ export default {
     this.updateShapePosition(task);
 
     this.shape.on('change:position', this.turnInvalidTargetRed);
+    this.shape.listenTo(this.paper, 'element:pointerdown', this.attachToValidTarget);
   },
 };
 </script>

package/src/mixins/linkConfig.js

@@ -118,23 +118,14 @@ export default {
       const targetShape = this.shape.getTargetElement();
       resetShapeColor(targetShape);
 
-      this.shape.on('change:vertices', this.onChangeVertices);
+      this.shape.listenTo(this.sourceShape, 'change:position', this.updateWaypoints);
+      this.shape.listenTo(targetShape, 'change:position', this.updateWaypoints);
+      this.shape.on('change:vertices change:source change:target', this.updateWaypoints);
 
       const sourceShape = this.shape.getSourceElement();
       sourceShape.embed(this.shape);
       this.$emit('set-shape-stacking', sourceShape);
     },
-    /**
-     * On Change vertices handler
-     * @param {Object} link 
-     * @param {Array} vertices 
-     * @param {Object} options 
-     */
-    onChangeVertices(link, vertices, options){
-      if (options && options.ui) {
-        this.updateWaypoints();
-      }
-    },
     updateWaypoints() {
       const linkView = this.shape.findView(this.paper);
       const start = linkView.sourceAnchor;