liaohui
/
doctor-mail
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add

This commit is contained in:
ditiqi 2025-01-27 10:10:19 +08:00
parent 20db2afa7c
commit 955d8e61ed
44 changed files with 394 additions and 4637 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Dockerfile
View File

@ -17,7 +17,7 @@ COPY pnpm-workspace.yaml ./
# 首先复制 package.json, package-lock.json 和 pnpm-lock.yaml 文件
COPY package*.json pnpm-lock.yaml* ./
COPY tsconfig.json .
COPY tsconfig.base.json .
# 利用 Docker 缓存机制，如果依赖没有改变则不会重新执行 pnpm install
#100-500 5-40

107
Dockerfile_BACKUP Normal file
View File

@ -0,0 +1,107 @@
# 基础镜像
FROM node:20-alpine as base
# 更改 apk 镜像源为阿里云
RUN sed -i 's/dl-cdn.alpinelinux.org/mirrors.aliyun.com/g' /etc/apk/repositories
# 设置 npm 镜像源
RUN yarn config set registry https://registry.npmmirror.com
# 全局安装 pnpm 并设置其镜像源
RUN yarn global add pnpm && pnpm config set registry https://registry.npmmirror.com
# 设置工作目录
WORKDIR /app
# 复制 pnpm workspace 配置文件
COPY pnpm-workspace.yaml ./
# 首先复制 package.json, package-lock.json 和 pnpm-lock.yaml 文件
COPY package*.json pnpm-lock.yaml* ./
COPY tsconfig.json .
# 利用 Docker 缓存机制，如果依赖没有改变则不会重新执行 pnpm install
#100-500 5-40
FROM base As server-build
WORKDIR /app
COPY packages/common /app/packages/common
COPY apps/server /app/apps/server
RUN pnpm install --filter server
RUN pnpm install --filter common
RUN pnpm --filter common generate && pnpm --filter common build:cjs
RUN pnpm --filter server build
FROM base As server-prod-dep
WORKDIR /app
COPY packages/common /app/packages/common
COPY apps/server /app/apps/server
RUN pnpm install --filter common --prod
RUN pnpm install --filter server --prod
FROM server-prod-dep as server
WORKDIR /app
ENV NODE_ENV production
COPY --from=server-build /app/packages/common/dist ./packages/common/dist
COPY --from=server-build /app/apps/server/dist ./apps/server/dist
COPY apps/server/entrypoint.sh ./apps/server/entrypoint.sh
RUN chmod +x ./apps/server/entrypoint.sh
RUN apk add --no-cache postgresql-client
EXPOSE 3000
ENTRYPOINT [ "/app/apps/server/entrypoint.sh" ]
FROM base AS web-build
# 复制其余文件到工作目录
COPY . .
RUN pnpm install
RUN pnpm --filter web build
# 第二阶段，使用 nginx 提供服务
FROM nginx:stable-alpine as web
RUN sed -i 's/dl-cdn.alpinelinux.org/mirrors.aliyun.com/g' /etc/apk/repositories
# 设置工作目录
WORKDIR /usr/share/nginx/html
# 设置环境变量
ENV NODE_ENV production
# 将构建的文件从上一阶段复制到当前镜像中
COPY --from=web-build /app/apps/web/dist .
# 删除默认的nginx配置文件并添加自定义配置
RUN rm /etc/nginx/conf.d/default.conf
COPY config/nginx/nginx.conf /etc/nginx/conf.d
# 添加 entrypoint 脚本，并确保其可执行
COPY config/nginx/entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.sh
# 安装 envsubst 以支持环境变量替换
RUN apk add --no-cache gettext
# 暴露 80 端口
EXPOSE 80
CMD ["/usr/bin/entrypoint.sh"]
# 使用 Nginx 的 Alpine 版本作为基础镜像
FROM nginx:stable-alpine as nginx
# 替换 Alpine 的软件源为阿里云镜像
RUN sed -i 's/dl-cdn.alpinelinux.org/mirrors.aliyun.com/g' /etc/apk/repositories
# 设置工作目录
WORKDIR /usr/share/nginx/html
# 设置环境变量
ENV NODE_ENV production
# 安装 envsubst 和 inotify-tools
RUN apk add --no-cache gettext inotify-tools
# 创建 /data/uploads 目录
RUN mkdir -p /data/uploads
# 暴露 80 端口
EXPOSE 80

11
apps/server/src/auth/auth.service.ts
View File

@ -23,7 +23,7 @@ export class AuthService {
private readonly staffService: StaffService,
private readonly jwtService: JwtService,
private readonly sessionService: SessionService,
) { }
) {}
async validateFileRequest(params: FileRequest): Promise<FileAuthResult> {
try {
// 基础参数验证
@ -31,7 +31,6 @@ export class AuthService {
return { isValid: false, error: FileValidationErrorType.INVALID_URI };
}
const fileId = extractFileIdFromNginxUrl(params.originalUri);
console.log('auth', params.originalUri, fileId);
const resource = await db.resource.findFirst({ where: { fileId } });
// 资源验证
@ -170,13 +169,13 @@ export class AuthService {
showname,
department: deptId
? {
connect: { id: deptId },
}
connect: { id: deptId },
}
: undefined,
domain: deptId
? {
connect: { id: deptId },
}
connect: { id: deptId },
}
: undefined,
// domainId: data.deptId,
meta: {

2
apps/server/src/models/post/utils.ts
View File

@ -101,7 +101,7 @@ export function getClientIp(req: any): string {
return ip || '';
}
export async function updatePostState(id: string) {
console.log('updateState');
// console.log('updateState');
const post = await db.post.findUnique({
where: {
id: id,

1
apps/server/src/queue/worker/file.processor.ts
View File

@ -10,7 +10,6 @@ const pipeline = new ResourceProcessingPipeline()
.addProcessor(new VideoProcessor());
export default async function processJob(job: Job<any, any, QueueJobType>) {
if (job.name === QueueJobType.FILE_PROCESS) {
// console.log(job);
const { resource } = job.data;
if (!resource) {
throw new Error('No resource provided in job data');

273
apps/server/src/socket/collaboration/ws-shared-doc.ts
View File

@ -1,158 +1,185 @@
import { readSyncMessage } from '@nice/common';
import { applyAwarenessUpdate, Awareness, encodeAwarenessUpdate, removeAwarenessStates, writeSyncStep1, writeUpdate } from '@nice/common';
import {
applyAwarenessUpdate,
Awareness,
encodeAwarenessUpdate,
removeAwarenessStates,
writeSyncStep1,
writeUpdate,
} from '@nice/common';
import * as encoding from 'lib0/encoding';
import * as decoding from 'lib0/decoding';
import * as Y from "yjs"
import * as Y from 'yjs';
import { debounce } from 'lodash';
import { getPersistence, setPersistence } from './persistence';
import { callbackHandler, isCallbackSet } from './callback';
import { WebSocket } from "ws";
import { WebSocket } from 'ws';
import { YMessageType } from '@nice/common';
import { WSClient } from '../types';
export const docs = new Map<string, WSSharedDoc>();
export const CALLBACK_DEBOUNCE_WAIT = parseInt(process.env.CALLBACK_DEBOUNCE_WAIT || '2000');
export const CALLBACK_DEBOUNCE_MAXWAIT = parseInt(process.env.CALLBACK_DEBOUNCE_MAXWAIT || '10000');
export const CALLBACK_DEBOUNCE_WAIT = parseInt(
process.env.CALLBACK_DEBOUNCE_WAIT || '2000',
);
export const CALLBACK_DEBOUNCE_MAXWAIT = parseInt(
process.env.CALLBACK_DEBOUNCE_MAXWAIT || '10000',
);
export const getYDoc = (docname: string, gc = true): WSSharedDoc => {
return docs.get(docname) || createYDoc(docname, gc);
return docs.get(docname) || createYDoc(docname, gc);
};
const createYDoc = (docname: string, gc: boolean): WSSharedDoc => {
const doc = new WSSharedDoc(docname, gc);
docs.set(docname, doc);
return doc;
const doc = new WSSharedDoc(docname, gc);
docs.set(docname, doc);
return doc;
};
export const send = (doc: WSSharedDoc, conn: WebSocket, m: Uint8Array) => {
if (conn.readyState !== WebSocket.OPEN) {
closeConn(doc, conn);
return;
}
try {
conn.send(m, {}, err => { err != null && closeConn(doc, conn) });
} catch (e) {
closeConn(doc, conn);
}
if (conn.readyState !== WebSocket.OPEN) {
closeConn(doc, conn);
return;
}
try {
conn.send(m, {}, (err) => {
err != null && closeConn(doc, conn);
});
} catch (e) {
closeConn(doc, conn);
}
};
export const closeConn = (doc: WSSharedDoc, conn: WebSocket) => {
if (doc.conns.has(conn)) {
const controlledIds = doc.conns.get(conn) as Set<number>;
doc.conns.delete(conn);
removeAwarenessStates(
doc.awareness,
Array.from(controlledIds),
null
);
if (doc.conns.has(conn)) {
const controlledIds = doc.conns.get(conn) as Set<number>;
doc.conns.delete(conn);
removeAwarenessStates(doc.awareness, Array.from(controlledIds), null);
if (doc.conns.size === 0 && getPersistence() !== null) {
getPersistence()?.writeState(doc.name, doc).then(() => {
doc.destroy();
});
docs.delete(doc.name);
}
if (doc.conns.size === 0 && getPersistence() !== null) {
getPersistence()
?.writeState(doc.name, doc)
.then(() => {
doc.destroy();
});
docs.delete(doc.name);
}
conn.close();
}
conn.close();
};
export const messageListener = (conn: WSClient, doc: WSSharedDoc, message: Uint8Array) => {
try {
const encoder = encoding.createEncoder();
const decoder = decoding.createDecoder(message);
const messageType = decoding.readVarUint(decoder);
switch (messageType) {
case YMessageType.Sync:
// console.log(`received sync message ${message.length}`)
encoding.writeVarUint(encoder, YMessageType.Sync);
readSyncMessage(decoder, encoder, doc, conn);
if (encoding.length(encoder) > 1) {
send(doc, conn, encoding.toUint8Array(encoder));
}
break;
case YMessageType.Awareness: {
applyAwarenessUpdate(
doc.awareness,
decoding.readVarUint8Array(decoder),
conn
);
// console.log(`received awareness message from ${conn.origin} total ${doc.awareness.states.size}`)
break;
}
}
} catch (err) {
console.error(err);
doc.emit('error' as any, [err]);
}
};
const updateHandler = (update: Uint8Array, _origin: any, doc: WSSharedDoc, _tr: any) => {
export const messageListener = (
conn: WSClient,
doc: WSSharedDoc,
message: Uint8Array,
) => {
try {
const encoder = encoding.createEncoder();
encoding.writeVarUint(encoder, YMessageType.Sync);
writeUpdate(encoder, update);
const message = encoding.toUint8Array(encoder);
doc.conns.forEach((_, conn) => send(doc, conn, message));
const decoder = decoding.createDecoder(message);
const messageType = decoding.readVarUint(decoder);
switch (messageType) {
case YMessageType.Sync:
encoding.writeVarUint(encoder, YMessageType.Sync);
readSyncMessage(decoder, encoder, doc, conn);
if (encoding.length(encoder) > 1) {
send(doc, conn, encoding.toUint8Array(encoder));
}
break;
case YMessageType.Awareness: {
applyAwarenessUpdate(
doc.awareness,
decoding.readVarUint8Array(decoder),
conn,
);
break;
}
}
} catch (err) {
console.error(err);
doc.emit('error' as any, [err]);
}
};
let contentInitializor: (ydoc: Y.Doc) => Promise<void> = (_ydoc) => Promise.resolve();
const updateHandler = (
update: Uint8Array,
_origin: any,
doc: WSSharedDoc,
_tr: any,
) => {
const encoder = encoding.createEncoder();
encoding.writeVarUint(encoder, YMessageType.Sync);
writeUpdate(encoder, update);
const message = encoding.toUint8Array(encoder);
doc.conns.forEach((_, conn) => send(doc, conn, message));
};
let contentInitializor: (ydoc: Y.Doc) => Promise<void> = (_ydoc) =>
Promise.resolve();
export const setContentInitializor = (f: (ydoc: Y.Doc) => Promise<void>) => {
contentInitializor = f;
contentInitializor = f;
};
export class WSSharedDoc extends Y.Doc {
name: string;
conns: Map<WebSocket, Set<number>>;
awareness: Awareness;
whenInitialized: Promise<void>;
name: string;
conns: Map<WebSocket, Set<number>>;
awareness: Awareness;
whenInitialized: Promise<void>;
constructor(name: string, gc: boolean) {
super({ gc });
constructor(name: string, gc: boolean) {
super({ gc });
this.name = name;
this.conns = new Map();
this.awareness = new Awareness(this);
this.awareness.setLocalState(null);
this.name = name;
this.conns = new Map();
this.awareness = new Awareness(this);
this.awareness.setLocalState(null);
const awarenessUpdateHandler = ({
added,
updated,
removed
}: {
added: number[],
updated: number[],
removed: number[]
}, conn: WebSocket) => {
const changedClients = added.concat(updated, removed);
if (changedClients.length === 0) return
if (conn !== null) {
const connControlledIDs = this.conns.get(conn) as Set<number>;
if (connControlledIDs !== undefined) {
added.forEach(clientID => { connControlledIDs.add(clientID); });
removed.forEach(clientID => { connControlledIDs.delete(clientID); });
}
}
const encoder = encoding.createEncoder();
encoding.writeVarUint(encoder, YMessageType.Awareness);
encoding.writeVarUint8Array(
encoder,
encodeAwarenessUpdate(this.awareness, changedClients)
);
const buff = encoding.toUint8Array(encoder);
this.conns.forEach((_, c) => {
send(this, c, buff);
});
};
this.awareness.on('update', awarenessUpdateHandler);
this.on('update', updateHandler as any);
if (isCallbackSet) {
this.on('update', debounce(
callbackHandler as any,
CALLBACK_DEBOUNCE_WAIT,
{ maxWait: CALLBACK_DEBOUNCE_MAXWAIT }
) as any);
const awarenessUpdateHandler = (
{
added,
updated,
removed,
}: {
added: number[];
updated: number[];
removed: number[];
},
conn: WebSocket,
) => {
const changedClients = added.concat(updated, removed);
if (changedClients.length === 0) return;
if (conn !== null) {
const connControlledIDs = this.conns.get(conn) as Set<number>;
if (connControlledIDs !== undefined) {
added.forEach((clientID) => {
connControlledIDs.add(clientID);
});
removed.forEach((clientID) => {
connControlledIDs.delete(clientID);
});
}
}
this.whenInitialized = contentInitializor(this);
const encoder = encoding.createEncoder();
encoding.writeVarUint(encoder, YMessageType.Awareness);
encoding.writeVarUint8Array(
encoder,
encodeAwarenessUpdate(this.awareness, changedClients),
);
const buff = encoding.toUint8Array(encoder);
this.conns.forEach((_, c) => {
send(this, c, buff);
});
};
this.awareness.on('update', awarenessUpdateHandler);
this.on('update', updateHandler as any);
if (isCallbackSet) {
this.on(
'update',
debounce(callbackHandler as any, CALLBACK_DEBOUNCE_WAIT, {
maxWait: CALLBACK_DEBOUNCE_MAXWAIT,
}) as any,
);
}
this.whenInitialized = contentInitializor(this);
}
}

232
apps/server/src/utils/tool.ts
View File

@ -1,148 +1,146 @@
import { createReadStream } from "fs";
import { createInterface } from "readline";
import { createReadStream } from 'fs';
import { createInterface } from 'readline';
import { db } from '@nice/common';
import * as tus from "tus-js-client";
import { db } from '@nice/common';
import * as tus from 'tus-js-client';
import ExcelJS from 'exceljs';
export function truncateStringByByte(str, maxBytes) {
let byteCount = 0;
let index = 0;
while (index < str.length && byteCount + new TextEncoder().encode(str[index]).length <= maxBytes) {
byteCount += new TextEncoder().encode(str[index]).length;
index++;
}
return str.substring(0, index) + (index < str.length ? "..." : "");
let byteCount = 0;
let index = 0;
while (
index < str.length &&
byteCount + new TextEncoder().encode(str[index]).length <= maxBytes
) {
byteCount += new TextEncoder().encode(str[index]).length;
index++;
}
return str.substring(0, index) + (index < str.length ? '...' : '');
}
export async function loadPoliciesFromCSV(filePath: string) {
const policies = {
p: [],
g: []
};
const stream = createReadStream(filePath);
const rl = createInterface({
input: stream,
crlfDelay: Infinity
});
const policies = {
p: [],
g: [],
};
const stream = createReadStream(filePath);
const rl = createInterface({
input: stream,
crlfDelay: Infinity,
});
// Updated regex to handle commas inside parentheses as part of a single field
const regex = /(?:\((?:[^)(]+|\((?:[^)(]+|\([^)(]*\))*\))*\)|"(?:\\"|[^"])*"|[^,"()\s]+)(?=\s*,|\s*$)/g;
// Updated regex to handle commas inside parentheses as part of a single field
const regex =
/(?:\((?:[^)(]+|\((?:[^)(]+|\([^)(]*\))*\))*\)|"(?:\\"|[^"])*"|[^,"()\s]+)(?=\s*,|\s*$)/g;
for await (const line of rl) {
// Ignore empty lines and comments
if (line.trim() && !line.startsWith("#")) {
const parts = [];
let match;
while ((match = regex.exec(line)) !== null) {
// Remove quotes if present and trim whitespace
parts.push(match[0].replace(/^"|"$/g, '').trim());
}
for await (const line of rl) {
// Ignore empty lines and comments
if (line.trim() && !line.startsWith('#')) {
const parts = [];
let match;
while ((match = regex.exec(line)) !== null) {
// Remove quotes if present and trim whitespace
parts.push(match[0].replace(/^"|"$/g, '').trim());
}
// Check policy type (p or g)
const ptype = parts[0];
const rule = parts.slice(1);
// Check policy type (p or g)
const ptype = parts[0];
const rule = parts.slice(1);
if (ptype === 'p' || ptype === 'g') {
policies[ptype].push(rule);
} else {
console.warn(`Unknown policy type '${ptype}' in policy: ${line}`);
}
}
if (ptype === 'p' || ptype === 'g') {
policies[ptype].push(rule);
} else {
console.warn(`Unknown policy type '${ptype}' in policy: ${line}`);
}
}
}
return policies;
return policies;
}
export function uploadFile(blob: any, fileName: string) {
return new Promise((resolve, reject) => {
const upload = new tus.Upload(blob, {
endpoint: `${process.env.TUS_URL}/files/`,
retryDelays: [0, 1000, 3000, 5000],
metadata: {
filename: fileName,
filetype:
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
},
onError: (error) => {
console.error("Failed because: " + error);
reject(error); // 错误时，我们要拒绝 promise
},
onProgress: (bytesUploaded, bytesTotal) => {
const percentage = ((bytesUploaded / bytesTotal) * 100).toFixed(2);
// console.log(bytesUploaded, bytesTotal, `${percentage}%`);
},
onSuccess: () => {
// console.log('Upload finished:', upload.url);
resolve(upload.url); // 成功后，我们解析 promise，并返回上传的 URL
},
});
upload.start();
return new Promise((resolve, reject) => {
const upload = new tus.Upload(blob, {
endpoint: `${process.env.TUS_URL}/files/`,
retryDelays: [0, 1000, 3000, 5000],
metadata: {
filename: fileName,
filetype:
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
},
onError: (error) => {
console.error('Failed because: ' + error);
reject(error); // 错误时，我们要拒绝 promise
},
onProgress: (bytesUploaded, bytesTotal) => {
const percentage = ((bytesUploaded / bytesTotal) * 100).toFixed(2);
},
onSuccess: () => {
resolve(upload.url); // 成功后，我们解析 promise，并返回上传的 URL
},
});
upload.start();
});
}
class TreeNode {
value: string;
children: TreeNode[];
constructor(value: string) {
this.value = value;
this.children = [];
}
addChild(childValue: string): TreeNode {
let newChild = undefined
if (this.children.findIndex(child => child.value === childValue) === -1) {
newChild = new TreeNode(childValue);
this.children.push(newChild)
}
return this.children.find(child => child.value === childValue)
value: string;
children: TreeNode[];
constructor(value: string) {
this.value = value;
this.children = [];
}
addChild(childValue: string): TreeNode {
let newChild = undefined;
if (this.children.findIndex((child) => child.value === childValue) === -1) {
newChild = new TreeNode(childValue);
this.children.push(newChild);
}
return this.children.find((child) => child.value === childValue);
}
}
function buildTree(data: string[][]): TreeNode {
const root = new TreeNode('root');
try {
for (const path of data) {
let currentNode = root;
for (const value of path) {
currentNode = currentNode.addChild(value);
}
}
return root;
const root = new TreeNode('root');
try {
for (const path of data) {
let currentNode = root;
for (const value of path) {
currentNode = currentNode.addChild(value);
}
}
catch (error) {
console.error(error)
}
return root;
} catch (error) {
console.error(error);
}
}
export function printTree(node: TreeNode, level: number = 0): void {
const indent = ' '.repeat(level);
// console.log(`${indent}${node.value}`);
for (const child of node.children) {
printTree(child, level + 1);
}
const indent = ' '.repeat(level);
for (const child of node.children) {
printTree(child, level + 1);
}
}
export async function generateTreeFromFile(file: Buffer): Promise<TreeNode> {
const workbook = new ExcelJS.Workbook();
await workbook.xlsx.load(file);
const worksheet = workbook.getWorksheet(1);
const workbook = new ExcelJS.Workbook();
await workbook.xlsx.load(file);
const worksheet = workbook.getWorksheet(1);
const data: string[][] = [];
const data: string[][] = [];
worksheet.eachRow((row, rowNumber) => {
if (rowNumber > 1) { // Skip header row if any
const rowData: string[] = (row.values as string[]).slice(2).map(cell => (cell || '').toString());
data.push(rowData.map(value => value.trim()));
}
});
// Fill forward values
for (let i = 1; i < data.length; i++) {
for (let j = 0; j < data[i].length; j++) {
if (!data[i][j]) data[i][j] = data[i - 1][j];
}
worksheet.eachRow((row, rowNumber) => {
if (rowNumber > 1) {
// Skip header row if any
const rowData: string[] = (row.values as string[])
.slice(2)
.map((cell) => (cell || '').toString());
data.push(rowData.map((value) => value.trim()));
}
return buildTree(data);
}
});
// Fill forward values
for (let i = 1; i < data.length; i++) {
for (let j = 0; j < data[i].length; j++) {
if (!data[i][j]) data[i][j] = data[i - 1][j];
}
}
return buildTree(data);
}

7
apps/web/entrypoint.sh Normal file
View File

@ -0,0 +1,7 @@
#!/bin/sh
# 使用envsubst替换index.html中的环境变量占位符
envsubst < /usr/share/nginx/html/index.html > /usr/share/nginx/html/index.html.tmp
mv /usr/share/nginx/html/index.html.tmp /usr/share/nginx/html/index.html
# 运行serve来提供静态文件
exec nginx -g "daemon off;"

1
apps/web/index.html
View File

@ -8,6 +8,7 @@
<script>
window.env = {
VITE_APP_SERVER_IP: "$VITE_APP_SERVER_IP",
VITE_APP_UOLOAD_IP: "$VITE_APP_UOLOAD_IP",
VITE_APP_APP_NAME: "$VITE_APP_APP_NAME",
VITE_APP_VERSION: "$VITE_APP_VERSION",
};

105
apps/web/src/components/common/editor/graph/GraphEditor.tsx
View File

@ -1,105 +0,0 @@
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { addEdge, ReactFlow, Background, Controls, Edge, Node, ReactFlowProvider, useEdgesState, useNodesState, MiniMap, Panel, BackgroundVariant, ControlButton, applyNodeChanges, applyEdgeChanges, SelectionMode, OnNodesChange, OnEdgesChange, useReactFlow, useOnSelectionChange, useNodesInitialized } from '@xyflow/react';
import { Button } from '../../element/Button';
import '@xyflow/react/dist/style.css';
import { edgeTypes, GraphState, nodeTypes } from './types';
import useGraphStore from './store';
import { shallow } from 'zustand/shallow';
import { useKeyboardCtrl } from './useKeyboardCtrl';
import { getMindMapLayout } from './layout';
const selector = (store: GraphState) => ({
nodes: store.present.nodes,
edges: store.present.edges,
setNodes: store.setNodes,
setEdges: store.setEdges,
record: store.record,
onNodesChange: store.onNodesChange,
onEdgesChange: store.onEdgesChange,
});
const panOnDrag = [1, 2];
const Flow: React.FC = () => {
const store = useGraphStore(selector, shallow);
useKeyboardCtrl()
const nodesInitialized = useNodesInitialized();
const onLayout = useCallback(async () => {
const layouted = getMindMapLayout({ nodes: store.nodes, edges: store.edges })
store.setNodes(layouted.nodes)
store.setEdges(layouted.edges)
}, [store.nodes, store.edges]);
useEffect(() => {
if (nodesInitialized && store.nodes.length) {
console.log('layout')
onLayout()
}
}, [nodesInitialized, store.nodes.length]);
return (
<ReactFlow
nodesDraggable={true}
nodes={store.nodes}
edges={store.edges}
onNodesChange={(changes) => {
const recordTypes = new Set(['remove', 'select']);
const undoChanges = changes.filter(change => recordTypes.has(change.type))
const otherChanges = changes.filter(change => !recordTypes.has(change.type))
if (undoChanges.length)
store.record(() => {
store.onNodesChange(undoChanges);
});
store.onNodesChange(otherChanges);
}}
onEdgesChange={(changes) => {
const recordTypes = new Set(['remove', 'select']);
changes.forEach((change) => {
if (recordTypes.has(change.type)) {
store.record(() => {
store.onEdgesChange([change]);
});
} else {
store.onEdgesChange([change]);
}
});
}}
selectionOnDrag
panOnDrag={panOnDrag}
nodeTypes={nodeTypes}
edgeTypes={edgeTypes}
selectionMode={SelectionMode.Partial}
fitView
minZoom={0.001}
maxZoom={1000}
>
<Panel position="top-right">
<div className='flex items-center gap-4'>
<Button onClick={onLayout}>自动布局</Button>
<span>节点个数{store.nodes.length}</span>
<span>边条数{store.edges.length}</span>
</div>
</Panel>
<Background variant={BackgroundVariant.Dots} />
<Controls >
<ControlButton>测试</ControlButton>
</Controls>
<MiniMap pannable zoomable nodeStrokeWidth={3} position='bottom-right'></MiniMap>
</ReactFlow>
);
};
const GraphEditor: React.FC = () => {
return (
<ReactFlowProvider>
<Flow></Flow>
</ReactFlowProvider>
);
};
export default GraphEditor;

57
apps/web/src/components/common/editor/graph/data.ts
View File

@ -1,57 +0,0 @@
import { MarkerType } from "@xyflow/react";
// 生成思维导图数据的函数
function generateMindMapData(levels: number, nodesPerLevel: number) {
const nodes = [];
const edges = [];
// 添加根节点
nodes.push({
id: 'root',
data: { label: '核心主题', level: 0 },
type: 'graph-node',
position: { x: 0, y: 0 }
});
// 为每一层生成节点
for (let level = 1; level <= levels; level++) {
const angleStep = (2 * Math.PI) / nodesPerLevel;
const radius = level * 200; // 每层的半径
for (let i = 0; i < nodesPerLevel; i++) {
const angle = i * angleStep;
const nodeId = `node-${level}-${i}`;
// 计算节点位置
const x = Math.cos(angle) * radius;
const y = Math.sin(angle) * radius;
// 添加节点
nodes.push({
id: nodeId,
data: { label: `主题${level}-${i}`, level },
type: 'graph-node',
position: { x, y }
});
// 添加边
// 第一层连接到根节点，其他层连接到上一层的节点
const sourceId = level === 1 ? 'root' : `node-${level - 1}-${Math.floor(i / 2)}`;
edges.push({
id: `edge-${level}-${i}`,
source: sourceId,
target: nodeId,
type: 'graph-edge',
});
}
}
return { nodes, edges };
}
// 生成测试数据 - 可以调整参数来控制规模
// 参数1: 层级数量
// 参数2: 每层节点数量
const { nodes: initialNodes, edges: initialEdges } = generateMindMapData(2, 3);
export { initialNodes, initialEdges };

47
apps/web/src/components/common/editor/graph/edges/FloatEdge.tsx
View File

@ -1,47 +0,0 @@
import { EdgeProps, getBezierPath, useInternalNode } from '@xyflow/react';
import { getEdgeParams } from '../utils';
/**
* FloatingEdge 组件用于渲染图中的浮动边。
* 该组件通过计算源节点和目标节点的位置，生成贝塞尔曲线路径，并渲染为SVG路径元素。
* 适用于需要自定义边样式的图结构可视化场景。
*/
function FloatingEdge({ id, source, target, markerEnd, style }: EdgeProps) {
// 使用 useInternalNode 钩子获取源节点和目标节点的内部节点信息
const sourceNode = useInternalNode(source);
const targetNode = useInternalNode(target);
// 如果源节点或目标节点不存在，则不渲染任何内容
if (!sourceNode || !targetNode) {
return null;
}
// 获取边的参数，包括源节点和目标节点的坐标及位置信息
const { sx, sy, tx, ty, sourcePos, targetPos } = getEdgeParams(
sourceNode,
targetNode,
);
// 使用 getBezierPath 函数生成贝塞尔曲线路径
const [edgePath] = getBezierPath({
sourceX: sx,
sourceY: sy,
sourcePosition: sourcePos,
targetPosition: targetPos,
targetX: tx,
targetY: ty,
});
// 返回 SVG 路径元素，表示图中的边
return (
<path
id={id}
className="react-flow__edge-path"
d={edgePath}
markerEnd={markerEnd}
style={style}
/>
);
}
export default FloatingEdge;

44
apps/web/src/components/common/editor/graph/edges/GraphEdge.tsx
View File

@ -1,44 +0,0 @@
import { BaseEdge, Edge, EdgeLabelRenderer, EdgeProps, getBezierPath, getSmoothStepPath, getStraightPath, useReactFlow } from '@xyflow/react';
export type GraphEdge = Edge<{ text: string }, 'graph-edge'>;
export const GraphEdge = ({ id, sourceX, sourceY, targetX, targetY, data, ...props }: EdgeProps<GraphEdge>) => {
const { setEdges } = useReactFlow();
// 使用贝塞尔曲线代替直线，让连线更流畅
const [edgePath, labelX, labelY] = getBezierPath({
sourceX,
sourceY,
targetX,
targetY,
});
return (
<>
<BaseEdge
path={edgePath}
style={{
strokeWidth: 2,
stroke: '#b1b1b7',
transition: 'stroke 0.3s, stroke-width 0.3s',
}}
className="hover:stroke-blue-500 hover:stroke-[3px]"
/>
{/* 添加边的标签渲染器 */}
<EdgeLabelRenderer>
{data?.text && (
<div
style={{
position: 'absolute',
transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
fontSize: 12,
pointerEvents: 'all',
}}
className="nodrag nopan px-2 py-1 rounded bg-white/80 shadow-sm"
>
{data.text}
</div>
)}
</EdgeLabelRenderer>
</>
);
};

219
apps/web/src/components/common/editor/graph/edges/algorithms/a-star.ts
View File

@ -1,219 +0,0 @@
import { areLinesReverseDirection, areLinesSameDirection } from "../edge";
import {
ControlPoint,
NodeRect,
isEqualPoint,
isSegmentCrossingRect,
} from "../point";
interface GetAStarPathParams {
/**
* Collection of potential control points between `sourceOffset` and `targetOffset`, excluding the `source` and `target` points.
*/
points: ControlPoint[];
source: ControlPoint;
target: ControlPoint;
/**
* Node size information for the `source` and `target`, used to optimize edge routing without intersecting nodes.
*/
sourceRect: NodeRect;
targetRect: NodeRect;
}
/**
* Utilizes the [A\* search algorithm](https://en.wikipedia.org/wiki/A*_search_algorithm) combined with
* [Manhattan Distance](https://simple.wikipedia.org/wiki/Manhattan_distance) to find the optimal path for edges.
*
* @returns Control points including sourceOffset and targetOffset (not including source and target points).
*/
export const getAStarPath = ({
points,
source,
target,
sourceRect,
targetRect,
}: GetAStarPathParams): ControlPoint[] => {
if (points.length < 3) {
return points;
}
const start = points[0];
const end = points[points.length - 1];
const openSet: ControlPoint[] = [start];
const closedSet: Set<ControlPoint> = new Set();
const cameFrom: Map<ControlPoint, ControlPoint> = new Map();
const gScore: Map<ControlPoint, number> = new Map().set(start, 0);
const fScore: Map<ControlPoint, number> = new Map().set(
start,
heuristicCostEstimate({
from: start,
to: start,
start,
end,
source,
target,
})
);
while (openSet.length) {
let current;
let currentIdx;
let lowestFScore = Infinity;
openSet.forEach((p, idx) => {
const score = fScore.get(p) ?? 0;
if (score < lowestFScore) {
lowestFScore = score;
current = p;
currentIdx = idx;
}
});
if (!current) {
break;
}
if (current === end) {
return buildPath(cameFrom, current);
}
openSet.splice(currentIdx!, 1);
closedSet.add(current);
const curFScore = fScore.get(current) ?? 0;
const previous = cameFrom.get(current);
const neighbors = getNextNeighborPoints({
points,
previous,
current,
sourceRect,
targetRect,
});
for (const neighbor of neighbors) {
if (closedSet.has(neighbor)) {
continue;
}
const neighborGScore = gScore.get(neighbor) ?? 0;
const tentativeGScore = curFScore + estimateDistance(current, neighbor);
if (openSet.includes(neighbor) && tentativeGScore >= neighborGScore) {
continue;
}
openSet.push(neighbor);
cameFrom.set(neighbor, current);
gScore.set(neighbor, tentativeGScore);
fScore.set(
neighbor,
neighborGScore +
heuristicCostEstimate({
from: current,
to: neighbor,
start,
end,
source,
target,
})
);
}
}
return [start, end];
};
const buildPath = (
cameFrom: Map<ControlPoint, ControlPoint>,
current: ControlPoint
): ControlPoint[] => {
const path = [current];
let previous = cameFrom.get(current);
while (previous) {
path.push(previous);
previous = cameFrom.get(previous);
}
return path.reverse();
};
interface GetNextNeighborPointsParams {
points: ControlPoint[];
previous?: ControlPoint;
current: ControlPoint;
sourceRect: NodeRect;
targetRect: NodeRect;
}
/**
* Get the set of possible neighboring points for the current control point
*
* - The line is in a horizontal or vertical direction
* - The line does not intersect with the two end nodes
* - The line does not overlap with the previous line segment in reverse direction
*/
export const getNextNeighborPoints = ({
points,
previous,
current,
sourceRect,
targetRect,
}: GetNextNeighborPointsParams): ControlPoint[] => {
return points.filter((p) => {
if (p === current) {
return false;
}
// The connection is in the horizontal or vertical direction
const rightDirection = p.x === current.x || p.y === current.y;
// Reverse direction with the previous line segment (overlap)
const reverseDirection = previous
? areLinesReverseDirection(previous, current, current, p)
: false;
return (
rightDirection && // The line is in a horizontal or vertical direction
!reverseDirection && // The line does not overlap with the previous line segment in reverse direction
!isSegmentCrossingRect(p, current, sourceRect) && // Does not intersect with sourceNode
!isSegmentCrossingRect(p, current, targetRect) // Does not intersect with targetNode
);
});
};
interface HeuristicCostParams {
from: ControlPoint;
to: ControlPoint;
start: ControlPoint;
end: ControlPoint;
source: ControlPoint;
target: ControlPoint;
}
/**
* Connection point distance loss function
*
* - The smaller the sum of distances, the better
* - The closer the start and end line segments are in direction, the better
* - The better the inflection point is symmetric or centered in the line segment
*/
const heuristicCostEstimate = ({
from,
to,
start,
end,
source,
target,
}: HeuristicCostParams): number => {
const base = estimateDistance(to, start) + estimateDistance(to, end);
const startCost = isEqualPoint(from, start)
? areLinesSameDirection(from, to, source, start)
? -base / 2
: 0
: 0;
const endCost = isEqualPoint(to, end)
? areLinesSameDirection(from, to, end, target)
? -base / 2
: 0
: 0;
return base + startCost + endCost;
};
/**
* Calculate the estimated distance between two points
*
* Manhattan distance: the sum of horizontal and vertical distances, faster calculation speed
*/
const estimateDistance = (p1: ControlPoint, p2: ControlPoint): number =>
Math.abs(p1.x - p2.x) + Math.abs(p1.y - p2.y);

127
apps/web/src/components/common/editor/graph/edges/algorithms/index.ts
View File

@ -1,127 +0,0 @@
import { areLinesSameDirection, isHorizontalFromPosition } from "../edge";
import {
ControlPoint,
HandlePosition,
NodeRect,
getCenterPoints,
getExpandedRect,
getOffsetPoint,
getSidesFromPoints,
getVerticesFromRectVertex,
optimizeInputPoints,
reducePoints,
} from "../point";
import { getAStarPath } from "./a-star";
import { getSimplePath } from "./simple";
export interface GetControlPointsParams {
source: HandlePosition;
target: HandlePosition;
sourceRect: NodeRect;
targetRect: NodeRect;
/**
* Minimum spacing between edges and nodes
*/
offset: number;
}
/**
* Calculate control points on the optimal path of an edge.
*
* Reference article: https://juejin.cn/post/6942727734518874142
*/
export const getControlPoints = ({
source: oldSource,
target: oldTarget,
sourceRect,
targetRect,
offset = 20,
}: GetControlPointsParams) => {
const source: ControlPoint = oldSource;
const target: ControlPoint = oldTarget;
let edgePoints: ControlPoint[] = [];
let optimized: ReturnType<typeof optimizeInputPoints>;
// 1. Find the starting and ending points after applying the offset
const sourceOffset = getOffsetPoint(oldSource, offset);
const targetOffset = getOffsetPoint(oldTarget, offset);
const expandedSource = getExpandedRect(sourceRect, offset);
const expandedTarget = getExpandedRect(targetRect, offset);
// 2. Determine if the two Rects are relatively close or should directly connected
const minOffset = 2 * offset + 10;
const isHorizontalLayout = isHorizontalFromPosition(oldSource.position);
const isSameDirection = areLinesSameDirection(
source,
sourceOffset,
targetOffset,
target
);
const sides = getSidesFromPoints([
source,
target,
sourceOffset,
targetOffset,
]);
const isTooClose = isHorizontalLayout
? sides.right - sides.left < minOffset
: sides.bottom - sides.top < minOffset;
const isDirectConnect = isHorizontalLayout
? isSameDirection && source.x < target.x
: isSameDirection && source.y < target.y;
if (isTooClose || isDirectConnect) {
// 3. If the two Rects are relatively close or directly connected, return a simple Path
edgePoints = getSimplePath({
source,
target,
sourceOffset,
targetOffset,
isDirectConnect,
});
optimized = optimizeInputPoints({
source: oldSource,
target: oldTarget,
sourceOffset,
targetOffset,
edgePoints,
});
edgePoints = optimized.edgePoints;
} else {
// 3. Find the vertices of the two expanded Rects
edgePoints = [
...getVerticesFromRectVertex(expandedSource, targetOffset),
...getVerticesFromRectVertex(expandedTarget, sourceOffset),
];
// 4. Find possible midpoints and intersections
edgePoints = edgePoints.concat(
getCenterPoints({
source: expandedSource,
target: expandedTarget,
sourceOffset,
targetOffset,
})
);
// 5. Merge nearby coordinate points and remove duplicate coordinate points
optimized = optimizeInputPoints({
source: oldSource,
target: oldTarget,
sourceOffset,
targetOffset,
edgePoints,
});
// 6. Find the optimal path
edgePoints = getAStarPath({
points: optimized.edgePoints,
source: optimized.source,
target: optimized.target,
sourceRect: getExpandedRect(sourceRect, offset / 2),
targetRect: getExpandedRect(targetRect, offset / 2),
});
}
return {
points: reducePoints([optimized.source, ...edgePoints, optimized.target]),
inputPoints: optimized.edgePoints,
};
};

113
apps/web/src/components/common/editor/graph/edges/algorithms/simple.ts
View File

@ -1,113 +0,0 @@
import { uuid } from "@/utils/uuid";
import { LayoutDirection } from "../../node";
import { ControlPoint, isInLine, isOnLine } from "../point";
interface GetSimplePathParams {
isDirectConnect?: boolean;
source: ControlPoint;
target: ControlPoint;
sourceOffset: ControlPoint;
targetOffset: ControlPoint;
}
const getLineDirection = (
start: ControlPoint,
end: ControlPoint
): LayoutDirection => (start.x === end.x ? "vertical" : "horizontal");
/**
* When two nodes are too close, use the simple path
*
* @returns Control points including sourceOffset and targetOffset (not including source and target points).
*/
export const getSimplePath = ({
isDirectConnect,
source,
target,
sourceOffset,
targetOffset,
}: GetSimplePathParams): ControlPoint[] => {
const points: ControlPoint[] = [];
const sourceDirection = getLineDirection(source, sourceOffset);
const targetDirection = getLineDirection(target, targetOffset);
const isHorizontalLayout = sourceDirection === "horizontal";
if (isDirectConnect) {
// Direct connection, return a simple Path
if (isHorizontalLayout) {
if (sourceOffset.x <= targetOffset.x) {
const centerX = (sourceOffset.x + targetOffset.x) / 2;
return [
{ id: uuid(), x: centerX, y: sourceOffset.y },
{ id: uuid(), x: centerX, y: targetOffset.y },
];
} else {
const centerY = (sourceOffset.y + targetOffset.y) / 2;
return [
sourceOffset,
{ id: uuid(), x: sourceOffset.x, y: centerY },
{ id: uuid(), x: targetOffset.x, y: centerY },
targetOffset,
];
}
} else {
if (sourceOffset.y <= targetOffset.y) {
const centerY = (sourceOffset.y + targetOffset.y) / 2;
return [
{ id: uuid(), x: sourceOffset.x, y: centerY },
{ id: uuid(), x: targetOffset.x, y: centerY },
];
} else {
const centerX = (sourceOffset.x + targetOffset.x) / 2;
return [
sourceOffset,
{ id: uuid(), x: centerX, y: sourceOffset.y },
{ id: uuid(), x: centerX, y: targetOffset.y },
targetOffset,
];
}
}
}
if (sourceDirection === targetDirection) {
// Same direction, add two points, two endpoints of parallel lines at half the vertical distance
if (source.y === sourceOffset.y) {
points.push({
id: uuid(),
x: sourceOffset.x,
y: (sourceOffset.y + targetOffset.y) / 2,
});
points.push({
id: uuid(),
x: targetOffset.x,
y: (sourceOffset.y + targetOffset.y) / 2,
});
} else {
points.push({
id: uuid(),
x: (sourceOffset.x + targetOffset.x) / 2,
y: sourceOffset.y,
});
points.push({
id: uuid(),
x: (sourceOffset.x + targetOffset.x) / 2,
y: targetOffset.y,
});
}
} else {
// Different directions, add one point, ensure it's not on the current line segment (to avoid overlap), and there are no turns
let point = { id: uuid(), x: sourceOffset.x, y: targetOffset.y };
const inStart = isInLine(point, source, sourceOffset);
const inEnd = isInLine(point, target, targetOffset);
if (inStart || inEnd) {
point = { id: uuid(), x: targetOffset.x, y: sourceOffset.y };
} else {
const onStart = isOnLine(point, source, sourceOffset);
const onEnd = isOnLine(point, target, targetOffset);
if (onStart && onEnd) {
point = { id: uuid(), x: targetOffset.x, y: sourceOffset.y };
}
}
points.push(point);
}
return [sourceOffset, ...points, targetOffset];
};

248
apps/web/src/components/common/editor/graph/layout/edge/algorithms/a-star.ts
View File

@ -1,248 +0,0 @@
import { areLinesReverseDirection, areLinesSameDirection } from "../edge";
import {
ControlPoint,
NodeRect,
isEqualPoint,
isSegmentCrossingRect,
} from "../point";
interface GetAStarPathParams {
/**
* Collection of potential control points between `sourceOffset` and `targetOffset`, excluding the `source` and `target` points.
*/
points: ControlPoint[];
source: ControlPoint;
target: ControlPoint;
/**
* Node size information for the `source` and `target`, used to optimize edge routing without intersecting nodes.
*/
sourceRect: NodeRect;
targetRect: NodeRect;
}
/**
* Utilizes the [A\* search algorithm](https://en.wikipedia.org/wiki/A*_search_algorithm) combined with
* [Manhattan Distance](https://simple.wikipedia.org/wiki/Manhattan_distance) to find the optimal path for edges.
*
* @returns Control points including sourceOffset and targetOffset (not including source and target points).
*/
export const getAStarPath = ({
points,
source,
target,
sourceRect,
targetRect,
}: GetAStarPathParams): ControlPoint[] => {
if (points.length < 3) {
return points;
}
const start = points[0];
const end = points[points.length - 1];
const openSet: ControlPoint[] = [start];
const closedSet: Set<ControlPoint> = new Set();
const cameFrom: Map<ControlPoint, ControlPoint> = new Map();
const gScore: Map<ControlPoint, number> = new Map().set(start, 0);
const fScore: Map<ControlPoint, number> = new Map().set(
start,
heuristicCostEstimate({
from: start,
to: start,
start,
end,
source,
target,
})
);
while (openSet.length) {
let current;
let currentIdx;
let lowestFScore = Infinity;
openSet.forEach((p, idx) => {
const score = fScore.get(p) ?? 0;
if (score < lowestFScore) {
lowestFScore = score;
current = p;
currentIdx = idx;
}
});
if (!current) {
break;
}
if (current === end) {
return buildPath(cameFrom, current);
}
openSet.splice(currentIdx!, 1);
closedSet.add(current);
const curFScore = fScore.get(current) ?? 0;
const previous = cameFrom.get(current);
const neighbors = getNextNeighborPoints({
points,
previous,
current,
sourceRect,
targetRect,
});
for (const neighbor of neighbors) {
if (closedSet.has(neighbor)) {
continue;
}
const neighborGScore = gScore.get(neighbor) ?? 0;
const tentativeGScore = curFScore + estimateDistance(current, neighbor);
if (openSet.includes(neighbor) && tentativeGScore >= neighborGScore) {
continue;
}
openSet.push(neighbor);
cameFrom.set(neighbor, current);
gScore.set(neighbor, tentativeGScore);
fScore.set(
neighbor,
neighborGScore +
heuristicCostEstimate({
from: current,
to: neighbor,
start,
end,
source,
target,
})
);
}
}
return [start, end];
};
const buildPath = (
cameFrom: Map<ControlPoint, ControlPoint>,
current: ControlPoint
): ControlPoint[] => {
const path = [current];
let previous = cameFrom.get(current);
while (previous) {
path.push(previous);
previous = cameFrom.get(previous);
}
return path.reverse();
};
interface GetNextNeighborPointsParams {
points: ControlPoint[];
previous?: ControlPoint;
current: ControlPoint;
sourceRect: NodeRect;
targetRect: NodeRect;
}
/**
* Get the set of possible neighboring points for the current control point
*
* - The line is in a horizontal or vertical direction
* - The line does not intersect with the two end nodes
* - The line does not overlap with the previous line segment in reverse direction
*/
export const getNextNeighborPoints = ({
points,
previous,
current,
sourceRect,
targetRect,
}: GetNextNeighborPointsParams): ControlPoint[] => {
return points.filter((p) => {
if (p === current) {
return false;
}
// The connection is in the horizontal or vertical direction
const rightDirection = p.x === current.x || p.y === current.y;
// Reverse direction with the previous line segment (overlap)
const reverseDirection = previous
? areLinesReverseDirection(previous, current, current, p)
: false;
return (
rightDirection && // The line is in a horizontal or vertical direction
!reverseDirection && // The line does not overlap with the previous line segment in reverse direction
!isSegmentCrossingRect(p, current, sourceRect) && // Does not intersect with sourceNode
!isSegmentCrossingRect(p, current, targetRect) // Does not intersect with targetNode
);
});
};
/**
* 路径规划所需的启发式代价计算参数接口
* 包含了计算路径代价所需的所有控制点信息:
* - from/to: 当前路径段的起点和终点
* - start/end: 整条路径的起点和终点
* - source/target: 连接的源节点和目标节点位置
*/
interface HeuristicCostParams {
from: ControlPoint; // 当前路径段的起点
to: ControlPoint; // 当前路径段的终点
start: ControlPoint; // 整条路径的起始点
end: ControlPoint; // 整条路径的终点
source: ControlPoint; // 源节点的连接点
target: ControlPoint; // 目标节点的连接点
}
/**
* 启发式路径代价估算函数
*
* 该函数通过多个因素综合评估路径的优劣程度:
* 1. 基础代价: 当前点到起点和终点的曼哈顿距离之和
* 2. 起点优化: 如果是起始段,判断方向一致性给予奖励
* 3. 终点优化: 如果是结束段,判断方向一致性给予奖励
*
* 优化目标:
* - 减少路径总长度
* - 保持路径走向的连续性
* - 使拐点在路径中更均匀分布
*
* @param params 包含所有必要控制点的参数对象
* @returns 计算得到的启发式代价值,值越小路径越优
*/
const heuristicCostEstimate = ({
from,
to,
start,
end,
source,
target,
}: HeuristicCostParams): number => {
// 计算基础代价 - 到起点和终点的距离之和
const base = estimateDistance(to, start) + estimateDistance(to, end);
// 起点方向优化 - 如果是起始段且方向一致,给予奖励
const startCost = isEqualPoint(from, start)
? areLinesSameDirection(from, to, source, start)
? -base / 2 // 方向一致时减少代价
: 0
: 0;
// 终点方向优化 - 如果是结束段且方向一致,给予奖励
const endCost = isEqualPoint(to, end)
? areLinesSameDirection(from, to, end, target)
? -base / 2 // 方向一致时减少代价
: 0
: 0;
return base + startCost + endCost;
};
/**
* 计算两点间的估计距离
*
* 采用曼哈顿距离(Manhattan distance)计算:
* - 只计算水平和垂直方向的距离之和
* - 避免使用欧几里得距离的开方运算
* - 在网格化的路径规划中性能更优
*
* @param p1 第一个控制点
* @param p2 第二个控制点
* @returns 两点间的曼哈顿距离
*/
const estimateDistance = (p1: ControlPoint, p2: ControlPoint): number =>
Math.abs(p1.x - p2.x) + Math.abs(p1.y - p2.y);

142
apps/web/src/components/common/editor/graph/layout/edge/algorithms/index.ts
View File

@ -1,142 +0,0 @@
import { areLinesSameDirection, isHorizontalFromPosition } from "../edge";
import {
ControlPoint,
HandlePosition,
NodeRect,
getCenterPoints,
getExpandedRect,
getOffsetPoint,
getSidesFromPoints,
getVerticesFromRectVertex,
optimizeInputPoints,
reducePoints,
} from "../point";
import { getAStarPath } from "./a-star";
import { getSimplePath } from "./simple";
/**
* 边缘控制点计算模块
* 用于计算图形边缘连接线的控制点,以实现平滑的连接效果
* 主要应用于流程图、思维导图等需要节点间连线的场景
*/
/**
* 控制点计算所需的输入参数接口
*/
export interface GetControlPointsParams {
source: HandlePosition; // 起始连接点位置
target: HandlePosition; // 目标连接点位置
sourceRect: NodeRect; // 起始节点的矩形区域
targetRect: NodeRect; // 目标节点的矩形区域
/**
* 边缘与节点之间的最小间距
* @default 20
*/
offset: number;
}
/**
* 计算两个节点之间连接线的控制点
* @param params 控制点计算参数
* @returns 返回优化后的路径点和输入点集合
*/
export const getControlPoints = ({
source: oldSource,
target: oldTarget,
sourceRect,
targetRect,
offset = 20,
}: GetControlPointsParams) => {
const source: ControlPoint = oldSource;
const target: ControlPoint = oldTarget;
let edgePoints: ControlPoint[] = [];
let optimized: ReturnType<typeof optimizeInputPoints>;
// 1. 计算考虑偏移量后的起始和结束点
const sourceOffset = getOffsetPoint(oldSource, offset);
const targetOffset = getOffsetPoint(oldTarget, offset);
const expandedSource = getExpandedRect(sourceRect, offset);
const expandedTarget = getExpandedRect(targetRect, offset);
// 2. 判断两个矩形是否靠得较近或应该直接连接
const minOffset = 2 * offset + 10; // 最小间距阈值
const isHorizontalLayout = isHorizontalFromPosition(oldSource.position); // 是否为水平布局
const isSameDirection = areLinesSameDirection(
source,
sourceOffset,
targetOffset,
target
); // 判断是否同向
const sides = getSidesFromPoints([
source,
target,
sourceOffset,
targetOffset,
]); // 获取边界信息
// 判断节点是否过近
const isTooClose = isHorizontalLayout
? sides.right - sides.left < minOffset
: sides.bottom - sides.top < minOffset;
// 判断是否可以直接连接
const isDirectConnect = isHorizontalLayout
? isSameDirection && source.x < target.x
: isSameDirection && source.y < target.y;
if (isTooClose || isDirectConnect) {
// 3. 如果节点较近或可直接连接,返回简单路径
edgePoints = getSimplePath({
source,
target,
sourceOffset,
targetOffset,
isDirectConnect,
});
// 优化输入点
optimized = optimizeInputPoints({
source: oldSource,
target: oldTarget,
sourceOffset,
targetOffset,
edgePoints,
});
edgePoints = optimized.edgePoints;
} else {
// 3. 获取两个扩展矩形的顶点
edgePoints = [
...getVerticesFromRectVertex(expandedSource, targetOffset),
...getVerticesFromRectVertex(expandedTarget, sourceOffset),
];
// 4. 计算可能的中点和交点
edgePoints = edgePoints.concat(
getCenterPoints({
source: expandedSource,
target: expandedTarget,
sourceOffset,
targetOffset,
})
);
// 5. 合并临近坐标点并去除重复点
optimized = optimizeInputPoints({
source: oldSource,
target: oldTarget,
sourceOffset,
targetOffset,
edgePoints,
});
// 6. 使用A*算法寻找最优路径
edgePoints = getAStarPath({
points: optimized.edgePoints,
source: optimized.source,
target: optimized.target,
sourceRect: getExpandedRect(sourceRect, offset / 2),
targetRect: getExpandedRect(targetRect, offset / 2),
});
}
// 返回简化后的路径点和输入点集合
return {
points: reducePoints([optimized.source, ...edgePoints, optimized.target]),
inputPoints: optimized.edgePoints,
};
};

112
apps/web/src/components/common/editor/graph/layout/edge/algorithms/simple.ts
View File

@ -1,112 +0,0 @@
import { uuid } from "../../../utils/uuid";
import { LayoutDirection } from "../../node";
import { ControlPoint, isInLine, isOnLine } from "../point";
interface GetSimplePathParams {
isDirectConnect?: boolean;
source: ControlPoint;
target: ControlPoint;
sourceOffset: ControlPoint;
targetOffset: ControlPoint;
}
const getLineDirection = (
start: ControlPoint,
end: ControlPoint
): LayoutDirection => (start.x === end.x ? "vertical" : "horizontal");
/**
* When two nodes are too close, use the simple path
*
* @returns Control points including sourceOffset and targetOffset (not including source and target points).
*/
export const getSimplePath = ({
isDirectConnect,
source,
target,
sourceOffset,
targetOffset,
}: GetSimplePathParams): ControlPoint[] => {
const points: ControlPoint[] = [];
const sourceDirection = getLineDirection(source, sourceOffset);
const targetDirection = getLineDirection(target, targetOffset);
const isHorizontalLayout = sourceDirection === "horizontal";
if (isDirectConnect) {
// Direct connection, return a simple Path
if (isHorizontalLayout) {
if (sourceOffset.x <= targetOffset.x) {
const centerX = (sourceOffset.x + targetOffset.x) / 2;
return [
{ id: uuid(), x: centerX, y: sourceOffset.y },
{ id: uuid(), x: centerX, y: targetOffset.y },
];
} else {
const centerY = (sourceOffset.y + targetOffset.y) / 2;
return [
sourceOffset,
{ id: uuid(), x: sourceOffset.x, y: centerY },
{ id: uuid(), x: targetOffset.x, y: centerY },
targetOffset,
];
}
} else {
if (sourceOffset.y <= targetOffset.y) {
const centerY = (sourceOffset.y + targetOffset.y) / 2;
return [
{ id: uuid(), x: sourceOffset.x, y: centerY },
{ id: uuid(), x: targetOffset.x, y: centerY },
];
} else {
const centerX = (sourceOffset.x + targetOffset.x) / 2;
return [
sourceOffset,
{ id: uuid(), x: centerX, y: sourceOffset.y },
{ id: uuid(), x: centerX, y: targetOffset.y },
targetOffset,
];
}
}
}
if (sourceDirection === targetDirection) {
// Same direction, add two points, two endpoints of parallel lines at half the vertical distance
if (source.y === sourceOffset.y) {
points.push({
id: uuid(),
x: sourceOffset.x,
y: (sourceOffset.y + targetOffset.y) / 2,
});
points.push({
id: uuid(),
x: targetOffset.x,
y: (sourceOffset.y + targetOffset.y) / 2,
});
} else {
points.push({
id: uuid(),
x: (sourceOffset.x + targetOffset.x) / 2,
y: sourceOffset.y,
});
points.push({
id: uuid(),
x: (sourceOffset.x + targetOffset.x) / 2,
y: targetOffset.y,
});
}
} else {
// Different directions, add one point, ensure it's not on the current line segment (to avoid overlap), and there are no turns
let point = { id: uuid(), x: sourceOffset.x, y: targetOffset.y };
const inStart = isInLine(point, source, sourceOffset);
const inEnd = isInLine(point, target, targetOffset);
if (inStart || inEnd) {
point = { id: uuid(), x: targetOffset.x, y: sourceOffset.y };
} else {
const onStart = isOnLine(point, source, sourceOffset);
const onEnd = isOnLine(point, target, targetOffset);
if (onStart && onEnd) {
point = { id: uuid(), x: targetOffset.x, y: sourceOffset.y };
}
}
points.push(point);
}
return [sourceOffset, ...points, targetOffset];
};

389
apps/web/src/components/common/editor/graph/layout/edge/edge.ts
View File

@ -1,389 +0,0 @@
import { Position, XYPosition } from "@xyflow/react";
import { ControlPoint, HandlePosition } from "./point";
import { uuid } from "../../utils/uuid";
export interface ILine {
start: ControlPoint;
end: ControlPoint;
}
/**
* 判断给定位置是否为水平方向
* @param position - 位置枚举值
* @returns 如果是左侧或右侧位置则返回true,否则返回false
*/
export const isHorizontalFromPosition = (position: Position) => {
return [Position.Left, Position.Right].includes(position);
};
/**
* 判断连接是否为反向
* 在图形布局中,通常希望连线从左到右或从上到下。当连线方向与此相反时,即为反向连接
* @param props - 包含源点和目标点位置信息的对象
* @param props.source - 源节点的位置信息
* @param props.target - 目标节点的位置信息
* @returns 如果是反向连接则返回true,否则返回false
*/
export const isConnectionBackward = (props: {
source: HandlePosition;
target: HandlePosition;
}) => {
const { source, target } = props;
// 判断是水平还是垂直方向的连接
const isHorizontal = isHorizontalFromPosition(source.position);
let isBackward = false;
// 水平方向时,如果源点x坐标大于目标点,则为反向
if (isHorizontal) {
if (source.x > target.x) {
isBackward = true;
}
}
// 垂直方向时,如果源点y坐标大于目标点,则为反向
else {
if (source.y > target.y) {
isBackward = true;
}
}
return isBackward;
};
/**
* 计算两点之间的欧几里得距离
* 使用勾股定理(Math.hypot)计算两点间的直线距离
* @param p1 - 第一个控制点
* @param p2 - 第二个控制点
* @returns 两点间的距离
*/
export const distance = (p1: ControlPoint, p2: ControlPoint) => {
return Math.hypot(p2.x - p1.x, p2.y - p1.y);
};
/**
* 计算线段的中点坐标
* 通过取两端点坐标的算术平均值来确定中点位置
* @param p1 - 第一个控制点
* @param p2 - 第二个控制点
* @returns 包含中点坐标和唯一标识的控制点对象
*/
export const getLineCenter = (
p1: ControlPoint,
p2: ControlPoint
): ControlPoint => {
return {
id: uuid(),
x: (p1.x + p2.x) / 2, // x坐标取两端点x坐标的平均值
y: (p1.y + p2.y) / 2, // y坐标取两端点y坐标的平均值
};
};
/**
* 判断点是否在线段上
*
* @description
* 该函数用于检测给定的点是否位于由两个控制点构成的线段上。
* 判断逻辑分为两种情况:
* 1. 垂直线段: 当起点和终点的x坐标相同时,判断目标点的x坐标是否等于线段x坐标,且y坐标在线段y坐标范围内
* 2. 水平线段: 当起点和终点的y坐标相同时,判断目标点的y坐标是否等于线段y坐标,且x坐标在线段x坐标范围内
*
* @param start - 线段起点坐标
* @param end - 线段终点坐标
* @param p - 待检测点的坐标
* @returns {boolean} 如果点在线段上返回true,否则返回false
*/
export const isLineContainsPoint = (
start: ControlPoint,
end: ControlPoint,
p: ControlPoint
) => {
return (
// 判断垂直线段
(start.x === end.x && // 起点终点x坐标相同
p.x === start.x && // 目标点x坐标与线段相同
p.y <= Math.max(start.y, end.y) && // 目标点y坐标不超过线段y坐标最大值
p.y >= Math.min(start.y, end.y)) || // 目标点y坐标不小于线段y坐标最小值
// 判断水平线段
(start.y === end.y && // 起点终点y坐标相同
p.y === start.y && // 目标点y坐标与线段相同
p.x <= Math.max(start.x, end.x) && // 目标点x坐标不超过线段x坐标最大值
p.x >= Math.min(start.x, end.x)) // 目标点x坐标不小于线段x坐标最小值
);
};
/**
/**
* 生成带圆角转角的SVG路径
*
* 该函数用于在图形编辑器中生成连接两点之间的边线路径。路径具有以下特点:
* 1. 两个控制点之间为直线段
* 2. 在转折点处生成圆角过渡
* 3. 支持垂直和水平方向的转角
*
* @param points 控制点数组,包含边的起点、终点和中间的转折点
* - 至少需要2个点(起点和终点)
* - 点的顺序应从输入端点开始到输出端点结束
* @param radius 转角处的圆角半径
* @returns 返回SVG路径字符串
* @throws 当points数组长度小于2时抛出错误
*/
export function getPathWithRoundCorners(
points: ControlPoint[],
radius: number
): string {
if (points.length < 2) {
throw new Error("At least 2 points are required.");
}
/**
* 计算两条线段交点处的圆角路径
* @param center 转折点坐标
* @param p1 前一个点的坐标
* @param p2 后一个点的坐标
* @param radius 圆角半径
* @returns SVG路径命令字符串
*/
function getRoundCorner(
center: ControlPoint,
p1: ControlPoint,
p2: ControlPoint,
radius: number
) {
const { x, y } = center;
// 如果两条线段不垂直,则直接返回直线路径
if (!areLinesPerpendicular(p1, center, center, p2)) {
return `L ${x} ${y}`;
}
// 计算实际可用的圆角半径,取三个值中的最小值:
// 1. 与前一个点的距离的一半
// 2. 与后一个点的距离的一半
// 3. 传入的目标半径
const d1 = distance(center, p1);
const d2 = distance(center, p2);
radius = Math.min(d1 / 2, d2 / 2, radius);
// 判断第一条线段是否为水平线
const isHorizontal = p1.y === y;
// 根据点的相对位置确定圆角绘制方向
const xDir = isHorizontal ? (p1.x < p2.x ? -1 : 1) : p1.x < p2.x ? 1 : -1;
const yDir = isHorizontal ? (p1.y < p2.y ? 1 : -1) : p1.y < p2.y ? -1 : 1;
// 根据线段方向生成不同的圆角路径
if (isHorizontal) {
return `L ${x + radius * xDir},${y}Q ${x},${y} ${x},${y + radius * yDir}`;
}
return `L ${x},${y + radius * yDir}Q ${x},${y} ${x + radius * xDir},${y}`;
}
// 构建完整的SVG路径
const path: string[] = [];
for (let i = 0; i < points.length; i++) {
if (i === 0) {
// 起点使用移动命令M
path.push(`M ${points[i].x} ${points[i].y}`);
} else if (i === points.length - 1) {
// 终点使用直线命令L
path.push(`L ${points[i].x} ${points[i].y}`);
} else {
// 中间点使用圆角转角
path.push(
getRoundCorner(points[i], points[i - 1], points[i + 1], radius)
);
}
}
// 将所有路径命令连接成完整的路径字符串
return path.join(" ");
}
/**
* 获取折线中最长的线段
* @param points 控制点数组，每个点包含x和y坐标
* @returns 返回最长线段的起点和终点坐标
*
* 实现原理:
* 1. 初始化第一条线段为最长线段
* 2. 遍历所有相邻点对,计算线段长度
* 3. 如果找到更长的线段,则更新最长线段记录
* 4. 返回最长线段的两个端点
*/
export function getLongestLine(
points: ControlPoint[]
): [ControlPoint, ControlPoint] {
let longestLine: [ControlPoint, ControlPoint] = [points[0], points[1]];
let longestDistance = distance(...longestLine);
for (let i = 1; i < points.length - 1; i++) {
const _distance = distance(points[i], points[i + 1]);
if (_distance > longestDistance) {
longestDistance = _distance;
longestLine = [points[i], points[i + 1]];
}
}
return longestLine;
}
/**
* 计算折线上标签的位置
* @param points 控制点数组
* @param minGap 最小间隔距离,默认为20
* @returns 标签的坐标位置
*
* 计算逻辑:
* 1. 如果折线点数为偶数:
* - 取中间两个点
* - 如果这两点间距大于最小间隔,返回它们的中点
* 2. 如果折线点数为奇数或中间段太短:
* - 找出最长的线段
* - 返回最长线段的中点作为标签位置
*/
export function getLabelPosition(
points: ControlPoint[],
minGap = 20
): XYPosition {
if (points.length % 2 === 0) {
const middleP1 = points[points.length / 2 - 1];
const middleP2 = points[points.length / 2];
if (distance(middleP1, middleP2) > minGap) {
return getLineCenter(middleP1, middleP2);
}
}
const [start, end] = getLongestLine(points);
return {
x: (start.x + end.x) / 2,
y: (start.y + end.y) / 2,
};
}
/**
* 判断两条线段是否垂直
* @param p1,p2 第一条线段的起点和终点
* @param p3,p4 第二条线段的起点和终点
* @returns 如果两线段垂直则返回true
*
* 判断依据:
* - 假设线段要么水平要么垂直
* - 当一条线段水平(y相等)而另一条垂直(x相等)时,两线段垂直
*/
export function areLinesPerpendicular(
p1: ControlPoint,
p2: ControlPoint,
p3: ControlPoint,
p4: ControlPoint
): boolean {
return (p1.x === p2.x && p3.y === p4.y) || (p1.y === p2.y && p3.x === p4.x);
}
/**
* 判断两条线段是否平行
* @param p1,p2 第一条线段的起点和终点
* @param p3,p4 第二条线段的起点和终点
* @returns 如果两线段平行则返回true
*
* 判断依据:
* - 假设线段要么水平要么垂直
* - 当两条线段都是水平的(x相等)或都是垂直的(y相等)时,两线段平行
*/
export function areLinesParallel(
p1: ControlPoint,
p2: ControlPoint,
p3: ControlPoint,
p4: ControlPoint
) {
return (p1.x === p2.x && p3.x === p4.x) || (p1.y === p2.y && p3.y === p4.y);
}
/**
* 判断两条线段是否同向
* @param p1 第一条线段的起点
* @param p2 第一条线段的终点
* @param p3 第二条线段的起点
* @param p4 第二条线段的终点
* @returns boolean 如果两线段同向返回true,否则返回false
*
* 判断逻辑:
* 1. 对于水平线段(y坐标相等),判断x方向的变化是否同向
* 2. 对于垂直线段(x坐标相等),判断y方向的变化是否同向
*/
export function areLinesSameDirection(
p1: ControlPoint,
p2: ControlPoint,
p3: ControlPoint,
p4: ControlPoint
) {
return (
// 判断垂直线段是否同向
(p1.x === p2.x && p3.x === p4.x && (p1.y - p2.y) * (p3.y - p4.y) > 0) ||
// 判断水平线段是否同向
(p1.y === p2.y && p3.y === p4.y && (p1.x - p2.x) * (p3.x - p4.x) > 0)
);
}
/**
* 判断两条线段是否反向
* @param p1 第一条线段的起点
* @param p2 第一条线段的终点
* @param p3 第二条线段的起点
* @param p4 第二条线段的终点
* @returns boolean 如果两线段反向返回true,否则返回false
*
* 判断逻辑:
* 1. 对于水平线段(y坐标相等),判断x方向的变化是否反向
* 2. 对于垂直线段(x坐标相等),判断y方向的变化是否反向
*/
export function areLinesReverseDirection(
p1: ControlPoint,
p2: ControlPoint,
p3: ControlPoint,
p4: ControlPoint
) {
return (
// 判断垂直线段是否反向
(p1.x === p2.x && p3.x === p4.x && (p1.y - p2.y) * (p3.y - p4.y) < 0) ||
// 判断水平线段是否反向
(p1.y === p2.y && p3.y === p4.y && (p1.x - p2.x) * (p3.x - p4.x) < 0)
);
}
/**
* 计算两条线段之间的夹角
* @param p1 第一条线段的起点
* @param p2 第一条线段的终点
* @param p3 第二条线段的起点
* @param p4 第二条线段的终点
* @returns number 两线段之间的夹角(单位:度)
*
* 计算步骤:
* 1. 计算两个向量
* 2. 计算向量的点积
* 3. 计算向量的模长
* 4. 使用反余弦函数计算弧度
* 5. 将弧度转换为角度
*/
export function getAngleBetweenLines(
p1: ControlPoint,
p2: ControlPoint,
p3: ControlPoint,
p4: ControlPoint
) {
// 计算两条线段对应的向量
const v1 = { x: p2.x - p1.x, y: p2.y - p1.y };
const v2 = { x: p4.x - p3.x, y: p4.y - p3.y };
// 计算向量的点积
const dotProduct = v1.x * v2.x + v1.y * v2.y;
// 计算两个向量的模长
const magnitude1 = Math.sqrt(v1.x ** 2 + v1.y ** 2);
const magnitude2 = Math.sqrt(v2.x ** 2 + v2.y ** 2);
// 计算夹角的余弦值
const cosine = dotProduct / (magnitude1 * magnitude2);
// 使用反余弦函数计算弧度
const angleInRadians = Math.acos(cosine);
// 将弧度转换为角度并返回
const angleInDegrees = (angleInRadians * 180) / Math.PI;
return angleInDegrees;
}

72
apps/web/src/components/common/editor/graph/layout/edge/index.ts
View File

@ -1,72 +0,0 @@
import { EdgeLayout } from "../../types";
import { getControlPoints, GetControlPointsParams } from "./algorithms";
import { getLabelPosition, getPathWithRoundCorners } from "./edge";
import { InternalNode, Node } from "@xyflow/react"
interface GetBasePathParams extends GetControlPointsParams {
borderRadius: number;
}
export function getBasePath({
id,
offset,
borderRadius,
source,
target,
sourceX,
sourceY,
targetX,
targetY,
sourcePosition,
targetPosition,
}: any) {
const sourceNode: InternalNode =
kReactFlow.instance!.getNode(source)!;
const targetNode: InternalNode =
kReactFlow.instance!.getNode(target)!;
return getPathWithPoints({
offset,
borderRadius,
source: {
id: "source-" + id,
x: sourceX,
y: sourceY,
position: sourcePosition,
},
target: {
id: "target-" + id,
x: targetX,
y: targetY,
position: targetPosition,
},
sourceRect: {
...(sourceNode.internals.positionAbsolute || sourceNode.position),
width: sourceNode.width!,
height: sourceNode.height!,
},
targetRect: {
...(targetNode.internals.positionAbsolute || targetNode.position),
width: targetNode.width!,
height: targetNode.height!,
},
});
}
export function getPathWithPoints({
source,
target,
sourceRect,
targetRect,
offset = 20,
borderRadius = 16,
}: GetBasePathParams): EdgeLayout {
const { points, inputPoints } = getControlPoints({
source,
target,
offset,
sourceRect,
targetRect,
});
const labelPosition = getLabelPosition(points);
const path = getPathWithRoundCorners(points, borderRadius);
return { path, points, inputPoints, labelPosition };
}

623
apps/web/src/components/common/editor/graph/layout/edge/point.ts
View File

@ -1,623 +0,0 @@
import { Position } from "@xyflow/react";
import { isHorizontalFromPosition } from "./edge";
import { uuid } from "../../utils/uuid";
export interface ControlPoint {
id: string;
x: number;
y: number;
}
export interface NodeRect {
x: number; // left
y: number; // top
width: number;
height: number;
}
export interface RectSides {
top: number;
right: number;
bottom: number;
left: number;
}
export interface HandlePosition extends ControlPoint {
position: Position;
}
export interface GetVerticesParams {
source: NodeRect;
target: NodeRect;
sourceOffset: ControlPoint;
targetOffset: ControlPoint;
}
/**
* 计算两个节点之间的控制点位置
*
* 该函数用于在图形编辑器中确定边的控制点,以实现更自然的边布局。
* 主要应用于:
* 1. 节点之间连线的路径规划
* 2. 边的弯曲程度控制
* 3. 避免边与节点重叠
*
* 实现原理:
* 1. 基于源节点和目标节点构建外部边界矩形
* 2. 基于偏移点构建内部边界矩形
* 3. 在两个矩形的边上生成候选控制点
* 4. 过滤掉无效的控制点
*
* @param {GetVerticesParams} params - 计算所需的参数
* @param {Rect} params.source - 源节点的矩形区域,包含x、y、width、height
* @param {Rect} params.target - 目标节点的矩形区域
* @param {Point} params.sourceOffset - 源节点上的连接点坐标
* @param {Point} params.targetOffset - 目标节点上的连接点坐标
* @returns {ControlPoint[]} 有效的控制点数组,每个点包含唯一ID和坐标
*/
export const getCenterPoints = ({
source,
target,
sourceOffset,
targetOffset,
}: GetVerticesParams): ControlPoint[] => {
// 特殊情况处理:当源点和目标点在同一直线上时,无法构成有效的控制区域
if (sourceOffset.x === targetOffset.x || sourceOffset.y === targetOffset.y) {
return [];
}
// 步骤1: 获取外部边界
// 收集两个节点的所有顶点,用于构建外部最大矩形
const vertices = [...getRectVertices(source), ...getRectVertices(target)];
const outerSides = getSidesFromPoints(vertices);
// 步骤2: 获取内部边界
// 根据偏移点(实际连接点)计算内部矩形的四条边
const { left, right, top, bottom } = getSidesFromPoints([
sourceOffset,
targetOffset,
]);
// 步骤3: 计算中心参考线
const centerX = (left + right) / 2; // 水平中心线
const centerY = (top + bottom) / 2; // 垂直中心线
// 步骤4: 生成候选控制点
// 在内外两个矩形的边上各生成4个控制点,共8个候选点
const points = [
{ id: uuid(), x: centerX, y: top }, // 内矩形-上
{ id: uuid(), x: right, y: centerY }, // 内矩形-右
{ id: uuid(), x: centerX, y: bottom }, // 内矩形-下
{ id: uuid(), x: left, y: centerY }, // 内矩形-左
{ id: uuid(), x: centerX, y: outerSides.top }, // 外矩形-上
{ id: uuid(), x: outerSides.right, y: centerY }, // 外矩形-右
{ id: uuid(), x: centerX, y: outerSides.bottom },// 外矩形-下
{ id: uuid(), x: outerSides.left, y: centerY }, // 外矩形-左
];
// 步骤5: 过滤无效控制点
// 移除落在源节点或目标节点内部的控制点,避免边穿过节点
return points.filter((p) => {
return !isPointInRect(p, source) && !isPointInRect(p, target);
});
};
/**
* 扩展矩形区域
* @param rect 原始矩形区域
* @param offset 扩展偏移量
* @returns 扩展后的新矩形区域
*
* 该函数将一个矩形区域向四周扩展指定的偏移量。
* 扩展规则:
* 1. x和y坐标各向外偏移offset距离
* 2. 宽度和高度各增加2*offset
*/
export const getExpandedRect = (rect: NodeRect, offset: number): NodeRect => {
return {
x: rect.x - offset,
y: rect.y - offset,
width: rect.width + 2 * offset,
height: rect.height + 2 * offset,
};
};
/**
* 检测两个矩形是否重叠
* @param rect1 第一个矩形
* @param rect2 第二个矩形
* @returns 布尔值,true表示重叠,false表示不重叠
*
* 使用AABB(轴对齐包围盒)碰撞检测算法:
* 1. 计算x轴投影是否重叠
* 2. 计算y轴投影是否重叠
* 两个轴向都重叠则矩形重叠
*/
export const isRectOverLapping = (rect1: NodeRect, rect2: NodeRect) => {
return (
Math.abs(rect1.x - rect2.x) < (rect1.width + rect2.width) / 2 &&
Math.abs(rect1.y - rect2.y) < (rect1.height + rect2.height) / 2
);
};
/**
* 判断点是否在矩形内
* @param p 待检测的控制点
* @param box 矩形区域
* @returns 布尔值,true表示点在矩形内,false表示点在矩形外
*
* 点在矩形内的条件:
* 1. x坐标在矩形左右边界之间
* 2. y坐标在矩形上下边界之间
*/
export const isPointInRect = (p: ControlPoint, box: NodeRect) => {
const sides = getRectSides(box);
return (
p.x >= sides.left &&
p.x <= sides.right &&
p.y >= sides.top &&
p.y <= sides.bottom
);
};
/**
* 矩形顶点计算模块
* 用于处理图形编辑器中矩形节点的顶点、边界等几何计算
* 主要应用于连线路径规划和节点定位
*/
/**
* 根据矩形和外部顶点计算包围矩形的顶点坐标
* @param box 原始矩形的位置和尺寸信息
* @param vertex 外部控制点
* @returns 包围矩形的四个顶点坐标
* 算法思路:
* 1. 合并外部顶点和原矩形的顶点
* 2. 计算所有点的边界范围
* 3. 根据边界生成新的矩形顶点
*/
export const getVerticesFromRectVertex = (
box: NodeRect,
vertex: ControlPoint
): ControlPoint[] => {
const points = [vertex, ...getRectVertices(box)];
const { top, right, bottom, left } = getSidesFromPoints(points);
return [
{ id: uuid(), x: left, y: top }, // 左上角顶点
{ id: uuid(), x: right, y: top }, // 右上角顶点
{ id: uuid(), x: right, y: bottom }, // 右下角顶点
{ id: uuid(), x: left, y: bottom }, // 左下角顶点
];
};
/**
* 计算一组点的边界范围
* @param points 控制点数组
* @returns 返回边界的上下左右极值
* 实现方式:
* - 使用数组map和Math.min/max计算坐标的最值
*/
export const getSidesFromPoints = (points: ControlPoint[]) => {
const left = Math.min(...points.map((p) => p.x)); // 最左侧x坐标
const right = Math.max(...points.map((p) => p.x)); // 最右侧x坐标
const top = Math.min(...points.map((p) => p.y)); // 最上方y坐标
const bottom = Math.max(...points.map((p) => p.y)); // 最下方y坐标
return { top, right, bottom, left };
};
/**
* 获取矩形的四条边界位置
* @param box 矩形的位置和尺寸信息
* @returns 矩形的上下左右边界坐标
* 计算方式:
* - 左边界 = x坐标
* - 右边界 = x + width
* - 上边界 = y坐标
* - 下边界 = y + height
*/
export const getRectSides = (box: NodeRect): RectSides => {
const { x: left, y: top, width, height } = box;
const right = left + width;
const bottom = top + height;
return { top, right, bottom, left };
};
/**
* 根据边界信息生成矩形的四个顶点
* @param sides 矩形的上下左右边界坐标
* @returns 返回四个顶点的坐标信息
* 顶点顺序: 左上 -> 右上 -> 右下 -> 左下
*/
export const getRectVerticesFromSides = ({
top,
right,
bottom,
left,
}: RectSides): ControlPoint[] => {
return [
{ id: uuid(), x: left, y: top }, // 左上角顶点
{ id: uuid(), x: right, y: top }, // 右上角顶点
{ id: uuid(), x: right, y: bottom }, // 右下角顶点
{ id: uuid(), x: left, y: bottom }, // 左下角顶点
];
};
/**
* 获取矩形的四个顶点坐标
* @param box 矩形的位置和尺寸信息
* @returns 返回矩形四个顶点的坐标
* 实现流程:
* 1. 先计算矩形的边界
* 2. 根据边界生成顶点
*/
export const getRectVertices = (box: NodeRect) => {
const sides = getRectSides(box);
return getRectVerticesFromSides(sides);
};
/**
* 合并多个矩形区域,返回一个能包含所有输入矩形的最小矩形
* @param boxes 需要合并的矩形数组,每个矩形包含 x,y 坐标和宽高信息
* @returns 合并后的最小包围矩形
*
* 实现原理:
* 1. 找出所有矩形中最左边的 x 坐标(left)和最右边的 x 坐标(right)
* 2. 找出所有矩形中最上边的 y 坐标(top)和最下边的 y 坐标(bottom)
* 3. 用这四个边界值构造出新的矩形
*/
export const mergeRects = (...boxes: NodeRect[]): NodeRect => {
// 计算所有矩形的最左边界
const left = Math.min(
...boxes.reduce((pre, e) => [...pre, e.x, e.x + e.width], [] as number[])
);
// 计算所有矩形的最右边界
const right = Math.max(
...boxes.reduce((pre, e) => [...pre, e.x, e.x + e.width], [] as number[])
);
// 计算所有矩形的最上边界
const top = Math.min(
...boxes.reduce((pre, e) => [...pre, e.y, e.y + e.height], [] as number[])
);
// 计算所有矩形的最下边界
const bottom = Math.max(
...boxes.reduce((pre, e) => [...pre, e.y, e.y + e.height], [] as number[])
);
// 返回能包含所有输入矩形的最小矩形
return {
x: left, // 左上角 x 坐标
y: top, // 左上角 y 坐标
width: right - left, // 宽度 = 最右边界 - 最左边界
height: bottom - top, // 高度 = 最下边界 - 最上边界
};
};
/**
* 根据给定的位置和偏移量计算控制点坐标
* @param box - 起始位置信息，包含x、y坐标和位置类型(上下左右)
* @param offset - 偏移距离
* @returns 返回计算后的控制点对象，包含唯一id和新的x、y坐标
*/
export const getOffsetPoint = (
box: HandlePosition,
offset: number
): ControlPoint => {
// 根据不同的位置类型计算偏移后的坐标
switch (box.position) {
case Position.Top: // 顶部位置,y坐标向上偏移
return {
id: uuid(),
x: box.x,
y: box.y - offset,
};
case Position.Bottom: // 底部位置,y坐标向下偏移
return { id: uuid(), x: box.x, y: box.y + offset };
case Position.Left: // 左侧位置,x坐标向左偏移
return { id: uuid(), x: box.x - offset, y: box.y };
case Position.Right: // 右侧位置,x坐标向右偏移
return { id: uuid(), x: box.x + offset, y: box.y };
}
};
/**
* 判断一个点是否在线段上
* @param p - 待判断的点
* @param p1 - 线段起点
* @param p2 - 线段终点
* @returns 如果点在线段上返回true,否则返回false
*
* 判断逻辑:
* 1. 点必须在线段所在的直线上(x坐标相等或y坐标相等)
* 2. 点的坐标必须在线段两端点坐标范围内
*/
export const isInLine = (
p: ControlPoint,
p1: ControlPoint,
p2: ControlPoint
) => {
// 获取x坐标的范围区间[min, max]
const xPoints = p1.x < p2.x ? [p1.x, p2.x] : [p2.x, p1.x];
// 获取y坐标的范围区间[min, max]
const yPoints = p1.y < p2.y ? [p1.y, p2.y] : [p2.y, p1.y];
return (
// 垂直线段:三点x坐标相等,且待判断点的y坐标在范围内
(p1.x === p.x && p.x === p2.x && p.y >= yPoints[0] && p.y <= yPoints[1]) ||
// 水平线段:三点y坐标相等,且待判断点的x坐标在范围内
(p1.y === p.y && p.y === p2.y && p.x >= xPoints[0] && p.x <= xPoints[1])
);
};
/**
* 判断一个点是否在直线上(不考虑线段端点限制)
* @param p - 待判断的点
* @param p1 - 直线上的点1
* @param p2 - 直线上的点2
* @returns 如果点在直线上返回true,否则返回false
*
* 判断逻辑:
* 仅判断点是否与直线上的两点共线(x坐标相等或y坐标相等)
*/
export const isOnLine = (
p: ControlPoint,
p1: ControlPoint,
p2: ControlPoint
) => {
return (p1.x === p.x && p.x === p2.x) || (p1.y === p.y && p.y === p2.y);
};
export interface OptimizePointsParams {
edgePoints: ControlPoint[];
source: HandlePosition;
target: HandlePosition;
sourceOffset: ControlPoint;
targetOffset: ControlPoint;
}
/**
* 优化边的控制点
*
* 主要功能:
* 1. 合并坐标相近的点
* 2. 删除重复的坐标点
* 3. 修正起点和终点的位置
*
* @param p 包含边的起点、终点、偏移点和中间控制点等信息的参数对象
* @returns 优化后的控制点信息,包含起点、终点、起点偏移、终点偏移和中间控制点
*/
export const optimizeInputPoints = (p: OptimizePointsParams) => {
// 合并坐标相近的点,将所有点放入一个数组进行处理
let edgePoints = mergeClosePoints([
p.source,
p.sourceOffset,
...p.edgePoints,
p.targetOffset,
p.target,
]);
// 从合并后的点中提取起点和终点
const source = edgePoints.shift()!;
const target = edgePoints.pop()!;
const sourceOffset = edgePoints[0];
const targetOffset = edgePoints[edgePoints.length - 1];
// 根据起点和终点的位置类型修正其坐标
// 如果是水平方向,则保持x坐标不变;否则保持y坐标不变
if (isHorizontalFromPosition(p.source.position)) {
source.x = p.source.x;
} else {
source.y = p.source.y;
}
if (isHorizontalFromPosition(p.target.position)) {
target.x = p.target.x;
} else {
target.y = p.target.y;
}
// 移除重复的坐标点,并为每个点分配唯一ID
edgePoints = removeRepeatPoints(edgePoints).map((p, idx) => ({
...p,
id: `${idx + 1}`,
}));
return { source, target, sourceOffset, targetOffset, edgePoints };
};
/**
* 简化边的控制点
*
* 主要功能:
* 1. 确保直线上只保留两个端点
* 2. 移除位于直线内部的控制点
*
* 实现原理:
* - 遍历所有中间点
* - 判断每个点是否在其相邻两点形成的直线上
* - 如果在直线上则移除该点
*
* @param points 原始控制点数组
* @returns 简化后的控制点数组
*/
export function reducePoints(points: ControlPoint[]): ControlPoint[] {
const optimizedPoints = [points[0]];
// 遍历除首尾点外的所有点
for (let i = 1; i < points.length - 1; i++) {
// 判断当前点是否在前后两点形成的直线上
const inSegment = isInLine(points[i], points[i - 1], points[i + 1]);
// 如果不在直线上,则保留该点
if (!inSegment) {
optimizedPoints.push(points[i]);
}
}
optimizedPoints.push(points[points.length - 1]);
return optimizedPoints;
}
/**
* 坐标点处理工具函数集合
* 主要用于图形边缘控制点的坐标处理,包括合并、去重等操作
*/
/**
* 合并临近坐标点,同时将坐标值取整
* @param points 控制点数组
* @param threshold 合并阈值,默认为4个像素
* @returns 处理后的控制点数组
*
* 实现原理:
* 1. 分别记录x和y轴上的所有坐标值
* 2. 对每个新坐标,在阈值范围内查找已存在的相近值
* 3. 如果找到相近值则使用已存在值,否则添加新值
*/
export function mergeClosePoints(
points: ControlPoint[],
threshold = 4
): ControlPoint[] {
// 存储已处理的离散坐标值
const positions = { x: [] as number[], y: [] as number[] };
/**
* 查找或添加坐标值
* @param axis 坐标轴('x'|'y')
* @param v 待处理的坐标值
* @returns 最终使用的坐标值
*/
const findPosition = (axis: "x" | "y", v: number) => {
// 向下取整,确保坐标为整数
v = Math.floor(v);
const ps = positions[axis];
// 在阈值范围内查找已存在的相近值
let p = ps.find((e) => Math.abs(v - e) < threshold);
// 如果没找到相近值,则添加新值
if (p == null) {
p = v;
positions[axis].push(v);
}
return p;
};
// 处理每个控制点的坐标
const finalPoints = points.map((point) => {
return {
...point,
x: findPosition("x", point.x),
y: findPosition("y", point.y),
};
});
return finalPoints;
}
/**
* 判断两个控制点是否重合
* @param p1 控制点1
* @param p2 控制点2
* @returns 是否重合
*/
export function isEqualPoint(p1: ControlPoint, p2: ControlPoint) {
return p1.x === p2.x && p1.y === p2.y;
}
/**
* 移除重复的控制点,但保留起点和终点
* @param points 控制点数组
* @returns 去重后的控制点数组
*
* 实现思路:
* 1. 使用Set存储已处理的坐标字符串(格式:"x-y")
* 2. 保留最后一个点(终点)
* 3. 遍历时跳过重复坐标,但保留第一次出现的点
*/
export function removeRepeatPoints(points: ControlPoint[]): ControlPoint[] {
// 先添加终点坐标,确保终点被保留
const lastP = points[points.length - 1];
const uniquePoints = new Set([`${lastP.x}-${lastP.y}`]);
const finalPoints: ControlPoint[] = [];
points.forEach((p, idx) => {
// 处理终点
if (idx === points.length - 1) {
return finalPoints.push(p);
}
// 使用坐标字符串作为唯一标识
const key = `${p.x}-${p.y}`;
if (!uniquePoints.has(key)) {
uniquePoints.add(key);
finalPoints.push(p);
}
});
return finalPoints;
}
/**
* 判断两条线段是否相交
* @param p0 第一条线段的起点
* @param p1 第一条线段的终点
* @param p2 第二条线段的起点
* @param p3 第二条线段的终点
* @returns 如果两线段相交返回true,否则返回false
*
* 实现原理:
* 1. 使用向量叉积判断两线段是否平行
* 2. 使用参数方程求解交点参数s和t
* 3. 判断参数是否在[0,1]区间内来确定是否相交
*/
const isSegmentsIntersected = (
p0: ControlPoint,
p1: ControlPoint,
p2: ControlPoint,
p3: ControlPoint
): boolean => {
// 计算两条线段的方向向量
const s1x = p1.x - p0.x;
const s1y = p1.y - p0.y;
const s2x = p3.x - p2.x;
const s2y = p3.y - p2.y;
// 使用向量叉积判断两线段是否平行
if (s1x * s2y - s1y * s2x === 0) {
// 平行线段必不相交
return false;
}
// 求解参数方程,获取交点参数s和t
const denominator = -s2x * s1y + s1x * s2y;
const s = (s1y * (p2.x - p0.x) - s1x * (p2.y - p0.y)) / denominator;
const t = (s2x * (p0.y - p2.y) - s2y * (p0.x - p2.x)) / denominator;
// 当且仅当s和t都在[0,1]区间内时,两线段相交
return s >= 0 && s <= 1 && t >= 0 && t <= 1;
};
/**
* 判断线段是否与矩形相交
* @param p1 线段起点
* @param p2 线段终点
* @param box 矩形区域
* @returns 如果线段与矩形有交点返回true,否则返回false
*
* 实现思路:
* 1. 首先处理特殊情况:矩形退化为点时必不相交
* 2. 将矩形分解为四条边
* 3. 判断线段是否与任意一条矩形边相交
* 4. 只要与任意一边相交,则与矩形相交
*/
export const isSegmentCrossingRect = (
p1: ControlPoint,
p2: ControlPoint,
box: NodeRect
): boolean => {
// 处理特殊情况:矩形退化为点
if (box.width === 0 && box.height === 0) {
return false;
}
// 获取矩形的四个顶点
const [topLeft, topRight, bottomRight, bottomLeft] = getRectVertices(box);
// 判断线段是否与矩形的任意一条边相交
return (
isSegmentsIntersected(p1, p2, topLeft, topRight) || // 上边
isSegmentsIntersected(p1, p2, topRight, bottomRight) || // 右边
isSegmentsIntersected(p1, p2, bottomRight, bottomLeft) || // 下边
isSegmentsIntersected(p1, p2, bottomLeft, topLeft) // 左边
);
};

200
apps/web/src/components/common/editor/graph/layout/edge/style.ts
View File

@ -1,200 +0,0 @@
import { deepClone, lastOf } from "@/utils/base";
import { Position, getBezierPath } from "reactflow";
import { getBasePath } from ".";
import {
kBaseMarkerColor,
kBaseMarkerColors,
kNoMarkerColor,
kYesMarkerColor,
} from "../../components/Edges/Marker";
import { isEqual } from "../../utils/diff";
import { EdgeLayout, ReactFlowEdgeWithData } from "../../data/types";
import { kReactFlow } from "../../states/reactflow";
import { getPathWithRoundCorners } from "./edge";
interface EdgeStyle {
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;
}): 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" };
};
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;
}
export function layoutEdge({
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!;
}
function _layoutEdge({
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,
},
};
}
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,
});
}

124
apps/web/src/components/common/editor/graph/layout/index.ts
View File

@ -1,124 +0,0 @@
import { Node, Edge } from "@xyflow/react";
interface LayoutOptions {
nodes: Node[];
edges: Edge[];
levelSeparation?: number;
nodeSeparation?: number;
}
interface NodeWithLayout extends Node {
width?: number;
height?: number;
children?: NodeWithLayout[];
parent?: NodeWithLayout;
subtreeHeight?: number;
isRight?: boolean;
}
export function getMindMapLayout(options: LayoutOptions) {
const {
nodes,
edges,
levelSeparation = 200,
nodeSeparation = 60
} = options;
// 构建树形结构
const nodeMap = new Map<string, NodeWithLayout>();
nodes.forEach(node => {
nodeMap.set(node.id, { ...node, children: [], width: 150, height: 40 });
});
let rootNode: NodeWithLayout | undefined;
edges.forEach(edge => {
const source = nodeMap.get(edge.source);
const target = nodeMap.get(edge.target);
if (source && target) {
source.children?.push(target);
target.parent = source;
}
});
// 找到根节点
rootNode = Array.from(nodeMap.values()).find(node => !node.parent);
if (!rootNode) return { nodes, edges };
// 分配节点到左右两侧
function assignSides(node: NodeWithLayout, isRight: boolean = true) {
if (!node.children?.length) return;
const len = node.children.length;
const midIndex = Math.floor(len / 2);
// 如果是根节点，将子节点分为左右两部分
if (!node.parent) {
for (let i = 0; i < len; i++) {
const child = node.children[i];
assignSides(child, i < midIndex);
child.isRight = i < midIndex;
}
}
// 如果不是根节点，所有子节点继承父节点的方向
else {
node.children.forEach(child => {
assignSides(child, isRight);
child.isRight = isRight;
});
}
}
// 计算子树高度
function calculateSubtreeHeight(node: NodeWithLayout): number {
if (!node.children?.length) {
node.subtreeHeight = node.height || 40;
return node.subtreeHeight;
}
const childrenHeight = node.children.reduce((sum, child) => {
return sum + calculateSubtreeHeight(child);
}, 0);
const totalGaps = (node.children.length - 1) * nodeSeparation;
node.subtreeHeight = Math.max(node.height || 40, childrenHeight + totalGaps);
return node.subtreeHeight;
}
// 布局计算
function calculateLayout(node: NodeWithLayout, x: number, y: number) {
node.position = { x, y };
if (!node.children?.length) return;
let currentY = y - (node.subtreeHeight || 0) / 2;
node.children.forEach(child => {
const direction = child.isRight ? 1 : -1;
const childX = x + (levelSeparation * direction);
const childY = currentY + (child.subtreeHeight || 0) / 2;
calculateLayout(child, childX, childY);
currentY += (child.subtreeHeight || 0) + nodeSeparation;
});
}
// 执行布局流程
if (rootNode) {
// 1. 分配节点到左右两侧
assignSides(rootNode);
// 2. 计算子树高度
calculateSubtreeHeight(rootNode);
// 3. 执行布局计算
calculateLayout(rootNode, 0, 0);
}
// 转换回原始格式
const layoutedNodes = Array.from(nodeMap.values()).map(node => ({
...node,
position: node.position,
}));
return {
nodes: layoutedNodes,
edges,
};
}

148
apps/web/src/components/common/editor/graph/layout/metadata.ts
View File

@ -1,148 +0,0 @@
import { MarkerType, Position, useInternalNode, Node, Edge } from "@xyflow/react";
import { LayoutDirection, LayoutVisibility } from "./node";
/**
* 获取流程图中的根节点
* @param nodes - 所有节点数组
* @param edges - 所有边的数组
* @returns 根节点数组（没有入边的节点）
*/
export const getRootNodes = (nodes: Node[], edges: Edge[]): Node[] => {
// 创建一个Set来存储所有有入边的节点ID
const nodesWithIncoming = new Set(
edges.map((edge) => edge.target)
);
// 过滤出没有入边的节点
const rootNodes = nodes.filter(
(node) => !nodesWithIncoming.has(node.id)
);
return rootNodes;
};
/**
* 获取节点尺寸信息的工具函数
* @param node 需要获取尺寸的节点对象
* @param defaultSize 默认尺寸配置,包含默认宽度(150px)和高度(36px)
* @returns 返回节点的尺寸信息对象,包含:
* - hasDimension: 是否已设置实际尺寸
* - width: 节点实际宽度
* - height: 节点实际高度
* - widthWithDefault: 实际宽度或默认宽度
* - heightWithDefault: 实际高度或默认高度
*/
export const getNodeSize = (
node: Node,
defaultSize = { width: 150, height: 36 }
) => {
// 获取节点的实际宽高
const nodeWith = node?.width;
const nodeHeight = node?.height;
// 检查节点是否同时设置了宽度和高度
const hasDimension = [nodeWith, nodeHeight].every((e) => e != null);
// 返回包含完整尺寸信息的对象
// 使用空值合并运算符(??)在实际尺寸未设置时使用默认值
return {
hasDimension,
width: nodeWith,
height: nodeHeight,
widthWithDefault: nodeWith ?? defaultSize.width,
heightWithDefault: nodeHeight ?? defaultSize.height,
};
};
export type IFixPosition = (pros: {
x: number;
y: number;
width: number;
height: number;
}) => {
x: number;
y: number;
};
/**
* 节点布局计算函数
* @description 根据给定的节点信息和布局参数,计算节点的最终布局属性
* @param props 布局参数对象
* @param props.node 需要布局的节点对象
* @param props.position 节点的初始位置坐标
* @param props.direction 布局方向,'horizontal'表示水平布局,'vertical'表示垂直布局
* @param props.visibility 节点可见性,'visible'表示可见,其他值表示隐藏
* @param props.fixPosition 可选的位置修正函数,用于调整最终位置
* @returns 返回计算好布局属性的节点对象
*/
export const getNodeLayouted = (props: {
node: Node;
position: { x: number; y: number };
direction: LayoutDirection;
visibility: LayoutVisibility;
fixPosition?: IFixPosition;
}) => {
// 解构布局参数,设置位置修正函数的默认值
const {
node,
position,
direction,
visibility,
fixPosition = (p) => ({ x: p.x, y: p.y }),
} = props;
// 计算节点的显示状态和布局方向
const hidden = visibility !== "visible";
const isHorizontal = direction === "horizontal";
// 获取节点尺寸信息
const { width, height, widthWithDefault, heightWithDefault } =
getNodeSize(node);
// 根据布局方向设置节点的连接点位置
node.targetPosition = isHorizontal ? Position.Left : Position.Top;
node.sourcePosition = isHorizontal ? Position.Right : Position.Bottom;
// 返回带有完整布局属性的节点对象
return {
...node,
width,
height,
hidden,
position: fixPosition({
...position,
width: widthWithDefault,
height: heightWithDefault,
}),
style: {
...node.style,
opacity: hidden ? 0 : 1,
},
};
};
/**
* 边布局计算函数
* @description 根据给定的边信息和可见性参数,计算边的最终布局属性
* @param props 布局参数对象
* @param props.edge 需要布局的边对象
* @param props.visibility 边的可见性,'visible'表示可见,其他值表示隐藏
* @returns 返回计算好布局属性的边对象
*/
export const getEdgeLayouted = (props: {
edge: Edge;
visibility: LayoutVisibility;
}) => {
const { edge, visibility } = props;
const hidden = visibility !== "visible";
// 返回带有完整布局属性的边对象
return {
...edge,
hidden,
markerEnd: {
type: MarkerType.ArrowClosed, // 设置箭头样式为闭合箭头
},
style: {
...edge.style,
opacity: hidden ? 0 : 1,
},
};
};

121
apps/web/src/components/common/editor/graph/layout/node/algorithms/d3-dag.ts
View File

@ -1,121 +0,0 @@
import { graphStratify, sugiyama } from "d3-dag";
import { getIncomers, type Node } from "@xyflow/react";
import { getEdgeLayouted, getNodeLayouted, getNodeSize } from "../../metadata";
import { LayoutAlgorithm, LayoutAlgorithmProps } from "..";
type NodeWithPosition = Node & { x: number; y: number };
// Since d3-dag layout algorithm does not support multiple root nodes,
// we attach the sub-workflows to the global rootNode.
const rootNode: NodeWithPosition = {
id: "#root",
x: 0,
y: 0,
position: { x: 0, y: 0 },
data: {} as any,
};
const algorithms = {
"d3-dag": "d3-dag",
"ds-dag(s)": "ds-dag(s)",
};
export type D3DAGLayoutAlgorithms = "d3-dag" | "ds-dag(s)";
export const layoutD3DAG = async (
props: LayoutAlgorithmProps & { algorithm?: D3DAGLayoutAlgorithms }
) => {
const {
nodes,
edges,
direction,
visibility,
spacing,
algorithm = "d3-dag",
} = props;
const isHorizontal = direction === "horizontal";
const initialNodes = [] as NodeWithPosition[];
let maxNodeWidth = 0;
let maxNodeHeight = 0;
for (const node of nodes) {
const { widthWithDefault, heightWithDefault } = getNodeSize(node);
initialNodes.push({
...node,
...node.position,
width: widthWithDefault,
height: heightWithDefault,
});
maxNodeWidth = Math.max(maxNodeWidth, widthWithDefault);
maxNodeHeight = Math.max(maxNodeHeight, heightWithDefault);
}
// Since d3-dag does not support horizontal layout,
// we swap the width and height of nodes and interchange x and y mappings based on the layout direction.
const nodeSize: any = isHorizontal
? [maxNodeHeight + spacing.y, maxNodeWidth + spacing.x]
: [maxNodeWidth + spacing.x, maxNodeHeight + spacing.y];
const getParentIds = (node: Node) => {
if (node.id === rootNode.id) {
return undefined;
}
// Node without input is the root node of sub-workflow, and we should connect it to the rootNode
const incomers = getIncomers(node, nodes, edges);
if (incomers.length < 1) {
return [rootNode.id];
}
return algorithm === "d3-dag"
? [incomers[0]?.id]
: incomers.map((e) => e.id);
};
const stratify = graphStratify();
const dag = stratify(
[rootNode, ...initialNodes].map((node) => {
return {
id: node.id,
parentIds: getParentIds(node),
};
})
);
const layout = sugiyama().nodeSize(nodeSize);
layout(dag);
const layoutNodes = new Map<string, any>();
for (const node of dag.nodes()) {
layoutNodes.set(node.data.id, node);
}
return {
nodes: nodes.map((node) => {
const { x, y } = layoutNodes.get(node.id);
// Interchange x and y mappings based on the layout direction.
const position = isHorizontal ? { x: y, y: x } : { x, y };
return getNodeLayouted({
node,
position,
direction,
visibility,
fixPosition: ({ x, y, width, height }) => {
// This algorithm uses the center coordinate of the node as the reference point,
// which needs adjustment for ReactFlow's topLeft coordinate system.
return {
x: x - width / 2,
y: y - height / 2,
};
},
});
}),
edges: edges.map((edge) => getEdgeLayouted({ edge, visibility })),
};
};
export const kD3DAGAlgorithms: Record<string, LayoutAlgorithm> = Object.keys(
algorithms
).reduce((pre, algorithm) => {
pre[algorithm] = (props: any) => {
return layoutD3DAG({ ...props, algorithm });
};
return pre;
}, {} as any);

89
apps/web/src/components/common/editor/graph/layout/node/algorithms/d3-hierarchy.ts
View File

@ -1,89 +0,0 @@
// Based on: https://github.com/flanksource/flanksource-ui/blob/75b35591d3bbc7d446fa326d0ca7536790f38d88/src/ui/Graphs/Layouts/algorithms/d3-hierarchy.ts
import { stratify, tree, type HierarchyPointNode } from "d3-hierarchy";
import {getIncomers, Node} from "@xyflow/react"
import { LayoutAlgorithm } from "..";
import { getEdgeLayouted, getNodeLayouted, getNodeSize } from "../../metadata";
type NodeWithPosition = Node & { x: number; y: number };
const layout = tree<NodeWithPosition>().separation(() => 1);
// Since d3-hierarchy layout algorithm does not support multiple root nodes,
// we attach the sub-workflows to the global rootNode.
const rootNode: NodeWithPosition = {
id: "#root",
x: 0,
y: 0,
position: { x: 0, y: 0 },
data: {} as any,
};
export const layoutD3Hierarchy: LayoutAlgorithm = async (props) => {
const { nodes, edges, direction, visibility, spacing } = props;
const isHorizontal = direction === "horizontal";
const initialNodes = [] as NodeWithPosition[];
let maxNodeWidth = 0;
let maxNodeHeight = 0;
for (const node of nodes) {
const { widthWithDefault, heightWithDefault } = getNodeSize(node);
initialNodes.push({
...node,
...node.position,
width: widthWithDefault,
height: heightWithDefault,
});
maxNodeWidth = Math.max(maxNodeWidth, widthWithDefault);
maxNodeHeight = Math.max(maxNodeHeight, heightWithDefault);
}
// Since d3-hierarchy does not support horizontal layout,
// we swap the width and height of nodes and interchange x and y mappings based on the layout direction.
const nodeSize: [number, number] = isHorizontal
? [maxNodeHeight + spacing.y, maxNodeWidth + spacing.x]
: [maxNodeWidth + spacing.x, maxNodeHeight + spacing.y];
layout.nodeSize(nodeSize);
const getParentId = (node: Node) => {
if (node.id === rootNode.id) {
return undefined;
}
// Node without input is the root node of sub-workflow, and we should connect it to the rootNode
const incomers = getIncomers(node, nodes, edges);
return incomers[0]?.id || rootNode.id;
};
const hierarchy = stratify<NodeWithPosition>()
.id((d) => d.id)
.parentId(getParentId)([rootNode, ...initialNodes]);
const root = layout(hierarchy);
const layoutNodes = new Map<string, HierarchyPointNode<NodeWithPosition>>();
for (const node of root) {
layoutNodes.set(node.id!, node);
}
return {
nodes: nodes.map((node) => {
const { x, y } = layoutNodes.get(node.id)!;
// Interchange x and y mappings based on the layout direction.
const position = isHorizontal ? { x: y, y: x } : { x, y };
return getNodeLayouted({
node,
position,
direction,
visibility,
fixPosition: ({ x, y, width, height }) => {
// This algorithm uses the center coordinate of the node as the reference point,
// which needs adjustment for ReactFlow's topLeft coordinate system.
return {
x: x - width / 2,
y: y - height / 2,
};
},
});
}),
edges: edges.map((edge) => getEdgeLayouted({ edge, visibility })),
};
};

122
apps/web/src/components/common/editor/graph/layout/node/algorithms/dagre-tree.ts
View File

@ -1,122 +0,0 @@
import dagre from "@dagrejs/dagre";
import { LayoutAlgorithm } from "..";
import { getIncomers, Node } from "@xyflow/react";
import { getEdgeLayouted, getNodeLayouted, getNodeSize } from "../../metadata";
import { randomInt } from "../../../utils/base";
// 布局配置常量
const LAYOUT_CONFIG = {
VIRTUAL_ROOT_ID: '#root',
VIRTUAL_NODE_SIZE: 1,
RANKER: 'tight-tree',
} as const;
// 创建并配置 dagre 图实例
const createDagreGraph = () => {
const graph = new dagre.graphlib.Graph();
graph.setDefaultEdgeLabel(() => ({}));
return graph;
};
// 获取布局方向配置
const getLayoutConfig = (
direction: 'horizontal' | 'vertical',
spacing: { x: number, y: number },
graph: dagre.graphlib.Graph
) => ({
nodesep: direction === 'horizontal' ? spacing.y : spacing.x,
ranksep: direction === 'horizontal' ? spacing.x : spacing.y,
ranker: LAYOUT_CONFIG.RANKER,
rankdir: direction === 'horizontal' ? 'LR' : 'TB',
});
// 查找根节点
const findRootNodes = (nodes: Node[], edges: any[]): Node[] =>
nodes.filter(node => getIncomers(node, nodes, edges).length < 1);
// 计算节点边界
const calculateBounds = (nodes: Node[], graph: dagre.graphlib.Graph) => {
const bounds = {
minX: Number.POSITIVE_INFINITY,
minY: Number.POSITIVE_INFINITY,
maxX: Number.NEGATIVE_INFINITY,
maxY: Number.NEGATIVE_INFINITY,
};
nodes.forEach(node => {
const pos = graph.node(node.id);
if (pos) {
bounds.minX = Math.min(bounds.minX, pos.x);
bounds.minY = Math.min(bounds.minY, pos.y);
bounds.maxX = Math.max(bounds.maxX, pos.x);
bounds.maxY = Math.max(bounds.maxY, pos.y);
}
});
return bounds;
};
export const layoutDagreTree: LayoutAlgorithm = async ({
nodes,
edges,
direction,
visibility,
spacing
}) => {
const dagreGraph = createDagreGraph();
// 设置图的布局参数
dagreGraph.setGraph(getLayoutConfig(direction, spacing, dagreGraph));
// 添加节点
nodes.forEach((node) => {
const { widthWithDefault, heightWithDefault } = getNodeSize(node);
dagreGraph.setNode(node.id, {
width: widthWithDefault,
height: heightWithDefault,
order: randomInt(0, 10)
});
});
// 添加边
edges.forEach(edge => dagreGraph.setEdge(edge.source, edge.target));
// 处理多个子工作流的情况
const rootNodes = findRootNodes(nodes, edges);
if (rootNodes.length > 1) {
dagreGraph.setNode(LAYOUT_CONFIG.VIRTUAL_ROOT_ID, {
width: LAYOUT_CONFIG.VIRTUAL_NODE_SIZE,
height: LAYOUT_CONFIG.VIRTUAL_NODE_SIZE,
rank: -1 // 确保虚拟根节点排在最前面
});
rootNodes.forEach(node =>
dagreGraph.setEdge(LAYOUT_CONFIG.VIRTUAL_ROOT_ID, node.id)
);
}
// 执行布局
dagre.layout(dagreGraph);
// 移除虚拟根节点
if (rootNodes.length > 1) {
dagreGraph.removeNode(LAYOUT_CONFIG.VIRTUAL_ROOT_ID);
}
// 计算边界并返回布局结果
const bounds = calculateBounds(nodes, dagreGraph);
return {
nodes: nodes.map(node => getNodeLayouted({
node,
position: dagreGraph.node(node.id),
direction,
visibility,
fixPosition: ({ x, y, width, height }) => ({
x: x - width / 2 - bounds.minX,
y: y - height / 2 - bounds.minY,
}),
})),
edges: edges.map(edge => getEdgeLayouted({ edge, visibility })),
};
};

128
apps/web/src/components/common/editor/graph/layout/node/algorithms/elk.ts
View File

@ -1,128 +0,0 @@
import ELK, { ElkNode } from "elkjs/lib/elk.bundled.js";
import { getIncomers,Node } from "@xyflow/react";
import { LayoutAlgorithm, LayoutAlgorithmProps } from "..";
import { getEdgeLayouted, getNodeLayouted, getNodeSize } from "../../metadata";
const algorithms = {
"elk-layered": "layered",
"elk-mr-tree": "mrtree",
};
const elk = new ELK({ algorithms: Object.values(algorithms) });
export type ELKLayoutAlgorithms = "elk-layered" | "elk-mr-tree";
export const layoutELK = async (
props: LayoutAlgorithmProps & { algorithm?: ELKLayoutAlgorithms }
) => {
const {
nodes,
edges,
direction,
visibility,
spacing,
algorithm = "elk-mr-tree",
} = props;
const isHorizontal = direction === "horizontal";
const subWorkflowRootNodes: Node[] = [];
const layoutNodes = nodes.map((node) => {
const incomers = getIncomers(node, nodes, edges);
if (incomers.length < 1) {
// Node without input is the root node of sub-workflow
subWorkflowRootNodes.push(node);
}
const { widthWithDefault, heightWithDefault } = getNodeSize(node);
const sourcePorts = node.data.sourceHandles.map((id) => ({
id,
properties: {
side: isHorizontal ? "EAST" : "SOUTH",
},
}));
const targetPorts = node.data.targetHandles.map((id) => ({
id,
properties: {
side: isHorizontal ? "WEST" : "NORTH",
},
}));
return {
id: node.id,
width: widthWithDefault,
height: heightWithDefault,
ports: [...targetPorts, ...sourcePorts],
properties: {
"org.eclipse.elk.portConstraints": "FIXED_ORDER",
},
};
});
const layoutEdges = edges.map((edge) => {
return {
id: edge.id,
sources: [edge.sourceHandle || edge.source],
targets: [edge.targetHandle || edge.target],
};
});
// Connect sub-workflows' root nodes to the rootNode
const rootNode: any = { id: "#root", width: 1, height: 1 };
layoutNodes.push(rootNode);
for (const subWorkflowRootNode of subWorkflowRootNodes) {
layoutEdges.push({
id: `${rootNode.id}-${subWorkflowRootNode.id}`,
sources: [rootNode.id],
targets: [subWorkflowRootNode.id],
});
}
const layouted = await elk
.layout({
id: "@root",
children: layoutNodes,
edges: layoutEdges,
layoutOptions: {
// - https://www.eclipse.org/elk/reference/algorithms.html
"elk.algorithm": algorithms[algorithm],
"elk.direction": isHorizontal ? "RIGHT" : "DOWN",
// - https://www.eclipse.org/elk/reference/options.html
"elk.spacing.nodeNode": isHorizontal
? spacing.y.toString()
: spacing.x.toString(),
"elk.layered.spacing.nodeNodeBetweenLayers": isHorizontal
? spacing.x.toString()
: spacing.y.toString(),
},
})
.catch((e) => {
console.log("❌ ELK layout failed", e);
}) as ElkNode
if (!layouted?.children) {
return;
}
const layoutedNodePositions = layouted.children.reduce((pre, v) => {
pre[v.id] = {
x: v.x ?? 0,
y: v.y ?? 0,
};
return pre;
}, {} as Record<string, { x: number; y: number }>);
return {
nodes: nodes.map((node) => {
const position = layoutedNodePositions[node.id];
return getNodeLayouted({ node, position, direction, visibility });
}),
edges: edges.map((edge) => getEdgeLayouted({ edge, visibility })),
};
};
export const kElkAlgorithms: Record<string, LayoutAlgorithm> = Object.keys(
algorithms
).reduce((pre, algorithm) => {
pre[algorithm] = (props: any) => {
return layoutELK({ ...props, algorithm });
};
return pre;
}, {} as any);

20
apps/web/src/components/common/editor/graph/layout/node/algorithms/origin.ts
View File

@ -1,20 +0,0 @@
import { LayoutAlgorithm } from "..";
import { getEdgeLayouted, getNodeLayouted } from "../../metadata";
/**
* Positions all nodes at the origin (0,0) in the layout.
*/
export const layoutOrigin: LayoutAlgorithm = async (props) => {
const { nodes, edges, direction, visibility } = props;
return {
nodes: nodes.map((node) => {
return getNodeLayouted({
node,
direction,
visibility,
position: { x: 0, y: 0 },
});
}),
edges: edges.map((edge) => getEdgeLayouted({ edge, visibility })),
};
};

149
apps/web/src/components/common/editor/graph/layout/node/index.ts
View File

@ -1,149 +0,0 @@
/**
* 图形布局模块
*
* 该模块提供了一系列用于处理 ReactFlow 图形布局的工具和算法。
* 支持多种布局算法,包括原始布局、树形布局、层次布局等。
* 主要用于自动计算和调整图形中节点和边的位置。
*/
import { ReactFlowGraph } from "../../types";
import { removeEmpty } from "../../utils/base";
import { D3DAGLayoutAlgorithms, kD3DAGAlgorithms } from "./algorithms/d3-dag";
import { layoutD3Hierarchy } from "./algorithms/d3-hierarchy";
import { layoutDagreTree } from "./algorithms/dagre-tree";
import { ELKLayoutAlgorithms, kElkAlgorithms } from "./algorithms/elk";
import { layoutOrigin } from "./algorithms/origin";
/**
* 布局方向类型
* vertical: 垂直布局
* horizontal: 水平布局
*/
export type LayoutDirection = "vertical" | "horizontal";
/**
* 布局可见性类型
* visible: 可见
* hidden: 隐藏
*/
export type LayoutVisibility = "visible" | "hidden";
/**
* 布局间距配置接口
* x: 水平间距
* y: 垂直间距
*/
export interface LayoutSpacing {
x: number;
y: number;
}
/**
* ReactFlow 布局配置接口
* 定义了布局所需的各项参数
*/
export type ReactFlowLayoutConfig = {
algorithm: LayoutAlgorithms; // 使用的布局算法
direction: LayoutDirection; // 布局方向
spacing: LayoutSpacing; // 节点间距
/**
* 布局可见性配置
* 在首次布局时如果节点大小不可用,可能需要隐藏布局
*/
visibility: LayoutVisibility;
/**
* 是否反转源节点手柄顺序
*/
reverseSourceHandles: boolean;
autoCenterRoot: boolean
};
/**
* 布局算法所需的属性类型
* 继承自 ReactFlowGraph 并包含布局配置(除算法外)
*/
export type LayoutAlgorithmProps = ReactFlowGraph &
Omit<ReactFlowLayoutConfig, "algorithm">;
/**
* 布局算法函数类型定义
* 接收布局属性作为参数,返回布局后的图形数据
*/
export type LayoutAlgorithm = (
props: LayoutAlgorithmProps
) => Promise<ReactFlowGraph | undefined>;
/**
* 可用的布局算法映射表
* 包含所有支持的布局算法实现
*/
export const layoutAlgorithms: Record<string, LayoutAlgorithm> = {
origin: layoutOrigin,
"dagre-tree": layoutDagreTree,
"d3-hierarchy": layoutD3Hierarchy,
...kElkAlgorithms,
...kD3DAGAlgorithms,
};
/**
* 默认布局配置
*/
export const defaultLayoutConfig: ReactFlowLayoutConfig = {
algorithm: "dagre-tree", // 默认使用 elk-mr-tree 算法
direction: "horizontal", // 默认垂直布局
visibility: "visible", // 默认可见
spacing: { x: 120, y: 120 }, // 默认间距
reverseSourceHandles: false, // 默认不反转源节点手柄
autoCenterRoot: false
};
/**
* 支持的布局算法类型联合
*/
export type LayoutAlgorithms =
| "origin"
| "dagre-tree"
| "d3-hierarchy"
| ELKLayoutAlgorithms
| D3DAGLayoutAlgorithms;
/**
* ReactFlow 布局类型
* 包含图形数据和可选的布局配置
*/
export type ReactFlowLayout = ReactFlowGraph & Partial<ReactFlowLayoutConfig>;
/**
* 执行 ReactFlow 图形布局的主函数
*
* @param options - 布局选项,包含图形数据和布局配置
* @returns 返回布局后的图形数据
*
* 函数流程:
* 1. 合并默认配置和用户配置
* 2. 获取对应的布局算法
* 3. 执行布局计算
* 4. 如果布局失败,回退到原始布局
*/
export const layoutReactFlow = async (
options: ReactFlowLayout
): Promise<ReactFlowGraph> => {
// 合并配置,移除空值
const config = { ...defaultLayoutConfig, ...removeEmpty(options) };
const { nodes = [], edges = [] } = config;
// 获取并执行布局算法
const layout = layoutAlgorithms[config.algorithm];
let result = await layout({ ...config, nodes, edges });
// 布局失败时回退处理
if (!result) {
result = await layoutReactFlow({
...config,
nodes,
edges,
algorithm: "origin",
});
}
return result!;
};

168
apps/web/src/components/common/editor/graph/nodes/GraphNode.tsx
View File

@ -1,168 +0,0 @@
import { memo, useCallback, useEffect, useRef, useState } from 'react';
import { Handle, Position, NodeProps, Node } from '@xyflow/react';
import useGraphStore from '../store';
import { shallow } from 'zustand/shallow';
import { GraphState } from '../types';
export type GraphNode = Node<{
label: string;
color?: string;
level?: number;
}, 'graph-node'>;
const getLevelStyles = (level: number = 0) => {
const styles = {
0: {
container: 'bg-[#2B4B6F] text-white',
handle: 'bg-[#2B4B6F]',
fontSize: 'text-lg'
},
1: {
container: 'bg-blue-300 text-white',
handle: 'bg-[#3A5F84]',
fontSize: 'text-base'
},
2: {
container: 'bg-gray-100',
handle: 'bg-[#496F96]',
fontSize: 'text-base'
}
};
return styles[level as keyof typeof styles]
};
const baseTextStyles = `
text-center
break-words
whitespace-pre-wrap
`;
const handleStyles = `
w-2.5 h-2.5
border-2 border-white/80
rounded-full
transition-colors
duration-200
opacity-80
hover:opacity-100
`;
const selector = (store: GraphState) => ({
updateNode: store.updateNode,
});
export const GraphNode = memo(({ id, selected, data, isConnectable }: NodeProps<GraphNode>) => {
const { updateNode } = useGraphStore(selector, shallow);
const [isEditing, setIsEditing] = useState(false);
const levelStyles = getLevelStyles(data.level);
const [inputValue, setInputValue] = useState(data.label);
const [isComposing, setIsComposing] = useState(false);
const updateTextareaHeight = useCallback((element: HTMLTextAreaElement) => {
element.style.height = 'auto';
element.style.height = `${element.scrollHeight}px`;
}, []);
const handleChange = useCallback((evt: React.ChangeEvent<HTMLTextAreaElement>) => {
const newValue = evt.target.value;
setInputValue(newValue);
updateNode(id, { label: newValue });
updateTextareaHeight(evt.target);
}, [updateNode, id, updateTextareaHeight]);
const handleKeyDown = useCallback((evt: React.KeyboardEvent<HTMLTextAreaElement>) => {
if (!isEditing) {
if (/^[a-zA-Z0-9]$/.test(evt.key)) {
setIsEditing(true);
setInputValue(evt.key); // 将第一个字符添加到现有内容后
updateNode(id, { label: evt.key });
}
if (evt.key === ' ') {
setIsEditing(true);
setInputValue(data.label); // 将第一个字符添加到现有内容后
updateNode(id, { label: data.label });
}
evt.preventDefault(); // 阻止默认行为
evt.stopPropagation(); // 阻止事件冒泡
} else if (isEditing && evt.key === 'Enter' && !evt.shiftKey && !isComposing) {
setIsEditing(false);
evt.preventDefault();
}
}, [isEditing, isComposing, data.label, id, updateNode]);
const handleDoubleClick = useCallback(() => {
setIsEditing(true);
}, []);
const handleBlur = useCallback(() => setIsEditing(false), []);
// 添加 ref 来获取父元素
const containerRef = useRef<HTMLDivElement>(null);
const textareaRef = useRef<HTMLTextAreaElement | null>(null);
useEffect(() => {
if (isEditing && textareaRef.current) {
updateTextareaHeight(textareaRef.current);
// 聚焦并将光标移到末尾
textareaRef.current.focus();
const length = textareaRef.current.value.length;
textareaRef.current.setSelectionRange(length, length);
}
}, [isEditing, updateTextareaHeight]);
return (
<div
ref={containerRef}
className={`
flex items-center justify-center
rounded-md
max-w-64
${levelStyles.container}
${selected ? 'ring-2 ring-[#3688FF]/30 shadow-lg' : ''}
${isEditing ? 'ring-2 ring-white/50' : ''}
`}
>
<textarea
ref={textareaRef}
defaultValue={data.label}
onChange={(evt) => handleChange(evt as any)}
onBlur={handleBlur}
value={inputValue}
onKeyDown={handleKeyDown}
onCompositionStart={() => setIsComposing(true)}
onCompositionEnd={() => setIsComposing(false)}
className={`
${isEditing ? 'nodrag' : ''}
bg-transparent
focus:outline-none
${baseTextStyles}
${levelStyles.fontSize}
resize-none
overflow-hidden
${!isEditing ? 'cursor-default' : ''}
`}
placeholder={isEditing ? "输入节点内容..." : "双击编辑"}
rows={1}
readOnly={!isEditing}
onDoubleClick={handleDoubleClick}
onInput={(e) => {
const target = e.target as HTMLTextAreaElement;
target.style.height = 'auto';
target.style.height = `${target.scrollHeight}px`;
}}
/>
<Handle
type="target"
position={Position.Left}
isConnectable={isConnectable}
id="target"
className={`${handleStyles} -ml-[6px] ${levelStyles.handle}`}
/>
<Handle
type="source"
position={Position.Right}
isConnectable={isConnectable}
id="source"
className={`${handleStyles} -mr-[6px] ${levelStyles.handle}`}
/>
</div>
);
});
GraphNode.displayName = 'GraphNode';

158
apps/web/src/components/common/editor/graph/store.ts
View File

@ -1,158 +0,0 @@
import { addEdge, applyNodeChanges, applyEdgeChanges, Node, Edge, Connection, NodeChange, EdgeChange } from '@xyflow/react';
import { createWithEqualityFn } from 'zustand/traditional';
import { nanoid } from 'nanoid';
import debounce from 'lodash/debounce';
import { GraphState } from './types';
import { initialEdges, initialNodes } from './data';
const MAX_HISTORY_LENGTH = 100;
const HISTORY_DEBOUNCE_MS = 100;
const useGraphStore = createWithEqualityFn<GraphState>((set, get) => {
return {
past: [],
future: [],
present: {
nodes: initialNodes,
edges: initialEdges,
},
record: (callback: () => void) => {
const currentState = get().present;
console.group('Recording new state');
console.log('Current state:', currentState);
console.log('Past states count:', get().past.length);
console.log('Future states count:', get().future.length);
set(state => {
const newPast = [...state.past.slice(-MAX_HISTORY_LENGTH), currentState];
console.log('New past states count:', newPast.length);
console.groupEnd();
return {
past: newPast,
future: [],
};
});
callback();
},
undo: () => {
const { past, present } = get();
console.group('Undo operation');
console.log('Current state:', present);
console.log('Past states count:', past.length);
if (past.length === 0) {
console.warn('Cannot undo - no past states available');
console.groupEnd();
return;
}
const previous = past[past.length - 1];
const newPast = past.slice(0, past.length - 1);
console.log('Reverting to previous state:', previous);
console.log('New past states count:', newPast.length);
console.log('New future states count:', get().future.length + 1);
console.groupEnd();
set({
past: newPast,
present: previous,
future: [present, ...get().future],
});
},
redo: () => {
const { future, present } = get();
console.group('Redo operation');
console.log('Current state:', present);
console.log('Future states count:', future.length);
if (future.length === 0) {
console.warn('Cannot redo - no future states available');
console.groupEnd();
return;
}
const next = future[0];
const newFuture = future.slice(1);
console.log('Moving to next state:', next);
console.log('New past states count:', get().past.length + 1);
console.log('New future states count:', newFuture.length);
console.groupEnd();
set({
past: [...get().past, present],
present: next,
future: newFuture,
});
},
setNodes: (nodes: Node[]) => {
set(state => ({
present: {
nodes: nodes,
edges: state.present.edges
}
}));
},
setEdges: (edges: Edge[]) => {
set(state => ({
present: {
nodes: state.present.nodes,
edges: edges
}
}));
},
onNodesChange: (changes: NodeChange[]) => {
set(state => ({
present: {
nodes: applyNodeChanges(changes, state.present.nodes),
edges: state.present.edges
}
}))
},
onEdgesChange: (changes: EdgeChange[]) => {
set(state => ({
present: {
nodes: state.present.nodes,
edges: applyEdgeChanges(changes, state.present.edges)
}
}))
},
canUndo: () => get().past.length > 0,
canRedo: () => get().future.length > 0,
updateNode: (nodeId: string, data: any) => {
const newNodes = get().present.nodes.map(node =>
node.id === nodeId ? { ...node, data: { ...node.data, ...data } } : node
);
set({
present: {
nodes: newNodes,
edges: get().present.edges
}
});
},
deleteNode: (nodeId: string) => {
const newNodes = get().present.nodes.filter(node => node.id !== nodeId);
const newEdges = get().present.edges.filter(
edge => edge.source !== nodeId && edge.target !== nodeId
);
},
updateEdge: (edgeId: string, data: any) => {
const newEdges = get().present.edges.map(edge =>
edge.id === edgeId ? { ...edge, data: { ...edge.data, ...data } } : edge
);
},
};
});
export default useGraphStore;

94
apps/web/src/components/common/editor/graph/types.ts
View File

@ -1,94 +0,0 @@
import { Edge, NodeProps, Node, OnConnect, OnEdgesChange, OnNodesChange, Connection, NodeChange, EdgeChange, OnSelectionChangeParams, XYPosition } from "@xyflow/react";
import { GraphEdge } from "./edges/GraphEdge";
import { GraphNode } from "./nodes/GraphNode";
import { ControlPoint } from "./layout/edge/point";
import { ReactFlowLayout, ReactFlowLayoutConfig } from "./layout/node";
// 添加新的类型定义
export type HistoryState = {
nodes: Node[];
edges: Edge[];
type: string; // 记录操作类型
timestamp: number;
};
export type GraphState = {
past: Array<{ nodes: Node[], edges: Edge[] }>;
present: {
nodes: Node[];
edges: Edge[];
};
future: Array<{ nodes: Node[], edges: Edge[] }>;
canUndo: () => boolean;
canRedo: () => boolean;
onNodesChange: (changes: NodeChange[]) => void;
onEdgesChange: (changes: EdgeChange[]) => void;
updateNode: (id: string, data: any) => void;
undo: () => void;
redo: () => void;
setNodes: (nodes: Node[]) => void;
setEdges: (edges: Edge[]) => void;
record: (callback: () => void) => void
};
export const nodeTypes = {
'graph-node': GraphNode
}
export const edgeTypes = {
'graph-edge': GraphEdge
}
export interface ReactFlowGraph {
nodes: Node[]
edges: Edge[]
}
export interface ReactFlowEdgePort {
/**
* Total number of edges in this direction (source or target).
*/
edges: number;
/**
* Number of ports
*/
portCount: number;
/**
* Port's index.
*/
portIndex: number;
/**
* Total number of Edges under the current port.
*/
edgeCount: number;
/**
* Index of the Edge under the current port.
*/
edgeIndex: number;
}
export interface EdgeLayout {
/**
* SVG path for edge rendering
*/
path: string;
/**
* Control points on the edge.
*/
points: ControlPoint[];
labelPosition: XYPosition;
/**
* Current layout dependent variables (re-layout when changed).
*/
deps?: any;
/**
* Potential control points on the edge, for debugging purposes only.
*/
inputPoints: ControlPoint[];
}
export interface ReactFlowEdgeData {
/**
* Data related to the current edge's layout, such as control points.
*/
layout?: EdgeLayout;
sourcePort: ReactFlowEdgePort;
targetPort: ReactFlowEdgePort;
}

144
apps/web/src/components/common/editor/graph/useGraphOperation.ts
View File

@ -1,144 +0,0 @@
import { useCallback, useMemo } from "react";
import { nanoid } from 'nanoid';
import { shallow } from 'zustand/shallow';
import { throttle } from 'lodash';
import { Edge, Node, useReactFlow } from "@xyflow/react";
import { GraphState } from "./types";
import useGraphStore from "./store";
// Store selector
const selector = (store: GraphState) => ({
nodes: store.present.nodes,
edges: store.present.edges,
setNodes: store.setNodes,
setEdges: store.setEdges,
record: store.record
});
// Helper functions
const createNode = (label: string): Node => ({
id: nanoid(6),
type: 'graph-node',
data: { label },
position: { x: 0, y: 0 },
});
const createEdge = (source: string, target: string): Edge => ({
id: nanoid(6),
source,
target,
type: 'graph-edge',
});
export function useGraphOperation() {
const store = useGraphStore(selector, shallow);
const { addEdges, addNodes } = useReactFlow();
const selectedNodes = useMemo(() =>
store.nodes.filter(node => node.selected),
[store.nodes]
);
// Find parent node ID for a given node
const findParentId = useCallback((nodeId: string) => {
const parentEdge = store.edges.find(edge => edge.target === nodeId);
return parentEdge?.source;
}, [store.edges]);
// Update node selection
const updateNodeSelection = useCallback((nodeIds: string[]) => {
return store.nodes.map(node => ({
...node,
selected: nodeIds.includes(node.id)
}));
}, [store.nodes]);
// Create new node and connect it
const createConnectedNode = useCallback((parentId: string, deselectOthers = true) => {
const newNode = createNode(`新节点${store.nodes.length}`);
const newEdge = createEdge(parentId, newNode.id);
store.record(() => {
addNodes({ ...newNode, selected: true });
addEdges(newEdge);
if (deselectOthers) {
store.setNodes(updateNodeSelection([newNode.id]));
}
});
}, [store, addNodes, addEdges, updateNodeSelection]);
// Handle node creation operations
const handleCreateChildNodes = useCallback(() => {
if (selectedNodes.length === 0) return;
throttle(() => {
selectedNodes.forEach(node => {
if (node.id) createConnectedNode(node.id);
});
}, 300)();
}, [selectedNodes, createConnectedNode]);
const handleCreateSiblingNodes = useCallback(() => {
if (selectedNodes.length === 0) return;
throttle(() => {
selectedNodes.forEach(node => {
const parentId = findParentId(node.id) || node.id;
createConnectedNode(parentId);
});
}, 300)();
}, [selectedNodes, findParentId, createConnectedNode]);
const handleDeleteNodes = useCallback(() => {
if (selectedNodes.length === 0) return;
const nodesToDelete = new Set<string>();
// Collect all nodes to delete including children
const collectNodesToDelete = (nodeId: string) => {
nodesToDelete.add(nodeId);
store.edges
.filter(edge => edge.source === nodeId)
.forEach(edge => collectNodesToDelete(edge.target));
};
selectedNodes.forEach(node => collectNodesToDelete(node.id));
store.record(() => {
// Filter out deleted nodes and their edges
const remainingNodes = store.nodes.filter(node => !nodesToDelete.has(node.id));
const remainingEdges = store.edges.filter(edge =>
!nodesToDelete.has(edge.source) && !nodesToDelete.has(edge.target)
);
// Select next node (sibling or parent of first deleted node)
const firstDeletedNode = selectedNodes[0];
const parentId = findParentId(firstDeletedNode.id);
let nextSelectedId: string | undefined;
if (parentId) {
const siblingEdge = store.edges.find(edge =>
edge.source === parentId &&
!nodesToDelete.has(edge.target) &&
edge.target !== firstDeletedNode.id
);
nextSelectedId = siblingEdge?.target || parentId;
}
// Update nodes with new selection and set the remaining nodes
const updatedNodes = remainingNodes.map(node => ({
...node,
selected: node.id === nextSelectedId
}));
store.setNodes(updatedNodes);
store.setEdges(remainingEdges);
});
}, [selectedNodes, store, findParentId]);
return {
handleCreateChildNodes,
handleCreateSiblingNodes,
handleDeleteNodes
};
}

44
apps/web/src/components/common/editor/graph/useKeyboardCtrl.ts
View File

@ -1,44 +0,0 @@
import { useHotkeys } from 'react-hotkeys-hook';
import { shallow } from 'zustand/shallow';
import { useGraphOperation } from './useGraphOperation';
import useGraphStore from './store';
import { GraphState } from './types';
const selector = (store: GraphState) => ({
undo: store.undo,
redo: store.redo
});
export function useKeyboardCtrl() {
const { undo, redo } = useGraphStore(selector, shallow);
const {
handleCreateChildNodes,
handleCreateSiblingNodes,
handleDeleteNodes
} = useGraphOperation();
useHotkeys('tab', (e) => {
e.preventDefault();
handleCreateChildNodes();
}, [handleCreateChildNodes]);
useHotkeys('enter', (e) => {
e.preventDefault();
handleCreateSiblingNodes();
}, [handleCreateSiblingNodes]);
useHotkeys('ctrl+z', (e) => {
e.preventDefault();
undo();
}, [undo]);
useHotkeys('ctrl+y', (e) => {
e.preventDefault();
redo();
}, [redo]);
useHotkeys('delete', (e) => {
e.preventDefault();
handleDeleteNodes();
}, [handleDeleteNodes]);
}

0
apps/web/src/components/common/editor/graph/useUndoRedo.tsx
View File

147
apps/web/src/components/common/editor/graph/utils.ts
View File

@ -1,147 +0,0 @@
import { Position, Node, InternalNode } from "@xyflow/react";
/**
* 定义交点的接口类型
* 用于表示两条线段相交的坐标点
*/
interface IntersectionPoint {
x: number; // 交点的x坐标
y: number; // 交点的y坐标
}
/**
* 定义边缘连接参数的接口类型
* 包含源节点和目标节点的连接位置信息
*/
interface EdgeParams {
sx: number; // 源节点连接点x坐标
sy: number; // 源节点连接点y坐标
tx: number; // 目标节点连接点x坐标
ty: number; // 目标节点连接点y坐标
sourcePos: Position; // 源节点连接位置（上下左右）
targetPos: Position; // 目标节点连接位置（上下左右）
}
/**
* 计算节点之间的交点坐标
*
* 功能说明:
* 该函数用于计算两个节点之间连线与节点边界的精确交点位置。这在绘制流程图等图形时,
* 确保连接线能够准确地从节点边界开始和结束,而不是从节点中心点开始。
*
* 算法原理:
* 1. 首先获取两个节点的位置和尺寸信息
* 2. 计算节点的中心点坐标
* 3. 使用几何算法计算连线与节点矩形边界的交点
* 4. 返回交点的精确坐标
*
* @param intersectionNode - 起始节点,需要计算交点的源节点
* @param targetNode - 目标节点,与源节点相连的终点节点
* @returns {IntersectionPoint} 返回交点坐标 {x, y}
*/
function getNodeIntersection(intersectionNode: InternalNode, targetNode: InternalNode): IntersectionPoint {
// 获取起始节点的宽度和高度
const { width: intersectionNodeWidth, height: intersectionNodeHeight } = intersectionNode.measured;
// 获取两个节点的绝对位置信息
const intersectionNodePosition = intersectionNode.internals.positionAbsolute;
const targetPosition = targetNode.internals.positionAbsolute;
// 计算起始节点的半宽和半高,用于后续的坐标计算
const w = intersectionNodeWidth / 2;
const h = intersectionNodeHeight / 2;
// 计算两个节点的中心点坐标
// (x2,y2)为起始节点的中心点
const x2 = intersectionNodePosition.x + w;
const y2 = intersectionNodePosition.y + h;
// (x1,y1)为目标节点的中心点
const x1 = targetPosition.x + targetNode.measured.width / 2;
const y1 = targetPosition.y + targetNode.measured.height / 2;
// 使用数学公式计算交点坐标
// 这里使用的是参数化方程,将节点边界视为矩形来计算交点
const xx1 = (x1 - x2) / (2 * w) - (y1 - y2) / (2 * h);
const yy1 = (x1 - x2) / (2 * w) + (y1 - y2) / (2 * h);
// 通过标准化确保交点在节点边界上
const a = 1 / (Math.abs(xx1) + Math.abs(yy1));
const xx3 = a * xx1;
const yy3 = a * yy1;
// 计算最终的交点坐标
const x = w * (xx3 + yy3) + x2;
const y = h * (-xx3 + yy3) + y2;
return { x, y };
}
/**
* 确定边缘连接点的位置（上下左右）
*
* 功能说明:
* 根据节点和交点的位置关系,计算边缘线应该连接到节点的哪个位置(上/下/左/右)
*
* 实现原理:
* 1. 获取节点的绝对定位信息和尺寸信息
* 2. 将节点四条边界划分为不同区域
* 3. 通过比较交点坐标与边界位置,确定最合适的连接点
*
* @param node - 需要确定连接位置的节点对象
* 包含节点的位置信息(x,y)和尺寸信息(width,height)
* @param intersectionPoint - 交点坐标对象
* 包含交点的x,y坐标值
* @returns Position - 返回枚举值,表示连接位置(Top/Right/Bottom/Left)
*/
function getEdgePosition(node: InternalNode, intersectionPoint: IntersectionPoint): Position {
// 合并节点的绝对定位信息,确保获取准确的节点位置
const n = { ...node.internals.positionAbsolute, ...node };
// 对坐标进行取整,避免浮点数计算误差
const nx = Math.round(n.x); // 节点左边界x坐标
const ny = Math.round(n.y); // 节点上边界y坐标
const px = Math.round(intersectionPoint.x); // 交点x坐标
const py = Math.round(intersectionPoint.y); // 交点y坐标
// 判断逻辑:通过比较交点与节点各边界的位置关系确定连接位置
// 添加1px的容差值,增强判断的容错性
if (px <= nx + 1) {
return Position.Left; // 交点在节点左侧
}
if (px >= nx + n.measured.width - 1) {
return Position.Right; // 交点在节点右侧
}
if (py <= ny + 1) {
return Position.Top; // 交点在节点上方
}
if (py >= n.y + n.measured.height - 1) {
return Position.Bottom; // 交点在节点下方
}
// 若都不满足,默认返回顶部位置作为连接点
return Position.Top;
}
/**
* 计算两个节点之间边缘连接的所有必要参数
* @param source - 源节点
* @param target - 目标节点
* @returns 返回包含边缘连接所需所有参数的对象
*
* 这是主要的导出函数，用于获取创建边缘连接线所需的所有参数
*/
export function getEdgeParams(source: InternalNode, target: InternalNode): EdgeParams {
// 计算源节点和目标节点的交点
const sourceIntersectionPoint = getNodeIntersection(source, target);
const targetIntersectionPoint = getNodeIntersection(target, source);
// 确定连接点在各自节点上的位置
const sourcePos = getEdgePosition(source, sourceIntersectionPoint);
const targetPos = getEdgePosition(target, targetIntersectionPoint);
// 返回所有必要的参数
return {
sx: sourceIntersectionPoint.x,
sy: sourceIntersectionPoint.y,
tx: targetIntersectionPoint.x,
ty: targetIntersectionPoint.y,
sourcePos,
targetPos,
};
}

115
apps/web/src/components/common/editor/graph/utils/base.ts
View File

@ -1,115 +0,0 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
export const nextTick = async (frames = 1) => {
const _nextTick = async (idx: number) => {
return new Promise((resolve) => {
requestAnimationFrame(() => resolve(idx));
});
};
for (let i = 0; i < frames; i++) {
await _nextTick(i);
}
};
export const firstOf = <T = any>(datas?: T[]) =>
datas ? (datas.length < 1 ? undefined : datas[0]) : undefined;
export const lastOf = <T = any>(datas?: T[]) =>
datas ? (datas.length < 1 ? undefined : datas[datas.length - 1]) : undefined;
export const randomInt = (min: number, max?: number) => {
if (!max) {
max = min;
min = 0;
}
return Math.floor(Math.random() * (max - min + 1) + min);
};
export const pickOne = <T = any>(datas: T[]) =>
datas.length < 1 ? undefined : datas[randomInt(datas.length - 1)];
export const range = (start: number, end?: number) => {
if (!end) {
end = start;
start = 0;
}
return Array.from({ length: end - start }, (_, index) => start + index);
};
/**
* clamp(-1,0,1)=0
*/
export function clamp(num: number, min: number, max: number): number {
return num < max ? (num > min ? num : min) : max;
}
export const toSet = <T = any>(datas: T[], byKey?: (e: T) => any) => {
if (byKey) {
const keys: Record<string, boolean> = {};
const newDatas: T[] = [];
datas.forEach((e) => {
const key = jsonEncode({ key: byKey(e) }) as any;
if (!keys[key]) {
newDatas.push(e);
keys[key] = true;
}
});
return newDatas;
}
return Array.from(new Set(datas));
};
export function jsonEncode(obj: any, prettier = false) {
try {
return prettier ? JSON.stringify(obj, undefined, 4) : JSON.stringify(obj);
} catch (error) {
return undefined;
}
}
export function jsonDecode(json: string | undefined) {
if (json == undefined) return undefined;
try {
return JSON.parse(json!);
} catch (error) {
return undefined;
}
}
export function removeEmpty<T = any>(data: T): T {
if (Array.isArray(data)) {
return data.filter((e) => e != undefined) as any;
}
const res = {} as any;
for (const key in data) {
if (data[key] != undefined) {
res[key] = data[key];
}
}
return res;
}
export const deepClone = <T>(obj: T): T => {
if (obj === null || typeof obj !== "object") {
return obj;
}
if (Array.isArray(obj)) {
const copy: any[] = [];
obj.forEach((item, index) => {
copy[index] = deepClone(item);
});
return copy as unknown as T;
}
const copy = {} as T;
for (const key in obj) {
if (Object.prototype.hasOwnProperty.call(obj, key)) {
(copy as any)[key] = deepClone((obj as any)[key]);
}
}
return copy;
};

105
apps/web/src/components/common/editor/graph/utils/diff.ts
View File

@ -1,105 +0,0 @@
// @ts-nocheck
// Source: https://github.com/AsyncBanana/microdiff
interface Difference {
type: "CREATE" | "REMOVE" | "CHANGE";
path: (string | number)[];
value?: any;
}
interface Options {
cyclesFix: boolean;
}
const t = true;
const richTypes = { Date: t, RegExp: t, String: t, Number: t };
export function isEqual(oldObj: any, newObj: any): boolean {
return (
diff(
{
obj: oldObj,
},
{ obj: newObj }
).length < 1
);
}
export const isNotEqual = (oldObj: any, newObj: any) =>
!isEqual(oldObj, newObj);
function diff(
obj: Record<string, any> | any[],
newObj: Record<string, any> | any[],
options: Partial<Options> = { cyclesFix: true },
_stack: Record<string, any>[] = []
): Difference[] {
const diffs: Difference[] = [];
const isObjArray = Array.isArray(obj);
for (const key in obj) {
const objKey = obj[key];
const path = isObjArray ? Number(key) : key;
if (!(key in newObj)) {
diffs.push({
type: "REMOVE",
path: [path],
});
continue;
}
const newObjKey = newObj[key];
const areObjects =
typeof objKey === "object" && typeof newObjKey === "object";
if (
objKey &&
newObjKey &&
areObjects &&
!richTypes[Object.getPrototypeOf(objKey).constructor.name] &&
(options.cyclesFix ? !_stack.includes(objKey) : true)
) {
const nestedDiffs = diff(
objKey,
newObjKey,
options,
options.cyclesFix ? _stack.concat([objKey]) : []
);
// eslint-disable-next-line prefer-spread
diffs.push.apply(
diffs,
nestedDiffs.map((difference) => {
difference.path.unshift(path);
return difference;
})
);
} else if (
objKey !== newObjKey &&
!(
areObjects &&
(Number.isNaN(objKey)
? String(objKey) === String(newObjKey)
: Number(objKey) === Number(newObjKey))
)
) {
diffs.push({
path: [path],
type: "CHANGE",
value: newObjKey,
});
}
}
const isNewObjArray = Array.isArray(newObj);
for (const key in newObj) {
if (!(key in obj)) {
diffs.push({
type: "CREATE",
path: [isNewObjArray ? Number(key) : key],
value: newObj[key],
});
}
}
return diffs;
}

11
apps/web/src/components/common/editor/graph/utils/uuid.ts
View File

@ -1,11 +0,0 @@
export function uuid(): string {
const uuid = new Array(36);
for (let i = 0; i < 36; i++) {
uuid[i] = Math.floor(Math.random() * 16);
}
uuid[14] = 4;
uuid[19] = uuid[19] &= ~(1 << 2);
uuid[19] = uuid[19] |= 1 << 3;
uuid[8] = uuid[13] = uuid[18] = uuid[23] = "-";
return uuid.map((x) => x.toString(16)).join("");
}

2
apps/web/src/components/models/post/detail/PostResources.tsx
View File

@ -15,7 +15,7 @@ export default function PostResources({ post }: { post: PostDto }) {
/\.(png|jpg|jpeg|gif|webp)$/i.test(url);
const sortedResources = post.resources.map(resource => {
const original = `http://${env.SERVER_IP}/uploads/${resource.url}`
const original = `http://${env.UOLOAD_IP}/uploads/${resource.url}`
const isImg = isImage(resource.url)
return {
...resource,

6
apps/web/src/env.ts
View File

@ -2,6 +2,7 @@ export const env: {
APP_NAME: string;
SERVER_IP: string;
VERSION: string;
UOLOAD_IP: string;
} = {
APP_NAME: import.meta.env.PROD
? (window as any).env.VITE_APP_APP_NAME
@ -9,9 +10,12 @@ export const env: {
SERVER_IP: import.meta.env.PROD
? (window as any).env.VITE_APP_SERVER_IP
: import.meta.env.VITE_APP_SERVER_IP,
UOLOAD_IP: import.meta.env.PROD
? (window as any).env.VITE_APP_UOLOAD_IP
: import.meta.env.VITE_APP_UOLOAD_IP,
VERSION: import.meta.env.PROD
? (window as any).env.VITE_APP_VERSION
: import.meta.env.VITE_APP_VERSION,
};
console.log(env)
console.log(env);

2
apps/web/src/hooks/useTusUpload.ts
View File

@ -35,7 +35,7 @@ export function useTusUpload() {
if (uploadIndex === -1 || uploadIndex + 4 >= parts.length) {
throw new Error("Invalid upload URL format");
}
const resUrl = `http://${env.SERVER_IP}/uploads/${parts.slice(uploadIndex + 1, uploadIndex + 6).join("/")}`;
const resUrl = `http://${env.UOLOAD_IP}/uploads/${parts.slice(uploadIndex + 1, uploadIndex + 6).join("/")}`;
return resUrl;
};