@panoramax/web-viewer 3.2.3-develop-83778bdd → 3.2.3-develop-64f445f0

package/docs/index.md

@@ -83,6 +83,15 @@ Once ready, you can create for example a viewer. We use web components to do so,
 
 [Many options are available to configure it finely](./reference/components/core/Viewer.md).
 
+You may also add some CSS to make sure your component has proper dimensions:
+
+```css
+pnx-viewer {
+	width: 300px;
+	height: 250px;
+}
+```
+
 Beyond classic viewer, other widgets are available and [can be tested online](https://viewer.geovisio.fr/).
 
 __Coverage map__

package/docs/reference/components/core/CoverageMap.md

@@ -35,11 +35,14 @@
 ### new CoverageMap()
 Coverage Map is a basic map showing Panoramax coverage.
 
+Make sure to set width/height through CSS for proper display.
+
 **Example**  
 ```html
 <pnx-coverage-map
   endpoint="https://panoramax.openstreetmap.fr/"
   map='{"bounds": [[-73.9876, 40.7661], [-73.9397, 40.8002]]}'
+  style="width: 300px; height: 250px"
 />
 ```
 <a name="Panoramax.components.core.CoverageMap+properties"></a>

package/docs/reference/components/core/Editor.md

@@ -38,10 +38,13 @@
 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.
+
 **Example**  
 ```html
 <pnx-editor
   endpoint="https://panoramax.openstreetmap.fr/"
+  style="width: 300px; height: 250px"
 />
 ```
 <a name="Panoramax.components.core.Editor+properties"></a>

package/docs/reference/components/core/PhotoViewer.md

@@ -56,16 +56,20 @@ This component has a [CorneredGrid](../layout/CorneredGrid.md/#Panoramax.compone
 
 If you need a viewer with map, checkout [Viewer component](Viewer.md/#Panoramax.components.core.Viewer).
 
+Make sure to set width/height through CSS for proper display.
+
 **Example**  
 ```html
 <!-- Basic example -->
 <pnx-photo-viewer
   endpoint="https://panoramax.openstreetmap.fr/"
+  style="width: 300px; height: 250px"
 />
 
 <!-- With slotted widgets -->
 <pnx-photo-viewer
   endpoint="https://panoramax.openstreetmap.fr/"
+  style="width: 300px; height: 250px"
 >
   <p slot="top-right">My custom text</p>
 </pnx-photo-viewer>
@@ -73,6 +77,7 @@ If you need a viewer with map, checkout [Viewer component](Viewer.md/#Panoramax.
 <!-- With only your custom widgets -->
 <pnx-photo-viewer
   endpoint="https://panoramax.openstreetmap.fr/"
+  style="width: 300px; height: 250px"
   widgets="false"
 >
   <p slot="top-right">My custom text</p>

package/docs/reference/components/core/Viewer.md

@@ -61,16 +61,20 @@ This component has a [CorneredGrid](../layout/CorneredGrid.md/#Panoramax.compone
 
 If you need a viewer without map, checkout [Photo Viewer component](PhotoViewer.md/#Panoramax.components.core.PhotoViewer).
 
+Make sure to set width/height through CSS for proper display.
+
 **Example**  
 ```html
 <!-- Basic example -->
 <pnx-viewer
   endpoint="https://panoramax.openstreetmap.fr/"
+  style="width: 300px; height: 250px"
 />
 
 <!-- With slotted widgets -->
 <pnx-viewer
   endpoint="https://panoramax.openstreetmap.fr/"
+  style="width: 300px; height: 250px"
 >
   <p slot="top-right">My custom text</p>
 </pnx-viewer>
@@ -78,6 +82,7 @@ If you need a viewer without map, checkout [Photo Viewer component](PhotoViewer.
 <!-- With only your custom widgets -->
 <pnx-viewer
   endpoint="https://panoramax.openstreetmap.fr/"
+  style="width: 300px; height: 250px"
   widgets="false"
 >
   <p slot="top-right">My custom text</p>
@@ -86,6 +91,7 @@ If you need a viewer without map, checkout [Photo Viewer component](PhotoViewer.
 <!-- With map options -->
 <pnx-viewer
   endpoint="https://panoramax.openstreetmap.fr/"
+  style="width: 300px; height: 250px"
   map="{'maxZoom': 15, 'background': 'aerial', 'raster': '...'}"
 />
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panoramax/web-viewer",
-  "version": "3.2.3-develop-83778bdd",
+  "version": "3.2.3-develop-64f445f0",
   "description": "Panoramax web viewer for geolocated pictures",
   "main": "build/index.js",
   "author": "Panoramax team",

package/src/components/core/CoverageMap.js

@@ -8,6 +8,8 @@ import { default as InitParameters, alterMapState } from "../../utils/InitParame
 
 /**
  * Coverage Map is a basic map showing Panoramax coverage.
+ * 
+ * Make sure to set width/height through CSS for proper display.
  * @class Panoramax.components.core.CoverageMap
  * @element pnx-coverage-map
  * @extends Panoramax.components.core.Basic
@@ -22,6 +24,7 @@ import { default as InitParameters, alterMapState } from "../../utils/InitParame
  * <pnx-coverage-map
  *   endpoint="https://panoramax.openstreetmap.fr/"
  *   map='{"bounds": [[-73.9876, 40.7661], [-73.9397, 40.8002]]}'
+ *   style="width: 300px; height: 250px"
  * />
  * ```
  */
@@ -54,9 +57,6 @@ export default class CoverageMap extends Basic {
 			this._initParams = new InitParameters(InitParameters.GetComponentProperties(CoverageMap, this));
 			this._initMap();
 		});
-
-		// Events handlers
-		this.addEventListener("select", this._onSelect.bind(this));
 	}
 
 	getClassName() {
@@ -103,13 +103,16 @@ export default class CoverageMap extends Basic {
 		this.map = new MyMap(this, this._mapContainer, Object.assign({}, this._initParams.getMapInit(), { hash: true }));
 		this.map.addControl(new NavigationControl({ showCompass: false }));
 		this.loader.setAttribute("value", 70);
+
+		this.addEventListener("select", this._onSelect.bind(this));
+		this.map.on("picture-click", e => this.select(e.seqId, e.picId));
+		this.map.on("sequence-click", e => this.select(e.seqId));
+
 		this.map.waitForEnoughMapLoaded().then(() => {
 			alterMapState(this.map, this._initParams.getMapPostInit());
 			this.map.reloadLayersStyles();
 			this.loader.dismiss();
 		});
-		this.map.on("picture-click", e => this.select(e.seqId, e.picId));
-		this.map.on("sequence-click", e => this.select(e.seqId));
 	}
 
 	/**

package/src/components/core/Editor.js

@@ -17,6 +17,8 @@ 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.
  * @class Panoramax.components.core.Editor
  * @element pnx-editor
  * @extends Panoramax.components.core.Basic
@@ -31,6 +33,7 @@ const LAYER_HEADING_ID = "sequence-headings";
  * ```html
  * <pnx-editor
  *   endpoint="https://panoramax.openstreetmap.fr/"
+ *   style="width: 300px; height: 250px"
  * />
  * ```
  */

package/src/components/core/PhotoViewer.js

@@ -20,6 +20,8 @@ const PSV_MOVE_DELTA = Math.PI / 6;
  * This component has a [CorneredGrid](#Panoramax.components.layout.CorneredGrid) layout, you can use directly any slot element to pass custom widgets.
  * 
  * If you need a viewer with map, checkout [Viewer component](#Panoramax.components.core.Viewer).
+ * 
+ * Make sure to set width/height through CSS for proper display.
  * @class Panoramax.components.core.PhotoViewer
  * @element pnx-photo-viewer
  * @extends Panoramax.components.core.Basic
@@ -43,11 +45,13 @@ const PSV_MOVE_DELTA = Math.PI / 6;
  * <!-- Basic example -->
  * <pnx-photo-viewer
  *   endpoint="https://panoramax.openstreetmap.fr/"
+ *   style="width: 300px; height: 250px"
  * />
  * 
  * <!-- With slotted widgets -->
  * <pnx-photo-viewer
  *   endpoint="https://panoramax.openstreetmap.fr/"
+ *   style="width: 300px; height: 250px"
  * >
  *   <p slot="top-right">My custom text</p>
  * </pnx-photo-viewer>
@@ -55,6 +59,7 @@ const PSV_MOVE_DELTA = Math.PI / 6;
  * <!-- With only your custom widgets -->
  * <pnx-photo-viewer
  *   endpoint="https://panoramax.openstreetmap.fr/"
+ *   style="width: 300px; height: 250px"
  *   widgets="false"
  * >
  *   <p slot="top-right">My custom text</p>
@@ -118,7 +123,7 @@ export default class PhotoViewer extends Basic {
 
 	/** @private */
 	_initWidgets() {
-		if(this._initParams.getParentInit().widgets !== "false") {
+		if(this._initParams.getParentPostInit().widgets !== "false") {
 			if(!this.isWidthSmall()) {
 				this.grid.appendChild(createWebComp("pnx-widget-zoom", {
 					slot: "bottom-right",

package/src/components/core/Viewer.js

@@ -26,6 +26,8 @@ const MAP_MOVE_DELTA = 100;
  * This component has a [CorneredGrid](#Panoramax.components.layout.CorneredGrid) layout, you can use directly any slot element to pass custom widgets.
  * 
  * If you need a viewer without map, checkout [Photo Viewer component](#Panoramax.components.core.PhotoViewer).
+ * 
+ * Make sure to set width/height through CSS for proper display.
  * @class Panoramax.components.core.Viewer
  * @element pnx-viewer
  * @extends Panoramax.components.core.PhotoViewer
@@ -52,11 +54,13 @@ const MAP_MOVE_DELTA = 100;
  * <!-- Basic example -->
  * <pnx-viewer
  *   endpoint="https://panoramax.openstreetmap.fr/"
+ *   style="width: 300px; height: 250px"
  * />
  * 
  * <!-- With slotted widgets -->
  * <pnx-viewer
  *   endpoint="https://panoramax.openstreetmap.fr/"
+ *   style="width: 300px; height: 250px"
  * >
  *   <p slot="top-right">My custom text</p>
  * </pnx-viewer>
@@ -64,6 +68,7 @@ const MAP_MOVE_DELTA = 100;
  * <!-- With only your custom widgets -->
  * <pnx-viewer
  *   endpoint="https://panoramax.openstreetmap.fr/"
+ *   style="width: 300px; height: 250px"
  *   widgets="false"
  * >
  *   <p slot="top-right">My custom text</p>
@@ -72,6 +77,7 @@ const MAP_MOVE_DELTA = 100;
  * <!-- With map options -->
  * <pnx-viewer
  *   endpoint="https://panoramax.openstreetmap.fr/"
+ *   style="width: 300px; height: 250px"
  *   map="{'maxZoom': 15, 'background': 'aerial', 'raster': '...'}"
  * />
  * ```
@@ -133,7 +139,7 @@ export default class Viewer extends PhotoViewer {
 
 	/** @private */
 	_initWidgets() {
-		if(this._initParams.getParentInit().widgets !== "false") {
+		if(this._initParams.getParentPostInit().widgets !== "false") {
 			this.grid.appendChild(createWebComp("pnx-widget-zoom", {
 				slot: this.isWidthSmall() ? "top-left" : "bottom-right",
 				class: this.isWidthSmall() ? "pnx-only-map pnx-print-hidden" : "pnx-print-hidden",

package/src/utils/map.js

@@ -136,6 +136,9 @@ export function combineStyles(parent, options) {
 		style.layers = style.layers.concat(options.supplementaryStyle.layers || []);
 	}
 
+	// Fix for empty layers causing sorting issues
+	style.layers = style.layers.filter(l => l.id);
+
 	// Aerial imagery background
 	if(options.raster) {
 		style.sources["pnx-aerial"] = options.raster;

package/tests/components/core/BasicMock.js

@@ -6,6 +6,7 @@ jest.mock("../../../src/components/core/Basic", () => (
 			this.api = {
 				getMapStyle: () => ({}),
 				_getMapRequestTransform: () => ({}),
+				_endpoints: {},
 			};
 			this._t = { maplibre: {}, psv: {} };
 		}

package/tests/components/core/PhotoViewer.test.js

@@ -7,6 +7,43 @@ global.console = { info: jest.fn(), error: jest.fn(), warn: jest.fn(), log: glob
 beforeEach(() => comp = new PhotoViewer());
 afterEach(() => jest.clearAllMocks());
 
+
+describe("_initWidgets", () => {
+	let initParamsMock;
+
+	beforeEach(() => {
+		comp.grid.appendChild = jest.fn();
+
+		// Mock the return value of getParentPostInit
+		initParamsMock = {
+			widgets: "true",
+			focus: "pic",
+			picture: "somePicture",
+		};
+		comp._createInitParamsHandler();
+		comp._initParams.getParentPostInit = jest.fn();
+		comp._initParams.getParentPostInit.mockReturnValue(initParamsMock);
+	});
+
+	it("should not add widgets if widgets is false", () => {
+		initParamsMock.widgets = "false";
+		comp._initWidgets();
+		expect(comp.grid.appendChild).not.toHaveBeenCalled();
+	});
+
+	it("should handle widgets if width is not small", () => {
+		comp.isWidthSmall = () => false;
+		comp._initWidgets();
+		expect(comp.grid.appendChild).toMatchSnapshot();
+	});
+
+	it("should handle widgets if width is small", () => {
+		comp.isWidthSmall = () => true;
+		comp._initWidgets();
+		expect(comp.grid.appendChild).toMatchSnapshot();
+	});
+});
+
 describe("getClassName", () => {
 	it("works", () => {
 		expect(comp.getClassName()).toBe("PhotoViewer");

package/tests/components/core/Viewer.test.js

@@ -1,12 +1,72 @@
 import Viewer from "../../../src/components/core/Viewer";
 import "./BasicMock";
 
+jest.mock("../../../src/components/core/PhotoViewer", () => (
+	class PhotoViewer extends EventTarget {
+		constructor() {
+			super();
+			this.loader = { setAttribute: jest.fn() };
+			this.api = {
+				getMapStyle: () => ({}),
+				_getMapRequestTransform: () => ({}),
+				_endpoints: {},
+			};
+			this._t = { maplibre: {}, psv: {} };
+			this.grid = { appendChild: jest.fn() };
+		}
+		getAttribute() { return null; }
+		isWidthSmall() { return false; }
+		getSubComponentsNames() {
+			return ["loader", "api", "psv", "grid", "popup", "urlHandler"];
+		}
+		onceAPIReady() {
+			return Promise.resolve();
+		}
+	}
+));
+
 let comp;
 global.console = { info: jest.fn(), error: jest.fn(), warn: jest.fn(), log: global.console.log };
 
 beforeEach(() => comp = new Viewer());
 afterEach(() => jest.clearAllMocks());
 
+describe("_initWidgets", () => {
+	let initParamsMock;
+
+	beforeEach(() => {
+		comp.grid.appendChild = jest.fn();
+
+		// Mock the return value of getParentPostInit
+		initParamsMock = {
+			widgets: "true",
+			focus: "pic",
+			picture: "somePicture",
+		};
+		comp._createInitParamsHandler();
+		comp._initParams.getParentPostInit = jest.fn();
+		comp._initParams.getParentPostInit.mockReturnValue(initParamsMock);
+	});
+
+	it("should not add widgets if widgets is false", () => {
+		initParamsMock.widgets = "false";
+		comp._initWidgets();
+		expect(comp.grid.appendChild).not.toHaveBeenCalled();
+	});
+
+	it("should handle widgets if width is not small", () => {
+		comp.isWidthSmall = () => false;
+		comp._initWidgets();
+		expect(comp.grid.appendChild).toMatchSnapshot();
+	});
+
+	it("should handle widgets if width is small", () => {
+		comp.isWidthSmall = () => true;
+		comp._initWidgets();
+		expect(comp.grid.appendChild).toMatchSnapshot();
+	});
+});
+
 describe("getClassName", () => {
 	it("works", () => {
 		expect(comp.getClassName()).toBe("Viewer");

package/tests/components/core/__snapshots__/PhotoViewer.test.js.snap

@@ -0,0 +1,91 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`_initWidgets should handle widgets if width is not small 1`] = `
+[MockFunction] {
+  "calls": Array [
+    Array [
+      <pnx-widget-zoom
+        class="pnx-print-hidden"
+        slot="bottom-right"
+      />,
+    ],
+    Array [
+      <pnx-widget-share
+        class="pnx-print-hidden"
+        slot="bottom-right"
+      />,
+    ],
+    Array [
+      <pnx-widget-legend
+        focus="pic"
+        picture="somePicture"
+        slot="top-left"
+      />,
+    ],
+    Array [
+      <pnx-widget-player
+        class="pnx-only-psv pnx-print-hidden"
+        slot="top"
+      />,
+    ],
+  ],
+  "results": Array [
+    Object {
+      "type": "return",
+      "value": undefined,
+    },
+    Object {
+      "type": "return",
+      "value": undefined,
+    },
+    Object {
+      "type": "return",
+      "value": undefined,
+    },
+    Object {
+      "type": "return",
+      "value": undefined,
+    },
+  ],
+}
+`;
+
+exports[`_initWidgets should handle widgets if width is small 1`] = `
+[MockFunction] {
+  "calls": Array [
+    Array [
+      <pnx-widget-share
+        class="pnx-print-hidden"
+        slot="bottom-right"
+      />,
+    ],
+    Array [
+      <pnx-widget-legend
+        focus="pic"
+        picture="somePicture"
+        slot="top"
+      />,
+    ],
+    Array [
+      <pnx-widget-player
+        class="pnx-only-psv pnx-print-hidden"
+        slot="top"
+      />,
+    ],
+  ],
+  "results": Array [
+    Object {
+      "type": "return",
+      "value": undefined,
+    },
+    Object {
+      "type": "return",
+      "value": undefined,
+    },
+    Object {
+      "type": "return",
+      "value": undefined,
+    },
+  ],
+}
+`;

package/tests/components/core/__snapshots__/Viewer.test.js.snap

@@ -0,0 +1,163 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`_initWidgets should handle widgets if width is not small 1`] = `
+[MockFunction] {
+  "calls": Array [
+    Array [
+      <pnx-widget-zoom
+        class="pnx-print-hidden"
+        slot="bottom-right"
+      />,
+    ],
+    Array [
+      <pnx-widget-share
+        class="pnx-print-hidden"
+        slot="bottom-right"
+      />,
+    ],
+    Array [
+      <pnx-widget-legend
+        focus="pic"
+        picture="somePicture"
+        slot="top-left"
+      />,
+    ],
+    Array [
+      <pnx-widget-player
+        class="pnx-only-psv pnx-print-hidden"
+        slot="top"
+      />,
+    ],
+    Array [
+      <pnx-widget-geosearch
+        class="pnx-only-map pnx-print-hidden"
+        slot="top-left"
+      />,
+    ],
+    Array [
+      <pnx-widget-mapfilters
+        class="pnx-only-map pnx-print-hidden"
+        slot="top-left"
+        user-search="true"
+      />,
+    ],
+    Array [
+      <pnx-widget-maplayers
+        class="pnx-only-map pnx-print-hidden"
+        slot="top-right"
+      />,
+    ],
+  ],
+  "results": Array [
+    Object {
+      "type": "return",
+      "value": undefined,
+    },
+    Object {
+      "type": "return",
+      "value": undefined,
+    },
+    Object {
+      "type": "return",
+      "value": undefined,
+    },
+    Object {
+      "type": "return",
+      "value": undefined,
+    },
+    Object {
+      "type": "return",
+      "value": undefined,
+    },
+    Object {
+      "type": "return",
+      "value": undefined,
+    },
+    Object {
+      "type": "return",
+      "value": undefined,
+    },
+  ],
+}
+`;
+
+exports[`_initWidgets should handle widgets if width is small 1`] = `
+[MockFunction] {
+  "calls": Array [
+    Array [
+      <pnx-widget-zoom
+        class="pnx-only-map pnx-print-hidden"
+        slot="top-left"
+      />,
+    ],
+    Array [
+      <pnx-widget-share
+        class="pnx-print-hidden"
+        slot="bottom-right"
+      />,
+    ],
+    Array [
+      <pnx-widget-legend
+        focus="pic"
+        picture="somePicture"
+        slot="top"
+      />,
+    ],
+    Array [
+      <pnx-widget-player
+        class="pnx-only-psv pnx-print-hidden"
+        slot="top"
+      />,
+    ],
+    Array [
+      <pnx-widget-geosearch
+        class="pnx-only-map pnx-print-hidden"
+        slot="top-right"
+      />,
+    ],
+    Array [
+      <pnx-widget-mapfilters
+        class="pnx-only-map pnx-print-hidden"
+        slot="top-right"
+        user-search="true"
+      />,
+    ],
+    Array [
+      <pnx-widget-maplayers
+        class="pnx-only-map pnx-print-hidden"
+        slot="top-right"
+      />,
+    ],
+  ],
+  "results": Array [
+    Object {
+      "type": "return",
+      "value": undefined,
+    },
+    Object {
+      "type": "return",
+      "value": undefined,
+    },
+    Object {
+      "type": "return",
+      "value": undefined,
+    },
+    Object {
+      "type": "return",
+      "value": undefined,
+    },
+    Object {
+      "type": "return",
+      "value": undefined,
+    },
+    Object {
+      "type": "return",
+      "value": undefined,
+    },
+    Object {
+      "type": "return",
+      "value": undefined,
+    },
+  ],
+}
+`;