Skip to content

Commit bf7d8a5

Browse files
aeagleaeagle
committed
Revised track change logic
1 parent 1f22dc4 commit bf7d8a5

File tree

7 files changed

+60
-52
lines changed

7 files changed

+60
-52
lines changed

‎demo/src/App.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import React from 'react';
22
import './App.scss';
33
import ReactGA from 'react-ga';
4-
// import { Test } from './Test';
5-
import { UI } from './ui-demo/UI';
4+
import { Test } from './Test';
5+
// import { UI } from './ui-demo/UI';
66

77
ReactGA.initialize("UA-144490437-1");
88
ReactGA.pageview(window.location.pathname + window.location.search);
99

1010
const App: React.FC = () => {
11-
return <UI />
11+
return <Test />
1212
}
1313

1414
export default App;

‎demo/src/Test.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ export const Test : React.FC = () => {
2727
minimumSize={100}
2828
onResizeStart={onResizeStart}
2929
onResizeEnd={onResizeEnd}
30+
trackSize={true}
3031
order={1}>
3132
<Space.Info>
3233
{(info) => <span>Hello<br />{info.width} x {info.height}</span>}
@@ -36,14 +37,16 @@ export const Test : React.FC = () => {
3637
<Space.LeftResizable
3738
style={{ backgroundColor: 'navy', color: 'white', padding: 10 }}
3839
size={200}
40+
trackSize={true}
3941
order={2}>
4042
<Space.Info>
4143
{(info) => <span>Something<br />{info.width} x {info.height}</span>}
4244
</Space.Info>
4345
</Space.LeftResizable>
4446

4547
<Space.Fill
46-
style={{ backgroundColor: 'red', padding: 10 }}>
48+
style={{ backgroundColor: 'red', padding: 10 }}
49+
trackSize={true}>
4750
<Space.Info>
4851
{(info) => <span>World<br />{info.width} x {info.height}</span>}
4952
</Space.Info>

‎react-spaces/src/Globals/ISpaceContext.ts‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,7 @@ import { ISpace, AnchorType, AnchorTypes } from './Types';
22
import { getSizeString } from './Utils';
33

44
export interface ISpaceContext {
5-
zIndex: number,
65
level: number,
7-
width: number,
8-
height: number,
96
children: ISpace[],
107
updateChildren: (children: ISpace[]) => void
118
}
@@ -122,9 +119,6 @@ export const createSpaceContext = (
122119

123120
const context : ISpaceContext = {
124121
level: parent ? parent.level + 1 : 0,
125-
zIndex: zIndex || 0,
126-
width: currentSpace ? currentSpace.currentWidth : 0,
127-
height: currentSpace ? currentSpace.currentHeight : 0,
128122
children: children,
129123
updateChildren: updateChildren
130124
}

‎react-spaces/src/Globals/Resize.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { Resizable } from 'src/Resizable';
66
export const applyResize = (
77
props: AllProps,
88
currentSpace: ISpace,
9+
parsedSize: number | undefined,
910
parentContext: ISpaceContext | null,
1011
handleSize: number,
1112
divElementRef: React.MutableRefObject<HTMLElement | undefined>) => {
@@ -22,8 +23,8 @@ export const applyResize = (
2223
adjustedSize={currentSpace.adjustedSize}
2324
width={resizeHandleWidth}
2425
height={resizeHandleHeight}
25-
minimumAdjust={ (props.minimumSize === undefined ? 20 : props.minimumSize) - (currentSpace.parsedSize || 0) }
26-
maximumAdjust={ props.maximumSize ? (props.maximumSize - (currentSpace.parsedSize || 0)) : undefined }
26+
minimumAdjust={ (props.minimumSize === undefined ? 20 : props.minimumSize) - (parsedSize || 0) }
27+
maximumAdjust={ props.maximumSize ? (props.maximumSize - (parsedSize || 0)) : undefined }
2728
onResize={(adjustedSize: number) => updateSpace(parentContext, currentSpace.id, { adjustedSize: adjustedSize })}
2829
onResizeStart={() => props.onResizeStart && props.onResizeStart()}
2930
onResizeEnd={() => {

‎react-spaces/src/Globals/Types.ts‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -138,18 +138,21 @@ export interface IState {
138138
children: ISpace[]
139139
}
140140

141+
export interface ISize {
142+
parsedSize: number | undefined,
143+
width: number,
144+
height: number
145+
}
146+
141147
export interface ISpace {
142148
id: string,
143-
currentWidth: number,
144-
currentHeight: number,
145149
adjustedLeft: number,
146150
adjustedTop: number,
147151
order: number,
148152
zIndex: number,
149153
anchorType: AnchorType | undefined,
150154
size: number | string,
151155
adjustedSize: number,
152-
parsedSize?: number,
153156
left?: number | string,
154157
top?: number | string,
155158
right?: number | string,

‎react-spaces/src/Hooks/useSpace.ts‎

Lines changed: 38 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
import * as React from 'react';
2-
import { AllProps, IState, AnchorType } from 'src/Globals/Types';
2+
import { AllProps, IState, AnchorType, ISize } from 'src/Globals/Types';
33
import { initialState, isHorizontalSpace, isVerticalSpace } from 'src/Globals/Utils';
44
import { ISpaceContext, updateSpace, removeSpace, registerSpace, createSpaceContext, getSpace } from 'src/Globals/ISpaceContext';
55
import { SpaceLayerContext, SpaceContext } from 'src/Globals/Contexts';
66
import { ResizeSensor } from 'css-element-queries';
7+
import { throttle } from 'src/Globals/Throttle';
78

89
export const useSpace = (props: AllProps, divElementRef: React.MutableRefObject<HTMLElement | undefined>) => {
910

1011
const [ state, changeState ] = React.useState<IState>(initialState(props));
12+
const [ currentSize, setCurrentSize ] = React.useState<ISize>({ parsedSize: undefined, width: 0, height: 0 });
1113
const resizeSensor = React.useRef<ResizeSensor>();
1214
const onRemove = React.useRef<(() => void)>();
1315

@@ -24,11 +26,15 @@ export const useSpace = (props: AllProps, divElementRef: React.MutableRefObject<
2426

2527
// Deal with property changes to size / anchoring
2628
React.useEffect(() => {
29+
setCurrentSize(prev => ({
30+
parsedSize: typeof props.anchorSize === "string" ? 0 : props.anchorSize as number | undefined,
31+
width: prev.width,
32+
height: prev.height
33+
}));
2734
updateSpace(
2835
parentContext,
2936
state.id,
30-
{
31-
parsedSize: typeof props.anchorSize === "string" ? 0 : props.anchorSize as number | undefined,
37+
{
3238
width: isHorizontalSpace(props.anchor) ? props.anchorSize || 0 : props.width,
3339
height: isVerticalSpace(props.anchor) ? props.anchorSize || 0 : props.height,
3440
adjustedSize: 0
@@ -37,11 +43,15 @@ export const useSpace = (props: AllProps, divElementRef: React.MutableRefObject<
3743
}, [ props.anchorSize ]);
3844

3945
React.useEffect(() => {
46+
setCurrentSize(prev => ({
47+
parsedSize: typeof props.anchorSize === "string" ? 0 : props.anchorSize as number | undefined,
48+
width: prev.width,
49+
height: prev.height
50+
}));
4051
updateSpace(
4152
parentContext,
4253
state.id,
4354
{
44-
parsedSize: typeof props.anchorSize === "string" ? 0 : props.anchorSize as number | undefined,
4555
left: props.anchor !== AnchorType.Right ? props.left || 0 : undefined,
4656
top: props.anchor !== AnchorType.Bottom ? props.top || 0 : undefined,
4757
right: props.anchor !== AnchorType.Left ? props.right || 0 : undefined,
@@ -68,18 +78,14 @@ export const useSpace = (props: AllProps, divElementRef: React.MutableRefObject<
6878
if (props.trackSize) {
6979
resizeSensor.current = new ResizeSensor(
7080
divElementRef.current,
71-
(size) =>
72-
updateSpace(
73-
parentContext,
74-
state.id,
75-
{
76-
parsedSize: (isHorizontalSpace(props.anchor) ? size.width : size.height),
77-
currentWidth: size.width,
78-
currentHeight: size.height
79-
}
80-
)
81+
(size) => setCurrentSize({
82+
parsedSize: (isHorizontalSpace(props.anchor) ? size.width : size.height),
83+
width: size.width,
84+
height: size.height
85+
})
8186
);
8287
}
88+
determineCurrentSize();
8389
}
8490

8591
const cleanup = () => {
@@ -90,19 +96,25 @@ export const useSpace = (props: AllProps, divElementRef: React.MutableRefObject<
9096
return cleanup;
9197
}, [])
9298

93-
React.useEffect(() => {
99+
const determineCurrentSize = React.useCallback(throttle(() => {
94100
var space = getSpace(parentContext, state.id);
95-
if (space && divElementRef.current && !space.parsedSize) {
101+
if (space && divElementRef.current) {
96102
const currentRect = divElementRef.current.getBoundingClientRect();
97-
updateSpace(
98-
parentContext,
99-
state.id,
100-
{
103+
if (currentRect.width !== currentSize.width ||
104+
currentRect.height !== currentSize.height ||
105+
(isHorizontalSpace(props.anchor) ? currentRect.width : currentRect.height) !== currentSize.parsedSize) {
106+
setCurrentSize({
101107
parsedSize: (isHorizontalSpace(props.anchor) ? currentRect.width : currentRect.height),
102-
currentWidth: currentRect.width,
103-
currentHeight: currentRect.height
104-
}
105-
);
108+
width: currentRect.width,
109+
height: currentRect.height
110+
});
111+
}
112+
}
113+
}, 200), []);
114+
115+
React.useEffect(() => {
116+
if (!props.trackSize) {
117+
determineCurrentSize();
106118
}
107119
});
108120

@@ -120,11 +132,8 @@ export const useSpace = (props: AllProps, divElementRef: React.MutableRefObject<
120132
anchorType: props.anchor,
121133
size: props.anchorSize || 0,
122134
adjustedSize: 0,
123-
currentWidth: 0,
124-
currentHeight: 0,
125135
adjustedLeft: 0,
126136
adjustedTop: 0,
127-
parsedSize: typeof props.anchorSize === "string" ? 0 : props.anchorSize as number | undefined,
128137
width: props.anchor && isHorizontalSpace(props.anchor) ? props.anchorSize || 0 : props.width,
129138
height: props.anchor && isVerticalSpace(props.anchor) ? props.anchorSize || 0 : props.height
130139
}
@@ -141,9 +150,8 @@ export const useSpace = (props: AllProps, divElementRef: React.MutableRefObject<
141150

142151
return {
143152
space,
153+
currentSize,
144154
parentContext,
145-
currentContext,
146-
currentWidth: space.currentWidth,
147-
currentHeight: space.currentHeight
155+
currentContext
148156
}
149157
}

‎react-spaces/src/Space.tsx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -37,10 +37,9 @@ export const SpaceInternal : React.FC<AllProps> = React.memo((props) => {
3737

3838
const {
3939
space,
40+
currentSize,
4041
parentContext,
41-
currentContext,
42-
currentWidth,
43-
currentHeight
42+
currentContext
4443
} = useSpace(props, divElementRef);
4544

4645
const outerStyle = {
@@ -55,7 +54,7 @@ export const SpaceInternal : React.FC<AllProps> = React.memo((props) => {
5554

5655
const handleSize = props.handleSize === undefined ? 5 : props.handleSize;
5756
const overlayHandle = props.overlayHandle !== undefined ? props.overlayHandle : true;
58-
const resize = applyResize(props, space, parentContext, handleSize, divElementRef);
57+
const resize = applyResize(props, space, currentSize.parsedSize, parentContext, handleSize, divElementRef);
5958

6059
const innerStyle =
6160
{
@@ -101,7 +100,7 @@ export const SpaceInternal : React.FC<AllProps> = React.memo((props) => {
101100
<>
102101
{ !USE_INLINESTYLES && <HeadStyles spaces={currentContext.children} /> }
103102
<SpaceContext.Provider value={currentContext}>
104-
<SpaceInfoContext.Provider value={{ width: Math.floor(currentWidth), height: Math.floor(currentHeight) }}>
103+
<SpaceInfoContext.Provider value={{ width: Math.floor(currentSize.width), height: Math.floor(currentSize.height) }}>
105104
{ children }
106105
</SpaceInfoContext.Provider>
107106
</SpaceContext.Provider>
@@ -126,7 +125,7 @@ export const SpaceInternal : React.FC<AllProps> = React.memo((props) => {
126125
className={innerClasses.join(' ')}
127126
style={innerStyle}>
128127
<SpaceContext.Provider value={currentContext}>
129-
<SpaceInfoContext.Provider value={{ width: Math.floor(currentWidth), height: Math.floor(currentHeight) }}>
128+
<SpaceInfoContext.Provider value={{ width: Math.floor(currentSize.width), height: Math.floor(currentSize.height) }}>
130129
{ children }
131130
</SpaceInfoContext.Provider>
132131
</SpaceContext.Provider>
@@ -149,7 +148,7 @@ export const SpaceInternal : React.FC<AllProps> = React.memo((props) => {
149148
{ !USE_INLINESTYLES && <HeadStyles spaces={currentContext.children} /> }
150149
{ resize.resizeHandle }
151150
<SpaceContext.Provider value={currentContext}>
152-
<SpaceInfoContext.Provider value={{ width: Math.floor(currentWidth), height: Math.floor(currentHeight) }}>
151+
<SpaceInfoContext.Provider value={{ width: Math.floor(currentSize.width), height: Math.floor(currentSize.height) }}>
153152
{ children }
154153
</SpaceInfoContext.Provider>
155154
</SpaceContext.Provider>

0 commit comments

Comments
 (0)