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