i/next-ai-draw-io
1
0
Fork 0
mirror of https://github.com/DayuanJiang/next-ai-draw-io.git synced 2026-10-08 18:57:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add all Draw.io themes to settings panel (#499)

Browse Source
This commit is contained in:
Xinyang Gao-PC
2026-01-04 19:41:49 +08:00
parent 3ce047f794
commit 801974a18b
8 changed files with 97 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/[lang]/page.tsx
+18 -6
View File
@@ -13,6 +13,17 @@ import {
import { useDiagram } from "@/contexts/diagram-context"
import { i18n, type Locale } from "@/lib/i18n/config"
// Draw.io UI themes
export type DrawioTheme = "kennedy" | "simple" | "min" | "sketch" | "atlas"
export const DRAWIO_THEMES: DrawioTheme[] = [
"kennedy",
"simple",
"min",
"sketch",
"atlas",
]
const DEFAULT_DRAWIO_THEME: DrawioTheme = "min"
const drawioBaseUrl =
process.env.NEXT_PUBLIC_DRAWIO_BASE_URL || "https://embed.diagrams.net"
@@ -25,7 +36,7 @@ export default function Home() {
const currentLang = (pathname.split("/")[1] || i18n.defaultLocale) as Locale
const [isMobile, setIsMobile] = useState(false)
const [isChatVisible, setIsChatVisible] = useState(true)
const [drawioUi, setDrawioUi] = useState<"min" | "sketch">("min")
const [drawioUi, setDrawioUi] = useState<DrawioTheme>(DEFAULT_DRAWIO_THEME)
const [darkMode, setDarkMode] = useState(false)
const [isLoaded, setIsLoaded] = useState(false)
const [isDrawioReady, setIsDrawioReady] = useState(false)
@@ -48,8 +59,10 @@ export default function Home() {
}
}
const savedUi = localStorage.getItem("drawio-theme")
if (savedUi === "min" || savedUi === "sketch") {
const savedUi = localStorage.getItem(
"drawio-theme",
) as DrawioTheme | null
if (savedUi && DRAWIO_THEMES.includes(savedUi)) {
setDrawioUi(savedUi)
}
@@ -90,8 +103,7 @@ export default function Home() {
resetDrawioReady()
}
const handleDrawioUiChange = () => {
const newUi = drawioUi === "min" ? "sketch" : "min"
const handleDrawioUiChange = (newUi: DrawioTheme) => {
localStorage.setItem("drawio-theme", newUi)
setDrawioUi(newUi)
setIsDrawioReady(false)
@@ -239,7 +251,7 @@ export default function Home() {
isVisible={isChatVisible}
onToggleVisibility={toggleChatPanel}
drawioUi={drawioUi}
onToggleDrawioUi={handleDrawioUiChange}
onDrawioUiChange={handleDrawioUiChange}
darkMode={darkMode}
onToggleDarkMode={handleDarkModeChange}
isMobile={isMobile}
app/globals.css
+5
View File
@@ -399,3 +399,8 @@
animation: none;
}
}
/* Fix for iframe touch events in Chrome */
.diagrams-iframe {
touch-action: auto;
}
components/chat-panel.tsx
+4 -4
View File
@@ -64,8 +64,8 @@ interface ChatMessage {
interface ChatPanelProps {
isVisible: boolean
onToggleVisibility: () => void
drawioUi: "min" | "sketch"
onToggleDrawioUi: () => void
drawioUi: import("@/app/[lang]/page").DrawioTheme
onDrawioUiChange: (theme: import("@/app/[lang]/page").DrawioTheme) => void
darkMode: boolean
onToggleDarkMode: () => void
isMobile?: boolean
@@ -106,7 +106,7 @@ export default function ChatPanel({
isVisible,
onToggleVisibility,
drawioUi,
onToggleDrawioUi,
onDrawioUiChange,
darkMode,
onToggleDarkMode,
isMobile = false,
@@ -1277,7 +1277,7 @@ export default function ChatPanel({
onOpenChange={setShowSettingsDialog}
onCloseProtectionChange={onCloseProtectionChange}
drawioUi={drawioUi}
onToggleDrawioUi={onToggleDrawioUi}
onDrawioUiChange={onDrawioUiChange}
darkMode={darkMode}
onToggleDarkMode={onToggleDarkMode}
minimalStyle={minimalStyle}
components/settings-dialog.tsx
+34 -18
View File
@@ -3,6 +3,7 @@
import { Github, Info, Moon, Sun, Tag } from "lucide-react"
import { usePathname, useRouter, useSearchParams } from "next/navigation"
import { Suspense, useEffect, useState } from "react"
import { DRAWIO_THEMES, type DrawioTheme } from "@/app/[lang]/page"
import { Button } from "@/components/ui/button"
import {
Dialog,
@@ -60,8 +61,8 @@ interface SettingsDialogProps {
open: boolean
onOpenChange: (open: boolean) => void
onCloseProtectionChange?: (enabled: boolean) => void
drawioUi: "min" | "sketch"
onToggleDrawioUi: () => void
drawioUi: DrawioTheme
onDrawioUiChange: (theme: DrawioTheme) => void
darkMode: boolean
onToggleDarkMode: () => void
minimalStyle?: boolean
@@ -84,7 +85,7 @@ function SettingsContent({
onOpenChange,
onCloseProtectionChange,
drawioUi,
onToggleDrawioUi,
onDrawioUiChange,
darkMode,
onToggleDarkMode,
minimalStyle = false,
@@ -314,23 +315,38 @@ function SettingsContent({
{/* Draw.io Style */}
<SettingItem
label={dict.settings.drawioStyle}
description={`${dict.settings.drawioStyleDescription} ${
drawioUi === "min"
? dict.settings.minimal
: dict.settings.sketch
}`}
description={dict.settings.drawioStyleDescription}
>
<Button
id="drawio-ui"
variant="outline"
onClick={onToggleDrawioUi}
className="h-9 w-[120px] rounded-xl border-border-subtle hover:bg-interactive-hover font-normal"
<Select
value={drawioUi}
onValueChange={(value) =>
onDrawioUiChange(value as DrawioTheme)
}
>
{dict.settings.switchTo}{" "}
{drawioUi === "min"
? dict.settings.sketch
: dict.settings.minimal}
</Button>
<SelectTrigger
id="drawio-ui"
className="w-[120px] h-9 rounded-xl"
>
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="kennedy">
{dict.settings.themes.classic}
</SelectItem>
<SelectItem value="simple">
{dict.settings.themes.simple}
</SelectItem>
<SelectItem value="min">
{dict.settings.themes.minimal}
</SelectItem>
<SelectItem value="sketch">
{dict.settings.themes.sketch}
</SelectItem>
<SelectItem value="atlas">
{dict.settings.themes.atlas}
</SelectItem>
</SelectContent>
</Select>
</SettingItem>
{/* Close Protection */}
lib/drawio-themes.ts
+12
View File
@@ -0,0 +1,12 @@
// Draw.io UI themes configuration
export type DrawioTheme = "kennedy" | "simple" | "min" | "sketch" | "atlas"
export const DRAWIO_THEMES: DrawioTheme[] = [
"kennedy",
"simple",
"min",
"sketch",
"atlas",
]
export const DEFAULT_DRAWIO_THEME: DrawioTheme = "min"
lib/i18n/dictionaries/en.json
+8 -4
View File
@@ -94,10 +94,14 @@
"theme": "Theme",
"themeDescription": "Dark/Light mode for interface and DrawIO canvas.",
"drawioStyle": "DrawIO Style",
"drawioStyleDescription": "Canvas style:",
"switchTo": "Switch to",
"minimal": "Minimal",
"sketch": "Sketch",
"drawioStyleDescription": "Choose canvas UI theme.",
"themes": {
"classic": "Classic",
"simple": "Simple",
"minimal": "Minimal",
"sketch": "Sketch",
"atlas": "Atlas"
},
"closeProtection": "Close Protection",
"closeProtectionDescription": "Show confirmation when leaving the page.",
"diagramStyle": "Diagram Style",
lib/i18n/dictionaries/ja.json
+8 -4
View File
@@ -94,10 +94,14 @@
"theme": "テーマ",
"themeDescription": "インターフェースと DrawIO キャンバスのダーク/ライトモード。",
"drawioStyle": "DrawIO スタイル",
"drawioStyleDescription": "キャンバススタイル：",
"switchTo": "切り替え",
"minimal": "ミニマル",
"sketch": "スケッチ",
"drawioStyleDescription": "キャンバスUIテーマを選択。",
"themes": {
"classic": "クラシック",
"simple": "シンプル",
"minimal": "ミニマル",
"sketch": "スケッチ",
"atlas": "アトラス"
},
"closeProtection": "ページ離脱確認",
"closeProtectionDescription": "ページを離れる際に確認を表示します。",
"diagramStyle": "ダイアグラムスタイル",
lib/i18n/dictionaries/zh.json
+8 -4
View File
@@ -94,10 +94,14 @@
"theme": "主题",
"themeDescription": "界面和 DrawIO 画布的深色/浅色模式。",
"drawioStyle": "DrawIO 样式",
"drawioStyleDescription": "画布样式：",
"switchTo": "切换到",
"minimal": "简约",
"sketch": "草图",
"drawioStyleDescription": "选择画布 UI 主题。",
"themes": {
"classic": "经典",
"simple": "简易",
"minimal": "极简",
"sketch": "草图",
"atlas": "现代"
},
"closeProtection": "关闭确认",
"closeProtectionDescription": "离开页面时显示确认。",
"diagramStyle": "图表样式",