diff --git a/packages/builder/src/stores/builder/hover.js b/packages/builder/src/stores/builder/hover.js index f0444a7da5..98cdc9e416 100644 --- a/packages/builder/src/stores/builder/hover.js +++ b/packages/builder/src/stores/builder/hover.js @@ -7,12 +7,25 @@ export const INITIAL_HOVER_STATE = { } export class HoverStore extends BudiStore { + hoverTimeout + constructor() { super({ ...INITIAL_HOVER_STATE }) this.hover = this.hover.bind(this) } hover(componentId, notifyClient = true) { + clearTimeout(this.hoverTimeout) + if (componentId) { + this.processHover(componentId, notifyClient) + } else { + this.hoverTimeout = setTimeout(() => { + this.processHover(componentId, notifyClient) + }, 10) + } + } + + processHover(componentId, notifyClient) { if (componentId === get(this.store).componentId) { return } diff --git a/packages/client/src/components/preview/HoverIndicator.svelte b/packages/client/src/components/preview/HoverIndicator.svelte index 164ec32ab4..69e13e4219 100644 --- a/packages/client/src/components/preview/HoverIndicator.svelte +++ b/packages/client/src/components/preview/HoverIndicator.svelte @@ -1,10 +1,9 @@
x.visible) $: offset = $builderStore.inBuilder ? 0 : 2 + $: componentId, debouncedUpdate() let updating = false let observers = [] diff --git a/packages/client/src/index.js b/packages/client/src/index.js index 9c249dd5b3..de6d1bdc12 100644 --- a/packages/client/src/index.js +++ b/packages/client/src/index.js @@ -98,7 +98,7 @@ const loadBudibase = async () => { context: stringifiedContext, }) } else if (type === "hover-component") { - hoverStore.actions.hoverComponent(data) + hoverStore.actions.hoverComponent(data, false) } else if (type === "builder-meta") { builderStore.actions.setMetadata(data) } diff --git a/packages/client/src/stores/hover.js b/packages/client/src/stores/hover.js index 24f315a126..014a9f1aa0 100644 --- a/packages/client/src/stores/hover.js +++ b/packages/client/src/stores/hover.js @@ -5,13 +5,27 @@ const createHoverStore = () => { const store = writable({ hoveredComponentId: null, }) + let hoverTimeout - const hoverComponent = id => { + const hoverComponent = (id, notifyBuilder = true) => { + clearTimeout(hoverTimeout) + if (id) { + processHover(id, notifyBuilder) + } else { + hoverTimeout = setTimeout(() => { + processHover(id, notifyBuilder) + }, 10) + } + } + + const processHover = (id, notifyBuilder = true) => { if (id === get(store).hoveredComponentId) { return } store.set({ hoveredComponentId: id }) - eventStore.actions.dispatchEvent("hover-component", { id }) + if (notifyBuilder) { + eventStore.actions.dispatchEvent("hover-component", { id }) + } } return {