From 223262242f7db021c8449e920645892cc5ed2820 Mon Sep 17 00:00:00 2001 From: bobzel Date: Sat, 17 Oct 2020 17:45:10 -0400 Subject: major rewrite of native width/height/aspect. Fixed scaling of text note sidebars. --- src/client/views/nodes/CollectionFreeFormDocumentView.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src/client/views/nodes/CollectionFreeFormDocumentView.tsx') diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index 5a8ce4e14..7d5c224bd 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -55,8 +55,8 @@ export class CollectionFreeFormDocumentView extends DocComponent Date: Fri, 6 Nov 2020 23:18:17 +0800 Subject: Cleaned up code (1) Updated to use enums for PresEffect (Directions) and PresColor (2) Made update pres selection work with applying to selected items (3) Removed Effects + Movement from when targetDoc === presCollection --- .../views/nodes/CollectionFreeFormDocumentView.tsx | 22 +-- src/client/views/nodes/PresBox.scss | 1 + src/client/views/nodes/PresBox.tsx | 194 +++++++++++++-------- 3 files changed, 133 insertions(+), 84 deletions(-) (limited to 'src/client/views/nodes/CollectionFreeFormDocumentView.tsx') diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index 7d5c224bd..c87239ee9 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -16,7 +16,7 @@ import { ComputedField } from "../../../fields/ScriptField"; import { listSpec } from "../../../fields/Schema"; import { DocumentType } from "../../documents/DocumentTypes"; import { Zoom, Fade, Flip, Rotate, Bounce, Roll, LightSpeed } from 'react-reveal'; -import { PresBox } from "./PresBox"; +import { PresBox, PresEffect } from "./PresBox"; import { InkingStroke } from "../InkingStroke"; export interface CollectionFreeFormDocumentViewProps extends DocumentViewProps { @@ -212,23 +212,23 @@ export class CollectionFreeFormDocumentView extends DocComponent; if (PresBox.Instance && 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', + left: this.layoutDoc.presEffectDirection === PresEffect.Left, + right: this.layoutDoc.presEffectDirection === PresEffect.Right, + top: this.layoutDoc.presEffectDirection === PresEffect.Top, + bottom: this.layoutDoc.presEffectDirection === PresEffect.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 PresEffect.Fade: return ({node}); break; + case PresEffect.Flip: return ({node}); break; + case PresEffect.Rotate: return ({node}); break; + case PresEffect.Bounce: return ({node}); break; + case PresEffect.Roll: return ({node}); break; case "LightSpeed": return ({node}); break; - case "None": return node; break; + case PresEffect.None: return node; break; default: return node; break; } } else { diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss index a89bc73c6..5f4f571f3 100644 --- a/src/client/views/nodes/PresBox.scss +++ b/src/client/views/nodes/PresBox.scss @@ -1053,6 +1053,7 @@ $light-background: #ececec; .presPanel-button:hover { background-color: #5a5a5a; + transform: scale(1.2); } .presPanel-button-text:hover { diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index 190af34b9..9c263148b 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -11,7 +11,7 @@ import { List } from "../../../fields/List"; import { PrefetchProxy } from "../../../fields/Proxy"; import { listSpec, makeInterface } from "../../../fields/Schema"; import { ScriptField } from "../../../fields/ScriptField"; -import { Cast, NumCast, StrCast } from "../../../fields/Types"; +import { BoolCast, Cast, NumCast, StrCast } from "../../../fields/Types"; import { returnFalse, returnOne, returnZero } from "../../../Utils"; import { Docs } from "../../documents/Documents"; import { DocumentType } from "../../documents/DocumentTypes"; @@ -38,12 +38,17 @@ export enum PresMovement { } export enum PresEffect { - Fade = "Fade", + Fade = "Fade in", Flip = "Flip", Rotate = "Rotate", Bounce = "Bounce", Roll = "Roll", None = "None", + Left = "left", + Right = "right", + Center = "center", + Top = "top", + Bottom = "bottom" } enum PresStatus { @@ -52,7 +57,7 @@ enum PresStatus { Edit = "edit" } -enum PresColors { +enum PresColor { LightBlue = "#AEDDF8", DarkBlue = "#5B9FDD", LightBackground = "#ececec", @@ -421,20 +426,23 @@ export class PresBox extends ViewBoxBaseComponent if (tagDoc) tagDoc.opacity = 1; const itemIndexes: number[] = this.getAllIndexes(this.tagDocs, tagDoc); const curInd: number = itemIndexes.indexOf(index); - if (itemIndexes.length > 1 && curDoc.presHideBefore && curInd !== 0) { } - else if (curDoc.presHideBefore) { - if (index > this.itemIndex) { - tagDoc.opacity = 0; - } else if (!curDoc.presHideAfter) { - tagDoc.opacity = 1; + if (tagDoc === this.layoutDoc.presCollection) { tagDoc.opacity = 1 } + else { + if (itemIndexes.length > 1 && curDoc.presHideBefore && curInd !== 0) { } + else if (curDoc.presHideBefore) { + if (index > this.itemIndex) { + tagDoc.opacity = 0; + } else if (!curDoc.presHideAfter) { + tagDoc.opacity = 1; + } } - } - if (itemIndexes.length > 1 && curDoc.presHideAfter && curInd !== (itemIndexes.length - 1)) { } - else if (curDoc.presHideAfter) { - if (index < this.itemIndex) { - tagDoc.opacity = 0; - } else if (!curDoc.presHideBefore) { - tagDoc.opacity = 1; + if (itemIndexes.length > 1 && curDoc.presHideAfter && curInd !== (itemIndexes.length - 1)) { } + else if (curDoc.presHideAfter) { + if (index < this.itemIndex) { + tagDoc.opacity = 0; + } else if (!curDoc.presHideBefore) { + tagDoc.opacity = 1; + } } } }); @@ -990,6 +998,32 @@ export class PresBox extends ViewBoxBaseComponent }); } + @undoBatch + @action + updateEffectDirection = (effect: any, all?: boolean) => { + const array: any[] = all ? this.childDocs : Array.from(this._selectedArray.keys()); + array.forEach((doc) => { + const tagDoc = Cast(doc.presentationTargetDoc, Doc, null); + switch (effect) { + case PresEffect.Left: + tagDoc.presEffectDirection = PresEffect.Left; + break; + case PresEffect.Right: + tagDoc.presEffectDirection = PresEffect.Right; + break; + case PresEffect.Top: + tagDoc.presEffectDirection = PresEffect.Top; + break; + case PresEffect.Bottom: + tagDoc.presEffectDirection = PresEffect.Bottom; + break; + case PresEffect.Center: default: + tagDoc.presEffectDirection = PresEffect.Center; + break; + } + }); + } + @undoBatch @action updateEffect = (effect: any, all?: boolean) => { @@ -1024,6 +1058,8 @@ export class PresBox extends ViewBoxBaseComponent @computed get transitionDropdown() { const activeItem: Doc = this.activeItem; const targetDoc: Doc = this.targetDoc; + const isPresCollection: boolean = (targetDoc === this.layoutDoc.presCollection); + const isPinWithView: boolean = BoolCast(activeItem.presPinView); if (activeItem && targetDoc) { const transitionSpeed = activeItem.presTransition ? NumCast(activeItem.presTransition) / 1000 : 0.5; let duration = activeItem.presDuration ? NumCast(activeItem.presDuration) / 1000 : 2; @@ -1034,16 +1070,22 @@ export class PresBox extends ViewBoxBaseComponent
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onClick={action(e => { e.stopPropagation(); this.openMovementDropdown = false; this.openEffectDropdown = false; })}>
Movement -
{ e.stopPropagation(); this.openMovementDropdown = !this.openMovementDropdown; })} style={{ borderBottomLeftRadius: this.openMovementDropdown ? 0 : 5, border: this.openMovementDropdown ? 'solid 2px #5B9FDD' : 'solid 1px black' }}> - {this.setMovementName(activeItem.presMovement, activeItem)} - -
e.stopPropagation()} style={{ display: this.openMovementDropdown ? "grid" : "none" }}> -
e.stopPropagation()} onClick={() => this.updateMovement(PresMovement.None)}>None
-
e.stopPropagation()} onClick={() => this.updateMovement(PresMovement.Zoom)}>Pan {"&"} Zoom
-
e.stopPropagation()} onClick={() => this.updateMovement(PresMovement.Pan)}>Pan
-
e.stopPropagation()} onClick={() => this.updateMovement(PresMovement.Jump)}>Jump cut
+ {isPresCollection || (isPresCollection && isPinWithView) ? +
+ {this.scrollable ? "Scroll to pinned view" : !isPinWithView ? "No movement" : "Pan & Zoom to pinned view"}
-
+ : +
{ e.stopPropagation(); this.openMovementDropdown = !this.openMovementDropdown; })} style={{ borderBottomLeftRadius: this.openMovementDropdown ? 0 : 5, border: this.openMovementDropdown ? `solid 2px ${PresColor.DarkBlue}` : 'solid 1px black' }}> + {this.setMovementName(activeItem.presMovement, activeItem)} + +
e.stopPropagation()} style={{ display: this.openMovementDropdown ? "grid" : "none" }}> +
e.stopPropagation()} onClick={() => this.updateMovement(PresMovement.None)}>None
+
e.stopPropagation()} onClick={() => this.updateMovement(PresMovement.Zoom)}>Pan {"&"} Zoom
+
e.stopPropagation()} onClick={() => this.updateMovement(PresMovement.Pan)}>Pan
+
e.stopPropagation()} onClick={() => this.updateMovement(PresMovement.Jump)}>Jump cut
+
+
+ }
Transition Speed
@@ -1078,9 +1120,9 @@ export class PresBox extends ViewBoxBaseComponent
Visibility {"&"} Duration
-
{"Hide before presented"}
}>
this.updateHideBefore(activeItem)}>Hide before
 -
{"Hide after presented"}
}>
this.updateHideAfter(activeItem)}>Hide after
 -
{"Open document in a new tab"}
}>
this.updateOpenDoc(activeItem)}>Open
 + {isPresCollection ? (null) :
{"Hide before presented"}
}>
this.updateHideBefore(activeItem)}>Hide before
} + {isPresCollection ? (null) :
{"Hide after presented"}
}>
this.updateHideAfter(activeItem)}>Hide after
} +
{"Open document in a new tab"}
}>
this.updateOpenDoc(activeItem)}>Open
Slide Duration
@@ -1111,11 +1153,11 @@ export class PresBox extends ViewBoxBaseComponent
Long
-
+ {isPresCollection ? (null) :
Effects -
{ e.stopPropagation(); this.openEffectDropdown = !this.openEffectDropdown; })} style={{ borderBottomLeftRadius: this.openEffectDropdown ? 0 : 5, border: this.openEffectDropdown ? 'solid 2px #5B9FDD' : 'solid 1px black' }}> +
{ e.stopPropagation(); this.openEffectDropdown = !this.openEffectDropdown; })} style={{ borderBottomLeftRadius: this.openEffectDropdown ? 0 : 5, border: this.openEffectDropdown ? `solid 2px ${PresColor.DarkBlue}` : 'solid 1px black' }}> {effect} - +
e.stopPropagation()}>
e.stopPropagation()} onClick={() => this.updateEffect(PresEffect.None)}>None
e.stopPropagation()} onClick={() => this.updateEffect(PresEffect.Fade)}>Fade In
@@ -1132,13 +1174,13 @@ export class PresBox extends ViewBoxBaseComponent
-
{"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)}>
 +
{"Enter from left"}
}>
this.updateEffectDirection(PresEffect.Left)}>
 +
{"Enter from right"}
}>
this.updateEffectDirection(PresEffect.Right)}>
 +
{"Enter from top"}
}>
this.updateEffectDirection(PresEffect.Top)}>
 +
{"Enter from bottom"}
}>
this.updateEffectDirection(PresEffect.Bottom)}>
 +
{"Enter from center"}
}>
this.updateEffectDirection(PresEffect.Center)}>
-
+
}
this.applyTo(this.childDocs)}> Apply to all @@ -1168,13 +1210,13 @@ export class PresBox extends ViewBoxBaseComponent const targetDoc: Doc = this.targetDoc; this.updateMovement(activeItem.presMovement, true); this.updateEffect(targetDoc.presEffect, true); + this.updateEffectDirection(targetDoc.presEffectDirection, true) array.forEach((doc) => { const curDoc = Cast(doc, Doc, null); const tagDoc = Cast(curDoc.presentationTargetDoc, Doc, null); if (tagDoc && targetDoc) { curDoc.presTransition = activeItem.presTransition; curDoc.presDuration = activeItem.presDuration; - tagDoc.presEffectDirection = targetDoc.presEffectDirection; curDoc.presHideBefore = activeItem.presHideBefore; curDoc.presHideAfter = activeItem.presHideAfter; } @@ -1190,10 +1232,10 @@ export class PresBox extends ViewBoxBaseComponent
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
-
activeItem.playAuto = !activeItem.playAuto}>Play automatically
-
activeItem.playAuto = !activeItem.playAuto}>Play on next
+
activeItem.playAuto = !activeItem.playAuto}>Play automatically
+
activeItem.playAuto = !activeItem.playAuto}>Play on next
- {/* {targetDoc.type === DocumentType.VID ?
activeItem.presVidFullScreen = !activeItem.presVidFullScreen}>Full screen
: (null)} */} + {/* {targetDoc.type === DocumentType.VID ?
activeItem.presVidFullScreen = !activeItem.presVidFullScreen}>Full screen
: (null)} */} {targetDoc.type === DocumentType.AUDIO ?
Start time
@@ -1214,7 +1256,7 @@ export class PresBox extends ViewBoxBaseComponent
: (null)} {this.panable || this.scrollable || this.targetDoc.type === DocumentType.COMPARISON ? 'Pinned view' : (null)}
-
{activeItem.presPinView ? "Turn off pin with view" : "Turn on pin with view"}
}>
{activeItem.presPinView ? "Turn off pin with view" : "Turn on pin with view"}
}>
{ activeItem.presPinView = !activeItem.presPinView; targetDoc.presPinView = activeItem.presPinView; @@ -1315,15 +1357,15 @@ export class PresBox extends ViewBoxBaseComponent
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
-
{ this.layout = 'blank'; this.createNewSlide(this.layout); })} /> -
{ this.layout = 'title'; this.createNewSlide(this.layout); })}> +
{ this.layout = 'blank'; this.createNewSlide(this.layout); })} /> +
{ this.layout = 'title'; this.createNewSlide(this.layout); })}>
Title
Subtitle
-
{ this.layout = 'header'; this.createNewSlide(this.layout); })}> +
{ this.layout = 'header'; this.createNewSlide(this.layout); })}>
Section header
-
{ this.layout = 'content'; this.createNewSlide(this.layout); })}> +
{ this.layout = 'content'; this.createNewSlide(this.layout); })}>
Title
Text goes here
@@ -1355,26 +1397,26 @@ export class PresBox extends ViewBoxBaseComponent
Choose type:
-
this.addFreeform = !this.addFreeform)}>Text
-
this.addFreeform = !this.addFreeform)}>Freeform
+
this.addFreeform = !this.addFreeform)}>Text
+
this.addFreeform = !this.addFreeform)}>Freeform
Preset layouts:
-
this.layout = 'blank')} /> -
this.layout = 'title')}> +
this.layout = 'blank')} /> +
this.layout = 'title')}>
Title
Subtitle
-
this.layout = 'header')}> +
this.layout = 'header')}>
Section header
-
this.layout = 'content')}> +
this.layout = 'content')}>
Title
Text goes here
-
this.layout = 'twoColumns')}> +
this.layout = 'twoColumns')}>
Title
Column one text
Column two text
@@ -1533,8 +1575,8 @@ export class PresBox extends ViewBoxBaseComponent {/*
{this.stringType} selected
-
Contents
-
Edit
+
Contents
+
Edit
Active text color
@@ -1549,12 +1591,12 @@ export class PresBox extends ViewBoxBaseComponent
{this.viewedColorPicker}
-
Zoom
-
Edit
+
Zoom
+
Edit
-
Scroll
-
Edit
+
Scroll
+
Edit
*/}
@@ -1564,7 +1606,7 @@ export class PresBox extends ViewBoxBaseComponent
{ e.stopPropagation(); this.prevKeyframe(targetDoc, activeItem); }}>
-
targetDoc.editing = !targetDoc.editing)} > {NumCast(targetDoc._currentFrame)}
@@ -1578,7 +1620,7 @@ export class PresBox extends ViewBoxBaseComponent {this.frameListHeader} {this.frameList}
-
console.log(" TODO: play frames")}>Play
+
console.log(" TODO: play frames")}>Play
@@ -1794,7 +1836,7 @@ export class PresBox extends ViewBoxBaseComponent tags.push(
{this.checkMovementLists(doc, doc["x-indexed"], doc["y-indexed"])}
); } tags.push( -
{ 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) }}> +
{ 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 ? PresColor.LightBlue : "#c8c8c8", top: NumCast(doc.y), left: NumCast(doc.x) }}>
{ e.stopPropagation(); this.prevAppearFrame(doc, index); }} />
{doc.appearFrame}
{ e.stopPropagation(); this.nextAppearFrame(doc, index); }} />
@@ -1884,7 +1926,7 @@ export class PresBox extends ViewBoxBaseComponent
*/}
{"View paths"}
}> -
1 ? 1 : 0.3, color: this._pathBoolean ? PresColors.DarkBlue : 'white', width: isMini ? "100%" : undefined }} className={"toolbar-button"} onClick={this.childDocs.length > 1 ? this.viewPaths : undefined}> +
1 ? 1 : 0.3, color: this._pathBoolean ? PresColor.DarkBlue : 'white', width: isMini ? "100%" : undefined }} className={"toolbar-button"} onClick={this.childDocs.length > 1 ? this.viewPaths : undefined}>
@@ -1901,12 +1943,12 @@ export class PresBox extends ViewBoxBaseComponent
*/}
{presKeyEvents ? "Keys are active" : "Keys are not active - click anywhere on the presentation trail to activate keys"}
}>
- +
{propTitle}
}>
- 0 ? PresColors.DarkBlue : 'white' }} /> + 0 ? PresColor.DarkBlue : 'white' }} />
@@ -2033,14 +2075,17 @@ export class PresBox extends ViewBoxBaseComponent } @computed get playButtons() { + const presEnd: boolean = !this.layoutDoc.presLoop && (this.itemIndex === this.childDocs.length - 1); + const presStart: boolean = !this.layoutDoc.presLoop && (this.itemIndex === 0); // Case 1: There are still other frames and should go through all frames before going to next slide return (
-
{"Loop"}
}>
this.layoutDoc.presLoop = !this.layoutDoc.presLoop}>
 +
{"Loop"}
}>
this.layoutDoc.presLoop = !this.layoutDoc.presLoop}>
-
{ this.back(); if (this._presTimer) { clearTimeout(this._presTimer); this.layoutDoc.presStatus = PresStatus.Manual; } }}>
+
{ this.back(); if (this._presTimer) { clearTimeout(this._presTimer); this.layoutDoc.presStatus = PresStatus.Manual; } }}>
{this.layoutDoc.presStatus === PresStatus.Autoplay ? "Pause" : "Autoplay"}
}>
 -
{ this.next(); if (this._presTimer) { clearTimeout(this._presTimer); this.layoutDoc.presStatus = PresStatus.Manual; } }}>
+
{ this.next(); if (this._presTimer) { clearTimeout(this._presTimer); this.layoutDoc.presStatus = PresStatus.Manual; } }}>
+
{"Click to return to 1st slide"}
}>
this.gotoDocument(0)}>1
this.gotoDocument(0)} @@ -2069,16 +2114,19 @@ export class PresBox extends ViewBoxBaseComponent this.childDocs.slice(); const mode = StrCast(this.rootDoc._viewType) as CollectionViewType; const presKeyEvents: boolean = (this.isPres && this._presKeyEventsActive && this.rootDoc === Doc.UserDoc().activePresentation); + const presEnd: boolean = !this.layoutDoc.presLoop && (this.itemIndex === this.childDocs.length - 1); + const presStart: boolean = !this.layoutDoc.presLoop && (this.itemIndex === 0); return CurrentUserUtils.OverlayDocs.includes(this.rootDoc) ?
-
-
{"Loop"}
}>
this.layoutDoc.presLoop = !this.layoutDoc.presLoop}>
 +
+
{"Loop"}
}>
this.layoutDoc.presLoop = !this.layoutDoc.presLoop}>
-
{ this.back(); if (this._presTimer) { clearTimeout(this._presTimer); this.layoutDoc.presStatus = PresStatus.Manual; } }}>
+
{ this.back(); if (this._presTimer) { clearTimeout(this._presTimer); this.layoutDoc.presStatus = PresStatus.Manual; } }}>
{this.layoutDoc.presStatus === PresStatus.Autoplay ? "Pause" : "Autoplay"}
}>
 -
{ this.next(); if (this._presTimer) { clearTimeout(this._presTimer); this.layoutDoc.presStatus = PresStatus.Manual; } }}>
+
{ this.next(); if (this._presTimer) { clearTimeout(this._presTimer); this.layoutDoc.presStatus = PresStatus.Manual; } }}>
-
this.gotoDocument(0)}> +
{"Click to return to 1st slide"}
}>
this.gotoDocument(0)}>1
 +
Slide {this.itemIndex + 1} / {this.childDocs.length} {this.playButtonFrames}
-- cgit v1.2.3-70-g09d2