Refactoring: move anchor out of iconSize

This commit is contained in:
Pieter Vander Vennet 2023-06-20 02:02:45 +02:00
parent 3e49929f25
commit 140c813151
52 changed files with 168 additions and 87 deletions

View file

@ -3,6 +3,7 @@ import { Utils } from "../../../Utils"
import LineRenderingConfigJson from "../Json/LineRenderingConfigJson"
import { LayerConfigJson } from "../Json/LayerConfigJson"
import { DesugaringStep, Each, Fuse, On } from "./Conversion"
import PointRenderingConfigJson from "../Json/PointRenderingConfigJson"
export class UpdateLegacyLayer extends DesugaringStep<
LayerConfigJson | string | { builtin; override }
@ -139,6 +140,20 @@ export class UpdateLegacyLayer extends DesugaringStep<
}
}
for (const rendering of config.mapRendering ?? []) {
if (!rendering["iconSize"]) {
continue
}
const pr = <PointRenderingConfigJson>rendering
const iconSize = pr.iconSize
if (typeof iconSize === "string")
if (["bottom", "center", "top"].some((a) => (<string>iconSize).endsWith("," + a))) {
const parts = iconSize.split(",").map((parts) => parts.toLowerCase().trim())
pr.anchor = parts.pop()
pr.iconSize = parts.join(",")
}
}
return {
result: config,
errors: [],

View file

@ -54,6 +54,16 @@ export default interface PointRenderingConfigJson {
* Default is '40,40,center'
*/
iconSize?: string | TagRenderingConfigJson
/**
* question: What is the anchorpoint of the icon?
*
* This matches the geographical point with a location on the icon.
* For example, a feature attached to the ground can use 'bottom' as zooming in will give the appearance of being anchored to a fixed location.
*
*/
anchor?: "center" | "top" | "bottom" | "left" | "right" | string
/**
* 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)``

View file

@ -27,6 +27,8 @@ export default class PointRenderingConfig extends WithContextLoader {
public readonly icon?: TagRenderingConfig
public readonly iconBadges: { if: TagsFilter; then: TagRenderingConfig }[]
public readonly iconSize: TagRenderingConfig
public readonly anchor: TagRenderingConfig
public readonly label: TagRenderingConfig
public readonly labelCss: TagRenderingConfig
public readonly labelCssClasses: TagRenderingConfig
@ -90,7 +92,8 @@ export default class PointRenderingConfig extends WithContextLoader {
throw context + ": builtin SVG asset not found: " + iconPath
}
}
this.iconSize = this.tr("iconSize", "40,40,center")
this.iconSize = this.tr("iconSize", "40,40")
this.anchor = this.tr("anchor", "center")
this.label = this.tr("label", undefined)
this.rotation = this.tr("rotation", "0")
this.pitchAlignment = this.tr("pitchAlignment", "canvas")
@ -229,11 +232,13 @@ export default class PointRenderingConfig extends WithContextLoader {
return Utils.SubstituteKeys(str, tags.data).replace(/{.*}/g, "")
}
const iconSize = render(this.iconSize, "40,40,center").split(",")
const iconSize = render(this.iconSize, "40,40").split(",")
const iconW = num(iconSize[0])
let iconH = num(iconSize[1])
const mode = iconSize[2]?.trim()?.toLowerCase() ?? "center"
const anchor = render(this.anchor, "center")
const mode = anchor?.trim()?.toLowerCase() ?? "center"
// in MapLibre, the offset is relative to the _center_ of the object, with left = [-x, 0] and up = [0,-y]
let anchorW = 0