Skip to content

Commit

Permalink
wip on making the handleDragstart handler not overridable by ultiDrag…
Browse files Browse the repository at this point in the history 
…, but to make the helper functions within handleDragstart more reusable that can accept different arguments.
  • Loading branch information
@sashamilenkovic
sashamilenkovic committed Sep 15, 2024
1 parent 30d651c commit 1e3691b
Show file tree
Hide file tree
Showing 3 changed files with 119 additions and 108 deletions.
111 changes: 56 additions & 55 deletions src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,6 +144,9 @@ export function dragAndDrop<T>({
getValues,
setValues,
config: {
dragDropEffect: "move",
dragEffectAllowed: "move",
dragImage: setDragImage,
deepCopyStyles: false,
handleKeydownNode,
handleKeydownParent,
Expand Down Expand Up @@ -211,6 +214,10 @@ export function dragAndDrop<T>({
remapNodes(parent, true);
}

function setDragImage(data: NodeDragEventData<any>) {
return data.targetData.node.el;
}

export function dragStateProps<T>(
data: NodeDragEventData<T> | NodePointerEventData<T>,
nativeDrag = true
Expand Down Expand Up @@ -829,25 +836,48 @@ export function remapFinished() {
if ("draggedNode" in state) state.affectedNodes = [];
}

export function validateDragstart(data: NodeEventData<any>): boolean {
return !!data.targetData.parent.data.config.nativeDrag;
}

export function handleDragstart<T>(
data: NodeEventData<T>,
state: BaseDragState<T>
data: NodeDragEventData<T>,
_state: BaseDragState<T>
) {
if (!(data.e instanceof DragEvent)) return;

if (!data.targetData.parent.data.config.nativeDrag) {
if (!validateDragstart(data) || !validateDragHandle) {
data.e.preventDefault();

return;
}

dragstart(
{
e: data.e,
targetData: data.targetData,
},
state
const config = data.targetData.parent.data.config;

const originalZIndex = data.targetData.node.el.style.zIndex;

console.log("dragstart");

const dragState = initDrag(data);

dragstartClasses(
data.targetData.node.el,
config.draggingClass,
config.dropZoneClass,
config.dragPlaceholderClass
);

dragState.originalZIndex = originalZIndex;

if (config.onDragstart)
config.onDragstart({
parent: data.targetData.parent,
values: parentValues(
data.targetData.parent.el,
data.targetData.parent.data
),
draggedNode: dragState.draggedNode,
draggedNodes: dragState.draggedNodes,
position: dragState.initialIndex,
});
}

export function handlePointerdownNode<T>(
Expand Down Expand Up @@ -888,15 +918,22 @@ export function initDrag<T>(data: NodeDragEventData<T>): DragState<T> {
data.e.stopPropagation();

if (data.e.dataTransfer) {
data.e.dataTransfer.dropEffect = "move";
const config = data.targetData.parent.data.config;

data.e.dataTransfer.effectAllowed = "move";
data.e.dataTransfer.dropEffect = config.dragDropEffect;

data.e.dataTransfer.setDragImage(
data.targetData.node.el,
data.e.offsetX,
data.e.offsetY
);
console.log("config", config);

data.e.dataTransfer.effectAllowed = config.dragEffectAllowed;

const dragImage = config?.dragImage;

if (dragImage)
data.e.dataTransfer.setDragImage(
dragImage(data) || data.targetData.node.el,
data.e.offsetX,
data.e.offsetY
);
}

return dragState;
Expand Down Expand Up @@ -968,43 +1005,7 @@ export function preventSortOnScroll() {
export function dragstart<T>(
data: NodeDragEventData<T>,
_state: BaseDragState<T>
) {
if (!validateDragHandle(data)) {
data.e.preventDefault();

return;
}

const dragState = initDrag(data);

const config = data.targetData.parent.data.config;

const originalZIndex = data.targetData.node.el.style.zIndex;

dragState.originalZIndex = originalZIndex;

// TODO: Gross
data.targetData.node.el.style.zIndex = "9999";

dragstartClasses(
dragState.draggedNode.el,
config.draggingClass,
config.dropZoneClass,
config.dragPlaceholderClass
);

if (config.onDragstart)
config.onDragstart({
parent: data.targetData.parent,
values: parentValues(
data.targetData.parent.el,
data.targetData.parent.data
),
draggedNode: dragState.draggedNode,
draggedNodes: dragState.draggedNodes,
position: dragState.initialIndex,
});
}
) {}

export function handlePointeroverNode<T>(e: PointeroverNodeEvent<T>) {
if (e.detail.targetData.parent.el === e.detail.state.lastParent.el)
Expand Down
104 changes: 51 additions & 53 deletions src/plugins/multiDrag/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import {
state,
resetState,
isDragState,
validateDragstart,
} from "../../index";
import { addNodeClass, removeClass, copyNodeStyle } from "../../utils";

Expand All @@ -41,8 +42,8 @@ export function multiDrag<T>(
setup() {
state.on("dragStarted", multiDragConfig.dragStarted || dragStarted);

multiDragParentConfig.handleDragstart =
multiDragConfig.handleDragstart || handleDragstart;
//multiDragParentConfig.handleDragstart =
// multiDragConfig.handleDragstart || handleDragstart;

//multiDragParentConfig.handlePointerdownNode =
// multiDragConfig.handlePointerdownNode || handlePointerdownNode;
Expand Down Expand Up @@ -100,8 +101,8 @@ function reapplyDragClasses<T>(node: Node, parentData: ParentData<T>) {

const dropZoneClass =
"clonedDraggedNode" in state
? parentData.config.synthDropZoneClass
: parentData.config.dropZoneClass;
? multiDragConfig.synthDropZoneClass
: multiDragConfig.dropZoneClass;

const draggedNodeEls = state.draggedNodes.map((x) => x.el);

Expand Down Expand Up @@ -139,12 +140,12 @@ export function selectionsEnd<T>(data: NodeEventData<T>, state: DragState<T>) {
}

export function handleDragstart<T>(
data: NodeEventData<T>,
data: NodeDragEventData<T>,
state: DragState<T>
) {
if (!(data.e instanceof DragEvent)) return;
if (!validateDragstart(data)) return;

multiDragstart(
dragstart(
{
e: data.e,
targetData: data.targetData,
Expand All @@ -153,66 +154,63 @@ export function handleDragstart<T>(
);
}

export function multiDragstart<T>(
data: NodeDragEventData<T>,
_state: DragState<T>
) {
export function dragstart<T>(data: NodeDragEventData<T>, _state: DragState<T>) {
console.log("multi dragstart");
const dragState = initDrag(data);
//const multiDragConfig = data.targetData.parent.data.config.multiDragConfig;

const multiDragConfig = data.targetData.parent.data.config.multiDragConfig;
//if (!multiDragConfig) return;

if (!multiDragConfig) return;
//const parentValues = data.targetData.parent.data.getValues(
// data.targetData.parent.el
//);

const parentValues = data.targetData.parent.data.getValues(
data.targetData.parent.el
);
//let selectedValues = state.selectedNodes.length
// ? state.selectedNodes.map((x) => x.data.value)
// : multiDragConfig.selections &&
// multiDragConfig.selections(parentValues, data.targetData.parent.el);

let selectedValues = state.selectedNodes.length
? state.selectedNodes.map((x) => x.data.value)
: multiDragConfig.selections &&
multiDragConfig.selections(parentValues, data.targetData.parent.el);
//if (selectedValues === undefined) return;

if (selectedValues === undefined) return;
//if (!selectedValues.includes(data.targetData.node.data.value)) {
// selectedValues = [data.targetData.node.data.value, ...selectedValues];

if (!selectedValues.includes(data.targetData.node.data.value)) {
selectedValues = [data.targetData.node.data.value, ...selectedValues];
// const selectionConfig = data.targetData.parent.data.config.selectionsConfig;

const selectionConfig = data.targetData.parent.data.config.selectionsConfig;
// addNodeClass(
// [data.targetData.node.el],
// selectionConfig?.selectedClass,
// true
// );

addNodeClass(
[data.targetData.node.el],
selectionConfig?.selectedClass,
true
);
// state.selectedNodes.push(data.targetData.node);
//}

state.selectedNodes.push(data.targetData.node);
}
//const originalZIndex = data.targetData.node.el.style.zIndex;

const originalZIndex = data.targetData.node.el.style.zIndex;
//dragState.originalZIndex = originalZIndex;

dragState.originalZIndex = originalZIndex;
//data.targetData.node.el.style.zIndex = "9999";

data.targetData.node.el.style.zIndex = "9999";
//if (Array.isArray(selectedValues) && selectedValues.length) {
// const targetRect = data.targetData.node.el.getBoundingClientRect();

if (Array.isArray(selectedValues) && selectedValues.length) {
const targetRect = data.targetData.node.el.getBoundingClientRect();

const [x, y] = [
data.e.clientX - targetRect.left,
data.e.clientY - targetRect.top,
];

stackNodes(handleSelections(data, selectedValues, dragState, x, y));
} else {
const config = data.targetData.parent.data.config;

dragstartClasses(
dragState.draggedNode.el,
config.draggingClass,
config.dropZoneClass,
config.dragPlaceholderClass
);
}
// const [x, y] = [
// data.e.clientX - targetRect.left,
// data.e.clientY - targetRect.top,
// ];

// stackNodes(handleSelections(data, selectedValues, dragState, x, y));
//} else {
// const config = data.targetData.parent.data.config;

// dragstartClasses(
// dragState.draggedNode.el,
// config.draggingClass,
// config.dropZoneClass,
// config.dragPlaceholderClass
// );
//}
}

//export function handlePointerdownNode<T>(
Expand Down
12 changes: 12 additions & 0 deletions src/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,18 @@ export interface ParentConfig<T> {
lastParentData: ParentRecord<T>,
state: DragState<T>
) => boolean;
/**
* The data transfer effect to use for the drag operation.
*/
dragEffectAllowed: "link" | "none" | "copy" | "move";
/**
* The data transfer effect to use for the drag operation.
*/
dragDropEffect: "link" | "none" | "copy" | "move";
/**
* A function that returns the image to use for the drag operation.
*/
dragImage: (data: NodeDragEventData<T>) => HTMLElement;
/**
* A flag to disable dragability of all nodes in the parent.
*/
Expand Down

0 comments on commit 1e3691b

Please sign in to comment.