Is it possible to undo changes in data() of an element?

[Hoogkamer]

In my application I have to possibilities to change colors, labels etc. So basically to change the data of an element. Is it possible to use the undo function for this?

cy.edges(':selected').data('line_color', val.hex)
cy.$id(val.id).data({
        name: val.name,
        description: val.description,
        additional_info: val.additional_info
})

[hasanbalci]

Yes, it is possible. I will point you to a sample usage in chise.js library developed under our organization.

• We first define a function that changes the data of elements here.
• We then define an action function to be used during undo-redo operation here. This action function uses the previously defined function inside.
• We then register this action to undo-redo extension with the name "changeData" as shown here.
• Finally, we call registered function to change the data as shown here.
• You can now call cy.undoRedo().undo(); and cy.undoRedo().redo(); to undo and redo your changes, respectively.

I hope that is helpful.

[Hoogkamer]

Thank you very much for your elaborate answer. I will try this out. Will there be support for changing data with a function in the future? Like: .do("data", obj)

[Hoogkamer]

For others my solution based an the code of hasanbalci: Create a file: extraUndo.js

var cy
function cyChangeData(eles, name, valueMap) {
  if (typeof valueMap === 'object') {
    cy.startBatch()
    for (var i = 0; i < eles.length; i++) {
      var ele = cy.getElementById(eles[i].id())
      ele.data(name, valueMap[ele.id()]) 
    }
    cy.endBatch()
  } else {
    eles.data(name, valueMap)
  }
}

function urChangeData(param) {
  var result = {}
  var eles = param.eles
  result.name = param.name
  result.valueMap = {}
  result.eles = eles

  for (var i = 0; i < eles.length; i++) {
    var ele = eles[i]
    result.valueMap[ele.id()] = ele.data(param.name)
  }
  cyChangeData(param.eles, param.name, param.valueMap)
  return result
}

function registerExtraUndo(ur, cy1) {
  cy = cy1
  ur.action('changeData', urChangeData, urChangeData)
}

export { registerExtraUndo }

Then include and use

import { registerAddUndo } from './extraUndo'
var undo = cy.undoRedo({
        isDebug: true
      })
registerExtraUndo(undo, cy)

 var param = {
    eles: cy.nodes(':selected'),
    valueMap: 'new name for all selected nodes',
    name: 'name'
  }

  cy.undoRedo().do('changeData', param)