feat: action tag

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

@@ -222,6 +222,7 @@ const Column: FC<ColumnProps> = (props, ctx) => {
                     }}
                   >
                     <${ColumnDataType}
+                      app=${app}
                       tableId=${column.tableId}
                       columnId=${column.id}
                       width=${widthDataType}

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

@@ -4,14 +4,15 @@ import {
   html,
   observable,
   onMounted,
+  Ref,
   ref,
   repeat,
   watch,
 } from '@dineug/r-html';
 import { arrayHas } from '@dineug/shared';
 import { isEmpty } from 'lodash-es';
 
-import { useAppContext } from '@/components/appContext';
+import { AppContext, useAppContext } from '@/components/appContext';
 import EditInput from '@/components/primitives/edit-input/EditInput';
 import HighlightedText from '@/components/primitives/highlighted-text/HighlightedText';
 import Kbd from '@/components/primitives/kbd/Kbd';
@@ -23,6 +24,7 @@ import { lastCursorFocus } from '@/utils/focus';
 import * as styles from './ColumnDataType.styles';
 
 export type ColumnDataTypeProps = {
+  app: Ref<AppContext>;
   tableId: string;
   columnId: string;
   edit: boolean;
@@ -49,7 +51,7 @@ const hasAutocompleteKey = arrayHas([
 ]);
 
 const ColumnDataType: FC<ColumnDataTypeProps> = (props, ctx) => {
-  const app = useAppContext(ctx);
+  const app = useAppContext(ctx, props.app?.value);
   const state = observable<State>({
     hints: [],
     index: -1,

packages/erd-editor/src/components/erd/table-properties/table-properties-indexes/TablePropertiesIndexes.ts

@@ -6,6 +6,7 @@ import IndexesCheckboxColumn from '@/components/erd/table-properties/table-prope
 import IndexesColumn from '@/components/erd/table-properties/table-properties-indexes/indexes-column/IndexesColumn';
 import Icon from '@/components/primitives/icon/Icon';
 import { addIndexAction$ } from '@/engine/modules/index/generator.actions';
+import { attachSharedTag$ } from '@/engine/tag';
 import { Index } from '@/internal-types';
 import { query } from '@/utils/collection/query';
 
@@ -31,7 +32,7 @@ const TablePropertiesIndexes: FC<TablePropertiesIndexesProps> = (
 
   const handleAddIndex = () => {
     const { store } = app.value;
-    store.dispatch(addIndexAction$(props.tableId));
+    store.dispatch(attachSharedTag$(addIndexAction$(props.tableId)));
   };
 
   return () => {

packages/erd-editor/src/components/erd/table-properties/table-properties-indexes/indexes-checkbox-column/IndexesCheckboxColumn.ts

@@ -21,6 +21,7 @@ import {
   addIndexColumnAction$,
   removeIndexColumnAction$,
 } from '@/engine/modules/index-column/generator.actions';
+import { attachSharedTag$ } from '@/engine/tag';
 import { Column, Index } from '@/internal-types';
 import { bHas } from '@/utils/bit';
 import { calcTableWidths, ColumnWidth } from '@/utils/calcTable';
@@ -163,7 +164,7 @@ const IndexesCheckboxColumn: FC<IndexesCheckboxColumnProps> = (props, ctx) => {
       ? addIndexColumnAction$
       : removeIndexColumnAction$;
 
-    store.dispatch(action$(props.index.id, column.id));
+    store.dispatch(attachSharedTag$(action$(props.index.id, column.id)));
   };
 
   return () => {

packages/erd-editor/src/components/erd/table-properties/table-properties-indexes/indexes-column/IndexesColumn.ts

@@ -8,6 +8,7 @@ import {
   changeIndexColumnOrderTypeAction$,
   moveIndexColumnAction$,
 } from '@/engine/modules/index-column/generator.actions';
+import { attachSharedTag$ } from '@/engine/tag';
 import { Index, IndexColumn } from '@/internal-types';
 import { query } from '@/utils/collection/query';
 import { onPrevent } from '@/utils/domEvent';
@@ -46,7 +47,7 @@ const IndexesColumn: FC<IndexesColumnProps> = (props, ctx) => {
 
     if (id !== targetId) {
       flipAnimation.snapshot();
-      store.dispatch(moveIndexColumnAction$(id, targetId));
+      store.dispatch(attachSharedTag$(moveIndexColumnAction$(id, targetId)));
     }
   };
 
@@ -75,7 +76,9 @@ const IndexesColumn: FC<IndexesColumnProps> = (props, ctx) => {
 
   const handleChangeOrderType = (indexColumn: IndexColumn) => {
     const { store } = app.value;
-    store.dispatch(changeIndexColumnOrderTypeAction$(indexColumn.id));
+    store.dispatch(
+      attachSharedTag$(changeIndexColumnOrderTypeAction$(indexColumn.id))
+    );
   };
 
   onUpdated(() => flipAnimation.play());

packages/erd-editor/src/components/erd/table-properties/table-properties-indexes/indexes-index/IndexesIndex.ts

@@ -10,6 +10,7 @@ import {
   removeIndexAction,
 } from '@/engine/modules/index/atom.actions';
 import { changeIndexUniqueAction$ } from '@/engine/modules/index/generator.actions';
+import { attachSharedTag$ } from '@/engine/tag';
 import { Index } from '@/internal-types';
 
 import * as styles from './IndexesIndex.styles';
@@ -32,12 +33,12 @@ const IndexesIndex: FC<IndexesIndexProps> = (props, ctx) => {
     props.onSelect(null);
 
     const { store } = app.value;
-    store.dispatch(removeIndexAction({ id: props.index.id }));
+    store.dispatch(attachSharedTag$(removeIndexAction({ id: props.index.id })));
   };
 
   const handleChangeUniqueIndex = () => {
     const { store } = app.value;
-    store.dispatch(changeIndexUniqueAction$(props.index.id));
+    store.dispatch(attachSharedTag$(changeIndexUniqueAction$(props.index.id)));
   };
 
   const handleChangeIndexName = (event: InputEvent) => {
@@ -46,11 +47,13 @@ const IndexesIndex: FC<IndexesIndexProps> = (props, ctx) => {
 
     const { store } = app.value;
     store.dispatch(
-      changeIndexNameAction({
-        id: props.index.id,
-        tableId: props.index.tableId,
-        value: input.value,
-      })
+      attachSharedTag$(
+        changeIndexNameAction({
+          id: props.index.id,
+          tableId: props.index.tableId,
+          value: input.value,
+        })
+      )
     );
   };
 

packages/erd-editor/src/engine/rx-operators/ignoreTagFilter.ts

@@ -0,0 +1,21 @@
+import { AnyAction } from '@dineug/r-html';
+import { isNill } from '@dineug/shared';
+import { Observable } from 'rxjs';
+
+import { notEmptyActions } from '@/engine/rx-operators/notEmptyActions';
+import { bHas } from '@/utils/bit';
+
+export const ignoreTagFilter =
+  (tag: number) => (source$: Observable<Array<AnyAction>>) =>
+    new Observable<Array<AnyAction>>(subscriber =>
+      source$.subscribe({
+        next: actions =>
+          subscriber.next(
+            actions.filter(
+              action => isNill(action.tags) || !bHas(action.tags, tag)
+            )
+          ),
+        error: err => subscriber.error(err),
+        complete: () => subscriber.complete(),
+      })
+    ).pipe(notEmptyActions);

packages/erd-editor/src/engine/rx-operators/index.ts

@@ -1,3 +1,4 @@
 export * from './actionsFilter';
 export * from './groupByStreamActions';
+export * from './ignoreTagFilter';
 export * from './notEmptyActions';

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

@@ -18,10 +18,12 @@ import { changeHasHistoryAction } from '@/engine/modules/editor/atom.actions';
 import {
   actionsFilter,
   groupByStreamActions,
+  ignoreTagFilter,
   notEmptyActions,
 } from '@/engine/rx-operators';
 import { createStore, Store } from '@/engine/store';
 import { createHooks } from '@/engine/store.hooks';
+import { Tag } from '@/engine/tag';
 
 export type RxStore = Store & {
   undo: () => void;
@@ -43,6 +45,7 @@ export function createRxStore(context: EngineContext): RxStore {
   const dispatch$ = new Subject<Array<AnyAction>>();
   const history$ = dispatch$.pipe(
     actionsFilter(HistoryActionTypes),
+    ignoreTagFilter(Tag.shared),
     groupByStreamActions(StreamActionTypes)
   );
   const change$ = new Observable<Array<AnyAction>>(subscriber =>

packages/erd-editor/src/engine/tag.ts

@@ -0,0 +1,33 @@
+import {
+  AnyAction,
+  CompositionActions,
+  compositionActionsFlat,
+} from '@dineug/r-html';
+import { isInteger } from '@dineug/shared';
+import { cloneDeep } from 'lodash-es';
+
+import { GeneratorAction } from '@/engine/generator.actions';
+
+export const Tag = {
+  shared: /* */ 0b0000000000000000000000000000001,
+} as const;
+
+export function attachActionTag(
+  tag: number,
+  actions: AnyAction[]
+): AnyAction[] {
+  return actions.map(action => ({
+    ...cloneDeep(action),
+    tags: isInteger(action.tags) ? action.tags | tag : tag,
+  }));
+}
+
+const createAttachActionTag =
+  (tag: number) =>
+  (...compositionActions: CompositionActions): GeneratorAction =>
+    function* (state, ctx) {
+      const actions = compositionActionsFlat(state, ctx, compositionActions);
+      yield attachActionTag(tag, actions);
+    };
+
+export const attachSharedTag$ = createAttachActionTag(Tag.shared);

packages/r-html/src/store/index.ts

@@ -7,11 +7,13 @@ export type Action<K extends keyof M, M> = {
   type: K;
   payload: M[K];
   timestamp: number;
+  tags?: number;
 };
 export type AnyAction<P = any> = {
   type: string;
   payload: P;
   timestamp: number;
+  tags?: number;
 };
 
 export type GeneratorAction<T = AnyAction> = Generator<

packages/shared/src/is-types.ts

@@ -27,6 +27,8 @@ export const isNill = (value: any): value is null | undefined =>
 export const { isArray } = Array;
 export const isObject = <T = any>(value: any): value is T =>
   isObjectRaw(value) && !isNull(value) && !isArray(value);
+export const isInteger = (value: any): value is number =>
+  Number.isInteger(value);
 
 export const isPrimitive = (value: any) =>
   isBigint(value) ||