How to use _updateViewport method in Playwright Internal

Best JavaScript code snippet using playwright-internal

Run Playwright Internal automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

navigation-control.js

Source: navigation-control.js Github

copy
1import {createElement} from 'react';
2import PropTypes from 'prop-types';
3import BaseControl from './base-control';
4
5import MapState from '../utils/map-state';
6import TransitionManager from '../utils/transition-manager';
7
8import deprecateWarn from '../utils/deprecate-warn';
9
10const LINEAR_TRANSITION_PROPS = Object.assign({}, TransitionManager.defaultProps, {
11  transitionDuration: 300
12});
13
14const propTypes = Object.assign({}, BaseControl.propTypes, {
15  // Custom className
16  className: PropTypes.string,
17  // Callbacks fired when the user interacted with the map. The object passed to the callbacks
18  // contains viewport properties such as `longitude`, `latitude`, `zoom` etc.
19  onViewStateChange: PropTypes.func,
20  onViewportChange: PropTypes.func,
21  // Show/hide compass button
22  showCompass: PropTypes.bool,
23  // Show/hide zoom buttons
24  showZoom: PropTypes.bool
25});
26
27const defaultProps = Object.assign({}, BaseControl.defaultProps, {
28  className: '',
29  onViewStateChange: () => {},
30  onViewportChange: () => {},
31  showCompass: true,
32  showZoom: true
33});
34
35/*
36 * PureComponent doesn't update when context changes, so
37 * implementing our own shouldComponentUpdate here.
38 */
39export default class NavigationControl extends BaseControl {
40
41  constructor(props) {
42    super(props);
43    // Check for deprecated props
44    deprecateWarn(props);
45
46    this._updateViewport = this._updateViewport.bind(this);
47    this._onZoomIn = this._onZoomIn.bind(this);
48    this._onZoomOut = this._onZoomOut.bind(this);
49    this._onResetNorth = this._onResetNorth.bind(this);
50    this._renderCompass = this._renderCompass.bind(this);
51    this._renderButton = this._renderButton.bind(this);
52  }
53
54  shouldComponentUpdate(nextProps, nextState, nextContext) {
55    return this.context.viewport.bearing !== nextContext.viewport.bearing;
56  }
57
58  _updateViewport(opts) {
59    const {viewport} = this.context;
60    const mapState = new MapState(Object.assign({}, viewport, opts));
61    const viewState = Object.assign({}, mapState.getViewportProps(), LINEAR_TRANSITION_PROPS);
62
63    // Call new style callback
64    this.props.onViewStateChange({viewState});
65
66    // Call old style callback
67    // TODO(deprecate): remove this check when `onChangeViewport` gets deprecated
68    const onViewportChange = this.props.onChangeViewport || this.props.onViewportChange;
69    onViewportChange(viewState);
70  }
71
72  _onZoomIn() {
73    this._updateViewport({zoom: this.context.viewport.zoom + 1});
74  }
75
76  _onZoomOut() {
77    this._updateViewport({zoom: this.context.viewport.zoom - 1});
78  }
79
80  _onResetNorth() {
81    this._updateViewport({bearing: 0, pitch: 0});
82  }
83
84  _renderCompass() {
85    const {bearing} = this.context.viewport;
86    return createElement('span', {
87      className: 'mapboxgl-ctrl-compass-arrow',
88      style: {transform: `rotate(${bearing}deg)`}
89    });
90  }
91
92  _renderButton(type, label, callback, children) {
93    return createElement('button', {
94      key: type,
95      className: `mapboxgl-ctrl-icon mapboxgl-ctrl-${type}`,
96      type: 'button',
97      title: label,
98      onClick: callback,
99      children
100    });
101  }
102
103  render() {
104
105    const {className, showCompass, showZoom} = this.props;
106
107    return createElement('div', {
108      className: `mapboxgl-ctrl mapboxgl-ctrl-group ${className}`,
109      ref: this._onContainerLoad
110    }, [
111      showZoom && this._renderButton('zoom-in', 'Zoom In', this._onZoomIn),
112      showZoom && this._renderButton('zoom-out', 'Zoom Out', this._onZoomOut),
113      showCompass &&
114        this._renderButton('compass', 'Reset North', this._onResetNorth, this._renderCompass())
115    ]);
116  }
117}
118
119NavigationControl.displayName = 'NavigationControl';
120NavigationControl.propTypes = propTypes;
121NavigationControl.defaultProps = defaultProps;
122
Full Screen

MapMarkers.js

Source: MapMarkers.js Github

copy
1import MapGL, { Marker, NavigationControl, Popup } from 'react-map-gl';
2
3import CITIES from '../demos/mock/cities.json';
4import CityInfo from '../demos/map-gl/city-info';
5import CityPin from '../demos/map-gl/city-pin';
6import { Component } from 'react';
7
8class MapMarkers extends Component {
9  state = {
10    viewport: {
11      latitude: 37.785164,
12      longitude: -100,
13      zoom: 3.5,
14      bearing: 0,
15      pitch: 0
16    },
17    popupInfo: null
18  };
19
20  _updateViewport = viewport => {
21    this.setState({ viewport });
22  };
23
24  _renderCityMarker = (city, index) => (
25    <Marker
26      key={`marker-${index}`}
27      longitude={city.longitude}
28      latitude={city.latitude}
29    >
30      <CityPin size={20} onClick={() => this.setState({ popupInfo: city })} />
31    </Marker>
32  );
33
34  _renderPopup() {
35    const { popupInfo } = this.state;
36
37    return (
38      popupInfo && (
39        <Popup
40          tipSize={5}
41          anchor="top"
42          longitude={popupInfo.longitude}
43          latitude={popupInfo.latitude}
44          onClose={() => this.setState({ popupInfo: null })}
45        >
46          <CityInfo info={popupInfo} />
47        </Popup>
48      )
49    );
50  }
51
52  render() {
53    const { viewport } = this.state;
54
55    return (
56      <div className="full-workspace">
57        <MapGL
58          {...viewport}
59          width="100%"
60          height="100%"
61          mapStyle="mapbox://styles/mapbox/dark-v9"
62          onViewportChange={this._updateViewport}
63          mapboxApiAccessToken={process.env.mapBoxApi}
64        >
65          {CITIES.map(this._renderCityMarker)}
66          {this._renderPopup()}
67          <NavigationControl onViewportChange={this._updateViewport} />
68        </MapGL>
69      </div>
70    );
71  }
72}
73
74export default MapMarkers;
75
Full Screen

Accelerate Your Automation Test Cycles With LambdaTest

Leverage LambdaTest’s cloud-based platform to execute your automation tests in parallel and trim down your test execution time significantly. Your first 100 automation testing minutes are on us.

Try LambdaTest

Run JavaScript Tests on LambdaTest Cloud Grid

Execute automation tests with Playwright Internal on a cloud-based Grid of 3000+ real browsers and operating systems for both web and mobile applications.

Test now for Free
LambdaTestX

We use cookies to give you the best experience. Cookies help to provide a more personalized experience and relevant advertising for you, and web analytics for us. Learn More in our Cookies policy, Privacy & Terms of service

Allow Cookie
Sarah

I hope you find the best code examples for your project.

If you want to accelerate automated browser testing, try LambdaTest. Your first 100 automation testing minutes are FREE.

Sarah Elson (Product & Growth Lead)