aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/documents/DocumentTypes.ts1
-rw-r--r--src/client/documents/Documents.ts8
-rw-r--r--src/client/util/CurrentUserUtils.ts1
-rw-r--r--src/client/views/DocumentDecorations.tsx1
-rw-r--r--src/client/views/nodes/ComparisonBox.scss90
-rw-r--r--src/client/views/nodes/ComparisonBox.tsx158
-rw-r--r--src/client/views/nodes/DocumentContentsView.tsx3
-rw-r--r--src/client/views/nodes/DocumentView.scss1
8 files changed, 262 insertions, 1 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 b859086d5..7a7cbbb93 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -48,6 +48,7 @@ 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";
const path = require('path');
export interface DocumentOptions {
@@ -297,6 +298,9 @@ export namespace Docs {
[DocumentType.SCREENSHOT, {
layout: { view: ScreenshotBox, dataField: defaultDataKey },
}],
+ [DocumentType.COMPARISON, {
+ layout: { view: ComparisonBox, dataField: defaultDataKey },
+ }],
]);
// All document prototypes are initialized with at least these values
@@ -554,6 +558,10 @@ export namespace Docs {
return InstanceFromProto(Prototypes.get(DocumentType.SCREENSHOT), "", options);
}
+ export function ComparisonDocument(options: DocumentOptions = { title: "Comparison Box" }) {
+ return InstanceFromProto(Prototypes.get(DocumentType.COMPARISON), "", { targetDropAction: "alias", ...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/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 67da265b3..496099557 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -320,6 +320,7 @@ export class CurrentUserUtils {
doc.emptyWebpage = Docs.Create.WebDocument("", { title: "New Webpage", _nativeWidth: 850, _nativeHeight: 962, _width: 600, UseCors: true });
}
return [
+ { title: "Drag a comparison box", label: "Comp", icon: "columns", ignoreClick: true, drag: 'Docs.Create.ComparisonDocument()' },
{ title: "Drag a collection", label: "Col", icon: "folder", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyCollection as Doc },
{ title: "Drag a web page", label: "Web", icon: "globe-asia", click: 'openOnRight(getCopy(this.dragFactory, true))', drag: 'getCopy(this.dragFactory, true)', dragFactory: doc.emptyWebpage as Doc },
{ title: "Drag a cat image", label: "Img", icon: "cat", ignoreClick: true, drag: 'Docs.Create.ImageDocument("https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg", { _width: 250, _nativeWidth:250, title: "an image of a cat" })' },
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 7ee4e8d91..04f02c683 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -291,6 +291,7 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
const unfreeze = () =>
SelectionManager.SelectedDocuments().forEach(action((element: DocumentView) =>
((element.rootDoc.type === DocumentType.RTF ||
+ element.rootDoc.type === DocumentType.COMPARISON ||
(element.rootDoc.type === DocumentType.WEB && Doc.LayoutField(element.rootDoc) instanceof HtmlField))
&& element.layoutDoc._nativeHeight) && element.toggleNativeDimensions()));
switch (this._resizeHdlId) {
diff --git a/src/client/views/nodes/ComparisonBox.scss b/src/client/views/nodes/ComparisonBox.scss
new file mode 100644
index 000000000..44965cf28
--- /dev/null
+++ b/src/client/views/nodes/ComparisonBox.scss
@@ -0,0 +1,90 @@
+.comparisonBox-interactive, .comparisonBox {
+ border-radius: inherit;
+ width: 100%;
+ height: 100%;
+ background-color: grey;
+ position: absolute;
+ z-index: 0;
+ pointer-events: none;
+
+ .clip-div {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ overflow: hidden;
+
+ .beforeBox-cont {
+ height: 100%;
+ overflow: hidden;
+ background-color: rgb(240, 240, 240);
+ }
+ }
+
+ .slide-bar {
+ position: absolute;
+ height: 100%;
+ width: 10px;
+ display: inline-block;
+ background: gray;
+ cursor: ew-resize;
+ .slide-handle {
+ position: absolute;
+ display: none;
+ height: 20px;
+ width: 30px;
+ bottom: 0px;
+ left: -6px;
+ .left-handle, .right-handle{
+ width: 15px;
+ }
+ }
+ }
+
+ .afterBox-cont {
+ position: absolute;
+ top: 0;
+ right: 0;
+ height: 100%;
+ width: 100%;
+ overflow: hidden;
+ background-color: lightgray;
+ }
+
+ .clear-button {
+ position: absolute;
+ top: 3px;
+ opacity: 0.8;
+ pointer-events: all;
+ cursor: pointer;
+ }
+
+ .clear-button.before {
+ left: 3px;
+ }
+
+ .clear-button.after {
+ right: 3px;
+ }
+
+ .placeholder {
+ width: 50%;
+ height: 50%;
+ margin-top: 25%;
+ margin-left: 25%;
+
+ .upload-icon {
+ width: 100%;
+ height: 100%;
+ opacity: 0.5;
+ }
+ }
+}
+.comparisonBox-interactive {
+ pointer-events: unset;
+ .slide-bar {
+ .slide-handle {
+ display: flex;
+ }
+ }
+} \ No newline at end of file
diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx
new file mode 100644
index 000000000..eed1fafad
--- /dev/null
+++ b/src/client/views/nodes/ComparisonBox.tsx
@@ -0,0 +1,158 @@
+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 { observer } from "mobx-react";
+import { Doc } from '../../../fields/Doc';
+import { documentSchema } from '../../../fields/documentSchemas';
+import { createSchema, makeInterface } from '../../../fields/Schema';
+import { NumCast, Cast } from '../../../fields/Types';
+import { DragManager } from '../../util/DragManager';
+import { ViewBoxAnnotatableComponent } from '../DocComponent';
+import { FieldView, FieldViewProps } from './FieldView';
+import "./ComparisonBox.scss";
+import React = require("react");
+import { ContentFittingDocumentView } from './ContentFittingDocumentView';
+import { undoBatch } from '../../util/UndoManager';
+import { setupMoveUpEvents, emptyFunction } from '../../../Utils';
+
+library.add(faImage, faEye as any, faPaintBrush, faBrain);
+library.add(faFileAudio, faAsterisk);
+
+export const comparisonSchema = createSchema({});
+
+type ComparisonDocument = makeInterface<[typeof comparisonSchema, typeof documentSchema]>;
+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); }
+
+ private _beforeDropDisposer?: DragManager.DragDropDisposer;
+ private _afterDropDisposer?: DragManager.DragDropDisposer;
+ private resizeUpdater: Lambda | undefined;
+
+ protected createDropTarget = (ele: HTMLDivElement | null, fieldKey: string) => {
+ if (ele) {
+ return DragManager.MakeDropTarget(ele, (event, dropEvent) => this.dropHandler(event, dropEvent, fieldKey), this.layoutDoc);
+ }
+ }
+
+ @undoBatch
+ private dropHandler = (event: Event, dropEvent: DragManager.DropEvent, fieldKey: string) => {
+ event.stopPropagation();
+ const droppedDocs = dropEvent.complete.docDragData?.droppedDocuments;
+ if (droppedDocs?.length) {
+ this.dataDoc[fieldKey] = droppedDocs[0];
+ droppedDocs[0]._fitWidth = true;
+ 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>) => {
+ setupMoveUpEvents(this, e, this.onPointerMove, emptyFunction, emptyFunction);
+ }
+
+ @action
+ private onPointerMove = ({ movementX }: PointerEvent) => {
+ const width = movementX * this.props.ScreenToLocalTransform().Scale + NumCast(this.dataDoc.clipWidth);
+ if (width && width > 5 && width < this.props.PanelWidth()) {
+ this.dataDoc.clipWidth = width;
+ }
+ return false;
+ }
+
+ @undoBatch
+ clearDoc = (e: React.MouseEvent, fieldKey: string) => {
+ e.stopPropagation;
+ e.preventDefault;
+ delete this.dataDoc[fieldKey];
+ }
+
+ render() {
+ const beforeDoc = Cast(this.dataDoc.beforeDoc, Doc, null);
+ const afterDoc = Cast(this.dataDoc.afterDoc, Doc, null);
+ const clipWidth = NumCast(this.dataDoc.clipWidth);
+ return (
+ <div className={`comparisonBox${this.active() ? "-interactive" : ""}`}>
+ <div
+ className="afterBox-cont"
+ key={"after"}
+ ref={(ele) => {
+ this._afterDropDisposer?.();
+ this._afterDropDisposer = this.createDropTarget(ele, "afterDoc");
+ }}>
+ {
+ afterDoc ?
+ <>
+ <ContentFittingDocumentView {...this.props}
+ Document={afterDoc}
+ 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" style={{ width: clipWidth + "px" }}>
+ {/* 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}
+ 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>
+ </div>
+
+ <div className="slide-bar" style={{ left: `calc(${NumCast(this.dataDoc.clipWidth) * 100 / this.props.PanelWidth()}% - 5px)` }} onPointerDown={this.registerSliding}>
+ <div className="slide-handle" >
+ <div className="left-handle" onClick={() => this.dataDoc.clipWidth = 5}>
+ <FontAwesomeIcon icon="caret-left" size="lg" />
+ </div>
+ <div className="right-handle" onClick={() => this.dataDoc.clipWidth = this.props.PanelWidth() - 5}>
+ <FontAwesomeIcon icon="caret-right" size="lg" />
+ </div>
+ </div>
+ </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 f4785bb0c..ef56e6fcd 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";
@@ -194,7 +195,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, HTMLtag
+ RecommendationsBox, ScreenshotBox, HTMLtag, ComparisonBox
}}
bindings={bindings}
jsx={layoutFrame}
diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss
index dea09cb30..b7726f7ba 100644
--- a/src/client/views/nodes/DocumentView.scss
+++ b/src/client/views/nodes/DocumentView.scss
@@ -94,6 +94,7 @@
text-align: center;
text-overflow: ellipsis;
white-space: pre;
+ position: absolute;
}
.documentView-titleWrapper-hover {
display:none;
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 00:28:45 +0000