Skip to content

Commit cb35f4d

Browse files
author
Sasha Milenkovic
committed
fix: fixes issues #103 and #104
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
1 parent e72b1ba commit cb35f4d

File tree

22 files changed

+290
-137
lines changed

22 files changed

+290
-137
lines changed

‎dist/index.cjs‎

Lines changed: 33 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,6 @@ __export(src_exports, {
8989
tearDownNode: () => tearDownNode,
9090
tearDownNodeRemap: () => tearDownNodeRemap,
9191
throttle: () => throttle,
92-
touchDevice: () => touchDevice,
9392
transfer: () => transfer,
9493
treeAncestors: () => treeAncestors,
9594
updateConfig: () => updateConfig,
@@ -227,9 +226,10 @@ var insertState = {
227226
targetIndex: 0,
228227
ascending: false,
229228
coordinates: { x: 0, y: 0 },
230-
insertPoint: null
229+
insertPoint: null,
230+
dragging: false
231231
};
232-
var listenersSet = false;
232+
var documentController;
233233
function insert(insertConfig) {
234234
return (parent) => {
235235
const parentData = parents.get(parent);
@@ -238,11 +238,6 @@ function insert(insertConfig) {
238238
...parentData.config,
239239
insertConfig
240240
};
241-
if (!listenersSet) {
242-
document.addEventListener("dragover", checkPosition);
243-
document.addEventListener("pointermove", checkPosition);
244-
listenersSet = true;
245-
}
246241
return {
247242
teardown() {
248243
if (parentData.abortControllers.root) {
@@ -259,6 +254,15 @@ function insert(insertConfig) {
259254
handleEnd(state2);
260255
originalHandleend(state2);
261256
};
257+
parentData.on("dragStarted", () => {
258+
documentController = addEvents(document, {
259+
dragover: checkPosition,
260+
pointermove: checkPosition
261+
});
262+
});
263+
parentData.on("dragEnded", () => {
264+
documentController?.abort();
265+
});
262266
parentData.config = insertParentConfig;
263267
state.on("dragStarted", () => {
264268
const insertPoint = parentData.config.insertConfig?.insertPoint({
@@ -730,9 +734,10 @@ function handleEnd(state2) {
730734
var dropSwapState = {
731735
draggedOverNodes: Array(),
732736
initialDraggedIndex: void 0,
733-
transferred: false
737+
transferred: false,
738+
dragging: false
734739
};
735-
var listenersSet2 = false;
740+
var documentController2;
736741
function dropOrSwap(dropSwapConfig = {}) {
737742
return (parent) => {
738743
const parentData = parents.get(parent);
@@ -741,14 +746,6 @@ function dropOrSwap(dropSwapConfig = {}) {
741746
...parentData.config,
742747
dropSwapConfig
743748
};
744-
if (!listenersSet2) {
745-
document.addEventListener("dragover", rootDragover);
746-
document.addEventListener(
747-
"handleRootPointerover",
748-
(e) => rootPointerover(e)
749-
);
750-
listenersSet2 = true;
751-
}
752749
return {
753750
setup() {
754751
dropSwapParentConfig.handleNodeDragover = dropSwapConfig.handleNodeDragover || handleNodeDragover2;
@@ -760,6 +757,15 @@ function dropOrSwap(dropSwapConfig = {}) {
760757
handleEnd2(state2);
761758
originalHandleend(state2);
762759
};
760+
parentData.on("dragStarted", () => {
761+
documentController2 = addEvents(document, {
762+
dragover: rootDragover,
763+
handleRootPointerover: rootPointerover
764+
});
765+
});
766+
parentData.on("dragEnded", () => {
767+
documentController2?.abort();
768+
});
763769
parentData.config = dropSwapParentConfig;
764770
}
765771
};
@@ -969,9 +975,8 @@ function handleEnd2(state2) {
969975

970976
// src/index.ts
971977
var isBrowser = typeof window !== "undefined";
972-
var touchDevice = window && "ontouchstart" in window;
973978
var dropped = false;
974-
var documentController;
979+
var documentController3;
975980
var isNative = false;
976981
var animationFrameId = null;
977982
var nodes = /* @__PURE__ */ new WeakMap();
@@ -1031,6 +1036,7 @@ function resetState() {
10311036
}
10321037
function setDragState(dragStateProps2) {
10331038
Object.assign(state, dragStateProps2);
1039+
dragStateProps2.initialParent.data.emit("dragStarted", state);
10341040
dropped = false;
10351041
state.emit("dragStarted", state);
10361042
return state;
@@ -1068,15 +1074,16 @@ function dragAndDrop({
10681074
config = {}
10691075
}) {
10701076
if (!isBrowser) return;
1071-
if (!documentController)
1072-
documentController = addEvents(document, {
1077+
if (!documentController3)
1078+
documentController3 = addEvents(document, {
10731079
dragover: handleRootDragover,
10741080
pointerdown: handlePointerdownRoot,
10751081
pointerup: handlePointerupRoot,
10761082
keydown: handleRootKeydown,
10771083
drop: handleRootDrop
10781084
});
10791085
tearDown(parent);
1086+
const [emit2, on2] = createEmitter();
10801087
const parentData = {
10811088
getValues,
10821089
setValues,
@@ -1130,7 +1137,9 @@ function dragAndDrop({
11301137
},
11311138
enabledNodes: [],
11321139
abortControllers: {},
1133-
privateClasses: []
1140+
privateClasses: [],
1141+
on: on2,
1142+
emit: emit2
11341143
};
11351144
const nodesObserver = new MutationObserver(nodesMutated);
11361145
nodesObserver.observe(parent, { childList: true });
@@ -1821,6 +1830,7 @@ function handleNodePointerdown(data, state2) {
18211830
);
18221831
return;
18231832
}
1833+
const touchDevice = isBrowser && window && "ontouchstart" in window;
18241834
if (state2.selectedState?.nodes?.length) {
18251835
const idx = state2.selectedState.nodes.findIndex(
18261836
(x) => x.el === data.targetData.node.el
@@ -2818,7 +2828,6 @@ function getRealCoords2(el) {
28182828
tearDownNode,
28192829
tearDownNodeRemap,
28202830
throttle,
2821-
touchDevice,
28222831
transfer,
28232832
treeAncestors,
28242833
updateConfig,

‎dist/index.cjs.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/index.d.cts‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -340,6 +340,8 @@ interface ParentData<T> {
340340
* Set on parentData indicating that the current parent is nested beneath an ancestor.
341341
*/
342342
nestedParent?: ParentRecord<T>;
343+
emit: (event: string, data: unknown) => void;
344+
on: (event: string, callback: CallableFunction) => void;
343345
}
344346
/**
345347
* The data assigned to a given node in the `nodes` weakmap.
@@ -849,14 +851,15 @@ interface DropSwapState {
849851
draggedOverNodes: Array<NodeRecord<unknown>>;
850852
initialDraggedIndex: number | undefined;
851853
transferred: boolean;
854+
dragging: boolean;
852855
}
853856
interface InsertConfig<T> {
854857
insertPoint: (parent: ParentRecord<T>) => HTMLElement;
855858
insertEvent?: (data: InsertEvent<T>) => void;
856859
handleNodeDragover?: (data: NodeDragEventData<T>, state: DragState<T>) => void;
857860
handleParentDragover?: (data: ParentDragEventData<T>, state: DragState<T>) => void;
858-
handleParentPointerover?: (data: PointeroverParentEvent<T>, state: SynthDragState<T>) => void;
859-
handleNodePointerover?: (data: PointeroverNodeEvent<T>, state: SynthDragState<T>) => void;
861+
handleParentPointerover?: (data: PointeroverParentEvent<T>) => void;
862+
handleNodePointerover?: (data: PointeroverNodeEvent<T>) => void;
860863
handleEnd?: (data: NodeDragEventData<T> | NodePointerEventData<T>) => void;
861864
}
862865
interface InsertState<T> {
@@ -869,6 +872,7 @@ interface InsertState<T> {
869872
x: number;
870873
y: number;
871874
};
875+
dragging: boolean;
872876
}
873877
interface InsertEvent<T> {
874878
sourceParent: ParentRecord<T>;
@@ -906,7 +910,6 @@ declare function dropOrSwap<T>(dropSwapConfig?: DropSwapConfig<T>): (parent: HTM
906910
* @internal
907911
*/
908912
declare const isBrowser: boolean;
909-
declare const touchDevice: boolean;
910913
declare const nodes: NodesData<any>;
911914
declare const parents: ParentsData<any>;
912915
declare const treeAncestors: Record<string, HTMLElement>;
@@ -925,7 +928,7 @@ declare function resetState(): void;
925928
*
926929
* @returns void
927930
*/
928-
declare function setDragState<T>(dragStateProps: (SynthDragStateProps & DragStateProps<T>) | DragStateProps<T> | undefined): DragState<T> | SynthDragState<T>;
931+
declare function setDragState<T>(dragStateProps: (SynthDragStateProps & DragStateProps<T>) | DragStateProps<T>): DragState<T> | SynthDragState<T>;
929932
/**
930933
* Initializes the drag and drop functionality for a given parent.
931934
*
@@ -1061,4 +1064,4 @@ declare function eventCoordinates(data: DragEvent | PointerEvent): {
10611064
};
10621065
declare function getRealCoords(el: HTMLElement): Coordinates;
10631066

1064-
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 };
1067+
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 };

‎dist/index.d.ts‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -340,6 +340,8 @@ interface ParentData<T> {
340340
* Set on parentData indicating that the current parent is nested beneath an ancestor.
341341
*/
342342
nestedParent?: ParentRecord<T>;
343+
emit: (event: string, data: unknown) => void;
344+
on: (event: string, callback: CallableFunction) => void;
343345
}
344346
/**
345347
* The data assigned to a given node in the `nodes` weakmap.
@@ -849,14 +851,15 @@ interface DropSwapState {
849851
draggedOverNodes: Array<NodeRecord<unknown>>;
850852
initialDraggedIndex: number | undefined;
851853
transferred: boolean;
854+
dragging: boolean;
852855
}
853856
interface InsertConfig<T> {
854857
insertPoint: (parent: ParentRecord<T>) => HTMLElement;
855858
insertEvent?: (data: InsertEvent<T>) => void;
856859
handleNodeDragover?: (data: NodeDragEventData<T>, state: DragState<T>) => void;
857860
handleParentDragover?: (data: ParentDragEventData<T>, state: DragState<T>) => void;
858-
handleParentPointerover?: (data: PointeroverParentEvent<T>, state: SynthDragState<T>) => void;
859-
handleNodePointerover?: (data: PointeroverNodeEvent<T>, state: SynthDragState<T>) => void;
861+
handleParentPointerover?: (data: PointeroverParentEvent<T>) => void;
862+
handleNodePointerover?: (data: PointeroverNodeEvent<T>) => void;
860863
handleEnd?: (data: NodeDragEventData<T> | NodePointerEventData<T>) => void;
861864
}
862865
interface InsertState<T> {
@@ -869,6 +872,7 @@ interface InsertState<T> {
869872
x: number;
870873
y: number;
871874
};
875+
dragging: boolean;
872876
}
873877
interface InsertEvent<T> {
874878
sourceParent: ParentRecord<T>;
@@ -906,7 +910,6 @@ declare function dropOrSwap<T>(dropSwapConfig?: DropSwapConfig<T>): (parent: HTM
906910
* @internal
907911
*/
908912
declare const isBrowser: boolean;
909-
declare const touchDevice: boolean;
910913
declare const nodes: NodesData<any>;
911914
declare const parents: ParentsData<any>;
912915
declare const treeAncestors: Record<string, HTMLElement>;
@@ -925,7 +928,7 @@ declare function resetState(): void;
925928
*
926929
* @returns void
927930
*/
928-
declare function setDragState<T>(dragStateProps: (SynthDragStateProps & DragStateProps<T>) | DragStateProps<T> | undefined): DragState<T> | SynthDragState<T>;
931+
declare function setDragState<T>(dragStateProps: (SynthDragStateProps & DragStateProps<T>) | DragStateProps<T>): DragState<T> | SynthDragState<T>;
929932
/**
930933
* Initializes the drag and drop functionality for a given parent.
931934
*
@@ -1061,4 +1064,4 @@ declare function eventCoordinates(data: DragEvent | PointerEvent): {
10611064
};
10621065
declare function getRealCoords(el: HTMLElement): Coordinates;
10631066

1064-
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 };
1067+
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 };

0 commit comments

Comments
 (0)