search

wavedrom / wavedrom

:ocean: Digital timing diagram rendering engine
https://wavedrom.com
MIT License
2.84k stars 351 forks source link

Using narrow skins with online js imports #401

Open narcolepsy opened 7 months ago

narcolepsy commented 7 months ago

Is there a means to have different skin widths for multiple diagrams residing on the same webpage? I've tried a few things but essentially this

<script src="https://cdnjs.cloudflare.com/ajax/libs/wavedrom/3.1.0/skins/default.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavedrom/3.1.0/skins/narrow.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavedrom/3.1.0/wavedrom.min.js" type="text/javascript"></script>

Only the ordering matters if I do this. If I copy in WaveSkin.default=[bla...] from default.js into narrow.js to avoid recreating variables and doing an additional export it still does not work.

Any thoughts on this greatly appreciated

Ganesh-AT commented 7 months ago

The short answer is that it is not possible (when using WaveDrom 3.3.0 or earlier versions).

I reported this issue back in 2019 in a different context [ #263 ], but the underlying issue is the same. WaveDrom uses 'defs' for the various bricks used to assemble the waveform. Unfortunately, all skins have the same name for each def element, even though their rendering may be different. Therefore, assembling two SVGs generated with different skins together will not work.

The way to resolve it would be to have unique def element IDs for different skins, and the engine has to be updated to use the new IDs based on the chosen skin. I am not aware of any public fork of WaveDrom with that change.