Circle function and UI tool (#3860)

* circle

* fix another example

* fix bad comment

* toPoint fix

* cargo fmt

* resolve most of the tests

* fix last test

* missed circle in bracket

* remove console error

* fmt

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu-latest)

* A snapshot a day keeps the bugs away! 📷🐛 (OS: windows-latest)

* trigger ci

* remove three dot menu for circle

* make sure circle can be extruded

* fix up after merge

* add extrude test for circle

* clean up

* typo

* A snapshot a day keeps the bugs away! 📷🐛 (OS: windows-latest)

* Revert "A snapshot a day keeps the bugs away! 📷🐛 (OS: windows-latest)"

This reverts commit 03f8eeb542.

* update docs again

* cmd bar test serialisation improvements

* tiny clean up

* fix after: Replace kittycad crate with kittycad-modeling-cmds

* fmt

* rename fix

* Update src/lib/toolbar.ts

Co-authored-by: Frank Noirot <frank@zoo.dev>

* add another error to list

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu-latest)

* image updates

* Revert "A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu-latest)"

This reverts commit 505bb20bea.

* update markdown

* skip un reproducable windows test failure

* rust review

* leave issue todo comment

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Frank Noirot <frank@zoo.dev>

src/clientSideScene/sceneInfra.ts

@@ -92,6 +92,8 @@ interface OnMoveCallbackArgs {
 // This singleton class is responsible for all of the under the hood setup for the client side scene.
 // That is the cameras and switching between them, raycasters for click mouse events and their abstractions (onClick etc), setting up controls.
 // Anything that added the the scene for the user to interact with is probably in SceneEntities.ts
+
+type Voidish = void | Promise<void>
 export class SceneInfra {
   static instance: SceneInfra
   scene: Scene
@@ -107,21 +109,21 @@ export class SceneInfra {
   _theme: Themes = Themes.System
   extraSegmentTexture: Texture
   lastMouseState: MouseState = { type: 'idle' }
-  onDragStartCallback: (arg: OnDragCallbackArgs) => void = () => {}
-  onDragEndCallback: (arg: OnDragCallbackArgs) => void = () => {}
-  onDragCallback: (arg: OnDragCallbackArgs) => void = () => {}
-  onMoveCallback: (arg: OnMoveCallbackArgs) => void = () => {}
-  onClickCallback: (arg: OnClickCallbackArgs) => void = () => {}
-  onMouseEnter: (arg: OnMouseEnterLeaveArgs) => void = () => {}
-  onMouseLeave: (arg: OnMouseEnterLeaveArgs) => void = () => {}
+  onDragStartCallback: (arg: OnDragCallbackArgs) => Voidish = () => {}
+  onDragEndCallback: (arg: OnDragCallbackArgs) => Voidish = () => {}
+  onDragCallback: (arg: OnDragCallbackArgs) => Voidish = () => {}
+  onMoveCallback: (arg: OnMoveCallbackArgs) => Voidish = () => {}
+  onClickCallback: (arg: OnClickCallbackArgs) => Voidish = () => {}
+  onMouseEnter: (arg: OnMouseEnterLeaveArgs) => Voidish = () => {}
+  onMouseLeave: (arg: OnMouseEnterLeaveArgs) => Voidish = () => {}
   setCallbacks = (callbacks: {
-    onDragStart?: (arg: OnDragCallbackArgs) => void
-    onDragEnd?: (arg: OnDragCallbackArgs) => void
-    onDrag?: (arg: OnDragCallbackArgs) => void
-    onMove?: (arg: OnMoveCallbackArgs) => void
-    onClick?: (arg: OnClickCallbackArgs) => void
-    onMouseEnter?: (arg: OnMouseEnterLeaveArgs) => void
-    onMouseLeave?: (arg: OnMouseEnterLeaveArgs) => void
+    onDragStart?: (arg: OnDragCallbackArgs) => Voidish
+    onDragEnd?: (arg: OnDragCallbackArgs) => Voidish
+    onDrag?: (arg: OnDragCallbackArgs) => Voidish
+    onMove?: (arg: OnMoveCallbackArgs) => Voidish
+    onClick?: (arg: OnClickCallbackArgs) => Voidish
+    onMouseEnter?: (arg: OnMouseEnterLeaveArgs) => Voidish
+    onMouseLeave?: (arg: OnMouseEnterLeaveArgs) => Voidish
   }) => {
     this.onDragStartCallback = callbacks.onDragStart || this.onDragStartCallback
     this.onDragEndCallback = callbacks.onDragEnd || this.onDragEndCallback
@@ -389,7 +391,7 @@ export class SceneInfra {
       intersection: planeIntersects[0],
     }
   }
-  onMouseMove = (mouseEvent: MouseEvent) => {
+  onMouseMove = async (mouseEvent: MouseEvent) => {
     this.currentMouseVector.x = (mouseEvent.clientX / window.innerWidth) * 2 - 1
     this.currentMouseVector.y =
       -(mouseEvent.clientY / window.innerHeight) * 2 + 1
@@ -414,7 +416,7 @@ export class SceneInfra {
         planeIntersectPoint.twoD &&
         planeIntersectPoint.threeD
       ) {
-        this.onDragCallback({
+        await this.onDragCallback({
           mouseEvent,
           intersectionPoint: {
             twoD: planeIntersectPoint.twoD,
@@ -433,7 +435,7 @@ export class SceneInfra {
       planeIntersectPoint.twoD &&
       planeIntersectPoint.threeD
     ) {
-      this.onMoveCallback({
+      await this.onMoveCallback({
         mouseEvent,
         intersectionPoint: {
           twoD: planeIntersectPoint.twoD,
@@ -448,12 +450,12 @@ export class SceneInfra {
       if (this.hoveredObject !== firstIntersectObject) {
         const hoveredObj = this.hoveredObject
         this.hoveredObject = null
-        this.onMouseLeave({
+        await this.onMouseLeave({
           selected: hoveredObj,
           mouseEvent: mouseEvent,
         })
         this.hoveredObject = firstIntersectObject
-        this.onMouseEnter({
+        await this.onMouseEnter({
           selected: this.hoveredObject,
           dragSelected: this.selected?.object,
           mouseEvent: mouseEvent,
@@ -468,7 +470,7 @@ export class SceneInfra {
       if (this.hoveredObject) {
         const hoveredObj = this.hoveredObject
         this.hoveredObject = null
-        this.onMouseLeave({
+        await this.onMouseLeave({
           selected: hoveredObj,
           dragSelected: this.selected?.object,
           mouseEvent: mouseEvent,
@@ -555,7 +557,7 @@ export class SceneInfra {
     }
   }
 
-  onMouseUp = (mouseEvent: MouseEvent) => {
+  onMouseUp = async (mouseEvent: MouseEvent) => {
     this.currentMouseVector.x = (mouseEvent.clientX / window.innerWidth) * 2 - 1
     this.currentMouseVector.y =
       -(mouseEvent.clientY / window.innerHeight) * 2 + 1
@@ -565,7 +567,7 @@ export class SceneInfra {
     if (this.selected) {
       if (this.selected.hasBeenDragged) {
         // TODO do the types properly here
-        this.onDragEndCallback({
+        await this.onDragEndCallback({
           intersectionPoint: {
             twoD: planeIntersectPoint?.twoD as any,
             threeD: planeIntersectPoint?.threeD as any,
@@ -586,7 +588,7 @@ export class SceneInfra {
         }
       } else if (planeIntersectPoint?.twoD && planeIntersectPoint?.threeD) {
         // fire onClick event as there was no drags
-        this.onClickCallback({
+        await this.onClickCallback({
           mouseEvent,
           intersectionPoint: {
             twoD: planeIntersectPoint.twoD,
@@ -596,17 +598,17 @@ export class SceneInfra {
           selected: this.selected.object,
         })
       } else if (planeIntersectPoint) {
-        this.onClickCallback({
+        await this.onClickCallback({
           mouseEvent,
           intersects,
         })
       } else {
-        this.onClickCallback({ mouseEvent, intersects })
+        await this.onClickCallback({ mouseEvent, intersects })
       }
       // Clear the selected state whether it was dragged or not
       this.selected = null
     } else if (planeIntersectPoint?.twoD && planeIntersectPoint?.threeD) {
-      this.onClickCallback({
+      await this.onClickCallback({
         mouseEvent,
         intersectionPoint: {
           twoD: planeIntersectPoint.twoD,
@@ -615,7 +617,7 @@ export class SceneInfra {
         intersects,
       })
     } else {
-      this.onClickCallback({ mouseEvent, intersects })
+      await this.onClickCallback({ mouseEvent, intersects })
     }
   }
   updateOtherSelectionColors = (otherSelections: Axis[]) => {