computePlacement

یک تابلوی شناور (فهرست بازشو، پاپ‌اور، راهنمای ابزار) را نسبت به مستطیل یک لنگر می‌نشاند: اگر سمت دلخواه جا نداشته باشد و سمت مقابل جادارتر باشد، به سمت مقابل برمی‌گردد و سپس در راستای محور عرضی می‌لغزد تا درون یک کرانه بماند. همان کاری را می‌کند که میان‌افزارهای flip و shift در Floating UI، اما بی آن وابستگی.

هندسهٔ ناب: هرگز خودش به DOM دست نمی‌زند. نتیجه‌های getBoundingClientRect() را بدهید تا مختصاتی را که باید بنویسید پس بدهد.

کاربرد

import { computePlacement } from 'ranuts/utils';

const anchorRect = trigger.getBoundingClientRect();
const { top, left, placement } = computePlacement({
  anchor: anchorRect,
  floating: { width: panel.offsetWidth, height: panel.offsetHeight },
  placement: 'bottom',
  offset: 4,
});

panel.style.position = 'absolute';
panel.style.top = `${top + window.scrollY}px`;
panel.style.left = `${left + window.scrollX}px`;
// `placement` همان سمتی است که پس از برگرداندن واقعاً به کار رفته — از آن برای گزینش
// کلاس پویانمایی ورود یا جهت پیکان استفاده کنید.

API

computePlacement

پارامترها

پارامتر	توضیح	نوع	پیش‌فرض
options.anchor	مستطیل لنگر (ماشه)، در مختصات دیدگاه (مثلاً getBoundingClientRect())	{ top, left, width, height }	الزامی
options.floating	اندازهٔ خودِ تابلوی شناور	{ width, height }	الزامی
options.placement	سمت دلخواه. اگر جا نداشته باشد و سمت مقابل جادارتر باشد، به آن سو برمی‌گردد	'top' | 'bottom' | 'left' | 'right'	الزامی
options.offset	فاصله‌ای که میان لنگر و تابلوی شناور نگه داشته می‌شود (پیکسل)	number	0
options.boundary	ناحیه‌ای که تابلو باید درونش بماند، در مختصات دیدگاه	{ top, left, width, height }	دیدگاه پنجره
options.padding	کمترین فاصله‌ای که هنگام لغزاندن میان تابلو و لبهٔ کرانه می‌ماند (پیکسل)	number	8

بازگشت

آرگومان	توضیح	نوع
top	مقدار topِ تعیین‌شده، در همان فضای مختصات anchor	number
left	مقدار leftِ تعیین‌شده، در همان فضای مختصات anchor	number
placement	سمتی که پس از برگرداندن واقعاً به کار رفته	'top' | 'bottom' | 'left' | 'right'

یادداشت‌ها

1. مختصات سرتاسر نسبت به دیدگاه‌اند، در همان فضای anchor. اگر تابلو را با position: absolute نسبت به سند می‌نشانید، هنگام نوشتن سبک، scrollX و scrollY را خودتان بیفزایید (نمونهٔ بالا را ببینید).
2. بی چیدمان واقعی، نه برگرداندنی هست و نه لغزاندنی. وقتی پهنا یا بلندای anchor یا floating صفر باشد (jsdom که هرگز چیدمان واقعی نمی‌کند، یا تابلویی که پیش از ته‌نشین شدن محتوایش خوانده شده)، محاسبهٔ فضا در هر فراخوانی برخوردی خیالی «کشف» می‌کند. از این رو computePlacement برگرداندن و لغزاندن را یکسره کنار می‌گذارد و همان placementِ دلخواهِ فراخواننده را دست‌نخورده برمی‌گرداند.
3. اگر تابلو از خودِ کرانه بزرگ‌تر باشد، لغزاندن انجام نمی‌شود: مهار کردنش تنها آن را از سوی دیگر بیشتر از پرده بیرون می‌راند.
4. r-popover و r-select در ranui در درون از آن بهره می‌برند تا فهرست بازشویی که به body منتقل شده روی پرده بماند.