forked from tsai/budibase
Martin McKeaveney
5 years ago
committed by
GitHub
GitHub
15 changed files with 405 additions and 27 deletions
@ -0,0 +1,240 @@ |
|||
<script context="module"> |
|||
export const Sides = { |
|||
Top: "Top", |
|||
Right: "Right", |
|||
Bottom: "Bottom", |
|||
Left: "Left", |
|||
} |
|||
</script> |
|||
|
|||
<script> |
|||
import { onMount } from "svelte" |
|||
import { get } from "svelte/store" |
|||
import IndicatorSet from "./IndicatorSet.svelte" |
|||
import DNDPositionIndicator from "./DNDPositionIndicator.svelte" |
|||
import { builderStore } from "stores" |
|||
|
|||
let dragInfo |
|||
let dropInfo |
|||
|
|||
const getEdges = (bounds, mousePoint) => { |
|||
const { width, height, top, left } = bounds |
|||
return { |
|||
[Sides.Top]: [mousePoint[0], top], |
|||
[Sides.Right]: [left + width, mousePoint[1]], |
|||
[Sides.Bottom]: [mousePoint[0], top + height], |
|||
[Sides.Left]: [left, mousePoint[1]], |
|||
} |
|||
} |
|||
|
|||
const calculatePointDelta = (point1, point2) => { |
|||
const deltaX = Math.abs(point1[0] - point2[0]) |
|||
const deltaY = Math.abs(point1[1] - point2[1]) |
|||
return Math.sqrt(deltaX * deltaX + deltaY * deltaY) |
|||
} |
|||
|
|||
const getDOMNodeForComponent = component => { |
|||
const parent = component.closest(".component") |
|||
const children = Array.from(parent.childNodes) |
|||
return children?.find(node => node?.nodeType === 1) |
|||
} |
|||
|
|||
// Callback when initially starting a drag on a draggable component |
|||
const onDragStart = e => { |
|||
const parent = e.target.closest(".component") |
|||
if (!parent?.classList.contains("draggable")) { |
|||
return |
|||
} |
|||
|
|||
// Update state |
|||
dragInfo = { |
|||
target: parent.dataset.id, |
|||
parent: parent.dataset.parent, |
|||
} |
|||
builderStore.actions.selectComponent(dragInfo.target) |
|||
builderStore.actions.setDragging(true) |
|||
|
|||
// Highlight being dragged by setting opacity |
|||
const child = getDOMNodeForComponent(e.target) |
|||
if (child) { |
|||
child.style.opacity = "0.5" |
|||
} |
|||
} |
|||
|
|||
// Callback when drag stops (whether dropped or not) |
|||
const onDragEnd = e => { |
|||
// Reset opacity style |
|||
if (dragInfo) { |
|||
const child = getDOMNodeForComponent(e.target) |
|||
if (child) { |
|||
child.style.opacity = "" |
|||
} |
|||
} |
|||
|
|||
// Reset state and styles |
|||
dragInfo = null |
|||
dropInfo = null |
|||
builderStore.actions.setDragging(false) |
|||
} |
|||
|
|||
// Callback when on top of a component |
|||
const onDragOver = e => { |
|||
// Skip if we aren't validly dragging currently |
|||
if (!dragInfo || !dropInfo) { |
|||
return |
|||
} |
|||
|
|||
e.preventDefault() |
|||
const { droppableInside, bounds } = dropInfo |
|||
const { top, left, height, width } = bounds |
|||
const mouseY = e.clientY |
|||
const mouseX = e.clientX |
|||
const snapFactor = droppableInside ? 0.33 : 0.5 |
|||
const snapLimitV = Math.min(40, height * snapFactor) |
|||
const snapLimitH = Math.min(40, width * snapFactor) |
|||
|
|||
// Determine all sies we are within snap range of |
|||
let sides = [] |
|||
if (mouseY <= top + snapLimitV) { |
|||
sides.push(Sides.Top) |
|||
} else if (mouseY >= top + height - snapLimitV) { |
|||
sides.push(Sides.Bottom) |
|||
} |
|||
if (mouseX < left + snapLimitH) { |
|||
sides.push(Sides.Left) |
|||
} else if (mouseX > left + width - snapLimitH) { |
|||
sides.push(Sides.Right) |
|||
} |
|||
|
|||
// When no edges match, drop inside if possible |
|||
if (!sides.length) { |
|||
dropInfo.mode = droppableInside ? "inside" : null |
|||
dropInfo.side = null |
|||
return |
|||
} |
|||
|
|||
// When one edge matches, use that edge |
|||
if (sides.length === 1) { |
|||
dropInfo.side = sides[0] |
|||
if ([Sides.Top, Sides.Left].includes(sides[0])) { |
|||
dropInfo.mode = "above" |
|||
} else { |
|||
dropInfo.mode = "below" |
|||
} |
|||
return |
|||
} |
|||
|
|||
// When 2 edges match, work out which is closer |
|||
const mousePoint = [mouseX, mouseY] |
|||
const edges = getEdges(bounds, mousePoint) |
|||
const edge1 = edges[sides[0]] |
|||
const delta1 = calculatePointDelta(mousePoint, edge1) |
|||
const edge2 = edges[sides[1]] |
|||
const delta2 = calculatePointDelta(mousePoint, edge2) |
|||
const edge = delta1 < delta2 ? sides[0] : sides[1] |
|||
dropInfo.side = edge |
|||
if ([Sides.Top, Sides.Left].includes(edge)) { |
|||
dropInfo.mode = "above" |
|||
} else { |
|||
dropInfo.mode = "below" |
|||
} |
|||
} |
|||
|
|||
// Callback when entering a potential drop target |
|||
const onDragEnter = e => { |
|||
// Skip if we aren't validly dragging currently |
|||
if (!dragInfo) { |
|||
return |
|||
} |
|||
|
|||
const element = e.target.closest(".component") |
|||
if ( |
|||
element && |
|||
element.classList.contains("droppable") && |
|||
element.dataset.id !== dragInfo.target |
|||
) { |
|||
// Do nothing if this is the same target |
|||
if (element.dataset.id === dropInfo?.target) { |
|||
return |
|||
} |
|||
|
|||
// Ensure the dragging flag is always set. |
|||
// There's a bit of a race condition between the app reinitialisation |
|||
// after selecting the DND component and setting this the first time |
|||
if (!get(builderStore).isDragging) { |
|||
builderStore.actions.setDragging(true) |
|||
} |
|||
|
|||
// Store target ID |
|||
const target = element.dataset.id |
|||
|
|||
// Precompute and store some info to avoid recalculating everything in |
|||
// dragOver |
|||
const child = getDOMNodeForComponent(e.target) |
|||
const bounds = child.getBoundingClientRect() |
|||
dropInfo = { |
|||
target, |
|||
name: element.dataset.name, |
|||
droppableInside: element.classList.contains("empty"), |
|||
bounds, |
|||
} |
|||
} else { |
|||
dropInfo = null |
|||
} |
|||
} |
|||
|
|||
// Callback when leaving a potential drop target. |
|||
// Since we don't style our targets, we don't need to unset anything. |
|||
const onDragLeave = () => {} |
|||
|
|||
// Callback when dropping a drag on top of some component |
|||
const onDrop = e => { |
|||
e.preventDefault() |
|||
if (dropInfo?.mode) { |
|||
builderStore.actions.moveComponent( |
|||
dragInfo.target, |
|||
dropInfo.target, |
|||
dropInfo.mode |
|||
) |
|||
} |
|||
} |
|||
|
|||
onMount(() => { |
|||
// Events fired on the draggable target |
|||
document.addEventListener("dragstart", onDragStart, false) |
|||
document.addEventListener("dragend", onDragEnd, false) |
|||
|
|||
// Events fired on the drop targets |
|||
document.addEventListener("dragover", onDragOver, false) |
|||
document.addEventListener("dragenter", onDragEnter, false) |
|||
document.addEventListener("dragleave", onDragLeave, false) |
|||
document.addEventListener("drop", onDrop, false) |
|||
|
|||
return () => { |
|||
// Events fired on the draggable target |
|||
document.removeEventListener("dragstart", onDragStart, false) |
|||
document.removeEventListener("dragend", onDragEnd, false) |
|||
|
|||
// Events fired on the drop targets |
|||
document.removeEventListener("dragover", onDragOver, false) |
|||
document.removeEventListener("dragenter", onDragEnter, false) |
|||
document.removeEventListener("dragleave", onDragLeave, false) |
|||
document.removeEventListener("drop", onDrop, false) |
|||
} |
|||
}) |
|||
</script> |
|||
|
|||
<IndicatorSet |
|||
componentId={dropInfo?.mode === "inside" ? dropInfo.target : null} |
|||
color="var(--spectrum-global-color-static-green-500)" |
|||
zIndex="930" |
|||
transition |
|||
prefix="Inside" |
|||
/> |
|||
|
|||
<DNDPositionIndicator |
|||
{dropInfo} |
|||
color="var(--spectrum-global-color-static-green-500)" |
|||
zIndex="940" |
|||
transition |
|||
/> |
|||
@ -0,0 +1,54 @@ |
|||
<script> |
|||
import Indicator from "./Indicator.svelte" |
|||
import { Sides } from "./DNDHandler.svelte" |
|||
|
|||
export let dropInfo |
|||
export let zIndex |
|||
export let color |
|||
export let transition |
|||
|
|||
$: dimensions = getDimensions(dropInfo) |
|||
$: prefix = dropInfo?.mode === "above" ? "Before" : "After" |
|||
$: text = `${prefix} ${dropInfo?.name}` |
|||
$: renderKey = `${dropInfo?.target}-${dropInfo?.side}` |
|||
|
|||
const getDimensions = info => { |
|||
const { bounds, side } = info ?? {} |
|||
if (!bounds || !side) { |
|||
return null |
|||
} |
|||
const { left, top, width, height } = bounds |
|||
if (side === Sides.Top || side === Sides.Bottom) { |
|||
return { |
|||
top: side === Sides.Top ? top - 4 : top + height, |
|||
left: left - 2, |
|||
width: width + 4, |
|||
height: 0, |
|||
} |
|||
} else { |
|||
return { |
|||
top: top - 2, |
|||
left: side === Sides.Left ? left - 4 : left + width, |
|||
width: 0, |
|||
height: height + 4, |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
{#key renderKey} |
|||
{#if dimensions && dropInfo?.mode !== "inside"} |
|||
<Indicator |
|||
left={Math.round(dimensions.left)} |
|||
top={Math.round(dimensions.top)} |
|||
width={dimensions.width} |
|||
height={dimensions.height} |
|||
{text} |
|||
{zIndex} |
|||
{color} |
|||
{transition} |
|||
alignRight={dropInfo?.side === Sides.Right} |
|||
line |
|||
/> |
|||
{/if} |
|||
{/key} |
|||
Loading…
Reference in new issue