✨ 增加了导出svg面板并增加自定义图片路径设置

Author: Littlefean

app/src/core/service/dataGenerateService/stageExportEngine/StageExportSvg.tsx

@@ -16,12 +16,24 @@ import { ImageNode } from "../../../stage/stageObject/entity/ImageNode";
 import { Stage } from "../../../stage/Stage";
 import { PathString } from "../../../../utils/pathString";
 
+export interface SvgExportConfig {
+  imageMode: "absolutePath" | "relativePath" | "base64";
+}
+
 /**
  * 将舞台当前内容导出为SVG
  *
  *
  */
 export namespace StageExportSvg {
+  let svgConfig: SvgExportConfig = {
+    imageMode: "relativePath",
+  };
+
+  export function setConfig(config: SvgExportConfig) {
+    svgConfig = config;
+  }
+
   export function dumpNode(node: TextNode) {
     if (node.isHiddenBySectionCollapse) {
       return <></>;
@@ -68,10 +80,15 @@ export namespace StageExportSvg {
    * @param absolutePath 是否使用绝对路径
    * @returns
    */
-  export function dumpImageNode(node: ImageNode, absolutePath: boolean = false) {
+  export function dumpImageNode(node: ImageNode, svgConfigObject: SvgExportConfig) {
     if (node.isHiddenBySectionCollapse) {
       return <></>;
     }
+    let imagePath = node.path;
+    if (svgConfigObject.imageMode === "absolutePath") {
+      imagePath = PathString.dirPath(Stage.path.getFilePath()) + PathString.getSep() + node.path;
+    }
+
     return (
       <>
         {SvgUtils.rectangle(
@@ -81,9 +98,7 @@ export namespace StageExportSvg {
           2,
         )}
         <image
-          href={
-            absolutePath ? PathString.dirPath(Stage.path.getFilePath()) + PathString.getSep() + node.path : node.path
-          }
+          href={imagePath}
           x={node.rectangle.leftTop.x}
           y={node.rectangle.leftTop.y}
           width={node.rectangle.size.x}
@@ -147,7 +162,7 @@ export namespace StageExportSvg {
           } else if (entity instanceof Section) {
             return dumpSection(entity);
           } else if (entity instanceof ImageNode) {
-            return dumpImageNode(entity); // true 表示使用绝对路径
+            return dumpImageNode(entity, svgConfig);
           }
         })}
         {/* 构建连线 */}
@@ -184,7 +199,7 @@ export namespace StageExportSvg {
         {StageManager.getTextNodes().map((node) => dumpNode(node))}
         {StageManager.getLineEdges().map((edge) => dumpEdge(edge))}
         {StageManager.getSections().map((section) => dumpSection(section))}
-        {StageManager.getImageNodes().map((imageNode) => dumpImageNode(imageNode))}
+        {StageManager.getImageNodes().map((imageNode) => dumpImageNode(imageNode, svgConfig))}
       </svg>
     );
   }

app/src/locales/zh_CN.yml

@@ -517,6 +517,7 @@ appMenu:
   export:
     title: 导出
     items:
+      exportAsSvg: 导出为SVG
       exportAsSVGByAll: 导出为SVG（全部）
       exportAsMarkdownBySelected: 导出为Markdown（选中）
       exportAsPlainText: 导出为纯文本

app/src/pages/_app_menu.tsx

@@ -47,7 +47,6 @@ import { Dialog } from "../components/dialog";
 import { Settings } from "../core/service/Settings";
 import { RecentFileManager } from "../core/service/dataFileService/RecentFileManager";
 import { StageSaveManager } from "../core/service/dataFileService/StageSaveManager";
-import { StageExportSvg } from "../core/service/dataGenerateService/stageExportEngine/StageExportSvg";
 import { CopyEngine } from "../core/service/dataManageService/copyEngine/copyEngine";
 import { Stage } from "../core/stage/Stage";
 import { GraphMethods } from "../core/stage/stageManager/basicMethods/GraphMethods";
@@ -61,6 +60,7 @@ import { Popup } from "../components/popup";
 import { Panel } from "../components/panel";
 import { ComplexityDetector } from "../core/service/dataManageService/ComplexityDetector";
 import ComplexityResultPanel from "./_fixed_panel/_complexity_result_panel";
+import ExportSvgPanel from "./_popup_panel/_export_svg_panel";
 
 export default function AppMenu({ className = "", open = false }: { className?: string; open: boolean }) {
   const navigate = useNavigate();
@@ -252,34 +252,6 @@ export default function AppMenu({ className = "", open = false }: { className?:
       });
     }
   };
-  const onSaveSVGNew = async () => {
-    const path = isWeb
-      ? "file.svg"
-      : await saveFileDialog({
-          title: "另存为",
-          defaultPath: "新文件.svg", // 提供一个默认的文件名
-          filters: [
-            {
-              name: "Project Graph",
-              extensions: ["svg"],
-            },
-          ],
-        });
-
-    if (!path) {
-      return;
-    }
-
-    const data = StageExportSvg.dumpStageToSVGString();
-    try {
-      await Stage.exportEngine.saveSvgHandle(path, data);
-    } catch {
-      await Dialog.show({
-        title: "保存失败",
-        content: "保存失败，请重试",
-      });
-    }
-  };
 
   const onExportTreeText = async () => {
     const selectedNodes = StageManager.getSelectedEntities().filter((entity) => entity instanceof TextNode);
@@ -445,8 +417,8 @@ export default function AppMenu({ className = "", open = false }: { className?:
         </Row>
       )}
       <Row icon={<File />} title={t("export.title")}>
-        <Col icon={<FileCode />} onClick={onSaveSVGNew}>
-          {t("export.items.exportAsSVGByAll")}
+        <Col icon={<FileCode />} onClick={() => Popup.show(<ExportSvgPanel />, false)}>
+          {t("export.items.exportAsSvg")}
         </Col>
         <Col icon={<FileType />} onClick={onSaveMarkdownNew}>
           {t("export.items.exportAsMarkdownBySelected")}

app/src/pages/_popup_panel/_export_svg_panel.tsx

@@ -0,0 +1,85 @@
+import { useState } from "react";
+import Button from "../../components/Button";
+import { Dialog } from "../../components/dialog";
+import Select from "../../components/Select";
+import {
+  StageExportSvg,
+  SvgExportConfig,
+} from "../../core/service/dataGenerateService/stageExportEngine/StageExportSvg";
+import { Stage } from "../../core/stage/Stage";
+import { isWeb } from "../../utils/platform";
+import { save as saveFileDialog } from "@tauri-apps/plugin-dialog";
+
+export default function ExportSvgPanel() {
+  const onSaveSVGNew = async () => {
+    const path = isWeb
+      ? "file.svg"
+      : await saveFileDialog({
+          title: "另存为",
+          defaultPath: "新文件.svg", // 提供一个默认的文件名
+          filters: [
+            {
+              name: "Project Graph",
+              extensions: ["svg"],
+            },
+          ],
+        });
+
+    if (!path) {
+      return;
+    }
+    StageExportSvg.setConfig(configObject);
+    const data = StageExportSvg.dumpStageToSVGString();
+    try {
+      await Stage.exportEngine.saveSvgHandle(path, data);
+    } catch {
+      await Dialog.show({
+        title: "保存失败",
+        content: "保存失败，请重试",
+      });
+    }
+  };
+
+  const onSaveSVGSelected = () => {
+    StageExportSvg.setConfig(configObject);
+    const svgString = StageExportSvg.dumpSelectedToSVGString();
+    Dialog.show({
+      title: "导出SVG",
+      content:
+        "SVG的本质是一堆标签代码，如果您是在写markdown格式的博客，可以直接把下面的标签代码粘贴在您的文章中。如果您想保存成文件，可以把这段代码复制到txt中并改后缀名成svg",
+      code: svgString,
+      type: "info",
+    });
+  };
+
+  const [configObject, setConfigObject] = useState<SvgExportConfig>({
+    imageMode: "relativePath",
+  });
+
+  return (
+    <div className="bg-panel-bg p-4">
+      <h2 className="mb-4 text-center text-2xl font-bold">导出SVG</h2>
+      {/* 导出图片的svg使用绝对路径，使用相对路径，使用base64编码 */}
+      <div className="mb-4">
+        <p>图片节点导出模式：</p>
+        <Select
+          value={configObject.imageMode}
+          options={[
+            { label: "绝对路径", value: "absolutePath" },
+            { label: "相对路径", value: "relativePath" },
+            // { label: "base64编码", value: "base64" },
+          ]}
+          onChange={(value) => {
+            if (value === "absolutePath" || value === "relativePath" || value === "base64") {
+              setConfigObject({ ...configObject, imageMode: value });
+            }
+          }}
+        ></Select>
+      </div>
+      <div className="flex flex-col gap-2">
+        <Button onClick={onSaveSVGNew}>导出全部内容为SVG</Button>
+        <Button onClick={onSaveSVGSelected}>仅导出选中的内容为SVG</Button>
+      </div>
+    </div>
+  );
+}

app/src/pages/_toolbar.tsx

@@ -19,10 +19,8 @@ import {
 } from "lucide-react";
 import React, { useEffect, useState } from "react";
 import Box from "../components/Box";
-import { Dialog } from "../components/dialog";
 import { Popup } from "../components/popup";
 import { Color } from "../core/dataStruct/Color";
-import { StageExportSvg } from "../core/service/dataGenerateService/stageExportEngine/StageExportSvg";
 import { CopyEngine } from "../core/service/dataManageService/copyEngine/copyEngine";
 import { TextRiseEffect } from "../core/service/feedbackService/effectEngine/concrete/TextRiseEffect";
 import { ViewFlashEffect } from "../core/service/feedbackService/effectEngine/concrete/ViewFlashEffect";
@@ -195,22 +193,6 @@ export default function Toolbar({ className = "" }: { className?: string }) {
           }}
         />
       )}
-      {isHaveSelectedNode && (
-        <ToolbarItem
-          description="将选中内容导出SVG"
-          icon={<SaveAll />}
-          handleFunction={() => {
-            const svgString = StageExportSvg.dumpSelectedToSVGString();
-            Dialog.show({
-              title: "导出SVG",
-              content:
-                "SVG的本质是一堆标签代码，如果您是在写markdown格式的博客，可以直接把下面的标签代码粘贴在您的文章中。如果您想保存成文件，可以把这段代码复制到txt中并改后缀名成svg",
-              code: svgString,
-              type: "info",
-            });
-          }}
-        />
-      )}
       <ToolbarItem
         description="刷新选中内容(图片加载失败了可以选中图片然后点这个按钮)"
         icon={<RefreshCcw />}