قابلة للسحب

القابل للسحب هو كائن معروض متوفّر في مساحة العمل ويمكن سحبه وإفلاته. ينفّذون واجهة IDraggable.

هناك حالات قليلة جدًا تحتاج فيها إلى إضافة عنصر سحب جديد إلىBlockly (مثل المكوِّن الإضافي للتحديد المتعدد أو تغيير طريقة سحب عنصر حالي)، لأنه لا يمكنك إضافة كائنات معروضة جديدة إلى بشكل Blockly. الكائنات الوحيدة المعروضة التي يمكن أن توجد داخل مساحة العمل هي الكتل والفقاعات التفسيرية وتعليقات مساحة العمل.

المسؤوليات

لدى السحب العديد من المسؤوليات عند تنفيذ عمليات السحب:

• نقل عناصر svg إلى طبقة السحب.
• ترجمة عناصر svg.
• تنشيط أحداث الحركات.

التنفيذ

لإنشاء شاشة جديدة قابلة للسحب، عليك تنفيذ الواجهتَين IRenderedElement وIDraggable. يتيح هذا الإجراء لـ Blockly معرفة أنّ الكائن مرئي ويمكن سحبه.

class MyDraggable extends IRenderedElement, IDraggable {}

عرض عنصر SVG الجذر

تعرض الطريقة getRootSvg عنصر svg الجذر (يكون عادةً مجموعة) والذي يحتوي على جميع العناصر الأخرى التي تشكّل طريقة العرض القابل للسحب.

getSvgRoot() {
  return this.rootSvg;
}

إمكانية تحريك الرجوع

تعرض الطريقة isMovable ما إذا كان القابل للسحب قابلاً للنقل في الوقت الحالي (لأنّك قد تحتاج إلى إيقاف سحب أحد العناصر مؤقتًا). في حال عرض دالة isMovable false، يتم سحب مساحة العمل بدلاً من ذلك.

isMovable() {
  return true;
}

موضع الإرجاع

تعرض الطريقة getRelativeToSurfaceXY القيمة Coordinate التي تحدد موقع بداية الزاوية القابلة للسحب في إحداثيات مساحة العمل.

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

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

لاختيار قابل للسحب، يجب تنفيذ الواجهة 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));
  }

التوافق

يمكن للسحب القابل للسحب تنفيذ واجهات إضافية ليتمكّن من التفاعل مع الأنظمة الأخرى في Blockly.

قابلة للحذف

يمكنك تنفيذ واجهة 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 للسماح بلصقه.

لمزيد من المعلومات حول النسخ واللصق، يُرجى الاطّلاع على نسخ اللصق.