렌더링 관리

렌더링 관리 시스템은 블록을 다시 렌더링할 시기를 렌더러에 알려줍니다. 이는 블록이 수정될 때 (예: 필드 값이 설정되고 입력이 추가되는 경우) 블록의 모양이 일치하도록 업데이트됩니다.

주의해야 하는 경우

이 시스템과 상호 작용해야 하는 경우는 다음과 같습니다.

  • 블록의 모양을 수정하는 Blockly에 메서드 추가
  • 블록에 관한 업데이트된 크기 또는 위치 정보에 의존하는 메서드를 Blockly에 추가합니다.

작동 방식

  1. 자동으로 현재 재생목록에 추가 블록이 수정될 때마다 Blockly는 해당 블록의 렌더링을 '대기열에 추가'합니다. 렌더링을 대기열에 추가하는 수정의 예는 다음과 같습니다.

    • 필드 값 설정
    • 입력 추가 또는 삭제
    • 하위 블록 연결 또는 연결 해제

  2. 세트를 만듭니다. 블록이 대기열에 추가되면 렌더링 관리 시스템은 이 블록과 모든 상위 블록을 다시 렌더링해야 하는 블록 집합에 추가합니다.

  3. 콜백을 요청합니다. 그런 다음 렌더링 관리 시스템은 requestAnimationFrame를 사용하여 콜백을 수신합니다. 이 콜백은 현재 프레임이 그려지기 바로 전에 브라우저에서 호출됩니다.

  4. 세트를 트리로 다시 렌더링합니다. requestAnimationFrame 콜백이 호출되면 렌더링 관리 시스템은 리프 블록에서 루트 블록까지 세트의 모든 블록을 렌더링합니다. 이렇게 하면 상위 블록이 렌더링되기 전에 하위 블록에 정확한 크기 정보가 있으므로 상위 블록이 하위 블록 주위로 늘어날 수 있습니다.

작동 방식

현재 프레임이 그려지기 직전까지 블록을 다시 렌더링하기 위해 기다리면 렌더링 관리 시스템에서 렌더링 요청을 중복 삭제할 수 있습니다. 차단이 항상 즉시 렌더링되므로 동일한 블록이 불필요하게 렌더링될 수 있음 여러 번 연속으로 사용할 수 있습니다. 대신 렌더링 요청이 일괄 처리되고 변경된 각 블록은 상태가 최종화된 후 프레임 끝에 한 번만 그려집니다. 렌더링 작업을 중복 제거하면 Blockly의 효율성이 훨씬 더 높아집니다.

예를 들어 블록 2개 사이에 블록 1개를 삽입하면 렌더링 11개가 큐에 추가되지만 실제로는 3개만 실행됩니다(블록당 1개씩). 성능이 3.6배 향상되었습니다.

활용 방법

일반적으로 렌더링 관리 시스템은 블록을 수정할 때 자동으로 작동하므로 신경 쓸 필요가 없습니다. 하지만 데이터 레이크에서 직접 상호작용해야 합니다.

렌더링 대기열

블록의 도형을 업데이트해야 하는 새 메서드를 Blockly에 추가하는 경우 BlockSvg.prototype.queueRender를 호출하여 블록 렌더링을 큐에 추가해야 합니다.

렌더가 완료될 때까지 대기

Blockly에 크기 조정을 업데이트해야 하거나 정보를 배치해야 하는 경우 renderManagement.finishQueuedRenders() 프라미스를 사용합니다. 이 프라미스는 대기열에 있는 렌더링이 완료된 후에 해결되며, 대기열에 렌더링이 없는 경우에는 즉시 해결됩니다.

import * as renderManagement from './renderManagement.js';

function async myNewMethod() {
  block.somethingThatModifiesTheShape();
  // Await the promise.
  await renderManagement.finishQueuedRenders();
  myThingThatReliesOnPositioningInfo();
}

큐에 추가된 렌더를 즉시 트리거

Blockly에 크기 조정을 업데이트해야 하거나 정보를 배치해야 하며 그리고 다음 호출하려면 renderManagement.triggerQueuedRenders: 큐에 추가된 렌더를 강제로 발생 즉시 삭제할 수 있습니다

import * as renderManagement from './renderManagement.js';

function async myNewMethod() {
  block.somethingThatModifiesTheShape();
  // Trigger an immediate render.
  renderManagement.triggerQueuedRenders();
  myThingThatReliesOnPositioningInfo();
}

일반적으로 성능이 저하되므로 이렇게 하지 않는 것이 좋습니다. 지연으로 인해 사용자 환경이 저하되는 경우에만 필요합니다. 예를 들어 삽입 마커에는 위치 정보가 필요하며 삽입 마커가 사용자에게 즉각적인 의견을 제공하여 즉시 렌더링을 트리거하는 것이 중요합니다.

또한 핵심의 몇몇 위치에서 이전 버전과의 호환성 문제가 발생할 수 있습니다. 이러한 기능은 v11에서 삭제될 예정입니다.