Skip to content

Commit b6a116a

Browse files
author
spoeck
committed
remove relative layout of dragable container
1 parent 7d6cae6 commit b6a116a

File tree

2 files changed

+99
-95
lines changed

2 files changed

+99
-95
lines changed

‎src/components/DragableContainer.tsx‎

Lines changed: 98 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -1,114 +1,117 @@
11
// prettier-ignore
22
import { makeStyles } from '@material-ui/core';
3-
import * as React from 'react';
4-
import { animated, useSpring } from 'react-spring';
5-
import { useDrag } from 'react-use-gesture';
3+
import * as React from "react";
4+
import { animated, useSpring } from "react-spring";
5+
import { useDrag } from "react-use-gesture";
66
interface Props {
7-
children: React.ReactNode;
8-
on: boolean;
9-
dragable?: boolean;
10-
dragRadius?: number;
11-
bounceRadius?: number;
12-
open?: boolean;
13-
bounceOnOpen?: boolean;
14-
bounceOnClose?: boolean;
15-
bounceDirection?: 'TOP' | 'BOTTOM' | 'LEFT' | 'RIGHT';
7+
children: React.ReactNode;
8+
on: boolean;
9+
dragable?: boolean;
10+
dragRadius?: number;
11+
bounceRadius?: number;
12+
open?: boolean;
13+
bounceOnOpen?: boolean;
14+
bounceOnClose?: boolean;
15+
bounceDirection?: "TOP" | "BOTTOM" | "LEFT" | "RIGHT";
1616
}
1717

1818
const DEFAULT_DRAG_RADIUS = 12;
1919
const DEFAULT_BOUNCE_RADIUS = 3;
2020

2121
export function DragableContainer(props: Props) {
22-
const {
23-
children,
24-
on,
25-
dragable,
26-
dragRadius,
27-
bounceRadius,
28-
open,
29-
bounceOnOpen,
30-
bounceOnClose,
31-
bounceDirection,
32-
} = props;
22+
const {
23+
children,
24+
on,
25+
dragable,
26+
dragRadius,
27+
bounceRadius,
28+
open,
29+
bounceOnOpen,
30+
bounceOnClose,
31+
bounceDirection,
32+
} = props;
3333

34-
if (on) {
35-
const [{ x, y, cursor }, set] = useSpring(() => ({
36-
x: 0,
37-
y: 0,
38-
config: { tension: 400, friction: 7, precision: 0.1 },
39-
cursor: 'pointer',
40-
}));
34+
if (on) {
35+
const [{ x, y, cursor }, set] = useSpring(() => ({
36+
x: 0,
37+
y: 0,
38+
config: { tension: 400, friction: 7, precision: 0.1 },
39+
cursor: "pointer",
40+
}));
4141

42-
const classes = useStyles(props);
42+
const classes = useStyles(props);
4343

44-
React.useEffect(() => {
45-
if ((open && bounceOnOpen) || (!open && bounceOnClose)) {
46-
const bRadius = bounceRadius ? bounceRadius : DEFAULT_BOUNCE_RADIUS;
47-
let x = bRadius;
48-
let y = bRadius;
49-
switch (bounceDirection) {
50-
case 'LEFT':
51-
x = -bRadius;
52-
y = 0;
53-
break;
54-
case 'RIGHT':
55-
x = bRadius;
56-
y = 0;
57-
break;
58-
case 'TOP':
59-
x = 0;
60-
y = -bRadius;
61-
break;
62-
case 'BOTTOM':
63-
x = 0;
64-
y = bRadius;
65-
break;
66-
}
67-
set({ x, y });
68-
setTimeout(() => set({ x: 0, y: 0 }), 100);
69-
}
70-
}, [open]);
44+
React.useEffect(() => {
45+
if ((open && bounceOnOpen) || (!open && bounceOnClose)) {
46+
const bRadius = bounceRadius ? bounceRadius : DEFAULT_BOUNCE_RADIUS;
47+
let x = bRadius;
48+
let y = bRadius;
49+
switch (bounceDirection) {
50+
case "LEFT":
51+
x = -bRadius;
52+
y = 0;
53+
break;
54+
case "RIGHT":
55+
x = bRadius;
56+
y = 0;
57+
break;
58+
case "TOP":
59+
x = 0;
60+
y = -bRadius;
61+
break;
62+
case "BOTTOM":
63+
x = 0;
64+
y = bRadius;
65+
break;
66+
}
67+
set({ x, y });
68+
setTimeout(() => set({ x: 0, y: 0 }), 100);
69+
}
70+
}, [open]);
7171

72-
// Creates a drag gesture
73-
const bind = useDrag(({ down, movement: [dX, dY] }) => {
74-
if (dragable) {
75-
const rMax = dragRadius ? dragRadius : DEFAULT_DRAG_RADIUS;
76-
const r = Math.sqrt(Math.pow(dX, 2) + Math.pow(dY, 2));
77-
// Find point along radius with rMax length
78-
// See: https://math.stackexchange.com/q/1630886
79-
if (r > rMax) {
80-
dX *= rMax / r;
81-
dY *= rMax / r;
82-
}
83-
set({
84-
x: down ? dX : 0,
85-
y: down ? dY : 0,
86-
immediate: down,
87-
cursor: down ? 'grabbing' : 'pointer',
88-
});
89-
}
90-
});
72+
// Creates a drag gesture
73+
const bind = useDrag(({ down, movement: [dX, dY] }) => {
74+
if (dragable) {
75+
const rMax = dragRadius ? dragRadius : DEFAULT_DRAG_RADIUS;
76+
const r = Math.sqrt(Math.pow(dX, 2) + Math.pow(dY, 2));
77+
// Find point along radius with rMax length
78+
// See: https://math.stackexchange.com/q/1630886
79+
if (r > rMax) {
80+
dX *= rMax / r;
81+
dY *= rMax / r;
82+
}
83+
set({
84+
x: down ? dX : 0,
85+
y: down ? dY : 0,
86+
immediate: down,
87+
cursor: down ? "grabbing" : "pointer",
88+
});
89+
}
90+
});
9191

92-
return (
93-
<div className={classes.root}>
94-
<animated.div {...bind()} className={classes.dragable} style={{ cursor: cursor, left: x, top: y }}>
95-
{children}
96-
</animated.div>
97-
</div>
98-
);
99-
} else {
100-
return <>{children}</>;
101-
}
92+
return (
93+
<div className={classes.root}>
94+
<animated.div
95+
{...bind()}
96+
className={classes.dragable}
97+
style={{ cursor: cursor, left: x, top: y }}
98+
>
99+
{children}
100+
</animated.div>
101+
</div>
102+
);
103+
} else {
104+
return <>{children}</>;
105+
}
102106
}
103107

104108
const useStyles = makeStyles({
105-
root: {
106-
position: 'relative',
107-
top: 0,
108-
left: 0,
109-
},
109+
root: {
110+
top: 0,
111+
left: 0,
112+
},
110113

111-
dragable: {
112-
position: 'absolute',
113-
},
114+
dragable: {
115+
position: "absolute",
116+
},
114117
});

‎src/components/Planet.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,7 @@ export function Planet(props: Props) {
104104
});
105105

106106
const onPlanet = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
107+
console.log("onPlanet 2");
107108
if (onClick) {
108109
onClick(e);
109110
} else {

0 commit comments

Comments
 (0)