diff --git a/packages/client/manifest.json b/packages/client/manifest.json index 9851fd1155..db276df8bc 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -3040,7 +3040,7 @@ "editable": true, "size": { "width": 400, - "height": 32 + "height": 60 }, "settings": [ { @@ -3071,7 +3071,7 @@ "editable": true, "size": { "width": 400, - "height": 32 + "height": 60 }, "settings": [ { @@ -3207,7 +3207,7 @@ "editable": true, "size": { "width": 400, - "height": 50 + "height": 60 }, "settings": [ { @@ -3309,7 +3309,7 @@ "editable": true, "size": { "width": 400, - "height": 50 + "height": 60 }, "settings": [ { @@ -3395,7 +3395,7 @@ "editable": true, "size": { "width": 400, - "height": 50 + "height": 60 }, "settings": [ { @@ -3481,7 +3481,7 @@ "editable": true, "size": { "width": 400, - "height": 50 + "height": 60 }, "settings": [ { @@ -3695,7 +3695,7 @@ "editable": true, "size": { "width": 400, - "height": 50 + "height": 60 }, "settings": [ { @@ -3901,8 +3901,8 @@ "editable": true, "requiredAncestors": ["form"], "size": { - "width": 20, - "height": 20 + "width": 400, + "height": 60 }, "settings": [ { @@ -4028,7 +4028,7 @@ "editable": true, "size": { "width": 400, - "height": 150 + "height": 100 }, "settings": [ { @@ -4152,7 +4152,7 @@ "editable": true, "size": { "width": 400, - "height": 50 + "height": 60 }, "settings": [ { @@ -4270,7 +4270,7 @@ "styles": ["size"], "size": { "width": 400, - "height": 50 + "height": 60 }, "settings": [ { @@ -4430,7 +4430,7 @@ "styles": ["size"], "size": { "width": 400, - "height": 50 + "height": 60 }, "settings": [ { @@ -4785,7 +4785,7 @@ "editable": true, "size": { "width": 400, - "height": 50 + "height": 60 }, "settings": [ { diff --git a/packages/client/src/components/preview/GridDNDHandler.svelte b/packages/client/src/components/preview/GridDNDHandler.svelte index db19c460c1..ad3a5a3ae1 100644 --- a/packages/client/src/components/preview/GridDNDHandler.svelte +++ b/packages/client/src/components/preview/GridDNDHandler.svelte @@ -3,7 +3,13 @@ import { builderStore, componentStore } from "stores" import { Utils, memo } from "@budibase/frontend-core" import { GridRowHeight } from "constants" - import { isGridEvent, GridParams, getGridVar, Devices } from "utils/grid" + import { + isGridEvent, + GridParams, + getGridVar, + Devices, + GridDragModes, + } from "utils/grid" const context = getContext("context") @@ -49,7 +55,7 @@ let deltaX = Math.round(diffX / colSize) const diffY = mouseY - startY let deltaY = Math.round(diffY / GridRowHeight) - if (mode === "move") { + if (mode === GridDragModes.Move) { deltaX = minMax(deltaX, 1 - colStart, cols + 1 - colEnd) deltaY = Math.max(deltaY, 1 - rowStart) const newStyles = { @@ -59,7 +65,7 @@ [vars.rowEnd]: rowEnd + deltaY, } styles.set(newStyles) - } else if (mode === "resize") { + } else if (mode === GridDragModes.Resize) { let newStyles = {} if (side === "right") { newStyles[vars.colEnd] = Math.max(colEnd + deltaX, colStart + 1) @@ -103,14 +109,13 @@ // Extract state let mode, id, side - if (e.target.classList.contains("anchor")) { - // Handle resize - mode = "resize" + if (e.target.dataset.indicator === "true") { + mode = e.target.dataset.dragMode id = e.target.dataset.id side = e.target.dataset.side } else { // Handle move - mode = "move" + mode = GridDragModes.Move const component = e.target.closest(".component") id = component.dataset.id } diff --git a/packages/client/src/components/preview/Indicator.svelte b/packages/client/src/components/preview/Indicator.svelte index 112d392354..dce7945b29 100644 --- a/packages/client/src/components/preview/Indicator.svelte +++ b/packages/client/src/components/preview/Indicator.svelte @@ -1,5 +1,6 @@