diff --git a/.gitignore b/.gitignore index a547bf3..baba7a6 100644 --- a/.gitignore +++ b/.gitignore @@ -22,3 +22,5 @@ dist-ssr *.njsproj *.sln *.sw? + +*.tsbuildinfo \ No newline at end of file diff --git a/README.md b/README.md index 74872fd..7b48f60 100644 --- a/README.md +++ b/README.md @@ -1,50 +1,3 @@ -# React + TypeScript + Vite +# cubeviz -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. - -Currently, two official plugins are available: - -- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh - -## Expanding the ESLint configuration - -If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: - -- Configure the top-level `parserOptions` property like this: - -```js -export default tseslint.config({ - languageOptions: { - // other options... - parserOptions: { - project: ['./tsconfig.node.json', './tsconfig.app.json'], - tsconfigRootDir: import.meta.dirname, - }, - }, -}) -``` - -- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked` -- Optionally add `...tseslint.configs.stylisticTypeChecked` -- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config: - -```js -// eslint.config.js -import react from 'eslint-plugin-react' - -export default tseslint.config({ - // Set the react version - settings: { react: { version: '18.3' } }, - plugins: { - // Add the react plugin - react, - }, - rules: { - // other rules... - // Enable its recommended rules - ...react.configs.recommended.rules, - ...react.configs['jsx-runtime'].rules, - }, -}) -``` +Cubical type theory visualizer. \ No newline at end of file diff --git a/bun.lockb b/bun.lockb index 5d46ce1..ea578d9 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/package.json b/package.json index 88a626c..919e5d2 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "@react-three/drei": "^9.114.0", "@react-three/fiber": "^8.17.8", "@types/three": "^0.169.0", + "jotai": "^2.10.0", "meshline": "^3.3.1", "react": "^18.3.1", "react-dom": "^18.3.1", diff --git a/src/App.css b/src/App.css deleted file mode 100644 index b9d355d..0000000 --- a/src/App.css +++ /dev/null @@ -1,42 +0,0 @@ -#root { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: filter 300ms; -} -.logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); -} -.logo.react:hover { - filter: drop-shadow(0 0 2em #61dafbaa); -} - -@keyframes logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -@media (prefers-reduced-motion: no-preference) { - a:nth-of-type(2) .logo { - animation: logo-spin infinite 20s linear; - } -} - -.card { - padding: 2em; -} - -.read-the-docs { - color: #888; -} diff --git a/src/App.tsx b/src/App.tsx index 497920e..1ee5347 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,63 +1,15 @@ -import { ReactNode, useCallback, useRef, useState } from "react"; -import { Canvas, extend, useFrame } from "@react-three/fiber"; -import { OrbitControls, OrthographicCamera } from "@react-three/drei"; -import { BoxGeometry, EdgesGeometry, LineBasicMaterial } from "three"; -import { InlineMath, BlockMath } from "react-katex"; -import { createPortal } from "react-dom"; +import { Canvas } from "@react-three/fiber"; +import { OrbitControls } from "@react-three/drei"; -import "./App.css"; import styles from "./styles.module.scss"; import "katex/dist/katex.min.css"; import Point from "./components/Point"; import Path from "./components/Path"; +import { SettingsBox } from "./SettingsContext"; // https://threejs.org/manual/#en/align-html-elements-to-3d -function createBox({ dimensions, ...props }) { - // This reference gives us direct access to the THREE.Mesh object - const ref = useRef(); - // Hold state for hovered and clicked events - const [hovered, hover] = useState(false); - const [clicked, click] = useState(false); - - const box = new BoxGeometry(1, 1, 1); - const edges = new EdgesGeometry(box); - - const label = ( -