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"