크기 조절 가능한 작업공간

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

이 작업은 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>

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

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의 라이브 데모를 확인하세요.