Comment implémenter l'effet d'annulation et de rétablissement dans Immutable.js

Cette fois, je vais vous montrer comment obtenir l'effet d'annulation et de rétablissement avec Immutable.js Quelles sont les précautions pour implémenter l'effet d'annulation et de rétablissement avec Immutable. .js. Voici quelques cas pratiques.

Les navigateurs deviennent de plus en plus puissants. De nombreuses fonctions initialement fournies par d'autres clients sont progressivement transférées vers le front-end, et les applications front-end deviennent de plus en plus complexes. De nombreuses applications frontales, en particulier certains logiciels d'édition en ligne, doivent traiter en permanence les interactions des utilisateurs pendant leur fonctionnement et fournir une fonction d'annulation et de rétablissement pour garantir une interaction fluide. Cependant, implémenter la fonction d'annulation et de rétablissement pour une application n'est pas une tâche facile. La documentation officielle de Redux explique comment implémenter la fonction d'annulation et de rétablissement dans les applications Redux. La fonction d'annulation basée sur redux est une solution top-down : après l'introduction de redux-undo , toutes les opérations deviennent "annulables", et ensuite on continue de modifier sa configuration pour rendre la fonction d'annulation de plus en plus utilisable (c'est aussi redux-undo La raison pour laquelle il y a tant d'éléments de configuration).

Cet article adoptera une approche ascendante, prendra comme exemple un simple outil de dessin en ligne et utilisera TypeScript et Immutable.js pour implémenter une fonction pratique « annuler et refaire ». L'effet approximatif est le suivant :

Première étape : Déterminez quels États nécessitent des enregistrements d'historique et créez une classe d'État personnalisée

Tous les États n’exigent pas l’histoire. De nombreux états sont très triviaux, en particulier ceux liés à l'interaction avec la souris ou le clavier. Par exemple, lorsque vous faites glisser un graphique dans l'outil de dessin, nous devons définir une marque « glisser en cours » et la page affichera l'invite de glisser correspondante. , évidemment la marque de déplacement ne doit pas apparaître dans l'historique ; et les autres états ne peuvent pas être révoqués ou n'ont pas besoin d'être révoqués, comme la taille de la fenêtre de la page Web, la liste des requêtes envoyées en arrière-plan, etc.

En excluant les états qui ne nécessitent pas d'historique, nous encapsulons les états restants avec Immutable Record et définissons la classe 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 {}

Notre exemple ici est un simple outil de dessin en ligne, donc la classe State ci-dessus contient trois champs, les éléments sont utilisés pour enregistrer les graphiques dessinés, transformer Utilisé pour enregistrer l'état de panoramique et de zoom du plan de travail, et la sélection représente le graphique actuellement sélectionné. IDENTIFIANT. Les autres états de l'outil de dessin, tels que l'aperçu du dessin graphique, la configuration de l'alignement automatique, le texte d'invite d'opération, etc., ne sont pas placés dans la classe State.

Étape 2 : Définir la classe de base Action et créer les sous-classes Action correspondantes pour chaque opération différente

Contrairement à redux-undo, nous utilisons toujours le mode commande : définissez la classe de base Action, et toutes les opérations sur State sont encapsulées comme une instance d'Action ; définissez plusieurs sous-classes d'Action, correspondant à différents types d'opérations.

Dans TypeScript, il est plus pratique de définir la classe de base Action avec la classe abstraite.

// 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 }
}

La méthode suivante de l'objet Action est utilisée pour calculer « l'état suivant », et la méthode prev est utilisée pour calculer « l'état précédent ». La méthode getMessage est utilisée pour obtenir Une brève description de l'objet Action. via getMessage Méthode, nous pouvons afficher les enregistrements d'opérations de l'utilisateur sur la page, permettant ainsi aux utilisateurs de comprendre plus facilement ce qui s'est passé récemment. La méthode prepare est utilisée dans Action Préparez-le avant de l'utiliser pour la première fois. La définition d'AppHistory sera donnée plus loin dans cet article.

Exemple de sous-classe d'action

L'AddItemAction suivant est une sous-classe Action typique, utilisée pour exprimer « ajouter un nouveau graphique ».

// 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}` }
}

Comportement d'exécution

Lorsque l'application est en cours d'exécution, l'interaction de l'utilisateur génère un flux d'action. Chaque fois qu'un objet Action est généré, nous appelons la méthode suivante de l'objet pour calculer l'état suivant, puis ajoutons l'état suivant. Les actions sont enregistrées dans une liste pour une utilisation ultérieure ; lorsque l'utilisateur effectue une opération d'annulation, nous prenons l'action la plus récente de la liste d'actions et appelons sa précédente. méthode. Lorsque l'application est en cours d'exécution, la méthode next/prev est appelée comme suit :

// 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

Afin de faciliter l’explication suivante, nous faisons une définition simple de l’Action-Appliquée : Action-Appliquée Fait référence aux actions dont les résultats de l'opération ont été reflétés dans l'état actuel de l'application ; lorsque la méthode suivante de l'action est exécutée, l'action est appliquée lorsque ; Lorsque la méthode prev est exécutée, l’action n’est plus appliquée.

第三步：创建历史记录容器 AppHistory

前面的 State 类用于表示某个时刻应用的状态，接下来我们定义 AppHistory 类用来表示应用的历史记录。同样的，我们仍然使用 Immutable Record 来定义历史记录。其中 state 字段用来表达当前的应用状态，list 字段用来存放所有的 action，而 index 字段用来记录最近的 applied-action 的下标。应用的历史状态可以通过 undo/redo 方法计算得到。apply 方法用来向 AppHistory 中添加并执行具体的 Action。具体代码如下：

// 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('list', list => list.splice(this.index, 1))
  .update('index', 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 一旦进入纪录列表就是不可变的了。

总结

以上就是实现一个实用的撤销重做功能的所有步骤了。不同的前端项目有不同的需求和技术方案，有可能上面的代码在你的项目中一行也用不上；不过撤销重做的思路应该是相同的，希望本文能够给你带来一些启发。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

readline怎样逐行读取并写入内容

easyui日期时间框在IE中的兼容性如何处理

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!