@processmaker/modeler 1.32.0 → 1.33.0

package/package.json

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

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/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/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

@@ -10,11 +10,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"
@@ -28,6 +30,7 @@
       />
       <explorer-rail
         :node-types="nodeTypes"
+        :pm-block-nodes="pmBlockNodes"
         @set-cursor="cursor = $event"
         @onCreateElement="onCreateElementHandler"
       />
@@ -41,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"
@@ -53,8 +61,8 @@
         class="inspector h-100"
         :parent-height="parentHeight"
         :canvas-drag-position="canvasDragPosition"
-        :compressed="panelsCompressed && noElementsSelected"
         @shape-resize="shapeResize(false)"
+        @toggleInspector="handleToggleInspector"
       />
 
       <component
@@ -138,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';
@@ -188,6 +198,7 @@ export default {
   components: {
     ToolBar,
     ExplorerRail,
+    InspectorButton,
     InspectorPanel,
     ProcessmakerModelerGenericFlow,
     Selection,
@@ -201,6 +212,7 @@ export default {
         return {};
       },
     },
+    validationBar: Array,
   },
   mixins: [hotkeys, cloneSelection],
   data() {
@@ -240,10 +252,12 @@ export default {
       validationErrors: {},
       miniMapOpen: false,
       panelsCompressed: false,
+      isOpenInspector: false,
       isGrabbing: false,
       isRendering: false,
       allWarnings: [],
       nodeTypes: [],
+      pmBlockNodes: [],
       breadcrumbData: [],
       activeNode: null,
       xmlManager: null,
@@ -314,6 +328,9 @@ export default {
     },
   },
   methods: {
+    handleToggleInspector(value) {
+      this.isOpenInspector = value;
+    },
     isAppleOS() {
       return typeof navigator !== 'undefined' && /Mac|iPad|iPhone/.test(navigator.platform);
     },
@@ -360,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;
@@ -521,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);
       }
 
@@ -618,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
@@ -1003,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() => {
@@ -1220,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);
@@ -1240,6 +1293,7 @@ export default {
       registerBpmnExtension: this.registerBpmnExtension,
       registerNode: this.registerNode,
       registerStatusBar: this.registerStatusBar,
+      registerPmBlock: this.registerPmBlock,
     });
 
     this.moddle = new BpmnModdle(this.extensions);
@@ -1370,4 +1424,4 @@ export default {
   },
 };
 </script>
-<style lang="scss" src="./modeler.scss" />
+<style lang="scss" src="./modeler.scss" />

package/src/components/modeler/ModelerReadonly.vue

@@ -47,6 +47,7 @@
         :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"
@@ -87,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';
@@ -134,6 +136,10 @@ export default {
       type: Boolean,
       default: true,
     },
+    requestIdleNodes: {
+      type: Array,
+      default: () => [],
+    },
     requestCompletedNodes: {
       type: Array,
       default: () => [],
@@ -183,6 +189,7 @@ export default {
       isRendering: false,
       allWarnings: [],
       nodeTypes: [],
+      pmBlockNodes: [],
       activeNode: null,
       xmlManager: null,
       previouslyStackedShape: null,
@@ -407,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
@@ -845,6 +875,7 @@ export default {
       registerBpmnExtension: this.registerBpmnExtension,
       registerNode: this.registerNode,
       registerStatusBar: this.registerStatusBar,
+      registerPmBlock: this.registerPmBlock,
     });
 
     this.moddle = new BpmnModdle(this.extensions);

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