תגובה בסביבת העבודה היא רכיב גרפי שאפשר להזין בו טקסט. בדרך כלל הנתונים משמשים לתיעוד של הקוד, בדיוק כמו תגובות בשפת תכנות מבוססת טקסט.
הפעלת תגובות בסביבת העבודה
כדי להפעיל תגובות ב-Workspace באפליקציה, צריך לתת למשתמשים דרך כלשהי ליצור אותן. דרך אחת לעשות זאת היא להוסיף פריט בתפריט ההקשר שיוצר תגובה בסביבת העבודה. תוכלו לרשום את פריטי ברירת המחדל בתפריט ההקשר כדי ליצור, למחוק ולשכפל תגובות ב-Workspace באמצעות הקוד הבא:
// This should be called on page load. It can be called before or after
// you inject your workspace.
Blockly.ContextMenuItems.registerCommentOptions();
תוכלו גם ליצור אפשרויות משלכם לתפריט ההקשר, או להוסיף דרך נוספת שבה המשתמש יוכל להוסיף תגובות בסביבת העבודה. למידע נוסף על האפשרויות בתפריט ההקשר, ראו תפריטי הקשר.
התאמה אישית של התגובות
יש כמה דרכים להתאים אישית את מראה התגובות בסביבת העבודה. הפורמטים האלה משתמשים ב-CSS ולא בעיצובים. ניתן לשלוט ברוב הצבעים והגדלים של חלקים שונים בתגובה, אבל לא על האופן שבו הם ממוקמים.
צבע משתני CSS
אפשר להגדיר את משתנה ה-CSS commentFillColour לשינוי צבע הרקע של אזור הטקסט. אפשר להגדיר את משתנה ה-CSS commentBorderColour שישנה את הצבע של הסרגל העליון של התגובות ואת הגבול של התגובה.
.blocklyWorkspace {
--commentFillColour: blue;
--commentBorderColour: red;
}
מחלקות CSS
קיימים מחלקות שונות של CSS שהוקצו לרכיבים שונים בתצוגת התגובות, וכך אפשר לשנות את סגנון הרכיבים.
| מחלקות של CSS | תמונה |
|---|---|
| חסימת תגובות, blocklyDraggable | 
|
| blocklySelected, blocklyCommenthighlight |  
|
| blocklyCollapsed |  |
| blocklyCommentTopbar |  |
| blocklyFoldoutIcon |  |
| blocklyCommentPreview, blocklyText | 
|
| blocklyDeleteIcon |  |
| blocklyText |  |
| blocklyResizeHandle |  |
שימוש בסיסי ב-CSS
ברוב המקרים, תוכלו להחיל את המאפיינים המותאמים אישית עם סיווג ה-CSS המתאים:
.blocklyCommentTopbarBackground {
height: 50px;
}
CSS לטקסט
עם זאת, לטקסט צריך להיות ספציפי יותר כדי לבטל את ה-CSS שנוצר על ידי כלי הרינדור.
/* Modifies the preview text. */
.blocklyComment .blocklyCommentPreview.blocklyText {
fill: blue;
}
/* Modifies the input text. */
.blocklyComment .blocklyText {
color: blue;
}
CSS עבור ההדגשות שנבחרו
כדי להדגיש את התגובה כשהיא מסומנת, יש להחיל את האובייקט ב-CSS על שינויים בהתאם למצב התגובה - מכווצת או לא. כשהיא מכווצת, מחילים את ה-CSS על blocklyCommentTopbarBackground, אחרת מחילים אותו על blocklyCommentHighlight.
/* Highlight when expanded. */
.blocklySelected .blocklyCommentHighlight {
stroke: #fc3;
stroke-width: 3px;
}
/* Hide normal highlight when collapsed. */
.blocklyCollapsed.blocklySelected .blocklyCommentHighlight {
stroke: none;
}
/* Instead apply the collapsed highlight to the top bar. */
.blocklyCollapsed.blocklySelected .blocklyCommentTopbarBackground {
stroke: #fc3;
stroke-width: 3px;
}
סמלים
המחלקות blocklyFoldoutIcon, blocklyDeleteIcon ו-blocklyResizeHandle חלות על רכיבי <image>. המשמעות היא שאם רוצים לשנות את הצבע או הצורה של סמל, אפשר לכלול תמונה אחרת בתיקיית המדיה.
| Image name | תמונה |
|---|---|
| Foldout-arrow.svg | |
| delete-icon.svg | |
| resize-handle.svg | |
סמל מחיקה
סמל המחיקה מוסתר כברירת מחדל. אם אתם רוצים להפעיל אותו, תצטרכו להשתמש ב-CSS כדי שהוא יהיה גלוי:
.blocklyDeleteIcon {
display: block;
}