@jupytergis/base 0.1.6 → 0.1.7

package/lib/dialogs/{components/symbology → symbology/vector_layer/types}/SimpleSymbol.js

@@ -1,9 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { parseColor } from '../../../tools';
+import { parseColor } from '../../../../tools';
 const SimpleSymbol = ({ context, state, okSignalPromise, cancel, layerId }) => {
     const styleRef = useRef();
-    const layerStateRef = useRef();
-    const [layerState, setLayerState] = useState();
     const [useCircleStuff, setUseCircleStuff] = useState(false);
     const [style, setStyle] = useState({
         fillColor: '#3399CC',
@@ -31,16 +29,11 @@ const SimpleSymbol = ({ context, state, okSignalPromise, cancel, layerId }) => {
         // Read values from file if we chose them using the single symbol thing
         // but if we're switching to simple symbol, use defaults
         const initStyle = async () => {
+            var _a;
             if (!layer.parameters) {
                 return;
             }
-            const layerState = await state.fetch(`jupytergis:${layerId}`);
-            if (!layerState) {
-                return;
-            }
-            setLayerState(layerState);
-            const renderType = layerState
-                .renderType;
+            const renderType = (_a = layer.parameters) === null || _a === void 0 ? void 0 : _a.symbologyState.renderType;
             if (renderType === 'Single Symbol') {
                 // Read from current color or use defaults
                 const parsedStyle = parseColor(layer.parameters.type, layer.parameters.color);
@@ -61,14 +54,12 @@ const SimpleSymbol = ({ context, state, okSignalPromise, cancel, layerId }) => {
     }, []);
     useEffect(() => {
         styleRef.current = style;
-        layerStateRef.current = layerState;
-    }, [style, layerState]);
+    }, [style]);
     const handleOk = () => {
         var _a, _b, _c, _d, _e, _f;
         if (!layer.parameters) {
             return;
         }
-        state.save(`jupytergis:${layerId}`, Object.assign(Object.assign({}, layerStateRef.current), { renderType: 'Single Symbol' }));
         const styleExpr = {};
         const prefix = layer.parameters.type === 'circle' ? 'circle-' : '';
         if (layer.parameters.type === 'circle') {
@@ -79,6 +70,10 @@ const SimpleSymbol = ({ context, state, okSignalPromise, cancel, layerId }) => {
         styleExpr[`${prefix}stroke-width`] = (_d = styleRef.current) === null || _d === void 0 ? void 0 : _d.strokeWidth;
         styleExpr[`${prefix}stroke-line-join`] = (_e = styleRef.current) === null || _e === void 0 ? void 0 : _e.joinStyle;
         styleExpr[`${prefix}stroke-line-cap`] = (_f = styleRef.current) === null || _f === void 0 ? void 0 : _f.capStyle;
+        const symbologyState = {
+            renderType: 'Single Symbol'
+        };
+        layer.parameters.symbologyState = symbologyState;
         layer.parameters.color = styleExpr;
         context.model.sharedModel.updateLayer(layerId, layer);
         cancel();

package/lib/formbuilder/objectform/vectorlayerform.js

@@ -44,6 +44,7 @@ export class VectorLayerPropertiesForm extends LayerPropertiesForm {
     }
     processSchema(data, schema, uiSchema) {
         this.removeFormEntry('color', data, schema, uiSchema);
+        this.removeFormEntry('symbologyState', data, schema, uiSchema);
         super.processSchema(data, schema, uiSchema);
         if (!data) {
             return;

package/lib/formbuilder/objectform/webGlLayerForm.js

@@ -5,6 +5,7 @@ import { LayerPropertiesForm } from './layerform';
 export class WebGlLayerPropertiesForm extends LayerPropertiesForm {
     processSchema(data, schema, uiSchema) {
         this.removeFormEntry('color', data, schema, uiSchema);
+        this.removeFormEntry('symbologyState', data, schema, uiSchema);
         super.processSchema(data, schema, uiSchema);
     }
 }

package/lib/index.d.ts

@@ -1,11 +1,13 @@
+export * from './classificationModes';
 export * from './commands';
 export * from './constants';
 export * from './dialogs/formdialog';
+export * from './formbuilder/objectform/baseform';
+export * from './icons';
 export * from './mainview';
+export * from './panelview';
+export * from './store';
+export * from './toolbar';
 export * from './tools';
-export * from './icons';
 export * from './types';
 export * from './widget';
-export * from './formbuilder/objectform/baseform';
-export * from './panelview';
-export * from './toolbar';

package/lib/index.js

@@ -1,11 +1,13 @@
+export * from './classificationModes';
 export * from './commands';
 export * from './constants';
 export * from './dialogs/formdialog';
+export * from './formbuilder/objectform/baseform';
+export * from './icons';
 export * from './mainview';
+export * from './panelview';
+export * from './store';
+export * from './toolbar';
 export * from './tools';
-export * from './icons';
 export * from './types';
 export * from './widget';
-export * from './formbuilder/objectform/baseform';
-export * from './panelview';
-export * from './toolbar';

package/lib/mainview/mainView.d.ts

@@ -25,7 +25,7 @@ export declare class MainView extends React.Component<IProps, IStates> {
      * @param id - the source id.
      * @param source - the source object.
      */
-    addSource(id: string, source: IJGISSource): Promise<void>;
+    addSource(id: string, source: IJGISSource, layerId?: string): Promise<void>;
     private computeSourceUrl;
     /**
      * Update a source in the map.
@@ -102,6 +102,7 @@ export declare class MainView extends React.Component<IProps, IStates> {
     private _onLayersChanged;
     private _onLayerTreeChange;
     private _onSourcesChange;
+    private _onSharedModelStateChange;
     private _handleThemeChange;
     private _handleWindowResize;
     render(): JSX.Element;
@@ -113,5 +114,6 @@ export declare class MainView extends React.Component<IProps, IStates> {
     private _ready;
     private _sources;
     private _sourceToLayerMap;
+    private _documentPath?;
 }
 export {};

package/lib/mainview/mainView.js

@@ -12,10 +12,15 @@ import { GeoTIFF as GeoTIFFSource, ImageTile as ImageTileSource, Vector as Vecto
 import Static from 'ol/source/ImageStatic';
 //@ts-expect-error no types for ol-pmtiles
 import { PMTilesRasterSource, PMTilesVectorSource } from 'ol-pmtiles';
+import { register } from 'ol/proj/proj4.js';
+import { get as getProjection } from 'ol/proj.js';
+import proj4 from 'proj4';
 import * as React from 'react';
 import shp from 'shpjs';
 import { isLightTheme } from '../tools';
 import { Spinner } from './spinner';
+//@ts-expect-error no types for proj4-list
+import proj4list from 'proj4-list';
 export class MainView extends React.Component {
     constructor(props) {
         super(props);
@@ -118,6 +123,23 @@ export class MainView extends React.Component {
         this._onClientSharedStateChanged = (sender, clients) => {
             // TODO SOMETHING
         };
+        this._onSharedModelStateChange = (_, change) => {
+            var _a;
+            const changedState = (_a = change.stateChange) === null || _a === void 0 ? void 0 : _a.map(value => value.name);
+            if (!(changedState === null || changedState === void 0 ? void 0 : changedState.includes('path'))) {
+                return;
+            }
+            const path = this._model.sharedModel.getState('path');
+            if (path !== this._documentPath && typeof path === 'string') {
+                if (window.jupytergisMaps !== undefined && this._documentPath) {
+                    delete window.jupytergisMaps[this._documentPath];
+                }
+                this._documentPath = path;
+                if (window.jupytergisMaps !== undefined) {
+                    window.jupytergisMaps[this._documentPath] = this._Map;
+                }
+            }
+        };
         this._handleThemeChange = () => {
             const lightTheme = isLightTheme();
             // TODO SOMETHING
@@ -130,6 +152,8 @@ export class MainView extends React.Component {
         this.divRef = React.createRef(); // Reference of render div
         this._ready = false;
         this._sourceToLayerMap = new Map();
+        proj4.defs(Array.from(proj4list));
+        register(proj4);
         this._mainViewModel = this.props.viewModel;
         this._mainViewModel.viewSettingChanged.connect(this._onViewChanged, this);
         this._model = this._mainViewModel.jGISModel;
@@ -146,13 +170,20 @@ export class MainView extends React.Component {
             firstLoad: true
         };
         this._sources = [];
+        this._model.sharedModel.changed.connect(this._onSharedModelStateChange);
     }
     async componentDidMount() {
         window.addEventListener('resize', this._handleWindowResize);
         await this.generateScene();
         this._mainViewModel.initSignal();
+        if (window.jupytergisMaps !== undefined && this._documentPath) {
+            window.jupytergisMaps[this._documentPath] = this._Map;
+        }
     }
     componentWillUnmount() {
+        if (window.jupytergisMaps !== undefined && this._documentPath) {
+            delete window.jupytergisMaps[this._documentPath];
+        }
         window.removeEventListener('resize', this._handleWindowResize);
         this._mainViewModel.viewSettingChanged.disconnect(this._onViewChanged, this);
         this._model.themeChanged.disconnect(this._handleThemeChange, this);
@@ -181,7 +212,8 @@ export class MainView extends React.Component {
                     name: 'Drag and Drop source',
                     parameters: { path: event.file.name }
                 };
-                this.addSource(sourceId, sourceModel);
+                const layerId = UUID.uuid4();
+                this.addSource(sourceId, sourceModel, layerId);
                 this._model.sharedModel.addSource(sourceId, sourceModel);
                 const layerModel = {
                     type: 'VectorLayer',
@@ -194,7 +226,6 @@ export class MainView extends React.Component {
                         source: sourceId
                     }
                 };
-                const layerId = UUID.uuid4();
                 this.addLayer(layerId, layerModel, this.getLayers().length);
                 this._model.addLayer(layerId, layerModel);
             });
@@ -247,7 +278,7 @@ export class MainView extends React.Component {
      * @param id - the source id.
      * @param source - the source object.
      */
-    async addSource(id, source) {
+    async addSource(id, source, layerId) {
         var _a, _b;
         let newSource;
         switch (source.type) {
@@ -363,8 +394,11 @@ export class MainView extends React.Component {
             }
             case 'GeoTiffSource': {
                 const sourceParameters = source.parameters;
+                const addNoData = (url) => {
+                    return Object.assign(Object.assign({}, url), { nodata: 0 });
+                };
                 newSource = new GeoTIFFSource({
-                    sources: sourceParameters.urls,
+                    sources: sourceParameters.urls.map(addNoData),
                     normalize: sourceParameters.normalize,
                     wrapX: sourceParameters.wrapX
                 });
@@ -408,7 +442,7 @@ export class MainView extends React.Component {
         // remove source being updated
         this.removeSource(id);
         // create updated source
-        this.addSource(id, source);
+        await this.addSource(id, source, layerId);
         // change source of target layer
         mapLayer.setSource(this._sources[id]);
     }
@@ -454,12 +488,12 @@ export class MainView extends React.Component {
     async _buildMapLayer(id, layer) {
         var _a;
         const sourceId = (_a = layer.parameters) === null || _a === void 0 ? void 0 : _a.source;
-        const source = this._model.sharedModel.getSource(sourceId);
+        const source = this._model.sharedModel.getLayerSource(sourceId);
         if (!source) {
             return;
         }
         if (!this._sources[sourceId]) {
-            await this.addSource(sourceId, source);
+            await this.addSource(sourceId, source, id);
         }
         let newMapLayer;
         let layerParameters;
@@ -559,12 +593,12 @@ export class MainView extends React.Component {
     async updateLayer(id, layer, mapLayer) {
         var _a, _b, _c, _d;
         const sourceId = (_a = layer.parameters) === null || _a === void 0 ? void 0 : _a.source;
-        const source = this._model.sharedModel.getSource(sourceId);
+        const source = this._model.sharedModel.getLayerSource(sourceId);
         if (!source) {
             return;
         }
         if (!this._sources[sourceId]) {
-            await this.addSource(sourceId, source);
+            await this.addSource(sourceId, source, id);
         }
         mapLayer.setVisible(layer.visible);
         switch (layer.type) {
@@ -620,23 +654,37 @@ export class MainView extends React.Component {
             this._initializedPosition = true;
         }
     }
-    updateOptions(options) {
-        const view = this._Map.getView();
+    async updateOptions(options) {
+        const { projection, extent, useExtent, latitude, longitude, zoom, bearing } = options;
+        let view = this._Map.getView();
+        const currentProjection = view.getProjection().getCode();
+        // Need to recreate view if the projection changes
+        if (projection !== undefined && currentProjection !== projection) {
+            const newProjection = getProjection(projection);
+            if (newProjection) {
+                view = new View({ projection: newProjection });
+            }
+            else {
+                console.warn(`Invalid projection: ${projection}`);
+                return;
+            }
+        }
         // Use the extent only if explicitly requested (QGIS files).
-        if (options.extent && options.useExtent) {
-            view.fit(options.extent);
+        if (useExtent && extent) {
+            view.fit(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);
+            const centerCoord = fromLonLat([longitude || 0, latitude || 0], view.getProjection());
+            view.setCenter(centerCoord);
+            view.setZoom(zoom || 0);
             // Save the extent if it does not exists, to allow proper export to qgis.
-            if (options.extent === undefined) {
+            if (!options.extent) {
                 options.extent = view.calculateExtent();
                 this._model.setOptions(options);
             }
         }
-        view.setRotation(options.bearing || 0);
+        view.setRotation(bearing || 0);
+        this._Map.setView(view);
     }
     _onViewChanged(sender, change) {
         // TODO SOMETHING

package/lib/store.d.ts

@@ -0,0 +1,9 @@
+import { IStateDB } from '@jupyterlab/statedb';
+export declare class GlobalStateDbManager {
+    private static instance;
+    private stateDb;
+    private constructor();
+    static getInstance(): GlobalStateDbManager;
+    initialize(stateDb: IStateDB): void;
+    getStateDb(): IStateDB | null;
+}

package/lib/store.js

@@ -0,0 +1,25 @@
+// Singleton class to manage Jupyter stateDb globally
+export class GlobalStateDbManager {
+    // Private constructor to prevent direct instantiation
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    constructor() {
+        this.stateDb = null;
+    }
+    static getInstance() {
+        if (!GlobalStateDbManager.instance) {
+            GlobalStateDbManager.instance = new GlobalStateDbManager();
+        }
+        return GlobalStateDbManager.instance;
+    }
+    initialize(stateDb) {
+        if (this.stateDb === null) {
+            this.stateDb = stateDb;
+        }
+        else {
+            console.warn('stateDb is already initialized.');
+        }
+    }
+    getStateDb() {
+        return this.stateDb;
+    }
+}

package/lib/toolbar/widget.js

@@ -58,7 +58,7 @@ export class ToolbarWidget extends ReactiveToolbar {
             this.addItem('separator2', new Separator());
             const NewButton = new ToolbarButton({
                 icon: addIcon,
-                actualOnClick: true,
+                noFocusOnClick: false,
                 onClick: () => {
                     if (!options.commands) {
                         return;

package/lib/types.d.ts

@@ -1,5 +1,6 @@
 import { IDict, IJupyterGISDoc, IJupyterGISModel, IJupyterGISTracker, IJupyterGISWidget } from '@jupytergis/schema';
 import { ISignal } from '@lumino/signaling';
+import { Map } from 'ol';
 export { IDict };
 export type ValueOf<T> = T[keyof T];
 export interface IControlPanelModel {
@@ -9,3 +10,16 @@ export interface IControlPanelModel {
     jGISModel: IJupyterGISModel | undefined;
     sharedModel: IJupyterGISDoc | undefined;
 }
+/**
+ * Add jupytergisMaps object to the global variables.
+ */
+declare global {
+    interface Window {
+        /**
+         * Access JupyterGIS map
+         */
+        jupytergisMaps: {
+            [name: string]: Map;
+        };
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupytergis/base",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "A JupyterLab extension for 3D modelling.",
   "keywords": [
     "jupyter",
@@ -27,7 +27,7 @@
     "url": "https://github.com/geojupyter/jupytergis.git"
   },
   "scripts": {
-    "build": "jlpm run build:gallery && tsc -b && jlpm run cp:gdal",
+    "build": "tsc -b && jlpm run cp:gdal",
     "build:gallery": "python rasterlayer_gallery_generator.py",
     "cp:gdal": "cp ../../node_modules/gdal3.js/dist/package/gdal3WebAssembly.data lib && cp ../../node_modules/gdal3.js/dist/package/gdal3WebAssembly.wasm lib",
     "build:prod": "jlpm run clean && jlpm run build",
@@ -39,21 +39,20 @@
   },
   "dependencies": {
     "@deathbeds/jupyterlab-rjsf": "^1.1.0",
-    "@jupyter/docprovider": "^2.0.0",
-    "@jupyter/ydoc": "^1.0.0",
-    "@jupytergis/schema": "^0.1.6",
-    "@jupyterlab/application": "^4.0.0",
-    "@jupyterlab/apputils": "^4.0.0",
-    "@jupyterlab/completer": "^4.2.4",
-    "@jupyterlab/console": "^4.2.4",
-    "@jupyterlab/coreutils": "^6.0.0",
-    "@jupyterlab/docregistry": "^4.0.0",
-    "@jupyterlab/filebrowser": "^4.0.0",
-    "@jupyterlab/launcher": "^4.0.0",
-    "@jupyterlab/observables": "^5.0.0",
-    "@jupyterlab/services": "^7.0.0",
-    "@jupyterlab/translation": "^4.0.0",
-    "@jupyterlab/ui-components": "^4.0.0",
+    "@jupyter/ydoc": "^2.0.0 || ^3.0.0",
+    "@jupytergis/schema": "^0.1.7",
+    "@jupyterlab/application": "^4.3.0",
+    "@jupyterlab/apputils": "^4.3.0",
+    "@jupyterlab/completer": "^4.3.0",
+    "@jupyterlab/console": "^4.3.0",
+    "@jupyterlab/coreutils": "^6.3.0",
+    "@jupyterlab/docregistry": "^4.3.0",
+    "@jupyterlab/filebrowser": "^4.3.0",
+    "@jupyterlab/launcher": "^4.3.0",
+    "@jupyterlab/observables": "^5.3.0",
+    "@jupyterlab/services": "^7.3.0",
+    "@jupyterlab/translation": "^4.3.0",
+    "@jupyterlab/ui-components": "^4.3.0",
     "@lumino/commands": "^2.0.0",
     "@lumino/coreutils": "^2.0.0",
     "@lumino/messaging": "^2.0.0",

package/style/symbologyDialog.css

@@ -1,3 +1,8 @@
+select,
+select option {
+  text-transform: capitalize;
+}
+
 .jp-gis-symbology-dialog .jp-Dialog-header {
   font-weight: bold;
 }
@@ -27,10 +32,30 @@
   max-width: 50%;
 }
 
+.jp-gis-color-ramp-div {
+  display: flex;
+  flex: 1 1 50%;
+  max-width: 50%;
+  justify-content: space-between;
+  align-items: baseline;
+}
+
+.jp-gis-color-ramp-div > .jp-select-wrapper {
+  flex: 1 0 40%;
+}
+
+.jp-gis-color-ramp-div:last-child {
+  flex-shrink: 0;
+}
+
+.jp-gis-color-ramp-div > input {
+  max-width: 25%;
+}
+
 .jp-gis-band-container {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: 13px;
 }
 
 .jp-gis-layer-symbology-container {
@@ -45,8 +70,10 @@
   margin-bottom: unset;
 }
 
-.jp-gis-band-container .jp-gis-symbology-row:last-child {
-  margin-bottom: 12px;
+.jp-gis-color-ramp-container {
+  display: flex;
+  flex-direction: column;
+  gap: 13px;
 }
 
 .jp-gis-stop-container {
@@ -120,3 +147,77 @@
     transform: rotate(360deg);
   }
 }
+
+.jp-gis-color-ramp-dropdown {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  position: absolute;
+  overflow-x: hidden;
+  overflow-y: auto;
+  visibility: hidden;
+  z-index: 40;
+  flex: 1 1 auto;
+  width: 97%;
+  max-height: 375px;
+  background: var(--jp-input-background);
+  padding-left: 8px;
+  border: var(--jp-border-width) solid var(--jp-input-border-color);
+  border-radius: 0;
+  outline: none;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+
+.jp-gis-open {
+  visibility: visible;
+}
+
+.jp-gis-color-ramp-entry {
+  display: flex;
+  align-items: center;
+  font-size: var(--jp-ui-font-size2);
+  color: var(--jp-ui-font-color0);
+  appearance: none;
+  text-transform: capitalize;
+  cursor: pointer;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+
+.jp-gis-color-label {
+  color: white;
+  position: absolute;
+  transition: transform 0.3s ease;
+}
+
+.jp-gis-color-ramp-entry:hover .jp-gis-color-label {
+  transform: scale(1.2);
+}
+
+.jp-gis-color-canvas {
+  margin: 0 -7px;
+  border-radius: 4px;
+  width: 100%;
+  max-height: 38px;
+}
+
+.jp-gis-color-canvas-display {
+  width: 100%;
+  height: 30px;
+  visibility: initial;
+}
+
+.jp-gis-canvas-button-wrapper {
+  flex: 1 0 50%;
+  max-width: 50%;
+  position: relative;
+}
+
+#jp-gis-canvas-button.jp-gis-canvas-button {
+  visibility: hidden;
+  margin: 0;
+  padding: 0 1px 0 0;
+  width: 100%;
+}

package/lib/dialogs/components/symbology/BandRendering.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { ISymbologyDialogProps } from '../../symbologyDialog';
-declare const BandRendering: ({ context, state, okSignalPromise, cancel, layerId }: ISymbologyDialogProps) => React.JSX.Element;
-export default BandRendering;