@processmaker/modeler 1.33.0 → 1.35.0

package/src/components/toolbar/ToolBar.vue

@@ -22,6 +22,7 @@
           aria-label="Publish controls"
           data-cy="publish-control"
         >
+          <div class="divider" />
           <template v-if="isVersionsInstalled">
             <div
               class="toolbar-item toolbar-version-status"
@@ -63,6 +64,17 @@
               data-cy="ellipsis-menu"
             />
           </template>
+          <button
+            v-else
+            class="save-button"
+            data-test="mini-map-btn"
+            v-b-tooltip.hover
+            :title="$t('Save')"
+            @click="$emit('saveBpmn')"
+          >
+            <font-awesome-icon :icon="saveIcon" />
+            <span class="save-button-label">{{ $t('Save') }}</span>
+          </button>
         </div>
       </div>
     </div>
@@ -74,7 +86,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';
-
 export default {
   name: 'tool-bar',
   components: {
@@ -218,13 +229,18 @@ export default {
     },
   },
   mounted() {
-    if (this.$root.$children[0].process.is_template) {
-      const indexOfActions = this.ellipsisMenuActions.findIndex(object => {
-        return object.value === 'save-template';
-      });
+    const childProcess = this.$root.$children[0]?.process;
+    const indexOfActions = this.ellipsisMenuActions.findIndex(object => {
+      return object.value === 'save-template';
+    });
 
+    if (childProcess?.is_template) {
       this.ellipsisMenuActions.splice(indexOfActions, 1);
     }
+
+    if (childProcess?.asset_type === 'PM_BLOCK') {
+      this.ellipsisMenuActions.splice(indexOfActions, 2);
+    }
   },
 };
 </script>

package/src/components/toolbar/toolbar.scss

@@ -79,3 +79,26 @@ $toolbar-background-color: #fff;
   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/validateControl/validateButton/ValidateButton.vue

@@ -3,6 +3,8 @@
     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" />

package/src/mixins/highlightConfig.js

@@ -1,12 +1,15 @@
 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';
+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: {
@@ -41,7 +44,7 @@ const completedHighlighter = {
     options: {
       attrs: {
         stroke: COLOR_COMPLETED,
-        'stroke-width': 3,
+        'stroke-width': 5,
       },
     },
   },
@@ -53,8 +56,7 @@ const inProgressHighlighter = {
     options: {
       attrs: {
         stroke: COLOR_IN_PROGRESS,
-        'stroke-width': 3,
-        'stroke-dasharray': '4 4',
+        'stroke-width': 5,
       },
     },
   },
@@ -66,7 +68,7 @@ const idleHighlighter = {
     options: {
       attrs: {
         stroke: COLOR_IDLE,
-        'stroke-width': 3,
+        'stroke-width': 5,
       },
     },
   },
@@ -124,10 +126,11 @@ export default {
         }
         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);
+          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',
@@ -15,11 +19,8 @@ function isPoint(item) {
   return item.x && item.y;
 }
 
-const COLOR_IDLE = '#ced4da';
-const COLOR_COMPLETED = '#00875A';
-
 export default {
-  props: ['highlighted', 'paper', 'paperManager', 'isCompleted'],
+  props: ['highlighted', 'paper', 'paperManager', 'isCompleted', 'isIdle'],
   data() {
     return {
       sourceShape: null,
@@ -80,10 +81,16 @@ export default {
   },
   methods: {
     setShapeHighlight() {
-      const COLOR = this.isCompleted ? COLOR_COMPLETED : COLOR_IDLE;
-      this.shape.attr({
-        line: { stroke: COLOR },
-      });
+      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 => {

package/src/nodeTypesStore.js

@@ -68,6 +68,8 @@ export default new Vuex.Store({
           id: uniqueId('pmBlockNode_'),
           type: pmBlockNode.id,
           icon: pmBlockNode.icon,
+          customIcon: pmBlockNode.customIcon,
+          svgIcon: pmBlockNode.svgIcon,
           label: pmBlockNode.label,
           description: pmBlockNode.description,
           bpmnType: pmBlockNode.bpmnType,

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) {