69 lines
1.8 KiB
TypeScript
69 lines
1.8 KiB
TypeScript
|
"use client"
|
||
|
|
|
||
|
|
import { useCallback } from "react"
|
||
|
|
|
||
|
|
import type { LineRenderProps } from "@flowgram.ai/free-lines-plugin"
|
||
|
|
import { WorkflowNodePanelService } from "@flowgram.ai/free-node-panel-plugin"
|
||
|
|
import { PlusIcon } from "lucide-react"
|
||
|
|
import { usePlayground, useService } from "@flowgram.ai/free-layout-editor"
|
||
|
|
|
||
|
|
export function WorkflowLineAddButton({
|
||
|
|
line,
|
||
|
|
selected,
|
||
|
|
hovered,
|
||
|
|
color,
|
||
|
|
}: LineRenderProps) {
|
||
|
|
const playground = usePlayground()
|
||
|
|
const nodePanelService = useService<WorkflowNodePanelService>(WorkflowNodePanelService)
|
||
|
|
const { fromPort, toPort } = line
|
||
|
|
const visible = !line.disposed && !playground.config.readonly && (selected || hovered)
|
||
|
|
|
||
|
|
const openNodePanel = useCallback(() => {
|
||
|
|
if (!fromPort || !toPort) {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
void nodePanelService.call({
|
||
|
|
panelPosition: {
|
||
|
|
x: line.center.labelX,
|
||
|
|
y: line.center.labelY,
|
||
|
|
},
|
||
|
|
fromPort,
|
||
|
|
toPort,
|
||
|
|
panelProps: {
|
||
|
|
fromPort,
|
||
|
|
},
|
||
|
|
enableBuildLine: true,
|
||
|
|
enableAutoOffset: true,
|
||
|
|
afterAddNode: (node) => {
|
||
|
|
if (node && !line.disposed) {
|
||
|
|
line.dispose()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
})
|
||
|
|
}, [fromPort, line, nodePanelService, toPort])
|
||
|
|
|
||
|
|
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()
|
||
|
|
openNodePanel()
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<PlusIcon className="size-3.5" strokeWidth={2.4} />
|
||
|
|
</button>
|
||
|
|
)
|
||
|
|
}
|