عناصر قابلة للسحب مخصّصة

العنصر القابل للسحب هو عنصر معروض يتوفّر في مساحة العمل ويمكن سحبه وإفلاته. وهي تنفّذ الواجهة 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 تحدّد موضع الزاوية العلوية اليسرى للعنصر القابل للسحب في مساحة العمل باستخدام إحداثيات مساحة العمل.

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

getRelativeToSurfaceXY() {
  return this.loc;
}

بدء عمليات السحب

تُهيّئ الطريقة startDrag عملية سحب العنصر القابل للسحب. لا تنقل هذه الطريقة العنصر القابل للسحب. ولكن عليك تخزين أي بيانات أو إنشاء أي عناصر تحتاج إليها لإكمال عملية السحب. ويشمل ذلك أي بيانات تحتاج إليها لإعادة عملية السحب إذا تم استدعاء revertDrag.

يجب أيضًا تغيير عناصر SVG لتكون في طبقة السحب الخاصة بمساحة العمل، بحيث تظهر فوق أي عناصر أخرى.

تتلقّى هذه الدالة أيضًا حدثًا يمكنك استخدامه للتحقّق من المفاتيح التي تم الضغط عليها. يتيح لك ذلك (على سبيل المثال) التعامل مع عملية السحب أثناء الضغط على مفتاح Shift بشكل مختلف عن عملية السحب العادية.

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 للسماح بلصقه.

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