@processmaker/modeler 1.31.0 → 1.33.0

package/src/components/modeler/ModelerReadonly.vue

@@ -31,7 +31,6 @@
         :paper="paper"
         :node="node"
         :id="node.id"
-        :highlighted="highlightedNodes.includes(node)"
         :border-outline="borderOutline(node.id)"
         :collaboration="collaboration"
         :process-node="processNode"
@@ -40,11 +39,15 @@
         :moddle="moddle"
         :nodeRegistry="nodeRegistry"
         :root-elements="definitions.get('rootElements')"
-        :isRendering="isRendering"
         :paperManager="paperManager"
         :auto-validate="autoValidate"
-        :is-active="node === activeNode"
         :node-id-generator="nodeIdGenerator"
+        :highlighted="highlightedNodes.includes(node)"
+        :is-active="node === activeNode"
+        :is-rendering="isRendering"
+        :is-completed="requestCompletedNodes.includes(node.definition.id)"
+        :is-in-progress="requestInProgressNodes.includes(node.definition.id)"
+        :is-idle="requestIdleNodes.includes(node.definition.id)"
         @add-node="addNode"
         @set-cursor="cursor = $event"
         @set-pool-target="poolTarget = $event"
@@ -85,6 +88,7 @@ import controls from '../controls/controls';
 import pull from 'lodash/pull';
 import remove from 'lodash/remove';
 import store from '@/store';
+import nodeTypesStore from '@/nodeTypesStore';
 import undoRedoStore from '@/undoRedoStore';
 import { Linter } from 'bpmnlint';
 import linterConfig from '../../../.bpmnlintrc';
@@ -132,6 +136,18 @@ export default {
       type: Boolean,
       default: true,
     },
+    requestIdleNodes: {
+      type: Array,
+      default: () => [],
+    },
+    requestCompletedNodes: {
+      type: Array,
+      default: () => [],
+    },
+    requestInProgressNodes: {
+      type: Array,
+      default: () => [],
+    },
   },
   data() {
     return {
@@ -173,6 +189,7 @@ export default {
       isRendering: false,
       allWarnings: [],
       nodeTypes: [],
+      pmBlockNodes: [],
       activeNode: null,
       xmlManager: null,
       previouslyStackedShape: null,
@@ -215,7 +232,6 @@ export default {
     canvasScale(canvasScale) {
       this.paperManager.scale = canvasScale;
     },
-
   },
   computed: {
     showControls() {
@@ -398,6 +414,29 @@ export default {
         this.parsers[bpmnType].default.push(defaultParser);
       });
     },
+    registerPmBlock(pmBlockNode, customParser) {
+      const defaultParser = () => pmBlockNode.id;
+
+      this.translateConfig(pmBlockNode.inspectorConfig[0]);
+      addLoopCharacteristics(pmBlockNode);
+      this.nodeRegistry[pmBlockNode.id] = pmBlockNode;
+
+      Vue.component(pmBlockNode.id, pmBlockNode.component);
+      this.pmBlockNodes.push(pmBlockNode);
+
+      const types = Array.isArray(pmBlockNode.bpmnType)
+        ? pmBlockNode.bpmnType
+        : [pmBlockNode.bpmnType];
+
+      types.forEach(bpmnType => {
+        if (customParser) {
+          this.parsers[bpmnType].custom.push(customParser);
+          return;
+        }
+        this.parsers[bpmnType].default.push(defaultParser);
+      });
+      nodeTypesStore.commit('setPmBlockNodeTypes', this.pmBlockNodes);
+    },
     addMessageFlows() {
       if (this.collaboration) {
         this.collaboration
@@ -836,6 +875,7 @@ export default {
       registerBpmnExtension: this.registerBpmnExtension,
       registerNode: this.registerNode,
       registerStatusBar: this.registerStatusBar,
+      registerPmBlock: this.registerPmBlock,
     });
 
     this.moddle = new BpmnModdle(this.extensions);
@@ -926,10 +966,16 @@ export default {
         return;
       }
 
-      // ignore click event if the user is Grabbing the paper
-      if (this.isGrabbing) return;
+      // ignore click event if the user is grabbing the paper.
+      if (this.isGrabbing) {
+        return;
+      }
 
       shape.component.$emit('click', event);
+      this.$emit('click', {
+        event,
+        node: this.highlightedNode.definition,
+      });
     });
 
     this.paperManager.addEventHandler('cell:pointerdown', ({ model: shape }, event) => {

package/src/components/modeler/Selection.vue

@@ -16,6 +16,7 @@
       :plane-elements="$parent.planeElements"
       :is-rendering="$parent.isRendering"
       :dropdown-data="[]"
+      @save-state="$emit('save-state')"
       :has-pools="hasPoolsOrLanesSelected"
       v-on="$listeners"
     />
@@ -771,7 +772,7 @@ export default {
     /**
      * Stop dragging elements that are in a pool
      */
-    overPoolStopDrag(){
+    async overPoolStopDrag(){
       if (this.isNotPoolChilds(this.selected)) {
         this.updateFlowsWaypoint();
         this.$emit('save-state');
@@ -788,6 +789,7 @@ export default {
         if (this.newPool){
           /* Remove the shape from its current pool */
           this.moveElements(this.selected, this.oldPool, this.newPool);
+          this.moveConectedLinks(this.conectedLinks, this.oldPool, this.newPool);
           this.newPool = null;
           this.oldPool = null;
           this.updateLaneChildren(this.selected);
@@ -920,12 +922,18 @@ export default {
       const shapesToMove= [
         'PoolLane',
         'standard.Link',
+        'processmaker.components.nodes.boundaryEvent.Shape',
       ];
       selected.filter(shape => !shapesToMove.includes(shape.model.get('type')))
         .forEach(shape => {
           oldPool.model.component.moveElement(shape.model, newPool.model);
         });
     },
+    moveConectedLinks(links, oldPool, newPool){
+      links.forEach(link => {
+        oldPool.model.component.moveFlow(link.model, newPool.model);
+      });
+    },
   },
 };
 </script>

package/src/components/nodes/association/index.js

@@ -26,7 +26,7 @@ export default {
           container: true,
           config: {
             initiallyOpen: true,
-            label: 'Configuration',
+            label: 'Properties',
             icon: 'cog',
             name: 'inspector-accordion-association',
           },

package/src/components/nodes/baseStartEvent/index.js

@@ -33,7 +33,7 @@ export default {
           container: true,
           config: {
             initiallyOpen: true,
-            label: 'Configuration',
+            label: 'Properties',
             icon: 'cog',
             name: 'inspector-accordion-start-event',
           },

package/src/components/nodes/boundaryEvent/index.js

@@ -34,7 +34,7 @@ export default {
           container: true,
           config: {
             initiallyOpen: true,
-            label: 'Configuration',
+            label: 'Properties',
             icon: 'cog',
             name: 'inspector-accordion-boundary-event',
           },

package/src/components/nodes/dataInputAssociation/index.js

@@ -15,7 +15,7 @@ export default {
           container: true,
           config: {
             initiallyOpen: true,
-            label: 'Configuration',
+            label: 'Properties',
             icon: 'cog',
             name: 'inspector-accordion-data-input-association',
           },

package/src/components/nodes/dataObject/index.js

@@ -40,7 +40,7 @@ export default {
           container: true,
           config: {
             initiallyOpen: true,
-            label: 'Configuration',
+            label: 'Properties',
             icon: 'cog',
             name: 'inspector-accordion-data-object',
           },

package/src/components/nodes/dataOutputAssociation/index.js

@@ -15,7 +15,7 @@ export default {
           container: true,
           config: {
             initiallyOpen: true,
-            label: 'Configuration',
+            label: 'Properties',
             icon: 'cog',
             name: 'inspector-accordion-data-output-association',
           },

package/src/components/nodes/dataStore/index.js

@@ -40,7 +40,7 @@ export default {
           container: true,
           config: {
             initiallyOpen: true,
-            label: 'Configuration',
+            label: 'Properties',
             icon: 'cog',
             name: 'inspector-accordion-data-store',
           },

package/src/components/nodes/endEvent/index.js

@@ -76,7 +76,7 @@ export default {
           container: true,
           config: {
             initiallyOpen: true,
-            label: 'Configuration',
+            label: 'Properties',
             icon: 'cog',
             name: 'inspector-accordion-end-event',
           },

package/src/components/nodes/eventBasedGateway/index.js

@@ -34,7 +34,7 @@ export default {
           container: true,
           config: {
             initiallyOpen: true,
-            label: 'Configuration',
+            label: 'Properties',
             icon: 'cog',
             name: 'inspector-accordion-event-based-gateway',
           },

package/src/components/nodes/exclusiveGateway/index.js

@@ -67,7 +67,7 @@ export default {
           container: true,
           config: {
             initiallyOpen: true,
-            label: 'Configuration',
+            label: 'Properties',
             icon: 'cog',
             name: 'inspector-accordion-exlcusive-gateway',
           },

package/src/components/nodes/gateway/index.js

@@ -32,7 +32,7 @@ export default {
           container: true,
           config: {
             initiallyOpen: true,
-            label: 'Configuration',
+            label: 'Properties',
             icon: 'cog',
             name: 'inspector-accordion-gateway',
           },

package/src/components/nodes/inclusiveGateway/index.js

@@ -37,7 +37,7 @@ export default {
           container: true,
           config: {
             initiallyOpen: true,
-            label: 'Configuration',
+            label: 'Properties',
             icon: 'cog',
             name: 'inspector-accordion-inclusive-gateway-config',
           },

package/src/components/nodes/intermediateEvent/index.js

@@ -34,7 +34,7 @@ export default {
           container: true,
           config: {
             initiallyOpen: true,
-            label: 'Configuration',
+            label: 'Properties',
             icon: 'cog',
             name: 'inspector-accordion-intermediate-gateway-config',
           },

package/src/components/nodes/intermediateMessageEvent/index.js

@@ -37,7 +37,7 @@ export default {
           container: true,
           config: {
             initiallyOpen: true,
-            label: 'Configuration',
+            label: 'Properties',
             icon: 'cog',
             name: 'inspector-accordion-intermediate-message-event',
           },

package/src/components/nodes/intermediateTimerEvent/index.js

@@ -135,7 +135,7 @@ export default {
           container: true,
           config: {
             initiallyOpen: true,
-            label: 'Configuration',
+            label: 'Properties',
             icon: 'cog',
             name: 'inspector-accordion-intermediate-timer-config',
           },

package/src/components/nodes/manualTask/index.js

@@ -41,7 +41,7 @@ export default {
           container: true,
           config: {
             initiallyOpen: true,
-            label: 'Configuration',
+            label: 'Properties',
             icon: 'cog',
             name: 'inspector-accordion-manual-task',
           },

package/src/components/nodes/messageFlow/index.js

@@ -26,7 +26,7 @@ export default {
           container: true,
           config: {
             initiallyOpen: true,
-            label: 'Configuration',
+            label: 'Properties',
             icon: 'cog',
             name: 'inspector-accordion-message-flow',
           },

package/src/components/nodes/parallelGateway/index.js

@@ -34,7 +34,7 @@ export default {
           container: true,
           config: {
             initiallyOpen: true,
-            label: 'Configuration',
+            label: 'Properties',
             icon: 'cog',
             name: 'inspector-accordion-parallel-gateway-config',
           },

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

@@ -36,7 +36,7 @@ export default {
           container: true,
           config: {
             initiallyOpen: true,
-            label: 'Configuration',
+            label: 'Properties',
             icon: 'cog',
             name: 'inspector-accordion-pool',
           },

package/src/components/nodes/pool/pool.vue

@@ -121,12 +121,18 @@ export default {
     moveEmbeddedElements(currentElement, toPool) {
       this.getElementsUnderArea(currentElement, this.graph)
         .filter(element => element.isEmbeddedIn(currentElement))
-        .map(element => element.component.node.definition)
-        .forEach((elementDefinition) => {
-          pull(this.containingProcess.get('flowElements'), elementDefinition);
-          toPool.component.containingProcess.get('flowElements').push(elementDefinition);
+        .forEach((child) => {
+          child.component.node.pool = toPool;
+          pull(this.containingProcess.get('flowElements'), child.component.node.definition);
+          toPool.component.containingProcess.get('flowElements').push(child.component.node.definition);
         });
     },
+    moveFlow(element, toPool){
+      const elementDefinition = element.component.node.definition;
+      /* Remove references to the element from the current process */
+      pull(this.containingProcess.get('flowElements'), elementDefinition);
+      toPool.component.containingProcess.get('flowElements').push(elementDefinition);
+    },
     moveElement(element, toPool) {
       const elementDefinition = element.component.node.definition;
 

package/src/components/nodes/poolLane/index.js

@@ -33,7 +33,7 @@ export default {
           container: true,
           config: {
             initiallyOpen: true,
-            label: 'Configuration',
+            label: 'Properties',
             icon: 'cog',
             name: 'inspector-accordion-pool-lane',
           },

package/src/components/nodes/scriptTask/index.js

@@ -40,7 +40,7 @@ export default {
           container: true,
           config: {
             initiallyOpen: true,
-            label: 'Configuration',
+            label: 'Properties',
             icon: 'cog',
             name: 'inspector-accordion-script-task',
           },

package/src/components/nodes/sequenceFlow/index.js

@@ -66,7 +66,7 @@ export default {
           container: true,
           config: {
             initiallyOpen: true,
-            label: 'Configuration',
+            label: 'Properties',
             icon: 'cog',
             name: 'inspector-accordion-sequence-flow',
           },

package/src/components/nodes/serviceTask/index.js

@@ -23,7 +23,7 @@ export default {
           container: true,
           config: {
             initiallyOpen: true,
-            label: 'Configuration',
+            label: 'Properties',
             icon: 'cog',
             name: 'inspector-accordion-service-task',
           },

package/src/components/nodes/subProcess/index.js

@@ -59,7 +59,7 @@ export default {
           container: true,
           config: {
             initiallyOpen: true,
-            label: 'Configuration',
+            label: 'Properties',
             icon: 'cog',
             name: 'inspector-accordion-subprocess',
           },

package/src/components/nodes/task/index.js

@@ -87,7 +87,7 @@ export default {
           container: true,
           config: {
             initiallyOpen: true,
-            label: 'Configuration',
+            label: 'Properties',
             icon: 'cog',
             name: 'inspector-accordion-task',
           },

package/src/components/nodes/textAnnotation/index.js

@@ -51,7 +51,7 @@ export default {
           container: true,
           config: {
             initiallyOpen: true,
-            label: 'Configuration',
+            label: 'Properties',
             icon: 'cog',
             name: 'inspector-accordion-text-annotation',
           },

package/src/components/railBottom/controls/Controls.vue

@@ -5,10 +5,11 @@
   >
     <li
       v-for="item in controls"
-      :class="['control-item', {'active': selectedItem === item.type}]"
+      :class="['control-item', {'active': selectedItem && (selectedItem.type === item.type)}]"
       :id="item.id"
       :key="item.id"
       @click.stop="onClickHandler($event, item)"
+      :data-test="`${item.type}-main`"
     >
       <SubmenuPopper
         :data="item"
@@ -35,6 +36,7 @@
 import InlineSvg from 'vue-inline-svg';
 import nodeTypesStore from '@/nodeTypesStore';
 import SubmenuPopper from './SubmenuPopper/SubmenuPopper.vue';
+import clickAndDrop from '@/mixins/clickAndDrop';
 
 export default ({
   components: {
@@ -44,29 +46,15 @@ export default ({
   props: {
     nodeTypes: Array,
   },
+  mixins: [clickAndDrop],
   data() {
     return {
       plusIcon: require('@/assets/railBottom/plus.svg'),
-      wasClicked: false,
-      element: null,
-      selectedItem: null,
-      selectedSubmenuItem: null,
-      xOffset: 0,
-      yOffset: 0,
-      movedElement: null,
-      isDragging: false,
-      helperStyles: {
-        backgroundColor:'#ffffff',
-        position: 'absolute',
-        height: '40px',
-        width: '40px',
-        zIndex: '10',
-        opacity: '0.5',
-        pointerEvents: 'none',
-      },
-      popperType: null,
     };
   },
+  created() {
+    nodeTypesStore.dispatch('getUserPinnedObjects');
+  },
   computed: {
     controls() {
       return nodeTypesStore.getters.getPinnedNodeTypes;
@@ -79,68 +67,20 @@ export default ({
     clickToSubmenuHandler(data){
       window.ProcessMaker.EventBus.$off('custom-pointerclick');
       this.wasClicked = false;
-      this.parent = this.element;
+      this.parent = this.selectedItem;
       this.selectedSubmenuItem = data.control.type;
       this.onClickHandler(data.event, data.control);
     },
-    onClickHandler(event, control) {
-      this.createDraggingHelper(event, control);
-      document.addEventListener('mousemove', this.setDraggingPosition);
-      this.setDraggingPosition(event);
-      this.wasClicked = true;
-      this.element = control;
-      this.$emit('onSetCursor', 'crosshair');
-      if (!this.parent) {
-        this.selectedItem = control.type;
-        this.popperType = control.type;
-      }
-      window.ProcessMaker.EventBus.$on('custom-pointerclick', message => {
-        window.ProcessMaker.EventBus.$off('custom-pointerclick');
-        document.removeEventListener('mousemove', this.setDraggingPosition);
-        if (this.movedElement) {
-          document.body.removeChild(this.movedElement);
-        }
-        this.popperType = null;
-        this.selectedSubmenuItem = null;
-        this.selectedItem = null;
-        this.movedElement = null;
-        this.onCreateElement(message);
-      });
-    },
-    onCreateElement(event){
-      if (this.wasClicked && this.element) {
-        if (this.parent) {
-          this.parent = null;
-        }
-        this.$emit('onCreateElement', { event, control: this.element });
-        this.$emit('onSetCursor', 'none');
-        event.preventDefault();
-        this.wasClicked = false;
-      }
-    },
-    setDraggingPosition({ pageX, pageY }) {
-      this.movedElement.style.left = `${pageX}px`;
-      this.movedElement.style.top = `${pageY}px`;
-    },
     toggleExplorer() {
+      // Remove control click & drop selection when the Add button is clicked
+      this.deselect();
+      this.popperType = null;
+      this.selectedSubmenuItem = null;
+
+      // Toggle left explorer
       nodeTypesStore.commit('toggleExplorer');
       nodeTypesStore.commit('clearFilteredNodes');
-    },
-    createDraggingHelper(event, control) {
-      if (this.movedElement) {
-        document.removeEventListener('mousemove', this.setDraggingPosition);
-        document.body.removeChild(this.movedElement);
-        this.movedElement = null;
-      }
-      const sourceElement = event.target;
-      this.movedElement = document.createElement('img');
-      Object.keys(this.helperStyles).forEach((property) => {
-        this.movedElement.style[property] = this.helperStyles[property];
-      });
-      this.movedElement.src = control.icon;
-      document.body.appendChild(this.movedElement);
-      this.xOffset = event.clientX - sourceElement.getBoundingClientRect().left;
-      this.yOffset = event.clientY - sourceElement.getBoundingClientRect().top;
+      nodeTypesStore.commit('clearFilteredPmBlockNodes');
     },
   },
 });

package/src/components/railBottom/controls/SubmenuPopper/SubmenuPopper.vue

@@ -15,6 +15,7 @@
           :class="['control-submenu-list', {'active': selectedItem === item.type}]"
           :key="key"
           @click="onClickHandler($event, item)"
+          :data-test="item.type"
         >
           <inline-svg :src="item.icon" :alt=item.label />
           <div class="control-submenu-list-label">
@@ -84,10 +85,10 @@ export default ({
   flex-direction: column;
   align-items: flex-start;
   padding: 10px;
-  width: 255px;
+  width: max-content;
   left: 616px;
   background: #FFFFFF;
-  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
   border-radius: 4px;
   list-style: none;
   &-item {
@@ -105,12 +106,12 @@ export default ({
     align-items: center;
     padding: 12px 5px;
     gap: 8px;
-    width: 235px;
     height: 40px;
     flex: none;
     order: 0;
     align-self: stretch;
     flex-grow: 0;
+    border-radius: 4px;
 
     &.active {
       background-color: #DEEBFF;
@@ -128,7 +129,6 @@ export default ({
       height: 24px;
     }
     &-label{
-      font-family: 'Open Sans';
       font-style: normal;
       font-weight: 400;
       font-size: 14px;
@@ -166,7 +166,7 @@ export default ({
   color: $primary-white;
   position: absolute;
   z-index: 10;
-  box-shadow: 5px 5px 8px 0px #0000004a;
+  box-shadow: 5px 5px 8px 0 #0000004a;
   padding: 0.5rem;
   pointer-events: none;
   width: 40px;

package/src/components/rails/explorer-rail/explorer-rail.scss

@@ -53,3 +53,14 @@ $secondary-color-nav: #6c757d;
 	}
 }
 
+.pm-blocks {
+	&__container {
+		padding: 0.5rem 1rem;
+		p {
+			font-size: 13px;
+			line-height: 19px;
+			color: #000;
+		}
+	}
+}
+