विजेट और प्रीसेट खींचें (D)

1) अवधारणा और परिदृश्य

ड्रैग विजेट इंटरैक्टिव ब्लॉक (ग्राफ कार्ड, टेबल, फिल्टर, एक्शन बटन) हैं जिन्हें उपयोक्ता ग्रिड के संदर्भ में स्वतंत्र रूप से कैनवास पर रखता है। प्रेसेट - सहेजे गए लेआउट और स्टाइल (लेआउट + थीम + पैरामीटर) जिन्हें जल्दी से लागू, साझा और वर्शन किया जा सकता है।

• तैयार ब्लॉकों से डैशबोर्ड की असेंबली (केपीआई कार्ड, रेखांकन, फिल्टर)।
• प्रीसेट "कॉम्पैक्ट", "एनालिटिक्स", "प्रस्तुति" के माध्यम से लेआउट का त्वरित परिवर्तन।
• सह-संपादन: उत्पाद विजेट्स रखता है, विश्लेषक स्रोत स्थापित करता है।
• हितधारकों के लिए केवल पढ़ें प्रकाशन।

2) वास्तुशिल्प सिद्धांत

1. ग्रिड-पहला: तार्किक स्तंभों/पंक्तियों (12/24), पिक्सेल - डेरिवेटिव में स्थिति।

2. तड़क और गाइड: चुंबकीय गाइड, जाल और पड़ोसियों से चिपके हुए, संरेखित।

3. प्रतिबंध-जागरूक: आकार/पहलू सीमाएँ, मिनट/अधिकतम, लॉक-पहलू।

4. सुरक्षित-दर-डिफ़ॉल्ट: निरंतर ऑटोसेव, लेन-देन प्रकाशन, पूर्ववत/फिर से।

5. A11y-first: कीबोर्ड से डीएनडी और वॉयसिंग परिवर्तन।

6. Realtime- तैयार: मल्टीप्लेयर सत्रों के लिए 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; स्थिर ऊर्ध्वाधर पिच के लिए 'rowHight' समान है।

तड़क: किनारों/केंद्रों पर तस्वीर; 4/8 px पर "मैग्नेट"; पड़ोसियों से संपर्क करते समय स्मार्ट गाइड

ऑटो-फ्लो: टक्कर के मामले में नीचे स्वचालित स्थानांतरण; "गिरने वाले ब्लॉक" एल्गोरिथ्म।

जवाबदेही: ब्रेकपॉइंट - प्रत्येक ब्रेकपॉइंट के लिए वैकल्पिक 'पॉज़'।

5) DnD घटनाएँ और राज्य

События: : 'ड्रैगस्टार्ट', 'ड्रैगओवर', 'ड्रॉप ओवर', 'रीसाइज़स्टार्ट', 'रीसाइज़', 'रीसाइज़एंड', 'सेलेक्ट', 'अनग्रुप', 'रिऑर्डर', 'पूर्ववत'।

• खींचते समय भूत/पूर्वावलोकन-एक पारभासी पथ।
• प्लेसहोल्डर्स: अनुमत क्षेत्र (हरा), निषिद्ध (लाल)।
• टकराव मानचित्र - अधिकृत कोशिकाओं की त्वरित गणना (बिटसेट/अंतराल वृक्ष)।

6) उठाएं, संरेखित करें, जेड-इंडेक्स

अनुपात बनाए रखने के लिए कोनों पर पकड़ + 'शिफ्ट' को फिर से पकड़ें।

समूह का संरेखण: "बाएं/दाएं", "केंद्र", "समान रूप से वितरित करें।"

ओवरले स्तर: रेंज प्रतिबंध के साथ 'z', फ्रंट/बैक बटन।

7) समूह, कंटेनर और घोंसले का शिकार

समूह: एकाधिक चयन, संयुक्त ड्रैग और ड्रॉप, समूह संरेखण।

विजेट कंटेनर: टैब, अकॉर्डियन, हिंडोला - वे जानते हैं कि चाइल्ड विजेट को कैसे स्वीकार किया जाए।

कंटेनर स्टॉप: बाहरी ग्रिड ≠ आंतरिक (अन्य स्तंभ)।

8) प्रीसेट (टेम्प्लेट) और संस्करण

प्रीसेट के प्रकार: लेआउट, थीम, विजेट सेट, लेआउट + डाटा।

वर्शनिंग: 'सेवर' योजनाएं और माइग्रेशन (फील्ड मैप, डिफ़ॉल्ट)।

लागू होने से पहले पूर्वावलोकन और लागू करें।

स्कोपेड प्रीसेट: व्यक्तिगत, टीम, वैश्विक; पढ़ें/संपादित करें अधिकार।

निर्यात/आयात: JSON/YAML, चेकसम हस्ताक्षर, संस्करण संगतता जाँच.

9) एक्सेसिबिलिटी (A11y) और कीबोर्ड

• 'एंटर/स्पेस' - ट्रांसफर शुरू करें; तीर - ग्रिड रिक्ति के लिए कदम; 'शिफ्ट' + तीर - त्वरित रिक्ति; 'Esc' - रद्द करें।
• 'Ctrl/Cmd + G' - समूह; 'Ctrl/Cmd + Shift + G' - ungroup।
• 'ऑल्ट' - अस्थायी रूप से ग्रिड को तड़कना बंद कर दें।
• वॉयस एक्टिंग एसआर: "स्थानांतरित (एक्स, वाई)। चिपके हुए: पर। संघर्ष: हाँ/नहीं।"
• फोकस रिंग, बड़े पुनरावृत्ति हैंडल, विवरण के साथ ड्रॉप ज़ोन।

10) टच और मोबाइल पैटर्न

DnD शुरू के लिए लॉन्ग-प्रेस (300-500 ms)।

बढ़े हुए लक्ष्य (न्यूनतम 40-48 पीएक्स)।

अनुकूली टूलबार (नीचे गोदी)।

मोड संपादित करें: कैनवास स्क्रॉलिंग लॉक, ऊर्ध्वाधर स्वतः स्क्रॉलिंग जब किनारे पर जाता है.

11) विजेट से क्रिया (एक्शन करने योग्य विजेट)

बिल्ट-इन सीटीए (बटन), संदर्भ मेनू, ड्रैग-क्लोन (ऑल्ट-आयोजित दोहराव)।

विजेट (घनत्व, किंवदंती, रंग योजना) के लिए "त्वरित प्रीसेट"।

राज्य: लोडिंग/खाली/त्रुटि, सुरक्षित स्टब्स ("डेटा पिछड़ रहा है")।

12) सहयोग और प्रकाशन

Realtime: CRDT (उदाहरण के लिए, Yjs) या OTS (Quill दृष्टिकोण) - प्रतिभागी कर्सर, समूह ताले।

राइट्स: 'मालिक', 'संपादक', 'प्रदर्शक'; एक अपरिवर्तनीय स्नैपशॉट प्रकाशित करें।

धाराएँ: मसौदा → समीक्षा → प्रकाशन; परिवर्तनों की तुलना (डिफ लेआउट)।

13) पूर्ववत/रेडो और ऑटोसेव

कमांड बस: प्रत्येक ऑपरेशन 'do/undo' के साथ एक कमांड है।

क्लाइंट पर लॉग ऑन करें (इन-मेमोरी + आवधिक स्थिर), लंबाई सीमा.

स्वतः सहेजें: प्रत्येक एन सेकंड/' निष्क्रिय ', "सेव" संकेतक के साथ।

14) टेमाइजेशन और डिजाइन टोकन

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

बिना पुनर्गणना लेआउट के प्रसंगों को बदलना (केवल दृश्य टोकन)।

एए/एएए कंट्रास्ट, हाई-कंट्रास्ट मोड, सही ग्रे के साथ डार्क थीम।

15) प्रदर्शन

परतों द्वारा रेंडरिंग (जटिल रेखांकन के लिए कैनवास/वेबजीएल, क्रोम के लिए डोम)।

सूची/तालिका वर्चुअलाइजेशन, थ्रॉटल 'ड्रैग' (16 एमएस), एनिमेशनफ्रेम।

डिफ रेंडर: सिर्फ परिवर्धित विजेट्स को फिर से तैयार करें।

टकराव और दिशानिर्देशों की गिनती कैश।

16) सामग्री सुरक्षा और संरक्षण

HTML विजेट्स के लिए सनबॉक्स (iframe, CSP, 'सैंडबॉक्स' फ्लैग्स).

ड्रॉप सीमा: श्वेतलिस्ट प्रकार (फ़ाइलें, लिंक, JSON प्रीसेट); आकार और सामग्री की जाँच कर रहा है

प्रीसेट (आरबीएसी/एबीएसी), निर्यात/आयात लेखा परीक्षा के अधिकार।

17) विजेट एपीआई (अनुबंध)

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) हॉटकी (अनुशंसित)

नेविगेशन: '←↑→↓' - चाल; 'शिफ्ट' + तीर - त्वरित कदम।

Recise: 'Alt' + Arrows।

ऑपरेशन: 'Ctrl/Cmd + D' - डुप्लिकेट; 'Ctrl/Cmd + G' - समूह; 'Ctrl/Cmd + Shift + G' - ungroup।

स्तर: '['/'] - जेड-इंडेक्स पर बैक/फॉरवर्ड।

पूर्ववत/रेडो: 'Ctrl/Cmd + Z '/' Ctrl/Cmd + Shift + Z' (или 'Y')।

प्रेसेट्स: 'Ctrl/Cmd + 1। 9 '- जल्दी से सहेजे गए लोगों को लागू करें

20) यूएक्स पैटर्न

पहले लॉन्च पर त्वरित गाइड (3-5 चरणों के लिए माइक्रो-ऑनबोर्डिंग)।

ग्रिड मोड: टॉगल करें "दिखाएँ/छुपाएँ ग्रिड".

टकराव पर इनलाइन संकेत ("अनुपलब्ध: न्यूनतम चौड़ाई चौड़ाई = 3")।

खाका इतिहास: पिछले संस्करण में लौटता है.

21) परीक्षण योजना

इकाई: टकराव गणना, तड़क, बाधा सत्यापन।

एकीकरण: DnD माउस/टैप/कीबोर्ड; समूह; कंटेनर।

E2E: खरोंच से एक डैशबोर्ड को इकट्ठा करना, एक प्रीसेट लागू करना, प्रकाशन, निर्यात/आयात करना।

अराजकता: प्रतिपादन देरी, कनेक्शन का नुकसान (वास्तविक समय), अधिकारों का संघर्ष।

A11y: कीबोर्ड स्क्रिप्ट, एसआर-वॉयस एक्टिंग, कंट्रास्ट।

22) कार्यान्वयन चेकलिस्ट

• ग्रिड/ब्रेकपॉइंट और तड़क कॉन्फ़िगर
• पुनरावृत्ति/समूह/संरेखण कार्य और परीक्षण
• कुंजीपट DnD और स्क्रीनटिप्स सक्षम
• ऑटोसेव, पूर्ववत/फिर से, लेआउट इतिहास
• प्रेसेट: संस्करण, अधिकार, निर्यात/आयात
• थीम और डिजाइन टोकन, उच्च-कंट्रास्ट मोड
• Realtime सहयोग और संघर्ष समाधान
• ड्रॉप सीमा, फ़ाइल सत्यापन, सैंडबॉक्स एचटीएमएल
• मेट्रिक्स: गोद लेना, पहली नियुक्ति का समय, टकराव त्रुटियां

23) मिनी-एफएक्यू

केवल एक ग्रिड, मुफ्त निर्देशांक क्यों नहीं?

ग्रिड संरेखण, कोरोनावायरस, प्रीसेट पोर्टेबिलिटी और प्रदर्शन को सरल बनाता है।

ब्रेकपॉइंट के लिए अलग-अलग लेआउट कैसे संग्रहीत करें?

प्रत्येक विजेट में स्वचालित फॉल-बैक के साथ ब्रेकपॉइंट (डेस्कटॉप/टैबलेट/मोबाइल) पर 'पोस' होता है।

सहयोग के लिए क्या चुनें - ओटी या सीआरडीटी?

सीआरडीटी ऑफ़ लाइन/विरोध के लिए आसान है; ओटी - रैखिक पाठ संचालन के लिए ठीक है। लेआउट के लिए, CRDT अधिक बार लिया जाता है।

कुल

अच्छा ड्रैग और ड्रॉप विजेट केवल "ड्रैग एंड ड्रॉप" नहीं हैं। "ये हैं: सख्त ग्रिड और तड़क, सुविधाजनक समूह और संरेखण, कीबोर्ड पहुंच, संस्करणों और निर्यात के साथ स्थिर प्रीसेट, सुरक्षित प्रकाशन और सहयोग। इसे एक विश्वसनीय डेटा मॉडल, एक अच्छी तरह से सोचा-समझा UX और एक परीक्षण योजना के आसपास बनाएं - और कंस्ट्रक्टर सामग्री और कमांड के विकास के लिए तेज, समझने योग्य और प्रतिरोधी बन जाएगा।