Angular Undo Redo 履歴ストア | ng-hub-ui-history

Signals に優しい API、トランザクション、上限、リアクティブフォーム対応を備えた Angular の undo redo 履歴ストア。

API リファレンス

history の完全な仕様をここにまとめました。バインド、リッスン、プロジェクション、テーマ設定ができるすべてが一か所に集約されています。必要なものを接続し、好きなようにスタイリングしてください — standalone で signal フレンドリーです。

インプット

4 個のインプットで history を調整。通常の Angular @Input と同じようにバインドできます。

名前デフォルト説明
createHistoryStore(config)HistoryStoreConfig<T, K>任意の制限値とカスタムの diff/patch 関数を指定して、Signals ベースのストアを作成します。
registerObject(id, initialState)必須(id: K, initialState: T) => voidオブジェクトのベース状態を登録し、そのキーの線形履歴を開始します。
commit(id, newState, options?)必須(id: K, state: T, options?: { label?: string }) => booleandiff パッチを保存し、ポインタが末尾になかった場合は redo ブランチを無効化します。
watchForm(id, form, options?)(id: K, form: FormGroup, options?: WatchFormOptions) => () => voidフォーム値の変更を自動的にコミットし、購読解除のコールバックを返します。

アウトプット

history の動作に反応 — ロジックを接続できる 1 個のイベント。

名前説明
statesSignal<Map<K, T>>オブジェクト ID ごとに現在のイミュータブルなスナップショットを保持するリアクティブな signal マップ。

メソッド

history をコードから操作 — プログラム操作のための 16 個のメソッドを備えています。

名前シグネチャ戻り値説明
createHistoryStorecreateHistoryStore<T, K>(config?: HistoryStoreConfig<T, K>): HistoryStore<T, K>HistoryStore<T, K>id によって複数のオブジェクトを追跡する、シグナルベースの履歴ストアを作成するファクトリ。省略可能な保持上限(maxEntries はデフォルト 100、maxBytes はデフォルト 512000)、keySelector、およびカスタムの diff/patch 戦略を受け付けます。
HistoryStore.statesstates: Signal<Map<K, T>>Signal<Map<K, T>>オブジェクト id をキーとした、現在のイミュータブルな状態スナップショットのマップを公開する computed シグナル。
HistoryStore.registerObjectregisterObject(id: K, initialState: T): void追跡対象オブジェクトを初期状態とともに登録し、その id 用に新しい空の履歴タイムラインを開始します。
HistoryStore.registerFromObjectregisterFromObject(initialState: T): KK設定済みの keySelector から id を導出して追跡対象オブジェクトを登録し、その id を返します。keySelector が設定されていない場合は例外をスローします。
HistoryStore.commitcommit(id: K, newState: T, options?: HistoryCommitOptions): booleanboolean登録済みの id に対して新しい状態スナップショットをコミットし、前進/後退パッチを保存して、ポインターより先にある redo エントリを破棄します。新しい状態に変更がない場合は false を返します。トランザクションが開いている間は、エントリを作成せずに現在の状態のみを更新します。
HistoryStore.commitFromObjectcommitFromObject(newState: T, options?: HistoryCommitOptions): booleanboolean設定済みの keySelector から id を導出して新しい状態をコミットします。keySelector が設定されていない場合は例外をスローします。
HistoryStore.undoundo(id: K): booleanbooleanエントリの後退パッチを適用して、履歴を 1 ステップ戻します。undo できるものがない場合は false を返します。
HistoryStore.redoredo(id: K): booleanbooleanエントリの前進パッチを適用して、履歴を 1 ステップ再適用します。redo できるものがない場合は false を返します。
HistoryStore.canUndocanUndo(id: K): booleanboolean指定されたオブジェクト id に対して、現在 undo が可能かどうかを返します。
HistoryStore.canRedocanRedo(id: K): booleanboolean指定されたオブジェクト id に対して、現在 redo が可能かどうかを返します。
HistoryStore.getStategetState(id: K): T | undefinedT | undefined指定された id の現在の状態のディープクローンを返します。id が未登録の場合は undefined を返します。
HistoryStore.historyhistory(id: K): HistoryMetadataHistoryMetadataオブジェクトの履歴に関する読み取り専用メタデータを返します:ポインター、エントリ数、保持中のおおよそのバイト数、およびエントリごとのラベル・タイムスタンプ・バイト数。
HistoryStore.beginTransactionbeginTransaction(id: K, label?: string): voidトランザクションを開始し、以降のコミットが 1 つに統合された履歴エントリにまとめられるようにします。その id に対してトランザクションがすでに開いている場合は例外をスローします。
HistoryStore.endTransactionendTransaction(id: K): booleanboolean開いているトランザクションを終了し、トランザクション開始時の状態から現在の状態までを 1 つに統合したエントリとしてコミットします。トランザクションが開いていなかった場合や変更がなかった場合は false を返します。
HistoryStore.watchFormwatchForm(id: K, form: FormGroup, options?: WatchFormOptions): () => void() => voidFormGroup の valueChanges を購読して各発行を自動的にコミットします。最初の発行はオプションでスキップできます。購読解除用のコールバックを返します。
HistoryStore.clearHistoryclearHistory(id: K): void指定された id のすべての履歴エントリをクリアし、現在の状態を新しいベーススナップショットとして保持して、開いているトランザクションを破棄します。

テンプレート

テンプレートはまだドキュメント化されていません。