새 아이콘 유형 만들기

맞춤 아이콘을 만들려면 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() {
  // 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();
}