diff options
Diffstat (limited to 'src/client/views/nodes')
| -rw-r--r-- | src/client/views/nodes/CollectionFreeFormDocumentView.tsx | 15 | ||||
| -rw-r--r-- | src/client/views/nodes/ComparisonBox.scss | 5 | ||||
| -rw-r--r-- | src/client/views/nodes/ComparisonBox.tsx | 131 | ||||
| -rw-r--r-- | src/client/views/nodes/DocumentView.tsx | 16 | ||||
| -rw-r--r-- | src/client/views/nodes/ImageBox.tsx | 6 |
5 files changed, 69 insertions, 104 deletions
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index 57f484214..a4120f958 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -100,13 +100,14 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF } public static setupKeyframes(docs: Doc[], timecode: number, collection: Doc) { - docs.forEach(doc => { - doc["x-indexed"] = new List<number>(numberRange(timecode).map(i => undefined) as any as number[]); - doc["y-indexed"] = new List<number>(numberRange(timecode).map(i => undefined) as any as number[]); - doc["opacity-indexed"] = new List<number>(numberRange(timecode).map(i => 0)); - (doc["x-indexed"] as any).push(NumCast(doc.x)); - (doc["y-indexed"] as any).push(NumCast(doc.y)); - (doc["opacity-indexed"] as any).push(NumCast(doc.opacity, 1)); + docs.forEach((doc, i) => { + const xlist = new List<number>(numberRange(timecode + 1).map(i => undefined) as any as number[]); + const ylist = new List<number>(numberRange(timecode + 1).map(i => undefined) as any as number[]); + xlist[Math.max(i - 1)] = xlist[timecode + 1] = NumCast(doc.x); + ylist[Math.max(i - 1)] = ylist[timecode + 1] = NumCast(doc.y); + doc["x-indexed"] = xlist; + doc["y-indexed"] = ylist; + doc["opacity-indexed"] = new List<number>(numberRange(timecode).map(i => 1)); doc.displayTimecode = ComputedField.MakeFunction("collection ? collection.currentTimecode : 0", {}, { collection }); doc.x = ComputedField.MakeInterpolated("x", "displayTimecode"); doc.y = ComputedField.MakeInterpolated("y", "displayTimecode"); diff --git a/src/client/views/nodes/ComparisonBox.scss b/src/client/views/nodes/ComparisonBox.scss index 3d48d96e2..7849c9976 100644 --- a/src/client/views/nodes/ComparisonBox.scss +++ b/src/client/views/nodes/ComparisonBox.scss @@ -2,7 +2,6 @@ border-radius: inherit; width: 100%; height: 100%; - background-color: grey; position: absolute; z-index: 0; pointer-events: none; @@ -17,7 +16,6 @@ .beforeBox-cont { height: 100%; overflow: hidden; - background-color: rgb(240, 240, 240); } } @@ -26,7 +24,7 @@ height: 100%; width: 3px; display: inline-block; - background: gray; + background: white; cursor: ew-resize; .slide-handle { position: absolute; @@ -48,7 +46,6 @@ height: 100%; width: 100%; overflow: hidden; - background-color: lightgray; } .clear-button { diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx index 7a4d40db1..f79fe6e78 100644 --- a/src/client/views/nodes/ComparisonBox.tsx +++ b/src/client/views/nodes/ComparisonBox.tsx @@ -1,13 +1,10 @@ -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'; +import { NumCast, Cast, StrCast } from '../../../fields/Types'; import { DragManager } from '../../util/DragManager'; import { ViewBoxAnnotatableComponent } from '../DocComponent'; import { FieldView, FieldViewProps } from './FieldView'; @@ -17,9 +14,7 @@ import { ContentFittingDocumentView } from './ContentFittingDocumentView'; import { undoBatch } from '../../util/UndoManager'; import { setupMoveUpEvents, emptyFunction } from '../../../Utils'; import { SnappingManager } from '../../util/SnappingManager'; - -library.add(faImage, faEye as any, faPaintBrush, faBrain); -library.add(faFileAudio, faAsterisk); +import { DocumentViewProps } from './DocumentView'; export const comparisonSchema = createSchema({}); @@ -28,17 +23,16 @@ 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); } + protected multiTouchDisposer?: import("../../util/InteractionUtils").InteractionUtils.MultiTouchEventDisposer | undefined; + private _disposers: (DragManager.DragDropDisposer | undefined)[] = [undefined, undefined]; - private _beforeDropDisposer?: DragManager.DragDropDisposer; - private _afterDropDisposer?: DragManager.DragDropDisposer; - private resizeUpdater: Lambda | undefined; + @observable _animating = ""; - protected createDropTarget = (ele: HTMLDivElement | null, fieldKey: string) => { + protected createDropTarget = (ele: HTMLDivElement | null, fieldKey: string, disposerId: number) => { + this._disposers[disposerId]?.(); if (ele) { - return DragManager.MakeDropTarget(ele, (event, dropEvent) => this.dropHandler(event, dropEvent, fieldKey), this.layoutDoc); + this._disposers[disposerId] = DragManager.MakeDropTarget(ele, (e, dropEvent) => this.dropHandler(e, dropEvent, fieldKey), this.layoutDoc); } } @@ -48,36 +42,22 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps, C const droppedDocs = dropEvent.complete.docDragData?.droppedDocuments; if (droppedDocs?.length) { this.dataDoc[fieldKey] = droppedDocs[0]; - 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>, targetWidth: number) => { setupMoveUpEvents(this, e, this.onPointerMove, emptyFunction, action(() => { - this._animating = true; - this.dataDoc.clipWidth = targetWidth; - setTimeout(action(() => this._animating = false), 1000); + this._animating = "all 1s"; + 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); + 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; + this.layoutDoc._clipWidth = width * 100 / this.props.PanelWidth(); } return false; } @@ -85,66 +65,43 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps, C @undoBatch clearDoc = (e: React.MouseEvent, fieldKey: string) => { e.stopPropagation; - e.preventDefault; delete this.dataDoc[fieldKey]; } - @observable _animating = false; render() { - const beforeDoc = Cast(this.dataDoc.beforeDoc, Doc, null); - const afterDoc = Cast(this.dataDoc.afterDoc, Doc, null); - const clipWidth = NumCast(this.dataDoc.clipWidth); + const clipWidth = NumCast(this.layoutDoc._clipWidth) + "%"; + const childProps: DocumentViewProps = { ...this.props, pointerEvents: false, parentActive: this.props.active }; + const clearButton = (which: string) => { + return <div className={`clear-button ${which}`} onPointerDown={e => e.stopPropagation()} onClick={e => this.clearDoc(e, `${which}Doc`)}> + <FontAwesomeIcon className={`clear-button ${which}`} icon={"times"} size="sm" /> + </div> + } + const displayDoc = (which: string) => { + const whichDoc = Cast(this.dataDoc[`${which}Doc`], Doc, null); + return whichDoc ? <> + <ContentFittingDocumentView {...childProps} Document={whichDoc} /> + {clearButton(which)} + </> : // placeholder image if doc is missing + <div className="placeholder"> + <FontAwesomeIcon className="upload-icon" icon={"cloud-upload-alt"} size="lg" /> + </div> + } + const displayBox = (which: string, index: number, cover: number) => { + return <div className={`${which}Box-cont`} key={which} style={{ width: this.props.PanelWidth() }} + onPointerDown={e => this.registerSliding(e, cover)} + ref={ele => this.createDropTarget(ele, `${which}Doc`, index)} > + {displayDoc(which)} + </div>; + } + return ( <div className={`comparisonBox${this.active() || SnappingManager.GetIsDragging() ? "-interactive" : ""}`}> - <div className="afterBox-cont" key={"after"} onPointerDown={e => this.registerSliding(e, this.props.PanelWidth() - 5)} - ref={(ele) => { - this._afterDropDisposer?.(); - this._afterDropDisposer = this.createDropTarget(ele, "afterDoc"); - }}> - {afterDoc ? <> - <ContentFittingDocumentView {...this.props} - Document={afterDoc} - pointerEvents={false} - 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" onPointerDown={e => this.registerSliding(e, 5)} style={{ width: clipWidth + "px", transition: this._animating ? "all 1s" : undefined }}> - {/* 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} - pointerEvents={false} - 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> + {displayBox("after", 1, this.props.PanelWidth() - 5)} + <div className="clip-div" style={{ width: clipWidth, transition: this._animating, background: StrCast(this.layoutDoc._backgroundColor, "gray") }}> + {displayBox("before", 0, 5)} </div> - <div className="slide-bar" style={{ left: `calc(${NumCast(this.dataDoc.clipWidth) * 100 / this.props.PanelWidth()}% - 0.5px)` }}> + <div className="slide-bar" style={{ left: `calc(${clipWidth} - 0.5px)` }}> <div className="slide-handle" /> </div> </div >); diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 993cabc36..00d19752f 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -1111,6 +1111,16 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu }), 400); }); + renderLock() { + return (this.Document.isBackground !== undefined || this.isSelected(false)) && + ((this.Document.type === DocumentType.COL && this.Document._viewType !== CollectionViewType.Pile) || this.Document.type === DocumentType.IMG) && + this.props.renderDepth > 0 && this.props.PanelWidth() > 0 ? + <div className="documentView-lock" onClick={() => this.toggleBackground(true)}> + <FontAwesomeIcon icon={this.Document.isBackground ? "unlock" : "lock"} style={{ color: this.Document.isBackground ? "red" : undefined }} size="lg" /> + </div> + : (null); + } + render() { if (!(this.props.Document instanceof Doc)) return (null); const backgroundColor = Doc.UserDoc().renderStyle === "comic" ? undefined : StrCast(this.layoutDoc._backgroundColor) || StrCast(this.layoutDoc.backgroundColor) || StrCast(this.Document.backgroundColor) || this.props.backgroundColor?.(this.Document); @@ -1161,11 +1171,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu <div className="documentView-contentBlocker" /> </> : this.innards} - {(this.Document.isBackground !== undefined || this.isSelected(false)) && (this.Document.type === DocumentType.COL || this.Document.type === DocumentType.IMG) && this.props.renderDepth > 0 && this.props.PanelWidth() > 0 ? - <div className="documentView-lock" onClick={() => this.toggleBackground(true)}> - <FontAwesomeIcon icon={this.Document.isBackground ? "unlock" : "lock"} style={{ color: this.Document.isBackground ? "red" : undefined }} size="lg" /> - </div> - : (null)} + {this.renderLock()} </div>; { this._showKPQuery ? <KeyphraseQueryView keyphrases={this._queries}></KeyphraseQueryView> : undefined; } } diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index 77abfef1d..6913dfbc7 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -266,7 +266,11 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps, ImageD if (!this.layoutDoc.isTemplateDoc || this.dataDoc !== this.layoutDoc) { requestImageSize(imgPath).then(action((inquiredSize: any) => { const rotation = NumCast(this.dataDoc[this.fieldKey + "-rotation"]) % 180; - const rotatedNativeSize = rotation === 90 || rotation === 270 ? { height: inquiredSize.width, width: inquiredSize.height } : inquiredSize; + const rotatedNativeSize = { width: inquiredSize.width, height: inquiredSize.height }; + if (inquiredSize.orientation === 6 || rotation === 90 || rotation === 270) { + rotatedNativeSize.width = inquiredSize.height; + rotatedNativeSize.height = inquiredSize.width; + } const rotatedAspect = rotatedNativeSize.height / rotatedNativeSize.width; if (this.layoutDoc[WidthSym]() && (!cachedNativeSize.width || !cachedNativeSize.height || Math.abs(1 - docAspect / rotatedAspect) > 0.1)) { this.layoutDoc._height = this.layoutDoc[WidthSym]() * rotatedAspect; |