גרירת וידג 'טים וזריקה

1) קונספט ותרחישים

Grag & Drop widgets הם בלוקים אינטראקטיביים (כרטיסי גרף, טבלאות, מסננים, כפתורי פעולה) שהמשתמש מציב בחופשיות על הבד עם התייחסות לרשת. פריסות וסגנונות (פריסה + ערכת נושא + פרמטרים) שניתן ליישם במהירות, לשתף ולשנות.

• הרכבה של לוח מחוונים מבלוקים מוכנים (כרטיסי KPI, גרפים, מסננים).
• שינוי מהיר של פריסה דרך המצגות ”קומפקט”, ”אנליטיקה”, ”פרזנטציה”.
• עריכה משותפת: המוצר ממקם וידג 'טים, האנליסט מגדיר מקורות.
• קריאה בלבד פרסום לבעלי עניין.

2) עקרונות אדריכליים

1. גריד-פירסט: מיקום בטורים לוגיים/שורות (12/24), פיקסלים - נגזרות.
2. מדריכים: מדריכים מגנטיים, דבקים ברשת ושכנים, מתיישרים.
3. מודעת למעצמה: גודל/היבט מגביל, מין/מקס, היבט מנעול.
4. בטוח על ידי ברירת מחדל: אוטוסייב רציף, הוצאה לאור עסקית, ביטול/redo.
5. A11y-first: דנ "ד מהמקלדת והשמעת שינויים.
6. זמן אמת מוכן: CRDT/OT עבור הפעלות מרובות משתתפים.
7. נושא: אסימונים עיצוב, ערכות נושא, מצבי אור/כהה/ניגוד.
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 לטלפונים; ”Rowhite” הוא אותו הדבר עבור המגרש אנכי יציב.
צילום: סנאפ לקצוות/מרכזים; ”מגנטים” ב4/8 px; מדריכים חכמים כאשר מתקרבים לשכנים.
זרימה אוטומטית: העברה אוטומטית למטה במקרה של התנגשות; אלגוריתם ”בלוקים נופלים”.
תגובה: נקודות שבירה = ”פוס” אלטרנטיבי לכל נקודת שבירה.

5) אירועי דנ "א ומצבים

”דראג סטארט”, ”דראג 'אובר”, ”Dragover”, ”Drop”, ”ressizStart',” Rezize ”,” RezezEnd', ”self”, ”ungroup”, ”render”, ”לבטל”, ”redo”.

• שביל שקוף בזמן גרירה.
• בעלי מקומות: אזורים מורשים (ירוק), אסורים (אדום).
• מפת התנגשות - חישוב מהיר של תאים כבושים (bitset/interval tree).

6) להעלות, ליישר, z-index

לחדש אחיזה בפינות + Hold 'Shift' לשמור על פרופורציות.
יישור הקבוצה: ”שמאל/ימין”, ”מרכז”, ”התפלג באופן שווה”.
רמות כיסוי: 'z' עם הגבלת טווח, כפתורים קדמיים/אחוריים.

7) קבוצות, מכולות וקינון

קבוצות: בחירה מרובה, גרירה וצניחה משולבים, יישור קבוצתי.
מיכל וידג 'ט: לשוניות, אקורדיונים, קרוסלות - הם יודעים איך לקבל ווידג' טים לילדים.
עצירות מיכל: רשת חיצונית * * פנימית (עמודות אחרות).

8) קדימות (תבניות) וגרסאות

סוגים של קדימות: פריסה, ערכת נושא, וידג 'ט, פריסה + נתונים.
Versioning: ”semver” מזימות ונדידה (מפת שדה, ברירת מחדל).
תצוגה מקדימה & הפעל-תצוגה מקדימה לפני הפעלה.
נסקרו מראש: אישי, צוות, גלובלי; זכויות קריאה/עריכה.
ייצוא/ייבוא: JSON/YAML, חתימת checksum, בדיקת תאימות גרסה.

9) נגישות (A11y) ומקלדת

• 'הזן/מרחב' - להתחיל את ההעברה; חצים - לעבור למרווח רשת; ”הזזה” + חצים - מרווח מואץ; ”esc” - לבטל.
• 'Ctrl/CMD + G' - קבוצה; Ctrl/CMD + Shift + G - ungroup.
• 'Alt' - זמנית לכבות מצלם לרשת.
• Voice Acting SR: "עבר ל (X, Y). דבק: על. קונפליקט: כן/לא"
• טבעות מיקוד, ידיות דיוק גדולות, אזורי ירידה עם תיאור.

10) תבניות מגע וניידות

לחץ ארוך (300-500 ms) להתחלת DND.
מטרות מוגברות (מינימום 40-48 px).
סרגלי כלים אדפטיביים (הרציף התחתון).
מצב עריכה: מנעול גלילת בד, גלילה אוטומטית אנכית בעת מעבר לקצה.

11) פעולות מווידג 'טים (וידג' טים)

CTA מובנה (כפתור), תפריט הקשר, שיבוט גרירה (Alt-החזקת כפילות).
”קדימות מהירה” עבור וידג 'ט (צפיפות, אגדה, ערכת צבעים).
קובע: טעינה/ריקה/שגיאה, תלוש מאובטח (”הנתונים מפגרים”).

12) שיתוף פעולה והוצאה לאור

זמן ריאליטי: CRDT (לדוגמה, Yjs) או OT (התקרבות קולמוס) - קורסים משתתפים, מנעולי קבוצה.
זכויות: ”בעלים”, ”עורך”, ”צופה”; לפרסם תמונה בלתי ניתנת לשינוי.
זרמים: traft # review publishing; השוואה של שינויים (פריסות חדות).

13) ביטול/רידו ואוטוסייב

פקודת אוטובוס: כל פעולה היא פקודה עם ”דו/בטל”.
התחבר ללקוח (in-memory + persistant), גבול האורך.
חיסכון אוטומטי: כל N שניות/על ידי 'Idle', עם אינדיקטור ”שמור”.

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) ביצועים

DOM עבור כרום (canvas/webgl עבור גרפים מורכבים).
רשימה/טבלה וירטואליזציה, מצערת 'דראג' (16 ms), מסגרת אנימציה .
שרטט מחדש רק וידג 'טים מותאמים.
מטמון ספירת התנגשויות וקווים מנחים.

16) ביטחון תוכן והגנה

תיבת שמש לווידג 'טים של HTML (iframe, CSP, ”ארגז חול” דגלים).
מגבלת זרוק: סוגי whitelist (קבצים, קישורים, JSON pressets); בדיקת גודל ותוכן.
זכויות לייצוא (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;
}

אירועי מחזור החיים הם ”הר”, ”שינוי גודל”, ”שינוי חזותי”.
אביזרים אימות לפני פרסום.

18) יבוא/יצוא ונדידה

יצוא: ”רשת”, ”וידג 'טים”, ”נושא”, ”מטה”.
ייבוא: בדיקת סכימות, הגירה אוטומטית (מפת שדה/ברירת מחדל), דיווח.
מנעול קובץ מראש עם חשיש כדי להבטיח שלמות.

19) הוקי (מומלץ)

ניווט: ”←↑→↓” - מהלך; ”הזז” + חצים - צעד מהיר.
לדקלם: "Alt' + חצים.
פעולות: Ctrl/CMD + D - שכפול; 'Ctrl/CMD + G' - קבוצה; Ctrl/CMD + Shift + G - ungroup.
רמות: ”[ ”/” ]” - אחורה/קדימה על z-index.
Undo/Redo: 'Ctrl/Cmd + Z '/' Ctrl/Cmd + Shift + Z'.
קדימונים: "Ctrl/CMD + 1.. 9 '- מהר ליישם אלה שמורים.

20) תבניות UX

מדריכים מהירים בשיגור הראשון (מיקרו עלייה למטוס עבור 3-5 צעדים).
מצב רשת: הפעלה ”הצג/הסתר רשת”.
רמזים אינליין על התנגשויות (”לא זמין: רוחב מינימלי = 3”).
היסטוריה פריסה: חוזר לגרסה הקודמת.

21) תוכנית מבחן

חישוב התנגשות, צילום, אימות מגביל.
אינטגרציה: עכבר DND/סטפס/מקלדת; קיבוצים; מכולות.
E2E: הרכבת לוח מחוונים מאפס, יישום מראש, הוצאה לאור, ייצוא/ייבוא.
כאוס: לגרום לעיכובים, אובדן קשר (זמן אמת), ניגוד זכויות.
A11y: תסריטי מקלדת, משחק SR-קול, ניגוד.

22) רשימת מימושים

[ ] נקודות רשת/שבירה וצילומים מוגדרים

[ ] לדקלם/קבוצות/ליישר עבודה ולהיבדק

[ ] DND ותסריטים מאופשרים

[ ] Autosave, לבטל/redo, היסטוריית פריסה

[ ] פרסטים: גרסאות, זכויות, יצוא/יבוא

[ ] נושאים ואסימונים לעיצוב, מצב ניגודיות גבוהה

[ ] שיתוף פעולה בזמן אמת ויישוב סכסוכים

[ מגבלת ], אימות קובץ, ארגז חול HTML

[ ] מטריצות: אימוץ, זמן למיקום ראשון, שגיאות התנגשות

23) מיני ־ FAQ

למה רק רשת, לא קואורדינטות חינם?
הרשת מפשטת יישור, Coronavirus, מראש ניידות וביצועים.

איך לאחסן פריסות שונות עבור נקודות שבירה?
לכל וידג 'ט יש A' pos 'על breakpoint (שולחן עבודה/טאבלט/נייד) עם נפילה אוטומטית לאחור.

מה לבחור עבור שיתוף הפעולה - OT או CRDT?
CRDT קל יותר לקונפליקטים/מנותקים; OT - אישור לפעולות טקסט לינאריות. לפריסה, CRDT נלקח לעתים קרובות יותר.

סך הכל

וידג 'טים טובים של גרירה ושחרור הם לא רק ”גרירה וצניחה”. "אלה הם: רשת קפדנית וצילומים, קבוצות ויישור נוחות, נגישות מקלדת, קדימות יציבה עם גרסאות ויצוא, פרסומים בטוחים ושיתוף פעולה. לבנות את זה סביב מודל מידע אמין, UX בעל מחשבה טובה ותוכנית בדיקה - והמבנה יהפוך מהיר, מובן ועמיד לגידול של תוכן ופקודות.