크기 조절 가능한 작업공간

좋은 웹 애플리케이션은 고정된 크기가 아닌 Blockly의 크기를 조정하여 화면의 사용 가능한 공간을 채웁니다. 이렇게 하는 방법에는 iframe, CSS, 자바스크립트 위치 사용 등 여러 가지가 있습니다. 이 페이지에서는 강력하고 유연한 오버레이 접근 방식을 보여줍니다.

이 절차는 3단계로 이루어집니다. 첫 번째 단계는 영역을 정의하는 것입니다. 두 번째 단계는 Blockly를 삽입하는 것입니다. 세 번째 단계는 이 영역 위에 Blockly를 배치하는 것입니다.

1. 영역 정의

HTML 테이블 또는 CSS와 함께 div를 사용하여 페이지 크기가 조절될 때 리플로우되는 빈 영역을 만듭니다. 영역에 ID가 있는지 확인합니다 (이 페이지에서는 blocklyArea라고 함).

다음은 화면 하단을 채우는 표 셀의 실시간 데모입니다.

2. 작업공간 삽입

Blockly를 삽입하는 방법은 고정된 크기의 Blockly 삽입에 설명된 프로세스와 동일합니다. 코드, blocklyDiv 요소, 도구 상자, 삽입 호출을 추가합니다.

이제 Blockly가 페이지에서 실행되어야 하며 배치되어야 할 위치(아마도 화면 밖일 수 있음)가 아니어야 합니다.

3. 작업공간 배치

마지막 단계는 blocklyDiv 요소를 blocklyArea 요소 위에 배치하는 것입니다. 이렇게 하려면 blocklyDiv에서 height 및 width 스타일을 삭제하고 절대 위치를 추가합니다.

<div id="blocklyDiv" style="position: absolute"></div>

그런 다음 삽입 스크립트를 'blocklyArea' 위에 'blocklyDiv'도 배치하는 스크립트로 바꿉니다.

const blocklyArea = document.getElementById('blocklyArea');
const blocklyDiv = document.getElementById('blocklyDiv');
const workspace = Blockly.inject(blocklyDiv,
    {toolbox: document.getElementById('toolbox')});
const onresize = function(e) {
  // Compute the absolute coordinates and dimensions of blocklyArea.
  const element = blocklyArea;
  let x = 0;
  let y = 0;
  do {
    x += element.offsetLeft;
    y += element.offsetTop;
    element = element.offsetParent;
  } while (element);
  // Position blocklyDiv over blocklyArea.
  blocklyDiv.style.left = x + 'px';
  blocklyDiv.style.top = y + 'px';
  blocklyDiv.style.width = blocklyArea.offsetWidth + 'px';
  blocklyDiv.style.height = blocklyArea.offsetHeight + 'px';
  Blockly.svgResize(workspace);
};
window.addEventListener('resize', onresize, false);
onresize();

화면 하단을 채우는 Blockly의 실시간 데모를 확인해 보세요.