import G6 from '@antv/g6';
import { createDom } from '@antv/dom-util';
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',
});
}
};
const generatorSearchInputDom = (graph) => {
const domString =
'';
const searchInputDom = createDom(domString);
searchInputDom.addEventListener('keydown', (event) => {
if (event.key === 'Enter') {
searchNode(graph);
}
});
return searchInputDom;
};
const generatorSearchBtnDom = (graph) => {
const domString = ``;
const searchBtnDom = createDom(domString);
searchBtnDom.addEventListener('click', () => {
searchNode(graph);
});
return searchBtnDom;
};
const searchInputDOM = (graph) => {
const searchInputDom = generatorSearchInputDom(graph);
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 = () => {
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 = false;
const toolbar = new G6.ToolBar({
position: { x: 10, y: 10 },
className: 'semantic-graph-toolbar',
getContent: (graph) => {
const searchInput = searchInputDOM(graph);
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;