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

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

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

लंबित कनेक्शन के प्रकार

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

रीप्लेसमेंट

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

डिफ़ॉल्ट रूप से, हम उस ब्लॉक पर एक फ़ेड प्रभाव लागू करके यह संकेत देते हैं कि बदला गया.

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

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

डिफ़ॉल्ट रूप से, हम इंसर्शन मार्कर बनाकर और कनेक्ट कर देगा.

झलक दिखाने वाला कस्टम टूल बनाना

अगर आपको अधूरे कनेक्शन की झलक देखने के लिए किसी दूसरे विज़ुअल का इस्तेमाल करना है, तो पसंद के मुताबिक 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,
  },
};

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