diff options
| author | bobzel <zzzman@gmail.com> | 2023-11-29 10:02:34 -0500 |
|---|---|---|
| committer | bobzel <zzzman@gmail.com> | 2023-11-29 10:02:34 -0500 |
| commit | ba3b3f6f261074bd3f35012bde8730f5d4a36905 (patch) | |
| tree | 6f6c7b141f8bc5881113378801d4b2940cfde36a /src/client/views/nodes/trails/PresBox.tsx | |
| parent | ac360607bee82f0fef769eada99dc0b3f85ae70a (diff) | |
numerous changes to fix bugs and to fix/remove old or hacky code. fixed doc dec resizing. moving this.rootDoc => this.Document . fixing template artifacts.
Diffstat (limited to 'src/client/views/nodes/trails/PresBox.tsx')
| -rw-r--r-- | src/client/views/nodes/trails/PresBox.tsx | 97 |
1 files changed, 45 insertions, 52 deletions
diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx index 789509784..bb0ed0943 100644 --- a/src/client/views/nodes/trails/PresBox.tsx +++ b/src/client/views/nodes/trails/PresBox.tsx @@ -75,7 +75,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { constructor(props: any) { super(props); if (!PresBox.navigateToDocScript) { - PresBox.navigateToDocScript = ScriptField.MakeFunction('navigateToDoc(self.presentation_targetDoc, self)')!; + PresBox.navigateToDocScript = ScriptField.MakeFunction('navigateToDoc(this.presentation_targetDoc, self)')!; } } @@ -114,16 +114,16 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { return StrCast(this.layoutDoc.presFieldKey, 'data'); } @computed get childDocs() { - return DocListCast(this.rootDoc[this.presFieldKey]); + return DocListCast(this.Document[this.presFieldKey]); } @computed get tagDocs() { return this.childDocs.map(doc => Cast(doc.presentation_targetDoc, Doc, null)); } @computed get itemIndex() { - return NumCast(this.rootDoc._itemIndex); + return NumCast(this.Document._itemIndex); } @computed get activeItem() { - return DocCast(this.childDocs[NumCast(this.rootDoc._itemIndex)]); + return DocCast(this.childDocs[NumCast(this.Document._itemIndex)]); } @computed get targetDoc() { return Cast(this.activeItem?.presentation_targetDoc, Doc, null); @@ -142,13 +142,13 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { } @computed get selectedDocumentView() { if (SelectionManager.Views().length) return SelectionManager.Views()[0]; - if (this.selectedArray.size) return DocumentManager.Instance.getDocumentView(this.rootDoc); + if (this.selectedArray.size) return DocumentManager.Instance.getDocumentView(this.Document); } @computed get isPres() { - return this.selectedDoc === this.rootDoc; + return this.selectedDoc === this.Document; } @computed get selectedDoc() { - return this.selectedDocumentView?.rootDoc; + return this.selectedDocumentView?.Document; } isActiveItemTarget = (layoutDoc: Doc) => this.activeItem?.presentation_targetDoc === layoutDoc; clearSelectedArray = () => this.selectedArray.clear(); @@ -170,7 +170,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { () => this.selectedDoc, selected => { document.removeEventListener('keydown', PresBox.keyEventsWrapper, true); - (this._presKeyEvents = selected === this.rootDoc) && document.addEventListener('keydown', PresBox.keyEventsWrapper, true); + (this._presKeyEvents = selected === this.Document) && document.addEventListener('keydown', PresBox.keyEventsWrapper, true); }, { fireImmediately: true } ); @@ -188,17 +188,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { ); this.props.setContentView?.(this); this._unmounting = false; - if (this.props.renderDepth > 0) { - runInAction(() => { - this.rootDoc._forceRenderEngine = computeTimelineLayout.name; - this.layoutDoc._gridGap = 0; - this.layoutDoc._yMargin = 0; - }); - } this.turnOffEdit(true); this._disposers.selection = reaction( () => SelectionManager.Views().slice(), - views => (!PresBox.Instance || views.some(view => view.props.Document === this.rootDoc)) && this.updateCurrentPresentation(), + views => (!PresBox.Instance || views.some(view => view.Document === this.Document)) && this.updateCurrentPresentation(), { fireImmediately: true } ); this._disposers.editing = reaction( @@ -213,7 +206,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { @action updateCurrentPresentation = (pres?: Doc) => { - Doc.ActivePresentation = pres ?? this.rootDoc; + Doc.ActivePresentation = pres ?? this.Document; PresBox.Instance = this; }; @@ -321,7 +314,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { if (progressiveReveal(false)) return true; if (this.childDocs[this.itemIndex + 1] !== undefined) { // Case 1: No more frames in current doc and next slide is defined, therefore move to next slide - const slides = DocListCast(this.rootDoc[StrCast(this.presFieldKey, 'data')]); + const slides = DocListCast(this.Document[StrCast(this.presFieldKey, 'data')]); const curLast = this.selectedArray.size ? Math.max(...Array.from(this.selectedArray).map(d => slides.indexOf(DocCast(d)))) : this.itemIndex; // before moving onto next slide, run the subroutines :) @@ -356,7 +349,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { // Case 2: There are no other frames so it should go to the previous slide prevSelected = Math.max(0, prevSelected - 1); this.nextSlide(prevSelected); - this.rootDoc._itemIndex = prevSelected; + this.Document._itemIndex = prevSelected; } else if (this.childDocs[this.itemIndex - 1] === undefined && this.layoutDoc.presLoop) { // Case 3: Pres loop is on so it should go to the last slide this.nextSlide(this.childDocs.length - 1); @@ -370,7 +363,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { public gotoDocument = action((index: number, from?: Doc, group?: boolean, finished?: () => void) => { Doc.UnBrushAllDocs(); if (index >= 0 && index < this.childDocs.length) { - this.rootDoc._itemIndex = index; + this.Document._itemIndex = index; if (from?.mediaStopTriggerList && this.layoutDoc.presentation_status !== PresStatus.Edit) { DocListCast(from.mediaStopTriggerList).forEach(this.stopTempMedia); } @@ -410,7 +403,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { playAnnotation = (anno: AudioField) => {}; @action static restoreTargetDocView(bestTargetView: Opt<DocumentView>, activeItem: Doc, transTime: number, pinDocLayout: boolean = BoolCast(activeItem.config_pinLayout), pinDataTypes?: pinDataTypes, targetDoc?: Doc) { - const bestTarget = bestTargetView?.rootDoc ?? (targetDoc?.layout_unrendered ? DocCast(targetDoc?.annotationOn) : targetDoc); + const bestTarget = bestTargetView?.Document ?? (targetDoc?.layout_unrendered ? DocCast(targetDoc?.annotationOn) : targetDoc); if (!bestTarget) return; let changed = false; if (pinDocLayout) { @@ -441,7 +434,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { const ffview = DocumentManager.Instance.getFirstDocumentView(context)?.CollectionFreeFormView; if (ffview?.childDocs) { PresBox.Instance._keyTimer = CollectionFreeFormView.gotoKeyframe(PresBox.Instance._keyTimer, ffview.childDocs, transTime); - ffview.rootDoc._currentFrame = NumCast(activeFrame); + ffview.layoutDoc._currentFrame = NumCast(activeFrame); } } } @@ -600,7 +593,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { }); setTimeout(() => Array.from(transitioned).forEach(action(doc => (doc._dataTransition = undefined))), transTime + 10); } - if ((pinDataTypes?.pannable || (!pinDataTypes && (activeItem.config_viewBounds !== undefined || activeItem.config_panX !== undefined || activeItem.config_viewScale !== undefined))) && !bestTarget._isGroup) { + if ((pinDataTypes?.pannable || (!pinDataTypes && (activeItem.config_viewBounds !== undefined || activeItem.config_panX !== undefined || activeItem.config_viewScale !== undefined))) && !bestTarget.isGroup) { const contentBounds = Cast(activeItem.config_viewBounds, listSpec('number')); if (contentBounds) { const viewport = { panX: (contentBounds[0] + contentBounds[2]) / 2, panY: (contentBounds[1] + contentBounds[3]) / 2, width: contentBounds[2] - contentBounds[0], height: contentBounds[3] - contentBounds[1] }; @@ -755,7 +748,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { const eleViewCache = Array.from(this._eleArray); const resetSelection = action(() => { if (!this.props.isSelected()) { - const presDocView = DocumentManager.Instance.getDocumentView(this.rootDoc); + const presDocView = DocumentManager.Instance.getDocumentView(this.Document); if (presDocView) SelectionManager.SelectView(presDocView, false); this.clearSelectedArray(); selViewCache.forEach(doc => this.addToSelectedArray(doc)); @@ -897,7 +890,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { } }); LightboxView.Instance.SetLightboxDoc(undefined); - Doc.RemFromMyOverlay(this.rootDoc); + Doc.RemFromMyOverlay(this.Document); return PresStatus.Edit; }; }; @@ -936,7 +929,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { // The function allows for expanding the view of pres on toggle @action toggleExpandMode = () => { runInAction(() => (this._expandBoolean = !this._expandBoolean)); - this.rootDoc.expandBoolean = this._expandBoolean; + this.Document.expandBoolean = this._expandBoolean; this.childDocs.forEach(doc => { doc.presentation_expandInlineButton = this._expandBoolean; }); @@ -986,16 +979,16 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { */ @action enterMinimize = () => { - this.updateCurrentPresentation(this.rootDoc); + 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.rootDoc, [pt[0] + (this.props.PanelWidth() - 250), pt[1] + 10]); + return PresBox.OpenPresMinimized(this.Document, [pt[0] + (this.props.PanelWidth() - 250), pt[1] + 10]); }; exitMinimize = () => { if (Doc.IsInMyOverlay(this.layoutDoc)) { - Doc.RemFromMyOverlay(this.rootDoc); - CollectionDockingView.AddSplit(this.rootDoc, OpenWhereMod.right); + Doc.RemFromMyOverlay(this.Document); + CollectionDockingView.AddSplit(this.Document, OpenWhereMod.right); } return PresStatus.Edit; }; @@ -1021,8 +1014,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { const type_collection = e.target.selectedOptions[0].value as CollectionViewType; this.layoutDoc.presFieldKey = this.fieldKey + (type_collection === CollectionViewType.Tree ? '-linearized' : ''); // pivot field may be set by the user in timeline view (or some other way) -- need to reset it here - [CollectionViewType.Tree || CollectionViewType.Stacking].includes(type_collection) && (this.rootDoc._pivotField = undefined); - this.rootDoc._type_collection = type_collection; + [CollectionViewType.Tree || CollectionViewType.Stacking].includes(type_collection) && (this.Document._pivotField = undefined); + this.Document._type_collection = type_collection; if (this.isTreeOrStack) { this.layoutDoc._gridGap = 0; } @@ -1083,7 +1076,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { return true; }; childLayoutTemplate = () => Docs.Create.PresElementBoxDocument(); - removeDocument = (doc: Doc) => Doc.RemoveDocFromList(this.rootDoc, this.fieldKey, doc); + 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; /** @@ -1123,7 +1116,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { @action selectPres = () => { - const presDocView = DocumentManager.Instance.getDocumentView(this.rootDoc); + const presDocView = DocumentManager.Instance.getDocumentView(this.Document); presDocView && SelectionManager.SelectView(presDocView, false); }; @@ -1139,7 +1132,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { if (noNav) { const index = this.childDocs.indexOf(doc); if (index >= 0 && index < this.childDocs.length) { - this.rootDoc._itemIndex = index; + this.Document._itemIndex = index; } } else { this.gotoDocument(this.childDocs.indexOf(doc), this.activeItem); @@ -1237,8 +1230,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { case 'ArrowRight': if (e.shiftKey && this.itemIndex < this.childDocs.length - 1) { // TODO: update to work properly - this.rootDoc._itemIndex = NumCast(this.rootDoc._itemIndex) + 1; - this.addToSelectedArray(this.childDocs[this.rootDoc._itemIndex]); + this.Document._itemIndex = NumCast(this.Document._itemIndex) + 1; + this.addToSelectedArray(this.childDocs[this.Document._itemIndex]); } else { this.next(); if (this._presTimer) { @@ -1254,8 +1247,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { case 'ArrowLeft': if (e.shiftKey && this.itemIndex !== 0) { // TODO: update to work properly - this.rootDoc._itemIndex = NumCast(this.rootDoc._itemIndex) - 1; - this.addToSelectedArray(this.childDocs[this.rootDoc._itemIndex]); + this.Document._itemIndex = NumCast(this.Document._itemIndex) - 1; + this.addToSelectedArray(this.childDocs[this.Document._itemIndex]); } else { this.back(); if (this._presTimer) { @@ -1640,8 +1633,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { let dataField = Doc.LayoutFieldKey(tagDoc); if (Cast(tagDoc[dataField], listSpec(Doc), null)?.filter(d => d instanceof Doc) === undefined) dataField = dataField + '_annotations'; - if (DocCast(activeItem.presentation_targetDoc).annotationOn) activeItem.data = ComputedField.MakeFunction(`self.presentation_targetDoc.annotationOn?.["${dataField}"]`); - else activeItem.data = ComputedField.MakeFunction(`self.presentation_targetDoc?.["${dataField}"]`); + if (DocCast(activeItem.presentation_targetDoc).annotationOn) activeItem.data = ComputedField.MakeFunction(`this.presentation_targetDoc.annotationOn?.["${dataField}"]`); + else activeItem.data = ComputedField.MakeFunction(`this.presentation_targetDoc?.["${dataField}"]`); }} checked={Cast(activeItem.presentation_indexed, 'number', null) !== undefined ? true : false} /> @@ -2221,7 +2214,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { const tab = tabMap && Array.from(tabMap).find(tab => tab.DashDoc.type === DocumentType.COL)?.DashDoc; const presCollection = DocumentManager.GetContextPath(this.activeItem).reverse().lastElement().presentation_targetDoc ?? tab; const data = Cast(presCollection?.data, listSpec(Doc)); - const config_data = Cast(this.rootDoc.data, listSpec(Doc)); + const config_data = Cast(this.Document.data, listSpec(Doc)); if (data && config_data) { data.push(doc); this.props.pinToPres(doc, {}); @@ -2297,11 +2290,11 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { @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 mode = StrCast(this.rootDoc._type_collection) as CollectionViewType; + const mode = StrCast(this.Document._type_collection) as CollectionViewType; const isMini: boolean = this.toolbarWidth <= 100; const activeColor = SettingsManager.userVariantColor; const inactiveColor = lightOrDark(SettingsManager.userBackgroundColor) === Colors.WHITE ? Colors.WHITE : SettingsManager.userBackgroundColor; - return mode === CollectionViewType.Carousel3D || Doc.IsInMyOverlay(this.rootDoc) ? null : ( + return mode === CollectionViewType.Carousel3D || Doc.IsInMyOverlay(this.Document) ? null : ( <div id="toolbarContainer" className={'presBox-toolbar'}> {/* <Tooltip title={<><div className="dash-tooltip">{"Add new slide"}</div></>}><div className={`toolbar-button ${this.newDocumentTools ? "active" : ""}`} onClick={action(() => this.newDocumentTools = !this.newDocumentTools)}> <FontAwesomeIcon icon={"plus"} /> @@ -2340,12 +2333,12 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { * presentPanel: The button to start the presentation / open minimized view of the presentation */ @computed get topPanel() { - const mode = StrCast(this.rootDoc._type_collection) as CollectionViewType; + const mode = StrCast(this.Document._type_collection) as CollectionViewType; const isMini: boolean = this.toolbarWidth <= 100; return ( <div - className={`presBox-buttons${Doc.IsInMyOverlay(this.rootDoc) ? ' inOverlay' : ''}`} - style={{ background: Doc.ActivePresentation === this.rootDoc ? Colors.LIGHT_BLUE : undefined, display: !this.rootDoc._chromeHidden ? 'none' : undefined }}> + className={`presBox-buttons${Doc.IsInMyOverlay(this.Document) ? ' inOverlay' : ''}`} + style={{ background: Doc.ActivePresentation === this.Document ? Colors.LIGHT_BLUE : undefined, display: !this.Document._chromeHidden ? 'none' : undefined }}> {isMini ? null : ( <select className="presBox-viewPicker" style={{ display: this.layoutDoc.presentation_status === 'edit' ? 'block' : 'none' }} onPointerDown={e => e.stopPropagation()} onChange={this.viewChanged} value={mode}> <option onPointerDown={StopEvent} value={CollectionViewType.Stacking}> @@ -2398,7 +2391,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: boolean = !this.layoutDoc.presLoop && this.itemIndex === 0; - const inOverlay = Doc.IsInMyOverlay(this.rootDoc); + const inOverlay = Doc.IsInMyOverlay(this.Document); // Case 1: There are still other frames and should go through all frames before going to next slide return ( <div className="presPanelOverlay" style={{ display: this.layoutDoc.presentation_status !== 'edit' ? 'inline-flex' : 'none' }}> @@ -2569,7 +2562,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { render() { // needed to ensure that the childDocs are loaded for looking up fields this.childDocs.slice(); - const mode = StrCast(this.rootDoc._type_collection) as CollectionViewType; + const mode = StrCast(this.Document._type_collection) as CollectionViewType; const presEnd = !this.layoutDoc.presLoop && this.itemIndex === this.childDocs.length - 1 && @@ -2579,7 +2572,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { <div className="miniPres" onClick={e => e.stopPropagation()} onPointerEnter={action(e => (this._forceKeyEvents = true))}> <div className="presPanelOverlay" - style={{ display: 'inline-flex', height: 30, background: Doc.ActivePresentation === this.rootDoc ? 'green' : '#323232', top: 0, zIndex: 3000000, boxShadow: this._presKeyEvents ? '0 0 0px 3px ' + Colors.MEDIUM_BLUE : undefined }}> + style={{ display: 'inline-flex', height: 30, background: Doc.ActivePresentation === this.Document ? 'green' : '#323232', top: 0, zIndex: 3000000, boxShadow: this._presKeyEvents ? '0 0 0px 3px ' + Colors.MEDIUM_BLUE : undefined }}> <Tooltip title={<div className="dash-tooltip">{'Loop'}</div>}> <div className="presPanel-button" @@ -2617,7 +2610,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { </div> </div> ) : ( - <div className="presBox-cont" style={{ minWidth: Doc.IsInMyOverlay(this.rootDoc) ? PresBox.minimizedWidth : undefined }}> + <div className="presBox-cont" style={{ minWidth: Doc.IsInMyOverlay(this.Document) ? PresBox.minimizedWidth : undefined }}> {this.topPanel} {this.toolbar} {this.newDocumentToolbarDropdown} @@ -2637,7 +2630,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() { childOpacity={returnOne} childClickScript={PresBox.navigateToDocScript} childLayoutTemplate={this.childLayoutTemplate} - childXPadding={Doc.IsComicStyle(this.rootDoc) ? 20 : undefined} + childXPadding={Doc.IsComicStyle(this.Document) ? 20 : undefined} filterAddDocument={this.addDocumentFilter} removeDocument={returnFalse} dontRegisterView={true} |
