תגובות ב-Workspace

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

הערה ב-Workspace

הפעלת הערות בסביבת העבודה

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

// This should be called on page load. It can be called before or after
// you inject your workspace.
Blockly.ContextMenuItems.registerCommentOptions();

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

התאמה אישית של התגובות מבחינה ויזואלית

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

משתני CSS של צבעים

אפשר להגדיר את משתנה ה-CSS‏ commentFillColour כדי לשנות את צבע הרקע של אזור הטקסט. אפשר להגדיר את משתנה ה-CSS‏ commentBorderColour כדי לשנות את הצבע של הסרגל העליון של התגובה ואת הגבול שלה.

.blocklyWorkspace {
  --commentFillColour: blue;
  --commentBorderColour: red;
}

תגובה במרחב עבודה עם שינוי הצבעים

מחלקות CSS

יש מחלקות CSS שונות שמוקצות לרכיבים שונים בתצוגת התגובות, והן מאפשרות לשנות את הסגנון של הרכיבים.

מחלקות CSS תמונה
blocklyComment, blocklyDraggable הערה ב-Workspace
blocklySelected, blocklyCommentHighlight התגובה שנבחרה תגובה מכווצת שנבחרה
blocklyCollapsed תגובה מצומצמת בסביבת העבודה
blocklyCommentTopbar סרגל ההערות העליון ב-Workspace
blocklyFoldoutIcon סמל הרחבת התפריט
blocklyCommentPreview, blocklyText תצוגה מקדימה של התגובה
blocklyDeleteIcon סמל המחיקה
blocklyText טקסט
blocklyResizeHandle סמל שינוי הגודל

שימוש בסיסי בשירות CSS

ברוב המקרים אפשר להחיל את המאפיינים המותאמים אישית באמצעות מחלקת ה-CSS המתאימה:

.blocklyCommentTopbarBackground {
  height: 50px;
}

תגובה במרחב עבודה עם סרגל עליון גבוה יותר

CSS לטקסט

עם זאת, כשמדובר בטקסט, צריך להיות יותר ספציפיים כדי לבטל את ה-CSS שנוצר על ידי רכיב ה-Renderer.

/* 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-icon.svg סמל הרחבת התפריט
delete-icon.svg סמל המחיקה
resize-handle.svg סמל שינוי הגודל

סמל המחיקה

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

.blocklyDeleteIcon {
  display: block;
}

גודל ברירת המחדל

כדי להגדיר את גודל ברירת המחדל של התגובה, מגדירים את המאפיין הסטטי Blockly.comments.CommentView.defaultCommentSize:

Blockly.comments.CommentView.defaultCommentSize = new Blockly.utils.Size(200, 200);