@processmaker/modeler 1.27.0 → 1.29.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/modeler",
-  "version": "1.27.0",
+  "version": "1.29.0",
   "scripts": {
     "serve": "vue-cli-service serve",
     "open-cypress": "TZ=UTC cypress open",

package/src/NodeIdGenerator.js

@@ -1,11 +1,13 @@
 export default class NodeIdGenerator {
   static prefix = 'node_';
 
-  #counter = 1;
-  #diagramCounter = 1;
+  static #counter = 1;
+  static #diagramCounter = 1;
 
   constructor(definitions) {
     this.definitions = definitions;
+    this.refreshLastIdCounter();
+    this.refreshLastDiagramIdCounter();
   }
 
   findById(id, root = this.definitions.rootElements, walked = []) {
@@ -17,45 +19,76 @@ export default class NodeIdGenerator {
     } else if (root instanceof Object && root.$type) {
       walked.push(root);
       if (root.id === id) return root;
-      Object.getOwnPropertyNames(root).find(key => found = !(root[key] instanceof Function) && this.findById(id, root[key], walked));
+      Object.getOwnPropertyNames(root).find(key => found = !(root[key] instanceof Function) && (key.substring(0, 1) !== '$') && this.findById(id, root[key], walked));
     }
     return found;
   }
 
-  generate() {
-    let definitionId = this.#generateDefinitionId();
-    let diagramId = this.#generateDiagramId();
-
-    while (!this.#isDefinitionIdUnique(definitionId)) {
-      definitionId = this.#generateDefinitionId();
+  matchIds(idRegex, root, walked = [], lastIdCounter = 0) {
+    if (walked.indexOf(root) > -1) return lastIdCounter;
+    if (root instanceof Array) {
+      walked.push(root);
+      root.forEach(item => lastIdCounter = this.matchIds(idRegex, item, walked, lastIdCounter));
+    } else if (root instanceof Object) {
+      walked.push(root);
+      if (root.id) {
+        const match = String(root.id).match(idRegex);
+        const idCounter = match ? parseInt(match[1]) : 0;
+        if (idCounter > lastIdCounter) {
+          lastIdCounter = idCounter;
+        }
+      }
+      Object.getOwnPropertyNames(root).forEach(key => {
+        if (!(root[key] instanceof Function) && (key.substring(0, 1) !== '$')) {
+          lastIdCounter = this.matchIds(idRegex, root[key], walked, lastIdCounter);
+        }
+      });
     }
+    return lastIdCounter;
+  }
 
-    while (!this.#isDiagramIdUnique(diagramId)) {
-      diagramId = this.#generateDiagramId();
-    }
+  refreshLastIdCounter() {
+    let lastIdCounter = this.matchIds(new RegExp(`^${NodeIdGenerator.prefix}(\\d+)$`), this.definitions.rootElements);
+    NodeIdGenerator.#counter = lastIdCounter + 1;
+  }
 
+  getCounter() {
+    this.refreshLastIdCounter();
+    return NodeIdGenerator.#counter;
+  }
+
+  refreshLastDiagramIdCounter() {
+    let lastIdCounter = this.matchIds(new RegExp(`^${NodeIdGenerator.prefix}(\\d+)_di$`), this.definitions.diagrams);
+    NodeIdGenerator.#diagramCounter = lastIdCounter + 1;
+  }
+
+  generate() {
+    let definitionId = this.#generateDefinitionId();
+    let diagramId = this.#generateDiagramId();
     return [definitionId, diagramId];
   }
 
   #generateDefinitionId = () => {
-    const id = NodeIdGenerator.prefix + this.#counter;
-    this.#counter++;
+    const id = NodeIdGenerator.prefix + NodeIdGenerator.#counter;
+    NodeIdGenerator.#counter++;
 
     return id;
   };
 
   #generateDiagramId = () => {
-    const id = NodeIdGenerator.prefix + this.#diagramCounter + '_di';
-    this.#diagramCounter++;
+    const id = NodeIdGenerator.prefix + NodeIdGenerator.#diagramCounter + '_di';
+    NodeIdGenerator.#diagramCounter++;
 
     return id;
   };
+}
 
-  #isDefinitionIdUnique = id => {
-    return !this.findById(id) && !this.findById(id, this.definitions.diagrams);
-  };
+// Singleton instance
+let singleton = null;
 
-  #isDiagramIdUnique = id => {
-    return !this.findById(id) && !this.findById(id, this.definitions.diagrams);
-  };
+export function getNodeIdGenerator(definitions) {
+  if (!singleton) {
+    singleton = new NodeIdGenerator(definitions);
+  }
+  return singleton;
 }

package/src/NodeInspector.js

@@ -1,4 +1,4 @@
-import NodeIdGenerator from './NodeIdGenerator';
+import { getNodeIdGenerator } from './NodeIdGenerator';
 import omit from 'lodash/omit';
 
 export default class NodeInspector {
@@ -6,7 +6,7 @@ export default class NodeInspector {
   constructor(definitions, options = {}) {
     this.index = window.NODE_INSPECTOR_FIRST_INDEX || new Date().getTime();
     this.definitions = definitions;
-    this.nodeIdGenerator = new NodeIdGenerator(this.definitions);
+    this.nodeIdGenerator = getNodeIdGenerator(this.definitions);
     this.options = Object.assign({
       prefix: this.nodeIdGenerator.generate()[0],
     }, options);

package/src/components/crown/crownButtons/{duplicateButton.vue → cloneButton.vue}

@@ -1,16 +1,17 @@
 <template>
   <crown-button
     v-if="node.isBpmnType(...validCopyElements)"
-    :title="$t('Duplicate Element')"
+    :title="$t('Clone Element')"
     v-b-tooltip.hover.viewport.d50="{ customClass: 'no-pointer-events' }"
-    aria-label="Duplicate Element"
-    data-test="duplicate-button"
+    aria-label="Clone Element"
+    data-test="clone-button"
     role="menuitem"
-    @click="duplicateElement"
+    @click="cloneElement"
   >
     <img
-      :src="duplicateIcon"
+      :src="cloneIcon"
       aria-hidden="true"
+      alt="Clone element icon"
     >
   </crown-button>
   
@@ -18,7 +19,7 @@
 
 <script>
 import CrownButton from '@/components/crown/crownButtons/crownButton';
-import duplicateIcon from '@/assets/copy-regular.svg';
+import cloneIcon from '@/assets/copy-regular.svg';
 import validCopyElements from '@/components/crown/crownButtons/validCopyElements';
 
 export default {
@@ -27,13 +28,13 @@ export default {
   data() {
     return {
       copyCount: 0,
-      duplicateIcon,
+      cloneIcon,
       validCopyElements,
     };
   },
   methods: {
-    duplicateElement() {
-      this.$emit('duplicate-element', this.node, ++this.copyCount);
+    cloneElement() {
+      this.$emit('clone-element', this.node, ++this.copyCount);
     },
   },
 };

package/src/components/crown/crownConfig/crownConfig.vue

@@ -50,7 +50,7 @@
       v-on="$listeners"
     />
 
-    <duplicate-button
+    <clone-button
       :node="node"
       v-on="$listeners"
     />
@@ -84,7 +84,7 @@ import GenericFlowButton from '@/components/crown/crownButtons/genericFlowButton
 import AssociationFlowButton from '@/components/crown/crownButtons/associationFlowButton';
 import DataAssociationFlowButton from '@/components/crown/crownButtons/dataAssociationFlowButton';
 import CopyButton from '@/components/crown/crownButtons/copyButton.vue';
-import DuplicateButton from '@/components/crown/crownButtons/duplicateButton.vue';
+import CloneButton from '@/components/crown/crownButtons/cloneButton.vue';
 import CrownDropdowns from '@/components/crown/crownButtons/crownDropdowns';
 import DefaultFlow from '@/components/crown/crownButtons/defaultFlowButton.vue';
 import poolLaneCrownConfig from '@/mixins/poolLaneCrownConfig';
@@ -101,7 +101,7 @@ export default {
     GenericFlowButton,
     AssociationFlowButton,
     CopyButton,
-    DuplicateButton,
+    CloneButton,
     DefaultFlow,
     DataAssociationFlowButton,
   },
@@ -140,7 +140,6 @@ export default {
       handler() {
         this.setNodeColor();
       },
-      deep: true,
     },
     highlightedShapes(shapes, prevShapes) {
       if (isEqual(shapes, prevShapes)) {

package/src/components/crown/crownMultiselect/crownMultiselect.vue

@@ -8,7 +8,7 @@
     <slot />
 
     <button
-      v-for="button in buttons"
+      v-for="button in availableButtons"
       :key="button.label"
       :aria-label="button.label"
       class="btn"
@@ -30,6 +30,7 @@ import runningInCypressTest from '@/runningInCypressTest';
 export default {
   props: {
     paper: Object,
+    hasPools: Boolean,
   },
   data() {
     return {
@@ -42,18 +43,18 @@ export default {
       nodeToReplace: null,
       buttons: [
         {
-          label: 'Copy Seletion',
+          label: 'Copy Selection',
           icon: 'clipboard',
           testId: 'copy-button',
           role: 'menuitem',
           action: this.copySelection,
         },
         {
-          label: 'Duplicate Selection',
+          label: 'Clone Selection',
           icon: 'copy',
-          testId: 'duplicate-button',
+          testId: 'clone-button',
           role: 'menuitem',
-          action: this.duplicateSelection,
+          action: this.cloneSelection,
         },
         {
           label: 'Delete Element',
@@ -75,13 +76,25 @@ export default {
       return countSelected > 1;
     },
     highlightedShapes: () => store.getters.highlightedShapes,
+    availableButtons() {
+      const hasPoolsSelected = this.hasPools;
+      return this.buttons.filter(button => {
+        if (button.testId === 'copy-button') {
+          return !hasPoolsSelected;
+        }
+        if (button.testId === 'clone-button') {
+          return !hasPoolsSelected;
+        }
+        return true;
+      });
+    },
   },
   methods: {
     copySelection() {
       this.$emit('copy-selection');
     },
-    duplicateSelection() {
-      this.$emit('duplicate-selection');
+    cloneSelection() {
+      this.$emit('clone-selection');
     },
     deleteElement() {
       this.$emit('remove-nodes');

package/src/components/crown/utils.js

@@ -114,6 +114,7 @@ export function getOrFindDataInput(moddle, task, sourceNode) {
       inputSets: [],
       outputSets: [],
     });
+    task.definition.ioSpecification.$parent = task.definition;
   }
   // Check if dataInput exists
   if (!task.definition.ioSpecification.dataInputs) {
@@ -126,6 +127,7 @@ export function getOrFindDataInput(moddle, task, sourceNode) {
       isCollection: 'false',
       name: sourceNode.name,
     }));
+    task.definition.ioSpecification.dataInputs[task.definition.ioSpecification.dataInputs.length - 1].$parent = task.definition.ioSpecification;
     task.definition.ioSpecification.set('dataInputs', task.definition.ioSpecification.dataInputs);
   }
   dataInput = task.definition.ioSpecification.dataInputs.find(input => input.id === dataInputId);
@@ -164,13 +166,22 @@ export function getOrFindDataInput(moddle, task, sourceNode) {
   }
   inputSet = task.definition.ioSpecification.inputSets[0];
   // Check if dataInputRef exists
-  const dataInputRef = inputSet.dataInputRefs.find(ref => ref.id === dataInputId);
+  const dataInputRef = inputSet.get('dataInputRefs').find(ref => ref.id === dataInputId);
   if (!dataInputRef) {
     inputSet.dataInputRefs.push(dataInput);
   }
   return dataInput;
 }
 
+export function findIOSpecificationOwner(ioSpec, modeler) {
+  const owner = ioSpec.$parent;
+  if (!owner) {
+    return modeler.nodes.find(node => node.definition.ioSpecification === ioSpec ||
+      node.definition.ioSpecification?.id === ioSpec.id
+    )?.definition;
+  }
+  return owner;
+}
 
 export function removeDataInput(task, sourceNode) {
   if (sourceNode.$type !== 'bpmn:DataObjectReference' && sourceNode.$type !== 'bpmn:DataStoreReference') {

package/src/components/hotkeys/copyPaste.js

@@ -1,13 +1,16 @@
 export default {
   methods: {
     copyPasteHandler(event, options) {
-      const isCopy = event.key === 'c';
-      const isPaste = event.key === 'v';
+      const node = event.target.nodeName.toLowerCase();
+      const isBody = node === 'body';
+      const key = event.key.toLowerCase();
+      const isCopy = key === 'c';
+      const isPaste = key === 'v';
 
-      if (isCopy && options.mod) {
+      if (isBody && isCopy && options.mod) {
         this.copy(event);
       }
-      if (isPaste && options.mod) {
+      if (isBody && isPaste && options.mod) {
         this.paste(event);
       }
     },

package/src/components/hotkeys/main.js

@@ -5,6 +5,11 @@ import moveShapeByKeypress from './moveWithArrowKeys';
 
 export default {
   mixins: [ZoomInOut, CopyPaste],
+  computed: {
+    clientLeftPaper() {
+      return store.getters.clientLeftPaper;
+    },
+  },
   mounted() {
     document.addEventListener('keydown', this.keydownListener);
     document.addEventListener('keyup', this.keyupListener);
@@ -45,7 +50,7 @@ export default {
             const scale = this.paperManager.scale;
             this.canvasDragPosition = { x: x * scale.sx, y: y * scale.sy };
           }
-          if (this.canvasDragPosition) {
+          if (this.canvasDragPosition && !this.clientLeftPaper) {
             this.paperManager.translate(
               event.offsetX - this.canvasDragPosition.x,
               event.offsetY - this.canvasDragPosition.y

package/src/components/inspectors/DocumentationFormTextArea.vue

@@ -12,6 +12,7 @@
       data-test="documentation-text-area"
       id="documentation-editor"
       @input="$emit('input', $event)"
+      @blur="onBlur"
     />
 
     <b-modal
@@ -34,6 +35,7 @@
         data-test="documentation-modal-text-area"
         id="documentation-editor-modal"
         @input="$emit('input', $event)"
+        @blur="onBlur"
       />
     </b-modal>
   </div>
@@ -63,8 +65,10 @@ export default {
     },
   },
   methods: {
-    emitValue(value) {
-      this.$emit('input', value);
+    onBlur() {
+      // Update the undoStack when the Editor loses focus to trigger the autosave.
+      const child = this.$root.$children.find((c) => c.$refs.modeler);
+      child.$refs.modeler.pushToUndoStack();
     },
   },
 };

package/src/components/inspectors/LoopCharacteristics.vue

@@ -115,6 +115,9 @@ export default {
         },
         loopMaximum: 0,
         loopCondition: null,
+        ioSpecification: {
+          dataInputs: [],
+        },
       },
       loopType: null,
       multiType: null,
@@ -218,7 +221,7 @@ export default {
     },
     getLoopDataOutputRef() {
       if (!this.local.loopCharacteristics || !this.local.loopCharacteristics.loopDataOutputRef) return null;
-      return this.local.ioSpecification.dataOutputs[0].name;
+      return this.local.ioSpecification?.dataOutputs[0].name;
     },
     setLoopDataOutputRef(value) {
       if (!this.local.ioSpecification) {
@@ -252,7 +255,7 @@ export default {
     },
     getLoopDataInputRef() {
       if (!this.local.loopCharacteristics || !this.local.loopCharacteristics.loopDataInputRef) return null;
-      return this.local.ioSpecification.dataInputs[0].name;
+      return this.local.ioSpecification?.dataInputs[0].name;
     },
     setLoopDataInputRef(value) {
       const dataDef = {

package/src/components/inspectors/process.js

@@ -1,6 +1,6 @@
 import idConfigSettings from './idConfigSettings';
 
-export default {
+const process = {
   id: 'processmaker-modeler-process',
   bpmnType: 'bpmn:Process',
   control: false,
@@ -38,3 +38,7 @@ export default {
     },
   ],
 };
+
+export const id = process.id;
+
+export default process;