mirror-github-bspeice/speice.io
1
0
Fork 0
mirror of https://github.com/bspeice/speice.io synced 2024-12-22 16:48:10 -05:00
Code Issues Releases Wiki Activity

Formatting tweak

Browse Source
This commit is contained in:
Bradlee Speice 2024-12-11 17:31:34 -05:00
parent f643996128
commit 192286a86a
1 changed files with 7 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
blog/2024-11-15-playing-with-fire/src/Canvas.tsx
View File

@ -1,6 +1,5 @@
import React, {useEffect, useState, createContext, useRef} from "react"; import React, {useEffect, useState, createContext, useRef} from "react";
import {useColorMode} from "@docusaurus/theme-common"; import {useColorMode} from "@docusaurus/theme-common";
import BrowserOnly from "@docusaurus/BrowserOnly";
type PainterProps = { type PainterProps = {
width: number; width: number;
@ -76,13 +75,18 @@ export const Canvas: React.FC<CanvasProps> = ({style, children}) => {
} }
}, [painter]); }, [painter]);
const filter = useColorMode().colorMode === 'dark' ? 'invert(1)' : ''; const canvasProps = {
ref: canvasRef,
width,
height,
style: {filter: useColorMode().colorMode === 'dark' ? 'invert(1)' : ''}
}
return ( return (
<> <>
<center> <center>
<div ref={sizingRef} style={style}> <div ref={sizingRef} style={style}>
{width > 0 ? <canvas ref={canvasRef} width={width} height={height} style={{filter}}/> : null} {width > 0 ? <canvas {...canvasProps}/> : null}
</div> </div>
</center> </center>
<PainterContext.Provider value={{width, height, setPainter}}> <PainterContext.Provider value={{width, height, setPainter}}>