@processmaker/modeler 1.30.2 → 1.31.0

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);
     },
   },
@@ -132,7 +139,9 @@ export default {
       }
       this.filterSelected();
       await this.$nextTick();
-      this.updateSelectionBox();
+      if (store.getters.isReadOnly === false) {
+        this.updateSelectionBox();
+      }
     },
     /**
      * Select or unselect an element with shift key pressed
@@ -145,13 +154,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 +179,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);
     },
     /**
@@ -174,7 +199,7 @@ export default {
         this.selected = this.selected.filter(item => item.id !== view.id);
       } else {
         this.selected.push(view);
-      }     
+      }
     },
     clearSelection() {
       this.initSelection();
@@ -294,6 +319,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
@@ -367,7 +459,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 && parent.component && parent.component.node.pool) {
+          if (parent.component && parent.component.node.pool) {
             return !selectedPoolsIds.includes(parent.component.node.pool.component.node.id);
           }
         }
@@ -394,7 +486,7 @@ export default {
       });
       if (shapes) {
         return true;
-      } 
+      }
       return false;
     },
     /**
@@ -474,15 +566,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. 
+      // 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 +607,12 @@ export default {
           return drafRef.model.get('id') !== shape.model.get('id');
         });
       }
-      // allow movement only if one lane boundary event is selected;
-      if (this.selected && this.selected.length === 1 && 
+      // 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,9 +698,24 @@ 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 
+     * @param {Array} elements
      * @return true if there is a pool in the selection or if none of the selected elements are in a pool
      */
     isNotPoolChilds(elements) {
@@ -613,18 +737,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 +773,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 +894,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/endEvent/index.js

@@ -15,6 +15,43 @@ export default {
   icon: require('@/assets/toolpanel/end-event.svg'),
   label: defaultNames[id],
   rank: 30,
+  items: [
+    {
+      icon: require('@/assets/toolpanel/end-event.svg'),
+      label: defaultNames[id],
+      control: true,
+      rank: 31,
+      id: 'processmaker-modeler-end-event',
+    },
+    {
+      icon: require('@/assets/toolpanel/message-end-event.svg'),
+      label: defaultNames['processmaker-modeler-message-end-event'],
+      control: true,
+      rank: 32,
+      id: 'processmaker-modeler-message-end-event',
+    },
+    {
+      icon: require('@/assets/toolpanel/error-end-event.svg'),
+      label: defaultNames['processmaker-modeler-error-end-event'],
+      control: true,
+      rank: 33,
+      id: 'processmaker-modeler-error-end-event',
+    },
+    {
+      icon: require('@/assets/toolpanel/signal-end-event.svg'),
+      label: defaultNames['processmaker-modeler-signal-end-event'],
+      control: true,
+      rank: 34,
+      id: 'processmaker-modeler-signal-end-event',
+    },
+    {
+      icon: require('@/assets/toolpanel/terminate-end-event.svg'),
+      label: defaultNames['processmaker-modeler-terminate-end-event'],
+      control: true,
+      rank: 35,
+      id: 'processmaker-modeler-terminate-end-event',
+    },
+  ],
   definition(moddle, $t) {
     return moddle.create('bpmn:EndEvent', {
       name: $t(defaultNames[id]),

package/src/components/nodes/exclusiveGateway/index.js

@@ -15,6 +15,36 @@ export default {
   icon: require('@/assets/toolpanel/generic-gateway.svg'),
   label: 'Gateway',
   rank: 50,
+  items: [
+    {
+      icon: require('@/assets/toolpanel/exclusive-gateway.svg'),
+      label: 'Exclusive Gateway',
+      control: true,
+      rank: 51,
+      id: 'processmaker-modeler-exclusive-gateway',
+    },
+    {
+      icon: require('@/assets/toolpanel/inclusive-gateway.svg'),
+      label: 'Inclusive Gateway',
+      control: true,
+      rank: 52,
+      id: 'processmaker-modeler-inclusive-gateway',
+    },
+    {
+      icon: require('@/assets/toolpanel/parallel-gateway.svg'),
+      label: 'Parallel Gateway',
+      control: true,
+      rank: 53,
+      id: 'processmaker-modeler-parallel-gateway',
+    },
+    {
+      icon: require('@/assets/toolpanel/event-based-gateway.svg'),
+      label: 'Event Based Gateway',
+      control: true,
+      rank: 54,
+      id: 'processmaker-modeler-event-based-gateway',
+    },
+  ],
   definition(moddle, $t) {
     return moddle.create('bpmn:ExclusiveGateway', {
       name: $t(defaultNames[id]),

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/index.js

@@ -31,6 +31,7 @@ export { default as pool } from './pool';
 export { default as poolLane } from './poolLane';
 export { default as ValidationStatus } from '../validationStatus/ValidationStatus';
 export { default as Modeler } from '../modeler/Modeler';
+export { default as ModelerReadonly } from '../modeler/ModelerReadonly';
 export { default as manualTask } from './manualTask';
 export { default as boundaryTimerEvent } from './boundaryTimerEvent';
 export { default as boundaryMessageEvent } from './boundaryMessageEvent';

package/src/components/nodes/intermediateTimerEvent/index.js

@@ -17,6 +17,50 @@ export default {
   icon: require('@/assets/toolpanel/generic-intermediate-event.svg'),
   label: 'Intermediate Event',
   rank: 20,
+  items: [
+    {
+      icon: require('@/assets/toolpanel/intermediate-timer-event.svg'),
+      label: 'Intermediate Timer Event',
+      control: true,
+      rank: 21,
+      id: 'processmaker-modeler-intermediate-catch-timer-event',
+    },
+    {
+      icon: require('@/assets/toolpanel/intermediate-signal-catch-event.svg'),
+      label: 'Intermediate Signal Catch Event',
+      control: true,
+      rank: 22,
+      id: 'processmaker-modeler-intermediate-signal-catch-event',
+    },
+    {
+      icon: require('@/assets/toolpanel/intermediate-signal-throw-event.svg'),
+      label: 'Intermediate Signal Throw Event',
+      control: true,
+      rank: 23,
+      id: 'processmaker-modeler-intermediate-signal-throw-event',
+    },
+    {
+      icon: require('@/assets/toolpanel/intermediate-message-catch-event.svg'),
+      label: 'Intermediate Message Catch Event',
+      control: true,
+      rank: 24,
+      id: 'processmaker-modeler-intermediate-message-catch-event',
+    },
+    {
+      icon: require('@/assets/toolpanel/intermediate-message-throw-event.svg'),
+      label: 'Intermediate Message Throw Event',
+      control: true,
+      rank: 25,
+      id: 'processmaker-modeler-intermediate-message-throw-event',
+    },
+    {
+      icon: require('@/assets/toolpanel/intermediate-conditional-catch-event.svg'),
+      label: 'Intermediate Conditional Catch Event',
+      control: true,
+      rank: 26,
+      id: 'processmaker-modeler-intermediate-conditional-catch-event',
+    },
+  ],
   definition(moddle, $t) {
     return moddle.create('bpmn:IntermediateCatchEvent', {
       name: $t(defaultNames[id]),

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/components/nodes/startEvent/index.js

@@ -13,6 +13,49 @@ export default merge(cloneDeep(baseStartEventConfig), {
   icon: require('@/assets/toolpanel/start-event.svg'),
   label: defaultNames[id],
   rank: 10,
+  items: [
+    {
+      icon: require('@/assets/toolpanel/start-event.svg'),
+      label: defaultNames[id],
+      control: true,
+      bpmnType: 'bpmn:StartEvent',
+      rank: 10,
+      id: 'processmaker-modeler-start-event',
+    },
+    {
+      icon: require('@/assets/toolpanel/message-start-event.svg'),
+      label: defaultNames['processmaker-modeler-message-start-event'],
+      control: true,
+      bpmnType: 'bpmn:StartEvent',
+      rank: 11,
+      id: 'processmaker-modeler-message-start-event',
+    },
+    {
+      icon: require('@/assets/toolpanel/conditional-start-event.svg'),
+      label: defaultNames['processmaker-modeler-conditional-start-event'],
+      control: true,
+      bpmnType: 'bpmn:StartEvent',
+      rank: 12,
+      id: 'processmaker-modeler-conditional-start-event',
+    },
+    {
+      icon: require('@/assets/toolpanel/signal-start-event.svg'),
+      label: defaultNames['processmaker-modeler-signal-start-event'],
+      control: true,
+      bpmnType: 'bpmn:StartEvent',
+      rank: 13,
+      id: 'processmaker-modeler-signal-start-event',
+    },
+    {
+      icon: require('@/assets/toolpanel/timer-start-event.svg'),
+      label: defaultNames['processmaker-modeler-start-timer-event'],
+      control: true,
+      bpmnType: 'bpmn:StartEvent',
+      rank: 14,
+      id: 'processmaker-modeler-start-timer-event',
+
+    },
+  ],
   definition(moddle, $t) {
     return moddle.create('bpmn:StartEvent', {
       name: $t(defaultNames[id]),

package/src/components/nodes/task/index.js

@@ -19,6 +19,36 @@ export default {
   rank: 40,
   icon: require('@/assets/toolpanel/task.svg'),
   label: 'Task',
+  items: [
+    {
+      icon: require('@/assets/toolpanel/task.svg'),
+      label: 'Form Task',
+      control: true,
+      rank: 41,
+      id: 'processmaker-modeler-task',
+    },
+    {
+      icon: require('@/assets/toolpanel/manual-task.svg'),
+      label: 'Manual Task',
+      control: true,
+      rank: 42,
+      id: 'processmaker-modeler-manual-task',
+    },
+    {
+      icon: require('@/assets/toolpanel/script-task.svg'),
+      label: 'Script Task',
+      control: true,
+      rank: 43,
+      id: 'processmaker-modeler-script-task',
+    },
+    {
+      icon: require('@/assets/toolpanel/sub-task.svg'),
+      label: 'Sub Process',
+      control: true,
+      rank: 44,
+      id: 'processmaker-modeler-call-activity',
+    },
+  ],
   definition(moddle, $t) {
     return moddle.create('bpmn:Task', {
       name: $t(defaultNames[id]),