From 9f8653ab3d7f82a5d82b925bf339bef8d6723f5c Mon Sep 17 00:00:00 2001
From: bob <bcz@cs.brown.edu>
Date: Mon, 11 Feb 2019 17:37:03 -0500
Subject: added framework for annotation overlays -- see ImageBox

---
 .../views/nodes/CollectionFreeFormDocumentView.tsx   |  3 ++-
 src/client/views/nodes/DocumentView.tsx              | 20 +++++++++++++++++---
 src/client/views/nodes/ImageBox.scss                 |  1 +
 src/client/views/nodes/ImageBox.tsx                  | 10 +++++++---
 4 files changed, 27 insertions(+), 7 deletions(-)

(limited to 'src/client/views/nodes')

diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 1d53cedc4..a183db828 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -48,7 +48,7 @@ export class CollectionFreeFormDocumentView extends DocumentView {
 
     @computed
     get transform(): string {
-        return `translate(${this.x}px, ${this.y}px)`;
+        return `scale(${this.props.Scaling}, ${this.props.Scaling}) translate(${this.x}px, ${this.y}px)`;
     }
 
     @computed
@@ -207,6 +207,7 @@ export class CollectionFreeFormDocumentView extends DocumentView {
         var freestyling = this.props.ContainingCollectionView instanceof CollectionFreeFormView;
         return (
             <div className="node" ref={this._mainCont} style={{
+                transformOrigin: "left top",
                 transform: freestyling ? this.transform : "",
                 width: freestyling ? this.width : "100%",
                 height: freestyling ? this.height : "100%",
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 730ce62f2..bba5becc3 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -21,6 +21,7 @@ export interface DocumentViewProps {
     Document: Document;
     DocumentView: Opt<DocumentView>  // needed only to set ContainingDocumentView on CollectionViewProps when invoked from JsxParser -- is there a better way?
     ContainingCollectionView: Opt<CollectionViewBase>;
+    Scaling: number;
 }
 @observer
 export class DocumentView extends React.Component<DocumentViewProps> {
@@ -34,6 +35,11 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         return this.props.Document.GetData(KeyStore.Layout, TextField, String("<p>Error loading layout data</p>"));
     }
 
+    @computed
+    get annotatedlayout(): string {
+        return this.props.Document.GetData(KeyStore.AnnotatedLayout, TextField, String("<p>Error loading layout data</p>"));
+    }
+
     @computed
     get layoutKeys(): Key[] {
         return this.props.Document.GetData(KeyStore.LayoutKeys, ListField, new Array<Key>());
@@ -51,7 +57,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
     public get ScalingToScreenSpace(): number {
         if (this.props.ContainingCollectionView != undefined &&
             this.props.ContainingCollectionView.props.ContainingDocumentView != undefined) {
-            let ss = this.props.ContainingCollectionView.props.DocumentForCollection.GetData(KeyStore.Scale, NumberField, Number(1));
+            let ss = this.props.ContainingCollectionView.props.DocumentForCollection.GetNumber(KeyStore.Scale, 1);
             return this.props.ContainingCollectionView.props.ContainingDocumentView.ScalingToScreenSpace * ss;
         }
         return 1;
@@ -81,7 +87,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
             Yy = ry - COLLECTION_BORDER_WIDTH;
         }
 
-        let Ss = this.props.Document.GetData(KeyStore.Scale, NumberField, Number(1));
+        let Ss = this.props.Document.GetNumber(KeyStore.Scale, 1);
         let Panxx = this.props.Document.GetData(KeyStore.PanX, NumberField, Number(0));
         let Panyy = this.props.Document.GetData(KeyStore.PanY, NumberField, Number(0));
         let LocalX = (ContainerX - (Xx + Panxx)) / Ss;
@@ -115,7 +121,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         // first transform the local point into the parent collection's coordinate space.
         let containingDocView = this.props.ContainingCollectionView != undefined ? this.props.ContainingCollectionView.props.ContainingDocumentView : undefined;
         if (containingDocView != undefined) {
-            let ss = containingDocView.props.Document.GetData(KeyStore.Scale, NumberField, Number(1));
+            let ss = containingDocView.props.Document.GetNumber(KeyStore.Scale, 1) * this.props.Scaling;
             let panxx = containingDocView.props.Document.GetData(KeyStore.PanX, NumberField, Number(0)) + COLLECTION_BORDER_WIDTH * ss;
             let panyy = containingDocView.props.Document.GetData(KeyStore.PanY, NumberField, Number(0)) + COLLECTION_BORDER_WIDTH * ss;
             let { ScreenX, ScreenY } = containingDocView.TransformToScreenPoint(parentX, parentY, ss, panxx, panyy);
@@ -138,6 +144,14 @@ export class DocumentView extends React.Component<DocumentViewProps> {
         if (bindings.DocumentView === undefined) {
             bindings.DocumentView = this; // set the DocumentView to this if it hasn't already been set by a sub-class during its render method.
         }
+        var annotated = <JsxParser
+            components={{ FormattedTextBox: FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView }}
+            bindings={bindings}
+            jsx={this.annotatedlayout}
+            showWarnings={true}
+            onError={(test: any) => { console.log(test) }}
+        />;
+        bindings["BackgroundView"] = this.annotatedlayout ? annotated : null;
         return (
             <div className="node" ref={this._mainCont} style={{ width: "100%", height: "100%", }}>
                 <JsxParser
diff --git a/src/client/views/nodes/ImageBox.scss b/src/client/views/nodes/ImageBox.scss
index 136fda1d0..83392311b 100644
--- a/src/client/views/nodes/ImageBox.scss
+++ b/src/client/views/nodes/ImageBox.scss
@@ -1,6 +1,7 @@
 
 .imageBox-cont {
     padding: 0vw;
+    position: absolute
 }
 
 .imageBox-button {
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index ab20f140c..b96e717ed 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -9,7 +9,8 @@ import { FieldViewProps, FieldView } from './FieldView';
 import { CollectionFreeFormDocumentView } from './CollectionFreeFormDocumentView';
 import { FieldWaiting } from '../../../fields/Field';
 import { observer } from "mobx-react"
-import { observable, action } from 'mobx';
+import { observable, action, spy } from 'mobx';
+import { KeyStore } from '../../../fields/Key';
 
 @observer
 export class ImageBox extends React.Component<FieldViewProps> {
@@ -67,7 +68,9 @@ export class ImageBox extends React.Component<FieldViewProps> {
                 mainSrc={images[this._photoIndex]}
                 nextSrc={images[(this._photoIndex + 1) % images.length]}
                 prevSrc={images[(this._photoIndex + images.length - 1) % images.length]}
-                onCloseRequest={() => this.setState({ isOpen: false })}
+                onCloseRequest={action(() =>
+                    this._isOpen = false
+                )}
                 onMovePrevRequest={action(() =>
                     this._photoIndex = (this._photoIndex + images.length - 1) % images.length
                 )}
@@ -82,10 +85,11 @@ export class ImageBox extends React.Component<FieldViewProps> {
         let field = this.props.doc.Get(this.props.fieldKey);
         let path = field == FieldWaiting ? "https://image.flaticon.com/icons/svg/66/66163.svg" :
             field instanceof ImageField ? field.Data.href : "http://www.cs.brown.edu/~bcz/face.gif";
+        let width = this.props.doc.GetNumber(KeyStore.Width, 1);
 
         return (
             <div className="imageBox-cont" onPointerDown={this.onPointerDown} ref={this._ref} >
-                <img src={path} width="100%" alt="Image not found" />
+                <img src={path} width={width} alt="Image not found" />
                 {this.lightbox(path)}
             </div>)
     }
-- 
cgit v1.2.3-70-g09d2