<aside> ✏️

목차

</aside>

상황

요구사항은 다음과 같다.

1. 사용자가 input 요소에 스타일명을 입력한다.
2. 스타일명 입력 후 + 버튼을 누르면 입력한 스타일명이 담긴 블록이 생성된다.
3. 블록 내 x 버튼 클릭시 해당 블록은 삭제된다.
4. x버튼 제외한 블록 영역 클릭시 워크스페이스로 이동할 수 있다.

이번에는 3번 태스크를 구현하고자 한다.

과정

블록 내 x 아이콘 추가

• flyout에서 icon 이벤트 제어 가능한지 확인
• flyout에서 이벤트 제어 힘들면 scratch 참고

flyout에서 icon 이벤트 제어 가능한지

해당 파트는 툴박스를 담당한 팀원이 DOM 삽입이 가능하게 커스터마이징한 클래스를 활용하여 가능

삭제하기

원래 x 아이콘에 특정 블록 삭제 이벤트를 연결하고자 하였다.

하지만 시간상 보다 간편한 [context menu](https://developers.google.com/blockly/guides/configure/web/context-menus?_gl=1*12b9bmh*_up*MQ.._gaODUyNzUzOTkzLjE3MzE5MTYyNjk._ga_R5G2Y6GLVCMTczMTkxNjI2OC4xLjEuMTczMTkxNjI2OC4wLjAuMA..)를 활용하여 구현하였다.

(x 아이콘은 클래스명 길이에 따라 신경써줘야 하는 점도 발생하기 때문)