@panoramax/web-viewer 3.2.3 → 4.0.0-develop-39167b4d

package/tests/utils/utils.test.js

@@ -0,0 +1,288 @@
+import * as utils from "../../src/utils/utils";
+
+jest.mock("../../src/utils/map", () => ({
+	COLORS_HEX: {
+		SELECTED: 0x0000ff,
+	}
+}));
+
+describe("getGrade", () => {
+	it("works with null-like", () => {
+        expect(utils.getGrade(utils.QUALITYSCORE_RES_FLAT_VALUES, null)).toBeNull();
+        expect(utils.getGrade(utils.QUALITYSCORE_RES_FLAT_VALUES, undefined)).toBeNull();
+        expect(utils.getGrade(utils.QUALITYSCORE_RES_FLAT_VALUES, "")).toBeNull();
+    });
+
+	it("works with grade values", () => {
+        expect(utils.getGrade(utils.QUALITYSCORE_RES_FLAT_VALUES, 0)).toBe(1);
+        expect(utils.getGrade(utils.QUALITYSCORE_RES_FLAT_VALUES, 5)).toBe(1);
+        expect(utils.getGrade(utils.QUALITYSCORE_RES_FLAT_VALUES, 12)).toBe(2);
+        expect(utils.getGrade(utils.QUALITYSCORE_RES_FLAT_VALUES, 25)).toBe(3);
+        expect(utils.getGrade(utils.QUALITYSCORE_RES_FLAT_VALUES, 40)).toBe(4);
+    });
+});
+
+describe("getDistance", () => {
+	it("works", () => {
+		const p1 = [1,1];
+		const p2 = [2,2];
+		const res = utils.getDistance(p1, p2);
+		expect(res).toBe(Math.sqrt(2));
+	});
+});
+
+describe("svgToPSVLink", () => {
+    it("works", () => {
+        const base64Svg = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPjxjaXJjbGUgY3g9JzUnIGN5PSc1JyByPSc1JyBmaWxsPScjMDAwJy8+PC9zdmc+";
+        const fillColor = "red";
+        const result = utils.svgToPSVLink(base64Svg, fillColor);
+        
+        expect(result).toBeInstanceOf(HTMLButtonElement);
+        expect(result.classList.contains("pnx-psv-tour-arrows")).toBe(true);
+        expect(result.style.color).toBe(fillColor);
+        expect(result.querySelector("svg")).not.toBeNull();
+    });
+
+    it("works with invalid input", () => {
+        const invalidBase64Svg = "http://test.net/invalid_string";
+        const result = utils.svgToPSVLink(invalidBase64Svg, "blue");
+        
+        expect(result).toBeInstanceOf(HTMLImageElement);
+        expect(result.src).toBe(invalidBase64Svg);
+        expect(result.alt).toBe("");
+    });
+});
+
+describe("getAzimuth", () => {
+	it("works with 0 + NE", () => {
+		const pointDepart = [0, 0];
+		const pointArrivee = [1, 1];
+		const azimuth = utils.getAzimuth(pointDepart, pointArrivee);
+		expect(azimuth).toBe(45);
+	});
+
+	it("works with 0 + SE", () => {
+		const pointDepart = [0, 0];
+		const pointArrivee = [1, -1];
+		const azimuth = utils.getAzimuth(pointDepart, pointArrivee);
+		expect(azimuth).toBe(135);
+	});
+
+	it("works with 0 + N", () => {
+		const pointDepart = [0, 0];
+		const pointArrivee = [0, 1];
+		const azimuth = utils.getAzimuth(pointDepart, pointArrivee);
+		expect(azimuth).toBe(0);
+	});
+
+	it("works with 0 + S", () => {
+		const pointDepart = [0, 0];
+		const pointArrivee = [0, -1];
+		const azimuth = utils.getAzimuth(pointDepart, pointArrivee);
+		expect(azimuth).toBe(180);
+	});
+});
+
+describe("getRelativeHeading", () => {
+	it("should throw an error if no picture selected", () => {
+		expect(() => utils.getRelativeHeading()).toThrow("No picture selected");
+	});
+
+	it("should calculate relative heading correctly", () => {
+		const pictureMetadata = {
+			properties: { "view:azimuth": 30 },
+			sequence: { prevPic: "prevPictureId", nextPic: "nextPictureId" },
+			links: [
+				{ nodeId: "prevPictureId", gps: [0, 0] },
+				{ nodeId: "nextPictureId", gps: [2, 2] }
+			],
+			gps: [1, 1]
+		};
+			
+		expect(utils.getRelativeHeading(pictureMetadata)).toBe(-15);
+	});
+
+	it("works looking behind", () => {
+		const pictureMetadata = {
+			properties: { "view:azimuth": 226 },
+			sequence: { prevPic: "prevPictureId", nextPic: "nextPictureId" },
+			links: [
+				{ nodeId: "prevPictureId", gps: [0, 0] },
+				{ nodeId: "nextPictureId", gps: [2, 2] }
+			],
+			gps: [1, 1]
+		};
+			
+		expect(utils.getRelativeHeading(pictureMetadata)).toBe(-179);
+	});
+
+	it("works with distorted path", () => {
+		const pictureMetadata = {
+			properties: { "view:azimuth": 100 },
+			sequence: { prevPic: "prevPictureId", nextPic: "nextPictureId" },
+			links: [
+				{ nodeId: "prevPictureId", gps: [0, 0] },
+				{ nodeId: "nextPictureId", gps: [2, 1] }
+			],
+			gps: [1, 0]
+		};
+			
+		expect(utils.getRelativeHeading(pictureMetadata)).toBe(10);
+	});
+
+	it("works without previous link", () => {
+		const pictureMetadata = {
+			properties: { "view:azimuth": 100 },
+			sequence: { nextPic: "nextPictureId" },
+			links: [
+				{ nodeId: "nextPictureId", gps: [2, 1] }
+			],
+			gps: [1, 1]
+		};
+			
+		expect(utils.getRelativeHeading(pictureMetadata)).toBe(10);
+	});
+
+	it("should handle missing prevPic or nextPic", () => {
+		const metadataWithoutPrevNext = {
+			properties: { "view:azimuth": 30 },
+			gps: [0, 0]
+		};
+		expect(utils.getRelativeHeading(metadataWithoutPrevNext)).toBe(0);
+	});
+});
+
+describe("getSimplifiedAngle", () => {
+	it("returns \"N\"", () => {
+		expect(utils.getSimplifiedAngle([0, 0], [0, 1])).toBe("N");
+	});
+
+	it("returns \"ENE\"", () => {
+		expect(utils.getSimplifiedAngle([0, 0], [1, 1])).toBe("ENE");
+	});
+
+	it("returns \"ESE\"", () => {
+		expect(utils.getSimplifiedAngle([0, 0], [1, -1])).toBe("ESE");
+	});
+
+	it("returns \"S\"", () => {
+		expect(utils.getSimplifiedAngle([0, 0], [0, -1])).toBe("S");
+	});
+
+	it("returns \"WNW\"", () => {
+		expect(utils.getSimplifiedAngle([0, 0], [-1, 1])).toBe("WNW");
+	});
+
+	it("returns \"WSW\"", () => {
+		expect(utils.getSimplifiedAngle([0, 0], [-1, -1])).toBe("WSW");
+	});
+});
+
+describe("positionToXYZ", () => {
+	it("works with xy", () => {
+		const r = utils.positionToXYZ({ pitch: 10, yaw: -5 });
+		expect(r).toEqual({ x: -286.4788975654116, y: 572.9577951308232 });
+	});
+
+	it("works with xyz", () => {
+		const r = utils.positionToXYZ({ pitch: 10, yaw: -5 }, 15);
+		expect(r).toEqual({ x: -286.4788975654116, y: 572.9577951308232, z: 15 });
+	});
+});
+
+describe("xyzToPosition", () => {
+	it("works with xyz", () => {
+		const r = utils.xyzToPosition(-286.4788975654116, 572.9577951308232, 15);
+		expect(r).toEqual({ pitch: 10, yaw: -5, zoom: 15 });
+	});
+});
+
+describe("josmBboxParameters", () => {
+	it("works with null-like", () => {
+        expect(utils.josmBboxParameters(null)).toBeNull();
+        expect(utils.josmBboxParameters(undefined)).toBeNull();
+    });
+
+    it("works without azimuth", () => {
+        const meta = { gps: [2.3522, 48.8566] };
+        const result = utils.josmBboxParameters(meta);
+        expect(result).toBe("left=2.3522&right=2.3522&top=48.8566&bottom=48.8566&changeset_source=Panoramax");
+    });
+
+    it("works with azimuth = 0", () => {
+        const meta = { gps: [2.3522, 48.8566], properties: { "view:azimuth": 0 } };
+        const result = utils.josmBboxParameters(meta);
+        expect(result).toBe("left=2.3522&right=2.3524&top=48.8568&bottom=48.8566&changeset_source=Panoramax");
+    });
+
+    it("works with azimuth = 180", () => {
+        const meta = { gps: [2.3522, 48.8566], properties: { "view:azimuth": 180 } };
+        const result = utils.josmBboxParameters(meta);
+        expect(result).toBe("left=2.352&right=2.3524&top=48.8566&bottom=48.8564&changeset_source=Panoramax");
+    });
+
+    it("works with azimuth = 90", () => {
+        const meta = { gps: [2.3522, 48.8566], properties: { "view:azimuth": 90 } };
+        const result = utils.josmBboxParameters(meta);
+        expect(result).toBe("left=2.3522&right=2.3524&top=48.8568&bottom=48.8564&changeset_source=Panoramax");
+    });
+
+    it("works with azimuth = 270", () => {
+        const meta = { gps: [2.3522, 48.8566], properties: { "view:azimuth": 270 } };
+        const result = utils.josmBboxParameters(meta);
+        expect(result).toBe("left=2.352&right=2.3522&top=48.8568&bottom=48.8564&changeset_source=Panoramax");
+    });
+});
+
+describe("getCookie", () => {
+    it("should return the value of the specified cookie", () => {
+        jest.spyOn(document, "cookie", "get").mockReturnValueOnce("session=abc123");
+        expect(utils.getCookie("session")).toBe("abc123");
+    });
+
+    it("should return null if the cookie is not found", () => {
+        jest.spyOn(document, "cookie", "get").mockReturnValueOnce("session=abc123");
+        expect(utils.getCookie("user_id")).toBeUndefined();
+    });
+
+    it("should return the correct value when multiple cookies are set", () => {
+        jest.spyOn(document, "cookie", "get").mockReturnValueOnce("session=abc123; user_id=789; user_name=John");
+        expect(utils.getCookie("user_id")).toBe("789");
+    });
+
+    it("should return null if cookie with the specified name has no value", () => {
+        jest.spyOn(document, "cookie", "get").mockReturnValueOnce("session=; user_id=789");
+        expect(utils.getCookie("session")).toBe("");
+    });
+
+    it("should return the correct value when the cookie contains =", () => {
+        jest.spyOn(document, "cookie", "get").mockReturnValueOnce("custom_cookie=abc=123");
+        expect(utils.getCookie("custom_cookie")).toBe("abc=123");
+    });
+});
+
+describe("getUserAccount", () => {
+    it("should return an object with user id and name when all cookies are present", () => {
+        jest.spyOn(document, "cookie", "get").mockReturnValue("session=abc123; user_id=789; user_name=John");
+        expect(utils.getUserAccount()).toEqual({ id: "789", name: "John" });
+    });
+
+    it("should return null if session cookie is missing", () => {
+        jest.spyOn(document, "cookie", "get").mockReturnValue("user_id=789; user_name=John");
+        expect(utils.getUserAccount()).toBeNull();
+    });
+
+    it("should return null if user_id cookie is missing", () => {
+        jest.spyOn(document, "cookie", "get").mockReturnValue("session=abc123; user_name=John");
+        expect(utils.getUserAccount()).toBeNull();
+    });
+
+    it("should return null if user_name cookie is missing", () => {
+        jest.spyOn(document, "cookie", "get").mockReturnValue("session=abc123; user_id=789");
+        expect(utils.getUserAccount()).toBeNull();
+    });
+
+    it("should return null if all cookies are missing", () => {
+        expect(utils.getUserAccount()).toBeNull();
+    });
+});

package/tests/utils/widgets.test.js

@@ -0,0 +1,31 @@
+import { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown";
+import * as widgets from "../../src/utils/widgets";
+
+describe("fa", () => {
+	it("works", () => {
+		const res = widgets.fa(faChevronDown);
+		expect(res).toMatchSnapshot();
+	});
+});
+
+describe("createWebComp", () => {
+	it("works", () => {
+		const tag = "custom-element";
+		const props = {
+			id: "test-id",
+			class: "test-class",
+			_customProp: "secret",
+			fnDoSomething: jest.fn(),
+			onClick: jest.fn(),
+		};
+	
+		const wc = widgets.createWebComp(tag, props);
+	
+		expect(wc).toBeInstanceOf(HTMLElement);
+		expect(wc.tagName.toLowerCase()).toBe(tag);
+		expect(wc.getAttribute("id")).toBe(props.id);
+		expect(wc.getAttribute("class")).toBe(props.class);
+		expect(wc._customProp).toBe(props._customProp);
+		expect(wc.DoSomething).toBe(props.fnDoSomething);
+	});
+});

package/docs/01_Start.md

@@ -1,149 +0,0 @@
-# Web viewer documentation
-
-Welcome to Panoramax __Web Viewer__ documentation ! It will help you through all phases of setup, run and develop on Panoramax JS pictures viewer.
-
-![Web viewer screenshots](./images/screenshot.jpg)
-
-!!! note
-
-	If at some point you're lost or need help, you can contact us through [issues](https://gitlab.com/panoramax/clients/web-viewer/-/issues) or by [email](mailto:panieravide@riseup.net).
-
-## Install the viewer
-
-Many options are available for installing the viewer.
-
-=== ":simple-npm: NPM"
-
-	Panoramax viewer is available on NPM as [@panoramax/web-viewer](https://www.npmjs.com/package/@panoramax/web-viewer) package.
-
-	```bash
-	npm install @panoramax/web-viewer
-	```
-
-	If you want the latest version (corresponding to the `develop` git branch), you can use the `develop` NPM dist-tag:
-
-	```bash
-	npm install @panoramax/web-viewer@develop
-	```
-
-=== ":material-web: Hosted"
-
-	You can rely on various providers offering hosted NPM packages, for example JSDelivr.
-
-	```html
-	<!-- You may use another version than 3.0.2, just change the release in URL -->
-	<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@panoramax/web-viewer@3.0.2/build/index.css" />
-	<script src="https://cdn.jsdelivr.net/npm/@panoramax/web-viewer@3.0.2/build/index.js"></script>
-	```
-
-=== ":material-code-tags: Source code"
-
-	You can install and use Panoramax web client based on code provided in this repository.
-
-	This library relies on __Node.js 16__, which should be installed on your computer. Then, you can build the library using these commands:
-
-	```bash
-	git clone https://gitlab.com/panoramax/clients/web-viewer.git
-	cd web-viewer/
-	npm install
-	npm build
-	```
-
-
-## Basic usage
-
-First, you need to make sure everything is ready to create the viewer:
-
-=== ":fontawesome-brands-js: Old-school JS"
-
-	Make sure to have both JS and CSS code available in your HTML `head` part:
-
-	```html
-	<!-- Change the actual path depending of where you installed the library -->
-	<link rel="stylesheet" type="text/css" href="web-viewer/build/index.css" />
-	<script src="web-viewer/build/index.js"></script>
-	```
-
-	And you also node a `div` somewhere in your HTML:
-
-	```html
-	<div id="viewer" style="width: 500px; height: 300px"></div>
-	```
-
-	Then, the div is populated with this JavaScript code:
-
-	```js
-	let myViewer = new Panoramax.Viewer(
-		"viewer",  // Div ID
-		"https://api.panoramax.xyz/api",  // STAC API endpoint
-		{ map: true }  // Viewer options
-	);
-	```
-
-=== ":fontawesome-brands-node-js: New-style JS"
-
-	Make sure to import both JS and CSS in your code:
-
-	```js
-	import Panoramax from '@panoramax/web-viewer';
-	import '@panoramax/web-viewer/build/index.css';
-	```
-
-	And have access in some way to a classic `div` HTML element:
-
-	```js
-	const myDiv = document.getElementById("viewer");
-	```
-
-	Then, the div is populated with this JavaScript code:
-
-	```js
-	let myViewer = new Panoramax.Viewer(
-		myDiv,  // Div Element
-		"https://api.panoramax.xyz/api",  // STAC API endpoint
-		{ map: true }  // Viewer options
-	);
-	```
-
-
-Beyond classic viewer, other widgets are available and [can be tested online](https://viewer.geovisio.fr/):
-
-__Standalone-map__
-
-A simple map for showing coverage only.
-
-```js
-var myMap = new Panoramax.StandaloneMap(
-	"map",  // Div ID
-	"https://api.panoramax.xyz/api"  // STAC API endpoint
-);
-```
-
-__Editor__
-
-A map and photo viewer, focused on a single sequence, for previewing edits made to it.
-
-```js
-var myEditor = new Panoramax.Editor(
-	"editor",  // Div ID
-	"https://api.panoramax.xyz/api",  // STAC API endpoint
-	{
-		selectedSequence: "id-to-an-existing-sequence", // Sequence ID (mandatory)
-		selectedPicture: "id-to-a-picture-in-this-sequence" // Picture ID (optional)
-	}
-);
-```
-
-## User interface
-
-### Keyboard shortcuts
-
-All interactions with the viewer can be done using the mouse, and some can be also done using keyboard.
-
-* __Arrows__ (or 2/4/8/6 on keypad): move inside the picture, or move the map
-* __Page up/down__ (or 3/9 on keypad) : go to next or previous picture in sequence
-* __+ / -__ : zoom picture or map in or out
-* __*__ (or 5 on keypad) : move picture or map to its center
-* __Home / ↖️__ (or 7 on keypad) : switch map and picture as main shown component
-* __End__ (or 1 on keypad) : hide minimized map or picture
-* __Space__ : play or pause current sequence