Auto scroll updates
This commit is contained in:
parent
c4d4399683
commit
477c0f2e5e
|
@ -185,6 +185,9 @@
|
|||
|
||||
let zoomOrigin = []
|
||||
|
||||
// Used to track where the draggable item is scrolling into
|
||||
let scrollZones
|
||||
|
||||
// Focus element details. Used to move the viewport
|
||||
let focusElement = memo()
|
||||
|
||||
|
@ -196,8 +199,11 @@
|
|||
await getDims()
|
||||
}
|
||||
|
||||
const getDims = async () => {
|
||||
if (!contentDims.original) {
|
||||
const getDims = async (forceRefresh = false) => {
|
||||
if (!mainContent || !viewPort) {
|
||||
return
|
||||
}
|
||||
if (!contentDims.original || (contentDims.original && forceRefresh)) {
|
||||
contentDims.original = {
|
||||
w: parseInt(mainContent.getBoundingClientRect().width),
|
||||
h: parseInt(mainContent.getBoundingClientRect().height),
|
||||
|
@ -314,7 +320,7 @@
|
|||
|
||||
if ($view.dragging) {
|
||||
// Need to know the internal offset as well.
|
||||
const scrollZones = {
|
||||
scrollZones = {
|
||||
top: y < viewDims.height * 0.05,
|
||||
bottom:
|
||||
y > viewDims.height - ($view.moveStep.h - $view.moveStep.mouse.y),
|
||||
|
@ -325,8 +331,6 @@
|
|||
// Determine which zones are currently in play
|
||||
const dragOutEntries = Object.entries(scrollZones).filter(e => e[1])
|
||||
if (dragOutEntries.length) {
|
||||
const dragOut = Object.fromEntries(dragOutEntries)
|
||||
|
||||
if (!scrollInterval) {
|
||||
const autoScroll = () => {
|
||||
// Some internal tracking for implying direction
|
||||
|
@ -334,12 +338,17 @@
|
|||
// const lastX = $contentPos.x
|
||||
const bump = 30
|
||||
|
||||
return () => {
|
||||
const dragOutEntries = Object.entries(scrollZones).filter(
|
||||
e => e[1]
|
||||
)
|
||||
const dragOut = Object.fromEntries(dragOutEntries)
|
||||
|
||||
// Depending on the zone, you want to move the content
|
||||
// in the opposite direction
|
||||
const xInterval = dragOut.right ? -bump : dragOut.left ? bump : 0
|
||||
const yInterval = dragOut.bottom ? -bump : dragOut.top ? bump : 0
|
||||
|
||||
return () => {
|
||||
contentPos.update(state => ({
|
||||
...state,
|
||||
x: (state.x || 0) + xInterval,
|
||||
|
@ -397,6 +406,7 @@
|
|||
if (scrollInterval) {
|
||||
clearInterval(scrollInterval)
|
||||
scrollInterval = undefined
|
||||
scrollZones = {}
|
||||
}
|
||||
|
||||
// Clear the scroll offset for dragging
|
||||
|
@ -543,19 +553,20 @@
|
|||
)
|
||||
|
||||
onMount(() => {
|
||||
viewObserver = new ResizeObserver(getDims)
|
||||
// As the view/browser resizes, ensure the stored view is up to date
|
||||
viewObserver = new ResizeObserver(
|
||||
Utils.domDebounce(e => {
|
||||
getDims()
|
||||
})
|
||||
)
|
||||
viewObserver.observe(viewPort)
|
||||
|
||||
contentObserver = new ResizeObserver(getDims)
|
||||
contentObserver.observe(mainContent)
|
||||
|
||||
// Global mouse observer
|
||||
document.addEventListener("mouseup", globalMouseUp)
|
||||
})
|
||||
|
||||
onDestroy(() => {
|
||||
viewObserver.disconnect()
|
||||
contentObserver.disconnect()
|
||||
document.removeEventListener("mouseup", globalMouseUp)
|
||||
})
|
||||
</script>
|
||||
|
|
|
@ -44,19 +44,8 @@
|
|||
$: isRowAction = sdk.automations.isRowAction($memoAutomation)
|
||||
|
||||
const refresh = () => {
|
||||
// Build global automation bindings.
|
||||
const environmentBindings =
|
||||
automationStore.actions.buildEnvironmentBindings()
|
||||
|
||||
// Get all processed block references
|
||||
blockRefs = $selectedAutomation.blockRefs
|
||||
|
||||
automationStore.update(state => {
|
||||
return {
|
||||
...state,
|
||||
bindings: [...environmentBindings],
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const getBlocks = automation => {
|
||||
|
|
|
@ -50,9 +50,12 @@
|
|||
// Register the trigger as the focus element for the automation
|
||||
// Onload, the canvas will use the dimensions to center the step
|
||||
if (stepEle && step.type === "TRIGGER" && !$view.focusEle) {
|
||||
const { width, height, left, right, top, bottom, x, y } =
|
||||
stepEle.getBoundingClientRect()
|
||||
|
||||
view.update(state => ({
|
||||
...state,
|
||||
focusEle: stepEle.getBoundingClientRect(),
|
||||
focusEle: { width, height, left, right, top, bottom, x, y },
|
||||
}))
|
||||
}
|
||||
})
|
||||
|
|
Loading…
Reference in New Issue