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; overflow: hidden;
width: auto; width: auto;
height: auto; height: auto;
grid-column-start: 1; grid-column-start: min(
grid-column-end: var(--default-col-span); max(1, var(--grid-column-start)),
grid-row-start: 1; var(--cols)
grid-row-end: var(--default-row-span); ) !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-height: 100%;
max-width: 100%; max-width: 100%;
} }
.grid { .grid {
position: relative; position: relative;
height: 400px; height: 400px;

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

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