Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Map] Fix and improve TypeScript types, refactor same logic into dedicated methods (to reduce file size) #2406

Open
wants to merge 3 commits into
base: 2.x
Choose a base branch
from
Open

[Map] Fix and improve TypeScript types, refactor same logic into dedicated methods (to reduce file size) #2406

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a443ad8
[Map] Re-organize methods order, simplify types, don't dirty-append `…
Kocal Nov 24, 2024
d9d9ff9
[Map] Create "createDrawingFactory" to refactor methods "createMarker…
Kocal Nov 26, 2024
1d33a5f
[Map] Create "onDrawChanged" to refactor methods "markersValueChanged…
Kocal Nov 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
97 changes: 48 additions & 49 deletions src/Map/assets/dist/abstract_map_controller.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,30 +3,31 @@ export type Point = {
lat: number;
lng: number;
};
export type MarkerDefinition<MarkerOptions, InfoWindowOptions> = {
'@id': string;
export type Identifier = string;
export type WithIdentifier<T extends Record<string, unknown>> = T & {
'@id': Identifier;
};
export type MarkerDefinition<MarkerOptions, InfoWindowOptions> = WithIdentifier<{
position: Point;
title: string | null;
infoWindow?: Omit<InfoWindowDefinition<InfoWindowOptions>, 'position'>;
infoWindow?: InfoWindowWithoutPositionDefinition<InfoWindowOptions>;
rawOptions?: MarkerOptions;
extra: Record<string, unknown>;
};
export type PolygonDefinition<PolygonOptions, InfoWindowOptions> = {
'@id': string;
infoWindow?: Omit<InfoWindowDefinition<InfoWindowOptions>, 'position'>;
}>;
export type PolygonDefinition<PolygonOptions, InfoWindowOptions> = WithIdentifier<{
infoWindow?: InfoWindowWithoutPositionDefinition<InfoWindowOptions>;
points: Array<Point>;
title: string | null;
rawOptions?: PolygonOptions;
extra: Record<string, unknown>;
};
export type PolylineDefinition<PolylineOptions, InfoWindowOptions> = {
'@id': string;
infoWindow?: Omit<InfoWindowDefinition<InfoWindowOptions>, 'position'>;
}>;
export type PolylineDefinition<PolylineOptions, InfoWindowOptions> = WithIdentifier<{
infoWindow?: InfoWindowWithoutPositionDefinition<InfoWindowOptions>;
points: Array<Point>;
title: string | null;
rawOptions?: PolylineOptions;
extra: Record<string, unknown>;
};
}>;
export type InfoWindowDefinition<InfoWindowOptions> = {
headerContent: string | null;
content: string | null;
Expand All @@ -36,6 +37,7 @@ export type InfoWindowDefinition<InfoWindowOptions> = {
rawOptions?: InfoWindowOptions;
extra: Record<string, unknown>;
};
export type InfoWindowWithoutPositionDefinition<InfoWindowOptions> = Omit<InfoWindowDefinition<InfoWindowOptions>, 'position'>;
export default abstract class<MapOptions, Map, MarkerOptions, Marker, InfoWindowOptions, InfoWindow, PolygonOptions, Polygon, PolylineOptions, Polyline> extends Controller<HTMLElement> {
static values: {
providerOptions: ObjectConstructor;
Expand All @@ -55,50 +57,47 @@ export default abstract class<MapOptions, Map, MarkerOptions, Marker, InfoWindow
polylinesValue: Array<PolylineDefinition<PolylineOptions, InfoWindowOptions>>;
optionsValue: MapOptions;
protected map: Map;
protected markers: globalThis.Map<any, any>;
protected markers: globalThis.Map<string, Marker>;
protected polygons: globalThis.Map<string, Polygon>;
protected polylines: globalThis.Map<string, Polyline>;
protected infoWindows: Array<InfoWindow>;
protected polygons: globalThis.Map<any, any>;
protected polylines: globalThis.Map<any, any>;
private isConnected;
private createMarker;
private createPolygon;
private createPolyline;
protected abstract dispatchEvent(name: string, payload: Record<string, unknown>): void;
connect(): void;
createInfoWindow({ definition, element, }: {
definition: InfoWindowWithoutPositionDefinition<InfoWindowOptions>;
element: Marker | Polygon | Polyline;
}): InfoWindow;
abstract centerValueChanged(): void;
abstract zoomValueChanged(): void;
markersValueChanged(): void;
polygonsValueChanged(): void;
polylinesValueChanged(): void;
protected abstract doCreateMap({ center, zoom, options, }: {
center: Point | null;
zoom: number | null;
options: MapOptions;
}): Map;
createMarker(definition: MarkerDefinition<MarkerOptions, InfoWindowOptions>): Marker;
protected abstract removeMarker(marker: Marker): void;
protected abstract doCreateMarker(definition: MarkerDefinition<MarkerOptions, InfoWindowOptions>): Marker;
createPolygon(definition: PolygonDefinition<PolygonOptions, InfoWindowOptions>): Polygon;
protected abstract removePolygon(polygon: Polygon): void;
protected abstract doCreatePolygon(definition: PolygonDefinition<PolygonOptions, InfoWindowOptions>): Polygon;
createPolyline(definition: PolylineDefinition<PolylineOptions, InfoWindowOptions>): Polyline;
protected abstract removePolyline(polyline: Polyline): void;
protected abstract doCreatePolyline(definition: PolylineDefinition<PolylineOptions, InfoWindowOptions>): Polyline;
protected createInfoWindow({ definition, element, }: {
definition: MarkerDefinition<MarkerOptions, InfoWindowOptions>['infoWindow'];
element: Marker;
} | {
definition: PolygonDefinition<PolygonOptions, InfoWindowOptions>['infoWindow'];
element: Polygon;
} | {
definition: PolylineDefinition<PolylineOptions, InfoWindowOptions>['infoWindow'];
element: Polyline;
}): InfoWindow;
protected abstract doFitBoundsToMarkers(): void;
protected abstract doCreateMarker({ definition, }: {
definition: MarkerDefinition<MarkerOptions, InfoWindowOptions>;
}): Marker;
protected abstract doRemoveMarker(marker: Marker): void;
protected abstract doCreatePolygon({ definition, }: {
definition: PolygonDefinition<PolygonOptions, InfoWindowOptions>;
}): Polygon;
protected abstract doRemovePolygon(polygon: Polygon): void;
protected abstract doCreatePolyline({ definition, }: {
definition: PolylineDefinition<PolylineOptions, InfoWindowOptions>;
}): Polyline;
protected abstract doRemovePolyline(polyline: Polyline): void;
protected abstract doCreateInfoWindow({ definition, element, }: {
definition: MarkerDefinition<MarkerOptions, InfoWindowOptions>['infoWindow'];
element: Marker;
} | {
definition: PolygonDefinition<PolygonOptions, InfoWindowOptions>['infoWindow'];
element: Polygon;
} | {
definition: PolylineDefinition<PolylineOptions, InfoWindowOptions>['infoWindow'];
element: Polyline;
definition: InfoWindowWithoutPositionDefinition<InfoWindowOptions>;
element: Marker | Polygon | Polyline;
}): InfoWindow;
protected abstract doFitBoundsToMarkers(): void;
protected abstract dispatchEvent(name: string, payload: Record<string, unknown>): void;
abstract centerValueChanged(): void;
abstract zoomValueChanged(): void;
markersValueChanged(): void;
polygonsValueChanged(): void;
polylinesValueChanged(): void;
private createDrawingFactory;
private onDrawChanged;
}
100 changes: 39 additions & 61 deletions src/Map/assets/dist/abstract_map_controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,21 @@ class default_1 extends Controller {
constructor() {
super(...arguments);
this.markers = new Map();
this.infoWindows = [];
this.polygons = new Map();
this.polylines = new Map();
this.infoWindows = [];
this.isConnected = false;
}
connect() {
const options = this.optionsValue;
this.dispatchEvent('pre-connect', { options });
this.createMarker = this.createDrawingFactory('marker', this.markers, this.doCreateMarker.bind(this));
this.createPolygon = this.createDrawingFactory('polygon', this.polygons, this.doCreatePolygon.bind(this));
this.createPolyline = this.createDrawingFactory('polyline', this.polylines, this.doCreatePolyline.bind(this));
this.map = this.doCreateMap({ center: this.centerValue, zoom: this.zoomValue, options });
this.markersValue.forEach((marker) => this.createMarker(marker));
this.polygonsValue.forEach((polygon) => this.createPolygon(polygon));
this.polylinesValue.forEach((polyline) => this.createPolyline(polyline));
this.markersValue.forEach((definition) => this.createMarker({ definition }));
this.polygonsValue.forEach((definition) => this.createPolygon({ definition }));
this.polylinesValue.forEach((definition) => this.createPolyline({ definition }));
if (this.fitBoundsToMarkersValue) {
this.doFitBoundsToMarkers();
}
Expand All @@ -25,30 +29,7 @@ class default_1 extends Controller {
polylines: [...this.polylines.values()],
infoWindows: this.infoWindows,
});
}
createMarker(definition) {
this.dispatchEvent('marker:before-create', { definition });
const marker = this.doCreateMarker(definition);
this.dispatchEvent('marker:after-create', { marker });
marker['@id'] = definition['@id'];
this.markers.set(definition['@id'], marker);
return marker;
}
createPolygon(definition) {
this.dispatchEvent('polygon:before-create', { definition });
const polygon = this.doCreatePolygon(definition);
this.dispatchEvent('polygon:after-create', { polygon });
polygon['@id'] = definition['@id'];
this.polygons.set(definition['@id'], polygon);
return polygon;
}
createPolyline(definition) {
this.dispatchEvent('polyline:before-create', { definition });
const polyline = this.doCreatePolyline(definition);
this.dispatchEvent('polyline:after-create', { polyline });
polyline['@id'] = definition['@id'];
this.polylines.set(definition['@id'], polyline);
return polyline;
this.isConnected = true;
}
createInfoWindow({ definition, element, }) {
this.dispatchEvent('info-window:before-create', { definition, element });
Expand All @@ -58,53 +39,50 @@ class default_1 extends Controller {
return infoWindow;
}
markersValueChanged() {
if (!this.map) {
if (!this.isConnected) {
return;
}
this.markers.forEach((marker) => {
if (!this.markersValue.find((m) => m['@id'] === marker['@id'])) {
this.removeMarker(marker);
this.markers.delete(marker['@id']);
}
});
this.markersValue.forEach((marker) => {
if (!this.markers.has(marker['@id'])) {
this.createMarker(marker);
}
});
this.onDrawChanged(this.markers, this.markersValue, this.createMarker, this.doRemoveMarker);
if (this.fitBoundsToMarkersValue) {
this.doFitBoundsToMarkers();
}
}
polygonsValueChanged() {
if (!this.map) {
if (!this.isConnected) {
return;
}
this.polygons.forEach((polygon) => {
if (!this.polygonsValue.find((p) => p['@id'] === polygon['@id'])) {
this.removePolygon(polygon);
this.polygons.delete(polygon['@id']);
}
});
this.polygonsValue.forEach((polygon) => {
if (!this.polygons.has(polygon['@id'])) {
this.createPolygon(polygon);
}
});
this.onDrawChanged(this.polygons, this.polygonsValue, this.createPolygon, this.doRemovePolygon);
}
polylinesValueChanged() {
if (!this.map) {
if (!this.isConnected) {
return;
}
this.polylines.forEach((polyline) => {
if (!this.polylinesValue.find((p) => p['@id'] === polyline['@id'])) {
this.removePolyline(polyline);
this.polylines.delete(polyline['@id']);
}
this.onDrawChanged(this.polylines, this.polylinesValue, this.createPolyline, this.doRemovePolyline);
}
createDrawingFactory(type, draws, factory) {
const eventBefore = `${type}:before-create`;
const eventAfter = `${type}:after-create`;
return ({ definition }) => {
this.dispatchEvent(eventBefore, { definition });
const drawing = factory({ definition });
this.dispatchEvent(eventAfter, { [type]: drawing });
draws.set(definition['@id'], drawing);
return drawing;
};
}
onDrawChanged(draws, newDrawDefinitions, factory, remover) {
const idsToRemove = new Set(draws.keys());
newDrawDefinitions.forEach((definition) => {
idsToRemove.delete(definition['@id']);
});
idsToRemove.forEach((id) => {
const draw = draws.get(id);
remover(draw);
draws.delete(id);
});
this.polylinesValue.forEach((polyline) => {
if (!this.polylines.has(polyline['@id'])) {
this.createPolyline(polyline);
newDrawDefinitions.forEach((definition) => {
if (!draws.has(definition['@id'])) {
factory({ definition });
}
});
}
Expand Down
Loading