Custom transform function

[Puru Vijay]

Allow user to bring in their custom transform function.

API surface:

{
  transform: ({ offsetX, offsetY, rootNode }) => void
}

You can do whatever you want with the node inside this function. Note this doesn't return a string. If you want to set a transform, you to set it on the node directly, like rootNode.style.transform = translate(${offsetX}px, ${offsetY}px).

Will allow changing top and bottom too. Not encouraged, but if you need it, you can have it

[Puru Vijay]

Thanks to @KevsRepos for this idea

[KevShe]

Thanks for opening an issue on my behalf! While this looks like the perfect way for 100% customizability, I imagined something more simple, like directly adding transform values?

interface DragOptionTransformations {
  rotate?: string,
  scale?: string,
  skew?: string,
  matrix?: Array<number>,
  ...rotateX, rotateY and so on.
}

which would reflect the css implementation of the transform property. Only the translate (and translate3d) properties would not be allowed, to avoid doubled values.

[Puru Vijay]

It looks like a good idea, but I'm afraid this could lead to feature creep for me. rotating and scaling are not concern for a draggable library, and for my sanity, I shouldn't give any specific preference to these. Will also help keep the bundle size low.

However, I can make it such that you can return the value of a transform as a string and it will be applied, or return null and let the user do whatever they want with node.style.PROPERTY = VALUE

[Puru Vijay]

In fact, I think I'm comfortable shipping this in 2.0 release. Not a very big feature on its own

[Puru Vijay]

Hi, its released in v2.0.0-next.6 https://v2.neodrag.dev/docs/svelte#transform

[KevShe]

Hey, just tested the feature and it works! But I am experiencing a problem. And it makes sense: I can now properly add other transformations like rotate, scale and so on to the element. But the transformations only take affect when dragging the element. It makes sense, because the tansform function obviously only fires when dragging. Now thats a problem, because when I want to transform the element, I want to transform it directly. I could probably find workarounds, but then I could have just kept living with the workaround I already had before 😄

So I thought about it and maybe a trigger function or something like that could help. The example in this Svelte script (but should be applicable to all other frameworks) could look like this:

<script>
import {triggerTransform} from "neodrag/svelte";

let rotate = 0;

$: {
  rotate, triggerTransform()
}
</script>

<button on:click={() => rotate++}>rotate + 1</button>

But I think you agree, this doesnt feel satisfying.
Well, there is another option. As of now, 88% of all global users support setting the transform values as their own properties without the restrictive transform property: https://caniuse.com/mdn-css_properties_translate
If neodrag would set only the translate property instead of transform: translate(), we could easily implement our own logic to set other transformations agnostic from the neodrag library.

[Puru Vijay]

translate is already here 😁 https://v2.neodrag.dev/docs/svelte#legacyTranslate

This should satisfy your use case, although if you have any other gripes about transform let me know. A big constraint, though, is that I want to export only one thing from these libraries. If i export one more thing, it will be equal to managing 10 new things rather, than one because of different adapters.

[KevShe]

Oh great, then I think I have everything I need. Besides that, the new custom transform function surely has it advantages anyway 😁