ran
فارسی

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 منتقل شده روی پرده بماند.