diff --git a/src/modules/map/components/openlayers/utils/printConstants.js b/src/modules/map/components/openlayers/utils/printConstants.js deleted file mode 100644 index b83e1b842..000000000 --- a/src/modules/map/components/openlayers/utils/printConstants.js +++ /dev/null @@ -1,6 +0,0 @@ -/** - * The name of the OpenLayer layer that is used to render the print area. - * - * @type {String} - */ -export const PRINT_AREA_LAYER_ID = 'printAreaLayer' diff --git a/src/modules/map/components/openlayers/utils/usePrint.composable.js b/src/modules/map/components/openlayers/utils/usePrint.composable.js index 2e060d7a7..438b52265 100644 --- a/src/modules/map/components/openlayers/utils/usePrint.composable.js +++ b/src/modules/map/components/openlayers/utils/usePrint.composable.js @@ -6,8 +6,6 @@ import { getGenerateQRCodeUrl } from '@/api/qrcode.api.js' import { createShortLink } from '@/api/shortlink.api.js' import log from '@/utils/logging' -import { PRINT_AREA_LAYER_ID } from './printConstants' - const dispatcher = { dispatcher: 'usePrint.composable' } /** @enum */ @@ -81,7 +79,6 @@ export function usePrint(map) { lang: store.state.i18n.lang, printGrid: printGrid, projection: store.state.position.projection, - excludedLayerIDs: [PRINT_AREA_LAYER_ID], dpi: store.getters.selectedDPI, }) currentJobReference.value = printJob.ref diff --git a/src/modules/map/components/openlayers/utils/usePrintAreaRenderer.composable.js b/src/modules/map/components/openlayers/utils/usePrintAreaRenderer.composable.js index 0149b30e1..30b0cb336 100644 --- a/src/modules/map/components/openlayers/utils/usePrintAreaRenderer.composable.js +++ b/src/modules/map/components/openlayers/utils/usePrintAreaRenderer.composable.js @@ -1,51 +1,12 @@ -import { Feature } from 'ol' -import { Polygon } from 'ol/geom' import * as olHas from 'ol/has' -import VectorLayer from 'ol/layer/Vector' -import VectorSource from 'ol/source/Vector' -import { Fill, Style } from 'ol/style' +import { getRenderPixel } from 'ol/render' import { computed, watch } from 'vue' import { useStore } from 'vuex' import log from '@/utils/logging' -import { PRINT_AREA_LAYER_ID } from './printConstants' - const dispatcher = { dispatcher: 'print-area-renderer.composable' } -function createWorldPolygon() { - // Create a polygon feature covering the whole world in EPSG:4326 - const worldPolygon = new Feature({ - geometry: new Polygon([ - [ - [-180, -90], // Bottom-left corner - [180, -90], // Bottom-right corner - [180, 90], // Top-right corner - [-180, 90], // Top-left corner - [-180, -90], // Bottom-left corner - ], - ]).transform('EPSG:4326', 'EPSG:3857'), - }) - - // Define a transparent style for the polygon - const transparentStyle = new Style({ - fill: new Fill({ - color: 'rgba(255, 255, 255, 0)', - }), - }) - - // Create a VectorLayer outside the map creation - const vectorLayer = new VectorLayer({ - source: new VectorSource({ - features: [worldPolygon], - }), - style: transparentStyle, - id: PRINT_AREA_LAYER_ID, - zIndex: Infinity, // Make sure the print area is always on top - }) - return vectorLayer -} - export default function usePrintAreaRenderer(map) { const store = useStore() @@ -53,7 +14,6 @@ export default function usePrintAreaRenderer(map) { const POINTS_PER_INCH = 72 // PostScript points 1/72" const MM_PER_INCHES = 25.4 const UNITS_RATIO = 39.37 // inches per meter - let worldPolygon = null let printRectangle = [] const isActive = computed(() => store.state.print.printSectionShown) @@ -63,7 +23,6 @@ export default function usePrintAreaRenderer(map) { const mapWidth = computed(() => store.state.ui.width) // Same here for simplicity we take the screen size minus the header size for the map size const mapHeight = computed(() => store.state.ui.height - store.state.ui.headerHeight) - const headerHeight = computed(() => store.state.ui.headerHeight) watch(isActive, (newValue) => { if (newValue) { @@ -74,13 +33,9 @@ export default function usePrintAreaRenderer(map) { }) function activatePrintArea() { - if (!worldPolygon) { - worldPolygon = createWorldPolygon() - } - map.addLayer(worldPolygon) deregister = [ - worldPolygon.on('prerender', handlePreRender), - worldPolygon.on('postrender', handlePostRender), + map.getAllLayers()[0].on('prerender', handlePreRender), + map.getAllLayers()[0].on('postrender', handlePostRender), watch(printLayoutSize, async () => { await store.dispatch('setSelectedScale', { scale: getOptimalScale(), @@ -104,7 +59,6 @@ export default function usePrintAreaRenderer(map) { } function deactivatePrintArea() { - map.removeLayer(worldPolygon) while (deregister.length > 0) { const item = deregister.pop() if (typeof item === 'function') { @@ -141,11 +95,9 @@ export default function usePrintAreaRenderer(map) { ] const minx = center[0] - w / 2 - // here we move the center down due to the header that overlap the map - const miny = center[1] - h / 2 + headerHeight.value + const miny = center[1] - h / 2 const maxx = center[0] + w / 2 - // here we move the center down due to the header that overlap the map - const maxy = center[1] + h / 2 + headerHeight.value + const maxy = center[1] + h / 2 return [minx, miny, maxx, maxy] } @@ -170,20 +122,19 @@ export default function usePrintAreaRenderer(map) { context.save() context.beginPath() + // Outside polygon, must be clockwise - context.moveTo(0, 0) - context.lineTo(width, 0) - context.lineTo(width, height) - context.lineTo(0, height) - context.lineTo(0, 0) - context.closePath() + context.moveTo(...getRenderPixel(event, [0, 0])) + context.lineTo(...getRenderPixel(event, [width, 0])) + context.lineTo(...getRenderPixel(event, [width, height])) + context.lineTo(...getRenderPixel(event, [0, height])) + + // Inner polygon, must be counter-clockwise + context.moveTo(...getRenderPixel(event, [minx, miny])) + context.lineTo(...getRenderPixel(event, [minx, maxy])) + context.lineTo(...getRenderPixel(event, [maxx, maxy])) + context.lineTo(...getRenderPixel(event, [maxx, miny])) - // Inner polygon,must be counter-clockwise - context.moveTo(minx, miny) - context.lineTo(minx, maxy) - context.lineTo(maxx, maxy) - context.lineTo(maxx, miny) - context.lineTo(minx, miny) context.closePath() context.fillStyle = 'rgba(0, 5, 25, 0.75)' diff --git a/src/modules/map/components/toolbox/Toggle3dButton.vue b/src/modules/map/components/toolbox/Toggle3dButton.vue index 03e3d99cd..354ff24de 100644 --- a/src/modules/map/components/toolbox/Toggle3dButton.vue +++ b/src/modules/map/components/toolbox/Toggle3dButton.vue @@ -48,6 +48,8 @@ function checkWebGlSupport() { function toggle3d() { if (webGlIsSupported.value && !showDrawingOverlay.value) { store.dispatch('set3dActive', { active: !isActive.value, ...dispatcher }) + // Hide print section when 3D is activated + store.dispatch('setPrintSectionShown', { show: false, ...dispatcher }) } }