Question

I am using Raphael to draw some paths. Each path has an associated rectangle [container] the size and position of the bounding box. I am using the container for dragging both shapes.

In the move callback, I update the both positions so they both move together.

This all works great until I serialize. I am only serializing the path, then creating the container on the fly after deserialization.

Immediately after converting to json and back, things look fine. I can print out the current transform of the path and it looks correct. Doing any transform on the path after this results in the path being reset and moved to 0,0.

Here is a fiddle that shows the problem.

If you move the rect, you can see both objects move together.

If you click ‘Save/Load’, things look fine, and the path prints the same.

If you now drag, the path gets reset to 0,0. Printing shows the transform has been reset from 0,0.

I am trying to find out how to make the path move as it did before serialization. Is something getting lost in the process? Or is there an internal state that needs to be updated?

Answer 1

Raphael.JSON serialises data stored in the elements. It does not preserve temporary data stored in the paper object so something does indeed get lost in the process when calling R.clear(). For example drag events bound to elements are not preserved.

However the main issue here is with your drag function, notice how dragging the square a second time applies the transformation from the top left of the paper. I suggest using Raphael.FreeTransform (which you already included in the Fiddle) to handle this.

I wrote both Raphael.JSON and Raphael.FreeTransform plugins and have struggled with the same issues. I’m currently working on an application that lets you save save and restore the state of the paper (similar to what you’re doing) and it works fine. If you need any help feel free to open an issue on Github.