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

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

กรณีที่ควรดูแล

คุณจำเป็นต้องโต้ตอบกับระบบนี้ หากคุณ:

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

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

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

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

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

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

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

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

เหตุผลที่ได้ผล

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

ตัวอย่างเช่น การแทรกบล็อก 1 บล็อกระหว่างคิวอื่นอีก 2 คิวการแสดงผล 11 รายการ แต่มีเพียง 3 จะเกิดขึ้นจริง (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();
}

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

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