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-24 19:23:43 +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

21
index.html
View File

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

123
index.js
View File

@ -11,7 +11,8 @@ var tools = {
Draw: { Draw: {
options: ['Circle', 'Roi'], options: ['Circle', 'Roi'],
type: 'factory' type: 'factory'
} },
ZoomAndPan: {}
}; };
app.init({ app.init({
@ -22,8 +23,8 @@ app.init({
parent.postMessage({'type': 'getDicom', data: ""}, "*") parent.postMessage({'type': 'getDicom', data: ""}, "*")
app.addEventListener('load', function () { app.addEventListener('load', function () {
app.setTool('Scroll'); app.setTool('Draw');
app.setDrawShape('Circle')
}); });
function createCircle(circleData) { function createCircle(circleData) {
@ -36,7 +37,19 @@ function createCircle(circleData) {
styles, styles,
app.getActiveLayerGroup().getActiveViewLayer().getViewController() 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, styles,
app.getActiveLayerGroup().getActiveViewLayer().getViewController() 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) { function createDraws(drawsData) {
drawsData.data.map((e) => { drawsData.data.map((e) => {
if (e.type == 'Circle') { if (e.type == 'Circle') {
@ -70,7 +91,6 @@ function createDraws(drawsData) {
function postCircles() { function postCircles() {
console.log(app.getActiveLayerGroup().getActiveDrawLayer().getKonvaLayer().children)
circlesAttrs = app.getActiveLayerGroup().getActiveDrawLayer().getKonvaLayer().getChildren().filter(e => e.attrs.name == 'circle-group').map( circlesAttrs = app.getActiveLayerGroup().getActiveDrawLayer().getKonvaLayer().getChildren().filter(e => e.attrs.name == 'circle-group').map(
(e) => { (e) => {
console.log(e, "eeeeee") console.log(e, "eeeeee")
@ -145,10 +165,13 @@ function receiveMessage(event)
} else if(data.type == "setTool"){ } else if(data.type == "setTool"){
if (data.data == "null"){ if (data.data == "null"){
app.setTool('Scroll'); app.setTool('Scroll');
} else{ } else if (data.data == 'Roi' || data.data == 'Circle'){
app.setTool('Draw'); app.setTool('Draw');
app.setDrawShape(data.data); app.setDrawShape(data.data);
} }
else if (data.data == 'ZoomAndPan') {
app.setTool('ZoomAndPan');
}
} }
else if (data.type == 'setDraws') { else if (data.type == 'setDraws') {
createDraws(data) createDraws(data)
@ -183,45 +206,43 @@ function findActive() {
} }
var range = document.getElementById('sliceRange');
range.min = 0;
app.addEventListener('loadend', function () { 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.addEventListener('load', () => {
// app.setTool('Scroll') app.setTool('Scroll')
// // app.setTool('Draw') // app.setTool('Draw')
// // createCircle({ // createCircle({
// // type: 'Circle', // type: 'Circle',
// // center: { // center: {
// // x: 10, y: 100 // x: 10, y: 100
// // }, // },
// // radius: 100 // radius: 100
// // }) // })
// // createRoi({ // setTimeout(() => {
// // type: 'Roi', // console.log(app.getActiveLayerGroup().getActiveDrawLayer().getKonvaLayer().children)
// // points: [ // }, 3000)
// // { // createRoi({
// // x: 100, y: 100 // type: 'Roi',
// // }, // points: [
// // { // {
// // x: 10, y: 100 // x: 100, y: 100
// // } // },
// // ] // {
// // }) // x: 10, y: 100
// // app.setDrawShape('Roi') // }
// // setTimeout(() => { // ]
// // }, 3000) // })
// // setTimeout(() => { // app.setDrawShape('Roi')
// // }, 5000) // setTimeout(() => {
// }) // }, 3000)
// setTimeout(() => {
// }, 5000)
})
app.addEventListener('slicechange', function () { app.addEventListener('slicechange', function () {
// update slider on slice change (for ex via mouse wheel) // update slider on slice change (for ex via mouse wheel)
@ -229,12 +250,12 @@ app.addEventListener('slicechange', function () {
var vc = lg.getActiveViewLayer().getViewController(); var vc = lg.getActiveViewLayer().getViewController();
range.value = vc.getCurrentPosition().k; range.value = vc.getCurrentPosition().k;
}); });
range.oninput = function () { // range.oninput = function () {
var lg = app.getLayerGroupById(0); // var lg = app.getLayerGroupById(0);
var vc = lg.getActiveViewLayer().getViewController(); // var vc = lg.getActiveViewLayer().getViewController();
var index = vc.getCurrentIndex(); // var index = vc.getCurrentIndex();
var values = index.getValues(); // var values = index.getValues();
values[2] = this.value; // values[2] = this.value;
vc.setCurrentIndex(new dwv.math.Index(values)); // vc.setCurrentIndex(new dwv.math.Index(values));
} // }