pass aspect ratio to fixedAspectRatio; remove printAreaDraw after printArea is defined

client/src/store/map.ts

@@ -25,9 +25,14 @@ import { transform } from 'ol/proj';
 import { applyTransformations, calculateTransformations, fixedAspectRatioBox, zoomToFeature } from '../components/map/mapUtils';
 import { setCurrentObjectId, setSelectedRegion } from './objects';
 import View from 'ol/View';
+import { getPrintOrientation } from './print';
 
 export type Mode = 'edit' | 'view' | 'print'
 
+export type PrintScale = '500' | '250' | '50' | '25' | '10'
+
+export type PrintOrientation = 'horizontal' | 'vertical'
+
 interface MapState {
     id: Record<string, {
         currentTool: ToolType;
@@ -77,11 +82,17 @@ interface MapState {
         overlayLayer: VectorLayer;
         regionSelect: Select;
         lineSelect: Select;
+        previousView: View | undefined | null;
         printArea: Extent | null;
         printLayer: VectorLayer;
         printSource: VectorSource;
         printAreaDraw: Draw;
         printPreviewSize: number[];
+        printDim: 'a0' | 'a1' | 'a2' | 'a3' | 'a4' | 'a5';
+        printRes: number;
+        printOrientation: PrintOrientation;
+        printScale: PrintScale;
+        printScaleLine: boolean;
     }>;
 }
 
@@ -224,7 +235,22 @@ export const initializeMapState = (
         const printAreaDraw = new Draw({
             source: printSource,
             type: 'Circle',
-            geometryFunction: fixedAspectRatioBox
+            style: (feature) => {
+                return new Style({
+                    fill: new Fill({
+                        color: "rgba(0, 0, 255, 0.3)", // Semi-transparent blue fill
+                    }),
+                    stroke: new Stroke({
+                        color: "blue",
+                        width: 2,
+                    }),
+                    image: undefined, // 🚀 This removes the default point!
+                });
+            },
+            geometryFunction: function (coords, geom) {
+                const printOrientation = getPrintOrientation()
+                return fixedAspectRatioBox(coords, geom, printOrientation)
+            },
         })
 
         printAreaDraw.on('drawend', (e) => {
@@ -396,17 +422,59 @@ export const initializeMapState = (
                     overlayLayer: overlayLayer,
                     regionSelect: regionSelect,
                     lineSelect: lineSelect,
+                    previousView: null,
                     printArea: null,
                     printLayer: printLayer,
                     printSource: printSource,
                     printAreaDraw: printAreaDraw,
-                    printPreviewSize: [640, 320]
+                    printPreviewSize: [640, 320],
+                    printDim: 'a4',
+                    printOrientation: 'horizontal',
+                    printRes: 72,
+                    printScale: '250',
+                    printScaleLine: true
                 }
             }
         }
     })
 }
 
+export const setPrintOrientation = (id: string, orientation: PrintOrientation) => useMapStore.setState((state) => {
+    return {
+        id: {
+            ...state.id,
+            [id]: { ...state.id[id], printOrientation: orientation }
+        }
+    }
+})
+
+export const setPrintScaleLine = (id: string, bool: boolean) => useMapStore.setState((state) => {
+    return {
+        id: {
+            ...state.id,
+            [id]: { ...state.id[id], printScaleLine: bool }
+        }
+    }
+})
+
+export const setPrintScale = (id: string, printScale: PrintScale) => useMapStore.setState((state) => {
+    return {
+        id: {
+            ...state.id,
+            [id]: { ...state.id[id], printScale: printScale }
+        }
+    }
+})
+
+export const setPreviousView = (id: string, view: View | undefined | null) => useMapStore.setState((state) => {
+    return {
+        id: {
+            ...state.id,
+            [id]: { ...state.id[id], previousView: view }
+        }
+    }
+})
+
 export const clearPrintArea = (id: string) => useMapStore.setState((state) => {
     state.id[id].printSource.clear()
 

client/src/store/print.ts

@@ -0,0 +1,23 @@
+import { create } from 'zustand';
+
+export type PrintOrientation = 'horizontal' | 'vertical'
+
+export type PrintFormat = 'a0' | 'a1' | 'a2' | 'a3' | 'a4' | 'a5'
+export const printResolutions = ['72', '150', '200', '300']
+
+export interface PrintState {
+    printFormat: PrintFormat;
+    printOrientation: PrintOrientation;
+    printResolution: number;
+}
+
+export const usePrintStore = create<PrintState>(() => ({
+    printFormat: 'a4',
+    printOrientation: 'horizontal',
+    printResolution: 72
+}))
+
+export const getPrintOrientation = () => usePrintStore.getState().printOrientation
+export const setPrintFormat = (format: PrintFormat) => usePrintStore.setState(() => ({ printFormat: format }))
+export const setPrintOrientation = (orientation: PrintOrientation) => usePrintStore.setState(() => ({ printOrientation: orientation }))
+export const setPrintResolution = (resolution: number) => usePrintStore.setState(() => ({ printResolution: resolution }))