1 files changed, 44 insertions, 87 deletions
diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx
index 7a4d40db1..77e07ec0c 100644
--- a/src/client/views/nodes/ComparisonBox.tsx
+++ b/src/client/views/nodes/ComparisonBox.tsx
@@ -1,13 +1,10 @@
-import { library } from '@fortawesome/fontawesome-svg-core';
-import { faEye } from '@fortawesome/free-regular-svg-icons';
-import { faAsterisk, faBrain, faFileAudio, faImage, faPaintBrush, faTimes, faCloudUploadAlt } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { action, computed, observable, runInAction, Lambda } from 'mobx';
+import { action, computed, observable, runInAction, Lambda, IReactionDisposer } from 'mobx';
 import { observer } from "mobx-react";
-import { Doc } from '../../../fields/Doc';
+import { Doc, Opt } from '../../../fields/Doc';
 import { documentSchema } from '../../../fields/documentSchemas';
 import { createSchema, makeInterface } from '../../../fields/Schema';
-import { NumCast, Cast } from '../../../fields/Types';
+import { NumCast, Cast, StrCast } from '../../../fields/Types';
 import { DragManager } from '../../util/DragManager';
 import { ViewBoxAnnotatableComponent } from '../DocComponent';
 import { FieldView, FieldViewProps } from './FieldView';
@@ -17,9 +14,7 @@ import { ContentFittingDocumentView } from './ContentFittingDocumentView';
 import { undoBatch } from '../../util/UndoManager';
 import { setupMoveUpEvents, emptyFunction } from '../../../Utils';
 import { SnappingManager } from '../../util/SnappingManager';
-
-library.add(faImage, faEye as any, faPaintBrush, faBrain);
-library.add(faFileAudio, faAsterisk);
+import { DocumentViewProps } from './DocumentView';
 
 export const comparisonSchema = createSchema({});
 
@@ -28,17 +23,16 @@ const ComparisonDocument = makeInterface(comparisonSchema, documentSchema);
 
 @observer
 export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps, ComparisonDocument>(ComparisonDocument) {
-    protected multiTouchDisposer?: import("../../util/InteractionUtils").InteractionUtils.MultiTouchEventDisposer | undefined;
-
     public static LayoutString(fieldKey: string) { return FieldView.LayoutString(ComparisonBox, fieldKey); }
+    protected multiTouchDisposer?: import("../../util/InteractionUtils").InteractionUtils.MultiTouchEventDisposer | undefined;
+    private _disposers: (DragManager.DragDropDisposer | undefined)[] = [undefined, undefined];
 
-    private _beforeDropDisposer?: DragManager.DragDropDisposer;
-    private _afterDropDisposer?: DragManager.DragDropDisposer;
-    private resizeUpdater: Lambda | undefined;
+    @observable _animating = "";
 
-    protected createDropTarget = (ele: HTMLDivElement | null, fieldKey: string) => {
+    protected createDropTarget = (ele: HTMLDivElement | null, fieldKey: string, disposerId: number) => {
+        this._disposers[disposerId]?.();
         if (ele) {
-            return DragManager.MakeDropTarget(ele, (event, dropEvent) => this.dropHandler(event, dropEvent, fieldKey), this.layoutDoc);
+            this._disposers[disposerId] = DragManager.MakeDropTarget(ele, (e, dropEvent) => this.dropHandler(e, dropEvent, fieldKey), this.layoutDoc);
         }
     }
 
@@ -48,36 +42,22 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps, C
         const droppedDocs = dropEvent.complete.docDragData?.droppedDocuments;
         if (droppedDocs?.length) {
             this.dataDoc[fieldKey] = droppedDocs[0];
-            droppedDocs[0].isBackgound = true;
         }
     }
 
-    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;
-            setTimeout(action(() => this._animating = false), 1000);
+            this._animating = "all 1s";
+            this.layoutDoc._clipWidth = targetWidth * 100 / this.props.PanelWidth();
+            setTimeout(action(() => this._animating = ""), 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.layoutDoc._clipWidth) / 100 * this.props.PanelWidth();
         if (width && width > 5 && width < this.props.PanelWidth()) {
-            this.dataDoc.clipWidth = width;
+            this.layoutDoc._clipWidth = width * 100 / this.props.PanelWidth();
         }
         return false;
     }
@@ -85,66 +65,43 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps, C
     @undoBatch
     clearDoc = (e: React.MouseEvent, fieldKey: string) => {
         e.stopPropagation;
-        e.preventDefault;
         delete this.dataDoc[fieldKey];
     }
 
-    @observable _animating = false;
     render() {
-        const beforeDoc = Cast(this.dataDoc.beforeDoc, Doc, null);
-        const afterDoc = Cast(this.dataDoc.afterDoc, Doc, null);
-        const clipWidth = NumCast(this.dataDoc.clipWidth);
+        const clipWidth = NumCast(this.layoutDoc._clipWidth) + "%";
+        const childProps: DocumentViewProps = { ...this.props, pointerEvents: false, parentActive: this.props.active };
+        const clearButton = (which: string) => {
+            return <div className={`clear-button ${which}`} onPointerDown={e => e.stopPropagation()} onClick={e => this.clearDoc(e, `${which}Doc`)}>
+                <FontAwesomeIcon className={`clear-button ${which}`} icon={"times"} size="sm" />
+            </div>;
+        };
+        const displayDoc = (which: string) => {
+            const whichDoc = Cast(this.dataDoc[`${which}Doc`], Doc, null);
+            return whichDoc ? <>
+                <ContentFittingDocumentView {...childProps} Document={whichDoc} />
+                {clearButton(which)}
+            </> :  // placeholder image if doc is missing
+                <div className="placeholder">
+                    <FontAwesomeIcon className="upload-icon" icon={"cloud-upload-alt"} size="lg" />
+                </div>;
+        };
+        const displayBox = (which: string, index: number, cover: number) => {
+            return <div className={`${which}Box-cont`} key={which} style={{ width: this.props.PanelWidth() }}
+                onPointerDown={e => this.registerSliding(e, cover)}
+                ref={ele => this.createDropTarget(ele, `${which}Doc`, index)} >
+                {displayDoc(which)}
+            </div>;
+        };
+
         return (
             <div className={`comparisonBox${this.active() || SnappingManager.GetIsDragging() ? "-interactive" : ""}`}>
-                <div className="afterBox-cont" key={"after"} onPointerDown={e => this.registerSliding(e, this.props.PanelWidth() - 5)}
-                    ref={(ele) => {
-                        this._afterDropDisposer?.();
-                        this._afterDropDisposer = this.createDropTarget(ele, "afterDoc");
-                    }}>
-                    {afterDoc ? <>
-                        <ContentFittingDocumentView {...this.props}
-                            Document={afterDoc}
-                            pointerEvents={false}
-                            parentActive={this.props.active}
-                        />
-                        <div className="clear-button after" onClick={e => this.clearDoc(e, "afterDoc")}>
-                            <FontAwesomeIcon className="clear-button after" icon={faTimes} size="sm" />
-                        </div>
-                    </> :
-                        <div className="placeholder">
-                            <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 }}>
-                    {/* wraps around before image and slider bar */}
-                    <div
-                        className="beforeBox-cont"
-                        key={"before"}
-                        ref={(ele) => {
-                            this._beforeDropDisposer?.();
-                            this._beforeDropDisposer = this.createDropTarget(ele, "beforeDoc");
-                        }}
-                        style={{ width: this.props.PanelWidth() }}>
-                        {
-                            beforeDoc ?
-                                <>
-                                    <ContentFittingDocumentView {...this.props}
-                                        Document={beforeDoc}
-                                        pointerEvents={false}
-                                        parentActive={this.props.active} />
-                                    <div className="clear-button before" onClick={e => this.clearDoc(e, "beforeDoc")}>
-                                        <FontAwesomeIcon className="clear-button before" icon={faTimes} size="sm" />
-                                    </div>
-                                </>
-                                :
-                                <div className="placeholder">
-                                    <FontAwesomeIcon className="upload-icon" icon={faCloudUploadAlt} size="lg" />
-                                </div>
-                        }
-                    </div>
+                {displayBox("after", 1, this.props.PanelWidth() - 5)}
+                <div className="clip-div" style={{ width: clipWidth, transition: this._animating, background: StrCast(this.layoutDoc._backgroundColor, "gray") }}>
+                    {displayBox("before", 0, 5)}
                 </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(${clipWidth} - 0.5px)` }}>
                     <div className="slide-handle" />
                 </div>
             </div >);