Igor Kulikov
2 years ago
8 changed files with 495 additions and 37 deletions
@ -0,0 +1,235 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2024 The Thingsboard Authors
|
||||
|
///
|
||||
|
/// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
|
/// you may not use this file except in compliance with the License.
|
||||
|
/// You may obtain a copy of the License at
|
||||
|
///
|
||||
|
/// http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
///
|
||||
|
/// Unless required by applicable law or agreed to in writing, software
|
||||
|
/// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
|
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
|
/// See the License for the specific language governing permissions and
|
||||
|
/// limitations under the License.
|
||||
|
///
|
||||
|
|
||||
|
import L, { TB } from 'leaflet'; |
||||
|
|
||||
|
class SidebarControl extends L.Control<TB.SidebarControlOptions> { |
||||
|
|
||||
|
private readonly sidebar: JQuery<HTMLElement>; |
||||
|
|
||||
|
private current = $(); |
||||
|
private currentButton = $(); |
||||
|
|
||||
|
private map: L.Map; |
||||
|
|
||||
|
constructor(options: TB.SidebarControlOptions) { |
||||
|
super(options); |
||||
|
this.sidebar = $('<div class="tb-map-sidebar"></div>'); |
||||
|
this.options.container.append(this.sidebar); |
||||
|
const position = options?.position || 'topleft'; |
||||
|
if (['topleft', 'bottomleft'].includes(position)) { |
||||
|
this.options.container.addClass('tb-sidebar-left'); |
||||
|
} else { |
||||
|
this.options.container.addClass('tb-sidebar-right'); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
addPane(pane: JQuery<HTMLElement>): this { |
||||
|
pane.hide().appendTo(this.sidebar); |
||||
|
return this; |
||||
|
} |
||||
|
|
||||
|
togglePane(pane: JQuery<HTMLElement>, button: JQuery<HTMLElement>) { |
||||
|
const paneWidth = this.options?.paneWidth || 220; |
||||
|
const position = this.options?.position || 'topleft'; |
||||
|
|
||||
|
this.current.hide().trigger('hide'); |
||||
|
this.currentButton.removeClass('active'); |
||||
|
|
||||
|
if (this.current === pane) { |
||||
|
if (['topleft', 'bottomleft'].includes(position)) { |
||||
|
this.map.panBy([-paneWidth, 0], { animate: false }); |
||||
|
} |
||||
|
this.sidebar.hide(); |
||||
|
this.current = this.currentButton = $(); |
||||
|
} else { |
||||
|
this.sidebar.show(); |
||||
|
this.current = pane; |
||||
|
this.currentButton = button || $(); |
||||
|
if (['topleft', 'bottomleft'].includes(position)) { |
||||
|
this.map.panBy([paneWidth, 0], { animate: false }); |
||||
|
} |
||||
|
} |
||||
|
this.map.invalidateSize({ pan: false, animate: false }); |
||||
|
this.current.show().trigger('show'); |
||||
|
this.currentButton.addClass('active'); |
||||
|
} |
||||
|
|
||||
|
addTo(map: L.Map): this { |
||||
|
this.map = map; |
||||
|
return this; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
class SidebarPaneControl<O extends TB.SidebarPaneControlOptions> extends L.Control<O> { |
||||
|
|
||||
|
private button: JQuery<HTMLElement>; |
||||
|
private $ui: JQuery<HTMLElement>; |
||||
|
|
||||
|
constructor(options: O) { |
||||
|
super(options); |
||||
|
} |
||||
|
|
||||
|
onAdd(map: L.Map): HTMLElement { |
||||
|
const $container = $("<div>") |
||||
|
.attr('class', 'leaflet-bar'); |
||||
|
|
||||
|
this.button = $("<a>") |
||||
|
.attr('class', 'tb-control-button') |
||||
|
.attr('href', '#') |
||||
|
.html('<div class="' + this.options.uiClass + '"></div>') |
||||
|
.on('click', (e) => { |
||||
|
this.toggle(e); |
||||
|
}); |
||||
|
if (this.options.buttonTitle) { |
||||
|
this.button.attr('title', this.options.buttonTitle); |
||||
|
} |
||||
|
this.button.appendTo($container); |
||||
|
|
||||
|
this.$ui = $('<div>') |
||||
|
.attr('class', this.options.uiClass); |
||||
|
|
||||
|
$('<div class="tb-layers-title-container">') |
||||
|
.appendTo(this.$ui) |
||||
|
.append($('<div class="tb-layers-title">') |
||||
|
.text(this.options.paneTitle)) |
||||
|
.append($('<div>') |
||||
|
.append($('<button type="button" class="tb-button-close mdc-icon-button mat-mdc-icon-button">' + |
||||
|
'<span class="mat-mdc-button-persistent-ripple mdc-icon-button__ripple"></span>' + |
||||
|
'<span class="material-icons">close</span>' + |
||||
|
'</button>') |
||||
|
.attr('aria-label', 'Close') |
||||
|
.bind('click', (e) => { |
||||
|
this.toggle(e); |
||||
|
}))); |
||||
|
|
||||
|
this.options.sidebar.addPane(this.$ui); |
||||
|
|
||||
|
this.onAddPane(map, this.button, this.$ui, (e) => { |
||||
|
this.toggle(e); |
||||
|
}); |
||||
|
|
||||
|
return $container[0]; |
||||
|
} |
||||
|
|
||||
|
public onAddPane(map: L.Map, button: JQuery<HTMLElement>, $ui: JQuery<HTMLElement>, toggle: (e: JQuery.MouseEventBase) => void) {} |
||||
|
|
||||
|
private toggle(e: JQuery.MouseEventBase) { |
||||
|
e.stopPropagation(); |
||||
|
e.preventDefault(); |
||||
|
if (!this.button.hasClass("disabled")) { |
||||
|
this.options.sidebar.togglePane(this.$ui, this.button); |
||||
|
} |
||||
|
//$(".leaflet-control .control-button").tooltip("hide");
|
||||
|
} |
||||
|
} |
||||
|
|
||||
|
class LayersControl extends SidebarPaneControl<TB.LayersControlOptions> { |
||||
|
constructor(options: TB.LayersControlOptions) { |
||||
|
super(options); |
||||
|
} |
||||
|
|
||||
|
public onAddPane(map: L.Map, button: JQuery<HTMLElement>, $ui: JQuery<HTMLElement>, toggle: (e: JQuery.MouseEventBase) => void) { |
||||
|
const layers = this.options.layers; |
||||
|
const baseSection = $("<div>") |
||||
|
.attr('class', 'tb-layers-container') |
||||
|
.appendTo($ui); |
||||
|
|
||||
|
layers.forEach((layerData, i) => { |
||||
|
const id = 'map-ui-layer-' + i; |
||||
|
const buttonContainer = $('<div class="tb-layer-card">') |
||||
|
.appendTo(baseSection); |
||||
|
const mapContainer = $('<div class="tb-layer-map">') |
||||
|
.appendTo(buttonContainer); |
||||
|
const input = $('<input type="radio" class="tb-layer-button" name="layer">') |
||||
|
.prop('id', id) |
||||
|
.prop('checked', map.hasLayer(layerData.layer)) |
||||
|
.appendTo(buttonContainer); |
||||
|
|
||||
|
const item = $('<label class="tb-layer-label">') |
||||
|
.prop('for', id) |
||||
|
.append($('<span>').append(layerData.title)) |
||||
|
.appendTo(buttonContainer); |
||||
|
|
||||
|
map.whenReady(() => { |
||||
|
|
||||
|
const miniMap = L.map(mapContainer[0], { attributionControl: false, zoomControl: false, keyboard: false }) |
||||
|
.addLayer(layerData.mini); |
||||
|
|
||||
|
miniMap.dragging.disable(); |
||||
|
miniMap.touchZoom.disable(); |
||||
|
miniMap.doubleClickZoom.disable(); |
||||
|
miniMap.scrollWheelZoom.disable(); |
||||
|
|
||||
|
const moved = () => { |
||||
|
miniMap.setView(map.getCenter(), Math.max(map.getZoom() - 2, 0)); |
||||
|
}; |
||||
|
|
||||
|
const shown = () => { |
||||
|
miniMap.invalidateSize(); |
||||
|
miniMap.setView(map.getCenter(), Math.max(map.getZoom() - 2, 0), { animate: false }); |
||||
|
map.on('moveend', moved); |
||||
|
}; |
||||
|
|
||||
|
$ui.on('show', shown); |
||||
|
$ui.on('hide', () => { |
||||
|
map.off('moveend', moved); |
||||
|
}) |
||||
|
}); |
||||
|
|
||||
|
|
||||
|
input.on('click', () => { |
||||
|
layers.forEach((other) => { |
||||
|
if (other.layer === layerData.layer) { |
||||
|
map.addLayer(other.layer); |
||||
|
} else { |
||||
|
map.removeLayer(other.layer); |
||||
|
} |
||||
|
}); |
||||
|
map.fire('baselayerchange', { layer: layerData.layer }); |
||||
|
}); |
||||
|
|
||||
|
item.on('dblclick', (e) => { |
||||
|
toggle(e); |
||||
|
}); |
||||
|
|
||||
|
map.on('layeradd layerremove', function () { |
||||
|
input.prop('checked', map.hasLayer(layerData.layer)); |
||||
|
}); |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const sidebar = (options: TB.SidebarControlOptions): SidebarControl => { |
||||
|
return new SidebarControl(options); |
||||
|
} |
||||
|
|
||||
|
const sidebarPane = <O extends TB.SidebarPaneControlOptions>(options: O): SidebarPaneControl<O> => { |
||||
|
return new SidebarPaneControl(options); |
||||
|
} |
||||
|
|
||||
|
const layers = (options: TB.LayersControlOptions): LayersControl => { |
||||
|
return new LayersControl(options); |
||||
|
} |
||||
|
|
||||
|
L.TB = L.TB || { |
||||
|
SidebarControl, |
||||
|
SidebarPaneControl, |
||||
|
LayersControl, |
||||
|
sidebar, |
||||
|
sidebarPane, |
||||
|
layers |
||||
|
} |
||||
Loading…
Reference in new issue