@webviz/subsurface-viewer 0.10.0 → 0.12.0

package/dist/components/Map.js

@@ -1,59 +1,86 @@
+import React, { useEffect, useState, useCallback, useMemo } from "react";
+import { cloneDeep, isEmpty } from "lodash";
 import { JSONConfiguration, JSONConverter } from "@deck.gl/json/typed";
 import DeckGL from "@deck.gl/react/typed";
-import { OrthographicView, OrbitView, PointLight } from "@deck.gl/core/typed";
-import React, { useEffect, useState, useCallback, useMemo } from "react";
+import { _CameraLight as CameraLight, AmbientLight, DirectionalLight, LightingEffect, OrbitController, OrbitView, OrthographicController, OrthographicView, PointLight, } from "@deck.gl/core/typed";
+import { LineLayer } from "@deck.gl/layers/typed";
+import { Matrix4 } from "@math.gl/core";
+import { fovyToAltitude } from "@math.gl/web-mercator";
+import { colorTables } from "@emerson-eps/color-tables";
+import { boxCenter, boxUnion } from "../utils/BoundingBox3D";
 import JSON_CONVERTER_CONFIG from "../utils/configuration";
 import InfoCard from "./InfoCard";
 import DistanceScale from "./DistanceScale";
 import StatusIndicator from "./StatusIndicator";
 import fitBounds from "../utils/fit-bounds";
 import { validateColorTables, validateLayers } from "@webviz/wsc-common";
-import { getLayersByType } from "../layers/utils/layerTools";
-import { getWellLayerByTypeAndSelectedWells } from "../layers/utils/layerTools";
+import { getModelMatrixScale, getLayersByType, getWellLayerByTypeAndSelectedWells, } from "../layers/utils/layerTools";
 import { WellsLayer, Axes2DLayer, NorthArrow3DLayer } from "../layers";
-import { isEmpty, isEqual } from "lodash";
-import { cloneDeep } from "lodash";
-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";
-import { _CameraLight as CameraLight, AmbientLight, DirectionalLight, } from "@deck.gl/core/typed";
-import { LightingEffect } from "@deck.gl/core/typed";
-import { LineLayer } from "@deck.gl/layers/typed";
-import { Matrix4 } from "@math.gl/core";
-import { fovyToAltitude } from "@math.gl/web-mercator";
 const minZoom3D = -12;
 const maxZoom3D = 12;
 const minZoom2D = -12;
 const maxZoom2D = 4;
-class ZScaleOrbitController extends OrbitController {
-    static setZScaleUpReference(setZScaleUp) {
-        ZScaleOrbitController.setZScaleUp = setZScaleUp;
+function updateZScaleReducer(zScale, action) {
+    return zScale * getZScaleModifier(action);
+}
+function getZScaleModifier(arrowEvent) {
+    let scaleFactor = 0;
+    switch (arrowEvent.key) {
+        case "ArrowUp":
+            scaleFactor = 0.05;
+            break;
+        case "ArrowDown":
+            scaleFactor = -0.05;
+            break;
+        case "PageUp":
+            scaleFactor = 0.25;
+            break;
+        case "PageDown":
+            scaleFactor = -0.25;
+            break;
+        default:
+            break;
     }
-    static setZScaleDownReference(setZScaleDown) {
-        ZScaleOrbitController.setZScaleDown = setZScaleDown;
+    if (arrowEvent.shiftModifier) {
+        scaleFactor /= 5;
     }
-    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;
+    return 1 + scaleFactor;
+}
+function convertToArrowEvent(event) {
+    if (event.type === "keydown") {
+        const keyEvent = event;
+        switch (keyEvent.key) {
+            case "ArrowUp":
+            case "ArrowDown":
+            case "PageUp":
+            case "PageDown":
+                return {
+                    key: keyEvent.key,
+                    shiftModifier: keyEvent.srcEvent.shiftKey,
+                };
+            default:
+                return null;
         }
-        else if (ZScaleOrbitController.setZScaleDown &&
-            event.type === "keydown" &&
-            event.key === "ArrowDown") {
-            ZScaleOrbitController.setZScaleDown(Math.random());
-            return true;
+    }
+    return null;
+}
+class ZScaleOrbitController extends OrbitController {
+    static setUpdateZScaleAction(updateZScaleAction) {
+        ZScaleOrbitController.updateZScaleAction = updateZScaleAction;
+    }
+    handleEvent(event) {
+        if (ZScaleOrbitController.updateZScaleAction) {
+            const arrowEvent = convertToArrowEvent(event);
+            if (arrowEvent) {
+                ZScaleOrbitController.updateZScaleAction(arrowEvent);
+                return true;
+            }
         }
         return super.handleEvent(event);
     }
 }
-ZScaleOrbitController.setZScaleUp = null;
-ZScaleOrbitController.setZScaleDown = null;
+ZScaleOrbitController.updateZScaleAction = null;
 class ZScaleOrbitView extends OrbitView {
     get ControllerType() {
         return ZScaleOrbitController;
@@ -61,7 +88,7 @@ class ZScaleOrbitView extends OrbitView {
 }
 function parseLights(lights) {
     var _a, _b, _c, _d;
-    if (typeof lights === "undefined") {
+    if (!lights) {
         return undefined;
     }
     const effects = [];
@@ -80,13 +107,13 @@ function parseLights(lights) {
         });
         lightsObj = Object.assign(Object.assign({}, lightsObj), { ambientLight });
     }
-    if (typeof lights.pointLights !== "undefined") {
+    if (lights.pointLights) {
         for (const light of lights.pointLights) {
             const pointLight = new PointLight(Object.assign(Object.assign({}, light), { color: (_c = light.color) !== null && _c !== void 0 ? _c : [255, 255, 255] }));
             lightsObj = Object.assign(Object.assign({}, lightsObj), { pointLight });
         }
     }
-    if (typeof lights.directionalLights !== "undefined") {
+    if (lights.directionalLights) {
         for (const light of lights.directionalLights) {
             const directionalLight = new DirectionalLight(Object.assign(Object.assign({}, light), { color: (_d = light.color) !== null && _d !== void 0 ? _d : [255, 255, 255] }));
             lightsObj = Object.assign(Object.assign({}, lightsObj), { directionalLight });
@@ -96,51 +123,8 @@ function parseLights(lights) {
     effects.push(lightingEffect);
     return effects;
 }
-function addBoundingBoxes(b1, b2) {
-    const boxDefault = [0, 0, 0, 1, 1, 1];
-    if (typeof b1 === "undefined" || typeof b2 === "undefined") {
-        return boxDefault;
-    }
-    if (isEqual(b1, boxDefault)) {
-        return b2;
-    }
-    const xmin = Math.min(b1[0], b2[0]);
-    const ymin = Math.min(b1[1], b2[1]);
-    const zmin = Math.min(b1[2], b2[2]);
-    const xmax = Math.max(b1[3], b2[3]);
-    const ymax = Math.max(b1[4], b2[4]);
-    const zmax = Math.max(b1[5], b2[5]);
-    return [xmin, ymin, zmin, xmax, ymax, zmax];
-}
 function mapBoundingBoxReducer(mapBoundingBox, action) {
-    return addBoundingBoxes(mapBoundingBox, action.layerBoundingBox);
-}
-function boundingBoxCenter(box) {
-    const xmin = box[0];
-    const ymin = box[1];
-    const zmin = box[2];
-    const xmax = box[3];
-    const ymax = box[4];
-    const zmax = box[5];
-    return [
-        xmin + 0.5 * (xmax - xmin),
-        ymin + 0.5 * (ymax - ymin),
-        zmin + 0.5 * (zmax - zmin),
-    ];
-}
-// Exclude "layerIds" when monitoring changes to "view" prop as we do not
-// want to recalculate views when the layers change.
-function compareViewsProp(views) {
-    if (typeof views === "undefined" || Object.keys(views).length === 0) {
-        return undefined;
-    }
-    const copy = cloneDeep(views);
-    const viewports = copy.viewports.map((e) => {
-        delete e.layerIds;
-        return e;
-    });
-    copy.viewports = viewports;
-    return JSON.stringify(copy);
+    return boxUnion(mapBoundingBox, action.layerBoundingBox);
 }
 export function useHoverInfo() {
     const [hoverInfo, setHoverInfo] = useState([]);
@@ -160,178 +144,56 @@ function defaultTooltip(info) {
     const feat = info.object;
     return (_c = feat === null || feat === void 0 ? void 0 : feat.properties) === null || _c === void 0 ? void 0 : _c["name"];
 }
-function adjustCameraTarget(viewStates, scale, newScale) {
-    const vs = cloneDeep(viewStates);
-    for (const key in vs) {
-        if (typeof vs[key].target !== "undefined") {
-            const t = vs[key].target;
-            const z = newScale * (t[2] / scale);
-            vs[key].target = [t[0], t[1], z];
-        }
-    }
-    return vs;
-}
-function calculateZoomFromBBox3D(camera, size) {
-    const DEGREES_TO_RADIANS = Math.PI / 180;
-    const RADIANS_TO_DEGREES = 180 / Math.PI;
-    const IDENTITY = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
-    const camera_ = cloneDeep(camera);
-    if (typeof camera_ === "undefined" || !Array.isArray(camera_.zoom)) {
-        return camera;
-    }
-    if (size.width === 0 || size.height === 0) {
-        camera_.zoom = 0;
-        camera_.target = [0, 0, 0];
-        return camera_;
-    }
-    // camera fov eye position. see deck.gl file orbit-viewports.ts
-    const fovy = 50; // default in deck.gl. May also be set construction OrbitView
-    const fD = fovyToAltitude(fovy);
-    const bbox = camera_.zoom;
-    const xMin = bbox[0];
-    const yMin = bbox[1];
-    const zMin = bbox[2];
-    const xMax = bbox[3];
-    const yMax = bbox[4];
-    const zMax = bbox[5];
-    const target = [
-        xMin + (xMax - xMin) / 2,
-        yMin + (yMax - yMin) / 2,
-        zMin + (zMax - zMin) / 2,
-    ];
-    const cameraFovVertical = 50;
-    const angle_ver = (cameraFovVertical / 2) * DEGREES_TO_RADIANS;
-    const L = size.height / 2 / Math.sin(angle_ver);
-    const r = L * Math.cos(angle_ver);
-    const cameraFov = 2 * Math.atan(size.width / 2 / r) * RADIANS_TO_DEGREES;
-    const angle_hor = (cameraFov / 2) * DEGREES_TO_RADIANS;
-    const points = [];
-    points.push([xMin, yMin, zMin]);
-    points.push([xMin, yMax, zMin]);
-    points.push([xMax, yMax, zMin]);
-    points.push([xMax, yMin, zMin]);
-    points.push([xMin, yMin, zMax]);
-    points.push([xMin, yMax, zMax]);
-    points.push([xMax, yMax, zMax]);
-    points.push([xMax, yMin, zMax]);
-    let zoom = 999;
-    for (const point of points) {
-        const x_ = (point[0] - target[0]) / size.height;
-        const y_ = (point[1] - target[1]) / size.height;
-        const z_ = (point[2] - target[2]) / size.height;
-        const m = new Matrix4(IDENTITY);
-        m.rotateX(camera_.rotationX * DEGREES_TO_RADIANS);
-        m.rotateZ(camera_.rotationOrbit * DEGREES_TO_RADIANS);
-        const [x, y, z] = m.transformAsVector([x_, y_, z_]);
-        if (y >= 0) {
-            // These points will actually appear further away when zooming in.
-            continue;
-        }
-        const fwX = fD * Math.tan(angle_hor);
-        let y_new = fwX / (Math.abs(x) / y - fwX / fD);
-        const zoom_x = Math.log2(y_new / y);
-        const fwY = fD * Math.tan(angle_ver);
-        y_new = fwY / (Math.abs(z) / y - fwY / fD);
-        const zoom_z = Math.log2(y_new / y);
-        // it needs to be inside view volume in both directions.
-        zoom = zoom_x < zoom ? zoom_x : zoom;
-        zoom = zoom_z < zoom ? zoom_z : zoom;
-    }
-    camera_.zoom = zoom;
-    camera_.target = target;
-    return camera_;
-}
 const Map = ({ id, layers, bounds, cameraPosition, triggerHome, views, coords, scale, coordinateUnit, colorTables, setEditedData, checkDatafileSchema, onMouseEvent, selection, children, getTooltip = defaultTooltip, getCameraPosition, isRenderedCallback, onDragStart, onDragEnd, lights, triggerResetMultipleWells, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    const deckRef = React.useRef(null);
+    var _a, _b, _c, _d, _e;
     // From react doc, ref should not be read nor modified during rendering.
-    // Extract the needed size in an effect to respect this rule (which proved true)
+    const deckRef = React.useRef(null);
+    const [applyViewController, forceUpdate] = React.useReducer((x) => x + 1, 0);
+    const viewController = useMemo(() => new ViewController(forceUpdate), []);
+    // Extract the needed size from onResize function
     const [deckSize, setDeckSize] = useState({ width: 0, height: 0 });
-    useEffect(() => {
-        var _a, _b, _c, _d;
-        if (((_b = (_a = deckRef.current) === null || _a === void 0 ? void 0 : _a.deck) === null || _b === void 0 ? void 0 : _b.width) &&
-            ((_d = (_c = deckRef.current) === null || _c === void 0 ? void 0 : _c.deck) === null || _d === void 0 ? void 0 : _d.height) &&
-            deckRef.current.deck.width !== deckSize.width &&
-            deckRef.current.deck.height !== deckSize.height) {
-            setDeckSize({
-                width: deckRef.current.deck.width,
-                height: deckRef.current.deck.height,
+    const onResize = useCallback((size) => {
+        // exclude {0, 0} size (when rendered hidden pages)
+        if (size.width > 0 && size.height > 0) {
+            setDeckSize((prevSize) => {
+                if ((prevSize === null || prevSize === void 0 ? void 0 : prevSize.width) !== size.width ||
+                    (prevSize === null || prevSize === void 0 ? void 0 : prevSize.height) !== size.height) {
+                    return size;
+                }
+                return prevSize;
             });
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [(_b = (_a = deckRef.current) === null || _a === void 0 ? void 0 : _a.deck) === null || _b === void 0 ? void 0 : _b.width, (_d = (_c = deckRef.current) === null || _c === void 0 ? void 0 : _c.deck) === null || _d === void 0 ? void 0 : _d.height]);
-    // Deck.gl View's and viewStates as input to Deck.gl
-    const [deckGLViews, setDeckGLViews] = useState([]);
-    const [viewStates, setViewStates] = useState({});
-    const [dataBoundingBox3d, dispatchBoundingBox] = React.useReducer(mapBoundingBoxReducer, [0, 0, 0, 1, 1, 1]);
-    const [viewStateChanged, setViewStateChanged] = useState(false);
-    const camera = useMemo(() => {
-        return calculateZoomFromBBox3D(cameraPosition, deckSize);
-    }, [cameraPosition, deckSize]);
+    }, []);
+    // 3d bounding box computed from the layers
+    const [dataBoundingBox3d, dispatchBoundingBox] = React.useReducer(mapBoundingBoxReducer, undefined);
     // 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);
+    const [zScale, updateZScale] = React.useReducer(updateZScaleReducer, 1);
     React.useEffect(() => {
-        ZScaleOrbitController.setZScaleUpReference(setScaleZUp);
-    }, [setScaleZUp]);
-    React.useEffect(() => {
-        ZScaleOrbitController.setZScaleDownReference(setScaleZDown);
-    }, [setScaleZDown]);
-    useEffect(() => {
-        const [Views, viewStates] = createViewsAndViewStates(views, viewPortMargins, bounds, undefined, // Use bounds not cameraPosition,
-        dataBoundingBox3d, deckSize);
-        setDeckGLViews(Views);
-        setViewStates(viewStates);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [triggerHome]);
-    useEffect(() => {
-        const isBoundsDefined = typeof bounds !== "undefined";
-        const isCameraPositionDefined = typeof cameraPosition !== "undefined" &&
-            Object.keys(cameraPosition).length !== 0;
-        if (viewStateChanged || isBoundsDefined || isCameraPositionDefined) {
-            // User has changed viewState or camera is defined, do not recalculate.
-            return;
-        }
-        const [Views, viewStates] = createViewsAndViewStates(views, viewPortMargins, bounds, camera, dataBoundingBox3d, deckSize);
-        setDeckGLViews(Views);
-        setViewStates(viewStates);
-        setViewStateChanged(false);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [dataBoundingBox3d]);
-    useEffect(() => {
-        const [Views, viewStates] = createViewsAndViewStates(views, viewPortMargins, bounds, camera, dataBoundingBox3d, deckSize);
-        setDeckGLViews(Views);
-        setViewStates(viewStates);
-        setViewStateChanged(false);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        bounds,
-        camera,
-        deckSize,
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        compareViewsProp(views),
-    ]);
-    useEffect(() => {
-        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
-    }, [scaleZUp]);
-    useEffect(() => {
-        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);
+        ZScaleOrbitController.setUpdateZScaleAction(updateZScale);
+    }, [updateZScale]);
+    // compute the viewport margins
+    const viewPortMargins = React.useMemo(() => {
+        if (!(layers === null || layers === void 0 ? void 0 : layers.length)) {
+            return {
+                left: 0,
+                right: 0,
+                top: 0,
+                bottom: 0,
+            };
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [scaleZDown]);
+        // Margins on the viewport are extracted from a potential 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;
+        });
+        const axes2DProps = axes2DLayer === null || axes2DLayer === void 0 ? void 0 : axes2DLayer.props;
+        return {
+            left: (axes2DProps === null || axes2DProps === void 0 ? void 0 : axes2DProps.isLeftRuler) ? axes2DProps.marginH : 0,
+            right: (axes2DProps === null || axes2DProps === void 0 ? void 0 : axes2DProps.isRightRuler) ? axes2DProps.marginH : 0,
+            top: (axes2DProps === null || axes2DProps === void 0 ? void 0 : axes2DProps.isTopRuler) ? axes2DProps.marginV : 0,
+            bottom: (axes2DProps === null || axes2DProps === void 0 ? void 0 : axes2DProps.isBottomRuler) ? axes2DProps.marginV : 0,
+        };
+    }, [layers]);
+    // selection
     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;
@@ -421,17 +283,9 @@ const Map = ({ id, layers, bounds, cameraPosition, triggerHome, views, coords, s
             event.tapCount == 2 // Note. Detect double click.
         ) {
             // Left button click identifies new camera rotation anchor.
-            const viewstateKeys = Object.keys(viewStates);
-            if (infos.length >= 1 && viewstateKeys.length === 1) {
-                const info = infos[0];
-                if (info.coordinate) {
-                    const x = info.coordinate[0];
-                    const y = info.coordinate[1];
-                    const z = info.coordinate[2];
-                    const vs = cloneDeep(viewStates);
-                    vs[viewstateKeys[0]].target = [x, y, z];
-                    vs[viewstateKeys[0]].transitionDuration = 1000;
-                    setViewStates(vs);
+            if (infos.length >= 1) {
+                if (infos[0].coordinate) {
+                    viewController.setTarget(infos[0].coordinate);
                 }
             }
         }
@@ -439,7 +293,7 @@ const Map = ({ id, layers, bounds, cameraPosition, triggerHome, views, coords, s
             return;
         const ev = handleMouseEvent(type, infos, event);
         onMouseEvent(ev);
-    }, [onMouseEvent, viewStates]);
+    }, [onMouseEvent, viewController]);
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const [hoverInfo, setHoverInfo] = useState([]);
     const onHover = useCallback((pickInfo, event) => {
@@ -451,30 +305,8 @@ const Map = ({ id, layers, bounds, cameraPosition, triggerHome, views, coords, s
         const infos = getPickingInfos(pickInfo, event);
         callOnMouseEvent === null || callOnMouseEvent === void 0 ? void 0 : callOnMouseEvent("click", infos, event);
     }, [callOnMouseEvent, getPickingInfos]);
-    // compute the viewport margins
-    const viewPortMargins = React.useMemo(() => {
-        if (typeof layers === "undefined") {
-            return {
-                left: 0,
-                right: 0,
-                top: 0,
-                bottom: 0,
-            };
-        }
-        // Margins on the viewport are extracted from a potential 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;
-        });
-        const axes2DProps = axes2DLayer === null || axes2DLayer === void 0 ? void 0 : axes2DLayer.props;
-        return {
-            left: (axes2DProps === null || axes2DProps === void 0 ? void 0 : axes2DProps.isLeftRuler) ? axes2DProps.marginH : 0,
-            right: (axes2DProps === null || axes2DProps === void 0 ? void 0 : axes2DProps.isRightRuler) ? axes2DProps.marginH : 0,
-            top: (axes2DProps === null || axes2DProps === void 0 ? void 0 : axes2DProps.isTopRuler) ? axes2DProps.marginV : 0,
-            bottom: (axes2DProps === null || axes2DProps === void 0 ? void 0 : axes2DProps.isBottomRuler) ? axes2DProps.marginV : 0,
-        };
-    }, [layers]);
     const deckGLLayers = React.useMemo(() => {
-        if (typeof layers === "undefined") {
+        if (!layers) {
             return [];
         }
         if (layers.length === 0) {
@@ -486,7 +318,7 @@ const Map = ({ id, layers, bounds, cameraPosition, triggerHome, views, coords, s
             });
             layers.push(dummy_layer);
         }
-        const m = getModelMatrixScale(scaleZ);
+        const m = getModelMatrixScale(zScale);
         return layers.map((item) => {
             if ((item === null || item === void 0 ? void 0 : item.constructor.name) === NorthArrow3DLayer.name) {
                 return item;
@@ -500,7 +332,7 @@ const Map = ({ id, layers, bounds, cameraPosition, triggerHome, views, coords, s
                 modelMatrix: m,
             });
         });
-    }, [layers, scaleZ]);
+    }, [layers, zScale]);
     const [isLoaded, setIsLoaded] = useState(false);
     const onAfterRender = useCallback(() => {
         if (deckGLLayers) {
@@ -512,7 +344,7 @@ const Map = ({ id, layers, bounds, cameraPosition, triggerHome, views, coords, s
                 deckGLLayers[0].id ===
                     "webviz_internal_dummy_layer";
             setIsLoaded(loadedState || emptyLayers);
-            if (typeof isRenderedCallback !== "undefined") {
+            if (isRenderedCallback) {
                 isRenderedCallback(loadedState);
             }
         }
@@ -537,13 +369,14 @@ const Map = ({ id, layers, bounds, cameraPosition, triggerHome, views, coords, s
     }, [
         checkDatafileSchema,
         colorTables,
-        (_f = (_e = deckRef === null || deckRef === void 0 ? void 0 : deckRef.current) === null || _e === void 0 ? void 0 : _e.deck) === null || _f === void 0 ? void 0 : _f.props.layers,
+        (_b = (_a = deckRef === null || deckRef === void 0 ? void 0 : deckRef.current) === null || _a === void 0 ? void 0 : _a.deck) === null || _b === void 0 ? void 0 : _b.props.layers,
         isLoaded,
     ]);
     const layerFilter = useCallback((args) => {
         // display all the layers if views are not specified correctly
-        if (!views || !views.viewports || !views.layout)
+        if (!(views === null || views === void 0 ? void 0 : views.viewports) || !(views === null || views === void 0 ? void 0 : views.layout)) {
             return true;
+        }
         const cur_view = views.viewports.find(({ id }) => args.viewport.id && id === args.viewport.id);
         if ((cur_view === null || cur_view === void 0 ? void 0 : cur_view.layerIds) && cur_view.layerIds.length > 0) {
             const layer_ids = cur_view.layerIds;
@@ -559,32 +392,40 @@ const Map = ({ id, layers, bounds, cameraPosition, triggerHome, views, coords, s
     const onViewStateChange = useCallback(
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     ({ viewId, viewState }) => {
-        const viewports = (views === null || views === void 0 ? void 0 : views.viewports) || [];
-        if (viewState.target.length === 2) {
-            // In orthographic mode viewState.target contains only x and y. Add existing z value.
-            viewState.target.push(viewStates[viewId].target[2]);
-        }
-        const isSyncIds = viewports
-            .filter((item) => item.isSync)
-            .map((item) => item.id);
-        if (isSyncIds === null || isSyncIds === void 0 ? void 0 : isSyncIds.includes(viewId)) {
-            const viewStateTable = views === null || views === void 0 ? void 0 : views.viewports.filter((item) => item.isSync).map((item) => [item.id, viewState]);
-            const tempViewStates = Object.fromEntries(viewStateTable !== null && viewStateTable !== void 0 ? viewStateTable : []);
-            setViewStates((currentViewStates) => (Object.assign(Object.assign({}, currentViewStates), tempViewStates)));
-        }
-        else {
-            setViewStates((currentViewStates) => (Object.assign(Object.assign({}, currentViewStates), { [viewId]: viewState })));
-        }
+        viewController.onViewStateChange(viewId, viewState);
         if (getCameraPosition) {
             getCameraPosition(viewState);
         }
-        setViewStateChanged(true);
-    }, [getCameraPosition, viewStates, views === null || views === void 0 ? void 0 : views.viewports]);
+    }, [getCameraPosition, viewController]);
     const effects = parseLights(lights);
-    if (!deckGLViews || isEmpty(deckGLViews) || isEmpty(deckGLLayers))
+    const [deckGlViews, deckGlViewState] = useMemo(() => {
+        const state = {
+            triggerHome,
+            camera: cameraPosition,
+            bounds,
+            boundingBox3d: dataBoundingBox3d,
+            viewPortMargins,
+            deckSize,
+            zScale,
+        };
+        return viewController.getViews(views, state);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        triggerHome,
+        cameraPosition,
+        bounds,
+        dataBoundingBox3d,
+        viewPortMargins,
+        deckSize,
+        views,
+        zScale,
+        applyViewController,
+        viewController,
+    ]);
+    if (!deckGlViews || isEmpty(deckGlViews) || isEmpty(deckGLLayers))
         return null;
     return (React.createElement("div", { onContextMenu: (event) => event.preventDefault() },
-        React.createElement(DeckGL, { id: id, viewState: viewStates, views: deckGLViews, layerFilter: layerFilter, layers: deckGLLayers, 
+        React.createElement(DeckGL, { id: id, viewState: deckGlViewState, views: deckGlViews, layerFilter: layerFilter, layers: deckGLLayers, 
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-expect-error
             userData: {
@@ -609,8 +450,8 @@ const Map = ({ id, layers, bounds, cameraPosition, triggerHome, views, coords, s
                     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, onAfterRender: onAfterRender, effects: effects, onDragStart: onDragStart, onDragEnd: onDragEnd }, children),
-        (scale === null || scale === void 0 ? void 0 : scale.visible) ? (React.createElement(DistanceScale, Object.assign({}, scale, { zoom: (_h = (_g = viewStates[Object.keys(viewStates)[0]]) === null || _g === void 0 ? void 0 : _g.zoom) !== null && _h !== void 0 ? _h : -5, scaleUnit: coordinateUnit, style: (_j = scale.cssStyle) !== null && _j !== void 0 ? _j : {} }))) : null,
+            }, getCursor: ({ isDragging }) => isDragging ? "grabbing" : "default", getTooltip: getTooltip, ref: deckRef, onViewStateChange: onViewStateChange, onHover: onHover, onClick: onClick, onAfterRender: onAfterRender, effects: effects, onDragStart: onDragStart, onDragEnd: onDragEnd, onResize: onResize }, children),
+        (scale === null || scale === void 0 ? void 0 : scale.visible) ? (React.createElement(DistanceScale, Object.assign({}, scale, { zoom: (_d = (_c = deckGlViewState[Object.keys(deckGlViewState)[0]]) === null || _c === void 0 ? void 0 : _c.zoom) !== null && _d !== void 0 ? _d : -5, scaleUnit: coordinateUnit, style: (_e = scale.cssStyle) !== null && _e !== void 0 ? _e : {} }))) : 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: {
@@ -660,22 +501,228 @@ export function jsonToObject(data, enums = undefined) {
     });
     const jsonConverter = new JSONConverter({ configuration });
     // remove empty data/layer object
-    const filtered_data = data.filter((value) => Object.keys(value).length !== 0);
+    const filtered_data = data.filter((value) => !isEmpty(value));
     return jsonConverter.convert(filtered_data);
 }
-// return viewstate with computed bounds to fit the data in viewport
-function getViewState(viewPortMargins, bounds_accessor, centerOfData, views, viewPort, size) {
-    var _a;
-    let bounds = [0, 0, 1, 1];
-    if (typeof bounds_accessor == "function") {
-        bounds = bounds_accessor();
+class ViewController {
+    constructor(rerender) {
+        this.state_ = {
+            triggerHome: undefined,
+            camera: undefined,
+            bounds: undefined,
+            boundingBox3d: undefined,
+            deckSize: { width: 0, height: 0 },
+            zScale: 1,
+            viewPortMargins: {
+                left: 0,
+                right: 0,
+                top: 0,
+                bottom: 0,
+            },
+            // Derived state
+            target: undefined,
+            viewStateChanged: false,
+        };
+        this.derivedState_ = {
+            target: undefined,
+            viewStateChanged: false,
+        };
+        this.views_ = undefined;
+        this.result_ = {
+            views: [],
+            viewState: {},
+        };
+        this.setTarget = (target) => {
+            this.derivedState_.target = [target[0], target[1], target[2]];
+            this.rerender_();
+        };
+        this.getViews = (views, state) => {
+            const fullState = this.consolidateState(state);
+            const newViews = this.getDeckGlViews(views, fullState);
+            const newViewState = this.getDeckGlViewState(views, fullState);
+            if (this.result_.views !== newViews ||
+                this.result_.viewState !== newViewState) {
+                const viewsMsg = this.result_.views !== newViews ? " views" : "";
+                const stateMsg = this.result_.viewState !== newViewState ? " state" : "";
+                const linkMsg = viewsMsg && stateMsg ? " and" : "";
+                console.log(`ViewController returns new${viewsMsg}${linkMsg}${stateMsg}`);
+            }
+            this.state_ = fullState;
+            this.views_ = views;
+            this.result_.views = newViews;
+            this.result_.viewState = newViewState;
+            return [newViews, newViewState];
+        };
+        // consolidate "controlled" state (ie. set by parent) with "uncontrolled" state
+        this.consolidateState = (state) => {
+            return Object.assign(Object.assign({}, state), this.derivedState_);
+        };
+        // returns the DeckGL views (ie. view position and viewport)
+        this.getDeckGlViews = (views, state) => {
+            const needUpdate = views != this.views_ || state.deckSize != this.state_.deckSize;
+            if (!needUpdate) {
+                return this.result_.views;
+            }
+            return buildDeckGlViews(views, state.deckSize);
+        };
+        // returns the DeckGL views state(s) (ie. camera settings applied to individual views)
+        this.getDeckGlViewState = (views, state) => {
+            var _a, _b;
+            const viewsChanged = views != this.views_;
+            const triggerHome = state.triggerHome !== this.state_.triggerHome;
+            const updateTarget = (viewsChanged || state.target !== ((_a = this.state_) === null || _a === void 0 ? void 0 : _a.target)) &&
+                state.target !== undefined;
+            const updateZScale = viewsChanged || state.zScale !== ((_b = this.state_) === null || _b === void 0 ? void 0 : _b.zScale) || triggerHome;
+            const updateViewState = viewsChanged ||
+                triggerHome ||
+                (!state.viewStateChanged &&
+                    state.boundingBox3d !== this.state_.boundingBox3d);
+            const needUpdate = updateZScale || updateTarget || updateViewState;
+            const isCacheEmpty = isEmpty(this.result_.viewState);
+            if (!isCacheEmpty && !needUpdate) {
+                return this.result_.viewState;
+            }
+            // initialize with last result
+            const prevViewState = this.result_.viewState;
+            let viewState = prevViewState;
+            if (updateViewState || isCacheEmpty) {
+                viewState = buildDeckGlViewStates(views, state.viewPortMargins, state.camera, state.boundingBox3d, state.bounds, state.deckSize);
+                // reset state
+                this.derivedState_.viewStateChanged = false;
+            }
+            // check if view state could be computed
+            if (isEmpty(viewState)) {
+                return viewState;
+            }
+            const viewStateKeys = Object.keys(viewState);
+            if (updateTarget &&
+                this.derivedState_.target &&
+                (viewStateKeys === null || viewStateKeys === void 0 ? void 0 : viewStateKeys.length) === 1) {
+                // deep clone to notify change (memo checks object address)
+                if (viewState === prevViewState) {
+                    viewState = cloneDeep(prevViewState);
+                }
+                // update target
+                viewState[viewStateKeys[0]].target = this.derivedState_.target;
+                viewState[viewStateKeys[0]].transitionDuration = 1000;
+                // reset
+                this.derivedState_.target = undefined;
+            }
+            if (updateZScale) {
+                // deep clone to notify change (memo checks object address)
+                if (viewState === prevViewState) {
+                    viewState = cloneDeep(prevViewState);
+                }
+                // Z scale to apply to target.
+                // - if triggerHome: the target was recomputed from the input data (ie. without any scale applied)
+                // - otherwise: previous scale (ie. this.state_.zScale) was already applied, and must be "reverted"
+                const targetScale = state.zScale / (triggerHome ? 1 : this.state_.zScale);
+                // update target
+                for (const key in viewState) {
+                    const t = viewState[key].target;
+                    if (t) {
+                        viewState[key].target = [t[0], t[1], t[2] * targetScale];
+                    }
+                }
+            }
+            return viewState;
+        };
+        this.onViewStateChange = (viewId, viewState) => {
+            var _a, _b, _c;
+            const viewports = (_b = (_a = this.views_) === null || _a === void 0 ? void 0 : _a.viewports) !== null && _b !== void 0 ? _b : [];
+            if (viewState.target.length === 2) {
+                // In orthographic mode viewState.target contains only x and y. Add existing z value.
+                viewState.target.push(this.result_.viewState[viewId].target[2]);
+            }
+            const isSyncIds = viewports
+                .filter((item) => item.isSync)
+                .map((item) => item.id);
+            if (isSyncIds === null || isSyncIds === void 0 ? void 0 : isSyncIds.includes(viewId)) {
+                const viewStateTable = (_c = this.views_) === null || _c === void 0 ? void 0 : _c.viewports.filter((item) => item.isSync).map((item) => [item.id, viewState]);
+                const tempViewStates = Object.fromEntries(viewStateTable !== null && viewStateTable !== void 0 ? viewStateTable : []);
+                this.result_.viewState = Object.assign(Object.assign({}, this.result_.viewState), tempViewStates);
+            }
+            else {
+                this.result_.viewState = Object.assign(Object.assign({}, this.result_.viewState), { [viewId]: viewState });
+            }
+            this.derivedState_.viewStateChanged = true;
+            this.rerender_();
+        };
+        this.rerender_ = rerender;
     }
-    else {
-        bounds = bounds_accessor;
+}
+/**
+ * Returns the zoom factor allowing to view the complete boundingBox.
+ * @param camera camera defining the view orientation.
+ * @param boundingBox 3D bounding box to visualize.
+ * @param fov field of view (see deck.gl file orbit-viewports.ts).
+ */
+function computeCameraZoom(camera, boundingBox, size, fovy = 50) {
+    const DEGREES_TO_RADIANS = Math.PI / 180;
+    const RADIANS_TO_DEGREES = 180 / Math.PI;
+    const IDENTITY = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
+    const fD = fovyToAltitude(fovy);
+    const xMin = boundingBox[0];
+    const yMin = boundingBox[1];
+    const zMin = boundingBox[2];
+    const xMax = boundingBox[3];
+    const yMax = boundingBox[4];
+    const zMax = boundingBox[5];
+    const target = [
+        xMin + (xMax - xMin) / 2,
+        yMin + (yMax - yMin) / 2,
+        zMin + (zMax - zMin) / 2,
+    ];
+    const cameraFovVertical = 50;
+    const angle_ver = (cameraFovVertical / 2) * DEGREES_TO_RADIANS;
+    const L = size.height / 2 / Math.sin(angle_ver);
+    const r = L * Math.cos(angle_ver);
+    const cameraFov = 2 * Math.atan(size.width / 2 / r) * RADIANS_TO_DEGREES;
+    const angle_hor = (cameraFov / 2) * DEGREES_TO_RADIANS;
+    const points = [];
+    points.push([xMin, yMin, zMin]);
+    points.push([xMin, yMax, zMin]);
+    points.push([xMax, yMax, zMin]);
+    points.push([xMax, yMin, zMin]);
+    points.push([xMin, yMin, zMax]);
+    points.push([xMin, yMax, zMax]);
+    points.push([xMax, yMax, zMax]);
+    points.push([xMax, yMin, zMax]);
+    let zoom = 999;
+    for (const point of points) {
+        const x_ = (point[0] - target[0]) / size.height;
+        const y_ = (point[1] - target[1]) / size.height;
+        const z_ = (point[2] - target[2]) / size.height;
+        const m = new Matrix4(IDENTITY);
+        m.rotateX(camera.rotationX * DEGREES_TO_RADIANS);
+        m.rotateZ(camera.rotationOrbit * DEGREES_TO_RADIANS);
+        const [x, y, z] = m.transformAsVector([x_, y_, z_]);
+        if (y >= 0) {
+            // These points will actually appear further away when zooming in.
+            continue;
+        }
+        const fwX = fD * Math.tan(angle_hor);
+        let y_new = fwX / (Math.abs(x) / y - fwX / fD);
+        const zoom_x = Math.log2(y_new / y);
+        const fwY = fD * Math.tan(angle_ver);
+        y_new = fwY / (Math.abs(z) / y - fwY / fD);
+        const zoom_z = Math.log2(y_new / y);
+        // it needs to be inside view volume in both directions.
+        zoom = zoom_x < zoom ? zoom_x : zoom;
+        zoom = zoom_z < zoom ? zoom_z : zoom;
     }
+    return zoom;
+}
+///////////////////////////////////////////////////////////////////////////////////////////
+// return viewstate with computed bounds to fit the data in viewport
+function getViewStateFromBounds(viewPortMargins, bounds_accessor, target, views, viewPort, size) {
+    var _a, _b, _c;
+    const bounds = typeof bounds_accessor == "function"
+        ? bounds_accessor()
+        : bounds_accessor;
     let w = bounds[2] - bounds[0]; // right - left
     let h = bounds[3] - bounds[1]; // top - bottom
-    const z = centerOfData[2];
+    const z = target[2];
     const fb = fitBounds({ width: w, height: h, bounds });
     let fb_target = [fb.x, fb.y, z];
     let fb_zoom = fb.zoom;
@@ -694,8 +741,8 @@ function getViewState(viewPortMargins, bounds_accessor, centerOfData, views, vie
         w = size.width - marginH; // width of the viewport minus margin.
         h = size.height - marginV;
         // Special case if matrix views.
-        // Use width and heigt for a subview instead of full viewport.
-        if (typeof (views === null || views === void 0 ? void 0 : views.layout) !== "undefined") {
+        // Use width and height for a sub-view instead of full viewport.
+        if (views === null || views === void 0 ? void 0 : views.layout) {
             const [nY, nX] = views.layout;
             const isMatrixViews = nX !== 1 || nY !== 1;
             if (isMatrixViews) {
@@ -733,159 +780,220 @@ 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 = 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_,
+        target: (_b = viewPort.target) !== null && _b !== void 0 ? _b : fb_target,
+        zoom: (_c = viewPort.zoom) !== null && _c !== void 0 ? _c : fb_zoom,
         rotationX: 90,
         rotationOrbit: 0,
-        minZoom,
-        maxZoom,
+        minZoom: viewPort.show3D ? minZoom3D : minZoom2D,
+        maxZoom: viewPort.show3D ? maxZoom3D : maxZoom2D,
     };
     return view_state;
 }
-///////////////////////////////////////////////////////////////////////////////////////////
-// return viewstate with computed bounds to fit the data in viewport
-function getViewState3D(is3D, bounds, zoom, size) {
-    const xMin = bounds[0];
-    const yMin = bounds[1];
-    const zMin = bounds[2];
-    const xMax = bounds[3];
-    const yMax = bounds[4];
-    const zMax = bounds[5];
-    let width = xMax - xMin;
-    let height = yMax - yMin;
-    if (size.width > 0 && size.height > 0) {
-        width = size.width;
-        height = size.height;
+function getVT(viewport) {
+    if (viewport.show3D) {
+        return [ZScaleOrbitView, ZScaleOrbitController];
     }
-    const target = [
-        xMin + (xMax - xMin) / 2,
-        yMin + (yMax - yMin) / 2,
-        is3D ? zMin + (zMax - zMin) / 2 : 0,
+    return [
+        viewport.id === "intersection_view"
+            ? IntersectionView
+            : OrthographicView,
+        OrthographicController,
     ];
-    const bounds2D = [xMin, yMin, xMax, yMax];
-    const fitted_bound = fitBounds({
+}
+function areViewsValid(views, size) {
+    var _a, _b;
+    const isInvalid = (views === null || views === void 0 ? void 0 : views.viewports) === undefined ||
+        (views === null || views === void 0 ? void 0 : views.layout) === undefined ||
+        !((_a = views === null || views === void 0 ? void 0 : views.layout) === null || _a === void 0 ? void 0 : _a[0]) ||
+        !((_b = views === null || views === void 0 ? void 0 : views.layout) === null || _b === void 0 ? void 0 : _b[1]) ||
+        !size.width ||
+        !size.height;
+    return !isInvalid;
+}
+/** returns a new View instance. */
+function newView(viewport, x, y, width, height) {
+    const far = 9999;
+    const near = viewport.show3D ? 0.1 : -9999;
+    const [ViewType, Controller] = getVT(viewport);
+    return new ViewType({
+        id: viewport.id,
+        controller: {
+            type: Controller,
+            doubleClickZoom: false,
+        },
+        x,
+        y,
         width,
         height,
-        bounds: bounds2D,
+        flipY: false,
+        far,
+        near,
     });
-    const view_state = {
-        target,
-        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 and viewStates for DeckGL component
-function createViewsAndViewStates(views, viewPortMargins, bounds, cameraPosition, boundingBox, size) {
-    var _a, _b, _c, _d;
-    const deckgl_views = [];
-    let viewStates = {};
-    const centerOfData = boundingBoxCenter(boundingBox);
-    const widthViewPort = size.width;
-    const heightViewPort = size.height;
-    const mPixels = (_a = views === null || views === void 0 ? void 0 : views.marginPixels) !== null && _a !== void 0 ? _a : 0;
-    const isOk = (views === null || views === void 0 ? void 0 : views.layout) !== undefined &&
-        ((_b = views === null || views === void 0 ? void 0 : views.layout) === null || _b === void 0 ? void 0 : _b[0]) >= 1 &&
-        ((_c = views === null || views === void 0 ? void 0 : views.layout) === null || _c === void 0 ? void 0 : _c[1]) >= 1 &&
-        widthViewPort > 0 &&
-        heightViewPort > 0;
-    // if props for multiple viewport are not proper, or deck size is not yet initialized, return 2d view
-    // add redundant check on views to please lint
+function buildDeckGlViews(views, size) {
+    var _a;
+    const isOk = areViewsValid(views, size);
     if (!views || !isOk) {
-        deckgl_views.push(new OrthographicView({
-            id: "main",
-            controller: { doubleClickZoom: false },
-            x: "0%",
-            y: "0%",
-            width: "100%",
-            height: "100%",
-            flipY: false,
-            far: +99999,
-            near: -99999,
-        }));
-        viewStates["dummy"] =
-            cameraPosition !== null && cameraPosition !== void 0 ? cameraPosition : {
-                target: [0, 0],
-                zoom: 0,
-                rotationX: 0,
-                rotationOrbit: 0,
-                minZoom: minZoom2D,
-                maxZoom: maxZoom2D,
-            };
+        return [
+            new OrthographicView({
+                id: "main",
+                controller: { doubleClickZoom: false },
+                x: "0%",
+                y: "0%",
+                width: "100%",
+                height: "100%",
+                flipY: false,
+                far: +99999,
+                near: -99999,
+            }),
+        ];
+    }
+    // compute
+    const [nY, nX] = views.layout;
+    // compute for single view (code is more readable)
+    const singleView = nX === 1 && nY === 1;
+    if (singleView) {
+        // Using 99.5% of viewport to avoid flickering of deckgl canvas
+        return [newView(views.viewports[0], 0, 0, "95%", "95%")];
+    }
+    // compute for matrix
+    const result = [];
+    const w = 99.5 / nX; // Using 99.5% of viewport to avoid flickering of deckgl canvas
+    const h = 99.5 / nY;
+    const marginPixels = (_a = views.marginPixels) !== null && _a !== void 0 ? _a : 0;
+    const marginHorPercentage = 100 * 100 * (marginPixels / (w * size.width));
+    const marginVerPercentage = 100 * 100 * (marginPixels / (h * size.height));
+    let yPos = 0;
+    for (let y = 1; y <= nY; y++) {
+        let xPos = 0;
+        for (let x = 1; x <= nX; x++) {
+            if (result.length >= views.viewports.length) {
+                // stop when all the viewports are filled
+                return result;
+            }
+            const currentViewport = views.viewports[result.length];
+            const viewX = xPos + marginHorPercentage / nX + "%";
+            const viewY = yPos + marginVerPercentage / nY + "%";
+            const viewWidth = w * (1 - 2 * (marginHorPercentage / 100)) + "%";
+            const viewHeight = h * (1 - 2 * (marginVerPercentage / 100)) + "%";
+            result.push(newView(currentViewport, viewX, viewY, viewWidth, viewHeight));
+            xPos = xPos + w;
+        }
+        yPos = yPos + h;
+    }
+    return result;
+}
+/**
+ * Returns the camera if it is fully specified (ie. the zoom is a valid number), otherwise computes
+ * the zoom to visualize the complete camera boundingBox if set, the provided boundingBox otherwise.
+ * @param camera input camera
+ * @param boundingBox fallback bounding box, if the camera zoom is not zoom a value nor a bounding box
+ */
+function updateViewState(camera, boundingBox, size) {
+    var _a, _b;
+    if (typeof camera.zoom === "number" && !Number.isNaN(camera.zoom)) {
+        return camera;
+    }
+    // update the camera to see the whole boundingBox
+    if (Array.isArray(camera.zoom)) {
+        boundingBox = camera.zoom;
+    }
+    // return the camera if the bounding box is undefined
+    if (boundingBox === undefined) {
+        return camera;
+    }
+    // clone the camera in case of triggerHome
+    const camera_ = cloneDeep(camera);
+    camera_.zoom = computeCameraZoom(camera, boundingBox, size);
+    camera_.target = boxCenter(boundingBox);
+    camera_.minZoom = (_a = camera_.minZoom) !== null && _a !== void 0 ? _a : minZoom3D;
+    camera_.maxZoom = (_b = camera_.maxZoom) !== null && _b !== void 0 ? _b : maxZoom3D;
+    return camera_;
+}
+/**
+ *
+ * @returns Computes the view state
+ */
+function computeViewState(viewPort, cameraPosition, boundingBox, bounds, viewportMargins, views, size) {
+    var _a;
+    // If the camera is defined, use it
+    const isCameraPositionDefined = cameraPosition !== undefined;
+    const isBoundsDefined = bounds !== undefined;
+    if ((_a = viewPort.show3D) !== null && _a !== void 0 ? _a : false) {
+        // If the camera is defined, use it
+        if (isCameraPositionDefined) {
+            return updateViewState(cameraPosition, boundingBox, size);
+        }
+        // deprecated in 3D, kept for backward compatibility
+        if (isBoundsDefined) {
+            const centerOfData = boundingBox
+                ? boxCenter(boundingBox)
+                : [0, 0, 0];
+            return getViewStateFromBounds(viewportMargins, bounds, centerOfData, views, viewPort, size);
+        }
+        const defaultCamera = {
+            target: [],
+            zoom: NaN,
+            rotationX: 45,
+            rotationOrbit: 0,
+        };
+        return updateViewState(defaultCamera, boundingBox, size);
     }
     else {
-        let yPos = 0;
-        const [nY, nX] = views.layout;
-        const w = 99.5 / nX; // Using 99.5% of viewport to avoid flickering of deckgl canvas
-        const h = 99.5 / nY;
-        const singleView = nX === 1 && nY === 1;
-        const marginHorPercentage = singleView // percentage of sub view
-            ? 0
-            : 100 * 100 * (mPixels / (w * widthViewPort));
-        const marginVerPercentage = singleView
-            ? 0
-            : 100 * 100 * (mPixels / (h * heightViewPort));
-        for (let y = 1; y <= nY; y++) {
-            let xPos = 0;
-            for (let x = 1; x <= nX; x++) {
-                if (views.viewports == undefined ||
-                    deckgl_views.length >= views.viewports.length) {
-                    return [deckgl_views, viewStates];
-                }
-                const currentViewport = views.viewports[deckgl_views.length];
-                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
-                    ? ZScaleOrbitController
-                    : OrthographicController;
-                const controller = {
-                    type: Controller,
-                    doubleClickZoom: false,
-                };
-                deckgl_views.push(new ViewType({
-                    id: currentViewport.id,
-                    controller: controller,
-                    x: xPos + marginHorPercentage / nX + "%",
-                    y: yPos + marginVerPercentage / nY + "%",
-                    width: w * (1 - 2 * (marginHorPercentage / 100)) + "%",
-                    height: h * (1 - 2 * (marginVerPercentage / 100)) + "%",
-                    flipY: false,
-                    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, size)
-                        : getViewState3D((_d = currentViewport.show3D) !== null && _d !== void 0 ? _d : false, boundingBox, currentViewport.zoom, size);
-                }
-                viewStates = Object.assign(Object.assign({}, viewStates), { [currentViewport.id]: viewState });
-                xPos = xPos + w;
+        const centerOfData = boundingBox
+            ? boxCenter(boundingBox)
+            : [0, 0, 0];
+        // if bounds are defined, use them
+        if (isBoundsDefined) {
+            return getViewStateFromBounds(viewportMargins, bounds, centerOfData, views, viewPort, size);
+        }
+        // deprecated in 2D, kept for backward compatibility
+        if (isCameraPositionDefined) {
+            return cameraPosition;
+        }
+        return boundingBox
+            ? getViewStateFromBounds(viewportMargins, 
+            // use the bounding box to extract the 2D bounds
+            [
+                boundingBox[0],
+                boundingBox[1],
+                boundingBox[3],
+                boundingBox[4],
+            ], centerOfData, views, viewPort, size)
+            : undefined;
+    }
+}
+function buildDeckGlViewStates(views, viewPortMargins, cameraPosition, boundingBox, bounds, size) {
+    const isOk = areViewsValid(views, size);
+    if (!views || !isOk) {
+        return {};
+    }
+    // compute
+    const [nY, nX] = views.layout;
+    // compute for single view (code is more readable)
+    const singleView = nX === 1 && nY === 1;
+    if (singleView) {
+        const viewState = computeViewState(views.viewports[0], cameraPosition, boundingBox, bounds, viewPortMargins, views, size);
+        return viewState ? { [views.viewports[0].id]: viewState } : {};
+    }
+    // compute for matrix
+    let result = {};
+    for (let y = 1; y <= nY; y++) {
+        for (let x = 1; x <= nX; x++) {
+            const resultLength = Object.keys(result).length;
+            if (resultLength >= views.viewports.length) {
+                // stop when all the viewports are filled
+                return result;
+            }
+            const currentViewport = views.viewports[resultLength];
+            const currentViewState = computeViewState(currentViewport, cameraPosition, boundingBox, bounds, viewPortMargins, views, size);
+            if (currentViewState) {
+                result = Object.assign(Object.assign({}, result), { [currentViewport.id]: currentViewState });
             }
-            yPos = yPos + h;
         }
     }
-    return [deckgl_views, viewStates];
+    return result;
 }
 function handleMouseEvent(type, infos, event) {
     var _a;