Adds Text shape, fixes typing for typescript

components/code-panel/code-editor.tsx

@@ -43,9 +43,7 @@ export default function CodeEditor({
   const rMonaco = useRef<IMonaco>(null)
 
   const handleBeforeMount = useCallback((monaco: Monaco) => {
-    if (monacoRef) {
-      monacoRef.current = monaco
-    }
+    if (monacoRef) monacoRef.current = monaco
     rMonaco.current = monaco
 
     monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
@@ -58,23 +56,22 @@ export default function CodeEditor({
       allowNonTsExtensions: true,
     })
 
+    monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+      allowJs: true,
+      checkJs: false,
+      strict: false,
+      noLib: true,
+      lib: ['es6'],
+      target: monaco.languages.typescript.ScriptTarget.ES2015,
+      allowNonTsExtensions: true,
+    })
+
     monaco.languages.typescript.typescriptDefaults.setEagerModelSync(true)
     monaco.languages.typescript.javascriptDefaults.setEagerModelSync(true)
 
-    monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
-      // noSemanticValidation: true,
-      // noSyntaxValidation: true,
-    })
-
-    monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
-      // noSemanticValidation: true,
-      // noSyntaxValidation: true,
-    })
-
     monaco.languages.typescript.typescriptDefaults.addExtraLib(
       typesImport.content
     )
-
     monaco.languages.typescript.javascriptDefaults.addExtraLib(
       typesImport.content
     )

components/code-panel/types-import.ts

@@ -131,7 +131,6 @@ interface ArrowShape extends BaseShape {
 interface TextShape extends BaseShape {
   type: ShapeType.Text
   text: string
-  size: number[] | 'auto'
   scale: number
   fontSize: FontSize
 }
@@ -2337,6 +2336,36 @@ interface ShapeUtility<K extends Shape> {
 
 
 
+ class Text extends CodeShape<TextShape> {
+  constructor(props = {} as ShapeProps<TextShape>) {
+    super({
+      id: uniqueId(),
+
+      parentId: (window as any).currentPageId,
+      type: ShapeType.Text,
+      isGenerated: true,
+      name: 'Text',
+      childIndex: 0,
+      point: [0, 0],
+      rotation: 0,
+      isAspectRatioLocked: false,
+      isLocked: false,
+      isHidden: false,
+      text: 'Text',
+      scale: 1,
+      fontSize: FontSize.Medium,
+      ...props,
+      style: {
+        ...defaultStyle,
+        ...props.style,
+      },
+    })
+  }
+}
+
+
+
+
  class Rectangle extends CodeShape<RectangleShape> {
   constructor(props = {} as ShapeProps<RectangleShape>) {
     super({
@@ -2371,17 +2400,17 @@ interface ShapeUtility<K extends Shape> {
 
 
 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
     }
   }
 
@@ -2390,39 +2419,52 @@ 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'>
 
 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,
     })
   }
 }
 
 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,
     })
   }
 }

scripts/type-gen.js

@@ -66,6 +66,8 @@ ${await inlineFileContents('/state/code/arrow.ts')}
 
 ${await inlineFileContents('/state/code/draw.ts')}
 
+${await inlineFileContents('/state/code/text.ts')}
+
 ${await inlineFileContents('/state/code/rectangle.ts')}
 
 ${await inlineFileContents('/state/code/control.ts')}

state/code/generate.ts

@@ -6,6 +6,7 @@ import Ray from './ray'
 import Line from './line'
 import Arrow from './arrow'
 import Draw from './draw'
+import Text from './text'
 import Utils from './utils'
 import Vec from 'utils/vec'
 import { NumberControl, VectorControl, codeControls, controls } from './control'
@@ -32,6 +33,7 @@ const baseScope = {
   Utils,
   Arrow,
   Draw,
+  Text,
   VectorControl,
   NumberControl,
   DashStyle,

state/code/text.ts

@@ -0,0 +1,33 @@
+import CodeShape from './index'
+import { uniqueId } from 'utils'
+import { TextShape, ShapeProps, ShapeType, FontSize } from 'types'
+import { defaultStyle } from 'state/shape-styles'
+
+/* ----------------- Start Copy Here ---------------- */
+
+export default class Text extends CodeShape<TextShape> {
+  constructor(props = {} as ShapeProps<TextShape>) {
+    super({
+      id: uniqueId(),
+
+      parentId: (window as any).currentPageId,
+      type: ShapeType.Text,
+      isGenerated: true,
+      name: 'Text',
+      childIndex: 0,
+      point: [0, 0],
+      rotation: 0,
+      isAspectRatioLocked: false,
+      isLocked: false,
+      isHidden: false,
+      text: 'Text',
+      scale: 1,
+      fontSize: FontSize.Medium,
+      ...props,
+      style: {
+        ...defaultStyle,
+        ...props.style,
+      },
+    })
+  }
+}

state/shape-utils/text.tsx

@@ -67,7 +67,6 @@ const text = registerShapeUtils<TextShape>({
       style: defaultStyle,
       text: '',
       scale: 1,
-      size: 'auto',
       fontSize: FontSize.Medium,
       ...props,
     }

types.ts

@@ -181,7 +181,6 @@ export interface ArrowShape extends BaseShape {
 export interface TextShape extends BaseShape {
   type: ShapeType.Text
   text: string
-  size: number[] | 'auto'
   scale: number
   fontSize: FontSize
 }