🤾🏾 👨🏾‍🎓 🤵 ग्रिड नियंत्रण 👰🏾 💊 👆🏽

टेबल नियंत्रण (आमतौर पर उनके नाम में टेबल या ग्रिड) का व्यापक रूप से विकास GUIs में किया जाता है। ऐसा हुआ है कि काम पर हम एक यूजर इंटरफेस विकसित करने के लिए C ++ और MFC का उपयोग करते हैं। शुरुआत में हमने ग्रिड का सार्वजनिक रूप से उपलब्ध और काफी प्रसिद्ध कार्यान्वयन CGridCtrl - का उपयोग किया। लेकिन कुछ समय से वह हमारे अनुरूप हो गया और उसका अपना विकास हुआ। हमारे कार्यान्वयन पर विचार करने वाले विचार, मैं यहां आपके साथ साझा करना चाहता हूं। एक ओपन सोर्स प्रोजेक्ट (ज्यादातर क्यूटी के तहत होने की संभावना) बनाने का विचार है। इसलिए, इस नोट को "अवधारणा का प्रमाण" माना जा सकता है। रचनात्मक आलोचना और टिप्पणियों का स्वागत है।

मैं उन कारणों को छोड़ दूंगा कि मैं मौजूदा कार्यान्वयन से खुश क्यों नहीं हूं (यह एक अलग नोट के लिए एक विषय है)।
हमारी परियोजनाएँ समृद्ध ग्राफिक्स वाले इंजीनियरिंग और वैज्ञानिक हैं, और सूचियों और तालिकाओं का उपयोग हर जगह किया जाता है। इसलिए, नई ग्रिड को बड़ी मात्रा में जानकारी प्रदर्शित करते समय लचीला अनुकूलन, अच्छा प्रदर्शन और न्यूनतम मेमोरी खपत प्रदान करना था। विकसित करते समय, मैंने निम्नलिखित नियम का पालन करने की कोशिश की: कार्यक्षमता को सामान्यीकृत और सार के रूप में संभव के रूप में लागू करें, लेकिन प्रयोज्यता और कार्य की इष्टतमता की गिरावट के लिए नहीं। बेशक, यह नियम विरोधाभासी है, लेकिन मैं कैसे संतुलन बनाए रखने में कामयाब रहा, यह आप पर निर्भर है।

कुछ के साथ आरंभ करने के लिए, आइए ग्रिड नियंत्रण को परिभाषित करने का प्रयास करें। सामान्यता बनाए रखने के लिए, हम कह सकते हैं कि ग्रिड एक दृश्य तत्व है जो अंतरिक्ष को पंक्तियों और स्तंभों में तोड़ता है। परिणाम कोशिकाओं (पंक्तियों और स्तंभों के चौराहे) का एक ग्रिड है, जिसके अंदर कुछ जानकारी प्रदर्शित होती है। इस प्रकार, दो घटकों को एक ग्रिड में प्रतिष्ठित किया जा सकता है: संरचना और डेटा। ग्रिड संरचना यह निर्धारित करती है कि हम अंतरिक्ष को पंक्तियों और स्तंभों में कैसे विभाजित करेंगे, और डेटा का वर्णन करता है, वास्तव में, हम परिणामी कोशिकाओं में क्या देखना चाहते हैं।

जैसा कि हमने ऊपर निर्धारित किया है, ग्रिड संरचना (टोपोलॉजी कहा जा सकता है) पंक्तियों और स्तंभों द्वारा वर्णित है। पंक्तियाँ और स्तंभ बहुत समान वस्तुएं हैं। हम अप्रभेद्य कह सकते हैं, केवल कुछ विमान क्षैतिज रूप से तोड़ते हैं, जबकि अन्य लंबवत। लेकिन वे इसे उसी तरह करते हैं। यहां हम पहले से ही एक छोटी और आत्मनिर्भर इकाई से संपर्क कर रहे हैं जिसे C ++ क्लास में स्टाइल किया जा सकता है। मैंने इस क्लास लाइन्स को बुलाया (रूसी में आप इसे लाइन्स या स्ट्राइप्स के रूप में परिभाषित कर सकते हैं)। यह वर्ग रेखाओं (पंक्तियों या स्तंभों) के एक समूह को परिभाषित करेगा। एक अलग लाइन के लिए गहराई तक जाने और एक क्लास को परिभाषित करने की आवश्यकता नहीं है। वर्ग छोटा और गैर-कार्यात्मक होगा। इस प्रकार, पंक्तियाँ पंक्तियों या स्तंभों के सेट और उन पर किए जा सकने वाले कार्यों का गुण निर्धारित करेंगी:

गणना की मुख्य संपत्ति लाइनों को बनाने वाली लाइनों की संख्या है।
प्रत्येक पंक्ति अपना आकार बदल सकती है (पंक्ति ऊंचाई, और स्तंभ - चौड़ाई)
लाइनों को फिर से व्यवस्थित किया जा सकता है (पंक्तियों को क्रमबद्ध, स्तंभों को पुन: क्रमबद्ध किया गया)
लाइनें छिपाई जा सकती हैं (उपयोगकर्ता के लिए अदृश्य बनाई गई हैं)

मैं पंक्तियों या स्तंभों के सेट पर किसी भी अधिक या कम उपयोगी संचालन के साथ नहीं आ सका। परिणाम एक छोटा लेकिन उपयोगी वर्ग है:

class Lines { public: Lines(UINT_t count = 0); UINT_t GetCount() const { return m_count; } void SetCount(UINT_t count); UINT_t GetLineSize(UINT_t line) const; void SetLineSize(UINT_t line, UINT_t size); bool IsLineVisible(UINT_t line) const; void SetLineVisible(UINT_t line, bool visible); template <typename Pred> void Sort(const Pred& pred); const vector<UINT_t>& GetPermutation() const; void SetPermutation(const vector<UINT_t>& permutation); UINT_t GetAbsoluteLineID(UINT_t visibleLine) const; UINT_t GetVisibleLineID(UINT_t absoluteLine) const; Event_t<void(const Lines&, unsigned)> changed; private: UINT_t m_count; vector<UINT_t> m_linesSize; vector<bool> m_linesVisible; };

टिप्पणियां और कुछ उपयोगिता कार्य और क्षेत्र स्पष्टता के लिए छोड़ दिए जाते हैं।
आप देख सकते हैं कि वर्ग में GetAbsoluteLineID और GetVisibleLineID । चूंकि हम आपको लाइनों को मिलाने और छिपाने की अनुमति देते हैं, इसलिए निरपेक्ष और दृश्यमान सूचकांक लाइनें अलग-अलग होती हैं। मुझे उम्मीद है कि तस्वीर इस स्थिति को स्पष्ट रूप से दिखाती है।

साथ ही लाइन को स्पष्ट करने की जरूरत है

 Event_t<void(const Lines&, unsigned)> changed;

एक संकेत यहाँ परिभाषित किया गया है (जैसा कि इसे क्यूटी या बूस्ट में कहा जाता है)। C ++ 11 और std :: फ़ंक्शन के आगमन के साथ, आप आसानी से संकेतों / स्लॉटों का एक सरल कार्यान्वयन लिख सकते हैं ताकि बाहरी पुस्तकालयों पर निर्भर न रहें। इस मामले में, हमने लाइन्स क्लास में एक घटना को परिभाषित किया, और किसी भी फंक्शन या फ़ंक्टर को इससे जोड़ा जा सकता है। उदाहरण के लिए, ग्रिड इस ईवेंट से जुड़ता है और लाइन्स की आवृत्ति बदलने पर अलर्ट प्राप्त करता है।

इस प्रकार, ग्रिड संरचना को दो लाइनों द्वारा दर्शाया गया है:

 private: Lines m_rows; Lines m_columns;

हम डेटा पास करते हैं। ग्रिड को यह जानकारी कैसे दी जाए कि वह किस डेटा को प्रदर्शित करेगा और उन्हें कैसे प्रदर्शित करेगा? हमारे सामने सब कुछ पहले से ही आविष्कार किया गया है - मैंने एमवीसी (मॉडल-व्यू-कंट्रोलर) ट्रायड का उपयोग किया। आइए देखें तत्व से शुरू करें। जिस तरह लाइन्स क्लास एक लाइन को नहीं, बल्कि पूरे सेट को परिभाषित करता है, हम व्यू क्लास को एक ऐसी चीज के रूप में परिभाषित करते हैं, जो ग्रिड कोशिकाओं के एक निश्चित सबसेट में कुछ प्रकार के सजातीय डेटा को प्रदर्शित करती है। उदाहरण के लिए, हमारे पहले कॉलम में टेक्स्ट प्रदर्शित होगा। इसका मतलब है कि हमें एक ऐसी वस्तु बनानी होगी जो टेक्स्ट डेटा प्रदर्शित कर सके और यह कह सके कि यह डेटा पहले कॉलम में प्रदर्शित होना चाहिए। चूंकि हमारे पास मौजूद डेटा को अलग-अलग और अलग-अलग जगहों पर प्रदर्शित किया जा सकता है, इसलिए इन कार्यों को विभिन्न वर्गों में लागू करना बेहतर है। हम उस वर्ग को कहते हैं जो डेटा प्रदर्शित कर सकता है, वास्तव में देखें, और वह वर्ग जो यह बता सके कि डेटा कहां प्रदर्शित होता है रेंज (कोशिकाओं का एक सेट)। इन वर्गों के दो उदाहरणों को ग्रिड में पास करना, हम सिर्फ यह दर्शाते हैं कि क्या और कहाँ प्रदर्शित करना है।

चलो श्रेणी वर्ग पर करीब से नज़र डालें। यह एक आश्चर्यजनक रूप से छोटा और शक्तिशाली वर्ग है। इसका मुख्य कार्य इस सवाल का तुरंत जवाब देना है कि क्या एक निश्चित सेल इसमें शामिल है या नहीं। वास्तव में, यह एक फ़ंक्शन वाला इंटरफ़ेस है:

 class Range { public: virtual bool HasCell(CellID cell) const = 0; };

इस तरह आप कोशिकाओं के किसी भी सेट को परिभाषित कर सकते हैं। पाठ्यक्रम का सबसे उपयोगी निम्नलिखित दो होंगे:

 class RangeAll { public: bool HasCell(CellID cell) const override { return true; } }; class RangeColumn { public: RangeColumn(UINT_t column): m_column(column) {} bool HasCell(CellID cell) const override { return cell.column == m_column; } private: UINT_t m_column; };

पहला वर्ग सभी कोशिकाओं के एक सेट को परिभाषित करता है, और दूसरा वर्ग एक विशिष्ट स्तंभ के एक सेट को परिभाषित करता है।

व्यू क्लास के लिए केवल एक फंक्शन बचा है - सेल में डेटा ड्रा करें। वास्तव में, पूर्ण कार्य के लिए, कुछ प्रश्नों के उत्तर देने में सक्षम होना चाहिए:

डेटा प्रदर्शित करने के लिए कितना स्थान आवश्यक है (उदाहरण के लिए, पाठ प्रदर्शित करने के लिए पर्याप्त स्तंभ सेट करने के लिए - फ़िट मोड)
डेटा का एक पाठात्मक प्रतिनिधित्व दें (क्लिपबोर्ड पर कॉपी करने के लिए टेक्स्ट या टूलटिप में डिस्प्ले के रूप में)

 class View { public: virtual void Draw(DrawContext& dc, Rect rect, CellID cell) const = 0; virtual Size GetSize(DrawContext& dc, CellID cell) const = 0; virtual bool GetText(CellID cell, INTENT intent, String& text) const = 0; };

लेकिन क्या होगा अगर हम एक ही सेल में विभिन्न प्रकार के डेटा को आकर्षित करना चाहते हैं? उदाहरण के लिए, उसके बगल में एक आइकन और पाठ खींचें या उसके बगल में एक चेकबॉक्स और पाठ आकर्षित करें। मैं इन संयोजनों के लिए एक अलग प्रकार का दृश्य लागू नहीं करना चाहूंगा। आइए एक सेल में कई सारे व्यू को प्रदर्शित करने की अनुमति दें, हमें केवल एक वर्ग की आवश्यकता है जो यह बताता है कि सेल में एक विशिष्ट व्यू कैसे रखा जाए।

 class Layout { public: virtual void LayoutView(DrawContext& dc, const View* view, Rect& cellRect, Rect& viewRect) const = 0; };

स्पष्टता के लिए, एक उदाहरण पर विचार करें जिसमें चेकबॉक्स और पाठ पहले कॉलम में प्रदर्शित किए गए हैं। दूसरा कॉलम रेडियो बटन, रंग के साथ बॉक्स और रंग का पाठ प्रतिनिधित्व दिखाता है। और एक अन्य सेल में एक तारांकन होता है।

उदाहरण के लिए, चेकबॉक्स के लिए, हम LayoutLeft का उपयोग करेंगे, जो सेल के आयत से वांछित आकार के आयत को "आकार" और "काटने" के लिए कहेंगे। और पाठ के लिए हम LayoutAll का उपयोग करेंगे, जिसके लिए सेल का पहले से छोटा आयताकार सेल सेल पैरामीटर पर जाएगा। LayoutAll अपने दृश्य के आकार के लिए नहीं कहेगा, लेकिन सेल के सभी उपलब्ध स्थान को "ले"। आप कई अलग-अलग उपयोगी लेआउट के साथ आ सकते हैं जिन्हें किसी भी दृश्य के साथ जोड़ा जाएगा।

चलिए उस ग्रिड क्लास पर लौटते हैं जिसके लिए हम डेटा सेट करना चाहते थे। यह पता चलता है कि हम त्रिकोणीय <श्रेणी, दृश्य, लेआउट> स्टोर कर सकते हैं, जो यह निर्धारित करते हैं कि किस सेल में डेटा प्रदर्शित करना है, साथ ही यह डेटा सेल के अंदर कैसे स्थित होना चाहिए। तो ग्रिड वर्ग कुछ इस तरह दिखता है:

 class Grid { private: Lines m_rows; Lines m_columns; vector<tuple<Range, View, Layout>> m_data; };

यह हमारे उदाहरण के लिए m_data जैसा दिखता है

संक्षेप में, यह ग्रिड को प्रस्तुत करने के लिए पर्याप्त है। लेकिन जानकारी को इष्टतम तरीके से व्यवस्थित नहीं किया जाता है - केवल डेटा को प्रदर्शित करने वाले रिकॉर्ड की एक सूची।
आइए इस बारे में सोचें कि हमारे ग्रिड वर्ग का उपयोग करके सेल कैसे आकर्षित करें।

हमें m_data को फ़िल्टर करने और केवल उन त्रिगुणों को छोड़ने की आवश्यकता है जिनके लिए हमारी कोशिका रेंज में आती है
```
 for (auto d: grid.m_data) if (d.range->HasCell(cell)) cell_data.push_back(d); 
```
सेल के लिए आयत को परिभाषित करें
```
 Rect cellRect = CalculateCellRect(grid.m_rows, grid.m_columns, cell); 
```

सभी दृश्य के लिए आयतों को परिभाषित करें

 vector<Rect> view_rects(cell_data.size()); auto view_rect_it = view_rects.begin(); for (auto d: cell_data) d.layout->LayoutView(grid.GetDC(), d.view, cellRect, *view_rect_it++);

उनके लिए गणना की गई आयतों में सभी दृश्य बनाएं

 auto view_rect_it = view_rects.begin(); for (auto d: cell_data) d.view->Draw(grid.GetDC(), *view_rect_it++, cell);

जैसा कि आप देख सकते हैं, प्रतिपादन अंतिम चरण में होता है और इसके लिए आपको केवल फ़िल्टर किए गए दृश्य की एक सूची और आयतों की एक सूची की आवश्यकता होती है जहां ये दृश्य डेटा आकर्षित करेंगे। आप एक छोटे वर्ग के साथ आ सकते हैं जो इस डेटा को कैश करेगा और इसके ड्रा फंक्शन में सिंगल पॉइंट 4 होगा।

 class CellCache { public: CellCache(Grid grid, CellID cell); void Draw(DrawContext& dc); private: CellID m_cell; Rect m_cellRect; vector<pair<View, Rect>> m_cache; };

कंस्ट्रक्टर में यह वर्ग पहले तीन बिंदुओं को निष्पादित करता है और परिणाम को m_cache में संग्रहीत करता है। उसी समय, ड्रा फ़ंक्शन काफी हल्का हो गया। इस लपट के लिए m_cache के रूप में भुगतान करना पड़ा। इसलिए, प्रत्येक सेल के लिए इस तरह के वर्ग के उदाहरण बनाने के लिए यह लाभहीन होगा (हम कोशिकाओं की कुल संख्या के आधार पर डेटा के लिए सहमत नहीं हैं)। लेकिन हमें सभी सेल के लिए सेलकैच के उदाहरण देने की जरूरत नहीं है, बस दृश्यमान लोगों के लिए पर्याप्त है। एक नियम के रूप में, सभी कोशिकाओं का एक छोटा हिस्सा ग्रिड में दिखाई देता है और उनकी संख्या कोशिकाओं की कुल संख्या पर निर्भर नहीं करती है।

इस प्रकार, हमारे पास एक और वर्ग है जो ग्रिड के दृश्यमान क्षेत्र को नियंत्रित करता है, प्रत्येक दृश्य सेल के लिए सेलकैच को संग्रहीत करता है और जल्दी से उन्हें आकर्षित कर सकता है।

 class GridCache { public: GridCache(Grid grid); void SetVisibleRect(Rect visibleRect); void Draw(DrawContext& dc); private: Grid m_grid; Rect m_visibleRect; vector<CellCache> m_cells; };

जब उपयोगकर्ता ग्रिड के आकार को बदलता है या सामग्री को स्क्रॉल करता है, तो हम बस इस ऑब्जेक्ट में एक नया दृश्यमान सेट करते हैं। इस मामले में, m_cells को पुनर्गठित किया जाता है ताकि केवल दृश्य कोशिकाएं शामिल हों। रीड-ओनली ग्रिड को लागू करने के लिए ग्रिडकेच की कार्यक्षमता पर्याप्त है।

 class GridWindow { public: Grid GetGrid() { return m_gridCache.GetGrid(); } void OnPaint() { m_gridCache.Draw(GetDrawContext()); } void OnScroll() { m_gridCache.SetVisibleRect(GetVisibleRect()); } void OnSize() { m_gridCache.SetVisibleRect(GetVisibleRect()); } private: GridCache m_gridCache; };

ग्रिड और ग्रिडकेच वर्गों को अलग करना बहुत उपयोगी है। यह, उदाहरण के लिए, एक ग्रिड उदाहरण के लिए कई ग्रिड बनाने के लिए अनुमति देता है। इसका उपयोग ग्रिड सामग्री के पृष्ठ-दर-पृष्ठ मुद्रण को लागू करने या छवि के रूप में एक फ़ाइल को ग्रिड निर्यात करने के लिए किया जा सकता है। उसी समय, ग्रिडविंडो ऑब्जेक्ट को किसी भी तरह से संशोधित नहीं किया जाता है - बस एक तरफ, एक ग्रिडचैच बनाया जाता है जो समान ग्रिड उदाहरण को संदर्भित करता है, लूप में, नया ग्रिडचैड वर्तमान पृष्ठ और प्रिंट के लिए दृश्यमान सेट करता है।

अन्तरक्रियाशीलता कैसे जोड़ें? यह वह जगह है जहाँ नियंत्रक सामने आता है। अन्य वर्गों के विपरीत, यह वर्ग कई कार्यों के साथ एक इंटरफ़ेस को परिभाषित करता है। लेकिन केवल इसलिए कि बहुत सारे माउस इवेंट्स खुद होते हैं।

 class Controller { public: virtual bool OnLBttnDown(CellID cell, Point p) = 0; virtual bool OnLBttnUp(CellID cell, Point p) = 0; ... };

साथ ही प्रतिपादन के लिए, माउस के साथ काम करने के लिए हमें केवल दृश्य कोशिकाओं की आवश्यकता होती है। GridCache वर्ग में माउस प्रसंस्करण कार्य जोड़ें। माउस कर्सर की स्थिति से, हम यह निर्धारित करते हैं कि कौन सी सेल (CacheCell) इसके अंतर्गत स्थित है। अगला, सभी दृश्य के लिए सेल में, जिसकी आयत में माउस हिट होता है, हम नियंत्रक को लेते हैं और इसकी संबंधित विधि कहते हैं। यदि विधि सही है - दृश्य को दरकिनार करना बंद करें। यह योजना काफी तेज है। उसी समय, हमें व्यू क्लास में नियंत्रक का संदर्भ जोड़ना पड़ा।

यह मॉडल वर्ग से निपटने के लिए बनी हुई है। एडॉप्टर टेम्पलेट के रूप में इसकी आवश्यकता है। इसका मुख्य लक्ष्य "सुविधाजनक" रूप में व्यू के लिए डेटा प्रदान करना है। आइए एक उदाहरण देखें। हमारे पास एक ViewText है जो टेक्स्ट आकर्षित कर सकता है। एक विशिष्ट सेल में इसे खींचने के लिए, इस टेक्स्ट को मॉडलटेक्स्ट ऑब्जेक्ट से सेल के लिए अनुरोध किया जाना चाहिए, जो बदले में, बस एक इंटरफ़ेस है, और इसका विशिष्ट कार्यान्वयन जानता है कि टेक्स्ट कहां प्राप्त करना है। यहाँ ViewText वर्ग का एक उदाहरण कार्यान्वयन है:

 class ViewText: public View { public: ViewText(ModelText model): m_model(model) {} void Draw(DrawContext& dc, Rect rect, CellID cell) const override { const String& text = model->GetText(cell); dc.DrawText(text, rect); } private: ModelText m_model; };

इस प्रकार, यह अनुमान लगाना आसान है कि मॉडलटेक्स्ट में कौन सा इंटरफ़ेस होना चाहिए:

 class ModelText: public Model { public: virtual const String& GetText(CellID cell) const = 0; virtual void SetText(CellID cell, const String& text) = 0; };

कृपया ध्यान दें कि हमने एक सेटर जोड़ा है ताकि नियंत्रक इसका उपयोग कर सके। व्यवहार में, ModelTextCallback का सबसे अधिक इस्तेमाल किया जाने वाला कार्यान्वयन

 class ModelTextCallback: public ModelText { public: function<const String&(CellID)> getCallback; function<void(CellID, const String&)> setCallback; const String& GetText(CellID cell) const override { return getCallback(cell); } void SetText(CellID cell, const String& text) override { if (setCallback) setCallback(cell, text); } };

यह मॉडल आपको ग्रिड आरंभीकरण के दौरान वास्तविक डेटा तक पहुंच के लंबोदा कार्यों को असाइन करने की अनुमति देता है।
खैर, अलग-अलग डेटा के लिए मॉडल में क्या आम है: मॉडलटेक्स्ट, मॉडलइंट, मॉडलबुल ...? सामान्य तौर पर, कुछ भी नहीं, उन सभी के बारे में केवल यह कहा जा सकता है कि उन्हें सभी इच्छुक वस्तुओं को सूचित करना चाहिए कि डेटा बदल गया है। इस प्रकार, बेस क्लास मॉडल निम्नलिखित रूप लेगा:

 class Model { public: virtual ~Model() {} Event_t<void(Model)> changed; };

नतीजतन, हमारा ग्रिड कई छोटी कक्षाओं में टूट गया, जिनमें से प्रत्येक एक स्पष्ट रूप से परिभाषित छोटा कार्य करता है। एक ओर, ऐसा लग सकता है कि ग्रिड को लागू करने के लिए बहुत अधिक कक्षाएं हैं। लेकिन, दूसरी ओर, कक्षाएं स्पष्ट संबंधों के साथ छोटी और सरल बन गईं, जो कोड की समझ को सरल बनाती हैं और इसकी जटिलता को कम करती हैं। इसी समय, रेंज, लेआउट, व्यू, कंट्रोलर और मॉडल वर्गों के उत्तराधिकारियों के संयोजन के सभी प्रकार बहुत ही परिवर्तनशीलता प्रदान करते हैं। ModelCallback के लिए लंबो फंक्शन्स का उपयोग करने से आप आसानी से और तेज़ी से ग्रिड को डेटा के साथ जोड़ सकते हैं।

अगले नोट में, मैं वर्णन करूंगा कि मानक ग्रिड कार्यक्षमता को कैसे लागू किया जाए: चयन, छँटाई, स्तंभ / पंक्ति आकार, मुद्रण, कैसे एक हेडर (निश्चित शीर्ष पंक्तियाँ और बाएँ स्तंभ) जोड़ना।
मैं आपको थोड़ा सा रहस्य बताऊंगा - इस लेख में वर्णित सब कुछ उपरोक्त लागू करने के लिए पहले से ही पर्याप्त है। अगर मुझे कुछ कार्यक्षमता याद आती है, तो कृपया टिप्पणियों में लिखें और मैं अगले लेख में उनके कार्यान्वयन का वर्णन करूंगा।

ग्रिड नियंत्रण

More articles: