@processmaker/modeler 1.32.0 → 1.33.0

package/src/components/toolbar/ToolBar.vue

@@ -8,49 +8,49 @@
         <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"
+        >
           <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 +60,9 @@
               @navigate="onNavigate"
               @show="onShow"
               @hide="onHide"
+              data-cy="ellipsis-menu"
             />
           </template>
-          <b-button
-            v-else
-            class="btn btn-sm btn-secondary mini-map-btn mx-1"
-            data-test="mini-map-btn"
-            v-b-tooltip.hover
-            :title="$t('Save')"
-            @click="$emit('saveBpmn')"
-          >
-            <font-awesome-icon :icon="saveIcon" />
-          </b-button>
         </div>
       </div>
     </div>
@@ -83,7 +74,6 @@ 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',
@@ -91,7 +81,6 @@ export default {
     Breadcrumb,
     TopRail,
     FontAwesomeIcon,
-    AlignButtons,
   },
   props: [
     'canvasDragPosition',
@@ -103,6 +92,7 @@ export default {
     'validationErrors',
     'warnings',
     'xmlManager',
+    'validationBar',
   ],
   watch: {
     miniMapOpen(isOpen) {
@@ -163,13 +153,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 +197,9 @@ export default {
         case 'save-template':
           this.$emit('publishTemplate');
           break;
+        case 'save-pm-block':
+          this.$emit('publishPmBlock');
+          break;
         default:
           break;
       }

package/src/components/toolbar/toolbar.scss

@@ -1,7 +1,7 @@
 $toolbar-background-color: #fff;
 
 .toolbar {
-  z-index: 2;
+  z-index: 3;
   height: $toolbar-height;
   cursor: auto;
   width: 100%;
@@ -10,14 +10,61 @@ $toolbar-background-color: #fff;
   > button {
     cursor: pointer;
   }
-}
 
-.toolbar-item {
-  font-family: "Open Sans";
-  font-style: normal;
-  font-size: 14px;
-  letter-spacing: -0.02em;
-  line-height: 21px;
+  &-item {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-family: "Open Sans";
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    color: #000000;
+    text-transform: capitalize;
+  }
+
+  &-version-status {
+    margin: 0 12px;
+    padding-left: 12px;
+    border-left: 1px solid #ADB3B8;
+    font-weight: 600;
+    color: #6C757D;
+  }
+
+  &-loading-status {
+    margin-right: 21px;
+
+    > svg {
+      margin-left: 5px;
+    }
+  }
+
+  &-publish {
+    width: 72px;
+    height: 30px;
+    margin-right: 21px;
+    background-color: #1572C2;
+    border-radius: 4px;
+    color: #FFFFFF !important;
+    text-transform: uppercase;
+    text-decoration: none !important;
+    cursor: pointer;
+    outline: none;
+
+    &:hover {
+      background-color: #065c9d;
+    }
+  }
+
+  &-close {
+    width: 42px;
+    height: 22px;
+    margin-right: 21px;
+    color: #000000 !important;
+    cursor: pointer;
+    text-transform: uppercase;
+    text-decoration: none !important;
+  }
 }
 
 .text-black {
@@ -28,13 +75,6 @@ $toolbar-background-color: #fff;
   cursor: default !important;
 }
 
-.btn-autosave {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 4px !important;
-}
-
 .btn-ellipsis {
   border-top-left-radius: 4px !important;
   border-bottom-left-radius: 4px !important;

package/src/components/topRail/TopRail.vue

@@ -13,6 +13,7 @@
       :error-list="errorList"
       :warnings="warnings"
     />
+    <slot />
   </div>
 </template>
 

package/src/components/topRail/validateControl/validateButton/ValidateButton.vue

@@ -3,6 +3,7 @@
     type="button"
     @click.prevent="handleOpen"
     :class="['validate-button', { 'validate-button-active': isOpen }]"
+    data-cy="validate-button"
   >
     <inline-svg :src="isOpen ? validateOpenIcon : validateCloseIcon" />
   </button>

package/src/components/topRail/validateControl/validateIssue/ValidateIssue.vue

@@ -4,6 +4,7 @@
     :disabled="numberOfErrors === 0"
     @click.prevent="handleOpen"
     class="issue-box"
+    data-cy="validate-issue-button"
   >
     <span class="issue-title">Issues</span>
 

package/src/components/topRail/validateControl/validatePanel/ValidatePanel.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="validate-container">
+  <div
+    class="validate-container"
+    data-cy="validate-panel"
+  >
     <div v-for="(error, index) in errorList" :key="`${error.errorId}_${index}`" class="validate-item-box">
       <vue-inline-svg :src="issueIcon" />
 

package/src/components/topRail/validateControl/validatePanel/validatePanel.scss

@@ -12,7 +12,7 @@
     border: 1px solid #C4C8CC;
     border-radius: 4px;
     overflow-y: auto;
-    z-index: 1;
+    z-index: 3;
   }
 
   &-item {

package/src/mixins/clickAndDrop.js

@@ -26,12 +26,7 @@ export default {
       this.setDraggingPosition(event);
       // Deselect control on click if same control is already selected
       if (this.selectedItem && (this.selectedItem.type === control.type)) {
-        document.removeEventListener('mousemove', this.setDraggingPosition);
-        document.body.removeChild(this.movedElement);
-        this.$emit('onSetCursor', 'none');
-        nodeTypesStore.commit('clearSelectedNode');
-        nodeTypesStore.commit('setGhostNode', null);
-        this.wasClicked = false;
+        this.deselect();
         return;
       }
       this.wasClicked = true;
@@ -51,6 +46,7 @@ export default {
         this.onCreateElement(message);
         nodeTypesStore.commit('clearSelectedNode');
         nodeTypesStore.commit('setGhostNode', null);
+        this.$emit('onSetCursor', 'none');
       });
     },
     onCreateElement(event){
@@ -59,15 +55,16 @@ export default {
           this.parent = null;
         }
         this.$emit('onCreateElement', { event, control: this.selectedItem });
-        this.$emit('onSetCursor', 'none');
-        event.preventDefault();
         this.wasClicked = false;
+        event.preventDefault();
       }
     },
     setDraggingPosition({ pageX, pageY }) {
       let tempGhost = this.movedElement;
-      tempGhost.style.left = `${pageX}px`;
-      tempGhost.style.top = `${pageY}px`;
+      if (tempGhost) {
+        tempGhost.style.left = `${pageX}px`;
+        tempGhost.style.top = `${pageY}px`;
+      }
       nodeTypesStore.commit('setGhostNode', tempGhost);
     },
     createDraggingHelper(event, control) {
@@ -88,6 +85,16 @@ export default {
       this.xOffset = event.clientX - sourceElement.getBoundingClientRect().left;
       this.yOffset = event.clientY - sourceElement.getBoundingClientRect().top;
     },
+    deselect() {
+      document.removeEventListener('mousemove', this.setDraggingPosition);
+      if (this.movedElement) {
+        document.body.removeChild(this.movedElement);
+      }
+      this.$emit('onSetCursor', 'none');
+      this.wasClicked = false;
+      nodeTypesStore.commit('clearSelectedNode');
+      nodeTypesStore.commit('setGhostNode', null);
+    },
   },
   computed: {
     selectedItem() {

package/src/mixins/highlightConfig.js

@@ -1,14 +1,20 @@
-/* eslint-disable no-unused-vars */
 import cloneDeep from 'lodash/cloneDeep';
 import store from '@/store';
 
+const COLOR_DEFAULT = '#5096db';
+const COLOR_ERROR = '##FF0000';
+const COLOR_IN_PROGRESS = '#1572C2';
+const COLOR_IDLE = '#ced4da';
+const COLOR_COMPLETED = '#00875A';
+const COLOR_COMPLETED_FILL = '#edfffc';
+
 const errorHighlighter = {
   highlighter: {
     name: 'stroke',
     options: {
       padding: 10,
       attrs: {
-        stroke: 'red',
+        stroke: COLOR_ERROR,
         'stroke-width': 10,
         opacity: 0.3,
       },
@@ -21,7 +27,7 @@ const defaultHighlighter = {
     name: 'stroke',
     options: {
       attrs: {
-        stroke: '#5096db',
+        stroke: COLOR_DEFAULT,
         'stroke-width': 3,
         'data-cy': 'selected',
       },
@@ -34,7 +40,7 @@ const completedHighlighter = {
     name: 'stroke',
     options: {
       attrs: {
-        stroke: '#1572C2',
+        stroke: COLOR_COMPLETED,
         'stroke-width': 3,
       },
     },
@@ -46,7 +52,7 @@ const inProgressHighlighter = {
     name: 'stroke',
     options: {
       attrs: {
-        stroke: '#00875A',
+        stroke: COLOR_IN_PROGRESS,
         'stroke-width': 3,
         'stroke-dasharray': '4 4',
       },
@@ -54,6 +60,18 @@ const inProgressHighlighter = {
   },
 };
 
+const idleHighlighter = {
+  highlighter: {
+    name: 'stroke',
+    options: {
+      attrs: {
+        stroke: COLOR_IDLE,
+        'stroke-width': 3,
+      },
+    },
+  },
+};
+
 export default {
   props: [
     'highlighted',
@@ -63,6 +81,7 @@ export default {
     'borderOutline',
     'isCompleted',
     'isInProgress',
+    'isIdle',
   ],
   data() {
     return {
@@ -100,12 +119,17 @@ export default {
       if (store.getters.isReadOnly) {
         this.shapeView.unhighlight(this.shapeBody, completedHighlighter);
         if (this.isCompleted) {
+          this.shape.attr('body/fill', COLOR_COMPLETED_FILL);
           this.shapeView.highlight(this.shapeBody, completedHighlighter);
         }
         this.shapeView.unhighlight(this.shapeBody, inProgressHighlighter);
         if (this.isInProgress) {
           this.shapeView.highlight(this.shapeBody, inProgressHighlighter);
         }
+        if (this.isIdle) {
+          this.shape.attr('body/fill', COLOR_IDLE);
+          this.shapeView.highlight(this.shapeBody, idleHighlighter);
+        }
         return;
       }
 

package/src/mixins/linkConfig.js

@@ -15,8 +15,11 @@ function isPoint(item) {
   return item.x && item.y;
 }
 
+const COLOR_IDLE = '#ced4da';
+const COLOR_COMPLETED = '#00875A';
+
 export default {
-  props: ['highlighted', 'paper'],
+  props: ['highlighted', 'paper', 'paperManager', 'isCompleted'],
   data() {
     return {
       sourceShape: null,
@@ -76,6 +79,12 @@ export default {
     },
   },
   methods: {
+    setShapeHighlight() {
+      const COLOR = this.isCompleted ? COLOR_COMPLETED : COLOR_IDLE;
+      this.shape.attr({
+        line: { stroke: COLOR },
+      });
+    },
     findSourceShape() {
       return this.graph.getElements().find(element => {
         return element.component && element.component.node.definition === this.node.definition.get('sourceRef');
@@ -123,6 +132,8 @@ export default {
       resetShapeColor(targetShape);
 
       this.shape.on('change:vertices', this.onChangeVertices);
+      this.shape.listenTo(this.sourceShape, 'change:position', this.updateWaypoints);
+      this.shape.listenTo(targetShape, 'change:position', this.updateWaypoints);
 
       const sourceShape = this.shape.getSourceElement();
       sourceShape.embed(this.shape);
@@ -130,13 +141,15 @@ export default {
     },
     /**
       * On Change vertices handler
-      * @param {Object} link 
-      * @param {Array} vertices 
-      * @param {Object} options 
+      * @param {Object} link
+      * @param {Array} vertices
+      * @param {Object} options
       */
-    onChangeVertices(link, vertices, options){
+    async onChangeVertices(link, vertices, options){
       if (options && options.ui) {
         this.updateWaypoints();
+        await this.$nextTick();
+        this.$emit('save-state');
       }
     },
     updateWaypoints() {
@@ -237,7 +250,6 @@ export default {
     emitSave() {
       if (this.highlighted) {
         this.updateWaypoints.flush();
-        this.$emit('save-state');
         document.removeEventListener('mouseup', this.emitSave);
         this.listeningToMouseup = false;
       }
@@ -323,6 +335,14 @@ export default {
     this.shape.on('change:vertices', function() {
       this.component.$emit('shape-resize');
     });
+
+    if (store.getters.isReadOnly) {
+      this.$nextTick(() => {
+        this.paperManager.awaitScheduledUpdates().then(() => {
+          this.setShapeHighlight();
+        });
+      });
+    }
   },
   beforeDestroy() {
     document.removeEventListener('mouseup', this.emitSave);

package/src/nodeTypesStore.js

@@ -10,6 +10,8 @@ export default new Vuex.Store({
     nodeTypes: [],
     pinnedNodeTypes: [],
     filteredNodeTypes: [],
+    pmBlockNodeTypes: [],
+    filteredPmBlockNodeTypes: [],
     explorerOpen: false,
     searchTerm: '',
     selectedNode: null,
@@ -21,6 +23,8 @@ export default new Vuex.Store({
     getFilteredNodeTypes: state => state.filteredNodeTypes,
     getExplorerOpen: state => state.explorerOpen,
     getSearchTerm: state => state.searchTerm,
+    getPmBlockNodeTypes: state => state.pmBlockNodeTypes,
+    getFilteredPmBlockNodeTypes: state => state.filteredPmBlockNodeTypes,
     getSelectedNode: state => state.selectedNode,
     getGhostNode: state => state.ghostNode,
   },
@@ -42,7 +46,7 @@ export default new Vuex.Store({
     setPinnedNodes(state, payload) {
       state.pinnedNodeTypes.push(payload);
       // Remove duplicates
-      state.pinnedNodeTypes = [...new Map(state.pinnedNodeTypes.map(node => [node['type'], node])).values()];
+      state.pinnedNodeTypes = uniqBy(state.pinnedNodeTypes, 'type');
       state.pinnedNodeTypes.sort((node1, node2) => node1.rank - node2.rank);
     },
     setUnpinNode(state, payload) {
@@ -57,10 +61,39 @@ export default new Vuex.Store({
         return node.label.toLowerCase().includes(searchTerm.toLowerCase());
       });
     },
+    setPmBlockNodeTypes(state, pmBlockNodeTypes) {
+      state.pmBlockNodeTypes = pmBlockNodeTypes
+        .filter(pmBlockNode => pmBlockNode.control)
+        .map(pmBlockNode => ({
+          id: uniqueId('pmBlockNode_'),
+          type: pmBlockNode.id,
+          icon: pmBlockNode.icon,
+          label: pmBlockNode.label,
+          description: pmBlockNode.description,
+          bpmnType: pmBlockNode.bpmnType,
+          rank: pmBlockNode.rank || BOTTOM,
+          items: pmBlockNode.items?.map(item => ({ ...item, type: item.id })),
+        }))
+        .sort((node1, node2) => node1.rank - node2.rank);
+    },
+    setFilteredPmBlockNodeTypes(state, searchTerm) {
+      // TODO: Configure Pm Block search bar
+      const pmBlockNodeTypes = state.pmBlockNodeTypes;
+      state.searchTerm = searchTerm;
+      const allNodes = uniqBy([...pmBlockNodeTypes], 'id');
+      state.filteredPmBlockNodeTypes = allNodes.filter(node => {
+        return node.label.toLowerCase().includes(searchTerm.toLowerCase());
+      });
+    },
     clearFilteredNodes(state) {
       state.filteredNodeTypes = [];
       state.searchTerm = '';
     },
+    clearFilteredPmBlockNodes(state) {
+      state.filteredNodeTypes = [];
+      state.filteredPmBlockNodeTypes = [];
+      state.searchTerm = '';
+    },
     closeExplorer(state) {
       state.explorerOpen = false;
     },

package/vue.config.js

@@ -7,6 +7,7 @@ const CircularDependencyPlugin = require('circular-dependency-plugin');
 
 module.exports = {
   runtimeCompiler: true,
+  lintOnSave: process.env.NODE_ENV !== 'production',
   css: {
     extract: false,
     loaderOptions: {

package/dist/img/distribute-horizontally-icon.5c513cf4.svg

@@ -1,3 +0,0 @@
-<svg width="29" height="30" viewBox="0 0 29 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M6.5 3.5H6V4V10H4V26H9V10H7V4.5H14.25V10H12.25V21H17.25V10H15.25V4.5H22V10H20V26H25V10H23V4V3.5H22.5H14.75H6.5Z" fill="white"/>
-</svg>

package/dist/img/distribute-vertically-icon.a35fb699.svg

@@ -1,3 +0,0 @@
-<svg width="29" height="30" viewBox="0 0 29 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M9.5 7.49997V9.49997H25.5V4.49997H9.5V6.49997H3.5H3V6.99997V14.75V23V23.5H3.5H9.5V25.5H25.5V20.5H9.5V22.5H4V15.25H9.5V17.25H20.5V12.25H9.5V14.25H4V7.49997H9.5Z" fill="white"/>
-</svg>

package/dist/img/inclusive-gateway.754cb36f.svg

@@ -1,4 +0,0 @@
-<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"/>
-</svg>

package/src/components/controls/rankConstants.js

@@ -1 +0,0 @@
-export const BOTTOM = 5000;