@processmaker/modeler 1.42.1 → 1.43.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/modeler",
-  "version": "1.42.1",
+  "version": "1.43.0",
   "scripts": {
     "serve": "vue-cli-service serve --mode development",
     "test:unit": "vue-cli-service test:unit",

package/src/components/railBottom/controls/SubmenuPopper/SubmenuPopper.vue

@@ -37,7 +37,7 @@
         <span />
       </div>
       <i v-if="!containsSvg(data.icon)" :class="data.icon" class="fa-lg"/>
-      <inline-svg :src="data.icon" />
+      <inline-svg v-else :src="data.icon" />
     </a>
   </popper>
   <a v-else class="control-submenu-item"
@@ -46,7 +46,7 @@
     v-b-tooltip.hover.viewport.d50="{ customClass: 'no-pointer-events' }"
   >
     <i v-if="!containsSvg(data.icon)" :class="data.icon" class="fa-lg"/>
-    <inline-svg :src="data.icon" />
+    <inline-svg v-else :src="data.icon" />
   </a>
 </template>
 
@@ -101,6 +101,10 @@ export default ({
       width: 24px;
       height: 24px;
     }
+    & > i {
+      color: #000000;
+      padding: 5px;
+    }
     &.active {
       background-color: #EBEEF2;
     }

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

@@ -33,7 +33,14 @@ export default {
   },
   computed: {
     pinnedObjects() {
-      return nodeTypesStore.getters.getPinnedNodeTypes;
+      const pinnedNodeTypes = nodeTypesStore.getters.getPinnedNodeTypes;
+
+      // Filter pinnedNodeTypes to exclude objects with PM Blocks type.
+      const filteredPinnedNodeTypes = pinnedNodeTypes.filter(obj => {
+        return !obj.type?.includes('processmaker-pm-block');
+      });
+
+      return filteredPinnedNodeTypes; 
     },
     objects() {
       return nodeTypesStore.getters.getNodeTypes;

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

@@ -1,11 +1,51 @@
 <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';
+import iconHelper from '@/mixins/iconHelper';
 
 export default {
   name: 'PmBlocksLoop',
-  mixins: [clickAndDrop],
+  mixins: [clickAndDrop, iconHelper],
+  data() {
+    return {
+      pinIcon,
+      pinFillIcon,
+      showPin: false,
+    };
+  },
+  created() {
+    nodeTypesStore.dispatch('getUserPinnedObjects');
+  },
+  methods: {
+    blockAlreadyPinned(object, type) {
+      return !!this.pinnedBlocks.find(obj => obj.type === type);
+    },
+    unPin(object) {
+      this.deselect();
+      return nodeTypesStore.dispatch('removeUserPinnedObject', object);
+    },
+    addPin(object) {
+      this.deselect();
+      return nodeTypesStore.dispatch('addUserPinnedObject', object);
+    },
+  },
   computed: {
+    pinnedBlocks() {
+      const pinnedNodeTypes = nodeTypesStore.getters.getPinnedNodeTypes;
+
+      //Filter pinnedNodeTypes to only return objects with PM Blocks type.
+      const filteredPinnedNodeTypes = pinnedNodeTypes.filter(obj => {
+        return obj.type?.includes('processmaker-pm-block');
+      });
+
+      return filteredPinnedNodeTypes; 
+    },
+    unpinnedBlocks() {
+      const objects = this.pmBlockNodeTypes;
+      return objects.filter((obj) => !this.pinnedBlocks.some(pinnedObj => pinnedObj.type === obj.type));
+    },
     pmBlockNodeTypes() {
       return nodeTypesStore.getters.getPmBlockNodeTypes;
     },
@@ -25,30 +65,78 @@ export default {
       <template v-for="object in filteredPmBlockNodes">
         <div
           class="node-types__item"
+          :data-test="object.type"
           :key="object.id"
+          @mouseover="showPin = true"
+          @mouseleave="showPin = false"
           @click.stop="onClickHandler($event, object)"
         >
           <div class="d-flex">
             <i v-if="!object.svgIcon" class="node-types__item__icon" :class="object.customIcon"/>
             <img v-else class="node-types__item__icon" :src="object.svgIcon" :alt="$t(object.label)">
             <label>{{ $t(object.label) }}</label>
+            <img
+              v-if="blockAlreadyPinned(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>
         </div>
       </template>
     </div>
     <template v-if="filteredPmBlockNodes.length === 0 && !searchTerm">
-      <div class="pmBlocksContainer p-2">
-        <template v-for="nodeType in pmBlockNodeTypes">
+      <div class="pinnedBlocks" v-if="pinnedBlocks.length > 0">
+        <p>{{ $t('Pinned PM Blocks') }}</p>
+        <template v-for="pinnedBlock in pinnedBlocks">
           <div
-            class="pm-block-node-types__item p-2 d-block"
+            class="node-types__item"
+            :data-test="pinnedBlock.type"
+            :key="pinnedBlock.id"
+            @mouseover="showPin = true"
+            @mouseleave="showPin = false"
+            @click.stop="onClickHandler($event, pinnedBlock)"
+          >
+            <i v-if="!containsSvg(pinnedBlock.icon)" :class="pinnedBlock.customIcon" class="fa-lg"/>
+            <img v-else class="node-types__item__icon" :src="pinnedBlock.svgIcon" :alt="$t(pinnedBlock.label)">
+            <span>{{ $t(pinnedBlock.label) }}</span>
+            <img
+              :src="pinFillIcon"
+              class="pinIcon"
+              alt="Pin/Unpin Element"
+              @click="unPin(pinnedBlock)"
+            >
+          </div>
+        </template>
+      </div>
+      <div class="objectCategory">
+        <p>{{ $t('PM Block Category') }}</p>
+        <template v-for="nodeType in unpinnedBlocks">
+          <div
+            class="node-types__item"
+            :data-test="nodeType.type"
             :key="nodeType.id"
+            @mouseover="showPin = true"
+            @mouseleave="showPin = false"
             @click.stop="onClickHandler($event, nodeType)"
           >
-            <div class="d-flex">
-              <i v-if="!nodeType.svgIcon" class="node-types__item__icon" :class="nodeType.customIcon"/>
-              <img v-else class="node-types__item__icon" :src="nodeType.svgIcon" :alt="$t(nodeType.label)">
-              <label>{{ $t(nodeType.label) }}</label>
-            </div>
+            <i v-if="!containsSvg(nodeType.icon)" :class="nodeType.customIcon" class="fa-lg"/>
+            <img v-else class="node-types__item__icon" :src="nodeType.svgIcon" :alt="$t(nodeType.label)">
+            <span>{{ $t(nodeType.label) }}</span>
+            <img
+              :src="pinIcon"
+              class="pinIcon"
+              alt="Pin/Unpin Element"
+              @click="addPin(nodeType)"
+            >
           </div>
         </template>
       </div>
@@ -57,6 +145,11 @@ export default {
 </template>
 
 <style lang="scss">
+#pmBlockNodeTypesList {
+  .pinnedBlocks {
+    margin-bottom: 1rem;
+  }
+}
 .pm-block-node-types {
   &__item {
     display: block;
@@ -66,6 +159,9 @@ export default {
     margin-bottom: 8px;
     &:hover {
       background-color: #EBEEF2;
+      .pinIcon {
+        background-color: #DADDDF;
+      }
     }
     &__icon {
       width: 1.5rem;
@@ -81,6 +177,11 @@ export default {
       font-size: 13px;
       color:#6C757D;
     }
+    .pinIcon {
+      margin-left: auto;
+      border-radius: 4px;
+      padding: 0.3rem;
+    }
   }
 }
 </style>

package/src/mixins/clickAndDrop.js

@@ -86,6 +86,9 @@ export default {
         tempGhost.src = control.icon;
       } else {
         tempGhost.setAttribute('class', control.icon);
+        tempGhost.style.fontSize = '42px';
+        tempGhost.style.width = '42px';
+        tempGhost.style.height = '42px';
       }
 
       document.body.appendChild(tempGhost);