Feature request: Ability to position and bound based on center of element rather than element's bounds

[jhobz]

Perhaps this is already possible and, if so, please feel free to let me know. I'd love to be able to position and bound a draggable element based on its center, rather than its bounds (as a configurable option or plugin). This would enable dragging and dropping elements with crosshairs or similar, like in this screenshot.

You can kind of handle the bounding with negative padding, but the positioning is still based on the top-left pixel, which makes assigning (or reading) new positions programmatically more complicated.

[jhobz]

I was able to get something working by overriding position, onDrag, and bounds manually, in case it helps anyone else. I still think a nicer method for enabling this with a simple flag would be a nice addition though.

// svelte
let boundingRect = $state({width: 0, height: 0})
const inlinePadding = $derived(boundingRect.width / 2)
const blockPadding = $derived(boundingRect.height / 2)

const positionComp = Compartment.of(() => positionPlugin({
  current: position && {
    x: position.x - inlinePadding,
    y: position.y - blockPadding,
  }
}))
const eventsComp = Compartment.of(() => events({
  onDrag: (data) => {
    position = {
      x: data.offset.x + inlinePadding,
      y: data.offset.y + blockPadding
    }
  },
  onDragEnd: onDragEnd && ((data) => onDragEnd({
      x: data.offset.x + inlinePadding,
      y: data.offset.y + blockPadding
    }))
}))
const boundsPadding = $derived(
  boundOnCenter ? {
    left: -1 * inlinePadding,
    top: -1 * blockPadding,
    right: -1 * inlinePadding,
    bottom: -1 * blockPadding,
  } : {}
)

// set boundingRect via binding to clientWidth/clientHeight or other methods

[PuruVJ]

Could you make a svelte repl minimal reproduction or something similar? Thanks