@snapgridjs/dnd 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +36 -0
- package/dist/index.cjs +676 -0
- package/dist/index.d.cts +261 -0
- package/dist/index.d.cts.map +1 -0
- package/dist/index.d.mts +261 -0
- package/dist/index.d.mts.map +1 -0
- package/dist/index.mjs +667 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +66 -0
package/dist/index.d.cts
ADDED
|
@@ -0,0 +1,261 @@
|
|
|
1
|
+
import { Compactor, DragSession, GridConfig, Layout, LayoutItem, PositionParams, ResizeHandleAxis } from "@snapgridjs/core";
|
|
2
|
+
import { Modifier, Modifiers, Sensors } from "@dnd-kit/abstract";
|
|
3
|
+
import { DragDropManager, Feedback, Sensors as Sensors$1 } from "@dnd-kit/dom";
|
|
4
|
+
import { CollisionDetector } from "@dnd-kit/collision";
|
|
5
|
+
|
|
6
|
+
//#region src/types.d.ts
|
|
7
|
+
/**
|
|
8
|
+
* Drag behaviour configuration (mirrors react-grid-layout v2's `dragConfig`).
|
|
9
|
+
* The interaction itself is driven by dnd-kit.
|
|
10
|
+
*/
|
|
11
|
+
interface DragConfig {
|
|
12
|
+
/** Whether items can be dragged. @default true */
|
|
13
|
+
enabled?: boolean;
|
|
14
|
+
/** Keep the dragged item within the grid container bounds. @default false */
|
|
15
|
+
bounded?: boolean;
|
|
16
|
+
/** CSS selector for a drag handle inside each item. */
|
|
17
|
+
handle?: string;
|
|
18
|
+
/** CSS selector for regions that should cancel a drag. */
|
|
19
|
+
cancel?: string;
|
|
20
|
+
/** Pixels the pointer must move before a drag starts. @default 3 */
|
|
21
|
+
threshold?: number;
|
|
22
|
+
/**
|
|
23
|
+
* snapgrid extra: snap the dragged tile itself to grid cells while dragging.
|
|
24
|
+
* When `false` (the default, matching react-grid-layout) the tile follows the
|
|
25
|
+
* pointer smoothly and only the placeholder snaps.
|
|
26
|
+
*/
|
|
27
|
+
snapToGrid?: boolean;
|
|
28
|
+
}
|
|
29
|
+
/**
|
|
30
|
+
* Resize behaviour configuration (mirrors react-grid-layout v2's `resizeConfig`).
|
|
31
|
+
*/
|
|
32
|
+
interface ResizeConfig {
|
|
33
|
+
/** Whether items can be resized. @default true */
|
|
34
|
+
enabled?: boolean;
|
|
35
|
+
/** Which handles to show on each item (item-level `resizeHandles` overrides). @default ['se'] */
|
|
36
|
+
handles?: ResizeHandleAxis[];
|
|
37
|
+
}
|
|
38
|
+
/** Minimal source shape passed to a {@link DropConfig.accept} predicate. */
|
|
39
|
+
interface DragSourceInfo {
|
|
40
|
+
id: string | number;
|
|
41
|
+
type?: unknown;
|
|
42
|
+
data?: unknown;
|
|
43
|
+
}
|
|
44
|
+
/**
|
|
45
|
+
* Accept arbitrary (non-grid) dnd-kit draggables dropped into the grid. The
|
|
46
|
+
* external draggable should carry `data.snapGridDrop = { i?, w?, h? }` to control
|
|
47
|
+
* the inserted item's id/size; otherwise `defaultItem` is used. On drop the grid
|
|
48
|
+
* fires `onDrop(layout, item, event)` rather than `onLayoutChange`.
|
|
49
|
+
*
|
|
50
|
+
* Requires the grid and the external draggable to share one provider
|
|
51
|
+
* (e.g. both inside a `<SnapGridGroup>`).
|
|
52
|
+
*/
|
|
53
|
+
interface DropConfig {
|
|
54
|
+
/** Accept external draggables. @default false */
|
|
55
|
+
enabled?: boolean;
|
|
56
|
+
/** Default size for a dropped item when the source omits `snapGridDrop`. @default { w: 1, h: 1 } */
|
|
57
|
+
defaultItem?: {
|
|
58
|
+
w: number;
|
|
59
|
+
h: number;
|
|
60
|
+
};
|
|
61
|
+
/** Restrict which external sources are accepted. @default accept any non-grid draggable */
|
|
62
|
+
accept?: (source: DragSourceInfo) => boolean;
|
|
63
|
+
}
|
|
64
|
+
/** The `data.snapGridDrop` payload an external draggable carries to drop into a grid. */
|
|
65
|
+
interface GridDropData {
|
|
66
|
+
/** Id for the inserted item (a unique one is generated if omitted). */
|
|
67
|
+
i?: string;
|
|
68
|
+
/** Width in grid units. */
|
|
69
|
+
w?: number;
|
|
70
|
+
/** Height in grid units. */
|
|
71
|
+
h?: number;
|
|
72
|
+
}
|
|
73
|
+
/**
|
|
74
|
+
* react-grid-layout-compatible lifecycle callback.
|
|
75
|
+
* `(layout, oldItem, newItem, placeholder, event, node)`
|
|
76
|
+
*/
|
|
77
|
+
type GridEventCallback = (layout: Layout, oldItem: LayoutItem | null, newItem: LayoutItem | null, placeholder: LayoutItem | null, event: Event | null, node: HTMLElement | null) => void;
|
|
78
|
+
//#endregion
|
|
79
|
+
//#region src/dnd/dragData.d.ts
|
|
80
|
+
/**
|
|
81
|
+
* Data attached to the dnd-kit draggables snapgrid creates. `group` is the owning
|
|
82
|
+
* grid's id, so the centralized {@link SnapGridEngine} can resolve the source
|
|
83
|
+
* grid's controller from the drag payload (one engine drives every grid).
|
|
84
|
+
*/
|
|
85
|
+
type SnapGridDragData = {
|
|
86
|
+
kind: "move";
|
|
87
|
+
itemId: string;
|
|
88
|
+
item: LayoutItem;
|
|
89
|
+
group: string;
|
|
90
|
+
} | {
|
|
91
|
+
kind: "resize";
|
|
92
|
+
itemId: string;
|
|
93
|
+
handle: ResizeHandleAxis;
|
|
94
|
+
group: string;
|
|
95
|
+
};
|
|
96
|
+
//#endregion
|
|
97
|
+
//#region src/controller/GridController.d.ts
|
|
98
|
+
/**
|
|
99
|
+
* The per-grid drag/resize callbacks the consumer supplied. Published to the
|
|
100
|
+
* controller so the shared {@link SnapGridEngine} can invoke the RIGHT grid's
|
|
101
|
+
* callbacks at the right phase (the engine is manager-wide; callbacks are per-grid).
|
|
102
|
+
*/
|
|
103
|
+
interface GridCallbacks {
|
|
104
|
+
onDragStart?: GridEventCallback;
|
|
105
|
+
onDrag?: GridEventCallback;
|
|
106
|
+
onDragStop?: GridEventCallback;
|
|
107
|
+
onResizeStart?: GridEventCallback;
|
|
108
|
+
onResize?: GridEventCallback;
|
|
109
|
+
onResizeStop?: GridEventCallback;
|
|
110
|
+
onLayoutChange?: (layout: Layout) => void;
|
|
111
|
+
onDrop?: (layout: Layout, item: LayoutItem, event: Event | null) => void;
|
|
112
|
+
}
|
|
113
|
+
/**
|
|
114
|
+
* Per-grid configuration the container host writes to the controller each render
|
|
115
|
+
* (during render, so items that resolve this controller by `group` read fresh
|
|
116
|
+
* config on the same pass). Also the seam the manager-wide {@link SnapGridEngine}
|
|
117
|
+
* reads per-grid geometry, compaction, gates, and callbacks from.
|
|
118
|
+
*/
|
|
119
|
+
interface GridControllerConfig {
|
|
120
|
+
positionParams: PositionParams;
|
|
121
|
+
gridConfig: GridConfig;
|
|
122
|
+
width: number;
|
|
123
|
+
autoSize: boolean;
|
|
124
|
+
itemSensors: Sensors;
|
|
125
|
+
itemModifiers: Modifiers;
|
|
126
|
+
isItemDraggable: (id: string) => boolean;
|
|
127
|
+
isItemResizable: (id: string) => boolean;
|
|
128
|
+
resizeHandlesFor: (id: string) => readonly ResizeHandleAxis[];
|
|
129
|
+
compactor: Compactor;
|
|
130
|
+
dragConfig?: DragConfig;
|
|
131
|
+
dropConfig?: DropConfig;
|
|
132
|
+
callbacks: GridCallbacks;
|
|
133
|
+
}
|
|
134
|
+
interface ItemSnapshot {
|
|
135
|
+
item: LayoutItem | undefined;
|
|
136
|
+
isDragging: boolean;
|
|
137
|
+
hidden: boolean;
|
|
138
|
+
}
|
|
139
|
+
interface ResizeSnapshot {
|
|
140
|
+
isResizing: boolean;
|
|
141
|
+
}
|
|
142
|
+
/**
|
|
143
|
+
* Live per-grid drag/resize state as a plain observable: the provider writes
|
|
144
|
+
* (`setSession`/`setKeyboard`/`setCommitted`), hooks subscribe to just their own
|
|
145
|
+
* slice via `useSyncExternalStore`. Value-cached snapshots mean a drag re-renders
|
|
146
|
+
* only the tiles whose slice changed, not the whole subtree (the old
|
|
147
|
+
* context-value model re-rendered every tile every frame).
|
|
148
|
+
*/
|
|
149
|
+
declare class GridController {
|
|
150
|
+
#private;
|
|
151
|
+
id: string;
|
|
152
|
+
config: GridControllerConfig | null;
|
|
153
|
+
/** The dnd-kit manager this grid is registered with (set by useInstance). */
|
|
154
|
+
manager: DragDropManager | undefined;
|
|
155
|
+
/**
|
|
156
|
+
* This grid's container element, reported by the host. The engine reads it to
|
|
157
|
+
* map a pointer to a cell when receiving a tile (its `getBoundingClientRect`).
|
|
158
|
+
*/
|
|
159
|
+
element: Element | null;
|
|
160
|
+
constructor(id: string, committed?: Layout, manager?: DragDropManager);
|
|
161
|
+
/** The committed (base) layout — the engine's source of truth during a drag. */
|
|
162
|
+
getCommitted(): Layout;
|
|
163
|
+
/** Replace the per-grid config (called by the container host during render). */
|
|
164
|
+
setConfig(config: GridControllerConfig): void;
|
|
165
|
+
/**
|
|
166
|
+
* Re-point this grid's id. The container host syncs it (during render, before
|
|
167
|
+
* the droppable/group read it) when the controlled `id` prop changes, so the
|
|
168
|
+
* returned `group`, the droppable id, and the registry key never drift apart.
|
|
169
|
+
*/
|
|
170
|
+
setId(id: string): void;
|
|
171
|
+
register: () => void;
|
|
172
|
+
subscribe: (listener: () => void) => (() => void);
|
|
173
|
+
/**
|
|
174
|
+
* Sync the committed layout from the controlled `layout` prop. Called during
|
|
175
|
+
* the provider's render, so it must NOT notify — emitting here would update
|
|
176
|
+
* subscribed GridItems mid-render (a React "setState while rendering" error).
|
|
177
|
+
* No notify is needed: a `layout` prop change already re-renders the whole
|
|
178
|
+
* provider subtree, so every GridItem re-reads its snapshot on that pass.
|
|
179
|
+
*/
|
|
180
|
+
setCommitted(layout: Layout): void;
|
|
181
|
+
setSession(next: DragSession | null): void;
|
|
182
|
+
getSession(): DragSession | null;
|
|
183
|
+
/** Record whether the active drag is keyboard-driven (drives `hidden`). */
|
|
184
|
+
setKeyboard(value: boolean): void;
|
|
185
|
+
itemSnapshot: (id: string) => ItemSnapshot;
|
|
186
|
+
placeholderSnapshot: () => LayoutItem | null;
|
|
187
|
+
resizeSnapshot: (itemId: string) => ResizeSnapshot;
|
|
188
|
+
renderedSnapshot: () => Layout;
|
|
189
|
+
/** A stable index for `id` (see {@link GridController.#indexById}). */
|
|
190
|
+
itemIndex(id: string): number;
|
|
191
|
+
}
|
|
192
|
+
//#endregion
|
|
193
|
+
//#region src/controller/registry.d.ts
|
|
194
|
+
/** Register a controller under `id` for `manager`. Returns an unregister fn. */
|
|
195
|
+
declare function registerController(manager: object | null | undefined, id: string, controller: GridController): () => void;
|
|
196
|
+
/** The controller registered under `id` for `manager`, or undefined. */
|
|
197
|
+
declare function getController(manager: object | null | undefined, id: string): GridController | undefined;
|
|
198
|
+
//#endregion
|
|
199
|
+
//#region src/dnd/SnapGridEngine.d.ts
|
|
200
|
+
/** Ensure the engine is attached to `manager`; returns a detach (ref-decrement) fn. */
|
|
201
|
+
declare function attachEngine(manager: DragDropManager): () => void;
|
|
202
|
+
//#endregion
|
|
203
|
+
//#region src/dnd/collision.d.ts
|
|
204
|
+
/**
|
|
205
|
+
* Marker attribute set on every grid container element. Used by {@link gridDepth}
|
|
206
|
+
* to measure how deeply a grid is nested, purely from the DOM.
|
|
207
|
+
*/
|
|
208
|
+
declare const SNAPGRID_GRID_ATTR = "data-snapgrid-grid";
|
|
209
|
+
/**
|
|
210
|
+
* Collision detector for grid droppables. Runs dnd-kit's default detector, then —
|
|
211
|
+
* when nested grid rects overlap (the pointer is over both an inner grid and its
|
|
212
|
+
* outer one) — ranks the **innermost** grid highest by boosting priority with the
|
|
213
|
+
* grid's nesting depth. Without this, overlapping grids tie on priority and the
|
|
214
|
+
* winner is arbitrary. For non-nested grids depth is 0, so priority is unchanged.
|
|
215
|
+
*/
|
|
216
|
+
declare const gridCollisionDetector: CollisionDetector;
|
|
217
|
+
//#endregion
|
|
218
|
+
//#region src/dnd/snapToGrid.d.ts
|
|
219
|
+
interface SnapToGridOptions {
|
|
220
|
+
/** Current geometry (changes with container width). Read fresh each apply(). */
|
|
221
|
+
getPositionParams: () => PositionParams;
|
|
222
|
+
/** Whether snapping is currently enabled (dragConfig.snapToGrid). */
|
|
223
|
+
isEnabled: () => boolean;
|
|
224
|
+
}
|
|
225
|
+
/**
|
|
226
|
+
* Quantizes the dragged item's transform to whole grid cells, so the floating
|
|
227
|
+
* <DragOverlay> clone jumps cell-to-cell in lockstep with the (always-snapped)
|
|
228
|
+
* placeholder instead of tracking the pointer smoothly. Applied on the item
|
|
229
|
+
* draggable; a no-op unless `dragConfig.snapToGrid` is set.
|
|
230
|
+
*/
|
|
231
|
+
declare class SnapToGrid extends Modifier<DragDropManager, SnapToGridOptions> {
|
|
232
|
+
apply({
|
|
233
|
+
transform
|
|
234
|
+
}: DragDropManager["dragOperation"]): {
|
|
235
|
+
x: number;
|
|
236
|
+
y: number;
|
|
237
|
+
};
|
|
238
|
+
}
|
|
239
|
+
//#endregion
|
|
240
|
+
//#region src/dnd/entity.d.ts
|
|
241
|
+
/**
|
|
242
|
+
* The DOM element of a dnd-kit entity (a draggable, droppable, or drag source).
|
|
243
|
+
* dnd-kit's abstract types don't expose `element`, but the DOM layer snapgrid
|
|
244
|
+
* runs on always sets it — this centralizes that one assumption (and the cast)
|
|
245
|
+
* in a single place instead of scattering it across the drag code.
|
|
246
|
+
*/
|
|
247
|
+
declare function domElement(entity: object | null | undefined): Element | null;
|
|
248
|
+
//#endregion
|
|
249
|
+
//#region src/dndShared.d.ts
|
|
250
|
+
/** Marker attribute placed on resize-handle elements. */
|
|
251
|
+
declare const RESIZE_HANDLE_ATTR = "data-snapgrid-resize-handle";
|
|
252
|
+
declare const NO_FEEDBACK: import("@dnd-kit/abstract").PluginDescriptor<any, any, typeof Feedback>[];
|
|
253
|
+
/**
|
|
254
|
+
* Sensors for item (move) draggables, built from the drag config: a distance
|
|
255
|
+
* activation threshold (so clicks don't start drags) plus handle/cancel/resize
|
|
256
|
+
* gating, with the keyboard sensor kept for accessibility.
|
|
257
|
+
*/
|
|
258
|
+
declare function buildItemSensors(threshold: number, getDragConfig: () => DragConfig | undefined): Sensors$1;
|
|
259
|
+
//#endregion
|
|
260
|
+
export { type DragConfig, type DragSourceInfo, type DropConfig, type GridCallbacks, GridController, type GridControllerConfig, type GridDropData, type GridEventCallback, type ItemSnapshot, NO_FEEDBACK, RESIZE_HANDLE_ATTR, type ResizeConfig, type ResizeSnapshot, SNAPGRID_GRID_ATTR, type SnapGridDragData, SnapToGrid, attachEngine, buildItemSensors, domElement, getController, gridCollisionDetector, registerController };
|
|
261
|
+
//# sourceMappingURL=index.d.cts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.cts","names":[],"sources":["../src/types.ts","../src/dnd/dragData.ts","../src/controller/GridController.ts","../src/controller/registry.ts","../src/dnd/SnapGridEngine.ts","../src/dnd/collision.ts","../src/dnd/snapToGrid.ts","../src/dnd/entity.ts","../src/dndShared.ts"],"mappings":"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"}
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,261 @@
|
|
|
1
|
+
import { Compactor, DragSession, GridConfig, Layout, LayoutItem, PositionParams, ResizeHandleAxis } from "@snapgridjs/core";
|
|
2
|
+
import { CollisionDetector } from "@dnd-kit/collision";
|
|
3
|
+
import { Modifier, Modifiers, Sensors } from "@dnd-kit/abstract";
|
|
4
|
+
import { DragDropManager, Feedback, Sensors as Sensors$1 } from "@dnd-kit/dom";
|
|
5
|
+
|
|
6
|
+
//#region src/types.d.ts
|
|
7
|
+
/**
|
|
8
|
+
* Drag behaviour configuration (mirrors react-grid-layout v2's `dragConfig`).
|
|
9
|
+
* The interaction itself is driven by dnd-kit.
|
|
10
|
+
*/
|
|
11
|
+
interface DragConfig {
|
|
12
|
+
/** Whether items can be dragged. @default true */
|
|
13
|
+
enabled?: boolean;
|
|
14
|
+
/** Keep the dragged item within the grid container bounds. @default false */
|
|
15
|
+
bounded?: boolean;
|
|
16
|
+
/** CSS selector for a drag handle inside each item. */
|
|
17
|
+
handle?: string;
|
|
18
|
+
/** CSS selector for regions that should cancel a drag. */
|
|
19
|
+
cancel?: string;
|
|
20
|
+
/** Pixels the pointer must move before a drag starts. @default 3 */
|
|
21
|
+
threshold?: number;
|
|
22
|
+
/**
|
|
23
|
+
* snapgrid extra: snap the dragged tile itself to grid cells while dragging.
|
|
24
|
+
* When `false` (the default, matching react-grid-layout) the tile follows the
|
|
25
|
+
* pointer smoothly and only the placeholder snaps.
|
|
26
|
+
*/
|
|
27
|
+
snapToGrid?: boolean;
|
|
28
|
+
}
|
|
29
|
+
/**
|
|
30
|
+
* Resize behaviour configuration (mirrors react-grid-layout v2's `resizeConfig`).
|
|
31
|
+
*/
|
|
32
|
+
interface ResizeConfig {
|
|
33
|
+
/** Whether items can be resized. @default true */
|
|
34
|
+
enabled?: boolean;
|
|
35
|
+
/** Which handles to show on each item (item-level `resizeHandles` overrides). @default ['se'] */
|
|
36
|
+
handles?: ResizeHandleAxis[];
|
|
37
|
+
}
|
|
38
|
+
/** Minimal source shape passed to a {@link DropConfig.accept} predicate. */
|
|
39
|
+
interface DragSourceInfo {
|
|
40
|
+
id: string | number;
|
|
41
|
+
type?: unknown;
|
|
42
|
+
data?: unknown;
|
|
43
|
+
}
|
|
44
|
+
/**
|
|
45
|
+
* Accept arbitrary (non-grid) dnd-kit draggables dropped into the grid. The
|
|
46
|
+
* external draggable should carry `data.snapGridDrop = { i?, w?, h? }` to control
|
|
47
|
+
* the inserted item's id/size; otherwise `defaultItem` is used. On drop the grid
|
|
48
|
+
* fires `onDrop(layout, item, event)` rather than `onLayoutChange`.
|
|
49
|
+
*
|
|
50
|
+
* Requires the grid and the external draggable to share one provider
|
|
51
|
+
* (e.g. both inside a `<SnapGridGroup>`).
|
|
52
|
+
*/
|
|
53
|
+
interface DropConfig {
|
|
54
|
+
/** Accept external draggables. @default false */
|
|
55
|
+
enabled?: boolean;
|
|
56
|
+
/** Default size for a dropped item when the source omits `snapGridDrop`. @default { w: 1, h: 1 } */
|
|
57
|
+
defaultItem?: {
|
|
58
|
+
w: number;
|
|
59
|
+
h: number;
|
|
60
|
+
};
|
|
61
|
+
/** Restrict which external sources are accepted. @default accept any non-grid draggable */
|
|
62
|
+
accept?: (source: DragSourceInfo) => boolean;
|
|
63
|
+
}
|
|
64
|
+
/** The `data.snapGridDrop` payload an external draggable carries to drop into a grid. */
|
|
65
|
+
interface GridDropData {
|
|
66
|
+
/** Id for the inserted item (a unique one is generated if omitted). */
|
|
67
|
+
i?: string;
|
|
68
|
+
/** Width in grid units. */
|
|
69
|
+
w?: number;
|
|
70
|
+
/** Height in grid units. */
|
|
71
|
+
h?: number;
|
|
72
|
+
}
|
|
73
|
+
/**
|
|
74
|
+
* react-grid-layout-compatible lifecycle callback.
|
|
75
|
+
* `(layout, oldItem, newItem, placeholder, event, node)`
|
|
76
|
+
*/
|
|
77
|
+
type GridEventCallback = (layout: Layout, oldItem: LayoutItem | null, newItem: LayoutItem | null, placeholder: LayoutItem | null, event: Event | null, node: HTMLElement | null) => void;
|
|
78
|
+
//#endregion
|
|
79
|
+
//#region src/dnd/dragData.d.ts
|
|
80
|
+
/**
|
|
81
|
+
* Data attached to the dnd-kit draggables snapgrid creates. `group` is the owning
|
|
82
|
+
* grid's id, so the centralized {@link SnapGridEngine} can resolve the source
|
|
83
|
+
* grid's controller from the drag payload (one engine drives every grid).
|
|
84
|
+
*/
|
|
85
|
+
type SnapGridDragData = {
|
|
86
|
+
kind: "move";
|
|
87
|
+
itemId: string;
|
|
88
|
+
item: LayoutItem;
|
|
89
|
+
group: string;
|
|
90
|
+
} | {
|
|
91
|
+
kind: "resize";
|
|
92
|
+
itemId: string;
|
|
93
|
+
handle: ResizeHandleAxis;
|
|
94
|
+
group: string;
|
|
95
|
+
};
|
|
96
|
+
//#endregion
|
|
97
|
+
//#region src/controller/GridController.d.ts
|
|
98
|
+
/**
|
|
99
|
+
* The per-grid drag/resize callbacks the consumer supplied. Published to the
|
|
100
|
+
* controller so the shared {@link SnapGridEngine} can invoke the RIGHT grid's
|
|
101
|
+
* callbacks at the right phase (the engine is manager-wide; callbacks are per-grid).
|
|
102
|
+
*/
|
|
103
|
+
interface GridCallbacks {
|
|
104
|
+
onDragStart?: GridEventCallback;
|
|
105
|
+
onDrag?: GridEventCallback;
|
|
106
|
+
onDragStop?: GridEventCallback;
|
|
107
|
+
onResizeStart?: GridEventCallback;
|
|
108
|
+
onResize?: GridEventCallback;
|
|
109
|
+
onResizeStop?: GridEventCallback;
|
|
110
|
+
onLayoutChange?: (layout: Layout) => void;
|
|
111
|
+
onDrop?: (layout: Layout, item: LayoutItem, event: Event | null) => void;
|
|
112
|
+
}
|
|
113
|
+
/**
|
|
114
|
+
* Per-grid configuration the container host writes to the controller each render
|
|
115
|
+
* (during render, so items that resolve this controller by `group` read fresh
|
|
116
|
+
* config on the same pass). Also the seam the manager-wide {@link SnapGridEngine}
|
|
117
|
+
* reads per-grid geometry, compaction, gates, and callbacks from.
|
|
118
|
+
*/
|
|
119
|
+
interface GridControllerConfig {
|
|
120
|
+
positionParams: PositionParams;
|
|
121
|
+
gridConfig: GridConfig;
|
|
122
|
+
width: number;
|
|
123
|
+
autoSize: boolean;
|
|
124
|
+
itemSensors: Sensors;
|
|
125
|
+
itemModifiers: Modifiers;
|
|
126
|
+
isItemDraggable: (id: string) => boolean;
|
|
127
|
+
isItemResizable: (id: string) => boolean;
|
|
128
|
+
resizeHandlesFor: (id: string) => readonly ResizeHandleAxis[];
|
|
129
|
+
compactor: Compactor;
|
|
130
|
+
dragConfig?: DragConfig;
|
|
131
|
+
dropConfig?: DropConfig;
|
|
132
|
+
callbacks: GridCallbacks;
|
|
133
|
+
}
|
|
134
|
+
interface ItemSnapshot {
|
|
135
|
+
item: LayoutItem | undefined;
|
|
136
|
+
isDragging: boolean;
|
|
137
|
+
hidden: boolean;
|
|
138
|
+
}
|
|
139
|
+
interface ResizeSnapshot {
|
|
140
|
+
isResizing: boolean;
|
|
141
|
+
}
|
|
142
|
+
/**
|
|
143
|
+
* Live per-grid drag/resize state as a plain observable: the provider writes
|
|
144
|
+
* (`setSession`/`setKeyboard`/`setCommitted`), hooks subscribe to just their own
|
|
145
|
+
* slice via `useSyncExternalStore`. Value-cached snapshots mean a drag re-renders
|
|
146
|
+
* only the tiles whose slice changed, not the whole subtree (the old
|
|
147
|
+
* context-value model re-rendered every tile every frame).
|
|
148
|
+
*/
|
|
149
|
+
declare class GridController {
|
|
150
|
+
#private;
|
|
151
|
+
id: string;
|
|
152
|
+
config: GridControllerConfig | null;
|
|
153
|
+
/** The dnd-kit manager this grid is registered with (set by useInstance). */
|
|
154
|
+
manager: DragDropManager | undefined;
|
|
155
|
+
/**
|
|
156
|
+
* This grid's container element, reported by the host. The engine reads it to
|
|
157
|
+
* map a pointer to a cell when receiving a tile (its `getBoundingClientRect`).
|
|
158
|
+
*/
|
|
159
|
+
element: Element | null;
|
|
160
|
+
constructor(id: string, committed?: Layout, manager?: DragDropManager);
|
|
161
|
+
/** The committed (base) layout — the engine's source of truth during a drag. */
|
|
162
|
+
getCommitted(): Layout;
|
|
163
|
+
/** Replace the per-grid config (called by the container host during render). */
|
|
164
|
+
setConfig(config: GridControllerConfig): void;
|
|
165
|
+
/**
|
|
166
|
+
* Re-point this grid's id. The container host syncs it (during render, before
|
|
167
|
+
* the droppable/group read it) when the controlled `id` prop changes, so the
|
|
168
|
+
* returned `group`, the droppable id, and the registry key never drift apart.
|
|
169
|
+
*/
|
|
170
|
+
setId(id: string): void;
|
|
171
|
+
register: () => void;
|
|
172
|
+
subscribe: (listener: () => void) => (() => void);
|
|
173
|
+
/**
|
|
174
|
+
* Sync the committed layout from the controlled `layout` prop. Called during
|
|
175
|
+
* the provider's render, so it must NOT notify — emitting here would update
|
|
176
|
+
* subscribed GridItems mid-render (a React "setState while rendering" error).
|
|
177
|
+
* No notify is needed: a `layout` prop change already re-renders the whole
|
|
178
|
+
* provider subtree, so every GridItem re-reads its snapshot on that pass.
|
|
179
|
+
*/
|
|
180
|
+
setCommitted(layout: Layout): void;
|
|
181
|
+
setSession(next: DragSession | null): void;
|
|
182
|
+
getSession(): DragSession | null;
|
|
183
|
+
/** Record whether the active drag is keyboard-driven (drives `hidden`). */
|
|
184
|
+
setKeyboard(value: boolean): void;
|
|
185
|
+
itemSnapshot: (id: string) => ItemSnapshot;
|
|
186
|
+
placeholderSnapshot: () => LayoutItem | null;
|
|
187
|
+
resizeSnapshot: (itemId: string) => ResizeSnapshot;
|
|
188
|
+
renderedSnapshot: () => Layout;
|
|
189
|
+
/** A stable index for `id` (see {@link GridController.#indexById}). */
|
|
190
|
+
itemIndex(id: string): number;
|
|
191
|
+
}
|
|
192
|
+
//#endregion
|
|
193
|
+
//#region src/controller/registry.d.ts
|
|
194
|
+
/** Register a controller under `id` for `manager`. Returns an unregister fn. */
|
|
195
|
+
declare function registerController(manager: object | null | undefined, id: string, controller: GridController): () => void;
|
|
196
|
+
/** The controller registered under `id` for `manager`, or undefined. */
|
|
197
|
+
declare function getController(manager: object | null | undefined, id: string): GridController | undefined;
|
|
198
|
+
//#endregion
|
|
199
|
+
//#region src/dnd/SnapGridEngine.d.ts
|
|
200
|
+
/** Ensure the engine is attached to `manager`; returns a detach (ref-decrement) fn. */
|
|
201
|
+
declare function attachEngine(manager: DragDropManager): () => void;
|
|
202
|
+
//#endregion
|
|
203
|
+
//#region src/dnd/collision.d.ts
|
|
204
|
+
/**
|
|
205
|
+
* Marker attribute set on every grid container element. Used by {@link gridDepth}
|
|
206
|
+
* to measure how deeply a grid is nested, purely from the DOM.
|
|
207
|
+
*/
|
|
208
|
+
declare const SNAPGRID_GRID_ATTR = "data-snapgrid-grid";
|
|
209
|
+
/**
|
|
210
|
+
* Collision detector for grid droppables. Runs dnd-kit's default detector, then —
|
|
211
|
+
* when nested grid rects overlap (the pointer is over both an inner grid and its
|
|
212
|
+
* outer one) — ranks the **innermost** grid highest by boosting priority with the
|
|
213
|
+
* grid's nesting depth. Without this, overlapping grids tie on priority and the
|
|
214
|
+
* winner is arbitrary. For non-nested grids depth is 0, so priority is unchanged.
|
|
215
|
+
*/
|
|
216
|
+
declare const gridCollisionDetector: CollisionDetector;
|
|
217
|
+
//#endregion
|
|
218
|
+
//#region src/dnd/snapToGrid.d.ts
|
|
219
|
+
interface SnapToGridOptions {
|
|
220
|
+
/** Current geometry (changes with container width). Read fresh each apply(). */
|
|
221
|
+
getPositionParams: () => PositionParams;
|
|
222
|
+
/** Whether snapping is currently enabled (dragConfig.snapToGrid). */
|
|
223
|
+
isEnabled: () => boolean;
|
|
224
|
+
}
|
|
225
|
+
/**
|
|
226
|
+
* Quantizes the dragged item's transform to whole grid cells, so the floating
|
|
227
|
+
* <DragOverlay> clone jumps cell-to-cell in lockstep with the (always-snapped)
|
|
228
|
+
* placeholder instead of tracking the pointer smoothly. Applied on the item
|
|
229
|
+
* draggable; a no-op unless `dragConfig.snapToGrid` is set.
|
|
230
|
+
*/
|
|
231
|
+
declare class SnapToGrid extends Modifier<DragDropManager, SnapToGridOptions> {
|
|
232
|
+
apply({
|
|
233
|
+
transform
|
|
234
|
+
}: DragDropManager["dragOperation"]): {
|
|
235
|
+
x: number;
|
|
236
|
+
y: number;
|
|
237
|
+
};
|
|
238
|
+
}
|
|
239
|
+
//#endregion
|
|
240
|
+
//#region src/dnd/entity.d.ts
|
|
241
|
+
/**
|
|
242
|
+
* The DOM element of a dnd-kit entity (a draggable, droppable, or drag source).
|
|
243
|
+
* dnd-kit's abstract types don't expose `element`, but the DOM layer snapgrid
|
|
244
|
+
* runs on always sets it — this centralizes that one assumption (and the cast)
|
|
245
|
+
* in a single place instead of scattering it across the drag code.
|
|
246
|
+
*/
|
|
247
|
+
declare function domElement(entity: object | null | undefined): Element | null;
|
|
248
|
+
//#endregion
|
|
249
|
+
//#region src/dndShared.d.ts
|
|
250
|
+
/** Marker attribute placed on resize-handle elements. */
|
|
251
|
+
declare const RESIZE_HANDLE_ATTR = "data-snapgrid-resize-handle";
|
|
252
|
+
declare const NO_FEEDBACK: import("@dnd-kit/abstract").PluginDescriptor<any, any, typeof Feedback>[];
|
|
253
|
+
/**
|
|
254
|
+
* Sensors for item (move) draggables, built from the drag config: a distance
|
|
255
|
+
* activation threshold (so clicks don't start drags) plus handle/cancel/resize
|
|
256
|
+
* gating, with the keyboard sensor kept for accessibility.
|
|
257
|
+
*/
|
|
258
|
+
declare function buildItemSensors(threshold: number, getDragConfig: () => DragConfig | undefined): Sensors$1;
|
|
259
|
+
//#endregion
|
|
260
|
+
export { type DragConfig, type DragSourceInfo, type DropConfig, type GridCallbacks, GridController, type GridControllerConfig, type GridDropData, type GridEventCallback, type ItemSnapshot, NO_FEEDBACK, RESIZE_HANDLE_ATTR, type ResizeConfig, type ResizeSnapshot, SNAPGRID_GRID_ATTR, type SnapGridDragData, SnapToGrid, attachEngine, buildItemSensors, domElement, getController, gridCollisionDetector, registerController };
|
|
261
|
+
//# sourceMappingURL=index.d.mts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.mts","names":[],"sources":["../src/types.ts","../src/dnd/dragData.ts","../src/controller/GridController.ts","../src/controller/registry.ts","../src/dnd/SnapGridEngine.ts","../src/dnd/collision.ts","../src/dnd/snapToGrid.ts","../src/dnd/entity.ts","../src/dndShared.ts"],"mappings":"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"}
|