@dashfoo/react 0.5.2 → 0.6.1
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/README.md +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +223 -154
- package/dist/index.js.map +1 -1
- package/package.json +11 -10
package/README.md
CHANGED
|
@@ -15,7 +15,7 @@ paint.
|
|
|
15
15
|
It builds on three engines:
|
|
16
16
|
|
|
17
17
|
- **[react-resizable-panels](https://github.com/bvaughn/react-resizable-panels)** for splitter resize (the resize adapter is the only file that imports it).
|
|
18
|
-
- **[@dnd-kit/dom](https://github.com/clauderic/dnd-kit) 0.5** — the framework-agnostic core (no React bindings) — for drag (the drag adapter
|
|
18
|
+
- **[@dnd-kit/dom](https://github.com/clauderic/dnd-kit) 0.5** — the framework-agnostic core (no React bindings) — for drag (touched only by the drag adapter modules: `drag-adapter`/`drag-hooks`/`drag-overlays`; pointer-only). Tabsets are dnd-kit droppables behind a custom occlusion-aware collision detector; the preview chip rides the Feedback plugin's `overlay` accessor.
|
|
19
19
|
- **[@dashfoo/core](https://www.npmjs.com/package/@dashfoo/core)** for the document: a zod schema, a pure reducer, and the XState machines that drive state and the drag lifecycle.
|
|
20
20
|
|
|
21
21
|
## Install
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","names":[],"sources":["../src/hooks/persistence.ts","../src/components/dashfoo-layout.tsx","../src/components/drag-root.tsx","../src/hooks/drag-hooks.tsx","../src/components/drag-adapter.tsx","../src/components/float-layer.tsx","../src/components/layout-root.tsx","../src/components/row-view.tsx","../src/components/tabset/tabset-view.tsx","../src/components/layout.tsx","../src/components/panel.tsx","../src/components/tabset/tabset-tab-controls.tsx","../src/components/tabset/tabset-content.tsx","../src/components/tabset/tabset-toolbar.tsx","../src/components/tabset/tabset-root.tsx","../src/components/tabset/tabset-tab.tsx","../src/components/tabset/tabset-tablist.tsx","../src/components/tabset/tabset.ts","../src/components/tab-overflow.tsx","../src/components/tabset/tabset-store.ts","../src/hooks/layout-store.ts","../src/hooks/responsive.ts","../src/hooks/store.ts"],"mappings":";;;;KAQK,cAAA;EACH,OAAA,GAAU,GAAA;EACV,UAAA,GAAa,GAAA;EACb,OAAA,GAAU,GAAA,UAAa,KAAA;AAAA;AAAA,cAGnB,oBAAA,QAA2B,cAWhC;AAAA,cAIK,mBAAA,EAAqB,cAiC1B;AAAA,KAII,aAAA;EACH,UAAA;EACA,GAAA;EACA,OAAA,EAAS,cAAc;AAAA;AAAA,KAGpB,WAAA;EACH,KAAA;EAEA,YAAA,EAAc,OAAA;EACd,IAAA,GAAO,KAAA,EAAO,OAAO;AAAA;AAAA,cASjB,cAAA,GACJ,MAAA,EAAQ,aAAA,SACR,YAAA,EAAc,OAAA,iBACb,WAAA;;;KC3DE,YAAA;EAA0B,UAAA;EAAqB,GAAA;EAAa,OAAA,GAAU,cAAc;AAAA;AAAA,KAmBpF,YAAA,GAAe,aAAa;EAAG,IAAA,EAAM,OAAA;AAAA;AAAA,KAOrC,aAAA;EACH,MAAA,GACE,GAAA,EAAK,OAAA,EACL,MAAA;IAAU,KAAA;IAAgB,QAAA,GAAW,YAAA;IAAc,QAAA;EAAA;EAErD,OAAA;EACA,OAAA;EACA,QAAA,GAAW,KAAA;EACX,QAAA,GAAW,MAAA,EAAQ,MAAA;EAEnB,SAAA,GAAY,OAAA;EAEZ,QAAA,GAAW,KAAA;EACX,QAAA,QAAgB,OAAA;EAChB,cAAA,GAAiB,QAAA;EACjB,IAAA;EACA,SAAA,GAAY,KAAA,UAAe,IAAA;EAG3B,WAAA;EACA,SAAA,GAAY,QAAA,UAAkB,KAAA;EAC9B,IAAA;AAAA;AAAA,KAGG,kBAAA;EACH,YAAA;EACA,UAAA,GAAa,MAAA,SAAe,YAAA;EAC5B,YAAA,GAAe,OAAA;EACf,aAAA;EACA,gBAAA;EAGA,QAAA;EACA,OAAA,IAAW,GAAA,EAAK,OAAA,KAAY,SAAA;EAI5B,SAAA;EACA,WAAA;EACA,WAAA;EACA,KAAA,GAAQ,OAAA;EACR,QAAA,IAAY,MAAA,EAAQ,MAAA,KAAW,MAAA;EAC/B,oBAAA,IAAwB,QAAA;EACxB,uBAAA,IAA2B,QAAA;EAC3B,aAAA,IAAiB,KAAA,EAAO,OAAA,EAAS,MAAA,GAAS,MAAA;EAC1C,OAAA,GAAU,YAAA;EACV,aAAA;EACA,cAAA,IAAkB,GAAA,EAAK,OAAA,KAAY,SAAA;EACnC,mBAAA,IAAuB,MAAA,EAAQ,UAAA,KAAe,SAAA;EAK9C,eAAA;EACA,UAAA;IAAe,QAAA;IAAkB,WAAA,GAAc,WAAA;EAAA;EAI/C,IAAA,GAAO,UAAA;AAAA;AAAA,cAOH,aAAA,kBAAa,yBAAA,CAAA,kBAAA,mBAAA,aAAA,CAAA,aAAA;;;
|
|
1
|
+
{"version":3,"file":"index.d.ts","names":[],"sources":["../src/hooks/persistence.ts","../src/components/dashfoo-layout.tsx","../src/components/drag-root.tsx","../src/hooks/drag-hooks.tsx","../src/components/drag-adapter.tsx","../src/components/float-layer.tsx","../src/components/layout-root.tsx","../src/components/row-view.tsx","../src/components/tabset/tabset-view.tsx","../src/components/layout.tsx","../src/components/panel.tsx","../src/components/tabset/tabset-tab-controls.tsx","../src/components/tabset/tabset-content.tsx","../src/components/tabset/tabset-toolbar.tsx","../src/components/tabset/tabset-root.tsx","../src/components/tabset/tabset-tab.tsx","../src/components/tabset/tabset-tablist.tsx","../src/components/tabset/tabset.ts","../src/components/tab-overflow.tsx","../src/components/tabset/tabset-store.ts","../src/hooks/layout-store.ts","../src/hooks/responsive.ts","../src/hooks/store.ts"],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -1,13 +1,49 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
3
|
import { canRedo, canUndo, dashfooMachine, dragDockMachine, findTabset, fromJSON, normalize, reducer, resolveDockTarget, snapEnabled, snapSizes, stackModel, tabNodeSchema, toJSON, zoneRect } from "@dashfoo/core";
|
|
4
|
-
import { Fragment, createContext, forwardRef, useCallback, useContext, useEffect, useId, useImperativeHandle, useInsertionEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
|
|
5
|
-
import { Accessibility, DragDropManager, Draggable, Feedback, PointerSensor } from "@dnd-kit/dom";
|
|
4
|
+
import { Fragment, createContext, createElement, forwardRef, useCallback, useContext, useEffect, useId, useImperativeHandle, useInsertionEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
|
|
5
|
+
import { Accessibility, DragDropManager, Draggable, Droppable, Feedback, PointerSensor } from "@dnd-kit/dom";
|
|
6
6
|
import { createStore, useStore } from "zustand";
|
|
7
|
+
import { CollisionPriority, CollisionType } from "@dnd-kit/abstract";
|
|
7
8
|
import { useActorRef, useSelector } from "@xstate/react";
|
|
8
9
|
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
9
10
|
import { Group, Panel as Panel$1, Separator } from "react-resizable-panels";
|
|
10
11
|
|
|
12
|
+
//#region src/lib/topmost-collision.ts
|
|
13
|
+
const createTopmostPointerIntersection = (topElementAt = (x, y) => document.elementFromPoint(x, y)) => {
|
|
14
|
+
let cached = null;
|
|
15
|
+
const topAt = (x, y) => {
|
|
16
|
+
if (cached && cached.x === x && cached.y === y) return cached.top;
|
|
17
|
+
const top = topElementAt(x, y);
|
|
18
|
+
cached = {
|
|
19
|
+
top,
|
|
20
|
+
x,
|
|
21
|
+
y
|
|
22
|
+
};
|
|
23
|
+
queueMicrotask(() => {
|
|
24
|
+
cached = null;
|
|
25
|
+
});
|
|
26
|
+
return top;
|
|
27
|
+
};
|
|
28
|
+
return ({ dragOperation, droppable }) => {
|
|
29
|
+
const { element } = droppable;
|
|
30
|
+
if (!element) return null;
|
|
31
|
+
const point = dragOperation.position.current;
|
|
32
|
+
const top = topAt(point.x, point.y);
|
|
33
|
+
if (!top || !element.contains(top)) return null;
|
|
34
|
+
let depth = 0;
|
|
35
|
+
for (let node = element; node; node = node.parentElement) depth += 1;
|
|
36
|
+
return {
|
|
37
|
+
id: droppable.id,
|
|
38
|
+
priority: CollisionPriority.High,
|
|
39
|
+
type: CollisionType.PointerIntersection,
|
|
40
|
+
value: depth
|
|
41
|
+
};
|
|
42
|
+
};
|
|
43
|
+
};
|
|
44
|
+
const topmostPointerIntersection = createTopmostPointerIntersection();
|
|
45
|
+
|
|
46
|
+
//#endregion
|
|
11
47
|
//#region src/hooks/drag-hooks.tsx
|
|
12
48
|
const INTERACTIVE_SELECTOR = `
|
|
13
49
|
input:not([disabled]),
|
|
@@ -24,7 +60,7 @@ const preventActivation = (event, source) => {
|
|
|
24
60
|
return interactive !== null && interactive !== source.element;
|
|
25
61
|
};
|
|
26
62
|
const createDragManager = () => new DragDropManager({
|
|
27
|
-
plugins: (defaults) => defaults.filter((plugin) => plugin !== Accessibility && plugin !== Feedback),
|
|
63
|
+
plugins: (defaults) => [...defaults.filter((plugin) => plugin !== Accessibility && plugin !== Feedback), Feedback.configure({ dropAnimation: null })],
|
|
28
64
|
sensors: () => [PointerSensor.configure({ preventActivation })]
|
|
29
65
|
});
|
|
30
66
|
const DragContext = createContext(null);
|
|
@@ -90,28 +126,58 @@ const useDraggableEntity = (descriptor, disabled, label) => {
|
|
|
90
126
|
draggableRef,
|
|
91
127
|
label
|
|
92
128
|
]);
|
|
93
|
-
return { ref };
|
|
129
|
+
return useMemo(() => ({ ref }), [ref]);
|
|
94
130
|
};
|
|
95
131
|
const useTabDraggable = (tabId, disabled = false, label = "") => {
|
|
132
|
+
const data = useMemo(() => ({ type: "tab" }), []);
|
|
96
133
|
return useDraggableEntity({
|
|
97
|
-
data
|
|
134
|
+
data,
|
|
98
135
|
id: tabId
|
|
99
136
|
}, disabled, label);
|
|
100
137
|
};
|
|
101
138
|
const useTabsetDraggable = (tabsetId, disabled = false, label = "") => {
|
|
139
|
+
const data = useMemo(() => ({
|
|
140
|
+
tabsetId,
|
|
141
|
+
type: "tabset"
|
|
142
|
+
}), [tabsetId]);
|
|
102
143
|
return useDraggableEntity({
|
|
103
|
-
data
|
|
104
|
-
tabsetId,
|
|
105
|
-
type: "tabset"
|
|
106
|
-
}), [tabsetId]),
|
|
144
|
+
data,
|
|
107
145
|
id: `grip-${tabsetId}`
|
|
108
146
|
}, disabled, label);
|
|
109
147
|
};
|
|
110
148
|
const useTabsetDroppable = (tabsetId) => {
|
|
111
149
|
const context = useContext(DragContext);
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
150
|
+
const elementRef = useRef(null);
|
|
151
|
+
const droppableRef = useRef(null);
|
|
152
|
+
const ref = useCallback((element) => {
|
|
153
|
+
elementRef.current = element;
|
|
154
|
+
if (droppableRef.current) droppableRef.current.element = element ?? void 0;
|
|
155
|
+
}, []);
|
|
156
|
+
const layerId = context?.layerId;
|
|
157
|
+
const manager = context?.manager;
|
|
158
|
+
useEffect(() => {
|
|
159
|
+
if (!manager || layerId === void 0) return;
|
|
160
|
+
const droppable = new Droppable({
|
|
161
|
+
collisionDetector: topmostPointerIntersection,
|
|
162
|
+
data: {
|
|
163
|
+
layerId,
|
|
164
|
+
tabsetId,
|
|
165
|
+
type: "tabset"
|
|
166
|
+
},
|
|
167
|
+
id: `${layerId}:${tabsetId}`
|
|
168
|
+
}, manager);
|
|
169
|
+
droppable.element = elementRef.current ?? void 0;
|
|
170
|
+
droppableRef.current = droppable;
|
|
171
|
+
return () => {
|
|
172
|
+
droppable.destroy();
|
|
173
|
+
droppableRef.current = null;
|
|
174
|
+
};
|
|
175
|
+
}, [
|
|
176
|
+
layerId,
|
|
177
|
+
manager,
|
|
178
|
+
tabsetId
|
|
179
|
+
]);
|
|
180
|
+
return useMemo(() => ({ ref }), [ref]);
|
|
115
181
|
};
|
|
116
182
|
const useExternalTabSource = ({ createTab, disabled = false, label = "" }) => {
|
|
117
183
|
const id = useId();
|
|
@@ -119,11 +185,12 @@ const useExternalTabSource = ({ createTab, disabled = false, label = "" }) => {
|
|
|
119
185
|
useEffect(() => {
|
|
120
186
|
createTabRef.current = createTab;
|
|
121
187
|
});
|
|
188
|
+
const data = useMemo(() => ({
|
|
189
|
+
createTab: () => createTabRef.current(),
|
|
190
|
+
type: "external"
|
|
191
|
+
}), []);
|
|
122
192
|
return useDraggableEntity({
|
|
123
|
-
data
|
|
124
|
-
createTab: () => createTabRef.current(),
|
|
125
|
-
type: "external"
|
|
126
|
-
}), []),
|
|
193
|
+
data,
|
|
127
194
|
id: `external-${id}`
|
|
128
195
|
}, disabled, label);
|
|
129
196
|
};
|
|
@@ -312,16 +379,18 @@ const useResponsiveModel = ({ breakpoints }) => {
|
|
|
312
379
|
};
|
|
313
380
|
}, [breakpoints]);
|
|
314
381
|
const active = activeBreakpoint(breakpoints, width);
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
382
|
+
return useMemo(() => {
|
|
383
|
+
const isCompact = active.compact === true;
|
|
384
|
+
return {
|
|
385
|
+
breakpoint: active.id,
|
|
386
|
+
containerRef,
|
|
387
|
+
draggableTabs: !isCompact,
|
|
388
|
+
draggableTabsets: !isCompact,
|
|
389
|
+
isCompact,
|
|
390
|
+
model: active.model,
|
|
391
|
+
resizableSplits: !isCompact
|
|
392
|
+
};
|
|
393
|
+
}, [active, containerRef]);
|
|
325
394
|
};
|
|
326
395
|
|
|
327
396
|
//#endregion
|
|
@@ -422,31 +491,6 @@ const useDashfooStore = (options) => {
|
|
|
422
491
|
]);
|
|
423
492
|
};
|
|
424
493
|
|
|
425
|
-
//#endregion
|
|
426
|
-
//#region src/components/drag-root.tsx
|
|
427
|
-
const DashfooDragProvider = ({ children }) => {
|
|
428
|
-
const [manager] = useState(createDragManager);
|
|
429
|
-
useInsertionEffect(() => () => manager.destroy(), [manager]);
|
|
430
|
-
const [subjectStore] = useState(createDragSubjectStore);
|
|
431
|
-
return /* @__PURE__ */ jsx(SharedDragManagerContext.Provider, {
|
|
432
|
-
value: manager,
|
|
433
|
-
children: /* @__PURE__ */ jsx(DragSubjectStoreContext.Provider, {
|
|
434
|
-
value: subjectStore,
|
|
435
|
-
children
|
|
436
|
-
})
|
|
437
|
-
});
|
|
438
|
-
};
|
|
439
|
-
|
|
440
|
-
//#endregion
|
|
441
|
-
//#region src/hooks/layout-store.ts
|
|
442
|
-
const createLayoutStore = (initial) => createStore(() => initial);
|
|
443
|
-
const LayoutStoreContext = createContext(null);
|
|
444
|
-
const useLayout = (selector) => {
|
|
445
|
-
const store = useContext(LayoutStoreContext);
|
|
446
|
-
if (store === null) throw new Error("dashfoo components must be rendered inside <DashfooLayout> or <Layout.Root>.");
|
|
447
|
-
return useStore(store, selector);
|
|
448
|
-
};
|
|
449
|
-
|
|
450
494
|
//#endregion
|
|
451
495
|
//#region src/lib/tab-insertion.ts
|
|
452
496
|
const pointInRect = (point, rect) => point.x >= rect.x && point.x <= rect.x + rect.width && point.y >= rect.y && point.y <= rect.y + rect.height;
|
|
@@ -472,15 +516,6 @@ const shouldAllowDrop = (draggedId, targetId, tabIds) => {
|
|
|
472
516
|
return true;
|
|
473
517
|
};
|
|
474
518
|
|
|
475
|
-
//#endregion
|
|
476
|
-
//#region src/lib/warn-once.ts
|
|
477
|
-
const warned = /* @__PURE__ */ new Set();
|
|
478
|
-
const warnOnce = (key, message) => {
|
|
479
|
-
if (warned.has(key)) return;
|
|
480
|
-
warned.add(key);
|
|
481
|
-
console.warn(`[dashfoo] ${message}`);
|
|
482
|
-
};
|
|
483
|
-
|
|
484
519
|
//#endregion
|
|
485
520
|
//#region src/components/drag-overlays.tsx
|
|
486
521
|
const overlayBase = {
|
|
@@ -514,41 +549,108 @@ const DockIndicator = ({ actorRef, getTabsetElement }) => {
|
|
|
514
549
|
const zIndex = element.closest("[data-dashfoo=\"float\"]") ? overlayBase.zIndex : "auto";
|
|
515
550
|
if (intent.location === "center") {
|
|
516
551
|
const strip = element.querySelector("[data-dashfoo=\"tabstrip\"]");
|
|
517
|
-
if (strip)
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
552
|
+
if (strip) {
|
|
553
|
+
const line = insertionLineRect(strip.getBoundingClientRect(), tabItemRects(strip, draggedId), intent.index ?? 0);
|
|
554
|
+
return /* @__PURE__ */ jsx("div", {
|
|
555
|
+
"data-dashfoo": "dock-indicator",
|
|
556
|
+
style: {
|
|
557
|
+
...lineStyle(line),
|
|
558
|
+
zIndex
|
|
559
|
+
}
|
|
560
|
+
});
|
|
561
|
+
}
|
|
524
562
|
}
|
|
563
|
+
const zone = zoneRect(element.getBoundingClientRect(), intent.location);
|
|
525
564
|
return /* @__PURE__ */ jsx("div", {
|
|
526
565
|
"data-dashfoo": "dock-indicator",
|
|
527
566
|
style: {
|
|
528
|
-
...paneStyle(
|
|
567
|
+
...paneStyle(zone),
|
|
529
568
|
zIndex
|
|
530
569
|
}
|
|
531
570
|
});
|
|
532
571
|
};
|
|
533
|
-
const
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
572
|
+
const PREVIEW_OFFSET = {
|
|
573
|
+
x: 12,
|
|
574
|
+
y: 8
|
|
575
|
+
};
|
|
576
|
+
const labelOf = (source) => {
|
|
577
|
+
const raw = source?.data?.label;
|
|
578
|
+
return typeof raw === "string" ? raw : "";
|
|
538
579
|
};
|
|
539
|
-
const
|
|
540
|
-
|
|
580
|
+
const DragPreviewOverlay = ({ manager }) => {
|
|
581
|
+
const [chip, setChip] = useState(null);
|
|
582
|
+
useEffect(() => {
|
|
583
|
+
const offStart = manager.monitor.addEventListener("dragstart", (event) => {
|
|
584
|
+
const source = event.operation.source;
|
|
585
|
+
if (!source) return;
|
|
586
|
+
const rect = source.element?.getBoundingClientRect();
|
|
587
|
+
const point = event.operation.position.current;
|
|
588
|
+
setChip({
|
|
589
|
+
label: labelOf(source),
|
|
590
|
+
x: PREVIEW_OFFSET.x + (rect ? point.x - rect.left : 0),
|
|
591
|
+
y: PREVIEW_OFFSET.y + (rect ? point.y - rect.top : 0)
|
|
592
|
+
});
|
|
593
|
+
});
|
|
594
|
+
const offEnd = manager.monitor.addEventListener("dragend", () => setChip(null));
|
|
595
|
+
return () => {
|
|
596
|
+
offStart();
|
|
597
|
+
offEnd();
|
|
598
|
+
};
|
|
599
|
+
}, [manager]);
|
|
541
600
|
return /* @__PURE__ */ jsx("div", {
|
|
542
|
-
"data-
|
|
543
|
-
ref:
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
601
|
+
"data-dnd-overlay": "",
|
|
602
|
+
ref: useCallback((element) => {
|
|
603
|
+
const feedback = manager.registry.plugins.get(Feedback);
|
|
604
|
+
if (feedback) feedback.overlay = element ?? void 0;
|
|
605
|
+
}, [manager]),
|
|
606
|
+
children: chip === null ? null : /* @__PURE__ */ jsx("div", {
|
|
607
|
+
"data-dashfoo": "drag-preview",
|
|
608
|
+
style: {
|
|
609
|
+
left: 0,
|
|
610
|
+
position: "absolute",
|
|
611
|
+
top: 0,
|
|
612
|
+
transform: `translate(${chip.x}px, ${chip.y}px)`,
|
|
613
|
+
width: "max-content"
|
|
614
|
+
},
|
|
615
|
+
children: chip.label
|
|
616
|
+
})
|
|
549
617
|
});
|
|
550
618
|
};
|
|
551
619
|
|
|
620
|
+
//#endregion
|
|
621
|
+
//#region src/components/drag-root.tsx
|
|
622
|
+
const DashfooDragProvider = ({ children }) => {
|
|
623
|
+
const [manager] = useState(createDragManager);
|
|
624
|
+
useInsertionEffect(() => () => manager.destroy(), [manager]);
|
|
625
|
+
const [subjectStore] = useState(createDragSubjectStore);
|
|
626
|
+
return /* @__PURE__ */ jsx(SharedDragManagerContext.Provider, {
|
|
627
|
+
value: manager,
|
|
628
|
+
children: /* @__PURE__ */ jsxs(DragSubjectStoreContext.Provider, {
|
|
629
|
+
value: subjectStore,
|
|
630
|
+
children: [children, /* @__PURE__ */ jsx(DragPreviewOverlay, { manager })]
|
|
631
|
+
})
|
|
632
|
+
});
|
|
633
|
+
};
|
|
634
|
+
|
|
635
|
+
//#endregion
|
|
636
|
+
//#region src/hooks/layout-store.ts
|
|
637
|
+
const createLayoutStore = (initial) => createStore(() => initial);
|
|
638
|
+
const LayoutStoreContext = createContext(null);
|
|
639
|
+
const useLayout = (selector) => {
|
|
640
|
+
const store = useContext(LayoutStoreContext);
|
|
641
|
+
if (store === null) throw new Error("dashfoo components must be rendered inside <DashfooLayout> or <Layout.Root>.");
|
|
642
|
+
return useStore(store, selector);
|
|
643
|
+
};
|
|
644
|
+
|
|
645
|
+
//#endregion
|
|
646
|
+
//#region src/lib/warn-once.ts
|
|
647
|
+
const warned = /* @__PURE__ */ new Set();
|
|
648
|
+
const warnOnce = (key, message) => {
|
|
649
|
+
if (warned.has(key)) return;
|
|
650
|
+
warned.add(key);
|
|
651
|
+
console.warn(`[dashfoo] ${message}`);
|
|
652
|
+
};
|
|
653
|
+
|
|
552
654
|
//#endregion
|
|
553
655
|
//#region src/components/drag-adapter.tsx
|
|
554
656
|
const tabRects = (strip, excludeId) => [...strip.querySelectorAll("[data-dashfoo=\"tab\"]")].flatMap((tab) => tab.dataset.tabId === excludeId ? [] : [tab.getBoundingClientRect()]);
|
|
@@ -571,14 +673,6 @@ const intentForTabset = (id, element, point, draggedId) => {
|
|
|
571
673
|
targetId: id
|
|
572
674
|
};
|
|
573
675
|
};
|
|
574
|
-
const PREVIEW_OFFSET = {
|
|
575
|
-
x: 12,
|
|
576
|
-
y: 8
|
|
577
|
-
};
|
|
578
|
-
const labelOf = (source) => {
|
|
579
|
-
const raw = source?.data?.label;
|
|
580
|
-
return typeof raw === "string" ? raw : "";
|
|
581
|
-
};
|
|
582
676
|
const isTabFactory = (value) => typeof value === "function";
|
|
583
677
|
const subjectFor = (source) => {
|
|
584
678
|
const data = source.data;
|
|
@@ -617,9 +711,6 @@ const subjectFor = (source) => {
|
|
|
617
711
|
const DragProvider = ({ children, onCommit, splitDock }) => {
|
|
618
712
|
const actorRef = useActorRef(dragDockMachine);
|
|
619
713
|
const layoutStore = useContext(LayoutStoreContext);
|
|
620
|
-
const [tabsets] = useState(() => /* @__PURE__ */ new Map());
|
|
621
|
-
const overlayRef = useRef(null);
|
|
622
|
-
const [preview, setPreview] = useState(null);
|
|
623
714
|
const sharedManager = useContext(SharedDragManagerContext);
|
|
624
715
|
const [ownManager] = useState(() => sharedManager ? null : createDragManager());
|
|
625
716
|
useInsertionEffect(() => () => ownManager?.destroy(), [ownManager]);
|
|
@@ -657,6 +748,10 @@ const DragProvider = ({ children, onCommit, splitDock }) => {
|
|
|
657
748
|
onCommitRef.current = onCommit;
|
|
658
749
|
splitDockRef.current = splitDock;
|
|
659
750
|
});
|
|
751
|
+
const getTabsetElement = useCallback((id) => {
|
|
752
|
+
const element = manager.registry.droppables.get(`${ownerId}:${id}`)?.element;
|
|
753
|
+
return element instanceof HTMLElement ? element : void 0;
|
|
754
|
+
}, [manager, ownerId]);
|
|
660
755
|
useEffect(() => {
|
|
661
756
|
const subscription = actorRef.on("COMMIT", (emitted) => {
|
|
662
757
|
if (layoutStore?.getState().editable === false) return;
|
|
@@ -671,23 +766,7 @@ const DragProvider = ({ children, onCommit, splitDock }) => {
|
|
|
671
766
|
subscription.unsubscribe();
|
|
672
767
|
};
|
|
673
768
|
}, [actorRef, layoutStore]);
|
|
674
|
-
const registerTabset = useCallback((id, element) => {
|
|
675
|
-
if (element) tabsets.set(id, element);
|
|
676
|
-
else tabsets.delete(id);
|
|
677
|
-
}, [tabsets]);
|
|
678
|
-
const getTabsetElement = useCallback((id) => tabsets.get(id), [tabsets]);
|
|
679
|
-
const attachOverlay = useCallback((element) => {
|
|
680
|
-
overlayRef.current = element;
|
|
681
|
-
}, []);
|
|
682
769
|
useEffect(() => {
|
|
683
|
-
const tabsetAt = (point) => {
|
|
684
|
-
const top = document.elementFromPoint(point.x, point.y);
|
|
685
|
-
if (!top) return;
|
|
686
|
-
for (const [id, element] of tabsets) if (element.contains(top)) return {
|
|
687
|
-
element,
|
|
688
|
-
id
|
|
689
|
-
};
|
|
690
|
-
};
|
|
691
770
|
const resolveIntent = (targetId, element, point, draggedId) => {
|
|
692
771
|
if (layoutStore?.getState().editable === false) return null;
|
|
693
772
|
if (!shouldAllowDrop(draggedId, targetId, [...element.querySelectorAll("[data-dashfoo=\"tab\"]")].map((tab) => tab.dataset.tabId ?? ""))) return null;
|
|
@@ -698,71 +777,62 @@ const DragProvider = ({ children, onCommit, splitDock }) => {
|
|
|
698
777
|
};
|
|
699
778
|
return intent;
|
|
700
779
|
};
|
|
701
|
-
const positionOverlay = (point) => {
|
|
702
|
-
const element = overlayRef.current;
|
|
703
|
-
if (element) element.style.transform = `translate(${point.x + PREVIEW_OFFSET.x}px, ${point.y + PREVIEW_OFFSET.y}px)`;
|
|
704
|
-
};
|
|
705
780
|
const handleStart = (event) => {
|
|
706
781
|
const source = event.operation.source;
|
|
707
782
|
if (!source) return;
|
|
708
783
|
const subject = subjectFor(source);
|
|
709
|
-
if (!subject)
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
x: point.x + PREVIEW_OFFSET.x,
|
|
714
|
-
y: point.y + PREVIEW_OFFSET.y
|
|
715
|
-
});
|
|
784
|
+
if (!subject) {
|
|
785
|
+
manager.actions.stop({ canceled: true });
|
|
786
|
+
return;
|
|
787
|
+
}
|
|
716
788
|
actorRef.send({
|
|
717
789
|
subject,
|
|
718
790
|
type: "START"
|
|
719
791
|
});
|
|
720
792
|
};
|
|
721
|
-
const
|
|
722
|
-
const
|
|
723
|
-
const point =
|
|
724
|
-
|
|
725
|
-
const
|
|
726
|
-
const
|
|
793
|
+
const syncIntent = () => {
|
|
794
|
+
const operation = manager.dragOperation;
|
|
795
|
+
const point = operation.position.current;
|
|
796
|
+
const target = operation.target;
|
|
797
|
+
const data = target?.data;
|
|
798
|
+
const tabsetId = data?.layerId === ownerId ? data.tabsetId : void 0;
|
|
799
|
+
const element = tabsetId === void 0 ? void 0 : target?.element;
|
|
800
|
+
const draggedId = operation.source ? String(operation.source.id) : void 0;
|
|
727
801
|
actorRef.send({
|
|
728
|
-
intent:
|
|
802
|
+
intent: tabsetId !== void 0 && element instanceof HTMLElement ? resolveIntent(tabsetId, element, point, draggedId) : null,
|
|
729
803
|
type: "OVER"
|
|
730
804
|
});
|
|
731
805
|
};
|
|
806
|
+
const handleMove = () => syncIntent();
|
|
807
|
+
const handleCollision = () => syncIntent();
|
|
732
808
|
const handleEnd = (event) => {
|
|
733
|
-
setPreview(null);
|
|
734
809
|
if (event.canceled) {
|
|
735
810
|
actorRef.send({ type: "CANCEL" });
|
|
736
811
|
return;
|
|
737
812
|
}
|
|
738
|
-
|
|
739
|
-
const point = op.position.current;
|
|
740
|
-
const draggedId = op.source ? String(op.source.id) : void 0;
|
|
741
|
-
const hit = tabsetAt(point);
|
|
742
|
-
if (hit) actorRef.send({
|
|
743
|
-
intent: resolveIntent(hit.id, hit.element, point, draggedId),
|
|
744
|
-
type: "OVER"
|
|
745
|
-
});
|
|
813
|
+
syncIntent();
|
|
746
814
|
actorRef.send({ type: "DROP" });
|
|
747
815
|
};
|
|
748
816
|
const offStart = manager.monitor.addEventListener("dragstart", handleStart);
|
|
749
817
|
const offMove = manager.monitor.addEventListener("dragmove", handleMove);
|
|
818
|
+
const offCollision = manager.monitor.addEventListener("collision", handleCollision);
|
|
750
819
|
const offEnd = manager.monitor.addEventListener("dragend", handleEnd);
|
|
751
820
|
return () => {
|
|
752
821
|
offStart();
|
|
753
822
|
offMove();
|
|
823
|
+
offCollision();
|
|
754
824
|
offEnd();
|
|
755
825
|
};
|
|
756
826
|
}, [
|
|
757
827
|
actorRef,
|
|
758
828
|
layoutStore,
|
|
759
829
|
manager,
|
|
760
|
-
|
|
830
|
+
ownerId
|
|
761
831
|
]);
|
|
762
832
|
const contextValue = useMemo(() => ({
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
}), [manager,
|
|
833
|
+
layerId: ownerId,
|
|
834
|
+
manager
|
|
835
|
+
}), [manager, ownerId]);
|
|
766
836
|
return /* @__PURE__ */ jsx(DragContext.Provider, {
|
|
767
837
|
value: contextValue,
|
|
768
838
|
children: /* @__PURE__ */ jsxs(DragSubjectStoreContext.Provider, {
|
|
@@ -773,10 +843,7 @@ const DragProvider = ({ children, onCommit, splitDock }) => {
|
|
|
773
843
|
actorRef,
|
|
774
844
|
getTabsetElement
|
|
775
845
|
}),
|
|
776
|
-
/* @__PURE__ */ jsx(
|
|
777
|
-
overlayRef: attachOverlay,
|
|
778
|
-
preview
|
|
779
|
-
})
|
|
846
|
+
ownManager === null ? null : /* @__PURE__ */ jsx(DragPreviewOverlay, { manager: ownManager })
|
|
780
847
|
]
|
|
781
848
|
})
|
|
782
849
|
});
|
|
@@ -802,12 +869,13 @@ const clampToBounds = (rect, bounds, size = rect) => ({
|
|
|
802
869
|
});
|
|
803
870
|
const measureFloatRect = (element) => {
|
|
804
871
|
const rect = (element.closest("[data-dashfoo=\"tabset\"]") ?? element).getBoundingClientRect();
|
|
805
|
-
|
|
872
|
+
const seeded = {
|
|
806
873
|
height: Math.max(MIN_HEIGHT, Math.min(Math.round(rect.height), DEFAULT_HEIGHT)),
|
|
807
874
|
left: Math.round(rect.left) + LIFT_OFFSET,
|
|
808
875
|
top: Math.round(rect.top) + LIFT_OFFSET,
|
|
809
876
|
width: Math.max(MIN_WIDTH, Math.min(Math.round(rect.width), DEFAULT_WIDTH))
|
|
810
|
-
}
|
|
877
|
+
};
|
|
878
|
+
return clampToBounds(seeded, {
|
|
811
879
|
height: window.innerHeight,
|
|
812
880
|
width: window.innerWidth
|
|
813
881
|
});
|
|
@@ -1131,20 +1199,20 @@ const TabsetContent = ({ children, style, ...props }) => {
|
|
|
1131
1199
|
...contentStyle,
|
|
1132
1200
|
...style
|
|
1133
1201
|
};
|
|
1134
|
-
if (keepMounted && node.children.length > 0) return node.children.map((tab, index) => /* @__PURE__ */
|
|
1202
|
+
if (keepMounted && node.children.length > 0) return node.children.map((tab, index) => /* @__PURE__ */ createElement("div", {
|
|
1135
1203
|
...props,
|
|
1136
1204
|
"aria-labelledby": tabDomId(node.id, tab.id),
|
|
1137
1205
|
"data-dashfoo": "tabcontent",
|
|
1138
1206
|
hidden: index !== visualSelected || void 0,
|
|
1139
1207
|
id: index === visualSelected ? panelDomId(node.id) : void 0,
|
|
1208
|
+
key: tab.id,
|
|
1140
1209
|
role: index === visualSelected ? "tabpanel" : void 0,
|
|
1141
1210
|
style: mergedStyle,
|
|
1142
|
-
tabIndex: index === visualSelected ? 0 : void 0
|
|
1143
|
-
|
|
1144
|
-
|
|
1145
|
-
|
|
1146
|
-
|
|
1147
|
-
}, tab.id));
|
|
1211
|
+
tabIndex: index === visualSelected ? 0 : void 0
|
|
1212
|
+
}, /* @__PURE__ */ jsx(TabPanel, {
|
|
1213
|
+
render: children,
|
|
1214
|
+
tab
|
|
1215
|
+
})));
|
|
1148
1216
|
const active = node.children[visualSelected];
|
|
1149
1217
|
if (active) return /* @__PURE__ */ jsx("div", {
|
|
1150
1218
|
...props,
|
|
@@ -1807,8 +1875,9 @@ const TabsetFloatButton = ({ children, onClick, ...props }) => {
|
|
|
1807
1875
|
}
|
|
1808
1876
|
const handleClick = (event) => {
|
|
1809
1877
|
onClick?.(event);
|
|
1878
|
+
const geometry = measureFloatRect(event.currentTarget);
|
|
1810
1879
|
dispatch({
|
|
1811
|
-
geometry
|
|
1880
|
+
geometry,
|
|
1812
1881
|
tabsetId: node.id,
|
|
1813
1882
|
type: "floatTabset"
|
|
1814
1883
|
});
|