Drag & Drop ვიჯეტები და პრესეტები

1) კონცეფცია და სცენარები

Drag & Drop ვიჯეტები - ინტერაქტიული ბლოკები (გრაფიკული ბარათები, ცხრილები, ფილტრები, ღილაკები), რომელსაც მომხმარებელი თავისუფლად ათავსებს ტილოზე ბადეზე. პრესეტები - შენახული განლაგებები და სტილები (layout + თემა + პარამეტრები), რომელთა სწრაფად გამოყენება, გაზიარება და ვერსია შესაძლებელია.

• დაშბორდის შეკრება მზა ბლოკებისგან (KPI ბარათები, გრაფიკა, ფილტრები).
• განლაგების სწრაფი ცვლილება პრესეტების „კომპაქტური“, „ანალიტიკა“, „პრეზენტაცია“ მეშვეობით.
• ერთობლივი რედაქტირება: აქტი განათავსებს ვიჯეტებს, ანალიტიკოსი ადგენს წყაროებს.
• პუბლიკაცია „მხოლოდ კითხვა“ სტეიკჰოლდერებისთვის.

2) არქიტექტურული პრინციპები

1. Grid-first: პოზიციონირება ლოგიკურ სვეტებში/სტრიქონებში (12/24), პიქსელები წარმოებულია.
2. Snapping & Guides: მაგნიტური სახელმძღვანელო, ქსელის და მეზობლების გასწორება, გასწორება.
3. Constraint-aware: ზომების/პროპორციების შეზღუდვები, min/max, lock-aspect.
4. Safe-by-default: უწყვეტი მანქანის შენახვა, გარიგების გამოქვეყნება, undo/redo.
5. A11y-first: DnD კლავიატურიდან და ცვლილებების ხმა.
6. Realtime ready: 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 ტელეფონებისთვის; 'rowHeight' იგივეა, რაც სტაბილური ვერტიკალური ნაბიჯი.
Snapping: ბმული კიდეების/ცენტრების გასწვრივ; „მაგნიტები“ 4/8 px; ჭკვიანი ჰაიდები მეზობლებთან მიახლოებისას.
Auto-flow: ავტომატური გადაცემა ქვემოთ შეჯახების დროს; „დაცემის ბლოკების“ ალგორითმი.
Reakpoints: breakpoints - ალტერნატიული 'pos' თითოეული breakpoint- ისთვის.

5) DnD მოვლენები და მდგომარეობა

События: `dragStart`, `drag`, `dragOver`, `drop`, `resizeStart`, `resize`, `resizeEnd`, `select`, `group`, `ungroup`, `reorder`, `undo`, `redo`.

• Ghost/Preview: გამჭვირვალე წრე გადაადგილების დროს.
• Placeholders: მისაღები ზონები (მწვანე განათება), აკრძალული (წითელი).
• Collision map: ოკუპირებული უჯრედების სწრაფი გაანგარიშება (bitset/interval tree).

6) Resise, განლაგება, z-index

კუთხეებში მიმღები სახელურები + „შეფერხება“ პროპორციების შესანარჩუნებლად.
ჯგუფის განლაგება: „მარცხენა/მარჯვენა კიდეზე“, „ცენტრში“, „განაწილება თანაბრად“.
დატვირთვის დონე: 'z' დიაპაზონის შეზღუდვით, ღილაკები „წინ/უკან“.

7) ჯგუფები, კონტეინერები და ინვესტიცია

ჯგუფები: მრავალჯერადი გამოყოფა, ერთობლივი გადაადგილება, ჯგუფური განლაგება.
ვიჯეტის კონტეინერი: ტაბები, აკორდეონები, კარუსელები - მათ იციან როგორ მიიღონ შვილობილი ვიჯეტები.
კონტეინერის შეზღუდვები: გარე ბადე - შიდა (სხვა სვეტები).

8) პრესეტები (შაბლონები) და ვერსიები

პრესეტების ტიპები: layout, თემა (თემა), „ვიჯეტების ნაკრები“, „განლაგება + მონაცემები“.
ვერსია: 'semver' სქემები და მიგრაცია (map ველები, ნაგულისხმევი).
Preview & Apply: წინასწარი ნახვა გამოყენებამდე.
Scoped presets: პირადი, ბრძანება, გლობალური; კითხვის/რედაქტირების უფლებები.
ექსპორტი/იმპორტი: JSON/YAML, საკონტროლო თანხის ხელმოწერა, ვერსიის თავსებადობის შემოწმება.

9) წვდომა (A11y) და კლავიატურა

• 'Enter/Space' - დაიწყეთ გადაცემა; ისრები - ქსელის ნაბიჯზე გადაადგილება; 'Shift' + ისრები - დაჩქარებული ნაბიჯი; 'Esc' - გაუქმება.
• 'Ctrl/Cmd + G' - დაჯგუფება; 'Ctrl/Cmd + Shift + G' - დაჯგუფება.
• 'Alt' - დროებით გამორთეთ ბმული ქსელში.
• ხმა SR: "გადავიდა (x, y). წებოვანი: ჩართვა. კონფლიქტი: დიახ/არა."
• ფოკუსის რგოლები, დიდი სარეკრეაციო სახელურები, ფრენის ზონები აღწერილი.

10) Tach და მობილური ნიმუშები

გრძელი პრესა (300-500 ms) DnD- ის დასაწყებად.
გაზრდილი ტარგეტები (მინიმუმ 40-48 px).
ადაპტირებული ხელსაწყოთა პანელები (ქვედა დოქის პანელი).
„რედაქტირების რეჟიმი“: ტილოების გადახურვის დაბლოკვა, ვერტიკალური სკრილის მანქანა, როდესაც ზღვარზე გადადის.

11) მოქმედებები ვიჯეტებიდან

ჩაშენებული CTA (ღილაკი), კონტექსტური მენიუ, drag-clone (დუბლირება 'Alt' - ით).
ვიჯეტის „სწრაფი პრესეტები“ (სიმკვრივე, ლეგენდა, ფერის სქემა).
სახელმწიფოები: loading/empty/error, უსაფრთხო დანამატები („მონაცემები ჩამორჩება“).

12) თანამშრომლობა და პუბლიკაციები

Realtime: CRDT (მაგალითად, Yjs) ან OT (Quill მიდგომა) - მონაწილეთა კურსდამთავრებულები, ჯგუფების დაბლოკვა.
უფლებები: 'Owner', 'Editor', 'Viewer'; სურათის გამოქვეყნება (immutable snapshot).
ნაკადები: მონახაზი შურისძიებით და პუბლიკაციით; ცვლილებების შედარება (diff layout's).

13) Undo/Redo და მანქანის შენახვა

გუნდის საბურავი: თითოეული ოპერაცია არის ბრძანება 'do/undo'.
ჟურნალი კლიენტზე (მეხსიერება + პერიოდული პერსონალი), სიგრძის ლიმიტი.
Auto-save: ყოველ N წამში/idle- ზე, „შენახული“ ინდიკატორით.

14) თემიზაცია და დიზაინის ნიშნები

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

თემების გადართვა layout- ის გადაანგარიშების გარეშე (მხოლოდ ვიზუალური ნიშნები).
კონტრასტის AA/AAA, High-Contrast რეჟიმი, მუქი თემა სწორი ნაცრისფერით.

15) პროდუქტიულობა

ესკიზი ფენებზე (canvas/webgl რთული გრაფიკებისთვის, DOM ქრომისთვის).
სიების/ცხრილების ვირტუალიზაცია, throttle 'drag' (16 ms), requestAnimationFrame.
Render Render: გადააკეთეთ მხოლოდ შეცვლილი ვიჯეტები.
კონფლიქტებისა და ჰაიდლაინების გამოანგარიშების ქეში.

16) უსაფრთხოება და შინაარსის დაცვა

Sanbox HTML ვიჯეტებისთვის (iframe, CSP, 'sandbox' დროშები).
ფრჩხილების შეზღუდვა: whitelist ტიპები (ფაილები, ბმულები, JSON პრესეტები); ზომისა და შინაარსის შემოწმება.
პრესეტის უფლებები (RBAC/ABAC), ექსპორტის/იმპორტის აუდიტი.

17) API vijets (კონტრაქტი)

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', 'resize', 'VisibilityChange'.
Projection validation გამოქვეყნებამდე.

18) იმპორტი/ექსპორტი და მიგრაცია

ექსპორტზე: 'grid', 'widgets', 'theme', 'meta'.
იმპორტი: სქემის ვერსიების შემოწმება, ავტომატური მიგრაცია (map ველები/ნაგულისხმევი), ანგარიში.
Lock-file პრესაა ჰეშით მთლიანობის უზრუნველსაყოფად.

19) ცხელი კლავიშები (რეკომენდებულია)

ნავიგაცია: 'windows' - მოძრაობა; 'Shift' + ისრები სწრაფი ნაბიჯია.
Resise: 'Alt' + ისრები.
ოპერაციები: 'Ctrl/Cmd + D' - დუბლიკატი; 'Ctrl/Cmd + G' - ჯგუფი; 'Ctrl/Cmd + Shift + G' - ჯგუფი.
დონე: '['/']' - უკან/წინ z-index.
Undo/Redo: `Ctrl/Cmd+Z` / `Ctrl/Cmd+Shift+Z` (или `Y`).
პრესეტები: 'Ctrl/Cmd + 1.. 9' - სწრაფად გამოიყენეთ შენახული.

20) UX ნიმუშები

სწრაფი ჰაიდები პირველი გაშვების დროს (მიკრო-ონბორდი 3-5 ნაბიჯით).
ქსელის რეჟიმი: „ქსელის ჩვენება/დამალვა“.
ინლაინ რჩევები კოლიზიებზე („მიუწვდომელია: წუთიანი ვიჯეტის სიგანე = 3“).
განლაგების ისტორია: დაბრუნება წინა ვერსიაზე.

21) ტესტის გეგმა

ერთეული: შეჯახების გაანგარიშება, სნაიპინგი, კონტეინერების დამადასტურებელი.
ინტეგრაცია: DnD მაუსი/tach/კლავიატურა; ჯგუფები; კონტეინერები.
E2E: დაშბორდის შეკრება „ნულიდან“, პრესეტის გამოყენება, გამოქვეყნება, ექსპორტი/იმპორტი.
ქაოსი: რენდერის შეფერხება, კავშირის დაკარგვა (რეალობა), უფლებების კონფლიქტი.
A11y: კლავიატურის სკრიპტები, SR ხმა, კონტრასტი.

22) განხორციელების შემოწმების სია

• ბადე/ბრეიკპოინტი და სნაიპინგი
• რეცესიები/ჯგუფები/განლაგება მუშაობს და ტესტირება
• კლავიატურის DnD და ეკრანის მინიშნებები ჩართულია
• ავტომობილები, undo/redo, განლაგების ისტორია
• პრესეტები: ვერსიები, უფლებები, ექსპორტი/იმპორტი
• თემები და დიზაინის ნიშნები, მაღალი კონტრასტის რეჟიმი
• Realtime თანამშრომლობა და კონფლიქტების მოგვარება
• თვითმფრინავების შეზღუდვა, ფაილების შესაბამისობა, sandbox HTML
• მეტრიკა: adoption, პირველი განთავსებამდე დრო, კონფლიქტების შეცდომები

23) მინი-FAQ

რატომ მხოლოდ ბადე და არა თავისუფალი კოორდინატები?
ქსელი ამარტივებს პრესეტების განლაგებას, ადაპტირებას, ტოლერანტობას და პროდუქტიულობას.

როგორ შევინახოთ სხვადასხვა layout breikpoints- ის ქვეშ?
თითოეულ ვიჯეტს აქვს 'pos' breikpoint (desktop/tablet/mobile) ავტომატური fall-back.

რა უნდა აირჩიოთ თანამშრომლობისთვის - OT ან CRDT?
CRDT უფრო ადვილია ოფლაინ/კონფლიქტებისთვის; OT - დაახლოებით ხაზოვანი ტექსტური ოპერაციებისთვის. Layout- ისთვის, CRDT უფრო ხშირად იღებს.

შედეგი

კარგი Drag & Drop ვიჯეტები არა მხოლოდ „ბარათის გამოწერა“. ეს: მკაცრი ქსელი და სნაიპინგი, მოსახერხებელი ჯგუფები და გასწორება, კლავიატურაზე წვდომა, სტაბილური პრესეტები ვერსიებით და ექსპორტით, უსაფრთხო პუბლიკაციები და ერთობლივი სამუშაოები. ეს ააშენეთ UX- ის მიერ გააზრებული საიმედო მონაცემთა მოდელის გარშემო და ტესტის გეგმა - და დიზაინერი გახდება სწრაფი, გასაგები და მდგრადი შინაარსისა და ბრძანებების ზრდისთვის.