diff --git a/src/controls/MMapRouteControl/MMapWaypointInput/index.ts b/src/controls/MMapRouteControl/MMapWaypointInput/index.ts index 2bb589d..1da60a2 100644 --- a/src/controls/MMapRouteControl/MMapWaypointInput/index.ts +++ b/src/controls/MMapRouteControl/MMapWaypointInput/index.ts @@ -23,6 +23,8 @@ const INDICATOR_COLORS = { dark: {from: '#D6FD63', to: '#C8D2E6'} }; +const DELAY_BETWEEN_BLUR_AND_CLICK = 200; + export type SelectWaypointArgs = { feature: SearchResponseFeature; }; @@ -36,10 +38,14 @@ export type MMapWaypointInputProps = { suggest?: (args: CustomSuggest) => Promise | SuggestResponse; onSelectWaypoint?: (args: SelectWaypointArgs | null) => void; onMouseMoveOnMap?: (coordinates: LngLat, lastCall: boolean) => void; + onError?: () => void; }; const defaultProps = Object.freeze({geolocationTextInput: 'My location'}); +/** + * @internal + */ export class MMapWaypointInput extends mappable.MMapComplexEntity { static defaultProps = defaultProps; private _detachDom?: DomDetach; @@ -56,9 +62,7 @@ export class MMapWaypointInput extends mappable.MMapComplexEntity { this._inputEl.value = ''; + this._suggestComponent.update({searchInputValue: ''}); this._updateIndicatorStatus('empty'); this._props.onSelectWaypoint(null); - } + }; private _onUpdateWaypoint = debounce((e: Event) => { const target = e.target as HTMLInputElement; @@ -204,6 +211,7 @@ export class MMapWaypointInput extends mappable.MMapComplexEntity { + this._isInputFocused = true; this._addDirectChild(this._suggestComponent); this._updateIndicatorStatus('focus'); }; @@ -216,15 +224,12 @@ export class MMapWaypointInput extends mappable.MMapComplexEntity { + this._isInputFocused = false; + }, DELAY_BETWEEN_BLUR_AND_CLICK); }; private _submitWaypointInput = (event?: SubmitEvent) => { @@ -252,7 +257,7 @@ export class MMapWaypointInput extends mappable.MMapComplexEntity { const text = this._props.geolocationTextInput; this._inputEl.value = text; @@ -263,7 +268,7 @@ export class MMapWaypointInput extends mappable.MMapComplexEntity { if (this._isInputFocused) { this._isHoverMode = false; + this._isInputFocused = false; this._props.onMouseMoveOnMap?.(event.coordinates, true); this._inputEl.blur(); this._search({text: event.coordinates.toString()}, event.coordinates); diff --git a/src/controls/MMapRouteControl/index.ts b/src/controls/MMapRouteControl/index.ts index ceb420e..0b142c1 100644 --- a/src/controls/MMapRouteControl/index.ts +++ b/src/controls/MMapRouteControl/index.ts @@ -192,6 +192,14 @@ class MMapCommonRouteControl extends mappable.MMapComplexEntity): void { + if (diffProps.search !== undefined) { + this._waypointInputFromElement.update({search: diffProps.search}); + this._waypointInputToElement.update({search: diffProps.search}); + } + if (diffProps.suggest !== undefined) { + this._waypointInputFromElement.update({suggest: diffProps.suggest}); + this._waypointInputToElement.update({suggest: diffProps.suggest}); + } if (diffProps.waypoints !== undefined) { this._waypointInputFromElement.update({waypoint: diffProps.waypoints[0]}); this._waypointInputToElement.update({waypoint: diffProps.waypoints[1]}); @@ -226,14 +234,14 @@ class MMapCommonRouteControl extends mappable.MMapComplexEntity { if (result === null) { this._waypoints[waypointIndex] = null; @@ -247,6 +255,11 @@ class MMapCommonRouteControl extends mappable.MMapComplexEntity { onMouseMoveOnMap?.(coordinates, waypointIndex, lastCall); + }, + onError: () => { + this._showServerError(() => { + this._rootElement.removeChild(this._routeInfoElement); + }); } }); } @@ -307,28 +320,34 @@ class MMapCommonRouteControl extends mappable.MMapComplexEntity this._route())); + this._showServerError(() => this._route()); } }, 200); + private _showServerError(onButtonClick: () => void) { + this._props.onBuildRouteError?.(); + this._rootElement.appendChild(this._routeInfoElement); + this._routeInfoElement.classList.add('mappable--route-control_info__error'); + this._routeInfoElement.replaceChildren(...createRouteServerError(onButtonClick)); + } + private _getRouteDetails(response: BaseRouteResponse): HTMLElement[] { if (!response.toSteps) { return []; diff --git a/src/controls/MMapSearchControl/MMapSuggest/index.ts b/src/controls/MMapSearchControl/MMapSuggest/index.ts index 304d705..5461f01 100644 --- a/src/controls/MMapSearchControl/MMapSuggest/index.ts +++ b/src/controls/MMapSearchControl/MMapSuggest/index.ts @@ -28,17 +28,19 @@ class MMapSuggest extends mappable.MMapComplexEntity { private _rootElement?: HTMLElement; private _unwatchThemeContext?: () => void; private _unwatchControlContext?: () => void; + private _searchInputValue?: string; public get activeSuggest() { - return this._getSuggestElements().find((element) => element.classList.contains(ACTIVE_CLASS)); + return this._getSuggestElements().find((element) => element?.classList.contains(ACTIVE_CLASS)); } private _updateSuggest(props: Partial) { - if (props.searchInputValue) { + if (props.searchInputValue !== undefined && props.searchInputValue !== this._searchInputValue) { + this._searchInputValue = props.searchInputValue; this._updateSuggestList(props.searchInputValue); } - if (props.suggestNavigationAction) { + if (props.suggestNavigationAction !== undefined) { this._updateActiveSuggest(props.suggestNavigationAction); } } @@ -147,7 +149,8 @@ class MMapSuggest extends mappable.MMapComplexEntity { protected override _onAttach(): void { this._rootElement = document.createElement('mappable'); - this._rootElement.classList.add(SUGGEST_CLASS, HIDE_CLASS); + this._rootElement.classList.add(SUGGEST_CLASS); + this._rootElement?.classList.toggle(HIDE_CLASS, !this.children.length); this._rootElement.addEventListener('mouseover', this._onMouseOverHandler); this._rootElement.addEventListener('mouseout', this._onMouseOutHandler); @@ -158,9 +161,7 @@ class MMapSuggest extends mappable.MMapComplexEntity { this._unwatchThemeContext = this._watchContext( mappable.ThemeContext, () => this._updateTheme(this._rootElement), - { - immediate: true - } + {immediate: true} ); this._unwatchControlContext = this._watchContext( @@ -175,8 +176,6 @@ class MMapSuggest extends mappable.MMapComplexEntity { } protected override _onDetach(): void { - this._removeSuggestItems(); - this._detachDom?.(); this._detachDom = undefined;