mirror-github-bspeice/speice.io
1
0
Fork 0
mirror of https://github.com/bspeice/speice.io synced 2025-10-31 01:20:31 -04:00
Code Issues Releases Wiki Activity

Fix color swatch paint area

Browse Source 
Still hate the code, but at least it's sized correctly now
This commit is contained in:
Bradlee Speice
2024-12-04 22:45:48 -05:00
parent 30e1619175
commit 137dcc675d
3 changed files with 5 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
blog/2024-11-15-playing-with-fire/3-log-density/FlameColor.tsx
View File

@ -45,6 +45,7 @@ const AutoSizingCanvas: React.FC<AutoSizingCanvasProps> = ({painter}) => {
useEffect(() => { useEffect(() => {
if (sizingRef) { if (sizingRef) {
console.log(`Sizing; width=${sizingRef.current.offsetWidth} height=${sizingRef.current.offsetHeight}`)
setWidth(sizingRef.current.offsetWidth); setWidth(sizingRef.current.offsetWidth);
setHeight(sizingRef.current.offsetHeight) setHeight(sizingRef.current.offsetHeight)
} }
@ -53,7 +54,7 @@ const AutoSizingCanvas: React.FC<AutoSizingCanvasProps> = ({painter}) => {
const image: [ImageData] = useMemo(() => (width && height) ? [painter(width, height)] : null, [painter, width, height]); const image: [ImageData] = useMemo(() => (width && height) ? [painter(width, height)] : null, [painter, width, height]);
return ( return (
<div ref={sizingRef}><InvertibleCanvas width={width} height={height} image={image}/></div> <div ref={sizingRef} style={{width: '100%', height: '100%'}}><InvertibleCanvas width={width} height={height} image={image}/></div>
) )
} }

4
blog/2024-11-15-playing-with-fire/3-log-density/index.mdx
View File

@ -32,13 +32,13 @@ import Canvas from "../src/Canvas";
import FlameHistogram from "./FlameHistogram"; import FlameHistogram from "./FlameHistogram";
import {paintLinear} from "./paintLinear"; import {paintLinear} from "./paintLinear";
<!-- <Canvas><FlameHistogram quality={0.5} paintFn={paintLinear}/></Canvas> --> <Canvas><FlameHistogram quality={0.5} paintFn={paintLinear}/></Canvas>
## Log display ## Log display
import {paintLogarithmic} from './paintLogarithmic' import {paintLogarithmic} from './paintLogarithmic'
<!-- <Canvas><FlameHistogram quality={0.5} paintFn={paintLogarithmic}/></Canvas> --> <Canvas><FlameHistogram quality={0.5} paintFn={paintLogarithmic}/></Canvas>
## Color ## Color

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

@ -53,10 +53,7 @@ export const InvertibleCanvas: React.FC<InvertibleCanvasProps> = ({width, height
ref={canvasRef} ref={canvasRef}
width={width} width={width}
height={height} height={height}
style={{ style={{aspectRatio: width / height}}
aspectRatio: width / height,
width: '75%'
}}
/> />
) )
} }