diff --git a/package.json b/package.json index 5a2197f..4a5a8eb 100644 --- a/package.json +++ b/package.json @@ -10,13 +10,15 @@ }, "dependencies": { "antd": "^4.23.6", + "immer": "^9.0.16", "mapbox-gl": "npm:empty-npm-package@1.0.0", "maplibre-gl": "^2.4.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-icons": "^4.6.0", "react-map-gl": "^7.0.19", - "tailwind-merge": "^1.7.0" + "tailwind-merge": "^1.7.0", + "zustand": "^4.1.3" }, "devDependencies": { "@types/react": "^18.0.22", diff --git a/src/Map/Layers.jsx b/src/Map/Layers.jsx index 1255609..0a351de 100644 --- a/src/Map/Layers.jsx +++ b/src/Map/Layers.jsx @@ -1,7 +1,15 @@ import { Layer, Source } from "react-map-gl"; import { gridLayer, pointLayer } from "./layers-config"; +import { + getGridVisibility, + getPointsVisibility, + useLayersStore, +} from "../stores/useLayersStore"; export const Layers = () => { + const isPointsVisible = useLayersStore(getPointsVisibility); + const isGridVisible = useLayersStore(getGridVisibility); + return ( <> { "https://business.spatiality.website/martin/public.service_polygon/{z}/{x}/{y}.pbf", ]} > - + { "https://business.spatiality.website/martin/public.service_point/{z}/{x}/{y}.pbf", ]} > - + ); diff --git a/src/Map/layers-config.js b/src/Map/layers-config.js index 63365ec..9c95538 100644 --- a/src/Map/layers-config.js +++ b/src/Map/layers-config.js @@ -3,6 +3,7 @@ export const pointLayer = { type: "circle", source: "points", "source-layer": "public.service_point", + layout: {}, paint: { "circle-color": "#da11b2", "circle-radius": 4, diff --git a/src/modules/Sidebar/LayersVisibility.jsx b/src/modules/Sidebar/LayersVisibility.jsx new file mode 100644 index 0000000..a1be8a8 --- /dev/null +++ b/src/modules/Sidebar/LayersVisibility.jsx @@ -0,0 +1,34 @@ +import { Title } from "../../components/Title"; +import { Checkbox } from "antd"; +import { + getGridVisibility, + getPointsVisibility, + useLayersStore, +} from "../../stores/useLayersStore"; + +export const LayersVisibility = () => { + const { toggleVisibility } = useLayersStore(); + const isPointsVisible = useLayersStore(getPointsVisibility); + const isGridVisible = useLayersStore(getGridVisibility); + + return ( +
+ + <div className={"space-y-1"}> + <Checkbox + onChange={() => toggleVisibility("points")} + checked={isPointsVisible} + > + Точки постаматов + </Checkbox> + <Checkbox + className={"!ml-0"} + onChange={() => toggleVisibility("grid")} + checked={isGridVisible} + > + Тепловая карта + </Checkbox> + </div> + </div> + ); +}; diff --git a/src/modules/Sidebar/Sidebar.jsx b/src/modules/Sidebar/Sidebar.jsx index a93362d..bd24a1d 100644 --- a/src/modules/Sidebar/Sidebar.jsx +++ b/src/modules/Sidebar/Sidebar.jsx @@ -1,8 +1,9 @@ import { RegionSelect } from "./RegionSelect"; -import { Button, Checkbox } from "antd"; +import { Button } from "antd"; import { BsChevronLeft } from "react-icons/bs"; import { ObjectTypesSelect } from "./ObjectTypesSelect"; import { RatingSlider } from "./RatingSlider"; +import { LayersVisibility } from "./LayersVisibility"; export const Sidebar = () => { return ( @@ -14,10 +15,11 @@ export const Sidebar = () => { > Настройки </Button> + <div className="space-y-5"> + <LayersVisibility /> <RegionSelect /> <ObjectTypesSelect /> - <Checkbox>Тепловая карта</Checkbox> <RatingSlider /> <div className="flex items-center space-x-2"> <Button type="primary">Экспорт данных</Button> diff --git a/src/stores/useLayersStore.js b/src/stores/useLayersStore.js new file mode 100644 index 0000000..c0f1a9c --- /dev/null +++ b/src/stores/useLayersStore.js @@ -0,0 +1,29 @@ +import create from "zustand"; +import { immer } from "zustand/middleware/immer"; + +const INITIAL_STATE = { + points: { + visible: true, + filter: {}, + }, + grid: { + visible: true, + filter: {}, + }, +}; + +const store = (set) => ({ + layers: INITIAL_STATE, + toggleVisibility: (layerId) => + set((state) => { + state.layers[layerId].visible = !state.layers[layerId].visible; + }), +}); + +export const useLayersStore = create(immer(store)); + +export const getLayerVisibility = (layerId) => (state) => + state.layers[layerId].visible; + +export const getPointsVisibility = getLayerVisibility("points"); +export const getGridVisibility = getLayerVisibility("grid"); diff --git a/yarn.lock b/yarn.lock index 4e5f87e..a0e5df5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -992,6 +992,11 @@ ieee754@^1.1.12: resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352" integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA== +immer@^9.0.16: + version "9.0.16" + resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.16.tgz#8e7caab80118c2b54b37ad43e05758cdefad0198" + integrity sha512-qenGE7CstVm1NrHQbMh8YaSzTZTFNP3zPqr3YU0S0UY441j4bJTg4A2Hh5KAhwgaiU6ZZ1Ar6y/2f4TblnMReQ== + ini@^1.3.5: version "1.3.8" resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c" @@ -1881,6 +1886,11 @@ update-browserslist-db@^1.0.9: escalade "^3.1.1" picocolors "^1.0.0" +use-sync-external-store@1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a" + integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA== + util-deprecate@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf" @@ -1923,3 +1933,10 @@ yaml@^1.10.2: version "1.10.2" resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b" integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg== + +zustand@^4.1.3: + version "4.1.3" + resolved "https://registry.yarnpkg.com/zustand/-/zustand-4.1.3.tgz#72bc4c0ed8ed906fbd92c7c20cde8dd6114c018f" + integrity sha512-AdFyr6+4sVD6xlyc/ArQaOrleqzxJEBbAXglufZ5lgvisoz8GUN3icOrKOnX1uRSxmpmdVUQPen9hhymWIzhBg== + dependencies: + use-sync-external-store "1.2.0"