أدوات معاينة الربط

تُنشئ أداة معاينة الاتصال معاينة مرئية لاتصال معلق. يمنحك ذلك مؤشرًا على المكان الذي سيتم فيه ربط كتلة السحب عند إسقاطها.

تضع أداة معاينة الاتصال التلقائية علامات إدراج حيث سيتم ربط الكتل. كما أنه يسلط الضوء على الاتصالات ويضع تأثير التلاشي على الكتل التي سيتم استبدالها وإلغاء توصيلها.

أنواع الاتصالات في انتظار المراجعة

هناك نوعان من الاتصالات المعلّقة. وفي إحدى الحالات، تحلّ المجموعة التي تم إسقاطها محلّ الكتلة الحالية، ويتم فصل القطعة الحالية. وفي الحالة الأخرى، يتم إدراج القطعة التي تم إسقاطها دون فصل القوالب الأخرى.

البديل

يحدث الاستبدال عندما يتصل اتصال على الجزء الذي تم سحبه باتصال يتضمن كتلة من قبل، ولا يوجد مكان لإعادة ربط الكتلة الحالية. عند إسقاط القطعة التي تم سحبها، سيتم فصل القطعة التي تم استبدالها، وسيتم توصيل القطعة المسحوبة في مكانها.

بشكل افتراضي، نشير إلى ذلك من خلال وضع تأثير التلاشي على الكتلة التي يتم استبدالها.

إدراج

يحدث الإدراج في حالتين. يحدث ذلك عندما يتصل اتصال على الجزء الذي تم سحبه باتصال فارغ. ويحدث ذلك عندما ينتقل اتصال في المجموعة المسحوبة إلى اتصال سبق أن تم حظر الوصول إليه، ولكن يمكن إدراجه بين الكتلة الحالية حتى لا يتم إلغاء الربط بين الكتلة الحالية.

بشكل تلقائي، نشير إلى ذلك من خلال إنشاء علامات إدراج، وتمييز عمليات الربط التي سيتم ربطها.

إنشاء أداة معاينة مخصّصة

إذا كنت تريد استخدام عنصر مرئي مختلف لمعاينة الاتصالات المعلّقة، يمكنك إنشاء عملية تنفيذ 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

يمكنك معاينة الاتصالات عن طريق تطبيق css على الكتلة. على سبيل المثال، يتم تبديل التلاشي التلقائي للاستبدال عن طريق إضافة فئة CSS blocklyReplaceable إلى المجموعة.

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

لمزيد من المعلومات حول التسجيل، يمكنك الاطّلاع على إدخال الفئات الفرعية.