diff options
3 files changed, 103 insertions, 53 deletions
diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx index d8953a4ae..79a27b4e9 100644 --- a/src/client/views/presentationview/PresentationElement.tsx +++ b/src/client/views/presentationview/PresentationElement.tsx @@ -12,6 +12,8 @@ import { faFile as fileSolid, faFileDownload, faLocationArrow, faArrowUp, faSear import { faFile as fileRegular } from '@fortawesome/free-regular-svg-icons'; import { List } from "../../../new_fields/List"; import { listSpec } from "../../../new_fields/Schema"; +import { DragManager, SetupDrag, dropActionType } from "../../util/DragManager"; +import { SelectionManager } from "../../util/SelectionManager"; library.add(faArrowUp); @@ -31,7 +33,8 @@ interface PresentationElementProps { presStatus: boolean; presButtonBackUp: Doc; presGroupBackUp: Doc; - setHeader: (header: React.RefObject<HTMLDivElement>) => void; + removeDocByRef(doc: Doc): boolean; + } //enum for the all kinds of buttons a doc in presentation can have @@ -53,15 +56,27 @@ export enum buttonIndex { export default class PresentationElement extends React.Component<PresentationElementProps> { @observable private selectedButtons: boolean[]; - private headerTest?: React.RefObject<HTMLDivElement> = React.createRef(); + private header?: HTMLDivElement | undefined; + private listdropDisposer?: DragManager.DragDropDisposer; + private presElRef: React.RefObject<HTMLDivElement>; + + constructor(props: PresentationElementProps) { super(props); this.selectedButtons = new Array(6); + + this.presElRef = React.createRef(); } + + componentWillUnmount() { + this.listdropDisposer && this.listdropDisposer(); + } + + /** * Getter to get the status of the buttons. */ @@ -74,6 +89,10 @@ export default class PresentationElement extends React.Component<PresentationEle async componentDidMount() { this.receiveButtonBackUp(); + if (this.presElRef.current) { + this.header = this.presElRef.current; + this.createListDropTarget(this.presElRef.current); + } } //Lifecycle function that makes sure button BackUp is received when not re-mounted bu re-rendered. @@ -358,6 +377,70 @@ export default class PresentationElement extends React.Component<PresentationEle } + protected createListDropTarget = (ele: HTMLDivElement) => { + this.listdropDisposer && this.listdropDisposer(); + if (ele) { + this.listdropDisposer = DragManager.MakeDropTarget(ele, { handlers: { drop: this.listDrop.bind(this) } }); + } + } + + ScreenToLocalListTransform = (xCord: number, yCord: number) => { + let scrollLeft = window.pageXOffset || document.documentElement.scrollLeft; + let scrollTop = window.pageYOffset || document.documentElement.scrollTop; + return [yCord + scrollTop, xCord + scrollLeft]; + } + + + listDrop = (e: Event, de: DragManager.DropEvent) => { + let x = this.ScreenToLocalListTransform(de.x, de.y); + let rect = this.header!.getBoundingClientRect(); + let bounds = this.ScreenToLocalListTransform(rect.left, rect.top + rect.height / 2); + let before = x[1] < bounds[1]; + if (de.data instanceof DragManager.DocumentDragData) { + let addDoc = (doc: Doc) => Doc.AddDocToList(this.props.mainDocument, "data", doc, this.props.document, before); + e.stopPropagation(); + //where does treeViewId come from + let movedDocs = (de.data.options === this.props.mainDocument[Id] ? de.data.draggedDocuments : de.data.droppedDocuments); + return (de.data.dropAction || de.data.userDropAction) ? + de.data.droppedDocuments.reduce((added: boolean, d: Doc) => Doc.AddDocToList(this.props.mainDocument, "data", d, this.props.document, before) || added, false) + : (de.data.moveDocument) ? + movedDocs.reduce((added: boolean, d: Doc) => de.data.moveDocument(d, this.props.document, addDoc) || added, false) + : de.data.droppedDocuments.reduce((added: boolean, d: Doc) => Doc.AddDocToList(this.props.mainDocument, "data", d, this.props.document, before), false); + } + return false; + } + + onPointerEnter = (e: React.PointerEvent): void => { + //this.props.document.libraryBrush = true; + if (e.buttons === 1 && SelectionManager.GetIsDragging()) { + //this.header!.className = "treeViewItem-header"; + document.addEventListener("pointermove", this.onDragMove, true); + } + } + onPointerLeave = (e: React.PointerEvent): void => { + this.props.document.libraryBrush = false; + //this.header!.className = "treeViewItem-header"; + document.removeEventListener("pointermove", this.onDragMove, true); + } + + onDragMove = (e: PointerEvent): void => { + this.props.document.libraryBrush = false; + let x = this.ScreenToLocalListTransform(e.clientX, e.clientY); + let rect = this.header!.getBoundingClientRect(); + let bounds = this.ScreenToLocalListTransform(rect.left, rect.top + rect.height / 2); + let before = x[1] < bounds[1]; + this.header!.className = "treeViewItem-header"; + // if (before) this.header!.className += " treeViewItem-header-above"; + // else if (!before) this.header!.className += " treeViewItem-header-below"; + e.stopPropagation(); + } + + @action + move: DragManager.MoveFunction = (doc: Doc, target: Doc, addDoc) => { + return this.props.document !== target && this.props.removeDocByRef(doc) && addDoc(doc); + } + + render() { let p = this.props; @@ -373,10 +456,13 @@ export default class PresentationElement extends React.Component<PresentationEle } let onEnter = (e: React.PointerEvent) => { p.document.libraryBrush = true; }; let onLeave = (e: React.PointerEvent) => { p.document.libraryBrush = false; }; + let dropAction = StrCast(this.props.document.dropAction) as dropActionType; + let onItemDown = SetupDrag(this.presElRef, () => p.document, this.move, dropAction, this.props.mainDocument[Id], true); return ( <div className={className} key={p.document[Id] + p.index} - ref={(e) => this.props.setHeader(e)} + ref={this.presElRef} onPointerEnter={onEnter} onPointerLeave={onLeave} + onPointerDown={onItemDown} style={{ outlineColor: "maroon", outlineStyle: "dashed", diff --git a/src/client/views/presentationview/PresentationList.tsx b/src/client/views/presentationview/PresentationList.tsx index f14602cb3..760cc80f4 100644 --- a/src/client/views/presentationview/PresentationList.tsx +++ b/src/client/views/presentationview/PresentationList.tsx @@ -24,6 +24,8 @@ interface PresListProps { presStatus: boolean; presButtonBackUp: Doc; presGroupBackUp: Doc; + removeDocByRef(doc: Doc): boolean; + } @@ -33,17 +35,6 @@ interface PresListProps { */ export default class PresentationViewList extends React.Component<PresListProps> { - private listdropDisposer?: DragManager.DragDropDisposer; - private header?: React.RefObject<HTMLDivElement> = React.createRef(); - private listContainer: HTMLDivElement | undefined; - - - componentWillUnmount() { - this.listdropDisposer && this.listdropDisposer(); - } - - - /** * Method that initializes presentation ids for the * docs that is in the presentation, when presentation list @@ -88,50 +79,13 @@ export default class PresentationViewList extends React.Component<PresListProps> }); } - protected createListDropTarget = (ele: HTMLDivElement) => { - this.listdropDisposer && this.listdropDisposer(); - if (ele) { - this.listdropDisposer = DragManager.MakeDropTarget(ele, { handlers: { drop: this.listDrop.bind(this) } }); - } - } - - listDrop = (e: Event, de: DragManager.DropEvent) => { - let x = this.ScreenToLocalListTransform(de.x, de.y); - let rect = this.header!.current!.getBoundingClientRect(); - let bounds = this.ScreenToLocalListTransform(rect.left, rect.top + rect.height / 2); - let before = x[1] < bounds[1]; - if (de.data instanceof DragManager.DocumentDragData) { - let addDoc = (doc: Doc) => doc.AddDocToList(doc, "data", this.resolvedDataDoc, before); - e.stopPropagation(); - //where does treeViewId come from - let movedDocs = (de.data.options === this.props.mainDocument[Id] ? de.data.draggedDocuments : de.data.droppedDocuments); - return (de.data.dropAction || de.data.userDropAction) ? - de.data.droppedDocuments.reduce((added: boolean, d) => this.props.addDocument(d, this.resolvedDataDoc, before) || added, false) - : (de.data.moveDocument) ? - movedDocs.reduce((added: boolean, d) => de.data.moveDocument(d, this.resolvedDataDoc, addDoc) || added, false) - : de.data.droppedDocuments.reduce((added: boolean, d) => this.props.addDocument(d, this.resolvedDataDoc, before), false); - } - return false; - } - - ScreenToLocalListTransform = (xCord: number, yCord: number) => { - let rect = this.listContainer!.getBoundingClientRect(), - scrollLeft = window.pageXOffset || document.documentElement.scrollLeft, - scrollTop = window.pageYOffset || document.documentElement.scrollTop; - return [rect.top + scrollTop, rect.left + scrollLeft]; - } - - render() { const children = DocListCast(this.props.mainDocument.data); this.initializeGroupIds(children); this.initializeScaleViews(children); this.props.setChildrenDocs(children); return ( - <div className="presentationView-listCont" ref={(e) => { - this.createListDropTarget(e!); - this.listContainer = e!; - }}> + <div className="presentationView-listCont" > {children.map((doc: Doc, index: number) => <PresentationElement ref={(e) => { if (e) { this.props.presElementsMappings.set(doc, e); } }} @@ -146,7 +100,7 @@ export default class PresentationViewList extends React.Component<PresListProps> presStatus={this.props.presStatus} presButtonBackUp={this.props.presButtonBackUp} presGroupBackUp={this.props.presGroupBackUp} - setHeader={(header: React.RefObject<HTMLDivElement>) => this.header = header} + removeDocByRef={this.props.removeDocByRef} /> )} </div> diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx index 20d0e113a..cdd059cab 100644 --- a/src/client/views/presentationview/PresentationView.tsx +++ b/src/client/views/presentationview/PresentationView.tsx @@ -447,6 +447,15 @@ export class PresentationView extends React.Component<PresViewProps> { } } + public removeDocByRef = (doc: Doc) => { + let indexOfDoc = this.childrenDocs.indexOf(doc); + this.RemoveDoc(indexOfDoc); + if (indexOfDoc !== - 1) { + return true; + } + return false; + } + //The function that is called when a document is clicked or reached through next or back. //it'll also execute the necessary actions if presentation is playing. @action @@ -786,6 +795,7 @@ export class PresentationView extends React.Component<PresViewProps> { presStatus={this.presStatus} presButtonBackUp={this.presButtonBackUp} presGroupBackUp={this.presGroupBackUp} + removeDocByRef={this.removeDocByRef} /> </div> ); |