@processmaker/modeler 1.30.3 → 1.32.0

package/src/components/rails/explorer-rail/filterNodeTypes/filterNodeTypes.vue

@@ -0,0 +1,54 @@
+<script>
+import nodeTypesStore from '@/nodeTypesStore';
+export default {
+  name: 'FilterNodeTypes',
+  data() {
+    return {
+      searchTerm: '',
+      placeholder: this.$t('Seach Objects'),
+    };
+  },
+  watch: {
+    searchTerm(value) {
+      if (value.length === 0) nodeTypesStore.commit('clearFilteredNodes');
+      if (value.length > 0) nodeTypesStore.commit('setFilteredNodeTypes', value);
+    },
+  },
+  computed: {
+    nodeTypes() {
+      const pinnedNodeTypes = nodeTypesStore.getters.getPinnedNodeTypes;
+      const nodeTypes = nodeTypesStore.getters.getNodeTypes;
+      return [...pinnedNodeTypes, ...nodeTypes];
+    },
+  },
+};
+</script>
+
+<template>
+  <div id="searchNodeTypes">
+    <label class="position-relative d-block">
+      <i class="fas fa-search position-absolute h-100 text-muted ml-2" />
+      <b-input :placeholder="placeholder" v-model="searchTerm" />
+    </label>
+  </div>
+
+</template>
+
+<style lang="scss" scoped>
+#searchNodeTypes {
+  i {
+    top: 27%;
+  }
+  input {
+    border: 1px solid #5F666D;
+    border-radius: 4px;
+    margin-bottom: 1rem;
+    font-size: 14px;
+    line-height: 21px;
+    padding-left: 30px;
+    &::placeholder {
+      color: #929FAC;
+    }
+  }
+}
+</style>

package/src/components/rails/explorer-rail/nodeTypesLoop/nodeTypesLoop.vue

@@ -0,0 +1,164 @@
+<script>
+import pinIcon from '@/assets/pin-angle.svg';
+import pinFillIcon from '@/assets/pin-angle-fill.svg';
+import nodeTypesStore from '@/nodeTypesStore';
+import clickAndDrop from '@/mixins/clickAndDrop';
+
+export default {
+  name: 'NodeTypesLoop',
+  mixins: [clickAndDrop],
+  data() {
+    return {
+      pinIcon,
+      pinFillIcon,
+      showPin: false,
+    };
+  },
+  created() {
+    nodeTypesStore.dispatch('getUserPinnedObjects');
+  },
+  methods: {
+    nodeTypeAlreadyPinned(object, type) {
+      return !!this.pinnedObjects.find(obj => obj.type === type);
+    },
+    unPin(object) {
+      return nodeTypesStore.dispatch('removeUserPinnedObject', object);
+    },
+    addPin(object) {
+      return nodeTypesStore.dispatch('addUserPinnedObject', object);
+    },
+  },
+  computed: {
+    pinnedObjects() {
+      return nodeTypesStore.getters.getPinnedNodeTypes;
+    },
+    objects() {
+      return nodeTypesStore.getters.getNodeTypes;
+    },
+    unpinnedObjects() {
+      const objects = this.objects;
+      return objects.filter((obj) => !this.pinnedObjects.some(pinnedObj => pinnedObj.type === obj.type));
+    },
+    filteredNodes() {
+      return nodeTypesStore.getters.getFilteredNodeTypes;
+    },
+    searchTerm() {
+      return nodeTypesStore.getters.getSearchTerm;
+    },
+  },
+};
+</script>
+
+<template>
+  <div id="nodeTypesList">
+    <div id="filteredNodes-container" v-if="filteredNodes.length > 0">
+      <template v-for="object in filteredNodes">
+        <div
+          class="node-types__item"
+          :key="object.id"
+          @mouseover="showPin = true"
+          @mouseleave="showPin = false"
+          @click.stop="onClickHandler($event, object)"
+        >
+          <img class="node-types__item__icon" :src="object.icon" :alt="$t(object.label)">
+          <span>{{ $t(object.label) }}</span>
+          <img
+            v-if="nodeTypeAlreadyPinned(object, object.type)"
+            :src="pinFillIcon"
+            class="pinIcon"
+            alt="Unpin Element"
+            @click="unPin(object)"
+          >
+          <img
+            v-else
+            :src="pinIcon"
+            class="pinIcon"
+            alt="Pin Element"
+            @click="addPin(object)"
+          >
+        </div>
+      </template>
+    </div>
+    <template v-if="filteredNodes.length === 0 && !searchTerm">
+      <div class="pinnedObjects" v-if="pinnedObjects.length > 0">
+        <p>{{ $t('Pinned Objects') }}</p>
+        <template v-for="pinnedObject in pinnedObjects">
+          <div
+            class="node-types__item"
+            :key="pinnedObject.id"
+            @mouseover="showPin = true"
+            @mouseleave="showPin = false"
+            @click.stop="onClickHandler($event, pinnedObject)"
+          >
+            <img class="node-types__item__icon" :src="pinnedObject.icon" :alt="$t(pinnedObject.label)">
+            <span>{{ $t(pinnedObject.label) }}</span>
+            <img
+              :src="pinFillIcon"
+              class="pinIcon"
+              alt="Pin/Unpin Element"
+              @click="unPin(pinnedObject)"
+            >
+          </div>
+        </template>
+      </div>
+      <div class="objectCategory">
+        <p>{{ $t('Object Category') }}</p>
+        <template v-for="nodeType in unpinnedObjects">
+          <div
+            class="node-types__item"
+            :key="nodeType.id"
+            @mouseover="showPin = true"
+            @mouseleave="showPin = false"
+            @click.stop="onClickHandler($event, nodeType)"
+          >
+            <img class="node-types__item__icon" :src="nodeType.icon" :alt="$t(nodeType.label)">
+            <span>{{ $t(nodeType.label) }}</span>
+            <img
+              :src="pinIcon"
+              class="pinIcon"
+              alt="Pin/Unpin Element"
+              @click="addPin(nodeType)"
+            >
+          </div>
+        </template>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style lang="scss">
+#nodeTypesList {
+  .pinnedObjects {
+    margin-bottom: 1rem;
+  }
+}
+.node-types {
+  &__item {
+    display: flex;
+    padding: 0.5rem 0.3rem;
+    align-items: center;
+    border-radius: 4px;
+    user-select: none;
+    &:hover {
+      background-color: #EBEEF2;
+      .pinIcon {
+        background-color: #DADDDF;
+      }
+    }
+    &__icon {
+      width: 1.5rem;
+      height: 1.5rem;
+    }
+    span {
+      margin-left: 0.8rem;
+      font-size: 13px;
+      line-height: 19px;
+    }
+    .pinIcon {
+      margin-left: auto;
+      border-radius: 4px;
+      padding: 0.3rem;
+    }
+  }
+}
+</style>

package/src/components/rails/explorer-rail/rankConstants.js

@@ -0,0 +1 @@
+export const BOTTOM = 5000;

package/src/components/toolbar/ToolBar.vue

@@ -4,65 +4,13 @@
       aria-label="Toolbar" :class="{ 'ignore-pointer': canvasDragPosition }"
     >
       <breadcrumb :breadcrumb-data="breadcrumbData" />
-      <div class="mr-3">
-        <align-buttons @save-state="$emit('save-state')" />
+      <div class="d-flex mr-3">
+        <TopRail
+          :validation-errors="validationErrors"
+          :warnings="warnings"
+        />
 
-        <div class="btn-group btn-group-sm mr-2" role="group" aria-label="Undo/redo controls">
-          <b-button
-            class="btn btn-sm btn-secondary btn-undo"
-            :disabled="!canUndo"
-            data-test="undo"
-            v-b-tooltip.hover
-            :title="$t('Undo')"
-            @click="undo"
-          >
-            <font-awesome-icon :icon="undoIcon" />
-          </b-button>
-
-          <b-button
-            class="btn btn-sm btn-secondary btn-redo"
-            :disabled="!canRedo"
-            data-test="redo"
-            v-b-tooltip.hover
-            :title="$t('Redo')"
-            @click="redo"
-          >
-            <font-awesome-icon :icon="redoIcon" />
-          </b-button>
-        </div>
-
-        <div class="btn-group btn-group-sm mr-2" role="group" aria-label="Zoom controls">
-          <b-button
-            class="btn btn-sm btn-secondary"
-            @click="paperManager.scale = paperManager.scale.sx + scaleStep"
-            data-test="zoom-in"
-            v-b-tooltip.hover
-            :title="$t('Zoom In')"
-          >
-            <font-awesome-icon :icon="plusIcon" />
-          </b-button>
-          <b-button
-            class="btn btn-sm btn-secondary"
-            @click="paperManager.scale = Math.max(minimumScale, paperManager.scale.sx -= scaleStep)"
-            data-test="zoom-out"
-            v-b-tooltip.hover
-            :title="$t('Zoom Out')"
-          >
-            <font-awesome-icon :icon="minusIcon" />
-          </b-button>
-          <b-button
-            v-if="paperManager"
-            class="btn btn-sm btn-secondary"
-            @click="paperManager.scale = initialScale"
-            :disabled="paperManager.scale.sx === initialScale"
-            data-test="zoom-reset"
-            v-b-tooltip.hover
-            :title="$t('Reset to initial scale')"
-          >
-            {{ $t('Reset') }}
-          </b-button>
-          <span v-if="paperManager" class="btn btn-sm btn-secondary scale-value">{{ Math.round(paperManager.scale.sx*100) }}%</span>
-        </div>
+        <align-buttons @save-state="$emit('save-state')" />
 
         <div class="btn-group btn-group-sm mr-2" role="group" aria-label="Additional controls">
           <b-button
@@ -74,16 +22,6 @@
           >
             <font-awesome-icon :icon="panelsCompressed ? expandIcon : compressIcon" />
           </b-button>
-
-          <b-button
-            class="btn btn-sm btn-secondary mini-map-btn ml-auto"
-            data-test="mini-map-btn"
-            @click="miniMapOpen = !miniMapOpen"
-            v-b-tooltip.hover
-            :title="miniMapOpen ? $t('Hide Mini-Map') : $t('Show Mini-Map')"
-          >
-            <font-awesome-icon :icon="miniMapOpen ? minusIcon : mapIcon" />
-          </b-button>
         </div>
         <div class="btn-group btn-group-sm" role="group" aria-label="Publish controls">
           <template v-if="isVersionsInstalled">
@@ -144,23 +82,28 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { faCompress, faExpand, faMapMarked, faMinus, faPlus, faRedo, faUndo, faSave, faCheckCircle, faSpinner } from '@fortawesome/free-solid-svg-icons';
 import undoRedoStore from '@/undoRedoStore';
 import Breadcrumb from '@/components/toolbar/breadcrumb/Breadcrumb';
+import TopRail from '@/components/topRail/TopRail.vue';
 import AlignButtons from '@/components/toolbar/alignButtons/AlignButtons';
 
 export default {
   name: 'tool-bar',
-  components: { Breadcrumb, FontAwesomeIcon, AlignButtons },
-  props: {
-    canvasDragPosition: {},
-    cursor: {},
-    paperManager: {},
-    isRendering: {
-      type: Boolean,
-    },
-    breadcrumbData: {
-      type: Array,
-    },
-    panelsCompressed: Boolean,
+  components: {
+    Breadcrumb,
+    TopRail,
+    FontAwesomeIcon,
+    AlignButtons,
   },
+  props: [
+    'canvasDragPosition',
+    'cursor',
+    'paperManager',
+    'isRendering',
+    'breadcrumbData',
+    'panelsCompressed',
+    'validationErrors',
+    'warnings',
+    'xmlManager',
+  ],
   watch: {
     miniMapOpen(isOpen) {
       this.$emit('toggle-mini-map-open', isOpen);

package/src/components/topRail/TopRail.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="top-rail-container">
+    <ValidateIssue
+      v-show="isOpenIssue"
+      :number-of-errors="numberOfErrors"
+      @openPanel="handleOpenPanel"
+    />
+
+    <ValidateButton @openIssue="handleOpenIssue" />
+
+    <ValidatePanel
+      v-show="isOpenIssue && isOpenPanel"
+      :error-list="errorList"
+      :warnings="warnings"
+    />
+  </div>
+</template>
+
+<script>
+import store from '@/store';
+import { ValidateButton, ValidateIssue, ValidatePanel } from '@/components/topRail/validateControl';
+
+export default {
+  components: {
+    ValidateButton,
+    ValidateIssue,
+    ValidatePanel,
+  },
+  props: {
+    validationErrors: {
+      type: Object,
+      required: true,
+    },
+    warnings: {
+      type: Array,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      isOpenIssue: false,
+      isOpenPanel: false,
+    };
+  },
+  computed: {
+    errorList() {
+      // Get a formatted error list to show in the issue panel
+      return Object.entries(this.validationErrors)
+        .flatMap(([errorKey, errors]) => (
+          errors.flatMap(error => ({
+            ...error,
+            errorKey,
+            ...{ 'errorId': `${error.id}_${error.message.split(' ').join('_')}` },
+          }))
+        ));
+    },
+    numberOfErrors() {
+      // Get the number of errors
+      return this.errorList.length + this.warnings.length;
+    },
+  },
+  watch: {
+    numberOfErrors(newValue) {
+      // Checks the number of errors, if it is "0" hides the panel errors
+      if (newValue === 0) {
+        this.isOpenPanel = false;
+      }
+    },
+  },
+  methods: {
+    /**
+     * Show/hide the issue button
+     * @param {boolean} value
+     */
+    handleOpenIssue(value) {
+      this.isOpenIssue = value;
+      // Set the auto-validate value store
+      store.commit('setAutoValidate', this.isOpenIssue);
+    },
+    /**
+     * Show/hide the issue panel
+     * @param {boolean} value
+     */
+    handleOpenPanel(value) {
+      this.isOpenPanel = value;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss" src="./topRail.scss"></style>

package/src/components/topRail/topRail.scss

@@ -0,0 +1,6 @@
+.top-rail-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 0px 8px;
+}

package/src/components/topRail/validateControl/index.js

@@ -0,0 +1,3 @@
+export { default as ValidateButton } from './validateButton/ValidateButton.vue';
+export { default as ValidateIssue } from './validateIssue/ValidateIssue.vue';
+export { default as ValidatePanel } from './validatePanel/ValidatePanel.vue';

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

@@ -0,0 +1,38 @@
+<template>
+  <button
+    type="button"
+    @click.prevent="handleOpen"
+    :class="['validate-button', { 'validate-button-active': isOpen }]"
+  >
+    <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,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>