search

3rd / tsdiagram

Create diagrams and plan your code with TypeScript.
https://tsdiagram.com
GNU General Public License v3.0
429 stars 16 forks source link

xyflow/react theming #15

Open jhvst opened 3 months ago

jhvst commented 3 months ago

Hi there,

First off, thanks for the public code. I found it when trying to export SVG from React Flow.

I started with a new template which fetched the new @xyflow/react path. This had the downside of the theming to break: the charts would not have boxes around them, and lines.

After some painstaking troubleshooting, I found that the new themes use CSS variables to control the styles. The iframe code does not have the parent theming class applied, but adding the following fixes that:

    iframeDocument.body.classList.add("react-flow", "light")

This code is in the iframe listener code.

Thought to save you some time should you wish to upgrade!

3rd commented 3 months ago

Hey, thank you so much for the tip! Started looking into the upgrade today, managed to break a few things in https://github.com/3rd/tsdiagram/pull/16

jhvst commented 3 months ago

FWIW I dumped my code here: https://github.com/jhvst/jhvst.github.io/commit/0c5ea25f90f3a2d9aba088c21611647fdeae05e2#diff-b7771b1224785d0d94a1ce9651cc994fe7e2aabaf936202ecb6a5f3ccf739110