From 917deb0c0d73997f4ffa465e75ac05fdca7a8519 Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> Date: Wed, 5 Aug 2020 01:21:44 +0800 Subject: pres elements --- .../collectionFreeForm/PropertiesView.tsx | 260 ++++++++---- src/client/views/nodes/AudioBox.tsx | 9 +- src/client/views/nodes/PresBox.scss | 1 + src/client/views/nodes/PresBox.tsx | 445 ++++++++------------- .../views/presentationview/PresElementBox.tsx | 17 +- 5 files changed, 365 insertions(+), 367 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index 3e8404874..1f66d4144 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -27,6 +27,8 @@ import { ColorState, SketchPicker } from "react-color"; import AntimodeMenu from "../../AntimodeMenu"; import "./FormatShapePane.scss"; import { discovery_v1 } from "googleapis"; +import { PresBox } from "../../nodes/PresBox"; +import { DocumentManager } from "../../../util/DocumentManager"; interface PropertiesViewProps { @@ -45,8 +47,14 @@ export class PropertiesView extends React.Component { @computed get selectedDocumentView() { if (SelectionManager.SelectedDocuments().length) { return SelectionManager.SelectedDocuments()[0]; + } else if (PresBox.Instance._selectedArray.length >= 1) { + return DocumentManager.Instance.getDocumentView(PresBox.Instance.rootDoc); } else { return undefined; } } + @computed get isPres(): boolean { + if (this.selectedDoc?.type === DocumentType.PRES) return true; + return false; + } @computed get selectedDoc() { return this.selectedDocumentView?.rootDoc; } @computed get dataDoc() { return this.selectedDocumentView?.dataDoc; } @@ -58,6 +66,12 @@ export class PropertiesView extends React.Component { @observable openLayout: boolean = true; @observable openAppearance: boolean = true; @observable openTransform: boolean = true; + //Pres Trails booleans: + @observable openAddSlide: boolean = true; + @observable openPresentationTools: boolean = true; + @observable openPresTransitions: boolean = true; + @observable openPresProgressivize: boolean = true; + @observable openSlideOptions: boolean = true; @computed get isInk() { return this.selectedDoc?.type === DocumentType.INK; } @@ -732,7 +746,7 @@ export class PropertiesView extends React.Component { render() { - if (!this.selectedDoc) { + if (!this.selectedDoc && !this.isPres) { return
No Document Selected @@ -745,106 +759,192 @@ export class PropertiesView extends React.Component { const novice = Doc.UserDoc().noviceMode; - return
-
- Properties + if (this.selectedDoc && !this.isPres) { + return
+
+ Properties
- + +
-
-
- {this.editableTitle} -
-
-
runInAction(() => { this.openActions = !this.openActions; })} - style={{ backgroundColor: this.openActions ? "black" : "" }}> - Actions +
+ {this.editableTitle} +
+
+
runInAction(() => { this.openActions = !this.openActions; })} + style={{ backgroundColor: this.openActions ? "black" : "" }}> + Actions
- + +
+ {!this.openActions ? (null) : +
+ +
}
- {!this.openActions ? (null) : -
- -
} -
-
-
runInAction(() => { this.openSharing = !this.openSharing; })} - style={{ backgroundColor: this.openSharing ? "black" : "" }}> - Sharing {"&"} Permissions +
+
runInAction(() => { this.openSharing = !this.openSharing; })} + style={{ backgroundColor: this.openSharing ? "black" : "" }}> + Sharing {"&"} Permissions
- + +
+ {!this.openSharing ? (null) : +
+ {this.sharingTable} +
}
- {!this.openSharing ? (null) : -
- {this.sharingTable} -
} -
- {!this.isInk ? (null) : -
-
runInAction(() => { this.openAppearance = !this.openAppearance; })} - style={{ backgroundColor: this.openAppearance ? "black" : "" }}> - Appearance + {!this.isInk ? (null) : +
+
runInAction(() => { this.openAppearance = !this.openAppearance; })} + style={{ backgroundColor: this.openAppearance ? "black" : "" }}> + Appearance
- + +
-
- {!this.openAppearance ? (null) : -
- {this.appearanceEditor} -
} -
} + {!this.openAppearance ? (null) : +
+ {this.appearanceEditor} +
} +
} - {this.isInk ?
-
runInAction(() => { this.openTransform = !this.openTransform; })} - style={{ backgroundColor: this.openTransform ? "black" : "" }}> - Transform + {this.isInk ?
+
runInAction(() => { this.openTransform = !this.openTransform; })} + style={{ backgroundColor: this.openTransform ? "black" : "" }}> + Transform
- + +
-
- {this.openTransform ?
- {this.transformEditor} + {this.openTransform ?
+ {this.transformEditor} +
: null}
: null} -
: null} - -
-
runInAction(() => { this.openFields = !this.openFields; })} - style={{ backgroundColor: this.openFields ? "black" : "" }}> -
- Fields {"&"} Tags + +
+
runInAction(() => { this.openFields = !this.openFields; })} + style={{ backgroundColor: this.openFields ? "black" : "" }}> +
+ Fields {"&"} Tags
- + +
+ {!novice && this.openFields ?
+ {this.fieldsCheckbox} +
Layout
+
: null} + {!this.openFields ? (null) : +
+ {novice ? this.noviceFields : this.expandedField} +
}
- {!novice && this.openFields ?
- {this.fieldsCheckbox} -
Layout
-
: null} - {!this.openFields ? (null) : -
- {novice ? this.noviceFields : this.expandedField} -
} -
-
-
runInAction(() => { this.openLayout = !this.openLayout; })} - style={{ backgroundColor: this.openLayout ? "black" : "" }}> - Layout +
+
runInAction(() => { this.openLayout = !this.openLayout; })} + style={{ backgroundColor: this.openLayout ? "black" : "" }}> + Layout
runInAction(() => { this.openLayout = !this.openLayout; })}> - + +
+ {this.openLayout ?
{this.layoutPreview}
: null}
- {this.openLayout ?
{this.layoutPreview}
: null} -
-
; +
; + } + if (this.isPres) { + return
+
+ Presentation Toolbar +
+ +
+
+
+ {this.editableTitle} +
+ {PresBox.Instance._selectedArray.length} selected +
+ {PresBox.Instance.listOfSelected} +
+
+
+
+
runInAction(() => { this.openAddSlide = !this.openAddSlide; })} + style={{ backgroundColor: this.openAddSlide ? "black" : "" }}> +     Add new slide +
+ +
+
+ {this.openAddSlide ?
+ {PresBox.Instance.newDocumentDropdown} +
: null} +
+
+
runInAction(() => { this.openPresTransitions = !this.openPresTransitions; })} + style={{ backgroundColor: this.openPresTransitions ? "black" : "" }}> +     Transitions +
+ +
+
+ {this.openPresTransitions ?
+ {PresBox.Instance.transitionDropdown} +
: null} +
+
+
runInAction(() => { this.openPresProgressivize = !this.openPresProgressivize; })} + style={{ backgroundColor: this.openPresProgressivize ? "black" : "" }}> +     Progressivize +
+ +
+
+ {this.openPresProgressivize ?
+ {PresBox.Instance.progressivizeDropdown} +
: null} +
+
+
runInAction(() => { this.openSlideOptions = !this.openSlideOptions; })} + style={{ backgroundColor: this.openSlideOptions ? "black" : "" }}> +   {PresBox.Instance.stringType} options +
+ +
+
+ {this.openSlideOptions ?
+ {PresBox.Instance.optionsDropdown} +
: null} +
+
+
runInAction(() => { this.openSharing = !this.openSharing; })} + style={{ backgroundColor: this.openSharing ? "black" : "" }}> + Sharing {"&"} Permissions +
+ +
+
+ {this.openSharing ?
+ {this.sharingTable} +
: null} +
+
; + } } } \ No newline at end of file diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index 5c921cea4..dba92faae 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -21,6 +21,7 @@ import { Docs, DocUtils } from "../../documents/Documents"; import { ComputedField } from "../../../fields/ScriptField"; import { Networking } from "../../Network"; import { LinkAnchorBox } from "./LinkAnchorBox"; +import { signedCookie } from "cookie-parser"; // testing testing @@ -43,7 +44,7 @@ const AudioDocument = makeInterface(documentSchema, audioSchema); export class AudioBox extends ViewBoxBaseComponent(AudioDocument) { public static LayoutString(fieldKey: string) { return FieldView.LayoutString(AudioBox, fieldKey); } public static Enabled = false; - + static Instance: AudioBox; _linkPlayDisposer: IReactionDisposer | undefined; _reactionDisposer: IReactionDisposer | undefined; _scrubbingDisposer: IReactionDisposer | undefined; @@ -51,12 +52,14 @@ export class AudioBox extends ViewBoxBaseComponent { runInAction(() => AudioBox._scrubTime = 0); runInAction(() => AudioBox._scrubTime = timeInMillisFrom1970); }; - @computed get recordingStart() { return Cast(this.dataDoc[this.props.fieldKey + "-recordingStart"], DateField)?.date.getTime(); } async slideTemplate() { return (await Cast((await Cast(Doc.UserDoc().slidesBtn, Doc) as Doc).dragFactory, Doc) as Doc); } diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss index 45c6d33b8..089f69873 100644 --- a/src/client/views/nodes/PresBox.scss +++ b/src/client/views/nodes/PresBox.scss @@ -667,6 +667,7 @@ height: 55px; min-width: 90px; width: 90px; + overflow: hidden; background-color: white; border: solid darkgrey 1px; display: grid; diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index 0a73106a3..2389d3875 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -33,6 +33,7 @@ import { translate } from "googleapis/build/src/apis/translate"; import { DragManager, dropActionType } from "../../util/DragManager"; import { actionAsync } from "mobx-utils"; import { SelectionManager } from "../../util/SelectionManager"; +import { AudioBox } from "./AudioBox"; type PresBoxSchema = makeInterface<[typeof documentSchema]>; const PresBoxDocument = makeInterface(documentSchema); @@ -90,6 +91,8 @@ export class PresBox extends ViewBoxBaseComponent Doc.UserDoc().activePresentation = this.rootDoc; } + @observable _moveOnFromAudio: boolean = false; + @undoBatch @action next = () => { @@ -106,9 +109,18 @@ export class PresBox extends ViewBoxBaseComponent presTargetDoc.currentFrame = curFrame + 1; if (presTargetDoc.zoomProgressivize) this.zoomProgressivizeNext(presTargetDoc); // Case 2: No more frames in current doc and next slide is defined, therefore move to next slide + } else if ((presTargetDoc.type === DocumentType.VID || presTargetDoc.type === DocumentType.AUDIO) && !this._moveOnFromAudio) { + if (presTargetDoc.type === DocumentType.AUDIO) { + AudioBox.Instance.playFrom(0); + this._moveOnFromAudio = true; + } + if (presTargetDoc.type === DocumentType.VID) { + this._moveOnFromAudio = true; + } } else if (this.childDocs[this.itemIndex + 1] !== undefined) { const nextSelected = this.itemIndex + 1; this.gotoDocument(nextSelected, this.itemIndex); + this._moveOnFromAudio = false; } } @@ -185,73 +197,100 @@ export class PresBox extends ViewBoxBaseComponent @action - onHideDocumentUntilPressClick = () => { + onHideDocument = () => { this.childDocs.forEach((doc, index) => { const curDoc = Cast(doc, Doc, null); const tagDoc = Cast(curDoc.presentationTargetDoc, Doc, null); - if (tagDoc.presEffect === 'None' || !tagDoc.presEffect) { - tagDoc.opacity = 1; - } else { - if (index <= this.itemIndex) { + if (tagDoc) tagDoc.opacity = 1; + if (curDoc.presHideTillShownButton) { + console.log("-------------hide before---------------"); + console.log("this.itemIndex: " + this.itemIndex); + console.log("index: " + index) + if (index > this.itemIndex) { + tagDoc.opacity = 0; + } else if (!curDoc.presHideAfterButton) { tagDoc.opacity = 1; - } else { + } + } + if (curDoc.presHideAfterButton) { + console.log("-------------hide after---------------"); + console.log("this.itemIndex: " + (this.itemIndex + 1)); + console.log("index: " + (index + 1)) + if (index < this.itemIndex) { tagDoc.opacity = 0; + } else if (!curDoc.presHideTillShownButton) { + tagDoc.opacity = 1; } } }); } - /** - * This is the method that checks for the actions that need to be performed - * before the document has been presented, which involves 3 button options: - * Hide Until Presented, Hide After Presented, Fade After Presented - */ @action - hideDocumentInPres = () => { - this.updateCurrentPresentation(); - this.childDocs.forEach((doc, i) => { - const tagDoc = Cast(doc.presentationTargetDoc, Doc, null); - console.log("HB: " + doc.presHideTillShownButton); - console.log("HA: " + doc.presHideAfterButton); - if (doc.presHideTillShownButton) { - if (i < this.itemIndex) { - console.log(i + 1 + "hide before"); - tagDoc.opacity = 0; - console.log(tagDoc.opacity); - } else { - tagDoc.opacity = 1; - } - } - if (doc.presHideAfterButton) { - if (i > this.itemIndex) { - console.log(i + 1 + "hide after"); + onHideAfterPresClick = () => { + this.childDocs.forEach((doc, index) => { + const curDoc = Cast(doc, Doc, null); + const tagDoc = Cast(curDoc.presentationTargetDoc, Doc, null); + if (curDoc.presHideAfterButton) { + if (index < this.itemIndex) { tagDoc.opacity = 0; - console.log(tagDoc.opacity); - } else { + } else if (index = this.itemIndex) { tagDoc.opacity = 1; } } }); } + /** + * This is the method that checks for the actions that need to be performed + * before the document has been presented, which involves 3 button options: + * Hide Until Presented, Hide After Presented, Fade After Presented + */ + // @action + // hideDocumentInPres = () => { + // this.updateCurrentPresentation(); + // this.childDocs.forEach((doc, i) => { + // const tagDoc = Cast(doc.presentationTargetDoc, Doc, null); + // console.log("HB: " + doc.presHideTillShownButton); + // console.log("HA: " + doc.presHideAfterButton); + // if (doc.presHideTillShownButton) { + // if (i < this.itemIndex) { + // console.log(i + 1 + "hide before"); + // tagDoc.opacity = 0; + // console.log(tagDoc.opacity); + // } else { + // tagDoc.opacity = 1; + // } + // } + // if (doc.presHideAfterButton) { + // if (i > this.itemIndex) { + // console.log(i + 1 + "hide after"); + // tagDoc.opacity = 0; + // console.log(tagDoc.opacity); + // } else { + // tagDoc.opacity = 1; + // } + // } + // }); + // } + /** * This is the method that checks for the actions that need to be performed * after the document has been presented, which involves 3 button options: * Hide Until Presented, Hide After Presented, Fade After Presented */ - showAfterPresented = (index: number) => { - this.updateCurrentPresentation(); - this.childDocs.forEach((doc, ind) => { - const presTargetDoc = doc.presentationTargetDoc as Doc; - //the order of cases is aligned based on priority - if (doc.presHideTillShownButton && ind <= index) { - presTargetDoc.opacity = 1; - } - if (doc.presHideAfterButton && ind < index) { - presTargetDoc.opacity = 0; - } - }); - } + // showAfterPresented = (index: number) => { + // this.updateCurrentPresentation(); + // this.childDocs.forEach((doc, ind) => { + // const presTargetDoc = doc.presentationTargetDoc as Doc; + // //the order of cases is aligned based on priority + // if (doc.presHideTillShownButton && ind <= index) { + // presTargetDoc.opacity = 1; + // } + // if (doc.presHideAfterButton && ind < index) { + // presTargetDoc.opacity = 0; + // } + // }); + // } /** * This method makes sure that cursor navigates to the element that @@ -264,6 +303,8 @@ export class PresBox extends ViewBoxBaseComponent const srcContext = await DocCastAsync(targetDoc.context); const presCollection = Cast(this.layoutDoc.presCollection, Doc, null); const collectionDocView = presCollection ? await DocumentManager.Instance.getDocumentView(presCollection) : undefined; + this.turnOffEdit(); + if (this.itemIndex >= 0) { if (targetDoc) { if (srcContext) this.layoutDoc.presCollection = srcContext; @@ -272,12 +313,21 @@ export class PresBox extends ViewBoxBaseComponent if (srcContext) console.log("NC: " + srcContext.title); if (presCollection) console.log("PC: " + presCollection.title); if (collectionDocView) { - if (srcContext && srcContext !== presCollection) { - console.log("Case 1: new srcContext inside of current collection so add a new tab to the current pres collection"); - console.log(collectionDocView); - collectionDocView.props.addDocTab(srcContext, "inPlace"); + if (activeItem.openDocument) { + collectionDocView.props.addDocTab(activeItem, "inPlace"); + } else if (srcContext && srcContext !== presCollection) { + if (activeItem.openDocument) { + collectionDocView.props.addDocTab(activeItem, "inPlace"); + } else { + console.log("Case 1: new srcContext inside of current collection so add a new tab to the current pres collection"); + console.log(collectionDocView); + collectionDocView.props.addDocTab(srcContext, "inPlace"); + } } } + if (targetDoc.presWebsiteData) { + targetDoc.data = targetDoc.presWebsiteData; + } // else if (srcContext) { // console.log("Case 2: srcContext - not open and collection containing this document exists, so open collection that contains it and then await zooming in on document"); // this.props.addDocTab(srcContext, "onRight"); @@ -290,7 +340,9 @@ export class PresBox extends ViewBoxBaseComponent const willZoom = false; //docToJump stayed same meaning, it was not in the group or was the last element in the group - if (docToJump === curDoc) { + if (targetDoc.zoomProgressivize && this.rootDoc.presStatus !== 'edit') { + this.zoomProgressivizeNext(targetDoc); + } else if (docToJump === curDoc) { //checking if curDoc has navigation open if (curDoc.presNavButton && targetDoc) { await DocumentManager.Instance.jumpToDocument(targetDoc, false, undefined, srcContext); @@ -320,7 +372,8 @@ export class PresBox extends ViewBoxBaseComponent // this.hideIfNotPresented(index); // this.showAfterPresented(index); // this.hideDocumentInPres(); - this.onHideDocumentUntilPressClick(); + this.onHideDocument(); + // this.onHideAfterPresClick(); } }); @@ -371,14 +424,12 @@ export class PresBox extends ViewBoxBaseComponent if (doc.presHideAfterButton && this.childDocs.indexOf(doc) < startIndex) { presTargetDoc.opacity = 0; } - if (doc.presFadeButton && this.childDocs.indexOf(doc) < startIndex) { - presTargetDoc.opacity = 0.5; - } }); } updateMinimize = () => { const srcContext = Cast(this.rootDoc.presCollection, Doc, null); + this.turnOffEdit(); if (srcContext) { if (srcContext.miniPres) { document.removeEventListener("keydown", this.keyEvents, false); @@ -461,7 +512,7 @@ export class PresBox extends ViewBoxBaseComponent } childLayoutTemplate = () => this.rootDoc._viewType !== CollectionViewType.Stacking ? undefined : this.presElement; removeDocument = (doc: Doc) => Doc.RemoveDocFromList(this.dataDoc, this.fieldKey, doc); - getTransform = () => this.props.ScreenToLocalTransform();// listBox padding-left and pres-box-cont minHeight - .translate(-5, -65) + getTransform = () => this.props.ScreenToLocalTransform().translate(-5, -65);// listBox padding-left and pres-box-cont minHeight panelHeight = () => this.props.PanelHeight() - 40; active = (outsideReaction?: boolean) => ((Doc.GetSelectedTool() === InkTool.None && !this.layoutDoc.isBackground) && (this.layoutDoc.forceActive || this.props.isSelected(outsideReaction) || this._isChildActive || this.props.renderDepth === 0) ? true : false) @@ -498,10 +549,7 @@ export class PresBox extends ViewBoxBaseComponent //Regular click @action selectElement = (doc: Doc) => { - // this._selectedArray = []; this.gotoDocument(this.childDocs.indexOf(doc), NumCast(this.itemIndex)); - // this._selectedArray.push(this.childDocs[this.childDocs.indexOf(doc)]); - // console.log(this._selectedArray); } //Command click @@ -526,8 +574,6 @@ export class PresBox extends ViewBoxBaseComponent } } - - //Esc click @action keyEvents = (e: KeyboardEvent) => { @@ -566,69 +612,6 @@ export class PresBox extends ViewBoxBaseComponent @observable private pathBoolean: boolean = false; @observable private expandBoolean: boolean = false; - // For toggling transition toolbar - @action toggleTransitionTools = () => { - this.transitionTools = !this.transitionTools; - this.newDocumentTools = false; - this.progressivizeTools = false; - this.moreInfoTools = false; - this.playTools = false; - } - // For toggling the add new document dropdown - @action toggleNewDocument = () => { - this.newDocumentTools = !this.newDocumentTools; - this.transitionTools = false; - this.progressivizeTools = false; - this.moreInfoTools = false; - this.playTools = false; - } - // For toggling the tools for progressivize - @action toggleProgressivize = () => { - this.progressivizeTools = !this.progressivizeTools; - const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); - const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); - targetDoc.editZoomProgressivize = false; - targetDoc.editProgressivize = false; - this.transitionTools = false; - this.newDocumentTools = false; - this.moreInfoTools = false; - this.playTools = false; - } - // For toggling the tools for more info - @action toggleMoreInfo = () => { - this.moreInfoTools = !this.moreInfoTools; - this.transitionTools = false; - this.newDocumentTools = false; - this.progressivizeTools = false; - this.playTools = false; - } - // For toggling the options when the user wants to select play - @action togglePlay = () => { - this.playTools = !this.playTools; - this.transitionTools = false; - this.newDocumentTools = false; - this.progressivizeTools = false; - this.moreInfoTools = false; - } - - // For toggling the options when the user wants to select play - @action togglePresent = () => { - this.presentTools = !this.presentTools; - this.playTools = false; - this.transitionTools = false; - this.newDocumentTools = false; - this.progressivizeTools = false; - this.moreInfoTools = false; - } - - @action toggleAllDropdowns() { - this.transitionTools = false; - this.newDocumentTools = false; - this.progressivizeTools = false; - this.moreInfoTools = false; - this.playTools = false; - } - @undoBatch @action viewPaths = async () => { @@ -831,20 +814,19 @@ export class PresBox extends ViewBoxBaseComponent
e.stopPropagation()} onClick={() => targetDoc.presEffect = 'Roll'}>Roll
-
Effect direction
-
-
-
{"Enter from left"}
}>
targetDoc.presEffectDirection = 'left'}>
 -
{"Enter from right"}
}>
targetDoc.presEffectDirection = 'right'}>
 -
{"Enter from top"}
}>
targetDoc.presEffectDirection = 'top'}>
 -
{"Enter from bottom"}
}>
targetDoc.presEffectDirection = 'bottom'}>
 -
{"Enter from center"}
}>
targetDoc.presEffectDirection = false}>
 -
+
+
Effect direction
{this.effectDirection}
- +
+
{"Enter from left"}
}>
targetDoc.presEffectDirection = 'left'}>
 +
{"Enter from right"}
}>
targetDoc.presEffectDirection = 'right'}>
 +
{"Enter from top"}
}>
targetDoc.presEffectDirection = 'top'}>
 +
{"Enter from bottom"}
}>
targetDoc.presEffectDirection = 'bottom'}>
 +
{"Enter from center"}
}>
targetDoc.presEffectDirection = false}>
 +
this.applyTo(this._selectedArray)}> @@ -887,9 +869,7 @@ export class PresBox extends ViewBoxBaseComponent }); } - public inputRef = React.createRef(); - - + private inputRef = React.createRef(); @computed get optionsDropdown() { const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); @@ -899,14 +879,12 @@ export class PresBox extends ViewBoxBaseComponent
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
- {this.stringType} options
Start automatically
Start manually
-
Open document
-
Open parent collection
+
{ activeItem.openDocument = !activeItem.openDocument }}>Open document
Store original website
@@ -935,11 +913,11 @@ export class PresBox extends ViewBoxBaseComponent
Title
Text goes here
-
runInAction(() => { this.layout = 'twoColumns'; this.createNewSlide(this.layout); })}> + {/*
runInAction(() => { this.layout = 'twoColumns'; this.createNewSlide(this.layout); })}>
Title
Column one text
Column two text
-
+
*/}
@@ -1009,17 +987,16 @@ export class PresBox extends ViewBoxBaseComponent createNewSlide = (layout?: string, title?: string, freeform?: boolean) => { console.log("whats going on?"); let doc = undefined; + if (layout) doc = this.createTemplate(layout); if (freeform && layout) doc = this.createTemplate(layout, title); - if (!freeform) doc = Docs.Create.TextDocument("", { _nativeWidth: 400, _width: 225, title: title }); + if (!freeform && !layout) doc = Docs.Create.TextDocument("", { _nativeWidth: 400, _width: 225, title: title }); const presCollection = Cast(this.layoutDoc.presCollection, Doc, null); const data = Cast(presCollection.data, listSpec(Doc)); const presData = Cast(this.rootDoc.data, listSpec(Doc)); - console.log(data); - console.log(doc); if (data && doc && presData) { - console.log("data and doc"); data.push(doc); DockedFrameRenderer.PinDoc(doc, false); + this.gotoDocument(this.childDocs.length, this.itemIndex); } } @@ -1029,56 +1006,32 @@ export class PresBox extends ViewBoxBaseComponent let x = 0; let y = 0; if (activeItem && targetDoc) { - x = NumCast(targetDoc._x); - y = NumCast(targetDoc._y) + NumCast(targetDoc._height) + 20; + x = NumCast(targetDoc.x); + y = NumCast(targetDoc.y) + NumCast(targetDoc._height) + 20; } let doc = undefined; - const title = Docs.Create.TextDocument("Click to change title", { - title: "Slide title", _width: 380, _height: 60, x: 10, y: 58, _fontSize: "24pt", - }); - const subtitle = Docs.Create.TextDocument("Click to change subtitle", { - title: "Slide subtitle", _width: 380, _height: 50, x: 10, y: 118, _fontSize: "16pt" - }); - const header = Docs.Create.TextDocument("Click to change header", { - title: "Slide header", _width: 380, _height: 65, x: 10, y: 80, _fontSize: "20pt" - }); - const contentTitle = Docs.Create.TextDocument("Click to change title", { - title: "Slide title", _width: 380, _height: 60, x: 10, y: 10, _fontSize: "24pt" - }); - const content = Docs.Create.TextDocument("Click to change texte", { - title: "Slide text", _width: 380, _height: 145, x: 10, y: 70, _fontSize: "14pt" - }); - const content1 = Docs.Create.TextDocument("Click to change text", { - title: "Column 1", _width: 185, _height: 140, x: 10, y: 80, _fontSize: "14pt" - }); - const content2 = Docs.Create.TextDocument("Click to change text", { - title: "Column 2", _width: 185, _height: 140, x: 205, y: 80, _fontSize: "14pt" - }); + const title = Docs.Create.TextDocument("Click to change title", { title: "Slide title", _width: 380, _height: 60, x: 10, y: 58, _fontSize: "24pt", }); + const subtitle = Docs.Create.TextDocument("Click to change subtitle", { title: "Slide subtitle", _width: 380, _height: 50, x: 10, y: 118, _fontSize: "16pt" }); + const header = Docs.Create.TextDocument("Click to change header", { title: "Slide header", _width: 380, _height: 65, x: 10, y: 80, _fontSize: "20pt" }); + const contentTitle = Docs.Create.TextDocument("Click to change title", { title: "Slide title", _width: 380, _height: 60, x: 10, y: 10, _fontSize: "24pt" }); + const content = Docs.Create.TextDocument("Click to change texte", { title: "Slide text", _width: 380, _height: 145, x: 10, y: 70, _fontSize: "14pt" }); + const content1 = Docs.Create.TextDocument("Click to change text", { title: "Column 1", _width: 185, _height: 140, x: 10, y: 80, _fontSize: "14pt" }); + const content2 = Docs.Create.TextDocument("Click to change text", { title: "Column 2", _width: 185, _height: 140, x: 205, y: 80, _fontSize: "14pt" }); switch (layout) { case 'blank': - doc = Docs.Create.FreeformDocument([], { - title: input ? input : "Blank slide", _width: 400, _height: 225, _fitToBox: true, x: x, y: y - }); + doc = Docs.Create.FreeformDocument([], { title: input ? input : "Blank slide", _width: 400, _height: 225, _fitToBox: true, x: x, y: y }); break; case 'title': - doc = Docs.Create.FreeformDocument([title, subtitle], { - title: input ? input : "Title slide", _width: 400, _height: 225, _fitToBox: true, x: x, y: y - }); + doc = Docs.Create.FreeformDocument([title, subtitle], { title: input ? input : "Title slide", _width: 400, _height: 225, _fitToBox: true, x: x, y: y }); break; case 'header': - doc = Docs.Create.FreeformDocument([header], { - title: input ? input : "Section header", _width: 400, _height: 225, _fitToBox: true, x: x, y: y - }); + doc = Docs.Create.FreeformDocument([header], { title: input ? input : "Section header", _width: 400, _height: 225, _fitToBox: true, x: x, y: y }); break; case 'content': - doc = Docs.Create.FreeformDocument([contentTitle, content], { - title: input ? input : "Title and content", _width: 400, _height: 225, _fitToBox: true, x: x, y: y - }); + doc = Docs.Create.FreeformDocument([contentTitle, content], { title: input ? input : "Title and content", _width: 400, _height: 225, _fitToBox: true, x: x, y: y }); break; case 'twoColumns': - doc = Docs.Create.FreeformDocument([contentTitle, content1, content2], { - title: input ? input : "Title and two columns", _width: 400, _height: 225, _fitToBox: true, x: x, y: y - }); + doc = Docs.Create.FreeformDocument([contentTitle, content1, content2], { title: input ? input : "Title and two columns", _width: 400, _height: 225, _fitToBox: true, x: x, y: y }); break; default: break; @@ -1086,6 +1039,7 @@ export class PresBox extends ViewBoxBaseComponent return doc; } + // Dropdown that appears for autoplay @computed get playDropdown() { return (
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}> @@ -1099,30 +1053,27 @@ export class PresBox extends ViewBoxBaseComponent ); } + // Dropdown that appears when the user wants to begin presenting (either minimize or sidebar view) @computed get presentDropdown() { return (
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
Minimize
-
this.startOrResetPres(0)}> +
{ this.startOrResetPres(0); this.turnOffEdit(); }}> Sidebar view
); } - // progressivizeOptions = (viewType: string) => { - // const buttons = []; - // buttons.push(
Child documents
); - // buttons.push(
console.log("hide after")}>Internal zoom
); - // buttons.push(
console.log("hide after")}>Bullet points
); - // if (viewType === "rtf") { - // buttons.push(
console.log("hide after")}>Bullet points
); - // } - // return buttons; - // } + // For toggling the options when the user wants to select play + @action togglePlay = () => { this.playTools = !this.playTools; } + // For toggling the options when the user wants to select play + @action togglePresent = () => { this.presentTools = !this.presentTools; } + + // Case in which the document has keyframes to navigate to next key frame @undoBatch @action nextKeyframe = (tagDoc: Doc): void => { @@ -1178,13 +1129,16 @@ export class PresBox extends ViewBoxBaseComponent const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null); let type: string = ''; - switch (targetDoc.type) { - case DocumentType.PDF: type = "PDF"; break; - case DocumentType.RTF: type = "Text node"; break; - case DocumentType.COL: type = "Collection"; break; - case DocumentType.AUDIO: type = "Audio"; break; - case DocumentType.VID: type = "Video"; break; - default: type = "Other node"; break; + if (activeItem) { + switch (targetDoc.type) { + case DocumentType.PDF: type = "PDF"; break; + case DocumentType.RTF: type = "Text node"; break; + case DocumentType.COL: type = "Collection"; break; + case DocumentType.AUDIO: type = "Audio"; break; + case DocumentType.VID: type = "Video"; break; + case DocumentType.IMG: type = "Image"; break; + default: type = "Other node"; break; + } } return type; } @@ -1206,7 +1160,7 @@ export class PresBox extends ViewBoxBaseComponent
Internal zoom
Viewfinder
-
Snapshot
+ {/*
Snapshot
*/}
Text progressivize
@@ -1242,6 +1196,18 @@ export class PresBox extends ViewBoxBaseComponent } } + turnOffEdit = () => { + this.childDocs.forEach((doc, index) => { + const targetDoc = Cast(doc.presentationTargetDoc, Doc, null); + targetDoc.editSnapZoomProgressivize = false; + targetDoc.editZoomProgressivize = false; + targetDoc.editScrollProgressivize = false; + if (doc.type === DocumentType.WEB) { + doc.presWebsite = doc.data; + } + }); + } + //Toggle whether the user edits or not @action editSnapZoomProgressivize = (e: React.MouseEvent) => { @@ -1703,13 +1669,12 @@ export class PresBox extends ViewBoxBaseComponent return width; } - @computed get toolbar() { const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); if (activeItem) { return ( <> -
{"Add new slide"}
}>
+
{"Add new slide"}
}>
runInAction(() => { this.newDocumentTools = !this.newDocumentTools; })}>
@@ -1735,7 +1700,7 @@ export class PresBox extends ViewBoxBaseComponent
*/} -
+ {/*
@@ -1744,16 +1709,17 @@ export class PresBox extends ViewBoxBaseComponent
-
+
*/} ); } else { return ( <> -
{"Add new slide"}
}>
+
{"Add new slide"}
}>
runInAction(() => { this.newDocumentTools = !this.newDocumentTools; })}> +
-
+ {/*
@@ -1762,68 +1728,12 @@ export class PresBox extends ViewBoxBaseComponent
-
+
*/} ); } } - private _itemRef: React.RefObject = React.createRef(); - - - // protected createPresDropTarget = (ele: HTMLDivElement) => { - // console.log("created?"); - // this.treedropDisposer?.(); - // ele && (this.treedropDisposer = DragManager.MakeDropTarget(ele, this.onInternalDrop.bind(this), this.layoutDoc, this.onInternalPreDrop.bind(this))); - // if (ele) { - // console.log("ele: " + ele.className) - // } - // } - - // protected onInternalPreDrop(e: Event, de: DragManager.DropEvent, targetAction: dropActionType) { - // console.log("preDrop?") - // if (de.complete.docDragData) { - // // if targetDropAction is, say 'alias', but we're just dragging within a collection, we want to ignore the targetAction. - // // otherwise, the targetAction should become the actual action (which can still be overridden by the userDropAction -eg, shift/ctrl keys) - // if (targetAction && !de.complete.docDragData.draggedDocuments.some(d => d.context === this.props.Document && this.childDocs.includes(d))) { - // de.complete.docDragData.dropAction = targetAction; - // } - // e.stopPropagation(); - // } - // } - - // @action - // protected onInternalDrop(e: Event, de: DragManager.DropEvent): boolean { - // console.log("drop in pres") - // const docDragData = de.complete.docDragData; - // ScriptCast(this.props.Document.dropConverter)?.script.run({ dragData: docDragData }); - // if (docDragData && this.props.addDocument) { - // console.log("docDragData && this.props.addDocument"); - // let added = false; - // const dropaction = docDragData.dropAction || docDragData.userDropAction; - // if (dropaction && dropaction !== "move") { - // console.log("dropaction && dropaction !== move"); - // added = this.props.addDocument(docDragData.droppedDocuments); - // } else if (docDragData.moveDocument) { - // console.log("docDragData.moveDocument"); - // const movedDocs = docDragData.droppedDocuments.filter((d, i) => docDragData.draggedDocuments[i] === d); - // const addedDocs = docDragData.droppedDocuments.filter((d, i) => docDragData.draggedDocuments[i] !== d); - // const res = addedDocs.length ? this.props.addDocument(addedDocs) : true; - // if (movedDocs.length) { - // const canAdd = this.props.Document._viewType === CollectionViewType.Pile || de.embedKey || - // Doc.AreProtosEqual(Cast(movedDocs[0].annotationOn, Doc, null), this.props.Document); - // added = docDragData.moveDocument(movedDocs, this.props.Document, canAdd ? this.props.addDocument : returnFalse); - // } else added = res; - // } else { - // console.log("else"); - // added = this.props.addDocument(docDragData.droppedDocuments); - // } - // added && e.stopPropagation(); - // return added; - // } - // return false; - // } - render() { this.childDocs.slice(); // needed to insure that the childDocs are loaded for looking up fields const mode = StrCast(this.rootDoc._viewType) as CollectionViewType; @@ -1872,12 +1782,7 @@ export class PresBox extends ViewBoxBaseComponent
{this.toolbar}
{this.newDocumentToolbarDropdown} - {/* {this.newDocumentDropdown} - {this.moreInfoDropdown} - {this.transitionDropdown} - {this.progressivizeDropdown} */}
- {/* ref={this.createPresDropTarget}> */} {mode !== CollectionViewType.Invalid ? removeDocument={returnFalse} dontRegisterView={true} focus={this.selectElement} - // presMultiSelect={this.multiSelect} - // ScreenToLocalTransform={Transform.Identity} /> ScreenToLocalTransform={this.getTransform} /> : (null) } diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx index 90eb8580e..b3d8cca98 100644 --- a/src/client/views/presentationview/PresElementBox.tsx +++ b/src/client/views/presentationview/PresElementBox.tsx @@ -251,10 +251,6 @@ export class PresElementBox extends ViewBoxBaseComponent doc)); // let value = this.getValue(this._heading); // value = typeof value === "string" ? `"${value}"` : value; - PresBox.Instance._dragArray.map(ele => { - ele.style.backgroundColor = "#d5dce2"; - ele.style.borderRadius = '5px'; - }); if (activeItem) { DragManager.StartDocumentDrag(PresBox.Instance._dragArray.map(ele => ele), dragData, e.clientX, e.clientY); activeItem.dragging = true; @@ -276,26 +272,21 @@ export class PresElementBox extends ViewBoxBaseComponent { e.stopPropagation(); e.preventDefault(); + // Command/ control click if (e.ctrlKey || e.metaKey) { PresBox.Instance.multiSelect(this.rootDoc, this._itemRef.current!, this._dragRef.current!); - console.log("cmmd click"); + // Shift click } else if (e.shiftKey) { PresBox.Instance.shiftSelect(this.rootDoc, this._itemRef.current!, this._dragRef.current!); + // Regular click } else { - PresBox.Instance.selectElement(this.rootDoc); + this.props.focus(this.rootDoc); PresBox.Instance._eleArray = []; PresBox.Instance._eleArray.push(this._itemRef.current!); PresBox.Instance._dragArray = []; PresBox.Instance._dragArray.push(this._dragRef.current!); - console.log("normal click"); } }} - // onClick={e => { - // if (this.props.active(true)) { - // e.stopPropagation(); - // e.preventDefault(); - // } - // }} onPointerDown={this.headerDown} > <> -- cgit v1.2.3-70-g09d2