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

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

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

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

การเชื่อมต่อที่รอดำเนินการมี 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,
  },
};

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