Hook up circle tool to client side scene, still missing displaying circle in sketch mode

src/Toolbar.tsx

@@ -193,6 +193,35 @@ export const Toolbar = () => {
                 Rectangle
               </ActionButton>
             </li>
+            <li className="contents" key="circle-button">
+              <ActionButton
+                className={buttonClassName}
+                Element="button"
+                onClick={() =>
+                  state.matches('Sketch.Circle tool')
+                    ? send('CancelSketch')
+                    : send('Equip circle tool')
+                }
+                aria-pressed={state.matches('Sketch.Circle tool')}
+                icon={{
+                  icon: 'circle',
+                  iconClassName,
+                  bgClassName,
+                }}
+                disabled={
+                  (!state.can('Equip circle tool') &&
+                    !state.matches('Sketch.Circle tool')) ||
+                  disableAllButtons
+                }
+                title={
+                  state.can('Equip circle tool')
+                    ? 'Circle'
+                    : 'Can only be used when a sketch is empty currently'
+                }
+              >
+                Circle
+              </ActionButton>
+            </li>
           </>
         )}
         {state.matches('Sketch.SketchIdle') &&

src/clientSideScene/sceneEntities.ts

@@ -97,6 +97,7 @@ import {
   getRectangleCallExpressions,
   updateRectangleSketch,
 } from 'lib/rectangleTool'
+import { circleAsCallExpressions, updateCircleSketch } from 'lib/circleTool'
 
 type DraftSegment = 'line' | 'tangentialArcTo'
 
@@ -580,7 +581,7 @@ export class SceneEntities {
       ...this.mouseEnterLeaveCallbacks(),
     })
   }
-  setupRectangleOriginListener = () => {
+  setupOriginListener = (type: 'circle' | 'rectangle') => {
     sceneInfra.setCallbacks({
       onClick: (args) => {
         const twoD = args.intersectionPoint?.twoD
@@ -589,7 +590,7 @@ export class SceneEntities {
           return
         }
         sceneInfra.modelingSend({
-          type: 'Add rectangle origin',
+          type: `Add ${type} origin`,
           data: [twoD.x, twoD.y],
         })
       },
@@ -747,6 +748,154 @@ export class SceneEntities {
       },
     })
   }
+  setupDraftCircle = async (
+    sketchPathToNode: PathToNode,
+    forward: [number, number, number],
+    up: [number, number, number],
+    sketchOrigin: [number, number, number],
+    circleOrigin: [x: number, y: number]
+  ) => {
+    let _ast = JSON.parse(JSON.stringify(kclManager.ast))
+
+    const variableDeclarationName =
+      getNodeFromPath<VariableDeclaration>(
+        _ast,
+        sketchPathToNode || [],
+        'VariableDeclaration'
+      )?.node?.declarations?.[0]?.id?.name || ''
+
+    const tags: [string] = [findUniqueName(_ast, 'circle')]
+
+    const startSketchOn = getNodeFromPath<VariableDeclaration>(
+      _ast,
+      sketchPathToNode || [],
+      'VariableDeclaration'
+    )?.node?.declarations
+
+    const startSketchOnInit = startSketchOn?.[0]?.init
+    startSketchOn[0].init = createPipeExpression([
+      startSketchOnInit,
+      ...circleAsCallExpressions(circleOrigin, tags),
+    ])
+
+    _ast = parse(recast(_ast))
+
+    const { programMemoryOverride, truncatedAst } = await this.setupSketch({
+      sketchPathToNode,
+      forward,
+      up,
+      position: sketchOrigin,
+      maybeModdedAst: _ast,
+      draftExpressionsIndices: { start: 0, end: 1 },
+    })
+
+    sceneInfra.setCallbacks({
+      onMove: async (args) => {
+        // Update the radius of the draft rectangle
+        const pathToNodeTwo = JSON.parse(JSON.stringify(sketchPathToNode))
+        pathToNodeTwo[1][0] = 0
+
+        const sketchInit = getNodeFromPath<VariableDeclaration>(
+          truncatedAst,
+          pathToNodeTwo || [],
+          'VariableDeclaration'
+        )?.node?.declarations?.[0]?.init
+
+        const x = (args.intersectionPoint.twoD.x || 0) - circleOrigin[0]
+        const y = (args.intersectionPoint.twoD.y || 0) - circleOrigin[1]
+
+        if (sketchInit.type === 'PipeExpression') {
+          updateCircleSketch(sketchInit, x, y, tags[0])
+        }
+
+        const { programMemory } = await executeAst({
+          ast: truncatedAst,
+          useFakeExecutor: true,
+          engineCommandManager: this.engineCommandManager,
+          programMemoryOverride,
+        })
+        this.sceneProgramMemory = programMemory
+        const sketchGroup = programMemory.root[
+          variableDeclarationName
+        ] as SketchGroup
+        const sgPaths = sketchGroup.value
+        const orthoFactor = orthoScale(sceneInfra.camControls.camera)
+
+        this.updateSegment(
+          sketchGroup.start,
+          0,
+          0,
+          _ast,
+          orthoFactor,
+          sketchGroup
+        )
+        sgPaths.forEach((seg, index) =>
+          this.updateSegment(seg, index, 0, _ast, orthoFactor, sketchGroup)
+        )
+      },
+      onClick: async (args) => {
+        // Commit the circle to the full AST/code and return to sketch.idle
+        const radiusPoint = args.intersectionPoint?.twoD
+        if (!radiusPoint || args.mouseEvent.button !== 0) return
+
+        const x = roundOff((radiusPoint.x || 0) - circleOrigin[0])
+        const y = roundOff((radiusPoint.y || 0) - circleOrigin[1])
+
+        const sketchInit = getNodeFromPath<VariableDeclaration>(
+          _ast,
+          sketchPathToNode || [],
+          'VariableDeclaration'
+        )?.node?.declarations?.[0]?.init
+
+        if (sketchInit.type === 'PipeExpression') {
+          updateCircleSketch(sketchInit, x, y, tags[0])
+
+          _ast = parse(recast(_ast))
+
+          console.log('onClick', {
+            sketchInit: sketchInit,
+            _ast,
+            x,
+            y,
+            truncatedAst,
+          })
+
+          // Update the primary AST and unequip the rectangle tool
+          await kclManager.executeAstMock(_ast)
+          sceneInfra.modelingSend({ type: 'CancelSketch' })
+
+          const { programMemory } = await executeAst({
+            ast: _ast,
+            useFakeExecutor: true,
+            engineCommandManager: this.engineCommandManager,
+            programMemoryOverride,
+          })
+
+          // Prepare to update the THREEjs scene
+          this.sceneProgramMemory = programMemory
+          const sketchGroup = programMemory.root[
+            variableDeclarationName
+          ] as SketchGroup
+          const sgPaths = sketchGroup.value
+          const orthoFactor = orthoScale(sceneInfra.camControls.camera)
+
+          // Update the starting segment of the THREEjs scene
+          this.updateSegment(
+            sketchGroup.start,
+            0,
+            0,
+            _ast,
+            orthoFactor,
+            sketchGroup
+          )
+          // Update the rest of the segments of the THREEjs scene
+          sgPaths.forEach((seg, index) =>
+            this.updateSegment(seg, index, 0, _ast, orthoFactor, sketchGroup)
+          )
+        }
+      },
+    })
+  }
   setupSketchIdleCallbacks = ({
     pathToNode,
     up,

src/components/CustomIcon.tsx

@@ -61,6 +61,16 @@ const CustomIconMap = {
       />
     </svg>
   ),
+  circle: (
+    <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10 2.5C9.01509 2.5 8.03982 2.69399 7.12988 3.0709C6.21994 3.44781 5.39314 4.00026 4.6967 4.6967C4.00026 5.39314 3.44782 6.21993 3.07091 7.12987C2.694 8.03981 2.5 9.01508 2.5 10C2.5 10.9849 2.69399 11.9602 3.0709 12.8701C3.44781 13.7801 4.00026 14.6069 4.6967 15.3033C5.39314 15.9997 6.21993 16.5522 7.12987 16.9291C8.03982 17.306 9.01509 17.5 10 17.5C10.9849 17.5 11.9602 17.306 12.8701 16.9291C13.7801 16.5522 14.6069 15.9997 15.3033 15.3033C15.9997 14.6069 16.5522 13.7801 16.9291 12.8701C17.306 11.9602 17.5 10.9849 17.5 10C17.5 9.01509 17.306 8.03982 16.9291 7.12988C16.5522 6.21993 15.9997 5.39314 15.3033 4.6967C14.6069 4.00026 13.7801 3.44781 12.8701 3.0709C11.9602 2.69399 10.9849 2.5 10 2.5ZM6.7472 2.14702C7.77847 1.71986 8.88377 1.5 10 1.5C11.1162 1.5 12.2215 1.71986 13.2528 2.14702C14.2841 2.57419 15.2211 3.20029 16.0104 3.98959C16.7997 4.77889 17.4258 5.71592 17.853 6.74719C18.2801 7.77846 18.5 8.88377 18.5 10C18.5 11.1162 18.2801 12.2215 17.853 13.2528C17.4258 14.2841 16.7997 15.2211 16.0104 16.0104C15.2211 16.7997 14.2841 17.4258 13.2528 17.853C12.2215 18.2801 11.1162 18.5 10 18.5C8.88376 18.5 7.77846 18.2801 6.74719 17.853C5.71592 17.4258 4.77889 16.7997 3.98959 16.0104C3.20029 15.2211 2.57419 14.2841 2.14702 13.2528C1.71986 12.2215 1.5 11.1162 1.5 10C1.5 8.88376 1.71986 7.77845 2.14703 6.74719C2.57419 5.71592 3.2003 4.77889 3.9896 3.98959C4.7789 3.20029 5.71593 2.57419 6.7472 2.14702Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
   clipboardCheckmark: (
     <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path

src/lib/circleTool.ts

@@ -0,0 +1,59 @@
+import {
+  createArrayExpression,
+  createBinaryExpression,
+  createCallExpressionStdLib,
+  createLiteral,
+  createPipeSubstitution,
+} from 'lang/modifyAst'
+import { roundOff } from './utils'
+import {
+  ArrayExpression,
+  CallExpression,
+  Literal,
+  PipeExpression,
+} from 'lang/wasm'
+
+/**
+ * Returns AST expressions for this KCL code:
+ * const yo = startSketchOn('XY')
+ *   |> circle([0, 0], 0, %)
+ */
+export const circleAsCallExpressions = (
+  circleOrigin: [number, number],
+  tags: [string]
+) => [
+  createCallExpressionStdLib('circle', [
+    createArrayExpression([
+      createLiteral(roundOff(circleOrigin[0])),
+      createLiteral(roundOff(circleOrigin[1])),
+    ]),
+    createLiteral(10),
+    createPipeSubstitution(),
+    createLiteral(tags[0]),
+  ]),
+]
+
+/**
+ * Mutates the pipeExpression to update the circle sketch
+ * @param pipeExpression
+ * @param x
+ * @param y
+ * @param tag
+ */
+export function updateCircleSketch(
+  pipeExpression: PipeExpression,
+  x: number,
+  y: number,
+  tag: string
+) {
+  const circle = pipeExpression.body[1] as CallExpression
+  const origin = circle.arguments[0] as ArrayExpression
+  const originX = (origin.elements[0] as Literal).value
+  const originY = (origin.elements[1] as Literal).value
+
+  const radius = roundOff(
+    Math.sqrt((x - Number(originX)) ** 2 + (y - Number(originY)) ** 2)
+  )
+
+  ;(circle.arguments[1] as Literal) = createLiteral(radius)
+}