Report test; Map printing test

client/src/store/map.ts

@@ -22,11 +22,11 @@ import { click, pointerMove } from 'ol/events/condition';
 import { measureStyleFunction, modifyStyle } from '../components/map/Measure/MeasureStyles';
 import MapBrowserEvent from 'ol/MapBrowserEvent';
 import { transform } from 'ol/proj';
-import { applyTransformations, calculateTransformations, zoomToFeature } from '../components/map/mapUtils';
+import { applyTransformations, calculateTransformations, fixedAspectRatioBox, zoomToFeature } from '../components/map/mapUtils';
 import { setCurrentObjectId, setSelectedRegion } from './objects';
 import View from 'ol/View';
 
-export type Mode = 'edit' | 'view'
+export type Mode = 'edit' | 'view' | 'print'
 
 interface MapState {
     id: Record<string, {
@@ -77,6 +77,11 @@ interface MapState {
         overlayLayer: VectorLayer;
         regionSelect: Select;
         lineSelect: Select;
+        printArea: Extent | null;
+        printLayer: VectorLayer;
+        printSource: VectorSource;
+        printAreaDraw: Draw;
+        printPreviewSize: number[];
     }>;
 }
 
@@ -206,6 +211,24 @@ export const initializeMapState = (
 
         const alignModeLayer = new VectorLayer({ source: new VectorSource(), properties: { id: uuidv4(), type: 'align', name: 'Подгонка' } })
 
+
+        const printSource = new VectorSource()
+        const printLayer = new VectorLayer({
+            source: printSource
+        })
+        const printAreaDraw = new Draw({
+            source: printSource,
+            type: 'Circle',
+            geometryFunction: fixedAspectRatioBox
+        })
+
+        printAreaDraw.on('drawend', (e) => {
+            const extent = e.feature.getGeometry()?.getExtent()
+            if (extent) {
+                setPrintArea(id, extent)
+            }
+        })
+
         const map = new Map({
             controls: [],
             layers: [
@@ -222,7 +245,8 @@ export const initializeMapState = (
                 overlayLayer,
                 nodeLayer,
                 measureLayer,
-                alignModeLayer
+                alignModeLayer,
+                printLayer
             ]
         })
 
@@ -364,13 +388,38 @@ export const initializeMapState = (
                     nodeLayer: nodeLayer,
                     overlayLayer: overlayLayer,
                     regionSelect: regionSelect,
-                    lineSelect: lineSelect
+                    lineSelect: lineSelect,
+                    printArea: null,
+                    printLayer: printLayer,
+                    printSource: printSource,
+                    printAreaDraw: printAreaDraw,
+                    printPreviewSize: [640, 320]
                 }
             }
         }
     })
 }
 
+export const clearPrintArea = (id: string) => useMapStore.setState((state) => {
+    state.id[id].printSource.clear()
+
+    return {
+        id: {
+            ...state.id,
+            [id]: { ...state.id[id], printArea: null }
+        }
+    }
+})
+
+export const setPrintArea = (id: string, extent: Extent | null) => useMapStore.setState((state) => {
+    return {
+        id: {
+            ...state.id,
+            [id]: { ...state.id[id], printArea: extent }
+        }
+    }
+})
+
 export const getFiguresLayer = (id: string) => useMapStore.getState().id[id].figuresLayer
 export const getLinesLayer = (id: string) => useMapStore.getState().id[id].linesLayer
 export const getMeasureModify = (id: string) => useMapStore.getState().id[id].measureModify