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

package/build/components/core/Editor.js

@@ -1,398 +0,0 @@
-import Basic from "./Basic.js";
-import Map from "../ui/Map.js";
-import Photo from "../ui/Photo.js";
-import { apiFeatureToPSVNode } from "../../utils/picture.js";
-import { linkMapAndPhoto } from "../../utils/map.js";
-import { SYSTEM as PSSystem } from "@photo-sphere-viewer/core";
-import { createWebComp } from "../../utils/widgets.js";
-import MapStyleComposer from "../../utils/MapStyleComposer.js";
-import { MapTiles } from "../../utils/services.js";
-import EditorStyles from "./Editor.css" with { type: "css" };
-document.adoptedStyleSheets.push(EditorStyles);
-
-const LAYER_HEADING_ID = "sequence-headings";
-
-/**
- * Editor allows to focus on a single sequence, and preview what you edits would look like.
- * It shows both picture and map.
- *
- * Make sure to set width/height through CSS for proper display.
- *
- * This component has a [CorneredGrid](#Panoramax.components.layout.CorneredGrid) layout, you can use directly any slot element to pass custom widgets.
- * @class Panoramax.components.core.Editor
- * @element pnx-editor
- * @extends Panoramax.components.core.Basic
- * @fires Panoramax.components.core.Basic#select
- * @fires Panoramax.components.core.Basic#ready
- * @fires Panoramax.components.core.Basic#broken
- * @property {Panoramax.components.ui.Loader} loader The loader screen
- * @property {Panoramax.utils.API} api The API manager
- * @property {Panoramax.components.ui.Map} map The MapLibre GL map itself
- * @property {Panoramax.utils.MapStyleComposer} mapStyleComposer The map style helper
- * @property {Panoramax.components.ui.Photo} psv The Photo Sphere Viewer component itself
- * @property {Panoramax.components.layout.CorneredGrid} grid The grid layout manager
- * @slot `top-left` The top-left corner
- * @slot `top` The top middle corner
- * @slot `top-right` The top-right corner
- * @slot `bottom-left` The bottom-left corner
- * @slot `bottom` The bottom middle corner
- * @slot `bottom-right` The bottom-right corner
- * @example
- * ```html
- * <!-- Basic example -->
- * <pnx-editor
- *   endpoint="https://panoramax.openstreetmap.fr/"
- *   style="width: 300px; height: 250px"
- * />
- *
- * <!-- With slotted widgets -->
- * <pnx-editor
- *   endpoint="https://panoramax.openstreetmap.fr/"
- *   style="width: 300px; height: 250px"
- * >
- *   <p slot="top-right">My custom text</p>
- * </pnx-editor>
- * ```
- */
-export default class Editor extends Basic {
-	/**
-	 * Component properties. All of [Basic properties](#Panoramax.components.core.Basic+properties) are available as well.
-	 * @memberof Panoramax.components.core.Editor#
-	 * @mixes Panoramax.components.core.Basic#properties
-	 * @type {Object}
-	 * @property {string} endpoint URL to API to use (must be a [STAC API](https://github.com/radiantearth/stac-api-spec/blob/main/overview.md))
-	 * @property {string} [picture] The picture ID to display
-	 * @property {string} [sequence] The sequence ID of the picture displayed
-	 * @property {object} [fetch-options] Set custom options for fetch calls made against API ([same syntax as fetch options parameter](https://developer.mozilla.org/en-US/docs/Web/API/fetch#parameters))
-	 * @property {string|object} [map-style] The map's MapLibre style. This can be an a JSON object conforming to the schema described in the [MapLibre Style Specification](https://maplibre.org/maplibre-style-spec/), or a URL string pointing to one. Defaults to OSM vector tiles.
-	 * @property {string} [lang] To override language used for labels. Defaults to using user's preferred languages.
-	 * @property {object} [raster] The MapLibre raster source for aerial background. This must be a JSON object following [MapLibre raster source definition](https://maplibre.org/maplibre-style-spec/sources/#raster).
-	 * @property {string} [background=streets] Choose default map background to display (streets or aerial, if raster aerial background available). Defaults to street.
-	 */
-	static properties = {
-		raster: {converter: Basic.GetJSONConverter()},
-		background: {type: String},
-		"map-style": {type: String},
-		...Basic.properties
-	};
-
-	constructor() {
-		super();
-
-		this.raster = null;
-		this.background = "streets";
-		this["map-style"] = this.getAttribute("map-style") || MapTiles();
-
-		// Check if mapstyle is not a unparsed JSON
-		try {
-			this["map-style"] = JSON.parse(this["map-style"]);
-		} catch(e) { /* Empty */ }
-
-		// Setup map styles and sources
-		this.mapStyleComposer = new MapStyleComposer(this);
-		this.mapStyleComposer.addBasemap("streets", this["map-style"], true);
-
-		// Create sub-containers
-		this._psvContainer = document.createElement("div");
-		this._psvContainer.setAttribute("slot", "bg");
-		this._mapContainer = document.createElement("div");
-		this._mapContainer.setAttribute("slot", "bg");
-
-		this.grid = createWebComp("pnx-cornered-grid");
-		this.grid.appendChild(this._psvContainer);
-		this.grid.appendChild(this._mapContainer);
-
-		this.onceAPIReady().then(() => {
-			this.loader.setAttribute("value", 30);
-
-			// Check sequence ID is set
-			if(!this.sequence) { this.loader.dismiss({}, "No sequence is selected"); }
-
-			// Events
-			this.addEventListener("select", this._onSelect.bind(this));
-
-			this._initPSV();
-			this._initMap();
-		});
-	}
-
-	/** @private */
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this.map?.destroy();
-		this.psv?.destroy();
-	}
-
-	// eslint-disable-next-line class-methods-use-this
-	getClassName() {
-		return "Editor";
-	}
-
-	onceReady() {
-		if(this.map && this.psv && this.map.loaded?.()) {
-			return Promise.resolve();
-		}
-		else {
-			return new Promise(resolve => setTimeout(resolve, 100)).then(this.onceReady.bind(this));
-		}
-	}
-
-	connectedCallback() {
-		super.connectedCallback();
-
-		this._moveChildToGrid();
-		window.addEventListener("DOMContentLoaded", () => {
-			this._moveChildToGrid();
-		}, { once: true });
-
-		if(this.raster) {
-			const rasterLayerId = this.mapStyleComposer._createRasterBasemap(this.raster);
-			if(this.background === "aerial") { this.mapStyleComposer.switchBasemap(rasterLayerId); }
-		}
-	}
-
-	/** @private */
-	render() {
-		return [this.loader, this.grid];
-	}
-
-	getSubComponentsNames() {
-		return super.getSubComponentsNames().concat(["map", "psv", "grid", "mapStyleComposer"]);
-	}
-
-	/** @private */
-	_initPSV() {
-		try {
-			this.psv = new Photo(this, this._psvContainer);
-			this.psv._myVTour.datasource.nodeResolver = this._getNode.bind(this);
-			this.grid.appendChild(createWebComp("pnx-widget-player", {
-				slot: "top",
-				_parent: this,
-				class: "pnx-only-psv pnx-print-hidden",
-				size: "xl",
-				more: "never"
-			}));
-		}
-		catch(e) {
-			let err = !PSSystem.isWebGLSupported ? this._t.pnx.error_webgl : this._t.pnx.error_psv;
-			this.loader.dismiss(e, err);
-		}
-	}
-
-	/** @private */
-	_initMap() {
-		try {
-			this.map = new Map(this, this._mapContainer, {
-				background: this.background,
-				zoom: 15, // Hack to avoid _initMapPosition call
-				picMarkerDraggable: true,
-			});
-			linkMapAndPhoto(this);
-			this.loader.setAttribute("value", 50);
-			this._loadSequence();
-			this.map.once("load", () => {
-				if(this.mapStyleComposer.hasManyBasemaps()) { this._addMapBackgroundWidget(); }
-			});
-
-			// Override picMarker setRotation for heading preview
-			const oldRot = this.map._picMarker.setRotation.bind(this.map._picMarker);
-			this.map._picMarker.setRotation = h => {
-				h = this._lastRelHeading === undefined ? h : h + this._lastRelHeading - this.psv.getPictureRelativeHeading();
-				return oldRot(h);
-			};
-		}
-		catch(e) {
-			this.loader.dismiss(e, this._t.pnx.error_psv);
-		}
-	}
-
-	/**
-	 * Displays currently selected sequence on map
-	 * @private
-	 */
-	_loadSequence() {
-		this.loader.setAttribute("value", 60);
-		return this.api.getSequenceItems(this.sequence).then(seq => {
-			this.loader.setAttribute("value", 80);
-
-			// Create data source
-			this._sequenceData = seq.features;
-			const features = {
-				"type": "FeatureCollection",
-				"features": [
-					{
-						"id": this.sequence,
-						"type": "Feature",
-						"properties": {
-							"id": this.sequence,
-						},
-						"geometry": {
-							"type": "LineString",
-							"coordinates": seq.features.map(p => p.geometry.coordinates)
-						}
-					},
-					...seq.features.map(f => {
-						f.properties.id = f.id;
-						f.properties.sequences = [this.sequence];
-						return f;
-					})
-				]
-			};
-
-			// Add endpoint in style composer
-			this.map.once("styledata", () => this.loader.dismiss());
-			this.mapStyleComposer.addPanoramaxEndpoint("default", {
-				sources: {
-					geovisio: {
-						type: "geojson",
-						data: features,
-					}
-				}
-			}, true);
-
-			// Select picture if any
-			if(this.picture) {
-				const pic = seq.features.find(p => p.id === this.picture);
-				if(pic) {
-					this.select(this.sequence, this.picture, true);
-					this.map.jumpTo({ center: pic.geometry.coordinates, zoom: 18 });
-				}
-				else {
-					console.log("Picture with ID", pic, "was not found");
-				}
-			}
-			// Show area of sequence otherwise
-			else {
-				const bbox = [
-					...seq.features[0].geometry.coordinates,
-					...seq.features[0].geometry.coordinates
-				];
-
-				for(let i=1; i < seq.features.length; i++) {
-					const c = seq.features[i].geometry.coordinates;
-					if(c[0] < bbox[0]) { bbox[0] = c[0]; }
-					if(c[1] < bbox[1]) { bbox[1] = c[1]; }
-					if(c[0] > bbox[2]) { bbox[2] = c[0]; }
-					if(c[1] > bbox[3]) { bbox[3] = c[1]; }
-				}
-
-				this.map.fitBounds(bbox, {animate: false});
-			}
-		}).catch(e => this.loader.dismiss(e, this._t.pnx.error_api));
-	}
-
-	/**
-	 * Get the PSV node for wanted picture.
-	 *
-	 * @param {string} picId The picture ID
-	 * @returns The PSV node
-	 * @private
-	 */
-	_getNode(picId) {
-		const f = this._sequenceData.find(f => f.properties.id === picId);
-		const n = f ? apiFeatureToPSVNode(f, this._t, this._isInternetFast, undefined, u => this.api.cleanResourceURL(u)) : null;
-		return n;
-	}
-
-	/**
-	 * Creates the widget to switch between aerial and streets imagery
-	 * @private
-	 */
-	_addMapBackgroundWidget() {
-		// Container
-		const pnlLayers = createWebComp("pnx-map-background", {_parent: this, size: "sm", slot: "bottom-left"});
-		this.grid.appendChild(pnlLayers);
-	}
-
-	/** @private */
-	_moveChildToGrid() {
-		const slotContent = Array.from(this.querySelectorAll("[slot]"));
-
-		slotContent.forEach(n => {
-			// Add parent + translation for our components
-			if(n.tagName?.toLowerCase().startsWith("pnx-")) {
-				n._parent = this;
-				n._t = this._t;
-			}
-
-			this.grid.appendChild(n);
-		});
-	}
-
-	/**
-	 * Preview on map how the new relative heading would reflect on all pictures.
-	 * This doesn't change anything on API-side, it's just a preview.
-	 * @memberof Panoramax.components.core.Editor#
-	 * @param {number} [relHeading] The new relative heading compared to sequence path. In degrees, between -180 and 180 (0 = front, -90 = left, 90 = right). Set to null to remove preview.
-	 */
-	previewSequenceHeadingChange(relHeading) {
-		const layerExists = this.mapStyleComposer.layerRanges.dataOverlays[LAYER_HEADING_ID] !== undefined;
-		this.map._picMarkerPreview.remove();
-
-		// If no value set, remove layer
-		if(relHeading === undefined) {
-			delete this._lastRelHeading;
-			if(layerExists) {
-				this.mapStyleComposer.switchDataOverlayVisibility(LAYER_HEADING_ID, false);
-			}
-			// Update selected picture marker
-			if(this.picture) {
-				this.map._picMarker.setRotation(this.psv.getXY().x);
-			}
-			return;
-		}
-
-		this._lastRelHeading = relHeading;
-
-		// Create preview layer
-		if(!layerExists) {
-			this.mapStyleComposer.addDataOverlay(LAYER_HEADING_ID, { layers: [{
-				"id": LAYER_HEADING_ID,
-				"type": "symbol",
-				"source": "geovisio",
-				"layout": {
-					"icon-image": "pnx-marker",
-					"icon-overlap": "always",
-					"icon-size": 0.8,
-				},
-			}] }, true);
-		} else {
-			this.mapStyleComposer.switchDataOverlayVisibility(LAYER_HEADING_ID, true);
-		}
-
-		// Update selected picture marker
-		if(this.picture) {
-			this.map._picMarker.setRotation(this.psv.getXY().x);
-		}
-
-		this.mapStyleComposer.waitFor("dataOverlays", LAYER_HEADING_ID).then(() => {
-			// Change heading
-			const layer = this.mapStyleComposer.layerRanges.dataOverlays[LAYER_HEADING_ID];
-			const currentRelHeading = - this.psv.getPictureRelativeHeading();
-			layer.layers[0].layout["icon-rotate"] = ["+", ["get", "view:azimuth"], currentRelHeading, relHeading ];
-
-			// Skip selected picture and linestring geom
-			const filters = [["==", ["geometry-type"], "Point"]];
-			if(this.picture) { filters.push(["!=", ["get", "id"], this.picture]); }
-			layer.filter = ["all", ...filters];
-
-			this.mapStyleComposer.updateMapStyle();
-			setTimeout(() => {
-				this.map.setFilter(LAYER_HEADING_ID, ["all", ...filters]);
-			}, 100);
-		});
-	}
-
-	/**
-	 * Event handler for picture loading
-	 * @private
-	 */
-	_onSelect() {
-		// Update preview of heading change
-		if(this._lastRelHeading !== undefined) {
-			this.previewSequenceHeadingChange(this._lastRelHeading);
-		}
-	}
-}
-
-customElements.define("pnx-editor", Editor);

package/build/components/core/PhotoViewer.css

@@ -1,70 +0,0 @@
-pnx-photo-viewer {
-	position: relative;
-	display: block;
-}
-
-/* Maximized components */
-pnx-photo-viewer .pnx-psv {
-	position: absolute;
-	inset: 0;
-	z-index: 0;
-}
-
-/* No PSV loader */
-pnx-photo-viewer .psv-loader {
-	display: none;
-}
-
-/* Cornered grid layout */
-pnx-photo-viewer pnx-cornered-grid::part(corner-top-left),
-pnx-photo-viewer pnx-cornered-grid::part(corner-top),
-pnx-photo-viewer pnx-cornered-grid::part(corner-top-right),
-pnx-photo-viewer pnx-cornered-grid::part(corner-bottom-left),
-pnx-photo-viewer pnx-cornered-grid::part(corner-bottom),
-pnx-photo-viewer pnx-cornered-grid::part(corner-bottom-right) {
-	gap: 10px;
-	padding: 10px;
-}
-
-@media screen and (max-width: 576px) {
-	pnx-photo-viewer pnx-cornered-grid::part(corner-top-right) {
-		flex-direction: column;
-		align-items: flex-end;
-		justify-content: flex-start;
-	}
-
-	pnx-photo-viewer pnx-cornered-grid::part(corner-top-left) {
-		flex-direction: column;
-		align-items: flex-start;
-		justify-content: flex-start;
-	}
-}
-
-/* Hidden widgets on sequence play */
-pnx-photo-viewer.pnx-playing pnx-bottom-drawer,
-pnx-photo-viewer.pnx-playing pnx-widget-legend,
-pnx-photo-viewer.pnx-playing pnx-widget-zoom {
-	display: none;
-}
-
-/* Override legend positioning */
-@media screen and (min-width: 576px) {
-	pnx-photo-viewer pnx-widget-legend:not([light="true"]) {
-		position: absolute;
-		top: 10px;
-		width: 100%;
-	}
-}
-
-/* Hidden widgets on grid toggled */
-pnx-photo-viewer .psv-virtual-tour-arrows {
-	transition: opacity 0.25s ease-in-out;
-	opacity: 100%;
-}
-pnx-photo-viewer.pnx-grid-toggled .psv-virtual-tour-arrows {
-	opacity: 0%;
-}
-pnx-photo-viewer.pnx-grid-toggled .psv-virtual-tour-arrows button {
-	pointer-events: none;
-	cursor: unset;
-}