Add new sample viewer (#29)

    - upgraded yarn and other packages as needed to keep pace with the Web ecosystem.
    - removed existing sample viewer and added a new one that uses the same code from @vertigis/web-sdk to build and run as the samples themselves
    - linted
    - added simple tests for the sample viewer

.github/workflows/ci.yml

@@ -15,10 +15,12 @@ jobs:
             # Fixes https://github.com/expo/expo-github-action/issues/20
             - run: echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
 
-            - name: Use Node.js 16
+            - name: Use Node.js 20
               uses: actions/setup-node@v3
               with:
-                  node-version: 16.x
+                  node-version: 20.x
+
+            - run: corepack enable
 
             - run: yarn
 

.gitignore

@@ -1,4 +1,8 @@
 .DS_Store
 node_modules
-build
+dist
 package-lock.json
+**/build/*
+!viewer/build/index.html
+!viewer/build/_*
+.yarn

.prettierignore

@@ -1,2 +1,2 @@
-samples/*/build
+libraries/*/build
 viewer/build

.vscode/settings.json

@@ -13,5 +13,6 @@
         "unsync",
         "unsynced",
         "vertigis"
-    ]
+    ],
+    "eslint.workingDirectories": [{ "pattern": "./libraries/*/" }]
 }

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

cypress.config.ts

@@ -3,6 +3,7 @@ import { defineConfig } from "cypress";
 export default defineConfig({
     chromeWebSecurity: false,
     defaultCommandTimeout: 30000,
+    modifyObstructiveCode: false,
     numTestsKeptInMemory: 0,
     video: false,
     viewportWidth: 1280,

cypress/e2e/mapillary.cy.ts

@@ -27,10 +27,7 @@ const expectMapAndMarkerCenter = (lat: number, lon: number) =>
 
             // Check location marker center
             const locationMarker = mapView.map.allLayers
-                .find(
-                    (layer: any) =>
-                        layer.id === "__GCX_MAP_CONTEXT_AND_GEOLOCATION"
-                )
+                .find((layer: any) => layer.id === "__GCX_MARKUP_1")
                 .graphics.getItemAt(0);
             expect(locationMarker.geometry.latitude).to.be.closeTo(
                 lat,
@@ -42,11 +39,11 @@ const expectMapAndMarkerCenter = (lat: number, lon: number) =>
             );
         });
 
-// TODO: Temporarily disabled as this scene does not currently render on the
-// GitHub agents.
+// This sample currently does not run on GitHub due to needing to load a 3d
+// scene, but may be enabled on your workstation.
 xdescribe(sampleName, () => {
     it("synchronizes marker position with street view position", () => {
-        cy.visit(`http://localhost:3003/${sampleName}`);
+        cy.visit(`http://localhost:3001/#${sampleName}`);
 
         // The following test depends on the web scene being used and the current
         // state of the mapillary database.

cypress/e2e/sample-viewer.cy.ts

@@ -0,0 +1,61 @@
+const getIframeDocument = () => {
+    return cy
+        .get(`iframe[name="viewer"]`)
+        .its("0.contentDocument")
+        .should("exist");
+};
+
+const getIframeBody = () => {
+    return getIframeDocument()
+        .its("body")
+        .should("not.be.undefined")
+        .then(cy.wrap);
+};
+
+const getApplication = () => {
+    return getIframeBody()
+        .find("#gcx-app")
+        .should("have.attr", "library-loaded")
+        .then(cy.wrap);
+};
+
+const getMap = (id?: string) => {
+    const selector = id ? `[gcx-id="${id}"]` : ".gcx-map";
+    getApplication();
+    return getIframeBody()
+        .find(selector)
+        .and((el) => {
+            const mapId = el[0].getAttribute("data-layout-id");
+            const win = el[0].ownerDocument?.defaultView as Window & any;
+            const map = win.__maps?.[mapId!] || win.__scenes?.[mapId!];
+
+            // Wait for global map data to be available once initialized
+            expect(!!map, "expect map to be created").to.be.true;
+            expect(map.ready, "expect map to be ready").to.be.true;
+        })
+        .then(cy.wrap);
+};
+
+describe("sample-viewer", () => {
+    it("loads the viewer frame", () => {
+        cy.visit(`http://localhost:3001`);
+        getIframeBody();
+    });
+
+    it("loads the viewer application", () => {
+        cy.visit(`http://localhost:3001`);
+        getApplication();
+    });
+
+    it("loads the correct sample", () => {
+        cy.visit(`http://localhost:3001/#timeslider`);
+        getIframeBody()
+            .find(".gcx-readme")
+            .should("contain.text", "Time Slider");
+    });
+
+    it("loads a map", () => {
+        cy.visit(`http://localhost:3001/#timeslider`);
+        getMap();
+    });
+});

cypress/mapUtils.ts

@@ -1,5 +1,5 @@
 export function getMapOrSceneView(mapEl: JQuery<HTMLDivElement>) {
-    const mapId = mapEl[0].getAttribute("gcx-id")!;
+    const mapId = mapEl[0].getAttribute("data-layout-id")!;
     const win = mapEl[0].ownerDocument?.defaultView! as any;
 
     return win.__maps[mapId] || win.__scenes[mapId];

cypress/support/commands.js

@@ -29,8 +29,8 @@ Cypress.Commands.add("getViewer", { prevSubject: "optional" }, (subject) =>
         (subject &&
             cy
                 .wrap(subject, { log: false })
-                .find('iframe[data-cy="viewer-frame"]', { log: false })) ||
-        cy.get('iframe[data-cy="viewer-frame"]', { log: false })
+                .find('iframe[name="viewer"]', { log: false })) ||
+        cy.get('iframe[name="viewer"]', { log: false })
     )
         .its("0.contentDocument.body", { log: false })
         .should("not.be.empty")
@@ -54,7 +54,7 @@ Cypress.Commands.add("getMap", { prevSubject: "element" }, (subject, id) => {
         .wrap(subject, { log: false })
         .find(selector, { log: false, timeout: 30000 })
         .and((el) => {
-            const mapId = el[0].getAttribute("gcx-id");
+            const mapId = el[0].getAttribute("data-layout-id");
             const win = el[0].ownerDocument?.defaultView;
             const map = win.__maps?.[mapId] || win.__scenes?.[mapId];
 

libraries/3d-tools/.eslintrc.js

@@ -1,7 +1,7 @@
 module.exports = {
     extends: [require.resolve("@vertigis/web-sdk/config/.eslintrc")],
     parserOptions: {
-        tsconfigRootDir: __dirname,
+        tsConfigRootDir: __dirname,
     },
     rules: {},
 };

libraries/3d-tools/package.json

@@ -7,8 +7,8 @@
         "start": "vertigis-web-sdk start"
     },
     "devDependencies": {
-        "@vertigis/web-sdk": "^1.8.0",
-        "@vertigis/web": "^5.26.0",
-        "typescript": "~4.9.4"
+        "@vertigis/web": "^5.29.0",
+        "@vertigis/web-sdk": "^1.10.0",
+        "typescript": "~5.3.3"
     }
 }

libraries/3d-tools/src/components/AreaMeasurement/AreaMeasurement.tsx

@@ -1,14 +1,16 @@
-import { ReactElement, useState, useEffect } from "react";
+import type Accessor from "@arcgis/core/core/Accessor";
+import AreaMeasurement3DWidget from "@arcgis/core/widgets/AreaMeasurement3D";
 import { useWatchAndRerender } from "@vertigis/web/ui";
-import {
-    createEsriMapWidget,
+import Link from "@vertigis/web/ui/Link";
+import type {
     MapWidgetConstructor,
     MapWidgetProps,
 } from "@vertigis/web/ui/esriUtils";
-import Link from "@vertigis/web/ui/Link";
-import AreaMeasurement3DWidget from "@arcgis/core/widgets/AreaMeasurement3D";
-import type Accessor from "@arcgis/core/core/Accessor";
-import AreaMeasurementModel from "./AreaMeasurementModel";
+import { createEsriMapWidget } from "@vertigis/web/ui/esriUtils";
+import type { ReactElement } from "react";
+import { useState, useEffect } from "react";
+
+import type AreaMeasurementModel from "./AreaMeasurementModel";
 
 export type AreaMeasurementProps = MapWidgetProps<
     AreaMeasurementModel & Accessor

libraries/3d-tools/src/components/AreaMeasurement/AreaMeasurementModel.ts

@@ -1,9 +1,11 @@
-import { MapModel } from "@vertigis/web/mapping";
+import type { MapModel } from "@vertigis/web/mapping";
+import type {
+    PropertyDefs,
+    ComponentModelProperties,
+} from "@vertigis/web/models";
 import {
     ComponentModelBase,
     serializable,
-    PropertyDefs,
-    ComponentModelProperties,
     importModel,
 } from "@vertigis/web/models";
 
@@ -14,7 +16,7 @@ export default class AreaMeasurementModel extends ComponentModelBase<AreaMeasure
     @importModel("map-extension")
     map: MapModel | undefined;
 
-    protected _getSerializableProperties(): PropertyDefs<AreaMeasurementModelProperties> {
+    protected override _getSerializableProperties(): PropertyDefs<AreaMeasurementModelProperties> {
         const props = super._getSerializableProperties();
         return {
             ...props,

libraries/3d-tools/src/components/Daylight/Daylight.tsx

@@ -1,13 +1,15 @@
-import { ReactElement, useEffect, useState } from "react";
-import {
-    createEsriMapWidget,
+import type Accessor from "@arcgis/core/core/Accessor";
+import DaylightWidget from "@arcgis/core/widgets/Daylight";
+import { useWatchAndRerender, styled } from "@vertigis/web/ui";
+import { createEsriMapWidget } from "@vertigis/web/ui/esriUtils";
+import type {
     MapWidgetConstructor,
     MapWidgetProps,
 } from "@vertigis/web/ui/esriUtils";
-import DaylightWidget from "@arcgis/core/widgets/Daylight";
-import type Accessor from "@arcgis/core/core/Accessor";
-import { useWatchAndRerender, styled } from "@vertigis/web/ui";
-import DaylightModel from "./DaylightModel";
+import { useEffect, useState } from "react";
+import type { ReactElement } from "react";
+
+import type DaylightModel from "./DaylightModel";
 
 export type DaylightWidgetProps = MapWidgetProps<DaylightModel & Accessor>;
 

libraries/3d-tools/src/components/Daylight/DaylightModel.ts

@@ -1,9 +1,11 @@
-import { MapModel } from "@vertigis/web/mapping";
+import type { MapModel } from "@vertigis/web/mapping";
+import type {
+    PropertyDefs,
+    ComponentModelProperties,
+} from "@vertigis/web/models";
 import {
     ComponentModelBase,
     serializable,
-    PropertyDefs,
-    ComponentModelProperties,
     importModel,
 } from "@vertigis/web/models";
 
@@ -30,7 +32,7 @@ export default class DaylightModel extends ComponentModelBase<DaylightModelPrope
     dateOrSeason: DateOrSeason;
     playSpeedMultiplier: number;
 
-    protected _getSerializableProperties(): PropertyDefs<DaylightModelProperties> {
+    protected override _getSerializableProperties(): PropertyDefs<DaylightModelProperties> {
         const props = super._getSerializableProperties();
         return {
             ...props,

libraries/3d-tools/src/components/Daylight/designer.ts

@@ -1,17 +1,19 @@
-import {
-    applyComponentModelDesignerSettings,
+import type {
     ApplyDesignerSettingsCallback,
     ComponentModelDesignerSettings,
     DesignerSettings,
-    getComponentModelDesignerSettings,
-    getComponentModelDesignerSettingsSchema,
     GetDesignerSettingsCallback,
     GetDesignerSettingsSchemaCallback,
     Setting,
     SettingsSchema,
 } from "@vertigis/web/designer";
+import {
+    applyComponentModelDesignerSettings,
+    getComponentModelDesignerSettings,
+    getComponentModelDesignerSettingsSchema,
+} from "@vertigis/web/designer";
 
-import DaylightModel from "./DaylightModel";
+import type DaylightModel from "./DaylightModel";
 
 type DateOrSeason = "date" | "season";
 

libraries/3d-tools/src/components/ElevationProfile/ElevationProfile.tsx

@@ -1,15 +1,15 @@
-import { ReactElement, useEffect, useState } from "react";
+import type Accessor from "@arcgis/core/core/Accessor";
 import ElevationProfileWidget from "@arcgis/core/widgets/ElevationProfile";
 import ElevationProfileLineGround from "@arcgis/core/widgets/ElevationProfile/ElevationProfileLineGround";
 import ElevationProfileLineInput from "@arcgis/core/widgets/ElevationProfile/ElevationProfileLineInput";
 import ElevationProfileLineView from "@arcgis/core/widgets/ElevationProfile/ElevationProfileLineView";
-import type Accessor from "@arcgis/core/core/Accessor";
 import { useWatchAndRerender } from "@vertigis/web/ui";
-import {
-    createEsriMapWidget,
-    MapWidgetProps,
-} from "@vertigis/web/ui/esriUtils";
-import ElevationProfileModel from "./ElevationProfileModel";
+import type { MapWidgetProps } from "@vertigis/web/ui/esriUtils";
+import { createEsriMapWidget } from "@vertigis/web/ui/esriUtils";
+import { useEffect, useState } from "react";
+import type { ReactElement } from "react";
+
+import type ElevationProfileModel from "./ElevationProfileModel";
 
 export type ElevationProfileWidgetProps = MapWidgetProps<
     ElevationProfileModel & Accessor

libraries/3d-tools/src/components/ElevationProfile/ElevationProfileModel.ts

@@ -1,9 +1,11 @@
-import { MapModel } from "@vertigis/web/mapping";
+import type { MapModel } from "@vertigis/web/mapping";
+import type {
+    PropertyDefs,
+    ComponentModelProperties,
+} from "@vertigis/web/models";
 import {
     ComponentModelBase,
     serializable,
-    PropertyDefs,
-    ComponentModelProperties,
     importModel,
 } from "@vertigis/web/models";
 export interface ElevationProfileModelProperties
@@ -42,7 +44,7 @@ export default class ElevationProfileModel extends ComponentModelBase<ElevationP
     profileLineInputColor?: string;
     profileLineViewColor?: string;
 
-    protected _getSerializableProperties(): PropertyDefs<ElevationProfileModelProperties> {
+    protected override _getSerializableProperties(): PropertyDefs<ElevationProfileModelProperties> {
         const props = super._getSerializableProperties();
         return {
             ...props,

libraries/3d-tools/src/components/ElevationProfile/designer.ts

@@ -1,21 +1,22 @@
-import {
-    applyComponentModelDesignerSettings,
+import type { ColorJson } from "@vertigis/arcgis-extensions/json/SymbolJson";
+import { toColor } from "@vertigis/web/branding";
+import type {
     ApplyDesignerSettingsCallback,
     ComponentModelDesignerSettings,
     DesignerSettings,
-    getComponentModelDesignerSettings,
-    getComponentModelDesignerSettingsSchema,
     GetDesignerSettingsCallback,
     GetDesignerSettingsSchemaCallback,
     Setting,
     SettingsSchema,
 } from "@vertigis/web/designer";
-import type { Color as ColorJson } from "@vertigis/arcgis-extensions/portal/Symbol";
-import { toColor } from "@vertigis/web/branding";
+import {
+    applyComponentModelDesignerSettings,
+    getComponentModelDesignerSettings,
+    getComponentModelDesignerSettingsSchema,
+} from "@vertigis/web/designer";
 
-import ElevationProfileModel, {
-    ElevationProfileModelProperties,
-} from "./ElevationProfileModel";
+import type { ElevationProfileModelProperties } from "./ElevationProfileModel";
+import type ElevationProfileModel from "./ElevationProfileModel";
 
 export interface ElevationProfileSettings
     extends ComponentModelDesignerSettings {