diff options
| -rw-r--r-- | src/client/views/nodes/formattedText/DashDocView.tsx | 77 |
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> ); |