@processmaker/modeler 1.27.0 → 1.29.0

package/src/components/nodes/genericFlow/genericFlow.vue

@@ -86,23 +86,6 @@ export default {
     },
   },
   watch: {
-    'node.definition': {
-      handler() {
-        const newNameLabel = this.shapeName;
-
-        if (newNameLabel !== this.nameLabel) {
-          this.nameLabel = newNameLabel;
-        }
-        this.setDefaultMarker(this.isDefaultFlow());
-      },
-      deep: true,
-    },
-    'node.definition.sourceRef': {
-      handler() {
-        this.setDefaultMarker(this.isDefaultFlow());
-      },
-      deep: true,
-    },
   },
   methods: {
     completeLink() {

package/src/components/nodes/node.js

@@ -10,7 +10,7 @@ import cloneDeep from 'lodash/cloneDeep';
 
 export default class Node {
   static diagramPropertiesToCopy = ['x', 'y', 'width', 'height'];
-  static definitionPropertiesToNotCopy = ['$type', 'id'];
+  static definitionPropertiesToNotCopy = ['$type', 'id', 'dataOutputAssociations'];
   static flowDefinitionPropertiesToNotCopy = ['$type', 'id', 'sourceRef', 'targetRef'];
   static eventDefinitionPropertiesToNotCopy = ['errorRef', 'messageRef'];
 
@@ -81,6 +81,70 @@ export default class Node {
       this.diagram.id = diagramId;
       this.diagram.bpmnElement = this.definition;
     }
+    if (this.definition.loopCharacteristics && this.definition.loopCharacteristics.$type === 'bpmn:StandardLoopCharacteristics') {
+      this.definition.loopCharacteristics.set('id', nodeIdGenerator.generate()[0]);
+      if (this.definition.loopCharacteristics.loopCondition) {
+        this.definition.loopCharacteristics.get('loopCondition').set('id', nodeIdGenerator.generate()[0]);
+      }
+    }
+    let dataInputRef, dataOutputRef;
+    if (this.definition.ioSpecification) {
+      this.definition.ioSpecification.set('id', nodeIdGenerator.generate()[0]);
+      const taskId = this.definition.id;
+      if (this.definition.ioSpecification.get('dataInputs')) {
+        this.definition.ioSpecification.get('dataInputs').forEach(dataInput => {
+          const id = dataInput.get('id');
+          if (id.substring(0, this.cloneOf.length) === this.cloneOf) {
+            dataInput.set('id', id.replace(this.cloneOf + '_', taskId + '_'));
+            dataInputRef = dataInput;
+          } else {
+            dataInput.set('id', nodeIdGenerator.generate()[0]);
+          }
+        });
+      }
+      if (this.definition.ioSpecification.get('dataOutputs')) {
+        this.definition.ioSpecification.get('dataOutputs').forEach(dataOutput => {
+          const id = dataOutput.get('id');
+          if (id.substring(0, this.cloneOf.length) === this.cloneOf) {
+            dataOutput.set('id', id.replace(this.cloneOf + '_', taskId + '_'));
+            dataOutputRef = dataOutput;
+          } else {
+            dataOutput.set('id', nodeIdGenerator.generate()[0]);
+          }
+        });
+      }
+      if (this.definition.ioSpecification.get('inputSets')) {
+        this.definition.ioSpecification.get('inputSets').forEach(inputSet => {
+          inputSet.set('id', nodeIdGenerator.generate()[0]);
+        });
+      }
+      if (this.definition.ioSpecification.get('outputSets')) {
+        this.definition.ioSpecification.get('outputSets').forEach(outputSet => {
+          outputSet.set('id', nodeIdGenerator.generate()[0]);
+        });
+      }
+    }
+    if (this.definition.loopCharacteristics && this.definition.loopCharacteristics.$type === 'bpmn:MultiInstanceLoopCharacteristics') {
+      this.definition.loopCharacteristics.set('id', nodeIdGenerator.generate()[0]);
+      if (this.definition.loopCharacteristics.loopCardinality) {
+        this.definition.loopCharacteristics.get('loopCardinality').set('id', nodeIdGenerator.generate()[0]);
+      }
+      if (this.definition.loopCharacteristics.loopDataInputRef && dataInputRef) {
+        this.definition.loopCharacteristics.set('loopDataInputRef', dataInputRef);
+      }
+      if (this.definition.loopCharacteristics.loopDataOutputRef && dataOutputRef) {
+        this.definition.loopCharacteristics.set('loopDataOutputRef', dataOutputRef);
+      }
+      if (this.definition.loopCharacteristics.inputDataItem) {
+        this.definition.loopCharacteristics.get('inputDataItem').set('id', nodeIdGenerator.generate()[0]);
+      }
+      if (this.definition.loopCharacteristics.outputDataItem) {
+        this.definition.loopCharacteristics.get('outputDataItem').set('id', nodeIdGenerator.generate()[0]);
+      }
+      if (this.definition.loopCharacteristics.completionCondition) {
+        this.definition.loopCharacteristics.get('completionCondition').set('id', nodeIdGenerator.generate()[0]);
+      }
+    }
   }
 
   clone(nodeRegistry, moddle, $t) {
@@ -90,7 +154,7 @@ export default class Node {
 
     clonedNode.id = null;
     clonedNode.pool = this.pool;
-    clonedNode.definition.cloneOf = this.id;
+    clonedNode.cloneOf = this.id;
 
     Node.diagramPropertiesToCopy.forEach(prop => clonedNode.diagram.bounds[prop] = this.diagram.bounds[prop]);
     Object.keys(this.definition).filter(key => !Node.definitionPropertiesToNotCopy.includes(key)).forEach(key => {
@@ -99,7 +163,7 @@ export default class Node {
       if (key === 'eventDefinitions') {
         for (var i in clonedDefinition) {
           if (definition[i].signalRef && !clonedDefinition[i].signalRef) {
-            clonedDefinition[i].signalRef = { ...definition[i].signalRef };
+            clonedDefinition[i].set('signalRef', { ...definition[i].signalRef });
           }
         }
       }
@@ -122,10 +186,18 @@ export default class Node {
 
     clonedFlow.id = null;
     clonedFlow.pool = this.pool;
-    clonedFlow.definition.cloneOf = this.id;
-    clonedFlow.diagram.waypoint = [];
+    clonedFlow.cloneOf = this.id;
+    clonedFlow.diagram = moddle.create('bpmndi:BPMNEdge', {
+      waypoint: [],
+    });
 
-    this.diagram.waypoint.forEach(point => clonedFlow.diagram.waypoint.push(point));
+    this.diagram.waypoint.forEach(point => {
+      const waypoint = moddle.create('dc:Point', {
+        x: point.x,
+        y: point.y,
+      });
+      clonedFlow.diagram.waypoint.push(waypoint);
+    });
 
     Object.keys(this.definition).filter(key => !Node.flowDefinitionPropertiesToNotCopy.includes(key)).forEach(key => {
       const definition = this.definition.get(key);
@@ -133,12 +205,13 @@ export default class Node {
       if (key === 'eventDefinitions') {
         for (var i in clonedDefinition) {
           if (definition[i].signalRef && !clonedDefinition[i].signalRef) {
-            clonedDefinition[i].signalRef = { ...definition[i].signalRef };
+            clonedDefinition[i].set('signalRef', { ...definition[i].signalRef });
           }
         }
       }
       clonedFlow.definition.set(key, clonedDefinition);
-      clonedFlow.definition.sourceRef = clonedFlow.definition.targetRef  = null;
+      clonedFlow.definition.set('sourceRef', null);
+      clonedFlow.definition.set('targetRef', null);
     });
 
     Node.eventDefinitionPropertiesToNotCopy.forEach(

package/src/components/nodes/pool/poolEventHandlers.js

@@ -46,14 +46,6 @@ export default class PoolEventHandlers {
       return;
     }
 
-    if (this.previousValidPosition) {
-      this.draggingElement.position(this.previousValidPosition.x, this.previousValidPosition.y, { deep: true });
-      store.commit('updateNodeBounds', {
-        node: this.draggingElement.component.node,
-        bounds: this.previousValidPosition,
-      });
-    }
-
     if (this.invalidPool) {
       this.invalidPool.attr('body/fill', poolColor);
       this.invalidPool = null;
@@ -64,7 +56,6 @@ export default class PoolEventHandlers {
       this.component.moveElement(this.draggingElement, this.newPool);
       this.newPool = null;
     } else {
-      this.component.expandToFitElement(this.draggingElement, this.shape);
       this.component.laneSet && this.component.updateLaneChildren();
     }
 

package/src/components/toolbar/ToolBar.vue

@@ -101,7 +101,7 @@
               </span>
             </div>
             <a
-              class="btn btn-sm btn-primary autosave-btn text-uppercase mx-2"
+              class="btn btn-sm btn-primary btn-autosave text-uppercase mx-2"
               data-test="publish-btn"
               :title="$t('Publish')"
               @click="$emit('saveBpmn')"
@@ -109,7 +109,7 @@
               {{ $t('Publish') }}
             </a>
             <a
-              class="btn btn-sm btn-link toolbar-item autosave-btn text-black text-uppercase"
+              class="btn btn-sm btn-link toolbar-item btn-autosave text-black text-uppercase"
               data-test="close-btn"
               :title="$t('Close')"
               @click="$emit('close')"
@@ -183,9 +183,6 @@ export default {
     canRedo() {
       return undoRedoStore.getters.canRedo;
     },
-    saved() {
-      return undoRedoStore.getters.saved;
-    },
     versionStatus() {
       const status = undoRedoStore.getters.isDraft ? 'Draft' : 'Published';
       return this.$t(status);
@@ -227,6 +224,11 @@ export default {
           content: this.$t('Discard Draft'),
           icon: '',
         },
+        {
+          value: 'save-template',
+          content: this.$t('Save as Template'),
+          icon: '',
+        },
       ],
     };
   },
@@ -238,8 +240,7 @@ export default {
       }
       undoRedoStore
         .dispatch('undo')
-        .then(() => this.$emit('load-xml'))
-        .then(() => window.ProcessMaker.EventBus.$emit('modeler-change'));
+        .then(() => this.$emit('load-xml'));
     },
     redo() {
       this.$emit('clearSelection');
@@ -248,14 +249,16 @@ export default {
       }
       undoRedoStore
         .dispatch('redo')
-        .then(() => this.$emit('load-xml'))
-        .then(() => window.ProcessMaker.EventBus.$emit('modeler-change'));
+        .then(() => this.$emit('load-xml'));
     },
     onNavigate(action) {
       switch (action.value) {
         case 'discard-draft':
           window.ProcessMaker.EventBus.$emit('open-versions-discard-modal');
           break;
+        case 'save-template':
+          this.$emit('publishTemplate');
+          break;
         default:
           break;
       }
@@ -273,6 +276,15 @@ export default {
       }
     },
   },
+  mounted() {
+    if (this.$root.$children[0].process.is_template) {
+      const indexOfActions = this.ellipsisMenuActions.findIndex(object => {
+        return object.value === 'save-template';
+      });
+
+      this.ellipsisMenuActions.splice(indexOfActions, 1);
+    }
+  },
 };
 </script>
 <style lang="scss" src="./toolbar.scss" />

package/src/components/toolbar/toolbar.scss

@@ -28,10 +28,11 @@ $toolbar-background-color: #fff;
   cursor: default !important;
 }
 
-.autosave-btn {
+.btn-autosave {
   display: flex;
   justify-content: center;
   align-items: center;
+  border-radius: 4px !important;
 }
 
 .btn-ellipsis {

package/src/mixins/cloneSelection.js

@@ -0,0 +1,153 @@
+import { id as laneId } from '../components/nodes/poolLane/config';
+import { id as sequenceFlowId } from '../components/nodes/sequenceFlow';
+import { id as associationId } from '../components/nodes/association';
+import { id as messageFlowId } from '../components/nodes/messageFlow/config';
+import { id as dataOutputAssociationFlowId } from '../components/nodes/dataOutputAssociation/config';
+import { id as dataInputAssociationFlowId } from '../components/nodes/dataInputAssociation/config';
+import { id as genericFlowId } from '../components/nodes/genericFlow/config';
+import { getOrFindDataInput, findIOSpecificationOwner } from '../components/crown/utils';
+
+export default {
+  methods: {
+    cloneNodesSelection() {
+      let clonedNodes = [], clonedFlows = [], clonedBoundaryEvents = [], clonedDataInputAssociations = [], clonedDataOutputAssociations = [];
+      const nodes = this.highlightedNodes;
+      const selector = this.$refs.selector.$el;
+      const flowNodeTypes = [
+        sequenceFlowId,
+        laneId,
+        associationId,
+        messageFlowId,
+        genericFlowId,
+      ];
+      const dataInputAssociationNodeTypes = [
+        dataInputAssociationFlowId,
+      ];
+      const dataOutputAssociationNodeTypes = [
+        dataOutputAssociationFlowId,
+      ];
+
+      if (typeof selector.getBoundingClientRect === 'function') {
+        nodes.forEach(node => {
+          if (flowNodeTypes.includes(node.type)) {
+            const clonedFlow = this.cloneFlowAndSetNewId(node);
+            clonedFlows.push(clonedFlow);
+            clonedNodes.push(clonedFlow);
+          } else if (dataInputAssociationNodeTypes.includes(node.type)) {
+            const clonedFlow = this.cloneFlowAndSetNewId(node);
+            clonedDataInputAssociations.push(clonedFlow);
+            clonedNodes.push(clonedFlow);
+          } else if (dataOutputAssociationNodeTypes.includes(node.type)) {
+            const clonedFlow = this.cloneFlowAndSetNewId(node);
+            clonedDataOutputAssociations.push(clonedFlow);
+            clonedNodes.push(clonedFlow);
+          } else {
+            // Validate boundary events and collect in clonedBoundaryEvents array
+            const clonedElement = this.cloneElementAndCalculateOffset(node);
+            if (node.definition && node.definition.$type !== 'bpmn:BoundaryEvent') {
+              clonedNodes.push(clonedElement);
+            }  else {
+              clonedBoundaryEvents.push(clonedElement);
+            }
+          }
+        });
+      }
+      // Sets the clonedBoundaryEvents at the end of the array
+      clonedNodes = [...clonedNodes, ...clonedBoundaryEvents];
+      this.connectClonedFlows(clonedFlows, clonedNodes);
+      this.connectClonedDataInputAssociations(clonedDataInputAssociations, clonedNodes);
+      this.connectClonedDataOutputAssociations(clonedDataOutputAssociations, clonedNodes);
+
+      return clonedNodes;
+    },
+    // Returns the Flow Element (Task| DataStore| DataObject)  that is the target of the association
+    getDataInputOutputAssociationTargetRef(association) {
+      if (association.targetRef.$type === 'bpmn:DataInput') {
+        const ioSpec = association.targetRef.$parent;
+        return findIOSpecificationOwner(ioSpec, this);
+      }
+      if (association.targetRef.$type === 'bpmn:DataInputAssociation') {
+        const ioSpec = association.targetRef.$parent;
+        return findIOSpecificationOwner(ioSpec, this);
+      }
+      return association.targetRef;
+    },
+    cloneFlowAndSetNewId(node) {
+      const clonedFlow = node.cloneFlow(this.nodeRegistry, this.moddle, this.$t);
+      clonedFlow.setIds(this.nodeIdGenerator);
+      return clonedFlow;
+    },
+    cloneElementAndCalculateOffset(node) {
+      const clonedElement = node.clone(this.nodeRegistry, this.moddle, this.$t);
+      const { height: selectorHeight } = this.$refs.selector.$el.getBoundingClientRect();
+      const { sy } = this.paper.scale();
+      const yOffset = selectorHeight / sy;
+      clonedElement.diagram.bounds.y += yOffset;
+      clonedElement.setIds(this.nodeIdGenerator);
+      return clonedElement;
+    },
+    connectClonedFlows(clonedFlows, clonedNodes) {
+      clonedFlows.forEach(clonedFlow => {
+        const originalFlow = this.nodes.find(node => node.definition.id === clonedFlow.cloneOf);
+        const src = originalFlow.definition.sourceRef;
+        const target = originalFlow.definition.targetRef;
+        const srcClone = clonedNodes.find(node => node.cloneOf === src.id);
+        const targetClone = clonedNodes.find(node => node.cloneOf === target.id);
+        if (!srcClone || !targetClone) {
+          clonedNodes.splice(clonedNodes.indexOf(clonedFlow), 1);
+          return;
+        }
+        clonedFlow.definition.set('sourceRef', srcClone.definition);
+        clonedFlow.definition.set('targetRef', targetClone.definition);
+
+        if (srcClone.definition.outgoing) {
+          srcClone.definition.outgoing.push(clonedFlow.definition);
+        } else {
+          srcClone.definition.set('outgoing', [clonedFlow.definition]);
+        }
+
+        if (targetClone.definition.incoming) {
+          targetClone.definition.incoming.push(clonedFlow.definition);
+        } else {
+          targetClone.definition.set('incoming', [clonedFlow.definition]);
+        }
+
+        const { height: selectorHeight } = this.$refs.selector.$el.getBoundingClientRect();
+        const { sy } = this.paper.scale();
+        const yOffset = selectorHeight / sy;
+        clonedFlow.diagram.waypoint.forEach(point => {
+          point.y += yOffset;
+        });
+      });
+    },
+    connectClonedDataInputAssociations(clonedDataInputAssociations, clonedNodes) {
+      clonedDataInputAssociations.forEach(clonedAssociation => {
+        const originalAssociation = this.nodes.find(node => node.definition.id === clonedAssociation.cloneOf);
+        const src = originalAssociation.definition.sourceRef[0];
+        const srcClone = clonedNodes.find(node => node.cloneOf === src.id);
+        const originalTargetElement = this.getDataInputOutputAssociationTargetRef(originalAssociation.definition);
+        const clonedElement = clonedNodes.find(node => node.cloneOf === originalTargetElement.id);
+        const clonedDataInput = getOrFindDataInput(this.moddle, clonedElement, srcClone.definition);
+
+        clonedAssociation.definition.set('sourceRef', [srcClone.definition]);
+        clonedAssociation.definition.set('targetRef', clonedDataInput);
+        clonedElement.definition.set('dataInputAssociations', [clonedAssociation.definition]);
+      });
+    },
+    connectClonedDataOutputAssociations(clonedDataOutputAssociations, clonedNodes) {
+      clonedDataOutputAssociations.forEach(clonedAssociation => {
+        const originalAssociation = this.nodes.find(node => node.definition.id === clonedAssociation.cloneOf);
+        const src = originalAssociation.definition.sourceRef || originalAssociation.definition.$parent;
+        const target = originalAssociation.definition.targetRef;
+        const srcClone = clonedNodes.find(node => node.cloneOf === src.id);
+        const targetClone = clonedNodes.find(node => node.cloneOf === target.id);
+
+        clonedAssociation.definition.set('targetRef', targetClone.definition);
+        clonedAssociation.definition.set('sourceRef', srcClone.definition);
+
+        const existingOutputAssociations = srcClone.definition.get('dataOutputAssociations') || [];
+        srcClone.definition.set('dataOutputAssociations', [...existingOutputAssociations, clonedAssociation.definition]);
+      });
+    },
+  },
+};

package/src/mixins/linkConfig.js

@@ -78,7 +78,7 @@ export default {
       });
     },
     setEndpoint(shape, endpoint, connectionOffset) {
-      if (isPoint(shape)) {
+      if (shape && isPoint(shape)) {
         return this.shape[endpoint](shape, {
           anchor: {
             name: 'modelCenter',
@@ -253,6 +253,9 @@ export default {
       ? this.getTargetRef()
       : this.node.definition.get('targetRef');
 
+    // if flow doesn't have a targetRef such as incomplete node, return
+    if (!targetRef) return;
+
     if (targetRef.id) {
       const targetShape = this.graph.getElements().find(element => {
         return element.component && element.component.node.definition === targetRef;

package/src/store.js

@@ -36,8 +36,7 @@ export default new Vuex.Store({
     globalProcesses: [],
     allowSavingElementPosition: true,
     copiedElements: [],
-    clientX: null,
-    clientY: null,
+    clientLeftPaper: false,
   },
   getters: {
     nodes: state => state.nodes,
@@ -56,8 +55,7 @@ export default new Vuex.Store({
     globalProcessEvents: (state, getters) => flatten(getters.globalProcesses.map(process => process.events)),
     allowSavingElementPosition: state => state.allowSavingElementPosition,
     copiedElements: state => state.copiedElements,
-    clientX: state => state.clientX,
-    clientY: state => state.clientY,
+    clientLeftPaper: state => state.clientLeftPaper,
   },
   mutations: {
     preventSavingElementPosition(state) {
@@ -73,6 +71,9 @@ export default new Vuex.Store({
       state.rootElements = rootElements;
     },
     updateNodeBounds(state, { node, bounds }) {
+      if (!bounds) {
+        return;
+      }
       Object.entries(bounds).forEach(([key, val]) => {
         if (key === '$type') {
           return;
@@ -148,13 +149,8 @@ export default new Vuex.Store({
     setCopiedElements(state, elements) {
       state.copiedElements = elements;
     },
-    setClientMousePosition(state, position) {
-      const { clientX, clientY } = position;
-      state = { clientX, clientY };
-    },
-    clientLeftPaper(state) {
-      state.clientX = null;
-      state.clientY = null;
+    setClientLeftPaper(state, status) {
+      state.clientLeftPaper = status;
     },
   },
   actions: {

package/src/undoRedoStore.js

@@ -8,7 +8,6 @@ export default new Vuex.Store({
     stack: [],
     position: null,
     disabled: false,
-    saved: false,
     isVersionsInstalled: false,
     isDraft: false,
     isLoading: false,
@@ -23,9 +22,6 @@ export default new Vuex.Store({
     currentState(state) {
       return state.stack[state.position];
     },
-    saved(state) {
-      return state.saved;
-    },
     isVersionsInstalled(state) {
       return state.isVersionsInstalled;
     },
@@ -53,9 +49,6 @@ export default new Vuex.Store({
     enableSavingState(state) {
       state.disabled = false;
     },
-    savedState(state, payload) {
-      state.saved = payload;
-    },
     isVersionsInstalled(state, payload) {
       state.isVersionsInstalled = payload;
     },
@@ -89,22 +82,14 @@ export default new Vuex.Store({
 
       commit('setPosition', state.position + 1);
     },
-    saved({ commit }) {
-      commit('savedState', true);
-
-      // Automatically remove the notification after 2 seconds.
-      setTimeout(() => {
-        commit('savedState', false);
-      }, 2000);
-    },
     enableVersions({ commit }) {
       commit('isVersionsInstalled', true);
     },
-    setVersionIndicator({ commit }, newState) {
-      commit('isDraft', newState);
+    setVersionIndicator({ commit }, value) {
+      commit('isDraft', value);
     },
-    setLoadingState({ commit }, newState) {
-      commit('isLoading', newState);
+    setLoadingState({ commit }, value) {
+      commit('isLoading', value);
     },
   },
 });