@processmaker/modeler 1.32.0 → 1.34.0

package/src/components/modeler/Modeler.vue

@@ -1,6 +1,7 @@
 <template>
   <span data-test="body-container">
     <tool-bar
+      v-if="showComponent"
       :canvas-drag-position="canvasDragPosition"
       :cursor="cursor"
       :is-rendering="isRendering"
@@ -10,11 +11,13 @@
       :validation-errors="validationErrors"
       :warnings="allWarnings"
       :xml-manager="xmlManager"
+      :validationBar="validationBar"
       @load-xml="loadXML"
       @toggle-panels-compressed="panelsCompressed = !panelsCompressed"
       @toggle-mini-map-open="miniMapOpen = $event"
       @saveBpmn="saveBpmn"
       @publishTemplate="publishTemplate"
+      @publishPmBlock="publishPmBlock"
       @close="close"
       @save-state="pushToUndoStack"
       @clearSelection="clearSelection"
@@ -27,7 +30,9 @@
         :title="tooltipTitle"
       />
       <explorer-rail
+        v-if="showComponent"
         :node-types="nodeTypes"
+        :pm-block-nodes="pmBlockNodes"
         @set-cursor="cursor = $event"
         @onCreateElement="onCreateElementHandler"
       />
@@ -41,9 +46,16 @@
         <div ref="paper" data-test="paper" class="main-paper" />
       </b-col>
 
+      <InspectorButton
+        v-if="showComponent"
+        :showInspector="isOpenInspector"
+        @toggleInspector="handleToggleInspector"
+      />
+
       <InspectorPanel
+        v-if="showComponent"
         ref="inspector-panel"
-        v-show="!(highlightedNodes.length > 1)"
+        v-show="isOpenInspector && !(highlightedNodes.length > 1)"
         :style="{ height: parentHeight }"
         :nodeRegistry="nodeRegistry"
         :moddle="moddle"
@@ -53,8 +65,8 @@
         class="inspector h-100"
         :parent-height="parentHeight"
         :canvas-drag-position="canvasDragPosition"
-        :compressed="panelsCompressed && noElementsSelected"
         @shape-resize="shapeResize(false)"
+        @toggleInspector="handleToggleInspector"
       />
 
       <component
@@ -79,8 +91,11 @@
         :isRendering="isRendering"
         :paperManager="paperManager"
         :auto-validate="autoValidate"
-        :is-active="node === activeNode"
         :node-id-generator="nodeIdGenerator"
+        :is-active="node === activeNode"
+        :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"
         @remove-node="removeNode"
         @set-cursor="cursor = $event"
@@ -138,6 +153,8 @@ import ExplorerRail from '../rails/explorer-rail/explorer';
 import pull from 'lodash/pull';
 import remove from 'lodash/remove';
 import store from '@/store';
+import nodeTypesStore from '@/nodeTypesStore';
+import InspectorButton from '@/components/inspectors/inspectorButton/InspectorButton.vue';
 import InspectorPanel from '@/components/inspectors/InspectorPanel';
 import undoRedoStore from '@/undoRedoStore';
 import { Linter } from 'bpmnlint';
@@ -188,6 +205,7 @@ export default {
   components: {
     ToolBar,
     ExplorerRail,
+    InspectorButton,
     InspectorPanel,
     ProcessmakerModelerGenericFlow,
     Selection,
@@ -201,6 +219,25 @@ export default {
         return {};
       },
     },
+    readOnly: {
+      type: Boolean,
+      default() {
+        return false;
+      },
+    },
+    validationBar: Array,
+    requestIdleNodes: {
+      type: Array,
+      default: () => [],
+    },
+    requestCompletedNodes: {
+      type: Array,
+      default: () => [],
+    },
+    requestInProgressNodes: {
+      type: Array,
+      default: () => [],
+    },
   },
   mixins: [hotkeys, cloneSelection],
   data() {
@@ -240,10 +277,12 @@ export default {
       validationErrors: {},
       miniMapOpen: false,
       panelsCompressed: false,
+      isOpenInspector: false,
       isGrabbing: false,
       isRendering: false,
       allWarnings: [],
       nodeTypes: [],
+      pmBlockNodes: [],
       breadcrumbData: [],
       activeNode: null,
       xmlManager: null,
@@ -312,8 +351,12 @@ export default {
     invalidNodes() {
       return getInvalidNodes(this.validationErrors, this.nodes);
     },
+    showComponent: () => store.getters.showComponent,
   },
   methods: {
+    handleToggleInspector(value) {
+      this.isOpenInspector = value;
+    },
     isAppleOS() {
       return typeof navigator !== 'undefined' && /Mac|iPad|iPhone/.test(navigator.platform);
     },
@@ -360,6 +403,9 @@ export default {
     publishTemplate() {
       this.$emit('publishTemplate');
     },
+    publishPmBlock() {
+      this.$emit('publishPmBlock');
+    },
     async pasteElements() {
       if (this.copiedElements.length > 0 && !this.pasteInProgress) {
         this.pasteInProgress = true;
@@ -521,8 +567,7 @@ export default {
       } else {
         process = this.moddle.create('bpmn:Process');
         this.processes.push(process);
-        process.set('id', `process_${this.processes.length}`);
-
+        process.set('id', this.nodeIdGenerator.generateProcessId());
         this.definitions.get('rootElements').push(process);
       }
 
@@ -618,6 +663,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
@@ -1003,6 +1071,15 @@ export default {
       this.$refs.selector.clearSelection();
       await this.$nextTick();
       await this.pushToUndoStack();
+      // force to update the processNode property in every delete
+      this.processes = this.getProcesses();
+      if (this.processes  && this.processes.length > 0) {
+        this.processNode = new Node(
+          'processmaker-modeler-process',
+          this.processes[0],
+          this.planeElements.find(diagram => diagram.bpmnElement.id === this.processes[0].id),
+        );
+      }
     },
     async removeNodes() {
       await this.performSingleUndoRedoTransaction(async() => {
@@ -1181,6 +1258,15 @@ export default {
     },
     pointerMoveHandler(event) {
       const { clientX: x, clientY: y } = event;
+      if (store.getters.isReadOnly) {
+        if (this.canvasDragPosition) {
+          this.paperManager.translate(
+            event.offsetX - this.canvasDragPosition.x,
+            event.offsetY - this.canvasDragPosition.y,
+          );
+        }
+        return;
+      }
       if (this.isGrabbing) return;
       if (this.dragStart && (Math.abs(x - this.dragStart.x) > 5 || Math.abs(y - this.dragStart.y) > 5)) {
         this.isDragging = true;
@@ -1220,6 +1306,7 @@ export default {
     if (runningInCypressTest()) {
       /* Add reference to store on window; this is used in testing to verify rendered nodes */
       window.store = store;
+      window.undoRedoStore = undoRedoStore;
     }
 
     this.$t = this.$t.bind(this);
@@ -1240,6 +1327,7 @@ export default {
       registerBpmnExtension: this.registerBpmnExtension,
       registerNode: this.registerNode,
       registerStatusBar: this.registerStatusBar,
+      registerPmBlock: this.registerPmBlock,
     });
 
     this.moddle = new BpmnModdle(this.extensions);
@@ -1248,6 +1336,7 @@ export default {
     this.$emit('set-xml-manager', this.xmlManager);
   },
   mounted() {
+    store.commit('setReadOnly', this.readOnly);
     this.graph = new dia.Graph();
     store.commit('setGraph', this.graph);
     this.graph.set('interactiveFunc', cellView => {
@@ -1272,6 +1361,9 @@ export default {
 
     this.paperManager.addEventHandler('blank:pointerdown', (event, x, y) => {
       if (this.isGrabbing) return;
+      if (store.getters.isReadOnly) {
+        this.isGrabbing = true;
+      }
       const scale = this.paperManager.scale;
       this.canvasDragPosition = { x: x * scale.sx, y: y * scale.sy };
       this.isOverShape = false;
@@ -1288,6 +1380,7 @@ export default {
       }
     });
     this.paperManager.addEventHandler('blank:pointerup', (event) => {
+      this.isGrabbing = false;
       this.canvasDragPosition = null;
       this.activeNode = null;
       this.pointerUpHandler(event);
@@ -1327,6 +1420,10 @@ export default {
       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/index.js

@@ -31,7 +31,6 @@ export { default as pool } from './pool';
 export { default as poolLane } from './poolLane';
 export { default as ValidationStatus } from '../validationStatus/ValidationStatus';
 export { default as Modeler } from '../modeler/Modeler';
-export { default as ModelerReadonly } from '../modeler/ModelerReadonly';
 export { default as manualTask } from './manualTask';
 export { default as boundaryTimerEvent } from './boundaryTimerEvent';
 export { default as boundaryMessageEvent } from './boundaryMessageEvent';

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/RailBottom.vue

@@ -6,6 +6,7 @@
       ref="railLeftBox"
     >
       <MiniPaperControl
+        v-show="showComponent"
         :paper-manager="paperManager"
         :graph="graph"
       />
@@ -21,6 +22,7 @@
       :style="[overlap ? { width: 'auto'} : { width: '100%'}]"
     >
       <UndoRedoControl
+        v-show="showComponent"
         :is-rendering="isRendering"
         @load-xml="$emit('load-xml')"
         @clearSelection="$emit('clearSelection')"
@@ -28,6 +30,7 @@
       />
 
       <Controls
+        v-show="showComponent"
         :nodeTypes="nodeTypes"
         @onCreateElement="onCreateElementHandler"
         @onSetCursor="onSetCursorHandler"
@@ -43,6 +46,7 @@ import MiniPaperControl from '@/components/railBottom/miniPaperControl/MiniPaper
 import ZoomControl from '@/components/railBottom/zoomControl/ZoomControl.vue';
 import UndoRedoControl from '@/components/railBottom/undoRedoControl/UndoRedoControl.vue';
 import Controls from '@/components/railBottom/controls/Controls.vue';
+import store from '@/store';
 
 export default {
   components: {
@@ -109,6 +113,11 @@ export default {
       }
     },
   },
+  computed: {
+    showComponent() {
+      return store.getters.showComponent;
+    },
+  },
   async mounted() {
     await nextTick();