adjusted mapbox when used with a nativewidth/height. fixed dragging a mapbox to not display the wrong location until forced to re-render

2 files changed, 15 insertions, 12 deletions

diff --git a/src/client/views/nodes/MapBox/MapBox.scss b/src/client/views/nodes/MapBox/MapBox.scss
index fdd8a29d7..8fbb6e82e 100644
--- a/src/client/views/nodes/MapBox/MapBox.scss
+++ b/src/client/views/nodes/MapBox/MapBox.scss
@@ -27,6 +27,9 @@
         gap: 5px;
         align-items: center;
         width: calc(100% - 40px);
+        z-index: 1;
+         position: relative;
+         background: lightGray;
     }
 
     .mapbox-settings-panel {
@@ -171,6 +174,8 @@
 
     .mapBox-wrapper {
         width: 100%;
+        transform-origin: top left;
+        
         .mapBox-input {
             box-sizing: border-box;
             border: 1px solid transparent;
diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx
index d642784c0..e79951df0 100644
--- a/src/client/views/nodes/MapBox/MapBox.tsx
+++ b/src/client/views/nodes/MapBox/MapBox.tsx
@@ -822,10 +822,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
     @computed
     get preAnimationViewState() {
-        if (!this._isAnimating) {
-            return this.mapboxMapViewState;
-        }
-        return undefined;
+        return !this._isAnimating ? this.mapboxMapViewState : undefined;
     }
 
     @action
@@ -1133,8 +1130,8 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
     };
 
     render() {
-        const scale = this._props.NativeDimScaling?.() || 1;
-        const parscale = scale === 1 ? 1 : (this.ScreenToLocalBoxXf().Scale ?? 1);
+        const scale = (this._props.NativeDimScaling?.() || 1) + 0.001;
+        const parscale = (this.ScreenToLocalBoxXf().Scale ?? 1);
 
         return (
             <div className="mapBox" ref={this._ref}>
@@ -1142,9 +1139,9 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                     className="mapBox-wrapper"
                     onWheel={e => e.stopPropagation()}
                     onPointerDown={e => e.button === 0 && !e.ctrlKey && e.stopPropagation()}
-                    style={{ transformOrigin: 'top left', transform: `scale(${scale})`, width: `calc(100% - ${this.sidebarWidthPercent})`, pointerEvents: this.pointerEvents() }}>
+                    style={{ transform: `scale(${scale})`, width: `calc(100% - ${this.sidebarWidthPercent})`, pointerEvents: this.pointerEvents() }}>
                     {!this._routeToAnimate && (
-                        <div className="mapBox-searchbar" style={{ width: `${100 / scale}%`, zIndex: 1, position: 'relative', background: 'lightGray' }}>
+                        <div className="mapBox-searchbar" style={{ width: `${100 / scale}%`, }}>
                             <TextField fullWidth placeholder="Enter a location" onKeyDown={this.searchbarKeyDown} onChange={e => this.handleSearchChange(e.target.value)} />
                             <IconButton icon={<FontAwesomeIcon icon={faGear as IconLookup} size="1x" />} type={Type.TERT} onClick={() => this.toggleSettings()} />
                             <div style={{ opacity: 0 }}>
@@ -1172,15 +1169,15 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                             </div>
                             <div className="mapbox-bearing-selection">
                                 <div>Bearing: </div>
-                                <input value={NumCast(this.mapboxMapViewState.bearing).toFixed(0)} type="number" onChange={this.onBearingChange} />
+                                <input value={this.mapboxMapViewState.bearing.toFixed(0)} type="number" onChange={this.onBearingChange} />
                             </div>
                             <div className="mapbox-pitch-selection">
                                 <div>Pitch: </div>
-                                <input value={NumCast(this.mapboxMapViewState.pitch).toFixed(0)} type="number" onChange={this.onPitchChange} />
+                                <input value={this.mapboxMapViewState.pitch.toFixed(0)} type="number" onChange={this.onPitchChange} />
                             </div>
                             <div className="mapbox-pitch-selection">
                                 <div>Zoom: </div>
-                                <input value={NumCast(this.mapboxMapViewState.zoom).toFixed(0)} type="number" onChange={this.onZoomChange} />
+                                <input value={this.mapboxMapViewState.zoom.toFixed(0)} type="number" onChange={this.onZoomChange} />
                             </div>
                             <div className="mapbox-terrain-selection">
                                 <div>Show terrain: </div>
@@ -1214,9 +1211,10 @@ export class MapBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                     )}
                     <MapProvider>
                         <MapboxMap
+                            key={""+this.Document.x+this.Document.y}
                             ref={this._mapRef}
                             mapboxAccessToken={MAPBOX_ACCESS_TOKEN}
-                            viewState={this._isAnimating || this._routeToAnimate ? undefined : { ...this.mapboxMapViewState, width: NumCast(this.layoutDoc._width), height: NumCast(this.layoutDoc._height) }}
+                            viewState={this._isAnimating || this._routeToAnimate ? undefined : { ...this.mapboxMapViewState, width: this._props.PanelWidth(), height: this._props.PanelHeight() }}
                             mapStyle={this.dataDoc.map_style ? StrCast(this.dataDoc.map_style) : 'mapbox://styles/mapbox/streets-v11'}
                             style={{
                                 position: 'absolute',