+ traverse history

+ ability to enter structs
realratchet · Apr 18, 2023 · 9e6592e · 9e6592e
1 parent 5cf43d2
commit 9e6592e
Show file tree

Hide file tree

Showing 2 changed files with 94 additions and 8 deletions.
diff --git a/src/components/editor.jsx b/src/components/editor.jsx
@@ -94,11 +94,13 @@ function Editor({ history, filter }) {
         );
     }
 
-    const { type, value } = activeHistory[activeHistory.length - 1];
+    const value = activeHistory[activeHistory.length - 1];
+    const type = value.type;
 
     switch (type) {
         case "package": return getPackageEditor({ history, filter }, value);
         case "object": return getObjectEditor({ history, filter }, value);
+        case "struct": return getStructEditor({ history, filter }, value);
         default: {
             useMemo(() => { });
             return <div>{`Unsupported history type '${type}'`}</div>
@@ -109,7 +111,52 @@ function Editor({ history, filter }) {
 export default Editor;
 export { Editor };
 
-function getObjectEditor({ history, filter }, { type, index, filename, value }) {
+function getStructEditor({ history, filter }, { parent, propertyName, value: {type, value} }) {
+    const [activeHistory,] = history;
+    const groups = useMemo(() => {
+        return Object.entries(value).reduce((acc, [propName, propVal]) => {
+            const category = propVal.category || "None";
+            const container = acc[category] = acc[category] || [];
+
+            container.push({ name: propName, value: propVal });
+
+            return acc;
+        }, {});
+    }, [value]);
+
+    const object = {
+        type: "struct",
+        parent,
+        propertyName
+    };
+
+    function onCreateItemElement(collectionKey, index, { name: propertyName, value: propertyValue }) {
+        return (
+            <FlexBox key={index} >
+                <Grid container spacing={2}>
+                    <Grid item xs={4}>
+                        <Item>{propertyName}</Item>
+                    </Grid>
+                    <Grid item xs={2}>
+                        <Item>{getPropertyField(history, object, propertyName, propertyValue)}</Item>
+                    </Grid>
+                </Grid>
+            </FlexBox>
+
+        );
+    }
+
+    return (
+        <TwoWayPanel
+            key={activeHistory.length}
+            collection={groups}
+            filter={filter}
+            onCreateElement={onCreateItemElement}
+        />
+    );
+}
+
+function getObjectEditor({ history, filter }, { value: { type, index, filename, value } }) {
     const [activeHistory,] = history;
     const groups = useMemo(() => {
         return Object.entries(value).reduce((acc, [propName, propVal]) => {
@@ -154,7 +201,7 @@ function getObjectEditor({ history, filter }, { type, index, filename, value })
     );
 }
 
-function getPackageEditor({ history, filter }, { filename, exports }) {
+function getPackageEditor({ history, filter }, { value: { filename, exports } }) {
     const [activeHistory, setHistory] = history;
     const groups = useMemo(() => {
         return exports.reduce((acc, exp) => {

diff --git a/src/components/history.jsx b/src/components/history.jsx
@@ -1,7 +1,9 @@
 import styled from "@emotion/styled";
 import ClassIcon from "@mui/icons-material/Class";
+import StartIcon from "@mui/icons-material/Start";
 import CategoryIcon from "@mui/icons-material/Category";
 import InventoryIcon from "@mui/icons-material/Inventory";
+import AccountTreeIcon from "@mui/icons-material/AccountTree";
 import NavigateNextIcon from "@mui/icons-material/NavigateNext";
 import QuestionMarkIcon from "@mui/icons-material/QuestionMark";
 import { Breadcrumbs, Chip, emphasize, Typography } from "@mui/material";
@@ -28,17 +30,24 @@ const StyledBreadcrumb = styled(Chip)(({ theme }) => {
 }); // TypeScript only: need a type cast here because https://github.com/Microsoft/TypeScript/issues/26591
 
 
-function History({ history: [history,] }) {
+function History({ history: [history, setHistory] }) {
     let breadcrumbs;
 
+    function goBackToHistory(index) {
+        if (history.length === index + 1)
+            return;
+
+        setHistory(history.slice(0, index + 1));
+    }
+
     if (history.length === 0) {
         breadcrumbs = ([
             <StyledBreadcrumb
-                key={0}
+                key={-1}
                 component="a"
                 href="#"
-                label={"No package selected"}
-                icon={<InventoryIcon fontSize="small" />}
+                label="Packages"
+                icon={<StartIcon fontSize="small" />}
             />
         ]);
     } else {
@@ -51,6 +60,7 @@ function History({ history: [history,] }) {
                             component="a"
                             href="#"
                             label={name}
+                            onClick={() => goBackToHistory(index)}
                             icon={<InventoryIcon fontSize="small" />}
                         />
                     );
@@ -67,9 +77,27 @@ function History({ history: [history,] }) {
                             component="a"
                             href="#"
                             label={name}
+                            onClick={() => goBackToHistory(index)}
                             icon={<ClassIcon fontSize="small" />}
                         />
                     );
+                case "struct":
+                    if (array.length === index + 1) {
+                        return <Typography
+                            key={index}
+                            color="text.primary">{name}</Typography>;
+                    }
+
+                    return (
+                        <StyledBreadcrumb
+                            key={index}
+                            component="a"
+                            href="#"
+                            label={name}
+                            onClick={() => goBackToHistory(index)}
+                            icon={<AccountTreeIcon fontSize="small" />}
+                        />
+                    );
                 default:
                     return (
                         <StyledBreadcrumb
@@ -82,12 +110,23 @@ function History({ history: [history,] }) {
                     );
             }
         });
+
+        breadcrumbs.unshift(
+            <StyledBreadcrumb
+                key={-1}
+                component="a"
+                href="#"
+                label="Packages"
+                onClick={() => goBackToHistory(-1)}
+                icon={<StartIcon fontSize="small" />}
+            />
+        );
     }
 
     return (
         <Breadcrumbs maxItems={7}
             separator={<NavigateNextIcon fontSize="small" />}
-            style={{padding: "16px"}}
+            style={{ padding: "16px" }}
         >
             {breadcrumbs}
         </Breadcrumbs>