Skip to content

Commit 0f5dfc4

Browse files
LittlefeanLittlefean
committed
🚸 更改颜色后自动取消选中状态
1 parent 7371057 commit 0f5dfc4

File tree

3 files changed

+25
-56
lines changed

3 files changed

+25
-56
lines changed

‎app/src/core/service/feedbackService/stageStyle/stageStyle.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ export class StageStyle {
6363
style.StageObjectBorderColor = new Color(204, 204, 204);
6464
style.CollideBoxPreDeleteColor = new Color(255, 255, 0, 0.2);
6565
style.CollideBoxPreSelectedColor = new Color(0, 255, 0, 0.2);
66-
style.CollideBoxSelectedColor = new Color(34, 217, 110);
66+
style.CollideBoxSelectedColor = new Color(34, 217, 110, 0.5);
6767
style.NodeDetailsTextColor = new Color(255, 255, 255);
6868
style.effects = {
6969
flash: Color.White,
@@ -85,7 +85,7 @@ export class StageStyle {
8585
style.SelectRectangleFillColor = new Color(0, 0, 0, 0.08);
8686
style.StageObjectBorderColor = new Color(0, 0, 0);
8787
style.CollideBoxPreSelectedColor = new Color(0, 255, 0, 0.2);
88-
style.CollideBoxSelectedColor = new Color(64, 209, 171);
88+
style.CollideBoxSelectedColor = new Color(64, 209, 171, 0.5);
8989
style.NodeDetailsTextColor = new Color(0, 0, 0);
9090
style.effects = {
9191
flash: Color.Black,
@@ -118,7 +118,7 @@ export class StageStyle {
118118

119119
// 碰撞盒颜色
120120
style.CollideBoxPreSelectedColor = new Color(238, 63, 77, 0.3);
121-
style.CollideBoxSelectedColor = new Color(238, 63, 77); // 169, 221, 208
121+
style.CollideBoxSelectedColor = new Color(238, 63, 77, 0.7); // 169, 221, 208
122122

123123
// 文字使用深紫色
124124
style.NodeDetailsTextColor = new Color(107, 89, 108); // 深灰紫
@@ -156,7 +156,7 @@ export class StageStyle {
156156

157157
// 碰撞盒颜色使用冷绿色和冷紫色
158158
style.CollideBoxPreSelectedColor = new Color(169, 221, 208, 0.3).desaturate(0.3); // 浅豆绿
159-
style.CollideBoxSelectedColor = new Color(62, 125, 83);
159+
style.CollideBoxSelectedColor = new Color(62, 125, 83, 0.4);
160160

161161
// 文字使用更深的冷灰色
162162
style.NodeDetailsTextColor = new Color(65, 74, 84); // 深冷灰

‎app/src/core/stage/stageManager/concreteMethods/StageObjectColorManager.tsx‎

Lines changed: 12 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { StageManager } from "../StageManager";
77
* 不仅包括添加颜色和去除颜色，还包括让颜色变暗和变亮等
88
*/
99
export namespace StageObjectColorManager {
10-
export function setEntityColor(color: Color) {
10+
export function setSelectedStageObjectColor(color: Color) {
1111
for (const node of StageManager.getTextNodes()) {
1212
if (node.isSelected) {
1313
node.color = color;
@@ -20,36 +20,30 @@ export namespace StageObjectColorManager {
2020
}
2121
for (const entity of StageManager.getPenStrokes()) {
2222
if (entity.isSelected) {
23-
// TODO: 涂鸦应该可以改颜色
23+
entity.setColor(color);
24+
}
25+
}
26+
for (const edge of StageManager.getLineEdges()) {
27+
if (edge.isSelected) {
28+
edge.color = color;
2429
}
2530
}
31+
// 特性：统一取消框选
32+
StageManager.clearSelectAll();
2633
StageHistoryManager.recordStep();
2734
}
2835

29-
export function clearEntityColor() {
36+
export function setEntityColor(color: Color) {
3037
for (const node of StageManager.getTextNodes()) {
3138
if (node.isSelected) {
32-
node.color = Color.Transparent;
39+
node.color = color;
3340
}
3441
}
3542
for (const node of StageManager.getSections()) {
3643
if (node.isSelected) {
37-
node.color = Color.Transparent;
38-
}
39-
}
40-
StageHistoryManager.recordStep();
41-
}
42-
43-
export function setEdgeColor(color: Color) {
44-
for (const edge of StageManager.getLineEdges()) {
45-
if (edge.isSelected) {
46-
edge.color = color;
44+
node.color = color;
4745
}
4846
}
49-
StageHistoryManager.recordStep();
50-
}
51-
52-
export function setStrokeColor(color: Color) {
5347
for (const entity of StageManager.getPenStrokes()) {
5448
if (entity.isSelected) {
5549
entity.setColor(color);
@@ -58,15 +52,6 @@ export namespace StageObjectColorManager {
5852
StageHistoryManager.recordStep();
5953
}
6054

61-
export function clearEdgeColor() {
62-
for (const edge of StageManager.getLineEdges()) {
63-
if (edge.isSelected) {
64-
edge.color = Color.Transparent;
65-
}
66-
}
67-
StageHistoryManager.recordStep();
68-
}
69-
7055
export function darkenNodeColor() {
7156
for (const node of StageManager.getTextNodes()) {
7257
if (node.isSelected && node.color) {

‎app/src/pages/_popup_panel/_color_panel.tsx‎

Lines changed: 9 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { ColorManager } from "../../core/service/feedbackService/ColorManager";
77
import ColorManagerPanel from "./_color_manager_panel";
88
import { StageObjectColorManager } from "../../core/stage/stageManager/concreteMethods/StageObjectColorManager";
99
/**
10-
* 调色盘面板
10+
* 上色盘面板
1111
* @param param0
1212
* @returns
1313
*/
@@ -28,55 +28,43 @@ export default function ColorPanel() {
2828
className="m-1 h-5 w-5 cursor-pointer rounded bg-red-500 hover:scale-125"
2929
onClick={() => {
3030
const color = new Color(239, 68, 68);
31-
StageObjectColorManager.setEntityColor(color);
32-
StageObjectColorManager.setEdgeColor(color);
33-
StageObjectColorManager.setStrokeColor(color);
31+
StageObjectColorManager.setSelectedStageObjectColor(color);
3432
}}
3533
/>
3634
<div
3735
className="m-1 h-5 w-5 cursor-pointer rounded bg-yellow-500 hover:scale-125"
3836
onClick={() => {
3937
const color = new Color(234, 179, 8);
40-
StageObjectColorManager.setEntityColor(color);
41-
StageObjectColorManager.setEdgeColor(color);
42-
StageObjectColorManager.setStrokeColor(color);
38+
StageObjectColorManager.setSelectedStageObjectColor(color);
4339
}}
4440
/>
4541
<div
4642
className="m-1 h-5 w-5 cursor-pointer rounded bg-green-600 hover:scale-125"
4743
onClick={() => {
4844
const color = new Color(22, 163, 74);
49-
StageObjectColorManager.setEntityColor(color);
50-
StageObjectColorManager.setEdgeColor(color);
51-
StageObjectColorManager.setStrokeColor(color);
45+
StageObjectColorManager.setSelectedStageObjectColor(color);
5246
}}
5347
/>
5448
<div
5549
className="m-1 h-5 w-5 cursor-pointer rounded bg-blue-500 hover:scale-125"
5650
onClick={() => {
5751
const color = new Color(59, 130, 246);
58-
StageObjectColorManager.setEntityColor(color);
59-
StageObjectColorManager.setEdgeColor(color);
60-
StageObjectColorManager.setStrokeColor(color);
52+
StageObjectColorManager.setSelectedStageObjectColor(color);
6153
}}
6254
/>
6355
<div
6456
className="m-1 h-5 w-5 cursor-pointer rounded bg-purple-500 hover:scale-125"
6557
onClick={() => {
6658
const color = new Color(168, 85, 247);
67-
StageObjectColorManager.setEntityColor(color);
68-
StageObjectColorManager.setEdgeColor(color);
69-
StageObjectColorManager.setStrokeColor(color);
59+
StageObjectColorManager.setSelectedStageObjectColor(color);
7060
}}
7161
/>
7262
{/* 清除颜色 */}
7363
<div
7464
className="m-1 h-5 w-5 animate-pulse cursor-pointer rounded bg-transparent text-center text-sm hover:scale-125"
7565
onClick={() => {
7666
const color = Color.Transparent;
77-
StageObjectColorManager.setEntityColor(color);
78-
StageObjectColorManager.setEdgeColor(color);
79-
StageObjectColorManager.setStrokeColor(color);
67+
StageObjectColorManager.setSelectedStageObjectColor(color);
8068
}}
8169
>
8270
<Blend className="h-5 w-5" />
@@ -94,9 +82,7 @@ export default function ColorPanel() {
9482
const r = parseInt(color.slice(1, 3), 16);
9583
const g = parseInt(color.slice(3, 5), 16);
9684
const b = parseInt(color.slice(5, 7), 16);
97-
StageObjectColorManager.setEntityColor(new Color(r, g, b));
98-
StageObjectColorManager.setEdgeColor(new Color(r, g, b));
99-
StageObjectColorManager.setStrokeColor(new Color(r, g, b));
85+
StageObjectColorManager.setSelectedStageObjectColor(new Color(r, g, b));
10086
}}
10187
></input>
10288
<Button
@@ -122,9 +108,7 @@ export default function ColorPanel() {
122108
backgroundColor: `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`,
123109
}}
124110
onClick={() => {
125-
StageObjectColorManager.setEntityColor(color);
126-
StageObjectColorManager.setEdgeColor(color);
127-
StageObjectColorManager.setStrokeColor(color);
111+
StageObjectColorManager.setSelectedStageObjectColor(color);
128112
}}
129113
/>
130114
);

0 commit comments

Comments
 (0)