@processmaker/modeler 1.39.32 → 1.40.1

package/package.json

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

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

@@ -142,10 +142,10 @@ export default {
         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,
+          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,
           attachedToRefId: this.node.definition.get('attachedToRef')?.id,

package/src/components/inspectors/PreviewPanel.vue

@@ -161,9 +161,7 @@ export default {
         return;
       }
 
-      const previewConfig = this.previewConfigs.find(config => {
-        return config.matcher(this.data);
-      });
+      const previewConfig = this.getConfig(this.data);
 
       let clone = {};
       for (let prop in this.data) {
@@ -176,7 +174,12 @@ export default {
 
       // if the node has the configurations (for example screenRef for a task in a task)
       const nodeHasConfigParams = Object.keys(clone).length > 0;
-      this.previewUrl = previewConfig &&  nodeHasConfigParams ? `${previewConfig.url}?node=${nodeData}` : null;
+      const nodeHasConfiguredAssets = !!previewConfig?.assetUrl(this.data);
+
+      this.previewUrl = nodeHasConfiguredAssets && previewConfig &&  nodeHasConfigParams
+        ? `${previewConfig.url}?node=${nodeData}`
+        : null;
+
       this.taskTitle = this.highlightedNode?.definition?.name;
     },
     onClose() {

package/src/components/inspectors/preview_panel.scss

@@ -41,15 +41,16 @@ $inspector-column-min-width: 200px;
   width: 100%;
 }
 
-.preview-column .control-bar .actions div {
+.preview-column .control-bar .actions {
   width: 100%;
-  padding-right: 15px;
+  padding-right: 45px;
   text-align: right;
 }
 
-.preview-column .control-bar .actions div i {
+.preview-column .control-bar .actions i {
   width: 20px;
   cursor: pointer;
+  margin-left: 5px;
 }
 
 .task-title {

package/src/components/modeler/Modeler.vue

@@ -69,7 +69,7 @@
         @previewResize="[onMouseMove($event), setInspectorButtonPosition($event)]"
         @startResize="onStartPreviewResize"
         @stopResize="onMouseUp"
-        :visible="isOpenPreview"
+        :visible="isOpenPreview && !(highlightedNodes.length > 1)"
         :nodeRegistry="nodeRegistry"
         :previewConfigs="previewConfigs"
         :panelWidth="previewPanelWidth"
@@ -1106,6 +1106,11 @@ export default {
       diagram.bounds.x = data.x;
       diagram.bounds.y = data.y;
       const newNode = this.createNode(data.type, definition, diagram);
+      //verify if the node has a pool as a container
+      if (data.poolId) {
+        const pool = this.getElementByNodeId(data.poolId);
+        this.poolTarget = pool;
+      }
       await this.addNode(newNode, data.id, true);
       await this.$nextTick();
       await this.paperManager.awaitScheduledUpdates();
@@ -1202,6 +1207,7 @@ export default {
             loopCharacteristics: null,
             gatewayDirection: null,
             messageRef: null,
+            signalRef: null,
             extras: {},
           };
           if (node?.pool?.component) {
@@ -1223,12 +1229,14 @@ export default {
             targetRefId = node.definition.targetRef?.$parent?.$parent?.get('id');
           }
           const waypoint = [];
-          node.diagram.waypoint.forEach(point => {
+
+          node.diagram.waypoint?.forEach(point => {
             waypoint.push({
               x: point.x,
               y: point.y,
             });
           });
+
           if (sourceRefId && targetRefId) {
             const flowData = {
               id: node.definition.id,
@@ -1238,6 +1246,7 @@ export default {
               waypoint,
               name: node.definition.name,
               conditionExpression: null,
+              color: null,
             };
 
             if (isProcessRequested) {
@@ -1625,6 +1634,12 @@ export default {
         this.players.splice(playerIndex, 1);
       }
     },
+    /**
+     * Update the lasso tool
+     */
+    updateLasso(){
+      this.$refs.selector.updateSelectionBox();
+    },
   },
   created() {
     if (runningInCypressTest()) {

package/src/components/modeler/Selection.vue

@@ -598,8 +598,10 @@ export default {
       shapes.filter(shape => !shapesToNotTranslate.includes(shape.model.get('type')))
         .forEach(shape => {
           if (shape.model.get('type') === 'processmaker.modeler.bpmn.pool') {
-            const children = shape.model.component.getElementsUnderArea(shape.model, this.graph);
-            changed = [...changed, ...this.getContainerProperties(children, changed)];
+            const childrens = shape.model.component.getElementsUnderArea(shape.model, this.graph)
+              .filter((element) => element.component);
+
+            changed = [...changed, ...this.getContainerProperties(childrens, changed)];
           } else {
             const { node } = shape.model.component;
             const defaultData = {
@@ -655,9 +657,9 @@ export default {
       });
       return boundariesChanged;
     },
-    getContainerProperties(children) {
+    getContainerProperties(childrens) {
       const changed = [];
-      children.forEach(model => {
+      childrens.forEach(model => {
         changed.push({
           id: model.component.node.definition.id,
           properties: {

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

@@ -37,6 +37,7 @@ export default {
     }
 
     let signal = definitions.rootElements.find(element => element.id === value.signalRef);
+
     if (!signal && value.signalRef) {
       signal = moddle.create('bpmn:Signal', {
         id: value.signalRef,
@@ -45,5 +46,14 @@ export default {
       definitions.rootElements.push(signal);
     }
     node.definition.get('eventDefinitions')[0].signalRef = signal;
+
+    window.ProcessMaker.EventBus.$emit('multiplayer-updateInspectorProperty', {
+      id: node.definition.id,
+      key: 'signalRef',
+      value: value.signalRef,
+      extras: {
+        signalName: signal?.name,
+      },
+    });
   },
 };

package/src/components/nodes/subProcess/subProcess.vue

@@ -41,6 +41,7 @@
 </template>
 
 <script>
+import debounce from 'lodash/debounce';
 import { util } from 'jointjs';
 import portsConfig from '@/mixins/portsConfig';
 import TaskShape from '@/components/nodes/task/shape';
@@ -128,7 +129,7 @@ export default {
     },
   },
   watch: {
-    'node.definition.name'(name) {
+    'node.definition.name': debounce(function(name) {
       const { width } = this.node.diagram.bounds;
       this.shape.attr('label/text', util.breakText(name, { width }));
 
@@ -142,7 +143,7 @@ export default {
         this.shape.resize(width, newHeight);
         this.recalcMarkersAlignment();
       }
-    },
+    }, 300),
     'node.definition.config'(config) {
       store.commit('updateNodeProp', {
         node: this.node,

package/src/components/nodes/task/task.vue

@@ -23,6 +23,7 @@
 </template>
 
 <script>
+import debounce from 'lodash/debounce';
 import { util } from 'jointjs';
 import highlightConfig from '@/mixins/highlightConfig';
 import portsConfig from '@/mixins/portsConfig';
@@ -97,7 +98,7 @@ export default {
     },
   },
   watch: {
-    'node.definition.name'(name) {
+    'node.definition.name': debounce(function(name) {
       const { width } = this.node.diagram.bounds;
       this.shape.attr('label/text', util.breakText(name, { width }));
       const { height } = this.shape.size();
@@ -109,7 +110,7 @@ export default {
         this.shape.resize(width, newHeight);
         this.recalcMarkersAlignment();
       }
-    },
+    }, 300),
     'node.definition.isForCompensation'() {
       setupCompensationMarker(this.node.definition, this.markers, this.$set, this.$delete);
     },

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

@@ -1,5 +1,5 @@
 <template>
-  <b-avatar-group class="container" v-if="!isMultiplayer">
+  <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"/>
     </template>

package/src/multiplayer/multiplayer.js

@@ -32,6 +32,14 @@ export default class Multiplayer {
     // Connect to websocket server
     this.clientIO = io(window.ProcessMaker.multiplayer.host, { transports: ['websocket', 'polling']});
 
+    if (window.ProcessMaker.multiplayer.enabled) {
+      this.webSocketEvents();
+      this.multiplayerEvents();
+    } else {
+      this.clientIO.disconnect();
+    }
+  }
+  webSocketEvents() {
     this.clientIO.on('connect', () => {
       // Join the room
       this.clientIO.emit('joinRoom', {
@@ -133,6 +141,7 @@ export default class Multiplayer {
       // Update the element in the shared array
       Y.applyUpdate(this.yDoc, new Uint8Array(updateDoc));
     });
+
     this.clientIO.on('updateFlows', (payload) => {
       const { updateDoc, updatedNodes } = payload;
       // Update the elements in the process
@@ -142,10 +151,13 @@ export default class Multiplayer {
       // Update the element in the shared array
       Y.applyUpdate(this.yDoc, new Uint8Array(updateDoc));
     });
+  }
 
+  multiplayerEvents() {
     window.ProcessMaker.EventBus.$on('multiplayer-addNode', ( data ) => {
       this.addNode(data);
     });
+
     window.ProcessMaker.EventBus.$on('multiplayer-removeNode', ( data ) => {
       this.removeNode(data);
     });
@@ -169,6 +181,7 @@ export default class Multiplayer {
     window.ProcessMaker.EventBus.$on('multiplayer-addLanes', ( lanes ) => {
       this.addLaneNodes(lanes);
     });
+
     window.ProcessMaker.EventBus.$on('multiplayer-updateInspectorProperty', ( data ) => {
       if (this.modeler.isMultiplayer) {
         this.updateInspectorProperty(data);
@@ -232,7 +245,6 @@ export default class Multiplayer {
   removeNode(data) {
     const index =  this.getIndex(data.definition.id);
     if (index >= 0) {
-      this.removeShape(data);
       this.yArray.delete(index, 1); // delete one element
       // Encode the state as an update and send it to the server
       const stateUpdate = Y.encodeStateAsUpdate(this.yDoc);
@@ -339,34 +351,40 @@ export default class Multiplayer {
     const newPool = this.modeler.getElementByNodeId(data.poolId);
 
     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' },
-      });
+      if (waypoint) {
+        // 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 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 {
+        const node = this.getNodeById(data.id);
+        store.commit('updateNodeProp', { node, key: 'color', value: data.color });
+      }
     } else {
       // Update the element's position attribute
       element.resize(
@@ -392,6 +410,7 @@ export default class Multiplayer {
       if (newPool && element.component.node.pool && element.component.node.pool.component.id !== data.poolId) {
         element.component.node.pool.component.moveElementRemote(element, newPool);
       }
+      this.modeler.updateLasso();
     }
   }
   attachBoundaryEventToNode(element, data) {
@@ -573,7 +592,25 @@ export default class Multiplayer {
         }
       }
 
-      if (!['messageRef', 'gatewayDirection', 'condition', 'allowedUsers', 'allowedGroups'].includes(key)) {
+      if (key === 'signalRef') {
+        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;
+      }
+
+      const specialProperties = [
+        'messageRef', 'signalRef', 'gatewayDirection', 'condition', 'allowedUsers', 'allowedGroups',
+      ];
+
+      if (!specialProperties.includes(key)) {
         store.commit('updateNodeProp', { node, key, value });
       }
     }

package/src/setup/globals.js

@@ -36,6 +36,7 @@ window.ProcessMaker = {
   },
   multiplayer:{
     host: process.env.VUE_APP_WEBSOCKET_PROVIDER,
+    enabled: /^true$/i.test(process.env.VUE_APP_COLLABORATIVE_ENABLED),
   },
   EventBus: new Vue(),
   apiClient: axios,
@@ -63,5 +64,4 @@ window.ProcessMaker = {
     fullName:  faker.person.fullName(),
     avatar: null,
   },
-  
 };