ReactJS 或普通 JS 中带有可拖动点的可拖动线？

我一直致力于尝试在我的网站上创建一条带有可拖动点的可拖动线。我正在研究一个非常简单的概念证明。

到目前为止，我已经能够获得两个可拖动的点，以及在两点之间绘制的一条线，但我真的很困惑如何使线本身可拖动，并且只是让线随之移动。（基本上类似于 DrawIO 中编辑普通线条的行为https://app.diagrams.net - 带有可拖动线的可拖动点）

以下是我迄今为止拥有的一些概念验证代码： https: //codesandbox.io/s/stupefied-fermat-qpigl

我想我可能必须在线上创建自己的侦听器并让它手动更新端点的坐标，因为我不认为我可以让 Drawable 与线和线一起使用点。

有人对我如何让它发挥作用有选择或建议吗？

更新：我能够让整条生产线移动，但只能通过解决这个问题来解决。我在两个端点之间创建了一个中点，并使该中点可拖动。根据中点被拖动的程度，我还拖动了端点。该线将始终被计算为在端点之间绘制。但它仍然不理想，因为我希望使整条线本身可拖动。仍然会欣赏想法！