Skip to content

Commit 9a0224f

Browse files
aeagleaeagle
authored
Merge pull request #135 from aeagle/feature/127-corner-resize
Feature/127 corner resize
2 parents 197f54e + 4755420 commit 9a0224f

18 files changed

+765
-345
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
}

‎package-lock.json‎

Lines changed: 80 additions & 103 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/Custom.tsx‎

Lines changed: 26 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { Space } from "./Space";
44
import * as PropTypes from "prop-types";
55
import { IReactSpaceCommonProps } from "../core-react";
66
import { anchoredProps, IAnchorProps } from "./Anchored";
7-
import { omit } from '../core-utils';
7+
import { omit } from "../core-utils";
88

99
type ICustomProps = Omit<IReactSpaceCommonProps & IAnchorProps, "size"> & {
1010
type?: Type;
@@ -23,23 +23,26 @@ type ICustomProps = Omit<IReactSpaceCommonProps & IAnchorProps, "size"> & {
2323
resizeTypes?: ResizeType[];
2424
};
2525

26-
const customProps = omit({
27-
...anchoredProps,
28-
...{
29-
type: PropTypes.oneOf([Type.Positioned, Type.Fill, Type.Anchored]),
26+
const customProps = omit(
27+
{
28+
...anchoredProps,
29+
...{
30+
type: PropTypes.oneOf([Type.Positioned, Type.Fill, Type.Anchored]),
3031

31-
anchor: PropTypes.oneOf([AnchorType.Left, AnchorType.Top, AnchorType.Right, AnchorType.Bottom]),
32-
anchorSize: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
32+
anchor: PropTypes.oneOf([AnchorType.Left, AnchorType.Top, AnchorType.Right, AnchorType.Bottom]),
33+
anchorSize: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
3334

34-
left: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
35-
top: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
36-
right: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
37-
bottom: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
38-
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
39-
height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
40-
resizeTypes: PropTypes.array,
35+
left: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
36+
top: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
37+
right: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
38+
bottom: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
39+
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
40+
height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
41+
resizeTypes: PropTypes.array,
42+
},
4143
},
42-
}, 'size');
44+
"size",
45+
);
4346

4447
export const Custom: React.FC<ICustomProps> = ({
4548
children,
@@ -67,10 +70,14 @@ export const Custom: React.FC<ICustomProps> = ({
6770
bottom: bottom,
6871
width: width,
6972
height: height,
70-
leftResizable: resizeTypes && resizeTypes.includes(ResizeType.Left),
71-
topResizable: resizeTypes && resizeTypes.includes(ResizeType.Top),
72-
rightResizable: resizeTypes && resizeTypes.includes(ResizeType.Right),
73-
bottomResizable: resizeTypes && resizeTypes.includes(ResizeType.Bottom),
73+
leftResizable: resizeTypes && (resizeTypes.includes(ResizeType.Left) || resizeTypes.includes(ResizeType.All)),
74+
topResizable: resizeTypes && (resizeTypes.includes(ResizeType.Top) || resizeTypes.includes(ResizeType.All)),
75+
rightResizable: resizeTypes && (resizeTypes.includes(ResizeType.Right) || resizeTypes.includes(ResizeType.All)),
76+
bottomResizable: resizeTypes && (resizeTypes.includes(ResizeType.Bottom) || resizeTypes.includes(ResizeType.All)),
77+
topLeftResizable: resizeTypes && (resizeTypes.includes(ResizeType.TopLeft) || resizeTypes.includes(ResizeType.All)),
78+
topRightResizable: resizeTypes && (resizeTypes.includes(ResizeType.TopRight) || resizeTypes.includes(ResizeType.All)),
79+
bottomLeftResizable: resizeTypes && (resizeTypes.includes(ResizeType.BottomLeft) || resizeTypes.includes(ResizeType.All)),
80+
bottomRightResizable: resizeTypes && (resizeTypes.includes(ResizeType.BottomRight) || resizeTypes.includes(ResizeType.All)),
7481
};
7582
} else {
7683
if (anchor === AnchorType.Left) {

‎src/components/Positioned.tsx‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,19 +19,25 @@ interface IPositionedProps extends IReactSpaceCommonProps {
1919
export const Positioned: React.FC<IPositionedProps> = ({ left, top, right, bottom, width, height, resizable, ...props }) => {
2020
const resizeTypes = resizable || [];
2121

22+
console.log(resizeTypes);
23+
2224
return (
2325
<Space
2426
{...props}
2527
type={Type.Positioned}
2628
position={{
2729
left: left,
28-
leftResizable: resizeTypes.includes(ResizeType.Left),
2930
top: top,
30-
topResizable: resizeTypes.includes(ResizeType.Top),
3131
right: right,
32-
rightResizable: resizeTypes.includes(ResizeType.Right),
3332
bottom: bottom,
34-
bottomResizable: resizeTypes.includes(ResizeType.Bottom),
33+
leftResizable: resizeTypes.includes(ResizeType.Left) || resizeTypes.includes(ResizeType.All),
34+
topResizable: resizeTypes.includes(ResizeType.Top) || resizeTypes.includes(ResizeType.All),
35+
rightResizable: resizeTypes.includes(ResizeType.Right) || resizeTypes.includes(ResizeType.All),
36+
bottomResizable: resizeTypes.includes(ResizeType.Bottom) || resizeTypes.includes(ResizeType.All),
37+
topLeftResizable: resizeTypes.includes(ResizeType.TopLeft) || resizeTypes.includes(ResizeType.All),
38+
topRightResizable: resizeTypes.includes(ResizeType.TopRight) || resizeTypes.includes(ResizeType.All),
39+
bottomLeftResizable: resizeTypes.includes(ResizeType.BottomLeft) || resizeTypes.includes(ResizeType.All),
40+
bottomRightResizable: resizeTypes.includes(ResizeType.BottomRight) || resizeTypes.includes(ResizeType.All),
3541
width: width,
3642
height: height,
3743
}}>

‎src/components/stories/02-components/BottomResizable.stories.mdx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ Anchored resizable space on the bottom edge of it's parent.
1818
<Canvas>
1919
<Story name="Default (%)">
2020
<ViewPort>
21-
<BottomResizable style={green} size="50%" trackSize={true} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
21+
<BottomResizable style={green} size="50%" touchHandleSize={20} trackSize={true} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
2222
{description("Bottom resizable")}
2323
</BottomResizable>
2424
</ViewPort>
@@ -30,7 +30,7 @@ Anchored resizable space on the bottom edge of it's parent.
3030
<Canvas>
3131
<Story name="Default (px)">
3232
<ViewPort>
33-
<BottomResizable style={green} size={300} trackSize={true} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
33+
<BottomResizable style={green} size={300} touchHandleSize={20} trackSize={true} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
3434
{description("Bottom resizable")}
3535
</BottomResizable>
3636
</ViewPort>
@@ -42,7 +42,7 @@ Anchored resizable space on the bottom edge of it's parent.
4242
<Canvas>
4343
<Story name="With resize constraints">
4444
<ViewPort>
45-
<BottomResizable style={green} size={300} trackSize={true} minimumSize={150} maximumSize={450} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
45+
<BottomResizable style={green} size={300} touchHandleSize={20} trackSize={true} minimumSize={150} maximumSize={450} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
4646
{description("Bottom resizable")}
4747
</BottomResizable>
4848
</ViewPort>
@@ -54,7 +54,7 @@ Anchored resizable space on the bottom edge of it's parent.
5454
<Canvas>
5555
<Story name="Scrollable">
5656
<ViewPort>
57-
<BottomResizable style={green} size={300} scrollable={true} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
57+
<BottomResizable style={green} size={300} touchHandleSize={20} scrollable={true} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
5858
{lorem}
5959
</BottomResizable>
6060
</ViewPort>

‎src/components/stories/02-components/LeftResizable.stories.mdx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ Anchored resizable space on the left edge of it's parent.
1818
<Canvas>
1919
<Story name="Default (%)">
2020
<ViewPort>
21-
<LeftResizable style={green} size="50%" trackSize={true} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
21+
<LeftResizable style={green} size="50%" touchHandleSize={20} trackSize={true} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
2222
{description("Left resizable")}
2323
</LeftResizable>
2424
</ViewPort>
@@ -30,7 +30,7 @@ Anchored resizable space on the left edge of it's parent.
3030
<Canvas>
3131
<Story name="Default (px)">
3232
<ViewPort>
33-
<LeftResizable style={green} size={300} trackSize={true} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
33+
<LeftResizable style={green} size={300} touchHandleSize={20} trackSize={true} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
3434
{description("Left resizable")}
3535
</LeftResizable>
3636
</ViewPort>
@@ -42,7 +42,7 @@ Anchored resizable space on the left edge of it's parent.
4242
<Canvas>
4343
<Story name="With resize constraints">
4444
<ViewPort>
45-
<LeftResizable style={green} size={300} trackSize={true} minimumSize={150} maximumSize={450} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
45+
<LeftResizable style={green} size={300} touchHandleSize={20} trackSize={true} minimumSize={150} maximumSize={450} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
4646
{description("Left resizable")}
4747
</LeftResizable>
4848
</ViewPort>
@@ -54,7 +54,7 @@ Anchored resizable space on the left edge of it's parent.
5454
<Canvas>
5555
<Story name="Scrollable">
5656
<ViewPort>
57-
<LeftResizable style={green} size={300} scrollable={true} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
57+
<LeftResizable style={green} size={300} touchHandleSize={20} scrollable={true} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
5858
{lorem}
5959
</LeftResizable>
6060
</ViewPort>

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

Lines changed: 55 additions & 7 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.Left, ResizeType.Top, ResizeType.Bottom, ResizeType.Right ]} 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>
@@ -121,7 +169,7 @@ Absolutely positioned space within it's parent with top / left / right / bottom
121169
)
122170
}
123171
return <ViewPort>
124-
<Positioned style={green} left={200} top={200} right={200} bottom={200} trackSize={true} resizable={[ ResizeType.Left, ResizeType.Top, ResizeType.Bottom, ResizeType.Right ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
172+
<Positioned style={green} left={200} top={200} right={200} bottom={200} touchHandleSize={20} trackSize={true} resizable={[ ResizeType.All ]} onResizeStart={action('onResizeStart')} onResizeEnd={action('onResizeEnd')}>
125173
<DragHandle />
126174
</Positioned>
127175
</ViewPort>

0 commit comments

Comments
 (0)