From 85c14bb05abe710483a37922f0f5a8cdefbdcf9e Mon Sep 17 00:00:00 2001
From: Sam El-Husseini <samelh@microsoft.com>
Date: Tue, 26 Dec 2017 23:23:26 -0800
Subject: [PATCH] Fix rotation and distance slider update state

---
 sim/visuals/controls/distanceSlider.ts | 27 ++++++++------------------
 sim/visuals/controls/rotationSlider.ts | 13 +------------
 2 files changed, 9 insertions(+), 31 deletions(-)

diff --git a/sim/visuals/controls/distanceSlider.ts b/sim/visuals/controls/distanceSlider.ts
index d3b28cce..b6d07ba2 100644
--- a/sim/visuals/controls/distanceSlider.ts
+++ b/sim/visuals/controls/distanceSlider.ts
@@ -9,18 +9,16 @@ namespace pxsim.visuals {
 
         private static SLIDER_HANDLE_HEIGHT = 31;
 
-        private isVisible = false;
-
         getInnerView(parent: SVGSVGElement, globalDefs: SVGDefsElement) {
             let gid = "gradient-slider-" + this.getId();
             this.group = svg.elt("g") as SVGGElement;
             this.gradient = createGradient(gid, this.getGradientDefinition());
-            this.gradient.setAttribute('x1', '-438.37');
-            this.gradient.setAttribute('y1', '419.43');
-            this.gradient.setAttribute('x2', '-438.37');
-            this.gradient.setAttribute('y2', '418.43');
-            this.gradient.setAttribute('gradientTransform', 'matrix(50, 0, 0, -110, 21949.45, 46137.67)');
-            this.gradient.setAttribute('gradientUnits', 'userSpaceOnUse');
+            this.gradient.setAttribute('x1', '0%');
+            this.gradient.setAttribute('y1', '0%');
+            this.gradient.setAttribute('x2', '0%');
+            this.gradient.setAttribute('y2', '100%');
+            // this.gradient.setAttribute('gradientTransform', 'matrix(50, 0, 0, -110, 21949.45, 46137.67)');
+            // this.gradient.setAttribute('gradientUnits', 'userSpaceOnUse');
             globalDefs.appendChild(this.gradient);
 
             this.group = svg.elt("g") as SVGGElement;
@@ -79,7 +77,7 @@ namespace pxsim.visuals {
         }
 
         updateState() {
-            if (!this.isVisible) {
+            if (!this.visible) {
                 return;
             }
             const node = this.state;
@@ -88,15 +86,6 @@ namespace pxsim.visuals {
             this.slider.setAttribute("transform", `translate(0, ${y - DistanceSliderControl.SLIDER_HANDLE_HEIGHT / 2})`);
         }
 
-        onComponentVisible() {
-            super.onComponentVisible();
-            this.isVisible = true;
-        }
-
-        onComponentHidden() {
-            this.isVisible = false;
-        }
-
         private updateSliderValue(pt: SVGPoint, parent: SVGSVGElement, ev: MouseEvent) {
             let cur = svg.cursorPoint(pt, parent, ev);
             const height = this.getContentHeight(); //DistanceSliderControl.SLIDER_HEIGHT;
@@ -119,7 +108,7 @@ namespace pxsim.visuals {
             return {
                 stops: [
                     { offset: 0, color: '#626262' },
-                    { offset: 1, color: "#ddd" }
+                    { offset: 100, color: "#ddd" }
                 ]
             };
         }
diff --git a/sim/visuals/controls/rotationSlider.ts b/sim/visuals/controls/rotationSlider.ts
index 3858c53a..1a557857 100644
--- a/sim/visuals/controls/rotationSlider.ts
+++ b/sim/visuals/controls/rotationSlider.ts
@@ -6,8 +6,6 @@ namespace pxsim.visuals {
         private group: SVGGElement;
         private slider: SVGGElement;
 
-        private isVisible = false;
-
         private static SLIDER_WIDTH = 70;
         private static SLIDER_HEIGHT = 78;
 
@@ -61,7 +59,7 @@ namespace pxsim.visuals {
         }
 
         updateState() {
-            if (!this.isVisible) {
+            if (!this.visible) {
                 return;
             }
             const node = this.state;
@@ -71,15 +69,6 @@ namespace pxsim.visuals {
             this.slider.setAttribute("transform", `translate(${x}, ${y})`);
         }
 
-        onComponentVisible() {
-            super.onComponentVisible();
-            this.isVisible = true;
-        }
-
-        onComponentHidden() {
-            this.isVisible = false;
-        }
-
         private updateSliderValue(pt: SVGPoint, parent: SVGSVGElement, ev: MouseEvent) {
             let cur = svg.cursorPoint(pt, parent, ev);
             const width = CONTROL_WIDTH; //DistanceSliderControl.SLIDER_HEIGHT;