diff --git a/src/control/Control.Attribution.ts b/src/control/Control.Attribution.ts index 8e5b84dfe1..9f5f1188fe 100644 --- a/src/control/Control.Attribution.ts +++ b/src/control/Control.Attribution.ts @@ -47,8 +47,7 @@ const layerEvents = 'addlayer removelayer setbaselayer baselayerremove'; * attribution: '© OpenStreetMap contributors, © CARTO' * })); */ -class Attribution extends Control { - options: AttributionOptionsType; +class Attribution extends Control { //@internal _attributionContainer: HTMLDivElement; @@ -130,7 +129,9 @@ Map.addOnLoadHook(function () { export default Attribution; -export type AttributionOptionsType = { +export type AttributionOptionsTypeSpec = { content?: string | HTMLElement; custom?: boolean; -} & ControlOptionsType; +}; + +export type AttributionOptionsType = AttributionOptionsTypeSpec & ControlOptionsType; diff --git a/src/control/Control.Compass.ts b/src/control/Control.Compass.ts index 4fed9a9e66..de30af9e04 100644 --- a/src/control/Control.Compass.ts +++ b/src/control/Control.Compass.ts @@ -20,8 +20,7 @@ const options = { } }; -class Compass extends Control { - options: CompassOptionsType; +class Compass extends Control { //@internal _compass: HTMLDivElement; //@internal @@ -100,6 +99,8 @@ Map.addOnLoadHook(function () { export default Compass; -export type CompassOptionsType = { +export type CompassOptionsTypeSpec = { position: string | DomPositionType; -} & ControlOptionsType; +}; + +export type CompassOptionsType = CompassOptionsTypeSpec & ControlOptionsType; diff --git a/src/control/Control.LayerSwitcher.ts b/src/control/Control.LayerSwitcher.ts index 40641eca78..6d585b6f0b 100644 --- a/src/control/Control.LayerSwitcher.ts +++ b/src/control/Control.LayerSwitcher.ts @@ -33,8 +33,7 @@ const options: LayerSwitcherOptionsType = { * position : {'top': '0', 'right': '0'} * }).addTo(map); */ -class LayerSwitcher extends Control { - options: LayerSwitcherOptionsType; +class LayerSwitcher extends Control { container: HTMLDivElement; panel: HTMLDivElement; button: HTMLButtonElement; @@ -279,9 +278,11 @@ Map.addOnLoadHook(function () { export default LayerSwitcher; -export type LayerSwitcherOptionsType = { +export type LayerSwitcherOptionsTypeSpec = { baseTitle?: string; overlayTitle?: string; containerClass?: string; excludeLayers?: Array; -} & ControlOptionsType; +}; + +export type LayerSwitcherOptionsType = LayerSwitcherOptionsTypeSpec & ControlOptionsType; diff --git a/src/control/Control.Nav.ts b/src/control/Control.Nav.ts index 4a47f7f342..e6badce93c 100644 --- a/src/control/Control.Nav.ts +++ b/src/control/Control.Nav.ts @@ -1,18 +1,14 @@ import Map from '../map/Map'; import Control, { ControlOptionsType, DomPositionType } from './Control'; - const options: NavOptionsType = { 'position': 'top-left' }; - -export default class Nav extends Control { - +export default class Nav extends Control { buildOn() { return null; } - } Nav.mergeOptions(options); @@ -28,6 +24,8 @@ Map.addOnLoadHook(function () { } }); -export type NavOptionsType = { +export type NavOptionsTypeSpec = { position: string | DomPositionType; -} & ControlOptionsType; \ No newline at end of file +}; + +export type NavOptionsType = NavOptionsTypeSpec & ControlOptionsType; diff --git a/src/control/Control.Overview.ts b/src/control/Control.Overview.ts index 428a9fea1f..3341b6a985 100644 --- a/src/control/Control.Overview.ts +++ b/src/control/Control.Overview.ts @@ -51,8 +51,7 @@ const options: OverviewOptionsType = { * size: [300, 200] * }).addTo(map); */ -class Overview extends Control { - options: OverviewOptionsType; +class Overview extends Control { mapContainer: HTMLDivElement; button: HTMLDivElement; //@internal @@ -324,7 +323,8 @@ Map.addOnLoadHook(function () { }); export default Overview; -export type OverviewOptionsType = { + +export type OverviewOptionsTypeSpec = { level?: number; size?: Array; maximize?: boolean; @@ -336,4 +336,6 @@ export type OverviewOptionsType = { }; containerClass?: string; buttonClass?: string; -} & ControlOptionsType; +}; + +export type OverviewOptionsType = OverviewOptionsTypeSpec & ControlOptionsType; diff --git a/src/control/Control.Panel.ts b/src/control/Control.Panel.ts index d3dc14320c..3131d8f457 100644 --- a/src/control/Control.Panel.ts +++ b/src/control/Control.Panel.ts @@ -1,8 +1,8 @@ -import { extend, isNil, isString } from '../core/util'; -import { createEl } from '../core/util/dom'; -import { Point } from '../geo'; -import DragHandler from '../handler/Drag'; -import Control, { ControlOptionsType, DomPositionType } from './Control'; +import { extend, isNil, isString } from "../core/util"; +import { createEl } from "../core/util/dom"; +import { Point } from "../geo"; +import DragHandler from "../handler/Drag"; +import Control, { ControlOptionsType, DomPositionType } from "./Control"; /** * @property {Object} options - options @@ -15,11 +15,11 @@ import Control, { ControlOptionsType, DomPositionType } from './Control'; * @instance */ const options: PanelOptionsType = { - 'position': 'top-right', - 'draggable': true, - 'custom': false, - 'content': '', - 'closeButton': true + position: "top-right", + draggable: true, + custom: false, + content: "", + closeButton: true, }; /** @@ -37,9 +37,8 @@ const options: PanelOptionsType = { * closeButton : true * }).addTo(map); */ -class Panel extends Control { +class Panel extends Control { draggable: DragHandler; - options: PanelOptionsType; //@internal _startPos: Point; //@internal @@ -52,31 +51,34 @@ class Panel extends Control { */ buildOn(): HTMLDivElement { let dom; - if (this.options['custom']) { - if (isString(this.options['content'])) { - dom = createEl('div'); - dom.innerHTML = this.options['content']; + if (this.options["custom"]) { + if (isString(this.options["content"])) { + dom = createEl("div"); + dom.innerHTML = this.options["content"]; this._appendCustomClass(dom); } else { - dom = this.options['content']; + dom = this.options["content"]; } } else { - dom = createEl('div', 'maptalks-panel'); + dom = createEl("div", "maptalks-panel"); this._appendCustomClass(dom); - if (this.options['closeButton']) { - const closeButton = createEl('a', 'maptalks-close') as HTMLLinkElement; - closeButton.innerText = '×'; - closeButton.href = 'javascript:;'; + if (this.options["closeButton"]) { + const closeButton = createEl( + "a", + "maptalks-close" + ) as HTMLLinkElement; + closeButton.innerText = "×"; + closeButton.href = "javascript:;"; closeButton.onclick = () => { - dom.style.display = 'none'; - this.fire('close'); + dom.style.display = "none"; + this.fire("close"); }; dom.appendChild(closeButton); } - const panelContent = createEl('div', 'maptalks-panel-content'); - if (isString(this.options['content'])) { - panelContent.innerHTML = this.options['content']; + const panelContent = createEl("div", "maptalks-panel-content"); + if (isString(this.options["content"])) { + panelContent.innerHTML = this.options["content"]; } else { panelContent.appendChild(this.options.content); } @@ -84,15 +86,16 @@ class Panel extends Control { } this.draggable = new DragHandler(dom, { - 'cancelOn': this._cancelOn.bind(this), - 'ignoreMouseleave': true + cancelOn: this._cancelOn.bind(this), + ignoreMouseleave: true, }); - this.draggable.on('dragstart', this._onDragStart, this) - .on('dragging', this._onDragging, this) - .on('dragend', this._onDragEnd, this); + this.draggable + .on("dragstart", this._onDragStart, this) + .on("dragging", this._onDragging, this) + .on("dragend", this._onDragEnd, this); - if (this.options['draggable']) { + if (this.options["draggable"]) { this.draggable.enable(); } @@ -118,8 +121,8 @@ class Panel extends Control { * @fires Panel#contentchange */ setContent(content: string | HTMLElement) { - const old = this.options['content']; - this.options['content'] = content; + const old = this.options["content"]; + this.options["content"] = content; /** * contentchange event. * @@ -130,9 +133,9 @@ class Panel extends Control { * @property {String|HTMLElement} old - old content * @property {String|HTMLElement} new - new content */ - this.fire('contentchange', { - 'old': old, - 'new': content + this.fire("contentchange", { + old: old, + new: content, }); if (this.isVisible()) { this.update(); @@ -145,18 +148,20 @@ class Panel extends Control { * @return {String|HTMLElement} - content of the infowindow */ getContent() { - return this.options['content']; + return this.options["content"]; } //@internal _cancelOn(domEvent) { const target = domEvent.srcElement || domEvent.target, tagName = target.tagName.toLowerCase(); - if (tagName === 'button' || - tagName === 'input' || - tagName === 'select' || - tagName === 'option' || - tagName === 'textarea') { + if ( + tagName === "button" || + tagName === "input" || + tagName === "select" || + tagName === "option" || + tagName === "textarea" + ) { return true; } return false; @@ -164,7 +169,7 @@ class Panel extends Control { //@internal _onDragStart(param) { - this._startPos = param['mousePos']; + this._startPos = param["mousePos"]; this._startPosition = extend({}, this.getPosition()); /** * drag start event @@ -175,27 +180,31 @@ class Panel extends Control { * @property {Point} mousePos - mouse position * @property {Event} domEvent - dom event */ - this.fire('dragstart', param); + this.fire("dragstart", param); } //@internal _onDragging(param) { - const pos = param['mousePos']; + const pos = param["mousePos"]; const offset = pos.sub(this._startPos); const startPosition = this._startPosition; const position = this.getPosition(); - if (!isNil(position['top'])) { - position['top'] = parseInt(startPosition['top'] as string) + offset.y; + if (!isNil(position["top"])) { + position["top"] = + parseInt(startPosition["top"] as string) + offset.y; } - if (!isNil(position['bottom'])) { - position['bottom'] = parseInt(startPosition['bottom'] as string) - offset.y; + if (!isNil(position["bottom"])) { + position["bottom"] = + parseInt(startPosition["bottom"] as string) - offset.y; } - if (!isNil(position['left'])) { - position['left'] = parseInt(startPosition['left'] as string) + offset.x; + if (!isNil(position["left"])) { + position["left"] = + parseInt(startPosition["left"] as string) + offset.x; } - if (!isNil(position['right'])) { - position['right'] = parseInt(startPosition['right'] as string) - offset.x; + if (!isNil(position["right"])) { + position["right"] = + parseInt(startPosition["right"] as string) - offset.x; } this.setPosition(position); /** @@ -207,7 +216,7 @@ class Panel extends Control { * @property {Point} mousePos - mouse position * @property {Event} domEvent - dom event */ - this.fire('dragging', param); + this.fire("dragging", param); } //@internal @@ -223,7 +232,7 @@ class Panel extends Control { * @property {Point} mousePos - mouse position * @property {Event} domEvent - dom event */ - this.fire('dragend', param); + this.fire("dragend", param); } /** @@ -235,13 +244,11 @@ class Panel extends Control { const map = this.getMap(); const containerPoint = this.getContainerPoint(); const dom = this.getDOM(), - width = parseInt(dom.clientWidth + ''), - height = parseInt(dom.clientHeight + ''); + width = parseInt(dom.clientWidth + ""), + height = parseInt(dom.clientHeight + ""); const anchors = [ //top center - map.containerPointToCoordinate( - containerPoint.add(width / 2, 0) - ), + map.containerPointToCoordinate(containerPoint.add(width / 2, 0)), //middle right map.containerPointToCoordinate( containerPoint.add(width, height / 2) @@ -251,22 +258,21 @@ class Panel extends Control { containerPoint.add(width / 2, height) ), //middle left - map.containerPointToCoordinate( - containerPoint.add(0, height / 2) - ) - + map.containerPointToCoordinate(containerPoint.add(0, height / 2)), ]; return anchors; } - } Panel.mergeOptions(options); export default Panel; -export type PanelOptionsType = { + +export type PanelOptionsTypeSpec = { draggable?: boolean; custom?: boolean; content?: string | HTMLElement; closeButton?: boolean; -} & ControlOptionsType; +}; + +export type PanelOptionsType = ControlOptionsType & PanelOptionsTypeSpec; diff --git a/src/control/Control.Reset.ts b/src/control/Control.Reset.ts index 663a137b87..f5fef39084 100644 --- a/src/control/Control.Reset.ts +++ b/src/control/Control.Reset.ts @@ -21,12 +21,12 @@ const options: ResetOptionsType = { view: null }; -class Reset extends Control { +class Reset extends Control { //@internal _reset: HTMLDivElement; //@internal _view: MapViewType; - options: ResetOptionsType; + /** * method to build DOM of the control * @param {Map} map map to build on @@ -86,6 +86,9 @@ Map.addOnLoadHook(function () { }); export default Reset; -export type ResetOptionsType = { + +export type ResetOptionsTypeSpec = { view?: MapViewType; -} & ControlOptionsType; +}; + +export type ResetOptionsType = ControlOptionsType & ResetOptionsTypeSpec; diff --git a/src/control/Control.Scale.ts b/src/control/Control.Scale.ts index e5b25c650e..e1f431aa0e 100644 --- a/src/control/Control.Scale.ts +++ b/src/control/Control.Scale.ts @@ -37,14 +37,13 @@ const options: ScaleOptionsType = { */ const EVENTS_TO_LISTEN = 'zoomend moving moveend'; -class Scale extends Control { +class Scale extends Control { //@internal _scaleContainer: HTMLDivElement; //@internal _mScale: HTMLDivElement; //@internal _iScale: HTMLDivElement; - options: ScaleOptionsType; /** * method to build DOM of the control @@ -155,9 +154,12 @@ Map.addOnLoadHook(function () { }); export default Scale; -export type ScaleOptionsType = { + +export type ScaleOptionsTypeSpec = { maxWidth?: number; metric?: boolean; imperial?: boolean; containerClass?: string; -} & ControlOptionsType; +}; + +export type ScaleOptionsType = ControlOptionsType & ScaleOptionsTypeSpec; diff --git a/src/control/Control.Toolbar.ts b/src/control/Control.Toolbar.ts index 7eb692dd48..1ecd9ddc17 100644 --- a/src/control/Control.Toolbar.ts +++ b/src/control/Control.Toolbar.ts @@ -47,8 +47,7 @@ const options: ToolbarOptionsType = { * ] * }).addTo(map); */ -class Toolbar extends Control { - options: ToolbarOptionsType; +class Toolbar extends Control { /** * method to build DOM of the control * @param {Map} map map to build on @@ -196,9 +195,11 @@ export type ToolBarItem = { click: () => void; } -export type ToolbarOptionsType = { +export type ToolbarOptionsTypeSpec = { height?: number; vertical?: boolean; reverseMenu?: boolean; items: Array; -} & ControlOptionsType; +}; + +export type ToolbarOptionsType = ControlOptionsType & ToolbarOptionsTypeSpec; diff --git a/src/control/Control.Zoom.ts b/src/control/Control.Zoom.ts index a867b5aedd..86adf918e5 100644 --- a/src/control/Control.Zoom.ts +++ b/src/control/Control.Zoom.ts @@ -33,8 +33,7 @@ const options: ZoomOptionsType = { * zoomLevel : false * }).addTo(map); */ -class Zoom extends Control { - options: ZoomOptionsType; +class Zoom extends Control { //@internal _levelDOM: HTMLSpanElement; //@internal @@ -237,7 +236,9 @@ Map.addOnLoadHook(function () { export default Zoom; -export type ZoomOptionsType = { +export type ZoomOptionsTypeSpec = { zoomLevel?: boolean; seamless?: boolean; -} & ControlOptionsType; +}; + +export type ZoomOptionsType = ControlOptionsType & ZoomOptionsTypeSpec; diff --git a/src/control/Control.ts b/src/control/Control.ts index 84de5be1f2..580a33cb55 100644 --- a/src/control/Control.ts +++ b/src/control/Control.ts @@ -14,7 +14,7 @@ import Map from '../map/Map'; * @extends Class * @mixes Eventable */ -abstract class Control extends Eventable(Class) { +abstract class Control extends Eventable(Class) { //@internal @@ -23,7 +23,7 @@ abstract class Control extends Eventable(Class) { __ctrlContainer: HTMLElement; //@internal _controlDom: HTMLElement; - options: ControlOptionsType; + options: ControlOptionsType & T; static positions: { [key: string]: DomPositionType }; /** @@ -39,7 +39,7 @@ abstract class Control extends Eventable(Class) { *
* @param {Object} [options=null] configuration options */ - constructor(options: ControlOptionsType) { + constructor(options: ControlOptionsType & T) { if (options && options['position'] && !isString(options['position'])) { options['position'] = extend({}, options['position']); } diff --git a/src/layer/OverlayLayer.ts b/src/layer/OverlayLayer.ts index b126c047f7..ee64875ce0 100644 --- a/src/layer/OverlayLayer.ts +++ b/src/layer/OverlayLayer.ts @@ -61,7 +61,7 @@ class OverlayLayer extends Layer { //@internal _renderer: OverlayLayerCanvasRenderer; - constructor(id: string, geometries: OverlayLayerOptionsType | Array, options?: OverlayLayerOptionsType) { + constructor(id: string, geometries?: OverlayLayerOptionsType | Array, options?: OverlayLayerOptionsType) { if (geometries && (!isGeometry(geometries) && !Array.isArray(geometries) && GEOJSON_TYPES.indexOf((geometries as any).type) < 0)) { options = geometries; geometries = null; diff --git a/src/layer/VectorLayer.ts b/src/layer/VectorLayer.ts index 70b7636f60..97cb3630de 100644 --- a/src/layer/VectorLayer.ts +++ b/src/layer/VectorLayer.ts @@ -90,7 +90,7 @@ class VectorLayer extends OverlayLayer { * @param options.style=null - vectorlayer's style * @param options.*=null - options defined in [VectorLayer]{@link VectorLayer#options} */ - constructor(id: string, geometries: VectorLayerOptionsType | Array, options?: VectorLayerOptionsType) { + constructor(id: string, geometries?: VectorLayerOptionsType | Array, options?: VectorLayerOptionsType) { super(id, geometries, options); this.isVectorLayer = true; } diff --git a/src/map/Map.ts b/src/map/Map.ts index d3842b2a89..bdfee83749 100644 --- a/src/map/Map.ts +++ b/src/map/Map.ts @@ -30,6 +30,7 @@ import EPSG9807, { type EPSG9807ProjectionType } from '../geo/projection/Project import { AnimationOptionsType, EasingType } from '../core/Animation'; import { BBOX, bboxInBBOX, getDefaultBBOX, pointsBBOX } from '../core/util/bbox'; import { Attribution } from '../control'; +import { AttributionOptionsType } from '../control/Control.Attribution'; const TEMP_COORD = new Coordinate(0, 0); const TEMP_POINT = new Point(0, 0); @@ -2738,7 +2739,7 @@ export type MapOptionsType = { scrollWheelZoom?: boolean; geometryEvents?: boolean; control?: boolean; - attribution?: boolean; + attribution?: boolean | AttributionOptionsType; zoomControl?: boolean; scaleControl?: boolean; overviewControl?: boolean; diff --git a/src/map/spatial-reference/SpatialReference.ts b/src/map/spatial-reference/SpatialReference.ts index e4809c3eee..abd3b32576 100644 --- a/src/map/spatial-reference/SpatialReference.ts +++ b/src/map/spatial-reference/SpatialReference.ts @@ -186,12 +186,12 @@ export default class SpatialReference { return Object.keys(createOrGetDefaultSpatialReferences()); } - static loadArcgis(url: string, cb: (_, spatialRef?) => void, options: any) { + static loadArcgis(url: string, cb: (_, spatialRef?) => void, options?: any) { loadArcgis(url, cb, options) return this } - static loadWMTS(url: string, cb: (_, spatialRef?) => void, options: any) { + static loadWMTS(url: string, cb: (_, spatialRef?) => void, options?: any) { loadWMTS(url, cb, options) return this }