aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--package-lock.json13
-rw-r--r--package.json4
-rw-r--r--src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss40
-rw-r--r--src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx40
-rw-r--r--src/client/views/nodes/CollectionFreeFormDocumentView.tsx9
-rw-r--r--src/client/views/nodes/PresBox.scss142
-rw-r--r--src/client/views/nodes/PresBox.tsx185
-rw-r--r--src/client/views/presentationview/PresElementBox.tsx3
8 files changed, 344 insertions, 92 deletions
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<PanZoomDocument, P
<CollectionFreeFormViewPannableContents
centeringShiftX={this.centeringShiftX}
centeringShiftY={this.centeringShiftY}
+ presPaths={BoolCast(this.Document.presPathView)}
+ progressivize={BoolCast(this.Document.editProgressivize)}
transition={Cast(this.layoutDoc._viewTransition, "string", null)}
viewDefDivClick={this.props.viewDefDivClick}
zoomScaling={this.zoomScaling} panX={this.panX} panY={this.panY}>
@@ -1432,11 +1435,44 @@ interface CollectionFreeFormViewPannableContentsProps {
viewDefDivClick?: ScriptField;
children: () => JSX.Element[];
transition?: string;
+ presPaths?: boolean;
+ progressivize?: boolean;
}
@observer
class CollectionFreeFormViewPannableContents extends React.Component<CollectionFreeFormViewPannableContentsProps>{
+ @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 (
+ <svg className={presPaths}>
+ <defs>
+ <marker id="arrow" markerWidth="10" overflow="visible" markerHeight="10" refX="0" refY="3" orient="auto" markerUnits="strokeWidth">
+ <path d="M0,0 L0,6 L9,3 z" fill="#69a6db" />
+ </marker>
+ <marker id={`dot`} orient="auto" overflow="visible">
+ <circle r={3} fill="#69a6db" />
+ </marker>
+ </defs>;
+ {PresBox.Instance.paths}
+ </svg>
+ );
+ }
+ }
+
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<CollectionF
transition: this.props.transition
}}>
{this.props.children()}
+ {this.presPaths}
+ {this.progressivize}
</div>;
}
}
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<CollectionFreeF
public static setupKeyframes(docs: Doc[], timecode: number, progressivize: boolean = false) {
docs.forEach((doc, i) => {
+ if (!doc.appearFrame) doc.appearFrame = i;
const curTimecode = progressivize ? i : timecode;
const xlist = new List<number>(numberRange(timecode + 1).map(i => undefined) as any as number[]);
const ylist = new List<number>(numberRange(timecode + 1).map(i => undefined) as any as number[]);
- const olist = new List<number>(numberRange(timecode + 1).map(t => progressivize && t < i ? 0 : 1));
+ const olist = new List<number>(numberRange(timecode + 1).map(t => progressivize && (t < NumCast(doc.appearFrame)) ? 0 : 1));
+ const oarray = new List<number>();
+ 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<FieldViewProps, PresBoxSchema>
//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<FieldViewProps, PresBoxSchema>
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<FieldViewProps, PresBoxSchema>
@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 (
- <div className="selectedList-items">{index + 1}. {doc.title}</div>
+ <div className="selectedList-items">{index + 1}. {targetDoc.title}</div>
);
});
return list;
@@ -415,13 +419,27 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
@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<FieldViewProps, PresBoxSchema>
@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<FieldViewProps, PresBoxSchema>
@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(<polyline
+ points={pathPoints}
+ style={{
+ opacity: 1,
+ stroke: "#69a6db",
+ strokeWidth: 5,
+ }}
+ markerStart="url(#dot)"
+ markerEnd="url(#arrow)" />);
+ }
+ }
+ 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<FieldViewProps, PresBoxSchema>
<FontAwesomeIcon className='presBox-dropdownIcon' style={{ gridColumn: 2 }} icon={"angle-down"} />
<div className={'presBox-dropdownOptions'} id={'presBoxMovementDropdown'} onClick={e => e.stopPropagation()}>
<div className={`presBox-dropdownOption ${!activeItem.presZoomButton && !activeItem.presNavButton ? "active" : ""}`} onPointerDown={e => e.stopPropagation()} onClick={() => this.movementChanged('none')}>None</div>
- <div className={`presBox-dropdownOption ${activeItem.presZoomButton ? "active" : ""}`} onPointerDown={e => e.stopPropagation()} onClick={() => this.movementChanged('zoom')}>Zoom</div>
- <div className={`presBox-dropdownOption ${activeItem.presNavButton ? "active" : ""}`} onPointerDown={e => e.stopPropagation()} onClick={() => this.movementChanged('nav')}>Navigate</div>
+ <div className={`presBox-dropdownOption ${activeItem.presZoomButton ? "active" : ""}`} onPointerDown={e => e.stopPropagation()} onClick={() => this.movementChanged('zoom')}>Pan and Zoom</div>
+ <div className={`presBox-dropdownOption ${activeItem.presNavButton ? "active" : ""}`} onPointerDown={e => e.stopPropagation()} onClick={() => this.movementChanged('nav')}>Pan</div>
</div>
</div>
- <div className={`slider-value ${activeItem.presZoomButton || activeItem.presNavButton ? "" : "none"}`} style={{ left: thumbLocation + '%' }}>{transitionSpeed}s</div>
<input type="range" step="0.1" min="0.1" max="10" value={transitionSpeed} className={`toolbar-slider ${activeItem.presZoomButton || activeItem.presNavButton ? "" : "none"}`} id="toolbar-slider" onChange={(e: React.ChangeEvent<HTMLInputElement>) => { e.stopPropagation(); this.setTransitionTime(e.target.value); }} />
<div className={`slider-headers ${activeItem.presZoomButton || activeItem.presNavButton ? "" : "none"}`}>
+ <div className={`slider-value ${activeItem.presZoomButton || activeItem.presNavButton ? "" : "none"}`} style={{ left: thumbLocation + '%' }}>{transitionSpeed}s</div>
<div className="slider-text">Slow</div>
<div className="slider-text">Medium</div>
<div className="slider-text">Fast</div>
@@ -693,24 +751,48 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
@computed get playDropdown() {
return (
<div className={`dropdown-play ${this.playTools ? "active" : ""}`} onClick={e => e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
-
+ <div className="dropdown-play-button" onClick={() => this.startOrResetPres(this.itemIndex)}>
+ Start from current slide
+ </div>
+ <div className="dropdown-play-button" onClick={() => this.startOrResetPres(0)}>
+ Start from first slide
+ </div>
</div>
);
}
+ progressivizeOptions = (viewType: string) => {
+ const buttons = [];
+ buttons.push(<div className="ribbon-button" title="Progressivize child documents" onClick={this.progressivize}>Progressivize child documents</div>);
+ buttons.push(<div className="ribbon-button" title="Internal navigation" onClick={() => console.log("hide after")}>Internal navigation</div>);
+ if (viewType === "rtf") {
+ buttons.push(<div className="ribbon-button" title="Progressivize bullet points" onClick={() => console.log("hide after")}>Bullet points</div>);
+ }
+ 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 (
<div>
<div className={`presBox-ribbon ${this.progressivizeTools && this.layoutDoc.presStatus === "edit" ? "active" : ""}`} onClick={e => e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
<div className="ribbon-box">
- <div title="Progressivize" className={`ribbon-button ${activeItem.presProgressivize ? "active" : ""}`} onClick={this.progressivize}>Progressivize Child Documents</div>
+ {targetDoc.type} selected
+ <div className="selectedList">
+ <div className="selectedList-items">1. {targetDoc.title}</div>
+ </div>
</div>
- <div className="ribbon-box">
- Other progressivize features:
- <div title="Progressivize" className={"ribbon-button"}>Progressivize Text Bullet Points</div>
- <div title="Progressivize" className={"ribbon-button"}>Internal Navigation</div>
+ <div className="ribbon-final-box">
+ <div className="progressivizeEdit">
+ <div className="ribbon-button" style={{ backgroundColor: activeItem.presProgressivize ? "#aedef8" : "" }} title="Progressivize child documents" onClick={this.progressivize}>Progressivize child documents</div>
+ <div className="ribbon-button" style={{ display: activeItem.presProgressivize ? "block" : "none", backgroundColor: targetDoc.editProgressivize ? "#aedef8" : "" }} title="Edit progresivize" onClick={this.editProgressivize}>Edit</div>
+ </div>
+ <div className="ribbon-button" title="Internal navigation" onClick={() => console.log("hide after")}>Internal navigation</div>
</div>
</div>
</div>
@@ -719,19 +801,49 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
}
@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(
+ <div className="progressivizeButton" style={{ top: NumCast(doc.y), left: NumCast(doc.x) }}>{doc.appearFrame}</div>
+ );
+ });
+ return tags;
+ }
+
+
+
@computed get moreInfoDropdown() {
return (<div></div>);
@@ -747,8 +859,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
<FontAwesomeIcon className={`dropdown ${this.newDocumentTools ? "active" : ""}`} icon={"angle-down"} />
</div>
<div className="toolbar-divider" />
- <div className="toolbar-button"><FontAwesomeIcon title={"View Links"} icon={"object-group"} onClick={this.toolbarTest} /></div>
- <div className="toolbar-button"><FontAwesomeIcon title={"Portal"} icon={"eye"} onClick={this.viewLinks} /></div>
+ <div className={`toolbar-button ${this.pathBoolean ? "active" : ""}`}><FontAwesomeIcon title={"View Paths"} icon={"object-group"} onClick={this.viewPaths} /></div>
+ {/* <div className="toolbar-button"><FontAwesomeIcon title={"Portal"} icon={"eye"} onClick={this.toolbarTest} /></div> */}
<div className="toolbar-divider" />
<div className={`toolbar-button ${this.transitionTools ? "active" : ""}`} onClick={this.toggleTransitionTools}>
<FontAwesomeIcon icon={"rocket"} />
@@ -762,6 +874,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
<FontAwesomeIcon className={`dropdown ${this.progressivizeTools ? "active" : ""}`} icon={"angle-down"} />
</div>
<div className="toolbar-divider" />
+ <div className="toolbar-button">
+ <FontAwesomeIcon className={"toolbar-thumbtack"} icon={"thumbtack"} />
+ </div>
<div className={`toolbar-button ${this.moreInfoTools ? "active" : ""}`} onClick={this.toggleMoreInfo}>
<div className={`toolbar-moreInfo ${this.moreInfoTools ? "active" : ""}`}>
<div className="toolbar-moreInfoBall" />
@@ -778,7 +893,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
<FontAwesomeIcon className={`dropdown ${this.newDocumentTools ? "active" : ""}`} icon={"angle-down"} />
</div>
<div className="toolbar-button">
- <FontAwesomeIcon className={`dropdown ${this.newDocumentTools ? "active" : ""}`} icon={"thumbtack"} />
+ <FontAwesomeIcon className={"toolbar-thumbtack"} icon={"thumbtack"} />
</div>
<div className="toolbar-button" onClick={this.toggleMoreInfo}>
<div className="toolbar-moreInfo">
@@ -807,10 +922,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps, PresBoxSchema>
<option onPointerDown={e => e.stopPropagation()} value={CollectionViewType.Carousel}>Slides</option>
</select>
<div className="presBox-presentPanel">
- <div className={`presBox-button ${this.layoutDoc.presStatus !== "edit" ? "active" : ""}`} title={"Reset Presentation" + this.layoutDoc.presStatus ? "" : " From Start"} style={{ gridColumn: 2 }} onClick={this.startOrResetPres}>
+ <div className={`presBox-button ${this.layoutDoc.presStatus !== "edit" ? "active" : ""}`} title={"Reset Presentation" + this.layoutDoc.presStatus ? "" : " From Start"} style={{ gridColumn: 2 }} onClick={() => this.startOrResetPres(0)}>
<FontAwesomeIcon icon={"clock"} /> &nbsp;
<FontAwesomeIcon icon={this.layoutDoc.presStatus === "auto" ? "pause" : "play"} />
- <div className="toolbar-divider" />
+ <div className="toolbar-divider" style={{ marginLeft: 5 }} />
<FontAwesomeIcon onClick={e => { e.stopPropagation; this.togglePlay(); }} className="dropdown" icon={"angle-down"} />
{this.playDropdown}
</div>
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<FieldViewProps, PresDoc
console.log("normal click");
}
}}
- onPointerDown={e => e.stopPropagation()}>
+ // onPointerDown={e => e.stopPropagation()}
+ >
{treecontainer ? (null) : <>
<div className="presElementBox-number">
{`${this.indexInPres + 1}.`}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 02:09:56 +0000