From c81a2c2b1a175ffedb3e0e3dae502cd1138331fe Mon Sep 17 00:00:00 2001 From: Eleazar Resendez Date: Tue, 13 Jun 2023 12:34:24 -0600 Subject: [PATCH 1/3] Apply new map legend colors --- src/mixins/highlightConfig.js | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/src/mixins/highlightConfig.js b/src/mixins/highlightConfig.js index bb4bb7c44..8d92e5be2 100644 --- a/src/mixins/highlightConfig.js +++ b/src/mixins/highlightConfig.js @@ -1,14 +1,21 @@ -/* 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'; +// eslint-disable-next-line no-unused-vars +const COLOR_IDLE = '#6d747c'; +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 +28,7 @@ const defaultHighlighter = { name: 'stroke', options: { attrs: { - stroke: '#5096db', + stroke: COLOR_DEFAULT, 'stroke-width': 3, 'data-cy': 'selected', }, @@ -34,7 +41,7 @@ const completedHighlighter = { name: 'stroke', options: { attrs: { - stroke: '#1572C2', + stroke: COLOR_COMPLETED, 'stroke-width': 3, }, }, @@ -46,7 +53,7 @@ const inProgressHighlighter = { name: 'stroke', options: { attrs: { - stroke: '#00875A', + stroke: COLOR_IN_PROGRESS, 'stroke-width': 3, 'stroke-dasharray': '4 4', }, @@ -100,6 +107,7 @@ 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); From e567a338a7e6da731b3cc621710670147604e979 Mon Sep 17 00:00:00 2001 From: Eleazar Resendez Date: Tue, 13 Jun 2023 15:48:21 -0600 Subject: [PATCH 2/3] Add idle highlighter --- src/components/modeler/ModelerReadonly.vue | 5 +++++ src/mixins/highlightConfig.js | 20 ++++++++++++++++++-- 2 files changed, 23 insertions(+), 2 deletions(-) diff --git a/src/components/modeler/ModelerReadonly.vue b/src/components/modeler/ModelerReadonly.vue index 7a20ab703..e62e4c436 100644 --- a/src/components/modeler/ModelerReadonly.vue +++ b/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" @@ -134,6 +135,10 @@ export default { type: Boolean, default: true, }, + requestIdleNodes: { + type: Array, + default: () => [], + }, requestCompletedNodes: { type: Array, default: () => [], diff --git a/src/mixins/highlightConfig.js b/src/mixins/highlightConfig.js index 8d92e5be2..3eea0cbb1 100644 --- a/src/mixins/highlightConfig.js +++ b/src/mixins/highlightConfig.js @@ -4,8 +4,7 @@ import store from '@/store'; const COLOR_DEFAULT = '#5096db'; const COLOR_ERROR = '##FF0000'; const COLOR_IN_PROGRESS = '#1572C2'; -// eslint-disable-next-line no-unused-vars -const COLOR_IDLE = '#6d747c'; +const COLOR_IDLE = '#ced4da'; const COLOR_COMPLETED = '#00875A'; const COLOR_COMPLETED_FILL = '#edfffc'; @@ -61,6 +60,18 @@ const inProgressHighlighter = { }, }; +const idleHighlighter = { + highlighter: { + name: 'stroke', + options: { + attrs: { + stroke: COLOR_IDLE, + 'stroke-width': 3, + }, + }, + }, +}; + export default { props: [ 'highlighted', @@ -70,6 +81,7 @@ export default { 'borderOutline', 'isCompleted', 'isInProgress', + 'isIdle', ], data() { return { @@ -114,6 +126,10 @@ export default { 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; } From c496792904a4d08e3af47ef60283969d10f6737e Mon Sep 17 00:00:00 2001 From: Eleazar Resendez Date: Wed, 14 Jun 2023 12:39:47 -0600 Subject: [PATCH 3/3] Color sequence flow elements --- src/mixins/linkConfig.js | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/src/mixins/linkConfig.js b/src/mixins/linkConfig.js index 13c2f7fe4..fdbfb7fcd 100644 --- a/src/mixins/linkConfig.js +++ b/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'); @@ -323,6 +332,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);