#378 LegendTool as Popup (#379)

* #378 Separate legend tool * #378 Legend formatting, reacts to layer toggles
NASA-AMMOS · May 11, 2023 · 223fd10 · 223fd10
1 parent d690af2
commit 223fd10
Show file tree

Hide file tree

Showing 10 changed files with 390 additions and 201 deletions.
diff --git a/config/js/config.js b/config/js/config.js
@@ -2193,7 +2193,13 @@ function save(returnJSON) {
     //Tools
     for (var i = 0; i < tData.length; i++) {
       if ($("#tab_tools #tools_" + tData[i].name).prop("checked")) {
-        var toolsjson = { name: "", icon: "", js: "" };
+        var toolsjson = {
+          name: "",
+          icon: "",
+          js: "",
+        };
+        if (tData[i].separatedTool === true) toolsjson.separatedTool = true;
+
         toolsjson.name = tData[i].name;
         toolsjson.icon = $("#t" + tData[i].name + "icon input").val();
         toolsjson.js = tData[i].name + "Tool";
@@ -2744,6 +2750,15 @@ function layerPopulateVariable(modalId, layerType) {
   if (layerEditors[modalId]) {
     var currentLayerVars = JSON.parse(layerEditors[modalId].getValue() || "{}");
 
+    currentLayerVars.legend = currentLayerVars.legend || [
+      {
+        color: "#999",
+        strokecolor: "black",
+        shape: "circle",
+        value: "Example",
+      },
+    ];
+
     if (layerType == "data") {
       currentLayerVars = currentLayerVars.shader
         ? { shader: currentLayerVars.shader }

diff --git a/docs/pages/Tools/Legend/Legend.md b/docs/pages/Tools/Legend/Legend.md
@@ -7,7 +7,7 @@ parent: Tools
 
 # Legend
 
-A layer can be configured with a legend by pointing its Legend field to a .csv file. The Legend Tool renders symbologies and gradient scales for any properly configured on layer.
+A layer can be configured with a legend by pointing its Legend field to a .csv file or by including a JSON `legend` array into the layer's Raw Variables. The Legend Tool renders symbologies and gradient scales for any properly configured on layer.
 
 The Legend Tool takes no raw variable configurations in the Tools Tab.
 
@@ -30,9 +30,108 @@ The Legend Tool takes no raw variable configurations in the Tools Tab.
         crimson,cyan,square,possibly
         indigo,#FFF,rect,contain
 
+### Raw Variables examples:
+
+```json
+{
+  "legend": [
+    {
+      "color": "purple",
+      "strokecolor": "#000",
+      "shape": "discreet",
+      "value": "This"
+    },
+    {
+      "color": "cyan",
+      "strokecolor": "#000",
+      "shape": "discreet",
+      "value": "is"
+    },
+    {
+      "color": "lime",
+      "strokecolor": "#000",
+      "shape": "discreet",
+      "value": "a"
+    },
+    {
+      "color": " yellow",
+      "strokecolor": "#000",
+      "shape": "discreet",
+      "value": "sentential"
+    },
+    {
+      "color": "orange",
+      "strokecolor": "#000",
+      "shape": "discreet",
+      "value": "example"
+    },
+    {
+      "color": "red",
+      "strokecolor": "#000",
+      "shape": "discreet",
+      "value": "of"
+    },
+    {
+      "color": "purple",
+      "strokecolor": "#000",
+      "shape": "continuous",
+      "value": "what"
+    },
+    {
+      "color": "red",
+      "strokecolor": "#000",
+      "shape": "continuous",
+      "value": "values"
+    },
+    {
+      "color": "white",
+      "strokecolor": "#000",
+      "shape": "continuous",
+      "value": "the"
+    },
+    {
+      "color": "blue",
+      "strokecolor": "#000",
+      "shape": "continuous",
+      "value": "legend"
+    },
+    {
+      "color": "pink",
+      "strokecolor": "#000",
+      "shape": "circle",
+      "value": "csv"
+    },
+    {
+      "color": "green",
+      "strokecolor": "#000",
+      "shape": "discreet",
+      "value": "files"
+    },
+    {
+      "color": " orange",
+      "strokecolor": "#000",
+      "shape": "discreet",
+      "value": "could"
+    },
+    {
+      "color": "crimson",
+      "strokecolor": "cyan",
+      "shape": "square",
+      "value": "possibly"
+    },
+    {
+      "color": "indigo",
+      "strokecolor": "#FFF",
+      "shape": "rect",
+      "value": "contain"
+    }
+  ]
+}
+```
+
 #### header
 
-THe header must be `color,strokecolor,shape,value`.
+The header/properties must be `color,strokecolor,shape,value`.
 
 #### color
 
@@ -46,6 +145,6 @@ Any [CSS color](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to
 
 Can be either `circle`, `square`, `rect`, `discreet` and `continuous`. Discreet and continuous describe scales. These scales are broken into groups by a change in shape value. For instance, "discreet, discreet, discreet, circle, discreet, discreet" represents a discreet scales of three colors, a circle and then a discreet scale of two colors.
 
-### value
+#### value
 
 A string value for the legend entry.
diff --git a/src/css/mmgis.css b/src/css/mmgis.css
@@ -306,6 +306,9 @@ body {
 .toolButton:hover {
     background: var(--color-a1-5) !important;
 }
+.toolButtonSep:hover {
+    color: var(--color-c) !important;
+}
 #tScreen {
     width: 100%;
     position: absolute;

diff --git a/src/essence/Basics/Layers_/Layers_.js b/src/essence/Basics/Layers_/Layers_.js
@@ -188,6 +188,15 @@ const L_ = {
             }
         } else console.log('Failure updating to new site')
     },
+    _onLayerToggleSubscriptions: {},
+    subscribeOnLayerToggle: function (fid, func) {
+        if (typeof func === 'function')
+            L_._onLayerToggleSubscriptions[fid] = func
+    },
+    unsubscribeOnLayerToggle: function (fid) {
+        if (L_._onLayerToggleSubscriptions[fid] != null)
+            delete L_._onLayerToggleSubscriptions[fid]
+    },
     //Takes in config layer obj
     //Toggles a layer on and off and accounts for sublayers
     //Takes in a config layer object
@@ -198,6 +207,10 @@ const L_ = {
         else on = false
 
         await L_.toggleLayerHelper(s, on)
+
+        Object.keys(L_._onLayerToggleSubscriptions).forEach((k) => {
+            L_._onLayerToggleSubscriptions[k](s.name, !on)
+        })
     },
     toggleLayerHelper: async function (s, on, ignoreToggleStateChange) {
         if (s.type !== 'header') {
@@ -2921,7 +2934,9 @@ function parseConfig(configData, urlOnLayers) {
 
                 //relative or full path?
                 let legendPath = d[i].legend
-                if (legendPath != undefined) {
+                if (d[i]?.variables?.legend) {
+                    L_.layers.data[d[i].name]._legend = d[i].variables.legend
+                } else if (legendPath != undefined) {
                     if (!F_.isUrlAbsolute(legendPath))
                         legendPath = L_.missionPath + legendPath
                     $.get(