Make it possible to specify a printRenderMode for better labeling in …

…print Closes: origo-map#1537
sweco-sedalh · Jun 16, 2022 · 0f6b91b · 0f6b91b
1 parent 60fddac
commit 0f6b91b
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 32 deletions.
diff --git a/src/controls/legend/overlay.js b/src/controls/legend/overlay.js
@@ -253,14 +253,16 @@ const OverlayLayer = function OverlayLayer(options) {
   buttons.push(moreInfoButton);
   const ButtonsHtml = `${layerIcon.render()}${label.render()}${toggleButton.render()}${moreInfoButton.render()}`;
 
-  const removeOverlayMenuItem = function removeListeners() {
-    const popupMenuListEl = document.getElementById(popupMenuList.getId());
-    if (popupMenuListEl) { popupMenuListEl.remove(); }
+  const removeOverlayMenuItem = function removeOverlayMenuItem() {
+    const popupMenuListEl = popupMenuList.getEl();
+    if (popupMenuListEl) {
+      popupMenuListEl.remove();
+    }
   };
 
   const onRemove = function onRemove() {
     removeOverlayMenuItem();
-    const el = document.getElementById(this.getId());
+    const el = this.getEl();
     el.remove();
   };
 

diff --git a/src/controls/legend/overlays.js b/src/controls/legend/overlays.js
@@ -206,14 +206,12 @@ const Overlays = function Overlays(options) {
     const layer = evt.element;
     const layerName = layer.get('name');
     const groupName = layer.get('group');
-    if (groupName) {
-      const groupCmp = groupCmps.find((cmp) => cmp.name === groupName);
-      if (groupCmp) {
+    const groupCmp = groupCmps.find((cmp) => cmp.name === groupName);
+    if (groupName && groupCmp) {
         groupCmp.removeOverlay(layerName);
         if (emptyGroupCheck(groupName)) {
           document.getElementById(groupCmp.getId()).classList.add('hidden');
         }
-      }
     } else {
       rootGroup.removeOverlay(layerName);
     }

diff --git a/src/controls/print/print-component.js b/src/controls/print/print-component.js
@@ -463,6 +463,7 @@ const PrintComponent = function PrintComponent(options = {}) {
         printResize.resetLayers();
         printResize.setResolution(150);
       }
+
       // Restore monkey patch
       // WORKAROUND: Remove when OL supports transform: scale
       // See https://github.com/openlayers/openlayers/issues/13283
@@ -487,13 +488,23 @@ const PrintComponent = function PrintComponent(options = {}) {
       if (map.getView().getRotation() !== 0) {
         map.getView().setRotation(0);
       }
-      const printElement = document.getElementById(this.getId());
       map.setTarget(viewerMapTarget);
       if (printInteractionToggle) {
         printInteractionToggle.restoreInteractions();
       }
       this.restoreViewerControls();
-      printElement.remove();
+      this.getEl().remove();
+
+      // GH-1537: remove layers temporarily added for print and unhide layers hidden for print
+      for (const layer of viewer.getLayersByProperty("added-for-print", true)) {
+        viewer.removeLayer(layer);
+      }
+      for (const layer of viewer.getLayersByProperty("hidden-for-print", true)) {
+        layer.setVisible(true);
+        layer.unset("hidden-for-print");
+      }
+      // FIXME: attempt to fix rendering after exiting print; doesn't work
+      viewer.getMap().renderSync();
     },
     async downloadPNG() {
       await withLoading(() => downloadPNG({
@@ -567,6 +578,28 @@ const PrintComponent = function PrintComponent(options = {}) {
       map.setTarget(printMapComponent.getId());
       this.removeViewerControls();
       await printMapComponent.addPrintControls();
+
+      // GH-1537: temporarily add layers for print and hide their original versions
+      for (const layer of viewer.getLayersByProperty("printRenderMode", "image")) {
+        if (layer.getVisible() && !layer.get("added-for-print") && !layer.get("hidden-for-print")) {
+          // hide the original, tiled, layer
+          layer.setVisible(false);
+          layer.set("hidden-for-print", true);
+
+          // create a duplicate of the layer with a different renderMode
+          const { map, type, name, sourceName, ...properties } = layer.getProperties();
+          const newLayer = viewer.addLayer({
+            ...properties,
+            source: sourceName,
+            renderMode: "image",
+            type: type === "AGS_TILE" ? "AGS_MAP" : type,
+            name: name + "-forPrint",
+            visible: true
+          }, layer);
+          newLayer.set("added-for-print", true);
+        }
+      }
+
       if (!supressResolutionsRecalculation) {
         updateResolutions();
       }

diff --git a/src/map.js b/src/map.js
@@ -2,16 +2,13 @@ import OlMap from 'ol/Map';
 import OlView from 'ol/View';
 import mapInteractions from './mapinteractions';
 
-const Map = (options = {}) => {
-  const interactions = mapInteractions({ target: options.target, mapInteractions: options.pageSettings && options.pageSettings.mapInteractions ? options.pageSettings.mapInteractions : {} });
-  const mapOptions = Object.assign(options, { interactions });
-  delete mapOptions.layers;
-  mapOptions.controls = [];
-
-  const view = new OlView(options);
-  const map = new OlMap(Object.assign(mapOptions, { view }));
-
-  return map;
-};
-
-export default Map;
+export default class Map extends OlMap {
+  constructor(options = {}) {
+    const interactions = mapInteractions({ target: options.target, mapInteractions: options.pageSettings && options.pageSettings.mapInteractions ? options.pageSettings.mapInteractions : {} });
+    const mapOptions = { ...options, interactions, controls: [] };
+    delete mapOptions.layers;
+
+    const view = new OlView(options);
+    super({...mapOptions, view });
+  }
+}
diff --git a/src/ui/component.js b/src/ui/component.js
@@ -61,8 +61,11 @@ class Base {
   }
 
   getComponents() { return this.components; }
+
   getId() { return this.id; }
 
+  getEl() { return document.getElementById(this.id); }
+
   /**
    * This method can be used inside of component `render` functions for tagged template literals.
    *

diff --git a/src/viewer.js b/src/viewer.js
@@ -19,6 +19,7 @@ import isEmbedded from './utils/isembedded';
 import permalink from './permalink/permalink';
 
 const Viewer = function Viewer(targetOption, options = {}) {
+  /** @type Map */
   let map;
   let tileGrid;
   let featureinfo;
@@ -189,7 +190,15 @@ const Viewer = function Viewer(targetOption, options = {}) {
 
   const getLayers = () => map.getLayers().getArray();
 
-  const getLayersByProperty = function getLayersByProperty(key, val, byName) {
+  /**
+   * Returns layers that match a given property value
+   *
+   * @param {string} key
+   * @param {any} val
+   * @param {boolean} byName - Only returns layer names if true
+   * @returns {import("ol/layer/Base").default[]|string[]}
+   */
+  const getLayersByProperty = function getLayersByProperty(key, val, byName = false) {
     const layers = map.getLayers().getArray().filter(layer => layer.get(key) && layer.get(key) === val);
 
     if (byName) {
@@ -211,13 +220,11 @@ const Viewer = function Viewer(targetOption, options = {}) {
   };
 
   const getQueryableLayers = function getQueryableLayers() {
-    const queryableLayers = getLayers().filter(layer => layer.get('queryable') && layer.getVisible());
-    return queryableLayers;
+    return getLayers().filter(layer => layer.get('queryable') && layer.getVisible());
   };
 
   const getGroupLayers = function getGroupLayers() {
-    const groupLayers = getLayers().filter(layer => layer.get('type') === 'GROUP');
-    return groupLayers;
+    return getLayers().filter(layer => layer.get('type') === 'GROUP');
   };
 
   const getSearchableLayers = function getSearchableLayers(searchableDefault) {
@@ -356,6 +363,7 @@ const Viewer = function Viewer(targetOption, options = {}) {
     }
   };
 
+  /** @param {Map} newMap */
   const setMap = function setMap(newMap) {
     map = newMap;
   };
@@ -387,13 +395,23 @@ const Viewer = function Viewer(targetOption, options = {}) {
     }
   };
 
-  const addLayer = function addLayer(layerProps) {
+  const addLayer = function addLayer(layerProps, insertBefore) {
     const layer = Layer(layerProps, this);
     addLayerStylePicker(layerProps);
-    map.addLayer(layer);
-    this.dispatch('addlayer', {
+    if (insertBefore) {
+      map.getLayers().insertAt(map.getLayers().getArray().indexOf(insertBefore), layer);
+    } else {
+      map.addLayer(layer);
+    }
+    this.dispatch('add:layer', {
       layerName: layerProps.name
     });
+    return layer;
+  };
+
+  const removeLayer = function removeLayer(layer) {
+    this.dispatch("remove:layer", { layerName: layer.get("name") });
+    map.removeLayer(layer);
   };
 
   const addLayers = function addLayers(layersProps) {
@@ -483,7 +501,7 @@ const Viewer = function Viewer(targetOption, options = {}) {
 
       tileGrid = maputils.tileGrid(tileGridSettings);
 
-      setMap(Map(Object.assign(options, { projection, center, zoom, target: this.getId() })));
+      setMap(new Map({ ...options, projection, center, zoom, target: this.getId() }));
 
       mergeSavedLayerProps(layerOptions, urlParams.layers)
         .then(layerProps => {
@@ -636,6 +654,7 @@ const Viewer = function Viewer(targetOption, options = {}) {
     getUrlParams,
     getViewerOptions,
     removeGroup,
+    removeLayer,
     removeOverlays,
     setStyle,
     zoomToExtent,