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

ระบบคัดลอกและวางที่สร้างขึ้นจาก 3 สิ่ง ได้แก่ ออบเจ็กต์ ICopyable ICopyData ที่แสดงถึงออบเจ็กต์ที่คัดลอก และออบเจ็กต์ IPaster ซึ่งสามารถเปลี่ยนข้อมูลที่คัดลอกกลับไปเป็นออบเจ็กต์ที่คัดลอกได้ ICopyable ทุกประเภทต้องมี IPaster ที่เชื่อมโยงซึ่งสามารถวางข้อมูลนั้นได้

ระบบเหล่านี้จะแสดงต่อผู้ใช้ผ่านตัวเลือกเมนูตามบริบทและแป้นพิมพ์ลัด

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

ใช้โค้ดที่คัดลอกได้

หากต้องการสร้างออบเจ็กต์ที่คัดลอกได้ คุณต้องใช้งานอินเทอร์เฟซ ICopyable

เลือกได้

อินเทอร์เฟซ 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,
    };
  }
}

ใช้โปรแกรมวาง

หากต้องการสร้างโปรแกรมวาง คุณต้องติดตั้งใช้งานอินเทอร์เฟซ 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 ที่เชื่อมโยงกับข้อมูลข้อความหนึ่งๆ จากพร็อพเพอร์ตี้ paster ได้

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