Refactor interfaces, events, data contracts, extension APIs and properties

README.md

@@ -29,7 +29,7 @@ You can use MapillaryJS as a `<script>` tag from a [CDN](https://unpkg.com/brows
         var mly = new Mapillary.Viewer({
             apiClient: '<your client id>',
             container: 'mly',
-            imageKey: '<your image key for initializing the viewer>',
+            imageId: '<your image id for initializing the viewer>',
         });
     </script>
 </body>
@@ -48,9 +48,9 @@ Refer to the [Examples](https://github.com/mapillary/mapillary-js#examples) and
 - [Dynamic size](https://bl.ocks.org/oscarlorentzon/5af00c5c07448233bcb62f5e2124ab39)
 - [Load immediately](https://bl.ocks.org/oscarlorentzon/530cf3b89b8f5d1ecfdf4b79946caade)
 - [No cover](https://bl.ocks.org/oscarlorentzon/4f6f7ae5e86db7446f78ccea1eb6c2a7)
-- [Initialize with or without a key](https://bl.ocks.org/oscarlorentzon/3eb61ce99b3c1cedba88942cb02f317d)
+- [Initialize with or without an id](https://bl.ocks.org/oscarlorentzon/3eb61ce99b3c1cedba88942cb02f317d)
 - [Determine if viewer is navigable](https://bl.ocks.org/oscarlorentzon/898c55ef06917b07f165b7707d9f3a9e)
-- [Move to key](https://bl.ocks.org/oscarlorentzon/317da436accbcf2ff04c642f86cefaf8)
+- [Move to image](https://bl.ocks.org/oscarlorentzon/317da436accbcf2ff04c642f86cefaf8)
 - [Move in direction](https://bl.ocks.org/oscarlorentzon/63ac2aa3f0998f0c2d2b01a42c8babe4)
 - [Viewer options](https://bl.ocks.org/oscarlorentzon/08613728a283d1306b2848533852d22a)
 - [Subscribe to node changed](https://bl.ocks.org/oscarlorentzon/c5380e11fb3e84b8096f16737eb44820)
@@ -83,10 +83,10 @@ Refer to the [Examples](https://github.com/mapillary/mapillary-js#examples) and
 - [Add one million interactive markers](https://bl.ocks.org/oscarlorentzon/999db12bc87c92d5c547b1e582989fc1)
 
 #### Mouse
-- [Enable and disable mouse and touch handlers](https://bl.ocks.org/oscarlorentzon/37d28603212de2b8326bb65e49418368)
+- [Activate and deactivate mouse and touch handlers](https://bl.ocks.org/oscarlorentzon/37d28603212de2b8326bb65e49418368)
 
 #### Keyboard
-- [Enable and disable keyboard handlers](https://bl.ocks.org/oscarlorentzon/c92bbefbd4c74d4a490a8b37c85a1a7b)
+- [Activate and deactivate keyboard handlers](https://bl.ocks.org/oscarlorentzon/c92bbefbd4c74d4a490a8b37c85a1a7b)
 
 #### Popup
 - [Display a popup](https://bl.ocks.org/oscarlorentzon/54182e3f3624cdeb7ca960d96ebfa5fb)

debug/index.html

@@ -51,7 +51,7 @@
             apiClient: "QjI1NnU0aG5FZFZISE56U3R5aWN4ZzpkYzg0NzE3MDA0YTRhZjlh",
             component: { cover: false },
             container: "mly",
-            imageKey: "zarcRdNFZwg3FkXNcsFeGw",
+            imageId: "zarcRdNFZwg3FkXNcsFeGw",
             renderMode: Mapillary.RenderMode.Letterbox,
         });
 
@@ -70,9 +70,9 @@
         let filterIndex = 0;
         const filters = [
             [],
-            ["==", "cameraType", "equirectangular"],
-            ["==", "sequenceKey", "s5I5m7BvYykB677MpFnOIw"],
-            ["in", "sequenceKey", "s5I5m7BvYykB677MpFnOIw", "-aC4wx-8oOkCp6SFGXoyAg"],
+            ["==", "cameraType", "spherical"],
+            ["==", "sequenceId", "s5I5m7BvYykB677MpFnOIw"],
+            ["in", "sequenceId", "s5I5m7BvYykB677MpFnOIw", "-aC4wx-8oOkCp6SFGXoyAg"],
             [
                 "all",
                 [">=", "capturedAt", 1370509079741 - 24 * 60 * 60 * 1000],

debug/leaflet.html

@@ -59,7 +59,7 @@
             container: "mly",
         });
 
-        mly.moveToKey("6Zhtztzt67fWmdd4OYH44w").then(
+        mly.moveTo("6Zhtztzt67fWmdd4OYH44w").then(
             () => { /* noop */ },
             (e) => { console.error(e); });
 

debug/markers.html

@@ -101,7 +101,7 @@
         };
 
         // Start creating and adding markers when node has been set
-        mly.moveToKey("6Zhtztzt67fWmdd4OYH44w")
+        mly.moveTo("6Zhtztzt67fWmdd4OYH44w")
             .then(
                 function (n) {
                     let intervalId = window.setInterval(function () {

debug/module.html

@@ -40,7 +40,7 @@
             apiClient: "QjI1NnU0aG5FZFZISE56U3R5aWN4ZzpkYzg0NzE3MDA0YTRhZjlh",
             component: { cover: false },
             container: container,
-            imageKey: "zarcRdNFZwg3FkXNcsFeGw",
+            imageId: "zarcRdNFZwg3FkXNcsFeGw",
         });
 
         window.addEventListener("resize", function () { viewer.resize(); });

debug/popup.html

@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>MapillaryJS Popup</title>
+    <link rel="icon" href="data:,">
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+
+    <link rel="stylesheet" href="../dist/mapillary.css" />
+
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+        }
+
+        html,
+        body,
+        .mly-viewer-container {
+            width: 100%;
+            height: 100%;
+        }
+    </style>
+</head>
+
+<body>
+    <script type="module">
+        import {
+            Alignment,
+            PopupComponent as PopupComp,
+            TagComponent as TagComp,
+            Viewer,
+        } from '../dist/mapillary.module.js';
+
+        // Change popup point or rect based on tag geometry
+        function onGeometryChanged(tag) {
+            const popup = tagPopups[tag.id].popup;
+            popup.setBasicRect(tag.geometry.rect);
+        }
+
+        function createPopup(label) {
+            const popupOptions = {
+                float: Alignment.Top,
+                position: Alignment.Top,
+            };
+            const popup = new PopupComp.Popup(popupOptions);
+            const span = document.createElement('span');
+            span.innerHTML = label;
+            popup.setDOMContent(span);
+            return popup;
+        }
+
+        async function createTagPopups(id) {
+            return new Promise((resolve) => {
+                const amount = 1000;
+                const rows = Math.floor(Math.sqrt(amount));
+                const cols = rows;
+                const itemWidth = 1 / cols;
+                const itemHeight = 1 / rows;
+                const paddingX = itemWidth / 10;
+                const paddingY = itemHeight / 10;
+                const tagPopups = {};
+                for (let col = 0; col < cols; ++col) {
+                    for (let row = 0; row < rows; ++row) {
+                        const x0 = col / cols + paddingX;
+                        const x1 = x0 + itemWidth - 2 * paddingX;
+                        const y0 = row / rows + paddingY;
+                        const y1 = y0 + itemHeight - 2 * paddingY;
+                        const rect = [x0, y0, x1, y1];
+                        const geometry = new TagComp.RectGeometry(rect);
+                        const id = `tag-id-${row}-${col}`;
+                        const options = { editable: false };
+                        const tag = new TagComp.OutlineTag(id, geometry, options);
+                        tag.on('geometrychanged', onGeometryChanged);
+                        const popup = createPopup(id);
+                        popup.setBasicRect(rect);
+                        tagPopups[id] = { popup, tag };
+                    }
+                }
+                resolve(tagPopups);
+            })
+        }
+
+        function initViewer() {
+            const container = document.createElement('div');
+            container.className = 'mly-viewer-container';
+            document.body.appendChild(container);
+            const viewerOptions = {
+                apiClient: "QjI1NnU0aG5FZFZISE56U3R5aWN4ZzpkYzg0NzE3MDA0YTRhZjlh",
+                component: {
+                    cover: false,
+                    popup: true,
+                    tag: true,
+                },
+                container,
+            };
+            const viewer = new Viewer(viewerOptions);
+            window.addEventListener("resize", () => { viewer.resize(); });
+            viewer.moveTo("FnqSkFAZXjv4Uqmqd4X_NA")
+                .catch(error => console.error(error));
+            return viewer;
+        }
+
+        const viewer = initViewer();
+
+        const tagPopups = await createTagPopups();
+        const popups = Object
+            .keys(tagPopups)
+            .map(id => tagPopups[id].popup);
+        const tags = Object
+            .keys(tagPopups)
+            .map(id => tagPopups[id].tag);
+
+        const popupComp = viewer.getComponent('popup');
+        const tagComp = viewer.getComponent('tag');
+
+        const onNodeChanged = () => {
+            tagComp.removeAll();
+            tagComp.add(tags);
+            popupComp.removeAll();
+            popupComp.add(popups);
+        }
+        viewer.on('nodechanged', onNodeChanged);
+    </script>
+</body>
+
+</html>

debug/provider.html

@@ -43,7 +43,7 @@
       apiClient: new MyDataProvder({ clientToken: clientId }),
       component: { cover: false },
       container: "mly",
-      imageKey: "zarcRdNFZwg3FkXNcsFeGw",
+      imageId: "zarcRdNFZwg3FkXNcsFeGw",
     });
 
     window.addEventListener("resize", function () { viewer.resize(); });

debug/spatial.html

@@ -33,7 +33,7 @@
             apiClient: "QjI1NnU0aG5FZFZISE56U3R5aWN4ZzpkYzg0NzE3MDA0YTRhZjlh",
             component: { cover: false, stats: false, spatialData: true },
             container: "mly",
-            imageKey: "zarcRdNFZwg3FkXNcsFeGw",
+            imageId: "zarcRdNFZwg3FkXNcsFeGw",
         });
 
         window.addEventListener("resize", function () { viewer.resize(); });
@@ -103,9 +103,9 @@
         var filterIndex = 0;
         var filters = [
             [],
-            ["==", "cameraType", "equirectangular"],
-            ["==", "sequenceKey", "s5I5m7BvYykB677MpFnOIw"],
-            ["in", "sequenceKey", "s5I5m7BvYykB677MpFnOIw", "-aC4wx-8oOkCp6SFGXoyAg"],
+            ["==", "cameraType", "spherical"],
+            ["==", "sequenceId", "s5I5m7BvYykB677MpFnOIw"],
+            ["in", "sequenceId", "s5I5m7BvYykB677MpFnOIw", "-aC4wx-8oOkCp6SFGXoyAg"],
         ];
         function setFilter() {
             filterIndex = (filterIndex + 1) % filters.length;

debug/tags.html

@@ -44,7 +44,7 @@
             apiClient: "QjI1NnU0aG5FZFZISE56U3R5aWN4ZzpkYzg0NzE3MDA0YTRhZjlh",
             component: { cover: false, tag: true },
             container: "mly",
-            imageKey: "zarcRdNFZwg3FkXNcsFeGw",
+            imageId: "zarcRdNFZwg3FkXNcsFeGw",
             renderMode: Mapillary.RenderMode.Letterbox,
         });
 

docs/landing.md

@@ -23,7 +23,7 @@ You can use MapillaryJS as a `<script>` tag from a [CDN](https://unpkg.com/brows
         var mly = new Mapillary.Viewer({
             apiClient: '<your client id>',
             container: 'mly',
-            imageKey: '<your image key for initializing the viewer>',
+            imageId: '<your image id for initializing the viewer>',
         });
     </script>
 </body>
@@ -44,9 +44,9 @@ Refer to the [Examples](#examples) section below and the [Index](./modules.html)
 - [Dynamic size](https://bl.ocks.org/oscarlorentzon/5af00c5c07448233bcb62f5e2124ab39)
 - [Load immediately](https://bl.ocks.org/oscarlorentzon/530cf3b89b8f5d1ecfdf4b79946caade)
 - [No cover](https://bl.ocks.org/oscarlorentzon/4f6f7ae5e86db7446f78ccea1eb6c2a7)
-- [Initialize with or without a key](https://bl.ocks.org/oscarlorentzon/3eb61ce99b3c1cedba88942cb02f317d)
+- [Initialize with or without an image id](https://bl.ocks.org/oscarlorentzon/3eb61ce99b3c1cedba88942cb02f317d)
 - [Determine if viewer is navigable](https://bl.ocks.org/oscarlorentzon/898c55ef06917b07f165b7707d9f3a9e)
-- [Move to key](https://bl.ocks.org/oscarlorentzon/317da436accbcf2ff04c642f86cefaf8)
+- [Move to image id](https://bl.ocks.org/oscarlorentzon/317da436accbcf2ff04c642f86cefaf8)
 - [Move in direction](https://bl.ocks.org/oscarlorentzon/63ac2aa3f0998f0c2d2b01a42c8babe4)
 - [Viewer options](https://bl.ocks.org/oscarlorentzon/08613728a283d1306b2848533852d22a)
 - [Subscribe to node changed](https://bl.ocks.org/oscarlorentzon/c5380e11fb3e84b8096f16737eb44820)

jest.config.js

@@ -4,8 +4,13 @@ export default {
         "<rootDir>/src/**/*",
     ],
     coveragePathIgnorePatterns: [
-        "<rootDir>/src/Mapillary.js",
+        "<rootDir>/src/api/contracts/",
+        "<rootDir>/src/api/ents/",
         "<rootDir>/src/export/",
+        "<rootDir>/src/component/shaders/",
+        "<rootDir>/src/Mapillary.js",
+        "<rootDir>/src/viewer/events/",
+        "<rootDir>/src/viewer/options/",
         "interfaces"
     ],
     coverageProvider: "v8",

package.json

@@ -4,7 +4,7 @@
   "description": "A WebGL interactive street imagery library",
   "main": "dist/mapillary.js",
   "module": "dist/mapillary.module.js",
-  "style": "dist/mapillary.min.css",
+  "style": "dist/mapillary.css",
   "types": "dist/mapillary.d.ts",
   "type": "module",
   "license": "MIT",
@@ -14,6 +14,7 @@
     "imagery",
     "mapillary",
     "spatial-visualization",
+    "renderer",
     "street-imagery",
     "typescript",
     "viewer",
@@ -99,7 +100,7 @@
     "serve": "node server.js",
     "serve-docs": "python3 -m http.server",
     "start": "yarn start-init && concurrently --kill-others-on-fail -n 'compile,bundle,serve' 'yarn compile-watch' 'yarn bundle-watch' 'yarn serve'",
-    "start-init": "yarn clean-dist && yarn build-styles && yarn compile-incremental",
+    "start-init": "yarn clean-build && yarn clean-dist && yarn build-styles && yarn compile-incremental",
     "test": "yarn clean-build && yarn compile-test && jest"
   }
 }

spec/Bootstrap.ts

@@ -2,7 +2,7 @@ import { ComponentService } from "../src/component/ComponentService";
 import { MarkerSet } from "../src/component/marker/MarkerSet";
 import { Graph } from "../src/graph/Graph";
 import { TraversingState } from "../src/state/states/TraversingState";
-import { IInterpolator } from "../src/utils/interfaces/IInterpolator";
+import { Interpolator } from "../src/state/interfaces/IInterpolator";
 
 type Item = {
     lat: number;
@@ -39,7 +39,7 @@ class SpatialIndexMock<T extends Item> {
 
 class CoverMock { public activate(): void { /* noop */ } }
 
-class InterpolatorMock implements IInterpolator {
+class InterpolatorMock implements Interpolator {
     public solve(x: number): number { return x; }
 }