mlogclub
52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
"use client"
|
|
|
|
import type { LineRenderProps } from "@flowgram.ai/free-lines-plugin"
|
|
import { PlusIcon } from "lucide-react"
|
|
import { usePlayground } from "@flowgram.ai/free-layout-editor"
|
|
|
|
import { useWorkflowPortAdd } from "./workflow-port-add-context"
|
|
|
|
export function WorkflowLineAddButton({
|
|
line,
|
|
selected,
|
|
hovered,
|
|
color,
|
|
}: LineRenderProps) {
|
|
const playground = usePlayground()
|
|
const requestPortAdd = useWorkflowPortAdd()
|
|
const { fromPort, toPort } = line
|
|
const visible = !line.disposed && !playground.config.readonly && (selected || hovered)
|
|
|
|
if (!visible) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
className="absolute flex size-6 items-center justify-center rounded-full border border-white bg-white text-[#2575FC] shadow-sm transition-transform" // hover:scale-105
|
|
style={{
|
|
transform: `translate(-50%, -50%) translate(${line.center.labelX}px, ${line.center.labelY}px)`,
|
|
color,
|
|
pointerEvents: "all",
|
|
}}
|
|
aria-label="添加节点"
|
|
data-line-id={line.id}
|
|
onClick={(event) => {
|
|
event.stopPropagation()
|
|
if (!fromPort || !toPort) {
|
|
return
|
|
}
|
|
requestPortAdd?.({
|
|
sourcePort: fromPort,
|
|
targetPort: toPort,
|
|
line,
|
|
event,
|
|
})
|
|
}}
|
|
>
|
|
<PlusIcon className="size-3.5" strokeWidth={2.4} />
|
|
</button>
|
|
)
|
|
}
|