พื้นที่ทำงานที่ปรับขนาดได้

เว็บแอปพลิเคชันที่ดีจะปรับขนาดแบบ Blockly ให้เต็มพื้นที่ที่มีอยู่บนหน้าจอ แทนที่จะเป็นขนาดคงที่ ซึ่งทำได้หลายวิธี เช่น การใช้การวางตำแหน่ง iframe, CSS และ JavaScript หน้านี้จะสาธิตแนวทางการวางซ้อนที่มีประสิทธิภาพและยืดหยุ่น

กระบวนการนี้มี 3 ขั้นตอน ขั้นตอนแรกคือการกำหนดพื้นที่ ขั้นตอนที่ 2 คือการแทรก Blockly ขั้นตอนที่ 3 คือการวางตำแหน่ง 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 ที่แสดงเต็มด้านล่างของหน้าจอ