update to save state into the hash
This commit is contained in:
parent
069a35e959
commit
8687f60b0e
7 changed files with 151 additions and 43 deletions
BIN
bun.lockb
BIN
bun.lockb
Binary file not shown.
145
src/App.tsx
145
src/App.tsx
|
@ -1,4 +1,4 @@
|
||||||
import { Canvas } from "@react-three/fiber";
|
import { Canvas, useThree } from "@react-three/fiber";
|
||||||
import { OrbitControls } from "@react-three/drei";
|
import { OrbitControls } from "@react-three/drei";
|
||||||
|
|
||||||
import styles from "./styles.module.scss";
|
import styles from "./styles.module.scss";
|
||||||
|
@ -6,39 +6,105 @@ import "katex/dist/katex.min.css";
|
||||||
import Point from "./components/Point";
|
import Point from "./components/Point";
|
||||||
import Path from "./components/Path";
|
import Path from "./components/Path";
|
||||||
import { SettingsBox } from "./SettingsContext";
|
import { SettingsBox } from "./SettingsContext";
|
||||||
|
import { useCallback, useState } from "react";
|
||||||
|
import { atom, useAtom, useSetAtom } from "jotai";
|
||||||
|
|
||||||
// https://threejs.org/manual/#en/align-html-elements-to-3d
|
// https://threejs.org/manual/#en/align-html-elements-to-3d
|
||||||
|
|
||||||
|
type coord = [number, number, number];
|
||||||
|
const coords: coord[] = [
|
||||||
|
[0, 0, 0],
|
||||||
|
[0, 0, 1],
|
||||||
|
[0, 1, 0],
|
||||||
|
[0, 1, 1],
|
||||||
|
[1, 0, 0],
|
||||||
|
[1, 0, 1],
|
||||||
|
[1, 1, 0],
|
||||||
|
[1, 1, 1],
|
||||||
|
];
|
||||||
|
|
||||||
|
const ppCoord = (c: coord): string => c.map((n) => n.toString()).join("");
|
||||||
|
|
||||||
|
const offset = (a: coord): coord => [a[0] - 0.5, a[1] - 0.5, a[2] - 0.5];
|
||||||
|
|
||||||
|
const offsetCoords: [string, coord][] = coords.map((a) => [
|
||||||
|
ppCoord(a),
|
||||||
|
offset(a),
|
||||||
|
]);
|
||||||
|
|
||||||
|
function getInitialValue() {
|
||||||
|
try {
|
||||||
|
const h = location.hash;
|
||||||
|
if (h.length === 0) return defaultValues;
|
||||||
|
return JSON.parse(atob(h.replace("#", "")));
|
||||||
|
} catch (e) {
|
||||||
|
console.log("error", e);
|
||||||
|
return defaultValues;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const stateAtom = atom<{ [_: string]: string }>(getInitialValue());
|
||||||
|
|
||||||
|
export const updateStateAtom = atom(null, (get, set, newValue) => {
|
||||||
|
set(stateAtom, newValue);
|
||||||
|
location.hash = btoa(JSON.stringify(newValue));
|
||||||
|
});
|
||||||
|
|
||||||
|
function AdjustCamera() {
|
||||||
|
useThree(({ camera }) => {
|
||||||
|
camera.position.z = 2;
|
||||||
|
});
|
||||||
|
return <></>;
|
||||||
|
}
|
||||||
|
|
||||||
|
const paths: [string, [coord, coord]][] = offsetCoords
|
||||||
|
.flatMap((a) => offsetCoords.map((b) => [a, b]))
|
||||||
|
.filter(
|
||||||
|
([[_a, [a1, a2, a3]], [_b, [b1, b2, b3]]]) =>
|
||||||
|
[a1 === b1 ? 1 : 0, a2 === b2 ? 1 : 0, a3 === b3 ? 1 : 0].reduce(
|
||||||
|
(x, y) => x + y
|
||||||
|
) === 2 &&
|
||||||
|
a1 <= b1 &&
|
||||||
|
a2 <= b2 &&
|
||||||
|
a3 <= b3
|
||||||
|
)
|
||||||
|
.map(([[aname, acoord], [bname, bcoord]]) => [
|
||||||
|
aname + bname,
|
||||||
|
[acoord, bcoord],
|
||||||
|
]);
|
||||||
|
|
||||||
|
const defaultValues: [string, string] = Object.fromEntries([
|
||||||
|
...offsetCoords.map(([a]) => [a, ""]),
|
||||||
|
...paths.map(([a]) => [a, ""]),
|
||||||
|
]);
|
||||||
|
|
||||||
|
function parseCoord(s: string): coord {
|
||||||
|
return offset(s.split("").map((n) => parseInt(n)));
|
||||||
|
}
|
||||||
|
|
||||||
|
function parsePath(s: string): [coord, coord] {
|
||||||
|
return [parseCoord(s.substring(0, 3)), parseCoord(s.substring(3, 6))];
|
||||||
|
}
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
let coords: [number, number, number][] = [
|
const [state] = useAtom(stateAtom);
|
||||||
[0, 0, 0],
|
const updateStateFunc = useSetAtom(updateStateAtom);
|
||||||
[0, 0, 1],
|
|
||||||
[0, 1, 0],
|
|
||||||
[0, 1, 1],
|
|
||||||
[1, 0, 0],
|
|
||||||
[1, 0, 1],
|
|
||||||
[1, 1, 0],
|
|
||||||
[1, 1, 1],
|
|
||||||
];
|
|
||||||
|
|
||||||
coords = coords.map((a) => [a[0] - 0.5, a[1] - 0.5, a[2] - 0.5]);
|
console.log("state", state);
|
||||||
|
|
||||||
const paths = coords
|
const updateState = useCallback(
|
||||||
.flatMap((a) => coords.map((b) => [a, b]))
|
(z: string, value: string) => {
|
||||||
.filter(
|
const newState = { ...state, [z]: value };
|
||||||
([[a1, a2, a3], [b1, b2, b3]]) =>
|
updateStateFunc(newState);
|
||||||
[a1 === b1 ? 1 : 0, a2 === b2 ? 1 : 0, a3 === b3 ? 1 : 0].reduce(
|
},
|
||||||
(x, y) => x + y,
|
[state]
|
||||||
) === 2 &&
|
);
|
||||||
a1 <= b1 &&
|
|
||||||
a2 <= b2 &&
|
|
||||||
a3 <= b3,
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.container}>
|
<div className={styles.container}>
|
||||||
<SettingsBox />
|
<SettingsBox />
|
||||||
<Canvas className={styles.canvas}>
|
<Canvas className={styles.canvas}>
|
||||||
|
<AdjustCamera />
|
||||||
<OrbitControls />
|
<OrbitControls />
|
||||||
<ambientLight intensity={Math.PI / 2} />
|
<ambientLight intensity={Math.PI / 2} />
|
||||||
<spotLight
|
<spotLight
|
||||||
|
@ -50,17 +116,34 @@ function App() {
|
||||||
/>
|
/>
|
||||||
<pointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} />
|
<pointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} />
|
||||||
|
|
||||||
{coords.map((coord) => (
|
{Object.entries(state).map(([thing, value]) => {
|
||||||
<Point key={JSON.stringify(coord)} coord={coord} />
|
if (thing.length === 6) {
|
||||||
))}
|
const [start, end] = parsePath(thing);
|
||||||
|
return (
|
||||||
{paths.map(([start, end]) => (
|
<Path
|
||||||
<Path key={JSON.stringify([start, end])} start={start} end={end} />
|
key={thing}
|
||||||
))}
|
start={start}
|
||||||
|
end={end}
|
||||||
|
onEdit={(newValue) => updateState(thing, newValue)}
|
||||||
|
value={value}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
} else if (thing.length === 3) {
|
||||||
|
const coord = parseCoord(thing);
|
||||||
|
return (
|
||||||
|
<Point
|
||||||
|
key={thing}
|
||||||
|
coord={coord}
|
||||||
|
onEdit={(newValue) => updateState(thing, newValue)}
|
||||||
|
value={value}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
})}
|
||||||
</Canvas>
|
</Canvas>
|
||||||
<div className={styles.footer}>
|
<div className={styles.footer}>
|
||||||
<a
|
<a
|
||||||
href="https://git.sr.ht/~mzhang/cubeviz"
|
href="https://git.mzhang.io/michael/cubeviz"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noreferrer noopener"
|
rel="noreferrer noopener"
|
||||||
>
|
>
|
||||||
|
|
|
@ -1,13 +1,25 @@
|
||||||
import { atom, useAtom } from "jotai";
|
import { atom, useAtom, useAtomValue, useSetAtom } from "jotai";
|
||||||
import styles from "./styles.module.scss";
|
import styles from "./styles.module.scss";
|
||||||
|
import { stateAtom, updateStateAtom } from "./App";
|
||||||
|
import { useCallback } from "react";
|
||||||
|
|
||||||
export const showEmptyAtom = atom(true);
|
export const showEmptyAtom = atom(true);
|
||||||
|
|
||||||
export function SettingsBox() {
|
export function SettingsBox() {
|
||||||
|
const state = useAtomValue(stateAtom);
|
||||||
|
const updateState = useSetAtom(updateStateAtom);
|
||||||
const [showEmpty, setShowEmpty] = useAtom(showEmptyAtom);
|
const [showEmpty, setShowEmpty] = useAtom(showEmptyAtom);
|
||||||
|
|
||||||
|
const doClear = useCallback(() => {
|
||||||
|
updateState(
|
||||||
|
Object.fromEntries(Object.entries(state).map(([a, _]) => [a, ""]))
|
||||||
|
);
|
||||||
|
}, [state]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.header}>
|
<div className={styles.header}>
|
||||||
|
<button onClick={doClear}>Clear</button>
|
||||||
|
|
||||||
<input
|
<input
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
id="showEmptyCheckbox"
|
id="showEmptyCheckbox"
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
.editBox {
|
.editBox {
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
|
transform: translateX(-50%) translateY(-50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.empty {
|
.empty {
|
||||||
|
|
|
@ -1,27 +1,35 @@
|
||||||
import { type FormEvent, useCallback, useState } from "react";
|
import { type FormEvent, useCallback, useEffect, useState } from "react";
|
||||||
import { BlockMath } from "react-katex";
|
import { BlockMath } from "react-katex";
|
||||||
|
|
||||||
import styles from "./EditBox.module.scss";
|
import styles from "./EditBox.module.scss";
|
||||||
import { showEmptyAtom } from "../SettingsContext";
|
import { showEmptyAtom } from "../SettingsContext";
|
||||||
import { useAtomValue } from "jotai";
|
import { useAtomValue } from "jotai";
|
||||||
|
|
||||||
// export interface EditBoxProps {}
|
export interface EditBoxProps {
|
||||||
|
value: string;
|
||||||
|
onUpdate?: (newValue: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
export default function EditBox() {
|
export default function EditBox({ onUpdate, value }: EditBoxProps) {
|
||||||
const [value, setValue] = useState("");
|
const [innerValue, setInnerValue] = useState("");
|
||||||
const [isEditing, setIsEditing] = useState(false);
|
const [isEditing, setIsEditing] = useState(false);
|
||||||
const showEmpty = useAtomValue(showEmptyAtom);
|
const showEmpty = useAtomValue(showEmptyAtom);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setInnerValue(value);
|
||||||
|
}, [value]);
|
||||||
|
|
||||||
const handleDblClick = useCallback(() => {
|
const handleDblClick = useCallback(() => {
|
||||||
if (!isEditing) setIsEditing(true);
|
if (!isEditing) setIsEditing(true);
|
||||||
}, [isEditing]);
|
}, [isEditing]);
|
||||||
|
|
||||||
const done = useCallback(
|
const done = useCallback(
|
||||||
(evt: FormEvent) => {
|
(evt: FormEvent) => {
|
||||||
|
onUpdate?.(innerValue);
|
||||||
evt.preventDefault();
|
evt.preventDefault();
|
||||||
if (isEditing) setIsEditing(false);
|
if (isEditing) setIsEditing(false);
|
||||||
},
|
},
|
||||||
[isEditing],
|
[value, isEditing, innerValue]
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -32,8 +40,8 @@ export default function EditBox() {
|
||||||
// biome-ignore lint/a11y/noAutofocus: <explanation>
|
// biome-ignore lint/a11y/noAutofocus: <explanation>
|
||||||
autoFocus={true}
|
autoFocus={true}
|
||||||
onBlur={done}
|
onBlur={done}
|
||||||
value={value}
|
value={innerValue}
|
||||||
onChange={(evt) => setValue(evt.target.value)}
|
onChange={(evt) => setInnerValue(evt.target.value)}
|
||||||
placeholder="Type latex code..."
|
placeholder="Type latex code..."
|
||||||
/>
|
/>
|
||||||
</form>
|
</form>
|
||||||
|
|
|
@ -8,9 +8,11 @@ extend({ MeshLineGeometry, MeshLineMaterial });
|
||||||
export interface PointProps {
|
export interface PointProps {
|
||||||
start: [number, number, number];
|
start: [number, number, number];
|
||||||
end: [number, number, number];
|
end: [number, number, number];
|
||||||
|
value: string;
|
||||||
|
onEdit?: (newValue: string) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function Path({ start, end }: PointProps) {
|
export default function Path({ start, end, onEdit, value }: PointProps) {
|
||||||
const midpoint: [number, number, number] = [
|
const midpoint: [number, number, number] = [
|
||||||
(start[0] + end[0]) / 2.0,
|
(start[0] + end[0]) / 2.0,
|
||||||
(start[1] + end[1]) / 2.0,
|
(start[1] + end[1]) / 2.0,
|
||||||
|
@ -23,7 +25,7 @@ export default function Path({ start, end }: PointProps) {
|
||||||
<meshBasicMaterial />
|
<meshBasicMaterial />
|
||||||
</Line>
|
</Line>
|
||||||
<Html position={midpoint}>
|
<Html position={midpoint}>
|
||||||
<EditBox />
|
<EditBox value={value} onUpdate={onEdit} />
|
||||||
</Html>
|
</Html>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
|
@ -3,16 +3,18 @@ import EditBox from "./EditBox";
|
||||||
|
|
||||||
export interface PointProps {
|
export interface PointProps {
|
||||||
coord: [number, number, number];
|
coord: [number, number, number];
|
||||||
|
value: string;
|
||||||
|
onEdit?: (newValue: string) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function Point({ coord }: PointProps) {
|
export default function Point({ coord, onEdit, value }: PointProps) {
|
||||||
return (
|
return (
|
||||||
<mesh position={coord}>
|
<mesh position={coord}>
|
||||||
<sphereGeometry args={[0.05]} />
|
<sphereGeometry args={[0.05]} />
|
||||||
<meshStandardMaterial color="gray" />
|
<meshStandardMaterial color="gray" />
|
||||||
|
|
||||||
<Html>
|
<Html>
|
||||||
<EditBox />
|
<EditBox value={value} onUpdate={onEdit} />
|
||||||
</Html>
|
</Html>
|
||||||
</mesh>
|
</mesh>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in a new issue