@processmaker/modeler 1.40.2 → 1.41.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/modeler",
-  "version": "1.40.2",
+  "version": "1.41.0",
   "scripts": {
     "serve": "vue-cli-service serve --mode development",
     "test:unit": "vue-cli-service test:unit",

package/src/components/inspectors/InspectorPanel.vue

@@ -102,6 +102,8 @@ export default {
     'highlightedNode.definition.assignedUsers'(current, previous) { this.handleAssignmentChanges(current, previous); },
     'highlightedNode.definition.assignedGroups'(current, previous) { this.handleAssignmentChanges(current, previous); },
     'highlightedNode.definition.assignmentRules'(current, previous) { this.handleAssignmentChanges(current, previous); },
+    'highlightedNode.definition.allowInterstitial'(current, previous) { this.handleAssignmentChanges(current, previous); },
+    'highlightedNode.definition.interstitialScreenRef'(current, previous) { this.handleAssignmentChanges(current, previous); },
   },
   computed: {
     inspectorHeaderTitle() {
@@ -254,7 +256,7 @@ export default {
     defaultInspectorHandler(value, isMultiplayer) {
       /* Go through each property and rebind it to our data */
       for (const key in omit(value, ['$type', 'eventDefinitions'])) {
-        if (this.highlightedNode.definition.get(key) !== value[key]) {        
+        if (this.highlightedNode.definition.get(key) !== value[key]) {
           this.multiplayerHook(key, value[key], isMultiplayer);
           this.setNodeProp(this.highlightedNode, key, value[key]);
         }

package/src/components/modeler/Modeler.vue

@@ -238,6 +238,7 @@ import ProcessmakerModelerGenericFlow from '@/components/nodes/genericFlow/gener
 import Selection from './Selection';
 import RemoteCursor from '@/components/multiplayer/remoteCursor/RemoteCursor.vue';
 import Multiplayer from '@/multiplayer/multiplayer';
+import { getBoundaryEventData } from '../nodes/boundaryEvent/boundaryEventUtils';
 
 export default {
   components: {
@@ -354,6 +355,13 @@ export default {
         'processmaker-modeler-data-output-association',
         'processmaker-modeler-association',
       ],
+      boundaryEventTypes: [
+        'processmaker-modeler-boundary-timer-event',
+        'processmaker-modeler-boundary-error-event',
+        'processmaker-modeler-boundary-signal-event',
+        'processmaker-modeler-boundary-conditional-event',
+        'processmaker-modeler-boundary-message-event',
+      ],
     };
   },
   watch: {
@@ -489,6 +497,14 @@ export default {
       if (source.default && source.default.id === flow.id) {
         flow = null;
       }
+      window.ProcessMaker.EventBus.$emit('multiplayer-updateNodes', [
+        {
+          id: source.id,
+          properties: {
+            default: flow?.id || null,
+          },
+        },
+      ]);
       source.set('default', flow);
     },
     cloneElement(node, copyCount) {
@@ -1184,11 +1200,7 @@ export default {
         'processmaker-modeler-sequence-flow',
         'processmaker-modeler-association',
         'processmaker-modeler-data-input-association',
-        'processmaker-modeler-boundary-timer-event',
-        'processmaker-modeler-boundary-error-event',
-        'processmaker-modeler-boundary-signal-event',
-        'processmaker-modeler-boundary-conditional-event',
-        'processmaker-modeler-boundary-message-event',
+        ...this.boundaryEventTypes,
       ];
       if (!this.isMultiplayer) {
         return;
@@ -1214,7 +1226,9 @@ export default {
             gatewayDirection: null,
             messageRef: null,
             signalRef: null,
+            signalPayload: null,
             extras: {},
+            default: null,
           };
           if (node?.pool?.component) {
             defaultData['poolId'] = node.pool.component.id;
@@ -1305,6 +1319,8 @@ export default {
       });
     },
     async addClonedNodes(nodes) {
+      const flowNodes = [];
+
       nodes.forEach(node => {
         if (!node.pool) {
           node.pool = this.poolTarget;
@@ -1314,10 +1330,24 @@ export default {
         addNodeToProcess(node, targetProcess);
 
         this.planeElements.push(node.diagram);
-        this.multiplayerHook(node, false);
+
+        if (this.flowTypes.includes(node.type)) {
+          // Add flow to array to render after
+          flowNodes.push(node);
+        } else if (this.boundaryEventTypes.includes(node.type)) {
+          // Get boundary event data
+          const defaultData = getBoundaryEventData(node);
+          window.ProcessMaker.EventBus.$emit('multiplayer-addBoundaryEvent', defaultData);
+        } else {
+          this.multiplayerHook(node, false);
+        }
+
         store.commit('addNode', node);
         this.poolTarget = null;
       });
+
+      // Render flows after all nodes have been added
+      flowNodes.forEach(node => this.multiplayerHook(node, false));
     },
     async removeNode(node, options) {
       // Check if the node is not replaced

package/src/components/modeler/NodeMigrator.js

@@ -19,13 +19,22 @@ export class NodeMigrator {
       const shape = this._graph.getLinks().find(element => {
         return element.component && element.component.node.definition === definition;
       });
-      shape.component.node._modelerId += '_replaced';
+      const { node } = shape.component;
+      node._modelerId += '_replaced';
+      const waypoint = [];
+      node.diagram.waypoint?.forEach(point => {
+        waypoint.push({
+          x: point.x,
+          y: point.y,
+        });
+      });
       flowNodes.push({
-        id: shape.component.node.definition.id,
-        type: shape.component.node.type,
-        name: shape.component.node.definition.name,
-        sourceRefId: shape.component.node.definition.sourceRef.id,
-        targetRefId: shape.component.node.definition.targetRef.id,
+        id: node.definition.id,
+        type: node.type,
+        name: node.definition.name,
+        waypoint,
+        sourceRefId: node.definition.sourceRef.id,
+        targetRefId: node.definition.targetRef.id,
       });
     };
 

package/src/components/modeler/Selection.vue

@@ -347,7 +347,7 @@ export default {
      */
     prepareConectedLinks(shapes){
       const { paper } = this.paperManager;
-      this.conectedLinks = [];
+      this.connectedLinks = [];
       this.isValidSelectionLinks = true;
       shapes.forEach((shape) => {
         let conectedLinks = this.graph.getConnectedLinks(shape.model);
@@ -368,8 +368,8 @@ export default {
         }
         conectedLinks.forEach((link) => {
           const linkView = paper.findViewByModel(link);
-          if (!this.conectedLinks.some(obj => obj.id === linkView.id)) {
-            this.conectedLinks.push(linkView);
+          if (!this.connectedLinks.some(obj => obj.id === linkView.id)) {
+            this.connectedLinks.push(linkView);
             this.validateSelectionLinks(linkView);
           }
         });
@@ -585,6 +585,7 @@ export default {
       this.updateSelectionBox();
       if (this.isMultiplayer) {
         window.ProcessMaker.EventBus.$emit('multiplayer-updateNodes', this.getProperties(this.selected));
+        window.ProcessMaker.EventBus.$emit('multiplayer-updateNodes', this.getConnectedLinkProperties(this.connectedLinks));
       }
     },
 
@@ -598,10 +599,9 @@ export default {
       shapes.filter(shape => !shapesToNotTranslate.includes(shape.model.get('type')))
         .forEach(shape => {
           if (shape.model.get('type') === 'processmaker.modeler.bpmn.pool') {
-            const childrens = shape.model.component.getElementsUnderArea(shape.model, this.graph)
+            const children = shape.model.component.getElementsUnderArea(shape.model, this.graph)
               .filter((element) => element.component);
-
-            changed = [...changed, ...this.getContainerProperties(childrens, changed)];
+            changed = [...changed, ...this.getContainerProperties(children, changed)];
           } else {
             const { node } = shape.model.component;
             const defaultData = {
@@ -623,7 +623,42 @@ export default {
           const boundariesChanges = this.getBoundariesChangesForShape(shape);
           changed = changed.concat(boundariesChanges);
         });
-        
+
+      return changed;
+    },
+    /**
+     * Get connected link properties
+     * @param {Array} links
+     */
+    getConnectedLinkProperties(links) {
+      let changed = [];
+      links.forEach((linkView) => {
+        const vertices = linkView.model.component.shape.vertices();
+        if (vertices?.length) {
+          const waypoint = [];
+          const { node } =  linkView.model.component;
+
+          node.diagram.waypoint?.forEach(point => {
+            waypoint.push({
+              x: point.x,
+              y: point.y,
+            });
+          });
+          const sourceRefId = linkView.sourceView.model.component.node.definition.id;
+          const targetRefId = linkView.targetView.model.component.node.definition.id;
+          const nodeType = linkView.model.component.node.type;
+          changed.push(
+            {
+              id: node.definition.id,
+              properties: {
+                type: nodeType,
+                waypoint,
+                sourceRefId,
+                targetRefId,
+              },
+            });
+        }
+      });
       return changed;
     },
     /**
@@ -657,10 +692,11 @@ export default {
       });
       return boundariesChanged;
     },
-    getContainerProperties(childrens) {
+    getContainerProperties(children) {
       const changed = [];
-      childrens.forEach(model => {
-        changed.push({
+
+      children.forEach(model => {
+        const defaultData = {
           id: model.component.node.definition.id,
           properties: {
             x: model.get('position').x,
@@ -669,7 +705,13 @@ export default {
             width: model.get('size').width,
             color: model.get('color'),
           },
-        });
+        };
+
+        if (model.component.node.definition.$type === 'bpmn:BoundaryEvent') {
+          defaultData.properties.attachedToRefId = model.component.node.definition.get('attachedToRef')?.id ?? null;
+        }
+
+        changed.push(defaultData);
       });
       return changed;
     },
@@ -677,7 +719,7 @@ export default {
      * Selector will update the waypoints of the related flows
      */
     updateFlowsWaypoint(){
-      this.conectedLinks.forEach((link)=> {
+      this.connectedLinks.forEach((link)=> {
         if (link.model.component && link.model.get('type') === 'standard.Link'){
           const start = link.sourceAnchor;
           const end = link.targetAnchor;
@@ -885,7 +927,7 @@ export default {
         if (this.newPool){
           /* Remove the shape from its current pool */
           this.moveElements(this.selected, this.oldPool, this.newPool);
-          this.moveConectedLinks(this.conectedLinks, this.oldPool, this.newPool);
+          this.moveConnectedLinks(this.connectedLinks, this.oldPool, this.newPool);
           this.newPool = null;
           this.oldPool = null;
           this.updateLaneChildren(this.selected);
@@ -1025,7 +1067,7 @@ export default {
           oldPool.model.component.moveElement(shape.model, newPool.model);
         });
     },
-    moveConectedLinks(links, oldPool, newPool){
+    moveConnectedLinks(links, oldPool, newPool){
       links.forEach(link => {
         oldPool.model.component.moveFlow(link.model, newPool.model);
       });

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

@@ -15,13 +15,9 @@ export const setEventTimerDefinition = (moddle, node, type, body) => {
     [type]: moddle.create('bpmn:Expression', { body }),
   };
 
-  const eventDefinitions = [
+  return [
     moddle.create('bpmn:TimerEventDefinition', eventDefinition),
   ];
-
-  eventDefinitions[0].id = node.definition.get('eventDefinitions')[0].id;
-
-  return eventDefinitions;
 };
 
 export default merge(cloneDeep(boundaryEventConfig), {
@@ -73,9 +69,7 @@ export default merge(cloneDeep(boundaryEventConfig), {
         }
 
         const eventDefinitions = setEventTimerDefinition(moddle, node, type, body);
-
         setNodeProp(node, 'eventDefinitions', eventDefinitions);
-
         window.ProcessMaker.EventBus.$emit('multiplayer-updateInspectorProperty', {
           id: node.definition.id,
           key: 'eventTimerDefinition',

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

@@ -35,10 +35,18 @@ export default {
     });
   },
   inspectorHandler(value, node, setNodeProp) {
-
-    setNodeProp(node, 'id', value.id);
-    setNodeProp(node, 'name', value.name);
-
+    if (node.definition.get('id') !== value['id']) {
+      window.ProcessMaker.EventBus.$emit('multiplayer-updateInspectorProperty', {
+        id: node.definition.id, key: 'id', value: value.id,
+      });
+      setNodeProp(node, 'id', value.id);
+    }
+    if (node.definition.get('name') !== value['name']) {
+      window.ProcessMaker.EventBus.$emit('multiplayer-updateInspectorProperty', {
+        id: node.definition.id, key: 'name', value: value.name,
+      });
+      setNodeProp(node, 'name', value.name);
+    }
     const currentConfig = JSON.parse(value.config);
 
     value['calledElement'] = currentConfig.calledElement;

package/src/components/topRail/multiplayerViewUsers/MultiplayerViewUsers.vue

@@ -1,7 +1,13 @@
 <template>
   <b-avatar-group class="container" v-show="isMultiplayer">
     <template v-for="item in filteredPlayers" >
-      <Avatar :badgeBackgroundColor="item.color" :imgSrc="item.avatar" :userName="item.name" :key="item.key"/>
+      <Avatar
+        :badgeBackgroundColor="item.color"
+        :imgSrc="item.avatar"
+        :userName="item.name"
+        :id="item.id"
+        :key="item.id"
+      />
     </template>
   </b-avatar-group> 
 </template>

package/src/components/topRail/multiplayerViewUsers/avatar/Avatar.vue

@@ -3,16 +3,18 @@
     class="b-avatar rounded-circle"
     :style="{'backgroundColor': generateColorHsl(userName, saturationRange, lightnessRange)}"
   >
-    <span v-if="imgSrc" class="b-avatar-img">
-      <img :src="imgSrc" :alt=userName>
+    <span v-if="imgSrc" class="b-avatar-img" :id="id">
+      <img :src="imgSrc" :alt="userName">
     </span>
-    <span v-else class="b-avatar-text avatar-initials">
+    <span v-else class="b-avatar-text avatar-initials" :id="id">
       <span>
         {{ this.getInitials(userName) }}
       </span>
-
     </span>
-    <span class="b-avatar-badge badge-danger"
+    <b-tooltip :target="id" triggers="hover">
+      {{ userName }}
+    </b-tooltip>
+    <span v-if="badgeBackgroundColor" class="b-avatar-badge badge-danger"
       :style="{bottom: '0px', right: '0px', backgroundColor: badgeBackgroundColor}" 
     />
   </span>
@@ -34,6 +36,10 @@ export default {
       type: String,
       required: false,
     },
+    id: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     return {

package/src/mixins/cloneSelection.js

@@ -47,7 +47,6 @@ export default {
             if (node.definition && node.definition.$type !== 'bpmn:BoundaryEvent') {
               clonedNodes.push(clonedElement);
             }  else {
-              clonedElement.fromCrown = true;
               clonedBoundaryEvents.push(clonedElement);
             }
           }

package/src/multiplayer/inspector.utils.js

@@ -0,0 +1,99 @@
+import { setEventTimerDefinition } from '@/components/nodes/boundaryTimerEvent';
+
+export class InspectorUtils {
+  constructor(modeler, store) {
+    this.modeler = modeler;
+    this.store = store;
+  }
+
+  isSpecialProperty(key) {
+    const specialProperties = [
+      'messageRef', 'signalRef', 'signalPayload', 'gatewayDirection', 'condition', 'allowedUsers', 'allowedGroups',
+    ];
+    return specialProperties.includes(key);
+  }
+
+  updateNodeId(oldNodeId, newId) {
+    const index = this.getIndex(oldNodeId);
+    const yNode = this.yArray.get(index);
+    yNode.set('id', newId);
+    const node = this.getNodeById(oldNodeId);
+    this.store.commit('updateNodeProp', { node, key: 'id', value: newId });
+  }
+
+  handleLoopCharacteristics(node, loopCharacteristics) {
+    const parsedLoopCharacteristics = JSON.parse(loopCharacteristics);
+    this.modeler.nodeRegistry[node.type].loopCharacteristicsHandler({
+      type: node.definition.type,
+      '$loopCharactetistics': {
+        id: node.id,
+        loopCharacteristics: parsedLoopCharacteristics,
+      },
+    }, node, this.setNodeProp, this.modeler.moddle, this.modeler.definitions, false);
+  }
+
+  updateEventCondition(definition, value) {
+    definition.get('eventDefinitions')[0].get('condition').body = value;
+  }
+
+  updateGatewayDirection(definition, value) {
+    definition.set('gatewayDirection', value);
+  }
+
+  updateNodeProperty(node, key, value) {
+    this.store.commit('updateNodeProp', { node, key, value });
+  }
+
+  updateMessageRef(node, value, extras) {
+    let message = this.modeler.definitions.rootElements.find(element => element.id === value);
+
+    if (!message) {
+      message = this.modeler.moddle.create('bpmn:Message', {
+        id: value,
+        name: extras?.messageName || value,
+      });
+      this.modeler.definitions.rootElements.push(message);
+    }
+
+    node.definition.get('eventDefinitions')[0].messageRef = message;
+
+    if (extras?.allowedUsers) {
+      node.definition.set('allowedUsers', extras.allowedUsers);
+    }
+
+    if (extras?.allowedGroups) {
+      node.definition.set('allowedGroups', extras.allowedGroups);
+    }
+  }
+
+  updateSignalRef(node, value, extras) {
+    let signal = this.modeler.definitions.rootElements.find(element => element.id === value);
+
+    if (!signal) {
+      signal = this.modeler.moddle.create('bpmn:Signal', {
+        id: value,
+        name: extras?.signalName || value,
+      });
+      this.modeler.definitions.rootElements.push(signal);
+    }
+
+    node.definition.get('eventDefinitions')[0].signalRef = signal;
+  }
+
+  updateSignalPayload(node, value) {
+    const eventDefinitions = node.definition.get('eventDefinitions');
+    const SIGNAL_EVENT_DEFINITION_TYPE = 'bpmn:SignalEventDefinition';
+
+    eventDefinitions.forEach(definition => {
+      if (definition.$type === SIGNAL_EVENT_DEFINITION_TYPE) {
+        definition.config = value;
+      }
+    });
+  }
+
+  updateEventTimerDefinition(node, value) {
+    const { type, body } = value;
+    const eventDefinitions = setEventTimerDefinition(this.modeler.moddle, node, type, body);
+    this.store.commit('updateNodeProp', { node, key: 'eventDefinitions', value: eventDefinitions });
+  }
+}