Use union type instead of enum for overlay positioning

This commit is contained in:
Tim Schaub
2021-09-05 10:49:15 -06:00
committed by Andreas Hocevar
parent 9a6f8493fb
commit 03dbe1f9a1
3 changed files with 25 additions and 49 deletions

View File

@@ -3,12 +3,18 @@
*/
import BaseObject from './Object.js';
import MapEventType from './MapEventType.js';
import OverlayPositioning from './OverlayPositioning.js';
import {CLASS_SELECTABLE} from './css.js';
import {containsExtent} from './extent.js';
import {listen, unlistenByKey} from './events.js';
import {outerHeight, outerWidth, removeChildren, removeNode} from './dom.js';
/**
* @typedef {'bottom-left' | 'bottom-center' | 'bottom-right' | 'center-left' | 'center-center' | 'center-right' | 'top-left' | 'top-center' | 'top-right'} Positioning
* The overlay position: `'bottom-left'`, `'bottom-center'`, `'bottom-right'`,
* `'center-left'`, `'center-center'`, `'center-right'`, `'top-left'`,
* `'top-center'`, or `'top-right'`.
*/
/**
* @typedef {Object} Options
* @property {number|string} [id] Set the overlay id. The overlay id can be used
@@ -21,7 +27,7 @@ import {outerHeight, outerWidth, removeChildren, removeNode} from './dom.js';
* shifts the overlay down.
* @property {import("./coordinate.js").Coordinate} [position] The overlay position
* in map projection.
* @property {import("./OverlayPositioning.js").default} [positioning='top-left'] Defines how
* @property {Positioning} [positioning='top-left'] Defines how
* the overlay is actually positioned with respect to its `position` property.
* Possible values are `'bottom-left'`, `'bottom-center'`, `'bottom-right'`,
* `'center-left'`, `'center-center'`, `'center-right'`, `'top-left'`,
@@ -215,13 +221,7 @@ class Overlay extends BaseObject {
this.setOffset(options.offset !== undefined ? options.offset : [0, 0]);
this.setPositioning(
options.positioning !== undefined
? /** @type {import("./OverlayPositioning.js").default} */ (
options.positioning
)
: OverlayPositioning.TOP_LEFT
);
this.setPositioning(options.positioning || 'top-left');
if (options.position !== undefined) {
this.setPosition(options.position);
@@ -285,15 +285,13 @@ class Overlay extends BaseObject {
/**
* Get the current positioning of this overlay.
* @return {import("./OverlayPositioning.js").default} How the overlay is positioned
* @return {Positioning} How the overlay is positioned
* relative to its point on the map.
* @observable
* @api
*/
getPositioning() {
return /** @type {import("./OverlayPositioning.js").default} */ (
this.get(Property.POSITIONING)
);
return /** @type {Positioning} */ (this.get(Property.POSITIONING));
}
/**
@@ -503,7 +501,7 @@ class Overlay extends BaseObject {
/**
* Set the positioning for this overlay.
* @param {import("./OverlayPositioning.js").default} positioning how the overlay is
* @param {Positioning} positioning how the overlay is
* positioned relative to its point on the map.
* @observable
* @api
@@ -559,28 +557,28 @@ class Overlay extends BaseObject {
let posX = '0%';
let posY = '0%';
if (
positioning == OverlayPositioning.BOTTOM_RIGHT ||
positioning == OverlayPositioning.CENTER_RIGHT ||
positioning == OverlayPositioning.TOP_RIGHT
positioning == 'bottom-right' ||
positioning == 'center-right' ||
positioning == 'top-right'
) {
posX = '-100%';
} else if (
positioning == OverlayPositioning.BOTTOM_CENTER ||
positioning == OverlayPositioning.CENTER_CENTER ||
positioning == OverlayPositioning.TOP_CENTER
positioning == 'bottom-center' ||
positioning == 'center-center' ||
positioning == 'top-center'
) {
posX = '-50%';
}
if (
positioning == OverlayPositioning.BOTTOM_LEFT ||
positioning == OverlayPositioning.BOTTOM_CENTER ||
positioning == OverlayPositioning.BOTTOM_RIGHT
positioning == 'bottom-left' ||
positioning == 'bottom-center' ||
positioning == 'bottom-right'
) {
posY = '-100%';
} else if (
positioning == OverlayPositioning.CENTER_LEFT ||
positioning == OverlayPositioning.CENTER_CENTER ||
positioning == OverlayPositioning.CENTER_RIGHT
positioning == 'center-left' ||
positioning == 'center-center' ||
positioning == 'center-right'
) {
posY = '-50%';
}

View File

@@ -1,21 +0,0 @@
/**
* @module ol/OverlayPositioning
*/
/**
* Overlay position: `'bottom-left'`, `'bottom-center'`, `'bottom-right'`,
* `'center-left'`, `'center-center'`, `'center-right'`, `'top-left'`,
* `'top-center'`, `'top-right'`
* @enum {string}
*/
export default {
BOTTOM_LEFT: 'bottom-left',
BOTTOM_CENTER: 'bottom-center',
BOTTOM_RIGHT: 'bottom-right',
CENTER_LEFT: 'center-left',
CENTER_CENTER: 'center-center',
CENTER_RIGHT: 'center-right',
TOP_LEFT: 'top-left',
TOP_CENTER: 'top-center',
TOP_RIGHT: 'top-right',
};

View File

@@ -8,7 +8,6 @@ import MapEventType from '../MapEventType.js';
import MapProperty from '../MapProperty.js';
import ObjectEventType from '../ObjectEventType.js';
import Overlay from '../Overlay.js';
import OverlayPositioning from '../OverlayPositioning.js';
import PluggableMap from '../PluggableMap.js';
import View from '../View.js';
import ViewProperty from '../ViewProperty.js';
@@ -205,7 +204,7 @@ class OverviewMap extends Control {
*/
this.boxOverlay_ = new Overlay({
position: [0, 0],
positioning: OverlayPositioning.CENTER_CENTER,
positioning: 'center-center',
element: box,
});
this.ovmap_.addOverlay(this.boxOverlay_);