From 57d7db6b5dc20b22a450076965b938cf7dcd4bf2 Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> Date: Mon, 26 Oct 2020 01:44:58 +0800 Subject: Pres element selection + dragging items directly into presentation --- src/client/views/PropertiesView.tsx | 2 +- src/client/views/nodes/PresBox.tsx | 72 +++++++++++++++++-------------------- 2 files changed, 34 insertions(+), 40 deletions(-) (limited to 'src') diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index 0d4b5992b..4dea0ddaa 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -47,7 +47,7 @@ export class PropertiesView extends React.Component { @computed get selectedDoc() { return SelectionManager.SelectedSchemaDoc() || this.selectedDocumentView?.rootDoc; } @computed get selectedDocumentView() { if (SelectionManager.SelectedDocuments().length) return SelectionManager.SelectedDocuments()[0]; - if (PresBox.Instance?._selectedArray) return DocumentManager.Instance.getDocumentView(PresBox.Instance.rootDoc); + if (PresBox.Instance?._selectedArray.size) return DocumentManager.Instance.getDocumentView(PresBox.Instance.rootDoc); return undefined; } @computed get isPres(): boolean { diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index 22dd4ce65..67a3fce64 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -124,8 +124,7 @@ export class PresBox extends ViewBoxBaseComponent } @computed get selectedDocumentView() { if (SelectionManager.SelectedDocuments().length) return SelectionManager.SelectedDocuments()[0]; - if (this._selectedArray) return DocumentManager.Instance.getDocumentView(this.rootDoc); - return undefined; + if (this._selectedArray.size) return DocumentManager.Instance.getDocumentView(this.rootDoc); } @computed get isPres(): boolean { document.removeEventListener("keydown", PresBox.keyEventsWrapper, true); @@ -173,10 +172,6 @@ export class PresBox extends ViewBoxBaseComponent document.removeEventListener("keydown", PresBox.keyEventsWrapper, true); document.addEventListener("keydown", PresBox.keyEventsWrapper, true); PresBox.Instance = this; - console.log("PresBox.Instance: " + PresBox.Instance) - console.log("Active item title: " + this.activeItem.title) - console.log("ChildDocs length: " + this.childDocs.length) - console.log("rootDoc.title: " + this.rootDoc.title) } /** @@ -521,6 +516,7 @@ export class PresBox extends ViewBoxBaseComponent @action toggleExpandMode = () => { runInAction(() => this._expandBoolean = !this._expandBoolean); + this.rootDoc.expandBoolean = this._expandBoolean; this.childDocs.forEach((doc) => { doc.presExpandInlineButton = this._expandBoolean; }); @@ -609,23 +605,28 @@ export class PresBox extends ViewBoxBaseComponent addDocumentFilter = (doc: Doc | Doc[]) => { const docs = doc instanceof Doc ? [doc] : doc; docs.forEach((doc, i) => { - console.log(doc); - console.log(doc.title); if (doc.type === DocumentType.LABEL) { const audio = Cast(doc.annotationOn, Doc, null); if (audio) { - audio.aliasOf instanceof Doc; audio.presStartTime = NumCast(doc.audioStart); audio.presEndTime = NumCast(doc.audioEnd); audio.presDuration = NumCast(doc.audioEnd) - NumCast(doc.audioStart); TabDocView.PinDoc(audio, false, true); - setTimeout(() => this.removeDocument(doc), 1); + setTimeout(() => this.removeDocument(doc), 0); return false; } } else { - doc.aliasOf instanceof Doc && (doc.presentationTargetDoc = doc.aliasOf); - !this.childDocs.includes(doc) && (doc.presMovement = PresMovement.Zoom); - if (this._expandBoolean) doc.presExpandInlineButton = true; + if (!doc.aliasOf) { + const original = Doc.MakeAlias(doc); + TabDocView.PinDoc(original); + setTimeout(() => this.removeDocument(doc), 0); + return false; + } else { + doc.aliasOf instanceof Doc && (doc.presentationTargetDoc = doc.aliasOf); + doc.presMovement = PresMovement.Zoom; + doc.title = doc.title + " - Slide"; + if (this._expandBoolean) doc.presExpandInlineButton = true; + } } }); return true; @@ -669,7 +670,6 @@ export class PresBox extends ViewBoxBaseComponent @action selectElement = (doc: Doc) => { const context = Cast(doc.context, Doc, null); - console.log(context.type); this.gotoDocument(this.childDocs.indexOf(doc)); if (doc.presPinView || doc.presentationTargetDoc === this.layoutDoc.presCollection) setTimeout(() => this.updateCurrentPresentation(context), 0); else this.updateCurrentPresentation(context); @@ -754,7 +754,6 @@ export class PresBox extends ViewBoxBaseComponent case "Right": case "ArrowRight": if (this.itemIndex >= this.childDocs.length - 1) return; if (e.shiftKey) { // TODO: update to work properly - // console.log("Down: " + this.rootDoc._itemIndex, this.itemIndex, this.childDocs.length) this.rootDoc._itemIndex = NumCast(this.rootDoc._itemIndex) + 1; this._selectedArray.set(this.childDocs[this.rootDoc._itemIndex], undefined); } else { @@ -767,7 +766,6 @@ export class PresBox extends ViewBoxBaseComponent case "Left": case "ArrowLeft": if (this.itemIndex === 0) return; if (e.shiftKey) { // TODO: update to work properly - // console.log("Up: " + this.rootDoc._itemIndex, this.itemIndex, this.childDocs.length) this.rootDoc._itemIndex = NumCast(this.rootDoc._itemIndex) - 1; this._selectedArray.set(this.childDocs[this.rootDoc._itemIndex], undefined); } else { @@ -913,7 +911,7 @@ export class PresBox extends ViewBoxBaseComponent if (change) timeInMS += change; if (timeInMS < 100) timeInMS = 100; if (timeInMS > 10000) timeInMS = 10000; - this._selectedArray?.forEach((doc) => doc.presTransition = timeInMS); + Array.from(this._selectedArray.keys()).forEach((doc) => doc.presTransition = timeInMS); } // Converts seconds to ms and updates presDuration @@ -922,7 +920,7 @@ export class PresBox extends ViewBoxBaseComponent if (change) timeInMS += change; if (timeInMS < 100) timeInMS = 100; if (timeInMS > 20000) timeInMS = 20000; - this._selectedArray?.forEach((doc) => doc.presDuration = timeInMS); + Array.from(this._selectedArray.keys()).forEach((doc) => doc.presDuration = timeInMS); } /** @@ -930,7 +928,7 @@ export class PresBox extends ViewBoxBaseComponent */ @undoBatch updateMovement = action((movement: any, all?: boolean) => { - const array: any[] = all ? this.childDocs : this._selectedArray; + const array: any[] = all ? this.childDocs : Array.from(this._selectedArray.keys()); array.forEach((doc) => { switch (movement) { case PresMovement.Zoom: //Pan and zoom @@ -954,21 +952,21 @@ export class PresBox extends ViewBoxBaseComponent @action updateHideBefore = (activeItem: Doc) => { activeItem.presHideBefore = !activeItem.presHideBefore; - this._selectedArray?.forEach((doc) => doc.presHideBefore = activeItem.presHideBefore); + Array.from(this._selectedArray.keys()).forEach((doc) => doc.presHideBefore = activeItem.presHideBefore); } @undoBatch @action updateHideAfter = (activeItem: Doc) => { activeItem.presHideAfter = !activeItem.presHideAfter; - this._selectedArray?.forEach((doc) => doc.presHideAfter = activeItem.presHideAfter); + Array.from(this._selectedArray.keys()).forEach((doc) => doc.presHideAfter = activeItem.presHideAfter); } @undoBatch @action updateOpenDoc = (activeItem: Doc) => { activeItem.openDocument = !activeItem.openDocument; - this._selectedArray.forEach((doc) => { + Array.from(this._selectedArray.keys()).forEach((doc) => { doc.openDocument = activeItem.openDocument; }); } @@ -976,7 +974,7 @@ export class PresBox extends ViewBoxBaseComponent @undoBatch @action updateEffect = (effect: any, all?: boolean) => { - const array: any[] = all ? this.childDocs : this._selectedArray; + const array: any[] = all ? this.childDocs : Array.from(this._selectedArray.keys()); array.forEach((doc) => { const tagDoc = Cast(doc.presentationTargetDoc, Doc, null); switch (effect) { @@ -1046,8 +1044,8 @@ export class PresBox extends ViewBoxBaseComponent { this._batch = UndoManager.StartBatch("presTransition"); }} - onPointerUp={() => { if (this._batch) this._batch.end(); }} + onPointerDown={() => this._batch = UndoManager.StartBatch("presTransition")} + onPointerUp={() => this._batch?.end()} onChange={(e: React.ChangeEvent) => { e.stopPropagation(); this.setTransitionTime(e.target.value); @@ -1197,7 +1195,7 @@ export class PresBox extends ViewBoxBaseComponent : (null)} {this.panable || this.scrollable || this.targetDoc.type === DocumentType.COMPARISON ? 'Pinned view' : (null)}
-
{activeItem.presPinView ? "Turn off pin with view" : "Pin with current view"}
}>
{activeItem.presPinView ? "Turn off pin with view" : "Turn on pin with view"}
}>
{ activeItem.presPinView = !activeItem.presPinView; targetDoc.presPinView = activeItem.presPinView; @@ -1867,7 +1865,7 @@ export class PresBox extends ViewBoxBaseComponent
*/}
{"View paths"}
}> -
1 ? 1 : 0.3, color: this._pathBoolean ? '#5B9FDD' : 'white', width: isMini ? "100%" : undefined }} className={"toolbar-button"} onClick={this.childDocs.length > 1 ? this.viewPaths : undefined}> +
1 ? 1 : 0.3, color: this._pathBoolean ? PresColors.DarkBlue : 'white', width: isMini ? "100%" : undefined }} className={"toolbar-button"} onClick={this.childDocs.length > 1 ? this.viewPaths : undefined}>
@@ -1876,7 +1874,7 @@ export class PresBox extends ViewBoxBaseComponent
{this._expandBoolean ? "Minimize all" : "Expand all"}
}>
{/* */} @@ -1884,13 +1882,13 @@ export class PresBox extends ViewBoxBaseComponent
{presKeyEvents ? "Keys are active" : "Keys are not active - click anywhere on the presentation trail to activate keys"}
}> -
- +
+
{propTitle}
}>
- 0 ? '#5B9FDD' : 'white' }} /> + 0 ? PresColors.DarkBlue : 'white' }} />
@@ -1917,15 +1915,15 @@ export class PresBox extends ViewBoxBaseComponent } -
0 ? 1 : 0.3 }}> +
-
(this.childDocs.length > 0) && (this.layoutDoc.presStatus = "manual")}> +
(this.childDocs.length) && (this.layoutDoc.presStatus = "manual"))}>
200 ? "inline-flex" : "none" }}>  Present
{(mode === CollectionViewType.Carousel3D || isMini) ? (null) :
{ - if (this.childDocs.length > 0) this.presentTools = !this.presentTools; + if (this.childDocs.length) this.presentTools = !this.presentTools; }))}> {this.presentDropdown} @@ -2046,10 +2044,6 @@ export class PresBox extends ViewBoxBaseComponent render() { // calling this method for keyEvents this.isPres; - // console.log("ActivePres Title: " + Cast(Doc.UserDoc().activePresentation, Doc, null).title); - // for (const doc of this._selectedArray) { - // console.log(doc.title); - // } // needed to ensure that the childDocs are loaded for looking up fields this.childDocs.slice(); const mode = StrCast(this.rootDoc._viewType) as CollectionViewType; @@ -2057,7 +2051,7 @@ export class PresBox extends ViewBoxBaseComponent return CurrentUserUtils.OverlayDocs.includes(this.rootDoc) ?
-
{"Loop"}
}>
this.layoutDoc.presLoop = !this.layoutDoc.presLoop}>
 +
{"Loop"}
}>
this.layoutDoc.presLoop = !this.layoutDoc.presLoop}>
{ this.back(); if (this._presTimer) { clearTimeout(this._presTimer); this.layoutDoc.presStatus = PresStatus.Manual; } }}>
{this.layoutDoc.presStatus === PresStatus.Autoplay ? "Pause" : "Autoplay"}
}>
 -- cgit v1.2.3-70-g09d2