✨🚧Implemented ShortcutsPlugin

cfdraw/.web/src/_settings.ts

@@ -15,6 +15,7 @@ import {
   PROJECT_ICON,
   REDO_ICON,
   SETTINGS_ICON,
+  SHORTCUTS_ICON,
   TEXT_EDITOR_ICON,
   UNDO_ICON,
   WIKI_ICON,
@@ -242,37 +243,51 @@ export const reactPluginSettings: IMakePlugin<ReactPlugins>[] = [
     },
   },
   {
-    type: "github",
+    type: "email",
     props: {
       nodeConstraint: "none",
       renderInfo: {
         w: 0,
         h: 0,
-        offsetX: -61,
-        src: GITHUB_ICON,
-        tooltip: "github-tooltip",
+        offsetX: -120,
+        src: EMAIL_ICON,
+        tooltip: "email-tooltip",
         pivot: "rb",
       },
       pluginInfo: {},
       noExpand: true,
     },
   },
   {
-    type: "email",
+    type: "github",
     props: {
       nodeConstraint: "none",
       renderInfo: {
         w: 0,
         h: 0,
-        offsetX: -120,
-        src: EMAIL_ICON,
-        tooltip: "email-tooltip",
+        offsetX: -61,
+        src: GITHUB_ICON,
+        tooltip: "github-tooltip",
         pivot: "rb",
       },
       pluginInfo: {},
       noExpand: true,
     },
   },
+  {
+    type: "shortcuts",
+    props: {
+      nodeConstraint: "none",
+      renderInfo: {
+        w: 400,
+        h: 400,
+        src: SHORTCUTS_ICON,
+        tooltip: "shortcuts-tooltip",
+        pivot: "lb",
+      },
+      pluginInfo: {},
+    },
+  },
 ];
 export function useReactPluginSettings() {
   const exclude = settingsStore.boardSettings?.globalSettings?.excludeReactPlugins;

cfdraw/.web/src/lang/plugins.ts

@@ -16,6 +16,7 @@ const _pluginsLangRecords: Record<Lang, Record<AllPlugins, string>> = {
     wiki: "文档",
     email: "邮件",
     github: "Github",
+    shortcuts: "快捷键",
     logo: "Logo",
     textEditor: "编辑文本",
     groupEditor: "编辑组",
@@ -41,6 +42,7 @@ const _pluginsLangRecords: Record<Lang, Record<AllPlugins, string>> = {
     wiki: "Wiki",
     email: "Email",
     github: "Github",
+    shortcuts: "Shortcuts",
     logo: "Logo",
     textEditor: "Edit Text",
     groupEditor: "Edit Group",

cfdraw/.web/src/lang/tooltip.ts

@@ -12,8 +12,9 @@ export enum Tooltip_Words {
   "group-the-nodes-tooltip" = "group-the-nodes-tooltip",
   "auto-arrange-tooltip" = "auto-arrange-tooltip",
   "wiki-tooltip" = "wiki-tooltip",
-  "github-tooltip" = "github-tooltip",
   "email-tooltip" = "email-tooltip",
+  "github-tooltip" = "github-tooltip",
+  "shortcuts-tooltip" = "shortcuts-tooltip",
 }
 
 export const tooltipLangRecords: Record<Lang, Record<Tooltip_Words, string>> = {
@@ -29,8 +30,9 @@ export const tooltipLangRecords: Record<Lang, Record<Tooltip_Words, string>> = {
     [Tooltip_Words["group-the-nodes-tooltip"]]: "打组",
     [Tooltip_Words["auto-arrange-tooltip"]]: "自动排列",
     [Tooltip_Words["wiki-tooltip"]]: "Wiki",
-    [Tooltip_Words["github-tooltip"]]: "Github",
     [Tooltip_Words["email-tooltip"]]: "Email",
+    [Tooltip_Words["github-tooltip"]]: "Github",
+    [Tooltip_Words["shortcuts-tooltip"]]: "快捷键",
   },
   en: {
     [Tooltip_Words["settings-tooltip"]]: "Settings",
@@ -44,7 +46,8 @@ export const tooltipLangRecords: Record<Lang, Record<Tooltip_Words, string>> = {
     [Tooltip_Words["group-the-nodes-tooltip"]]: "Group the Nodes",
     [Tooltip_Words["auto-arrange-tooltip"]]: "Auto Arrange",
     [Tooltip_Words["wiki-tooltip"]]: "Wiki",
-    [Tooltip_Words["github-tooltip"]]: "Github",
     [Tooltip_Words["email-tooltip"]]: "Email",
+    [Tooltip_Words["github-tooltip"]]: "Github",
+    [Tooltip_Words["shortcuts-tooltip"]]: "Shortcuts",
   },
 };

cfdraw/.web/src/plugins/_react/ShortcutsPlugin.tsx

@@ -0,0 +1,57 @@
+import { useMemo } from "react";
+import { observer } from "mobx-react-lite";
+
+import { langStore } from "@carefree0910/business";
+
+import type { IPythonPlugin } from "@/schema/_python";
+import { drawboardPluginFactory } from "@/plugins/utils/factory";
+import Render from "@/plugins/components/Render";
+import CFMarkdown from "@/components/CFMarkdown";
+import { Lang, getRandomHash } from "@carefree0910/core";
+
+const shortcutsMarkdown: Record<Lang, string> = {
+  zh: `
+| 快捷键 | 行为 |
+| :----- | ---: |
+| \`Command\`+\`A\` | 选中所有节点 |
+| \`Command\`+\`C\` | 复制 |
+| \`Command\`+\`V\` | 粘贴 |
+| \`Command\`+\`[\` | 当前节点往后移动一层 |
+| \`Command\`+\`]\` | 当前节点往前移动一层 |
+| \`[\` | 当前节点移到最低层 |
+| \`]\` | 当前节点移到最顶层 |
+| \`Delete\` | 删除选中的节点 |
+| \`Command\`+\`G\` | 打组 |
+| \`Command\`+\`Shift\`+\`G\` | 解组 |
+| \`Command\`+\`Z\`  | 撤销 |
+| \`Command\`+\`Shift\`+\`Z\` | 重做 |
+`,
+  en: `
+| Shortcut | Behaviour |
+| :------- | ---------: |
+| \`Command\`+\`A\` | Select all \`Node\`s |
+| \`Command\`+\`C\` | Copy |
+| \`Command\`+\`V\` | Paste |
+| \`Command\`+\`[\` | Move one layer backward |
+| \`Command\`+\`]\` | Move one layer forward |
+| \`[\` | Move to the bottom |
+| \`]\` | Move to the top |
+| \`Delete\` | Delete selecting \`Node\`(s) |
+| \`Command\`+\`G\` | Group |
+| \`Command\`+\`Shift\`+\`G\` | Ungroup |
+| \`Command\`+\`Z\` | Undo |
+| \`Command\`+\`Shift\`+\`Z\` | Redo |
+`,
+};
+const ShortcutsPlugin = ({ pluginInfo, ...props }: IPythonPlugin) => {
+  const id = useMemo(() => `shortcuts_${getRandomHash()}`, []);
+  const lang = langStore.tgt;
+
+  return (
+    <Render id={id} {...props}>
+      <CFMarkdown markdown={shortcutsMarkdown[lang]} />
+    </Render>
+  );
+};
+
+drawboardPluginFactory.register("shortcuts", true)(observer(ShortcutsPlugin));

cfdraw/.web/src/plugins/index.tsx

@@ -20,6 +20,7 @@ export * from "./_react/DeletePlugin";
 export * from "./_react/TextEditorPlugin";
 export * from "./_react/GroupPlugin";
 export * from "./_react/LinksPlugin";
+export * from "./_react/ShortcutsPlugin";
 export * from "./_react/BrushPlugin";
 export * from "./_python/PluginGroup";
 export * from "./_python/FieldsPlugin";

cfdraw/.web/src/schema/plugins.ts

@@ -98,6 +98,7 @@ export const allReactPlugins = [
   "wiki",
   "email",
   "github",
+  "shortcuts",
   "logo",
   "textEditor",
   "groupEditor",
@@ -130,6 +131,7 @@ export interface IPluginProps {
   wiki: IPlugin;
   email: IPlugin;
   github: IPlugin;
+  shortcuts: IPlugin;
   logo: ILogoPlugin;
   textEditor: IPlugin;
   groupEditor: IPlugin;

cfdraw/.web/src/utils/constants.ts

@@ -86,10 +86,12 @@ export const ARRANGE_ICON =
   "https://user-images.githubusercontent.com/15677328/234545341-870f888e-0dfc-4d8e-a79b-fcb9ddbe0977.svg";
 export const WIKI_ICON =
   "https://user-images.githubusercontent.com/15677328/234538371-88891a34-1b30-4c2b-bd2e-a80e2030210d.svg";
-export const GITHUB_ICON =
-  "https://user-images.githubusercontent.com/15677328/234538604-3017a411-e5f1-4564-8bc0-5090e973d86b.svg";
 export const EMAIL_ICON =
   "https://user-images.githubusercontent.com/15677328/234538781-b59b514f-99be-4ca2-859d-601f024cd7e0.svg";
+export const GITHUB_ICON =
+  "https://user-images.githubusercontent.com/15677328/234538604-3017a411-e5f1-4564-8bc0-5090e973d86b.svg";
+export const SHORTCUTS_ICON =
+  "https://github.com/carefree0910/carefree-drawboard/assets/15677328/f3eda420-1448-40a4-9db9-5ef198bb2a5a";
 
 export const ADD_TEXT_ICON =
   "https://user-images.githubusercontent.com/15677328/236501259-c84127ef-91f3-4dc7-a505-2112ca519e54.svg";