@kanaries/graphic-walker 0.3.9 → 0.3.10

package/dist/index.d.ts

@@ -1,10 +1,8 @@
 import React from "react";
 import { IGWProps } from "./App";
+import type { IGWHandler } from "./interfaces";
 import "./empty_sheet.css";
-export declare const ShadowDomContext: React.Context<{
-    root: ShadowRoot | null;
-}>;
-export type { IGWProps };
-export { embedGraphicWalker } from './vanilla';
-export declare const GraphicWalker: React.FC<IGWProps>;
+export declare const GraphicWalker: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<IGWProps & React.RefAttributes<IGWHandler>, "key" | keyof IGWProps> & React.RefAttributes<IGWHandler>>>;
 export { default as PureRenderer } from './renderer/pureRenderer';
+export { embedGraphicWalker } from './vanilla';
+export type { IGWProps };

package/dist/interfaces.d.ts

@@ -191,3 +191,24 @@ export declare enum ISegmentKey {
 export type IThemeKey = 'vega' | 'g2';
 export type IDarkMode = 'media' | 'light' | 'dark';
 export type VegaGlobalConfig = VgConfig | VlConfig;
+export interface IChartExportResult<T extends 'svg' | 'data-url' = 'svg' | 'data-url'> {
+    mode: T;
+    title: string;
+    nCols: number;
+    nRows: number;
+    charts: {
+        colIndex: number;
+        rowIndex: number;
+        width: number;
+        height: number;
+        data: string;
+    }[];
+}
+interface IExportChart {
+    <T extends Extract<IChartExportResult['mode'], 'svg'>>(mode?: T): Promise<IChartExportResult<T>>;
+    <T extends IChartExportResult['mode']>(mode: T): Promise<IChartExportResult<T>>;
+}
+export interface IGWHandler {
+    exportChart: IExportChart;
+}
+export {};

package/dist/renderer/pureRenderer.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import type { IDarkMode, IRow, IThemeKey, DraggableFieldState, IVisualConfig } from '../interfaces';
 import type { IReactVegaHandler } from '../vis/react-vega';
 interface IPureRendererProps {
+    name?: string;
     themeKey?: IThemeKey;
     dark?: IDarkMode;
     rawData?: IRow[];

package/dist/renderer/specRenderer.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { IReactVegaHandler } from '../vis/react-vega';
 import { DeepReadonly, DraggableFieldState, IDarkMode, IRow, IThemeKey, IVisualConfig } from '../interfaces';
 interface SpecRendererProps {
+    name?: string;
     themeKey?: IThemeKey;
     dark?: IDarkMode;
     data: IRow[];

package/dist/shadow-dom.d.ts

@@ -0,0 +1,10 @@
+import React, { HTMLAttributes } from "react";
+export declare const ShadowDomContext: React.Context<{
+    root: ShadowRoot | null;
+}>;
+interface IShadowDomProps extends HTMLAttributes<HTMLDivElement> {
+    onMount?: (shadowRoot: ShadowRoot) => void;
+    onUnmount?: () => void;
+}
+export declare const ShadowDom: React.FC<IShadowDomProps>;
+export {};

package/dist/utils/vegaApiExport.d.ts

@@ -0,0 +1,10 @@
+import { type ForwardedRef, type MutableRefObject } from "react";
+import type { View } from "vega";
+import type { IReactVegaHandler } from "../vis/react-vega";
+export declare const useVegaExportApi: (name: string | undefined, viewsRef: MutableRefObject<{
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    view: View;
+}[]>, ref: ForwardedRef<IReactVegaHandler>) => void;

package/dist/vis/react-vega.d.ts

@@ -7,6 +7,7 @@ export interface IReactVegaHandler {
     downloadPNG: (filename?: string) => Promise<string[]>;
 }
 interface ReactVegaProps {
+    name?: string;
     rows: Readonly<IViewField[]>;
     columns: Readonly<IViewField[]>;
     dataSource: IRow[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanaries/graphic-walker",
-  "version": "0.3.9",
+  "version": "0.3.10",
   "scripts": {
     "dev:front_end": "vite --host",
     "dev": "npm run dev:front_end",
@@ -37,7 +37,7 @@
     "@headlessui/react": "^1.7.12",
     "@heroicons/react": "^2.0.8",
     "@kanaries/graphic-walker": "0.3.9",
-    "@kanaries/react-beautiful-dnd": "0.0.1",
+    "@kanaries/react-beautiful-dnd": "0.0.2",
     "@kanaries/web-data-loader": "^0.1.7",
     "autoprefixer": "^10.3.5",
     "i18next": "^21.9.1",

package/src/components/appRoot.tsx

@@ -0,0 +1,32 @@
+import React, { createContext, forwardRef, useImperativeHandle, type ForwardedRef, useContext } from "react";
+import type { IGWHandler } from "../interfaces";
+
+const AppRootContext = createContext<ForwardedRef<IGWHandler>>(null!);
+
+export const useAppRootContext = () => {
+    return useContext(AppRootContext);
+};
+
+const AppRoot = forwardRef<IGWHandler, { children: any }>(({ children }, ref) => {
+    useImperativeHandle(ref, () => {
+        return {
+            exportChart: (async mode => {
+                return {
+                    mode,
+                    title: '',
+                    nCols: 0,
+                    nRows: 0,
+                    charts: [],
+                };
+            }) as IGWHandler['exportChart'],
+        };
+    }, []);
+
+    return (
+        <AppRootContext.Provider value={ref}>
+            {children}
+        </AppRootContext.Provider>
+    );
+});
+
+export default AppRoot;

package/src/components/callout.tsx

@@ -2,7 +2,7 @@ import React, { memo, ReactNode, useContext, useEffect, useState } from "react";
 import { createPortal } from "react-dom";
 import styled from "styled-components";
 import type { IDarkMode } from "../interfaces";
-import { ShadowDomContext } from "..";
+import { ShadowDomContext } from "../shadow-dom";
 import { useCurrentMediaTheme } from "../utils/media";
 
 export interface CalloutProps {

package/src/components/tooltip.tsx

@@ -2,7 +2,7 @@ import React, { memo, useContext, useEffect, useMemo, useRef, useState } from "r
 import { createPortal } from "react-dom";
 import styled from "styled-components";
 import type { IDarkMode } from "../interfaces";
-import { ShadowDomContext } from "..";
+import { ShadowDomContext } from "../shadow-dom";
 import { useCurrentMediaTheme } from "../utils/media";
 
 export interface TooltipProps {

package/src/index.tsx

@@ -1,55 +1,40 @@
-import React, { createContext, useEffect, useRef, useState } from "react";
-import { StyleSheetManager } from "styled-components";
-import root from "react-shadow";
+import React, { forwardRef } from "react";
 import { DOM } from "@kanaries/react-beautiful-dnd";
 import { observer } from "mobx-react-lite";
 import App, { IGWProps } from "./App";
 import { StoreWrapper } from "./store/index";
 import { FieldsContextWrapper } from "./fields/fieldsContext";
+import { ShadowDom } from "./shadow-dom";
+import AppRoot from "./components/appRoot";
+import type { IGWHandler } from "./interfaces";
 
 import "./empty_sheet.css";
-import tailwindStyle from "tailwindcss/tailwind.css?inline";
-import style from "./index.css?inline";
 
-export const ShadowDomContext = createContext<{ root: ShadowRoot | null }>({ root: null });
-export type { IGWProps }
-export { embedGraphicWalker } from './vanilla';
-
-export const GraphicWalker: React.FC<IGWProps> = observer((props) => {
-    const [shadowRoot, setShadowRoot] = useState<ShadowRoot | null>(null);
-    const rootRef = useRef<HTMLDivElement>(null);
+export const GraphicWalker = observer(forwardRef<IGWHandler, IGWProps>((props, ref) => {
     const { storeRef } = props;
 
-    useEffect(() => {
-        if (rootRef.current) {
-            const shadowRoot = rootRef.current.shadowRoot!;
-            setShadowRoot(shadowRoot);
-            DOM.setBody(shadowRoot);
-            DOM.setHead(shadowRoot);
-            return () => {
-                DOM.setBody(document.body);
-                DOM.setHead(document.head);
-            };
-        }
-    }, []);
+    const handleMount = (shadowRoot: ShadowRoot) => {
+        DOM.setBody(shadowRoot);
+        DOM.setHead(shadowRoot);
+    };
+    const handleUnmount = () => {
+        DOM.setBody(document.body);
+        DOM.setHead(document.head);
+    };
 
     return (
         <StoreWrapper keepAlive={props.keepAlive} storeRef={storeRef}>
-            <root.div mode="open" ref={rootRef}>
-                <style>{tailwindStyle}</style>
-                <style>{style}</style>
-                {shadowRoot && (
-                    <StyleSheetManager target={shadowRoot}>
-                        <FieldsContextWrapper>
-                            <ShadowDomContext.Provider value={{ root: shadowRoot }}>
-                                <App {...props} />
-                            </ShadowDomContext.Provider>
-                        </FieldsContextWrapper>
-                    </StyleSheetManager>
-                )}
-            </root.div>
+            <AppRoot ref={ref}>
+                <ShadowDom onMount={handleMount} onUnmount={handleUnmount}>
+                    <FieldsContextWrapper>
+                        <App {...props} />
+                    </FieldsContextWrapper>
+                </ShadowDom>
+            </AppRoot>
         </StoreWrapper>
     );
-});
+}));
 
 export { default as PureRenderer } from './renderer/pureRenderer';
+export { embedGraphicWalker } from './vanilla';
+export type { IGWProps };

package/src/interfaces.ts

@@ -223,4 +223,27 @@ export enum ISegmentKey {
 export type IThemeKey = 'vega' | 'g2';
 export type IDarkMode = 'media' | 'light' | 'dark';
 
-export type VegaGlobalConfig = VgConfig | VlConfig;
+export type VegaGlobalConfig = VgConfig | VlConfig;
+
+export interface IChartExportResult<T extends 'svg' | 'data-url' = 'svg' | 'data-url'> {
+    mode: T;
+    title: string;
+    nCols: number;
+    nRows: number;
+    charts: {
+        colIndex: number;
+        rowIndex: number;
+        width: number;
+        height: number;
+        data: string;
+    }[];
+}
+
+interface IExportChart {
+    <T extends Extract<IChartExportResult['mode'], 'svg'>>(mode?: T): Promise<IChartExportResult<T>>;
+    <T extends IChartExportResult['mode']>(mode: T): Promise<IChartExportResult<T>>;
+}
+
+export interface IGWHandler {
+    exportChart: IExportChart;
+}

package/src/renderer/hooks.ts

@@ -30,8 +30,16 @@ export const useRenderer = (props: UseRendererProps): UseRendererResult => {
         const taskId = ++taskIdRef.current;
         setComputing(true);
         applyFilter(data, filters)
-            .then((data) => transformDataService(data, allFields))
+            .then((data) => {
+                if (viewDimensions.length === 0 && viewMeasures.length === 0) {
+                    return data;
+                }
+                return transformDataService(data, allFields);
+            })
             .then((d) => {
+                if (viewDimensions.length === 0 && viewMeasures.length === 0) {
+                    return data;
+                }
                 // setViewData(d);
                 const dims = viewDimensions;
                 const meas = viewMeasures;

package/src/renderer/index.tsx

@@ -20,7 +20,8 @@ interface RendererProps {
 const Renderer = forwardRef<IReactVegaHandler, RendererProps>(function (props, ref) {
     const { themeKey, dark } = props;
     const { vizStore, commonStore } = useGlobalStore();
-    const { allFields, viewFilters, viewDimensions, viewMeasures, visualConfig, draggableFieldState } = vizStore;
+    const { allFields, viewFilters, viewDimensions, viewMeasures, visualConfig, draggableFieldState, visList, visIndex } = vizStore;
+    const chart = visList[visIndex];
     const { currentDataset } = commonStore;
     const { dataSource } = currentDataset;
 
@@ -83,6 +84,7 @@ const Renderer = forwardRef<IReactVegaHandler, RendererProps>(function (props, r
 
     return (
         <SpecRenderer
+            name={chart?.name}
             loading={waiting}
             data={viewData}
             ref={ref}

package/src/renderer/pureRenderer.tsx

@@ -2,6 +2,8 @@ import React, { useState, useEffect, forwardRef, useMemo, useRef } from 'react';
 import { unstable_batchedUpdates } from 'react-dom';
 import { toJS } from 'mobx';
 import { observer } from 'mobx-react-lite';
+import { ShadowDom } from '../shadow-dom';
+import AppRoot from '../components/appRoot';
 import type { IDarkMode, IViewField, IRow, IThemeKey, DraggableFieldState, IVisualConfig } from '../interfaces';
 import type { IReactVegaHandler } from '../vis/react-vega';
 import SpecRenderer from './specRenderer';
@@ -9,6 +11,7 @@ import { useRenderer } from './hooks';
 
 
 interface IPureRendererProps {
+    name?: string;
     themeKey?: IThemeKey;
     dark?: IDarkMode;
     rawData?: IRow[];
@@ -22,6 +25,7 @@ interface IPureRendererProps {
  */
 const PureRenderer = forwardRef<IReactVegaHandler, IPureRendererProps>(function PureRenderer (props, ref) {
     const {
+        name,
         themeKey,
         dark,
         rawData,
@@ -75,15 +79,22 @@ const PureRenderer = forwardRef<IReactVegaHandler, IPureRendererProps>(function
     }, [waiting]);
 
     return (
-        <SpecRenderer
-            loading={waiting}
-            data={viewData}
-            ref={ref}
-            themeKey={themeKey}
-            dark={dark}
-            draggableFieldState={visualState}
-            visualConfig={visualConfig}
-        />
+        <AppRoot>
+            <ShadowDom>
+                <div className="relative">
+                    <SpecRenderer
+                        name={name}
+                        loading={waiting}
+                        data={viewData}
+                        ref={ref}
+                        themeKey={themeKey}
+                        dark={dark}
+                        draggableFieldState={visualState}
+                        visualConfig={visualConfig}
+                    />
+                </div>
+            </ShadowDom>
+        </AppRoot>
     );
 });
 

package/src/renderer/specRenderer.tsx

@@ -10,6 +10,7 @@ import { useCurrentMediaTheme } from '../utils/media';
 import { builtInThemes } from '../vis/theme';
 
 interface SpecRendererProps {
+    name?: string;
     themeKey?: IThemeKey;
     dark?: IDarkMode;
     data: IRow[];
@@ -24,7 +25,7 @@ interface SpecRendererProps {
  * This is a pure component, which means it will not depend on any global state.
  */
 const SpecRenderer = forwardRef<IReactVegaHandler, SpecRendererProps>(function (
-    { themeKey, dark, data, loading, draggableFieldState, visualConfig, onGeomClick, onChartResize },
+    { name, themeKey, dark, data, loading, draggableFieldState, visualConfig, onGeomClick, onChartResize },
     ref
 ) {
     // const { draggableFieldState, visualConfig } = vizStore;
@@ -123,6 +124,7 @@ const SpecRenderer = forwardRef<IReactVegaHandler, SpecRendererProps>(function (
         >
             {loading && <LoadingLayer />}
             <ReactVega
+                name={name}
                 vegaConfig={vegaConfig}
                 // format={format}
                 layoutMode={size.mode}

package/src/shadow-dom.tsx

@@ -0,0 +1,48 @@
+import React, { HTMLAttributes, createContext, useEffect, useRef, useState } from "react";
+import { StyleSheetManager } from "styled-components";
+import root from "react-shadow";
+
+import tailwindStyle from "tailwindcss/tailwind.css?inline";
+import style from "./index.css?inline";
+
+export const ShadowDomContext = createContext<{ root: ShadowRoot | null }>({ root: null });
+
+interface IShadowDomProps extends HTMLAttributes<HTMLDivElement> {
+    onMount?: (shadowRoot: ShadowRoot) => void;
+    onUnmount?: () => void;
+}
+
+export const ShadowDom: React.FC<IShadowDomProps> = function ShadowDom ({ onMount, onUnmount, children, ...attrs }) {
+    const [shadowRoot, setShadowRoot] = useState<ShadowRoot | null>(null);
+    const rootRef = useRef<HTMLDivElement>(null);
+
+    const onMountRef = useRef(onMount);
+    onMountRef.current = onMount;
+    const onUnmountRef = useRef(onUnmount);
+    onUnmountRef.current = onUnmount;
+
+    useEffect(() => {
+        if (rootRef.current) {
+            const shadowRoot = rootRef.current.shadowRoot!;
+            setShadowRoot(shadowRoot);
+            onMountRef.current?.(shadowRoot);
+            return () => {
+                onUnmountRef.current?.();
+            };
+        }
+    }, []);
+
+    return (
+        <root.div {...attrs} mode="open" ref={rootRef}>
+            <style>{tailwindStyle}</style>
+            <style>{style}</style>
+            {shadowRoot && (
+                <StyleSheetManager target={shadowRoot}>
+                    <ShadowDomContext.Provider value={{ root: shadowRoot }}>
+                        {children}
+                    </ShadowDomContext.Provider>
+                </StyleSheetManager>
+            )}
+        </root.div>
+    );
+};

package/src/utils/vegaApiExport.ts

@@ -0,0 +1,102 @@
+import { useImperativeHandle, type ForwardedRef, type MutableRefObject, useEffect } from "react";
+import type { View } from "vega";
+import { useAppRootContext } from "../components/appRoot";
+import type { IReactVegaHandler } from "../vis/react-vega";
+import type { IChartExportResult } from "../interfaces";
+
+
+export const useVegaExportApi = (name: string | undefined, viewsRef: MutableRefObject<{ x: number; y: number; w: number; h: number; view: View }[]>, ref: ForwardedRef<IReactVegaHandler>) => {
+    const renderHandle = {
+        getSVGData() {
+            return Promise.all(viewsRef.current.map(item => item.view.toSVG()));
+        },
+        async getCanvasData() {
+            const canvases = await Promise.all(viewsRef.current.map(item => item.view.toCanvas(2)));
+            return canvases.map(canvas => canvas.toDataURL('image/png', 1));
+        },
+        async downloadSVG(filename = `gw chart ${Date.now() % 1_000_000}`.padStart(6, '0')) {
+            const data = await Promise.all(viewsRef.current.map(item => item.view.toSVG()));
+            const files: string[] = [];
+            for (let i = 0; i < data.length; i += 1) {
+                const d = data[i];
+                const file = new File([d], `${filename}${data.length > 1 ? `_${i + 1}` : ''}.svg`);
+                const url = URL.createObjectURL(file);
+                const a = document.createElement('a');
+                a.download = file.name;
+                a.href = url;
+                a.click();
+                requestAnimationFrame(() => {
+                    URL.revokeObjectURL(url);
+                });
+            }
+            return files;
+        },
+        async downloadPNG(filename = `gw chart ${Date.now() % 1_000_000}`.padStart(6, '0')) {
+            const canvases = await Promise.all(viewsRef.current.map(item => item.view.toCanvas(2)));
+            const data = canvases.map(canvas => canvas.toDataURL('image/png', 1));
+            const files: string[] = [];
+            for (let i = 0; i < data.length; i += 1) {
+                const d = data[i];
+                const a = document.createElement('a');
+                a.download = `${filename}${data.length > 1 ? `_${i + 1}` : ''}.png`;
+                a.href = d.replace(/^data:image\/[^;]/, 'data:application/octet-stream');
+                a.click();
+            }
+            return files;
+        },
+    };
+    
+    useImperativeHandle(ref, () => renderHandle);
+    
+    const appRef = useAppRootContext();
+    
+    useEffect(() => {
+        if (appRef && 'current' in appRef && appRef.current) {
+            appRef.current.exportChart = (async (mode: IChartExportResult['mode'] = 'svg') => {
+                const res: IChartExportResult = {
+                    mode,
+                    title: name || 'untitled',
+                    nCols: viewsRef.current.map(item => item.x).reduce((a, b) => Math.max(a, b), 0) + 1,
+                    nRows: viewsRef.current.map(item => item.y).reduce((a, b) => Math.max(a, b), 0) + 1,
+                    charts: viewsRef.current.map(item => ({
+                        rowIndex: item.y,
+                        colIndex: item.x,
+                        width: item.w,
+                        height: item.h,
+                        data: '',
+                    })),
+                };
+                if (mode === 'data-url') {
+                    const imgData = await renderHandle.getCanvasData();
+                    if (imgData) {
+                        for (let i = 0; i < imgData.length; i += 1) {
+                            res.charts[i].data = imgData[i];
+                        }
+                    }
+                } else if (mode === 'svg') {
+                    const svgData = await renderHandle.getSVGData();
+                    if (svgData) {
+                        for (let i = 0; i < svgData.length; i += 1) {
+                            res.charts[i].data = svgData[i];
+                        }
+                    }
+                }
+                return res;
+            }) as typeof appRef.current.exportChart;
+        }
+    });
+
+    useEffect(() => {
+        return () => {
+            if (appRef && 'current' in appRef && appRef.current) {
+                appRef.current.exportChart = async mode => ({
+                    mode,
+                    title: '',
+                    nCols: 0,
+                    nRows: 0,
+                    charts: [],
+                });
+            }
+        };
+    }, []);
+};

package/src/vis/react-vega.tsx

@@ -1,10 +1,11 @@
-import React, { useEffect, useState, useMemo, forwardRef, useImperativeHandle, useRef } from 'react';
+import React, { useEffect, useState, useMemo, forwardRef, useRef } from 'react';
 import embed from 'vega-embed';
 import { Subject, Subscription } from 'rxjs'
 import * as op from 'rxjs/operators';
 import type { ScenegraphEvent, View } from 'vega';
 import styled from 'styled-components';
 
+import { useVegaExportApi } from '../utils/vegaApiExport';
 import { IViewField, IRow, IStackMode, VegaGlobalConfig } from '../interfaces';
 import { useTranslation } from 'react-i18next';
 import { getVegaTimeFormatRules } from './temporalFormat';
@@ -25,6 +26,7 @@ export interface IReactVegaHandler {
   downloadPNG: (filename?: string) => Promise<string[]>;
 }
 interface ReactVegaProps {
+  name?: string;
   rows: Readonly<IViewField[]>;
   columns: Readonly<IViewField[]>;
   dataSource: IRow[];
@@ -73,6 +75,7 @@ interface ParamStoreEntry {
 
 const ReactVega = forwardRef<IReactVegaHandler, ReactVegaProps>(function ReactVega (props, ref) {
   const {
+    name,
     dataSource = [],
     rows = [],
     columns = [],
@@ -150,7 +153,7 @@ const ReactVega = forwardRef<IReactVegaHandler, ReactVegaProps>(function ReactVe
     })
   }, [rowRepeatFields, colRepeatFields])
 
-  const vegaRefs = useRef<View[]>([]);
+  const vegaRefs = useRef<{ x: number; y: number; w: number; h: number; view: View }[]>([]);
 
   useEffect(() => {
     vegaRefs.current = [];
@@ -218,7 +221,13 @@ const ReactVega = forwardRef<IReactVegaHandler, ReactVegaProps>(function ReactVe
 
       if (viewPlaceholders.length > 0 && viewPlaceholders[0].current) {
         embed(viewPlaceholders[0].current, spec, { mode: 'vega-lite', actions: showActions, timeFormatLocale: getVegaTimeFormatRules(i18n.language), config: vegaConfig }).then(res => {
-          vegaRefs.current = [res.view];
+          vegaRefs.current = [{
+            w: res.view.container()?.clientWidth ?? res.view.width(),
+            h: res.view.container()?.clientHeight ?? res.view.height(),
+            x: 0,
+            y: 0,
+            view: res.view,
+          }];
           try {
             res.view.addEventListener('click', (e) => {
               click$.next(e);
@@ -250,6 +259,7 @@ const ReactVega = forwardRef<IReactVegaHandler, ReactVegaProps>(function ReactVe
         subscriptions.push(throttledParamStore$.subscribe(cb));
       };
       let index = 0;
+      vegaRefs.current = new Array(rowRepeatFields.length * colRepeatFields.length);
       for (let i = 0; i < rowRepeatFields.length; i++) {
         for (let j = 0; j < colRepeatFields.length; j++, index++) {
           const sourceId = index;
@@ -282,8 +292,15 @@ const ReactVega = forwardRef<IReactVegaHandler, ReactVegaProps>(function ReactVe
             ans.params = commonSpec.params;
           }
           if (node) {
+            const id = index;
             embed(node, ans, { mode: 'vega-lite', actions: showActions, timeFormatLocale: getVegaTimeFormatRules(i18n.language), config: vegaConfig }).then(res => {
-              vegaRefs.current.push(res.view);
+              vegaRefs.current[id] = {
+                w: res.view.container()?.clientWidth ?? res.view.width(),
+                h: res.view.container()?.clientHeight ?? res.view.height(),
+                x: j,
+                y: i,
+                view: res.view,
+              };
               const paramStores = (res.vgSpec.data?.map(d => d.name) ?? []).filter(
                 name => [BRUSH_SIGNAL_NAME, POINT_SIGNAL_NAME].map(p => `${p}_store`).includes(name)
               ).map(name => name.replace(/_store$/, ''));
@@ -374,45 +391,7 @@ const ReactVega = forwardRef<IReactVegaHandler, ReactVegaProps>(function ReactVe
     text
   ]);
 
-  useImperativeHandle(ref, () => ({
-    getSVGData() {
-      return Promise.all(vegaRefs.current.map(view => view.toSVG()));
-    },
-    async getCanvasData() {
-      const canvases = await Promise.all(vegaRefs.current.map(view => view.toCanvas()));
-      return canvases.map(canvas => canvas.toDataURL('image/png'));
-    },
-    async downloadSVG(filename = `gw chart ${Date.now() % 1_000_000}`.padStart(6, '0')) {
-      const data = await Promise.all(vegaRefs.current.map(view => view.toSVG()));
-      const files: string[] = [];
-      for (let i = 0; i < data.length; i += 1) {
-        const d = data[i];
-        const file = new File([d], `${filename}${data.length > 1 ? `_${i + 1}` : ''}.svg`);
-        const url = URL.createObjectURL(file);
-        const a = document.createElement('a');
-        a.download = file.name;
-        a.href = url;
-        a.click();
-        requestAnimationFrame(() => {
-          URL.revokeObjectURL(url);
-        });
-      }
-      return files;
-    },
-    async downloadPNG(filename = `gw chart ${Date.now() % 1_000_000}`.padStart(6, '0')) {
-      const canvases = await Promise.all(vegaRefs.current.map(view => view.toCanvas(2)));
-      const data = canvases.map(canvas => canvas.toDataURL('image/png', 1));
-      const files: string[] = [];
-      for (let i = 0; i < data.length; i += 1) {
-        const d = data[i];
-        const a = document.createElement('a');
-        a.download = `${filename}${data.length > 1 ? `_${i + 1}` : ''}.png`;
-        a.href = d.replace(/^data:image\/[^;]/, 'data:application/octet-stream');
-        a.click();
-      }
-      return files;
-    },
-  }));
+  useVegaExportApi(name, vegaRefs, ref);
 
   return <CanvaContainer rowSize={Math.max(rowRepeatFields.length, 1)} colSize={Math.max(colRepeatFields.length, 1)}>
     {/* <div ref={container}></div> */}