Toolbox Custom Toolbox Item 추가하기

[주인장]

새로운 도구 상자 라벨

 - toolbox_label.js 파일 생성 

class ToolboxLabel extends Blockly.ToolboxItem {

    constructor(toolboxItemDef, parentToolbox) {

        super(toolboxItemDef, parentToolbox);

    }

}

Blockly.registry.register(

    Blockly.registry.Type.TOOLBOX_ITEM,

    "toolboxlabel",

    ToolboxLabel

);

1. 새로운 항목 추가하기 

- 이 도구 상자 항목을 "toolboxlabel"이라는 이름으로 등록하면 이제 도구 상자 정의에서 이 이름을 사용하여 사용자 정의 항목을 도구 상자에 추가할 수 있습니다.
- index.html로 이동하여 도구 상자 정의까지 아래로 스크롤합니다. 도구 상자 정의에서 첫 번째 항목으로 요소를 추가합니다.

2. 도구 상자 항목 초기화
- 도구 상자 항목을 만들려면 도구 상자 항목 인터페이스 중 하나를 구현해야 합니다.
- 이 예제에서는 기본 IToolboxItem 인터페이스를 구현합니다. 

- 도구 상자 항목 인터페이스에는 IToolboxItem, ISelectableToobloxItem 및 ICollapsibleToolboxItem의 세 가지 유형이 있습니다.

- 레이블을 선택 가능하거나 축소할 필요가 없으므로 기본 IToolboxItem 인터페이스를 구현할 수 있습니다.
- 먼저 도구 상자 레이블의 dom을 생성하는 init 메서드를 추가합니다.

- 다음으로, 이 요소를 반환하겠습니다.

3. 도구 상자 정의에 속성 추가
- 위의 코드는 "Label"이라는 텍스트로 도구 상자 레이블만 만들 수 있기 때문에 다소 제한적입니다.

- 다른 텍스트와 색상으로 다른 레이블을 만들 수 있도록 도구 상자 정의에 name 및 colour 속성을 추가합니다.
- index.html을 열고 도구 상자 정의로 이동합니다. 

4. 전체 코드 

class ToolboxLabel extends Blockly.ToolboxItem {

    constructor(toolboxItemDef, parentToolbox) {

        super(toolboxItemDef, parentToolbox);

    }

    init() {

        // Create the label.

        this.label = document.createElement("label");

        // Set the name.

        this.label.textContent = this.toolboxItemDef_["name"];

        // Set the color.

        this.label.style.color = this.toolboxItemDef_["colour"];

        // Any attributes that begin with css- will get added to a cssconfig.

        const cssConfig = this.toolboxItemDef_["cssconfig"];

        // Add the class.

        if (cssConfig) {

            this.label.classList.add(cssConfig["label"]);

        }

    }

    getDiv() {

        return this.label;

    }

}

Blockly.registry.register(

    Blockly.registry.Type.TOOLBOX_ITEM,

    "toolboxlabel",

    ToolboxLabel

);