Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fixed issue where the resize cursor did not appear on the left hand side of the widget (#6380)

Browse Source
This commit is contained in:
haojin111 2021-08-09 20:51:13 +08:00 committed by GitHub
parent ee33a556d3
commit f4d4199183
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 43 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/client/src/components/editorComponents/ResizeStyledComponents.tsx
View File

@ -106,7 +106,7 @@ export const TopLeftHandleStyles = styled.div`
${CornerHandleStyles};
left: -${CORNER_RESIZE_HANDLE_WIDTH / 2}px;
top: -${CORNER_RESIZE_HANDLE_WIDTH / 2}px;
cursor: ew-resize;
cursor: nw-resize;
`;
export const TopRightHandleStyles = styled.div`
${CornerHandleStyles};

85
app/client/src/resizable/index.tsx
View File

@ -156,6 +156,20 @@ export const Resizable = forwardRef(function Resizable(
});
}
if (props.handles.top) {
handles.push({
dragCallback: (x: number, y: number) => {
setNewDimensions({
width: newDimensions.width,
height: props.componentHeight - y,
y: y,
x: newDimensions.x,
});
},
component: props.handles.top,
});
}
if (props.handles.right) {
handles.push({
dragCallback: (x: number) => {
@ -184,6 +198,34 @@ export const Resizable = forwardRef(function Resizable(
});
}
if (props.handles.topLeft) {
handles.push({
dragCallback: (x: number, y: number) => {
setNewDimensions({
width: props.componentWidth - x,
height: props.componentHeight - y,
x: x,
y: y,
});
},
component: props.handles.topLeft,
});
}
if (props.handles.topRight) {
handles.push({
dragCallback: (x: number, y: number) => {
setNewDimensions({
width: props.componentWidth + x,
height: props.componentHeight - y,
x: newDimensions.x,
y: y,
});
},
component: props.handles.topRight,
});
}
if (props.handles.bottomRight) {
handles.push({
dragCallback: (x: number, y: number) => {
@ -211,49 +253,6 @@ export const Resizable = forwardRef(function Resizable(
component: props.handles.bottomLeft,
});
}
if (props.handles.topRight) {
handles.push({
dragCallback: (x: number, y: number) => {
setNewDimensions({
width: props.componentWidth + x,
height: props.componentHeight - y,
x: newDimensions.x,
y: y,
});
},
component: props.handles.topRight,
});
}
if (props.handles.topLeft) {
handles.push({
dragCallback: (x: number, y: number) => {
setNewDimensions({
width: props.componentWidth - x,
height: props.componentHeight - y,
x: x,
y: y,
});
},
component: props.handles.topLeft,
});
}
if (props.handles.top) {
handles.push({
dragCallback: (x: number, y: number) => {
setNewDimensions({
width: newDimensions.width,
height: props.componentHeight - y,
y: y,
x: newDimensions.x,
});
},
component: props.handles.top,
});
}
const onResizeStop = () => {
togglePointerEvents(true);
props.onStop(