Update
This commit is contained in:
cracklesparkle
43
client/src/store/app.ts
Normal file
43
client/src/store/app.ts
Normal file
@ -0,0 +1,43 @@
|
||||
import { create } from 'zustand';
|
||||
|
||||
export type Mode = 'edit' | 'view'
|
||||
|
||||
export interface AppState {
|
||||
mapTab: Record<string, {
|
||||
year: number | null,
|
||||
region: number | null,
|
||||
district: number | null
|
||||
}>,
|
||||
currentTab: string | null;
|
||||
}
|
||||
|
||||
export const useAppStore = create<AppState>(() => ({
|
||||
currentTab: null,
|
||||
mapTab: {}
|
||||
}))
|
||||
|
||||
const getCurrentTab = () => useAppStore.getState().currentTab
|
||||
const setCurrentTab = (id: string | null) => useAppStore.setState(() => ({ currentTab: id }))
|
||||
|
||||
const setMapTabYear = (id: string, year: number | null) =>
|
||||
useAppStore.setState((state) => {
|
||||
return {
|
||||
mapTab: {
|
||||
...state.mapTab,
|
||||
[id]: { ...state.mapTab[id], year: year }
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const deleteMapTab = (id: string) =>
|
||||
useAppStore.setState((state) => {
|
||||
const { [id]: _, ...remainingTabs } = state.mapTab;
|
||||
return { mapTab: remainingTabs };
|
||||
})
|
||||
|
||||
export {
|
||||
deleteMapTab,
|
||||
getCurrentTab,
|
||||
setCurrentTab,
|
||||
setMapTabYear
|
||||
}
|
||||
@ -1,108 +1,658 @@
|
||||
import { create } from 'zustand';
|
||||
import { ToolType } from '../types/tools';
|
||||
import { Point } from 'ol/geom';
|
||||
import { Geometry, Point } from 'ol/geom';
|
||||
import Map from 'ol/Map';
|
||||
import { Coordinate } from 'ol/coordinate';
|
||||
import { SatelliteMapsProvider } from '../interfaces/map';
|
||||
import { IRectCoords, SatelliteMapsProvider } from '../interfaces/map';
|
||||
import { TypeRole } from '../interfaces/gis';
|
||||
import VectorSource from 'ol/source/Vector';
|
||||
import Feature from 'ol/Feature';
|
||||
import { containsExtent, Extent } from 'ol/extent';
|
||||
import { Draw, Modify, Select, Snap, Translate } from 'ol/interaction';
|
||||
import TileLayer from 'ol/layer/Tile';
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
import { googleMapsSatelliteSource } from '../components/map/MapSources';
|
||||
import VectorLayer from 'ol/layer/Vector';
|
||||
import { ImageStatic, OSM } from 'ol/source';
|
||||
import ImageLayer from 'ol/layer/Image';
|
||||
import { drawingLayerStyle, figureStyle, highlightStyleRed, lineStyle, overlayStyle, regionsLayerStyle, selectStyle } from '../components/map/MapStyles';
|
||||
import { Fill, Stroke, Style } from 'ol/style';
|
||||
import { VectorImage } from 'ol/layer';
|
||||
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 { setCurrentObjectId, setSelectedRegion } from './objects';
|
||||
import View from 'ol/View';
|
||||
|
||||
export type Mode = 'edit' | 'view'
|
||||
|
||||
interface MapState {
|
||||
currentTool: ToolType;
|
||||
measureType: "LineString" | "Polygon";
|
||||
measureShowSegments: boolean;
|
||||
measureClearPrevious: boolean;
|
||||
tipPoint: Point | null;
|
||||
map: Map | null;
|
||||
currentZ: number | undefined;
|
||||
currentX: number | undefined;
|
||||
currentY: number | undefined;
|
||||
currentCoordinate: Coordinate | null;
|
||||
statusText: string;
|
||||
satMapsProvider: SatelliteMapsProvider;
|
||||
selectedObjectType: number | null;
|
||||
alignMode: boolean;
|
||||
id: Record<string, {
|
||||
currentTool: ToolType;
|
||||
measureType: "LineString" | "Polygon";
|
||||
measureShowSegments: boolean;
|
||||
measureClearPrevious: boolean;
|
||||
tipPoint: Point | null;
|
||||
map: Map | null;
|
||||
currentZ: number | undefined;
|
||||
currentX: number | undefined;
|
||||
currentY: number | undefined;
|
||||
currentCoordinate: Coordinate | null;
|
||||
statusText: string;
|
||||
satMapsProvider: SatelliteMapsProvider;
|
||||
selectedObjectType: number | null;
|
||||
alignMode: boolean;
|
||||
mode: Mode;
|
||||
typeRoles: TypeRole[] | null;
|
||||
mapLabel: string;
|
||||
file: File | null;
|
||||
measureSource: VectorSource<Feature<Geometry>>;
|
||||
measureDraw: Draw | null;
|
||||
polygonExtent: Extent | undefined;
|
||||
rectCoords: IRectCoords | undefined;
|
||||
alignPoints: Coordinate[];
|
||||
alignModeLayer: VectorLayer;
|
||||
drawingLayer: VectorLayer;
|
||||
drawingLayerSource: VectorSource;
|
||||
draw: Draw | null;
|
||||
snap: Snap | null;
|
||||
translate: Translate | null;
|
||||
overlayLayerSource: VectorSource;
|
||||
satLayer: TileLayer;
|
||||
nodeLayer: VectorLayer;
|
||||
nodeLayerSource: VectorSource;
|
||||
staticMapLayer: ImageLayer<ImageStatic>;
|
||||
figuresLayer: VectorLayer<VectorSource>;
|
||||
linesLayer: VectorLayer<VectorSource>;
|
||||
regionsLayer: VectorImage;
|
||||
citiesLayer: VectorLayer;
|
||||
districtBoundLayer: VectorImage;
|
||||
imageLayer: ImageLayer<ImageStatic>;
|
||||
selectedArea: Feature | null;
|
||||
baseLayer: TileLayer;
|
||||
measureLayer: VectorLayer;
|
||||
measureModify: Modify;
|
||||
overlayLayer: VectorLayer;
|
||||
regionSelect: Select;
|
||||
lineSelect: Select;
|
||||
}>;
|
||||
}
|
||||
|
||||
export const useMapStore = create<MapState>(() => ({
|
||||
currentTool: null,
|
||||
measureType: "LineString",
|
||||
measureShowSegments: true,
|
||||
measureClearPrevious: true,
|
||||
tipPoint: null,
|
||||
map: null,
|
||||
currentZ: undefined,
|
||||
currentX: undefined,
|
||||
currentY: undefined,
|
||||
currentCoordinate: null,
|
||||
statusText: '',
|
||||
satMapsProvider: 'google',
|
||||
selectedObjectType: null,
|
||||
alignMode: false
|
||||
}));
|
||||
id: {}
|
||||
}))
|
||||
|
||||
const setCurrentZ = (z: number | undefined) => useMapStore.setState(() => ({ currentZ: z }))
|
||||
const setCurrentX = (x: number | undefined) => useMapStore.setState(() => ({ currentX: x }))
|
||||
const setCurrentY = (y: number | undefined) => useMapStore.setState(() => ({ currentY: y }))
|
||||
const setCurrentCoordinate = (c: Coordinate | null) => useMapStore.setState(() => ({ currentCoordinate: c }))
|
||||
const setStatusText = (t: string) => useMapStore.setState(() => ({ statusText: t }))
|
||||
const setSatMapsProvider = (p: SatelliteMapsProvider) => useMapStore.setState(() => ({ satMapsProvider: p }))
|
||||
const setSelectedObjectType = (t: number | null) => useMapStore.setState(() => ({ selectedObjectType: t }))
|
||||
const setMap = (m: Map | null) => useMapStore.setState(() => ({ map: m }))
|
||||
const setAlignMode = (m: boolean) => useMapStore.setState(() => ({ alignMode: m }))
|
||||
export const initializeMapState = (
|
||||
id: string
|
||||
) => {
|
||||
useMapStore.setState((state) => {
|
||||
const baseLayer = new TileLayer({ source: new OSM(), properties: { id: uuidv4(), name: 'OpenStreetMap' } })
|
||||
|
||||
const setTipPoint = (tipPoint: Point | null) => {
|
||||
useMapStore.setState(() => ({ tipPoint: tipPoint }))
|
||||
const satLayer = new TileLayer({ source: googleMapsSatelliteSource, visible: false, properties: { id: uuidv4(), name: 'Спутник' } })
|
||||
|
||||
const staticMapLayer = new ImageLayer<ImageStatic>({ properties: { id: uuidv4(), name: 'Подложка' } })
|
||||
|
||||
// Region select
|
||||
const regionSelect = new Select({ condition: pointerMove, style: selectStyle, layers: (layer) => layer.get('type') === 'region' })
|
||||
|
||||
// Line select
|
||||
const lineSelect = new Select({ condition: click, style: highlightStyleRed, layers: (layer) => layer.get('type') === 'line', })
|
||||
lineSelect.on('select', (e) => {
|
||||
if (e.selected[0]) {
|
||||
setCurrentObjectId(id, e.selected[0].get('object_id'))
|
||||
}
|
||||
})
|
||||
|
||||
// Figure select
|
||||
const figureSelect = new Select({ condition: click, style: highlightStyleRed, layers: (layer) => layer.get('type') === 'figure' })
|
||||
figureSelect.on('select', (e) => {
|
||||
if (e.selected[0]) {
|
||||
setCurrentObjectId(id, e.selected[0].get('object_id'))
|
||||
}
|
||||
})
|
||||
|
||||
const measureSource = new VectorSource()
|
||||
const measureLayer = new VectorLayer({
|
||||
source: measureSource,
|
||||
style: (feature) => measureStyleFunction(id, feature),
|
||||
properties: { id: uuidv4(), type: 'measure', name: 'Линейка' }
|
||||
})
|
||||
const measureModify = new Modify({
|
||||
source: measureSource,
|
||||
style: modifyStyle
|
||||
})
|
||||
|
||||
const nodeLayerSource = new VectorSource()
|
||||
const nodeLayer = new VectorLayer({
|
||||
source: nodeLayerSource,
|
||||
style: drawingLayerStyle,
|
||||
properties: {
|
||||
id: uuidv4(),
|
||||
name: 'Узлы'
|
||||
}
|
||||
})
|
||||
|
||||
const overlayLayerSource = new VectorSource()
|
||||
const overlayLayer = new VectorLayer({
|
||||
source: overlayLayerSource,
|
||||
style: overlayStyle,
|
||||
properties: {
|
||||
id: uuidv4(),
|
||||
name: 'Наложения'
|
||||
}
|
||||
})
|
||||
|
||||
const drawingLayerSource = new VectorSource()
|
||||
const drawingLayer = new VectorLayer({
|
||||
source: drawingLayerSource
|
||||
})
|
||||
|
||||
const regionsLayer = new VectorImage({
|
||||
source: new VectorSource(),
|
||||
declutter: true,
|
||||
style: regionsLayerStyle,
|
||||
properties: {
|
||||
id: uuidv4(),
|
||||
name: 'Регион',
|
||||
type: 'region'
|
||||
}
|
||||
})
|
||||
|
||||
const districtBoundLayer = new VectorImage({ style: new Style({ stroke: new Stroke({ color: 'red', width: 2 }), }) })
|
||||
|
||||
const citiesLayer = new VectorLayer({ source: new VectorSource(), properties: { id: uuidv4(), name: 'Города' } })
|
||||
|
||||
const linesLayer = new VectorLayer({
|
||||
source: new VectorSource(),
|
||||
declutter: true,
|
||||
properties: { id: uuidv4(), type: 'line', name: 'Линии' },
|
||||
style: function (feature) {
|
||||
const objectType = feature.get('type')
|
||||
const typeRole = getTypeRoles(id)?.find((el) => el.id.toString() === String(objectType))
|
||||
if (typeRole) {
|
||||
lineStyle.setStroke(new Stroke({
|
||||
color: `rgb(${typeRole.r},${typeRole.g},${typeRole.b})`
|
||||
}))
|
||||
}
|
||||
//lineStyle.getText()?.setText('11,4')//(feature.get('object_id'))
|
||||
lineStyle.getText()?.setRotation(feature.get('rotation'))
|
||||
lineStyle.getText()?.setOffsetY(-8)
|
||||
return lineStyle
|
||||
},
|
||||
})
|
||||
|
||||
const figuresLayer = new VectorLayer({
|
||||
source: new VectorSource(),
|
||||
declutter: true,
|
||||
properties: { id: uuidv4(), type: 'figure', name: 'Фигуры' },
|
||||
style: function (feature) {
|
||||
const objectType = feature.get('type')
|
||||
const typeRole = getTypeRoles(id)?.find((el) => el.id.toString() === String(objectType))
|
||||
|
||||
if (typeRole) {
|
||||
figureStyle.setFill(new Fill({
|
||||
color: `rgb(${typeRole.r},${typeRole.g},${typeRole.b})`
|
||||
}))
|
||||
}
|
||||
|
||||
figureStyle.getText()?.setText(feature.get('object_id'))
|
||||
return figureStyle
|
||||
}
|
||||
})
|
||||
|
||||
const imageLayer = new ImageLayer<ImageStatic>({ properties: { id: uuidv4(), name: 'Изображение' } })
|
||||
|
||||
const alignModeLayer = new VectorLayer({ source: new VectorSource(), properties: { id: uuidv4(), type: 'align', name: 'Подгонка' } })
|
||||
|
||||
const map = new Map({
|
||||
controls: [],
|
||||
layers: [
|
||||
baseLayer,
|
||||
satLayer,
|
||||
staticMapLayer,
|
||||
regionsLayer,
|
||||
districtBoundLayer,
|
||||
citiesLayer,
|
||||
linesLayer,
|
||||
figuresLayer,
|
||||
drawingLayer,
|
||||
imageLayer,
|
||||
overlayLayer,
|
||||
nodeLayer,
|
||||
measureLayer,
|
||||
alignModeLayer
|
||||
]
|
||||
})
|
||||
|
||||
map.addInteraction(regionSelect)
|
||||
map.addInteraction(lineSelect)
|
||||
map.addInteraction(figureSelect)
|
||||
|
||||
// map.on('pointermove', function (e: MapBrowserEvent<UIEvent>) {
|
||||
// setCurrentCoordinate(id, e.coordinate)
|
||||
// const currentExtent = get('EPSG:3857')?.getExtent() as Extent
|
||||
// const { tileX, tileY } = getGridCellPosition(e.coordinate[0], e.coordinate[1], currentExtent, Number(map?.getView().getZoom()?.toFixed(0)))
|
||||
// setCurrentZ(id, Number(map?.getView().getZoom()?.toFixed(0)))
|
||||
// setCurrentX(id, tileX)
|
||||
// setCurrentY(id, tileY)
|
||||
|
||||
// const pixel = map?.getEventPixel(e.originalEvent)
|
||||
// if (pixel) {
|
||||
// map?.forEachFeatureAtPixel(pixel, function (feature, layer) {
|
||||
// if (layer.get('type') === 'region') {
|
||||
// if (feature.get('entity_id')) {
|
||||
// setStatusText(id, feature.get('entity_id'))
|
||||
// }
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
// })
|
||||
|
||||
map.on('click', function (e: MapBrowserEvent<UIEvent>) {
|
||||
if (getAlignMode(id)) {
|
||||
const alignPoints = getAlignPoints(id)
|
||||
const alignModeLayer = getAlignModeLayer(id)
|
||||
if (alignPoints.length < 4) {
|
||||
//setAlignPoints(id, [...alignPoints, e.coordinate])
|
||||
alignPoints.push(e.coordinate)
|
||||
alignModeLayer.getSource()?.addFeature(new Feature(new Point(e.coordinate)))
|
||||
if (alignPoints.length === 4) {
|
||||
const transformations = calculateTransformations(alignPoints);
|
||||
// Use the first map point (P3) as the origin for scaling and rotation
|
||||
const origin = alignPoints[2];
|
||||
applyTransformations(getFiguresLayer(id), transformations, origin);
|
||||
applyTransformations(getLinesLayer(id), transformations, origin);
|
||||
|
||||
setAlignPoints(id, [])
|
||||
alignModeLayer.getSource()?.clear()
|
||||
}
|
||||
}
|
||||
} else {
|
||||
const pixel = map?.getEventPixel(e.originalEvent)
|
||||
|
||||
if (pixel) {
|
||||
map?.forEachFeatureAtPixel(pixel, function (feature, layer) {
|
||||
if (layer.get('type') === 'region') {
|
||||
console.log("clicked on region")
|
||||
zoomToFeature(id, feature as Feature)
|
||||
|
||||
if (feature.get('entity_id')) {
|
||||
setSelectedRegion(id, feature.get('entity_id'))
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
map.on('moveend', function () {
|
||||
const viewExtent = map?.getView().calculateExtent(map.getSize())
|
||||
const features = regionsLayer.getSource()?.getFeatures()
|
||||
|
||||
let isViewCovered = false
|
||||
|
||||
features?.forEach((feature: Feature) => {
|
||||
const featureExtent = feature?.getGeometry()?.getExtent()
|
||||
if (viewExtent && featureExtent) {
|
||||
if (containsExtent(featureExtent, viewExtent)) {
|
||||
isViewCovered = true
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
regionsLayer.setVisible(!isViewCovered)
|
||||
})
|
||||
|
||||
map.setView(
|
||||
new View({
|
||||
center: transform([129.7466541, 62.083504], 'EPSG:4326', 'EPSG:3857'),//center: fromLonLat([130.401113, 67.797368]),
|
||||
zoom: 5,
|
||||
maxZoom: 21,
|
||||
//extent: mapExtent,
|
||||
})
|
||||
)
|
||||
|
||||
return {
|
||||
id: {
|
||||
...state.id,
|
||||
[id]: {
|
||||
currentTool: null,
|
||||
measureType: "LineString",
|
||||
measureShowSegments: true,
|
||||
measureClearPrevious: true,
|
||||
tipPoint: null,
|
||||
map: map,
|
||||
currentZ: undefined,
|
||||
currentX: undefined,
|
||||
currentY: undefined,
|
||||
currentCoordinate: null,
|
||||
statusText: '',
|
||||
satMapsProvider: 'google',
|
||||
selectedObjectType: null,
|
||||
alignMode: false,
|
||||
mode: 'view',
|
||||
typeRoles: null,
|
||||
mapLabel: 'Карта',
|
||||
file: null,
|
||||
measureSource: measureSource,
|
||||
measureDraw: null,
|
||||
polygonExtent: undefined,
|
||||
rectCoords: undefined,
|
||||
alignPoints: [],
|
||||
alignModeLayer: alignModeLayer,
|
||||
drawingLayer: drawingLayer,
|
||||
drawingLayerSource: drawingLayerSource,
|
||||
draw: null,
|
||||
snap: null,
|
||||
translate: null,
|
||||
overlayLayerSource: overlayLayerSource,
|
||||
satLayer: satLayer,
|
||||
nodeLayerSource: nodeLayerSource,
|
||||
staticMapLayer: staticMapLayer,
|
||||
figuresLayer: figuresLayer,
|
||||
linesLayer: linesLayer,
|
||||
regionsLayer: regionsLayer,
|
||||
citiesLayer: citiesLayer,
|
||||
districtBoundLayer: districtBoundLayer,
|
||||
imageLayer: imageLayer,
|
||||
selectedArea: null,
|
||||
baseLayer: baseLayer,
|
||||
measureLayer: measureLayer,
|
||||
measureModify: measureModify,
|
||||
nodeLayer: nodeLayer,
|
||||
overlayLayer: overlayLayer,
|
||||
regionSelect: regionSelect,
|
||||
lineSelect: lineSelect
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const getTipPoint = () => useMapStore.getState().tipPoint
|
||||
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
|
||||
|
||||
const getAlignMode = () => useMapStore.getState().alignMode
|
||||
export const getOverlayLayerSource = (id: string) => useMapStore.getState().id[id].overlayLayerSource
|
||||
export const setOverlayLayerSource = (id: string, source: VectorSource) => useMapStore.setState((state) => {
|
||||
return {
|
||||
id: {
|
||||
...state.id,
|
||||
[id]: { ...state.id[id], overlayLayerSource: source }
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const getMap = () => useMapStore.getState().map
|
||||
export const getImageLayer = (id: string) => useMapStore.getState().id[id].imageLayer
|
||||
export const setImageLayer = (id: string, layer: ImageLayer<ImageStatic>) => useMapStore.setState((state) => {
|
||||
return {
|
||||
id: {
|
||||
...state.id,
|
||||
[id]: { ...state.id[id], imageLayer: layer }
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const setMeasureType = (tool: "LineString" | "Polygon") => useMapStore.setState(() => ({ measureType: tool }))
|
||||
export const getTranslate = (id: string) => useMapStore.getState().id[id].translate
|
||||
export const setTranslate = (id: string, translate: Translate | null) => useMapStore.setState((state) => {
|
||||
return {
|
||||
id: {
|
||||
...state.id,
|
||||
[id]: { ...state.id[id], translate: translate }
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const getMeasureType = () => useMapStore.getState().measureType
|
||||
export const getSnap = (id: string) => useMapStore.getState().id[id].snap
|
||||
export const setSnap = (id: string, snap: Snap | null) => useMapStore.setState((state) => {
|
||||
return {
|
||||
id: {
|
||||
...state.id,
|
||||
[id]: { ...state.id[id], snap: snap }
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const setCurrentTool = (tool: ToolType) => {
|
||||
tool === useMapStore.getState().currentTool
|
||||
? useMapStore.setState(() => ({ currentTool: null }))
|
||||
: useMapStore.setState(() => ({ currentTool: tool }))
|
||||
}
|
||||
export const getDraw = (id: string) => useMapStore.getState().id[id].draw
|
||||
export const setDraw = (id: string, draw: Draw | null) => useMapStore.setState((state) => {
|
||||
return {
|
||||
id: {
|
||||
...state.id,
|
||||
[id]: { ...state.id[id], draw: draw }
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const getCurrentTool = () => useMapStore.getState().currentTool
|
||||
export const getDrawingLayerSource = (id: string) => useMapStore.getState().id[id].drawingLayerSource
|
||||
export const getMeasureSource = (id: string) => useMapStore.getState().id[id].measureSource
|
||||
export const getMeasureDraw = (id: string) => useMapStore.getState().id[id].measureDraw
|
||||
|
||||
const getMeasureShowSegments = () => useMapStore.getState().measureShowSegments
|
||||
export const setMeasureDraw = (id: string, draw: Draw) => useMapStore.setState((state) => {
|
||||
return {
|
||||
id: {
|
||||
...state.id,
|
||||
[id]: { ...state.id[id], measureDraw: draw }
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const getMeasureClearPrevious = () => useMapStore.getState().measureClearPrevious
|
||||
export const setAlignPoints = (id: string, c: Coordinate[]) => useMapStore.setState((state) => {
|
||||
return {
|
||||
id: {
|
||||
...state.id,
|
||||
[id]: { ...state.id[id], alignPoints: c }
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const setMeasureShowSegments = (bool: boolean) => {
|
||||
useMapStore.setState(() => ({ measureShowSegments: bool }))
|
||||
}
|
||||
export const setRectCoords = (id: string, c: IRectCoords | undefined) => useMapStore.setState((state) => {
|
||||
return {
|
||||
id: {
|
||||
...state.id,
|
||||
[id]: { ...state.id[id], rectCoords: c }
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const setMeasureClearPrevious = (bool: boolean) => {
|
||||
useMapStore.setState(() => ({ measureClearPrevious: bool }))
|
||||
}
|
||||
export const setPolygonExtent = (id: string, extent: Extent | undefined) => useMapStore.setState((state) => {
|
||||
return {
|
||||
id: {
|
||||
...state.id,
|
||||
[id]: { ...state.id[id], polygonExtent: extent }
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
export {
|
||||
setCurrentTool,
|
||||
getCurrentTool,
|
||||
setMeasureShowSegments,
|
||||
setMeasureClearPrevious,
|
||||
getMeasureShowSegments,
|
||||
getMeasureClearPrevious,
|
||||
setMeasureType,
|
||||
getMeasureType,
|
||||
getTipPoint,
|
||||
setTipPoint,
|
||||
setCurrentZ,
|
||||
setCurrentX,
|
||||
setCurrentY,
|
||||
setCurrentCoordinate,
|
||||
setStatusText,
|
||||
setSatMapsProvider,
|
||||
setSelectedObjectType,
|
||||
setMap,
|
||||
getMap,
|
||||
setAlignMode,
|
||||
getAlignMode
|
||||
}
|
||||
export const setFile = (id: string, file: File | null) => useMapStore.setState((state) => {
|
||||
return {
|
||||
id: {
|
||||
...state.id,
|
||||
[id]: { ...state.id[id], file: file }
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
export const setMapLabel = (id: string, label: string) => useMapStore.setState((state) => {
|
||||
return {
|
||||
id: {
|
||||
...state.id,
|
||||
[id]: { ...state.id[id], mapLabel: label }
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
export const setCurrentZ = (id: string, z: number | undefined) => useMapStore.setState((state) => {
|
||||
return {
|
||||
id: {
|
||||
...state.id,
|
||||
[id]: { ...state.id[id], currentZ: z }
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
export const setCurrentX = (id: string, x: number | undefined) => useMapStore.setState((state) => {
|
||||
return {
|
||||
id: {
|
||||
...state.id,
|
||||
[id]: { ...state.id[id], currentX: x }
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
export const setCurrentY = (id: string, y: number | undefined) => useMapStore.setState((state) => {
|
||||
return {
|
||||
id: {
|
||||
...state.id,
|
||||
[id]: { ...state.id[id], currentY: y }
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
export const setCurrentCoordinate = (id: string, c: Coordinate | null) => useMapStore.setState((state) => {
|
||||
return {
|
||||
id: {
|
||||
...state.id,
|
||||
[id]: { ...state.id[id], currentCoordinate: c }
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
export const setStatusText = (id: string, t: string) => useMapStore.setState((state) => {
|
||||
return {
|
||||
id: {
|
||||
...state.id,
|
||||
[id]: { ...state.id[id], statusText: t }
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
export const setSatMapsProvider = (id: string, p: SatelliteMapsProvider) => useMapStore.setState((state) => {
|
||||
return {
|
||||
id: {
|
||||
...state.id,
|
||||
[id]: { ...state.id[id], satMapsProvider: p }
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
export const setSelectedObjectType = (id: string, t: number | null) => useMapStore.setState((state) => {
|
||||
return {
|
||||
id: {
|
||||
...state.id,
|
||||
[id]: { ...state.id[id], selectedObjectType: t }
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
export const setMap = (id: string, m: Map | null) => useMapStore.setState((state) => {
|
||||
return {
|
||||
id: {
|
||||
...state.id,
|
||||
[id]: { ...state.id[id], map: m }
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
export const setAlignMode = (id: string, m: boolean) => useMapStore.setState((state) => {
|
||||
return {
|
||||
id: {
|
||||
...state.id,
|
||||
[id]: { ...state.id[id], alignMode: m }
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
export const setTipPoint = (id: string, tipPoint: Point | null) => useMapStore.setState((state) => {
|
||||
return {
|
||||
id: {
|
||||
...state.id,
|
||||
[id]: { ...state.id[id], tipPoint: tipPoint }
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
export const getTipPoint = (id: string) => useMapStore.getState().id[id].tipPoint
|
||||
|
||||
export const getAlignMode = (id: string) => useMapStore.getState().id[id].alignMode
|
||||
|
||||
export const getAlignModeLayer = (id: string) => useMapStore.getState().id[id].alignModeLayer
|
||||
|
||||
export const getAlignPoints = (id: string) => useMapStore.getState().id[id].alignPoints
|
||||
|
||||
export const getMap = (id: string) => useMapStore.getState().id[id].map
|
||||
|
||||
export const setMeasureType = (id: string, tool: "LineString" | "Polygon") => useMapStore.setState((state) => {
|
||||
return {
|
||||
id: {
|
||||
...state.id,
|
||||
[id]: { ...state.id[id], measureType: tool }
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
export const getMeasureType = (id: string) => useMapStore.getState().id[id].measureType
|
||||
|
||||
export const setCurrentTool = (id: string, tool: ToolType) =>
|
||||
tool === useMapStore.getState().id[id].currentTool
|
||||
? useMapStore.setState((state) => {
|
||||
return {
|
||||
id: {
|
||||
...state.id,
|
||||
[id]: { ...state.id[id], currentTool: null }
|
||||
}
|
||||
}
|
||||
})
|
||||
: useMapStore.setState((state) => {
|
||||
return {
|
||||
id: {
|
||||
...state.id,
|
||||
[id]: { ...state.id[id], currentTool: tool }
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
export const getCurrentTool = (id: string) => useMapStore.getState().id[id].currentTool
|
||||
|
||||
export const getMeasureShowSegments = (id: string) => useMapStore.getState().id[id].measureShowSegments
|
||||
|
||||
export const getMeasureClearPrevious = (id: string) => useMapStore.getState().id[id].measureClearPrevious
|
||||
|
||||
export const setMeasureShowSegments = (id: string, bool: boolean) => useMapStore.setState((state) => {
|
||||
return {
|
||||
id: {
|
||||
...state.id,
|
||||
[id]: { ...state.id[id], measureShowSegments: bool }
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
export const setMeasureClearPrevious = (id: string, bool: boolean) => useMapStore.setState((state) => {
|
||||
return {
|
||||
id: {
|
||||
...state.id,
|
||||
[id]: { ...state.id[id], measureClearPrevious: bool }
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
export const getMode = (id: string) => useMapStore.getState().id[id].mode
|
||||
export const setMode = (id: string, mode: Mode) => useMapStore.setState((state) => {
|
||||
return {
|
||||
id: {
|
||||
...state.id,
|
||||
[id]: { ...state.id[id], mode: mode }
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
export const getTypeRoles = (id: string) => useMapStore.getState().id[id].typeRoles
|
||||
export const setTypeRoles = (id: string, typeRoles: TypeRole[] | null) => useMapStore.setState((state) => {
|
||||
return {
|
||||
id: {
|
||||
...state.id,
|
||||
[id]: { ...state.id[id], typeRoles: typeRoles }
|
||||
}
|
||||
}
|
||||
})
|
||||
@ -1,60 +1,87 @@
|
||||
import { create } from 'zustand';
|
||||
|
||||
interface ObjectsState {
|
||||
selectedRegion: number | null;
|
||||
selectedDistrict: number | null;
|
||||
selectedCity: number | null;
|
||||
selectedYear: number | null;
|
||||
currentObjectId: string | null;
|
||||
id: Record<string, {
|
||||
selectedRegion: number | null;
|
||||
selectedDistrict: number | null;
|
||||
selectedCity: number | null;
|
||||
selectedYear: number | null;
|
||||
currentObjectId: string | null;
|
||||
}>;
|
||||
}
|
||||
|
||||
export const useObjectsStore = create<ObjectsState>(() => ({
|
||||
selectedRegion: null,
|
||||
selectedDistrict: null,
|
||||
selectedCity: null,
|
||||
selectedYear: null,
|
||||
currentObjectId: null
|
||||
id: {}
|
||||
}));
|
||||
|
||||
const getSelectedCity = () => {
|
||||
return useObjectsStore.getState().selectedCity
|
||||
}
|
||||
export const initializeObjectsState = (
|
||||
id: string,
|
||||
selectedRegion: number | null,
|
||||
selectedDistrict: number | null,
|
||||
selectedCity: number | null,
|
||||
selectedYear: number | null,
|
||||
) => useObjectsStore.setState((state) => {
|
||||
return {
|
||||
id: {
|
||||
...state.id,
|
||||
[id]: {
|
||||
selectedRegion: selectedRegion,
|
||||
selectedDistrict: selectedDistrict,
|
||||
selectedCity: selectedCity,
|
||||
selectedYear: selectedYear,
|
||||
currentObjectId: null,
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const setSelectedRegion = (region: number | null) => {
|
||||
useObjectsStore.setState(() => ({ selectedRegion: region }))
|
||||
}
|
||||
export const getSelectedCity = (id: string) => useObjectsStore.getState().id[id].selectedCity
|
||||
export const setSelectedCity = (id: string, city: number | null) => useObjectsStore.setState((state) => {
|
||||
return {
|
||||
id: {
|
||||
...state.id,
|
||||
[id]: { ...state.id[id], selectedCity: city }
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const setSelectedDistrict = (district: number | null) => {
|
||||
useObjectsStore.setState(() => ({ selectedDistrict: district }))
|
||||
}
|
||||
export const getSelectedRegion = (id: string) => useObjectsStore.getState().id[id].selectedRegion
|
||||
export const setSelectedRegion = (id: string, region: number | null) => useObjectsStore.setState((state) => {
|
||||
return {
|
||||
id: {
|
||||
...state.id,
|
||||
[id]: { ...state.id[id], selectedRegion: region }
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const setSelectedCity = (city: number | null) => {
|
||||
useObjectsStore.setState(() => ({ selectedCity: city }))
|
||||
}
|
||||
export const getSelectedDistrict = (id: string) => useObjectsStore.getState().id[id].selectedDistrict
|
||||
export const setSelectedDistrict = (id: string, district: number | null) => useObjectsStore.setState((state) => {
|
||||
return {
|
||||
id: {
|
||||
...state.id,
|
||||
[id]: { ...state.id[id], selectedDistrict: district }
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const getSelectedYear = () => {
|
||||
return useObjectsStore.getState().selectedYear
|
||||
}
|
||||
|
||||
const setSelectedYear = (year: number | null) => {
|
||||
useObjectsStore.setState(() => ({ selectedYear: year }))
|
||||
}
|
||||
export const getSelectedYear = (id: string) => useObjectsStore.getState().id[id].selectedYear
|
||||
export const setSelectedYear = (id: string, year: number | null) => useObjectsStore.setState((state) => {
|
||||
return {
|
||||
id: {
|
||||
...state.id,
|
||||
[id]: { ...state.id[id], selectedYear: year }
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const getCurrentObjectId = () => {
|
||||
return useObjectsStore.getState().currentObjectId
|
||||
}
|
||||
|
||||
const setCurrentObjectId = (objectId: string | null) => {
|
||||
useObjectsStore.setState(() => ({ currentObjectId: objectId }))
|
||||
}
|
||||
|
||||
export {
|
||||
getSelectedCity,
|
||||
setSelectedCity,
|
||||
getSelectedYear,
|
||||
setSelectedYear,
|
||||
getCurrentObjectId,
|
||||
setCurrentObjectId,
|
||||
setSelectedRegion,
|
||||
setSelectedDistrict
|
||||
}
|
||||
export const getCurrentObjectId = (id: string) => useObjectsStore.getState().id[id].currentObjectId
|
||||
export const setCurrentObjectId = (id: string, objectId: string | null) => useObjectsStore.setState((state) => {
|
||||
return {
|
||||
id: {
|
||||
...state.id,
|
||||
[id]: { ...state.id[id], currentObjectId: objectId }
|
||||
}
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user