features selection & moving

client/src/components/map/mapUtils.ts

@@ -15,7 +15,7 @@ import { ImageStatic } from "ol/source";
 import { ICitySettings, IFigure, ILine } from "../../interfaces/gis";
 import { fromCircle, fromExtent } from "ol/geom/Polygon";
 import { measureStyleFunction, modifyStyle } from "./Measure/MeasureStyles";
-import { getCurrentTool, getDraw, getDrawingLayerSource, getImageLayer, getMap, getMeasureClearPrevious, getMeasureDraw, getMeasureModify, getMeasureSource, getMeasureType, getOverlayLayerSource, getSnap, getTipPoint, getTranslate, PrintOrientation, setDraw, setFile, setMeasureDraw, setPolygonExtent, setRectCoords, setSnap, setTranslate, useMapStore } from "../../store/map";
+import { getCurrentTool, getDraw, getDrawingLayerSource, getImageLayer, getMap, getMeasureClearPrevious, getMeasureDraw, getMeasureModify, getMeasureSource, getMeasureType, getOverlayLayerSource, getSelectedFeatures, getSnap, getTipPoint, getTranslate, PrintOrientation, setDraw, setFile, setMeasureDraw, setPolygonExtent, setRectCoords, setSnap, setTranslate, useMapStore } from "../../store/map";
 import Collection from "ol/Collection";
 import { SketchCoordType } from "ol/interaction/Draw";
 import VectorImageLayer from "ol/layer/VectorImage";
@@ -590,7 +590,9 @@ export const addInteractions = (
     }
 
     if (currentTool == 'Mover') {
-        setTranslate(map_id, new Translate())
+        setTranslate(map_id, new Translate({
+            features: new Collection(getSelectedFeatures(map_id))
+        }))
 
         const translate = getTranslate(map_id)
         if (translate) {

client/src/store/map.ts

@@ -27,6 +27,7 @@ import { getSelectedRegion, setCurrentObjectId, setSelectedDistrict, setSelected
 import View from 'ol/View';
 import { getPrintOrientation } from './print';
 import { getDistrictsData, getRegionsData } from './regions';
+import { fromExtent } from 'ol/geom/Polygon';
 
 export type Mode = 'edit' | 'view' | 'print'
 
@@ -96,6 +97,7 @@ interface MapState {
         printScaleLine: boolean;
         selectionDragBox: DragBox;
         capitalsLayer: VectorLayer
+        selectedFeatures: Feature<Geometry>[]
     }>;
 }
 
@@ -271,6 +273,40 @@ export const initializeMapState = (
             condition: noModifierKeys
         })
 
+        selectionDragBox.on('boxend', (e) => {
+            const extent = selectionDragBox.getGeometry().getExtent()
+
+            const figuresSource = figuresLayer.getSource()
+            const linesSource = linesLayer.getSource()
+
+            if (figuresSource && linesSource) {
+                const featuresFigures = figuresSource.getFeaturesInExtent(extent);
+                const featuresLines = linesSource.getFeaturesInExtent(extent);
+
+                const intersectingFigures = featuresFigures.filter(feature => {
+                    const geometry = feature.getGeometry();
+                    if (!geometry) return false;
+
+                    // Create polygon from extent
+
+                    // Check for intersection
+                    return geometry.intersectsExtent(extent);
+                })
+
+                const intersectingLines = featuresLines.filter(feature => {
+                    const geometry = feature.getGeometry();
+                    if (!geometry) return false;
+
+                    // Create polygon from extent
+
+                    // Check for intersection
+                    return geometry.intersectsExtent(extent);
+                });
+
+                setSelectedFeatures(id, [...intersectingFigures, ...intersectingLines])
+            }
+        })
+
         const map = new Map({
             controls: [],
             layers: [
@@ -487,7 +523,8 @@ export const initializeMapState = (
                     printScale: '250',
                     printScaleLine: true,
                     selectionDragBox: selectionDragBox,
-                    capitalsLayer: capitalsLayer
+                    capitalsLayer: capitalsLayer,
+                    selectedFeatures: []
                 }
             }
         }
@@ -846,3 +883,17 @@ export const setTypeRoles = (id: string, typeRoles: TypeRole[] | null) => useMap
         }
     }
 })
+
+export const getSelectedFeatures = (id: string) => useMapStore.getState().id[id].selectedFeatures
+
+export const setSelectedFeatures = (id: string, selectedFeatures: Feature<Geometry>[]) => useMapStore.setState((state) => {
+    // set default style for previously selected features
+    state.id[id].selectedFeatures.map(f => f.setStyle(undefined))
+    selectedFeatures.map(f => f.setStyle(highlightStyleYellow))
+    return {
+        id: {
+            ...state.id,
+            [id]: { ...state.id[id], selectedFeatures: selectedFeatures }
+        }
+    }
+})