Refactor types to be based off of branded numbers

Author: dpolugic

src/App.tsx

@@ -9,7 +9,7 @@ import {
   getRelativePatternPosition,
 } from './functions'
 import { useStableFunction } from './hooks'
-import { AbsolutePoint, State, asAbsolutePoint } from './types'
+import { AbsolutePattern, AbsolutePoint, RelativePattern, State, asAbsolutePoint } from './types'
 
 const StyledCanvas = styled.canvas`
   /* border: 1px solid #faf; */
@@ -22,7 +22,7 @@ const getDraftState = (state: State, draftClick: DraftClick, mousePosition: Abso
   const draftPattern = {
     anchor: draftClick.anchor,
     target: mousePosition,
-  }
+  } 
 
   if (draftClick.clickedPath === undefined) {
     // create top-level screen
@@ -32,7 +32,11 @@ const getDraftState = (state: State, draftClick: DraftClick, mousePosition: Abso
   // if draft origin is inside existing screen, add a pattern instead
   const { screenIndex, nestedPath } = draftClick.clickedPath
 
-  let newDraft = getRelativePatternPosition(draftPattern, state.screens[screenIndex])
+
+  // Re-interpret as relative pattern.
+  const draftPatternRelative = draftPattern satisfies AbsolutePattern as unknown as RelativePattern
+
+  let newDraft = getRelativePatternPosition(draftPatternRelative, state.screens[screenIndex])
   for (const k of nestedPath) {
     newDraft = getRelativePatternPosition(newDraft, state.patterns[k])
   }

src/draw.ts

@@ -5,7 +5,7 @@ import {
   mapPointToViewportSpace,
   pointIsInBoundaries,
 } from './functions'
-import { AbsolutePattern, Boundaries, Pattern, Point, Size, State } from './types'
+import { AbsoluteNumber, AbsolutePattern, Boundaries, Pattern, PatternNumber, Point, Size, State, ViewportPattern } from './types'
 
 // -- constants
 
@@ -32,30 +32,31 @@ type GlobalMutableState = {
 
 // -- helper functions
 
-const mapPatternToViewportSpace = (pattern: AbsolutePattern, screenSize: Size): Pattern => ({
+const mapPatternToViewportSpace = (pattern: AbsolutePattern, screenSize: Size): ViewportPattern => ({
   anchor: mapPointToViewportSpace(pattern.anchor, screenSize),
   target: mapPointToViewportSpace(pattern.target, screenSize),
 })
 
-const getPatternPoints = (pattern: Pattern): Point[] => {
+const getPatternPoints = <N extends PatternNumber>(pattern: Pattern<N>): Point<N>[] => {
   const { xMin, xMax, yMin, yMax } = getBoundariesFromPattern(pattern)
 
   return [
     [xMin, yMin], // top left
     [xMax, yMin], // top right
     [xMax, yMax], // bottom right
     [xMin, yMax], // bottom left
-  ]
+  ] 
 }
 
 // We'll ignore everything that's a bit outside the viewport.
 // This is not really accurate, but should be OK for our purposes.
-const VALID_BOUNDARIES: Boundaries = {
-  xMin: -0.1,
-  xMax: 1.1,
-  yMin: -0.1,
-  yMax: 1.1,
-}
+const VALID_BOUNDARIES: Boundaries<AbsoluteNumber> = {
+  xMin: -0.1 as AbsoluteNumber,
+  xMax: 1.1 as AbsoluteNumber,
+  yMin: -0.1 as AbsoluteNumber,
+  yMax: 1.1 as AbsoluteNumber,
+}  
+
 const validatePatternPosition = (pattern: AbsolutePattern): boolean => {
   return getPatternPoints(pattern).some(p => pointIsInBoundaries(p, VALID_BOUNDARIES))
 }

src/functions.ts

@@ -1,24 +1,38 @@
 import {
+  AbsoluteNumber,
   AbsolutePattern,
   AbsolutePoint,
   Boundaries,
+  NumberPair,
   Pattern,
+  PatternNumber,
   Point,
+  RelativeNumber,
+  RelativePattern,
+  RelativePoint,
   Size,
   State,
-  asAbsolutePoint,
+  ViewportPoint
 } from './types'
 
-const getBoundariesFromTwoPoints = ([x1, y1]: Point, [x2, y2]: Point): Boundaries => {
+function min<N extends PatternNumber>(a: N, b: N): N {
+  return a < b ? a : b
+}
+
+function max<N extends PatternNumber>(a: N, b: N): N {
+  return a > b ? a : b
+}
+
+const getBoundariesFromTwoPoints = <N extends PatternNumber>([x1, y1]: Point<N>, [x2, y2]: Point<N>): Boundaries<N> => {
   return {
-    xMin: Math.min(x1, x2),
-    xMax: Math.max(x1, x2),
-    yMin: Math.min(y1, y2),
-    yMax: Math.max(y1, y2),
+    xMin: min(x1, x2),
+    xMax: max(x1, x2),
+    yMin: min(y1, y2),
+    yMax: max(y1, y2),
   }
 }
 
-export const normalizePattern = (pattern: Pattern): Pattern => {
+export const normalizePattern = <N extends PatternNumber>(pattern: Pattern<N>): Pattern<N> => {
   const { xMin, xMax, yMin, yMax } = getBoundariesFromPattern(pattern)
 
   return {
@@ -27,11 +41,11 @@ export const normalizePattern = (pattern: Pattern): Pattern => {
   }
 }
 
-export const getBoundariesFromPattern = (pattern: Pattern): Boundaries => {
+export const getBoundariesFromPattern = <N extends PatternNumber>(pattern: Pattern<N>): Boundaries<N>=> {
   return getBoundariesFromTwoPoints(pattern.anchor, pattern.target)
 }
 
-export const pointIsInBoundaries = (point: Point, boundaries: Boundaries): boolean => {
+export const pointIsInBoundaries = <N extends PatternNumber>(point: Point<N>, boundaries: Boundaries<N>): boolean => {
   const { xMin, xMax, yMin, yMax } = boundaries
   const [pointX, pointY] = point
 
@@ -45,45 +59,45 @@ const pointIsInPattern = (point: AbsolutePoint, pattern: AbsolutePattern): boole
 export const mapPointToViewportSpace = (
   [x, y]: AbsolutePoint,
   [viewportWidth, viewportHeight]: Size
-): Point => {
-  return [x * viewportWidth, y * viewportHeight]
+): ViewportPoint => {
+  return [x * viewportWidth, y * viewportHeight] satisfies NumberPair as ViewportPoint
 }
 
 // ts-unused-exports:disable-next-line
 export const mapPointFromViewportSpace = (
-  [x, y]: Point,
+  [x, y]: ViewportPoint,
   [viewportWidth, viewportHeight]: Size
 ): AbsolutePoint => {
-  return asAbsolutePoint([x / viewportWidth, y / viewportHeight])
+  return [x / viewportWidth, y / viewportHeight] satisfies NumberPair as AbsolutePoint
 }
 
-const getRelativePointPosition = (point: Point, pattern: Pattern): Point => {
+function getRelativePointPosition(point: RelativePoint, pattern: AbsolutePattern | RelativePattern): RelativePoint {
   const [x1, y1] = pattern.anchor
   const [x2, y2] = pattern.target
   const [x, y] = point
 
   const relativeX = (x - x1) / (x2 - x1)
   const relativeY = (y - y1) / (y2 - y1)
 
-  return [relativeX, relativeY]
+  return [relativeX, relativeY] satisfies NumberPair as RelativePoint
 }
 
-export const getRelativePatternPosition = (pattern: Pattern, basePattern: Pattern): Pattern => {
+export function getRelativePatternPosition(pattern: RelativePattern, basePattern: AbsolutePattern | RelativePattern): RelativePattern {
   return {
     anchor: getRelativePointPosition(pattern.anchor, basePattern),
     target: getRelativePointPosition(pattern.target, basePattern),
   }
 }
 
-const resolveRelativePointPosition = (relativePoint: Point, pattern: Pattern): Point => {
+const resolveRelativePointPosition = <N extends RelativeNumber | AbsoluteNumber>(relativePoint: RelativePoint, pattern: Pattern<N>): Point<N> => {
   const [x1, y1] = pattern.anchor
   const [x2, y2] = pattern.target
   const [x, y] = relativePoint
 
   const resolvedX = x1 + x * (x2 - x1)
   const resolvedY = y1 + y * (y2 - y1)
 
-  return [resolvedX, resolvedY]
+  return [resolvedX, resolvedY] satisfies NumberPair as Point<N>
 }
 
 export const getScreenSize = (ctx: CanvasRenderingContext2D): Size => [ctx.canvas.width, ctx.canvas.height]
@@ -92,16 +106,16 @@ export const getMousePoint = (
   ctx: CanvasRenderingContext2D,
   mouseEvent: React.MouseEvent<HTMLCanvasElement, MouseEvent>
 ): AbsolutePoint => {
-  return mapPointFromViewportSpace([mouseEvent.clientX, mouseEvent.clientY], getScreenSize(ctx))
+  const mousePosition = [mouseEvent.clientX, mouseEvent.clientY] satisfies NumberPair as ViewportPoint
+
+  return mapPointFromViewportSpace(mousePosition, getScreenSize(ctx))
 }
 
-export function combinePatterns(parent: AbsolutePattern, child: Pattern): AbsolutePattern
-export function combinePatterns(parent: Pattern, child: Pattern): Pattern
-export function combinePatterns(parent: Pattern, child: Pattern): Pattern {
+export function combinePatterns<ParentNumber extends RelativeNumber | AbsoluteNumber>(parent: Pattern<ParentNumber>, child: RelativePattern): Pattern<ParentNumber> {
   return {
     anchor: resolveRelativePointPosition(child.anchor, parent),
     target: resolveRelativePointPosition(child.target, parent),
-  }
+  } 
 }
 
 type NestedPath = number[]
@@ -115,7 +129,7 @@ const MAX_DEPTH = 4
 
 const findClickedPattern = (
   previousBasePattern: AbsolutePattern,
-  patterns: Pattern[],
+  patterns: RelativePattern[],
   point: AbsolutePoint,
   path: number[] = []
 ): NestedPath | undefined => {

src/types.ts

@@ -1,34 +1,54 @@
-type Brand<T> = T & { readonly __brand: unique symbol }
+type Brand<T, B extends string> = T & { readonly __brand: B }
 
-export type Point = [x: number, y: number]
 
-export type AbsolutePoint = Brand<Point>
+export type RelativeNumber = Brand<number, 'RelativeNumber'>
+export type AbsoluteNumber = Brand<number, 'AbsoluteNumber'>
+export type ViewportNumber = Brand<number, 'ViewportNumber'>
 
-export const asAbsolutePoint = (point: Point): AbsolutePoint => point as AbsolutePoint
+
+export type PatternNumber = RelativeNumber | AbsoluteNumber | ViewportNumber
+
+// Used as intermediate type when casting after doing calculations on coordinates.
+export type NumberPair = [x: number, y: number]
+
+export type Point<N extends PatternNumber> = [x: N, y: N]
+
+// offset within pattern
+export type RelativePoint = Point<RelativeNumber>
+
+// absolute point in screen space
+export type AbsolutePoint = Point<AbsoluteNumber>
+
+// absolute point in viewport space
+export type ViewportPoint = Point<ViewportNumber>
+
+export const asAbsolutePoint = (point: NumberPair): AbsolutePoint => point as AbsolutePoint
 
 export type Size = [width: number, height: number]
 
-export type Pattern<P extends Point = Point> = {
-  anchor: P // relative point representing base of new screen.
-  target: P // relative point representing other corner of new screen. can have negative coordinates.
+export type Pattern<N extends PatternNumber> = {
+  anchor: Point<N> // relative point representing base of new screen.
+  target: Point<N> // relative point representing other corner of new screen. can have negative coordinates.
 }
 
 // represents a pattern in relative coordinates.
-export type RelativePattern = Brand<Pattern>
+export type RelativePattern = Pattern<RelativeNumber>
 
 // represents a pattern in absolute coordinates.
-export type AbsolutePattern = Pattern<AbsolutePoint>
+export type AbsolutePattern = Pattern<AbsoluteNumber>
+
+// represents a pattern in viewport coordinates.
+export type ViewportPattern = Pattern<ViewportNumber>
 
-export const asAbsolutePattern = (pattern: Pattern): AbsolutePattern => pattern as AbsolutePattern
 
-export type Boundaries = {
-  xMin: number
-  xMax: number
-  yMin: number
-  yMax: number
+export type Boundaries<N extends PatternNumber> = {
+  xMin: N
+  xMax: N
+  yMin: N
+  yMax: N
 }
 
 export type State = {
   screens: AbsolutePattern[]
-  patterns: Pattern[]
+  patterns: RelativePattern[]
 }