Closed PuruVJ closed 1 year ago
Thanks to @KevsRepos for this idea
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.
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
In fact, I think I'm comfortable shipping this in 2.0 release. Not a very big feature on its own
Hi, its released in v2.0.0-next.6 https://v2.neodrag.dev/docs/svelte#transform
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.
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.
Oh great, then I think I have everything I need. Besides that, the new custom transform function surely has it advantages anyway 😁
Allow user to bring in their custom
transform
function.API surface:
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
andbottom
too. Not encouraged, but if you need it, you can have it