diff --git a/packages/examples/package.json b/packages/examples/package.json
index d78b535a..c4009b2a 100644
--- a/packages/examples/package.json
+++ b/packages/examples/package.json
@@ -2,7 +2,7 @@
"name": "examples",
"private": true,
"dependencies": {
- "mathbox": "^2.3.0",
+ "mathbox": "^2.3.1",
"mathbox-react": "workspace:*",
"mathjs": "10.5.2",
"memoize-one": "6.0.0",
@@ -23,7 +23,6 @@
},
"scripts": {
"dev": "vite",
- "build": "tsc && vite build",
"preview": "vite preview",
"lint": "eslint \"**/*.ts?(x)\""
}
diff --git a/packages/examples/tsconfig.json b/packages/examples/tsconfig.json
index 3d0a51a8..a81e2441 100644
--- a/packages/examples/tsconfig.json
+++ b/packages/examples/tsconfig.json
@@ -10,7 +10,7 @@
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "ESNext",
- "moduleResolution": "Node",
+ "moduleResolution": "Node16",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
diff --git a/packages/mathbox-react/package.json b/packages/mathbox-react/package.json
index 767d2859..94f41b79 100644
--- a/packages/mathbox-react/package.json
+++ b/packages/mathbox-react/package.json
@@ -10,7 +10,16 @@
},
"author": "Chris Chudzicki",
"main": "build/cjs/index.js",
- "module": "build/esm/index.js",
+ "exports": {
+ ".": {
+ "import": "./build/esm/index.js",
+ "require": "./build/cjs/index.js"
+ },
+ "./threestrap": {
+ "import": "./build/esm/threestrap/index.js",
+ "require": "./build/cjs/threestrap/index.js"
+ }
+ },
"files": [
"build"
],
@@ -54,7 +63,7 @@
"typescript": "^4.9.4"
},
"peerDependencies": {
- "mathbox": "^2.3.0",
+ "mathbox": "^2.3.1",
"react": "^17.0.2 || ^18.0.0",
"three": ">=0.118.0"
},
diff --git a/packages/mathbox-react/src/components/Mathbox.tsx b/packages/mathbox-react/src/components/Mathbox.tsx
index 2d4cd484..e18aff69 100644
--- a/packages/mathbox-react/src/components/Mathbox.tsx
+++ b/packages/mathbox-react/src/components/Mathbox.tsx
@@ -9,6 +9,7 @@ import { mathBox, RootProps, MathboxSelection, MathBoxOptions } from "mathbox"
import MathboxAPIContext from "./MathboxAPIContext"
import { WithChildren } from "./types"
import { useDeepCompareMemo } from "./util"
+import ThreestrapContext from "../threestrap/ThreestrapContext"
type Props = WithChildren<
{
@@ -54,9 +55,13 @@ const Mathbox = (
useImperativeHandle(ref, () => selection, [selection])
return (
-
- {children}
-
+ selection && (
+
+
+ {children}
+
+
+ )
)
}
diff --git a/packages/mathbox-react/src/components/MathboxAPIContext.ts b/packages/mathbox-react/src/components/MathboxAPIContext.ts
index a99cb03a..9726e923 100644
--- a/packages/mathbox-react/src/components/MathboxAPIContext.ts
+++ b/packages/mathbox-react/src/components/MathboxAPIContext.ts
@@ -1,6 +1,21 @@
-import { createContext } from "react"
+import { createContext, useContext } from "react"
import { MathboxSelection, NodeType } from "mathbox"
const MathboxAPIContext = createContext | null>(null)
+/**
+ * Returns Mathbox API Selection object for the nearest enclosing Mathbox node.
+ */
+const useMathbox = () => {
+ const selection = useContext(MathboxAPIContext)
+ if (!selection) {
+ throw new Error(
+ "useMathbox must be used within Mathbox or ContainedMathbox"
+ )
+ }
+ return selection
+}
+
export default MathboxAPIContext
+
+export { useMathbox }
diff --git a/packages/mathbox-react/src/components/index.ts b/packages/mathbox-react/src/components/index.ts
index 213be84e..6767f5a6 100644
--- a/packages/mathbox-react/src/components/index.ts
+++ b/packages/mathbox-react/src/components/index.ts
@@ -1,3 +1,5 @@
export * from "./components"
export { default as Mathbox } from "./Mathbox"
export { default as ContainedMathbox } from "./ContainedMathbox"
+
+export { useMathbox } from "./MathboxAPIContext"
diff --git a/packages/mathbox-react/src/threestrap/Renderer.ts b/packages/mathbox-react/src/threestrap/Renderer.ts
new file mode 100644
index 00000000..1a7d3d87
--- /dev/null
+++ b/packages/mathbox-react/src/threestrap/Renderer.ts
@@ -0,0 +1,19 @@
+import React, { useEffect } from "react"
+import type { ColorRepresentation } from "three"
+import { useThreestrap } from "./ThreestrapContext"
+
+type RendererProps = {
+ clearColor?: ColorRepresentation
+}
+
+const Renderer: React.FC = (props) => {
+ const threestrap = useThreestrap()
+ useEffect(() => {
+ if (props.clearColor) {
+ threestrap.renderer.setClearColor(props.clearColor)
+ }
+ })
+ return null
+}
+
+export default Renderer
diff --git a/packages/mathbox-react/src/threestrap/ThreestrapContext.ts b/packages/mathbox-react/src/threestrap/ThreestrapContext.ts
new file mode 100644
index 00000000..f83e6d89
--- /dev/null
+++ b/packages/mathbox-react/src/threestrap/ThreestrapContext.ts
@@ -0,0 +1,16 @@
+import { createContext, useContext } from "react"
+import type { Threestrap } from "./threestrap"
+
+const ThreestrapContext = createContext(null)
+
+export default ThreestrapContext
+
+const useThreestrap = () => {
+ const threestrap = useContext(ThreestrapContext)
+ if (!threestrap) {
+ throw new Error("Threestrap context is not available")
+ }
+ return threestrap
+}
+
+export { useThreestrap }
diff --git a/packages/mathbox-react/src/threestrap/index.ts b/packages/mathbox-react/src/threestrap/index.ts
new file mode 100644
index 00000000..ffc30f70
--- /dev/null
+++ b/packages/mathbox-react/src/threestrap/index.ts
@@ -0,0 +1,2 @@
+export { default as Renderer } from "./Renderer"
+export type { Threestrap } from "./threestrap"
diff --git a/packages/mathbox-react/src/threestrap/threestrap.ts b/packages/mathbox-react/src/threestrap/threestrap.ts
new file mode 100644
index 00000000..34408e4a
--- /dev/null
+++ b/packages/mathbox-react/src/threestrap/threestrap.ts
@@ -0,0 +1,16 @@
+import type { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
+import type { FirstPersonControls } from "three/examples/jsm/controls/FirstPersonControls"
+import type { WebGLRenderer } from "three"
+
+export interface ThreestrapControls {
+ orbit: OrbitControls
+ firstPerson: FirstPersonControls
+}
+
+type Controls = ThreestrapControls[keyof ThreestrapControls]
+
+// TODO: This should be in threestrap package
+export interface Threestrap {
+ renderer: WebGLRenderer
+ controls: Controls | null
+}
diff --git a/packages/mathbox-react/tsconfig.cjs.json b/packages/mathbox-react/tsconfig.cjs.json
index a2534159..db4072a0 100644
--- a/packages/mathbox-react/tsconfig.cjs.json
+++ b/packages/mathbox-react/tsconfig.cjs.json
@@ -4,4 +4,5 @@
"module": "CommonJS",
"outDir": "./build/cjs",
},
+ "include": ["src/**/*"],
}
\ No newline at end of file
diff --git a/packages/mathbox-react/tsconfig.json b/packages/mathbox-react/tsconfig.json
index 7cdf4ff9..2eccaf6a 100644
--- a/packages/mathbox-react/tsconfig.json
+++ b/packages/mathbox-react/tsconfig.json
@@ -3,4 +3,5 @@
"compilerOptions": {
"outDir": "./build/esm",
},
+ "include": ["src/**/*"],
}
\ No newline at end of file
diff --git a/packages/tsconfig/base.json b/packages/tsconfig/base.json
index cd0abc46..3a6a42c4 100644
--- a/packages/tsconfig/base.json
+++ b/packages/tsconfig/base.json
@@ -4,10 +4,10 @@
"strict": true,
"jsx": "react",
"module": "ESNext",
+ "moduleResolution": "node16",
"declaration": true,
"sourceMap": true,
"skipLibCheck": true,
- "moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true
diff --git a/yarn.lock b/yarn.lock
index f01a1cf6..3b3ab5cb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8400,7 +8400,7 @@ __metadata:
"@types/three": 0.148.0
"@vitejs/plugin-react": ^3.0.0
eslint: ^8.32.0
- mathbox: ^2.3.0
+ mathbox: ^2.3.1
mathbox-react: "workspace:*"
mathjs: 10.5.2
memoize-one: 6.0.0
@@ -11900,13 +11900,13 @@ __metadata:
ts-jest: 27.1.5
typescript: ^4.9.4
peerDependencies:
- mathbox: ^2.3.0
+ mathbox: ^2.3.1
react: ^17.0.2 || ^18.0.0
three: ">=0.118.0"
languageName: unknown
linkType: soft
-"mathbox@npm:2.3.1":
+"mathbox@npm:2.3.1, mathbox@npm:^2.3.1":
version: 2.3.1
resolution: "mathbox@npm:2.3.1"
dependencies:
@@ -11920,20 +11920,6 @@ __metadata:
languageName: node
linkType: hard
-"mathbox@npm:^2.3.0":
- version: 2.3.0
- resolution: "mathbox@npm:2.3.0"
- dependencies:
- css-select: ^4.2.1
- lodash: ^4.17.21
- shadergraph: ^2.1.3
- threestrap: ^0.5.1
- peerDependencies:
- three: ">=0.118.0"
- checksum: a70e3e6f5bd63df5478301bf3f9b14b6ef4a7f04bc6f494b20919cf02634c754578c03e5e99f2acb8c2b5e6ec008ba61a077faba104bfe5b535d35c2f0e3cc66
- languageName: node
- linkType: hard
-
"mathjs@npm:10.5.2":
version: 10.5.2
resolution: "mathjs@npm:10.5.2"