@processmaker/modeler 1.39.28 → 1.39.30

package/package.json

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

package/src/assets/spinner.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: rgb(255, 255, 255); display: block; shape-rendering: auto;" width="50px" height="50px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+    <circle cx="50" cy="50" fill="none" stroke="#1572c2" stroke-width="10" r="35" stroke-dasharray="164.93361431346415 56.97787143782138">
+        <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 50 50;360 50 50" keyTimes="0;1"/>
+    </circle>
+</svg>

package/src/components/inspectors/LoadingPreview.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="preview-placeholder">
+    <img id="preview-image" :src="previewAsset" alt="Preview Asset">
+    <h1>The preview is loading</h1>
+    <h2>Some assets can take some time to load</h2>
+
+    <img alt="spinner" :src="spinnerImg">
+  </div>
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {
+      previewAsset: require('@/assets/previewAsset.png'),
+      spinnerImg: require('@/assets/spinner.svg'),
+    };
+  },
+};
+</script>
+
+<style lang="scss" src="./preview_panel.scss" scoped />
+
+<style scoped>
+  #preview-image {
+    width: 130px;
+    margin-top: 50px;
+    margin-bottom: 50px;
+  }
+</style>

package/src/components/inspectors/NoPreviewAvailable.vue

@@ -1,8 +1,8 @@
 <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 class="preview-placeholder">
+    <img id="preview-image" :src="noPreviewImg" alt="no preview">
+    <h1>No Resource Assigned</h1>
+    <h2>This is a placeholder screen. Please, assign a resource to this task.</h2>
   </div>
 </template>
 
@@ -17,31 +17,13 @@ export default {
 };
 </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;
-}
+<style lang="scss" src="./preview_panel.scss" scoped />
 
-.no-preview h2 {
-  text-align: center;
-  font-size: x-large;
-}
+<style scoped>
+  #preview-image {
+    width: 200px;
+    margin-top:50px;
+    margin-bottom: 50px;
+  }
 </style>

package/src/components/inspectors/PreviewPanel.vue

@@ -34,19 +34,13 @@
               </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-external-link-alt" v-show="previewUrl" @click="openAsset()"/>
           <i class="fas fa-times" @click="onClose()" />
         </div>
       </b-col>
@@ -60,9 +54,7 @@
       <div class="task-title"> {{ taskTitle }} </div>
     </b-row>
 
-    <div id="spinner" class="row justify-content-center" v-if="showSpinner">
-      <img alt="spinner" :src="spinner">
-    </div>
+    <loading-preview v-if="showSpinner"/>
 
     <no-preview-available v-show="!previewUrl"/>
     <iframe title="Preview" v-show="!!previewUrl && !showSpinner" :src="previewUrl" style="width:100%; height:100%;border: none;" @load="loading"/>
@@ -73,16 +65,16 @@
 <script>
 import store from '@/store';
 import NoPreviewAvailable from '@/components/inspectors/NoPreviewAvailable';
+import LoadingPreview from '@/components/inspectors/LoadingPreview.vue';
 
 export default {
   props: ['nodeRegistry', 'visible', 'previewConfigs'],
-  components: { NoPreviewAvailable },
+  components: { NoPreviewAvailable, LoadingPreview },
   data() {
     return {
       data: {},
       previewUrl: null,
       showSpinner: false,
-      spinner: require('@/assets/spiner.svg'),
       selectedPreview: '1',
       taskTitle: '',
       itemTitle: '',
@@ -117,6 +109,15 @@ export default {
     loading() {
       this.showSpinner = false;
     },
+    getConfig(data) {
+      return this.previewConfigs.find(config => {
+        return config.matcher(data);
+      });
+    },
+    openAsset() {
+      const nodeConfig = this.getConfig(this.data);
+      window.open(nodeConfig.assetUrl(this.data), '_blank');
+    },
     prepareData() {
       if (!this.highlightedNode) {
         return {};
@@ -139,9 +140,7 @@ export default {
         return;
       }
 
-      const nodeConfig = this.previewConfigs.find(config => {
-        return config.matcher(this.data);
-      });
+      const nodeConfig = this.getConfig(this.data);
 
       if (nodeConfig) {
         this.prepareData();

package/src/components/inspectors/preview_panel.scss

@@ -15,7 +15,7 @@ $inspector-column-min-width: 200px;
   min-width: $inspector-column-min-width;
   resize: both;
   overflow:auto;
-  background-color: #F5F5F5;
+  background-color: #fff;
   border-left: 8px solid #EBEEF2;
   z-index: 2;
 }
@@ -63,3 +63,31 @@ $inspector-column-min-width: 200px;
   text-align: center;
   color: #6c757d;
 }
+
+.preview-placeholder {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 5px;
+}
+
+.preview-placeholder h1 {
+  text-align: center;
+  margin-bottom: 30px;
+  font-family: "Open Sans", sans-serif;
+  font-size: 32px;
+  font-weight: 600;
+  line-height: 38px;
+  letter-spacing: -0.04em;
+}
+
+.preview-placeholder h2 {
+  text-align: center;
+  margin-bottom: 50px;
+  font-family: "Open Sans", sans-serif;
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 27px;
+  letter-spacing: -0.02em;
+}

package/src/components/railBottom/RailBottom.vue

@@ -22,6 +22,7 @@
       :style="[overlap ? { width: 'auto'} : { width: '100%'}]"
     >
       <UndoRedoControl
+        v-if="!isMultiplayer"
         v-show="showComponent"
         :is-rendering="isRendering"
         @load-xml="$emit('load-xml')"
@@ -117,6 +118,7 @@ export default {
     showComponent() {
       return store.getters.showComponent;
     },
+    isMultiplayer: () => store.getters.isMultiplayer,
   },
   async mounted() {
     await nextTick();

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

@@ -1,5 +1,5 @@
 <template>
-  <b-avatar-group class="container">
+  <b-avatar-group class="container" v-if="!isMultiplayer">
     <template v-for="item in filteredPlayers" >
       <Avatar :badgeBackgroundColor="item.color" :imgSrc="item.avatar" :userName="item.name" :key="item.key"/>
     </template>
@@ -9,6 +9,8 @@
 <script>
 import { uniqBy } from 'lodash';
 import Avatar from '@/components/topRail/multiplayerViewUsers/avatar/Avatar';
+import store from '@/store';
+
 export default {
   components:{
     Avatar,
@@ -26,6 +28,7 @@ export default {
         return player.name.toLowerCase() !== window.ProcessMaker.user?.fullName.toLowerCase();
       });
     },
+    isMultiplayer: () => store.getters.isMultiplayer,
   },
 };
 </script>

package/src/setup/initialLoad.js

@@ -28,18 +28,21 @@ window.ProcessMaker.EventBus.$on(
   (event) => {
     event.registerPreview({
       url: '/designer/screens/preview',
+      assetUrl: (nodeData) => `/designer/screen-builder/${nodeData.screenRef}/edit`,
       receivingParams: ['screenRef'],
       matcher: (nodeData) => nodeData?.$type  === 'bpmn:Task',
     });
 
     event.registerPreview({
       url: '/designer/scripts/preview',
+      assetUrl: (nodeData) => `/designer/scripts/${nodeData.scriptRef}/builder`,
       receivingParams: ['scriptRef'],
       matcher: (nodeData) => nodeData?.$type === 'bpmn:ScriptTask',
     });
 
     event.registerPreview({
       url: '/designer/scripts/preview',
+      assetUrl: (nodeData) => `/designer/screen-builder/${nodeData.screenRef}/edit`,
       receivingParams: ['screenRef'],
       matcher: (nodeData) => nodeData?.$type === 'bpmn:ManualTask',
     });

package/dist/img/spiner.8fc30c70.svg

@@ -1,13 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg class="lds-gear" width="150px" height="100%"
-     xmlns="http://www.w3.org/2000/svg"
-     xmlns:xlink="http://www.w3.org/1999/xlink"
-     viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"
->
-    <g transform="translate(50 50)">
-        <g transform="rotate(248.825)">
-            <animateTransform attributeName="transform" type="rotate" values="0;360" keyTimes="0;1" dur="4.7s" repeatCount="indefinite"/>
-            <path d="M37.43995192304605 -6.5 L47.43995192304605 -6.5 L47.43995192304605 6.5 L37.43995192304605 6.5 A38 38 0 0 1 35.67394948182593 13.090810836924174 L35.67394948182593 13.090810836924174 L44.33420351967032 18.090810836924174 L37.83420351967032 29.34914108612188 L29.17394948182593 24.34914108612188 A38 38 0 0 1 24.34914108612188 29.17394948182593 L24.34914108612188 29.17394948182593 L29.34914108612188 37.83420351967032 L18.090810836924184 44.33420351967032 L13.090810836924183 35.67394948182593 A38 38 0 0 1 6.5 37.43995192304605 L6.5 37.43995192304605 L6.500000000000001 47.43995192304605 L-6.499999999999995 47.43995192304606 L-6.499999999999996 37.43995192304606 A38 38 0 0 1 -13.09081083692417 35.67394948182593 L-13.09081083692417 35.67394948182593 L-18.09081083692417 44.33420351967032 L-29.34914108612187 37.834203519670325 L-24.349141086121872 29.173949481825936 A38 38 0 0 1 -29.17394948182592 24.34914108612189 L-29.17394948182592 24.34914108612189 L-37.83420351967031 29.349141086121893 L-44.33420351967031 18.0908108369242 L-35.67394948182592 13.090810836924193 A38 38 0 0 1 -37.43995192304605 6.5000000000000036 L-37.43995192304605 6.5000000000000036 L-47.43995192304605 6.500000000000004 L-47.43995192304606 -6.499999999999993 L-37.43995192304606 -6.499999999999994 A38 38 0 0 1 -35.67394948182593 -13.090810836924167 L-35.67394948182593 -13.090810836924167 L-44.33420351967032 -18.090810836924163 L-37.834203519670325 -29.34914108612187 L-29.173949481825936 -24.34914108612187 A38 38 0 0 1 -24.349141086121893 -29.17394948182592 L-24.349141086121893 -29.17394948182592 L-29.349141086121897 -37.834203519670304 L-18.0908108369242 -44.334203519670304 L-13.090810836924195 -35.67394948182592 A38 38 0 0 1 -6.500000000000005 -37.43995192304605 L-6.500000000000005 -37.43995192304605 L-6.500000000000007 -47.43995192304605 L6.49999999999999 -47.43995192304606 L6.499999999999992 -37.43995192304606 A38 38 0 0 1 13.090810836924149 -35.67394948182594 L13.090810836924149 -35.67394948182594 L18.090810836924142 -44.33420351967033 L29.349141086121847 -37.83420351967034 L24.349141086121854 -29.17394948182595 A38 38 0 0 1 29.17394948182592 -24.349141086121893 L29.17394948182592 -24.349141086121893 L37.834203519670304 -29.349141086121897 L44.334203519670304 -18.0908108369242 L35.67394948182592 -13.090810836924197 A38 38 0 0 1 37.43995192304605 -6.500000000000007 M0 -20A20 20 0 1 0 0 20 A20 20 0 1 0 0 -20"/>
-        </g>
-    </g>
-</svg>

package/src/assets/spiner.svg

@@ -1,13 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg class="lds-gear" width="150px" height="100%"
-     xmlns="http://www.w3.org/2000/svg"
-     xmlns:xlink="http://www.w3.org/1999/xlink"
-     viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"
->
-    <g transform="translate(50 50)">
-        <g transform="rotate(248.825)">
-            <animateTransform attributeName="transform" type="rotate" values="0;360" keyTimes="0;1" dur="4.7s" repeatCount="indefinite"/>
-            <path d="M37.43995192304605 -6.5 L47.43995192304605 -6.5 L47.43995192304605 6.5 L37.43995192304605 6.5 A38 38 0 0 1 35.67394948182593 13.090810836924174 L35.67394948182593 13.090810836924174 L44.33420351967032 18.090810836924174 L37.83420351967032 29.34914108612188 L29.17394948182593 24.34914108612188 A38 38 0 0 1 24.34914108612188 29.17394948182593 L24.34914108612188 29.17394948182593 L29.34914108612188 37.83420351967032 L18.090810836924184 44.33420351967032 L13.090810836924183 35.67394948182593 A38 38 0 0 1 6.5 37.43995192304605 L6.5 37.43995192304605 L6.500000000000001 47.43995192304605 L-6.499999999999995 47.43995192304606 L-6.499999999999996 37.43995192304606 A38 38 0 0 1 -13.09081083692417 35.67394948182593 L-13.09081083692417 35.67394948182593 L-18.09081083692417 44.33420351967032 L-29.34914108612187 37.834203519670325 L-24.349141086121872 29.173949481825936 A38 38 0 0 1 -29.17394948182592 24.34914108612189 L-29.17394948182592 24.34914108612189 L-37.83420351967031 29.349141086121893 L-44.33420351967031 18.0908108369242 L-35.67394948182592 13.090810836924193 A38 38 0 0 1 -37.43995192304605 6.5000000000000036 L-37.43995192304605 6.5000000000000036 L-47.43995192304605 6.500000000000004 L-47.43995192304606 -6.499999999999993 L-37.43995192304606 -6.499999999999994 A38 38 0 0 1 -35.67394948182593 -13.090810836924167 L-35.67394948182593 -13.090810836924167 L-44.33420351967032 -18.090810836924163 L-37.834203519670325 -29.34914108612187 L-29.173949481825936 -24.34914108612187 A38 38 0 0 1 -24.349141086121893 -29.17394948182592 L-24.349141086121893 -29.17394948182592 L-29.349141086121897 -37.834203519670304 L-18.0908108369242 -44.334203519670304 L-13.090810836924195 -35.67394948182592 A38 38 0 0 1 -6.500000000000005 -37.43995192304605 L-6.500000000000005 -37.43995192304605 L-6.500000000000007 -47.43995192304605 L6.49999999999999 -47.43995192304606 L6.499999999999992 -37.43995192304606 A38 38 0 0 1 13.090810836924149 -35.67394948182594 L13.090810836924149 -35.67394948182594 L18.090810836924142 -44.33420351967033 L29.349141086121847 -37.83420351967034 L24.349141086121854 -29.17394948182595 A38 38 0 0 1 29.17394948182592 -24.349141086121893 L29.17394948182592 -24.349141086121893 L37.834203519670304 -29.349141086121897 L44.334203519670304 -18.0908108369242 L35.67394948182592 -13.090810836924197 A38 38 0 0 1 37.43995192304605 -6.500000000000007 M0 -20A20 20 0 1 0 0 20 A20 20 0 1 0 0 -20"/>
-        </g>
-    </g>
-</svg>