fixed label box overflow. fixed linking to items in a stacking panel.

6 files changed, 53 insertions, 18 deletions

diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index b6faea845..4cc2e1a5f 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -12,7 +12,7 @@ import { listSpec, makeInterface } from "../../../new_fields/Schema";
 import { SchemaHeaderField } from "../../../new_fields/SchemaHeaderField";
 import { BoolCast, Cast, NumCast, ScriptCast, StrCast } from "../../../new_fields/Types";
 import { TraceMobx } from "../../../new_fields/util";
-import { emptyFunction, returnFalse, returnOne, returnZero, setupMoveUpEvents, Utils } from "../../../Utils";
+import { emptyFunction, returnFalse, returnOne, returnZero, setupMoveUpEvents, Utils, smoothScroll } from "../../../Utils";
 import { DragManager, dropActionType } from "../../util/DragManager";
 import { Transform } from "../../util/Transform";
 import { undoBatch } from "../../util/UndoManager";
@@ -165,6 +165,24 @@ export class CollectionStackingView extends CollectionSubView(StackingDocument)
         return this.props.addDocTab(doc, where);
     }
 
+
+    focusDocument = (doc: Doc, willZoom: boolean, scale?: number, afterFocus?: () => boolean) => {
+        Doc.BrushDoc(this.props.Document);
+        this.props.focus(this.props.Document);
+        Doc.linkFollowHighlight(doc);
+
+        const found = this._mainCont && Array.from(this._mainCont.getElementsByClassName("documentView-node")).find((node: any) => node.id === doc[Id]);
+        if (found) {
+            const top = found.getBoundingClientRect().top;
+            const localTop = this.props.ScreenToLocalTransform().transformPoint(0, top);
+            smoothScroll(500, this._mainCont!, localTop[1] + this._mainCont!.scrollTop);
+        }
+        afterFocus && setTimeout(() => {
+            if (afterFocus?.()) {
+            }
+        }, 500);
+    }
+
     getDisplayDoc(doc: Doc, dataDoc: Doc | undefined, dxf: () => Transform, width: () => number) {
         const layoutDoc = Doc.Layout(doc, this.props.ChildLayoutTemplate?.());
         const height = () => this.getDocHeight(doc);
@@ -187,7 +205,7 @@ export class CollectionStackingView extends CollectionSubView(StackingDocument)
             onClick={this.onChildClickHandler}
             onDoubleClick={this.onChildDoubleClickHandler}
             ScreenToLocalTransform={dxf}
-            focus={this.props.focus}
+            focus={this.focusDocument}
             ContainingCollectionDoc={this.props.CollectionView?.props.Document}
             ContainingCollectionView={this.props.CollectionView}
             addDocument={this.props.addDocument}
diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx
index b4ca29b19..8c78e568c 100644
--- a/src/client/views/collections/CollectionSubView.tsx
+++ b/src/client/views/collections/CollectionSubView.tsx
@@ -231,7 +231,21 @@ export function CollectionSubView<T, X>(schemaCtor: (doc: Doc) => T, moreProps?:
             }
             return false;
         }
+        readUploadedFileAsText = (inputFile: File) => {
+            const temporaryFileReader = new FileReader();
 
+            return new Promise((resolve, reject) => {
+                temporaryFileReader.onerror = () => {
+                    temporaryFileReader.abort();
+                    reject(new DOMException("Problem parsing input file."));
+                };
+
+                temporaryFileReader.onload = () => {
+                    resolve(temporaryFileReader.result);
+                };
+                temporaryFileReader.readAsText(inputFile);
+            });
+        };
         @undoBatch
         @action
         protected async onExternalDrop(e: React.DragEvent, options: DocumentOptions, completed?: () => void) {
@@ -369,7 +383,16 @@ export function CollectionSubView<T, X>(schemaCtor: (doc: Doc) => T, moreProps?:
                 }
                 if (item.kind === "file") {
                     const file = item.getAsFile();
-                    file && file.type && files.push(file);
+                    file?.type && files.push(file);
+
+                    file?.type === "application/json" && this.readUploadedFileAsText(file).then(result => {
+                        console.log(result);
+                        const json = JSON.parse(result as string) as any;
+                        addDocument(Docs.Create.TreeDocument(
+                            json["rectangular-puzzle"].crossword.clues[0].clue.map((c: any) =>
+                                Docs.Create.LabelDocument({ title: c["#text"], _width: 120, _height: 20 })
+                            ), { _width: 150, _height: 600, title: "across", backgroundColor: "white", _singleLine: true }));
+                    });
                 }
             }
             for (const { source: { name, type }, result } of await Networking.UploadFilesToServer(files)) {
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
index 5e5ad7db5..1208fb324 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinksView.tsx
@@ -31,7 +31,7 @@ export class CollectionFreeFormLinksView extends React.Component {
         }, [] as { a: DocumentView, b: DocumentView, l: Doc[] }[]);
         return connections.filter(c =>
             c.a.props.Document.type === DocumentType.LINK &&
-            c.a.props.bringToFront !== emptyFunction && c.b.props.bringToFront !== emptyFunction // bcz: this prevents links to be drawn to anchors in CollectionTree views -- this is a hack that should be fixed
+            c.a.props.pinToPres !== emptyFunction && c.b.props.pinToPres !== emptyFunction // bcz: this prevents links to be drawn to anchors in CollectionTree views -- this is a hack that should be fixed
         ).map(c => <CollectionFreeFormLinkView key={Utils.GenerateGuid()} A={c.a} B={c.b} LinkDocs={c.l} />);
     }
 
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 2d5d7d231..1724d39cc 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -1143,7 +1143,9 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         const highlightStyles = ["solid", "dashed", "solid", "solid", "solid", "solid", "solid"];
         let highlighting = fullDegree && this.layoutDoc.type !== DocumentType.FONTICON && this.layoutDoc._viewType !== CollectionViewType.Linear;
         highlighting = highlighting && this.props.focus !== emptyFunction;  // bcz: hack to turn off highlighting onsidebar panel documents.  need to flag a document as not highlightable in a more direct way
-        return <div className={`documentView-node${this.topMost ? "-topmost" : ""}`} ref={this._mainCont} onKeyDown={this.onKeyDown}
+        return <div className={`documentView-node${this.topMost ? "-topmost" : ""}`} 
+            id={this.props.Document[Id]}
+            ref={this._mainCont} onKeyDown={this.onKeyDown}
             onContextMenu={this.onContextMenu} onPointerDown={this.onPointerDown} onClick={this.onClick}
             // onPointerEnter={e => Doc.BrushDoc(this.props.Document)} 
             // onPointerLeave={e => Doc.BrushDoc(this.props.Document)}
diff --git a/src/client/views/nodes/LabelBox.scss b/src/client/views/nodes/LabelBox.scss
index 7c7e92379..5be23d2c2 100644
--- a/src/client/views/nodes/LabelBox.scss
+++ b/src/client/views/nodes/LabelBox.scss
@@ -8,19 +8,14 @@
 
 .labelBox-mainButton {
     width: 100%;
-    height: 100%;
+    height: max-content;
     border-radius: inherit;
     letter-spacing: 2px;
     text-transform: uppercase;
     overflow: hidden;
-    display:flex;
-}
-
-.labelBox-mainButtonCenter {
-    overflow: hidden;
-    display: inline;
-    align-items: center;
+    display: inline-block;
     margin: auto;
+    text-overflow: ellipsis;
 }
 
 .labelBox-params {
diff --git a/src/client/views/nodes/LabelBox.tsx b/src/client/views/nodes/LabelBox.tsx
index 3cdec8acb..ac27640bd 100644
--- a/src/client/views/nodes/LabelBox.tsx
+++ b/src/client/views/nodes/LabelBox.tsx
@@ -80,12 +80,9 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps, LabelDocument
                     paddingRight: NumCast(this.layoutDoc._xPadding),
                     paddingTop: NumCast(this.layoutDoc._yPadding),
                     paddingBottom: NumCast(this.layoutDoc._yPadding),
-                    textOverflow: this.layoutDoc._singleLine ? "ellipsis" : undefined,
-                    whiteSpace: this.layoutDoc._singleLine ? "nowrap" : "pre-wrap"
+                    whiteSpace: this.layoutDoc._singleLine ? "pre" : "pre-wrap"
                 }} >
-                    <div className="labelBox-mainButtonCenter">
-                        {StrCast(this.rootDoc.text, StrCast(this.rootDoc.title))}
-                    </div>
+                    {StrCast(this.rootDoc.text, StrCast(this.rootDoc.title))}
                 </div>
                 <div className="labelBox-fieldKeyParams" >
                     {!missingParams?.length ? (null) : missingParams.map(m => <div key={m} className="labelBox-missingParam">{m}</div>)}