php - 实现撤消和重做功能 javascript 和 php

Question

我想为客户端和服务器端实现撤消和重做功能。例如，我有一个包含图像的 div，我可以旋转调整大小并重写它，图像生成的所有基本操作。并且所有操作都会更新数据库和图像。您可以说我的图像正在重新生成，并且每次操作后都会更新数据库。

现在我需要实现撤消和重做功能。我也做了一些研究。我需要的是如何实现所需任务的最佳方法。我正在考虑维护每个动作“日志类型的东西”或使用数据库或 javascript 数组（包括 HTML 或其他什么）来处理它？

实现我的目标的最佳方法是什么。

谢谢，

Answer 1

在基本层面上，您需要两件事：

• 一个操作堆栈（数组），它跟踪已执行的操作。当用户执行操作时，您创建一个描述该操作的对象并将其添加到数组中。当用户点击撤消时，您可以从数组中删除最后一项。

• 每种操作类型都需要一个“保存”方法和一个“撤消”方法。这可能会变得很棘手，因为某些“撤消”方法类似于它们的“保存”方法（即撤消水平翻转，您只需进行另一次翻转），而其他方法则没有这种对称性（即撤消裁剪，您必须将图像数据存储为裁剪发生之前的状态）。

如果您想要“重做”功能，那么您需要第二个操作堆栈。每次撤消操作时，您都会将其添加到重做堆栈的末尾。如果用户点击“重做”，那么您再次将其移回操作堆栈。

查看命令模式 (http://en.wikipedia.org/wiki/Command_pattern) 可能会有所帮助，因为这通常用于实现撤消。

Answer 2

我的 javascript 撤消管理器使用命令模式。基本上，对于每个操作，您还实现了一个撤消操作和一个重做操作。您可以在服务器端构建相同的功能。

https://github.com/ArthurClemens/Javascript-Undo-Manager

这是命令模式的清晰代码示例： https ://github.com/shichuan/javascript-patterns/blob/master/design-patterns/command.html

Answer 3

好吧，我为一个项目工作，我想在这里显示代码是可以的，我的场景可能不完全像 urs 但相似，所以我的情况是我存储了一个环境的状态，我想存储对这个环境的更改但是我决定不使用存储整个数组来存储我猜想的每一个不聪明的更改，所以我使用了一种称为JSON-Patch它的酷协议来监视 json 数组中的更改，并且我可以存储这些补丁，因为它们比我的大大批。

const jiff = require('jiff')

/**
 * @description function chacks the difference between two states and returns the differece to be stored
 * @param oldState @type Array
 * @param newState @type Array
 */

///note when changing from a to b your looking for what would make b a not a b
  const createAnOpp = (newState, oldState) => {
  // console.log("\n newState",newState)
  // console.log("\n oldState",oldState)
  // console.log("\n new opp", jiff.diff(  JSON.parse(JSON.stringify(newState)),JSON.parse(JSON.stringify(oldState))))
  return jiff.diff(  JSON.parse(JSON.stringify(newState)),JSON.parse(JSON.stringify(oldState)) )
};


/**
 * @description takes an operation  and applies the patch operation to data passed on by reference
 * @param opperation @type reference
 * @param data @type reference
 */
  const perfomOpp =(opperation,data )=>{
   return jiff.patch(opperation, data);
}

/**
 * @description applies the do redo or undo feature based on the command sent to it
 * @param code @type number 1 = redo 0 = undo
 * @param data @type Array
 * @param opperation
 * @returns an object which is the state and the redo opp { newOpp,latestState}
 */

  const performCall = (code,data,operation)=>{
  switch(code){
    case(0): ////undo
    {
      //patches on the list are stored to undo(go back to previous state)
      const latestState = perfomOpp(operation,data)
      //  console.log("\n latestState",latestState)
      //  console.log("\n oldState",data)

      return {
      latestState ,
       newOpp:createAnOpp(latestState,data)
      }

      break
    }


    case(1): ////redo
     {
      //patches on the list are stored to undo(go back to previous state)
       const latestState = perfomOpp(operation,data)
            // console.log('\n neww opp stage 1==>',createAnOpp(data,latestState))

      return {
      latestState ,
       newOpp:createAnOpp(latestState,data)
      }

      break



    }
  }

}


///init state
var a = [
    { name: 'a' },
    { name: 'b' },
    { name: 'c' },
]

console.log("\n current Array ", a)

var opps = []
var pointerToOps = 0

var b = a.slice();
b.push({ name: 'd' });
// console.log("\n b==>",b)
console.log("\n current Array ", b)


// Generate diff (ie JSON Patch) from a to b
var patch = createAnOpp(b, a);

opps.push(patch)//store the diff when its been changed
pointerToOps = opps.length - 1 
// console.log("\n opps1==>",JSON.stringify(opps))

//update the pointer

var c = b.slice();

c.push({ name: 'e' });
console.log("\n current Array ", c)

// console.log("\n c==>",c)

// Generate diff (ie JSON Patch) from a to b
var patch = createAnOpp(c, b);
opps.push(patch)//store the diff when its been changed
pointerToOps = opps.length - 1 
console.log("\n opp ", opps)


//update the pointer

//now ive applied change and what not time to undo

const newData = performCall(0,c,opps[pointerToOps])
// //now i have to go take a step back with the pointer 
opps[pointerToOps] = newData.newOpp//replacing undo opp with redo opp
pointerToOps = --pointerToOps 
// console.log("\n opps3==>",JSON.stringify(opps))
console.log("\n current Array ", newData.latestState)



const newData2 = performCall(0,newData.latestState,opps[pointerToOps])
//now i have to go take a step back with the pointer 
console.log("\n current Array ", newData2.latestState)
opps[pointerToOps] = newData2.newOpp//replacing undo opp with redo opp
pointerToOps = --pointerToOps 


pointerToOps = ++pointerToOps
const newData3 = performCall(1,newData2.latestState,opps[pointerToOps])
//now i have to go take a step back with the pointer 
opps[pointerToOps] = newData3.newOpp//replacing undo opp with redo opp

console.log("\n current Array ", newData3.latestState)

pointerToOps = ++pointerToOps
const newData4 = performCall(1,newData3.latestState,opps[pointerToOps])
//now i have to go take a step back with the pointer 
opps[pointerToOps] = newData4.newOpp//replacing undo opp with redo opp
console.log("\n current Array ", newData4.latestState)



console.log("\n opp ", opps)