mathbox-react 0.0.2 → 0.0.5-dev

package/package.json

@@ -1,19 +1,25 @@
 {
   "name": "mathbox-react",
-  "version": "0.0.2",
+  "version": "0.0.5-dev",
   "description": "React wrapper for Mathbox",
   "license": "ISC",
   "author": "Chris Chudzicki",
   "main": "build/cjs/index.js",
   "module": "build/esm/index.js",
+  "types": "build/esm/types",
   "scripts": {
-    "build": "rollup -c",
+    "build": "rm -rf build && rollup -c",
     "build-storybook": "build-storybook",
     "storybook": "start-storybook -p 6006",
-    "lint": "eslint \"src/**/*.{ts,tsx}\" --fix --max-warnings=0"
+    "lint": "eslint \"src/**/*.{ts,tsx}\" --max-warnings=0",
+    "format": "prettier src",
+    "autofix": "npm run format -- --write && npm run lint -- --fix",
+    "prepack": "npm run build",
+    "test": "jest"
   },
   "devDependencies": {
     "@babel/core": "^7.17.5",
+    "@babel/preset-env": "^7.16.11",
     "@rollup/plugin-commonjs": "^21.0.1",
     "@rollup/plugin-node-resolve": "^13.1.3",
     "@rollup/plugin-typescript": "^8.3.0",
@@ -23,8 +29,11 @@
     "@storybook/addon-links": "^6.4.19",
     "@storybook/react": "^6.4.19",
     "@storybook/testing-library": "^0.0.9",
+    "@testing-library/react": "^12.1.3",
+    "@types/jest": "^27.4.1",
     "@types/react": "^17.0.39",
     "@types/three": "^0.137.0",
+    "babel-jest": "^27.5.1",
     "babel-loader": "^8.2.3",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^16.1.0",
@@ -32,7 +41,8 @@
     "eslint-config-react-app": "^7.0.0",
     "eslint-import-resolver-typescript": "^2.5.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "mathbox": "^2.1.0",
+    "jest": "^27.5.1",
+    "mathbox": "2.1.2-dev",
     "prettier": "^2.5.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -41,11 +51,12 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-terser": "^7.0.2",
     "three": "^0.137.5",
+    "ts-jest": "^27.1.3",
     "typescript": "^4.5.5"
   },
   "peerDependencies": {
-    "mathbox": "^2.1.0",
+    "mathbox": "2.1.2-dev",
     "react": "^17.0.2",
-    "three": "^0.137.5"
+    "three": ">=0.118.0"
   }
 }

package/scratch.js

@@ -0,0 +1,149 @@
+const classDescriptions = {
+  axis: ["draw", "Draw an axis", {}, { end: "true", zBias: "-1" }],
+  face: ["draw", "Draw polygon faces"],
+  grid: ["draw", "Draw a 2D line grid", {}, { width: "1", zBias: "-2" }],
+  line: ["draw", "Draw lines"],
+  point: ["draw", "Draw points"],
+  strip: ["draw", "Draw triangle strips"],
+  surface: ["draw", "Draw surfaces", {}, { lineX: "false", lineY: "false" }],
+  ticks: ["draw", "Draw ticks"],
+  vector: ["draw", "Draw vectors"],
+
+  view: ["view", "Adjust view range"],
+  cartesian: ["view", "Apply cartesian view"],
+  cartesian4: ["view", "Apply 4D cartesian view"],
+  polar: ["view", "Apply polar view"],
+  spherical: ["view", "Apply spherical view"],
+  stereographic: ["view", "Apply stereographic projection"],
+  stereographic4: ["view", "Apply 4D stereographic projection"],
+
+  transform: ["transform", "Transform geometry in 3D"],
+  transform4: ["transform", "Transform geometry in 4D"],
+  vertex: ["transform", "Apply custom vertex shader pass"],
+  fragment: ["transform", "Apply custom fragment shader pass"],
+  layer: ["transform", "Independent 2D layer/overlay"],
+  mask: ["transform", "Apply custom mask pass"],
+
+  array: [
+    "data",
+    "1D array",
+    { expr: "function (emit, i, time, delta) { ... }" },
+  ],
+  interval: [
+    "data",
+    "1D sampled array",
+    { expr: "function (emit, x, i, time, delta) { ... }" },
+  ],
+  matrix: [
+    "data",
+    "2D matrix",
+    { expr: "function (emit, i, j, time, delta) { ... }" },
+  ],
+  area: [
+    "data",
+    "2D sampled matrix",
+    { expr: "function (emit, x, y, i, j, time, delta) { ... }" },
+  ],
+  voxel: [
+    "data",
+    "3D voxels",
+    { expr: "function (emit, i, j, k, time, delta) { ... }" },
+  ],
+  volume: [
+    "data",
+    "3D sampled voxels",
+    { expr: "function (emit, x, y, z, i, j, k, time, delta) { ... }" },
+  ],
+  scale: ["data", "Human-friendly divisions on an axis, subdivided as needed"],
+
+  html: ["overlay", "HTML element source"],
+  dom: ["overlay", "HTML DOM injector"],
+
+  text: [
+    "text",
+    "GL text source",
+    {},
+    { minFilter: '"linear"', magFilter: '"linear"' },
+  ],
+  format: [
+    "text",
+    "Text formatter",
+    { expr: "function (x, y, z, w, i, j, k, l, time, delta) { ... }" },
+    { minFilter: '"linear"', magFilter: '"linear"' },
+  ],
+  retext: ["text", "Text atlas resampler"],
+  label: ["text", "Draw GL labels"],
+
+  clamp: ["operator", "Clamp out-of-bounds samples to the nearest data point"],
+  grow: ["operator", "Scale data relative to reference data point"],
+  join: [
+    "operator",
+    "Join two array dimensions into one by concatenating rows/columns/stacks",
+  ],
+  lerp: ["operator", "Linear interpolation of data"],
+  memo: ["operator", "Memoize data to an array/texture"],
+  readback: [
+    "operator",
+    "Read data back to a binary JavaScript array",
+    { expr: "function (x, y, z, w, i, j, k, l) { ... }" },
+  ],
+  resample: ["operator", "Resample data to new dimensions with a shader"],
+  repeat: ["operator", "Repeat data in one or more dimensions"],
+  swizzle: ["operator", "Swizzle data values"],
+  spread: ["operator", "Spread data values according to array indices"],
+  split: [
+    "operator",
+    "Split one array dimension into two by splitting rows/columns/etc",
+  ],
+  slice: ["operator", "Select one or more rows/columns/stacks"],
+  subdivide: ["operator", "Subdivide data points evenly or with a bevel"],
+  transpose: ["operator", "Transpose array dimensions"],
+
+  group: ["base", "Group elements for visibility and activity"],
+  inherit: ["base", "Inherit and inject a trait from another element"],
+  root: ["base", "Tree root"],
+  unit: ["base", "Change unit sizing for drawing ops"],
+
+  shader: ["shader", "Custom shader snippet"],
+
+  camera: ["camera", "Camera instance or proxy"],
+
+  rtt: [
+    "rtt",
+    "Render objects to a texture",
+    {},
+    { minFilter: '"linear"', magFilter: '"linear"', type: '"unsignedByte"' },
+  ],
+  compose: [
+    "rtt",
+    "Full-screen render pass",
+    {},
+    { zWrite: "false", zTest: "false", color: '"white"' },
+  ],
+
+  clock: ["time", "Relative clock that starts from zero."],
+  now: ["time", "Absolute UNIX time in seconds since 01/01/1970"],
+
+  move: ["present", "Move elements in/out on transition"],
+  play: ["present", "Play a sequenced animation"],
+  present: ["present", "Present a tree of slides"],
+  reveal: ["present", "Reveal/hide elements on transition"],
+  slide: ["present", "Presentation slide"],
+  step: ["present", "Step through a sequenced animation"],
+}
+
+const capitalize = (s) => `${s[0].toUpperCase()}${s.slice(1)}`
+
+const makeDef = (name) => {
+  const [group] = classDescriptions[name]
+  const Name = capitalize(name)
+  const dest = `https://gitgud.io/unconed/mathbox/-/blob/master/docs/primitives.md#${group}${name}`
+  const def = `
+/**
+ * Component wrapper for mathbox [\`${name}\`](${dest}).
+ */
+export const ${Name} = mathboxComponentFactory('${name}');`
+  console.log(def)
+}
+
+Object.keys(classDescriptions).sort().forEach(makeDef)

package/src/components/Cartesian.spec.tsx

@@ -0,0 +1,101 @@
+import React from "react"
+import { render } from "@testing-library/react"
+import Mathbox from "./Mathbox"
+import { Cartesian, Grid } from "./components"
+import { MathboxRef } from "./types"
+
+function assertNotUndefined<T>(value: T | undefined): asserts value is T {
+  if (value === undefined) {
+    throw new Error("Unexpected undefined value")
+  }
+}
+
+describe("Cartesian", () => {
+  it("exposes Mathbox instance via ref", () => {
+    const mbRef: MathboxRef<"root"> = { current: null }
+    const cartesianRef: MathboxRef<"cartesian"> = { current: null }
+    render(
+      <Mathbox ref={mbRef}>
+        <Cartesian ref={cartesianRef} />
+      </Mathbox>
+    )
+
+    expect(mbRef.current?.[0].type).toBe("root")
+    expect(cartesianRef.current?.[0].type).toBe("cartesian")
+  })
+
+  it("creates a cartesian instance as child of root", () => {
+    const mbRef: MathboxRef<"root"> = { current: null }
+    render(
+      <Mathbox ref={mbRef}>
+        <Cartesian />
+      </Mathbox>
+    )
+    expect(mbRef.current?.select("cartesian").length).toBe(1)
+  })
+
+  it("creates mathbox children as children of itself", () => {
+    const mbRef: MathboxRef<"root"> = { current: null }
+    render(
+      <Mathbox ref={mbRef}>
+        <Cartesian>
+          <Grid />
+          <Grid />
+        </Cartesian>
+      </Mathbox>
+    )
+    mbRef.current?.print()
+    expect(mbRef.current?.select("cartesian").length).toBe(1)
+    expect(mbRef.current?.select("cartesian grid").length).toBe(2)
+  })
+
+  it("removes its mathbox instance when unmounted", () => {
+    const mbRef: MathboxRef<"root"> = { current: null }
+    const { rerender } = render(
+      <Mathbox ref={mbRef}>
+        <Cartesian />
+      </Mathbox>
+    )
+    expect(mbRef.current?.select("cartesian").length).toBe(1)
+    rerender(<Mathbox ref={mbRef} />)
+    expect(mbRef.current?.select("cartesian").length).toBe(0)
+  })
+
+  it.each([
+    { props: { visible: true, scale: [3, 2, 1] } },
+    { props: { visible: false, scale: [1, 2, 3] } },
+  ])("passes appropriate props to its mathbox instance", ({ props }) => {
+    const mbRef: MathboxRef<"root"> = { current: null }
+    render(
+      <Mathbox ref={mbRef}>
+        <Cartesian {...props} />
+      </Mathbox>
+    )
+    const cartesian = mbRef.current?.select<"cartesian">("cartesian")
+
+    assertNotUndefined(cartesian)
+
+    expect(cartesian.get("visible")).toBe(props.visible)
+    // Mathbox converts scale to a ThreeJS Vec3
+    expect(cartesian.get("scale").toArray()).toStrictEqual(props.scale)
+  })
+
+  it("updates props on its mathbox instance when rerendered", () => {
+    const mbRef: MathboxRef<"root"> = { current: null }
+    const { rerender } = render(
+      <Mathbox ref={mbRef}>
+        <Cartesian />
+      </Mathbox>
+    )
+    const cartesian = mbRef.current?.select<"cartesian">("cartesian")
+    assertNotUndefined(cartesian)
+
+    expect(cartesian.get("visible")).toBe(true)
+    rerender(
+      <Mathbox ref={mbRef}>
+        <Cartesian visible={false} />
+      </Mathbox>
+    )
+    expect(cartesian.get("visible")).toBe(false)
+  })
+})

package/src/components/Mathbox.tsx

@@ -1,41 +1,58 @@
-import { useEffect } from 'react'
-import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
-import { Color } from "three/src/math/Color";
-import * as MB from 'mathbox'
+import React, {
+  useEffect,
+  useState,
+  forwardRef,
+  useImperativeHandle,
+  useMemo,
+} from "react"
+import { Color } from "three"
+import { mathBox, MathboxSelection, MathBoxOptions } from "mathbox"
+import MathboxAPIContext from "./MathboxNodeContext"
 
 type Props = {
-  element: HTMLElement
-}
+  options?: MathBoxOptions
+  initialCameraPosition?: number[]
+} & React.HTMLProps<HTMLDivElement>
 
-const Mathbox = (props: Props) => {
+const Mathbox = (
+  props: Props,
+  ref: React.Ref<MathboxSelection<"root"> | null>
+) => {
+  const { children, initialCameraPosition, options, ...divProps } = props
+  const mathboxOptions = useMemo(() => options ?? {}, [options])
+  const [selection, setSelection] = useState<MathboxSelection<"root"> | null>(
+    null
+  )
+  const [container, setContainer] = useState<HTMLDivElement | null>(null)
   useEffect(() => {
-    const mathbox = MB.mathBox({
-      plugins: ["core", "controls", "cursor"],
-      controls: {
-        klass: OrbitControls,
-      },
-      element: props.element,
-    });
-
-    mathbox.three.camera.position.set(1, 1, 2);
-    mathbox.three.renderer.setClearColor(new Color(0xffffff), 1.0);
+    if (!container) return () => {}
 
-    const view = mathbox.cartesian({
-      range: [
-        [-2, 2],
-        [-1, 1],
-        [-1, 1],
-      ],
-      scale: [2, 1, 1],
-    });
-    view.grid({
-      divideX: 20,
-      width: 5,
-      opacity: 0.3,
-    });
+    const mathbox = mathBox({
+      ...mathboxOptions,
+      element: container,
+    })
+    setSelection(mathbox)
 
-  }, [props.element])
-  return null
+    /**
+     * TODO: Should Mathbox component allow setting these more easily?
+     */
+    mathbox.three.renderer.setClearColor(new Color(0xffffff), 1.0)
+    if (initialCameraPosition) {
+      mathbox.three.camera.position.set(...initialCameraPosition)
+    }
+    return () => {
+      mathbox.select("*").remove()
+      mathbox.three.destroy()
+    }
+  }, [container, mathboxOptions, initialCameraPosition])
+  useImperativeHandle(ref, () => selection)
+  return (
+    <div ref={setContainer} {...divProps}>
+      <MathboxAPIContext.Provider value={selection}>
+        {children}
+      </MathboxAPIContext.Provider>
+    </div>
+  )
 }
 
-export default Mathbox
+export default forwardRef(Mathbox)

package/src/components/MathboxNodeContext.ts

@@ -0,0 +1,6 @@
+import { createContext } from "react"
+import { MathboxSelection, NodeType } from "mathbox"
+
+const MathboxAPIContext = createContext<MathboxSelection<NodeType> | null>(null)
+
+export default MathboxAPIContext