From 86ebf84ab4e69b3e206e8755b94638924ae10284 Mon Sep 17 00:00:00 2001 From: geireann Date: Thu, 20 Mar 2025 11:59:29 -0400 Subject: adjusted mapbox when used with a nativewidth/height. fixed dragging a mapbox to not display the wrong location until forced to re-render --- src/client/views/nodes/MapBox/MapBox.scss | 5 +++++ src/client/views/nodes/MapBox/MapBox.tsx | 22 ++++++++++------------ 2 files changed, 15 insertions(+), 12 deletions(-) (limited to 'src') 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() { @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() { }; 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 (
@@ -1142,9 +1139,9 @@ export class MapBox extends ViewBoxAnnotatableComponent() { 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 && ( -
+
this.handleSearchChange(e.target.value)} /> } type={Type.TERT} onClick={() => this.toggleSettings()} />
@@ -1172,15 +1169,15 @@ export class MapBox extends ViewBoxAnnotatableComponent() {
Bearing:
- +
Pitch:
- +
Zoom:
- +
Show terrain:
@@ -1214,9 +1211,10 @@ export class MapBox extends ViewBoxAnnotatableComponent() { )} Date: Thu, 20 Mar 2025 14:34:32 -0400 Subject: mapbox cleanup. fix runtime warnings for stacking view. --- .../views/collections/CollectionStackingView.tsx | 2 +- src/client/views/nodes/MapBox/MapBox.tsx | 110 +++++++++------------ 2 files changed, 46 insertions(+), 66 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index 6bbd43b1b..392d85af3 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -404,7 +404,7 @@ export class CollectionStackingView extends CollectionSubView () => { if (!d) return 0; diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx index d642784c0..11a709faf 100644 --- a/src/client/views/nodes/MapBox/MapBox.tsx +++ b/src/client/views/nodes/MapBox/MapBox.tsx @@ -1,8 +1,8 @@ -import { IconLookup, faCircleXmark, faGear, faPause, faPlay, faRotate } from '@fortawesome/free-solid-svg-icons'; +import { IconButton, Size, Type } from '@dash/components'; +import { faCircleXmark, faGear, faPause, faPlay, faRotate } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Checkbox, FormControlLabel, TextField } from '@mui/material'; import * as turf from '@turf/turf'; -import { IconButton, Size, Type } from '@dash/components'; import * as d3 from 'd3'; import { Feature, FeatureCollection, GeoJsonProperties, Geometry, LineString } from 'geojson'; import { LngLatBoundsLike, LngLatLike, MapLayerMouseEvent } from 'mapbox-gl'; @@ -14,7 +14,10 @@ import { Layer, MapProvider, MapRef, Map as MapboxMap, Marker, Source, ViewState import { ClientUtils, setupMoveUpEvents } from '../../../../ClientUtils'; import { emptyFunction } from '../../../../Utils'; import { Doc, DocListCast, Field, LinkedTo, Opt, StrListCast } from '../../../../fields/Doc'; +import { List } from '../../../../fields/List'; +import { RichTextField } from '../../../../fields/RichTextField'; import { DocCast, NumCast, StrCast, toList } from '../../../../fields/Types'; +import { TraceMobx } from '../../../../fields/util'; import { DocUtils } from '../../../documents/DocUtils'; import { DocumentType } from '../../../documents/DocumentTypes'; import { Docs } from '../../../documents/Documents'; @@ -34,8 +37,6 @@ import { MapAnchorMenu } from './MapAnchorMenu'; import './MapBox.scss'; import { MapboxApiUtility, TransportationType } from './MapboxApiUtility'; import { MarkerIcons } from './MarkerIcons'; -import { RichTextField } from '../../../../fields/RichTextField'; -import { List } from '../../../../fields/List'; // import { GeocoderControl } from './GeocoderControl'; // amongus @@ -657,9 +658,7 @@ export class MapBox extends ViewBoxAnnotatableComponent() { MapAnchorMenu.Instance.Center = this.centerOnSelectedPin; MapAnchorMenu.Instance.OnClick = this.createNoteAnnotation; MapAnchorMenu.Instance.StartDrag = this.startAnchorDrag; - MapAnchorMenu.Instance.Reset(); - MapAnchorMenu.Instance.setRouteDoc(routeDoc); // TODO: Subject to change @@ -822,10 +821,7 @@ export class MapBox extends ViewBoxAnnotatableComponent() { @computed get preAnimationViewState() { - if (!this._isAnimating) { - return this.mapboxMapViewState; - } - return undefined; + return !this._isAnimating ? this.mapboxMapViewState : undefined; } @action @@ -835,24 +831,15 @@ export class MapBox extends ViewBoxAnnotatableComponent() { @action updateAnimationSpeed = () => { - let newAnimationSpeed: AnimationSpeed; + this._animationSpeed = (() => { switch (this._animationSpeed) { - case AnimationSpeed.SLOW: - newAnimationSpeed = AnimationSpeed.MEDIUM; - break; - case AnimationSpeed.MEDIUM: - newAnimationSpeed = AnimationSpeed.FAST; - break; - case AnimationSpeed.FAST: - newAnimationSpeed = AnimationSpeed.SLOW; - break; - default: - newAnimationSpeed = AnimationSpeed.MEDIUM; - break; - } - this._animationSpeed = newAnimationSpeed; + case AnimationSpeed.SLOW: return AnimationSpeed.MEDIUM; + case AnimationSpeed.MEDIUM: return AnimationSpeed.FAST; + case AnimationSpeed.FAST: return AnimationSpeed.SLOW; + default: return AnimationSpeed.MEDIUM; + }})(); // prettier-ignore if (this._animationUtility) { - this._animationUtility.updateAnimationSpeed(newAnimationSpeed); + this._animationUtility.updateAnimationSpeed(this._animationSpeed); } }; @computed get animationSpeedTooltipText(): string { @@ -879,19 +866,16 @@ export class MapBox extends ViewBoxAnnotatableComponent() { this._animationUtility?.updateIsStreetViewAnimation(newVal); }; - getFeatureFromRouteDoc = (routeDoc: Doc): Feature => { - const geometry: LineString = { + getFeatureFromRouteDoc = (routeDoc: Doc): Feature => ({ + type: 'Feature', + properties: { + routeTitle: routeDoc.title, + }, + geometry: { type: 'LineString', coordinates: JSON.parse(StrCast(routeDoc.routeCoordinates)), - }; - return { - type: 'Feature', - properties: { - routeTitle: routeDoc.title, - }, - geometry: geometry, - }; - }; + }, + }); @action playAnimation = (status: AnimationStatus) => { @@ -1014,7 +998,7 @@ export class MapBox extends ViewBoxAnnotatableComponent() { this.playAnimation(AnimationStatus.START); // Play from the beginning } }} - icon={this._isAnimating && this._finishedFlyTo ? : } + icon={} color="black" size={Size.MEDIUM} /> @@ -1025,12 +1009,12 @@ export class MapBox extends ViewBoxAnnotatableComponent() { this.stopAnimation(false); this.playAnimation(AnimationStatus.START); }} - icon={} + icon={} color="black" size={Size.MEDIUM} /> )} - this.stopAnimation(true)} icon={} color="black" size={Size.MEDIUM} /> + this.stopAnimation(true)} icon={} color="black" size={Size.MEDIUM} />
|
} /> @@ -1125,16 +1109,12 @@ export class MapBox extends ViewBoxAnnotatableComponent() { this._showTerrain = !this._showTerrain; }; - getMarkerIcon = (pinDoc: Doc): JSX.Element | null => { - const markerType = StrCast(pinDoc.markerType); - const markerColor = StrCast(pinDoc.markerColor); - - return MarkerIcons.getFontAwesomeIcon(markerType, '2x', markerColor) ?? null; - }; + getMarkerIcon = (pinDoc: Doc) => MarkerIcons.getFontAwesomeIcon(StrCast(pinDoc.markerType), '2x', StrCast(pinDoc.markerColor)) ?? null; render() { - const scale = this._props.NativeDimScaling?.() || 1; - const parscale = scale === 1 ? 1 : (this.ScreenToLocalBoxXf().Scale ?? 1); + TraceMobx(); + const scale = (this._props.NativeDimScaling?.() || 1) + 0.001; // bcz: weird, but without this hack, MapBox doesn't locate map correctly + const parscale = this.ScreenToLocalBoxXf().Scale; return (
@@ -1142,13 +1122,13 @@ export class MapBox extends ViewBoxAnnotatableComponent() { 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 && (
this.handleSearchChange(e.target.value)} /> - } type={Type.TERT} onClick={() => this.toggleSettings()} /> + } type={Type.TERT} onClick={this.toggleSettings} />
- } type={Type.TERT} onClick={() => this.toggleSettings()} /> + } type={Type.TERT} onClick={this.toggleSettings} />
)} @@ -1214,9 +1194,10 @@ export class MapBox extends ViewBoxAnnotatableComponent() { )} () { /> )} - - {!this._isAnimating && - this._animationPhase === 0 && - this.allPushpins // .filter(anno => !anno.layout_unrendered) - .map((pushpin, idx) => ( - this.handleMarkerClick(e.originalEvent.clientX, e.originalEvent.clientY, pushpin)}> - {this.getMarkerIcon(pushpin)} - - ))} - - {/* {this.mapMarkers.length > 0 && this.mapMarkers.map((marker, idx) => ( - - ))} */} + {this._isAnimating || this._animationPhase + ? null + : this.allPushpins.map(p => ( + this.handleMarkerClick(e.originalEvent.clientX, e.originalEvent.clientY, p)}> + {this.getMarkerIcon(p)} + + ))}
-- cgit v1.2.3-70-g09d2 From 3dd806f6afcf2dd6ec12ecf4db4b40810eb052ff Mon Sep 17 00:00:00 2001 From: bobzel Date: Thu, 20 Mar 2025 14:34:50 -0400 Subject: from last --- src/client/views/nodes/MapBox/MapBox.scss | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'src') diff --git a/src/client/views/nodes/MapBox/MapBox.scss b/src/client/views/nodes/MapBox/MapBox.scss index fdd8a29d7..381f073bb 100644 --- a/src/client/views/nodes/MapBox/MapBox.scss +++ b/src/client/views/nodes/MapBox/MapBox.scss @@ -7,6 +7,9 @@ overflow: hidden; display: flex; position: absolute; + .mapboxgl-marker { + cursor: default; + } .mapboxgl-map { overflow: unset !important; @@ -171,6 +174,7 @@ .mapBox-wrapper { width: 100%; + transform-origin: top left; .mapBox-input { box-sizing: border-box; border: 1px solid transparent; -- cgit v1.2.3-70-g09d2