MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Improve column/row detection by appending an ephemeral child component and tune timings

This commit is contained in:
Andrew Kingston 2022-10-11 08:52:45 +01:00
parent e90a79257f
commit efe9425d3d
3 changed files with 25 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/client/src/components/Component.svelte
View File

@ -489,21 +489,15 @@
display: contents; display: contents;
} }
.component :global(> *) { .component :global(> *) {
transition: padding 250ms ease, border 250ms ease; transition: padding 260ms ease, border 260ms ease;
} }
.component.explode :global(> *) { .component.explode :global(> *) {
padding: 16px !important; padding: 12px !important;
gap: 16px !important; gap: 12px !important;
border: 2px dashed var(--spectrum-global-color-gray-400) !important; border: 2px dotted var(--spectrum-global-color-gray-400) !important;
border-radius: 4px !important; border-radius: 4px !important;
} }
.interactive :global(*:hover) { .interactive :global(*) {
cursor: pointer; cursor: default;
}
.draggable :global(*:hover) {
cursor: grab;
}
.editing :global(*:hover) {
cursor: auto;
} }
</style> </style>

21
packages/client/src/components/preview/DNDHandler.svelte
View File

@ -102,14 +102,21 @@
return return
} }
// Append an ephemeral div to allow us to determine layout if only one
// child exists
let ephemeralDiv
if (node.children.length === 1) {
ephemeralDiv = document.createElement("div")
ephemeralDiv.classList.add("placeholder")
node.appendChild(ephemeralDiv)
}
// We're now hovering over something which accepts children and is not // We're now hovering over something which accepts children and is not
// empty, so we need to work out where to inside the placeholder // empty, so we need to work out where to inside the placeholder
// Calculate the coordinates of various locations on each child. // Calculate the coordinates of various locations on each child.
// We include the placeholder component in this as it guarantees we have
// at least 2 child components, and therefore guarantee there is no
// ambiguity in the layout.
const childCoords = [...(node.children || [])].map(node => { const childCoords = [...(node.children || [])].map(node => {
const bounds = node.children[0].getBoundingClientRect() const child = node.children?.[0] || node
const bounds = child.getBoundingClientRect()
return { return {
placeholder: node.classList.contains("placeholder"), placeholder: node.classList.contains("placeholder"),
centerX: bounds.left + bounds.width / 2, centerX: bounds.left + bounds.width / 2,
@ -121,6 +128,12 @@
} }
}) })
// Now that we've calculated the position of the children, we no longer need
// the ephemeral div
if (ephemeralDiv) {
node.removeChild(ephemeralDiv)
}
// Calculate the variance between each set of positions on the children // Calculate the variance between each set of positions on the children
const variances = Object.keys(childCoords[0]) const variances = Object.keys(childCoords[0])
.filter(x => x !== "placeholder") .filter(x => x !== "placeholder")

4
packages/client/src/components/preview/Indicator.svelte
View File

@ -19,8 +19,8 @@
<div <div
in:fade={{ in:fade={{
delay: transition ? 130 : 0, delay: transition ? 100 : 0,
duration: transition ? 130 : 0, duration: transition ? 100 : 0,
}} }}
class="indicator" class="indicator"
class:flipped class:flipped