@map-colonies/react-components 3.8.1 → 3.10.2

package/dist/cesium-map/settings/settings.css

@@ -0,0 +1,49 @@
+.mapScenesContainer {
+  display: flex;
+  gap: 8px;
+}
+
+.settingsIconContainer {
+  fill: #fff;
+  width: 40px;
+  height: 40px;
+  background: #303336;
+  border: 1px solid #444;
+  border-radius: 4px;
+}
+
+.settingsIconContainer:hover {
+  background: #48b;
+  border-color: #aef;
+}
+
+.baseMapsContainer {
+  margin-top: 12px;
+  min-height: 58%;
+}
+
+.settingsDialogPortal {
+  transform: translateZ(0);
+  height: calc(100vh - 220px);
+  max-height: 460px;
+  width: 280px;
+  position: absolute;
+  top: 40px;
+  right: 80px;
+}
+
+.settingsDialogPortal .mdc-dialog__container {
+  align-items: unset;
+}
+.settingsDialogPortal .mdc-dialog .mdc-dialog__surface {
+  max-height: unset;
+}
+
+body[dir='rtl'] .settingsDialogPortal {
+  left: 80px;
+  right: unset;
+}
+
+.sectionLabel {
+  margin-block-end: 0.5em;
+}

package/dist/cesium-map/settings/settings.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { IRasterLayer, IVectorLayer } from '../layers-manager';
+import { CesiumSceneModeEnum } from '../map.types';
+import './settings.css';
+export interface IBaseMap {
+    id: string;
+    title?: string;
+    thumbnail?: string;
+    isCurrent?: boolean;
+    baseRasteLayers: IRasterLayer[];
+    baseVectorLayers: IVectorLayer[];
+}
+export interface IBaseMaps {
+    maps: IBaseMap[];
+}
+export interface RCesiumMapProps {
+    sceneModes: CesiumSceneModeEnum[];
+    baseMaps?: IBaseMaps;
+    locale?: {
+        [key: string]: string;
+    };
+}
+export declare const CesiumSettings: React.FC<RCesiumMapProps>;

package/dist/cesium-map/settings/settings.js

@@ -0,0 +1,79 @@
+"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 (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CesiumSettings = void 0;
+var react_1 = __importStar(require("react"));
+var react_core_1 = require("@map-colonies/react-core");
+var lodash_1 = require("lodash");
+var box_1 = require("../../box");
+var scene_modes_1 = require("./scene-modes");
+var base_maps_1 = require("./base-maps");
+require("./settings.css");
+var SETTINGS_SVG_ID = 'ic_settings_24px';
+var CesiumSettings = function (props) {
+    var _a, _b, _c;
+    var _d = react_1.useState(false), isOpen = _d[0], setIsOpen = _d[1];
+    var sceneModes = props.sceneModes, baseMaps = props.baseMaps, locale = props.locale;
+    var dialogPortalRef = react_1.useRef(null);
+    var dlgTitle = (_a = lodash_1.get(locale, 'MAP_SETTINGS_DIALOG_TITLE')) !== null && _a !== void 0 ? _a : 'Map Settings';
+    var sceneModeTitle = (_b = lodash_1.get(locale, 'MAP_SETTINGS_SCENE_MODE_TITLE')) !== null && _b !== void 0 ? _b : 'Scene Mode';
+    var baseMapTitle = (_c = lodash_1.get(locale, 'MAP_SETTINGS_BASE_MAP_TITLE')) !== null && _c !== void 0 ? _c : 'Base Map';
+    // const btnOkText = get(locale, 'MAP_SETTINGS_OK_BUTTON_TEXT') ?? 'Ok';
+    react_1.useEffect(function () {
+        var handleClickOutside = function (event) {
+            var _a;
+            /* eslint-disable */
+            var target = event.target;
+            var dlgPortalRef = lodash_1.get(dialogPortalRef, 'current');
+            if (dlgPortalRef &&
+                !dlgPortalRef.contains(target) &&
+                target.id !== SETTINGS_SVG_ID &&
+                ((_a = target.parentElement) === null || _a === void 0 ? void 0 : _a.id) !== SETTINGS_SVG_ID) {
+                document.removeEventListener('click', handleClickOutside, false);
+                setIsOpen(false);
+            }
+            /* eslint-enable */
+        };
+        document.addEventListener('click', handleClickOutside, false);
+        return function () {
+            document.removeEventListener('click', handleClickOutside, false);
+        };
+    });
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(react_core_1.Icon, { icon: react_1.default.createElement("div", { className: "settingsIconContainer" },
+                react_1.default.createElement("svg", { width: "100%", height: "100%", viewBox: "0 0 24 24", id: SETTINGS_SVG_ID, x: "288", y: "24" },
+                    react_1.default.createElement("path", { d: "M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65A.488.488 0 0 0 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z" }))), onClick: function () {
+                setIsOpen(!isOpen);
+            } }),
+        isOpen && (react_1.default.createElement("div", { id: "dialog-portal-example", className: "settingsDialogPortal", ref: dialogPortalRef },
+            react_1.default.createElement(react_core_1.Dialog, { open: isOpen, onClosed: function () {
+                    setIsOpen(false);
+                } },
+                react_1.default.createElement(react_core_1.DialogTitle, null, dlgTitle),
+                react_1.default.createElement(react_core_1.DialogContent, null,
+                    react_1.default.createElement("h4", { className: "sectionLabel" }, sceneModeTitle),
+                    react_1.default.createElement(box_1.Box, { className: "mapScenesContainer" },
+                        react_1.default.createElement(scene_modes_1.CesiumSceneModes, { sceneModes: sceneModes })),
+                    react_1.default.createElement(box_1.Box, { className: "baseMapsContainer" }, baseMaps && (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement("h4", { className: "sectionLabel" }, baseMapTitle),
+                        react_1.default.createElement(base_maps_1.CesiumBaseMaps, { baseMaps: baseMaps }))))))))));
+};
+exports.CesiumSettings = CesiumSettings;

package/dist/cesium-map/terrain-providers/custom/dummy-quantized-mesh-tile.d.ts

@@ -0,0 +1,3 @@
+export declare const dummyTile: Uint8Array;
+declare const _default: ArrayBufferLike;
+export default _default;

package/dist/cesium-map/terrain-providers/custom/dummy-quantized-mesh-tile.js

@@ -0,0 +1,245 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dummyTile = void 0;
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+exports.dummyTile = new Uint8Array([
+    172,
+    223,
+    96,
+    7,
+    210,
+    166,
+    80,
+    193,
+    62,
+    133,
+    0,
+    92,
+    97,
+    125,
+    81,
+    193,
+    175,
+    204,
+    114,
+    156,
+    24,
+    171,
+    39,
+    65,
+    215,
+    131,
+    189,
+    193,
+    92,
+    143,
+    98,
+    193,
+    172,
+    223,
+    224,
+    55,
+    148,
+    164,
+    80,
+    193,
+    62,
+    133,
+    128,
+    115,
+    254,
+    122,
+    81,
+    193,
+    175,
+    204,
+    114,
+    40,
+    74,
+    169,
+    39,
+    65,
+    199,
+    225,
+    33,
+    1,
+    165,
+    221,
+    10,
+    65,
+    165,
+    248,
+    77,
+    38,
+    221,
+    233,
+    229,
+    191,
+    118,
+    168,
+    124,
+    106,
+    57,
+    4,
+    231,
+    191,
+    208,
+    126,
+    103,
+    119,
+    149,
+    64,
+    191,
+    63,
+    9,
+    0,
+    0,
+    0,
+    254,
+    127,
+    253,
+    127,
+    254,
+    127,
+    253,
+    127,
+    0,
+    0,
+    254,
+    255,
+    255,
+    127,
+    0,
+    128,
+    0,
+    0,
+    254,
+    127,
+    253,
+    127,
+    0,
+    0,
+    254,
+    127,
+    0,
+    128,
+    0,
+    0,
+    0,
+    0,
+    253,
+    255,
+    254,
+    127,
+    0,
+    0,
+    0,
+    0,
+    0,
+    0,
+    0,
+    0,
+    0,
+    0,
+    0,
+    0,
+    0,
+    0,
+    0,
+    0,
+    0,
+    0,
+    8,
+    0,
+    0,
+    0,
+    0,
+    0,
+    0,
+    0,
+    0,
+    0,
+    2,
+    0,
+    3,
+    0,
+    0,
+    0,
+    4,
+    0,
+    0,
+    0,
+    2,
+    0,
+    5,
+    0,
+    0,
+    0,
+    0,
+    0,
+    7,
+    0,
+    0,
+    0,
+    0,
+    0,
+    2,
+    0,
+    9,
+    0,
+    7,
+    0,
+    4,
+    0,
+    9,
+    0,
+    1,
+    0,
+    5,
+    0,
+    9,
+    0,
+    3,
+    0,
+    3,
+    0,
+    0,
+    0,
+    0,
+    0,
+    0,
+    0,
+    3,
+    0,
+    3,
+    0,
+    0,
+    0,
+    1,
+    0,
+    7,
+    0,
+    2,
+    0,
+    3,
+    0,
+    0,
+    0,
+    7,
+    0,
+    5,
+    0,
+    8,
+    0,
+    3,
+    0,
+    0,
+    0,
+    4,
+    0,
+    5,
+    0,
+    6,
+    0,
+]);
+exports.default = exports.dummyTile.buffer;

package/dist/cesium-map/terrain-providers/custom/quantized-mesh-decoder.d.ts

@@ -0,0 +1,9 @@
+import { IDecodedTile } from './quantized-mesh-terrain-provider';
+export declare const DECODING_STEPS: {
+    header: number;
+    vertices: number;
+    triangleIndices: number;
+    edgeIndices: number;
+    extensions: number;
+};
+export declare const decode: (data: ArrayBufferLike) => IDecodedTile;

package/dist/cesium-map/terrain-providers/custom/quantized-mesh-decoder.js

@@ -0,0 +1,202 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.decode = exports.DECODING_STEPS = void 0;
+var LITTLE_ENDIAN = true;
+var MAX_VERTEX_COUNT = 65536;
+exports.DECODING_STEPS = {
+    header: 0,
+    vertices: 1,
+    triangleIndices: 2,
+    edgeIndices: 3,
+    extensions: 4,
+};
+var QUANTIZED_MESH_HEADER = {
+    centerX: Float64Array.BYTES_PER_ELEMENT,
+    centerY: Float64Array.BYTES_PER_ELEMENT,
+    centerZ: Float64Array.BYTES_PER_ELEMENT,
+    minHeight: Float32Array.BYTES_PER_ELEMENT,
+    maxHeight: Float32Array.BYTES_PER_ELEMENT,
+    boundingSphereCenterX: Float64Array.BYTES_PER_ELEMENT,
+    boundingSphereCenterY: Float64Array.BYTES_PER_ELEMENT,
+    boundingSphereCenterZ: Float64Array.BYTES_PER_ELEMENT,
+    boundingSphereRadius: Float64Array.BYTES_PER_ELEMENT,
+    horizonOcclusionPointX: Float64Array.BYTES_PER_ELEMENT,
+    horizonOcclusionPointY: Float64Array.BYTES_PER_ELEMENT,
+    horizonOcclusionPointZ: Float64Array.BYTES_PER_ELEMENT,
+};
+var decodeZigZag = function (value) {
+    return (value >> 1) ^ -(value & 1);
+};
+var decodeIndex = function (buffer, position, indicesCount, bytesPerIndex, encoded) {
+    var indices;
+    if (bytesPerIndex === 2) {
+        indices = new Uint16Array(buffer, position, indicesCount);
+    }
+    else {
+        indices = new Uint32Array(buffer, position, indicesCount);
+    }
+    if (!encoded) {
+        return indices;
+    }
+    var highest = 0;
+    for (var i = 0; i < indices.length; ++i) {
+        var code = indices[i];
+        indices[i] = highest - code;
+        if (code === 0) {
+            ++highest;
+        }
+    }
+    return indices;
+};
+var convertFromTypedArrayToNumbersArray = function (array) {
+    var numbersArray = [];
+    for (var i = 0; i < array.length; ++i) {
+        numbersArray.push(array[i]);
+    }
+    return numbersArray;
+};
+var decode = function (data) {
+    var maxDecodingStep = exports.DECODING_STEPS.extensions;
+    var view = new DataView(data);
+    var header = {};
+    var position = 0;
+    // Decode Header
+    Object.keys(QUANTIZED_MESH_HEADER).forEach(function (key, bytesCount) {
+        // @ts-ignore
+        // eslint-disable-next-line
+        header[key] =
+            bytesCount === 8
+                ? view.getFloat64(position, LITTLE_ENDIAN)
+                : view.getFloat32(position, LITTLE_ENDIAN);
+        position += bytesCount;
+    });
+    var headerEndPosition = position;
+    // if (maxDecodingStep < DECODING_STEPS.vertices) {
+    //   return { header };
+    // }
+    // Decode Vertex Data
+    position = headerEndPosition;
+    var vertexCount = view.getUint32(position, LITTLE_ENDIAN);
+    var vertexData = new Uint16Array(vertexCount * 3);
+    position += Uint32Array.BYTES_PER_ELEMENT;
+    var bytesPerArrayElement = Uint16Array.BYTES_PER_ELEMENT;
+    var elementArrayLength = vertexCount * bytesPerArrayElement;
+    var uArrayStartPosition = position;
+    var vArrayStartPosition = uArrayStartPosition + elementArrayLength;
+    var heightArrayStartPosition = vArrayStartPosition + elementArrayLength;
+    var u = 0;
+    var v = 0;
+    var height = 0;
+    for (var i = 0; i < vertexCount; i++) {
+        u += decodeZigZag(view.getUint16(uArrayStartPosition + bytesPerArrayElement * i, LITTLE_ENDIAN));
+        v += decodeZigZag(view.getUint16(vArrayStartPosition + bytesPerArrayElement * i, LITTLE_ENDIAN));
+        height += decodeZigZag(view.getUint16(heightArrayStartPosition + bytesPerArrayElement * i, LITTLE_ENDIAN));
+        vertexData[i] = u;
+        vertexData[i + vertexCount] = v;
+        vertexData[i + vertexCount * 2] = height;
+    }
+    position += elementArrayLength * 3;
+    var vertexDataEndPosition = position;
+    // if (maxDecodingStep < DECODING_STEPS.triangleIndices) {
+    //   return { header, vertexData };
+    // }
+    // Decode Triangle Indices
+    position = vertexDataEndPosition;
+    vertexCount = vertexData.length / 3;
+    var bytesPerIndex = vertexCount > MAX_VERTEX_COUNT
+        ? Uint32Array.BYTES_PER_ELEMENT
+        : Uint16Array.BYTES_PER_ELEMENT;
+    if (position % bytesPerIndex !== 0) {
+        position += bytesPerIndex - (position % bytesPerIndex);
+    }
+    var triangleCount = view.getUint32(position, LITTLE_ENDIAN);
+    position += Uint32Array.BYTES_PER_ELEMENT;
+    var triangleIndicesCount = triangleCount * 3;
+    var triangleIndices = decodeIndex(view.buffer, position, triangleIndicesCount, bytesPerIndex, true);
+    position += triangleIndicesCount * bytesPerIndex;
+    var triangleIndicesEndPosition = position;
+    // if (maxDecodingStep < DECODING_STEPS.edgeIndices) {
+    //   return { header, vertexData, triangleIndices };
+    // }
+    // Decode Edge Indices
+    position = triangleIndicesEndPosition;
+    vertexCount = vertexData.length / 3;
+    // bytesPerIndex = vertexCount > MAX_VERTEX_COUNT
+    //   ? Uint32Array.BYTES_PER_ELEMENT
+    //   : Uint16Array.BYTES_PER_ELEMENT;
+    var westVertexCount = view.getUint32(position, LITTLE_ENDIAN);
+    position += Uint32Array.BYTES_PER_ELEMENT;
+    var westIndices = convertFromTypedArrayToNumbersArray(decodeIndex(view.buffer, position, westVertexCount, bytesPerIndex, false));
+    position += westVertexCount * bytesPerIndex;
+    var southVertexCount = view.getUint32(position, LITTLE_ENDIAN);
+    position += Uint32Array.BYTES_PER_ELEMENT;
+    var southIndices = convertFromTypedArrayToNumbersArray(decodeIndex(view.buffer, position, southVertexCount, bytesPerIndex, false));
+    position += southVertexCount * bytesPerIndex;
+    var eastVertexCount = view.getUint32(position, LITTLE_ENDIAN);
+    position += Uint32Array.BYTES_PER_ELEMENT;
+    var eastIndices = convertFromTypedArrayToNumbersArray(decodeIndex(view.buffer, position, eastVertexCount, bytesPerIndex, false));
+    position += eastVertexCount * bytesPerIndex;
+    var northVertexCount = view.getUint32(position, LITTLE_ENDIAN);
+    position += Uint32Array.BYTES_PER_ELEMENT;
+    var northIndices = convertFromTypedArrayToNumbersArray(decodeIndex(view.buffer, position, northVertexCount, bytesPerIndex, false));
+    position += northVertexCount * bytesPerIndex;
+    var edgeIndicesEndPosition = position;
+    if (maxDecodingStep < exports.DECODING_STEPS.extensions) {
+        return {
+            header: header,
+            vertexData: vertexData,
+            triangleIndices: triangleIndices,
+            westIndices: westIndices,
+            northIndices: northIndices,
+            eastIndices: eastIndices,
+            southIndices: southIndices,
+        };
+    }
+    // Decode Extensions
+    var extensions = {};
+    if (view.byteLength > edgeIndicesEndPosition) {
+        position = edgeIndicesEndPosition;
+        while (position < view.byteLength) {
+            var extensionId = view.getUint8(position);
+            position += Uint8Array.BYTES_PER_ELEMENT;
+            var extensionLength = view.getUint32(position, true);
+            position += Uint32Array.BYTES_PER_ELEMENT;
+            var extensionView = new DataView(view.buffer, position, extensionLength);
+            switch (extensionId) {
+                case 1: {
+                    extensions.vertexNormals = new Uint8Array(extensionView.buffer, extensionView.byteOffset, extensionView.byteLength);
+                    break;
+                }
+                case 2: {
+                    extensions.waterMask = extensionView.buffer.slice(extensionView.byteOffset, extensionView.byteOffset + extensionView.byteLength);
+                    break;
+                }
+                case 4: {
+                    var jsonLength = extensionView.getUint32(0, LITTLE_ENDIAN);
+                    var jsonString = '';
+                    for (var i = 0; i < jsonLength; ++i) {
+                        jsonString += String.fromCharCode(extensionView.getUint8(Uint32Array.BYTES_PER_ELEMENT + i));
+                    }
+                    // eslint-disable-next-line
+                    extensions.metadata = JSON.parse(jsonString);
+                    break;
+                }
+                default: {
+                    console.warn("Unknown extension with id " + extensionId);
+                }
+            }
+            position += extensionLength;
+        }
+    }
+    return {
+        header: header,
+        vertexData: vertexData,
+        triangleIndices: triangleIndices,
+        westIndices: westIndices,
+        northIndices: northIndices,
+        eastIndices: eastIndices,
+        southIndices: southIndices,
+        extensions: extensions,
+    };
+};
+exports.decode = decode;

package/dist/cesium-map/terrain-providers/custom/quantized-mesh-terrain-provider.d.ts

@@ -0,0 +1,50 @@
+import { QuantizedMeshTerrainData, TilingScheme } from 'cesium';
+export interface IDecodedTileHeader {
+    centerX: number;
+    centerY: number;
+    centerZ: number;
+    minHeight: number;
+    maxHeight: number;
+    boundingSphereCenterX: number;
+    boundingSphereCenterY: number;
+    boundingSphereCenterZ: number;
+    boundingSphereRadius: number;
+    horizonOcclusionPointX: number;
+    horizonOcclusionPointY: number;
+    horizonOcclusionPointZ: number;
+}
+export interface IExtensions {
+    vertexNormals?: Uint8Array;
+    waterMask?: ArrayBufferLike;
+    metadata?: unknown;
+}
+export interface IDecodedTile {
+    header: IDecodedTileHeader;
+    vertexData: Uint16Array;
+    triangleIndices: Uint16Array | Uint32Array;
+    westIndices: number[];
+    northIndices: number[];
+    eastIndices: number[];
+    southIndices: number[];
+    extensions?: IExtensions;
+}
+export default class QuantizedMeshTerrainProvider {
+    tilingScheme: TilingScheme;
+    ready: boolean;
+    readyPromise: Promise<boolean>;
+    private readonly dummyTile;
+    private readonly getUrl;
+    private readonly credits;
+    constructor(options: {
+        getUrl?: (x: number, y: number, level: number) => string;
+        credit?: string;
+        tilingScheme?: TilingScheme;
+    });
+    requestTileGeometry(x: number, y: number, level: number): Promise<void | QuantizedMeshTerrainData> | undefined;
+    getTileDataAvailable(x: number, y: number, level: number): boolean;
+    getLevelMaximumGeometricError(level: number): number;
+    private generateDummyTileHeader;
+    private createQuantizedMeshData;
+    private generateDummyTile;
+    private decodeResponse;
+}