ड्रैगर

ड्रैगर एक कंट्रोलर ऑब्जेक्ट होता है. यह उपयोगकर्ता के इंटरैक्शन के जवाब में, ड्रैग किए जा सकने वाले आइटम को खींचने और छोड़ने की सुविधा को कंट्रोल करता है.

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

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

खींचने और छोड़ने की कार्रवाई करते समय, खींचने वाले की कई ज़िम्मेदारियां होती हैं:

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

लागू करना

कस्टम ड्रैगर बनाने के लिए, आपको IDragger इंटरफ़ेस लागू करना होगा.

class MyDragger implements IDragger {
  // Takes in the draggable being dragged and the workspace the drag
  // is occurring in.
  constructor(draggable, workspace);
}

आप पहले से मौजूद Blockly.dragging.Dragger को सब-क्लास भी कर सकते हैं. यह पहले से ही बुनियादी ज़िम्मेदारियां संभालता है.

आइटम को खींचने और छोड़ने की सुविधा चालू करना

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

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

onDragStart(e) {
  this.startLoc = this.draggable.getRelativeToSurfaceXY();

  this.draggable.startDrag(e);
}

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

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

इससे, उन सभी ड्रैग टारगेट को भी अपडेट किया जाना चाहिए जिन पर कर्सर घुमाया जा रहा है.

• wouldDelete को हमेशा ड्रैग टारगेट पर मौजूद दूसरे हुक को कॉल करने से पहले कॉल किया जाना चाहिए.
• नए ड्रैग टारगेट पर onDragEnter को कॉल करने से पहले, onDragExit को हमेशा पुराने ड्रैग टारगेट पर कॉल करना चाहिए.
• onDragOver को तब कॉल किया जाना चाहिए, जब खींचें और छोड़ें टारगेट पर पहली बार कर्सर घुमाया गया हो. साथ ही, onDrag को हर उस कॉल पर कॉल किया जाना चाहिए जहां खींचें और छोड़ें टारगेट पर कर्सर अब भी घुमाया जा रहा हो.onDragEnter

onDrag(e, totalDelta) {
  // Update the draggable location.
  const delta = this.pixelsToWorkspaceUnits(totalDelta);
  const newLoc = Coordinate.sum(this.startLoc, delta);
  this.draggable.drag(newLoc, e);

  // Call wouldDeleteDraggable.
  if (isDeletable(this.draggable)) {
    this.draggable.setDeleteStyle(
      // Checks that the drag target is an `IDeleteArea` and calls `wouldDelete`
      // on it.
      this.wouldDeleteDraggable(e, this.draggable),
    );
  }

  const newDragTarget = this.workspace.getDragTarget(e);
  if (this.dragTarget !== newDragTarget) {
    // Call `onDragExit` then `onDragEnter`.
    this.dragTarget?.onDragExit(this.draggable);
    newDragTarget?.onDragEnter(this.draggable);
  }
  // Always call `onDragOver`
  newDragTarget?.onDragOver(this.draggable);
  this.dragTarget = newDragTarget;
}

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

onEndDrag विधि, आइटम को खींचने और छोड़ने की प्रोसेस को खत्म करती है. इससे, खींचे और छोड़े जा सकने वाले आइटम को यह सूचना मिलनी चाहिए कि खींचने की प्रोसेस पूरी हो गई है. साथ ही, खींचे और छोड़े जा सकने वाले आइटम पर कर्सर घुमाने पर, उस आइटम को यह सूचना मिलनी चाहिए कि खींचे और छोड़े जा सकने वाले आइटम को छोड़ दिया गया है. अगर ड्रैग टारगेट, मिटाया गया एरिया है, तो ड्रैग टारगेट को भी नष्ट करना चाहिए.

• onDrop को हमेशा दूसरे तरीकों से पहले कॉल किया जाना चाहिए.
• अगर ड्रैग टारगेट, ड्रैग होने से रोकता है, तो revertDrag को कॉल किया जाना चाहिए.
• endDrag को ड्रैग को वापस लाने के बाद, लेकिन डिस्पोज करने से पहले कॉल किया जाना चाहिए.
• अगर ड्रैग टारगेट, मिटाए गए इलाके को असाइन किया गया है, तो dispose को कॉल किया जाना चाहिए.

onDragEnd(e) {
  // Call `onDrop` first.
  const dragTarget = this.workspace.getDragTarget(e);
  if (dragTarget) {
    this.dragTarget?.onDrop(this.draggable);
  }

  // Then revert the drag (if applicable).
  if (this.shouldReturnToStart(e, this.draggable)) {
    this.draggable.revertDrag();
  }

  // Then end the drag.
  this.draggable.endDrag(e);

  // Then delete the draggable (if applicable).
  if (
    isDeletable(this.draggable) &&
    this.wouldDeleteDraggable(e, this.draggable)
  ) {
    this.draggable.dispose();
  }
}

रजिस्ट्रेशन

आपकी ड्रैगर क्लास को रजिस्टर करना ज़रूरी है, ताकि ड्रैग का पता चलने पर उसे बनाया जा सके.

// Note that the type is BLOCK_DRAGGER even though draggers drag more than
// blocks. The name is for backwards compatibility.
Blockly.registry.register(registry.Type.BLOCK_DRAGGER, 'MY_DRAGGER', MyDragger);

इस्तेमाल

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

const myWorkspace = Blockly.inject('blocklyDiv', {
  plugins: {
    // Note that we pass this to blockDragger even though draggers drag more
    // than blocks. The name is for backwards compatibility.
    blockDragger: MyDragger,
  },
});