More improvements

This commit is contained in:
Ayaz Hafiz 2023-07-18 11:24:50 -05:00
parent 8388c93e62
commit 84165d21f4
No known key found for this signature in database
GPG key ID: 0E2A37416A25EF58
10 changed files with 465 additions and 35 deletions

View file

@ -3,7 +3,7 @@ import { Handle, Position } from "reactflow";
import { Variable } from "../../schema";
import { assertExhaustive } from "../../utils/exhaustive";
import { contentStyles } from "../Content";
import { VariableElHelp } from "../Common/Variable";
import { VariableElPretty } from "../Common/Variable";
import { SubsSnapshot, TypeDescriptor } from "../../engine/subs";
type AddSubVariableLink = (from: Variable, subVariable: Variable) => void;
@ -54,7 +54,7 @@ export default function VariableNode({ data }: VariableNodeProps): JSX.Element {
>
<Handle type="target" position={Position.Top} isConnectable={false} />
<div>
<VariableElHelp variable={variable} styles={styles} />
<VariableElPretty variable={variable} subs={subs} />
</div>
{expandedContent}
<Handle type="source" position={Position.Bottom} isConnectable={false} />
@ -185,12 +185,10 @@ function SubVariable({
}: {
variable: Variable;
} & BasisProps): JSX.Element {
const desc = subs.get_root(variable);
const styles = contentStyles(desc);
return (
<VariableElHelp
<VariableElPretty
variable={variable}
styles={styles}
subs={subs}
onClick={() => addSubVariableLink(origin, variable)}
/>
);

View file

@ -20,10 +20,12 @@ import "reactflow/dist/style.css";
import clsx from "clsx";
import VariableNode, { VariableNodeProps } from "./VariableNode";
import { SubsSnapshot } from "../../engine/subs";
import { KeydownHandler } from "../Events";
export interface VariablesGraphProps {
subs: SubsSnapshot;
onVariable: (handler: (variable: Variable) => void) => void;
onKeydown: (handler: KeydownHandler) => void;
}
type GraphDirection = "TB" | "BT" | "LR" | "RL";
@ -103,7 +105,11 @@ function addEdgeChange(edge: Edge, existingEdges: Edge[]): EdgeChange | null {
};
}
function Graph({ subs, onVariable }: VariablesGraphProps): JSX.Element {
function Graph({
subs,
onVariable,
onKeydown,
}: VariablesGraphProps): JSX.Element {
const instance = useReactFlow();
const initialNodes: Node[] = [];
const initialEdges: Edge[] = [];
@ -225,6 +231,13 @@ function Graph({ subs, onVariable }: VariablesGraphProps): JSX.Element {
);
onVariable(addNode);
onKeydown((key) => {
switch (key) {
case "c": {
onLayoutChange(direction);
}
}
});
return (
<ReactFlow