รายการที่ลากได้ที่กำหนดเอง

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

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

หน้าที่รับผิดชอบ

องค์ประกอบที่ลากได้มีหน้าที่หลายอย่างเมื่อดำเนินการลาก ดังนี้

• ย้ายองค์ประกอบ SVG ไปยังเลเยอร์การลาก
• การแปลองค์ประกอบ SVG
• ทริกเกอร์เหตุการณ์การย้าย

การใช้งาน

หากต้องการสร้างรายการที่ลากได้ใหม่ คุณต้องใช้ IRenderedElement และ IDraggable อินเทอร์เฟซ ซึ่งจะช่วยให้ Blockly ทราบว่าออบเจ็กต์ของคุณมองเห็นได้และลากได้

class MyDraggable extends IRenderedElement, IDraggable {}

ส่งคืนองค์ประกอบ SVG รูท

เมธอด getRootSvg จะแสดงผลองค์ประกอบ SVG รูท (โดยปกติคือกลุ่ม) ที่มีองค์ประกอบอื่นๆ ทั้งหมดที่ประกอบกันเป็นมุมมองสำหรับ รายการที่ลากได้

getSvgRoot() {
  return this.rootSvg;
}

ความสามารถในการเคลื่อนย้าย

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

isMovable() {
  return true;
}

ตำแหน่งการคืนสินค้า

เมธอด getRelativeToSurfaceXY จะแสดงผล Coordinate ซึ่งระบุตำแหน่งของมุมบนซ้ายของรายการที่ลากได้ในพิกัดพื้นที่ทำงาน

พิกัดพื้นที่ทำงานมีจุดเริ่มต้นที่ด้านซ้ายสุดและด้านบนสุดของ พื้นที่ทำงาน และจะไม่เปลี่ยนแปลงเมื่อมีการปรับขนาดหรือย้ายพื้นที่ทำงาน

getRelativeToSurfaceXY() {
  return this.loc;
}

เริ่มการลาก

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

นอกจากนี้ ควรเปลี่ยนองค์ประกอบ SVG ให้อยู่ในเลเยอร์การลากของพื้นที่ทํางาน เพื่อให้องค์ประกอบดังกล่าวอยู่เหนือองค์ประกอบอื่นๆ

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

startDrag(e) {
  // Save the original location so we can revert the drag.
  this.startLoc = this.getRelativeToSurfaceXY();

  // Disable resizing the workspace for performance.
  this.workspace.setResizesEnabled(false);

  // Put the element on the drag layer.
  this.workspace.getLayerManager()?.moveToDragLayer(this);

  // Fire a drag event...

  // etc...
}

ลาก

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

drag(newLoc, e) {
  this.moveTo(newLoc);
}

เปลี่ยนกลับการลาก

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

revertDrag() {
  // Move back to the position that was stored in `startDrag`.
  this.moveTo(this.startLoc);
}

สิ้นสุดการลาก

เมธอด endDrag จะล้างการลาก ปล่อยข้อมูลหรือออบเจ็กต์ที่จัดเก็บไว้ และ ส่งคืนองค์ประกอบที่ลากได้ไปยังเลเยอร์เดิม

endDrag จะเรียกใช้หลังจาก revertDrag เสมอหากมีการเรียกใช้ revertDrag

endDrag() {
  // Put the element back on its original layer (in this case BLOCK).
  this.workspace
    .getLayerManager()
    ?.moveOffDragLayer(this, Blockly.layers.BLOCK);

  // Allow the workspace to start resizing again.
  this.workspace.setResizesEnabled(true);
}

การเลือก

องค์ประกอบที่ถูกลากจะกำหนดโดยองค์ประกอบที่เลือกเมื่อตรวจพบการลาก

ISelectable

หากต้องการเลือกองค์ประกอบที่ลากได้ องค์ประกอบนั้นต้องใช้ISelectable อินเทอร์เฟซ

class MyDraggable 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.
  }
}

ตั้งค่าการเลือก

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

  constructor() {
    this.initSvg();

    Blockly.browserEvents.conditionalBind(
      this.getSvgRoot(),
      'pointerdown',
      this,
      () => Blockly.common.setSelected(this));
  }

ความเข้ากันได้

องค์ประกอบที่ลากได้สามารถใช้ส่วนติดต่อเพิ่มเติมเพื่อให้โต้ตอบกับ ระบบอื่นๆ ใน Blockly ได้

ลบได้

คุณสามารถใช้IDeleteableอินเทอร์เฟซเพื่อให้ทิ้ง รายการที่ลากได้โดยถังขยะหรือเป้าหมายการลบอื่นๆ

class MyDraggable implements IDeletable {
  isDeletable() {
    return true;
  }

  dispose() {
    // Dispose of any references to data or SVG elements.
  }

  setDeleteStyle() {
    // Visually indicate that the draggable is about to be deleted.
  }
}

คัดลอกได้

คุณสามารถใช้ICopyableอินเทอร์เฟซเพื่ออนุญาตให้คัดลอกรายการที่ลากได้ และกำหนดIPasterเพื่ออนุญาตให้วางได้

ดูข้อมูลเพิ่มเติมเกี่ยวกับการคัดลอกและวางได้ที่คัดลอกและวาง