unconed / mathbox

Presentation-quality WebGL math graphing
MIT License
1.33k stars 109 forks source link

add types for suffixed properties, paddingX, etc #50

Closed ChristopherChudzicki closed 1 year ago

ChristopherChudzicki commented 1 year ago

This PR adds types for more of the node properties. I think I have them all now.

Background: traits and properties

Mathbox nodes get their properties from "traits". For example, <grid /> has the following 16 traits:

export class Grid extends Primitive {
  static initClass() {
    this.traits = [
      "node",
      "object",
      "visible",
      "style",
      "line",
      "grid",
      "area",
      "position",
      "origin",
      "shade",
      "axis:x",
      "axis:y",
      "scale:x",
      "scale:y",
      "span:x",
      "span:y",
    ];
  /** rest of class */
}

Each trait defines a bunch of properties. For example, the axis trait defines two properties:

  axis: {
    detail: Types.int(1),
    crossed: Types.bool(false),
  },

Aliasing

When Grid includes "axis:x" and axis:y" as traits, the axis properties get included twice with suffixes X and Y:

// Grid Properties
{
  detailX: number
  crossedX: boolean
  detailY: number
  crossedY: boolean
}

Previous work

When I originally added Typescript definitions for mathbox (https://github.com/unconed/mathbox/commit/0665621b4318780d96dd9a73e45a38931fb06569) I did not understand how the above suffix aliasing worked, so I just skipped those properties. Consequently, <grid> and a bunch of other node types were missing a bunch of properties. This PR adds them in.

sritchie commented 1 year ago

The writeup here is great too. We need to collect these research notes into better docs for the whole project at some pt as well