aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/trails/PresElementBox.tsx
diff options
context:
space:
mode:
authorsrichman333 <sarah_n_richman@brown.edu>2023-06-14 17:23:23 -0400
committersrichman333 <sarah_n_richman@brown.edu>2023-06-14 17:23:23 -0400
commitf0474c18d092f4db49255a1e92d7f052b7398897 (patch)
tree1e26ccaf42dec4d99904e2eddb36dff6f3b55948 /src/client/views/nodes/trails/PresElementBox.tsx
parent20d217d825891cf29a432a048d1f8e7bc04d062a (diff)
parentbf1198fbe73847087b1ec8e00a43306816b3508a (diff)
Merge branch 'master' into collaboration-sarah
Diffstat (limited to 'src/client/views/nodes/trails/PresElementBox.tsx')
-rw-r--r--src/client/views/nodes/trails/PresElementBox.tsx64
1 files changed, 31 insertions, 33 deletions
diff --git a/src/client/views/nodes/trails/PresElementBox.tsx b/src/client/views/nodes/trails/PresElementBox.tsx
index 62e5314c3..34e069046 100644
--- a/src/client/views/nodes/trails/PresElementBox.tsx
+++ b/src/client/views/nodes/trails/PresElementBox.tsx
@@ -1,19 +1,20 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Tooltip } from '@material-ui/core';
-import { action, computed, IReactionDisposer, observable, reaction } from 'mobx';
+import { action, computed, IReactionDisposer, observable, reaction, runInAction } from 'mobx';
import { observer } from 'mobx-react';
-import { Doc, DocListCast, HeightSym, Opt, WidthSym } from '../../../../fields/Doc';
+import { Doc, DocListCast, Opt } from '../../../../fields/Doc';
+import { Height, Width } from '../../../../fields/DocSymbols';
import { Id } from '../../../../fields/FieldSymbols';
import { List } from '../../../../fields/List';
import { Cast, DocCast, NumCast, StrCast } from '../../../../fields/Types';
import { emptyFunction, returnEmptyDoclist, returnFalse, returnTrue, setupMoveUpEvents } from '../../../../Utils';
-import { Docs, DocUtils } from '../../../documents/Documents';
+import { Docs } from '../../../documents/Documents';
import { CollectionViewType } from '../../../documents/DocumentTypes';
import { DocumentManager } from '../../../util/DocumentManager';
import { DragManager } from '../../../util/DragManager';
import { SettingsManager } from '../../../util/SettingsManager';
import { Transform } from '../../../util/Transform';
-import { undoBatch } from '../../../util/UndoManager';
+import { undoable, undoBatch } from '../../../util/UndoManager';
import { ViewBoxBaseComponent } from '../../DocComponent';
import { EditableView } from '../../EditableView';
import { Colors } from '../../global/globalEnums';
@@ -61,7 +62,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
}
componentDidMount() {
- this.layoutDoc.hideLinkButton = true;
+ this.layoutDoc.layout_hideLinkButton = true;
this._heightDisposer = reaction(
() => ({ expand: this.rootDoc.presExpandInlineButton, height: this.collapsedHeight }),
({ expand, height }) => (this.layoutDoc._height = height + (expand ? this.expandViewHeight : 0)),
@@ -106,8 +107,8 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
ScreenToLocalTransform={Transform.Identity}
renderDepth={this.props.renderDepth + 1}
docViewPath={returnEmptyDoclist}
- docFilters={this.props.docFilters}
- docRangeFilters={this.props.docRangeFilters}
+ childFilters={this.props.childFilters}
+ childFiltersByRanges={this.props.childFiltersByRanges}
searchFilterDocs={this.props.searchFilterDocs}
rootSelected={returnTrue}
addDocument={returnFalse}
@@ -192,7 +193,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
const dragData = new DragManager.DocumentDragData(this.presBoxView?.sortArray() ?? []);
if (!dragData.draggedDocuments.length) dragData.draggedDocuments.push(this.rootDoc);
dragData.dropAction = 'move';
- dragData.treeViewDoc = this.presBox?._viewType === CollectionViewType.Tree ? this.presBox : undefined; // this.props.DocumentView?.()?.props.treeViewDoc;
+ dragData.treeViewDoc = this.presBox?._type_collection === CollectionViewType.Tree ? this.presBox : undefined; // this.props.DocumentView?.()?.props.treeViewDoc;
dragData.moveDocument = this.props.moveDocument;
const dragItem: HTMLElement[] = [];
if (dragArray.length === 1) {
@@ -263,16 +264,15 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
}
};
- @undoBatch
- removeItem = action((e: React.MouseEvent) => {
+ removePresentationItem = undoable((e: React.MouseEvent) => {
e.stopPropagation();
if (this.presBox && this.indexInPres < (this.presBoxView?.itemIndex || 0)) {
- this.presBox.itemIndex = (this.presBoxView?.itemIndex || 0) - 1;
+ runInAction(() => (this.presBox!.itemIndex = (this.presBoxView?.itemIndex || 0) - 1));
}
this.props.removeDocument?.(this.rootDoc);
this.presBoxView?.removeFromSelectedArray(this.rootDoc);
this.removeAllRecordingInOverlay();
- });
+ }, 'Remove doc from pres trail');
// set the value/title of the individual pres element
@undoBatch
@@ -319,15 +319,13 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
// a previously recorded video will have timecode defined
static videoIsRecorded = (activeItem: Opt<Doc>) => {
const casted = Cast(activeItem?.recording, Doc, null);
- return casted && 'currentTimecode' in casted;
+ return casted && 'layout_currentTimecode' in casted;
};
removeAllRecordingInOverlay = () => {
- DocListCast(Doc.MyOverlayDocs.data).forEach(doc => {
- if (doc.slides === this.rootDoc) {
- Doc.RemoveDocFromList(Doc.MyOverlayDocs, undefined, doc);
- }
- });
+ DocListCast(Doc.MyOverlayDocs.data)
+ .filter(doc => doc.slides === this.rootDoc)
+ .forEach(Doc.RemFromMyOverlay);
};
static removeEveryExistingRecordingInOverlay = () => {
@@ -335,9 +333,9 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
DocListCast(Doc.MyOverlayDocs.data).forEach(doc => {
if (doc.slides !== null) {
// if it's a recording video, don't remove from overlay (user can lose data)
- if (!PresElementBox.videoIsRecorded(DocCast(doc.slides))) return;
-
- Doc.RemoveDocFromList(Doc.MyOverlayDocs, undefined, doc);
+ if (PresElementBox.videoIsRecorded(DocCast(doc.slides))) {
+ Doc.RemFromMyOverlay(doc);
+ }
}
});
};
@@ -357,7 +355,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
if (!iconClick) PresElementBox.removeEveryExistingRecordingInOverlay();
if (activeItem.recording) {
- Doc.AddDocToList(Doc.MyOverlayDocs, undefined, DocCast(activeItem.recording));
+ Doc.AddToMyOverlay(DocCast(activeItem.recording));
}
};
@@ -369,7 +367,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
// if we already have an existing recording
this.showRecording(activeItem, true);
// // if we already have an existing recording
- // Doc.AddDocToList(Doc.MyOverlayDocs, undefined, Cast(activeItem.recording, Doc, null));
+ // Doc.AddToMyOverlay(Cast(activeItem.recording, Doc, null));
} else {
// Remove every recording that already exists in overlay view
// this is a design decision to clear to focus in on the recoding mode
@@ -379,11 +377,11 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
const recording = Docs.Create.WebCamDocument('', {
_width: 384,
_height: 216,
- hideDocumentButtonBar: true,
- hideDecorationTitle: true,
- hideOpenButton: true,
+ layout_hideDocumentButtonBar: true,
+ layout_hideDecorationTitle: true,
+ layout_hideOpenButton: true,
// hideDeleteButton: true,
- cloneFieldFilter: new List<string>(['system']),
+ cloneFieldFilter: new List<string>(['isSystem']),
});
// attach the recording to the slide, and attach the slide to the recording
@@ -391,9 +389,9 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
activeItem.recording = recording;
// make recording box appear in the bottom right corner of the screen
- recording.overlayX = window.innerWidth - recording[WidthSym]() - 20;
- recording.overlayY = window.innerHeight - recording[HeightSym]() - 20;
- Doc.AddDocToList(Doc.MyOverlayDocs, undefined, recording);
+ recording.overlayX = window.innerWidth - recording[Width]() - 20;
+ recording.overlayY = window.innerHeight - recording[Height]() - 20;
+ Doc.AddToMyOverlay(recording);
}
};
@@ -476,7 +474,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
);
items.push(
<Tooltip key="trash" title={<div className="dash-tooltip">Remove from presentation</div>}>
- <div className={'slideButton'} onClick={this.removeItem}>
+ <div className={'slideButton'} onClick={this.removePresentationItem}>
<FontAwesomeIcon icon={'trash'} onPointerDown={e => e.stopPropagation()} />
</div>
</Tooltip>
@@ -524,7 +522,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
style={{
display: 'infline-block',
backgroundColor: this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BackgroundColor),
- //boxShadow: presBoxColor && presBoxColor !== 'white' && presBoxColor !== 'transparent' ? (isCurrent ? '0 0 0px 1.5px' + presBoxColor : undefined) : undefined,
+ //layout_boxShadow: presBoxColor && presBoxColor !== 'white' && presBoxColor !== 'transparent' ? (isCurrent ? '0 0 0px 1.5px' + presBoxColor : undefined) : undefined,
border: presBoxColor && presBoxColor !== 'white' && presBoxColor !== 'transparent' ? (isCurrent ? presBoxColor + ' solid 2.5px' : undefined) : undefined,
}}>
<div
@@ -546,7 +544,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
}
}}
onClick={e => e.stopPropagation()}>{`${this.indexInPres + 1}. `}</div>
- <EditableView ref={this._titleRef} editing={!isSelected ? false : undefined} contents={activeItem.title} overflow={'ellipsis'} GetValue={() => StrCast(activeItem.title)} SetValue={this.onSetValue} />
+ <EditableView ref={this._titleRef} oneLine={true} editing={!isSelected ? false : undefined} contents={activeItem.title} overflow={'ellipsis'} GetValue={() => StrCast(activeItem.title)} SetValue={this.onSetValue} />
</div>
{/* <Tooltip title={<><div className="dash-tooltip">{"Movement speed"}</div></>}><div className="presItem-time" style={{ display: showMore ? "block" : "none" }}>{this.transition}</div></Tooltip> */}
{/* <Tooltip title={<><div className="dash-tooltip">{"Duration"}</div></>}><div className="presItem-time" style={{ display: showMore ? "block" : "none" }}>{this.duration}</div></Tooltip> */}