From 380ee1acac1c0b7972d7d423cf804af146dc0edf Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
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/nodes/trails/PresElementBox.tsx | 64 ++++++++++++++----------
 1 file changed, 37 insertions(+), 27 deletions(-)

(limited to 'src/client/views/nodes/trails/PresElementBox.tsx')

diff --git a/src/client/views/nodes/trails/PresElementBox.tsx b/src/client/views/nodes/trails/PresElementBox.tsx
index cd6beac57..9fcb496b8 100644
--- a/src/client/views/nodes/trails/PresElementBox.tsx
+++ b/src/client/views/nodes/trails/PresElementBox.tsx
@@ -1,12 +1,12 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Tooltip } from '@mui/material';
-import { action, computed, IReactionDisposer, observable, reaction, runInAction } from 'mobx';
+import { action, computed, IReactionDisposer, makeObservable, observable, override, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import { Doc, DocListCast, Opt } from '../../../../fields/Doc';
 import { Id } from '../../../../fields/FieldSymbols';
 import { List } from '../../../../fields/List';
 import { BoolCast, Cast, DocCast, NumCast, StrCast } from '../../../../fields/Types';
-import { emptyFunction, returnEmptyDoclist, returnFalse, returnTrue, setupMoveUpEvents } from '../../../../Utils';
+import { copyProps, emptyFunction, returnEmptyDoclist, returnFalse, returnTrue, setupMoveUpEvents } from '../../../../Utils';
 import { Docs } from '../../../documents/Documents';
 import { CollectionViewType } from '../../../documents/DocumentTypes';
 import { DocumentManager } from '../../../util/DocumentManager';
@@ -43,9 +43,21 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
 
     @observable _dragging = false;
 
+    _prevProps: FieldViewProps;
+    @override _props: FieldViewProps;
+    constructor(props: FieldViewProps) {
+        super(props);
+        this._props = this._prevProps = props;
+        makeObservable(this);
+    }
+
+    componentDidUpdate() {
+        copyProps(this);
+    }
+
     // the presentation view that renders this slide
     @computed get presBoxView() {
-        return this.props.DocumentView?.()?.props.docViewPath().lastElement()?.ComponentView as PresBox;
+        return this._props.DocumentView?.()?._props.docViewPath().lastElement()?.ComponentView as PresBox;
     }
 
     // the presentation view document that renders this slide
@@ -56,7 +68,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
     // Since this node is being rendered with a template, this method retrieves
     // the actual slide being rendered from the auto-generated rendering template
     @computed get slideDoc() {
-        return this.props.TemplateDataDocument ?? this.props.Document;
+        return this._props.TemplateDataDocument ?? this.Document;
     }
 
     // this is the document in the workspaces that is targeted by the slide
@@ -91,9 +103,9 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
 
     presExpandDocumentClick = () => (this.slideDoc.presentation_expandInlineButton = !this.slideDoc.presentation_expandInlineButton);
     embedHeight = () => this.collapsedHeight + this.expandViewHeight;
-    embedWidth = () => this.props.PanelWidth() / 2;
+    embedWidth = () => this._props.PanelWidth() / 2;
     styleProvider = (doc: Doc | undefined, props: Opt<DocumentViewProps>, property: string): any => {
-        return property === StyleProp.Opacity ? 1 : this.props.styleProvider?.(doc, props, property);
+        return property === StyleProp.Opacity ? 1 : this._props.styleProvider?.(doc, props, property);
     };
     /**
      * The function that is responsible for rendering a preview or not for this
@@ -106,19 +118,19 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
                     Document={PresBox.targetRenderedDoc(this.slideDoc)}
                     PanelWidth={this.embedWidth}
                     PanelHeight={this.embedHeight}
-                    isContentActive={this.props.isContentActive}
+                    isContentActive={this._props.isContentActive}
                     styleProvider={this.styleProvider}
                     hideLinkButton={true}
                     ScreenToLocalTransform={Transform.Identity}
-                    renderDepth={this.props.renderDepth + 1}
+                    renderDepth={this._props.renderDepth + 1}
                     docViewPath={returnEmptyDoclist}
-                    childFilters={this.props.childFilters}
-                    childFiltersByRanges={this.props.childFiltersByRanges}
-                    searchFilterDocs={this.props.searchFilterDocs}
+                    childFilters={this._props.childFilters}
+                    childFiltersByRanges={this._props.childFiltersByRanges}
+                    searchFilterDocs={this._props.searchFilterDocs}
                     addDocument={returnFalse}
                     removeDocument={returnFalse}
                     fitContentsToBox={returnTrue}
-                    moveDocument={this.props.moveDocument!}
+                    moveDocument={this._props.moveDocument!}
                     focus={emptyFunction}
                     whenChildContentsActiveChanged={returnFalse}
                     addDocTab={returnFalse}
@@ -191,8 +203,8 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
         const dragArray = this.presBoxView?._dragArray ?? [];
         const dragData = new DragManager.DocumentDragData(this.presBoxView?.sortArray() ?? []);
         if (!dragData.draggedDocuments.length) dragData.draggedDocuments.push(this.slideDoc);
-        dragData.treeViewDoc = this.presBox?._type_collection === CollectionViewType.Tree ? this.presBox : undefined; // this.props.DocumentView?.()?.props.treeViewDoc;
-        dragData.moveDocument = this.props.moveDocument;
+        dragData.treeViewDoc = this.presBox?._type_collection === CollectionViewType.Tree ? this.presBox : undefined; // this._props.DocumentView?.()?._props.treeViewDoc;
+        dragData.moveDocument = this._props.moveDocument;
         const dragItem: HTMLElement[] = [];
         const classesToRestore = new Map<HTMLElement, string>();
         if (dragArray.length === 1) {
@@ -265,8 +277,8 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
 
     @action
     toggleProperties = () => {
-        if (SettingsManager.propertiesWidth < 5) {
-            SettingsManager.propertiesWidth = 250;
+        if (SettingsManager.Instance.propertiesWidth < 5) {
+            SettingsManager.Instance.propertiesWidth = 250;
         }
     };
 
@@ -276,7 +288,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
             if (this.presBox && this.indexInPres < (this.presBoxView?.itemIndex || 0)) {
                 this.presBox.itemIndex = (this.presBoxView?.itemIndex || 0) - 1;
             }
-            this.props.removeDocument?.(this.slideDoc);
+            this._props.removeDocument?.(this.slideDoc);
             this.presBoxView?.removeFromSelectedArray(this.slideDoc);
             this.removeAllRecordingInOverlay();
         }),
@@ -299,7 +311,6 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
      * @param activeItem
      */
     @undoBatch
-    @action
     updateCapturedContainerLayout = (presTargetDoc: Doc, activeItem: Doc) => {
         const targetDoc = DocCast(presTargetDoc.annotationOn) ?? presTargetDoc;
         activeItem.config_x = NumCast(targetDoc.x);
@@ -389,7 +400,6 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
     );
 
     @undoBatch
-    @action
     lfg = (e: React.MouseEvent) => {
         e.stopPropagation();
         // TODO: fix this bug
@@ -404,7 +414,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
     get toolbarWidth(): number {
         const presBoxDocView = DocumentManager.Instance.getDocumentView(this.presBox);
         const width = NumCast(this.presBox?._width);
-        return presBoxDocView ? presBoxDocView.props.PanelWidth() : width ? width : 300;
+        return presBoxDocView ? presBoxDocView._props.PanelWidth() : width ? width : 300;
     }
 
     @computed get presButtons() {
@@ -453,8 +463,8 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
                             {!activeItem.presentation_groupWithUp
                                 ? 'Not grouped with previous slide (click to group)'
                                 : activeItem.presentation_groupWithUp === 1
-                                ? 'Run simultaneously with previous slide (click again to run after)'
-                                : 'Run after previous slide (click to ungroup from previous)'}
+                                  ? 'Run simultaneously with previous slide (click again to run after)'
+                                  : 'Run after previous slide (click to ungroup from previous)'}
                         </div>
                     }>
                     <div
@@ -530,10 +540,10 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
                 style={{
                     backgroundColor: presColorBool ? (isSelected ? 'rgba(250,250,250,0.3)' : 'transparent') : isSelected ? Colors.LIGHT_BLUE : 'transparent',
                     opacity: this._dragging ? 0.3 : 1,
-                    paddingLeft: NumCast(this.layoutDoc._xPadding, this.props.xPadding),
-                    paddingRight: NumCast(this.layoutDoc._xPadding, this.props.xPadding),
-                    paddingTop: NumCast(this.layoutDoc._yPadding, this.props.yPadding),
-                    paddingBottom: NumCast(this.layoutDoc._yPadding, this.props.yPadding),
+                    paddingLeft: NumCast(this.layoutDoc._xPadding, this._props.xPadding),
+                    paddingRight: NumCast(this.layoutDoc._xPadding, this._props.xPadding),
+                    paddingTop: NumCast(this.layoutDoc._yPadding, this._props.yPadding),
+                    paddingBottom: NumCast(this.layoutDoc._yPadding, this._props.yPadding),
                 }}
                 onDoubleClick={action(e => {
                     this.toggleProperties();
@@ -552,7 +562,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
                         className={`presItem-slide ${isCurrent ? 'active' : ''}${this.slideDoc.runProcess ? ' testingv2' : ''}`}
                         style={{
                             display: 'infline-block',
-                            backgroundColor: this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BackgroundColor),
+                            backgroundColor: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor),
                             //layout_boxShadow: presBoxColor && presBoxColor !== 'white' && presBoxColor !== 'transparent' ? (isCurrent ? '0 0 0px 1.5px' + presBoxColor : undefined) : undefined,
                             border: presBoxColor && presBoxColor !== 'white' && presBoxColor !== 'transparent' ? (isCurrent ? presBoxColor + ' solid 2.5px' : undefined) : undefined,
                         }}>
-- 
cgit v1.2.3-70-g09d2

