Изменяемое рабочее пространство

Хорошее веб-приложение будет изменять размер Blockly, заполняя всё доступное пространство на экране, а не придерживаться фиксированного размера. Существует несколько способов сделать это, включая использование iframe, CSS и позиционирования JavaScript. На этой странице показан надёжный и гибкий подход с наложением элементов.

Это трёхэтапный процесс. Первый шаг — определение области. Второй шаг — внедрение Blockly. Третий шаг — размещение Blockly в этой области.

1. Определите область

Используя HTML-таблицу или div с CSS, создайте пустую область, которая будет перестраиваться при изменении размера страницы. Убедитесь, что у области есть идентификатор (на этой странице мы назовём её blocklyArea ).

Вот демонстрация ячейки таблицы, заполняющей нижнюю часть экрана.

2. Внедрение рабочего пространства

Внедрение Blockly происходит так же, как описано в разделе «Внедрение Blockly фиксированного размера» . Добавьте код, элемент blocklyDiv , панель инструментов и вызов внедрения.

Теперь Blockly должен работать на странице, просто не там, где ему положено быть (вероятно, за пределами экрана).

3. Разместите рабочее пространство

Последний шаг — разместить элемент blocklyDiv над элементом blocklyArea . Для этого удалите все стили height и width у blocklyDiv и добавьте абсолютное позиционирование:

<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, которая заполняет нижнюю часть экрана.