기본 제공 아이콘 재정의

Blockly에는 댓글, 경고, 변형자 등 세 가지 종류의 기본 제공 아이콘이 있습니다.

댓글 아이콘은 재정의할 수 있습니다. 즉, Blockly에서 다음과 같은 메서드를 호출할 때 자체 주석 아이콘 클래스를 myBlock.setCommentText() 예를 들어 댓글의 팝업 도움말 풍선이 다르게 표시됩니다.

경고 및 변형 아이콘은 재정의할 수 없습니다.

댓글 아이콘

댓글 아이콘을 재정의하려면 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에서 인스턴스화할 수 있도록 아이콘을 등록해야 합니다. CANNOT TRANSLATE IconTypes.COMMENT 유형을 사용해야 합니다.

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