@processmaker/modeler 1.39.5 → 1.39.7

package/package.json

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

@@ -23,6 +23,7 @@
       @close="close"
       @save-state="pushToUndoStack"
       @clearSelection="clearSelection"
+      :players="players"
       @action="handleToolbarAction"
     />
     <b-row class="modeler h-100">
@@ -50,9 +51,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 +111,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"
@@ -143,6 +154,15 @@
         @save-state="pushToUndoStack"
       />
     </b-row>
+
+    <RemoteCursor 
+      v-for="player in players"
+      :cursor-color="player.color"
+      :username="player.name"
+      :key="player.id"
+      :top="player.top"
+      :left="player.left"
+    />
   </span>
 </template>
 
@@ -159,6 +179,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';
@@ -202,10 +223,11 @@ import RailBottom from '@/components/railBottom/RailBottom.vue';
 import ProcessmakerModelerGenericFlow from '@/components/nodes/genericFlow/genericFlow';
 
 import Selection from './Selection';
-
+import RemoteCursor from '@/components/multiplayer/remoteCursor/RemoteCursor.vue';
 
 export default {
   components: {
+    PreviewPanel,
     ToolBar,
     ExplorerRail,
     InspectorButton,
@@ -213,6 +235,7 @@ export default {
     ProcessmakerModelerGenericFlow,
     Selection,
     RailBottom,
+    RemoteCursor,
   },
   props: {
     owner: Object,
@@ -282,6 +305,7 @@ export default {
       miniMapOpen: false,
       panelsCompressed: false,
       isOpenInspector: false,
+      isOpenPreview: false,
       isGrabbing: false,
       isRendering: false,
       allWarnings: [],
@@ -300,6 +324,9 @@ export default {
       isSelecting: false,
       isIntoTheSelection: false,
       dragStart: null,
+      players: [],
+      showInspectorButton: true,
+      inspectorButtonRight: 65,
     };
   },
   watch: {
@@ -364,8 +391,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);
     },
@@ -870,7 +919,7 @@ export default {
 
       const config = definition.config ? JSON.parse(definition.config) : {};
       const type = config?.processKey || parser(definition, this.moddle);
-      
+
       const unnamedElements = ['bpmn:TextAnnotation', 'bpmn:Association', 'bpmn:DataOutputAssociation', 'bpmn:DataInputAssociation'];
       const requireName = unnamedElements.indexOf(bpmnType) === -1;
       if (requireName && !definition.get('name')) {

package/src/components/multiplayer/remoteCursor/RemoteCursor.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="remote-cursor" :style="{ left: left + 'px', top: top + 'px' }">
+    <inline-svg :src="cursorIcon" :fill="cursorColor" />
+
+    <div class="remote-username">
+      {{ username }}
+    </div>
+  </div>
+</template>
+
+<script>
+import InlineSvg from 'vue-inline-svg';
+
+export default {
+  components: {
+    InlineSvg,
+  },
+  props: {
+    cursorColor: {
+      type: String,
+      default: '#000000',
+    },
+    username: {
+      type: String,
+    },
+    top: {
+      type: Number,
+    },
+    left: {
+      type: Number,
+    },
+  },
+  data() {
+    return {
+      cursorIcon: require('@/components/multiplayer/remoteCursor/cursor.svg'),
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.remote {
+  &-cursor {
+    position: absolute;
+    display: flex;
+    width: auto;
+    height: 34px;
+  }
+
+  &-username {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 12px;
+    padding: 4px 10px;
+    gap: 10px;
+    border-radius: 4px;
+    background-color: #212529;
+
+    color: #FFFFFF;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+  }
+}
+</style>

package/src/components/multiplayer/remoteCursor/cursor.svg

@@ -0,0 +1,3 @@
+<svg width="23" height="19" viewBox="0 0 23 19" xmlns="http://www.w3.org/2000/svg">
+    <path d="M11.5 17.5L2 1L20.5 7L13 9L11.5 17.5Z" stroke="#212529" />
+</svg>

package/src/components/toolbar/ToolBar.vue

@@ -8,6 +8,7 @@
         <TopRail
           :validation-errors="validationErrors"
           :warnings="warnings"
+          :players="players"
         >
           <component
             :is="component.button"
@@ -129,6 +130,7 @@ export default {
     'warnings',
     'xmlManager',
     'validationBar',
+    'players',
     'extraActions',
   ],
   watch: {

package/src/components/topRail/TopRail.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="top-rail-container">
+    <MultiplayerViewUsers :players="players"/>
     <ValidateIssue
       v-show="isOpenIssue"
       :number-of-errors="numberOfErrors"
@@ -20,12 +21,13 @@
 <script>
 import store from '@/store';
 import { ValidateButton, ValidateIssue, ValidatePanel } from '@/components/topRail/validateControl';
-
+import MultiplayerViewUsers from '@/components/topRail/multiplayerViewUsers/MultiplayerViewUsers';
 export default {
   components: {
     ValidateButton,
     ValidateIssue,
     ValidatePanel,
+    MultiplayerViewUsers,
   },
   props: {
     validationErrors: {
@@ -36,6 +38,10 @@ export default {
       type: Array,
       required: true,
     },
+    players: {
+      type: Array,
+      required: false,
+    },
   },
   data() {
     return {

package/src/components/topRail/multiplayerViewUsers/MultiplayerViewUsers.vue

@@ -0,0 +1,22 @@
+<template>
+  <b-avatar-group class="container">
+    <template v-for="item in players" >
+      <Avatar :badgeBackgroundColor="item.color" :imgSrc= "item.imgSrc" :userName="item.name" :key="item.key"/>
+    </template>
+  </b-avatar-group> 
+</template>
+  
+<script>
+import Avatar from '@/components/topRail/multiplayerViewUsers/avatar/Avatar';
+export default {
+  components:{
+    Avatar,
+  },
+  props: {
+    players: {
+      type: Array,
+      required: true,
+    },
+  },
+};
+</script>