fixed pointer events with nested views in texst boxes. fixed

6 files changed, 15 insertions, 6 deletions

diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 35d28ba9c..4dba5cbd3 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -191,6 +191,7 @@ export interface DocumentViewSharedProps {
     yPadding?: number;
     dropAction?: dropActionType;
     dontRegisterView?: boolean;
+    dragWhenActive?: boolean;
     hideLinkButton?: boolean;
     hideCaptions?: boolean;
     ignoreAutoHeight?: boolean;
@@ -358,7 +359,10 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
     componentWillUnmount() {
         this.cleanupHandlers(true);
     }
+    @observable _mounted = false;
+    @action
     componentDidMount() {
+        this._mounted = true;
         this.setupHandlers();
         this._disposers.contentActive = reaction(
             () => {
@@ -568,7 +572,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
                 //if (this.props.isSelected(true) && this.rootDoc.type !== DocumentType.PDF && this.layoutDoc._type_collection !== CollectionViewType.Docking) e.preventDefault();
 
                 // listen to move events if document content isn't active or document is draggable
-                if (!this.layoutDoc._lockedPosition && (!this.isContentActive() || BoolCast(this.rootDoc._dragWhenActive))) {
+                if (!this.layoutDoc._lockedPosition && (!this.isContentActive() || BoolCast(this.rootDoc._dragWhenActive, this.props.dragWhenActive))) {
                     document.addEventListener('pointermove', this.onPointerMove);
                 }
             }
@@ -932,7 +936,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
             <div
                 className="documentView-contentsView"
                 style={{
-                    pointerEvents: (isInk || noBackground ? 'none' : this.contentPointerEvents()) ?? 'all',
+                    pointerEvents: (isInk || noBackground ? 'none' : this.contentPointerEvents()) ?? (this._mounted ? 'all' : 'none'),
                     height: this.headerMargin ? `calc(100% - ${this.headerMargin}px)` : undefined,
                 }}>
                 <DocumentContentsView
diff --git a/src/client/views/nodes/ImageBox.scss b/src/client/views/nodes/ImageBox.scss
index 29943e156..3ffda5a35 100644
--- a/src/client/views/nodes/ImageBox.scss
+++ b/src/client/views/nodes/ImageBox.scss
@@ -128,6 +128,7 @@
     right: 0;
     bottom: 0;
     z-index: 2;
+    cursor: default;
 }
 
 .imageBox-fader img {
diff --git a/src/client/views/nodes/formattedText/DashDocView.tsx b/src/client/views/nodes/formattedText/DashDocView.tsx
index c5167461b..e8b9a98b7 100644
--- a/src/client/views/nodes/formattedText/DashDocView.tsx
+++ b/src/client/views/nodes/formattedText/DashDocView.tsx
@@ -5,7 +5,7 @@ import * as ReactDOM from 'react-dom/client';
 import { Doc } from '../../../../fields/Doc';
 import { Height, Width } from '../../../../fields/DocSymbols';
 import { NumCast, StrCast } from '../../../../fields/Types';
-import { emptyFunction, returnFalse, Utils } from '../../../../Utils';
+import { emptyFunction, returnFalse, returnTrue, Utils } from '../../../../Utils';
 import { DocServer } from '../../../DocServer';
 import { Docs, DocUtils } from '../../../documents/Documents';
 import { Transform } from '../../../util/Transform';
@@ -177,6 +177,7 @@ export class DashDocViewInternal extends React.Component<IDashDocViewInternal> {
     };
 
     componentWillUnmount = () => Object.values(this._disposers).forEach(disposer => disposer?.());
+    isContentActive = () => this.props.tbox.props.isSelected() || this.props.tbox.isAnyChildContentActive?.();
 
     render() {
         return !this._dashDoc || !this._finalLayout || this.props.hidden ? null : (
@@ -190,6 +191,7 @@ export class DashDocViewInternal extends React.Component<IDashDocViewInternal> {
                     display: 'inline-block',
                     left: 0,
                     top: 0,
+                    pointerEvents: this.isContentActive() ? undefined : 'none',
                 }}
                 onPointerLeave={this.onPointerLeave}
                 onPointerEnter={this.onPointerEnter}
@@ -203,7 +205,7 @@ export class DashDocViewInternal extends React.Component<IDashDocViewInternal> {
                     rootSelected={returnFalse} //{this._textBox.props.isSelected}
                     removeDocument={this.removeDoc}
                     isDocumentActive={returnFalse}
-                    isContentActive={emptyFunction}
+                    isContentActive={this.isContentActive}
                     styleProvider={this._textBox.props.styleProvider}
                     docViewPath={this._textBox.props.docViewPath}
                     ScreenToLocalTransform={this.getDocTransform}
@@ -213,7 +215,7 @@ export class DashDocViewInternal extends React.Component<IDashDocViewInternal> {
                     PanelWidth={this._finalLayout[Width]}
                     PanelHeight={this._finalLayout[Height]}
                     focus={this.outerFocus}
-                    whenChildContentsActiveChanged={returnFalse}
+                    whenChildContentsActiveChanged={this.props.tbox.whenChildContentsActiveChanged}
                     bringToFront={emptyFunction}
                     dontRegisterView={false}
                     childFilters={this.props.tbox?.props.childFilters}
diff --git a/src/client/views/nodes/formattedText/DashFieldView.tsx b/src/client/views/nodes/formattedText/DashFieldView.tsx
index d5ad128fe..0a64c8062 100644
--- a/src/client/views/nodes/formattedText/DashFieldView.tsx
+++ b/src/client/views/nodes/formattedText/DashFieldView.tsx
@@ -177,6 +177,7 @@ export class DashFieldViewInternal extends React.Component<IDashFieldViewInterna
                 style={{
                     width: this.props.width,
                     height: this.props.height,
+                    pointerEvents: this.props.tbox.props.isSelected() || this.props.tbox.isAnyChildContentActive?.() ? undefined : 'none',
                 }}>
                 {this.props.hideKey ? null : (
                     <span className="dashFieldView-labelSpan" title="click to see related tags" onPointerDown={this.onPointerDownLabelSpan}>
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.scss b/src/client/views/nodes/formattedText/FormattedTextBox.scss
index 818c0cbe7..e6f24d99f 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.scss
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.scss
@@ -89,6 +89,7 @@ audiotag:hover {
     bottom: 0;
     width: 11;
     height: 11;
+    cursor: default;
 }
 
 .formattedTextBox-outer {
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 764fa35cb..977039a1d 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -2047,7 +2047,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
     }
     @computed get fieldKey() {
         const usePath = StrCast(this.rootDoc[`${this.props.fieldKey}_usePath`]);
-        return this.props.fieldKey + (usePath && (!usePath.includes(':hover') || this._isHovering) ? `_${usePath.replace(':hover', '')}` : '');
+        return this.props.fieldKey + (usePath && (!usePath.includes(':hover') || this._isHovering || this.props.isContentActive()) ? `_${usePath.replace(':hover', '')}` : '');
     }
     @observable _isHovering = false;
     onPassiveWheel = (e: WheelEvent) => {