Fixes utils imports

__tests__/test-utils.ts

@@ -1,5 +1,5 @@
 import { Data } from 'types'
-import { getSelectedIds } from 'utils/utils'
+import { getSelectedIds } from 'utils'
 
 interface PointerOptions {
   id?: string

components/canvas/bounds/bounding-box.tsx

@@ -9,7 +9,7 @@ import {
   getSelectedIds,
   getSelectedShapes,
   isMobile,
-} from 'utils/utils'
+} from 'utils'
 import CenterHandle from './center-handle'
 import CornerHandle from './corner-handle'
 import EdgeHandle from './edge-handle'

components/canvas/bounds/bounds-bg.tsx

@@ -2,7 +2,7 @@ import { useRef } from 'react'
 import state, { useSelector } from 'state'
 import inputs from 'state/inputs'
 import styled from 'styles'
-import { deepCompareArrays, getPage } from 'utils/utils'
+import { deepCompareArrays, getPage } from 'utils'
 
 function handlePointerDown(e: React.PointerEvent<SVGRectElement>) {
   if (!inputs.canAccept(e.pointerId)) return

components/canvas/bounds/handles.tsx

@@ -3,7 +3,7 @@ import { getShapeUtils } from 'state/shape-utils'
 import { useRef } from 'react'
 import { useSelector } from 'state'
 import styled from 'styles'
-import { deepCompareArrays, getPage } from 'utils/utils'
+import { deepCompareArrays, getPage } from 'utils'
 import vec from 'utils/vec'
 
 export default function Handles(): JSX.Element {

components/canvas/context-menu/context-menu.tsx

@@ -10,7 +10,7 @@ import {
   deepCompareArrays,
   getSelectedShapes,
   isMobile,
-} from 'utils/utils'
+} from 'utils'
 import state, { useSelector } from 'state'
 import {
   AlignType,

components/canvas/defs.tsx

@@ -2,7 +2,7 @@ import { getShapeStyle } from 'state/shape-styles'
 import { getShapeUtils } from 'state/shape-utils'
 import React, { memo } from 'react'
 import { useSelector } from 'state'
-import { deepCompareArrays, getCurrentCamera, getPage } from 'utils/utils'
+import { deepCompareArrays, getCurrentCamera, getPage } from 'utils'
 import { DotCircle, Handle } from './misc'
 
 export default function Defs(): JSX.Element {

components/canvas/page.tsx

@@ -2,7 +2,7 @@ import { getShapeUtils } from 'state/shape-utils'
 import { useSelector } from 'state'
 import { Bounds, PageState } from 'types'
 import { boundsCollide, boundsContain } from 'utils/bounds'
-import { deepCompareArrays, getPage, getViewport } from 'utils/utils'
+import { deepCompareArrays, getPage, getViewport } from 'utils'
 import Shape from './shape'
 
 /* 

components/canvas/selected.tsx

@@ -1,11 +1,6 @@
 import styled from 'styles'
 import { useSelector } from 'state'
-import {
+import { deepCompareArrays, getPage, getSelectedIds, setToArray } from 'utils'
-  deepCompareArrays,
-  getPage,
-  getSelectedIds,
-  setToArray,
-} from 'utils/utils'
 import { getShapeUtils } from 'state/shape-utils'
 import { memo } from 'react'
 

components/canvas/shape.tsx

@@ -2,7 +2,7 @@ import React, { useRef, memo, useEffect } from 'react'
 import { useSelector } from 'state'
 import styled from 'styles'
 import { getShapeUtils } from 'state/shape-utils'
-import { getPage, getSelectedIds, isMobile } from 'utils/utils'
+import { getPage, getSelectedIds, isMobile } from 'utils'
 import { Shape as _Shape } from 'types'
 import useShapeEvents from 'hooks/useShapeEvents'
 import vec from 'utils/vec'

components/controls-panel/controls-panel.tsx

@@ -6,7 +6,7 @@ import { X, Code } from 'react-feather'
 import { IconButton } from 'components/shared'
 import * as Panel from '../panel'
 import Control from './control'
-import { deepCompareArrays } from 'utils/utils'
+import { deepCompareArrays } from 'utils'
 
 export default function ControlPanel(): JSX.Element {
   const rContainer = useRef<HTMLDivElement>(null)

components/style-panel/style-panel.tsx

@@ -10,7 +10,7 @@ import {
   getPage,
   getSelectedIds,
   setToArray,
-} from 'utils/utils'
+} from 'utils'
 import AlignDistribute from './align-distribute'
 import { MoveType } from 'types'
 import SizePicker from './size-picker'

hooks/useCamera.ts

@@ -2,7 +2,7 @@
 import React, { useEffect } from 'react'
 import state from 'state'
 import storage from 'state/storage'
-import { getCurrentCamera } from 'utils/utils'
+import { getCurrentCamera } from 'utils'
 
 /**
  * When the state's camera changes, update the transform of

hooks/useKeyboardEvents.ts

@@ -2,7 +2,7 @@
 import { useEffect } from 'react'
 import state from 'state'
 import { MoveType } from 'types'
-import { getKeyboardEventInfo, metaKey } from 'utils/utils'
+import { getKeyboardEventInfo, metaKey } from 'utils'
 
 export default function useKeyboardEvents() {
   useEffect(() => {

state/clipboard.ts

@@ -1,6 +1,6 @@
 import { getShapeUtils } from './shape-utils'
 import { Data, Shape } from 'types'
-import { getCommonBounds, getSelectedShapes } from 'utils/utils'
+import { getCommonBounds, getSelectedShapes } from 'utils'
 import state from './state'
 
 class Clipboard {

state/code/arrow.ts

@@ -1,5 +1,5 @@
 import CodeShape from './index'
-import { uniqueId } from 'utils/utils'
+import { uniqueId } from 'utils'
 import { ArrowShape, Decoration, ShapeStyles, ShapeType } from 'types'
 import { defaultStyle } from 'state/shape-styles'
 import { getShapeUtils } from 'state/shape-utils'

state/code/control.ts

@@ -4,7 +4,7 @@ import {
   NumberCodeControl,
   VectorCodeControl,
 } from 'types'
-import { uniqueId } from 'utils/utils'
+import { uniqueId } from 'utils'
 
 export const controls: Record<string, any> = {}
 

state/code/dot.ts

@@ -1,5 +1,5 @@
 import CodeShape from './index'
-import { uniqueId } from 'utils/utils'
+import { uniqueId } from 'utils'
 import { DotShape, ShapeStyles, ShapeType } from 'types'
 import { defaultStyle } from 'state/shape-styles'
 

state/code/draw.ts

@@ -1,5 +1,5 @@
 import CodeShape from './index'
-import { uniqueId } from 'utils/utils'
+import { uniqueId } from 'utils'
 import { DrawShape, ShapeType } from 'types'
 import { defaultStyle } from 'state/shape-styles'
 

state/code/ellipse.ts

@@ -1,5 +1,5 @@
 import CodeShape from './index'
-import { uniqueId } from 'utils/utils'
+import { uniqueId } from 'utils'
 import { EllipseShape, ShapeStyles, ShapeType } from 'types'
 import { defaultStyle } from 'state/shape-styles'
 

state/code/generate.ts

@@ -11,7 +11,7 @@ import Vec from 'utils/vec'
 import { NumberControl, VectorControl, codeControls, controls } from './control'
 import { codeShapes } from './index'
 import { CodeControl, Data, Shape } from 'types'
-import { getPage } from 'utils/utils'
+import { getPage } from 'utils'
 
 const baseScope = {
   Dot,

state/code/line.ts

@@ -1,5 +1,5 @@
 import CodeShape from './index'
-import { uniqueId } from 'utils/utils'
+import { uniqueId } from 'utils'
 import { LineShape, ShapeStyles, ShapeType } from 'types'
 import { defaultStyle } from 'state/shape-styles'
 

state/code/polyline.ts

@@ -1,5 +1,5 @@
 import CodeShape from './index'
-import { uniqueId } from 'utils/utils'
+import { uniqueId } from 'utils'
 import { PolylineShape, ShapeStyles, ShapeType } from 'types'
 import { defaultStyle } from 'state/shape-styles'
 

state/code/ray.ts

@@ -1,5 +1,5 @@
 import CodeShape from './index'
-import { uniqueId } from 'utils/utils'
+import { uniqueId } from 'utils'
 import { RayShape, ShapeStyles, ShapeType } from 'types'
 import { defaultStyle } from 'state/shape-styles'
 

state/code/rectangle.ts

@@ -1,5 +1,5 @@
 import CodeShape from './index'
-import { uniqueId } from 'utils/utils'
+import { uniqueId } from 'utils'
 import { RectangleShape, ShapeStyles, ShapeType } from 'types'
 import { defaultStyle } from 'state/shape-styles'
 

state/code/utils.ts

@@ -1,51 +1,45 @@
 import { Bounds } from 'types'
-import Vector, { Point } from './vector'
+import { ease } from 'utils'
+import vec from 'utils/vec'
 
 /**
  * ## Utils
  */
 export default class Utils {
-  static vectorToPoint(point: number[] | Vector | undefined): number[] {
+  static pointsBetween(a: number[], b: number[], steps = 6): number[][] {
-    if (typeof point === 'undefined') {
+    return Array.from(Array(steps))
-      return [0, 0]
+      .map((_, i) => ease(i / steps))
-    }
+      .map((t) => [...vec.lrp(a, b, t), (1 - t) / 2])
-
-    if (point instanceof Vector) {
-      return [point.x, point.y]
-    }
-    return point
   }
 
   static getRayRayIntersection(
-    p0: Vector,
+    p0: number[],
-    n0: Vector,
+    n0: number[],
-    p1: Vector,
+    p1: number[],
-    n1: Vector
+    n1: number[]
-  ): Vector {
+  ): number[] {
-    const p0e = Vector.add(p0, n0),
+    const p0e = vec.add(p0, n0),
-      p1e = Vector.add(p1, n1),
+      p1e = vec.add(p1, n1),
-      m0 = (p0e.y - p0.y) / (p0e.x - p0.x),
+      m0 = (p0e[1] - p0[1]) / (p0e[0] - p0[0]),
-      m1 = (p1e.y - p1.y) / (p1e.x - p1.x),
+      m1 = (p1e[1] - p1[1]) / (p1e[0] - p1[0]),
-      b0 = p0.y - m0 * p0.x,
+      b0 = p0[1] - m0 * p0[0],
-      b1 = p1.y - m1 * p1.x,
+      b1 = p1[1] - m1 * p1[0],
       x = (b1 - b0) / (m0 - m1),
       y = m0 * x + b0
 
-    return new Vector({ x, y })
+    return [x, y]
   }
 
   static getCircleTangentToPoint(
-    A: Point | Vector,
+    A: number[],
     r0: number,
-    P: Point | Vector,
+    P: number[],
     side: number
-  ): Vector {
+  ): number[] {
-    const v0 = Vector.cast(A)
+    const B = vec.lrp(A, P, 0.5),
-    const v1 = Vector.cast(P)
+      r1 = vec.dist(A, B),
-    const B = Vector.lrp(v0, v1, 0.5),
+      delta = vec.sub(B, A),
-      r1 = Vector.dist(v0, B),
+      d = vec.len(delta)
-      delta = Vector.sub(B, v0),
-      d = Vector.len(delta)
 
     if (!(d <= r0 + r1 && d >= Math.abs(r0 - r1))) {
       return
@@ -53,21 +47,25 @@ export default class Utils {
 
     const a = (r0 * r0 - r1 * r1 + d * d) / (2.0 * d),
       n = 1 / d,
-      p = Vector.add(v0, Vector.mul(delta, a * n)),
+      p = vec.add(A, vec.mul(delta, a * n)),
       h = Math.sqrt(r0 * r0 - a * a),
-      k = Vector.mul(Vector.per(delta), h * n)
+      k = vec.mul(vec.per(delta), h * n)
 
-    return side === 0 ? p.add(k) : p.sub(k)
+    return side === 0 ? vec.add(p, k) : vec.sub(p, k)
   }
 
-  static shortAngleDist(a: number, b: number): number {
+  static shortAngleDist(a0: number, a1: number): number {
     const max = Math.PI * 2
-    const da = (b - a) % max
+    const da = (a1 - a0) % max
     return ((2 * da) % max) - da
   }
 
-  static getSweep(C: Vector, A: Vector, B: Vector): number {
+  static angleDelta(a0: number, a1: number): number {
-    return Utils.shortAngleDist(Vector.ang(C, A), Vector.ang(C, B))
+    return this.shortAngleDist(a0, a1)
+  }
+
+  static getSweep(C: number[], A: number[], B: number[]): number {
+    return this.angleDelta(vec.angle(C, A), vec.angle(C, B))
   }
 
   static bez1d(a: number, b: number, c: number, d: number, t: number): number {
@@ -80,10 +78,10 @@ export default class Utils {
   }
 
   static getCubicBezierBounds(
-    p0: Point | Vector,
+    p0: number[],
-    c0: Point | Vector,
+    c0: number[],
-    c1: Point | Vector,
+    c1: number[],
-    p1: Point | Vector
+    p1: number[]
   ): Bounds {
     // solve for x
     let a = 3 * p1[0] - 9 * c1[0] + 9 * c0[0] - 3 * p0[0]

state/code/vector.ts

@@ -494,3 +494,49 @@ export default class Vector {
     return Vector.dist(a, Vector.nearestPointOnLineSegment(a, p0, p1, clamp))
   }
 }
+
+export class Utils {
+  static getRayRayIntersection(
+    p0: Vector,
+    n0: Vector,
+    p1: Vector,
+    n1: Vector
+  ): Vector {
+    const p0e = Vector.add(p0, n0),
+      p1e = Vector.add(p1, n1),
+      m0 = (p0e.y - p0.y) / (p0e.x - p0.x),
+      m1 = (p1e.y - p1.y) / (p1e.x - p1.x),
+      b0 = p0.y - m0 * p0.x,
+      b1 = p1.y - m1 * p1.x,
+      x = (b1 - b0) / (m0 - m1),
+      y = m0 * x + b0
+
+    return new Vector({ x, y })
+  }
+
+  static getCircleTangentToPoint(
+    A: Point | Vector,
+    r0: number,
+    P: Point | Vector,
+    side: number
+  ): Vector {
+    const v0 = Vector.cast(A)
+    const v1 = Vector.cast(P)
+    const B = Vector.lrp(v0, v1, 0.5),
+      r1 = Vector.dist(v0, B),
+      delta = Vector.sub(B, v0),
+      d = Vector.len(delta)
+
+    if (!(d <= r0 + r1 && d >= Math.abs(r0 - r1))) {
+      return
+    }
+
+    const a = (r0 * r0 - r1 * r1 + d * d) / (2.0 * d),
+      n = 1 / d,
+      p = Vector.add(v0, Vector.mul(delta, a * n)),
+      h = Math.sqrt(r0 * r0 - a * a),
+      k = Vector.mul(Vector.per(delta), h * n)
+
+    return side === 0 ? p.add(k) : p.sub(k)
+  }
+}

state/commands/align.ts

@@ -1,7 +1,7 @@
 import Command from './command'
 import history from '../history'
 import { AlignType, Data } from 'types'
-import { getCommonBounds, getPage, getSelectedShapes } from 'utils/utils'
+import { getCommonBounds, getPage, getSelectedShapes } from 'utils'
 import { getShapeUtils } from 'state/shape-utils'
 
 export default function alignCommand(data: Data, type: AlignType): void {

state/commands/arrow.ts

@@ -1,7 +1,7 @@
 import Command from './command'
 import history from '../history'
 import { Data } from 'types'
-import { getPage, getSelectedIds } from 'utils/utils'
+import { getPage, getSelectedIds } from 'utils'
 import { ArrowSnapshot } from 'state/sessions/arrow-session'
 
 export default function arrowCommand(

state/commands/command.ts

@@ -1,5 +1,5 @@
 import { Data } from 'types'
-import { getSelectedIds, setSelectedIds, setToArray } from 'utils/utils'
+import { getSelectedIds, setSelectedIds, setToArray } from 'utils'
 
 /* ------------------ Command Class ----------------- */
 

state/commands/create-page.ts

@@ -1,7 +1,7 @@
 import Command from './command'
 import history from '../history'
 import { Data, Page, PageState } from 'types'
-import { uniqueId } from 'utils/utils'
+import { uniqueId } from 'utils'
 import { current } from 'immer'
 import storage from 'state/storage'
 

state/commands/delete-selected.ts

@@ -6,7 +6,7 @@ import {
   getPage,
   getSelectedShapes,
   setSelectedIds,
-} from 'utils/utils'
+} from 'utils'
 import { current } from 'immer'
 import { getShapeUtils } from 'state/shape-utils'
 

state/commands/direct.ts

@@ -2,7 +2,7 @@ import Command from './command'
 import history from '../history'
 import { DirectionSnapshot } from 'state/sessions/direction-session'
 import { Data, LineShape, RayShape } from 'types'
-import { getPage } from 'utils/utils'
+import { getPage } from 'utils'
 
 export default function directCommand(
   data: Data,

state/commands/distribute.ts

@@ -6,7 +6,7 @@ import {
   getCommonBounds,
   getPage,
   getSelectedShapes,
-} from 'utils/utils'
+} from 'utils'
 import { getShapeUtils } from 'state/shape-utils'
 
 export default function distributeCommand(

state/commands/double-point-handle.ts

@@ -2,7 +2,7 @@ import Command from './command'
 import history from '../history'
 import { Data, PointerInfo } from 'types'
 import { getShapeUtils } from 'state/shape-utils'
-import { deepClone, getPage, getShape, updateParents } from 'utils/utils'
+import { deepClone, getPage, getShape, updateParents } from 'utils'
 
 export default function doublePointHandleCommand(
   data: Data,

state/commands/draw.ts

@@ -1,7 +1,7 @@
 import Command from './command'
 import history from '../history'
 import { Data, DrawShape } from 'types'
-import { getPage, setSelectedIds } from 'utils/utils'
+import { getPage, setSelectedIds } from 'utils'
 import { current } from 'immer'
 
 export default function drawCommand(data: Data, id: string): void {

state/commands/duplicate.ts

@@ -6,8 +6,8 @@ import {
   getPage,
   getSelectedShapes,
   setSelectedIds,
-} from 'utils/utils'
+} from 'utils'
-import { uniqueId } from 'utils/utils'
+import { uniqueId } from 'utils'
 import { current } from 'immer'
 import vec from 'utils/vec'
 

state/commands/edit.ts

@@ -1,7 +1,7 @@
 import Command from './command'
 import history from '../history'
 import { Data } from 'types'
-import { getPage } from 'utils/utils'
+import { getPage } from 'utils'
 import { EditSnapshot } from 'state/sessions/edit-session'
 import { getShapeUtils } from 'state/shape-utils'
 

state/commands/generate.ts

@@ -2,7 +2,7 @@ import Command from './command'
 import history from '../history'
 import { Data, Shape } from 'types'
 import { current } from 'immer'
-import { getPage, setSelectedIds } from 'utils/utils'
+import { getPage, setSelectedIds } from 'utils'
 
 export default function generateCommand(
   data: Data,

state/commands/group.ts

@@ -8,7 +8,7 @@ import {
   getSelectedShapes,
   getShape,
   setSelectedIds,
-} from 'utils/utils'
+} from 'utils'
 import { current } from 'immer'
 import { createShape, getShapeUtils } from 'state/shape-utils'
 import commands from '.'

state/commands/handle.ts

@@ -1,7 +1,7 @@
 import Command from './command'
 import history from '../history'
 import { Data } from 'types'
-import { getPage } from 'utils/utils'
+import { getPage } from 'utils'
 import { HandleSnapshot } from 'state/sessions/handle-session'
 import { getShapeUtils } from 'state/shape-utils'
 

state/commands/move-to-page.ts

@@ -8,7 +8,7 @@ import {
   getSelectedIds,
   setToArray,
   uniqueArray,
-} from 'utils/utils'
+} from 'utils'
 import { getShapeUtils } from 'state/shape-utils'
 import storage from 'state/storage'
 

state/commands/move.ts

@@ -7,7 +7,7 @@ import {
   getPage,
   getSelectedIds,
   setToArray,
-} from 'utils/utils'
+} from 'utils'
 import { getShapeUtils } from 'state/shape-utils'
 
 export default function moveCommand(data: Data, type: MoveType): void {

state/commands/mutate.ts

@@ -2,7 +2,7 @@ import Command from './command'
 import history from '../history'
 import { Data, Shape } from 'types'
 import { getShapeUtils } from 'state/shape-utils'
-import { getPage, updateParents } from 'utils/utils'
+import { getPage, updateParents } from 'utils'
 
 // Used when changing the properties of one or more shapes,
 // without changing selection or deleting any shapes.

state/commands/nudge.ts

@@ -1,7 +1,7 @@
 import Command from './command'
 import history from '../history'
 import { Data } from 'types'
-import { getPage, getSelectedShapes } from 'utils/utils'
+import { getPage, getSelectedShapes } from 'utils'
 import { getShapeUtils } from 'state/shape-utils'
 import vec from 'utils/vec'
 

state/commands/paste.ts

@@ -8,8 +8,8 @@ import {
   screenToWorld,
   setSelectedIds,
   setToArray,
-} from 'utils/utils'
+} from 'utils'
-import { uniqueId } from 'utils/utils'
+import { uniqueId } from 'utils'
 import vec from 'utils/vec'
 import { getShapeUtils } from 'state/shape-utils'
 import state from 'state/state'

state/commands/reset-bounds.ts

@@ -1,7 +1,7 @@
 import Command from './command'
 import history from '../history'
 import { Data } from 'types'
-import { getPage, getSelectedShapes, updateParents } from 'utils/utils'
+import { getPage, getSelectedShapes, updateParents } from 'utils'
 import { current } from 'immer'
 import { getShapeUtils } from 'state/shape-utils'
 

state/commands/rotate-ccw.ts

@@ -6,7 +6,7 @@ import {
   getCommonBounds,
   getPage,
   getSelectedShapes,
-} from 'utils/utils'
+} from 'utils'
 import vec from 'utils/vec'
 import { getShapeUtils } from 'state/shape-utils'
 

state/commands/rotate.ts

@@ -2,7 +2,7 @@ import Command from './command'
 import history from '../history'
 import { Data } from 'types'
 import { RotateSnapshot } from 'state/sessions/rotate-session'
-import { getPage } from 'utils/utils'
+import { getPage } from 'utils'
 import { getShapeUtils } from 'state/shape-utils'
 
 export default function rotateCommand(

state/commands/stretch.ts

@@ -1,12 +1,7 @@
 import Command from './command'
 import history from '../history'
 import { StretchType, Data, Corner } from 'types'
-import {
+import { deepClone, getCommonBounds, getPage, getSelectedShapes } from 'utils'
-  deepClone,
-  getCommonBounds,
-  getPage,
-  getSelectedShapes,
-} from 'utils/utils'
 import { getShapeUtils } from 'state/shape-utils'
 
 export default function stretchCommand(data: Data, type: StretchType): void {

state/commands/style.ts

@@ -1,12 +1,7 @@
 import Command from './command'
 import history from '../history'
 import { Data, ShapeStyles } from 'types'
-import {
+import { getDocumentBranch, getPage, getSelectedIds, setToArray } from 'utils'
-  getDocumentBranch,
-  getPage,
-  getSelectedIds,
-  setToArray,
-} from 'utils/utils'
 import { getShapeUtils } from 'state/shape-utils'
 import { current } from 'immer'
 

state/commands/toggle.ts

@@ -1,7 +1,7 @@
 import Command from './command'
 import history from '../history'
 import { Data, Shape } from 'types'
-import { getPage, getSelectedShapes } from 'utils/utils'
+import { getPage, getSelectedShapes } from 'utils'
 import { getShapeUtils } from 'state/shape-utils'
 import { PropsOfType } from 'types'
 

state/commands/transform-single.ts

@@ -3,7 +3,7 @@ import history from '../history'
 import { Data } from 'types'
 import { current } from 'immer'
 import { TransformSingleSnapshot } from 'state/sessions/transform-single-session'
-import { getPage, setSelectedIds, updateParents } from 'utils/utils'
+import { getPage, setSelectedIds, updateParents } from 'utils'
 
 export default function transformSingleCommand(
   data: Data,

state/commands/transform.ts

@@ -2,7 +2,7 @@ import Command from './command'
 import history from '../history'
 import { Data } from 'types'
 import { TransformSnapshot } from 'state/sessions/transform-session'
-import { getPage, updateParents } from 'utils/utils'
+import { getPage, updateParents } from 'utils'
 
 export default function transformCommand(
   data: Data,

state/commands/translate.ts

@@ -7,7 +7,7 @@ import {
   getPage,
   setSelectedIds,
   updateParents,
-} from 'utils/utils'
+} from 'utils'
 import { getShapeUtils } from 'state/shape-utils'
 
 export default function translateCommand(

state/commands/ungroup.ts

@@ -1,7 +1,7 @@
 import Command from './command'
 import history from '../history'
 import { Data, ShapeType } from 'types'
-import { getPage, getSelectedShapes, setSelectedIds } from 'utils/utils'
+import { getPage, getSelectedShapes, setSelectedIds } from 'utils'
 import { current } from 'immer'
 import { getShapeUtils } from 'state/shape-utils'
 

state/hacks.ts

@@ -5,7 +5,7 @@ import {
   getSelectedIds,
   screenToWorld,
   setToArray,
-} from 'utils/utils'
+} from 'utils'
 import { freeze } from 'immer'
 import session from './session'
 import state from './state'

state/inputs.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { PointerInfo } from 'types'
 import vec from 'utils/vec'
-import { isDarwin, getPoint } from 'utils/utils'
+import { isDarwin, getPoint } from 'utils'
 
 const DOUBLE_CLICK_DURATION = 250
 

state/sessions/arrow-session.ts

@@ -9,7 +9,7 @@ import {
   getSelectedIds,
   setToArray,
   updateParents,
-} from 'utils/utils'
+} from 'utils'
 import { getShapeUtils } from 'state/shape-utils'
 
 export default class ArrowSession extends BaseSession {

state/sessions/brush-session.ts

@@ -9,7 +9,7 @@ import {
   getTopParentId,
   setSelectedIds,
   setToArray,
-} from 'utils/utils'
+} from 'utils'
 import vec from 'utils/vec'
 
 export default class BrushSession extends BaseSession {

state/sessions/direction-session.ts

@@ -3,7 +3,7 @@ import vec from 'utils/vec'
 import BaseSession from './base-session'
 import commands from 'state/commands'
 import { current } from 'immer'
-import { getPage, getSelectedIds } from 'utils/utils'
+import { getPage, getSelectedIds } from 'utils'
 
 export default class DirectionSession extends BaseSession {
   delta = [0, 0]

state/sessions/draw-session.ts

@@ -2,7 +2,7 @@ import { current } from 'immer'
 import { Data, DrawShape } from 'types'
 import BaseSession from './base-session'
 import { getShapeUtils } from 'state/shape-utils'
-import { getPage, getShape, updateParents } from 'utils/utils'
+import { getPage, getShape, updateParents } from 'utils'
 import vec from 'utils/vec'
 import commands from 'state/commands'
 export default class BrushSession extends BaseSession {

state/sessions/edit-session.ts

@@ -2,7 +2,7 @@ import { Data, Shape } from 'types'
 import BaseSession from './base-session'
 import commands from 'state/commands'
 import { current } from 'immer'
-import { getPage, getSelectedShapes, getShape } from 'utils/utils'
+import { getPage, getSelectedShapes, getShape } from 'utils'
 import { getShapeUtils } from 'state/shape-utils'
 
 export default class EditSession extends BaseSession {

state/sessions/handle-session.ts

@@ -3,7 +3,7 @@ import vec from 'utils/vec'
 import BaseSession from './base-session'
 import commands from 'state/commands'
 import { current } from 'immer'
-import { getPage } from 'utils/utils'
+import { getPage } from 'utils'
 import { getShapeUtils } from 'state/shape-utils'
 
 export default class HandleSession extends BaseSession {

state/sessions/rotate-session.ts

@@ -14,7 +14,7 @@ import {
   getDocumentBranch,
   setToArray,
   getSelectedIds,
-} from 'utils/utils'
+} from 'utils'
 import { getShapeUtils } from 'state/shape-utils'
 
 const PI2 = Math.PI * 2

state/sessions/transform-session.ts

@@ -15,7 +15,7 @@ import {
   getTransformedBoundingBox,
   setToArray,
   updateParents,
-} from 'utils/utils'
+} from 'utils'
 
 export default class TransformSession extends BaseSession {
   scaleX = 1

state/sessions/transform-single-session.ts

@@ -10,7 +10,7 @@ import {
   getShape,
   getSelectedShapes,
   updateParents,
-} from 'utils/utils'
+} from 'utils'
 
 export default class TransformSingleSession extends BaseSession {
   transformType: Edge | Corner

state/sessions/translate-session.ts

@@ -3,7 +3,7 @@ import vec from 'utils/vec'
 import BaseSession from './base-session'
 import commands from 'state/commands'
 import { current } from 'immer'
-import { uniqueId } from 'utils/utils'
+import { uniqueId } from 'utils'
 import {
   getChildIndexAbove,
   getDocumentBranch,
@@ -11,7 +11,7 @@ import {
   getSelectedShapes,
   setSelectedIds,
   updateParents,
-} from 'utils/utils'
+} from 'utils'
 import { getShapeUtils } from 'state/shape-utils'
 
 export default class TranslateSession extends BaseSession {

state/shape-utils/arrow.tsx

@@ -1,4 +1,4 @@
-import { getArcLength, uniqueId } from 'utils/utils'
+import { getArcLength, uniqueId } from 'utils'
 import vec from 'utils/vec'
 import {
   getSvgPathFromStroke,
@@ -6,7 +6,7 @@ import {
   getBoundsFromPoints,
   translateBounds,
   pointsBetween,
-} from 'utils/utils'
+} from 'utils'
 import {
   ArrowShape,
   DashStyle,
@@ -14,7 +14,7 @@ import {
   ShapeHandle,
   ShapeType,
 } from 'types'
-import { circleFromThreePoints, isAngleBetween } from 'utils/utils'
+import { circleFromThreePoints, isAngleBetween } from 'utils'
 import { pointInBounds } from 'utils/hitTests'
 import {
   intersectArcBounds,

state/shape-utils/dot.tsx

@@ -1,8 +1,8 @@
-import { uniqueId } from 'utils/utils'
+import { uniqueId } from 'utils'
 import { DotShape, ShapeType } from 'types'
 import { boundsContained } from 'utils/bounds'
 import { intersectCircleBounds } from 'utils/intersections'
-import { translateBounds } from 'utils/utils'
+import { translateBounds } from 'utils'
 import { defaultStyle } from 'state/shape-styles'
 import { registerShapeUtils } from './register'
 

state/shape-utils/draw.tsx

@@ -1,4 +1,4 @@
-import { uniqueId } from 'utils/utils'
+import { uniqueId } from 'utils'
 import vec from 'utils/vec'
 import { DashStyle, DrawShape, ShapeStyles, ShapeType } from 'types'
 import { intersectPolylineBounds } from 'utils/intersections'
@@ -9,7 +9,7 @@ import {
   getBoundsFromPoints,
   getSvgPathFromStroke,
   translateBounds,
-} from 'utils/utils'
+} from 'utils'
 import { defaultStyle, getShapeStyle } from 'state/shape-styles'
 import { registerShapeUtils } from './register'
 

state/shape-utils/ellipse.tsx

@@ -11,7 +11,7 @@ import {
   getSvgPathFromStroke,
   rng,
   translateBounds,
-} from 'utils/utils'
+} from 'utils'
 import { defaultStyle, getShapeStyle } from 'state/shape-styles'
 import getStroke from 'perfect-freehand'
 import { registerShapeUtils } from './register'

state/shape-utils/group.tsx

@@ -1,8 +1,8 @@
-import { uniqueId } from 'utils/utils'
+import { uniqueId } from 'utils'
 import vec from 'utils/vec'
 import { GroupShape, ShapeType } from 'types'
 import { getShapeUtils } from './index'
-import { getCommonBounds, translateBounds } from 'utils/utils'
+import { getCommonBounds, translateBounds } from 'utils'
 import { defaultStyle } from 'state/shape-styles'
 import styled from 'styles'
 import { registerShapeUtils } from './register'

state/shape-utils/line.tsx

@@ -1,10 +1,10 @@
-import { uniqueId } from 'utils/utils'
+import { uniqueId } from 'utils'
 import vec from 'utils/vec'
 import { LineShape, ShapeType } from 'types'
 import { boundsContained } from 'utils/bounds'
 import { intersectCircleBounds } from 'utils/intersections'
 import { ThinLine } from 'components/canvas/misc'
-import { translateBounds } from 'utils/utils'
+import { translateBounds } from 'utils'
 import { defaultStyle } from 'state/shape-styles'
 import { registerShapeUtils } from './register'
 

state/shape-utils/polyline.tsx

@@ -1,9 +1,9 @@
-import { uniqueId } from 'utils/utils'
+import { uniqueId } from 'utils'
 import vec from 'utils/vec'
 import { PolylineShape, ShapeType } from 'types'
 import { intersectPolylineBounds } from 'utils/intersections'
 import { boundsContainPolygon } from 'utils/bounds'
-import { getBoundsFromPoints, translateBounds } from 'utils/utils'
+import { getBoundsFromPoints, translateBounds } from 'utils'
 import { defaultStyle } from 'state/shape-styles'
 import { registerShapeUtils } from './register'
 

state/shape-utils/ray.tsx

@@ -1,10 +1,10 @@
-import { uniqueId } from 'utils/utils'
+import { uniqueId } from 'utils'
 import vec from 'utils/vec'
 import { RayShape, ShapeType } from 'types'
 import { boundsContained } from 'utils/bounds'
 import { intersectCircleBounds } from 'utils/intersections'
 import { ThinLine } from 'components/canvas/misc'
-import { translateBounds } from 'utils/utils'
+import { translateBounds } from 'utils'
 import { defaultStyle } from 'state/shape-styles'
 import { registerShapeUtils } from './register'
 

state/shape-utils/rectangle.tsx

@@ -1,4 +1,4 @@
-import { uniqueId } from 'utils/utils'
+import { uniqueId } from 'utils'
 import vec from 'utils/vec'
 import { DashStyle, RectangleShape, ShapeType } from 'types'
 import {
@@ -7,7 +7,7 @@ import {
   rng,
   shuffleArr,
   pointsBetween,
-} from 'utils/utils'
+} from 'utils'
 import { defaultStyle, getShapeStyle } from 'state/shape-styles'
 import getStroke from 'perfect-freehand'
 import { registerShapeUtils } from './register'

state/shape-utils/register.tsx

@@ -1,12 +1,8 @@
 import { Shape, ShapeUtility } from 'types'
 import vec from 'utils/vec'
-import {
+import { getBoundsCenter, getBoundsFromPoints, getRotatedCorners } from 'utils'
-  getBoundsCenter,
-  getBoundsFromPoints,
-  getRotatedCorners,
-} from 'utils/utils'
 import { boundsCollidePolygon, boundsContainPolygon } from 'utils/bounds'
-import { uniqueId } from 'utils/utils'
+import { uniqueId } from 'utils'
 import React from 'react'
 import { pointInBounds } from 'utils/hitTests'
 

state/shape-utils/text.tsx

@@ -1,4 +1,4 @@
-import { uniqueId, isMobile } from 'utils/utils'
+import { uniqueId, isMobile } from 'utils'
 import vec from 'utils/vec'
 import { TextShape, ShapeType, FontSize } from 'types'
 import {

state/state.ts

@@ -28,7 +28,7 @@ import {
   getPageState,
   setToArray,
   copyToClipboard,
-} from 'utils/utils'
+} from 'utils'
 import {
   Data,
   PointerInfo,

state/storage.ts

@@ -1,7 +1,7 @@
 import { Data, PageState, TLDocument } from 'types'
-import { decompress, compress, setToArray } from 'utils/utils'
+import { decompress, compress, setToArray } from 'utils'
 import state from './state'
-import { uniqueId } from 'utils/utils'
+import { uniqueId } from 'utils'
 import * as idb from 'idb-keyval'
 
 const CURRENT_VERSION = 'code_slate_0.0.8'

types.ts

@@ -355,6 +355,17 @@ export enum DistributeType {
   Vertical,
 }
 
+export interface BezierCurveSegment {
+  start: number[]
+  tangentStart: number[]
+  normalStart: number[]
+  pressureStart: number
+  end: number[]
+  tangentEnd: number[]
+  normalEnd: number[]
+  pressureEnd: number
+}
+
 /* -------------------------------------------------- */
 /*                     Code Editor                    */
 /* -------------------------------------------------- */

utils/index.ts

@@ -0,0 +1 @@
+export * from './utils'

utils/svg.ts

@@ -1,5 +1,5 @@
 // Some helpers for drawing SVGs.
-import { getSweep } from 'utils/utils'
+import { getSweep } from 'utils'
 
 // General