منوهای زمینه

یک منوی زمینه حاوی لیستی از اقداماتی است که می توانید در رابطه با برخی از عناصر در فضای کاری انجام دهید. یک منوی زمینه در کلیک راست و فشار طولانی نشان داده می شود.

اگر می‌خواهید نوع جدیدی از عملکرد را که کاربر می‌تواند انجام دهد اضافه کنید، ممکن است بخواهید یک گزینه منوی زمینه سفارشی ایجاد کنید. به عنوان مثال، سازماندهی تمام بلوک ها در فضای کاری یا دانلود تصویری از بلوک ها. اگر فکر می کنید از این عمل به ندرت استفاده می شود، منوی زمینه مکانی عالی برای قرار دادن آن است. در غیر این صورت، ممکن است بخواهید راه قابل کشف تری برای دسترسی به عمل ایجاد کنید.

توجه: برای نمونه‌های کارشده از افزودن گزینه‌های منوی زمینه ، کدهای منوی زمینه را بررسی کنید.

یک گزینه جدید را اجرا کنید

برای اجرای یک گزینه منوی زمینه جدید، باید رابط RegistryItem را تکمیل کنید.

شناسه

ویژگی id باید یک رشته منحصر به فرد باشد که نشان می دهد گزینه منوی زمینه شما چه می کند.

const deleteOption = {
  id: 'deleteElement',
};

دامنه

ویژگی scopeType به Blockly می گوید که گزینه منو در چه زمینه ای نمایش داده می شود و چه اطلاعاتی باید به displayText ، preconditionFn و callback آن منتقل شود. منوهای زمینه را می توان به بلوک ها، نظرات فضای کاری و فضاهای کاری محدود کرد.

const deleteOption = {
  scopeType: Blockly.ContextMenuRegistry.ScopeType.BLOCK,
};

اگر می‌خواهید منوی زمینه شما در چندین محدوده کار کند، باید گزینه منوی زمینه را کپی کرده و پارامتر scope را برای هر محدوده دوباره تعریف کنید.

const otherDeleteOption = {...deleteOption};
otherDeleteOption.scopeType = Blockly.ContextMenuRegistry.ScopeType.COMMENT;

نمایش متن

displayText چیزی است که باید به عنوان بخشی از گزینه منو به کاربر نشان داده شود. متن نمایشی می تواند یک رشته یا HTML یا تابعی باشد که یک رشته یا HTML را برمی گرداند.

const deleteOption = {
  displayText: 'Delete block',
};

اگر می خواهید ترجمه ای از Blockly.Msg را نمایش دهید، باید از یک تابع استفاده کنید. اگر سعی کنید مقدار را مستقیماً اختصاص دهید، ممکن است پیام ها بارگیری نشوند و به جای آن مقدار undefined دریافت خواهید کرد.

const deleteOption = {
  displayText: () => Blockly.Msg['MY_DELETE_OPTION_TEXT'],
};

اگر از یک تابع استفاده می‌کنید، یک مقدار Scope نیز به آن داده می‌شود که به شما امکان دسترسی به عنصری را می‌دهد که منوی زمینه با آن مرتبط است (مثلاً بلوک یا فضای کاری). می توانید از این برای اضافه کردن اطلاعات مربوط به عنصر به متن نمایشگر خود استفاده کنید.

const deleteOption = {
  displayText: (scope) => `Delete ${scope.block.type} block`,
}

وزن

weight ترتیب نمایش آیتم های منوی زمینه را تعیین می کند. مقادیر مثبت بیشتر نسبت به مقادیر کمتر مثبت کمتر در لیست نمایش داده می شود. (شما می توانید تصور کنید که گزینه های با وزن بالاتر "سنگین تر" هستند بنابراین به پایین فرو می روند.)

const deleteOption = {
  weight: 10;
}

وزن گزینه های منوی زمینه داخلی به ترتیب افزایش می یابد که از 1 شروع می شود و به 1 افزایش می یابد.

پیش شرط

علاوه بر scopeType ، می‌توانید از preconditionFn برای محدود کردن زمان و نحوه نمایش یک گزینه منوی زمینه استفاده کنید.

باید یکی از مجموعه‌ای از رشته‌ها را برگرداند: 'enabled' ، 'disabled' یا 'hidden' .

ارزش	توضیحات	تصویر
فعال شد	نشان می دهد که گزینه فعال است.
از کار افتاده است	نشان می دهد که گزینه فعال نیست.
پنهان شده است	گزینه را پنهان می کند.

به preconditionFn نیز یک Scope ارسال می شود که می توانید از آن برای تعیین وضعیت گزینه خود استفاده کنید.

const deleteOption = {
  preconditionFn: (scope) => {
    if (scope.block.isDeletable()) {
      return 'enabled';
    }
    return 'disabled';
  }
}

پاسخ به تماس

ویژگی callback عملکرد آیتم منوی زمینه شما را انجام می دهد. از یک Scope و یک PointerEvent عبور می کند. PointerEvent رویداد اصلی است که باعث باز شدن منوی زمینه شده است، نه رویدادی که یک گزینه را انتخاب کرده است. می‌توانید از رویداد برای تعیین محل کلیک استفاده کنید. این به شما امکان می دهد، برای مثال، یک بلوک جدید در محل کلیک ایجاد کنید.

const deleteOption = {
  callback: (scope, e) => {
    scope.block.dispose();
  }
}

ثبت نام

برای استفاده از گزینه منوی زمینه خود، باید آن را ثبت کنید. شما باید این کار را یک بار در بارگذاری صفحه انجام دهید. ممکن است قبل یا بعد از تزریق محل کارتان اتفاق بیفتد.

const deleteOption = { /* implementations from above */ };
Blockly.ContextMenuRegistry.registry.register(deleteOption);

گزینه ها را در هر نوع بلوک تغییر دهید

بلوک ها یک راه اضافی برای تغییر منوهای زمینه دارند که استفاده از بازنویسی ویژگی customContextMenu آنهاست. این روش آرایه‌ای از اشیاء ContextMenuOption را می‌گیرد (که از آیتم‌های فهرست ثبت‌شده جمع‌آوری می‌شوند) و سپس آن آرایه را در جای خود تغییر می‌دهد تا مجموعه نهایی گزینه‌های نمایش داده شده را تعیین کند.

برای اطلاعات بیشتر به تعریف بلوک ها، منوهای زمینه سفارشی مراجعه کنید.

فضاهای کاری همچنین دارای یک متد configureContextMenu هستند که به طور مشابه کار می کند.

یک گزینه را حذف کنید

می‌توانید با لغو ثبت آن توسط ID، گزینه‌ای را از منوی زمینه حذف کنید.

Blockly.ContextMenuRegistry.registry.unregister('someID');

شناسه‌های گزینه‌های پیش‌فرض در contextmenu_items.ts هستند.

یک گزینه را اصلاح کنید

شما می توانید یک گزینه موجود را با دریافت مورد از رجیستری و سپس اصلاح آن در محل تغییر دهید.

const option = Blockly.ContextMenuRegistry.registry.getItem('someID');
option?.displayText = 'some other display text';