From 11a5de61bed41cd420c9eaf5193c5067df84ed1d Mon Sep 17 00:00:00 2001 From: ilia Date: Mon, 31 Oct 2022 13:33:51 +0300 Subject: [PATCH] add multiple images --- index.js | 161 ++++++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 124 insertions(+), 37 deletions(-) diff --git a/index.js b/index.js index 2ec0ba0..2d2728d 100644 --- a/index.js +++ b/index.js @@ -4,6 +4,7 @@ var app = new dwv.App(); var circleFactory = new dwv.tool.draw.CircleFactory(); var roiFactory = new dwv.tool.draw.RoiFactory(); +schema = [] var tools = { @@ -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,65 +114,59 @@ function createDraws(drawsData) { function postCircles() { - circlesAttrs = app.getActiveLayerGroup().getActiveDrawLayer().getKonvaLayer().getChildren().filter(e => e.attrs.name == 'circle-group').map( - (e) => { - console.log(e, "eeeeee") - return e.children.filter( - (ee) => { - console.log(e) - 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) => { - console.log(e, "eeeeee") - return e.children.filter( - (ee) => { - console.log(e) - 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()))) } @@ -202,6 +210,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); @@ -211,7 +222,6 @@ function findActive() { (e) => { return e.children.filter( (ee) => { - console.log(e) return ee.attrs.name == 'anchor' } ) @@ -221,7 +231,6 @@ function findActive() { return e.children.filter((e) => e.attrs.name == 'anchor') })) active = new Set(activeCandidates.flat().map(e => e.parent.id())) - console.log(activeCandidates, active) return [...active][0] } @@ -230,11 +239,89 @@ 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.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', () => { - parent.postMessage({'type': 'returnDraws', data: postDraws()}, "*") + setTimeout(() => { + parent.postMessage({'type': 'returnDraws', data: postDraws()}, "*") + //console.log({'type': 'returnDraws', data: postDraws()}) + }, 100) }) // createCircle({ // type: 'Circle',