FlatTheme support (#1945)

* HARP-12599: Adds FlatTheme support

Signed-off-by: Frauke Fritz <frauke.fritz@here.com>

* HARP-12599: Adds async Theme Setting in DataSources

  * Themes will be loaded/parsed and therefore resolved

Signed-off-by: Frauke Fritz <frauke.fritz@here.com>

@here/harp-datasource-protocol/lib/Theme.ts

@@ -3,7 +3,6 @@
  * Licensed under Apache 2.0, see full license in LICENSE
  * SPDX-License-Identifier: Apache-2.0
  */
-
 import { Vector3Like } from "@here/harp-geoutils/lib/math/Vector3Like";
 
 import { JsonExpr, JsonValue } from "./Expr";

@here/harp-mapview-decoder/lib/TileDataSource.ts

@@ -3,7 +3,7 @@
  * Licensed under Apache 2.0, see full license in LICENSE
  * SPDX-License-Identifier: Apache-2.0
  */
-import { ITileDecoder, Theme, TileInfo } from "@here/harp-datasource-protocol";
+import { FlatTheme, ITileDecoder, StyleSet, Theme, TileInfo } from "@here/harp-datasource-protocol";
 import { TileKey, TilingScheme } from "@here/harp-geoutils";
 import {
     ConcurrentDecoderFacade,
@@ -14,6 +14,7 @@ import {
     Tile,
     TileLoaderState
 } from "@here/harp-mapview";
+import { ThemeLoader } from "@here/harp-mapview/lib/ThemeLoader";
 import { ILogger, LoggerManager } from "@here/harp-utils";
 
 import { DataProvider } from "./DataProvider";
@@ -198,15 +199,14 @@ export class TileDataSource<TileType extends Tile = Tile> extends DataSource {
      * `styleSetName` property) is found in `theme`.
      * @override
      */
-    setTheme(theme: Theme, languages?: string[], styleSetName?: string): void {
-        if (styleSetName !== undefined) {
-            this.styleSetName = styleSetName;
-        }
+    async setTheme(theme: Theme | FlatTheme, languages?: string[]): Promise<void> {
+        // Seems superfluent, but the call to  ThemeLoader.load will resolve extends etc.
+        theme = await ThemeLoader.load(theme);
 
-        const styleSet =
-            this.styleSetName !== undefined && theme.styles
-                ? theme.styles[this.styleSetName]
-                : undefined;
+        let styleSet: StyleSet | undefined;
+        if (this.styleSetName !== undefined && theme.styles !== undefined) {
+            styleSet = theme.styles[this.styleSetName];
+        }
 
         if (styleSet !== undefined) {
             this.m_decoder.configure({

@here/harp-mapview-decoder/test/TileDataSourceTest.ts

@@ -3,12 +3,16 @@
  * Licensed under Apache 2.0, see full license in LICENSE
  * SPDX-License-Identifier: Apache-2.0
  */
-
-//    Mocha discourages using arrow functions, see https://mochajs.org/#arrow-functions
-
 import "@here/harp-fetch";
 
-import { DecodedTile, Geometry, ITileDecoder, TileInfo } from "@here/harp-datasource-protocol";
+import {
+    DecodedTile,
+    DecoderOptions,
+    Geometry,
+    ITileDecoder,
+    StyleSet,
+    TileInfo
+} from "@here/harp-datasource-protocol";
 import {
     Projection,
     TileKey,
@@ -21,6 +25,8 @@ import * as sinon from "sinon";
 
 import { DataProvider, TileDataSource, TileFactory } from "../index";
 
+//    Mocha discourages using arrow functions, see https://mochajs.org/#arrow-functions
+
 class MockDataProvider extends DataProvider {
     /** @override */ async connect() {
         // empty implementation
@@ -65,7 +71,7 @@ function createMockTileDecoder() {
         ): Promise<TileInfo | undefined> {
             return await Promise.resolve(undefined);
         },
-        configure() {
+        configure(options: DecoderOptions) {
             // no configuration needed for mock
         }
     };
@@ -79,7 +85,8 @@ function createMockMapView() {
         projection: webMercatorProjection,
         getDataSourceByName() {},
         statistics: new Statistics(),
-        frameNumber: 0
+        frameNumber: 0,
+        clearTileCache: () => {}
     } as any) as MapView;
 }
 
@@ -308,4 +315,32 @@ describe("TileDataSource", function() {
         assert.equal(testedDataSource.maxZoomLevel, 17);
         assert.equal(testedDataSource.maxDataLevel, 17);
     });
+
+    it("supports setting of theme", async function() {
+        const mockDecoder = createMockTileDecoder();
+        const testedDataSource = new TileDataSource(new TileFactory(Tile), {
+            styleSetName: "tilezen",
+            tilingScheme: webMercatorTilingScheme,
+            dataProvider: new MockDataProvider(),
+            decoder: mockDecoder,
+            minZoomLevel: 3,
+            maxZoomLevel: 17
+        });
+
+        testedDataSource.attach(createMockMapView());
+
+        const styles: StyleSet = [
+            {
+                styleSet: "tilezen",
+                technique: "none"
+            }
+        ];
+
+        await testedDataSource.setTheme({
+            styles
+        });
+
+        assert(mockDecoder.configure.calledOnce);
+        assert(mockDecoder.configure.calledWith(sinon.match({ styleSet: styles })));
+    });
 });

@here/harp-mapview/lib/BackgroundDataSource.ts

@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { Theme } from "@here/harp-datasource-protocol";
+import { FlatTheme, Theme } from "@here/harp-datasource-protocol";
 import { TileKey, TilingScheme, webMercatorTilingScheme } from "@here/harp-geoutils";
 
 import { DataSource } from "./DataSource";
@@ -53,7 +53,7 @@ export class BackgroundDataSource extends DataSource {
     }
 
     /** @override */
-    setTheme(theme: Theme, languages?: string[]) {
+    async setTheme(theme: Theme | FlatTheme, languages?: string[]): Promise<void> {
         this.mapView.clearTileCache(this.name);
     }
 

@here/harp-mapview/lib/DataSource.ts

@@ -3,7 +3,7 @@
  * Licensed under Apache 2.0, see full license in LICENSE
  * SPDX-License-Identifier: Apache-2.0
  */
-import { Theme, ValueMap } from "@here/harp-datasource-protocol";
+import { FlatTheme, Theme, ValueMap } from "@here/harp-datasource-protocol";
 import { ExprPool } from "@here/harp-datasource-protocol/lib/ExprPool";
 import { Projection, TileKey, TilingScheme } from "@here/harp-geoutils";
 import { assert, LoggerManager } from "@here/harp-utils";
@@ -462,9 +462,8 @@ export abstract class DataSource extends THREE.EventDispatcher {
      *
      * @param theme - The Theme to be applied
      * @param languages - optional: The languages in priority order to be applied
-     * @param styleSetName - optional: The Name of the StyleSet to be used.
      */
-    setTheme(theme: Theme, languages?: string[], styleSetName?: string): void {
+    async setTheme(theme: Theme | FlatTheme, languages?: string[]): Promise<void> {
         // to be overwritten by subclasses
     }
 

@here/harp-mapview/lib/MapView.ts

@@ -5,6 +5,7 @@
  */
 import {
     Env,
+    FlatTheme,
     FontCatalogConfig,
     MapEnv,
     PostEffects,
@@ -321,7 +322,7 @@ export interface MapViewOptions extends TextElementsRendererOptions, Partial<Loo
      *
      * @see {@link ThemeLoader.load} for details how theme is loaded
      */
-    theme?: string | Theme | Promise<Theme>;
+    theme?: string | Theme | FlatTheme | Promise<Theme>;
 
     /**
      * Resolve `URI` referenced in `MapView` assets using this resolver.
@@ -1461,7 +1462,7 @@ export class MapView extends EventDispatcher {
     /**
      * Changes the `Theme`used by this `MapView`to style map elements.
      */
-    async setTheme(theme: Theme | string): Promise<Theme> {
+    async setTheme(theme: Theme | FlatTheme | string): Promise<Theme> {
         const newTheme = await this.m_themeManager.setTheme(theme);
 
         this.THEME_LOADED_EVENT.time = Date.now();

@here/harp-mapview/lib/MapViewThemeManager.ts

@@ -3,7 +3,13 @@
  * Licensed under Apache 2.0, see full license in LICENSE
  * SPDX-License-Identifier: Apache-2.0
  */
-import { ImageDefinitions, ImageTexture, PoiTableRef, Theme } from "@here/harp-datasource-protocol";
+import {
+    FlatTheme,
+    ImageDefinitions,
+    ImageTexture,
+    PoiTableRef,
+    Theme
+} from "@here/harp-datasource-protocol";
 import { LoggerManager, UriResolver } from "@here/harp-utils";
 
 import { MapViewImageCache } from "./image/MapViewImageCache";
@@ -25,7 +31,7 @@ export class MapViewThemeManager {
         this.m_imageCache = new MapViewImageCache(this.m_mapView);
     }
 
-    async setTheme(theme: Theme | string): Promise<Theme> {
+    async setTheme(theme: Theme | FlatTheme | string): Promise<Theme> {
         if (this.isUpdating()) {
             logger.warn("Formerly set Theme is still updating, update will be canceled");
             this.cancelThemeUpdate();
@@ -59,10 +65,11 @@ export class MapViewThemeManager {
         return this.isUpdating() ? {} : this.m_theme;
     }
 
-    private async loadTheme(theme: Theme | string): Promise<Theme> {
+    private async loadTheme(theme: Theme | string | FlatTheme): Promise<Theme> {
+        let loadedTheme: Theme = {};
         if (typeof theme === "string" || !ThemeLoader.isThemeLoaded(theme)) {
             try {
-                theme = await ThemeLoader.load(theme, {
+                loadedTheme = await ThemeLoader.load(theme, {
                     uriResolver: this.m_uriResolver,
                     signal: this.createAbortController().signal
                 });
@@ -72,10 +79,11 @@ export class MapViewThemeManager {
                 } else {
                     logger.error(`failed to load theme: ${error}`);
                 }
-                theme = {};
             }
+        } else {
+            loadedTheme = theme as Theme;
         }
-        return theme;
+        return loadedTheme;
     }
 
     private async updateTheme(theme: Theme): Promise<void> {

@here/harp-mapview/lib/PolarTileDataSource.ts

@@ -3,7 +3,13 @@
  * Licensed under Apache 2.0, see full license in LICENSE
  * SPDX-License-Identifier: Apache-2.0
  */
-import { StandardGeometryKind, StyleSet, Technique, Theme } from "@here/harp-datasource-protocol";
+import {
+    FlatTheme,
+    StandardGeometryKind,
+    StyleSet,
+    Technique,
+    Theme
+} from "@here/harp-datasource-protocol";
 import { MapEnv, StyleSetEvaluator } from "@here/harp-datasource-protocol/index-decoder";
 import {
     GeoCoordinates,
@@ -18,6 +24,7 @@ import * as THREE from "three";
 import { DataSource, DataSourceOptions } from "./DataSource";
 import { createMaterial } from "./DecodedTileHelpers";
 import { MapObjectAdapter } from "./MapObjectAdapter";
+import { ThemeLoader } from "./ThemeLoader";
 import { Tile } from "./Tile";
 
 export interface PolarTileDataSourceOptions extends DataSourceOptions {
@@ -120,17 +127,14 @@ export class PolarTileDataSource extends DataSource {
     }
 
     /** @override */
-    setTheme(theme: Theme, languages?: string[], styleSetName?: string): void {
+    async setTheme(theme: Theme | FlatTheme, languages?: string[]): Promise<void> {
+        // Seems superfluent, but the call to  ThemeLoader.load will resolve extends etc.
+        theme = await ThemeLoader.load(theme);
         let styleSet: StyleSet | undefined;
 
-        if (styleSetName) {
-            this.styleSetName = styleSetName;
-        }
-
         if (this.styleSetName !== undefined && theme.styles !== undefined) {
             styleSet = theme.styles[this.styleSetName];
         }
-        this.dispose();
 
         this.m_styleSetEvaluator = new StyleSetEvaluator({
             styleSet: styleSet ?? [],

@here/harp-mapview/lib/ThemeLoader.ts

@@ -169,7 +169,8 @@ export class ThemeLoader {
      * @param theme -
      */
     static isThemeLoaded(theme: Theme | FlatTheme): boolean {
-        return theme.extends === undefined;
+        // TODO: Remove array check, when FlatTheme is fully supported
+        return theme.extends === undefined && !Array.isArray(theme.styles);
     }
 
     /**

@here/harp-mapview/test/MapViewTest.ts

@@ -3,7 +3,6 @@
  * Licensed under Apache 2.0, see full license in LICENSE
  * SPDX-License-Identifier: Apache-2.0
  */
-
 import { Expr, getProjectionName } from "@here/harp-datasource-protocol";
 import {
     GeoBox,
@@ -1659,6 +1658,24 @@ describe("MapView", function() {
             expect(theme.styles).to.not.be.empty;
         });
 
+        it("loads a 'flat' theme ", async function() {
+            mapView = new MapView({
+                canvas,
+                theme: {
+                    styles: [
+                        {
+                            technique: "none",
+                            styleSet: "tilezen"
+                        }
+                    ]
+                }
+            });
+
+            const theme = await mapView.getTheme();
+            expect(theme.styles).to.not.be.empty;
+            expect(theme.styles?.tilezen).to.not.be.undefined;
+        });
+
         it("allows to reset theme", async function() {
             const relativeToAppUrl = makeUrlRelative(appBaseUrl, sampleThemeUrl);
 

@here/harp-mapview/test/PolarTileDataSourceTest.ts

@@ -159,17 +159,17 @@ describe("PolarTileDataSource", function() {
             assert.equal(south.objects.length, 0);
         });
 
-        it("Creates tile with objects if has pole styles", function() {
-            dataSource.setTheme(theme_south);
+        it("Creates tile with objects if has pole styles", async function() {
+            await dataSource.setTheme(theme_south);
             const north = dataSource.getTile(TileKey.fromRowColumnLevel(2, 1, 2));
             const south = dataSource.getTile(TileKey.fromRowColumnLevel(0, 1, 2));
 
             assert.equal(north.objects.length, 0);
             assert.equal(south.objects.length, 1);
         });
 
-        it("Creates meshes with proper materials", function() {
-            dataSource.setTheme(theme_both);
+        it("Creates meshes with proper materials", async function() {
+            await dataSource.setTheme(theme_both);
             const north = dataSource.getTile(TileKey.fromRowColumnLevel(2, 1, 2));
             const south = dataSource.getTile(TileKey.fromRowColumnLevel(0, 1, 2));
 
@@ -184,8 +184,8 @@ describe("PolarTileDataSource", function() {
             });
         });
 
-        it("Don't create geometries if disposed", function() {
-            dataSource.setTheme(theme_both);
+        it("Don't create geometries if disposed", async function() {
+            await dataSource.setTheme(theme_both);
             dataSource.dispose();
 
             const north = dataSource.getTile(TileKey.fromRowColumnLevel(2, 1, 2));
@@ -216,7 +216,7 @@ describe("PolarTileDataSource", function() {
             return points;
         }
 
-        beforeEach(function() {
+        beforeEach(async function() {
             dataSource = new PolarTileDataSource({});
 
             mapViewStub = sinon.createStubInstance(MapView);
@@ -227,7 +227,7 @@ describe("PolarTileDataSource", function() {
                 return renderer;
             });
             dataSource.attach((mapViewStub as unknown) as MapView);
-            dataSource.setTheme(theme_both);
+            await dataSource.setTheme(theme_both);
         });
 
         it("Creates empty tile if outside of pole radius", function() {