Skip to content

Commit 3570e00

Browse files
aeagleaeagle
committed
Fix anchored resize handles
1 parent 4461685 commit 3570e00

File tree

4 files changed

+190
-22
lines changed

4 files changed

+190
-22
lines changed

‎src/components/stories/02-components/Resizable.Percentage.stories.mdx

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import { Meta, Story, Canvas, Props } from "@storybook/addon-docs";
2+
import { withKnobs } from "@storybook/addon-knobs";
3+
import { action } from '@storybook/addon-actions';
4+
import { ViewPort, BottomResizable, TopResizable, RightResizable, LeftResizable } from "../../";
5+
import { green, description, lorem } from "../Utils";
6+
import { CommonHeader, PropsTable, StandardProps, AnchoredProps, ResizableProps } from "../Utils";
7+
8+
<CommonHeader />
9+
10+
<Meta title="Components/Resizable/By percentage" component={BottomResizable} />
11+
12+
## Resizable
13+
14+
Anchored resizable spaces by percentage size.
15+
16+
### Bottom resizable
17+
18+
<Canvas>
19+
<Story name="Bottom">
20+
<ViewPort>
21+
<BottomResizable style={green} size="50%" touchHandleSize={20} trackSize={true} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
22+
{description("Bottom resizable")}
23+
</BottomResizable>
24+
</ViewPort>
25+
</Story>
26+
</Canvas>
27+
28+
### Top resizable
29+
30+
<Canvas>
31+
<Story name="Top">
32+
<ViewPort>
33+
<TopResizable style={green} size="50%" touchHandleSize={20} trackSize={true} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
34+
{description("Top resizable")}
35+
</TopResizable>
36+
</ViewPort>
37+
</Story>
38+
</Canvas>
39+
40+
### Left resizable
41+
42+
<Canvas>
43+
<Story name="Left">
44+
<ViewPort>
45+
<LeftResizable style={green} size="50%" touchHandleSize={20} trackSize={true} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
46+
{description("Left resizable")}
47+
</LeftResizable>
48+
</ViewPort>
49+
</Story>
50+
</Canvas>
51+
52+
### Right resizable
53+
54+
<Canvas>
55+
<Story name="Right">
56+
<ViewPort>
57+
<RightResizable style={green} size="50%" touchHandleSize={20} trackSize={true} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
58+
{description("Right resizable")}
59+
</RightResizable>
60+
</ViewPort>
61+
</Story>
62+
</Canvas>
63+
64+
### Properties
65+
66+
<Story name="Properties">
67+
<PropsTable>
68+
<ResizableProps />
69+
<AnchoredProps />
70+
<StandardProps />
71+
</PropsTable>
72+
</Story>

‎src/components/stories/02-components/Resizable.Pixel.stories.mdx

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import { Meta, Story, Canvas, Props } from "@storybook/addon-docs";
2+
import { withKnobs } from "@storybook/addon-knobs";
3+
import { action } from '@storybook/addon-actions';
4+
import { ViewPort, BottomResizable, TopResizable, RightResizable, LeftResizable } from "../../";
5+
import { green, description, lorem } from "../Utils";
6+
import { CommonHeader, PropsTable, StandardProps, AnchoredProps, ResizableProps } from "../Utils";
7+
8+
<CommonHeader />
9+
10+
<Meta title="Components/Resizable/By pixel" component={BottomResizable} />
11+
12+
## Resizable
13+
14+
Anchored resizable spaces by pixel size.
15+
16+
### Bottom resizable
17+
18+
<Canvas>
19+
<Story name="Bottom">
20+
<ViewPort>
21+
<BottomResizable style={green} size={250} touchHandleSize={20} trackSize={true} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
22+
{description("Bottom resizable")}
23+
</BottomResizable>
24+
</ViewPort>
25+
</Story>
26+
</Canvas>
27+
28+
### Top resizable
29+
30+
<Canvas>
31+
<Story name="Top">
32+
<ViewPort>
33+
<TopResizable style={green} size={250} touchHandleSize={20} trackSize={true} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
34+
{description("Top resizable")}
35+
</TopResizable>
36+
</ViewPort>
37+
</Story>
38+
</Canvas>
39+
40+
### Left resizable
41+
42+
<Canvas>
43+
<Story name="Left">
44+
<ViewPort>
45+
<LeftResizable style={green} size={250} touchHandleSize={20} trackSize={true} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
46+
{description("Left resizable")}
47+
</LeftResizable>
48+
</ViewPort>
49+
</Story>
50+
</Canvas>
51+
52+
### Right resizable
53+
54+
<Canvas>
55+
<Story name="Right">
56+
<ViewPort>
57+
<RightResizable style={green} size={250} touchHandleSize={20} trackSize={true} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
58+
{description("Right resizable")}
59+
</RightResizable>
60+
</ViewPort>
61+
</Story>
62+
</Canvas>
63+
64+
### Properties
65+
66+
<Story name="Properties">
67+
<PropsTable>
68+
<ResizableProps />
69+
<AnchoredProps />
70+
<StandardProps />
71+
</PropsTable>
72+
</Story>

‎src/core-react.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ 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";
2019

2120
// WORKAROUND for React18 strict mode
2221
// https://blog.ag-grid.com/avoiding-react-18-double-mount/

‎src/core-utils.ts

Lines changed: 46 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -184,13 +184,22 @@ export function styleDefinition(space: ISpaceDefinition) {
184184
: space.height.size;
185185

186186
if (space.canResizeLeft) {
187-
addHandleCss("ml", {
188-
left: `calc(${css(space.left, true)} - ${handleOffset})`,
189-
top: css(space.top),
190-
bottom: css(space.bottom),
191-
width: handleSize,
192-
height: css(space.height),
193-
});
187+
if (space.anchor) {
188+
addHandleCss("ml", {
189+
right: `calc(${css(space.right, true)} + ${css(space.width)} - ${handleOffset})`,
190+
top: `0`,
191+
bottom: `0`,
192+
width: handleSize,
193+
});
194+
} else {
195+
addHandleCss("ml", {
196+
left: `calc(${css(space.left, true)} - ${handleOffset})`,
197+
top: css(space.top),
198+
bottom: css(space.bottom),
199+
width: handleSize,
200+
height: css(space.height),
201+
});
202+
}
194203
addHandleCss("ml:after", {
195204
left: touchHandleSize,
196205
right: touchHandleSize,
@@ -200,29 +209,45 @@ export function styleDefinition(space: ISpaceDefinition) {
200209
}
201210

202211
if (space.canResizeTop) {
203-
addHandleCss("mt", {
204-
top: `calc(${css(space.top, true)} - ${handleOffset})`,
205-
left: css(space.left),
206-
right: css(space.right),
207-
width: css(space.width),
208-
height: handleSize,
209-
});
210-
if (widthOrHeightSpecified()) {
212+
if (space.anchor) {
213+
addHandleCss("mt", {
214+
left: `0`,
215+
right: `0`,
216+
bottom: `calc(${css(space.bottom)} + ${css(space.height)} - ${handleOffset})`,
217+
height: handleSize,
218+
});
211219
addHandleCss("mt:after", {
212220
top: touchHandleSize,
213221
bottom: touchHandleSize,
214222
left: touchHandleSize,
215-
width: `calc(${css(space.width, true)} - ${handleOffset}) + ${negativeTouchHandleSize}`,
223+
width: css(space.width),
216224
right: touchHandleSize,
217225
});
218226
} else {
219-
addHandleCss("mt:after", {
220-
top: touchHandleSize,
221-
bottom: touchHandleSize,
222-
left: touchHandleSize,
227+
addHandleCss("mt", {
228+
top: `calc(${css(space.top, true)} - ${handleOffset})`,
229+
left: css(space.left),
230+
right: css(space.right),
223231
width: css(space.width),
224-
right: touchHandleSize,
232+
height: handleSize,
225233
});
234+
if (widthOrHeightSpecified()) {
235+
addHandleCss("mt:after", {
236+
top: touchHandleSize,
237+
bottom: touchHandleSize,
238+
left: touchHandleSize,
239+
width: `calc(${css(space.width, true)} - ${handleOffset}) + ${negativeTouchHandleSize}`,
240+
right: touchHandleSize,
241+
});
242+
} else {
243+
addHandleCss("mt:after", {
244+
top: touchHandleSize,
245+
bottom: touchHandleSize,
246+
left: touchHandleSize,
247+
width: css(space.width),
248+
right: touchHandleSize,
249+
});
250+
}
226251
}
227252
}
228253

0 commit comments

Comments
 (0)