@processmaker/modeler 1.39.8 → 1.39.10

package/src/components/rails/explorer-rail/nodeTypesLoop/nodeTypesLoop.vue

@@ -3,10 +3,11 @@ import pinIcon from '@/assets/pin-angle.svg';
 import pinFillIcon from '@/assets/pin-angle-fill.svg';
 import nodeTypesStore from '@/nodeTypesStore';
 import clickAndDrop from '@/mixins/clickAndDrop';
+import iconHelper from '@/mixins/iconHelper';
 
 export default {
   name: 'NodeTypesLoop',
-  mixins: [clickAndDrop],
+  mixins: [clickAndDrop, iconHelper],
   data() {
     return {
       pinIcon,
@@ -57,13 +58,15 @@ export default {
       <template v-for="object in filteredNodes">
         <div
           class="node-types__item"
+          :class="{'node-types__item__highlight': object.type === 'processmaker-ai-assistant'}"
           :data-test="object.type"
           :key="object.id"
           @mouseover="showPin = true"
           @mouseleave="showPin = false"
           @click.self="onClickHandler($event, object)"
         >
-          <img class="node-types__item__icon" :src="object.icon" :alt="$t(object.label)">
+          <i v-if="!containsSvg(object.icon)" :class="object.icon" class="fa-lg"/>
+          <img v-else class="node-types__item__icon" :src="object.icon" :alt="$t(object.label)">
           <span>{{ $t(object.label) }}</span>
           <img
             v-if="nodeTypeAlreadyPinned(object, object.type)"
@@ -88,13 +91,15 @@ export default {
         <template v-for="pinnedObject in pinnedObjects">
           <div
             class="node-types__item"
+            :class="{'node-types__item__highlight': pinnedObject.type === 'processmaker-ai-assistant'}"
             :data-test="pinnedObject.type"
             :key="pinnedObject.id"
             @mouseover="showPin = true"
             @mouseleave="showPin = false"
             @click.stop="onClickHandler($event, pinnedObject)"
           >
-            <img class="node-types__item__icon" :src="pinnedObject.icon" :alt="$t(pinnedObject.label)">
+            <i v-if="!containsSvg(pinnedObject.icon)" :class="pinnedObject.icon" class="fa-lg"/>
+            <img v-else class="node-types__item__icon" :src="pinnedObject.icon" :alt="$t(pinnedObject.label)">
             <span>{{ $t(pinnedObject.label) }}</span>
             <img
               :src="pinFillIcon"
@@ -110,13 +115,15 @@ export default {
         <template v-for="nodeType in unpinnedObjects">
           <div
             class="node-types__item"
+            :class="{'node-types__item__highlight': nodeType.type === 'processmaker-ai-assistant'}"
             :data-test="nodeType.type"
             :key="nodeType.id"
             @mouseover="showPin = true"
             @mouseleave="showPin = false"
             @click.stop="onClickHandler($event, nodeType)"
           >
-            <img class="node-types__item__icon" :src="nodeType.icon" :alt="$t(nodeType.label)">
+            <i v-if="!containsSvg(nodeType.icon)" :class="nodeType.icon" class="fa-lg"/>
+            <img v-else class="node-types__item__icon" :src="nodeType.icon" :alt="$t(nodeType.label)">
             <span>{{ $t(nodeType.label) }}</span>
             <img
               :src="pinIcon"
@@ -154,6 +161,9 @@ export default {
       width: 1.5rem;
       height: 1.5rem;
     }
+    &__highlight {
+      background-color: #FFF4D3;
+    }
     span {
       margin-left: 0.8rem;
       font-size: 13px;

package/src/components/welcome/WelcomeMessage.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="message d-flex flex-column w-100 align-items-center">
+    <div class="d-flex justify-content-center align-items-center flex-column justify-content-center">
+      <div class="w-100">
+        {{
+          $t("To start, click and drop objects to build the process you like.")
+        }}
+      </div>
+      <div class="justify-content-center align-items-center w-100 text-center my-4">
+        <div class="text-align-center d-flex text-center justify-content-center align-items-center">
+          <div class="hyphen" /> 
+          or 
+          <div class="hyphen" />
+        </div>
+      </div>
+    </div>
+    <b-button class="new-process-btn d-flex flex-row p-2 align-items-center" @click="onClick">
+      <inline-svg :src="proceC2Icon" class="mx-2 ai-icon" />
+      <div class="mr-3">{{ $t("Kick-start a new process with our generative AI") }}</div>
+      <span class="fa fa-chevron-right" />
+    </b-button>
+  </div>
+</template>
+<script>
+import InlineSvg from 'vue-inline-svg';
+
+export default {
+  name: 'WelcomeMessage',
+  components: {
+    InlineSvg,
+  },
+  data() {
+    return {
+      proceC2Icon: require('@/assets/proceC2.svg'),
+    };
+  },
+  methods: {},
+};
+</script>
+<style>
+.message {
+  color: #5f666d;
+  font-style: italic;
+  line-height: 27px;
+  word-wrap: break-word;
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  left: 0;
+  border: 0 none;
+  z-index: 1;
+  font-size: 110%;
+  font-weight: 100;
+  height: calc(100% - 130px);
+}
+
+.hyphen {
+  transform: rotate(0deg);
+  transform-origin: 0 0;
+  border: 1px #5f666d solid;
+  width: 30px;
+  margin: 5px 13px 0px 13px;
+}
+.new-process-btn {
+  color: #0872C2;
+  border-color: #0872C2;
+  background-color: #ffffff;
+  box-shadow: 0 3px 9px -3px #c2c2c2;
+}
+
+.new-process-btn:hover {
+  background-color: #edf7ff;
+  color: #0872C2;
+  border-color: #0872C2;
+}
+
+.ai-icon {
+  width: 22px;
+  height: 22px;
+}
+</style>

package/src/mixins/clickAndDrop.js

@@ -1,6 +1,8 @@
 import nodeTypesStore from '@/nodeTypesStore';
+import iconHelper from '@/mixins/iconHelper';
 
 export default {
+  mixins: [iconHelper],
   data() {
     return {
       wasClicked: false,
@@ -68,20 +70,28 @@ export default {
       nodeTypesStore.commit('setGhostNode', tempGhost);
     },
     createDraggingHelper(event, control) {
+
       if (this.movedElement) {
         document.removeEventListener('mousemove', this.setDraggingPosition);
         document.body.removeChild(this.movedElement);
-        nodeTypesStore.commit('setGhostNode', null);
       }
-      const sourceElement = event.target;
-      nodeTypesStore.commit('setGhostNode', document.createElement('img'));
-      let tempGhost = this.movedElement;
-      Object.keys(this.helperStyles).forEach((property) => {
-        tempGhost.style[property] = this.helperStyles[property];
-      });
-      tempGhost.src = control.icon;
+
+      const isSvgIcon = this.containsSvg(control.icon);
+      const tempGhost = isSvgIcon ? document.createElement('img') : document.createElement('i');
+
+      Object.assign(tempGhost.style, this.helperStyles);
+
+      // Set the appropriate attribute or property based on the control icon type
+      if (isSvgIcon) {
+        tempGhost.src = control.icon;
+      } else {
+        tempGhost.setAttribute('class', control.icon);
+      }
+
+      document.body.appendChild(tempGhost);
       nodeTypesStore.commit('setGhostNode', tempGhost);
-      document.body.appendChild(this.movedElement);
+    
+      const sourceElement = event.target;
       this.xOffset = event.clientX - sourceElement.getBoundingClientRect().left;
       this.yOffset = event.clientY - sourceElement.getBoundingClientRect().top;
     },

package/src/mixins/customIcon.js

@@ -6,6 +6,13 @@ export default {
       iconName: '',
     };
   },
+  watch: {
+    shape() {
+      if (this.node.definition.get('customIcon')) {
+        this.setCustomIcon(this.node.definition.get('customIcon'));
+      }
+    },
+  },
 
   methods: {
     setCustomIconName(iconName) {
@@ -14,11 +21,24 @@ export default {
     resetCustomIconName() {
       this.setCustomIconName('');
     },
-    setCustomIcon(base64Icon) {
-      if (!this.shape){
+    setCustomIcon(icon) {
+      if (!this.shape) {
         return;
       }
-      this.shape.attr('image/xlink:href', coloredIcon(atob(base64Icon), this.node));
+    
+      try {
+        const decodedIcon = atob(icon);
+        this.updateIcon(decodedIcon);
+      } catch (error) {
+        this.updateIcon(icon);
+      }
+    },
+    updateIcon(icon) {
+      const iconURL = this.getIconURL(icon);
+      this.shape.attr('image/xlink:href', iconURL);
+    },
+    getIconURL(icon) {
+      return coloredIcon(icon, this.node);
     },
   },
   mounted() {

package/src/mixins/iconHelper.js

@@ -0,0 +1,14 @@
+export default {
+  methods: {
+    containsSvg(icon) {
+      // Regular expression to match a URL pattern
+      const urlPattern = /^(https?:\/\/)?([\w-]+(\.[\w-]+)+)(\/[\w@?^=%&:/~+#-]*)*$/;
+      
+      // Regular expression to check if the string contains '.svg'
+      const svgPattern = /\.svg/;
+      
+      // Check if the variable is a string and either a URL or contains '.svg'
+      return typeof icon === 'string' && (urlPattern.test(icon) || svgPattern.test(icon));
+    },
+  },
+};

package/src/multiplayer/multiplayer.js

@@ -1,48 +1,161 @@
+import { io } from 'socket.io-client';
 import * as Y from 'yjs';
-import { WebsocketProvider } from 'y-websocket';
 import { getNodeIdGenerator } from '../NodeIdGenerator';
 import Room from './room';
 export default class Multiplayer {
-  ydoc = null;
-  yarray = null;
+  clientIO = null;
+  yDoc = null;
+  yArray = null;
   modeler = null;
   #nodeIdGenerator = null;
   room = null;
+  deletedItem = null;
+
   constructor(modeler) {
     // define document
-    this.ydoc = new Y.Doc();
+    this.yDoc = new Y.Doc();
+    // Create a shared array
+    this.yArray = this.yDoc.getArray('elements');
+    // Create a Modeler instance
     this.modeler = modeler;
   }
   init() {
+    // Get the node id generator
     this.#nodeIdGenerator = getNodeIdGenerator(this.modeler.definitions);
+    // Get the room name from the process id
+    this.room = new Room(`room-${window.ProcessMaker.modeler.process.id}`);
 
-    this.room = new Room('room-' + window.ProcessMaker.modeler.process.id);
-    const wsProvider = new WebsocketProvider('ws://localhost:1234', this.room.getRoom(), this.ydoc);
-    wsProvider.on('status', () => {
-      // todo status handler
-    });
-    // array of numbers which produce a sum
-    this.yarray = this.ydoc.getArray('modeler');
-    // observe changes of the diagram
-    this.yarray.observe(event => {
-      event.changes.delta.forEach((value) =>{
-        if (value.insert) {
-          value.insert.forEach((value) => {
-            this.createShape(value);
-            this.#nodeIdGenerator.updateCounters();
-          });
-        }
+    // Connect to websocket server
+    this.clientIO = io(process.env.VUE_APP_WEBSOCKET_PROVIDER, { transports: ['websocket', 'polling']});
+
+    this.clientIO.on('connect', () => {
+      // Join the room
+      this.clientIO.emit('joinRoom', this.room.getRoom());
+    });
+
+    // Listen for updates when a new element is added
+    this.clientIO.on('createElement', async(payload) => {
+      // Create the new element in the process
+      await this.createRemoteShape(payload.changes);
+      // Add the new element to the shared array
+      Y.applyUpdate(this.yDoc, new Uint8Array(payload.updateDoc));
+    });
+
+    // Listen for updates when an element is removed
+    this.clientIO.on('removeElement', (payload) => {
+      payload.deletedNodes.forEach(nodeId => {
+        // Get the node id
+        const node = this.getNodeById(nodeId);
+        // Remove the element from the process
+        this.removeShape(node);
       });
+      // Remove the element from the shared array
+      Y.applyUpdate(this.yDoc, new Uint8Array(payload.updateDoc));
     });
+
     window.ProcessMaker.EventBus.$on('multiplayer-addNode', ( data ) => {
       this.addNode(data);
     });
+
+    window.ProcessMaker.EventBus.$on('multiplayer-removeNode', ( data ) => {
+      this.removeNode(data);
+    });
+    window.ProcessMaker.EventBus.$on('multiplayer-updateNodes', ( data ) => {
+      this.updateNodes(data);
+    });
   }
   addNode(data) {
-    this.yarray.push([data]);
- 
+    // Add the new element to the process
+    this.createShape(data);
+    // Add the new element to the shared array
+    // this.yArray.push([data]);
+    const yMapNested = new Y.Map();
+    this.doTransact(yMapNested, data);
+    this.yArray.push([yMapNested]);
+    // Encode the state as an update and send it to the server
+    const stateUpdate = Y.encodeStateAsUpdate(this.yDoc);
+    // Send the update to the web socket server
+    this.clientIO.emit('createElement', stateUpdate);
   }
   createShape(value) {
     this.modeler.handleDropProcedure(value, false);
+    this.#nodeIdGenerator.updateCounters();
+  }
+  createRemoteShape(changes) {
+    return new Promise(resolve => {
+      changes.map((data) => {
+        this.createShape(data);
+      });
+
+      resolve();
+    });
+  }
+  removeNode(data) {
+    const index =  this.getIndex(data.definition.id);
+    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);
+    // Send the update to the web socket server
+    this.clientIO.emit('removeElement', stateUpdate);
+  }
+  getIndex(id) {
+    let index = -1;
+    for (const value of this.yArray) {
+      index ++;
+      if (value.get('id') === id) {
+        break ;
+      }
+    }
+    return index;
+  }
+  getNodeById(nodeId) {
+    const node = this.modeler.nodes.find((element) => element.definition && element.definition.id === nodeId);
+
+    return node;
+  }
+  removeShape(node) {
+    this.modeler.removeNodeProcedure(node, true);
+  }
+  getRemovedNodes(array1, array2) {
+    return array1.filter(object1 => {
+      return !array2.some(object2 => {
+        return object1.definition.id === object2.get('id');
+      });
+    });
+  }
+  updateNodes(data) {
+    data.forEach((value) => {
+      const index = this.getIndex(value.id);
+      const nodeToUpdate =  this.yarray.get(index);
+      this.doTransact(nodeToUpdate, value.properties);
+    });
+  }
+  doTransact(yMapNested, data) {
+    this.yDoc.transact(() => {
+      for (const key in data) {
+        if (Object.prototype.hasOwnProperty.call(data, key)) {
+          yMapNested.set(key, data[key]);
+        }
+      }
+    });
+  }
+  updateShapes(data) {
+    const { paper } = this.modeler;
+    const element = this.getJointElement(paper.model, data.id);
+    // Update the element's position attribute
+    element.set('position', { x:data.clientX, y:data.clientY });
+    // Trigger a rendering of the element on the paper
+    paper.findViewByModel(element).update();
+  }
+  getJointElement(graph, targetValue) {
+    const cells = graph.getCells();
+    for (const cell of cells) {
+      if (cell.component.id === targetValue) {
+        return cell;
+      }
+    }
+    return null; // Return null if no matching element is found
   }
 }

package/src/multiplayer/room.js

@@ -1,4 +1,3 @@
-
 export default class Room {
   #room ='';
   constructor(name) {
@@ -7,4 +6,4 @@ export default class Room {
   getRoom() {
     return this.#room;
   }
-}
+}

package/src/setup/addLoopCharacteristics.js

@@ -16,6 +16,10 @@ export default (node) => {
     return;
   }
 
+  if (node.implementation === 'package-ai/processmaker-ai-assistant') {
+    return;
+  }
+
   // Insert the loop config inspector at the specified index
   node.inspectorConfig[0].items.splice(node.loopInspectorIndex || 1, 0, loopCharacteristicsInspector);
 

package/src/setup/globals.js

@@ -51,7 +51,7 @@ window.ProcessMaker = {
   },
   modeler: {
     process: {
-      id: 3,
+      id: 1,
     },
   },
 };

package/src/setup/initialLoad.js

@@ -20,6 +20,9 @@ window.ProcessMaker.EventBus.$on('modeler-init', registerNodes);
 window.ProcessMaker.EventBus.$on('modeler-start', ({ loadXML }) => {
   loadXML(blank);
 });
+/**
+ * TODO: Remove this block when the collaborative mode will be dynamic
+ */
 window.ProcessMaker.EventBus.$on('multiplayer-start', (params) => {
   const multiplayer = new Multiplayer(params.modeler);
   multiplayer.init();