Is my history correctly implemented as it is not working as expected

[aayushmaan-54]

import { useState, useRef, useCallback } from "react";
import { Canvas } from 'fabric';
import { AdditionalJsonSaveConfig } from "@/app/editor/types";

interface propsType {
  canvas: Canvas | null;
}


export default function useHistory({ canvas }: propsType) {
  const [historyIndex, setHistoryIndex] = useState(0);
  const canvasHistory = useRef<string[]>([]);
  const skipSave = useRef(false);

  
  const canUndo = useCallback(() => {
    return historyIndex > 0;
  }, [historyIndex]);


  const canRedo = useCallback(() => {
    return historyIndex < canvasHistory.current.length - 1;
  }, [historyIndex]);


  const save = useCallback((skip: boolean = false) => {
    if (!canvas) return;
    const currentState = canvas.toObject(AdditionalJsonSaveConfig);
    const json = JSON.stringify(currentState);

    if (!skip && !skipSave.current) {
      canvasHistory.current.push(json);
      setHistoryIndex(canvasHistory.current.length - 1);
    }
  }, [canvas]);


  const undo = useCallback(() => {
    if (canUndo()) {
      skipSave.current = true;
      canvas?.clear();
      canvas?.renderAll();

      const previousIndex = historyIndex - 1;
      const previousState = JSON.parse(canvasHistory.current[previousIndex]);

      canvas?.loadFromJSON(previousState, () => {
        canvas.renderAll();
        setHistoryIndex(previousIndex);
        skipSave.current = false;
      });
    }
  }, [canUndo, canvas, historyIndex]);


  const redo = useCallback(() => {
    if (canRedo()) {
      skipSave.current = true;
      canvas?.clear();
      canvas?.renderAll();

      const nextIndex = historyIndex + 1;
      const nextState = JSON.parse(canvasHistory.current[nextIndex]);

      canvas?.loadFromJSON(nextState, () => {
        canvas.renderAll();
        setHistoryIndex(nextIndex);
        skipSave.current = false;
      });
    }
  }, [canRedo, canvas, historyIndex]);


  return {
    save,
    canUndo,
    canRedo,
    undo,
    redo,
    setHistoryIndex,
    canvasHistory,
  };
}

export const AdditionalJsonSaveConfig = [
  "name",
  "gradientAngle",
  "selectable",
  "hasControls",
  "linkData",
  "editable",
  "extensionType",
  "extension",
  "hoverCursor",
];

so i am making app like canva and in there i want to create undo, redo so is that correctly implemented?

[aayushmaan-54]

i am using fabric.js v6.5.3

[zhe-he]

Split and Call, Reference Example：

class Stack {
    private arr: any[];
    constructor() {
        this.arr = [];
    }
    pop() {
        return this.arr.pop();
    }
    push(item: any) {
        this.arr.push(item);
    }
    size() {
        return this.arr.length;
    }
    empty() {
        return this.arr.length == 0;
    }
    top() {
        return this.arr[this.arr.length - 1];
    }
    destroy() {
        this.arr = [];
    }
}
class UndoRedo<T = any> {
    private uList: Stack;
    private rList: Stack;
    constructor() {
        this.uList = new Stack();
        this.rList = new Stack();
    }
    push(item: T) {
        this.uList.push(item);
        this.rList = new Stack();
    }
    undo() {
        const item = this.uList.pop();
        if (item == null) return null;
        this.rList.push(item);
        return item as T;
    }
    redo() {
        const item = this.rList.pop();
        if (item == null) return null;
        this.uList.push(item);
        return item as T;
    }
    pop(num = 1) {
        return new Array(num).map(() => this.uList.pop()).filter((x) => x) as T[];
    }
    undoTop() {
        return this.uList.top() as T | null;
    }
    redoTop() {
        return this.rList.top() as T | null;
    }
    destroy() {
        this.uList.destroy();
        this.rList.destroy();
    }
}


type UndoRedoItem = { type: string; data: any }
const canvas = new fabric.Canvas("myCanvas");
const undoRedo = new UndoRedo<UndoRedoItem>();

// user select
undoRedo.push({ type: "select", data: "a" })
undoRedo.push({ type: "select", data: "b" })
// user create / delete
undoRedo.push({ type: "create", data: { width: 10 } })
undoRedo.push({ type: "delete", data:  { width: 10 } })

// undo [command + z]
const u = undoRedo.undo();
if (u?.type == "select") ...

// redo [command + shift + z]
const r = undoRedo.redo();
if (r?.type == "select") ...


// other: check
const u = undoRedo.undo();
const t = undoRedo.undoTop();
if (u?.type == "select" && t?.type == "create") ...

// other: abandon
const u = undoRedo.undo();
if (u?.type == "select") undoRedo.pop();

// say goodbye
undoRedo.destroy()