@processmaker/modeler 1.30.3 → 1.31.0

package/src/components/rails/explorer-rail/explorer-rail.scss

@@ -0,0 +1,55 @@
+$controls-column-max-width: 340px;
+$controls-transition: 0.3s;
+$secondary-color-nav: #6c757d;
+
+#explorer-rail {
+	overflow: hidden;
+	max-width: $controls-column-max-width;
+	background-color: white;
+	width: 100%;
+	height: 80%;
+	transition: all $controls-transition ease-out;
+	z-index: 2;
+	border-radius: 4px;
+	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
+	padding-left: 1rem;
+	overflow-y: auto;
+}
+
+.rail-menu {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 0.5rem 0;
+	.nav-link {
+		color: $secondary-color-nav;
+		&.active {
+			font-weight: bold;
+			border-bottom: 2px solid #1572C2;
+			color: #000;
+		}
+	}
+
+	.close--container {
+		width: 50px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		height: 40px;
+		&:hover {
+			cursor: pointer;
+		}
+	}
+}
+
+.node-types {
+	&__container {
+		padding: 0.5rem 1rem;
+		p {
+			font-size: 13px;
+			line-height: 19px;
+			color: #000;
+		}
+	}
+}
+

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

@@ -0,0 +1,93 @@
+<script>
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
+import nodeTypesStore from '@/nodeTypesStore';
+import FilterNodeTypes from '@/components/rails/explorer-rail/filterNodeTypes/filterNodeTypes.vue';
+import NodeTypesLoop from '@/components/rails/explorer-rail/nodeTypesLoop/nodeTypesLoop.vue';
+
+export default {
+  name: 'ExplorerRail',
+  props: {
+    explorerExpanded: {
+      type: Boolean,
+    },
+    nodeTypes: {
+      type: Array,
+    },
+  },
+  components: {
+    FontAwesomeIcon,
+    FilterNodeTypes,
+    NodeTypesLoop,
+  },
+  data() {
+    return {
+      tabs: [{
+        idx: 0,
+        label: 'Add Object',
+      }, {
+        idx: 1,
+        label: 'PM Blocks',
+      }],
+      tabIndex: 0,
+    };
+  },
+  computed: {
+    explorerOpen() {
+      return nodeTypesStore.getters.getExplorerOpen;
+    },
+  },
+  created() {
+    nodeTypesStore.commit('setNodeTypes', this.nodeTypes);
+  },
+  methods: {
+    faTimes() {
+      return faTimes;
+    },
+    /**
+     * @param {string} idx
+     * @return void
+     */
+    setTabIndex(idx) {
+      if (this.tabIndex === idx) return;
+      this.tabIndex = idx;
+      this.clearFilteredObjects();
+    },
+    closeRail() {
+      nodeTypesStore.commit('closeExplorer');
+      this.clearFilteredObjects();
+    },
+    clearFilteredObjects() {
+      nodeTypesStore.commit('clearFilteredNodes');
+    },
+  },
+};
+</script>
+
+<template>
+  <div id="explorer-rail" data-test="explorer-rail" v-if="explorerOpen">
+    <div class="rail-menu">
+      <b-tabs class="tabs--container" :no-nav-style="true">
+        <template v-for="tab in tabs">
+          <b-tab :title="$t(tab.label)" :active="tab.idx === tabIndex"
+            @click="setTabIndex(tab.idx)" :key="tab.idx"
+          />
+        </template>
+      </b-tabs>
+      <div class="close--container" @click="closeRail()">
+        <font-awesome-icon :icon="faTimes()"/>
+      </div>
+    </div>
+    <div class="node-types__container" v-if="tabIndex === 0">
+      <filter-node-types />
+      <node-types-loop
+        v-on="$listeners"
+      />
+    </div>
+    <div class="pm-blocks__container">
+      <!--   Here goes the PM Blocks   -->
+    </div>
+  </div>
+</template>
+
+<style lang="scss" src="./explorer-rail.scss"></style>

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,234 @@
+<script>
+import pinIcon from '@/assets/pin-angle.svg';
+import pinFillIcon from '@/assets/pin-angle-fill.svg';
+import nodeTypesStore from '@/nodeTypesStore';
+
+export default {
+  name: 'NodeTypesLoop',
+  data() {
+    return {
+      pinIcon,
+      pinFillIcon,
+      showPin: false,
+      wasClicked: false,
+      element: null,
+      selectedItem: null,
+      xOffset: 0,
+      yOffset: 0,
+      movedElement: null,
+      helperStyles: {
+        backgroundColor:'#ffffff',
+        position: 'absolute',
+        height: '40px',
+        width: '40px',
+        zIndex: '10',
+        opacity: '0.5',
+        pointerEvents: 'none',
+      },
+    };
+  },
+  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);
+    },
+    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 === control.type) {
+        document.removeEventListener('mousemove', this.setDraggingPosition);
+        document.body.removeChild(this.movedElement);
+        this.$emit('onSetCursor', 'none');
+        this.selectedItem = null;
+        this.movedElement = null;
+        this.wasClicked = false;
+        return;
+      }
+      this.wasClicked = true;
+      this.element = control;
+      this.$emit('onSetCursor', 'crosshair');
+      this.selectedItem = 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.selectedItem = null;
+        this.movedElement = null;
+        this.onCreateElement(message);
+      });
+    },
+    createDraggingHelper(event, control) {
+      if (this.movedElement) {
+        document.removeEventListener('mousemove', this.setDraggingPosition);
+        document.body.removeChild(this.movedElement);
+        this.movedElement = null;
+      }
+      const sourceElement = event.target;
+      this.movedElement = document.createElement('img');
+      Object.keys(this.helperStyles).forEach((property) => {
+        this.movedElement.style[property] = this.helperStyles[property];
+      });
+      this.movedElement.src = control.icon;
+      document.body.appendChild(this.movedElement);
+      this.xOffset = event.clientX - sourceElement.getBoundingClientRect().left;
+      this.yOffset = event.clientY - sourceElement.getBoundingClientRect().top;
+    },
+    setDraggingPosition({ pageX, pageY }) {
+      this.movedElement.style.left = pageX  + 'px';
+      this.movedElement.style.top = pageY + 'px';
+    },
+    onCreateElement(event){
+      if (this.wasClicked && this.element) {
+        this.$emit('onCreateElement', { event, control: this.element });
+        this.$emit('onSetCursor', 'none');
+        event.preventDefault();
+        this.wasClicked = false;
+      }
+    },
+  },
+  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

@@ -7,62 +7,6 @@
       <div class="mr-3">
         <align-buttons @save-state="$emit('save-state')" />
 
-        <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>
 
         <div class="btn-group btn-group-sm mr-2" role="group" aria-label="Additional controls">
           <b-button
@@ -74,16 +18,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">

package/src/main.js

@@ -12,11 +12,17 @@ import ScreenBuilder from '@processmaker/screen-builder';
 import Multiselect from '@processmaker/vue-multiselect/src/Multiselect';
 
 import '@fortawesome/fontawesome-free/css/all.min.css';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { faBoundaryEvent } from '@/components/crown/crownButtons/icons';
+
+library.add(faBoundaryEvent);
 
 Vue.use(BootstrapVue);
 Vue.use(VueDeepSet);
 Vue.use(VueI18Next);
 Vue.use(ScreenBuilder);
+Vue.component('font-awesome-icon', FontAwesomeIcon);
 Vue.component('Multiselect', Multiselect);
 
 Vue.config.productionTip = false;

package/src/mixins/linkConfig.js

@@ -4,6 +4,7 @@ import debounce from 'lodash/debounce';
 import { invalidNodeColor, setShapeColor, validNodeColor } from '@/components/nodeColors';
 import { getDefaultAnchorPoint } from '@/portsUtils';
 import resetShapeColor from '@/components/resetShapeColor';
+import store from '@/store';
 
 const endpoints = {
   source: 'source',
@@ -254,7 +255,9 @@ export default {
 
     this.$once('click', () => {
       this.$nextTick(() => {
-        this.setupLinkTools();
+        if (store.getters.isReadOnly === false) {
+          this.setupLinkTools();
+        }
       });
     });
 

package/src/mixins/resizeConfig.js

@@ -28,7 +28,9 @@ export default {
       }
 
       if (highlighted) {
-        this.addResizeAnchors();
+        if (store.getters.isReadOnly === false) {
+          this.addResizeAnchors();
+        }
         this.calculateElementLimits();
         this.updateAnchorPointPosition();
       } else {

package/src/nodeTypesStore.js

@@ -0,0 +1,118 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import { uniqueId, uniqBy } from 'lodash';
+import { BOTTOM } from '@/components/rails/explorer-rail/rankConstants';
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+  state: {
+    nodeTypes: [],
+    pinnedNodeTypes: [],
+    filteredNodeTypes: [],
+    explorerOpen: false,
+    searchTerm: '',
+  },
+  getters: {
+    getNodeTypes: state => state.nodeTypes,
+    getPinnedNodeTypes: state => state.pinnedNodeTypes,
+    getFilteredNodeTypes: state => state.filteredNodeTypes,
+    getExplorerOpen: state => state.explorerOpen,
+    getSearchTerm: state => state.searchTerm,
+  },
+  mutations: {
+    setNodeTypes(state, nodeTypes) {
+      state.nodeTypes = nodeTypes
+        .filter(nodeType => nodeType.control)
+        .map(nodeType => ({
+          id: uniqueId('nodeType_'),
+          type: nodeType.id,
+          icon: nodeType.icon,
+          label: nodeType.label,
+          bpmnType: nodeType.bpmnType,
+          rank: nodeType.rank || BOTTOM,
+          items: nodeType.items?.map(item => ({ ...item, type: item.id })),
+        }))
+        .sort((node1, node2) => node1.rank - node2.rank);
+    },
+    setPinnedNodes(state, payload) {
+      state.pinnedNodeTypes.push(payload);
+      state.pinnedNodeTypes.sort((node1, node2) => node1.rank - node2.rank);
+    },
+    setUnpinNode(state, payload) {
+      state.pinnedNodeTypes = state.pinnedNodeTypes.filter(node => node !== payload);
+    },
+    setFilteredNodeTypes(state, searchTerm) {
+      const pinnedNodeTypes = state.pinnedNodeTypes;
+      const nodeTypes = state.nodeTypes;
+      state.searchTerm = searchTerm;
+      const allNodes = uniqBy([...pinnedNodeTypes, ...nodeTypes], 'id');
+      state.filteredNodeTypes = allNodes.filter(node => {
+        return node.label.toLowerCase().includes(searchTerm.toLowerCase());
+      });
+    },
+    clearFilteredNodes(state) {
+      state.filteredNodeTypes = [];
+      state.searchTerm = '';
+    },
+    closeExplorer(state) {
+      state.explorerOpen = false;
+    },
+    toggleExplorer(state) {
+      state.explorerOpen = !state.explorerOpen;
+    },
+  },
+  actions: {
+    getUserPinnedObjects({ commit }) {
+      if (!window.ProcessMaker.user) {
+        // For standalone version of Modeler
+        const pinnedNodes = localStorage.pinnedNodes ? JSON.parse(localStorage.pinnedNodes) : [] ;
+        pinnedNodes.forEach(node => {
+          commit('setPinnedNodes', node);
+        });
+        return;
+      }
+      const user = window.ProcessMaker.user ? window.ProcessMaker.user.id : '';
+      window.ProcessMaker.apiClient.get(`/users/${user}/get_pinnned_controls`)
+        .then(({ data }) => {
+          data.forEach(node => {
+            commit('setPinnedNodes', node);
+          });
+        })
+        .catch((e) => {
+          // eslint-disable-next-line no-console
+          console.error(e);
+        });
+    },
+    addUserPinnedObject({ commit, state }, pinnedNode) {
+      commit('setPinnedNodes', pinnedNode);
+      const pinnedNodes = state.pinnedNodeTypes;
+      if (!window.ProcessMaker.user) {
+        // For standalone version of Modeler
+        localStorage.pinnedNodes = JSON.stringify(pinnedNodes);
+        return;
+      }
+      const user = window.ProcessMaker.user ? window.ProcessMaker.user.id : '';
+      window.ProcessMaker.apiClient.put(`/users/${user}/update_pinned_controls`, { pinnedNodes })
+        .catch((e) => {
+          // eslint-disable-next-line no-console
+          console.error(e);
+        });
+    },
+    removeUserPinnedObject({ commit, state }, nodeToUnpin) {
+      commit('setUnpinNode', nodeToUnpin);
+      const pinnedNodes = state.pinnedNodeTypes;
+      if (!window.ProcessMaker.user) {
+        // For standalone version of Modeler
+        localStorage.pinnedNodes = JSON.stringify(pinnedNodes);
+        return;
+      }
+      const user = window.ProcessMaker.user ? window.ProcessMaker.user.id : '';
+      window.ProcessMaker.apiClient.put(`/users/${user}/update_pinned_controls`, { pinnedNodes })
+        .catch((e) => {
+          // eslint-disable-next-line no-console
+          console.error(e);
+        });
+    },
+  },
+});