add
This commit is contained in:
ditiqi
parent
9034e61229
commit
eba90139e4
|
|
@ -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,
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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) => (
|
||||
// <Option key={post.id} value={post.id.toString()}>
|
||||
// {post.name} - {post.description}
|
||||
// </Option>
|
||||
// );
|
||||
|
||||
// return (
|
||||
// <Select
|
||||
// mode="multiple" // 支持多选
|
||||
// showSearch
|
||||
// placeholder="请选择或搜索讲座"
|
||||
// optionFilterProp="children"
|
||||
// onSearch={handleSearch}
|
||||
// filterOption={false} // 禁用默认过滤，因为我们已经在 onSearch 中实现了自定义过滤
|
||||
// notFoundContent={''}
|
||||
// style={{ width: '100%' }}
|
||||
// value={value || []}
|
||||
// onChange={handlePostChange}
|
||||
// >
|
||||
// {posts.map(renderOption)}
|
||||
// </Select>
|
||||
// );
|
||||
// };
|
||||
|
||||
// const PostForm = () => {
|
||||
// const [form] = Form.useForm();
|
||||
|
||||
// const onFinish = (values) => {
|
||||
// console.log('Received values of form: ', values);
|
||||
// };
|
||||
|
||||
// return (
|
||||
// <Form
|
||||
// form={form}
|
||||
// name="postForm"
|
||||
// onFinish={onFinish}
|
||||
// initialValues={{
|
||||
// postIds: [], // 初始值为空数组
|
||||
// }}
|
||||
// >
|
||||
// <Form.Item
|
||||
// name="postIds"
|
||||
// label="选择讲座"
|
||||
// rules={[{ required: true, message: '请选择至少一个讲座!' }]}
|
||||
// >
|
||||
// <PostSelector
|
||||
// value={form.getFieldValue('postIds')}
|
||||
// onChange={(selectedIds) => form.setFieldsValue({ postIds: selectedIds })}
|
||||
// />
|
||||
// </Form.Item>
|
||||
|
||||
// <Form.Item>
|
||||
// <button type="submit">提交</button>
|
||||
// </Form.Item>
|
||||
// </Form>
|
||||
// );
|
||||
// };
|
||||
|
||||
// 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({
|
|||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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[];
|
||||
};
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
import { useEffect, useRef } from 'react';
|
||||
|
||||
export default function MindMapEditor(): JSX.Element {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue