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

Refactoring: split rendering of centroid to PointRendering

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-10-19 02:31:32 +02:00
parent ad8674dd70
commit 584ade8e61
8 changed files with 509 additions and 440 deletions
Download patch file Download diff file Expand all files Collapse all files

42
Models/ThemeConfig/Json/LayerConfigJson.ts
View file

@ -4,6 +4,7 @@ import FilterConfigJson from "./FilterConfigJson";
import {DeleteConfigJson} from "./DeleteConfigJson";
import UnitConfigJson from "./UnitConfigJson";
import MoveConfigJson from "./MoveConfigJson";
import PointRenderingConfigJson from "./PointRenderingConfigJson";
/**
* Configuration for a single layer
@ -119,47 +120,8 @@ export interface LayerConfigJson {
*/
titleIcons?: (string | TagRenderingConfigJson)[];
/**
* 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 can 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>`
*
*/
icon?: string | TagRenderingConfigJson;
/**
* IconsOverlays are a list of extra icons/badges to overlay over the icon.
* The 'badge'-toggle changes their behaviour.
* If badge is set, it will be added as a 25% height icon at the bottom right of the icon, with all the badges in a flex layout.
* If badges is false, it'll be a simple overlay
*
* Note: strings are interpreted as icons, so layering and substituting is supported
*/
iconOverlays?: { if: string | AndOrTagConfigJson, then: string | TagRenderingConfigJson, badge?: boolean }[]
/**
* 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'
*/
iconSize?: 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)``
*/
rotation?: string | TagRenderingConfigJson;
/**
* A HTML-fragment that is shown below the icon, for example:
* <div style="background: white; display: block">{name}</div>
*
* If the icon is undefined, then the label is shown in the center of the feature.
* Note that, if the wayhandling hides the icon then no label is shown as well.
*/
label?: string | TagRenderingConfigJson;
mapRendering: PointRenderingConfigJson[]
/**
* The color for way-elements and SVG-elements.

62
Models/ThemeConfig/Json/PointRenderingConfigJson.ts Normal file
View file

@ -0,0 +1,62 @@
import {TagRenderingConfigJson} from "./TagRenderingConfigJson";
import {AndOrTagConfigJson} from "./TagConfigJson";
/**
* The PointRenderingConfig gives all details onto how to render a single point of a feature.
*
* This can be used if:
*
* - The feature is a point
* - To render something at the centroid of an area, or at the start, end or projected centroid of a way
*/
export default interface PointRenderingConfigJson {
/**
* All the locations that this point should be rendered at.
* Using `location: ["point", "centroid"] will always render centerpoint
*/
location: ("point" | "centroid")[]
/**
* 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 can 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>`
*
*/
icon?: string | TagRenderingConfigJson;
/**
* IconsOverlays are a list of extra icons/badges to overlay over the icon.
* The 'badge'-toggle changes their behaviour.
* If badge is set, it will be added as a 25% height icon at the bottom right of the icon, with all the badges in a flex layout.
* If badges is false, it'll be a simple overlay
*
* Note: strings are interpreted as icons, so layering and substituting is supported
*/
iconOverlays?: { if: string | AndOrTagConfigJson, then: string | TagRenderingConfigJson, badge?: boolean }[]
/**
* 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'
*/
iconSize?: 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)``
*/
rotation?: string | TagRenderingConfigJson;
/**
* A HTML-fragment that is shown below the icon, for example:
* <div style="background: white; display: block">{name}</div>
*
* If the icon is undefined, then the label is shown in the center of the feature.
* Note that, if the wayhandling hides the icon then no label is shown as well.
*/
label?: string | TagRenderingConfigJson;
}