Updates to code editor, utils

components/code-panel/code-editor.tsx

@@ -81,20 +81,29 @@ export default function CodeEditor({
 
     monaco.languages.registerDocumentFormattingEditProvider('typescript', {
       async provideDocumentFormattingEdits(model) {
-        const text = prettier.format(model.getValue(), {
-          parser: 'typescript',
-          plugins: [parserTypeScript],
-          singleQuote: true,
-          trailingComma: 'es5',
-          semi: false,
-        })
-
-        return [
-          {
-            range: model.getFullModelRange(),
-            text,
-          },
-        ]
+        try {
+          const text = prettier.format(model.getValue(), {
+            parser: 'typescript',
+            plugins: [parserTypeScript],
+            singleQuote: true,
+            trailingComma: 'es5',
+            semi: false,
+          })
+
+          return [
+            {
+              range: model.getFullModelRange(),
+              text,
+            },
+          ]
+        } catch (e) {
+          return [
+            {
+              range: model.getFullModelRange(),
+              text: model.getValue(),
+            },
+          ]
+        }
       },
     })
   }, [])

components/code-panel/code-panel.tsx

@@ -5,7 +5,6 @@ import React, { useEffect, useRef } from 'react'
 import state, { useSelector } from 'state'
 import { CodeFile } from 'types'
 import CodeDocs from './code-docs'
-import CodeEditor from './code-editor'
 import { generateFromCode } from 'state/code/generate'
 import * as Panel from '../panel'
 import { IconButton } from '../shared'
@@ -17,6 +16,8 @@ import {
   ChevronUp,
   ChevronDown,
 } from 'react-feather'
+import dynamic from 'next/dynamic'
+const CodeEditor = dynamic(() => import('./code-editor'))
 
 const getErrorLineAndColumn = (e: any) => {
   if ('line' in e) {
@@ -84,7 +85,7 @@ export default function CodePanel(): JSX.Element {
           const { shapes, controls } = generateFromCode(state.data, data.code)
           state.send('GENERATED_FROM_CODE', { shapes, controls })
         } catch (e) {
-          console.error(e)
+          console.error('Got an error!', e)
           error = { message: e.message, ...getErrorLineAndColumn(e) }
         }
 

components/code-panel/types-import.ts

@@ -199,12 +199,10 @@ interface GroupShape extends BaseShape {
   size: number[]
 }
 
-type DeepPartial<T> = {
-  [P in keyof T]?: DeepPartial<T[P]>
+type ShapeProps<T extends Shape> = Partial<T> & {
+  style?: Partial<ShapeStyles>
 }
 
-type ShapeProps<T extends Shape> = DeepPartial<T>
-
 type MutableShape =
   | DotShape
   | EllipseShape
@@ -817,7 +815,7 @@ interface ShapeUtility<K extends Shape> {
  * ## Rectangle
  */
  class Rectangle extends CodeShape<RectangleShape> {
-  constructor(props = {} as Partial<RectangleShape> & Partial<ShapeStyles>) {
+  constructor(props = {} as ShapeProps<RectangleShape>) {
     super({
       id: uniqueId(),
       seed: Math.random(),
@@ -970,69 +968,522 @@ interface ShapeUtility<K extends Shape> {
  * ## Utils
  */
  class Utils {
-  static getPointsBetween(a: number[], b: number[], steps = 6): number[][] {
-    return Array.from(Array(steps))
-      .map((_, i) => {
-        const t = i / steps
-        return t * t * t
-      })
-      .map((t) => [...vec.lrp(a, b, t), (1 - t) / 2])
+  /**
+   * Linear interpolation betwen two numbers.
+   * @param y1
+   * @param y2
+   * @param mu
+   */
+  static lerp(y1: number, y2: number, mu: number): number {
+    mu = Utils.clamp(mu, 0, 1)
+    return y1 * (1 - mu) + y2 * mu
   }
 
-  static getRayRayIntersection(
-    p0: number[],
-    n0: number[],
-    p1: number[],
-    n1: number[]
-  ): number[] {
-    const p0e = vec.add(p0, n0),
-      p1e = vec.add(p1, n1),
-      m0 = (p0e[1] - p0[1]) / (p0e[0] - p0[0]),
-      m1 = (p1e[1] - p1[1]) / (p1e[0] - p1[0]),
-      b0 = p0[1] - m0 * p0[0],
-      b1 = p1[1] - m1 * p1[0],
-      x = (b1 - b0) / (m0 - m1),
-      y = m0 * x + b0
+  /**
+   * Modulate a value between two ranges.
+   * @param value
+   * @param rangeA from [low, high]
+   * @param rangeB to [low, high]
+   * @param clamp
+   */
+  static modulate(
+    value: number,
+    rangeA: number[],
+    rangeB: number[],
+    clamp = false
+  ): number {
+    const [fromLow, fromHigh] = rangeA
+    const [v0, v1] = rangeB
+    const result = v0 + ((value - fromLow) / (fromHigh - fromLow)) * (v1 - v0)
+
+    return clamp
+      ? v0 < v1
+        ? Math.max(Math.min(result, v1), v0)
+        : Math.max(Math.min(result, v0), v1)
+      : result
+  }
 
-    return [x, y]
+  /**
+   * Clamp a value into a range.
+   * @param n
+   * @param min
+   */
+  static clamp(n: number, min: number): number
+  static clamp(n: number, min: number, max: number): number
+  static clamp(n: number, min: number, max?: number): number {
+    return Math.max(min, typeof max !== 'undefined' ? Math.min(n, max) : n)
+  }
+
+  // TODO: replace with a string compression algorithm
+  static compress(s: string): string {
+    return s
+  }
+
+  // TODO: replace with a string decompression algorithm
+  static decompress(s: string): string {
+    return s
+  }
+
+  /**
+   * Recursively clone an object or array.
+   * @param obj
+   */
+  static deepClone<T>(obj: T): T {
+    if (obj === null) return null
+
+    const clone: any = { ...obj }
+
+    Object.keys(obj).forEach(
+      (key) =>
+        (clone[key] =
+          typeof obj[key] === 'object' ? Utils.deepClone(obj[key]) : obj[key])
+    )
+
+    if (Array.isArray(obj)) {
+      clone.length = obj.length
+      return Array.from(clone) as any as T
+    }
+
+    return clone as T
+  }
+
+  /**
+   * Seeded random number generator, using [xorshift](https://en.wikipedia.org/wiki/Xorshift).
+   * The result will always be betweeen -1 and 1.
+   *
+   * Adapted from [seedrandom](https://github.com/davidbau/seedrandom).
+   */
+  static rng(seed = ''): () => number {
+    let x = 0
+    let y = 0
+    let z = 0
+    let w = 0
+
+    function next() {
+      const t = x ^ (x << 11)
+      ;(x = y), (y = z), (z = w)
+      w ^= ((w >>> 19) ^ t ^ (t >>> 8)) >>> 0
+      return w / 0x100000000
+    }
+
+    for (let k = 0; k < seed.length + 64; k++) {
+      ;(x ^= seed.charCodeAt(k) | 0), next()
+    }
+
+    return next
+  }
+
+  /**
+   * Shuffle the contents of an array.
+   * @param arr
+   * @param offset
+   */
+  static shuffleArr<T>(arr: T[], offset: number): T[] {
+    return arr.map((_, i) => arr[(i + offset) % arr.length])
+  }
+
+  /**
+   * Deep compare two arrays.
+   * @param a
+   * @param b
+   */
+  static deepCompareArrays<T>(a: T[], b: T[]): boolean {
+    if (a?.length !== b?.length) return false
+    return Utils.deepCompare(a, b)
   }
 
+  /**
+   * Deep compare any values.
+   * @param a
+   * @param b
+   */
+  static deepCompare<T>(a: T, b: T): boolean {
+    return a === b || JSON.stringify(a) === JSON.stringify(b)
+  }
+
+  /**
+   * Find whether two arrays intersect.
+   * @param a
+   * @param b
+   * @param fn An optional function to apply to the items of a; will check if b includes the result.
+   */
+  static arrsIntersect<T, K>(a: T[], b: K[], fn?: (item: K) => T): boolean
+  static arrsIntersect<T>(a: T[], b: T[]): boolean
+  static arrsIntersect<T>(
+    a: T[],
+    b: unknown[],
+    fn?: (item: unknown) => T
+  ): boolean {
+    return a.some((item) => b.includes(fn ? fn(item) : item))
+  }
+
+  /**
+   * Get the unique values from an array of strings or numbers.
+   * @param items
+   */
+  static uniqueArray<T extends string | number>(...items: T[]): T[] {
+    return Array.from(new Set(items).values())
+  }
+
+  /**
+   * Convert a set to an array.
+   * @param set
+   */
+  static setToArray<T>(set: Set<T>): T[] {
+    return Array.from(set.values())
+  }
+
+  /**
+   * Get the outer of between a circle and a point.
+   * @param C The circle's center.
+   * @param r The circle's radius.
+   * @param P The point.
+   * @param side
+   */
   static getCircleTangentToPoint(
-    A: number[],
-    r0: number,
+    C: number[],
+    r: number,
     P: number[],
     side: number
   ): number[] {
-    const B = vec.lrp(A, P, 0.5),
-      r1 = vec.dist(A, B),
-      delta = vec.sub(B, A),
+    const B = vec.lrp(C, P, 0.5),
+      r1 = vec.dist(C, B),
+      delta = vec.sub(B, C),
       d = vec.len(delta)
 
-    if (!(d <= r0 + r1 && d >= Math.abs(r0 - r1))) {
+    if (!(d <= r + r1 && d >= Math.abs(r - r1))) {
       return
     }
 
-    const a = (r0 * r0 - r1 * r1 + d * d) / (2.0 * d),
+    const a = (r * r - r1 * r1 + d * d) / (2.0 * d),
       n = 1 / d,
-      p = vec.add(A, vec.mul(delta, a * n)),
-      h = Math.sqrt(r0 * r0 - a * a),
+      p = vec.add(C, vec.mul(delta, a * n)),
+      h = Math.sqrt(r * r - a * a),
       k = vec.mul(vec.per(delta), h * n)
 
     return side === 0 ? vec.add(p, k) : vec.sub(p, k)
   }
 
+  /**
+   * Get outer tangents of two circles.
+   * @param x0
+   * @param y0
+   * @param r0
+   * @param x1
+   * @param y1
+   * @param r1
+   * @returns [lx0, ly0, lx1, ly1, rx0, ry0, rx1, ry1]
+   */
+  static getOuterTangentsOfCircles(
+    C0: number[],
+    r0: number,
+    C1: number[],
+    r1: number
+  ): number[][] {
+    const a0 = vec.angle(C0, C1)
+    const d = vec.dist(C0, C1)
+
+    // Circles are overlapping, no tangents
+    if (d < Math.abs(r1 - r0)) return
+
+    const a1 = Math.acos((r0 - r1) / d),
+      t0 = a0 + a1,
+      t1 = a0 - a1
+
+    return [
+      [C0[0] + r0 * Math.cos(t1), C0[1] + r0 * Math.sin(t1)],
+      [C1[0] + r1 * Math.cos(t1), C1[1] + r1 * Math.sin(t1)],
+      [C0[0] + r0 * Math.cos(t0), C0[1] + r0 * Math.sin(t0)],
+      [C1[0] + r1 * Math.cos(t0), C1[1] + r1 * Math.sin(t0)],
+    ]
+  }
+
+  /**
+   * Get the closest point on the perimeter of a circle to a given point.
+   * @param C The circle's center.
+   * @param r The circle's radius.
+   * @param P The point.
+   */
+  static getClosestPointOnCircle(
+    C: number[],
+    r: number,
+    P: number[]
+  ): number[] {
+    const v = vec.sub(C, P)
+    return vec.sub(C, vec.mul(vec.div(v, vec.len(v)), r))
+  }
+
+  static det(
+    a: number,
+    b: number,
+    c: number,
+    d: number,
+    e: number,
+    f: number,
+    g: number,
+    h: number,
+    i: number
+  ): number {
+    return a * e * i + b * f * g + c * d * h - a * f * h - b * d * i - c * e * g
+  }
+
+  /**
+   * Get a circle from three points.
+   * @param A
+   * @param B
+   * @param C
+   * @returns [x, y, r]
+   */
+  static circleFromThreePoints(
+    A: number[],
+    B: number[],
+    C: number[]
+  ): number[] {
+    const a = Utils.det(A[0], A[1], 1, B[0], B[1], 1, C[0], C[1], 1)
+
+    const bx = -Utils.det(
+      A[0] * A[0] + A[1] * A[1],
+      A[1],
+      1,
+      B[0] * B[0] + B[1] * B[1],
+      B[1],
+      1,
+      C[0] * C[0] + C[1] * C[1],
+      C[1],
+      1
+    )
+    const by = Utils.det(
+      A[0] * A[0] + A[1] * A[1],
+      A[0],
+      1,
+      B[0] * B[0] + B[1] * B[1],
+      B[0],
+      1,
+      C[0] * C[0] + C[1] * C[1],
+      C[0],
+      1
+    )
+    const c = -Utils.det(
+      A[0] * A[0] + A[1] * A[1],
+      A[0],
+      A[1],
+      B[0] * B[0] + B[1] * B[1],
+      B[0],
+      B[1],
+      C[0] * C[0] + C[1] * C[1],
+      C[0],
+      C[1]
+    )
+
+    const x = -bx / (2 * a)
+    const y = -by / (2 * a)
+    const r = Math.sqrt(bx * bx + by * by - 4 * a * c) / (2 * Math.abs(a))
+
+    return [x, y, r]
+  }
+
+  /**
+   * Find the approximate perimeter of an ellipse.
+   * @param rx
+   * @param ry
+   */
+  static perimeterOfEllipse(rx: number, ry: number): number {
+    const h = Math.pow(rx - ry, 2) / Math.pow(rx + ry, 2)
+    const p = Math.PI * (rx + ry) * (1 + (3 * h) / (10 + Math.sqrt(4 - 3 * h)))
+    return p
+  }
+
+  /**
+   * Get the short angle distance between two angles.
+   * @param a0
+   * @param a1
+   */
   static shortAngleDist(a0: number, a1: number): number {
     const max = Math.PI * 2
     const da = (a1 - a0) % max
     return ((2 * da) % max) - da
   }
 
+  /**
+   * Get the long angle distance between two angles.
+   * @param a0
+   * @param a1
+   */
+  static longAngleDist(a0: number, a1: number): number {
+    return Math.PI * 2 - Utils.shortAngleDist(a0, a1)
+  }
+
+  /**
+   * Interpolate an angle between two angles.
+   * @param a0
+   * @param a1
+   * @param t
+   */
+  static lerpAngles(a0: number, a1: number, t: number): number {
+    return a0 + Utils.shortAngleDist(a0, a1) * t
+  }
+
+  /**
+   * Get the short distance between two angles.
+   * @param a0
+   * @param a1
+   */
   static angleDelta(a0: number, a1: number): number {
-    return this.shortAngleDist(a0, a1)
+    return Utils.shortAngleDist(a0, a1)
   }
 
+  /**
+   * Get the "sweep" or short distance between two points on a circle's perimeter.
+   * @param C
+   * @param A
+   * @param B
+   */
   static getSweep(C: number[], A: number[], B: number[]): number {
-    return this.angleDelta(vec.angle(C, A), vec.angle(C, B))
+    return Utils.angleDelta(vec.angle(C, A), vec.angle(C, B))
+  }
+
+  /**
+   * Rotate a point around a center.
+   * @param x The x-axis coordinate of the point.
+   * @param y The y-axis coordinate of the point.
+   * @param cx The x-axis coordinate of the point to rotate round.
+   * @param cy The y-axis coordinate of the point to rotate round.
+   * @param angle The distance (in radians) to rotate.
+   */
+  static rotatePoint(A: number[], B: number[], angle: number): number[] {
+    const s = Math.sin(angle)
+    const c = Math.cos(angle)
+
+    const px = A[0] - B[0]
+    const py = A[1] - B[1]
+
+    const nx = px * c - py * s
+    const ny = px * s + py * c
+
+    return [nx + B[0], ny + B[1]]
+  }
+
+  /**
+   * Clamp radians within 0 and 2PI
+   * @param r
+   */
+  static clampRadians(r: number): number {
+    return (Math.PI * 2 + r) % (Math.PI * 2)
+  }
+
+  /**
+   * Clamp rotation to even segments.
+   * @param r
+   * @param segments
+   */
+  static clampToRotationToSegments(r: number, segments: number): number {
+    const seg = (Math.PI * 2) / segments
+    return Math.floor((Utils.clampRadians(r) + seg / 2) / seg) * seg
+  }
+
+  /**
+   * Is angle c between angles a and b?
+   * @param a
+   * @param b
+   * @param c
+   */
+  static isAngleBetween(a: number, b: number, c: number): boolean {
+    if (c === a || c === b) return true
+    const PI2 = Math.PI * 2
+    const AB = (b - a + PI2) % PI2
+    const AC = (c - a + PI2) % PI2
+    return AB <= Math.PI !== AC > AB
+  }
+
+  /**
+   * Convert degrees to radians.
+   * @param d
+   */
+  static degreesToRadians(d: number): number {
+    return (d * Math.PI) / 180
+  }
+
+  /**
+   * Convert radians to degrees.
+   * @param r
+   */
+  static radiansToDegrees(r: number): number {
+    return (r * 180) / Math.PI
+  }
+
+  /**
+   * Get the length of an arc between two points on a circle's perimeter.
+   * @param C
+   * @param r
+   * @param A
+   * @param B
+   */
+  static getArcLength(
+    C: number[],
+    r: number,
+    A: number[],
+    B: number[]
+  ): number {
+    const sweep = Utils.getSweep(C, A, B)
+    return r * (2 * Math.PI) * (sweep / (2 * Math.PI))
+  }
+
+  /**
+   * Get a dash offset for an arc, based on its length.
+   * @param C
+   * @param r
+   * @param A
+   * @param B
+   * @param step
+   */
+  static getArcDashOffset(
+    C: number[],
+    r: number,
+    A: number[],
+    B: number[],
+    step: number
+  ): number {
+    const del0 = Utils.getSweep(C, A, B)
+    const len0 = Utils.getArcLength(C, r, A, B)
+    const off0 = del0 < 0 ? len0 : 2 * Math.PI * C[2] - len0
+    return -off0 / 2 + step
+  }
+
+  /**
+   * Get a dash offset for an ellipse, based on its length.
+   * @param A
+   * @param step
+   */
+  static getEllipseDashOffset(A: number[], step: number): number {
+    const c = 2 * Math.PI * A[2]
+    return -c / 2 + -step
+  }
+
+  static getPointsBetween(a: number[], b: number[], steps = 6): number[][] {
+    return Array.from(Array(steps))
+      .map((_, i) => {
+        const t = i / steps
+        return t * t * t
+      })
+      .map((t) => [...vec.lrp(a, b, t), (1 - t) / 2])
+  }
+
+  static getRayRayIntersection(
+    p0: number[],
+    n0: number[],
+    p1: number[],
+    n1: number[]
+  ): number[] {
+    const p0e = vec.add(p0, n0),
+      p1e = vec.add(p1, n1),
+      m0 = (p0e[1] - p0[1]) / (p0e[0] - p0[0]),
+      m1 = (p1e[1] - p1[1]) / (p1e[0] - p1[0]),
+      b0 = p0[1] - m0 * p0[0],
+      b1 = p1[1] - m1 * p1[0],
+      x = (b1 - b0) / (m0 - m1),
+      y = m0 * x + b0
+
+    return [x, y]
   }
 
   static bez1d(a: number, b: number, c: number, d: number, t: number): number {
@@ -1132,6 +1583,122 @@ interface ShapeUtility<K extends Shape> {
 
     return bounds
   }
+
+  /**
+   * Get a bezier curve data for a spline that fits an array of points.
+   * @param pts
+   * @param tension
+   * @param isClosed
+   * @param numOfSegments
+   */
+  static getCurvePoints(
+    pts: number[][],
+    tension = 0.5,
+    isClosed = false,
+    numOfSegments = 3
+  ): number[][] {
+    const _pts = [...pts],
+      len = pts.length,
+      res: number[][] = [] // results
+
+    let t1x: number, // tension vectors
+      t2x: number,
+      t1y: number,
+      t2y: number,
+      c1: number, // cardinal points
+      c2: number,
+      c3: number,
+      c4: number,
+      st: number,
+      st2: number,
+      st3: number
+
+    // The algorithm require a previous and next point to the actual point array.
+    // Check if we will draw closed or open curve.
+    // If closed, copy end points to beginning and first points to end
+    // If open, duplicate first points to befinning, end points to end
+    if (isClosed) {
+      _pts.unshift(_pts[len - 1])
+      _pts.push(_pts[0])
+    } else {
+      //copy 1. point and insert at beginning
+      _pts.unshift(_pts[0])
+      _pts.push(_pts[len - 1])
+      // _pts.push(_pts[len - 1])
+    }
+
+    // For each point, calculate a segment
+    for (let i = 1; i < _pts.length - 2; i++) {
+      // Calculate points along segment and add to results
+      for (let t = 0; t <= numOfSegments; t++) {
+        // Step
+        st = t / numOfSegments
+        st2 = Math.pow(st, 2)
+        st3 = Math.pow(st, 3)
+
+        // Cardinals
+        c1 = 2 * st3 - 3 * st2 + 1
+        c2 = -(2 * st3) + 3 * st2
+        c3 = st3 - 2 * st2 + st
+        c4 = st3 - st2
+
+        // Tension
+        t1x = (_pts[i + 1][0] - _pts[i - 1][0]) * tension
+        t2x = (_pts[i + 2][0] - _pts[i][0]) * tension
+        t1y = (_pts[i + 1][1] - _pts[i - 1][1]) * tension
+        t2y = (_pts[i + 2][1] - _pts[i][1]) * tension
+
+        // Control points
+        res.push([
+          c1 * _pts[i][0] + c2 * _pts[i + 1][0] + c3 * t1x + c4 * t2x,
+          c1 * _pts[i][1] + c2 * _pts[i + 1][1] + c3 * t1y + c4 * t2y,
+        ])
+      }
+    }
+
+    res.push(pts[pts.length - 1])
+
+    return res
+  }
+
+  /**
+   * Simplify a line (using Ramer-Douglas-Peucker algorithm).
+   * @param points An array of points as [x, y, ...][]
+   * @param tolerance The minimum line distance (also called epsilon).
+   * @returns Simplified array as [x, y, ...][]
+   */
+  static simplify(points: number[][], tolerance = 1): number[][] {
+    const len = points.length,
+      a = points[0],
+      b = points[len - 1],
+      [x1, y1] = a,
+      [x2, y2] = b
+
+    if (len > 2) {
+      let distance = 0
+      let index = 0
+      const max = Math.hypot(y2 - y1, x2 - x1)
+
+      for (let i = 1; i < len - 1; i++) {
+        const [x0, y0] = points[i],
+          d =
+            Math.abs((y2 - y1) * x0 - (x2 - x1) * y0 + x2 * y1 - y2 * x1) / max
+
+        if (distance > d) continue
+
+        distance = d
+        index = i
+      }
+
+      if (distance > tolerance) {
+        const l0 = Utils.simplify(points.slice(0, index + 1), tolerance)
+        const l1 = Utils.simplify(points.slice(index + 1), tolerance)
+        return l0.concat(l1.slice(1))
+      }
+    }
+
+    return [a, b]
+  }
 }
 
 // A big collection of vector utilities. Collected into a class to improve logging / packaging.

package.json

@@ -61,6 +61,7 @@
     "react-dom": "^17.0.2",
     "react-feather": "^2.0.9",
     "react-use-gesture": "^9.1.3",
+    "sucrase": "^3.19.0",
     "uuid": "^8.3.2"
   },
   "devDependencies": {

state/code/generate.ts

@@ -12,6 +12,7 @@ import { NumberControl, VectorControl, codeControls, controls } from './control'
 import { codeShapes } from './index'
 import { CodeControl, Data, Shape } from 'types'
 import { getPage } from 'utils'
+import { transform } from 'sucrase'
 
 const baseScope = {
   Dot,
@@ -48,7 +49,9 @@ export function generateFromCode(
   const { currentPageId } = data
   const scope = { ...baseScope, controls, currentPageId }
 
-  new Function(...Object.keys(scope), `${code}`)(...Object.values(scope))
+  const transformed = transform(code, { transforms: ['typescript'] }).code
+
+  new Function(...Object.keys(scope), `${transformed}`)(...Object.values(scope))
 
   const generatedShapes = Array.from(codeShapes.values()).map((instance) => ({
     ...instance.shape,

state/code/rectangle.ts

@@ -1,13 +1,13 @@
 import CodeShape from './index'
 import { uniqueId } from 'utils'
-import { RectangleShape, ShapeStyles, ShapeType } from 'types'
+import { RectangleShape, ShapeProps, ShapeType } from 'types'
 import { defaultStyle } from 'state/shape-styles'
 
 /**
  * ## Rectangle
  */
 export default class Rectangle extends CodeShape<RectangleShape> {
-  constructor(props = {} as Partial<RectangleShape> & Partial<ShapeStyles>) {
+  constructor(props = {} as ShapeProps<RectangleShape>) {
     super({
       id: uniqueId(),
       seed: Math.random(),

state/code/utils.ts

@@ -5,69 +5,522 @@ import vec from 'utils/vec'
  * ## Utils
  */
 export default class Utils {
-  static getPointsBetween(a: number[], b: number[], steps = 6): number[][] {
-    return Array.from(Array(steps))
-      .map((_, i) => {
-        const t = i / steps
-        return t * t * t
-      })
-      .map((t) => [...vec.lrp(a, b, t), (1 - t) / 2])
+  /**
+   * Linear interpolation betwen two numbers.
+   * @param y1
+   * @param y2
+   * @param mu
+   */
+  static lerp(y1: number, y2: number, mu: number): number {
+    mu = Utils.clamp(mu, 0, 1)
+    return y1 * (1 - mu) + y2 * mu
   }
 
-  static getRayRayIntersection(
-    p0: number[],
-    n0: number[],
-    p1: number[],
-    n1: number[]
-  ): number[] {
-    const p0e = vec.add(p0, n0),
-      p1e = vec.add(p1, n1),
-      m0 = (p0e[1] - p0[1]) / (p0e[0] - p0[0]),
-      m1 = (p1e[1] - p1[1]) / (p1e[0] - p1[0]),
-      b0 = p0[1] - m0 * p0[0],
-      b1 = p1[1] - m1 * p1[0],
-      x = (b1 - b0) / (m0 - m1),
-      y = m0 * x + b0
+  /**
+   * Modulate a value between two ranges.
+   * @param value
+   * @param rangeA from [low, high]
+   * @param rangeB to [low, high]
+   * @param clamp
+   */
+  static modulate(
+    value: number,
+    rangeA: number[],
+    rangeB: number[],
+    clamp = false
+  ): number {
+    const [fromLow, fromHigh] = rangeA
+    const [v0, v1] = rangeB
+    const result = v0 + ((value - fromLow) / (fromHigh - fromLow)) * (v1 - v0)
 
-    return [x, y]
+    return clamp
+      ? v0 < v1
+        ? Math.max(Math.min(result, v1), v0)
+        : Math.max(Math.min(result, v0), v1)
+      : result
+  }
+
+  /**
+   * Clamp a value into a range.
+   * @param n
+   * @param min
+   */
+  static clamp(n: number, min: number): number
+  static clamp(n: number, min: number, max: number): number
+  static clamp(n: number, min: number, max?: number): number {
+    return Math.max(min, typeof max !== 'undefined' ? Math.min(n, max) : n)
+  }
+
+  // TODO: replace with a string compression algorithm
+  static compress(s: string): string {
+    return s
+  }
+
+  // TODO: replace with a string decompression algorithm
+  static decompress(s: string): string {
+    return s
+  }
+
+  /**
+   * Recursively clone an object or array.
+   * @param obj
+   */
+  static deepClone<T>(obj: T): T {
+    if (obj === null) return null
+
+    const clone: any = { ...obj }
+
+    Object.keys(obj).forEach(
+      (key) =>
+        (clone[key] =
+          typeof obj[key] === 'object' ? Utils.deepClone(obj[key]) : obj[key])
+    )
+
+    if (Array.isArray(obj)) {
+      clone.length = obj.length
+      return Array.from(clone) as any as T
+    }
+
+    return clone as T
   }
 
+  /**
+   * Seeded random number generator, using [xorshift](https://en.wikipedia.org/wiki/Xorshift).
+   * The result will always be betweeen -1 and 1.
+   *
+   * Adapted from [seedrandom](https://github.com/davidbau/seedrandom).
+   */
+  static rng(seed = ''): () => number {
+    let x = 0
+    let y = 0
+    let z = 0
+    let w = 0
+
+    function next() {
+      const t = x ^ (x << 11)
+      ;(x = y), (y = z), (z = w)
+      w ^= ((w >>> 19) ^ t ^ (t >>> 8)) >>> 0
+      return w / 0x100000000
+    }
+
+    for (let k = 0; k < seed.length + 64; k++) {
+      ;(x ^= seed.charCodeAt(k) | 0), next()
+    }
+
+    return next
+  }
+
+  /**
+   * Shuffle the contents of an array.
+   * @param arr
+   * @param offset
+   */
+  static shuffleArr<T>(arr: T[], offset: number): T[] {
+    return arr.map((_, i) => arr[(i + offset) % arr.length])
+  }
+
+  /**
+   * Deep compare two arrays.
+   * @param a
+   * @param b
+   */
+  static deepCompareArrays<T>(a: T[], b: T[]): boolean {
+    if (a?.length !== b?.length) return false
+    return Utils.deepCompare(a, b)
+  }
+
+  /**
+   * Deep compare any values.
+   * @param a
+   * @param b
+   */
+  static deepCompare<T>(a: T, b: T): boolean {
+    return a === b || JSON.stringify(a) === JSON.stringify(b)
+  }
+
+  /**
+   * Find whether two arrays intersect.
+   * @param a
+   * @param b
+   * @param fn An optional function to apply to the items of a; will check if b includes the result.
+   */
+  static arrsIntersect<T, K>(a: T[], b: K[], fn?: (item: K) => T): boolean
+  static arrsIntersect<T>(a: T[], b: T[]): boolean
+  static arrsIntersect<T>(
+    a: T[],
+    b: unknown[],
+    fn?: (item: unknown) => T
+  ): boolean {
+    return a.some((item) => b.includes(fn ? fn(item) : item))
+  }
+
+  /**
+   * Get the unique values from an array of strings or numbers.
+   * @param items
+   */
+  static uniqueArray<T extends string | number>(...items: T[]): T[] {
+    return Array.from(new Set(items).values())
+  }
+
+  /**
+   * Convert a set to an array.
+   * @param set
+   */
+  static setToArray<T>(set: Set<T>): T[] {
+    return Array.from(set.values())
+  }
+
+  /**
+   * Get the outer of between a circle and a point.
+   * @param C The circle's center.
+   * @param r The circle's radius.
+   * @param P The point.
+   * @param side
+   */
   static getCircleTangentToPoint(
-    A: number[],
-    r0: number,
+    C: number[],
+    r: number,
     P: number[],
     side: number
   ): number[] {
-    const B = vec.lrp(A, P, 0.5),
-      r1 = vec.dist(A, B),
-      delta = vec.sub(B, A),
+    const B = vec.lrp(C, P, 0.5),
+      r1 = vec.dist(C, B),
+      delta = vec.sub(B, C),
       d = vec.len(delta)
 
-    if (!(d <= r0 + r1 && d >= Math.abs(r0 - r1))) {
+    if (!(d <= r + r1 && d >= Math.abs(r - r1))) {
       return
     }
 
-    const a = (r0 * r0 - r1 * r1 + d * d) / (2.0 * d),
+    const a = (r * r - r1 * r1 + d * d) / (2.0 * d),
       n = 1 / d,
-      p = vec.add(A, vec.mul(delta, a * n)),
-      h = Math.sqrt(r0 * r0 - a * a),
+      p = vec.add(C, vec.mul(delta, a * n)),
+      h = Math.sqrt(r * r - a * a),
       k = vec.mul(vec.per(delta), h * n)
 
     return side === 0 ? vec.add(p, k) : vec.sub(p, k)
   }
 
+  /**
+   * Get outer tangents of two circles.
+   * @param x0
+   * @param y0
+   * @param r0
+   * @param x1
+   * @param y1
+   * @param r1
+   * @returns [lx0, ly0, lx1, ly1, rx0, ry0, rx1, ry1]
+   */
+  static getOuterTangentsOfCircles(
+    C0: number[],
+    r0: number,
+    C1: number[],
+    r1: number
+  ): number[][] {
+    const a0 = vec.angle(C0, C1)
+    const d = vec.dist(C0, C1)
+
+    // Circles are overlapping, no tangents
+    if (d < Math.abs(r1 - r0)) return
+
+    const a1 = Math.acos((r0 - r1) / d),
+      t0 = a0 + a1,
+      t1 = a0 - a1
+
+    return [
+      [C0[0] + r0 * Math.cos(t1), C0[1] + r0 * Math.sin(t1)],
+      [C1[0] + r1 * Math.cos(t1), C1[1] + r1 * Math.sin(t1)],
+      [C0[0] + r0 * Math.cos(t0), C0[1] + r0 * Math.sin(t0)],
+      [C1[0] + r1 * Math.cos(t0), C1[1] + r1 * Math.sin(t0)],
+    ]
+  }
+
+  /**
+   * Get the closest point on the perimeter of a circle to a given point.
+   * @param C The circle's center.
+   * @param r The circle's radius.
+   * @param P The point.
+   */
+  static getClosestPointOnCircle(
+    C: number[],
+    r: number,
+    P: number[]
+  ): number[] {
+    const v = vec.sub(C, P)
+    return vec.sub(C, vec.mul(vec.div(v, vec.len(v)), r))
+  }
+
+  static det(
+    a: number,
+    b: number,
+    c: number,
+    d: number,
+    e: number,
+    f: number,
+    g: number,
+    h: number,
+    i: number
+  ): number {
+    return a * e * i + b * f * g + c * d * h - a * f * h - b * d * i - c * e * g
+  }
+
+  /**
+   * Get a circle from three points.
+   * @param A
+   * @param B
+   * @param C
+   * @returns [x, y, r]
+   */
+  static circleFromThreePoints(
+    A: number[],
+    B: number[],
+    C: number[]
+  ): number[] {
+    const a = Utils.det(A[0], A[1], 1, B[0], B[1], 1, C[0], C[1], 1)
+
+    const bx = -Utils.det(
+      A[0] * A[0] + A[1] * A[1],
+      A[1],
+      1,
+      B[0] * B[0] + B[1] * B[1],
+      B[1],
+      1,
+      C[0] * C[0] + C[1] * C[1],
+      C[1],
+      1
+    )
+    const by = Utils.det(
+      A[0] * A[0] + A[1] * A[1],
+      A[0],
+      1,
+      B[0] * B[0] + B[1] * B[1],
+      B[0],
+      1,
+      C[0] * C[0] + C[1] * C[1],
+      C[0],
+      1
+    )
+    const c = -Utils.det(
+      A[0] * A[0] + A[1] * A[1],
+      A[0],
+      A[1],
+      B[0] * B[0] + B[1] * B[1],
+      B[0],
+      B[1],
+      C[0] * C[0] + C[1] * C[1],
+      C[0],
+      C[1]
+    )
+
+    const x = -bx / (2 * a)
+    const y = -by / (2 * a)
+    const r = Math.sqrt(bx * bx + by * by - 4 * a * c) / (2 * Math.abs(a))
+
+    return [x, y, r]
+  }
+
+  /**
+   * Find the approximate perimeter of an ellipse.
+   * @param rx
+   * @param ry
+   */
+  static perimeterOfEllipse(rx: number, ry: number): number {
+    const h = Math.pow(rx - ry, 2) / Math.pow(rx + ry, 2)
+    const p = Math.PI * (rx + ry) * (1 + (3 * h) / (10 + Math.sqrt(4 - 3 * h)))
+    return p
+  }
+
+  /**
+   * Get the short angle distance between two angles.
+   * @param a0
+   * @param a1
+   */
   static shortAngleDist(a0: number, a1: number): number {
     const max = Math.PI * 2
     const da = (a1 - a0) % max
     return ((2 * da) % max) - da
   }
 
+  /**
+   * Get the long angle distance between two angles.
+   * @param a0
+   * @param a1
+   */
+  static longAngleDist(a0: number, a1: number): number {
+    return Math.PI * 2 - Utils.shortAngleDist(a0, a1)
+  }
+
+  /**
+   * Interpolate an angle between two angles.
+   * @param a0
+   * @param a1
+   * @param t
+   */
+  static lerpAngles(a0: number, a1: number, t: number): number {
+    return a0 + Utils.shortAngleDist(a0, a1) * t
+  }
+
+  /**
+   * Get the short distance between two angles.
+   * @param a0
+   * @param a1
+   */
   static angleDelta(a0: number, a1: number): number {
-    return this.shortAngleDist(a0, a1)
+    return Utils.shortAngleDist(a0, a1)
   }
 
+  /**
+   * Get the "sweep" or short distance between two points on a circle's perimeter.
+   * @param C
+   * @param A
+   * @param B
+   */
   static getSweep(C: number[], A: number[], B: number[]): number {
-    return this.angleDelta(vec.angle(C, A), vec.angle(C, B))
+    return Utils.angleDelta(vec.angle(C, A), vec.angle(C, B))
+  }
+
+  /**
+   * Rotate a point around a center.
+   * @param x The x-axis coordinate of the point.
+   * @param y The y-axis coordinate of the point.
+   * @param cx The x-axis coordinate of the point to rotate round.
+   * @param cy The y-axis coordinate of the point to rotate round.
+   * @param angle The distance (in radians) to rotate.
+   */
+  static rotatePoint(A: number[], B: number[], angle: number): number[] {
+    const s = Math.sin(angle)
+    const c = Math.cos(angle)
+
+    const px = A[0] - B[0]
+    const py = A[1] - B[1]
+
+    const nx = px * c - py * s
+    const ny = px * s + py * c
+
+    return [nx + B[0], ny + B[1]]
+  }
+
+  /**
+   * Clamp radians within 0 and 2PI
+   * @param r
+   */
+  static clampRadians(r: number): number {
+    return (Math.PI * 2 + r) % (Math.PI * 2)
+  }
+
+  /**
+   * Clamp rotation to even segments.
+   * @param r
+   * @param segments
+   */
+  static clampToRotationToSegments(r: number, segments: number): number {
+    const seg = (Math.PI * 2) / segments
+    return Math.floor((Utils.clampRadians(r) + seg / 2) / seg) * seg
+  }
+
+  /**
+   * Is angle c between angles a and b?
+   * @param a
+   * @param b
+   * @param c
+   */
+  static isAngleBetween(a: number, b: number, c: number): boolean {
+    if (c === a || c === b) return true
+    const PI2 = Math.PI * 2
+    const AB = (b - a + PI2) % PI2
+    const AC = (c - a + PI2) % PI2
+    return AB <= Math.PI !== AC > AB
+  }
+
+  /**
+   * Convert degrees to radians.
+   * @param d
+   */
+  static degreesToRadians(d: number): number {
+    return (d * Math.PI) / 180
+  }
+
+  /**
+   * Convert radians to degrees.
+   * @param r
+   */
+  static radiansToDegrees(r: number): number {
+    return (r * 180) / Math.PI
+  }
+
+  /**
+   * Get the length of an arc between two points on a circle's perimeter.
+   * @param C
+   * @param r
+   * @param A
+   * @param B
+   */
+  static getArcLength(
+    C: number[],
+    r: number,
+    A: number[],
+    B: number[]
+  ): number {
+    const sweep = Utils.getSweep(C, A, B)
+    return r * (2 * Math.PI) * (sweep / (2 * Math.PI))
+  }
+
+  /**
+   * Get a dash offset for an arc, based on its length.
+   * @param C
+   * @param r
+   * @param A
+   * @param B
+   * @param step
+   */
+  static getArcDashOffset(
+    C: number[],
+    r: number,
+    A: number[],
+    B: number[],
+    step: number
+  ): number {
+    const del0 = Utils.getSweep(C, A, B)
+    const len0 = Utils.getArcLength(C, r, A, B)
+    const off0 = del0 < 0 ? len0 : 2 * Math.PI * C[2] - len0
+    return -off0 / 2 + step
+  }
+
+  /**
+   * Get a dash offset for an ellipse, based on its length.
+   * @param A
+   * @param step
+   */
+  static getEllipseDashOffset(A: number[], step: number): number {
+    const c = 2 * Math.PI * A[2]
+    return -c / 2 + -step
+  }
+
+  static getPointsBetween(a: number[], b: number[], steps = 6): number[][] {
+    return Array.from(Array(steps))
+      .map((_, i) => {
+        const t = i / steps
+        return t * t * t
+      })
+      .map((t) => [...vec.lrp(a, b, t), (1 - t) / 2])
+  }
+
+  static getRayRayIntersection(
+    p0: number[],
+    n0: number[],
+    p1: number[],
+    n1: number[]
+  ): number[] {
+    const p0e = vec.add(p0, n0),
+      p1e = vec.add(p1, n1),
+      m0 = (p0e[1] - p0[1]) / (p0e[0] - p0[0]),
+      m1 = (p1e[1] - p1[1]) / (p1e[0] - p1[0]),
+      b0 = p0[1] - m0 * p0[0],
+      b1 = p1[1] - m1 * p1[0],
+      x = (b1 - b0) / (m0 - m1),
+      y = m0 * x + b0
+
+    return [x, y]
   }
 
   static bez1d(a: number, b: number, c: number, d: number, t: number): number {
@@ -167,4 +620,120 @@ export default class Utils {
 
     return bounds
   }
+
+  /**
+   * Get a bezier curve data for a spline that fits an array of points.
+   * @param pts
+   * @param tension
+   * @param isClosed
+   * @param numOfSegments
+   */
+  static getCurvePoints(
+    pts: number[][],
+    tension = 0.5,
+    isClosed = false,
+    numOfSegments = 3
+  ): number[][] {
+    const _pts = [...pts],
+      len = pts.length,
+      res: number[][] = [] // results
+
+    let t1x: number, // tension vectors
+      t2x: number,
+      t1y: number,
+      t2y: number,
+      c1: number, // cardinal points
+      c2: number,
+      c3: number,
+      c4: number,
+      st: number,
+      st2: number,
+      st3: number
+
+    // The algorithm require a previous and next point to the actual point array.
+    // Check if we will draw closed or open curve.
+    // If closed, copy end points to beginning and first points to end
+    // If open, duplicate first points to befinning, end points to end
+    if (isClosed) {
+      _pts.unshift(_pts[len - 1])
+      _pts.push(_pts[0])
+    } else {
+      //copy 1. point and insert at beginning
+      _pts.unshift(_pts[0])
+      _pts.push(_pts[len - 1])
+      // _pts.push(_pts[len - 1])
+    }
+
+    // For each point, calculate a segment
+    for (let i = 1; i < _pts.length - 2; i++) {
+      // Calculate points along segment and add to results
+      for (let t = 0; t <= numOfSegments; t++) {
+        // Step
+        st = t / numOfSegments
+        st2 = Math.pow(st, 2)
+        st3 = Math.pow(st, 3)
+
+        // Cardinals
+        c1 = 2 * st3 - 3 * st2 + 1
+        c2 = -(2 * st3) + 3 * st2
+        c3 = st3 - 2 * st2 + st
+        c4 = st3 - st2
+
+        // Tension
+        t1x = (_pts[i + 1][0] - _pts[i - 1][0]) * tension
+        t2x = (_pts[i + 2][0] - _pts[i][0]) * tension
+        t1y = (_pts[i + 1][1] - _pts[i - 1][1]) * tension
+        t2y = (_pts[i + 2][1] - _pts[i][1]) * tension
+
+        // Control points
+        res.push([
+          c1 * _pts[i][0] + c2 * _pts[i + 1][0] + c3 * t1x + c4 * t2x,
+          c1 * _pts[i][1] + c2 * _pts[i + 1][1] + c3 * t1y + c4 * t2y,
+        ])
+      }
+    }
+
+    res.push(pts[pts.length - 1])
+
+    return res
+  }
+
+  /**
+   * Simplify a line (using Ramer-Douglas-Peucker algorithm).
+   * @param points An array of points as [x, y, ...][]
+   * @param tolerance The minimum line distance (also called epsilon).
+   * @returns Simplified array as [x, y, ...][]
+   */
+  static simplify(points: number[][], tolerance = 1): number[][] {
+    const len = points.length,
+      a = points[0],
+      b = points[len - 1],
+      [x1, y1] = a,
+      [x2, y2] = b
+
+    if (len > 2) {
+      let distance = 0
+      let index = 0
+      const max = Math.hypot(y2 - y1, x2 - x1)
+
+      for (let i = 1; i < len - 1; i++) {
+        const [x0, y0] = points[i],
+          d =
+            Math.abs((y2 - y1) * x0 - (x2 - x1) * y0 + x2 * y1 - y2 * x1) / max
+
+        if (distance > d) continue
+
+        distance = d
+        index = i
+      }
+
+      if (distance > tolerance) {
+        const l0 = Utils.simplify(points.slice(0, index + 1), tolerance)
+        const l1 = Utils.simplify(points.slice(index + 1), tolerance)
+        return l0.concat(l1.slice(1))
+      }
+    }
+
+    return [a, b]
+  }
 }

types.ts

@@ -191,12 +191,10 @@ export interface GroupShape extends BaseShape {
   size: number[]
 }
 
-type DeepPartial<T> = {
-  [P in keyof T]?: DeepPartial<T[P]>
+export type ShapeProps<T extends Shape> = Partial<T> & {
+  style?: Partial<ShapeStyles>
 }
 
-export type ShapeProps<T extends Shape> = DeepPartial<T>
-
 export type MutableShape =
   | DotShape
   | EllipseShape

utils/utils.ts

@@ -198,16 +198,6 @@ export function setToArray<T>(set: Set<T>): T[] {
 
 /* -------------------- Hit Tests ------------------- */
 
-/**
- * Get whether a point is inside of a bounds.
- * @param A
- * @param b
- * @returns
- */
-export function pointInBounds(A: number[], b: Bounds): boolean {
-  return !(A[0] < b.minX || A[0] > b.maxX || A[1] < b.minY || A[1] > b.maxY)
-}
-
 /**
  * Get whether a point is inside of a circle.
  * @param A
@@ -265,6 +255,16 @@ export function pointInRect(
 
 /* --------------------- Bounds --------------------- */
 
+/**
+ * Get whether a point is inside of a bounds.
+ * @param A
+ * @param b
+ * @returns
+ */
+export function pointInBounds(A: number[], b: Bounds): boolean {
+  return !(A[0] < b.minX || A[0] > b.maxX || A[1] < b.minY || A[1] > b.maxY)
+}
+
 /**
  * Get whether two bounds collide.
  * @param a Bounds

yarn.lock

@@ -3073,6 +3073,11 @@ commander@^2.20.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
 
+commander@^4.0.0:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
+  integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
+
 commander@^6.2.0:
   version "6.2.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-6.2.1.tgz#0792eb682dfbc325999bb2b84fddddba110ac73c"
@@ -4141,6 +4146,18 @@ glob-to-regexp@^0.4.1:
   resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e"
   integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==
 
+glob@7.1.6:
+  version "7.1.6"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
+  integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
 glob@^7.0.3, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
   version "7.1.7"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.7.tgz#3b193e9233f01d42d0b3f78294bbeeb418f94a90"
@@ -5741,7 +5758,7 @@ ms@^2.1.1:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
 
-mz@^2.4.0:
+mz@^2.4.0, mz@^2.7.0:
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/mz/-/mz-2.7.0.tgz#95008057a56cafadc2bc63dde7f9ff6955948e32"
   integrity sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==
@@ -7372,6 +7389,18 @@ stylis@3.5.4:
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe"
   integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==
 
+sucrase@^3.19.0:
+  version "3.19.0"
+  resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.19.0.tgz#cc9a60f731e7497766a7b710d3362260a8f9ced5"
+  integrity sha512-FeMelydANPRMiOo/lxbf7NxN8bQmMVBQmKOa69BifwVhteMJzRoJNHaVBoCYmE/kpnx6VPg9ckaLumwtuAzmEA==
+  dependencies:
+    commander "^4.0.0"
+    glob "7.1.6"
+    lines-and-columns "^1.1.6"
+    mz "^2.7.0"
+    pirates "^4.0.1"
+    ts-interface-checker "^0.1.9"
+
 supports-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
@@ -7562,6 +7591,11 @@ tr46@^2.1.0:
   dependencies:
     punycode "^2.1.1"
 
+ts-interface-checker@^0.1.9:
+  version "0.1.13"
+  resolved "https://registry.yarnpkg.com/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz#784fd3d679722bc103b1b4b8030bcddb5db2a699"
+  integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==
+
 ts-pnp@^1.1.6:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"