CanvasSurface — بوم تعاملی

CanvasSurface فقط ظرف ویرایشگرهای بوم‌محور است: ، ، ، پس‌زمینه و شبکهٔ اختیاری از توکن‌ها. پان، زوم، انتخاب و جابه‌جایی با مصرف‌کننده است. برای چیدمان معمولی از Layout استفاده کنید.

وضعیت: beta · لایه: ۲ () · کد:

کد قابل کپی

TSX

import { CanvasSurface } from '@tokapps/primitives';<CanvasSurface grid="dots" gridSize={24} majorEvery={5} role="application" aria-label="بوم طراحی" style={{ blockSize: 320 }}>  {/* عناصر بوم با موقعیت مطلق */}</CanvasSurface>

شبکهٔ خطی:

TSX

<CanvasSurface grid="lines" gridSize={16} majorEvery={4} aria-label="بوم خطی" />

همهٔ پیکربندی‌ها

پراپ	نوع	پیش‌فرض	توضیح
	· ·		شبکهٔ تزئینی (، با الگوی SVG و توکن، بدون گرادیان)
	عدد (px)		اندازهٔ خانهٔ فرعی
	عدد		هر چند خانه یک خط/نقطهٔ اصلی؛ = بدون major
			تگ جایگزین

توکن‌ها

توکن	کاربرد
	پس‌زمینهٔ بوم
·	شبکهٔ فرعی و اصلی
·	انتخاب عنصر
·	دستگیرهٔ تغییر اندازه
	خط راهنمای چسبیدن
·	کادر انتخاب گروهی
	هدف رها کردن
	شبح عنصر در حال کشیدن
< < < <	مقیاس لایه‌بندی

خطوط کنشی (انتخاب، دستگیره، راهنما، کادر، هدف رها) روی حداقل ۳:۱ هستند و آن را در همهٔ تم‌ها می‌سنجد. رنگ هرگز تنها نشانه نیست؛ شکل و حاشیه را هم بگذارید.

معافیت نگهبان تعامل

CanvasSurface خودکار می‌گذارد. داخل این ناحیه نگهبان TDS جلوی و را نمی‌گیرد (کشیدن و منوی راست‌کلیک با بوم)، اما انتخاب متن بسته می‌ماند و هویت همچنان است. برای ناحیهٔ دلخواه:

TSX

<div data-tds-interactive="canvas">…</div>

جزئیات: انتخاب متن و کشیدن و ARCH.md §۲۲.

دسترس‌پذیری

پان/زوم لمسی مرورگر را روی بوم می‌بندد؛ معادل کیبوردی برای هر کنش بوم الزامی است.
نقش و برچسب ( یا و ) را مصرف‌کننده می‌دهد.
شبکه در چاپ نمایش داده نمی‌شود.