@jupytergis/base 0.1.2 → 0.1.3

package/lib/mainview/mainView.d.ts

@@ -1,8 +1,6 @@
 import { IJGISLayer, IJGISSource } from '@jupytergis/schema';
 import { User } from '@jupyterlab/services';
-import { FeatureLike } from 'ol/Feature';
 import BaseLayer from 'ol/layer/Base';
-import { Style } from 'ol/style';
 import * as React from 'react';
 import { MainViewModel } from './mainviewmodel';
 interface IProps {
@@ -57,7 +55,11 @@ export declare class MainView extends React.Component<IProps, IStates> {
      * @param index - expected index of the layer.
      */
     addLayer(id: string, layer: IJGISLayer, index: number): Promise<void>;
-    vectorLayerStyleFunc: (currentFeature: FeatureLike, layer: IJGISLayer) => Style | undefined;
+    vectorLayerStyleRuleBuilder: (layer: IJGISLayer) => {
+        style: import("ol/style/flat").FlatStyle | Array<import("ol/style/flat").FlatStyle>;
+        filter?: import("ol/expr/expression").EncodedExpression | undefined;
+        else?: boolean | undefined;
+    }[] | undefined;
     /**
      * Taken from https://openlayers.org/en/latest/examples/webgl-shaded-relief.html
      * @returns

package/lib/mainview/mainView.js

@@ -10,7 +10,6 @@ import { fromLonLat, toLonLat } from 'ol/proj';
 import Feature from 'ol/render/Feature';
 import { GeoTIFF as GeoTIFFSource, ImageTile as ImageTileSource, Vector as VectorSource, VectorTile as VectorTileSource, XYZ as XYZSource } from 'ol/source';
 import Static from 'ol/source/ImageStatic';
-import { Circle, Fill, Stroke, Style } from 'ol/style';
 //@ts-expect-error no types for ol-pmtiles
 import { PMTilesRasterSource, PMTilesVectorSource } from 'ol-pmtiles';
 import * as React from 'react';
@@ -20,73 +19,52 @@ import { Spinner } from './spinner';
 export class MainView extends React.Component {
     constructor(props) {
         super(props);
-        this.vectorLayerStyleFunc = (currentFeature, layer) => {
-            var _a;
-            const layerParameters = layer.parameters;
-            // const flatStyle = {
-            //   'fill-color': 'rgba(255,255,255,0.4)',
-            //   'stroke-color': '#3399CC',
-            //   'stroke-width': 1.25,
-            //   'circle-radius': 5,
-            //   'circle-fill-color': 'rgba(255,255,255,0.4)',
-            //   'circle-stroke-width': 1.25,
-            //   'circle-stroke-color': '#3399CC'
-            // };
-            // TODO: Need to make a version that works with strings as well
-            const operators = {
-                '>': (a, b) => a > b,
-                '<': (a, b) => a < b,
-                '>=': (a, b) => a >= b,
-                '<=': (a, b) => a <= b,
-                '==': (a, b) => a === b,
-                '!=': (a, b) => a !== b
+        this.vectorLayerStyleRuleBuilder = (layer) => {
+            const layerParams = layer.parameters;
+            if (!layerParams) {
+                return;
+            }
+            const defaultStyle = {
+                'fill-color': 'rgba(255,255,255,0.4)',
+                'stroke-color': '#3399CC',
+                'stroke-width': 1.25,
+                'circle-radius': 5,
+                'circle-fill-color': 'rgba(255,255,255,0.4)',
+                'circle-stroke-width': 1.25,
+                'circle-stroke-color': '#3399CC'
             };
-            // TODO: I don't think this will work with fancy color expressions
-            const fill = new Fill({
-                color: layerParameters.type === 'fill' || layerParameters.type === 'circle'
-                    ? layerParameters.color
-                    : 'rgba(0, 0, 0, 0)'
-            });
-            const stroke = new Stroke({
-                color: layerParameters.type === 'line' || layerParameters.type === 'circle'
-                    ? layerParameters.color
-                    : '#392F5A',
-                width: 2
-            });
-            const style = new Style({
-                fill,
-                stroke,
-                image: new Circle({
-                    radius: 5,
-                    fill,
-                    stroke
-                })
-            });
-            if (layer.filters && ((_a = layer.filters) === null || _a === void 0 ? void 0 : _a.appliedFilters.length) !== 0) {
-                const props = currentFeature.getProperties();
-                let shouldDisplayFeature = true;
-                switch (layer.filters.logicalOp) {
-                    case 'any': {
-                        // Display the feature if any filter conditions apply
-                        shouldDisplayFeature = layer.filters.appliedFilters.some(({ feature, operator, value }) => operators[operator](props[feature], value));
-                        break;
-                    }
-                    case 'all': {
-                        // Display the feature only if all the filter conditions apply
-                        shouldDisplayFeature = layer.filters.appliedFilters.every(({ feature, operator, value }) => operators[operator](props[feature], value));
-                        break;
-                    }
-                }
-                if (shouldDisplayFeature) {
-                    return style;
+            const defaultRules = {
+                style: defaultStyle
+            };
+            const layerStyle = Object.assign({}, defaultRules);
+            if (layer.filters && layer.filters.appliedFilters.length !== 0) {
+                const filterExpr = [];
+                // 'Any' and 'All' operators require more than one argument
+                // So if there's only one filter, skip that part to avoid error
+                if (layer.filters.appliedFilters.length === 1) {
+                    layer.filters.appliedFilters.forEach(filter => {
+                        filterExpr.push(filter.operator, ['get', filter.feature], filter.value);
+                    });
                 }
                 else {
-                    return undefined;
+                    filterExpr.push(layer.filters.logicalOp);
+                    // Arguments for "Any" and 'All' need to be wrapped in brackets
+                    layer.filters.appliedFilters.forEach(filter => {
+                        filterExpr.push([
+                            filter.operator,
+                            ['get', filter.feature],
+                            filter.value
+                        ]);
+                    });
                 }
+                layerStyle.filter = filterExpr;
             }
-            else {
-                return style;
+            if (!layerParams.color) {
+                return [layerStyle];
             }
+            const newStyle = Object.assign(Object.assign({}, defaultStyle), layerParams.color);
+            layerStyle.style = newStyle;
+            return [layerStyle];
         };
         /**
          * Taken from https://openlayers.org/en/latest/examples/webgl-shaded-relief.html
@@ -247,6 +225,7 @@ export class MainView extends React.Component {
                 await this._updateLayersImpl(JupyterGISModel.getOrderedLayerIds(this._model));
                 const options = this._model.getOptions();
                 this.updateOptions(options);
+                this._initializedPosition = true;
             }
             this.setState(old => (Object.assign(Object.assign({}, old), { loading: false })));
         }
@@ -528,17 +507,20 @@ export class MainView extends React.Component {
                     opacity: layerParameters.opacity,
                     visible: layer.visible,
                     source: this._sources[layerParameters.source],
-                    style: currentFeature => this.vectorLayerStyleFunc(currentFeature, layer)
+                    style: this.vectorLayerStyleRuleBuilder(layer)
                 });
                 break;
             }
             case 'VectorTileLayer': {
                 layerParameters = layer.parameters;
+                if (!layerParameters.color) {
+                    return;
+                }
                 newLayer = new VectorTileLayer({
                     opacity: layerParameters.opacity,
-                    source: this._sources[layerParameters.source],
-                    style: currentFeature => this.vectorLayerStyleFunc(currentFeature, layer)
+                    source: this._sources[layerParameters.source]
                 });
+                this.updateLayer(id, layer, newLayer);
                 break;
             }
             case 'HillshadeLayer': {
@@ -633,13 +615,13 @@ export class MainView extends React.Component {
             case 'VectorLayer': {
                 const layerParams = layer.parameters;
                 mapLayer.setOpacity(layerParams.opacity || 1);
-                mapLayer.setStyle(currentFeature => this.vectorLayerStyleFunc(currentFeature, layer));
+                mapLayer.setStyle(this.vectorLayerStyleRuleBuilder(layer));
                 break;
             }
             case 'VectorTileLayer': {
                 const layerParams = layer.parameters;
                 mapLayer.setOpacity(layerParams.opacity || 1);
-                mapLayer.setStyle(currentFeature => this.vectorLayerStyleFunc(currentFeature, layer));
+                mapLayer.setStyle(this.vectorLayerStyleRuleBuilder(layer));
                 break;
             }
             case 'HillshadeLayer': {

package/lib/panelview/components/layers.js

@@ -132,8 +132,8 @@ function LayerGroupComponent(props) {
         setId(DOMUtils.createDomID());
         const getExpandedState = async () => {
             var _a;
-            const groupState = await state.fetch(group.name);
-            setOpen(groupState ? ((_a = groupState['expanded']) !== null && _a !== void 0 ? _a : false) : false);
+            const groupState = await state.fetch(`jupytergis:${group.name}`);
+            setOpen((_a = groupState.expanded) !== null && _a !== void 0 ? _a : false);
         };
         getExpandedState();
     }, []);
@@ -156,7 +156,7 @@ function LayerGroupComponent(props) {
         onClick({ type: 'group', item: name, nodeId: childId, event });
     };
     const handleExpand = async () => {
-        state.save(group.name, { expanded: !open });
+        state.save(`jupytergis:${group.name}`, { expanded: !open });
         setOpen(!open);
     };
     return (React.createElement("div", { className: `${LAYER_ITEM_CLASS} ${LAYER_GROUP_CLASS}`, draggable: true, onDragStart: Private.onDragStart, onDragEnd: Private.onDragEnd, "data-id": name },

package/lib/tools.d.ts

@@ -23,3 +23,12 @@ export declare function deepCopy<T = IDict<any>>(value: T): T;
 export declare function createDefaultLayerRegistry(layerBrowserRegistry: IJGISLayerBrowserRegistry): void;
 export declare function getLayerTileInfo(tileUrl: string, mapOptions: Pick<IJGISOptions, 'latitude' | 'longitude' | 'extent' | 'zoom'>, urlParameters?: IDict<string>): Promise<VectorTile>;
 export declare function getSourceLayerNames(tileUrl: string, urlParameters?: IDict<string>): Promise<string[]>;
+export interface IParsedStyle {
+    fillColor: string;
+    strokeColor: string;
+    strokeWidth: number;
+    joinStyle: string;
+    capStyle: string;
+    radius?: number;
+}
+export declare function parseColor(type: string, style: any): IParsedStyle | undefined;

package/lib/tools.js

@@ -170,6 +170,10 @@ function getTileCoordinates(latDeg, lonDeg, zoom) {
     const n = 1 << zoom;
     const xTile = Math.floor(((lonDeg + 180.0) / 360.0) * n);
     const yTile = Math.floor((n * (1 - Math.log(Math.tan(latRad) + 1 / Math.cos(latRad)) / Math.PI)) / 2);
+    // Check if either xTile or yTile is NaN
+    if (isNaN(xTile) || isNaN(yTile)) {
+        return { xTile: 0, yTile: 0 };
+    }
     return { xTile, yTile };
 }
 export async function getLayerTileInfo(tileUrl, mapOptions, urlParameters) {
@@ -213,3 +217,37 @@ export async function getSourceLayerNames(tileUrl, urlParameters) {
     const layerNames = Object.keys(tile.layers);
     return layerNames;
 }
+export function parseColor(type, style) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    if (!type || !style) {
+        return;
+    }
+    const type2 = type === 'circle' ? 'circle' : 'default';
+    const shapeStyles = {
+        circle: {
+            radius: (_a = style['circle-radius']) !== null && _a !== void 0 ? _a : 5,
+            fillColor: (_b = style['circle-fill-color']) !== null && _b !== void 0 ? _b : '#3399CC',
+            strokeColor: (_c = style['circle-stroke-color']) !== null && _c !== void 0 ? _c : '#3399CC',
+            strokeWidth: (_d = style['circle-stroke-width']) !== null && _d !== void 0 ? _d : 1.25,
+            joinStyle: (_e = style['circle-stroke-line-join']) !== null && _e !== void 0 ? _e : 'round',
+            capStyle: (_f = style['circle-stroke-line-cap']) !== null && _f !== void 0 ? _f : 'round'
+        },
+        default: {
+            fillColor: (_g = style['fill-color']) !== null && _g !== void 0 ? _g : '[255, 255, 255, 0.4]',
+            strokeColor: (_h = style['stroke-color']) !== null && _h !== void 0 ? _h : '#3399CC',
+            strokeWidth: (_j = style['stroke-width']) !== null && _j !== void 0 ? _j : 1.25,
+            capStyle: (_k = style['stroke-line-cap']) !== null && _k !== void 0 ? _k : 'round',
+            joinStyle: (_l = style['stroke-line-join']) !== null && _l !== void 0 ? _l : 'round'
+        }
+    };
+    const parsedStyle = shapeStyles[type2];
+    Object.assign(parsedStyle, {
+        radius: parsedStyle.radius,
+        fillColor: parsedStyle.fillColor,
+        strokeColor: parsedStyle.strokeColor,
+        strokeWidth: parsedStyle.strokeWidth,
+        joinStyle: parsedStyle.joinStyle,
+        capStyle: parsedStyle.capStyle
+    });
+    return parsedStyle;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupytergis/base",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "A JupyterLab extension for 3D modelling.",
   "keywords": [
     "jupyter",
@@ -16,7 +16,7 @@
     "name": "JupyterGIS contributors"
   },
   "files": [
-    "lib/**/*.{d.ts,eot,gif,html,jpg,js,js.map,json,png,svg,woff2,ttf}",
+    "lib/**/*.{d.ts,eot,gif,html,jpg,js,js.map,json,png,svg,woff2,ttf,data,wasm}",
     "style/**/*.{css,js,eot,gif,html,jpg,json,png,svg,woff2,ttf}"
   ],
   "main": "lib/index.js",
@@ -27,10 +27,11 @@
     "url": "https://github.com/geojupyter/jupytergis.git"
   },
   "scripts": {
-    "build": "jlpm run build:gallery && tsc -b",
+    "build": "jlpm run build:gallery && 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",
-    "build:dev": "tsc -b",
+    "build:dev": "tsc -b && jlpm run cp:gdal",
     "clean": "rimraf tsconfig.tsbuildinfo",
     "clean:lib": "rimraf lib tsconfig.tsbuildinfo",
     "clean:all": "jlpm run clean:lib",
@@ -40,7 +41,7 @@
     "@deathbeds/jupyterlab-rjsf": "^1.1.0",
     "@jupyter/docprovider": "^2.0.0",
     "@jupyter/ydoc": "^1.0.0",
-    "@jupytergis/schema": "^0.1.2",
+    "@jupytergis/schema": "^0.1.3",
     "@jupyterlab/application": "^4.0.0",
     "@jupyterlab/apputils": "^4.0.0",
     "@jupyterlab/completer": "^4.2.4",

package/style/symbologyDialog.css

@@ -21,7 +21,8 @@
   flex: 0 1 20%;
 }
 
-.jp-gis-symbology-row > .jp-select-wrapper {
+.jp-gis-symbology-row > .jp-select-wrapper,
+.jp-gis-symbology-row > .jp-mod-styled {
   flex: 1 0 50%;
   max-width: 50%;
 }
@@ -35,6 +36,13 @@
 .jp-gis-layer-symbology-container {
   display: flex;
   flex-direction: column;
+  gap: 13px;
+  border-top: 1px solid var(--jp-border-color2);
+  padding-top: 8px;
+}
+
+.jp-gis-layer-symbology-container .jp-select-wrapper {
+  margin-bottom: unset;
 }
 
 .jp-gis-band-container .jp-gis-symbology-row:last-child {
@@ -66,12 +74,12 @@
   height: 32px;
 }
 
-.jp-gis-color-row > input[type='number'] {
+.jp-gis-color-row-value-input {
   flex: 0 1 18%;
   min-width: 0px;
 }
 
-.jp-gis-color-row > input[type='color'] {
+.jp-gis-color-row-output-input {
   flex-grow: 1;
 }