diff options
Diffstat (limited to 'src/client/views/nodes/MapBox/MapBox.tsx')
| -rw-r--r-- | src/client/views/nodes/MapBox/MapBox.tsx | 67 |
1 files changed, 26 insertions, 41 deletions
diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx index 5c4a6203a..b18bb9ad1 100644 --- a/src/client/views/nodes/MapBox/MapBox.tsx +++ b/src/client/views/nodes/MapBox/MapBox.tsx @@ -1149,20 +1149,21 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps } }; - @observable - mapboxMapViewState: ViewState = { - zoom: this.dataDoc.map_zoom ? NumCast(this.dataDoc.map_zoom) : 8, - longitude: this.dataDoc.longitude ? NumCast(this.dataDoc.longitude) : -71.4128, - latitude: this.dataDoc.latitude ? NumCast(this.dataDoc.latitude) : 41.824, - pitch: this.dataDoc.map_pitch ? NumCast(this.dataDoc.map_pitch) : 0, - bearing: this.dataDoc.map_bearing ? NumCast(this.dataDoc.map_bearing) : 0, - padding: { - top: 0, - bottom: 0, - left: 0, - right: 0, - }, - }; + @computed get mapboxMapViewState(): ViewState { + return { + zoom: NumCast(this.dataDoc.map_zoom, 8), + longitude: NumCast(this.dataDoc.longitude, -71.4128), + latitude: NumCast(this.dataDoc.latitude, 41.824), + pitch: NumCast(this.dataDoc.map_pitch), + bearing: NumCast(this.dataDoc.map_bearing), + padding: { + top: 0, + bottom: 0, + left: 0, + right: 0, + }, + }; + } @computed get preAnimationViewState() { @@ -1389,9 +1390,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps this.routeToAnimate = undefined; this.animationUtility = null; } - if (this.preAnimationViewState) { - this.mapboxMapViewState = this.preAnimationViewState; - } }; @action @@ -1487,10 +1485,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps const fixedBearing = Math.max(0, Math.min(360, bearing)); this._mapRef.current.setBearing(fixedBearing); this.dataDoc.map_bearing = fixedBearing; - this.mapboxMapViewState = { - ...this.mapboxMapViewState, - bearing: fixedBearing, - }; } }; @@ -1501,10 +1495,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps const fixedPitch = Math.max(0, Math.min(85, pitch)); this._mapRef.current.setPitch(fixedPitch); this.dataDoc.map_pitch = fixedPitch; - this.mapboxMapViewState = { - ...this.mapboxMapViewState, - pitch: fixedPitch, - }; } }; @@ -1515,10 +1505,6 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps const fixedZoom = Math.max(0, Math.min(16, zoom)); this._mapRef.current.setZoom(fixedZoom); this.dataDoc.map_zoom = fixedZoom; - this.mapboxMapViewState = { - ...this.mapboxMapViewState, - zoom: fixedZoom, - }; } }; @@ -1528,23 +1514,18 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps let newZoom: number; if (increment) { console.log('inc'); - newZoom = this.mapboxMapViewState.zoom + 1; + newZoom = Math.min(16, this.mapboxMapViewState.zoom + 1); } else { console.log('dec'); - newZoom = this.mapboxMapViewState.zoom - 1; + newZoom = Math.max(0, this.mapboxMapViewState.zoom - 1); } this._mapRef.current.setZoom(newZoom); this.dataDoc.map_zoom = newZoom; - this.mapboxMapViewState = { - ...this.mapboxMapViewState, - zoom: increment ? Math.min(16, newZoom) : Math.max(0, newZoom), - }; } }; @action onMapMove = (e: ViewStateChangeEvent) => { - this.mapboxMapViewState = e.viewState; this.dataDoc.longitude = e.viewState.longitude; this.dataDoc.latitude = e.viewState.latitude; }; @@ -1580,7 +1561,9 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps }), MapBox._rerenderDelay); return null; } + const parscale = this.props.ScreenToLocalTransform().Scale ?? 1; const scale = this.props.NativeDimScaling?.() || 1; + const docscale = this.props.DocumentView?.().props.ScreenToLocalTransform().Scale ?? 1; const renderAnnotations = (childFilters?: () => string[]) => null; return ( @@ -1682,15 +1665,17 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps <MapboxMap ref={this._mapRef} mapboxAccessToken={MAPBOX_ACCESS_TOKEN} - id="mapbox-map" - viewState={{ ...this.mapboxMapViewState, width: NumCast(this.layoutDoc._width) / scale, height: NumCast(this.layoutDoc._height) / scale }} + viewState={this.isAnimating ? undefined : { ...this.mapboxMapViewState, width: NumCast(this.layoutDoc._width) / scale, height: NumCast(this.layoutDoc._height) / scale }} mapStyle={this.dataDoc.map_style ? StrCast(this.dataDoc.map_style) : 'mapbox://styles/mapbox/streets-v11'} style={{ - transformOrigin: 'center', + transformOrigin: 'top left', + position: 'absolute', + top: 0, + left: 0, transform: `scale(${scale < 1 ? 1 : scale})`, zIndex: '0', - width: '100%', - height: '100%', + width: '100%', //NumCast(this.layoutDoc._width) / scale, + height: '100%', // NumCast(this.layoutDoc._height) / scale, }} initialViewState={this.isAnimating ? undefined : this.mapboxMapViewState} onMove={this.onMapMove} |