@processmaker/modeler 1.40.1 → 1.40.3

package/package.json

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

package/src/components/inspectors/InspectorPanel.vue

@@ -102,6 +102,8 @@ export default {
     'highlightedNode.definition.assignedUsers'(current, previous) { this.handleAssignmentChanges(current, previous); },
     'highlightedNode.definition.assignedGroups'(current, previous) { this.handleAssignmentChanges(current, previous); },
     'highlightedNode.definition.assignmentRules'(current, previous) { this.handleAssignmentChanges(current, previous); },
+    'highlightedNode.definition.allowInterstitial'(current, previous) { this.handleAssignmentChanges(current, previous); },
+    'highlightedNode.definition.interstitialScreenRef'(current, previous) { this.handleAssignmentChanges(current, previous); },
   },
   computed: {
     inspectorHeaderTitle() {
@@ -254,7 +256,7 @@ export default {
     defaultInspectorHandler(value, isMultiplayer) {
       /* Go through each property and rebind it to our data */
       for (const key in omit(value, ['$type', 'eventDefinitions'])) {
-        if (this.highlightedNode.definition.get(key) !== value[key]) {        
+        if (this.highlightedNode.definition.get(key) !== value[key]) {
           this.multiplayerHook(key, value[key], isMultiplayer);
           this.setNodeProp(this.highlightedNode, key, value[key]);
         }

package/src/components/inspectors/PreviewPanel.vue

@@ -56,7 +56,7 @@
 
       <iframe
         title="Preview"
-        v-show="!!previewUrl && !showSpinner"
+        :style="{visibility: displayPreviewIframe}"
         :src="previewUrl"
         class="preview-iframe"
         @load="loading"
@@ -95,20 +95,26 @@ export default {
       }
     },
     highlightedNode() {
+      // If there isn't preview configuration hide the panel
+      const nodeConfig = this.getConfig(this.data);
+      if (!nodeConfig) {
+        this.$emit('togglePreview', false);
+        return;
+      }
+
       document.activeElement.blur();
-      this.prepareData();
+      this.previewNode();
     },
-    'highlightedNode.definition'(current, previous) { this.handleAssignmentChanges(current, previous); },
-    'highlightedNode.definition.assignmentLock'(current, previous) { this.handleAssignmentChanges(current, previous); },
-    'highlightedNode.definition.allowReassignment'(current, previous) { this.handleAssignmentChanges(current, previous); },
-    'highlightedNode.definition.assignedUsers'(current, previous) { this.handleAssignmentChanges(current, previous); },
-    'highlightedNode.definition.assignedGroups'(current, previous) { this.handleAssignmentChanges(current, previous); },
-    'highlightedNode.definition.assignmentRules'(current, previous) { this.handleAssignmentChanges(current, previous); },
   },
   computed: {
     highlightedNode() {
       return store.getters.highlightedNodes[0];
     },
+    displayPreviewIframe() {
+      const result = !!this.previewUrl && !this.showSpinner;
+      console.log('mostrar iframe', result);
+      return result ? 'visible' : 'hidden';
+    },
   },
   methods: {
     loading() {
@@ -137,21 +143,6 @@ export default {
       this.taskTitle = this.data?.name;
 
       this.taskTitle = this?.highlightedNode?.definition?.name;
-      this.previewNode();
-    },
-
-    handleAssignmentChanges(currentValue, previousValue) {
-      if (currentValue === previousValue) {
-        return;
-      }
-
-      const nodeConfig = this.getConfig(this.data);
-
-      if (nodeConfig) {
-        this.prepareData();
-      } else {
-        this.$emit('togglePreview', false);
-      }
     },
     onSelectedPreview(item) {
       this.selectedPreview = item;
@@ -160,7 +151,7 @@ export default {
       if (!this.highlightedNode || (!this.visible && !force)) {
         return;
       }
-
+      this.prepareData();
       const previewConfig = this.getConfig(this.data);
 
       let clone = {};
@@ -179,7 +170,6 @@ export default {
       this.previewUrl = nodeHasConfiguredAssets && previewConfig &&  nodeHasConfigParams
         ? `${previewConfig.url}?node=${nodeData}`
         : null;
-
       this.taskTitle = this.highlightedNode?.definition?.name;
     },
     onClose() {

package/src/components/modeler/Modeler.vue

@@ -139,6 +139,7 @@
         @clone-selection="cloneSelection"
         @default-flow="toggleDefaultFlow"
         @shape-resize="shapeResize"
+        @definition-changed="onNodeDefinitionChanged"
       />
 
       <RailBottom
@@ -237,6 +238,7 @@ import ProcessmakerModelerGenericFlow from '@/components/nodes/genericFlow/gener
 import Selection from './Selection';
 import RemoteCursor from '@/components/multiplayer/remoteCursor/RemoteCursor.vue';
 import Multiplayer from '@/multiplayer/multiplayer';
+import { getBoundaryEventData } from '../nodes/boundaryEvent/boundaryEventUtils';
 
 export default {
   components: {
@@ -353,6 +355,13 @@ export default {
         'processmaker-modeler-data-output-association',
         'processmaker-modeler-association',
       ],
+      boundaryEventTypes: [
+        'processmaker-modeler-boundary-timer-event',
+        'processmaker-modeler-boundary-error-event',
+        'processmaker-modeler-boundary-signal-event',
+        'processmaker-modeler-boundary-conditional-event',
+        'processmaker-modeler-boundary-message-event',
+      ],
     };
   },
   watch: {
@@ -420,6 +429,12 @@ export default {
     isMultiplayer: () => store.getters.isMultiplayer,
   },
   methods: {
+    onNodeDefinitionChanged() {
+      // re-render the preview just if the preview pane is open
+      if (this.isOpenPreview) {
+        this.handlePreview();
+      }
+    },
     onStartPreviewResize(event) {
       this.isResizingPreview = true;
       this.currentCursorPosition = event.x;
@@ -1177,12 +1192,7 @@ export default {
         'processmaker-modeler-sequence-flow',
         'processmaker-modeler-association',
         'processmaker-modeler-data-input-association',
-        'processmaker-modeler-data-input-association',
-        'processmaker-modeler-boundary-timer-event',
-        'processmaker-modeler-boundary-error-event',
-        'processmaker-modeler-boundary-signal-event',
-        'processmaker-modeler-boundary-conditional-even',
-        'processmaker-modeler-boundary-message-event',
+        ...this.boundaryEventTypes,
       ];
       if (!this.isMultiplayer) {
         return;
@@ -1299,6 +1309,8 @@ export default {
       });
     },
     async addClonedNodes(nodes) {
+      const flowNodes = [];
+
       nodes.forEach(node => {
         if (!node.pool) {
           node.pool = this.poolTarget;
@@ -1308,10 +1320,24 @@ export default {
         addNodeToProcess(node, targetProcess);
 
         this.planeElements.push(node.diagram);
-        this.multiplayerHook(node, false);
+
+        if (this.flowTypes.includes(node.type)) {
+          // Add flow to array to render after
+          flowNodes.push(node);
+        } else if (this.boundaryEventTypes.includes(node.type)) {
+          // Get boundary event data
+          const defaultData = getBoundaryEventData(node);
+          window.ProcessMaker.EventBus.$emit('multiplayer-addBoundaryEvent', defaultData);
+        } else {
+          this.multiplayerHook(node, false);
+        }
+
         store.commit('addNode', node);
         this.poolTarget = null;
       });
+
+      // Render flows after all nodes have been added
+      flowNodes.forEach(node => this.multiplayerHook(node, false));
     },
     async removeNode(node, options) {
       // Check if the node is not replaced

package/src/components/modeler/Selection.vue

@@ -347,7 +347,7 @@ export default {
      */
     prepareConectedLinks(shapes){
       const { paper } = this.paperManager;
-      this.conectedLinks = [];
+      this.connectedLinks = [];
       this.isValidSelectionLinks = true;
       shapes.forEach((shape) => {
         let conectedLinks = this.graph.getConnectedLinks(shape.model);
@@ -368,8 +368,8 @@ export default {
         }
         conectedLinks.forEach((link) => {
           const linkView = paper.findViewByModel(link);
-          if (!this.conectedLinks.some(obj => obj.id === linkView.id)) {
-            this.conectedLinks.push(linkView);
+          if (!this.connectedLinks.some(obj => obj.id === linkView.id)) {
+            this.connectedLinks.push(linkView);
             this.validateSelectionLinks(linkView);
           }
         });
@@ -585,6 +585,7 @@ export default {
       this.updateSelectionBox();
       if (this.isMultiplayer) {
         window.ProcessMaker.EventBus.$emit('multiplayer-updateNodes', this.getProperties(this.selected));
+        window.ProcessMaker.EventBus.$emit('multiplayer-updateNodes', this.getConnectedLinkProperties(this.connectedLinks));
       }
     },
 
@@ -600,7 +601,6 @@ export default {
           if (shape.model.get('type') === 'processmaker.modeler.bpmn.pool') {
             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;
@@ -626,6 +626,38 @@ export default {
         
       return changed;
     },
+    /**
+     * Get connected link properties
+     * @param {Array} links 
+     */
+    getConnectedLinkProperties(links) {
+      let changed = [];
+      links.forEach((linkView) => {
+        const waypoint = [];
+        const { node } =  linkView.model.component;
+        node.diagram.waypoint?.forEach(point => {
+          waypoint.push({
+            x: point.x,
+            y: point.y,
+          });
+        });
+        const sourceRefId = linkView.sourceView.model.component.node.definition.id;
+        const targetRefId = linkView.targetView.model.component.node.definition.id;
+        const nodeType = linkView.model.component.node.type;
+        changed.push(
+          {
+            id: node.definition.id,
+            properties: {
+              type: nodeType,
+              waypoint,
+              sourceRefId,
+              targetRefId,
+            },
+          });
+      
+      });
+      return changed;
+    },
     /**
      * Get properties for each boundary inside a shape
      */
@@ -677,7 +709,7 @@ export default {
      * Selector will update the waypoints of the related flows
      */
     updateFlowsWaypoint(){
-      this.conectedLinks.forEach((link)=> {
+      this.connectedLinks.forEach((link)=> {
         if (link.model.component && link.model.get('type') === 'standard.Link'){
           const start = link.sourceAnchor;
           const end = link.targetAnchor;
@@ -885,7 +917,7 @@ export default {
         if (this.newPool){
           /* Remove the shape from its current pool */
           this.moveElements(this.selected, this.oldPool, this.newPool);
-          this.moveConectedLinks(this.conectedLinks, this.oldPool, this.newPool);
+          this.moveConnectedLinks(this.connectedLinks, this.oldPool, this.newPool);
           this.newPool = null;
           this.oldPool = null;
           this.updateLaneChildren(this.selected);
@@ -1025,7 +1057,7 @@ export default {
           oldPool.model.component.moveElement(shape.model, newPool.model);
         });
     },
-    moveConectedLinks(links, oldPool, newPool){
+    moveConnectedLinks(links, oldPool, newPool){
       links.forEach(link => {
         oldPool.model.component.moveFlow(link.model, newPool.model);
       });

package/src/components/nodes/boundaryEvent/boundaryEvent.vue

@@ -27,6 +27,7 @@ import CrownConfig from '@/components/crown/crownConfig/crownConfig';
 import highlightConfig from '@/mixins/highlightConfig';
 import store from '@/store';
 import { canAddBoundaryEventToTarget } from '@/boundaryEventValidation';
+import { getBoundaryEventData } from '@/components/nodes/boundaryEvent/boundaryEventUtils';
 
 export default {
   components: {
@@ -203,24 +204,9 @@ export default {
       this.invalidTargetElement = targetElement;
     },
     addMultiplayerBoundaryEvent() {
-      const control = {
-        bpmnType: this.node.diagram.$type,
-        id: this.node.diagram.id,
-        type: this.node.type,
-        attachedToRef: this.node.definition.get('attachedToRef'),
-      };
+      const defaultData = getBoundaryEventData(this.node);
 
-      window.ProcessMaker.EventBus.$emit('multiplayer-addBoundaryEvent', {
-        x: this.node.diagram.bounds.x,
-        y: this.node.diagram.bounds.y,
-        height: this.node.diagram.bounds.height,
-        width: this.node.diagram.bounds.width,
-        attachedToRefId: this.node.definition.get('attachedToRef')?.id,
-        control,
-        type: this.node.type,
-        id: this.node.definition.id,
-        color: this.node.definition.get('color'),
-      });
+      window.ProcessMaker.EventBus.$emit('multiplayer-addBoundaryEvent', defaultData);
     },
   },
   async mounted() {
@@ -234,9 +220,9 @@ export default {
     const task = this.getTaskUnderShape();
     this.attachBoundaryEventToTask(task);
     this.updateShapePosition(task);
-    
+
     if (this.node.fromCrown) {
-      this.addMultiplayerBoundaryEvent();  
+      this.addMultiplayerBoundaryEvent();
     }
   },
 };

package/src/components/nodes/boundaryEvent/boundaryEventUtils.js

@@ -0,0 +1,35 @@
+export const getBoundaryEventData = (node) => {
+  const control = {
+    bpmnType: node.diagram.$type,
+    id: node.diagram.id,
+    type: node.type,
+    attachedToRef: node.definition.get('attachedToRef'),
+  };
+
+  const eventDefinition = node.definition.get('eventDefinitions')[0];
+  const eventDefinitionType = Object.keys(eventDefinition).reduce((acc, key) => {
+    if (key.startsWith('time')) {
+      acc[key] = eventDefinition[key];
+    }
+    return acc;
+  }, {});
+
+  const type = Object.keys(eventDefinitionType)[0];
+
+  return {
+    x: node.diagram.bounds.x,
+    y: node.diagram.bounds.y,
+    height: node.diagram.bounds.height,
+    width: node.diagram.bounds.width,
+    attachedToRefId: node.definition.get('attachedToRef')?.id,
+    control,
+    type: node.type,
+    id: node.definition.id,
+    color: node.definition.get('color'),
+    cancelActivity: node.definition.get('cancelActivity'),
+    eventTimerDefinition: {
+      type,
+      body: eventDefinitionType[type]?.body,
+    },
+  };
+};

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

@@ -10,6 +10,16 @@ import { defaultDurationTimerEvent } from '@/constants';
 
 export const id = 'processmaker-modeler-boundary-timer-event';
 
+export const setEventTimerDefinition = (moddle, node, type, body) => {
+  const eventDefinition = {
+    [type]: moddle.create('bpmn:Expression', { body }),
+  };
+
+  return [
+    moddle.create('bpmn:TimerEventDefinition', eventDefinition),
+  ];
+};
+
 export default merge(cloneDeep(boundaryEventConfig), {
   id,
   component,
@@ -58,17 +68,16 @@ export default merge(cloneDeep(boundaryEventConfig), {
           continue;
         }
 
-        const eventDefinition = {
-          [type]: moddle.create('bpmn:Expression', { body }),
-        };
-
-        const eventDefinitions = [
-          moddle.create('bpmn:TimerEventDefinition', eventDefinition),
-        ];
-
-        eventDefinitions[0].id = node.definition.get('eventDefinitions')[0].id;
-
+        const eventDefinitions = setEventTimerDefinition(moddle, node, type, body);
         setNodeProp(node, 'eventDefinitions', eventDefinitions);
+        window.ProcessMaker.EventBus.$emit('multiplayer-updateInspectorProperty', {
+          id: node.definition.id,
+          key: 'eventTimerDefinition',
+          value: {
+            type,
+            body,
+          },
+        });
       } else {
         window.ProcessMaker.EventBus.$emit('multiplayer-updateInspectorProperty', {
           id: node.definition.id , key, value: value[key],

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

@@ -5,6 +5,7 @@ import { taskHeight, taskWidth } from '@/components/nodes/task/taskConfig';
 import advancedAccordionConfig from '@/components/inspectors/advancedAccordionConfig';
 import documentationAccordionConfig from '@/components/inspectors/documentationAccordionConfig';
 import defaultNames from '@/components/nodes/task/defaultNames';
+import { loopCharacteristicsHandler } from '@/components/inspectors/LoopCharacteristics';
 
 export const id = 'processmaker-modeler-call-activity';
 
@@ -86,4 +87,5 @@ export default {
       ],
     },
   ],
+  loopCharacteristicsHandler,
 };

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

@@ -118,6 +118,7 @@ export default {
       deep: true,
       handler() {
         setupLoopCharacteristicsMarkers(this.node.definition, this.markers, this.$set, this.$delete);
+        this.$emit('definition-changed', this.node.definition);
       },
     },
   },

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

@@ -1,5 +1,5 @@
 <template>
-  <b-avatar-group class="container" v-show="!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/mixins/cloneSelection.js

@@ -128,7 +128,7 @@ export default {
         const originalTargetElement = this.getDataInputOutputAssociationTargetRef(originalAssociation.definition);
         const clonedElement = clonedNodes.find(node => node.cloneOf === originalTargetElement.id);
         const clonedDataInput = getOrFindDataInput(this.moddle, clonedElement, srcClone.definition);
-
+        clonedDataInput.$parent.$parent = clonedElement.definition;
         clonedAssociation.definition.set('sourceRef', [srcClone.definition]);
         clonedAssociation.definition.set('targetRef', clonedDataInput);
         clonedElement.definition.set('dataInputAssociations', [clonedAssociation.definition]);

package/src/multiplayer/multiplayer.js

@@ -4,6 +4,8 @@ import { getNodeIdGenerator } from '../NodeIdGenerator';
 import { getDefaultAnchorPoint } from '@/portsUtils';
 import Room from './room';
 import store from '@/store';
+import { setEventTimerDefinition } from '@/components/nodes/boundaryTimerEvent';
+import { getBoundaryEventData } from '@/components/nodes/boundaryEvent/boundaryEventUtils';
 
 export default class Multiplayer {
   clientIO = null;
@@ -199,7 +201,13 @@ export default class Multiplayer {
    */
   syncLocalNodes(clientId){
     // Get the process definition
-    const nodes = this.modeler.nodes.map((node) => this.modeler.multiplayerHook(node, false, true));
+    const nodes = this.modeler.nodes.map((node) => {
+      if (node.definition.$type === 'bpmn:BoundaryEvent') {
+        return getBoundaryEventData(node);
+      }
+
+      return this.modeler.multiplayerHook(node, false, true);
+    });
 
     nodes.forEach((node) => {
       const yMapNested = new Y.Map();
@@ -227,7 +235,7 @@ export default class Multiplayer {
     if (node) {
       return;
     }
-    if (this.modeler.nodeRegistry[value.type] && this.modeler.nodeRegistry[value.type].multiplayerClient) {
+    if (this.modeler.nodeRegistry[value.type]?.multiplayerClient) {
       this.modeler.nodeRegistry[value.type].multiplayerClient(this.modeler, value);
     } else {
       this.modeler.addRemoteNode(value);
@@ -559,8 +567,8 @@ export default class Multiplayer {
         return;
       }
       const keys = Object.keys(data).filter((key) => key !== 'id');
-      const key = keys[0];
-      const value = data[key];
+      let key = keys[0];
+      let value = data[key];
 
       if (key === 'condition') {
         node.definition.get('eventDefinitions')[0].get('condition').body = value;
@@ -606,6 +614,15 @@ export default class Multiplayer {
         node.definition.get('eventDefinitions')[0].signalRef = signal;
       }
 
+      if (key === 'eventTimerDefinition') {
+        const { type, body } = value;
+
+        const eventDefinitions = setEventTimerDefinition(this.modeler.moddle, node, type, body);
+
+        key = 'eventDefinitions';
+        value = eventDefinitions;
+      }
+
       const specialProperties = [
         'messageRef', 'signalRef', 'gatewayDirection', 'condition', 'allowedUsers', 'allowedGroups',
       ];

package/src/setup/addLoopCharacteristics.js

@@ -28,10 +28,10 @@ export default (node) => {
   const originalInspectorData = node.inspectorData || null;
 
   // Override the inspector handler to add loop props
-  node.inspectorHandler = (value, node, setNodeProp, moddle, definitions, defaultInspectorHandler) => {
+  node.inspectorHandler = (value, node, setNodeProp, moddle, definitions, defaultInspectorHandler, isMultiplayer) => {
     originalInspectorHandler(value, node, setNodeProp, moddle, definitions, defaultInspectorHandler);
-    value = loopCharacteristicsHandler(value, node, setNodeProp, moddle, definitions);
-    defaultInspectorHandler(value);
+    value = loopCharacteristicsHandler(value, node, setNodeProp, moddle, definitions, isMultiplayer);
+    defaultInspectorHandler(value, isMultiplayer);
   };
 
   // Override the data handler to load loop config into the inspector