AWV-3: Transforming the CINE inputs in form components

Packages/ohif-core/client/components/base/index.js

@@ -3,6 +3,10 @@ import './component.js';
 import './mixin.js';
 import './template.js';
 
+// Section
+import './section/section.html';
+import './section/section.js';
+
 // Mixins
 import './mixins/component.js';
 import './mixins/form.js';

Packages/ohif-core/client/components/base/mixins/component.js

@@ -2,15 +2,9 @@ import { OHIF } from 'meteor/ohif:core';
 import { Template } from 'meteor/templating';
 
 /*
- * component: create the base structure to aplly specific component mixins
+ * component: base component structure
  */
 OHIF.mixins.component = new OHIF.Mixin({
     composition: {
-        onCreated() {
-            const instance = Template.instance();
-
-            // Declare a property that will be shared among all dependent mixins
-            instance.component = new OHIF.Component(this);
-        }
     }
 });

Packages/ohif-core/client/components/base/mixins/schemaData.js

@@ -77,6 +77,16 @@ OHIF.mixins.schemaData = new OHIF.Mixin({
                 data.label = new ReactiveVar(currentSchema.label);
             }
 
+            // Set the min value
+            if (_.isUndefined(data.min) && currentSchema.min) {
+                data.min = currentSchema.min;
+            }
+
+            // Set the max value
+            if (_.isUndefined(data.max) && currentSchema.max) {
+                data.max = currentSchema.max;
+            }
+
             // Set the emptyOption data attribute if given on schema
             if (currentSchema.emptyOption) {
                 data.emptyOption = currentSchema.emptyOption;

Packages/ohif-core/client/components/base/section/section.html

@@ -0,0 +1,3 @@
+<template name="section">
+    {{>instance.renderFunction.get instance.sectionData.get}}
+</template>

Packages/ohif-core/client/components/base/section/section.js

@@ -0,0 +1,62 @@
+import { OHIF } from 'meteor/ohif:core';
+
+Template.section.onCreated(() => {
+    const instance = Template.instance();
+
+    // Create the render function and section data as reactive objects
+    instance.renderFunction = new ReactiveVar(null);
+    instance.sectionData = new ReactiveVar(null);
+
+    // Get the section name
+    const sectionName = instance.data;
+
+    // Stop here if no section name was defined
+    if (!sectionName) {
+        return;
+    }
+
+    // Get the content block
+    const templateContentBlock = instance.view.templateContentBlock;
+
+    // Check if it is defining or printing the section content
+    if (templateContentBlock) {
+        // Get the parent component of this section
+        const component = OHIF.blaze.getParentComponent(instance.view, '_wrapperComponent');
+
+        // Stop here if this section is not inside a component
+        if (!component) {
+            return;
+        }
+
+        // Define the content
+        component.templateInstance.sections[sectionName] = {
+            data: component.templateInstance.data,
+            renderFunction: templateContentBlock.renderFunction
+        };
+    } else {
+        // Wait for re-rendering and print the section content
+        Tracker.afterFlush(() => {
+            // Get the parent component of this section
+            const component = OHIF.blaze.getParentComponent(instance.view, '_wrapperComponent');
+
+            // Stop here if this section is not inside a component
+            if (!component) {
+                return;
+            }
+
+            // Get the defined section content
+            const section = component.templateInstance.sections[sectionName];
+
+            // Stop here if the section content is not defined yet
+            if (!section) {
+                return;
+            }
+
+            // Set the section data on its respective reactive object
+            instance.sectionData.set(section.data);
+
+            // Set the render function on its respective reactive object
+            instance.renderFunction.set(new Template(section.renderFunction));
+        });
+    }
+});

Packages/ohif-core/client/components/base/template.js

@@ -50,23 +50,27 @@ Template.baseComponent.constructView = function(contentFunc, elseFunc) {
     let contentFunction = () => {
         // Create the most inner content function
         const innerContentFunction = () => {
-            // Assign properties to all wrappers after template's creation
-            template.onCreated(() => {
-                const instance = Template.instance();
-
-                // Assign the template most outer wrapper
-                instance.wrapper = wrapperInstances[0] || instance;
-
-                // Iterate over all wrappers and assign the component to them
-                wrapperInstances.forEach(wrappeInstance => {
-                    wrappeInstance.component = instance.component;
-                });
-            });
-
             // Return the view instance
             return template.constructView(contentFunc, elseFunc);
         };
 
+        // Assign properties to all wrappers after template's creation
+        template.onCreated(() => {
+            const instance = Template.instance();
+
+            // create the base structure to aplly specific component mixins
+            instance.component = new OHIF.Component(instance);
+
+            // Assign the template most outer wrapper
+            instance.wrapper = wrapperInstances[0] || instance;
+
+            // Iterate over all wrappers and assign the component to them
+            wrapperInstances.forEach(wrapperInstance => {
+                wrapperInstance.view._wrapperComponent = instance.component;
+                wrapperInstance.component = instance.component;
+            });
+        });
+
         // Apply the mixins to the component
         OHIF.Mixin.initAll(template, data);
 

Packages/ohif-core/client/components/base/templates/input.html

@@ -6,6 +6,10 @@
         name="{{this.name}}"
         value="{{reactive this.value}}"
         placeholder="{{this.placeholder}}"
+        checked="{{#if this.checked}}checked{{/if}}"
+        min="{{this.min}}"
+        max="{{this.max}}"
+        maxlength="{{choose this.maxlength this.max}}"
         {{this.tagAttributes}}
     >
     {{>UI.contentBlock}}

Packages/ohif-core/client/components/base/wrappers/label.html

@@ -3,7 +3,7 @@
         {{#if this.labelAfter}}
             {{>UI.contentBlock}}
         {{/if}}
-        <span class="wrapperText">{{reactive this.label}}</span>
+        <span class="wrapperText">{{>section 'labelBeforeText'}}{{reactive this.label}}{{>section 'labelAfterText'}}</span>
         {{#unless this.labelAfter}}
             {{>UI.contentBlock}}
         {{/unless}}

Packages/ohif-core/client/components/base/wrappers/title.html

@@ -3,7 +3,7 @@
         {{#if this.labelAfter}}
             {{>UI.contentBlock}}
         {{/if}}
-        <span class="wrapperText">{{reactive this.label}}</span>
+        <span class="wrapperText">{{>section 'labelBeforeText'}}{{reactive this.label}}{{>section 'labelAfterText'}}</span>
         {{#unless this.labelAfter}}
             {{>UI.contentBlock}}
         {{/unless}}

Packages/ohif-core/client/components/bootstrap/index.js

@@ -5,6 +5,7 @@ import './input/checkbox.html';
 import './input/hidden.html';
 import './input/groupRadio.html';
 import './input/radio.html';
+import './input/range.html';
 import './input/select.html';
 import './input/text.html';
 import './input/selectTree.html';

Packages/ohif-core/client/components/bootstrap/input/range.html

@@ -0,0 +1,13 @@
+<template name="inputRange">
+    {{#baseComponent (extend this
+        base='baseInput'
+        type='range'
+        mixins=(concat 'input ' this.mixins)
+        wrappers=(concat ''
+            (valueIf reactive this.label 'wrapperLabel ' '')
+            this.wrappers
+        )
+    )}}
+        {{>UI.contentBlock}}
+    {{/baseComponent}}
+</template>

Packages/ohif-core/client/lib/blaze.js

@@ -31,12 +31,12 @@ OHIF.blaze.getParentView = (view, parentViewName) => {
 };
 
 // Search for the parent component of the given view
-OHIF.blaze.getParentComponent = view => {
+OHIF.blaze.getParentComponent = (view, property='_component') => {
     let currentView = view;
     while (currentView) {
         currentView = currentView.originalParentView || currentView.parentView;
-        if (currentView && currentView._component) {
+        if (currentView && currentView[property]) {
-            return currentView._component;
+            return currentView[property];
         }
     }
 };

Packages/viewerbase/client/components/viewer/cineDialog/cineDialog.html

@@ -1,5 +1,5 @@
 <template name="cineDialog">
-    <div id="cineDialog" class="noselect">
+    {{#form id='cineDialog' class='noselect' schema=instance.schema}}
         <h5>CINE Controls</h5>
         <div class="btn-group">
             <a id="cineFirstButton" title="Skip to first image" class="btn" data-toggle="tooltip">
@@ -14,7 +14,7 @@
             <a id="cinePlayButton" title="Play / Stop" class="btn {{#if isPlaying}}active{{/if}}" data-toggle="tooltip">
                 {{#if isPlaying}}
                     <i class="fa fa-fw fa-stop"></i>
-                    {{else}}
+                {{else}}
                     <i class="fa fa-fw fa-play"></i>
                 {{/if}}
             </a>
@@ -30,19 +30,13 @@
         </div>
         <div id="cineOptions">
             <div id="loopSection">
-                <label for="cineLoopCheckbox">Loop?</label>
+                {{>inputCheckbox id='cineLoopCheckbox' key='loop'}}
-                <input type="checkbox" checked id="cineLoopCheckbox" />
             </div>
             <div id="fpsSection">
-                <label for="cineSlider">
+                {{#inputRange id='cineSlider' key='speed' labelClass='form-group'}}
-                    Cine Speed: <span id="fps">{{framerate}}</span>
+                    {{#section 'labelAfterText'}}: <span id="fps">{{framerate}}</span>{{/section}}
-                </label>
+                {{/inputRange}}
-                <input type="range"
-                       id="cineSlider"
-                       min="1"
-                       max="90"
-                       value="{{framerate}}"/>
             </div>
         </div>
-    </div>
+    {{/form}}
 </template>

Packages/viewerbase/client/components/viewer/cineDialog/cineDialog.js

@@ -1,8 +1,24 @@
 import { OHIF } from 'meteor/ohif:core';
+import { SimpleSchema } from 'meteor/aldeed:simple-schema';
 
 Template.cineDialog.onCreated(() => {
     const instance = Template.instance();
 
+    instance.schema = new SimpleSchema({
+        loop: {
+            type: Boolean,
+            label: 'Loop',
+            defaultValue: true
+        },
+        speed: {
+            type: Number,
+            label: 'Cine Speed',
+            defaultValue: 24,
+            min: 1,
+            max: 90
+        }
+    });
+
     instance.updateFramerate = rate => {
         OHIF.viewer.cine.framesPerSecond = rate;
 

Packages/viewerbase/lib/viewportFunctions.js

@@ -134,3 +134,5 @@ isPlaying = () => {
     // Return true if the clip is playing
     return !_.isUndefined(clipState.intervalId);
 };
+// Create an event listener to update playing state when a clip stops playing
+$(window).on('CornerstoneToolsClipStopped', () => Session.set('UpdateCINE', Random.id()));