From 1dc3915a5f7bdf46c483b024ebc8b2f18904f507 Mon Sep 17 00:00:00 2001 From: Hugo Alliaume Date: Fri, 25 Jul 2025 09:01:17 +0200 Subject: [PATCH] Modernize and simplify our packages building tools, replace Rollup by tsup --- assets/dist/map_controller.d.ts | 20 +- assets/dist/map_controller.js | 669 ++++++++++++++++---------------- 2 files changed, 353 insertions(+), 336 deletions(-) diff --git a/assets/dist/map_controller.d.ts b/assets/dist/map_controller.d.ts index 4cb6034..3a27c9a 100644 --- a/assets/dist/map_controller.d.ts +++ b/assets/dist/map_controller.d.ts @@ -1,9 +1,8 @@ -import type { CircleDefinition, Icon, InfoWindowDefinition, MapDefinition, MarkerDefinition, PolygonDefinition, PolylineDefinition, RectangleDefinition } from '@symfony/ux-map'; -import AbstractMapController from '@symfony/ux-map'; -import 'leaflet/dist/leaflet.min.css'; -import type { CircleOptions, ControlPosition, MapOptions as LeafletMapOptions, MarkerOptions, PolylineOptions as PolygonOptions, PolylineOptions, PopupOptions, PolylineOptions as RectangleOptions } from 'leaflet'; +import AbstractMapController, { MapDefinition, MarkerDefinition, PolygonDefinition, PolylineDefinition, CircleDefinition, RectangleDefinition, InfoWindowDefinition, Icon } from '@symfony/ux-map'; import * as L from 'leaflet'; -type MapOptions = Pick & { +import { MapOptions as MapOptions$1, ControlPosition, MarkerOptions, PopupOptions, PolylineOptions, CircleOptions } from 'leaflet'; + +type MapOptions = Pick & { attributionControlOptions?: { position: ControlPosition; prefix: string | false; @@ -21,7 +20,7 @@ type MapOptions = Pick options: Record; } | false; }; -export default class extends AbstractMapController { +declare class export_default extends AbstractMapController { map: L.Map; connect(): void; centerValueChanged(): void; @@ -30,14 +29,14 @@ export default class extends AbstractMapController): void; protected doCreateMap({ definition }: { - definition: MapDefinition; + definition: MapDefinition; }): L.Map; protected doCreateMarker({ definition }: { definition: MarkerDefinition; }): L.Marker; protected doRemoveMarker(marker: L.Marker): void; protected doCreatePolygon({ definition }: { - definition: PolygonDefinition; + definition: PolygonDefinition; }): L.Polygon; protected doRemovePolygon(polygon: L.Polygon): void; protected doCreatePolyline({ definition }: { @@ -49,7 +48,7 @@ export default class extends AbstractMapController; + definition: RectangleDefinition; }): L.Rectangle; protected doRemoveRectangle(rectangle: L.Rectangle): void; protected doCreateInfoWindow({ definition, element, }: { @@ -63,4 +62,5 @@ export default class extends AbstractMapController this.createMarker({ definition })); + this.polygonsValue.forEach((definition) => this.createPolygon({ definition })); + this.polylinesValue.forEach((definition) => this.createPolyline({ definition })); + this.circlesValue.forEach((definition) => this.createCircle({ definition })); + this.rectanglesValue.forEach((definition) => this.createRectangle({ definition })); + if (this.fitBoundsToMarkersValue) { + this.doFitBoundsToMarkers(); } - connect() { - const extra = this.hasExtraValue ? this.extraValue : {}; - const mapDefinition = { - center: this.hasCenterValue ? this.centerValue : null, - zoom: this.hasZoomValue ? this.zoomValue : null, - minZoom: this.hasMinZoomValue ? this.minZoomValue : null, - maxZoom: this.hasMaxZoomValue ? this.maxZoomValue : null, - options: this.optionsValue, - extra, - }; - this.dispatchEvent('pre-connect', mapDefinition); - 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.createCircle = this.createDrawingFactory('circle', this.circles, this.doCreateCircle.bind(this)); - this.createRectangle = this.createDrawingFactory('rectangle', this.rectangles, this.doCreateRectangle.bind(this)); - this.map = this.doCreateMap({ definition: mapDefinition }); - this.markersValue.forEach((definition) => this.createMarker({ definition })); - this.polygonsValue.forEach((definition) => this.createPolygon({ definition })); - this.polylinesValue.forEach((definition) => this.createPolyline({ definition })); - this.circlesValue.forEach((definition) => this.createCircle({ definition })); - this.rectanglesValue.forEach((definition) => this.createRectangle({ definition })); - if (this.fitBoundsToMarkersValue) { - this.doFitBoundsToMarkers(); - } - this.dispatchEvent('connect', { - map: this.map, - markers: [...this.markers.values()], - polygons: [...this.polygons.values()], - polylines: [...this.polylines.values()], - circles: [...this.circles.values()], - rectangles: [...this.rectangles.values()], - infoWindows: this.infoWindows, - extra, - }); - this.isConnected = true; + this.dispatchEvent("connect", { + map: this.map, + markers: [...this.markers.values()], + polygons: [...this.polygons.values()], + polylines: [...this.polylines.values()], + circles: [...this.circles.values()], + rectangles: [...this.rectangles.values()], + infoWindows: this.infoWindows, + extra + }); + this.isConnected = true; + } + //region Public API + createInfoWindow({ + definition, + element + }) { + this.dispatchEvent("info-window:before-create", { definition, element }); + const infoWindow = this.doCreateInfoWindow({ definition, element }); + this.dispatchEvent("info-window:after-create", { infoWindow, definition, element }); + this.infoWindows.push(infoWindow); + return infoWindow; + } + markersValueChanged() { + if (!this.isConnected) { + return; } - createInfoWindow({ definition, element, }) { - this.dispatchEvent('info-window:before-create', { definition, element }); - const infoWindow = this.doCreateInfoWindow({ definition, element }); - this.dispatchEvent('info-window:after-create', { infoWindow, definition, element }); - this.infoWindows.push(infoWindow); - return infoWindow; + this.onDrawChanged(this.markers, this.markersValue, this.createMarker, this.doRemoveMarker); + if (this.fitBoundsToMarkersValue) { + this.doFitBoundsToMarkers(); } - markersValueChanged() { - if (!this.isConnected) { - return; - } - this.onDrawChanged(this.markers, this.markersValue, this.createMarker, this.doRemoveMarker); - if (this.fitBoundsToMarkersValue) { - this.doFitBoundsToMarkers(); - } + } + polygonsValueChanged() { + if (!this.isConnected) { + return; } - polygonsValueChanged() { - if (!this.isConnected) { - return; - } - this.onDrawChanged(this.polygons, this.polygonsValue, this.createPolygon, this.doRemovePolygon); + this.onDrawChanged(this.polygons, this.polygonsValue, this.createPolygon, this.doRemovePolygon); + } + polylinesValueChanged() { + if (!this.isConnected) { + return; } - polylinesValueChanged() { - if (!this.isConnected) { - return; - } - this.onDrawChanged(this.polylines, this.polylinesValue, this.createPolyline, this.doRemovePolyline); + this.onDrawChanged(this.polylines, this.polylinesValue, this.createPolyline, this.doRemovePolyline); + } + circlesValueChanged() { + if (!this.isConnected) { + return; } - circlesValueChanged() { - if (!this.isConnected) { - return; - } - this.onDrawChanged(this.circles, this.circlesValue, this.createCircle, this.doRemoveCircle); + this.onDrawChanged(this.circles, this.circlesValue, this.createCircle, this.doRemoveCircle); + } + rectanglesValueChanged() { + if (!this.isConnected) { + return; } - rectanglesValueChanged() { - if (!this.isConnected) { - return; - } - this.onDrawChanged(this.rectangles, this.rectanglesValue, this.createRectangle, this.doRemoveRectangle); - } - createDrawingFactory(type, draws, factory) { - const eventBefore = `${type}:before-create`; - const eventAfter = `${type}:after-create`; - return ({ definition }) => { - this.dispatchEvent(eventBefore, { definition }); - if (typeof definition.rawOptions !== 'undefined') { - console.warn(`[Symfony UX Map] The event "${eventBefore}" added a deprecated "rawOptions" property to the definition, it will be removed in a next major version, replace it with "bridgeOptions" instead.`, definition); - } - const drawing = factory({ definition }); - this.dispatchEvent(eventAfter, { [type]: drawing, definition }); - 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); - }); - newDrawDefinitions.forEach((definition) => { - if (!draws.has(definition['@id'])) { - factory({ definition }); - } - }); - } -} -default_1.values = { - providerOptions: Object, - center: Object, - zoom: Number, - minZoom: Number, - maxZoom: Number, - fitBoundsToMarkers: Boolean, - markers: Array, - polygons: Array, - polylines: Array, - circles: Array, - rectangles: Array, - options: Object, - extra: Object, + this.onDrawChanged(this.rectangles, this.rectanglesValue, this.createRectangle, this.doRemoveRectangle); + } + createDrawingFactory(type, draws, factory) { + const eventBefore = `${type}:before-create`; + const eventAfter = `${type}:after-create`; + return ({ definition }) => { + this.dispatchEvent(eventBefore, { definition }); + if (typeof definition.rawOptions !== "undefined") { + console.warn( + `[Symfony UX Map] The event "${eventBefore}" added a deprecated "rawOptions" property to the definition, it will be removed in a next major version, replace it with "bridgeOptions" instead.`, + definition + ); + } + const drawing = factory({ definition }); + this.dispatchEvent(eventAfter, { [type]: drawing, definition }); + 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); + }); + newDrawDefinitions.forEach((definition) => { + if (!draws.has(definition["@id"])) { + factory({ definition }); + } + }); + } + //endregion +}; +abstract_map_controller_default.values = { + providerOptions: Object, + center: Object, + zoom: Number, + minZoom: Number, + maxZoom: Number, + fitBoundsToMarkers: Boolean, + markers: Array, + polygons: Array, + polylines: Array, + circles: Array, + rectangles: Array, + options: Object, + extra: Object }; -class map_controller extends default_1 { - connect() { - L.Marker.prototype.options.icon = L.divIcon({ - html: '', - iconSize: [25, 41], - iconAnchor: [12.5, 41], - popupAnchor: [0, -41], - className: '', - }); - super.connect(); +// src/map_controller.ts +import "leaflet/dist/leaflet.min.css"; +import * as L from "leaflet"; +var map_controller_default = class extends abstract_map_controller_default { + connect() { + L.Marker.prototype.options.icon = L.divIcon({ + html: '', + iconSize: [25, 41], + iconAnchor: [12.5, 41], + popupAnchor: [0, -41], + className: "" + // Adding an empty class to the icon to avoid the default Leaflet styles + }); + super.connect(); + } + centerValueChanged() { + if (this.map && this.hasCenterValue && this.centerValue && this.hasZoomValue && this.zoomValue) { + this.map.setView(this.centerValue, this.zoomValue); } - centerValueChanged() { - if (this.map && this.hasCenterValue && this.centerValue && this.hasZoomValue && this.zoomValue) { - this.map.setView(this.centerValue, this.zoomValue); - } + } + zoomValueChanged() { + if (this.map && this.hasZoomValue && this.zoomValue) { + this.map.setZoom(this.zoomValue); } - zoomValueChanged() { - if (this.map && this.hasZoomValue && this.zoomValue) { - this.map.setZoom(this.zoomValue); - } + } + minZoomValueChanged() { + if (this.map && this.hasMinZoomValue && this.minZoomValue) { + this.map.setMinZoom(this.minZoomValue); } - minZoomValueChanged() { - if (this.map && this.hasMinZoomValue && this.minZoomValue) { - this.map.setMinZoom(this.minZoomValue); - } + } + maxZoomValueChanged() { + if (this.map && this.hasMaxZoomValue && this.maxZoomValue) { + this.map.setMaxZoom(this.maxZoomValue); } - maxZoomValueChanged() { - if (this.map && this.hasMaxZoomValue && this.maxZoomValue) { - this.map.setMaxZoom(this.maxZoomValue); - } + } + dispatchEvent(name, payload = {}) { + payload.L = L; + this.dispatch(name, { + prefix: "ux:map", + detail: payload + }); + } + doCreateMap({ definition }) { + const { center, zoom, minZoom, maxZoom, options, bridgeOptions = {} } = definition; + const map2 = L.map(this.element, { + center: center === null ? void 0 : center, + zoom: zoom === null ? void 0 : zoom, + minZoom: minZoom === null ? void 0 : minZoom, + maxZoom: maxZoom === null ? void 0 : maxZoom, + attributionControl: false, + zoomControl: false, + ...options, + ...bridgeOptions + }); + if (options.tileLayer) { + L.tileLayer(options.tileLayer.url, { + attribution: options.tileLayer.attribution, + ...options.tileLayer.options + }).addTo(map2); } - dispatchEvent(name, payload = {}) { - payload.L = L; - this.dispatch(name, { - prefix: 'ux:map', - detail: payload, - }); + if (typeof options.attributionControlOptions !== "undefined") { + L.control.attribution({ ...options.attributionControlOptions }).addTo(map2); } - doCreateMap({ definition }) { - const { center, zoom, minZoom, maxZoom, options, bridgeOptions = {} } = definition; - const map = L.map(this.element, { - center: center === null ? undefined : center, - zoom: zoom === null ? undefined : zoom, - minZoom: minZoom === null ? undefined : minZoom, - maxZoom: maxZoom === null ? undefined : maxZoom, - attributionControl: false, - zoomControl: false, - ...options, - ...bridgeOptions, - }); - if (options.tileLayer) { - L.tileLayer(options.tileLayer.url, { - attribution: options.tileLayer.attribution, - ...options.tileLayer.options, - }).addTo(map); - } - if (typeof options.attributionControlOptions !== 'undefined') { - L.control.attribution({ ...options.attributionControlOptions }).addTo(map); - } - if (typeof options.zoomControlOptions !== 'undefined') { - L.control.zoom({ ...options.zoomControlOptions }).addTo(map); - } - return map; + if (typeof options.zoomControlOptions !== "undefined") { + L.control.zoom({ ...options.zoomControlOptions }).addTo(map2); } - doCreateMarker({ definition }) { - const { '@id': _id, position, title, infoWindow, icon, rawOptions = {}, bridgeOptions = {} } = definition; - const marker = L.marker(position, { - title: title || undefined, - ...rawOptions, - ...bridgeOptions, - riseOnHover: true, - }).addTo(this.map); - if (infoWindow) { - this.createInfoWindow({ definition: infoWindow, element: marker }); - } - if (icon) { - this.doCreateIcon({ definition: icon, element: marker }); - } - return marker; + return map2; + } + doCreateMarker({ definition }) { + const { "@id": _id, position, title, infoWindow, icon: icon2, rawOptions = {}, bridgeOptions = {} } = definition; + const marker2 = L.marker(position, { + title: title || void 0, + ...rawOptions, + ...bridgeOptions, + riseOnHover: true + }).addTo(this.map); + if (infoWindow) { + this.createInfoWindow({ definition: infoWindow, element: marker2 }); } - doRemoveMarker(marker) { - marker.remove(); + if (icon2) { + this.doCreateIcon({ definition: icon2, element: marker2 }); } - doCreatePolygon({ definition }) { - const { '@id': _id, points, title, infoWindow, rawOptions = {}, bridgeOptions = {} } = definition; - const polygon = L.polygon(points, { ...rawOptions, ...bridgeOptions }).addTo(this.map); - if (title) { - polygon.bindPopup(title); - } - if (infoWindow) { - this.createInfoWindow({ definition: infoWindow, element: polygon }); - } - return polygon; + return marker2; + } + doRemoveMarker(marker2) { + marker2.remove(); + } + doCreatePolygon({ definition }) { + const { "@id": _id, points, title, infoWindow, rawOptions = {}, bridgeOptions = {} } = definition; + const polygon2 = L.polygon(points, { ...rawOptions, ...bridgeOptions }).addTo(this.map); + if (title) { + polygon2.bindPopup(title); } - doRemovePolygon(polygon) { - polygon.remove(); + if (infoWindow) { + this.createInfoWindow({ definition: infoWindow, element: polygon2 }); } - doCreatePolyline({ definition }) { - const { '@id': _id, points, title, infoWindow, rawOptions = {}, bridgeOptions = {} } = definition; - const polyline = L.polyline(points, { ...rawOptions, ...bridgeOptions }).addTo(this.map); - if (title) { - polyline.bindPopup(title); - } - if (infoWindow) { - this.createInfoWindow({ definition: infoWindow, element: polyline }); - } - return polyline; + return polygon2; + } + doRemovePolygon(polygon2) { + polygon2.remove(); + } + doCreatePolyline({ definition }) { + const { "@id": _id, points, title, infoWindow, rawOptions = {}, bridgeOptions = {} } = definition; + const polyline2 = L.polyline(points, { ...rawOptions, ...bridgeOptions }).addTo(this.map); + if (title) { + polyline2.bindPopup(title); } - doRemovePolyline(polyline) { - polyline.remove(); + if (infoWindow) { + this.createInfoWindow({ definition: infoWindow, element: polyline2 }); } - doCreateCircle({ definition }) { - const { '@id': _id, center, radius, title, infoWindow, rawOptions = {}, bridgeOptions = {} } = definition; - const circle = L.circle(center, { radius, ...rawOptions, ...bridgeOptions }).addTo(this.map); - if (title) { - circle.bindPopup(title); - } - if (infoWindow) { - this.createInfoWindow({ definition: infoWindow, element: circle }); - } - return circle; + return polyline2; + } + doRemovePolyline(polyline2) { + polyline2.remove(); + } + doCreateCircle({ definition }) { + const { "@id": _id, center, radius, title, infoWindow, rawOptions = {}, bridgeOptions = {} } = definition; + const circle2 = L.circle(center, { radius, ...rawOptions, ...bridgeOptions }).addTo(this.map); + if (title) { + circle2.bindPopup(title); } - doRemoveCircle(circle) { - circle.remove(); + if (infoWindow) { + this.createInfoWindow({ definition: infoWindow, element: circle2 }); } - doCreateRectangle({ definition }) { - const { '@id': _id, southWest, northEast, title, infoWindow, rawOptions = {}, bridgeOptions = {} } = definition; - const rectangle = L.rectangle([ - [southWest.lat, southWest.lng], - [northEast.lat, northEast.lng], - ], { ...rawOptions, ...bridgeOptions }).addTo(this.map); - if (title) { - rectangle.bindPopup(title); - } - if (infoWindow) { - this.createInfoWindow({ definition: infoWindow, element: rectangle }); - } - return rectangle; + return circle2; + } + doRemoveCircle(circle2) { + circle2.remove(); + } + doCreateRectangle({ definition }) { + const { "@id": _id, southWest, northEast, title, infoWindow, rawOptions = {}, bridgeOptions = {} } = definition; + const rectangle2 = L.rectangle( + [ + [southWest.lat, southWest.lng], + [northEast.lat, northEast.lng] + ], + { ...rawOptions, ...bridgeOptions } + ).addTo(this.map); + if (title) { + rectangle2.bindPopup(title); } - doRemoveRectangle(rectangle) { - rectangle.remove(); + if (infoWindow) { + this.createInfoWindow({ definition: infoWindow, element: rectangle2 }); } - doCreateInfoWindow({ definition, element, }) { - const { headerContent, content, opened, autoClose, rawOptions = {}, bridgeOptions = {} } = definition; - element.bindPopup([headerContent, content].filter((x) => x).join('
'), { ...rawOptions, ...bridgeOptions }); - if (opened) { - if (autoClose) { - this.closePopups(); - } - element.openPopup(); - } - const popup = element.getPopup(); - if (!popup) { - throw new Error('Unable to get the Popup associated with the element.'); - } - popup.on('click', () => { - if (autoClose) { - this.closePopups({ except: popup }); - } - }); - return popup; + return rectangle2; + } + doRemoveRectangle(rectangle2) { + rectangle2.remove(); + } + doCreateInfoWindow({ + definition, + element + }) { + const { headerContent, content, opened, autoClose, rawOptions = {}, bridgeOptions = {} } = definition; + element.bindPopup([headerContent, content].filter((x) => x).join("
"), { ...rawOptions, ...bridgeOptions }); + if (opened) { + if (autoClose) { + this.closePopups(); + } + element.openPopup(); } - doCreateIcon({ definition, element }) { - const { type, width, height } = definition; - let icon; - if (type === IconTypes.Svg) { - icon = L.divIcon({ - html: definition.html, - iconSize: [width, height], - className: '', - }); - } - else if (type === IconTypes.UxIcon) { - icon = L.divIcon({ - html: definition._generated_html, - iconSize: [width, height], - className: '', - }); - } - else if (type === IconTypes.Url) { - icon = L.icon({ - iconUrl: definition.url, - iconSize: [width, height], - className: '', - }); - } - else { - throw new Error(`Unsupported icon type: ${type}.`); - } - element.setIcon(icon); + const popup = element.getPopup(); + if (!popup) { + throw new Error("Unable to get the Popup associated with the element."); } - doFitBoundsToMarkers() { - if (this.markers.size === 0) { - return; - } - const bounds = []; - this.markers.forEach((marker) => { - const position = marker.getLatLng(); - bounds.push([position.lat, position.lng]); - }); - this.map.fitBounds(bounds); + popup.on("click", () => { + if (autoClose) { + this.closePopups({ except: popup }); + } + }); + return popup; + } + doCreateIcon({ definition, element }) { + const { type, width, height } = definition; + let icon2; + if (type === IconTypes.Svg) { + icon2 = L.divIcon({ + html: definition.html, + iconSize: [width, height], + className: "" + // Adding an empty class to the icon to avoid the default Leaflet styles + }); + } else if (type === IconTypes.UxIcon) { + icon2 = L.divIcon({ + html: definition._generated_html, + iconSize: [width, height], + className: "" + // Adding an empty class to the icon to avoid the default Leaflet styles + }); + } else if (type === IconTypes.Url) { + icon2 = L.icon({ + iconUrl: definition.url, + iconSize: [width, height], + className: "" + // Adding an empty class to the icon to avoid the default Leaflet styles + }); + } else { + throw new Error(`Unsupported icon type: ${type}.`); } - closePopups(options = {}) { - this.infoWindows.forEach((popup) => { - if (options.except && popup === options.except) { - return; - } - popup.close(); - }); + element.setIcon(icon2); + } + doFitBoundsToMarkers() { + if (this.markers.size === 0) { + return; } -} - -export { map_controller as default }; + const bounds = []; + this.markers.forEach((marker2) => { + const position = marker2.getLatLng(); + bounds.push([position.lat, position.lng]); + }); + this.map.fitBounds(bounds); + } + closePopups(options = {}) { + this.infoWindows.forEach((popup) => { + if (options.except && popup === options.except) { + return; + } + popup.close(); + }); + } +}; +export { + map_controller_default as default +};