@jupytergis/base 0.1.3 → 0.1.4

package/lib/mainview/mainView.d.ts

@@ -47,6 +47,14 @@ export declare class MainView extends React.Component<IProps, IStates> {
      */
     updateLayers(layerIds: string[]): void;
     private _updateLayersImpl;
+    /**
+     * Build the map layer.
+     *
+     * @param id - id of the layer.
+     * @param layer - the layer object.
+     * @returns - the map layer.
+     */
+    private _buildMapLayer;
     /**
      * Add a layer to the map.
      *
@@ -65,13 +73,6 @@ export declare class MainView extends React.Component<IProps, IStates> {
      * @returns
      */
     private hillshadeMath;
-    /**
-     * Move a layer in the stack.
-     *
-     * @param id - id of the layer.
-     * @param index - expected index of the layer.
-     */
-    moveLayer(id: string, index: number | undefined): void;
     /**
      * Update a layer of the map.
      *

package/lib/mainview/mainView.js

@@ -215,10 +215,7 @@ export class MainView extends React.Component {
                     projection: projection.getCode(),
                     zoom
                 };
-                // Update the extent only if has been initially provided.
-                if (currentOptions.extent) {
-                    updatedOptions.extent = view.calculateExtent();
-                }
+                updatedOptions.extent = view.calculateExtent();
                 this._model.setOptions(Object.assign(Object.assign({}, currentOptions), updatedOptions));
             });
             if (JupyterGISModel.getOrderedLayerIds(this._model).length !== 0) {
@@ -426,59 +423,30 @@ export class MainView extends React.Component {
         this._updateLayersImpl(layerIds);
     }
     async _updateLayersImpl(layerIds) {
-        const previousLayerIds = this.getLayers();
-        // We use the reverse order of the list to add the layer from the top to the
-        // bottom.
-        // This is to ensure that the beforeId (layer on top of the one we add/move)
-        // is already added/moved in the map.
-        const reversedLayerIds = layerIds.slice().reverse();
-        for (const layerId of reversedLayerIds) {
+        const mapLayers = [];
+        for (const layerId of layerIds) {
             const layer = this._model.sharedModel.getLayer(layerId);
             if (!layer) {
                 console.log(`Layer id ${layerId} does not exist`);
-                return;
-            }
-            // Get the expected index in the map.
-            const currentLayerIds = [...previousLayerIds];
-            let indexInMap = currentLayerIds.length;
-            const nextLayer = layerIds[layerIds.indexOf(layerId) + 1];
-            if (nextLayer !== undefined) {
-                indexInMap = currentLayerIds.indexOf(nextLayer);
-                if (indexInMap === -1) {
-                    indexInMap = currentLayerIds.length;
-                }
-            }
-            if (this.getLayer(layerId)) {
-                this.moveLayer(layerId, indexInMap);
-            }
-            else {
-                await this.addLayer(layerId, layer, indexInMap);
+                continue;
             }
-            // Remove the element of the previous list as treated.
-            const index = previousLayerIds.indexOf(layerId);
-            if (index > -1) {
-                previousLayerIds.splice(index, 1);
+            const newMapLayer = await this._buildMapLayer(layerId, layer);
+            if (newMapLayer !== undefined) {
+                mapLayers.push(newMapLayer);
             }
         }
-        // Remove the layers not used anymore.
-        previousLayerIds.forEach(layerId => {
-            this._Map.removeLayer(layerId);
-        });
+        this._Map.setLayers(mapLayers);
         this._ready = true;
     }
     /**
-     * Add a layer to the map.
+     * Build the map layer.
      *
      * @param id - id of the layer.
      * @param layer - the layer object.
-     * @param index - expected index of the layer.
+     * @returns - the map layer.
      */
-    async addLayer(id, layer, index) {
+    async _buildMapLayer(id, layer) {
         var _a;
-        if (this.getLayer(id)) {
-            // Layer already exists
-            return;
-        }
         const sourceId = (_a = layer.parameters) === null || _a === void 0 ? void 0 : _a.source;
         const source = this._model.sharedModel.getSource(sourceId);
         if (!source) {
@@ -487,14 +455,14 @@ export class MainView extends React.Component {
         if (!this._sources[sourceId]) {
             await this.addSource(sourceId, source);
         }
-        let newLayer;
+        let newMapLayer;
         let layerParameters;
         // TODO: OpenLayers provides a bunch of sources for specific tile
         // providers, so maybe set up some way to use those
         switch (layer.type) {
             case 'RasterLayer': {
                 layerParameters = layer.parameters;
-                newLayer = new TileLayer({
+                newMapLayer = new TileLayer({
                     opacity: layerParameters.opacity,
                     visible: layer.visible,
                     source: this._sources[layerParameters.source]
@@ -503,7 +471,7 @@ export class MainView extends React.Component {
             }
             case 'VectorLayer': {
                 layerParameters = layer.parameters;
-                newLayer = new VectorLayer({
+                newMapLayer = new VectorLayer({
                     opacity: layerParameters.opacity,
                     visible: layer.visible,
                     source: this._sources[layerParameters.source],
@@ -516,16 +484,16 @@ export class MainView extends React.Component {
                 if (!layerParameters.color) {
                     return;
                 }
-                newLayer = new VectorTileLayer({
+                newMapLayer = new VectorTileLayer({
                     opacity: layerParameters.opacity,
                     source: this._sources[layerParameters.source]
                 });
-                this.updateLayer(id, layer, newLayer);
+                this.updateLayer(id, layer, newMapLayer);
                 break;
             }
             case 'HillshadeLayer': {
                 layerParameters = layer.parameters;
-                newLayer = new WebGlTileLayer({
+                newMapLayer = new WebGlTileLayer({
                     opacity: 0.3,
                     source: this._sources[layerParameters.source],
                     style: {
@@ -536,7 +504,7 @@ export class MainView extends React.Component {
             }
             case 'ImageLayer': {
                 layerParameters = layer.parameters;
-                newLayer = new ImageLayer({
+                newMapLayer = new ImageLayer({
                     opacity: layerParameters.opacity,
                     source: this._sources[layerParameters.source]
                 });
@@ -552,43 +520,32 @@ export class MainView extends React.Component {
                 if (layerParameters.color) {
                     layerOptions['style'] = { color: layerParameters.color };
                 }
-                newLayer = new WebGlTileLayer(layerOptions);
+                newMapLayer = new WebGlTileLayer(layerOptions);
                 break;
             }
         }
         // OpenLayers doesn't have name/id field so add it
-        newLayer.set('id', id);
+        newMapLayer.set('id', id);
         // we need to keep track of which source has which layers
         this._sourceToLayerMap.set(layerParameters.source, id);
-        this._Map.getLayers().insertAt(index, newLayer);
+        return newMapLayer;
     }
     /**
-     * Move a layer in the stack.
+     * Add a layer to the map.
      *
      * @param id - id of the layer.
+     * @param layer - the layer object.
      * @param index - expected index of the layer.
      */
-    moveLayer(id, index) {
-        // Get the beforeId value according to the expected index.
-        const currentLayerIds = this.getLayers();
-        let beforeId = undefined;
-        if (!(index === undefined) && index < currentLayerIds.length) {
-            beforeId = currentLayerIds[index];
-        }
-        const layerArray = this._Map.getLayers().getArray();
-        const movingLayer = this.getLayer(id);
-        if (!movingLayer || !index || !beforeId) {
+    async addLayer(id, layer, index) {
+        if (this.getLayer(id)) {
+            // Layer already exists
             return;
         }
-        const indexOfMovingLayer = layerArray.indexOf(movingLayer);
-        layerArray.splice(indexOfMovingLayer, 1);
-        const beforeLayer = this.getLayer(beforeId);
-        if (!beforeLayer) {
-            return;
+        const newMapLayer = await this._buildMapLayer(id, layer);
+        if (newMapLayer !== undefined) {
+            this._Map.getLayers().insertAt(index, newMapLayer);
         }
-        const indexOfBeforeLayer = layerArray.indexOf(beforeLayer);
-        layerArray.splice(indexOfBeforeLayer, 0, movingLayer);
-        this._Map.setLayers(layerArray);
     }
     /**
      * Update a layer of the map.
@@ -662,14 +619,19 @@ export class MainView extends React.Component {
     }
     updateOptions(options) {
         const view = this._Map.getView();
-        // use the extent if provided.
-        if (options.extent) {
+        // Use the extent only if explicitly requested (QGIS files).
+        if (options.extent && options.useExtent) {
             view.fit(options.extent);
         }
         else {
             const centerCoord = fromLonLat([options.longitude || 0, options.latitude || 0], this._Map.getView().getProjection());
             this._Map.getView().setZoom(options.zoom || 0);
             this._Map.getView().setCenter(centerCoord);
+            // Save the extent if it does not exists, to allow proper export to qgis.
+            if (options.extent === undefined) {
+                options.extent = view.calculateExtent();
+                this._model.setOptions(options);
+            }
         }
         view.setRotation(options.bearing || 0);
     }
@@ -709,12 +671,14 @@ export class MainView extends React.Component {
             }
             else {
                 const mapLayer = this.getLayer(change.id);
-                if (mapLayer &&
-                    JupyterGISModel.getOrderedLayerIds(this._model).includes(change.id)) {
-                    this.updateLayer(change.id, layer, mapLayer);
-                }
-                else {
-                    this.updateLayers(JupyterGISModel.getOrderedLayerIds(this._model));
+                const layerTree = JupyterGISModel.getOrderedLayerIds(this._model);
+                if (mapLayer) {
+                    if (layerTree.includes(change.id)) {
+                        this.updateLayer(change.id, layer, mapLayer);
+                    }
+                    else {
+                        this.updateLayers(layerTree);
+                    }
                 }
             }
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupytergis/base",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "A JupyterLab extension for 3D modelling.",
   "keywords": [
     "jupyter",
@@ -41,7 +41,7 @@
     "@deathbeds/jupyterlab-rjsf": "^1.1.0",
     "@jupyter/docprovider": "^2.0.0",
     "@jupyter/ydoc": "^1.0.0",
-    "@jupytergis/schema": "^0.1.3",
+    "@jupytergis/schema": "^0.1.4",
     "@jupyterlab/application": "^4.0.0",
     "@jupyterlab/apputils": "^4.0.0",
     "@jupyterlab/completer": "^4.2.4",