টেনে আনা যায়

ড্র্যাগেবল হল একটি রেন্ডার করা অবজেক্ট যা কর্মক্ষেত্রে বিদ্যমান এবং টেনে নিয়ে যাওয়া যায়। তারা IDraggable ইন্টারফেস বাস্তবায়ন করে।

খুব কম পরিস্থিতি আছে যখন আপনি ব্লকলিতে একটি নতুন টেনে আনার যোগ্য যোগ করতে চান (যেমন মাল্টিসিলেক্ট প্লাগইন , বা একটি বিদ্যমান অবজেক্ট কীভাবে টেনে নিয়ে যায় তা পরিবর্তন করে), কারণ আপনি ব্লকলিতে নতুন রেন্ডার করা বস্তু যোগ করতে পারবেন না। একটি ওয়ার্কস্পেসের মধ্যে থাকা একমাত্র রেন্ডার করা বস্তু হল ব্লক, বুদবুদ এবং ওয়ার্কস্পেস কমেন্ট।

দায়িত্ব

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

• svg উপাদানগুলিকে ড্র্যাগ স্তরে সরানো হচ্ছে।
• এসভিজি উপাদান অনুবাদ করা হচ্ছে।
• গুলি চালানোর ঘটনা ।

বাস্তবায়ন

একটি নতুন ড্র্যাগেবল তৈরি করতে, আপনাকে IRenderedElement এবং IDraggable ইন্টারফেসগুলি বাস্তবায়ন করতে হবে। এটি ব্লকলিকে জানতে দেয় যে আপনার বস্তুটি দৃশ্যমান এবং টেনে আনা যেতে পারে।

class MyDraggable extends IRenderedElement, IDraggable {}

রুট SVG উপাদান ফেরত দিন

getRootSvg পদ্ধতি রুট svg উপাদান (সাধারণত একটি গোষ্ঠী ) ফেরত দেয় যা টেনে নেওয়ার জন্য দৃশ্য তৈরি করে অন্য সমস্ত উপাদান ধারণ করে।

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 পদ্ধতিটি একটি ড্র্যাগ পরিষ্কার করে, যেকোনও সঞ্চিত ডেটা বা অবজেক্টকে ছেড়ে দেয় এবং টেনে নেওয়া যায় এমনটিকে তার আসল স্তরে ফিরিয়ে দেয়।

endDrag সবসময় revertDrag পরে বলা হয় যদি 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 ইন্টারফেস প্রয়োগ করতে হবে।

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

সামঞ্জস্য

আপনার ড্র্যাগেবল অতিরিক্ত ইন্টারফেস প্রয়োগ করতে পারে যাতে এটি ব্লকলিতে অন্যান্য সিস্টেমের সাথে যোগাযোগ করতে পারে।

মুছে ফেলা যায়

আপনি ট্র্যাশক্যান বা অন্যান্য মুছে ফেলা লক্ষ্যবস্তু দ্বারা আপনার ড্র্যাগেবল নিষ্পত্তি করার অনুমতি দেওয়ার জন্য 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 সংজ্ঞায়িত করতে পারেন।

কপি পেস্ট সম্পর্কে আরও তথ্যের জন্য কপি পেস্ট দেখুন।