Commentaires Workspace

Un commentaire d'espace de travail est un élément graphique dans lequel vous pouvez saisir du texte. Il est généralement utilisé pour documenter des éléments de votre code, tout comme les commentaires dans un langage de programmation textuel.

Remarque : Les commentaires d'espace de travail ne peuvent pas être ajoutés au menu déroulant.

Activer les commentaires dans l'espace de travail

Pour activer les commentaires dans l'espace de travail dans votre application, vous devez permettre aux utilisateurs de les créer. Pour ce faire, vous pouvez ajouter un élément de menu contextuel qui crée un commentaire dans l'espace de travail. Vous pouvez enregistrer des éléments de menu contextuel par défaut pour créer, supprimer et dupliquer des commentaires dans l'espace de travail à l'aide du code suivant :

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

Vous pouvez également créer vos propres options de menu contextuel ou ajouter une autre façon pour l'utilisateur d'ajouter des commentaires à l'espace de travail. Pour en savoir plus sur les options du menu contextuel, consultez Menus contextuels.

Personnaliser visuellement les commentaires

Vous pouvez personnaliser l'apparence des commentaires dans l'espace de travail de plusieurs façons. Elles utilisent le CSS et non les thèmes. Il est possible de contrôler la plupart des couleurs et des tailles des différentes parties du commentaire, mais pas leur position.

Variables CSS de couleur

Vous pouvez définir la variable CSS commentFillColour pour modifier la couleur d'arrière-plan de la zone de texte. Vous pouvez définir la variable CSS commentBorderColour pour modifier la couleur de la barre supérieure et de la bordure du commentaire.

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

Classes CSS

Différentes classes CSS sont attribuées aux différents éléments de la vue des commentaires, ce qui vous permet de modifier le style des éléments.

Classe(s) CSS	Image
blocklyComment, blocklyDraggable
blocklySelected, blocklyCommentHighlight
blocklyCollapsed
blocklyCommentTopbar
blocklyFoldoutIcon
blocklyCommentPreview, blocklyText
blocklyDeleteIcon
blocklyText
blocklyResizeHandle

Utilisation de base du CSS

Dans la plupart des cas, vous pouvez appliquer vos attributs personnalisés avec la classe CSS appropriée :

.blocklyCommentTopbarBackground {
  height: 50px;
}

CSS pour le texte

Toutefois, pour le texte, vous devez être plus précis pour remplacer le code CSS généré par le moteur de rendu.

/* Modifies the preview text. */
.blocklyComment .blocklyCommentPreview.blocklyText {
  fill: blue;
}

/* Modifies the input text. */
.blocklyComment .blocklyText {
  color: blue;
}

CSS pour les temps forts sélectionnés

Pour mettre en surbrillance le commentaire lorsqu'il est sélectionné, l'objet auquel le CSS doit être appliqué change selon que le commentaire est réduit ou non. Lorsqu'il est réduit, vous appliquez le CSS à blocklyCommentTopbarBackground, sinon appliquez-le à 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;
}

Icônes

Les classes blocklyFoldoutIcon, blocklyDeleteIcon et blocklyResizeHandle sont toutes appliquées aux éléments <image>. Cela signifie que si vous souhaitez modifier la couleur ou la forme d'une icône, vous pouvez inclure une image différente dans votre dossier de ressources multimédias.

Nom de l'image	Image
foldout-icon.svg
delete-icon.svg
resize-handle.svg

Icône Supprimer

L'icône de suppression est masquée par défaut. Si vous souhaitez l'activer, vous devez utiliser CSS pour la rendre visible :

.blocklyDeleteIcon {
  display: block;
}

Taille par défaut

Pour définir la taille des commentaires par défaut, définissez la propriété statique Blockly.comments.CommentView.defaultCommentSize :

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