CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-05-15 05:30:35 +02:00
Code Issues Packages Projects Releases Wiki Activity

Started out some notes toward a public API

Browse Source 
Beginning with our CSS class API. Most of what I've
written is how it should be, not how it currently is.
This commit is contained in:
John Firebaugh
2012-12-21 16:49:51 -08:00
parent 883acd3e60
commit 38bf50c987
1 changed files with 65 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
API.md
+65
View File
@@ -0,0 +1,65 @@
This file documents effors toward establishing a public API for iD, one that
can support plugin development.
## CSS selectors
iD has a documented and stable set of classes that can be used to apply style or
attach behavior to the visual representation of map data via CSS selectors.
These classes relate to the vocabulary of the OSM data model, a related geometric
vocabulary established by iD, and to the tags present on OSM entities.
### OSM Data Model classes
An SVG element on the map to which an iD.Entity has been bound as a datum shall
have a class with that datum's type, i.e. either `.node` or `.way`. (If and when
we add visual representations for relations, `.relation` may also be valid.)
The visual representation of a single entity may be composed of several elements,
e.g. ways are composed of casing and stroke. Such elements will have a distinct class
identifying the particular aspect of representation, e.g. `.casing` and `.stroke`.
The particular type of SVG element (`path`, `circle`, `image` etc.) that is used to
implement that visual representation is explicitly NOT part of the public API. Avoid
naming specific tags in CSS selectors; as iD evolves, we may need to change what SVG
elements we use in order to implement a particular visual style.
### Geometric classes
In addition to the OSM element vocabulary of nodes, ways, and relations, iD has
established a related geometric vocabulary consisting of points, lines, and areas.
A **point** is a node that is either not a member of any way, or has specific tags
that identify it as "interesting" in some way. For example, a node belonging to a
way may also be considered a point if it has a `traffic_signal` tag. Elements
representing points have a `.point` class. Since a point is always a node, they
also have a `.node` class. Nodes that are not points can be selected using
`.node:not(.point)` (TODO: come up with something better than that.)
A **line** is a way that is not an area. Elements representing lines have a `.line`
class. Since a line is also a way, they also have a `.way` class.
An **area** is a way that is circular, has certain tags, or lacks certain other
tags (see `iD.Way.isArea` for the exact definition). Elements representing areas
have an `.area` class. Since an area is also a way, they also have a `.way` class.
### Tag classes
Elements also receive classes according to certain of the key-value tags that are
assigned to them.
TODO: elaborate.
### Special classes
A node that is a member of two or more ways shall have the `.shared` class. (TODO)
Two or more nodes at identical coordinates shall each have an `.overlapped` class. (TODO)
Elements comprising the entity currently under the cursor shall have the `.hover` class.
(The `:hover` psuedo-class is insufficient when an entity's visual representation consists
of several elements, only one of which can be `:hover`ed.)
Elements that are currently active (being clicked or dragged) shall have the `.active`
class.
Elements that are currently selected shall have the `.selected` class.