Two.js: initialize scale and translation(x,y) for the scene

[hichem147]

Hi,
I am using two.js to develop a graph editor. I came to save the graph, and load it.
When loading the graph, I need to start it at the saved situation, giving the user that nothing changed.

here is the jsfiddle
https://jsfiddle.net/hichem147/fdzn1u0x/

//the concerned code is :
var init_scene = {}; //<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

function SaveScene(){
init_scene = {scale: two.scene.scale, x: two.scene.translation.x, y: two.scene.translation.y};
}

function LoadScene(){
two.scene.flagReset();
two.scene.scale = init_scene.scale;
two.scene.translation.set(init_scene.x, init_scene.y);

two.update();

}

what happens is that when I save the scene parameters, I make some manipulations with the scene, and I click on load, it gets back to the saved situation, but, as soon as I drag the scene, there is bizarre changes. Could you please help me to get the good behaviour. Thanks man for your good work.

[jonobr1]

Hmmm, I'll take a look at this. I thought it would be one thing, but it didn't fix it. I'll report back. Thanks for posting!

[jonobr1]

Sorry for the delay. You're going to want to update to the latest version on the dev branch (link). And then also change the saving and loading to this:

function SaveScene(){
  init_scene = {
    elements: new Two.Array(9),
    zoom: zui.zoom,
    scale: zui.scale
  };
  init_scene.elements.set(zui.surfaceMatrix.elements);
}

function LoadScene(){

  zui.surfaceMatrix.set(init_scene.elements);
  zui.zoom = init_scene.zoom;
  zui.scale = init_scene.scale;

  zui.updateSurface();
  two.update();

}

[hichem147]

Thanks for your solution,
at the same time, in my case of graph editor, I don't use rotations.
I made some manipulations, I saw that the zui.surfaceMatrix.elements
is a matrix [z , 0 , offsetX], [0, z, offsetY], [0,0,1]
and the zui.zoom = z
and the zui.scale = Math.log(z)

for my case, I just need to store in the database for the save, the zoom factor z, the offsetX, and the offsetY as expected, and I can recalculate the elements.

putting a node in the screen center
I was even wondering how to do to make my page zoom to one node and put the node in the screen center, giving it the node (x, y real positions) and the zoom factor. I will experiment a little to see if I can do it with these elements.
Thanks for your help and thanks for your effort, keep doing well, two.js is great.