import { baseNode } from './config';
//监听画布事件 tempThis是一个vue实例
export const myEvents = (graph,tempThis=null)=>{
    //右键节点/边
    graph.on('cell:contextmenu',({cell,e})=>{
        if(window.location.pathname.startsWith('/chartframe')) return 
        graph.select(cell)
        const dom = $('#context-menu-wrapper')[0];
        dom.style.left = e.clientX-3 + 'px';
        dom.style.top = e.clientY-3 + 'px';
    })

    graph.on('node:click',({node,e})=>{
        if(!window.location.pathname.startsWith('/chartframe')) return 
        console.log('node.data',node.data)
        if(node.data&&node.data.id){
            tempThis&&tempThis.$emit('showDialog',node.data)
        }
    })

    /* 鼠标移入移出控制连接桩 */
    graph.on('node:mouseenter', ({ node, e }) => {
        if(window.location.pathname.startsWith('/chartframe')) return 
        for(let i of document.querySelectorAll(`g[data-cell-id="${node.id}"] .x6-port-body`)) {
            i.style.display = 'block'
        }
    })

    graph.on('node:mouseleave', ({ node, e }) => {
        if(window.location.pathname.startsWith('/chartframe')) return 
        for(let i of document.querySelectorAll(`g[data-cell-id="${node.id}"] .x6-port-body`)) {
            i.style.display = 'none'
        }
    })

    /* 鼠标移入移出边 */
    graph.on('edge:mouseenter', ({ edge }) => {
        edge.addTools([
          'source-arrowhead',
          'target-arrowhead',
          {
            name: 'button-remove',
            args: {
              distance: -30,
            },
          },
        ])
      })
      
    graph.on('edge:mouseleave', ({ edge }) => {
        edge.removeTools()
    })

    /* 元素选中事件 */
    graph.on('cell:selected',({cell})=>{
        const selects = graph.getSelectedCells()
        if(cell.isNode()){
            tempThis.isSelectEdge = false
            tempThis.isSelectNode = true
        }else if(cell.isEdge()){
            tempThis.isSelectNode = false
            tempThis.isSelectEdge = true
        }
        tempThis.cleanSelect = false
        selects&&selects.length&&(tempThis.currentCell = selects[0])
    })
    /* 点击空白区域清空选区 屏蔽工具栏 */
    graph.on('blank:click',() => {
        graph.cleanSelection();
        tempThis.isSelectEdge = false
        tempThis.isSelectNode = false
        tempThis.cleanSelect = true
        tempThis.currentCell = baseNode
    })

    /* 历史记录改变 */
    graph.history.on('change',()=>{
        tempThis.canRedo = graph.history.canRedo()
        tempThis.canUndo = graph.history.canUndo()
    })

}
//监听键盘绑定事件
export const bindKey = (graph,tempThis=null)=>{
    //delete 删除选中元素
    graph.bindKey(['delete'],()=>{
        const selectCells = graph.getSelectedCells()
        if(selectCells.length){
            // 移除工具
            selectCells.forEach(item => item.removeTools());
            graph.removeCells(selectCells)
            //重置工具栏
            tempThis.isSelectEdge = false
            tempThis.isSelectNode = false
            tempThis.cleanSelect = true
            tempThis.currentCell = baseNode
        }
    },'keydown')
    //ctrl+c复制选择元素
    graph.bindKey('ctrl+c',()=>{
        const selectCells = graph.getSelectedCells()
        if(selectCells.length){
            graph.copy(selectCells)
        }
    })
    //ctrl+v粘贴元素
    graph.bindKey('ctrl+v', () => {
        if (!graph.isClipboardEmpty()) {
            const selectCell = graph.paste({ offset: 30 })
            graph.cleanSelection()
            graph.select(selectCell)
        }
        return false
    });
}