feat(shared): Better theme support in Dot
This commit is contained in:
parent
108d83b834
commit
29fe78843f
4 changed files with 17 additions and 9 deletions
|
@ -36,6 +36,12 @@ const noBlack = orig => {
|
|||
if (orig.getAttribute('stroke') === '#000000') {
|
||||
orig.setAttribute('stroke', 'currentColor')
|
||||
}
|
||||
if (orig.getAttribute('fill') === '#000000') {
|
||||
orig.setAttribute('fill', 'currentColor')
|
||||
}
|
||||
if (orig.getAttribute('color') === '#000000') {
|
||||
orig.setAttribute('color', 'currentColor')
|
||||
}
|
||||
|
||||
return orig
|
||||
}
|
||||
|
@ -76,8 +82,8 @@ const coarse = (svg, options) => {
|
|||
|
||||
const rc = rough.svg(svg, options || {})
|
||||
|
||||
// Replace shapes
|
||||
const children = svg.querySelectorAll('circle, rect, ellipse, line, polygon, polyline, path')
|
||||
|
||||
for(let i = 0; i < children.length; i += 1) {
|
||||
const original = noBlack(children[i]);
|
||||
const params = [];
|
||||
|
@ -125,6 +131,11 @@ const coarse = (svg, options) => {
|
|||
|
||||
original.replaceWith(replacement);
|
||||
}
|
||||
|
||||
// Replace text color
|
||||
const text = svg.querySelectorAll('text')
|
||||
for(let i = 0; i < text.length; i += 1) noBlack(text[i])
|
||||
|
||||
}
|
||||
|
||||
export default coarse
|
||||
|
|
|
@ -59,10 +59,9 @@ const Dot = props => {
|
|||
// Strip width/height so it's responsive
|
||||
svgRef.current.children[0].attributes.width.value = ""
|
||||
svgRef.current.children[0].attributes.height.value = ""
|
||||
// Set style for theme support
|
||||
svgRef.current.children[0].setAttribute('stroke', "currentColor")
|
||||
// Add class for specific styling
|
||||
svgRef.current.children[0].setAttribute('class', "no-fs")
|
||||
})
|
||||
|
||||
}, [dot])
|
||||
|
||||
return (
|
||||
|
@ -80,7 +79,7 @@ const Dot = props => {
|
|||
ref={svgRef}
|
||||
onClick={() => setZoom(!zoom)}
|
||||
className={zoom
|
||||
? 'svg-zoom non-fs-svg'
|
||||
? 'svg-zoom non-fs-svg text-base-content'
|
||||
: "dot shadow p-2 rounded -mt-8 hover:cursor-zoom-in text-base-content non-fs-svg"
|
||||
}
|
||||
dangerouslySetInnerHTML={{__html: svg}}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue