@processmaker/modeler 1.39.30 → 1.39.32

package/package.json

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

package/src/components/inspectors/MessageSelect.vue

@@ -329,7 +329,7 @@ export default {
       immediate: true,
       handler(value) {
         this.selectedOption = this.options.find(option => get(option, this.trackBy) == value);
-          
+
         if (value && !this.selectedOption) {
           this.loadSelected(value);
         }

package/src/components/inspectors/PreviewPanel.vue

@@ -1,65 +1,71 @@
 <template>
-  <b-col
-    v-show="visible"
-    id="preview_panel"
-    class="pl-0 h-100 overflow-hidden preview-column"
-    :style="{ maxWidth: width + 'px' }"
-    @mousedown="onMouseDown"
+  <b-row ref="resizableDiv"
     @mouseup="onMouseUp"
     @mousemove="onMouseMove"
-    data-test="preview-panel"
+    v-show="visible"
   >
-    <b-row class="control-bar">
-      <b-col cols="9">
-        <div>
-          <i v-show = "selectedPreview == 1" class="fas fa-file-alt"/>
-          <b v-show = "selectedPreview == 2"> {} </b>
-          <b-dropdown
-            variant="ellipsis"
-            no-caret
-            no-flip
-            lazy
-            class="dropdown-right"
-            style="margin-top:-10px"
-            v-model="selectedPreview"
-          >
-            <template #button-content>
-              <i class="fas fa-sort-down" />
-            </template>
-
-            <b-dropdown-item key="1" class="ellipsis-dropdown-item mx-auto" @click="onSelectedPreview(1)">
-              <div class="ellipsis-dropdown-content">
-                <b class="pr-1 fa-fw fas fa-file-alt" />
-                <span>{{ $t('Document') }}</span>
-              </div>
-            </b-dropdown-item>
-
-          </b-dropdown>
-          <span>{{ $t('Preview') }} - {{ taskTitle }}</span>
-        </div>
-      </b-col>
-      <b-col class="actions">
-        <div>
+    <b-col class="col-auto p-0 resizer-column" @mousedown="onMouseDown" />
+    <b-col
+      class="pl-0 h-100 overflow-hidden preview-column"
+      :style="{ width: panelWidth + 'px' }"
+      data-test="preview-panel"
+    >
+      <b-row class="control-bar">
+        <b-col cols="9">
+          <div>
+            <i v-show = "selectedPreview === 1" class="fas fa-file-alt"/>
+            <b v-show = "selectedPreview === 2"> {} </b>
+            <b-dropdown
+              variant="ellipsis"
+              no-caret
+              no-flip
+              lazy
+              class="preview-type-dropdown"
+              v-model="selectedPreview"
+            >
+              <template #button-content>
+                <i class="fas fa-sort-down" />
+              </template>
+
+              <b-dropdown-item key="1" class="ellipsis-dropdown-item mx-auto" @click="onSelectedPreview(1)">
+                <div class="ellipsis-dropdown-content">
+                  <b class="pr-1 fa-fw fas fa-file-alt" />
+                  <span>{{ $t('Document') }}</span>
+                </div>
+              </b-dropdown-item>
+
+            </b-dropdown>
+            <span>{{ $t('Preview') }} - {{ taskTitle }}</span>
+          </div>
+        </b-col>
+        <b-col class="actions">
           <i class="fas fa-external-link-alt" v-show="previewUrl" @click="openAsset()"/>
           <i class="fas fa-times" @click="onClose()" />
-        </div>
-      </b-col>
-    </b-row>
+        </b-col>
+      </b-row>
+
+      <b-row class="divider"/>
 
-    <b-row>
-      <div style="background-color: #0074D9; height: 20px; width: 100%">&nbsp;</div>
-    </b-row>
+      <b-row>
+        <div class="task-title"> {{ taskTitle }} </div>
+      </b-row>
 
-    <b-row>
-      <div class="task-title"> {{ taskTitle }} </div>
-    </b-row>
+      <loading-preview v-show="showSpinner"/>
 
-    <loading-preview v-if="showSpinner"/>
+      <no-preview-available v-show="!previewUrl"/>
 
-    <no-preview-available v-show="!previewUrl"/>
-    <iframe title="Preview" v-show="!!previewUrl && !showSpinner" :src="previewUrl" style="width:100%; height:100%;border: none;" @load="loading"/>
-  </b-col>
+      <iframe
+        title="Preview"
+        v-show="!!previewUrl && !showSpinner"
+        :src="previewUrl"
+        class="preview-iframe"
+        @load="loading"
+        @mousemove="onMouseMove"
+        @mouseup="onMouseUp"
+      />
 
+    </b-col>
+  </b-row>
 </template>
 
 <script>
@@ -68,7 +74,7 @@ import NoPreviewAvailable from '@/components/inspectors/NoPreviewAvailable';
 import LoadingPreview from '@/components/inspectors/LoadingPreview.vue';
 
 export default {
-  props: ['nodeRegistry', 'visible', 'previewConfigs'],
+  props: ['nodeRegistry', 'visible', 'previewConfigs', 'panelWidth'],
   components: { NoPreviewAvailable, LoadingPreview },
   data() {
     return {
@@ -79,7 +85,6 @@ export default {
       taskTitle: '',
       itemTitle: '',
       width: 600,
-      isDragging: false,
       currentPos: 600,
     };
   },
@@ -148,7 +153,6 @@ export default {
         this.$emit('togglePreview', false);
       }
     },
-
     onSelectedPreview(item) {
       this.selectedPreview = item;
     },
@@ -174,26 +178,26 @@ export default {
       const nodeHasConfigParams = Object.keys(clone).length > 0;
       this.previewUrl = previewConfig &&  nodeHasConfigParams ? `${previewConfig.url}?node=${nodeData}` : null;
       this.taskTitle = this.highlightedNode?.definition?.name;
-      this.showPanel = true;
     },
     onClose() {
       this.$emit('togglePreview', false);
     },
     onMouseDown(event) {
-      this.isDragging = true;
-      this.currentPos = event.x;
+      this.$emit('startResize', event);
     },
     onMouseUp() {
-      this.isDragging = false;
+      this.$emit('stopResize');
     },
     onMouseMove(event) {
-      if (this.isDragging) {
-        const dx = this.currentPos - event.x;
-        this.currentPos = event.x;
-        this.width = parseInt(this.width) + dx;
-        this.$emit('previewResize', this.width);
+      if (window.ProcessMaker.$modeler.isResizingPreview) {
+        this.$emit('previewResize', event);
       }
     },
+    setWidth(positionX) {
+      const dx = this.currentPos - positionX;
+      this.currentPos = positionX;
+      this.width = parseInt(this.width) + dx;
+    },
   },
 };
 </script>

package/src/components/inspectors/preview_panel.scss

@@ -1,28 +1,18 @@
-$inspector-column-max-width: 400px;
 $inspector-column-min-width: 200px;
 
-#preview_panel::after {
-  display: flex;
-  content: '';
-  left: 0;
-  width: 5px;
-  height: 100%;
-  cursor: ew-resize;
-}
-
 .preview-column {
-  max-width: $inspector-column-max-width;
   min-width: $inspector-column-min-width;
   resize: both;
   overflow:auto;
   background-color: #fff;
-  border-left: 8px solid #EBEEF2;
   z-index: 2;
 }
 
-.paneiframe {
-  display:block;
-  width:100%;
+.preview-iframe {
+  width:90%;
+  height:100%;
+  padding: 0 30px 0 50px;
+  border: none;
 }
 
 .preview-column .control-bar {
@@ -31,12 +21,29 @@ $inspector-column-min-width: 200px;
   color: #7f7f7f;
 }
 
+.preview-type-dropdown {
+  margin-top:-10px;
+}
+
+.resizer-column {
+  cursor:ew-resize;
+  width:5px;
+  background-color:#EBEEF2;
+}
+
 .preview-column .control-bar .actions {
   text-align: right;
 }
 
+.preview-column .divider {
+  background-color: #0074D9;
+  height: 20px;
+  width: 100%;
+}
+
 .preview-column .control-bar .actions div {
   width: 100%;
+  padding-right: 15px;
   text-align: right;
 }
 
@@ -45,16 +52,6 @@ $inspector-column-min-width: 200px;
   cursor: pointer;
 }
 
-.item-title {
-  margin-top: 15px;
-  width: 100%;
-  height: 30px;
-  font-size: larger;
-  text-align: center;
-  align-items: center;
-  color: #7f7f7f;
-}
-
 .task-title {
   width: 100%;
   height: 60px;

package/src/components/modeler/Modeler.vue

@@ -45,6 +45,8 @@
         ref="paper-container"
         :class="[cursor, { 'grabbing-cursor' : isGrabbing }]"
         :style="{ width: parentWidth, height: parentHeight }"
+        @mouseup="onMouseUp"
+        @mousemove="[onMouseMove($event), setInspectorButtonPosition($event)]"
       >
 
         <div ref="paper" data-test="paper" class="main-paper" />
@@ -64,10 +66,13 @@
 
       <PreviewPanel ref="preview-panel"
         @togglePreview="[handleTogglePreview($event), setInspectorButtonPosition($event)]"
-        @previewResize="setInspectorButtonPosition"
+        @previewResize="[onMouseMove($event), setInspectorButtonPosition($event)]"
+        @startResize="onStartPreviewResize"
+        @stopResize="onMouseUp"
         :visible="isOpenPreview"
         :nodeRegistry="nodeRegistry"
         :previewConfigs="previewConfigs"
+        :panelWidth="previewPanelWidth"
       />
 
       <InspectorPanel
@@ -164,6 +169,7 @@
 </template>
 
 <script>
+
 import Vue from 'vue';
 import _ from 'lodash';
 import { dia } from 'jointjs';
@@ -212,7 +218,14 @@ import hotkeys from '@/components/hotkeys/main';
 import TimerEventNode from '@/components/nodes/timerEventNode';
 import focusNameInputAndHighlightLabel from '@/components/modeler/focusNameInputAndHighlightLabel';
 import XMLManager from '@/components/modeler/XMLManager';
-import { removeNodeFlows, removeNodeMessageFlows, removeNodeAssociations, removeOutgoingAndIncomingRefsToFlow, removeBoundaryEvents, removeSourceDefault } from '@/components/crown/utils';
+import {
+  removeBoundaryEvents,
+  removeNodeAssociations,
+  removeNodeFlows,
+  removeNodeMessageFlows,
+  removeOutgoingAndIncomingRefsToFlow,
+  removeSourceDefault,
+} from '@/components/crown/utils';
 import { getInvalidNodes } from '@/components/modeler/modelerUtils';
 import { NodeMigrator } from '@/components/modeler/NodeMigrator';
 import addLoopCharacteristics from '@/setup/addLoopCharacteristics';
@@ -330,6 +343,9 @@ export default {
       showInspectorButton: true,
       inspectorButtonRight: 65,
       previewConfigs: [],
+      isResizingPreview: false,
+      currentCursorPosition: 0,
+      previewPanelWidth: 600,
       flowTypes: [
         'processmaker-modeler-sequence-flow',
         'processmaker-modeler-message-flow',
@@ -404,6 +420,20 @@ export default {
     isMultiplayer: () => store.getters.isMultiplayer,
   },
   methods: {
+    onStartPreviewResize(event) {
+      this.isResizingPreview = true;
+      this.currentCursorPosition = event.x;
+    },
+    onMouseUp() {
+      this.isResizingPreview = false;
+    },
+    onMouseMove(event) {
+      if (this.isResizingPreview) {
+        const dx = this.currentCursorPosition - event.x;
+        this.previewPanelWidth = parseInt(this.previewPanelWidth) + dx;
+        this.currentCursorPosition = event.x;
+      }
+    },
     registerPreview(config) {
       this.previewConfigs.push(config);
     },
@@ -427,13 +457,12 @@ export default {
       this.isOpenPreview = value;
     },
     setInspectorButtonPosition() {
-      const previewWidth = this.$refs['preview-panel'].width;
       if (this.isOpenInspector) {
         return;
       }
 
       if (this.isOpenPreview && !this.isOpenInspector) {
-        this.inspectorButtonRight = 65 + previewWidth;
+        this.inspectorButtonRight = 65 + this.previewPanelWidth;
       }
 
       if (!this.isOpenPreview && !this.isOpenInspector) {
@@ -1172,6 +1201,8 @@ export default {
             config: node.definition.config,
             loopCharacteristics: null,
             gatewayDirection: null,
+            messageRef: null,
+            extras: {},
           };
           if (node?.pool?.component) {
             defaultData['poolId'] = node.pool.component.id;
@@ -1191,14 +1222,22 @@ export default {
             sourceRefId = Array.isArray(node.definition.sourceRef) && node.definition.sourceRef[0]?.id;
             targetRefId = node.definition.targetRef?.$parent?.$parent?.get('id');
           }
-
+          const waypoint = [];
+          node.diagram.waypoint.forEach(point => {
+            waypoint.push({
+              x: point.x,
+              y: point.y,
+            });
+          });
           if (sourceRefId && targetRefId) {
             const flowData = {
               id: node.definition.id,
               type: node.type,
               sourceRefId,
               targetRefId,
-              waypoint: node.diagram.waypoint,
+              waypoint,
+              name: node.definition.name,
+              conditionExpression: null,
             };
 
             if (isProcessRequested) {

package/src/components/modeler/NodeMigrator.js

@@ -14,17 +14,23 @@ export class NodeMigrator {
     if (keepOriginalName(this._nodeThatWillBeReplaced)) {
       this._definition.name = this._nodeThatWillBeReplaced.definition.name;
     }
-
+    const flowNodes = [];
     const forceNodeToRemount = definition => {
       const shape = this._graph.getLinks().find(element => {
         return element.component && element.component.node.definition === definition;
       });
       shape.component.node._modelerId += '_replaced';
+      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,
+      });
     };
 
     const incoming = this._nodeThatWillBeReplaced.definition.get('incoming');
     const outgoing = this._nodeThatWillBeReplaced.definition.get('outgoing');
-
     this._definition.get('incoming').push(...incoming);
     this._definition.get('outgoing').push(...outgoing);
 
@@ -62,6 +68,8 @@ export class NodeMigrator {
           forceNodeToRemount(flow);
         });
     }
+    // multiplayer hook to update the flows
+    window.ProcessMaker.EventBus.$emit('multiplayer-updateFlows', flowNodes);
   }
 
   _handleSequenceFlowForGateway(ref) {

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

@@ -52,7 +52,7 @@ export default merge(cloneDeep(endEventConfig), {
       });
     }
   },
-  multiplayerInspectorHandler(node, data){
+  multiplayerInspectorHandler(node, data, setNodeProp) {
     const keys = Object.keys(data).filter((key) => key !== 'id');
     if (keys[0] === 'eventDefinitions') {
       const error = data[keys[0]][0].errorRef;
@@ -62,7 +62,9 @@ export default merge(cloneDeep(endEventConfig), {
           errorRef.name = error.name;
         }
       }
+      return;
     }
+    setNodeProp(node, keys[0], data[keys[0]]);
   },
   inspectorConfig: [
     {

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

@@ -34,8 +34,9 @@ export default {
       });
       setNodeProp(node, key, value[key]);
     }
-      
+
     let message = definitions.rootElements.find(element => element.id === value.messageRef);
+
     if (!message && value.messageRef) {
       message = moddle.create('bpmn:Message', {
         id: value.messageRef,
@@ -44,5 +45,16 @@ export default {
       definitions.rootElements.push(message);
     }
     node.definition.get('eventDefinitions')[0].messageRef = message;
+
+    window.ProcessMaker.EventBus.$emit('multiplayer-updateInspectorProperty', {
+      id: node.definition.id,
+      key: 'messageRef',
+      value: value.messageRef,
+      extras: {
+        messageName: message?.name,
+        allowedUsers: node.definition.get('allowedUsers'),
+        allowedGroups: node.definition.get('allowedGroups'),
+      },
+    });
   },
 };

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

@@ -52,6 +52,9 @@ export default {
         // Set the condition expression IFF the expresion body changed
         if (definition[key].body !== value[key]) {
           const conditionExpression = moddle.create('bpmn:FormalExpression', { body: value[key] });
+          window.ProcessMaker.EventBus.$emit('multiplayer-updateInspectorProperty', {
+            id: node.definition.id , key, value: [conditionExpression],
+          });
           setNodeProp(node, key, conditionExpression);
         }
       } else {
@@ -62,6 +65,18 @@ export default {
       }
     }
   },
+  multiplayerInspectorHandler(node, data, setNodeProp, moddle) {
+    const keys = Object.keys(data).filter((key) => key !== 'id');
+    if (keys.length === 0) {
+      return;
+    }
+    if (keys[0] === 'conditionExpression') {
+      const conditionExpression = moddle.create('bpmn:FormalExpression', { body: data[keys[0]][0].body });
+      setNodeProp(node, keys[0], conditionExpression);
+      return;
+    }
+    setNodeProp(node, keys[0], data[keys[0]]);
+  },
   inspectorConfig: [
     {
       name: 'Sequence Flow',