Không gian làm việc có thể thay đổi kích thước

Một ứng dụng web hoạt động tốt sẽ đổi kích thước Blockly để lấp đầy không gian có sẵn trên màn hình thay vì một kích thước cố định. Có một số cách để làm việc này, bao gồm cả việc sử dụng iframe, CSS và vị trí JavaScript. Trang này minh hoạ một phương pháp tiếp cận lớp phủ mạnh mẽ và linh hoạt.

Đây là một quá trình gồm 3 bước. Bước đầu tiên là xác định khu vực. Bước thứ hai là chèn Blockly. Bước thứ ba là đặt vị trí Chặn đối với khu vực này.

1. Xác định khu vực

Sử dụng bảng HTML hoặc div với CSS, hãy tạo một vùng trống sẽ thay đổi kích thước khi trang thay đổi kích thước. Đảm bảo rằng khu vực có mã nhận dạng (trên trang này, chúng ta sẽ gọi mã đó là blocklyArea).

Đây là bản minh hoạ trực tiếp về một ô trong bảng lấp đầy cuối màn hình.

2. Chèn không gian làm việc

Việc chèn Blockly cũng giống như quy trình mô tả trong phần chèn Blockly có kích thước cố định. Thêm mã, phần tử blocklyDiv, hộp công cụ và lệnh gọi chèn.

Chặn hiện sẽ chạy trên trang, chỉ không nằm ở vị trí phù hợp (có thể là ngoài màn hình).

3. Định vị không gian làm việc

Bước cuối cùng là đặt phần tử blocklyDiv lên trên phần tử blocklyArea. Để làm việc này, hãy xoá mọi kiểu height và width khỏi blocklyDiv rồi thêm vị trí tuyệt đối:

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

Sau đó, hãy thay thế tập lệnh chèn bằng một tập lệnh cũng đặt "blocklyDiv" trên "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();

Đây là bản minh hoạ trực tiếp về tính năng Blockly lấp đầy cuối màn hình.