TrizTech/ohif-viewer
17
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP reorganization

Browse Source
This commit is contained in:
Erik Ziegler committed 2018-12-12 09:10:39 +01:00
1 parent 6706dfe634
commit 054e37dfb7
266 files changed
+98 -620
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

Packages/ohif-viewerbase/client/components/viewer/textMarkerDialogs/textMarkerDialogs.html
-99
View File
@@ -1,99 +0,0 @@
<template name="textMarkerDialogs">
<dialog id="textMarkerOptionsDialog" oncontextmenu="return false" class="textMarkerDialog noselect">
<h5>Spine Labels</h5>
<a class="closeTextMarkerDialogs">{{> iconCrossCircle}}</a>
<div class='optionsDiv'>
<div class="select2-wrapper optionBox">
<label for="startFrom">Label: </label>
<select name="start" id="startFrom" tabindex="-1" class="select2">
<!-- Cervical spine !-->
<option value="C1" selected>C1</option>
<option value="C2">C2</option>
<option value="C3">C3</option>
<option value="C4">C4</option>
<option value="C5">C5</option>
<option value="C6">C6</option>
<option value="C7">C7</option>
<!-- Thoracic spine !-->
<option value="T1">T1</option>
<option value="T2">T2</option>
<option value="T3">T3</option>
<option value="T4">T4</option>
<option value="T5">T5</option>
<option value="T6">T6</option>
<option value="T7">T7</option>
<option value="T8">T8</option>
<option value="T9">T9</option>
<option value="T10">T10</option>
<option value="T11">T11</option>
<option value="T12">T12</option>
<!-- Lumbar spine !-->
<option value="L1">L1</option>
<option value="L2">L2</option>
<option value="L3">L3</option>
<option value="L4">L4</option>
<option value="L5">L5</option>
</select>
</div>
<div class="optionBox">
<div class="btn-group iconSwitch" data-toggle="buttons">
<label for="ascending" class="btn btn-link" title="Add labels from head to feet (down) or feet to head (up)" data-toggle="tooltip" data-container="body">
<input type="checkbox" id="ascending"> <span class="on"><i class="fa fa-long-arrow-up" aria-hidden="true"></i></span> <span class="off"><i class="fa fa-long-arrow-down" aria-hidden="true"></i></span>
</label>
</div>
</div>
<button id="clearLabels" class="btn viewerBtn btn-xs" type="button">
Clear Labels <i class="viewerIcon-clear"></i>
</button>
</div>
</dialog>
<dialog id="textMarkerRelabelDialog" oncontextmenu="return false" class="textMarkerDialog noselect">
<h5>Change Spine Label</h5>
<div class="relabelOptions">
<div class="select2-wrapper optionBox">
<label for="relabelSelect">Label:</label>
<select name="relabelSelect" class="relabelSelect">
<!-- Cervical spine !-->
<option value="C1">C1</option>
<option value="C2">C2</option>
<option value="C3">C3</option>
<option value="C4">C4</option>
<option value="C5">C5</option>
<option value="C6">C6</option>
<option value="C7">C7</option>
<!-- Thoracic spine !-->
<option value="T1">T1</option>
<option value="T2">T2</option>
<option value="T3">T3</option>
<option value="T4">T4</option>
<option value="T5">T5</option>
<option value="T6">T6</option>
<option value="T7">T7</option>
<option value="T8">T8</option>
<option value="T9">T9</option>
<option value="T10">T10</option>
<option value="T11">T11</option>
<option value="T12">T12</option>
<!-- Lumbar spine !-->
<option value="L1">L1</option>
<option value="L2">L2</option>
<option value="L3">L3</option>
<option value="L4">L4</option>
<option value="L5">L5</option>
</select>
</div>
</div>
<div class="relabelButtons">
<button class="relabelRemove btn btn-xs btn-secondary viewerBtn">Delete</button>
<button class="relabelConfirm btn btn-xs viewerBtn">Save</button>
</div>
<div class="dialog arrow">
</div>
</dialog>
</template>
Packages/ohif-viewerbase/client/components/viewer/textMarkerDialogs/textMarkerDialogs.js
-124
View File
@@ -1,124 +0,0 @@
/**
* @TODO: add this to OHIF's Viewers
*/
import { Template } from 'meteor/templating';
import { $ } from 'meteor/jquery';
import { toolManager } from '../../../lib/toolManager';
import { viewportUtils } from '../../../lib/viewportUtils';
Template.textMarkerDialogs.events({
'change #startFrom'(e) {
const config = cornerstoneTools.textMarker.getConfiguration();
config.current = $(e.target).val();
//console.log("Changed starting point to: " + config.current);
},
'change #ascending'(e) {
const config = cornerstoneTools.textMarker.getConfiguration();
config.ascending = $(e.target).is(':checked');
const currentIndex = config.markers.indexOf(config.current);
config.current = config.markers[currentIndex];
const nextMarker = config.current;
$('#startFrom').val(nextMarker).trigger('change');
//console.log("Changed ascending to: " + config.ascending);
},
'click #clearLabels'() {
const element = viewportUtils.getActiveViewportElement();
const toolType = 'textMarker';
const toolStateManager = cornerstoneTools.globalImageIdSpecificToolStateManager;
const toolState = toolStateManager.toolState;
// We might want to make this a convenience function in cornerstoneTools
const stack = cornerstoneTools.getToolState(element, 'stack');
if (stack && stack.data.length && stack.data[0].imageIds.length) {
const imageIds = stack.data[0].imageIds;
// Clear the tool data for each image in the stack
imageIds.forEach( imageId => {
if(toolState.hasOwnProperty(imageId)) {
const toolData = toolState[imageId];
if (toolData.hasOwnProperty(toolType)) {
delete toolData[toolType];
}
}
});
}
cornerstone.updateImage(element);
},
'click .closeTextMarkerDialogs'() {
toolManager.setActiveTool();
document.getElementById('textMarkerOptionsDialog').close();
$('#spine').removeClass('active');
const defaultTool = toolManager.getDefaultTool();
$('#' + defaultTool).addClass('active');
}
});
Template.textMarkerDialogs.onRendered(function() {
const optionsDialog = $('#textMarkerOptionsDialog');
optionsDialog.draggable();
dialogPolyfill.registerDialog(optionsDialog.get(0));
const relabelDialog = $('#textMarkerRelabelDialog');
relabelDialog.draggable();
dialogPolyfill.registerDialog(relabelDialog.get(0));
$(document).on('click', event => {
if (!$(event.target).closest('.select2-wrapper').length) {
setTimeout(() => {
$('#startFrom, .relabelSelect').select2('close');
}, 200);
}
});
$(document).on('touchmove', event => {
if (!$(event.target).closest('.select2-container').length) {
setTimeout(() => {
$('#startFrom, .relabelSelect').select2('close');
}, 200);
}
});
$(() => {
FastClick.attach(document.body);
const $customSelects = $('#startFrom, .relabelSelect')
$customSelects.select2({
/**
* Adds needsclick class to all DOM elements in the Select2 results list
* so they can be accessible on iOS mobile when FastClick is initiated too.
*/
templateResult(result, container) {
if (!result.id) {
return result.text;
}
container.className += ' needsclick';
return result.text;
},
placeholder: 'C1',
minimumResultsForSearch: -1,
theme: 'viewerDropdown'
});
/**
* Additional to tweaking the templateResult option in Select2,
* add needsclick class to all DOM elements in the Select2 container,
* so they can be accessible on iOS mobile when FastClick is initiated too.
*
* More info about needsclick:
* https://github.com/ftlabs/fastclick#ignore-certain-elements-with-needsclick
*
*/
$customSelects.each( (index, el) =>{
$(el).data('select2').$container.find('*').addClass('needsclick');
});
});
});
Packages/ohif-viewerbase/client/components/viewer/textMarkerDialogs/textMarkerDialogs.styl
-147
View File
@@ -1,147 +0,0 @@
.textMarkerDialog
z-index: 1000
width: 260px
position: absolute
top: auto
left: auto
bottom: 3px
right: 3px
margin: auto
padding:.5em
background-image: linear-gradient(#2E608D, #23557F)
box-sizing: border-box
border: 1px black solid
border-radius: 5px
height: 81px
max-height: 81px
h5
color: #D1EDFB;
font-size: 14px;
line-height: 22px;
font-weight: 600;
cursor:default
.handle
width: 40px;
float: left;
height: 22px;
display: block;
margin-right: 10px;
position: relative;
margin-top: 1px;
margin-left: 1px;
#startFrom
margin-right:10px
#clearLabels
margin-left:10px
float:right
.optionBox
color: #d1edfb
margin-bottom: 5px
float: left
span.subLabel
width: 50px
display: block
float: left
line-height: 30px
> label
color: #d1edfb
float: left
min-width: 40px
line-height: 24px
font-size: 12px
font-weight: 600
.closeTextMarkerDialogs
position: absolute
top: 5px
right: 4px
padding: 5px
cursor: pointer
svg
width: 19px
height: 19px
fill: #d1edfb
&:hover
svg
fill: #FFF
.dialog.arrow
left: 50%
margin-left: -11px
border-top-width: 0
border-bottom-color: #999999
border-bottom-color: rgba(0, 0, 0, 0.25)
border-width: 11px
bottom: -10px
position: absolute
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #23557f;
&:after
content: " "
top: 1px
margin-left: -10px
border-top-width: 0
border-bottom-color: #23557f
border-width: 10px
button.btn-secondary
background-color: #CFE3F5;
border: 1px solid #E5F3FF;
font-size: 12px !important;
color:#0D416D
&:hover
color:#0D416D
#textMarkerRelabelDialog
margin: 0
.relabelOptions
padding: 15px 0px 0px 0px
.relabelSelect
margin-left: 5px
#textMarkerOptionsDialog
.optionsDiv
padding-top: 10px
//Avoids Cine Play and Text Marker dialog to overlap
#textMarkerOptionsDialog[open='open'] ~ #cineDialog[open='open']
bottom: 90px
.relabelButtons
text-align:right
button.viewerBtn
background-color: #5D9ACE;
border: 1px solid #6EAEE4;
font-size: 12px !important;
color:#FFF
line-height: 21px;
&:hover
color:#FFF
.iconSwitch
margin:0px 5px
.btn
span
display: none
.on
display: none
.off
display: block
&.btn-link, &.active, &:active, &:hover, &:focus, &.active:focus
background-color: #225682;
border: 1px solid #7AB0DE;
box-shadow: none;
padding: 1px 7px;
border-radius: 4px;
color: #d1edfb;
box-shadow: none;
outline: none;
&:hover
color:#fff
&.active
.on
display:block
.off
display: none