@antv/gpt-vis 0.5.3 → 0.5.4

package/dist/cjs/ChartCodeRender/VisChart.js

@@ -32,6 +32,7 @@ __export(VisChart_exports, {
   RenderVisChart: () => RenderVisChart
 });
 module.exports = __toCommonJS(VisChart_exports);
+var import_snapdom = require("@zumer/snapdom");
 var import_react = __toESM(require("react"));
 var import_react_error_boundary = require("react-error-boundary");
 var import_react_syntax_highlighter = require("react-syntax-highlighter");
@@ -59,6 +60,7 @@ var RenderVisChart = (0, import_react.memo)(
     const [hasRenderError, setHasRenderError] = (0, import_react.useState)(false);
     const [copied, setCopied] = (0, import_react.useState)(false);
     const chartRef = (0, import_react.useRef)(null);
+    const chartContainerRef = (0, import_react.useRef)(null);
     let chartJson;
     try {
       chartJson = JSON.parse(content);
@@ -127,6 +129,19 @@ var RenderVisChart = (0, import_react.memo)(
         console.error("复制失败:", error);
       }
     };
+    const handleDownload = async () => {
+      try {
+        if (chartContainerRef.current) {
+          const result = await (0, import_snapdom.snapdom)(chartContainerRef.current, { scale: 2 });
+          await result.download({
+            format: "png",
+            filename: `chart-${type}-${Date.now()}`
+          });
+        }
+      } catch (error) {
+        console.error("下载图片失败:", error);
+      }
+    };
     const isG6 = G6List.includes(type);
     const handleZoomOut = () => {
       if (chartRef.current && typeof chartRef.current.zoomTo === "function") {
@@ -156,7 +171,7 @@ var RenderVisChart = (0, import_react.memo)(
         style: { width: "24px", height: "24px", padding: 0 }
       },
       /* @__PURE__ */ import_react.default.createElement(import_icon.ZoomOut, { size: 18 })
-    ))) : /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_styles.TextButton, { onClick: handleCopy }, copied ? /* @__PURE__ */ import_react.default.createElement(import_icon.Check, null) : /* @__PURE__ */ import_react.default.createElement(import_icon.Copy, null), copied ? "完成" : "复制")))), /* @__PURE__ */ import_react.default.createElement(import_styles.TabContent, null, activeTab === "chart" ? /* @__PURE__ */ import_react.default.createElement(
+    ), /* @__PURE__ */ import_react.default.createElement(import_styles.Divider, null)), /* @__PURE__ */ import_react.default.createElement(import_styles.TextButton, { onClick: handleDownload }, /* @__PURE__ */ import_react.default.createElement(import_icon.DownLoad, { size: 16 }), "下载")) : /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_styles.TextButton, { onClick: handleCopy }, copied ? /* @__PURE__ */ import_react.default.createElement(import_icon.Check, null) : /* @__PURE__ */ import_react.default.createElement(import_icon.Copy, null), copied ? "完成" : "复制")))), /* @__PURE__ */ import_react.default.createElement(import_styles.TabContent, null, activeTab === "chart" ? /* @__PURE__ */ import_react.default.createElement(
       import_react_error_boundary.ErrorBoundary,
       {
         FallbackComponent,
@@ -171,7 +186,7 @@ var RenderVisChart = (0, import_react.memo)(
           }
         }
       },
-      /* @__PURE__ */ import_react.default.createElement(import_styles.StyledGPTVis, { className: "gpt-vis" }, /* @__PURE__ */ import_react.default.createElement(import_styles.GlobalStyles, null), /* @__PURE__ */ import_react.default.createElement(import_styles.ChartWrapper, null, /* @__PURE__ */ import_react.default.createElement(
+      /* @__PURE__ */ import_react.default.createElement(import_styles.StyledGPTVis, { className: "gpt-vis" }, /* @__PURE__ */ import_react.default.createElement(import_styles.GlobalStyles, null), /* @__PURE__ */ import_react.default.createElement(import_styles.ChartWrapper, { ref: chartContainerRef }, /* @__PURE__ */ import_react.default.createElement(
         ChartComponent,
         {
           ...chartProps,

package/dist/cjs/ChartCodeRender/icon.d.ts

@@ -6,4 +6,5 @@ export declare const Copy: React.FC<Props>;
 export declare const ZoomOut: React.FC<Props>;
 export declare const ZoomIn: React.FC<Props>;
 export declare const Check: React.FC<Props>;
+export declare const DownLoad: React.FC<Props>;
 export {};

package/dist/cjs/ChartCodeRender/icon.js

@@ -31,6 +31,7 @@ var icon_exports = {};
 __export(icon_exports, {
   Check: () => Check,
   Copy: () => Copy,
+  DownLoad: () => DownLoad,
   ZoomIn: () => ZoomIn,
   ZoomOut: () => ZoomOut
 });
@@ -131,10 +132,31 @@ var Check = ({ size = 14, fill = "#707070" }) => /* @__PURE__ */ import_react.de
     }
   )
 );
+var DownLoad = ({ size = 14, fill = "#707070" }) => /* @__PURE__ */ import_react.default.createElement(
+  "svg",
+  {
+    viewBox: "0 0 1024 1024",
+    version: "1.1",
+    xmlns: "http://www.w3.org/2000/svg",
+    "p-id": "5988",
+    width: size,
+    height: size,
+    fill
+  },
+  /* @__PURE__ */ import_react.default.createElement(
+    "path",
+    {
+      d: "M512 165.93q13.645 0 23.31 9.666t9.665 23.31V580.77L653.37 472.103q9.517-9.517 23.434-9.517 14.164 0 23.558 9.394t9.393 23.557q0 13.917-9.517 23.434L535.434 683.774q-9.517 9.517-23.434 9.517t-23.434-9.517L323.763 518.971q-9.517-10.036-9.517-23.434 0-13.645 9.665-23.31t23.31-9.665q13.917 0 23.434 9.516L479.05 580.744V198.881q0-13.645 9.665-23.31t23.31-9.665z m329.582 461.435q13.645 0 23.31 9.665t9.665 23.31v131.828q0 41.207-28.575 69.782-29.095 29.095-69.536 29.095H248.32q-40.416 0-70.03-28.848-28.847-29.613-28.847-70.03V660.34q0-13.645 9.665-23.31t23.31-9.665 23.31 9.665 9.666 23.31v131.828q0 13.645 9.665 23.31t23.31 9.665h528.127q13.398 0 22.791-9.665t9.393-23.31V660.34q0-13.645 9.666-23.31t23.31-9.665z",
+      "p-id": "1178",
+      fill: "#494949"
+    }
+  )
+);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Check,
   Copy,
+  DownLoad,
   ZoomIn,
   ZoomOut
 });

package/dist/cjs/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "0.5.3";
+declare const _default: "0.5.4";
 export default _default;

package/dist/cjs/version.js

@@ -22,4 +22,4 @@ __export(version_exports, {
   default: () => version_default
 });
 module.exports = __toCommonJS(version_exports);
-var version_default = "0.5.3";
+var version_default = "0.5.4";

package/dist/esm/ChartCodeRender/VisChart.js

@@ -12,14 +12,15 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { snapdom } from '@zumer/snapdom';
 import React, { memo, useRef, useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
 import json from 'react-syntax-highlighter/dist/esm/languages/hljs/json';
 import { magula } from 'react-syntax-highlighter/dist/esm/styles/hljs';
-import { Check, Copy, ZoomIn, ZoomOut } from "./icon";
+import { Check, Copy, DownLoad, ZoomIn, ZoomOut } from "./icon";
 import Loading from "./Loading";
-import { ChartWrapper, ErrorMessage, GlobalStyles, StyledGPTVis, StyledTabButton, TabContainer, TabContent, TabHeader, TabLeftGroup, TabRightGroup, TextButton } from "./styles";
+import { ChartWrapper, Divider, ErrorMessage, GlobalStyles, StyledGPTVis, StyledTabButton, TabContainer, TabContent, TabHeader, TabLeftGroup, TabRightGroup, TextButton } from "./styles";
 import { handleCopyCode } from "./utils";
 
 // 注册 JSON 语言支持
@@ -52,6 +53,7 @@ export var RenderVisChart = /*#__PURE__*/memo(function (_ref) {
     copied = _useState8[0],
     setCopied = _useState8[1];
   var chartRef = useRef(null);
+  var chartContainerRef = useRef(null);
   var chartJson;
   try {
     chartJson = JSON.parse(content);
@@ -157,6 +159,45 @@ export var RenderVisChart = /*#__PURE__*/memo(function (_ref) {
       return _ref2.apply(this, arguments);
     };
   }();
+  var handleDownload = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+      var result;
+      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            _context2.prev = 0;
+            if (!chartContainerRef.current) {
+              _context2.next = 7;
+              break;
+            }
+            _context2.next = 4;
+            return snapdom(chartContainerRef.current, {
+              scale: 2
+            });
+          case 4:
+            result = _context2.sent;
+            _context2.next = 7;
+            return result.download({
+              format: 'png',
+              filename: "chart-".concat(type, "-").concat(Date.now())
+            });
+          case 7:
+            _context2.next = 12;
+            break;
+          case 9:
+            _context2.prev = 9;
+            _context2.t0 = _context2["catch"](0);
+            console.error('下载图片失败:', _context2.t0);
+          case 12:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2, null, [[0, 9]]);
+    }));
+    return function handleDownload() {
+      return _ref3.apply(this, arguments);
+    };
+  }();
   var isG6 = G6List.includes(type);
 
   // 缩放功能函数
@@ -206,7 +247,11 @@ export var RenderVisChart = /*#__PURE__*/memo(function (_ref) {
     }
   }, /*#__PURE__*/React.createElement(ZoomOut, {
     size: 18
-  })))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextButton, {
+  })), /*#__PURE__*/React.createElement(Divider, null)), /*#__PURE__*/React.createElement(TextButton, {
+    onClick: handleDownload
+  }, /*#__PURE__*/React.createElement(DownLoad, {
+    size: 16
+  }), "\u4E0B\u8F7D")) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TextButton, {
     onClick: handleCopy
   }, copied ? /*#__PURE__*/React.createElement(Check, null) : /*#__PURE__*/React.createElement(Copy, null), copied ? '完成' : '复制')))), /*#__PURE__*/React.createElement(TabContent, null, activeTab === 'chart' ? /*#__PURE__*/React.createElement(ErrorBoundary, {
     FallbackComponent: FallbackComponent,
@@ -222,7 +267,9 @@ export var RenderVisChart = /*#__PURE__*/memo(function (_ref) {
     }
   }, /*#__PURE__*/React.createElement(StyledGPTVis, {
     className: "gpt-vis"
-  }, /*#__PURE__*/React.createElement(GlobalStyles, null), /*#__PURE__*/React.createElement(ChartWrapper, null, /*#__PURE__*/React.createElement(ChartComponent, _extends({}, chartProps, {
+  }, /*#__PURE__*/React.createElement(GlobalStyles, null), /*#__PURE__*/React.createElement(ChartWrapper, {
+    ref: chartContainerRef
+  }, /*#__PURE__*/React.createElement(ChartComponent, _extends({}, chartProps, {
     onReady: function onReady(chart) {
       chartRef.current = chart;
     }

package/dist/esm/ChartCodeRender/icon.d.ts

@@ -6,4 +6,5 @@ export declare const Copy: React.FC<Props>;
 export declare const ZoomOut: React.FC<Props>;
 export declare const ZoomIn: React.FC<Props>;
 export declare const Check: React.FC<Props>;
+export declare const DownLoad: React.FC<Props>;
 export {};

package/dist/esm/ChartCodeRender/icon.js

@@ -81,4 +81,23 @@ export var Check = function Check(_ref4) {
     fill: "",
     "p-id": "5989"
   }));
+};
+export var DownLoad = function DownLoad(_ref5) {
+  var _ref5$size = _ref5.size,
+    size = _ref5$size === void 0 ? 14 : _ref5$size,
+    _ref5$fill = _ref5.fill,
+    fill = _ref5$fill === void 0 ? '#707070' : _ref5$fill;
+  return /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 1024 1024",
+    version: "1.1",
+    xmlns: "http://www.w3.org/2000/svg",
+    "p-id": "5988",
+    width: size,
+    height: size,
+    fill: fill
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M512 165.93q13.645 0 23.31 9.666t9.665 23.31V580.77L653.37 472.103q9.517-9.517 23.434-9.517 14.164 0 23.558 9.394t9.393 23.557q0 13.917-9.517 23.434L535.434 683.774q-9.517 9.517-23.434 9.517t-23.434-9.517L323.763 518.971q-9.517-10.036-9.517-23.434 0-13.645 9.665-23.31t23.31-9.665q13.917 0 23.434 9.516L479.05 580.744V198.881q0-13.645 9.665-23.31t23.31-9.665z m329.582 461.435q13.645 0 23.31 9.665t9.665 23.31v131.828q0 41.207-28.575 69.782-29.095 29.095-69.536 29.095H248.32q-40.416 0-70.03-28.848-28.847-29.613-28.847-70.03V660.34q0-13.645 9.665-23.31t23.31-9.665 23.31 9.665 9.666 23.31v131.828q0 13.645 9.665 23.31t23.31 9.665h528.127q13.398 0 22.791-9.665t9.393-23.31V660.34q0-13.645 9.666-23.31t23.31-9.665z",
+    "p-id": "1178",
+    fill: "#494949"
+  }));
 };

package/dist/esm/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "0.5.3";
+declare const _default: "0.5.4";
 export default _default;

package/dist/esm/version.js

@@ -1 +1 @@
-export default '0.5.3';
+export default '0.5.4';