ワークスペースのコメント

ワークスペース コメントは、テキストを入力できるグラフィック要素です。通常は、テキストベースのプログラミング言語のコメントと同様に、コードに関する事項を文書化するために使用されます。

ワークスペースのコメント

ワークスペースのコメントを有効にする

アプリケーションでワークスペース コメントを有効にするには、ユーザーがコメントを作成する方法を提供する必要があります。この方法の 1 つは、ワークスペース コメントを作成するコンテキスト メニュー項目を追加することです。次のコードを使用して、ワークスペースのコメントの作成、削除、複製を行うデフォルトのコンテキスト メニュー項目を登録できます。

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

独自のコンテキスト メニュー オプションを作成したり、ユーザーがワークスペースのコメントを追加する別の方法を追加したりすることもできます。コンテキスト メニュー オプションの詳細については、コンテキスト メニューをご覧ください。

コメントを視覚的にカスタマイズする

ワークスペースのコメントの外観をカスタマイズする方法はいくつかあります。これらは テーマではなく CSS を使用します。コメントのさまざまな部分の色とサイズはほとんど制御できますが、位置は制御できません。

色の CSS 変数

commentFillColour CSS 変数を設定して、テキスト エリアの背景色を変更できます。commentBorderColour CSS 変数を設定すると、コメントの上部バーとコメントの枠線の色を変更できます。

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

色を変更したワークスペースのコメント

CSS クラス

コメントビューのさまざまな要素には、さまざまな CSS クラスが割り当てられています。これにより、要素のスタイルを変更できます。

CSS クラス 画像
blocklyComment、blocklyDraggable ワークスペースのコメント
blocklySelected、blocklyCommentHighlight 選択したコメント 折りたたまれているコメントを選択
blocklyCollapsed 折りたたまれたワークスペースのコメント
blocklyCommentTopbar Workspace のコメントのトップバー
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 を適用するオブジェクトを変更する必要があります。折りたたまれている場合は blocklyCommentTopbarBackground に CSS を適用し、それ以外の場合は 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> 要素に適用されます。つまり、アイコンの色や形を変更したい場合は、別の画像をメディア フォルダに含めることができます。

イメージ名 画像
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);