From 1aa7077b9ecf8c2140471e3138c20f18537b3476 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 29 Jul 2024 15:57:43 +0100 Subject: [PATCH] Use CSS variables to store grid position metadata --- .../app/container/GridContainer.svelte | 15 +++-- .../components/preview/GridDNDHandler.svelte | 59 +++++++++++-------- 2 files changed, 44 insertions(+), 30 deletions(-) diff --git a/packages/client/src/components/app/container/GridContainer.svelte b/packages/client/src/components/app/container/GridContainer.svelte index 870a593b46..2d7bf109d2 100644 --- a/packages/client/src/components/app/container/GridContainer.svelte +++ b/packages/client/src/components/app/container/GridContainer.svelte @@ -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; diff --git a/packages/client/src/components/preview/GridDNDHandler.svelte b/packages/client/src/components/preview/GridDNDHandler.svelte index 266a86c867..924631bc78 100644 --- a/packages/client/src/components/preview/GridDNDHandler.svelte +++ b/packages/client/src/components/preview/GridDNDHandler.svelte @@ -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) }