Lưới

Không gian làm việc chính của Blockly có thể có lưới. Bạn có thể tạo các khối để bám sát vào lưới, giúp hiển thị bố cục rõ ràng hơn. Điều này đặc biệt hữu ích trong các ứng dụng lớn có nhiều nhóm mã trải rộng trên một khu vực lớn.

Các chế độ cài đặt của lưới được xác định bởi một đối tượng thuộc cấu hình của Blockly. Dưới đây là ví dụ:

var workspace = Blockly.inject('blocklyDiv',
    {toolbox: document.getElementById('toolbox'),
     grid:
         {spacing: 20,
          length: 3,
          colour: '#ccc',
          snap: true},
     trashcan: true});

Giãn cách

Thuộc tính lưới quan trọng nhất là spacing. Thuộc tính này xác định khoảng cách giữa các điểm trong lưới. Giá trị mặc định là 0, nghĩa là giá trị này không hiển thị lưới. Dưới đây là ví dụ về spacing được đặt thành 10, 20 và 40:

Chiều dài

Thuộc tính length là một số xác định hình dạng của các điểm trong lưới. Độ dài 0 dẫn đến một lưới không hiển thị (nhưng vẫn là một lưới có thể được chụp nhanh), độ dài 1 (giá trị mặc định) dẫn đến các điểm, độ dài dài hơn dẫn đến các điểm chéo và độ dài bằng hoặc lớn hơn khoảng cách dẫn đến giấy biểu đồ. Dưới đây là ví dụ về length được đặt thành 1, 5 và 20:

Màu

Thuộc tính colour là một chuỗi thiết lập màu của các điểm. Hãy lưu ý cách viết tiếng Anh. Sử dụng mọi định dạng tương thích với CSS, bao gồm #f00, #ff0000 hoặc rgb(255, 0, 0). Giá trị mặc định là #888. Dưới đây là ví dụ về colour được đặt thành #000, #ccc và #f00:

Chụp nhanh

Thuộc tính snap là một giá trị boolean thiết lập xem các khối có nên điều chỉnh đến điểm lưới gần nhất khi được đặt trên không gian làm việc hay không. Giá trị mặc định là false.