mirror of
https://github.com/leaders-of-digital-9-task/dicom-viewer.git
synced 2024-11-10 20:46:34 +03:00
add return and serialize draws
This commit is contained in:
parent
c4c9651fdd
commit
0ea24abb37
122
index.js
122
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));
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue
Block a user