diff --git a/index.js b/index.js index 2fbdb02..3acf68c 100644 --- a/index.js +++ b/index.js @@ -4,12 +4,13 @@ var app = new dwv.App(); var circleFactory = new dwv.tool.draw.CircleFactory(); var roiFactory = new dwv.tool.draw.RoiFactory(); +schema = [] var tools = { Scroll: {}, Draw: { - options: ['Circle', 'Roi'], + options: ['Circle', 'Roi', 'Ruler', 'FreeHand'], type: 'factory' }, ZoomAndPan: {}, @@ -29,6 +30,18 @@ app.addEventListener('load', function () { app.setDrawShape('Circle') }); +function loadSchema(schema) { + console.log(schema, schema.length) + urls = [] + picSchema = new Map() + for (var i = 0; i < schema.length; ++i) { + console.log(i) + picSchema.set(schema[i].url, schema[i].figures) + urls.push(schema[i].url) + } + return [urls, picSchema] +} + function createCircle(circleData) { var point1 = new dwv.math.Point2D(circleData.center.x, circleData.center.y) @@ -53,6 +66,7 @@ function createCircle(circleData) { }) //drawCommand = new dwv.tool.DrawGroupCommand(draw, 'circle-group', app.getActiveLayerGroup().getActiveDrawLayer().getKonvaLayer()['.position-group'][0], false) posGroup = app.getActiveLayerGroup().getActiveDrawLayer().getDrawController().getCurrentPosGroup() + console.log(app.getActiveLayerGroup().getActiveDrawLayer().getDrawController()) posGroup.add(draw) app.getActiveLayerGroup().getActiveDrawLayer().getKonvaLayer().listening(true) //drawCommand.execute() @@ -100,61 +114,60 @@ function createDraws(drawsData) { function postCircles() { - circlesAttrs = app.getActiveLayerGroup().getActiveDrawLayer().getKonvaLayer().getChildren().filter(e => e.attrs.name == 'circle-group').map( - (e) => { - return e.children.filter( - (ee) => { - return ee.attrs.name == 'shape' - } - ).map(e => e.attrs) - } - ) + + setTimeout(() => { + console.log(app.getActiveLayerGroup().getActiveDrawLayer().getKonvaLayer().children[0].children) + }, 100) + // circlesAttrs = app.getActiveLayerGroup().getActiveDrawLayer().getKonvaLayer().getChildren().filter(e => e.attrs.name == 'circle-group').map( + // (e) => { + // //console.log(e) + // return e.children.filter( + // (ee) => { + // return ee.attrs.name == 'shape' + // } + // ).map(eee => {return {attrs: eee.attrs, parent: e.attrs}}) + // } + // ) + circlesAttrs = [] circlesAttrs = circlesAttrs.concat(app.getActiveLayerGroup().getActiveDrawLayer().getKonvaLayer().children[0].children.filter(e => e.attrs.name == 'circle-group').map((e) => { - return e.children.filter((e) => e.attrs.name == 'shape').map(e => e.attrs) + return e.children.filter((eee) => eee.attrs.name == 'shape').map(ee => {return {attrs: ee.attrs, parent: e.attrs}}) })) //circleAttrs.concat(app.getActiveLayerGroup().getActiveDrawLayer().getKonvaLayer().children[0]) return circlesAttrs.flat().map((e) => { return { type: 'Circle', center: { - x: e.x, - y: e.y + x: e.attrs.x, + y: e.attrs.y }, - radius: e.radius, - id: e.id + radius: e.attrs.radius, + id: e.parent.id } }) } function postRois() { - roisAttrs = app.getActiveLayerGroup().getActiveDrawLayer().getKonvaLayer().getChildren().filter(e => e.attrs.name == 'roi-group').map( - (e) => { - return e.children.filter( - (ee) => { - return ee.attrs.name == 'shape' - } - ).map(e => e.attrs) - } - ) + roisAttrs = [] roisAttrs = roisAttrs.concat(app.getActiveLayerGroup().getActiveDrawLayer().getKonvaLayer().children[0].children.filter(e => e.attrs.name == 'roi-group').map((e) => { - return e.children.filter((e) => e.attrs.name == 'shape').map(e => e.attrs) + return e.children.filter((e) => e.attrs.name == 'shape').map(e => {return {attrs: e.attrs, parent: e.parent.attrs}}) })) return roisAttrs.flat().map((e) => { + console.log(e) var points = []; - for (var i = 0; i < e.points.length; i+=2) { - points.push({x: e.points[i], y: e.points[i+1]}) + for (var i = 0; i < e.attrs.points.length; i+=2) { + points.push({x: e.attrs.points[i], y: e.attrs.points[i+1]}) } return { type: 'Roi', points: points, - id: e.id + id: e.parent.id } }) } - function postDraws() { - return postCircles().concat(postRois()) + console.log(postRois()) + return JSON.parse(JSON.stringify(postCircles().concat(postRois()))) } @@ -172,15 +185,15 @@ function receiveMessage(event) } else if(data.type == "setTool"){ if (data.data == "null"){ app.setTool('Scroll'); - } else if (data.data == 'Roi' || data.data == 'Circle'){ - app.setTool('Draw'); - app.setDrawShape(data.data); - } + } else if (data.data == 'ZoomAndPan') { app.setTool('ZoomAndPan'); } else if (data.data == 'WindowLevel') { app.setTool('WindowLevel') + }else { + app.setTool('Draw'); + app.setDrawShape(data.data); } } else if (data.type == 'setDraws') { @@ -200,6 +213,9 @@ function receiveMessage(event) else if (data.type == 'deleteById') { app.getActiveLayerGroup().getActiveDrawLayer().getKonvaStage().find("#"+data.data)[0].destroy() } + else if (data.type == 'loadSchema') { + schema = loadSchema(data.data) + } } window.addEventListener("message", receiveMessage, false); @@ -209,7 +225,6 @@ function findActive() { (e) => { return e.children.filter( (ee) => { - console.log(e) return ee.attrs.name == 'anchor' } ) @@ -227,12 +242,91 @@ 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']) + +// schema = [ +// { +// 'url': 'https://raw.githubusercontent.com/ivmartel/dwv/master/tests/data/bbmri-53323851.dcm', +// 'figures': [ +// {type: 'Circle', center: {x: 10, y: 100}, radius: 10}, +// {type: 'Roi', points: [{x: 10, y: 20}, {x: 100, y: 50}]} +// ] +// }, +// { +// 'url': 'https://raw.githubusercontent.com/ivmartel/dwv/master/tests/data/bbmri-53323707.dcm', +// 'figures': [ +// {type: 'Circle', center: {x: 10, y: 200}, radius: 10}, +// {type: 'Roi', points: [{x: 10, y: 30}, {x: 100, y: 50}]} +// ] +// } +// ] + +// schema = loadSchema(schema) + +// console.log(schema[0], "0") + + +// app.loadURLs(schema[0]) + + +// app.loadURLs([ +// 'https://raw.githubusercontent.com/ivmartel/dwv/master/tests/data/bbmri-53323851.dcm', +// 'https://raw.githubusercontent.com/ivmartel/dwv/master/tests/data/bbmri-53323707.dcm', +// 'https://raw.githubusercontent.com/ivmartel/dwv/master/tests/data/bbmri-53323563.dcm' +// ]) + +function setFrame(frameNumber) { + var lg = app.getLayerGroupById(0); + var vc = lg.getActiveViewLayer().getViewController(); + var index = vc.getCurrentIndex(); + var values = index.getValues(); + values[2] = frameNumber; + vc.setCurrentIndex(new dwv.math.Index(values)); + loadPictures( + schema[1].get(schema[0][frameNumber]) + ) +} + +function loadPictures(pictures) { + // app.deleteDraws() + deleteDraws() + app.setTool('Draw') + pictures.map((e) => { + if (e.type == 'Circle') { + createCircle(e) + } + else if (e.type == 'Roi') { + createRoi(e) + } + }) +} + +function deleteDraws() { + app.getActiveLayerGroup().getActiveDrawLayer().getKonvaStage().find('.circle-group').map((e) => e.destroy()) + app.getActiveLayerGroup().getActiveDrawLayer().getKonvaStage().find('.roi-group').map((e) => e.destroy()) +} app.addEventListener('load', () => { - // app.getActiveLayerGroup().getActiveDrawLayer().getKonvaStage().addEventListener('mouseup', () => { - // parent.postMessage({'type': 'returnDraws', data: postDraws()}, "*") - // }) + + // app.setDrawShape('Roi') + app.setTool("Scroll") + setFrame(0) + // loadPictures([ + // {type: 'Circle', center: {x: 10, y: 100}, radius: 10}, + // {type: 'Roi', points: [{x: 10, y: 20}, {x: 100, y: 50}]} + // ]) + setTimeout(() => { + setFrame(1) + }, 1000) + var lg = app.getLayerGroupById(0); + var vc = lg.getActiveViewLayer().getViewController(); + console.log(vc.getCurrentScrollIndexValue()) + //app.getActiveLayerGroup().getActiveViewLayer().getViewController().setCurrentIndex(new dwv.math.Index(1)) + app.getActiveLayerGroup().getActiveDrawLayer().getKonvaStage().addEventListener('mouseup', () => { + setTimeout(() => { + parent.postMessage({'type': 'returnDraws', data: postDraws()}, "*") + //console.log({'type': 'returnDraws', data: postDraws()}) + }, 100) + }) // createCircle({ // type: 'Circle', // center: {