@processmaker/modeler 1.32.0 → 1.34.0

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,14 +75,30 @@ $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;
 }
+
+.save-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 32px;
+  background-color: #6C757D;
+  border: 0 none;
+  border-radius: 4px;
+  transition: background-color 0.3s ease;
+  color: #ffffff;
+  &:active {
+    background-color: #5A6268;
+  }
+  &-label {
+    padding-left: 0.4em;
+  }
+}
+.divider {
+  border-left: 1px solid #6C757D;
+  height: 80%;
+  padding-left: 11px;
+}

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,9 @@
     type="button"
     @click.prevent="handleOpen"
     :class="['validate-button', { 'validate-button-active': isOpen }]"
+    :title="$t('Auto validate')"
+    v-b-tooltip.hover.viewport.d50="{ customClass: 'no-pointer-events' }"
+    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,6 +1,15 @@
-/* eslint-disable no-unused-vars */
 import cloneDeep from 'lodash/cloneDeep';
 import store from '@/store';
+import {
+  COLOR_DEFAULT,
+  COLOR_ERROR,
+  COLOR_IN_PROGRESS,
+  COLOR_IN_PROGRESS_FILL,
+  COLOR_IDLE,
+  COLOR_IDLE_FILL,
+  COLOR_COMPLETED,
+  COLOR_COMPLETED_FILL,
+} from '@/components/highlightColors.js';
 
 const errorHighlighter = {
   highlighter: {
@@ -8,7 +17,7 @@ const errorHighlighter = {
     options: {
       padding: 10,
       attrs: {
-        stroke: 'red',
+        stroke: COLOR_ERROR,
         'stroke-width': 10,
         opacity: 0.3,
       },
@@ -21,7 +30,7 @@ const defaultHighlighter = {
     name: 'stroke',
     options: {
       attrs: {
-        stroke: '#5096db',
+        stroke: COLOR_DEFAULT,
         'stroke-width': 3,
         'data-cy': 'selected',
       },
@@ -34,8 +43,8 @@ const completedHighlighter = {
     name: 'stroke',
     options: {
       attrs: {
-        stroke: '#1572C2',
-        'stroke-width': 3,
+        stroke: COLOR_COMPLETED,
+        'stroke-width': 5,
       },
     },
   },
@@ -46,9 +55,20 @@ const inProgressHighlighter = {
     name: 'stroke',
     options: {
       attrs: {
-        stroke: '#00875A',
-        'stroke-width': 3,
-        'stroke-dasharray': '4 4',
+        stroke: COLOR_IN_PROGRESS,
+        'stroke-width': 5,
+      },
+    },
+  },
+};
+
+const idleHighlighter = {
+  highlighter: {
+    name: 'stroke',
+    options: {
+      attrs: {
+        stroke: COLOR_IDLE,
+        'stroke-width': 5,
       },
     },
   },
@@ -63,6 +83,7 @@ export default {
     'borderOutline',
     'isCompleted',
     'isInProgress',
+    'isIdle',
   ],
   data() {
     return {
@@ -100,12 +121,18 @@ 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.shape.attr('body/fill', COLOR_IN_PROGRESS_FILL);
           this.shapeView.highlight(this.shapeBody, inProgressHighlighter);
         }
+        if (this.isIdle) {
+          this.shape.attr('body/fill', COLOR_IDLE_FILL);
+          this.shapeView.highlight(this.shapeBody, idleHighlighter);
+        }
         return;
       }
 

package/src/mixins/linkConfig.js

@@ -5,6 +5,10 @@ import { invalidNodeColor, setShapeColor, validNodeColor } from '@/components/no
 import { getDefaultAnchorPoint } from '@/portsUtils';
 import resetShapeColor from '@/components/resetShapeColor';
 import store from '@/store';
+import {
+  COLOR_IDLE,
+  COLOR_COMPLETED,
+} from '@/components/highlightColors.js';
 
 const endpoints = {
   source: 'source',
@@ -16,7 +20,7 @@ function isPoint(item) {
 }
 
 export default {
-  props: ['highlighted', 'paper'],
+  props: ['highlighted', 'paper', 'paperManager', 'isCompleted', 'isIdle'],
   data() {
     return {
       sourceShape: null,
@@ -76,6 +80,18 @@ export default {
     },
   },
   methods: {
+    setShapeHighlight() {
+      if (this.isCompleted) {
+        this.shape.attr({
+          line: { stroke: COLOR_COMPLETED },
+        });
+      }
+      else if (this.isIdle) {
+        this.shape.attr({
+          line: { stroke: COLOR_IDLE },
+        });
+      }
+    },
     findSourceShape() {
       return this.graph.getElements().find(element => {
         return element.component && element.component.node.definition === this.node.definition.get('sourceRef');
@@ -123,6 +139,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 +148,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 +257,6 @@ export default {
     emitSave() {
       if (this.highlighted) {
         this.updateWaypoints.flush();
-        this.$emit('save-state');
         document.removeEventListener('mouseup', this.emitSave);
         this.listeningToMouseup = false;
       }
@@ -323,6 +342,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,41 @@ 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,
+          customIcon: pmBlockNode.customIcon,
+          svgIcon: pmBlockNode.svgIcon,
+          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/src/store.js

@@ -59,6 +59,7 @@ export default new Vuex.Store({
     copiedElements: state => state.copiedElements,
     clientLeftPaper: state => state.clientLeftPaper,
     isReadOnly: state => state.readOnly,
+    showComponent: state => !state.readOnly,
   },
   mutations: {
     setReadOnly(state, value) {

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;