vue2-mind-map
Version:
`vue2-mind-map` 是一个功能丰富的思维导图可视化组件。该组件提供了完整的思维导图展示和交互功能,支持多种数据格式输入、灵活的布局配置、丰富的样式定制和流畅的用户交互体验。目前基于 Vue 2 构建。
58 lines (57 loc) • 2.38 kB
TypeScript
import { IMindNode } from "../interfaces/IMindNode";
import { Vector } from "../../common/entities/Core/Vector";
import { ITreeNodeForRT } from "../interfaces/ITreeNodeForRT";
import { ITreeNodeForSD } from "../interfaces/ITreeNodeForSD";
import { IRgtf } from "../interfaces/IRgtf";
import { ISelfDev } from "../interfaces/ISelfDev";
export declare type ContentType<T extends object = object> = string | HTMLElement | HTMLElement[] | ((node: T) => string | HTMLElement | HTMLElement[]);
export declare class MindNode implements IMindNode, ITreeNodeForRT, ITreeNodeForSD {
id: string;
parent?: MindNode;
children: MindNode[];
position: Vector;
size: Vector;
collapsed: boolean;
totalChildrenSize?: Vector;
totalChildrenCount?: number;
data: any;
private _content?;
rgTf: IRgtf<MindNode>;
slDv: ISelfDev;
get width(): number;
set width(value: number);
get height(): number;
set height(value: number);
get x(): number;
set x(value: number);
get y(): number;
set y(value: number);
get content(): ContentType | undefined;
set content(value: ContentType | undefined);
/**
* 创建一个思维导图节点实例
*
* @param options - 节点配置选项
* @param options.id - 节点唯一标识,默认自动生成UUID
* @param options.position - 节点位置向量,默认为(0,0)
* @param options.size - 节点尺寸向量,默认为(100,100)
* @param options.collapsed - 是否折叠节点,默认为false
* @param children - 子节点列表,默认为空数组
*/
constructor(options?: {
id?: string;
position?: Vector;
size?: Vector;
collapsed?: boolean;
}, children?: MindNode[]);
addChild(node: MindNode): void;
removeChild(node: MindNode): void;
/**
* 深度优先遍历节点树
* @param callback - 对每个遍历到的节点执行的回调函数
* @param {boolean} [skipCollapsedSubtrees=false] - 可选参数,如果为 true,则当遇到折叠的节点时,不会遍历其子树。默认为 false,即遍历所有节点。
*/
traverse(callback: (node: MindNode) => void, skipCollapsedSubtrees?: boolean): void;
findById(id: string): MindNode | null;
moveTo(newParent: MindNode): void;
}