Drag & Drop γραφικά και προεπιλογές

1) Έννοια και σενάρια

Drag & Drop widgets είναι διαδραστικά blocks (κάρτες γραφημάτων, πίνακες, φίλτρα, κουμπιά δράσης) που ο χρήστης τοποθετεί ελεύθερα στον καμβά σε σχέση με το πλέγμα. Presets - αποθηκευμένες διατάξεις και στυλ (διάταξη + θέμα + παράμετροι) που μπορούν να εφαρμοστούν γρήγορα, να μοιραστούν και να εκδοθούν.

• Συναρμολόγηση ταμπλέτας από έτοιμα μπλοκ (κάρτες KPI, γραφήματα, φίλτρα).
• Γρήγορη αλλαγή διάταξης μέσω των προκαθορισμένων «Compac ,» Analytic , «Παρουσίαση».
• Συγχρηματοδότηση: το προϊόν τοποθετεί widgets, ο αναλυτής δημιουργεί πηγές.
• Δημοσίευση μόνο ανάγνωσης για τα ενδιαφερόμενα μέρη.

2) Αρχιτεκτονικές αρχές

1. Πρώτο πλέγμα: τοποθέτηση σε λογικές στήλες/σειρές (12/24), εικονοστοιχεία - παράγωγα.
2. Snapping & Guides: μαγνητικοί οδηγοί, κολλημένοι στα μάτια και στους γείτονες, ευθυγραμμισμένοι.
3. Περιορισμός: περιορισμοί μεγέθους/διαστάσεων, min/max, πτυχή κλειδώματος.
4. Safe-by-fault: συνεχής αυτόματη αποθήκευση, εκδόσεις συναλλαγών, undo/redo.
5. : DnD από το πληκτρολόγιο και αλλαγές τιμολόγησης.
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 για τα τηλέφωνα. Το «ύψος ροής» είναι το ίδιο για το σταθερό κατακόρυφο βήμα.
Snapping: snap to edges/centers; «μαγνήτες» στα 4/8 px· έξυπνοι οδηγοί όταν πλησιάζουν γείτονες.
Αυτόματη ροή: αυτόματη μεταφορά κατωτέρω σε περίπτωση σύγκρουσης. αλγόριθμος «μπλοκ πτώσης».
Ανταπόκριση: σημεία διακοπής → εναλλακτικά 'pos' για κάθε σημείο διακοπής.

5) Εκδηλώσεις και κράτη του DnD

: 'dragStar ,' drag ',' dragOver ',' drop ',' resizeStar , 'resize', 'resizeEn ,' selec , 'group', 'ungroup', 'reorder', 'undo', 'redo'.

• Φάντασμα/Προεπισκόπηση-Μια ημιδιαφανής διαδρομή ενώ σέρνεται.
• Επιτρεπόμενες ζώνες (πράσινες), απαγορευμένες (κόκκινες).
• Χάρτης σύγκρουσης - γρήγορος υπολογισμός κατειλημμένων κυττάρων (δένδρο bitset/διαστήματος).

6) Αύξηση, ευθυγράμμιση, δείκτης z

Επαναφορά των λαβών στις γωνίες + συγκράτηση 'Shift' για διατήρηση των διαστάσεων.
Ευθυγράμμιση της ομάδας: «αριστερά/δεξιά», «κέντρο», «κατανομή ομοιόμορφα».
Επίπεδα επικάλυψης: «z» με περιορισμό εύρους, εμπρός/πίσω κουμπιά.

7) Ομάδες, εμπορευματοκιβώτια και φωλιές

Ομάδες: πολλαπλή επιλογή, συνδυασμένη αντίσταση και πτώση, ευθυγράμμιση ομάδας.
Δοχείο γραφικών συστατικών: καρτέλες, ακορντεόν, καρουζέλ - ξέρουν πώς να δέχονται παιδικά widgets.
Στάσεις εμπορευματοκιβωτίων: εξωτερικό πλέγμα ≠ εσωτερικό (άλλες στήλες).

8) Προεπιλογές (υποδείγματα) και εκδόσεις

Τύποι προκαθορισμένων στοιχείων: διάταξη, θέμα, σύνολο γραφικών συστατικών, διάταξη + δεδομένα.
Έκδοση: συστήματα «semver» και μεταναστεύσεις (χάρτης πεδίου, προεπιλογές).
Προεπισκόπηση & Εφαρμογή προεπισκόπησης πριν την εφαρμογή.
Προκαθορισμένες προεπιλογές: προσωπικές, ομαδικές, παγκόσμιες. δικαιώματα ανάγνωσης/επεξεργασίας.
Εξαγωγή/εισαγωγή: JSON/YAML, υπογραφή ελέγχου, έλεγχος συμβατότητας έκδοσης.

9) Προσβασιμότητα (A11y) και πληκτρολόγιο

• 'Εισάγετε/Χώρος' - ξεκινήστε τη μεταφορά. βέλη - μετακίνηση σε απόσταση πλέγματος· «Μετατόπιση» + βέλη - επιταχυνόμενη απόσταση. «Esc» - ακύρωση.
• «Ctrl/Cmd + G» - ομάδα, 'Ctrl/Cmd + Shift + G' - μη ομαδοποιημένη.
• 'Αλτ' - κλείστε προσωρινά το σπάσιμο στο πλέγμα.
• Φωνητική υποκριτική SR: "Μετακινήθηκε στο (x, y). Κολλώντας: on. Σύγκρουση: Ναι/Όχι"
• Δακτύλιοι εστίασης, μεγάλες ορθές λαβές, ζώνες πτώσης με περιγραφή.

10) Μοτίβα αφής και κινητά

Long-press (300-500 ms) για την εκκίνηση του DnD.
Αυξημένοι στόχοι (τουλάχιστον 40-48 px).
Προσαρμοστικές γραμμές εργαλείων (κάτω δεξαμενή).
Λειτουργία επεξεργασίας: κλειδαριά κύλισης καμβά, κατακόρυφη αυτόματη κύλιση όταν κινείται προς την άκρη.

11) Δράσεις από γραφικές παραστάσεις (Ενεργά γραφικά συστατικά)

Ενσωματωμένο CTA (κουμπί), μενού συμφραζομένων, drag-clone (αλληλεπικάλυψη με Alt).
«Γρήγορες προκαθορισμένες» για το γραφικό συστατικό (πυκνότητα, θρύλος, χρωματικό σχήμα).
Δηλώνει: φόρτωση/κενό/σφάλμα, ασφαλή αποκόμματα («τα δεδομένα υστερούν»).

12) Συνεργασία και εκδόσεις

Πραγματικός χρόνος: CRDT (για παράδειγμα, Yjs) ή ΟΤ (προσέγγιση Quill) - συμμετέχοντες δρομείς, κλείδες ομάδων.
Δικαιώματα: «Ιδιοκτήτης», «Εκδότης», «Θεατής», Δημοσίευση ενός αμετάβλητου στιγμιότυπου.
Ροές: σχέδιο επανεξέτασης → δημοσίευσης →· σύγκριση των αλλαγών (διφορούμενες διατάξεις).

13) Undo/Redo και autosave

Λεωφορείο εντολών: κάθε πτητική λειτουργία είναι μια εντολή με 'do/undo'.
Καταγραφή στον πελάτη (in-memory + περιοδική αντίσταση), όριο μήκους.
Αυτόματη αποθήκευση: κάθε N δευτερόλεπτα/by '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) Επιδόσεις

Απόδοση με στρώματα (καμβάς/webgl για σύνθετα γραφήματα, DOM για χρώμιο).
Εικονικοποίηση λίστας/πίνακα, ghottle 'drag' (16 ms), reviewAnimationFrame.
Diff απόδοση: επανασχεδιασμός μόνο τροποποιημένων γραφικών συστατικών.
Καταμέτρηση κρύπτης συγκρούσεων και κατευθυντήριων γραμμών.

16) Ασφάλεια και προστασία του περιεχομένου

Sunbox για widgets HTML (iframe, CSP, σημαίες 'sandbox').
Περιορισμός πτώσης: τύποι whitelist (αρχεία, σύνδεσμοι, προεπιλογές 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;
}

Τα γεγονότα του κύκλου ζωής είναι "moun ," resize "," vis Change ".
Επικύρωση υποστρωμάτων πριν από τη δημοσίευση.

18) Εισαγωγές/εξαγωγές και μεταναστεύσεις

Εξαγωγές: 'πλέγμα', 'widget ,' θέμα ',' meta '.
Εισαγωγή: checking schema versions, αυτόματη μετάβαση (χάρτης πεδίου/προκαθορισμένες), αναφορά.
Προκαθορισμένο αρχείο κλειδώματος με hash για να εξασφαλιστεί η ακεραιότητα.

19) Hotkeys (συνιστάται)

Ναυσιπλοΐα: '←↑→↓' - κίνηση· 'Shift' + βέλη - γρήγορο βήμα.
Επανάληψη: 'Alt' + βέλη.
Λειτουργίες: 'Ctrl/Cmd + D' - αντίγραφο. «Ctrl/Cmd + G» - ομάδα, 'Ctrl/Cmd + Shift + G' - μη ομαδοποιημένη.
Επίπεδα: '['/']' - back/forward on z-index.
Undo/Redo: 'Ctrl/Cmd + Z '/' Ctrl/Cmd + Shift + Z' (или 'Y').
Προκαθορισμένες τιμές: 'Ctrl/Cmd + 1.. 9 '- εφαρμόστε γρήγορα αποθηκευμένα.

20) Πρότυπα UX

Γρήγοροι οδηγοί κατά την πρώτη εκτόξευση (μικρο-επιβίβαση για 3-5 βήματα).
Λειτουργία καννάβου: εναλλαγή καννάβου «εμφάνισης/απόκρυψης».
Inline υποδείξεις συγκρούσεων («μη διαθέσιμο: ελάχιστο πλάτος γραφικού συστατικού = 3»).
Ιστορικό διάταξης: Επιστρέφει στην προηγούμενη έκδοση.

21) Σχέδιο δοκιμών

Μονάδα: υπολογισμός σύγκρουσης, σπάσιμο, επικυρωτής περιορισμού.
Ενσωμάτωση: DnD ποντίκι/βρύση/πληκτρολόγιο. ομαδοποιήσεις· εμπορευματοκιβώτια.
: συναρμολόγηση ενός ταμπλό από το μηδέν, εφαρμογή ενός προκαθορισμένου, έκδοση, εξαγωγή/εισαγωγή.
Χάος: καθυστέρηση, απώλεια σύνδεσης (πραγματικός χρόνος), σύγκρουση δικαιωμάτων.
: σενάρια πληκτρολογίου, SR-φωνή υποκριτική, αντίθεση.

22) Κατάλογος ελέγχου εφαρμογής

• Πλέγμα/σημεία διακοπής και ρύθμιση σπασίματος
• Διορθώσεις/ομάδες/εργασίες ευθυγράμμισης και δοκιμές
• Ενεργοποιημένο το πληκτρολόγιο DnD και ScreenTips
• Autosave, undo/redo, ιστορικό διάταξης
• Προκαθορισμένες τιμές: εκδόσεις, δικαιώματα, εξαγωγή/εισαγωγή
• Θέματα και μάρκες σχεδιασμού, λειτουργία υψηλής αντίθεσης
• Συνεργασία σε πραγματικό χρόνο και επίλυση συγκρούσεων
• Περιορισμός πτώσης, επικύρωση αρχείου, HTML άμμου
• Μετρήσεις: υιοθέτηση, χρόνος για την πρώτη τοποθέτηση, σφάλματα σύγκρουσης

23) Mini-FAQ

Γιατί μόνο ένα δίκτυο, όχι ελεύθερες συντεταγμένες

Το δίκτυο απλοποιεί την ευθυγράμμιση, τον κορωναϊό, την προκαθορισμένη φορητότητα και απόδοση.

Πώς να αποθηκεύσετε διαφορετικές διατάξεις για σημεία διακοπής

Κάθε γραφικό συστατικό έχει ένα 'pos' στο σημείο διακοπής (desktop/tablet/mobile) με αυτόματη επιστροφή.

Τι να επιλέξετε για τη συνεργασία - ΟΤ ή CRDT

Η CRDT είναι ευκολότερη για offline/συγκρούσεις. ΟΤ - ok για λειτουργίες γραμμικού κειμένου. Για τη διάταξη, το CRDT λαμβάνεται συχνότερα.

Σύνολο

Τα καλά widgets Drag & Drop δεν είναι μόνο "drag and drop. "Αυτά είναι: αυστηρό πλέγμα και σπάσιμο, βολικές ομάδες και ευθυγράμμιση, προσβασιμότητα πληκτρολογίου, σταθερά προκαθορισμένα με εκδόσεις και εξαγωγές, ασφαλείς δημοσιεύσεις και συνεργασία. Οικοδομήστε αυτό γύρω από ένα αξιόπιστο μοντέλο δεδομένων, ένα καλά μελετημένο UX και ένα σχέδιο δοκιμών - και ο κατασκευαστής θα γίνει γρήγορος, κατανοητός και ανθεκτικός στην ανάπτυξη του περιεχομένου και των εντολών.