Fix Arc issues

src/Components/Arc.ts

@@ -86,56 +86,62 @@ class Arc extends Component {
   }
 
   _calcAngle() {
-    const pointAvec2 = toVector2(this.pointA);
-    const pointBvec2 = toVector2(this.pointB);
-    const pointCvec2 = toVector2(this.pointC);
+    const A = toVector2(this.pointA);
+    const B = toVector2(this.pointB);
+    const C = toVector2(this.pointC);
 
-    const vectorBtoA = pointAvec2.clone().sub(pointBvec2);
-    const vectorBtoC = pointCvec2.clone().sub(pointBvec2);
+    const BA = A.sub(B);
+    const BC = C.sub(B);
 
-    const dot = vectorBtoA.dot(vectorBtoC);
-    const det = vectorBtoA.x * vectorBtoC.y - vectorBtoA.y * vectorBtoC.x;
-    let angle = Math.atan2(det, dot);
+    let angle = BA.angle() - BC.angle();
+    angle = angle < 0 ? angle + 2 * Math.PI : angle;
+    return angle;
+  }
 
-    // Normalize the angle to be between 0 and 2π
-    while (angle < 0) angle += 2 * Math.PI;
-    while (angle > 2 * Math.PI) angle -= 2 * Math.PI;
+  _calcVectorAngle(point1: InputPosition, point2: InputPosition) {
+    const vector = toVector2(point2).sub(toVector2(point1));
+    return Math.atan2(vector.y, vector.x);
+  }
 
-    return angle;
+  _updateArc(angle: number, cameraZoom: number) {
+    this._arc.geometry.dispose();
+
+    const B = toVector2(this.pointB);
+    const C = toVector2(this.pointC);
+    const BC = C.sub(B);
+    const startAngle = BC.angle();
+
+    this._arc.geometry = new CircleGeometry(
+      this.radius / cameraZoom,
+      64,
+      startAngle,
+      angle
+    );
+    this._arc.geometry.computeVertexNormals();
   }
 
   _updateOutline(angle: number, cameraZoom: number) {
-    const startAngle = 0;
-    const endAngle = angle;
-    const clockwise = false;
+    const B = toVector2(this.pointB);
+    const C = toVector2(this.pointC);
+    const BC = C.sub(B);
+    const startAngle = BC.angle();
+    const endAngle = startAngle + angle;
 
-    // Create Arc-curve
     const arcCurve = new ArcCurve(
       0,
       0,
       this.radius / cameraZoom,
       startAngle,
       endAngle,
-      clockwise
+      false
     );
-    // Generate points on ArcCurve
+
     const points = arcCurve.getPoints(50);
     this._curvedOutline.geometry.setPositions(
       points.flatMap((v) => [v.x, v.y, 3])
     );
   }
 
-  _updateArc(angle: number, cameraZoom: number) {
-    this._arc.geometry.dispose();
-    this._arc.geometry = new CircleGeometry(
-      this.radius / cameraZoom,
-      64,
-      0,
-      angle
-    );
-    this._arc.geometry.computeVertexNormals();
-  }
-
   _updateText(angle: number, cameraZoom: number) {
     this._text.setText(Math.round((angle * 180) / Math.PI).toString() + "°");
     this._text.position.set(
@@ -154,7 +160,7 @@ class Arc extends Component {
 
   update(camera: OrthographicCamera) {
     const pointBVec = toVector3(this.pointB);
-    this.position.set(pointBVec.x, pointBVec.y, 0);
+    this.position.set(pointBVec.x, pointBVec.y, this.position.z);
 
     const angle = this._calcAngle();
     this._updateOutline(angle, camera.zoom);

src/index.ts

@@ -28,8 +28,8 @@ import Graphica from "./Graphica";
 const a = new Graphica();
 const b = new Grid();
 const p = new Point(0, 0, { draggable: "unrestricted" });
-const pp = new Point(5, 0);
-const ppp = new Point(0, 5);
+const pp = new Point(5, 0, { draggable: "unrestricted" });
+const ppp = new Point(0, 5, { draggable: "unrestricted" });
 const c = new Arc(p, pp, ppp);
 a.add(b);
 a.add(c);