@processmaker/modeler 1.32.0 → 1.34.0

package/package.json

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

package/src/ModelerApp.vue

@@ -2,19 +2,6 @@
   <b-container fluid id="modeler-app" class="h-100 position-relative p-0">
 
     <b-card no-body class="h-100 rounded-0">
-      <!--   TODO Remove me when the time comes   -->
-      <!--      <b-card-header class="d-flex align-items-center header">-->
-      <!--        <b-card-text class="m-0 font-weight-bolder">-->
-      <!--          {{ $t('ProcessMaker Modeler') }}-->
-      <!--        </b-card-text>-->
-
-      <!--        <div class="ml-auto">-->
-      <!--          <b-btn variant="secondary" size="sm" v-b-modal="'uploadmodal'" class="mr-2">-->
-      <!--            <i class="fas fa-upload mr-1"/>-->
-      <!--            {{ $t('Upload XML') }}-->
-      <!--          </b-btn>-->
-      <!--        </div>-->
-      <!--      </b-card-header>-->
       <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>

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/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/faAlignBottom.js

@@ -2,10 +2,10 @@ export const faAlignBottom = {
   prefix: 'fpm',
   iconName: 'fa-align-bottom',
   icon: [
-    16,
-    16,
+    24,
+    24,
     [],
     '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',
+    'M4 12.32v9.32h1V3H4v9.32m2.28-3.6v1.96h8.52V6.76H6.28v1.96m0 7.2v1.96h13.08v-3.92H6.28v1.96',
   ],
 };

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

@@ -2,10 +2,10 @@ export const faAlignLeft = {
   prefix: 'fpm',
   iconName: 'fa-align-left',
   icon: [
-    16,
-    16,
+    24,
+    24,
     [],
     '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',
+    'M4 12.32v9.32h1V3H4v9.32m2.28-3.6v1.96h8.52V6.76H6.28v1.96m0 7.2v1.96h13.08v-3.92H6.28v1.96',
   ],
 };

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

@@ -2,10 +2,10 @@ export const faAlignRight = {
   prefix: 'fpm',
   iconName: 'fa-align-right',
   icon: [
-    16,
-    16,
+    24,
+    24,
     [],
     'e001',
-    'M14.28 1.058a.433.433 0 0 0-.23.235c-.047.103-.049.359-.049 6.707 0 6.389.002 6.604.05 6.71.114.251.441.36.686.229a.707.707 0 0 0 .243-.293c.026-.095.026-13.197 0-13.292a.625.625 0 0 0-.279-.305.602.602 0 0 0-.421.009M1.734 6.043a.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',
+    'M18.4 12.32v9.32h1V3h-1v9.32m-9.8-3.6v1.96h8.48V6.76H8.6v1.96M4 15.92v1.96h13.08v-3.92H4v1.96',
   ],
 };

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

@@ -2,10 +2,10 @@ export const faAlignTop = {
   prefix: 'fpm',
   iconName: 'fa-align-top',
   icon: [
-    16,
-    16,
+    24,
+    24,
     [],
     'e001',
-    'M1.451 1.008c-.134.02-.177.039-.265.116a.717.717 0 0 0-.125.139.507.507 0 0 0 .229.686c.106.048.321.05 6.71.05s6.604-.002 6.71-.05c.06-.027.14-.09.178-.14.066-.087.131-.29.112-.352a2.37 2.37 0 0 1-.025-.103c-.017-.08-.15-.244-.239-.295-.043-.025-1.554-.035-6.645-.046-3.623-.007-6.611-.01-6.64-.005m5.186 2.068a1 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-.147V3.747l-.07-.147a1.016 1.016 0 0 0-.471-.486l-.178-.087-1.241-.007-1.24-.006-.15.062',
+    'M3 4.5V5h18.64V4H3v.5m3.76 8.32v6.54h3.92V6.28H6.76v6.54m7.2-2.28v4.26h3.92V6.28h-3.92v4.26',
   ],
 };

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

@@ -2,10 +2,10 @@ export const faCenterHorizontally = {
   prefix: 'fpm',
   iconName: 'fa-center-horizontally',
   icon: [
-    16,
-    16,
+    24,
+    24,
     [],
     'e001',
-    'M7.73 1.09c-.238.151-.222-.031-.23 2.596l-.008 2.313-2.366.007-2.366.007-.173.084c-.221.106-.386.27-.491.49l-.083.173v2.48l.075.16c.098.21.303.416.509.511l.163.076 2.366.007 2.366.007.008 2.313c.007 2.287.007 2.314.062 2.419.08.152.262.26.438.26a.515.515 0 0 0 .438-.26c.055-.105.055-.132.062-2.419l.008-2.313 2.366-.007 2.366-.007.163-.076a1.13 1.13 0 0 0 .509-.511l.075-.16V6.76l-.076-.163a1.13 1.13 0 0 0-.511-.509l-.16-.075-2.366-.007-2.366-.007L8.5 3.686c-.006-2.222-.009-2.317-.058-2.416-.123-.248-.468-.335-.712-.18',
+    'M6.76 8.04v3.04H3v.96h3.76v6.04h3.92v-6.04h3.28v3.76h3.92v-3.76h3.76v-.959l-1.87-.011-1.87-.01-.01-1.89-.011-1.89H13.96v3.801l-1.63-.011-1.63-.01-.01-3.03L10.679 5H6.76v3.04',
   ],
 };

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

@@ -2,10 +2,10 @@ export const faCenterVertically = {
   prefix: 'fpm',
   iconName: 'fa-center-vertically',
   icon: [
-    16,
-    16,
+    24,
+    24,
     [],
     'e001',
-    'M6.767 2.028a1.044 1.044 0 0 0-.671.559l-.083.173-.007 2.366-.007 2.366-2.313.007-2.313.008-.12.07a.481.481 0 0 0-.169.682.52.52 0 0 0 .183.179c.105.055.132.055 2.419.062l2.313.008.007 2.366.007 2.366.075.16c.098.21.303.416.509.511l.163.076h2.48l.163-.076a1.13 1.13 0 0 0 .509-.511l.075-.16.007-2.366.007-2.366 2.313-.008c2.287-.007 2.314-.007 2.419-.062a.497.497 0 0 0 .01-.865l-.116-.066-2.313-.008-2.313-.007-.007-2.366-.007-2.366-.075-.16a1.13 1.13 0 0 0-.509-.511l-.163-.076-1.187-.004c-.652-.003-1.231.006-1.286.019',
+    'M11.04 4.88v1.88H7.28v3.92h3.76v3.28H5v3.92h6.04v3.76h1v-3.76h6.04v-3.92h-6.04v-3.28h3.76V6.76h-3.76V3h-1v1.88',
   ],
 };

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

@@ -2,10 +2,10 @@ export const faDistributeHorizontally = {
   prefix: 'fpm',
   iconName: 'fa-distribute-horizontally',
   icon: [
-    16,
-    16,
+    24,
+    24,
     [],
     'e001',
-    '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-.102m13.014-.005a.433.433 0 0 0-.23.235c-.047.103-.049.359-.049 6.707 0 6.389.002 6.604.05 6.71.114.251.441.36.686.229a.707.707 0 0 0 .243-.293c.026-.095.026-13.197 0-13.292a.625.625 0 0 0-.279-.305.602.602 0 0 0-.421.009m-7.513.97a1.044 1.044 0 0 0-.671.559l-.083.173v10.48l.075.16c.098.21.303.416.509.511l.163.076h2.48l.163-.076a1.13 1.13 0 0 0 .509-.511l.075-.16V2.76l-.075-.16a1.13 1.13 0 0 0-.509-.511l-.163-.076-1.187-.004c-.652-.003-1.231.006-1.286.019',
+    'M3 12.32v9.32h.96V3H3v9.32m17 0v9.32h1V3h-1v9.32m-10.44.02v6.54h4.88V5.8H9.56v6.54',
   ],
 };

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

@@ -2,10 +2,10 @@ export const faDistributeVertically = {
   prefix: 'fpm',
   iconName: 'fa-distribute-vertically',
   icon: [
-    16,
-    16,
+    24,
+    24,
     [],
     'e001',
-    'M1.293 1.044a.814.814 0 0 0-.233.222c-.13.241-.02.57.23.683.106.048.321.05 6.71.05s6.604-.002 6.71-.05a.507.507 0 0 0 .23-.683.62.62 0 0 0-.255-.224c-.108-.041-13.317-.039-13.392.002m1.474 4.985c-.281.066-.538.28-.671.558l-.083.173v2.48l.076.163c.095.206.301.411.511.509l.16.075h10.48l.16-.075a1.13 1.13 0 0 0 .511-.509l.076-.163V6.76l-.076-.163a1.13 1.13 0 0 0-.511-.509l-.16-.075-5.187-.004c-2.958-.002-5.229.006-5.286.02M1.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',
+    'M3 3.5V4h18.64V3H3v.5M5.8 12v2.44h13.08V9.56H5.8V12M3 20.52V21h18.64v-.96H3v.48',
   ],
 };

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>
 
@@ -29,14 +29,16 @@ import store from '@/store';
 import runningInCypressTest from '@/runningInCypressTest';
 import crownAlign from './crownAlign';
 import { library } from '@fortawesome/fontawesome-svg-core';
-import { faCenterVertically } from '../crownButtons/icons';
+import { faAlignLeft } 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,
@@ -67,7 +69,7 @@ export default {
         {
           label: 'Align',
           iconPrefix: 'fpm',
-          icon: 'center-vertically',
+          icon: 'align-left',
           testId: 'align',
           role: 'menuitem',
           action: this.showAlign,
@@ -86,7 +88,7 @@ export default {
   },
   created() {
     this.$t = this.$t.bind(this);
-    library.add(faCenterVertically);
+    library.add(faAlignLeft);
   },
   computed: {
     isMultiSelect() {

package/src/components/highlightColors.js

@@ -0,0 +1,8 @@
+export const COLOR_DEFAULT = '#5096db';
+export const COLOR_ERROR = '#FF0000';
+export const COLOR_IN_PROGRESS = '#3FA6FF';
+export const COLOR_IN_PROGRESS_FILL = '#DCF2FF';
+export const COLOR_IDLE = '#CCCCCC';
+export const COLOR_IDLE_FILL = '#F5F5F5';
+export const COLOR_COMPLETED = '#00BA7C';
+export const COLOR_COMPLETED_FILL = '#D6FFE6';

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,20 @@
+.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);
+  z-index: 2;
+
+  & > 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',
           },