<aside> ✏️
Blockly 클래스들을 이용한 Block 커스텀하기! 시리즈
<aside> ✏️
</aside>
BooLock의 블록 모양에서 고려해야하는 점은 단순히 블록의 외곽선만이 아니다. 블록 내부에서의 블록 이름을 나타내는 태그와, 클래스 블록을 합칠 부분이 space-between처럼 좌우 끝으로 떨어져있어야한다.
속성들을 왼쪽과 같이 지정할 때 setAlign을 통해 정렬을 해줄 수 가 있는데, 이 정렬하는 속성 값이 오른쪽처럼 LEFT , CENTRE, RIGHT밖에 없다.
space-between을 해줄 수 없어 내가 직접 해당 속성들의 좌표값을 space-between처럼 보이게 수정해주어야한다.
본격적으로 위에 적은 말처럼 좌표값을 설정해주기 전 블록 내부에서 사용할 용어를 제대로 짚고 넘어갈 필요가 있다.
빨간 부분으로 체크해둔 부분들이 필드들이다. 블록리에서는 기본적으로 위와 같이 라벨필드, 텍스트 필드 등을 제공하고 있고, 아예 새로운 종류의 커스텀 필드를 만들거나, 기본적으로 만들어져 있는 필드를 이용해 서브클래스화 시켜 확장하는 방법이 있다.
BooLock에서는 라벨필드나, 텍스트필드같이 기본적으로 이미 만들어진 필드가 있는 것은 외관 변경과 크기변경 감지를 하기 위한 메서드들만 추가해주면 되었기에 서브클래스화 시키는 방식을 사용하였고(customFieldLabelSerializable, customTagFieldLabel, customFieldTextInput), img 태그 블록에 있는 이미지 등록 버튼(customFieldImgeButton) 같이 기존에 없는 유형의 필드가 필요하였기에 새로운 필드 만드는 방식으로 추가하였다.
커스텀 필드를 만드는 구체적인 방식은 4편에서 더 자세히 다루는 것으로 하고, 이 필드 개념을 짚고 넘어가는 이유는 블록 내부에서 이 필드들의 유형을 인식하여 위치를 직접 조작해줄 수 있기 때문이다.
blockly에서는 블록을 객체관점에서 보았을 때, 한 블록 객체 내부에 여러 개의 row 객체를 갖고 있으며, 한 줄씩 분리해서 관리하고 있다.
현재 BooLock에서 만들어 둔 텍스트블록을 분해하자면 이런식으로 5개의 row 객체가 존재하는 것이다. 각 블록의 rows 정보는 각 블록의 renderInfo 객체에서 rows 에 등록되어있다.
텍스트블록의 renderInfo객체에서 rows를 로그로 확인하면 위와 같이 5개의 row들을 확인할 수 있다.
각 row의 성격을 보여주는 부분은 저 빨간 네모칸에 있는 부분이다. 크게 5가지의 row객체들로 구별이 되는데, 각 row에 대한 성격은 아래와 같다.