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

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);
+        }
     }
 });