Check intersection and draggable svg path (svgdotjs and kld-intersections)

Question

enter code hereI have a problem. I'm trying to write code. The goal is that if two svg shapes possibly intersect, they cannot intersect. But my code works out so that if the shapes intersect, they get stuck. I can't figure out what's wrong, because I store the previous coordinates, at which there is no intersection yet, and if it occurs at the next ones, then I don't move the shape further.

Code:

`

    <script src="node_modules/@svgdotjs/svg.js/dist/svg.js"></script>
    <script src="node_modules/@svgdotjs/svg.draggable.js/dist/svg.draggable.js"></script>
    <script src="node_modules/kld-intersections/dist/index-umd.js"></script>

    <script>
        var ShapeInfo = KldIntersections.ShapeInfo
        var Intersection = KldIntersections.Intersection

        var CURRENT_COORD = { x: 0, y: 0 }

        var e,
            draw = SVG()
                .addTo('#drawing')
                .size('100%', '100%')
                .attr({ 'font-size': 10 })
                .fill('none')

        let externalFig = draw
            .path(
                'M420.30754,77.05683C419.69694,77.07615 419.10687,77.1276 418.49375,77.18867C408.68381,78.16579 400.02548,84.39147 395.62695,93.66814L393.29491,100.6884C393.79803,98.25554 394.57055,95.89609 395.62695,93.66814C387.78275,85.54091 376.77262,81.7897 365.89362,83.54975C355.01461,85.3098 345.56666,92.36837 340.40329,102.60002C325.82699,93.62251 307.65735,94.16624 293.60084,104.01726C279.54432,113.86828 272.05222,131.31029 274.32924,148.90733L275.81915,156.05942C275.14587,153.71632 274.64307,151.33265 274.32924,148.90733L274.10251,149.56651C261.88373,150.8981 251.86283,160.37853 249.25996,173.06625C246.6571,185.75395 252.06942,198.77241 262.66911,205.33305L279.22001,209.35405C273.44087,209.82975 267.67114,208.42904 262.66911,205.33305C254.49319,214.49145 252.61179,228.05026 258.00506,239.24781C263.39831,250.44534 274.91636,256.89293 286.79909,255.43064L294.02189,253.51902C291.69793,254.49175 289.28434,255.12481 286.79909,255.43064C293.54482,267.84893 304.73012,276.90766 317.86037,280.51238C330.99061,284.11711 344.93715,281.98668 356.56551,274.61275C366.05193,289.57297 382.88898,297.43065 399.77276,294.7836C416.65653,292.13655 430.58398,279.4432 435.53048,262.22018L437.2471,252.59617C436.99007,255.86574 436.43231,259.08018 435.53048,262.22018C447.14336,269.83575 461.75102,270.26492 473.74978,263.34079C485.74854,256.41665 493.23544,243.21319 493.34528,228.83278L489.04364,207.34639L472.09793,192.80866C485.20122,201.01677 493.46218,213.52263 493.34528,228.83278C508.92577,228.99606 522.16027,215.64547 528.09893,200.32331C534.03759,185.00113 531.79111,167.53299 522.20407,154.4115C526.1806,144.642 525.94468,133.52926 521.55631,123.95745C517.16791,114.38563 514.59043,105.20243 499.33727,104.47871C484.08411,103.75499 488.17759,81.58772 476.30853,78.24339C464.43947,74.89907 451.80108,79.02292 443.85451,88.85617L439.02851,96.99703C440.26167,94.05311 441.87221,91.30908 443.85451,88.85617C438.25278,81.12797 429.46669,76.7672 420.30752,77.05687L420.30754,77.05683z'
            )
            .center(350, 350)
            .stroke({ color: '#000000', opacity: 1, width: 3 })

        let fig1 = draw
            .path('M0 0 H20 A20 20 0 1 0 100 20 v25 C30 105 0 65 0 65 z')
            .draggable()
            .center(350, 350)
            .fill('#252525')
            .on('dragstart', function (e) {
                e.preventDefault()
                CURRENT_COORD.x = e.detail.box.x
                CURRENT_COORD.y = e.detail.box.y
                console.log(CURRENT_COORD)
                console.log(e)
            })
            .on('dragmove', e => {
                const { handler, box } = e.detail
                e.preventDefault()
                const constraints = externalFig.bbox()
                console.log(constraints)
                let { x, y } = box

                function arrayToString(array) {
                    return array
                        .map(([command, ...params]) => {
                            return command + params.join(' ')
                        })
                        .join(' ')
                }

                const intersections = Intersection.intersect(
                    ShapeInfo.path(arrayToString(externalFig._array)),
                    ShapeInfo.path(arrayToString(e.srcElement.instance._array))
                )
                if (intersections.status == 'Intersection') {
                    console.log(CURRENT_COORD.x, CURRENT_COORD.y)
                    console.log(x, y)

                    if (CURRENT_COORD.y < y) {
                        y = CURRENT_COORD.y
                    }
                    if (CURRENT_COORD.y > y) {
                        y = CURRENT_COORD.y
                    }
                    if (CURRENT_COORD.x < x) {
                        x = CURRENT_COORD.x
                    }
                    if (CURRENT_COORD.x > x) {
                        x = CURRENT_COORD.x
                    }
                    handler.move(x, y)

                    console.log('Intersec')
                } else {
                    CURRENT_COORD.x = x
                    CURRENT_COORD.y = y
                    handler.move(x, y)
                }
            })
        
    </script>
</body>

`