From 4a3c480b263adeeb71d19752d2e0ed72b44cb1ad Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Fri, 11 Jun 2021 13:34:37 +0100
Subject: [PATCH] Prevent hovering over layout components when editing screens

---
 packages/client/src/components/Component.svelte | 6 ++++--
 packages/client/src/components/Router.svelte    | 4 ++--
 packages/client/src/utils/styleable.js          | 4 +++-
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index bb61a69c6b..6f5c070358 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -25,6 +25,7 @@
 
   // Get contexts
   const context = getContext("context")
+  const insideScreenslot = !!getContext("screenslot")
 
   // Create component context
   const componentStore = writable({})
@@ -45,12 +46,13 @@
   $: selected =
     $builderStore.inBuilder &&
     $builderStore.selectedComponentId === instance._id
+  $: interactive = $builderStore.previewType === "layout" || insideScreenslot
 
   // Update component context
   $: componentStore.set({
     id,
     children: children.length,
-    styles: { ...instance._styles, id, empty },
+    styles: { ...instance._styles, id, empty, interactive },
     empty,
     transition: instance._transition,
     selected,
@@ -116,7 +118,7 @@
 
 <div
   class={`component ${id}`}
-  data-type="component"
+  data-type={interactive ? "component" : ""}
   data-id={id}
   data-name={name}
 >
diff --git a/packages/client/src/components/Router.svelte b/packages/client/src/components/Router.svelte
index 6c04bcad76..f9539e9fe5 100644
--- a/packages/client/src/components/Router.svelte
+++ b/packages/client/src/components/Router.svelte
@@ -1,12 +1,12 @@
 <script>
-  import { getContext } from "svelte"
+  import { setContext, getContext } from "svelte"
   import Router from "svelte-spa-router"
   import { routeStore } from "../store"
   import Screen from "./Screen.svelte"
-  import { onMount } from "svelte"
 
   const { styleable } = getContext("sdk")
   const component = getContext("component")
+  setContext("screenslot", true)
 
   // Only wrap this as an array to take advantage of svelte keying,
   // to ensure the svelte-spa-router is fully remounted when route config
diff --git a/packages/client/src/utils/styleable.js b/packages/client/src/utils/styleable.js
index 255ce33785..27589b2bba 100644
--- a/packages/client/src/utils/styleable.js
+++ b/packages/client/src/utils/styleable.js
@@ -60,7 +60,9 @@ export const styleable = (node, styles = {}) => {
     // Handler to select a component in the builder when clicking it in the
     // builder preview
     selectComponent = event => {
-      builderStore.actions.selectComponent(componentId)
+      if (newStyles.interactive) {
+        builderStore.actions.selectComponent(componentId)
+      }
       event.preventDefault()
       event.stopPropagation()
       return false