@flowgram-vue/history-storage 0.2.0

package/src/history-database.ts

@@ -0,0 +1,144 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import Dexie, { type Table } from 'dexie';
+
+import { HistoryOperationRecord, HistoryRecord } from './types';
+
+/**
+ * 历史数据库
+ */
+export class HistoryDatabase extends Dexie {
+  readonly history: Table<HistoryRecord>;
+
+  readonly operation: Table<HistoryOperationRecord>;
+
+  resourceStorageLimit: number = 100;
+
+  constructor(databaseName: string = 'ide-history-storage') {
+    super(databaseName);
+    this.version(1).stores({
+      history: '++id, &uuid, resourceURI',
+      operation: '++id, &uuid, historyId, uri, resourceURI',
+    });
+  }
+
+  /**
+   * 某个uri下所有的history记录
+   * @param resourceURI 资源uri
+   * @returns
+   */
+  allHistoryByResourceURI(resourceURI: string) {
+    return this.history.where({ resourceURI }).toArray();
+  }
+
+  /**
+   * 根据uuid获取历史
+   * @param uuid
+   * @returns
+   */
+  getHistoryByUUID(uuid: string) {
+    return this.history.get({ uuid });
+  }
+
+  /**
+   * 某个uri下所有的operation记录
+   * @param resourceURI 资源uri
+   * @returns
+   */
+  allOperationByResourceURI(resourceURI: string) {
+    return this.operation.where({ resourceURI }).toArray();
+  }
+
+  /**
+   * 添加历史记录
+   * @param history 历史记录
+   * @param operations 操作记录
+   * @returns
+   */
+  addHistoryRecord(history: HistoryRecord, operations: HistoryOperationRecord[]) {
+    return this.transaction('rw', this.history, this.operation, async () => {
+      const count = await this.history.where({ resourceURI: history.resourceURI }).count();
+      if (count >= this.resourceStorageLimit) {
+        const limit = count - this.resourceStorageLimit;
+        const items = await this.history
+          .where({ resourceURI: history.resourceURI })
+          .limit(limit)
+          .toArray();
+        const ids = items.map(i => i.id);
+        const uuid = items.map(i => i.uuid);
+        await Promise.all([
+          this.history.bulkDelete(ids),
+          ...uuid.map(async uuid => {
+            await this.operation.where({ historyId: uuid }).delete();
+          }),
+        ]);
+      }
+
+      return Promise.all([this.history.add(history), this.operation.bulkAdd(operations)]);
+    });
+  }
+
+  /**
+   * 更新历史记录
+   * @param historyRecord
+   * @returns
+   */
+  async updateHistoryByUUID(uuid: string, historyRecord: Partial<HistoryRecord>) {
+    const history = await this.getHistoryByUUID(uuid);
+    if (!history) {
+      console.warn('no history record found');
+      return;
+    }
+    return this.history.update(history.id, historyRecord);
+  }
+
+  /**
+   * 添加操作记录
+   * @param record 操作记录
+   * @returns
+   */
+  addOperationRecord(record: HistoryOperationRecord) {
+    return this.operation.add(record);
+  }
+
+  /**
+   * 更新操作记录
+   * @param record 操作记录
+   * @returns
+   */
+  async updateOperationRecord(record: HistoryOperationRecord) {
+    const op = await this.operation.where({ uuid: record.uuid }).first();
+    if (!op) {
+      console.warn('no operation record found');
+      return;
+    }
+    return this.operation.put({
+      id: op.id,
+      ...record,
+    });
+  }
+
+  /**
+   * 重置数据库
+   * @returns
+   */
+  reset() {
+    return this.transaction('rw', this.history, this.operation, async () => {
+      await Promise.all(this.tables.map(table => table.clear()));
+    });
+  }
+
+  /**
+   * 清空某个资源下所有的数据
+   * @param resourceURI
+   * @returns
+   */
+  resetByResourceURI(resourceURI: string) {
+    return this.transaction('rw', this.history, this.operation, async () => {
+      await Promise.all(this.tables.map(table => table.where({ resourceURI }).delete()));
+    });
+  }
+}

package/src/history-storage-container-module.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { ContainerModule } from 'inversify';
+
+import { HistoryStorageManager } from './history-storage-manager';
+
+export const HistoryStorageContainerModule = new ContainerModule(bind => {
+  bind(HistoryStorageManager).toSelf().inSingletonScope();
+});

package/src/history-storage-manager.ts

@@ -0,0 +1,139 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { inject, injectable } from 'inversify';
+import { DisposableCollection } from '@flowgram-vue/utils';
+import {
+  HistoryItem,
+  HistoryManager,
+  HistoryOperation,
+  HistoryStackChangeType,
+  HistoryService,
+  HistoryStackAddOperationEvent,
+  HistoryStackUpdateOperationEvent,
+} from '@flowgram-vue/history';
+import { PluginContext } from '@flowgram-vue/core';
+
+import { HistoryOperationRecord, HistoryRecord, HistoryStoragePluginOptions } from './types';
+import { HistoryDatabase } from './history-database';
+
+/**
+ * 历史存储管理
+ */
+@injectable()
+export class HistoryStorageManager {
+  private _toDispose = new DisposableCollection();
+
+  db: HistoryDatabase;
+
+  @inject(HistoryManager)
+  protected historyManager: HistoryManager;
+
+  /**
+   * 初始化
+   * @param ctx
+   */
+  onInit(_ctx: PluginContext, opts: HistoryStoragePluginOptions) {
+    this.db = new HistoryDatabase(opts?.databaseName);
+
+    if (opts?.resourceStorageLimit) {
+      this.db.resourceStorageLimit = opts.resourceStorageLimit;
+    }
+
+    this._toDispose.push(
+      this.historyManager.historyStack.onChange(event => {
+        if (event.type === HistoryStackChangeType.ADD) {
+          const [history, operations] = this.historyItemToRecord(event.service, event.value);
+          this.db.addHistoryRecord(history, operations).catch(console.error);
+        }
+
+        // operation merge的时候需要更新snapshot
+        if (
+          [HistoryStackChangeType.ADD_OPERATION, HistoryStackChangeType.UPDATE_OPERATION].includes(
+            event.type,
+          )
+        ) {
+          const {
+            service,
+            value: { historyItem },
+          } = event as HistoryStackAddOperationEvent | HistoryStackUpdateOperationEvent;
+          // 更新快照
+          this.db
+            .updateHistoryByUUID(historyItem.id, {
+              resourceJSON: service.getSnapshot() || '',
+            })
+            .catch(console.error);
+        }
+
+        if (event.type === HistoryStackChangeType.ADD_OPERATION) {
+          const operationRecord: HistoryOperationRecord = this.historyOperationToRecord(
+            event.value.historyItem,
+            event.value.operation,
+          );
+          this.db.addOperationRecord(operationRecord).catch(console.error);
+        }
+        if (event.type === HistoryStackChangeType.UPDATE_OPERATION) {
+          const operationRecord: HistoryOperationRecord = this.historyOperationToRecord(
+            event.value.historyItem,
+            event.value.operation,
+          );
+          this.db.updateOperationRecord(operationRecord).catch(console.error);
+        }
+      }),
+    );
+  }
+
+  /**
+   * 内存历史转数据表记录
+   * @param historyItem
+   * @returns
+   */
+  historyItemToRecord(
+    historyService: HistoryService,
+    historyItem: HistoryItem,
+  ): [HistoryRecord, HistoryOperationRecord[]] {
+    const operations = historyItem.operations.map(op =>
+      this.historyOperationToRecord(historyItem, op),
+    );
+
+    return [
+      {
+        uuid: historyItem.id,
+        timestamp: historyItem.timestamp,
+        type: historyItem.type,
+        resourceURI: historyItem.uri?.toString() || '',
+        resourceJSON: historyService.getSnapshot() || '',
+      },
+      operations,
+    ];
+  }
+
+  /**
+   * 内存操作转数据表操作
+   * @param historyItem
+   * @param op
+   * @returns
+   */
+  historyOperationToRecord(historyItem: HistoryItem, op: HistoryOperation): HistoryOperationRecord {
+    return {
+      uuid: op.id,
+      type: op.type,
+      timestamp: op.timestamp,
+      label: op.label || '',
+      uri: op?.uri?.toString() || '',
+      resourceURI: historyItem.uri?.toString() || '',
+      description: op.description || '',
+      value: JSON.stringify(op.value),
+      historyId: historyItem.id,
+    };
+  }
+
+  /**
+   * 销毁
+   */
+  dispose() {
+    this._toDispose.dispose();
+  }
+}

package/src/index.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export * from './create-history-storage-plugin';
+export * from './use-storage-hisotry-items';
+export * from './types';
+export * from './history-database';
+export * from './history-storage-container-module';
+export * from './history-storage-manager';

package/src/types.ts

@@ -0,0 +1,88 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export interface HistoryRecord {
+  /**
+   * 自增id
+   */
+  id?: number;
+  /**
+   * 唯一标识
+   */
+  uuid: string;
+  /**
+   * 类型 如 push undo redo
+   */
+  type: string;
+  /**
+   * 时间戳
+   */
+  timestamp: number;
+  /**
+   * 资源uri
+   */
+  resourceURI: string;
+  /**
+   * 资源json
+   */
+  resourceJSON: unknown;
+}
+
+export interface HistoryOperationRecord {
+  /**
+   * 自增id
+   */
+  id?: number;
+  /**
+   * 唯一标识
+   */
+  uuid: string;
+  /**
+   * 历史记录唯一标志，记录的uuid
+   */
+  historyId: string;
+  /**
+   * 类型，如 addFromNode deleteFromNode
+   */
+  type: string;
+  /**
+   * 操作值，不同类型不同，json字符串
+   */
+  value: string;
+  /**
+   * uri操作对象uri，如某个node的uri
+   */
+  uri: string;
+  /**
+   * 操作资源uri，如某个流程的uri
+   */
+  resourceURI: string;
+  /**
+   * 操作显示标题
+   */
+  label: string;
+  /**
+   * 操作显示描述
+   */
+  description: string;
+  /**
+   * 时间戳
+   */
+  timestamp: number;
+}
+
+/**
+ * 插件配置
+ */
+export interface HistoryStoragePluginOptions {
+  /**
+   * 数据库名称
+   */
+  databaseName?: string;
+  /**
+   * 每个资源最大历史记录数量
+   */
+  resourceStorageLimit?: number;
+}

package/src/use-storage-hisotry-items.ts

@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { liveQuery } from 'dexie';
+import { groupBy } from 'lodash-es';
+import { reactive, toValue, watchEffect } from 'vue';
+import type { MaybeRefOrGetter } from 'vue';
+import { HistoryItem, HistoryOperation, HistoryStack } from '@flowgram-vue/history';
+
+import { HistoryStorageManager } from './history-storage-manager';
+
+export function useStorageHistoryItems(
+  historyStorageManager: HistoryStorageManager,
+  resourceURI: MaybeRefOrGetter<string>
+): {
+  items: HistoryItem[];
+} {
+  const state = reactive<{ items: HistoryItem[] }>({
+    items: [],
+  });
+
+  watchEffect((onCleanup) => {
+    const uri = toValue(resourceURI);
+    const observable = liveQuery(async () => {
+      const [historyItems, operations] = await Promise.all([
+        historyStorageManager.db.allHistoryByResourceURI(uri),
+        historyStorageManager.db.allOperationByResourceURI(uri),
+      ]);
+
+      const grouped = groupBy<HistoryOperation>(
+        operations.map((o) => ({
+          id: o.uuid,
+          timestamp: o.timestamp,
+          type: o.type,
+          label: o.label,
+          description: o.description,
+          value: o.value ? JSON.parse(o.value) : undefined,
+          uri: o.uri,
+          historyId: o.historyId,
+        })),
+        'historyId'
+      );
+      return historyItems
+        .sort((a, b) => (b.id as number) - (a.id as number))
+        .map(
+          (historyItem) =>
+            ({
+              id: historyItem.uuid,
+              type: historyItem.type,
+              timestamp: historyItem.timestamp,
+              operations: grouped[historyItem.uuid] || [],
+              time: HistoryStack.dateFormat(historyItem.timestamp),
+              uri: historyItem.resourceURI,
+            }) as HistoryItem
+        );
+    });
+
+    const subscription = observable.subscribe({
+      next: (value) => {
+        state.items = value || [];
+      },
+      error: (err) => {
+        console.error(err);
+      },
+    });
+
+    onCleanup(() => subscription.unsubscribe());
+  });
+
+  return state;
+}