Skip to content
大纲

图的元素

包含 Node, Edge, Combo 三大类

操作元素

ts
// 增删改查
class AbstractGraph {
  add( // 新增元素
    type: ITEM_TYPE, // 元素类型
    model: ModelConfig, // 元素数据模型
    stack?: boolean, // 本次操作是否入栈,默认为 true
    sortCombo?: boolean // 本次操作是否需要更新 combo 层级顺序,内部参数,用户在外部使用 addItem 时始终时需要更新
  ): Item | boolean;
  addItem( // 新增元素
    type: ITEM_TYPE, // 元素类型
    model: ModelConfig, // 元素数据模型
    stack?: boolean, // 本次操作是否入栈,默认为 true
    sortCombo?: boolean // 本次操作是否需要更新 combo 层级顺序,内部参数,用户在外部使用 addItem 时始终时需要更新
  ): Item | boolean;
  addItems(
    items?: { type: ITEM_TYPE; model: ModelConfig }[],
    stack?: boolean,
    sortCombo?: boolean
  ): (boolean | Item)[];

  remove(item: Item | string, stack?: boolean): void; // 删除元素, item 为元素实例或id, stack 默认 true 表示操作入栈
  removeItem(item: Item | string, stack?: boolean): void; // 删除元素, item 为元素实例或id, stack 默认 true 表示操作入栈

  updateItem( // 更新元素
    item: Item | string, // 元素id或元素实例
    cfg: Partial<NodeConfig> | EdgeConfig, // 需要更新的数据
    stack?: boolean // 本次操作是否入栈,默认为 true
  ): void;
  update(
    item: Item | string, // 元素id或元素实例
    cfg: Partial<NodeConfig> | EdgeConfig, // 需要更新的数据
    stack?: boolean // 本次操作是否入栈,默认为 true
  ): void;

  findById(id: string): Item; // 根据 ID 查询图元素实例
  find<T extends Item>( // 根据对应规则查找单个元素
    type: ITEM_TYPE, // 元素类型
    fn: (item: T, index?: number) => boolean // 指定规则, 返回 true 表示匹配
  ): T | undefined;
  findAll<T extends Item>( // 查找所有满足规则的元素
    type: ITEM_TYPE, // 元素类型
    fn: (item: T, index?: number) => boolean // 指定规则, 返回 true 表示匹配
  ): T[];
  findAllByState<T extends Item>( // 查找所有处于指定状态的元素
    type: ITEM_TYPE, // 元素类型
    state: string, // 状态
    additionalFilter?: (item: Item) => boolean
  ): T[];

  getNodes(): INode[]; // 获取当前图中所有节点的item实例
  getEdges(): IEdge[]; // 获取当前图中所有边的item实例
  getCombos(): ICombo[]; // 获取图中所有的 combo 实例
  // 获取指定 Combo 中所有的节点, 参数为 combo id或实例
  getComboChildren(combo: string | ICombo): {
    nodes: INode[];
    combos: ICombo[];
  };
}

显示隐藏

ts
// 显示隐藏
class AbstractGraph {
  showItem(item: Item | string, stack?: boolean): void; // 显示元素
  hideItem(item: Item | string, stack?: boolean): void; // 隐藏元素
}

元素方法

ts
interface Item {
  isItem: () => boolean;
  destroy: () => void;

  // 隐藏显示
  show: () => void; // 显示元素, visible 属性会自行调整
  hide: () => void; // 隐藏元素, visible 属性会自行调整
  isVisible: () => boolean;
  changeVisibility: (visible: boolean) => void; // 更改是否显示

  // 锁定解锁
  hasLocked: () => boolean;
  lock: () => void;
  unlock: () => void;

  // 层级调整
  toFront: () => void; // 将元素放到最前面
  toBack: () => void; // 将元素放到最后面
}