เมนูตามบริบท

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

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

ใช้ตัวเลือกใหม่

คุณต้องเพิ่มประสิทธิภาพอินเทอร์เฟซ RegistryItem เพื่อใช้ตัวเลือกเมนูตามบริบทใหม่

ID

พร็อพเพอร์ตี้ id ควรเป็นสตริงที่ไม่ซ้ำกันซึ่งระบุหน้าที่ของตัวเลือกเมนูบริบท

const deleteOption = {
  id: 'deleteElement',
};

ขอบเขต

พร็อพเพอร์ตี้ scopeType จะบอก Blockly ว่าตัวเลือกเมนูอาจแสดงในบริบทใด รวมถึงข้อมูลที่ควรส่งไปยัง displayText, preconditionFn และ callback เมนูตามบริบทสามารถกำหนดขอบเขตให้กับบล็อก ความคิดเห็นในพื้นที่ทำงาน และพื้นที่ทำงานได้

const deleteOption = {
  scopeType: Blockly.ContextMenuRegistry.ScopeType.BLOCK,
};

หากต้องการให้เมนูตามบริบททำงานได้หลายขอบเขต คุณควรทำซ้ำตัวเลือกเมนูตามบริบทและกำหนดพารามิเตอร์ขอบเขตสำหรับแต่ละขอบเขตใหม่

const otherDeleteOption = {...deleteOption};
otherDeleteOption.scopeType = Blockly.ContextMenuRegistry.ScopeType.COMMENT;

ข้อความที่แสดง

displayText คือสิ่งที่ควรแสดงต่อผู้ใช้ในฐานะส่วนหนึ่งของตัวเลือกเมนู ข้อความที่แสดงอาจเป็นสตริง หรือ HTML หรือฟังก์ชันที่แสดงผลสตริงหรือ HTML

const deleteOption = {
  displayText: 'Delete block',
};

หากต้องการแสดงคำแปลจากBlockly.Msg คุณต้องใช้ฟังก์ชัน หากคุณพยายามกำหนดค่าโดยตรง ระบบอาจไม่โหลดข้อความและคุณจะได้รับค่า undefined แทน

const deleteOption = {
  displayText: () => Blockly.Msg['MY_DELETE_OPTION_TEXT'],
};

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

const deleteOption = {
  displayText: (scope) => `Delete ${scope.block.type} block`,
}

น้ำหนัก

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

const deleteOption = {
  weight: 10;
}

น้ำหนักสำหรับตัวเลือกเมนูตามบริบทในตัวจะมีลำดับเพิ่มขึ้นโดยเริ่มต้นที่ 1 และเพิ่มขึ้น 1

เงื่อนไขที่ต้องดำเนินการก่อน

นอกเหนือจาก scopeType แล้ว คุณยังใช้ preconditionFn เพื่อจำกัดเวลาและลักษณะการแสดงตัวเลือกเมนูตามบริบทได้ด้วย

โดยควรแสดงผลสตริงใดชุดหนึ่งต่อไปนี้ 'enabled', 'disabled' หรือ 'hidden'

ค่า	คำอธิบาย	รูปภาพ
เปิดใช้อยู่	แสดงว่าตัวเลือกนั้น ทำงานอยู่
ปิดอยู่	แสดงว่าตัวเลือกนี้ ไม่ได้ทำงานอยู่
ซ่อน	ซ่อนตัวเลือก

นอกจากนี้ preconditionFn ยังผ่าน Scope ที่คุณใช้กำหนดสถานะของตัวเลือกได้

const deleteOption = {
  preconditionFn: (scope) => {
    if (scope.block.isDeletable()) {
      return 'enabled';
    }
    return 'disabled';
  }
}

การติดต่อกลับ

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

const deleteOption = {
  callback: (scope, e) => {
    scope.block.dispose();
  }
}

การลงทะเบียน

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

const deleteOption = { /* implementations from above */ };
Blockly.ContextMenuRegistry.registry.register(deleteOption);

แก้ไขตัวเลือกต่อประเภทบล็อก

การบล็อกมีวิธีเพิ่มเติมในการแก้ไขเมนูตามบริบทเพื่อใช้เขียนทับพร็อพเพอร์ตี้ customContextMenu เมธอดนี้ใช้อาร์เรย์ของออบเจ็กต์ ContextMenuOption (ซึ่งเรียงจากรายการเมนูที่บันทึกไว้) จากนั้นแก้ไขอาร์เรย์นั้นในตำแหน่งที่ต้องการเพื่อกำหนดชุดตัวเลือกที่แสดงสุดท้าย

ดูข้อมูลเพิ่มเติมได้ที่กำหนดบล็อก เมนูตามบริบทที่กำหนดเอง

พื้นที่ทำงานก็มีเมธอด configureContextMenu ซึ่งทำงานคล้ายกันด้วย

นำตัวเลือกออก

คุณสามารถนำตัวเลือกออกจากเมนูตามบริบทได้โดยการยกเลิกการลงทะเบียนด้วยรหัส

Blockly.ContextMenuRegistry.registry.unregister('someID');

รหัสสำหรับตัวเลือกเริ่มต้นจะอยู่ใน contextmenu_items.ts

แก้ไขตัวเลือก

คุณแก้ไขตัวเลือกที่มีอยู่ได้โดยรับรายการจากรีจิสทรีแล้วแก้ไขในตำแหน่งที่ต้องการ

const option = Blockly.ContextMenuRegistry.registry.getItem('someID');
option?.displayText = 'some other display text';