aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/nodes/formattedText/DashDocView.tsx77
1 files changed, 37 insertions, 40 deletions
diff --git a/src/client/views/nodes/formattedText/DashDocView.tsx b/src/client/views/nodes/formattedText/DashDocView.tsx
index 5a13fa8b4..56c8e00ed 100644
--- a/src/client/views/nodes/formattedText/DashDocView.tsx
+++ b/src/client/views/nodes/formattedText/DashDocView.tsx
@@ -1,4 +1,4 @@
-import { action, IReactionDisposer, observable, reaction } from 'mobx';
+import { action, computed, IReactionDisposer, makeObservable, observable, reaction } from 'mobx';
import { observer } from 'mobx-react';
import { NodeSelection } from 'prosemirror-state';
import * as React from 'react';
@@ -10,6 +10,7 @@ import { emptyFunction, returnFalse, Utils } from '../../../../Utils';
import { DocServer } from '../../../DocServer';
import { Docs, DocUtils } from '../../../documents/Documents';
import { Transform } from '../../../util/Transform';
+import { ObservableReactComponent } from '../../ObservableReactComponent';
import { DocFocusOptions, DocumentView } from '../DocumentView';
import { FormattedTextBox } from './FormattedTextBox';
@@ -78,27 +79,27 @@ interface IDashDocViewInternal {
getPos: any;
}
@observer
-export class DashDocViewInternal extends React.Component<IDashDocViewInternal> {
+export class DashDocViewInternal extends ObservableReactComponent<IDashDocViewInternal> {
_spanRef = React.createRef<HTMLDivElement>();
_disposers: { [name: string]: IReactionDisposer } = {};
_textBox: FormattedTextBox;
@observable _dashDoc: Doc | undefined = undefined;
- @observable _finalLayout: any = undefined;
- @observable _width: number = 0;
- @observable _height: number = 0;
+ @computed get _width() {
+ return NumCast(this._dashDoc?._width);
+ }
+ @computed get _height() {
+ return NumCast(this._dashDoc?._height);
+ }
updateDoc = action((dashDoc: Doc) => {
this._dashDoc = dashDoc;
- this._finalLayout = dashDoc;
- if (this.props.width !== (this._dashDoc?._width ?? '') + 'px' || this.props.height !== (this._dashDoc?._height ?? '') + 'px') {
+ if (this._props.width !== (this._dashDoc?._width ?? '') + 'px' || this._props.height !== (this._dashDoc?._height ?? '') + 'px') {
try {
- this._width = NumCast(this._dashDoc?._width);
- this._height = NumCast(this._dashDoc?._height);
// bcz: an exception will be thrown if two embeddings are open at the same time when a doc view comment is made
- this.props.view.dispatch(
- this.props.view.state.tr.setNodeMarkup(this.props.getPos(), null, {
- ...this.props.node.attrs,
+ this._props.view.dispatch(
+ this._props.view.state.tr.setNodeMarkup(this._props.getPos(), null, {
+ ...this._props.node.attrs,
width: this._width + 'px',
height: this._height + 'px',
})
@@ -111,16 +112,17 @@ export class DashDocViewInternal extends React.Component<IDashDocViewInternal> {
constructor(props: IDashDocViewInternal) {
super(props);
- this._textBox = this.props.tbox;
+ makeObservable(this);
+ this._textBox = this._props.tbox;
- DocServer.GetRefField(this.props.docId + this.props.embedding).then(async dashDoc => {
+ DocServer.GetRefField(this._props.docId + this._props.embedding).then(async dashDoc => {
if (!(dashDoc instanceof Doc)) {
- this.props.embedding &&
- DocServer.GetRefField(this.props.docId).then(async dashDocBase => {
+ this._props.embedding &&
+ DocServer.GetRefField(this._props.docId).then(async dashDocBase => {
if (dashDocBase instanceof Doc) {
- const embedding = Doc.MakeEmbedding(dashDocBase, this.props.docId + this.props.embedding);
+ const embedding = Doc.MakeEmbedding(dashDocBase, this._props.docId + this._props.embedding);
embedding.layout_fieldKey = 'layout';
- this.props.fieldKey && DocUtils.makeCustomViewClicked(embedding, Docs.Create.StackingDocument, this.props.fieldKey, undefined);
+ this._props.fieldKey && DocUtils.makeCustomViewClicked(embedding, Docs.Create.StackingDocument, this._props.fieldKey, undefined);
this.updateDoc(embedding);
}
});
@@ -132,23 +134,18 @@ export class DashDocViewInternal extends React.Component<IDashDocViewInternal> {
componentDidMount() {
this._disposers.upater = reaction(
- () => this._dashDoc && NumCast(this._dashDoc._height) + NumCast(this._dashDoc._width),
- action(() => {
- if (this._dashDoc) {
- this._width = NumCast(this._dashDoc._width);
- this._height = NumCast(this._dashDoc._height);
- const parent = this._spanRef.current?.parentNode as HTMLElement;
- if (parent) {
- parent.style.width = this._width + 'px';
- parent.style.height = this._height + 'px';
- }
+ () => ({ width: this._width, height: this._height, parent: this._spanRef.current?.parentNode as HTMLElement }),
+ action(({ width, height, parent }) => {
+ if (parent) {
+ parent.style.width = width + 'px';
+ parent.style.height = height + 'px';
}
})
);
}
removeDoc = () => {
- this.props.view.dispatch(this.props.view.state.tr.setSelection(new NodeSelection(this.props.view.state.doc.resolve(this.props.getPos()))).deleteSelection());
+ this._props.view.dispatch(this._props.view.state.tr.setSelection(new NodeSelection(this._props.view.state.doc.resolve(this._props.getPos()))).deleteSelection());
return true;
};
@@ -167,20 +164,20 @@ export class DashDocViewInternal extends React.Component<IDashDocViewInternal> {
};
onPointerLeave = () => {
- const ele = document.getElementById('DashDocCommentView-' + this.props.docId) as HTMLDivElement;
+ const ele = document.getElementById('DashDocCommentView-' + this._props.docId) as HTMLDivElement;
ele && (ele.style.backgroundColor = '');
};
onPointerEnter = () => {
- const ele = document.getElementById('DashDocCommentView-' + this.props.docId) as HTMLDivElement;
+ const ele = document.getElementById('DashDocCommentView-' + this._props.docId) as HTMLDivElement;
ele && (ele.style.backgroundColor = 'orange');
};
componentWillUnmount = () => Object.values(this._disposers).forEach(disposer => disposer?.());
- isContentActive = () => this.props.tbox._props.isSelected() || this.props.tbox.isAnyChildContentActive?.();
+ isContentActive = () => this._props.tbox._props.isContentActive() || this._props.tbox.isAnyChildContentActive?.();
render() {
- return !this._dashDoc || !this._finalLayout || this.props.hidden ? null : (
+ return !this._dashDoc || this._props.hidden ? null : (
<div
ref={this._spanRef}
className="dash-span"
@@ -200,7 +197,7 @@ export class DashDocViewInternal extends React.Component<IDashDocViewInternal> {
onKeyUp={e => e.stopPropagation()}
onWheel={e => e.preventDefault()}>
<DocumentView
- Document={this._finalLayout}
+ Document={this._dashDoc}
addDocument={returnFalse}
removeDocument={this.removeDoc}
isDocumentActive={returnFalse}
@@ -211,15 +208,15 @@ export class DashDocViewInternal extends React.Component<IDashDocViewInternal> {
addDocTab={this._textBox._props.addDocTab}
pinToPres={returnFalse}
renderDepth={this._textBox._props.renderDepth + 1}
- PanelWidth={this._finalLayout[Width]}
- PanelHeight={this._finalLayout[Height]}
+ PanelWidth={this._dashDoc[Width]}
+ PanelHeight={this._dashDoc[Height]}
focus={this.outerFocus}
- whenChildContentsActiveChanged={this.props.tbox.whenChildContentsActiveChanged}
+ whenChildContentsActiveChanged={this._props.tbox.whenChildContentsActiveChanged}
bringToFront={emptyFunction}
dontRegisterView={false}
- childFilters={this.props.tbox?._props.childFilters}
- childFiltersByRanges={this.props.tbox?._props.childFiltersByRanges}
- searchFilterDocs={this.props.tbox?._props.searchFilterDocs}
+ childFilters={this._props.tbox?._props.childFilters}
+ childFiltersByRanges={this._props.tbox?._props.childFiltersByRanges}
+ searchFilterDocs={this._props.tbox?._props.searchFilterDocs}
/>
</div>
);
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 17:57:37 +0000