feat: support export current page as svg

apps/suika/src/components/Header/components/Toolbar/menu/Menu.tsx

@@ -33,12 +33,22 @@ export const Menu: FC = () => {
 
   const items: IDropdownProps['items'] = [
     {
-      key: 'import',
-      label: t({ id: 'import.originFile' }),
-    },
-    {
-      key: 'export',
-      label: t({ id: 'export.originFile' }),
+      key: 'file',
+      label: t({ id: 'file' }),
+      children: [
+        {
+          key: 'import',
+          label: t({ id: 'import.originFile' }),
+        },
+        {
+          key: 'export',
+          label: t({ id: 'export.originFile' }),
+        },
+        {
+          key: 'exportCurrentPageAsSVG',
+          label: t({ id: 'export.currentPageAsSVG' }),
+        },
+      ],
     },
     {
       type: 'divider',
@@ -88,6 +98,9 @@ export const Menu: FC = () => {
       case 'export':
         exportService.exportOriginFile(editor);
         break;
+      case 'exportCurrentPageAsSVG':
+        exportService.exportCurrentPageSVG(editor);
+        break;
       case 'keepToolSelectedAfterUse':
       case 'invertZoomDirection':
       case 'highlightLayersOnHover':

apps/suika/src/locale/en.json

@@ -56,8 +56,10 @@
   "flip.horizontal": "Flip horizontal",
   "flip.vertical": "Flip vertical",
 
+  "file": "File",
   "import.originFile": "Import local file",
   "export.originFile": "Save local copy",
+  "export.currentPageAsSVG": "Export current page as SVG",
 
   "preference": "Preference",
   "keepToolSelectedAfterUse": "Keep tool selected after use",

apps/suika/src/locale/zh.json

@@ -55,8 +55,10 @@
   "flip.horizontal": "水平翻转",
   "flip.vertical": "垂直翻转",
 
+  "file": "文件",
   "import.originFile": "从本地导入",
   "export.originFile": "导出到本地",
+  "export.currentPageAsSVG": "导出当前页面为 SVG",
 
   "preference": "偏好设置",
   "keepToolSelectedAfterUse": "使用工具后保持选中状态",

packages/core/src/service/export_service.ts

@@ -1,4 +1,5 @@
 import { type SuikaEditor } from '../editor';
+import { toSVG } from '../to_svg';
 
 export const exportService = {
   exportOriginFile: (editor: SuikaEditor, filename = 'design') => {
@@ -8,6 +9,23 @@ export const exportService = {
     });
     download(blob, filename + '.suika');
   },
+
+  exportCurrentPageSVG: (editor: SuikaEditor) => {
+    const currentPage = editor.doc.getCurrentCanvas();
+    const graphicsItems = currentPage.getChildren();
+
+    if (graphicsItems.length === 0) {
+      // TODO: if no graphics items, show error message
+      console.error('No graphics items to export');
+      return;
+    }
+
+    const svg = toSVG(graphicsItems);
+    const blob = new Blob([svg], {
+      type: 'image/svg+xml',
+    });
+    download(blob, 'design.svg');
+  },
 };
 
 const download = (blob: Blob, filename: string) => {