@processmaker/modeler 1.39.25 → 1.39.26

package/package.json

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

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

@@ -1,10 +1,11 @@
 <template>
   <crown-button
-    v-if="node.isBpmnType(...validPreviewElements)"
+    v-if="displayIcon"
     :title="$t('Preview')"
     role="menuitem"
     id="preview-button"
     aria-label="Preview"
+    data-test="preview-button"
     @click="preview()"
     v-b-tooltip.hover.viewport.d50="{ customClass: 'no-pointer-events' }"
   >
@@ -24,8 +25,21 @@ export default {
     return {
       trashIcon,
       validPreviewElements,
+      displayIcon: false,
     };
   },
+  mounted() {
+    const defaultDataTransform = (node) => Object.entries(node.definition).reduce((data, [key, value]) => {
+      data[key] = value;
+      return data;
+    }, {});
+    const nodeData = defaultDataTransform(this.node);
+
+    const previewConfig = window.ProcessMaker.$modeler.previewConfigs.find(config => {
+      return config.matcher(nodeData);
+    });
+    this.displayIcon =  !!previewConfig;
+  },
   computed: {
     isPoolLane() {
       return this.node.type === 'processmaker-modeler-lane';
@@ -33,7 +47,11 @@ export default {
   },
   methods: {
     preview() {
-      this.$emit('previewNode', this.node);
+      if (window.ProcessMaker.$modeler.isOpenPreview) {
+        window.ProcessMaker.$modeler.isOpenPreview = false;
+      } else {
+        this.$emit('previewNode', this.node);
+      }
     },
   },
 };

package/src/components/inspectors/PreviewPanel.vue

@@ -7,7 +7,7 @@
     @mousedown="onMouseDown"
     @mouseup="onMouseUp"
     @mousemove="onMouseMove"
-    data-test="preview-column"
+    data-test="preview-panel"
   >
     <b-row class="control-bar">
       <b-col cols="9">
@@ -138,7 +138,16 @@ export default {
       if (currentValue === previousValue) {
         return;
       }
-      this.prepareData();
+
+      const nodeConfig = this.previewConfigs.find(config => {
+        return config.matcher(this.data);
+      });
+
+      if (nodeConfig) {
+        this.prepareData();
+      } else {
+        this.$emit('togglePreview', false);
+      }
     },
 
     onSelectedPreview(item) {
@@ -159,9 +168,12 @@ export default {
           clone[prop] = this.data[prop];
         }
       }
+
       const nodeData = encodeURI(JSON.stringify(clone));
 
-      this.previewUrl = previewConfig ? `${previewConfig.url}?node=${nodeData}` : null;
+      // if the node has the configurations (for example screenRef for a task in a task)
+      const nodeHasConfigParams = Object.keys(clone).length > 0;
+      this.previewUrl = previewConfig &&  nodeHasConfigParams ? `${previewConfig.url}?node=${nodeData}` : null;
       this.taskTitle = this.highlightedNode?.definition?.name;
       this.showPanel = true;
     },

package/src/components/modeler/Modeler.vue

@@ -417,6 +417,9 @@ export default {
       this.isOpenInspector = value;
     },
     handlePreview() {
+      if (this.highlightedNodes.length != 1) {
+        this.isOpenPreview = false;
+      }
       this.$refs['preview-panel'].previewNode(true);
       this.handleTogglePreview(true) ;
     },

package/src/setup/initialLoad.js

@@ -20,3 +20,25 @@ window.ProcessMaker.EventBus.$on('modeler-init', registerNodes);
 window.ProcessMaker.EventBus.$on('modeler-start', ({ loadXML }) => {
   loadXML(blank);
 });
+
+
+
+window.ProcessMaker.EventBus.$on(
+  'modeler-init',
+  (event) => {
+    event.registerPreview({
+      url:'/designer/screens/preview',
+      receivingParams: ['screenRef'],
+      matcher: (nodeData) => {
+        return nodeData?.$type  === 'bpmn:Task';
+      },
+    });
+    event.registerPreview({
+      url:'/designer/scripts/preview',
+      receivingParams: ['scriptRef'],
+      matcher: (nodeData) => {
+        return nodeData?.$type === 'bpmn:ScriptTask';
+      },
+    });
+  });
+