@map-colonies/react-components 3.9.0 → 3.10.0

package/dist/smart-table/smart-table-row.js

@@ -1,24 +1,35 @@
 "use strict";
 /* eslint-disable */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
 var __importStar = (this && this.__importStar) || function (mod) {
     if (mod && mod.__esModule) return mod;
     var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.SmartTableRow = void 0;
 var react_1 = __importStar(require("react"));
 var core_1 = require("@material-ui/core");
 var icons_1 = require("@material-ui/icons");
 function SmartTableRow(props) {
-    var _a;
     var cellsMetadata = props.cellsMetadata, isRowSelected = props.isRowSelected, item = props.item, onRowSelected = props.onRowSelected, rowIndex = props.rowIndex, isCollapseable = props.isCollapseable, collapsedElement = props.collapsedElement;
-    var _b = react_1.useState(false), open = _b[0], setOpen = _b[1];
+    var _a = react_1.useState(false), open = _a[0], setOpen = _a[1];
     var cellCount = cellsMetadata.length;
     var handleClick = function () {
-        var _a;
-        (_a = onRowSelected) === null || _a === void 0 ? void 0 : _a(rowIndex);
+        onRowSelected === null || onRowSelected === void 0 ? void 0 : onRowSelected(rowIndex);
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(core_1.TableRow, { hover: true, selected: isRowSelected, onClick: handleClick },
@@ -30,7 +41,6 @@ function SmartTableRow(props) {
             cellsMetadata.map(function (cell) { return (react_1.default.createElement(core_1.TableCell, { key: cell.id + rowIndex.toString(), align: cell.numeric ? 'right' : 'left', padding: cell.disablePadding ? 'none' : 'default' }, cell.transform ? cell.transform(item[cell.id]) : item[cell.id])); })),
         isCollapseable && (react_1.default.createElement(core_1.TableRow, null,
             react_1.default.createElement(core_1.TableCell, { style: { paddingBottom: 0, paddingTop: 0 }, colSpan: cellCount + 1 },
-                react_1.default.createElement(core_1.Collapse, { in: open, unmountOnExit: true, timeout: "auto" }, (_a = collapsedElement) === null || _a === void 0 ? void 0 : _a(item)))))));
+                react_1.default.createElement(core_1.Collapse, { in: open, unmountOnExit: true, timeout: "auto" }, collapsedElement === null || collapsedElement === void 0 ? void 0 : collapsedElement(item)))))));
 }
 exports.SmartTableRow = SmartTableRow;
-//# sourceMappingURL=smart-table-row.js.map

package/dist/smart-table/smart-table-types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare type Order = 'asc' | 'desc';
 export declare type ElementFunction<T> = (item: T) => JSX.Element;
 export interface CellMetadata<T> {
@@ -8,4 +7,3 @@ export interface CellMetadata<T> {
     numeric: boolean;
     transform?: (value: T[keyof T]) => string;
 }
-//# sourceMappingURL=smart-table-types.d.ts.map

package/dist/smart-table/smart-table-types.js

@@ -1,3 +1,2 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=smart-table-types.js.map

package/dist/smart-table/smart-table.d.ts

@@ -15,4 +15,3 @@ export interface SmartTableProps<T> {
     handleChangeRowsPerPage: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 export declare function SmartTable<T>(props: SmartTableProps<T>): JSX.Element;
-//# sourceMappingURL=smart-table.d.ts.map

package/dist/smart-table/smart-table.js

@@ -1,12 +1,25 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
 var __importStar = (this && this.__importStar) || function (mod) {
     if (mod && mod.__esModule) return mod;
     var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.SmartTable = void 0;
 /* eslint-disable */
 var react_1 = __importStar(require("react"));
 var core_1 = require("@material-ui/core");
@@ -36,4 +49,3 @@ function SmartTable(props) {
         react_1.default.createElement(core_1.TablePagination, { rowsPerPage: rowsPerPage, rowsPerPageOptions: [5, 10], component: "div", count: count, page: page, onChangePage: handleChangePage, onChangeRowsPerPage: handleChangeRowsPerPage })));
 }
 exports.SmartTable = SmartTable;
-//# sourceMappingURL=smart-table.js.map

package/dist/theme/index.d.ts

@@ -1,2 +1 @@
 export * from './theme';
-//# sourceMappingURL=index.d.ts.map

package/dist/theme/index.js

@@ -1,7 +1,13 @@
 "use strict";
-function __export(m) {
-    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-}
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-__export(require("./theme"));
-//# sourceMappingURL=index.js.map
+__exportStar(require("./theme"), exports);

package/dist/theme/theme.d.ts

@@ -6,4 +6,3 @@ declare const mapMcToMuiTheme: (mcTheme: {
     [key: string]: string;
 }, prefersDarkMode?: boolean) => import("@material-ui/core").Theme;
 export { useMediaQuery, useMappedMuiTheme, mapMcToMuiTheme };
-//# sourceMappingURL=theme.d.ts.map

package/dist/theme/theme.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.mapMcToMuiTheme = exports.useMappedMuiTheme = exports.useMediaQuery = void 0;
 var react_1 = __importDefault(require("react"));
 var core_1 = require("@material-ui/core");
 var useMediaQuery_1 = __importDefault(require("@material-ui/core/useMediaQuery"));
@@ -121,4 +122,3 @@ textIconOnDark: 'rgba(255, 255, 255, 0.5)', */
 --mdc-theme-text-hint-on-dark: rgba(255, 255, 255, 0.5);
 --mdc-theme-text-disabled-on-dark: rgba(255, 255, 255, 0.5);
 --mdc-theme-text-icon-on-dark: rgba(255, 255, 255, 0.5); */
-//# sourceMappingURL=theme.js.map

package/dist/utils/map.d.ts

@@ -1,4 +1,3 @@
 export declare const toRadian: (num: number) => number;
 export declare const toDegrees: (num: number) => number;
 export declare const getAltitude: (mapzoom: number) => number;
-//# sourceMappingURL=map.d.ts.map

package/dist/utils/map.js

@@ -1,13 +1,16 @@
 "use strict";
 /* eslint-disable @typescript-eslint/no-magic-numbers */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.toRadian = function (num) {
+exports.getAltitude = exports.toDegrees = exports.toRadian = void 0;
+var toRadian = function (num) {
     return (num * Math.PI) / 180;
 };
-exports.toDegrees = function (num) {
+exports.toRadian = toRadian;
+var toDegrees = function (num) {
     return num * (180 / Math.PI);
 };
-exports.getAltitude = function (mapzoom) {
+exports.toDegrees = toDegrees;
+var getAltitude = function (mapzoom) {
     //this equation is a transformation of the angular size equation solving for D. See: http://en.wikipedia.org/wiki/Forced_perspective
     var firstPartOfEq = 0.05 * (591657550.5 / Math.pow(2, mapzoom - 1) / 2); //amount displayed is .05 meters and map scale =591657550.5/(Math.pow(2,(mapzoom-1))))
     //this bit ^ essentially gets the h value in the angular size eq then divides it by 2
@@ -15,4 +18,4 @@ exports.getAltitude = function (mapzoom) {
         (Math.cos(exports.toRadian(85.362 / 2)) / Math.sin(exports.toRadian(85.362 / 2))); //85.362 is angle which google maps displays on a 5cm wide screen
     return googleearthaltitude;
 };
-//# sourceMappingURL=map.js.map
+exports.getAltitude = getAltitude;

package/dist/utils/projections.d.ts

@@ -4,4 +4,3 @@ export declare enum Proj {
 }
 export declare const COORDINATES_WGS_FRACTION_DIGITS = 5;
 export declare const COORDINATES_MERCATOR_FRACTION_DIGITS = 2;
-//# sourceMappingURL=projections.d.ts.map

package/dist/utils/projections.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.COORDINATES_MERCATOR_FRACTION_DIGITS = exports.COORDINATES_WGS_FRACTION_DIGITS = exports.Proj = void 0;
 var Proj;
 (function (Proj) {
     Proj["WGS84"] = "EPSG:4326";
@@ -7,4 +8,3 @@ var Proj;
 })(Proj = exports.Proj || (exports.Proj = {}));
 exports.COORDINATES_WGS_FRACTION_DIGITS = 5;
 exports.COORDINATES_MERCATOR_FRACTION_DIGITS = 2;
-//# sourceMappingURL=projections.js.map

package/dist/utils/story.d.ts

@@ -10,4 +10,3 @@ export interface CSFStory<StoryFnReturnType = unknown> {
     argTypes?: ArgTypes;
     (): StoryFnReturnType;
 }
-//# sourceMappingURL=story.d.ts.map

package/dist/utils/story.js

@@ -1,3 +1,2 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=story.js.map

package/package.json

@@ -1,100 +1,102 @@
-{
-  "name": "@map-colonies/react-components",
-  "version": "3.9.0",
-  "module": "dist/index.js",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "bugs": {
-    "url": "https://github.com/MapColonies/shared-components/issues"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/MapColonies/shared-components.git"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "license": "MIT",
-  "dependencies": {
-    "@date-io/date-fns": "^1.3.13",
-    "@here/quantized-mesh-decoder": "^1.2.8",
-    "@map-colonies/react-core": "^3.3.1",
-    "@material-ui/core": "^4.11.0",
-    "@material-ui/icons": "^4.9.1",
-    "@material-ui/pickers": "^3.2.10",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
-    "@turf/bbox": "^6.0.1",
-    "@turf/bbox-polygon": "^6.0.1",
-    "@turf/boolean-point-in-polygon": "^6.5.0",
-    "@turf/helpers": "^6.1.4",
-    "@turf/rewind": "^5.1.5",
-    "@types/geojson": "^7946.0.7",
-    "@types/jest": "^24.0.0",
-    "@types/node": "^12.0.0",
-    "@types/ol": "^6.3.1",
-    "@types/react": "^16.9.0",
-    "@types/react-dom": "^16.9.0",
-    "@types/textarea-caret": "^3.0.1",
-    "cesium": "1.84.0",
-    "copy-webpack-plugin": "^6.3.1",
-    "copyfiles": "2.3.0",
-    "cross-env": "7.0.2",
-    "date-fns": "^2.14.0",
-    "get-input-selection": "^1.1.4",
-    "lodash": "^4.17.20",
-    "ol": "^6.4.3",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-scripts": "3.4.1",
-    "resium": "^1.13.1",
-    "rimraf": "3.0.2",
-    "textarea-caret": "^3.1.0",
-    "typescript": "~3.7.2"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "npx rimraf dist && tsc --project tsbuildconfig.json && yarn run copyassets:components",
-    "test": "react-scripts test",
-    "test:nowatch": "react-scripts test --coverage --watchAll=false --reporters='default' --reporters='jest-html-reporters'",
-    "eject": "react-scripts eject",
-    "postbuild": "copyfiles -u 2 -e \"**/*.ts\" -e \"**/*.tsx\" \"src/lib/**/*\" dist",
-    "copyassets:all": "yarn run copyassets:cesium",
-    "copyassets:cesium": "copyfiles -u 5 \"../../node_modules/cesium/Build/Cesium/**/*\" \"storybook-static\"",
-    "copyassets:components": "copyfiles -u 1 \"./public/assets/**/*\" \"dist\"",
-    "storybook": "yarn run copyassets:all && start-storybook -p 9010 -s public,\"storybook-static\"",
-    "storybook-https": "yarn run copyassets:all && start-storybook --ssl-cert ~/example.crt --ssl-key ~/example.key --https -p 9010 -s public,\"storybook-static\"",
-    "build-storybook": "build-storybook -s public",
-    "eslint-check": "npx eslint . --ext .ts,.tsx"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "devDependencies": {
-    "@types/enzyme": "^3.10.5",
-    "@types/enzyme-adapter-react-16": "^1.0.6",
-    "@types/lodash": "^4.14.165",
-    "@types/react-test-renderer": "^16.9.2",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.2",
-    "jest-enzyme": "^7.1.2",
-    "react-test-renderer": "^16.13.1"
-  },
-  "gitHead": "3e15e1e543de64636187a5482827f6f2ba1de4bb",
-  "jest": {
-    "coverageReporters": [
-      "text",
-      "html"
-    ]
-  }
-}
+{
+  "name": "@map-colonies/react-components",
+  "version": "3.10.0",
+  "module": "dist/index.js",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "bugs": {
+    "url": "https://github.com/MapColonies/shared-components/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/MapColonies/shared-components.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@date-io/date-fns": "^1.3.13",
+    "@here/quantized-mesh-decoder": "^1.2.8",
+    "@map-colonies/react-core": "^3.3.1",
+    "@material-ui/core": "^4.11.0",
+    "@material-ui/icons": "^4.9.1",
+    "@material-ui/pickers": "^3.2.10",
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.3.2",
+    "@testing-library/user-event": "^7.1.2",
+    "@turf/bbox": "^6.0.1",
+    "@turf/bbox-polygon": "^6.0.1",
+    "@turf/boolean-point-in-polygon": "^6.5.0",
+    "@turf/helpers": "^6.1.4",
+    "@turf/rewind": "^5.1.5",
+    "@types/geojson": "^7946.0.7",
+    "@types/jest": "^24.0.0",
+    "@types/node": "^12.0.0",
+    "@types/ol": "^6.3.1",
+    "@types/react": "^16.9.0",
+    "@types/react-dom": "^16.9.0",
+    "@types/textarea-caret": "^3.0.1",
+    "cesium": "1.84.0",
+    "chonky": "^2.3.2",
+    "chonky-icon-fontawesome": "^2.3.2",
+    "copy-webpack-plugin": "^6.3.1",
+    "copyfiles": "2.3.0",
+    "cross-env": "7.0.2",
+    "date-fns": "^2.14.0",
+    "get-input-selection": "^1.1.4",
+    "lodash": "^4.17.20",
+    "ol": "^6.4.3",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-scripts": "3.4.1",
+    "resium": "^1.13.1",
+    "rimraf": "3.0.2",
+    "textarea-caret": "^3.1.0",
+    "typescript": "4.2.2"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "npx rimraf dist && tsc --project tsbuildconfig.json && yarn run copyassets:components",
+    "test": "react-scripts test",
+    "test:nowatch": "react-scripts test --coverage --watchAll=false --reporters='default' --reporters='jest-html-reporters'",
+    "eject": "react-scripts eject",
+    "postbuild": "copyfiles -u 2 -e \"**/*.ts\" -e \"**/*.tsx\" \"src/lib/**/*\" dist",
+    "copyassets:all": "yarn run copyassets:cesium",
+    "copyassets:cesium": "copyfiles -u 5 \"../../node_modules/cesium/Build/Cesium/**/*\" \"storybook-static\"",
+    "copyassets:components": "copyfiles -u 1 \"./public/assets/**/*\" \"dist\"",
+    "storybook": "yarn run copyassets:all && start-storybook -p 9010 -s public,\"storybook-static\"",
+    "storybook-https": "yarn run copyassets:all && start-storybook --ssl-cert ~/example.crt --ssl-key ~/example.key --https -p 9010 -s public,\"storybook-static\"",
+    "build-storybook": "build-storybook -s public",
+    "eslint-check": "npx eslint . --ext .ts,.tsx"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@types/enzyme": "^3.10.5",
+    "@types/enzyme-adapter-react-16": "^1.0.6",
+    "@types/lodash": "^4.14.165",
+    "@types/react-test-renderer": "^16.9.2",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.2",
+    "jest-enzyme": "^7.1.2",
+    "react-test-renderer": "^16.13.1"
+  },
+  "gitHead": "ea9027bfc301f8c3931a3eca8b33d3985b0a2bda",
+  "jest": {
+    "coverageReporters": [
+      "text",
+      "html"
+    ]
+  }
+}

package/src/lib/cesium-map/map.tsx

@@ -224,6 +224,16 @@ export const CesiumMap: React.FC<CesiumMapProps> = (props) => {
           height: 0,
         };
       }
+
+      const getCameraPositionCartographic = (): ICameraPosition => {
+        const camPos = mapViewRef.camera.positionCartographic;
+        return {
+          longitude: toDegrees(camPos.longitude),
+          latitude: toDegrees(camPos.latitude),
+          height: camPos.height,
+        };
+      };
+
       // https://stackoverflow.com/questions/33348761/get-center-in-cesium-map
       if (mapViewRef.scene.mode === SceneMode.SCENE3D) {
         const windowPosition = new Cartesian2(
@@ -240,18 +250,17 @@ export const CesiumMap: React.FC<CesiumMapProps> = (props) => {
         const pickPositionCartographic = mapViewRef.scene.globe.ellipsoid.cartesianToCartographic(
           pickPosition as Cartesian3
         );
-        return {
-          longitude: toDegrees(pickPositionCartographic.longitude),
-          latitude: toDegrees(pickPositionCartographic.latitude),
-          height: mapViewRef.scene.camera.positionCartographic.height,
-        };
+
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        return pickPositionCartographic !== undefined
+          ? {
+              longitude: toDegrees(pickPositionCartographic.longitude),
+              latitude: toDegrees(pickPositionCartographic.latitude),
+              height: mapViewRef.scene.camera.positionCartographic.height,
+            }
+          : getCameraPositionCartographic();
       } else {
-        const camPos = mapViewRef.camera.positionCartographic;
-        return {
-          longitude: toDegrees(camPos.longitude),
-          latitude: toDegrees(camPos.latitude),
-          height: camPos.height,
-        };
+        return getCameraPositionCartographic();
       }
     };
 

package/src/lib/cesium-map/terrain-providers/terrain-provider-heights-tool.stories.tsx

@@ -0,0 +1,155 @@
+import React, { useState } from 'react';
+import {
+  ArcGISTiledElevationTerrainProvider,
+  EllipsoidTerrainProvider,
+  TerrainProvider,
+  CesiumTerrainProvider,
+  Resource,
+} from 'cesium';
+import { Story, Meta } from '@storybook/react/types-6-0';
+import { CesiumMap, useCesiumMap } from '../map';
+import { CesiumSceneMode } from '../map.types';
+import { Cesium3DTileset } from '../layers';
+import { TerrainianHeightTool } from '../tools/terranian-height.tool';
+import { InspectorTool } from '../tools/inspector.tool';
+import { LayerType } from '../layers-manager';
+
+export default {
+  title: 'Cesium Map/QuantizedMesh',
+  component: CesiumMap,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} as Meta;
+
+const mapDivStyle = {
+  height: '90%',
+  width: '100%',
+  position: 'absolute' as const,
+};
+
+const BASE_MAPS = {
+  maps: [
+    {
+      id: '1st',
+      title: '1st Map Title',
+      isCurrent: true,
+      thumbnail:
+        'https://nsw.digitaltwin.terria.io/build/efa2f6c408eb790753a9b5fb2f3dc678.png',
+      baseRasteLayers: [
+        {
+          id: 'GOOGLE_TERRAIN',
+          type: 'XYZ_LAYER' as LayerType,
+          opacity: 1,
+          zIndex: 0,
+          options: {
+            url: 'https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',
+            layers: '',
+            credit: 'GOOGLE',
+          },
+        },
+      ],
+      baseVectorLayers: [],
+    },
+  ],
+};
+
+const EllipsoidProvider = new EllipsoidTerrainProvider({});
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const MCCesiumProviderMercator = new CesiumTerrainProvider({
+  url: new Resource({
+    url: 'http://localhost:3000/terrain_mercator_crop',
+  }),
+});
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const MCCesiumProviderW84 = new CesiumTerrainProvider({
+  url: new Resource({
+    url: 'http://localhost:3000/terrain_w84_geo_crop',
+  }),
+});
+
+const ArcGisProvider = new ArcGISTiledElevationTerrainProvider({
+  url:
+    'https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer',
+});
+
+const terrainProviderListQmesh = [
+  {
+    id: 'NONE',
+    value: EllipsoidProvider,
+  },
+  {
+    id: 'MC Mercator - Cesium Terrain Provider',
+    value: MCCesiumProviderMercator,
+  },
+  {
+    id: 'MC W84 - Cesium Terrain Provider',
+    value: MCCesiumProviderW84,
+  },
+  {
+    id: 'Arc Gis Terrain Provider',
+    value: ArcGisProvider,
+  },
+];
+
+interface ITerrainProviderItem {
+  id: string;
+  value: TerrainProvider | undefined;
+}
+
+interface ITerrainProviderSelectorProps {
+  terrainProviderList: ITerrainProviderItem[];
+}
+
+const TerrainProviderSelector: React.FC<ITerrainProviderSelectorProps> = ({
+  terrainProviderList,
+}) => {
+  const mapViewer = useCesiumMap();
+
+  return (
+    <>
+      <select
+        defaultValue={terrainProviderList[0].id}
+        onChange={(evt): void => {
+          const selected = terrainProviderList.find(
+            (item) => item.id === evt.target.value
+          );
+          mapViewer.terrainProvider = (selected as ITerrainProviderItem)
+            .value as TerrainProvider;
+        }}
+      >
+        {terrainProviderList.map((provider) => {
+          return <option key={provider.id}>{provider.id}</option>;
+        })}
+      </select>
+    </>
+  );
+};
+
+export const QuantizedMeshHeightsTool: Story = () => {
+  const [center] = useState<[number, number]>([-122, 43]);
+  return (
+    <div style={mapDivStyle}>
+      <CesiumMap
+        center={center}
+        zoom={5}
+        imageryProvider={false}
+        sceneModes={[CesiumSceneMode.SCENE3D, CesiumSceneMode.COLUMBUS_VIEW]}
+        baseMaps={BASE_MAPS}
+      >
+        <Cesium3DTileset
+          isZoomTo={true}
+          url="https://3d.ofek-air.com/3d/Jeru_Old_City_Cesium/ACT/Jeru_Old_City_Cesium_ACT.json"
+        />
+        <TerrainProviderSelector
+          terrainProviderList={terrainProviderListQmesh}
+        />
+        <TerrainianHeightTool />
+        <InspectorTool />
+      </CesiumMap>
+    </div>
+  );
+};
+QuantizedMeshHeightsTool.storyName = 'Heights Tool';