aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/trails/PresElementBox.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes/trails/PresElementBox.tsx')
-rw-r--r--src/client/views/nodes/trails/PresElementBox.tsx73
1 files changed, 43 insertions, 30 deletions
diff --git a/src/client/views/nodes/trails/PresElementBox.tsx b/src/client/views/nodes/trails/PresElementBox.tsx
index a98db3d66..0285dac50 100644
--- a/src/client/views/nodes/trails/PresElementBox.tsx
+++ b/src/client/views/nodes/trails/PresElementBox.tsx
@@ -59,13 +59,13 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
return this.props.DocumentView?.().props.docViewPath().lastElement()?.rootDoc;
}
@computed get targetDoc() {
- return Cast(this.rootDoc.presentationTargetDoc, Doc, null) || this.rootDoc;
+ return Cast(this.rootDoc.presentation_targetDoc, Doc, null) || this.rootDoc;
}
componentDidMount() {
this.layoutDoc.layout_hideLinkButton = true;
this._heightDisposer = reaction(
- () => ({ expand: this.rootDoc.presExpandInlineButton, height: this.collapsedHeight }),
+ () => ({ expand: this.rootDoc.presentation_expandInlineButton, height: this.collapsedHeight }),
({ expand, height }) => (this.layoutDoc._height = height + (expand ? this.expandViewHeight : 0)),
{ fireImmediately: true }
);
@@ -80,7 +80,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
ScreenToLocalListTransform = (xCord: number, yCord: number) => [xCord, yCord];
@action
- presExpandDocumentClick = () => (this.rootDoc.presExpandInlineButton = !this.rootDoc.presExpandInlineButton);
+ presExpandDocumentClick = () => (this.rootDoc.presentation_expandInlineButton = !this.rootDoc.presentation_expandInlineButton);
embedHeight = (): number => this.collapsedHeight + this.expandViewHeight;
// embedWidth = () => this.props.PanelWidth();
@@ -95,7 +95,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
* presentation element.
*/
@computed get renderEmbeddedInline() {
- return !this.rootDoc.presExpandInlineButton || !this.targetDoc ? null : (
+ return !this.rootDoc.presentation_expandInlineButton || !this.targetDoc ? null : (
<div className="presItem-embedded" style={{ height: this.embedHeight(), width: '50%' }}>
<DocumentView
Document={PresBox.targetRenderedDoc(this.rootDoc)}
@@ -159,9 +159,9 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
@computed get transition() {
let transitionInS: number;
- if (this.rootDoc.presTransition) transitionInS = NumCast(this.rootDoc.presTransition) / 1000;
+ if (this.rootDoc.presentation_transition) transitionInS = NumCast(this.rootDoc.presentation_transition) / 1000;
else transitionInS = 0.5;
- return this.rootDoc.presMovement === PresMovement.Jump || this.rootDoc.presMovement === PresMovement.None ? null : 'M: ' + transitionInS + 's';
+ return this.rootDoc.presentation_movement === PresMovement.Jump || this.rootDoc.presentation_movement === PresMovement.None ? null : 'M: ' + transitionInS + 's';
}
private _itemRef: React.RefObject<HTMLDivElement> = React.createRef();
@@ -193,13 +193,14 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
const dragArray = this.presBoxView?._dragArray ?? [];
const dragData = new DragManager.DocumentDragData(this.presBoxView?.sortArray() ?? []);
if (!dragData.draggedDocuments.length) dragData.draggedDocuments.push(this.rootDoc);
- dragData.dropAction = 'move';
dragData.treeViewDoc = this.presBox?._type_collection === CollectionViewType.Tree ? this.presBox : undefined; // this.props.DocumentView?.()?.props.treeViewDoc;
dragData.moveDocument = this.props.moveDocument;
const dragItem: HTMLElement[] = [];
+ const classesToRestore = new Map<HTMLElement, string>();
if (dragArray.length === 1) {
const doc = this._itemRef.current || dragArray[0];
if (doc) {
+ classesToRestore.set(doc, doc.className);
doc.className = miniView ? 'presItem-miniSlide' : 'presItem-slide';
dragItem.push(doc);
}
@@ -213,16 +214,19 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
dragItem.push(doc);
}
- // const dropEvent = () => runInAction(() => this._dragging = false);
if (activeItem) {
+ runInAction(() => (this._dragging = true));
DragManager.StartDocumentDrag(
dragItem.map(ele => ele),
dragData,
e.clientX,
e.clientY,
- undefined
+ undefined,
+ action(() => {
+ Array.from(classesToRestore).forEach(pair => (pair[0].className = pair[1]));
+ this._dragging = false;
+ })
);
- // runInAction(() => this._dragging = true);
return true;
}
return false;
@@ -235,7 +239,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
onPointerMove = (e: PointerEvent) => {
const slide = this._itemRef.current!;
- const dragIsPresItem = DragManager.docsBeingDragged.some(d => d.presentationTargetDoc);
+ const dragIsPresItem = DragManager.docsBeingDragged.some(d => d.presentation_targetDoc);
if (slide && dragIsPresItem) {
const rect = slide.getBoundingClientRect();
const y = e.clientY - rect.top; //y position within the element.
@@ -293,12 +297,12 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
@action
updateCapturedContainerLayout = (presTargetDoc: Doc, activeItem: Doc) => {
const targetDoc = DocCast(presTargetDoc.annotationOn) ?? presTargetDoc;
- activeItem.presX = NumCast(targetDoc.x);
- activeItem.presY = NumCast(targetDoc.y);
- activeItem.presRotation = NumCast(targetDoc.rotation);
- activeItem.presWidth = NumCast(targetDoc.width);
- activeItem.presHeight = NumCast(targetDoc.height);
- activeItem.presPinLayout = true;
+ activeItem.config_x = NumCast(targetDoc.x);
+ activeItem.config_y = NumCast(targetDoc.y);
+ activeItem.config_rotation = NumCast(targetDoc.rotation);
+ activeItem.config_width = NumCast(targetDoc.width);
+ activeItem.config_height = NumCast(targetDoc.height);
+ activeItem.config_pinLayout = true;
};
/**
* Method called for updating the view of the currently selected document
@@ -432,7 +436,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
<div
className="slideButton"
onPointerDown={e => setupMoveUpEvents(this, e, returnFalse, emptyFunction, () => this.updateCapturedContainerLayout(targetDoc, activeItem), true)}
- style={{ opacity: activeItem.presPinLayout ? 1 : 0.5, fontWeight: 700, display: 'flex' }}>
+ style={{ opacity: activeItem.config_pinLayout ? 1 : 0.5, fontWeight: 700, display: 'flex' }}>
L
</div>
</Tooltip>
@@ -442,7 +446,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
<div
className="slideButton"
onPointerDown={e => setupMoveUpEvents(this, e, returnFalse, emptyFunction, () => this.updateCapturedViewContents(targetDoc, activeItem))}
- style={{ opacity: activeItem.presPinData || activeItem.presPinView ? 1 : 0.5, fontWeight: 700, display: 'flex' }}>
+ style={{ opacity: activeItem.config_pinData || activeItem.config_pinView ? 1 : 0.5, fontWeight: 700, display: 'flex' }}>
C
</div>
</Tooltip>
@@ -456,19 +460,29 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
);
if (this.indexInPres !== 0) {
items.push(
- <Tooltip key="arrow" title={<div className="dash-tooltip">{activeItem.groupWithUp ? 'Ungroup' : 'Group with up'}</div>}>
+ <Tooltip
+ key="arrow"
+ title={
+ <div className="dash-tooltip">
+ {!activeItem.presentation_groupWithUp
+ ? 'Not grouped with previous slide (click to group)'
+ : activeItem.presentation_groupWithUp === 1
+ ? 'Run simultaneously with previous slide (click again to run after)'
+ : 'Run after previous slide (click to ungroup from previous)'}
+ </div>
+ }>
<div
className="slideButton"
- onClick={() => (activeItem.groupWithUp = (NumCast(activeItem.groupWithUp) + 1) % 3)}
+ onClick={() => (activeItem.presentation_groupWithUp = (NumCast(activeItem.presentation_groupWithUp) + 1) % 3)}
style={{
zIndex: 1000 - this.indexInPres,
fontWeight: 700,
- backgroundColor: activeItem.groupWithUp ? (presColorBool ? presBoxColor : Colors.MEDIUM_BLUE) : undefined,
- outline: NumCast(activeItem.groupWithUp) > 1 ? 'solid black 1px' : undefined,
- height: activeItem.groupWithUp ? 53 : 18,
- transform: activeItem.groupWithUp ? 'translate(0, -17px)' : undefined,
+ backgroundColor: activeItem.presentation_groupWithUp ? (presColorBool ? presBoxColor : Colors.MEDIUM_BLUE) : undefined,
+ outline: NumCast(activeItem.presentation_groupWithUp) > 1 ? 'solid black 1px' : undefined,
+ height: activeItem.presentation_groupWithUp ? 53 : 18,
+ transform: activeItem.presentation_groupWithUp ? 'translate(0, -17px)' : undefined,
}}>
- <div style={{ transform: activeItem.groupWithUp ? 'rotate(180deg) translate(0, -17.5px)' : 'rotate(0deg)' }}>
+ <div style={{ transform: activeItem.presentation_groupWithUp ? 'rotate(180deg) translate(0, -17.5px)' : 'rotate(0deg)' }}>
<FontAwesomeIcon icon={'arrow-up'} onPointerDown={e => e.stopPropagation()} />
</div>
</div>
@@ -476,14 +490,14 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
);
}
items.push(
- <Tooltip key="eye" title={<div className="dash-tooltip">{this.rootDoc.presExpandInlineButton ? 'Minimize' : 'Expand'}</div>}>
+ <Tooltip key="eye" title={<div className="dash-tooltip">{this.rootDoc.presentation_expandInlineButton ? 'Minimize' : 'Expand'}</div>}>
<div
className="slideButton"
onClick={e => {
e.stopPropagation();
this.presExpandDocumentClick();
}}>
- <FontAwesomeIcon icon={this.rootDoc.presExpandInlineButton ? 'eye-slash' : 'eye'} onPointerDown={e => e.stopPropagation()} />
+ <FontAwesomeIcon icon={this.rootDoc.presentation_expandInlineButton ? 'eye-slash' : 'eye'} onPointerDown={e => e.stopPropagation()} />
</div>
</Tooltip>
);
@@ -561,13 +575,12 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
style={{
display: 'inline-flex',
pointerEvents: isSelected ? undefined : 'none',
- width: `calc(100% ${this.rootDoc.presExpandInlineButton ? '- 50%' : ''} - ${this.presButtons.length * 22}px`,
+ width: `calc(100% ${this.rootDoc.presentation_expandInlineButton ? '- 50%' : ''} - ${this.presButtons.length * 22}px`,
cursor: isSelected ? 'text' : 'grab',
}}>
<div
className="presItem-number"
title="select without navigation"
- style={{ pointerEvents: this.presBoxView?.isContentActive() ? 'all' : undefined }}
onPointerDown={e => {
e.stopPropagation();
if (this._itemRef.current && this._dragRef.current) {
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-08 08:02:27 +0000