diff --git a/src/main/services/WindowService.ts b/src/main/services/WindowService.ts index 7a427658..9b61682e 100644 --- a/src/main/services/WindowService.ts +++ b/src/main/services/WindowService.ts @@ -185,6 +185,7 @@ export class WindowService { private loadMainWindowContent(mainWindow: BrowserWindow) { if (is.dev && process.env['ELECTRON_RENDERER_URL']) { mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL']) + mainWindow.webContents.openDevTools() } else { mainWindow.loadFile(join(__dirname, '../renderer/index.html')) } diff --git a/src/renderer/src/hooks/useMermaid.ts b/src/renderer/src/hooks/useMermaid.ts index 20f941d4..59771525 100644 --- a/src/renderer/src/hooks/useMermaid.ts +++ b/src/renderer/src/hooks/useMermaid.ts @@ -37,4 +37,32 @@ export const useMermaid = () => { setTimeout(renderMermaid, 100) }, [generating]) + + useEffect(() => { + const handleWheel = (e: WheelEvent) => { + if (e.ctrlKey || e.metaKey) { + e.preventDefault() + const mermaidElement = (e.target as HTMLElement).closest('.mermaid') + if (!mermaidElement) return + + const svg = mermaidElement.querySelector('svg') + if (!svg) return + + const currentScale = parseFloat(svg.style.transform?.match(/scale\((.*?)\)/)?.[1] || '1') + const delta = e.deltaY < 0 ? 0.1 : -0.1 + const newScale = Math.max(0.1, Math.min(3, currentScale + delta)) + + const container = svg.parentElement + if (container) { + container.style.overflow = 'auto' + container.style.position = 'relative' + svg.style.transformOrigin = 'top left' + svg.style.transform = `scale(${newScale})` + } + } + } + + document.addEventListener('wheel', handleWheel, { passive: false }) + return () => document.removeEventListener('wheel', handleWheel) + }, []) } diff --git a/src/renderer/src/i18n/locales/en-us.json b/src/renderer/src/i18n/locales/en-us.json index feb079fa..38585876 100644 --- a/src/renderer/src/i18n/locales/en-us.json +++ b/src/renderer/src/i18n/locales/en-us.json @@ -217,6 +217,10 @@ "png": "Download PNG", "svg": "Download SVG" }, + "resize": { + "zoom-in": "Zoom In", + "zoom-out": "Zoom Out" + }, "tabs": { "preview": "Preview", "source": "Source" diff --git a/src/renderer/src/i18n/locales/ja-jp.json b/src/renderer/src/i18n/locales/ja-jp.json index e3303a80..0c2e102a 100644 --- a/src/renderer/src/i18n/locales/ja-jp.json +++ b/src/renderer/src/i18n/locales/ja-jp.json @@ -217,6 +217,10 @@ "png": "PNGをダウンロード", "svg": "SVGをダウンロード" }, + "resize": { + "zoom-in": "拡大する", + "zoom-out": "ズームアウト" + }, "tabs": { "preview": "プレビュー", "source": "ソース" diff --git a/src/renderer/src/i18n/locales/ru-ru.json b/src/renderer/src/i18n/locales/ru-ru.json index 8f4fa371..0eaf5e35 100644 --- a/src/renderer/src/i18n/locales/ru-ru.json +++ b/src/renderer/src/i18n/locales/ru-ru.json @@ -217,6 +217,10 @@ "png": "Скачать PNG", "svg": "Скачать SVG" }, + "resize": { + "zoom-in": "Yвеличить", + "zoom-out": "Yменьшить масштаб" + }, "tabs": { "preview": "Предпросмотр", "source": "Исходный код" diff --git a/src/renderer/src/i18n/locales/zh-cn.json b/src/renderer/src/i18n/locales/zh-cn.json index c7b6fb40..5db74aaa 100644 --- a/src/renderer/src/i18n/locales/zh-cn.json +++ b/src/renderer/src/i18n/locales/zh-cn.json @@ -218,6 +218,10 @@ "png": "下载 PNG", "svg": "下载 SVG" }, + "resize": { + "zoom-in": "放大", + "zoom-out": "缩小" + }, "tabs": { "preview": "预览", "source": "源码" diff --git a/src/renderer/src/i18n/locales/zh-tw.json b/src/renderer/src/i18n/locales/zh-tw.json index dbb2ad93..24d93b64 100644 --- a/src/renderer/src/i18n/locales/zh-tw.json +++ b/src/renderer/src/i18n/locales/zh-tw.json @@ -217,6 +217,10 @@ "png": "下載 PNG", "svg": "下載 SVG" }, + "resize": { + "zoom-in": "放大", + "zoom-out": "縮小" + }, "tabs": { "preview": "預覽", "source": "原始碼" diff --git a/src/renderer/src/pages/home/Markdown/MermaidPopup.tsx b/src/renderer/src/pages/home/Markdown/MermaidPopup.tsx index 7fc15fd9..7c6b1676 100644 --- a/src/renderer/src/pages/home/Markdown/MermaidPopup.tsx +++ b/src/renderer/src/pages/home/Markdown/MermaidPopup.tsx @@ -18,6 +18,7 @@ const PopupContainer: React.FC = ({ resolve, chart }) => { const { t } = useTranslation() const mermaidId = `mermaid-popup-${Date.now()}` const [activeTab, setActiveTab] = useState('preview') + const [scale, setScale] = useState(1) const onOk = () => { setOpen(false) @@ -31,6 +32,25 @@ const PopupContainer: React.FC = ({ resolve, chart }) => { resolve({}) } + const handleZoom = (delta: number) => { + const newScale = Math.max(0.1, Math.min(3, scale + delta)) + setScale(newScale) + + const element = document.getElementById(mermaidId) + if (!element) return + + const svg = element.querySelector('svg') + if (!svg) return + + const container = svg.parentElement + if (container) { + container.style.overflow = 'auto' + container.style.position = 'relative' + svg.style.transformOrigin = 'top left' + svg.style.transform = `scale(${newScale})` + } + } + const handleDownload = async (format: 'svg' | 'png') => { try { const element = document.getElementById(mermaidId) @@ -110,6 +130,8 @@ const PopupContainer: React.FC = ({ resolve, chart }) => { {activeTab === 'source' && } {activeTab === 'preview' && ( <> + +