Immutable.js で元に戻すおよびやり直し機能を実装する方法 (詳細なチュートリアル)

この記事では主に Immutable.js をベースにした undo と redo 機能と注意が必要な点を紹介します

ブラウザはますます強力になり、元々他のクライアントが提供していた多くの機能は徐々に移行しています。フロントエンドに至るまで、フロントエンド アプリケーションはますます複雑になっています。多くのフロントエンド アプリケーション、特に一部のオンライン編集ソフトウェアは、操作中にユーザー インタラクションを継続的に処理し、スムーズなインタラクションを保証するために元に戻す機能とやり直し機能を提供する必要があります。ただし、アプリケーションに元に戻す機能とやり直し機能を実装するのは簡単な作業ではありません。 Redux の公式ドキュメントでは、Redux アプリケーションに元に戻す機能とやり直し機能を実装する方法が紹介されています。 redux に基づく元に戻す機能はトップダウンのソリューションです。redux-undo の導入後は、すべての操作が「元に戻すことが可能」になり、その後も元に戻す機能をより使いやすくするために設定の変更を続けます (これも同様です) redux-undo 設定項目が多い理由）。

この記事では、シンプルなオンライン描画ツールを例として、TypeScript と Immutable.js を使用して実用的な「元に戻す」と「やり直し」機能を実装する、ボトムアップ アプローチを採用します。おおよその効果は以下の図に示されているとおりです:

ステップ 1: どの州に履歴レコードが必要かを判断し、カスタム State クラスを作成します

すべての州が履歴レコードを必要とするわけではありません。多くの状態、特にマウスやキーボードの操作に関連する状態は非常に簡単です。たとえば、描画ツールでグラフィックをドラッグする場合、「ドラッグ中」マークを設定する必要があり、ページには対応するドラッグ プロンプトが表示されます。当然、ドラッグ マークは履歴に表示されるべきではありません。また、Web ページのウィンドウ サイズ、バックグラウンドに送信されたリクエストのリストなど、他の状態は取り消すことができない、または取り消す必要がありません。

履歴レコードを必要としない状態を除外し、残りの状態を Immutable Record でカプセル化し、State クラスを定義します:

// State.ts
import { Record, List, Set } from 'immutable'
const StateRecord = Record({
 items: List<Item>
 transform: d3.ZoomTransform
 selection: number
})
// 用类封装，便于书写 TypeScript，注意这里最好使用Immutable 4.0 以上的版本
export default class State extends StateRecord {}

ここでの例は単純なオンライン描画ツールであるため、上記の State クラスには以下が含まれます3 つのフィールドは描画されたグラフィックを記録するために使用され、transform はアートボードのパンとズームのステータスを記録するために使用され、selection は現在選択されているグラフィックの ID を表します。グラフィック描画プレビュー、自動配置設定、操作プロンプト テキストなど、描画ツールの他の状態は State クラスには配置されません。

ステップ 2: Action 基本クラスを定義し、異なる操作ごとに対応する Action サブクラスを作成します

redux-undo との違いは、引き続きコマンド モードを使用することです。つまり、基本クラス Action と State All のすべてのペアを定義します。操作は Action のインスタンスとしてカプセル化され、さまざまなタイプの操作に対応する Action のいくつかのサブクラスが定義されます。

TypeScript では、Action 基本クラスを Abstract Class で定義する方が便利です。

// actions/index.ts
export default abstract class Action {
 abstract next(state: State): State
 abstract prev(state: State): State
 prepare(appHistory: AppHistory): AppHistory { return appHistory }
 getMessage() { return this.constructor.name }
}

Action オブジェクトの next メソッドは「次の状態」を計算するために使用され、prev メソッドは「前の状態」を計算するために使用されます。 getMessage メソッドは、Action オブジェクトの簡単な説明を取得するために使用されます。 getMessageメソッドを利用することで、ユーザーの操作記録をページ上に表示することができ、ユーザーは最近何が起こったのかを理解しやすくなります。 prepare メソッドは、アクションを初めて適用する前にアクションを「準備」するために使用されます。AppHistory の定義については、この記事で後ほど説明します。

Action サブクラスの例

次の AddItemAction は、「新しいグラフィックの追加」を表現するために使用される典型的な Action サブクラスです。

// actions/AddItemAction.ts
export default class AddItemAction extends Action {
 newItem: Item
 prevSelection: number
 constructor(newItem: Item) {
 super()
 this.newItem = newItem
 }
 prepare(history: AppHistory) {
 // 创建新的图形后会自动选中该图形，为了使得撤销该操作时 state.selection 变为原来的值
 // prepare 方法中读取了「添加图形之前 selection 的值」并保存到 this.prevSelection
 this.prevSelection = history.state.selection
 return history
 }
 next(state: State) {
 return state
  .setIn(['items', this.newItem.id], this.newItem)
  .set('selection', this.newItemId)
 }
 prev(state: State) {
 return state
  .deleteIn(['items', this.newItem.id])
  .set('selection', this.prevSelection)
 }
 getMessage() { return `Add item ${this.newItem.id}` }
}

実行時の動作

アプリケーションの実行中、ユーザーの操作により Action オブジェクトが生成されるたびに、オブジェクトの next メソッドを呼び出して次の状態を計算します。次に、アクションを後で使用できるようにリストに保存します。ユーザーが元に戻す操作を実行すると、アクション リストから最新のアクションを取得し、その prev メソッドを呼び出します。アプリケーションの実行中、next/prev メソッドは大まかに次のように呼び出されます:

// initState 是一开始就给定的应用初始状态
// 某一时刻，用户交互产生了 action1 ...
state1 = action1.next(initState)
// 又一个时刻，用户交互产生了 action2 ...
state2 = action2.next(state1)
// 同样的，action3也出现了 ...
state3 = action3.next(state2)
// 用户进行撤销，此时我们需要调用最近一个action的prev方法
state4 = action3.prev(state3)
// 如果再次进行撤销，我们从action列表中取出对应的action，调用其prev方法
state5 = action2.prev(state4)
// 重做的时候，取出最近一个被撤销的action，调用其next方法
state6 = action2.next(state5)
Applied-Action

以下の説明を容易にするために、Applied-Action を簡単に定義します。Applied-Action は、次の操作結果を指します。現在のアプリケーション状態のアクションに反映され、アクションの次のメソッドが実行されると、アクションは適用されます。前のメソッドが実行されると、アクションは適用されなくなります。

ステップ 3: 履歴コンテナ AppHistory を作成する

前の State クラスは、特定の時点でのアプリケーションの状態を表すために使用されます。 次に、アプリケーションの履歴を表す AppHistory クラスを定義します。同様に、履歴レコードを定義するために今でも Immutable Record を使用しています。状態フィールドは現在のアプリケーションのステータスを表すために使用され、リスト フィールドはすべてのアクションを保存するために使用され、インデックス フィールドは最新の適用されたアクションの添え字を記録するために使用されます。アプリケーションの履歴ステータスは、元に戻す/やり直しメソッドを通じて計算できます。 apply メソッドは、特定のアクションを AppHistory に追加して実行するために使用されます。具体的なコードは次のとおりです:

// AppHistory.ts
const emptyAction = Symbol('empty-action')
export const undo = Symbol('undo')
export type undo = typeof undo // TypeScript2.7之后对symbol的支持大大增强
export const redo = Symbol('redo')
export type redo = typeof redo
const AppHistoryRecord = Record({
 // 当前应用状态
 state: new State(),
 // action 列表
 list: List<Action>(),
 // index 表示最后一个applied-action在list中的下标。-1 表示没有任何applied-action
 index: -1,
})
export default class AppHistory extends AppHistoryRecord {
 pop() { // 移除最后一项操作记录
 return this
  .update(&#39;list&#39;, list => list.splice(this.index, 1))
  .update(&#39;index&#39;, x => x - 1)
 }
 getLastAction() { return this.index === -1 ? emptyAction : this.list.get(this.index) }
 getNextAction() { return this.list.get(this.index + 1, emptyAction) }
 apply(action: Action) {
 if (action === emptyAction) return this
 return this.merge({
  list: this.list.setSize(this.index + 1).push(action),
  index: this.index + 1,
  state: action.next(this.state),
 })
 }
 redo() {
 const action = this.getNextAction()
 if (action === emptyAction) return this
 return this.merge({
  list: this.list,
  index: this.index + 1,
  state: action.next(this.state),
 })
 }
 undo() {
 const action = this.getLastAction()
 if (action === emptyAction) return this
 return this.merge({
  list: this.list,
  index: this.index - 1,
  state: action.prev(this.state),
 })
 }
}

第四步：添加「撤销重做」功能

假设应用中的其他代码已经将网页上的交互转换为了一系列的 Action 对象，那么给应用添上「撤销重做」功能的大致代码如下：

type HybridAction = undo | redo | Action
// 如果用Redux来管理状态，那么使用下面的reudcer来管理那些「需要历史记录的状态」
// 然后将该reducer放在应用状态树中合适的位置
function reducer(history: AppHistory, action: HybridAction): AppHistory {
 if (action === undo) {
 return history.undo()
 } else if (action === redo) {
 return history.redo()
 } else { // 常规的 Action
 // 注意这里需要调用prepare方法，好让该action「准备好」
 return action.prepare(history).apply(action)
 }
}
// 如果是在 Stream/Observable 的环境下，那么像下面这样使用 reducer
const action$: Stream<HybridAction> = generatedFromUserInteraction
const appHistory$: Stream<AppHistory> = action$.fold(reducer, new AppHistory())
const state$ = appHistory$.map(h => h.state)
// 如果是用回调函数的话，大概像这样使用reducer
onActionHappen = function (action: HybridAction) {
 const nextHistory = reducer(getLastHistory(), action)
 updateAppHistory(nextHistory)
 updateState(nextHistory.state)
}

第五步：合并 Action，完善用户交互体验

通过上面这四个步骤，画图工具拥有了撤消重做功能，但是该功能用户体验并不好。在画图工具中拖动一个图形时，MoveItemAction 的产生频率和 mousemove 事件的发生频率相同，如果我们不对该情况进行处理，MoveItemAction 马上会污染整个历史记录。我们需要合并那些频率过高的 action，使得每个被记录下来的 action 有合理的撤销粒度。

每个 Action 在被应用之前，其 prepare 方法都会被调用，我们可以在 prepare 方法中对历史记录进行修改。例如，对于 MoveItemAction，我们判断上一个 action 是否和当前 action 属于同一次移动操作，然后来决定在应用当前 action 之前是否移除上一个 action。代码如下：

// actions/MoveItemAction.ts
export default class MoveItemAction extends Action {
 prevItem: Item
 // 一次图形拖动操作可以由以下三个变量来进行描述：
 // 拖动开始时鼠标的位置(startPos)，拖动过程中鼠标的位置(movingPos)，以及拖动的图形的 ID
 constructor(readonly startPos: Point, readonly movingPos: Point, readonly itemId: number) {
 // 上一行中 readonly startPos: Point 相当于下面两步：
 // 1. 在MoveItemAction中定义startPos只读字段
 // 2. 在构造函数中执行 this.startPos = startPos
 super()
 }
 prepare(history: AppHistory) {
 const lastAction = history.getLastAction()
 if (lastAction instanceof MoveItemAction && lastAction.startPos == this.startPos) {
  // 如果上一个action也是MoveItemAction，且拖动操作的鼠标起点和当前action相同
  // 则我们认为这两个action在同一次移动操作中
  this.prevItem = lastAction.prevItem
  return history.pop() // 调用pop方法来移除最近一个action
 } else {
  // 记录图形被移动之前的状态，用于撤销
  this.prevItem = history.state.items.get(this.itemId)
  return history
 }
 }
 next(state: State): State {
 const dx = this.movingPos.x - this.startPos.x
 const dy = this.movingPos.y - this.startPos.y
 const moved = this.prevItem.move(dx, dy)
 return state.setIn(['items', this.itemId], moved)
 }
 prev(state: State) {
 // 撤销的时候我们直接使用已经保存的prevItem即可
 return state.setIn(['items', this.itemId], this.prevItem)
 }
 getMessage() { /* ... */ }
}

从上面的代码中可以看到，prepare 方法除了使 action 自身准备好之外，它还可以让历史记录准备好。不同的 Action 类型有不同的合并规则，为每种 Action 实现合理的 prepare 函数之后，撤消重做功能的用户体验能够大大提升。

一些其他需要注意的地方

撤销重做功能是非常依赖于不可变性的，一个 Action 对象在放入 AppHistory.list 之后，其所引用的对象都应该是不可变的。如果 action 所引用的对象发生了变化，那么在后续撤销时可能发生错误。本方案中，为了方便记录操作发生时的一些必要信息，Action 对象的 prepare 方法中允许出现原地修改操作，但是 prepare 方法只会在 action 被放入历史记录之前调用一次，action 一旦进入纪录列表就是不可变的了。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

vue页面离开后执行函数的实例

vue轮播图插件vue-concise-slider的使用

vue加载自定义的js文件方法

以上がImmutable.js で元に戻すおよびやり直し機能を実装する方法 (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。