feat: generates a new permalink whenever a layer is added

terrestris · Sep 28, 2022 · 17717fe · 17717fe
1 parent 28a5673
commit 17717fe
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 57 deletions.
diff --git a/src/bootstrap.tsx b/src/bootstrap.tsx
@@ -286,19 +286,13 @@ const setupSHOGunMap = async (application: Application) => {
 
   view.setConstrainResolution(true);
 
-  const processLayerGroup = new OlLayerGroup({
-    layers: []
-  });
-  processLayerGroup.set('name', i18n.t('BasicMapComponent.processedLayersFolder'));
-  processLayerGroup.setVisible(false);
-
   const externalWmsLayerGroup = new OlLayerGroup({
     layers: []
   });
   externalWmsLayerGroup.set('name', i18n.t('AddLayerModal.externalWmsFolder'));
   externalWmsLayerGroup.setVisible(false);
 
-  layers?.getLayers().extend([processLayerGroup, externalWmsLayerGroup]);
+  layers?.getLayers().extend([externalWmsLayerGroup]);
 
   return new OlMap({
     view,
@@ -331,11 +325,12 @@ const setupDefaultMap = () => {
     hoverable: true
   });
 
-  const processLayerGroup = new OlLayerGroup({
+  const externalLayerGroup = new OlLayerGroup({
     layers: []
   });
-  processLayerGroup.set('name', i18n.t('BasicMapComponent.processedLayersFolder'));
-  processLayerGroup.setVisible(false);
+  externalLayerGroup.set('name', i18n.t('AddLayerModal.externalWmsFolder'));
+  externalLayerGroup.set('isGroupForImportedLayers', true);
+  externalLayerGroup.setVisible(false);
 
   const eoLayerGroup = new OlLayerGroup({
     layers: [temperatureLayer]
@@ -354,7 +349,7 @@ const setupDefaultMap = () => {
       center: center,
       zoom: 0
     }),
-    layers: [backgroundLayerGroup, eoLayerGroup, processLayerGroup],
+    layers: [backgroundLayerGroup, eoLayerGroup, externalLayerGroup],
     controls: OlControlDefaults({
       zoom: false
     })

diff --git a/src/components/AddLayerModal/index.tsx b/src/components/AddLayerModal/index.tsx
@@ -118,6 +118,7 @@ export const AddLayerModal: React.FC<AddLayerModalProps> = ({
     layersToAdd.forEach(layerToAdd => {
       if (!targetGroup.getLayers().getArray().includes(layerToAdd)) {
         layerToAdd.set('isExternalLayer', true);
+        layerToAdd.set('isImported', true);
         const layerUrl = layerToAdd instanceof TileLayer || layerToAdd instanceof ImageLayer ? layerToAdd.getSource().getUrl() : '';
 
         const layerConfig = {

diff --git a/src/components/BasicMapComponent/index.tsx b/src/components/BasicMapComponent/index.tsx
@@ -53,10 +53,8 @@ export const BasicMapComponent: React.FC<Partial<MapComponentProps>> = ({
     if (!map) {
       return;
     }
-    const processedFolderName = t('BasicMapComponent.processedLayersFolder');
-    const processedLayerGroup = MapUtil.getLayerByName(map, processedFolderName) as LayerGroup;
-    const externalFolderName = t('AddLayerModal.externalWmsFolder');
-    const externalLayerGroup = MapUtil.getLayerByName(map, externalFolderName) as LayerGroup;
+
+    const externalLayerGroup = MapUtil.getLayerByName(map, t('AddLayerModal.externalWmsFolder')) as LayerGroup;
 
     try {
       const config = JSON.parse(configString);
@@ -76,9 +74,14 @@ export const BasicMapComponent: React.FC<Partial<MapComponentProps>> = ({
           if (cfg.isExternalLayer) {
             externalLayerGroup.getLayers().extend([olLayer]);
             externalLayerGroup.setVisible(true);
-          } else if (cfg.isProcessedLayer) {
-            processedLayerGroup.getLayers().extend([olLayer]);
-            processedLayerGroup.setVisible(true);
+          } else {
+            const customFolderName = cfg.groupName;
+            const customLayerGroup = MapUtil.getLayerByName(map, customFolderName) as LayerGroup;
+
+            if (customLayerGroup) {
+              customLayerGroup.getLayers().extend([olLayer]);
+              customLayerGroup.setVisible(true);
+            }
           }
         }
       }

diff --git a/src/components/Permalink/index.tsx b/src/components/Permalink/index.tsx
@@ -26,7 +26,6 @@ import {
   useTranslation
 } from 'react-i18next';
 
-import MapUtil from '@terrestris/ol-util/dist/MapUtil/MapUtil';
 import PermalinkUtil from '@terrestris/ol-util/dist/PermalinkUtil/PermalinkUtil';
 
 import {
@@ -41,7 +40,7 @@ export interface PermalinkProps extends Partial<DefaultPermalinkProps> { }
 
 export const Permalink: React.FC<PermalinkProps> = () => {
   const map = useMap();
-  const layerAttributes = useMemo(() => ['layerConfig', 'isProcessedLayer', 'isExternalLayer'], []);
+  const layerAttributes = useMemo(() => ['layerConfig', 'isExternalLayer', 'groupName'], []);
   const {
     t
   } = useTranslation();
@@ -78,15 +77,17 @@ export const Permalink: React.FC<PermalinkProps> = () => {
     };
 
     const filterFunctionForLayers = (l: BaseLayer) => (l instanceof TileLayer || l instanceof ImageLayer);
-    const updateLayersInPermalink = () => setPermalink(
-      PermalinkUtil.getLink(
-        map,
-        ';',
-        identifierFunction,
-        filterFunctionForLayers,
-        layerAttributes
-      )
-    );
+    const updateLayersInPermalink = () => {
+      setPermalink(
+        PermalinkUtil.getLink(
+          map,
+          ';',
+          identifierFunction,
+          filterFunctionForLayers,
+          layerAttributes
+        )
+      );
+    };
 
     const registerLayerCallback = (layerGroup: LayerGroup) => {
       const layersInGroup = layerGroup.getLayers().getArray();
@@ -102,31 +103,24 @@ export const Permalink: React.FC<PermalinkProps> = () => {
       }
     };
 
-    let mapLayerGroup = map.getLayerGroup();
-
-    const externalLayerGroupName = t('AddLayerModal.externalWmsFolder');
-    const externalLayerGroup = MapUtil.getLayerByName(map, externalLayerGroupName) as LayerGroup;
+    const layerGroups = map.getLayers().getArray().filter((l) => l.get('isGroupForImportedLayers'));
+    layerGroups.forEach((layerGroup) => {
+      // @ts-ignore
+      eventKeys.push(layerGroup.getLayers().on('add', updateLayersInPermalink));
+      // @ts-ignore
+      eventKeys.push(layerGroup.getLayers().on('remove', updateLayersInPermalink));
 
-    const processedLayerGroupName = t('BasicMapComponent.processedLayersFolder');
-    const processedLayerGroup = MapUtil.getLayerByName(map, processedLayerGroupName) as LayerGroup;
-
-    const externalLayerGroupAddListener = externalLayerGroup.getLayers().on('add', updateLayersInPermalink);
-    const externalLayerGroupRemoveListener = externalLayerGroup.getLayers().on('remove', updateLayersInPermalink);
-    const processedLayerGroupAddListener = processedLayerGroup.getLayers().on('add', updateLayersInPermalink);
-    const processedLayerGroupRemoveListener = processedLayerGroup.getLayers().on('remove', updateLayersInPermalink);
+    })
 
     const listenerKeyCenter = map.getView().on('change:center', updatePermalink);
     const listenerKeyResolution = map.getView().on('change:resolution', updatePermalink);
 
+    let mapLayerGroup = map.getLayerGroup();
     registerLayerCallback(mapLayerGroup);
 
     return () => {
       unByKey(listenerKeyCenter);
       unByKey(listenerKeyResolution);
-      unByKey(externalLayerGroupAddListener);
-      unByKey(externalLayerGroupRemoveListener);
-      unByKey(processedLayerGroupAddListener);
-      unByKey(processedLayerGroupRemoveListener);
       unByKey(eventKeys);
     };
   }, [layerAttributes, map, t]);

diff --git a/src/components/ToolMenu/LayerTree/index.tsx b/src/components/ToolMenu/LayerTree/index.tsx
@@ -9,7 +9,6 @@ import OlBaseLayer from 'ol/layer/Base';
 import OlLayerGroup from 'ol/layer/Group';
 import OlLayer from 'ol/layer/Layer';
 import OlSource from 'ol/source/Source';
-import OlSourceVector from 'ol/source/Vector';
 
 import {
   useTranslation
@@ -46,23 +45,17 @@ export const LayerTree: React.FC<LayerTreeProps> = ({
   const [visibleLegendsIds, setVisibleLegendsIds] = useState<string[]>([]);
 
   const treeFilterFunction = (layer: OlLayer<OlSource> | OlLayerGroup) => {
-    if (layer instanceof OlLayerGroup && !layer.getVisible() && layer.getLayers().getLength() === 0) {
-      return false;
-    }
-
-    if (layer.get('name') === 'react-geo_digitize') {
-      return false;
-    }
 
-    if (layer instanceof OlLayerGroup) {
+    // @ts-ignore
+    if (layer.getLayers) {
       return !layer.get('hideInLayerTree');
     }
 
-    if (layer.getSource && layer.getSource() instanceof OlSourceVector) {
+    // @ts-ignore
+    if (layer.getSource && layer.getSource().forEachFeature) {
       return false;
     }
-
-    return !layer.get('isBackgroundLayer') && !(layer.getSource && layer.getSource() instanceof OlSourceVector);
+    return true;
   };
 
   const treeNodeTitleRenderer = (layer: OlBaseLayer) => {
@@ -75,7 +68,8 @@ export const LayerTree: React.FC<LayerTreeProps> = ({
     const resolution = mapView.getResolution();
     const scale = resolution ? MapUtil.getScaleForResolution(resolution, unit) : undefined;
 
-    if (layer instanceof OlLayerGroup) {
+    // @ts-ignore
+    if (layer.getLayers) {
       return (
         <div>
           {layer.get('name')}