কাস্টম ড্র্যাগার

একটি ড্রেগার হল একটি নিয়ামক বস্তু যা ব্যবহারকারীর ইন্টারঅ্যাকশনের প্রতিক্রিয়ায় টেনে আনা ড্র্যাগেবলগুলিকে সমন্বয় করে।

খুব কম পরিস্থিতি রয়েছে যেখানে আপনি একটি কাস্টম ড্র্যাগার প্রয়োগ করতে চান, কারণ এমন অনেক কিছু নেই যা আপনি একটি ড্র্যাগ সমন্বয় করার বিষয়ে কাস্টমাইজ করতে চান। স্ক্রোল-অপশন প্লাগইনটি একটি কাস্টম ড্র্যাগার প্রয়োগ করে কারণ এটি ওয়ার্কস্পেসের প্রান্তে স্ক্রলিং যোগ করতে চায়, যা কিভাবে পিক্সেল স্থানাঙ্কগুলিকে ওয়ার্কস্পেস স্থানাঙ্কে রূপান্তরিত করা হয় তা পরিবর্তন করে।

দায়িত্ব

ড্র্যাগগুলি চালানোর সময় ড্র্যাগারের বেশ কয়েকটি দায়িত্ব রয়েছে:

• ড্র্যাগেবলে কলিং ড্র্যাগ পদ্ধতি।
• কর্মক্ষেত্র স্থানাঙ্কে টেনে নেওয়া যায় এমন অবস্থানের হিসাব করা।
• যেকোন হোভার্ড ড্র্যাগ টার্গেটে কলিং ড্র্যাগ টার্গেট পদ্ধতি।

বাস্তবায়ন

একটি কাস্টম ড্রেগার তৈরি করতে আপনাকে 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 উপর ভিত্তি করে টেনে নেওয়ার জন্য নতুন কর্মক্ষেত্রের অবস্থান গণনা করা উচিত, যা পিক্সেল স্থানাঙ্কে দেওয়া হয়েছে।

এটি যেকোন ড্র্যাগ লক্ষ্যগুলিকেও আপডেট করা উচিত যা হোভার করা হচ্ছে।

• ড্র্যাগ টার্গেটে অন্যান্য হুক কল করার আগে wouldDelete সর্বদা কল করা উচিত।
• নতুন ড্র্যাগ টার্গেটে onDragEnter কল করার আগে onDragExit সর্বদা পুরানো ড্র্যাগ টার্গেটে কল করা উচিত।
• প্রথমবার ড্র্যাগ টার্গেট হোভার করার পরে onDragOver কল করা উচিত onDragEnter এর পরে, এবং প্রতিটি অতিরিক্ত কলে onDrag যেখানে ড্র্যাগ টার্গেট এখনও হোভার করা আছে।

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,
  },
});