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

7
docs/content/docs/progress/pending-test.mdx
View File

@@ -16,6 +16,13 @@ description: 当前项目已实现功能的手工验证清单与未确认边界
- [ ] PostgreSQL 部署执行 schema 34 升级及多实例租约/共享暂存卷验收。未修改当前本地业务数据库、历史失败任务或账单。
- [ ] 无恢复记录的历史失败任务单独核实源地址有效期与计费状态；本功能不从旧日志自动回填，不承诺恢复已过期的源文件。
## 画布默认黑色主题与点网格
- 前端类型检查与 17 项外观、主题隔离测试通过；尚未完成真实浏览器验收。
- [ ] 未保存自定义默认外观时，新建画布使用黑色主题：背景 `#000000`、明亮度 `0%`、网格颜色 `#000000`、网格强度 `100%`、空间网格为点。黑底黑点视觉上为纯黑。
- [ ] 切换「黑色」或「浅色」预设时使用点网格；黑色首次转自定义及重置时使用上述预设数值，已有自定义配置仍保留，浅色颜色与强度保持原值。仍可手动选择线或空白网格。
- [ ] 已保存的画布外观及用户自定义默认外观不被覆盖；画布主题变更不影响工作台主题。实际浏览器明暗主题与保存恢复待验收。
## Live2D 运行库随部署交付
- Cubism Core 已纳入版本控制，保留原始版权声明并附第三方许可说明；前端构建和静态镜像直接包含运行文件，不再要求部署者手工安装。

4
web/src/components/canvas/canvas-appearance-controls.tsx
View File

@@ -4,6 +4,7 @@ import { CircleDot, Grid2x2, Moon, Paintbrush, RotateCcw, Save, Square, Sun } fr
import {
canvasAppearanceForTheme,
DEFAULT_CANVAS_BACKGROUND_MODE,
customCanvasAppearanceFromTheme,
enterCustomCanvasAppearance,
normalizeHexColor,
@@ -40,6 +41,7 @@ export function CanvasAppearanceControls({
const next = canvasAppearanceForTheme(target, draft);
setDraft(next);
onAppearanceChange(next);
onBackgroundModeChange(DEFAULT_CANVAS_BACKGROUND_MODE);
};
const selectCustomTheme = () => {
const next = enterCustomCanvasAppearance(draft, colorTheme);
@@ -71,7 +73,7 @@ export function CanvasAppearanceControls({
<div className="mt-3 text-[var(--fs-micro)] font-semibold uppercase opacity-45">主题模式</div>
<div className="mt-1 grid grid-cols-3 gap-1 rounded-[var(--dock-item-radius-labeled)] border p-1" style={{ background: theme.spatial.surface, borderColor: theme.toolbar.border }}>
<ThemeButton active={draft.mode === "light"} label="浅色" theme={theme} onClick={() => selectFixedTheme("light")}><Sun className="size-3.5" /></ThemeButton>
<ThemeButton active={draft.mode === "dark"} label="深色" theme={theme} onClick={() => selectFixedTheme("dark")}><Moon className="size-3.5" /></ThemeButton>
<ThemeButton active={draft.mode === "dark"} label="黑色" theme={theme} onClick={() => selectFixedTheme("dark")}><Moon className="size-3.5" /></ThemeButton>
<ThemeButton active={draft.mode === "custom"} label="自定义" theme={theme} onClick={selectCustomTheme}><Paintbrush className="size-3.5" /></ThemeButton>
</div>

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]),
};
}

6
web/src/stores/canvas/use-canvas-store.ts
View File

@@ -3,11 +3,11 @@ import { persist, type PersistStorage, type StorageValue } from "zustand/middlew
import { nanoid } from "nanoid";
import { sameCanvasContent } from "@/lib/canvas/canvas-content";
import { DEFAULT_CANVAS_BACKGROUND_MODE, normalizeCanvasAppearance, readCanvasAppearanceDefault, type CanvasAppearance } from "@/lib/canvas/canvas-appearance";
import { canvasAppearanceForTheme, DEFAULT_CANVAS_BACKGROUND_MODE, normalizeCanvasAppearance, readCanvasAppearanceDefault, type CanvasAppearance } from "@/lib/canvas/canvas-appearance";
import { parseCanvasStorageDocument, rebaseCanvasProjects, serializeCanvasStorageDocument, type CanvasStorageDocument } from "@/lib/canvas/canvas-storage-revision";
import { localForageStorageForScope } from "@/lib/localforage-storage";
import { getActiveUserScope } from "@/lib/user-scope";
import type { CanvasBackgroundMode } from "@/lib/canvas-theme";
import { DEFAULT_CANVAS_COLOR_THEME, type CanvasBackgroundMode } from "@/lib/canvas-theme";
import type { CanvasStarterMode } from "@/lib/canvas/canvas-starter";
import type { CanvasAssistantSession, CanvasConnection, CanvasNodeData, ViewportTransform } from "@/types/canvas";
import type { DirectorScene } from "@/types/director";
@@ -461,7 +461,7 @@ export const useCanvasStore = create<CanvasStore>()(
connections: [],
chatSessions: [],
activeChatId: null,
appearance: appearanceDefault?.appearance,
appearance: appearanceDefault?.appearance ?? canvasAppearanceForTheme(DEFAULT_CANVAS_COLOR_THEME),
backgroundMode: appearanceDefault?.backgroundMode || DEFAULT_CANVAS_BACKGROUND_MODE,
showImageInfo: false,
viewport: initialViewport,

8
web/src/stores/canvas/use-canvas-theme-store.ts
View File

@@ -3,17 +3,21 @@ import { persist } from "zustand/middleware";
import type { ThemeName } from "@/stores/use-theme-store";
import { useThemeStore } from "@/stores/use-theme-store";
import { useLayoutEffect } from "react";
import { DEFAULT_CANVAS_COLOR_THEME } from "@/lib/canvas-theme";
type CanvasThemeStore = { theme: ThemeName; active: boolean; setTheme: (theme: ThemeName) => void };
/** 画布外观是编辑器状态，不能写入用户工作台的全局主题。 */
export const useCanvasThemeStore = create<CanvasThemeStore>()(
persist(
(set) => ({ theme: "light", active: false, setTheme: (theme) => { if (theme === "light" || theme === "dark") set({ theme }); } }),
(set) => ({ theme: DEFAULT_CANVAS_COLOR_THEME, active: false, setTheme: (theme) => { if (theme === "light" || theme === "dark") set({ theme }); } }),
{
name: "infinite-canvas:canvas-theme",
partialize: ({ theme }) => ({ theme }),
merge: (persisted, current) => ({ ...current, theme: (persisted as Partial<CanvasThemeStore> | null)?.theme === "dark" ? "dark" : "light" }),
merge: (persisted, current) => {
const theme = (persisted as Partial<CanvasThemeStore> | null)?.theme;
return { ...current, theme: theme === "light" || theme === "dark" ? theme : DEFAULT_CANVAS_COLOR_THEME };
},
},
),
);

26
web/test/canvas-appearance.test.ts
View File

@@ -1,4 +1,5 @@
import { afterEach, beforeEach, describe, expect, test } from "bun:test";
import { DEFAULT_CANVAS_COLOR_THEME } from "../src/lib/canvas-theme";
import {
DEFAULT_CANVAS_BACKGROUND_MODE,
@@ -39,6 +40,29 @@ afterEach(() => {
describe("canvas custom appearance", () => {
test("uses point grid as the default for new canvases", () => {
expect(DEFAULT_CANVAS_BACKGROUND_MODE).toBe("dots");
expect(DEFAULT_CANVAS_COLOR_THEME).toBe("dark");
});
test("resolves the black preset to a black background and fully opaque black grid", () => {
const appearance = canvasAppearanceForTheme(DEFAULT_CANVAS_COLOR_THEME);
expect(resolveCanvasAppearance(appearance, "light")).toEqual({
baseTheme: "dark",
background: "#000000",
grid: "#000000",
});
expect(resolveCanvasGridColor(appearance, "light", "dots")).toBe("#000000");
expect(resolveCanvasAppearance(customCanvasAppearanceFromTheme("dark"), "light")).toEqual({
baseTheme: "dark",
background: "#000000",
grid: "rgba(0,0,0,1)",
});
});
test("selecting either fixed theme resets the spatial grid to dots", async () => {
const source = await Bun.file(new URL("../src/components/canvas/canvas-appearance-controls.tsx", import.meta.url)).text();
const fixedThemeSource = source.slice(source.indexOf("const selectFixedTheme"), source.indexOf("const selectCustomTheme"));
expect(fixedThemeSource).toContain("onBackgroundModeChange(DEFAULT_CANVAS_BACKGROUND_MODE)");
expect(resolveCanvasGridColor(canvasAppearanceForTheme("light"), "dark", "dots")).toBe("rgba(0,0,0,.80)");
});
test("inherits the active fixed theme the first time custom mode is selected", () => {
@@ -55,7 +79,7 @@ describe("canvas custom appearance", () => {
});
const dark = enterCustomCanvasAppearance(canvasAppearanceForTheme("dark"), "dark");
expect(dark.custom).toMatchObject({ baseTheme: "dark", backgroundColor: "#000000", backgroundBrightness: 0, gridColor: "#AFAFAF", gridOpacity: 80 });
expect(dark.custom).toMatchObject({ baseTheme: "dark", backgroundColor: "#000000", backgroundBrightness: 0, gridColor: "#000000", gridOpacity: 100 });
});
test("restores a previous custom profile only under the same base theme", () => {

5
web/test/canvas-theme-isolation.test.ts
View File

@@ -10,6 +10,11 @@ afterEach(() => {
});
describe("canvas theme ownership", () => {
test("defaults to black while allowing an explicit light theme", () => {
expect(useCanvasThemeStore.getInitialState().theme).toBe("dark");
useCanvasThemeStore.getState().setTheme("light");
expect(useCanvasThemeStore.getState().theme).toBe("light");
});
test("editing the canvas theme never mutates the workspace preference", () => {
useThemeStore.setState({ theme: "light" });
useCanvasThemeStore.setState({ active: true });