MapComponent update

client/src/components/map/mapUtils.ts

@@ -18,22 +18,22 @@ import { uploadCoordinates } from "../../actions/map";
 import { ImageStatic } from "ol/source";
 import ImageLayer from "ol/layer/Image";
 import { IFigure, ILine } from "../../interfaces/gis";
-import { fromCircle } from "ol/geom/Polygon";
+import { fromCircle, fromExtent } from "ol/geom/Polygon";
 import { measureStyleFunction, modifyStyle } from "./Measure/MeasureStyles";
 import { getCurrentTool, getMeasureClearPrevious, getMeasureType, getTipPoint, setStatusText } from "../../store/map";
 import { MutableRefObject } from "react";
-import { setSelectedRegion } from "../../store/objects";
+import { getSelectedCity, getSelectedYear, setSelectedRegion } from "../../store/objects";
 
 export function processLine(
     line: ILine,
-    scaling: { w: number, h: number },
+    scaling: number,
     mapCenter: Coordinate,
     linesLayer: MutableRefObject<VectorLayer<VectorSource>>
 ) {
-    const x1 = line.x1 * scaling.w
-    const y1 = line.y1 * scaling.h
-    const x2 = line.x2 * scaling.w
-    const y2 = line.y2 * scaling.h
+    const x1 = line.x1 * scaling
+    const y1 = line.y1 * scaling
+    const x2 = line.x2 * scaling
+    const y2 = line.y2 * scaling
 
     const center = [mapCenter[0], mapCenter[1]]
 
@@ -44,7 +44,9 @@ export function processLine(
 
     const feature = new Feature(new LineString(testCoords))
     feature.setStyle(styleFunction(feature))
+
     feature.set('type', line.type)
+    feature.set('geometry_type', 'line')
     feature.set('planning', line.planning)
     feature.set('object_id', line.object_id)
 
@@ -53,16 +55,16 @@ export function processLine(
 
 export function processFigure(
     figure: IFigure,
-    scaling: { w: number, h: number },
+    scaling: number,
     mapCenter: Coordinate,
     figuresLayer: MutableRefObject<VectorLayer<VectorSource>>
 ) {
     if (figure.figure_type_id == 1) {
-        const width = figure.width * scaling.w
-        const height = figure.height * scaling.h
+        const width = figure.width * scaling
+        const height = figure.height * scaling
 
-        const left = figure.left * scaling.w
-        const top = figure.top * scaling.h
+        const left = figure.left * scaling
+        const top = figure.top * scaling
 
         const centerX = mapCenter[0] + left + (width / 2)
         const centerY = mapCenter[1] - top - (height / 2)
@@ -83,16 +85,16 @@ export function processFigure(
     }
 
     if (figure.figure_type_id == 3) {
-        const x = figure.left * scaling.w
-        const y = figure.top * scaling.h
+        const x = figure.left * scaling
+        const y = figure.top * scaling
 
         const center = [mapCenter[0] + x, mapCenter[1] - y]
 
         const coords = figure.points?.split(' ').map(pair => {
             const [x, y] = pair.split(';').map(Number)
             return [
-                center[0] + (x * scaling.w),
-                center[1] - (y * scaling.h)
+                center[0] + (x * scaling),
+                center[1] - (y * scaling)
             ]
         })
 
@@ -112,10 +114,10 @@ export function processFigure(
     }
 
     if (figure.figure_type_id == 4) {
-        const width = figure.width * scaling.w
-        const height = figure.height * scaling.h
-        const left = figure.left * scaling.w
-        const top = figure.top * scaling.h
+        const width = figure.width * scaling
+        const height = figure.height * scaling
+        const left = figure.left * scaling
+        const top = figure.top * scaling
 
         const halfWidth = width / 2
         const halfHeight = height / 2
@@ -193,7 +195,7 @@ export const addInteractions = (
     const measureType = getMeasureType()
     const tipPoint = getTipPoint()
 
-    if (currentTool !== 'Measure' && currentTool !== 'Mover') {
+    if (currentTool !== 'Measure' && currentTool !== 'Mover' && currentTool !== 'Edit') {
         draw.current = new Draw({
             source: drawingLayerSource.current,
             type: currentTool as Type,
@@ -262,6 +264,11 @@ export const addInteractions = (
         translate.current = new Translate()
         map?.current?.addInteraction(translate.current)
     }
+
+    if (currentTool == 'Edit') {
+        //const modify = new Modify()
+        //map?.current?.addInteraction(translate.current)
+    }
 }
 
 export function regionsInit(
@@ -269,6 +276,16 @@ export function regionsInit(
     selectedRegion: React.MutableRefObject<Feature<Geometry> | null>,
     regionsLayer: React.MutableRefObject<VectorImageLayer<Feature<Geometry>, VectorSource<Feature<Geometry>>>>,
 ) {
+    regionsLayer.current.once('change', function () {
+        if (getSelectedCity() === null || getSelectedYear() === null) {
+            const extent = regionsLayer.current.getSource()?.getExtent()
+
+            if (extent && !extent?.every(val => Math.abs(val) === Infinity)) {
+                map.current?.getView().fit(fromExtent(extent) as SimpleGeometry, { duration: 500, maxZoom: 18, padding: [60, 60, 60, 60] })
+            }
+        }
+    })
+
     map.current?.on('click', function (e) {
         if (selectedRegion.current !== null) {
             selectedRegion.current = null