Merge branch 'develop'
This commit is contained in:
commit
5168b4bb97
5 changed files with 28 additions and 38 deletions
|
@ -19,6 +19,7 @@ import SourceConfig from "./SourceConfig";
|
||||||
import {TagsFilter} from "../../Logic/Tags/TagsFilter";
|
import {TagsFilter} from "../../Logic/Tags/TagsFilter";
|
||||||
import {Tag} from "../../Logic/Tags/Tag";
|
import {Tag} from "../../Logic/Tags/Tag";
|
||||||
import SubstitutingTag from "../../Logic/Tags/SubstitutingTag";
|
import SubstitutingTag from "../../Logic/Tags/SubstitutingTag";
|
||||||
|
|
||||||
export default class LayerConfig {
|
export default class LayerConfig {
|
||||||
|
|
||||||
|
|
||||||
|
@ -41,6 +42,7 @@ export default class LayerConfig {
|
||||||
icon: TagRenderingConfig;
|
icon: TagRenderingConfig;
|
||||||
iconOverlays: { if: TagsFilter, then: TagRenderingConfig, badge: boolean }[]
|
iconOverlays: { if: TagsFilter, then: TagRenderingConfig, badge: boolean }[]
|
||||||
iconSize: TagRenderingConfig;
|
iconSize: TagRenderingConfig;
|
||||||
|
label: TagRenderingConfig;
|
||||||
rotation: TagRenderingConfig;
|
rotation: TagRenderingConfig;
|
||||||
color: TagRenderingConfig;
|
color: TagRenderingConfig;
|
||||||
width: TagRenderingConfig;
|
width: TagRenderingConfig;
|
||||||
|
@ -213,6 +215,7 @@ export default class LayerConfig {
|
||||||
}
|
}
|
||||||
this.isShown = tr("isShown", "yes");
|
this.isShown = tr("isShown", "yes");
|
||||||
this.iconSize = tr("iconSize", "40,40,center");
|
this.iconSize = tr("iconSize", "40,40,center");
|
||||||
|
this.label = tr("label", "")
|
||||||
this.color = tr("color", "#0000ff");
|
this.color = tr("color", "#0000ff");
|
||||||
this.width = tr("width", "7");
|
this.width = tr("width", "7");
|
||||||
this.rotation = tr("rotation", "0");
|
this.rotation = tr("rotation", "0");
|
||||||
|
@ -224,30 +227,6 @@ export default class LayerConfig {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Splits the parts of the icon, at ";" but makes sure that everything between "<html>" and "</html>" stays together
|
|
||||||
* @param template
|
|
||||||
* @constructor
|
|
||||||
* @private
|
|
||||||
*/
|
|
||||||
private static SplitParts(template: string): string[] {
|
|
||||||
const htmlParts = template.split("<html>");
|
|
||||||
const parts = []
|
|
||||||
for (const htmlPart of htmlParts) {
|
|
||||||
if (htmlPart.indexOf("</html>") >= 0) {
|
|
||||||
const subparts = htmlPart.split("</html>");
|
|
||||||
if (subparts.length != 2) {
|
|
||||||
throw "Invalid rendering with embedded html: " + htmlPart;
|
|
||||||
}
|
|
||||||
parts.push("html:" + subparts[0]);
|
|
||||||
parts.push(...subparts[1].split(";"))
|
|
||||||
} else {
|
|
||||||
parts.push(...htmlPart.split(";"))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return parts.filter(prt => prt != "");
|
|
||||||
}
|
|
||||||
|
|
||||||
public CustomCodeSnippets(): string[] {
|
public CustomCodeSnippets(): string[] {
|
||||||
if (this.calculatedTags === undefined) {
|
if (this.calculatedTags === undefined) {
|
||||||
return []
|
return []
|
||||||
|
@ -346,7 +325,7 @@ export default class LayerConfig {
|
||||||
const weight = rendernum(this.width, 5);
|
const weight = rendernum(this.width, 5);
|
||||||
|
|
||||||
const iconW = num(iconSize[0]);
|
const iconW = num(iconSize[0]);
|
||||||
const iconH = num(iconSize[1]);
|
let iconH = num(iconSize[1]);
|
||||||
const mode = iconSize[2] ?? "center"
|
const mode = iconSize[2] ?? "center"
|
||||||
|
|
||||||
let anchorW = iconW / 2;
|
let anchorW = iconW / 2;
|
||||||
|
@ -396,13 +375,11 @@ export default class LayerConfig {
|
||||||
const rotation = render(self.rotation, "0deg");
|
const rotation = render(self.rotation, "0deg");
|
||||||
|
|
||||||
let htmlParts: UIElement[] = [];
|
let htmlParts: UIElement[] = [];
|
||||||
let sourceParts = LayerConfig.SplitParts(iconUrl);
|
let sourceParts = Utils.NoNull(iconUrl.split(";").filter(prt => prt != ""));
|
||||||
|
|
||||||
for (const sourcePart of sourceParts) {
|
for (const sourcePart of sourceParts) {
|
||||||
htmlParts.push(genHtmlFromString(sourcePart))
|
htmlParts.push(genHtmlFromString(sourcePart))
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
let badges = [];
|
let badges = [];
|
||||||
for (const iconOverlay of self.iconOverlays) {
|
for (const iconOverlay of self.iconOverlays) {
|
||||||
if (!iconOverlay.if.matchesProperties(tgs)) {
|
if (!iconOverlay.if.matchesProperties(tgs)) {
|
||||||
|
@ -410,7 +387,7 @@ export default class LayerConfig {
|
||||||
}
|
}
|
||||||
if (iconOverlay.badge) {
|
if (iconOverlay.badge) {
|
||||||
const badgeParts: UIElement[] = [];
|
const badgeParts: UIElement[] = [];
|
||||||
const partDefs = LayerConfig.SplitParts(iconOverlay.then.GetRenderValue(tgs).txt);
|
const partDefs = iconOverlay.then.GetRenderValue(tgs).txt.split(";").filter(prt => prt != "");
|
||||||
|
|
||||||
for (const badgePartStr of partDefs) {
|
for (const badgePartStr of partDefs) {
|
||||||
badgeParts.push(genHtmlFromString(badgePartStr))
|
badgeParts.push(genHtmlFromString(badgePartStr))
|
||||||
|
@ -432,6 +409,16 @@ export default class LayerConfig {
|
||||||
.SetStyle("display:flex;height:50%;width:100%;position:absolute;top:50%;left:50%;");
|
.SetStyle("display:flex;height:50%;width:100%;position:absolute;top:50%;left:50%;");
|
||||||
htmlParts.push(badgesComponent)
|
htmlParts.push(badgesComponent)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if(sourceParts.length ==0){iconH = 0}
|
||||||
|
|
||||||
|
const label = self.label.GetRenderValue(tgs)?.Subs(tgs)
|
||||||
|
.SetClass("block w-min text-center")
|
||||||
|
.SetStyle("margin-top: "+(iconH + 2) +"px")
|
||||||
|
console.log("Generating label gave ", label, " source: ", self.label, "tags: ", tgs)
|
||||||
|
if (label !== undefined) {
|
||||||
|
htmlParts.push(new Combine([label]).SetClass("flex flex-col items-center"))
|
||||||
|
}
|
||||||
return new Combine(htmlParts).Render();
|
return new Combine(htmlParts).Render();
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
|
@ -106,8 +106,6 @@ export interface LayerConfigJson {
|
||||||
* To make things even more practical, one can use all svgs from the folder "assets/svg" and _substitute the color_ in it.
|
* To make things even more practical, one can use all svgs from the folder "assets/svg" and _substitute the color_ in it.
|
||||||
* E.g. to draw a red pin, use "pin:#f00", to have a green circle with your icon on top, use `circle:#0f0;<path to my icon.svg>`
|
* E.g. to draw a red pin, use "pin:#f00", to have a green circle with your icon on top, use `circle:#0f0;<path to my icon.svg>`
|
||||||
*
|
*
|
||||||
* Also note that one can specify to use HTML by entering some html between "<html>" and "</html" into here, for example
|
|
||||||
* "icon": "some_icon.svg;<html><div style="margin-top: 50px; background: white; display: block">{name}</div>"
|
|
||||||
*/
|
*/
|
||||||
icon?: string | TagRenderingConfigJson;
|
icon?: string | TagRenderingConfigJson;
|
||||||
|
|
||||||
|
@ -131,6 +129,11 @@ export interface LayerConfigJson {
|
||||||
* 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)``
|
* 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;
|
rotation?: string | TagRenderingConfigJson;
|
||||||
|
/**
|
||||||
|
* A HTML-fragment that is shown at the center of the icon, for example:
|
||||||
|
* <div style="background: white; display: block">{name}</div>
|
||||||
|
*/
|
||||||
|
label?: string | TagRenderingConfigJson ;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The color for way-elements and SVG-elements.
|
* The color for way-elements and SVG-elements.
|
||||||
|
|
|
@ -2,7 +2,7 @@ import { Utils } from "../Utils";
|
||||||
|
|
||||||
export default class Constants {
|
export default class Constants {
|
||||||
|
|
||||||
public static vNumber = "0.6.7";
|
public static vNumber = "0.6.8";
|
||||||
|
|
||||||
// The user journey states thresholds when a new feature gets unlocked
|
// The user journey states thresholds when a new feature gets unlocked
|
||||||
public static userJourney = {
|
public static userJourney = {
|
||||||
|
|
|
@ -37,11 +37,13 @@
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"icon": {
|
"icon": {
|
||||||
"render": "./assets/themes/bookcases/bookcase.svg;",
|
"render": "./assets/themes/bookcases/bookcase.svg;"
|
||||||
|
},
|
||||||
|
"label": {
|
||||||
"mappings": [
|
"mappings": [
|
||||||
{
|
{
|
||||||
"if": "name~*",
|
"if": "name~*",
|
||||||
"then": "./assets/themes/bookcases/bookcase.svg;<html><div style='margin-top: 42px; background: white; padding: 0.25em; border-radius:0.5em'>{name}</div></html>"
|
"then": "<div style='background: white; padding: 0.25em; border-radius:0.5em'>{name}</div>"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|
|
@ -117,8 +117,6 @@ for (const themeFile of themeFiles) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log("LE", layerErrorCount)
|
|
||||||
|
|
||||||
if (layerErrorCount.length + themeErrorCount.length == 0) {
|
if (layerErrorCount.length + themeErrorCount.length == 0) {
|
||||||
console.log("All good!")
|
console.log("All good!")
|
||||||
} else {
|
} else {
|
||||||
|
|
Loading…
Reference in a new issue