@processmaker/modeler 1.30.2 → 1.30.3

package/package.json

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

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

@@ -222,8 +222,6 @@ 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,7 +1190,6 @@ 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

@@ -35,6 +35,7 @@ import { id as messageFlowId } from '@/components/nodes/messageFlow/config';
 import { id as dataOutputAssociationFlowId } from '@/components/nodes/dataOutputAssociation/config';
 import { id as dataInputAssociationFlowId } from '@/components/nodes/dataInputAssociation/config';
 import { labelWidth, poolPadding } from '../nodes/pool/poolSizes';
+import { invalidNodeColor, poolColor } from '@/components/nodeColors';
 
 export default {
   name: 'Selection',
@@ -53,6 +54,7 @@ export default {
       isSelecting: false,
       isSelected: false,
       selected: [],
+      conectedLinks:[],
       dragging: false,
       style:  {
         left: '0px',
@@ -79,6 +81,10 @@ export default {
       selectableBlackList:[
         genericFlowId,
       ],
+      newPool: null,
+      oldPool: null,
+      isValidSelectionLinks: true,
+      invalidPool: null,
     };
   },
   mounted(){
@@ -96,6 +102,7 @@ export default {
   watch: {
     // whenever selected changes
     selected(newSelected) {
+      this.prepareConectedLinks(newSelected);
       this.addToHighlightedNodes(newSelected);
     },
   },
@@ -145,13 +152,21 @@ export default {
         return;
       }
       // validate if there is a lane previously selected
-      let lane = this.selected.find(view => {
-        return this.draggableBlackList.includes(view.model.component.node.type);
+      let lane = this.selected.find(shape => {
+        return this.draggableBlackList.includes(shape.model.component.node.type);
       });
       if (lane) {
         this.selected = [view];
         return;
-      } 
+      }
+      // validate if there is a lane previously selected
+      let pool = this.selected.find(shape => {
+        return shape.model.component.node.type === poolId;
+      });
+      if (pool && view.model.component.node.type !== poolId) {
+        this.selected = [view];
+        return;
+      }
       // validate if the current selection is a pool
       if (view.model.component && view.model.component.node.type === poolId) {
         //validate if previous selection are all pools
@@ -162,6 +177,14 @@ export default {
         }
         return;
       }
+      // prevent select out of the current pool container
+      if (view.model.component && view.model.component.node.pool){
+        pool = this.getPool(this.selected);
+        if (pool && view.model.component.node.pool.id !== pool.model.get('id')) {
+          this.selected = [view];
+          return;
+        }
+      }
       this.selectOrUnselectShape(view);
     },
     /**
@@ -294,6 +317,73 @@ export default {
       });
       return elements;
     },
+    /**
+     * Check if a point is into the area
+     * @param {Object} position
+     * @param {Object} area
+     */
+    isPositionWithinArea(position, area) {
+      const { x, y, width, height } = area;
+      return (
+        position.x >= x &&
+        position.x <= x + width &&
+        position.y >= y &&
+        position.y <= y + height
+      );
+    },
+    /**
+     * Prepare the conectedLinks collection
+     * @param {Array} shapes 
+     */
+    prepareConectedLinks(shapes){
+      const { paper } = this.paperManager;
+      this.conectedLinks = [];
+      this.isValidSelectionLinks = true;
+      shapes.forEach((shape) => {
+        let conectedLinks = this.graph.getConnectedLinks(shape.model);
+        // if the shape is a container
+        if ( shape.model.component && shape.model.component.node.type === poolId) {
+          const area = shape.model.getBBox();
+          const linksInArea = paper.model.getLinks().filter((link) => {
+            const sourcePosition = link.getSourcePoint();
+            const targetPosition = link.getTargetPoint();
+            return (
+              this.isPositionWithinArea(sourcePosition, area) ||
+              this.isPositionWithinArea(targetPosition, area)
+            );
+          });
+          if (linksInArea) {
+            conectedLinks = [...conectedLinks, ...linksInArea];
+          }
+        }
+        conectedLinks.forEach((link) => {
+          const linkView = paper.findViewByModel(link);
+          if (!this.conectedLinks.some(obj => obj.id === linkView.id)) {
+            this.conectedLinks.push(linkView);
+            this.validateSelectionLinks(linkView);
+          }
+        });
+      });
+    },
+    /**
+     * Validate if the selection is valid to drag and drop in other container
+     * @param {Object} linkView
+     */
+    validateSelectionLinks(linkView){
+      if (this.isValidSelectionLinks) {
+        const source = this.selected.find(shape => {
+          return shape.model.get('id') === linkView.model.getSourceElement().get('id');
+        });
+        const target = this.selected.find(shape => {
+          return shape.model.get('id') === linkView.model.getTargetElement().get('id');
+        });
+        if (source && target) {
+          this.isValidSelectionLinks = true;
+        } else {
+          this.isValidSelectionLinks = false;
+        }
+      }
+    },
     /**
      * Return the bounding box of the selected elements,
      * @param {Array} selected
@@ -474,15 +564,30 @@ export default {
      * Stop drag procedure
      * @param {Object} event
      */
-    stopDrag() {
-      this.overPoolStopDrag();
-      this.$emit('save-state');
+    async stopDrag() {
       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. 
+      await this.$nextTick();
+      await this.paperManager.awaitScheduledUpdates();
+      this.overPoolStopDrag();
       this.updateSelectionBox();
     },
+    /**
+     * 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
      */
@@ -500,10 +605,12 @@ export default {
           return drafRef.model.get('id') !== shape.model.get('id');
         });
       }
-      // allow movement only if one lane boundary event is selected;
+      // allow movements only if one boundary event is selected;
       if (this.selected && this.selected.length === 1 && 
         this.selected[0].model.get('type') === 'processmaker.components.nodes.boundaryEvent.Shape') {
         this.selected[0].model.translate(x, y);
+        // validation about boundary event movements
+        this.selected[0].model.component.turnInvalidTargetRed();
         return;
       }
       shapes.forEach((shape)=> shape.model.translate(x, y));
@@ -589,6 +696,21 @@ export default {
       let selectedArea = g.rect(f.x, f.y, width, height);
       return this.getElementsInSelectedArea(selectedArea, { strict: false });
     },
+    getPool(elements){
+      const { paper } = this.paperManager;
+      let pool = null;
+      if (elements && elements.length > 0) {
+        elements.forEach(({ model }) => {
+          if (pool) {
+            return;
+          }
+          if (model.getParentCell() && model.getParentCell().component.node.type === poolId){
+            pool = model.getParentCell();
+          }
+        });
+      }
+      return paper.findViewByModel(pool);
+    },
     /**
      * Check that they are not in a pool
      * @param {Array} elements 
@@ -613,18 +735,35 @@ export default {
       if (this.isNotPoolChilds(this.selected)) {
         return;
       }
+      const currentPool = this.getPool(this.selected);
       const elementsUnderDivArea = this.getShapesFromPoint(event);
       const pool = elementsUnderDivArea.find(item => {
         return item.model.component && item.model.component.node.type === poolId;
       });
+      this.newPool = null;
+      this.oldPool = null;
       if (!pool) {
         this.isOutOfThePool = true;
         store.commit('preventSavingElementPosition');
         this.paperManager.setStateInvalid();
       } else {
-        this.isOutOfThePool = false;
-        store.commit('preventSavingElementPosition');
         this.paperManager.setStateValid();
+
+        if (this.invalidPool) {
+          this.invalidPool.model.component.shape.attr('body/fill', poolColor);
+          this.invalidPool = null;
+        }
+        if (currentPool && currentPool.model.get('id') !== pool.model.get('id')) {
+          this.newPool = pool;
+          this.oldPool = currentPool;
+          this.isOutOfThePool = false;
+          if (!this.isValidSelectionLinks){
+            this.isOutOfThePool = true;
+            this.invalidPool = pool;
+            pool.model.component.shape.attr('body/fill', invalidNodeColor);
+            store.commit('preventSavingElementPosition');
+          }
+        }
       }
     },
     /**
@@ -632,12 +771,31 @@ export default {
      */
     overPoolStopDrag(){
       if (this.isNotPoolChilds(this.selected)) {
+        this.updateFlowsWaypoint();
+        this.$emit('save-state');
         return;
       }
       if (this.isOutOfThePool) {
         this.rollbackSelection();
+        if (this.invalidPool) {
+          this.invalidPool.model.component.shape.attr('body/fill', poolColor);
+          this.invalidPool = null;
+        }
       } else {
-        this.expandToFitElement(this.selected);
+        this.updateFlowsWaypoint();
+        if (this.newPool){
+          /* Remove the shape from its current pool */
+          this.moveElements(this.selected, this.oldPool, this.newPool);
+          this.newPool = null;
+          this.oldPool = null;
+          this.updateLaneChildren(this.selected);
+          this.$emit('save-state');
+        } else {
+          this.expandToFitElement(this.selected);
+          this.updateLaneChildren(this.selected);
+          this.$emit('save-state');
+        }
+        
       }
     },
     /**
@@ -734,10 +892,38 @@ export default {
             node: pool.component.node,
             bounds: pool.getBBox(),
           });
-          this.$emit('save-state');
         }
       }
     },
+    /**
+     * Updates the lane children when a element is moved into the pool
+     * @param {Array} selected
+     */
+    updateLaneChildren(selected){
+      if (!selected) {
+        return;
+      }
+      const pool = selected.find(({ model }) => {
+        if (model.getParentCell()) {
+          return model.getParentCell().component.node.type === poolId;
+        }
+        return false;
+      });
+      if (pool){
+        pool.model.getParentCell();
+        pool.model.component.laneSet && pool.component.updateLaneChildren();
+      }
+    },
+    moveElements(selected, oldPool, newPool){
+      const shapesToMove= [
+        'PoolLane',
+        'standard.Link',
+      ];
+      selected.filter(shape => !shapesToMove.includes(shape.model.get('type')))
+        .forEach(shape => {
+          oldPool.model.component.moveElement(shape.model, newPool.model);
+        });
+    },
   },
 };
 </script>

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

@@ -174,8 +174,6 @@ export default {
       this.shape.listenToOnce(this.paper, 'cell:pointerup blank:pointerup', () => {
         this.moveBoundaryEventIfOverTask();
         this.resetInvalidTarget();
-        this.$emit('save-state');
-
         store.commit('allowSavingElementPosition');
       });
     },
@@ -216,9 +214,6 @@ export default {
     const task = this.getTaskUnderShape();
     this.attachBoundaryEventToTask(task);
     this.updateShapePosition(task);
-
-    this.shape.on('change:position', this.turnInvalidTargetRed);
-    this.shape.listenTo(this.paper, 'element:pointerdown', this.attachToValidTarget);
   },
 };
 </script>

package/src/components/nodes/genericFlow/SequenceFlow.js

@@ -6,9 +6,10 @@ import DataAssociation from '@/components/nodes/genericFlow/DataAssociation';
 
 export default class SequenceFlow extends Flow {
   static isValid({ sourceShape, targetShape, targetConfig }) {
+ 
     const targetNode = get(targetShape, 'component.node');
     const sourceNode = get(sourceShape, 'component.node');
-
+    
     return Flow.hasTargetType(targetShape) &&
       Flow.targetIsNotSource(sourceNode, targetNode) &&
       SequenceFlow.targetIsNotALane(targetNode) &&

package/src/components/nodes/pool/pool.vue

@@ -42,7 +42,6 @@ import highlightConfig from '@/mixins/highlightConfig';
 import AddLaneAboveButton from '@/components/crown/crownButtons/addLaneAboveButton';
 import AddLaneBelowButton from '@/components/crown/crownButtons/addLaneBelowButton';
 import { configurePool, elementShouldHaveFlowNodeRef } from '@/components/nodes/pool/poolUtils';
-import PoolEventHandlers from '@/components/nodes/pool/poolEventHandlers';
 import Node from '@/components/nodes/node';
 import { aPortEveryXPixels } from '@/portsUtils';
 
@@ -500,13 +499,6 @@ export default {
     }
     this.setPoolSize(this.shape);
     this.$emit('set-shape-stacking', this.shape);
-
-    this.$nextTick(() => {
-      const handler = new PoolEventHandlers(this.graph, this.paper, this.paperManager, this.shape, this);
-      this.shape.listenTo(this.graph, 'change:position', (element, newPosition) => handler.onChangePosition(element, newPosition));
-      this.shape.listenTo(this.paper, 'cell:pointerdown', (cellView) => handler.onPointerDown(cellView));
-      this.shape.listenTo(this.paper, 'cell:pointerup', (cellView) => handler.onPointerUp(cellView));
-    });
   },
   beforeDestroy() {
     const participants = this.collaboration.get('participants');

package/src/mixins/linkConfig.js

@@ -118,14 +118,23 @@ export default {
       const targetShape = this.shape.getTargetElement();
       resetShapeColor(targetShape);
 
-      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);
+      this.shape.on('change:vertices', this.onChangeVertices);
 
       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;
@@ -296,7 +305,6 @@ export default {
       this.paper.el.addEventListener('mousemove', this.updateLinkTarget);
 
       this.$emit('set-cursor', 'not-allowed');
-
       if (this.isValidConnection) {
         this.shape.stopListening(this.paper, 'blank:pointerdown link:pointerdown element:pointerdown', this.removeLink);
       } else {