💄 给快捷键界面添加分类

Author: Littlefean

app/src/core/service/controlService/shortcutKeysEngine/KeyBinds.tsx

@@ -72,7 +72,7 @@ export namespace KeyBinds {
    */
   export async function entries() {
     if (!store) {
-      throw new Error("Store not initialized.");
+      throw new Error("Keybind Store not initialized.");
     }
     return await store.entries<{ key: string; modifiers: KeyModifiers }>();
   }

app/src/core/service/controlService/shortcutKeysEngine/shortcutKeysGroup.tsx

@@ -0,0 +1,104 @@
+/**
+ * 专门给各种快捷键分组
+ */
+
+type ShortcutKeysGroup = {
+  title: string;
+  keys: string[];
+};
+
+export const shortcutKeysGroups: ShortcutKeysGroup[] = [
+  {
+    title: "basic",
+    keys: [
+      "undo",
+      "redo",
+      "selectAll",
+      "searchText",
+      "copy",
+      "paste",
+      "pasteWithOriginLocation",
+      "deleteSelectedStageObjects",
+    ],
+  },
+  {
+    title: "camera",
+    keys: [
+      "resetView",
+      "resetCameraScale",
+      "masterBrakeCheckout",
+      "masterBrakeControl",
+      "CameraScaleZoomIn",
+      "CameraScaleZoomOut",
+    ],
+  },
+  {
+    title: "app",
+    keys: ["switchDebugShow", "exitSoftware", "checkoutProtectPrivacy", "reload"],
+  },
+  {
+    title: "ui",
+    keys: [
+      "checkoutClassroomMode",
+      "checkoutWindowOpacityMode",
+      "windowOpacityAlphaIncrease",
+      "windowOpacityAlphaDecrease",
+      "openColorPanel",
+      "clickAppMenuSettingsButton",
+      "clickTagPanelButton",
+      "clickAppMenuRecentFileButton",
+      "clickStartFilePanelButton",
+    ],
+  },
+  {
+    title: "draw",
+    keys: ["selectEntityByPenStroke", "penStrokeWidthIncrease", "penStrokeWidthDecrease"],
+  },
+  {
+    title: "moveEntity",
+    keys: [
+      "moveUpSelectedEntities",
+      "moveDownSelectedEntities",
+      "moveLeftSelectedEntities",
+      "moveRightSelectedEntities",
+      "jumpMoveUpSelectedEntities",
+      "jumpMoveDownSelectedEntities",
+      "jumpMoveLeftSelectedEntities",
+      "jumpMoveRightSelectedEntities",
+    ],
+  },
+  {
+    title: "generateTextNodeInTree",
+    keys: ["generateNodeTreeWithDeepMode", "generateNodeTreeWithBroadMode", "generateNodeGraph"],
+  },
+  {
+    title: "generateTextNodeRoundedSelectedNode",
+    keys: [
+      "createTextNodeFromSelectedTop",
+      "createTextNodeFromSelectedDown",
+      "createTextNodeFromSelectedLeft",
+      "createTextNodeFromSelectedRight",
+    ],
+  },
+  {
+    title: "createTextNode",
+    keys: ["createTextNodeFromCameraLocation", "createTextNodeFromMouseLocation"],
+  },
+  {
+    title: "section",
+    keys: ["folderSection", "packEntityToSection", "unpackEntityFromSection", "textNodeToSection"],
+  },
+  {
+    title: "leftMouseModeCheckout",
+    keys: [
+      "checkoutLeftMouseToSelectAndMove",
+      "checkoutLeftMouseToDrawing",
+      "checkoutLeftMouseToConnectAndCutting",
+      "checkoutLeftMouseToConnectAndCuttingOnlyPressed",
+    ],
+  },
+  {
+    title: "edge",
+    keys: ["reverseEdges", "reverseSelectedNodeEdge"],
+  },
+];

app/src/locales/zh_CN.yml

@@ -831,12 +831,12 @@ keyBinds:
     title: 全选
     description: 按下后，所有节点和连线都会被选中
   createTextNodeFromCameraLocation:
-    title: 创建文本节点
+    title: 在视野中心位置创建文本节点
     description: |
       按下后，在当前视野中心的位置创建一个文本节点
       等同于鼠标双击创建节点的功能
   createTextNodeFromMouseLocation:
-    title: 创建文本节点
+    title: 在鼠标位置创建文本节点
     description: |
       按下后，在鼠标悬浮位置创建一个文本节点
       等同于鼠标单击创建节点的功能

app/src/pages/settings/keybinds.tsx

@@ -3,7 +3,8 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import KeyBind from "../../components/KeyBind";
 import { KeyBinds } from "../../core/service/controlService/shortcutKeysEngine/KeyBinds";
-import { Field } from "./_field";
+import { Field, FieldGroup } from "./_field";
+import { shortcutKeysGroups } from "../../core/service/controlService/shortcutKeysEngine/shortcutKeysGroup";
 
 export default function KeyBindsPage() {
   const [keyBinds, setKeyBinds] = React.useState<[id: string, { key: string; modifiers: KeyBinds.KeyModifiers }][]>([]);
@@ -14,29 +15,94 @@ export default function KeyBindsPage() {
     });
   }, []);
 
+  const getKeybindObjectById = (id: string) => {
+    return keyBinds.find((item) => item[0] === id)?.[1];
+  };
+
+  /**
+   * 获取未加入分组的快捷键
+   * @returns
+   */
+  const getUnGroupedKeys = () => {
+    return keyBinds.filter((item) => !shortcutKeysGroups.some((group) => group.keys.includes(item[0])));
+  };
+
   const { t } = useTranslation("keyBinds");
 
-  return keyBinds
-    .map(([id, bind]) => (
-      <Field
-        key={id}
-        icon={<Keyboard />}
-        title={t(`${id}.title`, { defaultValue: id })}
-        description={t(`${id}.description`, { defaultValue: "" })}
-      >
-        <KeyBind
-          value={bind}
-          onChange={(value) => {
-            KeyBinds.set(id, value.key, value.modifiers);
-            setKeyBinds((prev) => prev.map((item) => (item[0] === id ? [item[0], value] : item)));
-          }}
-        />
-      </Field>
-    ))
-    .sort((a, b) => {
-      if (a.key === null && b.key === null) return 0; // 两者均为 null，相等
-      if (a.key === null) return 1; // a.key 为 null，把它排到后面
-      if (b.key === null) return -1; // b.key 为 null，把它排到后面
-      return a.key.localeCompare(b.key); // 正常比较
-    });
+  return (
+    <>
+      {shortcutKeysGroups.map((group, i) => {
+        console.log(group);
+        return (
+          <FieldGroup title={t(group.title)} key={i}>
+            {group.keys.map((id) => (
+              <Field
+                key={id}
+                icon={<Keyboard />}
+                title={t(`${id}.title`, { defaultValue: id })}
+                description={t(`${id}.description`, { defaultValue: "" })}
+              >
+                <KeyBind
+                  value={getKeybindObjectById(id)}
+                  onChange={(value) => {
+                    KeyBinds.set(id, value.key, value.modifiers);
+                    setKeyBinds((prev) => prev.map((item) => (item[0] === id ? [item[0], value] : item)));
+                  }}
+                />
+              </Field>
+            ))}
+          </FieldGroup>
+        );
+      })}
+      <FieldGroup title={t("otherKeys")} description={"未分组的快捷键"}>
+        {getUnGroupedKeys()
+          .map(([id, bind]) => (
+            <Field
+              key={id}
+              icon={<Keyboard />}
+              title={t(`${id}.title`, { defaultValue: id })}
+              description={t(`${id}.description`, { defaultValue: "" })}
+            >
+              <KeyBind
+                value={bind}
+                onChange={(value) => {
+                  KeyBinds.set(id, value.key, value.modifiers);
+                  setKeyBinds((prev) => prev.map((item) => (item[0] === id ? [item[0], value] : item)));
+                }}
+              />
+            </Field>
+          ))
+          .sort((a, b) => {
+            if (a.key === null && b.key === null) return 0; // 两者均为 null，相等
+            if (a.key === null) return 1; // a.key 为 null，把它排到后面
+            if (b.key === null) return -1; // b.key 为 null，把它排到后面
+            return a.key.localeCompare(b.key); // 正常比较
+          })}
+      </FieldGroup>
+      {/* <h1>{t("title")}</h1>
+      {keyBinds
+        .map(([id, bind]) => (
+          <Field
+            key={id}
+            icon={<Keyboard />}
+            title={t(`${id}.title`, { defaultValue: id })}
+            description={t(`${id}.description`, { defaultValue: "" })}
+          >
+            <KeyBind
+              value={bind}
+              onChange={(value) => {
+                KeyBinds.set(id, value.key, value.modifiers);
+                setKeyBinds((prev) => prev.map((item) => (item[0] === id ? [item[0], value] : item)));
+              }}
+            />
+          </Field>
+        ))
+        .sort((a, b) => {
+          if (a.key === null && b.key === null) return 0; // 两者均为 null，相等
+          if (a.key === null) return 1; // a.key 为 null，把它排到后面
+          if (b.key === null) return -1; // b.key 为 null，把它排到后面
+          return a.key.localeCompare(b.key); // 正常比较
+        })} */}
+    </>
+  );
 }