Multiple diagrams on 1 page

[jfhernandeze]

Hi, is there a way to use multiple diagrams on a single livewire page?

I am using this but is not working, only displays one:

@if(!empty($this->mermaidDiagrams))
        @foreach($this->mermaidDiagrams as $mermaidDiagram)
            <div class="mt-4">

                <!-- Contenedor del diagrama con funcionalidad de zoom -->
                <div id="diagrama-{{$loop->index}}-container" class="mermaid-diagram-container">
                    <x-mermaid::livewire-component wire:model="mermaidDiagrams[{{$loop->index}}].diagrama"
                                                   id="diagrama-{{$loop->index}}"/>
                </div>
            </div>
        @endforeach
    @endif

And, if I place all the diagrams on one, it works meaning it renders all but looks awfull because it does it to the right son you end up with micro components you cant see on a 3000px x 50px

[peterjthomson]

As a short-term fix, you could try the non-liveware version, which seems to work fine in a loop:

    @foreach($mermaidDiagrams as $mermaidDiagram)
        <div class="mt-4">
            <div id="diagrama-{{$loop->index}}-container" class="mermaid-diagram-container">
                <x-mermaid::livewire-component class="border mb-3 p-3">
                    {{$mermaidDiagram['diagrama']}}
                </x-mermaid::livewire-component>
            </div>
        </div>
    @endforeach

The Livewire version is relying on your 'parent' livewire controller to handle some of the data state / loop logic / etc. Your first attempt has wire-model which is a good start. I'll have a deeper look.

In the meantime, you can 'publish' the Livewire component or even just paste in the component code into your own component and modify it to see what works. The first thing I'd try is adding wire:key to the component call, then try modifying the {{ $this->id() }} variable in the Alpine code (which is what's actually controlling the rendering in the Livewire version.

[jfhernandeze]

Thank you for the reply Peter, i'll let you know how it goes

…

On Fri, Oct 4, 2024 at 12:18 PM Peter Thomson ***@***.***> wrote: The non-liveware version seems to work fine in a loop: @foreach($mermaidDiagrams as $mermaidDiagram) <div class="mt-4"> <div id="diagrama-{{$loop->index}}-container" class="mermaid-diagram-container"> <x-mermaid::livewire-component class="border mb-3 p-3"> {{$mermaidDiagram['diagrama']}} </x-mermaid::livewire-component> </div> </div> @Endforeach But the Livewire version is relying on your 'parent' livewire controller to handle some of the data state / loop logic / etc. Your first attempt has wire-model which is a good start. I'll have a deeper look. In the meantime, you can 'publish' the Livewire component or even just paste in the component code into your own component and modify it to see what works. The first thing I'd try is adding wire:key to the component call, then try modifying the {{ $this->id() }} variable in the Alpine code (which is what's actually controlling the rendering in the Livewire version. — Reply to this email directly, view it on GitHub <#5 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA7LTD4VCEWAPCXHYPFDFZLZZ3LXRAVCNFSM6AAAAABPL7HVESVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTAOBUG42TAOI> . You are receiving this because you authored the thread.Message ID: <icehouse-ventures/laravel-mermaid/repo-discussions/5/comments/10847509@ github.com>

--