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

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