fix copmarison box slidebar to work.

2 files changed, 12 insertions, 17 deletions

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 8a9f20565..14fb65252 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -260,7 +260,6 @@ export class CurrentUserUtils {
             }
             return plotly;
         }
-        
         const plotlyView = (opts:DocumentOptions) => {
             const rtfield = new RichTextField(JSON.stringify(
                 {doc: {type:"doc",content:[
diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx
index 9e1c1b7be..13eb2bf3f 100644
--- a/src/client/views/nodes/ComparisonBox.tsx
+++ b/src/client/views/nodes/ComparisonBox.tsx
@@ -56,7 +56,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
     @observable private _loading = false;
     @observable private _isEmpty = false;
     @observable private _audio: Doc = Docs.Create.TextDocument('');
-    @observable childActive = false;
+    @observable _childActive = false; // whether pointer events pass through comparison box to its contents or not
     @observable _yRelativeToTop: boolean = true;
     @observable _animating = '';
     @observable mathJaxConfig = {
@@ -160,10 +160,6 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
         console.log(this._inputValue);
     };
 
-    @action activateContent = () => {
-        this.childActive = true;
-    };
-
     @action handleRenderClick = () => {
         this.frontSide = !this.frontSide;
     };
@@ -183,8 +179,8 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
     @action
     private onPointerMove = ({ movementX }: PointerEvent) => {
         const width = movementX * this.ScreenToLocalBoxXf().Scale + (this.clipWidth / 100) * this._props.PanelWidth();
-        if (width && width > 5 && width < this._props.PanelWidth()) {
-            this.layoutDoc[this.clipWidthKey] = (width * 100) / this._props.PanelWidth();
+        if (width < this._props.PanelWidth()) {
+            this.layoutDoc[this.clipWidthKey] = (Math.max(0, width) * 100) / this._props.PanelWidth();
         }
         return false;
     };
@@ -193,7 +189,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
         this._props.setContentViewBox?.(this);
         reaction(
             () => this._props.isSelected(), // when this reaction should update
-            selected => !selected && (this.childActive = false) // what it should update to
+            selected => !selected && (this._childActive = false) // what it should update to
         );
     }
 
@@ -291,7 +287,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                 emptyFunction,
                 action((moveEv, doubleTap) => {
                     if (doubleTap) {
-                        this.childActive = true;
+                        this._childActive = true;
                         if (!this.dataDoc[this.fieldKey + '_1'] && !this.dataDoc[this.fieldKey]) this.dataDoc[this.fieldKey + '_1'] = DocUtils.copyDragFactory(Doc.UserDoc().emptyNote as Doc);
                         if (!this.dataDoc[this.fieldKey + '_2'] && !this.dataDoc[this.fieldKey + '_alternate']) this.dataDoc[this.fieldKey + '_2'] = DocUtils.copyDragFactory(Doc.UserDoc().emptyNote as Doc);
                     }
@@ -299,7 +295,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                 false,
                 undefined,
                 action(() => {
-                    if (this.childActive) return;
+                    if (this._childActive) return;
                     this._animating = 'all 200ms';
                     // on click, animate slider movement to the targetWidth
                     this.layoutDoc[this.clipWidthKey] = (targetWidth * 100) / this._props.PanelWidth();
@@ -678,13 +674,13 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                         removeDocument={whichSlot.endsWith('1') ? this.remDoc1 : this.remDoc2}
                         NativeWidth={this.layoutWidth}
                         NativeHeight={this.layoutHeight}
-                        isContentActive={() => this.childActive}
+                        isContentActive={() => this._childActive}
                         isDocumentActive={returnFalse}
                         dontSelect={returnTrue}
                         whenChildContentsActiveChanged={this.whenChildContentsActiveChanged}
-                        styleProvider={this.childActive ? this._props.styleProvider : this.docStyleProvider}
+                        styleProvider={this._childActive ? this._props.styleProvider : this.docStyleProvider}
                         hideLinkButton
-                        pointerEvents={this.childActive ? undefined : returnNone}
+                        pointerEvents={this._childActive ? undefined : returnNone}
                     />
                     {/* </MathJax> */}
                     {/* <div style={{ position: 'absolute', top: '-5px', left: '2px' }}>{layoutString ? null : clearButton(whichSlot)}</div> */}
@@ -703,7 +699,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                 style={{ width: this._props.PanelWidth() }}
                 onPointerDown={e => {
                     this.registerSliding(e, cover);
-                    this.activateContent();
+                    this._childActive = true;
                 }}
                 ref={ele => this.createDropTarget(ele, which, index)}>
                 {!this._isEmpty ? displayDoc(which) : null}
@@ -823,10 +819,10 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                 <div
                     className="slide-bar"
                     style={{
-                        left: `calc(${this.clipWidth + '%'} - 0.5px)`,
+                        left: `min(100% - 3px, calc(${this.clipWidth + '%'}))`,
                         cursor: this.clipWidth < 5 ? 'e-resize' : this.clipWidth / 100 > (this._props.PanelWidth() - 5) / this._props.PanelWidth() ? 'w-resize' : undefined,
                     }}
-                    onPointerDown={e => !this.childActive && this.registerSliding(e, this._props.PanelWidth() / 2)} /* if clicked, return slide-bar to center */
+                    onPointerDown={e => this.registerSliding(e, this._props.PanelWidth() / 2)} /* if clicked, return slide-bar to center */
                 >
                     <div className="slide-handle" />
                 </div>