Skip to content

Commit a1a67f2

Browse files
committed
Added corner resize logic
1 parent f7228e2 commit a1a67f2

File tree

1 file changed

+58
-18
lines changed

1 file changed

+58
-18
lines changed

src/core-resizing.ts

Lines changed: 58 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { SyntheticEvent } from "react";
2-
import { ISpaceDefinition, ResizeType, ISpaceStore, OnResizeEnd, EndEvent, MoveEvent, Type } from "./core-types";
2+
import { ISpaceDefinition, ResizeType, ISpaceStore, OnResizeEnd, EndEvent, MoveEvent, Type, ISize } from "./core-types";
33
import { coalesce, throttle } from "./core-utils";
44

55
const RESIZE_THROTTLE = 0;
@@ -15,29 +15,21 @@ function isHorizontal(resizeType: ResizeType) {
1515

1616
type ResizeAdjuster = (currentX: number, currentY: number) => void;
1717

18-
function createAdjuster(resizeType: ResizeType, space: ISpaceDefinition, originalX: number, originalY: number): ResizeAdjuster {
19-
const dimensionToAdjust = (() => {
20-
if (resizeType === ResizeType.Left) {
21-
return space.left;
22-
} else if (resizeType === ResizeType.Right) {
23-
return space.right;
24-
} else if (resizeType === ResizeType.Bottom) {
25-
return space.bottom;
26-
} else if (resizeType === ResizeType.Top) {
27-
return space.top;
28-
} else {
29-
throw new Error("unknown resize type");
30-
}
31-
})();
32-
18+
function createSideAdjuster(
19+
rect: DOMRect,
20+
resizeType: ResizeType,
21+
dimensionToAdjust: ISize,
22+
space: ISpaceDefinition,
23+
originalX: number,
24+
originalY: number,
25+
): ResizeAdjuster {
3326
const negater = resizeType === ResizeType.Right || resizeType === ResizeType.Bottom ? (val: number) => -val : (val: number) => val;
3427

3528
const candidateOppositeDimensionToAdjust = isHorizontal(resizeType) ? space.width : space.height;
3629

3730
const offset1 = dimensionToAdjust.resized;
3831
const offset2 = candidateOppositeDimensionToAdjust.resized;
3932

40-
const rect = space.element.getBoundingClientRect();
4133
const size = isHorizontal(resizeType) ? rect.width : rect.height;
4234
const minimumAdjust = coalesce(space.minimumSize, 20)! - size + 0;
4335
const maximumAdjust = space.maximumSize ? space.maximumSize - size + 0 : undefined;
@@ -71,6 +63,50 @@ function createAdjuster(resizeType: ResizeType, space: ISpaceDefinition, origina
7163
};
7264
}
7365

66+
function createAdjuster(resizeType: ResizeType, space: ISpaceDefinition, originalX: number, originalY: number): ResizeAdjuster {
67+
const rect = space.element.getBoundingClientRect();
68+
switch (resizeType) {
69+
case ResizeType.Left:
70+
return createSideAdjuster(rect, resizeType, space.left, space, originalX, originalY);
71+
case ResizeType.Right:
72+
return createSideAdjuster(rect, resizeType, space.right, space, originalX, originalY);
73+
case ResizeType.Bottom:
74+
return createSideAdjuster(rect, resizeType, space.bottom, space, originalX, originalY);
75+
case ResizeType.Top:
76+
return createSideAdjuster(rect, resizeType, space.top, space, originalX, originalY);
77+
case ResizeType.TopLeft:
78+
const topAdjuster = createSideAdjuster(rect, ResizeType.Top, space.top, space, originalX, originalY);
79+
const leftAdjuster = createSideAdjuster(rect, ResizeType.Left, space.left, space, originalX, originalY);
80+
return (x, y) => {
81+
topAdjuster(x, y);
82+
leftAdjuster(x, y);
83+
};
84+
case ResizeType.TopRight:
85+
const top1Adjuster = createSideAdjuster(rect, ResizeType.Top, space.top, space, originalX, originalY);
86+
const rightAdjuster = createSideAdjuster(rect, ResizeType.Right, space.right, space, originalX, originalY);
87+
return (x, y) => {
88+
top1Adjuster(x, y);
89+
rightAdjuster(x, y);
90+
};
91+
case ResizeType.BottomLeft:
92+
const bottomAdjuster = createSideAdjuster(rect, ResizeType.Bottom, space.bottom, space, originalX, originalY);
93+
const left1Adjuster = createSideAdjuster(rect, ResizeType.Left, space.left, space, originalX, originalY);
94+
return (x, y) => {
95+
bottomAdjuster(x, y);
96+
left1Adjuster(x, y);
97+
};
98+
case ResizeType.BottomRight:
99+
const bottom1Adjuster = createSideAdjuster(rect, ResizeType.Bottom, space.bottom, space, originalX, originalY);
100+
const right1Adjuster = createSideAdjuster(rect, ResizeType.Right, space.right, space, originalX, originalY);
101+
return (x, y) => {
102+
bottom1Adjuster(x, y);
103+
right1Adjuster(x, y);
104+
};
105+
default:
106+
throw `Resize type ${resizeType} not supported`;
107+
}
108+
}
109+
74110
export function createResize(store: ISpaceStore) {
75111
return {
76112
startResize<T extends SyntheticEvent<HTMLElement> | MouseEvent | TouchEvent>(
@@ -111,7 +147,11 @@ export function createResize(store: ISpaceStore) {
111147
lastY = newCoords.y;
112148
e.preventDefault();
113149

114-
throttle((x, y) => window.requestAnimationFrame(() => resize(x, y)), RESIZE_THROTTLE)(lastX, lastY);
150+
if (RESIZE_THROTTLE > 0) {
151+
throttle((x, y) => window.requestAnimationFrame(() => resize(x, y)), RESIZE_THROTTLE)(lastX, lastY);
152+
} else {
153+
window.requestAnimationFrame(() => resize(lastX, lastY));
154+
}
115155
};
116156

117157
const removeListener = () => {

0 commit comments

Comments
 (0)