diff options
Diffstat (limited to 'src/client/views/presentationview/PresElementBox.tsx')
| -rw-r--r-- | src/client/views/presentationview/PresElementBox.tsx | 162 |
1 files changed, 82 insertions, 80 deletions
diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx index aea00f812..8017468c3 100644 --- a/src/client/views/presentationview/PresElementBox.tsx +++ b/src/client/views/presentationview/PresElementBox.tsx @@ -1,5 +1,5 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { action, computed, IReactionDisposer, reaction, runInAction, observable } from "mobx"; +import { action, computed, IReactionDisposer, reaction, runInAction, observable, trace } from "mobx"; import { observer } from "mobx-react"; import { Doc, DataSym, DocListCast } from "../../../fields/Doc"; import { documentSchema } from '../../../fields/documentSchemas'; @@ -20,8 +20,7 @@ import { DragManager } from "../../util/DragManager"; import { CurrentUserUtils } from "../../util/CurrentUserUtils"; import { undoBatch } from "../../util/UndoManager"; import { EditableView } from "../EditableView"; -import { DocUtils } from "../../documents/Documents"; -import { DateField } from "../../../fields/DateField"; +import { DocumentManager } from "../../util/DocumentManager"; export const presSchema = createSchema({ presentationTargetDoc: Doc, @@ -142,16 +141,14 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc e.stopPropagation(); e.preventDefault(); if (element && !(e.ctrlKey || e.metaKey)) { - if (PresBox.Instance._eleArray.includes(this._itemRef.current!)) { + if (PresBox.Instance._selectedArray.has(this.rootDoc)) { + PresBox.Instance._selectedArray.size === 1 && PresBox.Instance.regularSelect(this.rootDoc, this._itemRef.current!, this._dragRef.current!, false); setupMoveUpEvents(this, e, this.startDrag, emptyFunction, emptyFunction); } else { - PresBox.Instance._selectedArray = []; - PresBox.Instance._selectedArray.push(this.rootDoc); - PresBox.Instance._eleArray = []; - PresBox.Instance._eleArray.push(this._itemRef.current!); - PresBox.Instance._dragArray = []; - PresBox.Instance._dragArray.push(this._dragRef.current!); - setupMoveUpEvents(this, e, this.startDrag, emptyFunction, emptyFunction); + setupMoveUpEvents(this, e, ((e: PointerEvent) => { + PresBox.Instance.regularSelect(this.rootDoc, this._itemRef.current!, this._dragRef.current!, false); + return this.startDrag(e); + }), emptyFunction, emptyFunction); } } } @@ -161,26 +158,30 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc e.preventDefault(); } - @action - stopDrag = (e: PointerEvent) => { - this._dragging = false; - e.stopPropagation(); - e.preventDefault(); - } - - startDrag = (e: PointerEvent, down: number[], delta: number[]) => { + startDrag = (e: PointerEvent) => { + const miniView: boolean = this.toolbarWidth <= 100; const activeItem = this.rootDoc; - const dragData = new DragManager.DocumentDragData(PresBox.Instance.sortArray().map(doc => doc)); + const dragArray = PresBox.Instance._dragArray; + const dragData = new DragManager.DocumentDragData(PresBox.Instance.sortArray()); const dragItem: HTMLElement[] = []; - PresBox.Instance._dragArray.map(ele => { - const doc = ele; - doc.className = "presItem-slide"; + if (dragArray.length === 1) { + const doc = dragArray[0]; + doc.className = miniView ? "presItem-miniSlide" : "presItem-slide"; + dragItem.push(doc); + } else if (dragArray.length >= 1) { + const doc = document.createElement('div'); + doc.className = "presItem-multiDrag"; + doc.innerText = "Move " + PresBox.Instance._selectedArray.size + " slides"; + doc.style.position = 'absolute'; + doc.style.top = (e.clientY) + 'px'; + doc.style.left = (e.clientX - 50) + 'px'; dragItem.push(doc); - }); - const dropEvent = () => runInAction(() => this._dragging = false); + } + + // const dropEvent = () => runInAction(() => this._dragging = false); if (activeItem) { - DragManager.StartDocumentDrag(dragItem.map(ele => ele), dragData, e.clientX, e.clientY, undefined, dropEvent); - runInAction(() => this._dragging = true); + DragManager.StartDocumentDrag(dragItem.map(ele => ele), dragData, e.clientX, e.clientY, undefined); + // runInAction(() => this._dragging = true); return true; } return false; @@ -193,7 +194,11 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc onPointerMove = (e: PointerEvent) => { const slide = this._itemRef.current!; - if (slide && DragManager.docsBeingDragged.length > 0) { + let dragIsPresItem: boolean = DragManager.docsBeingDragged.length > 0 ? true : false; + for (const doc of DragManager.docsBeingDragged) { + if (!doc.presentationTargetDoc) dragIsPresItem = false; + } + if (slide && dragIsPresItem) { const rect = slide.getBoundingClientRect(); const y = e.clientY - rect.top; //y position within the element. const height = slide.clientHeight; @@ -225,26 +230,19 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc @undoBatch removeItem = action((e: React.MouseEvent) => { this.props.removeDocument?.(this.rootDoc); - if (PresBox.Instance._selectedArray.includes(this.rootDoc)) { - PresBox.Instance._selectedArray.splice(PresBox.Instance._selectedArray.indexOf(this.rootDoc), 1); + if (PresBox.Instance._selectedArray.has(this.rootDoc)) { + PresBox.Instance._selectedArray.delete(this.rootDoc); } e.stopPropagation(); }); + @undoBatch @action onSetValue = (value: string) => { - this.rootDoc.title = value; + this.rootDoc.title = !value.trim().length ? "-untitled-" : value; return true; } - @action - clearArrays = () => { - PresBox.Instance._eleArray = []; - PresBox.Instance._eleArray.push(this._itemRef.current!); - PresBox.Instance._dragArray = []; - PresBox.Instance._dragArray.push(this._dragRef.current!); - } - /** * Method called for updating the view of the currently selected document * @@ -254,10 +252,11 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc @undoBatch @action updateView = (targetDoc: Doc, activeItem: Doc) => { - console.log(targetDoc.type); if (targetDoc.type === DocumentType.PDF || targetDoc.type === DocumentType.WEB || targetDoc.type === DocumentType.RTF) { const scroll = targetDoc._scrollTop; activeItem.presPinViewScroll = scroll; + } else if (targetDoc.type === DocumentType.VID) { + activeItem.presPinTimecode = targetDoc._currentTimecode; } else if (targetDoc.type === DocumentType.COMPARISON) { const clipWidth = targetDoc._clipWidth; activeItem.presPinClipWidth = clipWidth; @@ -271,11 +270,20 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc } } + @computed + get toolbarWidth(): number { + const presBoxDocView = DocumentManager.Instance.getDocumentView(this.presBox); + let width: number = NumCast(this.presBox._width); + if (presBoxDocView) width = presBoxDocView.props.PanelWidth(); + return width; + } + @computed get mainItem() { - const isSelected: boolean = PresBox.Instance._selectedArray.includes(this.rootDoc); - const toolbarWidth: number = PresBox.Instance.toolbarWidth; - const showMore: boolean = PresBox.Instance.toolbarWidth >= 300; - const targetDoc: Doc = Cast(this.rootDoc.presentationTargetDoc, Doc, null); + const isSelected: boolean = PresBox.Instance._selectedArray.has(this.rootDoc); + const toolbarWidth: number = this.toolbarWidth; + const showMore: boolean = this.toolbarWidth >= 300; + const miniView: boolean = this.toolbarWidth <= 100; + const targetDoc: Doc = this.targetDoc; const activeItem: Doc = this.rootDoc; return ( <div className={`presItem-container`} key={this.props.Document[Id] + this.indexInPres} @@ -284,44 +292,34 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc onClick={e => { e.stopPropagation(); e.preventDefault(); - // Command/ control click - if (e.ctrlKey || e.metaKey) { - PresBox.Instance.multiSelect(this.rootDoc, this._itemRef.current!, this._dragRef.current!); - // Shift click - } else if (e.shiftKey) { - PresBox.Instance.shiftSelect(this.rootDoc, this._itemRef.current!, this._dragRef.current!); - // Regular click - } else { - this.props.focus(this.rootDoc); - this.clearArrays(); - } + PresBox.Instance.modifierSelect(this.rootDoc, this._itemRef.current!, this._dragRef.current!, !e.shiftKey && !e.ctrlKey && !e.metaKey, e.ctrlKey || e.metaKey, e.shiftKey); }} - onDoubleClick={e => { + onDoubleClick={action(e => { this.toggleProperties(); - this.props.focus(this.rootDoc); - this.clearArrays(); - }} + PresBox.Instance.regularSelect(this.rootDoc, this._itemRef.current!, this._dragRef.current!, true); + })} onPointerOver={this.onPointerOver} onPointerLeave={this.onPointerLeave} onPointerDown={this.headerDown} onPointerUp={this.headerUp} > - <div className="presItem-number"> - {`${this.indexInPres + 1}.`} - </div> - <div ref={this._dragRef} className={`presItem-slide ${isSelected ? "active" : ""}`}> - <div className="presItem-name" style={{ maxWidth: showMore ? (toolbarWidth - 175) : toolbarWidth - 85 }}> - {isSelected ? <EditableView + {miniView ? + <div className={`presItem-miniSlide ${isSelected ? "active" : ""}`} ref={miniView ? this._dragRef : null}> + {`${this.indexInPres + 1}.`} + </div> + : + <div className="presItem-number"> + {`${this.indexInPres + 1}.`} + </div>} + {miniView ? (null) : <div ref={miniView ? null : this._dragRef} className={`presItem-slide ${isSelected ? "active" : ""}`}> + <div className="presItem-name" style={{ maxWidth: showMore ? (toolbarWidth - 175) : toolbarWidth - 85, cursor: isSelected ? 'text' : 'grab' }}> + <EditableView ref={this._titleRef} - contents={this.rootDoc.title} - GetValue={() => StrCast(this.rootDoc.title)} - SetValue={action((value: string) => { - this.onSetValue(value); - return true; - })} - /> : - this.rootDoc.title - } + editing={!isSelected ? false : undefined} + contents={activeItem.title} + 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> @@ -331,6 +329,13 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc onClick={() => this.updateView(targetDoc, activeItem)} style={{ fontWeight: 700, display: activeItem.presPinView ? "flex" : "none" }}>V</div> </Tooltip> + {/* <Tooltip title={<><div className="dash-tooltip">{"Group with up"}</div></>}> + <div className="slideButton" + onClick={() => activeItem.groupWithUp = !activeItem.groupWithUp} + style={{ fontWeight: 700, display: activeItem.presPinView ? "flex" : "none" }}> + <FontAwesomeIcon icon={""} onPointerDown={e => e.stopPropagation()} /> + </div> + </Tooltip> */} <Tooltip title={<><div className="dash-tooltip">{this.rootDoc.presExpandInlineButton ? "Minimize" : "Expand"}</div></>}><div className={"slideButton"} onClick={e => { e.stopPropagation(); this.presExpandDocumentClick(); }}> <FontAwesomeIcon icon={this.rootDoc.presExpandInlineButton ? "eye-slash" : "eye"} onPointerDown={e => e.stopPropagation()} /> </div></Tooltip> @@ -340,16 +345,13 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc <FontAwesomeIcon icon={"trash"} onPointerDown={e => e.stopPropagation()} /> </div></Tooltip> </div> + <div className="presItem-docName" style={{ maxWidth: showMore ? (toolbarWidth - 175) : toolbarWidth - 85 }}>{activeItem.presPinView ? (<><i>View of </i> {targetDoc.title}</>) : targetDoc.title}</div> {this.renderEmbeddedInline} - </div> + </div>} </div >); } render() { - let item = null; - if (!(this.rootDoc instanceof Doc) || this.targetDoc instanceof Promise) item = null; - else item = this.mainItem; - - return item; + return !(this.rootDoc instanceof Doc) || this.targetDoc instanceof Promise ? (null) : this.mainItem; } }
\ No newline at end of file |