Skip to content

Commit 1eacba6

Browse files
aeagleaeagle
committed
Revised placement method of touch handles
Defaulted touch to resize handle size Added property documentation
1 parent f242128 commit 1eacba6

File tree

8 files changed

+41
-46
lines changed

8 files changed

+41
-46
lines changed

‎package-lock.json

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-spaces",
3-
"version": "0.2.0-beta.4",
3+
"version": "0.2.0-beta.5",
44
"main": "dist/index.js",
55
"module": "dist/es/index.js",
66
"types": "dist/index.d.ts",

‎src/components/Space.tsx

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -88,9 +88,6 @@ const SpaceInner: React.FC<ISpaceProps & { wrapperInstance: Space }> = (props) =
8888

8989
return (
9090
<>
91-
{resizeHandles.touchHandles.map((r) => (
92-
<div {...r} />
93-
))}
9491
{resizeHandles.mouseHandles.map((r) => (
9592
<div {...r} />
9693
))}

‎src/components/stories/Utils.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,7 @@ export const ResizableProps = () => (
140140
<>
141141
<PropsHeader>Resizable properties</PropsHeader>
142142
<Prop name="handleSize" type="number" default="5" description="Size of the resize handle in pixels." />
143+
<Prop name="touchHandleSize" type="number" default="5" description={<>An optional handle size that can be used to make the handle area bigger for touches. This extends outside the dimensions of the resize handle. <strong>NOTE: You should ensure that you try not to place clickable elements underneath this extended handle area as the handle area will block interaction with that element.</strong></>} />
143144
<Prop
144145
name="handlePlacement"
145146
type="ResizeHandlePlacement.OverlayInside ('overlay-inside'), ResizeHandlePlacement.Inside ('inside'), ResizeHandlePlacement.OverlayBoundary ('overlay-boundary')"

‎src/core-react.ts

Lines changed: 1 addition & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,6 @@ interface IResizeHandleProps {
137137

138138
export function useSpaceResizeHandles(store: ISpaceStore, space: ISpaceDefinition, position: IPositionalProps | undefined) {
139139
const mouseHandles: IResizeHandleProps[] = [];
140-
const touchHandles: IResizeHandleProps[] = [];
141140

142141
if (position && position.rightResizable) {
143142
mouseHandles.push({
@@ -147,13 +146,6 @@ export function useSpaceResizeHandles(store: ISpaceStore, space: ISpaceDefinitio
147146
onMouseDown: (event) => store.startMouseResize(ResizeType.Right, space, space.width, event),
148147
onTouchStart: (event) => store.startTouchResize(ResizeType.Right, space, space.width, event),
149148
});
150-
touchHandles.push({
151-
id: `${space.id}-t`,
152-
key: "right",
153-
className: `spaces-touch-handle resize-right`,
154-
onMouseDown: (event) => event.preventDefault(),
155-
onTouchStart: (event) => store.startTouchResize(ResizeType.Right, space, space.width, event),
156-
});
157149
}
158150

159151
if (position && position.leftResizable) {
@@ -164,13 +156,6 @@ export function useSpaceResizeHandles(store: ISpaceStore, space: ISpaceDefinitio
164156
onMouseDown: (event) => store.startMouseResize(ResizeType.Left, space, space.width, event),
165157
onTouchStart: (event) => store.startTouchResize(ResizeType.Left, space, space.width, event),
166158
});
167-
touchHandles.push({
168-
id: `${space.id}-t`,
169-
key: "left",
170-
className: `spaces-touch-handle resize-left`,
171-
onMouseDown: (event) => event.preventDefault(),
172-
onTouchStart: (event) => store.startTouchResize(ResizeType.Left, space, space.width, event),
173-
});
174159
}
175160

176161
if (position && position.topResizable) {
@@ -181,13 +166,6 @@ export function useSpaceResizeHandles(store: ISpaceStore, space: ISpaceDefinitio
181166
onMouseDown: (event) => store.startMouseResize(ResizeType.Top, space, space.height, event),
182167
onTouchStart: (event) => store.startTouchResize(ResizeType.Top, space, space.height, event),
183168
});
184-
touchHandles.push({
185-
id: `${space.id}-t`,
186-
key: "top",
187-
className: `spaces-touch-handle resize-top`,
188-
onMouseDown: (event) => event.preventDefault(),
189-
onTouchStart: (event) => store.startTouchResize(ResizeType.Top, space, space.height, event),
190-
});
191169
}
192170

193171
if (position && position.bottomResizable) {
@@ -198,17 +176,9 @@ export function useSpaceResizeHandles(store: ISpaceStore, space: ISpaceDefinitio
198176
onMouseDown: (event) => store.startMouseResize(ResizeType.Bottom, space, space.height, event),
199177
onTouchStart: (event) => store.startTouchResize(ResizeType.Bottom, space, space.height, event),
200178
});
201-
touchHandles.push({
202-
id: `${space.id}-t`,
203-
key: "bottom",
204-
className: `spaces-touch-handle resize-bottom`,
205-
onMouseDown: (event) => event.preventDefault(),
206-
onTouchStart: (event) => store.startTouchResize(ResizeType.Bottom, space, space.height, event),
207-
});
208179
}
209180

210181
return {
211-
mouseHandles,
212-
touchHandles,
182+
mouseHandles
213183
};
214184
}

‎src/core-utils.ts

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -125,39 +125,37 @@ export function styleDefinition(space: ISpaceDefinition) {
125125
}
126126

127127
let handleOffset = 0;
128-
let touchHandleOffset = 0;
128+
const touchHandleSize = (space.touchHandleSize / 2) - (space.handleSize / 2);
129129

130130
switch (space.handlePlacement)
131131
{
132132
case ResizeHandlePlacement.Inside:
133133
case ResizeHandlePlacement.OverlayInside:
134134
handleOffset = space.handleSize;
135-
touchHandleOffset = space.touchHandleSize;
136135
break;
137136
case ResizeHandlePlacement.OverlayBoundary:
138137
handleOffset = space.handleSize / 2;
139-
touchHandleOffset = space.touchHandleSize / 2;
140138
break;
141139
}
142140

143141
if (space.canResizeLeft) {
144-
cssElements.push(`#${space.id}-t { left: calc(${css(space.left, true)} + ${css(space.width, true)} - ${touchHandleOffset}px); width: ${space.touchHandleSize}px; }`);
145142
cssElements.push(`#${space.id}-m { left: calc(${css(space.left, true)} + ${css(space.width, true)} - ${handleOffset}px); width: ${space.handleSize}px; }`);
143+
cssElements.push(`#${space.id}-m:after { left: -${touchHandleSize}px; right: -${touchHandleSize}px; top: 0; bottom: 0; }`);
146144
}
147145

148146
if (space.canResizeTop) {
149-
cssElements.push(`#${space.id}-t { top: calc(${css(space.top, true)} + ${css(space.height, true)} - ${touchHandleOffset}px); height: ${space.touchHandleSize}px; }`);
150147
cssElements.push(`#${space.id}-m { top: calc(${css(space.top, true)} + ${css(space.height, true)} - ${handleOffset}px); height: ${space.handleSize}px; }`);
148+
cssElements.push(`#${space.id}-m:after { top: -${touchHandleSize}px; bottom: -${touchHandleSize}px; left: 0; right: 0; }`);
151149
}
152150

153151
if (space.canResizeRight) {
154-
cssElements.push(`#${space.id}-t { right: calc(${css(space.right, true)} + ${css(space.width, true)} - ${touchHandleOffset}px); width: ${space.touchHandleSize}px; }`);
155152
cssElements.push(`#${space.id}-m { right: calc(${css(space.right, true)} + ${css(space.width, true)} - ${handleOffset}px); width: ${space.handleSize}px; }`);
153+
cssElements.push(`#${space.id}-m:after { left: -${touchHandleSize}px; right: -${touchHandleSize}px; top: 0; bottom: 0; }`);
156154
}
157155

158156
if (space.canResizeBottom) {
159-
cssElements.push(`#${space.id}-t { bottom: calc(${css(space.bottom, true)} + ${css(space.height, true)} - ${touchHandleOffset}px); height: ${space.touchHandleSize}px; }`);
160157
cssElements.push(`#${space.id}-m { bottom: calc(${css(space.bottom, true)} + ${css(space.height, true)} - ${handleOffset}px); height: ${space.handleSize}px; }`);
158+
cssElements.push(`#${space.id}-m:after { top: -${touchHandleSize}px; bottom: -${touchHandleSize}px; left: 0; right: 0; }`);
161159
}
162160

163161
return cssElements.join(" ");

‎src/core.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const spaceDefaults: Partial<ISpaceDefinition> = {
1111
centerContent: "none",
1212
dimension: { left: 0, top: 0, right: 0, bottom: 0, width: 0, height: 0, x: 0, y: 0, toJSON: () => "" },
1313
handleSize: 5,
14-
touchHandleSize: 30,
14+
touchHandleSize: 5,
1515
handlePlacement: ResizeHandlePlacement.OverlayInside,
1616
adjustLeft: () => false,
1717
adjustRight: () => false,

‎src/styles.css

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,28 @@
3030
.spaces-resize-handle {
3131
position: absolute;
3232
z-index: 9999;
33-
touch-action: none;
3433
background: transparent;
3534
}
3635

36+
.spaces-resize-handle:before {
37+
content: '';
38+
position: absolute;
39+
left: 0;
40+
top: 0;
41+
right: 0;
42+
bottom: 0;
43+
z-index: 2;
44+
}
45+
46+
.spaces-resize-handle:after {
47+
cursor: default;
48+
content: '';
49+
position: absolute;
50+
background-color: blue;
51+
opacity: 0.2;
52+
z-index: 1;
53+
}
54+
3755
.spaces-touch-handle {
3856
position: absolute;
3957
z-index: 9998;
@@ -44,6 +62,9 @@
4462
.spaces-resize-handle.resize-left {
4563
top: 0;
4664
bottom: 0;
65+
}
66+
67+
.spaces-resize-handle.resize-left:before {
4768
cursor: w-resize;
4869
}
4970

@@ -55,6 +76,9 @@
5576
.spaces-resize-handle.resize-right {
5677
top: 0;
5778
bottom: 0;
79+
}
80+
81+
.spaces-resize-handle.resize-right:before {
5882
cursor: e-resize;
5983
}
6084

@@ -66,6 +90,9 @@
6690
.spaces-resize-handle.resize-top {
6791
left: 0;
6892
right: 0;
93+
}
94+
95+
.spaces-resize-handle.resize-top:before {
6996
cursor: n-resize;
7097
}
7198

@@ -77,6 +104,9 @@
77104
.spaces-resize-handle.resize-bottom {
78105
left: 0;
79106
right: 0;
107+
}
108+
109+
.spaces-resize-handle.resize-bottom:before {
80110
cursor: s-resize;
81111
}
82112

@@ -86,7 +116,6 @@
86116
}
87117

88118
.spaces-space {
89-
position: absolute;
90119
overflow: hidden;
91120
touch-action: none;
92121
box-sizing: border-box;

0 commit comments

Comments
 (0)