Add actions

[nikolai-cc]

transform actions (from svelte-transform lib)
lazyload (but good)
pannable / touch actions
scrolldrag (for horizontal scrolling on carousels)
dnd (dragging between multiple containers)

[MathiasWP]

focus-within (do something with JS when the element meets the requirement of CSS's focus-within)
scroll-into-view (scroll an element into view when a condition is true)

[cesarpe]

Hello Nikolai, could you create some function to rotate, such as resize and draggable. Good job

[cesarpe]

Is there a way to place the draggable windows on top of each other to be selected?

[nikolai-cc]

Hi @cesarpe, I added a rotatable action in v0.3.8!
It works similar to resizable and draggable.

I'm not 100% sure what you mean by your second question, but there are multiple strategies to manage draggable component ordering. Assuming you use an array to render the windows in the first place, the simplest way would be to simply rebuild the array.

See an example showing both the new rotatable component and the ordering strategy in this repl. (Keep in mind that this is a simplified example. Take performance into account if your situation is more complex.)

[cesarpe]

Hola@cesarpe¡Agregué una acción rotatoria en la versión 0.3.8! Funciona de manera similar a la acción redimensionable y arrastrable.

No estoy 100% seguro de lo que quieres decir con tu segunda pregunta, pero existen múltiples estrategias para gestionar el orden de los componentes arrastrables. Suponiendo que utilices una matriz para representar las ventanas en primer lugar, la forma más sencilla sería simplemente reconstruir la matriz.

Vea un ejemplo que muestra tanto el nuevo componente rotatorio como la estrategia de ordenamiento en esta réplica . (Tenga en cuenta que este es un ejemplo simplificado. Tenga en cuenta el rendimiento si su situación es más compleja).

Thank you very much Nicolai, it's just what I need 👍

[cesarpe]

Hi Nicolai,
How can I resize the window (div) of the example you created above (something like this https://svelte.dev/repl/52e662d6220d447495be8cd8851322b9?version=4.2.19 ), I have tried to change it but the result is not good.
ups... I found a way to do it
with resizable

import { draggable, rotatable, resizable } from 'svu/action'
...
<div id={id} class="divi" on:pointerdown 
    style="top: {top}px; left: {left}px; height:{height}px; width:{width}px;"
    use:draggable={{ handle: dragHandle }} 
    use:rotatable={{ handle: rotateHandle }}     
    use:resizable  >
	<header bind:this={dragHandle} />

	<slot />
            
	<span bind:this={rotateHandle} />
    
</div>

[nikolai-cc]

Perfect! Yes it is indeed as easy as adding use:resizable. I changed the previous repl to do that here in this repl.

[cesarpe]

¡Perfecto! Sí, es tan fácil como agregar use:resizable. Cambié la respuesta anterior para hacer eso aquí en esta respuesta .

You are the best, thank you very much.

[cesarpe]

Hi Nikolai, are there any plans to migrate to svelte 5?
Regards

[cesarpe]

Nikolai, When I change position and/or size, is there an event that returns the dimensions of the object I have manipulated?
I want to get the values ​​of top, left, width, height and rotate.
Thanks

[nikolai-cc]

any plans to migrate to svelte 5?

Yes but not very soon, because of two reasons:

• I am very busy with work at the moment which leaves me limited time to work on svu
• I will need some time to think how the significant changes in svelte 5 will impact the overall scope and goals of this library

When I change position and/or size, is there an event that returns the dimensions of the object I have manipulated? I want to get the values ​​of top, left, width, height and rotate

The various actions emit events, so you could use the on:!resize, on:!rotate and on:!drag events for these. The detail prop of the customEvent only returns data relevant to the respective action, but you can get a reference to the target object through event.target, which you can then use however you want.

[cesarpe]

Thanks Nikolai,
I was doing it in another way, but I just used the events you mentioned and it's faster

{#each windows as window (window)}
    <Window id={window.id} top={window.top} left={window.left} width={window.width} height={window.height} rotate={window.rotate}
        classContainer="border border-black " on:pointerdown={() => bringToFront(window)}  cliked={miclikedNode} on:!resize={onresize} on:!drag={ondrag} on:!rotate={onrotate}>            
        <div class="flex flex-col h-full justify-center w-full rounded-full bg-slate-400 text-center">
            {window.text}    
        </div>
    </Window>
{/each}

...
...
 const onresize=(e)=>{
        //console.log("onresize", e)
        //id = console.log("onresize", e.target.id)
        let id = e.target.id
        let {width, height}= e.detail
        let idx = windows.findIndex(x=>x.id==id) 

        windows[idx].width = width
        windows[idx].height = height  
    }
    
    const ondrag=(e)=>{
        //console.log("ondrag", e)
        let {x, y} = e.detail  // esto es translate

        let elem = e.target
        let top = parseInt( elem.style.top, 10 ) + y
        let left = parseInt( elem.style.left, 10 ) + x

        console.log("real top:"+top, " left:"+left )

    }

    const onrotate=(e)=>{
        //console.log("onrotate", e)
        let rotate = e.detail  
        console.log("onrotate", rotate)
    }

And I hope you make time for the conversion to Svelte 5, this library is very good!
Thanks again