Yeniden boyutlandırılabilir çalışma alanı

İyi bir web uygulaması, sabit boyut yerine ekrandaki mevcut alanı doldurmak için Blockly'yi yeniden boyutlandırır. Bunu yapmanın birkaç yolu vardır. Örneğin, iframe, CSS ve JavaScript konumlandırması kullanabilirsiniz. Bu sayfada, sağlam ve esnek bir yer paylaşımlı yaklaşım gösterilmektedir.

Bu, üç adımlı bir işlemdir. İlk adım alanı tanımlamaktır. İkinci adım, Blockly'yi yerleştirmektir. Üçüncü adım, bu alanın üzerinde Blok'u konumlandırmaktır.

1. Alanı tanımlayın

HTML tablosu veya CSS ile bir div kullanarak sayfa yeniden boyutlandırıldığında yeniden düzenlenen boş bir alan oluşturun. Alanın bir kimliği olduğundan emin olun (bu sayfada blocklyArea olarak adlandıracağız).

Ekranın alt kısmını kaplayan bir tablo hücresinin canlı demosunu burada bulabilirsiniz.

2. Çalışma alanını ekleyin

Blockly'nin eklenmesi, sabit boyutlu Blockly ekleme konusunda açıklanan işlemle aynıdır. Kodu, blocklyDiv öğesini, bir araç kutusu ve bir ekleme çağrısı ekleyin.

Blockly artık sayfada çalışıyor olmalı, ancak olması gereken yerde olmamalıdır (muhtemelen ekran dışında).

3. Çalışma alanını konumlandırma

Son adım, blocklyDiv öğesini blocklyArea öğesi üzerine yerleştirmektir. Bunu yapmak için blocklyDiv öğesinden tüm height ve width stillerini kaldırın ve mutlak konumlandırma ekleyin:

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

Ardından, yerleştirme komut dosyasını "blocklyArea" üzerinde "blocklyDiv"in konumuyla değiştirin:

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'nin ekranın alt kısmını kaplayan canlı bir demoyu burada bulabilirsiniz.