@processmaker/modeler 1.40.3 → 1.42.0

package/package.json

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

package/src/components/modeler/Modeler.vue

@@ -497,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) {
@@ -1120,6 +1128,8 @@ export default {
       const diagram = this.nodeRegistry[data.type].diagram(this.moddle);
       diagram.bounds.x = data.x;
       diagram.bounds.y = data.y;
+      diagram.bounds.width = data.width;
+      diagram.bounds.height = data.height;
       const newNode = this.createNode(data.type, definition, diagram);
       //verify if the node has a pool as a container
       if (data.poolId) {
@@ -1218,7 +1228,9 @@ export default {
             gatewayDirection: null,
             messageRef: null,
             signalRef: null,
+            signalPayload: null,
             extras: {},
+            default: null,
           };
           if (node?.pool?.component) {
             defaultData['poolId'] = node.pool.component.id;

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

@@ -599,9 +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,38 +623,41 @@ export default {
           const boundariesChanges = this.getBoundariesChangesForShape(shape);
           changed = changed.concat(boundariesChanges);
         });
-        
+
       return changed;
     },
     /**
      * Get connected link properties
-     * @param {Array} links 
+     * @param {Array} links
      */
     getConnectedLinkProperties(links) {
       let changed = [];
       links.forEach((linkView) => {
-        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,
-            },
+        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;
     },
@@ -689,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,
@@ -701,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;
     },

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

@@ -58,6 +58,11 @@ export default {
     const definition = modeler.moddle.create('bpmn:Lane', {
       name: data.name,
     });
+    // Set the position of the pool
+    if (data.poolX && data.poolY) {
+      pool.set('position', { x: data.poolX, y: data.poolY });
+    }
+
     if (!pool.component.laneSet && pool.component.createLaneSet) {
       pool.component.createLaneSet([data.laneSetId]);
       /* If there are currently elements in the pool, add them to the first lane */
@@ -81,6 +86,10 @@ export default {
       definition,
       diagram,
     );
+
+    // Set the pool as the parent of the lane
+    node.pool = pool;
+
     await modeler.addNode(node, data.id, true);
     modeler.setShapeStacking(pool.component.shape);
 

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/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 });
+  }
+}