From e89be0feffaf583316b6f5266fbaed0977561ec2 Mon Sep 17 00:00:00 2001 From: Tom Alexander Date: Sat, 27 Jan 2024 18:12:51 -0500 Subject: [PATCH] Render object trees. --- src/OrgAst.module.css | 19 +++++++- src/OrgAst.module.css.d.ts | 1 + src/OrgAst.tsx | 98 +++++++++++++++++++++++++++++++++++++- 3 files changed, 116 insertions(+), 2 deletions(-) diff --git a/src/OrgAst.module.css b/src/OrgAst.module.css index 1804590..8a406d9 100644 --- a/src/OrgAst.module.css +++ b/src/OrgAst.module.css @@ -47,7 +47,8 @@ background: #eeeeee; } -.OrgAstProperties { +.OrgAstProperties, +.OrgAstObjectTree { border: 1px solid #000000; margin: 5px; @@ -77,3 +78,19 @@ } } } + +.OrgAstObjectTree { + > tbody { + border-style: dashed; + border-color: #000000; + } + > tbody:not(:first-child, :last-child) { + border-width: 3px 0; + } + > tbody:first-child:not(:only-child) { + border-width: 0 0 3px 0; + } + > tbody:last-child:not(:only-child) { + border-width: 3px 0 0 0; + } +} diff --git a/src/OrgAst.module.css.d.ts b/src/OrgAst.module.css.d.ts index e0a2eaa..f0a7a83 100644 --- a/src/OrgAst.module.css.d.ts +++ b/src/OrgAst.module.css.d.ts @@ -4,3 +4,4 @@ export const OrgAstNodeType: string; export const OrgAstChildren: string; export const selected: string; export const OrgAstProperties: string; +export const OrgAstObjectTree: string; diff --git a/src/OrgAst.tsx b/src/OrgAst.tsx index a6b4f2e..91d67a5 100644 --- a/src/OrgAst.tsx +++ b/src/OrgAst.tsx @@ -172,11 +172,107 @@ const OrgPropertyValue = (props: { selectedNode: string; value: any; }): React.ReactNode => { - return JSON.stringify(props.value); + if ( + props.value === null || + is_primitive(props.value) || + (is_array(props.value) && props.value.length === 0) + ) { + return JSON.stringify(props.value); + } else if (is_list_of_ast_nodes(props.value)) { + return ( +
+ +
+ ); + } else if (is_object_tree(props.value)) { + return ( + + ); + } else { + alert("Unhandled property value! " + JSON.stringify(props.value)); + } }; +interface OrgObjectTreeProps { + selectNode: Function; + parentUniqueId: string; + selectedNode: string; + value: any; +} + +function OrgObjectTree({ + selectNode, + parentUniqueId, + selectedNode, + value, +}: OrgObjectTreeProps): React.ReactNode { + const entries = value["object-tree"].map((entry: any) => { + return ( + + + Optional value: + + + + + + Value: + + + + + + ); + }); + return {entries}
; +} + function is_object(val: any): boolean { return val instanceof Object && !(val instanceof Array); } +function is_array(val: any): boolean { + return val instanceof Array; +} + +function is_primitive(val: any): boolean | null { + if (val === null) { + return null; + } + return !(val instanceof Object || val instanceof Array); +} + +function is_list_of_ast_nodes(val: any): boolean { + if (!is_array(val)) { + return false; + } + return val.every((entry: any) => { + return is_object(entry) && entry.hasOwnProperty("ast-node"); + }); +} + +function is_object_tree(val: any): boolean { + return is_object(val) && val.hasOwnProperty("object-tree"); +} + export default OrgAst;