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

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
Show Stats 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(() => {
if (sizingRef) {
console.log(`Sizing; width=${sizingRef.current.offsetWidth} height=${sizingRef.current.offsetHeight}`)
setWidth(sizingRef.current.offsetWidth);
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]);
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 {paintLinear} from "./paintLinear";
<!-- <Canvas><FlameHistogram quality={0.5} paintFn={paintLinear}/></Canvas> -->
<Canvas><FlameHistogram quality={0.5} paintFn={paintLinear}/></Canvas>
## Log display
import {paintLogarithmic} from './paintLogarithmic'
<!-- <Canvas><FlameHistogram quality={0.5} paintFn={paintLogarithmic}/></Canvas> -->
<Canvas><FlameHistogram quality={0.5} paintFn={paintLogarithmic}/></Canvas>
## 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}
width={width}
height={height}
style={{
aspectRatio: width / height,
width: '75%'
}}
style={{aspectRatio: width / height}}
/>
)
}