import G6, { Graph } from '@antv/g6';
import { createDom } from '@antv/dom-util';
import { RefreshGraphData } from '../../data';
const searchIconSvgPath = ``;
// const searchNode = (graph) => {
// const toolBarSearchInput = document.getElementById('toolBarSearchInput') as HTMLInputElement;
// const searchText = toolBarSearchInput.value.trim();
// let lastFoundNode = null;
// graph.getNodes().forEach((node) => {
// const model = node.getModel();
// const isFound = searchText && model.label.includes(searchText);
// if (isFound) {
// graph.setItemState(node, 'active', true);
// lastFoundNode = node;
// } else {
// graph.setItemState(node, 'active', false);
// }
// });
// if (lastFoundNode) {
// // 将视图移动到找到的节点位置
// graph.focusItem(lastFoundNode, true, {
// duration: 300,
// easing: 'easeCubic',
// });
// }
// };
interface Node {
label: string;
children?: Node[];
}
function findNodesByLabel(query: string, nodes: Node[]): Node[] {
const result: Node[] = [];
for (const node of nodes) {
let match = false;
let children: Node[] = [];
// 如果节点的label包含查询字符串，我们将其标记为匹配
if (node.label.includes(query)) {
match = true;
}
// 我们还需要在子节点中进行搜索
if (node.children) {
children = findNodesByLabel(query, node.children);
if (children.length > 0) {
match = true;
}
}
// 如果节点匹配或者其子节点匹配，我们将其添加到结果中
if (match) {
result.push({ ...node, children });
}
}
return result;
}
const searchNode = (graph: Graph, refreshGraphData?: RefreshGraphData) => {
const toolBarSearchInput = document.getElementById('toolBarSearchInput') as HTMLInputElement;
const searchText = toolBarSearchInput.value.trim();
const graphData = graph.get('initGraphData');
const filterChildrenData = findNodesByLabel(searchText, graphData.children);
refreshGraphData?.({
...graphData,
children: filterChildrenData,
});
};
const generatorSearchInputDom = (graph: Graph, refreshGraphData: RefreshGraphData) => {
const domString =
'';
const searchInputDom = createDom(domString);
searchInputDom.addEventListener('keydown', (event) => {
if (event.key === 'Enter') {
searchNode(graph, refreshGraphData);
}
});
return searchInputDom;
};
const generatorSearchBtnDom = (graph: Graph) => {
const domString = ``;
const searchBtnDom = createDom(domString);
searchBtnDom.addEventListener('click', () => {
searchNode(graph);
});
return searchBtnDom;
};
const searchInputDOM = (graph: Graph, refreshGraphData: RefreshGraphData) => {
const searchInputDom = generatorSearchInputDom(graph, refreshGraphData);
const searchBtnDom = generatorSearchBtnDom(graph);
const searchInput = `
`;
const searchDom = createDom(searchInput);
const searchWrapperDom = searchDom.querySelector('#toolBarSearchWrapper');
searchWrapperDom.insertBefore(searchInputDom, searchWrapperDom.firstChild);
searchWrapperDom.querySelector('.ant-input-group-addon').appendChild(searchBtnDom);
return searchDom;
};
const initToolBar = ({ refreshGraphData }: { refreshGraphData: RefreshGraphData }) => {
const toolBarInstance = new G6.ToolBar();
const config = toolBarInstance._cfgs;
const defaultContentDomString = config.getContent();
const defaultContentDom = createDom(defaultContentDomString);
// @ts-ignore
const elements = defaultContentDom.querySelectorAll('li[code="redo"], li[code="undo"]');
elements.forEach((element) => {
element.remove();
});
const searchBtnDom = `
`;
defaultContentDom.insertAdjacentHTML('afterbegin', searchBtnDom);
let searchInputContentVisible = true;
const toolbar = new G6.ToolBar({
position: { x: 10, y: 10 },
className: 'semantic-graph-toolbar',
getContent: (graph) => {
const searchInput = searchInputDOM(graph as Graph, refreshGraphData);
const content = `${defaultContentDom.outerHTML}
`;
const contentDom = createDom(content);
contentDom.appendChild(searchInput);
return contentDom;
},
handleClick: (code, graph) => {
if (code === 'search') {
const searchText = document.getElementById('searchInputContent');
if (searchText) {
const visible = searchInputContentVisible ? 'none' : 'block';
searchText.style.display = visible;
searchInputContentVisible = !searchInputContentVisible;
}
} else {
// handleDefaultOperator public方法缺失graph作为参数传入，将graph挂载在cfgs上，源码通过get会获取到graph,完成默认code的执行逻辑
toolBarInstance._cfgs.graph = graph;
toolBarInstance.handleDefaultOperator(code);
}
},
});
return toolbar;
};
export default initToolBar;