diff options
Diffstat (limited to 'src/client/views/nodes/trails/PresElementBox.tsx')
| -rw-r--r-- | src/client/views/nodes/trails/PresElementBox.tsx | 61 |
1 files changed, 31 insertions, 30 deletions
diff --git a/src/client/views/nodes/trails/PresElementBox.tsx b/src/client/views/nodes/trails/PresElementBox.tsx index 6a8edee0d..ec5d090dd 100644 --- a/src/client/views/nodes/trails/PresElementBox.tsx +++ b/src/client/views/nodes/trails/PresElementBox.tsx @@ -1,7 +1,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Tooltip } from '@material-ui/core'; -import { action, computed, IReactionDisposer, observable, reaction, runInAction } from 'mobx'; +import { Tooltip } from '@mui/material'; +import { action, computed, IReactionDisposer, makeObservable, observable, reaction, runInAction } from 'mobx'; import { observer } from 'mobx-react'; +import * as React from 'react'; import { Doc, DocListCast, Opt } from '../../../../fields/Doc'; import { Id } from '../../../../fields/FieldSymbols'; import { List } from '../../../../fields/List'; @@ -24,7 +25,6 @@ import { StyleProp } from '../../StyleProvider'; import { PresBox } from './PresBox'; import './PresElementBox.scss'; import { PresMovement } from './PresEnums'; -import React = require('react'); /** * This class models the view a document added to presentation will have in the presentation. * It involves some functionality for its buttons and options. @@ -41,11 +41,16 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() { readonly expandViewHeight = 100; readonly collapsedHeight = 35; + constructor(props: any) { + super(props); + makeObservable(this); + } + @observable _dragging = false; // 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 +61,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 Cast(this.Document.rootDocument, Doc, null) || this.props.Document; + return this._props.TemplateDataDocument ?? this.Document; } // this is the document in the workspaces that is targeted by the slide @@ -91,9 +96,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 @@ -104,23 +109,21 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() { <div className="presItem-embedded" style={{ height: this.embedHeight(), width: '50%' }}> <DocumentView Document={PresBox.targetRenderedDoc(this.slideDoc)} - DataDoc={undefined} //this.targetDoc[DataSym] !== this.targetDoc && this.targetDoc[DataSym]} 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} - rootSelected={returnFalse} + 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} @@ -193,8 +196,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) { @@ -267,8 +270,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; } }; @@ -278,7 +281,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(); }), @@ -301,7 +304,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); @@ -391,7 +393,6 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() { ); @undoBatch - @action lfg = (e: React.MouseEvent) => { e.stopPropagation(); // TODO: fix this bug @@ -406,7 +407,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() { @@ -455,8 +456,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 @@ -532,10 +533,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(); @@ -554,7 +555,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, }}> |