tt/ttstd-infinite-canvas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(canvas): 画布外观 - 默认使用黑色点网格并保留自定义配置

Browse Source
This commit is contained in:
ddCat
2026-09-22 15:47:49 +08:00
parent 2cd30b9951
commit da24992afe
8 changed files with 56 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
web/src/lib/canvas-theme.ts
View File

@@ -1,5 +1,6 @@
export type CanvasColorTheme = "light" | "dark";
export type CanvasBackgroundMode = "dots" | "lines" | "blank";
export const DEFAULT_CANVAS_COLOR_THEME: CanvasColorTheme = "dark";
export const canvasThemes = {
light: {
@@ -72,8 +73,8 @@ export const canvasThemes = {
dark: {
canvas: {
background: "#000000",
dot: "rgba(175,175,175,.80)",
line: "rgba(175,175,175,.80)",
dot: "#000000",
line: "#000000",
selectionFill: "rgba(255,255,255,.12)",
},
node: {

8
web/src/lib/canvas/canvas-appearance.ts
View File

@@ -31,8 +31,8 @@ export const DEFAULT_CANVAS_BACKGROUND_MODE: CanvasBackgroundMode = "dots";
const CANVAS_APPEARANCE_DEFAULT_KEY = "infinite-canvas:canvas-appearance-default";
const HEX_COLOR_PATTERN = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i;
const CUSTOM_GRID_COLOR: Record<CanvasColorTheme, string> = { light: "#000000", dark: "#AFAFAF" };
const CUSTOM_GRID_OPACITY = 80;
const CUSTOM_GRID_COLOR: Record<CanvasColorTheme, string> = { light: "#000000", dark: "#000000" };
const CUSTOM_GRID_OPACITY: Record<CanvasColorTheme, number> = { light: 80, dark: 100 };
export function canvasAppearanceForTheme(theme: CanvasColorTheme, previous?: CanvasAppearance): CanvasAppearance {
return previous?.custom?.baseTheme === theme ? { mode: theme, custom: previous.custom } : { mode: theme };
@@ -46,7 +46,7 @@ export function customCanvasAppearanceFromTheme(theme: CanvasColorTheme): Canvas
backgroundColor: canvasThemes[theme].canvas.background.toUpperCase(),
backgroundBrightness: 0,
gridColor: CUSTOM_GRID_COLOR[theme],
gridOpacity: CUSTOM_GRID_OPACITY,
gridOpacity: CUSTOM_GRID_OPACITY[theme],
},
};
}
@@ -143,7 +143,7 @@ function normalizeCustomAppearance(value: unknown): CanvasCustomAppearance | und
backgroundColor,
backgroundBrightness: clampNumber(candidate.backgroundBrightness, -30, 30, 0),
gridColor,
gridOpacity: clampNumber(candidate.gridOpacity, 0, 100, CUSTOM_GRID_OPACITY),
gridOpacity: clampNumber(candidate.gridOpacity, 0, 100, CUSTOM_GRID_OPACITY[candidate.baseTheme]),
};
}