From eba90139e455a2d99396e0b049e5a75290ef643b Mon Sep 17 00:00:00 2001 From: ditiqi Date: Sun, 2 Mar 2025 17:49:10 +0800 Subject: [PATCH] add --- .../common/editor/graph/layout/edge/style.ts | 328 +++++++++--------- .../models/post/PostSelect/PostSelect.tsx | 108 +----- .../components/models/post/PostSelect/post.ts | 95 ----- .../src/components/presentation/mind-map.tsx | 9 - 4 files changed, 166 insertions(+), 374 deletions(-) delete mode 100755 apps/web/src/components/models/post/PostSelect/post.ts delete mode 100755 apps/web/src/components/presentation/mind-map.tsx 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 ( -//
-// -// form.setFieldsValue({ postIds: selectedIds })} -// /> -// - -// -// -// -//
-// ); -// }; - -// export default PostForm; import { api } from "@nice/client"; -import { Button, Select } from "antd"; -import { - Lecture, - lectureDetailSelect, - postDetailSelect, - postUnDetailSelect, - Prisma, -} from "@nice/common"; +import { Select } from "antd"; +import { Lecture, postDetailSelect, Prisma } from "@nice/common"; import { useMemo, useState } from "react"; import PostSelectOption from "./PostSelectOption"; import { DefaultArgs } from "@prisma/client/runtime/library"; @@ -205,4 +102,3 @@ export default function PostSelect({ ); } - diff --git a/apps/web/src/components/models/post/PostSelect/post.ts b/apps/web/src/components/models/post/PostSelect/post.ts deleted file mode 100755 index 037d004..0000000 --- a/apps/web/src/components/models/post/PostSelect/post.ts +++ /dev/null @@ -1,95 +0,0 @@ -import { - Post, - Department, - Staff, - Enrollment, - Taxonomy, - Term, -} from "@prisma/client"; -import { StaffDto } from "./staff"; -import { TermDto } from "./term"; -import { ResourceDto } from "./resource"; -import { DepartmentDto } from "./department"; - -export type PostComment = { - id: string; - type: string; - title: string; - content: string; - authorId: string; - domainId: string; - referenceId: string; - resources: string[]; - createdAt: Date; - updatedAt: Date; - parentId: string; - author: { - id: string; - showname: string; - username: string; - avatar: string; - }; -}; -export type PostDto = Post & { - readed: boolean; - readedCount: number; - author: StaffDto; - limitedComments: PostComment[]; - commentsCount: number; - perms?: { - delete: boolean; - // edit: boolean; - }; - watchableDepts: Department[]; - watchableStaffs: Staff[]; - terms: TermDto[]; - depts: DepartmentDto[]; - meta?: { - thumbnail?: string; - views?: number; - }; - studentIds?: string[]; -}; - -export type LectureMeta = { - type?: string; - views?: number; - videoUrl?: string; - videoThumbnail?: string; - videoIds?: string[]; - videoThumbnailIds?: string[]; -}; - -export type Lecture = Post & { - resources?: ResourceDto[]; - meta?: LectureMeta; -}; - -export type SectionMeta = { - objectives?: string[]; -}; -export type Section = Post & { - meta?: SectionMeta; -}; -export type SectionDto = Section & { - lectures: Lecture[]; -}; -export type CourseMeta = { - thumbnail?: string; - - objectives?: string[]; - views?: number; - likes?: number; - hates?: number; -}; -export type Course = PostDto & { - meta?: CourseMeta; -}; -export type CourseDto = Course & { - enrollments?: Enrollment[]; - sections?: SectionDto[]; - terms: TermDto[]; - lectureCount?: number; - depts: Department[]; - studentIds: string[]; -}; diff --git a/apps/web/src/components/presentation/mind-map.tsx b/apps/web/src/components/presentation/mind-map.tsx deleted file mode 100755 index 484aa39..0000000 --- a/apps/web/src/components/presentation/mind-map.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import { useEffect, useRef } from 'react'; - -export default function MindMapEditor(): JSX.Element { - const containerRef = useRef(null); - - - - -} \ No newline at end of file