From caecf2452c4af5caf8b298719d53274b6709c194 Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Tue, 16 Apr 2019 15:00:14 -0400
Subject: removed traces()played with image box stacking.

---
 .../collectionFreeForm/CollectionFreeFormView.tsx  |  2 --
 .../views/nodes/CollectionFreeFormDocumentView.tsx |  1 -
 src/client/views/nodes/ImageBox.scss               | 12 +++++++-
 src/client/views/nodes/ImageBox.tsx                | 34 +++++++++++++++++++---
 4 files changed, 41 insertions(+), 8 deletions(-)

(limited to 'src')

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>);
     }
-- 
cgit v1.2.3-70-g09d2