@processmaker/modeler 1.39.18 → 1.39.20

package/package.json

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

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

@@ -137,6 +137,20 @@ export default {
       store.commit('updateNodeProp', { node: this.node, key: 'color', value: color });
       Vue.set(this.node.definition, 'color', color);
       this.$emit('save-state');
+      
+      const properties = {
+        id: this.node.definition.id,
+        properties: {
+          color: this.node.definition.color,
+          x: this.node.diagram.bounds.x,
+          y: this.node.diagram.bounds.y,
+          height: this.node.diagram.bounds.height,
+          width: this.node.diagram.bounds.width,
+          type: this.node.type,
+          id: this.node.definition.id,
+        },
+      };
+      window.ProcessMaker.EventBus.$emit('multiplayer-updateNodes', [properties]);
     },
     resetNodeColor() {
       store.commit('updateNodeProp', { node: this.node, key: 'color', value: undefined });

package/src/components/modeler/Modeler.vue

@@ -189,7 +189,7 @@ import getValidationProperties from '@/targetValidationUtils';
 import { id as laneId } from '@/components/nodes/poolLane/config';
 import { id as processId } from '@/components/inspectors/process';
 import { id as sequenceFlowId } from '../nodes/sequenceFlow';
-import { id as associationId } from '../nodes/association';
+import { id as associationId } from '../nodes/association/associationConfig';
 import { id as messageFlowId } from '../nodes/messageFlow/config';
 import { id as dataOutputAssociationFlowId } from '../nodes/dataOutputAssociation/config';
 import { id as dataInputAssociationFlowId } from '../nodes/dataInputAssociation/config';
@@ -332,6 +332,13 @@ export default {
       previewConfigs: [],
       multiplayer: null,
       isMultiplayer: false,
+      flowTypes: [
+        'processmaker-modeler-sequence-flow',
+        'processmaker-modeler-message-flow',
+        'processmaker-modeler-data-input-association',
+        'processmaker-modeler-data-output-association',
+        'processmaker-modeler-association',
+      ],
     };
   },
   watch: {
@@ -1052,7 +1059,7 @@ export default {
         this.validateBpmnDiagram();
       }
     },
-    
+
     async handleDrop(data) {
       const { clientX, clientY, control, nodeThatWillBeReplaced } = data;
       this.validateDropTarget({ clientX, clientY, control });
@@ -1112,17 +1119,15 @@ export default {
         'processmaker-modeler-sequence-flow',
         'processmaker-modeler-association',
         'processmaker-modeler-data-input-association',
-        'processmaker-modeler-data-input-association',
-      ];
-      const flowTypes = [
-        'processmaker-modeler-sequence-flow',
-        'processmaker-modeler-message-flow',
+        'processmaker-modeler-data-output-association',
       ];
+
       if (!this.isMultiplayer) {
         return;
       }
+
       if (!fromClient) {
-        if (!blackList.includes(node.type) && !flowTypes.includes(node.type)) {
+        if (!blackList.includes(node.type) && !this.flowTypes.includes(node.type)) {
           const defaultData = {
             x: node.diagram.bounds.x,
             y: node.diagram.bounds.y,
@@ -1131,20 +1136,31 @@ export default {
             type: node.type,
             id: node.definition.id,
             isAddingLaneAbove: true,
+            color: node.color,
           };
           if (node?.pool?.component) {
             defaultData['poolId'] = node.pool.component.id;
           }
           window.ProcessMaker.EventBus.$emit('multiplayer-addNode', defaultData);
         }
-        if (flowTypes.includes(node.type)) {
-          window.ProcessMaker.EventBus.$emit('multiplayer-addFlow', {
-            id: node.definition.id,
-            type: node.type,
-            sourceRefId: node.definition.sourceRef.id,
-            targetRefId: node.definition.targetRef.id,
-            waypoint: node.diagram.waypoint,
-          });
+        if (this.flowTypes.includes(node.type)) {
+          let sourceRefId = node.definition.sourceRef?.id;
+          let targetRefId = node.definition.targetRef?.id;
+
+          if (node.type === 'processmaker-modeler-data-input-association') {
+            sourceRefId = Array.isArray(node.definition.sourceRef) && node.definition.sourceRef[0]?.id;
+            targetRefId = node.definition.targetRef?.$parent?.$parent.get('id');
+          }
+
+          if (sourceRefId && targetRefId) {
+            window.ProcessMaker.EventBus.$emit('multiplayer-addFlow', {
+              id: node.definition.id,
+              type: node.type,
+              sourceRefId,
+              targetRefId,
+              waypoint: node.diagram.waypoint,
+            });
+          }
         }
       }
     },
@@ -1338,9 +1354,10 @@ export default {
         await this.paperManager.performAtomicAction(async() => {
           await this.highlightNode(null);
           await this.$nextTick();
-          await this.addNode(actualFlow);
           await store.commit('removeNode', genericFlow);
           await this.$nextTick();
+          await this.addNode(actualFlow, genericFlow.definition.id);
+          await this.$nextTick();
           await this.highlightNode(targetNode);
         });
       });

package/src/components/modeler/Selection.vue

@@ -31,7 +31,7 @@ import { id as poolId } from '@/components/nodes/pool/config';
 import { id as laneId } from '@/components/nodes/poolLane/config';
 import { id as genericFlowId } from '@/components/nodes/genericFlow/config';
 import { id as sequenceFlowId } from '@/components/nodes/sequenceFlow';
-import { id as associationId } from '@/components/nodes/association';
+import { id as associationId } from '@/components/nodes/association/associationConfig';
 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';
@@ -577,7 +577,7 @@ export default {
       await this.paperManager.awaitScheduledUpdates();
       this.overPoolStopDrag();
       this.updateSelectionBox();
-      if (this.isMultiplayer) { 
+      if (this.isMultiplayer) {
         window.ProcessMaker.EventBus.$emit('multiplayer-updateNodes', this.getProperties(this.selected));
       }
     },
@@ -604,6 +604,7 @@ export default {
                 y: shape.model.get('position').y,
                 height: shape.model.get('size').height,
                 width: shape.model.get('size').width,
+                color: shape.model.get('color'),
               },
             };
             if (node?.pool?.component) {
@@ -624,6 +625,7 @@ export default {
             y: model.get('position').y,
             height: model.get('size').height,
             width: model.get('size').width,
+            color: model.get('color'),
           },
         });
       });

package/src/components/nodes/association/AssociationFlow.js

@@ -0,0 +1,27 @@
+import Node from '@/components/nodes/node';
+import * as associationConfig from './associationConfig';
+
+export class AssociationFlow {
+  constructor(nodeRegistry, moddle, paper) {
+    this.nodeRegistry = nodeRegistry;
+    this.moddle = moddle;
+    this.paper = paper;
+  }
+
+  makeFlowNode(sourceShape, targetShape, waypoint) {
+    const diagram = associationConfig.diagram(this.moddle);
+    const associationFlow = associationConfig.definition(this.moddle);
+
+    associationFlow.set('sourceRef', sourceShape.component.node.definition);
+    associationFlow.set('targetRef', targetShape.component.node.definition);
+
+    diagram.waypoint = waypoint.map(point => this.moddle.create('dc:Point', point));
+
+    const node = new Node(
+      associationConfig.id,
+      associationFlow,
+      diagram,
+    );
+    return node;
+  }
+}

package/src/components/nodes/association/associationConfig.js

@@ -1 +1,16 @@
+export const id = 'processmaker-modeler-association';
+
+export const bpmnType = 'bpmn:Association';
+
 export const direction = { none: 'None', one: 'One', both: 'Both' };
+
+export function definition(moddle) {
+  return moddle.create(bpmnType, {
+    associationDirection: direction.none,
+    targetRef: { x: undefined, y: undefined },
+  });
+}
+
+export function diagram(moddle) {
+  return moddle.create('bpmndi:BPMNEdge');
+}

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

@@ -1,22 +1,16 @@
+import { getNodeIdGenerator } from '@/NodeIdGenerator';
 import component from './association.vue';
-import { direction } from './associationConfig';
+import { id, bpmnType, direction, definition, diagram } from './associationConfig';
 import idConfigSettings from '@/components/inspectors/idConfigSettings';
-
-export const id  = 'processmaker-modeler-association';
+import { AssociationFlow } from './AssociationFlow';
 
 export default {
   id,
   component,
-  bpmnType: 'bpmn:Association',
+  bpmnType,
   control: false,
-  definition(moddle) {
-    return moddle.create('bpmn:Association', {
-      associationDirection: `${direction.none}`,
-    });
-  },
-  diagram(moddle) {
-    return moddle.create('bpmndi:BPMNEdge');
-  },
+  definition,
+  diagram,
   inspectorConfig: [
     {
       name: 'Data Association',
@@ -53,4 +47,17 @@ export default {
       ],
     },
   ],
+  async multiplayerClient(modeler, data) {
+    const { paper } = modeler;
+    const sourceElem = modeler.getElementByNodeId(data.sourceRefId);
+    const targetElem = modeler.getElementByNodeId(data.targetRefId);
+    if (sourceElem && targetElem) {
+      const flow = new AssociationFlow(modeler.nodeRegistry, modeler.moddle, paper);
+      const actualFlow = flow.makeFlowNode(sourceElem, targetElem, data.waypoint);
+      // add Nodes
+      modeler.addNode(actualFlow, data.id, true);
+      const nodeIdIterator = getNodeIdGenerator(modeler.definitions);
+      nodeIdIterator.updateCounters();
+    }
+  },
 };

package/src/components/nodes/dataInputAssociation/DataInputAssociation.js

@@ -0,0 +1,30 @@
+import Node from '@/components/nodes/node';
+import * as associationConfig from './config';
+import { getOrFindDataInput } from '@/components/crown/utils';
+
+export class DataInputAssociation {
+  constructor(nodeRegistry, moddle, paper) {
+    this.nodeRegistry = nodeRegistry;
+    this.moddle = moddle;
+    this.paper = paper;
+  }
+
+  makeFlowNode(sourceShape, targetShape, waypoint) {
+    const diagram = associationConfig.diagram(this.moddle);
+    const associationFlow = associationConfig.definition(this.moddle);
+
+    // When saving the BPMN, if this is not an array the sourceRef is not stored
+    const dataInput = getOrFindDataInput(this.moddle, targetShape.component.node, sourceShape.component.node.definition);
+    associationFlow.set('targetRef', dataInput);
+    associationFlow.set('sourceRef', [sourceShape.component.node.definition]);
+
+    diagram.waypoint = waypoint.map(point => this.moddle.create('dc:Point', point));
+
+    const node = new Node(
+      associationConfig.id,
+      associationFlow,
+      diagram,
+    );
+    return node;
+  }
+}

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

@@ -1,6 +1,8 @@
 import component from './dataInputAssociation.vue';
 import idConfigSettings from '@/components/inspectors/idConfigSettings';
 import * as config from './config';
+import { DataInputAssociation } from './DataInputAssociation';
+import { getNodeIdGenerator } from '@/NodeIdGenerator';
 
 export default {
   ...config,
@@ -29,4 +31,19 @@ export default {
       ],
     },
   ],
+  async multiplayerClient(modeler, data) {
+    const { paper } = modeler;
+    const sourceElem = modeler.getElementByNodeId(data.sourceRefId);
+    const targetElem = modeler.getElementByNodeId(data.targetRefId);
+    if (sourceElem && targetElem) {
+      const flow = new DataInputAssociation(modeler.nodeRegistry, modeler.moddle, paper);
+      const actualFlow = flow.makeFlowNode(sourceElem, targetElem, data.waypoint);
+
+      targetElem.component.node.definition.set('dataInputAssociations', [actualFlow.definition]);
+      // add Nodes
+      modeler.addNode(actualFlow, data.id, true);
+      const nodeIdIterator = getNodeIdGenerator(modeler.definitions);
+      nodeIdIterator.updateCounters();
+    }
+  },
 };

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

@@ -1,6 +1,8 @@
 import component from './dataOutputAssociation.vue';
 import idConfigSettings from '@/components/inspectors/idConfigSettings';
 import * as config from './config';
+import { getNodeIdGenerator } from '@/NodeIdGenerator';
+import DataOutputAssociation from '../genericFlow/DataOutputAssociation';
 
 export default {
   ...config,
@@ -29,4 +31,17 @@ export default {
       ],
     },
   ],
+  async multiplayerClient(modeler, data) {
+    const { paper } = modeler;
+    const sourceElem = modeler.getElementByNodeId(data.sourceRefId);
+    const targetElem = modeler.getElementByNodeId(data.targetRefId);
+    if (sourceElem && targetElem) {
+      const flow = new DataOutputAssociation(modeler.nodeRegistry, modeler.moddle, paper);
+      const actualFlow = flow.makeFlowNode(sourceElem, targetElem, data.waypoint);
+      // add Nodes
+      modeler.addNode(actualFlow, data.id, true);
+      const nodeIdIterator = getNodeIdGenerator(modeler.definitions);
+      nodeIdIterator.updateCounters();
+    }
+  },
 };

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

@@ -55,7 +55,7 @@ export default class DataOutputAssociation extends DataAssociation {
     const sourceIsDataObject = sourceNode.definition.$type === 'bpmn:DataObjectReference';
     const targetIsDataStore = targetNode.definition.$type === 'bpmn:DataStoreReference';
     const targetIsDataObject = targetNode.definition.$type === 'bpmn:DataObjectReference';
-    
+
     if (sourceIsDataStore && dataStoreValidTargets.includes(targetType)) {
       return true;
     }

package/src/components/nodes/genericFlow/genericFlow.vue

@@ -109,6 +109,7 @@ export default {
       const flow = new bpmnFlow.factory(this.nodeRegistry, this.moddle, this.paper);
       const genericLink = this.shape.findView(this.paper);
       const waypoint =  [genericLink.sourceAnchor.toJSON(), genericLink.targetAnchor.toJSON()];
+
       this.$emit('replace-generic-flow', {
         actualFlow: flow.makeFlowNode(this.sourceShape, this.target, waypoint),
         genericFlow: this.node,

package/src/mixins/cloneSelection.js

@@ -1,6 +1,6 @@
 import { id as laneId } from '../components/nodes/poolLane/config';
 import { id as sequenceFlowId } from '../components/nodes/sequenceFlow';
-import { id as associationId } from '../components/nodes/association';
+import { id as associationId } from '../components/nodes/association/associationConfig';
 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';

package/src/mixins/linkConfig.js

@@ -23,6 +23,7 @@ export default {
   props: ['highlighted', 'paper', 'paperManager', 'isCompleted', 'isIdle'],
   data() {
     return {
+      linkView: null,
       sourceShape: null,
       target: null,
       listeningToMouseup: false,
@@ -163,6 +164,31 @@ export default {
         this.updateWaypoints();
         await this.$nextTick();
 
+        if (this.$parent.isMultiplayer && this.linkView) {
+          // update waypoints in multiplayer mode
+          const nodeType = this.linkView.model.component.node.type;
+          const sourceRefId = this.linkView.sourceView.model.component.node.definition.id;
+          const targetRefId = this.linkView.targetView.model.component.node.definition.id;
+
+          const changes = [
+            {
+              id: this.linkView.model.component.node.definition.id,
+              properties: {
+                type: nodeType,
+                waypoint: [
+                  this.linkView.sourceAnchor.toJSON(),
+                  ...this.shape.vertices(),
+                  this.linkView.targetAnchor.toJSON(),
+                ],
+                sourceRefId,
+                targetRefId,
+              },
+            },
+          ];
+
+          window.ProcessMaker.EventBus.$emit('multiplayer-updateNodes', changes);
+        }
+
         this.listeningToMouseleave = true;
         this.$emit('save-state');
       }
@@ -174,14 +200,15 @@ export default {
       * @param {Object} options
       */
     async onChangeTargets(link, vertices, options){
-      if (options && options.ui) {
+      if (options?.ui) {
         await this.$nextTick();
         await this.waitForUpdateWaypoints();
+        this.listeningToMouseleave = false;
         await this.storeWaypoints();
       }
     },
     async onChangeVertices(link, vertices, options){
-      if (options && options.ui) {
+      if (options?.ui) {
         this.updateWaypoints();
         await this.$nextTick();
         this.listeningToMouseleave = false;
@@ -189,9 +216,9 @@ export default {
       }
     },
     updateWaypoints() {
-      const linkView = this.shape.findView(this.paper);
-      const start = linkView.sourceAnchor;
-      const end = linkView.targetAnchor;
+      this.linkView = this.shape.findView(this.paper);
+      const start = this.linkView.sourceAnchor;
+      const end = this.linkView.targetAnchor;
 
       this.node.diagram.waypoint = [start,
         ...this.shape.vertices(),
@@ -239,6 +266,11 @@ export default {
         if (this.updateDefinitionLinks) {
           this.updateDefinitionLinks();
         }
+
+        if (this.linkView && ['processmaker-modeler-association', 'processmaker-modeler-data-input-association'].includes(this.shape.component.node.type)) {
+          this.$parent.multiplayerHook(this.shape.component.node, false);
+        }
+
         this.$emit('save-state');
       });
 

package/src/multiplayer/multiplayer.js

@@ -1,7 +1,9 @@
 import { io } from 'socket.io-client';
 import * as Y from 'yjs';
 import { getNodeIdGenerator } from '../NodeIdGenerator';
+import { getDefaultAnchorPoint } from '@/portsUtils';
 import Room from './room';
+import store from '@/store';
 export default class Multiplayer {
   clientIO = null;
   yDoc = null;
@@ -142,12 +144,12 @@ export default class Multiplayer {
       this.modeler.addRemoteNode(value);
     }
     this.#nodeIdGenerator.updateCounters();
-    
+
   }
   createRemoteShape(changes) {
     return new Promise(resolve => {
       changes.map((data) => {
-        this.createShape(data);     
+        this.createShape(data);
       });
       resolve();
     });
@@ -227,6 +229,7 @@ export default class Multiplayer {
       clientY,
       control: { type: updatedNode.type },
       nodeThatWillBeReplaced: node,
+      color: node.color,
       id: updatedNode.id,
     };
 
@@ -252,23 +255,59 @@ export default class Multiplayer {
     const { paper } = this.modeler;
     const element = this.modeler.getElementByNodeId(data.id);
     const newPool = this.modeler.getElementByNodeId(data.poolId);
-    // Update the element's position attribute
-    element.resize(
-      /* Add labelWidth to ensure elements don't overlap with the pool label */
-      data.width,
-      data.height,
-    );
-    element.set('position', { x: data.x, y: data.y });
-    // Trigger a rendering of the element on the paper
-    await paper.findViewByModel(element).update();
-    // validate if the parent pool was updated
-    await element.component.$nextTick();
-    await this.modeler.paperManager.awaitScheduledUpdates();
-    if (newPool && element.component.node.pool && element.component.node.pool.component.id !== data.poolId) {
-      element.component.node.pool.component.moveElementRemote(element, newPool);
+
+    if (this.modeler.flowTypes.includes(data.type)) {
+      // Update the element's waypoints
+      // Get the source and target elements
+      const sourceElem = this.modeler.getElementByNodeId(data.sourceRefId);
+      const targetElem = this.modeler.getElementByNodeId(data.targetRefId);
+
+      const { waypoint } = data;
+      const startWaypoint = waypoint.shift();
+      const endWaypoint = waypoint.pop();
+
+      // Update the element's waypoints
+      const newWaypoint = waypoint.map(point => this.modeler.moddle.create('dc:Point', point));
+      element.set('vertices', newWaypoint);
+
+      // Update the element's source anchor
+      element.source(sourceElem, {
+        anchor: () => {
+          return getDefaultAnchorPoint(this.getConnectionPoint(sourceElem, startWaypoint), sourceElem.findView(paper));
+        },
+        connectionPoint: { name: 'boundary' },
+      });
+
+      // Update the element's target anchor
+      element.target(targetElem, {
+        anchor: () => {
+          return getDefaultAnchorPoint(this.getConnectionPoint(targetElem, endWaypoint), targetElem.findView(paper));
+        },
+        connectionPoint: { name: 'boundary' },
+      });
+    } else {
+      // Update the element's position attribute
+      element.resize(
+        /* Add labelWidth to ensure elements don't overlap with the pool label */
+        data.width,
+        data.height,
+      );
+      element.set('position', { x: data.x, y: data.y });
+
+      const node = this.getNodeById(data.id);
+      store.commit('updateNodeProp', { node, key: 'color', value: data.color });
+
+      // Trigger a rendering of the element on the paper
+      await paper.findViewByModel(element).update();
+      // validate if the parent pool was updated
+      await element.component.$nextTick();
+      await this.modeler.paperManager.awaitScheduledUpdates();
+      if (newPool && element.component.node.pool && element.component.node.pool.component.id !== data.poolId) {
+        element.component.node.pool.component.moveElementRemote(element, newPool);
+      }
     }
   }
- 
+
   addFlow(data) {
     const yMapNested = new Y.Map();
     this.doTransact(yMapNested, data);
@@ -320,8 +359,21 @@ export default class Multiplayer {
   getPool(lanes) {
     if (lanes && lanes.length > 0) {
       return lanes[0].pool;
-    } 
+    }
     return false;
   }
+  getConnectionPoint(element, newPosition) {
+    const { x: elemX, y: elemY } = element.position();
+    const connectionOffset = {
+      x: newPosition.x - elemX,
+      y: newPosition.y - elemY,
+    };
 
+    const { x, y } = element.position();
+    const { width, height } = element.size();
+
+    return connectionOffset
+      ? { x: x + connectionOffset.x, y: y + connectionOffset.y }
+      : { x: x + (width / 2), y: y + (height / 2) };
+  }
 }