talexander/organic_ast_explorer
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Switch to using unique id for node selection.

Browse Source 
This lets us pass the selected node down from the top instead of propagating calls to set/clear the selected boolean in each node.
This commit is contained in:
Tom Alexander 2024-01-27 14:24:32 -05:00
parent 6e791d119a
commit 8be7f3c290
Signed by: talexander
GPG Key ID: D3A179C9A53C0EDE
1 changed files with 13 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/OrgAst.tsx
View File

@ -6,8 +6,11 @@ const OrgAst = (props: { setHighlight: Function; clearHighlights: Function; valu
const ast_tree = parse_org(props.value); const ast_tree = parse_org(props.value);
console.log(JSON.stringify(ast_tree)); console.log(JSON.stringify(ast_tree));
function deselectAll() { const [selectedNode, setSelectedNode] = useState<string>("");
props.clearHighlights();
function selectNode(uid: string, start: number, end: number) {
props.setHighlight(start, end);
setSelectedNode(uid);
} }
if (ast_tree.status !== "success") { if (ast_tree.status !== "success") {
@ -15,22 +18,21 @@ const OrgAst = (props: { setHighlight: Function; clearHighlights: Function; valu
} else { } else {
return ( return (
<div className={styles.OrgAst}> <div className={styles.OrgAst}>
<OrgAstNode setHighlight={props.setHighlight} deselectAll={deselectAll} node={ast_tree.content} /> <OrgAstNode selectNode={selectNode} node={ast_tree.content} parentUniqueId="^" selectedNode={selectedNode} />
</div> </div>
); );
} }
}; };
const OrgAstNode = (props: { setHighlight: Function; deselectAll: Function; node: any }) => { const OrgAstNode = (props: { selectNode: Function; node: any, parentUniqueId: string, selectedNode: string }) => {
const [selected, setSelected] = useState<boolean>(false); const uid = props.parentUniqueId + "_" + props.node["ast-node"] + "/" + props.node["standard-properties"]["begin"] + "/" + props.node["standard-properties"]["end"] + "#";
function selectNode() { function selectNode() {
props.setHighlight(props.node["standard-properties"]["begin"] - 1, props.node["standard-properties"]["end"] - 1); props.selectNode(uid, props.node["standard-properties"]["begin"] - 1, props.node["standard-properties"]["end"] - 1);
setSelected(true);
} }
const nodeClassName = selected ? styles.OrgAstNode + " " + styles.selected : styles.OrgAstNode; const nodeClassName = props.selectedNode === uid ? styles.OrgAstNode + " " + styles.selected : styles.OrgAstNode;
return ( return (
<div className={nodeClassName}> <div className={nodeClassName}>
@ -54,7 +56,7 @@ const OrgAstNode = (props: { setHighlight: Function; deselectAll: Function; node
<details open={true}> <details open={true}>
<summary>Children</summary> <summary>Children</summary>
<div className={styles.OrgAstChildren}> <div className={styles.OrgAstChildren}>
<OrgAstNodeList setHighlight={props.setHighlight} deselectAll={props.deselectAll} node_list={props.node.children} /> <OrgAstNodeList selectNode={props.selectNode} parentUniqueId={props.parentUniqueId} selectedNode={props.selectedNode} node_list={props.node.children} />
</div> </div>
</details> </details>
) : null} ) : null}
@ -62,9 +64,9 @@ const OrgAstNode = (props: { setHighlight: Function; deselectAll: Function; node
); );
}; };
const OrgAstNodeList = (props: { setHighlight: Function; deselectAll: Function; node_list: any[] }): React.JSX.Element[] => { const OrgAstNodeList = (props: { selectNode: Function; parentUniqueId: string; selectedNode: string; node_list: any[] }): React.JSX.Element[] => {
return props.node_list.map((node) => { return props.node_list.map((node) => {
return <OrgAstNode setHighlight={props.setHighlight} deselectAll={props.deselectAll} node={node} />; return <OrgAstNode selectNode={props.selectNode} parentUniqueId={props.parentUniqueId} selectedNode={props.selectedNode} node={node} />;
}); });
}; };