সংযোগ প্রিভিউয়ার

একটি সংযোগ প্রিভিউয়ার একটি মুলতুবি সংযোগের একটি ভিজ্যুয়াল পূর্বরূপ তৈরি করে। এটি আপনাকে একটি ইঙ্গিত দেয় যেখানে ড্র্যাগিং ব্লকটি ড্রপ করার সময় সংযুক্ত হবে।

ডিফল্ট সংযোগ প্রিভিউয়ার সন্নিবেশ মার্কার রাখে যেখানে ব্লকগুলি সংযুক্ত হবে। এটি সংযোগগুলিকেও হাইলাইট করে এবং প্রতিস্থাপন এবং সংযোগ বিচ্ছিন্ন করা ব্লকগুলিতে একটি বিবর্ণ প্রভাব রাখে।

মুলতুবি সংযোগ ধরনের

দুটি ধরণের মুলতুবি সংযোগ রয়েছে। একটি ক্ষেত্রে, বাদ দেওয়া ব্লকটি একটি বিদ্যমান ব্লককে প্রতিস্থাপন করে, এবং বিদ্যমান ব্লকটি সংযোগ বিচ্ছিন্ন হয়। অন্য ক্ষেত্রে, ড্রপ করা ব্লকটি অন্য ব্লকের সংযোগ বিচ্ছিন্ন না করে ঢোকানো হয়।

প্রতিস্থাপন

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

ডিফল্টরূপে, যে ব্লকটি প্রতিস্থাপন করা হচ্ছে তার উপর একটি বিবর্ণ প্রভাব রেখে আমরা এটি নির্দেশ করি।

সন্নিবেশ

সন্নিবেশ দুটি ক্ষেত্রে ঘটে। এটি ঘটে যখন টেনে আনা ব্লকের একটি সংযোগ খালি একটি সংযোগের সাথে সংযোগ করতে যাচ্ছে। এবং এটি ঘটে যখন টেনে আনা ব্লকের একটি সংযোগ এমন একটি সংযোগে যাচ্ছে যার ইতিমধ্যে একটি ব্লক রয়েছে, কিন্তু এটি দুটি বিদ্যমান ব্লকের মধ্যে ঢোকানো যেতে পারে, তাই বিদ্যমান ব্লকটি সংযোগ বিচ্ছিন্ন হয় না।

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

একটি কাস্টম প্রিভিউয়ার তৈরি করুন

আপনি যদি মুলতুবি সংযোগগুলির পূর্বরূপ দেখতে একটি ভিন্ন ভিজ্যুয়াল ব্যবহার করতে চান তবে আপনি একটি কাস্টম 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 CSS ক্লাস যোগ করে ডিফল্ট প্রতিস্থাপন ফেড টগল করা হয়।

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

রেজিস্ট্রেশন সম্পর্কে আরও তথ্যের জন্য, ইনজেকশন সাবক্লাস দেখুন।