@processmaker/modeler 1.26.0 → 1.27.0

package/package.json

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

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,
   },

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/hotkeys/copyPaste.js

@@ -0,0 +1,23 @@
+export default {
+  methods: {
+    copyPasteHandler(event, options) {
+      const isCopy = event.key === 'c';
+      const isPaste = event.key === 'v';
+
+      if (isCopy && options.mod) {
+        this.copy(event);
+      }
+      if (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,10 @@
 import ZoomInOut from './zoomInOut';
+import CopyPaste from './copyPaste.js';
 import store from '@/store';
 import moveShapeByKeypress from './moveWithArrowKeys';
 
 export default {
-  mixins: [ZoomInOut],
+  mixins: [ZoomInOut, CopyPaste],
   mounted() {
     document.addEventListener('keydown', this.keydownListener);
     document.addEventListener('keyup', this.keyupListener);
@@ -12,6 +13,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') {

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/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"
@@ -188,6 +193,7 @@ export default {
   mixins: [hotkeys],
   data() {
     return {
+      internalClipboard: [],
       tooltipTarget: null,
 
       /* Custom parsers for handling certain bpmn node types */
@@ -285,6 +291,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 +315,112 @@ 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,
+      ];
+      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) {
+        await this.addClonedNodes(this.copiedElements);
+        this.$refs.selector.selectElements(this.findViewElementsFromNodes(this.copiedElements));
+        store.commit('setCopiedElements', this.cloneSelection());
+      }
+    },
+    cloneSelection() {
+      let clonedNodes = [], clonedFlows = [], originalFlows = [];
+      const nodes = this.highlightedNodes;
+      const selector = this.$refs.selector.$el;
+      const { height: sheight } = selector.getBoundingClientRect();
+      if (typeof selector.getBoundingClientRect === 'function') {
+        // get selector height
+        nodes.forEach(node => {
+          // Add flows described in the definitions property
+          if (node.definition.incoming || node.definition.outgoing) {
+            // Since both incoming and outgoing reference the same flow, any of them is copied
+            let flowsToCopy = [...(node.definition.incoming || node.definition.outgoing)];
+            // Check if flow is already in array before pushing
+            flowsToCopy.forEach(flow => {
+              if (!originalFlows.some(el => el.id === flow.id)) {
+                originalFlows.push(flow);
+              }
+            });
+          }
+
+          // Check node type to clone
+          if ([
+            sequenceFlowId,
+            laneId,
+            associationId,
+            messageFlowId,
+            dataOutputAssociationFlowId,
+            dataInputAssociationFlowId,
+            genericFlowId,
+          ].includes(node.type)) {
+            // Add offset for all waypoints on cloned flow
+            const clonedFlow = node.cloneFlow(this.nodeRegistry, this.moddle, this.$t);
+            clonedFlow.setIds(this.nodeIdGenerator);
+            clonedFlows.push(clonedFlow);
+            clonedNodes.push(clonedFlow);
+          } else {
+            // Clone node and calculate offset
+            const clonedNode = node.clone(this.nodeRegistry, this.moddle, this.$t);
+            const yOffset = sheight;
+            clonedNode.diagram.bounds.y += yOffset;
+            // Set cloned node id
+            clonedNode.setIds(this.nodeIdGenerator);
+            clonedNodes.push(clonedNode);
+          }
+        });
+      }
+      // Connect flows
+      clonedFlows.forEach(flow => {
+        // Look up the original flow
+        const flowClonedFrom = { definition: originalFlows.find(el => el.id === flow.definition.cloneOf) };
+        // Get the id's of the sourceRef and targetRef of original flow
+        const src = flowClonedFrom.definition.sourceRef;
+        const target = flowClonedFrom.definition.targetRef;
+        const srcClone = clonedNodes.find(node => node.definition.cloneOf === src.id);
+        const targetClone = clonedNodes.find(node => node.definition.cloneOf === target.id);
+        // Reference the elements to the flow that connects them
+        flow.definition.sourceRef = srcClone.definition;
+        flow.definition.targetRef = targetClone.definition;
+        // Reference the flow to the elements that are connected by it
+        srcClone.definition.outgoing ? srcClone.definition.outgoing.push(flow.definition) : srcClone.definition.outgoing = [flow.definition];
+        targetClone.definition.incoming ? targetClone.definition.incoming.push(flow.definition) : targetClone.definition.incoming = [flow.definition];
+        // Translate flow waypoints to where they should be
+        flow.diagram.waypoint.forEach(point => {
+          point.y += sheight;
+        });
+      });
+      return clonedNodes;
+    },
+    async duplicateSelection() {
+      const clonedNodes = this.cloneSelection();
+      await this.addClonedNodes(clonedNodes);
+      this.$refs.selector.selectElements(this.findViewElementsFromNodes(clonedNodes));
+    },
+    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');
     },
@@ -851,6 +957,22 @@ 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 (removeRelationships) {
         removeNodeFlows(node, this);
@@ -1153,7 +1275,13 @@ export default {
     }, this);
 
     this.$el.addEventListener('mousemove', event => {
+      const { clientX, clientY } = event;
       this.pointerMoveHandler(event);
+      store.commit('setClientMousePosition', { clientX, clientY });
+    });
+
+    this.$el.addEventListener('mouseleave', () => {
+      store.commit('clientLeftPaper');
     });
 
     this.paperManager.addEventHandler('cell:pointerclick', (cellView, evt, x, y) => {

package/src/components/modeler/Selection.vue

@@ -29,6 +29,13 @@ import { id as poolId } from '@/components/nodes/pool/config';
 import { id as laneId } from '@/components/nodes/poolLane/config';
 import { id as genericFlowId } from '@/components/nodes/genericFlow/config';
 import { labelWidth, poolPadding } from '../nodes/pool/poolSizes';
+const boundaryElements = [
+  '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',
+];
 export default {
   name: 'Selection',
   components: {
@@ -85,6 +92,17 @@ export default {
     },
   },
   methods: {
+    async selectElements(elements) {
+      await this.$nextTick();
+      this.clearSelection();
+      this.selected = elements;
+      this.showLasso = true;
+      this.isSelected = true;
+      this.isSelecting = true;
+      this.start = null;
+      await this.$nextTick();
+      this.updateSelectionBox();
+    },
     /**
      * Select an element dinamically.
      * Shift key will manage the condition to push to selection
@@ -321,19 +339,36 @@ export default {
      * Filter the selected elements
      */
     filterSelected() {
-      // remove from selection the selected child nodes in the pool
+      // Get the selected pools IDs
       const selectedPoolsIds = this.selected
         .filter(shape => shape.model.component)
         .filter(shape => shape.model.component.node.type === 'processmaker-modeler-pool')
         .map(shape => shape.model.component.node.id);
+      // remove from selection the selected children that belongs to a selected pool
       this.selected = this.selected.filter(shape => {
         if (shape.model.component && shape.model.component.node.pool) {
           return shape.model.component.node.pool && !selectedPoolsIds.includes(shape.model.component.node.pool.component.node.id);
         }
         return true;
-      }).filter(shape => {
-        return !(shape.model.getParentCell() && shape.model.getParentCell().get('parent'));
       });
+      // A boundary event could only be selected alone
+      const firstSelectedBoundary = this.selected.find(shape => {
+        return shape.model.component &&
+          boundaryElements.includes(shape.model.component.node.type);
+      });
+      const firstSelectedElement = this.selected[0];
+      if (firstSelectedBoundary) {
+        this.selected = this.selected.filter(shape => {
+          if (firstSelectedElement === firstSelectedBoundary) {
+            // boundary event selected alone
+            return shape.model.component &&
+              shape === firstSelectedBoundary;
+          }
+          // do not allow to select a boundary event with another element
+          return shape.model.component &&
+            !boundaryElements.includes(shape.model.component.node.type);
+        });
+      }
     },
     /**
      * Pan paper handler
@@ -377,7 +412,7 @@ export default {
       return shapes && selected.length === shapes.length;
     },
     /**
-     * Start the drag procedure for the selext box
+     * Start the drag procedure for the select box
      * @param {Object} event
      */
     startDrag(event) {

package/src/components/nodes/node.js

@@ -11,6 +11,7 @@ import cloneDeep from 'lodash/cloneDeep';
 export default class Node {
   static diagramPropertiesToCopy = ['x', 'y', 'width', 'height'];
   static definitionPropertiesToNotCopy = ['$type', 'id'];
+  static flowDefinitionPropertiesToNotCopy = ['$type', 'id', 'sourceRef', 'targetRef'];
   static eventDefinitionPropertiesToNotCopy = ['errorRef', 'messageRef'];
 
   type;
@@ -89,6 +90,8 @@ export default class Node {
 
     clonedNode.id = null;
     clonedNode.pool = this.pool;
+    clonedNode.definition.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 => {
       const definition = this.definition.get(key);
@@ -112,6 +115,42 @@ export default class Node {
     return clonedNode;
   }
 
+  cloneFlow(nodeRegistry, moddle, $t) {
+    const definition = nodeRegistry[this.type].definition(moddle, $t);
+    const diagram = nodeRegistry[this.type].diagram(moddle);
+    const clonedFlow = new this.constructor(this.type, definition, diagram);
+
+    clonedFlow.id = null;
+    clonedFlow.pool = this.pool;
+    clonedFlow.definition.cloneOf = this.id;
+    clonedFlow.diagram.waypoint = [];
+
+    this.diagram.waypoint.forEach(point => clonedFlow.diagram.waypoint.push(point));
+
+    Object.keys(this.definition).filter(key => !Node.flowDefinitionPropertiesToNotCopy.includes(key)).forEach(key => {
+      const definition = this.definition.get(key);
+      const clonedDefinition = typeof definition === 'object' ? cloneDeep(definition) : definition;
+      if (key === 'eventDefinitions') {
+        for (var i in clonedDefinition) {
+          if (definition[i].signalRef && !clonedDefinition[i].signalRef) {
+            clonedDefinition[i].signalRef = { ...definition[i].signalRef };
+          }
+        }
+      }
+      clonedFlow.definition.set(key, clonedDefinition);
+      clonedFlow.definition.sourceRef = clonedFlow.definition.targetRef  = null;
+    });
+
+    Node.eventDefinitionPropertiesToNotCopy.forEach(
+      prop => clonedFlow.definition.eventDefinitions &&
+        clonedFlow.definition.eventDefinitions[0] &&
+        clonedFlow.definition.eventDefinitions[0].hasOwnProperty(prop) &&
+        clonedFlow.definition.eventDefinitions[0].set(prop, null)
+    );
+
+    return clonedFlow;
+  }
+
   getTargetProcess(processes, processNode) {
     return this.pool
       ? processes.find(({ id }) => id === this.pool.component.node.definition.get('processRef').id)

package/src/components/toolbar/ToolBar.vue

@@ -101,7 +101,7 @@
               </span>
             </div>
             <a
-              class="btn btn-sm btn-primary mini-map-btn text-uppercase mx-2"
+              class="btn btn-sm btn-primary autosave-btn 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 mini-map-btn text-black text-uppercase"
+              class="btn btn-sm btn-link toolbar-item autosave-btn text-black text-uppercase"
               data-test="close-btn"
               :title="$t('Close')"
               @click="$emit('close')"
@@ -117,9 +117,11 @@
               {{ $t('Close') }}
             </a>
             <EllipsisMenu
-              @navigate="onNavigate"
               :actions="ellipsisMenuActions"
               :divider="false"
+              @navigate="onNavigate"
+              @show="onShow"
+              @hide="onHide"
             />
           </template>
           <b-button
@@ -258,6 +260,18 @@ export default {
           break;
       }
     },
+    onShow() {
+      const inspectorDiv = document.getElementById('inspector');
+      if (inspectorDiv) {
+        inspectorDiv.style.zIndex = '1';
+      }
+    },
+    onHide() {
+      const inspectorDiv = document.getElementById('inspector');
+      if (inspectorDiv) {
+        inspectorDiv.style.zIndex = '2';
+      }
+    },
   },
 };
 </script>

package/src/components/toolbar/breadcrumb/Breadcrumb.vue

@@ -19,3 +19,10 @@ export default {
   },
 };
 </script>
+<style lang="css" scoped>
+@media screen and (max-width: 1365px) {
+  #breadcrumbs {
+    width: 290px;
+  }
+}
+</style>

package/src/components/toolbar/toolbar.scss

@@ -27,3 +27,14 @@ $toolbar-background-color: #fff;
 .cursor-default {
   cursor: default !important;
 }
+
+.autosave-btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.btn-ellipsis {
+  border-top-left-radius: 4px !important;
+  border-bottom-left-radius: 4px !important;
+}

package/src/store.js

@@ -35,6 +35,9 @@ export default new Vuex.Store({
     autoValidate: false,
     globalProcesses: [],
     allowSavingElementPosition: true,
+    copiedElements: [],
+    clientX: null,
+    clientY: null,
   },
   getters: {
     nodes: state => state.nodes,
@@ -52,6 +55,9 @@ export default new Vuex.Store({
     globalProcesses: state => state.globalProcesses,
     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,
   },
   mutations: {
     preventSavingElementPosition(state) {
@@ -138,6 +144,18 @@ export default new Vuex.Store({
     setGlobalProcesses(state, globalProcesses) {
       state.globalProcesses = globalProcesses;
     },
+    // Copy Nodes to the clipboard or in this case, to the state
+    setCopiedElements(state, elements) {
+      state.copiedElements = elements;
+    },
+    setClientMousePosition(state, position) {
+      const { clientX, clientY } = position;
+      state = { clientX, clientY };
+    },
+    clientLeftPaper(state) {
+      state.clientX = null;
+      state.clientY = null;
+    },
   },
   actions: {
     async fetchGlobalProcesses({ commit }) {