feat: bound of word cloud

graphnex · Mar 16, 2023 · cb405fb · cb405fb
1 parent 4705ee4
commit cb405fb
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 69 deletions.
diff --git a/src/Wordcloud.tsx b/src/Wordcloud.tsx
@@ -1,5 +1,11 @@
 import "./App.css";
-import { futurPosition, getBoundingRect, Rectangle, Word } from "./utils";
+import {
+  boundParent,
+  futurPosition,
+  getBoundingRect,
+  Rectangle,
+  Word,
+} from "./utils";
 import * as React from "react";
 
 import { CONTAINER_HEIGHT, CONTAINER_WIDTH, DEFAULT_RECT } from "./constants";
@@ -23,10 +29,10 @@ const Wordcloud = ({
   const [words, setWords] = React.useState(data);
 
   const rectParent = {
+    x: width / 2,
+    y: height / 2,
     width: width,
     height: height,
-    centerY: height / 2,
-    centerX: width / 2,
   };
 
   const updateWords = () => {
@@ -47,7 +53,6 @@ const Wordcloud = ({
       const newPositions = rectsToPlace.slice(1).reduce(
         (placedElements, rect) => {
           const futureWord = futurPosition(rect, placedElements, 3, weight);
-
           return [...placedElements, futureWord];
         },
         [centeredRect]
@@ -60,9 +65,14 @@ const Wordcloud = ({
     });
   };
 
-  // const parent = updateParent(
-  //   words.filter((w) => Boolean(w.rect)).map((w) => w.rect) as Rectangle[]
-  // );
+  console.log("before", rectParent);
+
+  const parent = boundParent(
+    words.filter((w) => Boolean(w.rect)).map((w) => w.rect) as Rectangle[],
+    rectParent
+  );
+
+  console.log("after", parent);
 
   React.useEffect(() => {
     updateWords();
@@ -75,7 +85,7 @@ const Wordcloud = ({
       width={width}
       height={height}
       style={{ outline: "1px solid green" }}
-      // viewBox={`${parent.centerX} ${parent.centerY} 1000 1000`}
+      viewBox={`${parent.x} ${parent.y} ${parent.width} ${parent.height}`}
     >
       {words.map((word) => {
         const fontSize =

diff --git a/src/utils.ts b/src/utils.ts
@@ -1,3 +1,4 @@
+import { R } from "vitest/dist/types-7cd96283";
 import {
   CONTAINER_HEIGHT,
   CONTAINER_WIDTH,
@@ -30,6 +31,13 @@ export type Circle = {
   radius: number;
 };
 
+export type Bound = {
+  topX: number;
+  topY: number;
+  bottomX: number;
+  bottomY: number;
+};
+
 export const getBoundingRect = (
   id: string,
   tagName: "svg" | "text" = "text"
@@ -236,64 +244,55 @@ export const allCollision = (word: Rectangle, passRect: Rectangle[]): boolean =>
     )
     .some((t) => t === true);
 
-// export const updateParent = (passRect: Rectangle[]) => {
-//   const centerMass = centerOfMass(passRect);
-
-//   rectParent.centerX = centerMass.x;
-//   rectParent.centerY = centerMass.y;
-
-//   const rectX = passRect.map((word) => word.x);
-//   const maxX = Math.max(...rectX);
-//   const minX = Math.min(...rectX);
-
-//   const distanceMaxX = maxX - rectParent.centerX;
-//   const distanceMinX = rectParent.centerX - minX;
-
-//   if (distanceMaxX > distanceMinX && distanceMaxX > rectParent.width / 2) {
-//     rectParent.width = rectParent.centerX + (distanceMaxX + 10);
-//   } else if (
-//     distanceMinX > distanceMaxX &&
-//     distanceMinX > rectParent.width / 2
-//   ) {
-//     rectParent.width = rectParent.centerX + (distanceMinX + 10);
-//   }
-
-//   const rectY = passRect.map((word) => word.y);
-//   const maxY = Math.max(...rectY);
-//   const minY = Math.min(...rectY);
-
-//   const distanceMaxY = maxY - rectParent.centerY;
-//   const distanceMinY = rectParent.centerY - minY;
-
-//   if (distanceMaxY > distanceMinY && distanceMaxY > rectParent.height / 2) {
-//     rectParent.height = rectParent.centerY + (distanceMaxY + 10);
-//   } else if (
-//     distanceMinY > distanceMaxY &&
-//     distanceMinY > rectParent.height / 2
-//   ) {
-//     rectParent.height = rectParent.centerY + (distanceMinY + 10);
-//   }
-
-//   return rectParent;
-
-// rectParent.height = centerMass.y * coef;
-// rectParent.width = centerMass.x * coef;
-
-// if (
-//   maxDistanceYBottom > rectParent.height &&
-//   maxDistanceYBottom > maxDistanceXRight
-// ) {
-//   const coef = maxDistanceYBottom / rectParent.height;
-//   rectParent.height *= coef;
-//   rectParent.width *= coef;
-// }
-
-// if (
-//   maxDistanceXRight > rectParent.width &&
-//   maxDistanceXRight > maxDistanceYBottom
-// ) {
-//   const coef = maxDistanceXRight / rectParent.width;
-
-//   rectParent.width *= coef;
-//   rectParent.height *= coef;
-// }
+export const boundParent = (
+  passRect: Rectangle[],
+  parent: Rectangle
+): Rectangle => {
+  const newParentBound = passRect.reduce(
+    (bound, rect) => {
+      const topLeftRect = {
+        x: rect.x - rect.width / 2,
+        y: rect.y - rect.height / 2,
+      };
+
+      // console.log(topLeftRect);
+
+      const bottomRightRect = {
+        x: rect.x + rect.width / 2,
+        y: rect.y + rect.height / 2,
+      };
+
+      // const distX = topLeftRect.x < bound.x;
+
+      // value on left
+      if (topLeftRect.x < bound.x) {
+        bound.x = topLeftRect.x;
+      }
+
+      // value on top
+      if (topLeftRect.y < bound.y) {
+        bound.y = topLeftRect.y;
+      }
+      // value on right
+
+      if (bottomRightRect.x > bound.width) {
+        bound.width = bottomRightRect.x;
+      }
+      // value on bottom
+
+      if (bottomRightRect.y > bound.height) {
+        bound.height = bottomRightRect.y;
+      }
+
+      return bound;
+    },
+    {
+      x: parent.x - parent.width / 2,
+      y: parent.y - parent.height / 2,
+      width: parent.width,
+      height: parent.height,
+    }
+  );
+
+  return newParentBound;
+};