From fafd62df0a918a14ecc90d99236e5a87918646e1 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Fri, 11 Dec 2020 14:43:51 -0500
Subject: got rid of ChromeHeight and replaced with HeaderMargin in style
 provider.  made text headers not overlap the tet itself.

---
 src/client/views/nodes/DocumentView.tsx            | 93 +++++++++++-----------
 src/client/views/nodes/LinkBox.tsx                 |  1 -
 .../views/nodes/formattedText/FormattedTextBox.tsx |  9 ++-
 3 files changed, 52 insertions(+), 51 deletions(-)

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

diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 8a7c406d5..017c3cdea 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -48,41 +48,39 @@ export type DocAfterFocusFunc = (notFocused: boolean) => boolean;
 export type DocFocusFunc = (doc: Doc, willZoom?: boolean, scale?: number, afterFocus?: DocAfterFocusFunc, dontCenter?: boolean, focused?: boolean) => void;
 export type StyleProviderFunc = (doc: Opt<Doc>, props: Opt<DocumentViewProps>, property: string) => any;
 export interface DocumentViewSharedProps {
+    renderDepth: number;
+    Document: Doc;
+    DataDoc?: Doc;
     ContainingCollectionView: Opt<CollectionView>;
     ContainingCollectionDoc: Opt<Doc>;
     CollectionFreeFormDocumentView?: () => CollectionFreeFormDocumentView;
-    Document: Doc;
-    DataDoc?: Doc;
-    contentsActive?: (setActive: () => boolean) => void;
-    onClick?: () => ScriptField;
-    dropAction?: dropActionType;
-    backgroundHalo?: (doc: Doc) => boolean;
+    PanelWidth: () => number;
+    PanelHeight: () => number;
+    NativeWidth?: () => number;
+    NativeHeight?: () => number;
+    ContentScaling: () => number;
+    layerProvider?: (doc: Doc, assign?: boolean) => boolean;
+    styleProvider?: StyleProviderFunc;
+    focus: DocFocusFunc;
     docFilters: () => string[];
     docRangeFilters: () => string[];
     searchFilterDocs: () => Doc[];
+    contentsActive?: (setActive: () => boolean) => void;
+    parentActive: (outsideReaction: boolean) => boolean;
+    whenActiveChanged: (isActive: boolean) => void;
     rootSelected: (outsideReaction?: boolean) => boolean; // whether the root of a template has been selected
-    renderDepth: number;
     addDocTab: (doc: Doc, where: string) => boolean;
     addDocument?: (doc: Doc | Doc[]) => boolean;
     removeDocument?: (doc: Doc | Doc[]) => boolean;
     moveDocument?: (doc: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (document: Doc | Doc[]) => boolean) => boolean;
     pinToPres: (document: Doc) => void;
-    layerProvider?: (doc: Doc, assign?: boolean) => boolean;
-    styleProvider?: StyleProviderFunc;
     ScreenToLocalTransform: () => Transform;
     bringToFront: (doc: Doc, sendToBack?: boolean) => void;
-    parentActive: (outsideReaction: boolean) => boolean;
-    whenActiveChanged: (isActive: boolean) => void;
+    onClick?: () => ScriptField;
+    dropAction?: dropActionType;
     LayoutTemplateString?: string;
     dontRegisterView?: boolean;
-    focus: DocFocusFunc;
     ignoreAutoHeight?: boolean;
-    PanelWidth: () => number;
-    PanelHeight: () => number;
-    NativeWidth?: () => number;
-    NativeHeight?: () => number;
-    ContentScaling: () => number;
-    ChromeHeight?: () => number;
     pointerEvents?: string;
     scriptContext?: any; // can be assigned anything and will be passed as 'scriptContext' to any OnClick script that executes on this document
 }
@@ -94,9 +92,8 @@ export interface DocumentViewProps extends DocumentViewSharedProps {
     fitToBox?: boolean;
     treeViewDoc?: Doc;
     dragDivName?: string;
-    contentsPointerEvents?: string;
+    contentPointerEvents?: string;
     radialMenu?: String[];
-    display?: string;
     relative?: boolean;
     LayoutTemplate?: () => Opt<Doc>;
     contextMenuItems?: () => { script: ScriptField, label: string }[];
@@ -890,11 +887,9 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
     isSelected = (outsideReaction?: boolean) => SelectionManager.IsSelected(this, outsideReaction);
     select = (ctrlPressed: boolean) => { SelectionManager.SelectDoc(this, ctrlPressed); };
 
-    @computed get showOverlappingTitle() {
-        const excluded = ["PresBox", /* "FormattedTextBox", */ "FontIconBox"]; // bcz: shifting the title for texst causes problems with collaborative use when some people see titles, and others don't
-        return !excluded.includes(StrCast(this.layoutDoc.layout));
+    @computed get headerMargin() {
+        return this.props?.styleProvider?.(this.layoutDoc, this.props, StyleProp.HeaderMargin) || 0;
     }
-    chromeHeight = () => this.showOverlappingTitle ? 0 : 25;
 
     @computed get finalLayoutKey() {
         if (typeof this.props.layoutKey === "string") {
@@ -906,52 +901,56 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
     rootSelected = (outsideReaction?: boolean) => {
         return this.isSelected(outsideReaction) || (this.props.Document.rootDocument && this.props.rootSelected?.(outsideReaction)) || false;
     }
+    panelHeight = () => this.props.PanelHeight() - this.headerMargin;
     childScaling = () => (this.layoutDoc._fitWidth ? this.props.PanelWidth() / this.nativeWidth : this.props.ContentScaling());
     @computed.struct get linkOffset() { return this.topMost ? [0, undefined, undefined, 10] : [-15, undefined, undefined, -20]; }
     @observable contentsActive: () => boolean = returnFalse;
     @action setContentsActive = (setActive: () => boolean) => this.contentsActive = setActive;
     parentActive = (outsideReaction: boolean) => this.props.layerProvider?.(this.layoutDoc) === false ? this.props.parentActive(outsideReaction) : false;
+    screenToLocal = () => this.props.ScreenToLocalTransform().translate(0, -this.headerMargin);
     @computed get contents() {
         TraceMobx();
-        return (<div className="documentView-contentsView" style={{ pointerEvents: this.props.contentsPointerEvents as any }}>
+        return (<div className="documentView-contentsView"
+            style={{
+                pointerEvents: this.props.contentPointerEvents as any,
+                height: this.headerMargin ? `calc(100% - ${this.headerMargin}px)` : undefined,
+            }}>
             <DocumentContentsView key={1}
-                docFilters={this.props.docFilters}
-                contentsActive={this.setContentsActive}
-                docRangeFilters={this.props.docRangeFilters}
-                searchFilterDocs={this.props.searchFilterDocs}
+                renderDepth={this.props.renderDepth}
+                Document={this.props.Document}
+                DataDoc={this.props.DataDoc}
                 ContainingCollectionView={this.props.ContainingCollectionView}
                 ContainingCollectionDoc={this.props.ContainingCollectionDoc}
                 NativeWidth={this.NativeWidth}
                 NativeHeight={this.NativeHeight}
-                Document={this.props.Document}
-                DataDoc={this.props.DataDoc}
+                PanelWidth={this.props.PanelWidth}
+                PanelHeight={this.props.PanelHeight}
                 layerProvider={this.props.layerProvider}
+                styleProvider={this.props.styleProvider}
                 LayoutTemplateString={this.props.LayoutTemplateString}
                 LayoutTemplate={this.props.LayoutTemplate}
+                docFilters={this.props.docFilters}
+                docRangeFilters={this.props.docRangeFilters}
+                searchFilterDocs={this.props.searchFilterDocs}
+                contentsActive={this.setContentsActive}
+                parentActive={this.parentActive}
+                whenActiveChanged={this.props.whenActiveChanged}
                 makeLink={this.makeLink}
-                rootSelected={this.rootSelected}
-                backgroundHalo={this.props.backgroundHalo}
+                focus={this.props.focus}
                 dontRegisterView={this.props.dontRegisterView}
                 fitToBox={this.props.fitToBox}
                 addDocument={this.props.addDocument}
                 removeDocument={this.props.removeDocument}
                 moveDocument={this.props.moveDocument}
-                ScreenToLocalTransform={this.props.ScreenToLocalTransform}
-                renderDepth={this.props.renderDepth}
-                PanelWidth={this.props.PanelWidth}
-                PanelHeight={this.props.PanelHeight}
-                ignoreAutoHeight={this.props.ignoreAutoHeight}
-                focus={this.props.focus}
-                parentActive={this.parentActive}
-                whenActiveChanged={this.props.whenActiveChanged}
-                bringToFront={this.props.bringToFront}
                 addDocTab={this.props.addDocTab}
                 pinToPres={this.props.pinToPres}
-                styleProvider={this.props.styleProvider}
+                ScreenToLocalTransform={this.screenToLocal}
+                ignoreAutoHeight={this.props.ignoreAutoHeight}
+                bringToFront={this.props.bringToFront}
                 ContentScaling={this.childScaling}
-                ChromeHeight={this.chromeHeight}
                 isSelected={this.isSelected}
                 select={this.select}
+                rootSelected={this.rootSelected}
                 scriptContext={this.props.scriptContext}
                 onClick={this.onClickFunc}
                 layoutKey={this.finalLayoutKey} />
@@ -1026,7 +1025,6 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
                     dontRegisterView={true}
                     LayoutTemplateString={`<FormattedTextBox {...props} fieldKey={'${showCaption}'}/>`}
                     ContentScaling={returnOne}
-                    ChromeHeight={this.chromeHeight}
                     isSelected={this.isSelected}
                     select={this.select}
                     onClick={this.onClickFunc}
@@ -1034,7 +1032,8 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
             </div>);
         const titleView = (!this.ShowTitle ? (null) :
             <div className={`documentView-titleWrapper${showTitleHover ? "-hover" : ""}`} key="title" style={{
-                position: this.showOverlappingTitle ? "absolute" : "relative",
+                position: this.headerMargin ? "relative" : "absolute",
+                height: this.headerMargin || undefined,
                 background: SharingManager.Instance.users.find(users => users.user.email === this.dataDoc.author)?.userColor || (this.rootDoc.type === DocumentType.RTF ? StrCast(Doc.SharingDoc().userColor) : "rgba(0,0,0,0.4)"),
                 pointerEvents: this.onClickHandler || this.Document.ignoreClick ? "none" : undefined,
             }}>
@@ -1051,7 +1050,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         return this.props.hideTitle || (!this.ShowTitle && !showCaption) ?
             this.contents :
             <div className="documentView-styleWrapper" >
-                {this.showOverlappingTitle ? <> {this.contents} {titleView} </> : <> {titleView} {this.contents} </>}
+                {!this.headerMargin ? <> {this.contents} {titleView} </> : <> {titleView} {this.contents} </>}
                 {captionView}
             </div>;
     }
diff --git a/src/client/views/nodes/LinkBox.tsx b/src/client/views/nodes/LinkBox.tsx
index a12a23dff..f542652d0 100644
--- a/src/client/views/nodes/LinkBox.tsx
+++ b/src/client/views/nodes/LinkBox.tsx
@@ -21,7 +21,6 @@ export class LinkBox extends ViewBoxBaseComponent<FieldViewProps, LinkDocument>(
             style={{ background: this.props.styleProvider?.(this.props.Document, this.props, StyleProp.BackgroundColor) }} >
 
             <CollectionTreeView {...this.props}
-                ChromeHeight={returnZero}
                 childDocuments={[this.dataDoc]}
                 treeViewSkipFields={Cast(this.props.Document.linkBoxExcludedKeys, listSpec("string"), null)}
                 dontRegisterView={true}
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 6812b4f38..0392566c0 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -1559,6 +1559,9 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
             this.layoutDoc._scrollTop = this._scrollRef.current!.scrollTop;
         }
     }
+
+    get titleHeight() { return this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.HeaderMargin) || 0; }
+
     @action
     tryUpdateHeight(limitHeight?: number) {
         let scrollHeight = this.ProseRef?.scrollHeight || 0;
@@ -1571,7 +1574,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
             }
             const nh = this.layoutDoc.isTemplateForField ? 0 : NumCast(this.layoutDoc._nativeHeight, 0);
             const dh = NumCast(this.rootDoc._height, 0);
-            const newHeight = Math.max(10, (nh ? dh / nh * scrollHeight : scrollHeight) + (this.props.ChromeHeight ? this.props.ChromeHeight() : 0));
+            const newHeight = Math.max(10, (nh ? dh / nh * scrollHeight : scrollHeight) + this.titleHeight);
             if (!this.props.LayoutTemplateString && this.rootDoc !== this.layoutDoc.doc && !this.layoutDoc.resolvedDataDoc) {
                 // if we have a template that hasn't been resolved yet, we can't set the height or we'd be setting it on the unresolved template.  So set a timeout and hope its arrived...
                 console.log("Delayed height adjustment...");
@@ -1582,7 +1585,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
             } else {
                 try {
                     const boxHeight = Number(getComputedStyle(this._boxRef.current!).height.replace("px", "")) * NumCast(this.Document._viewScale, 1);
-                    const outer = this.rootDoc[HeightSym]() - boxHeight - (this.props.ChromeHeight ? this.props.ChromeHeight() : 0);
+                    const outer = this.rootDoc[HeightSym]() - boxHeight - this.titleHeight;
                     this.rootDoc[this.fieldKey + "-height"] = newHeight + Math.max(0, outer);
                 } catch (e) { console.log("Error in tryUpdateHeight"); }
             }
@@ -1664,7 +1667,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
                     transform: `scale(${scale})`,
                     transformOrigin: "top left",
                     width: `${100 / scale}%`,
-                    height: `calc(${100 / scale}% - ${this.props.ChromeHeight?.() || 0}px)`,
+                    height: `${100 / scale}%`,
                     overflowY: this.layoutDoc._autoHeight ? "hidden" : undefined,
                     ...this.styleFromLayoutString(scale)   // this converts any expressions in the format string to style props.  e.g., <FormattedTextBox height='{this._headerHeight}px' >
                 }}>
-- 
cgit v1.2.3-70-g09d2