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

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

تضع أداة معاينة الاتصال التلقائية علامات إدراج. حيث ستتصل الكتل. كما أنه يبرز الروابط ويضيع تدريجيًا تأثير في الكتل التي سيتم استبدالها أو فصلها.

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

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

البديل

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

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

إدراج

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

نشير افتراضيًا إلى ذلك عن طريق إنشاء علامات إدراج وتمييز الاتصالات التي ستتصل.

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

إذا كنت تريد استخدام صورة مرئية مختلفة لمعاينة عمليات الربط المعلَّقة، يمكنك إنشاء تنفيذ مخصّص لـ 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,
  },
};

لمزيد من المعلومات حول التسجيل، يُرجى مراجعة إدخال فئات فرعية: