새 아이콘 유형 만들기

맞춤 아이콘을 만들려면 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에서 아이콘을 가져오는 데 사용됩니다.

JavaScript

  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() {
  // Do something when clicked.
}

차단 변경사항에 응답

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

수정 가능성

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

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

축소

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

isShownWhenCollapsed() {
  return true;
}

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

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

아이콘 폐기

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

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

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