feat(layer-selector): add optional opacity slider

This is a request from WFRC (agrc/wfrc-rtp-projects#64).
agrc · Aug 22, 2022 · b9ee8cf · b9ee8cf
1 parent d19a316
commit b9ee8cf
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 9 deletions.
diff --git a/packages/layer-selector/src/LayerSelector.jsx b/packages/layer-selector/src/LayerSelector.jsx
@@ -182,6 +182,16 @@ const LayerSelector = (props) => {
   const [managedLayers, setManagedLayers] = useState({});
   const selectorNode = useRef();
 
+  const [opacity, setOpacity] = useState(1);
+  useEffect(() => {
+    for (const layerId in managedLayers) {
+      const managedLayer = managedLayers[layerId];
+      if (managedLayer.layer) {
+        managedLayer.layer.opacity = opacity;
+      }
+    }
+  }, [managedLayers, opacity]);
+
   useEffect(() => {
     const managedLayersDraft = { ...managedLayers };
     const layerItems = layers.baseLayers.concat(layers.overlays);
@@ -204,7 +214,7 @@ const LayerSelector = (props) => {
           layerList = props.view.map.layers;
           break;
         default:
-          break;
+          throw new Error(`unknown layerType: ${layerItem.layerType}`);
       }
 
       if (layerItem.selected === false) {
@@ -374,7 +384,7 @@ const LayerSelector = (props) => {
       ) || [];
 
     // set visibility of linked layers to match
-    if (defaultSelection.linked && defaultSelection.linked.length > 0) {
+    if (defaultSelection?.linked && defaultSelection.linked.length > 0) {
       overlays.forEach((layer) => {
         if (defaultSelection.linked.includes(layer.id)) {
           layer.selected = true;
@@ -456,7 +466,9 @@ const LayerSelector = (props) => {
               key={index}
             />
           ))}
-          <hr className="layer-selector-separator" />
+          {layers.overlays.length ? (
+            <hr className="layer-selector-separator" />
+          ) : null}
           {layers.overlays.map((item) => (
             <LayerSelectorItem
               id={item.name || item.id || 'unknown'}
@@ -466,6 +478,21 @@ const LayerSelector = (props) => {
               key={item.id || item}
             />
           ))}
+          {props.showOpacitySlider ? (
+            <>
+              <hr className="layer-selector-separator" />
+              <input
+                type="range"
+                min="0"
+                max="100"
+                step="1"
+                value={opacity * 100}
+                onChange={(event) =>
+                  setOpacity(parseFloat(event.target.value) / 100.0)
+                }
+              />
+            </>
+          ) : null}
         </div>
       </ConditionalWrapper>
     </div>
@@ -538,11 +565,13 @@ LayerSelector.propTypes = {
   makeExpandable: PropTypes.bool,
   layerType: PropTypes.string,
   id: PropTypes.string,
+  showOpacitySlider: PropTypes.bool,
 };
 
 LayerSelector.defaultProps = {
   makeExpandable: true,
   position: 'top-right',
+  showOpacitySlider: false,
 };
 
 LayerSelectorItem.propTypes = {

diff --git a/packages/layer-selector/src/LayerSelector.stories.jsx b/packages/layer-selector/src/LayerSelector.stories.jsx
@@ -6,7 +6,12 @@ export default {
   component: LayerSelector,
 };
 const mapViewMock = {
-  map: {},
+  map: {
+    layers: [],
+    basemap: {
+      layers: [],
+    },
+  },
   when: () => {},
   ui: {
     add: () => {},
@@ -27,5 +32,6 @@ export const withoutExpandableContainer = () => (
     view={mapViewMock}
     quadWord="my-fake-quad-word"
     makeExpandable={false}
+    overlays={['Address Points']}
   ></LayerSelector>
 );
diff --git a/packages/layer-selector/src/LayerSelectorWithMap.stories.jsx b/packages/layer-selector/src/LayerSelectorWithMap.stories.jsx
@@ -15,7 +15,14 @@ export default {
   component: LayerSelector,
 };
 
-const WithMap = ({ center, zoom, scale, baseLayers, overlays }) => {
+const WithMap = ({
+  center,
+  zoom,
+  scale,
+  baseLayers,
+  overlays,
+  showOpacitySlider,
+}) => {
   const mapDiv = useRef();
   const [layerSelectorOptions, setLayerSelectorOptions] = useState();
 
@@ -39,11 +46,12 @@ const WithMap = ({ center, zoom, scale, baseLayers, overlays }) => {
           : ['Hybrid', 'Lite', 'Terrain', 'Topo', 'Color IR'],
         overlays: overlays ? overlays : ['Address Points'],
         position: 'top-right',
+        showOpacitySlider,
       });
     };
 
     initMap();
-  }, [zoom, center, scale, baseLayers, overlays]);
+  }, [zoom, center, scale, baseLayers, overlays, showOpacitySlider]);
 
   return (
     <div
@@ -62,6 +70,7 @@ WithMap.propTypes = {
   scale: PropTypes.number,
   baseLayers: PropTypes.array,
   overlays: PropTypes.array,
+  showOpacitySlider: PropTypes.bool,
 };
 
 export const zoom = () => <WithMap zoom={6} />;
@@ -159,3 +168,5 @@ export const landOwnership = () => {
 
   return <WithMap {...landOwnershipOptions} />;
 };
+
+export const opacitySlider = () => <WithMap showOpacitySlider zoom={6} />;
diff --git a/packages/layer-selector/src/__snapshots__/LayerSelector.test.jsx.snap b/packages/layer-selector/src/__snapshots__/LayerSelector.test.jsx.snap
@@ -80,9 +80,6 @@ exports[`LayerSelector tests > LayerSelector snapshot 1`] = `
               Color IR
             </label>
           </div>
-          <hr
-            class="layer-selector-separator"
-          />
         </div>
       </form>
     </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -80,9 +80,6 @@ exports[`LayerSelector tests > LayerSelector snapshot 1`] = ` @@
                   Color IR
                 </label>
               </div>
-              <hr
-                class="layer-selector-separator"
-              />
             </div>
           </form>
         </div>
@@ Expand Down @@