From 981f1f164d816e60312d50912acb8de89fbcd912 Mon Sep 17 00:00:00 2001 From: geireann <60007097+geireann@users.noreply.github.com> Date: Fri, 3 Jul 2020 13:10:44 +0800 Subject: highlight active presentation + UI Changes --- src/client/views/nodes/PresBox.scss | 91 +++++++++++++++++++++++++++++++++++-- 1 file changed, 86 insertions(+), 5 deletions(-) (limited to 'src/client/views/nodes/PresBox.scss') diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss index d48000e16..9b040e6fe 100644 --- a/src/client/views/nodes/PresBox.scss +++ b/src/client/views/nodes/PresBox.scss @@ -1,5 +1,6 @@ .presBox-cont { position: absolute; + display: block; pointer-events: inherit; z-index: 2; box-shadow: #AAAAAA .2vw .2vw .4vw; @@ -12,11 +13,82 @@ transition: 0.7s opacity ease; .presBox-listCont { - position: absolute; + position: relative; height: calc(100% - 25px); width: 100%; + margin-top: 10px; + } + + .presBox-highlight { + position: absolute; + top: 0; + height: 0; + width: 100%; + margin-top: 10px; + background-color: #ffe4b3; } + + .presBox-toolbar { + position: relative; + display: inline-flex; + align-items: center; + height: 30px; + width: 100%; + color: white; + background-color: #323232; + + .toolbar-button { + margin-left: 10px; + margin-right: 10px; + letter-spacing: 0; + display: flex; + align-items: center; + + .toolbar-dropdown { + margin-left: 5px; + } + + .toolbar-transitionTools { + display: none; + } + + .toolbar-transitionTools.active { + position: absolute; + display: block; + top: 30px; + transform: translate(-10px, 0px); + border-top: solid 3px grey; + background-color: #323232; + width: 105px; + height: max-content; + z-index: 100; + + .toolbar-transitionButtons { + display: block; + + .toolbar-transition { + display: flex; + font-size: 10; + width: 100; + background-color: rgba(0, 0, 0, 0); + min-width: max-content; + + .toolbar-icon { + margin-right: 5px; + } + } + } + } + } + + .toolbar-divider { + border-left: 1px solid white; + height: 80%; + } + } + .presBox-buttons { + position: relative; width: 100%; background: gray; padding-top: 5px; @@ -24,6 +96,7 @@ display: grid; grid-column-end: 4; grid-column-start: 1; + .presBox-viewPicker { height: 25; position: relative; @@ -31,10 +104,12 @@ grid-column: 1/2; min-width: 15px; } + select { background: #323232; color: white; } + .presBox-button { margin-right: 2.5%; margin-left: 2.5%; @@ -44,10 +119,12 @@ align-items: center; background: #323232; color: white; + svg { margin: auto; } } + .collectionViewBaseChrome-viewPicker { min-width: 50; width: 5%; @@ -56,17 +133,21 @@ display: inline-block; } } - .presBox-backward, .presBox-forward { + + .presBox-backward, + .presBox-forward { width: 25px; border-radius: 5px; - top:50%; + top: 50%; position: absolute; display: inline-block; } + .presBox-backward { - left:5; + left: 5; } + .presBox-forward { - right:5; + right: 5; } } \ No newline at end of file -- cgit v1.2.3-70-g09d2 From ec1f159d60695a3cc89327561f7c60c00a06366d Mon Sep 17 00:00:00 2001 From: geireann <60007097+geireann@users.noreply.github.com> Date: Mon, 13 Jul 2020 16:18:46 +0800 Subject: highlights, readjusted view, keyboard events --- src/client/documents/Documents.ts | 1 + src/client/views/MainView.tsx | 5 +- src/client/views/nodes/FieldView.tsx | 1 + src/client/views/nodes/PresBox.scss | 477 +++++++++++++--- src/client/views/nodes/PresBox.tsx | 611 +++++++++++++++++---- .../views/presentationview/PresElementBox.scss | 29 +- .../views/presentationview/PresElementBox.tsx | 47 +- 7 files changed, 949 insertions(+), 222 deletions(-) (limited to 'src/client/views/nodes/PresBox.scss') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 0e44a46d9..1aa3aef3e 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -131,6 +131,7 @@ export interface DocumentOptions { lastFrame?: number; // the last frame of a frame-based collection (e.g., progressive slide) activeFrame?: number; // the active frame of a document in a frame base collection presTransition?: number; //the time taken for the transition TO a document + presDuration?: number; //the duration of the slide in presentation view borderRounding?: string; boxShadow?: string; dontRegisterChildViews?: boolean; diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index e961e2e5c..440368a32 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -6,7 +6,7 @@ import { faCommentAlt, faCompressArrowsAlt, faCut, faEllipsisV, faEraser, faExclamation, faFileAlt, faFileAudio, faFilePdf, faFilm, faFilter, faFont, faGlobeAsia, faHighlighter, faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote, faTimesCircle, faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt, faQuoteLeft, faSortAmountDown, faAlignLeft, faAlignCenter, faAlignRight, - faAngleDown, faAngleUp, faSearchPlus + faAngleDown, faAngleUp, faSearchPlus, faPlayCircle, faClock, faRocket } from '@fortawesome/free-solid-svg-icons'; import { ANTIMODEMENU_HEIGHT } from './globalCssVariables.scss'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; @@ -144,7 +144,8 @@ export class MainView extends React.Component { faQuestionCircle, faArrowLeft, faArrowRight, faArrowDown, faArrowUp, faBolt, faBullseye, faCaretUp, faCat, faCheck, faChevronRight, faClipboard, faClone, faCloudUploadAlt, faCommentAlt, faCompressArrowsAlt, faCut, faEllipsisV, faEraser, faExclamation, faFileAlt, faFileAudio, faFilePdf, faFilm, faFilter, faFont, faGlobeAsia, faHighlighter, faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote, faTrashAlt, faAngleRight, faBell, - faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt, faQuoteLeft, faSortAmountDown, faAlignLeft, faAlignCenter, faAlignRight, faAngleDown, faAngleUp, faSearchPlus); + faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faArrowsAlt, faQuoteLeft, faSortAmountDown, faAlignLeft, faAlignCenter, faAlignRight, + faAngleDown, faAngleUp, faSearchPlus, faPlayCircle, faClock, faRocket); this.initEventListeners(); this.initAuthenticationRouters(); } diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx index c57738361..b1132ce33 100644 --- a/src/client/views/nodes/FieldView.tsx +++ b/src/client/views/nodes/FieldView.tsx @@ -45,6 +45,7 @@ export interface FieldViewProps { whenActiveChanged: (isActive: boolean) => void; dontRegisterView?: boolean; focus: (doc: Doc) => void; + presMultiSelect?: (doc: Doc) => void; //added for selecting multiple documents in a presentation ignoreAutoHeight?: boolean; PanelWidth: () => number; PanelHeight: () => number; diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss index 9c2daf5d3..07e53fa94 100644 --- a/src/client/views/nodes/PresBox.scss +++ b/src/client/views/nodes/PresBox.scss @@ -19,16 +19,11 @@ margin-top: 10px; } - .presBox-highlight { - position: absolute; - top: 0; - height: 0; - width: 100%; - margin-top: 10px; - background-color: #ffe4b3; + .presBox-toolbar { + display: none; } - .presBox-toolbar { + .presBox-toolbar.active { position: relative; display: inline-flex; align-items: center; @@ -43,115 +38,437 @@ letter-spacing: 0; display: flex; align-items: center; + transition: 0.5s; - .toolbar-dropdown { - margin-left: 5px; + @media only screen and (max-width: 400) { + .toolbar-buttonText { + display: none; + } } + } - .toolbar-transitionTools { - display: none; - } + .toolbar-button.active { + color: #AEDDF8; + } - .toolbar-transitionTools.active { - position: absolute; - display: block; - top: 30px; - transform: translate(-10px, 0px); - border-top: solid 3px grey; - background-color: #323232; - width: 105px; - height: max-content; - z-index: 100; - - .toolbar-transitionButtons { - display: block; - - .toolbar-transition { - display: flex; - font-size: 10; - width: 100; - background-color: rgba(0, 0, 0, 0); - min-width: max-content; - - .toolbar-icon { - margin-right: 5px; - } - } + .toolbar-transitionButtons { + display: block; + + .toolbar-transition { + display: flex; + font-size: 10; + width: 100; + background-color: rgba(0, 0, 0, 0); + min-width: max-content; + + .toolbar-icon { + margin-right: 5px; } } } + } + + .toolbar-moreInfo { + position: absolute; + right: 5px; + display: flex; + width: max-content; + height: 25px; + /* background-color: pink; */ + justify-content: center; + transform: rotate(90deg); + align-items: center; + transition: 0.7s ease; - .toolbar-divider { - border-left: 1px solid white; - height: 80%; + .toolbar-moreInfoBall { + width: 4px; + height: 4px; + border-radius: 100%; + background-color: white; + margin: 1px; + position: relative; } } - .presBox-buttons { + .toolbar-moreInfo.active { + transform: rotate(0deg); + } + + .toolbar-divider { + border-left: solid #ffffff70 0.5px; + height: 20px; + } +} + +.dropdown { + font-size: 10; + margin-left: 5px; + color: darkgrey; + transition: 0.5s ease; +} + +.dropdown.active { + transform: rotate(180deg); + color: #AEDDF8; + opacity: 0.8; +} + +.presBox-ribbon { + position: relative; + display: none; + background-color: white; + color: black; + width: 100%; + height: 0; + z-index: 100; + transition: 0.7s; + + .toolbar-slider { position: relative; + -webkit-appearance: none; + transform: rotateY(180deg); + background-color: #40B3D8; + margin-top: 1px; width: 100%; - background: gray; - padding-top: 5px; - padding-bottom: 5px; + max-width: 100px; + height: 2.5px; + left: 0px; + } + + .toolbar-slider:focus { + outline: none; + } + + .toolbar-slider::-webkit-slider-thumb { + -webkit-appearance: none; + background-color: #40B3D8; + border: 1px white solid; + border-radius: 100%; + width: 9px; + height: 9px; + } + + .slider-headers { + position: relative; display: grid; - grid-column-end: 4; - grid-column-start: 1; + justify-content: space-between; + width: 100%; + grid-template-columns: auto auto auto; + grid-template-rows: auto; + font-weight: 100; + margin-top: 5px; + font-size: 8px; + } - .presBox-viewPicker { - height: 25; - position: relative; - display: inline-block; - grid-column: 1/2; - min-width: 15px; + .slider-value { + font-size: 10; + position: relative; + } + + .slider-value.none, + .slider-headers.none, + .toolbar-slider.none { + display: none; + } + + .dropdown-header { + padding-bottom: 10px; + font-weight: 800; + text-align: center; + font-size: 16; + width: 90%; + color: black; + transform: translate(5%, 0px); + border-bottom: solid 2px darkgrey; + } + + + .ribbon-textInput { + border-radius: 2px; + height: 25px; + font-size: 10; + font-weight: 100; + align-self: center; + justify-self: center; + padding-left: 10px; + border: solid 1px black; + width: 100%; + } + + .ribbon-final-box { + align-self: flex-start; + display: grid; + grid-template-rows: auto auto; + padding-left: 10px; + padding-right: 10px; + letter-spacing: normal; + width: max-content; + font-size: 13; + font-weight: 600; + position: relative; + + .selectedList { + display: block; + min-width: 50; + max-width: 120; + height: 70; + overflow-y: scroll; + + .selectedList-items { + font-size: 7; + font-weight: normal; + } } - select { - background: #323232; + + .ribbon-final-button { + position: relative; + font-size: 10; + font-weight: normal; + letter-spacing: normal; + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 5px; + height: 25px; color: white; + width: 100%; + max-width: 120; + padding-left: 10; + padding-right: 10; + border-radius: 10px; + background-color: #979797; } + } - .presBox-button { - margin-right: 2.5%; - margin-left: 2.5%; - height: 25px; - border-radius: 5px; + .ribbon-box { + display: grid; + grid-template-rows: max-content auto; + padding-left: 10px; + padding-right: 10px; + letter-spacing: normal; + width: max-content; + font-weight: 600; + position: relative; + font-size: 13; + border-right: solid 2px darkgrey; + + .ribbon-button { + font-size: 10; + font-weight: 200; + height: 25; + border: solid 1px black; display: flex; + border-radius: 10px; + margin-right: 5px; + width: max-content; + justify-content: center; align-items: center; - background: #323232; - color: white; + padding-right: 10px; + padding-left: 10px; + } + + .ribbon-button.active { + background-color: #5B9FDD; + } + + .ribbon-button:hover { + background-color: lightgrey; + } + + .presBox-dropdown:hover { + border: solid 1px #378AD8; + + .presBox-dropdownOption { + font-size: 10; + display: block; + padding-left: 5px; + margin-top: 3; + margin-bottom: 3; + } + + .presBox-dropdownOption:hover { + position: relative; + background-color: lightgrey; + } + + .presBox-dropdownOption.active { + position: relative; + background-color: #9CE2F8; + } + + .presBox-dropdownOptions { + position: absolute; + top: 19px; + left: -1px; + z-index: 200; + width: 85%; + display: block; + background: #FFFFFF; + border: 0.5px solid #979797; + box-sizing: border-box; + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + } - svg { - margin: auto; + .presBox-dropdownIcon { + color: #378AD8; } } - .collectionViewBaseChrome-viewPicker { - min-width: 50; - width: 5%; - height: 25; + .presBox-dropdown { + display: grid; + grid-template-columns: auto 20%; position: relative; - display: inline-block; + border: solid 1px black; + font-size: 10; + height: 20; + padding-left: 5px; + align-items: center; + margin-top: 5px; + margin-bottom: 5px; + font-weight: 200; + width: 100%; + min-width: max-content; + max-width: 120; + overflow: visible; + + .presBox-dropdownOptions { + display: none; + } + + .presBox-dropdownIcon { + position: relative; + color: black; + align-self: center; + justify-self: center; + } } } +} - .presBox-backward, - .presBox-forward { - width: 25px; - border-radius: 5px; - top: 50%; - position: absolute; +.presBox-ribbon.active { + display: inline-flex; + height: 100px; + padding-top: 5px; + padding-bottom: 5px; + border: solid 1px black; +} + + + +.dropdown-play { + top: 32px; + transform: translate(-28%, 0px); + /* left: 0; */ + display: none; + border-radius: 5px; + width: 100px; + height: 100px; + z-index: 200; + background-color: black; + position: absolute; +} + +.dropdown-play.active { + display: flex; +} + +.presBox-buttons { + position: relative; + width: 100%; + background: gray; + padding-top: 5px; + padding-bottom: 5px; + display: grid; + grid-template-columns: auto auto; + + .presBox-viewPicker { + height: 25; + position: relative; display: inline-block; + grid-column: 1; + border-radius: 5px; + min-width: 15px; + max-width: 100px; } - .presBox-backward { - left: 5; + .presBox-presentPanel { + display: flex; + justify-self: end; + width: 100%; + } - .presBox-forward { - right: 5; + select { + background: #323232; + color: white; + } + + .presBox-button { + margin-right: 2.5px; + margin-left: 2.5px; + height: 25px; + border-radius: 5px; + display: none; + justify-content: center; + align-content: center; + align-items: center; + text-align: center; + letter-spacing: normal; + width: inherit; + background: #323232; + color: white; + } + + .presBox-button.active { + display: flex; + } + + .presBox-button.edit { + display: flex; + max-width: 25px; + } + + .presBox-button.present { + display: flex; + min-width: 100px; + width: 100px; + position: absolute; + right: 0px; + + .present-icon { + margin-right: 7px; + } + } + + + + .collectionViewBaseChrome-viewPicker { + min-width: 50; + width: 5%; + height: 25; + position: relative; + display: inline-block; } } +.presBox-backward, +.presBox-forward { + width: 25px; + border-radius: 5px; + top: 50%; + position: absolute; + display: inline-block; +} + +.presBox-backward { + left: 5; +} + +.presBox-forward { + right: 5; +} + // CSS adjusted for mobile devices @media only screen and (max-device-width: 480px) { .presBox-cont .presBox-buttons { @@ -197,4 +514,4 @@ .select { font-size: 100%; } -} +} \ No newline at end of file diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index 736551443..abf97142e 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -14,7 +14,7 @@ import { CollectionView, CollectionViewType } from "../collections/CollectionVie import { FieldView, FieldViewProps } from './FieldView'; import "./PresBox.scss"; import { ViewBoxBaseComponent } from "../DocComponent"; -import { makeInterface } from "../../../fields/Schema"; +import { makeInterface, listSpec } from "../../../fields/Schema"; import { Docs } from "../../documents/Documents"; import { PrefetchProxy } from "../../../fields/Proxy"; import { ScriptField } from "../../../fields/ScriptField"; @@ -22,6 +22,8 @@ import { Scripting } from "../../util/Scripting"; import { InkingStroke } from "../InkingStroke"; import { HighlightSpanKind } from "typescript"; import { SearchUtil } from "../../util/SearchUtil"; +import { CollectionFreeFormDocumentView } from "./CollectionFreeFormDocumentView"; +import { child } from "serializr"; type PresBoxSchema = makeInterface<[typeof documentSchema]>; const PresBoxDocument = makeInterface(documentSchema); @@ -29,15 +31,17 @@ const PresBoxDocument = makeInterface(documentSchema); @observer export class PresBox extends ViewBoxBaseComponent(PresBoxDocument) { public static LayoutString(fieldKey: string) { return FieldView.LayoutString(PresBox, fieldKey); } + static Instance: PresBox; @observable _isChildActive = false; @computed get childDocs() { return DocListCast(this.dataDoc[this.fieldKey]); } @computed get itemIndex() { return NumCast(this.rootDoc._itemIndex); } @computed get presElement() { return Cast(Doc.UserDoc().presElement, Doc, null); } constructor(props: any) { super(props); + PresBox.Instance = this; if (!this.presElement) { // create exactly one presElmentBox template to use by any and all presentations. Doc.UserDoc().presElement = new PrefetchProxy(Docs.Create.PresElementBoxDocument({ - title: "pres element template", backgroundColor: "transparent", _xMargin: 0, _height: 20, isTemplateDoc: true, isTemplateForField: "data" + title: "pres element template", backgroundColor: "transparent", _xMargin: 0, isTemplateDoc: true, isTemplateForField: "data" })); // this script will be called by each presElement to get rendering-specific info that the PresBox knows about but which isn't written to the PresElement // this is a design choice -- we could write this data to the presElements which would require a reaction to keep it up to date, and it would prevent @@ -53,7 +57,14 @@ export class PresBox extends ViewBoxBaseComponent this.rootDoc.presBox = this.rootDoc; this.rootDoc._forceRenderEngine = "timeline"; this.rootDoc._replacedChrome = "replaced"; + this.layoutDoc.presStatus = "edit"; + document.addEventListener("keydown", this.keyEvents, false); } + + componentWillUnmount() { + document.removeEventListener("keydown", this.keyEvents, false); + } + updateCurrentPresentation = () => Doc.UserDoc().activePresentation = this.rootDoc; @undoBatch @@ -148,7 +159,7 @@ export class PresBox extends ViewBoxBaseComponent /** * This method makes sure that cursor navigates to the element that * has the option open and last in the group. If not in the group, and it has - * te option open, navigates to that element. + * the option open, navigates to that element. */ navigateToElement = async (curDoc: Doc, fromDocIndex: number) => { this.updateCurrentPresentation(); @@ -203,47 +214,57 @@ export class PresBox extends ViewBoxBaseComponent if (index >= 0 && index < this.childDocs.length) { this.rootDoc._itemIndex = index; const presTargetDoc = Cast(this.childDocs[this.itemIndex].presentationTargetDoc, Doc, null); - if (presTargetDoc.lastFrame !== undefined) { + if (presTargetDoc?.lastFrame !== undefined) { presTargetDoc.currentFrame = 0; } - - if (!this.layoutDoc.presStatus) { - this.layoutDoc.presStatus = true; - this.startPresentation(index); - } - const heights: number[] = []; - this.childDocs.forEach(doc => { - if (doc.presExpandInlineButton) heights.push(155); - else heights.push(58); - }); - let sum: number = 65; - for (let i = 0; i < this.itemIndex; i++) { - sum += heights[i]; - } - const highlight = document.getElementById("presBox-hightlight"); - if (this.itemIndex === 0 && highlight) highlight.style.top = "65"; - else if (highlight) highlight.style.top = sum.toString(); - if (this.childDocs[this.itemIndex].presExpandInlineButton && highlight) highlight.style.height = "156"; - else if (highlight) highlight.style.height = "58"; - console.log(highlight?.style.top); - console.log(highlight?.className); - console.log(sum); + // if (this.layoutDoc.presStatus === "edit") { + // this.layoutDoc.presStatus = true; + // this.startPresentation(index); + // } this.navigateToElement(this.childDocs[index], fromDoc); this.hideIfNotPresented(index); this.showAfterPresented(index); } }); + + @observable _presTimer!: NodeJS.Timeout; + //The function that starts or resets presentaton functionally, depending on status flag. + @action startOrResetPres = () => { this.updateCurrentPresentation(); - if (this.layoutDoc.presStatus) { - this.resetPresentation(); + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + if (this._presTimer && this.layoutDoc.presStatus === "auto") { + clearInterval(this._presTimer); + this.layoutDoc.presStatus = "manual"; } else { - this.layoutDoc.presStatus = true; - this.startPresentation(0); - this.gotoDocument(0, this.itemIndex); + this.layoutDoc.presStatus = "auto"; + // this.startPresentation(0); + // this.gotoDocument(0, this.itemIndex); + this._presTimer = setInterval(() => { + if (this.itemIndex + 1 < this.childDocs.length) this.next(); + else { + clearInterval(this._presTimer); + this.layoutDoc.presStatus = "manual"; + } + }, activeItem.presDuration ? NumCast(activeItem.presDuration) : 2000); + // for (let i = this.itemIndex + 1; i <= this.childDocs.length; i++) { + // if (this.itemIndex + 1 === this.childDocs.length) { + // clearTimeout(this._presTimer); + // this.layoutDoc.presStatus = "manual"; + // } else timer = setTimeout(() => { console.log(i); this.next(); }, i * 2000); + // } + } + + // if (this.layoutDoc.presStatus) { + // this.resetPresentation(); + // } else { + // this.layoutDoc.presStatus = true; + // this.startPresentation(0); + // this.gotoDocument(0, this.itemIndex); + // } } //The function that resets the presentation by removing every action done by it. It also @@ -252,7 +273,7 @@ export class PresBox extends ViewBoxBaseComponent this.updateCurrentPresentation(); this.childDocs.forEach(doc => (doc.presentationTargetDoc as Doc).opacity = 1); this.rootDoc._itemIndex = 0; - this.layoutDoc.presStatus = false; + // this.layoutDoc.presStatus = false; } //The function that starts the presentation, also checking if actions should be applied @@ -297,6 +318,39 @@ export class PresBox extends ViewBoxBaseComponent this.updateMinimize(e, this.rootDoc._viewType = viewType); }); + @undoBatch + movementChanged = action((movement: string) => { + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + if (movement === 'zoom') { + activeItem.presZoomButton = !activeItem.presZoomButton; + activeItem.presNavButton = false; + } else if (movement === 'nav') { + activeItem.presZoomButton = false; + activeItem.presNavButton = !activeItem.presNavButton; + } else { + activeItem.presZoomButton = false; + activeItem.presNavButton = false; + } + }); + + @undoBatch + visibilityChanged = action((visibility: string) => { + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + if (visibility === 'fade') { + activeItem.presFadeButton = !activeItem.presFadeButton; + } else if (visibility === 'hideBefore') { + activeItem.presHideTillShownButton = !activeItem.presHideTillShownButton; + activeItem.presHideAfterButton = false; + } else if (visibility === 'hideAfter') { + activeItem.presHideAfterButton = !activeItem.presHideAfterButton; + activeItem.presHideAfterButton = false; + } else { + activeItem.presHideAfterButton = false; + activeItem.presHideTillShownButton = false; + activeItem.presFadeButton = false; + } + }); + whenActiveChanged = action((isActive: boolean) => this.props.whenActiveChanged(this._isChildActive = isActive)); addDocumentFilter = (doc: Doc | Doc[]) => { const docs = doc instanceof Doc ? [doc] : doc; @@ -308,17 +362,124 @@ export class PresBox extends ViewBoxBaseComponent } childLayoutTemplate = () => this.rootDoc._viewType !== CollectionViewType.Stacking ? undefined : this.presElement; removeDocument = (doc: Doc) => Doc.RemoveDocFromList(this.dataDoc, this.fieldKey, doc); - selectElement = (doc: Doc) => this.gotoDocument(this.childDocs.indexOf(doc), NumCast(this.itemIndex)); getTransform = () => this.props.ScreenToLocalTransform().translate(-5, -65);// listBox padding-left and pres-box-cont minHeight panelHeight = () => this.props.PanelHeight() - 20; 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) + // KEYS + @observable _selectedArray: Doc[] = []; + + @computed get listOfSelected() { + const list = this._selectedArray.map((doc: Doc, index: any) => { + return ( +
{index + 1}. {doc.title}
+ ); + }); + return list; + } + + //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 + @action + multiSelect = (doc: Doc) => { + this._selectedArray.push(this.childDocs[this.childDocs.indexOf(doc)]); + console.log(this._selectedArray); + } + + //Shift click + @action + shiftSelect = (doc: Doc) => { + this._selectedArray = []; + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + if (activeItem) { + for (let i = Math.min(this.itemIndex, this.childDocs.indexOf(doc)); i <= Math.max(this.itemIndex, this.childDocs.indexOf(doc)); i++) { + this._selectedArray.push(this.childDocs[i]); + } + } + console.log(this._selectedArray); + } + + + + //Esc click + @action + keyEvents = (e: KeyboardEvent) => { + e.stopPropagation; + // Escape key + if (e.keyCode === 27) { + if (this.layoutDoc.presStatus === "edit") this._selectedArray = []; + else this.layoutDoc.presStatus = "edit"; + // Ctrl-A to select all + } else if ((e.metaKey || e.altKey) && e.keyCode === 65) { + this._selectedArray = this.childDocs; + } + } + + @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; + // For toggling transition toolbar - @action - toggleTransitionTools = () => this.transitionTools = !this.transitionTools + @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; + 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; + } + + @action toggleAllDropdowns() { + this.transitionTools = false; + this.newDocumentTools = false; + this.progressivizeTools = false; + this.moreInfoTools = false; + this.playTools = false; + } @undoBatch @action @@ -330,46 +491,26 @@ export class PresBox extends ViewBoxBaseComponent @undoBatch @action - viewLinks = () => { - const presTargetDoc = Cast(this.childDocs[this.itemIndex].presentationTargetDoc, Doc, null); - console.log(SearchUtil.GetContextsOfDocument(presTargetDoc)); - console.log(DocListCast(presTargetDoc.context)); - console.log(DocumentManager.Instance.getAllDocumentViews(presTargetDoc)); + viewLinks = async () => { + let docToJump = this.childDocs[0]; + // console.log(SearchUtil.GetContextsOfDocument(presTargetDoc)); + // console.log(DocListCast(presTargetDoc.context)); + // console.log(DocumentManager.Instance.getAllDocumentViews(presTargetDoc)); + const aliasOf = await DocCastAsync(docToJump.aliasOf); + const srcContext = aliasOf && await DocCastAsync(aliasOf.context); + console.log(srcContext?.title); + const viewType = srcContext?._viewType; + const fit = srcContext?._fitToBox; + if (srcContext) { + srcContext._fitToBox = true; + srcContext._viewType = "freeform"; + } // if (!DocumentManager.Instance.getDocumentView(curPres)) { // CollectionDockingView.AddRightSplit(curPres); // } } - @observable private activeItem = this.itemIndex ? this.childDocs[this.itemIndex] : null; - - - /** - * The function that is called on click to turn zoom option of docs on/off. - */ - @action - onZoomDocumentClick = (e: React.MouseEvent) => { - e.stopPropagation(); - const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); - activeItem.presZoomButton = !activeItem.presZoomButton; - if (activeItem.presZoomButton) { - activeItem.presNavButton = false; - } - } - - /** - * The function that is called on click to turn navigation option of docs on/off. - */ - @action - onNavigateDocumentClick = (e: React.MouseEvent) => { - e.stopPropagation(); - const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); - activeItem.presNavButton = !activeItem.presNavButton; - if (activeItem.presNavButton) { - activeItem.presZoomButton = false; - } - } - /** * The function that is called on click to turn fading document after presented option on/off. * It also makes sure that the option swithches from hide-after to this one, since both @@ -387,21 +528,20 @@ export class PresBox extends ViewBoxBaseComponent } } else { activeItem.presHideAfterButton = false; - if (this.rootDoc.presStatus && targetDoc) { + if (this.rootDoc.presStatus !== "edit" && targetDoc) { targetDoc.opacity = 0.5; } } } - // @computed - // transitionTimer = (doc: Doc) => { - // const slider: HTMLInputElement = document.getElementById("toolbar-slider"); - // // let output = document.getElementById("demo"); - // // if (output && slider) output.innerHTML = slider.value; // Display the default slider value - // const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); - // const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); - // targetDoc.presTransition = slider ? (Number(slider.value) * 1000) : 0.5; - // } + @action + dropdownToggle = (menu: string) => { + console.log('presBox' + menu + 'Dropdown'); + const dropMenu = document.getElementById('presBox' + menu + 'Dropdown'); + console.log(dropMenu); + console.log(dropMenu?.style.display); + if (dropMenu) dropMenu.style.display === 'none' ? dropMenu.style.display = 'block' : dropMenu.style.display = 'none'; + } setTransitionTime = (number: String) => { const timeInMS = Number(number) * 1000; @@ -410,13 +550,249 @@ export class PresBox extends ViewBoxBaseComponent if (targetDoc) targetDoc.presTransition = timeInMS; } + @computed get transitionDropdown() { + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + + if (activeItem) { + const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); + const transitionSpeed = targetDoc ? String(Number(targetDoc.presTransition) / 1000) : 0.5; + const visibilityTime = targetDoc ? String(Number(targetDoc.presTransition) / 1000) : 0.5; + const thumbLocation = String(-9.48 * Number(transitionSpeed) + 93); + const movement = activeItem.presZoomButton ? 'Zoom' : activeItem.presNavbutton ? 'Navigate' : 'None'; + const visibility = activeItem.presFadeButton ? 'Fade' : activeItem.presHideTillShownButton ? 'Hide till shown' : activeItem.presHideAfter ? 'Hide on exit' : 'None'; + return ( +
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}> +
+ Movement +
e.stopPropagation()} + // onClick={() => this.dropdownToggle('Movement')} + > + {movement} + +
e.stopPropagation()}> +
e.stopPropagation()} onClick={() => this.movementChanged('none')}>None
+
e.stopPropagation()} onClick={() => this.movementChanged('zoom')}>Zoom
+
e.stopPropagation()} onClick={() => this.movementChanged('nav')}>Navigate
+
+
+
{transitionSpeed}s
+ ) => { e.stopPropagation(); this.setTransitionTime(e.target.value); }} /> +
+
Slow
+
Medium
+
Fast
+
+
+
+ Visibility +
e.stopPropagation()} + // onClick={() => this.dropdownToggle('Movement')} + > + {visibility} + +
e.stopPropagation()}> +
e.stopPropagation()} onClick={() => this.visibilityChanged('none')}>None
+
e.stopPropagation()} onClick={() => this.visibilityChanged('fade')}>Fade on exit
+
e.stopPropagation()} onClick={() => this.visibilityChanged('hideAfter')}>Hide on exit
+
e.stopPropagation()} onClick={() => this.visibilityChanged('hideBefore')}>Hidden til presented
+
+
+
{transitionSpeed}s
+ ) => { e.stopPropagation(); this.setTransitionTime(e.target.value); }} /> +
+
Slow
+
Medium
+
Fast
+
+ {/*
Fade After
*/} + {/*
console.log("hide before")}>Hide Before
*/} + {/*
console.log("hide after")}>Hide After
*/} +
+
+ Effects +
e.stopPropagation()} + // onClick={() => this.dropdownToggle('Movement')} + > + None + +
e.stopPropagation()}> +
e.stopPropagation()}>None
+
+
+
+
+ {this._selectedArray.length} selected +
+ {this.listOfSelected} +
+
+
+
+ Apply to selected +
+
+ Apply to all +
+
+
+ ); + } + } + + public inputRef = React.createRef(); + + + createNewSlide = (title: string, type: string) => { + let doc = null; + if (type === "text") { + doc = Docs.Create.TextDocument("", { _nativeWidth: 400, _width: 400, title: title }); + const data = Cast(this.rootDoc.data, listSpec(Doc)); + if (data) data.push(doc); + } else { + doc = Docs.Create.FreeformDocument([], { _nativeWidth: 400, _width: 400, title: title }); + const data = Cast(this.rootDoc.data, listSpec(Doc)); + if (data) data.push(doc); + } + } + + @computed get newDocumentDropdown() { + let type = ""; + let title = ""; + return ( +
+
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}> +
+ Slide Title:

+ {/*
*/} + { + e.stopPropagation(); + title = e.target.value; + }}> + {/*
*/} +
+
+ Choose type: +
+
{ type = "text"; }}>Text
+
{ type = "freeform"; }}>Freeform
+
+
+
+
this.createNewSlide(title, type)}> + Create New Slide +
+
+
+
+ ); + } + + @computed get playDropdown() { + return ( +
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}> + +
+ ); + } + + @computed get progressivizeDropdown() { + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + if (activeItem) { + return ( +
+
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}> +
+
Progressivize Child Documents
+
+
+ Other progressivize features: +
Progressivize Text Bullet Points
+
Internal Navigation
+
+
+
+ ); + } + } + + @action + progressivize = (e: React.MouseEvent) => { + e.stopPropagation(); + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + activeItem.presProgressivize = !activeItem.presProgressivize; + const rootTarget = Cast(activeItem.presentationTargetDoc, Doc, null); + const docs = DocListCast(rootTarget[Doc.LayoutFieldKey(rootTarget)]); + if (this.rootDoc.presProgressivize) { + rootTarget.currentFrame = 0; + CollectionFreeFormDocumentView.setupKeyframes(docs, docs.length, true); + rootTarget.lastFrame = docs.length - 1; + } + } + + @computed get moreInfoDropdown() { + return (
); + + } + + @computed get toolbar() { + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + + if (activeItem) { + return ( + <> +
+ +
+
+
+
+
+
+ +
  Transitions
+ +
+
+
+ +
  Progressivize
+ +
+
+
+
+
+
+
+
+
+ + ); + } else { + return ( + <> +
+ +
+
+ +
+
+
+
+
+
+
+
+ + ); + } + } render() { - // console.log("render = " + this.layoutDoc.title + " " + this.layoutDoc.presStatus); - // const presOrderedDocs = DocListCast(activeItem.presOrderedDocs); - // if (presOrderedDocs.length != this.childDocs.length || presOrderedDocs.some((pd, i) => pd !== this.childDocs[i])) { - // this.rootDoc.presOrderedDocs = new List(this.childDocs.slice()); - // } this.childDocs.slice(); // needed to insure that the childDocs are loaded for looking up fields const mode = StrCast(this.rootDoc._viewType) as CollectionViewType; return
@@ -430,41 +806,33 @@ export class PresBox extends ViewBoxBaseComponent -
- -
-
- -
-
- -
-
-
-
-
-
-
-
-
-
-
- Transitions -
e.stopPropagation()}> -
- - - - ) => this.setTransitionTime(e.target.value)} /> - {/* */} - {/* - - */} -
+
+
+   + +
+ { e.stopPropagation; this.togglePlay(); }} className="dropdown" icon={"angle-down"} /> + {this.playDropdown} +
+
this.layoutDoc.presStatus = "manual"}> + Present +
+
+ +
+
+ +
+
this.layoutDoc.presStatus = "edit"}> +
-
+
{this.toolbar}
+ {this.newDocumentDropdown} + {this.moreInfoDropdown} + {this.transitionDropdown} + {this.progressivizeDropdown}
{mode !== CollectionViewType.Invalid ? moveDocument={returnFalse} childOpacity={returnOne} childLayoutTemplate={this.childLayoutTemplate} - filterAddDocument={this.addDocumentFilter} + filterAddDocument={returnFalse} removeDocument={returnFalse} dontRegisterView={true} focus={this.selectElement} + presMultiSelect={this.multiSelect} ScreenToLocalTransform={this.getTransform} /> : (null) } @@ -493,3 +862,11 @@ Scripting.addGlobal(function lookupPresBoxField(container: Doc, field: string, d if (field === 'presBox') return container; return undefined; }); + + + + // console.log("render = " + this.layoutDoc.title + " " + this.layoutDoc.presStatus); + // const presOrderedDocs = DocListCast(activeItem.presOrderedDocs); + // if (presOrderedDocs.length != this.childDocs.length || presOrderedDocs.some((pd, i) => pd !== this.childDocs[i])) { + // this.rootDoc.presOrderedDocs = new List(this.childDocs.slice()); + // } \ No newline at end of file diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss index 6d37ede8a..0e58d77a0 100644 --- a/src/client/views/presentationview/PresElementBox.scss +++ b/src/client/views/presentationview/PresElementBox.scss @@ -1,6 +1,9 @@ .presElementBox-item { - display: inline-block; - background-color: #eeeeee; + display: grid; + grid-template-rows: max-content max-content max-content; + background-color: #d0d0d0; + box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + position: relative; pointer-events: all; width: 100%; height: 100%; @@ -17,6 +20,15 @@ padding: 0px; padding-bottom: 3px; + .presElementBox-highlight { + position: absolute; + transform: translate(-100px, -6px); + z-index: -1; + width: calc(100% + 200px); + height: calc(100% + 12px); + background-color: #AEDDF8; + } + .documentView-node { position: absolute; z-index: 1; @@ -38,10 +50,9 @@ } .presElementBox-active { - background: gray; color: black; border-radius: 6px; - box-shadow: black 2px 2px 5px; + border: solid 2px #5B9FDD; } .presElementBox-buttons { @@ -88,6 +99,14 @@ white-space: pre; } +.presElementBox-time { + position: relative; + font-size: 8; + font-style: italic; + letter-spacing: normal; + left: 10px; +} + .presElementBox-embedded { position: relative; display: flex; @@ -143,4 +162,4 @@ display: flex; justify-content: center; align-items: center; -} +} \ No newline at end of file diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx index bca63e94d..f30ee2a5c 100644 --- a/src/client/views/presentationview/PresElementBox.tsx +++ b/src/client/views/presentationview/PresElementBox.tsx @@ -5,7 +5,7 @@ import { Doc, DataSym, DocListCast } from "../../../fields/Doc"; import { documentSchema } from '../../../fields/documentSchemas'; import { Id } from "../../../fields/FieldSymbols"; import { createSchema, makeInterface, listSpec } from '../../../fields/Schema'; -import { Cast, NumCast, BoolCast, ScriptCast } from "../../../fields/Types"; +import { Cast, NumCast, BoolCast, ScriptCast, StrCast } from "../../../fields/Types"; import { emptyFunction, emptyPath, returnFalse, returnTrue, returnOne, returnZero, numberRange } from "../../../Utils"; import { Transform } from "../../util/Transform"; import { CollectionViewType } from '../collections/CollectionView'; @@ -15,6 +15,7 @@ import { FieldView, FieldViewProps } from '../nodes/FieldView'; import "./PresElementBox.scss"; import React = require("react"); import { CollectionFreeFormDocumentView } from "../nodes/CollectionFreeFormDocumentView"; +import { PresBox } from "../nodes/PresBox"; export const presSchema = createSchema({ presentationTargetDoc: Doc, @@ -37,19 +38,18 @@ const PresDocument = makeInterface(presSchema, documentSchema); @observer export class PresElementBox extends ViewBoxBaseComponent(PresDocument) { public static LayoutString(fieldKey: string) { return FieldView.LayoutString(PresElementBox, fieldKey); } - _heightDisposer: IReactionDisposer | undefined; // these fields are conditionally computed fields on the layout document that take this document as a parameter @computed get indexInPres() { return Number(this.lookupField("indexInPres")); } // the index field is where this document is in the presBox display list (since this value is different for each presentation element, the value can't be stored on the layout template which is used by all display elements) - @computed get collapsedHeight() { return Number(this.lookupField("presCollapsedHeight")); } // the collapsed height changes depending on the state of the presBox. We could store this on the presentation elemnt template if it's used by only one presentation - but if it's shared by multiple, then this value must be looked up - @computed get presStatus() { return BoolCast(this.lookupField("presStatus")); } + @computed get collapsedHeight() { return Number(this.lookupField("presCollapsedHeight")); } // the collapsed height changes depending on the state of the presBox. We could store this on the presentation element template if it's used by only one presentation - but if it's shared by multiple, then this value must be looked up + @computed get presStatus() { return StrCast(this.lookupField("presStatus")); } @computed get itemIndex() { return NumCast(this.lookupField("_itemIndex")); } @computed get presBox() { return Cast(this.lookupField("presBox"), Doc, null); } @computed get targetDoc() { return Cast(this.rootDoc.presentationTargetDoc, Doc, null) || this.rootDoc; } componentDidMount() { this._heightDisposer = reaction(() => [this.rootDoc.presExpandInlineButton, this.collapsedHeight], - params => this.layoutDoc._height = NumCast(params[1]) + (Number(params[0]) ? 200 : 0), { fireImmediately: true }); + params => this.layoutDoc._height = NumCast(params[1]) + (Number(params[0]) ? 100 : 0), { fireImmediately: true }); } componentWillUnmount() { this._heightDisposer?.(); @@ -68,7 +68,7 @@ export class PresElementBox extends ViewBoxBaseComponent this.itemIndex && this.targetDoc) { + if (this.presStatus !== "edit" && this.indexInPres > this.itemIndex && this.targetDoc) { this.targetDoc.opacity = 0; } } @@ -89,7 +89,7 @@ export class PresElementBox extends ViewBoxBaseComponent { - const highlight = document.getElementById("presBox-hightlight"); this.rootDoc.presExpandInlineButton = !this.rootDoc.presExpandInlineButton; - if (highlight && this.rootDoc.presExpandInlineButton) highlight.style.height = "156"; - else if (highlight && !this.rootDoc.presExpandInlineButton) highlight.style.height = "58"; } - embedHeight = () => Math.min(this.props.PanelWidth() - 20, this.props.PanelHeight() - this.collapsedHeight); + embedHeight = () => 100; embedWidth = () => this.props.PanelWidth() - 20; + // embedHeight = () => Math.min(this.props.PanelWidth() - 20, this.props.PanelHeight() - this.collapsedHeight); + // embedWidth = () => this.props.PanelWidth() - 20; /** * The function that is responsible for rendering a preview or not for this * presentation element. @@ -220,7 +219,18 @@ export class PresElementBox extends ViewBoxBaseComponent { this.props.focus(this.rootDoc); e.stopPropagation(); }}> + onClick={e => { + if (e.ctrlKey || e.metaKey) { + PresBox.Instance.multiSelect(this.rootDoc); + console.log("cmmd click"); + } else if (e.shiftKey) { + PresBox.Instance.shiftSelect(this.rootDoc); + } else { + this.props.focus(this.rootDoc); e.stopPropagation(); + console.log("normal click"); + } + }} + onPointerDown={e => e.stopPropagation()}> {treecontainer ? (null) : <>
{`${this.indexInPres + 1}.`} @@ -228,6 +238,8 @@ export class PresElementBox extends ViewBoxBaseComponent {`${this.targetDoc?.title}`}
+
{"Transition speed: " + (this.targetDoc?.presTransition) + "ms"}
+
{"Duration: " + (this.targetDoc?.presDuration) + "ms"}
-
} +
- + - {/* */} - +
{this.renderEmbeddedInline}
-- cgit v1.2.3-70-g09d2 From 11ca5a85ff8ecf7c1709331c12d75213fdfa1589 Mon Sep 17 00:00:00 2001 From: geireann <60007097+geireann@users.noreply.github.com> Date: Wed, 15 Jul 2020 22:04:59 +0800 Subject: added progressivize features --- package-lock.json | 13 ++ package.json | 4 +- .../collectionFreeForm/CollectionFreeFormView.scss | 40 ++++- .../collectionFreeForm/CollectionFreeFormView.tsx | 40 ++++- .../views/nodes/CollectionFreeFormDocumentView.tsx | 9 +- src/client/views/nodes/PresBox.scss | 142 ++++++++++------ src/client/views/nodes/PresBox.tsx | 185 +++++++++++++++++---- .../views/presentationview/PresElementBox.tsx | 3 +- 8 files changed, 344 insertions(+), 92 deletions(-) (limited to 'src/client/views/nodes/PresBox.scss') diff --git a/package-lock.json b/package-lock.json index ad181758c..1e8359fbf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14335,6 +14335,14 @@ "react-draggable": "^4.0.3" } }, + "react-reveal": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/react-reveal/-/react-reveal-1.2.2.tgz", + "integrity": "sha512-JCv3fAoU6Z+Lcd8U48bwzm4pMZ79qsedSXYwpwt6lJNtj/v5nKJYZZbw3yhaQPPgYePo3Y0NOCoYOq/jcsisuw==", + "requires": { + "prop-types": "^15.5.10" + } + }, "react-select": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/react-select/-/react-select-3.1.0.tgz", @@ -14800,6 +14808,11 @@ "integrity": "sha1-G0KmJmoh8HQh0bC1S33BZ7AcATs=", "dev": true }, + "reveal.js": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/reveal.js/-/reveal.js-4.0.2.tgz", + "integrity": "sha512-LWZSUenufF1gpD7npxJ7KfoQQFKgc1D6XrLTFgKlwWNP1BQ74hT48KONFWMAw+8R/QUeaScCLCLrBVHDfFIEiw==" + }, "right-align": { "version": "0.1.3", "resolved": "https://registry.npmjs.org/right-align/-/right-align-0.1.3.tgz", diff --git a/package.json b/package.json index 89af3b0b5..745f7d947 100644 --- a/package.json +++ b/package.json @@ -222,11 +222,13 @@ "react-jsx-parser": "^1.25.1", "react-measure": "^2.2.4", "react-resizable": "^1.10.1", + "react-reveal": "^1.2.2", "react-select": "^3.1.0", "react-table": "^6.11.5", "readline": "^1.3.0", "request": "^2.88.0", "request-promise": "^4.2.5", + "reveal.js": "^4.0.2", "rimraf": "^3.0.0", "serializr": "^1.5.4", "sharp": "^0.23.4", @@ -248,4 +250,4 @@ "xoauth2": "^1.2.0", "xregexp": "^4.3.0" } -} \ No newline at end of file +} diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss index 92aee3776..fad90ca32 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss @@ -13,16 +13,54 @@ } .collectionfreeformview-viewdef { - > .collectionFreeFormDocumentView-container { + >.collectionFreeFormDocumentView-container { pointer-events: none; + .contentFittingDocumentDocumentView-previewDoc { pointer-events: all; } } + + svg.presPaths { + position: absolute; + z-index: 100000; + overflow: visible; + } + + svg.presPaths-hidden { + display: none; + } } .collectionfreeformview-none { touch-action: none; + + svg.presPaths { + position: absolute; + z-index: 100000; + overflow: visible; + } + + svg.presPaths-hidden { + display: none; + } +} + +.progressivizeButton { + position: absolute; + display: flex; + transform: translate(-105%, 0); + align-items: center; + border: black solid 1px; + border-radius: 3px; + justify-content: center; + width: 30; + height: 20; + background-color: #c8c8c8; +} + +.progressivizeButton:hover { + background-color: #aedef8; } .collectionFreeform-customText { diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 98be2dc03..ded410a9c 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -1,7 +1,7 @@ import { library } from "@fortawesome/fontawesome-svg-core"; import { faEye } from "@fortawesome/free-regular-svg-icons"; import { faBraille, faChalkboard, faCompass, faCompressArrowsAlt, faExpandArrowsAlt, faFileUpload, faPaintBrush, faTable, faUpload } from "@fortawesome/free-solid-svg-icons"; -import { action, computed, IReactionDisposer, observable, ObservableMap, reaction, runInAction } from "mobx"; +import { action, computed, IReactionDisposer, observable, ObservableMap, reaction, runInAction, trace } from "mobx"; import { observer } from "mobx-react"; import { computedFn } from "mobx-utils"; import { Doc, DocListCast, HeightSym, Opt, WidthSym } from "../../../../fields/Doc"; @@ -46,6 +46,7 @@ import "./CollectionFreeFormView.scss"; import MarqueeOptionsMenu from "./MarqueeOptionsMenu"; import { MarqueeView } from "./MarqueeView"; import React = require("react"); +import { PresBox } from "../../nodes/PresBox"; library.add(faEye as any, faTable, faPaintBrush, faExpandArrowsAlt, faCompressArrowsAlt, faCompass, faUpload, faBraille, faChalkboard, faFileUpload); @@ -1350,6 +1351,8 @@ export class CollectionFreeFormView extends CollectionSubView @@ -1432,11 +1435,44 @@ interface CollectionFreeFormViewPannableContentsProps { viewDefDivClick?: ScriptField; children: () => JSX.Element[]; transition?: string; + presPaths?: boolean; + progressivize?: boolean; } @observer class CollectionFreeFormViewPannableContents extends React.Component{ + @computed get progressivize() { + if (this.props.progressivize) { + console.log("should render"); + return ( + <> + {PresBox.Instance.progressivizeChildDocs} + + ); + } + } + + @computed get presPaths() { + const presPaths = "presPaths" + (this.props.presPaths ? "" : "-hidden"); + if (this.props.presPaths) { + return ( + + + + + + + + + ; + {PresBox.Instance.paths} + + ); + } + } + render() { + trace(); const freeformclass = "collectionfreeformview" + (this.props.viewDefDivClick ? "-viewDef" : "-none"); const cenx = this.props.centeringShiftX(); const ceny = this.props.centeringShiftY(); @@ -1449,6 +1485,8 @@ class CollectionFreeFormViewPannableContents extends React.Component {this.props.children()} + {this.presPaths} + {this.progressivize}
; } } diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index a3020f912..52a7d4ebf 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -15,6 +15,8 @@ import { numberRange } from "../../../Utils"; import { ComputedField } from "../../../fields/ScriptField"; import { listSpec } from "../../../fields/Schema"; import { DocumentType } from "../../documents/DocumentTypes"; +// @ts-ignore +import Zoom from 'react-reveal/Zoom'; export interface CollectionFreeFormDocumentViewProps extends DocumentViewProps { dataProvider?: (doc: Doc, replica: string) => { x: number, y: number, zIndex?: number, opacity?: number, highlight?: boolean, z: number, transition?: string } | undefined; @@ -112,10 +114,15 @@ export class CollectionFreeFormDocumentView extends DocComponent { + if (!doc.appearFrame) doc.appearFrame = i; const curTimecode = progressivize ? i : timecode; const xlist = new List(numberRange(timecode + 1).map(i => undefined) as any as number[]); const ylist = new List(numberRange(timecode + 1).map(i => undefined) as any as number[]); - const olist = new List(numberRange(timecode + 1).map(t => progressivize && t < i ? 0 : 1)); + const olist = new List(numberRange(timecode + 1).map(t => progressivize && (t < NumCast(doc.appearFrame)) ? 0 : 1)); + const oarray = new List(); + oarray.fill(0, 0, NumCast(doc.appearFrame) - 1); + oarray.fill(1, NumCast(doc.appearFrame), timecode); + console.log(oarray); xlist[curTimecode] = NumCast(doc.x); ylist[curTimecode] = NumCast(doc.y); doc["x-indexed"] = xlist; diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss index 07e53fa94..4d1518b61 100644 --- a/src/client/views/nodes/PresBox.scss +++ b/src/client/views/nodes/PresBox.scss @@ -125,12 +125,14 @@ .toolbar-slider { position: relative; + align-self: center; + justify-self: left; -webkit-appearance: none; transform: rotateY(180deg); background-color: #40B3D8; - margin-top: 1px; + margin-top: 5px; width: 100%; - max-width: 100px; + max-width: 120px; height: 2.5px; left: 0px; } @@ -153,16 +155,19 @@ display: grid; justify-content: space-between; width: 100%; + height: max-content; + max-width: 120px; grid-template-columns: auto auto auto; - grid-template-rows: auto; + grid-template-rows: max-content; font-weight: 100; - margin-top: 5px; + /* margin-top: 5px; */ font-size: 8px; } .slider-value { - font-size: 10; - position: relative; + top: -20; + color: #2f86a2; + position: absolute; } .slider-value.none, @@ -197,29 +202,18 @@ .ribbon-final-box { align-self: flex-start; + justify-self: center; display: grid; grid-template-rows: auto auto; padding-left: 10px; padding-right: 10px; letter-spacing: normal; - width: max-content; + min-width: max-content; + width: 100%; font-size: 13; font-weight: 600; position: relative; - .selectedList { - display: block; - min-width: 50; - max-width: 120; - height: 70; - overflow-y: scroll; - - .selectedList-items { - font-size: 7; - font-weight: normal; - } - } - .ribbon-final-button { position: relative; @@ -241,41 +235,61 @@ } } + .selectedList { + display: block; + min-width: 50; + max-width: 120; + height: 70; + overflow-y: scroll; + + .selectedList-items { + font-size: 7; + font-weight: normal; + } + } + + .ribbon-button { + font-size: 10; + font-weight: 200; + height: 25; + border: solid 1px black; + display: flex; + border-radius: 10px; + margin-right: 5px; + width: max-content; + justify-content: center; + align-items: center; + padding-right: 10px; + padding-left: 10px; + } + + .ribbon-button.active { + background-color: #5B9FDD; + } + + .ribbon-button:hover { + background-color: lightgrey; + } + + svg.svg-inline--fa.fa-thumbtack.fa-w-12.toolbar-thumbtack { + right: 40; + position: absolute; + transform: rotate(45deg); + } + .ribbon-box { display: grid; grid-template-rows: max-content auto; + justify-self: center; padding-left: 10px; padding-right: 10px; letter-spacing: normal; - width: max-content; + width: 100%; font-weight: 600; position: relative; font-size: 13; border-right: solid 2px darkgrey; - .ribbon-button { - font-size: 10; - font-weight: 200; - height: 25; - border: solid 1px black; - display: flex; - border-radius: 10px; - margin-right: 5px; - width: max-content; - justify-content: center; - align-items: center; - padding-right: 10px; - padding-left: 10px; - } - - .ribbon-button.active { - background-color: #5B9FDD; - } - - .ribbon-button:hover { - background-color: lightgrey; - } - .presBox-dropdown:hover { border: solid 1px #378AD8; @@ -283,6 +297,7 @@ font-size: 10; display: block; padding-left: 5px; + padding-right: 5px; margin-top: 3; margin-bottom: 3; } @@ -303,6 +318,7 @@ left: -1px; z-index: 200; width: 85%; + min-width: max-content; display: block; background: #FFFFFF; border: 0.5px solid #979797; @@ -341,36 +357,58 @@ color: black; align-self: center; justify-self: center; + margin-right: 2px; } } } } .presBox-ribbon.active { - display: inline-flex; + display: grid; + grid-template-columns: auto auto auto auto auto; + grid-template-rows: 100%; height: 100px; padding-top: 5px; padding-bottom: 5px; border: solid 1px black; -} + ::-webkit-scrollbar { + -webkit-appearance: none; + height: 3px; + width: 8px; + } + ::-webkit-scrollbar-thumb { + border-radius: 2px; + background-color: rgb(101, 164, 220); + } +} + +.dropdown-play-button { + font-size: 10; + margin-left: 10; + margin-right: 10; + padding-top: 5px; + padding-bottom: 5px; + text-align: left; + justify-content: left; + border-bottom: solid 1px lightgrey; +} .dropdown-play { top: 32px; - transform: translate(-28%, 0px); - /* left: 0; */ display: none; border-radius: 5px; - width: 100px; - height: 100px; + width: max-content; + min-height: 20px; + height: max-content; z-index: 200; - background-color: black; + background-color: #323232; position: absolute; } .dropdown-play.active { - display: flex; + display: block; } .presBox-buttons { diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index abf97142e..5c21f6656 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -25,6 +25,8 @@ import { SearchUtil } from "../../util/SearchUtil"; import { CollectionFreeFormDocumentView } from "./CollectionFreeFormDocumentView"; import { child } from "serializr"; + + type PresBoxSchema = makeInterface<[typeof documentSchema]>; const PresBoxDocument = makeInterface(documentSchema); @@ -232,7 +234,7 @@ export class PresBox extends ViewBoxBaseComponent //The function that starts or resets presentaton functionally, depending on status flag. @action - startOrResetPres = () => { + startOrResetPres = (startSlide: number) => { this.updateCurrentPresentation(); const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); if (this._presTimer && this.layoutDoc.presStatus === "auto") { @@ -240,8 +242,8 @@ export class PresBox extends ViewBoxBaseComponent this.layoutDoc.presStatus = "manual"; } else { this.layoutDoc.presStatus = "auto"; - // this.startPresentation(0); - // this.gotoDocument(0, this.itemIndex); + this.startPresentation(startSlide); + this.gotoDocument(startSlide, this.itemIndex); this._presTimer = setInterval(() => { if (this.itemIndex + 1 < this.childDocs.length) this.next(); else { @@ -373,8 +375,10 @@ export class PresBox extends ViewBoxBaseComponent @computed get listOfSelected() { const list = this._selectedArray.map((doc: Doc, index: any) => { + const activeItem = Cast(doc, Doc, null); + const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); return ( -
{index + 1}. {doc.title}
+
{index + 1}. {targetDoc.title}
); }); return list; @@ -415,13 +419,27 @@ export class PresBox extends ViewBoxBaseComponent @action keyEvents = (e: KeyboardEvent) => { e.stopPropagation; + // switch(e.keyCode) { + // case 27: console.log("escape"); + // case 65 && (e.metaKey || e.altKey): + // } // Escape key if (e.keyCode === 27) { if (this.layoutDoc.presStatus === "edit") this._selectedArray = []; else this.layoutDoc.presStatus = "edit"; // Ctrl-A to select all } else if ((e.metaKey || e.altKey) && e.keyCode === 65) { - this._selectedArray = this.childDocs; + if (this.layoutDoc.presStatus === "edit") this._selectedArray = this.childDocs; + // left / a / up to go back + } else if (e.keyCode === 37 || 65 || 38) { + if (this.layoutDoc.presStatus !== "edit") this.back(); + // right / d / down to go to next + } else if (e.keyCode === 39 || 68 || 40) { + if (this.layoutDoc.presStatus !== "edit") this.next(); + // spacebar to 'present' or go to next slide + } else if (e.keyCode === 32) { + if (this.layoutDoc.presStatus !== "edit") this.next(); + else this.layoutDoc.presStatus = "manual"; } } @@ -432,6 +450,8 @@ export class PresBox extends ViewBoxBaseComponent @observable private moreInfoTools: boolean = false; @observable private playTools: boolean = false; + @observable private pathBoolean: boolean = false; + // For toggling transition toolbar @action toggleTransitionTools = () => { this.transitionTools = !this.transitionTools; @@ -491,26 +511,64 @@ export class PresBox extends ViewBoxBaseComponent @undoBatch @action - viewLinks = async () => { - let docToJump = this.childDocs[0]; - // console.log(SearchUtil.GetContextsOfDocument(presTargetDoc)); - // console.log(DocListCast(presTargetDoc.context)); - // console.log(DocumentManager.Instance.getAllDocumentViews(presTargetDoc)); + viewPaths = async () => { + const docToJump = this.childDocs[0]; const aliasOf = await DocCastAsync(docToJump.aliasOf); const srcContext = aliasOf && await DocCastAsync(aliasOf.context); - console.log(srcContext?.title); + if (this.pathBoolean) { + console.log("true"); + if (srcContext) { + this.togglePath(); + srcContext._fitToBox = false; + srcContext._viewType = "freeform"; + srcContext.presPathView = false; + } + } else { + console.log("false"); + if (srcContext) { + this.togglePath(); + srcContext._fitToBox = true; + srcContext._viewType = "freeform"; + srcContext.presPathView = true; + } + } + console.log("view paths"); const viewType = srcContext?._viewType; const fit = srcContext?._fitToBox; - if (srcContext) { - srcContext._fitToBox = true; - srcContext._viewType = "freeform"; - } // if (!DocumentManager.Instance.getDocumentView(curPres)) { // CollectionDockingView.AddRightSplit(curPres); // } } + @computed get paths() { + const paths = []; //List of all of the paths that need to be added + console.log(this.childDocs.length - 1); + for (let i = 0; i <= this.childDocs.length - 1; i++) { + const targetDoc = Cast(this.childDocs[i].presentationTargetDoc, Doc, null); + if (this.childDocs[i + 1] && targetDoc) { + const nextTargetDoc = Cast(this.childDocs[i + 1].presentationTargetDoc, Doc, null); + const n1x = NumCast(targetDoc.x) + (NumCast(targetDoc._width) / 2); + const n1y = NumCast(targetDoc.y) + (NumCast(targetDoc._height) / 2); + const n2x = NumCast(nextTargetDoc.x) + (NumCast(targetDoc._width) / 2); + const n2y = NumCast(nextTargetDoc.y) + (NumCast(targetDoc._height) / 2); + const pathPoints = n1x + "," + n1y + " " + n2x + "," + n2y; + paths.push(); + } + } + return paths; + } + + @action togglePath = () => this.pathBoolean = !this.pathBoolean; + /** * The function that is called on click to turn fading document after presented option on/off. * It also makes sure that the option swithches from hide-after to this one, since both @@ -572,13 +630,13 @@ export class PresBox extends ViewBoxBaseComponent
e.stopPropagation()}>
e.stopPropagation()} onClick={() => this.movementChanged('none')}>None
-
e.stopPropagation()} onClick={() => this.movementChanged('zoom')}>Zoom
-
e.stopPropagation()} onClick={() => this.movementChanged('nav')}>Navigate
+
e.stopPropagation()} onClick={() => this.movementChanged('zoom')}>Pan and Zoom
+
e.stopPropagation()} onClick={() => this.movementChanged('nav')}>Pan
-
{transitionSpeed}s
) => { e.stopPropagation(); this.setTransitionTime(e.target.value); }} />
+
{transitionSpeed}s
Slow
Medium
Fast
@@ -693,24 +751,48 @@ export class PresBox extends ViewBoxBaseComponent @computed get playDropdown() { return (
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}> - +
this.startOrResetPres(this.itemIndex)}> + Start from current slide +
+
this.startOrResetPres(0)}> + Start from first slide +
); } + progressivizeOptions = (viewType: string) => { + const buttons = []; + buttons.push(
Progressivize child documents
); + buttons.push(
console.log("hide after")}>Internal navigation
); + if (viewType === "rtf") { + buttons.push(
console.log("hide after")}>Bullet points
); + } + return buttons; + } + + + @computed get progressivizeDropdown() { const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); - if (activeItem) { + const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null); + + if (activeItem && targetDoc) { return (
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
-
Progressivize Child Documents
+ {targetDoc.type} selected +
+
1. {targetDoc.title}
+
-
- Other progressivize features: -
Progressivize Text Bullet Points
-
Internal Navigation
+
+
+
Progressivize child documents
+
Edit
+
+
console.log("hide after")}>Internal navigation
@@ -718,20 +800,50 @@ export class PresBox extends ViewBoxBaseComponent } } + @action + editProgressivize = (e: React.MouseEvent) => { + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); + targetDoc.currentFrame = targetDoc.lastFrame; + if (targetDoc?.editProgressivize) { + targetDoc.editProgressivize = false; + } else { + targetDoc.editProgressivize = true; + } + } + @action progressivize = (e: React.MouseEvent) => { e.stopPropagation(); const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); activeItem.presProgressivize = !activeItem.presProgressivize; - const rootTarget = Cast(activeItem.presentationTargetDoc, Doc, null); - const docs = DocListCast(rootTarget[Doc.LayoutFieldKey(rootTarget)]); - if (this.rootDoc.presProgressivize) { - rootTarget.currentFrame = 0; + const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); + const docs = DocListCast(targetDoc[Doc.LayoutFieldKey(targetDoc)]); + targetDoc.presProgressivize = !targetDoc.presProgressivize; + console.log(targetDoc.presProgressivize); + if (activeItem.presProgressivize) { + console.log("progressivize"); + targetDoc.currentFrame = 0; CollectionFreeFormDocumentView.setupKeyframes(docs, docs.length, true); - rootTarget.lastFrame = docs.length - 1; + targetDoc.lastFrame = docs.length - 1; } } + @computed get progressivizeChildDocs() { + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null); + const docs = DocListCast(targetDoc[Doc.LayoutFieldKey(targetDoc)]); + const tags: JSX.Element[] = []; + docs.forEach((doc, index) => { + tags.push( +
{doc.appearFrame}
+ ); + }); + return tags; + } + + + @computed get moreInfoDropdown() { return (
); @@ -747,8 +859,8 @@ export class PresBox extends ViewBoxBaseComponent
-
-
+
+ {/*
*/}
@@ -762,6 +874,9 @@ export class PresBox extends ViewBoxBaseComponent
+
+ +
@@ -778,7 +893,7 @@ export class PresBox extends ViewBoxBaseComponent
- +
@@ -807,10 +922,10 @@ export class PresBox extends ViewBoxBaseComponent
-
+
this.startOrResetPres(0)}>   -
+
{ e.stopPropagation; this.togglePlay(); }} className="dropdown" icon={"angle-down"} /> {this.playDropdown}
diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx index f30ee2a5c..fc040f67b 100644 --- a/src/client/views/presentationview/PresElementBox.tsx +++ b/src/client/views/presentationview/PresElementBox.tsx @@ -230,7 +230,8 @@ export class PresElementBox extends ViewBoxBaseComponent e.stopPropagation()}> + // onPointerDown={e => e.stopPropagation()} + > {treecontainer ? (null) : <>
{`${this.indexInPres + 1}.`} -- cgit v1.2.3-70-g09d2 From ae47181bab9bdaa104dc417c4493bc1a0e52eea1 Mon Sep 17 00:00:00 2001 From: geireann <60007097+geireann@users.noreply.github.com> Date: Fri, 17 Jul 2020 14:38:02 +0800 Subject: pres changes --- package-lock.json | 5 + package.json | 1 + .../collectionFreeForm/CollectionFreeFormView.tsx | 36 +++--- .../views/nodes/CollectionFreeFormDocumentView.tsx | 53 ++++++--- src/client/views/nodes/PresBox.scss | 28 +++++ src/client/views/nodes/PresBox.tsx | 129 ++++++++++++++++----- src/typings/index.d.ts | 5 +- tsconfig.json | 3 +- 8 files changed, 195 insertions(+), 65 deletions(-) (limited to 'src/client/views/nodes/PresBox.scss') diff --git a/package-lock.json b/package-lock.json index 1e8359fbf..f0f40d4dd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1205,6 +1205,11 @@ "@types/request": "*" } }, + "@types/reveal": { + "version": "3.3.33", + "resolved": "https://registry.npmjs.org/@types/reveal/-/reveal-3.3.33.tgz", + "integrity": "sha512-lKbezA9Oa5LfdSRwFDc/FHEGH4+FjiXh/a/PCSZAmN+KCeQJL/3ClOdAQwOxt3zdHc8XyioT+cNvIOletwRI7A==" + }, "@types/rimraf": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/@types/rimraf/-/rimraf-2.0.4.tgz", diff --git a/package.json b/package.json index 745f7d947..eef6aae03 100644 --- a/package.json +++ b/package.json @@ -123,6 +123,7 @@ "@hig/theme-data": "^2.16.1", "@material-ui/core": "^4.11.0", "@types/google-maps": "^3.2.2", + "@types/reveal": "^3.3.33", "@types/webscopeio__react-textarea-autocomplete": "^4.6.1", "@webscopeio/react-textarea-autocomplete": "^4.7.0", "adm-zip": "^0.4.16", diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index ded410a9c..2b55008f4 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -48,6 +48,7 @@ import { MarqueeView } from "./MarqueeView"; import React = require("react"); import { PresBox } from "../../nodes/PresBox"; + library.add(faEye as any, faTable, faPaintBrush, faExpandArrowsAlt, faCompressArrowsAlt, faCompass, faUpload, faBraille, faChalkboard, faFileUpload); export const panZoomSchema = createSchema({ @@ -1352,7 +1353,7 @@ export class CollectionFreeFormView extends CollectionSubView @@ -1436,21 +1437,21 @@ interface CollectionFreeFormViewPannableContentsProps { children: () => JSX.Element[]; transition?: string; presPaths?: boolean; - progressivize?: boolean; + // progressivize?: boolean; } @observer class CollectionFreeFormViewPannableContents extends React.Component{ - @computed get progressivize() { - if (this.props.progressivize) { - console.log("should render"); - return ( - <> - {PresBox.Instance.progressivizeChildDocs} - - ); - } - } + // @computed get progressivize() { + // if (this.props.progressivize) { + // console.log("should render"); + // return ( + // <> + // {PresBox.Instance.progressivizeChildDocs} + // + // ); + // } + // } @computed get presPaths() { const presPaths = "presPaths" + (this.props.presPaths ? "" : "-hidden"); @@ -1458,11 +1459,12 @@ class CollectionFreeFormViewPannableContents extends React.Component - - + + - - + + ; {PresBox.Instance.paths} @@ -1486,7 +1488,7 @@ class CollectionFreeFormViewPannableContents extends React.Component {this.props.children()} {this.presPaths} - {this.progressivize} + {/* {this.progressivize} */}
; } } diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index 52a7d4ebf..f797ffe8a 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -15,8 +15,9 @@ import { numberRange } from "../../../Utils"; import { ComputedField } from "../../../fields/ScriptField"; import { listSpec } from "../../../fields/Schema"; import { DocumentType } from "../../documents/DocumentTypes"; -// @ts-ignore -import Zoom from 'react-reveal/Zoom'; +import { Zoom, Fade, Flip, Rotate, Bounce, Roll, LightSpeed } from 'react-reveal'; +import { PresBox } from "./PresBox"; + export interface CollectionFreeFormDocumentViewProps extends DocumentViewProps { dataProvider?: (doc: Doc, replica: string) => { x: number, y: number, zIndex?: number, opacity?: number, highlight?: boolean, z: number, transition?: string } | undefined; @@ -118,8 +119,10 @@ export class CollectionFreeFormDocumentView extends DocComponent(numberRange(timecode + 1).map(i => undefined) as any as number[]); const ylist = new List(numberRange(timecode + 1).map(i => undefined) as any as number[]); - const olist = new List(numberRange(timecode + 1).map(t => progressivize && (t < NumCast(doc.appearFrame)) ? 0 : 1)); - const oarray = new List(); + const olist = new List(numberRange(timecode + 1).map(t => progressivize && t < i ? 0 : 1)); + const oarray: number[] = []; + console.log(doc.title + "AF: " + doc.appearFrame); + console.log("timecode: " + timecode); oarray.fill(0, 0, NumCast(doc.appearFrame) - 1); oarray.fill(1, NumCast(doc.appearFrame), timecode); console.log(oarray); @@ -141,6 +144,35 @@ export class CollectionFreeFormDocumentView extends DocComponent; + if (this.layoutDoc === PresBox.Instance.childDocs[PresBox.Instance.itemIndex]?.presentationTargetDoc) { + switch (this.layoutDoc.presEffect) { + case "Zoom": return ({node}); break; + case "Fade": return ({node}); break; + case "Flip": return ({node}); break; + case "Rotate": return ({node}); break; + case "Bounce": return ({node}); break; + case "Roll": return ({node}); break; + case "LightSpeed": return ({node}); break; + case "None": return node; break; + default: return node; break; + } + } else { + return node; + } + } + contentScaling = () => this.nativeWidth > 0 && !this.props.fitToBox && !this.freezeDimensions ? this.width / this.nativeWidth : 1; panelWidth = () => (this.sizeProvider?.width || this.props.PanelWidth?.()); panelHeight = () => (this.sizeProvider?.height || this.props.PanelHeight?.()); @@ -171,6 +203,7 @@ export class CollectionFreeFormDocumentView extends DocComponent + {Doc.UserDoc().renderStyle !== "comic" ? (null) :
@@ -180,17 +213,7 @@ export class CollectionFreeFormDocumentView extends DocComponent} {!this.props.fitToBox ? - + <>{this.freeformNodeDiv} : ; @@ -226,6 +226,7 @@ export class PresBox extends ViewBoxBaseComponent this.navigateToElement(this.childDocs[index], fromDoc); this.hideIfNotPresented(index); this.showAfterPresented(index); + this.onHideDocumentUntilPressClick(); } }); @@ -237,6 +238,7 @@ export class PresBox extends ViewBoxBaseComponent startOrResetPres = (startSlide: number) => { this.updateCurrentPresentation(); const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); if (this._presTimer && this.layoutDoc.presStatus === "auto") { clearInterval(this._presTimer); this.layoutDoc.presStatus = "manual"; @@ -250,7 +252,7 @@ export class PresBox extends ViewBoxBaseComponent clearInterval(this._presTimer); this.layoutDoc.presStatus = "manual"; } - }, activeItem.presDuration ? NumCast(activeItem.presDuration) : 2000); + }, targetDoc.presDuration ? NumCast(targetDoc.presDuration) + NumCast(targetDoc.presTransition) : 2000); // for (let i = this.itemIndex + 1; i <= this.childDocs.length; i++) { // if (this.itemIndex + 1 === this.childDocs.length) { // clearTimeout(this._presTimer); @@ -323,12 +325,15 @@ export class PresBox extends ViewBoxBaseComponent @undoBatch movementChanged = action((movement: string) => { const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); if (movement === 'zoom') { activeItem.presZoomButton = !activeItem.presZoomButton; activeItem.presNavButton = false; } else if (movement === 'nav') { activeItem.presZoomButton = false; activeItem.presNavButton = !activeItem.presNavButton; + } else if (movement === 'swap') { + targetDoc.presTransition = 0; } else { activeItem.presZoomButton = false; activeItem.presNavButton = false; @@ -443,13 +448,29 @@ export class PresBox extends ViewBoxBaseComponent } } + @action + onHideDocumentUntilPressClick = () => { + 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) { + tagDoc.opacity = 1; + } else { + tagDoc.opacity = 0; + } + } + }); + } + @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 pathBoolean: boolean = false; // For toggling transition toolbar @@ -556,11 +577,11 @@ export class PresBox extends ViewBoxBaseComponent paths.push(); } } @@ -608,15 +629,24 @@ export class PresBox extends ViewBoxBaseComponent if (targetDoc) targetDoc.presTransition = timeInMS; } + setDurationTime = (number: String) => { + const timeInMS = Number(number) * 1000; + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); + if (targetDoc) targetDoc.presDuration = timeInMS; + } + @computed get transitionDropdown() { const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); if (activeItem) { const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); - const transitionSpeed = targetDoc ? String(Number(targetDoc.presTransition) / 1000) : 0.5; - const visibilityTime = targetDoc ? String(Number(targetDoc.presTransition) / 1000) : 0.5; - const thumbLocation = String(-9.48 * Number(transitionSpeed) + 93); + const transitionSpeed = targetDoc.presTransition ? String(Number(targetDoc.presTransition) / 1000) : 0.5; + const duration = targetDoc.presDuration ? String(Number(targetDoc.presDuration) / 1000) : 2; + const transitionThumbLocation = String(-9.48 * Number(transitionSpeed) + 93); + const durationThumbLocation = String(9.48 * Number(duration)); const movement = activeItem.presZoomButton ? 'Zoom' : activeItem.presNavbutton ? 'Navigate' : 'None'; + const effect = targetDoc.presEffect ? targetDoc.presEffect : 'None'; const visibility = activeItem.presFadeButton ? 'Fade' : activeItem.presHideTillShownButton ? 'Hide till shown' : activeItem.presHideAfter ? 'Hide on exit' : 'None'; return (
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}> @@ -632,37 +662,30 @@ export class PresBox extends ViewBoxBaseComponent
e.stopPropagation()} onClick={() => this.movementChanged('none')}>None
e.stopPropagation()} onClick={() => this.movementChanged('zoom')}>Pan and Zoom
e.stopPropagation()} onClick={() => this.movementChanged('nav')}>Pan
+
e.stopPropagation()} onClick={() => this.movementChanged('swap')}>Swap
) => { e.stopPropagation(); this.setTransitionTime(e.target.value); }} />
-
{transitionSpeed}s
+
{transitionSpeed}s
Slow
Medium
Fast
- Visibility + Duration
e.stopPropagation()} - // onClick={() => this.dropdownToggle('Movement')} > - {visibility} - -
e.stopPropagation()}> -
e.stopPropagation()} onClick={() => this.visibilityChanged('none')}>None
-
e.stopPropagation()} onClick={() => this.visibilityChanged('fade')}>Fade on exit
-
e.stopPropagation()} onClick={() => this.visibilityChanged('hideAfter')}>Hide on exit
-
e.stopPropagation()} onClick={() => this.visibilityChanged('hideBefore')}>Hidden til presented
-
+ {duration} seconds
-
{transitionSpeed}s
- ) => { e.stopPropagation(); this.setTransitionTime(e.target.value); }} /> -
-
Slow
-
Medium
-
Fast
+ ) => { e.stopPropagation(); this.setDurationTime(e.target.value); }} /> +
+
{duration}s
+
Short
+
+
Long
{/*
Fade After
*/} {/*
console.log("hide before")}>Hide Before
*/} @@ -674,12 +697,24 @@ export class PresBox extends ViewBoxBaseComponent onPointerDown={e => e.stopPropagation()} // onClick={() => this.dropdownToggle('Movement')} > - None + {effect}
e.stopPropagation()}> -
e.stopPropagation()}>None
+
e.stopPropagation()} onClick={() => targetDoc.presEffect = 'None'}>None
+
e.stopPropagation()} onClick={() => targetDoc.presEffect = 'Fade'}>Fade In
+
e.stopPropagation()} onClick={() => targetDoc.presEffect = 'Flip'}>Flip
+
e.stopPropagation()} onClick={() => targetDoc.presEffect = 'Rotate'}>Rotate
+
e.stopPropagation()} onClick={() => targetDoc.presEffect = 'Bounce'}>Bounce
+
e.stopPropagation()} onClick={() => targetDoc.presEffect = 'Roll'}>Roll
+
+
targetDoc.presEffectDirection = 'left'}>
+
targetDoc.presEffectDirection = 'right'}>
+
targetDoc.presEffectDirection = 'top'}>
+
targetDoc.presEffectDirection = 'bottom'}>
+
targetDoc.presEffectDirection = false}>
+
{this._selectedArray.length} selected @@ -688,10 +723,10 @@ export class PresBox extends ViewBoxBaseComponent
-
+
this.applyTo(this._selectedArray)}> Apply to selected
-
+
this.applyTo(this.childDocs)}> Apply to all
@@ -700,6 +735,20 @@ export class PresBox extends ViewBoxBaseComponent } } + applyTo = (array: Doc[]) => { + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null); + array.forEach((doc, index) => { + const curDoc = Cast(doc, Doc, null); + const tagDoc = Cast(curDoc.presentationTargetDoc, Doc, null); + if (tagDoc && targetDoc) { + tagDoc.presTransition = targetDoc.presTransition; + tagDoc.presDuration = targetDoc.presDuration; + tagDoc.presEffect = targetDoc.presEffect; + } + }); + } + public inputRef = React.createRef(); @@ -846,7 +895,22 @@ export class PresBox extends ViewBoxBaseComponent @computed get moreInfoDropdown() { return (
); + } + + @computed get effectOpenBracket() { + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); + if (targetDoc.presEffect && this.itemIndex) { + return ("<" + targetDoc.presEffect + "when=" + this.layoutDoc === PresBox.Instance.childDocs[this.itemIndex].presentationTargetDoc + ">"); + } else return; + } + @computed get effectCloseBracket() { + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); + if (targetDoc.presEffect && this.itemIndex) { + return (""); + } else return; } @computed get toolbar() { @@ -895,8 +959,11 @@ export class PresBox extends ViewBoxBaseComponent
-
-
+ +

uppercase

+ +
+
diff --git a/src/typings/index.d.ts b/src/typings/index.d.ts index 452882e09..799a3ee6f 100644 --- a/src/typings/index.d.ts +++ b/src/typings/index.d.ts @@ -6,7 +6,10 @@ declare module 'cors'; declare module 'webrtc-adapter'; declare module 'bezier-curve'; -declare module 'fit-curve' +declare module 'fit-curve'; +declare module 'reveal'; +declare module 'react-reveal'; +declare module 'react-reveal/makeCarousel'; declare module '@react-pdf/renderer' { diff --git a/tsconfig.json b/tsconfig.json index 803245ca6..b06cec79f 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -15,7 +15,8 @@ "es2015" ], "typeRoots": [ - "node_modules/@types" + "node_modules/@types", + "./src/typings" ], "types": [ "youtube" -- cgit v1.2.3-70-g09d2 From ad6762c369fd0933326579707ecbc34fda42ab6c Mon Sep 17 00:00:00 2001 From: geireann <60007097+geireann@users.noreply.github.com> Date: Mon, 20 Jul 2020 22:53:08 +0800 Subject: ui updates + progressivize features --- deploy/index.html | 1 + src/client/documents/Documents.ts | 3 + src/client/views/collections/CollectionMenu.scss | 60 +-- .../collectionFreeForm/CollectionFreeFormView.scss | 56 ++- .../collectionFreeForm/CollectionFreeFormView.tsx | 62 ++- .../views/nodes/CollectionFreeFormDocumentView.tsx | 34 +- src/client/views/nodes/PresBox.scss | 68 ++- src/client/views/nodes/PresBox.tsx | 504 +++++++++++++++------ .../views/presentationview/PresElementBox.scss | 40 +- .../views/presentationview/PresElementBox.tsx | 25 +- 10 files changed, 602 insertions(+), 251 deletions(-) (limited to 'src/client/views/nodes/PresBox.scss') diff --git a/deploy/index.html b/deploy/index.html index 82e8c53a3..990ca510d 100644 --- a/deploy/index.html +++ b/deploy/index.html @@ -3,6 +3,7 @@ Dash Web + diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 080369afe..89a7c0f18 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -133,8 +133,11 @@ export interface DocumentOptions { currentFrame?: number; // the current frame of a frame-based collection (e.g., progressive slide) lastFrame?: number; // the last frame of a frame-based collection (e.g., progressive slide) activeFrame?: number; // the active frame of a document in a frame base collection + appearFrame?: number; // the frame in which the document appears presTransition?: number; //the time taken for the transition TO a document presDuration?: number; //the duration of the slide in presentation view + // xArray?: number[]; + // yArray?: number[]; borderRounding?: string; boxShadow?: string; dontRegisterChildViews?: boolean; diff --git a/src/client/views/collections/CollectionMenu.scss b/src/client/views/collections/CollectionMenu.scss index 348b9e6ea..929c22c35 100644 --- a/src/client/views/collections/CollectionMenu.scss +++ b/src/client/views/collections/CollectionMenu.scss @@ -312,44 +312,44 @@ align-items: center; .fwdKeyframe, - .numKeyframe, - .backKeyframe { - cursor: pointer; - position: absolute; - width: 20; - height: 30; - bottom: 0; - background: #121721; - display: flex; - align-items: center; - color: white; - } +.numKeyframe, +.backKeyframe { + cursor: pointer; + position: absolute; + width: 20; + height: 30; + bottom: 0; + background: #121721; + display: flex; + align-items: center; + color: white; +} - .backKeyframe { - left: 0; +.backKeyframe { + left: 0; - svg { - display: block; - margin: auto; - } + svg { + display: block; + margin: auto; } +} - .numKeyframe { - left: 20; - display: flex; - flex-direction: column; - padding: 5px; - } +.numKeyframe { + left: 20; + display: flex; + flex-direction: column; + padding: 5px; +} - .fwdKeyframe { - left: 40; +.fwdKeyframe { + left: 40; - svg { - display: block; - margin: auto; - } + svg { + display: block; + margin: auto; } } +} .collectionSchemaViewChrome-cont { display: flex; diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss index fad90ca32..b50a93775 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss @@ -46,21 +46,69 @@ } } +.pathOrder { + position: absolute; + z-index: 200000; + + .pathOrder-frame { + position: absolute; + width: 40; + text-align: center; + font-size: 30; + background-color: #69a6db; + font-family: Roboto; + font-weight: 300; + } +} + .progressivizeButton { position: absolute; - display: flex; + display: grid; + grid-template-columns: auto 20px auto; transform: translate(-105%, 0); align-items: center; border: black solid 1px; border-radius: 3px; justify-content: center; - width: 30; + width: 40; + z-index: 30000; height: 20; - background-color: #c8c8c8; + overflow: hidden; + background-color: #d5dce2; + transition: all 1s; + + .progressivizeButton-prev:hover { + color: #5a9edd; + } + + .progressivizeButton-frame { + justify-self: center; + text-align: center; + width: 15px; + } + + .progressivizeButton-next:hover { + color: #5a9edd; + } +} + +.progressivizeMove-frame { + width: 40px; + border-radius: 2px; + z-index: 100000; + color: white; + text-align: center; + background-color: #5a9edd; + transform: translate(-105%, -110%); } .progressivizeButton:hover { - background-color: #aedef8; + box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.5); + + .progressivizeButton-frame { + background-color: #5a9edd; + color: white; + } } .collectionFreeform-customText { diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 45c5c6a40..953b218b2 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -1408,7 +1408,7 @@ export class CollectionFreeFormView extends CollectionSubView @@ -1493,44 +1493,56 @@ interface CollectionFreeFormViewPannableContentsProps { children: () => JSX.Element[]; transition?: string; presPaths?: boolean; - // progressivize?: boolean; + progressivize?: boolean; } @observer class CollectionFreeFormViewPannableContents extends React.Component{ - // @computed get progressivize() { - // if (this.props.progressivize) { - // console.log("should render"); - // return ( - // <> - // {PresBox.Instance.progressivizeChildDocs} - // - // ); - // } - // } + @computed get progressivize() { + if (this.props.progressivize) { + console.log("should render"); + return ( + <> + {PresBox.Instance.progressivizeChildDocs} + + ); + } + } @computed get presPaths() { const presPaths = "presPaths" + (this.props.presPaths ? "" : "-hidden"); if (this.props.presPaths) { return ( - - - - - - - - - ; + <> +
{PresBox.Instance.order}
+ + + + + + + + + + + + + + + + ; {PresBox.Instance.paths} - + + ); } } render() { - trace(); + // trace(); const freeformclass = "collectionfreeformview" + (this.props.viewDefDivClick ? "-viewDef" : "-none"); const cenx = this.props.centeringShiftX(); const ceny = this.props.centeringShiftY(); @@ -1544,7 +1556,7 @@ class CollectionFreeFormViewPannableContents extends React.Component {this.props.children()} {this.presPaths} - {/* {this.progressivize} */} + {this.progressivize}
; } } diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index b975e24e2..2cf2ab35d 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -119,18 +119,23 @@ export class CollectionFreeFormDocumentView extends DocComponent(numberRange(timecode + 1).map(i => undefined) as any as number[]); const ylist = new List(numberRange(timecode + 1).map(i => undefined) as any as number[]); - const olist = new List(numberRange(timecode + 1).map(t => progressivize && t < i ? 0 : 1)); - const oarray: number[] = []; + const olist = new List(numberRange(timecode + 1).map(t => progressivize && t < (doc.appearFrame ? doc.appearFrame : i) ? 0 : 1)); + let oarray: List; console.log(doc.title + "AF: " + doc.appearFrame); console.log("timecode: " + timecode); + oarray = olist; oarray.fill(0, 0, NumCast(doc.appearFrame) - 1); oarray.fill(1, NumCast(doc.appearFrame), timecode); + // oarray.fill(0, 0, NumCast(doc.appearFrame) - 1); + // oarray.fill(1, NumCast(doc.appearFrame), timecode); console.log(oarray); xlist[curTimecode] = NumCast(doc.x); ylist[curTimecode] = NumCast(doc.y); + doc.xArray = xlist; + doc.yArray = ylist; doc["x-indexed"] = xlist; doc["y-indexed"] = ylist; - doc["opacity-indexed"] = olist; + doc["opacity-indexed"] = oarray; doc.activeFrame = ComputedField.MakeFunction("self.context?.currentFrame||0"); doc.x = ComputedField.MakeInterpolated("x", "activeFrame"); doc.y = ComputedField.MakeInterpolated("y", "activeFrame"); @@ -157,14 +162,23 @@ export class CollectionFreeFormDocumentView extends DocComponent; if (this.layoutDoc === PresBox.Instance.childDocs[PresBox.Instance.itemIndex]?.presentationTargetDoc) { + const effectProps = { + left: this.layoutDoc.presEffectDirection === 'left', + right: this.layoutDoc.presEffectDirection === 'right', + top: this.layoutDoc.presEffectDirection === 'top', + bottom: this.layoutDoc.presEffectDirection === 'bottom', + opposite: true, + delay: this.layoutDoc.presTransition, + // when: this.layoutDoc === PresBox.Instance.childDocs[PresBox.Instance.itemIndex]?.presentationTargetDoc, + }; switch (this.layoutDoc.presEffect) { - case "Zoom": return ({node}); break; - case "Fade": return ({node}); break; - case "Flip": return ({node}); break; - case "Rotate": return ({node}); break; - case "Bounce": return ({node}); break; - case "Roll": return ({node}); break; - case "LightSpeed": return ({node}); break; + case "Zoom": return ({node}); break; + case "Fade": return ({node}); break; + case "Flip": return ({node}); break; + case "Rotate": return ({node}); break; + case "Bounce": return ({node}); break; + case "Roll": return ({node}); break; + case "LightSpeed": return ({node}); break; case "None": return node; break; default: return node; break; } diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss index bf31f71d2..45bb4293b 100644 --- a/src/client/views/nodes/PresBox.scss +++ b/src/client/views/nodes/PresBox.scss @@ -3,6 +3,7 @@ display: block; pointer-events: inherit; z-index: 2; + font-family: Roboto; box-shadow: #AAAAAA .2vw .2vw .4vw; width: 100%; min-width: 20px; @@ -16,7 +17,7 @@ position: relative; height: calc(100% - 25px); width: 100%; - margin-top: 10px; + margin-top: 3px; } .presBox-toolbar { @@ -39,12 +40,6 @@ display: flex; align-items: center; transition: 0.5s; - - @media only screen and (max-width: 400) { - .toolbar-buttonText { - display: none; - } - } } .toolbar-button.active { @@ -116,6 +111,7 @@ .presBox-ribbon { position: relative; display: none; + font-family: Roboto; background-color: white; color: black; width: 100%; @@ -123,6 +119,10 @@ z-index: 100; transition: 0.7s; + .ribbon-doubleButton { + display: inline-flex; + } + .toolbar-slider { position: relative; align-self: center; @@ -199,16 +199,56 @@ .ribbon-textInput { border-radius: 2px; - height: 25px; + height: 20px; font-size: 10; font-weight: 100; align-self: center; justify-self: center; padding-left: 10px; border: solid 1px black; + min-width: 80px; width: 100%; } + .ribbon-frameSelector { + border: black solid 1px; + width: 60px; + height: 20px; + display: grid; + grid-template-columns: auto 27px auto; + position: relative; + border-radius: 5px; + overflow: hidden; + align-items: center; + justify-self: left; + + .fwdKeyframe, + .backKeyframe { + cursor: pointer; + position: relative; + height: 100%; + background: #d5dce2; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + color: black; + } + + .numKeyframe { + font-size: 10; + font-weight: 600; + position: relative; + color: black; + display: flex; + width: 100%; + height: 100%; + text-align: center; + align-items: center; + justify-content: center; + } + } + .ribbon-final-box { align-self: flex-start; justify-self: center; @@ -279,10 +319,12 @@ .ribbon-button { font-size: 10; font-weight: 200; - height: 25; + height: 20; border: solid 1px black; display: flex; - border-radius: 10px; + margin-top: 5px; + margin-bottom: 5px; + border-radius: 5px; margin-right: 5px; width: max-content; justify-content: center; @@ -326,8 +368,8 @@ display: block; padding-left: 5px; padding-right: 5px; - margin-top: 3; - margin-bottom: 3; + padding-top: 3; + padding-bottom: 3; } .presBox-dropdownOption:hover { @@ -337,7 +379,7 @@ .presBox-dropdownOption.active { position: relative; - background-color: #9CE2F8; + background-color: #aedef8; } .presBox-dropdownOptions { diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index fc5e73c81..9b942c065 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -2,10 +2,10 @@ import React = require("react"); import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { action, computed, observable } from "mobx"; import { observer } from "mobx-react"; -import { Doc, DocListCast, DocCastAsync } from "../../../fields/Doc"; +import { Doc, DocListCast, DocCastAsync, WidthSym } from "../../../fields/Doc"; import { InkTool } from "../../../fields/InkField"; import { BoolCast, Cast, NumCast, StrCast } from "../../../fields/Types"; -import { returnFalse, returnOne } from "../../../Utils"; +import { returnFalse, returnOne, numberRange } from "../../../Utils"; import { documentSchema } from "../../../fields/documentSchemas"; import { DocumentManager } from "../../util/DocumentManager"; import { undoBatch } from "../../util/UndoManager"; @@ -25,6 +25,9 @@ import { SearchUtil } from "../../util/SearchUtil"; import { CollectionFreeFormDocumentView } from "./CollectionFreeFormDocumentView"; import { child } from "serializr"; import { Zoom, Fade, Flip, Rotate, Bounce, Roll, LightSpeed } from 'react-reveal'; +import { List } from "../../../fields/List"; +import { Tooltip } from "@material-ui/core"; +import { CollectionFreeFormViewChrome } from "../collections/CollectionMenu"; type PresBoxSchema = makeInterface<[typeof documentSchema]>; @@ -60,11 +63,21 @@ export class PresBox extends ViewBoxBaseComponent this.rootDoc._forceRenderEngine = "timeline"; this.rootDoc._replacedChrome = "replaced"; this.layoutDoc.presStatus = "edit"; - document.addEventListener("keydown", this.keyEvents, false); + // document.addEventListener("keydown", this.keyEvents, false); } - componentWillUnmount() { - document.removeEventListener("keydown", this.keyEvents, false); + // componentWillUnmount() { + // document.removeEventListener("keydown", this.keyEvents, false); + // } + + onPointerOver = () => { + document.addEventListener("keydown", this.keyEvents, true); + // document.addEventListener("keydown", this.keyEvents, false); + } + + onPointerLeave = () => { + // document.removeEventListener("keydown", this.keyEvents, false); + document.removeEventListener("keydown", this.keyEvents, true); } updateCurrentPresentation = () => Doc.UserDoc().activePresentation = this.rootDoc; @@ -114,50 +127,77 @@ export class PresBox extends ViewBoxBaseComponent } } + + @action + onHideDocumentUntilPressClick = () => { + 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) { + tagDoc.opacity = 1; + } else { + tagDoc.opacity = 0; + } + } + }); + } + /** * 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: + * before the document has been presented, which involves 3 button options: * Hide Until Presented, Hide After Presented, Fade After Presented */ - showAfterPresented = (index: number) => { + @action + hideDocumentInPres = () => { 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.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.presFadeButton && ind < index) { - presTargetDoc.opacity = 0.5; + 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 - * before the document has been presented, which involves 3 button options: + * after the document has been presented, which involves 3 button options: * Hide Until Presented, Hide After Presented, Fade After Presented */ - hideIfNotPresented = (index: number) => { + showAfterPresented = (index: number) => { this.updateCurrentPresentation(); - this.childDocs.forEach((key, ind) => { + this.childDocs.forEach((doc, ind) => { + const presTargetDoc = doc.presentationTargetDoc as Doc; //the order of cases is aligned based on priority - const presTargetDoc = key.presentationTargetDoc as Doc; - if (key.hideAfterButton && ind >= index) { - presTargetDoc.opacity = 1; - } - if (key.fadeButton && ind >= index) { + if (doc.presHideTillShownButton && ind <= index) { presTargetDoc.opacity = 1; } - if (key.hideTillShownButton && ind > index) { + if (doc.presHideAfterButton && ind < index) { presTargetDoc.opacity = 0; } }); } + /** * This method makes sure that cursor navigates to the element that * has the option open and last in the group. If not in the group, and it has @@ -224,9 +264,10 @@ export class PresBox extends ViewBoxBaseComponent // this.startPresentation(index); // } this.navigateToElement(this.childDocs[index], fromDoc); - this.hideIfNotPresented(index); - this.showAfterPresented(index); - this.onHideDocumentUntilPressClick(); + // this.hideIfNotPresented(index); + // this.showAfterPresented(index); + this.hideDocumentInPres(); + // this.onHideDocumentUntilPressClick(); } }); @@ -340,24 +381,6 @@ export class PresBox extends ViewBoxBaseComponent } }); - @undoBatch - visibilityChanged = action((visibility: string) => { - const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); - if (visibility === 'fade') { - activeItem.presFadeButton = !activeItem.presFadeButton; - } else if (visibility === 'hideBefore') { - activeItem.presHideTillShownButton = !activeItem.presHideTillShownButton; - activeItem.presHideAfterButton = false; - } else if (visibility === 'hideAfter') { - activeItem.presHideAfterButton = !activeItem.presHideAfterButton; - activeItem.presHideAfterButton = false; - } else { - activeItem.presHideAfterButton = false; - activeItem.presHideTillShownButton = false; - activeItem.presFadeButton = false; - } - }); - whenActiveChanged = action((isActive: boolean) => this.props.whenActiveChanged(this._isChildActive = isActive)); addDocumentFilter = (doc: Doc | Doc[]) => { const docs = doc instanceof Doc ? [doc] : doc; @@ -433,39 +456,21 @@ export class PresBox extends ViewBoxBaseComponent if (this.layoutDoc.presStatus === "edit") this._selectedArray = []; else this.layoutDoc.presStatus = "edit"; // Ctrl-A to select all - } else if ((e.metaKey || e.altKey) && e.keyCode === 65) { + } if ((e.metaKey || e.altKey) && e.keyCode === 65) { if (this.layoutDoc.presStatus === "edit") this._selectedArray = this.childDocs; // left / a / up to go back - } else if (e.keyCode === 37 || 65 || 38) { + } if (e.keyCode === 37 || 65 || 38) { if (this.layoutDoc.presStatus !== "edit") this.back(); // right / d / down to go to next - } else if (e.keyCode === 39 || 68 || 40) { + } if (e.keyCode === 39 || 68 || 40) { if (this.layoutDoc.presStatus !== "edit") this.next(); // spacebar to 'present' or go to next slide - } else if (e.keyCode === 32) { + } if (e.keyCode === 32) { if (this.layoutDoc.presStatus !== "edit") this.next(); else this.layoutDoc.presStatus = "manual"; } } - @action - onHideDocumentUntilPressClick = () => { - 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) { - tagDoc.opacity = 1; - } else { - tagDoc.opacity = 0; - } - } - }); - } - - @observable private transitionTools: boolean = false; @observable private newDocumentTools: boolean = false; @observable private progressivizeTools: boolean = false; @@ -562,30 +567,60 @@ export class PresBox extends ViewBoxBaseComponent // } } + @computed get order() { + const order: JSX.Element[] = []; + this.childDocs.forEach((doc, index) => { + const targetDoc = Cast(doc.presentationTargetDoc, Doc, null); + order.push( +
+
{index + 1}
+
); + }); + return order; + } + @computed get paths() { - const paths = []; //List of all of the paths that need to be added + // const paths = []; //List of all of the paths that need to be added + let pathPoints = ""; console.log(this.childDocs.length - 1); - for (let i = 0; i <= this.childDocs.length - 1; i++) { - const targetDoc = Cast(this.childDocs[i].presentationTargetDoc, Doc, null); - if (this.childDocs[i + 1] && targetDoc) { - const nextTargetDoc = Cast(this.childDocs[i + 1].presentationTargetDoc, Doc, null); + this.childDocs.forEach((doc, index) => { + const targetDoc = Cast(doc.presentationTargetDoc, Doc, null); + if (targetDoc) { const n1x = NumCast(targetDoc.x) + (NumCast(targetDoc._width) / 2); const n1y = NumCast(targetDoc.y) + (NumCast(targetDoc._height) / 2); - const n2x = NumCast(nextTargetDoc.x) + (NumCast(targetDoc._width) / 2); - const n2y = NumCast(nextTargetDoc.y) + (NumCast(targetDoc._height) / 2); - const pathPoints = n1x + "," + n1y + " " + n2x + "," + n2y; - paths.push(); + // const n2x = NumCast(nextTargetDoc.x) + (NumCast(targetDoc._width) / 2); + // const n2y = NumCast(nextTargetDoc.y) + (NumCast(targetDoc._height) / 2); + if (index = 0) pathPoints = n1x + "," + n1y; + else pathPoints = pathPoints + " " + n1x + "," + n1y; + // const pathPoints = n1x + "," + n1y + " " + n2x + "," + n2y; + // else pathPoints = pathPoints + " " + n1x + "," + n1y; + // paths.push(); } - } - return paths; + }); + console.log(pathPoints); + // return paths; + return (); } @action togglePath = () => this.pathBoolean = !this.pathBoolean; @@ -638,16 +673,14 @@ export class PresBox extends ViewBoxBaseComponent @computed get transitionDropdown() { const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); - - if (activeItem) { - const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); + const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null); + if (activeItem && targetDoc) { const transitionSpeed = targetDoc.presTransition ? String(Number(targetDoc.presTransition) / 1000) : 0.5; const duration = targetDoc.presDuration ? String(Number(targetDoc.presDuration) / 1000) : 2; const transitionThumbLocation = String(-9.48 * Number(transitionSpeed) + 93); const durationThumbLocation = String(9.48 * Number(duration)); const movement = activeItem.presZoomButton ? 'Zoom' : activeItem.presNavbutton ? 'Navigate' : 'None'; const effect = targetDoc.presEffect ? targetDoc.presEffect : 'None'; - const visibility = activeItem.presFadeButton ? 'Fade' : activeItem.presHideTillShownButton ? 'Hide till shown' : activeItem.presHideAfter ? 'Hide on exit' : 'None'; return (
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
@@ -669,16 +702,15 @@ export class PresBox extends ViewBoxBaseComponent
{transitionSpeed}s
Slow
-
Medium
+
Fast
- Duration -
e.stopPropagation()} - > - {duration} seconds + Visibility +
+
{"Hide before presented"}
}>
activeItem.presHideTillShownButton = !activeItem.presHideTillShownButton}>HB
 +
{"Hide after presented"}
}>
activeItem.presHideAfterButton = !activeItem.presHideAfterButton}>HA
) => { e.stopPropagation(); this.setDurationTime(e.target.value); }} />
@@ -709,11 +741,11 @@ export class PresBox extends ViewBoxBaseComponent
-
targetDoc.presEffectDirection = 'left'}>
-
targetDoc.presEffectDirection = 'right'}>
-
targetDoc.presEffectDirection = 'top'}>
-
targetDoc.presEffectDirection = 'bottom'}>
-
targetDoc.presEffectDirection = false}>
+
{"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}>
@@ -782,9 +814,9 @@ export class PresBox extends ViewBoxBaseComponent
Choose type: -
-
{ type = "text"; }}>Text
-
{ type = "freeform"; }}>Freeform
+
+
{ type = "text"; })}>Text
+
{ type = "freeform"; })}>Freeform
@@ -810,17 +842,43 @@ export class PresBox extends ViewBoxBaseComponent ); } - progressivizeOptions = (viewType: string) => { - const buttons = []; - buttons.push(
Progressivize child documents
); - buttons.push(
console.log("hide after")}>Internal navigation
); - if (viewType === "rtf") { - buttons.push(
console.log("hide after")}>Bullet points
); + // 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; + // } + + @undoBatch + @action + nextKeyframe = (tagDoc: Doc): void => { + const childDocs = DocListCast(tagDoc[Doc.LayoutFieldKey(tagDoc)]); + const currentFrame = Cast(tagDoc.currentFrame, "number", null); + if (currentFrame === undefined) { + tagDoc.currentFrame = 0; + CollectionFreeFormDocumentView.setupKeyframes(childDocs, 0); } - return buttons; + CollectionFreeFormDocumentView.updateKeyframe(childDocs, currentFrame || 0); + tagDoc.currentFrame = Math.max(0, (currentFrame || 0) + 1); + tagDoc.lastFrame = Math.max(NumCast(tagDoc.currentFrame), NumCast(tagDoc.lastFrame)); } - + @undoBatch + @action + prevKeyframe = (tagDoc: Doc): void => { + const childDocs = DocListCast(tagDoc[Doc.LayoutFieldKey(tagDoc)]); + const currentFrame = Cast(tagDoc.currentFrame, "number", null); + if (currentFrame === undefined) { + tagDoc.currentFrame = 0; + CollectionFreeFormDocumentView.setupKeyframes(childDocs, 0); + } + CollectionFreeFormDocumentView.gotoKeyframe(childDocs.slice()); + tagDoc.currentFrame = Math.max(0, (currentFrame || 0) - 1); + } @computed get progressivizeDropdown() { const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); @@ -832,16 +890,38 @@ export class PresBox extends ViewBoxBaseComponent
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
{targetDoc.type} selected -
-
1. {targetDoc.title}
+
+
{targetDoc.title}
+
+
+
+
{ e.stopPropagation(); this.prevKeyframe(targetDoc); }}> + +
+
targetDoc.editing = !targetDoc.editing)} > + {NumCast(targetDoc.currentFrame)} +
+
{ e.stopPropagation(); this.nextKeyframe(targetDoc); }}> + +
+
+
{"Last frame"}
}>
{NumCast(targetDoc.lastFrame)}
-
-
Progressivize child documents
-
Edit
+
+
Child documents
+
Edit
+
+
+
Internal zoom
+
Edit
+
+
+
Text progressivize
+
Edit
-
console.log("hide after")}>Internal navigation
@@ -849,8 +929,38 @@ export class PresBox extends ViewBoxBaseComponent } } + //Progressivize Zoom @action - editProgressivize = (e: React.MouseEvent) => { + zoomProgressivize = (e: React.MouseEvent) => { + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); + targetDoc.currentFrame = targetDoc.lastFrame; + if (targetDoc?.zoomProgressivize) { + targetDoc.zoomProgressivize = false; + } else { + targetDoc.zoomProgressivize = true; + } + } + + @action + progressivizeZoom = (e: React.MouseEvent) => { + e.stopPropagation(); + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + activeItem.zoomProgressivize = !activeItem.zoomProgressivize; + const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); + const docs = DocListCast(targetDoc[Doc.LayoutFieldKey(targetDoc)]); + targetDoc.zoomProgressivize = !targetDoc.zoomProgressivize; + console.log(targetDoc.zoomProgressivize); + if (activeItem.zoomProgressivize) { + console.log("progressivize"); + targetDoc.currentFrame = 0; + CollectionFreeFormDocumentView.setupKeyframes(docs, docs.length, true); + } + } + + //Progressivize Text nodes + @action + textProgressivize = (e: React.MouseEvent) => { const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); targetDoc.currentFrame = targetDoc.lastFrame; @@ -862,7 +972,7 @@ export class PresBox extends ViewBoxBaseComponent } @action - progressivize = (e: React.MouseEvent) => { + progressivizeText = (e: React.MouseEvent) => { e.stopPropagation(); const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); activeItem.presProgressivize = !activeItem.presProgressivize; @@ -878,67 +988,163 @@ export class PresBox extends ViewBoxBaseComponent } } + //Progressivize Child Docs + @action + editProgressivize = (e: React.MouseEvent) => { + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); + targetDoc.currentFrame = targetDoc.lastFrame; + if (targetDoc?.editProgressivize) { + targetDoc.editProgressivize = false; + } else { + targetDoc.editProgressivize = true; + } + } + + @action + progressivizeChild = (e: React.MouseEvent) => { + e.stopPropagation(); + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); + const docs = DocListCast(targetDoc[Doc.LayoutFieldKey(targetDoc)]); + if (!activeItem.presProgressivize) { + activeItem.presProgressivize = true; + targetDoc.presProgressivize = true; + targetDoc.currentFrame = 0; + CollectionFreeFormDocumentView.setupKeyframes(docs, docs.length, true); + targetDoc.lastFrame = docs.length - 1; + } else { + activeItem.presProgressivize = false; + targetDoc.presProgressivize = false; + docs.forEach((doc, index) => { + doc.appearFrame = 0; + }); + targetDoc.currentFrame = 0; + targetDoc.lastFrame = 0; + } + } + + @action + checkMovementLists = (doc: Doc, xlist: any, ylist: any) => { + const x: List = xlist; + const y: List = ylist; + const tags: JSX.Element[] = []; + let pathPoints = ""; //List of all of the paths that need to be added + // console.log(x); + // console.log(x.length); + // console.log(x[0]); + for (let i = 0; i < x.length - 1; i++) { + if (y[i] || x[i]) { + if (i === 0) pathPoints = (x[i] - 11) + "," + (y[i] + 33); + else pathPoints = pathPoints + " " + (x[i] - 11) + "," + (y[i] + 33); + tags.push(
{i}
); + } + } + tags.push(); + return tags; + } + + @observable + toggleDisplayMovement = (doc: Doc) => { + if (doc.displayMovement) doc.displayMovement = false; + else doc.displayMovement = true; + } + @computed get progressivizeChildDocs() { const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null); const docs = DocListCast(targetDoc[Doc.LayoutFieldKey(targetDoc)]); const tags: JSX.Element[] = []; docs.forEach((doc, index) => { + if (doc["x-indexed"] && doc["y-indexed"]) { + tags.push(
{this.checkMovementLists(doc, doc["x-indexed"], doc["y-indexed"])}
); + } tags.push( -
{doc.appearFrame}
- ); +
{ if (NumCast(targetDoc.currentFrame) < NumCast(doc.appearFrame)) doc.opacity = 0; }} onPointerOver={() => { if (NumCast(targetDoc.currentFrame) < NumCast(doc.appearFrame)) doc.opacity = 0.5; }} onClick={e => { this.toggleDisplayMovement(doc); e.stopPropagation(); }} style={{ backgroundColor: doc.displayMovement ? "#aedff8" : "#c8c8c8", top: NumCast(doc.y), left: NumCast(doc.x) }}> +
{ e.stopPropagation(); this.prevAppearFrame(doc, index); }} />
+
{doc.appearFrame}
+
{ e.stopPropagation(); this.nextAppearFrame(doc, index); }} />
+
); }); return tags; } - - - @computed get moreInfoDropdown() { - return (
); + @undoBatch + @action + nextAppearFrame = (doc: Doc, i: number): void => { + console.log("next"); + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null); + const appearFrame = Cast(doc.appearFrame, "number", null); + if (appearFrame === undefined) { + doc.appearFrame = 0; + } + doc.appearFrame = appearFrame + 1; + const olist = new List(numberRange(NumCast(targetDoc.lastFrame)).map(t => targetDoc.presProgressivize && t < (doc.appearFrame ? doc.appearFrame : i) ? 0 : 1)); + doc["opacity-indexed"] = olist; + console.log(doc.appearFrame); } - @computed get effectOpenBracket() { + @undoBatch + @action + prevAppearFrame = (doc: Doc, i: number): void => { + console.log("prev"); const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); - const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); - if (targetDoc.presEffect && this.itemIndex) { - return ("<" + targetDoc.presEffect + "when=" + this.layoutDoc === PresBox.Instance.childDocs[this.itemIndex].presentationTargetDoc + ">"); - } else return; + const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null); + const appearFrame = Cast(doc.appearFrame, "number", null); + if (appearFrame === undefined) { + doc.appearFrame = 0; + } + doc.appearFrame = Math.max(0, appearFrame - 1); + const olist = new List(numberRange(NumCast(targetDoc.lastFrame)).map(t => targetDoc.presProgressivize && t < (doc.appearFrame ? doc.appearFrame : i) ? 0 : 1)); + doc["opacity-indexed"] = olist; + console.log(doc.appearFrame); } - @computed get effectCloseBracket() { - const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); - const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); - if (targetDoc.presEffect && this.itemIndex) { - return (""); - } else return; + @computed get moreInfoDropdown() { + return (
); } @computed get toolbar() { const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); - + const parent = document.getElementById('toolbarContainer'); + let width = 0; + if (parent) width = parent.offsetWidth; + console.log(width); if (activeItem) { return ( <> -
+
{"Add new slide"}
}>
-
+
-
+
{"View paths"}
}>
+ +
{/*
*/}
-
  Transitions
+
400 ? "block" : "none" }} className="toolbar-buttonText">  Transitions
-
  Progressivize
+
400 ? "block" : "none" }} className="toolbar-buttonText">  Progressivize
-
+
@@ -977,7 +1183,7 @@ export class PresBox extends ViewBoxBaseComponent render() { this.childDocs.slice(); // needed to insure that the childDocs are loaded for looking up fields const mode = StrCast(this.rootDoc._viewType) as CollectionViewType; - return
+ return
) => { e.stopPropagation(); this.setTransitionTime(e.target.value); }} /> -
+ ) => { e.stopPropagation(); this.setTransitionTime(e.target.value); }} /> +
{transitionSpeed}s
Slow
@@ -784,7 +837,7 @@ export class PresBox extends ViewBoxBaseComponent
e.stopPropagation()} onClick={() => targetDoc.presEffect = 'Roll'}>Roll
-
+
{"Enter from left"}
}>
targetDoc.presEffectDirection = 'left'}>
{"Enter from right"}
}>
targetDoc.presEffectDirection = 'right'}>
{"Enter from top"}
}>
targetDoc.presEffectDirection = 'top'}>
 @@ -863,6 +916,24 @@ export class PresBox extends ViewBoxBaseComponent
{ type = "freeform"; })}>Freeform
+
+ Preset layouts: +
+
+
HEADER
+
Content goes here
+
+
+
HEADER
+
Some content
+
Some more content
+
+
+
HEADER
+
Content goes here
+
+
+
this.createNewSlide(title, type)}> Create New Slide @@ -877,10 +948,23 @@ export class PresBox extends ViewBoxBaseComponent return (
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
this.startOrResetPres(this.itemIndex)}> - Start from current slide + Present from current slide
this.startOrResetPres(0)}> - Start from first slide + Present from first slide +
+
+ ); + } + + @computed get presentDropdown() { + return ( +
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}> +
+ Minimize +
+
this.startOrResetPres(0)}> + Sidebar view
); @@ -916,10 +1000,10 @@ export class PresBox extends ViewBoxBaseComponent if (tagDoc.zoomProgressivize) { const resize = document.getElementById('resizable'); if (resize) { - resize.style.width = this.checkList(tagDoc, tagDoc["width-indexed"]) + 'px'; - resize.style.height = this.checkList(tagDoc, tagDoc["height-indexed"]) + 'px'; - resize.style.top = this.checkList(tagDoc, tagDoc["top-indexed"]) + 'px'; - resize.style.left = this.checkList(tagDoc, tagDoc["left-indexed"]) + 'px'; + resize.style.width = this.checkList(tagDoc, tagDoc["viewfinder-width-indexed"]) + 'px'; + resize.style.height = this.checkList(tagDoc, tagDoc["viewfinder-height-indexed"]) + 'px'; + resize.style.top = this.checkList(tagDoc, tagDoc["viewfinder-top-indexed"]) + 'px'; + resize.style.left = this.checkList(tagDoc, tagDoc["viewfinder-left-indexed"]) + 'px'; } } } @@ -938,10 +1022,10 @@ export class PresBox extends ViewBoxBaseComponent if (tagDoc.zoomProgressivize) { const resize = document.getElementById('resizable'); if (resize) { - resize.style.width = this.checkList(tagDoc, tagDoc["width-indexed"]) + 'px'; - resize.style.height = this.checkList(tagDoc, tagDoc["height-indexed"]) + 'px'; - resize.style.top = this.checkList(tagDoc, tagDoc["top-indexed"]) + 'px'; - resize.style.left = this.checkList(tagDoc, tagDoc["left-indexed"]) + 'px'; + resize.style.width = this.checkList(tagDoc, tagDoc["viewfinder-width-indexed"]) + 'px'; + resize.style.height = this.checkList(tagDoc, tagDoc["viewfinder-height-indexed"]) + 'px'; + resize.style.top = this.checkList(tagDoc, tagDoc["viewfinder-top-indexed"]) + 'px'; + resize.style.left = this.checkList(tagDoc, tagDoc["viewfinder-left-indexed"]) + 'px'; } } } @@ -976,18 +1060,22 @@ export class PresBox extends ViewBoxBaseComponent
-
+
Child documents
Edit
-
-
Internal zoom
-
Edit
+
+
Internal zoom
+
Edit
-
+
Text progressivize
Edit
+
+
Scroll progressivize
+
Edit
+
@@ -995,30 +1083,59 @@ export class PresBox extends ViewBoxBaseComponent } } - //Progressivize Zoom + //Toggle whether the user edits or not + @action + editZoomProgressivize = (e: React.MouseEvent) => { + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); + if (!targetDoc.editZoomProgressivize) { + targetDoc.editZoomProgressivize = true; + } else { + targetDoc.editZoomProgressivize = false; + } + } + + //Toggle whether the user edits or not @action - zoomProgressivize = (e: React.MouseEvent) => { + editScrollProgressivize = (e: React.MouseEvent) => { const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); - if (targetDoc?.zoomProgressivize) { - targetDoc.zoomProgressivize = false; + if (!targetDoc.editScrollProgressivize) { + targetDoc.editScrollProgressivize = true; } else { - targetDoc.zoomProgressivize = true; + targetDoc.editScrollProgressivize = false; } } + //Progressivize Zoom + @action + progressivizeScroll = (e: React.MouseEvent) => { + e.stopPropagation(); + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + activeItem.scrollProgressivize = !activeItem.scrollProgressivize; + const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); + targetDoc.scrollProgressivize = !targetDoc.zoomProgressivize; + CollectionFreeFormDocumentView.setupScroll(targetDoc, true); + if (targetDoc.editScrollProgressivize) { + targetDoc.editScrollProgressivize = false; + targetDoc.currentFrame = 0; + targetDoc.lastFrame = 0; + } + } + + //Progressivize Zoom @action progressivizeZoom = (e: React.MouseEvent) => { e.stopPropagation(); const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); activeItem.zoomProgressivize = !activeItem.zoomProgressivize; const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); - const docs = DocListCast(targetDoc[Doc.LayoutFieldKey(targetDoc)]); targetDoc.zoomProgressivize = !targetDoc.zoomProgressivize; - console.log(targetDoc.zoomProgressivize); - if (activeItem.zoomProgressivize) { - console.log("progressivize"); + CollectionFreeFormDocumentView.setupZoom(targetDoc, true); + if (targetDoc.editZoomProgressivize) { + targetDoc.editZoomProgressivize = false; targetDoc.currentFrame = 0; + targetDoc.lastFrame = 0; } } @@ -1081,9 +1198,9 @@ export class PresBox extends ViewBoxBaseComponent targetDoc.editProgressivize = false; activeItem.presProgressivize = false; targetDoc.presProgressivize = false; - docs.forEach((doc, index) => { - doc.appearFrame = 0; - }); + // docs.forEach((doc, index) => { + // doc.appearFrame = 0; + // }); targetDoc.currentFrame = 0; targetDoc.lastFrame = 0; } @@ -1130,6 +1247,21 @@ export class PresBox extends ViewBoxBaseComponent private _isDraggingBR = false; private _isDraggingBL = false; private _isDragging = false; + // private _drag = ""; + + // onPointerDown = (e: React.PointerEvent): void => { + // e.stopPropagation(); + // e.preventDefault(); + // if (e.button === 0) { + // this._drag = e.currentTarget.id; + // console.log(this._drag); + // } + // document.removeEventListener("pointermove", this.onPointerMove); + // document.addEventListener("pointermove", this.onPointerMove); + // document.removeEventListener("pointerup", this.onPointerUp); + // document.addEventListener("pointerup", this.onPointerUp); + // } + //Adds event listener so knows pointer is down and moving onPointerMid = (e: React.PointerEvent): void => { @@ -1203,87 +1335,136 @@ export class PresBox extends ViewBoxBaseComponent onPointerMove = (e: PointerEvent): void => { const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null); + const tagDocView = DocumentManager.Instance.getDocumentView(targetDoc); e.stopPropagation(); e.preventDefault(); const doc = document.getElementById('resizable'); - if (doc) { + if (doc && tagDocView) { + console.log(tagDocView.props.ScreenToLocalTransform().Scale); let height = doc.offsetHeight; let width = doc.offsetWidth; let top = doc.offsetTop; let left = doc.offsetLeft; + // const newHeightB = height += (e.movementY * NumCast(targetDoc._viewScale)); + // const newHeightT = height -= (e.movementY * NumCast(targetDoc._viewScale)); + // const newWidthR = width += (e.movementX * NumCast(targetDoc._viewScale)); + // const newWidthL = width -= (e.movementX * NumCast(targetDoc._viewScale)); + // const newLeft = left += (e.movementX * NumCast(targetDoc._viewScale)); + // const newTop = top += (e.movementY * NumCast(targetDoc._viewScale)); + // switch (this._drag) { + // case "": break; + // case "resizer-br": + // doc.style.height = newHeightB + 'px'; + // doc.style.width = newWidthR + 'px'; + // break; + // case "resizer-bl": + // doc.style.height = newHeightB + 'px'; + // doc.style.width = newWidthL + 'px'; + // doc.style.left = newLeft + 'px'; + // break; + // case "resizer-tr": + // doc.style.width = newWidthR + 'px'; + // doc.style.height = newHeightT + 'px'; + // doc.style.top = newTop + 'px'; + // case "resizer-tl": + // doc.style.width = newWidthL + 'px'; + // doc.style.height = newHeightT + 'px'; + // doc.style.top = newTop + 'px'; + // doc.style.left = newLeft + 'px'; + // case "resizable": + // doc.style.top = newTop + 'px'; + // doc.style.left = newLeft + 'px'; + // } //Bottom right if (this._isDraggingBR) { - const newHeight = height += e.movementY; + const newHeight = height += (e.movementY * tagDocView.props.ScreenToLocalTransform().Scale); doc.style.height = newHeight + 'px'; - const newWidth = width += e.movementX; + const newWidth = width += (e.movementX * tagDocView.props.ScreenToLocalTransform().Scale); doc.style.width = newWidth + 'px'; // Bottom left } else if (this._isDraggingBL) { - const newHeight = height += e.movementY; + const newHeight = height += (e.movementY * tagDocView.props.ScreenToLocalTransform().Scale); doc.style.height = newHeight + 'px'; - const newWidth = width -= e.movementX; + const newWidth = width -= (e.movementX * tagDocView.props.ScreenToLocalTransform().Scale); doc.style.width = newWidth + 'px'; - const newLeft = left += e.movementX; + const newLeft = left += (e.movementX * tagDocView.props.ScreenToLocalTransform().Scale); doc.style.left = newLeft + 'px'; // Top right } else if (this._isDraggingTR) { - const newWidth = width += e.movementX; + const newWidth = width += (e.movementX * tagDocView.props.ScreenToLocalTransform().Scale); doc.style.width = newWidth + 'px'; - const newHeight = height -= e.movementY; + const newHeight = height -= (e.movementY * tagDocView.props.ScreenToLocalTransform().Scale); doc.style.height = newHeight + 'px'; - const newTop = top += e.movementY; + const newTop = top += (e.movementY * tagDocView.props.ScreenToLocalTransform().Scale); doc.style.top = newTop + 'px'; // Top left } else if (this._isDraggingTL) { - const newWidth = width -= e.movementX; + const newWidth = width -= (e.movementX * tagDocView.props.ScreenToLocalTransform().Scale); doc.style.width = newWidth + 'px'; - const newHeight = height -= e.movementY; + const newHeight = height -= (e.movementY * tagDocView.props.ScreenToLocalTransform().Scale); doc.style.height = newHeight + 'px'; - const newTop = top += e.movementY; + const newTop = top += (e.movementY * tagDocView.props.ScreenToLocalTransform().Scale); doc.style.top = newTop + 'px'; - const newLeft = left += e.movementX; + const newLeft = left += (e.movementX * tagDocView.props.ScreenToLocalTransform().Scale); doc.style.left = newLeft + 'px'; } else if (this._isDragging) { - const newTop = top += e.movementY; + const newTop = top += (e.movementY * tagDocView.props.ScreenToLocalTransform().Scale); doc.style.top = newTop + 'px'; - const newLeft = left += e.movementX; + const newLeft = left += (e.movementX * tagDocView.props.ScreenToLocalTransform().Scale); doc.style.left = newLeft + 'px'; } - this.updateList(targetDoc, targetDoc["width-indexed"], width); - this.updateList(targetDoc, targetDoc["height-indexed"], height); - this.updateList(targetDoc, targetDoc["top-indexed"], top); - this.updateList(targetDoc, targetDoc["left-indexed"], left); + this.updateList(targetDoc, targetDoc["viewfinder-width-indexed"], width); + this.updateList(targetDoc, targetDoc["viewfinder-height-indexed"], height); + this.updateList(targetDoc, targetDoc["viewfinder-top-indexed"], top); + this.updateList(targetDoc, targetDoc["viewfinder-left-indexed"], left); } } @action checkList = (doc: Doc, list: any): number => { const x: List = list; - return x[NumCast(doc.currentFrame)]; + if (x && x.length >= NumCast(doc.currentFrame) + 1) { + return x[NumCast(doc.currentFrame)]; + } else { + x.length = NumCast(doc.currentFrame) + 1; + x[NumCast(doc.currentFrame)] = x[NumCast(doc.currentFrame) - 1]; + return x[NumCast(doc.currentFrame)]; + } + } @action updateList = (doc: Doc, list: any, val: number) => { const x: List = list; - x[NumCast(doc.currentFrame)] = val; - list = x; + if (x && x.length >= NumCast(doc.currentFrame) + 1) { + x[NumCast(doc.currentFrame)] = val; + list = x; + } else { + x.length = NumCast(doc.currentFrame) + 1; + x[NumCast(doc.currentFrame)] = val; + list = x; + } + } + // scale: NumCast(targetDoc._viewScale), @computed get zoomProgressivizeContainer() { const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null); - CollectionFreeFormDocumentView.setupZoom(targetDoc, true); - - return ( -
-
-
-
-
-
-
-
- ); + if (targetDoc.editZoomProgressivize) { + return ( + <> +
+
+
+
+
+
+
+
+ + ); + } else return null; } @computed get progressivizeChildDocs() { @@ -1341,9 +1522,8 @@ export class PresBox extends ViewBoxBaseComponent return (
); } - @observable - toolbarWidth = (): number => { - console.log(this.props.PanelWidth()); + @computed + get toolbarWidth(): number { const width = this.props.PanelWidth(); return width; } @@ -1361,8 +1541,8 @@ export class PresBox extends ViewBoxBaseComponent
{"View paths"}
}>
 -
{this.expandBoolean ? "Expand all" : "Minimize all"}
}> -
{ this.toggleExpand(); this.childDocs.forEach((doc, ind) => { if (this.expandBoolean) doc.presExpandInlineButton = false; else doc.presExpandInlineButton = true; }); }}> +
{this.expandBoolean ? "Minimize all" : "Expand all"}
}> +
{ this.toggleExpand(); this.childDocs.forEach((doc, ind) => { if (this.expandBoolean) doc.presExpandInlineButton = true; else doc.presExpandInlineButton = false; }); }}>
@@ -1370,13 +1550,13 @@ export class PresBox extends ViewBoxBaseComponent
{"Transitions"}
}>
-
380 ? "block" : "none" }} className="toolbar-buttonText">  Transitions
+
430 ? "block" : "none" }} className="toolbar-buttonText">  Transitions
{"Progressivize"}
}>
-
380 ? "block" : "none" }} className="toolbar-buttonText">  Progressivize
+
430 ? "block" : "none" }} className="toolbar-buttonText">  Progressivize
@@ -1401,9 +1581,6 @@ export class PresBox extends ViewBoxBaseComponent
- -

uppercase

-
@@ -1425,22 +1602,29 @@ export class PresBox extends ViewBoxBaseComponent onPointerDown={e => e.stopPropagation()} onChange={this.viewChanged} value={mode}> - + {/* */} - + {/* */}
-
this.startOrResetPres(0)}> -   - -
- { e.stopPropagation; this.togglePlay(); }} className="dropdown" icon={"angle-down"} /> - {this.playDropdown} -
-
this.layoutDoc.presStatus = "manual"}> - Present -
+ +
this.startOrResetPres(0)}> +   + +
+
{ e.stopPropagation; this.togglePlay(); }}> + + {this.playDropdown} +
+ + +
this.layoutDoc.presStatus = "manual"}>   Present
+
{ e.stopPropagation; this.togglePresent(); }}> + + {this.presentDropdown} +
+
diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx index 6c6bad06a..4d1195808 100644 --- a/src/client/views/presentationview/PresElementBox.tsx +++ b/src/client/views/presentationview/PresElementBox.tsx @@ -260,11 +260,11 @@ export class PresElementBox extends ViewBoxBaseComponent {`${this.targetDoc?.title}`}
-
{"Movement speed"}
}>
{this.transition}
 -
{"Duration of visibility"}
}>
{this.duration}
 +
{"Movement speed"}
}>
300 ? "block" : "none" }}>{this.transition}
 +
{"Duration of visibility"}
}>
300 ? "block" : "none" }}>{this.duration}
{"Remove from presentation"}
}>
e.stopPropagation()} + // onPointerDown={e => e.stopPropagation()} onClick={e => { this.props.removeDocument?.(this.rootDoc); e.stopPropagation(); -- cgit v1.2.3-70-g09d2 From f4c14a48f91ec95b900bb1e25452d18971ff21a8 Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> Date: Mon, 3 Aug 2020 23:14:20 +0800 Subject: works with selection manager (PropertiesView) --- .../collectionFreeForm/PropertiesView.scss | 42 +++++++++++----------- .../collectionFreeForm/PropertiesView.tsx | 21 +++++++---- src/client/views/nodes/PresBox.scss | 2 +- src/client/views/nodes/PresBox.tsx | 2 +- .../views/presentationview/PresElementBox.tsx | 2 +- 5 files changed, 39 insertions(+), 30 deletions(-) (limited to 'src/client/views/nodes/PresBox.scss') diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss index 6283a6669..2cdaa25ee 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss @@ -543,6 +543,27 @@ } } +.propertiesView-presSelected { + border-top: solid 1px darkgrey; + width: 100%; + padding-top: 5px; + font-family: Roboto; + font-weight: 500; + display: inline-flex; + + .propertiesView-selectedList { + border-left: solid 1px darkgrey; + margin-left: 10px; + padding-left: 5px; + + .selectedList-items { + font-size: 12; + font-weight: 300; + margin-top: 1; + } + } +} + .widthAndDash { .width { @@ -617,25 +638,4 @@ margin-top: 2px; } } - - .propertiesView-presSelected { - border-top: solid 1px darkgrey; - width: 100%; - padding-top: 5px; - font-family: Roboto; - font-weight: 500; - display: inline-flex; - - .propertiesView-selectedList { - border-left: solid 1px darkgrey; - margin-left: 10px; - padding-left: 5px; - - .selectedList-items { - font-size: 12; - font-weight: 300; - margin-top: 1; - } - } - } } \ No newline at end of file diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index ce8baf559..88d585596 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -47,9 +47,14 @@ export class PropertiesView extends React.Component { @computed get selectedDocumentView() { if (SelectionManager.SelectedDocuments().length) { return SelectionManager.SelectedDocuments()[0]; - } else { console.log(undefined); return undefined; } + } 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 isPres() { return this.selectedDoc?.type === DocumentType.PRES } @computed get selectedDoc() { return this.selectedDocumentView?.rootDoc; } @computed get dataDoc() { return this.selectedDocumentView?.dataDoc; } @@ -748,10 +753,14 @@ export class PropertiesView extends React.Component { render() { if (!this.selectedDoc) { - return
-
- No Document Selected -
; + console.log("!selectedDoc") + if (this.isPres === false) { + console.log("!isPres") + return
+
+ No Document Selected +
; + } } const novice = Doc.UserDoc().noviceMode; diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss index e5878708f..83e7152a8 100644 --- a/src/client/views/nodes/PresBox.scss +++ b/src/client/views/nodes/PresBox.scss @@ -143,7 +143,7 @@ display: grid; justify-content: flex-start; align-items: center; - grid-template-columns: repeat(auto-fit, 50px); + grid-template-columns: repeat(auto-fit, 70px); } .ribbon-property { diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index 618161e97..496d4666e 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -832,7 +832,7 @@ export class PresBox extends ViewBoxBaseComponent
Effect direction
-
+
{"Enter from left"}
}>
targetDoc.presEffectDirection = 'left'}>
{"Enter from right"}
}>
targetDoc.presEffectDirection = 'right'}>
 diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx index 85949c5a8..ce7a43315 100644 --- a/src/client/views/presentationview/PresElementBox.tsx +++ b/src/client/views/presentationview/PresElementBox.tsx @@ -278,7 +278,7 @@ export class PresElementBox extends ViewBoxBaseComponent Date: Tue, 4 Aug 2020 17:58:50 +0800 Subject: properties view for presentation --- .../collectionFreeForm/PropertiesView.scss | 4 +- src/client/views/nodes/PresBox.scss | 14 ++--- src/client/views/nodes/PresBox.tsx | 59 +++++++++++----------- .../views/presentationview/PresElementBox.tsx | 8 ++- 4 files changed, 44 insertions(+), 41 deletions(-) (limited to 'src/client/views/nodes/PresBox.scss') diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss index 2cdaa25ee..f559b940c 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss @@ -5,8 +5,8 @@ font-family: "Noto Sans"; cursor: auto; - overflow-x: visible; - overflow-y: visible; + overflow-x: hidden; + overflow-y: scroll; .propertiesView-title { background-color: rgb(159, 159, 159); diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss index 83e7152a8..45c6d33b8 100644 --- a/src/client/views/nodes/PresBox.scss +++ b/src/client/views/nodes/PresBox.scss @@ -291,7 +291,7 @@ .ribbon-textInput { border-radius: 2px; - height: 30px; + height: 20px; font-size: 11.5; font-weight: 100; align-self: center; @@ -363,14 +363,14 @@ .ribbon-final-button { position: relative; - font-size: 11.5; + font-size: 11; font-weight: normal; letter-spacing: normal; display: flex; justify-content: center; align-items: center; margin-bottom: 5px; - height: 30px; + height: 25px; color: white; width: 100%; max-width: 120; @@ -382,14 +382,14 @@ .ribbon-final-button-hidden { position: relative; - font-size: 11.5; + font-size: 11; font-weight: normal; letter-spacing: normal; display: flex; justify-content: center; align-items: center; margin-bottom: 5px; - height: 30px; + height: 25px; color: lightgrey; width: 100%; max-width: 120; @@ -414,9 +414,9 @@ } .ribbon-button { - font-size: 11; + font-size: 10.5; font-weight: 200; - height: 30; + height: 20; background-color: #dedede; border: solid 1px black; display: flex; diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index 496d4666e..0a73106a3 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -900,22 +900,16 @@ export class PresBox extends ViewBoxBaseComponent
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
{this.stringType} options -
-
Child documents
-
Edit
+
+
Start automatically
+
Start manually
-
-
Internal zoom
-
Viewfinder
-
Snapshot
-
-
-
Text progressivize
-
Edit
+
+
Open document
+
Open parent collection
-
-
Scroll progressivize
-
Edit
+
+
Store original website
@@ -928,28 +922,25 @@ export class PresBox extends ViewBoxBaseComponent return (
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}> -
-
runInAction(() => { this.layout = 'blank' })} /> -
runInAction(() => { this.layout = 'title' })}> +
+
runInAction(() => { this.layout = 'blank'; this.createNewSlide(this.layout); })} /> +
runInAction(() => { this.layout = 'title'; this.createNewSlide(this.layout); })}>
Title
Subtitle
-
runInAction(() => { this.layout = 'header' })}> +
runInAction(() => { this.layout = 'header'; this.createNewSlide(this.layout); })}>
Section header
-
runInAction(() => { this.layout = 'content' })}> +
runInAction(() => { this.layout = 'content'; this.createNewSlide(this.layout); })}>
Title
Text goes here
-
runInAction(() => { this.layout = 'twoColumns' })}> +
runInAction(() => { this.layout = 'twoColumns'; this.createNewSlide(this.layout); })}>
Title
Column one text
Column two text
-
runInAction(() => { this.openLayouts = !this.openLayouts })}> - -
); @@ -1033,9 +1024,17 @@ export class PresBox extends ViewBoxBaseComponent } createTemplate = (layout: string, input?: string) => { + const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); + const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null); + let x = 0; + let y = 0; + if (activeItem && targetDoc) { + 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" + 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" @@ -1058,27 +1057,27 @@ export class PresBox extends ViewBoxBaseComponent switch (layout) { case 'blank': doc = Docs.Create.FreeformDocument([], { - title: input ? input : "Blank slide", _width: 400, _height: 225, _fitToBox: true + 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 + 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 + 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 + 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 + title: input ? input : "Title and two columns", _width: 400, _height: 225, _fitToBox: true, x: x, y: y }); break; default: @@ -1218,7 +1217,7 @@ export class PresBox extends ViewBoxBaseComponent
Edit
-
+
Frames
diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx index ce7a43315..90eb8580e 100644 --- a/src/client/views/presentationview/PresElementBox.tsx +++ b/src/client/views/presentationview/PresElementBox.tsx @@ -251,6 +251,10 @@ 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; @@ -295,10 +299,10 @@ export class PresElementBox extends ViewBoxBaseComponent <> -
+
{`${this.indexInPres + 1}.`}
-
+
{`${this.targetDoc?.title}`}
{"Movement speed"}
}>
300 ? "block" : "none" }}>{this.transition}
 -- cgit v1.2.3-70-g09d2 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/client/views/nodes/PresBox.scss') 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 From fa0b28c300416621dec25407484fc2606a736e2a Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> Date: Thu, 6 Aug 2020 05:11:18 +0800 Subject: automatic text progressivize, ui changes, bug fixes --- src/client/documents/Documents.ts | 2 + src/client/views/PropertiesButtons.tsx | 37 ++- .../views/collections/CollectionDockingView.scss | 8 +- .../views/collections/CollectionDockingView.tsx | 2 +- .../views/collections/CollectionStackingView.tsx | 12 +- .../collectionFreeForm/CollectionFreeFormView.tsx | 4 +- .../collectionFreeForm/PropertiesView.tsx | 4 +- .../views/nodes/CollectionFreeFormDocumentView.tsx | 20 +- src/client/views/nodes/PresBox.scss | 56 +++- src/client/views/nodes/PresBox.tsx | 337 ++++++++------------- .../views/nodes/formattedText/FormattedTextBox.tsx | 65 ++++ .../views/presentationview/PresElementBox.scss | 35 ++- .../views/presentationview/PresElementBox.tsx | 49 ++- 13 files changed, 386 insertions(+), 245 deletions(-) (limited to 'src/client/views/nodes/PresBox.scss') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 539341b62..57fcf3a00 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -129,6 +129,7 @@ export interface DocumentOptions { isLinkButton?: boolean; _columnWidth?: number; _fontSize?: string; + _fontWeight?: number; _fontFamily?: string; curPage?: number; currentTimecode?: number; // the current timecode of a time-based document (e.g., current time of a video) value is in seconds @@ -139,6 +140,7 @@ export interface DocumentOptions { appearFrame?: number; // the frame in which the document appears presTransition?: number; //the time taken for the transition TO a document presDuration?: number; //the duration of the slide in presentation view + presProgressivize?: boolean; // xArray?: number[]; // yArray?: number[]; borderRounding?: string; diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx index d46c03470..7d8a75dda 100644 --- a/src/client/views/PropertiesButtons.tsx +++ b/src/client/views/PropertiesButtons.tsx @@ -30,6 +30,7 @@ import { undoBatch, UndoManager } from '../util/UndoManager'; import { DocumentType } from '../documents/DocumentTypes'; import { CollectionFreeFormView } from './collections/collectionFreeForm/CollectionFreeFormView'; import { InkField } from '../../fields/InkField'; +import { PresBox } from './nodes/PresBox'; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; @@ -209,13 +210,44 @@ export class PropertiesButtons extends React.Component<{}, {}> { const isPinned = targetDoc && Doc.isDocPinned(targetDoc); return !targetDoc ? (null) :
{Doc.isDocPinned(targetDoc) ? "Unpin from presentation" : "Pin to presentation"}
}>
DockedFrameRenderer.PinDoc(targetDoc, isPinned)}>
; } + @computed + get pinWithViewButton() { + const targetDoc = this.selectedDoc; + const isPinned = targetDoc && Doc.isDocPinned(targetDoc); + if (targetDoc) { + const x = targetDoc._panX; + const y = targetDoc._panY; + const scale = targetDoc._viewScale; + } + return !targetDoc ? (null) :
{"Pin with this view"}
}> +
{ + if (targetDoc) { + DockedFrameRenderer.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; + } + }}> +
V
+ +
; + } + + @computed get metadataButton() { //const view0 = this.view0; @@ -607,6 +639,9 @@ export class PropertiesButtons extends React.Component<{}, {}> {
{this.pinButton}
+
+ {this.pinWithViewButton} +
{this.copyButton}
diff --git a/src/client/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss index 857f751d3..98babc3d2 100644 --- a/src/client/views/collections/CollectionDockingView.scss +++ b/src/client/views/collections/CollectionDockingView.scss @@ -45,7 +45,7 @@ .miniPres-button-text { display: flex; - height: 30; + height: 20; font-weight: 400; min-width: 100%; border-radius: 5px; @@ -55,15 +55,15 @@ } .miniPres-divider { - width: 1px; + width: 0.5px; height: 80%; border-right: solid 2px #5a5a5a; } .miniPres-button { display: flex; - height: 30; - min-width: 30; + height: 20; + min-width: 20; border-radius: 100%; align-items: center; justify-content: center; diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 9c85bd0a2..bc88236dd 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -871,7 +871,7 @@ export class DockedFrameRenderer extends React.Component { } renderMiniPres() { return
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index e00bdb065..fe3d57bdb 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -184,7 +184,7 @@ export class CollectionStackingView extends CollectionSubView(StackingDocument) if (found) { const top = found.getBoundingClientRect().top; const localTop = this.props.ScreenToLocalTransform().transformPoint(0, top); - smoothScroll(doc.presTransition ? Number(doc.presTransition) : 500, this._mainCont!, localTop[1] + this._mainCont!.scrollTop); + smoothScroll(doc.presTransition || doc.presTransition === 0 ? NumCast(doc.presTransition) : 500, this._mainCont!, localTop[1] + this._mainCont!.scrollTop); } afterFocus && setTimeout(() => { if (afterFocus?.()) { } @@ -291,20 +291,19 @@ export class CollectionStackingView extends CollectionSubView(StackingDocument) const docs = this.childDocList; if (docs) { newDocs.map((doc, i) => { + console.log(doc.title); if (i === 0) { if (targInd === -1) targInd = docs.length; else targInd = docs.indexOf(this.filteredChildren[targInd]); const srcInd = docs.indexOf(doc); docs.splice(srcInd, 1); docs.splice((targInd > srcInd ? targInd - 1 : targInd) + plusOne, 0, doc); - } else { + } else if (i < (newDocs.length / 2)) { //glr: for some reason dragged documents are duplicated if (targInd === -1) targInd = docs.length; - else targInd = docs.indexOf(this.filteredChildren[targInd]); + else targInd = docs.indexOf(newDocs[0]) + 1; const srcInd = docs.indexOf(doc); - const firstInd = docs.indexOf(newDocs[0]); docs.splice(srcInd, 1); - // docs.splice((targInd > srcInd ? targInd - 1 : targInd) + plusOne, 0, doc); - docs.splice(firstInd + 1, 0, doc); + docs.splice((targInd > srcInd ? targInd - 1 : targInd) + plusOne, 0, doc); } }); } @@ -312,6 +311,7 @@ export class CollectionStackingView extends CollectionSubView(StackingDocument) } return false; } + @undoBatch @action onExternalDrop = async (e: React.DragEvent): Promise => { diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 109808956..65cd28742 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -911,8 +911,8 @@ export class CollectionFreeFormView extends CollectionSubView { if (this.isPres) { return
- Presentation Toolbar + Presentation
@@ -922,7 +922,7 @@ export class PropertiesView extends React.Component {
runInAction(() => { this.openSlideOptions = !this.openSlideOptions; })} style={{ backgroundColor: this.openSlideOptions ? "black" : "" }}> -   {PresBox.Instance.stringType} options +     {PresBox.Instance.stringType} options
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index c29547eac..35ed6c5a5 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -107,6 +107,15 @@ export class CollectionFreeFormDocumentView extends DocComponent(windexed); d["opacity-indexed"] = new List(oindexed); d["scroll-indexed"] = new List(scrollIndexed); + if (d.appearFrame) { + if (d.appearFrame === timecode + 1) { + d["text-color"] = "red"; + } else if (d.appearFrame < timecode + 1) { + d["text-color"] = "grey"; + } else { d["text-color"] = "black"; } + } else if (d.appearFrame === 0) { + d["text-color"] = "black"; + } } public static updateScrollframe(doc: Doc, time: number) { @@ -139,6 +148,15 @@ export class CollectionFreeFormDocumentView extends DocComponent docs.forEach(doc => doc.dataTransition = "inherit"), 1010); @@ -166,7 +184,7 @@ export class CollectionFreeFormDocumentView extends DocComponent { - if (!doc.appearFrame) doc.appearFrame = i; + if (doc.appearFrame === undefined) doc.appearFrame = i; const curTimecode = progressivize ? i : timecode; const xlist = new List(numberRange(timecode + 1).map(i => undefined) as any as number[]); const ylist = new List(numberRange(timecode + 1).map(i => undefined) as any as number[]); diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss index 089f69873..16821f5bc 100644 --- a/src/client/views/nodes/PresBox.scss +++ b/src/client/views/nodes/PresBox.scss @@ -754,8 +754,6 @@ } .presBox-button { - margin-right: 2.5px; - margin-left: 2.5px; height: 25px; border-radius: 5px; display: none; @@ -787,13 +785,65 @@ min-width: 100px; width: 100px; position: absolute; - right: 8px; + right: 10px; .present-icon { margin-right: 7px; } } + + .miniPresOverlay { + background-color: #323232; + color: white; + border-radius: 5px; + grid-template-rows: 100%; + height: 25; + width: 200; + justify-content: space-evenly; + align-items: center; + display: flex; + position: absolute; + right: 10px; + + .miniPres-button-text { + display: flex; + height: 20; + width: max-content; + font-family: Roboto; + font-weight: 400; + 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 1px #5a5a5a; + } + + .miniPres-button { + 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; + } + } + .collectionViewBaseChrome-viewPicker { diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index 2389d3875..1caefdc57 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -97,7 +97,10 @@ export class PresBox extends ViewBoxBaseComponent @action next = () => { this.updateCurrentPresentation(); + const activeNext = Cast(this.childDocs[this.itemIndex + 1], Doc, null); const presTargetDoc = Cast(this.childDocs[this.itemIndex].presentationTargetDoc, Doc, null); + const childDocs = DocListCast(presTargetDoc[Doc.LayoutFieldKey(presTargetDoc)]); + const currentFrame = Cast(presTargetDoc.currentFrame, "number", null); const lastFrame = Cast(presTargetDoc.lastFrame, "number", null); const curFrame = NumCast(presTargetDoc.currentFrame); let internalFrames: boolean = false; @@ -107,8 +110,10 @@ export class PresBox extends ViewBoxBaseComponent presTargetDoc._viewTransition = "all 1s"; setTimeout(() => presTargetDoc._viewTransition = undefined, 1010); presTargetDoc.currentFrame = curFrame + 1; + if (presTargetDoc.scrollProgressivize) CollectionFreeFormDocumentView.updateScrollframe(presTargetDoc, currentFrame); + if (presTargetDoc.presProgressivize) CollectionFreeFormDocumentView.updateKeyframe(childDocs, currentFrame || 0); if (presTargetDoc.zoomProgressivize) this.zoomProgressivizeNext(presTargetDoc); - // Case 2: No more frames in current doc and next slide is defined, therefore move to next slide + // Case 2: Audio or video therefore wait to play the audio or video before moving on } else if ((presTargetDoc.type === DocumentType.VID || presTargetDoc.type === DocumentType.AUDIO) && !this._moveOnFromAudio) { if (presTargetDoc.type === DocumentType.AUDIO) { AudioBox.Instance.playFrom(0); @@ -117,7 +122,15 @@ export class PresBox extends ViewBoxBaseComponent if (presTargetDoc.type === DocumentType.VID) { this._moveOnFromAudio = true; } - } else if (this.childDocs[this.itemIndex + 1] !== undefined) { + // Case 3: No more frames in current doc and next slide is defined, therefore move to next slide + } else if (activeNext !== undefined) { + if (!presTargetDoc.presProgressivize) { + const nextTagDoc = Cast(this.childDocs[this.itemIndex + 1].presentationTargetDoc, Doc, null); + const nextChildDocs = DocListCast(nextTagDoc[Doc.LayoutFieldKey(presTargetDoc)]); + nextChildDocs.forEach((doc, i) => { + doc.opacity = 1; + }) + } const nextSelected = this.itemIndex + 1; this.gotoDocument(nextSelected, this.itemIndex); this._moveOnFromAudio = false; @@ -130,15 +143,8 @@ export class PresBox extends ViewBoxBaseComponent this.updateCurrentPresentation(); const docAtCurrent = this.childDocs[this.itemIndex]; if (docAtCurrent) { - //check if any of the group members had used zooming in including the current document - //If so making sure to zoom out, which goes back to state before zooming action let prevSelected = this.itemIndex; - let didZoom = docAtCurrent.zoomButton; - // for (; !didZoom && prevSelected > 0 && this.childDocs[prevSelected].groupButton; prevSelected--) { - // didZoom = this.childDocs[prevSelected].zoomButton; - // } prevSelected = Math.max(0, prevSelected - 1); - this.gotoDocument(prevSelected, this.itemIndex); } } @@ -159,19 +165,11 @@ export class PresBox extends ViewBoxBaseComponent const panelWidth: number = srcDocView.props.PanelWidth(); const panelHeight: number = srcDocView.props.PanelHeight(); console.log("srcDocView: " + srcDocView.props.PanelWidth()); - // console.log("layoutdoc._width: " + layoutdoc._width); - // console.log("srcContext._width: " + srcContext._width); const newPanX = NumCast(presTargetDoc.x) + NumCast(layoutdoc._width) / 2; const newPanY = NumCast(presTargetDoc.y) + NumCast(layoutdoc._height) / 2; - // const newPanX = NumCast(presTargetDoc.x) + panelWidth / 2; - // const newPanY = NumCast(presTargetDoc.y) + panelHeight / 2; let newScale = 0.9 * Math.min(Number(panelWidth) / vfWidth, Number(panelHeight) / vfHeight); - // srcContext._panX = newPanX + (NumCast(presTargetDoc._viewScale) * this.checkList(presTargetDoc, presTargetDoc["viewfinder-left-indexed"]) + NumCast(presTargetDoc._panX) + (this.checkList(presTargetDoc, presTargetDoc["viewfinder-width-indexed"]) / 2)); - // srcContext._panY = newPanY + (NumCast(presTargetDoc._viewScale) * this.checkList(presTargetDoc, presTargetDoc["viewfinder-top-indexed"]) + NumCast(presTargetDoc._panY) + (this.checkList(presTargetDoc, presTargetDoc["viewfinder-height-indexed"]) / 2)); srcContext._panX = newPanX + (vfLeft + (vfWidth / 2)); srcContext._panY = newPanY + (vfTop + (vfHeight / 2)); - // srcContext._panX = newPanX - // srcContext._panY = newPanY srcContext._viewScale = newScale; console.log("X: " + srcContext._panX + ", Y: " + srcContext._panY + ", Scale: " + srcContext._viewScale); } @@ -203,9 +201,6 @@ export class PresBox extends ViewBoxBaseComponent const tagDoc = Cast(curDoc.presentationTargetDoc, Doc, null); 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) { @@ -213,9 +208,6 @@ export class PresBox extends ViewBoxBaseComponent } } 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) { @@ -225,73 +217,6 @@ export class PresBox extends ViewBoxBaseComponent }); } - @action - 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; - } 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; - // } - // }); - // } - /** * This method makes sure that cursor navigates to the element that * has the option open and last in the group. If not in the group, and it has @@ -310,24 +235,12 @@ export class PresBox extends ViewBoxBaseComponent if (srcContext) this.layoutDoc.presCollection = srcContext; } else if (targetDoc) this.layoutDoc.presCollection = targetDoc; } - if (srcContext) console.log("NC: " + srcContext.title); - if (presCollection) console.log("PC: " + presCollection.title); if (collectionDocView) { - 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 (srcContext && srcContext !== presCollection) { + // Case 1: new srcContext inside of current collection so add a new tab to the current pres collection + 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"); @@ -354,6 +267,17 @@ export class PresBox extends ViewBoxBaseComponent //awaiting jump so that new scale can be found, since jumping is async targetDoc && await DocumentManager.Instance.jumpToDocument(targetDoc, willZoom, undefined, srcContext); } + if (activeItem.presPinView) { + targetDoc._panX = activeItem.presPinViewX; + targetDoc._panY = activeItem.presPinViewY; + targetDoc._viewScale = activeItem.presPinViewScale; + } + if (collectionDocView && activeItem.openDocument) { + collectionDocView.props.addDocTab(activeItem, "inPlace"); + } + if (targetDoc.presWebsiteData) { + targetDoc.data = targetDoc.presWebsiteData; + } } //The function that is called when a document is clicked or reached through next or back. @@ -381,6 +305,7 @@ export class PresBox extends ViewBoxBaseComponent @observable _presTimer!: NodeJS.Timeout; //The function that starts or resets presentaton functionally, depending on status flag. + @undoBatch @action startOrResetPres = (startSlide: number) => { this.updateCurrentPresentation(); @@ -432,31 +357,15 @@ export class PresBox extends ViewBoxBaseComponent this.turnOffEdit(); if (srcContext) { if (srcContext.miniPres) { - document.removeEventListener("keydown", this.keyEvents, false); + document.removeEventListener("keydown", this.minimizeEvents, false); srcContext.miniPres = false; - // Doc.RemoveDocFromList((Doc.UserDoc().myOverlayDocuments as Doc), undefined, this.rootDoc); CollectionDockingView.AddRightSplit(this.rootDoc); - // this.layoutDoc.inOverlay = false; } else { - document.addEventListener("keydown", this.keyEvents, false); + document.addEventListener("keydown", this.minimizeEvents, false); srcContext.miniPres = true; this.props.addDocTab?.(this.rootDoc, "close"); - // Doc.AddDocToList((Doc.UserDoc().myOverlayDocuments as Doc), undefined, this.rootDoc); } } - // if (srcContext) { - // Doc.RemoveDocFromList((Doc.UserDoc().myOverlayDocuments as Doc), undefined, this.rootDoc); - // CollectionDockingView.AddRightSplit(this.rootDoc); - // this.layoutDoc.inOverlay = false; - // } - // else { - // const pt = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0); - // this.rootDoc.x = pt[0];// 500;//e.clientX + 25; - // this.rootDoc.y = pt[1];////e.clientY - 25; - // this.props.addDocTab?.(this.rootDoc, "close"); - // Doc.AddDocToList((Doc.UserDoc().myOverlayDocuments as Doc), undefined, this.rootDoc); - // } - // } } @undoBatch @@ -464,7 +373,7 @@ export class PresBox extends ViewBoxBaseComponent //@ts-ignore const viewType = e.target.selectedOptions[0].value as CollectionViewType; viewType === CollectionViewType.Stacking && (this.rootDoc._pivotField = undefined); // pivot field may be set by the user in timeline view (or some other way) -- need to reset it here - // this.updateMinimize(this.rootDoc._viewType = viewType); + this.rootDoc._viewType = viewType; if (viewType === CollectionViewType.Stacking) this.layoutDoc._gridGap = 5; }); @@ -485,7 +394,7 @@ export class PresBox extends ViewBoxBaseComponent } else if (movement === 'switch') { targetDoc.presTransition = 0; activeItem.presSwitchButton = !activeItem.presSwitchButton; - if (activeItem.presSwitchButton) activeItem.presMovement = 'Switch'; + if (activeItem.presSwitchButton) activeItem.presMovement = 'Jump cut'; else activeItem.presMovement = 'None'; } else { activeItem.presMovement = 'None'; @@ -496,12 +405,11 @@ export class PresBox extends ViewBoxBaseComponent }); whenActiveChanged = action((isActive: boolean) => this.props.whenActiveChanged(this._isChildActive = isActive)); + // For dragging documents into the presentation trail addDocumentFilter = (doc: Doc | Doc[]) => { const docs = doc instanceof Doc ? [doc] : doc; docs.forEach((doc, i) => { if (this.childDocs.includes(doc)) { - console.log(docs.length); - console.log(i + 1); if (docs.length === i + 1) return false; } else { doc.aliasOf instanceof Doc && (doc.presentationTargetDoc = doc.aliasOf); @@ -574,33 +482,45 @@ export class PresBox extends ViewBoxBaseComponent } } + @action + minimizeEvents = (e: KeyboardEvent) => { + e.stopPropagation(); + e.preventDefault(); + if (e.keyCode === 27) { // Escape key + this.layoutDoc.presStatus = "edit"; + } if (e.keyCode === 37) { // left(37) / a(65) / up(38) to go back + this.back(); + } if (e.keyCode === 39) { // right (39) / d(68) / down(40) to go to next + this.next(); + } + } + //Esc click @action keyEvents = (e: KeyboardEvent) => { e.stopPropagation(); e.preventDefault(); - // switch(e.keyCode) { - // case 27: console.log("escape"); - // case 65 && (e.metaKey || e.altKey): - // } - // Escape key - if (e.keyCode === 27) { + + if (e.keyCode === 27) { // Escape key if (this.layoutDoc.presStatus === "edit") this._selectedArray = []; else this.layoutDoc.presStatus = "edit"; - // Ctrl-A to select all - } if ((e.metaKey || e.altKey) && e.keyCode === 65) { + } if ((e.metaKey || e.altKey) && e.keyCode === 65) { // Ctrl-A to select all if (this.layoutDoc.presStatus === "edit") this._selectedArray = this.childDocs; - // left(37) / a(65) / up(38) to go back - } if (e.keyCode === 37) { + } if (e.keyCode === 37) { // left(37) / a(65) / up(38) to go back if (this.layoutDoc.presStatus !== "edit") this.back(); - // right (39) / d(68) / down(40) to go to next - } if (e.keyCode === 39) { - if (this.layoutDoc.presStatus !== "edit") this.next(); - // spacebar to 'present' or go to next slide - } if (e.keyCode === 32) { + } if (e.keyCode === 39) { // right (39) / d(68) / down(40) to go to next if (this.layoutDoc.presStatus !== "edit") this.next(); + } if (e.keyCode === 32) { // spacebar to 'present' or autoplay + if (this.layoutDoc.presStatus !== "edit") this.startOrResetPres(0); else this.layoutDoc.presStatus = "manual"; } + if (e.keyCode === 8) { // delete selected items + if (this.layoutDoc.presStatus === "edit") { + this._selectedArray.forEach((doc, i) => { + this.removeDocument(doc); + }); + } + } } @observable private transitionTools: boolean = false; @@ -617,7 +537,6 @@ export class PresBox extends ViewBoxBaseComponent viewPaths = async () => { const srcContext = Cast(this.rootDoc.presCollection, Doc, null); if (this.pathBoolean) { - console.log("true"); if (srcContext) { this.togglePath(); srcContext._fitToBox = false; @@ -625,7 +544,6 @@ export class PresBox extends ViewBoxBaseComponent srcContext.presPathView = false; } } else { - console.log("false"); if (srcContext) { this.togglePath(); srcContext._fitToBox = true; @@ -633,13 +551,8 @@ export class PresBox extends ViewBoxBaseComponent srcContext.presPathView = true; } } - console.log("view paths"); const viewType = srcContext?._viewType; const fit = srcContext?._fitToBox; - - // if (!DocumentManager.Instance.getDocumentView(curPres)) { - // CollectionDockingView.AddRightSplit(curPres); - // } } @computed get order() { @@ -664,7 +577,6 @@ export class PresBox extends ViewBoxBaseComponent @computed get paths() { let pathPoints = ""; - console.log(this.childDocs.length - 1); this.childDocs.forEach((doc, index) => { const targetDoc = Cast(doc.presentationTargetDoc, Doc, null); const srcContext = Cast(targetDoc.context, Doc, null); @@ -678,7 +590,6 @@ export class PresBox extends ViewBoxBaseComponent else pathPoints = pathPoints + " " + 0 + "," + 0; } }); - console.log(pathPoints); return ( } } + // WHAT IS THIS? @action dropdownToggle = (menu: string) => { - console.log('presBox' + menu + 'Dropdown'); const dropMenu = document.getElementById('presBox' + menu + 'Dropdown'); - console.log(dropMenu); - console.log(dropMenu?.style.display); if (dropMenu) dropMenu.style.display === 'none' ? dropMenu.style.display = 'block' : dropMenu.style.display = 'none'; } @@ -749,8 +658,6 @@ export class PresBox extends ViewBoxBaseComponent if (activeItem && targetDoc) { const transitionSpeed = targetDoc.presTransition ? String(Number(targetDoc.presTransition) / 1000) : 0.5; const duration = targetDoc.presDuration ? String(Number(targetDoc.presDuration) / 1000) : 2; - const transitionThumbLocation = String(-9.48 * Number(transitionSpeed) + 93); - const durationThumbLocation = String(9.48 * Number(duration)); const effect = targetDoc.presEffect ? targetDoc.presEffect : 'None'; activeItem.presMovement = activeItem.presMovement ? activeItem.presMovement : 'Zoom'; return ( @@ -767,7 +674,7 @@ export class PresBox extends ViewBoxBaseComponent
e.stopPropagation()} onClick={() => this.movementChanged('none')}>None
e.stopPropagation()} onClick={() => this.movementChanged('zoom')}>Pan and Zoom
e.stopPropagation()} onClick={() => this.movementChanged('nav')}>Pan
-
e.stopPropagation()} onClick={() => this.movementChanged('switch')}>Switch
+
e.stopPropagation()} onClick={() => this.movementChanged('switch')}>Jump cut
@@ -985,7 +892,6 @@ 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); @@ -1019,7 +925,7 @@ export class PresBox extends ViewBoxBaseComponent 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, 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 }); @@ -1084,14 +990,14 @@ export class PresBox extends ViewBoxBaseComponent CollectionFreeFormDocumentView.setupScroll(tagDoc, 0); CollectionFreeFormDocumentView.setupKeyframes(childDocs, 0); } - let lastFrame: number = 0; - childDocs.forEach((doc) => { - if (NumCast(doc.appearFrame) > lastFrame) lastFrame = NumCast(doc.appearFrame); - }); + // let lastFrame: number = 0; + // childDocs.forEach((doc) => { + // if (NumCast(doc.appearFrame) > lastFrame) lastFrame = NumCast(doc.appearFrame); + // }); CollectionFreeFormDocumentView.updateScrollframe(tagDoc, currentFrame); CollectionFreeFormDocumentView.updateKeyframe(childDocs, currentFrame || 0); tagDoc.currentFrame = Math.max(0, (currentFrame || 0) + 1); - tagDoc.lastFrame = Math.max(NumCast(tagDoc.currentFrame), lastFrame); + tagDoc.lastFrame = Math.max(NumCast(tagDoc.currentFrame), NumCast(tagDoc.lastFrame)); if (tagDoc.zoomProgressivize) { const resize = document.getElementById('resizable'); if (resize) { @@ -1153,20 +1059,20 @@ export class PresBox extends ViewBoxBaseComponent
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
{this.stringType} selected -
+
Child documents
Edit
-
+
Internal zoom
Viewfinder
{/*
Snapshot
*/}
-
+
Text progressivize
Edit
-
+
Scroll progressivize
Edit
@@ -1188,7 +1094,7 @@ export class PresBox extends ViewBoxBaseComponent
{"Last frame"}
}>
{NumCast(targetDoc.lastFrame)}
-
console.log("play frames")}>Play
+
console.log(" TODO: play frames")}>Play
@@ -1298,9 +1204,7 @@ export class PresBox extends ViewBoxBaseComponent const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); const docs = DocListCast(targetDoc[Doc.LayoutFieldKey(targetDoc)]); targetDoc.presProgressivize = !targetDoc.presProgressivize; - console.log(targetDoc.presProgressivize); if (activeItem.presProgressivize) { - console.log("progressivize"); targetDoc.currentFrame = 0; CollectionFreeFormDocumentView.setupKeyframes(docs, docs.length, true); targetDoc.lastFrame = docs.length - 1; @@ -1350,9 +1254,6 @@ export class PresBox extends ViewBoxBaseComponent const y: List = ylist; const tags: JSX.Element[] = []; let pathPoints = ""; //List of all of the pathpoints that need to be added - // console.log(x); - // console.log(x.length); - // console.log(x[0]); for (let i = 0; i < x.length - 1; i++) { if (y[i] || x[i]) { if (i === 0) pathPoints = (x[i] - 11) + "," + (y[i] + 33); @@ -1630,7 +1531,6 @@ export class PresBox extends ViewBoxBaseComponent @undoBatch @action nextAppearFrame = (doc: Doc, i: number): void => { - console.log("next"); const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null); const appearFrame = Cast(doc.appearFrame, "number", null); @@ -1638,9 +1538,7 @@ export class PresBox extends ViewBoxBaseComponent doc.appearFrame = 0; } doc.appearFrame = appearFrame + 1; - const olist = new List(numberRange(NumCast(targetDoc.lastFrame)).map(t => targetDoc.presProgressivize && t < (doc.appearFrame ? doc.appearFrame : i) ? 0 : 1)); - doc["opacity-indexed"] = olist; - console.log(doc.appearFrame); + this.updateOpacityList(doc["opacity-indexed"], NumCast(doc.appearFrame)); } @undoBatch @@ -1654,9 +1552,32 @@ export class PresBox extends ViewBoxBaseComponent doc.appearFrame = 0; } doc.appearFrame = Math.max(0, appearFrame - 1); - const olist = new List(numberRange(NumCast(targetDoc.lastFrame)).map(t => targetDoc.presProgressivize && t < (doc.appearFrame ? doc.appearFrame : i) ? 0 : 1)); - doc["opacity-indexed"] = olist; - console.log(doc.appearFrame); + this.updateOpacityList(doc["opacity-indexed"], NumCast(doc.appearFrame)); + } + + @action + updateOpacityList = (list: any, frame: number) => { + const x: List = list; + if (x && x.length >= frame) { + for (let i = 0; i < x.length; i++) { + if (i < frame) { + x[i] = 0; + } else if (i >= frame) { + x[i] = 1; + } + } + list = x; + } else { + x.length = frame + 1; + for (let i = 0; i < x.length; i++) { + if (i < frame) { + x[i] = 0; + } else if (i >= frame) { + x[i] = 1; + } + } + list = x; + } } @computed get moreInfoDropdown() { @@ -1746,37 +1667,37 @@ export class PresBox extends ViewBoxBaseComponent onPointerDown={e => e.stopPropagation()} onChange={this.viewChanged} value={mode}> - {/* */} - {/* */}
- -
this.startOrResetPres(0)}> -   - -
-
{ e.stopPropagation; this.togglePlay(); }}> - - {this.playDropdown} -
- - +
this.layoutDoc.presStatus = "manual"}>   Present
{ e.stopPropagation; this.togglePresent(); }}> {this.presentDropdown}
-
- -
-
- -
-
this.layoutDoc.presStatus = "edit"}> - +
+ {/* +
this.startOrResetPres(0)}> +   + +
+
{ e.stopPropagation; this.togglePlay(); }}> + + {this.playDropdown} +
+ */} +
+
this.startOrResetPres(this.itemIndex)}>
+
+
+
Slide {this.itemIndex + 1} / {this.childDocs.length}
+
+
this.layoutDoc.presStatus = "edit"}> + +
@@ -1809,14 +1730,4 @@ Scripting.addGlobal(function lookupPresBoxField(container: Doc, field: string, d if (field === '_itemIndex') return container._itemIndex; if (field === 'presBox') return container; return undefined; -}); - - - -// console.log("render = " + this.layoutDoc.title + " " + this.layoutDoc.presStatus); -// const presOrderedDocs = DocListCast(activeItem.presOrderedDocs); -// if (presOrderedDocs.length != this.childDocs.length || presOrderedDocs.some((pd, i) => pd !== this.childDocs[i])) { -// this.rootDoc.presOrderedDocs = new List(this.childDocs.slice()); -// } - - +}); \ No newline at end of file diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index fc65f34eb..76d23ddfe 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -536,6 +536,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp Doc.AddDocToList(Cast(Doc.UserDoc()["template-notes"], Doc, null), "data", this.rootDoc); }, icon: "eye" }); + appearanceItems.push({ description: "Create progressivized slide...", event: this.progressivizeText, icon: "desktop" }); cm.addItem({ description: "Appearance...", subitems: appearanceItems, icon: "eye" }); const options = cm.findByDescription("Options..."); @@ -547,6 +548,69 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp this._downX = this._downY = Number.NaN; } + progressivizeText = () => { + const list = this.ProseRef?.getElementsByTagName("li"); + const mainBulletText: string[] = []; + const mainBulletList: Doc[] = []; + if (list) { + const newBullets: Doc[] = this.recursiveProgressivize(1, list); + mainBulletList.push.apply(mainBulletList, newBullets); + } + console.log(mainBulletList.length); + const title = Docs.Create.TextDocument(StrCast(this.rootDoc.title), { title: "Title", _width: 800, _height: 70, x: 20, y: -10, _fontSize: '20pt', backgroundColor: "rgba(0,0,0,0)", appearFrame: 0, _fontWeight: 700 }); + mainBulletList.push(title); + const doc = Docs.Create.FreeformDocument(mainBulletList, { + title: StrCast(this.rootDoc.title), + x: NumCast(this.props.Document.x), y: NumCast(this.props.Document.y) + NumCast(this.props.Document._height) + 10, + _width: 400, _height: 225, _fitToBox: true, + }); + this.props.addDocument?.(doc); + } + + recursiveProgressivize = (nestDepth: number, list: HTMLCollectionOf, d?: number, y?: number, before?: string): Doc[] => { + const mainBulletList: Doc[] = []; + let b = d ? d : 0; + let yLoc = y ? y : 0; + let nestCount = 0; + let count: string = before ? before : ''; + const fontSize: string = (16 - (nestDepth * 2)) + 'pt'; + const xLoc: number = (nestDepth * 20); + const width: number = 390 - xLoc; + const height: number = 55 - (nestDepth * 5); + for (let i = 0; i < list.length; i++) { + const mainBullets: number = Number(list[i].getAttribute("data-bulletstyle")); + if (mainBullets === nestDepth) { + if (list[i].childElementCount > 1) { + b++; + nestCount++; + count = before ? count + nestCount + "." : nestCount + "."; + yLoc += height; + const text = list[i].getElementsByTagName("p")[0].innerText; + const length = text.length; + console.log(yLoc); + const bullet1 = Docs.Create.TextDocument(count + " " + text, { title: "Slide text", _width: width, _height: height, x: xLoc, y: 10 + (yLoc), _fontSize: fontSize, backgroundColor: "rgba(0,0,0,0)", appearFrame: d ? d : b }); + mainBulletList.push(bullet1); + const newList = this.recursiveProgressivize(nestDepth + 1, list[i].getElementsByTagName("li"), b, yLoc, count); + mainBulletList.push.apply(mainBulletList, newList); + b += newList.length; + yLoc += newList.length * (55 - ((nestDepth + 1) * 5)); + } else { + b++; + nestCount++; + count = before ? count + nestCount + "." : nestCount + "."; + yLoc += height; + const text = list[i].innerText; + const length = text.length; + console.log(yLoc); + const bullet1 = Docs.Create.TextDocument(count + " " + text, { title: "Slide text", _width: width, _height: height, x: xLoc, y: 10 + (yLoc), _fontSize: fontSize, backgroundColor: "rgba(0,0,0,0)", appearFrame: d ? d : b }); + mainBulletList.push(bullet1); + } + } + } + console.log("b: " + b); + return mainBulletList; + } + recordDictation = () => { DictationManager.Controls.listen({ interimHandler: this.setCurrentBulletContent, @@ -1374,6 +1438,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp color: this.props.color ? this.props.color : StrCast(this.layoutDoc[this.props.fieldKey + "-color"], this.props.hideOnLeave ? "white" : "inherit"), pointerEvents: interactive ? undefined : "none", fontSize: Cast(this.layoutDoc._fontSize, "string", null), + fontWeight: Cast(this.layoutDoc._fontWeight, "number", null), fontFamily: StrCast(this.layoutDoc._fontFamily, "inherit"), transition: "opacity 1s" }} diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss index 159cb5f8a..fa70b2a41 100644 --- a/src/client/views/presentationview/PresElementBox.scss +++ b/src/client/views/presentationview/PresElementBox.scss @@ -2,7 +2,8 @@ display: grid; grid-template-columns: max-content max-content max-content; background-color: #d5dce2; - // box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.25); + font-family: Roboto; + letter-spacing: normal; position: relative; pointer-events: all; width: 100%; @@ -21,13 +22,30 @@ .presElementBox-highlight { position: absolute; - transform: translate(-100px, -6px); + transform: translate(-100px, -4px); z-index: -1; width: calc(100% + 200px); - height: calc(100% + 12px); + height: calc(100% + 8px); background-color: #AEDDF8; } + .presElementBox-highlightTop { + position: absolute; + transform: translate(-100px, -4px); + z-index: -1; + width: calc(100% + 200px); + height: calc(50% + 4px); + } + + .presElementBox-highlightBottom { + position: absolute; + transform: translate(-100px, 0px); + z-index: -1; + top: 50%; + width: calc(100% + 200px); + height: calc(50% + 4px); + } + .documentView-node { position: absolute; z-index: 1; @@ -79,8 +97,12 @@ .presElementBox-number { font-size: 12px; + width: 20; font-weight: 700; - left: -15; + text-align: right; + justify-content: center; + align-content: center; + left: -20; position: absolute; display: inline-block; overflow: hidden; @@ -110,9 +132,8 @@ font-size: 10; font-weight: 300; font-family: Roboto; - /* font-style: italic; */ + z-index: 300; letter-spacing: normal; - /* left: 10px; */ } .presElementBox-embedded { @@ -174,7 +195,7 @@ bottom: 3px; width: 20px; height: 20px; - z-index: 200; + z-index: 300; display: flex; background-color: black; color: white; diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx index b3d8cca98..e035ed0b8 100644 --- a/src/client/views/presentationview/PresElementBox.tsx +++ b/src/client/views/presentationview/PresElementBox.tsx @@ -220,7 +220,7 @@ export class PresElementBox extends ViewBoxBaseComponent) => { + e.stopPropagation(); + e.preventDefault(); + DragManager.docsBeingDragged = []; + this._highlightTopRef.current!.style.borderBottom = "0px"; + this._highlightBottomRef.current!.style.borderBottom = "0px"; + } + startDrag = (e: PointerEvent, down: number[], delta: number[]) => { // const ele: HTMLElement[] = PresBox.Instance._eleArray.map(doc => doc); const activeItem = this.rootDoc; const dragData = new DragManager.DocumentDragData(PresBox.Instance.sortArray().map(doc => doc)); // let value = this.getValue(this._heading); // value = typeof value === "string" ? `"${value}"` : value; + let dragItem: HTMLElement[] = []; + PresBox.Instance._dragArray.map(ele => { + const drag = ele; + drag.style.backgroundColor = "#d5dce2"; + drag.style.borderRadius = '5px'; + dragItem.push(drag); + }); if (activeItem) { - DragManager.StartDocumentDrag(PresBox.Instance._dragArray.map(ele => ele), dragData, e.clientX, e.clientY); + DragManager.StartDocumentDrag(dragItem.map(ele => ele), dragData, e.clientX, e.clientY); activeItem.dragging = true; return true; } return false; } + private _highlightTopRef: React.RefObject = React.createRef(); + private _highlightBottomRef: React.RefObject = React.createRef(); + onPointerTop = (e: React.PointerEvent) => { + if (DragManager.docsBeingDragged.length > 0) { + this._highlightTopRef.current!.style.borderTop = "solid 2px #5B9FDD"; + } + } + + onPointerBottom = (e: React.PointerEvent) => { + if (DragManager.docsBeingDragged.length > 0) { + this._highlightBottomRef.current!.style.borderBottom = "solid 2px #5B9FDD"; + } + } + + onPointerLeave = (e: React.PointerEvent) => { + if (DragManager.docsBeingDragged.length > 0) { + this._highlightBottomRef.current!.style.borderBottom = "0px"; + this._highlightTopRef.current!.style.borderTop = "0px"; + } + } + render() { const treecontainer = this.props.ContainingCollectionDoc?._viewType === CollectionViewType.Tree; - const className = "presElementBox-item" + (this.itemIndex === this.indexInPres ? " presElementBox-active" : ""); + 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) : (
<>
@@ -297,7 +334,7 @@ export class PresElementBox extends ViewBoxBaseComponent
{"Movement speed"}
}>
300 ? "block" : "none" }}>{this.transition}
 -
{"Duration of visibility"}
}>
300 ? "block" : "none" }}>{this.duration}
 +
{"Duration"}
}>
300 ? "block" : "none" }}>{this.duration}
{"Remove from presentation"}
}>
e.stopPropagation()} @@ -311,7 +348,9 @@ export class PresElementBox extends ViewBoxBaseComponent e.stopPropagation()} />
-
+
+
+
-- cgit v1.2.3-70-g09d2