-
-
Notifications
You must be signed in to change notification settings - Fork 317
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add a default position x,y of "center" #437
Comments
@bokuweb can you please update to react-draggable 3.2.0 or higher ? That will fix this issue! Thanks! |
It appears there was an inadvertent breaking change in 3.2.0. Prior to 3.2.0, if a defaultPosition were present, it became the In 3.2.0, the I'm going to pull the release for now and work out how to fix this. I may end up renaming |
I've added my comments here: react-grid-layout/react-draggable#391 |
@bokuweb I believe this is now possible thanks to this PR: react-grid-layout/react-draggable#393 We can now set a positionOffset using percentages <Draggable positionOffset={{x: '-10%', y: '-10%'}} {...dragHandlers}>
<div className="box">
{'I have a default position based on percents {x: \'-10%\', y: \'-10%\'}, so I\'m slightly offset.'}
</div>
</Draggable> |
Hello, Do you know where I come from |
板凳宽板凳长 |
@tnrich Thanks :) Is it enough to update to react-draggable3.3? |
Hi @bokuweb |
@tnrich Thanks for your investigation :) I'll try it later. Unfortunately I can not have enough time to fix it(I have a lot of tasks 😭 ) Please wait ... |
@bokuweb any chance you could find some time to tackle this one? Thank you! |
Hi @bokuweb |
Here's a link to the hand rolled solution I came up with (in dialog form) to get around this: https://teselagen.github.io/teselagen-react-components/#/ResizableDraggableDialog And here's a link to the source code: Basically I ended up controlling all the state and do manual checks of the window size and the contents of the dialog: import React from "react";
import { Dialog, Classes } from "@blueprintjs/core";
import { Rnd } from "react-rnd";
import "./style.css";
const defaultDialogWidth = 400;
const defaultDialogHeight = 450;
export default class ResizableDraggableDialog extends React.Component {
componentDidMount() {
window.addEventListener("resize", this.onWindowResize);
this.setDefaults();
setTimeout(() => {
this.setDefaults();
}, 0);
}
state = {
x: 0,
y: 0,
width: defaultDialogWidth,
height: defaultDialogHeight
};
setDefaults = () => {
const { width, height } = this.props;
const { windowWidth, windowHeight } = this.getWindowWidthAndHeight();
let heightToUse;
if (height) {
heightToUse = height;
} else {
heightToUse = (document.querySelector(".bp3-dialog-body") || {})
.scrollHeight;
if (heightToUse) {
heightToUse = heightToUse + 60;
} else {
heightToUse = defaultDialogHeight;
}
}
let widthToUse;
if (width) {
widthToUse = width;
} else {
widthToUse = defaultDialogWidth;
}
this.setState({
x: Math.round(Math.max((windowWidth - widthToUse) / 2, 0)),
y: Math.round(Math.max((windowHeight - heightToUse) / 2, 0)),
width: Math.min(widthToUse, windowWidth),
height: Math.min(Math.max(defaultDialogHeight, heightToUse), windowHeight)
});
};
onWindowResize = () => {
this.setDefaults();
};
componentWillUnmount() {
window.removeEventListener("resize", this.onWindowResize);
}
getWindowWidthAndHeight = () => {
const w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName("body")[0],
windowWidth = w.innerWidth || e.clientWidth || g.clientWidth,
windowHeight = w.innerHeight || e.clientHeight || g.clientHeight;
return {
windowWidth,
windowHeight: windowHeight - 20 //add a small correction here
};
};
render() {
const { width, height, RndProps, ...rest } = this.props;
const { windowWidth, windowHeight } = this.getWindowWidthAndHeight();
return (
<div
className="tg-bp3-dialog-resizable-draggable"
style={{ top: 0, left: 0, position: "fixed" }}
>
<Rnd
enableResizing={{
bottomLeft: true,
bottomRight: true,
topLeft: true,
topRight: true
}}
maxHeight={windowHeight}
maxWidth={windowWidth}
bounds="window"
size={{ width: this.state.width, height: this.state.height }}
position={{ x: this.state.x, y: this.state.y }}
onDragStop={(e, d) => {
this.setState({ x: d.x, y: d.y });
}}
onResizeStop={(e, direction, ref, delta, position) => {
this.setState({
width: ref.style.width,
height: ref.style.height,
...position
});
}}
dragHandleClassName={Classes.DIALOG_HEADER}
{...RndProps}
>
<Dialog
enforceFocus={false}
hasBackdrop={false}
usePortal={false}
canEscapeKeyClose={true}
{...rest}
/>
</Rnd>
</div>
);
}
} |
Hey there,
I want to make a dialog that sizes to the elements within it but am having trouble doing that AND getting the dialog to be centered on the page.
It would be awesome if we could pass something like:
That way the dialog could be centered and that expands to fit the elements inside (up to its specified bounds).
Thanks @bokuweb !
The text was updated successfully, but these errors were encountered: