feat: history

dineug · Nov 21, 2023 · 37cc25d · 37cc25d
1 parent 15242e9
commit 37cc25d
Show file tree

Hide file tree

Showing 20 changed files with 852 additions and 59 deletions.
diff --git a/packages/erd-editor/src/components/erd-editor/useErdEditorAttachElement.ts b/packages/erd-editor/src/components/erd-editor/useErdEditorAttachElement.ts
@@ -78,8 +78,13 @@ export function useErdEditorAttachElement({
   const darkMode = useDarkMode();
   const { addUnsubscribe } = useUnmounted();
 
+  const emitChange = () => {
+    ctx.dispatchEvent(new CustomEvent('change'));
+  };
+
   onMounted(() => {
     addUnsubscribe(
+      store.change$.subscribe(emitChange),
       watch(props).subscribe(propName => {
         if (propName !== 'systemDarkMode' || !props.systemDarkMode) {
           return;

diff --git a/packages/erd-editor/src/engine/actions.ts b/packages/erd-editor/src/engine/actions.ts
@@ -1,3 +1,7 @@
+import {
+  pushStreamHistoryMap,
+  pushUndoHistoryMap,
+} from '@/engine/history.actions';
 import { ActionMap as EditorActionMap } from '@/engine/modules/editor/actions';
 import { actions as editorActions } from '@/engine/modules/editor/atom.actions';
 import { actions$ as editorActions$ } from '@/engine/modules/editor/generator.actions';
@@ -67,15 +71,65 @@ export const actions: Actions = Object.freeze({
 });
 
 // TODO: changeActionTypes
-export const ChangeActionTypes: ReadonlyArray<ActionType> = [];
-
-// TODO: historyActionTypes
-export const HistoryActionTypes: ReadonlyArray<ActionType> = [];
-
-export const StreamActionTypes: ReadonlyArray<ActionType> = [
+export const ChangeActionTypes: ReadonlyArray<ActionType> = [
+  // table
+  'table.add',
   'table.move',
+  'table.remove',
+  'table.changeName',
+  'table.changeComment',
+  'table.changeColor',
+  // column
+  'column.add',
+  'column.remove',
+  'column.changeName',
+  'column.changeComment',
+  'column.changeDataType',
+  'column.changeDefault',
+  'column.changeAutoIncrement',
+  'column.changePrimaryKey',
+  'column.changeUnique',
+  'column.changeNotNull',
+  // relationship
+  'relationship.add',
+  'relationship.remove',
+  'relationship.changeType',
+  // index
+  // indexColumn
+  // memo
+  'memo.add',
   'memo.move',
+  'memo.remove',
+  'memo.changeValue',
+  'memo.changeColor',
   'memo.resize',
-  'settings.streamScrollTo',
+  // settings
+  'settings.changeDatabaseName',
+  'settings.resize',
+  'settings.changeZoomLevel',
   'settings.streamZoomLevel',
+  'settings.scrollTo',
+  'settings.streamScrollTo',
+  'settings.changeShow',
+  'settings.changeDatabase',
+  'settings.changeCanvasType',
+  'settings.changeLanguage',
+  'settings.changeTableNameCase',
+  'settings.changeColumnNameCase',
+  'settings.changeBracketType',
+  'settings.changeRelationshipDataTypeSync',
+  'settings.changeRelationshipOptimization',
+  'settings.changeColumnOrder',
+  // editor
+  'editor.loadJson',
+  'editor.clear',
+];
+
+export const HistoryActionTypes: ReadonlyArray<ActionType> = [
+  ...(Object.keys(pushUndoHistoryMap) as ActionType[]),
+  ...(Object.keys(pushStreamHistoryMap) as ActionType[]),
+];
+
+export const StreamActionTypes: ReadonlyArray<ActionType> = [
+  ...(Object.keys(pushStreamHistoryMap) as ActionType[]),
 ];
diff --git a/packages/erd-editor/src/engine/history.actions.ts b/packages/erd-editor/src/engine/history.actions.ts
@@ -3,38 +3,66 @@ import { safeCallback } from '@dineug/shared';
 import { cloneDeep } from 'lodash-es';
 
 import { History } from '@/engine/history';
+import { editorPushUndoHistoryMap } from '@/engine/modules/editor/history';
+import {
+  memoPushStreamHistoryMap,
+  memoPushUndoHistoryMap,
+} from '@/engine/modules/memo/history';
+import { relationshipPushUndoHistoryMap } from '@/engine/modules/relationship/history';
+import {
+  settingsPushStreamHistoryMap,
+  settingsPushUndoHistoryMap,
+} from '@/engine/modules/settings/history';
+import {
+  tablePushStreamHistoryMap,
+  tablePushUndoHistoryMap,
+} from '@/engine/modules/table/history';
+import { tableColumnPushUndoHistoryMap } from '@/engine/modules/tableColumn/history';
+import { RootState } from '@/engine/state';
 import { Store } from '@/engine/store';
 
 export type PushUndoHistory = (
-  store: Store,
   undoActions: AnyAction[],
-  action: AnyAction
+  action: AnyAction,
+  state: RootState
 ) => void;
 
 export type PushStreamHistory = (
-  actions: AnyAction[],
   undoActions: AnyAction[],
-  redoActions: AnyAction[]
+  redoActions: AnyAction[],
+  actions: AnyAction[],
+  state: RootState
 ) => void;
 
-const pushUndoHistoryMap: Record<string, PushUndoHistory> = {};
+export const pushUndoHistoryMap: Record<string, PushUndoHistory> = {
+  ...tablePushUndoHistoryMap,
+  ...tableColumnPushUndoHistoryMap,
+  ...relationshipPushUndoHistoryMap,
+  ...memoPushUndoHistoryMap,
+  ...settingsPushUndoHistoryMap,
+  ...editorPushUndoHistoryMap,
+};
 
-const pushStreamHistoryMap: Record<string, PushStreamHistory> = {};
+export const pushStreamHistoryMap: Record<string, PushStreamHistory> = {
+  ...tablePushStreamHistoryMap,
+  ...memoPushStreamHistoryMap,
+  ...settingsPushStreamHistoryMap,
+};
 
 function push(store: Store, history: History, actions: AnyAction[]) {
   const undoActions: AnyAction[] = [];
   const redoActions: AnyAction[] = [];
 
   for (const action of actions) {
     const pushUndoHistory = pushUndoHistoryMap[action.type];
-    if (!pushUndoHistory) return;
+    if (!pushUndoHistory) continue;
 
-    pushUndoHistory(store, undoActions, action);
+    pushUndoHistory(undoActions, action, store.state);
     redoActions.push(action);
   }
 
   for (const key of Object.keys(pushStreamHistoryMap)) {
-    pushStreamHistoryMap[key](actions, undoActions, redoActions);
+    pushStreamHistoryMap[key](undoActions, redoActions, actions, store.state);
   }
 
   if (!undoActions.length || !redoActions.length) return;

diff --git a/packages/erd-editor/src/engine/modules/editor/generator.actions.ts b/packages/erd-editor/src/engine/modules/editor/generator.actions.ts
@@ -3,9 +3,15 @@ import { nanoid } from 'nanoid';
 
 import { ColumnOption } from '@/constants/schema';
 import { GeneratorAction } from '@/engine/generator.actions';
-import { moveMemoAction } from '@/engine/modules/memo/atom.actions';
+import {
+  changeMemoColorAction,
+  moveMemoAction,
+} from '@/engine/modules/memo/atom.actions';
 import { removeMemoAction$ } from '@/engine/modules/memo/generator.actions';
-import { moveTableAction } from '@/engine/modules/table/atom.actions';
+import {
+  changeTableColorAction,
+  moveTableAction,
+} from '@/engine/modules/table/atom.actions';
 import { removeTableAction$ } from '@/engine/modules/table/generator.actions';
 import {
   addColumnAction,
@@ -238,6 +244,24 @@ export const drawStartAddRelationshipAction$ = (
     yield drawStartAddRelationshipAction({ tableId });
   };
 
+const changeColorAllAction$ = (color: string): GeneratorAction =>
+  function* ({ editor: { selectedMap }, collections }) {
+    const { tableIds, memoIds } = getSelectTypeIds(selectedMap);
+    const tables = query(collections)
+      .collection('tableEntities')
+      .selectByIds(tableIds);
+    const memos = query(collections)
+      .collection('memoEntities')
+      .selectByIds(memoIds);
+
+    yield tables.map(table =>
+      changeTableColorAction({ id: table.id, color, prevColor: table.ui.color })
+    );
+    yield memos.map(memo =>
+      changeMemoColorAction({ id: memo.id, color, prevColor: memo.ui.color })
+    );
+  };
+
 export const actions$ = {
   loadJsonAction$,
   initialLoadJsonAction$,
@@ -248,4 +272,5 @@ export const actions$ = {
   focusMoveTableAction$,
   drawStartRelationshipAction$,
   drawStartAddRelationshipAction$,
+  changeColorAllAction$,
 };
diff --git a/packages/erd-editor/src/engine/modules/editor/history.ts b/packages/erd-editor/src/engine/modules/editor/history.ts
@@ -1 +1,19 @@
-export const actions = {};
+import { toJson } from '@dineug/erd-editor-schema';
+
+import { PushUndoHistory } from '@/engine/history.actions';
+
+import { ActionType } from './actions';
+import { clearAction, loadJsonAction } from './atom.actions';
+
+const loadJson: PushUndoHistory = (undoActions, _, state) => {
+  undoActions.push(clearAction(), loadJsonAction({ value: toJson(state) }));
+};
+
+const clear: PushUndoHistory = (undoActions, _, state) => {
+  undoActions.push(loadJsonAction({ value: toJson(state) }));
+};
+
+export const editorPushUndoHistoryMap = {
+  [ActionType.loadJson]: loadJson,
+  [ActionType.clear]: clear,
+};
diff --git a/packages/erd-editor/src/engine/modules/memo/actions.ts b/packages/erd-editor/src/engine/modules/memo/actions.ts
@@ -37,8 +37,9 @@ export type ActionMap = {
     value: string;
   };
   [ActionType.changeMemoColor]: {
-    ids: string[];
+    id: string;
     color: string;
+    prevColor: string;
   };
   [ActionType.resizeMemo]: {
     id: string;

diff --git a/packages/erd-editor/src/engine/modules/memo/atom.actions.ts b/packages/erd-editor/src/engine/modules/memo/atom.actions.ts
@@ -87,16 +87,16 @@ export const changeMemoColorAction = createAction<
 >(ActionType.changeMemoColor);
 
 const changeMemoColor: ReducerType<typeof ActionType.changeMemoColor> = (
-  { collections },
-  { payload: { ids, color } }
+  { collections, lww },
+  { payload: { id, color }, timestamp }
 ) => {
   const collection = query(collections).collection('memoEntities');
-  for (const id of ids) {
-    collection.getOrCreate(id, id => createMemo({ id }));
-  }
+  collection.getOrCreate(id, id => createMemo({ id }));
 
-  collection.updateMany(ids, memo => {
-    memo.ui.color = color;
+  collection.replaceOperator(lww, timestamp, id, 'ui.color', () => {
+    collection.updateOne(id, memo => {
+      memo.ui.color = color;
+    });
   });
 };