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.