diff --git a/apps/web/src/components/common/editor/graph/layout/edge/style.ts b/apps/web/src/components/common/editor/graph/layout/edge/style.ts index 409ec72..2ff26cf 100755 --- a/apps/web/src/components/common/editor/graph/layout/edge/style.ts +++ b/apps/web/src/components/common/editor/graph/layout/edge/style.ts @@ -3,10 +3,10 @@ import { Position, getBezierPath } from "reactflow"; import { getBasePath } from "."; import { - kBaseMarkerColor, - kBaseMarkerColors, - kNoMarkerColor, - kYesMarkerColor, + kBaseMarkerColor, + kBaseMarkerColors, + kNoMarkerColor, + kYesMarkerColor, } from "../../components/Edges/Marker"; import { isEqual } from "../../utils/diff"; import { EdgeLayout, ReactFlowEdgeWithData } from "../../data/types"; @@ -14,187 +14,187 @@ import { kReactFlow } from "../../states/reactflow"; import { getPathWithRoundCorners } from "./edge"; interface EdgeStyle { - color: string; - edgeType: "solid" | "dashed"; - pathType: "base" | "bezier"; + color: string; + edgeType: "solid" | "dashed"; + pathType: "base" | "bezier"; } /** * Get the style of the connection line - * + * * 1. When there are more than 3 edges connecting to both ends of the Node, use multiple colors to distinguish the edges. * 2. When the connection line goes backward or connects to a hub Node, use dashed lines to distinguish the edges. * 3. When the connection line goes from a hub to a Node, use bezier path. */ export const getEdgeStyles = (props: { - id: string; - isBackward: boolean; + id: string; + isBackward: boolean; }): EdgeStyle => { - const { id, isBackward } = props; - const idx = parseInt(lastOf(id.split("#")) ?? "0", 10); - if (isBackward) { - // Use dashed lines to distinguish the edges when the connection line goes backward or connects to a hub Node - return { color: kNoMarkerColor, edgeType: "dashed", pathType: "base" }; - } - const edge: ReactFlowEdgeWithData = kReactFlow.instance!.getEdge(id)!; - if (edge.data!.targetPort.edges > 2) { - // Use dashed bezier path when the connection line connects to a hub Node - return { - color: kYesMarkerColor, - edgeType: "dashed", - pathType: "bezier", - }; - } - if (edge.data!.sourcePort.edges > 2) { - // Use multiple colors to distinguish the edges when there are more than 3 edges connecting to both ends of the Node - return { - color: kBaseMarkerColors[idx % kBaseMarkerColors.length], - edgeType: "solid", - pathType: "base", - }; - } - return { color: kBaseMarkerColor, edgeType: "solid", pathType: "base" }; + const { id, isBackward } = props; + const idx = parseInt(lastOf(id.split("#")) ?? "0", 10); + if (isBackward) { + // Use dashed lines to distinguish the edges when the connection line goes backward or connects to a hub Node + return { color: kNoMarkerColor, edgeType: "dashed", pathType: "base" }; + } + const edge: ReactFlowEdgeWithData = kReactFlow.instance!.getEdge(id)!; + if (edge.data!.targetPort.edges > 2) { + // Use dashed bezier path when the connection line connects to a hub Node + return { + color: kYesMarkerColor, + edgeType: "dashed", + pathType: "bezier", + }; + } + if (edge.data!.sourcePort.edges > 2) { + // Use multiple colors to distinguish the edges when there are more than 3 edges connecting to both ends of the Node + return { + color: kBaseMarkerColors[idx % kBaseMarkerColors.length], + edgeType: "solid", + pathType: "base", + }; + } + return { color: kBaseMarkerColor, edgeType: "solid", pathType: "base" }; }; interface ILayoutEdge { - id: string; - layout?: EdgeLayout; - offset: number; - borderRadius: number; - pathType: EdgeStyle["pathType"]; - source: string; - target: string; - sourceX: number; - sourceY: number; - targetX: number; - targetY: number; - sourcePosition: Position; - targetPosition: Position; + id: string; + layout?: EdgeLayout; + offset: number; + borderRadius: number; + pathType: EdgeStyle["pathType"]; + source: string; + target: string; + sourceX: number; + sourceY: number; + targetX: number; + targetY: number; + sourcePosition: Position; + targetPosition: Position; } export function layoutEdge({ - id, - layout, - offset, - borderRadius, - pathType, - source, - target, - sourceX, - sourceY, - targetX, - targetY, - sourcePosition, - targetPosition, + id, + layout, + offset, + borderRadius, + pathType, + source, + target, + sourceX, + sourceY, + targetX, + targetY, + sourcePosition, + targetPosition, }: ILayoutEdge): EdgeLayout { - const relayoutDeps = [sourceX, sourceY, targetX, targetY]; - const needRelayout = !isEqual(relayoutDeps, layout?.deps?.relayoutDeps); - const reBuildPathDeps = layout?.points; - const needReBuildPath = !isEqual( - reBuildPathDeps, - layout?.deps?.reBuildPathDeps - ); - let newLayout = layout; - if (needRelayout) { - newLayout = _layoutEdge({ - id, - offset, - borderRadius, - pathType, - source, - target, - sourceX, - sourceY, - targetX, - targetY, - sourcePosition, - targetPosition, - }); - } else if (needReBuildPath) { - newLayout = _layoutEdge({ - layout, - id, - offset, - borderRadius, - pathType, - source, - target, - sourceX, - sourceY, - targetX, - targetY, - sourcePosition, - targetPosition, - }); - } - newLayout!.deps = deepClone({ relayoutDeps, reBuildPathDeps }); - return newLayout!; + const relayoutDeps = [sourceX, sourceY, targetX, targetY]; + const needRelayout = !isEqual(relayoutDeps, layout?.deps?.relayoutDeps); + const reBuildPathDeps = layout?.points; + const needReBuildPath = !isEqual( + reBuildPathDeps, + layout?.deps?.reBuildPathDeps + ); + let newLayout = layout; + if (needRelayout) { + newLayout = _layoutEdge({ + id, + offset, + borderRadius, + pathType, + source, + target, + sourceX, + sourceY, + targetX, + targetY, + sourcePosition, + targetPosition, + }); + } else if (needReBuildPath) { + newLayout = _layoutEdge({ + layout, + id, + offset, + borderRadius, + pathType, + source, + target, + sourceX, + sourceY, + targetX, + targetY, + sourcePosition, + targetPosition, + }); + } + newLayout!.deps = deepClone({ relayoutDeps, reBuildPathDeps }); + return newLayout!; } function _layoutEdge({ - id, - layout, - offset, - borderRadius, - pathType, - source, - target, - sourceX, - sourceY, - targetX, - targetY, - sourcePosition, - targetPosition, + id, + layout, + offset, + borderRadius, + pathType, + source, + target, + sourceX, + sourceY, + targetX, + targetY, + sourcePosition, + targetPosition, }: ILayoutEdge): EdgeLayout { - const _pathType: EdgeStyle["pathType"] = pathType; - if (_pathType === "bezier") { - const [path, labelX, labelY] = getBezierPath({ - sourceX, - sourceY, - targetX, - targetY, - sourcePosition, - targetPosition, - }); - const points = [ - { - id: "source-" + id, - x: sourceX, - y: sourceY, - }, - { - id: "target-" + id, - x: targetX, - y: targetY, - }, - ]; - return { - path, - points, - inputPoints: points, - labelPosition: { - x: labelX, - y: labelY, - }, - }; - } + const _pathType: EdgeStyle["pathType"] = pathType; + if (_pathType === "bezier") { + const [path, labelX, labelY] = getBezierPath({ + sourceX, + sourceY, + targetX, + targetY, + sourcePosition, + targetPosition, + }); + const points = [ + { + id: "source-" + id, + x: sourceX, + y: sourceY, + }, + { + id: "target-" + id, + x: targetX, + y: targetY, + }, + ]; + return { + path, + points, + inputPoints: points, + labelPosition: { + x: labelX, + y: labelY, + }, + }; + } - if ((layout?.points?.length ?? 0) > 1) { - layout!.path = getPathWithRoundCorners(layout!.points, borderRadius); - return layout!; - } + if ((layout?.points?.length ?? 0) > 1) { + layout!.path = getPathWithRoundCorners(layout!.points, borderRadius); + return layout!; + } - return getBasePath({ - id, - offset, - borderRadius, - source, - target, - sourceX, - sourceY, - targetX, - targetY, - sourcePosition, - targetPosition, - }); + return getBasePath({ + id, + offset, + borderRadius, + source, + target, + sourceX, + sourceY, + targetX, + targetY, + sourcePosition, + targetPosition, + }); } diff --git a/apps/web/src/components/models/post/PostSelect/PostSelect.tsx b/apps/web/src/components/models/post/PostSelect/PostSelect.tsx index 1ded865..b2bab5f 100644 --- a/apps/web/src/components/models/post/PostSelect/PostSelect.tsx +++ b/apps/web/src/components/models/post/PostSelect/PostSelect.tsx @@ -1,109 +1,6 @@ - -// import React, { useState } from 'react'; -// import { Form, Select, Input } from 'antd'; -// import axios from 'axios'; - -// const { Option } = Select; - -// // 假数据 -// const fakePostsData = Array.from({ length: 15 }, (_, index) => ({ -// id: index + 1, -// type: 'Lecture', -// name: `Lecture ${index + 1}`, -// description: `This is lecture number ${index + 1}`, -// })); - -// // 模拟获取数据的函数 -// async function fetchPosts(query = '') { -// // 在实际应用中,这里应该是一个真实的API调用 -// return fakePostsData.filter(post => -// post.name.toLowerCase().includes(query.toLowerCase()) || -// post.description.toLowerCase().includes(query.toLowerCase()) -// ); -// } - -// const PostSelector = ({ value, onChange }) => { -// const [posts, setPosts] = useState([]); -// const [searchValue, setSearchValue] = useState(''); - -// const handleSearch = async (query) => { -// setSearchValue(query); -// const result = await fetchPosts(query); -// setPosts(result); -// }; - -// const handlePostChange = (selectedIds) => { -// onChange(selectedIds); // 更新父组件的状态 -// }; - -// const renderOption = (post) => ( -// -// ); - -// return ( -// -// ); -// }; - -// const PostForm = () => { -// const [form] = Form.useForm(); - -// const onFinish = (values) => { -// console.log('Received values of form: ', values); -// }; - -// return ( -//