@kanaries/graphic-walker 0.3.8 → 0.3.10

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> */}