diff options
| -rw-r--r-- | src/client/views/nodes/ComparisonBox.tsx | 35 |
1 files changed, 12 insertions, 23 deletions
diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx index 88a6e62d1..dbaad360b 100644 --- a/src/client/views/nodes/ComparisonBox.tsx +++ b/src/client/views/nodes/ComparisonBox.tsx @@ -7,13 +7,9 @@ import { observer } from "mobx-react"; import { Doc } from '../../../new_fields/Doc'; import { documentSchema } from '../../../new_fields/documentSchemas'; import { Id } from '../../../new_fields/FieldSymbols'; -import { List } from '../../../new_fields/List'; -import { ObjectField } from '../../../new_fields/ObjectField'; import { createSchema, listSpec, makeInterface } from '../../../new_fields/Schema'; import { ComputedField } from '../../../new_fields/ScriptField'; import { Cast, NumCast, StrCast } from '../../../new_fields/Types'; -import { emptyFunction, returnOne, Utils, returnZero } from '../../../Utils'; -import { Docs } from '../../documents/Documents'; import { DragManager } from '../../util/DragManager'; import { ViewBoxAnnotatableComponent } from '../DocComponent'; import { FieldView, FieldViewProps } from './FieldView'; @@ -64,19 +60,24 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps, C window.addEventListener("pointerup", this.onPointerUp); } - // private resizeUpdater: Lambda; + private resizeUpdater: Lambda = () => { }; + componentWillMount() { - const initialWidth = this.props.PanelWidth() / 2; - this.props.Document.clipWidth = initialWidth; + this.props.Document.clipWidth = this.props.PanelWidth() / 2; - //when resized, use current position and old value to infer the new bar position - computed(() => this.props.PanelWidth()).observe(({ oldValue, newValue }) => + //preserve before/after ratio during resizing + this.resizeUpdater = computed(() => this.props.PanelWidth()).observe(({ oldValue, newValue }) => this.props.Document.clipWidth = NumCast(this.props.Document.clipWidth) / NumCast(oldValue) * newValue ); } + componentWillUnmount() { + this.resizeUpdater(); + } + private onPointerMove = ({ movementX }: PointerEvent) => { - const width = NumCast(this.props.Document.clipWidth) + movementX; //is it ok to use NumCast + //is it ok to use NumCast + const width = movementX * this.props.ScreenToLocalTransform().Scale + NumCast(this.props.Document.clipWidth); if (width && width > 5 && width < this.props.PanelWidth()) { this.props.Document.clipWidth = width; } @@ -100,28 +101,16 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps, C delete this.props.Document.afterDoc; } - onResize = () => { - console.log("native height: " + this.props.NativeHeight()); - console.log("native width: " + this.props.NativeWidth()); - console.log("panel height: " + this.props.PanelHeight()); - console.log("panel width: " + this.props.PanelWidth()); - console.log("scaling: " + this.props.ContentScaling()); - console.log("transform: " + this.props.ScreenToLocalTransform()); - } - - private resizeUpdater: Lambda; - get fieldKey() { return this.props.fieldKey.startsWith("@") ? StrCast(this.props.Document[this.props.fieldKey]) : this.props.fieldKey; } render() { - console.log("scaling?? " + this.props.ContentScaling()); const beforeDoc = this.props.Document.beforeDoc as Doc; const afterDoc = this.props.Document.afterDoc as Doc; const clipWidth = this.props.Document.clipWidth as Number; return ( - <div className="comparisonBox" onPointerDown={(e) => this.onResize()}> + <div className="comparisonBox"> {/* wraps around before image and slider bar */} <div className="clip-div" style={{ width: clipWidth + "px" }}> <div |