قابل کشیدن

یک draggable یک شی رندر شده است که در فضای کاری وجود دارد و می توان آن را کشیده و رها کرد. آنها رابط IDraggable را پیاده سازی می کنند.

شرایط بسیار کمی وجود دارد که بخواهید یک قابل کشیدن جدید را به Blockly اضافه کنید (به عنوان مثال پلاگین چند انتخابی ، یا تغییر نحوه مدیریت کشیدن یک شی موجود)، زیرا نمی توانید اشیاء رندر شده جدید را به Blockly اضافه کنید. تنها اشیاء رندر شده ای که می توانند در یک فضای کاری وجود داشته باشند بلوک ها، حباب ها و نظرات فضای کاری هستند.

مسئولیت ها

Draggable ها در هنگام اجرای درگ چندین مسئولیت دارند:

• انتقال عناصر svg به لایه کشیدن .
• ترجمه عناصر svg.
• رویدادهای حرکت شلیک

پیاده سازی

برای ایجاد یک قابل کشیدن جدید، باید رابط های IRenderedElement و IDraggable را پیاده سازی کنید. این به Blockly اجازه می دهد تا بداند که شی شما قابل مشاهده است و می توان آن را درگ کرد.

class MyDraggable extends IRenderedElement, IDraggable {}

عنصر ریشه SVG را برگردانید

متد getRootSvg عنصر root svg (معمولاً یک گروه ) را برمی‌گرداند که همه عناصر دیگر را که نمای قابل کشیدن را تشکیل می‌دهند، نگه می‌دارد.

getSvgRoot() {
  return this.rootSvg;
}

قابلیت جابجایی برگشتی

متد isMovable نشان می دهد که آیا قابل کشیدن در حال حاضر متحرک است یا خیر (زیرا ممکن است بخواهید به طور موقت کشیدن یک شی را غیرفعال کنید). اگر isMovable false را برگرداند، فضای کاری به جای آن کشیده می‌شود.

isMovable() {
  return true;
}

موقعیت بازگشت

متد getRelativeToSurfaceXY یک Coordinate را برمی‌گرداند که مکان گوشه ابتدایی قابل کشیدن را در مختصات فضای کاری مشخص می‌کند.

مختصات فضای کاری یک مبدأ در سمت چپ مطلق و بالای مطلق فضای کاری دارند. و وقتی فضای کاری کوچک یا جابجا می شود، تغییر نمی کنند.

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 یک کشیدن را پاک می‌کند، داده‌ها یا اشیاء ذخیره‌شده را آزاد می‌کند و قابل کشیدن را به لایه اصلی خود برمی‌گرداند.

اگر revertDrag فراخوانی شود، همیشه endDrag بعد از 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 را پیاده سازی کند.

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 را تعریف کنید تا اجازه چسباندن آن را بدهد.

برای اطلاعات بیشتر در مورد کپی چسباندن به کپی پیست مراجعه کنید.