작업공간 댓글은 텍스트를 입력할 수 있는 그래픽 요소입니다. 텍스트 기반 프로그래밍 언어의 주석처럼 일반적으로 코드에 관한 내용을 문서화하는 데 사용됩니다.
작업공간 댓글 사용 설정
애플리케이션에서 작업공간 댓글을 사용 설정하려면 사용자에게 댓글 작성 방법을 제공해야 합니다. 이를 위한 한 가지 방법은 작업공간 주석을 생성하는 컨텍스트 메뉴 항목을 추가하는 것입니다. 다음 코드를 사용하면 기본 컨텍스트 메뉴 항목을 등록하여 작업공간 주석을 생성, 삭제, 복제할 수 있습니다.
// 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 클래스 | 이미지 |
|---|---|
| blockly댓글, blocklyDraggable | 
|
| blocklySelected, blockly댓글강조표시 |  
|
| 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에 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-arrow.svg | |
| 삭제-아이콘.svg | |
| resize-handle.svg | |
아이콘 삭제
삭제 아이콘은 기본적으로 숨겨져 있습니다. 이 기능을 사용 설정하려면 CSS를 사용하여 표시되도록 해야 합니다.
.blocklyDeleteIcon {
display: block;
}