@webviz/subsurface-viewer 0.0.2-alpha.3 → 0.0.2-alpha.5

package/dist/components/Map.js

@@ -17,6 +17,43 @@ import { colorTables } from "@emerson-eps/color-tables";
 import { getModelMatrixScale } from "../layers/utils/layerTools";
 import { OrbitController, OrthographicController } from "@deck.gl/core/typed";
 import IntersectionView from "../views/intersectionView";
+const minZoom3D = -12;
+const maxZoom3D = 12;
+const minZoom2D = -12;
+const maxZoom2D = 4;
+class ZScaleOrbitController extends OrbitController {
+    static setZScaleUpReference(setZScaleUp) {
+        ZScaleOrbitController.setZScaleUp = setZScaleUp;
+    }
+    static setZScaleDownReference(setZScaleDown) {
+        ZScaleOrbitController.setZScaleDown = setZScaleDown;
+    }
+    handleEvent(event) {
+        if (ZScaleOrbitController.setZScaleUp === null) {
+            return super.handleEvent(event);
+        }
+        if (ZScaleOrbitController.setZScaleUp &&
+            event.type === "keydown" &&
+            event.key === "ArrowUp") {
+            ZScaleOrbitController.setZScaleUp(Math.random());
+            return true;
+        }
+        else if (ZScaleOrbitController.setZScaleDown &&
+            event.type === "keydown" &&
+            event.key === "ArrowDown") {
+            ZScaleOrbitController.setZScaleDown(Math.random());
+            return true;
+        }
+        return super.handleEvent(event);
+    }
+}
+ZScaleOrbitController.setZScaleUp = null;
+ZScaleOrbitController.setZScaleDown = null;
+class ZScaleOrbitView extends OrbitView {
+    get ControllerType() {
+        return ZScaleOrbitController;
+    }
+}
 function addBoundingBoxes(b1, b2) {
     const boxDefault = [0, 0, 0, 1, 1, 1];
     if (typeof b1 === "undefined" || typeof b2 === "undefined") {
@@ -75,15 +112,16 @@ function adjustCameraTarget(viewStates, scale, newScale) {
     }
     return vs;
 }
-const Map = ({ id, layers, bounds, views, coords, scale, coordinateUnit, colorTables, setEditedData, checkDatafileSchema, onMouseEvent, selection, children, getTooltip = defaultTooltip, cameraPosition, getCameraPosition, triggerHome, triggerResetMultipleWells, }) => {
-    var _a, _b, _c, _d, _e;
-    const isCameraPositionDefined = typeof cameraPosition !== "undefined" &&
-        Object.keys(cameraPosition).length !== 0;
+const Map = ({ id, layers, bounds, views, coords, scale, coordinateUnit, colorTables, setEditedData, checkDatafileSchema, onMouseEvent, selection, children, getTooltip = defaultTooltip, cameraPosition, getCameraPosition, isLoadedCallback, triggerHome, triggerResetMultipleWells, }) => {
+    var _a, _b, _c, _d, _e, _f;
     const deckRef = useRef(null);
     const bboxInitial = [0, 0, 0, 1, 1, 1];
-    const boundsInitial = React.useMemo(() => bounds !== null && bounds !== void 0 ? bounds : [0, 0, 1, 1], [bounds]);
-    // state for views prop of DeckGL component
-    const [viewsProps, setViewsProps] = useState([]);
+    // Deck.gl View's and viewStates as input to Deck.gl
+    const [deckGLViews, setDeckGLViews] = useState([]);
+    const [viewStates, setViewStates] = useState({});
+    const [reportedBoundingBox, setReportedBoundingBox] = useState(bboxInitial);
+    const [reportedBoundingBoxAcc, setReportedBoundingBoxAcc] = useState(bboxInitial);
+    const [deckGLLayers, setDeckGLLayers] = useState([]);
     const [alteredLayers, setAlteredLayers] = useState([]);
     const [viewPortMargins, setViewPortMargins] = useState({
         left: 0,
@@ -91,184 +129,65 @@ const Map = ({ id, layers, bounds, views, coords, scale, coordinateUnit, colorTa
         top: 0,
         bottom: 0,
     });
-    const [didUserChangeCamera, setDidUserChangeCamera] = useState(false);
-    const [reportedBoundingBox, setReportedBoundingBox] = useState(bboxInitial);
-    const [reportedBoundingBoxAcc, setReportedBoundingBoxAcc] = useState(bboxInitial);
-    const initialViewState = getViewState(viewPortMargins, boundsInitial, boundingBoxCenter(reportedBoundingBoxAcc), views, 0, (_a = deckRef.current) === null || _a === void 0 ? void 0 : _a.deck);
-    // Local help function.
-    const calcDefaultViewStates = useCallback((boundingBox, input) => {
-        const center = boundingBoxCenter(boundingBox // note this may include axesLayer
-        );
-        const updatedViewProps = input ? input : viewsProps;
-        const isBoundsDefined = typeof bounds !== "undefined";
-        const viewStateMap = updatedViewProps.map((item, index) => {
-            var _a, _b, _c, _d, _e, _f;
-            const is3D = (_c = (_b = (_a = views === null || views === void 0 ? void 0 : views.viewports) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b.show3D) !== null && _c !== void 0 ? _c : false;
-            const viewState = isBoundsDefined
-                ? getViewState(viewPortMargins, boundsInitial, center, views, index, (_d = deckRef.current) === null || _d === void 0 ? void 0 : _d.deck)
-                : getViewState3D(is3D, boundingBox, (_e = views === null || views === void 0 ? void 0 : views.viewports) === null || _e === void 0 ? void 0 : _e[index].zoom, (_f = deckRef.current) === null || _f === void 0 ? void 0 : _f.deck);
-            const minZoom = is3D ? -12 : -12;
-            const maxZoom = is3D ? +12 : +4;
-            return [item.id, Object.assign(Object.assign({}, viewState), { minZoom, maxZoom })];
-        });
-        const tempViewStates = Object.fromEntries(viewStateMap);
-        setDidUserChangeCamera(false);
-        setViewStates(tempViewStates);
-    }, [bounds, boundsInitial, views, viewPortMargins, viewsProps]);
-    // set initial view state based on supplied bounds and zoom in viewState
-    const [viewStates, setViewStates] = useState({
-        "main-view_2D": cameraPosition !== null && cameraPosition !== void 0 ? cameraPosition : {},
-    });
-    const [firstViewStateId, setFirstViewStatesId] = useState("main-view_2D");
+    // Used for scaling in z direction using arrow keys.
+    const [scaleZ, setScaleZ] = useState(1);
+    const [scaleZUp, setScaleZUp] = useState(Number.MAX_VALUE);
+    const [scaleZDown, setScaleZDown] = useState(Number.MAX_VALUE);
+    React.useEffect(() => {
+        ZScaleOrbitController.setZScaleUpReference(setScaleZUp);
+    }, [setScaleZUp]);
+    React.useEffect(() => {
+        ZScaleOrbitController.setZScaleDownReference(setScaleZDown);
+    }, [setScaleZDown]);
+    // Calculate a set of Deck.gl View's and viewStates as input to Deck.gl
     useEffect(() => {
-        let tempViewStates = {};
-        if (isCameraPositionDefined) {
-            tempViewStates = Object.fromEntries(viewsProps.map((item) => [item.id, cameraPosition]));
-        }
-        else {
-            const isBoundsDefined = typeof bounds !== "undefined";
-            tempViewStates = Object.fromEntries(viewsProps.map((item, index) => {
-                var _a, _b, _c, _d, _e, _f;
-                let viewState = viewStates[item.id];
-                if (typeof viewState === "undefined") {
-                    viewState = isBoundsDefined
-                        ? getViewState(viewPortMargins, boundsInitial, boundingBoxCenter(reportedBoundingBoxAcc), views, index, (_a = deckRef.current) === null || _a === void 0 ? void 0 : _a.deck)
-                        : getViewState3D((_d = (_c = (_b = views === null || views === void 0 ? void 0 : views.viewports) === null || _b === void 0 ? void 0 : _b[index]) === null || _c === void 0 ? void 0 : _c.show3D) !== null && _d !== void 0 ? _d : false, reportedBoundingBoxAcc, (_e = views === null || views === void 0 ? void 0 : views.viewports) === null || _e === void 0 ? void 0 : _e[index].zoom, (_f = deckRef.current) === null || _f === void 0 ? void 0 : _f.deck);
-                }
-                return [item.id, viewState];
-            }));
-        }
-        if (viewsProps[0] !== undefined) {
-            setFirstViewStatesId(viewsProps[0].id);
-        }
-        setViewStates(tempViewStates);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+        var _a;
+        const [Views, viewStates] = createViewsAndViewStates(views, viewPortMargins, bounds, cameraPosition, reportedBoundingBoxAcc, (_a = deckRef.current) === null || _a === void 0 ? void 0 : _a.deck);
+        setDeckGLViews(Views);
+        setViewStates(viewStates);
     }, [
-        boundsInitial,
+        bounds,
         cameraPosition,
-        isCameraPositionDefined,
-        viewPortMargins,
         views === null || views === void 0 ? void 0 : views.viewports,
-        viewsProps,
-    ]);
-    // calculate view state on deckgl context load (based on viewport size)
-    const onLoad = useCallback(() => {
-        let tempViewStates = {};
-        if (isCameraPositionDefined) {
-            tempViewStates = Object.fromEntries(viewsProps.map((item) => [item.id, cameraPosition]));
-        }
-        else {
-            tempViewStates = Object.fromEntries(viewsProps.map((item, index) => {
-                var _a;
-                return [
-                    item.id,
-                    getViewState(viewPortMargins, boundsInitial, boundingBoxCenter(reportedBoundingBoxAcc), views, index, (_a = deckRef.current) === null || _a === void 0 ? void 0 : _a.deck),
-                ];
-            }));
-            if (viewsProps[0] !== undefined) {
-                setFirstViewStatesId(viewsProps[0].id);
-            }
-            setViewStates(tempViewStates);
-        }
-    }, [
-        isCameraPositionDefined,
-        viewsProps,
-        cameraPosition,
-        viewPortMargins,
-        boundsInitial,
+        (_a = deckRef === null || deckRef === void 0 ? void 0 : deckRef.current) === null || _a === void 0 ? void 0 : _a.deck,
+        reportedBoundingBox,
         reportedBoundingBoxAcc,
         views,
+        viewPortMargins,
+        triggerHome,
     ]);
     useEffect(() => {
-        if (typeof triggerHome !== "undefined") {
-            calcDefaultViewStates(reportedBoundingBoxAcc);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [triggerHome]);
+        setDeckGLLayers(alteredLayers);
+    }, [alteredLayers]);
     useEffect(() => {
         const union_of_reported_bboxes = addBoundingBoxes(reportedBoundingBoxAcc, reportedBoundingBox);
         setReportedBoundingBoxAcc(union_of_reported_bboxes);
-        // If "bounds" or "cameraPosition" is not defined "viewState" will be
-        // calculated based on the union of the reported bounding boxes from each layer.
-        if (!didUserChangeCamera && !isCameraPositionDefined) {
-            calcDefaultViewStates(union_of_reported_bboxes);
-        }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [reportedBoundingBox]);
-    // react on bounds prop change
     useEffect(() => {
-        const isBoundsDefined = typeof bounds !== "undefined";
-        let tempViewStates = {};
-        if (!isCameraPositionDefined) {
-            tempViewStates = Object.fromEntries(viewsProps.map((item, index) => {
-                var _a, _b, _c, _d, _e, _f;
-                return [
-                    item.id,
-                    isBoundsDefined
-                        ? getViewState(viewPortMargins, boundsInitial, boundingBoxCenter(reportedBoundingBoxAcc), views, index, (_a = deckRef.current) === null || _a === void 0 ? void 0 : _a.deck)
-                        : getViewState3D((_d = (_c = (_b = views === null || views === void 0 ? void 0 : views.viewports) === null || _b === void 0 ? void 0 : _b[index]) === null || _c === void 0 ? void 0 : _c.show3D) !== null && _d !== void 0 ? _d : false, reportedBoundingBoxAcc, (_e = views === null || views === void 0 ? void 0 : views.viewports) === null || _e === void 0 ? void 0 : _e[index].zoom, (_f = deckRef.current) === null || _f === void 0 ? void 0 : _f.deck),
-                ];
-            }));
-            if (viewsProps[0] !== undefined) {
-                setFirstViewStatesId(viewsProps[0].id);
-            }
-            setViewStates(tempViewStates);
+        if (scaleZUp !== Number.MAX_VALUE) {
+            const newScaleZ = scaleZ * 1.05;
+            setScaleZ(newScaleZ);
+            // Make camera target follow the scaling.
+            const vs = adjustCameraTarget(viewStates, scaleZ, newScaleZ);
+            setViewStates(vs);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [boundsInitial, cameraPosition, views === null || views === void 0 ? void 0 : views.viewports, viewsProps]);
-    // react on cameraPosition prop change
-    useEffect(() => {
-        let tempViewStates = {};
-        if (isCameraPositionDefined) {
-            tempViewStates = Object.fromEntries(viewsProps.map((item) => [item.id, cameraPosition]));
-            setViewStates(tempViewStates);
-            if (viewsProps[0] !== undefined) {
-                setFirstViewStatesId(viewsProps[0].id);
-            }
-        }
-        if (cameraPosition === null) {
-            tempViewStates = Object.fromEntries(viewsProps.map((item) => [item.id, initialViewState]));
-            setViewStates(tempViewStates);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [cameraPosition, viewsProps]);
-    // Used for scaling in z direction using arrow keys.
-    const [scaleZ, setScaleZ] = useState(1);
-    const [scaleZUp, setScaleZUp] = useState(1);
-    const [scaleZDown, setScaleZDown] = useState(1);
-    const scaleUpFunction = () => {
-        setScaleZUp(Math.random());
-    };
-    const scaleDownFunction = () => {
-        setScaleZDown(Math.random());
-    };
-    useEffect(() => {
-        const newScaleZ = scaleZ * 1.05;
-        setScaleZ(newScaleZ);
-        // Make camera target follow the scaling.
-        const vs = adjustCameraTarget(viewStates, scaleZ, newScaleZ);
-        setViewStates(vs);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [scaleZUp]);
     useEffect(() => {
-        const newScaleZ = scaleZ * 0.95;
-        setScaleZ(newScaleZ);
-        // Make camera target follow the scaling.
-        const vs = adjustCameraTarget(viewStates, scaleZ, newScaleZ);
-        setViewStates(vs);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [scaleZDown]);
-    useEffect(() => {
-        const viewProps = getViews(views);
-        setViewsProps(viewProps);
-        if (!bounds) {
-            calcDefaultViewStates(reportedBoundingBoxAcc);
+        if (scaleZUp !== Number.MAX_VALUE) {
+            const newScaleZ = scaleZ * 0.95;
+            setScaleZ(newScaleZ);
+            // Make camera target follow the scaling.
+            const vs = adjustCameraTarget(viewStates, scaleZ, newScaleZ);
+            setViewStates(vs);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [views]);
+    }, [scaleZDown]);
     useEffect(() => {
-        if (layers == undefined)
+        if (typeof layers === "undefined") {
             return;
+        }
         // Margins on the viewport are extracted from a potenial axes2D layer.
         const axes2DLayer = layers === null || layers === void 0 ? void 0 : layers.find((e) => {
             return (e === null || e === void 0 ? void 0 : e.constructor) === Axes2DLayer;
@@ -286,26 +205,37 @@ const Map = ({ id, layers, bounds, views, coords, scale, coordinateUnit, colorTa
             ? axes2DLayer.props.marginV
             : 0;
         setViewPortMargins({ left, right, top, bottom });
-        const m = getModelMatrixScale(scaleZ);
         const layers_copy = layers.map((item) => {
-            if ((item === null || item === void 0 ? void 0 : item.constructor.name) === NorthArrow3DLayer.name)
+            if ((item === null || item === void 0 ? void 0 : item.constructor.name) === NorthArrow3DLayer.name) {
                 return item;
-            const layer = item;
-            // Set "modelLayer" matrix to reflect correct z scaling.
-            const scaledLayer = layer.clone({ modelMatrix: m });
+            }
             // Inject "setReportedBoundingBox" function into layer for it to report
             // back its respective bounding box.
-            const boundedLayer = scaledLayer.clone({
+            return item.clone({
+                // eslint-disable-next-line
+                // @ts-ignore
                 setReportedBoundingBox: setReportedBoundingBox,
             });
-            return boundedLayer !== null && boundedLayer !== void 0 ? boundedLayer : scaledLayer;
         });
         setAlteredLayers(layers_copy);
-    }, [scaleZ, layers /*dispatch*/]);
-    const [deckGLLayers, setDeckGLLayers] = useState([]);
+    }, [layers]);
     useEffect(() => {
-        setDeckGLLayers(alteredLayers);
-    }, [alteredLayers]);
+        if (typeof layers === "undefined") {
+            return;
+        }
+        const m = getModelMatrixScale(scaleZ);
+        const layers_copy = deckGLLayers.map((item) => {
+            if ((item === null || item === void 0 ? void 0 : item.constructor.name) === NorthArrow3DLayer.name) {
+                return item;
+            }
+            // Set "modelLayer" matrix to reflect correct z scaling.
+            return item.clone({
+                modelMatrix: m,
+            });
+        });
+        setDeckGLLayers(layers_copy);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [scaleZ]);
     useEffect(() => {
         var _a, _b, _c;
         const layers = (_b = (_a = deckRef.current) === null || _a === void 0 ? void 0 : _a.deck) === null || _b === void 0 ? void 0 : _b.props.layers;
@@ -407,10 +337,15 @@ const Map = ({ id, layers, bounds, views, coords, scale, coordinateUnit, colorTa
     const [isLoaded, setIsLoaded] = useState(false);
     const onAfterRender = useCallback(() => {
         if (deckGLLayers) {
-            const state = deckGLLayers.every((layer) => layer.isLoaded);
+            const state = deckGLLayers.every((layer) => {
+                return layer.isLoaded;
+            });
             setIsLoaded(state);
+            if (typeof isLoadedCallback !== "undefined") {
+                isLoadedCallback(state);
+            }
         }
-    }, [deckGLLayers]);
+    }, [deckGLLayers, isLoadedCallback]);
     // validate layers data
     const [errorText, setErrorText] = useState();
     useEffect(() => {
@@ -453,7 +388,6 @@ const Map = ({ id, layers, bounds, views, coords, scale, coordinateUnit, colorTa
     const onViewStateChange = useCallback(
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     ({ viewId, viewState }) => {
-        var _a;
         const viewports = (views === null || views === void 0 ? void 0 : views.viewports) || [];
         const isSyncIds = viewports
             .filter((item) => item.isSync)
@@ -469,14 +403,7 @@ const Map = ({ id, layers, bounds, views, coords, scale, coordinateUnit, colorTa
         if (getCameraPosition) {
             getCameraPosition(viewState);
         }
-        setFirstViewStatesId((_a = viewsProps[0]) === null || _a === void 0 ? void 0 : _a.id);
-        setDidUserChangeCamera(true);
-    }, [getCameraPosition, views === null || views === void 0 ? void 0 : views.viewports, viewsProps]);
-    const deckGLViews = React.useMemo(() => {
-        var _a;
-        return createViews(views, scaleUpFunction, scaleDownFunction, (_a = deckRef.current) === null || _a === void 0 ? void 0 : _a.deck);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [views, views, (_d = deckRef.current) === null || _d === void 0 ? void 0 : _d.deck]);
+    }, [getCameraPosition, views === null || views === void 0 ? void 0 : views.viewports]);
     if (!deckGLViews || isEmpty(deckGLViews) || isEmpty(deckGLLayers))
         return null;
     return (React.createElement("div", { onContextMenu: (event) => event.preventDefault() },
@@ -505,10 +432,8 @@ const Map = ({ id, layers, bounds, views, coords, scale, coordinateUnit, colorTa
                     setEditedData === null || setEditedData === void 0 ? void 0 : setEditedData(updated_prop);
                 },
                 colorTables: colorTables,
-            }, getCursor: ({ isDragging }) => isDragging ? "grabbing" : "default", getTooltip: getTooltip, ref: deckRef, onViewStateChange: onViewStateChange, onHover: onHover, onClick: onClick, onLoad: onLoad, onAfterRender: onAfterRender }, children),
-        (scale === null || scale === void 0 ? void 0 : scale.visible) ? (React.createElement(DistanceScale, Object.assign({}, scale, { zoom: viewStates[firstViewStateId] === undefined
-                ? -5
-                : viewStates[firstViewStateId].zoom, scaleUnit: coordinateUnit, style: (_e = scale.cssStyle) !== null && _e !== void 0 ? _e : {} }))) : null,
+            }, getCursor: ({ isDragging }) => isDragging ? "grabbing" : "default", getTooltip: getTooltip, ref: deckRef, onViewStateChange: onViewStateChange, onHover: onHover, onClick: onClick, onAfterRender: onAfterRender }, children),
+        (scale === null || scale === void 0 ? void 0 : scale.visible) ? (React.createElement(DistanceScale, Object.assign({}, scale, { zoom: (_e = (_d = viewStates[Object.keys(viewStates)[0]]) === null || _d === void 0 ? void 0 : _d.zoom) !== null && _e !== void 0 ? _e : -5, scaleUnit: coordinateUnit, style: (_f = scale.cssStyle) !== null && _f !== void 0 ? _f : {} }))) : null,
         React.createElement(StatusIndicator, { layers: deckGLLayers, isLoaded: isLoaded }),
         (coords === null || coords === void 0 ? void 0 : coords.visible) ? React.createElement(InfoCard, { pickInfos: hoverInfo }) : null,
         errorText && (React.createElement("pre", { style: {
@@ -562,8 +487,8 @@ export function jsonToObject(data, enums = undefined) {
     return jsonConverter.convert(filtered_data);
 }
 // return viewstate with computed bounds to fit the data in viewport
-function getViewState(viewPortMargins, bounds_accessor, centerOfData, views, viewPortIndex, deck) {
-    var _a, _b, _c, _d, _e;
+function getViewState(viewPortMargins, bounds_accessor, centerOfData, views, viewPort, deck) {
+    var _a;
     let bounds = [0, 0, 1, 1];
     if (typeof bounds_accessor == "function") {
         bounds = bounds_accessor();
@@ -631,15 +556,19 @@ function getViewState(viewPortMargins, bounds_accessor, centerOfData, views, vie
         fb_target = [fb.x - translate_x, fb.y - translate_y, z];
         fb_zoom = fb.zoom;
     }
-    const target = (_c = (_b = views === null || views === void 0 ? void 0 : views.viewports) === null || _b === void 0 ? void 0 : _b[viewPortIndex]) === null || _c === void 0 ? void 0 : _c.target;
-    const zoom = (_e = (_d = views === null || views === void 0 ? void 0 : views.viewports) === null || _d === void 0 ? void 0 : _d[viewPortIndex]) === null || _e === void 0 ? void 0 : _e.zoom;
+    const target = viewPort.target;
+    const zoom = viewPort.zoom;
     const target_ = target !== null && target !== void 0 ? target : fb_target;
     const zoom_ = zoom !== null && zoom !== void 0 ? zoom : fb_zoom;
+    const minZoom = minZoom3D;
+    const maxZoom = viewPort.show3D ? maxZoom3D : maxZoom2D;
     const view_state = {
         target: target_,
         zoom: zoom_,
         rotationX: 90,
         rotationOrbit: 0,
+        minZoom,
+        maxZoom,
     };
     return view_state;
 }
@@ -674,34 +603,28 @@ function getViewState3D(is3D, bounds, zoom, deck) {
         zoom: zoom !== null && zoom !== void 0 ? zoom : fitted_bound.zoom * 1.2,
         rotationX: 45,
         rotationOrbit: 0,
+        minZoom: minZoom3D,
+        maxZoom: maxZoom3D,
     };
     return view_state;
 }
-// construct views object for DeckGL component
-function createViews(views, scaleUpFunction, scaleDownFunction, deck) {
-    var _a;
-    // Use modified controller to handle key events.
-    class ZScaleOrbitController extends OrbitController {
-        handleEvent(event) {
-            if (event.type === "keydown" && event.key === "ArrowUp") {
-                scaleUpFunction();
-                return true;
-            }
-            else if (event.type === "keydown" && event.key === "ArrowDown") {
-                scaleDownFunction();
-                return true;
-            }
-            return super.handleEvent(event);
-        }
-    }
+// construct views and viewStates for DeckGL component
+function createViewsAndViewStates(views, viewPortMargins, bounds, cameraPosition, boundingBox, deck) {
+    var _a, _b, _c, _d;
     const deckgl_views = [];
-    const widthViewPort = deck === null || deck === void 0 ? void 0 : deck.width;
-    const heightViewPort = deck === null || deck === void 0 ? void 0 : deck.height;
-    const isDeckDefined = typeof widthViewPort !== "undefined" &&
-        typeof heightViewPort !== "undefined";
-    const mPixels = (_a = views === null || views === void 0 ? void 0 : views.marginPixels) !== null && _a !== void 0 ? _a : 0;
+    let viewStates = {};
+    const centerOfData = boundingBoxCenter(boundingBox);
+    const widthViewPort = (_a = deck === null || deck === void 0 ? void 0 : deck.width) !== null && _a !== void 0 ? _a : 1;
+    const heightViewPort = (_b = deck === null || deck === void 0 ? void 0 : deck.height) !== null && _b !== void 0 ? _b : 1;
+    const mPixels = (_c = views === null || views === void 0 ? void 0 : views.marginPixels) !== null && _c !== void 0 ? _c : 0;
+    const isOk = deck &&
+        views &&
+        views.layout[0] >= 1 &&
+        views.layout[1] >= 1 &&
+        views.layout[0] * views.layout[1] <= views.viewports.length;
     // if props for multiple viewport are not proper, return 2d view
-    if (!views || !views.viewports || !views.layout || !isDeckDefined) {
+    if (!isOk) {
+        console.warn("Properties for multiple viewports are not properly defined.");
         deckgl_views.push(new OrthographicView({
             id: "main",
             controller: { doubleClickZoom: false },
@@ -713,6 +636,14 @@ function createViews(views, scaleUpFunction, scaleDownFunction, deck) {
             far: +99999,
             near: -99999,
         }));
+        viewStates = Object.assign(Object.assign({}, viewStates), { ["dummy"]: {
+                target: [0, 0],
+                zoom: 0,
+                rotationX: 0,
+                rotationOrbit: 0,
+                minZoom: minZoom2D,
+                maxZoom: maxZoom2D,
+            } });
     }
     else {
         let yPos = 0;
@@ -731,14 +662,16 @@ function createViews(views, scaleUpFunction, scaleDownFunction, deck) {
             for (let x = 1; x <= nX; x++) {
                 if (views.viewports == undefined ||
                     deckgl_views.length >= views.viewports.length) {
-                    return deckgl_views;
+                    return [deckgl_views, viewStates];
                 }
                 const currentViewport = views.viewports[deckgl_views.length];
-                const ViewType = currentViewport.show3D
-                    ? OrbitView
-                    : currentViewport.id === "intersection_view"
-                        ? IntersectionView
-                        : OrthographicView;
+                let ViewType = ZScaleOrbitView;
+                if (!currentViewport.show3D) {
+                    ViewType =
+                        currentViewport.id === "intersection_view"
+                            ? IntersectionView
+                            : OrthographicView;
+                }
                 const far = 9999;
                 const near = currentViewport.show3D ? 0.1 : -9999;
                 const Controller = currentViewport.show3D
@@ -759,37 +692,22 @@ function createViews(views, scaleUpFunction, scaleDownFunction, deck) {
                     far,
                     near,
                 }));
+                const isBoundsDefined = typeof bounds !== "undefined";
+                const isCameraPositionDefined = typeof cameraPosition !== "undefined" &&
+                    Object.keys(cameraPosition).length !== 0;
+                let viewState = cameraPosition;
+                if (!isCameraPositionDefined) {
+                    viewState = isBoundsDefined
+                        ? getViewState(viewPortMargins, bounds !== null && bounds !== void 0 ? bounds : [0, 0, 1, 1], centerOfData, views, currentViewport, deck)
+                        : getViewState3D((_d = currentViewport.show3D) !== null && _d !== void 0 ? _d : false, boundingBox, currentViewport.zoom, deck);
+                }
+                viewStates = Object.assign(Object.assign({}, viewStates), { [currentViewport.id]: viewState });
                 xPos = xPos + w;
             }
             yPos = yPos + h;
         }
     }
-    return deckgl_views;
-}
-// construct views object for DeckGL component
-function getViews(views) {
-    const deckgl_views = [];
-    // if props for multiple viewport are not proper, return 2d view
-    if (!views || !views.viewports || !views.layout) {
-        deckgl_views.push({
-            id: "main",
-        });
-    }
-    else {
-        const [nY, nX] = views.layout;
-        for (let y = 1; y <= nY; y++) {
-            for (let x = 1; x <= nX; x++) {
-                if (views.viewports == undefined ||
-                    deckgl_views.length >= views.viewports.length)
-                    return deckgl_views;
-                const cur_viewport = views.viewports[deckgl_views.length];
-                deckgl_views.push({
-                    id: cur_viewport.id,
-                });
-            }
-        }
-    }
-    return deckgl_views;
+    return [deckgl_views, viewStates];
 }
 function handleMouseEvent(type, infos, event) {
     var _a;