Paper.js: Export/Import JSON of Rasters at position (0,0) messes up transformations

[nicholaswmin]

Description

Adding a Raster at position 0, 0 causes Raster.exportJSON() to omit exporting the matrix as well, thus causing problems when reimporting that JSON later on.

Steps to reproduce

• Add a Raster at position at 0, 0
• Export the Raster as JSON
• Reimport the Raster as JSON
• Attempt to move the Raster, i.e via a mouseDrag function

Test Cases

Just drag the Raster with the mouse.

Not working

In this example, the Raster is positioned to 0,0 and the image 'flies' off when
dragging with the mouse.

Not working properly - Sketch

Working fine

In this example, the Raster is positioned to 1, 1 instead of 0, 0 thus it's working properly.

Working properly - Sketch

Expected result

Dragging the image with the mouse causes the image to follow the cursor. The image shouldn't 'fly' around but follow the cursor at the exact position.

Additional information

Reproducible on Chrome Canary, OSX Sierra

[sasensi]

Hi, thanks for the report.
It is actually a problem with item position which is inconsistently reseted or not depending of what was exported/imported.
Concerning your specific case, there is a simple workaround consisting in setting raster position to the event point rather than calculating translation from its actual position.
Here is the corrected sketch working with both 0,0 and 1,1 points.

About how to fix this, I made a sketch comparing all possible behaviours:

• with position set to 0,0 or to another point
• with matrix applied or not
• importing/exporting with JSON or SVG

@lehni, I would need an advice on what to do here :)

[lehni]

@sasensi can you tell me where the inconsistent resetting occurs? I'm not quite sure what to do about this either, need to understand it first :)

[sasensi]

@lehni, reducing the problem to the JSON case, the problem occurs when deserializing the item, matrix is reseted only if it was serialized. And it is not serialized in the case when it is null.
Here is a table comparing both cases evolution.

| matrix translation before serialization | matrix translation before deserialization | matrix translation after deserialization |
|-----------------------------------------|-------------------------------------------|------------------------------------------|
| 0,0 | 100,100 | 100,100 |
| 1,1 | 101,101 | 1,1 |

Is it clear ?