From 85feb21ae705b90db7b7476b126791b0a9e27372 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Tue, 3 Dec 2019 15:37:51 -0500
Subject: made text sidebar draggable.

---
 src/client/views/nodes/FormattedTextBox.tsx | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index 88c0c5a2e..bd3caaac3 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -360,6 +360,20 @@ export class FormattedTextBox extends DocAnnotatableComponent<(FieldViewProps &
         }
     }
 
+    sidebarDown = (e: React.PointerEvent) => {
+        document.addEventListener("pointermove", this.sidebarMove);
+        document.addEventListener("pointerup", this.sidebarUp);
+        e.stopPropagation();
+    }
+    sidebarMove = (e: PointerEvent) => {
+        let bounds = this.CurrentDiv.getBoundingClientRect();
+        this.props.Document.sidebarWidthPercent = "" + 100 * (1 - (e.clientX - bounds.left) / bounds.width) + "%";
+    }
+    sidebarUp = (e: PointerEvent) => {
+        document.removeEventListener("pointermove", this.sidebarMove);
+        document.removeEventListener("pointerup", this.sidebarUp);
+    }
+
     toggleSidebar = () => this.props.Document.sidebarWidthPercent = StrCast(this.props.Document.sidebarWidthPercent, "0%") === "0%" ? "25%" : "0%";
 
     specificContextMenu = (e: React.MouseEvent): void => {
@@ -1074,7 +1088,7 @@ export class FormattedTextBox extends DocAnnotatableComponent<(FieldViewProps &
                     <div className={`formattedTextBox-inner${rounded}`} style={{ whiteSpace: "pre-wrap", pointerEvents: ((this.Document.isButton || this.props.onClick) && !this.props.isSelected()) ? "none" : undefined }} ref={this.createDropTarget} />
                 </div>
                 {this.props.Document.hideSidebar ? (null) : this.sidebarWidthPercent === "0%" ?
-                    <div className="formattedTextBox-sidebar-handle" onPointerDown={e => e.stopPropagation()} onClick={e => this.toggleSidebar()} /> :
+                    <div className="formattedTextBox-sidebar-handle" onPointerDown={this.sidebarDown} onClick={e => this.toggleSidebar()} /> :
                     <div className={"formattedTextBox-sidebar" + (InkingControl.Instance.selectedTool !== InkTool.None ? "-inking" : "")}
                         style={{ width: `${this.sidebarWidthPercent}`, backgroundColor: `${StrCast(this.extensionDoc?.backgroundColor, "transparent")}` }}>
                         <CollectionFreeFormView {...this.props}
@@ -1098,7 +1112,7 @@ export class FormattedTextBox extends DocAnnotatableComponent<(FieldViewProps &
                             ContainingCollectionDoc={this.props.ContainingCollectionDoc}
                             chromeCollapsed={true}>
                         </CollectionFreeFormView>
-                        <div className="formattedTextBox-sidebar-handle" onPointerDown={e => e.stopPropagation()} onClick={e => this.toggleSidebar()} />
+                        <div className="formattedTextBox-sidebar-handle" onPointerDown={this.sidebarDown} onClick={e => this.toggleSidebar()} />
                     </div>}
                 <div className="formattedTextBox-dictation"
                     onClick={e => {
-- 
cgit v1.2.3-70-g09d2