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

feat(canvas): 新增图片节点打光工具

Browse Source 
新增图片节点打光功能，支持拖拽球体调节光源方位、选择预设打光效果，可调整亮度、光色和轮廓光，内置8种打光预设并附带静态资源。实现了基于参考图的AI打光生成，沿用原有模型配置，面板适配画布明暗主题，支持复制提示词与自定义提示词模板，窄屏下自动收进图片工具菜单。
This commit is contained in:
bensharp
2026-09-09 16:56:00 +08:00
parent bacd502f5c
commit 756a1ba2b1
17 changed files with 761 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
web/src/components/canvas/canvas-image-toolbar-tools.tsx
View File

@@ -1,10 +1,10 @@
import type { ReactNode } from "react";
import { Brush, Camera, Copy, FileText, Grid2x2, Lock, LockOpen, Maximize2, PencilLine, Crop, SlidersHorizontal, Smile, Upload, Scaling } from "lucide-react";
import { Brush, Camera, Copy, FileText, Grid2x2, Lock, LockOpen, Maximize2, PencilLine, Crop, SlidersHorizontal, Smile, Sun, Upload, Scaling } from "lucide-react";
import type { CanvasNodeData } from "@/types/canvas";
import type { NodeToolbarGroup } from "@/lib/canvas/tool-registry";
type ImageNodeActionToolId = "copyPrompt" | "reversePrompt" | "replace" | "resize" | "annotation" | "maskEdit" | "emotion" | "portraitTexture" | "crop" | "split" | "upscale" | "superResolve" | "angle" | "view";
type ImageNodeActionToolId = "copyPrompt" | "reversePrompt" | "replace" | "resize" | "annotation" | "maskEdit" | "emotion" | "portraitTexture" | "crop" | "split" | "upscale" | "superResolve" | "angle" | "lighting" | "view";
type ImageToolHandlers = {
onUpload: (node: CanvasNodeData) => void;
@@ -18,6 +18,7 @@ type ImageToolHandlers = {
onUpscale: (node: CanvasNodeData) => void;
onSuperResolve: (node: CanvasNodeData) => void;
onAngle: (node: CanvasNodeData) => void;
onLighting: (node: CanvasNodeData) => void;
onViewImage: (node: CanvasNodeData) => void;
onCopyPrompt: (node: CanvasNodeData) => void;
onReversePrompt: (node: CanvasNodeData) => void;
@@ -152,6 +153,16 @@ const imageToolDefinitions: ImageToolDefinition[] = [
order: 20,
run: (node, handlers) => handlers.onAngle(node),
},
{
id: "lighting",
label: "打光",
section: "视角",
description: "调整光线方向、亮度与光效，生成新图片",
icon: () => <Sun className="size-3.5" />,
group: "viewpoint",
order: 30,
run: (node, handlers) => handlers.onLighting(node),
},
{
id: "view",
label: "预览",