From d25fd8b62575977d42b73c5fb71b339dbf1dd118 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 6 Jan 2021 10:11:56 +0000
Subject: [PATCH] Pass preview type to client app so it can decide whether
 components are selectable

---
 .../AppPreview/CurrentItemPreview.svelte       | 18 ++++++++++--------
 .../AppPreview/iframeTemplate.html             | 17 ++++++-----------
 packages/client/src/store/builder.js           | 14 +++++++++++++-
 3 files changed, 29 insertions(+), 20 deletions(-)

diff --git a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
index 0c0fa6156f..c5bcb2951a 100644
--- a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
+++ b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
@@ -1,6 +1,6 @@
 <script>
   import { onMount } from "svelte"
-  import { store, currentAsset } from "builderStore"
+  import { store, currentAsset, selectedComponent } from "builderStore"
   import iframeTemplate from "./iframeTemplate"
   import { Screen } from "builderStore/store/screenTemplates/utils/Screen"
   import { FrontendTypes } from "../../../constants"
@@ -33,6 +33,7 @@
     layout,
     screen,
     selectedComponentId,
+    previewType: $store.currentFrontEndType,
   }
 
   // Saving pages and screens to the DB causes them to have _revs.
@@ -54,17 +55,18 @@
   // Refresh the preview when required
   $: refreshContent(strippedJson)
 
-  // Initialise the app when mounted
   onMount(() => {
+    // Initialise the app when mounted
     iframe.contentWindow.addEventListener(
       "bb-ready",
-      () => {
-        refreshContent(strippedJson)
-      },
-      {
-        once: true,
-      }
+      () => refreshContent(strippedJson),
+      { once: true }
     )
+
+    // Add listener to select components
+    iframe.contentWindow.addEventListener("bb-select-component", data => {
+      store.actions.components.select({ _id: data.detail })
+    })
   })
 </script>
 
diff --git a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.html b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.html
index 96b32e1967..2facc9ad70 100644
--- a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.html
+++ b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.html
@@ -10,6 +10,9 @@
       *, *:before, *:after {
         box-sizing: border-box;
       }
+      * {
+        pointer-events: none;
+      }
     </style>
     <script src='/assets/budibase-client.js'></script>
     <script>
@@ -19,7 +22,7 @@
         }
 
         // Extract data from message
-        const { selectedComponentId, layout, screen } = JSON.parse(event.data)
+        const { selectedComponentId, layout, screen, previewType } = JSON.parse(event.data)
 
         // Set some flags so the app knows we're in the builder
         window["##BUDIBASE_IN_BUILDER##"] = true
@@ -27,21 +30,13 @@
         window["##BUDIBASE_PREVIEW_SCREEN##"] = screen
         window["##BUDIBASE_SELECTED_COMPONENT_ID##"] = selectedComponentId
         window["##BUDIBASE_PREVIEW_ID##"] = Math.random()
-        
+        window["##BUDIBASE_PREVIEW_TYPE##"] = previewType
+
         // Initialise app
         if (window.loadBudibase) {
           loadBudibase()
         }
       }
-      
-      // Ignore clicks
-      ["click", "mousedown"].forEach(type => {
-        document.addEventListener(type, function(e) {
-          e.preventDefault()
-          e.stopPropagation()
-          return false
-        }, true)
-      })
 
       window.addEventListener("message", receiveMessage)
       window.dispatchEvent(new Event("bb-ready"))
diff --git a/packages/client/src/store/builder.js b/packages/client/src/store/builder.js
index 69f489f64f..7cbe49bde8 100644
--- a/packages/client/src/store/builder.js
+++ b/packages/client/src/store/builder.js
@@ -7,8 +7,20 @@ const createBuilderStore = () => {
     screen: null,
     selectedComponentId: null,
     previewId: null,
+    previewType: null,
+  }
+  const store = writable(initialState)
+  const actions = {
+    selectComponent: id => {
+      window.dispatchEvent(
+        new CustomEvent("bb-select-component", { detail: id })
+      )
+    },
+  }
+  return {
+    ...store,
+    actions,
   }
-  return writable(initialState)
 }
 
 export const builderStore = createBuilderStore()