FOUR-8000 - IT4

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"
@@ -135,6 +136,10 @@ export default {
       type: Boolean,
       default: true,
     },
+    requestIdleNodes: {
+      type: Array,
+      default: () => [],
+    },
     requestCompletedNodes: {
       type: Array,
       default: () => [],

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,14 +52,26 @@ const inProgressHighlighter = {
     name: 'stroke',
     options: {
       attrs: {
-        stroke: '#00875A',
+        stroke: COLOR_IN_PROGRESS,
         'stroke-width': 3,
         'stroke-dasharray': '4 4',
       },
     },
   },
 };
 
+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;
       }
 

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');
@@ -326,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);