From 069a35e959bb9938cebacdaf021c16dc9127a5a1 Mon Sep 17 00:00:00 2001 From: Michael Zhang Date: Tue, 1 Oct 2024 20:00:02 -0500 Subject: [PATCH] update --- .gitignore | 2 ++ README.md | 51 ++-------------------------- bun.lockb | Bin 124764 -> 125148 bytes package.json | 1 + src/App.css | 42 ----------------------- src/App.tsx | 68 ++++++++----------------------------- src/SettingsContext.tsx | 20 +++++++++++ src/components/EditBox.tsx | 20 +++++++---- src/components/Path.tsx | 4 +-- src/styles.module.scss | 27 ++++++++++++--- vite.config.ts | 7 ++-- 11 files changed, 81 insertions(+), 161 deletions(-) delete mode 100644 src/App.css create mode 100644 src/SettingsContext.tsx 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 5d46ce1c1db415d01e084c97faca27f72d9d7412..ea578d9e0842a975bd9572d9fb994f476604ccbe 100755 GIT binary patch delta 20030 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 delta 19590 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 Sy+R0aTfHp%eI9vt?*9Ut-Yzi! 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 = ( -
- helloge {JSON.stringify(clicked)} - -
- ); - - // Return the view, these are regular Threejs elements expressed in JSX - const view = ( - click(!clicked)} - onPointerOver={(event) => hover(true)} - onPointerOut={(event) => hover(false)} - > - {/* */} - {/* */} - - - - ); - - return [view, label]; -} - function App() { - const [labelContainerEl, setLabelContainerEl] = - useState(null); - const labelContainerRef = useCallback((el) => { - if (el) setLabelContainerEl(el); - }, []); - let coords: [number, number, number][] = [ [0, 0, 0], [0, 0, 1], @@ -84,7 +36,8 @@ function App() { ); return ( - <> +
+ @@ -105,7 +58,16 @@ function App() { ))} - + +
); } diff --git a/src/SettingsContext.tsx b/src/SettingsContext.tsx new file mode 100644 index 0000000..630f8db --- /dev/null +++ b/src/SettingsContext.tsx @@ -0,0 +1,20 @@ +import { atom, useAtom } from "jotai"; +import styles from "./styles.module.scss"; + +export const showEmptyAtom = atom(true); + +export function SettingsBox() { + const [showEmpty, setShowEmpty] = useAtom(showEmptyAtom); + + return ( +
+ setShowEmpty((v) => !v)} + /> + +
+ ); +} diff --git a/src/components/EditBox.tsx b/src/components/EditBox.tsx index ea5a7ff..9d35d4d 100644 --- a/src/components/EditBox.tsx +++ b/src/components/EditBox.tsx @@ -1,20 +1,23 @@ -import { useCallback, useState } from "react"; -import { InlineMath } from "react-katex"; +import { type FormEvent, useCallback, useState } from "react"; +import { BlockMath } from "react-katex"; import styles from "./EditBox.module.scss"; +import { showEmptyAtom } from "../SettingsContext"; +import { useAtomValue } from "jotai"; -export interface EditBoxProps {} +// export interface EditBoxProps {} -export default function EditBox({}: EditBoxProps) { +export default function EditBox() { const [value, setValue] = useState(""); const [isEditing, setIsEditing] = useState(false); + const showEmpty = useAtomValue(showEmptyAtom); const handleDblClick = useCallback(() => { if (!isEditing) setIsEditing(true); }, [isEditing]); const done = useCallback( - (evt) => { + (evt: FormEvent) => { evt.preventDefault(); if (isEditing) setIsEditing(false); }, @@ -26,15 +29,18 @@ export default function EditBox({}: EditBoxProps) { {isEditing ? (
autoFocus={true} + onBlur={done} value={value} onChange={(evt) => setValue(evt.target.value)} + placeholder="Type latex code..." />
) : value === "" ? ( - (empty) + {showEmpty ? <>(empty) : ""} ) : ( - + )} ); diff --git a/src/components/Path.tsx b/src/components/Path.tsx index 4af3a4c..1ccbb2a 100644 --- a/src/components/Path.tsx +++ b/src/components/Path.tsx @@ -1,6 +1,6 @@ -import { extend, useFrame } from "@react-three/fiber"; +import { extend } from "@react-three/fiber"; import { Html, Line } from "@react-three/drei"; -import { MeshLineGeometry, MeshLineMaterial, raycast } from "meshline"; +import { MeshLineGeometry, MeshLineMaterial } from "meshline"; import EditBox from "./EditBox"; extend({ MeshLineGeometry, MeshLineMaterial }); diff --git a/src/styles.module.scss b/src/styles.module.scss index 75d6a64..60505d7 100644 --- a/src/styles.module.scss +++ b/src/styles.module.scss @@ -1,11 +1,28 @@ -.canvas { +.container { + display: grid; + position: relative; width: 100%; height: 100%; } -.labels { - position: absolute; - left: 0; - top: 0; +.canvas { + grid-area: 1 / 1; + position: relative; + width: 100%; + height: 100%; +} + +.header { + grid-area: 1 / 1; + place-self: start center; + z-index: 50; + padding: 10px; +} + +.footer { + grid-area: 1 / 1; + place-self: end end; + z-index: 50; + padding: 10px; } \ No newline at end of file diff --git a/vite.config.ts b/vite.config.ts index 5a33944..14a49d6 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,7 +1,8 @@ -import { defineConfig } from 'vite' -import react from '@vitejs/plugin-react' +import { defineConfig } from "vite"; +import react from "@vitejs/plugin-react"; // https://vitejs.dev/config/ export default defineConfig({ + base: "/cubeviz", plugins: [react()], -}) +});