aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/trails
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes/trails')
-rw-r--r--src/client/views/nodes/trails/PresBox.tsx184
-rw-r--r--src/client/views/nodes/trails/PresElementBox.tsx73
2 files changed, 127 insertions, 130 deletions
diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index 6e5eb3300..05e09361b 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -1,7 +1,7 @@
import React = require('react');
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Tooltip } from '@material-ui/core';
-import { action, computed, IReactionDisposer, observable, ObservableMap, reaction, runInAction } from 'mobx';
+import { action, computed, IReactionDisposer, observable, ObservableSet, reaction, runInAction } from 'mobx';
import { observer } from 'mobx-react';
import { ColorState, SketchPicker } from 'react-color';
import { Bounce, Fade, Flip, LightSpeed, Roll, Rotate, Zoom } from 'react-reveal';
@@ -20,6 +20,7 @@ import { SettingsManager } from '../../../util/SettingsManager';
import { undoBatch, UndoManager } from '../../../util/UndoManager';
import { CollectionDockingView } from '../../collections/CollectionDockingView';
import { MarqueeViewBounds } from '../../collections/collectionFreeForm';
+import { CollectionFreeFormViewChrome } from '../../collections/CollectionMenu';
import { CollectionView } from '../../collections/CollectionView';
import { TabDocView } from '../../collections/TabDocView';
import { ViewBoxBaseComponent } from '../../DocComponent';
@@ -32,7 +33,7 @@ import { PresEffect, PresMovement, PresStatus } from './PresEnums';
export interface PinProps {
audioRange?: boolean;
- setPosition?: boolean;
+ activeFrame?: number;
hidePresBox?: boolean;
pinWithView?: PinViewProps;
pinDocView?: boolean; // whether the current view specs of the document should be saved the pinned document
@@ -66,30 +67,31 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
delay: presDoc.presTransition,
// when: this.layoutDoc === PresBox.Instance.childDocs[PresBox.Instance.itemIndex]?.presentationTargetDoc,
};
+ //prettier-ignore
switch (presDoc.presEffect) {
- case PresEffect.Zoom:
- return <Zoom {...effectProps}>{renderDoc}</Zoom>;
- case PresEffect.Fade:
- return <Fade {...effectProps}>{renderDoc}</Fade>;
- case PresEffect.Flip:
- return <Flip {...effectProps}>{renderDoc}</Flip>;
- case PresEffect.Rotate:
- return <Rotate {...effectProps}>{renderDoc}</Rotate>;
- case PresEffect.Bounce:
- return <Bounce {...effectProps}>{renderDoc}</Bounce>;
- case PresEffect.Roll:
- return <Roll {...effectProps}>{renderDoc}</Roll>;
- case PresEffect.Lightspeed:
- return <LightSpeed {...effectProps}>{renderDoc}</LightSpeed>;
- case PresEffect.None:
- default:
- return renderDoc;
+ default:
+ case PresEffect.None: return renderDoc;
+ case PresEffect.Zoom: return <Zoom {...effectProps}>{renderDoc}</Zoom>;
+ case PresEffect.Fade: return <Fade {...effectProps}>{renderDoc}</Fade>;
+ case PresEffect.Flip: return <Flip {...effectProps}>{renderDoc}</Flip>;
+ case PresEffect.Rotate: return <Rotate {...effectProps}>{renderDoc}</Rotate>;
+ case PresEffect.Bounce: return <Bounce {...effectProps}>{renderDoc}</Bounce>;
+ case PresEffect.Roll: return <Roll {...effectProps}>{renderDoc}</Roll>;
+ case PresEffect.Lightspeed: return <LightSpeed {...effectProps}>{renderDoc}</LightSpeed>;
}
}
public static EffectsProvider(layoutDoc: Doc, renderDoc: any) {
return PresBox.Instance && layoutDoc === PresBox.Instance.childDocs[PresBox.Instance.itemIndex]?.presentationTargetDoc ? PresBox.renderEffectsDoc(renderDoc, layoutDoc, PresBox.Instance.childDocs[PresBox.Instance.itemIndex]) : renderDoc;
}
+ private _disposers: { [name: string]: IReactionDisposer } = {};
+
+ constructor(props: any) {
+ super(props);
+ if ((Doc.ActivePresentation = this.rootDoc)) runInAction(() => (PresBox.Instance = this));
+ this.props.Document.presentationFieldKey = this.fieldKey; // provide info to the presElement script so that it can look up rendering information about the presBox
+ }
+
@observable public static Instance: PresBox;
@observable _isChildActive = false;
@@ -97,14 +99,11 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
@observable _presTimer!: NodeJS.Timeout;
@observable _presKeyEventsActive: boolean = false;
- @observable _selectedArray: ObservableMap = new ObservableMap<Doc, any>();
@observable _eleArray: HTMLElement[] = [];
@observable _dragArray: HTMLElement[] = [];
@observable _pathBoolean: boolean = false;
@observable _expandBoolean: boolean = false;
- private _disposers: { [name: string]: IReactionDisposer } = {};
-
@observable static startMarquee: boolean = false; // onclick "+ new slide" in presentation mode, set as true, then when marquee selection finish, onPointerUp automatically triggers PinWithView
@observable private transitionTools: boolean = false;
@observable private newDocumentTools: boolean = false;
@@ -151,11 +150,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
if ((this.targetDoc.type === DocumentType.COL && this.targetDoc._viewType === CollectionViewType.Freeform) || this.targetDoc.type === DocumentType.IMG) return true;
else return false;
}
- constructor(props: any) {
- super(props);
- if ((Doc.ActivePresentation = this.rootDoc)) runInAction(() => (PresBox.Instance = this));
- this.props.Document.presentationFieldKey = this.fieldKey; // provide info to the presElement script so that it can look up rendering information about the presBox
- }
@computed get selectedDocumentView() {
if (SelectionManager.Views().length) return SelectionManager.Views()[0];
if (this._selectedArray.size) return DocumentManager.Instance.getDocumentView(this.rootDoc);
@@ -172,6 +166,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
@computed get selectedDoc() {
return this.selectedDocumentView?.rootDoc;
}
+ _selectedArray = new ObservableSet<Doc>();
+ clearSelectedArray = () => this._selectedArray.clear();
+ addToSelectedArray = (doc: Doc) => this._selectedArray.add(doc);
+ removeFromSelectedArray = (doc: Doc) => this._selectedArray.delete(doc);
_unmounting = false;
@action
@@ -187,6 +185,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
@action
componentDidMount() {
+ this.props.setContentView?.(this);
this._unmounting = false;
this.rootDoc._forceRenderEngine = 'timeline';
this.layoutDoc.presStatus = PresStatus.Edit;
@@ -312,10 +311,15 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
//it'll also execute the necessary actions if presentation is playing.
public gotoDocument = action((index: number, from?: Doc, group?: boolean) => {
Doc.UnBrushAllDocs();
+
if (index >= 0 && index < this.childDocs.length) {
this.rootDoc._itemIndex = index;
const activeItem: Doc = this.activeItem;
const targetDoc: Doc = this.targetDoc;
+ if (activeItem.presActiveFrame !== undefined) {
+ const context = DocCast(DocCast(activeItem.presentationTargetDoc).context);
+ context && CollectionFreeFormViewChrome.gotoKeyFrame(context, NumCast(activeItem.presActiveFrame));
+ }
if (from?.mediaStopTriggerList && this.layoutDoc.presStatus !== PresStatus.Edit) {
DocListCast(from.mediaStopTriggerList).forEach(this.stopTempMedia);
}
@@ -338,8 +342,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
if (targetDoc?.lastFrame !== undefined) {
targetDoc._currentFrame = 0;
}
- if (!group) this._selectedArray.clear();
- this.childDocs[index] && this._selectedArray.set(this.childDocs[index], undefined); //Update selected array
+ if (!group) this.clearSelectedArray();
+ this.childDocs[index] && this.addToSelectedArray(this.childDocs[index]); //Update selected array
this.navigateToElement(this.childDocs[index]); //Handles movement to element only when presTrail is list
this.onHideDocument(); //Handles hide after/before
}
@@ -409,7 +413,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
this.layoutDoc.presCollection = srcContext;
}
const presStatus = this.rootDoc.presStatus;
- const selViewCache = Array.from(this._selectedArray.keys());
+ const selViewCache = Array.from(this._selectedArray);
const dragViewCache = Array.from(this._dragArray);
const eleViewCache = Array.from(this._eleArray);
const self = this;
@@ -417,8 +421,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
const presDocView = DocumentManager.Instance.getDocumentView(self.rootDoc);
if (presDocView) SelectionManager.SelectView(presDocView, false);
self.rootDoc.presStatus = presStatus;
- self._selectedArray.clear();
- selViewCache.forEach(doc => self._selectedArray.set(doc, undefined));
+ self.clearSelectedArray();
+ selViewCache.forEach(doc => self.addToSelectedArray(doc));
self._dragArray.splice(0, self._dragArray.length, ...dragViewCache);
self._eleArray.splice(0, self._eleArray.length, ...eleViewCache);
});
@@ -509,26 +513,32 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
this.childDocs.forEach((doc, index) => {
const curDoc = Cast(doc, Doc, null);
const tagDoc = Cast(curDoc.presentationTargetDoc, Doc, null);
- if (tagDoc) tagDoc.opacity = 1;
+ //if (tagDoc) tagDoc.opacity = 1;
const itemIndexes: number[] = this.getAllIndexes(this.tagDocs, tagDoc);
const curInd: number = itemIndexes.indexOf(index);
if (tagDoc === this.layoutDoc.presCollection) {
tagDoc.opacity = 1;
} else {
- if (itemIndexes.length > 1 && curDoc.presHideBefore && curInd !== 0) {
- } else if (curDoc.presHideBefore) {
- if (index > this.itemIndex) {
- tagDoc.opacity = 0;
- } else if (!curDoc.presHideAfter) {
+ if (curDoc.presHideBefore) {
+ if (itemIndexes.length > 1 && curInd !== 0) {
tagDoc.opacity = 1;
+ } else {
+ if (index > this.itemIndex) {
+ tagDoc.opacity = 0;
+ } else if (index === this.itemIndex || !curDoc.presHideAfter) {
+ tagDoc.opacity = 1;
+ }
}
}
- if (itemIndexes.length > 1 && curDoc.presHideAfter && curInd !== itemIndexes.length - 1) {
- } else if (curDoc.presHideAfter) {
- if (index < this.itemIndex) {
- tagDoc.opacity = 0;
- } else if (!curDoc.presHideBefore) {
+ if (curDoc.presHideAfter) {
+ if (itemIndexes.length > 1 && curInd !== itemIndexes.length - 1) {
tagDoc.opacity = 1;
+ } else {
+ if (index < this.itemIndex) {
+ tagDoc.opacity = 0;
+ } else if (index === this.itemIndex || !curDoc.presHideBefore) {
+ tagDoc.opacity = 1;
+ }
}
}
}
@@ -780,7 +790,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
* Method to get the list of selected items in the order in which they have been selected
*/
@computed get listOfSelected() {
- const list = Array.from(this._selectedArray.keys()).map((doc: Doc, index: any) => {
+ return Array.from(this._selectedArray).map((doc: Doc, index: any) => {
const curDoc = Cast(doc, Doc, null);
const tagDoc = Cast(curDoc.presentationTargetDoc, Doc, null);
if (curDoc && curDoc === this.activeItem)
@@ -804,7 +814,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
</div>
);
});
- return list;
}
@action
@@ -820,30 +829,17 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
this.gotoDocument(this.childDocs.indexOf(doc), this.activeItem);
if (doc.presPinView || doc.presentationTargetDoc === this.layoutDoc.presCollection) setTimeout(() => this.updateCurrentPresentation(context), 0);
else this.updateCurrentPresentation(context);
-
- if (this.activeItem.setPosition && this.activeItem.y !== undefined && this.activeItem.x !== undefined && this.targetDoc.x !== undefined && this.targetDoc.y !== undefined) {
- const timer = (ms: number) => new Promise(res => (this._presTimer = setTimeout(res, ms)));
- const time = 10;
- const ydiff = NumCast(this.activeItem.y) - NumCast(this.targetDoc.y);
- const xdiff = NumCast(this.activeItem.x) - NumCast(this.targetDoc.x);
-
- for (let i = 0; i < time; i++) {
- this.targetDoc.x = NumCast(this.targetDoc.x) + xdiff / time;
- this.targetDoc.y = NumCast(this.targetDoc.y) + ydiff / time;
- await timer(0.1);
- }
- }
};
//Command click
@action
multiSelect = (doc: Doc, ref: HTMLElement, drag: HTMLElement) => {
if (!this._selectedArray.has(doc)) {
- this._selectedArray.set(doc, undefined);
+ this.addToSelectedArray(doc);
this._eleArray.push(ref);
this._dragArray.push(drag);
} else {
- this._selectedArray.delete(doc);
+ this.removeFromSelectedArray(doc);
this.removeFromArray(this._eleArray, doc);
this.removeFromArray(this._dragArray, doc);
}
@@ -859,11 +855,11 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
//Shift click
@action
shiftSelect = (doc: Doc, ref: HTMLElement, drag: HTMLElement) => {
- this._selectedArray.clear();
+ this.clearSelectedArray();
// const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null);
if (this.activeItem) {
for (let i = Math.min(this.itemIndex, this.childDocs.indexOf(doc)); i <= Math.max(this.itemIndex, this.childDocs.indexOf(doc)); i++) {
- this._selectedArray.set(this.childDocs[i], undefined);
+ this.addToSelectedArray(this.childDocs[i]);
this._eleArray.push(ref);
this._dragArray.push(drag);
}
@@ -874,8 +870,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
//regular click
@action
regularSelect = (doc: Doc, ref: HTMLElement, drag: HTMLElement, focus: boolean, selectPres = true) => {
- this._selectedArray.clear();
- this._selectedArray.set(doc, undefined);
+ this.clearSelectedArray();
+ this.addToSelectedArray(doc);
this._eleArray.splice(0, this._eleArray.length, ref);
this._dragArray.splice(0, this._dragArray.length, drag);
focus && this.selectElement(doc);
@@ -904,10 +900,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
if (this.layoutDoc.presStatus === 'edit') {
undoBatch(
action(() => {
- for (const doc of Array.from(this._selectedArray.keys())) {
+ for (const doc of this._selectedArray) {
this.removeDocument(doc);
}
- this._selectedArray.clear();
+ this.clearSelectedArray();
this._eleArray.length = 0;
this._dragArray.length = 0;
})
@@ -919,7 +915,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
if (DocListCast(Doc.MyOverlayDocs?.data).includes(this.layoutDoc)) {
this.updateMinimize();
} else if (this.layoutDoc.presStatus === 'edit') {
- this._selectedArray.clear();
+ this.clearSelectedArray();
this._eleArray.length = this._dragArray.length = 0;
} else this.layoutDoc.presStatus = 'edit';
if (this._presTimer) clearTimeout(this._presTimer);
@@ -932,7 +928,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
if (e.shiftKey && this.itemIndex < this.childDocs.length - 1) {
// TODO: update to work properly
this.rootDoc._itemIndex = NumCast(this.rootDoc._itemIndex) + 1;
- this._selectedArray.set(this.childDocs[this.rootDoc._itemIndex], undefined);
+ this.addToSelectedArray(this.childDocs[this.rootDoc._itemIndex]);
} else {
this.next();
if (this._presTimer) {
@@ -949,7 +945,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
if (e.shiftKey && this.itemIndex !== 0) {
// TODO: update to work properly
this.rootDoc._itemIndex = NumCast(this.rootDoc._itemIndex) - 1;
- this._selectedArray.set(this.childDocs[this.rootDoc._itemIndex], undefined);
+ this.addToSelectedArray(this.childDocs[this.rootDoc._itemIndex]);
} else {
this.back();
if (this._presTimer) {
@@ -967,8 +963,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
break;
case 'a':
if ((e.metaKey || e.altKey) && this.layoutDoc.presStatus === 'edit') {
- this._selectedArray.clear();
- this.childDocs.forEach(doc => this._selectedArray.set(doc, undefined));
+ this.clearSelectedArray();
+ this.childDocs.forEach(doc => this.addToSelectedArray(doc));
handled = true;
}
default:
@@ -1116,7 +1112,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
if (change) timeInMS += change;
if (timeInMS < 100) timeInMS = 100;
if (timeInMS > 10000) timeInMS = 10000;
- Array.from(this._selectedArray.keys()).forEach(doc => (doc.presTransition = timeInMS));
+ this._selectedArray.forEach(doc => (doc.presTransition = timeInMS));
};
// Converts seconds to ms and updates presTransition
@@ -1125,7 +1121,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
if (change) scale += change;
if (scale < 0.01) scale = 0.01;
if (scale > 1.5) scale = 1.5;
- Array.from(this._selectedArray.keys()).forEach(doc => (doc.presZoom = scale));
+ this._selectedArray.forEach(doc => (doc.presZoom = scale));
};
// Converts seconds to ms and updates presDuration
@@ -1134,7 +1130,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
if (change) timeInMS += change;
if (timeInMS < 100) timeInMS = 100;
if (timeInMS > 20000) timeInMS = 20000;
- Array.from(this._selectedArray.keys()).forEach(doc => (doc.presDuration = timeInMS));
+ this._selectedArray.forEach(doc => (doc.presDuration = timeInMS));
};
/**
@@ -1142,8 +1138,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
*/
@undoBatch
updateMovement = action((movement: any, all?: boolean) => {
- const array: any[] = all ? this.childDocs : Array.from(this._selectedArray.keys());
- array.forEach(doc => {
+ (all ? this.childDocs : this._selectedArray).forEach(doc => {
switch (movement) {
case PresMovement.Zoom: //Pan and zoom
doc.presMovement = PresMovement.Zoom;
@@ -1167,21 +1162,21 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
@action
updateHideBefore = (activeItem: Doc) => {
activeItem.presHideBefore = !activeItem.presHideBefore;
- Array.from(this._selectedArray.keys()).forEach(doc => (doc.presHideBefore = activeItem.presHideBefore));
+ this._selectedArray.forEach(doc => (doc.presHideBefore = activeItem.presHideBefore));
};
@undoBatch
@action
updateHideAfter = (activeItem: Doc) => {
activeItem.presHideAfter = !activeItem.presHideAfter;
- Array.from(this._selectedArray.keys()).forEach(doc => (doc.presHideAfter = activeItem.presHideAfter));
+ this._selectedArray.forEach(doc => (doc.presHideAfter = activeItem.presHideAfter));
};
@undoBatch
@action
updateOpenDoc = (activeItem: Doc) => {
activeItem.openDocument = !activeItem.openDocument;
- Array.from(this._selectedArray.keys()).forEach(doc => {
+ this._selectedArray.forEach(doc => {
doc.openDocument = activeItem.openDocument;
});
};
@@ -1189,8 +1184,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
@undoBatch
@action
updateEffectDirection = (effect: any, all?: boolean) => {
- const array: any[] = all ? this.childDocs : Array.from(this._selectedArray.keys());
- array.forEach(doc => {
+ (all ? this.childDocs : this._selectedArray).forEach(doc => {
const tagDoc = doc; // Cast(doc.presentationTargetDoc, Doc, null);
switch (effect) {
case PresEffect.Left:
@@ -1216,29 +1210,17 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
@undoBatch
@action
updateEffect = (effect: any, all?: boolean) => {
- const array: any[] = all ? this.childDocs : Array.from(this._selectedArray.keys());
- array.forEach(doc => {
+ (all ? this.childDocs : this._selectedArray).forEach(doc => {
const tagDoc = doc; //Cast(doc.presentationTargetDoc, Doc, null);
+ //prettier-ignore
switch (effect) {
- case PresEffect.Bounce:
- tagDoc.presEffect = PresEffect.Bounce;
- break;
- case PresEffect.Fade:
- tagDoc.presEffect = PresEffect.Fade;
- break;
- case PresEffect.Flip:
- tagDoc.presEffect = PresEffect.Flip;
- break;
- case PresEffect.Roll:
- tagDoc.presEffect = PresEffect.Roll;
- break;
- case PresEffect.Rotate:
- tagDoc.presEffect = PresEffect.Rotate;
- break;
- case PresEffect.None:
default:
- tagDoc.presEffect = PresEffect.None;
- break;
+ case PresEffect.None: tagDoc.presEffect = PresEffect.None; break;
+ case PresEffect.Bounce: tagDoc.presEffect = PresEffect.Bounce; break;
+ case PresEffect.Fade: tagDoc.presEffect = PresEffect.Fade; break;
+ case PresEffect.Flip: tagDoc.presEffect = PresEffect.Flip; break;
+ case PresEffect.Roll: tagDoc.presEffect = PresEffect.Roll; break;
+ case PresEffect.Rotate: tagDoc.presEffect = PresEffect.Rotate; break;
}
});
};
diff --git a/src/client/views/nodes/trails/PresElementBox.tsx b/src/client/views/nodes/trails/PresElementBox.tsx
index c578f8bcf..f4b97479a 100644
--- a/src/client/views/nodes/trails/PresElementBox.tsx
+++ b/src/client/views/nodes/trails/PresElementBox.tsx
@@ -47,6 +47,13 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
@computed get presStatus() {
return this.presBox.presStatus;
}
+ @computed get selectedArray() {
+ return this.presBoxView?._selectedArray;
+ }
+ @computed get presBoxView() {
+ const vpath = this.props.docViewPath();
+ return vpath.length > 1 ? (vpath[vpath.length - 2].ComponentView as PresBox) : undefined;
+ }
@computed get presBox() {
return (this.props.DocumentView?.().props.treeViewDoc ?? this.props.ContainingCollectionDoc)!;
}
@@ -129,10 +136,9 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
<div
className="presItem-groupSlide"
onClick={e => {
- console.log('Clicked on slide with index: ', ind);
e.stopPropagation();
e.preventDefault();
- PresBox.Instance.modifierSelect(doc, this._itemRef.current!, this._dragRef.current!, !e.shiftKey && !e.ctrlKey && !e.metaKey, e.ctrlKey || e.metaKey, e.shiftKey);
+ this.presBoxView?.modifierSelect(doc, this._itemRef.current!, this._dragRef.current!, !e.shiftKey && !e.ctrlKey && !e.metaKey, e.ctrlKey || e.metaKey, e.shiftKey);
this.presExpandDocumentClick();
}}>
<div className="presItem-groupNum">{`${ind + 1}.`}</div>
@@ -181,15 +187,15 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
e.stopPropagation();
e.preventDefault();
if (element && !(e.ctrlKey || e.metaKey)) {
- if (PresBox.Instance._selectedArray.has(this.rootDoc)) {
- PresBox.Instance._selectedArray.size === 1 && PresBox.Instance.regularSelect(this.rootDoc, this._itemRef.current!, this._dragRef.current!, false, false);
+ if (this.selectedArray?.has(this.rootDoc)) {
+ this.selectedArray.size === 1 && this.presBoxView?.regularSelect(this.rootDoc, this._itemRef.current!, this._dragRef.current!, false, false);
setupMoveUpEvents(this, e, this.startDrag, emptyFunction, emptyFunction);
} else {
setupMoveUpEvents(
this,
e,
(e: PointerEvent) => {
- PresBox.Instance.regularSelect(this.rootDoc, this._itemRef.current!, this._dragRef.current!, false, false);
+ this.presBoxView?.regularSelect(this.rootDoc, this._itemRef.current!, this._dragRef.current!, false, false);
return this.startDrag(e);
},
emptyFunction,
@@ -205,8 +211,8 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
startDrag = (e: PointerEvent) => {
const miniView: boolean = this.toolbarWidth <= 100;
const activeItem = this.rootDoc;
- const dragArray = PresBox.Instance._dragArray;
- const dragData = new DragManager.DocumentDragData(PresBox.Instance.sortArray());
+ 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.props.docViewPath().lastElement()?.props.treeViewDoc;
@@ -221,7 +227,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
} else if (dragArray.length >= 1) {
const doc = document.createElement('div');
doc.className = 'presItem-multiDrag';
- doc.innerText = 'Move ' + PresBox.Instance._selectedArray.size + ' slides';
+ doc.innerText = 'Move ' + this.selectedArray?.size + ' slides';
doc.style.position = 'absolute';
doc.style.top = e.clientY + 'px';
doc.style.left = e.clientX - 50 + 'px';
@@ -283,10 +289,11 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
@undoBatch
removeItem = action((e: React.MouseEvent) => {
e.stopPropagation();
- this.props.removeDocument?.(this.rootDoc);
- if (PresBox.Instance._selectedArray.has(this.rootDoc)) {
- PresBox.Instance._selectedArray.delete(this.rootDoc);
+ if (this.indexInPres < (this.presBoxView?.itemIndex || 0)) {
+ this.presBox.itemIndex = (this.presBoxView?.itemIndex || 0) - 1;
}
+ this.props.removeDocument?.(this.rootDoc);
+ this.presBoxView?.removeFromSelectedArray(this.rootDoc);
this.removeAllRecordingInOverlay();
});
@@ -438,7 +445,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
}
@computed get mainItem() {
- const isSelected: boolean = PresBox.Instance?._selectedArray.has(this.rootDoc);
+ const isSelected: boolean = this.selectedArray?.has(this.rootDoc) ? true : false;
const toolbarWidth: number = this.toolbarWidth;
const showMore: boolean = this.toolbarWidth >= 300;
const miniView: boolean = this.toolbarWidth <= 110;
@@ -460,12 +467,12 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
onClick={e => {
e.stopPropagation();
e.preventDefault();
- PresBox.Instance.modifierSelect(this.rootDoc, this._itemRef.current!, this._dragRef.current!, !e.shiftKey && !e.ctrlKey && !e.metaKey, e.ctrlKey || e.metaKey, e.shiftKey);
+ this.presBoxView?.modifierSelect(this.rootDoc, this._itemRef.current!, this._dragRef.current!, !e.shiftKey && !e.ctrlKey && !e.metaKey, e.ctrlKey || e.metaKey, e.shiftKey);
this.showRecording(activeItem);
}}
onDoubleClick={action(e => {
this.toggleProperties();
- PresBox.Instance.regularSelect(this.rootDoc, this._itemRef.current!, this._dragRef.current!, true);
+ this.presBoxView?.regularSelect(this.rootDoc, this._itemRef.current!, this._dragRef.current!, true);
})}
onPointerOver={this.onPointerOver}
onPointerLeave={this.onPointerLeave}
@@ -539,21 +546,29 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
</Tooltip>
)}
- {/* {this.indexInPres === 0 ? (null) : <Tooltip title={<><div className="dash-tooltip">{activeItem.groupWithUp ? "Ungroup" : "Group with up"}</div></>}>
- <div className="slideButton"
- onClick={() => activeItem.groupWithUp = !activeItem.groupWithUp}
- style={{
- zIndex: 1000 - this.indexInPres,
- fontWeight: 700,
- backgroundColor: activeItem.groupWithUp ? presColorBool ? presBoxColor : Colors.MEDIUM_BLUE : undefined,
- height: activeItem.groupWithUp ? 53 : 18,
- transform: activeItem.groupWithUp ? "translate(0, -17px)" : undefined
- }}>
- <div style={{ transform: activeItem.groupWithUp ? "rotate(180deg) translate(0, -17.5px)" : "rotate(0deg)" }}>
- <FontAwesomeIcon icon={"arrow-up"} onPointerDown={e => e.stopPropagation()} />
- </div>
- </div>
- </Tooltip>} */}
+ {this.indexInPres === 0 ? null : (
+ <Tooltip
+ title={
+ <>
+ <div className="dash-tooltip">{activeItem.groupWithUp ? 'Ungroup' : 'Group with up'}</div>
+ </>
+ }>
+ <div
+ className="slideButton"
+ onClick={() => (activeItem.groupWithUp = !activeItem.groupWithUp)}
+ style={{
+ zIndex: 1000 - this.indexInPres,
+ fontWeight: 700,
+ backgroundColor: activeItem.groupWithUp ? (presColorBool ? presBoxColor : Colors.MEDIUM_BLUE) : undefined,
+ height: activeItem.groupWithUp ? 53 : 18,
+ transform: activeItem.groupWithUp ? 'translate(0, -17px)' : undefined,
+ }}>
+ <div style={{ transform: activeItem.groupWithUp ? 'rotate(180deg) translate(0, -17.5px)' : 'rotate(0deg)' }}>
+ <FontAwesomeIcon icon={'arrow-up'} onPointerDown={e => e.stopPropagation()} />
+ </div>
+ </div>
+ </Tooltip>
+ )}
<Tooltip
title={
<>
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2026-01-22 20:07:06 +0000