fixed comparisonBox to use percents

3 files changed, 8 insertions, 24 deletions

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index b4c11a81b..48de203ef 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -110,6 +110,7 @@ export interface DocumentOptions {
     _backgroundColor?: string | ScriptField; // background color for each template layout doc ( overrides backgroundColor )
     color?: string; // foreground color data doc
     _color?: string;  // foreground color for each template layout doc (overrides color)
+    clipWidth?: number; // percent transition from before to after in comparisonBox
     caption?: RichTextField;
     ignoreClick?: boolean;
     lockedPosition?: boolean; // lock the x,y coordinates of the document so that it can't be dragged
@@ -559,7 +560,7 @@ export namespace Docs {
         }
 
         export function ComparisonDocument(options: DocumentOptions = { title: "Comparison Box" }) {
-            return InstanceFromProto(Prototypes.get(DocumentType.COMPARISON), "", { targetDropAction: "alias", ...options });
+            return InstanceFromProto(Prototypes.get(DocumentType.COMPARISON), "", { clipWidth: 50, targetDropAction: "alias", ...options });
         }
 
         export function AudioDocument(url: string, options: DocumentOptions = {}) {
diff --git a/src/client/views/nodes/ComparisonBox.scss b/src/client/views/nodes/ComparisonBox.scss
index 3d48d96e2..7849c9976 100644
--- a/src/client/views/nodes/ComparisonBox.scss
+++ b/src/client/views/nodes/ComparisonBox.scss
@@ -2,7 +2,6 @@
     border-radius: inherit;
     width: 100%;
     height: 100%;
-    background-color: grey;
     position: absolute;
     z-index: 0;
     pointer-events: none;
@@ -17,7 +16,6 @@
         .beforeBox-cont {
             height: 100%;
             overflow: hidden;
-            background-color: rgb(240, 240, 240);
         }
     }
 
@@ -26,7 +24,7 @@
         height: 100%;
         width: 3px;
         display: inline-block;
-        background: gray;
+        background: white;
         cursor: ew-resize;
         .slide-handle {
             position: absolute;
@@ -48,7 +46,6 @@
         height: 100%;
         width: 100%;
         overflow: hidden;
-        background-color: lightgray;
     }
 
     .clear-button {
diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx
index 7a4d40db1..d52ba9896 100644
--- a/src/client/views/nodes/ComparisonBox.tsx
+++ b/src/client/views/nodes/ComparisonBox.tsx
@@ -34,7 +34,6 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps, C
 
     private _beforeDropDisposer?: DragManager.DragDropDisposer;
     private _afterDropDisposer?: DragManager.DragDropDisposer;
-    private resizeUpdater: Lambda | undefined;
 
     protected createDropTarget = (ele: HTMLDivElement | null, fieldKey: string) => {
         if (ele) {
@@ -52,32 +51,19 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps, C
         }
     }
 
-    componentWillMount() {
-        this.dataDoc.clipWidth = this.props.PanelWidth() / 2;
-
-        //preserve before/after ratio during resizing
-        this.resizeUpdater = computed(() => this.props.PanelWidth()).observe(({ oldValue, newValue }) =>
-            this.dataDoc.clipWidth = NumCast(this.dataDoc.clipWidth) / (oldValue || 0) * newValue
-        );
-    }
-
-    componentWillUnmount() {
-        this.resizeUpdater?.();
-    }
-
     private registerSliding = (e: React.PointerEvent<HTMLDivElement>, targetWidth: number) => {
         setupMoveUpEvents(this, e, this.onPointerMove, emptyFunction, action(() => {
             this._animating = true;
-            this.dataDoc.clipWidth = targetWidth;
+            this.dataDoc.clipWidth = targetWidth * 100 / this.props.PanelWidth();
             setTimeout(action(() => this._animating = false), 1000);
         }), false);
     }
 
     @action
     private onPointerMove = ({ movementX }: PointerEvent) => {
-        const width = movementX * this.props.ScreenToLocalTransform().Scale + NumCast(this.dataDoc.clipWidth);
+        const width = movementX * this.props.ScreenToLocalTransform().Scale + NumCast(this.dataDoc.clipWidth) / 100 * this.props.PanelWidth();
         if (width && width > 5 && width < this.props.PanelWidth()) {
-            this.dataDoc.clipWidth = width;
+            this.dataDoc.clipWidth = width * 100 / this.props.PanelWidth();
         }
         return false;
     }
@@ -115,7 +101,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps, C
                             <FontAwesomeIcon className="upload-icon" icon={faCloudUploadAlt} size="lg" />
                         </div>}
                 </div>
-                <div className="clip-div" onPointerDown={e => this.registerSliding(e, 5)} style={{ width: clipWidth + "px", transition: this._animating ? "all 1s" : undefined }}>
+                <div className="clip-div" onPointerDown={e => this.registerSliding(e, 5)} style={{ width: clipWidth + "%", transition: this._animating ? "all 1s" : undefined }}>
                     {/* wraps around before image and slider bar */}
                     <div
                         className="beforeBox-cont"
@@ -144,7 +130,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps, C
                     </div>
                 </div>
 
-                <div className="slide-bar" style={{ left: `calc(${NumCast(this.dataDoc.clipWidth) * 100 / this.props.PanelWidth()}% - 0.5px)` }}>
+                <div className="slide-bar" style={{ left: `calc(${this.dataDoc.clipWidth}% - 0.5px)` }}>
                     <div className="slide-handle" />
                 </div>
             </div >);