From d37cf6f8cf007a5b329e072d443e7d2b05b0a01d Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Thu, 21 May 2020 11:17:55 -0400 Subject: fixed comparisonBox to use percents --- src/client/documents/Documents.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'src/client/documents/Documents.ts') 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 = {}) { -- cgit v1.2.3-70-g09d2 From a4d607795e0b252dbef2c175b5a29954aebbfab4 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Thu, 21 May 2020 11:59:31 -0400 Subject: comparison box code simplifications. --- src/client/documents/Documents.ts | 2 +- src/client/views/nodes/ComparisonBox.tsx | 90 +++++++++++++------------------- 2 files changed, 37 insertions(+), 55 deletions(-) (limited to 'src/client/documents/Documents.ts') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 48de203ef..bdaadd25e 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -560,7 +560,7 @@ export namespace Docs { } export function ComparisonDocument(options: DocumentOptions = { title: "Comparison Box" }) { - return InstanceFromProto(Prototypes.get(DocumentType.COMPARISON), "", { clipWidth: 50, targetDropAction: "alias", ...options }); + return InstanceFromProto(Prototypes.get(DocumentType.COMPARISON), "", { clipWidth: 50, _backgroundColor:"gray", targetDropAction: "alias", ...options }); } export function AudioDocument(url: string, options: DocumentOptions = {}) { diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx index d52ba9896..1ed381058 100644 --- a/src/client/views/nodes/ComparisonBox.tsx +++ b/src/client/views/nodes/ComparisonBox.tsx @@ -2,9 +2,9 @@ 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'; @@ -17,6 +17,7 @@ import { ContentFittingDocumentView } from './ContentFittingDocumentView'; import { undoBatch } from '../../util/UndoManager'; import { setupMoveUpEvents, emptyFunction } from '../../../Utils'; import { SnappingManager } from '../../util/SnappingManager'; +import { DocumentViewProps } from './DocumentView'; library.add(faImage, faEye as any, faPaintBrush, faBrain); library.add(faFileAudio, faAsterisk); @@ -32,10 +33,12 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent { + protected createDropTarget = (ele: HTMLDivElement | null, fieldKey: string, disposer: Opt) => { + disposer?.(); if (ele) { return DragManager.MakeDropTarget(ele, (event, dropEvent) => this.dropHandler(event, dropEvent, fieldKey), this.layoutDoc); } @@ -53,9 +56,9 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent, targetWidth: number) => { setupMoveUpEvents(this, e, this.onPointerMove, emptyFunction, action(() => { - this._animating = true; + this._animating = "all 1s"; this.dataDoc.clipWidth = targetWidth * 100 / this.props.PanelWidth(); - setTimeout(action(() => this._animating = false), 1000); + setTimeout(action(() => this._animating = ""), 1000); }), false); } @@ -75,62 +78,41 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent { + return
this.clearDoc(e, `${which}Doc`)}> + +
+ } + const displayDoc = (which: string) => { + const whichDoc = Cast(this.dataDoc[`${which}Doc`], Doc, null); + return whichDoc ? <> + + {clearButton(which)} + : // placeholder image if doc is missing +
+ +
+ } + return (
-
this.registerSliding(e, this.props.PanelWidth() - 5)} - ref={(ele) => { - this._afterDropDisposer?.(); - this._afterDropDisposer = this.createDropTarget(ele, "afterDoc"); - }}> - {afterDoc ? <> - -
this.clearDoc(e, "afterDoc")}> - -
- : -
- -
} +
this.registerSliding(e, this.props.PanelWidth() - 5)} + ref={ele => this._afterDropDisposer = this.createDropTarget(ele, "afterDoc", this._afterDropDisposer)} > + {displayDoc("after")}
-
this.registerSliding(e, 5)} style={{ width: clipWidth + "%", transition: this._animating ? "all 1s" : undefined }}> - {/* wraps around before image and slider bar */} -
{ - this._beforeDropDisposer?.(); - this._beforeDropDisposer = this.createDropTarget(ele, "beforeDoc"); - }} - style={{ width: this.props.PanelWidth() }}> - { - beforeDoc ? - <> - -
this.clearDoc(e, "beforeDoc")}> - -
- - : -
- -
- } +
+
this.registerSliding(e, 5)} + ref={ele => this._beforeDropDisposer = this.createDropTarget(ele, "beforeDoc", this._beforeDropDisposer)} > + {displayDoc("before")}
-
+
); -- cgit v1.2.3-70-g09d2 From bf37e95b030b2e444078846681e327674c32312b Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Thu, 21 May 2020 19:53:28 -0400 Subject: changed _clipWidth to a layoutField --- src/client/documents/Documents.ts | 4 ++-- src/client/views/nodes/ComparisonBox.tsx | 9 ++++----- 2 files changed, 6 insertions(+), 7 deletions(-) (limited to 'src/client/documents/Documents.ts') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index bdaadd25e..6b17b4303 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -110,7 +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 + _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 @@ -560,7 +560,7 @@ export namespace Docs { } export function ComparisonDocument(options: DocumentOptions = { title: "Comparison Box" }) { - return InstanceFromProto(Prototypes.get(DocumentType.COMPARISON), "", { clipWidth: 50, _backgroundColor:"gray", targetDropAction: "alias", ...options }); + return InstanceFromProto(Prototypes.get(DocumentType.COMPARISON), "", { _clipWidth: 50, _backgroundColor: "gray", targetDropAction: "alias", ...options }); } export function AudioDocument(url: string, options: DocumentOptions = {}) { diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx index d61934380..f79fe6e78 100644 --- a/src/client/views/nodes/ComparisonBox.tsx +++ b/src/client/views/nodes/ComparisonBox.tsx @@ -42,23 +42,22 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent, targetWidth: number) => { setupMoveUpEvents(this, e, this.onPointerMove, emptyFunction, action(() => { this._animating = "all 1s"; - this.dataDoc.clipWidth = targetWidth * 100 / this.props.PanelWidth(); + 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) / 100 * this.props.PanelWidth(); + 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 * 100 / this.props.PanelWidth(); + this.layoutDoc._clipWidth = width * 100 / this.props.PanelWidth(); } return false; } @@ -70,7 +69,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent { return
e.stopPropagation()} onClick={e => this.clearDoc(e, `${which}Doc`)}> -- cgit v1.2.3-70-g09d2