AWV-3: Transforming the CINE inputs in form components

2016-09-03 18:16:57 -03:00 · 2016-09-03 18:16:57 -03:00 · 20b49d5036
commit 20b49d5036
parent 176b503c5a
15 changed files with 145 additions and 38 deletions
--- a/Packages/ohif-core/client/components/base/index.js
+++ b/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';
--- a/Packages/ohif-core/client/components/base/mixins/component.js
+++ b/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);
-        }
    }
 });
--- a/Packages/ohif-core/client/components/base/mixins/schemaData.js
+++ b/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;
--- a/Packages/ohif-core/client/components/base/section/section.html
+++ b/Packages/ohif-core/client/components/base/section/section.html
@ -0,0 +1,3 @@
+<template name="section">
+    {{>instance.renderFunction.get instance.sectionData.get}}
+</template>
--- a/Packages/ohif-core/client/components/base/section/section.js
+++ b/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));
+        });
+    }
+});
--- a/Packages/ohif-core/client/components/base/template.js
+++ b/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);

--- a/Packages/ohif-core/client/components/base/templates/input.html
+++ b/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}}
--- a/Packages/ohif-core/client/components/base/wrappers/label.html
+++ b/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}}
--- a/Packages/ohif-core/client/components/base/wrappers/title.html
+++ b/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}}
--- a/Packages/ohif-core/client/components/bootstrap/index.js
+++ b/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';
--- a/Packages/ohif-core/client/components/bootstrap/input/range.html
+++ b/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>
--- a/Packages/ohif-core/client/lib/blaze.js
+++ b/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) {
-            return currentView._component;
+        if (currentView && currentView[property]) {
+            return currentView[property];
        }
    }
 };
--- a/Packages/viewerbase/client/components/viewer/cineDialog/cineDialog.html
+++ b/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>
-                <input type="checkbox" checked id="cineLoopCheckbox" />
+                {{>inputCheckbox id='cineLoopCheckbox' key='loop'}}
            </div>
            <div id="fpsSection">
-                <label for="cineSlider">
-                    Cine Speed: <span id="fps">{{framerate}}</span>
-                </label>
-                <input type="range"
-                       id="cineSlider"
-                       min="1"
-                       max="90"
-                       value="{{framerate}}"/>
+                {{#inputRange id='cineSlider' key='speed' labelClass='form-group'}}
+                    {{#section 'labelAfterText'}}: <span id="fps">{{framerate}}</span>{{/section}}
+                {{/inputRange}}
            </div>
        </div>
-    </div>
+    {{/form}}
 </template>
--- a/Packages/viewerbase/client/components/viewer/cineDialog/cineDialog.js
+++ b/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;

--- a/Packages/viewerbase/lib/viewportFunctions.js
+++ b/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()));