snapshot of https://github.com/tldraw/tldraw.git (main, 2026-09-23; blobs > 131072B omitted)

templates/branching-chat/client/ports/Port.tsx

@@ -0,0 +1,80 @@
+import classNames from 'classnames'
+import { T, TLShapeId, useEditor, useValue } from 'tldraw'
+import { getNodePortConnections } from '../nodes/nodePorts'
+import { portState } from './portState'
+
+export type PortId = string
+
+export const shapePort = T.object({
+	id: T.string,
+	terminal: T.literalEnum('start', 'end'),
+	x: T.number,
+	y: T.number,
+})
+
+export type ShapePort = T.TypeOf<typeof shapePort>
+
+/**
+ * Port ids are unique within a shape. To identify a port we need both the shape id and the port id.
+ */
+export interface PortIdentifier {
+	shapeId: TLShapeId
+	portId: PortId
+}
+
+/**
+ * This react component renders a port.
+ */
+export function Port({ shapeId, port }: { shapeId: TLShapeId; port: ShapePort }) {
+	const editor = useEditor()
+
+	// isHinting is true if the user is currently dragging a connection to this port. it means we
+	// should highlight this port.
+	const isHinting = useValue(
+		'isHinting',
+		() => {
+			const { hintingPort } = portState.get(editor)
+			return hintingPort && hintingPort.portId === port.id && hintingPort.shapeId === shapeId
+		},
+		[editor, shapeId, port.id]
+	)
+
+	// isEligible is true if the the user is currently dragging a connection, and this port is one
+	// that the connection can be connected to.
+	const isEligible = useValue(
+		'isEligible',
+		() => {
+			const { eligiblePorts } = portState.get(editor)
+			if (!eligiblePorts) return false
+			if (eligiblePorts.terminal !== port.terminal) return false
+			if (eligiblePorts.excludeNodes?.has(shapeId)) return false
+			if (port.terminal === 'end') {
+				// if the port is an end port, it can only have one connection, so it's not eligible
+				// when there is a connection
+				const connections = getNodePortConnections(editor, shapeId)
+				return !connections.some((c) => c.ownPortId === port.id)
+			}
+			return true
+		},
+		[editor, shapeId, port.id, port.terminal]
+	)
+
+	return (
+		<div
+			className={classNames(
+				`Port`,
+				isHinting ? 'Port_hinting' : isEligible ? 'Port_eligible' : undefined
+			)}
+			style={{
+				transform: `translate(${port.x}px, ${port.y}px)`,
+			}}
+			onPointerDown={() => {
+				editor.setCurrentTool('select.pointing_port', {
+					shapeId,
+					portId: port.id,
+					terminal: port.terminal,
+				})
+			}}
+		/>
+	)
+}