From 1e24f26454aada5afbf9daad4d5ed339083f364c Mon Sep 17 00:00:00 2001 From: Melissa Zhang Date: Thu, 16 Apr 2020 17:20:07 -0700 Subject: fixed image drag and drop --- src/client/documents/DocumentTypes.ts | 1 + src/client/documents/Documents.ts | 9 +- src/client/views/nodes/ComparisonBox.scss | 7 +- src/client/views/nodes/ComparisonBox.tsx | 97 ++++++++++------------ src/client/views/nodes/DocumentContentsView.tsx | 3 +- .../authentication/models/current_user_utils.ts | 1 + 6 files changed, 62 insertions(+), 56 deletions(-) (limited to 'src') diff --git a/src/client/documents/DocumentTypes.ts b/src/client/documents/DocumentTypes.ts index de366763b..06d35038a 100644 --- a/src/client/documents/DocumentTypes.ts +++ b/src/client/documents/DocumentTypes.ts @@ -31,6 +31,7 @@ export enum DocumentType { COLOR = "color", // color picker (view of a color picker for a color string) YOUTUBE = "youtube", // youtube directory (view of you tube search results) DOCHOLDER = "docholder", // nested document (view of a document) + COMPARISON = "comparison", // before/after view with slider (view of 2 images) LINKDB = "linkdb", // database of links ??? why do we have this RECOMMENDATION = "recommendation", // view of a recommendation diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 43e379125..a2e59b238 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -49,8 +49,8 @@ import { ContextMenuProps } from "../views/ContextMenuItem"; import { ContextMenu } from "../views/ContextMenu"; import { LinkBox } from "../views/nodes/LinkBox"; import { ScreenshotBox } from "../views/nodes/ScreenshotBox"; +import { ComparisonBox } from "../views/nodes/ComparisonBox"; import CollectionMapView from "../views/collections/CollectionMapView"; -import LocationField, { LocationData } from "../../new_fields/LocationField"; const requestImageSize = require('../util/request-image-size'); const path = require('path'); @@ -280,6 +280,9 @@ export namespace Docs { [DocumentType.SCREENSHOT, { layout: { view: ScreenshotBox, dataField: data }, }], + [DocumentType.COMPARISON, { + layout: { view: ComparisonBox, dataField: data }, + }], ]); // All document prototypes are initialized with at least these values @@ -535,6 +538,10 @@ export namespace Docs { return InstanceFromProto(Prototypes.get(DocumentType.SCREENSHOT), "", options); } + export function ComparisonDocument(options: DocumentOptions = {}) { + return InstanceFromProto(Prototypes.get(DocumentType.COMPARISON), "", options); + } + export function AudioDocument(url: string, options: DocumentOptions = {}) { const instance = InstanceFromProto(Prototypes.get(DocumentType.AUDIO), new AudioField(new URL(url)), options); Doc.GetProto(instance).backgroundColor = ComputedField.MakeFunction("this._audioState === 'playing' ? 'green':'gray'"); diff --git a/src/client/views/nodes/ComparisonBox.scss b/src/client/views/nodes/ComparisonBox.scss index 32ced3463..57c680d55 100644 --- a/src/client/views/nodes/ComparisonBox.scss +++ b/src/client/views/nodes/ComparisonBox.scss @@ -3,6 +3,9 @@ border-radius: inherit; width: 100%; height: 100%; - position: absolute; - transform-origin: top left; + + .beforeBox-cont { + width: 100%; + height: 100%; + } } \ No newline at end of file diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx index 167000821..9120daa6c 100644 --- a/src/client/views/nodes/ComparisonBox.tsx +++ b/src/client/views/nodes/ComparisonBox.tsx @@ -4,7 +4,7 @@ import { faAsterisk, faBrain, faFileAudio, faImage, faPaintBrush } from '@fortaw import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { action, computed, observable, runInAction } from 'mobx'; import { observer } from "mobx-react"; -import { DataSym, Doc, DocListCast, HeightSym, WidthSym } from '../../../new_fields/Doc'; +import { Doc } from '../../../new_fields/Doc'; import { documentSchema } from '../../../new_fields/documentSchemas'; import { Id } from '../../../new_fields/FieldSymbols'; import { List } from '../../../new_fields/List'; @@ -12,16 +12,9 @@ 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 { AudioField, ImageField } from '../../../new_fields/URLField'; -import { TraceMobx } from '../../../new_fields/util'; import { emptyFunction, returnOne, Utils, returnZero } from '../../../Utils'; -import { CognitiveServices, Confidence, Service, Tag } from '../../cognitive_services/CognitiveServices'; import { Docs } from '../../documents/Documents'; import { DragManager } from '../../util/DragManager'; -import { SelectionManager } from '../../util/SelectionManager'; -import { undoBatch } from '../../util/UndoManager'; -import { ContextMenu } from "../ContextMenu"; -import { ContextMenuProps } from '../ContextMenuItem'; import { ViewBoxAnnotatableComponent } from '../DocComponent'; import { FieldView, FieldViewProps } from './FieldView'; import "./ComparisonBox.scss"; @@ -44,45 +37,33 @@ const ComparisonDocument = makeInterface(pageSchema, documentSchema); @observer export class ComparisonBox extends ViewBoxAnnotatableComponent(ComparisonDocument) { protected multiTouchDisposer?: import("../../util/InteractionUtils").InteractionUtils.MultiTouchEventDisposer | undefined; - protected beforeDoc: Doc | undefined; - protected afterDoc: Doc | undefined; public static LayoutString(fieldKey: string) { return FieldView.LayoutString(ComparisonBox, fieldKey); } private _beforeDropDisposer?: DragManager.DragDropDisposer; private _afterDropDisposer?: DragManager.DragDropDisposer; - protected createBeforeDropTarget = (ele: HTMLDivElement) => { - this._beforeDropDisposer && this._beforeDropDisposer(); - ele && (this._beforeDropDisposer = DragManager.MakeDropTarget(ele, (event, dropEvent) => { - this.beforeDoc = dropEvent.complete.docDragData.droppedDocuments[0]; - })); + protected createDropTarget = (ele: HTMLDivElement | null, fieldKey: string) => { + if (ele) { + return DragManager.MakeDropTarget(ele, (event, dropEvent) => this.dropHandler(event, dropEvent, fieldKey)); + } } - protected createAfterDropTarget = (ele: HTMLDivElement) => { - this._afterDropDisposer && this._afterDropDisposer(); - ele && (this._afterDropDisposer = DragManager.MakeDropTarget(ele, (event, dropEvent) => { - this.afterDoc = dropEvent.complete.docDragData.droppedDocuments[0]; - })); - // this.afterDropHandler(this._afterDropDisposer); - } - - beforeDropHandler = (ele: any) => { - - } - - afterDropHandler = (ele: any) => { - + private dropHandler = (event: Event, dropEvent: DragManager.DropEvent, fieldKey: string) => { + const droppedDocs = dropEvent.complete.docDragData?.droppedDocuments; + if (droppedDocs?.length) { + this.props.Document[fieldKey] = Doc.MakeAlias(droppedDocs[0]); + } } clearBeforeDoc = (e: PointerEvent) => { e.stopPropagation; - this.beforeDoc = undefined; + delete this.props.Document.beforeDoc; } clearAfterDoc = (e: PointerEvent) => { e.stopPropagation; - this.afterDoc = undefined; + delete this.props.Document.afterDoc; } get fieldKey() { @@ -90,32 +71,44 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent - { - beforeDoc ? -
+
+
{ + this._beforeDropDisposer && this._beforeDropDisposer(); + this._beforeDropDisposer = this.createDropTarget(ele, "beforeDoc"); + }} + style={{ backgroundColor: "red" }} + > + { + beforeDoc ? -
: null - } - - {/* { - beforeDoc ? -
- -
: null - } -
- -
*/} + : null + } +
+
{ + this._afterDropDisposer && this._afterDropDisposer(); + this._afterDropDisposer = this.createDropTarget(ele, "afterDoc"); + }} + style={{ backgroundColor: "orange" }} + > + { + afterDoc ? + + : null + } +
); } } \ No newline at end of file diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx index 7522af3a3..831bce22f 100644 --- a/src/client/views/nodes/DocumentContentsView.tsx +++ b/src/client/views/nodes/DocumentContentsView.tsx @@ -30,6 +30,7 @@ import { DashWebRTCVideo } from "../webcam/DashWebRTCVideo"; import { LinkAnchorBox } from "./LinkAnchorBox"; import { PresElementBox } from "../presentationview/PresElementBox"; import { ScreenshotBox } from "./ScreenshotBox"; +import { ComparisonBox } from "./ComparisonBox"; import { VideoBox } from "./VideoBox"; import { WebBox } from "./WebBox"; import { InkingStroke } from "../InkingStroke"; @@ -113,7 +114,7 @@ export class DocumentContentsView extends React.Component