From 380ee1acac1c0b7972d7d423cf804af146dc0edf Mon Sep 17 00:00:00 2001 From: bobzel Date: Sun, 10 Dec 2023 20:19:27 -0500 Subject: massive changes to use mobx 6 which means not accessing props directly in @computed functions. --- src/client/views/PropertiesView.tsx | 53 ++++++++++++++++++++----------------- 1 file changed, 29 insertions(+), 24 deletions(-) (limited to 'src/client/views/PropertiesView.tsx') diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index 2c3cd8eac..b4c591b89 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -5,7 +5,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Checkbox, Tooltip } from '@mui/material'; import { Colors, EditableText, IconButton, NumberInput, Size, Slider, Type } from 'browndash-components'; import { concat } from 'lodash'; -import { action, computed, IReactionDisposer, observable, reaction } from 'mobx'; +import { action, computed, IReactionDisposer, makeObservable, observable, reaction } from 'mobx'; import { observer } from 'mobx-react'; import { ColorResult, SketchPicker } from 'react-color'; import * as Icons from 'react-icons/bs'; //{BsCollectionFill, BsFillFileEarmarkImageFill} from "react-icons/bs" @@ -17,7 +17,7 @@ import { List } from '../../fields/List'; import { ComputedField } from '../../fields/ScriptField'; import { Cast, DocCast, NumCast, StrCast } from '../../fields/Types'; import { GetEffectiveAcl, normalizeEmail, SharingPermissions } from '../../fields/util'; -import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue, setupMoveUpEvents, Utils } from '../../Utils'; +import { copyProps, emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue, setupMoveUpEvents, Utils } from '../../Utils'; import { CollectionViewType, DocumentType } from '../documents/DocumentTypes'; import { DocumentManager } from '../util/DocumentManager'; import { GroupManager } from '../util/GroupManager'; @@ -53,8 +53,12 @@ export class PropertiesView extends React.Component { private _widthUndo?: UndoManager.Batch; public static Instance: PropertiesView | undefined; - constructor(props: any) { + _prevProps: React.PropsWithChildren; + @observable _props: React.PropsWithChildren; + constructor(props: React.PropsWithChildren) { super(props); + this._props = this._prevProps = props; + makeObservable(this); PropertiesView.Instance = this; } @@ -116,6 +120,10 @@ export class PropertiesView extends React.Component { ); } + componentDidUpdate() { + copyProps(this); + } + componentWillUnmount() { Object.values(this._disposers).forEach(disposer => disposer?.()); } @@ -130,7 +138,7 @@ export class PropertiesView extends React.Component { return [CollectionViewType.Stacking, CollectionViewType.NoteTaking].includes(this.selectedDoc?.type_collection as any); } - rtfWidth = () => (!this.selectedLayoutDoc ? 0 : Math.min(NumCast(this.selectedLayoutDoc?._width), this.props.width - 20)); + rtfWidth = () => (!this.selectedLayoutDoc ? 0 : Math.min(NumCast(this.selectedLayoutDoc?._width), this._props.width - 20)); rtfHeight = () => (!this.selectedLayoutDoc ? 0 : this.rtfWidth() <= NumCast(this.selectedLayoutDoc?._width) ? Math.min(NumCast(this.selectedLayoutDoc?._height), this.MAX_EMBED_HEIGHT) : this.MAX_EMBED_HEIGHT); @action @@ -138,8 +146,8 @@ export class PropertiesView extends React.Component { const layoutDoc = this.selectedLayoutDoc; if (layoutDoc) { const aspect = Doc.NativeAspect(layoutDoc, undefined, !layoutDoc._layout_fitWidth); - if (aspect) return Math.min(NumCast(layoutDoc._width), Math.min(this.MAX_EMBED_HEIGHT * aspect, this.props.width - 20)); - return Doc.NativeWidth(layoutDoc) ? Math.min(NumCast(layoutDoc._width), this.props.width - 20) : this.props.width - 20; + if (aspect) return Math.min(NumCast(layoutDoc._width), Math.min(this.MAX_EMBED_HEIGHT * aspect, this._props.width - 20)); + return Doc.NativeWidth(layoutDoc) ? Math.min(NumCast(layoutDoc._width), this._props.width - 20) : this._props.width - 20; } return 0; }; @@ -155,10 +163,10 @@ export class PropertiesView extends React.Component { Doc.NativeAspect(layoutDoc, undefined, true) ? this.docWidth() / Doc.NativeAspect(layoutDoc, undefined, true) : layoutDoc._layout_fitWidth - ? !Doc.NativeHeight(this.dataDoc) - ? NumCast(this.props.height) - : Math.min((this.docWidth() * Doc.NativeHeight(layoutDoc)) / Doc.NativeWidth(layoutDoc) || NumCast(this.props.height)) - : NumCast(layoutDoc._height) || 50 + ? !Doc.NativeHeight(this.dataDoc) + ? NumCast(this._props.height) + : Math.min((this.docWidth() * Doc.NativeHeight(layoutDoc)) / Doc.NativeWidth(layoutDoc) || NumCast(this._props.height)) + : NumCast(layoutDoc._height) || 50 ) ); } @@ -254,12 +262,12 @@ export class PropertiesView extends React.Component { }; @computed get contexts() { - return !this.selectedDoc ? null : ; + return !this.selectedDoc ? null : ; } @computed get contextCount() { if (this.selectedDocumentView) { - const target = this.selectedDocumentView.props.Document; + const target = this.selectedDocumentView.Document; const embeddings = DocListCast(target.proto_embeddings); return embeddings.length - 1; } else { @@ -269,7 +277,7 @@ export class PropertiesView extends React.Component { @computed get links() { const selAnchor = this.selectedDocumentView?.anchorViewDoc ?? LinkManager.currentLinkAnchor ?? this.selectedDoc; - return !selAnchor ? null : ; + return !selAnchor ? null : ; } @computed get linkCount() { @@ -377,7 +385,7 @@ export class PropertiesView extends React.Component { color={SettingsManager.userColor} onClick={action(() => { if (this.selectedDocumentView || this.selectedDoc) { - SharingManager.Instance.open(this.selectedDocumentView?.props.Document === this.selectedDoc ? this.selectedDocumentView : undefined, this.selectedDoc); + SharingManager.Instance.open(this.selectedDocumentView?.Document === this.selectedDoc ? this.selectedDocumentView : undefined, this.selectedDoc); } })} /> @@ -619,7 +627,6 @@ export class PropertiesView extends React.Component { } @undoBatch - @action setTitle = (value: string | number) => { if (SelectionManager.Views().length > 1) { SelectionManager.Views().map(dv => Doc.SetInPlace(dv.Document, 'title', value, true)); @@ -630,7 +637,6 @@ export class PropertiesView extends React.Component { }; @undoBatch - @action rotate = (angle: number) => { const _centerPoints: { X: number; Y: number }[] = []; const doc = this.selectedDoc; @@ -1057,7 +1063,6 @@ export class PropertiesView extends React.Component { } @undoBatch - @action changeDash = () => { this.dashdStk = this.dashdStk === '2' ? '0' : '2'; }; @@ -1676,8 +1681,8 @@ export class PropertiesView extends React.Component { const hasSelectedAnchor = LinkManager.Links(this.sourceAnchor).includes(LinkManager.currentLink!); if (!this.selectedDoc && !this.isPres) { return ( -
-
+
+
No Document Selected
@@ -1690,11 +1695,11 @@ export class PropertiesView extends React.Component { style={{ background: SettingsManager.userBackgroundColor, color: SettingsManager.userColor, - width: this.props.width, - minWidth: this.props.width, + width: this._props.width, + minWidth: this._props.width, }}>
-
+
Properties
window.open('https://brown-dash.github.io/Dash-Documentation/properties')}> } color={SettingsManager.userColor} /> @@ -1722,8 +1727,8 @@ export class PropertiesView extends React.Component { ? (DocCast(PresBox.Instance.activeItem?.annotationOn)?.type as any as DocumentType) : PresBox.targetRenderedDoc(PresBox.Instance.activeItem)?.type; return ( -
-
+
+
Presentation
-- cgit v1.2.3-70-g09d2