antvis/G6

把1节点拖拽到2节点的左上角后,鼠标移上去高亮失效、点击事件也不生效 #4740

zmhweb posted onGitHub

Describe the bug

import React, { FC, memo, useEffect, useRef } from 'react'; import G6 from '@antv/g6';

const RoomView: FC = memo(() => {

const graphRef = useRef<any>(null);
const graphDom = useRef<any>(null);

useEffect(() => {
    initGraph()
}, []);


// 初始化图
const initGraph = () => {
    if (graphRef.current) {
        graphRef.current.destroy();
    }
    graphRef.current = new G6.Graph({
        container: graphDom.current,
        fitView: true,
        width: 800,
        height: 800,
        // groupByTypes: false,
        defaultNode: {
            type: 'image',
            size: [50, 40],
            style: {
                cursor: 'pointer',
            },
            labelCfg: {
                style: {
                    fontSize: 16,
                    fill: '#fff',
                    fontFamily: 'PingFang SC',
                    fontWeight: 500,
                },
            },
            anchorPoints: [[0.5, 0.5]],
        },
        defaultEdge: {
            shape: 'arc',
            type: 'arc',
            curveOffset: 1,
            labelCfg: {
                autoRotate: true,
                refY: -10,
            },
            style: {
                lineWidth: 2,
                stroke: 'rgba(0, 143, 92, 1)',
                cursor: 'pointer',
            },
        },
        edgeStateStyles: {
            hover: {
                lineWidth: 6,
                stroke: 'rgba(0, 143, 92, 1)',
            },
            active: {
                lineWidth: 4,
                stroke: 'rgba(0, 143, 92, 1)',
            },
            inactive: {
                stroke: 'rgba(0, 143, 92, 1)',
                lineWidth: 1,
                opacity: 0.5,
            },
        },
        defaultCombo: {
            type: 'rect',
            zIndex: 1,
            style: {
                lineWidth: 1,
                zIndex: 1,
                lineDash: [8, 8],
                fill: 'transparent',
            },
            padding: [10, 200, 41, 200],
            labelCfg: {
                refY: 20,
                refX: 30,
                position: 'top',
                style: {
                    fill: 'rgb(202, 255, 255)',
                    fontSize: 20,
                    fontFamily: 'PingFang SC',
                    shadowColor: 'rgba(55, 128, 255, 1)',
                    shadowBlur: 9.22,
                    cursor: 'pointer',
                },
            },
        },
        modes: {
            default: [
                'zoom-canvas',
                'drag-canvas',
                'drag-combo',
                {
                    type: 'activate-relations',
                    activeState: 'active',
                    inactiveState: 'inactive',
                },
                'drag-node',

            ],
        }
    });

    drawGraph();
};

// 绘制图
const drawGraph = () => {
    const testData = {
        nodes: [{
            "size": [100, 100],
            "id": "1",
            "type": "image",
            "label": "1",
            "x": 1400,
            "y": 0
        }, {
            "size": [100, 100],
            "id": "2",
            "type": "image",
            "label": "2",
            "x": 940,
            "y": 460
        }],
        edges: [
            {
                "source": "1",
                "target": "2",
            },
        ]
    }
    graphRef.current.data(testData);
    graphRef.current.render();

    attachEvent();
};

const attachEvent = () => {
    graphRef.current.off('edge:mouseenter').on('edge:mouseenter', (evt: any) => {
        const { item } = evt;
        graphRef.current.setItemState(item, 'hover', true);
    });

    graphRef.current.off('edge:mouseleave').on('edge:mouseleave', (evt: any) => {
        const { item } = evt;
        graphRef.current.setItemState(item, 'hover', false);
    });

};


return (
    <div style={{
        width: '800px',
        height: '800px',
    }}>
        <div ref={graphDom}></div>
    </div>

);

});

export default RoomView;

Your Example Website or App

代码如上

Steps to Reproduce the Bug or Issue

节点拖拽后,鼠标移上去高亮失效、点击事件也不生效

Expected behavior

节点拖拽后,鼠标移上去高亮失效、点击事件也不生效

Screenshots or Videos

No response

Platform

  • OS: [e.g. macOS, Windows, Linux]
  • Browser: [e.g. Chrome, Safari, Firefox]
  • Version: [e.g. 91.1]

Additional context

No response


边用quadratic代替arc试试

posted by GemT27 almost 2 years ago

quadratic

image 我给defaultEdge加了type为solid就解决了

posted by zmhweb almost 2 years ago

This issue has been closed because it has been outdate for a long time. Please open a new issue if you still need help.

这个 issue 已经被关闭,因为 它已经过期很久了。 如果你仍然需要帮助,请创建一个新的 issue。

posted by github-actions[bot] 10 months ago

Fund this Issue

$0.00
Funded

Pull requests