Implement the bounding box (#52)

* Implement bounding box

* Update the bounding box

* Working bounding box with less glitches

* Small changes

* Working collision detection

src/Components/Grid.ts

@@ -54,9 +54,10 @@ type GridOptions = {
   cellSize?: number;
   pointRadius?: number;
   pointColor?: Color;
-  labels?: boolean;
+  labels: boolean;
   yLabelText?: string;
   xLabelText?: string;
+  hasAxis?: boolean;
 };
 
 const defaultGridOptions: GridOptions = {
@@ -66,6 +67,7 @@ const defaultGridOptions: GridOptions = {
   labels: true,
   xLabelText: "x",
   yLabelText: "y",
+  hasAxis: true,
 };
 
 const LABELS_LENGTH = 81;
@@ -83,6 +85,8 @@ class Grid extends Component {
   private labelsX: Text[];
   private labelsY: Text[];
 
+  private hasLabels: boolean;
+
   constructor(options?: GridOptions) {
     super();
 
@@ -93,12 +97,13 @@ class Grid extends Component {
       labels,
       xLabelText,
       yLabelText,
+      hasAxis,
     } = {
       ...defaultGridOptions,
       ...options,
     };
     this.cellSize = cellSize ?? 10;
-
+    this.hasLabels = labels;
     const gridGeometry = new PlaneGeometry(
       window.innerWidth,
       window.innerHeight
@@ -118,6 +123,7 @@ class Grid extends Component {
     });
 
     this.shaderMesh = new Mesh(gridGeometry, gridMaterial);
+
     this.xAxis = new Line(
       new Vector2(-window.innerWidth, 0),
       new Vector2(window.innerWidth - 1000, 0),
@@ -130,36 +136,42 @@ class Grid extends Component {
     );
     this.xLabel = new Text(xLabelText, { color: "#000000", fontSize: 22 });
     this.yLabel = new Text(yLabelText, { color: "#000000", fontSize: 22 });
+
+    this.add(this.shaderMesh);
+
     if (labels) {
       this.add(this.xLabel, this.yLabel);
     }
 
-    this.add(this.shaderMesh, this.xAxis, this.yAxis);
+    if (hasAxis) {
+      this.add(this.xAxis, this.yAxis);
+    }
 
     // Coordinate labels
     this.labelsX = [];
     this.labelsY = [];
-
-    for (let i = 0; i < LABELS_LENGTH; i++) {
-      const worldIndex = i - LABELS_LENGTH / 2;
-      this.labelsX.push(
-        new Text(worldIndex.toString(), {
-          position: [worldIndex, 0],
-          fontSize: 16,
-          anchorX: "center",
-          anchorY: "top",
-        })
-      );
-      this.labelsY.push(
-        new Text(worldIndex.toString(), {
-          position: [0, worldIndex],
-          fontSize: 16,
-          anchorX: "right",
-          anchorY: "middle",
-        })
-      );
-      this.add(this.labelsX[i]);
-      this.add(this.labelsY[i]);
+    if (labels) {
+      for (let i = 0; i < LABELS_LENGTH; i++) {
+        const worldIndex = i - LABELS_LENGTH / 2;
+        this.labelsX.push(
+          new Text(worldIndex.toString(), {
+            position: [worldIndex, 0],
+            fontSize: 16,
+            anchorX: "center",
+            anchorY: "top",
+          })
+        );
+        this.labelsY.push(
+          new Text(worldIndex.toString(), {
+            position: [0, worldIndex],
+            fontSize: 16,
+            anchorX: "right",
+            anchorY: "middle",
+          })
+        );
+        this.add(this.labelsX[i]);
+        this.add(this.labelsY[i]);
+      }
     }
   }
 
@@ -215,19 +227,21 @@ class Grid extends Component {
       if (numberX === 0) contentX = "";
       if (numberY === 0) contentY = "";
 
-      this.labelsX[i].setText(contentX);
-      this.labelsX[i].position.set(
-        roundedOffsetX + worldX,
-        axisMargin,
-        this.labelsX[i].position.z
-      );
-
-      this.labelsY[i].setText(contentY);
-      this.labelsY[i].position.set(
-        axisMargin,
-        roundedOffsetY + worldY,
-        this.labelsY[i].position.z
-      );
+      if (this.hasLabels) {
+        this.labelsX[i].setText(contentX);
+        this.labelsX[i].position.set(
+          roundedOffsetX + worldX,
+          axisMargin,
+          this.labelsX[i].position.z
+        );
+
+        this.labelsY[i].setText(contentY);
+        this.labelsY[i].position.set(
+          axisMargin,
+          roundedOffsetY + worldY,
+          this.labelsY[i].position.z
+        );
+      }
     }
   }
 

src/Components/Latex.ts

@@ -1,8 +1,8 @@
-import { OrthographicCamera } from "three";
+import { Box3, Event, Object3D, OrthographicCamera, Vector3 } from "three";
 import renderToString from "katex";
 import { CSS3DObject } from "three/examples/jsm/renderers/CSS3DRenderer";
-import { toVector3 } from "../utils";
-import { Component, Draggable } from "./interfaces";
+import { toVector2, toVector3 } from "../utils";
+import { Collider, Component, Draggable } from "./interfaces";
 import { InputPosition } from "./types";
 
 type LatexOptions = {
@@ -14,7 +14,7 @@ type LatexOptions = {
   draggable?: Draggable;
 };
 
-class Latex extends Component {
+class Latex extends Component implements Collider {
   draggable;
 
   constructor(
@@ -58,6 +58,34 @@ class Latex extends Component {
     this.add(container);
   }
 
+  collidesWith(other: Object3D): boolean {
+    const box1 = new Box3().setFromObject(this);
+    const box2 = new Box3().setFromObject(other);
+
+    return box1.intersectsBox(box2);
+  }
+
+  distanceTo(other: Object3D<Event>): number {
+    const box1 = new Box3().setFromObject(this);
+    const box2 = new Box3().setFromObject(other);
+
+    const center1 = new Vector3();
+    const center2 = new Vector3();
+    box1.getCenter(center1);
+    box2.getCenter(center2);
+    center1.setZ(0);
+    center2.setZ(0);
+
+    return center1.distanceTo(center2);
+  }
+
+  setPosition(position: InputPosition) {
+    this.position.set(
+      toVector2(position).x,
+      toVector2(position).y,
+      this.position.z
+    );
+  }
   update(camera: OrthographicCamera) {
     this.scale.set(1 / camera.zoom, 1 / camera.zoom, 1);
   }

src/Components/Line.ts

@@ -11,13 +11,17 @@ export type LineOptions = {
   lineWidth?: number;
   arrowhead?: boolean;
   dashed?: boolean;
+  opacity?: number;
+  transparent?: boolean;
 };
 
 export const defaultLineOptions: LineOptions = {
   color: 0x080007,
   lineWidth: 4,
   arrowhead: false,
   dashed: false,
+  opacity: 1,
+  transparent: false,
 };
 
 class Line extends Component {
@@ -28,7 +32,7 @@ class Line extends Component {
 
   constructor(start: InputPosition, end: InputPosition, options?: LineOptions) {
     super();
-    const { color, lineWidth, arrowhead, dashed } = {
+    const { color, lineWidth, arrowhead, dashed, opacity, transparent } = {
       ...defaultLineOptions,
       ...options,
     };
@@ -41,6 +45,8 @@ class Line extends Component {
       linewidth: lineWidth,
       resolution: new Vector2(window.innerWidth, window.innerHeight),
       dashed: dashed,
+      opacity: opacity,
+      transparent: transparent,
     });
 
     this.geometry = new LineGeometry();

src/Components/Shape.ts

@@ -1,27 +1,38 @@
 import {
-  Vector2,
   MeshBasicMaterial,
   Shape,
   Mesh,
   Group,
   Object3D,
   ShapeGeometry,
+  Event,
+  Box3,
+  Vector3,
 } from "three";
+import { toVector2 } from "../utils";
 import Line from "./Line";
-import { Component } from "./interfaces";
+import { Collider, Component } from "./interfaces";
+import { InputPosition } from "./types";
 
 export type PolygonOptions = {
   color?: number;
   fill?: boolean;
+  opacity?: number;
 };
 
 export const defaultShapeOptions: PolygonOptions = {
   color: 0xfaa307,
+  opacity: 0.6,
 };
 
-type PolygonVertices = [Vector2, Vector2, Vector2, ...Vector2[]];
+type PolygonVertices = [
+  InputPosition,
+  InputPosition,
+  InputPosition,
+  ...InputPosition[]
+];
 
-class Polygon extends Component {
+class Polygon extends Component implements Collider {
   draggable = undefined;
   vertices: PolygonVertices;
   color: number;
@@ -30,12 +41,12 @@ class Polygon extends Component {
   constructor(vertices: PolygonVertices, options?: PolygonOptions) {
     super();
 
-    const { color } = { ...defaultShapeOptions, ...options };
+    const { color, opacity } = { ...defaultShapeOptions, ...options };
 
-    const shape = new Shape(vertices);
+    const shape = new Shape(vertices.map((e) => toVector2(e)));
     const material = new MeshBasicMaterial({
       color: color,
-      opacity: 0.6,
+      opacity: opacity,
       transparent: true,
     });
     const geometry = new ShapeGeometry(shape);
@@ -57,14 +68,49 @@ class Polygon extends Component {
     lines.push([lastVertex, firstVertex]);
 
     lines.forEach((l) => {
-      group.add(new Line(l[0], l[1], { color: 0x080007 }));
+      group.add(new Line(l[0], l[1], { color: 0x080007, opacity: opacity }));
     });
     this.add(group);
     this.object = group;
-
     this.vertices = vertices;
     this.color = color ?? 0xfaa307;
   }
+  collidesWith(other: Object3D): boolean {
+    const box1 = new Box3().setFromObject(this);
+    const box2 = new Box3().setFromObject(other);
+
+    return box1.intersectsBox(box2);
+  }
+  distanceTo(other: Object3D<Event>): number {
+    const box1 = new Box3().setFromObject(this);
+    const box2 = new Box3().setFromObject(other);
+
+    const center1 = new Vector3();
+    const center2 = new Vector3();
+    box1.getCenter(center1);
+    box2.getCenter(center2);
+    center1.setZ(0);
+    center2.setZ(0);
+
+    return center1.distanceTo(center2);
+  }
+
+  setPosition(position: InputPosition) {
+    this.position.set(
+      toVector2(position).x,
+      toVector2(position).y,
+      this.position.z
+    );
+    this.children.forEach((child) => {
+      if (child instanceof Object3D) {
+        child.position.set(
+          toVector2(position).x,
+          toVector2(position).y,
+          this.position.z
+        );
+      }
+    });
+  }
 
   /*   update(camera: OrthographicCamera) {
     this.remove(this.object);