gum-jsx 1.6.2 → 1.6.4

package/src/elems/layout.ts

@@ -2,7 +2,7 @@
 
 import { THEME } from '../lib/theme'
 import { DEFAULTS as D, none } from '../lib/const'
-import { is_scalar, ensure_vector, broadcast_point, log, exp, max, sum, zip, div2, cumsum, reshape, repeat, meshgrid, padvec, normalize, mean, identity, invert, aspect_invariant, check_singleton, check_array, rect_center, rect_radius, join_limits, radial_rect, norm_side, intersperse, prefix_split, merge_points } from '../lib/utils'
+import { is_scalar, ensure_vector, ensure_pair, log, exp, max, sum, zip, div2, cumsum, reshape, repeat, meshgrid, padvec, normalize, mean, identity, invert, aspect_invariant, check_singleton, check_array, rect_center, rect_radius, join_limits, radial_rect, norm_side, intersperse, prefix_split, merge_points } from '../lib/utils'
 import { wrapWidths } from '../lib/wrap'
 
 import { Context, Group, Element, Rectangle, Spacer, spec_split, align_frac, ensure_children } from './core'
@@ -328,7 +328,7 @@ function computeGridLayout(children: Element[][], rows: number, cols: number, {
     const aspect_ideal = exp(log_mu - mean(widths.map(log)) + mean(heights.map(log)))
 
     // adjust widths and heights to account for spacing
-    const [spacex, spacey] = broadcast_point(spacing)
+    const [spacex, spacey] = ensure_pair(spacing)
     const [scalex, scaley] = [1 - spacex * (cols-1), 1 - spacey * (rows-1)]
     widths = widths.map(w => scalex * w)
     heights = heights.map(h => scaley * h)
@@ -382,11 +382,9 @@ class Grid extends Group {
         const aspect = aspect0 ?? aspect_ideal
 
         // make grid
-        const rects = meshgrid(rranges, cranges).map(([ ylim, xlim ]) =>
-            join_limits({ h: xlim, v: ylim })
-        )
-        const items = zip(children, rects).map(([ child, rect ]) =>
-            child.clone({ rect })
+        const mesh = meshgrid(rranges, cranges)
+        const items = zip(children, mesh).map(([ child, [ ylim, xlim ] ]) =>
+            child.clone({ xrect: xlim, yrect: ylim })
         )
 
         // pass to Group

package/src/elems/math.ts

@@ -50,6 +50,10 @@ const SYMBOL_MODE_FONT: Record<SymbolMode, FontFamily> = {
     text: 'KaTeX_Main',
 }
 
+const TEX_FONT_FAMILY: Record<string, FontFamily | undefined> = {
+    mathbb: 'KaTeX_AMS',
+}
+
 //
 // constants
 //
@@ -1130,6 +1134,11 @@ function convert_tree(tree: Tree | TreeNode | null, attr: Attrs = {}): WithMath
         } else if (type == 'text') {
             const { body } = tree
             return convert_tree(body, attr)
+        } else if (type == 'font') {
+            const { font, body } = tree
+            const font_family = TEX_FONT_FAMILY[font]
+            const font_attr = font_family == null ? {} : { font_family }
+            return convert_tree(body, { ...attr, ...font_attr })
         } else if (type == 'accent') {
             const { label, base: base0 } = tree
             const base = convert_tree(base0, attr)

package/src/elems/network.ts

@@ -1,14 +1,14 @@
 // network elements
 
 import { THEME } from '../lib/theme'
-import { abs, sub2, mul2, check_singleton, is_string, rect_center, side_direc, prefix_split } from '../lib/utils'
+import { abs, sub2, mul2, check_singleton, is_string, rect_center, side_direc, prefix_split, join_limits } from '../lib/utils'
 
 import { Context, Element, Group, ensure_children } from './core'
-import type { ElementArgs, GroupArgs } from './core'
 import { Frame } from './layout'
 import { Arrow } from './geometry'
 import { Text } from './text'
 
+import type { ElementArgs, GroupArgs } from './core'
 import type { AlignValue, Point, Side } from '../lib/types'
 
 //
@@ -135,8 +135,9 @@ class Edge extends Element {
 
 class Network extends Group {
     constructor(args: GroupArgs = {}) {
-        const { children: children0, coord, ...attr0 } = THEME(args, 'Network')
+        const { children: children0, xlim, ylim, coord: coord0, ...attr0 } = THEME(args, 'Network')
         const [ node_attr, edge_attr, attr ] = prefix_split([ 'node', 'edge' ], attr0)
+        const coord = coord0 ?? join_limits({ h: xlim, v: ylim })
         const children = ensure_children(children0)
 
         // process nodes and make label map

package/src/elems/plot.ts

@@ -2,7 +2,7 @@
 
 import { THEME } from '../lib/theme'
 import { DEFAULTS as D, none, blue, white } from '../lib/const'
-import { sign, abs, linspace, invert_orient, join_limits, ensure_vector, is_scalar, is_string, is_object, ensure_singleton, check_singleton, rounder, enumerate, aspect_invariant, rect_aspect, merge_rects, expand_limits, flip_rect, resolve_limits, smoothstep, prefix_split, prefix_join } from '../lib/utils'
+import { sign, abs, linspace, invert_orient, join_limits, split_limits, ensure_vector, is_scalar, is_string, is_object, ensure_singleton, check_singleton, rounder, enumerate, aspect_invariant, rect_aspect, merge_rects, expand_limits, flip_rect, resolve_limits, smoothstep, prefix_split, prefix_join } from '../lib/utils'
 import { Span } from './text'
 
 import { Element, Group, Spacer, spec_split, is_element, ensure_children } from './core'
@@ -416,10 +416,10 @@ interface LegendArgs extends ElementArgs {
 
 class Mesh extends Scale {
     constructor(args: MeshArgs = {}) {
-        const { children: children0, locs: locs0, direc = 'h', lim = D.lim, span = D.lim, ...attr } = THEME(args, 'Mesh')
-        const locs = auto_array(locs0, lim)
-        const coord = join_limits({ [direc]: lim, [invert_orient(direc)]: span })
-        super({ locs, direc, coord, span, ...attr })
+        const { children: children0, locs: locs0 = 10, direc = 'h', xlim, ylim, coord, ...attr } = THEME(args, 'Mesh')
+        const { [direc]: lim, [invert_orient(direc)]: span } = resolve_limits(xlim, ylim, coord as Rect)
+        const locs = auto_array(locs0, lim ?? D.lim)
+        super({ locs, direc, span, xlim, ylim, coord, ...attr })
         this.args = args
     }
 }
@@ -442,23 +442,9 @@ class VMesh extends Mesh {
 
 class Mesh2D extends Group {
     constructor(args: Mesh2DArgs = {}) {
-        let { children: children0, locs, xlocs, ylocs, direc = 'h', xlim = D.lim, ylim = D.lim, xspan, yspan, ...attr } = THEME(args, 'Mesh2D')
-
-        // set default values
-        xlocs ??= locs
-        ylocs ??= locs
-        xspan ??= xlim
-        yspan ??= ylim
-
-        // convert locs to arrays
-        xlocs = auto_array(xlocs, xlim)
-        ylocs = auto_array(ylocs, ylim)
-
-        // create meshes
-        const hmesh = new HMesh({ locs: xlocs, span: yspan, lim: xlim, ...attr })
-        const vmesh = new VMesh({ locs: ylocs, span: xspan, lim: ylim, ...attr })
-
-        // pass to Group
+        let { children: children0, locs, xlocs, ylocs, direc = 'h', xlim, ylim, coord, ...attr } = THEME(args, 'Mesh2D')
+        const hmesh = new HMesh({ locs: xlocs ?? locs, xlim, ylim, coord })
+        const vmesh = new VMesh({ locs: ylocs ?? locs, xlim, ylim, coord })
         super({ children: [ hmesh, vmesh ], ...attr })
         this.args = args
     }
@@ -527,8 +513,8 @@ function outer_limits(children: Element[], { xlim, ylim, padding = 0 }: { xlim?:
     if (children.length == 0) return
 
     // pull in child coordinate system
-    const coord0 = merge_rects(children.map((c: Element) => c.graphCoord()))
-    const { xlim: xlim0, ylim: ylim0 } = resolve_limits(xlim, ylim, coord0)
+    const coord = merge_rects(children.map((c: Element) => c.graphCoord()))
+    const { h: xlim0, v: ylim0 } = resolve_limits(xlim, ylim, coord)
 
     // expand with padding
     const [ xpad, ypad ] = ensure_vector(padding, 2)
@@ -607,13 +593,13 @@ interface PlotArgs extends BoxArgs {
 class Plot extends Box {
     constructor(args: PlotArgs = {}) {
         let {
-            children: children0, xlim, ylim, axis = true, xaxis, yaxis, xticks = 5, yticks = 5, xanchor, yanchor, grid, xgrid, ygrid, xlabel, ylabel, title, tick_size = 0.015, label_size = 0.05, label_offset = 0.125, title_size = 0.075, title_offset = 0.05, xlabel_size, ylabel_size, xlabel_offset, ylabel_offset, xtick_label_offset = 0.75, ytick_label_offset = 0.25, xtick_size, ytick_size, padding, margin, aspect: aspect0 = 'auto', clip, debug = false, ...attr0
+            children: children0, xlim, ylim, axis = true, xaxis, yaxis, xticks = 5, yticks = 5, xanchor, yanchor, grid, xgrid, ygrid, xlabel, ylabel, title, tick_size = 0.015, label_size = 0.05, label_offset = 0.125, title_size = 0.075, title_offset = 0.05, xlabel_size, ylabel_size, xlabel_offset, ylabel_offset, xtick_label_offset = 0.75, ytick_label_offset = 0.25, xtick_size, ytick_size, padding, margin, coord: coord0 = 'auto', aspect: aspect0 = 'auto', clip, debug = false, ...attr0
         } = THEME(args, 'Plot')
         const children = ensure_children(children0)
 
         // determine coordinate system and aspect
-        const coord = outer_limits(children, { xlim, ylim, padding }) as Rect
-        const [ xmin, ymin, xmax, ymax ] = coord
+        const coord = coord0 == 'auto' ? outer_limits(children, { xlim, ylim, padding }) : coord0
+        const [ xmin, ymin, xmax, ymax ] = coord ?? D.coord
         xlim = [ xmin, xmax ]
         ylim = [ ymin, ymax ]
 
@@ -666,9 +652,8 @@ class Plot extends Box {
         if (xaxis === true) xaxis = new HAxis({ ticks: xticks, lim: xlim })
         if (xaxis != null && xaxis !== false) {
             const xtick_size1 = xtick_size * (ymax - ymin)
-            const xaxis_ylim: Limit = [ xanchor - xtick_size1, xanchor + xtick_size1 ]
-            const xaxis_rect = join_limits({ h: xlim, v: xaxis_ylim })
-            xaxis = xaxis.clone({ rect: xaxis_rect, ...xaxis_attr }) as HAxis
+            const xaxis_ylim = [ xanchor - xtick_size1, xanchor + xtick_size1 ]
+            xaxis = xaxis.clone({ xrect: xlim, yrect: xaxis_ylim, ...xaxis_attr }) as HAxis
             fg_elems.push(xaxis)
         }
 
@@ -676,16 +661,15 @@ class Plot extends Box {
         if (yaxis === true) yaxis = new VAxis({ ticks: yticks, lim: ylim })
         if (yaxis != null && yaxis !== false) {
             const ytick_size1 = ytick_size * (xmax - xmin)
-            const yaxis_xlim: Limit = [ yanchor - ytick_size1, yanchor + ytick_size1 ]
-            const yaxis_rect = join_limits({ h: yaxis_xlim, v: ylim })
-            yaxis = yaxis.clone({ rect: yaxis_rect, ...yaxis_attr }) as VAxis
+            const yaxis_xlim = [ yanchor - ytick_size1, yanchor + ytick_size1 ]
+            yaxis = yaxis.clone({ xrect: yaxis_xlim, yrect: ylim, ...yaxis_attr }) as VAxis
             fg_elems.push(yaxis)
         }
 
         // automatic xgrid generation
         if (xgrid != null && xgrid !== false) {
             const locs = (xgrid === true && xaxis != null && xaxis !== false) ? xaxis.locs : xgrid
-            const xgrid_elem = new HMesh({ locs: locs as number[], lim: xlim, rect: coord, ...xgrid_attr })
+            const xgrid_elem = new HMesh({ locs: locs as number[], ...xgrid_attr })
             bg_elems.unshift(xgrid_elem)
         } else {
             xgrid = undefined
@@ -694,7 +678,7 @@ class Plot extends Box {
         // automatic ygrid generation
         if (ygrid != null && ygrid !== false) {
             const locs = (ygrid === true && yaxis != null && yaxis !== false) ? yaxis.locs : ygrid
-            const ygrid_elem = new VMesh({ locs: locs as number[], lim: ylim, rect: coord, ...ygrid_attr })
+            const ygrid_elem = new VMesh({ locs: locs as number[], ...ygrid_attr })
             bg_elems.unshift(ygrid_elem)
         } else {
             ygrid = undefined

package/src/elems/symbolic.ts

@@ -39,12 +39,14 @@ interface SymArgsBase {
 }
 
 interface SymArgs extends SymArgsBase {
+    f?: ((t: number) => Point)
     fx?: ((t: number) => number)
     fy?: ((t: number) => number)
 }
 
 // determines actual values given combinations of limits, values, and functions
-function sympath({ fx, fy, xlim, ylim, tlim, xvals, yvals, tvals, N }: SymArgs = {}): [number[], number[], number[]] {
+function sympath({ f, fx, fy, xlim, ylim, tlim, xvals, yvals, tvals, N }: SymArgs = {}): [number[], number[], number[]] {
+    f = ensure_function(f)
     fx = ensure_function(fx)
     fy = ensure_function(fy)
 
@@ -76,7 +78,11 @@ function sympath({ fx, fy, xlim, ylim, tlim, xvals, yvals, tvals, N }: SymArgs =
     tvals = tvals ?? linspace(...tlim, N)
 
     // compute data values
-    if (fx != null && fy != null) {
+    if (f != null) {
+        const points = tvals.map(f)
+        xvals = points.map(([x, _y]) => x)
+        yvals = points.map(([_x, y]) => y)
+    } else if (fx != null && fy != null) {
         xvals = tvals.map(fx)
         yvals = tvals.map(fy)
     } else if (fy != null && xlim != null) {
@@ -119,26 +125,24 @@ interface SymPointsArgs extends SymArgs, GroupArgs {
 
 class SymPoints extends Group {
     constructor(args: SymPointsArgs = {}) {
-        const { fx, fy, point_size = D.point, point_shape: point_shape0, xlim: xlim0, ylim: ylim0, tlim, xvals, yvals, tvals, N, coord: coord0, ...attr0 } = THEME(args, 'SymPoints')
+        const { f, fx, fy, point_size = D.point, point_shape: point_shape0, xlim: xlim0, ylim: ylim0, tlim, xvals, yvals, tvals, N, coord: coord0, ...attr0 } = THEME(args, 'SymPoints')
         const [ spec, attr ] = spec_split(attr0)
         const fsize = ensure_function(point_size)
         const fshap = ensure_shapefunc(point_shape0 ?? new Dot(attr))
-        const { xlim, ylim } = resolve_limits(xlim0, ylim0, coord0 as Rect)
+        const { h: xlim, v: ylim } = resolve_limits(xlim0, ylim0, coord0 as Rect)
 
         // compute point values
         const [ tvals1, xvals1, yvals1 ] = sympath({
-            fx, fy, xlim, ylim, tlim, xvals, yvals, tvals, N
+            f, fx, fy, xlim, ylim, tlim, xvals, yvals, tvals, N
         })
 
         // make points
         const points = zip(tvals1, xvals1, yvals1).filter(not_null)
 
         // make children
-        const children = enumerate(points).map(([i, [t, x, y]]) => {
-            const sh = fshap(x, y, t, i)
-            const has_size = sh.args.size != null || sh.args.xsize != null || sh.args.ysize != null
-            return sh.clone({ pos: [x, y], ...(has_size ? {} : { size: fsize(x, y, t, i) }) })
-        })
+        const children = enumerate(points).map(([i, [t, x, y]]) =>
+            fshap(x, y, t, i).clone({ pos: [x, y], size: fsize(x, y, t, i) })
+        )
 
         // compute coords
         const coord = coord0 ?? detect_coords(xvals1, yvals1, xlim, ylim)
@@ -158,12 +162,12 @@ interface SymLineArgs extends SymArgs, LineArgs {
 
 class SymLine extends Line {
     constructor(args: SymLineArgs = {}) {
-        const { fx, fy, xlim: xlim0, ylim: ylim0, tlim, xvals, yvals, tvals, N, coord: coord0, ...attr } = THEME(args, 'SymLine')
-        const { xlim, ylim } = resolve_limits(xlim0, ylim0, coord0 as Rect)
+        const { f, fx, fy, xlim: xlim0, ylim: ylim0, tlim, xvals, yvals, tvals, N, coord: coord0, ...attr } = THEME(args, 'SymLine')
+        const { h: xlim, v: ylim } = resolve_limits(xlim0, ylim0, coord0 as Rect)
 
         // compute path values
         const [ _tvals1, xvals1, yvals1 ] = sympath({
-            fx, fy, xlim, ylim, tlim, xvals, yvals, tvals, N
+            f, fx, fy, xlim, ylim, tlim, xvals, yvals, tvals, N
         })
 
         // get valid point pairs
@@ -187,12 +191,12 @@ interface SymSplineArgs extends SymArgs, SplineArgs {
 
 class SymSpline extends Spline {
     constructor(args: SymSplineArgs = {}) {
-        const { fx, fy, xlim: xlim0, ylim: ylim0, tlim, xvals, yvals, tvals, N, coord: coord0, curve, ...attr } = THEME(args, 'SymSpline')
-        const { xlim, ylim } = resolve_limits(xlim0, ylim0, coord0 as Rect)
+        const { f, fx, fy, xlim: xlim0, ylim: ylim0, tlim, xvals, yvals, tvals, N, coord: coord0, curve, ...attr } = THEME(args, 'SymSpline')
+        const { h: xlim, v: ylim } = resolve_limits(xlim0, ylim0, coord0 as Rect)
 
         // compute path values
         const [ _tvals1, xvals1, yvals1 ] = sympath({
-            fx, fy, xlim, ylim, tlim, xvals, yvals, tvals, N
+            f, fx, fy, xlim, ylim, tlim, xvals, yvals, tvals, N
         })
 
         // get valid point pairs
@@ -216,12 +220,12 @@ interface SymShapeArgs extends SymArgs, ElementArgs {
 
 class SymShape extends Shape {
     constructor(args: SymShapeArgs = {}) {
-        const { fx, fy, xlim: xlim0, ylim: ylim0, tlim, xvals, yvals, tvals, N, coord: coord0, ...attr } = THEME(args, 'SymShape')
-        const { xlim, ylim } = resolve_limits(xlim0, ylim0, coord0 as Rect)
+        const { f, fx, fy, xlim: xlim0, ylim: ylim0, tlim, xvals, yvals, tvals, N, coord: coord0, ...attr } = THEME(args, 'SymShape')
+        const { h: xlim, v: ylim } = resolve_limits(xlim0, ylim0, coord0 as Rect)
 
         // compute point values
         const [ _tvals1, xvals1, yvals1 ] = sympath({
-            fx, fy, xlim, ylim, tlim, xvals, yvals, tvals, N
+            f, fx, fy, xlim, ylim, tlim, xvals, yvals, tvals, N
         })
 
         // get valid point pairs
@@ -241,23 +245,25 @@ class SymShape extends Shape {
 //
 
 interface SymFillArgs extends SymArgsBase, GroupArgs {
+    f1?: ((t: number) => Point)
     fx1?: ((t: number) => number)
     fy1?: ((t: number) => number)
+    f2?: ((t: number) => Point)
     fx2?: ((t: number) => number)
     fy2?: ((t: number) => number)
 }
 
 class SymFill extends Fill {
     constructor(args: SymFillArgs = {}) {
-        const { fx1, fy1, fx2, fy2, xlim: xlim0, ylim: ylim0, tlim, xvals, yvals, tvals, N, stroke = none, fill = gray, coord: coord0, ...attr } = THEME(args, 'SymFill')
-        const { xlim, ylim } = resolve_limits(xlim0, ylim0, coord0 as Rect)
+        const { f1, fx1, fy1, f2, fx2, fy2, xlim: xlim0, ylim: ylim0, tlim, xvals, yvals, tvals, N, stroke = none, fill = gray, coord: coord0, ...attr } = THEME(args, 'SymFill')
+        const { h: xlim, v: ylim } = resolve_limits(xlim0, ylim0, coord0 as Rect)
 
         // compute point values
         const [ _tvals1, xvals1, yvals1 ] = sympath({
-            fx: fx1, fy: fy1, xlim, ylim, tlim, xvals, yvals, tvals, N
+            f: f1, fx: fx1, fy: fy1, xlim, ylim, tlim, xvals, yvals, tvals, N
         })
         const [ _tvals2, xvals2, yvals2 ] = sympath({
-            fx: fx2, fy: fy2, xlim, ylim, tlim, xvals, yvals, tvals, N
+            f: f2, fx: fx2, fy: fy2, xlim, ylim, tlim, xvals, yvals, tvals, N
         })
 
         // get valid point pairs
@@ -316,7 +322,7 @@ interface SymFieldArgs extends SymArgs, GroupArgs {
 class SymField extends SymPoints {
     constructor(args: SymFieldArgs = {}) {
         const { func, xlim: xlim0, ylim: ylim0, N = 10, point_size: point_size0, shape: shape0, coord: coord0, ...attr } = THEME(args, 'SymField')
-        const { xlim, ylim } = resolve_limits(xlim0, ylim0, coord0 as Rect)
+        const { h: xlim, v: ylim } = resolve_limits(xlim0, ylim0, coord0 as Rect)
         const shape = ensure_shapefunc(shape0 ?? default_arrow)
         const point_size = point_size0 ?? 0.25 / N
 

package/src/eval.ts

@@ -3,13 +3,13 @@
 import type { ParseConfig } from 'papaparse'
 
 import { setTheme, type ThemeName } from './lib/theme'
-import { is_string } from './lib/utils'
+import { is_string, ensure_pair } from './lib/utils'
 import { parseTable } from './lib/table'
 import { is_element, Svg } from './elems/core'
 import type { SvgArgs } from './elems/core'
 import { runJSX } from './lib/parse'
 import { PngImage, type PngImageArgs } from './elems/image'
-import type { LoadFile } from './lib/types'
+import type { LoadFile, Size } from './lib/types'
 
 //
 // types
@@ -147,9 +147,19 @@ function evaluateGum(code: string, { theme, context = {}, debug = false, loadFil
   return result
 }
 
+function fitSize([ w0, h0 ]: Size, rasterSize?: Size | number): Size {
+  if (rasterSize == null) return [ w0, h0 ]
+  const [ maxW, maxH ] = ensure_pair(rasterSize)
+  const scale = Math.min(maxW / w0, maxH / h0)
+  return [
+    Math.max(1, Math.round(w0 * scale)),
+    Math.max(1, Math.round(h0 * scale)),
+  ]
+}
+
 //
 // export
 //
 
-export { ErrorNoCode, ErrorNoReturn, ErrorNoElement, ErrorGenerate, ErrorRender, runJSX, evaluateGum, parseTable }
+export { ErrorNoCode, ErrorNoReturn, ErrorNoElement, ErrorGenerate, ErrorRender, runJSX, evaluateGum, parseTable, fitSize }
 export type { EvaluateArgs, TableRow, LoadTable, GumContext }

package/src/gum.ts

@@ -5,13 +5,13 @@ import './types/linebreak.d.ts'
 import './types/katex.d.ts'
 
 import { setTheme } from './lib/theme'
-import { sans, mono, moji, cmoji, light, regular, bold, none, black, white, gray, blue, red, green, yellow, purple, lightgray, darkgray, e, pi, phi, r2d, d2r } from './lib/const'
-import { is_scalar, is_string, is_boolean, is_object, is_function, is_array, zip, reshape, split, concat, slice, sum, prod, mean, cumsum, norm, range, linspace, enumerate, repeat, meshgrid, lingrid, exp, log, log10, sin, cos, tan, abs, pow, sqrt, sign, floor, ceil, round, atan, atan2, minimum, maximum, min, max, clamp, rescale, sigmoid, logit, smoothstep, setSeed, random, uniform, normal, integer, interp, palette, polar, rounder, add2, sub2, mul2, div2, normalize } from './lib/utils'
+import { sans, mono, moji, cmoji, light, regular, bold, none, black, white, gray, blue, red, green, yellow, purple, lightgray, darkgray, slate, e, pi, phi, r2d, d2r } from './lib/const'
+import { is_scalar, is_string, is_boolean, is_object, is_function, is_array, zip, reshape, split, concat, slice, sum, prod, mean, cumsum, norm, range, linspace, enumerate, repeat, meshgrid, lingrid, exp, log, log10, sin, cos, tan, abs, pow, sqrt, sign, floor, ceil, round, atan, atan2, minimum, maximum, min, max, clamp, rescale, normalize, sigmoid, logit, smoothstep, setSeed, random, uniform, normal, integer, interp, palette, polar, polard, rounder, add2, sub2, mul2, div2, addn, subn, muln, divn, addc, subc, mulc, divc, conjc, normc, argc } from './lib/utils'
 import { registerFont } from './fonts/fonts'
 
 import { Context, Element, Group, Svg, Rectangle, Spacer, is_element, type ElementArgs } from './elems/core'
 import { Box, Frame, Stack, VStack, HStack, HWrap, Grid, Points, Anchor, Attach, Absolute } from './elems/layout'
-import { Line, UnitLine, VLine, HLine, Square, Ellipse, Arc, Circle, Dot, Ray, Shape, Triangle, Fill, VFill, HFill, Path, Command, MoveCmd, LineCmd, ArcCmd, CornerCmd, RoundedCornerCmd, CubicSplineCmd, Spline, RoundedRect, RoundedLine, ArrowHead, Arrow } from './elems/geometry'
+import { Line, UnitLine, VLine, HLine, CoordLine, Segments, Square, Ellipse, Arc, Circle, Dot, Ray, Shape, Triangle, Fill, VFill, HFill, Path, Command, MoveCmd, LineCmd, ArcCmd, CornerCmd, RoundedCornerCmd, CubicSplineCmd, Spline, RoundedRect, RoundedLine, ArrowHead, Arrow } from './elems/geometry'
 import { spline1d, spline2d } from './lib/interp'
 import { Span, TextLine, Text, TextBox, TextFrame, TextStack, Bold, Italic } from './elems/text'
 import { Node, Edge, Network } from './elems/network'
@@ -27,11 +27,11 @@ const Rect = Rectangle
 type ElementConstructor = new (args: ElementArgs) => Element
 
 const CONST = {
-    e, pi, phi, r2d, d2r, none, white, black, blue, red, green, yellow, purple, gray, lightgray, darkgray, sans, mono, moji, cmoji, light, regular, bold,
+    e, pi, phi, r2d, d2r, none, white, black, blue, red, green, yellow, purple, gray, lightgray, darkgray, slate, sans, mono, moji, cmoji, light, regular, bold,
 }
 
 const UTILS = {
-    range, linspace, enumerate, repeat, meshgrid, lingrid, zip, reshape, split, concat, slice, sum, prod, mean, cumsum, min, max, minimum, maximum, norm, clamp, rescale, normalize, exp, log, log10, sin, cos, tan, abs, pow, sqrt, sign, floor, ceil, round, atan, atan2, sigmoid, logit, smoothstep, polar, rounder, interp, palette, add2, sub2, mul2, div2, spline1d, spline2d,
+    range, linspace, enumerate, repeat, meshgrid, lingrid, zip, reshape, split, concat, slice, sum, prod, mean, cumsum, min, max, minimum, maximum, norm, clamp, rescale, normalize, exp, log, log10, sin, cos, tan, abs, pow, sqrt, sign, floor, ceil, round, atan, atan2, sigmoid, logit, smoothstep, polar, polard, rounder, interp, palette, add2, sub2, mul2, div2, addn, subn, muln, divn, addc, subc, mulc, divc, conjc, normc, argc, spline1d, spline2d,
 }
 
 const RAND = {
@@ -39,7 +39,7 @@ const RAND = {
 }
 
 const ELEMS: Record<string, ElementConstructor> = {
-    Element, Group, Svg, Box, Frame, Stack, VStack, HStack, HWrap, Grid, Points, Anchor, Attach, Absolute, Spacer, Ray, Line, UnitLine, HLine, VLine, Rectangle, Rect, RoundedRect, RoundedLine, Square, Ellipse, Arc, Circle, Dot, Shape, Path, Spline, Triangle, Fill, VFill, HFill, Arrow, Field, Span, TextLine, Text, TextBox, TextFrame, TextStack, Bold, Italic, LabelBox, TitleBox, TitleFrame, ArrowHead, Node, Edge, Network, SymPoints, SymLine, SymSpline, SymShape, SymFill, SymField, Bar, VBar, HBar, Bars, VBars, HBars, Scale, VScale, HScale, Label, HLabel, VLabel, Labels, HLabels, VLabels, Axis, HAxis, VAxis, OuterLabel, Mesh, HMesh, VMesh, Mesh2D, Graph, Plot, BarPlot, Legend, Slide, Latex, Tex, MathSpan, MathSymbol, MathSpacer, MathRow, MathCol, MathBox, MathRule, MathText, SupSub, Frac, Sqrt, Accent, Bracket, PngImage, SvgImage
+    Element, Group, Svg, Box, Frame, Stack, VStack, HStack, HWrap, Grid, Points, Anchor, Attach, Absolute, Spacer, Ray, Line, UnitLine, HLine, VLine, CoordLine, Segments, Rectangle, Rect, RoundedRect, RoundedLine, Square, Ellipse, Arc, Circle, Dot, Shape, Path, Spline, Triangle, Fill, VFill, HFill, Arrow, Field, Span, TextLine, Text, TextBox, TextFrame, TextStack, Bold, Italic, LabelBox, TitleBox, TitleFrame, ArrowHead, Node, Edge, Network, SymPoints, SymLine, SymSpline, SymShape, SymFill, SymField, Bar, VBar, HBar, Bars, VBars, HBars, Scale, VScale, HScale, Label, HLabel, VLabel, Labels, HLabels, VLabels, Axis, HAxis, VAxis, OuterLabel, Mesh, HMesh, VMesh, Mesh2D, Graph, Plot, BarPlot, Legend, Slide, Latex, Tex, MathSpan, MathSymbol, MathSpacer, MathRow, MathCol, MathBox, MathRule, MathText, SupSub, Frac, Sqrt, Accent, Bracket, PngImage, SvgImage
 }
 
 const CONTEXT = { ...CONST, ...UTILS, ...RAND, ...ELEMS }
@@ -48,10 +48,10 @@ export {
     ELEMS, CONTEXT, Context,
     setTheme, registerFont, calcPngAspect, parseTable,
     is_string, is_boolean, is_array, is_object, is_function, is_element, is_scalar,
-    e, pi, phi, r2d, d2r, none, white, black, blue, red, green, yellow, purple, gray, lightgray, darkgray, sans, mono, moji, cmoji, light, regular, bold,
-    range, linspace, enumerate, repeat, meshgrid, lingrid, zip, reshape, split, concat, slice, sum, prod, mean, cumsum, min, max, minimum, maximum, norm, clamp, rescale, normalize, exp, log, log10, sin, cos, tan, abs, pow, sqrt, sign, floor, ceil, round, atan, atan2, sigmoid, logit, smoothstep, polar, rounder, interp, palette, add2, sub2, mul2, div2, spline1d, spline2d,
+    e, pi, phi, r2d, d2r, none, white, black, blue, red, green, yellow, purple, gray, lightgray, darkgray, slate, sans, mono, moji, cmoji, light, regular, bold,
+    range, linspace, enumerate, repeat, meshgrid, lingrid, zip, reshape, split, concat, slice, sum, prod, mean, cumsum, min, max, minimum, maximum, norm, clamp, rescale, normalize, exp, log, log10, sin, cos, tan, abs, pow, sqrt, sign, floor, ceil, round, atan, atan2, sigmoid, logit, smoothstep, polar, polard, rounder, interp, palette, add2, sub2, mul2, div2, addn, subn, muln, divn, addc, subc, mulc, divc, conjc, normc, argc, spline1d, spline2d,
     setSeed, random, uniform, normal, integer,
-    Element, Group, Svg, Box, Frame, Stack, HWrap, VStack, HStack, Grid, Points, Anchor, Attach, Absolute, Spacer, Ray, Line, UnitLine, HLine, VLine, Rectangle, Rect, RoundedRect, RoundedLine, Square, Ellipse, Arc, Circle, Dot, Shape, Path, Spline, Triangle, Fill, Arrow, Field, Span, TextLine, Text, TextBox, TextFrame, TextStack, Bold, Italic, LabelBox, TitleBox, TitleFrame, ArrowHead, Node, Edge, Network, SymPoints, SymLine, SymSpline, SymShape, SymFill, SymField, Bar, VBar, HBar, Bars, VBars, HBars, Scale, VScale, HScale, Label, HLabel, VLabel, Labels, HLabels, VLabels, Axis, HAxis, VAxis, OuterLabel, Mesh, HMesh, VMesh, Mesh2D, Graph, Plot, BarPlot, Legend, Slide, Latex, MathSpan, MathSymbol, MathSpacer, MathRow, MathCol, MathBox, MathRule, MathText, SupSub, Frac, Sqrt, Accent, Bracket, PngImage, SvgImage,
+    Element, Group, Svg, Box, Frame, Stack, HWrap, VStack, HStack, Grid, Points, Anchor, Attach, Absolute, Spacer, Ray, Line, UnitLine, HLine, VLine, CoordLine, Segments, Rectangle, Rect, RoundedRect, RoundedLine, Square, Ellipse, Arc, Circle, Dot, Shape, Path, Spline, Triangle, Fill, Arrow, Field, Span, TextLine, Text, TextBox, TextFrame, TextStack, Bold, Italic, LabelBox, TitleBox, TitleFrame, ArrowHead, Node, Edge, Network, SymPoints, SymLine, SymSpline, SymShape, SymFill, SymField, Bar, VBar, HBar, Bars, VBars, HBars, Scale, VScale, HScale, Label, HLabel, VLabel, Labels, HLabels, VLabels, Axis, HAxis, VAxis, OuterLabel, Mesh, HMesh, VMesh, Mesh2D, Graph, Plot, BarPlot, Legend, Slide, Latex, MathSpan, MathSymbol, MathSpacer, MathRow, MathCol, MathBox, MathRule, MathText, SupSub, Frac, Sqrt, Accent, Bracket, PngImage, SvgImage,
     Command, MoveCmd, LineCmd, ArcCmd, CornerCmd, RoundedCornerCmd, CubicSplineCmd,
 }
 

package/src/lib/const.ts

@@ -32,6 +32,7 @@ const yellow = '#ffb300'
 const purple = '#9c27b0'
 const lightgray = '#f6f6f6'
 const darkgray = '#888888'
+const slate = '#1e252e'
 
 // math
 const e = Math.E
@@ -55,4 +56,4 @@ const DEFAULTS = {
     calc_size: 16,
 }
 
-export { DEFAULTS, svgns, htmlns, sans, mono, moji, cmoji, light, regular, bold, vtext, none, black, white, gray, blue, red, green, yellow, purple, lightgray, darkgray, e, pi, phi, r2d, d2r }
+export { DEFAULTS, svgns, htmlns, sans, mono, moji, cmoji, light, regular, bold, vtext, none, black, white, gray, blue, red, green, yellow, purple, lightgray, darkgray, slate, e, pi, phi, r2d, d2r }

package/src/lib/interp.ts

@@ -53,12 +53,18 @@ function cubic_spline_data<T extends Point | MPoint>(points: T[], { start_dir, e
     })
 }
 
+function cubic_spline_tangent(pos1: Point | MPoint, pos2: Point | MPoint, dir: Grad | undefined, tan: Point): Point {
+    if (dir == null) return tan
+    const delta = squeeze_mpoint(sub2m(pos2, pos1)).map(abs)
+    const scale = Math.max(...delta)
+    return mul2(dir, scale)
+}
+
 function cubic_spline_points({ pos1, pos2, dir1, dir2, tan1, tan2, curve = 0.5 }: SplineData<Point>): [Point, Point, Point, Point] {
 
     // use dir if provided, otherwise use tan
-    const dist = squeeze_mpoint(sub2m(pos2, pos1)).map(abs) as Point
-    const tan1a = dir1 != null ? mul2(dir1, dist) as Point : tan1
-    const tan2a = dir2 != null ? mul2(dir2, dist) as Point : tan2
+    const tan1a = cubic_spline_tangent(pos1, pos2, dir1, tan1)
+    const tan2a = cubic_spline_tangent(pos1, pos2, dir2, tan2)
     if (tan1a == null || tan2a == null) throw new Error('Spline tangent must be defined')
 
     // compute scaled tangents and Bernstein controls in spline coordinates
@@ -166,5 +172,5 @@ function spline1d(points: Point[], { curve = 0.5 }: { curve?: number } = {}): (t
 // export
 //
 
-export { cubic_spline_data, cubic_spline_points, spline1d, spline2d }
+export { cubic_spline_data, cubic_spline_points, cubic_spline_tangent, spline1d, spline2d }
 export type { SplineData, SplineFuncArgs }

package/src/lib/parse.ts

@@ -291,8 +291,14 @@ const handlers: Record<string, (node: ASTNode) => any> = {
     return body.map(walkTree).join('\n')
   },
   MethodDefinition(node) {
-    const { key, value } = node
-    return `${walkTree(key)}${walkTree(value)}`
+    const { key, value, computed, static: isStatic, kind } = node
+    const prefix = isStatic ? 'static ' : ''
+    const name = computed ? `[${walkTree(key)}]` : walkTree(key)
+    const params = value.params.map(walkTree).join(', ')
+    const body = walkTree(value.body)
+    if (kind == 'get') return `${prefix}get ${name}() ${body}`
+    if (kind == 'set') return `${prefix}set ${name}(${params}) ${body}`
+    return `${prefix}${name}(${params}) ${body}`
   },
   JSXIdentifier(node) {
     return node.name

package/src/lib/types.ts

@@ -7,7 +7,9 @@ type Limit = [number, number]
 type Size = [number, number]
 type Grad = [number, number]
 type Polar = [number | Size, number]
-type Pair = Point | Size | Limit | Grad
+type Complex = [number, number]
+type Pair = Point | Size | Limit | Grad | Complex
+type Vector = number[]
 
 // color
 type RGBA = [number, number, number, number]
@@ -66,11 +68,10 @@ interface CliArgs {
   theme: ThemeName
   background?: string
   size?: Size
-  width?: number
-  height?: number
+  rasterSize?: Size
   dev: boolean
   loadFile: LoadFile
 }
 
 
-export type { Point, Rect, Limit, Size, Grad, Polar, Pair, RGBA, MNumber, MPoint, AlignValue, Align, Zone, Side, Side0, Orient, Angle, Direc, RoundedValue, Padding, Rounded, Attrs, Spec, ThemeName, OutputFormat, LoadFileData, LoadFile, CliArgs }
+export type { Point, Rect, Limit, Size, Grad, Polar, Complex, Pair, Vector, RGBA, MNumber, MPoint, AlignValue, Align, Zone, Side, Side0, Orient, Angle, Direc, RoundedValue, Padding, Rounded, Attrs, Spec, ThemeName, OutputFormat, LoadFileData, LoadFile, CliArgs }