Blockly Array Block Generator

[주인장]

Array Block Generator

- 이 단계에서는 배열 블록의 생성기를 빌드합니다. 

- 코드를 들여쓰기하고 가변적인 수의 입력을 처리하는 방법을 배우게 됩니다.
- 배열 블록은 뮤테이터를 사용하여 입력 수를 동적으로 변경합니다.

- 멤버 블록과 마찬가지로 입력에 연결된 블록 유형에는 제한이 없습니다.

1.  값 수집( Gather values) 

- 블록의 각 값 입력에는 ADD0, ADD1 등의 이름이 있습니다.

- 루프에서 valueToCode를 사용하여 값 배열을 빌드합니다.

const values = [];
for (let i = 0; i < block.itemCount_; i++) {
    const valueCode = generator.valueToCode(block, 'ADD' + i, Order.ATOMIC);
    if (valueCode) {
        values.push(valueCode);
    }
}

- 이 코드는 valueCode가 null인지 확인하여 빈 입력을 건너뜁니다.
- 빈 입력을 포함하려면 문자열 'null'을 값으로 사용합니다.

const values = [];
for (let i = 0; i < block.itemCount_; i++) {
    const valueCode =  generator.valueToCode(block, 'ADD' + i, Order.ATOMIC) || 'null';
    values.push(valueCode);
}

2. 포맷(Format)

- 이 시점에서 값은 문자열 배열입니다. 

- 문자열에는 각 입력에 대해 생성된 코드가 들어 있습니다.
- 각 요소를 쉼표와 줄바꿈으로 구분하여 목록을 단일 문자열로 변환합니다.

const valueString = values.join(',\n');

- 다음으로, prefixLines를 사용하여 각 줄의 시작 부분에 들여쓰기를 추가합니다.

const indentedValueString = generator.prefixLines(valueString, generator.INDENT);

- INDENT는 생성기의 속성입니다. 

- 기본적으로 두 개의 공백으로 설정되지만 언어 생성기는 들여쓰기를 늘리거나 탭으로 변경하기 위해 이를 재정의할 수 있습니다.
- 마지막으로 들여쓰기된 값을 대괄호로 묶고 문자열을 반환합니다.

const codeString = '[\n' + indentedValueString + '\n]';
return [codeString, Order.ATOMIC];

3. 모두 합치기 

- array bclock 만들기 

jsonGenerator.forBlock['lists_create_with'] = function (block, generator) {

    const values = [];

    for (let i = 0; i < block.itemCount_; i++) {

        const valueCode = generator.valueToCode(block, 'ADD' + i, Order.ATOMIC);

        if (valueCode) {

            values.push(valueCode);

        }

    }

    const valueString = values.join(',\n');

    const indentedValueString = generator.prefixLines(

        valueString,

        generator.INDENT,

    );

    const codeString = '[\n' + indentedValueString + '\n]';

    return [codeString, Order.ATOMIC];

};