diff options
4 files changed, 41 insertions, 8 deletions
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 50f0a6164..3ae64d2c6 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -254,7 +254,6 @@ export class CollectionFreeFormView extends CollectionSubView { @computed get views() { - trace(); var curPage = this.props.Document.GetNumber(KeyStore.CurPage, -1); let docviews = this.props.Document.GetList(this.props.fieldKey, [] as Document[]).filter(doc => doc).reduce((prev, doc) => { var page = doc.GetNumber(KeyStore.Page, -1); @@ -280,7 +279,6 @@ export class CollectionFreeFormView extends CollectionSubView { } render() { - trace(); const containerName = `collectionfreeformview${this.isAnnotationOverlay ? "-overlay" : "-container"}`; return ( <Measure onResize={this.onResize}> diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index 68e5a70fb..8cf7a0dd2 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -65,7 +65,6 @@ export class CollectionFreeFormDocumentView extends React.Component<CollectionFr } render() { - trace(); let zoomFade = 1; // //var zoom = doc.GetNumber(KeyStore.Zoom, 1); // let transform = (this.props.ScreenToLocalTransform().scale(this.props.ContentScaling())).inverse(); diff --git a/src/client/views/nodes/ImageBox.scss b/src/client/views/nodes/ImageBox.scss index 487038841..f4b3837ff 100644 --- a/src/client/views/nodes/ImageBox.scss +++ b/src/client/views/nodes/ImageBox.scss @@ -8,6 +8,16 @@ max-height: 100%; } +.imageBox-dot { + position:absolute; + bottom: 10; + left: 0; + border-radius: 10px; + width:20px; + height:20px; + background:gray; +} + .imageBox-cont img { height: 100%; width:100%; @@ -18,4 +28,4 @@ border: none; width: 100%; height: 100%; -} +}
\ No newline at end of file diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx index edd7f55fc..ac54321d5 100644 --- a/src/client/views/nodes/ImageBox.tsx +++ b/src/client/views/nodes/ImageBox.tsx @@ -13,9 +13,12 @@ import React = require("react"); import { Utils } from '../../../Utils'; import { ListField } from '../../../fields/ListField'; import { DragManager } from '../../util/DragManager'; -import { undoBatch } from '../../util/UndoManager'; +import { undoBatch, UndoManager } from '../../util/UndoManager'; import { TextField } from '../../../fields/TextField'; import { Document } from '../../../fields/Document'; +import { RouteStore } from '../../../server/RouteStore'; +import { ServerUtils } from '../../../server/ServerUtil'; +import { CollectionSubView } from '../collections/CollectionSubView'; @observer export class ImageBox extends React.Component<FieldViewProps> { @@ -43,7 +46,7 @@ export class ImageBox extends React.Component<FieldViewProps> { onLoad = (target: any) => { var h = this._imgRef.current!.naturalHeight; var w = this._imgRef.current!.naturalWidth; - this.props.Document.SetNumber(KeyStore.NativeHeight, this.props.Document.GetNumber(KeyStore.NativeWidth, 0) * h / w); + if (this._photoIndex == 0) this.props.Document.SetNumber(KeyStore.NativeHeight, this.props.Document.GetNumber(KeyStore.NativeWidth, 0) * h / w); } componentDidMount() { @@ -61,6 +64,12 @@ export class ImageBox extends React.Component<FieldViewProps> { componentWillUnmount() { } + onDrop = (e: React.DragEvent) => { + e.stopPropagation(); + e.preventDefault(); + console.log("IMPLEMENT ME PLEASE") + } + @undoBatch drop = (e: Event, de: DragManager.DropEvent) => { @@ -139,6 +148,22 @@ export class ImageBox extends React.Component<FieldViewProps> { } } + @action + onDotDown(index: number) { + this._photoIndex = index; + } + + dots(paths: string[]) { + let nativeWidth = this.props.Document.GetNumber(KeyStore.NativeWidth, 1); + let dist = Math.min(nativeWidth / paths.length, 40); + let left = (nativeWidth - paths.length * dist) / 2; + return paths.map((p, i) => + <div className="imageBox-placer" > + <div className="imageBox-dot" style={{ transform: `translate(${i * dist + left}px, 0px)` }} key={`i`} onPointerDown={(e: React.PointerEvent) => { e.stopPropagation(); this.onDotDown(i); }} /> + </div> + ) + } + render() { let field = this.props.Document.Get(this.props.fieldKey); let paths: string[] = ["http://www.cs.brown.edu/~bcz/face.gif"]; @@ -147,8 +172,9 @@ export class ImageBox extends React.Component<FieldViewProps> { else if (field instanceof ListField) paths = field.Data.filter(val => val as ImageField).map(p => (p as ImageField).Data.href); let nativeWidth = this.props.Document.GetNumber(KeyStore.NativeWidth, 1); return ( - <div className="imageBox-cont" onPointerDown={this.onPointerDown} ref={this.createDropTarget} onContextMenu={this.specificContextMenu}> - <img src={paths[0]} width={nativeWidth} alt="Image not found" ref={this._imgRef} onLoad={this.onLoad} /> + <div className="imageBox-cont" onPointerDown={this.onPointerDown} onDrop={this.onDrop} ref={this.createDropTarget} onContextMenu={this.specificContextMenu}> + <img src={paths[Math.min(paths.length, this._photoIndex)]} style={{ objectFit: (this._photoIndex == 0 ? undefined : "contain") }} width={nativeWidth} alt="Image not found" ref={this._imgRef} onLoad={this.onLoad} /> + {this.dots(paths)} {this.lightbox(paths)} </div>); } |