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

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

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

มีสถานการณ์น้อยมากที่คุณต้องการใช้ตัวคัดลอกที่กำหนดเองหรือตัววางที่กำหนดเอง (เช่น ปลั๊กอินmultiselect หรือปลั๊กอินการคัดลอกและวางข้ามแท็บ) เนื่องจากโดยปกติแล้วระบบจะแสดงผลออบเจ็กต์ที่คัดลอกได้ และคุณจะเพิ่มออบเจ็กต์ที่แสดงผลใหม่ลงใน 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 ได้

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