Je construis une application de cartographie mentale à l'aide d'enregistrements d'entités. Les données de l'application sont un arbre de nœuds et je souhaite pouvoir reparenter les nœuds via annuler/rétablir. Le problème auquel je suis confronté est que même si l’opération d’annulation fonctionne correctement, l’opération de rétablissement ne fonctionne pas.

J'ai recréé mon problème dans une application simple :

import { Component, For } from 'solid-js'
import { createStore } from 'solid-js/store'
import { createHistory } from 'solid-record'

type Node = {
  id: number,
  children: Array<number>
  parentid: number
}

const initialValue = [
  { id: 0, children: [1, 2, 3], parentid: -1 },
  { id: 1, children: [], parentid: 0 },
  { id: 2, children: [], parentid: 0 },
  { id: 3, children: [], parentid: 0 },
]

const [state, setState] = createStore(initialValue)
const undoHistory = createHistory()

const changeState = () => {
  undoHistory.batch()

  const nodeid = 3
  const oldparentid = 0
  const newparentid = 2
  let node = state[nodeid]
  let oldparent = state[oldparentid]
  let newparent = state[newparentid]

  // first remove node form parent's children
  undoHistory.add(setState, n => n.id === node.parentid, 'children', oldparent.children.filter(n => n !== node.id))
  // then add to new parent's children
  undoHistory.add(setState, n => n.id === newparent.id, 'children', [...newparent.children, node.id])
  // lastly, point to new parent
  undoHistory.add(setState, n => n.id === node.id, 'parentid', newparent.id)
  undoHistory.unbatch()
}

const App: Component = () => {
  return (
    <>
      <For each={state}>{(node: Node) => <div>{`id: ${node.id}, parentid: ${node.parentid}, children: ${node.children}`}</div>}</For>
      <button onClick={changeState}>Change Parent of 3</button>
      <button onClick={() => undoHistory.undo()} disabled={!undoHistory.isUndoable()}>Undo</button>
      <button onClick={() => undoHistory.redo()} disabled={!undoHistory.isRedoable()}>Redo</button>
    </>
  );
};

export default App;

Lorsque le bouton "Changer parent de 3" est cliqué, la fonction changeState :

1. Supprimer le nœud 3 de sa liste enfants parent (nœud 0)
2. Ajouter le nœud 3 à sa nouvelle liste de nœuds enfants du nœud parent (nœud 2)
3. Réinitialiser le nœud parent du nœud 3 à 2

Rework restaure correctement l'état à sa valeur initiale, les colonnes 1,2,3 étant les enfants de 0.

Mais Redo définit la liste des nœuds enfants du nœud 0 à 3 alors qu'il devrait la définir à 1,2 ! Très étrangement, cela n'arrive pas si je ne définis pas la propriété Parentis du nœud 3, qui n'est pas directement liée à la propriété Children du nœud 0...

Je soupçonne qu'il s'agit d'un problème de type référence/valeur, ou peut-être d'un bug dans l'enregistrement de l'entité... De l'aide?