From 4aafb1ed9e78717c20237adc11a9d2eae3ddeaa4 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 14 Dec 2023 15:19:23 +0000 Subject: [PATCH 01/20] Massively improve performance of hovering components --- .../src/builderStore/store/frontend.js | 17 +++++- .../[screenId]/_components/AppPreview.svelte | 6 +- .../ComponentList/ComponentTree.svelte | 17 ++---- .../_components/ComponentList/index.svelte | 55 ++++++------------- .../components/preview/HoverIndicator.svelte | 8 +-- packages/client/src/index.js | 4 +- packages/client/src/stores/builder.js | 11 ---- packages/client/src/stores/hover.js | 25 +++++++++ packages/client/src/stores/index.js | 3 + .../controllers/static/templates/preview.hbs | 2 - 10 files changed, 74 insertions(+), 74 deletions(-) create mode 100644 packages/client/src/stores/hover.js diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js index aaa0eb0184..061cd4c6b5 100644 --- a/packages/builder/src/builderStore/store/frontend.js +++ b/packages/builder/src/builderStore/store/frontend.js @@ -5,6 +5,7 @@ import { selectedComponent, screenHistoryStore, automationHistoryStore, + store, } from "builderStore" import { datasources, @@ -85,7 +86,6 @@ const INITIAL_FRONTEND_STATE = { selectedScreenId: null, selectedComponentId: null, selectedLayoutId: null, - hoverComponentId: null, // Client state selectedComponentInstance: null, @@ -93,6 +93,9 @@ const INITIAL_FRONTEND_STATE = { // Onboarding onboarding: false, tourNodes: null, + + // UI state + hoveredComponentId: null, } export const getFrontendStore = () => { @@ -1414,6 +1417,18 @@ export const getFrontendStore = () => { return state }) }, + hover: (componentId, notifyClient = true) => { + if (componentId === get(store).hoveredComponentId) { + return + } + store.update(state => { + state.hoveredComponentId = componentId + return state + }) + if (notifyClient) { + store.actions.preview.sendEvent("hover-component", componentId) + } + }, }, links: { save: async (url, title) => { diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte index 65ea172012..2127392bb9 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte @@ -36,14 +36,12 @@ // Determine selected component ID $: selectedComponentId = $store.selectedComponentId - $: hoverComponentId = $store.hoverComponentId $: previewData = { appId: $store.appId, layout, screen, selectedComponentId, - hoverComponentId, theme: $store.theme, customTheme: $store.customTheme, previewDevice: $store.previewDevice, @@ -119,8 +117,8 @@ error = event.error || "An unknown error occurred" } else if (type === "select-component" && data.id) { $store.selectedComponentId = data.id - } else if (type === "hover-component" && data.id) { - $store.hoverComponentId = data.id + } else if (type === "hover-component") { + store.actions.components.hover(data.id, false) } else if (type === "update-prop") { await store.actions.components.updateSetting(data.prop, data.value) } else if (type === "update-styles") { diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte index 8d4d64e4be..315c0a331e 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte @@ -90,16 +90,7 @@ return findComponentPath($selectedComponent, component._id)?.length > 0 } - const handleMouseover = componentId => { - if ($store.hoverComponentId !== componentId) { - $store.hoverComponentId = componentId - } - } - const handleMouseout = componentId => { - if ($store.hoverComponentId === componentId) { - $store.hoverComponentId = null - } - } + const hover = store.actions.components.hover