Blockly > BlockSvg

คลาส BlockSvg

คลาสสำหรับการแสดง SVG ของบล็อก โดยปกติแล้วจะไม่เรียกใช้โดยตรง แต่ควรใช้ workspace.newBlock()

ลายเซ็น:

export declare class BlockSvg extends Block implements IBoundedElement, IContextMenu, ICopyable<BlockCopyData>, IDraggable, IDeletable, IFocusableNode 

ขยาย: Block

การใช้งาน: IBoundedElement, IContextMenu, ICopyable<BlockCopyData>, IDraggable, IDeletable, IFocusableNode

ผู้ผลิต

ผู้ผลิต	คีย์ตัวปรับแต่ง	คำอธิบาย
(constructor)(workspace, prototypeName, opt_id)		สร้างอินสแตนซ์ใหม่ของคลาส BlockSvg

พร็อพเพอร์ตี้

พร็อพเพอร์ตี้	คีย์ตัวปรับแต่ง	ประเภท	คำอธิบาย
COLLAPSED_WARNING_ID	static readonly	(ไม่ได้ประกาศ)	รหัสที่จะแสดงคำเตือน "คำเตือนที่ยุบ" ช่วยให้เรานำคำเตือน "คำเตือนที่ยุบ" ออกได้โดยไม่ต้องนำคำเตือนใดๆ ที่อยู่ในบล็อกออก
customContextMenu?		(p1: Array<ContextMenuOption | LegacyContextMenuOption>) => void	(ไม่บังคับ)
แยกย่อย		(p1: Workspace) => BlockSvg	(ไม่บังคับ)
height		ตัวเลข	ความสูงของบล็อกนี้ โดยไม่รวมบล็อกคำสั่งที่อยู่ด้านบนหรือด้านล่าง ความสูงอยู่ในหน่วยพื้นที่ทำงาน
INLINE	static readonly	(ไม่ได้ประกาศ)	ค่าคงที่สำหรับระบุแถวที่จะแสดงในบรรทัด อย่าชนกับ Blockly.inputTypes
mutator		MutatorIcon | null	ไอคอนมิวเทเตอร์ของบล็อก (หากมี)
nextConnection		RenderedConnection
outputConnection		RenderedConnection
previousConnection		RenderedConnection
rendered	readonly	(ไม่ได้ประกาศ)	บล็อกนี้เป็น BlockSVG ไหม
saveConnections?		(rootBlock: BlockSvg) => void	(ไม่บังคับ) วิธีที่ไม่บังคับซึ่งจะบันทึกบล็อกที่เชื่อมต่อกับบล็อกนี้เพื่อให้สามารถกู้คืนได้ในภายหลังหลังจากที่บล็อกนี้ได้รับการจัดองค์ประกอบใหม่ (กำหนดค่าใหม่) โดยปกติจะบันทึกบล็อกที่เชื่อมต่อในพร็อพเพอร์ตี้ในบล็อกในเมนูย่อยของ Mutator เพื่อให้การจัดเรียงบล็อกคอมโพเนนต์เหล่านั้นใหม่จะจัดเรียงบล็อกที่เชื่อมต่อที่เกี่ยวข้องในบล็อกนี้ใหม่โดยอัตโนมัติหลังจากที่บล็อกนี้ได้รับการจัดคอมโพสใหม่ MutatorIcon จะจัดเตรียมเครื่องมือฟังเหตุการณ์เพื่อเรียกใช้เมธอดนี้ทุกครั้งที่ฟลายเอาต์ของ Mutator เปิดอยู่และมีการเปลี่ยนแปลงในพื้นที่ทํางานของบล็อกนี้ เพื่อให้ข้อมูลการเชื่อมต่อที่บันทึกไว้เป็นข้อมูลล่าสุด
style		BlockStyle
width		ตัวเลข	ความกว้างของบล็อกนี้ รวมถึงบล็อกค่าที่เชื่อมต่อ ความกว้างอยู่ในหน่วยพื้นที่ทำงาน
workspace		WorkspaceSvg

เมธอด

วิธีการ	คีย์ตัวปรับแต่ง	คำอธิบาย
addClass(className)		เพิ่มคลาส CSS ลงในกลุ่ม SVG ของบล็อกนี้
addIcon(icon)
addSelect()		เพิ่มเอฟเฟกต์ภาพ "เลือก" ให้กับบล็อก แต่ไม่ได้เลือกบล็อกหรือทริกเกอร์เหตุการณ์จริงๆ
appendInput(input)
bringToFront(blockOnly)		ย้ายบล็อกนี้ไปที่ด้านหน้าของพื้นที่ทำงานที่มองเห็นได้ แท็กไม่สนใจ z-index ดังนั้น SVG จึงแสดงแท็กตามลำดับที่อยู่ใน DOM การวางบล็อกนี้ไว้เป็นอันดับแรกภายใน ของกลุ่มบล็อกจะทำให้บล็อกนี้แสดงเหนือบล็อกอื่นๆ ใช้อย่างระมัดระวัง เนื่องจากวิธีนี้มีค่าใช้จ่ายสูงเพราะจะจัดลําดับโหนด DOM ใหม่
bumpNeighbours()		เลื่อนบล็อกที่ไม่ได้เชื่อมต่อออกจากการจัดแนว บล็อก 2 บล็อกที่ไม่ได้เชื่อมต่อกันจริงไม่ควรอยู่ในแนวเดียวกันบนหน้าจอโดยบังเอิญ เนื่องจากจะสร้างความสับสนให้กับผู้ใช้ปลายทาง
calculateContextMenuLocation(e)	protected	รับตำแหน่งที่จะแสดงเมนูตามบริบทสำหรับบล็อกนี้ ใช้ตำแหน่งของการคลิกหากมีการคลิกบล็อก หรือใช้ตำแหน่งตามช่องของบล็อกในกรณีอื่นๆ
canBeFocused()		ดู IFocusableNode.canBeFocused
checkAndDelete()		ลบบล็อกและซ่อนแกล้งเมื่อดำเนินการดังกล่าว ระบบจะไม่ลบบล็อกหากอยู่ในเมนูแบบลอย การดำเนินการนี้จะเรียกใช้จากเมนูตามบริบทและแป้นพิมพ์ลัดเป็นการดำเนินการลบแบบเต็ม หากคุณกำลังทิ้งบล็อกออกจากพื้นที่ทำงานและไม่จำเป็นต้องตรวจสอบเมนูแบบเลื่อนลง จัดกลุ่มเหตุการณ์ หรือซ่อนแกลบ ให้ใช้ block.dispose() โดยตรง
dispose(healStack, animate)		ทิ้งบล็อกนี้
disposeInternal()		ทิ้งบล็อกนี้โดยไม่ต้องทำสิ่งที่บล็อกด้านบนกำหนด เช่น ทริกเกอร์เอฟเฟกต์ UI นำโหนดออก ฯลฯ
drag(newLoc, e)		ลากบล็อกไปยังตำแหน่งที่ระบุ
endDrag(e)		สิ้นสุดการลากในบล็อก
generateContextMenu(e)	protected	สร้างเมนูตามบริบทสำหรับบล็อกนี้
getBoundingRectangle()		แสดงผลพิกัดของกรอบล้อมรอบที่อธิบายขนาดของบล็อกนี้และบล็อกที่ซ้อนอยู่ด้านล่าง ระบบพิกัด: พิกัดพื้นที่ทำงาน
getBoundingRectangleWithoutChildren()		แสดงผลพิกัดของกรอบล้อมรอบที่อธิบายขนาดของบล็อกนี้เพียงอย่างเดียว ระบบพิกัด: พิกัดพื้นที่ทำงาน
getChildren(ordered)		ค้นหาบล็อกทั้งหมดที่ซ้อนอยู่ภายในบล็อกนี้โดยตรง รวมถึงอินพุตค่าและคำสั่ง ตลอดจนคำสั่งใดๆ ที่ตามมา ไม่รวมการเชื่อมต่อในแท็บเอาต์พุตหรือข้อความก่อนหน้า คุณจะจัดเรียงบล็อกตามตำแหน่งจากบนลงล่างหรือไม่ก็ได้
getColour()		รับสีของบล็อก
getColourSecondary()		รับสีรองของบล็อก
getColourTertiary()		รับสีระดับที่ 3 ของบล็อก
getFocusableElement()		ดู IFocusableNode.getFocusableElement
getFocusableTree()		ดู IFocusableNode.getFocusableTree
getNextBlock()		ส่งคืนบล็อกคำสั่งถัดไปที่เชื่อมต่อกับบล็อกนี้โดยตรง
getPreviousBlock()		แสดงผลบล็อกที่เชื่อมต่อกับการเชื่อมต่อก่อนหน้า
getRelativeToSurfaceXY()		แสดงผลพิกัดของมุมซ้ายบนของบล็อกนี้เทียบกับจุดเริ่มต้น (0,0) ของพื้นผิวการวาดในหน่วยพื้นที่ทำงาน หากบล็อกอยู่ในพื้นที่ทำงาน (0, 0) คือจุดเริ่มต้นของระบบพิกัดพื้นที่ทำงาน ซึ่งจะไม่เปลี่ยนแปลงตามขนาดของพื้นที่ทำงาน
getStyle()		แสดงผลออบเจ็กต์ BlockStyle ที่ใช้จัดรูปแบบบล็อกนี้
getSvgRoot()		แสดงโหนดรูทของ SVG หรือ null หากไม่มี
initSvg()		สร้างและเริ่มต้นการแสดง SVG ของบล็อก อาจเรียกใช้มากกว่า 1 ครั้ง
isCopyable()		แสดงผลว่าบล็อกนี้คัดลอกได้หรือไม่
isMovable()		แสดงผลว่าบล็อกนี้ย้ายได้หรือไม่
jsonInit(json)
markDirty()		แจ้งทุกอินพุตในบล็อกนี้เพื่อทำเครื่องหมายฟิลด์เป็น "ไม่สะอาด" ฟิลด์ที่ต้องอัปเดตคือฟิลด์ที่ต้องแสดงผลอีกครั้ง
moveBy(dx, dy, reason)		ย้ายบล็อกโดยใช้การชดเชยแบบสัมพัทธ์
moveNumberedInputBefore(inputIndex, refIndex)		ย้ายอินพุตที่มีหมายเลขไปยังตำแหน่งอื่นในบล็อกนี้
moveTo(xy, reason)		ย้ายบล็อกไปยังตำแหน่ง
onNodeBlur()		ดู IFocusableNode.onNodeBlur
onNodeFocus()		ดู IFocusableNode.onNodeFocus
removeClass(className)		นำคลาส CSS ออกจากกลุ่ม SVG ของบล็อกนี้
removeIcon(type)
removeInput(name, opt_quiet)		นำอินพุตออกจากบล็อกนี้
removeSelect()		นำเอฟเฟกต์ภาพ "เลือก" ออกจากบล็อก แต่ไม่ได้ยกเลิกการเลือกหรือทริกเกอร์เหตุการณ์จริง
render()		จัดวางและปรับโฟลว์บล็อกตามเนื้อหาและการตั้งค่าทันที
revertDrag()		ย้ายบล็อกกลับไปยังตำแหน่งเดิมเมื่อเริ่มลาก
scheduleSnapAndBump()		สแนปกับตารางกริด แล้วดันบล็อกที่อยู่ติดกันออกไปที่ส่วนท้ายของการแสดงผลถัดไป
select()		เลือกบล็อกนี้ ไฮไลต์บล็อกด้วยภาพ
setCollapsed(collapsed)		ตั้งค่าว่าจะยุบบล็อกหรือไม่
setColour(colour)		เปลี่ยนสีของบล็อก
setDeletable(deletable)		เพิ่มคลาส blocklyNotDeletable เมื่อบล็อกลบไม่ได้ หรือนำคลาสออกเมื่อบล็อกลบได้
setDisabledReason(disabled, reason)		เพิ่มหรือนำเหตุผลที่อาจปิดใช้การบล็อกออก หากการบล็อกมีเหตุผลที่ต้องปิดใช้ ระบบจะถือว่าการบล็อกนั้นปิดใช้แล้ว การบล็อกอาจถูกปิดใช้พร้อมกันด้วยเหตุผลหลายประการที่ไม่เกี่ยวข้องกัน เช่น เมื่อผู้ใช้ปิดใช้ด้วยตนเอง หรือการบล็อกไม่ถูกต้อง
setDragStrategy(dragStrategy)		ตั้งค่ากลยุทธ์การลากสำหรับบล็อกนี้
setEditable(editable)		กำหนดว่าบล็อกนี้แก้ไขได้หรือไม่
setHighlighted(highlighted)		ตั้งค่าว่าจะไฮไลต์บล็อกหรือไม่ โดยมักใช้การไฮไลต์บล็อกเพื่อทำเครื่องหมายบล็อกที่กำลังดำเนินการอยู่ด้วยภาพ
setInputsInline(newBoolean)		กำหนดว่าจะจัดเรียงอินพุตค่าในแนวนอนหรือแนวตั้ง
setMovable(movable)		กำหนดว่าบล็อกนี้ย้ายได้หรือไม่
setMutator(mutator)		ให้กล่องโต้ตอบ Mutator แก่บล็อกนี้
setNextStatement(newBoolean, opt_check)		กำหนดว่าบล็อกอื่นจะต่อท้ายบล็อกนี้ได้หรือไม่
setOutput(newBoolean, opt_check)		กำหนดว่าบล็อกนี้จะแสดงผลค่าหรือไม่
setPreviousStatement(newBoolean, opt_check)		ตั้งค่าว่าบล็อกนี้จะต่อท้ายบล็อกอื่นได้หรือไม่
setStyle(blockStyleName)		กำหนดค่ารูปแบบและสีของบล็อก
setWarningText(text, id)		ตั้งค่าข้อความคำเตือนของบล็อกนี้
snapToGrid()		สแนปบล็อกนี้ไปยังจุดกริดที่ใกล้ที่สุด
startDrag(e)		เริ่มลากบล็อก
toCopyData()		เข้ารหัสบล็อกเพื่อคัดลอก
toFlyoutInfo()		แสดงการแทนบล็อกนี้ที่แสดงในเมนูแบบลอยได้
translate(x, y)		เปลี่ยนรูปแบบบล็อกโดยตั้งค่าการแปลในแอตทริบิวต์การเปลี่ยนรูปแบบของ SVG ของบล็อก
unselect()		ยกเลิกการเลือกบล็อกนี้ ยกเลิกการไฮไลต์บล็อกด้วยภาพ