@jupytergis/base 0.14.0 → 0.15.0

package/lib/dialogs/symbology/vector_layer/types/Graduated.js

@@ -1,6 +1,9 @@
+import { UUID } from '@lumino/coreutils';
 import React, { useEffect, useState } from 'react';
 import { VectorClassifications } from "../../classificationModes";
+import { colorToRgba, DEFAULT_COLOR, DEFAULT_STROKE_WIDTH, getColorMapList, isColor, } from "../../colorRampUtils";
 import ColorRampControls from "../../components/color_ramp/ColorRampControls";
+import RgbaColorPicker from "../../components/color_ramp/RgbaColorPicker";
 import StopContainer from "../../components/color_stops/StopContainer";
 import { useOkSignal } from "../../hooks/useOkSignal";
 import { saveSymbology, Utils, VectorUtils, } from "../../symbologyUtils";
@@ -19,15 +22,23 @@ const Graduated = ({ model, okSignalPromise, layerId, symbologyTab, selectableAt
     const [colorStopRows, setColorStopRows] = useState([]);
     const [radiusStopRows, setRadiusStopRows] = useState([]);
     const [colorRampOptions, setColorRampOptions] = useState();
+    const [fallbackColor, setFallbackColor] = useState([0, 0, 0, 0]);
+    const [strokeFollowsFill, setStrokeFollowsFill] = useState(false);
+    const fallbackColorRef = useLatest(fallbackColor);
+    const strokeFollowsFillRef = useLatest(strokeFollowsFill);
     const [colorManualStyle, setColorManualStyle] = useState({
-        strokeColor: '#3399CC',
-        strokeWidth: 1.25,
+        strokeColor: DEFAULT_COLOR,
+        strokeWidth: String(DEFAULT_STROKE_WIDTH),
     });
     const [radiusManualStyle, setRadiusManualStyle] = useState({
         radius: 5,
     });
+    const [vmin, setVmin] = useState('');
+    const [vmax, setVmax] = useState('');
     const selectableAttributeRef = useLatest(selectedAttribute);
     const symbologyTabRef = useLatest(symbologyTab);
+    const vminRef = useLatest(vmin);
+    const vmaxRef = useLatest(vmax);
     const colorStopRowsRef = useLatest(colorStopRows);
     const radiusStopRowsRef = useLatest(radiusStopRows);
     const colorRampOptionsRef = useLatest(colorRampOptions);
@@ -51,31 +62,54 @@ const Graduated = ({ model, okSignalPromise, layerId, symbologyTab, selectableAt
         updateStopRowsBasedOnLayer();
     }, []);
     useEffect(() => {
+        var _a, _b, _c, _d;
         if (params.color) {
             const strokeColor = params.color['stroke-color'];
             const circleStrokeColor = params.color['circle-stroke-color'];
-            const isSimpleColor = (val) => typeof val === 'string' && /^#?[0-9A-Fa-f]{3,8}$/.test(val);
+            const effectiveStroke = isColor(strokeColor)
+                ? strokeColor
+                : isColor(circleStrokeColor)
+                    ? circleStrokeColor
+                    : DEFAULT_COLOR;
             setColorManualStyle({
-                strokeColor: isSimpleColor(strokeColor)
-                    ? strokeColor
-                    : isSimpleColor(circleStrokeColor)
-                        ? circleStrokeColor
-                        : '#3399CC',
-                strokeWidth: params.color['stroke-width'] ||
+                strokeColor: colorToRgba(effectiveStroke),
+                strokeWidth: String(params.color['stroke-width'] ||
                     params.color['circle-stroke-width'] ||
-                    1.25,
+                    DEFAULT_STROKE_WIDTH),
             });
             setRadiusManualStyle({
                 radius: params.color['circle-radius'] || 5,
             });
         }
+        setFallbackColor(colorToRgba((_b = (_a = params.symbologyState) === null || _a === void 0 ? void 0 : _a.fallbackColor) !== null && _b !== void 0 ? _b : [0, 0, 0, 0]));
+        setStrokeFollowsFill((_d = (_c = params.symbologyState) === null || _c === void 0 ? void 0 : _c.strokeFollowsFill) !== null && _d !== void 0 ? _d : false);
     }, [layerId]);
     useEffect(() => {
         var _a;
-        const attribute = ((_a = params.symbologyState) === null || _a === void 0 ? void 0 : _a.value) ||
-            Object.keys(selectableAttributesAndValues)[0];
+        const savedValue = (_a = params.symbologyState) === null || _a === void 0 ? void 0 : _a.value;
+        const attribute = savedValue && savedValue in selectableAttributesAndValues
+            ? savedValue
+            : Object.keys(selectableAttributesAndValues)[0];
         setSelectedAttribute(attribute);
     }, [selectableAttributesAndValues]);
+    useEffect(() => {
+        var _a, _b;
+        if (!selectedAttribute ||
+            !selectableAttributesAndValues[selectedAttribute]) {
+            return;
+        }
+        if (((_a = params.symbologyState) === null || _a === void 0 ? void 0 : _a.vmin) !== undefined) {
+            setVmin(String(params.symbologyState.vmin));
+            setVmax(String((_b = params.symbologyState.vmax) !== null && _b !== void 0 ? _b : ''));
+            return;
+        }
+        const values = Array.from(selectableAttributesAndValues[selectedAttribute]).filter(Number.isFinite);
+        if (values.length === 0) {
+            return;
+        }
+        setVmin(String(Math.min(...values)));
+        setVmax(String(Math.max(...values)));
+    }, [selectedAttribute]);
     const updateStopRowsBasedOnLayer = () => {
         if (!layer) {
             return;
@@ -88,27 +122,42 @@ const Graduated = ({ model, okSignalPromise, layerId, symbologyTab, selectableAt
         const newStyle = Object.assign({}, params.color);
         // Apply color symbology
         if (colorStopRowsRef.current.length > 0) {
-            const colorExpr = [
+            const interpolateExpr = [
                 'interpolate',
                 ['linear'],
                 ['get', selectableAttributeRef.current],
             ];
             colorStopRowsRef.current.forEach(stop => {
-                colorExpr.push(stop.stop);
-                colorExpr.push(stop.output);
+                interpolateExpr.push(stop.stop);
+                interpolateExpr.push(stop.output);
             });
+            // Wrap in case so features missing the attribute use the fallback color
+            // instead of causing OL to throw at render time.
+            const colorExpr = [
+                'case',
+                ['has', selectableAttributeRef.current],
+                interpolateExpr,
+                fallbackColorRef.current,
+            ];
             newStyle['fill-color'] = colorExpr;
             newStyle['circle-fill-color'] = colorExpr;
-            newStyle['stroke-color'] = colorExpr;
-            newStyle['circle-stroke-color'] = colorExpr;
+            if (strokeFollowsFillRef.current) {
+                newStyle['stroke-color'] = colorExpr;
+                newStyle['circle-stroke-color'] = colorExpr;
+            }
+            else {
+                newStyle['stroke-color'] = colorManualStyleRef.current.strokeColor;
+                newStyle['circle-stroke-color'] =
+                    colorManualStyleRef.current.strokeColor;
+            }
         }
         else {
             // use manual style
+            newStyle['stroke-color'] = colorManualStyleRef.current.strokeColor;
+            newStyle['circle-stroke-color'] = colorManualStyleRef.current.strokeColor;
         }
-        newStyle['stroke-color'] = colorManualStyleRef.current.strokeColor;
-        newStyle['circle-stroke-color'] = colorManualStyleRef.current.strokeColor;
-        newStyle['stroke-width'] = colorManualStyleRef.current.strokeWidth;
-        newStyle['circle-stroke-width'] = colorManualStyleRef.current.strokeWidth;
+        newStyle['stroke-width'] = Math.max(0, parseFloat(colorManualStyleRef.current.strokeWidth));
+        newStyle['circle-stroke-width'] = Math.max(0, parseFloat(colorManualStyleRef.current.strokeWidth));
         // Apply radius symbology
         if (radiusStopRowsRef.current.length > 0) {
             const radiusExpr = [
@@ -125,15 +174,9 @@ const Graduated = ({ model, okSignalPromise, layerId, symbologyTab, selectableAt
         else {
             newStyle['circle-radius'] = radiusManualStyleRef.current.radius;
         }
-        const symbologyState = {
-            renderType: 'Graduated',
-            value: selectableAttributeRef.current,
-            method: symbologyTabRef.current,
-            colorRamp: (_a = colorRampOptionsRef.current) === null || _a === void 0 ? void 0 : _a.selectedRamp,
-            nClasses: (_b = colorRampOptionsRef.current) === null || _b === void 0 ? void 0 : _b.numberOfShades,
-            mode: (_c = colorRampOptionsRef.current) === null || _c === void 0 ? void 0 : _c.selectedMode,
-            reverseRamp: (_d = colorRampOptionsRef.current) === null || _d === void 0 ? void 0 : _d.reverseRamp,
-        };
+        const parsedVmin = parseFloat(vminRef.current);
+        const parsedVmax = parseFloat(vmaxRef.current);
+        const symbologyState = Object.assign(Object.assign({ renderType: 'Graduated', value: selectableAttributeRef.current, method: symbologyTabRef.current, colorRamp: (_a = colorRampOptionsRef.current) === null || _a === void 0 ? void 0 : _a.selectedRamp, nClasses: (_b = colorRampOptionsRef.current) === null || _b === void 0 ? void 0 : _b.numberOfShades, mode: (_c = colorRampOptionsRef.current) === null || _c === void 0 ? void 0 : _c.selectedMode, reverseRamp: (_d = colorRampOptionsRef.current) === null || _d === void 0 ? void 0 : _d.reverseRamp, fallbackColor: fallbackColorRef.current, strokeFollowsFill: strokeFollowsFillRef.current }, (Number.isFinite(parsedVmin) && { vmin: parsedVmin })), (Number.isFinite(parsedVmax) && { vmax: parsedVmax }));
         saveSymbology({
             model,
             layerId,
@@ -159,30 +202,73 @@ const Graduated = ({ model, okSignalPromise, layerId, symbologyTab, selectableAt
             reverseRamp,
         });
         let stops;
-        const values = Array.from(selectableAttributesAndValues[selectedAttribute]);
+        if (!selectableAttributesAndValues[selectedAttribute]) {
+            return;
+        }
+        const allValues = Array.from(selectableAttributesAndValues[selectedAttribute]);
+        const parsed = (s) => {
+            const n = parseFloat(s);
+            return Number.isFinite(n) ? n : undefined;
+        };
+        const parsedVmin = parsed(vmin);
+        const parsedVmax = parsed(vmax);
+        const values = allValues.filter(v => {
+            if (!Number.isFinite(v)) {
+                return false;
+            }
+            if (parsedVmin !== undefined && v < parsedVmin) {
+                return false;
+            }
+            if (parsedVmax !== undefined && v > parsedVmax) {
+                return false;
+            }
+            return true;
+        });
+        const dataMin = Math.min(...values);
+        const dataMax = Math.max(...values);
+        const rangeMin = parsedVmin !== null && parsedVmin !== void 0 ? parsedVmin : dataMin;
+        const rangeMax = parsedVmax !== null && parsedVmax !== void 0 ? parsedVmax : dataMax;
+        const rangeValues = [rangeMin, rangeMax];
         switch (selectedMode) {
             case 'quantile':
                 stops = VectorClassifications.calculateQuantileBreaks(values, numberOfShades);
                 break;
             case 'equal interval':
-                stops = VectorClassifications.calculateEqualIntervalBreaks(values, numberOfShades);
+                stops = VectorClassifications.calculateEqualIntervalBreaks(rangeValues, numberOfShades);
                 break;
             case 'jenks':
                 stops = VectorClassifications.calculateJenksBreaks(values, numberOfShades);
                 break;
             case 'pretty':
-                stops = VectorClassifications.calculatePrettyBreaks(values, numberOfShades);
+                stops = VectorClassifications.calculatePrettyBreaks(rangeValues, numberOfShades);
                 break;
             case 'logarithmic':
-                stops = VectorClassifications.calculateLogarithmicBreaks(values, numberOfShades);
+                stops = VectorClassifications.calculateLogarithmicBreaks(rangeValues, numberOfShades);
                 break;
             default:
                 console.warn('No mode selected');
                 return;
         }
-        const stopOutputPairs = symbologyTab === 'radius'
-            ? stops.map(v => ({ stop: v, output: v }))
-            : Utils.getValueColorPairs(stops, selectedRamp, numberOfShades, reverseRamp);
+        // Pin outer stops to the user-specified range for all modes.
+        // Range-based modes (equal interval, pretty, logarithmic) already receive
+        // rangeValues so their outer stops are correct; this clamp ensures
+        // data-driven modes (quantile, jenks) also honour vmin/vmax at the edges,
+        // which is useful e.g. for excluding outliers while keeping the ramp
+        // anchored to the chosen range.
+        if (stops.length > 0) {
+            stops[0] = rangeMin;
+            stops[stops.length - 1] = rangeMax;
+        }
+        const colorRamp = getColorMapList().find(c => c.name === selectedRamp);
+        const getStopOutputPairs = () => {
+            if (symbologyTab === 'radius') {
+                return stops.map(v => ({ id: UUID.uuid4(), stop: v, output: v }));
+            }
+            return colorRamp
+                ? Utils.getValueColorPairs(stops, colorRamp, numberOfShades, reverseRamp)
+                : [];
+        };
+        const stopOutputPairs = getStopOutputPairs();
         if (symbologyTab === 'radius') {
             setRadiusStopRows(stopOutputPairs);
         }
@@ -225,20 +311,46 @@ const Graduated = ({ model, okSignalPromise, layerId, symbologyTab, selectableAt
                             "symbology."),
                         React.createElement("div", { className: "jp-gis-symbology-row" },
                             React.createElement("label", null, "Stroke Color:"),
-                            React.createElement("input", { type: "color", className: "jp-mod-styled", value: colorManualStyle.strokeColor, onChange: e => {
-                                    setColorManualStyle(Object.assign(Object.assign({}, colorManualStyle), { strokeColor: e.target.value }));
-                                } })),
+                            React.createElement("div", { style: {
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: 8,
+                                    flex: '1 0 50%',
+                                    maxWidth: '50%',
+                                } },
+                                React.createElement("div", { style: {
+                                        opacity: strokeFollowsFill ? 0.3 : 1,
+                                        pointerEvents: strokeFollowsFill ? 'none' : 'auto',
+                                    } },
+                                    React.createElement(RgbaColorPicker, { color: colorManualStyle.strokeColor, onChange: color => setColorManualStyle(prev => (Object.assign(Object.assign({}, prev), { strokeColor: color }))) })),
+                                React.createElement("label", { style: {
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        gap: 4,
+                                        whiteSpace: 'nowrap',
+                                    } },
+                                    React.createElement("input", { type: "checkbox", checked: strokeFollowsFill, onChange: e => setStrokeFollowsFill(e.target.checked) }),
+                                    "match fill"))),
                         React.createElement("div", { className: "jp-gis-symbology-row" },
                             React.createElement("label", null, "Stroke Width:"),
-                            React.createElement("input", { type: "number", className: "jp-mod-styled", value: colorManualStyle.strokeWidth, onChange: e => {
-                                    setColorManualStyle(Object.assign(Object.assign({}, colorManualStyle), { strokeWidth: +e.target.value }));
-                                } })))),
+                            React.createElement("input", { type: "text", className: "jp-mod-styled", value: colorManualStyle.strokeWidth, onChange: e => {
+                                    setColorManualStyle(Object.assign(Object.assign({}, colorManualStyle), { strokeWidth: e.target.value }));
+                                } })),
+                        React.createElement("div", { className: "jp-gis-symbology-row" },
+                            React.createElement("label", null, "Fallback Color:"),
+                            React.createElement(RgbaColorPicker, { color: fallbackColor, onChange: setFallbackColor })))),
                     symbologyTab === 'radius' && (React.createElement("div", { className: "jp-gis-symbology-row" },
                         React.createElement("label", null, "Circle Radius:"),
                         React.createElement("input", { type: "number", className: "jp-mod-styled", value: radiusManualStyle.radius, onChange: e => {
                                 handleReset('radius');
                                 setRadiusManualStyle(Object.assign(Object.assign({}, radiusManualStyle), { radius: +e.target.value }));
                             } })))),
+                React.createElement("div", { className: "jp-gis-symbology-row" },
+                    React.createElement("label", null, "Min value:"),
+                    React.createElement("input", { type: "text", className: "jp-mod-styled", placeholder: "auto", value: vmin, onChange: e => setVmin(e.target.value) })),
+                React.createElement("div", { className: "jp-gis-symbology-row" },
+                    React.createElement("label", null, "Max value:"),
+                    React.createElement("input", { type: "text", className: "jp-mod-styled", placeholder: "auto", value: vmax, onChange: e => setVmax(e.target.value) })),
                 React.createElement(ColorRampControls, { layerParams: params, modeOptions: modeOptions, classifyFunc: buildColorInfoFromClassification, showModeRow: true, showRampSelector: symbologyTab === 'color' }),
                 React.createElement(StopContainer, { selectedMethod: symbologyTab || 'color', stopRows: symbologyTab === 'color' ? colorStopRows : radiusStopRows, setStopRows: symbologyTab === 'color' ? setColorStopRows : setRadiusStopRows })));
         }

package/lib/dialogs/symbology/vector_layer/types/SimpleSymbol.js

@@ -1,4 +1,7 @@
 import React, { useEffect, useState } from 'react';
+import { colorToRgba, DEFAULT_COLOR, } from "../../colorRampUtils";
+import { DEFAULT_STROKE_WIDTH } from "../../colorRampUtils";
+import RgbaColorPicker from "../../components/color_ramp/RgbaColorPicker";
 import { useEffectiveSymbologyParams } from "../../hooks/useEffectiveSymbologyParams";
 import { useOkSignal } from "../../hooks/useOkSignal";
 import { saveSymbology, } from "../../symbologyUtils";
@@ -10,10 +13,14 @@ const SimpleSymbol = ({ model, okSignalPromise, layerId, symbologyTab, isStorySe
         joinStyle: 'round',
         strokeColor: '#3399CC',
         capStyle: 'round',
-        strokeWidth: 1.25,
+        strokeWidth: String(DEFAULT_STROKE_WIDTH),
         radius: 5,
     });
     const styleRef = useLatest(style);
+    const [fillRgba, setFillRgba] = useState(DEFAULT_COLOR);
+    const [strokeRgba, setStrokeRgba] = useState(DEFAULT_COLOR);
+    const fillRgbaRef = useLatest(fillRgba);
+    const strokeRgbaRef = useLatest(strokeRgba);
     const layer = layerId !== undefined ? model.getLayer(layerId) : null;
     const params = useEffectiveSymbologyParams({
         model,
@@ -23,7 +30,7 @@ const SimpleSymbol = ({ model, okSignalPromise, layerId, symbologyTab, isStorySe
         segmentId,
     });
     useEffect(() => {
-        var _a;
+        var _a, _b, _c;
         if (!params) {
             return;
         }
@@ -32,25 +39,33 @@ const SimpleSymbol = ({ model, okSignalPromise, layerId, symbologyTab, isStorySe
             if (parsed) {
                 setStyle(parsed);
             }
+            const fillColor = (_b = params.color['circle-fill-color']) !== null && _b !== void 0 ? _b : params.color['fill-color'];
+            const strokeColor = (_c = params.color['circle-stroke-color']) !== null && _c !== void 0 ? _c : params.color['stroke-color'];
+            if (fillColor !== undefined) {
+                setFillRgba(colorToRgba(fillColor));
+            }
+            if (strokeColor !== undefined) {
+                setStrokeRgba(colorToRgba(strokeColor));
+            }
         }
     }, [params]);
     const handleOk = () => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         if (!layerId || !(layer === null || layer === void 0 ? void 0 : layer.parameters)) {
             return;
         }
         const styleExpr = {
             'circle-radius': (_a = styleRef.current) === null || _a === void 0 ? void 0 : _a.radius,
-            'circle-fill-color': (_b = styleRef.current) === null || _b === void 0 ? void 0 : _b.fillColor,
-            'circle-stroke-color': (_c = styleRef.current) === null || _c === void 0 ? void 0 : _c.strokeColor,
-            'circle-stroke-width': (_d = styleRef.current) === null || _d === void 0 ? void 0 : _d.strokeWidth,
-            'circle-stroke-line-join': (_e = styleRef.current) === null || _e === void 0 ? void 0 : _e.joinStyle,
-            'circle-stroke-line-cap': (_f = styleRef.current) === null || _f === void 0 ? void 0 : _f.capStyle,
-            'fill-color': (_g = styleRef.current) === null || _g === void 0 ? void 0 : _g.fillColor,
-            'stroke-color': (_h = styleRef.current) === null || _h === void 0 ? void 0 : _h.strokeColor,
-            'stroke-width': (_j = styleRef.current) === null || _j === void 0 ? void 0 : _j.strokeWidth,
-            'stroke-line-join': (_k = styleRef.current) === null || _k === void 0 ? void 0 : _k.joinStyle,
-            'stroke-line-cap': (_l = styleRef.current) === null || _l === void 0 ? void 0 : _l.capStyle,
+            'circle-fill-color': fillRgbaRef.current,
+            'circle-stroke-color': strokeRgbaRef.current,
+            'circle-stroke-width': Math.max(0, parseFloat((_c = (_b = styleRef.current) === null || _b === void 0 ? void 0 : _b.strokeWidth) !== null && _c !== void 0 ? _c : '0')),
+            'circle-stroke-line-join': (_d = styleRef.current) === null || _d === void 0 ? void 0 : _d.joinStyle,
+            'circle-stroke-line-cap': (_e = styleRef.current) === null || _e === void 0 ? void 0 : _e.capStyle,
+            'fill-color': fillRgbaRef.current,
+            'stroke-color': strokeRgbaRef.current,
+            'stroke-width': Math.max(0, parseFloat((_g = (_f = styleRef.current) === null || _f === void 0 ? void 0 : _f.strokeWidth) !== null && _g !== void 0 ? _g : '0')),
+            'stroke-line-join': (_h = styleRef.current) === null || _h === void 0 ? void 0 : _h.joinStyle,
+            'stroke-line-cap': (_j = styleRef.current) === null || _j === void 0 ? void 0 : _j.capStyle,
         };
         const symbologyState = {
             renderType: 'Single Symbol',
@@ -80,13 +95,13 @@ const SimpleSymbol = ({ model, okSignalPromise, layerId, symbologyTab, isStorySe
     const renderColorTab = () => (React.createElement(React.Fragment, null,
         React.createElement("div", { className: "jp-gis-symbology-row" },
             React.createElement("label", { htmlFor: 'vector-value-select' }, "Fill Color:"),
-            React.createElement("input", { type: "color", value: style.fillColor, className: "jp-mod-styled", onChange: event => setStyle(prevState => (Object.assign(Object.assign({}, prevState), { fillColor: event.target.value }))) })),
+            React.createElement(RgbaColorPicker, { color: fillRgba, onChange: setFillRgba })),
         React.createElement("div", { className: "jp-gis-symbology-row" },
             React.createElement("label", { htmlFor: 'vector-value-select' }, "Stroke Color:"),
-            React.createElement("input", { type: "color", value: style.strokeColor, className: "jp-mod-styled", onChange: event => setStyle(prevState => (Object.assign(Object.assign({}, prevState), { strokeColor: event.target.value }))) })),
+            React.createElement(RgbaColorPicker, { color: strokeRgba, onChange: setStrokeRgba })),
         React.createElement("div", { className: "jp-gis-symbology-row" },
             React.createElement("label", { htmlFor: 'vector-value-select' }, "Stroke Width:"),
-            React.createElement("input", { type: "number", value: style.strokeWidth, className: "jp-mod-styled", onChange: event => setStyle(prevState => (Object.assign(Object.assign({}, prevState), { strokeWidth: +event.target.value }))) })),
+            React.createElement("input", { type: "text", value: style.strokeWidth, className: "jp-mod-styled", onChange: event => setStyle(prevState => (Object.assign(Object.assign({}, prevState), { strokeWidth: event.target.value }))) })),
         React.createElement("div", { className: "jp-gis-symbology-row" },
             React.createElement("label", { htmlFor: 'vector-join-select' }, "Join Style:"),
             React.createElement("div", { className: "jp-select-wrapper" },

package/lib/formbuilder/formselectors.js

@@ -1,5 +1,5 @@
 import { HeatmapLayerPropertiesForm, HillshadeLayerPropertiesForm, StorySegmentLayerPropertiesForm, LayerPropertiesForm, VectorLayerPropertiesForm, WebGlLayerPropertiesForm, } from './objectform/layer';
-import { GeoJSONSourcePropertiesForm, GeoTiffSourcePropertiesForm, PathBasedSourcePropertiesForm, TileSourcePropertiesForm, SourcePropertiesForm, } from './objectform/source';
+import { GeoJSONSourcePropertiesForm, GeoTiffSourcePropertiesForm, PathBasedSourcePropertiesForm, TileSourcePropertiesForm, WmsTileSourceForm, SourcePropertiesForm, } from './objectform/source';
 export function getLayerTypeForm(layerType) {
     let LayerForm = LayerPropertiesForm;
     switch (layerType) {
@@ -38,6 +38,9 @@ export function getSourceTypeForm(sourceType) {
         case 'GeoTiffSource':
             SourceForm = GeoTiffSourcePropertiesForm;
             break;
+        case 'WmsTileSource':
+            SourceForm = WmsTileSourceForm;
+            break;
         case 'RasterSource':
         case 'VectorTileSource':
             SourceForm = TileSourcePropertiesForm;

package/lib/formbuilder/objectform/components/WmsTileSourceUrlInput.d.ts

@@ -0,0 +1,3 @@
+import { WidgetProps } from '@rjsf/utils';
+import React from 'react';
+export declare function WmsTileSourceUrlInput(props: WidgetProps<string>): React.ReactElement;

package/lib/formbuilder/objectform/components/WmsTileSourceUrlInput.js

@@ -0,0 +1,84 @@
+import React, { useState } from 'react';
+import { WMS_AVAILABLE_LAYERS_CACHE } from "../source";
+import { Button } from "../../../shared/components/Button";
+import { Input } from "../../../shared/components/Input";
+import { GlobalStateDbManager } from "../../../store";
+import { fetchWithProxies } from "../../../tools";
+export function WmsTileSourceUrlInput(props) {
+    var _a;
+    const { value, formContext, onChange, id, name, onBlur, onFocus, disabled, readonly, } = props;
+    const context = formContext;
+    const model = context === null || context === void 0 ? void 0 : context.model;
+    const layers = (_a = context === null || context === void 0 ? void 0 : context.wmsAvailableLayers) !== null && _a !== void 0 ? _a : [];
+    const setWmsAvailableLayers = context === null || context === void 0 ? void 0 : context.setWmsAvailableLayers;
+    const stateDb = GlobalStateDbManager.getInstance().getStateDb();
+    const text = !value ? '' : String(value);
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState(undefined);
+    const handleChange = (event) => {
+        onChange(event.target.value);
+    };
+    const handleConnect = async () => {
+        var _a, _b, _c;
+        if (!model || !setWmsAvailableLayers) {
+            return null;
+        }
+        setIsLoading(true);
+        setError(undefined);
+        const slash = text.endsWith('/') ? '' : '/';
+        const url = `${text}${slash}?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetCapabilities`;
+        try {
+            if (stateDb) {
+                const cacheKey = `${WMS_AVAILABLE_LAYERS_CACHE}:${text}`;
+                const cached = (await stateDb.fetch(cacheKey));
+                if (cached && cached.length > 0) {
+                    setWmsAvailableLayers(cached);
+                    return;
+                }
+            }
+            const xmlText = await fetchWithProxies(url, model, (response) => response.text());
+            const xml = typeof xmlText === 'string' ? xmlText : '';
+            const doc = new DOMParser().parseFromString(xml, 'text/xml');
+            const hasParseError = Boolean(doc.querySelector('parsererror'));
+            const serviceException = doc.querySelector('ServiceExceptionReport');
+            if (hasParseError || serviceException) {
+                setError((_b = (_a = serviceException === null || serviceException === void 0 ? void 0 : serviceException.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : 'Failed to parse WMS GetCapabilities XML.');
+                return;
+            }
+            const rootLayer = doc.querySelector('Capability > Layer');
+            const layerEls = Array.from((_c = rootLayer === null || rootLayer === void 0 ? void 0 : rootLayer.querySelectorAll(':scope > Layer')) !== null && _c !== void 0 ? _c : []);
+            const parsed = layerEls
+                .map(layerEl => {
+                var _a, _b, _c, _d, _e, _f;
+                const name = (_c = (_b = (_a = layerEl.querySelector('Name')) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim()) !== null && _c !== void 0 ? _c : '';
+                const title = (_f = (_e = (_d = layerEl.querySelector('Title')) === null || _d === void 0 ? void 0 : _d.textContent) === null || _e === void 0 ? void 0 : _e.trim()) !== null && _f !== void 0 ? _f : name;
+                return { name, title };
+            })
+                .filter(layer => layer.name !== '' || layer.title !== '');
+            setWmsAvailableLayers(parsed);
+            if (stateDb) {
+                const cacheKey = `${WMS_AVAILABLE_LAYERS_CACHE}:${text}`;
+                await stateDb.save(cacheKey, parsed);
+            }
+        }
+        catch (e) {
+            setError(e instanceof Error ? e.message : String(e));
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { style: {
+                display: 'flex',
+                gap: '0.5rem',
+                alignItems: 'center',
+                margin: '0 7px',
+            } },
+            React.createElement(Input, { id: id, name: name, type: "text", value: text, onChange: handleChange, onBlur: e => onBlur(id, e.target.value), onFocus: e => onFocus(id, e.target.value), disabled: disabled, readOnly: readonly, placeholder: "Enter WMS URL", style: { flexGrow: 1 } }),
+            React.createElement(Button, { variant: "outline", size: "sm", type: "button", onClick: handleConnect, disabled: isLoading }, isLoading ? 'Connecting…' : 'Connect')),
+        error && (React.createElement("div", { style: { marginTop: '0.5rem', color: 'var(--jp-error-color1)' } }, error)),
+        layers.length > 0 && (React.createElement("div", { style: { marginTop: '0.5rem' } },
+            layers.length,
+            " layer(s) found. Choose one in the `params.layers` dropdown."))));
+}

package/lib/formbuilder/objectform/source/index.d.ts

@@ -3,3 +3,4 @@ export * from './geotiffsource';
 export * from './pathbasedsource';
 export * from './sourceform';
 export * from './tilesourceform';
+export * from './wmsTileSource';

package/lib/formbuilder/objectform/source/index.js

@@ -3,3 +3,4 @@ export * from './geotiffsource';
 export * from './pathbasedsource';
 export * from './sourceform';
 export * from './tilesourceform';
+export * from './wmsTileSource';

package/lib/formbuilder/objectform/source/wmsTileSource.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from 'react';
+import type { ISourceFormProps } from "./sourceform";
+export declare const WMS_AVAILABLE_LAYERS_CACHE = "jgis:wmsTileSource:availableLayers";
+export declare function WmsTileSourceForm(props: ISourceFormProps): ReactElement | null;

package/lib/formbuilder/objectform/source/wmsTileSource.js

@@ -0,0 +1,78 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { SchemaForm } from "../SchemaForm";
+import { WmsTileSourceUrlInput } from "../components/WmsTileSourceUrlInput";
+import { processBaseSchema, removeFormEntry, } from "../schemaUtils";
+import { useSchemaFormState } from "../useSchemaFormState";
+import { GlobalStateDbManager } from "../../../store";
+import { deepCopy } from "../../../tools";
+export const WMS_AVAILABLE_LAYERS_CACHE = 'jgis:wmsTileSource:availableLayers';
+export function WmsTileSourceForm(props) {
+    const { schema: schemaProp, sourceData, syncData, model, filePath, formContext, dialogOptions, cancel, formErrorSignal, } = props;
+    const { formData, schema, formContextValue, hasSchema, handleChangeBase, handleSubmitBase, } = useSchemaFormState({
+        sourceData,
+        schemaProp,
+        model,
+        syncData,
+        cancel,
+        onAfterChange: dialogOptions
+            ? (data) => {
+                dialogOptions.sourceData = Object.assign({}, data);
+            }
+            : undefined,
+    });
+    const [wmsAvailableLayers, setWmsAvailableLayers] = useState([]);
+    const stateDb = GlobalStateDbManager.getInstance().getStateDb();
+    // Rehydrate available WMS layers from StateDB to avoid having to refetch on remount.
+    useEffect(() => {
+        const wmsUrl = formData === null || formData === void 0 ? void 0 : formData.url;
+        if (!stateDb || !wmsUrl) {
+            return;
+        }
+        const db = stateDb;
+        const cacheKey = `${WMS_AVAILABLE_LAYERS_CACHE}:${wmsUrl}`;
+        async function loadLayersFromCache() {
+            var _a, _b;
+            const cached = (await db.fetch(cacheKey));
+            if (cached && cached.length > 0) {
+                setWmsAvailableLayers(cached);
+            }
+            else {
+                setWmsAvailableLayers([]);
+                handleChangeBase(Object.assign(Object.assign({}, (formData !== null && formData !== void 0 ? formData : {})), { params: Object.assign(Object.assign({}, ((_b = ((_a = formData === null || formData === void 0 ? void 0 : formData.params) !== null && _a !== void 0 ? _a : {})) !== null && _b !== void 0 ? _b : {})), { layers: undefined }) }));
+            }
+        }
+        void loadLayersFromCache();
+    }, [stateDb, formData === null || formData === void 0 ? void 0 : formData.url]);
+    const uiSchema = useMemo(() => {
+        var _a, _b, _c, _d;
+        const builtUiSchema = {};
+        const dataCopy = deepCopy(formData);
+        processBaseSchema(dataCopy, schema, builtUiSchema, formContext, removeFormEntry);
+        const layerNames = wmsAvailableLayers
+            .map(layer => layer.name)
+            .filter(name => name !== '');
+        // Populate schema enum dynamically so RJSF renders a select for params.layers
+        const params = ((_b = (_a = schema.properties) === null || _a === void 0 ? void 0 : _a.params) !== null && _b !== void 0 ? _b : {});
+        const paramsProperties = ((_c = params.properties) !== null && _c !== void 0 ? _c : {});
+        if (paramsProperties.layers) {
+            // Keep select options in sync with the cached/available layers list.
+            if (layerNames.length > 0) {
+                paramsProperties.layers.enum = layerNames;
+            }
+            else {
+                // Avoid invalid schema (`enum` must be a non-empty array).
+                delete paramsProperties.layers.enum;
+            }
+        }
+        builtUiSchema.url = {
+            'ui:widget': WmsTileSourceUrlInput,
+        };
+        builtUiSchema.params = Object.assign(Object.assign({}, builtUiSchema.params), { 'ui:title': false, layers: Object.assign(Object.assign({}, (_d = builtUiSchema.params) === null || _d === void 0 ? void 0 : _d.layers), { 'ui:widget': 'select', 'ui:placeholder': 'Select a layer', 'ui:enumNames': wmsAvailableLayers.map(layer => layer.title) }) });
+        return builtUiSchema;
+    }, [schema, formData, formContext, wmsAvailableLayers]);
+    if (!hasSchema) {
+        return null;
+    }
+    return (React.createElement(SchemaForm, { schema: schema, formData: formData, onChange: handleChangeBase, onSubmit: handleSubmitBase, formContext: Object.assign(Object.assign({}, formContextValue), { wmsAvailableLayers,
+            setWmsAvailableLayers }), filePath: filePath, uiSchema: uiSchema, formErrorSignal: formErrorSignal }));
+}

package/lib/formbuilder/objectform/useSchemaFormState.d.ts

@@ -29,7 +29,7 @@ export interface IUseSchemaFormStateResult {
     setFormData: Dispatch<SetStateAction<IDict>>;
     /** Schema to pass to SchemaForm (deep copy of schemaProp). */
     schema: RJSFSchema;
-    /** Form context value { model, formData } for SchemaForm. */
+    /** Form context value for SchemaForm (available to custom fields/widgets). */
     formContextValue: {
         model: IJupyterGISModel;
         formData: IDict;

package/lib/mainview/mainView.d.ts

@@ -42,7 +42,7 @@ export declare class MainView extends React.Component<IMainViewProps, IStates> {
     componentDidMount(): Promise<void>;
     componentDidUpdate(prevProps: IMainViewProps, prevState: IStates): void;
     componentWillUnmount(): void;
-    generateMap(center: number[], zoom: number): Promise<void>;
+    generateMap(center: number[], zoom: number, projection?: string): Promise<void>;
     updateCenter: () => void;
     getViewBbox: (targetProjection?: string) => import("ol/extent").Extent;
     createSelectInteraction: () => void;
@@ -189,6 +189,7 @@ export declare class MainView extends React.Component<IMainViewProps, IStates> {
     private _onZoomToPosition;
     private _moveToPosition;
     private _flyToPosition;
+    private _lastPointerCoord;
     private _onPointerMove;
     private _syncPointer;
     private _addMarker;
@@ -205,6 +206,7 @@ export declare class MainView extends React.Component<IMainViewProps, IStates> {
     private _commands;
     private _isPositionInitialized;
     private divRef;
+    private mainViewRef;
     private controlsToolbarRef;
     private spectaContainerRef;
     private storyViewerPanelRef;