From 6e791d119a8acba670927f241381eb75c02d54de Mon Sep 17 00:00:00 2001
From: Tom Alexander <tom@fizz.buzz>
Date: Sat, 27 Jan 2024 14:04:44 -0500
Subject: [PATCH] Setting highlight based on clicks.

---
 src/Editor.tsx             | 11 ++++++-----
 src/OrgAst.module.css      |  6 ++++++
 src/OrgAst.module.css.d.ts |  1 +
 src/OrgAst.tsx             | 30 ++++++++++++++++++++++--------
 4 files changed, 35 insertions(+), 13 deletions(-)

diff --git a/src/Editor.tsx b/src/Editor.tsx
index 789ff54..b5ce31b 100644
--- a/src/Editor.tsx
+++ b/src/Editor.tsx
@@ -29,6 +29,11 @@ function Editor({ defaultValue = default_org_source }) {
 
   const [highlights, setHighlights] = useState<Array<Highlight>>([]);
 
+  function setHighlight(start: number, end: number) {
+    let new_highlights = [new Highlight(start, end)];
+    setHighlights(new_highlights);
+  }
+
   function addHighlight(start: number, end: number) {
     let new_highlights = [...highlights, new Highlight(start, end)];
     new_highlights.sort(function (a, b) {
@@ -43,10 +48,6 @@ function Editor({ defaultValue = default_org_source }) {
     setHighlights([]);
   }
 
-  if (highlights.length === 0) {
-    addHighlight(1, 5);
-  }
-
   return (
     <div className="Editor">
       <div className="Editor-textwrapper">
@@ -57,7 +58,7 @@ function Editor({ defaultValue = default_org_source }) {
         />
         <div className="Editor-underlay">{buildShadow(highlights, value)}</div>
       </div>
-      <OrgAst addHighlight={addHighlight} value={value} />
+      <OrgAst setHighlight={setHighlight} clearHighlights={clearHighlights} value={value} />
     </div>
   );
 }
diff --git a/src/OrgAst.module.css b/src/OrgAst.module.css
index 3bd9635..f59d224 100644
--- a/src/OrgAst.module.css
+++ b/src/OrgAst.module.css
@@ -29,6 +29,12 @@
   }
 }
 
+.OrgAstNode.selected {
+  > .OrgAstNodeType {
+    background: #9cfc97;
+  }
+}
+
 .OrgAstNodeType {
   font-size: 1.3rem;
   font-weight: 700;
diff --git a/src/OrgAst.module.css.d.ts b/src/OrgAst.module.css.d.ts
index 234b36a..883d4d5 100644
--- a/src/OrgAst.module.css.d.ts
+++ b/src/OrgAst.module.css.d.ts
@@ -2,3 +2,4 @@ export const OrgAst: string;
 export const OrgAstNode: string;
 export const OrgAstNodeType: string;
 export const OrgAstChildren: string;
+export const selected: string;
diff --git a/src/OrgAst.tsx b/src/OrgAst.tsx
index 9d1af03..c684818 100644
--- a/src/OrgAst.tsx
+++ b/src/OrgAst.tsx
@@ -2,25 +2,39 @@ import React, { ReactNode, useState } from "react";
 import { parse_org } from "../../organic/target/wasm32-unknown-unknown/js/wasm";
 import styles from "./OrgAst.module.css";
 
-const OrgAst = (props: { addHighlight: Function; value: string }) => {
+const OrgAst = (props: { setHighlight: Function; clearHighlights: Function; value: string }) => {
   const ast_tree = parse_org(props.value);
   console.log(JSON.stringify(ast_tree));
 
+  function deselectAll() {
+    props.clearHighlights();
+  }
+
   if (ast_tree.status !== "success") {
     return <div className={styles.OrgAst}>Error! {ast_tree.content}</div>;
   } else {
     return (
       <div className={styles.OrgAst}>
-        <OrgAstNode node={ast_tree.content} />
+        <OrgAstNode setHighlight={props.setHighlight} deselectAll={deselectAll} node={ast_tree.content} />
       </div>
     );
   }
 };
 
-const OrgAstNode = (props: { node: any }) => {
+const OrgAstNode = (props: { setHighlight: Function; deselectAll: Function; node: any }) => {
+
+  const [selected, setSelected] = useState<boolean>(false);
+
+  function selectNode() {
+    props.setHighlight(props.node["standard-properties"]["begin"] - 1, props.node["standard-properties"]["end"] - 1);
+    setSelected(true);
+  }
+
+  const nodeClassName = selected ? styles.OrgAstNode + " " + styles.selected : styles.OrgAstNode;
+
   return (
-    <div className={styles.OrgAstNode}>
-      <div className={styles.OrgAstNodeType}>{props.node["ast-node"]}</div>
+    <div className={nodeClassName}>
+      <div className={styles.OrgAstNodeType} onClick={selectNode}>{props.node["ast-node"]}</div>
       <details>
         <summary>Standard Properties</summary>
         <dl>
@@ -40,7 +54,7 @@ const OrgAstNode = (props: { node: any }) => {
         <details open={true}>
           <summary>Children</summary>
           <div className={styles.OrgAstChildren}>
-            <OrgAstNodeList node_list={props.node.children} />
+            <OrgAstNodeList setHighlight={props.setHighlight} deselectAll={props.deselectAll} node_list={props.node.children} />
           </div>
         </details>
       ) : null}
@@ -48,9 +62,9 @@ const OrgAstNode = (props: { node: any }) => {
   );
 };
 
-const OrgAstNodeList = (props: { node_list: any[] }): React.JSX.Element[] => {
+const OrgAstNodeList = (props: { setHighlight: Function; deselectAll: Function; node_list: any[] }): React.JSX.Element[] => {
   return props.node_list.map((node) => {
-    return <OrgAstNode node={node} />;
+    return <OrgAstNode setHighlight={props.setHighlight} deselectAll={props.deselectAll} node={node} />;
   });
 };