맞춤 아이콘 만들기

맞춤 아이콘을 만들려면 IIcon 인터페이스를 구현해야 합니다. 이렇게 하면 아이콘이 어떻게 렌더링되어야 하는지, 클릭되면 어떤 작업을 해야 하는지 등을 Blockly에 알릴 수 있습니다.

Icon 추상 클래스는 IIcon 인터페이스의 여러 메서드에 기본 구현을 제공하므로 이 클래스를 서브클래싱하는 것이 좋습니다.

class MyIcon extends Blockly.icons.Icon {
  // The constructor should always take in the source block so that svg elements
  // can be properly created.
  constructor(sourceBlock) {
    super(sourceBlock);
  }
}

아이콘 유형 지정

getType 메서드는 아이콘의 유형을 나타내는 값을 반환합니다. 직렬화를 위해 아이콘을 등록하고 getIcon에서 아이콘을 검색하는 데 사용됩니다.

자바스크립트

getType() {
  return new Blockly.icons.IconType('my_icon');
}

TypeScript

getType(): Blockly.icons.IconType<MyIcon> {
  return new Blockly.icons.IconType<MyIcon>('my_icon');
}

아이콘의 뷰 만들기

아이콘의 뷰는 블록에 있는 SVG 요소를 나타냅니다.

뷰 초기화

initView 메서드는 블록에 있는 아이콘의 SVG 요소를 만드는 곳입니다. 새 요소는 아이콘이 소멸될 때 자동으로 정리되도록 this.svgRoot 요소의 하위 요소여야 합니다.

Blockly.utils.dom 모듈은 SVG를 인스턴스화하기 위한 깔끔한 인터페이스를 제공합니다.

initView(pointerdownListener) {
  if (this.svgRoot) return;  // Already initialized.

  // This adds the pointerdownListener to the svgRoot element.
  // If you do not call `super` you must do this yourself.
  super.initView(pointerdownListener);

  Blockly.utils.dom.createSvgElement(
    Blockly.utils.Svg.CIRCLE,
    {
      'class': 'my-css-class',
      'r': '8',
      'cx': '8',
      'cy': '8',
    },
    this.svgRoot  // Append to the svgRoot.
  );
}

크기 반환

getSize 메서드는 아이콘의 크기를 반환하므로 렌더러가 아이콘에 맞게 블록을 넓힐 수 있습니다.

크기는 임의의 '작업공간 단위'로 표시됩니다(작업공간의 크기가 변경되어도 변경되지 않음).

getSize() {
  return new Blockly.utils.Size(16, 16);
}

순서 설정

아이콘은 블록 내에서 정적 순서를 갖습니다. 예를 들어 내장된 뮤테이터 아이콘은 항상 댓글 아이콘 앞에 표시되며, 댓글 아이콘은 경고 아이콘 앞에 표시됩니다.

순서는 getWeight 메서드에서 반환하는 값에 따라 제어됩니다. 가중치가 더 긍정적인 아이콘은 가중치가 덜 긍정적인 아이콘 다음에 렌더링됩니다.

getWeight() {
  return 10;
}

onclick 동작 구현

많은 아이콘은 대화형이며 클릭하면 특정 작업을 실행합니다. 예를 들어 내장 아이콘은 클릭하면 모두 풍선이 표시됩니다. onClick 메서드를 사용하여 이를 구현할 수 있습니다.

onClick() {
  // Do something when clicked.
}

블록 변경에 응답

일부 아이콘은 블록의 변경사항, 특히 수정 가능 여부 및 접힘 상태의 변경사항에 응답하려고 합니다.

수정 가능성

블록의 수정 가능 여부에 따라 아이콘이 다르게 동작해야 하는 경우 (예: 블록이 수정 불가능한 경우 클릭할 수 없음) updateEditable 메서드를 구현합니다. 이 메서드는 블록의 수정 가능 상태가 변경될 때 자동으로 호출됩니다.

updateEditable() {
  if (this.sourceBlock.isEditable()) {
    // Do editable things.
  } else {
    // Do non-editable things.
  }
}

접힘

일부 아이콘은 블록이 접혀 있을 때 표시되지만 기본적으로는 표시되지 않습니다. 아이콘을 표시하려면 isShownWhenCollapsed 메서드를 재정의하여 true를 반환하세요.

isShownWhenCollapsed() {
  return true;
}

그런 다음 updateCollapsed 메서드를 재정의합니다.

updateCollapsed() {
  // By default icons are hidden when the block is collapsed. We want it to
  // be shown, so do nothing.
}

아이콘 폐기

아이콘은 삭제될 때 DOM 요소나 외부 참조를 정리해야 합니다. 기본적으로 this.svgRoot에 추가된 항목은 소멸되지만 다른 참조는 수동으로 정리해야 합니다. 이 작업은 dispose 메서드 내에서 실행해야 합니다.

dispose() {
  // Always call super!
  super.dispose();

  this.myBubble?.dispose();
  this.myOtherReference?.dispose();
}