✨ 完善颜色管理面板，增加从节点添加颜色库、自动整理颜色库顺序按钮

Author: Littlefean

app/src/core/dataStruct/Color.tsx

@@ -155,6 +155,39 @@ export class Color {
     return { h: h * 360, s, l };
   }
 
+  /**
+   * 计算颜色的色相
+   * @param color
+   * @returns 色相值（0-360）
+   */
+  public static getHue(color: Color): number {
+    const r = color.r / 255;
+    const g = color.g / 255;
+    const b = color.b / 255;
+
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    let hue = 0;
+
+    if (max === min) {
+      hue = 0; // achromatic
+    } else {
+      const diff = max - min;
+      if (max === r) {
+        hue = ((g - b) / diff) % 6;
+      } else if (max === g) {
+        hue = (b - r) / diff + 2;
+      } else if (max === b) {
+        hue = (r - g) / diff + 4;
+      }
+      hue = Math.round(hue * 60);
+      if (hue < 0) {
+        hue += 360;
+      }
+    }
+    return hue;
+  }
+
   // 辅助方法：HSL转RGB
   private hslToRgb(hsl: { h: number; s: number; l: number }): { r: number; g: number; b: number } {
     let k, r, g, b;

app/src/core/service/feedbackService/ColorManager.tsx

@@ -84,6 +84,31 @@ export namespace ColorManager {
     }
     return false;
   }
+  /**
+   * 按照色相环的顺序整理用户实体填充颜色
+   */
+  export async function organizeUserEntityFillColors() {
+    const colors = await getUserEntityFillColors();
+    const sortedColors = sortColorsByHue(colors);
+    await store.set("entityFillColors", colorToColorData(sortedColors));
+    store.save();
+  }
+
+  /**
+   * 按照色相环的顺序排序颜色
+   * @param colors
+   */
+  function sortColorsByHue(colors: Color[]): Color[] {
+    return colors.sort((a, b) => getColorHue(a) - getColorHue(b));
+  }
+  /**
+   * 计算颜色的色相
+   * @param color
+   * @returns 色相值（0-360）
+   */
+  function getColorHue(color: Color): number {
+    return Color.getHue(color);
+  }
 }
 /**
 json数据格式

app/src/pages/_app.tsx

@@ -348,6 +348,7 @@ export default function App() {
         </IconButton>
         {isDesktop && (
           <IconButton
+            className={cn(isWindowCollapsing && "animate-bounce")}
             onClick={async (e) => {
               e.stopPropagation();
               // const size = await getCurrentWindow().outerSize();

app/src/pages/_color_manager_panel.tsx

@@ -3,6 +3,10 @@ import Button from "../components/Button";
 import { Dialog } from "../components/dialog";
 import { Color } from "../core/dataStruct/Color";
 import { ColorManager } from "../core/service/feedbackService/ColorManager";
+import { StageManager } from "../core/stage/stageManager/StageManager";
+import { TextNode } from "../core/stage/stageObject/entity/TextNode";
+import { Section } from "../core/stage/stageObject/entity/Section";
+import { LineEdge } from "../core/stage/stageObject/association/LineEdge";
 
 /**
  * 自定义颜色设置面板
@@ -19,15 +23,29 @@ export default function ColorManagerPanel() {
   const [currentColorList, setCurrentColorList] = useState<Color[]>([]);
 
   return (
-    <div className="h-96 w-96 bg-neutral-700 p-4">
+    <div className="bg-panel-bg h-96 w-96 p-4">
       <div>
-        <p>当前颜色：</p>
+        <p>我的颜色库：</p>
         {/* <ColorDotElement color={Color.Red} /> */}
         <div className="flex flex-wrap items-center justify-center">
           {currentColorList.map((color) => (
-            <ColorDotElement key={color.toString()} color={color} />
+            <ColorDotElement
+              key={color.toString()}
+              color={color}
+              onclick={() => {
+                console.log(color);
+                const rgbSharpString = color.toHexString();
+                if (rgbSharpString.length === 9) {
+                  // 去掉透明度
+                  setPreAddColor(rgbSharpString.slice(0, 7));
+                }
+              }}
+            />
           ))}
         </div>
+        {currentColorList.length !== 0 && (
+          <div className="text-panel-details-text text-center text-xs">提示：点击颜色可以复制颜色值到待添加颜色</div>
+        )}
       </div>
       <div>
         <p>添加颜色：</p>
@@ -60,25 +78,56 @@ export default function ColorManagerPanel() {
         >
           确认添加
         </Button>
+        <Button
+          onClick={() => {
+            StageManager.getSelectedStageObjects().forEach((stageObject) => {
+              if (stageObject instanceof TextNode) {
+                ColorManager.addUserEntityFillColor(stageObject.color);
+              } else if (stageObject instanceof Section) {
+                ColorManager.addUserEntityFillColor(stageObject.color);
+              } else if (stageObject instanceof LineEdge) {
+                ColorManager.addUserEntityFillColor(stageObject.color);
+              }
+            });
+          }}
+        >
+          将选中的节点颜色添加到库
+        </Button>
+        <Button
+          onClick={() => {
+            ColorManager.organizeUserEntityFillColors();
+          }}
+        >
+          一键整理颜色库
+        </Button>
       </div>
     </div>
   );
 }
-function ColorDotElement({ color }: { color: Color }) {
+
+function ColorDotElement({ color, onclick }: { color: Color; onclick: (e: any) => void }) {
   const r = color.r;
   const g = color.g;
   const b = color.b;
   const a = color.a;
   return (
-    <div className="relative m-1 h-8 w-8 rounded-full" style={{ backgroundColor: `rgba(${r}, ${g}, ${b}, ${a})` }}>
-      <Button
-        className="absolute -right-2 -top-2 h-2 w-2 rounded-full text-xs"
-        onClick={() => {
-          ColorManager.removeUserEntityFillColor(color);
-        }}
+    <div className="my-1">
+      <div
+        className="relative mx-1 h-8 min-w-8 rounded-full hover:cursor-pointer"
+        style={{ backgroundColor: `rgba(${r}, ${g}, ${b}, ${a})` }}
+        onClick={onclick}
       >
-        x
-      </Button>
+        <Button
+          className="absolute -right-2 -top-2 h-2 w-2 rounded-full text-xs"
+          onClick={() => {
+            ColorManager.removeUserEntityFillColor(color);
+          }}
+          tooltip="删除"
+        >
+          x
+        </Button>
+      </div>
+      <span className="mx-0.5 cursor-text select-all rounded bg-black px-1 text-xs text-neutral-300">{`${r}, ${g}, ${b}`}</span>
     </div>
   );
 }