#464 Vector layer components

NASA-AMMOS · May 10, 2024 · 9ad0413 · 9ad0413
1 parent c783103
commit 9ad0413
Show file tree

Hide file tree

Showing 12 changed files with 3,703 additions and 410 deletions.
diff --git a/configure/package-lock.json b/configure/package-lock.json
diff --git a/configure/package.json b/configure/package.json
@@ -14,6 +14,7 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^13.5.0",
+    "@uiw/react-md-editor": "^3.25.6",
     "clsx": "^2.0.0",
     "html2pug": "^4.0.0",
     "immutable": "^5.0.0-beta.4",

diff --git a/configure/public/toolConfigs.json b/configure/public/toolConfigs.json
diff --git a/configure/src/components/Tabs/Layers/Modals/LayerModal/LayerModal.js b/configure/src/components/Tabs/Layers/Modals/LayerModal/LayerModal.js
@@ -64,7 +64,6 @@ const useStyles = makeStyles((theme) => ({
     height: theme.headHeights[2],
     boxSizing: "border-box",
     background: theme.palette.swatches.p[0],
-    borderBottom: `1px solid ${theme.palette.swatches.grey[800]}`,
     padding: `4px ${theme.spacing(2)} 4px ${theme.spacing(4)} !important`,
   },
   title: {
@@ -195,7 +194,7 @@ const LayerModal = (props) => {
         </div>
       </DialogTitle>
       <DialogContent className={c.content}>
-        <Maker config={config} layer={layer} />
+        <Maker config={config} layer={layer} inlineHelp={true} />
       </DialogContent>
       <DialogActions>
         <Button variant="contained" onClick={() => {}}>

diff --git a/configure/src/components/Tabs/Tools/Modals/ToolModal/ToolModal.js b/configure/src/components/Tabs/Tools/Modals/ToolModal/ToolModal.js
@@ -187,8 +187,6 @@ const ToolModal = (props) => {
     dispatch(setModal({ name: MODAL_NAME, on: false }));
   };
 
-  console.log(modal);
-
   let toolActive = tool.name != null ? true : false;
   if (tool?.on != null) toolActive = tool.on;
 

diff --git a/configure/src/core/Maker.js b/configure/src/core/Maker.js
@@ -38,12 +38,37 @@ import {
 
 import Map from "../components/Map/Map";
 import ColorButton from "../components/ColorButton/ColorButton";
+import MDEditor from "@uiw/react-md-editor";
 
 const useStyles = makeStyles((theme) => ({
   Maker: {
     width: "100%",
     background: theme.palette.swatches.grey[1000],
   },
+  tabs: {
+    background: theme.palette.secondary.main,
+    "& button": {
+      color: theme.palette.swatches.grey[700],
+    },
+    "& button.Mui-selected": {
+      color: theme.palette.swatches.grey[1000],
+      background: theme.palette.swatches.grey[200],
+    },
+    "& .MuiTabs-indicator": {
+      backgroundColor: theme.palette.swatches.p[0],
+      height: "3px",
+    },
+    "& .MuiTabScrollButton-root": {
+      color: theme.palette.swatches.grey[1000],
+    },
+  },
+  contentTabs: {
+    height: "calc(100% - 48px)",
+    overflowY: "auto",
+    "& .rowTitle:first-child": {
+      marginTop: "20px !important",
+    },
+  },
   shadowed: {
     boxShadow: `inset 10px 0px 10px -5px rgba(0,0,0,0.3)`,
   },
@@ -74,7 +99,7 @@ const useStyles = makeStyles((theme) => ({
     paddingBottom: "5px",
     fontSize: "12px",
     letterSpacing: "1px",
-    color: theme.palette.swatches.p[0],
+    color: theme.palette.swatches.p[12],
     fontWeight: "bold",
     textTransform: "uppercase",
   },
@@ -214,16 +239,29 @@ const getComponent = (
           )}
         </div>
       );
+    case "markdown":
+      let markdown_f = value || getIn(directConf, com.field, "");
+      return (
+        <div className="container">
+          <MDEditor
+            value={markdown_f}
+            onChange={(val) => {
+              updateConfiguration(forceField || com.field, val, layer);
+            }}
+            height={700}
+          />
+        </div>
+      );
     case "number":
       inner = (
         <TextField
           className={c.text}
           label={com.name}
           variant="filled"
           size="small"
-          value={getIn(directConf, com.field, "")}
+          value={value || getIn(directConf, com.field, "")}
           onChange={(e) => {
-            updateConfiguration(com.field, e.target.value, layer);
+            updateConfiguration(forceField || com.field, e.target.value, layer);
           }}
           type="number"
           min={com.min != null ? com.min : 0}
@@ -253,9 +291,15 @@ const getComponent = (
           <FormControlLabel
             control={
               <Checkbox
-                checked={getIn(directConf, com.field, com.defaultChecked)}
+                checked={
+                  value || getIn(directConf, com.field, com.defaultChecked)
+                }
                 onChange={(e) => {
-                  updateConfiguration(com.field, e.target.checked, layer);
+                  updateConfiguration(
+                    forceField || com.field,
+                    e.target.checked,
+                    layer
+                  );
                 }}
               />
             }
@@ -284,9 +328,13 @@ const getComponent = (
         <FormControl className={c.dropdown} variant="filled" size="small">
           <InputLabel>{com.name}</InputLabel>
           <Select
-            value={getIn(directConf, com.field, com.options?.[0])}
+            value={value || getIn(directConf, com.field, com.options?.[0])}
             onChange={(e) => {
-              updateConfiguration(com.field, e.target.value, layer);
+              updateConfiguration(
+                forceField || com.field,
+                e.target.value,
+                layer
+              );
             }}
           >
             {com.options.map((o) => {
@@ -312,17 +360,23 @@ const getComponent = (
         </div>
       );
     case "colorpicker":
+      let color;
+      if (tool) color = getIn(tool, com.field.split("."), { hex: "#000000" });
+      else if (layer)
+        color = getIn(layer, com.field.split("."), { hex: "#000000" });
+      else color = getIn(directConf, com.field.split("."), { hex: "#000000" });
+
       inner = (
         <ColorButton
           label={com.name}
-          color={getIn(directConf, com.field, { hex: "transparent" })}
+          color={value || color}
           onChange={(color) => {
             if (color) {
               let colorStr = color.hex;
               if (color.rgb?.a !== 1) {
                 colorStr = `rgba(${color.rgb.r}, ${color.rgb.g}, ${color.rgb.b}, ${color.rgb.a})`;
               }
-              updateConfiguration(com.field, colorStr, layer);
+              updateConfiguration(forceField || com.field, colorStr, layer);
             }
           }}
         />
@@ -347,6 +401,7 @@ const getComponent = (
       const section = [];
       let items;
       if (tool) items = getIn(tool, com.field.split("."), []);
+      else if (layer) items = getIn(layer, com.field.split("."), []);
       else items = getIn(configuration, com.field.split("."), []);
       if (typeof items.push !== "function") items = [];
 
@@ -431,23 +486,16 @@ const getComponent = (
 
                     updateConfiguration(com.field, next, configuration);
                   } else {
-                    const nextConfiguration = JSON.parse(
-                      JSON.stringify(configuration)
-                    );
-                    let next = getIn(
-                      nextConfiguration,
-                      com.field.split("."),
-                      []
-                    );
+                    let next = getIn(configuration, com.field.split("."), []);
                     next = JSON.parse(JSON.stringify(next));
                     if (typeof next.push !== "function") next = [];
                     let nextObj = {};
                     com.object.forEach((obj) => {
                       nextObj[obj.field] = null;
                     });
                     next.push(nextObj);
-                    setIn(nextConfiguration, com.field.split("."), next);
-                    setConfiguration(nextConfiguration);
+
+                    updateConfiguration(com.field, next, layer);
                   }
                 }}
               >
@@ -469,6 +517,27 @@ const getComponent = (
   }
 };
 
+const makeConfigTabs = (tabs, value, onChange, c) => {
+  if (tabs) {
+    return (
+      <Tabs
+        className={c.tabs}
+        value={value}
+        onChange={(e, v) => {
+          onChange(v);
+        }}
+        variant="scrollable"
+        scrollButtons="auto"
+        aria-label="scrollable auto tabs example"
+      >
+        {tabs.map((tab) => (
+          <Tab label={tab.name} />
+        ))}
+      </Tabs>
+    );
+  }
+};
+
 const makeConfig = (
   updateConfiguration,
   config,
@@ -480,13 +549,16 @@ const makeConfig = (
   inlineHelp
 ) => {
   const made = [];
+
   if (config == null || config.rows == null) return made;
 
   config.rows.forEach((row, idx) => {
     if (row.name) {
       made.push(
         <div
-          className={clsx(c.rowTitle, { [c.rowTitleBasic]: !shadowed })}
+          className={clsx(c.rowTitle, "rowTitle", {
+            [c.rowTitleBasic]: !shadowed,
+          })}
           key={`${idx}_title`}
         >
           {row.name}
@@ -509,6 +581,13 @@ const makeConfig = (
           {row.subname}
         </div>
       );
+      if (row.subdescription) {
+        made.push(
+          <div className={clsx(c.rowDescription)} key={`${idx}_desc`}>
+            {row.subdescription}
+          </div>
+        );
+      }
     }
     if (row.components) {
       made.push(
@@ -562,6 +641,8 @@ export default function Maker(props) {
 
   const dispatch = useDispatch();
 
+  const [tabValue, setTabValue] = useState(0);
+
   const configuration = useSelector((state) => state.core.configuration);
 
   let tool = null;
@@ -590,17 +671,25 @@ export default function Maker(props) {
   };
 
   return (
-    <div className={clsx(c.Maker, { [c.shadowed]: shadowed })}>
-      {makeConfig(
-        updateConfiguration,
-        config,
-        configuration,
-        layer,
-        tool,
-        c,
-        shadowed,
-        inlineHelp
-      )}
+    <div
+      className={clsx(c.Maker, { [c.shadowed]: shadowed })}
+      style={{ height: config.tabs ? "100%" : "unset" }}
+    >
+      {config.tabs
+        ? makeConfigTabs(config.tabs, tabValue, setTabValue, c)
+        : null}
+      <div className={clsx({ [c.contentTabs]: config.tabs })}>
+        {makeConfig(
+          updateConfiguration,
+          config.tabs ? config.tabs[tabValue] : config,
+          configuration,
+          layer,
+          tool,
+          c,
+          shadowed,
+          inlineHelp
+        )}
+      </div>
     </div>
   );
 }
diff --git a/configure/src/core/utils.js b/configure/src/core/utils.js
@@ -9,9 +9,10 @@ export const getIn = (obj, keyArray, notSetValue) => {
   if (typeof keyArray === "string") keyArray = keyArray.split(".");
   let object = Object.assign({}, obj);
   for (let i = 0; i < keyArray.length; i++) {
-    if (object && object.hasOwnProperty(keyArray[i]))
+    if (object && object.hasOwnProperty(keyArray[i])) {
+      if (typeof object === "string") object = [object];
       object = object[keyArray[i]] || notSetValue;
-    else return notSetValue != null ? notSetValue : null;
+    } else return notSetValue != null ? notSetValue : null;
   }
   return object;
 };

diff --git a/configure/src/index.css b/configure/src/index.css
@@ -7,6 +7,10 @@ body {
   -moz-osx-font-smoothing: grayscale;
   width: 100vw;
   height: 100vh;
+  --color-canvas-default: #1a1a1a;
+}
+.w-md-editor-fullscreen {
+  right: 240px !important;
 }
 
 code {
@@ -17,4 +21,4 @@ code {
 #root {
   width: 100%;
   height: 100%;
-}
+}