From bcd8589f9319221dceb23f5c1aad35fd6373194b Mon Sep 17 00:00:00 2001 From: Mohammad Amoush Date: Mon, 1 Jul 2019 17:23:30 -0400 Subject: Still trying to figure out DragManager --- .../views/presentationview/PresentationElement.tsx | 6 +- .../views/presentationview/PresentationList.tsx | 87 +++++++++++++++++----- 2 files changed, 73 insertions(+), 20 deletions(-) (limited to 'src') diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx index 4afc0210f..d8953a4ae 100644 --- a/src/client/views/presentationview/PresentationElement.tsx +++ b/src/client/views/presentationview/PresentationElement.tsx @@ -31,8 +31,7 @@ interface PresentationElementProps { presStatus: boolean; presButtonBackUp: Doc; presGroupBackUp: Doc; - - + setHeader: (header: React.RefObject) => void; } //enum for the all kinds of buttons a doc in presentation can have @@ -54,6 +53,8 @@ export enum buttonIndex { export default class PresentationElement extends React.Component { @observable private selectedButtons: boolean[]; + private headerTest?: React.RefObject = React.createRef(); + constructor(props: PresentationElementProps) { @@ -374,6 +375,7 @@ export default class PresentationElement extends React.Component { p.document.libraryBrush = false; }; return (
this.props.setHeader(e)} onPointerEnter={onEnter} onPointerLeave={onLeave} style={{ outlineColor: "maroon", diff --git a/src/client/views/presentationview/PresentationList.tsx b/src/client/views/presentationview/PresentationList.tsx index 7abd3e366..f14602cb3 100644 --- a/src/client/views/presentationview/PresentationList.tsx +++ b/src/client/views/presentationview/PresentationList.tsx @@ -7,6 +7,9 @@ import { Doc, DocListCast, DocListCastAsync } from "../../../new_fields/Doc"; import { NumCast, StrCast } from "../../../new_fields/Types"; import { Id } from "../../../new_fields/FieldSymbols"; import PresentationElement, { buttonIndex } from "./PresentationElement"; +import { DragManager } from "../../util/DragManager"; +import { CollectionDockingView } from "../collections/CollectionDockingView"; +import "../../../new_fields/Doc"; @@ -30,6 +33,17 @@ interface PresListProps { */ export default class PresentationViewList extends React.Component { + private listdropDisposer?: DragManager.DragDropDisposer; + private header?: React.RefObject = 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 @@ -74,30 +88,67 @@ export default class PresentationViewList extends React.Component }); } + 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 ( - -
- {children.map((doc: Doc, index: number) => - { if (e) { this.props.presElementsMappings.set(doc, e); } }} - key={doc[Id]} - mainDocument={this.props.mainDocument} - document={doc} - index={index} - deleteDocument={this.props.deleteDocument} - gotoDocument={this.props.gotoDocument} - groupMappings={this.props.groupMappings} - allListElements={children} - presStatus={this.props.presStatus} - presButtonBackUp={this.props.presButtonBackUp} - presGroupBackUp={this.props.presGroupBackUp} - /> - )} +
{ + this.createListDropTarget(e!); + this.listContainer = e!; + }}> + {children.map((doc: Doc, index: number) => + { if (e) { this.props.presElementsMappings.set(doc, e); } }} + key={doc[Id]} + mainDocument={this.props.mainDocument} + document={doc} + index={index} + deleteDocument={this.props.deleteDocument} + gotoDocument={this.props.gotoDocument} + groupMappings={this.props.groupMappings} + allListElements={children} + presStatus={this.props.presStatus} + presButtonBackUp={this.props.presButtonBackUp} + presGroupBackUp={this.props.presGroupBackUp} + setHeader={(header: React.RefObject) => this.header = header} + /> + )}
); } -- cgit v1.2.3-70-g09d2 From 66e4851757894dcb43fb9baada0fa21fbd43164a Mon Sep 17 00:00:00 2001 From: Mohammad Amoush Date: Tue, 2 Jul 2019 16:58:43 -0400 Subject: Some dragging implemented. Like dragging from pres to workspace --- .../views/presentationview/PresentationElement.tsx | 92 +++++++++++++++++++++- .../views/presentationview/PresentationList.tsx | 54 +------------ .../views/presentationview/PresentationView.tsx | 10 +++ 3 files changed, 103 insertions(+), 53 deletions(-) (limited to 'src') 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) => 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 { @observable private selectedButtons: boolean[]; - private headerTest?: React.RefObject = React.createRef(); + private header?: HTMLDivElement | undefined; + private listdropDisposer?: DragManager.DragDropDisposer; + private presElRef: React.RefObject; + + 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 { + 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 { 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 (
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 { - private listdropDisposer?: DragManager.DragDropDisposer; - private header?: React.RefObject = 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 }); } - 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 ( -
{ - this.createListDropTarget(e!); - this.listContainer = e!; - }}> +
{children.map((doc: Doc, index: number) => { if (e) { this.props.presElementsMappings.set(doc, e); } }} @@ -146,7 +100,7 @@ export default class PresentationViewList extends React.Component presStatus={this.props.presStatus} presButtonBackUp={this.props.presButtonBackUp} presGroupBackUp={this.props.presGroupBackUp} - setHeader={(header: React.RefObject) => this.header = header} + removeDocByRef={this.props.removeDocByRef} /> )}
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 { } } + 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 { presStatus={this.presStatus} presButtonBackUp={this.presButtonBackUp} presGroupBackUp={this.presGroupBackUp} + removeDocByRef={this.removeDocByRef} />
); -- cgit v1.2.3-70-g09d2 From 118ca303bb18648451fe9c349c79594833d95001 Mon Sep 17 00:00:00 2001 From: Mohammad Amoush Date: Wed, 3 Jul 2019 18:30:09 -0400 Subject: Reordering Done, Back-up protecting should be added --- .../views/presentationview/PresentationElement.tsx | 51 +++++++++++++++++----- .../views/presentationview/PresentationView.scss | 8 ++++ 2 files changed, 48 insertions(+), 11 deletions(-) (limited to 'src') diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx index 79a27b4e9..23031f02c 100644 --- a/src/client/views/presentationview/PresentationElement.tsx +++ b/src/client/views/presentationview/PresentationElement.tsx @@ -98,6 +98,10 @@ export default class PresentationElement extends React.Component { @@ -385,9 +389,9 @@ export default class PresentationElement extends React.Component { - let scrollLeft = window.pageXOffset || document.documentElement.scrollLeft; - let scrollTop = window.pageYOffset || document.documentElement.scrollTop; - return [yCord + scrollTop, xCord + scrollLeft]; + // let scrollLeft = window.pageXOffset || document.documentElement.scrollLeft; + // let scrollTop = window.pageYOffset || document.documentElement.scrollTop; + return [xCord, yCord]; } @@ -401,25 +405,46 @@ export default class PresentationElement extends React.Component 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); } + document.removeEventListener("pointermove", this.onDragMove, true); + return false; } onPointerEnter = (e: React.PointerEvent): void => { - //this.props.document.libraryBrush = true; + this.props.document.libraryBrush = true; if (e.buttons === 1 && SelectionManager.GetIsDragging()) { - //this.header!.className = "treeViewItem-header"; + let selected = NumCast(this.props.mainDocument.selectedDoc, 0); + + this.header!.className = "presentationView-item"; + + + if (selected === this.props.index) { + //this doc is selected + this.header!.className = "presentationView-item presentationView-selected"; + } document.addEventListener("pointermove", this.onDragMove, true); } } onPointerLeave = (e: React.PointerEvent): void => { this.props.document.libraryBrush = false; - //this.header!.className = "treeViewItem-header"; + //to get currently selected presentation doc + let selected = NumCast(this.props.mainDocument.selectedDoc, 0); + + this.header!.className = "presentationView-item"; + + + if (selected === this.props.index) { + //this doc is selected + this.header!.className = "presentationView-item presentationView-selected"; + + } document.removeEventListener("pointermove", this.onDragMove, true); } @@ -429,9 +454,13 @@ export default class PresentationElement extends React.Component Date: Fri, 5 Jul 2019 15:41:17 -0400 Subject: Reodering mostly done. Refactored button backUps, and wrote function to update groups. Gotta find where to call it! --- .../views/presentationview/PresentationElement.tsx | 74 ++++++++++++++++++---- .../views/presentationview/PresentationView.tsx | 12 +++- 2 files changed, 73 insertions(+), 13 deletions(-) (limited to 'src') diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx index 23031f02c..656ec62a0 100644 --- a/src/client/views/presentationview/PresentationElement.tsx +++ b/src/client/views/presentationview/PresentationElement.tsx @@ -14,6 +14,7 @@ import { List } from "../../../new_fields/List"; import { listSpec } from "../../../new_fields/Schema"; import { DragManager, SetupDrag, dropActionType } from "../../util/DragManager"; import { SelectionManager } from "../../util/SelectionManager"; +import { indexOf } from "typescript-collections/dist/lib/arrays"; library.add(faArrowUp); @@ -59,6 +60,7 @@ export default class PresentationElement extends React.Component; + private backUpDoc: Doc | undefined; @@ -97,7 +99,7 @@ export default class PresentationElement extends React.Component(); } + + let foundDoc: boolean = false; + //if this is the first time this doc mounts, push a doc for it to store - if (castedList.length <= this.props.index) { + await castedList.forEach(async (doc) => { + let curDoc = await doc; + let curDocId = StrCast(curDoc.docId); + if (curDocId === this.props.document[Id]) { + let selectedButtonOfDoc = Cast(curDoc.selectedButtons, listSpec("boolean"), null); + if (selectedButtonOfDoc !== undefined) { + runInAction(() => this.selectedButtons = selectedButtonOfDoc); + foundDoc = true; + this.backUpDoc = curDoc; + return; + } + } + }); + + if (!foundDoc) { let newDoc = new Doc(); let defaultBooleanArray: boolean[] = new Array(6); newDoc.selectedButtons = new List(defaultBooleanArray); + newDoc.docId = this.props.document[Id]; castedList.push(newDoc); - //otherwise update the selected buttons depending on storage. - } else { - let curDoc: Doc = await castedList[this.props.index]; - let selectedButtonOfDoc = Cast(curDoc.selectedButtons, listSpec("boolean"), null); - if (selectedButtonOfDoc !== undefined) { - runInAction(() => this.selectedButtons = selectedButtonOfDoc); - } + this.backUpDoc = newDoc; } + // if (castedList.length <= this.props.index) { + // let newDoc = new Doc(); + // let defaultBooleanArray: boolean[] = new Array(6); + // newDoc.selectedButtons = new List(defaultBooleanArray); + // castedList.push(newDoc); + // //otherwise update the selected buttons depending on storage. + // } else { + // let curDoc: Doc = await castedList[this.props.index]; + // let selectedButtonOfDoc = Cast(curDoc.selectedButtons, listSpec("boolean"), null); + // if (selectedButtonOfDoc !== undefined) { + // runInAction(() => this.selectedButtons = selectedButtonOfDoc); + // } + // } + } /** @@ -269,9 +297,18 @@ export default class PresentationElement extends React.Component { - let castedList = (await DocListCastAsync(this.props.presButtonBackUp.selectedButtonDocs))!; - castedList[this.props.index].selectedButtons = new List(this.selectedButtons); - + // let castedList = (await DocListCastAsync(this.props.presButtonBackUp.selectedButtonDocs))!; + // // let hasBackupDoc: boolean = false; + // castedList.forEach((doc: Doc) => { + // let docId = StrCast(doc.docId); + // if (docId === this.props.document[Id]) { + // doc.selectedButtons = new List(this.selectedButtons); + // } + // }); + // castedList[this.props.index].selectedButtons = new List(this.selectedButtons); + if (this.backUpDoc) { + this.backUpDoc.selectedButtons = new List(this.selectedButtons); + } } /** @@ -417,6 +454,19 @@ export default class PresentationElement extends React.Component { + let p = this.props; + let curDocGuid = StrCast(p.document.presentId, null); + if (curDocGuid) { + if (p.groupMappings.has(curDocGuid)) { + let groupArray = this.props.groupMappings.get(curDocGuid)!; + groupArray.splice(groupArray.indexOf(p.document), 1); + } + } + + this.onGroupClick(p.document, p.index, true); + } + onPointerEnter = (e: React.PointerEvent): void => { this.props.document.libraryBrush = true; if (e.buttons === 1 && SelectionManager.GetIsDragging()) { diff --git a/src/client/views/presentationview/PresentationView.tsx b/src/client/views/presentationview/PresentationView.tsx index cdd059cab..ba248a8aa 100644 --- a/src/client/views/presentationview/PresentationView.tsx +++ b/src/client/views/presentationview/PresentationView.tsx @@ -421,7 +421,17 @@ export class PresentationView extends React.Component { //removing it from the backUp of selected Buttons let castedList = Cast(this.presButtonBackUp.selectedButtonDocs, listSpec(Doc)); if (castedList) { - castedList.splice(index, 1); + castedList.forEach(async (doc, indexOfDoc) => { + let curDoc = await doc; + let curDocId = StrCast(curDoc.docId); + if (curDocId === removedDoc[Id]) { + if (castedList) { + castedList.splice(indexOfDoc, 1); + return; + } + } + }); + } //removing it from the backup of groups -- cgit v1.2.3-70-g09d2 From edf530d1524cc1896ceeb0289f946ee31b16a938 Mon Sep 17 00:00:00 2001 From: Mohammad Amoush Date: Fri, 5 Jul 2019 18:52:31 -0400 Subject: Some factorization and group building in drop fixed --- .../views/presentationview/PresentationElement.tsx | 61 +++++++++++++++++----- .../views/presentationview/PresentationList.tsx | 4 +- .../views/presentationview/PresentationView.tsx | 7 ++- 3 files changed, 55 insertions(+), 17 deletions(-) (limited to 'src') diff --git a/src/client/views/presentationview/PresentationElement.tsx b/src/client/views/presentationview/PresentationElement.tsx index 656ec62a0..fcddb2ad4 100644 --- a/src/client/views/presentationview/PresentationElement.tsx +++ b/src/client/views/presentationview/PresentationElement.tsx @@ -442,6 +442,8 @@ export default class PresentationElement extends React.Component Doc.AddDocToList(this.props.mainDocument, "data", d, this.props.document, before) || added, false) @@ -454,17 +456,48 @@ export default class PresentationElement extends React.Component { + updateGroupsOnDrop = async (droppedDoc: Doc) => { let p = this.props; - let curDocGuid = StrCast(p.document.presentId, null); - if (curDocGuid) { - if (p.groupMappings.has(curDocGuid)) { - let groupArray = this.props.groupMappings.get(curDocGuid)!; - groupArray.splice(groupArray.indexOf(p.document), 1); + let droppedDocSelectedButtons: boolean[] = await this.getSelectedButtonsOfDoc(droppedDoc); + if (droppedDocSelectedButtons[buttonIndex.Group]) { + let curDocGuid = StrCast(droppedDoc.presentId, null); + if (curDocGuid) { + if (p.groupMappings.has(curDocGuid)) { + let groupArray = this.props.groupMappings.get(curDocGuid)!; + groupArray.splice(groupArray.indexOf(droppedDoc), 1); + } + } + + let aboveDocGuid = StrCast(p.document.presentId, null); + if (p.groupMappings.has(aboveDocGuid)) { + p.groupMappings.get(aboveDocGuid)!.push(droppedDoc); + } else { + let newGroup: Doc[] = []; + newGroup.push(p.document); + newGroup.push(droppedDoc); + droppedDoc.presentId = aboveDocGuid; + p.groupMappings.set(aboveDocGuid, newGroup); } + } + } + + getSelectedButtonsOfDoc = async (paramDoc: Doc) => { + let p = this.props; + + let castedList = Cast(this.props.presButtonBackUp.selectedButtonDocs, listSpec(Doc)); + let foundSelectedButtons: boolean[] = new Array(6); + //if this is the first time this doc mounts, push a doc for it to store + await castedList!.forEach(async (doc) => { + let curDoc = await doc; + let curDocId = StrCast(curDoc.docId); + if (curDocId === paramDoc[Id]) { + foundSelectedButtons = Cast(curDoc.selectedButtons, listSpec("boolean"), null); + return; + } + }); + return foundSelectedButtons; - this.onGroupClick(p.document, p.index, true); } onPointerEnter = (e: React.PointerEvent): void => { @@ -551,14 +584,14 @@ export default class PresentationElement extends React.Component {`${p.index + 1}. ${title}`} - +

- - - - - - + + + + +