@panoramax/web-viewer 5.0.0-develop-d7206514 → 5.0.0-develop-d26305dd

package/build/components/ui/widgets/OSMEditors.js

@@ -0,0 +1,155 @@
+import { LitElement, css, html, nothing } from "lit";
+import { fa, onceParentAvailable } from "../../../utils/widgets.js";
+import { josmBboxParameters } from "../../../utils/utils.js";
+import { IdEditorURL } from "../../../utils/services.js";
+import {
+	faExternalLinkAlt, faLocationDot, faSatelliteDish
+} from "@fortawesome/free-solid-svg-icons";
+
+const JOSM_REMOTE_URL = "http://127.0.0.1:8111";
+
+/**
+ * OSM Editors component offers direct links to OpenStreetMap's iD and JOSM editors.
+ * @class Panoramax.components.ui.widgets.OSMEditors
+ * @element pnx-widget-osmeditors
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-widget-osmeditors _parent=${viewer} />
+ * ```
+ */
+export default class OSMEditors extends LitElement {
+	/** @private */
+	static properties = {
+		_pic: {state: true},
+		_josm: {state: true},
+	};
+
+	/** @private */
+	static styles = css`
+		:host { display: inline-flex; gap: 5px; }
+		:host > * { flex: 1; }
+		pnx-link-button::part(btn) { height: auto; }
+	`;
+
+	constructor() {
+		super();
+		this._josm = false;
+	}
+
+	/** @private */
+	connectedCallback() {
+		super.connectedCallback();
+		onceParentAvailable(this).then(() => this._parent.onceReady()).then(() => {
+			this._parent.onceFirstPicLoaded().then(this._onPictureLoad.bind(this));
+			this._parent.psv.addEventListener("picture-loaded", this._onPictureLoad.bind(this));
+		});
+	}
+
+	/** @private */
+	_onPictureLoad() {
+		this._pic = this._parent?.psv?.getPictureMetadata();
+	}
+
+	/**
+	 * Enable or disable JOSM live editing using [Remote](https://josm.openstreetmap.de/wiki/Help/RemoteControlCommands)
+	 * @private
+	 */
+	_toggleJOSMLive() {
+		this._josm = !this._josm;
+
+		if(this._josm) {
+			// Check if JOSM remote is enabled
+			fetch(JOSM_REMOTE_URL+"/version")
+				.then(() => {
+					// First loading : download + zoom
+					const p1 = josmBboxParameters(this._parent?.psv?.getPictureMetadata?.());
+					if(p1) {
+						const url = `${JOSM_REMOTE_URL}/load_and_zoom?${p1}`;
+						fetch(url).catch(e => {
+							console.warn(e);
+							this._toggleJOSMLive();
+						});
+					}
+
+					// Enable event listening
+					this._josmListener = () => {
+						const p2 = josmBboxParameters(this._parent?.psv?.getPictureMetadata?.());
+						if(p2) {
+							// Next loadings : just zoom
+							//   This avoids desktop focus to go on JOSM instead of
+							//   Staying on web browser
+							const url = `${JOSM_REMOTE_URL}/zoom?${p2}`;
+							fetch(url).catch(e => {
+								console.warn(e);
+								this._toggleJOSMLive();
+							});
+						}
+					};
+					this._parent?.psv?.addEventListener?.("picture-loaded", this._josmListener);
+					this._parent?.psv?.addEventListener?.("picture-loading", this._josmListener);
+				})
+				.catch(e => {
+					console.warn(e);
+					alert(this._parent?._t.pnx.error_josm);
+					this._toggleJOSMLive();
+				});
+		}
+		else {
+			if(this._josmListener) {
+				this._parent?.psv?.removeEventListener?.("picture-loading", this._josmListener);
+				this._parent?.psv?.removeEventListener?.("picture-loaded", this._josmListener);
+				delete this._josmListener;
+			}
+		}
+	}
+
+	/** @private */
+	render() {
+		if(!this._pic) { return nothing; }
+
+		// Mobile -> Geo URI
+		if(this._parent?.isWidthSmall()) {
+			return html`
+				<pnx-link-button
+					size="sm"
+					href="geo:${this._pic.gps[1]},${this._pic.gps[0]};u=3"
+				>
+					${fa(faExternalLinkAlt)} ${this._parent?._t.pnx.geo_uri}
+				</pnx-link-button>
+			`;
+		}
+		else {
+			const idOpts = {
+				"map": `19/${this._pic.gps[1]}/${this._pic.gps[0]}`,
+				"source": "Panoramax",
+				"photo_overlay": "panoramax",
+				"photo": `panoramax/${this._pic.id}`,
+			};
+			const idUrl = idOpts && `${IdEditorURL()}#${new URLSearchParams(idOpts).toString()}`;
+
+			return html`
+				<pnx-link-button
+					size="sm"
+					href=${idUrl}
+					target="_blank"
+					title="${this._parent?._t.pnx.contribute_id}"
+				>
+					${fa(faLocationDot)} ${this._parent?._t.pnx.id}
+				</pnx-link-button>
+
+				<pnx-button
+					id="pnx-edit-josm"
+					size="sm"
+					active=${this._josm ? "" : nothing}
+					@click=${this._toggleJOSMLive}
+					title="${this._parent?._t.pnx.josm_live}"
+				>
+					${fa(faSatelliteDish)} ${this._parent?._t.pnx.josm}
+				</pnx-button>
+			`;
+		}
+	}
+}
+
+customElements.define("pnx-widget-osmeditors", OSMEditors);

package/build/components/ui/widgets/PictureLegendActions.js

@@ -0,0 +1,99 @@
+import { LitElement, css, html, nothing } from "lit";
+import { fa, onceParentAvailable } from "../../../utils/widgets.js";
+import { faEllipsisV } from "@fortawesome/free-solid-svg-icons";
+import { noprint } from "../../styles.js";
+
+/**
+ * Picture Legend Actions is a menu showing up complementary actions for picture legend.
+ * @class Panoramax.components.ui.widgets.PictureLegendActions
+ * @element pnx-picture-legend-actions
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-picture-legend-actions _parent=${viewer} />
+ * ```
+ */
+export default class PictureLegendActions extends LitElement {
+	/** @private */
+	static styles = [ noprint, css`
+		pnx-togglable-group::part(menu) {
+			border-radius: 5px;
+			min-width: unset;
+		}
+	`];
+
+	/**
+	 * Component properties.
+	 * @memberof Panoramax.components.ui.widgets.PictureLegendActions#
+	 * @type {Object}
+	 * @property {boolean} [full=false] Show advanced actions
+	 */
+	static properties = {
+		full: { type: Boolean },
+		_meta: { state: true },
+	};
+
+	constructor() {
+		super();
+		this.full = false;
+	}
+
+	/** @private */
+	connectedCallback() {
+		super.connectedCallback();
+
+		onceParentAvailable(this).then(() => this._parent.onceReady()).then(() => {
+			this._meta = this._parent.psv.getPictureMetadata();
+			this._parent.psv.addEventListener("picture-loaded", () => {
+				this._meta = this._parent.psv.getPictureMetadata();
+			});
+		});
+	}
+
+	/** @private */
+	_onPrint() {
+		this._closeGroup();
+		window.print();
+	}
+
+	/** @private */
+	_closeGroup() {
+		this.renderRoot.querySelector("#pic-legend-headline-menu").close();
+	}
+
+	/** @private */
+	render() {
+		return html`<pnx-togglable-group padded="false" id="pic-legend-headline-menu" ._parent=${this._parent}>
+			<pnx-button slot="button" kind="inline">${fa(faEllipsisV)}</pnx-button>
+			<pnx-list-group class="pnx-print-hidden" @click=${this._closeMenu}>
+				${this._meta ? html`<pnx-copy-button ._t=${this._parent?._t} text=${this._meta.id} unstyled>
+					${this._parent?._t.pnx.metadata_general_copy_picid}
+				</pnx-copy-button>` : nothing}
+
+				<a
+					download
+					target="_blank"
+					href=${this._meta?.panorama?.hdUrl}
+					@click=${this._closeGroup}
+				>${this._parent?._t.pnx.share_image}</a>
+
+				${this._parent.isWidthSmall() ? nothing : html`<button @click=${this._onPrint}>
+					${this._parent?._t.pnx.share_print}
+				</button>`}
+
+				${this._parent?.api?.getRSSURL() && !this._parent.isWidthSmall() && html`
+					<a
+						target="_blank"
+						href=${this._parent?.api.getRSSURL(this._parent?.map?.getBounds?.())}
+						title=${this._parent?._t.pnx.share_rss_title}
+						@click=${this._closeGroup}
+					>
+						${this._parent?._t.pnx.share_rss}
+					</a>
+				`}
+			</pnx-list-group>
+		</pnx-togglable-group>`;
+	}
+}
+
+customElements.define("pnx-picture-legend-actions", PictureLegendActions);

package/build/components/ui/widgets/Player.css

@@ -0,0 +1,7 @@
+pnx-widget-player {
+	pointer-events: none;
+}
+
+pnx-widget-player > pnx-button-group {
+	pointer-events: auto;
+}

package/build/components/ui/widgets/Player.js

@@ -0,0 +1,154 @@
+import { LitElement, html, nothing } from "lit";
+import { fa, onceParentAvailable } from "../../../utils/widgets.js";
+import {
+	faBackward, faEllipsisVertical, faForward, faPause, faPlay
+} from "@fortawesome/free-solid-svg-icons";
+import PlayerStyles from "./Player.css" with { type: "css" };
+document.adoptedStyleSheets.push(PlayerStyles);
+
+/**
+ * Player widget shows prev/play/pause/next/more buttons in a unified toolbar.
+ * @class Panoramax.components.ui.widgets.Player
+ * @element pnx-widget-player
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-widget-player _parent=${viewer} />
+ * ```
+ */
+export default class Player extends LitElement {
+	/**
+	 * Component properties.
+	 * @memberof Panoramax.components.ui.widgets.Player#
+	 * @type {Object}
+	 * @property {boolean} [playing=false] Is sequence currently playing ?
+	 * @property {string} [size=xl] Group size (md, xl)
+	 * @property {string} [more=depends] Should we display the "more options" button ("always", "never", "depends" = only on large screens (default))
+	 */
+	static properties = {
+		playing: {type: Boolean, reflect: true},
+		size: {type: String},
+		more: {type: String},
+		_activePrev: {state: true},
+		_activePlay: {state: true},
+		_activeNext: {state: true},
+	};
+
+	constructor() {
+		super();
+
+		this.playing = false;
+		this.size = "xl";
+		this.more = "depends";
+		this._activePrev = true;
+		this._activePlay = true;
+		this._activeNext = true;
+	}
+
+	/** @private */
+	createRenderRoot() {
+		return this;
+	}
+
+	/** @private */
+	connectedCallback() {
+		super.connectedCallback();
+
+		onceParentAvailable(this).then(() => this._parent?.oncePSVReady?.().then(() => {
+			this._parent.psv.addEventListener("sequence-playing", () => this.playing = true);
+			this._parent.psv.addEventListener("sequence-stopped", () => this.playing = false);
+			this._parent.psv.addEventListener("picture-loaded", this._changeActiveStates.bind(this));
+			this._parent.psv.addEventListener("pictures-navigation-changed", this._changeActiveStates.bind(this));
+			this._changeActiveStates();
+		}));
+	}
+
+	/** @private */
+	_changeActiveStates() {
+		if(this._parent.psv.getPicturesNavigation?.() === "pic") {
+			this._activeNext = false;
+			this._activePlay = false;
+			this._activePrev = false;
+		}
+		else {
+			this._activePrev = this._parent.psv.getPictureMetadata()?.sequence?.prevPic != null;
+
+			if(this._parent.psv.getPictureMetadata()?.sequence?.nextPic != null) {
+				this._activeNext = true;
+				this._activePlay = true;
+			}
+			else {
+				this._activeNext = false;
+				this._activePlay = false;
+			}
+		}
+		this.requestUpdate();
+	}
+
+	/** @private */
+	_onPlayClick() {
+		if(this._parent?.psv?.isSequencePlaying()) {
+			this.playing = false;
+			this._parent?.psv?.stopSequence();
+		}
+		else {
+			this.playing = true;
+			this._parent?.psv?.playSequence();
+		}
+	}
+
+	/** @private */
+	render() {
+		if(!this._parent?.psv?.addEventListener) { return nothing; }
+
+		return html`
+			<pnx-button-group
+				id="pnx-widget-player"
+				dir="row"
+				size=${this.size}
+				class="pnx-print-hidden"
+				style=${!this._activePrev && !this._activePlay && !this._activeNext ? "display: none": ""}
+			>
+				<pnx-button
+					kind="superflat"
+					id="pnx-player-prev"
+					title=${this._parent?._t.pnx.sequence_prev}
+					@click=${() => this._parent?.psv?.goToPrevPicture()}
+					.disabled=${!this._activePrev}
+				>${fa(faBackward)}</pnx-button>
+
+				<pnx-button
+					kind="superflat"
+					id="pnx-player-play"
+					title=${this.playing ? this._parent?._t.pnx.sequence_pause : this._parent?._t.pnx.sequence_play}
+					.disabled=${!this._activePlay}
+					@click=${this._onPlayClick.bind(this)}
+				>${this.playing ? fa(faPause) : fa(faPlay)}</pnx-button>
+
+				<pnx-button
+					kind="superflat"
+					id="pnx-player-next"
+					title=${this._parent?._t.pnx.sequence_next}
+					.disabled=${!this._activeNext}
+					@click=${() => this._parent?.psv?.goToNextPicture()}
+				>${fa(faForward)}</pnx-button>
+
+				${this.more === "never" || (this.more !== "always" && this._parent?.isWidthSmall()) ? nothing : html`
+					<pnx-togglable-group padded="false" ._parent=${this._parent}>
+						<pnx-button
+							kind="flat"
+							id="pnx-player-more"
+							title=${this._parent?._t.pnx.sequence_more}
+							class=${this.more === "depends" ? "pnx-xs-hidden" : ""}
+							slot="button"
+						>${fa(faEllipsisVertical)}</pnx-button>
+
+						<pnx-player-options ._parent=${this._parent}></pnx-player-options>
+					</pnx-togglable-group>
+				`}
+			</pnx-button-group>
+		`;
+	}
+}
+
+customElements.define("pnx-widget-player", Player);

package/build/components/ui/widgets/SemanticsFiltersButton.js

@@ -0,0 +1,65 @@
+import { LitElement, html, nothing } from "lit";
+import { fa, onceParentAvailable } from "../../../utils/widgets.js";
+import {
+	faChevronDown, faTags, faXmark
+} from "@fortawesome/free-solid-svg-icons";
+import { activeIcon } from "../../styles.js";
+
+/**
+ * Collapsible button showing off tags filters menus.
+ * @class Panoramax.components.ui.widgets.SemanticsFiltersButton
+ * @element pnx-widget-semantics-filters
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-widget-semantics-filters _parent=${viewer} />
+ * ```
+ */
+export default class SemanticsFiltersButton extends LitElement {
+	/** @private */
+	static styles = [activeIcon];
+
+	constructor() {
+		super();
+		onceParentAvailable(this).then(() => this._parent.onceMapReady?.().then(() => {
+			this._parent?.mapStyleComposer?.addEventListener("dataoverlay-added", () => this.requestUpdate());
+			this._parent?.map?.addEventListener("styledata", () => this.requestUpdate());
+		}));
+	}
+
+	/** @private */
+	render() {
+		const o = this._parent.map?.getSemanticOverlays?.();
+		if(!o || o.length === 0) { return; }
+
+		const active = o.filter(l => l.metadata && this._parent.mapStyleComposer.dataOverlays.has(l.source)).length > 0;
+		const isSmall = this._parent?.isWidthSmall() || this._parent?.isWidthMedium();
+		const resetIcon = fa(faXmark, {styles: {"pointer-events": "auto"}});
+		resetIcon.addEventListener("click", e => {
+			e.stopPropagation();
+			this._parent?.map?.toggleAllSemanticOverlays(false);
+		});
+
+		return html`
+			<pnx-togglable-group
+				id="pnx-widget-semantics-filter"
+				class="pnx-only-map pnx-print-hidden"
+				._parent=${this._parent}
+			>
+				<pnx-button kind="flat" size="xl" slot="button">
+					${fa(faTags)}
+					${active ? html`<span class="pnx-active-icon"></span>` : nothing}
+					${isSmall ? nothing : this._parent?._t.pnx.semantics_title}
+					${isSmall ? nothing : (active ? resetIcon : fa(faChevronDown))}
+				</pnx-button>
+				<pnx-map-semantics-filters-menu
+					id="pnx-map-semantics-filters-menu"
+					._parent=${this._parent}
+					@change=${this._onLayersChange}
+				></pnx-map-semantics-filters-menu>
+			</pnx-togglable-group>
+		`;
+	}
+}
+
+customElements.define("pnx-widget-semantics-filters", SemanticsFiltersButton);

package/build/components/ui/widgets/Zoom.js

@@ -0,0 +1,84 @@
+import { LitElement, html } from "lit";
+import { PSV_ANIM_DURATION, PSV_DEFAULT_ZOOM } from "../Photo.js";
+import { PSV_ZOOM_DELTA } from "../../core/PhotoViewer.js";
+import { fa, onceParentAvailable } from "../../../utils/widgets.js";
+import { faMinus, faPlus } from "@fortawesome/free-solid-svg-icons";
+import ButtonGroupStyles from "../ButtonGroup.css" with { type: "css" };
+document.adoptedStyleSheets.push(ButtonGroupStyles);
+
+/**
+ * Widget for +/- zoom on PSV or Map.
+ * @class Panoramax.components.ui.widgets.Zoom
+ * @element pnx-widget-zoom
+ * @extends [lit.LitElement](https://lit.dev/docs/api/LitElement/)
+ * @example
+ * ```html
+ * <pnx-widget-zoom _parent=${viewer} />
+ * ```
+ */
+export default class Zoom extends LitElement {
+	/** @private */
+	static properties = {
+		_lastWantedZoom: {state: true},
+	};
+
+	/** @private */
+	createRenderRoot() {
+		return this;
+	}
+
+	/** @private */
+	connectedCallback() {
+		super.connectedCallback();
+		onceParentAvailable(this).then(() => this._parent?.oncePSVReady?.().then(() => {
+			this._lastWantedZoom = this._parent?.psv?.getZoomLevel() || PSV_DEFAULT_ZOOM;
+		}));
+	}
+
+	/** @private */
+	_onClick(e, zoomIn) {
+		if(this._parent.map && this._parent.isMapWide()) {
+			if(zoomIn) { this._parent.map.zoomIn({}, {originalEvent: e}); }
+			else { this._parent.map.zoomOut({}, {originalEvent: e}); }
+		}
+		else {
+			if(this._parent.lastPsvAnim) { this._parent.lastPsvAnim.cancel(); }
+			const goToZoom = zoomIn ?
+				Math.min(100, this._lastWantedZoom + PSV_ZOOM_DELTA)
+				: Math.max(0, this._lastWantedZoom - PSV_ZOOM_DELTA);
+			this._parent.lastPsvAnim = this._parent.psv.animate({
+				speed: PSV_ANIM_DURATION,
+				zoom: goToZoom
+			});
+			this._lastWantedZoom = goToZoom;
+		}
+	}
+
+	/** @private */
+	render() {
+		return html`
+			<pnx-button-group
+				id="pnx-widget-zoom"
+				dir="column"
+				size="xl"
+				class="pnx-mobile-hidden pnx-print-hidden"
+			>
+				<pnx-button
+					id="pnx-zoom-in"
+					kind="superflat"
+					title=${this._parent?._t.pnx.zoomIn}
+					@click=${e => this._onClick(e, true)}
+				>${fa(faPlus)}</pnx-button>
+
+				<pnx-button
+					id="pnx-zoom-out"
+					kind="superflat"
+					title=${this._parent?._t.pnx.zoomOut}
+					@click=${e => this._onClick(e, false)}
+				>${fa(faMinus)}</pnx-button>
+			</pnx-button-group>
+		`;
+	}
+}
+
+customElements.define("pnx-widget-zoom", Zoom);

package/build/components/ui/widgets/index.js

@@ -0,0 +1,16 @@
+/**
+ * Pre-assembled UI pieces components
+ * @module Panoramax:components:ui:widgets
+ */
+
+export {default as CopyCoordinates} from "./CopyCoordinates.js";
+export {default as GeoSearch} from "./GeoSearch.js";
+export {default as Legend} from "./Legend.js";
+export {default as LevelSelect} from "./LevelSelect.js";
+export {default as MapFiltersButton} from "./MapFiltersButton.js";
+export {default as MapLayersButton} from "./MapLayersButton.js";
+export {default as OSMEditors} from "./OSMEditors.js";
+export {default as PictureLegendActions} from "./PictureLegendActions.js";
+export {default as Player} from "./Player.js";
+export {default as SemanticsFiltersButton} from "./SemanticsFiltersButton.js";
+export {default as Zoom} from "./Zoom.js";

package/build/components/ui/widgets/index_photoviewer.js

@@ -0,0 +1,7 @@
+// Lightweight export for PhotoViewer
+export {default as CopyCoordinates} from "./CopyCoordinates.js";
+export {default as Legend} from "./Legend.js";
+export {default as OSMEditors} from "./OSMEditors.js";
+export {default as PictureLegendActions} from "./PictureLegendActions.js";
+export {default as Player} from "./Player.js";
+export {default as Zoom} from "./Zoom.js";

package/build/esm/components/core/Basic.js

@@ -9,7 +9,7 @@ import BasicStyles from "./Basic.css" with { type: "css" };
 document.adoptedStyleSheets.push(AtkinsonStyles);
 document.adoptedStyleSheets.push(BasicStyles);
 
-const __COMMIT_HASH__ = "d720651";
+const __COMMIT_HASH__ = "d26305d";
 const __PACKAGE_VERSION__ = "5.0.0";
 const __PACKAGE_ISSUES_URL__ = "https://gitlab.com/panoramax/clients/web-viewer/-/work_items";
 

package/build/img/arrow_360.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="48"
+   height="48"
+   viewBox="0 0 48 48"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <path
+     style="fill:#ffcc80;fill-opacity:1;stroke:#ffffff;stroke-width:2.63736;stroke-dasharray:none;stroke-opacity:1"
+     d="M 24 1.3183594 A 22.68132 22.68132 0 0 0 1.3183594 24 A 22.68132 22.68132 0 0 0 24 46.681641 A 22.68132 22.68132 0 0 0 46.681641 24 A 22.68132 22.68132 0 0 0 24 1.3183594 z M 24 14.021484 A 9.9777565 9.9777565 0 0 1 33.978516 24 A 9.9777565 9.9777565 0 0 1 24 33.978516 A 9.9777565 9.9777565 0 0 1 14.021484 24 A 9.9777565 9.9777565 0 0 1 24 14.021484 z " />
+  <path
+     style="fill:#bf360c;fill-opacity:1;stroke:#ffffff;stroke-width:2.5;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="M 24 1.2421875 A 22.594107 22.594107 0 0 0 8.0214844 7.859375 L 17.042969 16.882812 A 9.9777565 9.9777565 0 0 1 24 14.021484 A 9.9777565 9.9777565 0 0 1 30.974609 16.867188 L 39.978516 7.8632812 A 22.594107 22.594107 0 0 0 24 1.2421875 z " />
+</svg>

package/build/img/arrow_flat.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="48"
+   height="48"
+   viewBox="0 0 48 48"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <path
+     style="fill:#bf360c;fill-opacity:1;stroke:#ffffff;stroke-width:2.50003;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="M 24 1.2421875 A 22.594107 22.594107 0 0 0 8.0214844 7.859375 L 17.042969 16.882812 A 9.9777565 9.9777565 0 0 1 24 14.021484 A 9.9777565 9.9777565 0 0 1 30.974609 16.867188 L 39.978516 7.8632812 A 22.594107 22.594107 0 0 0 24 1.2421875 z " />
+</svg>

package/build/img/arrow_triangle.svg

@@ -0,0 +1,9 @@
+<svg
+	viewBox="0 0 64 64"
+	width="64" height="64"
+	xmlns="http://www.w3.org/2000/svg"
+	xmlns:svg="http://www.w3.org/2000/svg">
+<path
+	d="M 27.359486,12.65513 1.4316349,43.49917 c -3.2999082,3.906014 -0.53876046,9.96707 4.6468097,9.96707 H 57.934146 c 5.118225,0 7.946718,-5.993711 4.64681,-9.96707 L 36.653105,12.65513 c -2.424422,-2.8284931 -6.869197,-2.8284931 -9.293619,0 z"
+	style="fill: currentColor;fill-opacity:1;stroke-width:0.673451" />
+</svg>

package/build/img/arrow_turn.svg

@@ -0,0 +1,8 @@
+<svg viewBox="0 0 64 192" width="64" height="192" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+<circle
+	cx="32"
+	cy="32"
+	r="29.897806"
+	style="fill: currentColor;fill-opacity:1;stroke:#ffffff;stroke-width:4.20439;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+<path d="m 34.279873,20.262171 6.711442,6.714294 c 0.891465,0.891465 2.339986,0.891465 3.231451,0 0.891466,-0.891465 0.891466,-2.339985 0,-3.23145 -9.662902,-9.665829 -3.794285,-3.794286 -8.180297,-8.180298 -1.071396,-1.074322 -2.525696,-1.677165 -4.039972,-1.677165 -1.517129,0 -2.968576,0.602858 -4.042825,1.677165 l -8.180298,8.180298 c -0.894317,0.891465 -0.894317,2.339986 0,3.23145 0.891466,0.891465 2.339987,0.891465 3.231452,0 l 6.697106,-6.694253 v 27.703943 c 0,0 -0.109706,2.126292 2.285971,2.126292 2.395676,0 2.28597,-2.126292 2.28597,-2.126292 z" style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke-width:0.731429" />
+</svg>