Update scrolling to selected component so that it works when adding components

This commit is contained in:
Andrew Kingston 2024-08-14 16:36:19 +01:00
parent 919c4d95c5
commit 2afe040332
No known key found for this signature in database
2 changed files with 20 additions and 13 deletions

View File

@ -9,7 +9,7 @@
</script> </script>
<script> <script>
import { getContext, setContext, onMount } from "svelte" import { getContext, setContext, onMount, tick } from "svelte"
import { writable, get } from "svelte/store" import { writable, get } from "svelte/store"
import { import {
enrichProps, enrichProps,
@ -206,9 +206,10 @@
} }
// Metadata to pass into grid action to apply CSS // Metadata to pass into grid action to apply CSS
const insideGrid =
parent?._component.endsWith("/container") && parent?.layout === "grid"
$: gridMetadata = { $: gridMetadata = {
insideGrid: insideGrid,
parent?._component.endsWith("/container") && parent?.layout === "grid",
ignoresLayout: definition?.ignoresLayout === true, ignoresLayout: definition?.ignoresLayout === true,
id, id,
interactive, interactive,
@ -583,19 +584,22 @@
} }
} }
const scrollIntoView = () => { const scrollIntoView = async () => {
// Don't scroll into view if we selected this component because we were const className = insideGrid ? id : `${id}-dom`
// starting dragging on it const node = document.getElementsByClassName(className)[0]
if (get(dndIsDragging)) {
return
}
const node = document.getElementsByClassName(id)?.[0]?.children[0]
if (!node) { if (!node) {
return return
} }
node.style.scrollMargin = "100px" // Don't scroll into view if we selected this component because we were
// starting dragging on it
if (
get(dndIsDragging) ||
(insideGrid && node.classList.contains("dragging"))
) {
return
}
node.scrollIntoView({ node.scrollIntoView({
behavior: "smooth", behavior: "instant",
block: "nearest", block: "nearest",
inline: "start", inline: "start",
}) })
@ -642,6 +646,9 @@
}) })
} }
} }
console.log("mounted")
return () => { return () => {
// Unregister component // Unregister component
if (componentStore.actions.isComponentRegistered(id)) { if (componentStore.actions.isComponentRegistered(id)) {

View File

@ -134,9 +134,9 @@
const styles = getComputedStyle(domComponent) const styles = getComputedStyle(domComponent)
// Show as active // Show as active
builderStore.actions.selectComponent(id)
domComponent.classList.add("dragging") domComponent.classList.add("dragging")
domGrid.classList.add("highlight") domGrid.classList.add("highlight")
builderStore.actions.selectComponent(id)
// Update state // Update state
dragInfo = { dragInfo = {