feat: move the word in function of the collisions

graphnex · Mar 8, 2023 · ec6d92d · ec6d92d
1 parent ee7297d
commit ec6d92d
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 23 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,6 +1,7 @@
 import "./App.css";
 import {
   centerWord,
+  futurPosition,
   putWordInRandomPositionOnParent,
   setFirstWordInCenterOfParent,
 } from "./utils";
@@ -12,6 +13,17 @@ const defaultWords = [
   { id: "3456", text: "haha", x: 130, y: 40 },
 ];
 
+// may be we don't need this
+export const isFinish = (
+  passRect: { id: string; text: string; x: number; y: number }[]
+) => {
+  if (passRect.length === defaultWords.length) {
+    return 1;
+  } else {
+    return 0;
+  }
+};
+
 const MAX_WIDTH = 150;
 const Wordcloud = () => {
   const [words, setWords] = React.useState(defaultWords);
@@ -44,21 +56,12 @@ const Wordcloud = () => {
             const yW = centeredX[1];
 
             // move the word
+            w = futurPosition(w, passRect, 3);
+
+            passRect.push(w);
           }
         }
       });
-
-      // const newWords = prevWords.map((w) => {
-      //     return w;
-      //   }
-
-      //   {
-      //   ...w,
-      //   x: 100 - w.x > 0 ? w.x + 1 : w.x - 1,
-      //   y: 100 - w.y > 0 ? w.y + 1 : w.y - 1,
-      //   };
-      // });
-
       return newWords;
     });
   };

diff --git a/src/utils.ts b/src/utils.ts
@@ -122,7 +122,7 @@ export const netForce = (
     x: number;
     y: number;
   }[]
-) => {
+): [number, number] => {
   let diffX: number[] = [];
   let diffY: number[] = [];
   passRect.forEach((passW) => {
@@ -150,7 +150,7 @@ export const getTriangleFromNetForce = (
     y: number;
   },
   netForce: [number, number]
-) => {
+): [number, number] => {
   const lenghtHypontenus = Math.sqrt(
     Math.pow(netForce[0] - word.x, 2) + Math.pow(netForce[1] - word.y, 2)
   );
@@ -200,36 +200,69 @@ export const futurPosition = (
     x: number;
     y: number;
   }[],
-  step: number,
-  w1H: number,
-  w1W: number,
-  w2H: number,
-  w2W: number
+  step: number
 ) => {
-  let isCollision = 1;
+  let isCollision = 0;
+  let isCollisionY;
+  let isCollisionX;
   let netForceW;
   let rightAnglePoint;
 
+  // tmp are future possible position of word
   let tmpWPosition = [word.x, word.y];
   let tmpW = word;
+  let tmpWX = word;
+  let tmpWY = word;
+  let collisionOnXY;
 
-  while (isCollision) {
+  while (!isCollision) {
+    collisionOnXY = [0, 0];
     netForceW = netForce(word, passRect);
 
     rightAnglePoint = getTriangleFromNetForce(word, netForceW);
 
     tmpWPosition = moveOnHypotenus(
-      tmpWPosition,
+      [word.x, word.y],
       netForceW,
       rightAnglePoint,
       step
     );
 
+    // set the position
     tmpW.x = tmpWPosition[0];
     tmpW.y = tmpWPosition[1];
 
-    isCollision = allCollision(word, passRect);
+    tmpWX.x = tmpWPosition[0];
+    tmpWY.y = tmpWPosition[1];
+
+    // test if the word can be move over the hypotenuse
+    isCollision = allCollision(tmpW, passRect);
+
+    if (isCollision) {
+      // test collision on x
+      isCollisionX = allCollision(tmpWX, passRect);
+      isCollisionY = allCollision(tmpWY, passRect);
+
+      if (collisionOnXY[0] === 1 && collisionOnXY[1] === 1) {
+        return word;
+      }
+
+      if (isCollisionX) {
+        collisionOnXY[0] = 1;
+      } else {
+        word.x = tmpWX.x;
+      }
+
+      if (isCollisionY) {
+        collisionOnXY[1] = 1;
+      } else {
+        word.y = tmpWY.y;
+      }
+    } else {
+      word = tmpW;
+    }
   }
+  return word;
 };
 
 export const distanceBetweenWord = (