From 9770af4050785ea09ed16855a33779fdbfd8577a Mon Sep 17 00:00:00 2001 From: Andrey Bakhvalov <bakhvalov.andrey@gmail.com> Date: Thu, 4 Jul 2019 12:15:57 +0300 Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20store=20viewport=20in=20?= =?UTF-8?q?app=20state?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 2 +- src/components/App.js | 13 ++++++++----- src/config/index.js | 2 ++ src/config/initViewport.js | 5 +++++ 4 files changed, 16 insertions(+), 6 deletions(-) create mode 100644 src/config/index.js create mode 100644 src/config/initViewport.js diff --git a/package-lock.json b/package-lock.json index cdb69da..f9ca103 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "style-editor", - "version": "0.0.0", + "version": "0.1.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/src/components/App.js b/src/components/App.js index 843e52c..ca4ed83 100755 --- a/src/components/App.js +++ b/src/components/App.js @@ -1,15 +1,20 @@ import React, { useState, createRef } from 'react'; import MapGL from '@urbica/react-map-gl'; import { validate } from '@mapbox/mapbox-gl-style-spec'; -import initStyle from '../config/initStyle'; +import { initStyle, initViewport } from '../config'; import 'mapbox-gl/dist/mapbox-gl.css'; const initStyleString = JSON.stringify(initStyle, null, 1); function App() { const [style, setStyle] = useState(initStyleString); + const [viewport, setViewport] = useState(initViewport); const editorRef = createRef(); + const onViewportChange = (newViewport) => { + setViewport(newViewport); + }; + const setStyleHandler = () => { let { value } = editorRef.current; value = value.replace(/'/g, '"'); @@ -37,10 +42,8 @@ function App() { }} mapStyle={JSON.parse(style)} accessToken='pk.eyJ1IjoiZGV2aWNlMjUiLCJhIjoiY2lzaGN3d2tiMDAxOTJ6bGYydDZrcHptdiJ9.UK55aUzBquqYns1AdnuTQg' - latitude={0} - longitude={0} - zoom={0} - onViewportChange={() => ({})} + {...viewport} + onViewportChange={onViewportChange} /> <textarea ref={editorRef} diff --git a/src/config/index.js b/src/config/index.js new file mode 100644 index 0000000..9883439 --- /dev/null +++ b/src/config/index.js @@ -0,0 +1,2 @@ +export { default as initStyle }from './initStyle'; +export { default as initViewport }from './initViewport'; diff --git a/src/config/initViewport.js b/src/config/initViewport.js new file mode 100644 index 0000000..053e146 --- /dev/null +++ b/src/config/initViewport.js @@ -0,0 +1,5 @@ +export default { + latitude: 0, + longitude: 0, + zoom: 0 +};