کشیدن و رها کردن ویدجت ها و ایستگاه از پیش تنظیم

1) مفهوم و سناریوها

ویجت های کشیدن و رها کردن بلوک های تعاملی (کارت های گراف، جداول، فیلتر ها، دکمه های عمل) هستند که کاربر آزادانه بر روی بوم با اشاره به شبکه قرار می دهد. قالب ها و سبک های ذخیره شده (طرح + تم + پارامترها) که می توانند به سرعت اعمال شوند، به اشتراک گذاشته شوند و نسخه بندی شوند.

• مونتاژ داشبورد از بلوک های آماده (کارت های KPI، نمودار ها، فیلتر ها).
• تغییر سریع طرح از طریق ایستگاه از پیش تنظیم «جمع و جور»، «تجزیه و تحلیل»، «ارائه».
• Co-editing: محصول ویجت ها را قرار می دهد، تحلیلگر منابع را تنظیم می کند.
• انتشار فقط خواندنی برای شرکت کنندگان.

2) اصول معماری

1. Grid-first: موقعیت در ستون/ردیف منطقی (12/24)، پیکسل - مشتقات.
2. Snapping & Guides: راهنماهای مغناطیسی، چسبیده به مش و همسایگان، تراز کردن.
3. محدودیت آگاه: اندازه/ابعاد محدود کننده، دقیقه/حداکثر، قفل جنبه.
4. Safe-by-default: ذخیره خودکار مداوم، انتشار معاملات، لغو/بازسازی.
5. A11y-first: DnD از صفحه کلید و تغییرات صوتی.
6. زمان واقعی آماده: CRDT/OT برای جلسات چند نفره.
7. Themable: نشانه های طراحی، ایستگاه از پیش تنظیم تم، حالت های نور/تاریک/کنتراست.
8. قابل حمل: صادرات/واردات JSON/YAML ؛ نسخه بندی مدار.

3) مدل داده (ساده شده)

json
{
"id": "layout_01",
"name": "Analytics - Compact,"
"version": "2. 1. 0",
"grid": { "cols": 12, "rowHeight": 8, "gutter": 8, "margin": 16 },
"theme": { "preset": "light-pro", "tokens": { "radius": 12, "elevation": "soft" } },
"widgets": [
{
"id": "w_kpi_1",
"type": "kpi",
"title": "GGR",
"pos": { "x": 0, "y": 0, "w": 3, "h": 4, "z": 1 },
"constraints": { "minW": 2, "minH": 3, "lockAspect": false },
"props": { "format": "currency", "source": "ggr_daily" }
},
{
"id": "w_chart_1",
"type": "lineChart",
"title": "Deposits Trend",
"pos": { "x": 3, "y": 0, "w": 6, "h": 8, "z": 1 },
"props": { "source": "deposits", "legend": true }
},
{
"id": "w_table_1",
"type": "table",
"title": "Top Segments",
"pos": { "x": 9, "y": 0, "w": 3, "h": 12, "z": 2 },
"props": { "source": "segments_top", "pageSize": 12 }
}
],
"meta": { "createdBy": "dima", "updatedAt": "2025-11-03T17:55:00Z" }
}

4) شبکه، ضربه محکم و ناگهانی و راهنمایی

شبکه: 12 بلندگو برای دسکتاپ، 6 برای رایانه لوحی، 4 برای تلفن ؛ «ارتفاع ردیف» برای زمین عمودی پایدار یکسان است.

ضربه محکم و ناگهانی: ضربه محکم و ناگهانی به لبه/مراکز ؛ «آهن ربا» در 4/8 پیکسل ؛ راهنمایی های هوشمندانه هنگام نزدیک شدن به همسایگان

جریان خودکار: انتقال خودکار زیر در صورت برخورد ؛ الگوریتم «سقوط بلوک».
پاسخگویی: نقاط انفصال → «pos» جایگزین برای هر نقطه انفصال.

5) رویدادها و کشورهای DnD

События: 'drag', 'drag', 'drag', 'drop', 'resize' Start ',' resize ',' resize 'End', 'select', 'group', 'ungroup', 'reorder', 'undo', 'redo'.

• شبح/پیشنمایش-یک مسیر شفاف در حالی که کشیدن.
• متغیرهایی: مناطق مجاز (سبز)، ممنوع (قرمز).
• نقشه برخورد - محاسبه سریع سلول های اشغال شده (bitset/فاصله درخت).

6) بالا بردن، تراز، شاخص Z

Resise گرفتن در گوشه ها + نگه داشتن 'Shift' برای حفظ نسبت.
تراز گروه: «چپ/راست»، «مرکز»، «توزیع به طور مساوی».
سطوح Overlay: «z» با محدودیت محدوده، دکمه های جلو/عقب.

7) گروه ها، ظروف و لانه سازی

گروه ها: انتخاب چندگانه، کشیدن و رها کردن ترکیبی، هماهنگی گروه.
ظرف ویجت: زبانه ها، آکوردئون ها، چرخ فلک ها - آنها می دانند که چگونه ویجت های کودک را قبول کنند.
توقف کانتینر: شبکه خارجی ≠ داخلی (ستون های دیگر).

8) ایستگاه از پیش تنظیم (قالب) و نسخه

انواع ایستگاه از پیش تنظیم: طرح، تم، مجموعه ویجت، طرح + داده ها.
نسخه بندی: طرح های 'semver' و مهاجرت (نقشه زمینه، پیش فرض).
پیشنمایش و اعمال پیشنمایش قبل از اعمال.
ایستگاه از پیش تنظیم محدوده: شخصی، تیم، جهانی ؛ خواندن/ویرایش حقوق.
صادرات/واردات: JSON/YAML، امضای checksum، بررسی سازگاری نسخه.

9) دسترسی (A11y) و صفحه کلید

• 'Enter/Space' - انتقال را شروع کنید فلش - حرکت به فاصله شبکه ؛ 'Shift' + فلش - فاصله شتاب ؛ «ESC» - لغو.
• 'Ctrl/Cmd + G' - گروه ؛ 'Ctrl/Cmd + Shift + G' - گروه بندی کنید.
• 'Alt' - به طور موقت خاموش کردن ضربه محکم و ناگهانی به شبکه.
• صداپیشگی: "به (x, y) منتقل شد. چسبیده: در. پاسخ: بله/خیر"
• حلقه های تمرکز، دستگیره های بزرگ، مناطق قطره با توضیحات.

10) لمس و الگوهای تلفن همراه

مطبوعات طولانی (300-500 میلی ثانیه) برای شروع DnD.
اهداف افزایش یافته (حداقل 40-48 پیکسل).
نوار ابزار تطبیقی (بارانداز پایین).
حالت ویرایش: قفل پیمایش بوم، پیمایش خودکار عمودی هنگام حرکت به لبه.

11) اقدامات از ویدجت (ویدجت عملی)

ساخته شده در CTA (دکمه)، منوی زمینه، کشیدن کلون (تکثیر Alt).
«ایستگاه از پیش تنظیم سریع» برای ویجت (تراکم، افسانه، طرح رنگ).
حالت ها: بارگیری/خالی/خطا، خرد امن («داده ها عقب مانده است»).

12) همکاری و نشر

زمان واقعی: CRDT (به عنوان مثال، Yjs) یا OT (رویکرد Quill) - نمایندگان شرکت کننده، قفل گروه.
حقوق: «مالک»، «ویرایشگر»، «بیننده» ؛ انتشار یک تصویر لحظهای تغییرناپذیر.
جریان: پیش نویس → بررسی → انتشار ؛ مقایسه تغییرات (طرح بندی های مختلف).

13) خنثی کردن/بازگرداندن و ذخیره خودکار

Command bus: هر عملیات یک دستور با «do/undo» است.
ورود به سرویس گیرنده (در حافظه + تداوم دوره ای)، محدودیت طول.
ذخیره خودکار: هر N ثانیه/توسط «idle»، با نشانگر «Saved».

14) نشانه های دما و طراحی

json
{
"themeId": "light-pro",
"tokens": {
"fontScale": { "h1": 24, "h2": 18, "body": 14 },
"radius": 12,
"elevation": "soft",
"palette": { "primary": "#3366FF", "critical": "#E53935" }
}
}

تعویض تم ها بدون محاسبه مجدد طرح (فقط نشانه های بصری).
کنتراست AA/AAA، حالت کنتراست بالا، تم تیره با خاکستری صحیح.

15) عملکرد

رندر توسط لایه ها (canvas/webgl برای نمودارهای پیچیده، DOM برای کروم).
مجازی سازی لیست/جدول، دریچه گاز 'کشیدن' (16 ms)، requestAnimationFrame.
رندر تفاوت: فقط ویدجت های اصلاح شده را دوباره ترسیم کنید.
محاسبات و دستورالعمل های شمارش کش.

16) امنیت و حفاظت از محتوا

Sunbox برای ویدجت های HTML (iframe، CSP، پرچم های «sandbox»).

محدودیت قطره: انواع لیست سفید (فایل ها، لینک ها، ایستگاه از پیش تنظیم JSON) ؛ بررسی اندازه و محتوا

حقوق به ایستگاه از پیش تنظیم (RBAC/ABAC)، صادرات/واردات حسابرسی.

17) API ویجت (قرارداد)

ts interface Widget {
id: string;
type: string;
pos: { x:number; y:number; w:number; h:number; z:number };
constraints?: { minW?:number; minH?:number; maxW?:number; maxH?:number; lockAspect?:boolean };
props: Record<string, unknown>;
validate? (props): { ok: boolean; errors?: string[] };
onDrop? (dataTransfer): DropResult ;//support for external drop onAction? (actionId: string, payload?: any): void;
}

رویدادهای چرخه زندگی «mount»، «تغییر اندازه»، «visibilityChange» هستند.
تأیید اعتبار قبل از انتشار.

18) واردات/صادرات و مهاجرت

صادرات: «شبکه»، «ویدجت»، «موضوع»، «متا».
واردات: چک کردن نسخه های طرح، مهاجرت خودکار (نقشه زمینه/پیش فرض)، گزارش.
از پیش تعیین شده قفل فایل با هش برای اطمینان از یکپارچگی.

19) کلید های میانبر (توصیه می شود)

ناوبری: '←↑→↓' - حرکت ؛ 'Shift' + فلش - گام سریع.
دقت کنید: «دگرساز» + فلش.
عملیات: «Ctrl/Cmd + D» - تکراری ؛ 'Ctrl/Cmd + G' - گروه ؛ 'Ctrl/Cmd + Shift + G' - گروه بندی کنید.
سطوح: ['/'] - به عقب/جلو در z-index.
واگرد/باز کردن: 'Ctrl/Cmd + Z '/' Ctrl/Cmd + Shift + Z' (или 'Y').
از پیش تنظیم شده: "Ctrl/Cmd + 1.. 9 - به سرعت موارد ذخیره شده را اعمال کنید.

20) الگوهای UX

راهنماهای سریع در اولین راه اندازی (micro-onboarding برای 3-5 مرحله).
حالت توری: ضامن «توری نمایش/مخفی کردن».
نکات درون خطی در برخورد («در دسترس نیست: حداقل عرض ویجت = 3»).
Layout History: به نسخه قبلی باز می گردد.

21) طرح تست

واحد: محاسبه برخورد، ضربه زدن، اعتبار سنج محدودیت.
ادغام: ماوس DnD/شیر/صفحه کلید ؛ گروه بندی ها ؛ ظروف.
E2E: مونتاژ داشبورد از ابتدا، استفاده از پیش تعیین شده، چاپ و نشر، صادرات/واردات.
هرج و مرج: تاخیر رندر، از دست دادن ارتباط (زمان واقعی)، درگیری حقوق.
A11y: اسکریپت صفحه کلید، عمل SR صدا، کنتراست.

22) چک لیست پیاده سازی

• شبکه/نقطه انفصال و ضربه محکم و ناگهانی پیکربندی
• کار دقیق/گروهی/هم ترازی و آزمایش شده است
• صفحه کلید DnD و ScreenTips فعال شده است
• ذخیره خودکار، خنثی کردن/دوباره، تاریخچه طرح
• ایستگاه از پیش تنظیم: نسخه ها، حقوق، صادرات/واردات
• تم ها و نشانه های طراحی، حالت کنتراست بالا
• همکاری در زمان واقعی و حل تعارض
• محدودیت قطره، اعتبار فایل، HTML sandbox
• معیارها: تصویب، زمان قرار دادن اول، خطاهای برخورد

23) مینی سوالات متداول

چرا فقط یک شبکه، نه مختصات آزاد ؟

شبکه ساده تراز، coronavirus، قابلیت حمل و عملکرد از پیش تعیین شده را ساده می کند.

چگونه می توان طرح های مختلف را برای نقاط شکست ذخیره کرد ؟

هر ویجت دارای «pos» در نقطه انفصال (دسکتاپ/قرص/تلفن همراه) با خودکار سقوط به عقب.

چه چیزی را برای همکاری انتخاب کنید - OT یا CRDT ؟

CRDT برای آفلاین/درگیری آسان تر است. OT - مناسب برای عملیات متن خطی. برای طرح، CRDT اغلب گرفته شده است.

مجموع

خوب کشیدن و رها کردن ویدجت نه تنها "کشیدن و رها کردن. "اینها عبارتند از: شبکه دقیق و ضربه محکم و ناگهانی، گروه های راحت و هم ترازی، دسترسی به صفحه کلید، ایستگاه از پیش تنظیم پایدار با نسخه ها و صادرات، نشریات امن و همکاری. این را در اطراف یک مدل داده قابل اعتماد، یک UX خوب فکر شده و یک برنامه آزمایشی بسازید - و سازنده سریع، قابل فهم و مقاوم در برابر رشد محتوا و دستورات خواهد بود.