@processmaker/modeler 1.40.1 → 1.40.2

package/package.json

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

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
@@ -420,6 +421,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,11 +1184,10 @@ 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-conditional-event',
         'processmaker-modeler-boundary-message-event',
       ];
       if (!this.isMultiplayer) {

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,20 @@ 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 }),
+  };
+
+  const eventDefinitions = [
+    moddle.create('bpmn:TimerEventDefinition', eventDefinition),
+  ];
+
+  eventDefinitions[0].id = node.definition.get('eventDefinitions')[0].id;
+
+  return eventDefinitions;
+};
+
 export default merge(cloneDeep(boundaryEventConfig), {
   id,
   component,
@@ -58,17 +72,18 @@ 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

@@ -47,6 +47,7 @@ export default {
             if (node.definition && node.definition.$type !== 'bpmn:BoundaryEvent') {
               clonedNodes.push(clonedElement);
             }  else {
+              clonedElement.fromCrown = true;
               clonedBoundaryEvents.push(clonedElement);
             }
           }
@@ -128,7 +129,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