aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/collections/CollectionStackingView.tsx8
-rw-r--r--src/client/views/presentationview/PresElementBox.tsx96
2 files changed, 6 insertions, 98 deletions
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index 6712e8cfe..cb272ef1c 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -203,14 +203,18 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
@undoBatch
@action
drop = (e: Event, de: DragManager.DropEvent) => {
- let where = [de.x, de.y];
+ // bcz: this is here for now to account for the presentation stacking view being offset from the document top in PresBox's. Should generalize this somehow.
+ let offsethack = Number(this._masonryGridRef && this._masonryGridRef.parentElement!.parentElement!.offsetTop);
+ let where = [de.x, de.y - offsethack];
let targInd = -1;
+ let plusOne = false;
if (de.data instanceof DragManager.DocumentDragData) {
this._docXfs.map((cd, i) => {
let pos = cd.dxf().inverse().transformPoint(-2 * this.gridGap, -2 * this.gridGap);
let pos1 = cd.dxf().inverse().transformPoint(cd.width(), cd.height());
if (where[0] > pos[0] && where[0] < pos1[0] && where[1] > pos[1] && where[1] < pos1[1]) {
targInd = i;
+ plusOne = (where[1] > (pos[1] + pos1[1]) / 2 ? 1 : 0) ? true : false;
}
});
}
@@ -222,7 +226,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
else targInd = docs.indexOf(this.filteredChildren[targInd]);
let srcInd = docs.indexOf(newDoc);
docs.splice(srcInd, 1);
- docs.splice(targInd > srcInd ? targInd - 1 : targInd, 0, newDoc);
+ docs.splice((targInd > srcInd ? targInd - 1 : targInd) + (plusOne ? 1 : 0), 0, newDoc);
}
}
return false;
diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx
index 7692800c3..0e3d8bb7f 100644
--- a/src/client/views/presentationview/PresElementBox.tsx
+++ b/src/client/views/presentationview/PresElementBox.tsx
@@ -9,8 +9,6 @@ import { Id } from "../../../new_fields/FieldSymbols";
import { BoolCast, NumCast, StrCast } from "../../../new_fields/Types";
import { emptyFunction, returnEmptyString, returnFalse, returnOne } from "../../../Utils";
import { DocumentType } from "../../documents/DocumentTypes";
-import { DragManager, dropActionType, SetupDrag } from "../../util/DragManager";
-import { SelectionManager } from "../../util/SelectionManager";
import { Transform } from "../../util/Transform";
import { CollectionViewType } from '../collections/CollectionBaseView';
import { DocumentView } from "../nodes/DocumentView";
@@ -33,9 +31,6 @@ library.add(faArrowDown);
export class PresElementBox extends React.Component<FieldViewProps> {
public static LayoutString() { return FieldView.LayoutString(PresElementBox); }
- private header?: HTMLDivElement | undefined;
- private listdropDisposer?: DragManager.DragDropDisposer;
- private presElRef: React.RefObject<HTMLDivElement> = React.createRef();
private _embedHeight = 100;
@computed get myIndex() { return DocListCast(this.presentationDoc[this.presentationFieldKey]).indexOf(this.props.Document); }
@@ -58,17 +53,6 @@ export class PresElementBox extends React.Component<FieldViewProps> {
set hideAfterButton(val: boolean) { this.props.Document.hideAfterButton = val; }
set groupButton(val: boolean) { this.props.Document.groupButton = val; }
- //Lifecycle function that makes sure that button BackUp is received when mounted.
- componentDidMount() {
- if (this.presElRef.current) {
- this.header = this.presElRef.current;
- this.createListDropTarget(this.presElRef.current);
- }
- }
-
- componentWillUnmount() {
- this.listdropDisposer && this.listdropDisposer();
- }
/**
* The function that is called on click to turn Hiding document till press option on/off.
* It also sets the beginning and end opacitys.
@@ -168,87 +152,12 @@ export class PresElementBox extends React.Component<FieldViewProps> {
}
}
}
-
- /**
- * Creating a drop target for drag and drop when called.
- */
- protected createListDropTarget = (ele: HTMLDivElement) => {
- this.listdropDisposer && this.listdropDisposer();
- ele && (this.listdropDisposer = DragManager.MakeDropTarget(ele, { handlers: { drop: this.listDrop.bind(this) } }));
- }
-
/**
* Returns a local transformed coordinate array for given coordinates.
*/
ScreenToLocalListTransform = (xCord: number, yCord: number) => [xCord, yCord];
/**
- * This method is called when a element is dropped on a already esstablished target.
- * It makes sure to do appropirate action depending on if the item is dropped before
- * or after the target.
- */
- listDrop = async (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.presentationDoc, this.presentationFieldKey, doc, this.props.Document, before);
- e.stopPropagation();
- //where does treeViewId come from
- let movedDocs = (de.data.options === this.presentationDoc[Id] ? de.data.draggedDocuments : de.data.droppedDocuments);
- //console.log("How is this causing an issue");
- document.removeEventListener("pointermove", this.onDragMove, true);
- return (de.data.dropAction || de.data.userDropAction) ?
- de.data.droppedDocuments.reduce((added: boolean, d: Doc) => Doc.AddDocToList(this.presentationDoc, this.presentationFieldKey, 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.presentationDoc, this.presentationFieldKey, d, this.props.Document, before), false);
- }
- document.removeEventListener("pointermove", this.onDragMove, true);
-
- return false;
- }
-
- //This is used to add dragging as an event.
- onPointerEnter = (e: React.PointerEvent): void => {
- if (e.buttons === 1 && SelectionManager.GetIsDragging()) {
- this.header!.className = "presElementBox-item" + (this.currentIndex === this.myIndex ? "presElementBox-selected" : "");
-
- document.addEventListener("pointermove", this.onDragMove, true);
- }
- }
-
- //This is used to remove the dragging when dropped.
- onPointerLeave = (e: React.PointerEvent): void => {
- this.header!.className = "presElementBox-item" + (this.currentIndex === this.myIndex ? " presElementBox-selected" : "");
-
- document.removeEventListener("pointermove", this.onDragMove, true);
- }
-
- /**
- * This method is passed in to be used when dragging a document.
- * It makes it possible to show dropping lines on drop targets.
- */
- onDragMove = (e: PointerEvent): void => {
- Doc.UnBrushDoc(this.props.Document);
- let x = this.ScreenToLocalListTransform(e.clientX, e.clientY);
- let rect = this.header!.getBoundingClientRect();
- let bounds = this.ScreenToLocalListTransform(rect.left, rect.top + rect.height / 2);
- this.header!.className = "presElementBox-item presElementBox-item-" + (x[1] < bounds[1] ? "above" : "below");
- e.stopPropagation();
- }
-
- /**
- * This method is passed in to on down event of presElement, so that drag and
- * drop can be completed with DragManager functionality.
- */
- @action
- move: DragManager.MoveFunction = (doc: Doc, target: Doc, addDoc) => {
- return this.props.Document !== target && (this.props.removeDocument ? this.props.removeDocument(doc) : false) && addDoc(doc);
- }
-
- /**
* The function that is responsible for rendering the a preview or not for this
* presentation element.
*/
@@ -298,13 +207,8 @@ export class PresElementBox extends React.Component<FieldViewProps> {
let treecontainer = this.props.ContainingCollectionDoc && this.props.ContainingCollectionDoc.viewType === CollectionViewType.Tree;
let className = "presElementBox-item" + (this.currentIndex === this.myIndex ? " presElementBox-selected" : "");
- let dropAction = StrCast(this.props.Document.dropAction) as dropActionType;
- let onItemDown = SetupDrag(this.presElRef, () => p.Document, this.move, dropAction, this.presentationDoc[Id], true);
return (
<div className={className} key={p.Document[Id] + this.myIndex}
- ref={this.presElRef}
- onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerLeave}
- onPointerDown={onItemDown}
style={{ outlineWidth: Doc.IsBrushed(p.Document) ? `1px` : "0px", }}
onClick={e => p.focus(p.Document)}>
{treecontainer ? (null) : <>
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-11-13 09:14:03 +0000