diff options
Diffstat (limited to 'src/client/views/nodes/trails')
| -rw-r--r-- | src/client/views/nodes/trails/PresBox.tsx | 61 | ||||
| -rw-r--r-- | src/client/views/nodes/trails/PresElementBox.tsx | 64 |
2 files changed, 61 insertions, 64 deletions
diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx index 1317ca814..a224ec7fa 100644 --- a/src/client/views/nodes/trails/PresBox.tsx +++ b/src/client/views/nodes/trails/PresBox.tsx @@ -36,9 +36,6 @@ import { FieldView, FieldViewProps } from '../FieldView'; import { ScriptingBox } from '../ScriptingBox'; import './PresBox.scss'; import { PresEffect, PresEffectDirection, PresMovement, PresStatus } from './PresEnums'; -import _ = require('lodash'); -const { Howl } = require('howler'); - export interface pinDataTypes { scrollable?: boolean; dataviz?: number[]; @@ -156,7 +153,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { addToSelectedArray = action((doc: Doc) => this.selectedArray.add(doc)); removeFromSelectedArray = action((doc: Doc) => this.selectedArray.delete(doc)); - @action componentWillUnmount() { this._unmounting = true; if (this._presTimer) clearTimeout(this._presTimer); @@ -187,7 +183,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { }, { fireImmediately: true } ); - this.props.setContentView?.(this); + this._props.setContentView?.(this); this._unmounting = false; this.turnOffEdit(true); this._disposers.selection = reaction( @@ -603,7 +599,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { const dv = DocumentManager.Instance.getDocumentView(bestTarget); if (dv) { changed = true; - const computedScale = NumCast(activeItem.config_zoom, 1) * Math.min(dv.props.PanelWidth() / viewport.width, dv.props.PanelHeight() / viewport.height); + const computedScale = NumCast(activeItem.config_zoom, 1) * Math.min(dv._props.PanelWidth() / viewport.width, dv._props.PanelHeight() / viewport.height); activeItem.presentation_movement === PresMovement.Zoom && (bestTarget._freeform_scale = computedScale); dv.ComponentView?.brushView?.(viewport, transTime, 2500); } @@ -748,7 +744,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { const dragViewCache = Array.from(this._dragArray); const eleViewCache = Array.from(this._eleArray); const resetSelection = action(() => { - if (!this.props.isSelected()) { + if (!this._props.isSelected()) { const presDocView = DocumentManager.Instance.getDocumentView(this.Document); if (presDocView) SelectionManager.SelectView(presDocView, false); this.clearSelectedArray(); @@ -982,9 +978,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { enterMinimize = () => { this.updateCurrentPresentation(this.Document); clearTimeout(this._presTimer); - const pt = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0); - this.props.removeDocument?.(this.layoutDoc); - return PresBox.OpenPresMinimized(this.Document, [pt[0] + (this.props.PanelWidth() - 250), pt[1] + 10]); + const pt = this._props.ScreenToLocalTransform().inverse().transformPoint(0, 0); + this._props.removeDocument?.(this.layoutDoc); + return PresBox.OpenPresMinimized(this.Document, [pt[0] + (this._props.PanelWidth() - 250), pt[1] + 10]); }; exitMinimize = () => { if (Doc.IsInMyOverlay(this.layoutDoc)) { @@ -1052,7 +1048,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { return StrCast(activeItem.presentation_movement); }); - whenChildContentsActiveChanged = action((isActive: boolean) => this.props.whenChildContentsActiveChanged((this._isChildActive = isActive))); + whenChildContentsActiveChanged = action((isActive: boolean) => this._props.whenChildContentsActiveChanged((this._isChildActive = isActive))); // For dragging documents into the presentation trail addDocumentFilter = (docs: Doc[]) => { docs.forEach((doc, i) => { @@ -1063,7 +1059,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { audio.config_clipStart = NumCast(doc._timecodeToShow /* audioStart */, NumCast(doc._timecodeToShow /* videoStart */)); audio.config_clipEnd = NumCast(doc._timecodeToHide /* audioEnd */, NumCast(doc._timecodeToHide /* videoEnd */)); audio.presentation_duration = audio.config_clipStart - audio.config_clipEnd; - this.props.pinToPres(audio, { audioRange: true }); + this._props.pinToPres(audio, { audioRange: true }); setTimeout(() => this.removeDocument(doc), 0); return false; } @@ -1079,8 +1075,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { childLayoutTemplate = () => Docs.Create.PresElementBoxDocument(); removeDocument = (doc: Doc) => Doc.RemoveDocFromList(this.Document, this.fieldKey, doc); - getTransform = () => this.props.ScreenToLocalTransform().translate(-5, -65); // listBox padding-left and pres-box-cont minHeight - panelHeight = () => this.props.PanelHeight() - 40; + getTransform = () => this._props.ScreenToLocalTransform().translate(-5, -65); // listBox padding-left and pres-box-cont minHeight + panelHeight = () => this._props.PanelHeight() - 40; /** * For sorting the array so that the order is maintained when it is dropped. */ @@ -1313,7 +1309,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { } else if (doc.config_pinView && presCollection === tagDoc && dv) { // Case B: Document is presPinView and is presCollection const scale = 1 / NumCast(doc.config_viewScale); - const viewBounds = NumListCast(doc.config_viewBounds, [0, 0, dv.props.PanelWidth(), dv.props.PanelHeight()]); + const viewBounds = NumListCast(doc.config_viewBounds, [0, 0, dv._props.PanelWidth(), dv._props.PanelHeight()]); const height = (viewBounds[3] - viewBounds[1]) * scale; const width = (viewBounds[2] - viewBounds[0]) * scale; const indWidth = width / 10; @@ -1433,46 +1429,39 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { updateMovement = action((movement: PresMovement, all?: boolean) => (all ? this.childDocs : this.selectedArray).forEach(doc => (doc.presentation_movement = movement))); @undoBatch - @action updateHideBefore = (activeItem: Doc) => { activeItem.presentation_hideBefore = !activeItem.presentation_hideBefore; this.selectedArray.forEach(doc => (doc.presentation_hideBefore = activeItem.presentation_hideBefore)); }; @undoBatch - @action updateHide = (activeItem: Doc) => { activeItem.presentation_hide = !activeItem.presentation_hide; this.selectedArray.forEach(doc => (doc.presentation_hide = activeItem.presentation_hide)); }; @undoBatch - @action updateHideAfter = (activeItem: Doc) => { activeItem.presentation_hideAfter = !activeItem.presentation_hideAfter; this.selectedArray.forEach(doc => (doc.presentation_hideAfter = activeItem.presentation_hideAfter)); }; @undoBatch - @action updateOpenDoc = (activeItem: Doc) => { activeItem.presentation_openInLightbox = !activeItem.presentation_openInLightbox; this.selectedArray.forEach(doc => (doc.presentation_openInLightbox = activeItem.presentation_openInLightbox)); }; @undoBatch - @action updateEaseFunc = (activeItem: Doc) => { activeItem.presEaseFunc = activeItem.presEaseFunc === 'linear' ? 'ease' : 'linear'; this.selectedArray.forEach(doc => (doc.presEaseFunc = activeItem.presEaseFunc)); }; @undoBatch - @action updateEffectDirection = (effect: PresEffectDirection, all?: boolean) => (all ? this.childDocs : this.selectedArray).forEach(doc => (doc.presentation_effectDirection = effect)); @undoBatch - @action updateEffect = (effect: PresEffect, bullet: boolean, all?: boolean) => (all ? this.childDocs : this.selectedArray).forEach(doc => (bullet ? (doc.presBulletEffect = effect) : (doc.presentation_effect = effect))); static _sliderBatch: any; @@ -1505,7 +1494,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { }; @undoBatch - @action applyTo = (array: Doc[]) => { this.updateMovement(this.activeItem.presentation_movement as PresMovement, true); this.updateEffect(this.activeItem.presentation_effect as PresEffect, false, true); @@ -2219,10 +2207,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { const config_data = Cast(this.Document.data, listSpec(Doc)); if (data && config_data) { data.push(doc); - this.props.pinToPres(doc, {}); + this._props.pinToPres(doc, {}); this.gotoDocument(this.childDocs.length, this.activeItem); } else { - this.props.addDocTab(doc, OpenWhere.addRight); + this._props.addDocTab(doc, OpenWhere.addRight); } } }; @@ -2283,15 +2271,15 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { @computed get toolbarWidth(): number { - return this.props.PanelWidth(); + return this._props.PanelWidth(); } @action - toggleProperties = () => (SettingsManager.propertiesWidth = SettingsManager.propertiesWidth > 0 ? 0 : 250); + toggleProperties = () => (SettingsManager.Instance.propertiesWidth = SettingsManager.Instance.propertiesWidth > 0 ? 0 : 250); @computed get toolbar() { - const propIcon = SettingsManager.propertiesWidth > 0 ? 'angle-double-right' : 'angle-double-left'; - const propTitle = SettingsManager.propertiesWidth > 0 ? 'Close Presentation Panel' : 'Open Presentation Panel'; + const propIcon = SettingsManager.Instance.propertiesWidth > 0 ? 'angle-double-right' : 'angle-double-left'; + const propTitle = SettingsManager.Instance.propertiesWidth > 0 ? 'Close Presentation Panel' : 'Open Presentation Panel'; const mode = StrCast(this.Document._type_collection) as CollectionViewType; const isMini: boolean = this.toolbarWidth <= 100; const activeColor = SettingsManager.userVariantColor; @@ -2320,7 +2308,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { </Tooltip> <Tooltip title={<div className="dash-tooltip">{propTitle}</div>}> <div className="toolbar-button" style={{ position: 'absolute', right: 4, fontSize: 16 }} onClick={this.toggleProperties}> - <FontAwesomeIcon className={'toolbar-thumbtack'} icon={propIcon} style={{ color: SettingsManager.propertiesWidth > 0 ? activeColor : inactiveColor }} /> + <FontAwesomeIcon className={'toolbar-thumbtack'} icon={propIcon} style={{ color: SettingsManager.Instance.propertiesWidth > 0 ? activeColor : inactiveColor }} /> </div> </Tooltip> </> @@ -2366,7 +2354,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { } })}> <FontAwesomeIcon icon={'play-circle'} /> - <div style={{ display: this.props.PanelWidth() > 200 ? 'inline-flex' : 'none' }}> Present</div> + <div style={{ display: this._props.PanelWidth() > 200 ? 'inline-flex' : 'none' }}> Present</div> </div> {mode === CollectionViewType.Carousel3D || isMini ? null : ( <div @@ -2476,12 +2464,12 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { <b>1</b> </div> </Tooltip> - <div className="presPanel-button-text" onClick={() => this.gotoDocument(0, this.activeItem)} style={{ display: inOverlay || this.props.PanelWidth() > 250 ? 'inline-flex' : 'none' }}> + <div className="presPanel-button-text" onClick={() => this.gotoDocument(0, this.activeItem)} style={{ display: inOverlay || this._props.PanelWidth() > 250 ? 'inline-flex' : 'none' }}> {inOverlay ? '' : 'Slide'} {this.itemIndex + 1} {this.activeItem?.presentation_indexed !== undefined ? `(${this.activeItem.presentation_indexed}/${this.progressivizedItems(this.activeItem)?.length})` : ''} / {this.childDocs.length} </div> <div className="presPanel-divider"></div> - {this.props.PanelWidth() > 250 ? ( + {this._props.PanelWidth() > 250 ? ( <div className="presPanel-button-text" onClick={undoBatch( @@ -2527,7 +2515,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { }; @undoBatch - @action exitClicked = () => { this.layoutDoc.presentation_status = this._exitTrail?.() ?? this.exitMinimize(); clearTimeout(this._presTimer); @@ -2570,7 +2557,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { this.itemIndex === this.childDocs.length - 1 && (this.activeItem.presentation_indexed === undefined || NumCast(this.activeItem.presentation_indexed) === (this.progressivizedItems(this.activeItem)?.length ?? 0)); const presStart = !this.layoutDoc.presLoop && this.itemIndex === 0; - return this.props.addDocTab === returnFalse ? ( // bcz: hack!! - addDocTab === returnFalse only when this is being rendered by the OverlayView which means the doc is a mini player + return this._props.addDocTab === returnFalse ? ( // bcz: hack!! - addDocTab === returnFalse only when this is being rendered by the OverlayView which means the doc is a mini player <div className="miniPres" onClick={e => e.stopPropagation()} onPointerEnter={action(e => (this._forceKeyEvents = true))}> <div className="presPanelOverlay" @@ -2620,8 +2607,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { <div className="Slide"> {mode !== CollectionViewType.Invalid ? ( <CollectionView - {...this.props} - PanelWidth={this.props.PanelWidth} + {...this._props} + PanelWidth={this._props.PanelWidth} PanelHeight={this.panelHeight} childIgnoreNativeSize={true} moveDocument={returnFalse} 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, }}> |