Toolbox Custom Category 정의 및 등록하기

[주인장]

사용자 카테고리 정의 및 등록 

1. 클래스 생성 및 등록 

- 사용자 정의 카테고리를 만들기 위해 기본 Blockly.ToolboxCategory 클래스를 확장하는 새 카테고리를 만듭니다.
- custom_category.js 파일에 다음 코드를 추가합니다.- 카테고리를 정의한 후에는 Blockly에 해당 카테고리가 존재한다고 알려야 합니다. 

- custom_category.js의 끝에 코드를 추가하여 카테고리를 등록합니다.

- Blockly.ToolboxCategory.registrationName에 CustomCategory를 등록함으로써 Blockly의 기본 카테고리를 재정의합니다. 

- 새 항목을 추가하는 대신 도구 상자 항목을 재정의하므로 마지막 인수로 true를 전달해야 합니다.

- 이 플래그가 false이면 Blockly.registry.register는 기존 클래스를 재정의하기 때문에 오류를 발생시킵니다.

2. 카테고리의 배경 변경
- 기본 ToolboxCategory 클래스에서 addColourBorder_ 메서드는 카테고리 이름 옆에 색상 스트립을 추가합니다. 

- 전체 카테고리 div에 색상을 추가하기 위해 이 메서드를 재정의할 수 있습니다.
- 다음 코드를 CustomCategory 클래스에 추가합니다.

3. CSS 추가하기 

- 적용할 CSS는 index.js 에 추가한다. 

import './css/toolbox_style.css'

4. 선택한 카테고리의 모양 변경
- index.html을 열고 카테고리를 클릭합니다.

- 클릭되었다는 표시가 전혀 없다는 것을 알 수 있습니다.

- 더 심각한 것은 카테고리를 두 번째 클릭하면 배경색이 사라진다는 것입니다.
- 이를 수정하기 위해 setSelected 메서드를 재정의하여 카테고리를 클릭했을 때의 모양을 변경합니다. 

- 기본 카테고리 클래스에서 이 메서드는 카테고리를 선택하면 전체 행에 색상을 추가합니다.

- 이미 전체 div에 색상을 확장했으므로 div의 배경색을 흰색으로 변경하고 텍스트를 선택한 카테고리의 색상으로 변경합니다.

5. 카테고리에 아이콘 추가
- "Logic" 카테고리에 아이콘을 추가하려면 index.html 파일에 아이콘 라이브러리를 추가하고, 카테고리 정의에 적절한 CSS 클래스를 설정합니다.
- 시작하려면 아이콘 라이브러리를 가져와 index.html에 추가합니다.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

- 이 라이브러리에서 톱니바퀴 아이콘을 "Logic" 카테고리에 추가할 것입니다. 이를 위해 적절한 CSS 클래스를 카테고리 정의에 추가합니다.
- index.html에서 도구 상자 정의로 스크롤하여 아래 줄을 변경합니다.

<category name="Logic" categorystyle="logic_category">

을 

<category css-icon="customIcon fa fa-cog" name="Logic" categorystyle="logic_category"> 식으로 변경 

6. CSS에 추가 작업 

- index.html을 열면 기어 아이콘이 잘못 배치되어 있고 보기가 약간 어렵다는 것을 알 수 있습니다. 

- customIcon 클래스를 사용하여 아이콘의 색상을 변경하고 blocklyTreeRowContentContainer 클래스를 사용하여 아이콘을 텍스트 위에 배치합니다.
- toolbox_style.css 파일에 다음을 추가합니다.

7. 카테고리 HTML 변경
- 이전 섹션에서 한 것처럼 CSS만 변경하면 되는 경우 cssConfig를 사용하는 것이 좋은 선택입니다.

- 그러나 텍스트, 이미지 또는 다른 것을 추가하기 위해 HTML을 변경해야 하는 경우 dom을 만드는 해당 메서드를 재정의할 수 있습니다.

- 이 예에서는 createIconDom_ 메서드를 재정의하여 카테고리에 을 추가합니다.
- 기본적으로 createIconDom_ 메서드는 카테고리 아이콘의 요소를 추가합니다. 이를 재정의하여 요소를 반환할 수 있습니다.
- custom_category.js에 다음 메서드를 추가합니다.

8. 전체 코드 

// 사용자 정의 카테고리 클래스 정의

class CustomCategory extends Blockly.ToolboxCategory {

    constructor(categoryDef, toolbox, opt_parent) {

        super(categoryDef, toolbox, opt_parent);

    }

    // 배경색 변경

    addColourBorder_(colour) {

        this.rowDiv_.style.backgroundColor = colour;

    }

    // 카테고리 선택 시 색상 변경

    setSelected(isSelected) {

        // We do not store the label span on the category, so use getElementsByClassName.

        const labelDom =

            this.rowDiv_.getElementsByClassName("blocklyTreeLabel")[0];

        if (isSelected) {

            // Change the background color of the div to white.

            this.rowDiv_.style.backgroundColor = "white";

            // Set the colour of the text to the colour of the category.

            labelDom.style.color = this.colour_;

            this.iconDom_.style.color = this.colour_; // 아이콘 색상 변경

        } else {

            // Set the background back to the original colour.

            this.rowDiv_.style.backgroundColor = this.colour_;

            // Set the text back to white.

            labelDom.style.color = "white";

            this.iconDom_.style.color = "white";

        }

        // This is used for accessibility purposes.

        Blockly.utils.aria.setState(

            /** @type {!Element} */ (this.htmlDiv_),

            Blockly.utils.aria.State.SELECTED,

            isSelected

        );

    }

    createIconDom_() {

        const iconImg = document.createElement("img");

        iconImg.src = "./logo_only.svg";

        iconImg.alt = "Blockly Logo";

        iconImg.width = "25";

        iconImg.height = "25";

        return iconImg;

    }

}

// 카테고리 등록

Blockly.registry.register(

    Blockly.registry.Type.TOOLBOX_ITEM,

    Blockly.ToolboxCategory.registrationName,

    CustomCategory,

    true

);