Organize code that handles settings in the modal #31
+1,199
−15
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -9,6 +9,7 @@ umd/ | ||
|
|
||
| typedoc/ | ||
|
|
||
| */**/node_modules | ||
| */**/yarn.lock | ||
| yarn-error.log | ||
| */**/package-lock.json | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,92 @@ | ||
| // Copyright (c) 2020 Uber Technologies, Inc. | ||
| // | ||
| // Permission is hereby granted, free of charge, to any person obtaining a copy | ||
| // of this software and associated documentation files (the "Software"), to deal | ||
| // in the Software without restriction, including without limitation the rights | ||
| // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | ||
| // copies of the Software, and to permit persons to whom the Software is | ||
| // furnished to do so, subject to the following conditions: | ||
| // | ||
| // The above copyright notice and this permission notice shall be included in | ||
| // all copies or substantial portions of the Software. | ||
| // | ||
| // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | ||
| // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | ||
| // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | ||
| // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | ||
| // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | ||
| // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN | ||
| // THE SOFTWARE. | ||
|
|
||
| import React, {Component} from 'react'; | ||
| import {ThemeProvider, withTheme} from 'styled-components'; | ||
|
|
||
| import {connect as keplerGlConnect} from 'connect/keplergl-connect'; | ||
| import RenderSettingsModal from './render-settings-modal'; | ||
| import {Button} from 'components/common/styled-components'; | ||
| import {theme} from '../styles'; | ||
|
|
||
|
|
||
| // TODO this isn't DRY. Comes from https://github.com/keplergl/kepler.gl/blob/995024e86880fefb0624af4ed1e98d3879558336/src/components/kepler-gl.js | ||
| function mapStateToProps(state = {}, props) { | ||
| return { | ||
| ...props, | ||
| visState: state.visState, | ||
| mapStyle: state.mapStyle, | ||
| mapState: state.mapState, | ||
| uiState: state.uiState, | ||
| providerState: state.providerState | ||
| // isOpen: state.isOpen TODO | ||
| }; | ||
| } | ||
|
|
||
| function makeMapDispatchToProps() { | ||
| // const getActionCreators = makeGetActionCreators(); | ||
| const mapDispatchToProps = (dispatch, ownProps) => { | ||
| // const groupedActionCreators = getActionCreators(dispatch, ownProps); | ||
|
|
||
| return { | ||
| // TODO Put action creator and return here | ||
| // ...groupedActionCreators, | ||
| dispatch | ||
| }; | ||
| }; | ||
|
|
||
| return mapDispatchToProps; | ||
| } | ||
|
|
||
| class HubbleExport extends Component { | ||
| constructor(props) { | ||
| super(props); | ||
| this.state = { | ||
| isOpen: false | ||
| }; | ||
| } | ||
| handleClose() {this.setState({isOpen: false})} // X button in Modal UI was clicked | ||
|
|
||
| handleExport() { // Export button in Kepler UI was clicked | ||
| this.setState(state => ({ | ||
| isOpen: true | ||
| })); | ||
| // stop rendering in bg | ||
| // setState | ||
| // pop up modal if isOpen. If false, closes modal TODO put function into render | ||
| // all the data is passed through and can use in deck/hubble components | ||
| return <h1>REACHED</h1> | ||
| } | ||
|
|
||
| render() { | ||
| // console.log(this.props) | ||
| console.log(this.state) | ||
| return ( | ||
| <div> | ||
| <RenderSettingsModal isOpen={this.state.isOpen} handleClose={this.handleClose.bind(this)} mapData={this.props}/> | ||
| <ThemeProvider theme={RenderSettingsModal}></ThemeProvider> | ||
| <Button onClick={() => this.handleExport()}>Export</Button> {/* anonymous function to bind state onclick */} | ||
| </div> | ||
| ) | ||
| } | ||
| }; | ||
|
|
||
| export default keplerGlConnect(mapStateToProps, makeMapDispatchToProps)(withTheme(HubbleExport)); | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,133 @@ | ||
| // Copyright (c) 2020 Uber Technologies, Inc. | ||
| // | ||
| // Permission is hereby granted, free of charge, to any person obtaining a copy | ||
| // of this software and associated documentation files (the "Software"), to deal | ||
| // in the Software without restriction, including without limitation the rights | ||
| // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | ||
| // copies of the Software, and to permit persons to whom the Software is | ||
| // furnished to do so, subject to the following conditions: | ||
| // | ||
| // The above copyright notice and this permission notice shall be included in | ||
| // all copies or substantial portions of the Software. | ||
| // | ||
| // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | ||
| // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | ||
| // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | ||
| // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | ||
| // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | ||
| // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN | ||
| // THE SOFTWARE. | ||
|
|
||
| /* eslint-disable no-invalid-this */ | ||
| import React, {Component, createRef} from 'react'; | ||
| import styled, {withTheme} from 'styled-components'; | ||
| import {createSelector} from 'reselect'; | ||
| import RenderSettingsPanel from './render-settings-panel'; | ||
| import Modal from 'react-modal'; | ||
| import {DIMENSIONS} from 'kepler.gl/constants/default-settings'; | ||
|
|
||
| const ModalContainer = styled.div` | ||
| position: relative; | ||
| `; | ||
|
|
||
| class RenderSettingsModal extends Component { | ||
| static defaultProps = { | ||
| defaultSettingsPos: {top: '320px', left: '320px'}, | ||
| bottomBuffer: 212 | ||
| }; | ||
|
|
||
| root = createRef(); | ||
|
|
||
| // derive settings position based on root component | ||
| showSettingsSelector(props) { | ||
| return props.showSettings; | ||
| } | ||
| themeSelector(props) { | ||
| return props.theme; | ||
| } | ||
| settingsPosSelector = createSelector(this.showSettingsSelector, (showSettings, theme = {}) => { | ||
| const {defaultSettingsPos, bottomBuffer, settingsHeight} = this.props; | ||
| if (showSettings === false || !this.root || !this.root.current) return defaultSettingsPos; | ||
| const {sidePanelInnerPadding = 16, sidePanel = {}, sidePanelScrollBarWidth = 10} = theme; | ||
| const sidePanelLeft = (sidePanel.margin || {}).left || 20; | ||
| const offsetX = sidePanelInnerPadding + sidePanelLeft + sidePanelScrollBarWidth; | ||
| // find component Root position | ||
| const bounding = this.root.current.getBoundingClientRect(); | ||
| const {x, y, width} = bounding; | ||
|
|
||
| // set the top so it won't collide with bottom widget | ||
| const top = | ||
| y + settingsHeight <= window.innerHeight - bottomBuffer | ||
| ? y | ||
| : window.innerHeight - bottomBuffer - settingsHeight; | ||
|
|
||
| return {top: `${top}px`, left: `${x + width + offsetX}px`}; | ||
| }); | ||
|
|
||
| modalStylesSelector = createSelector( | ||
| this.themeSelector, | ||
| this.settingsPosSelector, | ||
| (theme, settingsPos) => ({ | ||
| content: { | ||
| top: 'auto', | ||
| left: 'auto', | ||
| right: `calc(50% - ${DIMENSIONS.sidePanel.width / 2}px)`, | ||
| bottom: '50%', | ||
| transform: 'translate(50%, 50%)', | ||
| padding: '0px 0px 0px 0px', | ||
| border: 0, | ||
| backgroundColor: theme.sidePanelBg, | ||
| borderRadius: theme.panelBorderRadius || '2px' | ||
| }, | ||
| overlay: { | ||
| backgroundColor: 'rgba(0, 0, 0, 0)' | ||
| } | ||
| // content: { | ||
| // top: 0, | ||
| // left: 0, | ||
| // border: 0, | ||
| // right: 'auto', | ||
| // bottom: 'auto', | ||
| // padding: '0px 0px 0px 0px', | ||
| // borderRadius: theme.panelBorderRadius || '2px' | ||
| // }, | ||
| // overlay: { | ||
| // ...settingsPos, | ||
| // right: 'auto', | ||
| // bottom: 'auto', | ||
| // backgroundColor: 'rgba(0, 0, 0, 0)' | ||
| // } | ||
| }) | ||
| ); | ||
|
|
||
| render() { | ||
| const {isOpen, handleClose} = this.props; | ||
|
|
||
| const modalStyles = this.modalStylesSelector(this.props); | ||
| return ( | ||
| <ModalContainer className="render-settings-modal" ref={this.root}> | ||
| {this.root.current ? ( | ||
| <Modal | ||
| isOpen={isOpen} | ||
| style={modalStyles} | ||
| ariaHideApp={false} | ||
| parentSelector={() => { | ||
| // React modal issue: https://github.com/reactjs/react-modal/issues/769 | ||
| // failed to execute removeChild on parent node when it is already unmounted | ||
| return ( | ||
| this.root.current || { | ||
| removeChild: () => {}, | ||
| appendChild: () => {} | ||
| } | ||
| ); | ||
| }} | ||
| > | ||
| <RenderSettingsPanel handleClose={() => {handleClose()}} mapData={this.props.mapData}/> | ||
| </Modal> | ||
| ) : null} | ||
| </ModalContainer> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default withTheme(RenderSettingsModal); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,323 @@ | ||
| // Copyright (c) 2020 Uber Technologies, Inc. | ||
| // | ||
| // Permission is hereby granted, free of charge, to any person obtaining a copy | ||
| // of this software and associated documentation files (the "Software"), to deal | ||
| // in the Software without restriction, including without limitation the rights | ||
| // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | ||
| // copies of the Software, and to permit persons to whom the Software is | ||
| // furnished to do so, subject to the following conditions: | ||
| // | ||
| // The above copyright notice and this permission notice shall be included in | ||
| // all copies or substantial portions of the Software. | ||
| // | ||
| // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | ||
| // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | ||
| // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | ||
| // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | ||
| // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | ||
| // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN | ||
| // THE SOFTWARE. | ||
|
|
||
| import React, {Component} from 'react'; | ||
| import styled, {withTheme} from 'styled-components'; | ||
| import {Button, Input} from 'kepler.gl/components/common/styled-components'; | ||
| import {Delete} from 'kepler.gl/components/common/icons'; | ||
| import ItemSelector from 'kepler.gl/components/common/item-selector/item-selector'; | ||
| import {Scene} from 'components/scene'; | ||
|
|
||
| import { | ||
| SettingsController, | ||
| preview, | ||
| setFileNameDeckAdapter, | ||
| render | ||
| } from 'components/render/settings-controller'; | ||
|
|
||
| import {setKeyframes} from 'components/render/keyframes'; | ||
|
|
||
| const DEFAULT_BUTTON_HEIGHT = '32px'; | ||
| const DEFAULT_BUTTON_WIDTH = '64px'; | ||
| const DEFAULT_PADDING = '32px'; | ||
| const DEFAULT_ROW_GAP = '16px'; | ||
|
|
||
| const IconButton = styled(Button)` | ||
| padding: 0; | ||
| svg { | ||
| margin: 0; | ||
| } | ||
| `; | ||
|
|
||
| const PanelCloseInner = styled.div` | ||
| display: flex; | ||
| justify-content: flex-end; | ||
| padding: ${DEFAULT_PADDING} ${DEFAULT_PADDING} 0 ${DEFAULT_PADDING}; | ||
| `; | ||
|
|
||
| const PanelClose = ({buttonHeight, handleClose}) => ( | ||
| <PanelCloseInner className="render-settings-panel__close" > | ||
| <IconButton className="render-settings-panel__button" link onClick={() => {handleClose()}}> | ||
| <Delete height={buttonHeight} /> | ||
| </IconButton> | ||
| </PanelCloseInner> | ||
| ); | ||
|
|
||
| const StyledTitle = styled.div` | ||
| color: ${props => props.theme.titleTextColor}; | ||
| font-size: 20px; | ||
| font-weight: 400; | ||
| line-height: ${props => props.theme.lineHeight}; | ||
| padding: 0 ${DEFAULT_PADDING} 16px ${DEFAULT_PADDING}; | ||
| `; | ||
|
|
||
| const StyledSection = styled.div` | ||
| align-self: center; | ||
| color: ${props => props.theme.labelColor}; | ||
| font-weight: 500; | ||
| font-size: 13px; | ||
| margin-top: ${DEFAULT_PADDING}; | ||
| margin-bottom: ${DEFAULT_ROW_GAP}; | ||
| `; | ||
|
|
||
| const StyledLabelCell = styled.div` | ||
| align-self: center; | ||
| color: ${props => props.theme.labelColor}; | ||
| font-weight: 400; | ||
| font-size: 11px; | ||
| `; | ||
|
|
||
| const StyledValueCell = styled.div` | ||
| align-self: center; | ||
| color: ${props => props.theme.textColor}; | ||
| font-weight: 500; | ||
| font-size: 11px; | ||
| padding: 0 12px; | ||
| `; | ||
|
|
||
| const PanelBodyInner = styled.div` | ||
| padding: 0 ${DEFAULT_PADDING}; | ||
| display: grid; | ||
| grid-template-columns: 480px auto; | ||
| grid-column-gap: 20px; | ||
| `; | ||
|
|
||
| const InputGrid = styled.div` | ||
| display: grid; | ||
| grid-template-columns: 88px auto; | ||
| grid-template-rows: repeat( | ||
| ${props => props.rows}, | ||
| ${props => (props.rowHeight ? props.rowHeight : '34px')} | ||
| ); | ||
| grid-row-gap: ${DEFAULT_ROW_GAP}; | ||
| `; | ||
|
|
||
| const PanelBody = ({mapData, setMediaType, setCamera, setFileName, setQuality, setTimeStamps, settingsData}) => ( | ||
| <PanelBodyInner className="render-settings-panel__body"> | ||
| <div style={{width: "480px", height: "460px"}}> | ||
| <Scene mapData={mapData} adapter={settingsData.adapter}/> | ||
| </div> | ||
| <div> | ||
| <StyledSection>Video Effects</StyledSection> | ||
| <InputGrid rows={2}> | ||
| <StyledLabelCell>Timestamp</StyledLabelCell> {/* TODO add functionality */} | ||
| <ItemSelector | ||
| selectedItems={settingsData.time} | ||
| options={['None', 'White', 'Black']} | ||
| multiSelect={false} | ||
| searchable={false} | ||
| onChange={setTimeStamps} | ||
| /> | ||
| <StyledLabelCell>Camera</StyledLabelCell> {/* TODO add functionality */} | ||
| <ItemSelector | ||
| selectedItems={settingsData.camera} | ||
| options={[ | ||
| 'None', | ||
| 'Orbit (90º)', | ||
| 'Orbit (180º)', | ||
| 'Orbit (360º)', | ||
| 'North to South', | ||
| 'South to North', | ||
| 'East to West', | ||
| 'West to East', | ||
| 'Zoom Out', | ||
| 'Zoom In' | ||
| ]} | ||
| multiSelect={false} | ||
| searchable={false} | ||
| onChange={setCamera} | ||
| /> | ||
| </InputGrid> | ||
| <StyledSection>Export Settings</StyledSection> {/* TODO add functionality */} | ||
| <InputGrid rows={3}> | ||
| <StyledLabelCell>File Name</StyledLabelCell> | ||
| <Input placeholder={settingsData.fileName} onChange={setFileName}/> | ||
| <StyledLabelCell>Media Type</StyledLabelCell> {/* TODO add functionality */} | ||
| <ItemSelector | ||
| selectedItems={settingsData.mediaType} | ||
| options={['WebM Video', 'PNG Sequence', 'JPEG Sequence']} | ||
| multiSelect={false} | ||
| searchable={false} | ||
| onChange={setMediaType} | ||
| /> | ||
| <StyledLabelCell>Quality</StyledLabelCell> {/* TODO add functionality */} | ||
| <ItemSelector | ||
| selectedItems={settingsData.resolution} | ||
| options={['Good (540p)', 'High (720p)', 'Highest (1080p)']} | ||
| multiSelect={false} | ||
| searchable={false} | ||
| onChange={setQuality} | ||
| /> | ||
| </InputGrid> | ||
| <InputGrid style={{marginTop: DEFAULT_ROW_GAP}} rows={2} rowHeight="18px"> | ||
| <StyledLabelCell>Duration</StyledLabelCell> {/* TODO add functionality */} | ||
| <StyledValueCell>00:00:30</StyledValueCell> | ||
| <StyledLabelCell>File Size</StyledLabelCell> {/* TODO add functionality */} | ||
| <StyledValueCell>36 MB</StyledValueCell> | ||
| </InputGrid> | ||
| </div> | ||
| </PanelBodyInner> | ||
| ); | ||
|
|
||
| const PanelFooterInner = styled.div` | ||
| display: flex; | ||
| justify-content: space-between; | ||
| margin-top: ${DEFAULT_ROW_GAP}; | ||
| padding: ${DEFAULT_PADDING}; | ||
| `; | ||
|
|
||
| const ButtonGroup = styled.div` | ||
| display: flex; | ||
| `; | ||
|
|
||
| const PanelFooter = ({handleClose, settingsData, preview}) => ( | ||
| <PanelFooterInner className="render-settings-panel__footer"> | ||
| <Button | ||
| width={DEFAULT_BUTTON_WIDTH} | ||
| height={DEFAULT_BUTTON_HEIGHT} | ||
| secondary | ||
| className={'render-settings-button'} | ||
| onClick={() => (preview(settingsData.adapter))} | ||
| > | ||
| Preview | ||
| </Button> | ||
| <ButtonGroup> | ||
| <Button | ||
| width={DEFAULT_BUTTON_WIDTH} | ||
| height={DEFAULT_BUTTON_HEIGHT} | ||
| link | ||
| className={'render-settings-button'} | ||
| onClick={() => {handleClose()}} | ||
| > | ||
| Cancel {/* TODO add functionality to close */} | ||
| </Button> | ||
| <Button | ||
| width={DEFAULT_BUTTON_WIDTH} | ||
| height={DEFAULT_BUTTON_HEIGHT} | ||
| className={'render-settings-button'} | ||
| onClick={() => render(settingsData, settingsData.adapter)} | ||
| > | ||
| Render | ||
| </Button> | ||
| </ButtonGroup> | ||
| </PanelFooterInner> | ||
| ); | ||
|
|
||
| const Panel = styled.div` | ||
| width: ${props => props.settingsWidth}px; | ||
| `; | ||
|
|
||
| class RenderSettingsPanel extends Component { | ||
| constructor(props) { | ||
| super(props); | ||
|
|
||
| this.state = { | ||
| mediaType: "WebM Video", | ||
| camera: "None", | ||
| fileName: "Video Name", | ||
| quality: "High (720p)", | ||
| timestamps: "None" | ||
| }; | ||
|
|
||
| this.setMediaTypeState = this.setMediaTypeState.bind(this); | ||
| this.setCamera = this.setCamera.bind(this); | ||
| this.setFileName = this.setFileName.bind(this); | ||
| this.setQuality = this.setQuality.bind(this); | ||
| this.setTimeStamps = this.setTimeStamps.bind(this); | ||
|
|
||
| this.mapDataGlobal = this.props.mapData; | ||
| this.settingsController = <SettingsController />; | ||
|
|
||
| } | ||
|
|
||
| static defaultProps = { | ||
| settingsWidth: 980, | ||
| buttonHeight: '16px', | ||
| }; | ||
|
|
||
| setMediaTypeState(media){ | ||
| this.setState({ | ||
| mediaType: media | ||
| }); | ||
| } | ||
| setCamera(option){ | ||
| this.setState({ | ||
| camera: option | ||
| }); | ||
| setKeyframes(option, this.settingsController.props.adapter, this.mapdataGlobal); | ||
| } | ||
| setFileName(name){ | ||
| this.setState({ | ||
| fileName: name.target.value | ||
| }); | ||
| setFileNameDeckAdapter(name.target.value); | ||
| } | ||
| setQuality(resolution){ | ||
| this.setState({ | ||
| quality: resolution | ||
| }); | ||
| } | ||
| setTimeStamps(time){ | ||
| this.setState({ | ||
| timestamps: time | ||
| }); | ||
| } | ||
|
|
||
| render() { | ||
|
|
||
| const adapter = this.settingsController.props.adapter; | ||
|
|
||
| const {buttonHeight, settingsWidth, handleClose} = this.props; | ||
| const settingsData = { | ||
| mediaType : this.state.mediaType, | ||
| camera : this.state.camera, | ||
| fileName: this.state.fileName, | ||
| resolution: this.state.quality, | ||
| time: this.state.timestamps, | ||
| adapter: adapter | ||
| } | ||
|
|
||
| return ( | ||
|
|
||
| <Panel settingsWidth={settingsWidth} className="render-settings-panel"> | ||
| <PanelClose | ||
| buttonHeight={buttonHeight} | ||
| handleClose={handleClose}/> {/* handleClose for X button */} | ||
| <StyledTitle className="render-settings-panel__title">Export Video</StyledTitle> | ||
| <PanelBody | ||
| mapData={this.props.mapData} | ||
| setMediaType={this.setMediaTypeState} | ||
| setCamera={this.setCamera} | ||
| setFileName={this.setFileName} | ||
| setQuality={this.setQuality} | ||
| setTimeStamps={this.setTimeStamps} | ||
| settingsData={settingsData} | ||
| /> | ||
| <PanelFooter | ||
| handleClose={handleClose} | ||
| settingsData = {settingsData} | ||
| preview={preview} | ||
| /> {/* handleClose for Cancel button */} | ||
| </Panel> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default withTheme(RenderSettingsPanel); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| import React, {Component} from 'react'; | ||
|
|
||
| export const encoderSettings = { | ||
| framerate: 30, | ||
| webm: { | ||
| quality: 0.8 | ||
| }, | ||
| jpeg: { | ||
| quality: 2 | ||
| }, | ||
| gif: { | ||
| sampleInterval: 1000 | ||
| }, | ||
| webm:{ | ||
| quality: 1.5 | ||
| }, | ||
| filename: "Default Video Name" + " " + moment().format(DEFAULT_TIME_FORMAT).toString() | ||
|
There was a problem hiding this comment. You'll probably need to import moment and define DEFAULT_TIME_FORMAT. |
||
| }; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,126 @@ | ||
| export function setKeyframes(cameraType, adapter, mapdataGlobal){ | ||
| adapter.scene.keyframes.camera._lastTime = 0; | ||
| adapter.scene.keyframes.camera.factor = 0; | ||
|
|
||
|
|
||
| adapter.scene.keyframes.camera.values[0].latitude = mapdataGlobal.mapState.latitude; | ||
| adapter.scene.keyframes.camera.values[0].longitude = mapdataGlobal.mapState.longitude; | ||
| adapter.scene.keyframes.camera.values[1].latitude = mapdataGlobal.mapState.latitude; | ||
| adapter.scene.keyframes.camera.values[1].longitude = mapdataGlobal.mapState.longitude; | ||
| adapter.scene.keyframes.camera.values[0].zoom = mapdataGlobal.mapState.zoom; | ||
| adapter.scene.keyframes.camera.values[1].zoom = mapdataGlobal.mapState.zoom; | ||
|
|
||
| if(cameraType === 'Orbit (90º)'){ | ||
| // How to reset the camera to its initial position? | ||
| adapter.scene.keyframes.camera.values[0].bearing = 0; | ||
| adapter.scene.keyframes.camera.values[0].latitude = mapdataGlobal.mapState.latitude; | ||
| adapter.scene.keyframes.camera.values[0].longitude = mapdataGlobal.mapState.longitude; | ||
| adapter.scene.keyframes.camera.values[0].pitch = 0; | ||
| adapter.scene.keyframes.camera.values[0].zoom = mapdataGlobal.mapState.zoom; | ||
|
|
||
| adapter.scene.keyframes.camera.values[1].bearing = 90; | ||
| adapter.scene.keyframes.camera.values[1].latitude = mapdataGlobal.mapState.latitude; | ||
| adapter.scene.keyframes.camera.values[1].longitude = mapdataGlobal.mapState.longitude; | ||
| adapter.scene.keyframes.camera.values[1].pitch = 0; | ||
| adapter.scene.keyframes.camera.values[1].zoom = mapdataGlobal.mapState.zoom; | ||
| }else if(cameraType === 'Orbit (180º)'){ | ||
| adapter.scene.keyframes.camera.values[0].bearing = 0; | ||
| adapter.scene.keyframes.camera.values[0].latitude = mapdataGlobal.mapState.latitude; | ||
| adapter.scene.keyframes.camera.values[0].longitude = mapdataGlobal.mapState.longitude; | ||
| adapter.scene.keyframes.camera.values[0].pitch = 0; | ||
| adapter.scene.keyframes.camera.values[0].zoom = mapdataGlobal.mapState.zoom; | ||
|
|
||
| adapter.scene.keyframes.camera.values[1].bearing = 180; | ||
| adapter.scene.keyframes.camera.values[1].latitude = mapdataGlobal.mapState.latitude; | ||
| adapter.scene.keyframes.camera.values[1].longitude = mapdataGlobal.mapState.longitude; | ||
| adapter.scene.keyframes.camera.values[1].pitch = 0; | ||
| adapter.scene.keyframes.camera.values[1].zoom = mapdataGlobal.mapState.zoom; | ||
| }else if(cameraType === 'Orbit (360º)'){ | ||
| adapter.scene.keyframes.camera.values[0].bearing = 0; | ||
| adapter.scene.keyframes.camera.values[0].latitude = mapdataGlobal.mapState.latitude; | ||
| adapter.scene.keyframes.camera.values[0].longitude = mapdataGlobal.mapState.longitude; | ||
| adapter.scene.keyframes.camera.values[0].pitch = 0; | ||
| adapter.scene.keyframes.camera.values[0].zoom = mapdataGlobal.mapState.zoom; | ||
|
|
||
| adapter.scene.keyframes.camera.values[1].bearing = 360; | ||
| adapter.scene.keyframes.camera.values[1].latitude = mapdataGlobal.mapState.latitude; | ||
| adapter.scene.keyframes.camera.values[1].longitude = mapdataGlobal.mapState.longitude; | ||
| adapter.scene.keyframes.camera.values[1].pitch = 0; | ||
| adapter.scene.keyframes.camera.values[1].zoom = mapdataGlobal.mapState.zoom; | ||
| }else if(cameraType === 'North to South'){ | ||
| adapter.scene.keyframes.camera.values[0].bearing = 0; | ||
| adapter.scene.keyframes.camera.values[0].latitude = mapdataGlobal.mapState.latitude + 25; | ||
| adapter.scene.keyframes.camera.values[0].longitude = mapdataGlobal.mapState.longitude; | ||
| adapter.scene.keyframes.camera.values[0].pitch = 0; | ||
| adapter.scene.keyframes.camera.values[0].zoom = mapdataGlobal.mapState.zoom; | ||
|
|
||
| adapter.scene.keyframes.camera.values[1].bearing = 0; | ||
| adapter.scene.keyframes.camera.values[1].latitude = mapdataGlobal.mapState.latitude - 25; | ||
| adapter.scene.keyframes.camera.values[1].longitude = mapdataGlobal.mapState.longitude; | ||
| adapter.scene.keyframes.camera.values[1].pitch = 0; | ||
| adapter.scene.keyframes.camera.values[1].zoom = mapdataGlobal.mapState.zoom; | ||
| }else if(cameraType === 'South to North'){ | ||
| adapter.scene.keyframes.camera.values[0].bearing = 0; | ||
| adapter.scene.keyframes.camera.values[0].latitude = mapdataGlobal.mapState.latitude - 25; | ||
| adapter.scene.keyframes.camera.values[0].longitude = mapdataGlobal.mapState.longitude; | ||
| adapter.scene.keyframes.camera.values[0].pitch = 0; | ||
| adapter.scene.keyframes.camera.values[0].zoom = mapdataGlobal.mapState.zoom; | ||
|
|
||
| adapter.scene.keyframes.camera.values[1].bearing = 0; | ||
| adapter.scene.keyframes.camera.values[1].latitude = mapdataGlobal.mapState.latitude + 25; | ||
| adapter.scene.keyframes.camera.values[1].longitude = mapdataGlobal.mapState.longitude; | ||
| adapter.scene.keyframes.camera.values[1].pitch = 0; | ||
| adapter.scene.keyframes.camera.values[1].zoom = mapdataGlobal.mapState.zoom; | ||
| }else if(cameraType === 'East to West'){ | ||
| adapter.scene.keyframes.camera.values[0].bearing = 0; | ||
| adapter.scene.keyframes.camera.values[0].latitude = mapdataGlobal.mapState.latitude; | ||
| adapter.scene.keyframes.camera.values[0].longitude = mapdataGlobal.mapState.longitude + 25; | ||
| adapter.scene.keyframes.camera.values[0].pitch = 0; | ||
| adapter.scene.keyframes.camera.values[0].zoom = mapdataGlobal.mapState.zoom; | ||
|
|
||
| adapter.scene.keyframes.camera.values[1].bearing = 0; | ||
| adapter.scene.keyframes.camera.values[1].latitude = mapdataGlobal.mapState.latitude; | ||
| adapter.scene.keyframes.camera.values[1].longitude = mapdataGlobal.mapState.longitude - 25; | ||
| adapter.scene.keyframes.camera.values[1].pitch = 0; | ||
| adapter.scene.keyframes.camera.values[1].zoom = mapdataGlobal.mapState.zoom; | ||
| }else if(cameraType === 'West to East'){ | ||
| adapter.scene.keyframes.camera.values[0].bearing = 0; | ||
| adapter.scene.keyframes.camera.values[0].latitude = mapdataGlobal.mapState.latitude; | ||
| adapter.scene.keyframes.camera.values[0].longitude = mapdataGlobal.mapState.longitude - 25; | ||
| adapter.scene.keyframes.camera.values[0].pitch = 0; | ||
| adapter.scene.keyframes.camera.values[0].zoom = mapdataGlobal.mapState.zoom; | ||
|
|
||
| adapter.scene.keyframes.camera.values[1].bearing = 0; | ||
| adapter.scene.keyframes.camera.values[1].latitude = mapdataGlobal.mapState.latitude; | ||
| adapter.scene.keyframes.camera.values[1].longitude = mapdataGlobal.mapState.longitude + 25; | ||
| adapter.scene.keyframes.camera.values[1].pitch = 0; | ||
| adapter.scene.keyframes.camera.values[0].zoom = mapdataGlobal.mapState.zoom; | ||
| }else if(cameraType === 'Zoom Out'){ | ||
| adapter.scene.keyframes.camera.values[0].bearing = 0; | ||
| adapter.scene.keyframes.camera.values[0].latitude = mapdataGlobal.mapState.latitude; | ||
| adapter.scene.keyframes.camera.values[0].longitude = mapdataGlobal.mapState.longitude; | ||
| adapter.scene.keyframes.camera.values[0].pitch = 0; | ||
| adapter.scene.keyframes.camera.values[0].zoom = mapdataGlobal.mapState.zoom; | ||
|
|
||
| adapter.scene.keyframes.camera.values[1].bearing = 0; | ||
| adapter.scene.keyframes.camera.values[1].latitude = mapdataGlobal.mapState.latitude; | ||
| adapter.scene.keyframes.camera.values[1].longitude = mapdataGlobal.mapState.longitude; | ||
| adapter.scene.keyframes.camera.values[1].pitch = 0; | ||
| adapter.scene.keyframes.camera.values[1].zoom = mapdataGlobal.mapState.zoom - 2; | ||
| }else if(cameraType === 'Zoom In'){ | ||
| adapter.scene.keyframes.camera.values[0].bearing = 0; | ||
| adapter.scene.keyframes.camera.values[0].latitude = mapdataGlobal.mapState.latitude; | ||
| adapter.scene.keyframes.camera.values[0].longitude = mapdataGlobal.mapState.longitude; | ||
| adapter.scene.keyframes.camera.values[0].pitch = 0; | ||
| adapter.scene.keyframes.camera.values[0].zoom = mapdataGlobal.mapState.zoom; | ||
|
|
||
| adapter.scene.keyframes.camera.values[1].bearing = 0; | ||
| adapter.scene.keyframes.camera.values[1].latitude = mapdataGlobal.mapState.latitude; | ||
| adapter.scene.keyframes.camera.values[1].longitude = mapdataGlobal.mapState.longitude; | ||
| adapter.scene.keyframes.camera.values[1].pitch = 0; | ||
| adapter.scene.keyframes.camera.values[1].zoom = mapdataGlobal.mapState.zoom + 2; | ||
| } | ||
|
|
||
|
|
||
| console.log("adapter", adapter); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,130 @@ | ||
| import React, {Component} from 'react'; | ||
| import {DeckScene, CameraKeyframes} from '@hubble.gl/core'; | ||
| import {easing} from 'popmotion'; | ||
| import {DeckAdapter} from 'hubble.gl'; | ||
|
|
||
| import { | ||
| WebMEncoder, | ||
| JPEGSequenceEncoder, | ||
| PNGSequenceEncoder, | ||
| PreviewEncoder, | ||
| GifEncoder | ||
| } from '@hubble.gl/core'; | ||
|
|
||
| import {DEFAULT_TIME_FORMAT} from 'constants'; | ||
| import moment from 'moment'; | ||
|
|
||
| let mapDataGlobal = null; | ||
|
|
||
| const encoderSettings = { | ||
| framerate: 30, | ||
| webm: { | ||
| quality: 0.8 | ||
| }, | ||
| jpeg: { | ||
| quality: 2 | ||
| }, | ||
| gif: { | ||
| sampleInterval: 1000 | ||
| }, | ||
| webm:{ | ||
| quality: 1 | ||
| }, | ||
| filename: "Default Video Name" + " " + moment().format(DEFAULT_TIME_FORMAT).toString() | ||
| }; | ||
|
|
||
| export class SettingsController extends Component{ | ||
| constructor(props) { | ||
| super(props); | ||
|
|
||
| // I need to pass mapDataGlobal to be used here | ||
| } | ||
|
|
||
| static defaultProps = { | ||
| adapter: new DeckAdapter(sceneBuilder) | ||
| }; | ||
|
|
||
| } | ||
|
|
||
| function sceneBuilder(animationLoop) { | ||
| console.log(" this.props.mapDataGlobal", mapDataGlobal); | ||
| const data = {}; | ||
| const keyframes = { | ||
| camera: new CameraKeyframes({ | ||
| timings: [0, 1000], | ||
| keyframes: [ | ||
| { | ||
| longitude: mapDataGlobal.mapState.longitude, | ||
| latitude: mapDataGlobal.mapState.latitude, | ||
| zoom: mapDataGlobal.mapState.zoom, | ||
| pitch: 0, | ||
| bearing: 0 | ||
| /* longitude: 11, | ||
| latitude: 0, | ||
| zoom: 2, | ||
| pitch: 0, | ||
| bearing: 0*/ | ||
| }, | ||
| { | ||
| longitude: mapDataGlobal.mapState.longitude, | ||
| latitude: mapDataGlobal.mapState.latitude, | ||
| zoom: mapDataGlobal.mapState.zoom, | ||
| bearing: 0, | ||
| pitch: 0 | ||
| /* longitude: 11, | ||
| latitude: 0, | ||
| zoom: 2, | ||
| pitch: 0, | ||
| bearing: 0*/ | ||
| } | ||
| ], | ||
| easings: [easing.easeInOut] | ||
| }) | ||
| }; | ||
| animationLoop.timeline.attachAnimation(keyframes.camera); | ||
|
|
||
| // TODO: Figure out how to set up the size | ||
| return new DeckScene({ | ||
| animationLoop, | ||
| keyframes, | ||
| lengthMs: 1000, | ||
| data, | ||
| width: 480, | ||
| height: 460 | ||
| }); | ||
| } | ||
|
|
||
| export function preview(adapter) { | ||
| adapter.render(PreviewEncoder, encoderSettings, ()=>{}); | ||
| } | ||
|
|
||
| export function setFileNameDeckAdapter(name){ | ||
| encoderSettings.filename = name + " " + moment().format(DEFAULT_TIME_FORMAT).toString(); | ||
| } | ||
|
|
||
| export function render(settingsdata, adapter){ | ||
|
|
||
| // setResolution(settingsdata.resolution); // Remove this | ||
|
|
||
| if (settingsdata.mediaType === 'WebM Video') { | ||
| adapter.render(WebMEncoder, encoderSettings, () => {}); // Onstop callback | ||
| } else if (settingsdata.mediaType === 'PNG Sequence') { | ||
| adapter.render(PNGSequenceEncoder, encoderSettings, () => {}); | ||
| } else if (settingsdata.mediaType === 'JPEG Sequence') { | ||
| adapter.render(JPEGSequenceEncoder, encoderSettings, () => {}); | ||
| } | ||
| // preview(); | ||
| } | ||
|
|
||
| /*function setResolution(resolution){ | ||
| if(resolution === 'Good (540p)'){ | ||
| adapter.scene.width = 960; | ||
| adapter.scene.height = 540; | ||
| }else if(resolution === 'High (720p)'){ | ||
| adapter.scene.width = 1280; | ||
| adapter.scene.height = 720; | ||
| }else if(resolution === 'Highest (1080p)'){ | ||
| adapter.scene.width = 1920; | ||
| adapter.scene.height = 1080; | ||
| } | ||
| }*/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,228 @@ | ||
| // Copyright (c) 2020 Uber Technologies, Inc. | ||
| // | ||
| // Permission is hereby granted, free of charge, to any person obtaining a copy | ||
| // of this software and associated documentation files (the "Software"), to deal | ||
| // in the Software without restriction, including without limitation the rights | ||
| // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | ||
| // copies of the Software, and to permit persons to whom the Software is | ||
| // furnished to do so, subject to the following conditions: | ||
| // | ||
| // The above copyright notice and this permission notice shall be included in | ||
| // all copies or substantial portions of the Software. | ||
| // | ||
| // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | ||
| // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | ||
| // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | ||
| // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | ||
| // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | ||
| // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN | ||
| // THE SOFTWARE. | ||
|
|
||
| import React, {Component, useState, useRef} from 'react'; | ||
|
|
||
| //Map Component | ||
| import DeckGL from '@deck.gl/react'; | ||
| import {OVERLAY_TYPE} from 'layers/base-layer'; | ||
| import MapboxGLMap from 'react-map-gl'; | ||
| import {transformRequest} from 'utils/map-style-utils/mapbox-utils'; | ||
|
|
||
| import {MapView} from '@deck.gl/core'; | ||
| import {TileLayer} from '@deck.gl/geo-layers'; | ||
| import {BitmapLayer, PathLayer} from '@deck.gl/layers'; | ||
|
|
||
| import { load } from "@loaders.gl/core"; | ||
|
|
||
| const MAPBOX_TOKEN = 'pk.eyJ1IjoicGlvbmVlci1tZSIsImEiOiJjanA0OXMwM2IwcW5qM2tvYnAyYndpdXMxIn0.bqxGkqM2ozOVT57GuVzEjw'; | ||
| const TRANSITION_DURATION = 0; | ||
|
|
||
| const INITIAL_VIEW_STATE = { | ||
| latitude: 47.65, | ||
| longitude: 7, | ||
| zoom: 4.5, | ||
| maxZoom: 20, | ||
| maxPitch: 89, | ||
| bearing: 0 | ||
| }; | ||
|
|
||
|
|
||
| const tileLayer = new TileLayer({ | ||
|
|
||
| autoHighlight : true, | ||
| highlightColor: [60, 60, 60, 40], | ||
| opacity: 1, | ||
| // https://wiki.openstreetmap.org/wiki/Zoom_levels | ||
| minZoom: 0, | ||
| maxZoom: 19, | ||
| tileSize: 256, | ||
|
|
||
|
|
||
| data: [ | ||
| `http://{d90016be4e11c76b57d0311404f546f06afbae25}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png` | ||
| ], | ||
|
|
||
|
|
||
| renderSubLayers: props => { | ||
| const { | ||
| bbox: { west, south, east, north } | ||
| } = props.tile; | ||
|
|
||
| return new BitmapLayer(props, { | ||
| data: [], | ||
| image: props.data, | ||
| bounds: [west, south, east, north] | ||
| }); | ||
| } | ||
| }) | ||
|
|
||
|
|
||
| /* global window */ | ||
| const devicePixelRatio = (typeof window !== 'undefined' && window.devicePixelRatio) || 1; | ||
|
|
||
| export class Scene extends Component { | ||
|
|
||
| constructor(props) { | ||
| super(props); | ||
|
|
||
| this.mapData = this.props.mapData; | ||
|
|
||
| //this.adapter = new DeckAdapter(this.props.sceneBuilder); | ||
| } | ||
|
|
||
|
|
||
| _renderLayer = (overlays, idx) => { | ||
| const datasets = this.mapData.visState.datasets; | ||
| const layers = this.mapData.visState.layers; | ||
| const layerData = this.mapData.visState.layerData; | ||
| const hoverInfo = this.mapData.visState.hoverInfo; | ||
| const clicked = this.mapData.visState.clicked; | ||
| const mapState = this.mapData.mapState; | ||
| const interactionConfig = this.mapData.visState.interactionConfig; | ||
| const animationConfig = this.mapData.visState.animationConfig; | ||
|
|
||
| const layer = layers[idx]; | ||
| const data = layerData[idx]; | ||
| const {gpuFilter} = datasets[layer.config.dataId] || {}; | ||
|
|
||
| const objectHovered = clicked || hoverInfo; | ||
| const layerCallbacks = { | ||
| onSetLayerDomain: val => this._onLayerSetDomain(idx, val) | ||
| }; | ||
|
|
||
| // Layer is Layer class | ||
| const layerOverlay = layer.renderLayer({ | ||
| data, | ||
| gpuFilter, | ||
| idx, | ||
| interactionConfig, | ||
| layerCallbacks, | ||
| mapState, | ||
| animationConfig, | ||
| objectHovered | ||
| }); | ||
| return overlays.concat(layerOverlay || []); | ||
| }; | ||
|
|
||
| // Testing purposes | ||
| print(prop){ | ||
| console.log("this.deckgl", prop); | ||
| }; | ||
|
|
||
| // Is this being used right? | ||
| componentDidMount() { | ||
| this.forceUpdate(); | ||
| } | ||
|
|
||
| // This is provisional - | ||
| // [ADD] TileLayer to the array of layers | ||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
| // interactionConfig, | ||
| render() { | ||
| // console.log("all props ", this.props.mapData); | ||
|
|
||
| const mapStyle = this.mapData.mapStyle; | ||
| const mapState = this.mapData.mapState; | ||
| const layers = this.mapData.visState.layers; | ||
| const layerData = this.mapData.visState.layerData; | ||
| const layerOrder = this.mapData.visState.layerOrder; | ||
| const animationConfig = this.mapData.visState.animationConfig; | ||
| const useDevicePixels = false; | ||
| //Map data | ||
| const mapboxApiAccessToken = this.mapData.mapStyle.mapboxApiAccessToken; | ||
| const mapboxApiUrl = this.mapData.mapStyle.mapboxApiUrl; | ||
| // define trip and geojson layers | ||
| let deckGlLayers = []; | ||
|
|
||
|
|
||
|
|
||
|
|
||
| // wait until data is ready before render data layers | ||
| if (layerOrder && layerOrder.length) { | ||
| // last layer render first | ||
| deckGlLayers = layerOrder | ||
| .slice() | ||
| .reverse() | ||
| .filter( | ||
| idx => layers[idx].overlayType === OVERLAY_TYPE.deckgl && layers[idx].id | ||
| ) | ||
| .reduce(this._renderLayer, []); | ||
| } | ||
|
|
||
| /* deckGlLayers[2] = deckGlLayers[1]; | ||
| deckGlLayers[1] = deckGlLayers[0] | ||
| deckGlLayers[0] = tileLayer; */ | ||
|
|
||
|
|
||
|
|
||
| console.log("deckGlLayers ", deckGlLayers); | ||
|
|
||
| // MapboxGLMap | ||
| const mapProps = { | ||
| ...mapState, | ||
| preserveDrawingBuffer: true, | ||
| mapboxApiAccessToken, | ||
| mapboxApiUrl, | ||
| transformRequest | ||
| }; | ||
|
|
||
| const style = { | ||
| position: 'relative' | ||
| } | ||
| console.log("adapter from scene ", this.props.adapter); | ||
|
|
||
| return ( | ||
| <div style={{width: '480px', height: "460px", position: 'relative'}}> | ||
| <DeckGL | ||
| ref={r => {this.deckgl={current:r}}} | ||
| viewState={mapState} | ||
| id="default-deckgl-overlay2" | ||
| layers={deckGlLayers} | ||
| useDevicePixels={useDevicePixels} | ||
| style={style} | ||
| views={new MapView({repeat: true})} | ||
| /* onBeforeRender={this._onBeforeRender} // Not yet | ||
| onHover={visStateActions.onLayerHover} // Not yet | ||
| onClick={visStateActions.onLayerClick}*/ // Not yet | ||
| {...this.props.adapter.getProps(this.deckgl, () => {}, () => {this.forceUpdate()})} | ||
| > | ||
|
|
||
| <MapboxGLMap // Maybe be missing Mapbox overlays | ||
| {...mapProps} | ||
| key="bottom" | ||
| ref={this._setMapboxMap} | ||
| mapStyle={mapStyle.bottomMapStyle} | ||
| getCursor={this.props.hoverInfo ? () => 'pointer' : undefined} | ||
| transitionDuration={TRANSITION_DURATION} | ||
| ></MapboxGLMap> | ||
|
|
||
| </DeckGL> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't think you need this import