diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/NewComponentPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/NewComponentPanel.svelte
index f80b681782..d13d72b89f 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/NewComponentPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/NewComponentPanel.svelte
@@ -261,8 +261,7 @@
class="component"
class:selected={selectedIndex === orderMap[component.component]}
on:click={() => addComponent(component.component)}
- on:mouseover={() => (selectedIndex = null)}
- on:focus
+ on:mouseenter={() => (selectedIndex = null)}
>
{component.name}
diff --git a/packages/client/src/components/preview/DNDHandler.svelte b/packages/client/src/components/preview/DNDHandler.svelte
index a0f9bfe2aa..15177a90c4 100644
--- a/packages/client/src/components/preview/DNDHandler.svelte
+++ b/packages/client/src/components/preview/DNDHandler.svelte
@@ -25,6 +25,7 @@
$: source = $dndStore.source
$: target = $dndStore.target
$: drop = $dndStore.drop
+ $: gridScreen = $isGridScreen
// Local flag for whether we are awaiting an async drop event
let dropping = false
@@ -235,7 +236,7 @@
// Callback when on top of a component
const onDragOver = (e: DragEvent) => {
- if (!source || !target || $isGridScreen) {
+ if (!source || !target || gridScreen) {
return
}
handleEvent(e)
@@ -243,7 +244,7 @@
// Callback when entering a potential drop target
const onDragEnter = async (e: DragEvent) => {
- if (!source || $isGridScreen || !(e.target instanceof HTMLElement)) {
+ if (!source || gridScreen || !(e.target instanceof HTMLElement)) {
return
}
@@ -278,7 +279,7 @@
source.type,
drop.parent,
drop.index,
- $dndStore.source?.props
+ $dndStore.meta?.props
)
dropping = false
stopDragging()
diff --git a/packages/client/src/components/preview/DNDPlaceholderOverlay.svelte b/packages/client/src/components/preview/DNDPlaceholderOverlay.svelte
deleted file mode 100644
index adff10baf8..0000000000
--- a/packages/client/src/components/preview/DNDPlaceholderOverlay.svelte
+++ /dev/null
@@ -1,108 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/packages/client/src/components/preview/DNDSelectionIndicators.svelte b/packages/client/src/components/preview/DNDSelectionIndicators.svelte
index d07082d439..cd7eb8302d 100644
--- a/packages/client/src/components/preview/DNDSelectionIndicators.svelte
+++ b/packages/client/src/components/preview/DNDSelectionIndicators.svelte
@@ -1,12 +1,18 @@
{#if $dndIsDragging}
diff --git a/packages/client/src/components/preview/GridDNDHandler.svelte b/packages/client/src/components/preview/GridDNDHandler.svelte
index 24d61bad2b..aa5187dec1 100644
--- a/packages/client/src/components/preview/GridDNDHandler.svelte
+++ b/packages/client/src/components/preview/GridDNDHandler.svelte
@@ -85,7 +85,7 @@
// real component to render in the new position before updating the DND
// store, preventing the green DND overlay from being out of position
if ($dndSource?.isNew && styles) {
- dndStore.actions.updateSourceProps({
+ dndStore.actions.updateNewComponentProps({
_styles: {
normal: styles,
},
diff --git a/packages/client/src/components/preview/IndicatorSet.svelte b/packages/client/src/components/preview/IndicatorSet.svelte
index 4fc45e7b8a..83535f92cb 100644
--- a/packages/client/src/components/preview/IndicatorSet.svelte
+++ b/packages/client/src/components/preview/IndicatorSet.svelte
@@ -93,6 +93,7 @@
const observeMutations = (node: Node) => {
mutationObserver.observe(node, {
attributes: true,
+ attributeFilter: ["style"],
})
observingMutations = true
}
diff --git a/packages/client/src/stores/dnd.ts b/packages/client/src/stores/dnd.ts
index 6160d654da..c04ca9547e 100644
--- a/packages/client/src/stores/dnd.ts
+++ b/packages/client/src/stores/dnd.ts
@@ -16,7 +16,6 @@ interface DNDSource {
icon?: string
type: string
isNew: boolean
- props?: Record
}
interface DNDTarget {
@@ -32,10 +31,15 @@ interface DNDDrop {
index: number
}
+interface DNDMeta {
+ props?: Record
+}
+
interface DNDState {
source?: DNDSource
target?: DNDTarget
drop?: DNDDrop
+ meta?: DNDMeta
}
const createDndStore = () => {
@@ -106,15 +110,12 @@ const createDndStore = () => {
store.set({})
}
- const updateSourceProps = (props: Record) => {
+ const updateNewComponentProps = (props: Record) => {
store.update(state => {
- if (!state.source) {
- return state
- }
return {
...state,
- source: {
- ...state.source,
+ meta: {
+ ...state.meta,
props,
},
}
@@ -129,7 +130,7 @@ const createDndStore = () => {
updateTarget,
updateDrop,
reset,
- updateSourceProps,
+ updateNewComponentProps,
},
}
}