Update labeltext on point to work

src/Components/Arc.ts

@@ -188,5 +188,12 @@ class Arc extends Component {
     this._text.setText(Math.round((angle * 180) / Math.PI).toString() + " °");
     this._text.position.set(-60 / cameraZoom, 0, this._text.position.z);
   }
+
+  public getAngle(unit = "radians"): number {
+    if (unit === "degrees") {
+      return this._calcAngle() * (180 / Math.PI);
+    }
+    return this._calcAngle();
+  }
 }
 export default Arc;

src/Components/Label.ts

@@ -8,26 +8,33 @@ import { InputPosition } from "./types";
 const SCALING_FACTOR = 10;
 
 type LabelOptions = {
-  text: string;
   start: InputPosition;
-  deltaX?: number;
-  deltaY?: number;
+  deltaX: number;
+  deltaY: number;
+};
+
+const defaultLabelOptions: LabelOptions = {
+  start: new Vector2(0, 0),
+  deltaX: 4,
+  deltaY: 20,
 };
 
 class Label extends Component {
-  position: Vector3;
   object: Object3D;
   draggable = undefined;
 
-  constructor({
-    text,
-    start = new Vector2(0, 0),
-    deltaX = 20,
-    deltaY = 4,
-  }: LabelOptions) {
+  constructor(text: string, options?: LabelOptions) {
+    const { start, deltaX, deltaY } = {
+      ...defaultLabelOptions,
+      ...options,
+    };
     super();
     // set position of the point instance
-    this.position = toVector3(start);
+    this.position.set(
+      toVector3(start).x,
+      toVector3(start).y,
+      toVector3(start).z
+    );
 
     // calculate break and end points
     const breakPoint = this.calculateBreakPoint(deltaX, deltaY);
@@ -38,15 +45,14 @@ class Label extends Component {
     const line2 = new Line(breakPoint, endPoint);
     const textComponent = new Text(text, {
       color: "black",
-      fontSize: 22,
+      fontSize: 15,
       anchorY: "middle",
       anchorX: deltaX < 0 ? "right" : "left",
     });
-    textComponent.position.set(
+    textComponent.setPosition([
       endPoint.x + (deltaX < 0 ? -1 : 1) * 10,
       endPoint.y,
-      0.1
-    );
+    ]);
 
     // Create a group to contain both lines and text
     this.object = new Group();
@@ -55,7 +61,7 @@ class Label extends Component {
     this.object.add(textComponent);
 
     // set position of the group
-    this.object.position.set(this.position.x, this.position.y, 0);
+    this.object.position.set(1, 5, 5);
   }
 
   private calculateEndPoint(deltaX: number, deltaY: number) {

src/Components/Line.ts

@@ -160,10 +160,10 @@ class Line extends Component implements Collider {
     (this.geometry as LineGeometry).setPositions([
       startPosition.x,
       startPosition.y,
-      1,
+      1.1,
       endPosition.x,
       endPosition.y,
-      1,
+      1.1,
     ]);
   }
 

src/Components/Point.ts

@@ -28,7 +28,6 @@ const defaultPointOptions = {
 
 class Point extends Component implements Collider, DragListener<Point> {
   dragListeners: ((point: Point) => void)[];
-
   constructor(x = 0, y = 0, options?: PointOptions) {
     super();
     const { color, draggable, decimals, label, dragListeners } = {
@@ -63,6 +62,7 @@ class Point extends Component implements Collider, DragListener<Point> {
           anchorY: "middle",
           anchorX: "left",
           position: [15, 0],
+          responsiveScale: false,
         }
       );
       text.name = "label";

src/Components/Shape.ts

@@ -76,7 +76,13 @@ class Polygon extends Component implements Collider, DragListener<Polygon> {
     lines.push([lastVertex, firstVertex]);
 
     lines.forEach((l) => {
-      group.add(new Line(l[0], l[1], { color: 0x080007, opacity: opacity }));
+      group.add(
+        new Line(l[0], l[1], {
+          color: 0x080007,
+          opacity: opacity,
+          draggable: undefined,
+        })
+      );
     });
     this.add(group);
     this.object = group;
@@ -127,15 +133,6 @@ class Polygon extends Component implements Collider, DragListener<Polygon> {
       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) {

src/Components/Text.ts

@@ -13,6 +13,7 @@ type TextOptions = {
   anchorY?: "top" | "middle" | "bottom";
   anchorX?: "left" | "center" | "right";
   weight?: fontWeight;
+  responsiveScale?: boolean;
 };
 
 const defaultTextOptions = {
@@ -22,6 +23,7 @@ const defaultTextOptions = {
   anchorX: "left",
   anchorY: "bottom",
   weight: "regular" as fontWeight,
+  responsiveScale: true,
 };
 
 const fontMap = {
@@ -36,11 +38,20 @@ type TroikaTextType = InstanceType<typeof TroikaText>;
 class Text extends Component implements Collider {
   draggable = undefined;
   renderText: TroikaTextType;
+  responsiveScale: boolean;
 
   constructor(text?: string, options?: TextOptions) {
     super();
 
-    const { position, color, fontSize, anchorX, anchorY, weight } = {
+    const {
+      position,
+      color,
+      fontSize,
+      anchorX,
+      anchorY,
+      weight,
+      responsiveScale,
+    } = {
       ...defaultTextOptions,
       ...options,
     };
@@ -58,6 +69,7 @@ class Text extends Component implements Collider {
     this.renderText = renderText;
     this.add(renderText);
     this.position.set(pos.x, pos.y, 0.1);
+    this.responsiveScale = responsiveScale;
   }
 
   collidesWith(other: Object3D): boolean {
@@ -99,7 +111,9 @@ class Text extends Component implements Collider {
   }
 
   update(camera: OrthographicCamera) {
-    this.scale.set(1 / camera.zoom, 1 / camera.zoom, 1);
+    if (this.responsiveScale) {
+      this.scale.set(1 / camera.zoom, 1 / camera.zoom, 1);
+    }
   }
 }
 

src/index.ts

@@ -1,49 +1,20 @@
-// export { default as Graphica } from "./Graphica";
-// export { default as Arc } from "./Components/Arc";
-// export { default as Bracket } from "./Components/Bracket";
-// export { default as Button } from "./Components/Button";
-// export { default as Circle } from "./Components/Circle";
-// export { default as Grid } from "./Components/Grid";
-// export { default as InfiniteLine } from "./Components/InfiniteLine";
-// export { default as InputField } from "./Components/InputField";
-// export { default as Label } from "./Components/Label";
-// export { default as Latex } from "./Components/Latex";
-// export { default as Line } from "./Components/Line";
-// export { default as Plot } from "./Components/Plot";
-// export { default as Point } from "./Components/Point";
-// export { default as Polygon } from "./Components/Shape";
-// export { default as Slider } from "./Components/Slider";
-// export { default as Text } from "./Components/Text";
-// export { default as Vector } from "./Components/Vector";
-// export { default as Fraction } from "./Components/Derived/Fraction";
-// export { default as SVGLoader } from "./Components/SVGLoader";
-
-import { Vector3 } from "three";
-import Arc from "./Components/Arc";
-import Grid from "./Components/Grid";
-import Line from "./Components/Line";
-import Point from "./Components/Point";
-import Polygon from "./Components/Shape";
-import Vector from "./Components/Vector";
-import Graphica from "./Graphica";
-
-// export * as three from "three";
-
-const g = new Graphica();
-const gg = new Grid();
-
-const v = new Line([-2, 2], [-10, 0], {
-  draggable: "unrestricted",
-});
-
-const p = new Polygon([
-  [1, 1],
-  [2, 3],
-  [4, 4],
-]);
-
-g.add(p);
-g.add(v);
-g.add(gg);
-console.log(g.draggables);
-g.run((t) => {});
+export { default as Graphica } from "./Graphica";
+export { default as Arc } from "./Components/Arc";
+export { default as Bracket } from "./Components/Bracket";
+export { default as Button } from "./Components/Button";
+export { default as Circle } from "./Components/Circle";
+export { default as Grid } from "./Components/Grid";
+export { default as InfiniteLine } from "./Components/InfiniteLine";
+export { default as InputField } from "./Components/InputField";
+export { default as Label } from "./Components/Label";
+export { default as Latex } from "./Components/Latex";
+export { default as Line } from "./Components/Line";
+export { default as Plot } from "./Components/Plot";
+export { default as Point } from "./Components/Point";
+export { default as Polygon } from "./Components/Shape";
+export { default as Slider } from "./Components/Slider";
+export { default as Text } from "./Components/Text";
+export { default as Vector } from "./Components/Vector";
+export { default as Fraction } from "./Components/Derived/Fraction";
+export { default as SVGLoader } from "./Components/SVGLoader";
+export * as three from "three";