Cleanup
This commit is contained in:
Andrew Kingston
parent
61940705b9
commit
b4fed6a02f
|
|
@ -1,166 +0,0 @@
|
|||
<script>
|
||||
import { onDestroy, getContext } from "svelte"
|
||||
import { builderStore, componentStore, screenStore } from "@/stores"
|
||||
import { Utils, memo } from "@budibase/frontend-core"
|
||||
import { GridRowHeight } from "@/constants"
|
||||
import { GridParams, getGridVar, Devices } from "@/utils/grid"
|
||||
|
||||
const context = getContext("context")
|
||||
|
||||
// Smallest possible 1x1 transparent GIF
|
||||
const ghost = new Image(1, 1)
|
||||
ghost.src =
|
||||
"data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
|
||||
|
||||
let dragInfo
|
||||
let styles = memo()
|
||||
|
||||
$: placeholderID = findPlaceholderID($screenStore.activeScreen)
|
||||
$: handleNewPlaceholderID(placeholderID)
|
||||
|
||||
// Grid CSS variables
|
||||
$: device = $context.device.mobile ? Devices.Mobile : Devices.Desktop
|
||||
$: vars = {
|
||||
colStart: getGridVar(device, GridParams.ColStart),
|
||||
colEnd: getGridVar(device, GridParams.ColEnd),
|
||||
rowStart: getGridVar(device, GridParams.RowStart),
|
||||
rowEnd: getGridVar(device, GridParams.RowEnd),
|
||||
}
|
||||
|
||||
// Some memoisation of primitive types for performance
|
||||
$: id = dragInfo?.id
|
||||
|
||||
// Set ephemeral styles
|
||||
$: instance = componentStore.actions.getComponentInstance(id)
|
||||
$: $instance?.setEphemeralStyles($styles)
|
||||
|
||||
const findPlaceholderID = screen => {
|
||||
return screen?.props?._children?.find(c => c._placeholder)?._id
|
||||
}
|
||||
|
||||
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
|
||||
|
||||
const handleNewPlaceholderID = async placeholderID => {
|
||||
if (!placeholderID) {
|
||||
stopDragging()
|
||||
return
|
||||
}
|
||||
await sleep(100)
|
||||
onDragStart(placeholderID)
|
||||
}
|
||||
|
||||
// Sugar for a combination of both min and max
|
||||
const minMax = (value, min, max) => Math.min(max, Math.max(min, value))
|
||||
|
||||
const processEvent = Utils.domDebounce((mouseX, mouseY) => {
|
||||
if (!dragInfo?.grid) {
|
||||
return
|
||||
}
|
||||
const { grid, domGrid } = dragInfo
|
||||
const { startX, startY, rowStart, rowEnd, colStart, colEnd } = grid
|
||||
if (!domGrid) {
|
||||
return
|
||||
}
|
||||
const cols = parseInt(domGrid.dataset.cols)
|
||||
const colSize = parseInt(domGrid.dataset.colSize)
|
||||
const diffX = mouseX - startX
|
||||
let deltaX = Math.round(diffX / colSize)
|
||||
const diffY = mouseY - startY
|
||||
let deltaY = Math.round(diffY / GridRowHeight)
|
||||
deltaX = minMax(deltaX, 1 - colStart, cols + 1 - colEnd)
|
||||
deltaY = Math.max(deltaY, 1 - rowStart)
|
||||
const newStyles = {
|
||||
[vars.colStart]: colStart + deltaX,
|
||||
[vars.colEnd]: colEnd + deltaX,
|
||||
[vars.rowStart]: rowStart + deltaY,
|
||||
[vars.rowEnd]: rowEnd + deltaY,
|
||||
opacity: 1,
|
||||
}
|
||||
styles.set(newStyles)
|
||||
})
|
||||
|
||||
const handleEvent = e => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
processEvent(e.clientX, e.clientY)
|
||||
}
|
||||
|
||||
// Callback when initially starting a drag on a draggable component
|
||||
const onDragStart = id => {
|
||||
console.log("DRAG START", id)
|
||||
// Find grid parent and read from DOM
|
||||
const domComponent = document.getElementsByClassName(id)[0]
|
||||
const domGrid = domComponent?.closest(".grid")
|
||||
if (!domGrid) {
|
||||
return
|
||||
}
|
||||
const styles = getComputedStyle(domComponent)
|
||||
const bounds = domComponent.getBoundingClientRect()
|
||||
|
||||
// Show as active
|
||||
domComponent.classList.add("dragging")
|
||||
domGrid.classList.add("highlight")
|
||||
builderStore.actions.selectComponent(id)
|
||||
|
||||
// Update state
|
||||
dragInfo = {
|
||||
domComponent,
|
||||
domGrid,
|
||||
id,
|
||||
gridId: domGrid.parentNode.dataset.id,
|
||||
grid: {
|
||||
startX: bounds.left + bounds.width / 2,
|
||||
startY: bounds.top + bounds.height / 2,
|
||||
rowStart: parseInt(styles["grid-row-start"]),
|
||||
rowEnd: parseInt(styles["grid-row-end"]),
|
||||
colStart: parseInt(styles["grid-column-start"]),
|
||||
colEnd: parseInt(styles["grid-column-end"]),
|
||||
},
|
||||
}
|
||||
|
||||
// Add event handler to clear all drag state when dragging ends
|
||||
document.addEventListener("dragover", onDrag, false)
|
||||
|
||||
// Add event handler to clear all drag state when dragging ends
|
||||
document.addEventListener("dragEnd", stopDragging, false)
|
||||
document.addEventListener("drop", stopDragging, false)
|
||||
}
|
||||
|
||||
const onDrag = e => {
|
||||
if (!dragInfo) {
|
||||
return
|
||||
}
|
||||
handleEvent(e)
|
||||
}
|
||||
|
||||
// Callback when drag stops (whether dropped or not)
|
||||
const stopDragging = async () => {
|
||||
if (!dragInfo) {
|
||||
return
|
||||
}
|
||||
console.log("END")
|
||||
const { id, domGrid, domComponent } = dragInfo
|
||||
|
||||
// Reset DOM
|
||||
domComponent.classList.remove("dragging")
|
||||
domGrid.classList.remove("highlight")
|
||||
document.removeEventListener("dragover", onDrag, false)
|
||||
document.removeEventListener("dragend", stopDragging, false)
|
||||
document.removeEventListener("drop", stopDragging, false)
|
||||
|
||||
// Save changes
|
||||
if ($styles) {
|
||||
builderStore.actions.updateStyles($styles, id)
|
||||
}
|
||||
|
||||
// Reset state
|
||||
dragInfo = null
|
||||
styles.set(null)
|
||||
}
|
||||
|
||||
onDestroy(() => {
|
||||
document.removeEventListener("dragover", onDrag, false)
|
||||
document.removeEventListener("dragend", stopDragging, false)
|
||||
document.removeEventListener("drop", stopDragging, false)
|
||||
})
|
||||
</script>
|
||||
Loading…
Reference in New Issue