@processmaker/modeler 1.39.5 → 1.39.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/modeler",
-  "version": "1.39.5",
+  "version": "1.39.6",
   "scripts": {
     "serve": "vue-cli-service serve",
     "test:unit": "vue-cli-service test:unit",

package/src/components/crown/crownButtons/previewButton.vue

@@ -0,0 +1,40 @@
+<template>
+  <crown-button
+    v-if="node.isBpmnType(...validPreviewElements)"
+    :title="$t('Preview')"
+    role="menuitem"
+    id="preview-button"
+    aria-label="Preview"
+    @click="preview()"
+    v-b-tooltip.hover.viewport.d50="{ customClass: 'no-pointer-events' }"
+  >
+    <i class="fas fa-eye cog-container--button"/>
+  </crown-button>
+</template>
+
+<script>
+import trashIcon from '@/assets/trash-alt-solid.svg';
+import CrownButton from '@/components/crown/crownButtons/crownButton';
+import validPreviewElements from '@/components/crown/crownButtons/validPreviewElements';
+
+export default {
+  components: { CrownButton },
+  props: { graph: Object, shape: Object, node: Object },
+  data() {
+    return {
+      trashIcon,
+      validPreviewElements,
+    };
+  },
+  computed: {
+    isPoolLane() {
+      return this.node.type === 'processmaker-modeler-lane';
+    },
+  },
+  methods: {
+    preview() {
+      this.$emit('previewNode', this.node);
+    },
+  },
+};
+</script>

package/src/components/crown/crownButtons/validPreviewElements.js

@@ -0,0 +1,11 @@
+const validPreviewElements = [
+  'bpmn:Task',
+  'bpmn:UserTask',
+  'bpmn:GlobalTask',
+  'bpmn:CallActivity',
+  'bpmn:ManualTask',
+  'bpmn:ScriptTask',
+  'bpmn:ServiceTask',
+];
+
+export default validPreviewElements;

package/src/components/crown/crownConfig/crownConfig.vue

@@ -62,6 +62,13 @@
       v-on="$listeners"
     />
 
+    <preview-button
+      :graph="graph"
+      :shape="shape"
+      :node="node"
+      v-on="$listeners"
+    />
+
     <b-modal
       :no-fade="runningInCypressTest"
       id="modal-prevent-closing"
@@ -79,6 +86,7 @@
 </template>
 
 <script>
+import PreviewButton from '@/components/crown/crownButtons/previewButton';
 import DeleteButton from '@/components/crown/crownButtons/deleteButton';
 import GenericFlowButton from '@/components/crown/crownButtons/genericFlowButton';
 import AssociationFlowButton from '@/components/crown/crownButtons/associationFlowButton';
@@ -97,6 +105,7 @@ import runningInCypressTest from '@/runningInCypressTest';
 export default {
   components: {
     CrownDropdowns,
+    PreviewButton,
     DeleteButton,
     GenericFlowButton,
     AssociationFlowButton,

package/src/components/inspectors/NoPreviewAvailable.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="no-preview">
+    <img :src="noPreviewImg" alt="no preview">
+    <h1>No Screen Asigned</h1>
+    <h2>This is a placeholder screen. Please, assign a screen to this task.</h2>
+  </div>
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {
+      noPreviewImg: require('@/assets/noPreviewImage.png'),
+    };
+  },
+};
+</script>
+
+<style scoped>
+.no-preview {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: #44494E;
+  padding: 5px;
+}
+
+.no-preview img {
+  max-width: 50%;
+  width: auto;
+  padding-bottom: 150px;
+}
+
+.no-preview h1 {
+  text-align: center;
+  font-weight: bold;
+  font-size: xx-large;
+  margin-bottom: 50px;
+}
+
+.no-preview h2 {
+  text-align: center;
+  font-size: x-large;
+}
+</style>

package/src/components/inspectors/PreviewPanel.vue

@@ -0,0 +1,148 @@
+<template>
+  <b-col
+    v-show="visible"
+    id="preview_panel"
+    class="pl-0 h-100 overflow-hidden preview-column"
+    :style="{ maxWidth: width + 'px' }"
+    @mousedown="onMouseDown"
+    @mouseup="onMouseUp"
+    @mousemove="onMouseMove"
+    data-test="preview-column"
+  >
+    <b-row class="control-bar">
+      <b-col cols="9">
+        <div>
+          <i v-show = "selectedPreview == 1" class="fas fa-file-alt"/>
+          <b v-show = "selectedPreview == 2"> {} </b>
+          <b-dropdown
+            variant="ellipsis"
+            no-caret
+            no-flip
+            lazy
+            class="dropdown-right"
+            style="margin-top:-10px"
+            v-model="selectedPreview"
+          >
+            <template #button-content>
+              <i class="fas fa-sort-down" />
+            </template>
+
+            <b-dropdown-item key="1" class="ellipsis-dropdown-item mx-auto" @click="onSelectedPreview(1)">
+              <div class="ellipsis-dropdown-content">
+                <b class="pr-1 fa-fw fas fa-file-alt" />
+                <span>{{ $t('Document') }}</span>
+              </div>
+            </b-dropdown-item>
+
+            <b-dropdown-item key="2" class="ellipsis-dropdown-item mx-auto" @click="onSelectedPreview(2)">
+              <div class="ellipsis-dropdown-content">
+                <b class="pr-1 fa-fw">{ }</b>
+                <span>{{ $t('Object') }}</span>
+              </div>
+            </b-dropdown-item>
+          </b-dropdown>
+          <span>{{ $t('Preview') }} - {{ taskTitle }}</span>
+        </div>
+      </b-col>
+      <b-col class="actions">
+        <div>
+          <i class="fas fa-external-link-alt"/>
+          <i class="fas fa-times" @click="onClose()" />
+        </div>
+      </b-col>
+    </b-row>
+
+    <b-row>
+      <div style="background-color: #0074D9; height: 20px; width: 100%">&nbsp;</div>
+    </b-row>
+
+    <b-row>
+      <div class="item-title"> {{ screenTitle }} </div>
+      <div class="task-title"> {{ taskTitle }} </div>
+    </b-row>
+
+    <no-preview-available/>
+  </b-col>
+
+</template>
+
+<script>
+import store from '@/store';
+import NoPreviewAvailable from '@/components/inspectors/NoPreviewAvailable';
+
+export default {
+  props: ['nodeRegistry', 'visible'],
+  components: {NoPreviewAvailable},
+  data() {
+    return {
+      data: {},
+      selectedPreview: '1',
+      taskTitle: '',
+      screenTitle: '',
+      width: 400,
+      isDragging: false,
+      currentPos: 400,
+    };
+  },
+  watch: {
+    highlightedNode() {
+      document.activeElement.blur();
+      this.prepareData();
+    },
+    'highlightedNode.definition'(current, previous) { this.handleAssignmentChanges(current, previous); },
+    'highlightedNode.definition.assignmentLock'(current, previous) { this.handleAssignmentChanges(current, previous); },
+    'highlightedNode.definition.allowReassignment'(current, previous) { this.handleAssignmentChanges(current, previous); },
+    'highlightedNode.definition.assignedUsers'(current, previous) { this.handleAssignmentChanges(current, previous); },
+    'highlightedNode.definition.assignedGroups'(current, previous) { this.handleAssignmentChanges(current, previous); },
+    'highlightedNode.definition.assignmentRules'(current, previous) { this.handleAssignmentChanges(current, previous); },
+  },
+  computed: {
+    highlightedNode() {
+      return store.getters.highlightedNodes[0];
+    },
+  },
+  methods: {
+    prepareData() {
+      if (!this.highlightedNode) {
+        return {};
+      }
+
+      this.taskTitle = this?.highlightedNode?.definition?.name;
+    },
+
+    handleAssignmentChanges(currentValue, previousValue) {
+      if (currentValue === previousValue) {
+        return;
+      }
+      this.prepareData();
+    },
+
+    onSelectedPreview(item) {
+      this.selectedPreview = item;
+    },
+    previewNode(node) {
+      this.taskTitle = node?.name;
+      this.showPanel = true;
+    },
+    onClose() {
+      this.$emit('togglePreview', false);
+    },
+    onMouseDown(event) {
+      this.isDragging = true;
+      this.currentPos = event.x;
+    },
+    onMouseUp() {
+      this.isDragging = false;
+    },
+    onMouseMove(event) {
+      if (this.isDragging) {
+        const dx = this.currentPos - event.x;
+        this.currentPos = event.x;
+        this.width = parseInt(this.width) + dx;
+        this.$emit('previewResize', this.width);
+      }
+    },
+  },
+};
+</script>
+<style lang="scss" src="./preview_panel.scss" scoped />

package/src/components/inspectors/preview_panel.scss

@@ -0,0 +1,63 @@
+$inspector-column-max-width: 400px;
+$inspector-column-min-width: 400px;
+
+#preview_panel::after {
+  display: flex;
+  content: '';
+  left: 0;
+  width: 5px;
+  height: 100%;
+  cursor: ew-resize;
+}
+
+.preview-column {
+  max-width: $inspector-column-max-width;
+  resize: both;
+  overflow:auto;
+  background-color: #F5F5F5;
+  border-left: 8px solid #EBEEF2;
+}
+
+.paneiframe {
+  display:block;
+  width:100%;
+}
+
+.preview-column .control-bar {
+  background-color: white;
+  padding: 0 5px 0 5px;
+  color: #7f7f7f;
+}
+
+.preview-column .control-bar .actions {
+  text-align: right;
+}
+
+.preview-column .control-bar .actions div {
+  width: 100%;
+  text-align: right;
+}
+
+.preview-column .control-bar .actions div i {
+  width: 20px;
+  cursor: pointer;
+}
+
+.item-title {
+  margin-top: 15px;
+  width: 100%;
+  height: 30px;
+  font-size: larger;
+  text-align: center;
+  align-items: center;
+  color: #7f7f7f;
+}
+
+.task-title {
+  width: 100%;
+  height: 60px;
+  font-size: xx-large;
+  font-weight: bold;
+  text-align: center;
+  color: #6c757d;
+}

package/src/components/modeler/Modeler.vue

@@ -50,9 +50,18 @@
       </b-col>
 
       <InspectorButton
-        v-if="showComponent"
+        ref="inspector-button"
+        v-if="showComponent && showInspectorButton"
         :showInspector="isOpenInspector"
-        @toggleInspector="handleToggleInspector"
+        @toggleInspector="[handleToggleInspector($event), setInspectorButtonPosition($event)]"
+        :style="{ right: inspectorButtonRight + 'px' }"
+      />
+
+      <PreviewPanel ref="preview-panel"
+        @togglePreview="[handleTogglePreview($event), setInspectorButtonPosition($event)]"
+        @previewResize="setInspectorButtonPosition"
+        :visible="isOpenPreview"
+        :nodeRegistry="nodeRegistry"
       />
 
       <InspectorPanel
@@ -101,6 +110,7 @@
         :is-idle="requestIdleNodes.includes(node.definition.id)"
         @add-node="addNode"
         @remove-node="removeNode"
+        @previewNode="[handlePreview($event), setInspectorButtonPosition($event)]"
         @set-cursor="cursor = $event"
         @set-pool-target="poolTarget = $event"
         @unset-pools="unsetPools"
@@ -159,6 +169,7 @@ import store from '@/store';
 import nodeTypesStore from '@/nodeTypesStore';
 import InspectorButton from '@/components/inspectors/inspectorButton/InspectorButton.vue';
 import InspectorPanel from '@/components/inspectors/InspectorPanel';
+import PreviewPanel from '@/components/inspectors/PreviewPanel';
 import undoRedoStore from '@/undoRedoStore';
 import { Linter } from 'bpmnlint';
 import linterConfig from '../../../.bpmnlintrc';
@@ -206,6 +217,7 @@ import Selection from './Selection';
 
 export default {
   components: {
+    PreviewPanel,
     ToolBar,
     ExplorerRail,
     InspectorButton,
@@ -282,6 +294,7 @@ export default {
       miniMapOpen: false,
       panelsCompressed: false,
       isOpenInspector: false,
+      isOpenPreview: false,
       isGrabbing: false,
       isRendering: false,
       allWarnings: [],
@@ -300,6 +313,8 @@ export default {
       isSelecting: false,
       isIntoTheSelection: false,
       dragStart: null,
+      showInspectorButton: true,
+      inspectorButtonRight: 65,
     };
   },
   watch: {
@@ -364,8 +379,30 @@ export default {
       }
     },
     handleToggleInspector(value) {
+      this.showInspectorButton = !(value ?? true);
       this.isOpenInspector = value;
     },
+    handlePreview(node) {
+      this.$refs['preview-panel'].previewNode(node);
+      this.handleTogglePreview(true) ;
+    },
+    handleTogglePreview(value) {
+      this.isOpenPreview = value;
+    },
+    setInspectorButtonPosition() {
+      const previewWidth = this.$refs['preview-panel'].width;
+      if (this.isOpenInspector) {
+        return;
+      }
+
+      if (this.isOpenPreview && !this.isOpenInspector) {
+        this.inspectorButtonRight = 65 + previewWidth;
+      }
+
+      if (!this.isOpenPreview && !this.isOpenInspector) {
+        this.inspectorButtonRight = 65;
+      }
+    },
     isAppleOS() {
       return typeof navigator !== 'undefined' && /Mac|iPad|iPhone/.test(navigator.platform);
     },