feat: settings tab

dineug · Dec 3, 2023 · 882f6cf · 882f6cf
1 parent bce542d
commit 882f6cf
Show file tree

Hide file tree

Showing 28 changed files with 532 additions and 45 deletions.
diff --git a/packages/erd-editor-schema/src/v3/schema/settings.ts b/packages/erd-editor-schema/src/v3/schema/settings.ts
@@ -24,6 +24,7 @@ export const CanvasType = {
   visualization: '@dineug/erd-editor/builtin-visualization',
   schemaSQL: '@dineug/erd-editor/builtin-schema-sql',
   generatorCode: '@dineug/erd-editor/builtin-generator-code',
+  settings: 'settings',
 } as const;
 export type CanvasType = ValuesType<typeof CanvasType>;
 export const CanvasTypeList: ReadonlyArray<string> = Object.values(CanvasType);

diff --git a/packages/erd-editor/src/components/appContext.ts b/packages/erd-editor/src/components/appContext.ts
@@ -25,7 +25,7 @@ export type AppContext = EngineContext & {
   actions: Actions;
   store: RxStore;
   keyBindingMap: KeyBindingMap;
-  shortcut$: Subject<KeyBindingName>;
+  shortcut$: Subject<{ type: KeyBindingName; event: KeyboardEvent }>;
   keydown$: Subject<KeyboardEvent>;
   emitter: Emitter;
 };
@@ -36,7 +36,10 @@ export function createAppContext(ctx: InjectAppContext): AppContext {
   const engineContext = createEngineContext(ctx);
   const store = createRxStore(engineContext);
   const keyBindingMap = observable(createKeyBindingMap(), { shallow: true });
-  const shortcut$ = new Subject<KeyBindingName>();
+  const shortcut$ = new Subject<{
+    type: KeyBindingName;
+    event: KeyboardEvent;
+  }>();
   const keydown$ = new Subject<KeyboardEvent>();
   const emitter = new Emitter();
 

diff --git a/packages/erd-editor/src/components/erd-editor/ErdEditor.ts b/packages/erd-editor/src/components/erd-editor/ErdEditor.ts
@@ -16,6 +16,7 @@ import Erd from '@/components/erd/Erd';
 import GeneratorCode from '@/components/generator-code/GeneratorCode';
 import GlobalStyles from '@/components/global-styles/GlobalStyles';
 import SchemaSQL from '@/components/schema-sql/SchemaSQL';
+import Settings from '@/components/settings/Settings';
 import Theme from '@/components/theme/Theme';
 import ToastContainer from '@/components/toast-container/ToastContainer';
 import Toolbar from '@/components/toolbar/Toolbar';
@@ -181,6 +182,8 @@ const ErdEditor: FC<ErdEditorProps, ErdEditorElement> = (props, ctx) => {
             ? html`<${SchemaSQL} isDarkMode=${isDarkMode} />`
             : settings.canvasType === CanvasType.generatorCode
             ? html`<${GeneratorCode} isDarkMode=${isDarkMode} />`
+            : settings.canvasType === CanvasType.settings
+            ? html`<${Settings} />`
             : null}
         </div>
         <${ToastContainer} />

diff --git a/packages/erd-editor/src/components/erd-editor/useErdEditorAttachElement.ts b/packages/erd-editor/src/components/erd-editor/useErdEditorAttachElement.ts
@@ -6,7 +6,10 @@ import { get, isEmpty, omit } from 'lodash-es';
 import { AppContext } from '@/components/appContext';
 import { DatabaseVendorToDatabase } from '@/constants/sql/database';
 import { clearAction } from '@/engine/modules/editor/atom.actions';
-import { initialLoadJsonAction$ } from '@/engine/modules/editor/generator.actions';
+import {
+  initialLoadJsonAction$,
+  loadJsonAction$,
+} from '@/engine/modules/editor/generator.actions';
 import { useDarkMode } from '@/hooks/useDarkMode';
 import { useUnmounted } from '@/hooks/useUnmounted';
 import {
@@ -129,12 +132,12 @@ export function useErdEditorAttachElement({
   };
 
   ctx.clear = () => {
-    store.dispatch(clearAction());
+    store.dispatchSync(clearAction());
   };
 
   ctx.setInitialValue = value => {
     const safeValue = toSafeString(value);
-    store.dispatch(
+    store.dispatchSync(
       initialLoadJsonAction$(isEmpty(safeValue) ? '{}' : safeValue)
     );
   };
@@ -196,7 +199,12 @@ export function useErdEditorAttachElement({
 
   Object.defineProperty(ctx, 'value', {
     get: () => toJson(store.state),
-    set: (value: string) => ctx.setInitialValue(value),
+    set: (value: string) => {
+      const safeValue = toSafeString(value);
+      store.dispatchSync(
+        loadJsonAction$(isEmpty(safeValue) ? '{}' : safeValue)
+      );
+    },
   });
 
   return {

diff --git a/packages/erd-editor/src/components/erd/Erd.ts b/packages/erd-editor/src/components/erd/Erd.ts
@@ -245,10 +245,12 @@ const Erd: FC<ErdProps> = (props, ctx) => {
           : null}
         ${runAutomaticTablePlacement
           ? html`
-              <${AutomaticTablePlacement}
-                app=${app}
-                .onChange=${handleChangeAutomaticTablePlacement}
-              />
+              <div>
+                <${AutomaticTablePlacement}
+                  app=${app}
+                  .onChange=${handleChangeAutomaticTablePlacement}
+                />
+              </div>
             `
           : null}
       </div>

diff --git a/packages/erd-editor/src/components/erd/automatic-table-placement/AutomaticTablePlacement.ts b/packages/erd-editor/src/components/erd/automatic-table-placement/AutomaticTablePlacement.ts
@@ -1,5 +1,13 @@
 import { toJson } from '@dineug/erd-editor-schema';
-import { createRef, FC, html, Ref, useProvider } from '@dineug/r-html';
+import {
+  createRef,
+  FC,
+  html,
+  onMounted,
+  onUnmounted,
+  Ref,
+  useProvider,
+} from '@dineug/r-html';
 import { createInRange } from '@dineug/shared';
 import { round } from 'lodash-es';
 
@@ -47,7 +55,11 @@ const AutomaticTablePlacement: FC<AutomaticTablePlacementProps> = (
   const appContextValue = createAppContext({
     toWidth: prevApp.toWidth,
   });
-  useProvider(ctx, appContext, appContextValue);
+  const provider = useProvider(ctx, appContext, appContextValue);
+
+  onUnmounted(() => {
+    provider.destroy();
+  });
 
   const {
     store: { state: prevState },
@@ -123,7 +135,12 @@ const AutomaticTablePlacement: FC<AutomaticTablePlacementProps> = (
           <${Toast}
             description="Automatic Table Placement..."
             action=${html`
-              <${Button} size="1" text=${'Stop'} .onClick=${handleStop} />
+              <${Button}
+                variant="soft"
+                size="1"
+                text=${'Stop'}
+                .onClick=${handleStop}
+              />
               <${Button} size="1" text=${'Cancel'} .onClick=${handleCancel} />
             `}
           />

diff --git a/packages/erd-editor/src/components/erd/erd-context-menu/ErdContextMenu.ts b/packages/erd-editor/src/components/erd/erd-context-menu/ErdContextMenu.ts
@@ -122,6 +122,11 @@ const ErdContextMenu: FC<ErdContextMenuProps> = (props, ctx) => {
                   <${ContextMenu.Menu}
                     icon=${html`<${Icon} name="key" size=${14} />`}
                     name="Primary Key"
+                    right=${html`
+                      <${Kbd}
+                        shortcut=${keyBindingMap.primaryKey[0]?.shortcut}
+                      />
+                    `}
                   />
                 `}
               />
@@ -133,6 +138,11 @@ const ErdContextMenu: FC<ErdContextMenuProps> = (props, ctx) => {
                       <${Icon} prefix="mdi" name="table-cog" size=${14} />
                     `}
                     name="Table Properties"
+                    right=${html`
+                      <${Kbd}
+                        shortcut=${keyBindingMap.tableProperties[0]?.shortcut}
+                      />
+                    `}
                   />
                 `}
               />

diff --git a/packages/erd-editor/src/components/erd/useErdShortcut.ts b/packages/erd-editor/src/components/erd/useErdShortcut.ts
@@ -96,7 +96,12 @@ export function useErdShortcut(ctx: Ctx) {
     }
   };
 
-  const handleShortcut = (action: KeyBindingName) => {
+  const handleShortcut = ({
+    type,
+  }: {
+    type: KeyBindingName;
+    event: KeyboardEvent;
+  }) => {
     const { store } = app.value;
     const { editor, settings } = store.state;
     const showHighLevelTable = isHighLevelTable(settings.zoomLevel);
@@ -109,19 +114,19 @@ export function useErdShortcut(ctx: Ctx) {
     }
 
     if (!editor.focusTable || !editor.focusTable.edit) {
-      action === KeyBindingName.addTable && store.dispatch(addTableAction$());
-      action === KeyBindingName.addColumn && store.dispatch(addColumnAction$());
-      action === KeyBindingName.addMemo && store.dispatch(addMemoAction$());
+      type === KeyBindingName.addTable && store.dispatch(addTableAction$());
+      type === KeyBindingName.addColumn && store.dispatch(addColumnAction$());
+      type === KeyBindingName.addMemo && store.dispatch(addMemoAction$());
 
-      action === KeyBindingName.selectAllTable &&
+      type === KeyBindingName.selectAllTable &&
         store.dispatch(selectAllAction());
 
-      if (isRelationshipKeyBindingName(action)) {
-        const relationshipType = keyBindingNameToRelationshipType[action];
+      if (isRelationshipKeyBindingName(type)) {
+        const relationshipType = keyBindingNameToRelationshipType[type];
         store.dispatch(drawStartRelationshipAction$(relationshipType));
       }
 
-      if (action === KeyBindingName.removeTable) {
+      if (type === KeyBindingName.removeTable) {
         ctx.host.dispatchEvent(focusEvent());
         store.dispatch(removeSelectedAction$());
       }
@@ -130,19 +135,19 @@ export function useErdShortcut(ctx: Ctx) {
 
       // KeyBindingName.find
 
-      action === KeyBindingName.zoomIn &&
+      type === KeyBindingName.zoomIn &&
         store.dispatch(streamZoomLevelAction({ value: 0.1 }));
-      action === KeyBindingName.zoomOut &&
+      type === KeyBindingName.zoomOut &&
         store.dispatch(streamZoomLevelAction({ value: -0.1 }));
     }
 
     if (!showHighLevelTable) {
       if (editor.focusTable && !editor.focusTable.edit) {
-        action === KeyBindingName.selectAllColumn &&
+        type === KeyBindingName.selectAllColumn &&
           store.dispatch(selectAllColumnAction());
 
         if (
-          action === KeyBindingName.removeColumn &&
+          type === KeyBindingName.removeColumn &&
           editor.focusTable.selectColumnIds.length
         ) {
           store.dispatch(
@@ -156,10 +161,7 @@ export function useErdShortcut(ctx: Ctx) {
         // KeyBindingName.copyColumn
         // KeyBindingName.pasteColumn
 
-        if (
-          action === KeyBindingName.primaryKey &&
-          editor.focusTable.columnId
-        ) {
+        if (type === KeyBindingName.primaryKey && editor.focusTable.columnId) {
           store.dispatch(
             changeColumnPrimaryKeyAction$(
               editor.focusTable.tableId,
@@ -169,7 +171,7 @@ export function useErdShortcut(ctx: Ctx) {
         }
       }
 
-      if (editor.focusTable && action === KeyBindingName.edit) {
+      if (editor.focusTable && type === KeyBindingName.edit) {
         const focusTable = editor.focusTable;
 
         if (focusTable.edit) {
@@ -191,13 +193,13 @@ export function useErdShortcut(ctx: Ctx) {
       }
     }
 
-    if (action === KeyBindingName.stop) {
+    if (type === KeyBindingName.stop) {
       ctx.host.dispatchEvent(forceFocusEvent());
       store.dispatch(drawEndRelationshipAction(), unselectAllAction$());
     }
 
-    action === KeyBindingName.undo && store.undo();
-    action === KeyBindingName.redo && store.redo();
+    type === KeyBindingName.undo && store.undo();
+    type === KeyBindingName.redo && store.redo();
   };
 
   onMounted(() => {

diff --git a/packages/erd-editor/src/components/generator-code/GeneratorCode.styles.ts b/packages/erd-editor/src/components/generator-code/GeneratorCode.styles.ts
@@ -3,6 +3,6 @@ import { css } from '@dineug/r-html';
 export const root = css`
   position: relative;
   height: 100%;
-  overflow: auto;
+  overflow: hidden;
   background-color: var(--canvas-background);
 `;
diff --git a/packages/erd-editor/src/components/generator-code/GeneratorCode.ts b/packages/erd-editor/src/components/generator-code/GeneratorCode.ts
@@ -46,7 +46,7 @@ const GeneratorCode: FC<GeneratorCodeProps> = (props, ctx) => {
       emitter.emit(
         openToastAction({
           close: delay(2000),
-          message: html`<${Toast} description="Copied!" />`,
+          message: html`<${Toast} title="Copied!" />`,
         })
       );
     });

diff --git a/packages/erd-editor/src/components/primitives/button/Button.stories.ts b/packages/erd-editor/src/components/primitives/button/Button.stories.ts
@@ -15,6 +15,10 @@ const meta = {
       control: 'radio',
       options: ['1', '2', '3'],
     },
+    variant: {
+      control: 'radio',
+      options: ['solid', 'soft'],
+    },
     text: {
       control: 'text',
     },
@@ -27,9 +31,18 @@ const meta = {
 export default meta;
 type Story = StoryObj<ButtonProps>;
 
-export const Normal: Story = {
+export const Solid: Story = {
+  args: {
+    size: '2',
+    variant: 'solid',
+    text: 'Button',
+  },
+};
+
+export const Soft: Story = {
   args: {
     size: '2',
+    variant: 'soft',
     text: 'Button',
   },
 };
diff --git a/packages/erd-editor/src/components/primitives/button/Button.styles.ts b/packages/erd-editor/src/components/primitives/button/Button.styles.ts
@@ -14,6 +14,7 @@ export const button = css`
 export const soft = css`
   background-color: var(--accent-color-3);
   color: var(--accent-color-11);
+  fill: var(--accent-color-11);
 
   &:hover {
     background-color: var(--accent-color-4);
@@ -24,6 +25,20 @@ export const soft = css`
   }
 `;
 
+export const solid = css`
+  background-color: var(--accent-color-9);
+  color: #fff;
+  fill: #fff;
+
+  &:hover {
+    background-color: var(--accent-color-10);
+  }
+
+  &:active {
+    background-color: var(--accent-color-10);
+  }
+`;
+
 export const size1 = css`
   font-weight: var(--font-weight-medium);
   padding: 0 8px;

diff --git a/packages/erd-editor/src/components/primitives/button/Button.ts b/packages/erd-editor/src/components/primitives/button/Button.ts
@@ -3,7 +3,8 @@ import { DOMTemplateLiterals, FC, html } from '@dineug/r-html';
 import * as styles from './Button.styles';
 
 export type ButtonProps = {
-  size: '1' | '2' | '3';
+  size?: '1' | '2' | '3';
+  variant?: 'solid' | 'soft';
   text: string | DOMTemplateLiterals;
   onClick?: (event: PointerEvent) => void;
 };
@@ -14,8 +15,8 @@ const Button: FC<ButtonProps> = (props, ctx) => {
       <button
         class=${[
           styles.button,
-          styles.soft,
-          Reflect.get(styles, `size${props.size ?? 2}`),
+          Reflect.get(styles, props.variant ?? 'solid'),
+          Reflect.get(styles, `size${props.size ?? '2'}`),
         ]}
         type="button"
         @click=${props.onClick}