aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/documents/DocumentTypes.ts1
-rw-r--r--src/client/documents/Documents.ts9
-rw-r--r--src/client/views/nodes/ComparisonBox.scss7
-rw-r--r--src/client/views/nodes/ComparisonBox.tsx97
-rw-r--r--src/client/views/nodes/DocumentContentsView.tsx3
-rw-r--r--src/server/authentication/models/current_user_utils.ts1
6 files changed, 62 insertions, 56 deletions
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<FieldViewProps, ComparisonDocument>(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<FieldViewProps, C
}
render() {
- TraceMobx();
- const dragging = !SelectionManager.GetIsDragging() ? "" : "-dragging";
const beforeDoc = this.props.Document.beforeDoc as Doc;
+ const afterDoc = this.props.Document.afterDoc as Doc;
return (
- <div className={`comparisonBox${dragging}`}>
- {
- beforeDoc ?
- <div className="beforeBox-cont" key={this.props.Document[Id]} ref={this.createBeforeDropTarget}>
+ <div className={`comparisonBox`} style={{ backgroundColor: "blue" }}>
+ <div
+ className="beforeBox-cont"
+ key={this.props.Document[Id]}
+ ref={(ele) => {
+ this._beforeDropDisposer && this._beforeDropDisposer();
+ this._beforeDropDisposer = this.createDropTarget(ele, "beforeDoc");
+ }}
+ style={{ backgroundColor: "red" }}
+ >
+ {
+ beforeDoc ?
<ContentFittingDocumentView {...this.props}
Document={beforeDoc}
getTransform={this.props.ScreenToLocalTransform} />
- </div> : null
- }
-
- {/* {
- beforeDoc ?
- <div className="beforeBox-cont" key={this.props.Document[Id]} ref={this.createBeforeDropTarget}>
- <ContentFittingDocumentView {...this.props}
- Document={beforeDoc}
- getTransform={this.props.ScreenToLocalTransform} />
- </div> : null
- }
- <div className="beforeBox-cont" key={this.props.Document[Id]} ref={this.createBeforeDropTarget}>
- <ContentFittingDocumentView {...this.props}
- Document={this.props.Document.afterDoc} />
- </div> */}
+ : null
+ }
+ </div>
+ <div
+ className="afterBox-cont"
+ key={this.props.Document[Id]}
+ ref={(ele) => {
+ this._afterDropDisposer && this._afterDropDisposer();
+ this._afterDropDisposer = this.createDropTarget(ele, "afterDoc");
+ }}
+ style={{ backgroundColor: "orange" }}
+ >
+ {
+ afterDoc ?
+ <ContentFittingDocumentView {...this.props}
+ Document={afterDoc}
+ getTransform={this.props.ScreenToLocalTransform} />
+ : null
+ }
+ </div>
</div>);
}
} \ 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<DocumentViewProps & {
CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView, WebBox, KeyValueBox,
PDFBox, VideoBox, AudioBox, PresBox, YoutubeBox, PresElementBox, QueryBox,
ColorBox, DashWebRTCVideo, LinkAnchorBox, InkingStroke, DocHolderBox, LinkBox, ScriptingBox,
- RecommendationsBox, ScreenshotBox
+ RecommendationsBox, ScreenshotBox, ComparisonBox
}}
bindings={this.CreateBindings()}
jsx={this.layout}
diff --git a/src/server/authentication/models/current_user_utils.ts b/src/server/authentication/models/current_user_utils.ts
index 5408440e7..dccbecdca 100644
--- a/src/server/authentication/models/current_user_utils.ts
+++ b/src/server/authentication/models/current_user_utils.ts
@@ -70,6 +70,7 @@ export class CurrentUserUtils {
const emptyCollection = Docs.Create.FreeformDocument([], { _nativeWidth: undefined, _nativeHeight: undefined, _LODdisable: true, _width: 150, _height: 100, title: "freeform" });
doc.activePen = doc;
const docProtoData: { title: string, icon: string, drag?: string, ignoreClick?: boolean, click?: string, ischecked?: string, activePen?: Doc, backgroundColor?: string, dragFactory?: Doc }[] = [
+ { title: "comparison box", icon: "cat", ignoreClick: true, drag: 'Docs.Create.ComparisonDocument()' },
{ title: "collection", icon: "folder", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: emptyCollection },
{ title: "preview", icon: "expand", ignoreClick: true, drag: 'Docs.Create.DocumentDocument(ComputedField.MakeFunction("selectedDocs(this,this.excludeCollections,[_last_])?.[0]"), { _width: 250, _height: 250, title: "container" })' },
{ title: "web page", icon: "globe-asia", ignoreClick: true, drag: 'Docs.Create.WebDocument("https://en.wikipedia.org/wiki/Hedgehog", {_width: 300, _height: 300, title: "New Webpage" })' },
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-09 05:39:49 +0000