feat(canvas): add custom ref to ScatterPlotCanvas and NetworkCanvas (#…

…1953)

* Add forwardRef to ScatterPlotCanvas

* Add story

* Adding support for NetworkCanvas

* Aligned function names

* Formatting

* Type fixes

packages/network/src/NetworkCanvas.tsx

@@ -1,4 +1,13 @@
-import { useCallback, useRef, useEffect, createElement, MouseEvent, useMemo } from 'react'
+import {
+    ForwardedRef,
+    forwardRef,
+    useCallback,
+    useRef,
+    useEffect,
+    createElement,
+    MouseEvent,
+    useMemo,
+} from 'react'
 import { getDistance, getRelativeCursor, Container, useDimensions, useTheme } from '@nivo/core'
 import { useTooltip } from '@nivo/tooltip'
 import { useComputedAnnotations, renderAnnotationsToCanvas } from '@nivo/annotations'
@@ -17,7 +26,9 @@ import {
 type InnerNetworkCanvasProps<Node extends InputNode, Link extends InputLink> = Omit<
     NetworkCanvasProps<Node, Link>,
     'renderWrapper' | 'theme'
->
+> & {
+    canvasRef: ForwardedRef<HTMLCanvasElement>
+}
 
 const InnerNetworkCanvas = <Node extends InputNode, Link extends InputLink>({
     width,
@@ -56,6 +67,7 @@ const InnerNetworkCanvas = <Node extends InputNode, Link extends InputLink>({
     defaultActiveNodeIds = canvasDefaultProps.defaultActiveNodeIds,
     nodeTooltip = canvasDefaultProps.nodeTooltip as NodeTooltip<Node>,
     onClick,
+    canvasRef,
 }: InnerNetworkCanvasProps<Node, Link>) => {
     const canvasEl = useRef<HTMLCanvasElement | null>(null)
     const { margin, innerWidth, innerHeight, outerWidth, outerHeight } = useDimensions(
@@ -202,7 +214,10 @@ const InnerNetworkCanvas = <Node extends InputNode, Link extends InputLink>({
 
     return (
         <canvas
-            ref={canvasEl}
+            ref={canvas => {
+                canvasEl.current = canvas
+                if (canvasRef && 'current' in canvasRef) canvasRef.current = canvas
+            }}
             width={outerWidth * pixelRatio}
             height={outerHeight * pixelRatio}
             style={{
@@ -218,18 +233,24 @@ const InnerNetworkCanvas = <Node extends InputNode, Link extends InputLink>({
     )
 }
 
-export const NetworkCanvas = <
-    Node extends InputNode = InputNode,
-    Link extends InputLink = InputLink
->({
-    theme,
-    isInteractive = canvasDefaultProps.isInteractive,
-    animate = canvasDefaultProps.animate,
-    motionConfig = canvasDefaultProps.motionConfig,
-    renderWrapper,
-    ...otherProps
-}: NetworkCanvasProps<Node, Link>) => (
-    <Container {...{ isInteractive, animate, motionConfig, theme, renderWrapper }}>
-        <InnerNetworkCanvas<Node, Link> isInteractive={isInteractive} {...otherProps} />
-    </Container>
+export const NetworkCanvas = forwardRef(
+    <Node extends InputNode = InputNode, Link extends InputLink = InputLink>(
+        {
+            theme,
+            isInteractive = canvasDefaultProps.isInteractive,
+            animate = canvasDefaultProps.animate,
+            motionConfig = canvasDefaultProps.motionConfig,
+            renderWrapper,
+            ...otherProps
+        }: NetworkCanvasProps<Node, Link>,
+        ref: ForwardedRef<HTMLCanvasElement>
+    ) => (
+        <Container {...{ isInteractive, animate, motionConfig, theme, renderWrapper }}>
+            <InnerNetworkCanvas<Node, Link>
+                isInteractive={isInteractive}
+                {...otherProps}
+                canvasRef={ref}
+            />
+        </Container>
+    )
 )

packages/network/src/ResponsiveNetworkCanvas.tsx

@@ -1,16 +1,28 @@
 import { ResponsiveWrapper } from '@nivo/core'
+import { ForwardedRef, forwardRef } from 'react'
 import { NetworkCanvasProps, InputNode, InputLink } from './types'
 import { NetworkCanvas } from './NetworkCanvas'
 
-export const ResponsiveNetworkCanvas = <
+export const ResponsiveNetworkCanvas = forwardRef(function ResponsiveBarCanvas<
     Node extends InputNode = InputNode,
     Link extends InputLink = InputLink
 >(
-    props: Omit<NetworkCanvasProps<Node, Link>, 'height' | 'width'>
-) => (
-    <ResponsiveWrapper>
-        {({ width, height }) => (
-            <NetworkCanvas<Node, Link> width={width} height={height} {...props} />
-        )}
-    </ResponsiveWrapper>
-)
+    props: Omit<NetworkCanvasProps<Node, Link>, 'height' | 'width'>,
+    ref: ForwardedRef<HTMLCanvasElement>
+) {
+    return (
+        <ResponsiveWrapper>
+            {({ width, height }) => (
+                <NetworkCanvas
+                    width={width}
+                    height={height}
+                    {...(props as Omit<
+                        NetworkCanvasProps<InputNode, InputLink>,
+                        'height' | 'width'
+                    >)}
+                    ref={ref}
+                />
+            )}
+        </ResponsiveWrapper>
+    )
+})

packages/network/stories/networkCanvas.stories.tsx

@@ -9,6 +9,7 @@ import {
     NodeTooltipProps,
     // @ts-ignore
 } from '../src'
+import { useRef } from 'react'
 
 export default {
     component: NetworkCanvas,
@@ -70,3 +71,22 @@ export const CustomNodeRenderer = () => (
 export const OnClickHandler = () => (
     <NetworkCanvas<Node, Link> {...commonProperties} onClick={action('onClick')} />
 )
+
+export const CustomCanvasRef = () => {
+    const ref = useRef(undefined)
+
+    const download = ref => {
+        const canvas = ref.current
+        const link = document.createElement('a')
+        link.download = 'test.png'
+        link.href = canvas.toDataURL('image/png')
+        link.click()
+    }
+
+    return (
+        <>
+            <NetworkCanvas<Node, Link> {...commonProperties} ref={ref} />
+            <button onClick={() => download(ref)}>Download PNG</button>
+        </>
+    )
+}

packages/scatterplot/src/ResponsiveScatterPlotCanvas.tsx

@@ -1,13 +1,28 @@
 import { ResponsiveWrapper } from '@nivo/core'
+import { ForwardedRef, forwardRef } from 'react'
+
 import { ScatterPlotCanvas } from './ScatterPlotCanvas'
 import { ScatterPlotCanvasProps, ScatterPlotDatum } from './types'
 
-export const ResponsiveScatterPlotCanvas = <RawDatum extends ScatterPlotDatum>(
-    props: Omit<ScatterPlotCanvasProps<RawDatum>, 'width' | 'height'>
-) => (
-    <ResponsiveWrapper>
-        {({ width, height }) => (
-            <ScatterPlotCanvas<RawDatum> width={width} height={height} {...props} />
-        )}
-    </ResponsiveWrapper>
-)
+export const ResponsiveScatterPlotCanvas = forwardRef(function ResponsiveScatterPlotCanvas<
+    RawDatum extends ScatterPlotDatum
+>(
+    props: Omit<ScatterPlotCanvasProps<RawDatum>, 'width' | 'height'>,
+    ref: ForwardedRef<HTMLCanvasElement>
+) {
+    return (
+        <ResponsiveWrapper>
+            {({ width, height }) => (
+                <ScatterPlotCanvas
+                    width={width}
+                    height={height}
+                    {...(props as Omit<
+                        ScatterPlotCanvasProps<ScatterPlotDatum>,
+                        'height' | 'width'
+                    >)}
+                    ref={ref}
+                />
+            )}
+        </ResponsiveWrapper>
+    )
+})

packages/scatterplot/src/ScatterPlotCanvas.tsx

@@ -1,4 +1,13 @@
-import { createElement, useRef, useState, useEffect, useCallback, useMemo } from 'react'
+import {
+    ForwardedRef,
+    createElement,
+    forwardRef,
+    useCallback,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+} from 'react'
 import { Container, useDimensions, useTheme, getRelativeCursor, isCursorInRect } from '@nivo/core'
 import { renderAnnotationsToCanvas } from '@nivo/annotations'
 import { CanvasAxisProps, renderAxesToCanvas, renderGridLinesToCanvas } from '@nivo/axes'
@@ -12,7 +21,9 @@ import { ScatterPlotCanvasProps, ScatterPlotDatum, ScatterPlotNodeData } from '.
 type InnerScatterPlotCanvasProps<RawDatum extends ScatterPlotDatum> = Omit<
     ScatterPlotCanvasProps<RawDatum>,
     'renderWrapper' | 'theme'
->
+> & {
+    canvasRef: ForwardedRef<HTMLCanvasElement>
+}
 
 const InnerScatterPlotCanvas = <RawDatum extends ScatterPlotDatum>({
     data,
@@ -46,6 +57,7 @@ const InnerScatterPlotCanvas = <RawDatum extends ScatterPlotDatum>({
     onClick,
     tooltip = canvasDefaultProps.tooltip,
     legends = canvasDefaultProps.legends,
+    canvasRef,
 }: InnerScatterPlotCanvasProps<RawDatum>) => {
     const canvasEl = useRef<HTMLCanvasElement | null>(null)
     const theme = useTheme()
@@ -270,7 +282,10 @@ const InnerScatterPlotCanvas = <RawDatum extends ScatterPlotDatum>({
 
     return (
         <canvas
-            ref={canvasEl}
+            ref={canvas => {
+                canvasEl.current = canvas
+                if (canvasRef && 'current' in canvasRef) canvasRef.current = canvas
+            }}
             width={outerWidth * pixelRatio}
             height={outerHeight * pixelRatio}
             style={{
@@ -286,13 +301,13 @@ const InnerScatterPlotCanvas = <RawDatum extends ScatterPlotDatum>({
     )
 }
 
-export const ScatterPlotCanvas = <RawDatum extends ScatterPlotDatum>({
-    isInteractive,
-    renderWrapper,
-    theme,
-    ...props
-}: ScatterPlotCanvasProps<RawDatum>) => (
-    <Container {...{ isInteractive, renderWrapper, theme }} animate={false}>
-        <InnerScatterPlotCanvas<RawDatum> {...props} />
-    </Container>
+export const ScatterPlotCanvas = forwardRef(
+    <RawDatum extends ScatterPlotDatum>(
+        { isInteractive, renderWrapper, theme, ...props }: ScatterPlotCanvasProps<RawDatum>,
+        ref: ForwardedRef<HTMLCanvasElement>
+    ) => (
+        <Container {...{ isInteractive, renderWrapper, theme }} animate={false}>
+            <InnerScatterPlotCanvas<RawDatum> {...props} canvasRef={ref} />
+        </Container>
+    )
 )

packages/scatterplot/stories/ScatterPlotCanvas.stories.tsx

@@ -1,8 +1,8 @@
-import { useState, useCallback, useMemo } from 'react'
+import { useCallback, useMemo, useRef, useState } from 'react'
 import omit from 'lodash/omit'
 import { Meta } from '@storybook/react'
 // @ts-ignore
-import { ScatterPlotCanvas, ResponsiveScatterPlotCanvas, ScatterPlotNodeData } from '../src'
+import { ResponsiveScatterPlotCanvas, ScatterPlotCanvas, ScatterPlotNodeData } from '../src'
 
 export default {
     component: ScatterPlotCanvas,
@@ -403,3 +403,42 @@ export const CustomTooltip = () => (
         )}
     />
 )
+
+export const CustomCanvasRef = () => {
+    const ref = useRef(undefined)
+
+    const download = ref => {
+        const canvas = ref.current
+        const link = document.createElement('a')
+        link.download = 'test.png'
+        link.href = canvas.toDataURL('image/png')
+        link.click()
+    }
+
+    return (
+        <>
+            <ScatterPlotCanvas<SampleDatum>
+                {...commonProps}
+                ref={ref}
+                tooltip={({ node }) => (
+                    <div
+                        style={{
+                            color: node.color,
+                            background: '#333',
+                            padding: '12px 16px',
+                        }}
+                    >
+                        <strong>
+                            {node.id} ({node.serieId})
+                        </strong>
+                        <br />
+                        {`x: ${node.formattedX}`}
+                        <br />
+                        {`y: ${node.formattedY}`}
+                    </div>
+                )}
+            />
+            <button onClick={() => download(ref)}>Download PNG</button>
+        </>
+    )
+}