התאמה אישית מתקדמת

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

שיעורים שניתן להחליף

אפשר להחליף את המחלקות הבאות של Blockly:

שיעור Blockly	ממשק	שם סוג המרשם
Blockly.dragging.Dragger	Blockly.IDragger	blockDragger
Blockly.ConnectionChecker	Blockly.IConnectionChecker	connectionChecker
Blockly.InsertionMarkerPreviewer	Blockly.IConnectionPreviewer	connectionPreviewer
Blockly.HorizontalFlyout	Blockly.IFlyout	flyoutsHorizontalToolbox
Blockly.VerticalFlyout	Blockly.IFlyout	flyoutsVerticalToolbox
Blockly.MetricsManager	Blockly.IMetricsManager	metricsManager
Blockly.Toolbox	Blockly.IToolbox	toolbox
Blockly.VariableMap	Blockly.IVariableMap	variableMap
Blockly.VariableModel	Blockly.IVariableModel	--

במאמר יצירת רכיבי עיבוד מותאמים אישית מוסבר איך להחליף רכיב עיבוד.

יצירת כיתה חלופית

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

כדי לציין בבודק הסוגים שהטמעתם ממשק ספציפי, מוסיפים הערה לכיתה באמצעות התג @implements {InterfaceName} JSDoc (ב-JavaScript) או מילת המפתח implements (ב-TypeScript).

הודעה ל-Blockly על מחלקת ההחלפה

יש שתי דרכים להגדיר את מחלקת ההחלפה ב-Blockly: לרשום אותה כמחלקת ברירת המחדל של הסוג שלה (המומלצת), או להוסיף אותה באמצעות אפשרות ההגדרה plugins.

רישום הכיתה החלופית כברירת מחדל

הדרך המומלצת להגדיר ב-Blockly את מחלקת ההחלפה היא לרשום אותה כברירת המחדל לסוג שלה. כדי לעשות זאת, קוראים לפונקציה Blockly.registry.register באמצעות השם Blockly.registry.DEFAULT ומגדירים את הפרמטר opt_allowOverrides לערך true.

Blockly.registry.register(
  Blockly.registry.Type.VARIABLE_MODEL,
  Blockly.registry.DEFAULT,
  CustomVariableModel,
  true,
);

הוספת הכיתה החלופית

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

(למרות השם של המאפיין plugins, לא צריך לארוז את המחלקה ולהפיץ אותה דרך npm כמו התוספים שמשמשים להרחבת Blockly).

מעבירים את המחלקה החלופית אל Blockly.inject:

Blockly.inject('blocklyDiv', {
  plugins: {
    'metricsManager': CustomMetricsManagerClass
  }
}

אפשר גם לרשום את הכיתה באמצעות Blockly.registry.register ולהעביר את השם הרשום אל Blockly.inject. האפשרות הזו שימושית אם אתם מאחסנים את אפשרויות ההגדרה שלכם כ-JSON טהור.

Blockly.registry.register(Blockly.registry.Type.METRICS_MANAGER, 'YOUR_NAME', CustomMetricsManagerClass);

Blockly.inject('blocklyDiv', {
  plugins: {
    'metricsManager': 'YOUR_NAME'
  }
}