feat: relationshipDataTypeSync

packages/erd-editor/src/components/erd/canvas/table/column/column-data-type/ColumnDataType.styles.ts

@@ -5,6 +5,7 @@ import { typography } from '@/styles/typography.styles';
 
 export const root = css`
   position: relative;
+  outline: none;
 `;
 
 export const hint = css`

packages/erd-editor/src/components/erd/canvas/table/column/column-data-type/ColumnDataType.ts

@@ -15,7 +15,7 @@ import { useAppContext } from '@/components/appContext';
 import EditInput from '@/components/primitives/edit-input/EditInput';
 import HighlightedText from '@/components/primitives/highlighted-text/HighlightedText';
 import { DatabaseHintMap, DataTypeHint } from '@/constants/sql/dataType';
-import { changeColumnDataTypeAction } from '@/engine/modules/tableColumn/atom.actions';
+import { changeColumnDataTypeAction$ } from '@/engine/modules/tableColumn/generator.actions';
 import { useUnmounted } from '@/hooks/useUnmounted';
 import { lastCursorFocus } from '@/utils/focus';
 
@@ -76,7 +76,7 @@ const ColumnDataType: FC<ColumnDataTypeProps> = (props, ctx) => {
 
     const { store } = app.value;
     store.dispatch(
-      changeColumnDataTypeAction({
+      changeColumnDataTypeAction$({
         id: props.columnId,
         tableId: props.tableId,
         value: hint.name,

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

@@ -1,11 +1,9 @@
 import { useAppContext } from '@/components/appContext';
 import { FocusType } from '@/engine/modules/editor/state';
+import { Ctx } from '@/internal-types';
 import { isEdit, isFocus, isSelectColumn } from '@/utils/focus';
 
-export function useFocusTable(
-  ctx: Parameters<typeof useAppContext>[0],
-  tableId: string
-) {
+export function useFocusTable(ctx: Ctx, tableId: string) {
   const app = useAppContext(ctx);
 
   const getFocusTable = () => app.value.store.state.editor.focusTable;

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 { Ctx } from '@/internal-types';
 import { focusEvent, forceFocusEvent } from '@/utils/internalEvents';
 import { KeyBindingName } from '@/utils/keyboard-shortcut';
 import { isHighLevelTable } from '@/utils/validation';
@@ -47,7 +48,7 @@ const keyBindingNameToRelationshipType: Record<string, number> = {
   [KeyBindingName.relationshipOneN]: RelationshipType.OneN,
 };
 
-export function useErdShortcut(ctx: Parameters<typeof useAppContext>[0]) {
+export function useErdShortcut(ctx: Ctx) {
   const app = useAppContext(ctx);
   const { addUnsubscribe } = useUnmounted();
 

packages/erd-editor/src/engine/modules/tableColumn/actions.ts

@@ -44,7 +44,7 @@ export type ReducerType<T extends keyof ActionMap> = Reducer<
   EngineContext
 >;
 
-type ChangeColumnValuePayload = {
+export type ChangeColumnValuePayload = {
   tableId: string;
   id: string;
   value: string;

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

@@ -14,6 +14,7 @@ import { removeRelationshipAction } from '@/engine/modules/relationship/atom.act
 import { bHas } from '@/utils/bit';
 import { query } from '@/utils/collection/query';
 
+import { ChangeColumnValuePayload } from './actions';
 import {
   addColumnAction,
   changeColumnAutoIncrementAction,
@@ -26,6 +27,7 @@ import {
   changeColumnUniqueAction,
   removeColumnAction,
 } from './atom.actions';
+import { getDataTypeSyncColumns } from './utils/dataType';
 
 export const isToggleColumnTypes = arrayHas<FocusType>([
   FocusType.columnNotNull,
@@ -171,6 +173,22 @@ export const toggleColumnValueAction$ = (
     }
   };
 
+export const changeColumnDataTypeAction$ = (
+  payload: ChangeColumnValuePayload
+): GeneratorAction =>
+  function* (state) {
+    const {
+      settings: { relationshipDataTypeSync },
+    } = state;
+    let payloads: ChangeColumnValuePayload[] = [payload];
+
+    if (relationshipDataTypeSync) {
+      payloads = getDataTypeSyncColumns([payload], state, payload);
+    }
+
+    yield payloads.map(changeColumnDataTypeAction);
+  };
+
 export const changeColumnValueAction$ = (
   focusType: FocusType,
   tableId: string,
@@ -198,7 +216,7 @@ export const changeColumnValueAction$ = (
         yield changeColumnNameAction(payload);
         break;
       case FocusType.columnDataType:
-        yield changeColumnDataTypeAction(payload);
+        yield changeColumnDataTypeAction$(payload);
         break;
       case FocusType.columnDefault:
         yield changeColumnDefaultAction(payload);
@@ -232,6 +250,7 @@ export const actions$ = {
   addColumnAction$,
   removeColumnAction$,
   toggleColumnValueAction$,
+  changeColumnDataTypeAction$,
   changeColumnValueAction$,
   changeColumnPrimaryKeyAction$,
 };

packages/erd-editor/src/engine/modules/tableColumn/utils/dataType.ts

@@ -0,0 +1,55 @@
+import { ChangeColumnValuePayload } from '@/engine/modules/tableColumn/actions';
+import { RootState } from '@/engine/state';
+import { query } from '@/utils/collection/query';
+
+export function getDataTypeSyncColumns(
+  stack: ChangeColumnValuePayload[],
+  state: RootState,
+  payload: ChangeColumnValuePayload,
+  payloads: ChangeColumnValuePayload[] = []
+): ChangeColumnValuePayload[] {
+  const {
+    doc: { relationshipIds },
+    collections,
+  } = state;
+  const target = stack.pop();
+
+  if (target) {
+    if (!payloads.some(({ id }) => id === target.id)) {
+      payloads.push(target);
+
+      query(collections)
+        .collection('relationshipEntities')
+        .selectByIds(relationshipIds)
+        .forEach(({ start, end }) => {
+          const index = start.columnIds.indexOf(target.id);
+
+          if (index !== -1) {
+            const columnId = end.columnIds[index];
+
+            stack.push({
+              id: columnId,
+              tableId: end.tableId,
+              value: payload.value,
+            });
+          } else {
+            const index = end.columnIds.indexOf(target.id);
+
+            if (index !== -1) {
+              const columnId = start.columnIds[index];
+
+              stack.push({
+                id: columnId,
+                tableId: start.tableId,
+                value: payload.value,
+              });
+            }
+          }
+        });
+    }
+
+    getDataTypeSyncColumns(stack, state, payload, payloads);
+  }
+
+  return payloads;
+}

packages/erd-editor/src/hooks/useKeyBindingMap.ts

@@ -1,15 +1,13 @@
 import { onMounted, Ref, watch } from '@dineug/r-html';
 
 import { useAppContext } from '@/components/appContext';
+import { Ctx } from '@/internal-types';
 import { KeyBindingName } from '@/utils/keyboard-shortcut';
 import { tinykeys } from '@/utils/keyboard-shortcut/tinykeys';
 
 import { useUnmounted } from './useUnmounted';
 
-export function useKeyBindingMap(
-  ctx: Parameters<typeof useAppContext>[0],
-  root: Ref<HTMLDivElement>
-) {
+export function useKeyBindingMap(ctx: Ctx, root: Ref<HTMLDivElement>) {
   const app = useAppContext(ctx);
   const { addUnsubscribe } = useUnmounted();
 

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

@@ -12,7 +12,7 @@ export const touchmove$ = fromEvent<TouchEvent>(window, 'touchmove');
 export const touchend$ = fromEvent<TouchEvent>(window, 'touchend');
 
 const forwardMoveStartEvent$ = fromEvent<
-  CustomEvent<Parameters<typeof forwardMoveStartEvent>[0]>
+  CustomEvent<ReturnType<typeof forwardMoveStartEvent>['detail']>
 >(window, forwardMoveStartEvent.type).pipe(
   map(event => event.detail.originEvent)
 );