כלי רינדור

הכלי לעיבוד ב-Blockly שולט בצורה של הבלוק, כולל הגובה, המרווח הפנימי, עובי הגבולות וצורת החיבור.

כלי רינדור בהתאמה אישית

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

כדי ליצור כלי לרינדור בהתאמה אישית, צריך:

1. מגדירים כלי חדש לרינדור. אפשר לתת מחלקה משנית למחלקה הבסיסית של הרינדור או לכל אחד מהכלים הקיימים לרינדור, בהתאם לשיטה שבה אתם רוצים להתחיל.
2. שינוי החלקים שברצונך לשנות.
   1. לדוגמה, כדי להוסיף עוד מרווח פנימי לבלוקים, אפשר לתת לסיווג משנה ConstantProvider (שוב, הבסיס או כל רינדור קיים) ולשנות את הקבוע הרלוונטי. כל שאר הערכים יישארו זהים למחלקת הבסיס שבחרתם.
   2. במחלקה המותאמת אישית Renderer, צריך לחבר את המחלקה החדשה ConstantProvider. שינוי הפונקציה makeConstants_ כדי להחזיר מופע חדש של ה-ConstantProvider בהתאמה אישית במקום את מחלקת הבסיס.
   3. כשמשנים מחלקות אחרות כמו PathObject או Drawer, צריך לבצע את אותו התהליך.

3. רישום של כלי הרינדור:

   Blockly.blockRendering.register('custom_renderer', CustomRenderer);
   

4. השתמשו בכלי לרינדור באפליקציה שלכם:

   Blockly.inject('blocklyDiv', {
     renderer: 'custom_renderer'
   });
   

כלי רינדור מובנים

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

• geras (ברירת מחדל)
• thrasos (גרסה מודרנית יותר על ז'ראס)
• zelos (כמו שריטות)
• מינימליסטי (מחלקות הבסיס של הרינדור)

כדי להשתמש באחד מהמאפשרים האלה, צריך להעביר את השם לאפשרויות ההזרקה:

Blockly.inject('blocklyDiv', {
  renderer: 'thrasos'
});

כדי לתת מחלקה משנית, צריך להרחיב את המחלקות המתאימות:

class CustomRenderer extends Blockly.geras.Renderer {}
class CustomConstantProvider extends Blockly.geras.ConstantProvider {}