@panoramax/web-viewer 3.2.3-develop-f219e404 → 3.2.3-develop-6257391e

package/tests/utils/URLHandler.test.js

@@ -0,0 +1,350 @@
+import URLHandler from "../../src/utils/URLHandler";
+
+describe("listenToChanges", () => {
+	it("should add event listeners to window, parent, psv, and map", () => {
+		window.addEventListener = jest.fn();
+		const parent = {
+			addEventListener: jest.fn(),
+			psv: { addEventListener: jest.fn() },
+			map: { on: jest.fn() },
+		};
+		const urlHandler = new URLHandler(parent);
+		urlHandler.listenToChanges();
+		expect(window.addEventListener).toHaveBeenCalledWith("popstate", expect.any(Function), false);
+		["focus-changed", "pictures-navigation-changed"].forEach(event => {
+			expect(parent.addEventListener).toHaveBeenCalledWith(event, expect.any(Function));
+		});
+		["position-updated", "zoom-updated", "view-rotated", "picture-loaded", "transition-duration-changed"].forEach(event => {
+			expect(parent.psv.addEventListener).toHaveBeenCalledWith(event, expect.any(Function));
+		});
+		["moveend", "zoomend", "boxzoomend", "background-changed", "users-changed", "filters-changed"].forEach(event => {
+			expect(parent.map.on).toHaveBeenCalledWith(event, expect.any(Function));
+		});
+	});
+});
+
+describe("nextURLString", () => {
+	it("works without any specific values set", () => {
+		const v = {
+			addEventListener: jest.fn(),
+			psv: {
+				getPicturesNavigation: () => null,
+				getTransitionDuration: () => null,
+				getPictureMetadata: () => null,
+			},
+		};
+		const uh = new URLHandler(v);
+		expect(uh.nextURLString()).toBe("?map=none");
+	});
+
+	it("works with picture metadata", () => {
+		const v = {
+			addEventListener: jest.fn(),
+			psv: {
+				getPicturesNavigation: () => null,
+				getTransitionDuration: () => null,
+				getPictureMetadata: () => ({ "id": "cbfc3add-8173-4464-98c8-de2a43c6a50f" })
+			},
+		};
+		const uh = new URLHandler(v);
+		uh.currentPSVString = () => "0/1/2";
+		expect(uh.nextURLString()).toBe("?map=none&pic=cbfc3add-8173-4464-98c8-de2a43c6a50f&xyz=0/1/2");
+	});
+
+	it("works with map started + wide", () => {
+		const v = {
+			addEventListener: jest.fn(),
+			psv: {
+				getPicturesNavigation: () => null,
+				getTransitionDuration: () => null,
+				getPictureMetadata: () => null,
+			},
+			map: {
+				getVisibleUsers: () => ["geovisio"],
+				hasTwoBackgrounds: () => false,
+				loaded: () => true,
+			},
+			isMapWide: () => true,
+			popup: { hasAttribute: () => false },
+		};
+		const uh = new URLHandler(v);
+		uh.currentMapString = () => "18/0.5/-12";
+		expect(uh.nextURLString()).toBe("?focus=map&map=18/0.5/-12");
+	});
+
+	it("works with map + picture wide", () => {
+		const v = {
+			addEventListener: jest.fn(),
+			psv: {
+				getPicturesNavigation: () => null,
+				getTransitionDuration: () => null,
+				getPictureMetadata: () => ({ "id": "cbfc3add-8173-4464-98c8-de2a43c6a50f" }),
+			},
+			map: {
+				getVisibleUsers: () => ["geovisio"],
+				hasTwoBackgrounds: () => false,
+				loaded: () => true,
+			},
+			isMapWide: () => false,
+			popup: { hasAttribute: () => false },
+		};
+		const uh = new URLHandler(v);
+		uh.currentPSVString = () => "0/1/2";
+		uh.currentMapString = () => "18/0.5/-12";
+		expect(uh.nextURLString()).toBe("?focus=pic&map=18/0.5/-12&pic=cbfc3add-8173-4464-98c8-de2a43c6a50f&xyz=0/1/2");
+	});
+
+	it("works with map filters", () => {
+		const v = {
+			addEventListener: jest.fn(),
+			psv: {
+				getPicturesNavigation: () => null,
+				getTransitionDuration: () => null,
+				getPictureMetadata: () => null,
+			},
+			map: {
+				getVisibleUsers: () => ["geovisio"],
+				hasTwoBackgrounds: () => false,
+				loaded: () => true,
+				_mapFilters: {
+					"minDate": "2023-01-01",
+					"maxDate": "2023-08-08",
+					"camera": "sony",
+					"pic_type": "flat",
+					"theme": "age",
+				},
+			},
+			isMapWide: () => false,
+			popup: { hasAttribute: () => false },
+		};
+		const uh = new URLHandler(v);
+		uh.currentMapString = () => "18/0.5/-12";
+		expect(uh.nextURLString()).toBe("?camera=sony&date_from=2023-01-01&date_to=2023-08-08&focus=pic&map=18/0.5/-12&pic_type=flat&theme=age");
+	});
+
+	it("works with speed", () => {
+		const v = {
+			addEventListener: jest.fn(),
+			psv: {
+				getPicturesNavigation: () => null,
+				getTransitionDuration: () => 250,
+				getPictureMetadata: () => null,
+			},
+		};
+		const uh = new URLHandler(v);
+		expect(uh.nextURLString()).toBe("?map=none&speed=250");
+	});
+
+	it("works with popup", () => {
+		const v = {
+			addEventListener: jest.fn(),
+			psv: {
+				getPicturesNavigation: () => null,
+				getTransitionDuration: () => null,
+				getPictureMetadata: () => null,
+			},
+			map: {
+				getVisibleUsers: () => ["geovisio"],
+				hasTwoBackgrounds: () => false,
+				loaded: () => true,
+			},
+			isMapWide: () => false,
+			popup: { hasAttribute: () => true },
+		};
+		const uh = new URLHandler(v);
+		uh.currentMapString = () => "18/0.5/-12";
+		expect(uh.nextURLString()).toBe("?focus=meta&map=18/0.5/-12");
+	});
+
+	it("works with nav", () => {
+		const v = {
+			addEventListener: jest.fn(),
+			psv: {
+				getPicturesNavigation: () => "pic",
+				getTransitionDuration: () => null,
+				getPictureMetadata: () => null,
+			},
+		};
+		const uh = new URLHandler(v);
+		expect(uh.nextURLString()).toBe("?map=none&nav=pic");
+	});
+});
+
+describe("currentURLParams", () => {
+	it("works if empty", () => {
+		delete window.location;
+		window.location = { search: "" };
+		const v = { addEventListener: jest.fn() };
+		const uh = new URLHandler(v);
+		expect(uh.currentURLParams()).toStrictEqual({});
+	});
+
+	it("works with single param", () => {
+		delete window.location;
+		window.location = { search: "?a=b" };
+		const v = { addEventListener: jest.fn() };
+		const uh = new URLHandler(v);
+		expect(uh.currentURLParams()).toStrictEqual({"a": "b"});
+	});
+
+	it("works with multiple params", () => {
+		delete window.location;
+		window.location = { search: "?a=b&c=d" };
+		const v = { addEventListener: jest.fn() };
+		const uh = new URLHandler(v);
+		expect(uh.currentURLParams()).toStrictEqual({"a": "b", "c": "d"});
+	});
+});
+
+describe("currentMapString", () => {
+	it("works with zoom+center", () => {
+		const v = {
+			addEventListener: jest.fn(),
+			map: {
+				getZoom: () => 18,
+				getCenter: () => ({ lng: -12.5, lat: 48.75 }),
+				getBearing: () => null,
+				getPitch: () => null,
+			}
+		};
+		const uh = new URLHandler(v);
+		expect(uh.currentMapString()).toBe("18/48.75/-12.5");
+	});
+
+	it("works with zoom+center+bearing", () => {
+		const v = {
+			addEventListener: jest.fn(),
+			map: {
+				getZoom: () => 18,
+				getCenter: () => ({ lng: -12.5, lat: 48.75 }),
+				getBearing: () => 12,
+				getPitch: () => null,
+			}
+		};
+		const uh = new URLHandler(v);
+		expect(uh.currentMapString()).toBe("18/48.75/-12.5/12");
+	});
+
+	it("works with zoom+center+pitch", () => {
+		const v = {
+			addEventListener: jest.fn(),
+			map: {
+				getZoom: () => 18,
+				getCenter: () => ({ lng: -12.5, lat: 48.75 }),
+				getBearing: () => null,
+				getPitch: () => 65,
+			},
+		};
+		const uh = new URLHandler(v);
+		expect(uh.currentMapString()).toBe("18/48.75/-12.5/0/65");
+	});
+
+	it("works with zoom+center+bearing+pitch", () => {
+		const v = {
+			addEventListener: jest.fn(),
+			map: {
+				getZoom: () => 18,
+				getCenter: () => ({ lng: -12.5, lat: 48.75 }),
+				getBearing: () => 42,
+				getPitch: () => 65,
+			},
+		};
+		const uh = new URLHandler(v);
+		expect(uh.currentMapString()).toBe("18/48.75/-12.5/42/65");
+	});
+});
+
+describe("currentPSVString", () => {
+	it("works", () => {
+		const v = {
+			addEventListener: jest.fn(),
+			psv: {
+				getXYZ: () => ({ x: 12, y: 50, z: 75 }),
+			},
+		};
+		const uh = new URLHandler(v);
+		expect(uh.currentPSVString()).toBe("12.00/50.00/75");
+	});
+
+	it("rounds to 2 decimals", () => {
+		const v = {
+			addEventListener: jest.fn(),
+			psv: {
+				getXYZ: () => ({ x: 12.123456, y: 50.789456, z: 75 }),
+			},
+		};
+		const uh = new URLHandler(v);
+		expect(uh.currentPSVString()).toBe("12.12/50.79/75");
+	});
+
+	it("works without z", () => {
+		const v = {
+			addEventListener: jest.fn(),
+			psv: {
+				getXYZ: () => ({ x: 12, y: 50 }),
+			},
+		};
+		const uh = new URLHandler(v);
+		expect(uh.currentPSVString()).toBe("12.00/50.00/0");
+	});
+});
+
+describe("_onParentChange", () => {
+	it("works", async () => {
+		delete window.history;
+		delete window.location;
+
+		window.history = { replaceState: jest.fn(), state: {} };
+		window.location = { href: "http://localhost:5000/?nav=pic&speed=2", search: "?nav=pic&speed=2" };
+
+		const v = { addEventListener: jest.fn() };
+		const uh = new URLHandler(v);
+		uh.nextURLString = () => "?map=1/2/3";
+		uh.dispatchEvent = jest.fn();
+
+		uh._onParentChange();
+		await new Promise((r) => setTimeout(r, 1000));
+
+		expect(window.history.replaceState.mock.calls.pop()).toEqual([{}, null, "http://localhost:5000/?map=1/2/3"]);
+		expect(uh.dispatchEvent.mock.calls).toMatchSnapshot();
+	});
+
+	it("works with pic change", async () => {
+		delete window.history;
+		delete window.location;
+
+		window.history = { pushState: jest.fn(), state: {} };
+		window.location = { href: "http://localhost:5000/?pic=bla", search: "?pic=bla" };
+
+		const v = { addEventListener: jest.fn() };
+		const uh = new URLHandler(v);
+		uh.nextURLString = () => "?nav=seq";
+		uh.dispatchEvent = jest.fn();
+
+		uh._onParentChange();
+		await new Promise((r) => setTimeout(r, 1000));
+
+		expect(window.history.pushState.mock.calls.pop()).toEqual([{}, null, "http://localhost:5000/?nav=seq"]);
+		expect(uh.dispatchEvent.mock.calls).toMatchSnapshot();
+	});
+
+	it("deduplicates calls", async () => {
+		delete window.history;
+		delete window.location;
+
+		window.history = { replaceState: jest.fn(), state: {} };
+		window.location = { href: "http://localhost:5000/?speed=1&nav=seq", search: "?speed=1&nav=seq" };
+
+		const v = { addEventListener: jest.fn() };
+		const uh = new URLHandler(v);
+		uh.nextURLString = () => "?map=1/2/3";
+
+		for(let i=0; i <= 10; i++) {
+			uh._onParentChange();
+		}
+
+		await new Promise((r) => setTimeout(r, 1000));
+
+		expect(window.history.replaceState.mock.calls).toEqual([[{}, null, "http://localhost:5000/?map=1/2/3"]]);
+	});
+});

package/tests/utils/__snapshots__/URLHandler.test.js.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`_onParentChange works 1`] = `
+Array [
+  Array [
+    CustomEvent {
+      "isTrusted": false,
+    },
+  ],
+]
+`;
+
+exports[`_onParentChange works with pic change 1`] = `
+Array [
+  Array [
+    CustomEvent {
+      "isTrusted": false,
+    },
+  ],
+]
+`;

package/tests/utils/__snapshots__/picture.test.js.snap

@@ -0,0 +1,315 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`apiFeatureToPSVNode works 1`] = `
+Object {
+  "caption": Object {
+    "date": mockConstructor {},
+    "license": "<a href=\\"https://spdx.org/licenses/CC-BY-SA-4.0.html\\" title=\\"\\" target=\\"_blank\\">CC-BY-SA-4.0</a>",
+    "producer": "Hopen111",
+  },
+  "gps": Array [
+    -92.70188245,
+    41.322064692,
+  ],
+  "horizontalFov": 360,
+  "id": "00000000-76a0-4bec-b19e-a56f51ef997d",
+  "links": Array [
+    Object {
+      "arrowStyle": Object {
+        "element": <img
+          alt=""
+          src="arrow_triangle.svg"
+        />,
+        "size": Object {
+          "height": 75,
+          "width": 75,
+        },
+      },
+      "gps": Array [
+        -92.701854443,
+        41.322047796,
+      ],
+      "linkOffset": Object {
+        "yaw": -5.3930673886624785,
+      },
+      "nodeId": "66ea29cd-941c-4201-977f-efb87bd5465e",
+    },
+    Object {
+      "arrowStyle": Object {
+        "element": <img
+          alt=""
+          src="arrow_triangle.svg"
+        />,
+        "size": Object {
+          "height": 75,
+          "width": 75,
+        },
+      },
+      "gps": Array [
+        -92.701910458,
+        41.322081588,
+      ],
+      "linkOffset": Object {
+        "yaw": -5.3930673886624785,
+      },
+      "nodeId": "5fb8e767-6fe3-4bcb-b19f-7031d9a64fc8",
+    },
+  ],
+  "panorama": Object {
+    "basePanoData": [Function],
+    "baseUrl": "https://panoramax.openstreetmap.fr/api/pictures/00000000-76a0-4bec-b19e-a56f51ef997d/sd.jpg",
+    "cols": 8,
+    "hdUrl": "https://panoramax.openstreetmap.fr/api/pictures/00000000-76a0-4bec-b19e-a56f51ef997d/hd.jpg",
+    "origBaseUrl": "https://panoramax.openstreetmap.fr/api/pictures/00000000-76a0-4bec-b19e-a56f51ef997d/sd.jpg",
+    "rows": 4,
+    "thumbUrl": "https://panoramax.openstreetmap.fr/api/pictures/00000000-76a0-4bec-b19e-a56f51ef997d/thumb.jpg",
+    "tileUrl": [Function],
+    "width": 5376,
+  },
+  "properties": Object {
+    "created": "2024-09-04T02:40:11.836165+00:00",
+    "datetime": "2024-09-01T23:35:37.797105+00:00",
+    "datetimetz": "2024-09-01T23:35:37.797105+00:00",
+    "exif": Object {
+      "Xmp.GPano.CroppedAreaImageHeightPixels": "2688",
+      "Xmp.GPano.CroppedAreaImageWidthPixels": "5376",
+      "Xmp.GPano.CroppedAreaLeftPixels": "0",
+      "Xmp.GPano.CroppedAreaTopPixels": "0",
+      "Xmp.GPano.FullPanoHeightPixels": "2688",
+      "Xmp.GPano.FullPanoWidthPixels": "5376",
+      "Xmp.GPano.ProjectionType": "equirectangular",
+      "Xmp.GPano.UsePanoramaViewer": "True",
+    },
+    "geovisio:image": "https://panoramax.openstreetmap.fr/api/pictures/00000000-76a0-4bec-b19e-a56f51ef997d/hd.jpg",
+    "geovisio:producer": "Hopen111",
+    "geovisio:thumbnail": "https://panoramax.openstreetmap.fr/api/pictures/00000000-76a0-4bec-b19e-a56f51ef997d/thumb.jpg",
+    "license": "CC-BY-SA-4.0",
+    "original_file:name": "GS010837-003545.jpg",
+    "original_file:size": 788436,
+    "panoramax:horizontal_pixel_density": 15,
+    "pers:interior_orientation": Object {
+      "field_of_view": 360,
+      "sensor_array_dimensions": Array [
+        5376,
+        2688,
+      ],
+    },
+    "tiles:tile_matrix_sets": Object {
+      "geovisio": Object {
+        "identifier": "geovisio-00000000-76a0-4bec-b19e-a56f51ef997d",
+        "tileMatrix": Array [
+          Object {
+            "identifier": "0",
+            "matrixHeight": 4,
+            "matrixWidth": 8,
+            "scaleDenominator": 1,
+            "tileHeight": 672,
+            "tileWidth": 672,
+            "topLeftCorner": Array [
+              0,
+              0,
+            ],
+            "type": "TileMatrixType",
+          },
+        ],
+        "title": "GeoVisio tile matrix for picture 00000000-76a0-4bec-b19e-a56f51ef997d",
+        "type": "TileMatrixSetType",
+      },
+    },
+    "view:azimuth": 309,
+  },
+  "sequence": Object {
+    "id": "ec31c324-b43a-425e-a24c-3de56d7914c1",
+    "nextPic": "5fb8e767-6fe3-4bcb-b19f-7031d9a64fc8",
+    "prevPic": "66ea29cd-941c-4201-977f-efb87bd5465e",
+  },
+  "sphereCorrection": Object {},
+}
+`;
+
+exports[`filterRelatedPicsLinks works 1`] = `
+Array [
+  Object {
+    "arrowStyle": Object {
+      "element": <img
+        alt=""
+        src="arrow_turn.svg"
+      />,
+      "size": Object {
+        "height": 128,
+        "width": 42.666666666666664,
+      },
+    },
+    "gps": Array [
+      4.840134667,
+      45.756240466,
+    ],
+    "linkOffset": Object {
+      "yaw": -1.8849555921538759,
+    },
+    "nodeId": "aaa1ae2f-b48a-4291-972e-030fcd44760b",
+  },
+  Object {
+    "arrowStyle": Object {
+      "element": <img
+        alt=""
+        src="arrow_triangle.svg"
+      />,
+      "size": Object {
+        "height": 75,
+        "width": 75,
+      },
+    },
+    "gps": Array [
+      4.8401792,
+      45.7562024,
+    ],
+    "linkOffset": Object {
+      "yaw": -1.8849555921538759,
+    },
+    "nodeId": "38abdc16-b878-4762-a433-33e52e62ae9b",
+  },
+  Object {
+    "arrowStyle": Object {
+      "element": <img
+        alt=""
+        src="arrow_turn.svg"
+      />,
+      "size": Object {
+        "height": 128,
+        "width": 42.666666666666664,
+      },
+    },
+    "gps": Array [
+      4.8401379,
+      45.7561616,
+    ],
+    "linkOffset": Object {
+      "yaw": -1.8849555921538759,
+    },
+    "nodeId": "5e1d8461-fe5d-4d57-9c87-f2403baff37d",
+  },
+  Object {
+    "arrowStyle": Object {
+      "element": <img
+        alt=""
+        src="arrow_turn.svg"
+      />,
+      "size": Object {
+        "height": 128,
+        "width": 42.666666666666664,
+      },
+    },
+    "gps": Array [
+      4.8400918,
+      45.7561938,
+    ],
+    "linkOffset": Object {
+      "yaw": -1.8849555921538759,
+    },
+    "nodeId": "abff42de-2862-4b15-8c2a-dca22ed2deaf",
+  },
+  Object {
+    "arrowStyle": Object {
+      "element": <img
+        alt=""
+        src="arrow_triangle.svg"
+      />,
+      "size": Object {
+        "height": 75,
+        "width": 75,
+      },
+    },
+    "gps": Array [
+      4.8400633,
+      45.7562389,
+    ],
+    "linkOffset": Object {
+      "yaw": -1.8849555921538759,
+    },
+    "nodeId": "1c5025ed-3e03-4cf0-8879-7ed9091a9e33",
+  },
+]
+`;
+
+exports[`getCroppedPanoData works with API props 1`] = `
+Object {
+  "croppedHeight": 2606,
+  "croppedWidth": 15872,
+  "croppedX": 0,
+  "croppedY": 2538,
+  "fullHeight": 7936,
+  "fullWidth": 15872,
+}
+`;
+
+exports[`getCroppedPanoData works with API props and unneeded 1`] = `Object {}`;
+
+exports[`getCroppedPanoData works with exif tags 1`] = `
+Object {
+  "croppedHeight": 2606,
+  "croppedWidth": 15872,
+  "croppedX": 0,
+  "croppedY": 2538,
+  "fullHeight": 7936,
+  "fullWidth": 15872,
+}
+`;
+
+exports[`getCroppedPanoData works with exif tags and unneeded 1`] = `Object {}`;
+
+exports[`getNodeCaption works with date + 2 producers 1`] = `
+Object {
+  "date": Object {
+    "toLocaleDateString": [Function],
+  },
+  "producer": "GeoVisio Corp., PanierAvide",
+}
+`;
+
+exports[`getNodeCaption works with date + producer 1`] = `
+Object {
+  "date": Object {
+    "toLocaleDateString": [Function],
+  },
+  "producer": "PanierAvide",
+}
+`;
+
+exports[`getNodeCaption works with date 1`] = `
+Object {
+  "date": Object {
+    "toLocaleDateString": [Function],
+  },
+}
+`;
+
+exports[`getNodeCaption works with date+tz 1`] = `
+Object {
+  "date": Object {
+    "toLocaleDateString": [Function],
+  },
+}
+`;
+
+exports[`getNodeCaption works with producer 1`] = `
+Object {
+  "producer": "PanierAvide",
+}
+`;
+
+exports[`getSphereCorrection works with API props 1`] = `
+Object {
+  "pan": 0.7330382858376184,
+  "roll": 1.260127719939906,
+  "tilt": -0.5235987755982988,
+}
+`;
+
+exports[`getSphereCorrection works with exif tags 1`] = `
+Object {
+  "pan": 0.7330382858376184,
+  "roll": 1.260127719939906,
+  "tilt": -0.5235987755982988,
+}
+`;

package/tests/utils/__snapshots__/widgets.test.js.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`fa works 1`] = `
+<svg
+  aria-hidden="true"
+  class="svg-inline--fa fa-chevron-down"
+  data-icon="chevron-down"
+  data-prefix="fas"
+  focusable="false"
+  role="img"
+  viewBox="0 0 512 512"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"
+    fill="currentColor"
+  />
+</svg>
+`;