From 8c5b497377c2439ee88437d886979403d8369471 Mon Sep 17 00:00:00 2001
From: Victor Woeltjen <victor.woeltjen@nasa.gov>
Date: Sat, 27 Jun 2015 11:59:18 -0700
Subject: [PATCH] [Common UI] Tweak mct-split-pane

Tweak mct-split-pane for use in timeline; particularly,
improve synchronization between views. WTD-1363.
---
 .../general/src/directives/MCTSplitPane.js    | 26 +++++++++----------
 .../general/src/directives/MCTSplitter.js     | 15 ++++++-----
 2 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/platform/commonUI/general/src/directives/MCTSplitPane.js b/platform/commonUI/general/src/directives/MCTSplitPane.js
index fff3d095c8..899a8f5ad2 100644
--- a/platform/commonUI/general/src/directives/MCTSplitPane.js
+++ b/platform/commonUI/general/src/directives/MCTSplitPane.js
@@ -104,7 +104,6 @@ define(
             function controller($scope, $element, $attrs) {
                 var anchorKey = $attrs.anchor || DEFAULT_ANCHOR,
                     anchor,
-                    styleValue,
                     positionParsed = $parse($attrs.position),
                     position; // Start undefined, until explicitly set
 
@@ -116,8 +115,7 @@ define(
                 // Get relevant size (height or width) of DOM element
                 function getSize(domElement) {
                     return (anchor.orientation === 'vertical' ?
-                            domElement.offsetWidth : domElement.offsetHeight)
-                            + "px";
+                            domElement.offsetWidth : domElement.offsetHeight);
                 }
 
                 // Apply styles to child elements
@@ -131,17 +129,18 @@ define(
                         firstSize;
 
                     first.css(anchor.edge, "0px");
-                    if (styleValue !== undefined) {
-                        first.css(anchor.dimension, styleValue);
-                    }
+                    first.css(anchor.dimension, (position - splitterSize) + 'px');
 
                     // Get actual size (to obey min-width etc.)
                     firstSize = getSize(first[0]);
-                    first.css(anchor.dimension, firstSize);
-                    splitter.css(anchor.edge, firstSize);
+                    first.css(anchor.dimension, firstSize + 'px');
+                    splitter.css(anchor.edge, (firstSize + splitterSize) + 'px');
+                    splitter.css(anchor.opposite, "auto");
 
-                    last.css(anchor.edge, calcSum(firstSize, splitterSize));
+                    last.css(anchor.edge, (firstSize + splitterSize * 3) + 'px');
                     last.css(anchor.opposite, "0px");
+
+                    position = firstSize + splitterSize;
                 }
 
                 // Update positioning of contained elements
@@ -171,13 +170,12 @@ define(
                     if (typeof value === 'number') {
                         position = value;
                         enforceExtrema();
+                        updateElementPositions();
 
                         // Pass change up so this state can be shared
                         if (positionParsed.assign) {
-                            positionParsed.assign($scope, value);
+                            positionParsed.assign($scope, position);
                         }
-                        styleValue = position + 'px';
-                        updateElementPositions();
                     }
                     return position;
                 }
@@ -195,7 +193,9 @@ define(
                 $element.addClass(anchor.orientation);
 
                 // Initialize positions
-                updateElementPositions();
+                getSetPosition(getSize(
+                    $element.children().eq(anchor.reversed ? 2 : 0)[0]
+                ));
 
                 // Interface exposed by controller, for mct-splitter to user
                 return {
diff --git a/platform/commonUI/general/src/directives/MCTSplitter.js b/platform/commonUI/general/src/directives/MCTSplitter.js
index fa14e6af6f..0494830057 100644
--- a/platform/commonUI/general/src/directives/MCTSplitter.js
+++ b/platform/commonUI/general/src/directives/MCTSplitter.js
@@ -47,20 +47,23 @@ define(
 
                 element.addClass("splitter");
 
+                // Now that we have the above class, the splitter width
+                // will have changed, so trigger a positioning update.
+                mctSplitPane.position(mctSplitPane.position());
+
                 scope.splitter = {
                     // Begin moving this splitter
                     startMove: function () {
                         var splitter = element[0];
-                        initialPosition = splitter[OFFSETS_BY_EDGE[
-                            mctSplitPane.anchor().edge
-                        ]];
+                        initialPosition = mctSplitPane.position();
                     },
                     // Handle user changes to splitter position
                     move: function (delta) {
                         var anchor = mctSplitPane.anchor(),
-                            pixelDelta = delta[
-                                anchor.orientation === "vertical" ? 0 : 1
-                            ];
+                            index = anchor.orientation === "vertical" ? 0 : 1,
+                            pixelDelta = delta[index] *
+                                (anchor.reversed ? -1 : 1);
+
                         // Update the position of this splitter
                         mctSplitPane.position(initialPosition + pixelDelta);
                     }