Move element bounds calculations out of container-block? #610

J4v4Scr1pt · 2023-06-22T17:09:01Z

J4v4Scr1pt
Jun 22, 2023

Hi!

This may be a really stupid question but Im calculating the bounds on a component I'm creating. This works as long as I dont place the component inside some div deeper down the page Html hierarchy. Then the bounds is calculated based on it's closest containing block. But my component uses position: fixed, this should take it out of the document flow, and no other parent element has a breaking css (like transform, filter, etc.)
Is there any way of telling useGesture to base it bounds calculation on the window/viewport rather than its closest parent container?

This is a big component will provide the necessary parts of it.

import { createUseGesture, dragAction, hoverAction } from "@use-gesture/react";
import { useTransition, animated, useSpring, config } from "@react-spring/web";
import { useFloating, shift, offset, flip } from "@floating-ui/react-dom";
...other imports

const Wrapper = styled(animated.div)`
	display: flex;
	cursor: pointer;
	z-index: 99999;
	position: fixed;
	touch-action: none;
	user-select: none;
	box-shadow: ${shadow.overlay};
	height: ${spacingIndex * 7}px;
	width: ${spacingIndex * 7}px;
	border-radius: 50%;
	border: 4px solid ${colors.white};
	justify-content: center;
	align-items: center;
`;

....... other code

const DraggableButton = ({ draggableButtonConfig }) => {
        const winX = window.innerWidth || 0;
	const winY = window.innerHeight || 0;
		........... other code
		
	const [{ wrapperX, wrapperY, wrapperScale, wrapperBackground }, wrapperApi] = useSpring(() => ({
		wrapperX: winX && winX > 100 ? winX - 100 : 0,
		wrapperY: winY && winY > 170 ? winY - 170 : 0,
		wrapperScale: 1,
		wrapperBackground: colors.white,
	}));
	........... other code
	
	const bind = useGesture(
       
       ....... other settings

	{
			drag: {
				from: () => [wrapperX.get(), wrapperY.get()],
				bounds: () => {
					const vw = window.innerWidth || 0;
					const vh = window.innerHeight || 0;
					return { left: 0, right: vw - 100, top: 0, bottom: vh - 100 };
				},
				rubberband: true,
				filterTaps: true,
			},
		}
	)
		........... other code
	
	return (
		<>
			{transitionsButton(
				(styles, item) =>
					item && (
						<Wrapper
							{...bind()}
							style={{
								x: wrapperX,
								y: wrapperY,
								scale: open ? 0.9 : wrapperScale,
								background: open
									? draggableButtonConfig.buttonHoverBackgroundColor || colors.lightYellow
									: wrapperBackground,
								...styles,
							}}
							ref={reference}>
						....... other code

This image shows the parent containers and where the components calculations is based on:

<body>
	<div id="Page">
		<DraggableButton />
		<div id="MainContent">
			<DraggableButton />
			<div id="SubContent">
				<DraggableButton />
			</div>
		</div>
	</div>
</body>

If there is anything other I need to provide or I explained badly please let me know 😊!

dbismut · 2023-06-23T17:31:04Z

dbismut
Jun 23, 2023
Maintainer

Hi, you'll have more chances that someone answers if you format your code using syntax highlighting and even more if you provide a sandbox.

1 reply

J4v4Scr1pt Jun 25, 2023
Author

Thx, will fix this :)

J4v4Scr1pt · 2023-06-25T09:42:19Z

J4v4Scr1pt
Jun 25, 2023
Author

Working sandbox:
https://codesandbox.io/s/cranky-yonath-cxz3f2?file=/src/styles.css

The other two draggbleButtons is ouside of the main page and you need to zoom out to see them.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Move element bounds calculations out of container-block? #610

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 2 comments 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Move element bounds calculations out of container-block? #610

Uh oh!

Uh oh!

J4v4Scr1pt Jun 22, 2023

Replies: 2 comments · 1 reply

Uh oh!

dbismut Jun 23, 2023 Maintainer

Uh oh!

J4v4Scr1pt Jun 25, 2023 Author

Uh oh!

J4v4Scr1pt Jun 25, 2023 Author

J4v4Scr1pt
Jun 22, 2023

Replies: 2 comments 1 reply

dbismut
Jun 23, 2023
Maintainer

J4v4Scr1pt Jun 25, 2023
Author

J4v4Scr1pt
Jun 25, 2023
Author