feat(circle-packing): restore pixelRatio property for canvas implemen…

…tation
plouc · Apr 26, 2021 · 5649103 · 5649103
1 parent 1091468
commit 5649103
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 3 deletions.
diff --git a/packages/circle-packing/src/CirclePackingCanvas.tsx b/packages/circle-packing/src/CirclePackingCanvas.tsx
@@ -45,6 +45,7 @@ const InnerCirclePackingCanvas = <RawDatum,>({
     tooltip = defaultProps.tooltip,
     zoomedId,
     role = defaultProps.role,
+    pixelRatio = defaultProps.pixelRatio,
 }: InnerCirclePackingCanvasProps<RawDatum>) => {
     const canvasEl = useRef<HTMLCanvasElement | null>(null)
     const theme = useTheme()
@@ -79,8 +80,6 @@ const InnerCirclePackingCanvas = <RawDatum,>({
         textColor: labelTextColor,
     })
 
-    const pixelRatio = 2
-
     useEffect(() => {
         if (!canvasEl.current) return
 

diff --git a/packages/circle-packing/src/props.ts b/packages/circle-packing/src/props.ts
@@ -26,4 +26,5 @@ export const defaultProps = {
     animate: true,
     motionConfig: 'gentle',
     role: 'img',
+    pixelRatio: typeof window !== 'undefined' ? window.devicePixelRatio ?? 1 : 1,
 }
diff --git a/packages/circle-packing/src/types.ts b/packages/circle-packing/src/types.ts
@@ -90,7 +90,9 @@ export type CirclePackingHtmlProps<RawDatum> = CirclePackingCommonProps<RawDatum
     MouseHandlers<RawDatum>
 
 export type CirclePackingCanvasProps<RawDatum> = CirclePackingCommonProps<RawDatum> &
-    Pick<MouseHandlers<RawDatum>, 'onMouseMove' | 'onClick'>
+    Pick<MouseHandlers<RawDatum>, 'onMouseMove' | 'onClick'> & {
+        pixelRatio: number
+    }
 
 export type CircleProps<RawDatum> = {
     node: ComputedDatum<RawDatum>