पसंद के मुताबिक ड्रैग करने लायक

ड्रैग किए जा सकने वाले ऑब्जेक्ट, रेंडर किए गए ऐसे ऑब्जेक्ट होते हैं जो वर्कस्पेस में मौजूद होते हैं. इन्हें ड्रैग और ड्रॉप किया जा सकता है. ये IDraggable इंटरफ़ेस लागू करते हैं.

Blockly में ड्रैग किए जा सकने वाले नए ऑब्जेक्ट जोड़ने की ज़रूरत बहुत कम पड़ती है.उदाहरण के लिए, मल्टीसिलेक्ट प्लगिन या मौजूदा ऑब्जेक्ट के ड्रैग करने के तरीके में बदलाव करना. ऐसा इसलिए है, क्योंकि Blockly में रेंडर किए गए नए ऑब्जेक्ट नहीं जोड़े जा सकते. वर्कस्पेस में सिर्फ़ ब्लॉक, बबल, और वर्कस्पेस में की गई टिप्पणियां रेंडर की जा सकती हैं.

ज़िम्मेदारियां

ड्रैग करने की प्रोसेस के दौरान, ड्रैग किए जा सकने वाले आइटम की कई ज़िम्मेदारियां होती हैं:

• एसवीजी एलिमेंट को ड्रैग लेयर में ले जाया जा रहा है.
• SVG एलिमेंट का अनुवाद किया जा रहा है.
• मूव इवेंट ट्रिगर किए जा रहे हैं.

लागू करना

ड्रैग किए जा सकने वाले नए ऑब्जेक्ट को बनाने के लिए, आपको IRenderedElement और IDraggable इंटरफ़ेस लागू करने होंगे. इससे Blockly को पता चलता है कि आपका ऑब्जेक्ट दिख रहा है और उसे खींचा जा सकता है.

class MyDraggable extends IRenderedElement, IDraggable {}

रूट SVG एलिमेंट दिखाता है

getRootSvg तरीका, रूट svg एलिमेंट (आम तौर पर group) दिखाता है. इसमें वे सभी एलिमेंट होते हैं जो ड्रैग किए जा सकने वाले एलिमेंट के व्यू को बनाते हैं.

getSvgRoot() {
  return this.rootSvg;
}

सामान लौटाने की सुविधा

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

isMovable() {
  return true;
}

सामान लौटाने की स्थिति

getRelativeToSurfaceXY वाला तरीका, Coordinate दिखाता है. इससे वर्कस्पेस के कोऑर्डिनेट में, ड्रैग किए जा सकने वाले एलिमेंट के सबसे ऊपर-बाईं ओर वाले कोने की जगह के बारे में पता चलता है.

वर्कस्पेस के कोऑर्डिनेट, वर्कस्पेस के सबसे बाएं और सबसे ऊपर से शुरू होते हैं. वर्कस्पेस को स्केल करने या उसकी जगह बदलने पर, ये नहीं बदलते.

getRelativeToSurfaceXY() {
  return this.loc;
}

खींचने और छोड़ने की कार्रवाइयां शुरू करें

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

साथ ही, इसे svg एलिमेंट को वर्कस्पेस की ड्रैग लेयर पर भी बदलना चाहिए, ताकि वे किसी भी अन्य एलिमेंट के ऊपर दिखें.

यह एक इवेंट भी लेता है. इसका इस्तेमाल, दबाई गई कुंजियों की जांच करने के लिए किया जा सकता है. इसकी मदद से, उदाहरण के लिए, किसी आइटम को एक जगह से दूसरी जगह ले जाते समय, उसे सामान्य तरीके से ले जाने के बजाय अलग तरीके से ले जाया जा सकता है.

startDrag(e) {
  // Save the original location so we can revert the drag.
  this.startLoc = this.getRelativeToSurfaceXY();

  // Disable resizing the workspace for performance.
  this.workspace.setResizesEnabled(false);

  // Put the element on the drag layer.
  this.workspace.getLayerManager()?.moveToDragLayer(this);

  // Fire a drag event...

  // etc...
}

खींचें और छोड़ें

drag तरीके से, ड्रैग किए जा सकने वाले ऑब्जेक्ट को असल में मूव किया जाता है. newLoc वर्कस्पेस के कोऑर्डिनेट में है. साथ ही, एक इवेंट भी पास किया गया है. इसका इस्तेमाल, दबाई गई कुंजियों की जांच करने के लिए किया जा सकता है.

drag(newLoc, e) {
  this.moveTo(newLoc);
}

खींचकर छोड़े गए आइटम को पहले जैसा करें

revertDrag तरीके से, ड्रैग किए जा सकने वाले एलिमेंट को उस जगह पर वापस ले जाया जाता है जहां से उसे ड्रैग करना शुरू किया गया था. ऐसा तब होता है, जब उदाहरण के लिए, ड्रैग किए जा सकने वाले आइटम को ऐसे ड्रैग टारगेट पर छोड़ दिया जाता है जो आइटम को हिलने से रोकता है.

revertDrag() {
  // Move back to the position that was stored in `startDrag`.
  this.moveTo(this.startLoc);
}

खींचने और छोड़ने की कार्रवाइयां खत्म करें

endDrag तरीके से, खींचने की प्रोसेस को बंद किया जाता है. साथ ही, सेव किए गए सभी डेटा या ऑब्जेक्ट को रिलीज़ किया जाता है. इसके अलावा, खींचकर छोड़े जा सकने वाले ऑब्जेक्ट को उसकी मूल लेयर पर वापस भेज दिया जाता है.

अगर revertDrag को कॉल किया जाता है, तो endDrag को हमेशा revertDrag के बाद कॉल किया जाता है.

endDrag() {
  // Put the element back on its original layer (in this case BLOCK).
  this.workspace
    .getLayerManager()
    ?.moveOffDragLayer(this, Blockly.layers.BLOCK);

  // Allow the workspace to start resizing again.
  this.workspace.setResizesEnabled(true);
}

चुनें

ड्रैग किए जाने वाले एलिमेंट का पता, उस एलिमेंट से चलता है जिसे ड्रैग का पता चलने पर चुना गया था.

ISelectable

ड्रैग किए जा सकने वाले किसी आइटम को चुनने के लिए, ISelectable इंटरफ़ेस लागू करना ज़रूरी है.

class MyDraggable implements ISelectable {
  constructor(workspace) {
    this.id = Blockly.utils.idGenerator.genUid();
    this.workspace = workspace;
  }

  select() {
    // Visually indicate this draggable is selected.
  }

  unselect() {
    // Visually indicate this draggable is not selected.
  }
}

चुना गया हिस्सा सेट करना

चुने गए एलिमेंट को Blockly.common.setSelected() को कॉल करके सेट किया जा सकता है. आम तौर पर, आपको यह कार्रवाई उपयोगकर्ता के pointerdown इवेंट के जवाब में करनी होगी.

  constructor() {
    this.initSvg();

    Blockly.browserEvents.conditionalBind(
      this.getSvgRoot(),
      'pointerdown',
      this,
      () => Blockly.common.setSelected(this));
  }

इनके साथ काम करता है

ड्रैग किए जा सकने वाले एलिमेंट में अतिरिक्त इंटरफ़ेस लागू किए जा सकते हैं, ताकि यह Blockly के अन्य सिस्टम के साथ इंटरैक्ट कर सके.

हटाने योग्य

IDeleteable इंटरफ़ेस लागू किया जा सकता है, ताकि ट्रैश कैन या मिटाने के अन्य टारगेट से ड्रैग किए जा सकने वाले आइटम को हटाया जा सके.

class MyDraggable implements IDeletable {
  isDeletable() {
    return true;
  }

  dispose() {
    // Dispose of any references to data or SVG elements.
  }

  setDeleteStyle() {
    // Visually indicate that the draggable is about to be deleted.
  }
}

कॉपी किया जा सकता है

ICopyable इंटरफ़ेस लागू करके, खींचकर छोड़े जा सकने वाले एलिमेंट को कॉपी करने की अनुमति दी जा सकती है. साथ ही, IPaster को तय करके, उसे चिपकाने की अनुमति दी जा सकती है.

कॉपी करके चिपकाने के बारे में ज़्यादा जानने के लिए, कॉपी करके चिपकाना लेख पढ़ें.