From 5e0f26eaf42f23327f31bab10d15965d2ab744e7 Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> Date: Fri, 18 Sep 2020 17:42:47 +0800 Subject: Fixed merge from presentation_updates --- src/client/views/DocumentButtonBar.tsx | 52 ++- src/client/views/MainView.tsx | 2 +- src/client/views/PropertiesView.tsx | 9 +- src/client/views/collections/CollectionMenu.tsx | 65 ++- src/client/views/collections/TabDocView.tsx | 46 +- .../collectionFreeForm/CollectionFreeFormView.tsx | 14 +- .../collectionFreeForm/MarqueeOptionsMenu.tsx | 7 +- .../collections/collectionFreeForm/MarqueeView.tsx | 3 +- .../views/nodes/CollectionFreeFormDocumentView.tsx | 8 +- src/client/views/nodes/PresBox.scss | 336 ++++++++------- src/client/views/nodes/PresBox.tsx | 461 ++++++++++++--------- .../views/presentationview/PresElementBox.scss | 1 + .../views/presentationview/PresElementBox.tsx | 42 +- 13 files changed, 603 insertions(+), 443 deletions(-) (limited to 'src') diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx index b18b2302d..b4b46d8d9 100644 --- a/src/client/views/DocumentButtonBar.tsx +++ b/src/client/views/DocumentButtonBar.tsx @@ -24,6 +24,7 @@ import { DocumentView } from './nodes/DocumentView'; import { GoogleRef } from "./nodes/formattedText/FormattedTextBox"; import { TemplateMenu } from "./TemplateMenu"; import React = require("react"); +import { PresBox } from './nodes/PresBox'; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; @@ -184,22 +185,39 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV get pinButton() { const targetDoc = this.view0?.props.Document; let isPinned = targetDoc && Doc.isDocPinned(targetDoc); - // More than 1 document selected then all must be in presentation for isPinned to be true (then it will unpin all) - if (SelectionManager.SelectedDocuments().length > 1) { - SelectionManager.SelectedDocuments().forEach((docView: DocumentView) => { - if (Doc.isDocPinned(docView.props.Document)) isPinned = true; - else isPinned = false; - }); - } - return !targetDoc ? (null) :
{Doc.isDocPinned(targetDoc) ? "Unpin from presentation" : "Pin to presentation"}
}> + return !targetDoc ? (null) :
{"Pin to presentation"}
}>
this.props.views().map(view => view && TabDocView.PinDoc(view.props.Document, isPinned))}> - + style={{ color: "white" }} + onClick={e => this.props.views().map(view => view && TabDocView.PinDoc(view.props.Document, false))}> +
; } + @computed + get pinWithViewButton() { + const presPinWithViewIcon = ; + const targetDoc = this.view0?.props.Document; + return !targetDoc ? (null) :
{"Pin with current view"}
}> +
{ + if (targetDoc) { + TabDocView.PinDoc(targetDoc, false); + const activeDoc = PresBox.Instance.childDocs[PresBox.Instance.childDocs.length - 1]; + const x = targetDoc._panX; + const y = targetDoc._panY; + const scale = targetDoc._viewScale; + activeDoc.presPinView = true; + activeDoc.presPinViewX = x; + activeDoc.presPinViewY = y; + activeDoc.presPinViewScale = scale; + } + }}> + {presPinWithViewIcon} +
+ ; + } + @computed get shareButton() { const targetDoc = this.view0?.props.Document; @@ -236,7 +254,8 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV return !targetDoc ? (null) :
{`${CurrentUserUtils.propertiesWidth > 0 ? "Close" : "Open"} Properties Panel`}
}>
CurrentUserUtils.propertiesWidth = CurrentUserUtils.propertiesWidth > 0 ? 0 : 250)}> - +
; } @@ -258,7 +277,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV this.props.views()[0]?.select(false); this._tooltipOpen = false; setupMoveUpEvents(this, e, this.onAliasButtonMoved, emptyFunction, emptyFunction); - }); + }) onAliasButtonMoved = () => { if (this._dragRef.current) { const dragDocView = this.view0!; @@ -336,6 +355,9 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
{this.pinButton}
+ {/*
+ {this.pinWithViewButton} +
*/} {!Doc.UserDoc()["documentLinksButton-fullMenu"] ? (null) :
{this.shareButton}
} @@ -356,4 +378,4 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV } */} ; } -} +} \ No newline at end of file diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index c2290dd09..595e07326 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -213,7 +213,7 @@ export class MainView extends React.Component { })); } const pres = Docs.Create.PresDocument(new List(), - { title: "Untitled Presentation", _viewType: CollectionViewType.Stacking, _width: 400, _height: 500, targetDropAction: "alias", _chromeStatus: "replaced", boxShadow: "0 0", system: true }); + { title: "Untitled Presentation", _viewType: CollectionViewType.Stacking, _width: 400, _height: 500, targetDropAction: "alias", _chromeStatus: "replaced", boxShadow: "0 0" }); CollectionDockingView.AddSplit(pres, "right"); this.userDoc.activePresentation = pres; Doc.AddDocToList(this.userDoc.myPresentations as Doc, "data", pres); diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index 53261d8de..b12d539e4 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -43,10 +43,10 @@ export class PropertiesView extends React.Component { @computed get MAX_EMBED_HEIGHT() { return 200; } - @computed get selectedDoc() { return SelectionManager.SelectedSchemaDoc() || this.selectedDocumentView?.rootDoc; } + @computed get selectedDoc() { console.log(this.selectedDocumentView?.rootDoc.title); return SelectionManager.SelectedSchemaDoc() || this.selectedDocumentView?.rootDoc; } @computed get selectedDocumentView() { - if (PresBox.Instance?._selectedArray.length) return DocumentManager.Instance.getDocumentView(PresBox.Instance.rootDoc); if (SelectionManager.SelectedDocuments().length) return SelectionManager.SelectedDocuments()[0]; + if (PresBox.Instance && PresBox.Instance._selectedArray) return DocumentManager.Instance.getDocumentView(PresBox.Instance.rootDoc); return undefined; } @computed get isPres(): boolean { @@ -1012,6 +1012,7 @@ export class PropertiesView extends React.Component { } if (this.isPres) { const selectedItem: boolean = PresBox.Instance?._selectedArray.length > 0; + const type = PresBox.Instance.activeItem?.type; return
Presentation @@ -1038,7 +1039,7 @@ export class PropertiesView extends React.Component { {PresBox.Instance.transitionDropdown}
: null}
} - {!selectedItem ? (null) :
+ {!selectedItem || type === DocumentType.VID || type === DocumentType.AUDIO ? (null) :
this.openPresProgressivize = !this.openPresProgressivize)} style={{ backgroundColor: this.openPresProgressivize ? "black" : "" }}> @@ -1051,7 +1052,7 @@ export class PropertiesView extends React.Component { {PresBox.Instance.progressivizeDropdown}
: null}
} - {!selectedItem ? (null) :
+ {!selectedItem || (type !== DocumentType.COL && type !== DocumentType.VID && type !== DocumentType.AUDIO) ? (null) :
{ this.openSlideOptions = !this.openSlideOptions; })} style={{ backgroundColor: this.openSlideOptions ? "black" : "" }}> diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx index 5ac0a8ff0..390aa8485 100644 --- a/src/client/views/collections/CollectionMenu.tsx +++ b/src/client/views/collections/CollectionMenu.tsx @@ -369,9 +369,7 @@ export class CollectionViewBaseChrome extends React.Component{Doc.isDocPinned(targetDoc) ? "Unpin from presentation" : "Pin to presentation"}
} placement="top"> - ; } + @computed + get pinWithViewButton() { + const presPinWithViewIcon = ; + const targetDoc = this.selectedDoc; + return (!targetDoc || (targetDoc._viewType !== CollectionViewType.Freeform && targetDoc.type !== DocumentType.IMG)) ? (null) :
{"Pin to presentation trail with current view"}
} placement="top"> + + ; + } + + @undoBatch onAlias = () => { if (this.selectedDoc && this.selectedDocumentView) { @@ -449,33 +473,6 @@ export class CollectionViewBaseChrome extends React.Component; } - @computed - get pinWithViewButton() { - const targetDoc = this.selectedDoc; - if (targetDoc) { - const x = targetDoc._panX; - const y = targetDoc._panY; - const scale = targetDoc._viewScale; - } - return !targetDoc ? (null) :
{"Pin to presentation with current view"}
} placement="top"> - - ; - } render() { @@ -485,8 +482,6 @@ export class CollectionViewBaseChrome extends React.Component {this.notACollection || this.props.type === CollectionViewType.Invalid ? (null) : this.viewModes} {!this._buttonizableCommands ? (null) : this.templateChrome} - - {this.props.docView.props.ContainingCollectionDoc?._viewType !== CollectionViewType.Freeform ? (null) : Toggle Overlay Layer
} placement="bottom">
{this.subChrome} @@ -1308,4 +1303,4 @@ Scripting.addGlobal(function gotoFrame(doc: any, newFrame: any) { } CollectionFreeFormDocumentView.updateKeyframe(childDocs, currentFrame || 0); doc._currentFrame = Math.max(0, newFrame); -}); \ No newline at end of file +}); diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx index f89285923..2096d782f 100644 --- a/src/client/views/collections/TabDocView.tsx +++ b/src/client/views/collections/TabDocView.tsx @@ -22,7 +22,7 @@ import { SnappingManager } from '../../util/SnappingManager'; import { Transform } from '../../util/Transform'; import { undoBatch, UndoManager } from "../../util/UndoManager"; import { DocumentView } from "../nodes/DocumentView"; -import { PresBox } from '../nodes/PresBox'; +import { PresBox, PresMovement } from '../nodes/PresBox'; import { CollectionDockingView } from './CollectionDockingView'; import { CollectionDockingViewMenu } from './CollectionDockingViewMenu'; import { CollectionFreeFormView } from './collectionFreeForm/CollectionFreeFormView'; @@ -122,27 +122,27 @@ export class TabDocView extends React.Component { **/ @undoBatch @action - public static PinDoc(doc: Doc, unpin = false) { - if (unpin) TabDocView.UnpinDoc(doc); - else { - //add this new doc to props.Document - const curPres = CurrentUserUtils.ActivePresentation; - if (curPres) { - const pinDoc = Doc.MakeAlias(doc); - pinDoc.presentationTargetDoc = doc; - pinDoc.presZoomButton = true; - pinDoc.context = curPres; - Doc.AddDocToList(curPres, "data", pinDoc); - if (curPres.expandBoolean) pinDoc.presExpandInlineButton = true; - if (!DocumentManager.Instance.getDocumentView(curPres)) { - CollectionDockingView.AddSplit(curPres, "right"); - } - DocumentManager.Instance.jumpToDocument(doc, false, undefined, Cast(doc.context, Doc, null)); - setTimeout(() => { - curPres._itemIndex = DocListCast(curPres.data).length - 1; - doc.treeViewOutlineMode && PresBox.Instance.progressivizeChild(null as any); - }, 100); + public static PinDoc(doc: Doc, unpin = false, audioRange?: boolean) { + if (unpin) console.log('remove unpin'); + //add this new doc to props.Document + const curPres = CurrentUserUtils.ActivePresentation; + if (curPres) { + const pinDoc = Doc.MakeAlias(doc); + pinDoc.presentationTargetDoc = doc; + pinDoc.title = doc.title; + pinDoc.presMovement = PresMovement.Zoom; + pinDoc.context = curPres; + Doc.AddDocToList(curPres, "data", pinDoc); + if (pinDoc.type === "audio" && !audioRange) { + pinDoc.presStartTime = 0; + pinDoc.presEndTime = doc.duration; } + if (curPres.expandBoolean) pinDoc.presExpandInlineButton = true; + const curPresDocView = DocumentManager.Instance.getDocumentView(curPres); + if (!curPresDocView) { + CollectionDockingView.AddSplit(curPres, "right"); + } + DocumentManager.Instance.jumpToDocument(doc, false, undefined, Cast(doc.context, Doc, null)); } } @@ -318,7 +318,7 @@ export class TabDocView extends React.Component { ; } focusFunc = (doc: Doc, willZoom: boolean, scale?: number, afterFocus?: () => void) => { - this.tab.header.parent.setActiveContentItem(this.tab.contentItem); + // this.tab.header.parent.setActiveContentItem(this.tab.contentItem); // glr: Panning does not work when this is set - (this line is for trying to make a tab that is not topmost become topmost) afterFocus?.(); } setView = action((view: DocumentView) => this._view = view); @@ -371,4 +371,4 @@ export class TabDocView extends React.Component { {this.docView}
); } -} +} \ No newline at end of file diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 7b0aaef3c..3d7927bc6 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -209,7 +209,7 @@ export class CollectionFreeFormView extends CollectionSubView{PresBox.Instance.order} - - - - - - - @@ -1637,4 +1629,4 @@ class CollectionFreeFormViewPannableContents extends React.Component; } -} +} \ No newline at end of file diff --git a/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx index 46298ec6f..63d61b927 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx @@ -24,6 +24,8 @@ export class MarqueeOptionsMenu extends AntimodeMenu { } render() { + const presPinWithViewIcon = ; const buttons = [
Create a Collection
} placement="bottom"> , -
Pin to presentation with selected view
} placement="bottom"> +
Pin with selected view
} placement="bottom"> , ]; diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx index 4f2399962..d04ef4ff9 100644 --- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx +++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx @@ -25,6 +25,7 @@ import "./MarqueeView.scss"; import React = require("react"); import { Id } from "../../../../fields/FieldSymbols"; import { CurrentUserUtils } from "../../../util/CurrentUserUtils"; +import { PresMovement } from "../../nodes/PresBox"; interface MarqueeViewProps { getContainerTransform: () => Transform; @@ -394,7 +395,7 @@ export class MarqueeView extends React.Component (i <= timecode && w !== undefined) || p === undefined ? w : p, undefined as any as number), x: Cast(doc["x-indexed"], listSpec("number"), [NumCast(doc.x)]).reduce((p, x, i) => (i <= timecode && x !== undefined) || p === undefined ? x : p, undefined as any as number), y: Cast(doc["y-indexed"], listSpec("number"), [NumCast(doc.y)]).reduce((p, y, i) => (i <= timecode && y !== undefined) || p === undefined ? y : p, undefined as any as number), - scroll: Cast(doc["scroll-indexed"], listSpec("number"), [NumCast(doc._scrollTop, 0)]).reduce((p, s, i) => (i <= timecode && s !== undefined) || p === undefined ? s : p, undefined as any as number), + scroll: Cast(doc["scroll-indexed"], listSpec("number"), [NumCast(doc._scrollY, 0)]).reduce((p, s, i) => (i <= timecode && s !== undefined) || p === undefined ? s : p, undefined as any as number), opacity: Cast(doc["opacity-indexed"], listSpec("number"), [NumCast(doc.opacity, 1)]).reduce((p, o, i) => i <= timecode || p === undefined ? o : p, undefined as any as number), }); } @@ -83,7 +83,7 @@ export class CollectionFreeFormDocumentView extends DocComponent(xindexed); d["y-indexed"] = new List(yindexed); d["h-indexed"] = new List(hindexed); @@ -110,10 +110,10 @@ export class CollectionFreeFormDocumentView extends DocComponent(); - scrollList[timecode] = NumCast(doc._scrollTop); + scrollList[timecode] = NumCast(doc._scrollY); doc["scroll-indexed"] = scrollList; doc.activeFrame = ComputedField.MakeFunction("self._currentFrame"); - doc._scrollTop = ComputedField.MakeInterpolated("scroll", "activeFrame"); + doc._scrollY = ComputedField.MakeInterpolated("scroll", "activeFrame"); } diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss index 08160a2f4..7bc6c1dfd 100644 --- a/src/client/views/nodes/PresBox.scss +++ b/src/client/views/nodes/PresBox.scss @@ -144,6 +144,21 @@ $light-background: #ececec; grid-template-columns: repeat(auto-fit, 70px); } + .ribbon-colorBox { + cursor: pointer; + border: solid 1px black; + display: flex; + margin-left: 5px; + margin-top: 5px; + margin-bottom: 5px; + justify-content: center; + align-items: center; + height: 15px; + width: 15px; + padding: 0px; + transform: translate(2px, 3px); + } + .ribbon-property { font-size: 11; font-weight: 200; @@ -413,12 +428,40 @@ $light-background: #ececec; } .ribbon-button { + cursor: pointer; + font-size: 10.5; + font-weight: 300; + height: 20; + background-color: #979797; + color: white; + display: flex; + margin-top: 5px; + margin-bottom: 5px; + border-radius: 5px; + margin-right: 5px; + width: max-content; + justify-content: center; + align-items: center; + padding-right: 10px; + padding-left: 10px; + } + + .ribbon-button:hover { + transform: scale(1.03); + transition: all 0.4s; + font-weight: 400; + opacity: 1; + color: white; + background-color: black; + } + + .ribbon-toggle { cursor: pointer; font-size: 10.5; font-weight: 200; height: 20; background-color: $light-background; - border: solid 1px black; + border: solid 1px rgba(0, 0, 0, 0.5); display: flex; margin-top: 5px; margin-bottom: 5px; @@ -431,12 +474,14 @@ $light-background: #ececec; padding-left: 10px; } - .ribbon-button.active { + .ribbon-toggle.active { background-color: #aedef8; } - .ribbon-button:hover { - background-color: lightgrey; + .ribbon-toggle:hover { + transform: scale(1.03); + transition: all 0.4s; + border: solid 1px rgba(0, 0, 0, 0.75); } svg.svg-inline--fa.fa-thumbtack.fa-w-12.toolbar-thumbtack { @@ -801,82 +846,6 @@ $light-background: #ececec; } - .presPanelOverlay { - background-color: #323232; - color: white; - border-radius: 5px; - grid-template-rows: 100%; - height: 25; - width: max-content; - min-width: max-content; - justify-content: space-evenly; - align-items: center; - display: flex; - position: absolute; - right: 10px; - transition: all 0.2s; - - .presPanel-button-text { - display: flex; - height: 20; - width: max-content; - font-family: Roboto; - font-weight: 400; - margin-left: 3px; - margin-right: 3px; - padding-right: 3px; - padding-left: 3px; - letter-spacing: normal; - border-radius: 5px; - align-items: center; - justify-content: center; - transition: all 0.3s; - } - - .presPanel-divider { - width: 0.5px; - height: 80%; - border-right: solid 1px #5a5a5a; - } - - .presPanel-button-frame { - justify-self: center; - align-self: center; - align-items: center; - display: grid; - grid-template-columns: auto auto auto; - justify-content: space-around; - font-size: 11; - margin-left: 7; - width: 30; - height: 85%; - background-color: rgba(91, 157, 221, 0.4); - border-radius: 5px; - } - - .presPanel-button { - cursor: pointer; - display: flex; - height: 20; - min-width: 20; - margin-left: 3px; - margin-right: 3px; - border-radius: 100%; - align-items: center; - justify-content: center; - transition: all 0.3s; - } - - .presPanel-button:hover { - background-color: #5a5a5a; - } - - .presPanel-button-text:hover { - background-color: #5a5a5a; - } - } - - .collectionViewBaseChrome-viewPicker { min-width: 50; @@ -952,80 +921,165 @@ $light-background: #ececec; } } -.miniPres:hover { - opacity: 1; -} - .miniPres { cursor: grab; position: absolute; - overflow: hidden; right: 10; top: 10; opacity: 0.1; transition: all 0.4s; - /* border: solid 1px; */ color: white; - /* box-shadow: black 0.4vw 0.4vw 0.8vw; */ +} - .miniPresOverlay { - display: grid; - grid-template-columns: auto auto auto auto auto auto auto auto auto auto; - grid-template-rows: 100%; - height: 100%; - justify-items: center; - align-items: center; +.miniPres:hover { + opacity: 1; +} - .miniPres-button-text { - cursor: pointer; - display: flex; - height: 20; - font-weight: 400; - min-width: 100%; - border-radius: 5px; - align-items: center; - justify-content: center; - transition: all 0.3s; - } +.presPanelOverlay { + background-color: #323232; + color: white; + border-radius: 5px; + grid-template-rows: 100%; + height: 25; + width: max-content; + min-width: max-content; + justify-content: space-evenly; + align-items: center; + display: flex; + position: absolute; + right: 10px; + transition: all 0.2s; - .miniPres-button-frame { - justify-self: center; - align-self: center; - align-items: center; - display: grid; - grid-template-columns: auto auto auto; - justify-content: space-around; - font-size: 11; - margin-left: 7; - width: 30; - height: 85%; - background-color: rgba(91, 157, 221, 0.4); - border-radius: 5px; - } + .presPanel-button-text { + display: flex; + height: 20; + width: max-content; + font-family: Roboto; + font-weight: 400; + margin-left: 3px; + margin-right: 3px; + padding-right: 3px; + padding-left: 3px; + letter-spacing: normal; + border-radius: 5px; + align-items: center; + justify-content: center; + transition: all 0.3s; + } - .miniPres-divider { - width: 0.5px; - height: 80%; - border-right: solid 2px #5a5a5a; - } + .presPanel-divider { + width: 0.5px; + height: 80%; + border-right: solid 1px #5a5a5a; + } - .miniPres-button { - cursor: pointer; - display: flex; - height: 20; - min-width: 20; - border-radius: 100%; - align-items: center; - justify-content: center; - transition: all 0.3s; - } + .presPanel-button-frame { + justify-self: center; + align-self: center; + align-items: center; + display: grid; + grid-template-columns: auto auto auto; + justify-content: space-around; + font-size: 11; + margin-left: 7; + width: 30; + height: 85%; + background-color: rgba(91, 157, 221, 0.4); + border-radius: 5px; + } - .miniPres-button:hover { - background-color: #5a5a5a; - } + .presPanel-button { + cursor: pointer; + display: flex; + height: 20; + min-width: 20; + margin-left: 3px; + margin-right: 3px; + border-radius: 100%; + align-items: center; + justify-content: center; + transition: all 0.3s; + } - .miniPres-button-text:hover { - background-color: #5a5a5a; - } + .presPanel-button:hover { + background-color: #5a5a5a; } -} \ No newline at end of file + + .presPanel-button-text:hover { + background-color: #5a5a5a; + } +} + +// .miniPres { +// cursor: grab; +// position: absolute; +// overflow: hidden; +// right: 10; +// top: 10; +// opacity: 0.1; +// transition: all 0.4s; +// /* border: solid 1px; */ +// color: white; +// /* box-shadow: black 0.4vw 0.4vw 0.8vw; */ + +// .miniPresOverlay { +// display: grid; +// grid-template-columns: auto auto auto auto auto auto auto auto auto auto; +// grid-template-rows: 100%; +// height: 100%; +// justify-items: center; +// align-items: center; + +// .miniPres-button-text { +// cursor: pointer; +// display: flex; +// height: 20; +// font-weight: 400; +// min-width: 100%; +// border-radius: 5px; +// align-items: center; +// justify-content: center; +// transition: all 0.3s; +// } + +// .miniPres-button-frame { +// justify-self: center; +// align-self: center; +// align-items: center; +// display: grid; +// grid-template-columns: auto auto auto; +// justify-content: space-around; +// font-size: 11; +// margin-left: 7; +// width: 30; +// height: 85%; +// background-color: rgba(91, 157, 221, 0.4); +// border-radius: 5px; +// } + +// .miniPres-divider { +// width: 0.5px; +// height: 80%; +// border-right: solid 2px #5a5a5a; +// } + +// .miniPres-button { +// cursor: pointer; +// display: flex; +// height: 20; +// min-width: 20; +// border-radius: 100%; +// align-items: center; +// justify-content: center; +// transition: all 0.3s; +// } + +// .miniPres-button:hover { +// background-color: #5a5a5a; +// } + +// .miniPres-button-text:hover { +// background-color: #5a5a5a; +// } +// } +// } \ No newline at end of file diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index b0563c373..72c1669e7 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -4,7 +4,7 @@ import { Tooltip } from "@material-ui/core"; import { action, computed, observable, runInAction } from "mobx"; import { observer } from "mobx-react"; import { ColorState, SketchPicker } from "react-color"; -import { Doc, DocCastAsync, DocListCast } from "../../../fields/Doc"; +import { Doc, DocCastAsync, DocListCast, DocListCastAsync } from "../../../fields/Doc"; import { documentSchema } from "../../../fields/documentSchemas"; import { InkTool } from "../../../fields/InkField"; import { List } from "../../../fields/List"; @@ -28,6 +28,23 @@ import { AudioBox } from "./AudioBox"; import { CollectionFreeFormDocumentView } from "./CollectionFreeFormDocumentView"; import { FieldView, FieldViewProps } from './FieldView'; import "./PresBox.scss"; +import { VideoBox } from "./VideoBox"; + +export enum PresMovement { + Zoom = "zoom", + Pan = "pan", + Jump = "jump", + None = "none", +} + +export enum PresEffect { + Fade = "fade", + Flip = "flip", + Rotate = "rotate", + Bounce = "bounce", + Roll = "roll", + None = "none", +} type PresBoxSchema = makeInterface<[typeof documentSchema]>; const PresBoxDocument = makeInterface(documentSchema); @@ -50,7 +67,6 @@ export class PresBox extends ViewBoxBaseComponent @observable private transitionTools: boolean = false; @observable private newDocumentTools: boolean = false; @observable private progressivizeTools: boolean = false; - @observable private moreInfoTools: boolean = false; @observable private playTools: boolean = false; @observable private presentTools: boolean = false; @observable private pathBoolean: boolean = false; @@ -79,11 +95,9 @@ export class PresBox extends ViewBoxBaseComponent this.props.Document.presentationFieldKey = this.fieldKey; // provide info to the presElement script so that it can look up rendering information about the presBox } @computed get selectedDocumentView() { - if (SelectionManager.SelectedDocuments().length) { - return SelectionManager.SelectedDocuments()[0]; - } else if (PresBox.Instance._selectedArray.length) { - return DocumentManager.Instance.getDocumentView(PresBox.Instance.rootDoc); - } else { return undefined; } + if (SelectionManager.SelectedDocuments().length) return SelectionManager.SelectedDocuments()[0]; + if (PresBox.Instance && PresBox.Instance._selectedArray) return DocumentManager.Instance.getDocumentView(PresBox.Instance.rootDoc); + return undefined; } @computed get isPres(): boolean { document.removeEventListener("keydown", this.keyEvents, true); @@ -97,18 +111,21 @@ export class PresBox extends ViewBoxBaseComponent componentWillUnmount() { document.removeEventListener("keydown", this.keyEvents, true); - this.turnOffEdit(); + // Turn of progressivize editors + this.turnOffEdit(true); } - componentDidMount() { + componentDidMount = async () => { this.rootDoc.presBox = this.rootDoc; this.rootDoc._forceRenderEngine = "timeline"; this.rootDoc._replacedChrome = "replaced"; this.layoutDoc.presStatus = "edit"; this.layoutDoc._gridGap = 5; - if (!DocListCast((Doc.UserDoc().myPresentations as Doc).data).includes(this.rootDoc)) { - Doc.AddDocToList(Doc.UserDoc().myPresentations as Doc, "data", this.rootDoc); - } + this.turnOffEdit(true); + DocListCastAsync((Doc.UserDoc().myPresentations as Doc).data).then(async pres => { + await Promise.all(pres!); + if (!DocListCast((Doc.UserDoc().myPresentations as Doc).data).includes(this.rootDoc)) Doc.AddDocToList(Doc.UserDoc().myPresentations as Doc, "data", this.rootDoc); + }); } updateCurrentPresentation = () => { @@ -131,32 +148,38 @@ export class PresBox extends ViewBoxBaseComponent const lastFrame = Cast(targetDoc.lastFrame, "number", null); const curFrame = NumCast(targetDoc._currentFrame); let internalFrames: boolean = false; - if (targetDoc.presProgressivize || activeItem.zoomProgressivize || targetDoc.scrollProgressivize) internalFrames = true; + if (activeItem.presProgressivize || activeItem.zoomProgressivize || targetDoc.scrollProgressivize) internalFrames = true; // Case 1: There are still other frames and should go through all frames before going to next slide if (internalFrames && lastFrame !== undefined && curFrame < lastFrame) { targetDoc._viewTransition = "all 1s"; setTimeout(() => targetDoc._viewTransition = undefined, 1010); - targetDoc._currentFrame = curFrame + 1; - if (targetDoc.scrollProgressivize) CollectionFreeFormDocumentView.updateScrollframe(targetDoc, currentFrame); - if (targetDoc.presProgressivize) CollectionFreeFormDocumentView.updateKeyframe(childDocs, currentFrame || 0, targetDoc); + // targetDoc._currentFrame = curFrame + 1; + this.nextKeyframe(targetDoc, activeItem); + // if (targetDoc.scrollProgressivize) CollectionFreeFormDocumentView.updateScrollframe(targetDoc, currentFrame); + if (activeItem.presProgressivize) CollectionFreeFormDocumentView.updateKeyframe(childDocs, currentFrame || 0, targetDoc); else targetDoc.editing = true; - if (activeItem.zoomProgressivize) this.zoomProgressivizeNext(targetDoc); - // Case 2: Audio or video therefore wait to play the audio or video before moving on - } else if ((targetDoc.type === DocumentType.AUDIO) && !this._moveOnFromAudio && this.layoutDoc.presStatus !== 'auto') { - AudioBox.Instance.playFrom(0); - this._moveOnFromAudio = true; - // Case 3: No more frames in current doc and next slide is defined, therefore move to next slide + // if (activeItem.zoomProgressivize) this.zoomProgressivizeNext(targetDoc); + // Case 2: 'Play on next' for audio or video therefore first navigate to the audio/video before it should be played + } else if ((targetDoc.type === DocumentType.AUDIO || targetDoc.type === DocumentType.VID) && !activeItem.playAuto && activeItem.playNow && this.layoutDoc.presStatus !== 'auto') { + if (targetDoc.type === DocumentType.AUDIO) AudioBox.Instance.playFrom(NumCast(activeItem.presStartTime)); + // if (targetDoc.type === DocumentType.VID) { VideoBox.Instance.Play() }; + activeItem.playNow = false; + // Case 3: No more frames in current doc and next slide is defined, therefore move to next slide } else if (this.childDocs[this.itemIndex + 1] !== undefined) { + if (activeNext.presPinView) setTimeout(() => this.selectPres(), 0); + else this.selectPres(); const nextSelected = this.itemIndex + 1; - if (targetDoc.type === DocumentType.AUDIO) AudioBox.Instance.pause(); - this.gotoDocument(nextSelected, this.itemIndex); + if (targetDoc.type === DocumentType.AUDIO) { if (AudioBox.Instance._ele) AudioBox.Instance.pause(); } + // if (targetDoc.type === DocumentType.VID) { if (AudioBox.Instance._ele) VideoBox.Instance.Pause(); } const targetNext = Cast(activeNext.presentationTargetDoc, Doc, null); - if (activeNext && targetNext.type === DocumentType.AUDIO && activeNext.playAuto) { - AudioBox.Instance.playFrom(0); - this._moveOnFromAudio = true; - } else this._moveOnFromAudio = false; + // If next slide is audio / video 'Play automatically' then the next slide should be played + if (activeNext && (targetNext.type === DocumentType.AUDIO || targetNext.type === DocumentType.VID) && activeNext.playAuto) { + console.log('play next automatically'); + if (targetNext.type === DocumentType.AUDIO) AudioBox.Instance.playFrom(NumCast(activeNext.presStartTime)); + // if (targetNext.type === DocumentType.VID) { VideoBox.Instance.Play() }; + } else if (targetNext.type === DocumentType.AUDIO || targetNext.type === DocumentType.VID) { activeNext.playNow = true; console.log('play next after it is navigated to'); } + this.gotoDocument(nextSelected, this.itemIndex); } else if (this.childDocs[this.itemIndex + 1] === undefined && this.layoutDoc.presLoop) { - const nextSelected = 0; this.gotoDocument(0, this.itemIndex); } } @@ -176,6 +199,8 @@ export class PresBox extends ViewBoxBaseComponent const prevTargetDoc = Cast(prevItem.presentationTargetDoc, Doc, null); const lastFrame = Cast(targetDoc.lastFrame, "number", null); const curFrame = NumCast(targetDoc._currentFrame); + if (prevItem.presPinView) setTimeout(() => this.selectPres(), 0); + else this.selectPres(); if (lastFrame !== undefined && curFrame >= 1) { this.prevKeyframe(targetDoc, activeItem); } else if (activeItem) { @@ -193,9 +218,27 @@ export class PresBox extends ViewBoxBaseComponent Doc.UnBrushAllDocs(); if (index >= 0 && index < this.childDocs.length) { this.rootDoc._itemIndex = index; + const activeItem: Doc = this.activeItem; const presTargetDoc = Cast(this.childDocs[this.itemIndex].presentationTargetDoc, Doc, null); + if (activeItem.presPinView) { + const bestTarget = DocumentManager.Instance.getFirstDocumentView(presTargetDoc)?.props.Document; + bestTarget && runInAction(() => { + if (activeItem.presMovement === PresMovement.Jump) { + bestTarget!._viewTransition = '0s'; + } else { + bestTarget!._viewTransition = activeItem.presTransition ? `transform ${activeItem.presTransition}ms` : 'all 1s'; + setTimeout(() => bestTarget!._viewTransition = undefined, activeItem.presTransition ? NumCast(activeItem.presTransition) + 10 : 1010); + } + }); + } else { + presTargetDoc && runInAction(() => { + if (activeItem.presMovement === PresMovement.Jump) presTargetDoc.focusSpeed = 0; + else presTargetDoc.focusSpeed = activeItem.presTransition ? activeItem.presTransition : 500; + }); + setTimeout(() => presTargetDoc.focusSpeed = 500, this.activeItem.presTransition ? NumCast(this.activeItem.presTransition) + 10 : 510); + } if (presTargetDoc?.lastFrame !== undefined) { - presTargetDoc.currentFrame = 0; + presTargetDoc._currentFrame = 0; } this._selectedArray = [this.childDocs[index]]; //Update selected array //Handles movement to element @@ -219,7 +262,6 @@ export class PresBox extends ViewBoxBaseComponent const presCollection = Cast(this.layoutDoc.presCollection, Doc, null); const collectionDocView = presCollection ? await DocumentManager.Instance.getDocumentView(presCollection) : undefined; this.turnOffEdit(); - if (this.itemIndex >= 0) { if (srcContext && targetDoc) { this.layoutDoc.presCollection = srcContext; @@ -244,9 +286,9 @@ export class PresBox extends ViewBoxBaseComponent this.zoomProgressivizeNext(targetDoc); } else if (docToJump === curDoc) { //checking if curDoc has navigation open - if (curDoc.presNavButton && targetDoc) { + if (curDoc.presMovement === PresMovement.Pan && targetDoc) { await DocumentManager.Instance.jumpToDocument(targetDoc, false, undefined, srcContext); - } else if (curDoc.presZoomButton && targetDoc) { + } else if ((curDoc.presMovement === PresMovement.Zoom || curDoc.presMovement === PresMovement.Jump) && targetDoc) { //awaiting jump so that new scale can be found, since jumping is async await DocumentManager.Instance.jumpToDocument(targetDoc, true, undefined, srcContext); } @@ -261,10 +303,10 @@ export class PresBox extends ViewBoxBaseComponent // if targetDoc is not displayed but one of its aliases is, then we need to modify that alias, not the original target const bestTarget = DocumentManager.Instance.getFirstDocumentView(targetDoc)?.props.Document; bestTarget && runInAction(() => { - bestTarget._viewTransition = "all 1s"; - bestTarget._panX = activeItem.presPinViewX; - bestTarget._panY = activeItem.presPinViewY; - bestTarget._viewScale = activeItem.presPinViewScale; + bestTarget!._viewTransition = activeItem.presTransition ? `transform ${activeItem.presTransition}ms` : 'all 0.5s'; + bestTarget!._panX = activeItem.presPinViewX; + bestTarget!._panY = activeItem.presPinViewY; + bestTarget!._viewScale = activeItem.presPinViewScale; }); //setTimeout(() => targetDoc._viewTransition = undefined, 1010); } @@ -358,13 +400,13 @@ export class PresBox extends ViewBoxBaseComponent this.updateCurrentPresentation(); let activeItem: Doc = this.activeItem; let targetDoc: Doc = this.targetDoc; - let duration = NumCast(targetDoc.presDuration) + NumCast(targetDoc.presTransition); + let duration = NumCast(activeItem.presDuration) + NumCast(activeItem.presTransition); const timer = (ms: number) => new Promise(res => this._presTimer = setTimeout(res, ms)); const load = async () => { // Wrap the loop into an async function for this to work for (var i = startSlide; i < this.childDocs.length; i++) { activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); - duration = NumCast(targetDoc.presDuration) + NumCast(targetDoc.presTransition); + duration = NumCast(activeItem.presDuration) + NumCast(activeItem.presTransition); if (duration <= 100) { duration = 2500; } if (NumCast(targetDoc.lastFrame) > 0) { for (var f = 0; f < NumCast(targetDoc.lastFrame); f++) { @@ -404,7 +446,15 @@ export class PresBox extends ViewBoxBaseComponent this.rootDoc._itemIndex = 0; } - @action togglePath = () => this.pathBoolean = !this.pathBoolean; + @action togglePath = (srcContext: Doc, off?: boolean) => { + if (off) { + this.pathBoolean = false; + srcContext.presPathView = false; + } else { + this.pathBoolean = !this.pathBoolean; + srcContext.presPathView = this.pathBoolean; + } + } @action toggleExpandMode = () => { this.rootDoc.expandBoolean = !this.rootDoc.expandBoolean; this.childDocs.forEach((doc) => { @@ -445,7 +495,8 @@ export class PresBox extends ViewBoxBaseComponent CollectionDockingView.AddSplit(this.rootDoc, "right"); this.layoutDoc.inOverlay = false; } else if (this.layoutDoc.context && docView) { - this.layoutDoc.presStatus = 'manual'; + this.layoutDoc.presStatus = 'edit'; + clearTimeout(this._presTimer); const pt = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0); this.rootDoc.x = pt[0] + (this.props.PanelWidth() - 250); this.rootDoc.y = pt[1] + 10; @@ -454,7 +505,8 @@ export class PresBox extends ViewBoxBaseComponent docView.props.removeDocument?.(this.layoutDoc); Doc.AddDocToList((Doc.UserDoc().myOverlayDocs as Doc), undefined, this.rootDoc); } else { - this.layoutDoc.presStatus = 'manual'; + this.layoutDoc.presStatus = 'edit'; + clearTimeout(this._presTimer); const pt = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0); this.rootDoc.x = pt[0] + (this.props.PanelWidth() - 250); this.rootDoc.y = pt[1] + 10; @@ -485,33 +537,18 @@ export class PresBox extends ViewBoxBaseComponent @undoBatch updateMovement = action((movement: any, activeItem: Doc, targetDoc: Doc) => { switch (movement) { - case 'zoom': //Pan and zoom - activeItem.presNavButton = false; - activeItem.presZoomButton = !activeItem.presZoomButton; - targetDoc.presTransition = activeItem.presTransition; - if (activeItem.presZoomButton) activeItem.presMovement = 'zoom'; - else activeItem.presMovement = 'none'; + case PresMovement.Zoom: //Pan and zoom + activeItem.presMovement = PresMovement.Zoom; break; - case 'pan': //Pan - activeItem.presZoomButton = false; - activeItem.presNavButton = !activeItem.presNavButton; - targetDoc.presTransition = activeItem.presTransition; - if (activeItem.presNavButton) activeItem.presMovement = 'pan'; - else activeItem.presMovement = 'none'; + case PresMovement.Pan: //Pan + activeItem.presMovement = PresMovement.Pan; break; - case 'jump': //Jump Cut - activeItem.presTransition = targetDoc.presTransition; - targetDoc.presTransition = 0; - activeItem.presZoomButton = true; - activeItem.presSwitchButton = !activeItem.presSwitchButton; - if (activeItem.presSwitchButton) activeItem.presMovement = 'jump'; - else activeItem.presMovement = 'none'; + case PresMovement.Jump: //Jump Cut + activeItem.presJump = true; + activeItem.presMovement = PresMovement.Jump; break; - case 'none': default: - activeItem.presMovement = 'none'; - activeItem.presZoomButton = false; - activeItem.presNavButton = false; - activeItem.presSwitchButton = false; + case PresMovement.None: default: + activeItem.presMovement = PresMovement.None; break; } }); @@ -519,10 +556,10 @@ export class PresBox extends ViewBoxBaseComponent setMovementName = action((movement: any, activeItem: Doc): string => { let output: string = 'none'; switch (movement) { - case 'zoom': output = 'Zoom'; break; //Pan and zoom - case 'pan': output = 'Pan'; break; //Pan - case 'jump': output = 'Jump cut'; break; //Jump Cut - case 'none': output = 'None'; break; //None + case PresMovement.Zoom: output = 'Zoom'; break; //Pan and zoom + case PresMovement.Pan: output = 'Pan'; break; //Pan + case PresMovement.Jump: output = 'Jump cut'; break; //Jump Cut + case PresMovement.None: output = 'None'; break; //None default: output = 'Zoom'; activeItem.presMovement = 'zoom'; break; //default set as zoom } return output; @@ -535,9 +572,20 @@ export class PresBox extends ViewBoxBaseComponent docs.forEach((doc, i) => { if (this.childDocs.includes(doc)) { if (docs.length === i + 1) return false; + } else if (doc.type === DocumentType.LABEL) { + const audio = Cast(doc.annotationOn, Doc, null) as Doc; + 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); + return false; + } } else { doc.aliasOf instanceof Doc && (doc.presentationTargetDoc = doc.aliasOf); - !this.childDocs.includes(doc) && (doc.presZoomButton = true); + !this.childDocs.includes(doc) && (doc.presMovement = PresMovement.Zoom); if (this.rootDoc.expandBoolean) doc.presExpandInlineButton = true; } }); @@ -571,16 +619,16 @@ export class PresBox extends ViewBoxBaseComponent const list = this._selectedArray.map((doc: Doc, index: any) => { const curDoc = Cast(doc, Doc, null); const tagDoc = Cast(curDoc.presentationTargetDoc!, Doc, null); - return ( -
{index + 1}. {tagDoc.title}
- ); + if (tagDoc) return ( +
{index + 1}. {curDoc.title}
+ ); else if (curDoc) return
{index + 1}. {curDoc.title}
}); return list; } @action selectPres = () => { - const presDocView = DocumentManager.Instance.getDocumentView(PresBox.Instance.rootDoc)!; + const presDocView = DocumentManager.Instance.getDocumentView(this.rootDoc)!; SelectionManager.SelectDoc(presDocView, false); } @@ -588,7 +636,8 @@ export class PresBox extends ViewBoxBaseComponent @action selectElement = (doc: Doc) => { this.gotoDocument(this.childDocs.indexOf(doc), NumCast(this.itemIndex)); - this.selectPres(); + if (doc.presPinView) setTimeout(() => this.selectPres(), 0); + else this.selectPres(); } //Command click @@ -645,7 +694,7 @@ export class PresBox extends ViewBoxBaseComponent handled = true; } if (e.keyCode === 32) { // spacebar to 'present' or autoplay if (this.layoutDoc.presStatus !== "edit") this.startAutoPres(0); - else this.layoutDoc.presStatus = "manual"; if (this._presTimer) clearTimeout(this._presTimer); + else this.next(); handled = true; } if (e.keyCode === 8) { // delete selected items if (this.layoutDoc.presStatus === "edit") { @@ -680,14 +729,10 @@ export class PresBox extends ViewBoxBaseComponent */ @undoBatch @action - viewPaths = async () => { + viewPaths = () => { const srcContext = Cast(this.rootDoc.presCollection, Doc, null); - if (this.pathBoolean && srcContext) { - this.togglePath(); - srcContext.presPathView = false; - } else if (srcContext) { - this.togglePath(); - srcContext.presPathView = true; + if (srcContext) { + this.togglePath(srcContext); } } @@ -697,10 +742,14 @@ export class PresBox extends ViewBoxBaseComponent this.childDocs.forEach((doc, index) => { const tagDoc = Cast(doc.presentationTargetDoc, Doc, null); const srcContext = Cast(tagDoc?.context, Doc, null); + const width = NumCast(tagDoc._width) / 10; + const height = Math.max(NumCast(tagDoc._height) / 10, 15); + const edge = Math.max(width, height); + const fontSize = edge * 0.8; // Case A: Document is contained within the colleciton if (this.rootDoc.presCollection === srcContext) { order.push( -
+
{index + 1}
); // Case B: Document is not inside of the collection @@ -744,6 +793,7 @@ export class PresBox extends ViewBoxBaseComponent stroke: "#69a6db", strokeWidth: 5, strokeDasharray: '10 5', + boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)', }} fill="none" markerStart="url(#markerSquare)" @@ -781,7 +831,7 @@ export class PresBox extends ViewBoxBaseComponent if (change) timeInMS += change; if (timeInMS < 100) timeInMS = 100; if (timeInMS > 10000) timeInMS = 10000; - if (this.targetDoc) this.targetDoc.presTransition = timeInMS; + if (this.activeItem) this.activeItem.presTransition = timeInMS; } // Converts seconds to ms and updates presDuration @@ -790,7 +840,7 @@ export class PresBox extends ViewBoxBaseComponent if (change) timeInMS += change; if (timeInMS < 100) timeInMS = 100; if (timeInMS > 20000) timeInMS = 20000; - if (this.targetDoc) this.targetDoc.presDuration = timeInMS; + if (this.activeItem) this.activeItem.presDuration = timeInMS; } @@ -798,9 +848,9 @@ export class PresBox extends ViewBoxBaseComponent const activeItem: Doc = this.activeItem; const targetDoc: Doc = this.targetDoc; if (activeItem && targetDoc) { - const transitionSpeed = targetDoc.presTransition ? NumCast(targetDoc.presTransition) / 1000 : 0.5; - let duration = targetDoc.presDuration ? NumCast(targetDoc.presDuration) / 1000 : 2; - if (targetDoc.type === DocumentType.AUDIO) duration = NumCast(targetDoc.duration); + const transitionSpeed = activeItem.presTransition ? NumCast(activeItem.presTransition) / 1000 : 0.5; + let duration = activeItem.presDuration ? NumCast(activeItem.presDuration) / 1000 : 2; + if (activeItem.type === DocumentType.AUDIO) duration = NumCast(activeItem.duration); const effect = targetDoc.presEffect ? targetDoc.presEffect : 'None'; activeItem.presMovement = activeItem.presMovement ? activeItem.presMovement : 'Zoom'; return ( @@ -811,18 +861,17 @@ export class PresBox extends ViewBoxBaseComponent {this.setMovementName(activeItem.presMovement, activeItem)}
e.stopPropagation()} style={{ display: this.openMovementDropdown ? "grid" : "none" }}> -
e.stopPropagation()} onClick={() => this.updateMovement('none', activeItem, targetDoc)}>None
-
e.stopPropagation()} onClick={() => this.updateMovement('zoom', activeItem, targetDoc)}>Pan and Zoom
-
e.stopPropagation()} onClick={() => this.updateMovement('pan', activeItem, targetDoc)}>Pan
-
e.stopPropagation()} onClick={() => this.updateMovement('jump', activeItem, targetDoc)}>Jump cut
+
e.stopPropagation()} onClick={() => this.updateMovement(PresMovement.None, activeItem, targetDoc)}>None
+
e.stopPropagation()} onClick={() => this.updateMovement(PresMovement.Zoom, activeItem, targetDoc)}>Pan and Zoom
+
e.stopPropagation()} onClick={() => this.updateMovement(PresMovement.Pan, activeItem, targetDoc)}>Pan
+
e.stopPropagation()} onClick={() => this.updateMovement(PresMovement.Jump, activeItem, targetDoc)}>Jump cut
-
+
Transition Speed
document.removeEventListener("keydown", this.keyEvents, true)} onChange={action((e) => this.setTransitionTime(e.target.value))} /> s
@@ -834,8 +883,8 @@ export class PresBox extends ViewBoxBaseComponent
- ) => { e.stopPropagation(); this.setTransitionTime(e.target.value); }} /> -
+ ) => { e.stopPropagation(); this.setTransitionTime(e.target.value); }} /> +
Fast
Medium
Slow
@@ -844,15 +893,16 @@ export class PresBox extends ViewBoxBaseComponent
Visibility {"&"} Duration
-
{"Hide before presented"}
}>
activeItem.presHideTillShownButton = !activeItem.presHideTillShownButton}>Hide before
 -
{"Hide after presented"}
}>
activeItem.presHideAfterButton = !activeItem.presHideAfterButton}>Hide after
 +
{"Hide before presented"}
}>
activeItem.presHideTillShownButton = !activeItem.presHideTillShownButton}>Hide before
 +
{"Hide after presented"}
}>
activeItem.presHideAfterButton = !activeItem.presHideAfterButton}>Hide after
 +
{"Open document in a new tab"}
}>
activeItem.openDocument = !activeItem.openDocument}>Open
Slide Duration
document.removeEventListener("keydown", this.keyEvents, true)} + // onFocus={() => document.removeEventListener("keydown", this.keyEvents, true)} onChange={action((e) => this.setDurationTime(e.target.value))} /> s
@@ -929,14 +979,15 @@ export class PresBox extends ViewBoxBaseComponent applyTo = (array: Doc[]) => { const activeItem: Doc = this.activeItem; const targetDoc: Doc = this.targetDoc; - array.forEach((doc, index) => { + array.forEach((doc) => { const curDoc = Cast(doc, Doc, null); const tagDoc = Cast(curDoc.presentationTargetDoc, Doc, null); if (tagDoc && targetDoc) { - tagDoc.presTransition = targetDoc.presTransition; - tagDoc.presDuration = targetDoc.presDuration; + curDoc.presTransition = activeItem.presTransition; + curDoc.presDuration = activeItem.presDuration; tagDoc.presEffect = targetDoc.presEffect; tagDoc.presEffectDirection = targetDoc.presEffectDirection; + tagDoc.presMovement = targetDoc.presMovement; curDoc.presMovement = activeItem.presMovement; this.updateMovement(activeItem.presMovement, curDoc, tagDoc); curDoc.presHideTillShownButton = activeItem.presHideTillShownButton; @@ -947,20 +998,39 @@ export class PresBox extends ViewBoxBaseComponent @computed get optionsDropdown() { const activeItem: Doc = this.activeItem; const targetDoc: Doc = this.targetDoc; + const presPinWithViewIcon = ; if (activeItem && targetDoc) { return (
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
-
activeItem.playAuto = !activeItem.playAuto}>Play automatically
-
activeItem.playAuto = !activeItem.playAuto}>Play on next
-
-
-
activeItem.openDocument = !activeItem.openDocument}>Open document
+
activeItem.playAuto = !activeItem.playAuto}>Play automatically
+
activeItem.playAuto = !activeItem.playAuto}>Play on next
+ {targetDoc.type === DocumentType.VID ?
activeItem.presVidFullScreen = !activeItem.presVidFullScreen}>Full screen
: (null)} + {targetDoc.type === DocumentType.VID || targetDoc.type === DocumentType.AUDIO ?
+
Start time
+
+ ) => { activeItem.presStartTime = Number(e.target.value); })} /> +
+
: (null)} + {targetDoc.type === DocumentType.VID || targetDoc.type === DocumentType.AUDIO ?
+
End time
+
+ ) => { const val = e.target.value; activeItem.presEndTime = Number(val); })} /> +
+
: (null)} + {targetDoc.type === DocumentType.COL ? 'Presentation Pin View' : (null)}
-
{ activeItem.presPinView = !activeItem.presPinView; targetDoc.presPinView = activeItem.presPinView; @@ -972,7 +1042,16 @@ export class PresBox extends ViewBoxBaseComponent activeItem.presPinViewY = y; activeItem.presPinViewScale = scale; } - }}>Presentation pin view
+ }}>{presPinWithViewIcon}
+ {activeItem.presPinView ?
{ + const x = targetDoc._panX; + const y = targetDoc._panY; + const scale = targetDoc._viewScale; + activeItem.presPinViewX = x; + activeItem.presPinViewY = y; + activeItem.presPinViewScale = scale + }}>Update
: (null)}
@@ -981,7 +1060,6 @@ export class PresBox extends ViewBoxBaseComponent document.removeEventListener("keydown", this.keyEvents, true)} onChange={action((e: React.ChangeEvent) => { const val = e.target.value; activeItem.presPinViewX = Number(val); })} />
@@ -991,7 +1069,6 @@ export class PresBox extends ViewBoxBaseComponent document.removeEventListener("keydown", this.keyEvents, true)} onChange={action((e: React.ChangeEvent) => { const val = e.target.value; activeItem.presPinViewY = Number(val); })} />
@@ -1001,13 +1078,12 @@ export class PresBox extends ViewBoxBaseComponent document.removeEventListener("keydown", this.keyEvents, true)} onChange={action((e: React.ChangeEvent) => { const val = e.target.value; activeItem.presPinViewScale = Number(val); })} />
{/*
-
Store original website
+
Store original website
*/}
@@ -1051,18 +1127,18 @@ export class PresBox extends ViewBoxBaseComponent
Slide Title:

document.removeEventListener("keydown", this.keyEvents, true)} onChange={(e) => { e.stopPropagation(); e.preventDefault(); runInAction(() => this.title = e.target.value); - }}> + }}> +
Choose type:
-
this.addFreeform = !this.addFreeform)}>Text
-
this.addFreeform = !this.addFreeform)}>Freeform
+
this.addFreeform = !this.addFreeform)}>Text
+
this.addFreeform = !this.addFreeform)}>Freeform
@@ -1129,13 +1205,13 @@ export class PresBox extends ViewBoxBaseComponent 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: "24px", }); - const subtitle = Docs.Create.TextDocument("Click to change subtitle", { title: "Slide subtitle", _width: 380, _height: 50, x: 10, y: 118, _fontSize: "16px" }); - const header = Docs.Create.TextDocument("Click to change header", { title: "Slide header", _width: 380, _height: 65, x: 10, y: 80, _fontSize: "20px" }); - const contentTitle = Docs.Create.TextDocument("Click to change title", { title: "Slide title", _width: 380, _height: 60, x: 10, y: 10, _fontSize: "24px" }); - const content = Docs.Create.TextDocument("Click to change text", { title: "Slide text", _width: 380, _height: 145, x: 10, y: 70, _fontSize: "14px" }); - const content1 = Docs.Create.TextDocument("Click to change text", { title: "Column 1", _width: 185, _height: 140, x: 10, y: 80, _fontSize: "14px" }); - const content2 = Docs.Create.TextDocument("Click to change text", { title: "Column 2", _width: 185, _height: 140, x: 205, y: 80, _fontSize: "14px" }); + 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 text", { 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, x: x, y: y }); @@ -1162,10 +1238,10 @@ export class PresBox extends ViewBoxBaseComponent @computed get presentDropdown() { return (
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}> -
+
{ this.updateMinimize(); this.turnOffEdit(true); }))}> Minimize
-
{ this.layoutDoc.presStatus = "manual"; this.turnOffEdit(); }))}> +
{ this.layoutDoc.presStatus = "manual"; this.turnOffEdit(true); }))}> Sidebar view
@@ -1179,7 +1255,7 @@ export class PresBox extends ViewBoxBaseComponent const childDocs = DocListCast(tagDoc[Doc.LayoutFieldKey(tagDoc)]); const currentFrame = Cast(tagDoc._currentFrame, "number", null); if (currentFrame === undefined) { - tagDoc.currentFrame = 0; + tagDoc._currentFrame = 0; CollectionFreeFormDocumentView.setupScroll(tagDoc, 0); CollectionFreeFormDocumentView.setupKeyframes(childDocs, 0); } @@ -1187,15 +1263,15 @@ export class PresBox extends ViewBoxBaseComponent CollectionFreeFormDocumentView.updateKeyframe(childDocs, currentFrame || 0, tagDoc); tagDoc._currentFrame = Math.max(0, (currentFrame || 0) + 1); tagDoc.lastFrame = Math.max(NumCast(tagDoc._currentFrame), NumCast(tagDoc.lastFrame)); - if (curDoc.zoomProgressivize) { - const resize = document.getElementById('resizable'); - if (resize) { - resize.style.width = this.checkList(tagDoc, curDoc["viewfinder-width-indexed"]) + 'px'; - resize.style.height = this.checkList(tagDoc, curDoc["viewfinder-height-indexed"]) + 'px'; - resize.style.top = this.checkList(tagDoc, curDoc["viewfinder-top-indexed"]) + 'px'; - resize.style.left = this.checkList(tagDoc, curDoc["viewfinder-left-indexed"]) + 'px'; - } - } + // if (curDoc.zoomProgressivize) { + // const resize = document.getElementById('resizable'); + // if (resize) { + // resize.style.width = this.checkList(tagDoc, curDoc["viewfinder-width-indexed"]) + 'px'; + // resize.style.height = this.checkList(tagDoc, curDoc["viewfinder-height-indexed"]) + 'px'; + // resize.style.top = this.checkList(tagDoc, curDoc["viewfinder-top-indexed"]) + 'px'; + // resize.style.left = this.checkList(tagDoc, curDoc["viewfinder-left-indexed"]) + 'px'; + // } + // } } @undoBatch @@ -1209,15 +1285,15 @@ export class PresBox extends ViewBoxBaseComponent } CollectionFreeFormDocumentView.gotoKeyframe(childDocs.slice()); tagDoc._currentFrame = Math.max(0, (currentFrame || 0) - 1); - if (actItem.zoomProgressivize) { - const resize = document.getElementById('resizable'); - if (resize) { - resize.style.width = this.checkList(tagDoc, actItem["viewfinder-width-indexed"]) + 'px'; - resize.style.height = this.checkList(tagDoc, actItem["viewfinder-height-indexed"]) + 'px'; - resize.style.top = this.checkList(tagDoc, actItem["viewfinder-top-indexed"]) + 'px'; - resize.style.left = this.checkList(tagDoc, actItem["viewfinder-left-indexed"]) + 'px'; - } - } + // if (actItem.zoomProgressivize) { + // const resize = document.getElementById('resizable'); + // if (resize) { + // resize.style.width = this.checkList(tagDoc, actItem["viewfinder-width-indexed"]) + 'px'; + // resize.style.height = this.checkList(tagDoc, actItem["viewfinder-height-indexed"]) + 'px'; + // resize.style.top = this.checkList(tagDoc, actItem["viewfinder-top-indexed"]) + 'px'; + // resize.style.left = this.checkList(tagDoc, actItem["viewfinder-left-indexed"]) + 'px'; + // } + // } } /** @@ -1227,9 +1303,8 @@ export class PresBox extends ViewBoxBaseComponent const activeItem: Doc = this.activeItem; const targetDoc: Doc = this.targetDoc; let type: string = ''; - const effectiveType = targetDoc.treeViewOutlineMode ? DocumentType.COL : targetDoc.type;// bcz: Argh .. .need a better way to identify a slide doc if (activeItem) { - switch (effectiveType) { + switch (targetDoc.type) { case DocumentType.PDF: type = "PDF"; break; case DocumentType.RTF: type = "Text node"; break; case DocumentType.COL: type = "Collection"; break; @@ -1249,9 +1324,8 @@ export class PresBox extends ViewBoxBaseComponent @computed get progressivizeDropdown() { - const activeItem = this.activeItem; - const targetDoc = this.targetDoc; - const effectiveType = targetDoc.treeViewOutlineMode ? DocumentType.COL : targetDoc.type; + const activeItem: Doc = this.activeItem; + const targetDoc: Doc = this.targetDoc; if (activeItem && targetDoc) { const activeFontColor = targetDoc["pres-text-color"] ? StrCast(targetDoc["pres-text-color"]) : "Black"; const viewedFontColor = targetDoc["pres-text-viewed-color"] ? StrCast(targetDoc["pres-text-viewed-color"]) : "Black"; @@ -1260,29 +1334,29 @@ export class PresBox extends ViewBoxBaseComponent
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
{this.stringType} selected -
-
Contents
-
Edit
+
+
Contents
+
Edit
Active text color
-
{ this.openActiveColorPicker = !this.openActiveColorPicker; })}> +
{ this.openActiveColorPicker = !this.openActiveColorPicker; })}>
{this.activeColorPicker}
Viewed font color
-
this.openViewedColorPicker = !this.openViewedColorPicker)}> +
this.openViewedColorPicker = !this.openViewedColorPicker)}>
{this.viewedColorPicker} - {/*
-
Zoom
-
Edit
+ {/*
+
Zoom
+
Edit
*/} -
-
Scroll
-
Edit
+
+
Scroll
+
Edit
@@ -1302,7 +1376,7 @@ export class PresBox extends ViewBoxBaseComponent
{"Last frame"}
}>
{NumCast(targetDoc.lastFrame)}
-
console.log(" TODO: play frames")}>Play
+
console.log(" TODO: play frames")}>Play
@@ -1349,15 +1423,21 @@ export class PresBox extends ViewBoxBaseComponent color={StrCast(targetDoc["pres-text-viewed-color"])} />; } - turnOffEdit = () => { + @action + turnOffEdit = (paths?: boolean) => { + if (paths) { + // Turn off paths + const srcContext = Cast(this.rootDoc.presCollection, Doc, null); + if (srcContext) this.togglePath(srcContext, true); + } + // Turn off the progressivize editors for each this.childDocs.forEach((doc) => { doc.editSnapZoomProgressivize = false; doc.editZoomProgressivize = false; - doc.editScrollProgressivize = false; const targetDoc = Cast(doc.presentationTargetDoc, Doc, null); if (targetDoc) { targetDoc.editZoomProgressivize = false; - targetDoc.editScrollProgressivize = false; + // targetDoc.editScrollProgressivize = false; } }); } @@ -1437,28 +1517,23 @@ export class PresBox extends ViewBoxBaseComponent } @action - progressivizeChild = (e?: React.MouseEvent) => { - e?.stopPropagation(); + progressivizeChild = (e: React.MouseEvent) => { + e.stopPropagation(); const activeItem: Doc = this.activeItem; const targetDoc: Doc = this.targetDoc; + const docs = DocListCast(targetDoc[Doc.LayoutFieldKey(targetDoc)]); if (!activeItem.presProgressivize) { targetDoc.editing = false; activeItem.presProgressivize = true; targetDoc.presProgressivize = true; targetDoc._currentFrame = 0; - let count = 0; - const setupProgressivize = (doc: Doc) => { - CollectionFreeFormDocumentView.setupKeyframes([doc], count++, true); - targetDoc.treeViewOutlineMode && DocListCast(doc[Doc.LayoutFieldKey(doc)]).forEach(setupProgressivize); - }; - setupProgressivize(targetDoc); - targetDoc.lastFrame = count; + docs.forEach((doc, i) => CollectionFreeFormDocumentView.setupKeyframes([doc], i, true)); + targetDoc.lastFrame = targetDoc.lastFrame ? NumCast(targetDoc.lastFrame) : docs.length - 1; } else { targetDoc.editProgressivize = false; activeItem.presProgressivize = false; targetDoc.presProgressivize = false; targetDoc._currentFrame = 0; - targetDoc.lastFrame = 0; targetDoc.editing = true; } } @@ -1667,9 +1742,9 @@ export class PresBox extends ViewBoxBaseComponent const targetDoc: Doc = this.targetDoc; return ( <> - {this.targetDoc ?
= 0 ? "inline-flex" : "none" }}> + {this.targetDoc ?
= 0 ? "inline-flex" : "none" }}>
{targetDoc._currentFrame}
-
+
{targetDoc.lastFrame}
: null} @@ -1690,7 +1765,7 @@ export class PresBox extends ViewBoxBaseComponent {this.playButtonFrames}
- {this.props.PanelWidth() > 250 ?
this.layoutDoc.presStatus = "edit"}>EXIT
+ {this.props.PanelWidth() > 250 ?
{ this.layoutDoc.presStatus = "edit"; clearTimeout(this._presTimer); }}>EXIT
:
this.layoutDoc.presStatus = "edit"}>
} @@ -1699,7 +1774,7 @@ export class PresBox extends ViewBoxBaseComponent @action startOrPause = () => { - if (this.layoutDoc.presStatus === "manual") this.startAutoPres(this.itemIndex); + if (this.layoutDoc.presStatus === "manual" || this.layoutDoc.presStatus === "edit") this.startAutoPres(this.itemIndex); else this.pauseAutoPres(); } @@ -1710,21 +1785,21 @@ export class PresBox extends ViewBoxBaseComponent this.childDocs.slice(); const mode = StrCast(this.rootDoc._viewType) as CollectionViewType; return this.layoutDoc.inOverlay ? -
- {
-
{"Loop"}
}>
this.layoutDoc.presLoop = !this.layoutDoc.presLoop}>
 -
-
-
{this.layoutDoc.presStatus === "auto" ? "Pause" : "Autoplay"}
}>
 -
-
-
+
+
+
{"Loop"}
}>
this.layoutDoc.presLoop = !this.layoutDoc.presLoop}>
 +
+
+
{this.layoutDoc.presStatus === "auto" ? "Pause" : "Autoplay"}
}>
 +
+
+
Slide {this.itemIndex + 1} / {this.childDocs.length} {this.playButtonFrames}
-
-
EXIT
-
} +
+
EXIT
+
:
diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss index 6ee190b82..4642caeb2 100644 --- a/src/client/views/presentationview/PresElementBox.scss +++ b/src/client/views/presentationview/PresElementBox.scss @@ -114,6 +114,7 @@ $light-background: #ececec; } .presElementBox-name { + z-index: 300; align-self: center; font-size: 13px; font-family: Roboto; diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx index 048d3a3d0..0c8b20ae3 100644 --- a/src/client/views/presentationview/PresElementBox.tsx +++ b/src/client/views/presentationview/PresElementBox.tsx @@ -1,5 +1,5 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { action, computed, IReactionDisposer, reaction } from "mobx"; +import { action, computed, IReactionDisposer, reaction, runInAction } from "mobx"; import { observer } from "mobx-react"; import { Doc, DataSym, DocListCast } from "../../../fields/Doc"; import { documentSchema } from '../../../fields/documentSchemas'; @@ -15,12 +15,13 @@ import { FieldView, FieldViewProps } from '../nodes/FieldView'; import "./PresElementBox.scss"; import React = require("react"); import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView"; -import { PresBox } from "../nodes/PresBox"; +import { PresBox, PresMovement } from "../nodes/PresBox"; import { DocumentType } from "../../documents/DocumentTypes"; import { Tooltip } from "@material-ui/core"; import { DragManager } from "../../util/DragManager"; import { CurrentUserUtils } from "../../util/CurrentUserUtils"; import { undoBatch } from "../../util/UndoManager"; +import { EditableView } from "../EditableView"; export const presSchema = createSchema({ presentationTargetDoc: Doc, @@ -114,20 +115,23 @@ export class PresElementBox extends ViewBoxBaseComponent = React.createRef(); private _dragRef: React.RefObject = React.createRef(); + private _titleRef: React.RefObject = React.createRef(); + @action headerDown = (e: React.PointerEvent) => { @@ -180,19 +184,19 @@ export class PresElementBox extends ViewBoxBaseComponent) => { - if (DragManager.docsBeingDragged.length > 0) { + if (DragManager.docsBeingDragged.length > 1) { this._highlightTopRef.current!.style.borderTop = "solid 2px #5B9FDD"; } } onPointerBottom = (e: React.PointerEvent) => { - if (DragManager.docsBeingDragged.length > 0) { + if (DragManager.docsBeingDragged.length > 1) { this._highlightBottomRef.current!.style.borderBottom = "solid 2px #5B9FDD"; } } onPointerLeave = (e: React.PointerEvent) => { - if (DragManager.docsBeingDragged.length > 0) { + if (DragManager.docsBeingDragged.length > 1) { this._highlightBottomRef.current!.style.borderBottom = "0px"; this._highlightTopRef.current!.style.borderTop = "0px"; } @@ -200,8 +204,8 @@ export class PresElementBox extends ViewBoxBaseComponent { - if (CurrentUserUtils.propertiesWidth === 0) { - CurrentUserUtils.propertiesWidth = 250; + if (CurrentUserUtils.propertiesWidth < 5) { + action(() => (CurrentUserUtils.propertiesWidth = 250)); } } @@ -214,9 +218,14 @@ export class PresElementBox extends ViewBoxBaseComponent { + this.rootDoc.title = value; + return true; + } + render() { const className = "presElementBox-item" + (PresBox.Instance._selectedArray.includes(this.rootDoc) ? " presElementBox-active" : ""); - const pbi = "presElementBox-interaction"; return !(this.rootDoc instanceof Doc) || this.targetDoc instanceof Promise ? (null) : (
{ + console.log('double click to open'); this.toggleProperties(); this.props.focus(this.rootDoc); PresBox.Instance._eleArray = []; @@ -255,7 +265,15 @@ export class PresElementBox extends ViewBoxBaseComponent
- {`${this.targetDoc?.title}`} + StrCast(this.rootDoc.title)} + SetValue={action((value: string) => { + this.onSetValue(value); + return true; + })} + />
{"Movement speed"}
}>
300 ? "block" : "none" }}>{this.transition}
{"Duration"}
}>
300 ? "block" : "none" }}>{this.duration}
 -- cgit v1.2.3-70-g09d2 From 15217fbffe43d888a06c719e470f276aafe4f23f Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> Date: Fri, 18 Sep 2020 17:56:00 +0800 Subject: view paths UI from pres_updates --- .../collections/collectionFreeForm/CollectionFreeFormView.scss | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss index 2b07c4efb..75cbc20ca 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss @@ -52,12 +52,16 @@ .pathOrder-frame { position: absolute; - width: 40; + width: 100%; + height: 100%; + min-height: 15px; text-align: center; - font-size: 30; background-color: #69a6db; + border-radius: 5px; + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); font-family: Roboto; - font-weight: 300; + font-weight: 500; + color: white; } } -- cgit v1.2.3-70-g09d2 From 9a2b6499f107f8b21169767661086a700046f4bd Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> Date: Fri, 18 Sep 2020 19:41:45 +0800 Subject: view path UI updates --- .../collectionFreeForm/CollectionFreeFormView.tsx | 12 ++++++++---- src/client/views/nodes/PresBox.tsx | 6 ++---- 2 files changed, 10 insertions(+), 8 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 3d7927bc6..8af048d67 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -1595,13 +1595,17 @@ class CollectionFreeFormViewPannableContents extends React.Component{PresBox.Instance.order}
- - + - - + + + + {PresBox.Instance.paths} diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index 72c1669e7..90f69f889 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -67,10 +67,8 @@ export class PresBox extends ViewBoxBaseComponent @observable private transitionTools: boolean = false; @observable private newDocumentTools: boolean = false; @observable private progressivizeTools: boolean = false; - @observable private playTools: boolean = false; @observable private presentTools: boolean = false; @observable private pathBoolean: boolean = false; - @observable private expandBoolean: boolean = false; @observable private openMovementDropdown: boolean = false; @observable private openEffectDropdown: boolean = false; @computed get childDocs() { return DocListCast(this.dataDoc[this.fieldKey]); } @@ -796,9 +794,9 @@ export class PresBox extends ViewBoxBaseComponent boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)', }} fill="none" - markerStart="url(#markerSquare)" + markerStart="url(#markerArrow)" markerMid="url(#markerSquare)" - markerEnd="url(#markerArrow)" + markerEnd="url(#markerSquareFilled)" />); } -- cgit v1.2.3-70-g09d2 From 8e672ed0e062b9483d3c0e19fa5e2e0a505a0472 Mon Sep 17 00:00:00 2001 From: bobzel Date: Fri, 18 Sep 2020 09:24:00 -0400 Subject: fixed following link to doc in hidden tab --- src/client/views/collections/TabDocView.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx index 2096d782f..1be85cfc1 100644 --- a/src/client/views/collections/TabDocView.tsx +++ b/src/client/views/collections/TabDocView.tsx @@ -169,7 +169,7 @@ export class TabDocView extends React.Component { })).observe(this.props.glContainer._element[0]); this.props.glContainer.layoutManager.on("activeContentItemChanged", this.onActiveContentItemChanged); this.props.glContainer.tab?.isActive && this.onActiveContentItemChanged(); - this._tabReaction = reaction(() => ({ selected: selected(), color: this.tabColor, title: this.tab.titleElement[0] }), + this._tabReaction = reaction(() => ({ selected: selected(), color: this.tabColor, title: this.tab?.titleElement[0] }), ({ selected, color, title }) => title && (title.style.backgroundColor = selected ? color : ""), { fireImmediately: true }); } @@ -318,7 +318,9 @@ export class TabDocView extends React.Component { ; } focusFunc = (doc: Doc, willZoom: boolean, scale?: number, afterFocus?: () => void) => { - // this.tab.header.parent.setActiveContentItem(this.tab.contentItem); // glr: Panning does not work when this is set - (this line is for trying to make a tab that is not topmost become topmost) + if (!this.tab.header.parent._activeContentItem || this.tab.header.parent._activeContentItem !== this.tab.contentItem) { + this.tab.header.parent.setActiveContentItem(this.tab.contentItem); // glr: Panning does not work when this is set - (this line is for trying to make a tab that is not topmost become topmost) + } afterFocus?.(); } setView = action((view: DocumentView) => this._view = view); -- cgit v1.2.3-70-g09d2