From 763a4d51b69205f8b62844b3dcd2964f416197d2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nils=20B=C3=BChner?= Date: Tue, 20 Mar 2018 13:55:04 +0100 Subject: [PATCH 1/2] Add a zoom out button --- .../ZoomOutButton/ZoomOutButton.example.jsx | 56 ++++++++++++++ .../ZoomOutButton/ZoomOutButton.example.md | 8 ++ src/Button/ZoomOutButton/ZoomOutButton.jsx | 76 +++++++++++++++++++ .../ZoomOutButton/ZoomOutButton.spec.jsx | 36 +++++++++ src/index.js | 2 + webpack.examples.common.config.js | 3 +- 6 files changed, 180 insertions(+), 1 deletion(-) create mode 100644 src/Button/ZoomOutButton/ZoomOutButton.example.jsx create mode 100644 src/Button/ZoomOutButton/ZoomOutButton.example.md create mode 100644 src/Button/ZoomOutButton/ZoomOutButton.jsx create mode 100644 src/Button/ZoomOutButton/ZoomOutButton.spec.jsx diff --git a/src/Button/ZoomOutButton/ZoomOutButton.example.jsx b/src/Button/ZoomOutButton/ZoomOutButton.example.jsx new file mode 100644 index 0000000000..eb8cb238be --- /dev/null +++ b/src/Button/ZoomOutButton/ZoomOutButton.example.jsx @@ -0,0 +1,56 @@ +import React from 'react'; +import { render } from 'react-dom'; + +import OlMap from 'ol/map'; +import OlView from 'ol/view'; +import OlLayerTile from 'ol/layer/tile'; +import OlSourceOsm from 'ol/source/osm'; +import olProj from 'ol/proj'; + +import { + ZoomOutButton +} from '../../index.js'; + +// +// ***************************** SETUP ***************************************** +// +const map = new OlMap({ + layers: [ + new OlLayerTile({ + name: 'OSM', + source: new OlSourceOsm() + }) + ], + view: new OlView({ + center: olProj.fromLonLat([37.40570, 8.81566]), + zoom: 19 + }) +}); + +// +// ***************************** SETUP END ************************************* +// + +render( +
+
+ +
+ Zoom out button: + + Zoom out (-) + +
+ +
, + + // Target + document.getElementById('exampleContainer'), + + // Callback + () => { + map.setTarget('map'); + } +); diff --git a/src/Button/ZoomOutButton/ZoomOutButton.example.md b/src/Button/ZoomOutButton/ZoomOutButton.example.md new file mode 100644 index 0000000000..a78d537da5 --- /dev/null +++ b/src/Button/ZoomOutButton/ZoomOutButton.example.md @@ -0,0 +1,8 @@ +--- +layout: basic.hbs +title: ZoomOutButton example +description: This is an example using `ZoomOutButton` +collection: Examples +--- + +This example demonstrates the use of the `ZoomOutButton`. diff --git a/src/Button/ZoomOutButton/ZoomOutButton.jsx b/src/Button/ZoomOutButton/ZoomOutButton.jsx new file mode 100644 index 0000000000..ff8b29a74f --- /dev/null +++ b/src/Button/ZoomOutButton/ZoomOutButton.jsx @@ -0,0 +1,76 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import OlMap from 'ol/map'; + +import { + SimpleButton +} from '../../index'; + +/** + * Class representating a zoom in button. + * + * @class The ZoomOutButton + * @extends React.Component + */ +class ZoomOutButton extends React.Component { + + /** + * The className added to this component. + * @type {String} + * @private + */ + className = 'react-geo-zoomoutbutton' + + static propTypes = { + /** + * The className which should be added. + * @type {String} + */ + className: PropTypes.string, + + /** + * Instance of OL map this component is bound to. + * + * @type {OlMap} + */ + map: PropTypes.instanceOf(OlMap).isRequired, + } + + /** + * Called when the button is clicked. + * + * @method + */ + onClick = () => { + const map = this.props.map; + const view = map.getView(); + const currentZoom = view.getZoom(); + + view.setZoom(currentZoom - 1); + } + + /** + * The render function. + */ + render() { + const { + className, + ...passThroughProps + } = this.props; + + const finalClassName = className + ? `${className} ${this.className}` + : this.className; + + return ( + + ); + } +} + +export default ZoomOutButton; diff --git a/src/Button/ZoomOutButton/ZoomOutButton.spec.jsx b/src/Button/ZoomOutButton/ZoomOutButton.spec.jsx new file mode 100644 index 0000000000..cf9e8173fd --- /dev/null +++ b/src/Button/ZoomOutButton/ZoomOutButton.spec.jsx @@ -0,0 +1,36 @@ +/*eslint-env jest*/ + +import TestUtil from '../../Util/TestUtil'; + +import { ZoomOutButton } from '../../index'; + +describe('', () => { + + let map; + + beforeEach(() => { + map = TestUtil.createMap(); + }); + + it('is defined', () => { + expect(ZoomOutButton).not.toBeUndefined(); + }); + + it('can be rendered', () => { + const wrapper = TestUtil.mountComponent(ZoomOutButton); + expect(wrapper).not.toBeUndefined(); + }); + + it('zooms out when clicked', () => { + const wrapper = TestUtil.mountComponent(ZoomOutButton, {map}); + + const initialZoom = map.getView().getZoom(); + + wrapper.instance().onClick(); + + const newZoom = map.getView().getZoom(); + + expect(newZoom).toBe(initialZoom - 1); + }); + +}); diff --git a/src/index.js b/src/index.js index 082d936eeb..b041701c88 100644 --- a/src/index.js +++ b/src/index.js @@ -6,6 +6,7 @@ import ToggleGroup from './Button/ToggleGroup/ToggleGroup.jsx'; import MeasureButton from './Button/MeasureButton/MeasureButton.jsx'; import DigitizeButton from './Button/DigitizeButton/DigitizeButton.jsx'; import ZoomInButton from './Button/ZoomInButton/ZoomInButton.jsx'; +import ZoomOutButton from './Button/ZoomInButton/ZoomOutButton.jsx'; import CoordinateReferenceSystemCombo from './Field/CoordinateReferenceSystemCombo/CoordinateReferenceSystemCombo.jsx'; import NominatimSearch from './Field/NominatimSearch/NominatimSearch.jsx'; import ScaleCombo from './Field/ScaleCombo/ScaleCombo.jsx'; @@ -55,6 +56,7 @@ export { MeasureButton, DigitizeButton, ZoomInButton, + ZoomOutButton, LayerTree, LayerTreeNode, Legend, diff --git a/webpack.examples.common.config.js b/webpack.examples.common.config.js index f2143cca45..f0b0df1e42 100644 --- a/webpack.examples.common.config.js +++ b/webpack.examples.common.config.js @@ -11,7 +11,8 @@ const config = { 'Button/MeasureButton/MeasureButton': './src/Button/MeasureButton/MeasureButton.example.jsx', 'Button/DigitizeButton/DigitizeButton': './src/Button/DigitizeButton/DigitizeButton.example.jsx', 'Button/UploadButton/UploadButton': './src/Button/UploadButton/UploadButton.example.jsx', - 'Button/ZoomInButton/ZoomInButton': './src/Button/ZoomInButton/ZoomInButton.example.jsx', + 'Button/ZoomOutButton/ZoomInButton': './src/Button/ZoomInButton/ZoomInButton.example.jsx', + 'Button/ZoomOutButton/ZoomOutButton': './src/Button/ZoomOutButton/ZoomOutButton.example.jsx', 'CircleMenu/CircleMenu': './src/CircleMenu/CircleMenu.example.jsx', 'Field/CoordinateReferenceSystemCombo/CoordinateReferenceSystemCombo': './src/Field/CoordinateReferenceSystemCombo/CoordinateReferenceSystemCombo.example.jsx', 'Field/NominatimSearch/NominatimSearch': './src/Field/NominatimSearch/NominatimSearch.example.jsx', From 9c6c410fa4946227c581753efe8eeb51ff1645ae Mon Sep 17 00:00:00 2001 From: Marc Jansen Date: Tue, 20 Mar 2018 15:31:35 +0100 Subject: [PATCH 2/2] Fix API docs --- src/Button/ZoomOutButton/ZoomOutButton.jsx | 2 +- src/index.js | 2 +- webpack.examples.common.config.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Button/ZoomOutButton/ZoomOutButton.jsx b/src/Button/ZoomOutButton/ZoomOutButton.jsx index ff8b29a74f..aad55c9322 100644 --- a/src/Button/ZoomOutButton/ZoomOutButton.jsx +++ b/src/Button/ZoomOutButton/ZoomOutButton.jsx @@ -8,7 +8,7 @@ import { } from '../../index'; /** - * Class representating a zoom in button. + * Class representing a zoom out button. * * @class The ZoomOutButton * @extends React.Component diff --git a/src/index.js b/src/index.js index b041701c88..e94c3c30b2 100644 --- a/src/index.js +++ b/src/index.js @@ -6,7 +6,7 @@ import ToggleGroup from './Button/ToggleGroup/ToggleGroup.jsx'; import MeasureButton from './Button/MeasureButton/MeasureButton.jsx'; import DigitizeButton from './Button/DigitizeButton/DigitizeButton.jsx'; import ZoomInButton from './Button/ZoomInButton/ZoomInButton.jsx'; -import ZoomOutButton from './Button/ZoomInButton/ZoomOutButton.jsx'; +import ZoomOutButton from './Button/ZoomOutButton/ZoomOutButton.jsx'; import CoordinateReferenceSystemCombo from './Field/CoordinateReferenceSystemCombo/CoordinateReferenceSystemCombo.jsx'; import NominatimSearch from './Field/NominatimSearch/NominatimSearch.jsx'; import ScaleCombo from './Field/ScaleCombo/ScaleCombo.jsx'; diff --git a/webpack.examples.common.config.js b/webpack.examples.common.config.js index f0b0df1e42..9bec62b642 100644 --- a/webpack.examples.common.config.js +++ b/webpack.examples.common.config.js @@ -11,7 +11,7 @@ const config = { 'Button/MeasureButton/MeasureButton': './src/Button/MeasureButton/MeasureButton.example.jsx', 'Button/DigitizeButton/DigitizeButton': './src/Button/DigitizeButton/DigitizeButton.example.jsx', 'Button/UploadButton/UploadButton': './src/Button/UploadButton/UploadButton.example.jsx', - 'Button/ZoomOutButton/ZoomInButton': './src/Button/ZoomInButton/ZoomInButton.example.jsx', + 'Button/ZoomInButton/ZoomInButton': './src/Button/ZoomInButton/ZoomInButton.example.jsx', 'Button/ZoomOutButton/ZoomOutButton': './src/Button/ZoomOutButton/ZoomOutButton.example.jsx', 'CircleMenu/CircleMenu': './src/CircleMenu/CircleMenu.example.jsx', 'Field/CoordinateReferenceSystemCombo/CoordinateReferenceSystemCombo': './src/Field/CoordinateReferenceSystemCombo/CoordinateReferenceSystemCombo.example.jsx',