From af592ffc89be5f7026f38ddec89956de9c001ed3 Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> Date: Sun, 2 Aug 2020 04:42:36 +0800 Subject: drag actions inc. multiple documents (fixed for all stacking collections) --- .../views/collections/CollectionStackingView.tsx | 24 +++- .../CollectionStackingViewFieldColumn.tsx | 4 +- .../views/collections/CollectionTreeView.tsx | 1 + src/client/views/nodes/PresBox.tsx | 131 ++++++++++++++++----- .../views/presentationview/PresElementBox.tsx | 52 +++++++- 5 files changed, 170 insertions(+), 42 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index c56ac9f77..dc6354383 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -286,14 +286,26 @@ export class CollectionStackingView extends CollectionSubView(StackingDocument) } }); if (super.onInternalDrop(e, de)) { - const newDoc = de.complete.docDragData.droppedDocuments[0]; + const newDocs = de.complete.docDragData.droppedDocuments; const docs = this.childDocList; if (docs) { - if (targInd === -1) targInd = docs.length; - else targInd = docs.indexOf(this.filteredChildren[targInd]); - const srcInd = docs.indexOf(newDoc); - docs.splice(srcInd, 1); - docs.splice((targInd > srcInd ? targInd - 1 : targInd) + plusOne, 0, newDoc); + newDocs.map((doc, i) => { + if (i === 0) { + if (targInd === -1) targInd = docs.length; + else targInd = docs.indexOf(this.filteredChildren[targInd]); + const srcInd = docs.indexOf(doc); + docs.splice(srcInd, 1); + docs.splice((targInd > srcInd ? targInd - 1 : targInd) + plusOne, 0, doc); + } else { + if (targInd === -1) targInd = docs.length; + else targInd = docs.indexOf(this.filteredChildren[targInd]); + const srcInd = docs.indexOf(doc); + const firstInd = docs.indexOf(newDocs[0]); + docs.splice(srcInd, 1); + // docs.splice((targInd > srcInd ? targInd - 1 : targInd) + plusOne, 0, doc); + docs.splice(firstInd + 1, 0, doc); + } + }); } } } diff --git a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx index 76af70cd1..890ab588c 100644 --- a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx +++ b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx @@ -350,7 +350,7 @@ export class CollectionStackingViewFieldColumn extends React.Component : (null); for (let i = 0; i < cols; i++) templatecols += `${style.columnWidth / style.numGroupColumns}px `; const chromeStatus = this.props.parent.props.Document._chromeStatus; - + const type = this.props.parent.props.Document.type; return <> {this.props.parent.Document._columnsHideIfEmpty ? (null) : headingView} { @@ -370,7 +370,7 @@ export class CollectionStackingViewFieldColumn extends React.Component - {(chromeStatus !== 'view-mode' && chromeStatus !== 'disabled') ? + {(chromeStatus !== 'view-mode' && chromeStatus !== 'disabled' && type !== 'presentation') ?
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index 651357e5d..dd823f5d5 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -130,6 +130,7 @@ class TreeView extends React.Component { } protected createTreeDropTarget = (ele: HTMLDivElement) => { + console.log("ele"); this._treedropDisposer?.(); ele && (this._treedropDisposer = DragManager.MakeDropTarget(ele, this.treeDrop.bind(this), undefined, this.preTreeDrop.bind(this)), this.doc); } diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index b5f3fc204..28e340cf1 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -4,8 +4,8 @@ import { action, computed, observable } from "mobx"; import { observer } from "mobx-react"; import { Doc, DocListCast, DocCastAsync, WidthSym } from "../../../fields/Doc"; import { InkTool } from "../../../fields/InkField"; -import { BoolCast, Cast, NumCast, StrCast } from "../../../fields/Types"; -import { returnFalse, returnOne, numberRange } from "../../../Utils"; +import { BoolCast, Cast, NumCast, StrCast, ScriptCast } from "../../../fields/Types"; +import { returnFalse, returnOne, numberRange, setupMoveUpEvents, emptyFunction, returnTrue } from "../../../Utils"; import { documentSchema } from "../../../fields/documentSchemas"; import { DocumentManager } from "../../util/DocumentManager"; import { undoBatch } from "../../util/UndoManager"; @@ -15,7 +15,7 @@ import { FieldView, FieldViewProps } from './FieldView'; import "./PresBox.scss"; import { ViewBoxBaseComponent } from "../DocComponent"; import { makeInterface, listSpec } from "../../../fields/Schema"; -import { Docs } from "../../documents/Documents"; +import { Docs, DocUtils } from "../../documents/Documents"; import { PrefetchProxy } from "../../../fields/Proxy"; import { ScriptField } from "../../../fields/ScriptField"; import { Scripting } from "../../util/Scripting"; @@ -29,6 +29,7 @@ import { Tooltip } from "@material-ui/core"; import { CollectionFreeFormViewChrome } from "../collections/CollectionMenu"; import { conformsTo } from "lodash"; import { translate } from "googleapis/build/src/apis/translate"; +import { DragManager, dropActionType } from "../../util/DragManager"; type PresBoxSchema = makeInterface<[typeof documentSchema]>; const PresBoxDocument = makeInterface(documentSchema); @@ -36,6 +37,7 @@ const PresBoxDocument = makeInterface(documentSchema); @observer export class PresBox extends ViewBoxBaseComponent(PresBoxDocument) { public static LayoutString(fieldKey: string) { return FieldView.LayoutString(PresBox, fieldKey); } + private treedropDisposer?: DragManager.DragDropDisposer; static Instance: PresBox; @observable _isChildActive = false; @computed get childDocs() { return DocListCast(this.dataDoc[this.fieldKey]); } @@ -67,9 +69,9 @@ export class PresBox extends ViewBoxBaseComponent // document.addEventListener("keydown", this.keyEvents, false); } - // componentWillUnmount() { - // document.removeEventListener("keydown", this.keyEvents, false); - // } + componentWillUnmount() { + this.treedropDisposer?.(); + } onPointerOver = () => { document.addEventListener("keydown", this.keyEvents, true); @@ -236,21 +238,21 @@ export class PresBox extends ViewBoxBaseComponent * has the option open and last in the group. If not in the group, and it has * the option open, navigates to that element. */ - navigateToElement = (curDoc: Doc) => { + navigateToElement = async (curDoc: Doc) => { const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); - const srcContext = Cast(targetDoc.context, Doc, null); - const presCollection = Cast(this.rootDoc.presCollection, Doc, null); - const collectionDocView = DocumentManager.Instance.getDocumentView(presCollection); + const srcContext = await DocCastAsync(targetDoc.context); + const presCollection = Cast(this.layoutDoc.presCollection, Doc, null); + const collectionDocView = presCollection ? DocumentManager.Instance.getDocumentView(presCollection) : undefined; if (this.itemIndex >= 0) { if (targetDoc) { if (srcContext) this.layoutDoc.presCollection = srcContext; } else if (targetDoc) this.layoutDoc.presCollection = targetDoc; } - console.log("NC: " + srcContext.title); - console.log("PC: " + presCollection.title); + if (srcContext) console.log("NC: " + srcContext.title); + if (presCollection) console.log("PC: " + presCollection.title); if (collectionDocView) { - if (srcContext !== presCollection) { + if (srcContext && srcContext !== presCollection) { console.log("Case 1: new srcContext inside of current collection so add a new tab to the current pres collection"); console.log(collectionDocView); collectionDocView.props.addDocTab(srcContext, "inPlace"); @@ -270,14 +272,14 @@ export class PresBox extends ViewBoxBaseComponent if (docToJump === curDoc) { //checking if curDoc has navigation open if (curDoc.presNavButton && targetDoc) { - DocumentManager.Instance.jumpToDocument(targetDoc, false, undefined, srcContext); + await DocumentManager.Instance.jumpToDocument(targetDoc, false, undefined, srcContext); } else if (curDoc.presZoomButton && targetDoc) { //awaiting jump so that new scale can be found, since jumping is async - DocumentManager.Instance.jumpToDocument(targetDoc, true, undefined, srcContext); + await DocumentManager.Instance.jumpToDocument(targetDoc, true, undefined, srcContext); } } else { //awaiting jump so that new scale can be found, since jumping is async - targetDoc && DocumentManager.Instance.jumpToDocument(targetDoc, willZoom, undefined, srcContext); + targetDoc && await DocumentManager.Instance.jumpToDocument(targetDoc, willZoom, undefined, srcContext); } } @@ -424,9 +426,15 @@ export class PresBox extends ViewBoxBaseComponent whenActiveChanged = action((isActive: boolean) => this.props.whenActiveChanged(this._isChildActive = isActive)); addDocumentFilter = (doc: Doc | Doc[]) => { const docs = doc instanceof Doc ? [doc] : doc; - docs.forEach(doc => { - doc.aliasOf instanceof Doc && (doc.presentationTargetDoc = doc.aliasOf); - !this.childDocs.includes(doc) && (doc.presZoomButton = true); + docs.forEach((doc, i) => { + if (this.childDocs.includes(doc)) { + console.log(docs.length); + console.log(i + 1); + if (docs.length === i + 1) return false; + } else { + doc.aliasOf instanceof Doc && (doc.presentationTargetDoc = doc.aliasOf); + !this.childDocs.includes(doc) && (doc.presZoomButton = true); + } }); return true; } @@ -439,6 +447,7 @@ export class PresBox extends ViewBoxBaseComponent // KEYS @observable _selectedArray: Doc[] = []; + @observable _eleArray: HTMLElement[] = []; @computed get listOfSelected() { const list = this._selectedArray.map((doc: Doc, index: any) => { @@ -462,18 +471,20 @@ export class PresBox extends ViewBoxBaseComponent //Command click @action - multiSelect = (doc: Doc) => { + multiSelect = (doc: Doc, ref: HTMLElement) => { this._selectedArray.push(this.childDocs[this.childDocs.indexOf(doc)]); + this._eleArray.push(ref); } //Shift click @action - shiftSelect = (doc: Doc) => { + shiftSelect = (doc: Doc, ref: HTMLElement) => { this._selectedArray = []; const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); if (activeItem) { for (let i = Math.min(this.itemIndex, this.childDocs.indexOf(doc)); i <= Math.max(this.itemIndex, this.childDocs.indexOf(doc)); i++) { this._selectedArray.push(this.childDocs[i]); + this._eleArray.push(ref); } } } @@ -1552,9 +1563,68 @@ export class PresBox extends ViewBoxBaseComponent } } + private _itemRef: React.RefObject = React.createRef(); + + + protected createPresDropTarget = (ele: HTMLDivElement) => { + console.log("created?"); + this.treedropDisposer?.(); + ele && (this.treedropDisposer = DragManager.MakeDropTarget(ele, this.onInternalDrop.bind(this), this.layoutDoc, this.onInternalPreDrop.bind(this))); + if (ele) { + console.log("ele: " + ele.className) + } + } + + protected onInternalPreDrop(e: Event, de: DragManager.DropEvent, targetAction: dropActionType) { + console.log("preDrop?") + if (de.complete.docDragData) { + // if targetDropAction is, say 'alias', but we're just dragging within a collection, we want to ignore the targetAction. + // otherwise, the targetAction should become the actual action (which can still be overridden by the userDropAction -eg, shift/ctrl keys) + if (targetAction && !de.complete.docDragData.draggedDocuments.some(d => d.context === this.props.Document && this.childDocs.includes(d))) { + de.complete.docDragData.dropAction = targetAction; + } + e.stopPropagation(); + } + } + + @action + protected onInternalDrop(e: Event, de: DragManager.DropEvent): boolean { + console.log("drop in pres") + const docDragData = de.complete.docDragData; + ScriptCast(this.props.Document.dropConverter)?.script.run({ dragData: docDragData }); + if (docDragData && this.props.addDocument) { + console.log("docDragData && this.props.addDocument"); + let added = false; + const dropaction = docDragData.dropAction || docDragData.userDropAction; + if (dropaction && dropaction !== "move") { + console.log("dropaction && dropaction !== move"); + added = this.props.addDocument(docDragData.droppedDocuments); + } else if (docDragData.moveDocument) { + console.log("docDragData.moveDocument"); + const movedDocs = docDragData.droppedDocuments.filter((d, i) => docDragData.draggedDocuments[i] === d); + const addedDocs = docDragData.droppedDocuments.filter((d, i) => docDragData.draggedDocuments[i] !== d); + const res = addedDocs.length ? this.props.addDocument(addedDocs) : true; + if (movedDocs.length) { + const canAdd = this.props.Document._viewType === CollectionViewType.Pile || de.embedKey || + Doc.AreProtosEqual(Cast(movedDocs[0].annotationOn, Doc, null), this.props.Document); + added = docDragData.moveDocument(movedDocs, this.props.Document, canAdd ? this.props.addDocument : returnFalse); + } else added = res; + } else { + console.log("else"); + added = this.props.addDocument(docDragData.droppedDocuments); + } + added && e.stopPropagation(); + return added; + } + return false; + } + render() { this.childDocs.slice(); // needed to insure that the childDocs are loaded for looking up fields const mode = StrCast(this.rootDoc._viewType) as CollectionViewType; + // const addDocument = (doc: Doc | Doc[], relativeTo?: Doc, before?: boolean) => { + // return add(doc, relativeTo ? relativeTo : docs[i], before !== undefined ? before : false); + // }; return