कनेक्शन की झलक देखने वाले उपयोगकर्ता

कनेक्शन की झलक देखने वाला टूल, किसी ऐसे कनेक्शन की विज़ुअल झलक बनाता है जिसे मंज़ूरी मिलना बाकी है. इससे आपको यह पता चलता है कि छोड़े जाने पर, ड्रैगिंग ब्लॉक कहां कनेक्ट होगा.

डिफ़ॉल्ट कनेक्शन की झलक दिखाने वाले टूल में इंसर्शन मार्कर लगाए जाते हैं. इन मार्कर की मदद से ही ब्लॉक कनेक्ट किए जाते हैं. यह कनेक्शन को भी हाइलाइट करता है और उन ब्लॉक पर फ़ेड इफ़ेक्ट डालता है जिन्हें बदला और डिसकनेक्ट किया जाएगा.

किस तरह के कनेक्शन को मंज़ूरी मिलना बाकी है

कनेक्शन दो तरह के होते हैं, जिन्हें मंज़ूरी मिलना बाकी है. एक मामले में, हटाया गया ब्लॉक मौजूदा ब्लॉक की जगह ले लेता है और मौजूदा ब्लॉक डिसकनेक्ट हो जाता है. दूसरे मामले में, छोड़े गए ब्लॉक को बिना दूसरे ब्लॉक को डिसकनेक्ट किए डाला जाता है.

रीप्लेसमेंट

जब ड्रैग किए गए ब्लॉक पर मौजूद कोई कनेक्शन, ऐसे कनेक्शन से कनेक्ट होता है जिसमें पहले से ही ब्लॉक है, और मौजूदा ब्लॉक को फिर से अटैच करने की ज़रूरत नहीं होती, तो उसे बदला जाता है. खींचकर छोड़ा गया ब्लॉक छोड़ दिए जाने पर, बदला गया ब्लॉक डिसकनेक्ट हो जाएगा और खींचकर छोड़ा गया ब्लॉक अपनी जगह पर कनेक्ट हो जाएगा.

डिफ़ॉल्ट रूप से, हम इसे बदलने के लिए उस ब्लॉक पर फ़ेड इफ़ेक्ट डालकर इसकी जानकारी देते हैं.

घुसाव (इंसर्शन)

इंसर्शन दो मामलों में होता है. ऐसा तब होता है, जब ड्रैग किए गए ब्लॉक पर मौजूद कोई कनेक्शन, किसी खाली कनेक्शन से कनेक्ट होता है. ऐसा तब होता है, जब ड्रैग किए गए ब्लॉक पर मौजूद कोई कनेक्शन ऐसे कनेक्शन में जाता है जिसमें पहले से ही एक ब्लॉक होता है, लेकिन उसे दो मौजूदा ब्लॉक के बीच में डाला जा सकता है, ताकि मौजूदा ब्लॉक डिसकनेक्ट न हो.

डिफ़ॉल्ट रूप से, हम इंसर्शन मार्कर बनाकर और कनेक्ट होने वाले कनेक्शन को हाइलाइट करके, इस बारे में जानकारी देते हैं.

कस्टम झलक बनाएं

अगर आपको लंबित कनेक्शन की झलक देखने के लिए किसी अलग विज़ुअल का इस्तेमाल करना है, तो पसंद के मुताबिक IConnectionPreviewer को लागू किया जा सकता है.

निर्माण और निपटारा

आपको अपने IConnectionPreviewer के लिए, एक कंस्ट्रक्टर और डिस्पोज़ल का तरीका लागू करना होगा.

जब भी कोई ब्लॉक ड्रैग शुरू होता है, तो कंस्ट्रक्टर को कॉल किया जाता है और यह ड्रैग किए जा रहे ब्लॉक को पास कर देता है. अगर आपको ब्लॉक के आधार पर किसी स्टेट को शुरू करने की ज़रूरत है, तो कंस्ट्रक्टर में ऐसा किया जा सकता है.

class MyConnectionPreviewer implements IConnectionPreviewer {
  constructor(draggedBlock: Blockly.BlockSvg) {
    // Initialize state here.
  }
}

ब्लॉक ड्रैग खत्म होने पर dispose तरीका कॉल किया जाता है. अगर आपको अपने IConnectionPreviewer इंस्टेंस के निपटारे के दौरान, किसी ऐसी स्थिति को बदलने की ज़रूरत है, तो आपको यहां ऐसा करना चाहिए.

dispose() {
  // Dispose of and dereference any state.
}

झलक बनाएं

कनेक्शन की झलक देखने के लिए, आपके IConnectionPreviewer को लॉजिक लागू करना होगा.

रीप्लेसमेंट

रिप्लेसमेंट की झलक देखने के लिए, previewReplacement तरीके को लागू करें.

previewReplacement(draggedConn, staticConn, replacedBlock) {
  // Visually indicate that the replacedBlock will be disconnected, and the
  // draggedConn will be connected to the staticConn.
}

घुसाव (इंसर्शन)

इंसर्शन की झलक देखने के लिए, previewConnection तरीका लागू करें.

previewConnection(draggedConn, staticConn) {
  // Visually indicate the draggedConn will be connected to the staticConn.
}

अगर आपको इस आधार पर अलग झलक देखना है कि खींचा गया ब्लॉक किसी खाली इनपुट से कनेक्ट है या उसे ब्लॉक के बीच में डाला जा रहा है, तो देखें कि staticConn फ़िलहाल किसी दूसरे कनेक्शन से कनेक्ट है या नहीं. अगर staticConn अभी कनेक्ट है, तो draggedConn को ब्लॉक के बीच में डाला जा रहा है.

previewConnection(draggedConn, staticConn) {
  if (staticConn.targetConnection) {
    // The dragged block is being inserted between blocks.
  } else {
    // The dragged block is connecting to an empty input.
  }
}

CSS झलक

ब्लॉक पर सीएसएस लागू करके, कनेक्शन की झलक देखी जा सकती है. उदाहरण के लिए, blocklyReplaceable सीएसएस क्लास को ब्लॉक में जोड़कर, डिफ़ॉल्ट रीप्लेसमेंट फ़ेड को टॉगल किया जाता है.

previewReplacement(draggedConn, staticConn, replacedBlock) {
  Blockly.utils.dom.addClass(replacedblock.getSvgRoot(), 'my-custom-class');
}

रेंडरर की झलक

कनेक्शन की झलक देखने के लिए, कस्टम रेंडरर लागू करें. इसमें झलक देखने के लिए खास हुक होते हैं.

previewReplacement(draggedConn, staticConn, replacedBlock) {
  const renderer = replacedBlock.workspace.getRenderer()
  if (renderer.addReplacementIndicator) {
    renderer.addReplacementIndicator(replacedBlock);
  }
}

झलक छिपाएं

आपके IConnectionPreviewer में झलकों को छिपाने की अनुमति होनी चाहिए. इसे तब कॉल किया जाता है, जब खींचा गया ब्लॉक, सभी कनेक्शन की रेंज से बाहर चला जाता है. इसलिए, कोई झलक नहीं दिखेगी. झलक दिखाने वाले व्यक्ति को दिए जाने से ठीक पहले, इसे भी कॉल किया जाता है.

hidePreview() {
  // Remove CSS classes, toggle renderer methods, etc.
}

रजिस्ट्रेशन और इस्तेमाल

आख़िर में, IConnectionPreviewer बनाने के बाद, आपको उसे रजिस्टर करना होगा. यह रेंडरर को एक स्ट्रिंग से जोड़ता है, ताकि आप इसे अपने इंजेक्शन कॉन्फ़िगरेशन में भेज सकें. आपके पास IConnectionPreviewer क्लास (जैसे कि कंस्ट्रक्टर) को सीधे इंजेक्शन कॉन्फ़िगरेशन में पास करने का विकल्प भी है.

Blockly.registry.register(
  Blockly.registry.Type.CONNECTION_PREVIEWER,
  'MyConnectionPreviewer',
  MyConnectionPreviewer,
);

// You can use the string.
const myWorkspace = Blockly.inject({
  // options...
  plugins: {
    connectionPreviewer: 'myConnectionPreviewer',
  },
};

// Or you can pass the class / constructor directly.
const myWorkspace = Blockly.inject({
  // options...
  plugins: {
    connectionPreviewer: MyConnectionPreviewer,
  },
};

रजिस्ट्रेशन के बारे में ज़्यादा जानकारी के लिए, सब-क्लास शामिल करना देखें.