การจัดการการแสดงผล

ระบบจัดการการแสดงผลจะบอกผู้แสดงผลว่าต้องแสดงผลการบล็อกอีกครั้งเมื่อใด ช่วยให้มั่นใจได้ว่าเมื่อมีการแก้ไขบล็อก (เช่น มีค่าในช่องที่ตั้งไว้หรือเพิ่มอินพุต) รูปร่างของบล็อกจะอัปเดตให้ตรงกัน

ควรดูแลเมื่อใด

คุณจำเป็นต้องโต้ตอบกับระบบนี้ในกรณีต่อไปนี้

• เพิ่มเมธอดใน Blockly ที่ปรับเปลี่ยนรูปร่างของบล็อก
• การเพิ่มเมธอดใน Blockly ที่อาศัยข้อมูลขนาดหรือการวางตำแหน่งของบล็อกที่อัปเดต

วิธีการทำงาน

1. จัดคิวโดยอัตโนมัติ เมื่อใดก็ตามที่มีการแก้ไขการบล็อก Blockly จะ "จัดคิว" การแสดงผลสำหรับบล็อกนั้น ตัวอย่างบางส่วนของการแก้ไขที่จัดคิวการแสดงผลไว้มีดังนี้

   • การตั้งค่าของช่อง
   • การเพิ่มหรือนำอินพุตออก
   • การเชื่อมต่อหรือยกเลิกการเชื่อมต่อกับบล็อกย่อย

2. สร้างชุด เมื่อมีการจัดคิวการบล็อก ระบบการจัดการการแสดงผลจะเพิ่มการบล็อกและบล็อกระดับบนสุดทั้งหมดลงในชุดบล็อกที่จำเป็นต้องแสดงผลอีกครั้ง

3. ขอให้โทรกลับ จากนั้นระบบการจัดการการแสดงผลจะขอให้เรียกกลับโดยใช้ requestAnimationFrame เบราว์เซอร์จะเรียกใช้โค้ดเรียกกลับนี้ขวาก่อนที่เฟรมปัจจุบันจะถูกวาด

4. แสดงผลชุดอีกครั้ง (เป็นแผนผัง) เมื่อมีการเรียกโค้ดเรียกกลับ requestAnimationFrame ระบบการจัดการการแสดงผลจะแสดงผลทุกบล็อกในชุดตั้งแต่บล็อก Leaf ไปจนถึงการบล็อกรูท ซึ่งช่วยให้มั่นใจได้ว่าบล็อกย่อยมีข้อมูลขนาดที่ถูกต้องก่อนที่จะแสดงผลบล็อกหลัก เพื่อให้บล็อกหลักยาวรอบๆ หน่วยโฆษณาหลักได้

หมายเหตุ: การแก้ไขที่มีผลเฉพาะกับสีของบล็อก ไม่ใช่รูปร่าง (เช่น การปิดใช้การบล็อก) จะไม่จัดคิวการแสดงผล สีจะได้รับการอัปเดต แบบอิสระโดยใช้ BlockSvg.prototype.applyColour

เหตุใดจึงทำงานอย่างไร

การที่บล็อกการแสดงผลซ้ำจนกว่าจะแสดงผลเฟรมปัจจุบันเสร็จจะทำให้ระบบจัดการการแสดงผลสามารถกรองคำขอการแสดงผลที่ซ้ำกันออกได้ หากบล็อกแสดงผลทันทีทุกครั้ง การบล็อกเดียวกันนั้นอาจแสดงผลหลายครั้งติดต่อกันโดยไม่จำเป็น แต่ระบบจะรวมคำขอการแสดงผลเป็นกลุ่มแทน และระบบจะวาดบล็อกที่เปลี่ยนแปลงแต่ละบล็อกเพียงครั้งเดียวที่ตอนท้ายของเฟรมเท่านั้น หลังจากที่สรุปสถานะแล้ว การนำการแสดงผลที่ซ้ำกันออกทำให้ Blockly มีประสิทธิภาพมากขึ้น

เช่น การแทรก 1 บล็อกไว้ระหว่างคิวอื่นๆ 2 รายการ จะมีการแสดงผล 11 รายการ แต่จริงๆ แล้วมีเพียง 3 รายการเท่านั้น (1 รายการต่อ 1 บล็อก) เรียกได้ว่าเป็นการเพิ่มประสิทธิภาพถึง 3.6 เท่า

วิธีการใช้งาน

คุณไม่ควรต้องกังวลกับระบบจัดการการแสดงผล เพราะระบบนี้จะทำงานโดยอัตโนมัติเมื่อคุณแก้ไขการบล็อก แต่มีบางกรณีที่คุณจำเป็นต้อง โต้ตอบกับแอปโดยตรง

การแสดงผลคิว

หากคุณเพิ่มวิธีการใหม่ใน Blockly ซึ่งควรอัปเดตรูปร่างของบล็อก คุณจะต้องเรียกใช้ BlockSvg.prototype.queueRender เพื่อจัดคิวแสดงผลการบล็อก

รอให้การแสดงผลเสร็จสิ้น

หากจะเพิ่มวิธีการใหม่ใน Blockly ซึ่งต้องมีการอัปเดตข้อมูลขนาดหรือการวางตำแหน่งของบล็อก คุณควรรอสัญญา renderManagement.finishQueuedRenders() สัญญานี้จะยุติลงหลังจากที่การแสดงผลที่อยู่ในคิวเสร็จสมบูรณ์ หรือในทันทีหากไม่มีการแสดงผลในคิว

import * as renderManagement from './renderManagement.js';

function async myNewMethod() {
  block.somethingThatModifiesTheShape();
  // Await the promise.
  await renderManagement.finishQueuedRenders();
  myThingThatReliesOnPositioningInfo();
}

ทริกเกอร์ในคิวจะแสดงผลทันที

หากกำลังเพิ่มวิธีการใหม่ใน Blockly ซึ่งต้องมีการอัปเดตข้อมูลเกี่ยวกับการปรับขนาดหรือการวางตำแหน่งเกี่ยวกับการบล็อก และคุณไม่สามารถรอจนกว่าเฟรมถัดไปสำหรับการแสดงภาพจะเสร็จสมบูรณ์ คุณสามารถเรียกใช้ renderManagement.triggerQueuedRenders เพื่อบังคับให้การแสดงผลที่อยู่ในคิวเกิดขึ้นทันที

import * as renderManagement from './renderManagement.js';

function async myNewMethod() {
  block.somethingThatModifiesTheShape();
  // Trigger an immediate render.
  renderManagement.triggerQueuedRenders();
  myThingThatReliesOnPositioningInfo();
}

โดยทั่วไปแล้ว คุณไม่ต้องการดำเนินการนี้เนื่องจากมีประสิทธิภาพน้อยกว่า โดยจะจำเป็นเฉพาะในกรณีที่ความล่าช้าทำให้เกิดประสบการณ์ของผู้ใช้ที่ไม่ดีเท่านั้น ตัวอย่างเช่น ตัวทำเครื่องหมายการแทรกจำเป็นต้องใช้ข้อมูลตำแหน่ง และสิ่งสำคัญคือตัวทำเครื่องหมายการแทรกสามารถช่วยให้ผู้ใช้ได้รับความคิดเห็นในทันทีเพื่อทำให้เกิดการแสดงผลทันที

นอกจากนี้ยังมี 2-3 จุดสำคัญที่ทริกเกอร์ให้แสดงผลทันทีด้วยเหตุผลด้านความเข้ากันได้แบบย้อนหลัง เรามีแผนจะนำรายการเหล่านี้ออกในเวอร์ชัน 11