add return and serialize draws

This commit is contained in:
ilia 2022-10-29 14:59:09 +03:00
parent c4c9651fdd
commit 0ea24abb37

122
index.js
View File

@ -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));
}