@jupytergis/base 0.15.0 → 0.16.0-alpha.1

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

@@ -1,362 +0,0 @@
-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";
-import ValueSelect from "../components/ValueSelect";
-import { useLatest } from "../../../../shared/hooks/useLatest";
-import { useEffectiveSymbologyParams } from '../../hooks/useEffectiveSymbologyParams';
-const Graduated = ({ model, okSignalPromise, layerId, symbologyTab, selectableAttributesAndValues, isStorySegmentOverride, segmentId, }) => {
-    const modeOptions = [
-        'quantile',
-        'equal interval',
-        'jenks',
-        'pretty',
-        'logarithmic',
-    ];
-    const [selectedAttribute, setSelectedAttribute] = useState('');
-    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: 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);
-    const colorManualStyleRef = useLatest(colorManualStyle);
-    const radiusManualStyleRef = useLatest(radiusManualStyle);
-    if (!layerId) {
-        return;
-    }
-    const layer = model.getLayer(layerId);
-    const params = useEffectiveSymbologyParams({
-        model,
-        layerId: layerId,
-        layer,
-        isStorySegmentOverride,
-        segmentId,
-    });
-    if (!params) {
-        return;
-    }
-    useEffect(() => {
-        updateStopRowsBasedOnLayer();
-    }, []);
-    useEffect(() => {
-        var _a, _b, _c, _d;
-        if (params.color) {
-            const strokeColor = params.color['stroke-color'];
-            const circleStrokeColor = params.color['circle-stroke-color'];
-            const effectiveStroke = isColor(strokeColor)
-                ? strokeColor
-                : isColor(circleStrokeColor)
-                    ? circleStrokeColor
-                    : DEFAULT_COLOR;
-            setColorManualStyle({
-                strokeColor: colorToRgba(effectiveStroke),
-                strokeWidth: String(params.color['stroke-width'] ||
-                    params.color['circle-stroke-width'] ||
-                    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 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;
-        }
-        setColorStopRows(VectorUtils.buildColorInfo(params));
-        setRadiusStopRows(VectorUtils.buildRadiusInfo(layer));
-    };
-    const handleOk = () => {
-        var _a, _b, _c, _d;
-        const newStyle = Object.assign({}, params.color);
-        // Apply color symbology
-        if (colorStopRowsRef.current.length > 0) {
-            const interpolateExpr = [
-                'interpolate',
-                ['linear'],
-                ['get', selectableAttributeRef.current],
-            ];
-            colorStopRowsRef.current.forEach(stop => {
-                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;
-            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-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 = [
-                'interpolate',
-                ['linear'],
-                ['get', selectableAttributeRef.current],
-            ];
-            radiusStopRowsRef.current.forEach(stop => {
-                radiusExpr.push(stop.stop);
-                radiusExpr.push(stop.output);
-            });
-            newStyle['circle-radius'] = radiusExpr;
-        }
-        else {
-            newStyle['circle-radius'] = radiusManualStyleRef.current.radius;
-        }
-        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,
-            isStorySegmentOverride,
-            segmentId,
-            payload: {
-                symbologyState,
-                color: newStyle,
-            },
-            mutateLayerBeforeSave: targetLayer => {
-                if (targetLayer.type === 'HeatmapLayer') {
-                    targetLayer.type = 'VectorLayer';
-                }
-            },
-        });
-    };
-    useOkSignal(okSignalPromise, handleOk);
-    const buildColorInfoFromClassification = (selectedMode, numberOfShades, selectedRamp, reverseRamp) => {
-        setColorRampOptions({
-            selectedRamp,
-            numberOfShades,
-            selectedMode,
-            reverseRamp,
-        });
-        let stops;
-        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(rangeValues, numberOfShades);
-                break;
-            case 'jenks':
-                stops = VectorClassifications.calculateJenksBreaks(values, numberOfShades);
-                break;
-            case 'pretty':
-                stops = VectorClassifications.calculatePrettyBreaks(rangeValues, numberOfShades);
-                break;
-            case 'logarithmic':
-                stops = VectorClassifications.calculateLogarithmicBreaks(rangeValues, numberOfShades);
-                break;
-            default:
-                console.warn('No mode selected');
-                return;
-        }
-        // 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);
-        }
-        else {
-            setColorStopRows(stopOutputPairs);
-        }
-    };
-    const handleReset = (method) => {
-        const newStyle = Object.assign({}, params.color);
-        if (method === 'color') {
-            delete newStyle['stroke-color'];
-            setColorStopRows([]);
-            setColorRampOptions(undefined);
-        }
-        if (method === 'radius') {
-            delete newStyle['circle-radius'];
-            setRadiusStopRows([]);
-        }
-        const layer = model.getLayer(layerId);
-        if (!(layer === null || layer === void 0 ? void 0 : layer.parameters)) {
-            return;
-        }
-        layer.parameters.color = newStyle;
-        model.sharedModel.updateLayer(layerId, layer);
-    };
-    const body = (() => {
-        var _a;
-        if (((_a = Object.keys(selectableAttributesAndValues)) === null || _a === void 0 ? void 0 : _a.length) === 0) {
-            return (React.createElement("p", { className: "errors" }, "This symbology type is not available; no attributes contain numeric values."));
-        }
-        else {
-            return (React.createElement(React.Fragment, null,
-                React.createElement(ValueSelect, { featureProperties: selectableAttributesAndValues, selectedValue: selectedAttribute, setSelectedValue: setSelectedAttribute }),
-                React.createElement("div", { className: "jp-gis-layer-symbology-container" },
-                    symbologyTab === 'color' && (React.createElement(React.Fragment, null,
-                        React.createElement("p", { className: "jp-info-text" },
-                            "Fill color is automatically controlled by the color ramp. To control fill manually, switch to ",
-                            React.createElement("strong", null, "Simple"),
-                            ' ',
-                            "symbology."),
-                        React.createElement("div", { className: "jp-gis-symbology-row" },
-                            React.createElement("label", null, "Stroke Color:"),
-                            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: "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 })));
-        }
-    })();
-    return (React.createElement("div", { className: "jp-gis-layer-symbology-container" },
-        React.createElement("p", null, "Color features based on an attribute containing scalar values."),
-        body));
-};
-export default Graduated;

package/lib/dialogs/symbology/vector_layer/types/Heatmap.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { ISymbologyDialogProps } from "../../symbologyDialog";
-declare const Heatmap: React.FC<ISymbologyDialogProps>;
-export default Heatmap;

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

@@ -1,89 +0,0 @@
-import colormap from 'colormap';
-import React, { useEffect, useState } from 'react';
-import ColorRampSelector from "../../components/color_ramp/ColorRampSelector";
-import { useOkSignal } from "../../hooks/useOkSignal";
-import { saveSymbology, } from "../../symbologyUtils";
-import { useLatest } from "../../../../shared/hooks/useLatest";
-import { useEffectiveSymbologyParams } from '../../hooks/useEffectiveSymbologyParams';
-const Heatmap = ({ model, okSignalPromise, layerId, isStorySegmentOverride, segmentId, }) => {
-    if (!layerId) {
-        return;
-    }
-    const layer = model.getLayer(layerId);
-    const params = useEffectiveSymbologyParams({
-        model,
-        layerId: layerId,
-        layer,
-        isStorySegmentOverride,
-        segmentId,
-    });
-    if (!params) {
-        return;
-    }
-    const [selectedRamp, setSelectedRamp] = useState('viridis');
-    const [heatmapOptions, setHetamapOptions] = useState({
-        radius: 8,
-        blur: 15,
-    });
-    const [reverseRamp, setReverseRamp] = useState(false);
-    const selectedRampRef = useLatest(selectedRamp);
-    const heatmapOptionsRef = useLatest(heatmapOptions);
-    const reverseRampRef = useLatest(reverseRamp);
-    useEffect(() => {
-        populateOptions();
-    }, []);
-    const populateOptions = async () => {
-        var _a, _b;
-        let colorRamp = 'viridis';
-        if ((_a = params.symbologyState) === null || _a === void 0 ? void 0 : _a.colorRamp) {
-            colorRamp = params.symbologyState.colorRamp;
-        }
-        if (typeof ((_b = params.symbologyState) === null || _b === void 0 ? void 0 : _b.reverse) === 'boolean') {
-            setReverseRamp(params.symbologyState.reverse);
-        }
-        setSelectedRamp(colorRamp);
-    };
-    const handleOk = () => {
-        let colorMap = colormap({
-            colormap: selectedRampRef.current,
-            nshades: 9,
-            format: 'hex',
-        });
-        if (reverseRampRef.current) {
-            colorMap = [...colorMap].reverse();
-        }
-        const symbologyState = {
-            renderType: 'Heatmap',
-            colorRamp: selectedRampRef.current,
-            reverse: reverseRampRef.current,
-        };
-        saveSymbology({
-            model,
-            layerId,
-            isStorySegmentOverride,
-            segmentId,
-            payload: {
-                symbologyState,
-                color: colorMap,
-            },
-            mutateLayerBeforeSave: targetLayer => {
-                targetLayer.parameters.blur = heatmapOptionsRef.current.blur;
-                targetLayer.parameters.radius = heatmapOptionsRef.current.radius;
-                targetLayer.type = 'HeatmapLayer';
-            },
-        });
-    };
-    useOkSignal(okSignalPromise, handleOk);
-    return (React.createElement("div", { className: "jp-gis-layer-symbology-container" },
-        React.createElement("p", null, "Represent features based on their density using a heatmap."),
-        React.createElement("div", { className: "jp-gis-symbology-row jp-gis-heatmap" },
-            React.createElement("label", { htmlFor: "color-ramp-select" }, "Color Ramp:"),
-            React.createElement(ColorRampSelector, { selectedRamp: selectedRamp, setSelected: setSelectedRamp, reverse: reverseRamp, setReverse: setReverseRamp })),
-        React.createElement("div", { className: "jp-gis-symbology-row" },
-            React.createElement("label", { htmlFor: 'vector-value-select' }, "Radius:"),
-            React.createElement("input", { type: "number", value: heatmapOptions.radius, className: "jp-mod-styled", onChange: event => setHetamapOptions(prevState => (Object.assign(Object.assign({}, prevState), { radius: +event.target.value }))) })),
-        React.createElement("div", { className: "jp-gis-symbology-row" },
-            React.createElement("label", { htmlFor: 'vector-value-select' }, "Blur:"),
-            React.createElement("input", { type: "number", value: heatmapOptions.blur, className: "jp-mod-styled", onChange: event => setHetamapOptions(prevState => (Object.assign(Object.assign({}, prevState), { blur: +event.target.value }))) }))));
-};
-export default Heatmap;

package/lib/dialogs/symbology/vector_layer/types/SimpleSymbol.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { ISymbologyTabbedDialogProps } from "../../symbologyDialog";
-declare const SimpleSymbol: React.FC<ISymbologyTabbedDialogProps>;
-export default SimpleSymbol;

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

@@ -1,120 +0,0 @@
-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";
-import { useLatest } from "../../../../shared/hooks/useLatest";
-import { parseColor } from "../../../../tools";
-const SimpleSymbol = ({ model, okSignalPromise, layerId, symbologyTab, isStorySegmentOverride, segmentId, }) => {
-    const [style, setStyle] = useState({
-        fillColor: '#3399CC',
-        joinStyle: 'round',
-        strokeColor: '#3399CC',
-        capStyle: 'round',
-        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,
-        layerId: layerId,
-        layer,
-        isStorySegmentOverride,
-        segmentId,
-    });
-    useEffect(() => {
-        var _a, _b, _c;
-        if (!params) {
-            return;
-        }
-        if (((_a = params.symbologyState) === null || _a === void 0 ? void 0 : _a.renderType) === 'Single Symbol' && params.color) {
-            const parsed = parseColor(params.color);
-            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;
-        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': 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',
-        };
-        saveSymbology({
-            model,
-            layerId,
-            isStorySegmentOverride,
-            segmentId,
-            payload: {
-                symbologyState,
-                color: styleExpr,
-            },
-            mutateLayerBeforeSave: targetLayer => {
-                if (targetLayer.type === 'HeatmapLayer') {
-                    targetLayer.type = 'VectorLayer';
-                }
-            },
-        });
-    };
-    useOkSignal(okSignalPromise, handleOk);
-    const joinStyleOptions = ['bevel', 'round', 'miter'];
-    const capStyleOptions = ['butt', 'round', 'square'];
-    if (!layerId || !layer) {
-        return null;
-    }
-    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(RgbaColorPicker, { color: fillRgba, onChange: setFillRgba })),
-        React.createElement("div", { className: "jp-gis-symbology-row" },
-            React.createElement("label", { htmlFor: 'vector-value-select' }, "Stroke Color:"),
-            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: "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" },
-                React.createElement("select", { name: 'vector-join-select', onChange: event => setStyle(prevState => (Object.assign(Object.assign({}, prevState), { joinStyle: event.target.value }))), className: "jp-mod-styled", value: style.joinStyle }, joinStyleOptions.map((method, index) => (React.createElement("option", { key: index, value: method, className: "jp-mod-styled" }, method)))))),
-        React.createElement("div", { className: "jp-gis-symbology-row" },
-            React.createElement("label", { htmlFor: 'vector-cap-select' }, "Cap Style:"),
-            React.createElement("div", { className: "jp-select-wrapper" },
-                React.createElement("select", { name: 'vector-cap-select', onChange: event => setStyle(prevState => (Object.assign(Object.assign({}, prevState), { capStyle: event.target.value }))), className: "jp-mod-styled", value: style.capStyle }, capStyleOptions.map((cap, index) => (React.createElement("option", { key: index, value: cap, className: "jp-mod-styled" }, cap))))))));
-    const renderRadiusTab = () => (React.createElement("div", { className: "jp-gis-symbology-row" },
-        React.createElement("label", null, "Radius:"),
-        React.createElement("input", { type: "number", value: style.radius, className: "jp-mod-styled", onChange: e => setStyle(prev => (Object.assign(Object.assign({}, prev), { radius: +e.target.value }))) })));
-    return (React.createElement("div", { className: "jp-gis-layer-symbology-container" },
-        React.createElement("p", null, "Color all features the same way."),
-        symbologyTab === 'color' ? renderColorTab() : renderRadiusTab()));
-};
-export default SimpleSymbol;

package/lib/formbuilder/index.d.ts

@@ -1,4 +0,0 @@
-export * from './objectform/SchemaForm';
-export * from './objectform/source';
-export * from './objectform/layer';
-export * from './creationform';

package/lib/formbuilder/index.js

@@ -1,4 +0,0 @@
-export * from './objectform/SchemaForm';
-export * from './objectform/source';
-export * from './objectform/layer';
-export * from './creationform';