From 3589ec333672cc51bbb203e80ec30deb7470768c Mon Sep 17 00:00:00 2001 From: Candid Dauth Date: Mon, 15 Apr 2024 02:20:58 +0200 Subject: [PATCH] Rename "symbol" to "marker", introduce v3 socket version --- ...facilmap-client-npm-3.4.0-9ca14d53cc.patch | 11 + client/package.json | 2 +- client/src/client.ts | 34 +- docs/package.json | 2 +- docs/src/developers/client/changelog.md | 4 + docs/src/developers/client/types.md | 12 +- docs/src/developers/leaflet/icons.md | 42 +- docs/src/developers/leaflet/markers.md | 4 +- docs/src/developers/leaflet/search.md | 2 +- frontend/package.json | 2 +- frontend/src/i18n/de.json | 4 +- frontend/src/i18n/en.json | 4 +- frontend/src/i18n/nb-NO.json | 2 +- .../src/lib/components/edit-filter-dialog.vue | 6 +- .../src/lib/components/edit-marker-dialog.vue | 8 +- .../edit-type-dialog/edit-type-dialog.vue | 20 +- .../edit-type-dropdown-dialog.vue | 24 +- frontend/src/lib/components/facil-map.vue | 4 +- .../leaflet-map/leaflet-map-components.ts | 10 +- .../lib/components/legend/legend-content.vue | 16 +- .../src/lib/components/legend/legend-utils.ts | 22 +- .../lib/components/route-form/route-form.vue | 2 +- .../ui/{symbol-picker.vue => icon-picker.vue} | 12 +- frontend/src/lib/components/ui/icon.vue | 6 +- frontend/src/lib/index.ts | 2 +- frontend/src/lib/utils/files.ts | 6 +- frontend/src/lib/utils/search.ts | 2 +- integration-tests/package.json | 6 +- integration-tests/src/socket-v1/lines.test.ts | 73 ++ .../src/socket-v1/markers.test.ts | 62 ++ .../src/socket-v1/padData.test.ts | 25 + .../src/socket-v3/history.test.ts | 22 + .../src/{ => socket-v3}/lines.test.ts | 80 +- .../src/{ => socket-v3}/markers.test.ts | 80 +- .../src/{ => socket-v3}/padData.test.ts | 30 +- .../src/socket-v3/routes.test.ts | 7 + .../types/types-dropdown-styles.test.ts | 32 +- .../types/types-fields.test.ts | 2 +- .../{ => socket-v3}/types/types-order.test.ts | 2 +- .../types/types-styles.test.ts | 30 +- .../src/{ => socket-v3}/types/types.test.ts | 26 +- .../src/{ => socket-v3}/views.test.ts | 2 +- integration-tests/src/utils.ts | 25 +- leaflet/icontest.html | 4 +- leaflet/package.json | 2 +- leaflet/src/markers/marker-layer.ts | 4 +- leaflet/src/overpass/overpass-layer.ts | 4 +- leaflet/src/search/search-results-layer.ts | 4 +- leaflet/src/utils/icons.ts | 154 ++-- server/package.json | 4 +- server/src/database/database.ts | 4 +- server/src/database/marker.ts | 6 +- server/src/database/meta.ts | 1 + server/src/database/migrations.ts | 99 ++- server/src/database/search.ts | 2 +- server/src/database/type.ts | 10 +- server/src/export/geojson.ts | 2 +- server/src/socket/socket-common.ts | 97 +-- server/src/socket/socket-v1.ts | 144 ++-- server/src/socket/socket-v2.ts | 704 ++---------------- server/src/socket/socket-v3.ts | 693 +++++++++++++++++ server/src/socket/socket.ts | 63 +- server/src/utils/events.ts | 4 +- types/package.json | 2 +- types/src/base.ts | 8 +- types/src/events.ts | 6 +- types/src/index.ts | 3 + types/src/marker.ts | 4 +- types/src/socket/socket-common.ts | 21 +- types/src/socket/socket-v1.ts | 8 + types/src/socket/socket-v2.ts | 161 ++++ .../{socket-versions.ts => socket-v3.ts} | 28 +- types/src/socket/socket.ts | 21 +- types/src/type.ts | 97 ++- utils/package.json | 2 +- utils/src/filter.ts | 25 +- utils/src/objects.ts | 14 +- yarn.lock | 71 +- 78 files changed, 1878 insertions(+), 1367 deletions(-) create mode 100644 .yarn/patches/facilmap-client-npm-3.4.0-9ca14d53cc.patch rename frontend/src/lib/components/ui/{symbol-picker.vue => icon-picker.vue} (90%) create mode 100644 integration-tests/src/socket-v1/lines.test.ts create mode 100644 integration-tests/src/socket-v1/markers.test.ts create mode 100644 integration-tests/src/socket-v1/padData.test.ts create mode 100644 integration-tests/src/socket-v3/history.test.ts rename integration-tests/src/{ => socket-v3}/lines.test.ts (89%) rename integration-tests/src/{ => socket-v3}/markers.test.ts (84%) rename integration-tests/src/{ => socket-v3}/padData.test.ts (91%) create mode 100644 integration-tests/src/socket-v3/routes.test.ts rename integration-tests/src/{ => socket-v3}/types/types-dropdown-styles.test.ts (89%) rename integration-tests/src/{ => socket-v3}/types/types-fields.test.ts (99%) rename integration-tests/src/{ => socket-v3}/types/types-order.test.ts (95%) rename integration-tests/src/{ => socket-v3}/types/types-styles.test.ts (95%) rename integration-tests/src/{ => socket-v3}/types/types.test.ts (97%) rename integration-tests/src/{ => socket-v3}/views.test.ts (98%) create mode 100644 server/src/socket/socket-v3.ts create mode 100644 types/src/socket/socket-v1.ts create mode 100644 types/src/socket/socket-v2.ts rename types/src/socket/{socket-versions.ts => socket-v3.ts} (83%) diff --git a/.yarn/patches/facilmap-client-npm-3.4.0-9ca14d53cc.patch b/.yarn/patches/facilmap-client-npm-3.4.0-9ca14d53cc.patch new file mode 100644 index 00000000..9df5bd3d --- /dev/null +++ b/.yarn/patches/facilmap-client-npm-3.4.0-9ca14d53cc.patch @@ -0,0 +1,11 @@ +diff --git a/dist/client.d.ts b/dist/client.d.ts +index f441770687db57140a4c50b4a78a15b696f44177..3dbea34c932e79d6e3dbbf49b5dcafe2fb54cccd 100644 +--- a/dist/client.d.ts ++++ b/dist/client.d.ts +@@ -1,5 +1,5 @@ + import { Socket as SocketIO } from "socket.io-client"; +-import { Bbox, BboxWithZoom, EventHandler, EventName, FindOnMapQuery, FindPadsQuery, FindPadsResult, FindQuery, GetPadQuery, HistoryEntry, ID, Line, LineCreate, LineExportRequest, LineTemplateRequest, LineToRouteCreate, LineUpdate, MapEvents, Marker, MarkerCreate, MarkerUpdate, MultipleEvents, ObjectWithId, PadData, PadDataCreate, PadDataUpdate, PadId, PagedResults, RequestData, RequestName, ResponseData, Route, RouteClear, RouteCreate, RouteExportRequest, RouteInfo, RouteRequest, SearchResult, TrackPoint, Type, TypeCreate, TypeUpdate, View, ViewCreate, ViewUpdate, Writable } from "facilmap-types"; ++import { Bbox, BboxWithZoom, EventHandler, EventName, FindOnMapQuery, FindPadsQuery, FindPadsResult, FindQuery, GetPadQuery, HistoryEntry, ID, Line, LineCreate, LineExportRequest, LineTemplateRequest, LineToRouteCreate, LineUpdate, MapEvents, Marker, MarkerCreate, MarkerUpdate, MultipleEvents, ObjectWithId, PadData, PadDataCreate, PadDataUpdate, PadId, PagedResults, RequestData, RequestName, ResponseData, Route, RouteClear, RouteCreate, RouteExportRequest, RouteInfo, RouteRequest, SearchResult, TrackPoint, Type, TypeCreate, TypeUpdate, View, ViewCreate, ViewUpdate, Writable } from "facilmap-types-v3"; + export interface ClientEvents> extends MapEvents { + connect: []; + disconnect: [string]; diff --git a/client/package.json b/client/package.json index ed13ef5a..a0594f24 100644 --- a/client/package.json +++ b/client/package.json @@ -1,6 +1,6 @@ { "name": "facilmap-client", - "version": "4.1.1", + "version": "5.0.0", "description": "A library that acts as a client to FacilMap and makes it possible to retrieve and modify objects on a collaborative map.", "keywords": [ "maps", diff --git a/client/src/client.ts b/client/src/client.ts index eb60df94..0de7b08e 100644 --- a/client/src/client.ts +++ b/client/src/client.ts @@ -2,7 +2,7 @@ import { io, type ManagerOptions, type Socket as SocketIO, type SocketOptions } import { type Bbox, type BboxWithZoom, type CRU, type EventHandler, type EventName, type FindOnMapQuery, type FindPadsQuery, type FindPadsResult, type FindQuery, type GetPadQuery, type HistoryEntry, type ID, type Line, type LineExportRequest, type LineTemplateRequest, type LineToRouteCreate, type SocketEvents, type Marker, type MultipleEvents, type ObjectWithId, type PadData, type PadId, type PagedResults, type SocketRequest, type SocketRequestName, type SocketResponse, type Route, type RouteClear, type RouteCreate, type RouteExportRequest, type RouteInfo, type RouteRequest, type SearchResult, type SocketVersion, type TrackPoint, type Type, type View, type Writable, type SocketClientToServerEvents, type SocketServerToClientEvents, type LineTemplate, type LinePointsEvent, PadNotFoundError, type SetLanguageRequest } from "facilmap-types"; import { deserializeError, errorConstructors, serializeError } from "serialize-error"; -export interface ClientEvents extends SocketEvents { +export interface ClientEventsInterface extends SocketEvents { connect: []; disconnect: [string]; connect_error: [Error]; @@ -21,11 +21,13 @@ export interface ClientEvents extends SocketEvents { route: [RouteWithTrackPoints]; clearRoute: [RouteClear]; - emit: { [eventName in SocketRequestName]: [eventName, SocketRequest] }[SocketRequestName]; - emitResolve: { [eventName in SocketRequestName]: [eventName, SocketResponse] }[SocketRequestName]; - emitReject: [SocketRequestName, Error]; + emit: { [eventName in SocketRequestName]: [eventName, SocketRequest] }[SocketRequestName]; + emitResolve: { [eventName in SocketRequestName]: [eventName, SocketResponse] }[SocketRequestName]; + emitReject: [SocketRequestName, Error]; } +export type ClientEvents = Pick; // Workaround for https://github.com/microsoft/TypeScript/issues/15300 + const MANAGER_EVENTS: Array> = ['error', 'reconnect', 'reconnect_attempt', 'reconnect_error', 'reconnect_failed']; export interface TrackPoints { @@ -69,7 +71,7 @@ interface ClientData { errorConstructors.set("PadNotFoundError", PadNotFoundError as any); class Client { - private socket: SocketIO, SocketClientToServerEvents>; + private socket: SocketIO, SocketClientToServerEvents>; private state: ClientState; private data: ClientData; @@ -103,7 +105,7 @@ class Client { }); const serverUrl = typeof location != "undefined" ? new URL(this.state.server, location.href) : new URL(this.state.server); - const socket = io(`${serverUrl.origin}/v2`, { + const socket = io(`${serverUrl.origin}/v3`, { forceNew: true, path: serverUrl.pathname.replace(/\/$/, "") + "/socket.io", ...socketOptions @@ -141,7 +143,7 @@ class Client { return result; } - private _fixResponseObject(requestName: SocketRequestName, obj: T): T { + private _fixResponseObject(requestName: SocketRequestName, obj: T): T { if (typeof obj != "object" || !(obj as any)?.data || !["getMarker", "addMarker", "editMarker", "deleteMarker", "getLineTemplate", "addLine", "editLine", "deleteLine"].includes(requestName)) return obj; @@ -188,7 +190,7 @@ class Client { } } - private async _emit>(eventName: R, ...[data]: SocketRequest extends undefined | null ? [ ] : [ SocketRequest ]): Promise> { + private async _emit>(eventName: R, ...[data]: SocketRequest extends undefined | null ? [ ] : [ SocketRequest ]): Promise> { try { this._simulateEvent("loadStart"); @@ -196,7 +198,7 @@ class Client { const outerError = new Error(); return await new Promise((resolve, reject) => { - this.socket.emit(eventName as any, data, (err: any, data: SocketResponse) => { + this.socket.emit(eventName as any, data, (err: any, data: SocketResponse) => { if(err) { const cause = deserializeError(err); reject(deserializeError({ ...serializeError(outerError), message: cause.message, cause })); @@ -350,7 +352,7 @@ class Client { } }; - async setPadId(padId: PadId): Promise>> { + async setPadId(padId: PadId): Promise>> { if(this.state.padId != null) throw new Error("Pad ID already set."); @@ -361,7 +363,7 @@ class Client { await this._emit("setLanguage", language); } - async updateBbox(bbox: BboxWithZoom): Promise>> { + async updateBbox(bbox: BboxWithZoom): Promise>> { const isZoomChange = this.bbox && bbox.zoom !== this.bbox.zoom; this._set(this.state, 'bbox', bbox); @@ -400,7 +402,7 @@ class Client { return await this._emit("findPads", data); } - async createPad(data: PadData): Promise>> { + async createPad(data: PadData): Promise>> { const obj = await this._emit("createPad", data); this._set(this.state, 'serverError', undefined); this._set(this.state, 'readonly', false); @@ -417,7 +419,7 @@ class Client { await this._emit("deletePad"); } - async listenToHistory(): Promise>> { + async listenToHistory(): Promise>> { const obj = await this._emit("listenToHistory"); this._set(this.state, 'listeningToHistory', true); this._receiveMultiple(obj); @@ -429,7 +431,7 @@ class Client { await this._emit("stopListeningToHistory"); } - async revertHistoryEntry(data: ObjectWithId): Promise>> { + async revertHistoryEntry(data: ObjectWithId): Promise>> { const obj = await this._emit("revertHistoryEntry", data); this._set(this.data, 'history', {}); this._receiveMultiple(obj); @@ -483,7 +485,7 @@ class Client { return await this._emit("find", data); } - async findOnMap(data: FindOnMapQuery): Promise> { + async findOnMap(data: FindOnMapQuery): Promise> { return await this._emit("findOnMap", data); } @@ -580,7 +582,7 @@ class Client { this.socket.disconnect(); } - private async _setPadId(padId: string): Promise>> { + private async _setPadId(padId: string): Promise>> { this._set(this.state, 'serverError', undefined); this._set(this.state, 'padId', padId); try { diff --git a/docs/package.json b/docs/package.json index 0a3d885b..5f6d49f9 100755 --- a/docs/package.json +++ b/docs/package.json @@ -1,6 +1,6 @@ { "name": "facilmap-docs", - "version": "4.1.1", + "version": "5.0.0", "description": "Documentation for FacilMap.", "author": "Candid Dauth ", "repository": { diff --git a/docs/src/developers/client/changelog.md b/docs/src/developers/client/changelog.md index b14d188b..f7dcc69c 100644 --- a/docs/src/developers/client/changelog.md +++ b/docs/src/developers/client/changelog.md @@ -2,6 +2,10 @@ The websocket on the FacilMap server provides different API versions (implemented as socket.io namespaces such as `/` for version 1, `/v2` for version 2, etc.) in order to stay backwards compatible with older clients. Each release of facilmap-client is adapted to a particular API version of the server. When upgrading to a new version of the client, have a look at this page to find out what has changed. +## v5.0.0 (API v3) + +* “symbol” was renamed to “icon” everywhere. This applies to `Marker.symbol`, `Type.defaultSymbol`, `Type.symbolFixed`, `Type.fields[].controlSymbol` and `Type.fields[].options[].symbol`. + ## v4.0.0 (API v2) * Before, creating a map with an empty name resulted in `padData.name` set to `"Unnamed map"`. Now, an empty name will result in `""` and the UI is responsible for displaying that in an appropriate way. diff --git a/docs/src/developers/client/types.md b/docs/src/developers/client/types.md index 727d9471..8c7b74da 100644 --- a/docs/src/developers/client/types.md +++ b/docs/src/developers/client/types.md @@ -20,7 +20,7 @@ A bounding box that describes which part of the map the user is currently viewin * `name` (string): The name of this marker * `colour` (string): The colour of this marker as a 6-digit hex value, for example `ff0000` * `size` (number, min: 15): The height of the marker in pixels -* `symbol` (string): The symbol name for the marker. Default is an empty string. +* `icon` (string): The icon name for the marker. Default is an empty string. * `shape` (string): The shape name for the marker. Default is an empty string (equivalent to `"drop"`). * `ele` (number or null): The elevation of this marker in metres (set by the server) * `typeId` (number): The ID of the type of this marker @@ -110,20 +110,20 @@ their `idx` property. * `name` (string): The name of this type. Note that the if the name is "Marker" or "Line", the FacilMap UI will translate the name to other languages even though the underlying name is in English. * `type` (string): `marker` or `line` * `idx` (number): The sorting position of this type. When a list of types is shown to the user, it must be ordered by this value. If types were deleted or reordered, there may be gaps in the sequence of indexes, but no two types on the same map can ever have the same index. When setting this as part of a type creation/update, other types with a same/higher index will have their index increased to be moved down the list. -* `defaultColour`, `defaultSize`, `defaultSymbol`, `defaultShape`, `defaultWidth`, `defaultStroke`, `defaultMode` (string/number): Default values for the +* `defaultColour`, `defaultSize`, `defaultIcon`, `defaultShape`, `defaultWidth`, `defaultStroke`, `defaultMode` (string/number): Default values for the different object properties -* `colourFixed`, `sizeFixed`, `symbolFixed`, `shapeFixed`, `widthFixed`, `strokeFixed`, `modeFixed` (boolean): Whether those values are fixed and +* `colourFixed`, `sizeFixed`, `iconFixed`, `shapeFixed`, `widthFixed`, `strokeFixed`, `modeFixed` (boolean): Whether those values are fixed and cannot be changed for an individual object * `fields` ([object]): The form fields for this type. Each field has the following properties: * `name` (string): The name of the field. This is at the same time the key in the `data` properties of markers and lines. Note that the if the name is "Description", the FacilMap UI will translate the name to other languages even though the underlying name is in English. * `oldName` (string): When renaming a field (using [`editType(data)`](./methods.md#edittype-data)), specify the former name here * `type` (string): The type of field, one of `textarea`, `dropdown`, `checkbox`, `input` - * `controlColour`, `controlSize`, `controlSymbol`, `controlShape`, `controlWidth`, `controlStroke` (boolean): If this field is a dropdown, whether the different options set a specific property on the object + * `controlColour`, `controlSize`, `controlIcon`, `controlShape`, `controlWidth`, `controlStroke` (boolean): If this field is a dropdown, whether the different options set a specific property on the object * `default` (string/boolean): The default value of this field * `options` ([object]): If this field is a dropdown or a checkbox, an array of objects with the following properties. For a checkbox, the array has to have 2 items, the first representing the unchecked and the second the checked state. * `value` (string): The value of this option. * `oldValue` (string): When renaming a dropdown option (using [`editType(data)`](./methods.md#edittype-data)), specify the former value here - * `colour`, `size`, `shape`, `symbol`, `width`, `stroke` (string/number): The property value if this field controls that property + * `colour`, `size`, `shape`, `icon`, `width`, `stroke` (string/number): The property value if this field controls that property ## SearchResult @@ -135,7 +135,7 @@ their `idx` property. * `zoom` (number): Zoom level at which there is a good view onto the result. Might be null if `boundingbox` is set. * `extratags` (object): Extra OSM tags that might be useful * `geojson` (object): GeoJSON if the result has a shape -* `icon` (string): Symbol key of the result +* `icon` (string): Icon key of the result * `type` (string): Type of the result * `id` (string): If the result is an OSM object, the ID of the OSM object, prefixed by `n` (node), `w` (way) or `r` (relation) * `ele` (number): Elevation in meters diff --git a/docs/src/developers/leaflet/icons.md b/docs/src/developers/leaflet/icons.md index 19a947cc..a094fe6d 100644 --- a/docs/src/developers/leaflet/icons.md +++ b/docs/src/developers/leaflet/icons.md @@ -1,6 +1,6 @@ # Icons -FacilMap comes with a large selection of icons (called “symbols” in the code) and marker shapes. The icons come from the following sources: +FacilMap comes with a large selection of icons and marker shapes. The icons come from the following sources: * All the [Open SVG Map Icons](https://github.com/twain47/Open-SVG-Map-Icons/) (these are the ones used by Nominatim for search results) * A selection of [Glyphicons](https://getbootstrap.com/docs/3.4/components/#glyphicons-glyphs) from Bootstrap 3. * A few icons from [Material Design Iconic Font](https://zavoloklom.github.io/material-design-iconic-font/). @@ -10,45 +10,45 @@ FacilMap uses these icons as part of markers on the map and in regular UI elemen facilmap-leaflet includes all the icons and marker shapes and provides some helper methods to access them in different sizes and styles. -To make the bundle size smaller, the symbols are separated into two sets: -* The *core* symbols are included in the main facilmap-leaflet bundle. This includes all all symbols that are used by FacilMap as UI elements. -* The *extra* symbols are included in a separate file. When you call any of the methods below for the first time for an extra symbol, this separate file is loaded using an async import. You can also explicitly load the extra symbols at any point of time by calling `preloadExtraSymbols()`. +To make the bundle size smaller, the icons are separated into two sets: +* The *core* icons are included in the main facilmap-leaflet bundle. This includes all all icons that are used by FacilMap as UI elements. +* The *extra* icons are included in a separate file. When you call any of the methods below for the first time for an extra icon, this separate file is loaded using an async import. You can also explicitly load the extra icons at any point of time by calling `preloadExtraIcons()`. -## Available symbols and shapes +## Available icons and shapes -`symbolList` and `shapeList` are arrays of strings that contain the names of all the available symbols (core and extra) and marker shapes. The `coreSymbolList` array contains only the names of the core symbols. +`iconList` and `shapeList` are arrays of strings that contain the names of all the available icons (core and extra) and marker shapes. The `coreIconList` array contains only the names of the core icons. -In addition to the symbols listed in `symbolList`, any single character can be used as a symbol. Single-character symbols are rendered in the browser, they don’t require loading the extra symbols. +In addition to the icons listed in `iconList`, any single character can be used as an icon. Single-character icons are rendered in the browser, they don’t require loading the extra icons. -## Get a symbol +## Get an icon The following methods returns a simple monochrome icon. -* `async getSymbolCode(colour, size, symbol)`: Returns a raw SVG object with the code of the symbol as a string. -* `async getSymbolUrl(colour, size, symbol)`: Returns the symbol as a `data:` URL (that can be used as the `src` of an `img` for example) -* `async getSymbolHtml(colour, size, symbol)`: Returns the symbol as an SVG element source code (as a string) that can be embedded straight into a HTML page. +* `async getIconCode(colour, size, icon)`: Returns a raw SVG object with the code of the icon as a string. +* `async getIconUrl(colour, size, icon)`: Returns the icon as a `data:` URL (that can be used as the `src` of an `img` for example) +* `async getIconHtml(colour, size, icon)`: Returns the icon as an SVG element source code (as a string) that can be embedded straight into a HTML page. The following arguments are expected: * `colour`: Any colour that would be acceptable in SVG, for example `#000000` or `currentColor`. -* `size`: The height/width in pixels that the symbol should have (symbols are square). For `getSymbolHtml()`, the size can also be a string (for example `1em`). -* `symbol`: Either one of the symbol name that is listed in `symbolList`, or a single letter, or an empty string or undefined to render the default symbol (a dot). +* `size`: The height/width in pixels that the icon should have (icons are square). For `getIconHtml()`, the size can also be a string (for example `1em`). +* `icon`: Either one of the icon name that is listed in `iconList`, or a single letter, or an empty string or undefined to render the default icon (a dot). ## Get a marker icon -The following methods returns a marker icon with the specified shape and the specified symbol inside. +The following methods returns a marker icon with the specified shape and the specified icon inside. -* `async getMarkerCode(colour, height, symbol, shape, highlight)`: Returns a raw SVG object with the code of the marker as a string. -* `async getMarkerUrl(colour, height, symbol, shape, highlight)`: Returns the marker as a `data:` URL (that can be used as the `src` of an `img` for example) -* `async getMarkerHtml(colour, height, symbol, shape, highlight)`: Returns the marker as an SVG element source code (as a string) that can be embedded straight into a HTML page. -* `getMarkerIcon(colour, height, symbol, shape, highlight)`: Returns the marker as a [Leaflet Icon](https://leafletjs.com/reference.html#icon) that can be used for Leaflet markers. The anchor point is set correctly. The Icon object is returned synchronously and updates its `src` automatically as soon as it is loaded. +* `async getMarkerCode(colour, height, icon, shape, highlight)`: Returns a raw SVG object with the code of the marker as a string. +* `async getMarkerUrl(colour, height, icon, shape, highlight)`: Returns the marker as a `data:` URL (that can be used as the `src` of an `img` for example) +* `async getMarkerHtml(colour, height, icon, shape, highlight)`: Returns the marker as an SVG element source code (as a string) that can be embedded straight into a HTML page. +* `getMarkerIcon(colour, height, icon, shape, highlight)`: Returns the marker as a [Leaflet Icon](https://leafletjs.com/reference.html#icon) that can be used for Leaflet markers. The anchor point is set correctly. The Icon object is returned synchronously and updates its `src` automatically as soon as it is loaded. The following arguments are expected: * `colour`: A colour in hex format, for example `#000000`. * `height`: The height of the marker in pixels. Different marker shapes have different aspect ratios, so the width will differ depending on which shape is used. Note that the height is approximate, it is scaled down for some shapes with the aim that two markers with different shapes but the same `height` should visually appear roughly the same size. -* `symbol`: Either one of the symbol name that is listed in `symbolList`, or a single letter, or an empty string or undefined to render the default symbol (a dot). +* `icon`: Either one of the icon name that is listed in `iconList`, or a single letter, or an empty string or undefined to render the default icon (a dot). * `shape`: A shape name that is listed in `shapeList`, or an empty string or undefined to render the default shape (`drop`). * `highlight`: If this is set to true, the marker is rendered as highlighted (with an increased border width). -## Get a symbol for an OSM element +## Get an icon for an OSM element -Calling `getSymbolForTags(tags)` will make a best attempt to return a symbol that is appropriate for a given OSM element. `tags` should be an object that maps OSM tag keys to values. The function returns a string representing the name of a symbol. If no fitting symbol can be found, an empty string is returned. \ No newline at end of file +Calling `getIconForTags(tags)` will make a best attempt to return an icon that is appropriate for a given OSM element. `tags` should be an object that maps OSM tag keys to values. The function returns a string representing the name of an icon. If no fitting icon can be found, an empty string is returned. \ No newline at end of file diff --git a/docs/src/developers/leaflet/markers.md b/docs/src/developers/leaflet/markers.md index 0d553f0c..ca8798f4 100644 --- a/docs/src/developers/leaflet/markers.md +++ b/docs/src/developers/leaflet/markers.md @@ -55,7 +55,7 @@ If you want to make sure that a marker with a particular ID is shown (regardless `MarkerLayer` (in singular, as opposed to `MarkersLayer`) makes it possible to render an individual marker object with its appropriate style. It does not automatically update when the marker changes and can also be used for markers that are not saved on the map. `MarkerLayer` is based on regular [Leaflet markers](https://leafletjs.com/reference.html#marker), but accepts the following additional options: -* `marker`: A marker object that the marker style will be based on. Only the properties relevant for the style (`colour`, `size`, `symbol` and `shape`) need to be set. +* `marker`: A marker object that the marker style will be based on. Only the properties relevant for the style (`colour`, `size`, `icon` and `shape`) need to be set. * `highlight`: If this is `true`, the marker will be shown with a thicker border. * `raised`: If this is `true`, the marker will be rendered above other map objects. @@ -65,7 +65,7 @@ import { MarkerLayer } from "facilmap-leaflet"; const map = L.map('map'); new MarkerLayer([52.5295, 13.3840], { - marker: { colour: "00ff00", size: 40, symbol: "alert", shape: "pentagon" } + marker: { colour: "00ff00", size: 40, icon: "alert", shape: "pentagon" } }).addTo(map); ``` diff --git a/docs/src/developers/leaflet/search.md b/docs/src/developers/leaflet/search.md index ca316e4b..0bfd00d2 100644 --- a/docs/src/developers/leaflet/search.md +++ b/docs/src/developers/leaflet/search.md @@ -10,7 +10,7 @@ * `markerShape`: The shape of search result markers, defaults to `drop` * `pathOptions`: [Path options](https://leafletjs.com/reference.html#path-option) for lines and polygons. -Note that the marker symbol is determined by the type of result. +Note that the marker icon is determined by the type of result. Example usage: ```javascript diff --git a/frontend/package.json b/frontend/package.json index d7483e55..47af685b 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -1,6 +1,6 @@ { "name": "facilmap-frontend", - "version": "4.1.1", + "version": "5.0.0", "description": "A fully-featured OpenStreetMap-based map where markers and lines can be added with live collaboration.", "keywords": [ "maps", diff --git a/frontend/src/i18n/de.json b/frontend/src/i18n/de.json index 0e9b1023..0303e20c 100644 --- a/frontend/src/i18n/de.json +++ b/frontend/src/i18n/de.json @@ -128,7 +128,7 @@ "lon-lat-description": "Koordinaten des Markers", "colour-description": "Farbe des Markers oder der Linie", "size-description": "Größe des Markers", - "symbol-description": "Symbol des Markers", + "icon-description": "Symbol des Markers", "shape-description": "Form des Markers", "ele-description": "Höhe über NN des Markers", "mode-description": "Routenmodus der Linie (z. B. {{straight}} (Luftlinie) / {{car}} (Auto) / {{bicycle}} (Fahrrad) / {{pedestrian}} (zu Fuß) / {{track}} (importierter GPX-Track))", @@ -715,7 +715,7 @@ "dashed": "Gestrichelt", "dotted": "Gepunktet" }, - "symbol-picker": { + "icon-picker": { "unknown-icon-error": "Unbekanntes Symbol", "filter-placeholder": "Filtern", "no-icons-found-error": "Es konnten keine Symbole gefunden werden." diff --git a/frontend/src/i18n/en.json b/frontend/src/i18n/en.json index 3c42e9a0..258b628e 100644 --- a/frontend/src/i18n/en.json +++ b/frontend/src/i18n/en.json @@ -130,7 +130,7 @@ "lon-lat-description": "Marker coordinates", "colour-description": "Marker/line colour", "size-description": "Marker size", - "symbol-description": "Marker icon", + "icon-description": "Marker icon", "shape-description": "Marker shape", "ele-description": "Marker elevation", "mode-description": "Line routing mode ({{straight}} / {{car}} / {{bicycle}} / {{pedestrian}} / {{track}})", @@ -717,7 +717,7 @@ "dashed": "Dashed", "dotted": "Dotted" }, - "symbol-picker": { + "icon-picker": { "unknown-icon-error": "Unknown icon", "filter-placeholder": "Filter", "no-icons-found-error": "No icons could be found." diff --git a/frontend/src/i18n/nb-NO.json b/frontend/src/i18n/nb-NO.json index eb2fc8e0..c2dfb50f 100644 --- a/frontend/src/i18n/nb-NO.json +++ b/frontend/src/i18n/nb-NO.json @@ -26,7 +26,7 @@ "apply": "Bruk", "typeId-description-separator": " / ", "size-description": "Pekerstørrelse", - "symbol-description": "Pekerikon", + "icon-description": "Pekerikon", "shape-description": "Pekerform", "width-description": "Linjebredde" }, diff --git a/frontend/src/lib/components/edit-filter-dialog.vue b/frontend/src/lib/components/edit-filter-dialog.vue index 014d350c..c857bc85 100644 --- a/frontend/src/lib/components/edit-filter-dialog.vue +++ b/frontend/src/lib/components/edit-filter-dialog.vue @@ -166,9 +166,9 @@ - symbol - {{i18n.t("edit-filter-dialog.symbol-description")}} - symbol == "accommodation_camping" + icon + {{i18n.t("edit-filter-dialog.icon-description")}} + icon == "accommodation_camping" diff --git a/frontend/src/lib/components/edit-marker-dialog.vue b/frontend/src/lib/components/edit-marker-dialog.vue index 8920047e..f86ed349 100644 --- a/frontend/src/lib/components/edit-marker-dialog.vue +++ b/frontend/src/lib/components/edit-marker-dialog.vue @@ -5,7 +5,7 @@ import { cloneDeep, isEqual } from "lodash-es"; import ModalDialog from "./ui/modal-dialog.vue"; import ColourPicker from "./ui/colour-picker.vue"; - import SymbolPicker from "./ui/symbol-picker.vue"; + import IconPicker from "./ui/icon-picker.vue"; import ShapePicker from "./ui/shape-picker.vue"; import FieldInput from "./ui/field-input.vue"; import SizePicker from "./ui/size-picker.vue"; @@ -118,11 +118,11 @@ - -