@processmaker/modeler 1.31.0 → 1.32.0

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

@@ -0,0 +1,59 @@
+<template>
+  <button
+    type="button"
+    :disabled="numberOfErrors === 0"
+    @click.prevent="handleOpen"
+    class="issue-box"
+  >
+    <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,51 @@
+<template>
+  <div class="validate-container">
+    <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: 1;
+  }
+
+  &-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,100 @@
+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)) {
+        document.removeEventListener('mousemove', this.setDraggingPosition);
+        document.body.removeChild(this.movedElement);
+        this.$emit('onSetCursor', 'none');
+        nodeTypesStore.commit('clearSelectedNode');
+        nodeTypesStore.commit('setGhostNode', null);
+        this.wasClicked = false;
+        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);
+      });
+    },
+    onCreateElement(event){
+      if (this.wasClicked && this.selectedItem) {
+        if (this.parent) {
+          this.parent = null;
+        }
+        this.$emit('onCreateElement', { event, control: this.selectedItem });
+        this.$emit('onSetCursor', 'none');
+        event.preventDefault();
+        this.wasClicked = false;
+      }
+    },
+    setDraggingPosition({ pageX, pageY }) {
+      let tempGhost = this.movedElement;
+      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;
+    },
+  },
+  computed: {
+    selectedItem() {
+      return nodeTypesStore.getters.getSelectedNode;
+    },
+    movedElement() {
+      return nodeTypesStore.getters.getGhostNode;
+    },
+  },
+};

package/src/mixins/highlightConfig.js

@@ -1,4 +1,6 @@
+/* eslint-disable no-unused-vars */
 import cloneDeep from 'lodash/cloneDeep';
+import store from '@/store';
 
 const errorHighlighter = {
   highlighter: {
@@ -27,6 +29,31 @@ const defaultHighlighter = {
   },
 };
 
+const completedHighlighter = {
+  highlighter: {
+    name: 'stroke',
+    options: {
+      attrs: {
+        stroke: '#1572C2',
+        'stroke-width': 3,
+      },
+    },
+  },
+};
+
+const inProgressHighlighter = {
+  highlighter: {
+    name: 'stroke',
+    options: {
+      attrs: {
+        stroke: '#00875A',
+        'stroke-width': 3,
+        'stroke-dasharray': '4 4',
+      },
+    },
+  },
+};
+
 export default {
   props: [
     'highlighted',
@@ -34,6 +61,8 @@ export default {
     'hasError',
     'autoValidate',
     'borderOutline',
+    'isCompleted',
+    'isInProgress',
   ],
   data() {
     return {
@@ -68,6 +97,18 @@ export default {
   },
   methods: {
     setShapeHighlight() {
+      if (store.getters.isReadOnly) {
+        this.shapeView.unhighlight(this.shapeBody, completedHighlighter);
+        if (this.isCompleted) {
+          this.shapeView.highlight(this.shapeBody, completedHighlighter);
+        }
+        this.shapeView.unhighlight(this.shapeBody, inProgressHighlighter);
+        if (this.isInProgress) {
+          this.shapeView.highlight(this.shapeBody, inProgressHighlighter);
+        }
+        return;
+      }
+
       if (!this.shapeView) {
         return;
       }
@@ -84,7 +125,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 +135,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

@@ -40,6 +40,9 @@ export default {
       }
     },
     highlighted(highlighted) {
+      if (store.getters.isReadOnly) {
+        return;
+      }
       if (highlighted) {
         this.shape.attr({
           line: { stroke: '#5096db' },
@@ -255,9 +258,10 @@ export default {
 
     this.$once('click', () => {
       this.$nextTick(() => {
-        if (store.getters.isReadOnly === false) {
-          this.setupLinkTools();
+        if (store.getters.isReadOnly) {
+          return;
         }
+        this.setupLinkTools();
       });
     });
 

package/src/nodeTypesStore.js

@@ -12,6 +12,8 @@ export default new Vuex.Store({
     filteredNodeTypes: [],
     explorerOpen: false,
     searchTerm: '',
+    selectedNode: null,
+    ghostNode: null,
   },
   getters: {
     getNodeTypes: state => state.nodeTypes,
@@ -19,6 +21,8 @@ export default new Vuex.Store({
     getFilteredNodeTypes: state => state.filteredNodeTypes,
     getExplorerOpen: state => state.explorerOpen,
     getSearchTerm: state => state.searchTerm,
+    getSelectedNode: state => state.selectedNode,
+    getGhostNode: state => state.ghostNode,
   },
   mutations: {
     setNodeTypes(state, nodeTypes) {
@@ -37,6 +41,8 @@ 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.sort((node1, node2) => node1.rank - node2.rank);
     },
     setUnpinNode(state, payload) {
@@ -61,6 +67,15 @@ export default new Vuex.Store({
     toggleExplorer(state) {
       state.explorerOpen = !state.explorerOpen;
     },
+    setSelectedNode(state, payload) {
+      state.selectedNode = payload;
+    },
+    clearSelectedNode(state) {
+      state.selectedNode = null;
+    },
+    setGhostNode(state, payload) {
+      state.ghostNode = payload;
+    },
   },
   actions: {
     getUserPinnedObjects({ commit }) {