ผู้ที่ดูตัวอย่างการเชื่อมต่อ

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

ตัวแสดงตัวอย่างการเชื่อมต่อเริ่มต้นจะวางตัวทำเครื่องหมายการแทรกในตำแหน่งที่บล็อกจะเชื่อมต่อ นอกจากนี้ ยังไฮไลต์เส้นเชื่อมต่อ และทำให้เอฟเฟกต์ค่อยๆ จางลงต่อบล็อกที่จะถูกแทนที่หรือตัดการเชื่อมต่อ

ประเภทของการเชื่อมต่อที่รอดำเนินการ

การเชื่อมต่อที่รอดำเนินการมี 2 ประเภท ในกรณีนี้ การบล็อกที่ทำได้นั้นจะแทนที่การบล็อกที่มีอยู่ และบล็อกที่มีอยู่จะยกเลิกการเชื่อมต่อ ในกรณีอื่นๆ ระบบจะแทรกบล็อกที่ตกหล่นโดยไม่ถอดบล็อกอื่นๆ ออก

การแทนที่

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

โดยค่าเริ่มต้น เราจะระบุให้ทราบโดยใส่เอฟเฟกต์เฟดลงในบล็อกที่กำลังแทนที่

การแทรก

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

โดยค่าเริ่มต้น เราระบุสิ่งนี้โดยการสร้างเครื่องหมายการแทรก และไฮไลต์การเชื่อมต่อที่จะเชื่อมต่อ

สร้างตัวอย่างที่กำหนดเอง

หากต้องการใช้ภาพอื่นเพื่อดูตัวอย่างการเชื่อมต่อที่รอดำเนินการ คุณสามารถสร้างการใช้งาน IConnectionPreviewer ที่กำหนดเองได้

การก่อสร้างและกำจัด

คุณต้องใช้ตัวสร้างและวิธีการกำจัดทิ้งสำหรับ IConnectionPreviewer

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

class MyConnectionPreviewer implements IConnectionPreviewer {
  constructor(draggedBlock: Blockly.BlockSvg) {
    // Initialize state here.
  }
}

ระบบจะเรียกใช้เมธอด dispose เมื่อใดก็ตามที่การลากบล็อกสิ้นสุดลง หากต้องการยกเลิกการระบุสถานะเมื่อกำจัดอินสแตนซ์ IConnectionPreviewer แล้ว คุณควรดำเนินการที่นี่

dispose() {
  // Dispose of and dereference any state.
}

สร้างตัวอย่าง

IConnectionPreviewer ต้องใช้ตรรกะเพื่อแสดงตัวอย่างการเชื่อมต่อแบบเห็นภาพ

การแทนที่

หากต้องการดูตัวอย่างการแทนที่ ให้ใช้เมธอด previewReplacement

previewReplacement(draggedConn, staticConn, replacedBlock) {
  // Visually indicate that the replacedBlock will be disconnected, and the
  // draggedConn will be connected to the staticConn.
}

การแทรก

หากต้องการดูตัวอย่างการแทรก ให้ใช้เมธอด previewConnection

previewConnection(draggedConn, staticConn) {
  // Visually indicate the draggedConn will be connected to the staticConn.
}

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

previewConnection(draggedConn, staticConn) {
  if (staticConn.targetConnection) {
    // The dragged block is being inserted between blocks.
  } else {
    // The dragged block is connecting to an empty input.
  }
}

ตัวอย่าง CSS

คุณสามารถดูตัวอย่างการเชื่อมต่อได้โดยใช้ CSS กับการบล็อก เช่น จะมีการสลับการค่อยๆ แทนที่โดยค่าเริ่มต้นโดยการเพิ่มคลาส CSS ของ blocklyReplaceable ลงในบล็อก

previewReplacement(draggedConn, staticConn, replacedBlock) {
  Blockly.utils.dom.addClass(replacedblock.getSvgRoot(), 'my-custom-class');
}

ตัวอย่างตัวแสดงผล

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

previewReplacement(draggedConn, staticConn, replacedBlock) {
  const renderer = replacedBlock.workspace.getRenderer()
  if (renderer.addReplacementIndicator) {
    renderer.addReplacementIndicator(replacedBlock);
  }
}

ซ่อนตัวอย่าง

IConnectionPreviewer ของคุณต้องสามารถซ่อนตัวอย่างได้ ระบบจะเรียกใช้เมื่อบล็อกที่มีการลากเลื่อนออกนอกช่วงของการเชื่อมต่อทั้งหมด จึงไม่ควรแสดงตัวอย่าง และระบบจะเรียกใช้ตัวแสดงตัวอย่างทันทีที่กำจัดเครื่องมือแสดงตัวอย่างโฆษณา

hidePreview() {
  // Remove CSS classes, toggle renderer methods, etc.
}

การลงทะเบียนและการใช้งาน

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

Blockly.registry.register(
  Blockly.registry.Type.CONNECTION_PREVIEWER,
  'MyConnectionPreviewer',
  MyConnectionPreviewer,
);

// You can use the string.
const myWorkspace = Blockly.inject({
  // options...
  plugins: {
    connectionPreviewer: 'myConnectionPreviewer',
  },
};

// Or you can pass the class / constructor directly.
const myWorkspace = Blockly.inject({
  // options...
  plugins: {
    connectionPreviewer: MyConnectionPreviewer,
  },
};

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