Skip to content

Commit ae965d8

Browse files
abelflopesabelflopes
committed
fix: positioning engine
1 parent 02418c3 commit ae965d8

File tree

3 files changed

+86
-50
lines changed

3 files changed

+86
-50
lines changed

‎packages/components/_provisional/src/dropdown/index.tsx‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export interface DropdownProps {
77
}
88

99
export const Dropdown = ({
10-
position = "bottom-center",
10+
position = "top-center",
1111
}: Readonly<DropdownProps>): React.ReactElement => {
1212
const [sizeToggle, setSizeToggle] = useState(true);
1313
const rootRef = useRef<HTMLButtonElement>(null);
@@ -27,13 +27,16 @@ export const Dropdown = ({
2727
<Layer elevation="popup">
2828
<p
2929
style={{
30-
...style,
3130
color: "blue",
3231
margin: 0,
3332
background: "#ccc",
3433
padding: 10,
3534
boxSizing: "border-box",
3635
overflow: "auto",
36+
outline: "1px solid red",
37+
outlineOffset: -2,
38+
opacity: 0.7,
39+
...style,
3740
}}>
3841
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt nostrum tenetur
3942
possimus fugiat in, iusto tempora accusantium eum quas enim beatae nihil qui quod
@@ -66,11 +69,12 @@ export const Dropdown = ({
6669
porro ab quidem cum, officiis ut facilis minima. Mollitia debitis, enim excepturi explicabo
6770
labore, inventore dignissimos eligendi laboriosam molestiae quos reiciendis repellendus.
6871
Beatae aliquid dolorem odit, laborum rem cupiditate culpa! Nesciunt saepe aliquam
69-
necessitatibus officiis dignissimos! Libero, illo dolorum ipsa recusandae facere quas quo
70-
temporibus natus, unde id at. Quo molestias quisquam qui, magnam eligendi in quis nesciunt,
71-
earum tenetur hic voluptatem iusto. Quae nemo minima pariatur tenetur natus laudantium
72-
perspiciatis! Rem recusandae dolorem quasi expedita dicta, maiores facilis vitae, officia
73-
ipsam a suscipit. Esse, repudiandae iste?
72+
necessitatibus officiis dignissimos!
73+
<div style={{ background: "#eee", height: 20, width: "150%" }} />
74+
Libero, illo dolorum ipsa recusandae facere quas quo temporibus natus, unde id at. Quo
75+
molestias quisquam qui, magnam eligendi in quis nesciunt, earum tenetur hic voluptatem iusto.
76+
Quae nemo minima pariatur tenetur natus laudantium perspiciatis! Rem recusandae dolorem quasi
77+
expedita dicta, maiores facilis vitae, officia ipsam a suscipit. Esse, repudiandae iste?
7478
</>
7579
);
7680
};

‎packages/components/_provisional/src/position-engine/position-engine-core.ts‎

Lines changed: 64 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -141,116 +141,137 @@ export class PositionEngine {
141141

142142
let parent = this.options.element.offsetParent;
143143

144-
let offsetTop = 0;
145-
let offsetLeft = 0;
146-
let scrollOffset = 0;
144+
let accOffsetTop = 0;
145+
let accOffsetLeft = 0;
146+
let accScrollTop = scrollTop;
147+
let accScrollLeft = scrollLeft;
147148

148149
/* eslint-disable no-console -- still in development */
149150

150151
console.clear();
151152

153+
console.group("Measure parent offset");
154+
152155
while (parent) {
153156
if (parent instanceof HTMLElement) {
154-
offsetTop += parent.offsetTop;
155-
offsetLeft += parent.offsetLeft;
156-
scrollOffset += parent.scrollHeight - parent.offsetHeight;
157-
158-
console.log("offsetParent", parent);
157+
accOffsetTop += parent.offsetTop;
158+
accOffsetLeft += parent.offsetLeft;
159+
accScrollTop += parent.scrollTop;
160+
accScrollLeft += parent.scrollLeft;
161+
162+
console.group("offsetParent", parent);
163+
console.log("position", window.getComputedStyle(parent).position);
164+
console.log("marginTop", window.getComputedStyle(parent).marginTop);
165+
console.log("paddingTop", window.getComputedStyle(parent).paddingTop);
166+
console.log("offsetTop", parent.offsetTop);
159167
console.log("offsetLeft", parent.offsetLeft);
160-
console.log(
161-
"top / height / scrollHeight / scrollTop",
162-
parent.offsetTop,
163-
parent.offsetHeight,
164-
parent.scrollHeight,
165-
parent.scrollTop,
166-
);
168+
console.log("offsetHeight", parent.offsetHeight);
169+
console.log("offsetWidth", parent.offsetWidth);
170+
console.log("clientHeight", parent.clientHeight);
171+
console.log("clientWidth", parent.clientWidth);
172+
console.log("scrollHeight", parent.scrollHeight);
173+
console.log("scrollTop", parent.scrollTop);
174+
console.log("scrollLengthTop", parent.scrollHeight - parent.offsetHeight);
175+
console.log("scrollWidth", parent.scrollWidth);
176+
console.log("scrollLeft", parent.scrollLeft);
177+
console.log("scrollLengthLeft", parent.scrollWidth - parent.offsetWidth);
178+
console.log("rect", parent.getBoundingClientRect());
179+
console.groupEnd();
167180
}
168181

169182
parent = parent instanceof HTMLElement ? parent.offsetParent : null;
170183
}
184+
console.groupEnd();
185+
186+
console.group("Acc ---------------------");
187+
console.log("accOffsetLeft", accOffsetLeft);
188+
console.log("accOffsetTop", accOffsetTop);
189+
console.log("accScrollLeft", accScrollLeft);
190+
console.log("accScrollTop", accScrollTop);
191+
console.groupEnd();
171192

172-
console.log("total offsetLeft", offsetLeft);
173-
console.log("total offsetTop", offsetTop);
174-
console.log("height", availableSpace["top-start"].y);
193+
console.group("Render ------------------");
194+
console.log("availableSpace", availableSpace);
175195
console.log("rect.top", rect.top);
176196
console.log("rect.bottom", rect.bottom);
177197
console.log("rect.height", rect.height);
178198
console.log("windowHeight", windowHeight);
199+
console.log("windowWidth", windowWidth);
179200
console.log("scrollTop", scrollTop);
180-
console.log("scrollOffset", scrollOffset);
201+
console.groupEnd();
181202

182203
/* eslint-enable no-console */
183204

184205
return {
185206
"top-start": {
186-
bottom: `${windowHeight - rect.top - scrollTop}px`,
187-
left: `${scrollLeft + rect.left}px`,
207+
bottom: `${windowHeight - rect.top - accScrollTop}px`,
208+
left: `${accScrollLeft + rect.left}px`,
188209
maxWidth: `${availableSpace["top-start"].x}px`,
189210
maxHeight: `${availableSpace["top-start"].y}px`,
190211
},
191212
"top-center": {
192-
bottom: `${windowHeight - rect.top - scrollTop}px`,
193-
left: `${scrollLeft + rect.left}px`,
213+
bottom: `${windowHeight - rect.top - accScrollTop}px`,
214+
left: `${accScrollLeft + rect.left - accOffsetLeft}px`,
194215
width: `${availableSpace["top-center"].x}px`,
195216
maxHeight: `${availableSpace["top-center"].y}px`,
196217
},
197218
"top-end": {
198-
bottom: `${windowHeight - rect.top - scrollTop}px`,
199-
right: `${windowWidth - rect.right - scrollLeft}px`,
219+
bottom: `${windowHeight - rect.top - accScrollTop}px`,
220+
right: `${windowWidth - rect.right - accScrollLeft}px`,
200221
maxWidth: `${availableSpace["top-end"].x}px`,
201222
maxHeight: `${availableSpace["top-end"].y}px`,
202223
},
203224
"right-start": {
204-
top: `${rect.top + scrollTop - offsetTop}px`,
205-
left: `${scrollLeft + rect.right - offsetLeft}px`,
225+
top: `${rect.top + accScrollTop - accOffsetTop}px`,
226+
left: `${accScrollLeft + rect.right - accOffsetLeft}px`,
206227
maxWidth: `${availableSpace["right-start"].x}px`,
207228
maxHeight: `${availableSpace["right-start"].y}px`,
208229
},
209230
"right-center": {
210-
top: `${rect.top + scrollTop - offsetTop}px`,
211-
left: `${scrollLeft + rect.right - offsetLeft}px`,
231+
top: `${rect.top + accScrollTop - accOffsetTop}px`,
232+
left: `${accScrollLeft + rect.right - accOffsetLeft}px`,
212233
maxWidth: `${availableSpace["right-center"].x}px`,
213234
height: `${availableSpace["right-center"].y}px`,
214235
},
215236
"right-end": {
216-
bottom: `${windowHeight - rect.bottom - scrollTop}px`,
217-
left: `${scrollLeft + rect.right - offsetLeft}px`,
237+
bottom: `${windowHeight - rect.bottom - accScrollTop + accOffsetTop}px`,
238+
left: `${accScrollLeft + rect.right - accOffsetLeft}px`,
218239
maxWidth: `${availableSpace["right-end"].x}px`,
219240
maxHeight: `${availableSpace["right-end"].y}px`,
220241
},
221242
"bottom-start": {
222-
top: `${scrollTop + rect.bottom - offsetTop}px`,
223-
left: `${scrollLeft + rect.left - offsetLeft}px`,
243+
top: `${accScrollTop + rect.bottom - accOffsetTop}px`,
244+
left: `${accScrollLeft + rect.left - accOffsetLeft}px`,
224245
maxWidth: `${availableSpace["bottom-start"].x}px`,
225246
maxHeight: `${availableSpace["bottom-start"].y}px`,
226247
},
227248
"bottom-center": {
228-
top: `${scrollTop + rect.bottom - offsetTop}px`,
229-
left: `${scrollLeft + rect.left - offsetLeft}px`,
249+
top: `${accScrollTop + rect.bottom - accOffsetTop}px`,
250+
left: `${accScrollLeft + rect.left - accOffsetLeft}px`,
230251
width: `${availableSpace["bottom-center"].x}px`,
231252
maxHeight: `${availableSpace["bottom-center"].y}px`,
232253
},
233254
"bottom-end": {
234-
top: `${scrollTop + rect.bottom - offsetTop}px`,
235-
right: `${windowWidth - rect.right - offsetLeft}px`,
255+
top: `${accScrollTop + rect.bottom - accOffsetTop}px`,
256+
right: `${windowWidth - rect.right - accOffsetLeft - accScrollLeft}px`,
236257
maxWidth: `${availableSpace["bottom-end"].x}px`,
237258
maxHeight: `${availableSpace["bottom-end"].y}px`,
238259
},
239260
"left-start": {
240-
top: `${rect.top + scrollTop - offsetTop}px`,
241-
right: `${windowWidth - scrollLeft - rect.left - offsetLeft}px`,
261+
top: `${rect.top + accScrollTop - accOffsetTop}px`,
262+
right: `${windowWidth - rect.left - accOffsetLeft - accScrollLeft}px`,
242263
maxWidth: `${availableSpace["left-start"].x}px`,
243264
maxHeight: `${availableSpace["left-start"].y}px`,
244265
},
245266
"left-center": {
246-
top: `${rect.top + scrollTop - offsetTop}px`,
247-
right: `${windowWidth - scrollLeft - rect.left - offsetLeft}px`,
267+
top: `${rect.top + accScrollTop - accOffsetTop}px`,
268+
right: `${windowWidth - rect.left - accOffsetLeft - accScrollLeft}px`,
248269
maxWidth: `${availableSpace["left-center"].x}px`,
249270
height: `${availableSpace["left-center"].y}px`,
250271
},
251272
"left-end": {
252-
bottom: `${windowHeight - rect.bottom - scrollTop}px`,
253-
right: `${windowWidth - scrollLeft - rect.left - offsetLeft}px`,
273+
bottom: `${windowHeight - rect.bottom - accScrollTop + accOffsetTop}px`,
274+
right: `${windowWidth - rect.left - accOffsetLeft - accScrollLeft}px`,
254275
maxWidth: `${availableSpace["left-end"].x}px`,
255276
maxHeight: `${availableSpace["left-end"].y}px`,
256277
},

‎packages/docs/stories/src/dropdown.stories.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,17 @@ const meta: Meta<typeof Dropdown> = {
1313
(Story): React.ReactElement => (
1414
<Manager>
1515
<Story />
16+
<div
17+
style={{
18+
background: "#fee",
19+
overflow: "scroll",
20+
width: "150%",
21+
height: 200,
22+
paddingLeft: 200,
23+
marginLeft: 200,
24+
}}>
25+
<Story />
26+
</div>
1627
</Manager>
1728
),
1829
],

0 commit comments

Comments
 (0)