dash14 / v-network-graph

An interactive network graph visualization component for Vue 3
https://dash14.github.io/v-network-graph/
MIT License
504 stars 44 forks source link

fix: calculate curve with two nodes in the same position #134

Closed hpawa closed 1 year ago

hpawa commented 1 year ago

133

dash14 commented 1 year ago

Hi @hpawa, Thank you very much for your Issue report and PR!

I have confirmed the cause of the problem. An error was occurring when two nodes were in the same position and the process to calculate the curve returned NaN. In the PR you provided, the process is that if two nodes are in the same position, no calculation is performed, that is, the drawing is not updated.

In many cases this was not a problem, but once the curved edge was drawn and the node position was updated to be at the same position, the drawing of the curved edge before the repositioning remained.

screenshot 2023-10-04 21 57 49

Reproduction code ```vue ```

If you don't mind, could I ask you to continue your contribution as is? Please take back the current modifications and include the following changes in your PR.

diff --git a/src/composables/state.ts b/src/composables/state.ts
index 6dda84a..4df50ec 100644
--- a/src/composables/state.ts
+++ b/src/composables/state.ts
@@ -621,7 +621,9 @@ function calculateCurvePositionAndState(
   let position: LinePosition
   let curve: EdgeModel.Curve | undefined = undefined

-  if (shift === 0) {
+  if (radius === 0) {
+    return [originPosition, curve]
+  } else if (shift === 0) {
     // The line connecting the centers of the nodes is regarded as a straight line.
     if (sourceMargin === 0 && targetMargin === 0) {
       position = originPosition
diff --git a/src/modules/calculation/2d.ts b/src/modules/calculation/2d.ts
index f1f024b..94f5d9a 100644
--- a/src/modules/calculation/2d.ts
+++ b/src/modules/calculation/2d.ts
@@ -298,6 +298,11 @@ export function calculateCircleCenterAndRadiusBy3Points(
   const x32 = x3 - x2
   const y32 = y3 - y2

+  if ((x12 === 0 && y12 === 0) || (x32 === 0 && y32 === 0)) {
+    // Cannot determine the curve if two or more of the three points are in the same position.
+    return [p1, 0];
+  }
+
   const x =
     (y32 * (x12 * (x1 + x2) + y12 * (y1 + y2)) - y12 * (x32 * (x3 + x2) + y32 * (y3 + y2))) /
     (2 * x12 * y32 - 2 * y12 * x32)

Many thanks for your contribution!! Best Regards.

dash14 commented 1 year ago

@hpawa Thank you for your prompt response to the correction. I will merge this! I appreciate your contribution!!