기본 제공 아이콘 재정의

Blockly에는 주석, 경고, 변형자와 같은 세 가지 종류의 내장 아이콘이 있습니다.

댓글 아이콘은 재정의할 수 있습니다. 즉, myBlock.setCommentText()와 같은 메서드를 호출할 때 자체 댓글 아이콘 클래스를 인스턴스화하도록 Blockly에 알릴 수 있습니다. 예를 들어 댓글의 팝업 풍선을 다르게 표시하려는 경우 사용할 수 있습니다.

경고 및 뮤테이터 아이콘은 재정의할 수 없습니다.

댓글 아이콘

댓글 아이콘을 재정의하려면 ICommentIcon 인터페이스를 구현하는 맞춤 아이콘을 만든 다음 등록해야 합니다.

기본 구현

댓글별 로직을 추가하기 전에 맞춤 아이콘의 기본 구현을 완료하세요.

유형

getType 메서드는 주석 아이콘 IconType를 반환해야 합니다.

class MyCommentIcon extends Blockly.icons.Icon {
  getType() {
    return Blockly.icons.IconType.COMMENT;
  }
}

텍스트

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();
}

저장 및 로드

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

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

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

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

등록

마지막으로 Blockly에서 인스턴스화할 수 있도록 아이콘을 등록해야 합니다. IconTypes.COMMENT 유형을 사용해야 합니다.

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