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

Question

我不仅要在客户端而且要在服务器端实现撤消和重做功能。为了不让我有一个包含图像的div，我可以旋转调整大小并将其重写，所有用于图像生成的基本操作。并且所有操作都会更新数据库和图像。您可以说每次执行操作后都会重新生成我的图像并更新数据库。

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

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

谢谢，

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

好吧，我在一个项目上从事此工作，我想可以在这里显示代码了，我的情况可能与我们的情况不完全相同，所以我的情况是我存储了环境的状态，我想将更改存储到在这种环境下，但是我决定不使用每一个不明智的更改来存储整个数组，所以我想使用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)