65 lines
1.5 KiB
Svelte
65 lines
1.5 KiB
Svelte
<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
|
|
}
|
|
|
|
// Get preview offset
|
|
const root = document.getElementById("clip-root")
|
|
const rootBounds = root.getBoundingClientRect()
|
|
|
|
// Subtract preview offset from bounds
|
|
let { left, top, width, height } = bounds
|
|
left -= rootBounds.left
|
|
top -= rootBounds.top
|
|
|
|
// Determine position
|
|
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}
|