How to use _updateViewport method in Playwright Internal

Best JavaScript code snippet using playwright-internal

ListControl.js

Source:ListControl.js Github

copy

Full Screen

...73 this._variableOffsets = new Int32Array(0);74 this._clearContents();75 if (this._mode !== UI.ListMode.NonViewport) {76 this.element.addEventListener('scroll', () => {77 this._updateViewport(this.element.scrollTop, this.element.offsetHeight);78 }, false);79 }80 }81 /**82 * @param {!UI.ListModel<T>} model83 */84 setModel(model) {85 this._itemToElement.clear();86 const length = this._model.length;87 this._model.removeEventListener(UI.ListModel.Events.ItemsReplaced, this._replacedItemsInRange, this);88 this._model = model;89 this._model.addEventListener(UI.ListModel.Events.ItemsReplaced, this._replacedItemsInRange, this);90 this.invalidateRange(0, length);91 }92 /**93 * @param {!Common.Event} event94 */95 _replacedItemsInRange(event) {96 const data = /** @type {{index: number, removed: !Array<T>, inserted: number}} */ (event.data);97 const from = data.index;98 const to = from + data.removed.length;99 const oldSelectedItem = this._selectedItem;100 const oldSelectedElement = oldSelectedItem ? (this._itemToElement.get(oldSelectedItem) || null) : null;101 for (let i = 0; i < data.removed.length; i++)102 this._itemToElement.delete(data.removed[i]);103 this._invalidate(from, to, data.inserted);104 if (this._selectedIndex >= to) {105 this._selectedIndex += data.inserted - (to - from);106 this._selectedItem = this._model.at(this._selectedIndex);107 } else if (this._selectedIndex >= from) {108 let index = this._findFirstSelectable(from + data.inserted, +1, false);109 if (index === -1)110 index = this._findFirstSelectable(from - 1, -1, false);111 this._select(index, oldSelectedItem, oldSelectedElement);112 }113 }114 /**115 * @param {T} item116 */117 refreshItem(item) {118 const index = this._model.indexOf(item);119 if (index === -1) {120 console.error('Item to refresh is not present');121 return;122 }123 this._itemToElement.delete(item);124 this.invalidateRange(index, index + 1);125 if (this._selectedIndex !== -1)126 this._select(this._selectedIndex, null, null);127 }128 /**129 * @param {number} from130 * @param {number} to131 */132 invalidateRange(from, to) {133 this._invalidate(from, to, to - from);134 }135 viewportResized() {136 if (this._mode === UI.ListMode.NonViewport)137 return;138 // TODO(dgozman): try to keep visible scrollTop the same.139 const scrollTop = this.element.scrollTop;140 const viewportHeight = this.element.offsetHeight;141 this._clearViewport();142 this._updateViewport(Number.constrain(scrollTop, 0, this._totalHeight() - viewportHeight), viewportHeight);143 }144 invalidateItemHeight() {145 if (this._mode !== UI.ListMode.EqualHeightItems) {146 console.error('Only supported in equal height items mode');147 return;148 }149 this._fixedHeight = 0;150 if (this._model.length) {151 this._itemToElement.clear();152 this._invalidate(0, this._model.length, this._model.length);153 }154 }155 /**156 * @param {?Node} node157 * @return {?T}158 */159 itemForNode(node) {160 while (node && node.parentNodeOrShadowHost() !== this.element)161 node = node.parentNodeOrShadowHost();162 if (!node)163 return null;164 const element = /** @type {!Element} */ (node);165 const index = this._model.findIndex(item => this._itemToElement.get(item) === element);166 return index !== -1 ? this._model.at(index) : null;167 }168 /**169 * @param {T} item170 * @param {boolean=} center171 */172 scrollItemIntoView(item, center) {173 const index = this._model.indexOf(item);174 if (index === -1) {175 console.error('Attempt to scroll onto missing item');176 return;177 }178 this._scrollIntoView(index, center);179 }180 /**181 * @return {?T}182 */183 selectedItem() {184 return this._selectedItem;185 }186 /**187 * @return {number}188 */189 selectedIndex() {190 return this._selectedIndex;191 }192 /**193 * @param {?T} item194 * @param {boolean=} center195 * @param {boolean=} dontScroll196 */197 selectItem(item, center, dontScroll) {198 let index = -1;199 if (item !== null) {200 index = this._model.indexOf(item);201 if (index === -1) {202 console.error('Attempt to select missing item');203 return;204 }205 if (!this._delegate.isItemSelectable(item)) {206 console.error('Attempt to select non-selectable item');207 return;208 }209 }210 if (this._selectedIndex !== index)211 this._select(index);212 if (index !== -1 && !dontScroll)213 this._scrollIntoView(index, center);214 }215 /**216 * @param {boolean=} canWrap217 * @param {boolean=} center218 * @return {boolean}219 */220 selectPreviousItem(canWrap, center) {221 if (this._selectedIndex === -1 && !canWrap)222 return false;223 let index = this._selectedIndex === -1 ? this._model.length - 1 : this._selectedIndex - 1;224 index = this._findFirstSelectable(index, -1, !!canWrap);225 if (index !== -1) {226 this._scrollIntoView(index, center);227 this._select(index);228 return true;229 }230 return false;231 }232 /**233 * @param {boolean=} canWrap234 * @param {boolean=} center235 * @return {boolean}236 */237 selectNextItem(canWrap, center) {238 if (this._selectedIndex === -1 && !canWrap)239 return false;240 let index = this._selectedIndex === -1 ? 0 : this._selectedIndex + 1;241 index = this._findFirstSelectable(index, +1, !!canWrap);242 if (index !== -1) {243 this._scrollIntoView(index, center);244 this._select(index);245 return true;246 }247 return false;248 }249 /**250 * @param {boolean=} center251 * @return {boolean}252 */253 selectItemPreviousPage(center) {254 if (this._mode === UI.ListMode.NonViewport)255 return false;256 let index = this._selectedIndex === -1 ? this._model.length - 1 : this._selectedIndex;257 index = this._findPageSelectable(index, -1);258 if (index !== -1) {259 this._scrollIntoView(index, center);260 this._select(index);261 return true;262 }263 return false;264 }265 /**266 * @param {boolean=} center267 * @return {boolean}268 */269 selectItemNextPage(center) {270 if (this._mode === UI.ListMode.NonViewport)271 return false;272 let index = this._selectedIndex === -1 ? 0 : this._selectedIndex;273 index = this._findPageSelectable(index, +1);274 if (index !== -1) {275 this._scrollIntoView(index, center);276 this._select(index);277 return true;278 }279 return false;280 }281 /**282 * @param {number} index283 * @param {boolean=} center284 */285 _scrollIntoView(index, center) {286 if (this._mode === UI.ListMode.NonViewport) {287 this._elementAtIndex(index).scrollIntoViewIfNeeded(!!center);288 return;289 }290 const top = this._offsetAtIndex(index);291 const bottom = this._offsetAtIndex(index + 1);292 const viewportHeight = this.element.offsetHeight;293 if (center) {294 const scrollTo = (top + bottom) / 2 - viewportHeight / 2;295 this._updateViewport(Number.constrain(scrollTo, 0, this._totalHeight() - viewportHeight), viewportHeight);296 return;297 }298 const scrollTop = this.element.scrollTop;299 if (top < scrollTop)300 this._updateViewport(top, viewportHeight);301 else if (bottom > scrollTop + viewportHeight)302 this._updateViewport(bottom - viewportHeight, viewportHeight);303 }304 /**305 * @param {!Event} event306 */307 _onClick(event) {308 const item = this.itemForNode(/** @type {?Node} */ (event.target));309 if (item && this._delegate.isItemSelectable(item))310 this.selectItem(item);311 }312 /**313 * @param {!Event} event314 */315 _onKeyDown(event) {316 let selected = false;317 switch (event.key) {318 case 'ArrowUp':319 selected = this.selectPreviousItem(true, false);320 break;321 case 'ArrowDown':322 selected = this.selectNextItem(true, false);323 break;324 case 'PageUp':325 selected = this.selectItemPreviousPage(false);326 break;327 case 'PageDown':328 selected = this.selectItemNextPage(false);329 break;330 }331 if (selected)332 event.consume();333 }334 /**335 * @return {number}336 */337 _totalHeight() {338 return this._offsetAtIndex(this._model.length);339 }340 /**341 * @param {number} offset342 * @return {number}343 */344 _indexAtOffset(offset) {345 if (this._mode === UI.ListMode.NonViewport)346 throw 'There should be no offset conversions in non-viewport mode';347 if (!this._model.length || offset < 0)348 return 0;349 if (this._mode === UI.ListMode.VariousHeightItems) {350 return Math.min(351 this._model.length - 1, this._variableOffsets.lowerBound(offset, undefined, 0, this._model.length));352 }353 if (!this._fixedHeight)354 this._measureHeight();355 return Math.min(this._model.length - 1, Math.floor(offset / this._fixedHeight));356 }357 /**358 * @param {number} index359 * @return {!Element}360 */361 _elementAtIndex(index) {362 const item = this._model.at(index);363 let element = this._itemToElement.get(item);364 if (!element) {365 element = this._delegate.createElementForItem(item);366 this._itemToElement.set(item, element);367 }368 return element;369 }370 /**371 * @param {number} index372 * @return {number}373 */374 _offsetAtIndex(index) {375 if (this._mode === UI.ListMode.NonViewport)376 throw 'There should be no offset conversions in non-viewport mode';377 if (!this._model.length)378 return 0;379 if (this._mode === UI.ListMode.VariousHeightItems)380 return this._variableOffsets[index];381 if (!this._fixedHeight)382 this._measureHeight();383 return index * this._fixedHeight;384 }385 _measureHeight() {386 this._fixedHeight = this._delegate.heightForItem(this._model.at(0));387 if (!this._fixedHeight)388 this._fixedHeight = UI.measurePreferredSize(this._elementAtIndex(0), this.element).height;389 }390 /**391 * @param {number} index392 * @param {?T=} oldItem393 * @param {?Element=} oldElement394 */395 _select(index, oldItem, oldElement) {396 if (oldItem === undefined)397 oldItem = this._selectedItem;398 if (oldElement === undefined)399 oldElement = this._itemToElement.get(oldItem) || null;400 this._selectedIndex = index;401 this._selectedItem = index === -1 ? null : this._model.at(index);402 const newItem = this._selectedItem;403 const newElement = this._selectedIndex !== -1 ? this._elementAtIndex(index) : null;404 this._delegate.selectedItemChanged(oldItem, newItem, /** @type {?Element} */ (oldElement), newElement);405 }406 /**407 * @param {number} index408 * @param {number} direction409 * @param {boolean} canWrap410 * @return {number}411 */412 _findFirstSelectable(index, direction, canWrap) {413 const length = this._model.length;414 if (!length)415 return -1;416 for (let step = 0; step <= length; step++) {417 if (index < 0 || index >= length) {418 if (!canWrap)419 return -1;420 index = (index + length) % length;421 }422 if (this._delegate.isItemSelectable(this._model.at(index)))423 return index;424 index += direction;425 }426 return -1;427 }428 /**429 * @param {number} index430 * @param {number} direction431 * @return {number}432 */433 _findPageSelectable(index, direction) {434 let lastSelectable = -1;435 const startOffset = this._offsetAtIndex(index);436 // Compensate for zoom rounding errors with -1.437 const viewportHeight = this.element.offsetHeight - 1;438 while (index >= 0 && index < this._model.length) {439 if (this._delegate.isItemSelectable(this._model.at(index))) {440 if (Math.abs(this._offsetAtIndex(index) - startOffset) >= viewportHeight)441 return index;442 lastSelectable = index;443 }444 index += direction;445 }446 return lastSelectable;447 }448 /**449 * @param {number} length450 * @param {number} copyTo451 */452 _reallocateVariableOffsets(length, copyTo) {453 if (this._variableOffsets.length < length) {454 const variableOffsets = new Int32Array(Math.max(length, this._variableOffsets.length * 2));455 variableOffsets.set(this._variableOffsets.slice(0, copyTo), 0);456 this._variableOffsets = variableOffsets;457 } else if (this._variableOffsets.length >= 2 * length) {458 const variableOffsets = new Int32Array(length);459 variableOffsets.set(this._variableOffsets.slice(0, copyTo), 0);460 this._variableOffsets = variableOffsets;461 }462 }463 /**464 * @param {number} from465 * @param {number} to466 * @param {number} inserted467 */468 _invalidate(from, to, inserted) {469 if (this._mode === UI.ListMode.NonViewport) {470 this._invalidateNonViewportMode(from, to - from, inserted);471 return;472 }473 if (this._mode === UI.ListMode.VariousHeightItems) {474 this._reallocateVariableOffsets(this._model.length + 1, from + 1);475 for (let i = from + 1; i <= this._model.length; i++)476 this._variableOffsets[i] = this._variableOffsets[i - 1] + this._delegate.heightForItem(this._model.at(i - 1));477 }478 const viewportHeight = this.element.offsetHeight;479 const totalHeight = this._totalHeight();480 const scrollTop = this.element.scrollTop;481 if (this._renderedHeight < viewportHeight || totalHeight < viewportHeight) {482 this._clearViewport();483 this._updateViewport(Number.constrain(scrollTop, 0, totalHeight - viewportHeight), viewportHeight);484 return;485 }486 const heightDelta = totalHeight - this._renderedHeight;487 if (to <= this._firstIndex) {488 const topHeight = this._topHeight + heightDelta;489 this._topElement.style.height = topHeight + 'px';490 this.element.scrollTop = scrollTop + heightDelta;491 this._topHeight = topHeight;492 this._renderedHeight = totalHeight;493 const indexDelta = inserted - (to - from);494 this._firstIndex += indexDelta;495 this._lastIndex += indexDelta;496 return;497 }498 if (from >= this._lastIndex) {499 const bottomHeight = this._bottomHeight + heightDelta;500 this._bottomElement.style.height = bottomHeight + 'px';501 this._bottomHeight = bottomHeight;502 this._renderedHeight = totalHeight;503 return;504 }505 // TODO(dgozman): try to keep visible scrollTop the same506 // when invalidating after firstIndex but before first visible element.507 this._clearViewport();508 this._updateViewport(Number.constrain(scrollTop, 0, totalHeight - viewportHeight), viewportHeight);509 }510 /**511 * @param {number} start512 * @param {number} remove513 * @param {number} add514 */515 _invalidateNonViewportMode(start, remove, add) {516 let startElement = this._topElement;517 for (let index = 0; index < start; index++)518 startElement = startElement.nextElementSibling;519 while (remove--)520 startElement.nextElementSibling.remove();521 while (add--)522 this.element.insertBefore(this._elementAtIndex(start + add), startElement.nextElementSibling);523 }524 _clearViewport() {525 if (this._mode === UI.ListMode.NonViewport) {526 console.error('There should be no viewport updates in non-viewport mode');527 return;528 }529 this._firstIndex = 0;530 this._lastIndex = 0;531 this._renderedHeight = 0;532 this._topHeight = 0;533 this._bottomHeight = 0;534 this._clearContents();535 }536 _clearContents() {537 // Note: this method should not force layout. Be careful.538 this._topElement.style.height = '0';539 this._bottomElement.style.height = '0';540 this.element.removeChildren();541 this.element.appendChild(this._topElement);542 this.element.appendChild(this._bottomElement);543 }544 /**545 * @param {number} scrollTop546 * @param {number} viewportHeight547 */548 _updateViewport(scrollTop, viewportHeight) {549 // Note: this method should not force layout. Be careful.550 if (this._mode === UI.ListMode.NonViewport) {551 console.error('There should be no viewport updates in non-viewport mode');552 return;553 }554 const totalHeight = this._totalHeight();555 if (!totalHeight) {556 this._firstIndex = 0;557 this._lastIndex = 0;558 this._topHeight = 0;559 this._bottomHeight = 0;560 this._renderedHeight = 0;561 this._topElement.style.height = '0';562 this._bottomElement.style.height = '0';...

Full Screen

Full Screen

navigation-control.js

Source:navigation-control.js Github

copy

Full Screen

...44 }45 shouldComponentUpdate(nextProps, nextState, nextContext) {46 return this.context.viewport.bearing !== nextContext.viewport.bearing;47 }48 _updateViewport(opts) {49 const {viewport} = this.context;50 const mapState = new MapState(Object.assign({}, viewport, opts));51 const viewState = Object.assign({}, mapState.getViewportProps(), LINEAR_TRANSITION_PROPS);52 // Call new style callback53 this.props.onViewStateChange({viewState});54 // Call old style callback55 // TODO(deprecate): remove this check when `onChangeViewport` gets deprecated56 const onViewportChange = this.props.onChangeViewport || this.props.onViewportChange;57 onViewportChange(viewState);58 }59 _onZoomIn() {60 this._updateViewport({zoom: this.context.viewport.zoom + 1});61 }62 _onZoomOut() {63 this._updateViewport({zoom: this.context.viewport.zoom - 1});64 }65 _onResetNorth() {66 this._updateViewport({bearing: 0, pitch: 0});67 }68 _renderCompass() {69 const {bearing} = this.context.viewport;70 return createElement('span', {71 className: 'mapboxgl-ctrl-compass-arrow',72 style: {transform: `rotate(${bearing}deg)`}73 });74 }75 _renderButton(type, label, callback, children) {76 return createElement('button', {77 key: type,78 className: `mapboxgl-ctrl-icon mapboxgl-ctrl-${type}`,79 type: 'button',80 title: label,...

Full Screen

Full Screen

app.js

Source:app.js Github

copy

Full Screen

...44 componentWillUnmount() {45 window.removeEventListener('resize', this._onResize);46 }47 _onResize() {48 this._updateViewport({49 width: window.innerWidth,50 height: window.innerHeight51 });52 }53 _updateViewport(viewport) {54 this.setState({55 viewport: {...this.state.viewport, ...viewport}56 });57 }58 _updateSettings(settings) {59 this.setState({60 settings: {...this.state.settings, ...settings}61 });62 }63 render() {64 const {viewport, settings} = this.state;65 return (66 <div>67 <MapGL...

Full Screen

Full Screen

map.js

Source:map.js Github

copy

Full Screen

1import React, { Component } from 'react';2import ReactMapGL, { Marker, Popup, NavigationControl, FullscreenControl } from 'react-map-gl';3import CityPin from './city-pin';4import CityInfo from './city-info';5// Set your mapbox token here6const TOKEN = 'pk.eyJ1IjoiZHZzbTEiLCJhIjoiY2s5cTRxbG90MGdwMzNmcXh5YXVtOXhodSJ9.PoNv2NgKsPOzR93-SbdXhg '; 7const fullscreenControlStyle = {8 position: 'absolute',9 top: 0,10 left: 0,11 padding: '10px'12};13const navStyle = {14 position: 'absolute',15 top: 36,16 left: 0,17 padding: '10px'18};19export default class Mapp extends Component {20 constructor(props) {21 super(props);22 this.state = {23 viewport: {24 width: 100+"vw",25 height: 100+"vh",26 latitude: 39.011902,27 longitude: -98.484245,28 zoom: 4,29 bearing: 0,30 pitch: 031 },32 popupInfo: null33 };34 }35 _updateViewport = (viewport) => {36 this.setState({ viewport });37 }38 _renderCityMarker = (city, index) => {39 if (city) {40 return (41 <Marker42 key={`marker-${index}`}43 longitude={city.longitude}44 latitude={city.latitude} >45 <CityPin size={20} 46 onClick={() => this.setState({ popupInfo: city })} 47 />48 </Marker>49 );50 }51 }52 _renderPopup() {53 const { popupInfo } = this.state;54 return popupInfo && (55 <Popup tipSize={5}56 anchor="top"57 longitude={popupInfo.longitude}58 latitude={popupInfo.latitude}59 closeOnClick={false}60 onClose={() => this.setState({ popupInfo: null })} >61 <CityInfo info={popupInfo} />62 </Popup>63 );64 }65 render() {66 const { viewport } = this.state;67 return (68 <ReactMapGL69 {...viewport}70 //DM: Change Map Style Here.71// mapStyle="mapbox://styles/mapbox/streets-v11"72// mapStyle="mapbox://styles/mapbox/dark-v10"73 mapStyle="mapbox://styles/mapbox/light-v10"74// mapStyle="mapbox://styles/mapbox/outdoors-v11"75// mapStyle="mapbox://styles/dvsm1/ck9sygdjq0b1c1ioe67h5q4y8"76 onViewportChange={this._updateViewport}77 mapboxApiAccessToken={TOKEN} >78 {this.props.cities.map(this._renderCityMarker)}79 {this._renderPopup()}80 <div className="fullscreen" style={fullscreenControlStyle}>81 <FullscreenControl />82 </div>83 <div className="nav" style={navStyle}>84 <NavigationControl onViewportChange={this._updateViewport} />85 </div>86 </ReactMapGL>87 );88 }...

Full Screen

Full Screen

index.js

Source:index.js Github

copy

Full Screen

1import React, { Component } from "react";2import { render } from "react-dom";3import MapGL, {4 Marker,5 Popup,6 NavigationControl,7 FullscreenControl8} from "react-map-gl";9import CityPin from "./city-pin";10import CityInfo from "./city-info";11import CITIES from "./cities.json";12const TOKEN = ""; // Set your mapbox token here13const fullscreenControlStyle = {14 position: "absolute",15 top: 0,16 left: 0,17 padding: "10px"18};19const navStyle = {20 position: "absolute",21 top: 36,22 left: 0,23 padding: "10px"24};25class App extends Component {26 constructor(props) {27 super(props);28 this.state = {29 viewport: {30 latitude: 37.785164,31 longitude: -100,32 zoom: 3.5,33 bearing: 0,34 pitch: 035 },36 popupInfo: null37 };38 window.test = () => {39 this.setState({40 ...this.state,41 viewport: {42 ...this.state.viewport,43 zoom: this.state.viewport.zoom === 5 ? 1 : 544 }45 });46 };47 }48 _updateViewport = viewport => {49 this.setState({ viewport });50 };51 _renderCityMarker = (city, index) => {52 return (53 <Marker54 key={`marker-${index}`}55 longitude={city.longitude}56 latitude={city.latitude}57 >58 <CityPin size={20} onClick={() => this.setState({ popupInfo: city })} />59 </Marker>60 );61 };62 _renderPopup() {63 const { popupInfo } = this.state;64 return (65 popupInfo && (66 <Popup67 tipSize={5}68 anchor="top"69 longitude={popupInfo.longitude}70 latitude={popupInfo.latitude}71 closeOnClick={false}72 onClose={() => this.setState({ popupInfo: null })}73 >74 <CityInfo info={popupInfo} />75 </Popup>76 )77 );78 }79 render() {80 const { viewport } = this.state;81 return (82 <MapGL83 {...viewport}84 width="100vw"85 height="100vh"86 mapStyle="mapbox://styles/mapbox/dark-v9"87 onViewportChange={this._updateViewport}88 mapboxApiAccessToken={TOKEN}89 >90 {CITIES.map(this._renderCityMarker)}91 {this._renderPopup()}92 <div className="fullscreen" style={fullscreenControlStyle}>93 <FullscreenControl />94 </div>95 <div className="nav" style={navStyle}>96 <NavigationControl />97 </div>98 </MapGL>99 );100 }101}...

Full Screen

Full Screen

MyMap.js

Source:MyMap.js Github

copy

Full Screen

1import React from 'react';2import ReactMapGL, { NavigationControl, GeolocateControl } from 'react-map-gl';3//style sheets4import 'mapbox-gl/dist/mapbox-gl.css';5//components6import Pin from './Pin';7import PopupBox from './Popup';8//keys9const mapboxToken = process.env.REACT_APP_MAPBOX_TOKEN;10export default class Map extends React.Component {11 constructor(props) {12 super(props);13 this.state = {};14 this.handlePopUp = this.handlePopUp.bind(this);15 this.closePopUp = this.closePopUp.bind(this);16 this._renderPopUp = this._renderPopUp.bind(this);17 }18 handlePopUp(popupInfo) {19 this.setState({ popupInfo });20 }21 closePopUp() {22 this.setState({ popupInfo: null });23 }24 _renderPopUp() {25 const { popupInfo } = this.state;26 return (27 popupInfo && (28 <PopupBox29 closePopUp={this.closePopUp}30 location={this.state.popupInfo}31 />32 )33 );34 }35 render() {36 const { viewport, _updateViewport } = this.props;37 return (38 <div className="mapStyle">39 <ReactMapGL40 {...viewport}41 width="100%"42 height="100%"43 mapboxApiAccessToken={mapboxToken}44 onViewportChange={_updateViewport}45 >46 <div className="navigationIcons">47 <NavigationControl48 className="navStyle"49 onViewportChange={_updateViewport}50 />51 <GeolocateControl52 className="geolocateStyle"53 onViewportChange={_updateViewport}54 positionOptions={{ enableHighAccuracy: true }}55 trackUserLocation={true}56 />57 </div>58 {this._renderPopUp()}59 {this.props.locations.map(curr => (60 <Pin61 id={curr.locationName}62 key={curr.locationName}63 handlePopUp={this.handlePopUp}64 location={curr}65 />66 ))}67 </ReactMapGL>68 </div>69 );70 }...

Full Screen

Full Screen

MapMarkers.js

Source:MapMarkers.js Github

copy

Full Screen

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

Full Screen

Full Screen

SceneGraph.js

Source:SceneGraph.js Github

copy

Full Screen

1//Kit3D - Copyright Mark Dawson2//If you want to reuse, please see the license terms at: http://www.codeplex.com/Kit3D/Project/License.aspx3/*4A scenegraph contains scene nodes, that describe the transforms to apply5to different geometry models. You can create a hierarchy of scene nodes6where a parent scene node will affect the transform of all of its children. For7example you may want to animate an arm which has two bones and a hand that all8move relative to one another, you can do that using a scenenode9*/10function SceneGraph()11{12 this.Root = new SceneNode(null);13 this._viewPort = null;14}15SceneGraph.prototype =16{ 17 ToString: function()18 {19 return 'SceneGraph';20 },21 22 SetViewPort: function(viewPort)23 {24 this._viewPort = viewPort;25 this._UpdateViewPort(this.Root);26 },27 28 _UpdateViewPort: function(sceneNode)29 {30 sceneNode.SetViewPort(this._viewPort);31 var childNodes = sceneNode.ChildNodes;32 for(var i=0; i<childNodes.length; ++i)33 {34 this._UpdateViewPort(childNodes[i]);35 }36 }...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const playwright = require('playwright');2(async () => {3 const browser = await playwright.chromium.launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 await page._updateViewport({ width: 400, height: 400 });7 await page.screenshot({ path: 'screenshot.png' });8 await browser.close();9})();10Your name to display (optional):11Your name to display (optional):

Full Screen

Using AI Code Generation

copy

Full Screen

1const playwright = require('playwright');2(async () => {3 const browser = await playwright.chromium.launch({ headless: false });4 const context = await browser.newContext();5 const page = await context.newPage();6 await page._updateViewport({ width: 100, height: 100 });7 await page.screenshot({ path: 'google.png' });8 await browser.close();9})();

Full Screen

Using AI Code Generation

copy

Full Screen

1const { _updateViewport } = require('playwright/lib/server/browserContext');2const { chromium } = require('playwright');3(async () => {4 const browser = await chromium.launch();5 const context = await browser.newContext();6 await _updateViewport(context, { width: 100, height: 200 });7 const page = await context.newPage();8 await browser.close();9})();

Full Screen

Using AI Code Generation

copy

Full Screen

1const { _updateViewport } = require('playwright/lib/server/chromium/crBrowser');2const { chromium } = require('playwright');3(async () => {4 const browser = await chromium.launch();5 const context = await browser.newContext();6 const page = await context.newPage();7 _updateViewport.call(page, {width: 800, height: 600});8 await page.screenshot({path: 'google.png'});9 await browser.close();10})();

Full Screen

Using AI Code Generation

copy

Full Screen

1const { Playwright } = require('playwright-core/lib/server/playwright');2const playwright = new Playwright();3const browser = await playwright.chromium.launch();4const context = await browser.newContext();5const page = await context.newPage();6await page._updateViewport({ width: 100, height: 100 });7await browser.close();8const { Playwright } = require('playwright-core/lib/server/playwright');9const playwright = new Playwright();10const browser = await playwright.chromium.launch();11const context = await browser.newContext();12const page = await context.newPage();13await page._setViewportSize({ width: 100, height: 100 });14await browser.close();

Full Screen

Using AI Code Generation

copy

Full Screen

1const { Playwright } = require('playwright-core/lib/server/playwright');2const playwright = new Playwright();3const browser = await playwright.chromium.launch();4const context = await browser.newContext();5const page = await context.newPage();6await page._updateViewport({ width: 100, height: 100 });7await browser.close();8const { Playwright } = require('playwright-core/lib/server/playwright');9const playwright = new Playwright();10const browser = await playwright.chromium.launch();11const context = await browser.newContext();12const page = await context.newPage();13await page._setViewportSize({ width: 100, height: 100 });14await browser.close();

Full Screen

Using AI Code Generation

copy

Full Screen

1const { Playwright } = require('@playwright/test');2const playwright = Playwright.create();3const browser = await playwright.chromium.launch();4const context = await browser.newContext({5 viewport: { width: 640, height: 480 },6});7const page = await context.newPage();8await page._updateViewport({ width: 200, height: 100, deviceScaleFactor: 1, isMobile: false, hasTouch: false, isLandscape: true });9await page.screenshot({ path: 'example.png' });10await browser.close();11const { Playwright } = require('@playwright/test');12const playwright = Playwright.create();13const browser = await playwright.chromium.launch();14const context = await browser.newContext({15 viewport: { width: 640, height: 480 },16});17const page = await context.newPage();18await page._updateViewport({ width: 200, height: 100, deviceScaleFactor: 1, isMobile: false, hasTouch: false, isLandscape: true });

Full Screen

Using AI Code Generation

copy

Full Screen

1const internal = require('playwright/lib/server/supplements/recorder/recorderSupplement.js');2const recorder = new internal.RecorderSupplement();3recorder._updateViewport({width: 1920, height: 1080});4const internal = require('playwright/lib/server/supplements/recorder/recorderSupplement.js');5const recorder = new internal.RecorderSupplement();6recorder._updateViewport({width: 1920, height: 1080});7const { chromium } = require('playwright');8(async () => {9 const browser = await chromium.launch({ headless: false });10 const context = await browser.newContext({11 viewport: { width: 1920, height: 1080 },12 });13 const page = await context.newPage();14 await page.screenshot({ path: `example.png` });15 await browser.close();16})();17const { chromium } = require('playwright');18(async () => {19 const browser = await chromium.launch({ headless: false });20 const context = await browser.newContext({21 viewport: { width: 1920, height: 1080 },22 });23 const page = await context.newPage();24 await page.screenshot({ path: `example.png` });25 await browser.close();26})();27I am trying to set viewport size to 1920x1080 using playwright but it is not working. I am using playwright v1.0.2. I am using the below code togset viewpore siz. but it is not working. It is setcing viewport size to 1280x720.reenshot({ path: 'example.png' });28await browser.close();29const { chromium } require('playwright');30(async () > {31const { Playwright } = require('@playwright/test');32const playwright = Playwright.create();33const browser = await playwright.chromium.launch();34const context = await browser.newContext({35 viewport: { width: 640, height: 480 },36});37const page = await context.newPage();38await page._updateViewport({ width: 200, height: 100, deviceScaleFactor: 1, isMobile: false, hasTouch: false, isLandscape: true });39await page.screenshot({ path: 'example.png' });40await browser.close();

Full Screen

Using AI Code Generation

copy

Full Screen

1const internal = require('playwright/lib/server/supplements/recorder/recorderSupplement.js');2const recorder = new internal.RecorderSupplement();3recorder._updateViewport({width: 1920, height: 1080});4const internal = require('playwright/lib/server/supplements/recorder/recorderSupplement.js');5const recorder = new internal.RecorderSupplement();6recorder._updateViewport({width: 1920, height: 1080});7const { chromium } = require('playwright');8(async () => {9 const browser = await chromium.launch({ headless: false });10 const context = await browser.newContext({11 viewport: { width: 1920, height: 1080 },12 });13 const page = await context.newPage();14 await page.screenshot({ path: `example.png` });15 await browser.close();16})();17const { chromium } = require('playwright');18(async () => {19 const browser = await chromium.launch({ headless: false });20 const context = await browser.newContext({21 viewport: { width: 1920, height: 1080 },22 });23 const page = await context.newPage();24 await page.screenshot({ path: `example.png` });25 await browser.close();26})();27const { chromium } = require('playwright');romise rejections that ae not

Full Screen

Using AI Code Generation

copy

Full Screen

1const { _updateViewport } = require('playwright/lib/client/browserType');2_updateViewport(browser, { width: 800, height: 600 });3const { _updateViewport } = require('playwright/lib/client/browserType');4_updateViewpot(browser, { width: 800, height: 600 });5cot{ _updaeViewport } = require('playwrigt/lib/client/browserType');6_updeViewport(browser, { width: 800, height: 600});7const { _updatViewport} = require('playwright/lib/cliet/brwserType');8_updaeViewport(browser, { width: 800, height: 600 });9const { _updateViewport } = require('playwright/lib/client/browserType');10_updateViewport(browser, { width: 800, height: 600 });11const { _updateViewport } = require('playwright/lib/client/browserType');12_updateViewport(browser, { width: 800, height: 600 });13const { _updateViewport } = require('playwright/lib/client/browserType');14_updateViewport(browser, { width: 800, height: 600 });15const { _updateViewport } = require('playwright/lib/client/browserType');16_updateViewport(browser, { width: 800, height: 600 });17const { _updateViewport } = require('playwright/lib/client/browserType');18_updateViewport(browser, { width: 800, height: 600 });19(async () => {

Full Screen

Using AI Code Generation

copy

Full Screen

1const {chromium} = require('playwright');2const {Page} = require('playwright/lib/page');3(async () => {4 const browser = await chromium.launch({headless: false});5 const context = await browser.newContext();6 const page = await context.newPage();7 await page._updateViewport({width: 400, height: 500});8 await page.screenshot({path: 'example.png'});9 await browser.close();10})();

Full Screen

Using AI Code Generation

copy

Full Screen

1const playwright = require("playwright");2(async () => {3 const browser = await playwright.chromium.launch({4 });5 const context = await browser.newContext();6 const page = await context.newPage();7 await page.setViewportSize({ width: 100, height: 100 });8 await page._updateViewport({ width: 200, height: 200 });9 await page.screenshot({ path: "screenshot.png" });10 await browser.close();11})();12at new Promise (<anonymous>)13at CDPSession.send (/Users/abc/abc/node_modules/playwright/lib/client/transport.js:286:12)14at async Page._updateViewport (/Users/abc/abc/node_modules/playwright/lib/client/page.js:233:21)

Full Screen

Playwright tutorial

LambdaTest’s Playwright tutorial will give you a broader idea about the Playwright automation framework, its unique features, and use cases with examples to exceed your understanding of Playwright testing. This tutorial will give A to Z guidance, from installing the Playwright framework to some best practices and advanced concepts.

Chapters:

  1. What is Playwright : Playwright is comparatively new but has gained good popularity. Get to know some history of the Playwright with some interesting facts connected with it.
  2. How To Install Playwright : Learn in detail about what basic configuration and dependencies are required for installing Playwright and run a test. Get a step-by-step direction for installing the Playwright automation framework.
  3. Playwright Futuristic Features: Launched in 2020, Playwright gained huge popularity quickly because of some obliging features such as Playwright Test Generator and Inspector, Playwright Reporter, Playwright auto-waiting mechanism and etc. Read up on those features to master Playwright testing.
  4. What is Component Testing: Component testing in Playwright is a unique feature that allows a tester to test a single component of a web application without integrating them with other elements. Learn how to perform Component testing on the Playwright automation framework.
  5. Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
  6. Functions and Selectors in Playwright: Learn how to launch the Chromium browser with Playwright. Also, gain a better understanding of some important functions like “BrowserContext,” which allows you to run multiple browser sessions, and “newPage” which interacts with a page.
  7. Handling Alerts and Dropdowns in Playwright : Playwright interact with different types of alerts and pop-ups, such as simple, confirmation, and prompt, and different types of dropdowns, such as single selector and multi-selector get your hands-on with handling alerts and dropdown in Playright testing.
  8. Playwright vs Puppeteer: Get to know about the difference between two testing frameworks and how they are different than one another, which browsers they support, and what features they provide.
  9. Run Playwright Tests on LambdaTest: Playwright testing with LambdaTest leverages test performance to the utmost. You can run multiple Playwright tests in Parallel with the LammbdaTest test cloud. Get a step-by-step guide to run your Playwright test on the LambdaTest platform.
  10. Playwright Python Tutorial: Playwright automation framework support all major languages such as Python, JavaScript, TypeScript, .NET and etc. However, there are various advantages to Python end-to-end testing with Playwright because of its versatile utility. Get the hang of Playwright python testing with this chapter.
  11. Playwright End To End Testing Tutorial: Get your hands on with Playwright end-to-end testing and learn to use some exciting features such as TraceViewer, Debugging, Networking, Component testing, Visual testing, and many more.
  12. Playwright Video Tutorial: Watch the video tutorials on Playwright testing from experts and get a consecutive in-depth explanation of Playwright automation testing.

Run Playwright Internal automation tests on LambdaTest cloud grid

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

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful