aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/views/collections/TreeView.scss2
-rw-r--r--src/client/views/collections/TreeView.tsx197
-rw-r--r--src/client/views/collections/collectionGrid/CollectionGridView.tsx1
-rw-r--r--src/client/views/nodes/ContentFittingDocumentView.tsx21
-rw-r--r--src/client/views/nodes/DocumentView.scss6
-rw-r--r--src/client/views/nodes/DocumentView.tsx10
-rw-r--r--src/client/views/nodes/FieldView.tsx1
-rw-r--r--src/client/views/nodes/formattedText/FormattedTextBox.scss3
-rw-r--r--src/client/views/nodes/formattedText/FormattedTextBox.tsx12
9 files changed, 144 insertions, 109 deletions
diff --git a/src/client/views/collections/TreeView.scss b/src/client/views/collections/TreeView.scss
index 17c6b0750..580fec9d6 100644
--- a/src/client/views/collections/TreeView.scss
+++ b/src/client/views/collections/TreeView.scss
@@ -22,7 +22,7 @@
}
.treeView-container-active {
z-index: 100;
- position: relative;;
+ position: relative;
.formattedTextbox-sidebar {
background-color: #ffff001f !important;
height: 500px !important;
diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx
index ef46be175..8746e7e0a 100644
--- a/src/client/views/collections/TreeView.tsx
+++ b/src/client/views/collections/TreeView.tsx
@@ -1,5 +1,5 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { action, computed, observable } from "mobx";
+import { action, computed, observable, trace } from "mobx";
import { observer } from "mobx-react";
import { DataSym, Doc, DocListCast, DocListCastOrNull, Field, HeightSym, Opt, WidthSym } from '../../../fields/Doc';
import { Id } from '../../../fields/FieldSymbols';
@@ -78,12 +78,12 @@ export class TreeView extends React.Component<TreeViewProps> {
private _openScript: (() => ScriptField) | undefined;
private _header?: React.RefObject<HTMLDivElement> = React.createRef();
private _treedropDisposer?: DragManager.DragDropDisposer;
- private _dref = React.createRef<ContentFittingDocumentView>();
private _tref = React.createRef<HTMLDivElement>();
private _docRef = React.createRef<DocumentView>();
private _uniqueId = Utils.GenerateGuid();
private _editMaxWidth: number | string = 0;
+ @observable _dref: ContentFittingDocumentView | undefined | null;
@computed get doc() { TraceMobx(); return this.props.document; }
get noviceMode() { return BoolCast(Doc.UserDoc().noviceMode, false); }
get displayName() { return "TreeView(" + this.props.document.title + ")"; } // this makes mobx trace() statements more descriptive
@@ -187,7 +187,7 @@ export class TreeView extends React.Component<TreeViewProps> {
const bullet = Docs.Create.TextDocument("-text-", {
layout: CollectionView.LayoutString("data"),
title: "-title-", "sidebarColor": "transparent", "sidebarViewType": CollectionViewType.Freeform,
- forceActive: true, _viewType: CollectionViewType.Tree, hideLinkButton: true, _showSidebar: true, treeViewOutlineMode: true,
+ _viewType: CollectionViewType.Tree, hideLinkButton: true, _showSidebar: true, treeViewOutlineMode: true,
x: 0, y: 0, _xMargin: 0, _yMargin: 0, _autoHeight: true, _singleLine: true, _backgroundColor: "transparent", _width: 1000, _height: 10
});
Doc.GetProto(bullet).title = ComputedField.MakeFunction('self.text?.Text');
@@ -279,7 +279,7 @@ export class TreeView extends React.Component<TreeViewProps> {
const offset = this.props.ScreenToLocalTransform().transformDirection(outerXf.translateX - translateX, outerXf.translateY - translateY);
return this.props.ScreenToLocalTransform().translate(offset[0], offset[1]);
}
- docTransform = () => this.refTransform(this._dref.current?.ContentRef?.current);
+ docTransform = () => this.refTransform(this._dref?.ContentRef?.current);
getTransform = () => this.refTransform(this._tref.current);
docWidth = () => {
const layoutDoc = this.layoutDoc;
@@ -402,7 +402,7 @@ export class TreeView extends React.Component<TreeViewProps> {
const layoutDoc = this.layoutDoc;
const panelHeight = StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfHeight : this.expandPanelHeight;
const panelWidth = StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfWidth : this.expandPanelWidth;
- return <ContentFittingDocumentView key={this.doc[Id]} ref={this._dref}
+ return <ContentFittingDocumentView key={this.doc[Id]} ref={action((r: ContentFittingDocumentView | null) => this._dref = r)}
Document={this.doc}
DataDoc={undefined}
LibraryPath={emptyPath}
@@ -457,7 +457,8 @@ export class TreeView extends React.Component<TreeViewProps> {
@computed get renderBullet() {
TraceMobx();
const checked = this.onCheckedClick ? (this.doc.treeViewChecked ?? "unchecked") : undefined;
- return <div className={`bullet${this.outlineMode ? "-outline" : ""}`} title={this.childDocs?.length ? `click to see ${this.childDocs?.length} items` : "view fields"}
+ return <div className={`bullet${this.outlineMode ? "-outline" : ""}`} key={"bullet"}
+ title={this.childDocs?.length ? `click to see ${this.childDocs?.length} items` : "view fields"}
onClick={this.bulletClick}
style={this.outlineMode ? { opacity: NumCast(this.doc.opacity, 1) } : {
color: StrCast(this.doc.color, checked === "unchecked" ? "white" : "inherit"),
@@ -498,6 +499,27 @@ export class TreeView extends React.Component<TreeViewProps> {
truncateTitleWidth = () => NumCast(this.props.treeView.props.Document.treeViewTruncateTitleWidth, 0);
onChildClick = () => this.props.onChildClick?.() ?? (this._editTitleScript?.() || ScriptCast(this.doc.treeChildClick));
onChildDoubleClick = () => (!this.outlineMode && this._openScript?.()) || ScriptCast(this.doc.treeChildDoubleClick);
+
+ refocus = () => this.props.treeView.props.focus(this.props.treeView.props.Document);
+ ignoreEvent = (e: any) => {
+ if (this.props.active(true)) {
+ e.stopPropagation();
+ e.preventDefault();
+ }
+ }
+ onKeyDown = (e: React.KeyboardEvent) => {
+ if (this.doc.treeViewHideHeader || this.outlineMode) {
+ e.stopPropagation();
+ e.preventDefault();
+ switch (e.key) {
+ case "Tab": setTimeout(() => RichTextMenu.Instance.TextView?.EditorView?.focus(), 150);
+ return UndoManager.RunInBatch(() => e.shiftKey ? this.props.outdentDocument?.() : this.props.indentDocument?.(), "tab");
+ case "Backspace": return !(this.doc.text as RichTextField)?.Text && this.props.removeDoc?.(this.doc);
+ case "Enter": return UndoManager.RunInBatch(this.makeTextCollection, "bullet");
+ }
+ }
+ }
+
/**
* Renders the EditableView title element for placement into the tree.
*/
@@ -505,7 +527,7 @@ export class TreeView extends React.Component<TreeViewProps> {
get renderTitle() {
TraceMobx();
const view = this.showTitleEditorControl ? this.editableView("title") :
- <DocumentView
+ <DocumentView key="title"
ref={this._docRef}
Document={this.doc}
DataDoc={undefined}
@@ -552,12 +574,71 @@ export class TreeView extends React.Component<TreeViewProps> {
</>;
}
- refocus = () => this.props.treeView.props.focus(this.props.treeView.props.Document);
+ renderBulletHeader = (contents: JSX.Element) => {
+ return <div className={`treeView-header` + (this._editMaxWidth ? "-editing" : "")} key="titleheader"
+ ref={this._header}
+ style={{ maxWidth: this._editMaxWidth }}
+ onClick={this.ignoreEvent}
+ onPointerDown={this.ignoreEvent}
+ onPointerEnter={this.onPointerEnter}
+ onPointerLeave={this.onPointerLeave}>
+ {contents}
+ </div>;
+ }
+
+ @computed get renderTitleAsText() {
+ return <>
+ {this.renderBullet}
+ {this.renderTitle}
+ </>;
+ }
+
+ @computed get renderDocumentInHeader() {
+ return <>
+ {this.renderBullet}
+ <ContentFittingDocumentView key={this.doc[Id]} ref={action((r: ContentFittingDocumentView | null) => this._dref = r)}
+ Document={this.doc}
+ DataDoc={undefined}
+ LayoutTemplateString={FormattedTextBox.LayoutString("text")}
+ LibraryPath={emptyPath}
+ renderDepth={this.props.renderDepth + 1}
+ rootSelected={returnTrue}
+ treeViewDoc={undefined}
+ backgroundColor={this.props.backgroundColor}
+ fitToBox={this.isCollectionDoc !== undefined}
+ PanelWidth={this.rtfWidth}
+ PanelHeight={this.rtfOutlineHeight}
+ focus={this.refocus}
+ ScreenToLocalTransform={this.docTransform}
+ docFilters={returnEmptyFilter}
+ docRangeFilters={returnEmptyFilter}
+ searchFilterDocs={returnEmptyDoclist}
+ ContainingCollectionDoc={this.props.containingCollection}
+ ContainingCollectionView={undefined}
+ addDocument={this.props.addDocument}
+ moveDocument={this.move}
+ removeDocument={this.props.removeDoc}
+ parentActive={this.props.active}
+ whenActiveChanged={this.props.whenActiveChanged}
+ addDocTab={this.props.addDocTab}
+ pinToPres={this.props.pinToPres}
+ bringToFront={returnFalse}
+ ContentScaling={returnOne}
+ />
+ </>;
+ }
+
+ @computed get renderBorder() {
+ const sorting = this.doc[`${this.fieldKey}-sortAscending`];
+ return <div className={`treeView-border${this.outlineMode ? "outline" : ""}`}
+ style={{ borderColor: sorting === undefined ? undefined : sorting ? "crimson" : "blue" }}>
+ {!this.treeViewOpen ? (null) : this.renderContent}
+ </div>;
+ }
render() {
TraceMobx();
if (this.props.renderedIds.indexOf(this.doc[Id]) !== -1) return "<" + this.doc.title + ">";
- const sorting = this.doc[`${this.fieldKey}-sortAscending`];
if (this.showTitleEditorControl) { // find containing CollectionTreeView and set our maximum width so the containing tree view won't have to scroll
let par: any = this._header?.current;
while (par && par.className !== "collectionTreeView-dropTarget") par = par.parentNode;
@@ -568,88 +649,28 @@ export class TreeView extends React.Component<TreeViewProps> {
}
}
else this._editMaxWidth = "";
- const selected = false;// SelectionManager.IsSelected(DocumentManager.Instance.getFirstDocumentView(this.doc)); // bcz: need to fix so that this doesn't get called for every selection/view creation. this is used to highlight bullet items in Slide views
- return this.doc.treeViewHideHeader || this.outlineMode ?
- !StrCast(Doc.LayoutField(this.doc)).includes("CollectionView") ?
- this.renderContent
- : <div className={`treeView-container${selected ? "-active" : ""}`} ref={this.createTreeDropTarget} onPointerDown={e => this.props.active(true) && SelectionManager.DeselectAll()}
- onKeyDown={e => {
- e.stopPropagation();
- e.preventDefault();
- switch (e.key) {
- case "Backspace": return !(this.doc.text as RichTextField)?.Text && this.props.removeDoc?.(this.doc);
- case "Enter": return UndoManager.RunInBatch(() => this.makeTextCollection(), "bullet");
- case "Tab": setTimeout(() => RichTextMenu.Instance.TextView?.EditorView?.focus(), 150);
- return UndoManager.RunInBatch(() => e.shiftKey ? this.props.outdentDocument?.() : this.props.indentDocument?.(), "tab");
- }
- }} >
- <div className={`treeView-header` + (this._editMaxWidth ? "-editing" : "")} ref={this._header} style={{ alignItems: this.outlineMode ? "center" : undefined, maxWidth: this._editMaxWidth }}
- onClick={e => { if (this.props.active(true)) { e.stopPropagation(); e.preventDefault(); } }}
- onPointerDown={e => { if (this.props.active(true)) { e.stopPropagation(); e.preventDefault(); } }}
- onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerLeave}>
- {this.renderBullet}
- <ContentFittingDocumentView key={this.doc[Id]} ref={this._dref}
- Document={this.doc}
- DataDoc={undefined}
- LayoutTemplateString={FormattedTextBox.LayoutString("text")}
- LibraryPath={emptyPath}
- renderDepth={this.props.renderDepth + 1}
- rootSelected={returnTrue}
- treeViewDoc={undefined}
- backgroundColor={this.props.backgroundColor}
- fitToBox={this.isCollectionDoc !== undefined}
- PanelWidth={this.rtfWidth}
- PanelHeight={this.rtfOutlineHeight}
- focus={this.refocus}
- ScreenToLocalTransform={this.docTransform}
- docFilters={returnEmptyFilter}
- docRangeFilters={returnEmptyFilter}
- searchFilterDocs={returnEmptyDoclist}
- ContainingCollectionDoc={this.props.containingCollection}
- ContainingCollectionView={undefined}
- addDocument={this.props.addDocument}
- moveDocument={this.move}
- removeDocument={this.props.removeDoc}
- parentActive={this.props.active}
- whenActiveChanged={this.props.whenActiveChanged}
- addDocTab={this.props.addDocTab}
- pinToPres={this.props.pinToPres}
- bringToFront={returnFalse}
- ContentScaling={returnOne}
- />
- </div>
-
- <div className={`treeView-border${this.outlineMode ? "outline" : ""}`} style={{ borderColor: sorting === undefined ? undefined : sorting ? "crimson" : "blue" }}>
- {!this.treeViewOpen ? (null) : this.renderContent}
- </div>
- </div> :
- <div className="treeView-container" ref={this.createTreeDropTarget} onPointerDown={e => this.props.active(true) && SelectionManager.DeselectAll()}>
- <li className="collection-child">
- <div className={`treeView-header` + (this._editMaxWidth ? "-editing" : "")} ref={this._header} style={{ maxWidth: this._editMaxWidth }} onClick={e => {
- if (this.props.active(true)) {
- e.stopPropagation();
- e.preventDefault();
- SelectionManager.DeselectAll();
- }
- }}
- onPointerDown={e => {
- if (this.props.active(true)) {
- e.stopPropagation();
- e.preventDefault();
- }
- }}
- onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerLeave}>
- {this.renderBullet}
- {this.renderTitle}
- </div>
- <div className={`treeView-border${this.outlineMode ? "outline" : ""}`} style={{ borderColor: sorting === undefined ? undefined : sorting ? "crimson" : "blue" }}>
- {!this.treeViewOpen ? (null) : this.renderContent}
- </div>
- </li>
+
+ const hideTitle = this.doc.treeViewHideHeader || this.outlineMode;
+ return hideTitle && !StrCast(Doc.LayoutField(this.doc)).includes("CollectionView") ?
+ this.renderContent
+ :
+ <div className={`treeView-container${this._dref?.docView?.contentsActive() ? "-active" : ""}`}
+ ref={this.createTreeDropTarget}
+ onPointerDown={e => this.props.active(true) && SelectionManager.DeselectAll()}
+ onKeyDown={this.onKeyDown}>
+ {hideTitle ?
+ <li className="collection-child">
+ {this.renderBulletHeader(this.renderDocumentInHeader)}
+ {this.renderBorder}
+ </li> :
+ <li className="collection-child">
+ {this.renderBulletHeader(this.renderTitleAsText)}
+ {this.renderBorder}
+ </li>
+ }
</div>;
}
-
public static GetChildElements(
childDocs: Doc[],
treeView: CollectionTreeView,
diff --git a/src/client/views/collections/collectionGrid/CollectionGridView.tsx b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
index 5c7373a2f..8e86b6d0d 100644
--- a/src/client/views/collections/collectionGrid/CollectionGridView.tsx
+++ b/src/client/views/collections/collectionGrid/CollectionGridView.tsx
@@ -171,6 +171,7 @@ export class CollectionGridView extends CollectionSubView(GridSchema) {
PanelHeight={height}
ContentScaling={returnOne}
FreezeDimensions={true}
+ fitToBox={true}
ScreenToLocalTransform={dxf}
onClick={this.onChildClickHandler}
renderDepth={this.props.renderDepth + 1}
diff --git a/src/client/views/nodes/ContentFittingDocumentView.tsx b/src/client/views/nodes/ContentFittingDocumentView.tsx
index 99b5f7478..d5b91f4a7 100644
--- a/src/client/views/nodes/ContentFittingDocumentView.tsx
+++ b/src/client/views/nodes/ContentFittingDocumentView.tsx
@@ -1,10 +1,10 @@
import React = require("react");
-import { computed } from "mobx";
+import { computed, observable, action } from "mobx";
import { observer } from "mobx-react";
import { Doc, HeightSym, WidthSym } from "../../../fields/Doc";
import { Cast, StrCast } from "../../../fields/Types";
import { TraceMobx } from "../../../fields/util";
-import { emptyFunction, OmitKeys, returnVal } from "../../../Utils";
+import { emptyFunction, OmitKeys, returnVal, returnOne } from "../../../Utils";
import { DocumentView, DocumentViewProps } from "../nodes/DocumentView";
import "./ContentFittingDocumentView.scss";
@@ -15,6 +15,8 @@ interface ContentFittingDocumentViewProps {
@observer
export class ContentFittingDocumentView extends React.Component<DocumentViewProps & ContentFittingDocumentViewProps> {
public get displayName() { return "DocumentView(" + this.props.Document?.title + ")"; } // this makes mobx trace() statements more descriptive
+ public ContentRef = React.createRef<HTMLDivElement>();
+ @observable public docView: DocumentView | undefined | null;
@computed get layoutDoc() {
return this.props.LayoutTemplate?.() ||
(this.props.layoutKey && Doc.Layout(this.props.Document, Cast(this.props.Document[this.props.layoutKey], Doc, null))) ||
@@ -42,10 +44,8 @@ export class ContentFittingDocumentView extends React.Component<DocumentViewProp
return this.props.PanelHeight();
}
- @computed get childXf() { return this.props.DataDoc ? 1 : 1 / this.contentScaling(); } // this is intended to detect when a document is being rendered inside itself as part of a template, but not as a leaf node where nativeWidth & height would apply.
private getTransform = () => this.props.ScreenToLocalTransform().
- translate(this.props.dontCenter?.includes("x") ? 0 : -this.centeringOffset, this.props.dontCenter?.includes("y") ? 0 : -this.centeringYOffset).
- scale(this.childXf)
+ translate(this.props.dontCenter?.includes("x") ? 0 : -this.centeringOffset, this.props.dontCenter?.includes("y") ? 0 : -this.centeringYOffset);
private get centeringOffset() { return this.nativeWidth && !this.props.Document._fitWidth ? (this.props.PanelWidth() - this.nativeWidth * this.nativeScaling) / 2 : 0; }
private get centeringYOffset() { return Math.abs(this.centeringOffset) < 0.001 && this.nativeHeight ? (this.props.PanelHeight() - this.nativeHeight * this.nativeScaling) / 2 : 0; }
@@ -53,15 +53,7 @@ export class ContentFittingDocumentView extends React.Component<DocumentViewProp
PanelWidth = () => this.panelWidth;
PanelHeight = () => this.panelHeight;
- contentScaling = () => {
- const layoutStr = (this.props.LayoutTemplateString || StrCast(this.layoutDoc.layout));
- if (layoutStr.includes("FormattedTextBox")) return this.nativeScaling;
- const wscale = this.nativeWidth ? 1 : this.layoutDoc[WidthSym]() / this.props.PanelWidth();
- const hscale = this.nativeWidth ? 1 : this.layoutDoc[HeightSym]() / this.props.PanelHeight();
- return this.nativeScaling * Math.max(wscale, hscale);
- }
- public ContentRef = React.createRef<HTMLDivElement>();
render() {
TraceMobx();
return (<div className="contentFittingDocumentView">
@@ -74,6 +66,7 @@ export class ContentFittingDocumentView extends React.Component<DocumentViewProp
width: Math.abs(this.centeringOffset) > 0.001 ? `${100 * (this.props.PanelWidth() - this.centeringOffset * 2) / this.props.PanelWidth()}%` : this.props.PanelWidth(),
}}>
<DocumentView {...OmitKeys(this.props, ["NativeWidth", "NativeHeight"]).omit}
+ ref={action((r: DocumentView | null) => this.docView = r)}
Document={this.props.Document}
DataDoc={this.props.DataDoc}
LayoutTemplate={this.props.LayoutTemplate}
@@ -81,7 +74,7 @@ export class ContentFittingDocumentView extends React.Component<DocumentViewProp
LibraryPath={this.props.LibraryPath}
PanelWidth={this.PanelWidth}
PanelHeight={this.PanelHeight}
- ContentScaling={this.contentScaling}
+ ContentScaling={returnOne}
fitToBox={this.props.fitToBox}
layoutKey={this.props.layoutKey}
dropAction={this.props.dropAction}
diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss
index c31172e22..ad72250b6 100644
--- a/src/client/views/nodes/DocumentView.scss
+++ b/src/client/views/nodes/DocumentView.scss
@@ -54,6 +54,12 @@
}
}
+ .documentView-contentsView {
+ border-radius: inherit;
+ width: 100%;
+ height: 100%;
+ }
+
.documentView-anchorCont {
position: absolute;
top: 0;
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 77f63b457..4485c744d 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -12,7 +12,7 @@ import { BoolCast, Cast, NumCast, ScriptCast, StrCast } from "../../../fields/Ty
import { GetEffectiveAcl, TraceMobx } from '../../../fields/util';
import { MobileInterface } from '../../../mobile/MobileInterface';
import { GestureUtils } from '../../../pen-gestures/GestureUtils';
-import { emptyFunction, OmitKeys, returnOne, returnTransparent, returnVal, Utils } from "../../../Utils";
+import { emptyFunction, OmitKeys, returnOne, returnTransparent, returnVal, Utils, returnFalse } from "../../../Utils";
import { GooglePhotos } from '../../apis/google_docs/GooglePhotosClientUtils';
import { Docs, DocUtils } from "../../documents/Documents";
import { DocumentType } from '../../documents/DocumentTypes';
@@ -49,6 +49,7 @@ export interface DocumentViewProps {
ContainingCollectionView: Opt<CollectionView>;
ContainingCollectionDoc: Opt<Doc>;
docFilters: () => string[];
+ contentsActive?: (setActive: () => boolean) => void;
docRangeFilters: () => string[];
searchFilterDocs: () => Doc[];
FreezeDimensions?: boolean;
@@ -118,7 +119,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
private _holdDisposer?: InteractionUtils.MultiTouchEventDisposer;
protected _multiTouchDisposer?: InteractionUtils.MultiTouchEventDisposer;
- private get active() { return SelectionManager.IsSelected(this, true) || this.props.parentActive(true); }
+ private get active() { return this.isSelected(true) || this.props.parentActive(true); }
public get displayName() { return "DocumentView(" + this.props.Document.title + ")"; } // this makes mobx trace() statements more descriptive
public get ContentDiv() { return this._mainCont.current; }
public get LayoutFieldKey() { return this.props.layoutKey || Doc.LayoutFieldKey(this.layoutDoc); }
@@ -918,11 +919,14 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
}
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; }
@computed get contents() {
TraceMobx();
- return (<div className="documentView-contentsView" style={{ pointerEvents: this.props.contentsPointerEvents as any, borderRadius: "inherit", width: "100%", height: "100%" }}>
+ return (<div className="documentView-contentsView" style={{ pointerEvents: this.props.contentsPointerEvents as any }}>
<DocumentContentsView key={1}
docFilters={this.props.docFilters}
+ contentsActive={this.setContentsActive}
docRangeFilters={this.props.docRangeFilters}
searchFilterDocs={this.props.searchFilterDocs}
ContainingCollectionView={this.props.ContainingCollectionView}
diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx
index 79947c023..d7ff051cf 100644
--- a/src/client/views/nodes/FieldView.tsx
+++ b/src/client/views/nodes/FieldView.tsx
@@ -26,6 +26,7 @@ export interface FieldViewProps {
Document: Doc;
DataDoc?: Doc;
LibraryPath: Doc[];
+ contentsActive?: (setActive: () => boolean) => void;
onClick?: () => ScriptField;
dropAction: dropActionType;
backgroundHalo?: () => boolean;
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.scss b/src/client/views/nodes/formattedText/FormattedTextBox.scss
index b75cc230f..b04f60500 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.scss
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.scss
@@ -113,6 +113,9 @@
.ProseMirror {
padding:10px;
}
+}
+.formattedTextBox-outer-selected {
+
.ProseMirror:hover {
background: unset;
}
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index fe38939c5..dec81236d 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -810,7 +810,13 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
this.dataDoc[UpdatingFromServer] = this.dataDoc[ForceServerWrite] = false;
}
}
+
+ IsActive = () => {
+ return this.active();//this.props.isSelected() || this._isChildActive || this.props.renderDepth === 0;
+ }
+
componentDidMount() {
+ this.props.contentsActive?.(this.IsActive);
this._cachedLinks = DocListCast(this.Document.links);
this._disposers.sidebarheight = reaction(
() => ({ annoHeight: NumCast(this.rootDoc[this.annotationKey + "-height"]), textHeight: NumCast(this.rootDoc[this.fieldKey + "-height"]) }),
@@ -1622,7 +1628,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
const margins = NumCast(this.layoutDoc._yMargin, this.props.yMargin || 0);
const selPad = Math.min(margins, 10);
const padding = Math.max(margins + ((selected && !this.layoutDoc._singleLine) || minimal ? -selPad : 0), 0);
- const selclass = selected && !this.layoutDoc._singleLine && margins >= 10 ? "-selected" : "";
+ const selPaddingClass = selected && !this.layoutDoc._singleLine && margins >= 10 ? "-selected" : "";
return (
<div className="formattedTextBox-cont" ref={this._boxRef}
style={{
@@ -1665,10 +1671,10 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
})}
onDoubleClick={this.onDoubleClick}
>
- <div className={`formattedTextBox-outer${selclass}`} ref={this._scrollRef}
+ <div className={`formattedTextBox-outer${selected ? "-selected" : ""}`} ref={this._scrollRef}
style={{ width: `calc(100% - ${this.sidebarWidthPercent})`, pointerEvents: !active && !SnappingManager.GetIsDragging() ? "none" : undefined }}
onScroll={this.onscrolled} onDrop={this.ondrop} >
- <div className={minimal ? "formattedTextBox-minimal" : `formattedTextBox-inner${rounded}${selclass}`} ref={this.createDropTarget}
+ <div className={minimal ? "formattedTextBox-minimal" : `formattedTextBox-inner${rounded}${selPaddingClass}`} ref={this.createDropTarget}
style={{
overflow: this.layoutDoc._singleLine ? "hidden" : undefined,
padding: this.layoutDoc._textBoxPadding ? StrCast(this.layoutDoc._textBoxPadding) : `${padding}px`,
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 06:18:05 +0000