vue2-mind-map

import Vue from "vue"; import { MindMap, TreeNode, FlatNode, NodeLike, MindMapAlign, MindMapStyle, MindMapDragOptions, MindMapZoomOptions, DebugOptions } from "@/map/mind-map/entities/MindMap"; declare type LineShapeType = "straight" | "curved" | "zigzag"; declare const _default: import("vue/types/vue").ExtendedVue<Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue<Record<string, any>, Record<string, any>, never, never, any>>, { mindMap: MindMap | null; nodeIdToVueInstanceMap: Map<string, Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue<Record<string, any>, Record<string, any>, never, never, any>>>; debugOptions: DebugOptions | null; }, { /** * 重置思维导图布局并重新渲染 */ rebuild(): void; /** * 清空思维导图实例的所有内容和状态 */ clear(): void; /** * 设置思维导图布局方向 * @param isHorizontal - 是否水平布局 */ setHorizontal(isHorizontal: boolean): void; /** * 放大思维导图 * @param cx - 缩放中心点的 X 坐标 * @param cy - 缩放中心点的 Y 坐标 */ zoomIn(cx?: number | undefined, cy?: number | undefined): void; /** * 缩小思维导图 * @param cx - 缩放中心点的 X 坐标 * @param cy - 缩放中心点的 Y 坐标 */ zoomOut(cx?: number | undefined, cy?: number | undefined): void; /** * 重置思维导图缩放比例 * @param cx - 缩放中心点的 X 坐标 * @param cy - 缩放中心点的 Y 坐标 */ resetZoom(cx?: number | undefined, cy?: number | undefined): void; /** * 设置指定节点的尺寸 * @param nodeId - 要设置尺寸的节点 ID * @param width - 新的宽度 * @param height - 新的高度 * @returns 如果节点找到并成功设置尺寸，则返回 true；否则返回 false */ setNodeSize(nodeId: string, size: { width?: number; height?: number; }): boolean | undefined; /** * 将指定 ID 的节点聚焦到视口中心 * @param nodeId - 要聚焦的节点的 ID * @returns 如果节点找到并成功聚焦，则返回 true；否则返回 false */ focusOnNode(nodeId: string): boolean | undefined; /** * 切换节点的折叠状态 * @param nodeId - 要切换折叠状态的节点 ID * @returns 如果节点找到并成功切换状态，则返回 true；否则返回 false */ toggleNodeCollapse(nodeId: string): boolean | undefined; /** * 设置节点的折叠状态 * @param nodeId - 要设置折叠状态的节点 ID * @param collapsed - 要设置的折叠状态 * @returns 如果节点找到并成功设置状态，则返回 true；否则返回 false */ setNodeCollapsed(nodeId: string, collapsed: boolean): boolean | undefined; /** * 获取节点的折叠状态 * @param nodeId - 要查询的节点 ID * @returns 节点的折叠状态，如果节点不存在则返回 undefined */ getNodeCollapsed(nodeId: string): boolean | undefined; /** * 展开所有节点 * @returns 成功展开的节点数量 */ expandAllNodes(): number; /** * 折叠所有非根节点 * @returns 成功折叠的节点数量 */ collapseAllNodes(): number; /** * 更新指定节点的内容 * 此方法会根据传入的节点 ID 数组，并根据节点自身的 `content` 属性或外部传入的 `contentCallback` * 来重新解析和设置节点内部的内容。 * @param nodeIds - 要更新内容的节点 ID 数组，不传参时默认更新所有节点 * @returns 成功更新的节点个数 */ updateNodeContents(nodeIds?: string[]): Promise<number>; /** * 获取内部 MindMap 实例 (谨慎使用) * @returns MindMap instance or null */ getMindMapInstance(): MindMap | null; /** * 输出思维导图容器的调试信息 * @private */ debug(): void; /** * 私有方法主要调用链路 (直接渲染插槽内容) * * 1. 初始化链路 * mounted() * └── _initializeMindMap() * ├── _checkInitializationRequirements() * ├── _destroyMindMapInstance() * └── _createMindMapOptions() * ├── _createNodeContentCallback() * └── _createMindMapStyle() * * 2. 节点内容渲染链路 * _createNodeContentCallback() 返回的回调函数 * └── _renderNodeWithSlot(node) * ├── _getOrCreateNodeId(node) * └── _createErrorDisplayElement() (渲染错误时) * └── _renderDefaultNode(node) (回退渲染) * * 3. 清理链路 * beforeDestroy() * └── _destroyMindMapInstance() * * _setupNodeDestroyListener() 设置的事件监听 * └── _handleNodeDestroy(node) * ├── _checkNodeExistsInCurrentData(nodeId) * │ └── _findNodeInTreeData(node, targetId) (递归调用) * └── _cleanupNodeVueInstance(node) * * 4. 错误处理链路 * _renderNodeWithSlot() 渲染失败时 * └── _createErrorDisplayElement(title, message) * * _cleanupNodeVueInstance() 清理失败时 * └── console.error() 记录错误日志 * * 5. 数据流向 * props.data (TreeNode | FlatNode[]) * └── watch.data.handler() * └── mindMap.setRootNodeData() * └── 触发节点重新渲染 * └── _renderNodeWithSlot() */ /** * 初始化 MindMap 实例 * @private */ _initializeMindMap(): void; /** * 创建调试选项 * @private * @returns DebugOptions 对象 */ _createDebugOptions(): DebugOptions; /** * 设置 MindMap 事件监听器 * @private */ _setupEventListeners(): void; /** * 检查初始化 MindMap 的必要条件 * @private * @returns 是否满足初始化条件 */ _checkInitializationRequirements(): boolean; /** * 创建 MindMap 实例的配置选项 * @private * @returns MindMap 配置选项对象 */ _createMindMapOptions(): { isHorizontal: boolean; siblingSeparation: number; levelSeparation: number; initialOffset: { x?: number | undefined; y?: number | undefined; }; lineShape: LineShapeType; contentCallback: (node: NodeLike) => HTMLElement; align: MindMapAlign; style: MindMapStyle; dragOptions: MindMapDragOptions | { enableNodeDrag: boolean; enableCanvasDrag: boolean; useThrottle: boolean; }; zoomOptions: MindMapZoomOptions; debugOptions: DebugOptions | undefined; }; /** * 创建思维导图样式配置 * @private * @returns 样式配置对象 */ _createMindMapStyle(): MindMapStyle; /** * 创建节点内容渲染的回调函数 * @private * @returns 处理节点内容生成的回调函数 */ _createNodeContentCallback(): (node: NodeLike) => HTMLElement; /** * 使用默认插槽中的内容直接渲染节点（带缓存机制） * @private * @param node 节点数据 * @returns 生成的 HTML 元素 */ _renderNodeWithSlot(node: NodeLike): HTMLElement; /** * 渲染默认节点内容 * @private * @param node 节点数据 * @returns 生成的 HTML 元素 */ _renderDefaultNode(node: NodeLike): HTMLElement; /** * 为没有 ID 的节点生成唯一标识符 * @private * @param node 节点数据 * @returns 节点的 ID 或生成的唯一 ID */ _getOrCreateNodeId(node: NodeLike): string; /** * 创建一个用于显示错误的 HTML 元素 * @private * @param title 错误标题 * @param message 错误信息 * @returns HTMLDivElement */ _createErrorDisplayElement(title: string, message: string): HTMLElement; /** * 销毁当前的 MindMap 实例 * @private */ _destroyMindMapInstance(): void; /** * 监听节点销毁事件 * @private */ _setupNodeDestroyListener(): void; /** * 处理节点销毁事件，仅在节点真正被删除时清理 Vue 实例 * @private * @param node 被销毁的节点数据 */ _handleNodeDestroy(node: NodeLike): void; /** * 清理节点对应的 Vue 实例 * @private * @param node 被销毁的节点数据 */ _cleanupNodeVueInstance(node: NodeLike): void; /** * 清理所有缓存的 Vue 实例映射表 * @private */ _clearAllCachedVueInstanceMap(): void; /** * 检查指定 ID 的节点是否仍存在于当前数据中 * @private * @param nodeId 要检查的节点 ID * @returns 节点是否存在 */ _checkNodeExistsInCurrentData(nodeId: string): boolean; /** * 在树形数据中递归查找指定 ID 的节点 * @private * @param node 当前检查的节点 * @param targetId 目标节点 ID * @returns 是否找到目标节点 */ _findNodeInTreeData(node: TreeNode, targetId: string): boolean; }, unknown, { isDebug: boolean; data: TreeNode | FlatNode[]; direction: string; lineStyle: string; lineColor: string; lineWidth: number; nodeBorderWidth: number; nodeBgColor: string; nodeBorderColor: string; align: { mode: string; }; siblingSeparation: number; levelSeparation: number; initialOffset: { x?: number | undefined; y?: number | undefined; }; dragOptions: MindMapDragOptions | { enableNodeDrag: boolean; enableCanvasDrag: boolean; useThrottle: boolean; }; zoomOptions: MindMapZoomOptions; }, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin>; export default _default;