Renderer custom renderer 정의 및 등록

[주인장]

custom renderer 정의 및 등록

- 렌더러는 사용자 지정 렌더링 코드와 나머지 Blockly 간의 인터페이스입니다.

- Blockly는 모든 필수 필드가 이미 사용 가능한 값으로 설정된 기본 렌더러를 제공합니다.

1. 파일 생성하기 

- src/renderers 에 custom.js 파일 생성 

import * as Blockly from 'blockly/core';

class CustomRenderer extends Blockly.blockRendering.Renderer {

    constructor() {

        super();

    }

}

// 새로운 렌더러를 등록

Blockly.blockRendering.register('custom_renderer', CustomRenderer);

2. 해당 랜더러 연결 

- index.js 에 관련 정보 연결 

import './renderers/custom';

const ws = Blockly.inject(blocklyDiv, {

    renderer: 'custom_renderer', // 사용자 정의 렌더러 사용

    toolbox,

    grid: { spacing: 20, length: 3, colour: '#ccc', snap: true },

    move: {

        scrollbars: {

            horizontal: true,

            vertical: true,

        },

        drag: true,

        wheel: true,

    },

    zoom: {

        controls: true,

        wheel: true,

        startScale: 1.0,

        maxScale: 3,

        minScale: 0.3,

        scaleSpeed: 1.2,

        pinch: true,

    },

    trashcan: true,

});

3. 랜더링 결과 

- Blockly.blockRendering.Renderer

4. 상수 재정의 

- ConstantsProvider는 모든 렌더링 관련 상수를 보관합니다.

- 여기에는 크기 정보와 색상이 포함됩니다.

- Blockly는 모든 필수 필드가 기본값으로 설정된 기본 ConstantsProvider를 제공합니다.
- ConstantsProvider 생성자()는 NOTCH_WIDTH 및 NOTCH_HEIGHT와 같은 모든 정적 속성을 설정합니다.

- 속성의 전체 목록은 constants.ts를 참조하세요.
- 모든 상수가 아닌 필요한 상수 하위 집합만 재정의합니다. 그렇게 하려면 다음을 수행합니다.

• 기본 ConstantProvider를 확장하는 상수 공급자를 정의합니다.
• 생성자()에서 슈퍼클래스 super()를 호출합니다.
• 개별 속성을 설정합니다.

5. 파일 수정 

class CustomConstantProvider extends Blockly.blockRendering.ConstantProvider {

    constructor() {

        super();

        this.NOTCH_WIDTH = 20;

        this.NOTCH_HEIGHT = 10;

        this.CORNER_RADIUS = 2;

        this.TAB_HEIGHT = 8;

    }

}

export class CustomRenderer extends Blockly.blockRendering.Renderer {

    constructor() {

        super();

    }  

    makeConstants_() {

        return new CustomConstantProvider();

    }

}  

// 새로운 렌더러를 등록

Blockly.blockRendering.register('custom_renderer', CustomRenderer);

6. 수정후 랜더링 결과