@alisowski/react-resizable-panels
Advanced tools
Comparing version 0.1.16 to 0.1.17
@@ -208,5 +208,5 @@ 'use strict'; | ||
let fullDelta = Math.abs(deltaPixels); | ||
const groupSizePixels = units === "pixels" ? getAvailableGroupSizePixels(groupId) : NaN; | ||
const { | ||
sizes: initialSizes | ||
let { | ||
sizes: initialSizes, | ||
groupSizePixels = units === "pixels" ? getAvailableGroupSizePixels(groupId) : NaN | ||
} = initialDragState || {}; | ||
@@ -311,4 +311,3 @@ | ||
} | ||
function callPanelCallbacks(units, groupId, panelsArray, sizes, panelIdToLastNotifiedSizeMap) { | ||
const groupPixels = getAvailableGroupSizePixels(groupId); | ||
function callPanelCallbacks(units, panelsArray, sizes, panelIdToLastNotifiedSizeMap, initialDragState) { | ||
sizes.forEach((size, index) => { | ||
@@ -327,2 +326,3 @@ const panelRef = panelsArray[index]; | ||
} = panelRef.current; | ||
const groupPixels = initialDragState?.groupSizePixels ?? units === "pixels" ? getAvailableGroupSizePixels(id) : NaN; | ||
const lastNotifiedSize = panelIdToLastNotifiedSizeMap[id]; | ||
@@ -336,3 +336,3 @@ if (lastNotifiedSize !== size) { | ||
if (onResize) { | ||
onResize(size, lastNotifiedSize); | ||
onResize(normalizePercentageValue(units, groupPixels, size), normalizePercentageValue(units, groupPixels, lastNotifiedSize)); | ||
} | ||
@@ -554,2 +554,4 @@ const collapsePercentage = normalizePixelValue(units, groupPixels, collapsedSize); | ||
} | ||
/** Converts pixel value to percentage */ | ||
function normalizePixelValue(units, groupSizePixels, value) { | ||
@@ -561,2 +563,10 @@ if (units === "pixels") { | ||
} | ||
/** Converts percentage to pixel value */ | ||
function normalizePercentageValue(units, groupSizePixels, value) { | ||
if (units === "pixels") { | ||
value = value / 100 * groupSizePixels; | ||
} | ||
return value; | ||
} | ||
function safeResizePanel(units, groupSizePixels, panel, prevSize, nextSize, event = null) { | ||
@@ -1107,3 +1117,5 @@ let { | ||
tagName: Type = "div", | ||
units = "percentages" | ||
units = "percentages", | ||
setGlobalCursorStyle: setGlobalCursorStyle$1 = setGlobalCursorStyle, | ||
resetGlobalCursorStyle: resetGlobalCursorStyle$1 = resetGlobalCursorStyle | ||
}) { | ||
@@ -1186,3 +1198,3 @@ const groupId = useUniqueId(idFromProps); | ||
setSizes(nextSizes); | ||
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap); | ||
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current); | ||
} | ||
@@ -1230,3 +1242,3 @@ } | ||
const panelsArray = panelsMapToSortedArray(panels); | ||
callPanelCallbacks(units, groupId, panelsArray, sizes, panelIdToLastNotifiedSizeMap); | ||
callPanelCallbacks(units, panelsArray, sizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current); | ||
} | ||
@@ -1390,7 +1402,5 @@ }, [sizes]); | ||
let movement = getMovement(event, groupId, handleId, panelsArray, direction, prevSizes, initialDragStateRef.current); | ||
if (movement === 0) { | ||
if (movement === 0 || !initialDragStateRef.current) { | ||
return; | ||
} | ||
const groupElement = getPanelGroup(groupId); | ||
const rect = groupElement.getBoundingClientRect(); | ||
const isHorizontal = direction === "horizontal"; | ||
@@ -1402,3 +1412,3 @@ | ||
} | ||
const size = isHorizontal ? rect.width : rect.height; | ||
const size = initialDragStateRef.current?.groupSizePixels; | ||
const delta = movement / size * 100; | ||
@@ -1423,9 +1433,9 @@ | ||
if (isHorizontal) { | ||
setGlobalCursorStyle(movement < 0 ? "horizontal-min" : "horizontal-max"); | ||
setGlobalCursorStyle$1(movement < 0 ? "horizontal-min" : "horizontal-max"); | ||
} else { | ||
setGlobalCursorStyle(movement < 0 ? "vertical-min" : "vertical-max"); | ||
setGlobalCursorStyle$1(movement < 0 ? "vertical-min" : "vertical-max"); | ||
} | ||
} else { | ||
// Reset the cursor style to the the normal resize cursor. | ||
setGlobalCursorStyle(isHorizontal ? "horizontal" : "vertical"); | ||
setGlobalCursorStyle$1(isHorizontal ? "horizontal" : "vertical"); | ||
} | ||
@@ -1442,3 +1452,3 @@ } | ||
// Trigger user callbacks after updating state, so that user code can override the sizes. | ||
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap); | ||
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current); | ||
} | ||
@@ -1501,3 +1511,3 @@ prevDeltaRef.current = delta; | ||
// Trigger user callbacks after updating state, so that user code can override the sizes. | ||
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap); | ||
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current); | ||
} | ||
@@ -1557,3 +1567,3 @@ }, []); | ||
// Trigger user callbacks after updating state, so that user code can override the sizes. | ||
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap); | ||
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current); | ||
} | ||
@@ -1614,3 +1624,3 @@ }, []); | ||
// Trigger user callbacks after updating state, so that user code can override the sizes. | ||
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap); | ||
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current); | ||
} | ||
@@ -1636,3 +1646,4 @@ }, []); | ||
dragOffset: getDragOffset(event, id, direction), | ||
sizes: committedValuesRef.current.sizes | ||
sizes: committedValuesRef.current.sizes, | ||
groupSizePixels: getAvailableGroupSizePixels(groupId) | ||
}; | ||
@@ -1642,3 +1653,3 @@ } | ||
stopDragging: () => { | ||
resetGlobalCursorStyle(); | ||
resetGlobalCursorStyle$1(); | ||
setActiveHandleId(null); | ||
@@ -1645,0 +1656,0 @@ initialDragStateRef.current = null; |
@@ -184,5 +184,5 @@ import * as React from 'react'; | ||
let fullDelta = Math.abs(deltaPixels); | ||
const groupSizePixels = units === "pixels" ? getAvailableGroupSizePixels(groupId) : NaN; | ||
const { | ||
sizes: initialSizes | ||
let { | ||
sizes: initialSizes, | ||
groupSizePixels = units === "pixels" ? getAvailableGroupSizePixels(groupId) : NaN | ||
} = initialDragState || {}; | ||
@@ -287,4 +287,3 @@ | ||
} | ||
function callPanelCallbacks(units, groupId, panelsArray, sizes, panelIdToLastNotifiedSizeMap) { | ||
const groupPixels = getAvailableGroupSizePixels(groupId); | ||
function callPanelCallbacks(units, panelsArray, sizes, panelIdToLastNotifiedSizeMap, initialDragState) { | ||
sizes.forEach((size, index) => { | ||
@@ -303,2 +302,3 @@ const panelRef = panelsArray[index]; | ||
} = panelRef.current; | ||
const groupPixels = initialDragState?.groupSizePixels ?? units === "pixels" ? getAvailableGroupSizePixels(id) : NaN; | ||
const lastNotifiedSize = panelIdToLastNotifiedSizeMap[id]; | ||
@@ -312,3 +312,3 @@ if (lastNotifiedSize !== size) { | ||
if (onResize) { | ||
onResize(size, lastNotifiedSize); | ||
onResize(normalizePercentageValue(units, groupPixels, size), normalizePercentageValue(units, groupPixels, lastNotifiedSize)); | ||
} | ||
@@ -534,2 +534,4 @@ const collapsePercentage = normalizePixelValue(units, groupPixels, collapsedSize); | ||
} | ||
/** Converts pixel value to percentage */ | ||
function normalizePixelValue(units, groupSizePixels, value) { | ||
@@ -541,2 +543,10 @@ if (units === "pixels") { | ||
} | ||
/** Converts percentage to pixel value */ | ||
function normalizePercentageValue(units, groupSizePixels, value) { | ||
if (units === "pixels") { | ||
value = value / 100 * groupSizePixels; | ||
} | ||
return value; | ||
} | ||
function safeResizePanel(units, groupSizePixels, panel, prevSize, nextSize, event = null) { | ||
@@ -1109,3 +1119,5 @@ let { | ||
tagName: Type = "div", | ||
units = "percentages" | ||
units = "percentages", | ||
setGlobalCursorStyle: setGlobalCursorStyle$1 = setGlobalCursorStyle, | ||
resetGlobalCursorStyle: resetGlobalCursorStyle$1 = resetGlobalCursorStyle | ||
}) { | ||
@@ -1188,3 +1200,3 @@ const groupId = useUniqueId(idFromProps); | ||
setSizes(nextSizes); | ||
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap); | ||
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current); | ||
} | ||
@@ -1232,3 +1244,3 @@ } | ||
const panelsArray = panelsMapToSortedArray(panels); | ||
callPanelCallbacks(units, groupId, panelsArray, sizes, panelIdToLastNotifiedSizeMap); | ||
callPanelCallbacks(units, panelsArray, sizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current); | ||
} | ||
@@ -1415,7 +1427,5 @@ }, [sizes]); | ||
let movement = getMovement(event, groupId, handleId, panelsArray, direction, prevSizes, initialDragStateRef.current); | ||
if (movement === 0) { | ||
if (movement === 0 || !initialDragStateRef.current) { | ||
return; | ||
} | ||
const groupElement = getPanelGroup(groupId); | ||
const rect = groupElement.getBoundingClientRect(); | ||
const isHorizontal = direction === "horizontal"; | ||
@@ -1427,3 +1437,3 @@ | ||
} | ||
const size = isHorizontal ? rect.width : rect.height; | ||
const size = initialDragStateRef.current?.groupSizePixels; | ||
const delta = movement / size * 100; | ||
@@ -1448,9 +1458,9 @@ | ||
if (isHorizontal) { | ||
setGlobalCursorStyle(movement < 0 ? "horizontal-min" : "horizontal-max"); | ||
setGlobalCursorStyle$1(movement < 0 ? "horizontal-min" : "horizontal-max"); | ||
} else { | ||
setGlobalCursorStyle(movement < 0 ? "vertical-min" : "vertical-max"); | ||
setGlobalCursorStyle$1(movement < 0 ? "vertical-min" : "vertical-max"); | ||
} | ||
} else { | ||
// Reset the cursor style to the the normal resize cursor. | ||
setGlobalCursorStyle(isHorizontal ? "horizontal" : "vertical"); | ||
setGlobalCursorStyle$1(isHorizontal ? "horizontal" : "vertical"); | ||
} | ||
@@ -1467,3 +1477,3 @@ } | ||
// Trigger user callbacks after updating state, so that user code can override the sizes. | ||
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap); | ||
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current); | ||
} | ||
@@ -1526,3 +1536,3 @@ prevDeltaRef.current = delta; | ||
// Trigger user callbacks after updating state, so that user code can override the sizes. | ||
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap); | ||
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current); | ||
} | ||
@@ -1582,3 +1592,3 @@ }, []); | ||
// Trigger user callbacks after updating state, so that user code can override the sizes. | ||
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap); | ||
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current); | ||
} | ||
@@ -1645,3 +1655,3 @@ }, []); | ||
// Trigger user callbacks after updating state, so that user code can override the sizes. | ||
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap); | ||
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current); | ||
} | ||
@@ -1667,3 +1677,4 @@ }, []); | ||
dragOffset: getDragOffset(event, id, direction), | ||
sizes: committedValuesRef.current.sizes | ||
sizes: committedValuesRef.current.sizes, | ||
groupSizePixels: getAvailableGroupSizePixels(groupId) | ||
}; | ||
@@ -1673,3 +1684,3 @@ } | ||
stopDragging: () => { | ||
resetGlobalCursorStyle(); | ||
resetGlobalCursorStyle$1(); | ||
setActiveHandleId(null); | ||
@@ -1676,0 +1687,0 @@ initialDragStateRef.current = null; |
@@ -184,5 +184,5 @@ import * as React from 'react'; | ||
let fullDelta = Math.abs(deltaPixels); | ||
const groupSizePixels = units === "pixels" ? getAvailableGroupSizePixels(groupId) : NaN; | ||
const { | ||
sizes: initialSizes | ||
let { | ||
sizes: initialSizes, | ||
groupSizePixels = units === "pixels" ? getAvailableGroupSizePixels(groupId) : NaN | ||
} = initialDragState || {}; | ||
@@ -287,4 +287,3 @@ | ||
} | ||
function callPanelCallbacks(units, groupId, panelsArray, sizes, panelIdToLastNotifiedSizeMap) { | ||
const groupPixels = getAvailableGroupSizePixels(groupId); | ||
function callPanelCallbacks(units, panelsArray, sizes, panelIdToLastNotifiedSizeMap, initialDragState) { | ||
sizes.forEach((size, index) => { | ||
@@ -303,2 +302,3 @@ const panelRef = panelsArray[index]; | ||
} = panelRef.current; | ||
const groupPixels = initialDragState?.groupSizePixels ?? units === "pixels" ? getAvailableGroupSizePixels(id) : NaN; | ||
const lastNotifiedSize = panelIdToLastNotifiedSizeMap[id]; | ||
@@ -312,3 +312,3 @@ if (lastNotifiedSize !== size) { | ||
if (onResize) { | ||
onResize(size, lastNotifiedSize); | ||
onResize(normalizePercentageValue(units, groupPixels, size), normalizePercentageValue(units, groupPixels, lastNotifiedSize)); | ||
} | ||
@@ -530,2 +530,4 @@ const collapsePercentage = normalizePixelValue(units, groupPixels, collapsedSize); | ||
} | ||
/** Converts pixel value to percentage */ | ||
function normalizePixelValue(units, groupSizePixels, value) { | ||
@@ -537,2 +539,10 @@ if (units === "pixels") { | ||
} | ||
/** Converts percentage to pixel value */ | ||
function normalizePercentageValue(units, groupSizePixels, value) { | ||
if (units === "pixels") { | ||
value = value / 100 * groupSizePixels; | ||
} | ||
return value; | ||
} | ||
function safeResizePanel(units, groupSizePixels, panel, prevSize, nextSize, event = null) { | ||
@@ -1083,3 +1093,5 @@ let { | ||
tagName: Type = "div", | ||
units = "percentages" | ||
units = "percentages", | ||
setGlobalCursorStyle: setGlobalCursorStyle$1 = setGlobalCursorStyle, | ||
resetGlobalCursorStyle: resetGlobalCursorStyle$1 = resetGlobalCursorStyle | ||
}) { | ||
@@ -1162,3 +1174,3 @@ const groupId = useUniqueId(idFromProps); | ||
setSizes(nextSizes); | ||
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap); | ||
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current); | ||
} | ||
@@ -1206,3 +1218,3 @@ } | ||
const panelsArray = panelsMapToSortedArray(panels); | ||
callPanelCallbacks(units, groupId, panelsArray, sizes, panelIdToLastNotifiedSizeMap); | ||
callPanelCallbacks(units, panelsArray, sizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current); | ||
} | ||
@@ -1366,7 +1378,5 @@ }, [sizes]); | ||
let movement = getMovement(event, groupId, handleId, panelsArray, direction, prevSizes, initialDragStateRef.current); | ||
if (movement === 0) { | ||
if (movement === 0 || !initialDragStateRef.current) { | ||
return; | ||
} | ||
const groupElement = getPanelGroup(groupId); | ||
const rect = groupElement.getBoundingClientRect(); | ||
const isHorizontal = direction === "horizontal"; | ||
@@ -1378,3 +1388,3 @@ | ||
} | ||
const size = isHorizontal ? rect.width : rect.height; | ||
const size = initialDragStateRef.current?.groupSizePixels; | ||
const delta = movement / size * 100; | ||
@@ -1399,9 +1409,9 @@ | ||
if (isHorizontal) { | ||
setGlobalCursorStyle(movement < 0 ? "horizontal-min" : "horizontal-max"); | ||
setGlobalCursorStyle$1(movement < 0 ? "horizontal-min" : "horizontal-max"); | ||
} else { | ||
setGlobalCursorStyle(movement < 0 ? "vertical-min" : "vertical-max"); | ||
setGlobalCursorStyle$1(movement < 0 ? "vertical-min" : "vertical-max"); | ||
} | ||
} else { | ||
// Reset the cursor style to the the normal resize cursor. | ||
setGlobalCursorStyle(isHorizontal ? "horizontal" : "vertical"); | ||
setGlobalCursorStyle$1(isHorizontal ? "horizontal" : "vertical"); | ||
} | ||
@@ -1418,3 +1428,3 @@ } | ||
// Trigger user callbacks after updating state, so that user code can override the sizes. | ||
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap); | ||
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current); | ||
} | ||
@@ -1477,3 +1487,3 @@ prevDeltaRef.current = delta; | ||
// Trigger user callbacks after updating state, so that user code can override the sizes. | ||
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap); | ||
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current); | ||
} | ||
@@ -1533,3 +1543,3 @@ }, []); | ||
// Trigger user callbacks after updating state, so that user code can override the sizes. | ||
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap); | ||
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current); | ||
} | ||
@@ -1590,3 +1600,3 @@ }, []); | ||
// Trigger user callbacks after updating state, so that user code can override the sizes. | ||
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap); | ||
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current); | ||
} | ||
@@ -1612,3 +1622,4 @@ }, []); | ||
dragOffset: getDragOffset(event, id, direction), | ||
sizes: committedValuesRef.current.sizes | ||
sizes: committedValuesRef.current.sizes, | ||
groupSizePixels: getAvailableGroupSizePixels(groupId) | ||
}; | ||
@@ -1618,3 +1629,3 @@ } | ||
stopDragging: () => { | ||
resetGlobalCursorStyle(); | ||
resetGlobalCursorStyle$1(); | ||
setActiveHandleId(null); | ||
@@ -1621,0 +1632,0 @@ initialDragStateRef.current = null; |
@@ -210,5 +210,5 @@ 'use strict'; | ||
let fullDelta = Math.abs(deltaPixels); | ||
const groupSizePixels = units === "pixels" ? getAvailableGroupSizePixels(groupId) : NaN; | ||
const { | ||
sizes: initialSizes | ||
let { | ||
sizes: initialSizes, | ||
groupSizePixels = units === "pixels" ? getAvailableGroupSizePixels(groupId) : NaN | ||
} = initialDragState || {}; | ||
@@ -313,4 +313,3 @@ | ||
} | ||
function callPanelCallbacks(units, groupId, panelsArray, sizes, panelIdToLastNotifiedSizeMap) { | ||
const groupPixels = getAvailableGroupSizePixels(groupId); | ||
function callPanelCallbacks(units, panelsArray, sizes, panelIdToLastNotifiedSizeMap, initialDragState) { | ||
sizes.forEach((size, index) => { | ||
@@ -329,2 +328,3 @@ const panelRef = panelsArray[index]; | ||
} = panelRef.current; | ||
const groupPixels = initialDragState?.groupSizePixels ?? units === "pixels" ? getAvailableGroupSizePixels(id) : NaN; | ||
const lastNotifiedSize = panelIdToLastNotifiedSizeMap[id]; | ||
@@ -338,3 +338,3 @@ if (lastNotifiedSize !== size) { | ||
if (onResize) { | ||
onResize(size, lastNotifiedSize); | ||
onResize(normalizePercentageValue(units, groupPixels, size), normalizePercentageValue(units, groupPixels, lastNotifiedSize)); | ||
} | ||
@@ -556,2 +556,4 @@ const collapsePercentage = normalizePixelValue(units, groupPixels, collapsedSize); | ||
} | ||
/** Converts pixel value to percentage */ | ||
function normalizePixelValue(units, groupSizePixels, value) { | ||
@@ -563,2 +565,10 @@ if (units === "pixels") { | ||
} | ||
/** Converts percentage to pixel value */ | ||
function normalizePercentageValue(units, groupSizePixels, value) { | ||
if (units === "pixels") { | ||
value = value / 100 * groupSizePixels; | ||
} | ||
return value; | ||
} | ||
function safeResizePanel(units, groupSizePixels, panel, prevSize, nextSize, event = null) { | ||
@@ -1109,3 +1119,5 @@ let { | ||
tagName: Type = "div", | ||
units = "percentages" | ||
units = "percentages", | ||
setGlobalCursorStyle: setGlobalCursorStyle$1 = setGlobalCursorStyle, | ||
resetGlobalCursorStyle: resetGlobalCursorStyle$1 = resetGlobalCursorStyle | ||
}) { | ||
@@ -1188,3 +1200,3 @@ const groupId = useUniqueId(idFromProps); | ||
setSizes(nextSizes); | ||
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap); | ||
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current); | ||
} | ||
@@ -1232,3 +1244,3 @@ } | ||
const panelsArray = panelsMapToSortedArray(panels); | ||
callPanelCallbacks(units, groupId, panelsArray, sizes, panelIdToLastNotifiedSizeMap); | ||
callPanelCallbacks(units, panelsArray, sizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current); | ||
} | ||
@@ -1392,7 +1404,5 @@ }, [sizes]); | ||
let movement = getMovement(event, groupId, handleId, panelsArray, direction, prevSizes, initialDragStateRef.current); | ||
if (movement === 0) { | ||
if (movement === 0 || !initialDragStateRef.current) { | ||
return; | ||
} | ||
const groupElement = getPanelGroup(groupId); | ||
const rect = groupElement.getBoundingClientRect(); | ||
const isHorizontal = direction === "horizontal"; | ||
@@ -1404,3 +1414,3 @@ | ||
} | ||
const size = isHorizontal ? rect.width : rect.height; | ||
const size = initialDragStateRef.current?.groupSizePixels; | ||
const delta = movement / size * 100; | ||
@@ -1425,9 +1435,9 @@ | ||
if (isHorizontal) { | ||
setGlobalCursorStyle(movement < 0 ? "horizontal-min" : "horizontal-max"); | ||
setGlobalCursorStyle$1(movement < 0 ? "horizontal-min" : "horizontal-max"); | ||
} else { | ||
setGlobalCursorStyle(movement < 0 ? "vertical-min" : "vertical-max"); | ||
setGlobalCursorStyle$1(movement < 0 ? "vertical-min" : "vertical-max"); | ||
} | ||
} else { | ||
// Reset the cursor style to the the normal resize cursor. | ||
setGlobalCursorStyle(isHorizontal ? "horizontal" : "vertical"); | ||
setGlobalCursorStyle$1(isHorizontal ? "horizontal" : "vertical"); | ||
} | ||
@@ -1444,3 +1454,3 @@ } | ||
// Trigger user callbacks after updating state, so that user code can override the sizes. | ||
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap); | ||
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current); | ||
} | ||
@@ -1503,3 +1513,3 @@ prevDeltaRef.current = delta; | ||
// Trigger user callbacks after updating state, so that user code can override the sizes. | ||
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap); | ||
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current); | ||
} | ||
@@ -1559,3 +1569,3 @@ }, []); | ||
// Trigger user callbacks after updating state, so that user code can override the sizes. | ||
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap); | ||
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current); | ||
} | ||
@@ -1616,3 +1626,3 @@ }, []); | ||
// Trigger user callbacks after updating state, so that user code can override the sizes. | ||
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap); | ||
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current); | ||
} | ||
@@ -1638,3 +1648,4 @@ }, []); | ||
dragOffset: getDragOffset(event, id, direction), | ||
sizes: committedValuesRef.current.sizes | ||
sizes: committedValuesRef.current.sizes, | ||
groupSizePixels: getAvailableGroupSizePixels(groupId) | ||
}; | ||
@@ -1644,3 +1655,3 @@ } | ||
stopDragging: () => { | ||
resetGlobalCursorStyle(); | ||
resetGlobalCursorStyle$1(); | ||
setActiveHandleId(null); | ||
@@ -1647,0 +1658,0 @@ initialDragStateRef.current = null; |
@@ -186,5 +186,5 @@ import * as React from 'react'; | ||
let fullDelta = Math.abs(deltaPixels); | ||
const groupSizePixels = units === "pixels" ? getAvailableGroupSizePixels(groupId) : NaN; | ||
const { | ||
sizes: initialSizes | ||
let { | ||
sizes: initialSizes, | ||
groupSizePixels = units === "pixels" ? getAvailableGroupSizePixels(groupId) : NaN | ||
} = initialDragState || {}; | ||
@@ -289,4 +289,3 @@ | ||
} | ||
function callPanelCallbacks(units, groupId, panelsArray, sizes, panelIdToLastNotifiedSizeMap) { | ||
const groupPixels = getAvailableGroupSizePixels(groupId); | ||
function callPanelCallbacks(units, panelsArray, sizes, panelIdToLastNotifiedSizeMap, initialDragState) { | ||
sizes.forEach((size, index) => { | ||
@@ -305,2 +304,3 @@ const panelRef = panelsArray[index]; | ||
} = panelRef.current; | ||
const groupPixels = initialDragState?.groupSizePixels ?? units === "pixels" ? getAvailableGroupSizePixels(id) : NaN; | ||
const lastNotifiedSize = panelIdToLastNotifiedSizeMap[id]; | ||
@@ -314,3 +314,3 @@ if (lastNotifiedSize !== size) { | ||
if (onResize) { | ||
onResize(size, lastNotifiedSize); | ||
onResize(normalizePercentageValue(units, groupPixels, size), normalizePercentageValue(units, groupPixels, lastNotifiedSize)); | ||
} | ||
@@ -536,2 +536,4 @@ const collapsePercentage = normalizePixelValue(units, groupPixels, collapsedSize); | ||
} | ||
/** Converts pixel value to percentage */ | ||
function normalizePixelValue(units, groupSizePixels, value) { | ||
@@ -543,2 +545,10 @@ if (units === "pixels") { | ||
} | ||
/** Converts percentage to pixel value */ | ||
function normalizePercentageValue(units, groupSizePixels, value) { | ||
if (units === "pixels") { | ||
value = value / 100 * groupSizePixels; | ||
} | ||
return value; | ||
} | ||
function safeResizePanel(units, groupSizePixels, panel, prevSize, nextSize, event = null) { | ||
@@ -1111,3 +1121,5 @@ let { | ||
tagName: Type = "div", | ||
units = "percentages" | ||
units = "percentages", | ||
setGlobalCursorStyle: setGlobalCursorStyle$1 = setGlobalCursorStyle, | ||
resetGlobalCursorStyle: resetGlobalCursorStyle$1 = resetGlobalCursorStyle | ||
}) { | ||
@@ -1190,3 +1202,3 @@ const groupId = useUniqueId(idFromProps); | ||
setSizes(nextSizes); | ||
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap); | ||
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current); | ||
} | ||
@@ -1234,3 +1246,3 @@ } | ||
const panelsArray = panelsMapToSortedArray(panels); | ||
callPanelCallbacks(units, groupId, panelsArray, sizes, panelIdToLastNotifiedSizeMap); | ||
callPanelCallbacks(units, panelsArray, sizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current); | ||
} | ||
@@ -1422,7 +1434,5 @@ }, [sizes]); | ||
let movement = getMovement(event, groupId, handleId, panelsArray, direction, prevSizes, initialDragStateRef.current); | ||
if (movement === 0) { | ||
if (movement === 0 || !initialDragStateRef.current) { | ||
return; | ||
} | ||
const groupElement = getPanelGroup(groupId); | ||
const rect = groupElement.getBoundingClientRect(); | ||
const isHorizontal = direction === "horizontal"; | ||
@@ -1434,3 +1444,3 @@ | ||
} | ||
const size = isHorizontal ? rect.width : rect.height; | ||
const size = initialDragStateRef.current?.groupSizePixels; | ||
const delta = movement / size * 100; | ||
@@ -1455,9 +1465,9 @@ | ||
if (isHorizontal) { | ||
setGlobalCursorStyle(movement < 0 ? "horizontal-min" : "horizontal-max"); | ||
setGlobalCursorStyle$1(movement < 0 ? "horizontal-min" : "horizontal-max"); | ||
} else { | ||
setGlobalCursorStyle(movement < 0 ? "vertical-min" : "vertical-max"); | ||
setGlobalCursorStyle$1(movement < 0 ? "vertical-min" : "vertical-max"); | ||
} | ||
} else { | ||
// Reset the cursor style to the the normal resize cursor. | ||
setGlobalCursorStyle(isHorizontal ? "horizontal" : "vertical"); | ||
setGlobalCursorStyle$1(isHorizontal ? "horizontal" : "vertical"); | ||
} | ||
@@ -1474,3 +1484,3 @@ } | ||
// Trigger user callbacks after updating state, so that user code can override the sizes. | ||
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap); | ||
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current); | ||
} | ||
@@ -1533,3 +1543,3 @@ prevDeltaRef.current = delta; | ||
// Trigger user callbacks after updating state, so that user code can override the sizes. | ||
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap); | ||
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current); | ||
} | ||
@@ -1589,3 +1599,3 @@ }, []); | ||
// Trigger user callbacks after updating state, so that user code can override the sizes. | ||
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap); | ||
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current); | ||
} | ||
@@ -1652,3 +1662,3 @@ }, []); | ||
// Trigger user callbacks after updating state, so that user code can override the sizes. | ||
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap); | ||
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current); | ||
} | ||
@@ -1674,3 +1684,4 @@ }, []); | ||
dragOffset: getDragOffset(event, id, direction), | ||
sizes: committedValuesRef.current.sizes | ||
sizes: committedValuesRef.current.sizes, | ||
groupSizePixels: getAvailableGroupSizePixels(groupId) | ||
}; | ||
@@ -1680,3 +1691,3 @@ } | ||
stopDragging: () => { | ||
resetGlobalCursorStyle(); | ||
resetGlobalCursorStyle$1(); | ||
setActiveHandleId(null); | ||
@@ -1683,0 +1694,0 @@ initialDragStateRef.current = null; |
@@ -188,5 +188,5 @@ 'use strict'; | ||
let fullDelta = Math.abs(deltaPixels); | ||
const groupSizePixels = units === "pixels" ? getAvailableGroupSizePixels(groupId) : NaN; | ||
const { | ||
sizes: initialSizes | ||
let { | ||
sizes: initialSizes, | ||
groupSizePixels = units === "pixels" ? getAvailableGroupSizePixels(groupId) : NaN | ||
} = initialDragState || {}; | ||
@@ -291,4 +291,3 @@ | ||
} | ||
function callPanelCallbacks(units, groupId, panelsArray, sizes, panelIdToLastNotifiedSizeMap) { | ||
const groupPixels = getAvailableGroupSizePixels(groupId); | ||
function callPanelCallbacks(units, panelsArray, sizes, panelIdToLastNotifiedSizeMap, initialDragState) { | ||
sizes.forEach((size, index) => { | ||
@@ -307,2 +306,3 @@ const panelRef = panelsArray[index]; | ||
} = panelRef.current; | ||
const groupPixels = initialDragState?.groupSizePixels ?? units === "pixels" ? getAvailableGroupSizePixels(id) : NaN; | ||
const lastNotifiedSize = panelIdToLastNotifiedSizeMap[id]; | ||
@@ -316,3 +316,3 @@ if (lastNotifiedSize !== size) { | ||
if (onResize) { | ||
onResize(size, lastNotifiedSize); | ||
onResize(normalizePercentageValue(units, groupPixels, size), normalizePercentageValue(units, groupPixels, lastNotifiedSize)); | ||
} | ||
@@ -430,2 +430,4 @@ const collapsePercentage = normalizePixelValue(units, groupPixels, collapsedSize); | ||
} | ||
/** Converts pixel value to percentage */ | ||
function normalizePixelValue(units, groupSizePixels, value) { | ||
@@ -437,2 +439,10 @@ if (units === "pixels") { | ||
} | ||
/** Converts percentage to pixel value */ | ||
function normalizePercentageValue(units, groupSizePixels, value) { | ||
if (units === "pixels") { | ||
value = value / 100 * groupSizePixels; | ||
} | ||
return value; | ||
} | ||
function safeResizePanel(units, groupSizePixels, panel, prevSize, nextSize, event = null) { | ||
@@ -997,3 +1007,5 @@ let { | ||
tagName: Type = "div", | ||
units = "percentages" | ||
units = "percentages", | ||
setGlobalCursorStyle: setGlobalCursorStyle$1 = setGlobalCursorStyle, | ||
resetGlobalCursorStyle: resetGlobalCursorStyle$1 = resetGlobalCursorStyle | ||
}) { | ||
@@ -1076,3 +1088,3 @@ const groupId = useUniqueId(idFromProps); | ||
setSizes(nextSizes); | ||
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap); | ||
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current); | ||
} | ||
@@ -1113,3 +1125,3 @@ } | ||
const panelsArray = panelsMapToSortedArray(panels); | ||
callPanelCallbacks(units, groupId, panelsArray, sizes, panelIdToLastNotifiedSizeMap); | ||
callPanelCallbacks(units, panelsArray, sizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current); | ||
} | ||
@@ -1233,7 +1245,5 @@ }, [sizes]); | ||
let movement = getMovement(event, groupId, handleId, panelsArray, direction, prevSizes, initialDragStateRef.current); | ||
if (movement === 0) { | ||
if (movement === 0 || !initialDragStateRef.current) { | ||
return; | ||
} | ||
const groupElement = getPanelGroup(groupId); | ||
const rect = groupElement.getBoundingClientRect(); | ||
const isHorizontal = direction === "horizontal"; | ||
@@ -1245,3 +1255,3 @@ | ||
} | ||
const size = isHorizontal ? rect.width : rect.height; | ||
const size = initialDragStateRef.current?.groupSizePixels; | ||
const delta = movement / size * 100; | ||
@@ -1266,9 +1276,9 @@ | ||
if (isHorizontal) { | ||
setGlobalCursorStyle(movement < 0 ? "horizontal-min" : "horizontal-max"); | ||
setGlobalCursorStyle$1(movement < 0 ? "horizontal-min" : "horizontal-max"); | ||
} else { | ||
setGlobalCursorStyle(movement < 0 ? "vertical-min" : "vertical-max"); | ||
setGlobalCursorStyle$1(movement < 0 ? "vertical-min" : "vertical-max"); | ||
} | ||
} else { | ||
// Reset the cursor style to the the normal resize cursor. | ||
setGlobalCursorStyle(isHorizontal ? "horizontal" : "vertical"); | ||
setGlobalCursorStyle$1(isHorizontal ? "horizontal" : "vertical"); | ||
} | ||
@@ -1285,3 +1295,3 @@ } | ||
// Trigger user callbacks after updating state, so that user code can override the sizes. | ||
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap); | ||
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current); | ||
} | ||
@@ -1344,3 +1354,3 @@ prevDeltaRef.current = delta; | ||
// Trigger user callbacks after updating state, so that user code can override the sizes. | ||
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap); | ||
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current); | ||
} | ||
@@ -1400,3 +1410,3 @@ }, []); | ||
// Trigger user callbacks after updating state, so that user code can override the sizes. | ||
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap); | ||
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current); | ||
} | ||
@@ -1463,3 +1473,3 @@ }, []); | ||
// Trigger user callbacks after updating state, so that user code can override the sizes. | ||
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap); | ||
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current); | ||
} | ||
@@ -1485,3 +1495,4 @@ }, []); | ||
dragOffset: getDragOffset(event, id, direction), | ||
sizes: committedValuesRef.current.sizes | ||
sizes: committedValuesRef.current.sizes, | ||
groupSizePixels: getAvailableGroupSizePixels(groupId) | ||
}; | ||
@@ -1491,3 +1502,3 @@ } | ||
stopDragging: () => { | ||
resetGlobalCursorStyle(); | ||
resetGlobalCursorStyle$1(); | ||
setActiveHandleId(null); | ||
@@ -1494,0 +1505,0 @@ initialDragStateRef.current = null; |
@@ -164,5 +164,5 @@ import * as React from 'react'; | ||
let fullDelta = Math.abs(deltaPixels); | ||
const groupSizePixels = units === "pixels" ? getAvailableGroupSizePixels(groupId) : NaN; | ||
const { | ||
sizes: initialSizes | ||
let { | ||
sizes: initialSizes, | ||
groupSizePixels = units === "pixels" ? getAvailableGroupSizePixels(groupId) : NaN | ||
} = initialDragState || {}; | ||
@@ -267,4 +267,3 @@ | ||
} | ||
function callPanelCallbacks(units, groupId, panelsArray, sizes, panelIdToLastNotifiedSizeMap) { | ||
const groupPixels = getAvailableGroupSizePixels(groupId); | ||
function callPanelCallbacks(units, panelsArray, sizes, panelIdToLastNotifiedSizeMap, initialDragState) { | ||
sizes.forEach((size, index) => { | ||
@@ -283,2 +282,3 @@ const panelRef = panelsArray[index]; | ||
} = panelRef.current; | ||
const groupPixels = initialDragState?.groupSizePixels ?? units === "pixels" ? getAvailableGroupSizePixels(id) : NaN; | ||
const lastNotifiedSize = panelIdToLastNotifiedSizeMap[id]; | ||
@@ -292,3 +292,3 @@ if (lastNotifiedSize !== size) { | ||
if (onResize) { | ||
onResize(size, lastNotifiedSize); | ||
onResize(normalizePercentageValue(units, groupPixels, size), normalizePercentageValue(units, groupPixels, lastNotifiedSize)); | ||
} | ||
@@ -406,2 +406,4 @@ const collapsePercentage = normalizePixelValue(units, groupPixels, collapsedSize); | ||
} | ||
/** Converts pixel value to percentage */ | ||
function normalizePixelValue(units, groupSizePixels, value) { | ||
@@ -413,2 +415,10 @@ if (units === "pixels") { | ||
} | ||
/** Converts percentage to pixel value */ | ||
function normalizePercentageValue(units, groupSizePixels, value) { | ||
if (units === "pixels") { | ||
value = value / 100 * groupSizePixels; | ||
} | ||
return value; | ||
} | ||
function safeResizePanel(units, groupSizePixels, panel, prevSize, nextSize, event = null) { | ||
@@ -973,3 +983,5 @@ let { | ||
tagName: Type = "div", | ||
units = "percentages" | ||
units = "percentages", | ||
setGlobalCursorStyle: setGlobalCursorStyle$1 = setGlobalCursorStyle, | ||
resetGlobalCursorStyle: resetGlobalCursorStyle$1 = resetGlobalCursorStyle | ||
}) { | ||
@@ -1052,3 +1064,3 @@ const groupId = useUniqueId(idFromProps); | ||
setSizes(nextSizes); | ||
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap); | ||
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current); | ||
} | ||
@@ -1089,3 +1101,3 @@ } | ||
const panelsArray = panelsMapToSortedArray(panels); | ||
callPanelCallbacks(units, groupId, panelsArray, sizes, panelIdToLastNotifiedSizeMap); | ||
callPanelCallbacks(units, panelsArray, sizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current); | ||
} | ||
@@ -1209,7 +1221,5 @@ }, [sizes]); | ||
let movement = getMovement(event, groupId, handleId, panelsArray, direction, prevSizes, initialDragStateRef.current); | ||
if (movement === 0) { | ||
if (movement === 0 || !initialDragStateRef.current) { | ||
return; | ||
} | ||
const groupElement = getPanelGroup(groupId); | ||
const rect = groupElement.getBoundingClientRect(); | ||
const isHorizontal = direction === "horizontal"; | ||
@@ -1221,3 +1231,3 @@ | ||
} | ||
const size = isHorizontal ? rect.width : rect.height; | ||
const size = initialDragStateRef.current?.groupSizePixels; | ||
const delta = movement / size * 100; | ||
@@ -1242,9 +1252,9 @@ | ||
if (isHorizontal) { | ||
setGlobalCursorStyle(movement < 0 ? "horizontal-min" : "horizontal-max"); | ||
setGlobalCursorStyle$1(movement < 0 ? "horizontal-min" : "horizontal-max"); | ||
} else { | ||
setGlobalCursorStyle(movement < 0 ? "vertical-min" : "vertical-max"); | ||
setGlobalCursorStyle$1(movement < 0 ? "vertical-min" : "vertical-max"); | ||
} | ||
} else { | ||
// Reset the cursor style to the the normal resize cursor. | ||
setGlobalCursorStyle(isHorizontal ? "horizontal" : "vertical"); | ||
setGlobalCursorStyle$1(isHorizontal ? "horizontal" : "vertical"); | ||
} | ||
@@ -1261,3 +1271,3 @@ } | ||
// Trigger user callbacks after updating state, so that user code can override the sizes. | ||
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap); | ||
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current); | ||
} | ||
@@ -1320,3 +1330,3 @@ prevDeltaRef.current = delta; | ||
// Trigger user callbacks after updating state, so that user code can override the sizes. | ||
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap); | ||
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current); | ||
} | ||
@@ -1376,3 +1386,3 @@ }, []); | ||
// Trigger user callbacks after updating state, so that user code can override the sizes. | ||
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap); | ||
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current); | ||
} | ||
@@ -1439,3 +1449,3 @@ }, []); | ||
// Trigger user callbacks after updating state, so that user code can override the sizes. | ||
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap); | ||
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current); | ||
} | ||
@@ -1461,3 +1471,4 @@ }, []); | ||
dragOffset: getDragOffset(event, id, direction), | ||
sizes: committedValuesRef.current.sizes | ||
sizes: committedValuesRef.current.sizes, | ||
groupSizePixels: getAvailableGroupSizePixels(groupId) | ||
}; | ||
@@ -1467,3 +1478,3 @@ } | ||
stopDragging: () => { | ||
resetGlobalCursorStyle(); | ||
resetGlobalCursorStyle$1(); | ||
setActiveHandleId(null); | ||
@@ -1470,0 +1481,0 @@ initialDragStateRef.current = null; |
@@ -186,5 +186,5 @@ import * as React from 'react'; | ||
let fullDelta = Math.abs(deltaPixels); | ||
const groupSizePixels = units === "pixels" ? getAvailableGroupSizePixels(groupId) : NaN; | ||
const { | ||
sizes: initialSizes | ||
let { | ||
sizes: initialSizes, | ||
groupSizePixels = units === "pixels" ? getAvailableGroupSizePixels(groupId) : NaN | ||
} = initialDragState || {}; | ||
@@ -289,4 +289,3 @@ | ||
} | ||
function callPanelCallbacks(units, groupId, panelsArray, sizes, panelIdToLastNotifiedSizeMap) { | ||
const groupPixels = getAvailableGroupSizePixels(groupId); | ||
function callPanelCallbacks(units, panelsArray, sizes, panelIdToLastNotifiedSizeMap, initialDragState) { | ||
sizes.forEach((size, index) => { | ||
@@ -305,2 +304,3 @@ const panelRef = panelsArray[index]; | ||
} = panelRef.current; | ||
const groupPixels = initialDragState?.groupSizePixels ?? units === "pixels" ? getAvailableGroupSizePixels(id) : NaN; | ||
const lastNotifiedSize = panelIdToLastNotifiedSizeMap[id]; | ||
@@ -314,3 +314,3 @@ if (lastNotifiedSize !== size) { | ||
if (onResize) { | ||
onResize(size, lastNotifiedSize); | ||
onResize(normalizePercentageValue(units, groupPixels, size), normalizePercentageValue(units, groupPixels, lastNotifiedSize)); | ||
} | ||
@@ -532,2 +532,4 @@ const collapsePercentage = normalizePixelValue(units, groupPixels, collapsedSize); | ||
} | ||
/** Converts pixel value to percentage */ | ||
function normalizePixelValue(units, groupSizePixels, value) { | ||
@@ -539,2 +541,10 @@ if (units === "pixels") { | ||
} | ||
/** Converts percentage to pixel value */ | ||
function normalizePercentageValue(units, groupSizePixels, value) { | ||
if (units === "pixels") { | ||
value = value / 100 * groupSizePixels; | ||
} | ||
return value; | ||
} | ||
function safeResizePanel(units, groupSizePixels, panel, prevSize, nextSize, event = null) { | ||
@@ -1085,3 +1095,5 @@ let { | ||
tagName: Type = "div", | ||
units = "percentages" | ||
units = "percentages", | ||
setGlobalCursorStyle: setGlobalCursorStyle$1 = setGlobalCursorStyle, | ||
resetGlobalCursorStyle: resetGlobalCursorStyle$1 = resetGlobalCursorStyle | ||
}) { | ||
@@ -1164,3 +1176,3 @@ const groupId = useUniqueId(idFromProps); | ||
setSizes(nextSizes); | ||
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap); | ||
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current); | ||
} | ||
@@ -1208,3 +1220,3 @@ } | ||
const panelsArray = panelsMapToSortedArray(panels); | ||
callPanelCallbacks(units, groupId, panelsArray, sizes, panelIdToLastNotifiedSizeMap); | ||
callPanelCallbacks(units, panelsArray, sizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current); | ||
} | ||
@@ -1368,7 +1380,5 @@ }, [sizes]); | ||
let movement = getMovement(event, groupId, handleId, panelsArray, direction, prevSizes, initialDragStateRef.current); | ||
if (movement === 0) { | ||
if (movement === 0 || !initialDragStateRef.current) { | ||
return; | ||
} | ||
const groupElement = getPanelGroup(groupId); | ||
const rect = groupElement.getBoundingClientRect(); | ||
const isHorizontal = direction === "horizontal"; | ||
@@ -1380,3 +1390,3 @@ | ||
} | ||
const size = isHorizontal ? rect.width : rect.height; | ||
const size = initialDragStateRef.current?.groupSizePixels; | ||
const delta = movement / size * 100; | ||
@@ -1401,9 +1411,9 @@ | ||
if (isHorizontal) { | ||
setGlobalCursorStyle(movement < 0 ? "horizontal-min" : "horizontal-max"); | ||
setGlobalCursorStyle$1(movement < 0 ? "horizontal-min" : "horizontal-max"); | ||
} else { | ||
setGlobalCursorStyle(movement < 0 ? "vertical-min" : "vertical-max"); | ||
setGlobalCursorStyle$1(movement < 0 ? "vertical-min" : "vertical-max"); | ||
} | ||
} else { | ||
// Reset the cursor style to the the normal resize cursor. | ||
setGlobalCursorStyle(isHorizontal ? "horizontal" : "vertical"); | ||
setGlobalCursorStyle$1(isHorizontal ? "horizontal" : "vertical"); | ||
} | ||
@@ -1420,3 +1430,3 @@ } | ||
// Trigger user callbacks after updating state, so that user code can override the sizes. | ||
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap); | ||
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current); | ||
} | ||
@@ -1479,3 +1489,3 @@ prevDeltaRef.current = delta; | ||
// Trigger user callbacks after updating state, so that user code can override the sizes. | ||
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap); | ||
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current); | ||
} | ||
@@ -1535,3 +1545,3 @@ }, []); | ||
// Trigger user callbacks after updating state, so that user code can override the sizes. | ||
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap); | ||
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current); | ||
} | ||
@@ -1592,3 +1602,3 @@ }, []); | ||
// Trigger user callbacks after updating state, so that user code can override the sizes. | ||
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap); | ||
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current); | ||
} | ||
@@ -1614,3 +1624,4 @@ }, []); | ||
dragOffset: getDragOffset(event, id, direction), | ||
sizes: committedValuesRef.current.sizes | ||
sizes: committedValuesRef.current.sizes, | ||
groupSizePixels: getAvailableGroupSizePixels(groupId) | ||
}; | ||
@@ -1620,3 +1631,3 @@ } | ||
stopDragging: () => { | ||
resetGlobalCursorStyle(); | ||
resetGlobalCursorStyle$1(); | ||
setActiveHandleId(null); | ||
@@ -1623,0 +1634,0 @@ initialDragStateRef.current = null; |
@@ -188,5 +188,5 @@ 'use strict'; | ||
let fullDelta = Math.abs(deltaPixels); | ||
const groupSizePixels = units === "pixels" ? getAvailableGroupSizePixels(groupId) : NaN; | ||
const { | ||
sizes: initialSizes | ||
let { | ||
sizes: initialSizes, | ||
groupSizePixels = units === "pixels" ? getAvailableGroupSizePixels(groupId) : NaN | ||
} = initialDragState || {}; | ||
@@ -291,4 +291,3 @@ | ||
} | ||
function callPanelCallbacks(units, groupId, panelsArray, sizes, panelIdToLastNotifiedSizeMap) { | ||
const groupPixels = getAvailableGroupSizePixels(groupId); | ||
function callPanelCallbacks(units, panelsArray, sizes, panelIdToLastNotifiedSizeMap, initialDragState) { | ||
sizes.forEach((size, index) => { | ||
@@ -307,2 +306,3 @@ const panelRef = panelsArray[index]; | ||
} = panelRef.current; | ||
const groupPixels = initialDragState?.groupSizePixels ?? units === "pixels" ? getAvailableGroupSizePixels(id) : NaN; | ||
const lastNotifiedSize = panelIdToLastNotifiedSizeMap[id]; | ||
@@ -316,3 +316,3 @@ if (lastNotifiedSize !== size) { | ||
if (onResize) { | ||
onResize(size, lastNotifiedSize); | ||
onResize(normalizePercentageValue(units, groupPixels, size), normalizePercentageValue(units, groupPixels, lastNotifiedSize)); | ||
} | ||
@@ -430,2 +430,4 @@ const collapsePercentage = normalizePixelValue(units, groupPixels, collapsedSize); | ||
} | ||
/** Converts pixel value to percentage */ | ||
function normalizePixelValue(units, groupSizePixels, value) { | ||
@@ -437,2 +439,10 @@ if (units === "pixels") { | ||
} | ||
/** Converts percentage to pixel value */ | ||
function normalizePercentageValue(units, groupSizePixels, value) { | ||
if (units === "pixels") { | ||
value = value / 100 * groupSizePixels; | ||
} | ||
return value; | ||
} | ||
function safeResizePanel(units, groupSizePixels, panel, prevSize, nextSize, event = null) { | ||
@@ -975,3 +985,5 @@ let { | ||
tagName: Type = "div", | ||
units = "percentages" | ||
units = "percentages", | ||
setGlobalCursorStyle: setGlobalCursorStyle$1 = setGlobalCursorStyle, | ||
resetGlobalCursorStyle: resetGlobalCursorStyle$1 = resetGlobalCursorStyle | ||
}) { | ||
@@ -1054,3 +1066,3 @@ const groupId = useUniqueId(idFromProps); | ||
setSizes(nextSizes); | ||
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap); | ||
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current); | ||
} | ||
@@ -1091,3 +1103,3 @@ } | ||
const panelsArray = panelsMapToSortedArray(panels); | ||
callPanelCallbacks(units, groupId, panelsArray, sizes, panelIdToLastNotifiedSizeMap); | ||
callPanelCallbacks(units, panelsArray, sizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current); | ||
} | ||
@@ -1183,7 +1195,5 @@ }, [sizes]); | ||
let movement = getMovement(event, groupId, handleId, panelsArray, direction, prevSizes, initialDragStateRef.current); | ||
if (movement === 0) { | ||
if (movement === 0 || !initialDragStateRef.current) { | ||
return; | ||
} | ||
const groupElement = getPanelGroup(groupId); | ||
const rect = groupElement.getBoundingClientRect(); | ||
const isHorizontal = direction === "horizontal"; | ||
@@ -1195,3 +1205,3 @@ | ||
} | ||
const size = isHorizontal ? rect.width : rect.height; | ||
const size = initialDragStateRef.current?.groupSizePixels; | ||
const delta = movement / size * 100; | ||
@@ -1216,9 +1226,9 @@ | ||
if (isHorizontal) { | ||
setGlobalCursorStyle(movement < 0 ? "horizontal-min" : "horizontal-max"); | ||
setGlobalCursorStyle$1(movement < 0 ? "horizontal-min" : "horizontal-max"); | ||
} else { | ||
setGlobalCursorStyle(movement < 0 ? "vertical-min" : "vertical-max"); | ||
setGlobalCursorStyle$1(movement < 0 ? "vertical-min" : "vertical-max"); | ||
} | ||
} else { | ||
// Reset the cursor style to the the normal resize cursor. | ||
setGlobalCursorStyle(isHorizontal ? "horizontal" : "vertical"); | ||
setGlobalCursorStyle$1(isHorizontal ? "horizontal" : "vertical"); | ||
} | ||
@@ -1235,3 +1245,3 @@ } | ||
// Trigger user callbacks after updating state, so that user code can override the sizes. | ||
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap); | ||
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current); | ||
} | ||
@@ -1294,3 +1304,3 @@ prevDeltaRef.current = delta; | ||
// Trigger user callbacks after updating state, so that user code can override the sizes. | ||
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap); | ||
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current); | ||
} | ||
@@ -1350,3 +1360,3 @@ }, []); | ||
// Trigger user callbacks after updating state, so that user code can override the sizes. | ||
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap); | ||
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current); | ||
} | ||
@@ -1407,3 +1417,3 @@ }, []); | ||
// Trigger user callbacks after updating state, so that user code can override the sizes. | ||
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap); | ||
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current); | ||
} | ||
@@ -1429,3 +1439,4 @@ }, []); | ||
dragOffset: getDragOffset(event, id, direction), | ||
sizes: committedValuesRef.current.sizes | ||
sizes: committedValuesRef.current.sizes, | ||
groupSizePixels: getAvailableGroupSizePixels(groupId) | ||
}; | ||
@@ -1435,3 +1446,3 @@ } | ||
stopDragging: () => { | ||
resetGlobalCursorStyle(); | ||
resetGlobalCursorStyle$1(); | ||
setActiveHandleId(null); | ||
@@ -1438,0 +1449,0 @@ initialDragStateRef.current = null; |
@@ -164,5 +164,5 @@ import * as React from 'react'; | ||
let fullDelta = Math.abs(deltaPixels); | ||
const groupSizePixels = units === "pixels" ? getAvailableGroupSizePixels(groupId) : NaN; | ||
const { | ||
sizes: initialSizes | ||
let { | ||
sizes: initialSizes, | ||
groupSizePixels = units === "pixels" ? getAvailableGroupSizePixels(groupId) : NaN | ||
} = initialDragState || {}; | ||
@@ -267,4 +267,3 @@ | ||
} | ||
function callPanelCallbacks(units, groupId, panelsArray, sizes, panelIdToLastNotifiedSizeMap) { | ||
const groupPixels = getAvailableGroupSizePixels(groupId); | ||
function callPanelCallbacks(units, panelsArray, sizes, panelIdToLastNotifiedSizeMap, initialDragState) { | ||
sizes.forEach((size, index) => { | ||
@@ -283,2 +282,3 @@ const panelRef = panelsArray[index]; | ||
} = panelRef.current; | ||
const groupPixels = initialDragState?.groupSizePixels ?? units === "pixels" ? getAvailableGroupSizePixels(id) : NaN; | ||
const lastNotifiedSize = panelIdToLastNotifiedSizeMap[id]; | ||
@@ -292,3 +292,3 @@ if (lastNotifiedSize !== size) { | ||
if (onResize) { | ||
onResize(size, lastNotifiedSize); | ||
onResize(normalizePercentageValue(units, groupPixels, size), normalizePercentageValue(units, groupPixels, lastNotifiedSize)); | ||
} | ||
@@ -406,2 +406,4 @@ const collapsePercentage = normalizePixelValue(units, groupPixels, collapsedSize); | ||
} | ||
/** Converts pixel value to percentage */ | ||
function normalizePixelValue(units, groupSizePixels, value) { | ||
@@ -413,2 +415,10 @@ if (units === "pixels") { | ||
} | ||
/** Converts percentage to pixel value */ | ||
function normalizePercentageValue(units, groupSizePixels, value) { | ||
if (units === "pixels") { | ||
value = value / 100 * groupSizePixels; | ||
} | ||
return value; | ||
} | ||
function safeResizePanel(units, groupSizePixels, panel, prevSize, nextSize, event = null) { | ||
@@ -951,3 +961,5 @@ let { | ||
tagName: Type = "div", | ||
units = "percentages" | ||
units = "percentages", | ||
setGlobalCursorStyle: setGlobalCursorStyle$1 = setGlobalCursorStyle, | ||
resetGlobalCursorStyle: resetGlobalCursorStyle$1 = resetGlobalCursorStyle | ||
}) { | ||
@@ -1030,3 +1042,3 @@ const groupId = useUniqueId(idFromProps); | ||
setSizes(nextSizes); | ||
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap); | ||
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current); | ||
} | ||
@@ -1067,3 +1079,3 @@ } | ||
const panelsArray = panelsMapToSortedArray(panels); | ||
callPanelCallbacks(units, groupId, panelsArray, sizes, panelIdToLastNotifiedSizeMap); | ||
callPanelCallbacks(units, panelsArray, sizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current); | ||
} | ||
@@ -1159,7 +1171,5 @@ }, [sizes]); | ||
let movement = getMovement(event, groupId, handleId, panelsArray, direction, prevSizes, initialDragStateRef.current); | ||
if (movement === 0) { | ||
if (movement === 0 || !initialDragStateRef.current) { | ||
return; | ||
} | ||
const groupElement = getPanelGroup(groupId); | ||
const rect = groupElement.getBoundingClientRect(); | ||
const isHorizontal = direction === "horizontal"; | ||
@@ -1171,3 +1181,3 @@ | ||
} | ||
const size = isHorizontal ? rect.width : rect.height; | ||
const size = initialDragStateRef.current?.groupSizePixels; | ||
const delta = movement / size * 100; | ||
@@ -1192,9 +1202,9 @@ | ||
if (isHorizontal) { | ||
setGlobalCursorStyle(movement < 0 ? "horizontal-min" : "horizontal-max"); | ||
setGlobalCursorStyle$1(movement < 0 ? "horizontal-min" : "horizontal-max"); | ||
} else { | ||
setGlobalCursorStyle(movement < 0 ? "vertical-min" : "vertical-max"); | ||
setGlobalCursorStyle$1(movement < 0 ? "vertical-min" : "vertical-max"); | ||
} | ||
} else { | ||
// Reset the cursor style to the the normal resize cursor. | ||
setGlobalCursorStyle(isHorizontal ? "horizontal" : "vertical"); | ||
setGlobalCursorStyle$1(isHorizontal ? "horizontal" : "vertical"); | ||
} | ||
@@ -1211,3 +1221,3 @@ } | ||
// Trigger user callbacks after updating state, so that user code can override the sizes. | ||
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap); | ||
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current); | ||
} | ||
@@ -1270,3 +1280,3 @@ prevDeltaRef.current = delta; | ||
// Trigger user callbacks after updating state, so that user code can override the sizes. | ||
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap); | ||
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current); | ||
} | ||
@@ -1326,3 +1336,3 @@ }, []); | ||
// Trigger user callbacks after updating state, so that user code can override the sizes. | ||
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap); | ||
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current); | ||
} | ||
@@ -1383,3 +1393,3 @@ }, []); | ||
// Trigger user callbacks after updating state, so that user code can override the sizes. | ||
callPanelCallbacks(units, groupId, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap); | ||
callPanelCallbacks(units, panelsArray, nextSizes, panelIdToLastNotifiedSizeMap, initialDragStateRef.current); | ||
} | ||
@@ -1405,3 +1415,4 @@ }, []); | ||
dragOffset: getDragOffset(event, id, direction), | ||
sizes: committedValuesRef.current.sizes | ||
sizes: committedValuesRef.current.sizes, | ||
groupSizePixels: getAvailableGroupSizePixels(groupId) | ||
}; | ||
@@ -1411,3 +1422,3 @@ } | ||
stopDragging: () => { | ||
resetGlobalCursorStyle(); | ||
resetGlobalCursorStyle$1(); | ||
setActiveHandleId(null); | ||
@@ -1414,0 +1425,0 @@ initialDragStateRef.current = null; |
import { CSSProperties, ElementType, ReactNode } from "./vendor/react.js"; | ||
import { Direction, PanelData, PanelGroupOnLayout, PanelGroupStorage, Units } from "./types.js"; | ||
import { resetGlobalCursorStyle as resetGlobalCursorStyleDefault, setGlobalCursorStyle as setGlobalCursorStyleDefault } from "./utils/cursor.js"; | ||
export type CommittedValues = { | ||
@@ -15,2 +16,3 @@ direction: Direction; | ||
sizes: number[]; | ||
groupSizePixels: number; | ||
}; | ||
@@ -29,2 +31,4 @@ export type PanelGroupProps = { | ||
units?: Units; | ||
setGlobalCursorStyle?: typeof setGlobalCursorStyleDefault; | ||
resetGlobalCursorStyle?: typeof resetGlobalCursorStyleDefault; | ||
}; | ||
@@ -31,0 +35,0 @@ export type ImperativePanelGroupHandle = { |
import { CommittedValues, InitialDragState } from "../PanelGroup.js"; | ||
import { PanelData, ResizeEvent, Units } from "../types.js"; | ||
export declare function adjustByDelta(event: ResizeEvent | null, committedValues: CommittedValues, idBefore: string, idAfter: string, deltaPixels: number, prevSizes: number[], panelSizeBeforeCollapse: Map<string, number>, initialDragState: InitialDragState | null): number[]; | ||
export declare function callPanelCallbacks(units: Units, groupId: string, panelsArray: PanelData[], sizes: number[], panelIdToLastNotifiedSizeMap: Record<string, number>): void; | ||
export declare function callPanelCallbacks(units: Units, panelsArray: PanelData[], sizes: number[], panelIdToLastNotifiedSizeMap: Record<string, number>, initialDragState: InitialDragState | null): void; | ||
export declare function calculateDefaultLayout({ groupId, panels, units, }: { | ||
@@ -21,3 +21,6 @@ groupId: string; | ||
export declare function panelsMapToSortedArray(panels: Map<string, PanelData>): PanelData[]; | ||
/** Converts pixel value to percentage */ | ||
export declare function normalizePixelValue(units: Units, groupSizePixels: number, value: number): number; | ||
/** Converts percentage to pixel value */ | ||
export declare function normalizePercentageValue(units: Units, groupSizePixels: number, value: number): number; | ||
export declare function safeResizePanel(units: Units, groupSizePixels: number, panel: PanelData, prevSize: number, nextSize: number, event?: ResizeEvent | null): number; | ||
@@ -24,0 +27,0 @@ export declare function validatePanelProps(units: Units, panelData: PanelData): void; |
{ | ||
"name": "@alisowski/react-resizable-panels", | ||
"version": "0.1.16", | ||
"version": "0.1.17", | ||
"publishConfig": { | ||
@@ -5,0 +5,0 @@ "access": "public" |
@@ -24,3 +24,2 @@ import useIsomorphicLayoutEffect from "./hooks/useIsomorphicEffect"; | ||
} from "./types"; | ||
import { getAvailableGroupSizePixels } from "./utils/group"; | ||
@@ -27,0 +26,0 @@ export type PanelProps = { |
@@ -37,3 +37,6 @@ import { isBrowser } from "#is-browser"; | ||
} from "./utils/coordinates"; | ||
import { resetGlobalCursorStyle, setGlobalCursorStyle } from "./utils/cursor"; | ||
import { | ||
resetGlobalCursorStyle as resetGlobalCursorStyleDefault, | ||
setGlobalCursorStyle as setGlobalCursorStyleDefault, | ||
} from "./utils/cursor"; | ||
import debounce from "./utils/debounce"; | ||
@@ -123,2 +126,3 @@ import { | ||
sizes: number[]; | ||
groupSizePixels: number; | ||
}; | ||
@@ -138,2 +142,4 @@ | ||
units?: Units; | ||
setGlobalCursorStyle?: typeof setGlobalCursorStyleDefault; | ||
resetGlobalCursorStyle?: typeof resetGlobalCursorStyleDefault; | ||
}; | ||
@@ -160,2 +166,4 @@ | ||
units = "percentages", | ||
setGlobalCursorStyle = setGlobalCursorStyleDefault, | ||
resetGlobalCursorStyle = resetGlobalCursorStyleDefault, | ||
}: PanelGroupProps & { | ||
@@ -257,6 +265,6 @@ forwardedRef: ForwardedRef<ImperativePanelGroupHandle>; | ||
units, | ||
groupId, | ||
panelsArray, | ||
nextSizes, | ||
panelIdToLastNotifiedSizeMap | ||
panelIdToLastNotifiedSizeMap, | ||
initialDragStateRef.current | ||
); | ||
@@ -308,6 +316,6 @@ } | ||
units, | ||
groupId, | ||
panelsArray, | ||
sizes, | ||
panelIdToLastNotifiedSizeMap | ||
panelIdToLastNotifiedSizeMap, | ||
initialDragStateRef.current | ||
); | ||
@@ -548,8 +556,7 @@ } | ||
); | ||
if (movement === 0) { | ||
if (movement === 0 || !initialDragStateRef.current) { | ||
return; | ||
} | ||
const groupElement = getPanelGroup(groupId)!; | ||
const rect = groupElement.getBoundingClientRect(); | ||
const isHorizontal = direction === "horizontal"; | ||
@@ -562,3 +569,3 @@ | ||
const size = isHorizontal ? rect.width : rect.height; | ||
const size = initialDragStateRef.current?.groupSizePixels; | ||
const delta = (movement / size) * 100; | ||
@@ -619,6 +626,6 @@ | ||
units, | ||
groupId, | ||
panelsArray, | ||
nextSizes, | ||
panelIdToLastNotifiedSizeMap | ||
panelIdToLastNotifiedSizeMap, | ||
initialDragStateRef.current | ||
); | ||
@@ -711,6 +718,6 @@ } | ||
units, | ||
groupId, | ||
panelsArray, | ||
nextSizes, | ||
panelIdToLastNotifiedSizeMap | ||
panelIdToLastNotifiedSizeMap, | ||
initialDragStateRef.current | ||
); | ||
@@ -793,6 +800,6 @@ } | ||
units, | ||
groupId, | ||
panelsArray, | ||
nextSizes, | ||
panelIdToLastNotifiedSizeMap | ||
panelIdToLastNotifiedSizeMap, | ||
initialDragStateRef.current | ||
); | ||
@@ -892,6 +899,6 @@ } | ||
units, | ||
groupId, | ||
panelsArray, | ||
nextSizes, | ||
panelIdToLastNotifiedSizeMap | ||
panelIdToLastNotifiedSizeMap, | ||
initialDragStateRef.current | ||
); | ||
@@ -925,2 +932,3 @@ } | ||
sizes: committedValuesRef.current.sizes, | ||
groupSizePixels: getAvailableGroupSizePixels(groupId), | ||
}; | ||
@@ -927,0 +935,0 @@ } |
@@ -28,6 +28,9 @@ import { isDevelopment } from "#is-development"; | ||
let fullDelta = Math.abs(deltaPixels); | ||
const groupSizePixels = | ||
units === "pixels" ? getAvailableGroupSizePixels(groupId) : NaN; | ||
const { sizes: initialSizes } = initialDragState || {}; | ||
let { | ||
sizes: initialSizes, | ||
groupSizePixels = units === "pixels" | ||
? getAvailableGroupSizePixels(groupId) | ||
: NaN, | ||
} = initialDragState || {}; | ||
@@ -177,9 +180,7 @@ // If we're resizing by mouse or touch, use the initial sizes as a base. | ||
units: Units, | ||
groupId: string, | ||
panelsArray: PanelData[], | ||
sizes: number[], | ||
panelIdToLastNotifiedSizeMap: Record<string, number> | ||
panelIdToLastNotifiedSizeMap: Record<string, number>, | ||
initialDragState: InitialDragState | null | ||
) { | ||
const groupPixels = getAvailableGroupSizePixels(groupId); | ||
sizes.forEach((size, index) => { | ||
@@ -194,2 +195,6 @@ const panelRef = panelsArray[index]; | ||
const { callbacksRef, collapsedSize, collapsible, id } = panelRef.current; | ||
const groupPixels = | ||
initialDragState?.groupSizePixels ?? units === "pixels" | ||
? getAvailableGroupSizePixels(id) | ||
: NaN; | ||
@@ -203,3 +208,6 @@ const lastNotifiedSize = panelIdToLastNotifiedSizeMap[id]; | ||
if (onResize) { | ||
onResize(size, lastNotifiedSize); | ||
onResize( | ||
normalizePercentageValue(units, groupPixels, size), | ||
normalizePercentageValue(units, groupPixels, lastNotifiedSize) | ||
); | ||
} | ||
@@ -517,2 +525,3 @@ | ||
/** Converts pixel value to percentage */ | ||
export function normalizePixelValue( | ||
@@ -530,2 +539,15 @@ units: Units, | ||
/** Converts percentage to pixel value */ | ||
export function normalizePercentageValue( | ||
units: Units, | ||
groupSizePixels: number, | ||
value: number | ||
) { | ||
if (units === "pixels") { | ||
value = (value / 100) * groupSizePixels; | ||
} | ||
return value; | ||
} | ||
export function safeResizePanel( | ||
@@ -532,0 +554,0 @@ units: Units, |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
838183
57
22844