how to rotate a SortableProvider / useSortableContext returns null

[georgfaust]

I need to rotated a SortableProvider.

In the example https://solid-dnd.com/?example=Sortable%2520list%2520%28vertical%29 I did that like:

<SortableProvider ids={ids()}>
    <div class="flex flex-col w-80 gap-4 mt-40 rotate-[90deg] items-start">
        <For each={items()}>{(item) => <Sortable item={item} />}</For>
    </div>
</SortableProvider>

(https://github.com/georgfaust/solid-dnd-examples/blob/ac61ff21f0a59ba7d8d6dcb295c6c980a2180ee1/src/sortable_list_vertical.jsx#L59C13-L63C32)

This does not work, because the transformer does sth like

delta.x = targetLayout.x - currentLayout.x;
delta.y = targetLayout.y - currentLayout.y;
...
return { x: transform.x + delta.x, y: transform.y + delta.y };

which is not correct due to the rotation of the container.

I could adjust the transformation, but I'd need access to sortableState but useSortableContext always returns null.

1. is there an easier way than calculating the delta adjusted by the container rotation?
2. if not, how can I get the sortableState (need initialIds and sortedIds)

[georgfaust]

This seems to be a simple fix, but has to happen inside the lib, I just added:

if (currentLayout && targetLayout) {
  delta.x = targetLayout.x - currentLayout.x;
  delta.y = targetLayout.y - currentLayout.y;
  if (dndState.active.draggable) {
    delta = Vector.rotate(delta, -dndState.active.draggable.data.rotation) <-- added this
  }
}

here:

solid-dnd/src/create-sortable.ts

Line 49 in 809014f

if (currentLayout && targetLayout) {

Usage like:

<MySortableProvider onDragStart={onDragStartSortableThisIsNeverCalled} ids={ids()}>
    <div style={`transform: rotate(${rotation}deg);`}>
        <For each={items()}>{(item) => 
            <Sortable item={item} rotation={rotation} />
        }</For>
    </div>
</MySortableProvider>

Note, that I have to put the rotation into the sortable, as there seems to be no way to put data into the SortableProvider.