재정의 댓글 아이콘

기본 제공 댓글 아이콘을 재정의할 수 있습니다. 예를 들어 댓글의 팝업 풍선이 다르게 표시되도록 할 수 있습니다.

의견 아이콘을 재정의하려면 CommentIcon를 확장하고 ICommentIcon에서 선택한 메서드를 재정의하고 새 아이콘을 등록합니다.

참고: Blockly에는 댓글, 경고, 뮤테이터라는 세 가지 종류의 기본 제공 아이콘이 있습니다. 댓글 아이콘만 재정의할 수 있습니다.

Extend CommentIcon

먼저 CommentIcon를 확장합니다.

class MyCommentIcon extends Blockly.icons.CommentIcon {
  constructor(sourceBlock) {
    super(sourceBlock);
  }
}

ICommentIcon 및 Icon에서 메서드 재정의

아이콘을 맞춤설정하려면 ICommentIcon (다음 섹션에 설명됨) 및 Blockly.icons.Icon(맞춤 아이콘 만들기에 설명됨)의 메서드를 재정의하면 됩니다. Blockly.icons.IconType.COMMENT를 반환해야 하는 getType를 재정의하지 마세요.

텍스트

ICommentIcon 인터페이스에서는 댓글에 텍스트가 있어야 합니다. getText 메서드는 댓글의 텍스트를 반환해야 합니다. setText 메서드는 댓글의 텍스트를 설정하고 시각적 요소를 업데이트해야 합니다.

getText() {
  return this.text;
}

setText(text) {
  this.text = text;
  this.myRenderMethod();
}

풍선

맞춤 댓글 아이콘은 직렬화를 지원하기 위해 IHasBubble 인터페이스를 구현해야 합니다. 기술적으로 아이콘에 풍선이 없더라도 저장된 상태가 유지되도록 클래스에 공개 상태 정보를 저장해야 합니다. 그렇지 않으면 댓글이 열려 있는지 여부가 포함된 저장을 로드할 경우 사용자 정보가 손실됩니다.

bubbleIsVisible() {
  return this.bubbleVisible;
}

setBubbleVisible(visible: boolean) {
  this.bubbleVisible = visible;
}

풍선에 관한 자세한 내용은 팝업 풍선 사용을 참고하세요.

ICommentIcon 인터페이스에는 크기를 반환하는 getBubbleSize 메서드와 크기를 설정하는 setBubbleSize이 필요합니다. 아이콘에 기술적으로 풍선이 없더라도 상태를 저장한다는 이전의 동일한 추론이 여기에도 적용됩니다.

getBubbleSize() {
  return this.bubbleSize;
}

setBubbleSize(size) {
  this.bubbleSize = size;
  this.myRenderMethod();
}

ICommentIcon에는 작업공간에서 풍선의 위치를 가져오고 설정하는 getBubbleLocation 및 setBubbleLocation 메서드도 필요합니다.

setBubbleLocation(location) {
  this.bubbleLocation = location;
}

getBubbleLocation() {
  return this.bubbleLocation;
}

저장 및 로드

맞춤 댓글 아이콘은 ISerializable 인터페이스를 구현해야 합니다. 상태는 CommentState 인터페이스를 준수해야 합니다.

saveState() {
  return {
    text: this.text,
    pinned: this.bubbleVisible,
    height: this.bubbleSize.height,
    width: this.bubbleSize.width,
    x: this.bubbleLocation.x,
    y: this.bubbleLocation.y,
  }
}

loadState(state) {
  this.setText(state.text);
  this.setBubbleVisible(state.pinned);
  this.setBubbleSize(new Blockly.utils.Size(state.width, state.height));
  this.setBubbleLocation(new Blockly.utils.Coordinate(state.x, state.y));
}

아이콘 직렬화에 관한 자세한 내용은 아이콘 저장 및 로드를 참고하세요.

아이콘 등록

마지막으로 기존 댓글 아이콘을 등록 해제하고 Blockly가 인스턴스화할 수 있도록 댓글 아이콘을 등록합니다. 등록 취소에는 'comment' 문자열을 사용하고 등록에는 IconTypes.COMMENT 문자열을 사용합니다.

Blockly.icons.registry.unregister('comment');
Blockly.icons.registry.register(Blockly.icons.IconType.COMMENT, myCommentIcon);

아이콘을 등록하면 사용자가 컨텍스트 메뉴에서 '댓글 추가'를 클릭하거나 myBlock.setCommentText()를 호출하는 등 내장된 댓글 아이콘 대신 Blockly에서 이 아이콘을 사용합니다.