Move element placement calculations out of container-block? #2167

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

J4v4Scr1pt
Jun 22, 2023

Hi!

This may be a really stupid question but Im calculating where I should place 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 placement 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 useSpring to base it placment 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
		
	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 😊!

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

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

Move element placement calculations out of container-block? #2167

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment

{{title}}

Select a reply

Move element placement calculations out of container-block? #2167

J4v4Scr1pt Jun 22, 2023

Replies: 1 comment

J4v4Scr1pt Jun 25, 2023 Author

J4v4Scr1pt
Jun 22, 2023

J4v4Scr1pt
Jun 25, 2023
Author