init

nv/html/dwv/tests/state/readme.md

@@ -0,0 +1,14 @@
+State test data
+===============
+
+The state data has been linted using [jsonlint](https://www.npmjs.com/package/jsonlint).
+
+With default arguments (2 space indent) and in-place (-i): `jsonlint state.json -i`
+
+ * v0.1: states created with dwv [v0.15.0](https://github.com/ivmartel/dwv/releases/tag/v0.15.0)
+ * v0.2: states created with dwv [v0.17.0](https://github.com/ivmartel/dwv/releases/tag/v0.17.0)
+ * v0.3: states created with dwv [v0.23.0](https://github.com/ivmartel/dwv/releases/tag/v0.23.0)
+
+The single data states are based on the `\tests\state\bbmri-53323131.dcm` file. 
+
+The multi slice data states are based on the `\tests\data\bbmri-*.dcm` files (6 files).

nv/html/dwv/tests/state/state.test.js

@@ -0,0 +1,744 @@
+/**
+ * Tests for the 'app/state.js' file.
+ */
+/** @module tests/state */
+// Do not warn if these variables were not defined before.
+/* global QUnit */
+QUnit.module("state");
+
+/**
+ * Test a state file.
+ * @param {String} version The state format version.
+ * @param {String} type The type of drawing.
+ * @param {Object} assert The qunit assert.
+ */
+dwv.utils.test.TestState = function ( version, type, assert ) {
+    var done = assert.async();
+    // test file request
+    var request = new XMLHttpRequest();
+    var urlRoot = "https://raw.githubusercontent.com/ivmartel/dwv/master";
+    var url = urlRoot + "/tests/state/v" + version + "/state-" + type + ".json";
+    request.open('GET', url, true);
+    request.onerror = function (event) {
+        console.log(event);
+    };
+    request.onload = function (/*event*/) {
+        // status 200: "OK"; status 0: "debug"
+        if ( this.status !== 200 && this.status !== 0 ) {
+            assert.ok( false, "Error while loading test data." );
+            done();
+            return;
+        }
+        // read state
+        var state = new dwv.State();
+        var jsonData = state.fromJSON( this.responseText );
+        // check drawings values
+        dwv.utils.test.CheckDrawings(
+            jsonData.drawings, jsonData.drawingsDetails, version, type, assert );
+        // delete drawing to allow simple equal check
+        delete jsonData.drawings;
+        delete jsonData.drawingsDetails;
+        // check values expect drawings
+        dwv.utils.test.CheckStateHeader( jsonData, version, assert );
+        // finish async test
+        done();
+    };
+    // send request
+    request.send(null);
+};
+
+/**
+ * Check state header.
+ * @param {Object} jsonData The input data to check.
+ * @param {String} version The state format version.
+ * @param {Object} assert The qunit assert.
+ */
+dwv.utils.test.CheckStateHeader = function (jsonData, version, assert) {
+    // header data
+    var headerData = {
+        "version": version,
+        "window-center": 441,
+        "window-width": 911,
+        "position": { "i": 0, "j": 0, "k": 0 },
+        "scale": 1,
+        "scaleCenter": { "x": 0, "y": 0 },
+        "translation": { "x": 0,  "y": 0 }
+    };
+    assert.deepEqual( jsonData, headerData );
+};
+
+/**
+ * Check drawings.
+ * @param {Object} drawings The drawing object to check
+ * @param {Object} details The drawing details
+ * @param {String} version The state format version.
+ * @param {String} type The type of drawing.
+ * @param {Object} assert The qunit assert.
+ */
+dwv.utils.test.CheckDrawings = function (drawings, details, version, type, assert) {
+    // first level: layer
+    assert.equal( drawings.className, "Layer", "State drawings is a layer.");
+
+    // second level: position groups
+    if ( drawings.children.length === 5 &&
+        ( type === "ruler_multi-slice" || type === "line_multi-slice" ) ) {
+        dwv.utils.test.CheckRulerDrawings( drawings.children, details, version, assert );
+    } else if ( drawings.children.length === 1 ) {
+
+        var layerKid = drawings.children[0];
+        assert.equal( layerKid.className, "Group", "Layer first level is a group.");
+        assert.equal( layerKid.attrs.name, "position-group", "Layer first level is a position group.");
+        assert.equal( layerKid.attrs.id, "slice-0_frame-0", "Position group has the proper id.");
+
+        // third level: shape group(s)
+        var posGroupKid = layerKid.children[0];
+        assert.equal( posGroupKid.className, "Group", "Position group first level is a group.");
+
+        // shape specific checks
+        if ( type === "arrow" ) {
+            dwv.utils.test.CheckArrowDrawing( posGroupKid, details, version, assert );
+        } else if ( type === "ruler" && version !== "0.1" ) {
+            var refRuler = {
+                'id': "4gvkz8v6wzw",
+                'points': [51,135,216,134],
+                'colour': "#ffff80",
+                'text': "165.0mm",
+                'textExpr': "{length}",
+                'longText': "What a ruler!"
+            };
+            dwv.utils.test.CheckRulerDrawing( posGroupKid, details, refRuler, assert );
+        } else if ( type === "line" && version === "0.1" ) {
+            var refLine = {
+                'id': "4gvkz8v6wzw",
+                'points': [51,135,216,134],
+                'colour': "#ffff00",
+                'text': "165.0mm",
+                'textExpr': "{length}",
+                'longText': ""
+            };
+            dwv.utils.test.CheckRulerDrawing( posGroupKid, details, refLine, assert );
+        } else if ( type === "roi" ) {
+            dwv.utils.test.CheckRoiDrawing( posGroupKid, details, version, assert );
+        } else if ( type === "hand" ) {
+            dwv.utils.test.CheckHandDrawing( posGroupKid, details, version, assert );
+        } else if ( type === "ellipse" ) {
+            dwv.utils.test.CheckEllipseDrawing( posGroupKid, details, version, assert );
+        } else if ( type === "protractor" ) {
+            dwv.utils.test.CheckProtractorDrawing( posGroupKid, details, version, assert );
+        } else if ( type === "rectangle" ) {
+            dwv.utils.test.CheckRectangleDrawing( posGroupKid, details, version, assert );
+        } else {
+            assert.ok( false, "Unknown draw type." );
+        }
+    } else {
+        assert.ok( false, "Not the expected number of position groups." );
+    }
+};
+
+/**
+ * Check an arrow drawing.
+ * @param {Object} posGroupKid The position group (only) kid.
+ * @param {Object} details The drawing details
+ * @param {String} version The state format version.
+ * @param {Object} assert The qunit assert.
+ */
+dwv.utils.test.CheckArrowDrawing = function (posGroupKid, details, version, assert) {
+    // check group
+    assert.equal( posGroupKid.attrs.name, "line-group", "Shape group is a line group.");
+    assert.ok( posGroupKid.attrs.draggable, "Shape group must be draggable.");
+    assert.equal( posGroupKid.attrs.id, "pf8zteo5r4", "Position group first level has the proper id.");
+    assert.notEqual( typeof details.pf8zteo5r4, "undefined", "Details should contain data for id.");
+
+    // kids
+    assert.equal( posGroupKid.children.length, 3, "Shape group has 3 kids.");
+    var hasShape = false;
+    var hasLabel = false;
+    var hasPoly = false;
+    for ( var i = 0; i < posGroupKid.children.length; ++i ) {
+        var shapeGroupKid = posGroupKid.children[i];
+        if ( shapeGroupKid.attrs.name === "shape" ) {
+            hasShape = true;
+            assert.equal( shapeGroupKid.className, "Line", "Shape group 'shape' is a line.");
+            assert.notOk( shapeGroupKid.attrs.draggable, "Shape group 'shape' must not be draggable.");
+            assert.deepEqual( shapeGroupKid.attrs.points, [53, 136, 139, 89], "Line has the proper points.");
+            assert.equal( shapeGroupKid.attrs.stroke, "#ffff80", "Line has the proper colour.");
+        } else if ( shapeGroupKid.className === "Label" ) {
+            hasLabel = true;
+            assert.notOk( shapeGroupKid.attrs.draggable, "Shape group 'label' must not be draggable.");
+            assert.equal( shapeGroupKid.children.length, 2, "Label has 2 kids.");
+            var labelGroupKid0 = shapeGroupKid.children[0];
+            assert.equal( labelGroupKid0.className, "Text", "Label group first level is a text.");
+            assert.equal( labelGroupKid0.attrs.text, "Eye", "Text has the proper value.");
+            var labelGroupKid1 = shapeGroupKid.children[1];
+            assert.equal( labelGroupKid1.className, "Tag", "Label group second level is a tag.");
+        } else if ( shapeGroupKid.className === "RegularPolygon" ) {
+            hasPoly = true;
+            assert.notOk( shapeGroupKid.attrs.draggable, "Shape group 'extra' must not be draggable.");
+        }
+    }
+    assert.ok( hasShape, "Shape group contains a shape.");
+    assert.ok( hasLabel, "Shape group contains a label.");
+    assert.ok( hasPoly, "Shape group contains a polygon.");
+
+    // details
+    var details0 = details.pf8zteo5r4;
+    assert.equal( details0.textExpr, "Eye", "Details textExpr has the proper value.");
+    assert.equal( details0.longText, "This is an eye!", "Details longText has the proper value.");
+};
+
+/**
+ * Check a ruler drawing.
+ * @param {Object} posGroupKid The position group (only) kid.
+ * @param {Object} details The drawing details
+ * @param {String} ref The reference data to compare to.
+ * @param {Object} assert The qunit assert.
+ */
+dwv.utils.test.CheckRulerDrawing = function (posGroupKid, details, ref, assert) {
+    // check group
+    assert.equal( posGroupKid.attrs.name, "ruler-group", "Shape group is a ruler group.");
+    assert.ok( posGroupKid.attrs.draggable, "Shape group must be draggable.");
+    assert.equal( posGroupKid.attrs.id, ref.id, "Position group first level has the proper id.");
+    assert.notEqual( typeof details[ref.id], "undefined", "Details should contain data for id.");
+
+    // kids
+    assert.equal( posGroupKid.children.length, 4, "Shape group has 4 kids.");
+    var hasShape = false;
+    var hasLabel = false;
+    var hasTick1 = false;
+    var hasTick2 = false;
+    for ( var i = 0; i < posGroupKid.children.length; ++i ) {
+        var shapeGroupKid = posGroupKid.children[i];
+        if ( shapeGroupKid.attrs.name === "shape" ) {
+            hasShape = true;
+            assert.equal( shapeGroupKid.className, "Line", "Shape group 'shape' is a line.");
+            assert.notOk( shapeGroupKid.attrs.draggable, "Shape group 'shape' must not be draggable.");
+            assert.deepEqual( shapeGroupKid.attrs.points, ref.points, "Line has the proper points.");
+            assert.equal( shapeGroupKid.attrs.stroke, ref.colour, "Line has the proper colour.");
+        } else if ( shapeGroupKid.className === "Label" ) {
+            hasLabel = true;
+            assert.notOk( shapeGroupKid.attrs.draggable, "Shape group 'label' must not be draggable.");
+            assert.equal( shapeGroupKid.children.length, 2, "Label has 2 kids.");
+            var labelGroupKid0 = shapeGroupKid.children[0];
+            assert.equal( labelGroupKid0.className, "Text", "Label group first level is a text.");
+            assert.equal( labelGroupKid0.attrs.text, ref.text, "Text has the proper value.");
+            var labelGroupKid1 = shapeGroupKid.children[1];
+            assert.equal( labelGroupKid1.className, "Tag", "Label group second level is a tag.");
+        } else if ( shapeGroupKid.className === "Line" ) {
+            if ( hasTick1 ) {
+                hasTick2 = true;
+            } else {
+                hasTick1 = true;
+            }
+            assert.notOk( shapeGroupKid.attrs.draggable, "Shape group 'extra' must not be draggable.");
+        }
+    }
+    assert.ok( hasShape, "Shape group contains a shape.");
+    assert.ok( hasLabel, "Shape group contains a label.");
+    assert.ok( hasTick1, "Shape group contains a tick1.");
+    assert.ok( hasTick2, "Shape group contains a tick2.");
+
+    // details
+    var details0 = details[ref.id];
+    assert.equal( details0.textExpr, ref.textExpr, "Details textExpr has the proper value.");
+    assert.equal( details0.longText, ref.longText, "Details longText has the proper value.");
+};
+
+/**
+ * Check a multi slice ruler drawing.
+ * @param {Object} layer The draw layer.
+ * @param {Object} details The drawing details
+ * @param {String} version The state format version.
+ * @param {Object} assert The qunit assert.
+ */
+dwv.utils.test.CheckRulerDrawings = function (layerKids, details, version, assert) {
+
+    var ndraws = 5;
+    assert.equal( layerKids.length, ndraws, "Layer has " + ndraws + " kids.");
+
+    var refRulers = [
+        {
+            'id': "onzlkbs8p",
+            'points': [120,110,120,60],
+            'colour': "#ffff00",
+            'text': "50.00mm",
+            'textExpr': "{length}",
+            'longText': ( version === "0.1" ? "" : "First ruler." )
+        },
+        {
+            'id': "u9bvidgkjc9",
+            'points': [120,110,170,110],
+            'colour': "#ff0000",
+            'text': "50.00mm",
+            'textExpr': "{length}",
+            'longText': ( version === "0.1" ? "" : "Second ruler." )
+        },
+        {
+            'id': "c9abkegq62j",
+            'points': [120,110,120,160],
+            'colour': "#ffffff",
+            'text': "50.00mm",
+            'textExpr': "{length}",
+            'longText': ( version === "0.1" ? "" : "Third ruler." )
+        },
+        {
+            'id': "uiav43zjw1",
+            'points': [120,110,60,110],
+            'colour': "#00ff00",
+            'text': "50.00mm",
+            'textExpr': "{length}",
+            'longText': ( version === "0.1" ? "" : "Fourth ruler." )
+        },
+        {
+            'id': "26ir11b9ugl",
+            'points': [120,110,120,60],
+            'colour': "#ff00ff",
+            'text': "50.00mm",
+            'textExpr': "{length}",
+            'longText': ( version === "0.1" ? "" : "Fifth ruler." )
+        }
+    ];
+
+    for ( var i = 0; i < ndraws; ++i ) {
+        var layerKid = layerKids[i];
+        assert.equal( layerKid.className, "Group", "Layer first level is a group for slice " + i + ".");
+        assert.equal( layerKid.attrs.name, "position-group", "Layer first level is a position group.");
+        assert.equal( layerKid.attrs.id, "slice-" + (i+1) + "_frame-0", "Position group has the proper id.");
+
+        // third level: shape group(s)
+        var posGroupKid = layerKid.children[0];
+        assert.equal( posGroupKid.className, "Group", "Position group first level is a group.");
+
+        dwv.utils.test.CheckRulerDrawing( posGroupKid, details, refRulers[i], assert );
+    }
+};
+
+/**
+ * Check a roi drawing.
+ * @param {Object} posGroupKid The position group (only) kid.
+ * @param {Object} details The drawing details
+ * @param {String} version The state format version.
+ * @param {Object} assert The qunit assert.
+ */
+dwv.utils.test.CheckRoiDrawing = function (posGroupKid, details, version, assert) {
+    // check group
+    assert.equal( posGroupKid.attrs.name, "roi-group", "Shape group is a roi group.");
+    assert.ok( posGroupKid.attrs.draggable, "Shape group must be draggable.");
+    assert.equal( posGroupKid.attrs.id, "4l24ofouhmf", "Position group first level has the proper id.");
+    assert.notEqual( typeof details["4l24ofouhmf"], "undefined", "Details should contain data for id.");
+
+    // kids
+    assert.equal( posGroupKid.children.length, 2, "Shape group has 2 kids.");
+    var hasShape = false;
+    var hasLabel = false;
+    for ( var i = 0; i < posGroupKid.children.length; ++i ) {
+        var shapeGroupKid = posGroupKid.children[i];
+        if ( shapeGroupKid.attrs.name === "shape" ) {
+            hasShape = true;
+            assert.equal( shapeGroupKid.className, "Line", "Shape group 'shape' is a line.");
+            assert.notOk( shapeGroupKid.attrs.draggable, "Shape group 'shape' must not be draggable.");
+            assert.deepEqual( shapeGroupKid.attrs.points, [126, 40, 58, 80, 60, 116, 92, 128, 93, 143, 93, 151, 94, 151, 114, 150, 128, 150, 214, 135, 183, 56, 182, 56, 182, 56], "Line has the proper points.");
+            var colour = ( version === "0.1" ? "#ffff00" : "#ffff80" );
+            assert.equal( shapeGroupKid.attrs.stroke, colour, "Line has the proper colour.");
+        } else if ( shapeGroupKid.className === "Label" ) {
+            hasLabel = true;
+            assert.notOk( shapeGroupKid.attrs.draggable, "Shape group 'label' must not be draggable.");
+            assert.equal( shapeGroupKid.children.length, 2, "Label has 2 kids.");
+            var labelGroupKid0 = shapeGroupKid.children[0];
+            assert.equal( labelGroupKid0.className, "Text", "Label group first level is a text.");
+            if ( version !== "0.1" ) {
+                assert.equal( labelGroupKid0.attrs.text, "Brain", "Text has the proper value.");
+            }
+            var labelGroupKid1 = shapeGroupKid.children[1];
+            assert.equal( labelGroupKid1.className, "Tag", "Label group second level is a tag.");
+        }
+    }
+    assert.ok( hasShape, "Shape group contains a shape.");
+    assert.ok( hasLabel, "Shape group contains a label.");
+
+    // details
+    if ( version !== "0.1" ) {
+        var details0 = details["4l24ofouhmf"];
+        assert.equal( details0.textExpr, "Brain", "Details textExpr has the proper value.");
+        assert.equal( details0.longText, "This is a squary brain!", "Details longText has the proper value.");
+    }
+};
+
+/**
+ * Check a hand drawing.
+ * @param {Object} posGroupKid The position group (only) kid.
+ * @param {Object} details The drawing details
+ * @param {String} version The state format version.
+ * @param {Object} assert The qunit assert.
+ */
+dwv.utils.test.CheckHandDrawing = function (posGroupKid, details, version, assert) {
+    // check group
+    assert.equal( posGroupKid.attrs.name, "freeHand-group", "Shape group is a freeHand group.");
+    assert.ok( posGroupKid.attrs.draggable, "Shape group must be draggable.");
+    assert.equal( posGroupKid.attrs.id, "08m011yjp8je", "Position group first level has the proper id.");
+    assert.notEqual( typeof details["08m011yjp8je"], "undefined", "Details should contain data for id.");
+
+    // kids
+    assert.equal( posGroupKid.children.length, 2, "Shape group has 2 kids.");
+    var hasShape = false;
+    var hasLabel = false;
+    for ( var i = 0; i < posGroupKid.children.length; ++i ) {
+        var shapeGroupKid = posGroupKid.children[i];
+        if ( shapeGroupKid.attrs.name === "shape" ) {
+            hasShape = true;
+            assert.equal( shapeGroupKid.className, "Line", "Shape group 'shape' is a line.");
+            assert.notOk( shapeGroupKid.attrs.draggable, "Shape group 'shape' must not be draggable.");
+            assert.deepEqual( shapeGroupKid.attrs.points, [93,50,92,50,71,58,71,59,68,63,68,64,54,80,54,81,53,83,52,85,51,87,50,92,47,98,47,100,55,117,56,118,86,122,89,126,90,128,90,129,88,131,87,133,86,134,85,138,85,139,85,141,87,143,87,144,87,145,88,147,92,150,97,152,112,154,113,153,136,143,174,136,178,135,191,136,192,136,194,138,196,139,197,141,199,141,200,141,207,140,208,139,211,136,213,134,213,133,213,129,213,126,213,122,210,90,209,87,206,80,205,79,204,78,201,73,199,71,197,70,187,63,184,61,182,59,180,58,174,54,172,52,170,51,168,50,167,49,155,42,154,42,151,42,136,40,134,40,133,40,128,41,126,41,124,41,117,44,116,44,114,44,107,47,102,49,100,49,97,49,93,50,92,50,92,50], "Line has the proper points.");
+            assert.equal( shapeGroupKid.attrs.stroke, "#ffff80", "Line has the proper colour.");
+        } else if ( shapeGroupKid.className === "Label" ) {
+            hasLabel = true;
+            assert.notOk( shapeGroupKid.attrs.draggable, "Shape group 'label' must not be draggable.");
+            assert.equal( shapeGroupKid.children.length, 2, "Label has 2 kids.");
+            var labelGroupKid0 = shapeGroupKid.children[0];
+            assert.equal( labelGroupKid0.className, "Text", "Label group first level is a text.");
+            assert.equal( labelGroupKid0.attrs.text, "Brain", "Text has the proper value.");
+            var labelGroupKid1 = shapeGroupKid.children[1];
+            assert.equal( labelGroupKid1.className, "Tag", "Label group second level is a tag.");
+        }
+    }
+    assert.ok( hasShape, "Shape group contains a shape.");
+    assert.ok( hasLabel, "Shape group contains a label.");
+
+    // details
+    var details0 = details["08m011yjp8je"];
+    assert.equal( details0.textExpr, "Brain", "Details textExpr has the proper value.");
+    assert.equal( details0.longText, "This is a roundy brain!", "Details longText has the proper value.");
+};
+
+/**
+ * Check an ellipse drawing.
+ * @param {Object} posGroupKid The position group (only) kid.
+ * @param {Object} details The drawing details
+ * @param {String} version The state format version.
+ * @param {Object} assert The qunit assert.
+ */
+dwv.utils.test.CheckEllipseDrawing = function (posGroupKid, details, version, assert) {
+    // check group
+    assert.equal( posGroupKid.attrs.name, "ellipse-group", "Shape group is an ellipse group.");
+    assert.ok( posGroupKid.attrs.draggable, "Shape group must be draggable.");
+    assert.equal( posGroupKid.attrs.id, "c6j16qt6vt6", "Position group first level has the proper id.");
+    assert.notEqual( typeof details.c6j16qt6vt6, "undefined", "Details should contain data for id.");
+
+    // kids
+    assert.equal( posGroupKid.children.length, 2, "Shape group has 2 kids.");
+    var hasShape = false;
+    var hasLabel = false;
+    for ( var i = 0; i < posGroupKid.children.length; ++i ) {
+        var shapeGroupKid = posGroupKid.children[i];
+        if ( shapeGroupKid.attrs.name === "shape" ) {
+            hasShape = true;
+            assert.equal( shapeGroupKid.className, "Ellipse", "Shape group 'shape' is an ellipse.");
+            assert.notOk( shapeGroupKid.attrs.draggable, "Shape group 'shape' must not be draggable.");
+            assert.deepEqual( shapeGroupKid.attrs.x, 90, "Ellipse has the proper x.");
+            assert.deepEqual( shapeGroupKid.attrs.y, 78, "Ellipse has the proper y.");
+            assert.deepEqual( shapeGroupKid.attrs.radiusX, 53, "Ellipse has the proper radiusX.");
+            assert.deepEqual( shapeGroupKid.attrs.radiusY, 32, "Ellipse has the proper radiusY.");
+            var colour = ( version === "0.1" ? "#ffff00" : "#ffff80" );
+            assert.equal( shapeGroupKid.attrs.stroke, colour, "Ellipse has the proper colour.");
+        } else if ( shapeGroupKid.className === "Label" ) {
+            hasLabel = true;
+            assert.notOk( shapeGroupKid.attrs.draggable, "Shape group 'label' must not be draggable.");
+            assert.equal( shapeGroupKid.children.length, 2, "Label has 2 kids.");
+            var labelGroupKid0 = shapeGroupKid.children[0];
+            assert.equal( labelGroupKid0.className, "Text", "Label group first level is a text.");
+            assert.equal( labelGroupKid0.attrs.text, "53.28cm2", "Text has the proper value.");
+            var labelGroupKid1 = shapeGroupKid.children[1];
+            assert.equal( labelGroupKid1.className, "Tag", "Label group second level is a tag.");
+        }
+    }
+    assert.ok( hasShape, "Shape group contains a shape.");
+    assert.ok( hasLabel, "Shape group contains a label.");
+
+    // details
+    if ( version !== "0.1" ) {
+        var details0 = details.c6j16qt6vt6;
+        assert.equal( details0.textExpr, "{surface}", "Details textExpr has the proper value.");
+        assert.equal( details0.longText, "What a surface!", "Details longText has the proper value.");
+    }
+};
+
+/**
+ * Check a protractor drawing.
+ * @param {Object} posGroupKid The position group (only) kid.
+ * @param {Object} details The drawing details
+ * @param {String} version The state format version.
+ * @param {Object} assert The qunit assert.
+ */
+dwv.utils.test.CheckProtractorDrawing = function (posGroupKid, details, version, assert) {
+    // check group
+    assert.equal( posGroupKid.attrs.name, "protractor-group", "Shape group is an protractor group.");
+    assert.ok( posGroupKid.attrs.draggable, "Shape group must be draggable.");
+    assert.equal( posGroupKid.attrs.id, "49g7kqi3p4u", "Position group first level has the proper id.");
+    assert.notEqual( typeof details["49g7kqi3p4u"], "undefined", "Details should contain data for id.");
+
+    // kids
+    assert.equal( posGroupKid.children.length, 3, "Shape group has 3 kids.");
+    var hasShape = false;
+    var hasLabel = false;
+    var hasArc = false;
+    for ( var i = 0; i < posGroupKid.children.length; ++i ) {
+        var shapeGroupKid = posGroupKid.children[i];
+        if ( shapeGroupKid.attrs.name === "shape" ) {
+            hasShape = true;
+            assert.equal( shapeGroupKid.className, "Line", "Shape group 'shape' is a line.");
+            assert.notOk( shapeGroupKid.attrs.draggable, "Shape group 'shape' must not be draggable.");
+            assert.deepEqual( shapeGroupKid.attrs.points, [33,164,81,145,93,198], "Line has the proper points.");
+            var colour = ( version === "0.1" ? "#ffff00" : "#ffff80" );
+            assert.equal( shapeGroupKid.attrs.stroke, colour, "Line has the proper colour.");
+        } else if ( shapeGroupKid.className === "Label" ) {
+            hasLabel = true;
+            assert.notOk( shapeGroupKid.attrs.draggable, "Shape group 'label' must not be draggable.");
+            assert.equal( shapeGroupKid.children.length, 2, "Label has 2 kids.");
+            var labelGroupKid0 = shapeGroupKid.children[0];
+            assert.equal( labelGroupKid0.className, "Text", "Label group first level is a text.");
+            assert.equal( labelGroupKid0.attrs.text, "80.15°", "Text has the proper value.");
+            var labelGroupKid1 = shapeGroupKid.children[1];
+            assert.equal( labelGroupKid1.className, "Tag", "Label group second level is a tag.");
+        } else if ( shapeGroupKid.className === "Arc" ) {
+            hasArc = true;
+            assert.notOk( shapeGroupKid.attrs.draggable, "Shape group 'extra' must not be draggable.");
+        }
+    }
+    assert.ok( hasShape, "Shape group contains a shape.");
+    assert.ok( hasLabel, "Shape group contains a label.");
+    assert.ok( hasArc, "Shape group contains an arc.");
+
+    // details
+    if ( version !== "0.1" ) {
+        var details0 = details["49g7kqi3p4u"];
+        assert.equal( details0.textExpr, "{angle}", "Details textExpr has the proper value.");
+        assert.equal( details0.longText, "What an angle!", "Details longText has the proper value.");
+    }
+};
+
+/**
+ * Check a rectangle drawing.
+ * @param {Object} posGroupKid The position group (only) kid.
+ * @param {Object} details The drawing details
+ * @param {String} version The state format version.
+ * @param {Object} assert The qunit assert.
+ */
+dwv.utils.test.CheckRectangleDrawing = function (posGroupKid, details, version, assert) {
+    // check group
+    assert.equal( posGroupKid.attrs.name, "rectangle-group", "Shape group is a rectangle group.");
+    assert.ok( posGroupKid.attrs.draggable, "Shape group must be draggable.");
+    assert.equal( posGroupKid.attrs.id, "db0puu209qe", "Position group first level has the proper id.");
+    assert.notEqual( typeof details.db0puu209qe, "undefined", "Details should contain data for id.");
+
+    // kids
+    assert.equal( posGroupKid.children.length, 2, "Shape group has 2 kids.");
+    var hasShape = false;
+    var hasLabel = false;
+    for ( var i = 0; i < posGroupKid.children.length; ++i ) {
+        var shapeGroupKid = posGroupKid.children[i];
+        if ( shapeGroupKid.attrs.name === "shape" ) {
+            hasShape = true;
+            assert.equal( shapeGroupKid.className, "Rect", "Shape group 'shape' is a rectangle.");
+            assert.notOk( shapeGroupKid.attrs.draggable, "Shape group 'shape' must not be draggable.");
+            assert.deepEqual( shapeGroupKid.attrs.x, 80, "Rectangle has the proper x.");
+            assert.deepEqual( shapeGroupKid.attrs.y, 58, "Rectangle has the proper y.");
+            assert.deepEqual( shapeGroupKid.attrs.width, 104, "Rectangle has the proper width.");
+            assert.deepEqual( shapeGroupKid.attrs.height, 64, "Rectangle has the proper height.");
+            var colour = ( version === "0.1" ? "#ffff00" : "#ffff80" );
+            assert.equal( shapeGroupKid.attrs.stroke, colour, "Rectangle has the proper colour.");
+        } else if ( shapeGroupKid.className === "Label" ) {
+            hasLabel = true;
+            assert.notOk( shapeGroupKid.attrs.draggable, "Shape group 'label' must not be draggable.");
+            assert.equal( shapeGroupKid.children.length, 2, "Label has 2 kids.");
+            var labelGroupKid0 = shapeGroupKid.children[0];
+            assert.equal( labelGroupKid0.className, "Text", "Label group first level is a text.");
+            assert.equal( labelGroupKid0.attrs.text, "66.56cm2", "Text has the proper value.");
+            var labelGroupKid1 = shapeGroupKid.children[1];
+            assert.equal( labelGroupKid1.className, "Tag", "Label group second level is a tag.");
+        }
+    }
+    assert.ok( hasShape, "Shape group contains a shape.");
+    assert.ok( hasLabel, "Shape group contains a label.");
+
+    // details
+    if ( version !== "0.1" ) {
+        var details0 = details.db0puu209qe;
+        assert.equal( details0.textExpr, "{surface}", "Details textExpr has the proper value.");
+        assert.equal( details0.longText, "What a rectangle!", "Details longText has the proper value.");
+    }
+};
+
+/**
+ * Tests for {@link dwv.State} v0.1 containing a line.
+ * @function module:tests/state
+ */
+QUnit.test("Test read v0.1 state: line.", function (assert) {
+    dwv.utils.test.TestState( "0.1", "line", assert );
+});
+
+/**
+ * Tests for {@link dwv.State} v0.1 containing a roi.
+ * @function module:tests/state
+ */
+QUnit.test("Test read v0.1 state: roi.", function (assert) {
+    dwv.utils.test.TestState( "0.1", "roi", assert );
+});
+
+/**
+ * Tests for {@link dwv.State} v0.1 containing an ellipse.
+ * @function module:tests/state
+ */
+QUnit.test("Test read v0.1 state: ellipse.", function (assert) {
+    dwv.utils.test.TestState( "0.1", "ellipse", assert );
+});
+
+/**
+ * Tests for {@link dwv.State} v0.1 containing a protractor.
+ * @function module:tests/state
+ */
+QUnit.test("Test read v0.1 state: protractor.", function (assert) {
+    dwv.utils.test.TestState( "0.1", "protractor", assert );
+});
+
+/**
+ * Tests for {@link dwv.State} v0.1 containing a rectangle.
+ * @function module:tests/state
+ */
+QUnit.test("Test read v0.1 state: rectangle.", function (assert) {
+    dwv.utils.test.TestState( "0.1", "rectangle", assert );
+});
+
+/**
+ * Tests for {@link dwv.State} v0.1 containing a multi slice ruler.
+ * @function module:tests/state
+ */
+QUnit.test("Test read v0.1 state: line multi-slice.", function (assert) {
+    dwv.utils.test.TestState( "0.1", "line_multi-slice", assert );
+});
+
+/**
+ * Tests for {@link dwv.State} v0.2 containing an arrow.
+ * @function module:tests/state
+ */
+QUnit.test("Test read v0.2 state: arrow.", function (assert) {
+    dwv.utils.test.TestState( "0.2", "arrow", assert );
+});
+
+/**
+ * Tests for {@link dwv.State} v0.2 containing a ruler.
+ * @function module:tests/state
+ */
+QUnit.test("Test read v0.2 state: ruler.", function (assert) {
+    dwv.utils.test.TestState( "0.2", "ruler", assert );
+});
+
+/**
+ * Tests for {@link dwv.State} v0.2 containing a roi.
+ * @function module:tests/state
+ */
+QUnit.test("Test read v0.2 state: roi.", function (assert) {
+    dwv.utils.test.TestState( "0.2", "roi", assert );
+});
+
+/**
+ * Tests for {@link dwv.State} v0.2 containing a hand draw.
+ * @function module:tests/state
+ */
+QUnit.test("Test read v0.2 state: hand.", function (assert) {
+    dwv.utils.test.TestState( "0.2", "hand", assert );
+});
+
+/**
+ * Tests for {@link dwv.State} v0.2 containing an ellipse.
+ * @function module:tests/state
+ */
+QUnit.test("Test read v0.2 state: ellipse.", function (assert) {
+    dwv.utils.test.TestState( "0.2", "ellipse", assert );
+});
+
+/**
+ * Tests for {@link dwv.State} v0.2 containing a protractor.
+ * @function module:tests/state
+ */
+QUnit.test("Test read v0.2 state: protractor.", function (assert) {
+    dwv.utils.test.TestState( "0.2", "protractor", assert );
+});
+
+/**
+ * Tests for {@link dwv.State} v0.2 containing a rectangle.
+ * @function module:tests/state
+ */
+QUnit.test("Test read v0.2 state: rectangle.", function (assert) {
+    dwv.utils.test.TestState( "0.2", "rectangle", assert );
+});
+
+/**
+ * Tests for {@link dwv.State} v0.2 containing a multi slice ruler.
+ * @function module:tests/state
+ */
+QUnit.test("Test read v0.2 state: ruler multi-slice.", function (assert) {
+    dwv.utils.test.TestState( "0.2", "ruler_multi-slice", assert );
+});
+
+/**
+ * Tests for {@link dwv.State} v0.3 containing an arrow.
+ * @function module:tests/state
+ */
+QUnit.test("Test read v0.3 state: arrow.", function (assert) {
+    dwv.utils.test.TestState( "0.3", "arrow", assert );
+});
+
+/**
+ * Tests for {@link dwv.State} v0.3 containing a ruler.
+ * @function module:tests/state
+ */
+QUnit.test("Test read v0.3 state: ruler.", function (assert) {
+    dwv.utils.test.TestState( "0.3", "ruler", assert );
+});
+
+/**
+ * Tests for {@link dwv.State} v0.3 containing a roi.
+ * @function module:tests/state
+ */
+QUnit.test("Test read v0.3 state: roi.", function (assert) {
+    dwv.utils.test.TestState( "0.3", "roi", assert );
+});
+
+/**
+ * Tests for {@link dwv.State} v0.3 containing a hand draw.
+ * @function module:tests/state
+ */
+QUnit.test("Test read v0.3 state: hand.", function (assert) {
+    dwv.utils.test.TestState( "0.3", "hand", assert );
+});
+
+/**
+ * Tests for {@link dwv.State} v0.3 containing an ellipse.
+ * @function module:tests/state
+ */
+QUnit.test("Test read v0.3 state: ellipse.", function (assert) {
+    dwv.utils.test.TestState( "0.3", "ellipse", assert );
+});
+
+/**
+ * Tests for {@link dwv.State} v0.3 containing a protractor.
+ * @function module:tests/state
+ */
+QUnit.test("Test read v0.3 state: protractor.", function (assert) {
+    dwv.utils.test.TestState( "0.3", "protractor", assert );
+});
+
+/**
+ * Tests for {@link dwv.State} v0.3 containing a rectangle.
+ * @function module:tests/state
+ */
+QUnit.test("Test read v0.3 state: rectangle.", function (assert) {
+    dwv.utils.test.TestState( "0.3", "rectangle", assert );
+});
+
+/**
+ * Tests for {@link dwv.State} v0.3 containing a multi slice ruler.
+ * @function module:tests/state
+ */
+QUnit.test("Test read v0.3 state: ruler multi-slice.", function (assert) {
+    dwv.utils.test.TestState( "0.3", "ruler_multi-slice", assert );
+});

nv/html/dwv/tests/state/v0.1/state-ellipse.json

@@ -0,0 +1,27 @@
+{
+  "version": "0.1",
+  "window-center": 441,
+  "window-width": 911,
+  "position": {
+    "i": 0,
+    "j": 0,
+    "k": 0
+  },
+  "scale": 1,
+  "scaleCenter": {
+    "x": 0,
+    "y": 0
+  },
+  "translation": {
+    "x": 0,
+    "y": 0
+  },
+  "drawings": [
+    [
+      {
+        "0": "{\"attrs\":{\"name\":\"ellipse-group\",\"id\":\"c6j16qt6vt6\"},\"className\":\"Group\",\"children\":[{\"attrs\":{\"x\":90,\"y\":78,\"radiusX\":53,\"radiusY\":32,\"stroke\":\"Yellow\",\"strokeWidth\":0.9789674952198852,\"name\":\"shape\",\"draggable\":true},\"className\":\"Ellipse\"},{\"attrs\":{\"x\":90,\"y\":78,\"text\":\"53.28cm2\",\"fontSize\":5.873804971319312,\"fontFamily\":\"Verdana\",\"fill\":\"Yellow\",\"name\":\"text\",\"width\":\"auto\",\"height\":\"auto\"},\"className\":\"Text\"}]}",
+        "length": 1
+      }
+    ]
+  ]
+}

nv/html/dwv/tests/state/v0.1/state-line.json

@@ -0,0 +1,27 @@
+{
+  "version": "0.1",
+  "window-center": 441,
+  "window-width": 911,
+  "position": {
+    "i": 0,
+    "j": 0,
+    "k": 0
+  },
+  "scale": 1,
+  "scaleCenter": {
+    "x": 0,
+    "y": 0
+  },
+  "translation": {
+    "x": 0,
+    "y": 0
+  },
+  "drawings": [
+    [
+      {
+        "0": "{\"attrs\":{\"name\":\"line-group\",\"id\":\"4gvkz8v6wzw\"},\"className\":\"Group\",\"children\":[{\"attrs\":{\"points\":[51,135,216,134],\"stroke\":\"Yellow\",\"strokeWidth\":0.9789674952198852,\"name\":\"shape\",\"draggable\":true},\"className\":\"Line\"},{\"attrs\":{\"x\":184,\"y\":120,\"text\":\"165.0mm\",\"fontSize\":5.873804971319312,\"fontFamily\":\"Verdana\",\"fill\":\"Yellow\",\"name\":\"text\",\"width\":\"auto\",\"height\":\"auto\"},\"className\":\"Text\"}]}",
+        "length": 1
+      }
+    ]
+  ]
+}

nv/html/dwv/tests/state/v0.1/state-line_multi-slice.json

@@ -0,0 +1,56 @@
+{
+  "version": "0.1",
+  "window-center": 441,
+  "window-width": 911,
+  "position": {
+    "i": 0,
+    "j": 0,
+    "k": 0
+  },
+  "scale": 1,
+  "scaleCenter": {
+    "x": 0,
+    "y": 0
+  },
+  "translation": {
+    "x": 0,
+    "y": 0
+  },
+  "drawings": [
+    [
+      {
+        "length": 0
+      }
+    ],
+    [
+      {
+        "0": "{\"attrs\":{\"name\":\"line-group\",\"id\":\"onzlkbs8p\"},\"className\":\"Group\",\"children\":[{\"attrs\":{\"points\":[120,110,120,60],\"stroke\":\"Yellow\",\"strokeWidth\":1.4755043227665705,\"name\":\"shape\",\"draggable\":true},\"className\":\"Line\"},{\"attrs\":{\"x\":120,\"y\":45,\"text\":\"50.00mm\",\"fontSize\":8.853025936599424,\"fontFamily\":\"Verdana\",\"fill\":\"Yellow\",\"name\":\"text\",\"width\":\"auto\",\"height\":\"auto\"},\"className\":\"Text\"}]}",
+        "length": 1
+      }
+    ],
+    [
+      {
+        "0": "{\"attrs\":{\"name\":\"line-group\",\"id\":\"u9bvidgkjc9\"},\"className\":\"Group\",\"children\":[{\"attrs\":{\"points\":[120,110,170,110],\"stroke\":\"Red\",\"strokeWidth\":1.4755043227665705,\"name\":\"shape\"},\"className\":\"Line\"},{\"attrs\":{\"x\":155,\"y\":90,\"text\":\"50.00mm\",\"fontSize\":8.853025936599424,\"fontFamily\":\"Verdana\",\"fill\":\"Red\",\"name\":\"text\",\"width\":\"auto\",\"height\":\"auto\"},\"className\":\"Text\"}]}",
+        "length": 1
+      }
+    ],
+    [
+      {
+        "0": "{\"attrs\":{\"name\":\"line-group\",\"id\":\"c9abkegq62j\"},\"className\":\"Group\",\"children\":[{\"attrs\":{\"points\":[120,110,120,160],\"stroke\":\"White\",\"strokeWidth\":1.4755043227665705,\"name\":\"shape\"},\"className\":\"Line\"},{\"attrs\":{\"x\":120,\"y\":170,\"text\":\"50.00mm\",\"fontSize\":8.853025936599424,\"fontFamily\":\"Verdana\",\"fill\":\"White\",\"name\":\"text\",\"width\":\"auto\",\"height\":\"auto\"},\"className\":\"Text\"}]}",
+        "length": 1
+      }
+    ],
+    [
+      {
+        "0": "{\"attrs\":{\"name\":\"line-group\",\"id\":\"uiav43zjw1\"},\"className\":\"Group\",\"children\":[{\"attrs\":{\"points\":[120,110,60,110],\"stroke\":\"Lime\",\"strokeWidth\":1.4755043227665705,\"name\":\"shape\"},\"className\":\"Line\"},{\"attrs\":{\"x\":60,\"y\":120,\"text\":\"50.00mm\",\"fontSize\":8.853025936599424,\"fontFamily\":\"Verdana\",\"fill\":\"Lime\",\"name\":\"text\",\"width\":\"auto\",\"height\":\"auto\"},\"className\":\"Text\"}]}",
+        "length": 1
+      }
+    ],
+    [
+      {
+        "0": "{\"attrs\":{\"name\":\"line-group\",\"id\":\"26ir11b9ugl\"},\"className\":\"Group\",\"children\":[{\"attrs\":{\"points\":[120,110,120,60],\"stroke\":\"Fuchsia\",\"strokeWidth\":1.4755043227665705,\"name\":\"shape\"},\"className\":\"Line\"},{\"attrs\":{\"x\":120,\"y\":45,\"text\":\"50.00mm\",\"fontSize\":8.853025936599424,\"fontFamily\":\"Verdana\",\"fill\":\"Fuchsia\",\"name\":\"text\",\"width\":\"auto\",\"height\":\"auto\"},\"className\":\"Text\"}]}",
+        "length": 1
+      }
+    ]
+  ]
+}

nv/html/dwv/tests/state/v0.1/state-protractor.json

@@ -0,0 +1,27 @@
+{
+  "version": "0.1",
+  "window-center": 441,
+  "window-width": 911,
+  "position": {
+    "i": 0,
+    "j": 0,
+    "k": 0
+  },
+  "scale": 1,
+  "scaleCenter": {
+    "x": 0,
+    "y": 0
+  },
+  "translation": {
+    "x": 0,
+    "y": 0
+  },
+  "drawings": [
+    [
+      {
+        "0": "{\"attrs\":{\"name\":\"protractor-group\",\"id\":\"49g7kqi3p4u\"},\"className\":\"Group\",\"children\":[{\"attrs\":{\"points\":[33,164,81,145,93,198],\"stroke\":\"Yellow\",\"strokeWidth\":0.9789674952198852,\"name\":\"shape\",\"draggable\":true},\"className\":\"Line\"},{\"attrs\":{\"x\":72,\"y\":147.5,\"text\":\"80.15°\",\"fontSize\":5.873804971319312,\"fontFamily\":\"Verdana\",\"fill\":\"Yellow\",\"name\":\"text\",\"width\":\"auto\",\"height\":\"auto\"},\"className\":\"Text\"},{\"attrs\":{\"innerRadius\":17.112857451704066,\"outerRadius\":17.112857451704066,\"stroke\":\"Yellow\",\"strokeWidth\":0.9789674952198852,\"angle\":80.14855270325586,\"rotation\":-282.75753216087674,\"x\":81,\"y\":145,\"name\":\"arc\"},\"className\":\"Arc\"}]}",
+        "length": 1
+      }
+    ]
+  ]
+}

nv/html/dwv/tests/state/v0.1/state-rectangle.json

@@ -0,0 +1,27 @@
+{
+  "version": "0.1",
+  "window-center": 441,
+  "window-width": 911,
+  "position": {
+    "i": 0,
+    "j": 0,
+    "k": 0
+  },
+  "scale": 1,
+  "scaleCenter": {
+    "x": 0,
+    "y": 0
+  },
+  "translation": {
+    "x": 0,
+    "y": 0
+  },
+  "drawings": [
+    [
+      {
+        "0": "{\"attrs\":{\"name\":\"rectangle-group\",\"id\":\"db0puu209qe\"},\"className\":\"Group\",\"children\":[{\"attrs\":{\"x\":80,\"y\":58,\"width\":104,\"height\":64,\"stroke\":\"Yellow\",\"strokeWidth\":0.9789674952198852,\"name\":\"shape\",\"draggable\":true},\"className\":\"Rect\"},{\"attrs\":{\"x\":80,\"y\":132,\"text\":\"66.56cm2\",\"fontSize\":5.873804971319312,\"fontFamily\":\"Verdana\",\"fill\":\"Yellow\",\"name\":\"text\",\"width\":\"auto\",\"height\":\"auto\"},\"className\":\"Text\"}]}",
+        "length": 1
+      }
+    ]
+  ]
+}

nv/html/dwv/tests/state/v0.1/state-roi.json

@@ -0,0 +1,27 @@
+{
+  "version": "0.1",
+  "window-center": 441,
+  "window-width": 911,
+  "position": {
+    "i": 0,
+    "j": 0,
+    "k": 0
+  },
+  "scale": 1,
+  "scaleCenter": {
+    "x": 0,
+    "y": 0
+  },
+  "translation": {
+    "x": 0,
+    "y": 0
+  },
+  "drawings": [
+    [
+      {
+        "0": "{\"attrs\":{\"name\":\"roi-group\",\"id\":\"4l24ofouhmf\"},\"className\":\"Group\",\"children\":[{\"attrs\":{\"points\":[126,40,58,80,60,116,92,128,93,143,93,151,94,151,114,150,128,150,214,135,183,56,182,56,182,56],\"stroke\":\"Yellow\",\"strokeWidth\":0.9789674952198852,\"name\":\"shape\",\"closed\":true,\"draggable\":true},\"className\":\"Line\"}]}",
+        "length": 1
+      }
+    ]
+  ]
+}

nv/html/dwv/tests/state/v0.2/state-arrow.json

@@ -0,0 +1,39 @@
+{
+  "version": "0.2",
+  "window-center": 441,
+  "window-width": 911,
+  "position": {
+    "i": 0,
+    "j": 0,
+    "k": 0
+  },
+  "scale": 1,
+  "scaleCenter": {
+    "x": 0,
+    "y": 0
+  },
+  "translation": {
+    "x": 0,
+    "y": 0
+  },
+  "drawings": [
+    [
+      {
+        "0": "{\"attrs\":{\"name\":\"line-group\",\"visible\":true,\"id\":\"pf8zteo5r4\"},\"className\":\"Group\",\"children\":[{\"attrs\":{\"points\":[53,136,139,89],\"stroke\":\"#ffff80\",\"strokeWidth\":1.2610837438423645,\"name\":\"shape\",\"draggable\":true},\"className\":\"Line\"},{\"attrs\":{\"x\":57.38752668614738,\"y\":133.60216564826828,\"sides\":3,\"radius\":5,\"rotation\":-118.65711745655813,\"fill\":\"#ffff80\",\"strokeWidth\":1.2610837438423645,\"name\":\"shape-triangle\"},\"className\":\"RegularPolygon\"},{\"attrs\":{\"x\":114,\"y\":74,\"name\":\"label\"},\"className\":\"Label\",\"children\":[{\"attrs\":{\"fontSize\":7.566502463054187,\"fontFamily\":\"Verdana\",\"fill\":\"#ffff80\",\"name\":\"text\",\"text\":\"Eye\"},\"className\":\"Text\"},{\"attrs\":{\"width\":13.69140625,\"height\":7.566502463054187},\"className\":\"Tag\"}]}]}",
+        "length": 1
+      }
+    ]
+  ],
+  "drawingsDetails": [
+    [
+      [
+        {
+          "id": "pf8zteo5r4",
+          "textExpr": "Eye",
+          "longText": "This is an eye!",
+          "quant": null
+        }
+      ]
+    ]
+  ]
+}

nv/html/dwv/tests/state/v0.2/state-ellipse.json

@@ -0,0 +1,44 @@
+{
+  "version": "0.2",
+  "window-center": 441,
+  "window-width": 911,
+  "position": {
+    "i": 0,
+    "j": 0,
+    "k": 0
+  },
+  "scale": 1,
+  "scaleCenter": {
+    "x": 0,
+    "y": 0
+  },
+  "translation": {
+    "x": 0,
+    "y": 0
+  },
+  "drawings": [
+    [
+      {
+        "0": "{\"attrs\":{\"name\":\"ellipse-group\",\"visible\":true,\"id\":\"c6j16qt6vt6\"},\"className\":\"Group\",\"children\":[{\"attrs\":{\"x\":90,\"y\":78,\"radiusX\":53,\"radiusY\":32,\"stroke\":\"#ffff80\",\"strokeWidth\":1.2610837438423645,\"name\":\"shape\",\"draggable\":true},\"className\":\"Ellipse\"},{\"attrs\":{\"x\":90,\"y\":78,\"name\":\"label\"},\"className\":\"Label\",\"children\":[{\"attrs\":{\"fontSize\":7.566502463054187,\"fontFamily\":\"Verdana\",\"fill\":\"#ffff80\",\"name\":\"text\",\"text\":\"53.28cm2\"},\"className\":\"Text\"},{\"attrs\":{\"width\":40.73088073730469,\"height\":7.566502463054187},\"className\":\"Tag\"}]}]}",
+        "length": 1
+      }
+    ]
+  ],
+  "drawingsDetails": [
+    [
+      [
+        {
+          "id": "c6j16qt6vt6",
+          "textExpr": "{surface}",
+          "longText": "What a surface!",
+          "quant": {
+            "surface": {
+              "value": 53.281411404882896,
+              "unit": "cm2"
+            }
+          }
+        }
+      ]
+    ]
+  ]
+}

nv/html/dwv/tests/state/v0.2/state-hand.json

@@ -0,0 +1,39 @@
+{
+  "version": "0.2",
+  "window-center": 441,
+  "window-width": 911,
+  "position": {
+    "i": 0,
+    "j": 0,
+    "k": 0
+  },
+  "scale": 1,
+  "scaleCenter": {
+    "x": 0,
+    "y": 0
+  },
+  "translation": {
+    "x": 0,
+    "y": 0
+  },
+  "drawings": [
+    [
+      {
+        "0": "{\"attrs\":{\"name\":\"freeHand-group\",\"visible\":true,\"id\":\"08m011yjp8je\"},\"className\":\"Group\",\"children\":[{\"attrs\":{\"points\":[93,50,92,50,71,58,71,59,68,63,68,64,54,80,54,81,53,83,52,85,51,87,50,92,47,98,47,100,55,117,56,118,86,122,89,126,90,128,90,129,88,131,87,133,86,134,85,138,85,139,85,141,87,143,87,144,87,145,88,147,92,150,97,152,112,154,113,153,136,143,174,136,178,135,191,136,192,136,194,138,196,139,197,141,199,141,200,141,207,140,208,139,211,136,213,134,213,133,213,129,213,126,213,122,210,90,209,87,206,80,205,79,204,78,201,73,199,71,197,70,187,63,184,61,182,59,180,58,174,54,172,52,170,51,168,50,167,49,155,42,154,42,151,42,136,40,134,40,133,40,128,41,126,41,124,41,117,44,116,44,114,44,107,47,102,49,100,49,97,49,93,50,92,50,92,50],\"stroke\":\"#ffff80\",\"strokeWidth\":1.2610837438423645,\"name\":\"shape\",\"tension\":0.5,\"draggable\":true},\"className\":\"Line\"},{\"attrs\":{\"x\":93,\"y\":60,\"name\":\"label\"},\"className\":\"Label\",\"children\":[{\"attrs\":{\"fontSize\":7.566502463054187,\"fontFamily\":\"Verdana\",\"fill\":\"#ffff80\",\"name\":\"text\",\"text\":\"Brain\"},\"className\":\"Text\"},{\"attrs\":{\"height\":7.566502463054187},\"className\":\"Tag\"}]}]}",
+        "length": 1
+      }
+    ]
+  ],
+  "drawingsDetails": [
+    [
+      [
+        {
+          "id": "08m011yjp8je",
+          "textExpr": "Brain",
+          "longText": "This is a roundy brain!",
+          "quant": null
+        }
+      ]
+    ]
+  ]
+}

nv/html/dwv/tests/state/v0.2/state-protractor.json

@@ -0,0 +1,44 @@
+{
+  "version": "0.2",
+  "window-center": 441,
+  "window-width": 911,
+  "position": {
+    "i": 0,
+    "j": 0,
+    "k": 0
+  },
+  "scale": 1,
+  "scaleCenter": {
+    "x": 0,
+    "y": 0
+  },
+  "translation": {
+    "x": 0,
+    "y": 0
+  },
+  "drawings": [
+    [
+      {
+        "0": "{\"attrs\":{\"name\":\"protractor-group\",\"visible\":true,\"id\":\"49g7kqi3p4u\"},\"className\":\"Group\",\"children\":[{\"attrs\":{\"points\":[33,164,81,145,93,198],\"stroke\":\"#ffff80\",\"strokeWidth\":1.2610837438423645,\"name\":\"shape\",\"draggable\":true},\"className\":\"Line\"},{\"attrs\":{\"x\":72,\"y\":147.5,\"name\":\"label\"},\"className\":\"Label\",\"children\":[{\"attrs\":{\"fontSize\":7.566502463054187,\"fontFamily\":\"Verdana\",\"fill\":\"#ffff80\",\"name\":\"text\",\"text\":\"80.15°\"},\"className\":\"Text\"},{\"attrs\":{\"width\":28.730148315429688,\"height\":7.566502463054187},\"className\":\"Tag\"}]},{\"attrs\":{\"innerRadius\":17.112857451704066,\"outerRadius\":17.112857451704066,\"stroke\":\"#ffff80\",\"strokeWidth\":1.2610837438423645,\"angle\":80.14855270325586,\"rotation\":-282.75753216087674,\"x\":81,\"y\":145,\"name\":\"shape-arc\"},\"className\":\"Arc\"}]}",
+        "length": 1
+      }
+    ]
+  ],
+  "drawingsDetails": [
+    [
+      [
+        {
+          "id": "49g7kqi3p4u",
+          "textExpr": "{angle}",
+          "longText": "What an angle!",
+          "quant": {
+            "angle": {
+              "value": 80.14855270325586,
+              "unit": "°"
+            }
+          }
+        }
+      ]
+    ]
+  ]
+}

nv/html/dwv/tests/state/v0.2/state-rectangle.json

@@ -0,0 +1,60 @@
+{
+  "version": "0.2",
+  "window-center": 441,
+  "window-width": 911,
+  "position": {
+    "i": 0,
+    "j": 0,
+    "k": 0
+  },
+  "scale": 1,
+  "scaleCenter": {
+    "x": 0,
+    "y": 0
+  },
+  "translation": {
+    "x": 0,
+    "y": 0
+  },
+  "drawings": [
+    [
+      {
+        "0": "{\"attrs\":{\"name\":\"rectangle-group\",\"visible\":true,\"id\":\"db0puu209qe\"},\"className\":\"Group\",\"children\":[{\"attrs\":{\"x\":80,\"y\":58,\"width\":104,\"height\":64,\"stroke\":\"#ffff80\",\"strokeWidth\":1.2610837438423645,\"name\":\"shape\",\"draggable\":true},\"className\":\"Rect\"},{\"attrs\":{\"x\":80,\"y\":132,\"name\":\"label\"},\"className\":\"Label\",\"children\":[{\"attrs\":{\"fontSize\":7.566502463054187,\"fontFamily\":\"Verdana\",\"fill\":\"#ffff80\",\"name\":\"text\",\"text\":\"66.56cm2\"},\"className\":\"Text\"},{\"attrs\":{\"width\":40.73088073730469,\"height\":7.566502463054187},\"className\":\"Tag\"}]}]}",
+        "length": 1
+      }
+    ]
+  ],
+  "drawingsDetails": [
+    [
+      [
+        {
+          "id": "db0puu209qe",
+          "textExpr": "{surface}",
+          "longText": "What a rectangle!",
+          "quant": {
+            "surface": {
+              "value": 66.56,
+              "unit": "cm2"
+            },
+            "min": {
+              "value": 45,
+              "unit": ""
+            },
+            "max": {
+              "value": 602,
+              "unit": ""
+            },
+            "mean": {
+              "value": 393.77989783653845,
+              "unit": ""
+            },
+            "stdDev": {
+              "value": 91.9374530590746,
+              "unit": ""
+            }
+          }
+        }
+      ]
+    ]
+  ]
+}

nv/html/dwv/tests/state/v0.2/state-roi.json

@@ -0,0 +1,39 @@
+{
+  "version": "0.2",
+  "window-center": 441,
+  "window-width": 911,
+  "position": {
+    "i": 0,
+    "j": 0,
+    "k": 0
+  },
+  "scale": 1,
+  "scaleCenter": {
+    "x": 0,
+    "y": 0
+  },
+  "translation": {
+    "x": 0,
+    "y": 0
+  },
+  "drawings": [
+    [
+      {
+        "0": "{\"attrs\":{\"name\":\"roi-group\",\"visible\":true,\"id\":\"4l24ofouhmf\"},\"className\":\"Group\",\"children\":[{\"attrs\":{\"points\":[126,40,58,80,60,116,92,128,93,143,93,151,94,151,114,150,128,150,214,135,183,56,182,56,182,56],\"stroke\":\"#ffff80\",\"strokeWidth\":1.2610837438423645,\"name\":\"shape\",\"closed\":true,\"draggable\":true},\"className\":\"Line\"},{\"attrs\":{\"x\":126,\"y\":50,\"name\":\"label\"},\"className\":\"Label\",\"children\":[{\"attrs\":{\"fontSize\":7.566502463054187,\"fontFamily\":\"Verdana\",\"fill\":\"#ffff80\",\"name\":\"text\",\"text\":\"Brain\"},\"className\":\"Text\"},{\"attrs\":{\"height\":7.566502463054187},\"className\":\"Tag\"}]}]}",
+        "length": 1
+      }
+    ]
+  ],
+  "drawingsDetails": [
+    [
+      [
+        {
+          "id": "4l24ofouhmf",
+          "textExpr": "Brain",
+          "longText": "This is a squary brain!",
+          "quant": null
+        }
+      ]
+    ]
+  ]
+}

nv/html/dwv/tests/state/v0.2/state-ruler.json

@@ -0,0 +1,44 @@
+{
+  "version": "0.2",
+  "window-center": 441,
+  "window-width": 911,
+  "position": {
+    "i": 0,
+    "j": 0,
+    "k": 0
+  },
+  "scale": 1,
+  "scaleCenter": {
+    "x": 0,
+    "y": 0
+  },
+  "translation": {
+    "x": 0,
+    "y": 0
+  },
+  "drawings": [
+    [
+      {
+        "0": "{\"attrs\":{\"name\":\"ruler-group\",\"visible\":true,\"id\":\"4gvkz8v6wzw\"},\"className\":\"Group\",\"children\":[{\"attrs\":{\"points\":[51,135,216,134],\"stroke\":\"#ffff80\",\"strokeWidth\":1.2610837438423645,\"name\":\"shape\",\"draggable\":true},\"className\":\"Line\"},{\"attrs\":{\"points\":[50.96969752621112,130.00009182483518,51.03030247378888,139.99990817516482],\"stroke\":\"#ffff80\",\"strokeWidth\":1.2610837438423645,\"name\":\"shape-tick0\"},\"className\":\"Line\"},{\"attrs\":{\"points\":[215.96969752621112,129.00009182483336,216.03030247378888,138.99990817516664],\"stroke\":\"#ffff80\",\"strokeWidth\":1.2610837438423645,\"name\":\"shape-tick1\"},\"className\":\"Line\"},{\"attrs\":{\"x\":191,\"y\":119,\"name\":\"label\"},\"className\":\"Label\",\"children\":[{\"attrs\":{\"fontSize\":7.566502463054187,\"fontFamily\":\"Verdana\",\"fill\":\"#ffff80\",\"name\":\"text\",\"text\":\"165.0mm\"},\"className\":\"Text\"},{\"attrs\":{\"width\":39.3392333984375,\"height\":7.566502463054187},\"className\":\"Tag\"}]}]}",
+        "length": 1
+      }
+    ]
+  ],
+  "drawingsDetails": [
+    [
+      [
+        {
+          "id": "4gvkz8v6wzw",
+          "textExpr": "{length}",
+          "longText": "What a ruler!",
+          "quant": {
+            "length": {
+              "value": 165.00303027520434,
+              "unit": "mm"
+            }
+          }
+        }
+      ]
+    ]
+  ]
+}

nv/html/dwv/tests/state/v0.2/state-ruler_multi-slice.json

@@ -0,0 +1,136 @@
+{
+  "version": "0.2",
+  "window-center": 441,
+  "window-width": 911,
+  "position": {
+    "i": 0,
+    "j": 0,
+    "k": 0
+  },
+  "scale": 1,
+  "scaleCenter": {
+    "x": 0,
+    "y": 0
+  },
+  "translation": {
+    "x": 0,
+    "y": 0
+  },
+  "drawings": [
+    [
+      {
+        "length": 0
+      }
+    ],
+    [
+      {
+        "0": "{\"attrs\":{\"name\":\"ruler-group\",\"visible\":true,\"id\":\"onzlkbs8p\"},\"className\":\"Group\",\"children\":[{\"attrs\":{\"points\":[120,110,120,60],\"stroke\":\"#ffff00\",\"strokeWidth\":1.4301675977653632,\"name\":\"shape\"},\"className\":\"Line\"},{\"attrs\":{\"points\":[115,60,125,60],\"stroke\":\"#ffff00\",\"strokeWidth\":1.4301675977653632,\"name\":\"shape-tick0\"},\"className\":\"Line\"},{\"attrs\":{\"points\":[115,110,125,110],\"stroke\":\"#ffff00\",\"strokeWidth\":1.4301675977653632,\"name\":\"shape-tick1\"},\"className\":\"Line\"},{\"attrs\":{\"x\":120,\"y\":45,\"name\":\"label\"},\"className\":\"Label\",\"children\":[{\"attrs\":{\"fontSize\":8.581005586592179,\"fontFamily\":\"Verdana\",\"fill\":\"#ffff00\",\"name\":\"text\",\"width\":\"auto\",\"height\":\"auto\",\"text\":\"50.00mm\"},\"className\":\"Text\"},{\"attrs\":{\"width\":44.64697265625,\"height\":8.581005586592179},\"className\":\"Tag\"}]}]}",
+        "length": 1
+      }
+    ],
+    [
+      {
+        "0": "{\"attrs\":{\"name\":\"ruler-group\",\"visible\":true,\"id\":\"u9bvidgkjc9\"},\"className\":\"Group\",\"children\":[{\"attrs\":{\"points\":[120,110,170,110],\"stroke\":\"#ff0000\",\"strokeWidth\":1.4301675977653632,\"name\":\"shape\"},\"className\":\"Line\"},{\"attrs\":{\"points\":[120,115,120,105],\"stroke\":\"#ff0000\",\"strokeWidth\":1.4301675977653632,\"name\":\"shape-tick0\"},\"className\":\"Line\"},{\"attrs\":{\"points\":[170,115,170,105],\"stroke\":\"#ff0000\",\"strokeWidth\":1.4301675977653632,\"name\":\"shape-tick1\"},\"className\":\"Line\"},{\"attrs\":{\"x\":155,\"y\":90,\"name\":\"label\"},\"className\":\"Label\",\"children\":[{\"attrs\":{\"fontSize\":8.581005586592179,\"fontFamily\":\"Verdana\",\"fill\":\"#ff0000\",\"name\":\"text\",\"width\":\"auto\",\"height\":\"auto\",\"text\":\"50.00mm\"},\"className\":\"Text\"},{\"attrs\":{\"width\":44.64697265625,\"height\":8.581005586592179},\"className\":\"Tag\"}]}]}",
+        "length": 1
+      }
+    ],
+    [
+      {
+        "0": "{\"attrs\":{\"name\":\"ruler-group\",\"visible\":true,\"id\":\"c9abkegq62j\"},\"className\":\"Group\",\"children\":[{\"attrs\":{\"points\":[120,110,120,160],\"stroke\":\"#ffffff\",\"strokeWidth\":1.4301675977653632,\"name\":\"shape\"},\"className\":\"Line\"},{\"attrs\":{\"points\":[115,110,125,110],\"stroke\":\"#ffffff\",\"strokeWidth\":1.4301675977653632,\"name\":\"shape-tick0\"},\"className\":\"Line\"},{\"attrs\":{\"points\":[115,160,125,160],\"stroke\":\"#ffffff\",\"strokeWidth\":1.4301675977653632,\"name\":\"shape-tick1\"},\"className\":\"Line\"},{\"attrs\":{\"x\":116,\"y\":167.5,\"name\":\"label\"},\"className\":\"Label\",\"children\":[{\"attrs\":{\"fontSize\":8.581005586592179,\"fontFamily\":\"Verdana\",\"fill\":\"#ffffff\",\"name\":\"text\",\"width\":\"auto\",\"height\":\"auto\",\"text\":\"50.00mm\"},\"className\":\"Text\"},{\"attrs\":{\"width\":44.64697265625,\"height\":8.581005586592179},\"className\":\"Tag\"}]}]}",
+        "length": 1
+      }
+    ],
+    [
+      {
+        "0": "{\"attrs\":{\"name\":\"ruler-group\",\"visible\":true,\"id\":\"uiav43zjw1\"},\"className\":\"Group\",\"children\":[{\"attrs\":{\"points\":[120,110,60,110],\"stroke\":\"#00ff00\",\"strokeWidth\":1.4301675977653632,\"name\":\"shape\"},\"className\":\"Line\"},{\"attrs\":{\"points\":[120,105,120,115],\"stroke\":\"#00ff00\",\"strokeWidth\":1.4301675977653632,\"name\":\"shape-tick0\"},\"className\":\"Line\"},{\"attrs\":{\"points\":[60,105,60,115],\"stroke\":\"#00ff00\",\"strokeWidth\":1.4301675977653632,\"name\":\"shape-tick1\"},\"className\":\"Line\"},{\"attrs\":{\"x\":52,\"y\":87,\"name\":\"label\"},\"className\":\"Label\",\"children\":[{\"attrs\":{\"fontSize\":8.581005586592179,\"fontFamily\":\"Verdana\",\"fill\":\"#00ff00\",\"name\":\"text\",\"width\":\"auto\",\"height\":\"auto\",\"text\":\"50.00mm\"},\"className\":\"Text\"},{\"attrs\":{\"width\":44.64697265625,\"height\":8.581005586592179},\"className\":\"Tag\"}]}]}",
+        "length": 1
+      }
+    ],
+    [
+      {
+        "0": "{\"attrs\":{\"name\":\"ruler-group\",\"visible\":true,\"id\":\"26ir11b9ugl\"},\"className\":\"Group\",\"children\":[{\"attrs\":{\"points\":[120,110,120,60],\"stroke\":\"#ff00ff\",\"strokeWidth\":1.4301675977653632,\"name\":\"shape\",\"draggable\":true},\"className\":\"Line\"},{\"attrs\":{\"points\":[115,60,125,60],\"stroke\":\"#ff00ff\",\"strokeWidth\":1.4301675977653632,\"name\":\"shape-tick0\"},\"className\":\"Line\"},{\"attrs\":{\"points\":[115,110,125,110],\"stroke\":\"#ff00ff\",\"strokeWidth\":1.4301675977653632,\"name\":\"shape-tick1\"},\"className\":\"Line\"},{\"attrs\":{\"x\":95,\"y\":124.5,\"name\":\"label\"},\"className\":\"Label\",\"children\":[{\"attrs\":{\"fontSize\":8.581005586592179,\"fontFamily\":\"Verdana\",\"fill\":\"#ff00ff\",\"name\":\"text\",\"width\":\"auto\",\"height\":\"auto\",\"text\":\"50.00mm\"},\"className\":\"Text\"},{\"attrs\":{\"width\":44.64697265625,\"height\":8.581005586592179},\"className\":\"Tag\"}]}]}",
+        "length": 1
+      }
+    ]
+  ],
+  "drawingsDetails": [
+    [
+      []
+    ],
+    [
+      [
+        {
+          "id": "onzlkbs8p",
+          "textExpr": "{length}",
+          "longText": "First ruler.",
+          "quant": {
+            "length": {
+              "value": 50,
+              "unit": "mm"
+            }
+          }
+        }
+      ]
+    ],
+    [
+      [
+        {
+          "id": "u9bvidgkjc9",
+          "textExpr": "{length}",
+          "longText": "Second ruler.",
+          "quant": {
+            "length": {
+              "value": 50,
+              "unit": "mm"
+            }
+          }
+        }
+      ]
+    ],
+    [
+      [
+        {
+          "id": "c9abkegq62j",
+          "textExpr": "{length}",
+          "longText": "Third ruler.",
+          "quant": {
+            "length": {
+              "value": 50,
+              "unit": "mm"
+            }
+          }
+        }
+      ]
+    ],
+    [
+      [
+        {
+          "id": "uiav43zjw1",
+          "textExpr": "{length}",
+          "longText": "Fourth ruler.",
+          "quant": {
+            "length": {
+              "value": 50,
+              "unit": "mm"
+            }
+          }
+        }
+      ]
+    ],
+    [
+      [
+        {
+          "id": "26ir11b9ugl",
+          "textExpr": "{length}",
+          "longText": "Fifth ruler.",
+          "quant": {
+            "length": {
+              "value": 50,
+              "unit": "mm"
+            }
+          }
+        }
+      ]
+    ]
+  ]
+}

nv/html/dwv/tests/state/v0.3/state-arrow.json

@@ -0,0 +1,110 @@
+{
+  "version": "0.3",
+  "window-center": 441,
+  "window-width": 911,
+  "position": {
+    "i": 0,
+    "j": 0,
+    "k": 0
+  },
+  "scale": 1,
+  "scaleCenter": {
+    "x": 0,
+    "y": 0
+  },
+  "translation": {
+    "x": 0,
+    "y": 0
+  },
+  "drawings": {
+    "attrs": {
+      "listening": true,
+      "visible": true
+    },
+    "className": "Layer",
+    "children": [
+      {
+        "attrs": {
+          "name": "position-group",
+          "id": "slice-0_frame-0",
+          "visible": true
+        },
+        "className": "Group",
+        "children": [
+          {
+            "attrs": {
+              "name": "line-group",
+              "visible": true,
+              "id": "pf8zteo5r4",
+              "draggable": true
+            },
+            "className": "Group",
+            "children": [
+              {
+                "attrs": {
+                  "points": [
+                    53,
+                    136,
+                    139,
+                    89
+                  ],
+                  "stroke": "#ffff80",
+                  "strokeWidth": 1.2610837438423645,
+                  "name": "shape"
+                },
+                "className": "Line"
+              },
+              {
+                "attrs": {
+                  "x": 57.38752668614738,
+                  "y": 133.60216564826828,
+                  "sides": 3,
+                  "radius": 5,
+                  "rotation": -118.65711745655813,
+                  "fill": "#ffff80",
+                  "strokeWidth": 1.2610837438423645,
+                  "name": "shape-triangle"
+                },
+                "className": "RegularPolygon"
+              },
+              {
+                "attrs": {
+                  "x": 114,
+                  "y": 74,
+                  "name": "label"
+                },
+                "className": "Label",
+                "children": [
+                  {
+                    "attrs": {
+                      "fontSize": 7.566502463054187,
+                      "fontFamily": "Verdana",
+                      "fill": "#ffff80",
+                      "name": "text",
+                      "text": "Eye"
+                    },
+                    "className": "Text"
+                  },
+                  {
+                    "attrs": {
+                      "width": 13.69140625,
+                      "height": 7.566502463054187
+                    },
+                    "className": "Tag"
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  "drawingsDetails": {
+    "pf8zteo5r4": {
+      "textExpr": "Eye",
+      "longText": "This is an eye!",
+      "quant": null
+    }
+  }
+}

nv/html/dwv/tests/state/v0.3/state-ellipse.json

@@ -0,0 +1,100 @@
+{
+  "version": "0.3",
+  "window-center": 441,
+  "window-width": 911,
+  "position": {
+    "i": 0,
+    "j": 0,
+    "k": 0
+  },
+  "scale": 1,
+  "scaleCenter": {
+    "x": 0,
+    "y": 0
+  },
+  "translation": {
+    "x": 0,
+    "y": 0
+  },
+  "drawings": {
+    "attrs": {
+      "listening": true,
+      "visible": true
+    },
+    "className": "Layer",
+    "children": [
+      {
+        "attrs": {
+          "name": "position-group",
+          "id": "slice-0_frame-0",
+          "visible": true
+        },
+        "className": "Group",
+        "children": [
+          {
+            "attrs": {
+              "name": "ellipse-group",
+              "visible": true,
+              "id": "c6j16qt6vt6",
+              "draggable": true
+            },
+            "className": "Group",
+            "children": [
+              {
+                "attrs": {
+                  "x": 90,
+                  "y": 78,
+                  "radiusX": 53,
+                  "radiusY": 32,
+                  "stroke": "#ffff80",
+                  "strokeWidth": 1.2610837438423645,
+                  "name": "shape"
+                },
+                "className": "Ellipse"
+              },
+              {
+                "attrs": {
+                  "x": 90,
+                  "y": 78,
+                  "name": "label"
+                },
+                "className": "Label",
+                "children": [
+                  {
+                    "attrs": {
+                      "fontSize": 7.566502463054187,
+                      "fontFamily": "Verdana",
+                      "fill": "#ffff80",
+                      "name": "text",
+                      "text": "53.28cm2"
+                    },
+                    "className": "Text"
+                  },
+                  {
+                    "attrs": {
+                      "width": 40.73088073730469,
+                      "height": 7.566502463054187
+                    },
+                    "className": "Tag"
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  "drawingsDetails": {
+    "c6j16qt6vt6": {
+      "textExpr": "{surface}",
+      "longText": "What a surface!",
+      "quant": {
+        "surface": {
+          "value": 53.281411404882896,
+          "unit": "cm2"
+        }
+      }
+    }
+  }
+}

nv/html/dwv/tests/state/v0.3/state-hand.json

@@ -0,0 +1,269 @@
+{
+  "version": "0.3",
+  "window-center": 441,
+  "window-width": 911,
+  "position": {
+    "i": 0,
+    "j": 0,
+    "k": 0
+  },
+  "scale": 1,
+  "scaleCenter": {
+    "x": 0,
+    "y": 0
+  },
+  "translation": {
+    "x": 0,
+    "y": 0
+  },
+  "drawings": {
+    "attrs": {
+      "listening": true,
+      "visible": true
+    },
+    "className": "Layer",
+    "children": [
+      {
+        "attrs": {
+          "name": "position-group",
+          "id": "slice-0_frame-0",
+          "visible": true
+        },
+        "className": "Group",
+        "children": [
+          {
+            "attrs": {
+              "name": "freeHand-group",
+              "visible": true,
+              "id": "08m011yjp8je",
+              "draggable": true
+            },
+            "className": "Group",
+            "children": [
+              {
+                "attrs": {
+                  "points": [
+                    93,
+                    50,
+                    92,
+                    50,
+                    71,
+                    58,
+                    71,
+                    59,
+                    68,
+                    63,
+                    68,
+                    64,
+                    54,
+                    80,
+                    54,
+                    81,
+                    53,
+                    83,
+                    52,
+                    85,
+                    51,
+                    87,
+                    50,
+                    92,
+                    47,
+                    98,
+                    47,
+                    100,
+                    55,
+                    117,
+                    56,
+                    118,
+                    86,
+                    122,
+                    89,
+                    126,
+                    90,
+                    128,
+                    90,
+                    129,
+                    88,
+                    131,
+                    87,
+                    133,
+                    86,
+                    134,
+                    85,
+                    138,
+                    85,
+                    139,
+                    85,
+                    141,
+                    87,
+                    143,
+                    87,
+                    144,
+                    87,
+                    145,
+                    88,
+                    147,
+                    92,
+                    150,
+                    97,
+                    152,
+                    112,
+                    154,
+                    113,
+                    153,
+                    136,
+                    143,
+                    174,
+                    136,
+                    178,
+                    135,
+                    191,
+                    136,
+                    192,
+                    136,
+                    194,
+                    138,
+                    196,
+                    139,
+                    197,
+                    141,
+                    199,
+                    141,
+                    200,
+                    141,
+                    207,
+                    140,
+                    208,
+                    139,
+                    211,
+                    136,
+                    213,
+                    134,
+                    213,
+                    133,
+                    213,
+                    129,
+                    213,
+                    126,
+                    213,
+                    122,
+                    210,
+                    90,
+                    209,
+                    87,
+                    206,
+                    80,
+                    205,
+                    79,
+                    204,
+                    78,
+                    201,
+                    73,
+                    199,
+                    71,
+                    197,
+                    70,
+                    187,
+                    63,
+                    184,
+                    61,
+                    182,
+                    59,
+                    180,
+                    58,
+                    174,
+                    54,
+                    172,
+                    52,
+                    170,
+                    51,
+                    168,
+                    50,
+                    167,
+                    49,
+                    155,
+                    42,
+                    154,
+                    42,
+                    151,
+                    42,
+                    136,
+                    40,
+                    134,
+                    40,
+                    133,
+                    40,
+                    128,
+                    41,
+                    126,
+                    41,
+                    124,
+                    41,
+                    117,
+                    44,
+                    116,
+                    44,
+                    114,
+                    44,
+                    107,
+                    47,
+                    102,
+                    49,
+                    100,
+                    49,
+                    97,
+                    49,
+                    93,
+                    50,
+                    92,
+                    50,
+                    92,
+                    50
+                  ],
+                  "stroke": "#ffff80",
+                  "strokeWidth": 1.2610837438423645,
+                  "name": "shape",
+                  "tension": 0.5
+                },
+                "className": "Line"
+              },
+              {
+                "attrs": {
+                  "x": 93,
+                  "y": 60,
+                  "name": "label"
+                },
+                "className": "Label",
+                "children": [
+                  {
+                    "attrs": {
+                      "fontSize": 7.566502463054187,
+                      "fontFamily": "Verdana",
+                      "fill": "#ffff80",
+                      "name": "text",
+                      "text": "Brain"
+                    },
+                    "className": "Text"
+                  },
+                  {
+                    "attrs": {
+                      "height": 7.566502463054187
+                    },
+                    "className": "Tag"
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  "drawingsDetails": {
+    "08m011yjp8je": {
+      "textExpr": "Brain",
+      "longText": "This is a roundy brain!",
+      "quant": null
+    }
+  }
+}

nv/html/dwv/tests/state/v0.3/state-protractor.json

@@ -0,0 +1,118 @@
+{
+  "version": "0.3",
+  "window-center": 441,
+  "window-width": 911,
+  "position": {
+    "i": 0,
+    "j": 0,
+    "k": 0
+  },
+  "scale": 1,
+  "scaleCenter": {
+    "x": 0,
+    "y": 0
+  },
+  "translation": {
+    "x": 0,
+    "y": 0
+  },
+  "drawings": {
+    "attrs": {
+      "listening": true,
+      "visible": true
+    },
+    "className": "Layer",
+    "children": [
+      {
+        "attrs": {
+          "name": "position-group",
+          "id": "slice-0_frame-0",
+          "visible": true
+        },
+        "className": "Group",
+        "children": [
+          {
+            "attrs": {
+              "name": "protractor-group",
+              "visible": true,
+              "id": "49g7kqi3p4u",
+              "draggable": true
+            },
+            "className": "Group",
+            "children": [
+              {
+                "attrs": {
+                  "points": [
+                    33,
+                    164,
+                    81,
+                    145,
+                    93,
+                    198
+                  ],
+                  "stroke": "#ffff80",
+                  "strokeWidth": 1.2610837438423645,
+                  "name": "shape"
+                },
+                "className": "Line"
+              },
+              {
+                "attrs": {
+                  "x": 72,
+                  "y": 147.5,
+                  "name": "label"
+                },
+                "className": "Label",
+                "children": [
+                  {
+                    "attrs": {
+                      "fontSize": 7.566502463054187,
+                      "fontFamily": "Verdana",
+                      "fill": "#ffff80",
+                      "name": "text",
+                      "text": "80.15°"
+                    },
+                    "className": "Text"
+                  },
+                  {
+                    "attrs": {
+                      "width": 28.730148315429688,
+                      "height": 7.566502463054187
+                    },
+                    "className": "Tag"
+                  }
+                ]
+              },
+              {
+                "attrs": {
+                  "innerRadius": 17.112857451704066,
+                  "outerRadius": 17.112857451704066,
+                  "stroke": "#ffff80",
+                  "strokeWidth": 1.2610837438423645,
+                  "angle": 80.14855270325586,
+                  "rotation": -282.75753216087674,
+                  "x": 81,
+                  "y": 145,
+                  "name": "shape-arc"
+                },
+                "className": "Arc"
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  "drawingsDetails": {
+    "49g7kqi3p4u": {
+      "textExpr": "{angle}",
+      "longText": "What an angle!",
+      "quant": {
+        "angle": {
+          "value": 80.14855270325586,
+          "unit": "°"
+        }
+      }
+    }
+  }
+}

nv/html/dwv/tests/state/v0.3/state-rectangle.json

@@ -0,0 +1,116 @@
+{
+  "version": "0.3",
+  "window-center": 441,
+  "window-width": 911,
+  "position": {
+    "i": 0,
+    "j": 0,
+    "k": 0
+  },
+  "scale": 1,
+  "scaleCenter": {
+    "x": 0,
+    "y": 0
+  },
+  "translation": {
+    "x": 0,
+    "y": 0
+  },
+  "drawings": {
+    "attrs": {
+      "listening": true,
+      "visible": true
+    },
+    "className": "Layer",
+    "children": [
+      {
+        "attrs": {
+          "name": "position-group",
+          "id": "slice-0_frame-0",
+          "visible": true
+        },
+        "className": "Group",
+        "children": [
+          {
+            "attrs": {
+              "name": "rectangle-group",
+              "visible": true,
+              "id": "db0puu209qe",
+              "draggable": true
+            },
+            "className": "Group",
+            "children": [
+              {
+                "attrs": {
+                  "x": 80,
+                  "y": 58,
+                  "width": 104,
+                  "height": 64,
+                  "stroke": "#ffff80",
+                  "strokeWidth": 1.2610837438423645,
+                  "name": "shape"
+                },
+                "className": "Rect"
+              },
+              {
+                "attrs": {
+                  "x": 80,
+                  "y": 132,
+                  "name": "label"
+                },
+                "className": "Label",
+                "children": [
+                  {
+                    "attrs": {
+                      "fontSize": 7.566502463054187,
+                      "fontFamily": "Verdana",
+                      "fill": "#ffff80",
+                      "name": "text",
+                      "text": "66.56cm2"
+                    },
+                    "className": "Text"
+                  },
+                  {
+                    "attrs": {
+                      "width": 40.73088073730469,
+                      "height": 7.566502463054187
+                    },
+                    "className": "Tag"
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  "drawingsDetails": {
+    "db0puu209qe": {
+      "textExpr": "{surface}",
+      "longText": "What a rectangle!",
+      "quant": {
+        "surface": {
+          "value": 66.56,
+          "unit": "cm2"
+        },
+        "min": {
+          "value": 45,
+          "unit": ""
+        },
+        "max": {
+          "value": 602,
+          "unit": ""
+        },
+        "mean": {
+          "value": 393.77989783653845,
+          "unit": ""
+        },
+        "stdDev": {
+          "value": 91.9374530590746,
+          "unit": ""
+        }
+      }
+    }
+  }
+}

nv/html/dwv/tests/state/v0.3/state-roi.json

@@ -0,0 +1,119 @@
+{
+  "version": "0.3",
+  "window-center": 441,
+  "window-width": 911,
+  "position": {
+    "i": 0,
+    "j": 0,
+    "k": 0
+  },
+  "scale": 1,
+  "scaleCenter": {
+    "x": 0,
+    "y": 0
+  },
+  "translation": {
+    "x": 0,
+    "y": 0
+  },
+  "drawings": {
+    "attrs": {
+      "listening": true,
+      "visible": true
+    },
+    "className": "Layer",
+    "children": [
+      {
+        "attrs": {
+          "name": "position-group",
+          "id": "slice-0_frame-0",
+          "visible": true
+        },
+        "className": "Group",
+        "children": [
+          {
+            "attrs": {
+              "name": "roi-group",
+              "visible": true,
+              "id": "4l24ofouhmf",
+              "draggable": true
+            },
+            "className": "Group",
+            "children": [
+              {
+                "attrs": {
+                  "points": [
+                    126,
+                    40,
+                    58,
+                    80,
+                    60,
+                    116,
+                    92,
+                    128,
+                    93,
+                    143,
+                    93,
+                    151,
+                    94,
+                    151,
+                    114,
+                    150,
+                    128,
+                    150,
+                    214,
+                    135,
+                    183,
+                    56,
+                    182,
+                    56,
+                    182,
+                    56
+                  ],
+                  "stroke": "#ffff80",
+                  "strokeWidth": 1.2610837438423645,
+                  "name": "shape",
+                  "closed": true
+                },
+                "className": "Line"
+              },
+              {
+                "attrs": {
+                  "x": 126,
+                  "y": 50,
+                  "name": "label"
+                },
+                "className": "Label",
+                "children": [
+                  {
+                    "attrs": {
+                      "fontSize": 7.566502463054187,
+                      "fontFamily": "Verdana",
+                      "fill": "#ffff80",
+                      "name": "text",
+                      "text": "Brain"
+                    },
+                    "className": "Text"
+                  },
+                  {
+                    "attrs": {
+                      "height": 7.566502463054187
+                    },
+                    "className": "Tag"
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  "drawingsDetails": {
+    "4l24ofouhmf": {
+      "textExpr": "Brain",
+      "longText": "This is a squary brain!",
+      "quant": null
+    }
+  }
+}

nv/html/dwv/tests/state/v0.3/state-ruler.json

@@ -0,0 +1,130 @@
+{
+  "version": "0.3",
+  "window-center": 441,
+  "window-width": 911,
+  "position": {
+    "i": 0,
+    "j": 0,
+    "k": 0
+  },
+  "scale": 1,
+  "scaleCenter": {
+    "x": 0,
+    "y": 0
+  },
+  "translation": {
+    "x": 0,
+    "y": 0
+  },
+  "drawings": {
+    "attrs": {
+      "listening": true,
+      "visible": true
+    },
+    "className": "Layer",
+    "children": [
+      {
+        "attrs": {
+          "name": "position-group",
+          "id": "slice-0_frame-0",
+          "visible": true
+        },
+        "className": "Group",
+        "children": [
+          {
+            "attrs": {
+              "name": "ruler-group",
+              "visible": true,
+              "id": "4gvkz8v6wzw",
+              "draggable": true
+            },
+            "className": "Group",
+            "children": [
+              {
+                "attrs": {
+                  "points": [
+                    51,
+                    135,
+                    216,
+                    134
+                  ],
+                  "stroke": "#ffff80",
+                  "strokeWidth": 1.2610837438423645,
+                  "name": "shape"
+                },
+                "className": "Line"
+              },
+              {
+                "attrs": {
+                  "points": [
+                    50.96969752621112,
+                    130.00009182483518,
+                    51.03030247378888,
+                    139.99990817516482
+                  ],
+                  "stroke": "#ffff80",
+                  "strokeWidth": 1.2610837438423645,
+                  "name": "shape-tick0"
+                },
+                "className": "Line"
+              },
+              {
+                "attrs": {
+                  "points": [
+                    215.96969752621112,
+                    129.00009182483336,
+                    216.03030247378888,
+                    138.99990817516664
+                  ],
+                  "stroke": "#ffff80",
+                  "strokeWidth": 1.2610837438423645,
+                  "name": "shape-tick1"
+                },
+                "className": "Line"
+              },
+              {
+                "attrs": {
+                  "x": 191,
+                  "y": 119,
+                  "name": "label"
+                },
+                "className": "Label",
+                "children": [
+                  {
+                    "attrs": {
+                      "fontSize": 7.566502463054187,
+                      "fontFamily": "Verdana",
+                      "fill": "#ffff80",
+                      "name": "text",
+                      "text": "165.0mm"
+                    },
+                    "className": "Text"
+                  },
+                  {
+                    "attrs": {
+                      "width": 39.3392333984375,
+                      "height": 7.566502463054187
+                    },
+                    "className": "Tag"
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  "drawingsDetails": {
+    "4gvkz8v6wzw": {
+      "textExpr": "{length}",
+      "longText": "What a ruler!",
+      "quant": {
+        "length": {
+          "value": 165.00303027520434,
+          "unit": "mm"
+        }
+      }
+    }
+  }
+}

nv/html/dwv/tests/state/v0.3/state-ruler_multi-slice.json

@@ -0,0 +1,530 @@
+{
+  "version": "0.3",
+  "window-center": 441,
+  "window-width": 911,
+  "position": {
+    "i": 0,
+    "j": 0,
+    "k": 0
+  },
+  "scale": 1,
+  "scaleCenter": {
+    "x": 0,
+    "y": 0
+  },
+  "translation": {
+    "x": 0,
+    "y": 0
+  },
+  "drawings": {
+    "attrs": {
+      "listening": true,
+      "visible": true
+    },
+    "className": "Layer",
+    "children": [
+      {
+        "attrs": {
+          "name": "position-group",
+          "id": "slice-1_frame-0",
+          "visible": false
+        },
+        "className": "Group",
+        "children": [
+          {
+            "attrs": {
+              "name": "ruler-group",
+              "visible": true,
+              "id": "onzlkbs8p",
+              "draggable": true
+            },
+            "className": "Group",
+            "children": [
+              {
+                "attrs": {
+                  "points": [
+                    120,
+                    110,
+                    120,
+                    60
+                  ],
+                  "stroke": "#ffff00",
+                  "strokeWidth": 1.4301675977653632,
+                  "name": "shape"
+                },
+                "className": "Line"
+              },
+              {
+                "attrs": {
+                  "points": [
+                    115,
+                    60,
+                    125,
+                    60
+                  ],
+                  "stroke": "#ffff00",
+                  "strokeWidth": 1.4301675977653632,
+                  "name": "shape-tick0"
+                },
+                "className": "Line"
+              },
+              {
+                "attrs": {
+                  "points": [
+                    115,
+                    110,
+                    125,
+                    110
+                  ],
+                  "stroke": "#ffff00",
+                  "strokeWidth": 1.4301675977653632,
+                  "name": "shape-tick1"
+                },
+                "className": "Line"
+              },
+              {
+                "attrs": {
+                  "x": 120,
+                  "y": 45,
+                  "name": "label"
+                },
+                "className": "Label",
+                "children": [
+                  {
+                    "attrs": {
+                      "fontSize": 8.581005586592179,
+                      "fontFamily": "Verdana",
+                      "fill": "#ffff00",
+                      "name": "text",
+                      "text": "50.00mm"
+                    },
+                    "className": "Text"
+                  },
+                  {
+                    "attrs": {
+                      "width": 44.64697265625,
+                      "height": 8.581005586592179
+                    },
+                    "className": "Tag"
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "attrs": {
+          "name": "position-group",
+          "id": "slice-2_frame-0",
+          "visible": false
+        },
+        "className": "Group",
+        "children": [
+          {
+            "attrs": {
+              "name": "ruler-group",
+              "visible": true,
+              "id": "u9bvidgkjc9",
+              "draggable": true
+            },
+            "className": "Group",
+            "children": [
+              {
+                "attrs": {
+                  "points": [
+                    120,
+                    110,
+                    170,
+                    110
+                  ],
+                  "stroke": "#ff0000",
+                  "strokeWidth": 1.4301675977653632,
+                  "name": "shape"
+                },
+                "className": "Line"
+              },
+              {
+                "attrs": {
+                  "points": [
+                    120,
+                    115,
+                    120,
+                    105
+                  ],
+                  "stroke": "#ff0000",
+                  "strokeWidth": 1.4301675977653632,
+                  "name": "shape-tick0"
+                },
+                "className": "Line"
+              },
+              {
+                "attrs": {
+                  "points": [
+                    170,
+                    115,
+                    170,
+                    105
+                  ],
+                  "stroke": "#ff0000",
+                  "strokeWidth": 1.4301675977653632,
+                  "name": "shape-tick1"
+                },
+                "className": "Line"
+              },
+              {
+                "attrs": {
+                  "x": 155,
+                  "y": 90,
+                  "name": "label"
+                },
+                "className": "Label",
+                "children": [
+                  {
+                    "attrs": {
+                      "fontSize": 8.581005586592179,
+                      "fontFamily": "Verdana",
+                      "fill": "#ff0000",
+                      "name": "text",
+                      "text": "50.00mm"
+                    },
+                    "className": "Text"
+                  },
+                  {
+                    "attrs": {
+                      "width": 44.64697265625,
+                      "height": 8.581005586592179
+                    },
+                    "className": "Tag"
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "attrs": {
+          "name": "position-group",
+          "id": "slice-3_frame-0",
+          "visible": false
+        },
+        "className": "Group",
+        "children": [
+          {
+            "attrs": {
+              "name": "ruler-group",
+              "visible": true,
+              "id": "c9abkegq62j",
+              "draggable": true
+            },
+            "className": "Group",
+            "children": [
+              {
+                "attrs": {
+                  "points": [
+                    120,
+                    110,
+                    120,
+                    160
+                  ],
+                  "stroke": "#ffffff",
+                  "strokeWidth": 1.4301675977653632,
+                  "name": "shape"
+                },
+                "className": "Line"
+              },
+              {
+                "attrs": {
+                  "points": [
+                    115,
+                    110,
+                    125,
+                    110
+                  ],
+                  "stroke": "#ffffff",
+                  "strokeWidth": 1.4301675977653632,
+                  "name": "shape-tick0"
+                },
+                "className": "Line"
+              },
+              {
+                "attrs": {
+                  "points": [
+                    115,
+                    160,
+                    125,
+                    160
+                  ],
+                  "stroke": "#ffffff",
+                  "strokeWidth": 1.4301675977653632,
+                  "name": "shape-tick1"
+                },
+                "className": "Line"
+              },
+              {
+                "attrs": {
+                  "x": 120,
+                  "y": 170,
+                  "name": "label"
+                },
+                "className": "Label",
+                "children": [
+                  {
+                    "attrs": {
+                      "fontSize": 8.581005586592179,
+                      "fontFamily": "Verdana",
+                      "fill": "#ffffff",
+                      "name": "text",
+                      "text": "50.00mm"
+                    },
+                    "className": "Text"
+                  },
+                  {
+                    "attrs": {
+                      "width": 44.64697265625,
+                      "height": 8.581005586592179
+                    },
+                    "className": "Tag"
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "attrs": {
+          "name": "position-group",
+          "id": "slice-4_frame-0",
+          "visible": false
+        },
+        "className": "Group",
+        "children": [
+          {
+            "attrs": {
+              "name": "ruler-group",
+              "visible": true,
+              "id": "uiav43zjw1",
+              "draggable": true
+            },
+            "className": "Group",
+            "children": [
+              {
+                "attrs": {
+                  "points": [
+                    120,
+                    110,
+                    60,
+                    110
+                  ],
+                  "stroke": "#00ff00",
+                  "strokeWidth": 1.4301675977653632,
+                  "name": "shape"
+                },
+                "className": "Line"
+              },
+              {
+                "attrs": {
+                  "points": [
+                    120,
+                    105,
+                    120,
+                    115
+                  ],
+                  "stroke": "#00ff00",
+                  "strokeWidth": 1.4301675977653632,
+                  "name": "shape-tick0"
+                },
+                "className": "Line"
+              },
+              {
+                "attrs": {
+                  "points": [
+                    60,
+                    105,
+                    60,
+                    115
+                  ],
+                  "stroke": "#00ff00",
+                  "strokeWidth": 1.4301675977653632,
+                  "name": "shape-tick1"
+                },
+                "className": "Line"
+              },
+              {
+                "attrs": {
+                  "x": 60,
+                  "y": 120,
+                  "name": "label"
+                },
+                "className": "Label",
+                "children": [
+                  {
+                    "attrs": {
+                      "fontSize": 8.581005586592179,
+                      "fontFamily": "Verdana",
+                      "fill": "#00ff00",
+                      "name": "text",
+                      "text": "50.00mm"
+                    },
+                    "className": "Text"
+                  },
+                  {
+                    "attrs": {
+                      "width": 44.64697265625,
+                      "height": 8.581005586592179
+                    },
+                    "className": "Tag"
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "attrs": {
+          "name": "position-group",
+          "id": "slice-5_frame-0",
+          "visible": true
+        },
+        "className": "Group",
+        "children": [
+          {
+            "attrs": {
+              "name": "ruler-group",
+              "visible": true,
+              "id": "26ir11b9ugl",
+              "draggable": true
+            },
+            "className": "Group",
+            "children": [
+              {
+                "attrs": {
+                  "points": [
+                    120,
+                    110,
+                    120,
+                    60
+                  ],
+                  "stroke": "#ff00ff",
+                  "strokeWidth": 1.4301675977653632,
+                  "name": "shape"
+                },
+                "className": "Line"
+              },
+              {
+                "attrs": {
+                  "points": [
+                    115,
+                    60,
+                    125,
+                    60
+                  ],
+                  "stroke": "#ff00ff",
+                  "strokeWidth": 1.4301675977653632,
+                  "name": "shape-tick0"
+                },
+                "className": "Line"
+              },
+              {
+                "attrs": {
+                  "points": [
+                    115,
+                    110,
+                    125,
+                    110
+                  ],
+                  "stroke": "#ff00ff",
+                  "strokeWidth": 1.4301675977653632,
+                  "name": "shape-tick1"
+                },
+                "className": "Line"
+              },
+              {
+                "attrs": {
+                  "x": 120,
+                  "y": 45,
+                  "name": "label"
+                },
+                "className": "Label",
+                "children": [
+                  {
+                    "attrs": {
+                      "fontSize": 8.581005586592179,
+                      "fontFamily": "Verdana",
+                      "fill": "#ff00ff",
+                      "name": "text",
+                      "text": "50.00mm"
+                    },
+                    "className": "Text"
+                  },
+                  {
+                    "attrs": {
+                      "width": 44.64697265625,
+                      "height": 8.581005586592179
+                    },
+                    "className": "Tag"
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  "drawingsDetails": {
+    "onzlkbs8p": {
+      "textExpr": "{length}",
+      "longText": "First ruler.",
+      "quant": {
+        "length": {
+          "value": 50,
+          "unit": "mm"
+        }
+      }
+    },
+    "u9bvidgkjc9": {
+      "textExpr": "{length}",
+      "longText": "Second ruler.",
+      "quant": {
+        "length": {
+          "value": 50,
+          "unit": "mm"
+        }
+      }
+    },
+    "c9abkegq62j": {
+      "textExpr": "{length}",
+      "longText": "Third ruler.",
+      "quant": {
+        "length": {
+          "value": 50,
+          "unit": "mm"
+        }
+      }
+    },
+    "uiav43zjw1": {
+      "textExpr": "{length}",
+      "longText": "Fourth ruler.",
+      "quant": {
+        "length": {
+          "value": 50,
+          "unit": "mm"
+        }
+      }
+    },
+    "26ir11b9ugl": {
+      "textExpr": "{length}",
+      "longText": "Fifth ruler.",
+      "quant": {
+        "length": {
+          "value": 50,
+          "unit": "mm"
+        }
+      }
+    }
+  }
+}