@processmaker/modeler 1.31.0 → 1.33.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/modeler",
-  "version": "1.31.0",
+  "version": "1.33.0",
   "scripts": {
     "serve": "vue-cli-service serve",
     "open-cypress": "TZ=UTC cypress open",
@@ -74,7 +74,7 @@
     "@babel/core": "^7.12.7",
     "@cypress/code-coverage": "^1.14.0",
     "@panter/vue-i18next": "^0.15.2",
-    "@processmaker/processmaker-bpmn-moddle": "0.13.0",
+    "@processmaker/processmaker-bpmn-moddle": "0.14.0",
     "@types/jest": "^24.9.1",
     "@vue/babel-preset-app": "^5.0.4",
     "@vue/cli-plugin-babel": "^4.5.9",

package/src/ModelerApp.vue

@@ -18,14 +18,6 @@
       <b-card-body class="overflow-hidden position-relative p-0 vh-100">
         <modeler ref="modeler" @set-xml-manager="xmlManager = $event" @validate="validationErrors = $event" @warnings="warnings = $event" :decorations="decorations" />
       </b-card-body>
-      <!--   TODO remove me when the time comes   -->
-      <!--      <validation-status ref="validationStatus"-->
-      <!--        :validation-errors="validationErrors"-->
-      <!--        :warnings="warnings"-->
-      <!--        :xml-manager="xmlManager"-->
-      <!--      >-->
-      <!--        <component v-for="(component, index) in validationBar" :key="index" :is="component" />-->
-      <!--      </validation-status>-->
     </b-card>
 
     <b-modal
@@ -64,7 +56,6 @@ export default {
   },
   data() {
     return {
-      validationBar: [],
       decorations: {
         borderOutline: {},
       },

package/src/NodeIdGenerator.js

@@ -1,13 +1,15 @@
 export default class NodeIdGenerator {
   static prefix = 'node_';
-
+  static processPrefix = 'Process_';
   static #counter = 1;
   static #diagramCounter = 1;
+  static #processCounter = 1;
 
   constructor(definitions) {
     this.definitions = definitions;
     this.refreshLastIdCounter();
     this.refreshLastDiagramIdCounter();
+    this.refreshLastProcessIdCounter();
   }
 
   findById(id, root = this.definitions.rootElements, walked = []) {
@@ -61,12 +63,19 @@ export default class NodeIdGenerator {
     let lastIdCounter = this.matchIds(new RegExp(`^${NodeIdGenerator.prefix}(\\d+)_di$`), this.definitions.diagrams);
     NodeIdGenerator.#diagramCounter = lastIdCounter + 1;
   }
+  refreshLastProcessIdCounter() {
+    let lastIdCounter = this.matchIds(new RegExp(`^${NodeIdGenerator.processPrefix}(\\d+)$`), this.definitions.rootElements);
+    NodeIdGenerator.#processCounter = lastIdCounter + 1;
+  }
 
   generate() {
     let definitionId = this.#generateDefinitionId();
     let diagramId = this.#generateDiagramId();
     return [definitionId, diagramId];
   }
+  generateProcessId() {
+    return this.#generateProcessId();
+  }
 
   #generateDefinitionId = () => {
     const id = NodeIdGenerator.prefix + NodeIdGenerator.#counter;
@@ -79,6 +88,12 @@ export default class NodeIdGenerator {
     const id = NodeIdGenerator.prefix + NodeIdGenerator.#diagramCounter + '_di';
     NodeIdGenerator.#diagramCounter++;
 
+    return id;
+  };
+  #generateProcessId = () => {
+    const id = NodeIdGenerator.processPrefix + NodeIdGenerator.#processCounter;
+    NodeIdGenerator.#processCounter++;
+
     return id;
   };
 }

package/src/assets/inspector.svg

@@ -0,0 +1,5 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M0 17C0 16.4477 0.366312 16 0.818182 16H17.1818C17.6337 16 18 16.4477 18 17C18 17.5523 17.6337 18 17.1818 18H0.818182C0.366312 18 0 17.5523 0 17Z"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M0 9C0 8.44772 0.366312 8 0.818182 8H17.1818C17.6337 8 18 8.44772 18 9C18 9.55228 17.6337 10 17.1818 10H0.818182C0.366312 10 0 9.55228 0 9Z"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M0 1C0 0.447715 0.366312 0 0.818182 0H17.1818C17.6337 0 18 0.447715 18 1C18 1.55228 17.6337 2 17.1818 2H0.818182C0.366312 2 0 1.55228 0 1Z"/>
+</svg>

package/src/assets/toolpanel/inclusive-gateway.svg

@@ -1,4 +1,4 @@
 <svg width="29" height="29" viewBox="0 0 29 29" xmlns="http://www.w3.org/2000/svg">
-<path d="M13.5841 1.9168C14.121 1.37983 14.9916 1.37983 15.5286 1.9168L27.1959 13.5841C27.7329 14.121 27.7329 14.9916 27.1959 15.5286L15.5286 27.1959C14.9916 27.7328 14.121 27.7328 13.5841 27.1959L1.91682 15.5286C1.37984 14.9916 1.37984 14.121 1.91682 13.5841L13.5841 1.9168ZM0.944544 12.6118C-0.129398 13.6857 -0.129398 15.4269 0.944544 16.5009L12.6118 28.1681C13.6857 29.2421 15.427 29.2421 16.5009 28.1681L28.1682 16.5009C29.2421 15.4269 29.2421 13.6857 28.1682 12.6118L16.5009 0.94453C15.427 -0.129412 13.6857 -0.129412 12.6118 0.94453L0.944544 12.6118Z" />
-<circle cx="14.5" cy="14.5" r="8" stroke="black"/>
+    <path d="M13.5841 1.9168C14.121 1.37983 14.9916 1.37983 15.5286 1.9168L27.1959 13.5841C27.7329 14.121 27.7329 14.9916 27.1959 15.5286L15.5286 27.1959C14.9916 27.7328 14.121 27.7328 13.5841 27.1959L1.91682 15.5286C1.37984 14.9916 1.37984 14.121 1.91682 13.5841L13.5841 1.9168ZM0.944544 12.6118C-0.129398 13.6857 -0.129398 15.4269 0.944544 16.5009L12.6118 28.1681C13.6857 29.2421 15.427 29.2421 16.5009 28.1681L28.1682 16.5009C29.2421 15.4269 29.2421 13.6857 28.1682 12.6118L16.5009 0.94453C15.427 -0.129412 13.6857 -0.129412 12.6118 0.94453L0.944544 12.6118Z" />
+    <circle cx="14.5" cy="14.5" r="8" stroke="black"/>
 </svg>

package/src/assets/topRail/issue-close.svg

@@ -0,0 +1,3 @@
+<svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0.693905 5.53599L6.00816 0.222004C6.26437 -0.0342065 6.68 -0.0342065 6.93621 0.222004L7.55609 0.841887C7.81203 1.09782 7.8123 1.51236 7.55719 1.76884L3.34543 6.00001L7.55691 10.2315C7.8123 10.4879 7.81176 10.9025 7.55582 11.1584L6.93594 11.7783C6.67973 12.0345 6.2641 12.0345 6.00789 11.7783L0.693905 6.46404C0.437694 6.20782 0.437694 5.7922 0.693905 5.53599Z" />
+</svg>

package/src/assets/topRail/issue-item.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M6 0.1875C2.78906 0.1875 0.1875 2.78906 0.1875 6C0.1875 9.21094 2.78906 11.8125 6 11.8125C9.21094 11.8125 11.8125 9.21094 11.8125 6C11.8125 2.78906 9.21094 0.1875 6 0.1875ZM8.85 7.52578C8.96016 7.63594 8.96016 7.81406 8.85 7.92422L7.92188 8.85C7.81172 8.96016 7.63359 8.96016 7.52344 8.85L6 7.3125L4.47422 8.85C4.36406 8.96016 4.18594 8.96016 4.07578 8.85L3.15 7.92188C3.03984 7.81172 3.03984 7.63359 3.15 7.52344L4.6875 6L3.15 4.47422C3.03984 4.36406 3.03984 4.18594 3.15 4.07578L4.07812 3.14766C4.18828 3.0375 4.36641 3.0375 4.47656 3.14766L6 4.6875L7.52578 3.15C7.63594 3.03984 7.81406 3.03984 7.92422 3.15L8.85234 4.07812C8.9625 4.18828 8.9625 4.36641 8.85234 4.47656L7.3125 6L8.85 7.52578Z" />
+</svg>

package/src/assets/topRail/issue-open.svg

@@ -0,0 +1,4 @@
+<svg width="15" height="8" viewBox="0 0 15 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M6.96966 7.43098L0.896437 2.11689C0.603531 1.8606 0.603531 1.44508 0.896437 1.18881L1.60478 0.569014C1.89719 0.313159 2.37109 0.312666 2.66419 0.56792L7.5 4.77943L12.3358 0.56792C12.6289 0.312666 13.1028 0.313159 13.3952 0.569014L14.1035 1.18881C14.3964 1.44511 14.3964 1.86062 14.1035 2.11689L8.03034 7.43098C7.73744 7.68725 7.26256 7.68725 6.96966 7.43098Z" />
+</svg>
+

package/src/assets/topRail/validate-close.svg

@@ -0,0 +1,4 @@
+<svg width="18" height="16" viewBox="0 0 18 16" xmlns="http://www.w3.org/2000/svg">
+    <path d="M1.81873 8C1.81873 4.39289 4.74287 1.46875 8.34998 1.46875C9.54059 1.46875 10.6551 1.78679 11.6152 2.34215C11.899 2.50635 12.2622 2.40935 12.4264 2.1255C12.5906 1.84166 12.4936 1.47844 12.2098 1.31424C11.0739 0.657144 9.75491 0.28125 8.34998 0.28125C4.08703 0.28125 0.631226 3.73705 0.631226 8C0.631226 12.2629 4.08703 15.7188 8.34998 15.7188C12.6129 15.7188 16.0687 12.2629 16.0687 8C16.0687 7.67208 15.8029 7.40625 15.475 7.40625C15.1471 7.40625 14.8812 7.67208 14.8812 8C14.8812 11.6071 11.9571 14.5312 8.34998 14.5312C4.74287 14.5312 1.81873 11.6071 1.81873 8Z" />
+    <path d="M17.0823 2.48234C17.3142 2.25047 17.3142 1.87453 17.0823 1.64266C16.8504 1.41078 16.4745 1.41078 16.2426 1.64266L8.34998 9.53531L5.20732 6.39266C4.97545 6.16078 4.5995 6.16078 4.36763 6.39266C4.13576 6.62453 4.13576 7.00047 4.36763 7.23234L7.93013 10.7948C8.162 11.0267 8.53795 11.0267 8.76982 10.7948L17.0823 2.48234Z" />
+</svg>

package/src/assets/topRail/validate-open.svg

@@ -0,0 +1,4 @@
+<svg width="19" height="18" viewBox="0 0 19 18" xmlns="http://www.w3.org/2000/svg">
+    <path d="M1.80589 9C1.80589 13.2502 5.25137 16.6957 9.50156 16.6957C13.7517 16.6957 17.1972 13.2502 17.1972 9C17.1972 4.75024 13.7524 1.30498 9.50272 1.30435C9.14254 1.30429 8.85058 1.01226 8.85063 0.652077C8.85069 0.291891 9.14273 -5.34573e-05 9.50291 7.34216e-09C14.4729 0.000737734 18.5016 4.02995 18.5016 9C18.5016 13.9706 14.4721 18 9.50156 18C4.53099 18 0.501541 13.9706 0.501541 9C0.501541 7.11913 1.08174 5.32928 2.12769 3.83814L1.38144 3.18945C0.988324 2.84772 1.13471 2.20576 1.63712 2.06822L4.47212 1.29212C4.92098 1.16925 5.3504 1.54254 5.29118 2.00413L4.9172 4.91955C4.85093 5.43621 4.23559 5.67051 3.84247 5.32877L3.11835 4.6993C2.27288 5.95119 1.80589 7.43811 1.80589 9Z" />
+    <path d="M12.7244 5.87213C13.0539 5.54262 13.5881 5.54262 13.9176 5.87213C14.2431 6.19759 14.2471 6.72279 13.9296 7.05316L9.43837 12.6672C9.43189 12.6753 9.42496 12.683 9.41763 12.6904C9.08812 13.0199 8.55389 13.0199 8.22438 12.6904L5.24713 9.71312C4.91762 9.38361 4.91762 8.84938 5.24713 8.51988C5.57663 8.19037 6.11087 8.19037 6.44037 8.51988L8.79558 10.8751L12.702 5.89737C12.709 5.88851 12.7164 5.88009 12.7244 5.87213Z" />
+</svg>

package/src/components/controls/controls.vue

@@ -32,7 +32,7 @@
 </template>
 
 <script>
-import { BOTTOM } from '@/components/controls/rankConstants';
+import nodeTypesStore from '@/nodeTypesStore';
 
 export default {
   props: ['allowDrop', 'compressed', 'canvasDragPosition', 'parentHeight', 'nodeTypes'],
@@ -53,16 +53,7 @@ export default {
   },
   computed: {
     controls() {
-      return this.nodeTypes
-        .filter(nodeType => nodeType.control)
-        .map(nodeType => ({
-          type: nodeType.id,
-          icon: nodeType.icon,
-          label: nodeType.label,
-          bpmnType: nodeType.bpmnType,
-          rank: nodeType.rank || BOTTOM,
-        }))
-        .sort((node1, node2) => node1.rank - node2.rank);
+      return nodeTypesStore.getters.getNodeTypes;
     },
   },
   methods: {

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

@@ -14,9 +14,11 @@ import laneAboveIcon from '@/assets/lane-above.svg';
 import CrownButton from '@/components/crown/crownButtons/crownButton';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { faLaneAbove } from './icons';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+
 
 export default {
-  components: { CrownButton },
+  components: { CrownButton, FontAwesomeIcon },
   data() {
     return {
       laneAboveIcon,

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

@@ -14,9 +14,11 @@ import laneBelowIcon from '@/assets/lane-below.svg';
 import CrownButton from '@/components/crown/crownButtons/crownButton';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { faLaneBelow } from './icons';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+
 
 export default {
-  components: { CrownButton },
+  components: { CrownButton, FontAwesomeIcon },
   data() {
     return {
       laneBelowIcon,

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

@@ -45,10 +45,11 @@ import store from '@/store';
 import Node from '@/components/nodes/node';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { faBoundaryEvent } from './icons';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
 export default {
   name: 'CrownBoundaryEventDropdown',
-  components: { CrownButton },
+  components: { CrownButton, FontAwesomeIcon },
   props: {
     dropdownOpen: {
       type: Boolean,

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

@@ -20,6 +20,7 @@ import store from '@/store';
 import { V } from 'jointjs';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { faConnectElements } from './icons';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
 // Don't show the magic flow button on:
 const dontShowOn = [
@@ -35,7 +36,7 @@ const dontShowOn = [
 ];
 
 export default {
-  components: { CrownButton },
+  components: { CrownButton, FontAwesomeIcon },
   props: ['node', 'moddle', 'nodeRegistry'],
   data() {
     return {

package/src/components/crown/crownButtons/icons/faAlignLeft.js

@@ -6,6 +6,6 @@ export const faAlignLeft = {
     16,
     [],
     'e001',
-    'M6.637 1.076a1 1 0 0 0-.562.538l-.062.133v10.506l.07.147c.146.307.427.524.755.584.212.039 2.112.039 2.324 0 .328-.06.609-.277.755-.584l.07-.147V1.747l-.07-.147a1.016 1.016 0 0 0-.471-.486l-.178-.087-1.241-.007-1.24-.006-.15.062M1.29 14.051a.507.507 0 0 0-.229.686.707.707 0 0 0 .293.243c.095.026 13.197.026 13.292 0a.707.707 0 0 0 .293-.243.507.507 0 0 0-.229-.686c-.106-.048-.321-.05-6.71-.05s-6.604.002-6.71.05',
+    'M1.266 1.063a.637.637 0 0 0-.246.292c-.026.094-.026 13.197 0 13.291a.707.707 0 0 0 .243.293.507.507 0 0 0 .686-.229c.048-.106.05-.321.05-6.704.001-7.105.009-6.691-.127-6.841-.133-.148-.445-.2-.606-.102m2.468 4.98a.994.994 0 0 0-.718.796c-.039.211-.039 2.111 0 2.323.06.328.277.609.584.755l.147.07h10.506l.147-.07c.307-.146.524-.427.584-.755.039-.212.039-2.112 0-2.323a1 1 0 0 0-.445-.675c-.271-.174.077-.164-5.551-.162-4.405.001-5.128.007-5.254.041',
   ],
 };

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

@@ -39,8 +39,11 @@ import {
   faDistributeHorizontally,
 } from '../crownButtons/icons';
 import { get } from 'lodash';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+
 
 export default {
+  components: {FontAwesomeIcon},
   props: {
     paper: Object,
     hasPools: Boolean,

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

@@ -20,7 +20,7 @@
       <font-awesome-icon v-if="button.iconPrefix === 'fpm'" :icon="[button.iconPrefix, `fa-${button.icon}`]"/>
       <i v-else :class="`${button.iconPrefix} fa-${button.icon} text-dark`" />
     </button>
-    <crown-align v-show="showAlignmentButtons" :paper="paper"/>
+    <crown-align v-show="showAlignmentButtons" :paper="paper" @save-state="$emit('save-state')" />
   </div>
 </template>
 
@@ -30,13 +30,15 @@ import runningInCypressTest from '@/runningInCypressTest';
 import crownAlign from './crownAlign';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { faCenterVertically } from '../crownButtons/icons';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+
 
 export default {
   props: {
     paper: Object,
     hasPools: Boolean,
   },
-  components:{ crownAlign },
+  components:{ crownAlign, FontAwesomeIcon },
   data() {
     return {
       showAlignmentButtons: false,

package/src/components/hotkeys/escKey.js

@@ -0,0 +1,20 @@
+import nodeTypesStore from '@/nodeTypesStore';
+
+export default {
+  methods: {
+    escapeKeyHandler(event) {
+      if (this.selectedNode) {
+        event.preventDefault();
+        window.ProcessMaker.EventBus.$emit('custom-pointerclick', event);
+      }
+    },
+  },
+  computed: {
+    selectedNode() {
+      return nodeTypesStore.getters.getSelectedNode;
+    },
+    movedElement() {
+      return nodeTypesStore.getters.getGhostNode;
+    },
+  },
+};

package/src/components/hotkeys/main.js

@@ -1,10 +1,11 @@
 import ZoomInOut from './zoomInOut';
 import CopyPaste from './copyPaste.js';
-import store from '@/store';
 import moveShapeByKeypress from './moveWithArrowKeys';
+import EscKey from './escKey';
+import store from '@/store';
 
 export default {
-  mixins: [ZoomInOut, CopyPaste],
+  mixins: [ZoomInOut, CopyPaste, EscKey],
   computed: {
     clientLeftPaper() {
       return store.getters.clientLeftPaper;
@@ -19,6 +20,7 @@ export default {
       // Pass event to all handlers
       this.zoomInOutHandler(event, options);
       this.copyPasteHandler(event, options);
+      this.escapeKeyHandler(event);
     },
     keyupListener(event) {
       if (event.code === 'Space') {

package/src/components/inspectors/InspectorPanel.vue

@@ -1,17 +1,33 @@
 <template>
   <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 }]"
+      :class="[{ 'ignore-pointer': canvasDragPosition }]"
       data-test="inspector-column"
     >
       <b-card
         no-body class="inspector-container border-top-0 border-bottom-0 border-right-0 rounded-0"
         data-test="inspector-container"
         :style="{ height: parentHeight }"
+        data-cy="inspector-panel"
       >
+        <template #header>
+          <div class="inspector-header">
+            <div class="inspector-header-title">
+              {{ $t('Configuration') }}
+            </div>
+            <button
+              type="button"
+              aria-label="Close"
+              class="close"
+              @click="onClose"
+              data-cy="inspector-close-button"
+            >
+              ×
+            </button>
+          </div>
+        </template>
         <vue-form-renderer
           :key="highlightedNode._modelerId"
           v-if="highlightedNode"
@@ -63,13 +79,14 @@ Vue.component('FormDatePicker', FormDatePicker);
 Vue.component('FormMultiSelect', FormMultiSelect);
 
 export default {
-  props: ['nodeRegistry', 'moddle', 'processNode', 'parentHeight', 'canvasDragPosition', 'compressed', 'definitions'],
+  props: ['nodeRegistry', 'moddle', 'processNode', 'parentHeight', 'canvasDragPosition', 'definitions'],
   data() {
     return {
       data: {},
       config: [],
       inspectorHandler: null,
       translated: [],
+      isVisible: true,
     };
   },
   watch: {
@@ -131,6 +148,12 @@ export default {
     },
   },
   methods: {
+    /**
+     * On Close even handler
+     */
+    onClose(){
+      this.$emit('toggleInspector', false);
+    },
     handleAssignmentChanges(currentValue, previousValue) {
       if (currentValue === previousValue) {
         return;

package/src/components/inspectors/inspector.scss

@@ -23,5 +23,16 @@ $inspector-column-max-width: 265px;
     .inspector-font-size {
       font-size: 0.875rem;
     }
+  };
+  &-header {
+    justify-content: space-between;
+    display: flex;
+    flex-direction: row;
+    &-title {
+      flex-grow: 0;
+      font-weight: 600;
+      letter-spacing: -0.02em;
+      flex-grow: 0;
+    };
   }
 }

package/src/components/inspectors/inspectorButton/InspectorButton.vue

@@ -0,0 +1,38 @@
+<template>
+  <button
+    type="button"
+    @click="toggleInspector"
+    class="inspector-button"
+    data-cy="inspector-button"
+  >
+    <inline-svg :src="inspectorIcon" />
+  </button>
+</template>
+
+<script>
+import InlineSvg from 'vue-inline-svg';
+
+export default {
+  components: {
+    InlineSvg,
+  },
+  props: {
+    showInspector: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      inspectorIcon: require('@/assets/inspector.svg'),
+    };
+  },
+  methods: {
+    toggleInspector() {
+      this.$emit('toggleInspector', !this.showInspector);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss" src="./inspectorButton.scss"></style>

package/src/components/inspectors/inspectorButton/inspectorButton.scss

@@ -0,0 +1,19 @@
+.inspector-button {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 48px;
+  height: 48px;
+  top: 95px;
+  right: 65px;
+  padding: 4px;
+  background-color: #FFFFFF;
+  border: 0 none;
+  border-radius: 4px;
+  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
+
+  & > svg {
+    fill: #44494E;
+  }
+}

package/src/components/inspectors/process.js

@@ -14,7 +14,7 @@ const process = {
           container: true,
           config: {
             initiallyOpen: true,
-            label: 'Configuration',
+            label: 'Properties',
             icon: 'cog',
             name: 'inspector-accordion-process',
           },

package/src/components/modeler/Modeler.vue

@@ -7,11 +7,16 @@
       :paper-manager="paperManager"
       :breadcrumb-data="breadcrumbData"
       :panelsCompressed="panelsCompressed"
+      :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"
@@ -25,6 +30,7 @@
       />
       <explorer-rail
         :node-types="nodeTypes"
+        :pm-block-nodes="pmBlockNodes"
         @set-cursor="cursor = $event"
         @onCreateElement="onCreateElementHandler"
       />
@@ -38,9 +44,14 @@
         <div ref="paper" data-test="paper" class="main-paper" />
       </b-col>
 
+      <InspectorButton
+        :showInspector="isOpenInspector"
+        @toggleInspector="handleToggleInspector"
+      />
+
       <InspectorPanel
         ref="inspector-panel"
-        v-show="!(highlightedNodes.length > 1)"
+        v-show="isOpenInspector && !(highlightedNodes.length > 1)"
         :style="{ height: parentHeight }"
         :nodeRegistry="nodeRegistry"
         :moddle="moddle"
@@ -50,8 +61,8 @@
         class="inspector h-100"
         :parent-height="parentHeight"
         :canvas-drag-position="canvasDragPosition"
-        :compressed="panelsCompressed && noElementsSelected"
         @shape-resize="shapeResize(false)"
+        @toggleInspector="handleToggleInspector"
       />
 
       <component
@@ -135,6 +146,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';
@@ -185,6 +198,7 @@ export default {
   components: {
     ToolBar,
     ExplorerRail,
+    InspectorButton,
     InspectorPanel,
     ProcessmakerModelerGenericFlow,
     Selection,
@@ -198,6 +212,7 @@ export default {
         return {};
       },
     },
+    validationBar: Array,
   },
   mixins: [hotkeys, cloneSelection],
   data() {
@@ -237,10 +252,12 @@ export default {
       validationErrors: {},
       miniMapOpen: false,
       panelsCompressed: false,
+      isOpenInspector: false,
       isGrabbing: false,
       isRendering: false,
       allWarnings: [],
       nodeTypes: [],
+      pmBlockNodes: [],
       breadcrumbData: [],
       activeNode: null,
       xmlManager: null,
@@ -311,6 +328,9 @@ export default {
     },
   },
   methods: {
+    handleToggleInspector(value) {
+      this.isOpenInspector = value;
+    },
     isAppleOS() {
       return typeof navigator !== 'undefined' && /Mac|iPad|iPhone/.test(navigator.platform);
     },
@@ -357,6 +377,9 @@ export default {
     publishTemplate() {
       this.$emit('publishTemplate');
     },
+    publishPmBlock() {
+      this.$emit('publishPmBlock');
+    },
     async pasteElements() {
       if (this.copiedElements.length > 0 && !this.pasteInProgress) {
         this.pasteInProgress = true;
@@ -518,8 +541,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);
       }
 
@@ -615,6 +637,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
@@ -1000,6 +1045,16 @@ 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() => {
@@ -1217,6 +1272,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);
@@ -1237,6 +1293,7 @@ export default {
       registerBpmnExtension: this.registerBpmnExtension,
       registerNode: this.registerNode,
       registerStatusBar: this.registerStatusBar,
+      registerPmBlock: this.registerPmBlock,
     });
 
     this.moddle = new BpmnModdle(this.extensions);
@@ -1367,4 +1424,4 @@ export default {
   },
 };
 </script>
-<style lang="scss" src="./modeler.scss" />
+<style lang="scss" src="./modeler.scss" />