תפריטי הקשר

תפריט ההקשר מכיל רשימה של פעולות שאפשר לבצע הקשורות לרכיב מסוים בסביבת העבודה. תפריט הקשר מוצג כשלוחצים לחיצה ימנית ובלחיצות ארוכות.

תוכל ליצור אפשרות מותאמת אישית של תפריט ההקשר אם ברצונך להוסיף סוג חדש של פעולה שהמשתמש יכול לבצע. לדוגמה, ארגון כל הבלוקים בסביבת העבודה או הורדת תמונה של הבלוקים. אם לדעתכם לא נשתמש בפעולה הזו לעיתים רחוקות, תוכלו להיעזר בתפריט ההקשר. אחרת, תוכלו ליצור דרך נגישה יותר לגשת לפעולה.

הערה: עיינו במעבדת הקוד של תפריט ההקשר כדי לראות דוגמאות לעבודה בהוספת אפשרויות של תפריט הקשר.

הטמעת אפשרות חדשה

כדי להטמיע אפשרות חדשה של תפריט ההקשר, יש למלא את הבקשה בממשק RegistryItem.

ID

המאפיין id צריך להיות מחרוזת ייחודית שמציינת מה האפשרות בתפריט ההקשר עושה.

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

היקף

המאפיין scopeType מציין ל-blockly באיזה הקשר אפשרות התפריט עשויה להופיע ואיזה מידע צריך להעביר ל-displayText, ל-preconditionFn ול-callback. אפשר להקצות תפריטי הקשר לבלוקים, לתגובות בסביבת העבודה ולסביבות עבודה.

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

אם רוצים שתפריט ההקשר יפעל בכמה היקפים, צריך לשכפל את האפשרות בתפריט ההקשר ולהגדיר מחדש את פרמטר ההיקף לכל היקף.

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 שפועלת באופן דומה.

הסרת אפשרות

אפשר להסיר אפשרות מתפריט ההקשר על ידי ביטול הרישום שלה לפי המזהה.

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

המזהים של אפשרויות ברירת המחדל מופיעים ב-contextmenu_items.ts.

שינוי של אפשרות

כדי לשנות אפשרות קיימת, אפשר לקבל את הפריט מהמרשם ולשנות אותו במקום.

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