Skip to content

Commit 4c3afe9

Browse files
aeagleaeagle
committed
Resize handle WIP
1 parent 4f9aba6 commit 4c3afe9

File tree

6 files changed

+72
-23
lines changed

6 files changed

+72
-23
lines changed

‎src/core-react.ts‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ export function useSpace(props: ISpaceProps) {
7777
store.updateSpace(space, parsedProps);
7878
}
7979

80-
const resizeHandles = useSpaceResizeHandles(store, space, props.position, props.handleSize);
80+
const resizeHandles = useSpaceResizeHandles(store, space, props.position);
8181

8282
React.useEffect(() => {
8383
const rect = elementRef.current!.getBoundingClientRect() as DOMRect;
@@ -127,24 +127,25 @@ interface IResizeHandleProps {
127127
onTouchStart: (e: React.TouchEvent<HTMLElement>) => void;
128128
}
129129

130-
export function useSpaceResizeHandles(store: ISpaceStore, space: ISpaceDefinition, position: IPositionalProps | undefined, handleSize?: number) {
130+
export function useSpaceResizeHandles(store: ISpaceStore, space: ISpaceDefinition, position: IPositionalProps | undefined) {
131131
const mouseHandles: IResizeHandleProps[] = [];
132132
const touchHandles: IResizeHandleProps[] = [];
133-
const resizeHandleSize = coalesce(handleSize, 2);
133+
const handleSize = space.handleSize;
134+
const touchHandleSize = space.touchHandleSize;
134135

135136
if (position && position.rightResizable) {
136137
mouseHandles.push({
137138
id: `${space.id}-m`,
138139
key: "right",
139-
style: { width: resizeHandleSize },
140+
style: { width: handleSize },
140141
className: `spaces-resize-handle resize-right`,
141142
onMouseDown: (event) => store.startMouseResize(ResizeType.Right, space, space.width, event),
142143
onTouchStart: (event) => store.startTouchResize(ResizeType.Right, space, space.width, event),
143144
});
144145
touchHandles.push({
145146
id: `${space.id}-t`,
146147
key: "right",
147-
style: { width: 30 },
148+
style: { width: touchHandleSize },
148149
className: `spaces-touch-handle resize-right`,
149150
onMouseDown: (event) => event.preventDefault(),
150151
onTouchStart: (event) => store.startTouchResize(ResizeType.Right, space, space.width, event),
@@ -155,15 +156,15 @@ export function useSpaceResizeHandles(store: ISpaceStore, space: ISpaceDefinitio
155156
mouseHandles.push({
156157
id: `${space.id}-m`,
157158
key: "left",
158-
style: { width: resizeHandleSize },
159+
style: { width: handleSize },
159160
className: `spaces-resize-handle resize-left`,
160161
onMouseDown: (event) => store.startMouseResize(ResizeType.Left, space, space.width, event),
161162
onTouchStart: (event) => store.startTouchResize(ResizeType.Left, space, space.width, event),
162163
});
163164
touchHandles.push({
164165
id: `${space.id}-t`,
165166
key: "left",
166-
style: { width: 30 },
167+
style: { width: touchHandleSize },
167168
className: `spaces-touch-handle resize-left`,
168169
onMouseDown: (event) => event.preventDefault(),
169170
onTouchStart: (event) => store.startTouchResize(ResizeType.Left, space, space.width, event),
@@ -174,15 +175,15 @@ export function useSpaceResizeHandles(store: ISpaceStore, space: ISpaceDefinitio
174175
mouseHandles.push({
175176
id: `${space.id}-m`,
176177
key: "top",
177-
style: { height: resizeHandleSize },
178+
style: { height: handleSize },
178179
className: `spaces-resize-handle resize-top`,
179180
onMouseDown: (event) => store.startMouseResize(ResizeType.Top, space, space.height, event),
180181
onTouchStart: (event) => store.startTouchResize(ResizeType.Top, space, space.height, event),
181182
});
182183
touchHandles.push({
183184
id: `${space.id}-t`,
184185
key: "top",
185-
style: { height: 30 },
186+
style: { height: touchHandleSize },
186187
className: `spaces-touch-handle resize-top`,
187188
onMouseDown: (event) => event.preventDefault(),
188189
onTouchStart: (event) => store.startTouchResize(ResizeType.Top, space, space.height, event),
@@ -194,14 +195,14 @@ export function useSpaceResizeHandles(store: ISpaceStore, space: ISpaceDefinitio
194195
id: `${space.id}-m`,
195196
key: "bottom",
196197
className: `spaces-resize-handle resize-bottom`,
197-
style: { height: resizeHandleSize },
198+
style: { height: handleSize },
198199
onMouseDown: (event) => store.startMouseResize(ResizeType.Bottom, space, space.height, event),
199200
onTouchStart: (event) => store.startTouchResize(ResizeType.Bottom, space, space.height, event),
200201
});
201202
touchHandles.push({
202203
id: `${space.id}-t`,
203204
key: "bottom",
204-
style: { height: 30 },
205+
style: { height: touchHandleSize },
205206
className: `spaces-touch-handle resize-bottom`,
206207
onMouseDown: (event) => event.preventDefault(),
207208
onTouchStart: (event) => store.startTouchResize(ResizeType.Bottom, space, space.height, event),

‎src/core-resizing.ts‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { SyntheticEvent } from "react";
2+
import ReactDOM from "react-dom";
23
import { ISpaceDefinition, ISize, ResizeType, Orientation, ISpaceStore } from "./core-types";
34
import { throttle, coalesce } from "./core-utils";
45

@@ -75,12 +76,13 @@ export function createResize(store: ISpaceStore) {
7576
}
7677
}
7778

79+
const originalCoords = getCoords(e);
80+
7881
space.resizing = true;
7982
space.updateParent();
8083

8184
const rect = space.element.getBoundingClientRect();
8285
const size = space.orientation === Orientation.Horizontal ? rect.width : rect.height;
83-
const originalCoords = getCoords(e);
8486
const startSize = targetSize.resized;
8587
const minimumAdjust = coalesce(space.minimumSize, 20)! - size + targetSize.resized;
8688
const maximumAdjust = space.maximumSize ? space.maximumSize - size + targetSize.resized : undefined;
@@ -105,6 +107,11 @@ export function createResize(store: ISpaceStore) {
105107
const removeListener = () => {
106108
if (moved) {
107109
resize(lastX, lastY);
110+
} else {
111+
// if (elementsUnderneathPointer && elementsUnderneathPointer.length > 1) {
112+
// const target = elementsUnderneathPointer[1] as any;
113+
// target.submitMessage(e);
114+
// }
108115
}
109116
window.removeEventListener(moveEvent, withPreventDefault as EventListener);
110117
window.removeEventListener(endEvent, removeListener);
@@ -123,7 +130,7 @@ export function createResize(store: ISpaceStore) {
123130

124131
window.addEventListener(moveEvent, withPreventDefault as EventListener);
125132
window.addEventListener(endEvent, removeListener);
126-
e.preventDefault();
133+
//e.preventDefault();
127134
},
128135
};
129136
}

‎src/core-types.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ export interface ISpaceProps extends ICommonProps {
6868
position?: IPositionalProps | undefined;
6969
overlayHandle?: boolean | undefined;
7070
handleSize?: number | undefined;
71+
touchHandleSize?: number | undefined;
7172
minimumSize?: number | undefined;
7273
maximumSize?: number | undefined;
7374
onResizeStart?: (() => void | boolean) | undefined;
@@ -142,6 +143,9 @@ export interface ISpaceDefinition {
142143
resizing: boolean;
143144
minimumSize?: number;
144145
maximumSize?: number;
146+
handleSize: number;
147+
touchHandleSize: number;
148+
overlayHandle: boolean;
145149
canResizeTop: boolean;
146150
canResizeLeft: boolean;
147151
canResizeRight: boolean;

‎src/core-utils.ts‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ISpaceDefinition, SizeUnit, ISize, Type } from "./core-types";
1+
import { ISpaceDefinition, SizeUnit, ISize } from "./core-types";
22

33
export function shortuuid() {
44
let firstPart = (Math.random() * 46656) | 0;
@@ -124,24 +124,27 @@ export function styleDefinition(space: ISpaceDefinition) {
124124
cssElements.push(`#${space.id} { ${cssString.join(" ")} }`);
125125
}
126126

127+
const handleSize = space.handleSize / 2;
128+
const touchHandleSize = space.touchHandleSize / 2;
129+
127130
if (space.canResizeLeft) {
128-
cssElements.push(`#${space.id}-t { left: calc(${css(space.left, true)} + ${css(space.width, true)} - 15px); }`);
129-
cssElements.push(`#${space.id}-m { left: calc(${css(space.left, true)} + ${css(space.width, true)} - 1px); }`);
131+
cssElements.push(`#${space.id}-t { left: calc(${css(space.left, true)} + ${css(space.width, true)} - ${touchHandleSize}px); }`);
132+
cssElements.push(`#${space.id}-m { left: calc(${css(space.left, true)} + ${css(space.width, true)} - ${handleSize}px); }`);
130133
}
131134

132135
if (space.canResizeTop) {
133-
cssElements.push(`#${space.id}-t { top: calc(${css(space.top, true)} + ${css(space.height, true)} - 15px); }`);
134-
cssElements.push(`#${space.id}-m { top: calc(${css(space.top, true)} + ${css(space.height, true)} - 1px); }`);
136+
cssElements.push(`#${space.id}-t { top: calc(${css(space.top, true)} + ${css(space.height, true)} - ${touchHandleSize}px); }`);
137+
cssElements.push(`#${space.id}-m { top: calc(${css(space.top, true)} + ${css(space.height, true)} - ${handleSize}px); }`);
135138
}
136139

137140
if (space.canResizeRight) {
138-
cssElements.push(`#${space.id}-t { right: calc(${css(space.right, true)} + ${css(space.width, true)} - 15px); }`);
139-
cssElements.push(`#${space.id}-m { right: calc(${css(space.right, true)} + ${css(space.width, true)} - 1px); }`);
141+
cssElements.push(`#${space.id}-t { right: calc(${css(space.right, true)} + ${css(space.width, true)} - ${touchHandleSize}px); }`);
142+
cssElements.push(`#${space.id}-m { right: calc(${css(space.right, true)} + ${css(space.width, true)} - ${handleSize}px); }`);
140143
}
141144

142145
if (space.canResizeBottom) {
143-
cssElements.push(`#${space.id}-t { bottom: calc(${css(space.bottom, true)} + ${css(space.height, true)} - 15px); }`);
144-
cssElements.push(`#${space.id}-m { bottom: calc(${css(space.bottom, true)} + ${css(space.height, true)} - 1px); }`);
146+
cssElements.push(`#${space.id}-t { bottom: calc(${css(space.bottom, true)} + ${css(space.height, true)} - ${touchHandleSize}px); }`);
147+
cssElements.push(`#${space.id}-m { bottom: calc(${css(space.bottom, true)} + ${css(space.height, true)} - ${handleSize}px); }`);
145148
}
146149

147150
return cssElements.join(" ");

‎src/core.ts‎

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,9 @@ const spaceDefaults: Partial<ISpaceDefinition> = {
1010
resizing: false,
1111
centerContent: "none",
1212
dimension: { left: 0, top: 0, right: 0, bottom: 0, width: 0, height: 0, x: 0, y: 0, toJSON: () => "" },
13+
handleSize: 2,
14+
touchHandleSize: 30,
15+
overlayHandle: true,
1316
adjustLeft: () => false,
1417
adjustRight: () => false,
1518
adjustTop: () => false,
@@ -176,7 +179,20 @@ export function createStore(): ISpaceStore {
176179
updateStyleDefinition(space);
177180
},
178181
updateSpace: (space, props) => {
179-
const { type, anchor, order, zIndex, scrollable, position, centerContent, minimumSize, maximumSize } = props;
182+
const {
183+
type,
184+
anchor,
185+
order,
186+
zIndex,
187+
scrollable,
188+
position,
189+
centerContent,
190+
minimumSize,
191+
maximumSize,
192+
handleSize,
193+
touchHandleSize,
194+
overlayHandle,
195+
} = props;
180196
const canResizeLeft = (position && position.rightResizable) || false;
181197
const canResizeRight = (position && position.leftResizable) || false;
182198
const canResizeTop = (position && position.bottomResizable) || false;
@@ -274,6 +290,21 @@ export function createStore(): ISpaceStore {
274290
changed = true;
275291
}
276292

293+
if (space.handleSize !== handleSize) {
294+
space.handleSize = handleSize || spaceDefaults.handleSize!;
295+
changed = true;
296+
}
297+
298+
if (space.touchHandleSize !== touchHandleSize) {
299+
space.touchHandleSize = touchHandleSize || spaceDefaults.touchHandleSize!;
300+
changed = true;
301+
}
302+
303+
if (space.overlayHandle !== overlayHandle) {
304+
space.overlayHandle = overlayHandle || spaceDefaults.overlayHandle!;
305+
changed = true;
306+
}
307+
277308
if (space.canResizeBottom !== canResizeBottom) {
278309
space.canResizeBottom = canResizeBottom;
279310
changed = true;

‎src/styles.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,11 +31,14 @@
3131
position: absolute;
3232
z-index: 9999;
3333
touch-action: none;
34+
background: transparent;
3435
}
3536

3637
.spaces-touch-handle {
3738
position: absolute;
3839
z-index: 9998;
40+
pointer-events: all;
41+
background: transparent;
3942
}
4043

4144
.spaces-resize-handle.resize-left {

0 commit comments

Comments
 (0)