@dashfoo/react 0.5.1 → 0.5.2
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 +175 -127
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
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;;;cCxGb,mBAAA;EAAuB;AAAA;EAAgB,QAAA,EAAU,SAAA;AAAA,MAAc,SAAA;;;KCmMhE,wBAAA;EAGH,SAAA,QAAiB,OAAO;EACxB,QAAA;EACA,KAAA;AAAA;AAAA,cAQI,oBAAA;EAAwB,SAAA;EAAA,QAAA;EAAA;AAAA,GAI3B,wBAAA;EAA6B,GAAA,GAAM,OAAA,EAAS,OAAA;AAAA;AAAA,cAczC,cAAA,QAAqB,WAAW;AAAA,cAShC,aAAA,QAAoB,UAAU;;;KCzH/B,iBAAA;EACH,QAAA,EAAU,SAAA;EAEV,QAAA,IAAY,MAAA,EAAQ,MAAM;EAE1B,SAAA;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
|
@@ -511,16 +511,23 @@ const DockIndicator = ({ actorRef, getTabsetElement }) => {
|
|
|
511
511
|
if (!intent) return null;
|
|
512
512
|
const element = getTabsetElement(intent.targetId);
|
|
513
513
|
if (!element) return null;
|
|
514
|
+
const zIndex = element.closest("[data-dashfoo=\"float\"]") ? overlayBase.zIndex : "auto";
|
|
514
515
|
if (intent.location === "center") {
|
|
515
516
|
const strip = element.querySelector("[data-dashfoo=\"tabstrip\"]");
|
|
516
517
|
if (strip) return /* @__PURE__ */ jsx("div", {
|
|
517
518
|
"data-dashfoo": "dock-indicator",
|
|
518
|
-
style:
|
|
519
|
+
style: {
|
|
520
|
+
...lineStyle(insertionLineRect(strip.getBoundingClientRect(), tabItemRects(strip, draggedId), intent.index ?? 0)),
|
|
521
|
+
zIndex
|
|
522
|
+
}
|
|
519
523
|
});
|
|
520
524
|
}
|
|
521
525
|
return /* @__PURE__ */ jsx("div", {
|
|
522
526
|
"data-dashfoo": "dock-indicator",
|
|
523
|
-
style:
|
|
527
|
+
style: {
|
|
528
|
+
...paneStyle(zoneRect(element.getBoundingClientRect(), intent.location)),
|
|
529
|
+
zIndex
|
|
530
|
+
}
|
|
524
531
|
});
|
|
525
532
|
};
|
|
526
533
|
const previewStyle = {
|
|
@@ -825,6 +832,125 @@ const resizeRect = (start, edges, dx, dy) => {
|
|
|
825
832
|
};
|
|
826
833
|
};
|
|
827
834
|
|
|
835
|
+
//#endregion
|
|
836
|
+
//#region src/components/float-resize-handles.ts
|
|
837
|
+
const EDGE_THICKNESS = 12;
|
|
838
|
+
const EDGE_OFFSET = -6;
|
|
839
|
+
const CORNER_SIZE = 20;
|
|
840
|
+
const CORNER_OFFSET = -8;
|
|
841
|
+
const EDGE_INSET = 12;
|
|
842
|
+
const RESIZE_HANDLES = [
|
|
843
|
+
{
|
|
844
|
+
edges: {
|
|
845
|
+
x: 0,
|
|
846
|
+
y: -1
|
|
847
|
+
},
|
|
848
|
+
key: "n",
|
|
849
|
+
style: {
|
|
850
|
+
cursor: "ns-resize",
|
|
851
|
+
height: EDGE_THICKNESS,
|
|
852
|
+
insetInline: EDGE_INSET,
|
|
853
|
+
top: EDGE_OFFSET
|
|
854
|
+
}
|
|
855
|
+
},
|
|
856
|
+
{
|
|
857
|
+
edges: {
|
|
858
|
+
x: 0,
|
|
859
|
+
y: 1
|
|
860
|
+
},
|
|
861
|
+
key: "s",
|
|
862
|
+
style: {
|
|
863
|
+
bottom: EDGE_OFFSET,
|
|
864
|
+
cursor: "ns-resize",
|
|
865
|
+
height: EDGE_THICKNESS,
|
|
866
|
+
insetInline: EDGE_INSET
|
|
867
|
+
}
|
|
868
|
+
},
|
|
869
|
+
{
|
|
870
|
+
edges: {
|
|
871
|
+
x: 1,
|
|
872
|
+
y: 0
|
|
873
|
+
},
|
|
874
|
+
key: "e",
|
|
875
|
+
style: {
|
|
876
|
+
cursor: "ew-resize",
|
|
877
|
+
insetBlock: EDGE_INSET,
|
|
878
|
+
right: EDGE_OFFSET,
|
|
879
|
+
width: EDGE_THICKNESS
|
|
880
|
+
}
|
|
881
|
+
},
|
|
882
|
+
{
|
|
883
|
+
edges: {
|
|
884
|
+
x: -1,
|
|
885
|
+
y: 0
|
|
886
|
+
},
|
|
887
|
+
key: "w",
|
|
888
|
+
style: {
|
|
889
|
+
cursor: "ew-resize",
|
|
890
|
+
insetBlock: EDGE_INSET,
|
|
891
|
+
left: EDGE_OFFSET,
|
|
892
|
+
width: EDGE_THICKNESS
|
|
893
|
+
}
|
|
894
|
+
},
|
|
895
|
+
{
|
|
896
|
+
edges: {
|
|
897
|
+
x: 1,
|
|
898
|
+
y: -1
|
|
899
|
+
},
|
|
900
|
+
key: "ne",
|
|
901
|
+
style: {
|
|
902
|
+
cursor: "nesw-resize",
|
|
903
|
+
height: CORNER_SIZE,
|
|
904
|
+
right: CORNER_OFFSET,
|
|
905
|
+
top: CORNER_OFFSET,
|
|
906
|
+
width: CORNER_SIZE
|
|
907
|
+
}
|
|
908
|
+
},
|
|
909
|
+
{
|
|
910
|
+
edges: {
|
|
911
|
+
x: -1,
|
|
912
|
+
y: -1
|
|
913
|
+
},
|
|
914
|
+
key: "nw",
|
|
915
|
+
style: {
|
|
916
|
+
cursor: "nwse-resize",
|
|
917
|
+
height: CORNER_SIZE,
|
|
918
|
+
left: CORNER_OFFSET,
|
|
919
|
+
top: CORNER_OFFSET,
|
|
920
|
+
width: CORNER_SIZE
|
|
921
|
+
}
|
|
922
|
+
},
|
|
923
|
+
{
|
|
924
|
+
edges: {
|
|
925
|
+
x: 1,
|
|
926
|
+
y: 1
|
|
927
|
+
},
|
|
928
|
+
key: "se",
|
|
929
|
+
style: {
|
|
930
|
+
bottom: CORNER_OFFSET,
|
|
931
|
+
cursor: "nwse-resize",
|
|
932
|
+
height: CORNER_SIZE,
|
|
933
|
+
right: CORNER_OFFSET,
|
|
934
|
+
width: CORNER_SIZE
|
|
935
|
+
}
|
|
936
|
+
},
|
|
937
|
+
{
|
|
938
|
+
edges: {
|
|
939
|
+
x: -1,
|
|
940
|
+
y: 1
|
|
941
|
+
},
|
|
942
|
+
key: "sw",
|
|
943
|
+
style: {
|
|
944
|
+
bottom: CORNER_OFFSET,
|
|
945
|
+
cursor: "nesw-resize",
|
|
946
|
+
height: CORNER_SIZE,
|
|
947
|
+
left: CORNER_OFFSET,
|
|
948
|
+
width: CORNER_SIZE
|
|
949
|
+
}
|
|
950
|
+
}
|
|
951
|
+
];
|
|
952
|
+
const EDGE_BY_KEY = new Map(RESIZE_HANDLES.map((h) => [h.key, h.edges]));
|
|
953
|
+
|
|
828
954
|
//#endregion
|
|
829
955
|
//#region src/components/layout-root.tsx
|
|
830
956
|
const DEFAULT_TABSET_MIN_SIZE = 320;
|
|
@@ -1148,6 +1274,7 @@ const TabOverflowMenu = ({ items, onSelect }) => {
|
|
|
1148
1274
|
"data-dashfoo": "tab-overflow",
|
|
1149
1275
|
onClick: handleToggle,
|
|
1150
1276
|
ref: triggerRef,
|
|
1277
|
+
title: "More tabs",
|
|
1151
1278
|
type: "button",
|
|
1152
1279
|
children: /* @__PURE__ */ jsx(OverflowIcon, {})
|
|
1153
1280
|
}), open ? /* @__PURE__ */ jsx("div", {
|
|
@@ -1547,6 +1674,7 @@ const TabsetCloseButton = ({ children, onClick, ...props }) => {
|
|
|
1547
1674
|
};
|
|
1548
1675
|
return /* @__PURE__ */ jsx("button", {
|
|
1549
1676
|
"aria-label": `Close ${tab.name}`,
|
|
1677
|
+
title: `Close ${tab.name}`,
|
|
1550
1678
|
...props,
|
|
1551
1679
|
"data-dashfoo": "tab-close",
|
|
1552
1680
|
onClick: handleClick,
|
|
@@ -1638,6 +1766,7 @@ const TabsetGrip = ({ children, ref: userRef, ...props }) => {
|
|
|
1638
1766
|
if (hidden) return null;
|
|
1639
1767
|
return /* @__PURE__ */ jsx("button", {
|
|
1640
1768
|
"aria-label": "Move tabset",
|
|
1769
|
+
title: "Move tabset",
|
|
1641
1770
|
...props,
|
|
1642
1771
|
"data-dashfoo": "tabset-grip",
|
|
1643
1772
|
ref: refCallback,
|
|
@@ -1656,6 +1785,7 @@ const TabsetMaximizeButton = ({ children, onClick, ...props }) => {
|
|
|
1656
1785
|
};
|
|
1657
1786
|
return /* @__PURE__ */ jsx("button", {
|
|
1658
1787
|
"aria-label": isMaximized ? "Restore" : "Maximize",
|
|
1788
|
+
title: isMaximized ? "Restore tabset" : "Maximize tabset",
|
|
1659
1789
|
...props,
|
|
1660
1790
|
"aria-pressed": isMaximized,
|
|
1661
1791
|
"data-dashfoo": "tabset-maximize",
|
|
@@ -1685,6 +1815,7 @@ const TabsetFloatButton = ({ children, onClick, ...props }) => {
|
|
|
1685
1815
|
};
|
|
1686
1816
|
return /* @__PURE__ */ jsx("button", {
|
|
1687
1817
|
"aria-label": "Float panel",
|
|
1818
|
+
title: "Float panel",
|
|
1688
1819
|
...props,
|
|
1689
1820
|
"data-dashfoo": "tabset-float",
|
|
1690
1821
|
onClick: handleClick,
|
|
@@ -1917,117 +2048,6 @@ const bodyStyle = {
|
|
|
1917
2048
|
minHeight: 0,
|
|
1918
2049
|
position: "relative"
|
|
1919
2050
|
};
|
|
1920
|
-
const RESIZE_HANDLES = [
|
|
1921
|
-
{
|
|
1922
|
-
edges: {
|
|
1923
|
-
x: 0,
|
|
1924
|
-
y: -1
|
|
1925
|
-
},
|
|
1926
|
-
key: "n",
|
|
1927
|
-
style: {
|
|
1928
|
-
cursor: "ns-resize",
|
|
1929
|
-
height: 6,
|
|
1930
|
-
insetInline: 10,
|
|
1931
|
-
top: -3
|
|
1932
|
-
}
|
|
1933
|
-
},
|
|
1934
|
-
{
|
|
1935
|
-
edges: {
|
|
1936
|
-
x: 0,
|
|
1937
|
-
y: 1
|
|
1938
|
-
},
|
|
1939
|
-
key: "s",
|
|
1940
|
-
style: {
|
|
1941
|
-
bottom: -3,
|
|
1942
|
-
cursor: "ns-resize",
|
|
1943
|
-
height: 6,
|
|
1944
|
-
insetInline: 10
|
|
1945
|
-
}
|
|
1946
|
-
},
|
|
1947
|
-
{
|
|
1948
|
-
edges: {
|
|
1949
|
-
x: 1,
|
|
1950
|
-
y: 0
|
|
1951
|
-
},
|
|
1952
|
-
key: "e",
|
|
1953
|
-
style: {
|
|
1954
|
-
cursor: "ew-resize",
|
|
1955
|
-
insetBlock: 10,
|
|
1956
|
-
right: -3,
|
|
1957
|
-
width: 6
|
|
1958
|
-
}
|
|
1959
|
-
},
|
|
1960
|
-
{
|
|
1961
|
-
edges: {
|
|
1962
|
-
x: -1,
|
|
1963
|
-
y: 0
|
|
1964
|
-
},
|
|
1965
|
-
key: "w",
|
|
1966
|
-
style: {
|
|
1967
|
-
cursor: "ew-resize",
|
|
1968
|
-
insetBlock: 10,
|
|
1969
|
-
left: -3,
|
|
1970
|
-
width: 6
|
|
1971
|
-
}
|
|
1972
|
-
},
|
|
1973
|
-
{
|
|
1974
|
-
edges: {
|
|
1975
|
-
x: 1,
|
|
1976
|
-
y: -1
|
|
1977
|
-
},
|
|
1978
|
-
key: "ne",
|
|
1979
|
-
style: {
|
|
1980
|
-
cursor: "nesw-resize",
|
|
1981
|
-
height: 14,
|
|
1982
|
-
right: -4,
|
|
1983
|
-
top: -4,
|
|
1984
|
-
width: 14
|
|
1985
|
-
}
|
|
1986
|
-
},
|
|
1987
|
-
{
|
|
1988
|
-
edges: {
|
|
1989
|
-
x: -1,
|
|
1990
|
-
y: -1
|
|
1991
|
-
},
|
|
1992
|
-
key: "nw",
|
|
1993
|
-
style: {
|
|
1994
|
-
cursor: "nwse-resize",
|
|
1995
|
-
height: 14,
|
|
1996
|
-
left: -4,
|
|
1997
|
-
top: -4,
|
|
1998
|
-
width: 14
|
|
1999
|
-
}
|
|
2000
|
-
},
|
|
2001
|
-
{
|
|
2002
|
-
edges: {
|
|
2003
|
-
x: 1,
|
|
2004
|
-
y: 1
|
|
2005
|
-
},
|
|
2006
|
-
key: "se",
|
|
2007
|
-
style: {
|
|
2008
|
-
bottom: -4,
|
|
2009
|
-
cursor: "nwse-resize",
|
|
2010
|
-
height: 14,
|
|
2011
|
-
right: -4,
|
|
2012
|
-
width: 14
|
|
2013
|
-
}
|
|
2014
|
-
},
|
|
2015
|
-
{
|
|
2016
|
-
edges: {
|
|
2017
|
-
x: -1,
|
|
2018
|
-
y: 1
|
|
2019
|
-
},
|
|
2020
|
-
key: "sw",
|
|
2021
|
-
style: {
|
|
2022
|
-
bottom: -4,
|
|
2023
|
-
cursor: "nesw-resize",
|
|
2024
|
-
height: 14,
|
|
2025
|
-
left: -4,
|
|
2026
|
-
width: 14
|
|
2027
|
-
}
|
|
2028
|
-
}
|
|
2029
|
-
];
|
|
2030
|
-
const EDGE_BY_KEY = new Map(RESIZE_HANDLES.map((h) => [h.key, h.edges]));
|
|
2031
2051
|
const CHIP_SIZE = {
|
|
2032
2052
|
height: 34,
|
|
2033
2053
|
width: 168
|
|
@@ -2120,10 +2140,12 @@ const FloatPanel = ({ global, node, onFocus, zIndex }) => {
|
|
|
2120
2140
|
const handlePointerDown = (event) => {
|
|
2121
2141
|
const panel = panelRef.current;
|
|
2122
2142
|
if (!panel || !editable) return;
|
|
2143
|
+
const prior = gestureRef.current;
|
|
2144
|
+
if (prior && panel.hasPointerCapture?.(prior.pointerId)) panel.releasePointerCapture(prior.pointerId);
|
|
2123
2145
|
movedRef.current = false;
|
|
2124
2146
|
const edgeKey = event.currentTarget.dataset.edge;
|
|
2125
2147
|
const parent = panel.offsetParent;
|
|
2126
|
-
|
|
2148
|
+
const gesture = {
|
|
2127
2149
|
bounds: {
|
|
2128
2150
|
height: parent?.clientHeight ?? 0,
|
|
2129
2151
|
width: parent?.clientWidth ?? 0
|
|
@@ -2134,18 +2156,40 @@ const FloatPanel = ({ global, node, onFocus, zIndex }) => {
|
|
|
2134
2156
|
startX: event.clientX,
|
|
2135
2157
|
startY: event.clientY
|
|
2136
2158
|
};
|
|
2159
|
+
gestureRef.current = gesture;
|
|
2137
2160
|
latestRef.current = node.geometry;
|
|
2161
|
+
if (gesture.edges) panel.setPointerCapture(event.pointerId);
|
|
2162
|
+
};
|
|
2163
|
+
const handlePointerUp = (event) => {
|
|
2164
|
+
const gesture = gestureRef.current;
|
|
2165
|
+
if (!gesture || event.pointerId !== gesture.pointerId) return;
|
|
2166
|
+
gestureRef.current = null;
|
|
2167
|
+
const panel = panelRef.current;
|
|
2168
|
+
if (panel?.hasPointerCapture?.(event.pointerId)) panel.releasePointerCapture(event.pointerId);
|
|
2169
|
+
if (!movedRef.current) {
|
|
2170
|
+
if (node.minimized) restore();
|
|
2171
|
+
return;
|
|
2172
|
+
}
|
|
2173
|
+
dispatch({
|
|
2174
|
+
floatId: node.id,
|
|
2175
|
+
geometry: latestRef.current,
|
|
2176
|
+
type: "moveFloat"
|
|
2177
|
+
});
|
|
2138
2178
|
};
|
|
2139
2179
|
const handlePointerMove = (event) => {
|
|
2140
2180
|
const gesture = gestureRef.current;
|
|
2141
2181
|
const panel = panelRef.current;
|
|
2142
2182
|
if (!gesture || !panel || event.pointerId !== gesture.pointerId) return;
|
|
2183
|
+
if (event.buttons === 0) {
|
|
2184
|
+
handlePointerUp(event);
|
|
2185
|
+
return;
|
|
2186
|
+
}
|
|
2143
2187
|
const dx = event.clientX - gesture.startX;
|
|
2144
2188
|
const dy = event.clientY - gesture.startY;
|
|
2145
2189
|
if (!movedRef.current) {
|
|
2146
2190
|
if (Math.hypot(dx, dy) <= TAP_SLOP) return;
|
|
2147
2191
|
movedRef.current = true;
|
|
2148
|
-
panel.setPointerCapture(gesture.pointerId);
|
|
2192
|
+
if (!gesture.edges) panel.setPointerCapture(gesture.pointerId);
|
|
2149
2193
|
}
|
|
2150
2194
|
const next = gesture.edges ? resizeRect(gesture.start, gesture.edges, dx, dy) : clampToBounds({
|
|
2151
2195
|
...gesture.start,
|
|
@@ -2160,20 +2204,19 @@ const FloatPanel = ({ global, node, onFocus, zIndex }) => {
|
|
|
2160
2204
|
panel.style.height = `${next.height}px`;
|
|
2161
2205
|
}
|
|
2162
2206
|
};
|
|
2163
|
-
const
|
|
2207
|
+
const handlePointerCancel = (event) => {
|
|
2164
2208
|
const gesture = gestureRef.current;
|
|
2165
|
-
|
|
2209
|
+
const panel = panelRef.current;
|
|
2210
|
+
if (!gesture || !panel || event.pointerId !== gesture.pointerId) return;
|
|
2166
2211
|
gestureRef.current = null;
|
|
2167
|
-
if (
|
|
2168
|
-
|
|
2169
|
-
|
|
2212
|
+
if (panel.hasPointerCapture?.(event.pointerId)) panel.releasePointerCapture(event.pointerId);
|
|
2213
|
+
if (!movedRef.current) return;
|
|
2214
|
+
panel.style.left = `${gesture.start.left}px`;
|
|
2215
|
+
panel.style.top = `${gesture.start.top}px`;
|
|
2216
|
+
if (!node.minimized) {
|
|
2217
|
+
panel.style.width = `${gesture.start.width}px`;
|
|
2218
|
+
panel.style.height = `${gesture.start.height}px`;
|
|
2170
2219
|
}
|
|
2171
|
-
panelRef.current?.releasePointerCapture(event.pointerId);
|
|
2172
|
-
dispatch({
|
|
2173
|
-
floatId: node.id,
|
|
2174
|
-
geometry: latestRef.current,
|
|
2175
|
-
type: "moveFloat"
|
|
2176
|
-
});
|
|
2177
2220
|
};
|
|
2178
2221
|
if (node.minimized) return /* @__PURE__ */ jsxs("button", {
|
|
2179
2222
|
"aria-label": `Restore ${floatTitle(node)} panel`,
|
|
@@ -2184,6 +2227,7 @@ const FloatPanel = ({ global, node, onFocus, zIndex }) => {
|
|
|
2184
2227
|
restore();
|
|
2185
2228
|
}
|
|
2186
2229
|
},
|
|
2230
|
+
onPointerCancel: handlePointerCancel,
|
|
2187
2231
|
onPointerDown: handlePointerDown,
|
|
2188
2232
|
onPointerDownCapture: onFocus,
|
|
2189
2233
|
onPointerMove: handlePointerMove,
|
|
@@ -2210,6 +2254,7 @@ const FloatPanel = ({ global, node, onFocus, zIndex }) => {
|
|
|
2210
2254
|
};
|
|
2211
2255
|
return /* @__PURE__ */ jsxs("div", {
|
|
2212
2256
|
"data-dashfoo": "float",
|
|
2257
|
+
onPointerCancel: handlePointerCancel,
|
|
2213
2258
|
onPointerDownCapture: onFocus,
|
|
2214
2259
|
onPointerMove: handlePointerMove,
|
|
2215
2260
|
onPointerUp: handlePointerUp,
|
|
@@ -2252,6 +2297,7 @@ const FloatPanel = ({ global, node, onFocus, zIndex }) => {
|
|
|
2252
2297
|
}),
|
|
2253
2298
|
onPointerDown: (event) => event.stopPropagation(),
|
|
2254
2299
|
style: dockButtonStyle,
|
|
2300
|
+
title: "Minimize panel",
|
|
2255
2301
|
type: "button",
|
|
2256
2302
|
children: /* @__PURE__ */ jsx(MinimizeIcon, {})
|
|
2257
2303
|
}), /* @__PURE__ */ jsx("button", {
|
|
@@ -2263,6 +2309,7 @@ const FloatPanel = ({ global, node, onFocus, zIndex }) => {
|
|
|
2263
2309
|
}),
|
|
2264
2310
|
onPointerDown: (event) => event.stopPropagation(),
|
|
2265
2311
|
style: dockButtonStyle,
|
|
2312
|
+
title: "Dock panel back",
|
|
2266
2313
|
type: "button",
|
|
2267
2314
|
children: /* @__PURE__ */ jsx(DockIcon, {})
|
|
2268
2315
|
})] })
|
|
@@ -2310,7 +2357,8 @@ const FloatPanel = ({ global, node, onFocus, zIndex }) => {
|
|
|
2310
2357
|
const overlayStyle = {
|
|
2311
2358
|
inset: 0,
|
|
2312
2359
|
pointerEvents: "none",
|
|
2313
|
-
position: "fixed"
|
|
2360
|
+
position: "fixed",
|
|
2361
|
+
zIndex: 1
|
|
2314
2362
|
};
|
|
2315
2363
|
const FloatOverlay = ({ floats, global }) => {
|
|
2316
2364
|
const [topId, setTopId] = useState(null);
|