diff --git a/examples/feature-examples/src/pages/graph/index.tsx b/examples/feature-examples/src/pages/graph/index.tsx index aae72a3fe..0bcf09562 100644 --- a/examples/feature-examples/src/pages/graph/index.tsx +++ b/examples/feature-examples/src/pages/graph/index.tsx @@ -1,9 +1,13 @@ import { forEach, map } from 'lodash-es' -import LogicFlow, { ElementState, LogicFlowUtil } from '@logicflow/core' +import LogicFlow, { + ElementState, + OverlapMode, + ModelType, +} from '@logicflow/core' import '@logicflow/core/es/index.css' -import { Button, Card, Divider, Flex } from 'antd' -import { useEffect, useRef } from 'react' +import { Button, Card, Divider, Flex, Drawer } from 'antd' +import { useEffect, useRef, useState } from 'react' import { combine, square, star, uml, user } from './nodes' import { animation, connection } from './edges' @@ -12,6 +16,7 @@ import customRect from '@/components/nodes/custom-rect' import customEllipse from '@/components/nodes/custom-ellipse' import customDiamond from '@/components/nodes/custom-diamond' import customPolygon from '@/components/nodes/custom-polygon' +import centerAnchorRect from './nodes/centerAnchorRect' import GraphData = LogicFlow.GraphData import styles from './index.less' @@ -98,6 +103,7 @@ const data = { type: 'rect', x: 600, y: 200, + properties: { width: 80, height: 120, @@ -111,9 +117,17 @@ const data = { x: 90, y: 94, }, + { + id: 'custom-node-3', + text: 'node-3', + type: 'centerAnchorRect', + x: 360, + y: 280, + }, ], edges: [ { + id: 'bezier-1', type: 'bezier', sourceNodeId: 'custom-node-1', targetNodeId: 'custom-node-2', @@ -123,6 +137,17 @@ const data = { }, }, }, + { + id: 'bezier-2', + type: 'bezier', + sourceNodeId: 'custom-node-2', + targetNodeId: 'custom-node-3', + properties: { + style: { + stroke: 'blue', + }, + }, + }, ], } @@ -169,6 +194,11 @@ const data = { export default function BasicNode() { const lfRef = useRef() const containerRef = useRef(null) + const [open, setOpen] = useState(false) + + const onClose = () => { + setOpen(false) + } const registerElements = (lf: LogicFlow) => { const elements: LogicFlow.RegisterConfig[] = [ @@ -186,6 +216,7 @@ export default function BasicNode() { customEllipse, customDiamond, customPolygon, + centerAnchorRect, ] map(elements, (customElement) => { @@ -205,6 +236,10 @@ export default function BasicNode() { lf.on('edge:click', (data) => { console.log('edge:click', data) }) + lf.on('node:click', (data) => { + console.log('node:click', data) + setOpen(true) + }) } useEffect(() => { @@ -253,9 +288,9 @@ export default function BasicNode() { }, partial: true, background: { - // color: '#FFFFFF', - backgroundImage: - "url('https://cdn.jsdelivr.net/gh/Logic-Flow/static@latest/core/rect.png')", + color: '#FFFFFF', + // backgroundImage: + // "url('https://cdn.jsdelivr.net/gh/Logic-Flow/static@latest/core/rect.png')", }, // grid: true, grid: { @@ -363,92 +398,194 @@ export default function BasicNode() { } } - const handleChangeColor = () => { + // overlapMode 测试逻辑 + const setOverlapMode = (mode: OverlapMode) => { const lf = lfRef.current - if (lf) { - const { edges } = lf.graphModel - edges.forEach(({ id }) => { - lf.setProperties(id, { - style: { - stroke: 'blue', - }, - }) - }) - } + if (!lf) return + lf.setOverlapMode(mode) + const order = lf.graphModel.sortElements.map((m) => m.id) + console.log('[overlapMode]', mode, '排序结果:', order) } + const setOverlapModeStatic = () => setOverlapMode(OverlapMode.STATIC) + const setOverlapModeDefault = () => setOverlapMode(OverlapMode.DEFAULT) + const setOverlapModeIncrease = () => setOverlapMode(OverlapMode.INCREASE) + const setOverlapModeEdgeTop = () => setOverlapMode(OverlapMode.EDGE_TOP) - const handleRefreshGraph = () => { + const addOverlapNode = () => { const lf = lfRef.current - if (lf) { - const data = lf.getGraphRawData() - console.log('current graph data', data) - const refreshData = LogicFlowUtil.refreshGraphId(data) - console.log('after refresh graphId', data) - lf.render(refreshData) - - // 测试 getAreaElement API - // const lt: LogicFlow.PointTuple = [550, 130]; - // const rb: LogicFlow.PointTuple = [650, 270]; - // const areaElements = lf.getAreaElement(lt, rb); - // console.log('areaElements', areaElements); + if (!lf) return + lf.addNode({ + id: 'overlap-node', + text: 'overlap-node', + type: 'rect', + x: 400, + y: 150, + properties: { width: 60, height: 60 }, + }) + } + const deleteOverlapNode = () => { + lfRef.current?.deleteNode('overlap-node') + } + const selectFirstEdge = () => { + const lf = lfRef.current + if (!lf) return + const data = lf.getGraphData() as GraphData + const edgeId = data.edges?.[0]?.id + if (edgeId) { + lf.selectElementById(edgeId) + lf.toFront(edgeId) + console.log('选中并置顶首条边:', edgeId) } } + const selectOverlapNode = () => { + const lf = lfRef.current + if (!lf) return + const id = 'overlap-node' + lf.selectElementById(id) + lf.toFront(id) + console.log('选中并置顶重叠节点:', id) + } + const clearSelection = () => { + lfRef.current?.clearSelectElements() + } + // 其他演示用处理函数 const handleActiveElements = () => { const lf = lfRef.current - if (lf) { - const { nodes, edges } = lf.getSelectElements() - nodes.forEach(({ id }) => { - lf.setProperties(id, { - isHovered: true, - }) - }) - edges.forEach(({ id }) => { - lf.setProperties(id, { - isHovered: true, - }) - }) - } + if (!lf) return + const { nodes, edges } = lf.getSelectElements() + nodes.forEach(({ id }) => { + lf.setProperties(id, { isHovered: true }) + }) + edges.forEach(({ id }) => { + lf.setProperties(id, { isHovered: true }) + }) } const handleTurnAnimationOn = () => { - if (lfRef.current) { - const { edges } = lfRef.current.getGraphData() as GraphData - forEach(edges, (edge) => { - lfRef.current?.openEdgeAnimation(edge.id) - }) - } + const lf = lfRef.current + if (!lf) return + const { edges } = lf.getGraphData() as GraphData + forEach(edges, (edge) => { + if ((edge as any).id) lf.openEdgeAnimation((edge as any).id) + }) } + const handleTurnAnimationOff = () => { - if (lfRef.current) { - const { edges } = lfRef.current.getGraphData() as GraphData - forEach(edges, (edge) => { - lfRef.current?.closeEdgeAnimation(edge.id) - }) - } + const lf = lfRef.current + if (!lf) return + const { edges } = lf.getGraphData() as GraphData + forEach(edges, (edge) => { + if ((edge as any).id) lf.closeEdgeAnimation((edge as any).id) + }) + } + + const handleDragItem = (cfg: OnDragNodeConfig) => { + const lf = lfRef.current + if (!lf) return + lf.dnd?.startDrag(cfg) } - const handleDragItem = (node: OnDragNodeConfig) => { - lfRef?.current?.dnd.startDrag(node) + const handleRefreshGraph = () => { + const lf = lfRef.current + if (!lf) return + const raw = lf.getGraphRawData?.() + console.log('当前原始数据:', raw || lf.getGraphData()) + } + + const handleChangeColor = () => { + const lf = lfRef.current + if (!lf) return + const { edges } = lf.getSelectElements() + edges.forEach(({ id }) => { + lf.setProperties(id, { style: { stroke: '#ff4d4f' } }) + }) } const changeNodeBorderColor = () => { const lf = lfRef.current - if (lf) { - const { nodes } = lf.getSelectElements() - nodes.forEach(({ id, properties }) => { - console.log('properties', properties) - lf.setProperties(id, { - style: { - stroke: 'pink', - }, - }) - }) - } + if (!lf) return + const { nodes } = lf.getSelectElements() + nodes.forEach(({ id }) => { + lf.setProperties(id, { style: { stroke: '#ff4d4f' } }) + }) } return ( + + {/* overlapMode 测试控制 */} + + + + + + + + + + + + + + + + + + + + + + +