mirror of
https://github.com/leaders-of-digital-9-task/dicom-viewer.git
synced 2024-11-24 03:03:43 +03:00
add multiple images
This commit is contained in:
ilia
parent
73d12f3e62
commit
11a5de61be
161
index.js
161
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',
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user