Skip to content

Commit 6c577db

Browse files
LittlefeanLittlefean
committed
💄 优化工具栏样式
1 parent bb57dbc commit 6c577db

File tree

1 file changed

+131
-101
lines changed

1 file changed

+131
-101
lines changed

‎app/src/pages/_toolbar.tsx‎

Lines changed: 131 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { save as saveFileDialog } from "@tauri-apps/plugin-dialog";
22

33
import {
44
BrainCircuit,
5+
Brush,
56
ClipboardPaste,
67
ClipboardX,
78
Globe,
@@ -10,10 +11,10 @@ import {
1011
Package,
1112
PaintBucket,
1213
Palette,
13-
PenTool,
1414
RefreshCcw,
1515
Repeat,
1616
SaveAll,
17+
Slash,
1718
Square,
1819
Tag,
1920
Trash2,
@@ -44,9 +45,10 @@ interface ToolbarItemProps {
4445
icon: React.ReactNode; // 定义 icon 的类型
4546
handleFunction: () => void; // 定义 handleFunction 的类型
4647
description: string;
48+
isHighlight?: boolean;
4749
}
4850

49-
export function ToolbarItem({ icon, handleFunction, description }: ToolbarItemProps) {
51+
export function ToolbarItem({ icon, handleFunction, description, isHighlight = false }: ToolbarItemProps) {
5052
return (
5153
<div
5254
className="hover:bg-toolbar-icon-hover-bg text-toolbar-tooltip-text group relative flex h-8 w-8 cursor-pointer items-center justify-center rounded-md active:scale-90"
@@ -56,10 +58,13 @@ export function ToolbarItem({ icon, handleFunction, description }: ToolbarItemPr
5658
<span className="bg-toolbar-tooltip-bg border-toolbar-tooltip-border text-toolbar-tooltip-text pointer-events-none absolute bottom-8 z-10 w-auto origin-right scale-90 whitespace-nowrap rounded border p-1 text-xs opacity-0 group-hover:scale-100 group-hover:opacity-100">
5759
{description}
5860
</span>
61+
{isHighlight && <div className="bg-panel-success-text absolute bottom-0 h-1 w-6 rounded-t-md" />}
5962
</div>
6063
);
6164
}
6265

66+
const toolBarGroupStyle = "bg-toolbar-bg border-toolbar-border flex items-center rounded-md border";
67+
6368
/**
6469
* 工具栏
6570
* @param param0
@@ -71,6 +76,8 @@ export default function Toolbar({ className = "" }: { className?: string }) {
7176
const [isHaveSelectedNode, setSsHaveSelectedNode] = useState(false);
7277
const [isHaveSelectedEdge, setSsHaveSelectedEdge] = useState(false);
7378
const [isDrawing, setIsDrawing] = useState(false);
79+
const [isSelecting, setIsSelecting] = useState(false);
80+
const [isConnecting, setIsConnecting] = useState(false);
7481

7582
const update = () => {
7683
setSsHaveSelectedNode(StageManager.selectedNodeCount > 0);
@@ -94,131 +101,154 @@ export default function Toolbar({ className = "" }: { className?: string }) {
94101

95102
// 以后适配安卓的时候再解决工具栏过小的问题
96103
return (
97-
<Box
98-
className={cn("bg-toolbar-bg border-toolbar-border fixed bottom-2 left-1/2 flex translate-x-[-50%]", className)}
99-
>
100-
{/* 右键移动画布的用户希望保留此按钮 */}
101-
<ToolbarItem
102-
description="删除选中的节点/连线"
103-
icon={<Trash2 />}
104-
handleFunction={() => {
105-
StageManager.deleteSelectedStageObjects();
106-
}}
107-
/>
108-
<ToolbarItem
109-
description="通过文本生成节点"
110-
icon={<ClipboardPaste />}
111-
handleFunction={() => Popup.show(<GenerateNodePanel />, true)}
112-
/>
113-
{isHaveSelectedEdge && (
104+
<Box className={cn("fixed bottom-2 left-1/2 flex translate-x-[-50%] gap-2 border-none", className)}>
105+
<div className={toolBarGroupStyle}>
106+
{/* 右键移动画布的用户希望保留此按钮 */}
114107
<ToolbarItem
115-
description="反转选中连线方向"
116-
icon={<Repeat />}
108+
description="删除选中的节点/连线"
109+
icon={<Trash2 />}
117110
handleFunction={() => {
118-
const selectedEdges = StageManager.getLineEdges().filter((edge) => edge.isSelected);
119-
StageNodeConnector.reverseEdges(selectedEdges);
120-
StageHistoryManager.recordStep();
111+
StageManager.deleteSelectedStageObjects();
121112
}}
122113
/>
123-
)}
114+
<ToolbarItem
115+
description="通过文本生成节点"
116+
icon={<ClipboardPaste />}
117+
handleFunction={() => Popup.show(<GenerateNodePanel />, true)}
118+
/>
119+
{isHaveSelectedEdge && (
120+
<ToolbarItem
121+
description="反转选中连线方向"
122+
icon={<Repeat />}
123+
handleFunction={() => {
124+
const selectedEdges = StageManager.getLineEdges().filter((edge) => edge.isSelected);
125+
StageNodeConnector.reverseEdges(selectedEdges);
126+
StageHistoryManager.recordStep();
127+
}}
128+
/>
129+
)}
124130

125-
<ToolbarItem
126-
description="设置节点/连线/框的颜色，注意要先选中再点颜色 （F6）"
127-
icon={<PaintBucket />}
128-
handleFunction={() => Popup.show(<ColorPanel />, true)}
129-
/>
130-
<ToolbarItem
131-
description="设置实体创建时自动填充的颜色"
132-
icon={<Palette />}
133-
handleFunction={() => Panel.show({ title: "颜色自动填充" }, <ColorAutoPanel />)}
134-
/>
131+
<ToolbarItem
132+
description="设置节点/连线/框的颜色，注意要先选中再点颜色 （F6）"
133+
icon={<PaintBucket />}
134+
handleFunction={() => Popup.show(<ColorPanel />, true)}
135+
/>
136+
<ToolbarItem
137+
description="设置实体创建时自动填充的颜色"
138+
icon={<Palette />}
139+
handleFunction={() => Panel.show({ title: "颜色自动填充" }, <ColorAutoPanel />)}
140+
/>
135141

136-
<ToolbarItem
137-
description="节点对齐相关"
138-
icon={<LayoutDashboard />}
139-
handleFunction={() => Popup.show(<AlignNodePanel />, true)}
140-
/>
141-
{isClipboardClearShow && (
142142
<ToolbarItem
143-
description="清空粘贴板内容"
144-
icon={<ClipboardX />}
143+
description="节点对齐相关"
144+
icon={<LayoutDashboard />}
145+
handleFunction={() => Popup.show(<AlignNodePanel />, true)}
146+
/>
147+
{isClipboardClearShow && (
148+
<ToolbarItem
149+
description="清空粘贴板内容"
150+
icon={<ClipboardX />}
151+
handleFunction={() => {
152+
CopyEngine.clearVirtualCopyBoardData();
153+
}}
154+
/>
155+
)}
156+
{isHaveSelectedNode && (
157+
<ToolbarItem
158+
description="将选中的节点的内容作为网页链接或本地文件路径打开"
159+
icon={<Globe />}
160+
handleFunction={async () => {
161+
// 打开文件或网页
162+
openBrowserOrFile();
163+
}}
164+
/>
165+
)}
166+
{isHaveSelectedNode && (
167+
<ToolbarItem
168+
description="将选中的节点保存为新文件"
169+
icon={<SaveAll />}
170+
handleFunction={() => {
171+
onSaveSelectedNew();
172+
}}
173+
/>
174+
)}
175+
<ToolbarItem
176+
description="将选中节点打包Section（快捷键可自定义）"
177+
icon={<Square />}
145178
handleFunction={() => {
146-
CopyEngine.clearVirtualCopyBoardData();
179+
StageManager.packEntityToSectionBySelected();
147180
}}
148181
/>
149-
)}
150-
{isHaveSelectedNode && (
151182
<ToolbarItem
152-
description="将选中的节点的内容作为网页链接或本地文件路径打开"
153-
icon={<Globe />}
154-
handleFunction={async () => {
155-
// 打开文件或网页
156-
openBrowserOrFile();
183+
description="切换Section的折叠状态（快捷键可自定义）（还在开发中，暂时不推荐使用）"
184+
icon={<Package />}
185+
handleFunction={() => {
186+
StageManager.sectionSwitchCollapse();
157187
}}
158188
/>
159-
)}
160-
{isHaveSelectedNode && (
189+
{isHaveSelectedNode && (
190+
<ToolbarItem
191+
description="添加标签，如果已添加则去除标签"
192+
icon={<Tag />}
193+
handleFunction={() => {
194+
StageManager.addTagBySelected();
195+
}}
196+
/>
197+
)}
198+
{isHaveSelectedNode && (
199+
<ToolbarItem
200+
description="AI扩展节点，（已欠费，有待更新）"
201+
icon={<BrainCircuit />}
202+
handleFunction={() => {
203+
StageGeneratorAI.generateNewTextNodeBySelected();
204+
StageHistoryManager.recordStep();
205+
}}
206+
/>
207+
)}
161208
<ToolbarItem
162-
description="将选中的节点保存为新文件"
163-
icon={<SaveAll />}
209+
description="刷新选中内容(图片加载失败了可以选中图片然后点这个按钮)"
210+
icon={<RefreshCcw />}
164211
handleFunction={() => {
165-
onSaveSelectedNew();
212+
StageManager.refreshSelected();
166213
}}
167214
/>
168-
)}
169-
<ToolbarItem
170-
description="将选中节点打包Section（快捷键可自定义）"
171-
icon={<Square />}
172-
handleFunction={() => {
173-
StageManager.packEntityToSectionBySelected();
174-
}}
175-
/>
176-
<ToolbarItem
177-
description="切换Section的折叠状态（快捷键可自定义）（还在开发中，暂时不推荐使用）"
178-
icon={<Package />}
179-
handleFunction={() => {
180-
StageManager.sectionSwitchCollapse();
181-
}}
182-
/>
183-
{isHaveSelectedNode && (
215+
</div>
216+
217+
<div className={toolBarGroupStyle}>
184218
<ToolbarItem
185-
description="添加标签，如果已添加则去除标签"
186-
icon={<Tag />}
219+
description="左键：框选和移动模式"
220+
icon={<MousePointer />}
187221
handleFunction={() => {
188-
StageManager.addTagBySelected();
222+
Stage.drawingMachine.shutDown();
223+
setIsSelecting(true);
224+
setIsDrawing(false);
225+
setIsConnecting(false);
189226
}}
227+
isHighlight={isSelecting}
190228
/>
191-
)}
192-
{isHaveSelectedNode && (
193229
<ToolbarItem
194-
description="AI扩展节点，（已欠费，有待更新）"
195-
icon={<BrainCircuit />}
230+
description="左键：涂鸦模式"
231+
icon={<Brush className="rotate-90" />}
196232
handleFunction={() => {
197-
StageGeneratorAI.generateNewTextNodeBySelected();
198-
StageHistoryManager.recordStep();
233+
Stage.drawingMachine.open();
234+
setIsSelecting(false);
235+
setIsDrawing(true);
236+
setIsConnecting(false);
199237
}}
238+
isHighlight={isDrawing}
200239
/>
201-
)}
202-
<ToolbarItem
203-
description="刷新选中内容(图片加载失败了可以选中图片然后点这个按钮)"
204-
icon={<RefreshCcw />}
205-
handleFunction={() => {
206-
StageManager.refreshSelected();
207-
}}
208-
/>
209-
<ToolbarItem
210-
description="切换涂鸦和鼠标"
211-
icon={isDrawing ? <PenTool /> : <MousePointer />}
212-
handleFunction={() => {
213-
if (Stage.drawingMachine.isUsing) {
214-
Stage.drawingMachine.shutDown();
215-
setIsDrawing(false);
216-
} else {
240+
<ToolbarItem
241+
description="左键：连接与断开（正在开发中，先用右键）"
242+
icon={<Slash className="rotate-90" />}
243+
handleFunction={() => {
217244
Stage.drawingMachine.open();
218-
setIsDrawing(true);
219-
}
220-
}}
221-
/>
245+
setIsSelecting(false);
246+
setIsDrawing(false);
247+
setIsConnecting(true);
248+
}}
249+
isHighlight={isConnecting}
250+
/>
251+
</div>
222252
</Box>
223253
);
224254
}

0 commit comments

Comments
 (0)