From 0dbf991e36482c5b6b94856b2cb4f10479ba337a Mon Sep 17 00:00:00 2001
From: WolverinDEV <git@did.science>
Date: Tue, 5 Jan 2021 18:09:57 +0100
Subject: [PATCH] Fixed invalid bounds calculation and only saving new values
 when the divider has been released

---
 .../js/ui/react-elements/ContextDivider.tsx   | 62 ++++++++++++-------
 1 file changed, 39 insertions(+), 23 deletions(-)

diff --git a/shared/js/ui/react-elements/ContextDivider.tsx b/shared/js/ui/react-elements/ContextDivider.tsx
index bbbfc206..330559f6 100644
--- a/shared/js/ui/react-elements/ContextDivider.tsx
+++ b/shared/js/ui/react-elements/ContextDivider.tsx
@@ -47,24 +47,35 @@ export class ContextDivider extends React.Component<ContextDividerProperties, Co
                 this.setState({ active: false });
                 return;
             }
-            const parentBounds = separator.parentElement.getBoundingClientRect();
 
-            const min = this.props.direction === "horizontal" ? parentBounds.left : parentBounds.top;
-            const max = this.props.direction === "horizontal" ? parentBounds.left + parentBounds.width : parentBounds.top + parentBounds.height;
+            const previousElement = separator.previousElementSibling as HTMLElement;
+            const nextElement = separator.nextElementSibling as HTMLElement;
+
+            const beforeBounds = previousElement.getBoundingClientRect();
+            const afterBounds = nextElement.getBoundingClientRect();
+
+            let min: number, max: number;
+
+            if(this.props.direction === "horizontal") {
+                min = Math.min(beforeBounds.left, afterBounds.left);
+                if(min === beforeBounds.left) {
+                    max = afterBounds.left + afterBounds.width;
+                } else {
+                    max = beforeBounds.left + beforeBounds.width;
+                }
+            } else {
+                min = Math.min(beforeBounds.top, afterBounds.top);
+                if(min === beforeBounds.top) {
+                    max = afterBounds.top + afterBounds.height;
+                } else {
+                    max = beforeBounds.top + beforeBounds.height;
+                }
+            }
+
             const current = event instanceof MouseEvent ?
                 (this.props.direction === "horizontal" ? event.pageX : event.pageY) :
                 (this.props.direction === "horizontal" ? event.touches[event.touches.length - 1].clientX : event.touches[event.touches.length - 1].clientY);
 
-            /*
-            const previous_offset = previous_element.offset();
-            const next_offset = next_element.offset();
-
-            const min = vertical ? Math.min(previous_offset.left, next_offset.left) : Math.min(previous_offset.top, next_offset.top);
-            const max = vertical ?
-                Math.max(previous_offset.left + previous_element.width(), next_offset.left + next_element.width()) :
-                Math.max(previous_offset.top + previous_element.height(), next_offset.top + next_element.height());
-            */
-
             if(current < min) {
                 this.value = 0;
             } else if(current < max) {
@@ -76,10 +87,7 @@ export class ContextDivider extends React.Component<ContextDividerProperties, Co
                 this.value = 100;
             }
 
-            settings.changeGlobal(Settings.FN_SEPARATOR_STATE(this.props.id), JSON.stringify({
-                value: this.value
-            }));
-            this.applySeparator(separator.previousSibling as HTMLElement, separator.nextSibling as HTMLElement);
+            this.applySeparator(separator.previousElementSibling as HTMLElement, separator.nextElementSibling as HTMLElement);
         };
 
         this.listenerUp = () => this.stopMovement();
@@ -88,20 +96,23 @@ export class ContextDivider extends React.Component<ContextDividerProperties, Co
     render() {
         let separatorClassNames = cssStyle.separator;
 
-        if(this.props.direction === "vertical")
+        if(this.props.direction === "vertical") {
             separatorClassNames += " " + cssStyle.vertical;
-        else
+        } else {
             separatorClassNames += " " + cssStyle.horizontal;
+        }
 
-        if(this.props.separatorClassName)
+        if(this.props.separatorClassName) {
             separatorClassNames += " " + this.props.separatorClassName;
+        }
 
-        if(this.state.active && this.props.separatorClassName)
+        if(this.state.active && this.props.separatorClassName) {
             separatorClassNames += " " + this.props.separatorClassName;
+        }
 
         return (
             <div key={"context-separator"} ref={this.refSeparator} className={separatorClassNames} onMouseDown={e => this.startMovement(e)} onTouchStart={e => this.startMovement(e)} />
-        )
+        );
     }
 
     componentDidMount(): void {
@@ -138,11 +149,16 @@ export class ContextDivider extends React.Component<ContextDividerProperties, Co
         document.removeEventListener('touchend', this.listenerUp);
         document.removeEventListener('touchcancel', this.listenerUp);
         document.documentElement.classList.remove(cssStyle.documentActiveClass);
+
+        settings.changeGlobal(Settings.FN_SEPARATOR_STATE(this.props.id), JSON.stringify({
+            value: this.value
+        }));
     }
 
     private applySeparator(previousElement: HTMLElement, nextElement: HTMLElement) {
-        if(!this.refSeparator.current || !previousElement || !nextElement)
+        if(!this.refSeparator.current || !previousElement || !nextElement) {
             return;
+        }
 
         if(this.props.direction === "horizontal") {
             const center = this.refSeparator.current.clientWidth;