Make updating code controls async

state/code/arrow.ts

@@ -36,7 +36,7 @@ export default class Arrow extends CodeShape<ArrowShape> {
 
     super({
       id: uniqueId(),
-      seed: Math.random(),
+
       type: ShapeType.Arrow,
       isGenerated: false,
       name: 'Arrow',

state/code/control.ts

@@ -13,17 +13,17 @@ export const codeControls = new Set<CodeControl>([])
 /* ----------------- Start Copy Here ---------------- */
 
 export class Control<T extends CodeControl> {
-  control: T
+  _control: T
 
-  constructor(control: Omit<T, 'id'>) {
-    this.control = { ...control, id: uniqueId() } as T
-    codeControls.add(this.control)
+  constructor(control: T) {
+    this._control = { ...control }
+    codeControls.add(this._control)
 
     // Could there be a better way to prevent this?
     // When updating, constructor should just bind to
     // the existing control rather than creating a new one?
     if (!(window as any).isUpdatingCode) {
-      controls[this.control.label] = this.control.value
+      controls[this._control.label] = this._control.value
     }
   }
 
@@ -32,39 +32,52 @@ export class Control<T extends CodeControl> {
     delete controls[this.control.label]
   }
 
+  get control(): T {
+    return this._control
+  }
+
+  get id(): string {
+    return this.control.id
+  }
+
   get value(): T['value'] {
     return this.control.value
   }
-
-  set value(value: T['value']) {
-    this.control.value = value
-  }
 }
 
-type ControlProps<T extends CodeControl> = Omit<Partial<T>, 'id' | 'type'>
+type ControlProps<T extends CodeControl> = Omit<Partial<T>, 'type'>
 
 export class NumberControl extends Control<NumberCodeControl> {
   constructor(options: ControlProps<NumberCodeControl>) {
-    const { label = 'Number', value = 0, step = 1 } = options
+    const { id = uniqueId(), label = 'Number', value = 0, step = 1 } = options
+
     super({
       type: ControlType.Number,
       ...options,
       label,
       value,
       step,
+      id,
     })
   }
 }
 
 export class VectorControl extends Control<VectorCodeControl> {
   constructor(options: ControlProps<VectorCodeControl>) {
-    const { label = 'Vector', value = [0, 0], isNormalized = false } = options
+    const {
+      id = uniqueId(),
+      label = 'Vector',
+      value = [0, 0],
+      isNormalized = false,
+    } = options
+
     super({
       type: ControlType.Vector,
       ...options,
       label,
       value,
       isNormalized,
+      id,
     })
   }
 }

state/code/dot.ts

@@ -9,7 +9,7 @@ export default class Dot extends CodeShape<DotShape> {
   constructor(props = {} as ShapeProps<DotShape>) {
     super({
       id: uniqueId(),
-      seed: Math.random(),
+
       parentId: (window as any).currentPageId,
       type: ShapeType.Dot,
       isGenerated: true,

state/code/draw.ts

@@ -9,7 +9,7 @@ export default class Draw extends CodeShape<DrawShape> {
   constructor(props = {} as ShapeProps<DrawShape>) {
     super({
       id: uniqueId(),
-      seed: Math.random(),
+
       type: ShapeType.Draw,
       isGenerated: false,
       parentId: (window as any).currentPageId,

state/code/ellipse.ts

@@ -9,7 +9,6 @@ export default class Ellipse extends CodeShape<EllipseShape> {
   constructor(props = {} as ShapeProps<EllipseShape>) {
     super({
       id: uniqueId(),
-      seed: Math.random(),
       parentId: (window as any).currentPageId,
       type: ShapeType.Ellipse,
       isGenerated: true,

state/code/index.ts

@@ -184,6 +184,10 @@ export default class CodeShape<T extends Shape> {
     return this
   }
 
+  get id(): string {
+    return this._shape.id
+  }
+
   /**
    * The shape's underlying shape.
    */

state/code/line.ts

@@ -9,7 +9,7 @@ export default class Line extends CodeShape<LineShape> {
   constructor(props = {} as ShapeProps<LineShape>) {
     super({
       id: uniqueId(),
-      seed: Math.random(),
+
       parentId: (window as any).currentPageId,
       type: ShapeType.Line,
       isGenerated: true,

state/code/polyline.ts

@@ -9,7 +9,7 @@ export default class Polyline extends CodeShape<PolylineShape> {
   constructor(props = {} as ShapeProps<PolylineShape>) {
     super({
       id: uniqueId(),
-      seed: Math.random(),
+
       parentId: (window as any).currentPageId,
       type: ShapeType.Polyline,
       isGenerated: true,

state/code/ray.ts

@@ -9,7 +9,7 @@ export default class Ray extends CodeShape<RayShape> {
   constructor(props = {} as ShapeProps<RayShape>) {
     super({
       id: uniqueId(),
-      seed: Math.random(),
+
       type: ShapeType.Ray,
       isGenerated: true,
       name: 'Ray',

state/code/rectangle.ts

@@ -9,7 +9,7 @@ export default class Rectangle extends CodeShape<RectangleShape> {
   constructor(props = {} as ShapeProps<RectangleShape>) {
     super({
       id: uniqueId(),
-      seed: Math.random(),
+
       parentId: (window as any).currentPageId,
       type: ShapeType.Rectangle,
       isGenerated: true,