Skip to content

Commit 44a9c0f

Browse files
aeagleaeagle
committed
Initial parentSpace.startResize() implementation
1 parent 9f0e44e commit 44a9c0f

File tree

6 files changed

+65
-36
lines changed

6 files changed

+65
-36
lines changed

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

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,12 @@
11
import * as React from "react";
22
import { SpaceContext } from "../components/Contexts";
3-
import { IParentSpace, ResizeType } from "../types";
3+
import { IParentSpace } from "../types";
44

55
export const useParentSpace: () => IParentSpace = () => {
66
const parentSpace = React.useContext(SpaceContext);
77

88
return {
9-
startMouseDrag: !parentSpace
10-
? (e: React.MouseEvent<HTMLElement, MouseEvent>, onDragEnd?: (e: any) => void) => null
11-
: parentSpace.startMouseDrag,
12-
startMouseResize: !parentSpace
13-
? (e: React.MouseEvent<HTMLElement, MouseEvent>, resizeType: ResizeType, onResizeEnd?: (e: any) => void) => null
14-
: parentSpace.startMouseResize,
9+
startMouseDrag: !parentSpace ? () => null : parentSpace.startMouseDrag,
10+
startMouseResize: !parentSpace ? () => null : parentSpace.startMouseResize,
1511
};
1612
};

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

Lines changed: 27 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from "react";
2-
import { AllProps, IState, AnchorType, ISize, SizeUnit } from "src/types";
2+
import { AllProps, IState, AnchorType, ISize, SizeUnit, ResizeType } from "src/types";
33
import { initialState, isHorizontalSpace, isVerticalSpace, coalesce } from "src/utils";
44
import { ISpaceContext, updateSpace, removeSpace, registerSpace, createSpaceContext } from "src/ISpaceContext";
55
import { SpaceLayerContext, SpaceContext } from "src/components/Contexts";
@@ -86,6 +86,8 @@ export const useSpace = (props: AllProps, spaceElement: React.MutableRefObject<H
8686
adjustedSize: 0,
8787
adjustedLeft: 0,
8888
adjustedTop: 0,
89+
adjustedWidth: 0,
90+
adjustedHeight: 0,
8991
left: initialLeft(props),
9092
top: initialTop(props),
9193
right: initialRight(props),
@@ -105,6 +107,8 @@ export const useSpace = (props: AllProps, spaceElement: React.MutableRefObject<H
105107
width: isHorizontalSpace(props.anchor) ? initialWidth(props) : undefined,
106108
height: isVerticalSpace(props.anchor) ? initialHeight(props) : undefined,
107109
adjustedSize: 0,
110+
adjustedWidth: 0,
111+
adjustedHeight: 0,
108112
});
109113
}, [props.anchorSize]);
110114

@@ -118,6 +122,8 @@ export const useSpace = (props: AllProps, spaceElement: React.MutableRefObject<H
118122
height: initialHeight(props),
119123
adjustedLeft: 0,
120124
adjustedTop: 0,
125+
adjustedWidth: 0,
126+
adjustedHeight: 0,
121127
});
122128
}, [props.left, props.top, props.bottom, props.right, props.width, props.height, props.anchor]);
123129

@@ -166,10 +172,26 @@ export const useSpace = (props: AllProps, spaceElement: React.MutableRefObject<H
166172
(children) => setState({ children: children }),
167173
(resizing) => setState({ resizing: resizing }),
168174
(event, onDragEnd) => startMouseDrag(event, parentContext, space, spaceElement.current, onDragEnd),
169-
(event, resizeType) =>
170-
startMouseResize(event, parentContext, space, props, spaceElement.current, (r) => {
171-
updateSpace(parentContext, space.id, { adjustedLeft: r.x });
172-
}),
175+
(event, resizeType, onResizeEnd) =>
176+
startMouseResize(
177+
event,
178+
parentContext,
179+
space,
180+
props,
181+
spaceElement.current,
182+
resizeType,
183+
(r) => {
184+
switch (resizeType) {
185+
case ResizeType.Left:
186+
updateSpace(parentContext, space.id, { adjustedLeft: -r.x });
187+
break;
188+
case ResizeType.Top:
189+
updateSpace(parentContext, space.id, { adjustedTop: -r.y });
190+
break;
191+
}
192+
},
193+
onResizeEnd,
194+
),
173195
parentContext,
174196
);
175197

‎react-spaces/src/ISpaceContext.ts‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,11 @@ export interface ISpaceContext {
77
updateChildren: (children: ISpace[]) => void;
88
updateResizing: (state: boolean) => void;
99
startMouseDrag: (e: React.MouseEvent<HTMLElement, MouseEvent>, onDragEnd?: (info: IPosition) => void) => void;
10-
startMouseResize: (e: React.MouseEvent<HTMLElement, MouseEvent>, resizeType: ResizeType) => void;
10+
startMouseResize: (
11+
e: React.MouseEvent<HTMLElement, MouseEvent>,
12+
resizeType: ResizeType,
13+
onResizeEnd?: (size: number, position: IPosition) => void,
14+
) => void;
1115
}
1216

1317
const recalcSpaces = (spaces: ISpace[]) => {
@@ -111,7 +115,11 @@ export const createSpaceContext = (
111115
updateChildren: (children: ISpace[]) => void,
112116
updateResizing: (state: boolean) => void,
113117
startMouseDrag: (e: React.MouseEvent<HTMLElement, MouseEvent>, onDragEnd?: (info: IPosition) => void) => void,
114-
startMouseResize: (e: React.MouseEvent<HTMLElement, MouseEvent>, resizeType: ResizeType) => void,
118+
startMouseResize: (
119+
e: React.MouseEvent<HTMLElement, MouseEvent>,
120+
resizeType: ResizeType,
121+
onResizeEnd?: (size: number, position: IPosition) => void,
122+
) => void,
115123
parent?: ISpaceContext | null,
116124
) => {
117125
const context: ISpaceContext = {

‎react-spaces/src/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,4 +8,4 @@ export { Fill, Left, Right, Top, Bottom, LeftResizable, RightResizable, TopResiz
88

99
export { useParentSpace } from "./hooks/useParentSpace";
1010

11-
export { CenterType, AnchorType, ResizeType, ISpaceInfo, IParentSpace, IPosition as IDragEndInfo } from "./types";
11+
export { CenterType, AnchorType, ResizeType, ISpaceInfo, IParentSpace, IPosition } from "./types";

‎react-spaces/src/resizing.ts‎

Lines changed: 16 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ResizeType, AllProps, AnchorToResizeTypeMap, ISpace } from "./types";
1+
import { ResizeType, AllProps, AnchorToResizeTypeMap, ISpace, IPosition } from "./types";
22
import { isHorizontalSpace } from "./utils";
33
import { ISpaceContext, updateSpace } from "./ISpaceContext";
44
import { throttle } from "./throttle";
@@ -27,7 +27,9 @@ export function startTouchResize(
2727
space: ISpace,
2828
props: AllProps,
2929
element: HTMLElement | undefined,
30+
resizeType?: ResizeType,
3031
customResizeHandler?: (resizeDelta: IResizeChange) => void,
32+
onResizeEnd?: (size: number, position: IPosition) => void,
3133
) {
3234
return startResize(
3335
e,
@@ -41,7 +43,9 @@ export function startTouchResize(
4143
x: e.touches[0].pageX,
4244
y: e.touches[0].pageY,
4345
}),
46+
resizeType,
4447
customResizeHandler,
48+
onResizeEnd,
4549
);
4650
}
4751

@@ -51,7 +55,9 @@ export function startMouseResize(
5155
space: ISpace,
5256
props: AllProps,
5357
element: HTMLElement | undefined,
58+
resizeType?: ResizeType,
5459
customResizeHandler?: (resizeDelta: IResizeChange) => void,
60+
onResizeEnd?: (size: number, position: IPosition) => void,
5561
) {
5662
return startResize(
5763
e,
@@ -65,11 +71,13 @@ export function startMouseResize(
6571
x: e.pageX,
6672
y: e.pageY,
6773
}),
74+
resizeType,
6875
customResizeHandler,
76+
onResizeEnd,
6977
);
7078
}
7179

72-
function onResizeEnd(props: AllProps, resizeType: ResizeType, element: HTMLElement) {
80+
function resizeEnd(props: AllProps, resizeType: ResizeType, element: HTMLElement, onResizeEnd?: (size: number, position: IPosition) => void) {
7381
const currentRect = element.getBoundingClientRect();
7482
props.onResizeEnd &&
7583
props.onResizeEnd(Math.floor(resizeType === ResizeType.Left || resizeType === ResizeType.Right ? currentRect.width : currentRect.height));
@@ -117,11 +125,12 @@ function startResize<T extends SyntheticEvent<HTMLElement> | MouseEvent | TouchE
117125
endEvent: EndEvent,
118126
moveEvent: MoveEvent,
119127
getCoords: (event: T) => { x: number; y: number },
128+
resizeType?: ResizeType,
120129
customResizeHandler?: (resizeDelta: IResizeChange) => void,
130+
onResizeEnd?: (size: number, position: IPosition) => void,
121131
) {
122-
if (element && props.resizable && props.anchor && parentContext) {
123-
const resizeType: ResizeType | undefined = AnchorToResizeTypeMap[props.anchor];
124-
132+
const type = resizeType || (props.anchor ? AnchorToResizeTypeMap[props.anchor] : undefined);
133+
if (element && parentContext && (props.resizable || props.isPositioned) && type) {
125134
if (props.onResizeStart) {
126135
const result = props.onResizeStart();
127136
if (typeof result === "boolean" && !result) {
@@ -145,19 +154,7 @@ function startResize<T extends SyntheticEvent<HTMLElement> | MouseEvent | TouchE
145154
let moved = false;
146155

147156
const resize = (x: number, y: number) =>
148-
onResize(
149-
props,
150-
parentContext,
151-
space,
152-
resizeType,
153-
originalMouseX,
154-
originalMouseY,
155-
x,
156-
y,
157-
minimumAdjust,
158-
maximumAdjust,
159-
customResizeHandler,
160-
);
157+
onResize(props, parentContext, space, type, originalMouseX, originalMouseY, x, y, minimumAdjust, maximumAdjust, customResizeHandler);
161158

162159
const withPreventDefault = (e: T) => {
163160
moved = true;
@@ -180,7 +177,7 @@ function startResize<T extends SyntheticEvent<HTMLElement> | MouseEvent | TouchE
180177
parentContext.updateResizing(false);
181178
}
182179

183-
onResizeEnd(props, resizeType, element);
180+
resizeEnd(props, type, element, onResizeEnd);
184181
};
185182

186183
window.addEventListener(moveEvent, withPreventDefault as EventListener);

‎react-spaces/src/types.ts‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,12 @@ export interface IReactEvents {
4848
}
4949

5050
export interface IParentSpace {
51-
startMouseDrag: (e: React.MouseEvent<HTMLElement, MouseEvent>, onDragEnd?: (info: IPosition) => void) => void;
52-
startMouseResize: (e: React.MouseEvent<HTMLElement, MouseEvent>, resizeType: ResizeType, onResizeEnd?: (e: any) => void) => void;
51+
startMouseDrag: (e: React.MouseEvent<HTMLElement, MouseEvent>, onDragEnd?: (position: IPosition) => void) => void;
52+
startMouseResize: (
53+
e: React.MouseEvent<HTMLElement, MouseEvent>,
54+
resizeType: ResizeType,
55+
onResizeEnd?: (size: number, position: IPosition) => void,
56+
) => void;
5357
}
5458

5559
export interface IPosition {
@@ -176,6 +180,8 @@ export interface ISpace {
176180
id: string;
177181
adjustedLeft: number;
178182
adjustedTop: number;
183+
adjustedWidth: number;
184+
adjustedHeight: number;
179185
order: number;
180186
zIndex: number;
181187
anchorType: AnchorType | undefined;

0 commit comments

Comments
 (0)