Update scrolling to selected component so that it works when adding components
This commit is contained in:
parent
919c4d95c5
commit
2afe040332
|
@ -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)) {
|
||||||
|
|
|
@ -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 = {
|
||||||
|
|
Loading…
Reference in New Issue