3-point circle interactive component (#4982)

* Add dragging behavior to 3 point circle

Uses our talked about technique of calling Rust functions to calculate new
geometry coordinates and parameters. It works very well!

Need to have the modeling app show "edit sketch" still.

* Cargo fmt

* cargo fmt

* Address Jon's comments

* Fix clippy

* Dont use isNaN

* Make points easier to select (enlarge)

* Fix circle button not being activated

* Ensure efficiency of updating editor vs execution

* Make cargo clippy happy

src/clientSideScene/segments.ts

@@ -9,6 +9,9 @@ import {
   ExtrudeGeometry,
   Group,
   LineCurve3,
+  LineBasicMaterial,
+  LineDashedMaterial,
+  Line,
   Mesh,
   MeshBasicMaterial,
   NormalBufferAttributes,
@@ -1003,6 +1006,49 @@ export function createArcGeometry({
   return geo
 }
 
+// (lee) The above is much more complex than necessary.
+// I've derived the new code from:
+// https://threejs.org/docs/#api/en/extras/curves/EllipseCurve
+// I'm not sure why it wasn't done like this in the first place?
+// I don't touch the code above because it may break something else.
+export function createCircleGeometry({
+  center,
+  radius,
+  color,
+  isDashed = false,
+  scale = 1,
+}: {
+  center: Coords2d
+  radius: number
+  color: number
+  isDashed?: boolean
+  scale?: number
+}): Line {
+  const circle = new EllipseCurve(
+    center[0],
+    center[1],
+    radius,
+    radius,
+    0,
+    Math.PI * 2,
+    true,
+    scale
+  )
+  const points = circle.getPoints(75) // just enough points to not see edges.
+  const geometry = new BufferGeometry().setFromPoints(points)
+  const material = !isDashed
+    ? new LineBasicMaterial({ color })
+    : new LineDashedMaterial({
+        color,
+        scale,
+        dashSize: 6,
+        gapSize: 6,
+      })
+  const line = new Line(geometry, material)
+  line.computeLineDistances()
+  return line
+}
+
 export function dashedStraight(
   from: Coords2d,
   to: Coords2d,