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

Use CSS variables to store grid position metadata

This commit is contained in:
Andrew Kingston 2024-07-29 15:57:43 +01:00
parent bfdbf72b50
commit 1aa7077b9e
No known key found for this signature in database
2 changed files with 44 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/client/src/components/app/container/GridContainer.svelte
View File

@ -68,14 +68,19 @@
overflow: hidden;
width: auto;
height: auto;
grid-column-start: 1;
grid-column-end: var(--default-col-span);
grid-row-start: 1;
grid-row-end: var(--default-row-span);
grid-column-start: min(
max(1, var(--grid-column-start)),
var(--cols)
) !important;
grid-column-end: min(
max(1, var(--grid-column-end)),
var(--cols)
) !important;
grid-row-start: min(max(1, var(--grid-row-start)), var(--rows)) !important;
grid-row-end: min(max(1, var(--grid-row-end)), var(--rows)) !important;
max-height: 100%;
max-width: 100%;
}
.grid {
position: relative;
height: 400px;

59
packages/client/src/components/preview/GridDNDHandler.svelte
View File

@ -70,34 +70,43 @@
deltaY = Math.min(Math.max(deltaY, rowDeltaMin), rowDeltaMax)
deltaX = Math.min(Math.max(deltaX, colDeltaMin), colDeltaMax)
const newStyles = {
"grid-row-start": rowStart + deltaY,
"grid-row-end": rowEnd + deltaY,
"grid-column-start": colStart + deltaX,
"grid-column-end": colEnd + deltaX,
"--grid-row-start": rowStart + deltaY,
"--grid-row-end": rowEnd + deltaY,
"--grid-column-start": colStart + deltaX,
"--grid-column-end": colEnd + deltaX,
}
gridStyles.set(newStyles)
} else if (mode === "resize") {
let newStyles = {}
if (side === "right") {
newStyles["grid-column-end"] = Math.max(colEnd + deltaX, colStart + 1)
newStyles["--grid-column-end"] = Math.max(colEnd + deltaX, colStart + 1)
} else if (side === "left") {
newStyles["grid-column-start"] = Math.min(colStart + deltaX, colEnd - 1)
newStyles["--grid-column-start"] = Math.min(
colStart + deltaX,
colEnd - 1
)
} else if (side === "top") {
newStyles["grid-row-start"] = Math.min(rowStart + deltaY, rowEnd - 1)
newStyles["--grid-row-start"] = Math.min(rowStart + deltaY, rowEnd - 1)
} else if (side === "bottom") {
newStyles["grid-row-end"] = Math.max(rowEnd + deltaY, rowStart + 1)
newStyles["--grid-row-end"] = Math.max(rowEnd + deltaY, rowStart + 1)
} else if (side === "bottom-right") {
newStyles["grid-column-end"] = Math.max(colEnd + deltaX, colStart + 1)
newStyles["grid-row-end"] = Math.max(rowEnd + deltaY, rowStart + 1)
newStyles["--grid-column-end"] = Math.max(colEnd + deltaX, colStart + 1)
newStyles["--grid-row-end"] = Math.max(rowEnd + deltaY, rowStart + 1)
} else if (side === "bottom-left") {
newStyles["grid-column-start"] = Math.min(colStart + deltaX, colEnd - 1)
newStyles["grid-row-end"] = Math.max(rowEnd + deltaY, rowStart + 1)
newStyles["--grid-column-start"] = Math.min(
colStart + deltaX,
colEnd - 1
)
newStyles["--grid-row-end"] = Math.max(rowEnd + deltaY, rowStart + 1)
} else if (side === "top-right") {
newStyles["grid-column-end"] = Math.max(colEnd + deltaX, colStart + 1)
newStyles["grid-row-start"] = Math.min(rowStart + deltaY, rowEnd - 1)
newStyles["--grid-column-end"] = Math.max(colEnd + deltaX, colStart + 1)
newStyles["--grid-row-start"] = Math.min(rowStart + deltaY, rowEnd - 1)
} else if (side === "top-left") {
newStyles["grid-column-start"] = Math.min(colStart + deltaX, colEnd - 1)
newStyles["grid-row-start"] = Math.min(rowStart + deltaY, rowEnd - 1)
newStyles["--grid-column-start"] = Math.min(
colStart + deltaX,
colEnd - 1
)
newStyles["--grid-row-start"] = Math.min(rowStart + deltaY, rowEnd - 1)
}
gridStyles.set(newStyles)
}
@ -166,20 +175,20 @@
const styles = window.getComputedStyle(domNode)
if (domGrid) {
const minMax = (value, min, max) => Math.min(max, Math.max(min, value))
const getStyle = x => parseInt(styles?.[x] || "0")
const getStyle = x => parseInt(styles?.getPropertyValue(x) || "0")
const getColStyle = x => minMax(getStyle(x), 1, gridCols + 1)
const getRowStyle = x => minMax(getStyle(x), 1, gridRows + 1)
dragInfo.grid = {
startX: e.clientX,
startY: e.clientY,
rowStart: getRowStyle("grid-row-start"),
rowEnd: getRowStyle("grid-row-end"),
colStart: getColStyle("grid-column-start"),
colEnd: getColStyle("grid-column-end"),
rowDeltaMin: 1 - getRowStyle("grid-row-start"),
rowDeltaMax: gridRows + 1 - getRowStyle("grid-row-end"),
colDeltaMin: 1 - getColStyle("grid-column-start"),
colDeltaMax: gridCols + 1 - getColStyle("grid-column-end"),
rowStart: getRowStyle("--grid-row-start"),
rowEnd: getRowStyle("--grid-row-end"),
colStart: getColStyle("--grid-column-start"),
colEnd: getColStyle("--grid-column-end"),
rowDeltaMin: 1 - getRowStyle("--grid-row-start"),
rowDeltaMax: gridRows + 1 - getRowStyle("--grid-row-end"),
colDeltaMin: 1 - getColStyle("--grid-column-start"),
colDeltaMax: gridCols + 1 - getColStyle("--grid-column-end"),
}
handleEvent(e)
}