github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 17:59:23 -04:00
Code Issues Projects Releases Packages Wiki Activity

[maps] fix map application crashes when leaving map while drawing filter (#122353)

Browse source 
* [maps] fix map application crashes when leaving map while drawing filter

* clean-up

* more clean up

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Nathan Reese 2022-01-10 10:05:24 -07:00 • committed by GitHub
parent f5aa068ef2
commit a9b82b0740
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 26 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

21
x-pack/plugins/maps/public/connected_components/mb_map/draw_control/draw_circle.ts
View file

@ -15,7 +15,24 @@ import { Feature, GeoJSON, Position } from 'geojson';
const DRAW_CIRCLE_RADIUS = 'draw-circle-radius';
export const DRAW_CIRCLE_RADIUS_MB_FILTER = ['==', 'meta', DRAW_CIRCLE_RADIUS];
export const DRAW_CIRCLE_RADIUS_LABEL_STYLE = {
id: 'gl-draw-radius-label',
type: 'symbol',
filter: ['==', 'meta', DRAW_CIRCLE_RADIUS],
layout: {
'text-anchor': 'right',
'text-field': '{radiusLabel}',
'text-size': 16,
'text-offset': [-1, 0],
'text-ignore-placement': true,
'text-allow-overlap': true,
},
paint: {
'text-color': '#fbb03b',
'text-halo-color': 'rgba(0, 0, 0, 1)',
'text-halo-width': 2,
},
};
export interface DrawCircleProperties {
center: Position;
@ -148,7 +165,7 @@ export const DrawCircle = {
radiusLabel = `${Math.round(state.circle.properties.radiusKm)} km`;
}
// display radius label, requires custom 'symbol' style with DRAW_CIRCLE_RADIUS_MB_FILTER filter
// display radius label, requires custom style: DRAW_CIRCLE_RADIUS_LABEL_STYLE
display({
type: 'Feature',
properties: {

31
x-pack/plugins/maps/public/connected_components/mb_map/draw_control/draw_control.tsx
View file

@ -10,16 +10,16 @@ import React, { Component } from 'react';
// @ts-expect-error
import MapboxDraw from '@mapbox/mapbox-gl-draw';
// @ts-expect-error
import mapboxDrawStyles from '@mapbox/mapbox-gl-draw/src/lib/theme';
// @ts-expect-error
import DrawRectangle from 'mapbox-gl-draw-rectangle-mode';
import type { Map as MbMap } from '@kbn/mapbox-gl';
import { Feature } from 'geojson';
import { MapMouseEvent } from '@kbn/mapbox-gl';
import { DRAW_SHAPE } from '../../../../common/constants';
import { DrawCircle, DRAW_CIRCLE_RADIUS_MB_FILTER } from './draw_circle';
import { DrawCircle, DRAW_CIRCLE_RADIUS_LABEL_STYLE } from './draw_circle';
import { DrawTooltip } from './draw_tooltip';
const GL_DRAW_RADIUS_LABEL_LAYER_ID = 'gl-draw-radius-label';
const mbModeEquivalencies = new Map<string, DRAW_SHAPE>([
['simple_select', DRAW_SHAPE.SIMPLE_SELECT],
['draw_rectangle', DRAW_SHAPE.BOUNDS],
@ -50,6 +50,7 @@ export class DrawControl extends Component<Props> {
private _mbDrawControl = new MapboxDraw({
displayControlsDefault: false,
modes: mbDrawModes,
styles: [...mapboxDrawStyles, DRAW_CIRCLE_RADIUS_LABEL_STYLE],
});
componentDidUpdate() {
@ -97,7 +98,9 @@ export class DrawControl extends Component<Props> {
};
_removeDrawControl() {
if (!this._mbDrawControlAdded) {
// Do not remove draw control after mbMap.remove is called, causes execeptions and mbMap.remove cleans up all map resources.
const isMapRemoved = !this.props.mbMap.loaded();
if (!this._mbDrawControlAdded || isMapRemoved) {
return;
}
@ -107,7 +110,6 @@ export class DrawControl extends Component<Props> {
if (this.props.onClick) {
this.props.mbMap.off('click', this._onClick);
}
this.props.mbMap.removeLayer(GL_DRAW_RADIUS_LABEL_LAYER_ID);
this.props.mbMap.removeControl(this._mbDrawControl);
this._mbDrawControlAdded = false;
}
@ -119,25 +121,6 @@ export class DrawControl extends Component<Props> {
if (!this._mbDrawControlAdded) {
this.props.mbMap.addControl(this._mbDrawControl);
this.props.mbMap.addLayer({
id: GL_DRAW_RADIUS_LABEL_LAYER_ID,
type: 'symbol',
source: 'mapbox-gl-draw-hot',
filter: DRAW_CIRCLE_RADIUS_MB_FILTER,
layout: {
'text-anchor': 'right',
'text-field': '{radiusLabel}',
'text-size': 16,
'text-offset': [-1, 0],
'text-ignore-placement': true,
'text-allow-overlap': true,
},
paint: {
'text-color': '#fbb03b',
'text-halo-color': 'rgba(0, 0, 0, 1)',
'text-halo-width': 2,
},
});
this._mbDrawControlAdded = true;
this.props.mbMap.getCanvas().style.cursor = 'crosshair';
this.props.mbMap.on('draw.modechange', this._onModeChange);