@processmaker/modeler 1.26.0 → 1.28.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/modeler",
-  "version": "1.26.0",
+  "version": "1.28.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/assets/clipboard.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="#fff" d="M280 64h40c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128C0 92.7 28.7 64 64 64h40 9.6C121 27.5 153.3 0 192 0s71 27.5 78.4 64H280zM64 112c-8.8 0-16 7.2-16 16V448c0 8.8 7.2 16 16 16H320c8.8 0 16-7.2 16-16V128c0-8.8-7.2-16-16-16H304v24c0 13.3-10.7 24-24 24H192 104c-13.3 0-24-10.7-24-24V112H64zm128-8a24 24 0 1 0 0-48 24 24 0 1 0 0 48z"/></svg>

package/src/components/crown/crownButtons/copyButton.vue

@@ -13,12 +13,12 @@
       aria-hidden="true"
     >
   </crown-button>
-  
+
 </template>
 
 <script>
 import CrownButton from '@/components/crown/crownButtons/crownButton';
-import copyIcon from '@/assets/copy-regular.svg';
+import copyIcon from '@/assets/clipboard.svg';
 import validCopyElements from '@/components/crown/crownButtons/validCopyElements';
 
 export default {
@@ -33,7 +33,7 @@ export default {
   },
   methods: {
     copyElement() {
-      this.$emit('copy-element', this.node, ++this.copyCount);
+      this.$emit('copy-element');
     },
   },
 };

package/src/components/crown/crownButtons/duplicateButton.vue

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

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

@@ -50,6 +50,11 @@
       v-on="$listeners"
     />
 
+    <duplicate-button
+      :node="node"
+      v-on="$listeners"
+    />
+
     <delete-button
       :graph="graph"
       :shape="shape"
@@ -79,6 +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 CrownDropdowns from '@/components/crown/crownButtons/crownDropdowns';
 import DefaultFlow from '@/components/crown/crownButtons/defaultFlowButton.vue';
 import poolLaneCrownConfig from '@/mixins/poolLaneCrownConfig';
@@ -95,6 +101,7 @@ export default {
     GenericFlowButton,
     AssociationFlowButton,
     CopyButton,
+    DuplicateButton,
     DefaultFlow,
     DataAssociationFlowButton,
   },
@@ -133,7 +140,6 @@ export default {
       handler() {
         this.setNodeColor();
       },
-      deep: true,
     },
     highlightedShapes(shapes, prevShapes) {
       if (isEqual(shapes, prevShapes)) {

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

@@ -42,11 +42,18 @@ export default {
       nodeToReplace: null,
       buttons: [
         {
-          label: 'Copy Element',
-          icon: 'copy',
+          label: 'Copy Seletion',
+          icon: 'clipboard',
           testId: 'copy-button',
           role: 'menuitem',
-          action: this.copyElement,
+          action: this.copySelection,
+        },
+        {
+          label: 'Duplicate Selection',
+          icon: 'copy',
+          testId: 'duplicate-button',
+          role: 'menuitem',
+          action: this.duplicateSelection,
         },
         {
           label: 'Delete Element',
@@ -70,9 +77,11 @@ export default {
     highlightedShapes: () => store.getters.highlightedShapes,
   },
   methods: {
-    copyElement() {
-      // @todo: Implement copyElement
-      this.$emit('copy-nodes');
+    copySelection() {
+      this.$emit('copy-selection');
+    },
+    duplicateSelection() {
+      this.$emit('duplicate-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

@@ -0,0 +1,26 @@
+export default {
+  methods: {
+    copyPasteHandler(event, options) {
+      const node = event.target.nodeName.toLowerCase();
+      const isBody = node === 'body';
+      const key = event.key.toLowerCase();
+      const isCopy = key === 'c';
+      const isPaste = key === 'v';
+
+      if (isBody && isCopy && options.mod) {
+        this.copy(event);
+      }
+      if (isBody && isPaste && options.mod) {
+        this.paste(event);
+      }
+    },
+    copy(event) {
+      event.preventDefault();
+      window.ProcessMaker.$modeler.copyElement();
+    },
+    paste(event) {
+      event.preventDefault();
+      window.ProcessMaker.$modeler.pasteElements();
+    },
+  },
+};

package/src/components/hotkeys/main.js

@@ -1,9 +1,15 @@
 import ZoomInOut from './zoomInOut';
+import CopyPaste from './copyPaste.js';
 import store from '@/store';
 import moveShapeByKeypress from './moveWithArrowKeys';
 
 export default {
-  mixins: [ZoomInOut],
+  mixins: [ZoomInOut, CopyPaste],
+  computed: {
+    clientLeftPaper() {
+      return store.getters.clientLeftPaper;
+    },
+  },
   mounted() {
     document.addEventListener('keydown', this.keydownListener);
     document.addEventListener('keyup', this.keyupListener);
@@ -12,6 +18,7 @@ export default {
     handleHotkeys(event, options) {
       // Pass event to all handlers
       this.zoomInOutHandler(event, options);
+      this.copyPasteHandler(event, options);
     },
     keyupListener(event) {
       if (event.code === 'Space') {
@@ -43,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/InspectorPanel.vue

@@ -2,6 +2,7 @@
   <transition name="inspector">
     <b-col
       v-show="!compressed"
+      id="inspector"
       class="pl-0 h-100 overflow-hidden inspector-column"
       :class="[{ 'ignore-pointer': canvasDragPosition, 'inspector-column-compressed' : compressed }]"
       data-test="inspector-column"

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;

package/src/components/modeler/Modeler.vue

@@ -103,6 +103,10 @@
         @replace-node="replaceNode"
         @replace-generic-flow="replaceGenericFlow"
         @copy-element="copyElement"
+        @copy-selection="copyElement"
+        @paste-element="pasteElements"
+        @duplicate-element="duplicateElement"
+        @duplicate-selection="duplicateSelection"
         @default-flow="toggleDefaultFlow"
         @shape-resize="shapeResize"
       />
@@ -112,6 +116,7 @@
         :graph="graph"
         :paperManager="paperManager"
         :useModelGeometry="false"
+        @duplicate-selection="duplicateSelection"
         @remove-nodes="removeNodes"
         :processNode="processNode"
         @save-state="pushToUndoStack"
@@ -134,12 +139,13 @@ import InspectorPanel from '@/components/inspectors/InspectorPanel';
 import undoRedoStore from '@/undoRedoStore';
 import { Linter } from 'bpmnlint';
 import linterConfig from '../../../.bpmnlintrc';
-import NodeIdGenerator from '../../NodeIdGenerator';
+import { getNodeIdGenerator } from '../../NodeIdGenerator';
 import Process from '../inspectors/process';
 import runningInCypressTest from '@/runningInCypressTest';
 import getValidationProperties from '@/targetValidationUtils';
 import MiniPaper from '@/components/miniPaper/MiniPaper';
 import { id as laneId } from '@/components/nodes/poolLane/config';
+import { id as processId } from '@/components/inspectors/process';
 import { id as sequenceFlowId } from '../nodes/sequenceFlow';
 import { id as associationId } from '../nodes/association';
 import { id as messageFlowId } from '../nodes/messageFlow/config';
@@ -162,6 +168,7 @@ import { removeNodeFlows, removeNodeMessageFlows, removeNodeAssociations, remove
 import { getInvalidNodes } from '@/components/modeler/modelerUtils';
 import { NodeMigrator } from '@/components/modeler/NodeMigrator';
 import addLoopCharacteristics from '@/setup/addLoopCharacteristics';
+import cloneSelection from '../../mixins/cloneSelection';
 
 import ProcessmakerModelerGenericFlow from '@/components/nodes/genericFlow/genericFlow';
 
@@ -185,9 +192,11 @@ export default {
       },
     },
   },
-  mixins: [hotkeys],
+  mixins: [hotkeys, cloneSelection],
   data() {
     return {
+      pasteInProgress: false,
+      internalClipboard: [],
       tooltipTarget: null,
 
       /* Custom parsers for handling certain bpmn node types */
@@ -285,6 +294,7 @@ export default {
     currentXML() {
       return undoRedoStore.getters.currentState;
     },
+    copiedElements: () => store.getters.copiedElements,
     /* connectors expect a highlightedNode property */
     highlightedNode: () => store.getters.highlightedNodes[0],
     highlightedNodes: () => store.getters.highlightedNodes,
@@ -308,13 +318,73 @@ export default {
       }
       source.set('default', flow);
     },
-    copyElement(node, copyCount) {
+    duplicateElement(node, copyCount) {
       const clonedNode = node.clone(this.nodeRegistry, this.moddle, this.$t);
       const yOffset = (node.diagram.bounds.height + 30) * copyCount;
 
       clonedNode.diagram.bounds.y += yOffset;
       this.addNode(clonedNode);
     },
+    copyElement() {
+      // Checking if User selected a single flow and tries to copy it, to deny it.
+      const flows = [
+        sequenceFlowId,
+        dataOutputAssociationFlowId,
+        dataInputAssociationFlowId,
+        genericFlowId,
+        processId,
+      ];
+      if (this.highlightedNodes.length === 1 && flows.includes(this.highlightedNodes[0].type)) return;
+      store.commit('setCopiedElements', this.cloneSelection());
+      this.$bvToast.toast(this.$t('Object(s) have been copied'), { noCloseButton:true, variant: 'success', solid: true, toaster: 'b-toaster-top-center' });
+    },
+    async pasteElements() {
+      if (this.copiedElements && !this.pasteInProgress) {
+        this.pasteInProgress = true;
+        try {
+          await this.addClonedNodes(this.copiedElements);
+          await this.$nextTick();
+          await this.paperManager.awaitScheduledUpdates();
+          await this.$refs.selector.selectElements(this.findViewElementsFromNodes(this.copiedElements), true);
+          await this.$nextTick();
+          await store.commit('setCopiedElements', this.cloneSelection());
+          this.scrollToSelection();
+        } finally {
+          this.pasteInProgress = false;
+        }
+      }
+    },
+    async duplicateSelection() {
+      const clonedNodes = this.cloneSelection();
+      if (clonedNodes && clonedNodes.length === 0) {
+        return;
+      }
+      this.$refs.selector.clearSelection();
+      await this.addClonedNodes(clonedNodes);
+      await this.$nextTick();
+      await this.paperManager.awaitScheduledUpdates();
+      await this.$refs.selector.selectElements(this.findViewElementsFromNodes(clonedNodes));
+      this.scrollToSelection();
+    },
+    scrollToSelection() {
+      const containerRect = this.$refs['paper-container'].getBoundingClientRect();
+      const selector = this.$refs.selector;
+      const selectorRect = selector.$el.getBoundingClientRect();
+      // Scroll to the cloned elements only when they are not visible on the screen.
+      if (selectorRect.right > containerRect.right || selectorRect.bottom > containerRect.bottom || selectorRect.left < containerRect.left || selectorRect.top < containerRect.top) {
+        const currentPosition = this.paper.translate();
+        const newTy = currentPosition.ty - (selectorRect.top - containerRect.top - selectorRect.height);
+        this.paper.translate(currentPosition.tx, newTy);
+        selector.updateSelectionBox(true);
+      }
+    },
+    findViewElementsFromNodes(nodes) {
+      return nodes.map(node => {
+        const component = this.$refs.nodeComponent.find(cmp => cmp.node === node);
+        const shape = component.shape;
+        return this.paper.findViewByModel(shape);
+      });
+    },
     async close() {
       this.$emit('close');
     },
@@ -726,7 +796,7 @@ export default {
     async loadXML(xml = this.currentXML) {
       this.definitions = await this.xmlManager.getDefinitionsFromXml(xml);
       this.xmlManager.definitions = this.definitions;
-      this.nodeIdGenerator = new NodeIdGenerator(this.definitions);
+      this.nodeIdGenerator = getNodeIdGenerator(this.definitions);
       store.commit('clearNodes');
       this.renderPaper();
     },
@@ -851,8 +921,29 @@ export default {
         });
       });
     },
+    async addClonedNodes(nodes) {
+      nodes.forEach(node => {
+        if (!node.pool) {
+          node.pool = this.poolTarget;
+        }
+
+        const targetProcess = node.getTargetProcess(this.processes, this.processNode);
+        addNodeToProcess(node, targetProcess);
+
+        this.planeElements.push(node.diagram);
+        store.commit('addNode', node);
+        this.poolTarget = null;
+      });
+
+      await this.pushToUndoStack();
+    },
     async removeNode(node, { removeRelationships = true } = {}) {
+      if (!node) {
+        // already removed
+        return;
+      }
       if (removeRelationships) {
+
         removeNodeFlows(node, this);
         removeNodeMessageFlows(node, this);
         removeNodeAssociations(node, this);
@@ -1152,10 +1243,19 @@ export default {
       this.pointerUpHandler(event, cellView);
     }, this);
 
+    this.$el.addEventListener('mouseenter', () => {
+      store.commit('setClientLeftPaper', false);
+    });
+
     this.$el.addEventListener('mousemove', event => {
       this.pointerMoveHandler(event);
     });
 
+    this.$el.addEventListener('mouseleave', () => {
+      this.paperManager.removeEventHandler('blank:pointermove');
+      store.commit('setClientLeftPaper', true);
+    });
+
     this.paperManager.addEventHandler('cell:pointerclick', (cellView, evt, x, y) => {
       const clickHandler = cellView.model.get('onClick');
       if (clickHandler) {