diff options
Diffstat (limited to 'src/client/views/nodes')
| -rw-r--r-- | src/client/views/nodes/DocumentView.tsx | 93 | ||||
| -rw-r--r-- | src/client/views/nodes/LinkBox.tsx | 1 | ||||
| -rw-r--r-- | src/client/views/nodes/formattedText/FormattedTextBox.tsx | 9 |
3 files changed, 52 insertions, 51 deletions
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' > }}> |