@processmaker/modeler 1.32.0 → 1.34.0

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

@@ -8,7 +8,8 @@
       :class="['control-item', {'active': selectedItem && (selectedItem.type === item.type)}]"
       :id="item.id"
       :key="item.id"
-      @click.stop="onClickHandler($event, item)"
+      @click.stop="onClickControlHandler($event, item)"
+      :data-test="`${item.type}-main`"
     >
       <SubmenuPopper
         :data="item"
@@ -22,7 +23,7 @@
       <div
         :class="{'control-add': true, 'control-active': explorerOpen}"
         :title="$t('Add')"
-        v-b-tooltip.hover
+        v-b-tooltip.hover.viewport.d50="{ customClass: 'no-pointer-events' }"
         @click="toggleExplorer"
       >
         <inline-svg :src="plusIcon" />
@@ -49,6 +50,7 @@ export default ({
   data() {
     return {
       plusIcon: require('@/assets/railBottom/plus.svg'),
+      currentType: null,
     };
   },
   created() {
@@ -70,9 +72,27 @@ export default ({
       this.selectedSubmenuItem = data.control.type;
       this.onClickHandler(data.event, data.control);
     },
+    /**
+     * On click on the botton rail control
+     * @param {Object} event
+     * @param {Object} control
+     */
+    onClickControlHandler(event, control) {
+      this.selectedSubmenuItem = null;
+      this.popperType = this.currentType === control.type ? null : control.type;
+      this.onClickHandler(event, control);
+      this.currentType = this.popperType;
+    },
     toggleExplorer() {
+      // Remove control click & drop selection when the Add button is clicked
+      this.deselect();
+      this.popperType = null;
+      this.selectedSubmenuItem = null;
+
+      // Toggle left explorer
       nodeTypesStore.commit('toggleExplorer');
       nodeTypesStore.commit('clearFilteredNodes');
+      nodeTypesStore.commit('clearFilteredPmBlockNodes');
     },
   },
 });

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

@@ -4,8 +4,9 @@
     trigger="clickToOpen"
     :options="{
       placement: 'top',
-      modifiers: { offset: { offset: '0,20px' } }
+      modifiers: { offset: { offset: '0,5px' }, preventOverflow: { escapeWithReference: true } }
     }"
+    :append-to-body=true
     :visible-arrow=false
     :force-show="popperType === data.type"
   >
@@ -15,6 +16,7 @@
           :class="['control-submenu-list', {'active': selectedItem === item.type}]"
           :key="key"
           @click="onClickHandler($event, item)"
+          :data-test="item.type"
         >
           <inline-svg :src="item.icon" :alt=item.label />
           <div class="control-submenu-list-label">
@@ -28,7 +30,7 @@
       slot="reference"
       :alt=data.label
       :title="$t(data.label)"
-      v-b-tooltip.hover
+      v-b-tooltip.hover.viewport.d50="{ customClass: 'no-pointer-events' }"
     >
       <div class="control-submenu-options">
         <span />
@@ -40,7 +42,7 @@
   <a v-else class="control-submenu-item"
     :alt=data.label
     :title="$t(data.label)"
-    v-b-tooltip.hover
+    v-b-tooltip.hover.viewport.d50="{ customClass: 'no-pointer-events' }"
   >
     <inline-svg :src=data.icon />
   </a>
@@ -87,7 +89,7 @@ export default ({
   width: 255px;
   left: 616px;
   background: #FFFFFF;
-  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
   border-radius: 4px;
   list-style: none;
   &-item {
@@ -105,12 +107,13 @@ export default ({
     align-items: center;
     padding: 12px 5px;
     gap: 8px;
-    width: 235px;
     height: 40px;
     flex: none;
     order: 0;
     align-self: stretch;
     flex-grow: 0;
+    border-radius: 4px;
+    cursor: pointer;
 
     &.active {
       background-color: #DEEBFF;
@@ -128,7 +131,6 @@ export default ({
       height: 24px;
     }
     &-label{
-      font-family: 'Open Sans';
       font-style: normal;
       font-weight: 400;
       font-size: 14px;
@@ -166,7 +168,7 @@ export default ({
   color: $primary-white;
   position: absolute;
   z-index: 10;
-  box-shadow: 5px 5px 8px 0px #0000004a;
+  box-shadow: 5px 5px 8px 0 #0000004a;
   padding: 0.5rem;
   pointer-events: none;
   width: 40px;

package/src/components/railBottom/controls/controls.scss

@@ -9,6 +9,7 @@
     box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
     border-radius: 8px;
     list-style: none;
+    overflow-x: auto;
   }
 
   &-item {
@@ -17,6 +18,7 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
+    min-width: 40px;
     width: 40px;
     height: 40px;
     margin-right: 12px;

package/src/components/railBottom/miniPaperControl/miniPaperControl.scss

@@ -26,6 +26,7 @@
 
     & > svg {
       fill: #333344;
+      width: 100%;
     }
 
     &:hover:not(.mini-paper-button-active) {

package/src/components/railBottom/railBottom.scss

@@ -24,5 +24,7 @@
     align-items: center;
     column-gap: 22px;
     width: 100%;
+    padding-right: 5px;
+    overflow-x: hidden;
   }
 }

package/src/components/railBottom/zoomControl/ZoomControl.vue

@@ -18,9 +18,7 @@
       data-cy="zoom-reset-control"
       v-b-tooltip.hover
       :title="$t('Reset to initial scale')"
-    >
-      {{ percentageText }}
-    </button>
+    >{{ percentageText }}</button>
 
     <button
       type="button"

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

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

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

@@ -4,6 +4,7 @@ import { faTimes } from '@fortawesome/free-solid-svg-icons';
 import nodeTypesStore from '@/nodeTypesStore';
 import FilterNodeTypes from '@/components/rails/explorer-rail/filterNodeTypes/filterNodeTypes.vue';
 import NodeTypesLoop from '@/components/rails/explorer-rail/nodeTypesLoop/nodeTypesLoop.vue';
+import PmBlocksLoop from '@/components/rails/explorer-rail/pmBlocksLoop/pmBlocksLoop.vue';
 
 export default {
   name: 'ExplorerRail',
@@ -14,11 +15,15 @@ export default {
     nodeTypes: {
       type: Array,
     },
+    pmBlockNodes: {
+      type: Array,
+    },
   },
   components: {
     FontAwesomeIcon,
     FilterNodeTypes,
     NodeTypesLoop,
+    PmBlocksLoop,
   },
   data() {
     return {
@@ -59,13 +64,14 @@ export default {
     },
     clearFilteredObjects() {
       nodeTypesStore.commit('clearFilteredNodes');
+      nodeTypesStore.commit('clearFilteredPmBlockNodes');
     },
   },
 };
 </script>
 
 <template>
-  <div id="explorer-rail" data-test="explorer-rail" v-if="explorerOpen">
+  <div id="explorer-rail" data-test="explorer-rail" v-show="explorerOpen">
     <div class="rail-menu">
       <b-tabs class="tabs--container" :no-nav-style="true">
         <template v-for="tab in tabs">
@@ -78,14 +84,17 @@ export default {
         <font-awesome-icon :icon="faTimes()"/>
       </div>
     </div>
-    <div class="node-types__container" v-if="tabIndex === 0">
-      <filter-node-types />
+    <div class="node-types__container" v-show="tabIndex === 0">
+      <filter-node-types :type="'object'"/>
       <node-types-loop
         v-on="$listeners"
       />
     </div>
-    <div class="pm-blocks__container">
-      <!--   Here goes the PM Blocks   -->
+    <div class="pm-blocks__container" v-show="tabIndex === 1">
+      <filter-node-types :type="'pmBlock'"/>
+      <pm-blocks-loop
+        v-on="$listeners"
+      />
     </div>
   </div>
 </template>

package/src/components/rails/explorer-rail/filterNodeTypes/filterNodeTypes.vue

@@ -2,16 +2,24 @@
 import nodeTypesStore from '@/nodeTypesStore';
 export default {
   name: 'FilterNodeTypes',
+  props: ['type'],
   data() {
     return {
       searchTerm: '',
-      placeholder: this.$t('Seach Objects'),
     };
   },
   watch: {
     searchTerm(value) {
-      if (value.length === 0) nodeTypesStore.commit('clearFilteredNodes');
-      if (value.length > 0) nodeTypesStore.commit('setFilteredNodeTypes', value);
+      if (this.type === 'pmBlock') {
+        if (value.length === 0) nodeTypesStore.commit('clearFilteredPmBlockNodes');
+        if (value.length > 0) nodeTypesStore.commit('setFilteredPmBlockNodeTypes', value);
+      } else  {
+        if (value.length === 0) nodeTypesStore.commit('clearFilteredNodes');
+        if (value.length > 0) nodeTypesStore.commit('setFilteredNodeTypes', value);
+      }
+    },
+    type(newValue, oldValue) {
+      this.searchTerm = oldValue === newValue ? this.searchTerm: '';
     },
   },
   computed: {
@@ -20,6 +28,13 @@ export default {
       const nodeTypes = nodeTypesStore.getters.getNodeTypes;
       return [...pinnedNodeTypes, ...nodeTypes];
     },
+    pmBlockNodes() {
+      const pmBlockNodeTypes = nodeTypesStore.getters.getPmBlockNodeTypes;
+      return [...pmBlockNodeTypes];
+    },
+    placeholder() {
+      return this.type === 'pmBlock' ? this.$t('Search PM Blocks') : this.$t('Search Objects');
+    },
   },
 };
 </script>

package/src/components/rails/explorer-rail/nodeTypesLoop/nodeTypesLoop.vue

@@ -22,9 +22,11 @@ export default {
       return !!this.pinnedObjects.find(obj => obj.type === type);
     },
     unPin(object) {
+      this.deselect();
       return nodeTypesStore.dispatch('removeUserPinnedObject', object);
     },
     addPin(object) {
+      this.deselect();
       return nodeTypesStore.dispatch('addUserPinnedObject', object);
     },
   },
@@ -55,10 +57,11 @@ export default {
       <template v-for="object in filteredNodes">
         <div
           class="node-types__item"
+          :data-test="object.type"
           :key="object.id"
           @mouseover="showPin = true"
           @mouseleave="showPin = false"
-          @click.stop="onClickHandler($event, object)"
+          @click.self="onClickHandler($event, object)"
         >
           <img class="node-types__item__icon" :src="object.icon" :alt="$t(object.label)">
           <span>{{ $t(object.label) }}</span>
@@ -85,6 +88,7 @@ export default {
         <template v-for="pinnedObject in pinnedObjects">
           <div
             class="node-types__item"
+            :data-test="pinnedObject.type"
             :key="pinnedObject.id"
             @mouseover="showPin = true"
             @mouseleave="showPin = false"
@@ -106,6 +110,7 @@ export default {
         <template v-for="nodeType in unpinnedObjects">
           <div
             class="node-types__item"
+            :data-test="nodeType.type"
             :key="nodeType.id"
             @mouseover="showPin = true"
             @mouseleave="showPin = false"

package/src/components/rails/explorer-rail/pmBlocksLoop/pmBlocksLoop.vue

@@ -0,0 +1,86 @@
+<script>
+import nodeTypesStore from '@/nodeTypesStore';
+import clickAndDrop from '@/mixins/clickAndDrop';
+
+export default {
+  name: 'PmBlocksLoop',
+  mixins: [clickAndDrop],
+  computed: {
+    pmBlockNodeTypes() {
+      return nodeTypesStore.getters.getPmBlockNodeTypes;
+    },
+    filteredPmBlockNodes() {
+      return nodeTypesStore.getters.getFilteredPmBlockNodeTypes;
+    },
+    searchTerm() {
+      return nodeTypesStore.getters.getSearchTerm;
+    },
+  },
+};
+</script>
+
+<template>
+  <div id="pmBlockNodeTypesList">
+    <div id="filteredPmBlockNodes-container" v-if="filteredPmBlockNodes.length > 0">
+      <template v-for="object in filteredPmBlockNodes">
+        <div
+          class="node-types__item"
+          :key="object.id"
+          @click.stop="onClickHandler($event, object)"
+        >
+          <div class="d-flex">
+            <i v-if="!object.svgIcon" class="node-types__item__icon" :class="object.customIcon"/>
+            <img v-else class="node-types__item__icon" :src="object.svgIcon" :alt="$t(object.label)">
+            <label>{{ $t(object.label) }}</label>
+          </div>
+        </div>
+      </template>
+    </div>
+    <template v-if="filteredPmBlockNodes.length === 0 && !searchTerm">
+      <div class="pmBlocksContainer p-2">
+        <template v-for="nodeType in pmBlockNodeTypes">
+          <div
+            class="pm-block-node-types__item p-2 d-block"
+            :key="nodeType.id"
+            @click.stop="onClickHandler($event, nodeType)"
+          >
+            <div class="d-flex">
+              <i v-if="!nodeType.svgIcon" class="node-types__item__icon" :class="nodeType.customIcon"/>
+              <img v-else class="node-types__item__icon" :src="nodeType.svgIcon" :alt="$t(nodeType.label)">
+              <label>{{ $t(nodeType.label) }}</label>
+            </div>
+          </div>
+        </template>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style lang="scss">
+.pm-block-node-types {
+  &__item {
+    display: block;
+    padding: 0.5rem 0.3rem;
+    border-radius: 4px;
+    user-select: none;
+    margin-bottom: 8px;
+    &:hover {
+      background-color: #EBEEF2;
+    }
+    &__icon {
+      width: 1.5rem;
+      height: 1.5rem;
+    }
+    label {
+      max-width: 225px;
+      font-size: 14px;
+      line-height: 15px;
+    }
+    span {
+      margin-left: 1.6rem;
+      font-size: 13px;
+      color:#6C757D;
+    }
+  }
+}
+</style>

package/src/components/shapeStackUtils.js

@@ -26,7 +26,7 @@ function isNotLane(shape) {
 function bringPoolToFront(poolShape) {
   bringShapeToFront(poolShape);
 
-  const hasLanes = poolShape.component.node.definition.processRef.laneSets[0];
+  const hasLanes = poolShape.component.node.definition.processRef && poolShape.component.node.definition.processRef.laneSets[0];
   if (!hasLanes) {
     return;
   }

package/src/components/toolbar/ToolBar.vue

@@ -8,49 +8,50 @@
         <TopRail
           :validation-errors="validationErrors"
           :warnings="warnings"
-        />
+        >
+          <component
+            :is="component.button"
+            v-for="(component, index) in validationBar"
+            :key="`validation-status-${index}`"
+          />
+        </TopRail>
 
-        <align-buttons @save-state="$emit('save-state')" />
-
-        <div class="btn-group btn-group-sm mr-2" role="group" aria-label="Additional controls">
-          <b-button
-            class="btn btn-sm btn-secondary ml-auto"
-            data-test="panels-btn"
-            @click="$emit('toggle-panels-compressed')"
-            v-b-tooltip.hover
-            :title="panelsCompressed ? $t('Show Menus') : $t('Hide Menus')"
-          >
-            <font-awesome-icon :icon="panelsCompressed ? expandIcon : compressIcon" />
-          </b-button>
-        </div>
-        <div class="btn-group btn-group-sm" role="group" aria-label="Publish controls">
+        <div
+          class="d-flex align-items-center btn-group btn-group-sm"
+          role="group"
+          aria-label="Publish controls"
+          data-cy="publish-control"
+        >
+          <div class="divider" />
           <template v-if="isVersionsInstalled">
-            <div class="d-flex justify-content-center align-items-center text-black text-capitalize" :style="{ width: '65px' }">
-              <span class="toolbar-item mr-1" :style="{ fontWeight: 600 }">
-                {{ versionStatus }}
-              </span>
+            <div
+              class="toolbar-item toolbar-version-status"
+              data-cy="publish-version-status"
+            >
+              {{ versionStatus }}
             </div>
-            <div class="d-flex justify-content-center align-items-center text-black text-capitalize mx-2" :style="{ width: '60px' }">
-              <span class="toolbar-item mr-1" :style="{ fontWeight: 400 }">
-                {{ loadingStatus }}
-              </span>
+            <div
+              class="toolbar-item toolbar-loading-status"
+              data-cy="publish-loading-status"
+            >
               <span>
-                <font-awesome-icon class="text-success" :icon="loadingIcon" :spin="isLoading" />
+                {{ loadingStatus }}
               </span>
+              <font-awesome-icon class="text-success" :icon="loadingIcon" :spin="isLoading" />
             </div>
             <a
-              class="btn btn-sm btn-primary btn-autosave text-uppercase mx-2"
-              data-test="publish-btn"
               :title="$t('Publish')"
               @click="$emit('saveBpmn')"
+              class="toolbar-item toolbar-publish"
+              data-cy="publish-btn"
             >
               {{ $t('Publish') }}
             </a>
             <a
-              class="btn btn-sm btn-link toolbar-item btn-autosave text-black text-uppercase"
-              data-test="close-btn"
               :title="$t('Close')"
               @click="$emit('close')"
+              class="toolbar-item toolbar-close"
+              data-cy="close-btn"
             >
               {{ $t('Close') }}
             </a>
@@ -60,18 +61,20 @@
               @navigate="onNavigate"
               @show="onShow"
               @hide="onHide"
+              data-cy="ellipsis-menu"
             />
           </template>
-          <b-button
+          <button
             v-else
-            class="btn btn-sm btn-secondary mini-map-btn mx-1"
+            class="save-button"
             data-test="mini-map-btn"
             v-b-tooltip.hover
             :title="$t('Save')"
             @click="$emit('saveBpmn')"
           >
             <font-awesome-icon :icon="saveIcon" />
-          </b-button>
+            <span class="save-button-label">{{ $t('Save') }}</span>
+          </button>
         </div>
       </div>
     </div>
@@ -83,15 +86,12 @@ import { faCompress, faExpand, faMapMarked, faMinus, faPlus, faRedo, faUndo, faS
 import undoRedoStore from '@/undoRedoStore';
 import Breadcrumb from '@/components/toolbar/breadcrumb/Breadcrumb';
 import TopRail from '@/components/topRail/TopRail.vue';
-import AlignButtons from '@/components/toolbar/alignButtons/AlignButtons';
-
 export default {
   name: 'tool-bar',
   components: {
     Breadcrumb,
     TopRail,
     FontAwesomeIcon,
-    AlignButtons,
   },
   props: [
     'canvasDragPosition',
@@ -103,6 +103,7 @@ export default {
     'validationErrors',
     'warnings',
     'xmlManager',
+    'validationBar',
   ],
   watch: {
     miniMapOpen(isOpen) {
@@ -163,13 +164,18 @@ export default {
       spinner: faSpinner,
       ellipsisMenuActions: [
         {
-          value: 'discard-draft',
-          content: this.$t('Discard Draft'),
+          value: 'save-template',
+          content: this.$t('Save as Template'),
           icon: '',
         },
         {
-          value: 'save-template',
-          content: this.$t('Save as Template'),
+          value: 'save-pm-block',
+          content: this.$t('Save as PM Block'),
+          icon: '',
+        },
+        {
+          value: 'discard-draft',
+          content: this.$t('Discard Draft'),
           icon: '',
         },
       ],
@@ -202,6 +208,9 @@ export default {
         case 'save-template':
           this.$emit('publishTemplate');
           break;
+        case 'save-pm-block':
+          this.$emit('publishPmBlock');
+          break;
         default:
           break;
       }
@@ -220,7 +229,8 @@ export default {
     },
   },
   mounted() {
-    if (this.$root.$children[0].process.is_template) {
+    const childProcess = this.$root.$children[0]?.process;
+    if (childProcess?.is_template) {
       const indexOfActions = this.ellipsisMenuActions.findIndex(object => {
         return object.value === 'save-template';
       });