aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes')
-rw-r--r--src/client/views/nodes/CollectionFreeFormDocumentView.tsx4
-rw-r--r--src/client/views/nodes/ComparisonBox.tsx4
-rw-r--r--src/client/views/nodes/DocumentView.tsx44
-rw-r--r--src/client/views/nodes/FocusViewOptions.ts11
-rw-r--r--src/client/views/nodes/FontIconBox/FontIconBox.tsx9
-rw-r--r--src/client/views/nodes/IconTagBox.scss2
-rw-r--r--src/client/views/nodes/MapBox/MapAnchorMenu.tsx12
-rw-r--r--src/client/views/nodes/formattedText/DashFieldView.tsx9
-rw-r--r--src/client/views/nodes/imageEditor/ImageEditor.tsx69
-rw-r--r--src/client/views/nodes/imageEditor/ImageEditorButtons.tsx2
-rw-r--r--src/client/views/nodes/trails/CubicBezierEditor.tsx154
-rw-r--r--src/client/views/nodes/trails/PresBox.scss117
-rw-r--r--src/client/views/nodes/trails/PresBox.tsx1024
-rw-r--r--src/client/views/nodes/trails/SpringUtils.ts9
14 files changed, 714 insertions, 756 deletions
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 3cbfb1796..beea6ab3c 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -28,7 +28,7 @@ export enum GroupActive { // flags for whether a view is activate because of its
}
/// Ugh, typescript has no run-time way of iterating through the keys of an interface. so we need
/// manaully keep this list of keys in synch wih the fields of the freeFormProps interface
-const freeFormPropsKeys = ['x', 'y', 'z', 'zIndex', 'rotation', 'opacity', 'backgroundColor', 'color', 'highlight', 'width', 'height', 'autoDim', 'transition'];
+const freeFormPropsKeys = ['x', 'y', 'z', 'width', 'height', 'zIndex', 'autoDim', 'rotation', 'color', 'backgroundColor', 'opacity', 'highlight', 'transition'];
interface freeFormProps {
x: number;
y: number;
@@ -198,7 +198,7 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
}
public static updateKeyframe(timer: NodeJS.Timeout | undefined, docs: Doc[], time: number) {
- const newTimer = DocumentView.SetViewTransition(docs, 'all', 1000, timer, undefined, true);
+ const newTimer = DocumentView.SetViewTransition(docs, 'all', 1000, timer, true);
const timecode = Math.round(time);
docs.forEach(doc => {
this.animFields.forEach(val => {
diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx
index e0c360132..53fbd11c5 100644
--- a/src/client/views/nodes/ComparisonBox.tsx
+++ b/src/client/views/nodes/ComparisonBox.tsx
@@ -1,7 +1,7 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Tooltip } from '@mui/material';
import axios from 'axios';
-import { IReactionDisposer, action, computed, makeObservable, observable, reaction, runInAction, trace } from 'mobx';
+import { IReactionDisposer, action, computed, makeObservable, observable, reaction, runInAction } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
import ReactLoading from 'react-loading';
@@ -510,7 +510,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
* Calls GPT for each flashcard type.
*/
askGPT = async (callType: GPTCallType) => {
- const questionText = 'Question: ' + this.frontText;
+ const questionText = this.frontText;
const queryText = questionText + (callType == GPTCallType.QUIZ ? ' UserAnswer: ' + this._inputValue + '. ' + ' Rubric: ' + this.backText : '');
this.loading = true;
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index f1b48be4a..0193fd328 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -52,6 +52,7 @@ import { FormattedTextBox } from './formattedText/FormattedTextBox';
import { PresEffect, PresEffectDirection } from './trails/PresEnums';
import SpringAnimation from './trails/SlideEffect';
import { SpringType, springMappings } from './trails/SpringUtils';
+import { TagsView } from '../TagsView';
export interface DocumentViewProps extends FieldViewSharedProps {
hideDecorations?: boolean; // whether to suppress all DocumentDecorations when doc is selected
@@ -778,7 +779,7 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
transform: `scale(${this.uiBtnScaling})`,
bottom: this.maxWidgetSize,
}}>
- {this.widgetDecorations ?? null}
+ {this._props.DocumentView?.() ? <TagsView Views={[this._props.DocumentView?.()]} /> : null}
</div>
) : (
<>
@@ -801,10 +802,11 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
ref={r => this.historyRef(this._oldHistoryWheel, (this._oldHistoryWheel = r))}>
<div className="documentView-editorView-resizer" />
{this._componentView?.componentAIView?.() ?? null}
- {this.widgetDecorations ?? null}
+ {this._props.DocumentView?.() ? <TagsView Views={[this._props.DocumentView?.()]} /> : null}
</div>
</>
)}
+ {this.widgetDecorations ?? null}
</>
);
}
@@ -1041,13 +1043,13 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
>,
root: Doc
) {
- const dir = ((presEffectDoc?.presentation_effectDirection ?? presEffectDoc?.followLinkAnimDirection) || PresEffectDirection.Center) as PresEffectDirection;
+ const effectDirection = (presEffectDoc?.presentation_effectDirection ?? presEffectDoc?.followLinkAnimDirection) as PresEffectDirection;
const duration = Cast(presEffectDoc?.presentation_transition, 'number', Cast(presEffectDoc?.followLinkTransitionTime, 'number', null));
const effectProps = {
- left: dir === PresEffectDirection.Left,
- right: dir === PresEffectDirection.Right,
- top: dir === PresEffectDirection.Top,
- bottom: dir === PresEffectDirection.Bottom,
+ left: effectDirection === PresEffectDirection.Left,
+ right: effectDirection === PresEffectDirection.Right,
+ top: effectDirection === PresEffectDirection.Top,
+ bottom: effectDirection === PresEffectDirection.Bottom,
opposite: true,
delay: 0,
duration,
@@ -1061,7 +1063,7 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
const presEffect = StrCast(presEffectDoc?.presentation_effect, StrCast(presEffectDoc?.followLinkAnimEffect));
switch (presEffect) {
case PresEffect.Expand: case PresEffect.Flip: case PresEffect.Rotate: case PresEffect.Bounce:
- case PresEffect.Roll: return <SpringAnimation doc={root} startOpacity={0} dir={dir} presEffect={presEffect} springSettings={timingConfig}>{renderDoc}</SpringAnimation>
+ case PresEffect.Roll: return <SpringAnimation doc={root} startOpacity={0} dir={effectDirection || PresEffectDirection.Left} presEffect={presEffect} springSettings={timingConfig}>{renderDoc}</SpringAnimation>
// case PresEffect.Fade: return <SlideEffect doc={root} dir={dir} presEffect={PresEffect.Fade} tension={timingConfig.stiffness} friction={timingConfig.damping} mass={timingConfig.mass}>{renderDoc}</SlideEffect>
case PresEffect.Fade: return <Fade {...effectProps}>{renderDoc}</Fade>
// keep as preset, doesn't really make sense with spring config
@@ -1388,8 +1390,8 @@ export class DocumentView extends DocComponent<DocumentViewProps>() {
this.Document[Animation] = presEffect;
this._animEffectTimer = setTimeout(() => { this.Document[Animation] = undefined; }, timeInMs); // prettier-ignore
};
- public setViewTransition = (transProp: string, timeInMs: number, afterTrans?: () => void, dataTrans = false) => {
- this._viewTimer = DocumentView.SetViewTransition([this.layoutDoc], transProp, timeInMs, this._viewTimer, afterTrans, dataTrans);
+ public setViewTransition = (transProp: string, timeInMs: number, dataTrans = false) => {
+ this._viewTimer = DocumentView.SetViewTransition([this.layoutDoc], transProp, timeInMs, this._viewTimer, dataTrans);
};
public setCustomView = undoable((custom: boolean, layout: string): void => {
@@ -1588,21 +1590,15 @@ export class DocumentView extends DocComponent<DocumentViewProps>() {
);
}
- public static SetViewTransition(docs: Doc[], transProp: string, timeInMs: number, timer?: NodeJS.Timeout | undefined, afterTrans?: () => void, dataTrans = false) {
- docs.forEach(doc => {
- doc._viewTransition = `${transProp} ${timeInMs}ms`;
- dataTrans && (doc.dataTransition = `${transProp} ${timeInMs}ms`);
- });
+ public static SetViewTransition(docs: Doc[], transProp: string, timeInMs: number, timer?: NodeJS.Timeout | undefined, dataTrans = false) {
+ const setTrans = (transition?: string) =>
+ docs.forEach(doc => {
+ doc._viewTransition = transition;
+ dataTrans && (doc.dataTransition = transition);
+ });
+ setTrans(`${transProp} ${timeInMs}ms`);
timer && clearTimeout(timer);
- return setTimeout(
- () =>
- docs.forEach(doc => {
- doc._viewTransition = undefined;
- dataTrans && (doc.dataTransition = 'inherit');
- afterTrans?.();
- }),
- timeInMs + 10
- );
+ return setTimeout(setTrans, timeInMs + 10);
}
// shows a stacking view collection (by default, but the user can change) of all documents linked to the source
diff --git a/src/client/views/nodes/FocusViewOptions.ts b/src/client/views/nodes/FocusViewOptions.ts
index bb0d2b03c..1c462e98f 100644
--- a/src/client/views/nodes/FocusViewOptions.ts
+++ b/src/client/views/nodes/FocusViewOptions.ts
@@ -22,3 +22,14 @@ export interface FocusViewOptions {
pointFocus?: { X: number; Y: number }; // clientX and clientY coordinates to focus on instead of a document target (used by explore mode)
contextPath?: Doc[]; // path of inner documents that will also be focused
}
+
+/**
+ * if there's an options.effect, it will be handled from linkFollowHighlight. We delay the start of
+ * the highlight so that the target document can be somewhat centered so that the effect/highlight will be seen
+ * bcz: should this delay be an options parameter?
+ * @param options
+ * @returns
+ */
+export function FocusEffectDelay(options: FocusViewOptions) {
+ return (options.zoomTime ?? 0) * 0.5;
+}
diff --git a/src/client/views/nodes/FontIconBox/FontIconBox.tsx b/src/client/views/nodes/FontIconBox/FontIconBox.tsx
index 60b2a7519..f58862028 100644
--- a/src/client/views/nodes/FontIconBox/FontIconBox.tsx
+++ b/src/client/views/nodes/FontIconBox/FontIconBox.tsx
@@ -160,6 +160,7 @@ export class FontIconBox extends ViewBoxBaseComponent<ButtonProps>() {
buttonList,
jsx: undefined,
selectedVal: script(),
+ toolTip: 'Set text font',
getStyle: (val: string) => ({ fontFamily: val }),
};
};
@@ -174,6 +175,7 @@ export class FontIconBox extends ViewBoxBaseComponent<ButtonProps>() {
buttonList: buttonList.filter(value => !Doc.noviceMode || !noviceList.length || noviceList.includes(value as CollectionViewType)),
getStyle: undefined,
selectedVal: StrCast(selected[0]._type_collection),
+ toolTip: 'change view type (press Shift to add as a new view)',
}
: {
jsx: selected.length ? (
@@ -205,11 +207,11 @@ export class FontIconBox extends ViewBoxBaseComponent<ButtonProps>() {
@computed get dropdownListButton() {
const script = ScriptCast(this.Document.script);
const selectedFunc = () => script?.script.run({ this: this.Document, value: '', _readOnly_: true }).result as string;
- const { buttonList, selectedVal, getStyle, jsx } = (() => {
+ const { buttonList, selectedVal, getStyle, jsx, toolTip } = (() => {
switch (this.Document.title) {
case 'Font': return this.handleFontDropdown(selectedFunc, this.buttonList);
case 'Perspective': return this.handleViewDropdown(script, this.buttonList);
- default: return { buttonList: this.buttonList, selectedVal: selectedFunc(), jsx: undefined, getStyle: undefined };
+ default: return { buttonList: this.buttonList, selectedVal: selectedFunc(), toolTip: undefined, jsx: undefined, getStyle: undefined };
} // prettier-ignore
})();
if (jsx) return jsx;
@@ -225,9 +227,10 @@ export class FontIconBox extends ViewBoxBaseComponent<ButtonProps>() {
return (
<Dropdown
selectedVal={selectedVal}
- setSelectedVal={undoable(value => script.script.run({ this: this.Document, value }), `dropdown select ${this.label}`)}
+ setSelectedVal={undoable((value, e) => script.script.run({ this: this.Document, value, shiftKey: e.shiftKey }), `dropdown select ${this.label}`)}
color={SnappingManager.userColor}
background={SnappingManager.userVariantColor}
+ toolTip={toolTip}
type={Type.TERT}
closeOnSelect={false}
dropdownType={DropdownType.SELECT}
diff --git a/src/client/views/nodes/IconTagBox.scss b/src/client/views/nodes/IconTagBox.scss
index 90cc06092..c79d662f4 100644
--- a/src/client/views/nodes/IconTagBox.scss
+++ b/src/client/views/nodes/IconTagBox.scss
@@ -10,8 +10,6 @@
gap: 5px;
padding-left: 5px;
padding-right: 5px;
- padding-top: 2px;
- padding-bottom: 2px;
button {
pointer-events: auto;
diff --git a/src/client/views/nodes/MapBox/MapAnchorMenu.tsx b/src/client/views/nodes/MapBox/MapAnchorMenu.tsx
index 87469b50e..cef202256 100644
--- a/src/client/views/nodes/MapBox/MapAnchorMenu.tsx
+++ b/src/client/views/nodes/MapBox/MapAnchorMenu.tsx
@@ -109,7 +109,7 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
return this._left > 0;
}
- constructor(props: any) {
+ constructor(props: AntimodeMenuProps) {
super(props);
makeObservable(this);
MapAnchorMenu.Instance = this;
@@ -117,10 +117,12 @@ export class MapAnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
}
componentWillUnmount() {
- this.destinationFeatures = [];
- this.destinationSelected = false;
- this.selectedDestinationFeature = undefined;
- this.currentRouteInfoMap = undefined;
+ runInAction(() => {
+ this.destinationFeatures = [];
+ this.destinationSelected = false;
+ this.selectedDestinationFeature = undefined;
+ this.currentRouteInfoMap = undefined;
+ });
this._disposer?.();
}
diff --git a/src/client/views/nodes/formattedText/DashFieldView.tsx b/src/client/views/nodes/formattedText/DashFieldView.tsx
index f0313fba4..0684daeb6 100644
--- a/src/client/views/nodes/formattedText/DashFieldView.tsx
+++ b/src/client/views/nodes/formattedText/DashFieldView.tsx
@@ -5,7 +5,7 @@ import { observer } from 'mobx-react';
import { NodeSelection } from 'prosemirror-state';
import * as React from 'react';
import * as ReactDOM from 'react-dom/client';
-import { returnFalse, returnZero, setupMoveUpEvents } from '../../../../ClientUtils';
+import { returnFalse, returnTrue, returnZero, setupMoveUpEvents } from '../../../../ClientUtils';
import { Doc, DocListCast, Field } from '../../../../fields/Doc';
import { List } from '../../../../fields/List';
import { listSpec } from '../../../../fields/Schema';
@@ -169,12 +169,17 @@ export class DashFieldViewInternal extends ObservableReactComponent<IDashFieldVi
selectedCells={this.selectedCells}
selectedCol={returnZero}
fieldKey={this._fieldKey}
+ highlightCells={emptyFunction} // fix
+ refSelectModeInfo={{ enabled: false, currEditing: undefined }} // fix
+ selectReference={emptyFunction} //
+ eqHighlightFunc={() => []} // fix
+ isolatedSelection={() => [true, true]} // fix
+ rowSelected={returnTrue} //fix
rowHeight={returnZero}
isRowActive={this.isRowActive}
padding={0}
getFinfo={emptyFunction}
setColumnValues={returnFalse}
- setSelectedColumnValues={returnFalse}
allowCRs
oneLine={!this._expanded && !this._props.nodeSelected()}
finishEdit={this.finishEdit}
diff --git a/src/client/views/nodes/imageEditor/ImageEditor.tsx b/src/client/views/nodes/imageEditor/ImageEditor.tsx
index 2ae6ee1dd..6b1d05031 100644
--- a/src/client/views/nodes/imageEditor/ImageEditor.tsx
+++ b/src/client/views/nodes/imageEditor/ImageEditor.tsx
@@ -551,8 +551,7 @@ const ImageEditor = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addDoc
img.src = src;
if (!currImg.current || !originalImg.current || !imageRootDoc) return undefined;
try {
- const res = await createNewImgDoc(img, false);
- return res;
+ return await createNewImgDoc(img, false);
} catch (err) {
console.log(err);
}
@@ -589,9 +588,7 @@ const ImageEditor = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addDoc
// disable once edited has been clicked (doesn't make sense to change after first edit)
disabled={edited}
checked={isNewCollection}
- onChange={() => {
- setIsNewCollection(prev => !prev);
- }}
+ onChange={() => setIsNewCollection(prev => !prev)}
/>
}
label="Create New Collection"
@@ -610,49 +607,13 @@ const ImageEditor = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addDoc
return (
<div className="sideControlsContainer" style={{ backgroundColor: bgColor }}>
<div className="sideControls">
- <div className="imageToolsContainer">
- {imageEditTools.map(tool => {
- return ImageToolButton(tool, tool.type === currTool.type, changeTool);
- })}
- </div>
+ <div className="imageToolsContainer">{imageEditTools.map(tool => ImageToolButton(tool, tool.type === currTool.type, changeTool))}</div>
{currTool.type == ImageToolType.Cut && (
<div className="cutToolsContainer">
- <Button
- style={{ width: '100%' }}
- text="Keep in"
- type={Type.TERT}
- color={cutType == CutMode.IN ? SettingsManager.userColor : bgColor}
- onClick={() => {
- setCutType(CutMode.IN);
- }}
- />
- <Button
- style={{ width: '100%' }}
- text="Keep out"
- type={Type.TERT}
- color={cutType == CutMode.OUT ? SettingsManager.userColor : bgColor}
- onClick={() => {
- setCutType(CutMode.OUT);
- }}
- />
- <Button
- style={{ width: '100%' }}
- text="Draw in"
- type={Type.TERT}
- color={cutType == CutMode.DRAW_IN ? SettingsManager.userColor : bgColor}
- onClick={() => {
- setCutType(CutMode.DRAW_IN);
- }}
- />
- <Button
- style={{ width: '100%' }}
- text="Erase"
- type={Type.TERT}
- color={cutType == CutMode.ERASE ? SettingsManager.userColor : bgColor}
- onClick={() => {
- setCutType(CutMode.ERASE);
- }}
- />
+ <Button style={{ width: '100%' }} text="Keep in" type={Type.TERT} color={cutType == CutMode.IN ? SettingsManager.userColor : bgColor} onClick={() => setCutType(CutMode.IN)} />
+ <Button style={{ width: '100%' }} text="Keep out" type={Type.TERT} color={cutType == CutMode.OUT ? SettingsManager.userColor : bgColor} onClick={() => setCutType(CutMode.OUT)} />
+ <Button style={{ width: '100%' }} text="Draw in" type={Type.TERT} color={cutType == CutMode.DRAW_IN ? SettingsManager.userColor : bgColor} onClick={() => setCutType(CutMode.DRAW_IN)} />
+ <Button style={{ width: '100%' }} text="Erase" type={Type.TERT} color={cutType == CutMode.ERASE ? SettingsManager.userColor : bgColor} onClick={() => setCutType(CutMode.ERASE)} />
</div>
)}
<div className="sliderContainer" onPointerDown={e => e.stopPropagation()}>
@@ -669,9 +630,7 @@ const ImageEditor = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addDoc
defaultValue={genFillTool.sliderDefault}
size="small"
valueLabelDisplay="auto"
- onChange={(e, val) => {
- setCursorData(prev => ({ ...prev, width: val as number }));
- }}
+ onChange={(e, val) => setCursorData(prev => ({ ...prev, width: val as number }))}
/>
)}
{currTool.type === ImageToolType.Cut && (
@@ -687,9 +646,7 @@ const ImageEditor = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addDoc
defaultValue={cutTool.sliderDefault}
size="small"
valueLabelDisplay="auto"
- onChange={(e, val) => {
- setCursorData(prev => ({ ...prev, width: val as number }));
- }}
+ onChange={(e, val) => setCursorData(prev => ({ ...prev, width: val as number }))}
/>
)}
</div>
@@ -701,9 +658,7 @@ const ImageEditor = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addDoc
e.stopPropagation();
handleUndo();
}}
- onPointerUp={e => {
- e.stopPropagation();
- }}
+ onPointerUp={e => e.stopPropagation()}
color={activeColor}
tooltip="Undo"
icon={<IoMdUndo />}
@@ -714,9 +669,7 @@ const ImageEditor = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addDoc
e.stopPropagation();
handleRedo();
}}
- onPointerUp={e => {
- e.stopPropagation();
- }}
+ onPointerUp={e => e.stopPropagation()}
color={activeColor}
tooltip="Redo"
icon={<IoMdRedo />}
diff --git a/src/client/views/nodes/imageEditor/ImageEditorButtons.tsx b/src/client/views/nodes/imageEditor/ImageEditorButtons.tsx
index de2116253..985dc914f 100644
--- a/src/client/views/nodes/imageEditor/ImageEditorButtons.tsx
+++ b/src/client/views/nodes/imageEditor/ImageEditorButtons.tsx
@@ -53,7 +53,7 @@ export function ApplyFuncButtons({ loading, onClick: getEdit, onReset, btnText }
export function ImageToolButton(tool: ImageEditTool, isActive: boolean, selectTool: (type: ImageToolType) => void) {
return (
- <div className="imageEditorButtonContainer">
+ <div key={tool.name} className="imageEditorButtonContainer">
<Button
style={{ width: '100%' }}
text={tool.name}
diff --git a/src/client/views/nodes/trails/CubicBezierEditor.tsx b/src/client/views/nodes/trails/CubicBezierEditor.tsx
index e1ad1e6e5..627b77184 100644
--- a/src/client/views/nodes/trails/CubicBezierEditor.tsx
+++ b/src/client/views/nodes/trails/CubicBezierEditor.tsx
@@ -118,84 +118,82 @@ function CubicBezierEditor({ setFunc, currPoints }: Props) {
}, [c2Down, currPoints]);
return (
- <div
- onPointerMove={e => {
- e.stopPropagation;
- }}>
- <svg className="presBox-bezier-editor" width={`${CONTAINER_WIDTH}`} height={`${CONTAINER_WIDTH}`} xmlns="http://www.w3.org/2000/svg">
- {/* Outlines */}
- <line x1={`${0 + OFFSET}`} y1={`${EDITOR_WIDTH + OFFSET}`} x2={`${EDITOR_WIDTH + OFFSET}`} y2={`${0 + OFFSET}`} stroke="#c1c1c1" strokeWidth="1" />
- {/* Box Outline */}
- <rect x={`${0 + OFFSET}`} y={`${0 + OFFSET}`} width={EDITOR_WIDTH} height={EDITOR_WIDTH} stroke="#c5c5c5" fill="transparent" strokeWidth="1" />
- {/* Editor */}
- <path
- d={`M ${0 + OFFSET} ${EDITOR_WIDTH + OFFSET} C ${currPoints.p1[0] * EDITOR_WIDTH + OFFSET} ${EDITOR_WIDTH - currPoints.p1[1] * EDITOR_WIDTH + OFFSET}, ${
- currPoints.p2[0] * EDITOR_WIDTH + OFFSET
- } ${EDITOR_WIDTH - currPoints.p2[1] * EDITOR_WIDTH + OFFSET}, ${EDITOR_WIDTH + OFFSET} ${0 + OFFSET}`}
- stroke="#ffffff"
- fill="transparent"
- />
- {/* Bottom left */}
- <line
- onPointerDown={() => {
- setC1Down(true);
- }}
- onPointerUp={() => {
- setC1Down(false);
- }}
- x1={`${0 + OFFSET}`}
- y1={`${EDITOR_WIDTH + OFFSET}`}
- x2={`${currPoints.p1[0] * EDITOR_WIDTH + OFFSET}`}
- y2={`${EDITOR_WIDTH - currPoints.p1[1] * EDITOR_WIDTH + OFFSET}`}
- stroke="#00000000"
- strokeWidth="5"
- />
- <line x1={`${0 + OFFSET}`} y1={`${EDITOR_WIDTH + OFFSET}`} x2={`${currPoints.p1[0] * EDITOR_WIDTH + OFFSET}`} y2={`${EDITOR_WIDTH - currPoints.p1[1] * EDITOR_WIDTH + OFFSET}`} stroke="#ffffff" strokeWidth="1" />
- <circle
- cx={`${currPoints.p1[0] * EDITOR_WIDTH + OFFSET}`}
- cy={`${EDITOR_WIDTH - currPoints.p1[1] * EDITOR_WIDTH + OFFSET}`}
- r="5"
- fill={`${c1Down ? '#3fa9ff' : '#ffffff'}`}
- onPointerDown={e => {
- e.stopPropagation();
- setC1Down(true);
- }}
- onPointerUp={() => {
- setC1Down(false);
- }}
- />
- {/* Top right */}
- <line
- onPointerDown={e => {
- e.stopPropagation();
- setC2Down(true);
- }}
- onPointerUp={() => {
- setC2Down(false);
- }}
- x1={`${EDITOR_WIDTH + OFFSET}`}
- y1={`${0 + OFFSET}`}
- x2={`${currPoints.p2[0] * EDITOR_WIDTH + OFFSET}`}
- y2={`${EDITOR_WIDTH - currPoints.p2[1] * EDITOR_WIDTH + OFFSET}`}
- stroke="#00000000"
- strokeWidth="5"
- />
- <line x1={`${EDITOR_WIDTH + OFFSET}`} y1={`${0 + OFFSET}`} x2={`${currPoints.p2[0] * EDITOR_WIDTH + OFFSET}`} y2={`${EDITOR_WIDTH - currPoints.p2[1] * EDITOR_WIDTH + OFFSET}`} stroke="#ffffff" strokeWidth="1" />
- <circle
- cx={`${currPoints.p2[0] * EDITOR_WIDTH + OFFSET}`}
- cy={`${EDITOR_WIDTH - currPoints.p2[1] * EDITOR_WIDTH + OFFSET}`}
- r="5"
- fill={`${c2Down ? '#3fa9ff' : '#ffffff'}`}
- onPointerDown={e => {
- e.stopPropagation();
- setC2Down(true);
- }}
- onPointerUp={() => {
- setC2Down(false);
- }}
- />
- </svg>
- </div>
+ <svg className="presBox-bezier-editor" width={`${CONTAINER_WIDTH}`} height={`${CONTAINER_WIDTH}`} xmlns="http://www.w3.org/2000/svg">
+ {/* Outlines */}
+ <line x1={`${0 + OFFSET}`} y1={`${EDITOR_WIDTH + OFFSET}`} x2={`${EDITOR_WIDTH + OFFSET}`} y2={`${0 + OFFSET}`} stroke="#c1c1c1" strokeWidth="1" />
+ {/* Box Outline */}
+ <rect x={`${0 + OFFSET}`} y={`${0 + OFFSET}`} width={EDITOR_WIDTH} height={EDITOR_WIDTH} stroke="#c5c5c5" fill="transparent" strokeWidth="1" />
+ {/* Editor */}
+ <path
+ d={`M ${0 + OFFSET} ${EDITOR_WIDTH + OFFSET} C ${currPoints.p1[0] * EDITOR_WIDTH + OFFSET} ${EDITOR_WIDTH - currPoints.p1[1] * EDITOR_WIDTH + OFFSET}, ${
+ currPoints.p2[0] * EDITOR_WIDTH + OFFSET
+ } ${EDITOR_WIDTH - currPoints.p2[1] * EDITOR_WIDTH + OFFSET}, ${EDITOR_WIDTH + OFFSET} ${0 + OFFSET}`}
+ stroke="#ffffff"
+ fill="transparent"
+ />
+ {/* Bottom left */}
+ <line
+ onPointerDown={() => {
+ setC1Down(true);
+ }}
+ onPointerMove={e => {
+ e.stopPropagation;
+ }}
+ onPointerUp={() => {
+ setC1Down(false);
+ }}
+ x1={`${0 + OFFSET}`}
+ y1={`${EDITOR_WIDTH + OFFSET}`}
+ x2={`${currPoints.p1[0] * EDITOR_WIDTH + OFFSET}`}
+ y2={`${EDITOR_WIDTH - currPoints.p1[1] * EDITOR_WIDTH + OFFSET}`}
+ stroke="#00000000"
+ strokeWidth="5"
+ />
+ <line x1={`${0 + OFFSET}`} y1={`${EDITOR_WIDTH + OFFSET}`} x2={`${currPoints.p1[0] * EDITOR_WIDTH + OFFSET}`} y2={`${EDITOR_WIDTH - currPoints.p1[1] * EDITOR_WIDTH + OFFSET}`} stroke="#ffffff" strokeWidth="1" />
+ <circle
+ cx={`${currPoints.p1[0] * EDITOR_WIDTH + OFFSET}`}
+ cy={`${EDITOR_WIDTH - currPoints.p1[1] * EDITOR_WIDTH + OFFSET}`}
+ r="5"
+ fill={`${c1Down ? '#3fa9ff' : '#ffffff'}`}
+ onPointerDown={e => {
+ e.stopPropagation();
+ setC1Down(true);
+ }}
+ onPointerUp={() => {
+ setC1Down(false);
+ }}
+ />
+ {/* Top right */}
+ <line
+ onPointerDown={e => {
+ e.stopPropagation();
+ setC2Down(true);
+ }}
+ onPointerUp={() => {
+ setC2Down(false);
+ }}
+ x1={`${EDITOR_WIDTH + OFFSET}`}
+ y1={`${0 + OFFSET}`}
+ x2={`${currPoints.p2[0] * EDITOR_WIDTH + OFFSET}`}
+ y2={`${EDITOR_WIDTH - currPoints.p2[1] * EDITOR_WIDTH + OFFSET}`}
+ stroke="#00000000"
+ strokeWidth="5"
+ />
+ <line x1={`${EDITOR_WIDTH + OFFSET}`} y1={`${0 + OFFSET}`} x2={`${currPoints.p2[0] * EDITOR_WIDTH + OFFSET}`} y2={`${EDITOR_WIDTH - currPoints.p2[1] * EDITOR_WIDTH + OFFSET}`} stroke="#ffffff" strokeWidth="1" />
+ <circle
+ cx={`${currPoints.p2[0] * EDITOR_WIDTH + OFFSET}`}
+ cy={`${EDITOR_WIDTH - currPoints.p2[1] * EDITOR_WIDTH + OFFSET}`}
+ r="5"
+ fill={`${c2Down ? '#3fa9ff' : '#ffffff'}`}
+ onPointerDown={e => {
+ e.stopPropagation();
+ setC2Down(true);
+ }}
+ onPointerUp={() => {
+ setC2Down(false);
+ }}
+ />
+ </svg>
);
}
diff --git a/src/client/views/nodes/trails/PresBox.scss b/src/client/views/nodes/trails/PresBox.scss
index 60d4e580d..e34e1b380 100644
--- a/src/client/views/nodes/trails/PresBox.scss
+++ b/src/client/views/nodes/trails/PresBox.scss
@@ -5,11 +5,25 @@
display: flex;
flex-direction: column;
gap: 1rem;
+ .presBox-gpt-chat-span {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ }
+ textarea {
+ width: 100%;
+ }
+}
+.presBox-subheading-slider {
+ max-width: calc(100% - 25px);
+ width: 100%;
+ padding: 15px;
+ padding-left: 0px;
}
.pres-chat {
display: flex;
- flex-direction: column;
+ flex-direction: row;
gap: 8px;
}
@@ -18,30 +32,38 @@
gap: 8px;
}
-.pres-chatbox-container {
- padding: 16px;
+.pres-chatbox-container,
+.pres-chatbox-container-ai {
+ width: 100%;
+ padding-left: 16px;
+ padding-right: 16px;
outline: 1px solid #999999;
- border-radius: 16px;
+ border-radius: 5px;
display: flex;
align-items: center;
justify-content: space-between;
+ overflow: auto;
+ max-height: 200px;
+ .pres-chatbox {
+ outline: none;
+ border: none;
+ resize: none;
+ font-family: Verdana, Geneva, sans-serif;
+ background-color: transparent;
+ overflow-y: hidden;
+ }
}
-.pres-chatbox {
- outline: none;
- border: none;
- resize: none;
- font-family: Verdana, Geneva, sans-serif;
- background-color: transparent;
- overflow-y: hidden;
+.pres-chatbox-container-ai {
+ padding-left: 8px;
+ padding-right: 8px;
+ margin-left: 8px;
}
-
// Effect Animations
.presBox-effects {
- display: grid;
- grid-template-columns: auto auto;
- gap: 8px;
+ display: flow;
+ margin: auto;
}
.presBox-effect-row {
@@ -55,7 +77,7 @@
overflow: hidden;
width: 80px;
height: 80px;
- display: flex;
+ display: inline-flex;
justify-content: center;
align-items: center;
border: 1px solid rgb(118, 118, 118);
@@ -74,12 +96,19 @@
.presBox-show-hide-dropdown {
cursor: pointer;
- padding: 8px 0;
display: flex;
align-items: center;
gap: 4px;
}
+.presBox-switches {
+ display: flex;
+ width: 100%;
+ > div {
+ width: 100%;
+ }
+}
+
.presBox-bezier-editor {
border: 1px solid rgb(221, 221, 221);
border-radius: 4px;
@@ -96,6 +125,18 @@
align-items: center;
}
+.presBox-previewContainer {
+ display: flex;
+ align-items: center;
+ width: fit-content;
+ margin: auto;
+ grid-template-columns: auto auto;
+ grid-gap: 10px;
+ .presBox-option-block {
+ padding: 0px;
+ }
+}
+
.presBox-cont {
cursor: auto;
position: absolute;
@@ -270,7 +311,7 @@
}
.presBox-toggles {
- display: flex;
+ display: flow;
overflow-x: auto;
}
@@ -280,6 +321,9 @@
font-family: Roboto;
z-index: 100;
transition: 0.7s;
+ .form-wrapper.left .formLabel {
+ width: 100px;
+ }
.ribbon-doubleButton {
display: flex;
@@ -352,6 +396,18 @@
font-size: 11;
font-weight: 400;
margin-top: 10px;
+ max-width: min(85px, 25%);
+ width: 100%;
+ }
+ .presBox-springSlider {
+ display: grid;
+ column-count: 2;
+ grid-template-columns: min(60px, 25%) calc(100% - min(60px, 25%) - min(5px, 10%));
+ grid-gap: min(5px, 10%);
+ > span {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
@@ -459,7 +515,7 @@
justify-content: space-between;
width: 100%;
height: max-content;
- grid-template-columns: auto auto auto;
+ grid-template-columns: auto auto;
grid-template-rows: max-content;
font-weight: 100;
margin-top: 3px;
@@ -520,20 +576,17 @@
}
.presBox-input {
- border: none;
background-color: transparent;
- width: 40;
- // padding: 8px;
- // border-radius: 4px;
- // width: 30;
- // height: 100%;
- // background: none;
- // border: none;
- // text-align: right;
+ text-align: center;
+ width: 100%;
+ height: 15px;
+ font-size: 10;
}
-
- .presBox-input:focus {
- outline: none;
+ .presBox-inputNumber {
+ border: none;
+ background-color: transparent;
+ width: 100%;
+ max-width: 25px;
}
.ribbon-frameSelector {
@@ -737,7 +790,7 @@
font-weight: 200;
height: 20;
background-color: $white;
- display: flex;
+ display: inline-flex;
color: $black;
border-radius: 5px;
width: max-content;
diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index f23b32a48..7c23ca8e1 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -1,7 +1,8 @@
+import { Button, Dropdown, DropdownType, IconButton, Size, Type } from '@dash/components';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Tooltip } from '@mui/material';
import Slider from '@mui/material/Slider';
-import { Button, Dropdown, DropdownType, IconButton, Toggle, ToggleType, Type } from '@dash/components';
+import _ from 'lodash';
import { IReactionDisposer, ObservableSet, action, computed, makeObservable, observable, reaction, runInAction } from 'mobx';
import { observer } from 'mobx-react';
import * as React from 'react';
@@ -40,7 +41,7 @@ import { CollectionFreeFormPannableContents } from '../../collections/collection
import { Colors } from '../../global/globalEnums';
import { DocumentView } from '../DocumentView';
import { FieldView, FieldViewProps } from '../FieldView';
-import { FocusViewOptions } from '../FocusViewOptions';
+import { FocusEffectDelay, FocusViewOptions } from '../FocusViewOptions';
import { OpenWhere, OpenWhereMod } from '../OpenWhere';
import { ScriptingBox } from '../ScriptingBox';
import CubicBezierEditor, { EaseFuncToPoints, TIMING_DEFAULT_MAPPINGS } from './CubicBezierEditor';
@@ -48,7 +49,6 @@ import './PresBox.scss';
import { PresEffect, PresEffectDirection, PresMovement, PresStatus } from './PresEnums';
import SlideEffect from './SlideEffect';
import { AnimationSettings, SpringSettings, SpringType, easeItems, effectItems, effectTimings, movementItems, presEffectDefaultTimings, springMappings, springPreviewColors } from './SpringUtils';
-import _ from 'lodash';
@observer
export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
@@ -61,6 +61,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
}
static navigateToDocScript: ScriptField;
+ public static PanelName = 'PRESBOX'; // name of dockingview tab where presentations get added
+
constructor(props: FieldViewProps) {
super(props);
makeObservable(this);
@@ -72,6 +74,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
private _disposers: { [name: string]: IReactionDisposer } = {};
public selectedArray = new ObservableSet<Doc>();
+ public slideToModify: Doc | null = null;
_batch: UndoManager.Batch | undefined = undefined; // undo batch for dragging sliders which generate multiple scene edit events as the cursor moves
_keyTimer: NodeJS.Timeout | undefined; // timer for turning off transition flag when key frame change has completed. Need to clear this if you do a second navigation before first finishes, or else first timer can go off during second naviation.
_unmounting = false; // flag that view is unmounting used to block RemFromMap from deleting things
@@ -97,14 +100,16 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
@observable _presKeyEvents: boolean = false;
@observable _forceKeyEvents: boolean = false;
+ @observable _showAIGallery = false;
+ @observable _showPreview = true;
+ @observable _easeDropdownVal = 'ease';
+
// GPT
- private _inputref: HTMLTextAreaElement | null = null;
- private _inputref2: HTMLTextAreaElement | null = null;
- @observable chatActive: boolean = false;
- @observable chatInput: string = '';
- public slideToModify: Doc | null = null;
- @observable isRecording: boolean = false;
- @observable isLoading: boolean = false;
+ @observable _chatActive: boolean = false;
+ @observable _animationChat: string = '';
+ @observable _chatInput: string = '';
+ @observable _isRecording: boolean = false;
+ @observable _isLoading: boolean = false;
@observable generatedAnimations: AnimationSettings[] = [
// default presets
@@ -138,54 +143,23 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
},
];
- @action
- setGeneratedAnimations = (settings: AnimationSettings[]) => {
- this.generatedAnimations = settings;
- };
-
- @observable animationChat: string = '';
-
- @action
- setChatInput = (input: string) => {
- this.chatInput = input;
- };
-
- @action
- setAnimationChat = (input: string) => {
- this.animationChat = input;
- };
-
- @action
- setIsLoading = (isLoading: boolean) => {
- this.isLoading = isLoading;
- };
-
- @action
- public setIsRecording = (isRecording: boolean) => {
- this.isRecording = isRecording;
- };
-
- @observable showBezierEditor = false;
- @action setBezierEditorVisibility = (visible: boolean) => {
- this.showBezierEditor = visible;
- };
- @observable showSpringEditor = true;
- @action setSpringEditorVisibility = (visible: boolean) => {
- this.showSpringEditor = visible;
- };
-
- // Easing function variables
-
- @observable easeDropdownVal = 'ease';
-
- @action setBezierControlPoints = (newPoints: { p1: number[]; p2: number[] }) => {
+ setGeneratedAnimations = action((input: AnimationSettings[]) => { this.generatedAnimations = input; }) // prettier-ignore
+ setChatInput = action((input: string) => { this._chatInput = input; }); // prettier-ignore
+ setAnimationChat = action((input: string) => { this._animationChat = input; }); // prettier-ignore
+ setIsLoading = action((input?: boolean) => { this._isLoading = !!input; }); // prettier-ignore
+ setIsRecording = action((input: boolean) => { this._isRecording = input; }); // prettier-ignore
+ setShowAIGalleryVisibilty = action((visible: boolean) => { this._showAIGallery = visible; }); // prettier-ignore
+ setBezierControlPoints = action((newPoints: { p1: number[]; p2: number[] }) => {
this.setEaseFunc(this.activeItem, `cubic-bezier(${newPoints.p1[0]}, ${newPoints.p1[1]}, ${newPoints.p2[0]}, ${newPoints.p2[1]})`);
- };
+ });
+
+ @computed get showEaseFunctions() {
+ return ![PresMovement.None, PresMovement.Jump, ''].includes(StrCast(this.activeItem?.presentation_movement) as PresMovement);
+ }
@computed
get currCPoints() {
- const strPoints = this.activeItem.presentation_easeFunc ? StrCast(this.activeItem.presentation_easeFunc) : 'ease';
- return EaseFuncToPoints(strPoints);
+ return EaseFuncToPoints(this.activeItem.presentation_easeFunc ? StrCast(this.activeItem.presentation_easeFunc) : 'ease');
}
@computed
@@ -221,25 +195,11 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
if ([DocumentType.PDF, DocumentType.WEB, DocumentType.RTF].includes(this.targetDoc.type as DocumentType) || this.targetDoc._type_collection === CollectionViewType.Stacking) return true;
return false;
}
- @computed get panable() {
- if ((this.targetDoc.type === DocumentType.COL && this.targetDoc._type_collection === CollectionViewType.Freeform) || this.targetDoc.type === DocumentType.IMG) return true;
- return false;
- }
@computed get selectedDocumentView() {
if (DocumentView.Selected().length) return DocumentView.Selected()[0];
if (this.selectedArray.size) return DocumentView.getDocumentView(this.Document);
return undefined;
}
- @computed get isPres() {
- return this.selectedDoc === this.Document;
- }
- @computed get selectedDoc() {
- return this.selectedDocumentView?.Document;
- }
- isActiveItemTarget = (layoutDoc: Doc) => this.activeItem?.presentation_targetDoc === layoutDoc;
- clearSelectedArray = () => this.selectedArray.clear();
- addToSelectedArray = action((doc: Doc) => this.selectedArray.add(doc));
- removeFromSelectedArray = action((doc: Doc) => this.selectedArray.delete(doc));
componentWillUnmount() {
this._unmounting = true;
@@ -256,7 +216,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
() => this.pauseAutoPres()
);
this._disposers.keyboard = reaction(
- () => this.selectedDoc,
+ () => this.selectedDocumentView?.Document,
selected => {
document.removeEventListener('keydown', PresBox.keyEventsWrapper, true);
(this._presKeyEvents = selected === this.Document) && document.addEventListener('keydown', PresBox.keyEventsWrapper, true);
@@ -293,13 +253,16 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
);
}
+ clearSelectedArray = () => this.selectedArray.clear();
+ addToSelectedArray = action((doc: Doc) => this.selectedArray.add(doc));
+ removeFromSelectedArray = action((doc: Doc) => this.selectedArray.delete(doc));
+
@action
updateCurrentPresentation = (pres?: Doc) => {
Doc.ActivePresentation = pres ?? this.Document;
PresBox.Instance = this;
};
- _mediaTimer!: [NodeJS.Timeout, Doc];
// 'Play on next' for audio or video therefore first navigate to the audio/video before it should be played
startTempMedia = (targetDoc: Doc, activeItem: Doc) => {
const duration: number = NumCast(activeItem.config_clipEnd) - NumCast(activeItem.config_clipStart);
@@ -318,7 +281,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
};
// Recording for GPT customization
-
recordDictation = () => {
this.setIsRecording(true);
this.setChatInput('');
@@ -336,64 +298,34 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
DictationManager.Controls.stop();
};
- setDictationContent = (value: string) => {
- console.log('Dictation value', value);
- this.setChatInput(value);
- };
+ setDictationContent = (value: string) => this.setChatInput(value);
- @action
- customizeAnimations = async () => {
+ customizeAnimations = action(() => {
this.setIsLoading(true);
- try {
- const res = await getSlideTransitionSuggestions(this.animationChat);
- if (typeof res === 'string') {
- const resObj = JSON.parse(res);
- console.log('Parsed GPT Result ', resObj);
- this.setGeneratedAnimations(resObj as AnimationSettings[]);
- }
- } catch (err) {
- console.error(err);
- }
- this.setIsLoading(false);
- };
+ getSlideTransitionSuggestions(this._animationChat)
+ .then(res => this.setGeneratedAnimations(JSON.parse(res) as AnimationSettings[]))
+ .catch(err => console.error(err))
+ .finally(this.setIsLoading);
+ });
- @action
- customizeWithGPT = async (input: string) => {
+ customizeWithGPT = action((input: string) => {
// const testInput = 'change title to Customized Slide, transition for 2.3s with fade in effect';
this.setIsRecording(false);
this.setIsLoading(true);
-
- const currSlideProperties: { [key: string]: FieldResult } = {};
- gptSlideProperties.forEach(key => {
- if (this.activeItem[key]) {
- currSlideProperties[key] = this.activeItem[key];
- }
- // default values
- else if (key === 'presentation_transition') {
- currSlideProperties[key] = 500;
- } else if (key === 'config_zoom') {
- currSlideProperties[key] = 1.0;
- }
- });
- console.log('current slide props ', currSlideProperties);
-
- try {
- const res = await gptTrailSlideCustomization(input, currSlideProperties);
- if (typeof res === 'string') {
- const resObj = JSON.parse(res);
- console.log('Parsed GPT Result ', resObj);
- for (const key in resObj) {
- if (resObj[key]) {
- console.log('typeof property', typeof resObj[key]);
- this.activeItem[key] = resObj[key];
- }
- }
- }
- } catch (err) {
- console.error(err);
- }
- this.setIsLoading(false);
- };
+ const slideDefaults: { [key: string]: FieldResult } = { presentation_transition: 500, config_zoom: 1 };
+ const currSlideProperties = gptSlideProperties.reduce(
+ (prev, key) => { prev[key] = Field.toString(this.activeItem[key]) ?? prev[key]; return prev; },
+ slideDefaults); // prettier-ignore
+
+ gptTrailSlideCustomization(input, JSON.stringify(currSlideProperties))
+ .then(res =>
+ (Object.entries(JSON.parse(res)) as string[][]).forEach(([key, val]) => {
+ this.activeItem[key] = (+val).toString() === val ? +val : (val ?? this.activeItem[key]);
+ })
+ )
+ .catch(e => console.error(e))
+ .finally(this.setIsLoading);
+ });
// TODO: al: it seems currently that tempMedia doesn't stop onslidechange after clicking the button; the time the tempmedia stop depends on the start & end time
// TODO: to handle child slides (entering into subtrail and exiting), also the next() and back() functions
@@ -452,27 +384,25 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
const progressiveReveal = (first: boolean) => {
const presIndexed = Cast(this.activeItem?.presentation_indexed, 'number', null);
if (presIndexed !== undefined) {
- const targetRenderedDoc = PresBox.targetRenderedDoc(this.activeItem);
- targetRenderedDoc._dataTransition = 'all 1s';
- targetRenderedDoc.opacity = 1;
- setTimeout(() => {
- targetRenderedDoc._dataTransition = 'inherit';
- }, 1000);
const listItems = this.progressivizedItems(this.activeItem);
- if (listItems && presIndexed < listItems.length) {
+ const listItemDoc = listItems?.[presIndexed];
+ if (listItems && listItemDoc) {
if (!first) {
- const listItemDoc = listItems[presIndexed];
- const targetView = listItems && DocumentView.getFirstDocumentView(listItemDoc);
+ const presBulletTiming = 500; // bcz: hardwired for now
Doc.linkFollowUnhighlight();
- Doc.HighlightDoc(listItemDoc);
+ Doc.linkFollowHighlight(listItemDoc);
listItemDoc.presentation_effect = this.activeItem.presBulletEffect;
- listItemDoc.presentation_transition = 500;
- targetView?.setAnimEffect(listItemDoc, 500);
- if (targetView && this.activeItem.presBulletExpand) {
- targetView.setAnimateScaling(1.2, 400);
- Doc.AddUnHighlightWatcher(() => targetView?.setAnimateScaling(0, undefined));
- }
+ listItemDoc.presentation_transition = presBulletTiming;
listItemDoc.opacity = undefined;
+
+ const targetView = DocumentView.getFirstDocumentView(listItemDoc);
+ if (targetView) {
+ targetView.setAnimEffect(listItemDoc, presBulletTiming);
+ if (this.activeItem.presBulletExpand) {
+ targetView.setAnimateScaling(1.2, presBulletTiming * 0.8);
+ Doc.AddUnHighlightWatcher(() => targetView.setAnimateScaling(0, undefined));
+ }
+ }
this.activeItem.presentation_indexed = presIndexed + 1;
}
return true;
@@ -547,8 +477,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
if (!group) this.clearSelectedArray();
this.childDocs[index] && this.addToSelectedArray(this.childDocs[index]); // Update selected array
this.turnOffEdit();
- this.navigateToActiveItem(finished); // Handles movement to element only when presentationTrail is list
- this.doHideBeforeAfter(); // Handles hide after/before
+ this.navigateToActiveItem((options: FocusViewOptions) => {
+ setTimeout(this.doHideBeforeAfter, FocusEffectDelay(options)); // Handles hide after/before
+ finished?.();
+ }); // Handles movement to element only when presentationTrail is list
}
});
static pinDataTypes(target?: Doc): dataTypes {
@@ -784,11 +716,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
});
setTimeout(
() =>
- Array.from(transitioned).forEach(
- action(doc => {
- doc._dataTransition = undefined;
- })
- ),
+ Array.from(transitioned).forEach(doc => {
+ doc._dataTransition = undefined;
+ }),
transTime + 10
);
}
@@ -826,16 +756,16 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
* a new tab. If presCollection is undefined it will open the document
* on the right.
*/
- navigateToActiveItem = (afterNav?: () => void) => {
+ navigateToActiveItem = (afterNav?: (options: FocusViewOptions) => void) => {
const { activeItem, targetDoc } = this;
- const finished = () => {
- afterNav?.();
+ const finished = (options: FocusViewOptions) => {
+ afterNav?.(options);
targetDoc[Animation] = undefined;
};
const selViewCache = Array.from(this.selectedArray);
const dragViewCache = Array.from(this._dragArray);
const eleViewCache = Array.from(this._eleArray);
- const resetSelection = action(() => {
+ const resetSelection = action((options: FocusViewOptions) => {
if (!this._props.isSelected()) {
const presDocView = DocumentView.getDocumentView(this.Document);
if (presDocView) DocumentView.SelectView(presDocView, false);
@@ -844,14 +774,12 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
this._dragArray.splice(0, this._dragArray.length, ...dragViewCache);
this._eleArray.splice(0, this._eleArray.length, ...eleViewCache);
}
- finished();
+ finished(options);
});
PresBox.NavigateToTarget(targetDoc, activeItem, resetSelection);
};
- public static PanelName = 'PRESBOX';
-
- static NavigateToTarget(targetDoc: Doc, activeItem: Doc, finished?: () => void) {
+ static NavigateToTarget(targetDoc: Doc, activeItem: Doc, finished?: (options: FocusViewOptions) => void) {
if (activeItem.presentation_movement === PresMovement.None && targetDoc.type === DocumentType.SCRIPTING) {
(DocumentView.getFirstDocumentView(targetDoc)?.ComponentView as ScriptingBox)?.onRun?.();
return;
@@ -886,9 +814,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
if (!DocumentView.getLightboxDocumentView(DocCast(targetDoc.annotationOn) ?? targetDoc)) {
DocumentView.SetLightboxDoc(undefined);
}
- DocumentView.showDocument(targetDoc, options, finished);
+ DocumentView.showDocument(targetDoc, options, () => finished?.(options));
});
- } else finished?.();
+ } else finished?.(options);
}
/**
@@ -900,8 +828,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
this.childDocs.forEach((doc, index) => {
const curDoc = Cast(doc, Doc, null);
const tagDoc = PresBox.targetRenderedDoc(curDoc);
- const itemIndexes: number[] = this.getAllIndexes(this.tagDocs, curDoc);
- let opacity: Opt<number> = index === this.itemIndex ? 1 : undefined;
+ const itemIndexes = this.getAllIndexes(this.tagDocs, curDoc);
+ let opacity = index === this.itemIndex ? 1 : undefined;
if (curDoc.presentation_hide) {
if (index !== this.itemIndex) {
opacity = 1;
@@ -913,9 +841,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
opacity = 0;
} else if (index === this.itemIndex || !curDoc.presentation_hideAfter) {
opacity = 1;
- setTimeout(() => {
- tagDoc._dataTransition = undefined;
- }, 1000);
}
}
const hidingIndAft =
@@ -1687,20 +1612,22 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
</Tooltip>
</div>
{[DocumentType.AUDIO, DocumentType.VID].includes(targetType as DocumentType) ? null : (
- <>
- <div className="ribbon-doubleButton">
- <div className="presBox-subheading">Slide Duration</div>
- <div className="ribbon-property" style={{ border: `solid 1px ${SnappingManager.userColor}` }}>
- <input className="presBox-input" type="number" readOnly value={duration} onKeyDown={e => e.stopPropagation()} onChange={e => this.updateDurationTime(e.target.value)} /> s
+ <div className="ribbon-doubleButton">
+ <Tooltip title={<div>How long to view the slide before transitioning to the next slide</div>}>
+ <div className="presBox-subheading">DURATION</div>
+ </Tooltip>
+ <div className="presBox-subheading-slider">
+ {PresBox.inputter('0.1', '0.1', '10', duration, targetType !== DocumentType.AUDIO, this.updateDurationTime)}
+ <div className="slider-headers">
+ <div className="slider-text">Short</div>
+ <div className="slider-text">Long</div>
</div>
</div>
- {PresBox.inputter('0.1', '0.1', '20', duration, targetType !== DocumentType.AUDIO, this.updateDurationTime)}
- <div className="slider-headers" style={{ display: targetType === DocumentType.AUDIO ? 'none' : 'grid' }}>
- <div className="slider-text">Short</div>
- <div className="slider-text">Medium</div>
- <div className="slider-text">Long</div>
+ <div className="ribbon-property" style={{ border: `solid 1px ${SnappingManager.userColor}`, display: 'flex', maxWidth: 60, width: '100%' }}>
+ <input className="presBox-inputNumber" type="number" readOnly value={duration} onKeyDown={e => e.stopPropagation()} onChange={action(e => this.updateDurationTime(e.target.value))} />
+ <span>s</span>
</div>
- </>
+ </div>
)}
</div>
</div>
@@ -1708,28 +1635,62 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
}
return undefined;
}
- @computed get progressivizeDropdown() {
+
+ @computed get mediaDropdown() {
const { activeItem } = this;
if (activeItem && this.targetDoc) {
- const effect = activeItem.presBulletEffect ? activeItem.presBulletEffect : PresMovement.None;
- const bulletEffect = (presEffect: PresEffect) => (
- <div
- className={`presBox-dropdownOption ${activeItem.presentation_effect === presEffect || (presEffect === PresEffect.None && !activeItem.presentation_effect) ? 'active' : ''}`}
- onPointerDown={StopEvent}
- onClick={() => this.updateEffect(presEffect, true)}>
- {presEffect}
+ return (
+ <div className="presBox-option-block">
+ <div className="presBox-ribbon presbox-toggles">
+ <Tooltip title={<div className="dash-tooltip">Should first bullet be progressively disclosed or does it appear with slide.</div>}>
+ <div
+ className={`ribbon-toggle ${BoolCast(activeItem.presentation_playAudio) ? 'active' : ''}`}
+ style={{
+ border: `solid 1px ${SnappingManager.userColor}`,
+ color: SnappingManager.userColor,
+ background: BoolCast(activeItem.presentation_playAudio) ? SnappingManager.userVariantColor : SnappingManager.userBackgroundColor,
+ }}
+ onClick={() => {
+ activeItem.presentation_playAudio = !BoolCast(activeItem.presentation_playAudio);
+ }}>
+ Play Audio Annotation
+ </div>
+ </Tooltip>
+ <Tooltip title={<div className="dash-tooltip">Should first bullet be progressively disclosed or does it appear with slide.</div>}>
+ <div
+ className={`ribbon-toggle ${BoolCast(activeItem.presentation_zoomText) ? 'active' : ''}`}
+ style={{
+ border: `solid 1px ${SnappingManager.userColor}`,
+ color: SnappingManager.userColor,
+ background: BoolCast(activeItem.presentation_zoomText) ? SnappingManager.userVariantColor : SnappingManager.userBackgroundColor,
+ }}
+ onClick={() => {
+ activeItem.presentation_zoomText = !BoolCast(activeItem.presentation_zoomText);
+ }}>
+ Zoom Text Selections
+ </div>
+ </Tooltip>
+ </div>
</div>
);
+ }
+ return null;
+ }
+ @computed get progressivizeDropdown() {
+ const { activeItem } = this;
+ if (activeItem && this.targetDoc) {
return (
<div className="presBox-option-block">
- <div className="presBox-ribbon">
- <div className="ribbon-doubleButton" style={{ display: 'inline-flex' }}>
- <div className="presBox-subheading">Progressivize Collection</div>
- <input
- className="presBox-checkbox"
- style={{ margin: 10, border: `solid 1px ${SnappingManager.userColor}` }}
- type="checkbox"
- onChange={() => {
+ <div className="presBox-toggles presBox-ribbon">
+ <Tooltip title={<div className="dash-tooltip">whether progressivization is active for this slide</div>}>
+ <div
+ className={`ribbon-toggle ${Cast(activeItem.presentation_indexed, 'number', null) !== undefined ? 'active' : ''}`}
+ style={{
+ border: `solid 1px ${SnappingManager.userColor}`,
+ color: SnappingManager.userColor,
+ background: Cast(activeItem.presentation_indexed, 'number', null) !== undefined ? SnappingManager.userVariantColor : SnappingManager.userBackgroundColor,
+ }}
+ onClick={() => {
activeItem.presentation_indexed = activeItem.presentation_indexed === undefined ? 0 : undefined;
activeItem.presentation_hideBefore = activeItem.presentation_indexed !== undefined;
const tagDoc = PresBox.targetRenderedDoc(this.activeItem);
@@ -1742,62 +1703,51 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
if (DocCast(activeItem.presentation_targetDoc).annotationOn) activeItem.data = ComputedField.MakeFunction(`this.presentation_targetDoc.annotationOn?.["${dataField}"]`);
else activeItem.data = ComputedField.MakeFunction(`this.presentation_targetDoc?.["${dataField}"]`);
+ }}>
+ Enable
+ </div>
+ </Tooltip>
+ <Tooltip title={<div className="dash-tooltip">Should first bullet be progressively disclosed or does it appear with slide.</div>}>
+ <div
+ className={`ribbon-toggle ${!NumCast(activeItem.presentation_indexedStart) ? 'active' : ''}`}
+ style={{
+ border: `solid 1px ${SnappingManager.userColor}`,
+ color: SnappingManager.userColor,
+ background: !NumCast(activeItem.presentation_indexedStart) ? SnappingManager.userVariantColor : SnappingManager.userBackgroundColor,
}}
- checked={Cast(activeItem.presentation_indexed, 'number', null) !== undefined}
- />
- </div>
- <div className="ribbon-doubleButton" style={{ display: 'inline-flex' }}>
- <div className="presBox-subheading">Progressivize First Bullet</div>
- <input
- className="presBox-checkbox"
- style={{ margin: 10, border: `solid 1px ${SnappingManager.userColor}` }}
- type="checkbox"
- onChange={() => {
+ onClick={() => {
activeItem.presentation_indexedStart = activeItem.presentation_indexedStart ? 0 : 1;
- }}
- checked={!NumCast(activeItem.presentation_indexedStart)}
- />
- </div>
- <div className="ribbon-doubleButton" style={{ display: 'inline-flex' }}>
- <div className="presBox-subheading">Expand Current Bullet</div>
- <input
- className="presBox-checkbox"
- style={{ margin: 10, border: `solid 1px ${SnappingManager.userColor}` }}
- type="checkbox"
- onChange={() => {
- activeItem.presBulletExpand = !activeItem.presBulletExpand;
- }}
- checked={BoolCast(activeItem.presBulletExpand)}
- />
- </div>
-
- <div className="ribbon-box">
- Bullet Effect
+ }}>
+ All Bullets
+ </div>
+ </Tooltip>
+ <Tooltip title={<div className="dash-tooltip">Whether the active bullet expands when active.</div>}>
<div
- className="presBox-dropdown"
- onClick={action(e => {
- e.stopPropagation();
- this._openBulletEffectDropdown = !this._openBulletEffectDropdown;
- })}
+ className={`ribbon-toggle ${BoolCast(activeItem.presBulletExpand) ? 'active' : ''}`}
style={{
+ border: `solid 1px ${SnappingManager.userColor}`,
color: SnappingManager.userColor,
- background: SnappingManager.userVariantColor,
- borderBottomLeftRadius: this._openBulletEffectDropdown ? 0 : 5,
- border: this._openBulletEffectDropdown ? `solid 2px ${SnappingManager.userVariantColor}` : `solid 1px ${SnappingManager.userColor}`,
+ background: BoolCast(activeItem.presBulletExpand) ? SnappingManager.userVariantColor : SnappingManager.userBackgroundColor,
+ }}
+ onClick={() => {
+ activeItem.presBulletExpand = !activeItem.presBulletExpand;
}}>
- {effect?.toString()}
- <FontAwesomeIcon className="presBox-dropdownIcon" style={{ gridColumn: 2, color: this._openBulletEffectDropdown ? Colors.MEDIUM_BLUE : 'black' }} icon="angle-down" />
- <div
- className="presBox-dropdownOptions"
- style={{ display: this._openBulletEffectDropdown ? 'grid' : 'none', color: SnappingManager.userColor, background: SnappingManager.userBackgroundColor }}
- onPointerDown={e => e.stopPropagation()}>
- {Object.values(PresEffect)
- .filter(v => isNaN(Number(v)))
- .map(pEffect => bulletEffect(pEffect))}
- </div>
+ Expand Active
</div>
- </div>
+ </Tooltip>
</div>
+ <Dropdown
+ color={SnappingManager.userColor}
+ formLabel="Effect"
+ toolTip="Animation effect to use when bullet activates"
+ formLabelPlacement="left"
+ closeOnSelect
+ items={Object.values(PresEffect).map(v => ({ text: v.toString(), val: v }))}
+ selectedVal={StrCast(activeItem.presBulletEffect, PresMovement.None)}
+ setSelectedVal={val => this.updateEffect(val as PresEffect, true)}
+ dropdownType={DropdownType.SELECT}
+ type={Type.TERT}
+ />
</div>
);
}
@@ -1808,23 +1758,89 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
return <div />;
}
+ /**
+ * This chatbox is for getting slide effect transition suggestions from gpt and visualizing them
+ */
+ @computed get aiEffects() {
+ return (
+ <div className="presBox-gpt-chat" style={{ display: SnappingManager.PropertiesWidth < 1 || !this._showAIGallery ? 'none' : undefined }}>
+ {/* Custom */}
+ <div className="pres-chat">
+ <div className="pres-chatbox-container-ai">
+ <ReactTextareaAutosize
+ placeholder="Use AI to suggest effects. Leave blank for random results."
+ className="pres-chatbox"
+ ref={r => {
+ setTimeout(() => {
+ if (r && !r.textContent) {
+ r.style.height = '';
+ r.style.height = r.scrollHeight + 'px';
+ }
+ });
+ }}
+ value={this._animationChat}
+ onChange={e => {
+ e.currentTarget.style.height = '';
+ e.currentTarget.style.height = e.currentTarget.scrollHeight + 'px';
+ this.setAnimationChat(e.target.value);
+ }}
+ onKeyDown={e => {
+ this.stopDictation();
+ e.stopPropagation();
+ }}
+ />
+ </div>
+ <Button
+ style={{ alignSelf: 'flex-end' }}
+ text="Send"
+ type={Type.TERT}
+ icon={this._isLoading ? <ReactLoading type="spin" color="#ffffff" width={20} height={20} /> : <AiOutlineSend />}
+ iconPlacement="right"
+ color={SnappingManager.userVariantColor}
+ onClick={this.customizeAnimations}
+ />
+ </div>
+ <div style={{ alignItems: 'center' }}>
+ Click a box to use the effect.
+ {/* Preview Animations */}
+ <div className="presBox-effects">
+ {this.generatedAnimations.map((elem, i) => (
+ <div
+ key={i}
+ className="presBox-effect-container"
+ onClick={() => {
+ this.updateEffect(elem.effect, false);
+ this.updateEffectDirection(elem.direction);
+ this.updateEffectTiming(this.activeItem, {
+ type: SpringType.CUSTOM,
+ stiffness: elem.stiffness,
+ damping: elem.damping,
+ mass: elem.mass,
+ });
+ }}>
+ <SlideEffect dir={elem.direction} presEffect={elem.effect} springSettings={elem} infinite>
+ <div className="presBox-effect-demo-box" style={{ backgroundColor: springPreviewColors[i] }} />
+ </SlideEffect>
+ </div>
+ ))}
+ </div>
+ </div>
+ </div>
+ );
+ }
+
@computed get transitionDropdown() {
const { activeItem } = this;
// Retrieving spring timing properties
- const timing = StrCast(activeItem.presentation_effectTiming);
- let timingConfig: SpringSettings | undefined;
- if (timing) {
- timingConfig = JSON.parse(timing);
- }
-
- if (!timingConfig) {
- timingConfig = {
- type: SpringType.GENTLE,
- stiffness: 100,
- damping: 15,
- mass: 1,
- };
- }
+ const timing = StrCast(activeItem?.presentation_effectTiming);
+ const timingConfig: SpringSettings = timing
+ ? JSON.parse(timing)
+ : {
+ type: SpringType.GENTLE,
+ stiffness: 100,
+ damping: 15,
+ mass: 1,
+ };
if (activeItem && this.targetDoc) {
const transitionSpeed = activeItem.presentation_transition ? NumCast(activeItem.presentation_transition) / 1000 : 0.5;
@@ -1835,20 +1851,30 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
return (
<>
{/* This chatbox is for customizing the properties of trails, like transition time, movement type (zoom, pan) using GPT */}
- <div className="presBox-gpt-chat">
- <span style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+ <div className="presBox-gpt-chat" style={{ display: SnappingManager.PropertiesWidth < 1 ? 'none' : undefined }}>
+ <span className="presBox-gpt-chat-span">
Customize Slide Properties{' '}
<div className="propertiesView-info" onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation/features/trails/#slide-customization')}>
<IconButton icon={<FontAwesomeIcon icon="info-circle" />} color={SnappingManager.userColor} />
</div>
</span>
<div className="pres-chat">
- <div className="pres-chatbox-container">
+ <div className="pres-chatbox-container-ai">
<ReactTextareaAutosize
- placeholder="Describe how you would like to modify the slide properties."
+ placeholder="Describe how to modify the slide properties."
className="pres-chatbox"
- value={this.chatInput}
+ ref={r => {
+ setTimeout(() => {
+ if (r && !r.textContent) {
+ r.style.height = '';
+ r.style.height = r.scrollHeight + 'px';
+ }
+ });
+ }}
+ value={this._chatInput}
onChange={e => {
+ e.currentTarget.style.height = '';
+ e.currentTarget.style.height = e.currentTarget.scrollHeight + 'px';
this.setChatInput(e.target.value);
}}
onKeyDown={e => {
@@ -1858,11 +1884,11 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
/>
<IconButton
type={Type.TERT}
- color={this.isRecording ? '#2bcaff' : SnappingManager.userVariantColor}
+ color={this._isRecording ? '#2bcaff' : SnappingManager.userVariantColor}
tooltip="Record"
icon={<BiMicrophone size="16px" />}
onClick={() => {
- if (!this.isRecording) {
+ if (!this._isRecording) {
this.recordDictation();
} else {
this.stopDictation();
@@ -1874,16 +1900,17 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
style={{ alignSelf: 'flex-end' }}
text="Send"
type={Type.TERT}
- icon={this.isLoading ? <ReactLoading type="spin" color="#ffffff" width={20} height={20} /> : <AiOutlineSend />}
+ icon={this._isLoading ? <ReactLoading type="spin" color="#ffffff" width={20} height={20} /> : <AiOutlineSend />}
iconPlacement="right"
color={SnappingManager.userVariantColor}
onClick={() => {
this.stopDictation();
- this.customizeWithGPT(this.chatInput);
+ this.customizeWithGPT(this._chatInput);
}}
/>
</div>
</div>
+
{/* Movement */}
<div
className={`presBox-ribbon ${this._transitionTools && this.layoutDoc.presentation_status === PresStatus.Edit ? 'active' : ''}`}
@@ -1895,116 +1922,68 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
this._openEffectDropdown = false;
this._openBulletEffectDropdown = false;
})}>
- <div
- className="presBox-option-block"
- // style={{ padding: '16px' }}
- >
- Movement
+ <div className="presBox-option-block">
+ <div className="ribbon-doubleButton">
+ <Tooltip title={<div>How long the transition (view navigation and slide animation effect) lasts</div>}>
+ <div className="presBox-subheading">SPEED</div>
+ </Tooltip>
+ <div className="presBox-subheading-slider">
+ {PresBox.inputter('0.1', '0.1', '10', transitionSpeed, true, this.updateTransitionTime)}
+ <div className="slider-headers">
+ <div className="slider-text">Fast</div>
+ <div className="slider-text">Slow</div>
+ </div>
+ </div>
+ <div className="ribbon-property" style={{ border: `solid 1px ${SnappingManager.userColor}`, display: 'flex', maxWidth: 60, width: '100%' }}>
+ <input className="presBox-inputNumber" type="number" readOnly value={transitionSpeed} onKeyDown={e => e.stopPropagation()} onChange={action(e => this.updateTransitionTime(e.target.value))} />
+ <span>s</span>
+ </div>
+ </div>
<Dropdown
color={SnappingManager.userColor}
- formLabel="Movement"
+ formLabel="View"
+ formLabelPlacement="left"
closeOnSelect
items={movementItems}
selectedVal={this.movementName(activeItem)}
- setSelectedVal={val => {
- this.updateMovement(val as PresMovement);
- }}
+ setSelectedVal={val => this.updateMovement(val as PresMovement)}
dropdownType={DropdownType.SELECT}
type={Type.TERT}
/>
- <div className="ribbon-doubleButton" style={{ display: activeItem.presentation_movement === PresMovement.Zoom ? 'inline-flex' : 'none' }}>
- <div className="presBox-subheading">Zoom (% screen filled)</div>
- <div className="ribbon-property" style={{ border: `solid 1px ${SnappingManager.userColor}` }}>
- <input className="presBox-input" readOnly type="number" value={zoom} onChange={e => this.updateZoom(e.target.value)} />%
- </div>
- </div>
- {PresBox.inputter('0', '1', '100', zoom, activeItem.presentation_movement === PresMovement.Zoom, this.updateZoom)}
- <div className="ribbon-doubleButton" style={{ display: 'inline-flex' }}>
- <div className="presBox-subheading">Transition Time</div>
- <div className="ribbon-property" style={{ border: `solid 1px ${SnappingManager.userColor}` }}>
- <input className="presBox-input" type="number" readOnly value={transitionSpeed} onKeyDown={e => e.stopPropagation()} onChange={action(e => this.updateTransitionTime(e.target.value))} /> s
+ <div className="ribbon-doubleButton" style={{ display: activeItem.presentation_movement === PresMovement.Zoom ? undefined : 'none' }}>
+ <Tooltip title={<div>How much (%) of screen target should occupy</div>}>
+ <div className="presBox-subheading">ZOOM %</div>
+ </Tooltip>
+ <div className="presBox-subheading-slider">{PresBox.inputter('0', '1', '100', zoom, activeItem.presentation_movement === PresMovement.Zoom, this.updateZoom)}</div>
+ <div className="ribbon-property" style={{ border: `solid 1px ${SnappingManager.userColor}`, display: 'flex', maxWidth: 60, width: '100%' }}>
+ <input className="presBox-inputNumber" readOnly type="number" value={zoom} onChange={e => this.updateZoom(e.target.value)} />
+ <span>%</span>
</div>
</div>
- {PresBox.inputter('0.1', '0.1', '10', transitionSpeed, true, this.updateTransitionTime)}
- <div className="slider-headers">
- <div className="slider-text">Fast</div>
- <div className="slider-text">Medium</div>
- <div className="slider-text">Slow</div>
- </div>
{/* Easing function */}
- <Dropdown
- color={SnappingManager.userColor}
- formLabel="Easing Function"
- closeOnSelect
- items={easeItems}
- selectedVal={this.activeItem.presentation_easeFunc ? (StrCast(this.activeItem.presentation_easeFunc).startsWith('cubic') ? 'custom' : StrCast(this.activeItem.presentation_easeFunc)) : 'ease'}
- setSelectedVal={val => {
- if (typeof val === 'string') {
- if (val !== 'custom') {
- this.setEaseFunc(this.activeItem, val);
- } else {
- this.setBezierEditorVisibility(true);
- this.setEaseFunc(this.activeItem, TIMING_DEFAULT_MAPPINGS.ease);
- }
- }
- }}
- dropdownType={DropdownType.SELECT}
- type={Type.TERT}
- />
- {/* Custom */}
- <div
- className="presBox-show-hide-dropdown"
- style={{ alignSelf: 'flex-start' }}
- onClick={e => {
- e.stopPropagation();
- this.setBezierEditorVisibility(!this.showBezierEditor);
- }}>
- {`${this.showBezierEditor ? 'Hide' : 'Show'} Timing Editor`}
- <FontAwesomeIcon icon={this.showBezierEditor ? 'chevron-up' : 'chevron-down'} />
- </div>
+ {!this.showEaseFunctions ? null : (
+ <Dropdown
+ color={SnappingManager.userColor}
+ formLabel="Timing"
+ formLabelPlacement="left"
+ closeOnSelect
+ items={easeItems}
+ selectedVal={this.activeItem.presentation_easeFunc ? (StrCast(this.activeItem.presentation_easeFunc).startsWith('cubic') ? 'custom' : StrCast(this.activeItem.presentation_easeFunc)) : 'ease'}
+ setSelectedVal={val => typeof val === 'string' && this.setEaseFunc(this.activeItem, val !== 'custom' ? val : TIMING_DEFAULT_MAPPINGS.ease)}
+ dropdownType={DropdownType.SELECT}
+ type={Type.TERT}
+ />
+ )}
</div>
</div>
{/* Cubic bezier editor */}
- {this.showBezierEditor && (
- <div className="presBox-option-block" style={{ paddingTop: 0 }}>
- <p className="presBox-submenu-label" style={{ alignSelf: 'flex-start' }}>
- Custom Timing Function
- </p>
+ {this.showEaseFunctions && StrCast(activeItem.presentation_easeFunc).includes('cubic-bezier') && (
+ <div className="presBox-option-block" style={{ paddingTop: 0, alignItems: 'center' }}>
<CubicBezierEditor setFunc={this.setBezierControlPoints} currPoints={this.currCPoints} />
</div>
)}
- {/* This chatbox is for getting slide effect transition suggestions from gpt and visualizing them */}
- <div className="presBox-gpt-chat">
- Effects
- <div className="pres-chat">
- <div className="pres-chatbox-container">
- <ReactTextareaAutosize
- placeholder="Customize prompt for effect suggestions. Leave blank for random results."
- className="pres-chatbox"
- value={this.animationChat}
- onChange={e => {
- this.setAnimationChat(e.target.value);
- }}
- onKeyDown={e => {
- this.stopDictation();
- e.stopPropagation();
- }}
- />
- </div>
- <Button
- style={{ alignSelf: 'flex-end' }}
- text="Send"
- type={Type.TERT}
- icon={this.isLoading ? <ReactLoading type="spin" color="#ffffff" width={20} height={20} /> : <AiOutlineSend />}
- iconPlacement="right"
- color={SnappingManager.userVariantColor}
- onClick={this.customizeAnimations}
- />
- </div>
- </div>
-
<div
className={`presBox-ribbon ${this._transitionTools && this.layoutDoc.presentation_status === PresStatus.Edit ? 'active' : ''}`}
onPointerDown={StopEvent}
@@ -2016,213 +1995,168 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
this._openBulletEffectDropdown = false;
})}>
<div className="presBox-option-block">
- Click on a box to apply the effect.
- <div className="presBox-option-block presBox-option-center">
- {/* Preview Animations */}
- <div className="presBox-effects">
- {this.generatedAnimations.map((elem, i) => (
- <div
- key={i}
- className="presBox-effect-container"
- onClick={() => {
- this.updateEffect(elem.effect, false);
- this.updateEffectDirection(elem.direction);
- this.updateEffectTiming(this.activeItem, {
- type: SpringType.CUSTOM,
- stiffness: elem.stiffness,
- damping: elem.damping,
- mass: elem.mass,
- });
- }}>
- <SlideEffect dir={elem.direction} presEffect={elem.effect} springSettings={elem} infinite>
- <div className="presBox-effect-demo-box" style={{ backgroundColor: springPreviewColors[i] }} />
- </SlideEffect>
- </div>
- ))}
+ {/* Effect dropdown */}
+ <div style={{ display: 'flex' }}>
+ <Dropdown
+ color={SnappingManager.userColor}
+ formLabel="Effect"
+ toolTip="Animation effect to apply when transitiong to slide"
+ formLabelPlacement="left"
+ closeOnSelect
+ items={effectItems}
+ selectedVal={effect?.toString()}
+ setSelectedVal={val => {
+ this.updateEffect(val as PresEffect, false);
+ // set default spring options for that effect
+ this.updateEffectTiming(activeItem, presEffectDefaultTimings[val as keyof typeof presEffectDefaultTimings]);
+ }}
+ dropdownType={DropdownType.SELECT}
+ type={Type.TERT}
+ />
+
+ <div
+ className={`ribbon-toggle ${this._showAIGallery ? 'active' : ''}`}
+ style={{
+ border: `solid 1px ${SnappingManager.userColor}`,
+ color: SnappingManager.userColor,
+ background: this._showAIGallery ? SnappingManager.userVariantColor : SnappingManager.userBackgroundColor,
+ }}
+ onClick={() => this.setShowAIGalleryVisibilty(!this._showAIGallery)}>
+ MORE
</div>
</div>
- {/* Effect dropdown */}
- <Dropdown
- color={SnappingManager.userColor}
- formLabel="Slide Effect"
- closeOnSelect
- items={effectItems}
- selectedVal={effect?.toString()}
- setSelectedVal={val => {
- this.updateEffect(val as PresEffect, false);
- // set default spring options for that effect
- this.updateEffectTiming(activeItem, presEffectDefaultTimings[val as keyof typeof presEffectDefaultTimings]);
- }}
- dropdownType={DropdownType.SELECT}
- type={Type.TERT}
- />
- {/* Effect direction */}
- {/* Only applies to certain effects */}
- {(effect === PresEffect.Flip || effect === PresEffect.Bounce || effect === PresEffect.Roll) && (
- <>
- <div className="ribbon-doubleButton" style={{ display: 'inline-flex' }}>
- <div className="presBox-subheading">Effect direction</div>
- <div className="ribbon-property" style={{ border: `solid 1px ${SnappingManager.userColor}` }}>
- {StrCast(this.activeItem.presentation_effectDirection)}
- </div>
- </div>
- <div className="presBox-icon-list">
- <IconButton
- type={Type.TERT}
- color={activeItem.presentation_effectDirection === PresEffectDirection.Left ? SnappingManager.userVariantColor : SnappingManager.userBackgroundColor}
- tooltip="Left"
- icon={<FaArrowRight size="16px" />}
- onClick={() => this.updateEffectDirection(PresEffectDirection.Left)}
- />
- <IconButton
- type={Type.TERT}
- color={activeItem.presentation_effectDirection === PresEffectDirection.Right ? SnappingManager.userVariantColor : SnappingManager.userBackgroundColor}
- tooltip="Right"
- icon={<FaArrowLeft size="16px" />}
- onClick={() => this.updateEffectDirection(PresEffectDirection.Right)}
- />
- {effect !== PresEffect.Roll && (
- <>
+ {this.aiEffects}
+ <div className="presBox-gpt-chat">
+ {/* Effect direction */}
+ {/* Only applies to certain effects */}
+ {(effect === PresEffect.Flip || effect === PresEffect.Bounce || effect === PresEffect.Roll) && (
+ <div className="ribbon-doubleButton">
+ <div className="presBox-subheading">DIRECTION</div>
+ <div style={{ width: '100%' }}>
+ <div className="presBox-icon-list" style={{ width: 'fit-content', margin: 'auto' }}>
<IconButton
type={Type.TERT}
- color={activeItem.presentation_effectDirection === PresEffectDirection.Top ? SnappingManager.userVariantColor : SnappingManager.userBackgroundColor}
- tooltip="Top"
- icon={<FaArrowDown size="16px" />}
- onClick={() => this.updateEffectDirection(PresEffectDirection.Top)}
+ color={activeItem.presentation_effectDirection === PresEffectDirection.Left ? SnappingManager.userVariantColor : SnappingManager.userBackgroundColor}
+ tooltip="Left"
+ icon={<FaArrowRight size="16px" />}
+ onClick={() => this.updateEffectDirection(PresEffectDirection.Left)}
/>
<IconButton
type={Type.TERT}
- color={activeItem.presentation_effectDirection === PresEffectDirection.Bottom ? SnappingManager.userVariantColor : SnappingManager.userBackgroundColor}
- tooltip="Bottom"
- icon={<FaArrowUp size="16px" />}
- onClick={() => this.updateEffectDirection(PresEffectDirection.Bottom)}
- />
- </>
- )}
- </div>
- </>
- )}
- {/* Spring settings */}
- {/* No spring settings for jackinthebox (lightspeed) */}
- {effect !== PresEffect.Lightspeed && (
- <>
- <Dropdown
- color={SnappingManager.userColor}
- formLabel="Effect Timing"
- closeOnSelect
- items={effectTimings}
- selectedVal={timingConfig.type}
- setSelectedVal={val => {
- this.updateEffectTiming(activeItem, {
- type: val as SpringType,
- ...springMappings[val],
- });
- }}
- dropdownType={DropdownType.SELECT}
- type={Type.TERT}
- />
- <div
- className="presBox-show-hide-dropdown"
- onClick={e => {
- e.stopPropagation();
- this.setSpringEditorVisibility(!this.showSpringEditor);
- }}>
- {`${this.showSpringEditor ? 'Hide' : 'Show'} Spring Settings`}
- <FontAwesomeIcon icon={this.showSpringEditor ? 'chevron-up' : 'chevron-down'} />
- </div>
- {this.showSpringEditor && (
- <>
- <div>Tension</div>
- <div
- onPointerDown={e => {
- e.stopPropagation();
- }}>
- <Slider
- min={1}
- max={1000}
- step={5}
- size="small"
- value={timingConfig.stiffness}
- onChange={(e, val) => {
- if (!timingConfig) return;
- this.updateEffectTiming(activeItem, { ...timingConfig, type: SpringType.CUSTOM, stiffness: val as number });
- }}
- valueLabelDisplay="auto"
- />
- </div>
- <div>Damping</div>
- <div
- onPointerDown={e => {
- e.stopPropagation();
- }}>
- <Slider
- min={1}
- max={100}
- step={1}
- size="small"
- value={timingConfig.damping}
- onChange={(e, val) => {
- if (!timingConfig) return;
- this.updateEffectTiming(activeItem, { ...timingConfig, type: SpringType.CUSTOM, damping: val as number });
- }}
- valueLabelDisplay="auto"
- />
- </div>
- <div>Mass</div>
- <div
- onPointerDown={e => {
- e.stopPropagation();
- }}>
- <Slider
- min={1}
- max={10}
- step={1}
- size="small"
- value={timingConfig.mass}
- onChange={(e, val) => {
- if (!timingConfig) return;
- this.updateEffectTiming(activeItem, { ...timingConfig, type: SpringType.CUSTOM, mass: val as number });
- }}
- valueLabelDisplay="auto"
+ color={activeItem.presentation_effectDirection === PresEffectDirection.Right ? SnappingManager.userVariantColor : SnappingManager.userBackgroundColor}
+ tooltip="Right"
+ icon={<FaArrowLeft size="16px" />}
+ onClick={() => this.updateEffectDirection(PresEffectDirection.Right)}
/>
+ {effect !== PresEffect.Roll && (
+ <>
+ <IconButton
+ type={Type.TERT}
+ color={activeItem.presentation_effectDirection === PresEffectDirection.Top ? SnappingManager.userVariantColor : SnappingManager.userBackgroundColor}
+ tooltip="Top"
+ icon={<FaArrowDown size="16px" />}
+ onClick={() => this.updateEffectDirection(PresEffectDirection.Top)}
+ />
+ <IconButton
+ type={Type.TERT}
+ color={activeItem.presentation_effectDirection === PresEffectDirection.Bottom ? SnappingManager.userVariantColor : SnappingManager.userBackgroundColor}
+ tooltip="Bottom"
+ icon={<FaArrowUp size="16px" />}
+ onClick={() => this.updateEffectDirection(PresEffectDirection.Bottom)}
+ />
+ </>
+ )}
</div>
- Preview Effect
- <div className="presBox-option-block presBox-option-center">
- <div className="presBox-effect-container">
- <SlideEffect dir={direction} presEffect={effect} springSettings={timingConfig} infinite>
- <div className="presBox-effect-demo-box" style={{ backgroundColor: springPreviewColors[0] }} />
- </SlideEffect>
- </div>
- </div>
- </>
- )}
- </>
- )}
+ </div>
+ </div>
+ )}
+ {![PresEffect.Lightspeed, PresEffect.Fade, PresEffect.None, ''].includes(effect) && (
+ <>
+ <Dropdown
+ color={SnappingManager.userColor}
+ formLabel="Springiness"
+ formLabelPlacement="left"
+ closeOnSelect
+ items={effectTimings}
+ selectedVal={timingConfig.type}
+ setSelectedVal={val => this.updateEffectTiming(activeItem, { type: val as SpringType, ...springMappings[val] })}
+ dropdownType={DropdownType.SELECT}
+ type={Type.TERT}
+ />
+
+ <div style={{ display: SnappingManager.PropertiesWidth < 1 ? 'none' : undefined }}>
+ {/* No spring settings for jackinthebox (lightspeed) */}
+ {StrCast(activeItem.presentation_effectTiming).includes('custom') && effect !== PresEffect.None && (
+ <>
+ <div className="presBox-springSlider">
+ <span>Tension</span>
+ <div onPointerDown={e => e.stopPropagation()}>
+ {/* prettier-ignore */}
+ <Slider min={1} max={1000} step={5} size="small"
+ value={timingConfig.stiffness}
+ onChange={(e, val) => timingConfig && this.updateEffectTiming(activeItem, { ...timingConfig, type: SpringType.CUSTOM, stiffness: val as number })}
+ valueLabelDisplay="auto"
+ />
+ </div>
+ </div>
+ <div className="presBox-springSlider">
+ <span>Damping</span>
+ <div onPointerDown={e => e.stopPropagation()}>
+ {/* prettier-ignore */}
+ <Slider min={1} max={100} step={1} size="small"
+ value={timingConfig.damping}
+ onChange={(e, val) => timingConfig && this.updateEffectTiming(activeItem, { ...timingConfig, type: SpringType.CUSTOM, damping: val as number })}
+ valueLabelDisplay="auto"
+ />
+ </div>
+ </div>
+ <div className="presBox-springSlider">
+ <span>Mass</span>
+ <div onPointerDown={e => e.stopPropagation()}>
+ {/* prettier-ignore */}
+ <Slider min={1} max={10} step={1} size="small"
+ value={timingConfig.mass}
+ onChange={(e, val) => timingConfig && this.updateEffectTiming(activeItem, { ...timingConfig, type: SpringType.CUSTOM, mass: val as number })}
+ valueLabelDisplay="auto"
+ />
+ </div>
+ </div>
+ </>
+ )}
+ </div>
+ </>
+ )}
+ </div>
</div>
+ </div>
- {/* Toggles */}
- <div className="presBox-option-block">
- <Toggle
- formLabel="Play Audio Annotation"
- toggleType={ToggleType.SWITCH}
- toggleStatus={BoolCast(activeItem.presentation_playAudio)}
- onClick={() => {
- activeItem.presentation_playAudio = !BoolCast(activeItem.presentation_playAudio);
- }}
- color={SnappingManager.userColor}
- />
- <Toggle
- formLabel="Zoom Text Selections"
- toggleType={ToggleType.SWITCH}
- toggleStatus={BoolCast(activeItem.presentation_zoomText)}
- onClick={() => {
- activeItem.presentation_zoomText = !BoolCast(activeItem.presentation_zoomText);
- }}
+ {[PresEffect.None, PresEffect.Fade, ''].includes(effect) ? null : (
+ <div className="presBox-previewContainer">
+ <Button
+ type={Type.TERT}
+ tooltip="show preview of slide animation effect"
+ size={Size.SMALL}
color={SnappingManager.userColor}
+ background="transparent"
+ onClick={action(() => {
+ this._showPreview = false;
+ setTimeout(action(() => { this._showPreview = true; }) ); // prettier-ignore
+ })}
+ text="Preview Effect"
/>
- <Button text="Apply to all" type={Type.TERT} color={SnappingManager.userVariantColor} onClick={() => this.applyTo(this.childDocs)} />
+ <div className="presBox-option-block presBox-option-center">
+ <div className="presBox-effect-container">
+ {!this._showPreview ? null : (
+ <SlideEffect dir={direction} presEffect={effect} springSettings={timingConfig}>
+ <div className="presBox-effect-demo-box" style={{ backgroundColor: springPreviewColors[0] }} />
+ </SlideEffect>
+ )}
+ </div>
+ </div>
</div>
- </div>
+ )}
+
+ <Button text="Apply to all slides" type={Type.TERT} color={SnappingManager.userVariantColor} onClick={() => this.applyTo(this.childDocs)} />
</>
);
}
@@ -2248,7 +2182,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
<div id="startTime" className="slider-number" style={{ color: SnappingManager.userColor, backgroundColor: SnappingManager.userBackgroundColor }}>
<input
className="presBox-input"
- style={{ textAlign: 'center', width: '100%', height: 15, fontSize: 10 }}
type="number"
readOnly
value={NumCast(activeItem.config_clipStart).toFixed(2)}
@@ -2275,7 +2208,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
<input
className="presBox-input"
onKeyDown={e => e.stopPropagation()}
- style={{ textAlign: 'center', width: '100%', height: 15, fontSize: 10 }}
type="number"
readOnly
value={configClipEnd.toFixed(2)}
@@ -3083,7 +3015,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
} */}
</div>
{/* presbox chatbox */}
- {this.chatActive && <div className="presBox-chatbox" />}
+ {this._chatActive && <div className="presBox-chatbox" />}
</div>
);
}
diff --git a/src/client/views/nodes/trails/SpringUtils.ts b/src/client/views/nodes/trails/SpringUtils.ts
index 73e1e14f1..044afbeb1 100644
--- a/src/client/views/nodes/trails/SpringUtils.ts
+++ b/src/client/views/nodes/trails/SpringUtils.ts
@@ -22,7 +22,14 @@ export interface SpringSettings {
}
// Overall config
-
+// Keeps these settings in sync with the AnimationSettings interface (used by gpt);
+export enum AnimationSettingsProperties {
+ effect = 'effect',
+ direction = 'direction',
+ stiffness = 'stiffness',
+ damping = 'damping',
+ mass = 'mass',
+}
export interface AnimationSettings {
effect: PresEffect;
direction: PresEffectDirection;
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-12-01 04:37:23 +0000