From cdcfa6efa54a79b304cdcb2ffb084451116aeaac Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Sat, 23 Feb 2019 10:12:39 -0500
Subject: added an overlay layer to collections... but it blocks events.  not
 sure how to fix.

---
 .../views/collections/CollectionFreeFormView.tsx   | 24 ++++++++++++++++++++++
 1 file changed, 24 insertions(+)

(limited to 'src/client/views/collections/CollectionFreeFormView.tsx')

diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index 4799eda97..ee0f3730d 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -161,6 +161,12 @@ export class CollectionFreeFormView extends CollectionViewBase {
             return field.Data;
         }
     }
+    @computed get overlayLayout(): string | undefined {
+        let field = this.props.Document.GetT(KeyStore.OverlayLayout, TextField);
+        if (field && field !== "<Waiting>") {
+            return field.Data;
+        }
+    }
     @computed
     get views() {
         const { fieldKey, Document } = this.props;
@@ -192,6 +198,17 @@ export class CollectionFreeFormView extends CollectionViewBase {
                 onError={(test: any) => console.log(test)}
             />);
     }
+    @computed
+    get overlayView() {
+        return !this.overlayLayout ? (null) :
+            (<JsxParser
+                components={{ FormattedTextBox, ImageBox, CollectionFreeFormView, CollectionDockingView, CollectionSchemaView, CollectionView }}
+                bindings={this.props.bindings}
+                jsx={this.overlayLayout}
+                showWarnings={true}
+                onError={(test: any) => console.log(test)}
+            />);
+    }
     getTransform = (): Transform => this.props.ScreenToLocalTransform().translate(-COLLECTION_BORDER_WIDTH, -COLLECTION_BORDER_WIDTH).transform(this.getLocalTransform())
     getLocalTransform = (): Transform => Transform.Identity.translate(-this.panX, -this.panY).scale(1 / this.scale);
     noScaling = () => 1;
@@ -199,6 +216,12 @@ export class CollectionFreeFormView extends CollectionViewBase {
     render() {
         const panx: number = this.props.Document.GetNumber(KeyStore.PanX, 0);
         const pany: number = this.props.Document.GetNumber(KeyStore.PanY, 0);
+        var overlay = this.overlayView ?
+            <div style={{ position: "absolute", width: "100%", height: "100%" }}>
+                {this.overlayView}
+            </div>
+            :
+            (null);
         return (
             <div className="collectionfreeformview-container"
                 onPointerDown={this.onPointerDown}
@@ -214,6 +237,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
                     {this.backgroundView}
                     {this.views}
                 </div>
+                {overlay}
             </div>
         );
     }
-- 
cgit v1.2.3-70-g09d2


From d9d55e422826da1fe87aa7973c92e54bc0c99f02 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Sat, 23 Feb 2019 11:38:15 -0500
Subject: working overlays

---
 src/client/documents/Documents.ts                        | 14 +++++++-------
 src/client/views/collections/CollectionFreeFormView.scss |  9 +++++++++
 src/client/views/collections/CollectionFreeFormView.tsx  |  6 +++---
 src/client/views/nodes/FormattedTextBox.scss             |  2 +-
 4 files changed, 20 insertions(+), 11 deletions(-)

(limited to 'src/client/views/collections/CollectionFreeFormView.tsx')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 72efb45f5..4c5f26fbd 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -127,18 +127,18 @@ export namespace Documents {
     }
 
     // example of custom display string for an image that shows a caption.
-    function CaptionLayoutString() {
+    function EmbeddedCaption() {
         return `<div style="position:absolute; height:100%">
             <div style="position:relative; margin:auto; width:85%; margin:auto" >`
             + ImageBox.LayoutString() +
             `</div>
-            <div style="position:relative; min-height:15%; overflow:scroll; max-height:15%; text-align:center; ">`
+            <div style="position:relative; overflow:auto; height:15%; text-align:center; ">`
             + FormattedTextBox.LayoutString("CaptionKey") +
             `</div> 
         </div>` };
-    function OverlayLayoutString() {
-        return `<div style="position:absolute; height:100%; width:100%">
-            <div style="position:absolute; max-height:10%;  width:100%; min-height:10%; overflow:scroll;text-align:center;bottom:0;">`
+    function FixedCaption() {
+        return `<div style="position:absolute; height:30px; bottom:0; width:100%">
+            <div style="position:absolute; width:100%; height:100%; overflow:auto;text-align:center;bottom:0;">`
             + FormattedTextBox.LayoutString("CaptionKey") +
             `</div> 
         </div>` };
@@ -148,8 +148,8 @@ export namespace Documents {
         setupOptions(doc, options);
         doc.Set(KeyStore.Data, new ImageField(new URL(url)));
         doc.Set(KeyStore.Caption, new TextField("my caption..."));
-        doc.Set(KeyStore.BackgroundLayout, new TextField(CaptionLayoutString()));
-        //doc.Set(KeyStore.OverlayLayout, new TextField(OverlayLayoutString()));
+        doc.Set(KeyStore.BackgroundLayout, new TextField(EmbeddedCaption()));
+        doc.Set(KeyStore.OverlayLayout, new TextField(FixedCaption()));
         doc.Set(KeyStore.LayoutKeys, new ListField([KeyStore.Data, KeyStore.Annotations, KeyStore.Caption]));
 
         let annotation = Documents.TextDocument({ title: "hello" });
diff --git a/src/client/views/collections/CollectionFreeFormView.scss b/src/client/views/collections/CollectionFreeFormView.scss
index 6d678528a..e682b9815 100644
--- a/src/client/views/collections/CollectionFreeFormView.scss
+++ b/src/client/views/collections/CollectionFreeFormView.scss
@@ -1,4 +1,13 @@
 .collectionfreeformview-container {
+
+    ::-webkit-scrollbar {
+        -webkit-appearance: none;
+        width: 10px;
+    }
+    ::-webkit-scrollbar-thumb {
+        border-radius: 5px;
+        background-color: rgba(0,0,0,.5);
+    }
     border-style: solid;
     box-sizing: border-box;
     position: relative;
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index 85f7d5677..cb6668634 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -120,8 +120,8 @@ export class CollectionFreeFormView extends CollectionViewBase {
     private SetPan(panX: number, panY: number) {
         const newPanX = Math.max((1 - this.zoomScaling) * this.nativeWidth, Math.min(0, panX));
         const newPanY = Math.max((1 - this.zoomScaling) * this.nativeHeight, Math.min(0, panY));
-        this.props.Document.SetNumber(KeyStore.PanX, this.isAnnotationOverlay ? newPanX : panX);
-        this.props.Document.SetNumber(KeyStore.PanY, this.isAnnotationOverlay ? newPanY : panY);
+        this.props.Document.SetNumber(KeyStore.PanX, false && this.isAnnotationOverlay ? newPanX : panX);
+        this.props.Document.SetNumber(KeyStore.PanY, false && this.isAnnotationOverlay ? newPanY : panY);
     }
 
     @action
@@ -238,7 +238,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
                     {this.backgroundView}
                     {this.views}
                 </div>
-                {overlay}
+                {this.overlayView}
             </div>
         );
     }
diff --git a/src/client/views/nodes/FormattedTextBox.scss b/src/client/views/nodes/FormattedTextBox.scss
index 872a2138b..226456fab 100644
--- a/src/client/views/nodes/FormattedTextBox.scss
+++ b/src/client/views/nodes/FormattedTextBox.scss
@@ -10,5 +10,5 @@
 
 .formattedTextBox-cont {
     background: beige;
-    padding: 1vw;
+    padding: 0;
 }
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From e57c8ed3944bf737afdb2f564d159a53f8a6b1c6 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Mon, 25 Feb 2019 01:56:29 -0500
Subject: more css cleanup

---
 src/client/documents/Documents.ts                  |  4 +-
 src/client/views/EditableView.tsx                  |  2 +-
 .../views/collections/CollectionDockingView.tsx    |  2 +-
 .../views/collections/CollectionFreeFormView.scss  |  6 ++
 .../views/collections/CollectionFreeFormView.tsx   |  6 --
 .../views/collections/CollectionSchemaView.scss    | 73 ++++++++++------------
 .../views/collections/CollectionSchemaView.tsx     |  7 ++-
 .../views/nodes/CollectionFreeFormDocumentView.tsx |  2 +-
 src/client/views/nodes/FormattedTextBox.scss       |  4 ++
 src/client/views/nodes/FormattedTextBox.tsx        |  6 +-
 src/client/views/nodes/ImageBox.scss               |  6 +-
 11 files changed, 58 insertions(+), 60 deletions(-)

(limited to 'src/client/views/collections/CollectionFreeFormView.tsx')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 4c5f26fbd..2dfff6235 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -128,8 +128,8 @@ export namespace Documents {
 
     // example of custom display string for an image that shows a caption.
     function EmbeddedCaption() {
-        return `<div style="position:absolute; height:100%">
-            <div style="position:relative; margin:auto; width:85%; margin:auto" >`
+        return `<div style="height:100%">
+            <div style="position:relative; margin:auto; height:85%;" >`
             + ImageBox.LayoutString() +
             `</div>
             <div style="position:relative; overflow:auto; height:15%; text-align:center; ">`
diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index 3d1c2ebf4..8d9a47eaa 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -30,7 +30,7 @@ export class EditableView extends React.Component<EditableProps> {
                 style={{ width: "100%" }}></input>
         } else {
             return (
-                <div style={{ alignItems: "center", display: "flex", height: "100%", maxHeight: `${this.props.height}` }}
+                <div className="editableView-container-editing" style={{ display: "flex", height: "100%", maxHeight: `${this.props.height}` }}
                     onClick={action(() => this.editing = true)}
                 >
                     {this.props.contents}
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 86dc66e39..2230ec14f 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -285,7 +285,7 @@ export class DockedFrameRenderer extends React.Component<DockedFrameProps> {
         if (!this._document)
             return (null);
         var content =
-            <div ref={this._mainCont}>
+            <div className="collectionDockingView-content" ref={this._mainCont}>
                 <DocumentView key={this._document.Id} Document={this._document}
                     AddDocument={undefined}
                     RemoveDocument={undefined}
diff --git a/src/client/views/collections/CollectionFreeFormView.scss b/src/client/views/collections/CollectionFreeFormView.scss
index e682b9815..d583a8218 100644
--- a/src/client/views/collections/CollectionFreeFormView.scss
+++ b/src/client/views/collections/CollectionFreeFormView.scss
@@ -8,6 +8,12 @@
         border-radius: 5px;
         background-color: rgba(0,0,0,.5);
     }
+    
+    .collectionfreeformview > .jsx-parser{
+        position:absolute;
+        height: 100%;
+    }
+        
     border-style: solid;
     box-sizing: border-box;
     position: relative;
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index cb6668634..c40da6eaa 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -217,12 +217,6 @@ export class CollectionFreeFormView extends CollectionViewBase {
     render() {
         const panx: number = this.props.Document.GetNumber(KeyStore.PanX, 0);
         const pany: number = this.props.Document.GetNumber(KeyStore.PanY, 0);
-        var overlay = this.overlayView ?
-            <div style={{ position: "absolute", width: "100%", height: "100%" }}>
-                {this.overlayView}
-            </div>
-            :
-            (null);
         return (
             <div className="collectionfreeformview-container"
                 onPointerDown={this.onPointerDown}
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index ba9afee62..3bf84f3cd 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -14,16 +14,6 @@
         background-color: rgba(0,0,0,.5);
     }
 
-    .collectionfreeformview-container {
-        border-width: 0px;
-        .collectionfreeformview > .jsx-parser{
-            position:absolute
-        }
-    }
-    .imageBox-cont {
-        position:relative;
-        max-height:100%;
-    }
     .ReactTable {
         position: absolute;
        // display: inline-block;
@@ -32,23 +22,40 @@
         height: 100%;
         background: white;
         box-sizing: border-box;
-    }
-    .ReactTable .rt-table {
-        overflow-y: auto;
-        overflow-x: auto;
-        height: 100%;
+        .rt-table {
+            overflow-y: auto;
+            overflow-x: auto;
+            height: 100%;
 
-        display: -webkit-inline-box;
-        direction: ltr;
-        // direction:rtl;
-        // display:block;
-    }
-    .ReactTable .rt-tbody {
-        //direction: ltr;
-        direction: rtl;
-    }
-    .ReactTable .rt-tr-group {
-        direction: ltr;
+            display: -webkit-inline-box;
+            direction: ltr;
+            // direction:rtl;
+            // display:block;
+        }
+        .rt-tbody {
+            //direction: ltr;
+            direction: rtl;
+        }
+        .rt-tr-group {
+            direction: ltr;
+        }
+        .rt-td {
+            border-width: 1;
+            border-right-color: #aaa;
+            .imageBox-cont {
+                position:relative;
+                max-height:100%;
+            }
+            .imageBox-cont img {
+                object-fit: contain;
+                max-width: 100%;
+                height: 100%
+            }
+        }
+        .rt-tr-group {
+            border-width: 1;
+            border-bottom-color: #aaa
+        }
     }
     .ReactTable .rt-thead.-header {
             background:grey;
@@ -61,24 +68,10 @@
         border-bottom-style: solid;
         border-bottom-width: 1;
     }
-    .ReactTable .rt-td {
-        border-width: 1;
-        border-right-color: #aaa
-    }
-    .ReactTable .rt-tr-group {
-        border-width: 1;
-        border-bottom-color: #aaa
-    }
-    .imageBox-cont img {
-        object-fit: contain;
-        height: 100%
-    }
     .documentView-node:first-child {
         background: grey;
         .imageBox-cont img {
             object-fit: contain;
-            max-width: 100%;
-            height: 100%
         }
     }
 }
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index d2db93120..dc952ef82 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -16,6 +16,8 @@ import "./CollectionSchemaView.scss";
 import { COLLECTION_BORDER_WIDTH } from "./CollectionView";
 import { CollectionViewBase } from "./CollectionViewBase";
 
+// bcz: need to add drag and drop of rows and columns.  This seems like it might work for rows: https://codesandbox.io/s/l94mn1q657
+
 @observer
 export class CollectionSchemaView extends CollectionViewBase {
     private _mainCont = React.createRef<HTMLDivElement>();
@@ -140,7 +142,7 @@ export class CollectionSchemaView extends CollectionViewBase {
         let content = this._selectedIndex == -1 || !selected ? (null) : (
             <Measure onResize={this.setScaling}>
                 {({ measureRef }) =>
-                    <div ref={measureRef}>
+                    <div className="collectionSchemaView-content" ref={measureRef}>
                         <DocumentView Document={selected}
                             AddDocument={this.props.addDocument} RemoveDocument={this.props.removeDocument}
                             isTopMost={false}
@@ -173,7 +175,8 @@ export class CollectionSchemaView extends CollectionViewBase {
                                 }))}
                                 column={{
                                     ...ReactTableDefaults.column,
-                                    Cell: this.renderCell
+                                    Cell: this.renderCell,
+
                                 }}
                                 getTrProps={this.getTrProps}
                             />
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 17123bf52..d7243421a 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -88,7 +88,7 @@ export class CollectionFreeFormDocumentView extends React.Component<DocumentView
 
     render() {
         return (
-            <div ref={this._mainCont} style={{
+            <div className="collectionFreeFormDocumentView-container" ref={this._mainCont} style={{
                 transformOrigin: "left top",
                 transform: this.transform,
                 width: this.width,
diff --git a/src/client/views/nodes/FormattedTextBox.scss b/src/client/views/nodes/FormattedTextBox.scss
index 226456fab..0389a3f85 100644
--- a/src/client/views/nodes/FormattedTextBox.scss
+++ b/src/client/views/nodes/FormattedTextBox.scss
@@ -11,4 +11,8 @@
 .formattedTextBox-cont {
     background: beige;
     padding: 0;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    color: initial;
+    height: 100%;
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index c0969a8c3..60ee0b5e1 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -112,12 +112,8 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
         }
     }
     render() {
+        var val = this.props.doc.Get(this.props.fieldKey);
         return (<div className="formattedTextBox-cont"
-            style={{
-                color: "initial",
-                whiteSpace: "initial",
-                height: "auto"
-            }}
             onPointerDown={this.onPointerDown}
             ref={this._ref} />)
     }
diff --git a/src/client/views/nodes/ImageBox.scss b/src/client/views/nodes/ImageBox.scss
index 5b15b3329..ea459b911 100644
--- a/src/client/views/nodes/ImageBox.scss
+++ b/src/client/views/nodes/ImageBox.scss
@@ -4,12 +4,14 @@
     position: relative;
     text-align: center;
     width: 100%;
+    height: auto;
     max-width: 100%;
     max-height: 100%
 }
+
 .imageBox-cont img {
-    max-width: 100%;
-    max-height: 100%
+    object-fit: contain;
+    height: 100%;
 }
 
 .imageBox-button {
-- 
cgit v1.2.3-70-g09d2

