Skip to content

Commit f7b46cf

Browse files
aeagleaeagle
committed
Switch css gen method for resize handles
1 parent 777be68 commit f7b46cf

File tree

3 files changed

+200
-61
lines changed

3 files changed

+200
-61
lines changed

‎src/core-react.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -261,6 +261,26 @@ export function useSpaceResizeHandles(store: ISpaceStore, space: ISpaceDefinitio
261261
});
262262
}
263263

264+
if (space.canResizeBottomLeft) {
265+
mouseHandles.push({
266+
id: `${space.id}-mbl`,
267+
key: "bottom-left",
268+
className: `spaces-resize-handle resize-bottom-left`,
269+
onMouseDown: (event) => store.startMouseResize(ResizeType.Bottom, space, event),
270+
onTouchStart: (event) => store.startTouchResize(ResizeType.Bottom, space, event),
271+
});
272+
}
273+
274+
if (space.canResizeBottomRight) {
275+
mouseHandles.push({
276+
id: `${space.id}-mbr`,
277+
key: "bottom-right",
278+
className: `spaces-resize-handle resize-bottom-right`,
279+
onMouseDown: (event) => store.startMouseResize(ResizeType.Bottom, space, event),
280+
onTouchStart: (event) => store.startTouchResize(ResizeType.Bottom, space, event),
281+
});
282+
}
283+
264284
return {
265285
mouseHandles,
266286
};

‎src/core-utils.ts‎

Lines changed: 136 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -143,103 +143,178 @@ export function styleDefinition(space: ISpaceDefinition) {
143143
cssElements.push(`#${space.id} > .spaces-space-inner { overflow: auto; touch-action: auto; }`);
144144
}
145145

146-
let handleOffset = 0;
147-
const touchHandleSize = space.touchHandleSize / 2 - space.handleSize / 2;
146+
let nhandleOffset = 0;
147+
const handleSize = `${space.handleSize}px`;
148+
const touchHandleSize = `${space.touchHandleSize / 2 - space.handleSize / 2}px`;
148149

149150
switch (space.handlePlacement) {
150151
case ResizeHandlePlacement.Inside:
151152
case ResizeHandlePlacement.OverlayInside:
152-
handleOffset = space.handleSize;
153+
nhandleOffset = space.handleSize;
153154
if (space.type === Type.Positioned) {
154-
handleOffset = 0;
155+
nhandleOffset = 0;
155156
}
156157
break;
157158
case ResizeHandlePlacement.OverlayBoundary:
158-
handleOffset = space.handleSize / 2;
159+
nhandleOffset = space.handleSize / 2;
159160
break;
160161
}
161162

163+
const handleOffset = `${nhandleOffset}px`;
164+
165+
const addCss = (id: string, pos: { left?: string; top?: string; right?: string; bottom?: string; width?: string; height?: string }) => {
166+
const styles: string[] = [];
167+
168+
if (pos.left) styles.push(`left: ${pos.left}`);
169+
if (pos.top) styles.push(`top: ${pos.top}`);
170+
if (pos.right) styles.push(`right: ${pos.right}`);
171+
if (pos.bottom) styles.push(`bottom: ${pos.bottom}`);
172+
if (pos.width) styles.push(`width: ${pos.width}`);
173+
if (pos.height) styles.push(`height: ${pos.height}`);
174+
175+
cssElements.push(`#${space.id}-${id} { ${styles.join("; ")}}`);
176+
};
177+
162178
if (space.type === Type.Positioned) {
163179
if (space.canResizeLeft) {
164-
cssElements.push(
165-
`#${space.id}-ml { left: calc(${css(space.left, true)} - ${handleOffset}px); width: ${space.handleSize}px; top: ${css(
166-
space.top,
167-
)}; bottom: ${css(space.bottom)}; height: ${css(space.height)}; }`,
168-
);
180+
addCss("ml", {
181+
left: `calc(${css(space.left, true)} - ${handleOffset})`,
182+
top: css(space.top),
183+
bottom: css(space.bottom),
184+
width: handleSize,
185+
height: css(space.height),
186+
});
169187
}
170188

171189
if (space.canResizeTop) {
172-
cssElements.push(
173-
`#${space.id}-mt { top: calc(${css(space.top, true)} - ${handleOffset}px); height: ${space.handleSize}px; left: ${css(
174-
space.left,
175-
)}; right: ${css(space.right)}; width: ${css(space.width)}; }`,
176-
);
177-
cssElements.push(
178-
`#${space.id}-mt:after { top: -${touchHandleSize}px; bottom: -${touchHandleSize}px; left: ${css(space.left)}; right: ${css(
179-
space.right,
180-
)}; width: ${css(space.width)}; }`,
181-
);
190+
addCss("mt", {
191+
top: `calc(${css(space.top, true)} - ${handleOffset})`,
192+
left: css(space.left),
193+
right: css(space.right),
194+
width: css(space.width),
195+
height: handleSize,
196+
});
197+
addCss("mt:after", {
198+
top: `-${touchHandleSize}`,
199+
bottom: `-${touchHandleSize}`,
200+
left: css(space.left),
201+
right: css(space.right),
202+
width: css(space.width),
203+
});
182204
}
183205

184206
if (space.canResizeRight) {
185207
if (space.width.size) {
186-
cssElements.push(
187-
`#${space.id}-mr { left: calc(${css(space.left, true)} + ${css(space.width, true)} - ${
188-
space.handleSize
189-
}px + ${handleOffset}px); width: ${space.handleSize}px; top: ${css(space.top)}; bottom: ${css(space.bottom)}; height: ${css(
190-
space.height,
191-
)}; }`,
192-
);
208+
addCss("mr", {
209+
left: `calc(${css(space.left, true)} + ${css(space.width, true)} - ${handleSize} + ${handleOffset})`,
210+
top: css(space.top),
211+
bottom: css(space.bottom),
212+
width: handleSize,
213+
height: css(space.height),
214+
});
193215
} else {
194-
cssElements.push(
195-
`#${space.id}-mr { right: calc(${css(space.right, true)} - ${handleOffset}px); width: ${space.handleSize}px; top: ${css(
196-
space.top,
197-
)}; bottom: ${css(space.bottom)}; height: ${css(space.height)}; }`,
198-
);
216+
addCss("mr", {
217+
right: `calc(${css(space.right, true)} - ${handleOffset})`,
218+
top: css(space.top),
219+
bottom: css(space.bottom),
220+
width: handleSize,
221+
height: css(space.height),
222+
});
199223
}
200-
cssElements.push(`#${space.id}-mr:after { left: -${touchHandleSize}px; right: -${touchHandleSize}px; top: 0; bottom: 0; }`);
224+
addCss("mr:after", {
225+
left: `-${touchHandleSize}`,
226+
right: `-${touchHandleSize}`,
227+
top: `0`,
228+
bottom: `0`,
229+
});
201230
}
202231

203232
if (space.canResizeBottom) {
204233
if (space.height.size) {
205-
cssElements.push(
206-
`#${space.id}-mb { top: calc(${css(space.top, true)} + ${css(space.height, true)} - ${
207-
space.handleSize
208-
}px + ${handleOffset}px); height: ${space.handleSize}px; left: ${css(space.left)}; right: ${css(space.right)}; width: ${css(
209-
space.width,
210-
)}; }`,
211-
);
234+
addCss("mb", {
235+
top: `calc(${css(space.top, true)} + ${css(space.height, true)} - ${handleSize} + ${handleOffset})`,
236+
left: css(space.left),
237+
right: css(space.right),
238+
width: css(space.width),
239+
height: handleSize,
240+
});
212241
} else {
213-
cssElements.push(
214-
`#${space.id}-mb { bottom: calc(${css(space.bottom, true)} - ${handleOffset}px); height: ${space.handleSize}px; left: ${css(
215-
space.left,
216-
)}; right: ${css(space.right)}; width: ${css(space.width)}; }`,
217-
);
242+
addCss("mb", {
243+
bottom: `calc(${css(space.bottom, true)} - ${handleOffset})`,
244+
left: css(space.left),
245+
right: css(space.right),
246+
width: css(space.width),
247+
height: handleSize,
248+
});
218249
}
219-
cssElements.push(`#${space.id}-mb:after { top: -${touchHandleSize}px; bottom: -${touchHandleSize}px; left: 0; right: 0; }`);
250+
addCss("mb:after", {
251+
top: `calc(${css(space.left, true)} - ${handleOffset})`,
252+
bottom: `-${touchHandleSize}`,
253+
left: `0`,
254+
right: `0`,
255+
});
220256
}
221257

222258
if (space.canResizeTopLeft) {
223-
cssElements.push(
224-
`#${space.id}-mtl { left: calc(${css(space.left, true)} - ${handleOffset}px); top: ${css(space.top)}; width: ${
225-
space.handleSize
226-
}px; height: ${space.handleSize}px; }`,
227-
);
259+
addCss("mtl", {
260+
left: `calc(${css(space.left, true)} - ${handleOffset})`,
261+
top: css(space.top),
262+
width: handleSize,
263+
height: handleSize,
264+
});
228265
}
229266

230267
if (space.canResizeTopRight) {
231268
if (space.width.size) {
232-
cssElements.push(
233-
`#${space.id}-mtr { left: calc(${css(space.left, true)} + ${css(space.width, true)} - ${
234-
space.handleSize
235-
}px + ${handleOffset}px); width: ${space.handleSize}px; top: ${css(space.top)}; height: ${space.handleSize}px; }`,
236-
);
269+
addCss("mtr", {
270+
left: `calc(${css(space.left, true)} + ${css(space.width, true)} - ${handleSize} + ${handleOffset}`,
271+
top: css(space.top),
272+
width: handleSize,
273+
height: handleSize,
274+
});
275+
} else {
276+
addCss("mtr", {
277+
right: `calc(${css(space.right, true)} - ${handleOffset})`,
278+
top: css(space.top),
279+
width: handleSize,
280+
height: handleSize,
281+
});
282+
}
283+
}
284+
285+
if (space.canResizeBottomLeft) {
286+
if (space.height.size) {
287+
addCss("mbl", {
288+
top: `calc(${css(space.top, true)} + ${css(space.height, true)} - ${handleSize} + ${handleOffset})`,
289+
left: css(space.left),
290+
width: handleSize,
291+
height: handleSize,
292+
});
293+
} else {
294+
addCss("mbl", {
295+
bottom: `calc(${css(space.bottom, true)} - ${handleOffset})`,
296+
left: css(space.left),
297+
width: handleSize,
298+
height: handleSize,
299+
});
300+
}
301+
}
302+
303+
if (space.canResizeBottomRight) {
304+
if (space.height.size && space.width.size) {
305+
addCss("mbr", {
306+
left: `calc(${css(space.left, true)} + ${css(space.width, true)} - ${handleSize} + ${handleOffset}`,
307+
top: `calc(${css(space.top, true)} + ${css(space.height, true)} - ${handleSize} + ${handleOffset})`,
308+
width: handleSize,
309+
height: handleSize,
310+
});
237311
} else {
238-
cssElements.push(
239-
`#${space.id}-mtr { right: calc(${css(space.right, true)} - ${handleOffset}px); width: ${space.handleSize}px; top: ${css(
240-
space.top,
241-
)}; height: ${space.handleSize}px; }`,
242-
);
312+
addCss("mbr", {
313+
right: `calc(${css(space.right, true)} - ${handleOffset})`,
314+
bottom: `calc(${css(space.bottom, true)} - ${handleOffset})`,
315+
width: handleSize,
316+
height: handleSize,
317+
});
243318
}
244319
}
245320
} else {

‎src/styles.css‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,8 @@
4646
background: transparent;
4747
}
4848

49+
/* Left resize handle */
50+
4951
.spaces-resize-handle.resize-left {
5052
top: 0;
5153
bottom: 0;
@@ -60,6 +62,8 @@
6062
bottom: 0;
6163
}
6264

65+
/* Top-left resize handle */
66+
6367
.spaces-resize-handle.resize-top-left {
6468
top: 0;
6569
bottom: 0;
@@ -74,6 +78,8 @@
7478
bottom: 0;
7579
}
7680

81+
/* Right resize handle */
82+
7783
.spaces-resize-handle.resize-right {
7884
top: 0;
7985
bottom: 0;
@@ -88,6 +94,8 @@
8894
bottom: 0;
8995
}
9096

97+
/* Top right resize handle */
98+
9199
.spaces-resize-handle.resize-top-right {
92100
top: 0;
93101
bottom: 0;
@@ -102,6 +110,8 @@
102110
bottom: 0;
103111
}
104112

113+
/* Top resize handle */
114+
105115
.spaces-resize-handle.resize-top {
106116
left: 0;
107117
right: 0;
@@ -116,6 +126,8 @@
116126
right: 0;
117127
}
118128

129+
/* Bottom resize handle */
130+
119131
.spaces-resize-handle.resize-bottom {
120132
left: 0;
121133
right: 0;
@@ -130,6 +142,38 @@
130142
right: 0;
131143
}
132144

145+
/* Bottom-left resize handle */
146+
147+
.spaces-resize-handle.resize-bottom-left {
148+
left: 0;
149+
right: 0;
150+
}
151+
152+
.spaces-resize-handle.resize-bottom-left:before {
153+
cursor: sw-resize;
154+
}
155+
156+
.spaces-touch-handle.resize-bottom-left {
157+
left: 0;
158+
right: 0;
159+
}
160+
161+
/* Bottom-right resize handle */
162+
163+
.spaces-resize-handle.resize-bottom-right {
164+
left: 0;
165+
right: 0;
166+
}
167+
168+
.spaces-resize-handle.resize-bottom-right:before {
169+
cursor: se-resize;
170+
}
171+
172+
.spaces-touch-handle.resize-bottom-right {
173+
left: 0;
174+
right: 0;
175+
}
176+
133177
.spaces-space {
134178
overflow: hidden;
135179
touch-action: none;

0 commit comments

Comments
 (0)