From 137dcc675d7fb93cf778c54722afb7c7ed24427f Mon Sep 17 00:00:00 2001 From: Bradlee Speice <bradlee@speice.io> Date: Wed, 4 Dec 2024 22:45:48 -0500 Subject: [PATCH] Fix color swatch paint area Still hate the code, but at least it's sized correctly now --- .../3-log-density/FlameColor.tsx | 3 ++- blog/2024-11-15-playing-with-fire/3-log-density/index.mdx | 4 ++-- blog/2024-11-15-playing-with-fire/src/Canvas.tsx | 5 +---- 3 files changed, 5 insertions(+), 7 deletions(-) diff --git a/blog/2024-11-15-playing-with-fire/3-log-density/FlameColor.tsx b/blog/2024-11-15-playing-with-fire/3-log-density/FlameColor.tsx index c125281..5064ebf 100644 --- a/blog/2024-11-15-playing-with-fire/3-log-density/FlameColor.tsx +++ b/blog/2024-11-15-playing-with-fire/3-log-density/FlameColor.tsx @@ -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> ) } diff --git a/blog/2024-11-15-playing-with-fire/3-log-density/index.mdx b/blog/2024-11-15-playing-with-fire/3-log-density/index.mdx index df0efa2..b4d552c 100644 --- a/blog/2024-11-15-playing-with-fire/3-log-density/index.mdx +++ b/blog/2024-11-15-playing-with-fire/3-log-density/index.mdx @@ -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 diff --git a/blog/2024-11-15-playing-with-fire/src/Canvas.tsx b/blog/2024-11-15-playing-with-fire/src/Canvas.tsx index e4b8fbe..41c851a 100644 --- a/blog/2024-11-15-playing-with-fire/src/Canvas.tsx +++ b/blog/2024-11-15-playing-with-fire/src/Canvas.tsx @@ -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}} /> ) }