add return and serialize draws

index.js

@@ -1,6 +1,11 @@
 
 var app = new dwv.App();
 
+
+var circleFactory = new dwv.tool.draw.CircleFactory();
+var roiFactory = new dwv.tool.draw.RoiFactory();
+
+
 var tools = {
   Scroll: {},
   Draw: {
@@ -25,11 +30,105 @@ app.addEventListener('load', function () {
 //    console.log(app.getActiveLayerGroup().getActiveDrawLayer().getKonvaLayer().getChildren()[0])
 });
 
+function createCircle(circleData) {
+    var point1 = new dwv.math.Point2D(circleData.center.x, circleData.center.y)
+    var point2 = new dwv.math.Point2D(circleData.center.x, circleData.center.y+circleData.radius)
+    app.setTool('Draw');
+    var styles = app.getToolboxController().getSelectedTool().style
+    app.undo()
+    var draw = circleFactory.create(
+        [point1, point2], 
+        styles,
+        app.getActiveLayerGroup().getActiveViewLayer().getViewController()
+    )
+    app.getActiveLayerGroup().getActiveDrawLayer().getKonvaLayer().add(draw)
+}
+
+
+function createRoi(circleData) {
+    app.setTool('Draw');
+    var styles = app.getToolboxController().getSelectedTool().style
+    points = circleData.points.map((e) => {
+        return new dwv.math.Point2D(e.x, e.y)
+    })
+
+    var draw = roiFactory.create(
+        points, 
+        styles, 
+        app.getActiveLayerGroup().getActiveViewLayer().getViewController()
+    )
+    app.getActiveLayerGroup().getActiveDrawLayer().getKonvaLayer().add(draw)
+
+}
+
+
+function createDraws(drawsData) {
+    drawsData.data.map((e) => {
+        if (e.type == 'Circle') {
+            createCircle(e)
+        }
+        if (e.type == 'Roi') {
+            createRoi(e)
+        }
+    })
+}
+
+
+function postCircles() {
+    console.log(app.getActiveLayerGroup().getActiveDrawLayer().getKonvaLayer().children[0].children)
+    circlesAttrs = app.getActiveLayerGroup().getActiveDrawLayer().getKonvaLayer().getChildren()[0].children.filter(e => e.attrs.name == 'circle-group').map(
+        (e) => {
+            console.log(e.children)
+            return e.children.filter((e) => e.attrs.name == 'shape').map(e => e.attrs)
+        }
+    )
+    console.log(circlesAttrs)
+    return circlesAttrs.flat().map((e) => {
+        console.log(e)
+        return {
+            type: 'Circle',
+            center: {
+                x: e.x,
+                y: e.y
+            },
+            radius: e.radius
+        }
+    })
+}
+
+function postRois() {
+    return app.getActiveLayerGroup().getActiveDrawLayer().getKonvaLayer().children.filter(
+        e => e.attrs.name == 'roi-group'
+    ).map(e => {
+        return e.children.filter(e => e.attrs.name == 'shape')[0].attrs
+    }).flat().map((e) => {
+        var points = []
+        for (var i = 0; i < e.points.length; i+=2) {
+            points.push({x: e.points[i], y: e.points[i+1]})
+        }
+        return {
+            type: 'Roi',
+            points: points
+        }
+    })
+}
+
+
+function postDraws() {
+    return postCircles().concat(postRois())
+}
+
 
 function receiveMessage(event)
 {
       console.log(event.data, "FFFFFFFFF")
-      let data = JSON.parse(event.data)
+      let data = undefined;
+      try{
+        data = event.data
+      }
+      catch{
+        return
+      }
       if (data.type == "setDicom"){
         app.loadURLs([data.data])
       } else if(data.type == "setTool"){
@@ -39,7 +138,12 @@ function receiveMessage(event)
           app.setTool('Draw');
           app.setDrawShape(data.data);
         }
-
+      }
+      else if (data.type == 'setDraws') {
+        createDraws(data)
+      }
+      else if (data.type == 'getDraws') {
+        window.postMessage({'type': 'returnDraws', data: postDraws()})
       }
 }
 window.addEventListener("message", receiveMessage, false);
@@ -51,13 +155,22 @@ app.addEventListener("drawchange", function (){
 })
 
 
-
-
 var range = document.getElementById('sliceRange');
 range.min = 0;
 app.addEventListener('loadend', function () {
   range.max = app.getImage(0).getGeometry().getSize().get(2) - 1;
 });
+
+app.loadURLs(['https://raw.githubusercontent.com/ivmartel/dwv/master/tests/data/bbmri-53323851.dcm'])
+
+app.addEventListener('load', () => {
+    app.setTool('Draw')
+    app.setDrawShape('Circle')
+    setTimeout(() => {app.setDrawShape('Roi'); console.log('circle')}, 3000)
+    setTimeout(() => {console.log(postDraws())}, 6000)
+
+})
+
 app.addEventListener('slicechange', function () {
   // update slider on slice change (for ex via mouse wheel)
   var lg = app.getLayerGroupById(0);
@@ -72,3 +185,4 @@ range.oninput = function () {
   values[2] = this.value;
   vc.setCurrentIndex(new dwv.math.Index(values));
 }
+