คัดลอกและวาง

Blockly รองรับการดำเนินการคัดลอก ตัด และวางสำหรับคอมโพเนนต์ในตัวหลายรายการ เช่น บล็อก ความคิดเห็นในพื้นที่ทำงาน และบับเบิล

ลักษณะการทำงานเริ่มต้นของคลิปบอร์ด

Blockly Core มาพร้อมแป้นพิมพ์ลัดที่ใช้ตัด คัดลอก หรือวางบล็อก ความคิดเห็นในพื้นที่ทํางาน และคอมโพเนนต์อื่นๆ ที่ใช้ICopyable, IDraggable และ IDeletable อินเทอร์เฟซ นอกจากนี้ยังมีตัวเลือกเมนูตามบริบทสำหรับการทำบล็อกซ้ำด้วย คุณสามารถแก้ไขหรือนำทางลัดและรายการเมนูเริ่มต้นเหล่านั้นออกได้ตามต้องการ

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

คัดลอกและวางในพื้นที่ทำงานและแท็บต่างๆ

หากต้องการอนุญาตให้ผู้ใช้คัดลอกบล็อกจากพื้นที่ทำงานหนึ่งแล้ววางลงในพื้นที่ทำงานอื่น หรือแม้แต่ในพื้นที่ทำงานในสำเนาของแอปพลิเคชันที่ทำงานในแท็บอื่น คุณสามารถติดตั้งปลั๊กอิน @blockly/plugin-cross-tab-copy-paste ได้

ลักษณะการทำงานของคลิปบอร์ดที่กำหนดเอง

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

ออบเจ็กต์ที่คัดลอกได้ที่กำหนดเอง

คุณสามารถทำให้ออบเจ็กต์ใดก็ได้ใช้งานร่วมกับระบบคัดลอก/วางได้โดยใช้อินเทอร์เฟซ 5 รายการ ได้แก่ ICopyable, IDraggable และ IDeletable เพื่อแสดงออบเจ็กต์ที่คัดลอกได้ ICopyData เพื่อแสดงออบเจ็กต์ที่คัดลอก และ IPaster เพื่อแสดงออบเจ็กต์ที่เปลี่ยนข้อมูลที่คัดลอกกลับเป็นออบเจ็กต์ที่คัดลอกได้ ICopyableทุกประเภทต้องมีIPasterที่เชื่อมโยงกันซึ่งวางข้อมูลนั้นได้

ออบเจ็กต์ที่ใช้ ICopyable,IDraggable และ IDeletable และมี IPaster และ ICopyData ที่เกี่ยวข้องจะทำงานกับระบบคลิปบอร์ดเริ่มต้นโดยอัตโนมัติ

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

นำ Copyable ไปใช้

หากต้องการสร้างออบเจ็กต์ที่คัดลอกได้ คุณต้องใช้ICopyable, IDraggable และอินเทอร์เฟซ IDeletable อินเทอร์เฟซ 2 รายการหลังนี้เป็นสิ่งจำเป็นเพื่อให้สามารถจัดการและลบออบเจ็กต์ที่วางได้

เลือกได้

อินเทอร์เฟซ ICopyable ขยายอินเทอร์เฟซ ISelectable ซึ่งหมายความว่าคุณต้องใช้เมธอดและพร็อพเพอร์ตี้เหล่านั้นด้วย

ต้องเลือกได้เนื่องจากแป้นพิมพ์ลัดจะดูออบเจ็กต์ที่เลือกเพื่อพิจารณาว่าจะคัดลอกอะไร

class MyCopyable implements ISelectable {
  constructor(workspace) {
    this.id = Blockly.utils.idGenerator.genUid();
    this.workspace = workspace;
  }

  select() {
    // Visually indicate this draggable is selected.
  }

  unselect() {
    // Visually indicate this draggable is not selected.
  }
}

คัดลอกได้

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

ข้อมูลที่คัดลอกต้องมีพร็อพเพอร์ตี้ paster ซึ่งมีชื่อสตริงที่ลงทะเบียนซึ่งเชื่อมโยงกับผู้ที่ควรวางข้อมูลที่คัดลอกนี้ ดูข้อมูลเพิ่มเติมเกี่ยวกับฟีเจอร์วางได้ที่ติดตั้งใช้งานฟีเจอร์วาง

class MyCopyable implements ICopyable {
  constructor(workspace, state) {
    this.workspace = workspace;
    this.myState = state;
  }

  toCopyData() {
    return {
      // This string matches the string used to register the paster.
      paster: 'MY_PASTER',
      state: this.myState,
    };
  }
}

ICopyable ยังมีเมธอดที่ไม่บังคับ isCopyable ซึ่งจะแสดงว่าปัจจุบันคัดลอกออบเจ็กต์ได้หรือไม่

ลากและลบได้

ดูข้อมูลเกี่ยวกับการใช้งาน IDraggable และ IDeletable ได้ที่รายการที่ลากได้ที่กำหนดเอง

ใช้ฟีเจอร์วาง

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

class MyPaster implements IPaster {
  paste(copyData, workspace, coordinate) {
    return new MyCopyable(workspace, copyData.state);
    // Optionally position the copyable at the passed coordinate.
    // Optionally select the copyable after it is pasted.
  }
}

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

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

// This string matches the string assigned to the 'paster' property.
Blockly.clipboard.registry.register('MY_PASTER', new MyPaster());