feat: Create DownloadImageButton component to download tree view as png image

Author: altenull

src/json-diagram/components/DownloadImageButton.tsx

@@ -0,0 +1,57 @@
+import { Loading, useTheme } from '@nextui-org/react';
+import { toPng } from 'html-to-image';
+import { memo, useCallback } from 'react';
+import { CircleTransparentButton } from '../../ui/components/CircleTransparentButton';
+import { Icon } from '../../ui/icon/Icon';
+import { downloadAsFile } from '../../utils/file-download.util';
+import { useBoolean } from '../../utils/react-hooks/useBoolean';
+
+const _DownloadImageButton = () => {
+  const { theme } = useTheme();
+  const { bool: isDownloading, setTrue: startDownload, setFalse: stopDownload } = useBoolean();
+
+  const SELF_CLASSNAME = 'download-image-button';
+
+  const handleClick = useCallback(() => {
+    startDownload();
+
+    toPng(document.querySelector('.react-flow') as HTMLElement, {
+      filter: (node) => {
+        // we don't want to add the minimap, controls and download image button to the image
+        const filterTargetTokens = ['react-flow__minimap', 'react-flow__controls', SELF_CLASSNAME];
+
+        const isFilterTargetToken: boolean = filterTargetTokens.some((token: string) =>
+          node?.classList?.contains(token)
+        );
+
+        return !isFilterTargetToken;
+      },
+    })
+      .then((dataUrl: string) => downloadAsFile(dataUrl, 'json-sea.png'))
+      .finally(() => stopDownload());
+  }, [startDownload, stopDownload]);
+
+  return (
+    <CircleTransparentButton
+      style={{
+        position: 'absolute',
+        right: 8,
+        top: 8,
+        zIndex: 10,
+      }}
+      className={SELF_CLASSNAME}
+      onClick={isDownloading ? undefined : handleClick}
+    >
+      {isDownloading ? (
+        <Loading color="currentColor" size="xs" />
+      ) : (
+        <Icon icon="camera" size={24} color={theme?.colors.accents8.value} />
+      )}
+    </CircleTransparentButton>
+  );
+};
+
+/**
+ * @see https://reactflow.dev/docs/examples/misc/download-image/
+ */
+export const DownloadImageButton = memo(_DownloadImageButton);

src/json-diagram/components/JsonDiagram.tsx

@@ -26,6 +26,7 @@ import { ArrayNode } from './ArrayNode';
 import { ChainEdge } from './ChainEdge';
 import { CustomMiniMap } from './CustomMiniMap';
 import { DefaultEdge } from './DefaultEdge';
+import { DownloadImageButton } from './DownloadImageButton';
 import { FitViewInvoker } from './FitViewInvoker';
 import { ObjectNode } from './ObjectNode';
 import { PrimitiveNode } from './PrimitiveNode';
@@ -86,6 +87,7 @@ const _JsonDiagram = () => {
         >
           <CustomMiniMap />
           <Controls position="bottom-right" showInteractive={false} />
+          <DownloadImageButton />
           <Background variant={BackgroundVariant.Dots} />
           <FitViewInvoker seaNodes={seaNodes} />
         </ReactFlow>

src/store/json-engine/helpers/json-parser.helper.ts

@@ -164,6 +164,9 @@ export const jsonParser = (
 
   /**
    *  2023-01-30 Suprisingly, ChatGPT helps to refactor complex `traverse` code into smaller.
+   * 
+   * `traverse` function follows `preorder traversal`
+   
    *  @implements
    * - if object
    *   - add node(object)

src/ui/components/CircleTransparentButton.tsx

@@ -4,15 +4,19 @@ import { isFunction } from '../../utils/function.util';
 
 type Props = {
   children: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
   onClick?: React.MouseEventHandler<HTMLButtonElement>;
 };
 
-const _CircleTransparentButton = ({ children, onClick }: Props) => {
+const _CircleTransparentButton = ({ children, className, style, onClick }: Props) => {
   return (
     <StyledHost
       css={{
+        ...style,
         cursor: isFunction(onClick) ? 'pointer' : 'initial',
       }}
+      className={className}
       onClick={onClick}
     >
       {children}