Pass preview type to client app so it can decide whether components are selectable

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),
-        refreshContent(strippedJson)
+      { once: true }
-      },
-      {
-        once: true,
-      }
     )
+
+    // Add listener to select components
+    iframe.contentWindow.addEventListener("bb-select-component", data => {
+      store.actions.components.select({ _id: data.detail })
+    })
   })
 </script>
 

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,6 +30,7 @@
         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) {
@@ -34,15 +38,6 @@
         }
       }
 
-      // 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"))
     </script>

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()