@processmaker/modeler 1.39.31 → 1.40.0

package/package.json

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

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) {
@@ -1193,14 +1222,20 @@ 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,
             };

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/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', {
@@ -134,10 +142,22 @@ export default class Multiplayer {
       Y.applyUpdate(this.yDoc, new Uint8Array(updateDoc));
     });
 
+    this.clientIO.on('updateFlows', (payload) => {
+      const { updateDoc, updatedNodes } = payload;
+      // Update the elements in the process
+      updatedNodes.forEach((data) => {
+        this.updateFlowClient(data);
+      });
+      // 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);
     });
@@ -161,11 +181,17 @@ 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);
       }
     });
+    window.ProcessMaker.EventBus.$on('multiplayer-updateFlows', ( data ) => {
+      if (this.modeler.isMultiplayer) {
+        this.updateFlows(data);
+      }
+    });
   }
   /**
    * Sync the modeler nodes with the microservice
@@ -245,7 +271,7 @@ export default class Multiplayer {
     return node;
   }
   removeShape(node) {
-    this.modeler.removeNodeProcedure(node, true);
+    this.modeler.removeNodeProcedure(node,  { removeRelationships: false });
   }
   getRemovedNodes(array1, array2) {
     return array1.filter(object1 => {
@@ -565,4 +591,56 @@ export default class Multiplayer {
       }
     }
   }
+  /**
+   * Update the shared document and emit socket sign to update the flows
+   * @param {Object} data
+   */
+  updateFlows(data){
+    data.forEach((value) => {
+      const index = this.getIndex(value.id);
+      const nodeToUpdate =  this.yArray.get(index);
+      this.yDoc.transact(() => {
+        for (const key in value) {
+          if (Object.hasOwn(value, key)) {
+            nodeToUpdate.set(key, value[key]);
+          }
+        }
+      });
+    });
+    // Encode the state as an update and send it to the server
+    const stateUpdate = Y.encodeStateAsUpdate(this.yDoc);
+    this.clientIO.emit('updateFlows', { updateDoc: stateUpdate, isReplaced: false });
+  }
+  /**
+   * Update the flow client, All node refs will be updated and forced to remount
+   * @param {Object} data
+   */
+  updateFlowClient(data) {
+    let remount = false;
+    const flow = this.getNodeById(data.id);
+    if (flow && data.sourceRefId) {
+      const sourceRef = this.getNodeById(data.sourceRefId);
+      flow.definition.set('sourceRef', sourceRef.definition);
+      const outgoing = sourceRef.definition.get('outgoing')
+        .find((element) => element.id === flow.definition.id);
+      if (!outgoing) {
+        sourceRef.definition.get('outgoing').push(...[flow.definition]);
+      }
+      remount = true;
+    }
+    if (flow && data.targetRefId) {
+      const targetRef = this.getNodeById(data.targetRefId);
+      flow.definition.set('targetRef', targetRef.definition);
+      const incoming = targetRef.definition.get('incoming')
+        .find((element) => element.id === flow.definition.id);
+      if (!incoming) {
+        targetRef.definition.get('incoming').push(...[flow.definition]);
+      }
+      remount = true;
+    }
+    if (remount) {
+      // Force Remount Flow
+      flow._modelerId += '_replaced';
+    }
+  }
 }

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,
   },
-  
 };