Blockly에서 사용하는 블록들은 어떤 형식으로 렌더링 되고 있을까?

블록하나에 이런식으로 되어있다. g태그라는 것을 사용하는데, 이는 svg에서 svg 요소들을 그룹으로 묶을 때 쓰는 그 <g> 태그이다.
결론적으로는 저 블록 하나하나가 결국은 svg로 이루어져 있다는 것이다.
블록의 모양을 바꾸고, 저 내부에 들어가는 text의 위치를 내 마음대로 커스텀하면서 사용하려면 결국 path 태그 내의 d 속성값을 변경해주어야한다.
그럼 블록들의 d 속성을 내가 어떻게 바꿔줄 수 있을까?

path의 d속성 바꾸기 챌린지

blockId 값을 가져와 해당 블록의 돔요소를 가져와 수정해주기

react를 쓰지않고 순수 js를 쓸 때, 돔요소를 document.getElementById 형식으로 가져오듯이, 블록 요소 또한 blockId값을 가지고 가져와 수정해줄 수 있지 않을까 생각했다.

blockId 값 가져오기

export class BlockBase extends AbstractEvent {
  override isBlank = true;

  /** The ID of the block associated with this event. */
  blockId?: string;

  /**
   * @param opt_block The block this event corresponds to.
   *     Undefined for a blank event.
   */
  constructor(opt_block?: Block) {
    super();
    this.isBlank = !opt_block;

    if (!opt_block) return;

    this.blockId = opt_block.id;
    this.workspaceId = opt_block.workspace.id;
  }

블록리의 이벤트 클래스를 뜯어보면 블록베이스의 이벤트는 blockId값을 가지고 있다.
즉, click이벤트 또한 블록위에서 클릭이벤트를 먹이면 블록베이스의 클릭이벤트이기에 blockId 값을 가지고 있다는 것이다.
- 블록리 라이브러리 자체가 모든 이벤트에 대해서도 클래스로 정의되어있다. ~~진짜 변태같다~~

newWorkspace.addChangeListener((event) => {
	if (event instanceof Blockly.Events.Click && event.blockId) {
	    console.log(event);
	}
})

이렇게 해주면?

이렇게 블록리에서 설정한 클릭 이벤트에 대한 속성값들이 우르르 뜬다. blockId 값이 보이는가..? ㅎ