More fancyness, less bugs

This commit is contained in:
Pieter Vander Vennet 2020-11-17 16:29:51 +01:00
parent 16612b10ef
commit 2177db376c
27 changed files with 821 additions and 607 deletions

View file

@ -11,7 +11,7 @@ import Svg from "../../Svg";
import {SubstitutedTranslation} from "../../UI/SpecialVisualizations";
import {Utils} from "../../Utils";
import Combine from "../../UI/Base/Combine";
import {Browser} from "leaflet";
import {VariableUiElement} from "../../UI/Base/VariableUIElement";
export default class LayerConfig {
@ -56,7 +56,8 @@ export default class LayerConfig {
tagRenderings: TagRenderingConfig [];
constructor(json: LayerConfigJson, context?: string) {
constructor(json: LayerConfigJson, roamingRenderings: TagRenderingConfig[],
context?: string) {
context = context + "." + json.id;
this.id = json.id;
@ -140,7 +141,7 @@ export default class LayerConfig {
}
public GenerateLeafletStyle(tags: any):
public GenerateLeafletStyle(tags: any, clickable: boolean):
{
color: string;
icon: {
@ -149,7 +150,8 @@ export default class LayerConfig {
iconAnchor: [number, number];
iconSize: [number, number];
html: string;
rotation: number;
rotation: string;
className?: string;
};
weight: number; dashArray: number[]
} {
@ -186,7 +188,7 @@ export default class LayerConfig {
}
const weight = rendernum(this.width, 5);
const rotation = rendernum(this.rotation, 0);
const rotation = render(this.rotation, "0deg");
const iconW = num(iconSize[0]);
@ -209,12 +211,14 @@ export default class LayerConfig {
anchorH = iconH;
}
let html = `<img src="${iconUrl}" style="width:100%;height:100%;rotate:${rotation}deg;display:block;" />`;
let html = `<img src="${iconUrl}" style="width:100%;height:100%;rotate:${rotation};display:block;" />`;
if (iconUrl.startsWith(Utils.assets_path)) {
const key = iconUrl.substr(Utils.assets_path.length);
html = new Combine([
(Svg.All[key] as string).replace(/stop-color:#000000/g, 'stop-color:' + color)
]).SetStyle(`width:100%;height:100%;rotate:${rotation}deg;display:block;`).Render();
]).SetStyle(`width:100%;height:100%;rotate:${rotation};display:block;`).Render();
}
return {
icon:
@ -224,7 +228,8 @@ export default class LayerConfig {
iconAnchor: [anchorW, anchorH],
popupAnchor: [0, 3 - anchorH],
rotation: rotation,
iconUrl: iconUrl
iconUrl: iconUrl,
className: clickable ? "leaflet-div-icon" : "leaflet-div-icon unclickable"
},
color: color,
weight: weight,

View file

@ -66,7 +66,8 @@ export interface LayerConfigJson {
*/
iconSize?: string | TagRenderingConfigJson;
/**
* The rotation of an icon, useful for e.g. directions
* The rotation of an icon, useful for e.g. directions.
* Usage: as if it were a css property for 'rotate', thus has to end with 'deg', e.g. `90deg`, `{direction}deg`, `calc(90deg - {camera:direction}deg)``
*/
rotation?: string | TagRenderingConfigJson;

View file

@ -80,7 +80,7 @@ export default class LayoutConfig {
} else {
throw "Unkown fixed layer " + layer;
}
return new LayerConfig(layer, `${this.id}.layers[${i}]`);
return new LayerConfig(layer, this.roamingRenderings,`${this.id}.layers[${i}]`);
});
this.hideFromOverview = json.hideFromOverview ?? false;

View file

@ -14,6 +14,7 @@ import * as bike_cleaning from "../assets/layers/bike_cleaning/bike_cleaning.jso
import * as maps from "../assets/layers/maps/maps.json"
import * as information_boards from "../assets/layers/information_board/information_board.json"
import * as direction from "../assets/layers/direction/direction.json"
import * as surveillance_camera from "../assets/layers/surveillance_cameras/surveillance_cameras.json"
import LayerConfig from "./JSON/LayerConfig";
export default class SharedLayers {
@ -25,21 +26,22 @@ export default class SharedLayers {
private static getSharedLayers(){
const sharedLayersList = [
new LayerConfig(drinkingWater, "shared_layers"),
new LayerConfig(ghostbikes, "shared_layers"),
new LayerConfig(viewpoint, "shared_layers"),
new LayerConfig(bike_parking, "shared_layers"),
new LayerConfig(bike_repair_station, "shared_layers"),
new LayerConfig(bike_monitoring_station, "shared_layers"),
new LayerConfig(birdhides, "shared_layers"),
new LayerConfig(nature_reserve, "shared_layers"),
new LayerConfig(bike_cafes, "shared_layers"),
new LayerConfig(cycling_themed_objects, "shared_layers"),
new LayerConfig(bike_shops, "shared_layers"),
new LayerConfig(bike_cleaning, "shared_layers"),
new LayerConfig(maps, "shared_layers"),
new LayerConfig(direction, "shared_layers"),
new LayerConfig(information_boards, "shared_layers")
new LayerConfig(drinkingWater,[], "shared_layers"),
new LayerConfig(ghostbikes,[], "shared_layers"),
new LayerConfig(viewpoint,[], "shared_layers"),
new LayerConfig(bike_parking,[], "shared_layers"),
new LayerConfig(bike_repair_station,[], "shared_layers"),
new LayerConfig(bike_monitoring_station,[], "shared_layers"),
new LayerConfig(birdhides,[], "shared_layers"),
new LayerConfig(nature_reserve,[], "shared_layers"),
new LayerConfig(bike_cafes,[], "shared_layers"),
new LayerConfig(cycling_themed_objects,[], "shared_layers"),
new LayerConfig(bike_shops,[], "shared_layers"),
new LayerConfig(bike_cleaning,[], "shared_layers"),
new LayerConfig(maps,[], "shared_layers"),
new LayerConfig(direction,[], "shared_layers"),
new LayerConfig(information_boards,[], "shared_layers"),
new LayerConfig(surveillance_camera,[], "shared_layers")
];
const sharedLayers = new Map<string, LayerConfig>();