LT-275: Making the measure flow respect the window bounds and fixing scrolling when selecting by common section

Packages/lesiontracker/client/components/measureFlow/measureFlow.html

@@ -1,12 +1,5 @@
 <template name="measureFlow">
-    <div class="measure-flow">
-        <button>Add label</button>
-        {{>selectTree
-            key='label'
-            items=instance.items
-            label='Assign label'
-            searchPlaceholder='Search labels'
-            storageKey='measureLabelCommon'
-        }}
+    <div class="measure-flow {{instance.state.get}}" style="position:fixed; top:200px; left:400px">
+        <button class="btn-add">Add label</button>
     </div>
 </template>

Packages/lesiontracker/client/components/measureFlow/measureFlow.js

@@ -1,6 +1,15 @@
+import { OHIF } from 'meteor/ohif:core';
+import { Template } from 'meteor/templating';
+import { Blaze } from 'meteor/blaze';
+import { ReactiveVar } from 'meteor/reactive-var';
+import { _ } from 'meteor/underscore';
+import { $ } from 'meteor/jquery';
+
 Template.measureFlow.onCreated(() => {
     const instance = Template.instance();
 
+    instance.state = new ReactiveVar('closed');
+
     const items = [
         'Adrenal',
         'Bladder',
@@ -40,11 +49,46 @@ Template.measureFlow.onCreated(() => {
 });
 
 Template.measureFlow.events({
+    'click .measure-flow .btn-add'(event, instance) {
+        // Set the open state for the component
+        instance.state.set('open');
+
+        // Wait template rerender before rendering the selectTree
+        Tracker.afterFlush(() => {
+            // Get the click position
+            const position = {
+                left: event.clientX,
+                top: event.clientY,
+            };
+
+            // Define the data for selectTreeComponent
+            const data = {
+                key: 'label',
+                items: instance.items,
+                label: 'Assign label',
+                searchPlaceholder: 'Search labels',
+                storageKey: 'measureLabelCommon',
+                position
+            };
+
+            // Define in which element the selectTree will be rendered in
+            const parentElement = instance.$('.measure-flow')[0];
+
+            // Render the selectTree element
+            Blaze.renderWithData(Template.selectTree, data, parentElement);
+        });
+    },
+    'click .select-tree-common label'(event, instance) {
+        instance.commonClicked = true;
+    },
     'click .tree-leaf input'(event, instance) {
-        console.warn('>>>>event', event);
         const $label = $(event.currentTarget).closest('label');
         const $container = $label.closest('.select-tree-root').find('.tree-options:first');
-        const top = $label.position().top;
-        $container.scrollTop(top);
+        if (instance.commonClicked) {
+            const labelTop = $label.position().top;
+            const containerCenter = Math.round($container.height() / 2);
+            const labelCenter = Math.round($label.height() / 2);
+            $container.scrollTop(labelTop - containerCenter + labelCenter);
+        }
     }
 });

Packages/lesiontracker/client/components/measureFlow/measureFlow.styl

@@ -1,5 +1,23 @@
+@import "{design}/app"
+
 .measure-flow
 
+  &.open
+
+    .btn-add
+      display: none
+
+  .btn-add
+    background-color: $activeColor
+    border: 2px solid $uiBorderColor
+    border-radius: 14px
+    color: $textColorActive
+    cursor: pointer
+    font-weight: bold
+    height: 24px
+    line-height: 24px
+    padding: 0 14px
+
   .select-tree-root>.tree-content>.tree-options
     margin-right: -20px
     max-height: 250px