feat: settings shortcuts

packages/erd-editor/src/components/erd/automatic-table-placement/AutomaticTablePlacement.ts

@@ -1,13 +1,5 @@
 import { toJson } from '@dineug/erd-editor-schema';
-import {
-  createRef,
-  FC,
-  html,
-  onMounted,
-  onUnmounted,
-  Ref,
-  useProvider,
-} from '@dineug/r-html';
+import { createRef, FC, html, Ref, useProvider } from '@dineug/r-html';
 import { createInRange } from '@dineug/shared';
 import { round } from 'lodash-es';
 
@@ -27,8 +19,10 @@ import {
   changeZoomLevelAction,
   scrollToAction,
 } from '@/engine/modules/settings/atom.actions';
+import { useUnmounted } from '@/hooks/useUnmounted';
 import { query } from '@/utils/collection/query';
 import { openToastAction } from '@/utils/emitter';
+import { KeyBindingName } from '@/utils/keyboard-shortcut';
 import { closePromise } from '@/utils/promise';
 
 import * as styles from './AutomaticTablePlacement.styles';
@@ -55,15 +49,14 @@ const AutomaticTablePlacement: FC<AutomaticTablePlacementProps> = (
   const appContextValue = createAppContext({
     toWidth: prevApp.toWidth,
   });
+  const { addUnsubscribe } = useUnmounted();
   const provider = useProvider(ctx, appContext, appContextValue);
-
-  onUnmounted(() => {
-    provider.destroy();
-  });
+  addUnsubscribe(provider.destroy);
 
   const {
     store: { state: prevState },
     emitter,
+    shortcut$,
   } = prevApp;
   const { store } = appContextValue;
 
@@ -149,6 +142,13 @@ const AutomaticTablePlacement: FC<AutomaticTablePlacementProps> = (
     );
 
     simulation.on('end', handleStop);
+    addUnsubscribe(
+      shortcut$.subscribe(({ type }) => {
+        if (type === KeyBindingName.stop) {
+          handleCancel();
+        }
+      })
+    );
   } catch (e) {
     handleCancel();
   }

packages/erd-editor/src/components/settings/Settings.styles.ts

@@ -29,8 +29,8 @@ export const content = css`
 `;
 
 export const section = css`
-  max-width: 560px;
-  margin-right: 32px;
+  margin: 0 32px 32px 0;
+  min-width: 300px;
 `;
 
 export const row = css`
@@ -81,3 +81,8 @@ export const columnOrderItem = css`
     opacity: 0.5;
   }
 `;
+
+export const shortcutsSection = css`
+  margin: 0 32px 32px 0;
+  min-width: calc(100% - 364px);
+`;

packages/erd-editor/src/components/settings/Settings.ts

@@ -8,6 +8,7 @@ import Icon from '@/components/primitives/icon/Icon';
 import Separator from '@/components/primitives/separator/Separator';
 import Switch from '@/components/primitives/switch/Switch';
 import Toast from '@/components/primitives/toast/Toast';
+import Shortcuts from '@/components/settings/shortcuts/Shortcuts';
 import { ColumnTypeToName } from '@/constants/schema';
 import {
   changeColumnOrderAction,
@@ -144,6 +145,9 @@ const Settings: FC<SettingsProps> = (props, ctx) => {
               </div>
             </div>
           </div>
+          <div class=${styles.shortcutsSection}>
+            <${Shortcuts} />
+          </div>
         </div>
       </div>
     `;

packages/erd-editor/src/components/settings/shortcuts/Shortcuts.styles.ts

@@ -0,0 +1,41 @@
+import { css } from '@dineug/r-html';
+
+import { fontSize4 } from '@/styles/typography.styles';
+
+export const title = css`
+  ${fontSize4};
+`;
+
+const cell = css`
+  padding: 12px;
+  height: 44px;
+  box-shadow: inset 0 -1px var(--gray-color-5);
+`;
+
+export const table = css`
+  width: 100%;
+  text-align: left;
+  vertical-align: top;
+  border-collapse: collapse;
+  border-radius: calc(var(--table-border-radius) - 1px);
+  border-spacing: 0;
+  box-sizing: border-box;
+  height: 0;
+
+  th {
+    font-weight: var(--font-weight-bold);
+    ${cell};
+  }
+
+  td {
+    ${cell};
+  }
+`;
+
+export const shortcutGroup = css`
+  margin-bottom: 12px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+`;

packages/erd-editor/src/components/settings/shortcuts/Shortcuts.ts

@@ -0,0 +1,150 @@
+import { FC, html } from '@dineug/r-html';
+
+import { useAppContext } from '@/components/appContext';
+import Kbd from '@/components/primitives/kbd/Kbd';
+import Separator from '@/components/primitives/separator/Separator';
+import { ShortcutOption } from '@/utils/keyboard-shortcut';
+
+import * as styles from './Shortcuts.styles';
+
+export type ShortcutsProps = {};
+
+type ShortcutItem = {
+  command: string;
+  shortcuts: ShortcutOption[];
+};
+
+const Shortcuts: FC<ShortcutsProps> = (props, ctx) => {
+  const app = useAppContext(ctx);
+
+  const getItems = (): ShortcutItem[] => {
+    const { keyBindingMap } = app.value;
+
+    return [
+      {
+        command: 'Editing',
+        shortcuts: keyBindingMap.edit,
+      },
+      {
+        command: 'Stop',
+        shortcuts: keyBindingMap.stop,
+      },
+      {
+        command: 'Search',
+        shortcuts: keyBindingMap.find,
+      },
+      {
+        command: 'Undo',
+        shortcuts: keyBindingMap.undo,
+      },
+      {
+        command: 'Redo',
+        shortcuts: keyBindingMap.redo,
+      },
+      {
+        command: 'Add Table',
+        shortcuts: keyBindingMap.addTable,
+      },
+      {
+        command: 'Add Column',
+        shortcuts: keyBindingMap.addColumn,
+      },
+      {
+        command: 'Add Memo',
+        shortcuts: keyBindingMap.addMemo,
+      },
+      {
+        command: 'Remove Table, Memo',
+        shortcuts: keyBindingMap.removeTable,
+      },
+      {
+        command: 'Remove Column',
+        shortcuts: keyBindingMap.removeColumn,
+      },
+      {
+        command: 'Primary Key',
+        shortcuts: keyBindingMap.primaryKey,
+      },
+      {
+        command: 'Select All Table, Memo',
+        shortcuts: keyBindingMap.selectAllTable,
+      },
+      {
+        command: 'Select All Column',
+        shortcuts: keyBindingMap.selectAllColumn,
+      },
+      {
+        command: 'Copy Column',
+        shortcuts: keyBindingMap.copyColumn,
+      },
+      {
+        command: 'Paste Column',
+        shortcuts: keyBindingMap.pasteColumn,
+      },
+      {
+        command: 'Relationship Zero One',
+        shortcuts: keyBindingMap.relationshipZeroOne,
+      },
+      {
+        command: 'Relationship Zero N',
+        shortcuts: keyBindingMap.relationshipZeroN,
+      },
+      {
+        command: 'Relationship One Only',
+        shortcuts: keyBindingMap.relationshipOneOnly,
+      },
+      {
+        command: 'Relationship One N',
+        shortcuts: keyBindingMap.relationshipOneN,
+      },
+      {
+        command: 'Table Properties',
+        shortcuts: keyBindingMap.tableProperties,
+      },
+      {
+        command: 'Zoom In',
+        shortcuts: keyBindingMap.zoomIn,
+      },
+      {
+        command: 'Zoom Out',
+        shortcuts: keyBindingMap.zoomOut,
+      },
+    ];
+  };
+
+  return () => {
+    return html`
+      <div class=${styles.title}>Shortcuts</div>
+      <${Separator} space=${12} />
+      <table class=${styles.table}>
+        <thead>
+          <tr>
+            <th>Command</th>
+            <th>Keybinding</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${getItems().map(
+            ({ command, shortcuts }) => html`
+              <tr>
+                <td>${command}</td>
+                <td>
+                  ${shortcuts.map(
+                    ({ shortcut }) =>
+                      html`
+                        <div class=${styles.shortcutGroup}>
+                          <${Kbd} shortcut=${shortcut} />
+                        </div>
+                      `
+                  )}
+                </td>
+              </tr>
+            `
+          )}
+        </tbody>
+      </table>
+    `;
+  };
+};
+
+export default Shortcuts;

packages/erd-editor/src/utils/keyboard-shortcut/index.ts

@@ -125,6 +125,10 @@ function codeToString(code: string) {
     return 'ESC';
   }
 
+  if (code === 'Equal') {
+    return 'Plus';
+  }
+
   return code;
 }