WIP reorganization
This commit is contained in:
parent
6706dfe634
commit
054e37dfb7
@ -5,7 +5,6 @@ aldeed:schema-index@1.1.1
|
|||||||
aldeed:simple-schema@1.5.4
|
aldeed:simple-schema@1.5.4
|
||||||
aldeed:template-extension@4.1.0
|
aldeed:template-extension@4.1.0
|
||||||
allow-deny@1.1.0
|
allow-deny@1.1.0
|
||||||
amplify@1.0.0
|
|
||||||
autoupdate@1.6.0-beta181.7
|
autoupdate@1.6.0-beta181.7
|
||||||
babel-compiler@7.2.3
|
babel-compiler@7.2.3
|
||||||
babel-runtime@1.3.0
|
babel-runtime@1.3.0
|
||||||
@ -36,6 +35,7 @@ ecmascript-runtime-client@0.8.0
|
|||||||
ecmascript-runtime-server@0.7.1
|
ecmascript-runtime-server@0.7.1
|
||||||
ejson@1.1.0
|
ejson@1.1.0
|
||||||
es5-shim@4.8.0
|
es5-shim@4.8.0
|
||||||
|
fastclick@1.0.13
|
||||||
fetch@0.1.0
|
fetch@0.1.0
|
||||||
fortawesome:fontawesome@4.7.0
|
fortawesome:fontawesome@4.7.0
|
||||||
geojson-utils@1.0.10
|
geojson-utils@1.0.10
|
||||||
|
|||||||
67
OHIFViewer/client/components/App.js
Normal file
67
OHIFViewer/client/components/App.js
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
import React, { Component } from 'react';
|
||||||
|
import { withRouter } from 'react-router';
|
||||||
|
import { Route, Switch } from 'react-router-dom';
|
||||||
|
import SecretRoute from './SecretRoute.js';
|
||||||
|
import { OHIF } from 'meteor/ohif:core';
|
||||||
|
import Provider from "react-redux/es/components/Provider";
|
||||||
|
|
||||||
|
const reload = () => window.location.reload();
|
||||||
|
const Studylist = OHIF.studylist.components.StudyList;
|
||||||
|
|
||||||
|
function setContext(context) {
|
||||||
|
/*Rollbar.configure({
|
||||||
|
payload: {
|
||||||
|
context
|
||||||
|
}
|
||||||
|
});*/
|
||||||
|
console.log(context);
|
||||||
|
}
|
||||||
|
|
||||||
|
class App extends Component {
|
||||||
|
componentDidMount() {
|
||||||
|
this.unlisten = this.props.history.listen((location, action) => {
|
||||||
|
setContext(window.location.pathname);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillUnmount() {
|
||||||
|
this.unlisten();
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<Provider store={window.store}>
|
||||||
|
<Switch>
|
||||||
|
<SecretRoute
|
||||||
|
exact
|
||||||
|
path="/studylist"
|
||||||
|
component={Studylist}
|
||||||
|
auth={this.props.auth}
|
||||||
|
store={this.props.store}
|
||||||
|
/>
|
||||||
|
<SecretRoute
|
||||||
|
exact
|
||||||
|
path="/"
|
||||||
|
component={Studylist}
|
||||||
|
auth={this.props.auth}
|
||||||
|
store={this.props.store}
|
||||||
|
/>
|
||||||
|
<SecretRoute
|
||||||
|
exact
|
||||||
|
path="/viewer"
|
||||||
|
component={ConnectedViewer}
|
||||||
|
auth={this.props.auth}
|
||||||
|
store={this.props.store}
|
||||||
|
/>
|
||||||
|
{/*<Route path="/silent-refresh.html" onEnter={reload} />
|
||||||
|
<Route path="/logout-redirect.html" onEnter={reload} />*/}
|
||||||
|
<Route render={() =>
|
||||||
|
<div> Sorry, this page does not exist. </div>}
|
||||||
|
/>
|
||||||
|
</Switch>
|
||||||
|
</Provider>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default withRouter(App);
|
||||||
@ -123,7 +123,7 @@ class Viewer extends Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (<Provider store={window.store}>
|
return (<>
|
||||||
<div className='viewerDialogs'>
|
<div className='viewerDialogs'>
|
||||||
<CineDialog/>
|
<CineDialog/>
|
||||||
</div>
|
</div>
|
||||||
@ -131,7 +131,7 @@ class Viewer extends Component {
|
|||||||
{/*<ToolbarSection/>*/}
|
{/*<ToolbarSection/>*/}
|
||||||
<FlexboxLayout studies={this.state.studies}/>
|
<FlexboxLayout studies={this.state.studies}/>
|
||||||
</div>
|
</div>
|
||||||
</Provider>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -12,7 +12,6 @@ Package.onUse(function(api) {
|
|||||||
api.versionsFrom('1.7');
|
api.versionsFrom('1.7');
|
||||||
|
|
||||||
api.use('ecmascript');
|
api.use('ecmascript');
|
||||||
api.use('standard-app-packages');
|
|
||||||
api.use('jquery');
|
api.use('jquery');
|
||||||
api.use('stylus');
|
api.use('stylus');
|
||||||
api.use('underscore');
|
api.use('underscore');
|
||||||
|
|||||||
@ -12,7 +12,6 @@ Package.onUse(function(api) {
|
|||||||
api.versionsFrom('1.7');
|
api.versionsFrom('1.7');
|
||||||
|
|
||||||
api.use('ecmascript');
|
api.use('ecmascript');
|
||||||
api.use('standard-app-packages');
|
|
||||||
|
|
||||||
// Our custom packages
|
// Our custom packages
|
||||||
api.use('ohif:core');
|
api.use('ohif:core');
|
||||||
|
|||||||
27
Packages/ohif-study-list/client/components/StudyList.js
Normal file
27
Packages/ohif-study-list/client/components/StudyList.js
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
import React, { Component } from 'react';
|
||||||
|
import Blaze from 'meteor/gadicc:blaze-react-component';
|
||||||
|
|
||||||
|
class StudyList extends Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div className='StudyList'>
|
||||||
|
<Blaze template="studylist" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
StudyList.propTypes = {
|
||||||
|
studies: PropTypes.array.isRequired
|
||||||
|
};
|
||||||
|
|
||||||
|
OHIF.studylist.components = {
|
||||||
|
StudyList
|
||||||
|
};
|
||||||
|
|
||||||
|
export default StudyList;
|
||||||
@ -1,2 +1,3 @@
|
|||||||
import './seriesDetailsModal';
|
import './seriesDetailsModal';
|
||||||
import './studylist';
|
import './studylist';
|
||||||
|
import './StudyList.js';
|
||||||
|
|||||||
@ -1,22 +0,0 @@
|
|||||||
<template name="imageThumbnail">
|
|
||||||
<div class="imageThumbnail">
|
|
||||||
<div class="imageThumbnailCanvas">
|
|
||||||
<img class="static-image"/>
|
|
||||||
</div>
|
|
||||||
<div class="imageThumbnailLoadingIndicator
|
|
||||||
thumbnailLoadingIndicator
|
|
||||||
{{ #if isLoading }}d-block{{/if}}">
|
|
||||||
<p>Loading {{percentComplete}}</p>
|
|
||||||
</div>
|
|
||||||
<div class="imageThumbnailErrorLoadingIndicator
|
|
||||||
thumbnailLoadingIndicator
|
|
||||||
{{ #if hasLoadingError }}d-block{{/if}}">
|
|
||||||
<p>Error</p>
|
|
||||||
</div>
|
|
||||||
{{#if showStackLoadingProgressBar}}
|
|
||||||
<div class="imageThumbnailProgressBar">
|
|
||||||
<div class="imageThumbnailProgressBarInner" style="width:{{stackPercentComplete}}%"></div>
|
|
||||||
</div>
|
|
||||||
{{/if}}
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@ -1,152 +0,0 @@
|
|||||||
import { Meteor } from 'meteor/meteor';
|
|
||||||
import { Template } from 'meteor/templating';
|
|
||||||
import { Session } from 'meteor/session';
|
|
||||||
import { OHIF } from 'meteor/ohif:core';
|
|
||||||
import { cornerstone } from 'meteor/ohif:cornerstone';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Asynchronous wrapper around Cornerstone's renderToCanvas method.
|
|
||||||
*
|
|
||||||
* @param {HTMLElement} canvasElement An HTML <canvas> element
|
|
||||||
* @param {Image} image A Cornerstone Image
|
|
||||||
*
|
|
||||||
* @return {Promise} A promise tracking the progress of the rendering. Resolves empty.
|
|
||||||
*/
|
|
||||||
function renderAsync(canvasElement, image) {
|
|
||||||
return new Promise((resolve, reject) => {
|
|
||||||
try {
|
|
||||||
cornerstone.renderToCanvas(canvasElement, image);
|
|
||||||
resolve();
|
|
||||||
} catch(error) {
|
|
||||||
reject(error);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
Template.imageThumbnail.onCreated(() => {
|
|
||||||
const instance = Template.instance();
|
|
||||||
|
|
||||||
instance.isLoading = new ReactiveVar(false);
|
|
||||||
instance.hasLoadingError = new ReactiveVar(false);
|
|
||||||
|
|
||||||
// Get the image ID for current thumbnail
|
|
||||||
instance.getThumbnailImageId = () => {
|
|
||||||
const settingPath = 'public.ui.useMiddleSeriesInstanceAsThumbnail';
|
|
||||||
const useMiddleFrame = OHIF.utils.ObjectPath.get(Meteor.settings, settingPath);
|
|
||||||
const stack = instance.data.thumbnail.stack;
|
|
||||||
const lastIndex = (stack.numImageFrames || stack.images.length || 1) - 1;
|
|
||||||
let imageIndex = useMiddleFrame ? Math.floor(lastIndex / 2) : 0;
|
|
||||||
let imageInstance;
|
|
||||||
|
|
||||||
if (stack.isMultiFrame) {
|
|
||||||
imageInstance = stack.images[0];
|
|
||||||
} else {
|
|
||||||
imageInstance = stack.images[imageIndex];
|
|
||||||
imageIndex = undefined;
|
|
||||||
}
|
|
||||||
|
|
||||||
return imageInstance.getImageId(imageIndex, true);
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
Template.imageThumbnail.onRendered(() => {
|
|
||||||
const instance = Template.instance();
|
|
||||||
|
|
||||||
// Declare DOM and jQuery objects
|
|
||||||
const $parent = instance.$('.imageThumbnail');
|
|
||||||
const $thumbnailElement = $parent.find('.imageThumbnailCanvas');
|
|
||||||
|
|
||||||
instance.refreshImage = () => {
|
|
||||||
const imageElement = $thumbnailElement.find('img').get(0);
|
|
||||||
|
|
||||||
// Activate the loading state
|
|
||||||
instance.isLoading.set(true);
|
|
||||||
instance.hasLoadingError.set(false);
|
|
||||||
|
|
||||||
// Clear the previous image
|
|
||||||
imageElement.removeAttribute('src');
|
|
||||||
|
|
||||||
// Define a handler for success on image load
|
|
||||||
const loadSuccess = image => {
|
|
||||||
// This is an off-screen canvas. It's used to get dataURL images by using
|
|
||||||
// cornerstone.renderToCanvas function.
|
|
||||||
const canvasElement = document.createElement('canvas');
|
|
||||||
canvasElement.width = 193;
|
|
||||||
canvasElement.height = 123;
|
|
||||||
|
|
||||||
// Render the image to canvas to be able to get its dataURL
|
|
||||||
renderAsync(canvasElement, image).then(() => {
|
|
||||||
instance.isLoading.set(false);
|
|
||||||
|
|
||||||
imageElement.src = canvasElement.toDataURL('image/jpeg', 1);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// Define a handler for error on image load
|
|
||||||
const loadError = () => {
|
|
||||||
instance.isLoading.set(false);
|
|
||||||
instance.hasLoadingError.set(true);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Call cornerstone image loader with the defined handlers
|
|
||||||
cornerstone.loadAndCacheImage(instance.imageId).then(loadSuccess, loadError);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Run this computation every time the current study is changed
|
|
||||||
instance.autorun(() => {
|
|
||||||
// Check if there is a reactive var set for current study
|
|
||||||
if (instance.data.currentStudy) {
|
|
||||||
// Register a dependency from this computation on current study
|
|
||||||
instance.data.currentStudy.dep.depend();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Depend on external data and re-run this computation when it changes
|
|
||||||
Template.currentData();
|
|
||||||
|
|
||||||
// Get the image ID. If it is the same as the currently rendered imageId,
|
|
||||||
// refresh the image.
|
|
||||||
const imageId = instance.getThumbnailImageId();
|
|
||||||
if (imageId !== instance.imageId) {
|
|
||||||
instance.imageId = imageId;
|
|
||||||
|
|
||||||
instance.refreshImage();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
Template.imageThumbnail.helpers({
|
|
||||||
// Executed every time the thumbnail image loading progress is changed
|
|
||||||
percentComplete() {
|
|
||||||
const instance = Template.instance();
|
|
||||||
|
|
||||||
// Get the encoded image ID for thumbnail
|
|
||||||
const encodedImageId = OHIF.string.encodeId(instance.imageId);
|
|
||||||
|
|
||||||
// Register a dependency from this computation on Session key
|
|
||||||
const percentComplete = Session.get('CornerstoneThumbnailLoadProgress' + encodedImageId);
|
|
||||||
|
|
||||||
// Return the complete percent amount of the image loading
|
|
||||||
if (percentComplete && percentComplete !== 100) {
|
|
||||||
return percentComplete + '%';
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// Return how much the stack has already loaded
|
|
||||||
stackPercentComplete() {
|
|
||||||
const stack = Template.instance().data.thumbnail.stack;
|
|
||||||
const progress = Session.get(`StackProgress:${stack.displaySetInstanceUid}`);
|
|
||||||
return progress && progress.percentComplete;
|
|
||||||
},
|
|
||||||
|
|
||||||
showStackLoadingProgressBar() {
|
|
||||||
return OHIF.uiSettings.showStackLoadingProgressBar;
|
|
||||||
},
|
|
||||||
|
|
||||||
isLoading() {
|
|
||||||
return Template.instance().isLoading.get();
|
|
||||||
},
|
|
||||||
|
|
||||||
hasLoadingError() {
|
|
||||||
return Template.instance().hasLoadingError.get();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
@ -1,67 +0,0 @@
|
|||||||
@import "{ohif:design}/app"
|
|
||||||
|
|
||||||
.thumbnailEntry.active .imageThumbnail
|
|
||||||
theme('border-color', '$activeColor')
|
|
||||||
box-shadow: none
|
|
||||||
transition($sidebarTransition)
|
|
||||||
|
|
||||||
.imageThumbnail
|
|
||||||
theme('box-shadow', 'inset 0 0 0 1px $uiBorderColorDark')
|
|
||||||
theme('background-color', '$primaryBackgroundColor')
|
|
||||||
border: 5px solid transparent
|
|
||||||
border-radius: 12px
|
|
||||||
height: 135px
|
|
||||||
margin: 0 auto
|
|
||||||
padding 1px 7px
|
|
||||||
position: relative
|
|
||||||
transition($sidebarTransition)
|
|
||||||
width: 217px
|
|
||||||
-moz-background-clip: padding
|
|
||||||
-webkit-background-clip: padding
|
|
||||||
background-clip: padding-box
|
|
||||||
|
|
||||||
.imageThumbnailClone
|
|
||||||
margin: 0 !important
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
theme('border-color', '$hoverColor')
|
|
||||||
box-shadow: none
|
|
||||||
|
|
||||||
.imageThumbnailCanvas
|
|
||||||
height: 100%
|
|
||||||
overflow: hidden
|
|
||||||
|
|
||||||
img
|
|
||||||
-webkit-user-drag: none
|
|
||||||
|
|
||||||
.thumbnailLoadingIndicator
|
|
||||||
display: none
|
|
||||||
pointer-events: none
|
|
||||||
theme('color', '$textSecondaryColor')
|
|
||||||
height: 20px
|
|
||||||
width: 100%
|
|
||||||
top: 0
|
|
||||||
left: 0
|
|
||||||
right: 0
|
|
||||||
bottom: 0
|
|
||||||
margin: auto
|
|
||||||
position: absolute
|
|
||||||
|
|
||||||
&.d-block
|
|
||||||
display: block;
|
|
||||||
|
|
||||||
p
|
|
||||||
text-align: center
|
|
||||||
font-size: 10pt
|
|
||||||
|
|
||||||
.imageThumbnailProgressBar
|
|
||||||
position: relative
|
|
||||||
width: 100%
|
|
||||||
height: 3px
|
|
||||||
top: -5px
|
|
||||||
|
|
||||||
.imageThumbnailProgressBarInner
|
|
||||||
height: 100%
|
|
||||||
width: 0
|
|
||||||
border-radius: 5px
|
|
||||||
theme('background-color', '$activeColor')
|
|
||||||
@ -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>
|
|
||||||
@ -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');
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@ -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
|
|
||||||
@ -154,10 +154,6 @@ Package.onUse(function(api) {
|
|||||||
api.addFiles('client/components/viewer/confirmDeleteDialog/confirmDeleteDialog.js', 'client');
|
api.addFiles('client/components/viewer/confirmDeleteDialog/confirmDeleteDialog.js', 'client');
|
||||||
api.addFiles('client/components/viewer/confirmDeleteDialog/confirmDeleteDialog.styl', 'client');
|
api.addFiles('client/components/viewer/confirmDeleteDialog/confirmDeleteDialog.styl', 'client');
|
||||||
|
|
||||||
api.addFiles('client/components/viewer/textMarkerDialogs/textMarkerDialogs.html', 'client');
|
|
||||||
api.addFiles('client/components/viewer/textMarkerDialogs/textMarkerDialogs.js', 'client');
|
|
||||||
api.addFiles('client/components/viewer/textMarkerDialogs/textMarkerDialogs.styl', 'client');
|
|
||||||
|
|
||||||
api.addFiles('client/components/viewer/seriesQuickSwitch/seriesQuickSwitch.html', 'client');
|
api.addFiles('client/components/viewer/seriesQuickSwitch/seriesQuickSwitch.html', 'client');
|
||||||
api.addFiles('client/components/viewer/seriesQuickSwitch/seriesQuickSwitch.styl', 'client');
|
api.addFiles('client/components/viewer/seriesQuickSwitch/seriesQuickSwitch.styl', 'client');
|
||||||
api.addFiles('client/components/viewer/seriesQuickSwitch/seriesQuickSwitch.js', 'client');
|
api.addFiles('client/components/viewer/seriesQuickSwitch/seriesQuickSwitch.js', 'client');
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user