import { MapEventType_default } from "./chunk-BHVDQB66.js"; import { CLASS_SELECTABLE } from "./chunk-GNM7L5BH.js"; import { outerHeight, outerWidth, removeChildren } from "./chunk-YWIWRQT2.js"; import { containsExtent } from "./chunk-CKDBVGKM.js"; import { Object_default } from "./chunk-H47PV7W6.js"; import { listen, unlistenByKey } from "./chunk-KJXIHBKT.js"; // node_modules/ol/Overlay.js var Property = { ELEMENT: "element", MAP: "map", OFFSET: "offset", POSITION: "position", POSITIONING: "positioning" }; var Overlay = class extends Object_default { /** * @param {Options} options Overlay options. */ constructor(options) { super(); this.on; this.once; this.un; this.options = options; this.id = options.id; this.insertFirst = options.insertFirst !== void 0 ? options.insertFirst : true; this.stopEvent = options.stopEvent !== void 0 ? options.stopEvent : true; this.element = document.createElement("div"); this.element.className = options.className !== void 0 ? options.className : "ol-overlay-container " + CLASS_SELECTABLE; this.element.style.position = "absolute"; this.element.style.pointerEvents = "auto"; this.autoPan = options.autoPan === true ? {} : options.autoPan || void 0; this.rendered = { transform_: "", visible: true }; this.mapPostrenderListenerKey = null; this.addChangeListener(Property.ELEMENT, this.handleElementChanged); this.addChangeListener(Property.MAP, this.handleMapChanged); this.addChangeListener(Property.OFFSET, this.handleOffsetChanged); this.addChangeListener(Property.POSITION, this.handlePositionChanged); this.addChangeListener(Property.POSITIONING, this.handlePositioningChanged); if (options.element !== void 0) { this.setElement(options.element); } this.setOffset(options.offset !== void 0 ? options.offset : [0, 0]); this.setPositioning(options.positioning || "top-left"); if (options.position !== void 0) { this.setPosition(options.position); } } /** * Get the DOM element of this overlay. * @return {HTMLElement|undefined} The Element containing the overlay. * @observable * @api */ getElement() { return ( /** @type {HTMLElement|undefined} */ this.get(Property.ELEMENT) ); } /** * Get the overlay identifier which is set on constructor. * @return {number|string|undefined} Id. * @api */ getId() { return this.id; } /** * Get the map associated with this overlay. * @return {import("./Map.js").default|null} The map that the * overlay is part of. * @observable * @api */ getMap() { return ( /** @type {import("./Map.js").default|null} */ this.get(Property.MAP) || null ); } /** * Get the offset of this overlay. * @return {Array} The offset. * @observable * @api */ getOffset() { return ( /** @type {Array} */ this.get(Property.OFFSET) ); } /** * Get the current position of this overlay. * @return {import("./coordinate.js").Coordinate|undefined} The spatial point that the overlay is * anchored at. * @observable * @api */ getPosition() { return ( /** @type {import("./coordinate.js").Coordinate|undefined} */ this.get(Property.POSITION) ); } /** * Get the current positioning of this overlay. * @return {Positioning} How the overlay is positioned * relative to its point on the map. * @observable * @api */ getPositioning() { return ( /** @type {Positioning} */ this.get(Property.POSITIONING) ); } /** * @protected */ handleElementChanged() { removeChildren(this.element); const element = this.getElement(); if (element) { this.element.appendChild(element); } } /** * @protected */ handleMapChanged() { var _a; if (this.mapPostrenderListenerKey) { (_a = this.element) == null ? void 0 : _a.remove(); unlistenByKey(this.mapPostrenderListenerKey); this.mapPostrenderListenerKey = null; } const map = this.getMap(); if (map) { this.mapPostrenderListenerKey = listen( map, MapEventType_default.POSTRENDER, this.render, this ); this.updatePixelPosition(); const container = this.stopEvent ? map.getOverlayContainerStopEvent() : map.getOverlayContainer(); if (this.insertFirst) { container.insertBefore(this.element, container.childNodes[0] || null); } else { container.appendChild(this.element); } this.performAutoPan(); } } /** * @protected */ render() { this.updatePixelPosition(); } /** * @protected */ handleOffsetChanged() { this.updatePixelPosition(); } /** * @protected */ handlePositionChanged() { this.updatePixelPosition(); this.performAutoPan(); } /** * @protected */ handlePositioningChanged() { this.updatePixelPosition(); } /** * Set the DOM element to be associated with this overlay. * @param {HTMLElement|undefined} element The Element containing the overlay. * @observable * @api */ setElement(element) { this.set(Property.ELEMENT, element); } /** * Set the map to be associated with this overlay. * @param {import("./Map.js").default|null} map The map that the * overlay is part of. Pass `null` to just remove the overlay from the current map. * @observable * @api */ setMap(map) { this.set(Property.MAP, map); } /** * Set the offset for this overlay. * @param {Array} offset Offset. * @observable * @api */ setOffset(offset) { this.set(Property.OFFSET, offset); } /** * Set the position for this overlay. If the position is `undefined` the * overlay is hidden. * @param {import("./coordinate.js").Coordinate|undefined} position The spatial point that the overlay * is anchored at. * @observable * @api */ setPosition(position) { this.set(Property.POSITION, position); } /** * Pan the map so that the overlay is entirely visible in the current viewport * (if necessary) using the configured autoPan parameters * @protected */ performAutoPan() { if (this.autoPan) { this.panIntoView(this.autoPan); } } /** * Pan the map so that the overlay is entirely visible in the current viewport * (if necessary). * @param {PanIntoViewOptions} [panIntoViewOptions] Options for the pan action * @api */ panIntoView(panIntoViewOptions) { const map = this.getMap(); if (!map || !map.getTargetElement() || !this.get(Property.POSITION)) { return; } const mapRect = this.getRect(map.getTargetElement(), map.getSize()); const element = this.getElement(); const overlayRect = this.getRect(element, [ outerWidth(element), outerHeight(element) ]); panIntoViewOptions = panIntoViewOptions || {}; const myMargin = panIntoViewOptions.margin === void 0 ? 20 : panIntoViewOptions.margin; if (!containsExtent(mapRect, overlayRect)) { const offsetLeft = overlayRect[0] - mapRect[0]; const offsetRight = mapRect[2] - overlayRect[2]; const offsetTop = overlayRect[1] - mapRect[1]; const offsetBottom = mapRect[3] - overlayRect[3]; const delta = [0, 0]; if (offsetLeft < 0) { delta[0] = offsetLeft - myMargin; } else if (offsetRight < 0) { delta[0] = Math.abs(offsetRight) + myMargin; } if (offsetTop < 0) { delta[1] = offsetTop - myMargin; } else if (offsetBottom < 0) { delta[1] = Math.abs(offsetBottom) + myMargin; } if (delta[0] !== 0 || delta[1] !== 0) { const center = ( /** @type {import("./coordinate.js").Coordinate} */ map.getView().getCenterInternal() ); const centerPx = map.getPixelFromCoordinateInternal(center); if (!centerPx) { return; } const newCenterPx = [centerPx[0] + delta[0], centerPx[1] + delta[1]]; const panOptions = panIntoViewOptions.animation || {}; map.getView().animateInternal({ center: map.getCoordinateFromPixelInternal(newCenterPx), duration: panOptions.duration, easing: panOptions.easing }); } } } /** * Get the extent of an element relative to the document * @param {HTMLElement} element The element. * @param {import("./size.js").Size} size The size of the element. * @return {import("./extent.js").Extent} The extent. * @protected */ getRect(element, size) { const box = element.getBoundingClientRect(); const offsetX = box.left + window.pageXOffset; const offsetY = box.top + window.pageYOffset; return [offsetX, offsetY, offsetX + size[0], offsetY + size[1]]; } /** * Set the positioning for this overlay. * @param {Positioning} positioning how the overlay is * positioned relative to its point on the map. * @observable * @api */ setPositioning(positioning) { this.set(Property.POSITIONING, positioning); } /** * Modify the visibility of the element. * @param {boolean} visible Element visibility. * @protected */ setVisible(visible) { if (this.rendered.visible !== visible) { this.element.style.display = visible ? "" : "none"; this.rendered.visible = visible; } } /** * Update pixel position. * @protected */ updatePixelPosition() { const map = this.getMap(); const position = this.getPosition(); if (!map || !map.isRendered() || !position) { this.setVisible(false); return; } const pixel = map.getPixelFromCoordinate(position); const mapSize = map.getSize(); this.updateRenderedPosition(pixel, mapSize); } /** * @param {import("./pixel.js").Pixel} pixel The pixel location. * @param {import("./size.js").Size|undefined} mapSize The map size. * @protected */ updateRenderedPosition(pixel, mapSize) { const style = this.element.style; const offset = this.getOffset(); const positioning = this.getPositioning(); this.setVisible(true); const x = `${pixel[0] + offset[0]}px`; const y = `${pixel[1] + offset[1]}px`; let posX = "0%"; let posY = "0%"; if (positioning == "bottom-right" || positioning == "center-right" || positioning == "top-right") { posX = "-100%"; } else if (positioning == "bottom-center" || positioning == "center-center" || positioning == "top-center") { posX = "-50%"; } if (positioning == "bottom-left" || positioning == "bottom-center" || positioning == "bottom-right") { posY = "-100%"; } else if (positioning == "center-left" || positioning == "center-center" || positioning == "center-right") { posY = "-50%"; } const transform = `translate(${posX}, ${posY}) translate(${x}, ${y})`; if (this.rendered.transform_ != transform) { this.rendered.transform_ = transform; style.transform = transform; } } /** * returns the options this Overlay has been created with * @return {Options} overlay options */ getOptions() { return this.options; } }; var Overlay_default = Overlay; export { Overlay_default }; //# sourceMappingURL=chunk-WJRPSVEV.js.map