(null);
- const [inputValue, setInputValue] = useState(data.label);
-
- const {
- updateNodeLabel,
- selectedNodeId,
- setSelectedNodeId,
- setEditingNodeId,
- editingNodeId
- } = useMindMapStore(useShallow(selector));
- useEffect(() => {
- if (editingNodeId === id) {
- setEditingNodeId(id);
- setInputValue(data.label);
- setTimeout(() => {
- inputRef.current?.focus();
- inputRef.current?.select();
- }, 0);
- } else {
- inputRef.current?.blur()
- }
- }, [editingNodeId])
- const handleDoubleClick = (e: React.MouseEvent) => {
- e.stopPropagation();
- setEditingNodeId(id)
- };
-
- useHotkeys("space", (e) => {
- if (selectedNodeId === id)
- setEditingNodeId(id)
- }, { preventDefault: true });
- const handleClick = (e: React.MouseEvent) => {
- setSelectedNodeId(id);
- };
-
- useClickOutside(nodeRef, () => {
- console.log(selectedNodeId, id)
- if (selectedNodeId === id)
- setSelectedNodeId(null)
- if (editingNodeId === id) {
- setEditingNodeId(null)
- updateNodeLabel(id, inputValue)
- }
- });
-
- return (
-
- setInputValue(e.target.value)}
- className="input"
- readOnly={id !== editingNodeId}
- />
-
-
-
- );
-}
-
-export default MindMapNode;
\ No newline at end of file
diff --git a/packages/ui/src/components/mindmap/edge/index.ts b/packages/ui/src/components/mindmap/edge/index.ts
deleted file mode 100755
index d702aa7..0000000
--- a/packages/ui/src/components/mindmap/edge/index.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import type { Edge, EdgeTypes } from "@xyflow/react";
-
-export const initialEdges = [
- { id: "a->c", source: "a", target: "c", animated: true },
- { id: "b->d", source: "b", target: "d" },
- { id: "c->d", source: "c", target: "d", animated: true },
-] satisfies Edge[];
-
-export const edgeTypes = {
- // Add your custom edge types here!
-} satisfies EdgeTypes;
diff --git a/packages/ui/src/components/mindmap/hooks/useFlowKeyboardControl.ts b/packages/ui/src/components/mindmap/hooks/useFlowKeyboardControl.ts
deleted file mode 100755
index 74835c4..0000000
--- a/packages/ui/src/components/mindmap/hooks/useFlowKeyboardControl.ts
+++ /dev/null
@@ -1,145 +0,0 @@
-import { useCallback } from 'react';
-import { useHotkeys } from 'react-hotkeys-hook';
-import { useStoreApi } from '@xyflow/react';
-import useMindMapStore, { RFState } from '../store';
-import { useShallow } from 'zustand/shallow';
-
-const controlsSelector = (state: RFState) => ({
- selectedNodeId: state.selectedNodeId,
- setSelectedNodeId: state.setSelectedNodeId,
- addChildNode: state.addChildNode,
- addSiblingNode: state.addSiblingNode,
- undo: state.undo,
- redo: state.redo,
-});
-
-export function useFlowKeyboardControls() {
- const {
- selectedNodeId,
- setSelectedNodeId,
- addChildNode,
- addSiblingNode,
- undo,
- redo,
- } = useMindMapStore(useShallow(controlsSelector));
-
- const store = useStoreApi();
-
- const getNextNodeInDirection = useCallback((direction: 'left' | 'right' | 'up' | 'down') => {
- const { nodeLookup, edges } = store.getState();
- if (!selectedNodeId) return null;
-
- const currentNode = nodeLookup.get(selectedNodeId);
- if (!currentNode) return null;
-
- // 构建节点关系图
- const nodeRelations = new Map();
-
- edges.forEach(edge => {
- const source = edge.source;
- const target = edge.target;
-
- if (!nodeRelations.has(source)) {
- nodeRelations.set(source, { parent: null, children: [], siblings: [] });
- }
- if (!nodeRelations.has(target)) {
- nodeRelations.set(target, { parent: null, children: [], siblings: [] });
- }
-
- nodeRelations.get(target)!.parent = source;
- nodeRelations.get(source)!.children.push(target);
- });
-
- // 找出同级节点
- const currentRelation = nodeRelations.get(selectedNodeId);
- if (currentRelation?.parent) {
- const parentRelation = nodeRelations.get(currentRelation.parent);
- if (parentRelation) {
- currentRelation.siblings = parentRelation.children.filter(id => id !== selectedNodeId);
- }
- }
-
- // 根据方向决定下一个节点
- switch (direction) {
- case 'left': {
- // 如果当前节点是子节点，优先选择父节点
- if (currentRelation?.parent) {
- const parentNode = nodeLookup.get(currentRelation.parent);
- if (parentNode && parentNode.position.x < currentNode.position.x) {
- return currentRelation.parent;
- }
- }
- break;
- }
- case 'right': {
- // 如果有子节点，选择第一个子节点
- const children = currentRelation?.children || [];
- if (children.length > 0) {
- return children[0];
- }
- break;
- }
- case 'up': {
- // 在同级节点中找位置靠上的节点
- const siblings = currentRelation?.siblings || [];
- const upperSiblings = siblings
- .map(id => nodeLookup.get(id))
- .filter(node => node && node.position.y < currentNode.position.y)
- .sort((a, b) => b!.position.y - a!.position.y);
-
- if (upperSiblings.length > 0) {
- return upperSiblings[0]!.id;
- }
- break;
- }
- case 'down': {
- // 在同级节点中找位置靠下的节点
- const siblings = currentRelation?.siblings || [];
- const lowerSiblings = siblings
- .map(id => nodeLookup.get(id))
- .filter(node => node && node.position.y > currentNode.position.y)
- .sort((a, b) => a!.position.y - b!.position.y);
-
- if (lowerSiblings.length > 0) {
- return lowerSiblings[0]!.id;
- }
- break;
- }
- }
-
- return null;
- }, [selectedNodeId, store]);
-
- // Tab 键添加子节点
- useHotkeys('tab', (e) => {
- e.preventDefault();
- if (selectedNodeId) addChildNode(selectedNodeId);
- }, { enableOnFormTags: true, preventDefault: true });
-
- // Enter 键添加同级节点
- useHotkeys('enter', (e) => {
- e.preventDefault();
- if (selectedNodeId) addSiblingNode(selectedNodeId);
- }, { enableOnFormTags: true, preventDefault: true });
-
- // 撤销重做
- // useHotkeys('ctrl+z, cmd+z', (e) => {
-
- // undo();
- // }, { enableOnFormTags: false });
-
- // useHotkeys('ctrl+y, cmd+y', (e) => {
-
- // redo();
- // }, { enableOnFormTags: false });
-
- // 方向键导航
- const directions = ['left', 'right', 'up', 'down'] as const;
- directions.forEach(direction => {
- useHotkeys(direction, (e) => {
- e.preventDefault();
- const nextNodeId = getNextNodeInDirection(direction);
- if (nextNodeId) setSelectedNodeId(nextNodeId);
- }, { enableOnFormTags: true });
- });
-}
\ No newline at end of file
diff --git a/packages/ui/src/components/mindmap/index.ts b/packages/ui/src/components/mindmap/index.ts
deleted file mode 100755
index 3505c9b..0000000
--- a/packages/ui/src/components/mindmap/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./MindMap"
\ No newline at end of file
diff --git a/packages/ui/src/components/mindmap/layout.ts b/packages/ui/src/components/mindmap/layout.ts
deleted file mode 100755
index 7b66c09..0000000
--- a/packages/ui/src/components/mindmap/layout.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { Edge, Node } from '@xyflow/react';
-import dagre from 'dagre';
-
-export const getLayoutedElements = (nodes: Node[], edges: Edge[], direction = 'LR') => {
- const dagreGraph = new dagre.graphlib.Graph();
- dagreGraph.setDefaultEdgeLabel(() => ({}));
-
- const nodeWidth = 200;
- const nodeHeight = 50;
-
- dagreGraph.setGraph({
- rankdir: direction,
- nodesep: 80,
- ranksep: 100
- });
-
- // 添加节点
- nodes.forEach((node) => {
- dagreGraph.setNode(node.id, { width: nodeWidth, height: nodeHeight });
- });
-
- // 添加边
- edges.forEach((edge) => {
- dagreGraph.setEdge(edge.source, edge.target);
- });
-
- // 计算布局
- dagre.layout(dagreGraph);
-
- // 获取新的节点位置
- const layoutedNodes = nodes.map((node) => {
- const nodeWithPosition = dagreGraph.node(node.id);
- return {
- ...node,
- position: {
- x: nodeWithPosition.x - nodeWidth / 2,
- y: nodeWithPosition.y - nodeHeight / 2,
- },
- };
- });
-
- return { nodes: layoutedNodes, edges };
-};
\ No newline at end of file
diff --git a/packages/ui/src/components/mindmap/store.ts b/packages/ui/src/components/mindmap/store.ts
deleted file mode 100755
index 26f1242..0000000
--- a/packages/ui/src/components/mindmap/store.ts
+++ /dev/null
@@ -1,234 +0,0 @@
-import {
- Edge,
- EdgeChange,
- Node,
- NodeChange,
- OnNodesChange,
- OnEdgesChange,
- applyNodeChanges,
- applyEdgeChanges,
- XYPosition,
-} from '@xyflow/react';
-import { nanoid } from 'nanoid';
-import { create } from 'zustand';
-import { HistoryData, HistoryState, NodeLayout, NodeRelationType } from './types';
-import { getLayoutedElements } from './layout';
-
-
-const createHistoryState = (initialPresent: HistoryData): HistoryState => ({
- past: [],
- present: initialPresent,
- future: [],
-});
-
-const initialNodes: Node[] = [{
- id: 'root',
- type: 'mindmap',
- data: { label: 'React Flow Mind Map' },
- position: { x: 0, y: 0 },
-}];
-
-export type RFState = {
- nodes: Node[];
- edges: Edge[];
- onNodesChange: OnNodesChange;
- onEdgesChange: OnEdgesChange;
- history: HistoryState;
- addChildNode: (nodeId: string, position?: XYPosition) => void;
- updateNodeLabel: (nodeId: string, label: string) => void
- addSiblingNode: (nodeId: string, position?: XYPosition) => void
- selectedNodeId: string | null;
- setSelectedNodeId: (nodeId: string | null) => void;
- editingNodeId: string | null;
- setEditingNodeId: (nodeId: string | null) => void;
- isEditing: boolean;
- undo: () => void;
- redo: () => void;
- canUndo: boolean;
- canRedo: boolean;
-};
-const useMindMapStore = create((set, get) => {
- const updateHistory = (newState: Partial) => {
- const currentState = get().history.present;
- return {
- past: [...get().history.past, currentState],
- present: { ...currentState, ...newState },
- future: [],
- };
- };
-
- const createNewNode = (label: string = 'New Node'): Node => ({
- id: nanoid(),
- type: 'mindmap',
- data: { label },
- position: { x: 0, y: 0 }
- });
- const addNode = (
- parentId: string,
- relationType: NodeRelationType
- ) => {
- const { nodes, edges, editingNodeId } = get();
- const parentNode = nodes.find(node => node.id === parentId);
- if (!parentNode) return;
- const newNode = createNewNode();
- const newEdge = {
- id: nanoid(),
- source: relationType === 'child' ? parentId : edges.find(e => e.target === parentId)?.source ?? parentId,
- target: newNode.id,
- type: 'smoothstep',
- };
- const newNodes = [...nodes, newNode];
- const newEdges = [...edges, newEdge];
- const { nodes: layoutedNodes, edges: layoutedEdges } = getLayoutedElements(newNodes, newEdges);
- set({
- nodes: layoutedNodes,
- edges: layoutedEdges,
- selectedNodeId: newNode.id,
- history: updateHistory({
- nodes: layoutedNodes,
- edges: layoutedEdges,
- selectedNodeId: newNode.id,
- editingNodeId,
- }),
- });
- };
- return {
- nodes: initialNodes,
- edges: [],
- isEditing: false,
- history: createHistoryState({ nodes: initialNodes, edges: [], selectedNodeId: null, editingNodeId: null }),
- editingNodeId: null,
- setEditingNodeId: (nodeId: string | null) => {
- const { nodes, edges, selectedNodeId } = get();
- set({
- editingNodeId: nodeId,
- isEditing: Boolean(nodeId),
- history: {
- past: [...get().history.past, get().history.present],
- present: {
- nodes,
- edges,
- selectedNodeId,
- editingNodeId: nodeId
- },
- future: [],
- },
- });
- },
- selectedNodeId: null,
- setSelectedNodeId: (nodeId: string | null) => {
- const { nodes, edges, editingNodeId } = get();
- set({
- selectedNodeId: nodeId,
- history: {
- past: [...get().history.past, get().history.present],
- present: { nodes, edges, selectedNodeId: nodeId, editingNodeId },
- future: [],
- },
- });
- },
- updateNodeLabel: (nodeId: string, label: string) => {
- const { nodes, edges, selectedNodeId, editingNodeId } = get();
- const newNodes = nodes.map((node) => {
- if (node.id === nodeId) {
- return { ...node, data: { ...node.data, label } };
- }
- return node;
- });
- set({
- nodes: newNodes,
- edges,
- selectedNodeId,
- history: {
- past: [...get().history.past, get().history.present],
- present: { nodes: newNodes, edges, selectedNodeId, editingNodeId },
- future: [],
- },
- });
- },
- onNodesChange: (changes: NodeChange[]) => {
- console.log('on node change', changes)
- const { nodes, edges, selectedNodeId } = get();
- const newNodes = applyNodeChanges(changes, nodes);
- set({ nodes: newNodes });
- },
- onEdgesChange: (changes: EdgeChange[]) => {
- const { nodes, edges, selectedNodeId } = get();
- const newEdges = applyEdgeChanges(changes, edges);
-
- set({ edges: newEdges });
- },
- addChildNode: (nodeId: string) =>
- addNode(nodeId, 'child'),
- addSiblingNode: (nodeId: string) =>
- addNode(nodeId, 'sibling'),
- undo: () => {
- const { history } = get();
- console.log('[Undo] Starting undo operation');
-
- if (history.past.length === 0) {
- console.log('[Undo] No past states available, undo skipped');
- return;
- }
- const previous = history.past[history.past.length - 1];
- const newPast = history.past.slice(0, -1);
- const newPresent = { ...history.present };
- console.log('[Undo] Previous state:', previous);
- console.log('[Undo] New past length:', newPast.length);
-
- set({
- nodes: previous.nodes,
- edges: previous.edges,
- selectedNodeId: previous.selectedNodeId,
- editingNodeId: previous.editingNodeId,
- history: {
- past: newPast,
- present: previous,
- future: [newPresent, ...history.future],
- },
- });
-
- console.log('[Undo] Operation completed');
- },
-
- redo: () => {
- const { history } = get();
- console.log('[Redo] Starting redo operation');
-
- if (history.future.length === 0) {
- console.log('[Redo] No future states available, redo skipped');
- return;
- }
-
- const next = history.future[0];
- const newFuture = history.future.slice(1);
-
- console.log('[Redo] Next state:', next);
- console.log('[Redo] New future length:', newFuture.length);
-
- set({
- nodes: next.nodes,
- edges: next.edges,
- selectedNodeId: next.selectedNodeId,
- editingNodeId: next.editingNodeId,
- history: {
- past: [...history.past, history.present],
- present: next,
- future: newFuture,
- },
- });
-
- console.log('[Redo] Operation completed');
- },
- get canUndo() {
- return get().history.past.length > 0;
- },
-
- get canRedo() {
- return get().history.future.length > 0;
- },
- }
-});
-
-
-export default useMindMapStore;
\ No newline at end of file
diff --git a/packages/ui/src/components/mindmap/types.ts b/packages/ui/src/components/mindmap/types.ts
deleted file mode 100755
index 72911e2..0000000
--- a/packages/ui/src/components/mindmap/types.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import type { Node, NodeTypes, BuiltInNode, Edge } from "@xyflow/react";
-
-export type MindMapNodeType = Node<
- {
- label: string
- level: number
- isExpanded?: boolean
- metadata?: Record
- }, "mindmap">
-
-export type MindMapEdgeType = Edge<{
- label: string
-}, "mindmap">
-
-export type HistoryState = {
- past: T[];
- present: T;
- future: T[];
-};
-export type HistoryData = {
- nodes: Node[];
- edges: Edge[];
- selectedNodeId: string | null;
- editingNodeId: string | null; // Add this
-};
-export type NodeRelationType = 'child' | 'sibling';
-export type NodeLayout = {
- horizontalSpacing: number;
- verticalSpacing: number;
- nodeWidth: number;
- nodeHeight: number;
-};
diff --git a/packages/ui/src/components/mindmap/utils.ts b/packages/ui/src/components/mindmap/utils.ts
deleted file mode 100755
index e69de29..0000000
diff --git a/packages/ui/src/hooks/useClickOutside.ts b/packages/ui/src/hooks/useClickOutside.ts
deleted file mode 100755
index affd62d..0000000
--- a/packages/ui/src/hooks/useClickOutside.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { useEffect, RefObject } from 'react';
-
-export function useClickOutside(ref: RefObject, handler: () => void) {
- useEffect(() => {
- function handleClickOutside(event: MouseEvent) {
- console.log(event.target)
- if (ref.current && !ref.current.contains(event.target as Node)) {
- handler();
- }
- }
-
- document.addEventListener('mousedown', handleClickOutside);
- return () => document.removeEventListener('mousedown', handleClickOutside);
- }, [ref, handler]);
-}
\ No newline at end of file
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
deleted file mode 100755
index 33ff1f5..0000000
--- a/packages/ui/src/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./components/mindmap"
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
deleted file mode 100755
index f2c2a6d..0000000
--- a/packages/ui/tsconfig.json
+++ /dev/null
@@ -1,43 +0,0 @@
-{
- "compilerOptions": {
- "target": "es2022",
- "module": "esnext",
- "allowJs": true,
- "lib": [
- "DOM",
- "es2022",
- "DOM.Iterable"
- ],
- "declaration": true,
- "declarationMap": true,
- "sourceMap": true,
- "moduleResolution": "node",
- "resolveJsonModule": true,
- "removeComments": true,
- "skipLibCheck": true,
- "strict": true,
- "isolatedModules": true,
- "jsx": "react-jsx",
- "esModuleInterop": true,
- "noUnusedLocals": false,
- "noUnusedParameters": false,
- "noImplicitReturns": false,
- "noFallthroughCasesInSwitch": false,
- "noUncheckedIndexedAccess": false,
- "noImplicitOverride": false,
- "noPropertyAccessFromIndexSignature": false,
- "outDir": "dist",
- "incremental": true,
- "tsBuildInfoFile": "./dist/tsconfig.tsbuildinfo"
- },
- "include": [
- "src"
- ],
- "exclude": [
- "node_modules",
- "dist",
- "**/*.test.ts",
- "**/*.spec.ts",
- "**/__tests__"
- ]
-}
\ No newline at end of file
diff --git a/packages/ui/tsup.config.ts b/packages/ui/tsup.config.ts
deleted file mode 100755
index f21629b..0000000
--- a/packages/ui/tsup.config.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { defineConfig } from 'tsup'
-
-export default defineConfig({
- entry: ['src/index.ts'],
- format: ['esm', 'cjs'],
- dts: true,
- clean: true,
- sourcemap: true,
- minify: true,
- external: ['react', 'react-dom'],
- bundle: true,
- target: "esnext"
-})
\ No newline at end of file
diff --git a/web-dist/index.html b/web-dist/index.html
old mode 100644
new mode 100755
index 73a792f..44e046f
--- a/web-dist/index.html
+++ b/web-dist/index.html
@@ -1,27 +1,26 @@
-
-
-
-
-
- fhmooc
-
-
-
-
-
-
-
+
+
+
+
+
+ $APP_NAME
+
+
+
+
+
+
+
+
+
\ No newline at end of file