<aside> ✏️

목차

</aside>

상황

CSS Flyout toolbox에 사용자가 입력한 클래스명이 담긴 블록을 띄우고자 한다.

현재 클래스명 블록 클릭시 alert로 입력가능하지만, 아래 시안과 동일하게 하려면 flyout에 input과 button 요소를 추가해야 한다.

image.png

blockly는 대부분의 요소들이 svg로 이루어져있으며, flyout도 마찬가지이다.

flyout에 요소를 추가하려면 두 가지 방법이 가능하다.

  1. blockly처럼 input태그를 svg로 추가하거나
  2. DOM 조작하여 태그 자체를 추가할 수 있다.

svg로 추가하면 동작 제어가 힘들 것 같아 DOM 조작하려고 했으나 예상보다 시간이 소요되었다.

그러던 중 팀원분께서 1번 방식으로 요소 추가 성공하였다.

scratch에서도 flyout에 checkbox를 svg로 추가한 후 동작 연결하였기에 시도해보고자 한다.

과정

input 추가

Blockly.inject('blocklyDiv', {
  plugins: {
	  flyoutsVerticalToolbox: CustomFlyout,
  }
}

추가하니까 input요소 뜸

image.png