challenge-01.md · grid · livewire · alpine
▸ problema
Colocar un componente que ocupa varias celdas a partir de una seleccion drag
restriccion: El editor lo rendera Livewire en server, pero el drag pasa en el navegador. Mandar un evento por cada movimiento del puntero inundaria el server; mandar solo la seleccion final obliga a Livewire a derivar row/col/colspan desde dos coordenadas de celda.
▸ enfoque
Alpine.js trackea el drag localmente y dispara un solo evento Livewire con selectionStart + selectionEnd cuando se suelta el puntero. PageEditor::addComponentToCellFromAlpine() deriva row/col/colspan del min/max de los dos puntos y guarda un PageComponent con grid_position como JSON.
app/Livewire/PageEditor.php php
public function addComponentToCellFromAlpine($type, $selectionStart, $selectionEnd)
{
$row = min($selectionStart['row'], $selectionEnd['row']);
$col = min($selectionStart['col'], $selectionEnd['col']);
$colEnd = max($selectionStart['col'], $selectionEnd['col']);
$colspan = ($colEnd - $col) + 1;
PageComponent::create([
'page_id' => $this->page->id,
'type' => $type,
'settings' => [
'grid_position' => [
'row' => $row, 'col' => $col,
'rowspan' => 1, 'colspan' => $colspan,
],
],
]);
}