Renderer Connection Shapes

[주인장]

Connection Shapes

- 사용자 정의 렌더러의 일반적인 사용 사례는 연결 모양을 변경하는 것입니다.

- 이를 위해서는 블록이 그려지는 방식과 SVG 경로가 정의되는 방식에 대한 보다 자세한 이해가 필요합니다.

1. 블록 윤곽선
- 블록의 윤곽선은 단일 SVG 경로입니다.

- 윤곽선은 여러 하위 경로(예: 이전 연결의 경로, 블록 상단의 경로, 입력 연결의 경로)로 구성됩니다.
- 각 하위 경로는 적절한 모양을 설명하는 경로 명령의 문자열입니다. 

- 이러한 명령은 상대(절대 좌표가 아닌) 좌표를 사용해야 합니다.
- SVG 경로 명령은 문자열로 작성할 수 있지만 Blockly는 경로 쓰기와 읽기를 보다 쉽게 ​​만드는 유틸리티 함수 세트를 제공합니다.

2. init() 

- 연결의 모양은 너비, 높이 및 하위 경로에 대한 정보가 있는 객체로 저장됩니다.
- 이러한 객체는 ConstantProviders init() 함수에서 생성됩니다.

- 기본 구현의 시작은 다음과 같습니다. 전체 정의는 constants.ts 내부에서 찾을 수 있습니다.

- 기본형인 속성은 constructor() 에서 설정해야 하고, 객체는 init()에서 설정해야 합니다. 

- 이러한 분리를 통해 하위 클래스는 NOTCH_WIDTH와 같은 상수를 재정의하고 상수에 의존하는 객체에 반영된 변경 사항을 볼 수 있습니다.

3. shapeFor(connection)

- shapeFor(connection) 함수는 연결에서 연결 모양으로 매핑합니다. 

- 다음은 constants.ts 내부에서 찾을 수 있는 기본 구현입니다.

- 입력/출력 연결에 대한 퍼즐 탭과 이전/다음 연결에 대한 노치를 반환합니다.

4. 연결 모양 변경
- 이 단계에서는 이전/다음 연결 및 입력/출력 연결에 대한 새 모양을 정의하고 사용합니다.

- 여기에는 세 단계가 필요합니다.

• 새 모양 객체를 정의합니다.
• init()를 재정의하여 새 모양 객체를 저장합니다.
• shapeFor(connection)를 재정의하여 새 객체를 반환합니다.

5. 이전/다음 연결 모양 정의
- 블록 주위로 시계 방향으로 윤곽선 경로가 그려지며, 왼쪽 상단에서 시작합니다.

- 결과적으로 이전 연결은 왼쪽에서 오른쪽으로 그려지고, 다음 연결은 오른쪽에서 왼쪽으로 그려집니다.
- 이전 및 다음 연결은 동일한 객체로 정의됩니다. 객체에는 네 가지 속성이 있습니다.

• width: 연결의 너비.
• height: 연결의 높이.
• pathLeft: 왼쪽에서 오른쪽으로 그릴 때 연결을 설명하는 하위 경로.
• pathRight: 오른쪽에서 왼쪽으로 그릴 때 연결을 설명하는 하위 경로.

- makeRectangularPreviousConn()이라는 새 함수를 정의하고 CustomConstantProvider 클래스 정의 내부에 넣습니다.

- NOTCH_WIDTH와 NOTCH_HEIGHT는 이미 constructor()에서 재정의되었으므로 재사용됩니다.

6. 입력/출력 연결 모양 정의
- 이전/다음 연결 모양이 왼쪽에서 오른쪽으로, 오른쪽에서 왼쪽으로 그려지는 것처럼 입력/출력 연결 모양은 위에서 아래로, 아래에서 위로 그려집니다.
- 입력 및 출력 연결은 동일한 객체에 의해 정의됩니다. 객체에는 네 가지 속성이 있습니다.

• width: 연결의 너비.
• height: 연결의 높이.
• pathUp: 위에서 아래로 그릴 때 연결을 설명하는 하위 경로.
• pathDown: 아래에서 위로 그릴 때 연결을 설명하는 하위 경로.

- makeRectangularInputConn()이라는 새 함수를 정의하고 CustomConstantProvider 클래스 정의 내부에 넣습니다.

- TAB_WIDTH 및 TAB_HEIGHT는 이미 constructor()에서 재정의되었으므로 재사용됩니다. 

7. init() 재정의
- CustomConstantProvider 클래스 정의에서 init() 함수를 재정의하고 새 모양 객체를 RECT_PREV_NEXT 및 RECT_INPUT_OUTPUT으로 저장합니다.

- 재정의되지 않은 다른 객체를 저장하려면 슈퍼클래스 init() 함수를 호출해야 합니다.

8. 랜더링 결과 

9. 전체 코드

import * as Blockly from 'blockly/core';

class CustomConstantProvider extends Blockly.blockRendering.ConstantProvider {

    constructor() {

        super();

        this.NOTCH_WIDTH = 20;

        this.NOTCH_HEIGHT = 10;

        this.CORNER_RADIUS = 2;

        this.TAB_HEIGHT = 8;

    }

    /**

    * @override

    */

    init() {        

        super.init();        

        this.RECT_PREV_NEXT = this.makeRectangularPreviousConn();

        this.RECT_INPUT_OUTPUT = this.makeRectangularInputConn();

    }

    /**

    * @override

    */

    shapeFor(connection) {

        switch (connection.type) {

            case Blockly.INPUT_VALUE:

            case Blockly.OUTPUT_VALUE:

                return this.RECT_INPUT_OUTPUT;

            case Blockly.PREVIOUS_STATEMENT:

            case Blockly.NEXT_STATEMENT:

                return this.RECT_PREV_NEXT;

            default:

                throw Error('Unknown connection type');

        }

    }

    makeRectangularPreviousConn() {

        const width = this.NOTCH_WIDTH;

        const height = this.NOTCH_HEIGHT;    

        function makeMainPath(dir) {

            return Blockly.utils.svgPaths.line([

                Blockly.utils.svgPaths.point(0, height),

                Blockly.utils.svgPaths.point(dir * width, 0),

                Blockly.utils.svgPaths.point(0, -height),

            ]);

        }

        const pathLeft = makeMainPath(1);

        const pathRight = makeMainPath(-1);

        return {

            width: width,

            height: height,

            pathLeft: pathLeft,

            pathRight: pathRight,

        };

    }

    makeRectangularInputConn() {

        const width = this.TAB_WIDTH;

        const height = this.TAB_HEIGHT;    

        function makeMainPath(dir) {

            return Blockly.utils.svgPaths.line([

                Blockly.utils.svgPaths.point(-width, 0),

                Blockly.utils.svgPaths.point(0, dir * height),

                Blockly.utils.svgPaths.point(width, 0),

            ]);

        }

        const pathUp = makeMainPath(-1);

        const pathDown = makeMainPath(1);

        return {

            width: width,

            height: height,

            pathUp: pathUp,

            pathDown: pathDown,

        };

    }

}

export class CustomRenderer extends Blockly.blockRendering.Renderer {

    constructor() {

        super();

    }  

    makeConstants_() {

        return new CustomConstantProvider();

    }

}  

// 새로운 렌더러를 등록

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