Work towards tabbed panels. Still very broken

2015-10-15 15:05:41 +02:00
1 parent 9803046f2d
commit 7217b7c67d
@@ -1,7 +1,7 @@
 <template name="studyBrowser">
    <div class="studyBrowser">
-        {{#each studies}}
-            {{> thumbnails}}
-        {{/each}}
+        {{ #each studies }}
+            {{ >thumbnails }}
+        {{ /each }}
    </div>
 </template>
@@ -1,6 +1,5 @@
 Template.studyBrowser.helpers({
  studies : function() {
-    var studies = Session.get('studies');
-    return studies;
+    return this.studies;
  }
 });
@@ -1,6 +1,6 @@
 <template name="thumbnailEntry">
    <div class="thumbnailEntry">
-        {{ > imageThumbnail }}
+        {{ >imageThumbnail }}
        <div class='seriesDescription noselect'>{{seriesDescription}}</div>
    </div>
 </template>
@@ -17,7 +17,7 @@ function cloneElement(element, targetId) {
    return clone;
 }

-function thumbnailDragStartHandler(e) {
+function thumbnailDragStartHandler(e, studies) {
    // Prevent any scrolling behaviour normally caused by the original event
    e.originalEvent.preventDefault();

@@ -28,7 +28,8 @@ function thumbnailDragStartHandler(e) {
    // Store this data for use during drag and drop
    OHIF.viewer.dragAndDropData = {
        studyInstanceUid: imageThumbnail.data('studyInstanceUid'),
-        seriesInstanceUid: imageThumbnail.data('seriesInstanceUid')
+        seriesInstanceUid: imageThumbnail.data('seriesInstanceUid'),
+        studies: studies
    };
    
    // Clone the image thumbnail
@@ -201,7 +202,8 @@ Template.thumbnailEntry.onRendered(function() {
 Template.thumbnailEntry.events({
    // Touch drag/drop events
    'touchstart .thumbnailEntry, mousedown .thumbnailEntry': function(e) {
-        thumbnailDragStartHandler(e);
+        var studies = Template.parentData(2).studies;
+        thumbnailDragStartHandler(e, studies);
    },
    'touchmove .thumbnailEntry': function(e) {
        thumbnailDragHandler(e, e.currentTarget);
@@ -158,13 +158,13 @@ function loadSeriesIntoViewport(data) {
            OHIF.viewer.updateImageSynchronizer.add(element);
        }
        
-        enablePrefetchOnElement();
+        //enablePrefetchOnElement();
        displayReferenceLines();
    });
 }

 Template.imageViewerViewport.onRendered(function() {
-    var studies = Session.get('studies');
+    var studies = this.data.studies;
    var viewport = this.find(".imageViewerViewport");
    var viewportIndex = $(".imageViewerViewport").index(viewport);

@@ -3,7 +3,7 @@
        {{ #each viewportArray }}
        <div class="viewportContainer" style="height:{{height}}%;width:{{width}}%;">
            <div class="removable">
-                {{ > imageViewerViewport}}
+                {{ >imageViewerViewport studies=studies activeViewport=activeViewport}}
            </div>
        </div>
        {{ /each }}
@@ -1,30 +1,50 @@
-function getNumViewports() {
-    var viewportRows = Session.get('viewportRows');
-    var viewportColumns = Session.get('viewportColumns');
-    return viewportRows * viewportColumns;
-}
-
 Template.imageViewerViewports.helpers({
  height: function() {
-    var viewportRows = Session.get('viewportRows');
+    var viewportRows;
+    if (!Template.parentData(1).viewportRows) {
+        viewportRows = 1;
+    } else {
+        viewportRows = Template.parentData(1).viewportRows.get();
+    }
    return 100 / viewportRows;
  },
  width: function() {
-    var viewportColumns = Session.get('viewportColumns');
+    var viewportColumns;
+    if (!Template.parentData(1).viewportColumns) {
+        viewportColumns = 1;
+    } else {
+        viewportColumns = Template.parentData(1).viewportColumns.get();
+    }
    return 100 / viewportColumns;
  },
  viewportArray: function() {
    // This is a really annoying thing to have to do, but Meteor
    // doesn't want to let me use another type of helper.
-    var numViewports = getNumViewports();
+    var viewportRows;
+    if (!this.viewportRows) {
+        viewportRows = 1;
+    } else {
+        viewportRows = this.viewportRows.get();
+    }
+
+    var viewportColumns;
+    if (!this.viewportColumns) {
+        viewportColumns = 1;
+    } else {
+        viewportColumns = this.viewportColumns.get();
+    }
+    
+    var numViewports = viewportRows * viewportColumns;

    var array = [];
    for (var i=0; i < numViewports; ++i) {
        var data = {
-            viewportIndex: i
+            viewportIndex: i,
+            studies: this.studies,
+            activeViewport: this.activeViewport
        };
        array.push(data);
    }
    return array;
-  }
+  },
 });
@@ -0,0 +1,6 @@
+<template name="layoutButton">
+    <button id="layout" type="button" class="btn btn-sm btn-default dropdown-toggle" data-container="body" data-toggle="dropdown" aria-expanded="false" data-placement="right" title="Layout" rel="tooltip">
+        <span class="fa fa-th-large"></span>
+    </button>
+    {{  >layoutChooser }}
+</template>
@@ -28,14 +28,30 @@ Template.layoutChooser.events({
    'click .layoutChooser table td': function(evt) {
        $('#imageViewerViewports').remove();
        var container = $(".viewerMain").get(0);
-        UI.render(Template.imageViewerViewports, container);

        var currentCell = $(evt.currentTarget);
        var rowIndex = currentCell.closest('tr').index();
        var columnIndex = currentCell.index();

+        var data = {};
+
        // Add 1 because the indices start from zero
-        Session.set('viewportRows', rowIndex + 1);
-        Session.set('viewportColumns', columnIndex + 1);
+        if (this.viewportRows) {
+            this.viewportRows.set(rowIndex + 1);
+            data.viewportRows = this.viewportRows;
+        } else {
+            data.viewportRows = 1;
+        }
+
+        if (this.viewportColumns) {
+            this.viewportColumns.set(columnIndex + 1);
+            data.viewportColumns = this.viewportColumns;
+        } else {
+            data.viewportColumns = 1;
+        }
+
+        data.studies = Template.parentData(2).studies;
+        data.activeViewport = Template.parentData(2).activeViewport;
+        UI.renderWithData(Template.imageViewerViewports, data, container);
    }
 });
@@ -0,0 +1,9 @@
+<template name="playClipButton">
+    <button id="playClip" type="button" class="imageViewerCommand btn btn-sm btn-default" data-container="body" data-toggle="tooltip" data-placement="bottom" title="Play/Stop Clip">
+        {{ #if isPlaying }}
+            <span class="fa fa-stop"></span>
+        {{ else }}
+            <span class="fa fa-play"></span>
+        {{ /if }}
+    </button>
+</template>
@@ -0,0 +1,7 @@
+Template.playClipButton.helpers({
+    'isPlaying': function() {
+        Session.get('UpdateCINE');
+        var viewportIndex = Session.get('ActiveViewport');
+        return !!OHIF.viewer.isPlaying[viewportIndex];
+    }
+});
@@ -0,0 +1,5 @@
+<template name="simpleToolbarButton">
+    <button id="{{id}}" type="button" class="{{classes}} btn btn-sm btn-default" data-container="body" data-toggle="tooltip" data-placement="bottom" title="{{title}}">
+        <span class="{{iconClasses}}"></span>
+    </button>
+</template>
@@ -0,0 +1,17 @@
+<template name="toolbar">
+    <div id='toolbar'>
+        <div class="btn-group">
+            {{ #each button }}
+                {{ >simpleToolbarButton }}
+            {{ /each }}
+
+            {{ #if includePlayClipButton }}
+                {{ > playClipButton activeViewport=activeViewport}}
+            {{ /if }}
+
+            {{ #if includeLayoutButton }}
+                {{ > layoutButton viewportRows=viewportRows viewportColumns=viewportColumns}}
+            {{ /if }}
+        </div>
+    </div>
+</template>
@@ -0,0 +1,121 @@
+function getDefaultButtonData() {
+    var buttonData = [];
+
+    buttonData.push({
+        id: 'wwwc',
+        title: 'WW/WC',
+        classes: 'imageViewerTool',
+        iconClasses: 'fa fa-sun-o'
+    });
+
+    buttonData.push({
+        id: 'invert',
+        title: 'Invert',
+        classes: 'imageViewerCommand',
+        iconClasses: 'fa fa-adjust'
+    });
+
+    buttonData.push({
+        id: 'zoom',
+        title: 'Zoom',
+        classes: 'imageViewerTool',
+        iconClasses: 'fa fa-search'
+    });
+
+    buttonData.push({
+        id: 'pan',
+        title: 'Pan',
+        classes: 'imageViewerTool',
+        iconClasses: 'fa fa-arrows'
+    });
+
+    buttonData.push({
+        id: 'stackScroll',
+        title: 'Stack Scroll',
+        classes: 'imageViewerTool',
+        iconClasses: 'fa fa-bars'
+    });
+
+    buttonData.push({
+        id: 'length',
+        title: 'Length Measurement',
+        classes: 'imageViewerTool',
+        iconClasses: 'fa fa-arrows-v'
+    });
+
+    buttonData.push({
+        id: 'angle',
+        title: 'Angle Measurement',
+        classes: 'imageViewerTool',
+        iconClasses: 'fa fa-angle-left'
+    });
+
+    buttonData.push({
+        id: 'dragProbe',
+        title: 'Pixel Probe',
+        classes: 'imageViewerTool',
+        iconClasses: 'fa fa-dot-circle-o'
+    });
+
+    buttonData.push({
+        id: 'ellipticalRoi',
+        title: 'Elliptical ROI',
+        classes: 'imageViewerTool',
+        iconClasses: 'fa fa-circle-o'
+    });
+
+    buttonData.push({
+        id: 'rectangleRoi',
+        title: 'Rectangle ROI',
+        classes: 'imageViewerTool',
+        iconClasses: 'fa fa-square-o'
+    });
+    return buttonData;
+}
+
+Template.toolbar.events({
+    'click .imageViewerTool': function(e) {
+        var tool = e.currentTarget.id;
+        console.log('Setting active tool to: ' + tool);
+        toolManager.setActiveTool(tool);
+    },
+    'click .imageViewerCommand': function(e) {
+        var command = e.currentTarget.id;
+        if (!OHIF.viewer.functionList.hasOwnProperty(command)) {
+            return;
+        }
+        var viewportIndex = Session.get('ActiveViewport');
+        var element = $('.imageViewerViewport').get(viewportIndex);
+        OHIF.viewer.functionList[command](element);
+    }
+});
+
+Template.toolbar.onRendered(function() {
+    var tooltipButtons = $('[data-toggle="tooltip"]');
+    tooltipButtons.tooltip(OHIF.viewer.tooltipConfig);
+
+    // Enable tooltips for the layout button
+    var extraTooltipButtons = $('[rel="tooltip"]');
+    extraTooltipButtons.tooltip(OHIF.viewer.tooltipConfig);
+});
+
+Template.toolbar.helpers({
+    'button': function() {
+        if (this.buttonData) {
+            return this.buttonData;
+        }
+        return getDefaultButtonData();
+    },
+    'includePlayClipButton': function() {
+        if (this.includePlayClipButton !== undefined) {
+            return this.includePlayClipButton;
+        }
+        return true;
+    },
+    'includeLayoutButton': function() {
+        if (this.includeLayoutButton !== undefined) {
+            return this.includeLayoutButton;
+        }
+        return true;
+    }
+});
@@ -0,0 +1,15 @@
+#toolbar
+  background-color: black
+  text-align: center
+  
+  .btn-group
+    display: inline-block
+    
+    button
+      text-align: center
+      color: #ffffff
+      background-color: #424242
+      border-color: #424242
+      
+      &.active, &:active
+        background-color: #3B678E