Adds more tests for code

__tests__/__snapshots__/code.test.ts.snap

@@ -1,6 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`selection creates a code control: generated code controls from code 1`] = `Object {}`;
+exports[`selection creates a code control: generated code controls from code 1`] = `
+Object {
+  "test-number-control": Object {
+    "id": "test-number-control",
+    "label": "x",
+    "step": 1,
+    "type": "number",
+    "value": 0,
+  },
+}
+`;
 
 exports[`selection generates a draw shape: generated draw from code 1`] = `
 Array [
@@ -75,6 +85,35 @@ Array [
 ]
 `;
 
+exports[`selection generates a text shape: generated draw from code 1`] = `
+Array [
+  Object {
+    "childIndex": 1,
+    "id": "test-text",
+    "isAspectRatioLocked": false,
+    "isGenerated": true,
+    "isHidden": false,
+    "isLocked": false,
+    "name": "Test text",
+    "parentId": "page1",
+    "point": Array [
+      100,
+      100,
+    ],
+    "rotation": 0,
+    "scale": 1,
+    "style": Object {
+      "color": "Red",
+      "dash": "Dotted",
+      "isFilled": false,
+      "size": "Large",
+    },
+    "text": "Hello world!",
+    "type": "text",
+  },
+]
+`;
+
 exports[`selection generates an arrow shape: generated draw from code 1`] = `
 Array [
   Object {
@@ -230,3 +269,33 @@ Object {
   },
 }
 `;
+
+exports[`selection updates a code control: rectangle in state after changing code control 1`] = `
+Object {
+  "childIndex": 1,
+  "id": "test-rectangle",
+  "isAspectRatioLocked": false,
+  "isGenerated": true,
+  "isHidden": false,
+  "isLocked": false,
+  "name": "Test Rectangle",
+  "parentId": "page1",
+  "point": Array [
+    0,
+    100,
+  ],
+  "radius": 2,
+  "rotation": 0,
+  "size": Array [
+    0,
+    0,
+  ],
+  "style": Object {
+    "color": "Red",
+    "dash": "Dotted",
+    "isFilled": false,
+    "size": "Medium",
+  },
+  "type": "rectangle",
+}
+`;

__tests__/code.test.ts

@@ -1,6 +1,6 @@
 import state from 'state'
 import { generateFromCode } from 'state/code/generate'
-import { getShapes } from 'utils'
+import { getShape, getShapes } from 'utils'
 import * as json from './__mocks__/document.json'
 
 jest.useRealTimers()
@@ -56,16 +56,9 @@ describe('selection', () => {
 
   it('creates a code control', async () => {
     const code = `
-    const rectangle = new Rectangle({
+    new NumberControl({
-      id: "test-rectangle",
+      id: "test-number-control",
-      name: 'Test Rectangle',
+      label: "x"
-      point: [100, 100],
-      size: [200, 200],
-      style: {
-        size: SizeStyle.Medium,
-        color: ColorStyle.Red,
-        dash: DashStyle.Dotted,
-      },
     })
     `
 
@@ -80,18 +73,6 @@ describe('selection', () => {
 
   it('updates a code control', async () => {
     const code = `
-    const rectangle = new Rectangle({
-      id: "test-rectangle",
-      name: 'Test Rectangle',
-      point: [100, 100],
-      size: [200, 200],
-      style: {
-        size: SizeStyle.Medium,
-        color: ColorStyle.Red,
-        dash: DashStyle.Dotted,
-      },
-    })
-
     new NumberControl({
       id: "test-number-control",
       label: "x"
@@ -101,6 +82,18 @@ describe('selection', () => {
       id: "test-vector-control",
       label: "size"
     })
+
+    const rectangle = new Rectangle({
+      id: "test-rectangle",
+      name: 'Test Rectangle',
+      point: [controls.x, 100],
+      size: controls.size,
+      style: {
+        size: SizeStyle.Medium,
+        color: ColorStyle.Red,
+        dash: DashStyle.Dotted,
+      },
+    })
     `
 
     const { controls, shapes } = await generateFromCode(state.data, code)
@@ -112,6 +105,10 @@ describe('selection', () => {
     expect(state.data.codeControls).toMatchSnapshot(
       'data in state after changing control'
     )
+
+    expect(getShape(state.data, 'test-rectangle')).toMatchSnapshot(
+      'rectangle in state after changing code control'
+    )
   })
 
   /* -------------------- Readonly -------------------- */
@@ -251,7 +248,7 @@ describe('selection', () => {
   it('generates an arrow shape', async () => {
     state.send('CLEARED_PAGE')
     const code = `
-    const ellipse = new Arrow({
+    const draw = new Arrow({
       id: 'test-draw',
       name: 'Test draw',
       points: [[100, 100], [200,200], [300,300]],
@@ -269,4 +266,27 @@ describe('selection', () => {
 
     expect(getShapes(state.data)).toMatchSnapshot('generated draw from code')
   })
+
+  it('generates a text shape', async () => {
+    state.send('CLEARED_PAGE')
+    const code = `
+    const text = new Text({
+      id: 'test-text',
+      name: 'Test text',
+      point: [100, 100],
+      text: 'Hello world!',
+      style: {
+        size: SizeStyle.Large,
+        color: ColorStyle.Red,
+        dash: DashStyle.Dotted,
+      },
+    })
+    `
+
+    const { controls, shapes } = await generateFromCode(state.data, code)
+
+    state.send('GENERATED_FROM_CODE', { controls, shapes })
+
+    expect(getShapes(state.data)).toMatchSnapshot('generated draw from code')
+  })
 })

state/code/generate.ts

@@ -17,6 +17,7 @@ import {
   Shape,
   DashStyle,
   ColorStyle,
+  FontSize,
   SizeStyle,
 } from 'types'
 import { getPage, getShapes } from 'utils'
@@ -39,6 +40,7 @@ const baseScope = {
   DashStyle,
   ColorStyle,
   SizeStyle,
+  FontSize,
 }
 
 /**

state/code/text.ts

@@ -1,7 +1,8 @@
 import CodeShape from './index'
 import { uniqueId } from 'utils'
-import { TextShape, ShapeProps, ShapeType, FontSize } from 'types'
+import { TextShape, ShapeProps, ShapeType } from 'types'
 import { defaultStyle } from 'state/shape-styles'
+import { getShapeUtils } from 'state/shape-utils'
 
 /* ----------------- Start Copy Here ---------------- */
 
@@ -22,7 +23,6 @@ export default class Text extends CodeShape<TextShape> {
       isHidden: false,
       text: 'Text',
       scale: 1,
-      fontSize: FontSize.Medium,
       ...props,
       style: {
         ...defaultStyle,
@@ -30,4 +30,12 @@ export default class Text extends CodeShape<TextShape> {
       },
     })
   }
+
+  get scale(): number {
+    return this.shape.scale
+  }
+
+  set scale(scale: number) {
+    getShapeUtils(this.shape).setProperty(this.shape, 'scale', scale)
+  }
 }

state/shape-utils/text.tsx

@@ -1,6 +1,6 @@
 import { uniqueId, isMobile } from 'utils'
 import vec from 'utils/vec'
-import { TextShape, ShapeType, FontSize } from 'types'
+import { TextShape, ShapeType } from 'types'
 import {
   defaultStyle,
   getFontSize,
@@ -53,7 +53,6 @@ const text = registerShapeUtils<TextShape>({
   create(props) {
     return {
       id: uniqueId(),
-
       type: ShapeType.Text,
       isGenerated: false,
       name: 'Text',
@@ -67,7 +66,6 @@ const text = registerShapeUtils<TextShape>({
       style: defaultStyle,
       text: '',
       scale: 1,
-      fontSize: FontSize.Medium,
       ...props,
     }
   },
@@ -118,6 +116,7 @@ const text = registerShapeUtils<TextShape>({
               fontSize={fontSize}
               width={bounds.width}
               height={bounds.height}
+              fill={styles.stroke}
               dominantBaseline="hanging"
             >
               {str}

types.ts

@@ -182,7 +182,6 @@ export interface TextShape extends BaseShape {
   type: ShapeType.Text
   text: string
   scale: number
-  fontSize: FontSize
 }
 
 export interface GroupShape extends BaseShape {