Skip to content

Commit 7c432b7

Browse files
aeagleaeagle
committed
Switch all handle CSS gen to new method
1 parent f7b46cf commit 7c432b7

File tree

1 file changed

+62
-46
lines changed

1 file changed

+62
-46
lines changed

‎src/core-utils.ts‎

Lines changed: 62 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -145,7 +145,7 @@ export function styleDefinition(space: ISpaceDefinition) {
145145

146146
let nhandleOffset = 0;
147147
const handleSize = `${space.handleSize}px`;
148-
const touchHandleSize = `${space.touchHandleSize / 2 - space.handleSize / 2}px`;
148+
const touchHandleSize = `-${space.touchHandleSize / 2 - space.handleSize / 2}px`;
149149

150150
switch (space.handlePlacement) {
151151
case ResizeHandlePlacement.Inside:
@@ -162,7 +162,7 @@ export function styleDefinition(space: ISpaceDefinition) {
162162

163163
const handleOffset = `${nhandleOffset}px`;
164164

165-
const addCss = (id: string, pos: { left?: string; top?: string; right?: string; bottom?: string; width?: string; height?: string }) => {
165+
const addHandleCss = (id: string, pos: { left?: string; top?: string; right?: string; bottom?: string; width?: string; height?: string }) => {
166166
const styles: string[] = [];
167167

168168
if (pos.left) styles.push(`left: ${pos.left}`);
@@ -177,7 +177,7 @@ export function styleDefinition(space: ISpaceDefinition) {
177177

178178
if (space.type === Type.Positioned) {
179179
if (space.canResizeLeft) {
180-
addCss("ml", {
180+
addHandleCss("ml", {
181181
left: `calc(${css(space.left, true)} - ${handleOffset})`,
182182
top: css(space.top),
183183
bottom: css(space.bottom),
@@ -187,16 +187,16 @@ export function styleDefinition(space: ISpaceDefinition) {
187187
}
188188

189189
if (space.canResizeTop) {
190-
addCss("mt", {
190+
addHandleCss("mt", {
191191
top: `calc(${css(space.top, true)} - ${handleOffset})`,
192192
left: css(space.left),
193193
right: css(space.right),
194194
width: css(space.width),
195195
height: handleSize,
196196
});
197-
addCss("mt:after", {
198-
top: `-${touchHandleSize}`,
199-
bottom: `-${touchHandleSize}`,
197+
addHandleCss("mt:after", {
198+
top: touchHandleSize,
199+
bottom: touchHandleSize,
200200
left: css(space.left),
201201
right: css(space.right),
202202
width: css(space.width),
@@ -205,49 +205,49 @@ export function styleDefinition(space: ISpaceDefinition) {
205205

206206
if (space.canResizeRight) {
207207
if (space.width.size) {
208-
addCss("mr", {
208+
addHandleCss("mr", {
209209
left: `calc(${css(space.left, true)} + ${css(space.width, true)} - ${handleSize} + ${handleOffset})`,
210210
top: css(space.top),
211211
bottom: css(space.bottom),
212212
width: handleSize,
213213
height: css(space.height),
214214
});
215215
} else {
216-
addCss("mr", {
216+
addHandleCss("mr", {
217217
right: `calc(${css(space.right, true)} - ${handleOffset})`,
218218
top: css(space.top),
219219
bottom: css(space.bottom),
220220
width: handleSize,
221221
height: css(space.height),
222222
});
223223
}
224-
addCss("mr:after", {
225-
left: `-${touchHandleSize}`,
226-
right: `-${touchHandleSize}`,
224+
addHandleCss("mr:after", {
225+
left: touchHandleSize,
226+
right: touchHandleSize,
227227
top: `0`,
228228
bottom: `0`,
229229
});
230230
}
231231

232232
if (space.canResizeBottom) {
233233
if (space.height.size) {
234-
addCss("mb", {
234+
addHandleCss("mb", {
235235
top: `calc(${css(space.top, true)} + ${css(space.height, true)} - ${handleSize} + ${handleOffset})`,
236236
left: css(space.left),
237237
right: css(space.right),
238238
width: css(space.width),
239239
height: handleSize,
240240
});
241241
} else {
242-
addCss("mb", {
242+
addHandleCss("mb", {
243243
bottom: `calc(${css(space.bottom, true)} - ${handleOffset})`,
244244
left: css(space.left),
245245
right: css(space.right),
246246
width: css(space.width),
247247
height: handleSize,
248248
});
249249
}
250-
addCss("mb:after", {
250+
addHandleCss("mb:after", {
251251
top: `calc(${css(space.left, true)} - ${handleOffset})`,
252252
bottom: `-${touchHandleSize}`,
253253
left: `0`,
@@ -256,7 +256,7 @@ export function styleDefinition(space: ISpaceDefinition) {
256256
}
257257

258258
if (space.canResizeTopLeft) {
259-
addCss("mtl", {
259+
addHandleCss("mtl", {
260260
left: `calc(${css(space.left, true)} - ${handleOffset})`,
261261
top: css(space.top),
262262
width: handleSize,
@@ -266,14 +266,14 @@ export function styleDefinition(space: ISpaceDefinition) {
266266

267267
if (space.canResizeTopRight) {
268268
if (space.width.size) {
269-
addCss("mtr", {
269+
addHandleCss("mtr", {
270270
left: `calc(${css(space.left, true)} + ${css(space.width, true)} - ${handleSize} + ${handleOffset}`,
271271
top: css(space.top),
272272
width: handleSize,
273273
height: handleSize,
274274
});
275275
} else {
276-
addCss("mtr", {
276+
addHandleCss("mtr", {
277277
right: `calc(${css(space.right, true)} - ${handleOffset})`,
278278
top: css(space.top),
279279
width: handleSize,
@@ -284,14 +284,14 @@ export function styleDefinition(space: ISpaceDefinition) {
284284

285285
if (space.canResizeBottomLeft) {
286286
if (space.height.size) {
287-
addCss("mbl", {
287+
addHandleCss("mbl", {
288288
top: `calc(${css(space.top, true)} + ${css(space.height, true)} - ${handleSize} + ${handleOffset})`,
289289
left: css(space.left),
290290
width: handleSize,
291291
height: handleSize,
292292
});
293293
} else {
294-
addCss("mbl", {
294+
addHandleCss("mbl", {
295295
bottom: `calc(${css(space.bottom, true)} - ${handleOffset})`,
296296
left: css(space.left),
297297
width: handleSize,
@@ -302,14 +302,14 @@ export function styleDefinition(space: ISpaceDefinition) {
302302

303303
if (space.canResizeBottomRight) {
304304
if (space.height.size && space.width.size) {
305-
addCss("mbr", {
305+
addHandleCss("mbr", {
306306
left: `calc(${css(space.left, true)} + ${css(space.width, true)} - ${handleSize} + ${handleOffset}`,
307307
top: `calc(${css(space.top, true)} + ${css(space.height, true)} - ${handleSize} + ${handleOffset})`,
308308
width: handleSize,
309309
height: handleSize,
310310
});
311311
} else {
312-
addCss("mbr", {
312+
addHandleCss("mbr", {
313313
right: `calc(${css(space.right, true)} - ${handleOffset})`,
314314
bottom: `calc(${css(space.bottom, true)} - ${handleOffset})`,
315315
width: handleSize,
@@ -319,39 +319,55 @@ export function styleDefinition(space: ISpaceDefinition) {
319319
}
320320
} else {
321321
if (space.canResizeLeft) {
322-
cssElements.push(
323-
`#${space.id}-ml { right: calc(${css(space.right, true)} + ${css(space.width, true)} - ${handleOffset}px); width: ${
324-
space.handleSize
325-
}px; }`,
326-
);
327-
cssElements.push(`#${space.id}-ml:after { left: -${touchHandleSize}px; right: -${touchHandleSize}px; top: 0; bottom: 0; }`);
322+
addHandleCss("ml", {
323+
right: `calc(${css(space.right, true)} + ${css(space.width, true)} - ${handleOffset})`,
324+
width: handleSize,
325+
});
326+
addHandleCss("ml:after", {
327+
left: touchHandleSize,
328+
right: touchHandleSize,
329+
top: `0`,
330+
bottom: `0`,
331+
});
328332
}
329333

330334
if (space.canResizeTop) {
331-
cssElements.push(
332-
`#${space.id}-mt { bottom: calc(${css(space.bottom, true)} + ${css(space.height, true)} - ${handleOffset}px); height: ${
333-
space.handleSize
334-
}px; }`,
335-
);
336-
cssElements.push(`#${space.id}-mt:after { top: -${touchHandleSize}px; bottom: -${touchHandleSize}px; left: 0; right: 0; }`);
335+
addHandleCss("mt", {
336+
bottom: `calc(${css(space.bottom, true)} + ${css(space.height, true)} - ${handleOffset})`,
337+
height: handleSize,
338+
});
339+
addHandleCss("mt:after", {
340+
top: touchHandleSize,
341+
bottom: touchHandleSize,
342+
left: `0`,
343+
right: `0`,
344+
});
337345
}
338346

339347
if (space.canResizeRight) {
340-
cssElements.push(
341-
`#${space.id}-mr { left: calc(${css(space.left, true)} + ${css(space.width, true)} - ${handleOffset}px); width: ${
342-
space.handleSize
343-
}px; }`,
344-
);
345-
cssElements.push(`#${space.id}-mr:after { left: -${touchHandleSize}px; right: -${touchHandleSize}px; top: 0; bottom: 0; }`);
348+
addHandleCss("mr", {
349+
left: `calc(${css(space.left, true)} + ${css(space.width, true)} - ${handleOffset})`,
350+
width: handleSize,
351+
});
352+
addHandleCss("mr:after", {
353+
left: touchHandleSize,
354+
right: touchHandleSize,
355+
top: `0`,
356+
bottom: `0`,
357+
});
346358
}
347359

348360
if (space.canResizeBottom) {
349-
cssElements.push(
350-
`#${space.id}-mb { top: calc(${css(space.top, true)} + ${css(space.height, true)} - ${handleOffset}px); height: ${
351-
space.handleSize
352-
}px; }`,
353-
);
354-
cssElements.push(`#${space.id}-mb:after { top: -${touchHandleSize}px; bottom: -${touchHandleSize}px; left: 0; right: 0; }`);
361+
addHandleCss("mb", {
362+
top: `calc(${css(space.top, true)} + ${css(space.height, true)} - ${handleOffset})`,
363+
height: handleSize,
364+
});
365+
addHandleCss("mb:after", {
366+
top: touchHandleSize,
367+
bottom: touchHandleSize,
368+
left: `0`,
369+
right: `0`,
370+
});
355371
}
356372
}
357373

0 commit comments

Comments
 (0)