leaders-of-digital-9-task/dicom-viewer
1
0
Fork 0
mirror of https://github.com/leaders-of-digital-9-task/dicom-viewer.git synced 2024-11-22 02:16:32 +03:00
Code Issues Packages Projects Releases Wiki Activity

add moves to draws

Browse Source
This commit is contained in:
ilia 2022-10-30 12:41:43 +03:00
parent efab9e1fd0
commit ef8241688a
2 changed files with 90 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
index.html
View File

@ -15,11 +15,26 @@
<title>Document</title>
</head>
<body>
<div id="dwv">
<div id="layerGroup0"></div>
</div>
<style>
html, body {
height: 100%;
}
<input type="range" id="sliceRange" value="0">
#dwv { height: 80%; }
.layerGroup {
display: inline-block;
height: 250px;
width: 250px;
}
.layer {
position: absolute;
}
</style>
<div id="dwv">
<div id="layerGroup0" class="layerGroup"></div>
</div>
<script src="index.js"></script>
</body>
</html>

123
index.js
View File

@ -11,7 +11,8 @@ var tools = {
Draw: {
options: ['Circle', 'Roi'],
type: 'factory'
}
},
ZoomAndPan: {}
};
app.init({
@ -22,8 +23,8 @@ app.init({
parent.postMessage({'type': 'getDicom', data: ""}, "*")
app.addEventListener('load', function () {
app.setTool('Scroll');
app.setTool('Draw');
app.setDrawShape('Circle')
});
function createCircle(circleData) {
@ -36,7 +37,19 @@ function createCircle(circleData) {
styles,
app.getActiveLayerGroup().getActiveViewLayer().getViewController()
)
app.getActiveLayerGroup().getActiveDrawLayer().getKonvaLayer().add(draw)
draw.id(dwv.math.guid());
draw.draggable(true)
draw.addEventListener('mouseover', () => {
document.body.style.cursor = 'pointer'
})
draw.addEventListener('mouseout', () => {
document.body.style.cursor = 'default'
})
//drawCommand = new dwv.tool.DrawGroupCommand(draw, 'circle-group', app.getActiveLayerGroup().getActiveDrawLayer().getKonvaLayer()['.position-group'][0], false)
posGroup = app.getActiveLayerGroup().getActiveDrawLayer().getDrawController().getCurrentPosGroup()
posGroup.add(draw)
//drawCommand.execute()
//app.getActiveLayerGroup().getActiveDrawLayer().getKonvaLayer().find('.position-group')[0].add(draw)
}
@ -52,11 +65,19 @@ function createRoi(circleData) {
styles,
app.getActiveLayerGroup().getActiveViewLayer().getViewController()
)
app.getActiveLayerGroup().getActiveDrawLayer().getKonvaLayer().add(draw)
draw.id(dwv.math.guid());
draw.draggable(true)
draw.addEventListener('mouseover', () => {
document.body.style.cursor = 'pointer'
})
draw.addEventListener('mouseout', () => {
document.body.style.cursor = 'default'
})
//drawCommand = new dwv.tool.DrawGroupCommand(draw, 'circle-group', app.getActiveLayerGroup().getActiveDrawLayer().getKonvaLayer()['.position-group'][0], false)
posGroup = app.getActiveLayerGroup().getActiveDrawLayer().getDrawController().getCurrentPosGroup()
posGroup.add(draw)
}
function createDraws(drawsData) {
drawsData.data.map((e) => {
if (e.type == 'Circle') {
@ -70,7 +91,6 @@ function createDraws(drawsData) {
function postCircles() {
console.log(app.getActiveLayerGroup().getActiveDrawLayer().getKonvaLayer().children)
circlesAttrs = app.getActiveLayerGroup().getActiveDrawLayer().getKonvaLayer().getChildren().filter(e => e.attrs.name == 'circle-group').map(
(e) => {
console.log(e, "eeeeee")
@ -145,10 +165,13 @@ function receiveMessage(event)
} else if(data.type == "setTool"){
if (data.data == "null"){
app.setTool('Scroll');
} else{
} 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.type == 'setDraws') {
createDraws(data)
@ -183,45 +206,43 @@ function findActive() {
}
var range = document.getElementById('sliceRange');
range.min = 0;
app.addEventListener('loadend', function () {
range.max = app.getImage(0).getGeometry().getSize().get(2) - 1;
//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.loadURLs(['https://raw.githubusercontent.com/ivmartel/dwv/master/tests/data/bbmri-53323851.dcm'])
// app.addEventListener('load', () => {
// app.setTool('Scroll')
app.addEventListener('load', () => {
app.setTool('Scroll')
// // app.setTool('Draw')
// // createCircle({
// // type: 'Circle',
// // center: {
// // x: 10, y: 100
// // },
// // radius: 100
// // })
// // createRoi({
// // type: 'Roi',
// // points: [
// // {
// // x: 100, y: 100
// // },
// // {
// // x: 10, y: 100
// // }
// // ]
// // })
// // app.setDrawShape('Roi')
// // setTimeout(() => {
// // }, 3000)
// // setTimeout(() => {
// // }, 5000)
// })
// app.setTool('Draw')
// createCircle({
// type: 'Circle',
// center: {
// x: 10, y: 100
// },
// radius: 100
// })
// setTimeout(() => {
// console.log(app.getActiveLayerGroup().getActiveDrawLayer().getKonvaLayer().children)
// }, 3000)
// createRoi({
// type: 'Roi',
// points: [
// {
// x: 100, y: 100
// },
// {
// x: 10, y: 100
// }
// ]
// })
// app.setDrawShape('Roi')
// setTimeout(() => {
// }, 3000)
// setTimeout(() => {
// }, 5000)
})
app.addEventListener('slicechange', function () {
// update slider on slice change (for ex via mouse wheel)
@ -229,12 +250,12 @@ app.addEventListener('slicechange', function () {
var vc = lg.getActiveViewLayer().getViewController();
range.value = vc.getCurrentPosition().k;
});
range.oninput = function () {
var lg = app.getLayerGroupById(0);
var vc = lg.getActiveViewLayer().getViewController();
var index = vc.getCurrentIndex();
var values = index.getValues();
values[2] = this.value;
vc.setCurrentIndex(new dwv.math.Index(values));
}
// range.oninput = function () {
// var lg = app.getLayerGroupById(0);
// var vc = lg.getActiveViewLayer().getViewController();
// var index = vc.getCurrentIndex();
// var values = index.getValues();
// values[2] = this.value;
// vc.setCurrentIndex(new dwv.math.Index(values));
// }