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

Fix dragging on tablet preview

This commit is contained in:
Andrew Kingston 2024-08-10 14:40:32 +01:00
parent 781a749a07
commit 34448cfca2
No known key found for this signature in database
2 changed files with 11 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
<script> <script>
import { onMount, onDestroy } from "svelte" import { onMount, onDestroy, getContext } from "svelte"
import { builderStore, componentStore } from "stores" import { builderStore, componentStore } from "stores"
import { Utils, memo } from "@budibase/frontend-core" import { Utils, memo } from "@budibase/frontend-core"
import { GridRowHeight } from "constants" import { GridRowHeight } from "constants"
@ -8,8 +8,11 @@
getGridParent, getGridParent,
GridParams, GridParams,
getGridVar, getGridVar,
Devices,
} from "utils/grid" } from "utils/grid"
const context = getContext("context")
// Smallest possible 1x1 transparent GIF // Smallest possible 1x1 transparent GIF
const ghost = new Image(1, 1) const ghost = new Image(1, 1)
ghost.src = ghost.src =
@ -20,7 +23,7 @@
let gridStyles = memo() let gridStyles = memo()
// Grid CSS variables // Grid CSS variables
$: device = $builderStore.previewDevice $: device = $context.device.mobile ? Devices.Mobile : Devices.Desktop
$: vars = { $: vars = {
colStart: getGridVar(device, GridParams.ColStart), colStart: getGridVar(device, GridParams.ColStart),
colEnd: getGridVar(device, GridParams.ColEnd), colEnd: getGridVar(device, GridParams.ColEnd),
@ -143,7 +146,6 @@
if (!domGrid) { if (!domGrid) {
return return
} }
const gridCols = parseInt(domGrid.dataset.cols)
const styles = getComputedStyle(domComponent.parentNode) const styles = getComputedStyle(domComponent.parentNode)
// Show as active // Show as active
@ -163,12 +165,10 @@
grid: { grid: {
startX: e.clientX, startX: e.clientX,
startY: e.clientY, startY: e.clientY,
rowStart: parseInt(styles["grid-row-start"]),
// Ensure things are within limits rowEnd: parseInt(styles["grid-row-end"]),
rowStart: Math.max(styles["grid-row-start"], 1), colStart: parseInt(styles["grid-column-start"]),
rowEnd: Math.max(styles["grid-row-end"], 2), colEnd: parseInt(styles["grid-column-end"]),
colStart: minMax(styles["grid-column-start"], 1, gridCols),
colEnd: minMax(styles["grid-column-end"], 2, gridCols + 1),
}, },
} }

4
packages/client/src/utils/grid.js
View File

@ -34,7 +34,7 @@ export const GridClasses = {
} }
// Enum for device preview type, included in grid CSS variables // Enum for device preview type, included in grid CSS variables
const Devices = { export const Devices = {
Desktop: "desktop", Desktop: "desktop",
Mobile: "mobile", Mobile: "mobile",
} }
@ -100,7 +100,7 @@ export const gridLayout = (node, metadata) => {
[GridParams.ColEnd]: [GridParams.ColEnd]:
"round(up, calc((var(--grid-spacing) * 2 + var(--default-width)) / var(--col-size) + 1))", "round(up, calc((var(--grid-spacing) * 2 + var(--default-width)) / var(--col-size) + 1))",
[GridParams.RowStart]: 1, [GridParams.RowStart]: 1,
[GridParams.RowEnd]: Math.ceil(height / GridRowHeight) + 1, [GridParams.RowEnd]: Math.max(2, Math.ceil(height / GridRowHeight) + 1),
} }
// Specify values for all grid params for all devices, and strip these CSS // Specify values for all grid params for all devices, and strip these CSS