Skip to content

Commit

Permalink
fix: fixes issues #103 and #104
Browse files Browse the repository at this point in the history 
Issues with insert and drop or swap plugins adding document event listeners that impacted parent lists that did not need that functionality. Moves check for touch device to node pointerdown event and checks for existence of window first
  • Loading branch information
@sashamilenkovic
sashamilenkovic committed Oct 9, 2024
1 parent e72b1ba commit cb35f4d
Show file tree
Hide file tree
Showing 22 changed files with 290 additions and 137 deletions.
57 changes: 33 additions & 24 deletions dist/index.cjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,6 @@ __export(src_exports, {
tearDownNode: () => tearDownNode,
tearDownNodeRemap: () => tearDownNodeRemap,
throttle: () => throttle,
touchDevice: () => touchDevice,
transfer: () => transfer,
treeAncestors: () => treeAncestors,
updateConfig: () => updateConfig,
Expand Down Expand Up @@ -227,9 +226,10 @@ var insertState = {
targetIndex: 0,
ascending: false,
coordinates: { x: 0, y: 0 },
insertPoint: null
insertPoint: null,
dragging: false
};
var listenersSet = false;
var documentController;
function insert(insertConfig) {
return (parent) => {
const parentData = parents.get(parent);
Expand All @@ -238,11 +238,6 @@ function insert(insertConfig) {
...parentData.config,
insertConfig
};
if (!listenersSet) {
document.addEventListener("dragover", checkPosition);
document.addEventListener("pointermove", checkPosition);
listenersSet = true;
}
return {
teardown() {
if (parentData.abortControllers.root) {
Expand All @@ -259,6 +254,15 @@ function insert(insertConfig) {
handleEnd(state2);
originalHandleend(state2);
};
parentData.on("dragStarted", () => {
documentController = addEvents(document, {
dragover: checkPosition,
pointermove: checkPosition
});
});
parentData.on("dragEnded", () => {
documentController?.abort();
});
parentData.config = insertParentConfig;
state.on("dragStarted", () => {
const insertPoint = parentData.config.insertConfig?.insertPoint({
Expand Down Expand Up @@ -730,9 +734,10 @@ function handleEnd(state2) {
var dropSwapState = {
draggedOverNodes: Array(),
initialDraggedIndex: void 0,
transferred: false
transferred: false,
dragging: false
};
var listenersSet2 = false;
var documentController2;
function dropOrSwap(dropSwapConfig = {}) {
return (parent) => {
const parentData = parents.get(parent);
Expand All @@ -741,14 +746,6 @@ function dropOrSwap(dropSwapConfig = {}) {
...parentData.config,
dropSwapConfig
};
if (!listenersSet2) {
document.addEventListener("dragover", rootDragover);
document.addEventListener(
"handleRootPointerover",
(e) => rootPointerover(e)
);
listenersSet2 = true;
}
return {
setup() {
dropSwapParentConfig.handleNodeDragover = dropSwapConfig.handleNodeDragover || handleNodeDragover2;
Expand All @@ -760,6 +757,15 @@ function dropOrSwap(dropSwapConfig = {}) {
handleEnd2(state2);
originalHandleend(state2);
};
parentData.on("dragStarted", () => {
documentController2 = addEvents(document, {
dragover: rootDragover,
handleRootPointerover: rootPointerover
});
});
parentData.on("dragEnded", () => {
documentController2?.abort();
});
parentData.config = dropSwapParentConfig;
}
};
Expand Down Expand Up @@ -969,9 +975,8 @@ function handleEnd2(state2) {

// src/index.ts
var isBrowser = typeof window !== "undefined";
var touchDevice = window && "ontouchstart" in window;
var dropped = false;
var documentController;
var documentController3;
var isNative = false;
var animationFrameId = null;
var nodes = /* @__PURE__ */ new WeakMap();
Expand Down Expand Up @@ -1031,6 +1036,7 @@ function resetState() {
}
function setDragState(dragStateProps2) {
Object.assign(state, dragStateProps2);
dragStateProps2.initialParent.data.emit("dragStarted", state);
dropped = false;
state.emit("dragStarted", state);
return state;
Expand Down Expand Up @@ -1068,15 +1074,16 @@ function dragAndDrop({
config = {}
}) {
if (!isBrowser) return;
if (!documentController)
documentController = addEvents(document, {
if (!documentController3)
documentController3 = addEvents(document, {
dragover: handleRootDragover,
pointerdown: handlePointerdownRoot,
pointerup: handlePointerupRoot,
keydown: handleRootKeydown,
drop: handleRootDrop
});
tearDown(parent);
const [emit2, on2] = createEmitter();
const parentData = {
getValues,
setValues,
Expand Down Expand Up @@ -1130,7 +1137,9 @@ function dragAndDrop({
},
enabledNodes: [],
abortControllers: {},
privateClasses: []
privateClasses: [],
on: on2,
emit: emit2
};
const nodesObserver = new MutationObserver(nodesMutated);
nodesObserver.observe(parent, { childList: true });
Expand Down Expand Up @@ -1821,6 +1830,7 @@ function handleNodePointerdown(data, state2) {
);
return;
}
const touchDevice = isBrowser && window && "ontouchstart" in window;
if (state2.selectedState?.nodes?.length) {
const idx = state2.selectedState.nodes.findIndex(
(x) => x.el === data.targetData.node.el
Expand Down Expand Up @@ -2818,7 +2828,6 @@ function getRealCoords2(el) {
tearDownNode,
tearDownNodeRemap,
throttle,
touchDevice,
transfer,
treeAncestors,
updateConfig,
Expand Down
2 changes: 1 addition & 1 deletion dist/index.cjs.map
View file

Large diffs are not rendered by default.

13 changes: 8 additions & 5 deletions dist/index.d.cts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -340,6 +340,8 @@ interface ParentData<T> {
* Set on parentData indicating that the current parent is nested beneath an ancestor.
*/
nestedParent?: ParentRecord<T>;
emit: (event: string, data: unknown) => void;
on: (event: string, callback: CallableFunction) => void;
}
/**
* The data assigned to a given node in the `nodes` weakmap.
Expand Down Expand Up @@ -849,14 +851,15 @@ interface DropSwapState {
draggedOverNodes: Array<NodeRecord<unknown>>;
initialDraggedIndex: number | undefined;
transferred: boolean;
dragging: boolean;
}
interface InsertConfig<T> {
insertPoint: (parent: ParentRecord<T>) => HTMLElement;
insertEvent?: (data: InsertEvent<T>) => void;
handleNodeDragover?: (data: NodeDragEventData<T>, state: DragState<T>) => void;
handleParentDragover?: (data: ParentDragEventData<T>, state: DragState<T>) => void;
handleParentPointerover?: (data: PointeroverParentEvent<T>, state: SynthDragState<T>) => void;
handleNodePointerover?: (data: PointeroverNodeEvent<T>, state: SynthDragState<T>) => void;
handleParentPointerover?: (data: PointeroverParentEvent<T>) => void;
handleNodePointerover?: (data: PointeroverNodeEvent<T>) => void;
handleEnd?: (data: NodeDragEventData<T> | NodePointerEventData<T>) => void;
}
interface InsertState<T> {
Expand All @@ -869,6 +872,7 @@ interface InsertState<T> {
x: number;
y: number;
};
dragging: boolean;
}
interface InsertEvent<T> {
sourceParent: ParentRecord<T>;
Expand Down Expand Up @@ -906,7 +910,6 @@ declare function dropOrSwap<T>(dropSwapConfig?: DropSwapConfig<T>): (parent: HTM
* @internal
*/
declare const isBrowser: boolean;
declare const touchDevice: boolean;
declare const nodes: NodesData<any>;
declare const parents: ParentsData<any>;
declare const treeAncestors: Record<string, HTMLElement>;
Expand All @@ -925,7 +928,7 @@ declare function resetState(): void;
*
* @returns void
*/
declare function setDragState<T>(dragStateProps: (SynthDragStateProps & DragStateProps<T>) | DragStateProps<T> | undefined): DragState<T> | SynthDragState<T>;
declare function setDragState<T>(dragStateProps: (SynthDragStateProps & DragStateProps<T>) | DragStateProps<T>): DragState<T> | SynthDragState<T>;
/**
* Initializes the drag and drop functionality for a given parent.
*
Expand Down Expand Up @@ -1061,4 +1064,4 @@ declare function eventCoordinates(data: DragEvent | PointerEvent): {
};
declare function getRealCoords(el: HTMLElement): Coordinates;

export { type BaseDragState, type Coordinates, type DNDPlugin, type DNDPluginData, type DragAndDrop, type DragAndDropData, type DragState, type DragStateProps, type DragendEvent, type DragendEventData, type DragstartEvent, type DragstartEventData, type DropSwapConfig, type DropSwapState, type EventHandlers, type InsertConfig, type InsertEvent, type InsertState, type NativeDragEffects, type Node, type NodeData, type NodeDragEventData, type NodeEvent, type NodeEventData, type NodeFromPoint, type NodePointerEventData, type NodeRecord, type NodeTargetData, type NodesData, type ParentConfig, type ParentData, type ParentDragEventData, type ParentEventData, type ParentFromPoint, type ParentKeydownEventData, type ParentObservers, type ParentPointerEventData, type ParentRecord, type ParentTargetData, type ParentsData, type PluginData, type PointeroverNodeEvent, type PointeroverParentEvent, type RemapFinished, type RemapFinishedData, type ScrollData, type SetupNode, type SetupNodeData, type ShouldSwapData, type SortEvent, type SortEventData, type StateEvents, type SynthDragState, type SynthDragStateProps, type TearDownNode, type TearDownNodeData, type TransferEvent, type TransferEventData, addClass, addEvents, addNodeClass, addParentClass, animations, copyNodeStyle, createEmitter, dragAndDrop, dragStateProps, dragValues, dragstartClasses, dropOrSwap, emit, eventCoordinates, getElFromPoint, getRealCoords, handleClickNode, handleClickParent, handleDragend, handleDragstart, handleEnd, handleLongPress, handleNodeDragover, handleNodeDrop, handleNodeKeydown, handleNodePointerdown, handleNodePointermove, handleNodePointerover, handleNodePointerup, handleNodeTouchstart, handleParentBlur, handleParentDragover, handleParentDrop, handleParentFocus, handleParentKeydown, handleParentPointerover, handlePointercancel, initDrag, insert, isBrowser, isDragState, isNode, isSynthDragState, noDefault, nodeEventData, nodes, on, parentEventData, parentValues, parents, performSort, performTransfer, preventSortOnScroll, remapFinished, remapNodes, removeClass, resetState, setAttrs, setDragState, setParentValues, setupNode, setupNodeRemap, sort, state, synthMove, tearDown, tearDownNode, tearDownNodeRemap, throttle, touchDevice, transfer, treeAncestors, updateConfig, validateDragHandle, validateDragstart, validateSort, validateTransfer };
export { type BaseDragState, type Coordinates, type DNDPlugin, type DNDPluginData, type DragAndDrop, type DragAndDropData, type DragState, type DragStateProps, type DragendEvent, type DragendEventData, type DragstartEvent, type DragstartEventData, type DropSwapConfig, type DropSwapState, type EventHandlers, type InsertConfig, type InsertEvent, type InsertState, type NativeDragEffects, type Node, type NodeData, type NodeDragEventData, type NodeEvent, type NodeEventData, type NodeFromPoint, type NodePointerEventData, type NodeRecord, type NodeTargetData, type NodesData, type ParentConfig, type ParentData, type ParentDragEventData, type ParentEventData, type ParentFromPoint, type ParentKeydownEventData, type ParentObservers, type ParentPointerEventData, type ParentRecord, type ParentTargetData, type ParentsData, type PluginData, type PointeroverNodeEvent, type PointeroverParentEvent, type RemapFinished, type RemapFinishedData, type ScrollData, type SetupNode, type SetupNodeData, type ShouldSwapData, type SortEvent, type SortEventData, type StateEvents, type SynthDragState, type SynthDragStateProps, type TearDownNode, type TearDownNodeData, type TransferEvent, type TransferEventData, addClass, addEvents, addNodeClass, addParentClass, animations, copyNodeStyle, createEmitter, dragAndDrop, dragStateProps, dragValues, dragstartClasses, dropOrSwap, emit, eventCoordinates, getElFromPoint, getRealCoords, handleClickNode, handleClickParent, handleDragend, handleDragstart, handleEnd, handleLongPress, handleNodeDragover, handleNodeDrop, handleNodeKeydown, handleNodePointerdown, handleNodePointermove, handleNodePointerover, handleNodePointerup, handleNodeTouchstart, handleParentBlur, handleParentDragover, handleParentDrop, handleParentFocus, handleParentKeydown, handleParentPointerover, handlePointercancel, initDrag, insert, isBrowser, isDragState, isNode, isSynthDragState, noDefault, nodeEventData, nodes, on, parentEventData, parentValues, parents, performSort, performTransfer, preventSortOnScroll, remapFinished, remapNodes, removeClass, resetState, setAttrs, setDragState, setParentValues, setupNode, setupNodeRemap, sort, state, synthMove, tearDown, tearDownNode, tearDownNodeRemap, throttle, transfer, treeAncestors, updateConfig, validateDragHandle, validateDragstart, validateSort, validateTransfer };
13 changes: 8 additions & 5 deletions dist/index.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -340,6 +340,8 @@ interface ParentData<T> {
* Set on parentData indicating that the current parent is nested beneath an ancestor.
*/
nestedParent?: ParentRecord<T>;
emit: (event: string, data: unknown) => void;
on: (event: string, callback: CallableFunction) => void;
}
/**
* The data assigned to a given node in the `nodes` weakmap.
Expand Down Expand Up @@ -849,14 +851,15 @@ interface DropSwapState {
draggedOverNodes: Array<NodeRecord<unknown>>;
initialDraggedIndex: number | undefined;
transferred: boolean;
dragging: boolean;
}
interface InsertConfig<T> {
insertPoint: (parent: ParentRecord<T>) => HTMLElement;
insertEvent?: (data: InsertEvent<T>) => void;
handleNodeDragover?: (data: NodeDragEventData<T>, state: DragState<T>) => void;
handleParentDragover?: (data: ParentDragEventData<T>, state: DragState<T>) => void;
handleParentPointerover?: (data: PointeroverParentEvent<T>, state: SynthDragState<T>) => void;
handleNodePointerover?: (data: PointeroverNodeEvent<T>, state: SynthDragState<T>) => void;
handleParentPointerover?: (data: PointeroverParentEvent<T>) => void;
handleNodePointerover?: (data: PointeroverNodeEvent<T>) => void;
handleEnd?: (data: NodeDragEventData<T> | NodePointerEventData<T>) => void;
}
interface InsertState<T> {
Expand All @@ -869,6 +872,7 @@ interface InsertState<T> {
x: number;
y: number;
};
dragging: boolean;
}
interface InsertEvent<T> {
sourceParent: ParentRecord<T>;
Expand Down Expand Up @@ -906,7 +910,6 @@ declare function dropOrSwap<T>(dropSwapConfig?: DropSwapConfig<T>): (parent: HTM
* @internal
*/
declare const isBrowser: boolean;
declare const touchDevice: boolean;
declare const nodes: NodesData<any>;
declare const parents: ParentsData<any>;
declare const treeAncestors: Record<string, HTMLElement>;
Expand All @@ -925,7 +928,7 @@ declare function resetState(): void;
*
* @returns void
*/
declare function setDragState<T>(dragStateProps: (SynthDragStateProps & DragStateProps<T>) | DragStateProps<T> | undefined): DragState<T> | SynthDragState<T>;
declare function setDragState<T>(dragStateProps: (SynthDragStateProps & DragStateProps<T>) | DragStateProps<T>): DragState<T> | SynthDragState<T>;
/**
* Initializes the drag and drop functionality for a given parent.
*
Expand Down Expand Up @@ -1061,4 +1064,4 @@ declare function eventCoordinates(data: DragEvent | PointerEvent): {
};
declare function getRealCoords(el: HTMLElement): Coordinates;

export { type BaseDragState, type Coordinates, type DNDPlugin, type DNDPluginData, type DragAndDrop, type DragAndDropData, type DragState, type DragStateProps, type DragendEvent, type DragendEventData, type DragstartEvent, type DragstartEventData, type DropSwapConfig, type DropSwapState, type EventHandlers, type InsertConfig, type InsertEvent, type InsertState, type NativeDragEffects, type Node, type NodeData, type NodeDragEventData, type NodeEvent, type NodeEventData, type NodeFromPoint, type NodePointerEventData, type NodeRecord, type NodeTargetData, type NodesData, type ParentConfig, type ParentData, type ParentDragEventData, type ParentEventData, type ParentFromPoint, type ParentKeydownEventData, type ParentObservers, type ParentPointerEventData, type ParentRecord, type ParentTargetData, type ParentsData, type PluginData, type PointeroverNodeEvent, type PointeroverParentEvent, type RemapFinished, type RemapFinishedData, type ScrollData, type SetupNode, type SetupNodeData, type ShouldSwapData, type SortEvent, type SortEventData, type StateEvents, type SynthDragState, type SynthDragStateProps, type TearDownNode, type TearDownNodeData, type TransferEvent, type TransferEventData, addClass, addEvents, addNodeClass, addParentClass, animations, copyNodeStyle, createEmitter, dragAndDrop, dragStateProps, dragValues, dragstartClasses, dropOrSwap, emit, eventCoordinates, getElFromPoint, getRealCoords, handleClickNode, handleClickParent, handleDragend, handleDragstart, handleEnd, handleLongPress, handleNodeDragover, handleNodeDrop, handleNodeKeydown, handleNodePointerdown, handleNodePointermove, handleNodePointerover, handleNodePointerup, handleNodeTouchstart, handleParentBlur, handleParentDragover, handleParentDrop, handleParentFocus, handleParentKeydown, handleParentPointerover, handlePointercancel, initDrag, insert, isBrowser, isDragState, isNode, isSynthDragState, noDefault, nodeEventData, nodes, on, parentEventData, parentValues, parents, performSort, performTransfer, preventSortOnScroll, remapFinished, remapNodes, removeClass, resetState, setAttrs, setDragState, setParentValues, setupNode, setupNodeRemap, sort, state, synthMove, tearDown, tearDownNode, tearDownNodeRemap, throttle, touchDevice, transfer, treeAncestors, updateConfig, validateDragHandle, validateDragstart, validateSort, validateTransfer };
export { type BaseDragState, type Coordinates, type DNDPlugin, type DNDPluginData, type DragAndDrop, type DragAndDropData, type DragState, type DragStateProps, type DragendEvent, type DragendEventData, type DragstartEvent, type DragstartEventData, type DropSwapConfig, type DropSwapState, type EventHandlers, type InsertConfig, type InsertEvent, type InsertState, type NativeDragEffects, type Node, type NodeData, type NodeDragEventData, type NodeEvent, type NodeEventData, type NodeFromPoint, type NodePointerEventData, type NodeRecord, type NodeTargetData, type NodesData, type ParentConfig, type ParentData, type ParentDragEventData, type ParentEventData, type ParentFromPoint, type ParentKeydownEventData, type ParentObservers, type ParentPointerEventData, type ParentRecord, type ParentTargetData, type ParentsData, type PluginData, type PointeroverNodeEvent, type PointeroverParentEvent, type RemapFinished, type RemapFinishedData, type ScrollData, type SetupNode, type SetupNodeData, type ShouldSwapData, type SortEvent, type SortEventData, type StateEvents, type SynthDragState, type SynthDragStateProps, type TearDownNode, type TearDownNodeData, type TransferEvent, type TransferEventData, addClass, addEvents, addNodeClass, addParentClass, animations, copyNodeStyle, createEmitter, dragAndDrop, dragStateProps, dragValues, dragstartClasses, dropOrSwap, emit, eventCoordinates, getElFromPoint, getRealCoords, handleClickNode, handleClickParent, handleDragend, handleDragstart, handleEnd, handleLongPress, handleNodeDragover, handleNodeDrop, handleNodeKeydown, handleNodePointerdown, handleNodePointermove, handleNodePointerover, handleNodePointerup, handleNodeTouchstart, handleParentBlur, handleParentDragover, handleParentDrop, handleParentFocus, handleParentKeydown, handleParentPointerover, handlePointercancel, initDrag, insert, isBrowser, isDragState, isNode, isSynthDragState, noDefault, nodeEventData, nodes, on, parentEventData, parentValues, parents, performSort, performTransfer, preventSortOnScroll, remapFinished, remapNodes, removeClass, resetState, setAttrs, setDragState, setParentValues, setupNode, setupNodeRemap, sort, state, synthMove, tearDown, tearDownNode, tearDownNodeRemap, throttle, transfer, treeAncestors, updateConfig, validateDragHandle, validateDragstart, validateSort, validateTransfer };
Loading

0 comments on commit cb35f4d

Please sign in to comment.