@processmaker/modeler 1.39.4 → 1.39.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/modeler",
-  "version": "1.39.4",
+  "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

@@ -2,6 +2,7 @@
   <span data-test="body-container">
     <tool-bar
       v-if="showComponent"
+      ref="tool-bar"
       :canvas-drag-position="canvasDragPosition"
       :cursor="cursor"
       :is-rendering="isRendering"
@@ -12,6 +13,7 @@
       :warnings="allWarnings"
       :xml-manager="xmlManager"
       :validationBar="validationBar"
+      :extra-actions="extraActions"
       @load-xml="loadXML"
       @toggle-panels-compressed="panelsCompressed = !panelsCompressed"
       @toggle-mini-map-open="miniMapOpen = $event"
@@ -21,6 +23,7 @@
       @close="close"
       @save-state="pushToUndoStack"
       @clearSelection="clearSelection"
+      @action="handleToolbarAction"
     />
     <b-row class="modeler h-100">
       <b-tooltip
@@ -47,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
@@ -98,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"
@@ -156,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';
@@ -203,6 +217,7 @@ import Selection from './Selection';
 
 export default {
   components: {
+    PreviewPanel,
     ToolBar,
     ExplorerRail,
     InspectorButton,
@@ -242,6 +257,7 @@ export default {
   mixins: [hotkeys, cloneSelection],
   data() {
     return {
+      extraActions: [],
       pasteInProgress: false,
       cloneInProgress: false,
       internalClipboard: [],
@@ -278,6 +294,7 @@ export default {
       miniMapOpen: false,
       panelsCompressed: false,
       isOpenInspector: false,
+      isOpenPreview: false,
       isGrabbing: false,
       isRendering: false,
       allWarnings: [],
@@ -296,6 +313,8 @@ export default {
       isSelecting: false,
       isIntoTheSelection: false,
       dragStart: null,
+      showInspectorButton: true,
+      inspectorButtonRight: 65,
     };
   },
   watch: {
@@ -354,9 +373,36 @@ export default {
     showComponent: () => store.getters.showComponent,
   },
   methods: {
+    handleToolbarAction(action) {
+      if (action.handler instanceof Function) {
+        action.handler(this);
+      }
+    },
     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);
     },
@@ -689,6 +735,15 @@ export default {
       });
       nodeTypesStore.commit('setPmBlockNodeTypes', this.pmBlockNodes);
     },
+    registerMenuAction(action) {
+      if (!action.value || typeof action.value !== 'string') {
+        throw new Error('Menu action must have a action.value');
+      }
+      if (!action.content || typeof action.content !== 'string') {
+        throw new Error('Menu action must have a action.content');
+      }
+      this.extraActions.push(action);
+    },
     addMessageFlows() {
       if (this.collaboration) {
         this.collaboration
@@ -1330,6 +1385,9 @@ export default {
     this.registerNode(Process);
     /* Initialize the BpmnModdle and its extensions */
     window.ProcessMaker.EventBus.$emit('modeler-init', {
+      $t: this.$t,
+      modeler: this,
+      registerMenuAction: this.registerMenuAction,
       registerInspectorExtension,
       registerBpmnExtension: this.registerBpmnExtension,
       registerNode: this.registerNode,
@@ -1464,6 +1522,9 @@ export default {
 
     /* Register custom nodes */
     window.ProcessMaker.EventBus.$emit('modeler-start', {
+      $t: this.$t,
+      modeler: this,
+      registerMenuAction: this.registerMenuAction,
       loadXML: async(xml) => {
         await this.loadXML(xml);
         await undoRedoStore.dispatch('pushState', xml);

package/src/components/nodes/sequenceFlow/sequenceFlow.vue

@@ -20,6 +20,7 @@ import { shapes } from 'jointjs';
 import linkConfig from '@/mixins/linkConfig';
 import get from 'lodash/get';
 import { namePosition } from './sequenceFlowConfig';
+import highlightConfig from '@/mixins/highlightConfig';
 import CrownConfig from '@/components/crown/crownConfig/crownConfig';
 import SequenceFlow from '@/components/nodes/genericFlow/SequenceFlow';
 
@@ -40,7 +41,7 @@ export default {
     'planeElements',
     'isRendering',
   ],
-  mixins: [linkConfig],
+  mixins: [highlightConfig, linkConfig],
   data() {
     return {
       shape: null,

package/src/components/toolbar/ToolBar.vue

@@ -56,7 +56,7 @@
               {{ $t('Close') }}
             </a>
             <EllipsisMenu
-              :actions="ellipsisMenuActions"
+              :actions="combinedMenuActions"
               :divider="false"
               @navigate="onNavigate"
               @show="onShow"
@@ -129,6 +129,7 @@ export default {
     'warnings',
     'xmlManager',
     'validationBar',
+    'extraActions',
   ],
   watch: {
     miniMapOpen(isOpen) {
@@ -146,6 +147,9 @@ export default {
     },
   },
   computed: {
+    combinedMenuActions() {
+      return this.extraActions ? this.ellipsisMenuActions.concat(this.extraActions) : this.ellipsisMenuActions;
+    },
     canUndo() {
       return undoRedoStore.getters.canUndo;
     },
@@ -237,7 +241,7 @@ export default {
           this.$emit('publishPmBlock');
           break;
         default:
-          break;
+          this.$emit('action', action);
       }
     },
     onShow() {

package/src/mixins/highlightConfig.js

@@ -113,7 +113,7 @@ export default {
       return this.shape.findView(this.paperManager.paper);
     },
     shapeBody() {
-      return this.shapeView.$el.find('[joint-selector=body]');
+      return this.shapeView.$el.find('[joint-selector=body]') || this.shapeView.$el;
     },
   },
   methods: {