Using rem as unit in transforms

Start at the getTranslation function shown in the issue and trace where its transform string, unitSuffix, positionOffset, and scale values are used. Review the surrounding transform behavior before choosing an API for rem-compatible output. Done means draggable positioning works with custom units without requiring DraggableCore, with coverage for offsets and scaling.

Draggable works just as I need, with one exception. The CSS transforms are done with pixels, but I need them to be rems, as my application uses them for scaling stuff down 1:1. Pretty much everything in my app with a pixel unit is converted with this little helper: (x) => ${x / 16}rem

Is it possible to change those without ditching the batteries and using DraggableCore? I took a quick peek at the source and looks like no, this requires some changes.

export function getTranslation({x, y}: ControlPosition, positionOffset: PositionOffsetControlPosition, unitSuffix: string): string {
  let translation = `translate(${x}${unitSuffix},${y}${unitSuffix})`;
  if (positionOffset) {
    const defaultX = `${(typeof positionOffset.x === 'string') ? positionOffset.x : positionOffset.x + unitSuffix}`;
    const defaultY = `${(typeof positionOffset.y === 'string') ? positionOffset.y : positionOffset.y + unitSuffix}`;
    translation = `translate(${defaultX}, ${defaultY})` + translation;
  }
  return translation;
}

Maybe with a customizer that takes the translation and params used to build it, and does whatever it wants with it? Not everyone is using 16 as the baseline value so it might be hard to support rems directly, so this might be an ok compromise.

export function getTranslation({x, y}: ControlPosition, positionOffset: PositionOffsetControlPosition, unitSuffix: string, customizer?: (translation: string, xy: ControlPosition, offset: PositionOffsetControlPosition, unitSuffix: string) => string): string {
  let translation = `translate(${x}${unitSuffix},${y}${unitSuffix})`;

  if (customizer) {
    return customizer(translation, { x, y }, positionOffset, unitSuffix)
  }

  if (positionOffset) {
    const defaultX = `${(typeof positionOffset.x === 'string') ? positionOffset.x : positionOffset.x + unitSuffix}`;
    const defaultY = `${(typeof positionOffset.y === 'string') ? positionOffset.y : positionOffset.y + unitSuffix}`;
    translation = `translate(${defaultX}, ${defaultY})` + translation;
  }
  return translation;
}

I haven't tested this, just wrote it inline. Is there an easier / better / already supported way?

I tried using the scale property, but either I'm using it wrong or it doesn't work in my case. ATM I have my application scaled to ~13px so everything on the "canvas" fits the screen. That means that items on the canvas (draggable) are 0.8102232667450059% of their full size, and I used that as the scale value. The item is supposed to be at the bottom of the canvas, but instead of that, it's outside, not visible. If I scale my app to 100%, it's where it's supposed to be.

If I manually convert the pixels in the transform to rem, everything works as expected. So I'd just like to use rem, if that's possible.

I don't know if my use case is somewhat special or not. It's a "design your own product" kind of app. Instead of working top-left, my app works bottom-center, meaning [0,0] is dead center on the canvas bottom axis. That way I don't have to deal with repositioning everything when screen size changes, or calculate where the center is. If I want an element 200px on the left, I set x to -200. If I want it 50px from the bottom, I set y to 50. Don't know if that messes with the internal calculations of this component, but FYI.