@dashfoo/react 0.6.3 → 0.6.4
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/dist/index.d.ts.map +1 -1
- package/dist/index.js +133 -81
- package/dist/index.js.map +1 -1
- package/package.json +4 -4
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":";;;;;KAMK;EACH,UAAU;EACV,aAAa;EACb,UAAU,aAAa;;cAGnB,4BAA2B;cAa3B,qBAAqB;KAkCtB;EACH;EACA;EACA,SAAS;;KAGN;EACH;EAEA,cAAc;EACd,OAAO,OAAO;;cAGV,iBACJ,QAAQ,sBACR,cAAc,wBACb;;;KCjDE;EAA0B;EAAqB;EAAa,UAAU;;KAmBtE,eAAe;EAAgB,MAAM;;KAIrC;EACH,SACE,KAAK,SACL;IAAU;IAAgB,WAAW;IAAc;;EAErD;EACA;EACA,WAAW;EACX,WAAW,QAAQ;EAEnB,YAAY;EAEZ,WAAW;EACX,gBAAgB;EAChB,iBAAiB;EACjB;EACA,YAAY,eAAe;EAE3B;EACA,YAAY,kBAAkB;EAC9B;;KAGG;EACH;EACA,aAAa,eAAe;EAC5B,eAAe;EACf;EACA;EAEA;EACA,WAAW,KAAK,YAAY;EAE5B;EACA;EACA;EACA,QAAQ;EACR,YAAY,QAAQ,WAAW;EAC/B,wBAAwB;EACxB,2BAA2B;EAC3B,iBAAiB,OAAO,SAAS,SAAS;EAC1C,UAAU;EACV;EACA,kBAAkB,KAAK,YAAY;EACnC,uBAAuB,QAAQ,eAAe;EAE9C;EACA;IAAe;IAAkB,cAAc;;EAE/C,OAAO;;cAGH,+BAAa,0BAAA,qCAAA,cAAA;;;cCvFb,wBAAuB;EAAgB,UAAU;MAAc;;;KCkLhE;EACH,iBAAiB;EACjB;EACA;;cAGI,yBAAwB,WAAA,UAAA,SAI3B;EAA6B,MAAM,SAAS;;cAczC,sBAAqB;cAKrB,qBAAoB;;;KC7HrB;EACH,UAAU;EAEV,YAAY,QAAQ;EAEpB;;;;
|
|
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
|
@@ -269,7 +269,7 @@ const usePersistence = (config, defaultModel) => {
|
|
|
269
269
|
const loadedKey = useRef(config?.key);
|
|
270
270
|
useEffect(() => {
|
|
271
271
|
if (config !== null && config.key !== loadedKey.current) {
|
|
272
|
-
console.warn("[dashfoo] persist key changed for a mounted layout; the displayed layout still reflects the previous key
|
|
272
|
+
console.warn("[dashfoo] persist key changed for a mounted layout; the displayed layout still reflects the previous key; remount (key={persistKey}) to load the new key");
|
|
273
273
|
loadedKey.current = config.key;
|
|
274
274
|
}
|
|
275
275
|
}, [config]);
|
|
@@ -352,7 +352,7 @@ const useContainerWidth = () => {
|
|
|
352
352
|
observerRef.current?.disconnect();
|
|
353
353
|
if (!element) return;
|
|
354
354
|
const observer = new ResizeObserver((entries) => {
|
|
355
|
-
const entry = entries
|
|
355
|
+
const entry = entries.at(0);
|
|
356
356
|
if (entry) setWidth(entry.contentRect.width);
|
|
357
357
|
});
|
|
358
358
|
observer.observe(element);
|
|
@@ -591,7 +591,9 @@ const DragPreviewOverlay = ({ manager }) => {
|
|
|
591
591
|
y: PREVIEW_OFFSET.y + (rect ? point.y - rect.top : 0)
|
|
592
592
|
});
|
|
593
593
|
});
|
|
594
|
-
const offEnd = manager.monitor.addEventListener("dragend", () =>
|
|
594
|
+
const offEnd = manager.monitor.addEventListener("dragend", () => {
|
|
595
|
+
setChip(null);
|
|
596
|
+
});
|
|
595
597
|
return () => {
|
|
596
598
|
offStart();
|
|
597
599
|
offEnd();
|
|
@@ -621,7 +623,9 @@ const DragPreviewOverlay = ({ manager }) => {
|
|
|
621
623
|
//#region src/components/drag-root.tsx
|
|
622
624
|
const DashfooDragProvider = ({ children }) => {
|
|
623
625
|
const [manager] = useState(createDragManager);
|
|
624
|
-
useInsertionEffect(() => () =>
|
|
626
|
+
useInsertionEffect(() => () => {
|
|
627
|
+
manager.destroy();
|
|
628
|
+
}, [manager]);
|
|
625
629
|
const [subjectStore] = useState(createDragSubjectStore);
|
|
626
630
|
return /* @__PURE__ */ jsx(SharedDragManagerContext.Provider, {
|
|
627
631
|
value: manager,
|
|
@@ -803,8 +807,12 @@ const DragProvider = ({ children, onCommit, splitDock }) => {
|
|
|
803
807
|
type: "OVER"
|
|
804
808
|
});
|
|
805
809
|
};
|
|
806
|
-
const handleMove = () =>
|
|
807
|
-
|
|
810
|
+
const handleMove = () => {
|
|
811
|
+
syncIntent();
|
|
812
|
+
};
|
|
813
|
+
const handleCollision = () => {
|
|
814
|
+
syncIntent();
|
|
815
|
+
};
|
|
808
816
|
const handleEnd = (event) => {
|
|
809
817
|
if (event.canceled) {
|
|
810
818
|
actorRef.send({ type: "CANCEL" });
|
|
@@ -1118,7 +1126,9 @@ const panelDomId = (tabsetId) => `dashfoo-panel-${tabsetId}`;
|
|
|
1118
1126
|
const tabButtonIn = (scope, tabsetId, tabId) => scope?.querySelector(`#${CSS.escape(tabDomId(tabsetId, tabId))}`) ?? null;
|
|
1119
1127
|
const createTabsetStore = (initial) => createStore((set, get) => ({
|
|
1120
1128
|
...initial,
|
|
1121
|
-
cancelRename: () =>
|
|
1129
|
+
cancelRename: () => {
|
|
1130
|
+
set({ editingTabId: null });
|
|
1131
|
+
},
|
|
1122
1132
|
closeTab: (tabId) => {
|
|
1123
1133
|
set({ restoreFocus: true });
|
|
1124
1134
|
get().dispatch({
|
|
@@ -1137,7 +1147,9 @@ const createTabsetStore = (initial) => createStore((set, get) => ({
|
|
|
1137
1147
|
overflowItems: [],
|
|
1138
1148
|
registerRenameInput: () => {
|
|
1139
1149
|
set((state) => ({ renameInputCount: state.renameInputCount + 1 }));
|
|
1140
|
-
return () =>
|
|
1150
|
+
return () => {
|
|
1151
|
+
set((state) => ({ renameInputCount: state.renameInputCount - 1 }));
|
|
1152
|
+
};
|
|
1141
1153
|
},
|
|
1142
1154
|
registerTablist: (element) => {
|
|
1143
1155
|
if (element) {
|
|
@@ -1149,11 +1161,13 @@ const createTabsetStore = (initial) => createStore((set, get) => ({
|
|
|
1149
1161
|
set({ tablistElement: null });
|
|
1150
1162
|
},
|
|
1151
1163
|
renameInputCount: 0,
|
|
1152
|
-
renameTab: (tabId, name) =>
|
|
1153
|
-
|
|
1154
|
-
|
|
1155
|
-
|
|
1156
|
-
|
|
1164
|
+
renameTab: (tabId, name) => {
|
|
1165
|
+
get().dispatch({
|
|
1166
|
+
name,
|
|
1167
|
+
tabId,
|
|
1168
|
+
type: "renameTab"
|
|
1169
|
+
});
|
|
1170
|
+
},
|
|
1157
1171
|
restoreFocus: false,
|
|
1158
1172
|
selectOverflowTab: (tabId) => {
|
|
1159
1173
|
const { dispatch, node, tablistElement } = get();
|
|
@@ -1176,7 +1190,7 @@ const createTabsetStore = (initial) => createStore((set, get) => ({
|
|
|
1176
1190
|
tabsetId: node.id,
|
|
1177
1191
|
type: "selectTab"
|
|
1178
1192
|
});
|
|
1179
|
-
if (options?.focus) {
|
|
1193
|
+
if (options?.focus === true) {
|
|
1180
1194
|
const tabId = node.children[index]?.id;
|
|
1181
1195
|
if (tabId) tabButtonIn(tablistElement, node.id, tabId)?.focus();
|
|
1182
1196
|
}
|
|
@@ -1308,7 +1322,7 @@ const TabOverflowMenu = ({ items, onSelect }) => {
|
|
|
1308
1322
|
useEffect(() => {
|
|
1309
1323
|
if (!open) return;
|
|
1310
1324
|
const handlePointerDown = (event) => {
|
|
1311
|
-
if (event.target instanceof Node &&
|
|
1325
|
+
if (event.target instanceof Node && rootRef.current?.contains(event.target) !== true) setOpen(false);
|
|
1312
1326
|
};
|
|
1313
1327
|
document.addEventListener("pointerdown", handlePointerDown);
|
|
1314
1328
|
return () => {
|
|
@@ -1361,7 +1375,7 @@ const TabOverflowMenu = ({ items, onSelect }) => {
|
|
|
1361
1375
|
}
|
|
1362
1376
|
};
|
|
1363
1377
|
const handleFocusOut = (event) => {
|
|
1364
|
-
if (event.relatedTarget instanceof Node && rootRef.current?.contains(event.relatedTarget)) return;
|
|
1378
|
+
if (event.relatedTarget instanceof Node && rootRef.current?.contains(event.relatedTarget) === true) return;
|
|
1365
1379
|
setOpen(false);
|
|
1366
1380
|
};
|
|
1367
1381
|
return /* @__PURE__ */ jsxs("div", {
|
|
@@ -1387,7 +1401,9 @@ const TabOverflowMenu = ({ items, onSelect }) => {
|
|
|
1387
1401
|
tabIndex: -1,
|
|
1388
1402
|
children: items.map((item, index) => /* @__PURE__ */ jsx("button", {
|
|
1389
1403
|
"data-dashfoo": "tab-overflow-item",
|
|
1390
|
-
onClick: () =>
|
|
1404
|
+
onClick: () => {
|
|
1405
|
+
handleSelect(item.id);
|
|
1406
|
+
},
|
|
1391
1407
|
ref: (node) => {
|
|
1392
1408
|
itemRefs.current[index] = node;
|
|
1393
1409
|
},
|
|
@@ -1418,7 +1434,9 @@ const overflowingIds = (tablist) => {
|
|
|
1418
1434
|
const box = tablist.getBoundingClientRect();
|
|
1419
1435
|
return [...tablist.querySelectorAll("[data-dashfoo=\"tab\"]")].flatMap((tab) => {
|
|
1420
1436
|
const rect = tab.getBoundingClientRect();
|
|
1421
|
-
|
|
1437
|
+
const clipped = rect.right > box.right + 1 || rect.left < box.left - 1;
|
|
1438
|
+
const tabId = tab.dataset.tabId;
|
|
1439
|
+
return clipped && tabId !== void 0 && tabId !== "" ? [tabId] : [];
|
|
1422
1440
|
});
|
|
1423
1441
|
};
|
|
1424
1442
|
const useTabOverflow = (tablist, signature) => {
|
|
@@ -1723,7 +1741,9 @@ const RenameEditor = ({ defaultValue, onBlur, onKeyDown, ref: userRef, ...props
|
|
|
1723
1741
|
const rename = useInlineRename({
|
|
1724
1742
|
currentName: tab.name,
|
|
1725
1743
|
inputRef,
|
|
1726
|
-
onCommit: (name) =>
|
|
1744
|
+
onCommit: (name) => {
|
|
1745
|
+
commitRename(tab.id, name);
|
|
1746
|
+
},
|
|
1727
1747
|
onDone: cancelRename
|
|
1728
1748
|
});
|
|
1729
1749
|
const refCallback = useMemo(() => mergeRefs(inputRef, userRef), [userRef]);
|
|
@@ -2149,11 +2169,13 @@ const FloatTitleEditor = ({ dispatch, node, onDone }) => {
|
|
|
2149
2169
|
const { handleBlur, handleKeyDown } = useInlineRename({
|
|
2150
2170
|
currentName: floatTitle(node),
|
|
2151
2171
|
inputRef,
|
|
2152
|
-
onCommit: (name) =>
|
|
2153
|
-
|
|
2154
|
-
|
|
2155
|
-
|
|
2156
|
-
|
|
2172
|
+
onCommit: (name) => {
|
|
2173
|
+
dispatch({
|
|
2174
|
+
floatId: node.id,
|
|
2175
|
+
name,
|
|
2176
|
+
type: "renameFloat"
|
|
2177
|
+
});
|
|
2178
|
+
},
|
|
2157
2179
|
onDone
|
|
2158
2180
|
});
|
|
2159
2181
|
return /* @__PURE__ */ jsx("input", {
|
|
@@ -2162,7 +2184,9 @@ const FloatTitleEditor = ({ dispatch, node, onDone }) => {
|
|
|
2162
2184
|
defaultValue: floatTitle(node),
|
|
2163
2185
|
onBlur: handleBlur,
|
|
2164
2186
|
onKeyDown: handleKeyDown,
|
|
2165
|
-
onPointerDown: (event) =>
|
|
2187
|
+
onPointerDown: (event) => {
|
|
2188
|
+
event.stopPropagation();
|
|
2189
|
+
},
|
|
2166
2190
|
ref: inputRef,
|
|
2167
2191
|
style: titleStyle,
|
|
2168
2192
|
type: "text"
|
|
@@ -2173,11 +2197,15 @@ const FloatTitle = ({ dispatch, node, renamable }) => {
|
|
|
2173
2197
|
if (renamable && editing) return /* @__PURE__ */ jsx(FloatTitleEditor, {
|
|
2174
2198
|
dispatch,
|
|
2175
2199
|
node,
|
|
2176
|
-
onDone: () =>
|
|
2200
|
+
onDone: () => {
|
|
2201
|
+
setEditing(false);
|
|
2202
|
+
}
|
|
2177
2203
|
});
|
|
2178
2204
|
return /* @__PURE__ */ jsx("span", {
|
|
2179
2205
|
"data-dashfoo": "float-title",
|
|
2180
|
-
onDoubleClick: renamable ? () =>
|
|
2206
|
+
onDoubleClick: renamable ? () => {
|
|
2207
|
+
setEditing(true);
|
|
2208
|
+
} : void 0,
|
|
2181
2209
|
style: titleStyle,
|
|
2182
2210
|
title: renamable ? "Double-click to rename" : void 0,
|
|
2183
2211
|
children: floatTitle(node)
|
|
@@ -2217,13 +2245,13 @@ const FloatPanel = ({ global, node, onFocus, zIndex }) => {
|
|
|
2217
2245
|
if (prior && panel.hasPointerCapture?.(prior.pointerId)) panel.releasePointerCapture(prior.pointerId);
|
|
2218
2246
|
movedRef.current = false;
|
|
2219
2247
|
const edgeKey = event.currentTarget.dataset.edge;
|
|
2220
|
-
const parent = panel.offsetParent;
|
|
2248
|
+
const parent = panel.offsetParent instanceof HTMLElement ? panel.offsetParent : null;
|
|
2221
2249
|
const gesture = {
|
|
2222
2250
|
bounds: {
|
|
2223
2251
|
height: parent?.clientHeight ?? 0,
|
|
2224
2252
|
width: parent?.clientWidth ?? 0
|
|
2225
2253
|
},
|
|
2226
|
-
edges: edgeKey ? EDGE_BY_KEY.get(edgeKey) ?? null
|
|
2254
|
+
edges: edgeKey === void 0 ? null : EDGE_BY_KEY.get(edgeKey) ?? null,
|
|
2227
2255
|
pointerId: event.pointerId,
|
|
2228
2256
|
start: node.geometry,
|
|
2229
2257
|
startX: event.clientX,
|
|
@@ -2238,9 +2266,9 @@ const FloatPanel = ({ global, node, onFocus, zIndex }) => {
|
|
|
2238
2266
|
if (!gesture || event.pointerId !== gesture.pointerId) return;
|
|
2239
2267
|
gestureRef.current = null;
|
|
2240
2268
|
const panel = panelRef.current;
|
|
2241
|
-
if (panel?.hasPointerCapture?.(event.pointerId)) panel.releasePointerCapture(event.pointerId);
|
|
2269
|
+
if (panel?.hasPointerCapture?.(event.pointerId) === true) panel.releasePointerCapture(event.pointerId);
|
|
2242
2270
|
if (!movedRef.current) {
|
|
2243
|
-
if (node.minimized) restore();
|
|
2271
|
+
if (node.minimized === true) restore();
|
|
2244
2272
|
return;
|
|
2245
2273
|
}
|
|
2246
2274
|
dispatch({
|
|
@@ -2268,11 +2296,11 @@ const FloatPanel = ({ global, node, onFocus, zIndex }) => {
|
|
|
2268
2296
|
...gesture.start,
|
|
2269
2297
|
left: gesture.start.left + dx,
|
|
2270
2298
|
top: gesture.start.top + dy
|
|
2271
|
-
}, gesture.bounds, node.minimized ? CHIP_SIZE : void 0);
|
|
2299
|
+
}, gesture.bounds, node.minimized === true ? CHIP_SIZE : void 0);
|
|
2272
2300
|
latestRef.current = next;
|
|
2273
2301
|
panel.style.left = `${next.left}px`;
|
|
2274
2302
|
panel.style.top = `${next.top}px`;
|
|
2275
|
-
if (
|
|
2303
|
+
if (node.minimized !== true) {
|
|
2276
2304
|
panel.style.width = `${next.width}px`;
|
|
2277
2305
|
panel.style.height = `${next.height}px`;
|
|
2278
2306
|
}
|
|
@@ -2286,12 +2314,12 @@ const FloatPanel = ({ global, node, onFocus, zIndex }) => {
|
|
|
2286
2314
|
if (!movedRef.current) return;
|
|
2287
2315
|
panel.style.left = `${gesture.start.left}px`;
|
|
2288
2316
|
panel.style.top = `${gesture.start.top}px`;
|
|
2289
|
-
if (
|
|
2317
|
+
if (node.minimized !== true) {
|
|
2290
2318
|
panel.style.width = `${gesture.start.width}px`;
|
|
2291
2319
|
panel.style.height = `${gesture.start.height}px`;
|
|
2292
2320
|
}
|
|
2293
2321
|
};
|
|
2294
|
-
if (node.minimized) return /* @__PURE__ */ jsxs("button", {
|
|
2322
|
+
if (node.minimized === true) return /* @__PURE__ */ jsxs("button", {
|
|
2295
2323
|
"aria-label": `Restore ${floatTitle(node)} panel`,
|
|
2296
2324
|
"data-dashfoo": "float-chip",
|
|
2297
2325
|
onKeyDown: (event) => {
|
|
@@ -2363,12 +2391,16 @@ const FloatPanel = ({ global, node, onFocus, zIndex }) => {
|
|
|
2363
2391
|
editable && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("button", {
|
|
2364
2392
|
"aria-label": "Minimize panel",
|
|
2365
2393
|
"data-dashfoo": "float-minimize",
|
|
2366
|
-
onClick: () =>
|
|
2367
|
-
|
|
2368
|
-
|
|
2369
|
-
|
|
2370
|
-
|
|
2371
|
-
|
|
2394
|
+
onClick: () => {
|
|
2395
|
+
dispatch({
|
|
2396
|
+
floatId: node.id,
|
|
2397
|
+
minimized: true,
|
|
2398
|
+
type: "setFloatMinimized"
|
|
2399
|
+
});
|
|
2400
|
+
},
|
|
2401
|
+
onPointerDown: (event) => {
|
|
2402
|
+
event.stopPropagation();
|
|
2403
|
+
},
|
|
2372
2404
|
style: dockButtonStyle,
|
|
2373
2405
|
title: "Minimize panel",
|
|
2374
2406
|
type: "button",
|
|
@@ -2376,11 +2408,15 @@ const FloatPanel = ({ global, node, onFocus, zIndex }) => {
|
|
|
2376
2408
|
}), /* @__PURE__ */ jsx("button", {
|
|
2377
2409
|
"aria-label": "Dock panel back into the main layout",
|
|
2378
2410
|
"data-dashfoo": "float-dock",
|
|
2379
|
-
onClick: () =>
|
|
2380
|
-
|
|
2381
|
-
|
|
2382
|
-
|
|
2383
|
-
|
|
2411
|
+
onClick: () => {
|
|
2412
|
+
dispatch({
|
|
2413
|
+
floatId: node.id,
|
|
2414
|
+
type: "dockFloat"
|
|
2415
|
+
});
|
|
2416
|
+
},
|
|
2417
|
+
onPointerDown: (event) => {
|
|
2418
|
+
event.stopPropagation();
|
|
2419
|
+
},
|
|
2384
2420
|
style: dockButtonStyle,
|
|
2385
2421
|
title: "Dock panel back",
|
|
2386
2422
|
type: "button",
|
|
@@ -2442,7 +2478,9 @@ const FloatOverlay = ({ floats, global }) => {
|
|
|
2442
2478
|
children: floats.map((node) => /* @__PURE__ */ jsx(FloatPanel, {
|
|
2443
2479
|
global,
|
|
2444
2480
|
node,
|
|
2445
|
-
onFocus: () =>
|
|
2481
|
+
onFocus: () => {
|
|
2482
|
+
setTopId(node.id);
|
|
2483
|
+
},
|
|
2446
2484
|
zIndex: node.id === topId ? 2 : 1
|
|
2447
2485
|
}, node.id))
|
|
2448
2486
|
});
|
|
@@ -2499,48 +2537,62 @@ const DashfooLayout = forwardRef((props, ref) => {
|
|
|
2499
2537
|
});
|
|
2500
2538
|
const hasSharedManager = useContext(SharedDragManagerContext) !== null;
|
|
2501
2539
|
useImperativeHandle(ref, () => ({
|
|
2502
|
-
addTab: (tab, target) =>
|
|
2503
|
-
|
|
2504
|
-
|
|
2505
|
-
|
|
2506
|
-
|
|
2507
|
-
|
|
2508
|
-
|
|
2540
|
+
addTab: (tab, target) => {
|
|
2541
|
+
store.dispatch({
|
|
2542
|
+
index: target.index,
|
|
2543
|
+
location: target.location ?? "center",
|
|
2544
|
+
tab,
|
|
2545
|
+
targetId: target.targetId,
|
|
2546
|
+
type: "addNode"
|
|
2547
|
+
});
|
|
2548
|
+
},
|
|
2509
2549
|
canRedo: store.canRedo,
|
|
2510
2550
|
canUndo: store.canUndo,
|
|
2511
|
-
closeTab: (tabId) =>
|
|
2512
|
-
|
|
2513
|
-
|
|
2514
|
-
|
|
2551
|
+
closeTab: (tabId) => {
|
|
2552
|
+
store.dispatch({
|
|
2553
|
+
tabId,
|
|
2554
|
+
type: "deleteTab"
|
|
2555
|
+
});
|
|
2556
|
+
},
|
|
2515
2557
|
dispatch: store.dispatch,
|
|
2516
|
-
dockFloat: (floatId) =>
|
|
2517
|
-
|
|
2518
|
-
|
|
2519
|
-
|
|
2520
|
-
|
|
2521
|
-
|
|
2522
|
-
|
|
2523
|
-
|
|
2558
|
+
dockFloat: (floatId) => {
|
|
2559
|
+
store.dispatch({
|
|
2560
|
+
floatId,
|
|
2561
|
+
type: "dockFloat"
|
|
2562
|
+
});
|
|
2563
|
+
},
|
|
2564
|
+
floatTab: (tabId) => {
|
|
2565
|
+
store.dispatch({
|
|
2566
|
+
tabId,
|
|
2567
|
+
type: "floatTab"
|
|
2568
|
+
});
|
|
2569
|
+
},
|
|
2524
2570
|
getModel: () => store.model,
|
|
2525
|
-
maximizeTabset: (tabsetId) =>
|
|
2526
|
-
|
|
2527
|
-
|
|
2528
|
-
|
|
2571
|
+
maximizeTabset: (tabsetId) => {
|
|
2572
|
+
store.dispatch({
|
|
2573
|
+
tabsetId,
|
|
2574
|
+
type: "setMaximizedTabset"
|
|
2575
|
+
});
|
|
2576
|
+
},
|
|
2529
2577
|
redo: store.redo,
|
|
2530
|
-
renameTab: (tabId, name) =>
|
|
2531
|
-
|
|
2532
|
-
|
|
2533
|
-
|
|
2534
|
-
|
|
2578
|
+
renameTab: (tabId, name) => {
|
|
2579
|
+
store.dispatch({
|
|
2580
|
+
name,
|
|
2581
|
+
tabId,
|
|
2582
|
+
type: "renameTab"
|
|
2583
|
+
});
|
|
2584
|
+
},
|
|
2535
2585
|
resetLayout: () => {
|
|
2536
2586
|
persistence.clear();
|
|
2537
2587
|
if (defaultModel !== void 0) store.setModel(defaultModel);
|
|
2538
2588
|
},
|
|
2539
|
-
selectTab: (tabsetId, index) =>
|
|
2540
|
-
|
|
2541
|
-
|
|
2542
|
-
|
|
2543
|
-
|
|
2589
|
+
selectTab: (tabsetId, index) => {
|
|
2590
|
+
store.dispatch({
|
|
2591
|
+
index,
|
|
2592
|
+
tabsetId,
|
|
2593
|
+
type: "selectTab"
|
|
2594
|
+
});
|
|
2595
|
+
},
|
|
2544
2596
|
undo: store.undo
|
|
2545
2597
|
}), [
|
|
2546
2598
|
defaultModel,
|
|
@@ -2571,7 +2623,7 @@ const DashfooLayout = forwardRef((props, ref) => {
|
|
|
2571
2623
|
if (isCompact && action.type === "adjustSplit") return;
|
|
2572
2624
|
storeDispatch(action);
|
|
2573
2625
|
}, [isCompact, storeDispatch]);
|
|
2574
|
-
const maximized = view.maximizedTabsetId ? findTabset(view, view.maximizedTabsetId)
|
|
2626
|
+
const maximized = view.maximizedTabsetId === void 0 ? void 0 : findTabset(view, view.maximizedTabsetId);
|
|
2575
2627
|
const tree = /* @__PURE__ */ jsx(Layout.FloatLayer, {
|
|
2576
2628
|
floats: store.model.floats ?? [],
|
|
2577
2629
|
global: store.model.global,
|