Bastian-Greshake-Tzovaras/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Studio: more work on studio

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-10-07 03:07:32 +02:00
parent 81876fc5ed
commit 4e8dfc0026
20 changed files with 1842 additions and 94 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/Models/ThemeConfig/Conversion/PrepareLayer.ts
View file

@ -645,6 +645,7 @@ export class AddEditingElements extends DesugaringStep<LayerConfigJson> {
}
if (json.allowSplit && !ValidationUtils.hasSpecialVisualisation(json, "split_button")) {
json.tagRenderings ??= []
json.tagRenderings.push({
id: "split-button",
render: { "*": "{split_button()}" },
@ -653,6 +654,7 @@ export class AddEditingElements extends DesugaringStep<LayerConfigJson> {
}
if (json.allowMove && !ValidationUtils.hasSpecialVisualisation(json, "move_button")) {
json.tagRenderings ??= []
json.tagRenderings.push({
id: "move-button",
render: { "*": "{move_button()}" },

2
src/Models/ThemeConfig/Conversion/Validation.ts
View file

@ -1033,7 +1033,7 @@ export class ValidateLayer extends DesugaringStep<LayerConfigJson> {
}
{
const hasCondition = json.mapRendering?.filter(
const hasCondition = json.pointRendering?.filter(
(mr) => mr["icon"] !== undefined && mr["icon"]["condition"] !== undefined
)
if (hasCondition?.length > 0) {

7
src/Models/ThemeConfig/Json/LayerConfigJson.ts
View file

@ -43,7 +43,6 @@ export interface LayerConfigJson {
description?: Translatable
/**
*
* Question: Where should the data be fetched from?
* title: Data Source
*
@ -202,13 +201,13 @@ export interface LayerConfigJson {
minzoomVisible?: number
/**
* question: What title should be shown on the infobox?
* The title shown in a popup for elements of this layer.
*
* group: title
* question: What title should be shown on the infobox?
* types: use a fixed translation ; Use a dynamic tagRendering ; use a fixed string for all languages
* types: use a fixed translation ; Use a dynamic tagRendering ; hidden
* typesdefault: 1
*
* type: translation
*/
title?: TagRenderingConfigJson | Translatable

53
src/Models/ThemeConfig/Json/PointRenderingConfigJson.ts
View file

@ -2,7 +2,17 @@ import { TagRenderingConfigJson } from "./TagRenderingConfigJson"
import { TagConfigJson } from "./TagConfigJson"
export interface IconConfigJson {
/**
* question: What icon should be used?
* type: icon
* suggestions: return ["pin","square","circle","checkmark","clock","close","crosshair","help","home","invalid","location","location_empty","location_locked","note","resolved","ring","scissors","teardrop","teardrop_with_hole_green","triangle"].map(i => ({if: "value="+i, then: i, icon: i}))
*/
icon: string | TagRenderingConfigJson | { builtin: string; override: any }
/**
* question: What colour should the icon be?
* This will only work for the default icons such as `pin`,`circle`,...
* type: color
*/
color?: string | TagRenderingConfigJson | { builtin: string; override: any }
}
@ -23,18 +33,16 @@ export default interface PointRenderingConfigJson {
location: ("point" | "centroid" | "start" | "end" | "projected_centerpoint" | string)[]
/**
* question: What marker should be used to
* The icon for an element.
* Note that this also doubles as the icon for this layer (rendered with the overpass-tags) ánd the icon in the presets.
*
* The result of the icon is rendered as follows:
* the resulting string is interpreted as a _list_ of items, separated by ";". The bottommost layer is the first layer.
* As a result, on could use a generic pin, then overlay it with a specific icon.
* To make things even more practical, one c an use all SVG's 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>`
* Type: icon
*/
* The marker for an element.
* Note that this also defines the icon for this layer (rendered with the overpass-tags) <i>and</i> the icon in the presets.
*
* The result of the icon is rendered as follows:
* - The first icon is rendered on the map
* - The second entry is overlayed on top of it
* - ...
*
* As a result, on could use a generic icon (`pin`, `circle`, `square`) with a color, then overlay it with a specific icon.
*/
marker?: IconConfigJson[]
/**
@ -53,8 +61,9 @@ export default interface PointRenderingConfigJson {
}[]
/**
* A string containing "width,height" or "width,height,anchorpoint" where anchorpoint is any of 'center', 'top', 'bottom', 'left', 'right', 'bottomleft','topright', ...
* Default is '40,40,center'
* question: What size should the marker be on the map?
* A string containing "<width>,<height>" in pixels
* ifunset: Use the default size (<b>40,40</b> px)
*/
iconSize?: string | TagRenderingConfigJson
@ -69,13 +78,15 @@ export default interface PointRenderingConfigJson {
anchor?: "center" | "top" | "bottom" | "left" | "right" | string | TagRenderingConfigJson
/**
* 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)``
* question: What rotation should be applied on the icon?
* This is mostly useful for items that face a specific direction, such as surveillance cameras
* This is interpreted as css property for 'rotate', thus has to end with 'deg', e.g. `90deg`, `{direction}deg`, `calc(90deg - {camera:direction}deg)``
* ifunset: Do not rotate
*/
rotation?: string | TagRenderingConfigJson
/**
* question: What label should be shown beneath the marker?
* For example: <div style="background: white">{name}</div>
* For example: `&LT;div style="background: white">{name}&LT;/div>`
*
* If the icon is undefined, then the label is shown in the center of the feature.
* types: Dynamic value | string
@ -124,15 +135,15 @@ export default interface PointRenderingConfigJson {
labelCssClasses?: string | TagRenderingConfigJson
/**
* If the map is pitched, the marker will stay parallel to the screen.
* Set to 'map' if you want to put it flattened on the map
* question: If the map is pitched, should the icon stay parallel to the screen or to the groundplane?
* suggestions: return [{if: "value=canvas", then: "The icon will stay upward and not be transformed as if it sticks to the screen"}, {if: "value=map", then: "The icon will be transformed as if it were painted onto the ground. (Automatically sets rotationAlignment)"}]
*/
pitchAlignment?: "canvas" | "map" | TagRenderingConfigJson
/**
* question: Should the icon be rotated or tilted if the map is rotated or tilted?
* question: Should the icon be rotated if the map is rotated?
* ifunset: Do not rotate or tilt icons. Always keep the icons straight
* suggestions: return [{if: "value=canvas", then: "If the map is tilted, tilt the icon as well. This gives the impression of an icon that is glued to the ground."}, {if: "value=map", then: "If the map is rotated, rotate the icon as well. This gives the impression of an icon that floats perpendicular above the ground."}]
* suggestions: return [{if: "value=canvas", then: "Never rotate the icon"}, {if: "value=map", then: "If the map is rotated, rotate the icon as well. This gives the impression of an icon that floats perpendicular above the ground."}]
*/
rotationAlignment?: "map" | "canvas" | TagRenderingConfigJson
}

6
src/Models/ThemeConfig/PointRenderingConfig.ts
View file

@ -5,7 +5,7 @@ import { TagUtils } from "../../Logic/Tags/TagUtils"
import { Utils } from "../../Utils"
import Svg from "../../Svg"
import WithContextLoader from "./WithContextLoader"
import { Store } from "../../Logic/UIEventSource"
import { ImmutableStore, Store } from "../../Logic/UIEventSource"
import BaseUIElement from "../../UI/BaseUIElement"
import { FixedUiElement } from "../../UI/Base/FixedUiElement"
import Img from "../../UI/Base/Img"
@ -93,7 +93,7 @@ export default class PointRenderingConfig extends WithContextLoader {
".location)"
)
}
this.marker = (json.marker ?? []).map((m) => new IconConfig(m))
this.marker = (json.marker ?? []).map((m) => new IconConfig(<any>m))
if (json.css !== undefined) {
this.cssDef = this.tr("css", undefined)
}
@ -192,7 +192,7 @@ export default class PointRenderingConfig extends WithContextLoader {
}
public GetBaseIcon(tags?: Record<string, string>): BaseUIElement {
return new SvelteUIElement(Marker, { icons: this.marker, tags })
return new SvelteUIElement(Marker, { config: this, tags: new ImmutableStore(tags) })
}
public RenderIcon(
tags: Store<Record<string, string>>,