Skip to content

Commit

Permalink
Make it possible to specify a printRenderMode for better labeling in …
Browse files Browse the repository at this point in the history
…print

Closes: #1537
  • Loading branch information
sweco-sedalh committed Jun 20, 2022
1 parent c311381 commit ce6c91c
Show file tree
Hide file tree
Showing 6 changed files with 84 additions and 32 deletions.
10 changes: 6 additions & 4 deletions src/controls/legend/overlay.js
Original file line number Diff line number Diff line change
Expand Up @@ -290,14 +290,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();
};

Expand Down
6 changes: 2 additions & 4 deletions src/controls/legend/overlays.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down
37 changes: 35 additions & 2 deletions src/controls/print/print-component.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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({
Expand Down Expand Up @@ -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();
}
Expand Down
23 changes: 10 additions & 13 deletions src/map.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 });
}
}
3 changes: 3 additions & 0 deletions src/ui/component.js
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*
Expand Down
37 changes: 28 additions & 9 deletions src/viewer.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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) {
Expand All @@ -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) {
Expand Down Expand Up @@ -356,6 +363,7 @@ const Viewer = function Viewer(targetOption, options = {}) {
}
};

/** @param {Map} newMap */
const setMap = function setMap(newMap) {
map = newMap;
};
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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 => {
Expand Down Expand Up @@ -636,6 +654,7 @@ const Viewer = function Viewer(targetOption, options = {}) {
getUrlParams,
getViewerOptions,
removeGroup,
removeLayer,
removeOverlays,
setStyle,
zoomToExtent,
Expand Down

0 comments on commit ce6c91c

Please sign in to comment.