Skip to content

Commit 4461685

Browse files
aeagleaeagle
committed
Handle changes
1 parent c815208 commit 4461685

File tree

6 files changed

+262
-354
lines changed

6 files changed

+262
-354
lines changed

‎.storybook/preview-head.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,10 @@
2424
background-color: red !important;
2525
opacity: 0.5;
2626
}
27+
.spaces-resize-handle:after {
28+
background-color: green !important;
29+
opacity: 0.5;
30+
}
2731
.innerZoomElementWrapper .spaces-fullpage-layout {
2832
position: absolute !important;
2933
}

‎src/components/stories/02-components/Positioned.Resizable.TopRightBottomLeft.stories.mdx

Lines changed: 54 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ Absolutely positioned space within it's parent with top / left / right / bottom
2929
<Story name="Resize handles (all sides)">
3030
{() => {
3131
return <ViewPort>
32-
<Positioned style={green} left={200} top={200} right={200} bottom={200} trackSize={true} resizable={[ ResizeType.All ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
32+
<Positioned style={green} left={200} top={200} right={200} bottom={200} touchHandleSize={20} trackSize={true} resizable={[ ResizeType.All ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
3333
{description("Positioned")}
3434
</Positioned>
3535
</ViewPort>
@@ -41,7 +41,7 @@ Absolutely positioned space within it's parent with top / left / right / bottom
4141
<Story name="Resize handles (left)">
4242
{() => {
4343
return <ViewPort>
44-
<Positioned style={green} left={200} top={200} right={200} bottom={200} trackSize={true} resizable={[ ResizeType.Left ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
44+
<Positioned style={green} left={200} top={200} right={200} bottom={200} touchHandleSize={20} trackSize={true} resizable={[ ResizeType.Left ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
4545
{description("Positioned")}
4646
</Positioned>
4747
</ViewPort>
@@ -53,7 +53,7 @@ Absolutely positioned space within it's parent with top / left / right / bottom
5353
<Story name="Resize handles (top)">
5454
{() => {
5555
return <ViewPort>
56-
<Positioned style={green} left={200} top={200} right={200} bottom={200} trackSize={true} resizable={[ ResizeType.Top ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
56+
<Positioned style={green} left={200} top={200} right={200} bottom={200} touchHandleSize={20} trackSize={true} resizable={[ ResizeType.Top ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
5757
{description("Positioned")}
5858
</Positioned>
5959
</ViewPort>
@@ -65,7 +65,7 @@ Absolutely positioned space within it's parent with top / left / right / bottom
6565
<Story name="Resize handles (right)">
6666
{() => {
6767
return <ViewPort>
68-
<Positioned style={green} left={200} top={200} right={200} bottom={200} trackSize={true} resizable={[ ResizeType.Right ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
68+
<Positioned style={green} left={200} top={200} right={200} bottom={200} touchHandleSize={20} trackSize={true} resizable={[ ResizeType.Right ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
6969
{description("Positioned")}
7070
</Positioned>
7171
</ViewPort>
@@ -77,7 +77,55 @@ Absolutely positioned space within it's parent with top / left / right / bottom
7777
<Story name="Resize handles (bottom)">
7878
{() => {
7979
return <ViewPort>
80-
<Positioned style={green} left={200} top={200} right={200} bottom={200} trackSize={true} resizable={[ ResizeType.Bottom ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
80+
<Positioned style={green} left={200} top={200} right={200} bottom={200} touchHandleSize={20} trackSize={true} resizable={[ ResizeType.Bottom ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
81+
{description("Positioned")}
82+
</Positioned>
83+
</ViewPort>
84+
}}
85+
</Story>
86+
</Canvas>
87+
88+
<Canvas>
89+
<Story name="Resize handles (top-left)">
90+
{() => {
91+
return <ViewPort>
92+
<Positioned style={green} left={200} top={200} right={200} bottom={200} touchHandleSize={20} trackSize={true} resizable={[ ResizeType.TopLeft ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
93+
{description("Positioned")}
94+
</Positioned>
95+
</ViewPort>
96+
}}
97+
</Story>
98+
</Canvas>
99+
100+
<Canvas>
101+
<Story name="Resize handles (top-right)">
102+
{() => {
103+
return <ViewPort>
104+
<Positioned style={green} left={200} top={200} right={200} bottom={200} touchHandleSize={20} trackSize={true} resizable={[ ResizeType.TopRight ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
105+
{description("Positioned")}
106+
</Positioned>
107+
</ViewPort>
108+
}}
109+
</Story>
110+
</Canvas>
111+
112+
<Canvas>
113+
<Story name="Resize handles (bottom-left)">
114+
{() => {
115+
return <ViewPort>
116+
<Positioned style={green} left={200} top={200} right={200} bottom={200} touchHandleSize={20} trackSize={true} resizable={[ ResizeType.BottomLeft ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
117+
{description("Positioned")}
118+
</Positioned>
119+
</ViewPort>
120+
}}
121+
</Story>
122+
</Canvas>
123+
124+
<Canvas>
125+
<Story name="Resize handles (bottom-right)">
126+
{() => {
127+
return <ViewPort>
128+
<Positioned style={green} left={200} top={200} right={200} bottom={200} touchHandleSize={20} trackSize={true} resizable={[ ResizeType.BottomRight ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
81129
{description("Positioned")}
82130
</Positioned>
83131
</ViewPort>
@@ -99,7 +147,7 @@ Absolutely positioned space within it's parent with top / left / right / bottom
99147
)
100148
}
101149
return <ViewPort>
102-
<Positioned style={green} left={200} top={200} right={200} bottom={200} trackSize={true}>
150+
<Positioned style={green} left={200} top={200} right={200} bottom={200} touchHandleSize={20} trackSize={true}>
103151
<DragHandle />
104152
</Positioned>
105153
</ViewPort>

‎src/components/stories/02-components/Positioned.Resizable.WidthHeight.stories.mdx

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ Absolutely positioned space within it's parent with width and height specified.
2929
<Story name="Resize handles (all sides)">
3030
{() => {
3131
return <ViewPort>
32-
<Positioned style={green} left={200} top={200} width={400} height={300} trackSize={true} resizable={[ ResizeType.All ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
32+
<Positioned style={green} left={200} top={200} width={400} height={300} touchHandleSize={20} trackSize={true} resizable={[ ResizeType.All ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
3333
{description("Positioned")}
3434
</Positioned>
3535
</ViewPort>
@@ -38,10 +38,10 @@ Absolutely positioned space within it's parent with width and height specified.
3838
</Canvas>
3939

4040
<Canvas>
41-
<Story name="Resize handles (left only)">
41+
<Story name="Resize handles (left)">
4242
{() => {
4343
return <ViewPort>
44-
<Positioned style={green} left={200} top={200} width={400} height={300} trackSize={true} resizable={[ ResizeType.Left ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
44+
<Positioned style={green} left={200} top={200} width={400} height={300} touchHandleSize={20} trackSize={true} resizable={[ ResizeType.Left ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
4545
{description("Positioned")}
4646
</Positioned>
4747
</ViewPort>
@@ -50,10 +50,10 @@ Absolutely positioned space within it's parent with width and height specified.
5050
</Canvas>
5151

5252
<Canvas>
53-
<Story name="Resize handles (top only)">
53+
<Story name="Resize handles (top)">
5454
{() => {
5555
return <ViewPort>
56-
<Positioned style={green} left={200} top={200} width={400} height={300} trackSize={true} resizable={[ ResizeType.Top ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
56+
<Positioned style={green} left={200} top={200} width={400} height={300} touchHandleSize={20} trackSize={true} resizable={[ ResizeType.Top ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
5757
{description("Positioned")}
5858
</Positioned>
5959
</ViewPort>
@@ -62,10 +62,10 @@ Absolutely positioned space within it's parent with width and height specified.
6262
</Canvas>
6363

6464
<Canvas>
65-
<Story name="Resize handles (right only)">
65+
<Story name="Resize handles (right)">
6666
{() => {
6767
return <ViewPort>
68-
<Positioned style={green} left={200} top={200} width={400} height={300} trackSize={true} resizable={[ ResizeType.Right ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
68+
<Positioned style={green} left={200} top={200} width={400} height={300} touchHandleSize={20} trackSize={true} resizable={[ ResizeType.Right ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
6969
{description("Positioned")}
7070
</Positioned>
7171
</ViewPort>
@@ -74,10 +74,10 @@ Absolutely positioned space within it's parent with width and height specified.
7474
</Canvas>
7575

7676
<Canvas>
77-
<Story name="Resize handles (bottom only)">
77+
<Story name="Resize handles (bottom)">
7878
{() => {
7979
return <ViewPort>
80-
<Positioned style={green} left={200} top={200} width={400} height={300} trackSize={true} resizable={[ ResizeType.Bottom ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
80+
<Positioned style={green} left={200} top={200} width={400} height={300} touchHandleSize={20} trackSize={true} resizable={[ ResizeType.Bottom ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
8181
{description("Positioned")}
8282
</Positioned>
8383
</ViewPort>
@@ -86,10 +86,10 @@ Absolutely positioned space within it's parent with width and height specified.
8686
</Canvas>
8787

8888
<Canvas>
89-
<Story name="Resize handles (top-left only)">
89+
<Story name="Resize handles (top-left)">
9090
{() => {
9191
return <ViewPort>
92-
<Positioned style={green} left={200} top={200} width={400} height={300} trackSize={true} resizable={[ ResizeType.TopLeft ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
92+
<Positioned style={green} left={200} top={200} width={400} height={300} touchHandleSize={20} trackSize={true} resizable={[ ResizeType.TopLeft ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
9393
{description("Positioned")}
9494
</Positioned>
9595
</ViewPort>
@@ -98,10 +98,10 @@ Absolutely positioned space within it's parent with width and height specified.
9898
</Canvas>
9999

100100
<Canvas>
101-
<Story name="Resize handles (top-right only)">
101+
<Story name="Resize handles (top-right)">
102102
{() => {
103103
return <ViewPort>
104-
<Positioned style={green} left={200} top={200} width={400} height={300} trackSize={true} resizable={[ ResizeType.TopRight ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
104+
<Positioned style={green} left={200} top={200} width={400} height={300} touchHandleSize={20} trackSize={true} resizable={[ ResizeType.TopRight ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
105105
{description("Positioned")}
106106
</Positioned>
107107
</ViewPort>
@@ -110,10 +110,10 @@ Absolutely positioned space within it's parent with width and height specified.
110110
</Canvas>
111111

112112
<Canvas>
113-
<Story name="Resize handles (bottom-left only)">
113+
<Story name="Resize handles (bottom-left)">
114114
{() => {
115115
return <ViewPort>
116-
<Positioned style={green} left={200} top={200} width={400} height={300} trackSize={true} resizable={[ ResizeType.BottomLeft ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
116+
<Positioned style={green} left={200} top={200} width={400} height={300} touchHandleSize={20} trackSize={true} resizable={[ ResizeType.BottomLeft ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
117117
{description("Positioned")}
118118
</Positioned>
119119
</ViewPort>
@@ -122,10 +122,10 @@ Absolutely positioned space within it's parent with width and height specified.
122122
</Canvas>
123123

124124
<Canvas>
125-
<Story name="Resize handles (bottom-right only)">
125+
<Story name="Resize handles (bottom-right)">
126126
{() => {
127127
return <ViewPort>
128-
<Positioned style={green} left={200} top={200} width={400} height={300} trackSize={true} resizable={[ ResizeType.BottomRight ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
128+
<Positioned style={green} left={200} top={200} width={400} height={300} touchHandleSize={20} trackSize={true} resizable={[ ResizeType.BottomRight ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
129129
{description("Positioned")}
130130
</Positioned>
131131
</ViewPort>
@@ -147,7 +147,7 @@ Absolutely positioned space within it's parent with width and height specified.
147147
)
148148
}
149149
return <ViewPort>
150-
<Positioned style={green} left={200} top={200} width={400} height={300} trackSize={true}>
150+
<Positioned style={green} left={200} top={200} width={400} height={300} touchHandleSize={20} trackSize={true}>
151151
<DragHandle />
152152
</Positioned>
153153
</ViewPort>

‎src/core-react.ts

Lines changed: 34 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import { coalesce, shortuuid } from "./core-utils";
1616
import { ResizeSensor } from "css-element-queries";
1717
import * as PropTypes from "prop-types";
1818
import { useEffect, useRef, useState } from "react";
19+
import { Space } from "./components/Space";
1920

2021
// WORKAROUND for React18 strict mode
2122
// https://blog.ag-grid.com/avoiding-react-18-double-mount/
@@ -198,88 +199,45 @@ export interface IResizeHandleProps {
198199
onTouchStart: (e: React.TouchEvent<HTMLElement>) => void;
199200
}
200201

202+
const resizeSetup = [
203+
{ id: "ml", className: "resize-left", resizeType: ResizeType.Left, condition: (space: ISpaceDefinition) => space.canResizeLeft },
204+
{ id: "mr", className: "resize-right", resizeType: ResizeType.Right, condition: (space: ISpaceDefinition) => space.canResizeRight },
205+
{ id: "mt", className: "resize-top", resizeType: ResizeType.Top, condition: (space: ISpaceDefinition) => space.canResizeTop },
206+
{ id: "mb", className: "resize-bottom", resizeType: ResizeType.Bottom, condition: (space: ISpaceDefinition) => space.canResizeBottom },
207+
{ id: "mtl", className: "resize-top-left", resizeType: ResizeType.TopLeft, condition: (space: ISpaceDefinition) => space.canResizeTopLeft },
208+
{ id: "mtr", className: "resize-top-right", resizeType: ResizeType.TopRight, condition: (space: ISpaceDefinition) => space.canResizeTopRight },
209+
{
210+
id: "mbl",
211+
className: "resize-bottom-left",
212+
resizeType: ResizeType.BottomLeft,
213+
condition: (space: ISpaceDefinition) => space.canResizeBottomLeft,
214+
},
215+
{
216+
id: "mbr",
217+
className: "resize-bottom-right",
218+
resizeType: ResizeType.BottomRight,
219+
condition: (space: ISpaceDefinition) => space.canResizeBottomRight,
220+
},
221+
];
222+
201223
export function useSpaceResizeHandles(store: ISpaceStore, space: ISpaceDefinition) {
202224
const mouseHandles: IResizeHandleProps[] = [];
203225

204-
if (space.canResizeLeft) {
205-
mouseHandles.push({
206-
id: `${space.id}-ml`,
207-
key: "left",
208-
className: `spaces-resize-handle resize-left`,
209-
onMouseDown: (event) => store.startMouseResize(ResizeType.Left, space, event),
210-
onTouchStart: (event) => store.startTouchResize(ResizeType.Left, space, event),
211-
});
212-
}
213-
214-
if (space.canResizeRight) {
215-
mouseHandles.push({
216-
id: `${space.id}-mr`,
217-
key: "right",
218-
className: `spaces-resize-handle resize-right`,
219-
onMouseDown: (event) => store.startMouseResize(ResizeType.Right, space, event),
220-
onTouchStart: (event) => store.startTouchResize(ResizeType.Right, space, event),
221-
});
222-
}
223-
224-
if (space.canResizeTop) {
225-
mouseHandles.push({
226-
id: `${space.id}-mt`,
227-
key: "top",
228-
className: `spaces-resize-handle resize-top`,
229-
onMouseDown: (event) => store.startMouseResize(ResizeType.Top, space, event),
230-
onTouchStart: (event) => store.startTouchResize(ResizeType.Top, space, event),
231-
});
232-
}
233-
234-
if (space.canResizeBottom) {
235-
mouseHandles.push({
236-
id: `${space.id}-mb`,
237-
key: "bottom",
238-
className: `spaces-resize-handle resize-bottom`,
239-
onMouseDown: (event) => store.startMouseResize(ResizeType.Bottom, space, event),
240-
onTouchStart: (event) => store.startTouchResize(ResizeType.Bottom, space, event),
241-
});
242-
}
243-
244-
if (space.canResizeTopLeft) {
245-
mouseHandles.push({
246-
id: `${space.id}-mtl`,
247-
key: "top-left",
248-
className: `spaces-resize-handle resize-top-left`,
249-
onMouseDown: (event) => store.startMouseResize(ResizeType.Left, space, event),
250-
onTouchStart: (event) => store.startTouchResize(ResizeType.Left, space, event),
251-
});
252-
}
253-
254-
if (space.canResizeTopRight) {
255-
mouseHandles.push({
256-
id: `${space.id}-mtr`,
257-
key: "top-right",
258-
className: `spaces-resize-handle resize-top-right`,
259-
onMouseDown: (event) => store.startMouseResize(ResizeType.Right, space, event),
260-
onTouchStart: (event) => store.startTouchResize(ResizeType.Right, space, event),
261-
});
262-
}
263-
264-
if (space.canResizeBottomLeft) {
226+
const setupResizeHandle = (id: string, className: string, resizeType: ResizeType) => {
265227
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),
228+
id: `${space.id}-${id}`,
229+
key: id,
230+
className: `spaces-resize-handle ${className}`,
231+
onMouseDown: (event) => store.startMouseResize(resizeType, space, event),
232+
onTouchStart: (event) => store.startTouchResize(resizeType, space, event),
271233
});
272-
}
234+
};
273235

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-
}
236+
resizeSetup.forEach((resizeItem) => {
237+
if (resizeItem.condition(space)) {
238+
setupResizeHandle(resizeItem.id, resizeItem.className, resizeItem.resizeType);
239+
}
240+
});
283241

284242
return {
285243
mouseHandles,

0 commit comments

Comments
 (0)