@processmaker/modeler 1.31.0 → 1.33.0

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

@@ -0,0 +1,39 @@
+<template>
+  <button
+    type="button"
+    @click.prevent="handleOpen"
+    :class="['validate-button', { 'validate-button-active': isOpen }]"
+    data-cy="validate-button"
+  >
+    <inline-svg :src="isOpen ? validateOpenIcon : validateCloseIcon" />
+  </button>
+</template>
+
+<script>
+import InlineSvg from 'vue-inline-svg';
+
+export default {
+  components: {
+    InlineSvg,
+  },
+  data() {
+    return {
+      isOpen: false,
+      validateCloseIcon: require('@/assets/topRail/validate-close.svg'),
+      validateOpenIcon: require('@/assets/topRail/validate-open.svg'),
+    };
+  },
+  methods: {
+    /**
+     * Show/hide issue button
+     */
+    handleOpen() {
+      this.isOpen = !this.isOpen;
+
+      this.$emit('openIssue', this.isOpen);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss" src="./validateButton.scss"></style>

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

@@ -0,0 +1,25 @@
+.validate-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 32px;
+  height: 32px;
+  background-color: #EBEEF2;
+  border: 0 none;
+  border-radius: 4px;
+  transition: background-color 0.3s ease;
+
+  & > svg {
+    width: 18px;
+    fill: #212529;
+  }
+
+  &:active,
+  &-active {
+    background-color: #104A75;
+
+    & > svg {
+      fill: #ffffff;
+    }
+  }
+}

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

@@ -0,0 +1,60 @@
+<template>
+  <button
+    type="button"
+    :disabled="numberOfErrors === 0"
+    @click.prevent="handleOpen"
+    class="issue-box"
+    data-cy="validate-issue-button"
+  >
+    <span class="issue-title">Issues</span>
+
+    <span class="issue-badge">{{ numberOfErrors }}</span>
+
+    <span class="issue-icon">
+      <inline-svg :src="isOpen ? issueOpenIcon : issueCloseIcon" />
+    </span>
+  </button>
+</template>
+
+<script>
+import InlineSvg from 'vue-inline-svg';
+
+export default {
+  components: {
+    InlineSvg,
+  },
+  props: {
+    numberOfErrors: {
+      type: Number,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      isOpen: false,
+      issueCloseIcon: require('@/assets/topRail/issue-close.svg'),
+      issueOpenIcon: require('@/assets/topRail/issue-open.svg'),
+    };
+  },
+  watch: {
+    numberOfErrors(newValue) {
+      // Checks the number of errors if it is "0" reset the issue icon
+      if (newValue === 0) {
+        this.isOpen = false;
+      }
+    },
+  },
+  methods: {
+    /**
+     * Show/hide the issue panel
+     */
+    handleOpen() {
+      this.isOpen = !this.isOpen;
+
+      this.$emit('openPanel', this.isOpen);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss" src="./validateIssue.scss"></style>

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

@@ -0,0 +1,54 @@
+.issue {
+  &-box {
+    display: flex;
+    align-items: center;
+    background-color: #EBEEF2;
+    margin-right: 12px;
+    padding: 4px 8px;
+    border: 0 none;
+    border-radius: 4px;
+    font-family: 'Open Sans';
+  }
+
+  &-title {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 21px;
+    letter-spacing: -0.02em;
+    color: #212529;
+  }
+
+  &-badge {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-width: 16px;
+    height: 20px;
+    margin: {
+      left: 7px;
+      right: 15px;
+    };
+    padding: {
+      left: 3px;
+      right: 3px;
+    };
+    background: #FFAB00;
+    border-radius: 8px;
+    font-size: 12.8px;
+    font-weight: 400;
+    color: #FFFFFF;
+  }
+
+  &-icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 14px;
+    height: 14px;
+    padding: 0px;
+
+    & > svg {
+      fill: #212529;
+    }
+  }
+}

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

@@ -0,0 +1,54 @@
+<template>
+  <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" />
+
+      <div class="validate-item-info">
+        <div class="validate-item-title">{{ error.errorKey }}</div>
+        <div class="validate-item-description">{{ error.message }}.</div>
+        <div class="validate-item-node" v-if="error.id">
+          <span class="validate-item-node-title">{{ $t('Node ID') }}:</span> {{ error.id }}
+        </div>
+      </div>
+    </div>
+
+    <div v-for="(warning, index) in warnings" :key="warning.title + index" class="validate-item-box">
+      <vue-inline-svg :src="issueIcon" />
+
+      <div class="validate-item-info">
+        <div class="validate-item-title">{{ warning.title }}</div>
+        <div class="validate-item-description">{{ warning.text }}.</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import VueInlineSvg from 'vue-inline-svg';
+
+export default {
+  components: {
+    VueInlineSvg,
+  },
+  props: {
+    errorList: {
+      type: Array,
+      required: true,
+    },
+    warnings: {
+      type: Array,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      issueIcon: require('@/assets/topRail/issue-item.svg'),
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss" src="./validatePanel.scss"></style>

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

@@ -0,0 +1,67 @@
+.validate {
+  &-container {
+    position: absolute;
+    top: 48px;
+    right: 8px;
+    display: flex;
+    flex-direction: column;
+    width: 386px;
+    height: 273px;
+    padding: 12px;
+    background: #F7F7F7;
+    border: 1px solid #C4C8CC;
+    border-radius: 4px;
+    overflow-y: auto;
+    z-index: 3;
+  }
+
+  &-item {
+    &-box {
+      display: flex;
+      justify-content: flex-start;
+      margin-bottom: 10px;
+      color: #000000;
+
+      & > svg {
+        width: 16px;
+        margin: {
+          top: 4px;
+          right: 10px;
+        };
+        fill: #D11401;
+      }
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    &-info {
+      flex: 1 1 0;
+      display: flex;
+      flex-direction: column;
+      font-family: 'Open Sans';
+      font-style: normal;
+      font-size: 14px;
+    }
+
+    &-title {
+      font-weight: 600;
+      text-transform: capitalize;
+    }
+
+    &-description {
+      font-style: italic;
+      font-weight: 400;
+      color: #6C757D;
+    }
+
+    &-node {
+      &-title {
+        font-weight: 600;
+      }
+
+      font-weight: 400;
+    }
+  }
+}

package/src/mixins/clickAndDrop.js

@@ -0,0 +1,107 @@
+import nodeTypesStore from '@/nodeTypesStore';
+
+export default {
+  data() {
+    return {
+      wasClicked: false,
+      selectedSubmenuItem: null,
+      xOffset: 0,
+      yOffset: 0,
+      helperStyles: {
+        backgroundColor:'#ffffff',
+        position: 'absolute',
+        height: '40px',
+        width: '40px',
+        zIndex: '10',
+        opacity: '0.5',
+        pointerEvents: 'none',
+      },
+      popperType: null,
+    };
+  },
+  methods: {
+    onClickHandler(event, control) {
+      this.createDraggingHelper(event, control);
+      document.addEventListener('mousemove', this.setDraggingPosition);
+      this.setDraggingPosition(event);
+      // Deselect control on click if same control is already selected
+      if (this.selectedItem && (this.selectedItem.type === control.type)) {
+        this.deselect();
+        return;
+      }
+      this.wasClicked = true;
+      nodeTypesStore.commit('setSelectedNode', control);
+      this.$emit('onSetCursor', 'crosshair');
+      if (!this.parent) {
+        this.popperType = control.type;
+      }
+      window.ProcessMaker.EventBus.$on('custom-pointerclick', message => {
+        window.ProcessMaker.EventBus.$off('custom-pointerclick');
+        document.removeEventListener('mousemove', this.setDraggingPosition);
+        if (this.movedElement) {
+          document.body.removeChild(this.movedElement);
+        }
+        this.popperType = null;
+        this.selectedSubmenuItem = null;
+        this.onCreateElement(message);
+        nodeTypesStore.commit('clearSelectedNode');
+        nodeTypesStore.commit('setGhostNode', null);
+        this.$emit('onSetCursor', 'none');
+      });
+    },
+    onCreateElement(event){
+      if (this.wasClicked && this.selectedItem) {
+        if (this.parent) {
+          this.parent = null;
+        }
+        this.$emit('onCreateElement', { event, control: this.selectedItem });
+        this.wasClicked = false;
+        event.preventDefault();
+      }
+    },
+    setDraggingPosition({ pageX, pageY }) {
+      let tempGhost = this.movedElement;
+      if (tempGhost) {
+        tempGhost.style.left = `${pageX}px`;
+        tempGhost.style.top = `${pageY}px`;
+      }
+      nodeTypesStore.commit('setGhostNode', tempGhost);
+    },
+    createDraggingHelper(event, control) {
+      if (this.movedElement) {
+        document.removeEventListener('mousemove', this.setDraggingPosition);
+        document.body.removeChild(this.movedElement);
+        nodeTypesStore.commit('setGhostNode', null);
+      }
+      const sourceElement = event.target;
+      nodeTypesStore.commit('setGhostNode', document.createElement('img'));
+      let tempGhost = this.movedElement;
+      Object.keys(this.helperStyles).forEach((property) => {
+        tempGhost.style[property] = this.helperStyles[property];
+      });
+      tempGhost.src = control.icon;
+      nodeTypesStore.commit('setGhostNode', tempGhost);
+      document.body.appendChild(this.movedElement);
+      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() {
+      return nodeTypesStore.getters.getSelectedNode;
+    },
+    movedElement() {
+      return nodeTypesStore.getters.getGhostNode;
+    },
+  },
+};

package/src/mixins/highlightConfig.js

@@ -1,4 +1,12 @@
 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: {
@@ -6,7 +14,7 @@ const errorHighlighter = {
     options: {
       padding: 10,
       attrs: {
-        stroke: 'red',
+        stroke: COLOR_ERROR,
         'stroke-width': 10,
         opacity: 0.3,
       },
@@ -19,7 +27,7 @@ const defaultHighlighter = {
     name: 'stroke',
     options: {
       attrs: {
-        stroke: '#5096db',
+        stroke: COLOR_DEFAULT,
         'stroke-width': 3,
         'data-cy': 'selected',
       },
@@ -27,6 +35,43 @@ const defaultHighlighter = {
   },
 };
 
+const completedHighlighter = {
+  highlighter: {
+    name: 'stroke',
+    options: {
+      attrs: {
+        stroke: COLOR_COMPLETED,
+        'stroke-width': 3,
+      },
+    },
+  },
+};
+
+const inProgressHighlighter = {
+  highlighter: {
+    name: 'stroke',
+    options: {
+      attrs: {
+        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',
@@ -34,6 +79,9 @@ export default {
     'hasError',
     'autoValidate',
     'borderOutline',
+    'isCompleted',
+    'isInProgress',
+    'isIdle',
   ],
   data() {
     return {
@@ -68,6 +116,23 @@ export default {
   },
   methods: {
     setShapeHighlight() {
+      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;
+      }
+
       if (!this.shapeView) {
         return;
       }
@@ -84,7 +149,9 @@ export default {
       if (this.currentBorderOutline) {
         this.shapeView.unhighlight(this.shapeBody, this.currentBorderOutline);
       }
-      this.currentBorderOutline = borderOutline ? cloneDeep(borderOutline) : null;
+      this.currentBorderOutline = borderOutline
+        ? cloneDeep(borderOutline)
+        : null;
       if (this.currentBorderOutline) {
         this.shapeView.highlight(this.shapeBody, this.currentBorderOutline);
       }
@@ -92,14 +159,15 @@ export default {
   },
   mounted() {
     this.$nextTick(() => {
-      this.paperManager.awaitScheduledUpdates()
-        .then(() => {
-          this.setShapeHighlight();
-          this.shape.on('change:size', () => {
-            this.paperManager.awaitScheduledUpdates().then(this.setShapeHighlight);
-            this.$emit('shape-resize', this.shape);
-          });
+      this.paperManager.awaitScheduledUpdates().then(() => {
+        this.setShapeHighlight();
+        this.shape.on('change:size', () => {
+          this.paperManager
+            .awaitScheduledUpdates()
+            .then(this.setShapeHighlight);
+          this.$emit('shape-resize', this.shape);
         });
+      });
     });
   },
 };

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,
@@ -40,6 +43,9 @@ export default {
       }
     },
     highlighted(highlighted) {
+      if (store.getters.isReadOnly) {
+        return;
+      }
       if (highlighted) {
         this.shape.attr({
           line: { stroke: '#5096db' },
@@ -73,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');
@@ -120,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);
@@ -127,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() {
@@ -234,7 +250,6 @@ export default {
     emitSave() {
       if (this.highlighted) {
         this.updateWaypoints.flush();
-        this.$emit('save-state');
         document.removeEventListener('mouseup', this.emitSave);
         this.listeningToMouseup = false;
       }
@@ -255,9 +270,10 @@ export default {
 
     this.$once('click', () => {
       this.$nextTick(() => {
-        if (store.getters.isReadOnly === false) {
-          this.setupLinkTools();
+        if (store.getters.isReadOnly) {
+          return;
         }
+        this.setupLinkTools();
       });
     });
 
@@ -319,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);