From bdfe5767cafce07c8ab778ce30000563e0ccb001 Mon Sep 17 00:00:00 2001 From: aeagle Date: Wed, 16 Oct 2019 08:56:24 +0100 Subject: [PATCH 1/2] Ensure adjusted size is reset after size prop change --- react-spaces/src/Globals/Hooks.ts | 10 +++++++--- react-spaces/src/Globals/Utils.tsx | 5 +++-- react-spaces/src/Resizable.tsx | 14 ++++++-------- 3 files changed, 16 insertions(+), 13 deletions(-) diff --git a/react-spaces/src/Globals/Hooks.ts b/react-spaces/src/Globals/Hooks.ts index d564403..31e52fe 100644 --- a/react-spaces/src/Globals/Hooks.ts +++ b/react-spaces/src/Globals/Hooks.ts @@ -14,6 +14,9 @@ export const useSpace = (props: AllProps, divElementRef: React.MutableRefObject< const setState = (stateDelta: Partial) => changeState(prev => ({...prev, ...stateDelta})); + const parentContext = React.useContext(SpaceContext); + const currentZIndex = props.zIndex || React.useContext(SpaceLayerContext) || 0; + // Deal with property changes to size / anchoring React.useEffect(() => { setState({ @@ -25,7 +28,11 @@ export const useSpace = (props: AllProps, divElementRef: React.MutableRefObject< width: isHorizontalSpace(props) ? props.anchorSize || 0 : props.width, height: isVerticalSpace(props) ? props.anchorSize || 0 : props.height, debug: props.debug !== undefined ? props.debug : false, + adjustedSize: 0 }) + if (parentContext) { + parentContext.updateSpaceTakerAdjustedSize(state.id, 0); + } }, [ props.zIndex, props.left, props.top, props.bottom, props.right, props.width, props.height, props.anchor, props.anchorSize, props.debug ]); // Setup / cleanup @@ -58,9 +65,6 @@ export const useSpace = (props: AllProps, divElementRef: React.MutableRefObject< } }) - const parentContext = React.useContext(SpaceContext); - const currentZIndex = props.zIndex || React.useContext(SpaceLayerContext) || 0; - const outerStyle = { left: (state.left !== undefined ? `calc(${getSizeString(state.left || 0)}${state.adjustedLeft ? ` + ${state.adjustedLeft}px` : ``})` : undefined), top: (state.top !== undefined ? `calc(${getSizeString(state.top || 0)}${state.adjustedTop ? ` + ${state.adjustedTop}px` : ``})` : undefined), diff --git a/react-spaces/src/Globals/Utils.tsx b/react-spaces/src/Globals/Utils.tsx index 32f0989..ae2c543 100644 --- a/react-spaces/src/Globals/Utils.tsx +++ b/react-spaces/src/Globals/Utils.tsx @@ -98,8 +98,9 @@ export const applyResize = (props: AllProps, state: IState, setState: (stateDelt return { resizeHandle: - = (props) => { - const [ adjustedSize, setAdjustedSize ] = React.useState(0); - const resize = (originalX: number, originalY: number, x: number, y: number) => { const adjustmentX = Math.min( @@ -34,15 +33,14 @@ export const Resizable : React.FC = (props) => { ); const adjustment = props.type === ResizeType.Left || props.type === ResizeType.Right ? adjustmentX : adjustmentY; - if (adjustment !== adjustedSize) { - setAdjustedSize(adjustment); + if (adjustment !== props.adjustedSize) { props.onResize(adjustment); } } const startTouchResize = (e: React.TouchEvent) => { - const originalTouchX = props.type === ResizeType.Left ? e.touches[0].pageX + adjustedSize : e.touches[0].pageX - adjustedSize; - const originalTouchY = props.type === ResizeType.Top ? e.touches[0].pageY + adjustedSize : e.touches[0].pageY - adjustedSize; + const originalTouchX = props.type === ResizeType.Left ? e.touches[0].pageX + props.adjustedSize : e.touches[0].pageX - props.adjustedSize; + const originalTouchY = props.type === ResizeType.Top ? e.touches[0].pageY + props.adjustedSize : e.touches[0].pageY - props.adjustedSize; const touchResize = (e: TouchEvent) => resize(originalTouchX, originalTouchY, e.touches[0].pageX, e.touches[0].pageY); const debouncedTouchResize = debounce(touchResize, 10); @@ -54,8 +52,8 @@ export const Resizable : React.FC = (props) => { } const startResize = (e: React.MouseEvent) => { - const originalMouseX = props.type === ResizeType.Left ? e.pageX + adjustedSize : e.pageX - adjustedSize; - const originalMouseY = props.type === ResizeType.Top ? e.pageY + adjustedSize : e.pageY - adjustedSize; + const originalMouseX = props.type === ResizeType.Left ? e.pageX + props.adjustedSize : e.pageX - props.adjustedSize; + const originalMouseY = props.type === ResizeType.Top ? e.pageY + props.adjustedSize : e.pageY - props.adjustedSize; const mouseResize = (e: MouseEvent) => resize(originalMouseX, originalMouseY, e.pageX, e.pageY); const debouncedMouseResize = debounce(mouseResize, 10); From 1fffb029ca38949cf6e20ceb092239a8eff0ad9a Mon Sep 17 00:00:00 2001 From: aeagle Date: Wed, 16 Oct 2019 09:05:29 +0100 Subject: [PATCH 2/2] Removed debugging statement --- react-spaces/src/Globals/Hooks.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/react-spaces/src/Globals/Hooks.ts b/react-spaces/src/Globals/Hooks.ts index 31e52fe..5f82ec1 100644 --- a/react-spaces/src/Globals/Hooks.ts +++ b/react-spaces/src/Globals/Hooks.ts @@ -77,7 +77,6 @@ export const useSpace = (props: AllProps, divElementRef: React.MutableRefObject< if (parentContext) { onRemove.current = () => { - console.log(`Removing ${state.id}`); parentContext.removeSpaceTaker(state.id); }