@wakenbyWork

React-force-graph баг при перемещении, как исправить?

import { useEffect, useState } from 'react'
import { ForceGraph2D, ForceGraph3D, ForceGraphVR, ForceGraphAR } from 'react-force-graph'
import assetDataObject from './assetDataObject'
import targetDataObject from './targetDataObject'
import metaDataObject from './metaDataObject'
import { Modal } from './modal'

function App() {
    const [myData, setMyData] = useState(false)
    const [selectNodeId, setSelectNodId] = useState(0)

    const fillData = () => {
        const assetsData = assetDataObject
        const targetData = targetDataObject
        const metaData = metaDataObject

        let nodes = metaData.map(metaItem => {
            return {
                ...metaItem,
                id: metaItem.target
            }
        })
        nodes = [...nodes, ...assetsData]

        const links = metaData.map(metaItem => {
            const tt = targetData.find(targetItem => targetItem.url === metaItem.target)

            if (tt) {
                return {
                    source: metaItem.target,
                    target: tt.asset
                }
            }
        })

        setMyData({
            nodes: nodes,
            links: links
        })
    }

    useEffect(() => fillData(), [])

    const nodeCanvasObject = (node, ctx, globalScale) => {
        const max_cvss = node.max_cvss
        let color = undefined

        const label = node.target ? `${node.target} - cvss: ${max_cvss}` : node.name
        const fontSize = 18 / globalScale

        const textWidth = ctx.measureText(label).width
        const bckgDimensions = [textWidth, fontSize].map(n => n + fontSize * 0.6)

        ctx.font = `${fontSize}px Sans-Serif`
        ctx.fillStyle = 'rgba(0, 0, 0, 1)'
        ctx.fillRect(node.x - bckgDimensions[0] / 2, node.y - bckgDimensions[1] / 2, ...bckgDimensions)

        if (max_cvss === 0) {
            color = 'blueviolet'
        }
        if (max_cvss > 0) {
            color = 'green'
        }
        if (max_cvss >= 4) {
            color = 'orange'
        }
        if (max_cvss >= 7) {
            color = 'red'
        }

        ctx.textAlign = 'center'
        ctx.textBaseline = 'middle'
        ctx.fillStyle = color ?? '#fff'
        ctx.fillText(label, node.x, node.y)
    }

    return (
        <>
            {myData && (
                <ForceGraph2D
                    onNodeClick={(node) => setSelectNodId(node.target)}
                    graphData={myData} nodeAutoColorBy="group"
                    nodeCanvasObject={nodeCanvasObject}
                />
            )
            }

            {selectNodeId && (
                <Modal nodeObj={metaDataObject} targetNode={selectNodeId} closeFnc={setSelectNodId}/>
            )}
        </>
    )
}

export default App


Баг при перемещении

637ca2ca35f10977939454.jpeg


Все нормально, но в один момент, граф оставляет за собой следы при перемещении, как будто окна на windows xp))))
  • Вопрос задан
  • 68 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы