fix: focus

packages/erd-editor/src/components/appContext.ts

@@ -53,4 +53,8 @@ export function createAppContext(ctx: InjectAppContext): AppContext {
 
 export const appContext = createContext<AppContext>({} as AppContext);
 
-export const useAppContext = (ctx: Ctx) => useContext(ctx, appContext);
+export const useAppContext = (ctx: Ctx, fallback?: AppContext) =>
+  useContext(ctx, {
+    ...appContext,
+    value: fallback ?? appContext.value,
+  });

packages/erd-editor/src/components/erd-editor/ErdEditor.ts

@@ -20,7 +20,7 @@ import { changeViewportAction } from '@/engine/modules/editor/atom.actions';
 import { useKeyBindingMap } from '@/hooks/useKeyBindingMap';
 import { useUnmounted } from '@/hooks/useUnmounted';
 import { AccentColor, createTheme, GrayColor } from '@/themes/radix-ui-theme';
-import { InternalEventType } from '@/utils/internalEvents';
+import { focusEvent, forceFocusEvent } from '@/utils/internalEvents';
 import { createText } from '@/utils/text';
 
 import * as styles from './ErdEditor.styles';
@@ -76,10 +76,13 @@ const ErdEditor: FC<ErdEditorProps, ErdEditorElement> = (props, ctx) => {
       merge(
         fromEvent($root, 'mousedown'),
         fromEvent($root, 'touchstart'),
-        fromEvent(ctx, InternalEventType.focus)
+        fromEvent(ctx, focusEvent.type)
       )
         .pipe(throttleTime(50))
-        .subscribe(handleFocus)
+        .subscribe(handleFocus),
+      fromEvent(ctx, forceFocusEvent.type).subscribe(() => {
+        $root.focus();
+      })
     );
   });
 

packages/erd-editor/src/components/erd/canvas/memo/Memo.ts

@@ -13,6 +13,7 @@ import { Memo } from '@/internal-types';
 import { calcMemoHeight, calcMemoWidth } from '@/utils/calcMemo';
 import { onStop } from '@/utils/domEvent';
 import { drag$, DragMove } from '@/utils/globalEventObservable';
+import { focusEvent } from '@/utils/internalEvents';
 import { isMod, simpleShortcutToString } from '@/utils/keyboard-shortcut';
 
 import * as styles from './Memo.styles';
@@ -65,6 +66,10 @@ const Memo: FC<MemoProps> = (props, ctx) => {
     );
   };
 
+  const handleBlur = () => {
+    ctx.host.dispatchEvent(focusEvent());
+  };
+
   return () => {
     const { store, keyBindingMap } = app.value;
     const { memo } = props;
@@ -116,6 +121,7 @@ const Memo: FC<MemoProps> = (props, ctx) => {
             .value=${memo.value}
             @input=${handleInput}
             @wheel=${onStop}
+            @blur=${handleBlur}
           ></textarea>
           <${MemoSash} memo=${memo} top=${height} left=${width} />
         </div>

packages/erd-editor/src/components/erd/canvas/table/Table.ts

@@ -191,6 +191,7 @@ const Table: FC<TableProps> = (props, ctx) => {
             column =>
               html`
                 <${Column}
+                  app=${app}
                   column=${column}
                   selected=${hasSelectColumn(column.id)}
                   widthName=${tableWidths.name}

packages/erd-editor/src/components/erd/canvas/table/column/Column.ts

@@ -1,6 +1,6 @@
-import { DOMTemplateLiterals, FC, html, repeat } from '@dineug/r-html';
+import { DOMTemplateLiterals, FC, html, Ref, repeat } from '@dineug/r-html';
 
-import { useAppContext } from '@/components/appContext';
+import { AppContext, useAppContext } from '@/components/appContext';
 import ColumnKey from '@/components/erd/canvas/table/column/column-key/ColumnKey';
 import ColumnNotNull from '@/components/erd/canvas/table/column/column-not-null/ColumnNotNull';
 import ColumnOption from '@/components/erd/canvas/table/column/column-option/ColumnOption';
@@ -34,6 +34,7 @@ import { isMod, simpleShortcutToString } from '@/utils/keyboard-shortcut';
 import * as styles from './Column.styles';
 
 export type ColumnProps = {
+  app: Ref<AppContext>;
   column: Column;
   selected: boolean;
   widthName: number;
@@ -59,7 +60,7 @@ type ColumnOrderTpl = {
 };
 
 const Column: FC<ColumnProps> = (props, ctx) => {
-  const app = useAppContext(ctx);
+  const app = useAppContext(ctx, props.app?.value);
 
   const handleRemoveColumn = () => {
     const { store } = app.value;

packages/erd-editor/src/components/erd/useErdShortcut.ts

@@ -29,6 +29,7 @@ import {
   toggleColumnValueAction$,
 } from '@/engine/modules/tableColumn/generator.actions';
 import { useUnmounted } from '@/hooks/useUnmounted';
+import { focusEvent, forceFocusEvent } from '@/utils/internalEvents';
 import { KeyBindingName } from '@/utils/keyboard-shortcut';
 
 const isRelationshipKeyBindingName = arrayHas<string>([
@@ -107,8 +108,10 @@ export function useErdShortcut(ctx: Parameters<typeof useAppContext>[0]) {
         store.dispatch(drawStartRelationshipAction$(relationshipType));
       }
 
-      action === KeyBindingName.removeTable &&
+      if (action === KeyBindingName.removeTable) {
+        ctx.host.dispatchEvent(focusEvent());
         store.dispatch(removeSelectedAction$());
+      }
 
       // KeyBindingName.tableProperties
 
@@ -171,6 +174,7 @@ export function useErdShortcut(ctx: Parameters<typeof useAppContext>[0]) {
     }
 
     if (action === KeyBindingName.stop) {
+      ctx.host.dispatchEvent(forceFocusEvent());
       store.dispatch(drawEndRelationshipAction(), unselectAllAction$());
     }
 

packages/erd-editor/src/engine/modules/editor/hooks.ts

@@ -0,0 +1,18 @@
+import { throttle } from '@dineug/go';
+
+import type { CO, Hook } from '@/engine/hooks';
+import { loadJsonAction } from '@/engine/modules/editor/atom.actions';
+import { recalculateTableWidth } from '@/utils/calcTable';
+
+const recalculateTableWidthHook: CO = function* (channel, state, ctx) {
+  yield throttle(
+    channel,
+    function* () {
+      recalculateTableWidth(state, ctx);
+    },
+    5,
+    { leading: false, trailing: true }
+  );
+};
+
+export const hooks: Hook[] = [[[loadJsonAction], recalculateTableWidthHook]];

packages/erd-editor/src/engine/modules/memo/generator.actions.ts

@@ -26,7 +26,6 @@ export const addMemoAction$ = (): GeneratorAction =>
 
     yield unselectAllAction$();
     yield selectAction({ [id]: SelectType.memo });
-    // TODO: focus table end
     yield addMemoAction({
       id,
       ui: {

packages/erd-editor/src/engine/store.hooks.ts

@@ -2,6 +2,7 @@ import { cancel, type Channel, channel, go, put } from '@dineug/go';
 import { type AnyAction } from '@dineug/r-html';
 import { arrayHas } from '@dineug/shared';
 
+import { hooks as editorHooks } from '@/engine/modules/editor/hooks';
 import { hooks as relationshipHooks } from '@/engine/modules/relationship/hooks';
 import { hooks as tableColumnHooks } from '@/engine/modules/tableColumn/hooks';
 import type { Store } from '@/engine/store';
@@ -12,7 +13,7 @@ type Task = {
   proc: Promise<any>;
 };
 
-const hooks = [...relationshipHooks, ...tableColumnHooks];
+const hooks = [...relationshipHooks, ...tableColumnHooks, ...editorHooks];
 
 export function createHooks(store: Store) {
   const tasks: Task[] = hooks.map(([pattern, hook]) => {

packages/erd-editor/src/utils/calcTable.ts

@@ -12,10 +12,12 @@ import {
   TABLE_PADDING,
 } from '@/constants/layout';
 import { Show } from '@/constants/schema';
+import { EngineContext } from '@/engine/context';
 import { RootState } from '@/engine/state';
 import { Column, Table } from '@/internal-types';
 import { bHas } from '@/utils/bit';
 import { query } from '@/utils/collection/query';
+import { textInRange } from '@/utils/validation';
 
 export function calcTableWidths(
   table: Table,
@@ -174,3 +176,28 @@ export function calcTableHeight(table: Table): number {
     TABLE_BORDER
   );
 }
+
+export function recalculateTableWidth(
+  { doc: { tableIds }, collections }: RootState,
+  { toWidth }: EngineContext
+) {
+  const tables = query(collections)
+    .collection('tableEntities')
+    .selectByIds(tableIds);
+
+  for (const table of tables) {
+    table.ui.widthName = textInRange(toWidth(table.name));
+    table.ui.widthComment = textInRange(toWidth(table.comment));
+
+    const columns = query(collections)
+      .collection('tableColumnEntities')
+      .selectByIds(table.columnIds);
+
+    for (const column of columns) {
+      column.ui.widthName = textInRange(toWidth(column.name));
+      column.ui.widthDataType = textInRange(toWidth(column.dataType));
+      column.ui.widthDefault = textInRange(toWidth(column.default));
+      column.ui.widthComment = textInRange(toWidth(column.comment));
+    }
+  }
+}

packages/erd-editor/src/utils/internalEvents.ts

@@ -2,12 +2,14 @@ import { ValuesType } from '@/internal-types';
 
 export const InternalEventType = {
   focus: 'erd-editor-internal-focus',
+  forceFocus: 'erd-editor-internal-force-focus',
   forwardMoveStart: 'erd-editor-internal-forward-move-start',
 } as const;
 export type InternalEventType = ValuesType<typeof InternalEventType>;
 
 export type InternalEventMap = {
   [InternalEventType.focus]: void;
+  [InternalEventType.forceFocus]: void;
   [InternalEventType.forwardMoveStart]: {
     originEvent: MouseEvent | TouchEvent;
   };
@@ -39,6 +41,10 @@ export const focusEvent = createInternalEvent<
   InternalEventMap[typeof InternalEventType.focus]
 >(InternalEventType.focus);
 
+export const forceFocusEvent = createInternalEvent<
+  InternalEventMap[typeof InternalEventType.forceFocus]
+>(InternalEventType.forceFocus);
+
 export const forwardMoveStartEvent = createInternalEvent<
   InternalEventMap[typeof InternalEventType.forwardMoveStart]
 >(InternalEventType.forwardMoveStart, { bubbles: true, composed: true });