lilact 0.26.0 → 0.26.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lilact",
-  "version": "0.26.0",
+  "version": "0.26.1",
   "description": "A Little React/JSX Runtime Implementation for Browser",
   "repository": "github:arashkazemi/lilact",
   "homepage": "https://arashkazemi.github.io/lilact/",

package/src/accessories.jsx

@@ -420,7 +420,7 @@ export function DragHandle({
  * @param max - Maximum allowed position. Defaults to `0.9`.
  		  Can also be a function that will be called with (containerWidth|containerHeight,splitterSize) as arguments
  * @param splitterSize - Thickness of the draggable splitter in pixels. Defaults to `8`.
- * @param resizeMode - The behavior on container resize. Its value can be `proportional`, `fixFirst` or `fixSecond`.
+ * @param resizePolicy - The behavior on container resize. Its value can be `proportional`, `fixFirst` or `fixSecond`.
  * 		  Default is `proportional`.
  * @param onSizeChange - Callback invoked when the position changes. Receives the new normalized position.
  * @param style - Optional root container styles.
@@ -457,7 +457,7 @@ export const SplitPane = forwardRef(function SplitPane(
 		max = 0.9,
 		splitterSize = 8,
 		onSizeChange,
-		resizeMode = "proportional",
+		resizePolicy = "proportional",
 		style,
 		className,
 		firstPaneStyle,
@@ -517,24 +517,61 @@ export const SplitPane = forwardRef(function SplitPane(
 			sizeRef.current = { w: rect.width, h: rect.height };
 
 
-			if(ref.current?.getPosition) {
-				if( resizeMode==='fixFirst') {
-					if(internalMode==='vertical' && o.h>0) {
-						setPosition( ref.current.getPosition() * o.h/sizeRef.current.h );
-					}
-					else if(o.w>0) {
-						setPosition( ref.current.getPosition() * o.w/sizeRef.current.w );
-					}
-				}
-				else if( resizeMode==='fixSecond') {
-					if(internalMode==='vertical' && o.h>0) {
-						setPosition( 1 - ( (1-ref.current.getPosition()) * o.h/sizeRef.current.h ) );
+			const EPS = 1e-6;
+
+			function clamp01(x) {
+			  return Math.min(1, Math.max(0, x));
+			}
+
+			if (ref.current?.getPosition) {
+				const p = ref.current.getPosition();
+
+				if (resizePolicy === 'fixFirst') {
+					if (internalMode === 'vertical') {
+						const availOld = o.h - splitterSize;
+						const availNew = sizeRef.current.h - splitterSize;
+						if (availOld > 0 && availNew > 0) {
+			       			const firstPx = p * availOld;          // fixed pane size in px
+					        const nextP = firstPx / availNew;     // recompute normalized
+					        if (Math.abs(nextP - p) > EPS) setPosition(clamp01(nextP));
+					    }
+					} 
+					else {
+						const availOld = o.w - splitterSize;
+						const availNew = sizeRef.current.w - splitterSize;
+						if (availOld > 0 && availNew > 0) {
+							const firstPx = p * availOld;
+							const nextP = firstPx / availNew;
+							if (Math.abs(nextP - p) > EPS) setPosition(clamp01(nextP));
+						}
 					}
-					else if(o.w>0) {
-						setPosition( 1 - ( (1-ref.current.getPosition()) * o.w/sizeRef.current.w ) );
+				} 
+				else if (resizePolicy === 'fixSecond') {
+				    // fixSecond means second pane pixel size stays constant.
+				    // secondPx = (1-p) * availOld
+				    // nextP = 1 - secondPx/availNew
+					if (internalMode === 'vertical') {
+						const availOld = o.h - splitterSize;
+						const availNew = sizeRef.current.h - splitterSize;
+						if (availOld > 0 && availNew > 0) {
+							const secondPx = (1 - p) * availOld;
+							const nextP = 1 - (secondPx / availNew);
+							if (Math.abs(nextP - p) > EPS) setPosition(clamp01(nextP));
+						}
+					} 
+					else {
+						const availOld = o.w - splitterSize;
+						const availNew = sizeRef.current.w - splitterSize;
+						if (availOld > 0 && availNew > 0) {
+							const secondPx = (1 - p) * availOld;
+							const nextP = 1 - (secondPx / availNew);
+							if (Math.abs(nextP - p) > EPS) setPosition(clamp01(nextP));
+						}
 					}
 				}
 			}
+
+
 		});
 
 		ro.observe(el);
@@ -542,7 +579,7 @@ export const SplitPane = forwardRef(function SplitPane(
 		sizeRef.current = { w: rect.width, h: rect.height };
 
 		return () => ro.disconnect();
-	}, [resizeMode, internalMode]);
+	}, [resizePolicy, internalMode]);
 
 	const startPosRef = useRef(posResolved);
 	const [dragging, setDragging] = useState(false);
@@ -606,7 +643,7 @@ export const SplitPane = forwardRef(function SplitPane(
 		computedPane1Style.bottom = 0;
 		computedPane2Style.top = 0;
 
-		if(resizeMode==='fixFirst') {
+		if(resizePolicy==='fixFirst') {
 			computedPane1Style.width = p*(w-splitterSize);
 			computedPane2Style.left = computedPane1Style.width+splitterSize;
 
@@ -617,14 +654,14 @@ export const SplitPane = forwardRef(function SplitPane(
 				width: splitterSize,
 			});
 		}
-		else if(resizeMode==='fixSecond') {
+		else if(resizePolicy==='fixSecond') {
 			computedPane2Style.width = (1-p)*(w-splitterSize);
 			computedPane1Style.right = computedPane2Style.width+splitterSize;
 
 			Object.assign( computedSplitterStyle, {
 				top: 0,
 				bottom: 0,
-				left: computedPane2Style.width,
+				right: computedPane2Style.width,
 				width: splitterSize,
 			});
 		}
@@ -644,7 +681,7 @@ export const SplitPane = forwardRef(function SplitPane(
 		computedPane1Style.right = 0;
 		computedPane2Style.left = 0;
 
-		if(resizeMode==='fixFirst') {
+		if(resizePolicy==='fixFirst') {
 			computedPane1Style.height = p*(h-splitterSize);
 			computedPane2Style.top = computedPane1Style.height+splitterSize;
 
@@ -655,7 +692,7 @@ export const SplitPane = forwardRef(function SplitPane(
 				height: splitterSize,
 			});
 		}
-		else if(resizeMode==='fixSecond') {
+		else if(resizePolicy==='fixSecond') {
 			computedPane2Style.height = (1-p)*(h-splitterSize);
 			computedPane1Style.bottom = computedPane2Style.height+splitterSize;