@jupytergis/base 0.12.2 → 0.13.0

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

@@ -1,10 +1,13 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { VectorClassifications } from "../../classificationModes";
 import ColorRampControls from "../../components/color_ramp/ColorRampControls";
 import StopContainer from "../../components/color_stops/StopContainer";
-import { Utils, VectorUtils } from "../../symbologyUtils";
+import { useOkSignal } from "../../hooks/useOkSignal";
+import { saveSymbology, Utils, VectorUtils, } from "../../symbologyUtils";
 import ValueSelect from "../components/ValueSelect";
-const Graduated = ({ model, state, okSignalPromise, cancel, layerId, symbologyTab, selectableAttributesAndValues, }) => {
+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',
@@ -12,11 +15,6 @@ const Graduated = ({ model, state, okSignalPromise, cancel, layerId, symbologyTa
         'pretty',
         'logarithmic',
     ];
-    const selectableAttributeRef = useRef();
-    const symbologyTabRef = useRef();
-    const colorStopRowsRef = useRef([]);
-    const radiusStopRowsRef = useRef([]);
-    const colorRampOptionsRef = useRef();
     const [selectedAttribute, setSelectedAttribute] = useState('');
     const [colorStopRows, setColorStopRows] = useState([]);
     const [radiusStopRows, setRadiusStopRows] = useState([]);
@@ -29,31 +27,34 @@ const Graduated = ({ model, state, okSignalPromise, cancel, layerId, symbologyTa
         radius: 5,
     });
     const [reverseRamp, setReverseRamp] = useState(false);
-    const colorManualStyleRef = useRef(colorManualStyle);
-    const radiusManualStyleRef = useRef(radiusManualStyle);
+    const selectableAttributeRef = useLatest(selectedAttribute);
+    const symbologyTabRef = useLatest(symbologyTab);
+    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);
-    if (!(layer === null || layer === void 0 ? void 0 : layer.parameters)) {
+    const params = useEffectiveSymbologyParams({
+        model,
+        layerId: layerId,
+        layer,
+        isStorySegmentOverride,
+        segmentId,
+    });
+    if (!params) {
         return;
     }
     useEffect(() => {
         updateStopRowsBasedOnLayer();
-        okSignalPromise.promise.then(okSignal => {
-            okSignal.connect(handleOk, this);
-        });
-        return () => {
-            okSignalPromise.promise.then(okSignal => {
-                okSignal.disconnect(handleOk, this);
-            });
-        };
     }, []);
     useEffect(() => {
-        var _a;
-        if ((_a = layer === null || layer === void 0 ? void 0 : layer.parameters) === null || _a === void 0 ? void 0 : _a.color) {
-            const strokeColor = layer.parameters.color['stroke-color'];
-            const circleStrokeColor = layer.parameters.color['circle-stroke-color'];
+        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);
             setColorManualStyle({
                 strokeColor: isSimpleColor(strokeColor)
@@ -61,51 +62,30 @@ const Graduated = ({ model, state, okSignalPromise, cancel, layerId, symbologyTa
                     : isSimpleColor(circleStrokeColor)
                         ? circleStrokeColor
                         : '#3399CC',
-                strokeWidth: layer.parameters.color['stroke-width'] ||
-                    layer.parameters.color['circle-stroke-width'] ||
+                strokeWidth: params.color['stroke-width'] ||
+                    params.color['circle-stroke-width'] ||
                     1.25,
             });
             setRadiusManualStyle({
-                radius: layer.parameters.color['circle-radius'] || 5,
+                radius: params.color['circle-radius'] || 5,
             });
         }
     }, [layerId]);
-    useEffect(() => {
-        colorStopRowsRef.current = colorStopRows;
-        radiusStopRowsRef.current = radiusStopRows;
-        selectableAttributeRef.current = selectedAttribute;
-        symbologyTabRef.current = symbologyTab;
-        colorRampOptionsRef.current = colorRampOptions;
-    }, [
-        colorStopRows,
-        radiusStopRows,
-        selectedAttribute,
-        symbologyTab,
-        colorRampOptions,
-    ]);
-    useEffect(() => {
-        colorManualStyleRef.current = colorManualStyle;
-        radiusManualStyleRef.current = radiusManualStyle;
-    }, [colorManualStyle, radiusManualStyle]);
     useEffect(() => {
         var _a, _b;
-        const layerParams = layer.parameters;
-        const attribute = (_b = (_a = layerParams.symbologyState) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : Object.keys(selectableAttributesAndValues)[0];
+        const attribute = (_b = (_a = params.symbologyState) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : Object.keys(selectableAttributesAndValues)[0];
         setSelectedAttribute(attribute);
     }, [selectableAttributesAndValues]);
     const updateStopRowsBasedOnLayer = () => {
         if (!layer) {
             return;
         }
-        setColorStopRows(VectorUtils.buildColorInfo(layer));
+        setColorStopRows(VectorUtils.buildColorInfo(params));
         setRadiusStopRows(VectorUtils.buildRadiusInfo(layer));
     };
     const handleOk = () => {
         var _a, _b, _c;
-        if (!layer.parameters) {
-            return;
-        }
-        const newStyle = Object.assign({}, layer.parameters.color);
+        const newStyle = Object.assign({}, params.color);
         // Apply color symbology
         if (colorStopRowsRef.current.length > 0) {
             const colorExpr = [
@@ -145,8 +125,7 @@ const Graduated = ({ model, state, okSignalPromise, cancel, layerId, symbologyTa
         else {
             newStyle['circle-radius'] = radiusManualStyleRef.current.radius;
         }
-        layer.parameters.color = newStyle;
-        layer.parameters.symbologyState = {
+        const symbologyState = {
             renderType: 'Graduated',
             value: selectableAttributeRef.current,
             method: symbologyTabRef.current,
@@ -155,12 +134,23 @@ const Graduated = ({ model, state, okSignalPromise, cancel, layerId, symbologyTa
             mode: (_c = colorRampOptionsRef.current) === null || _c === void 0 ? void 0 : _c.selectedMode,
             reverse: reverseRamp,
         };
-        if (layer.type === 'HeatmapLayer') {
-            layer.type = 'VectorLayer';
-        }
-        model.sharedModel.updateLayer(layerId, layer);
-        cancel();
+        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) => {
         setColorRampOptions({
             selectedRamp,
@@ -200,10 +190,7 @@ const Graduated = ({ model, state, okSignalPromise, cancel, layerId, symbologyTa
         }
     };
     const handleReset = (method) => {
-        if (!(layer === null || layer === void 0 ? void 0 : layer.parameters)) {
-            return;
-        }
-        const newStyle = Object.assign({}, layer.parameters.color);
+        const newStyle = Object.assign({}, params.color);
         if (method === 'color') {
             delete newStyle['stroke-color'];
             setColorStopRows([]);
@@ -213,6 +200,10 @@ const Graduated = ({ model, state, okSignalPromise, cancel, layerId, symbologyTa
             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);
     };
@@ -251,7 +242,7 @@ const Graduated = ({ model, state, okSignalPromise, cancel, layerId, symbologyTa
                     React.createElement("label", null,
                         React.createElement("input", { type: "checkbox", checked: reverseRamp, onChange: e => setReverseRamp(e.target.checked) }),
                         "Reverse Color Ramp"))),
-                React.createElement(ColorRampControls, { layerParams: layer.parameters, modeOptions: modeOptions, classifyFunc: buildColorInfoFromClassification, showModeRow: true, showRampSelector: symbologyTab === 'color' }),
+                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/Heatmap.js

@@ -1,12 +1,23 @@
 import colormap from 'colormap';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import ColorRampSelector from "../../components/color_ramp/ColorRampSelector";
-const Heatmap = ({ model, state, okSignalPromise, cancel, layerId, }) => {
+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);
-    if (!(layer === null || layer === void 0 ? void 0 : layer.parameters)) {
+    const params = useEffectiveSymbologyParams({
+        model,
+        layerId: layerId,
+        layer,
+        isStorySegmentOverride,
+        segmentId,
+    });
+    if (!params) {
         return;
     }
     const [selectedRamp, setSelectedRamp] = useState('viridis');
@@ -15,40 +26,21 @@ const Heatmap = ({ model, state, okSignalPromise, cancel, layerId, }) => {
         blur: 15,
     });
     const [reverseRamp, setReverseRamp] = useState(false);
-    const selectedRampRef = useRef('viridis');
-    const heatmapOptionsRef = useRef({
-        radius: 8,
-        blur: 15,
-    });
-    const reverseRampRef = useRef(false);
+    const selectedRampRef = useLatest(selectedRamp);
+    const heatmapOptionsRef = useLatest(heatmapOptions);
+    const reverseRampRef = useLatest(reverseRamp);
     useEffect(() => {
         populateOptions();
-        okSignalPromise.promise.then(okSignal => {
-            okSignal.connect(handleOk, this);
-        });
-        return () => {
-            okSignalPromise.promise.then(okSignal => {
-                okSignal.disconnect(handleOk, this);
-            });
-        };
     }, []);
-    useEffect(() => {
-        selectedRampRef.current = selectedRamp;
-        heatmapOptionsRef.current = heatmapOptions;
-        reverseRampRef.current = reverseRamp;
-    }, [selectedRamp, heatmapOptions, reverseRamp]);
     const populateOptions = async () => {
         var _a;
         let colorRamp;
-        if ((_a = layer.parameters) === null || _a === void 0 ? void 0 : _a.symbologyState) {
-            colorRamp = layer.parameters.symbologyState.colorRamp;
+        if ((_a = params.symbologyState) === null || _a === void 0 ? void 0 : _a.colorRamp) {
+            colorRamp = params.symbologyState.colorRamp;
         }
         setSelectedRamp(colorRamp ? colorRamp : 'viridis');
     };
     const handleOk = () => {
-        if (!layer.parameters) {
-            return;
-        }
         let colorMap = colormap({
             colormap: selectedRampRef.current,
             nshades: 9,
@@ -62,14 +54,23 @@ const Heatmap = ({ model, state, okSignalPromise, cancel, layerId, }) => {
             colorRamp: selectedRampRef.current,
             reverse: reverseRampRef.current,
         };
-        layer.parameters.symbologyState = symbologyState;
-        layer.parameters.color = colorMap;
-        layer.parameters.blur = heatmapOptionsRef.current.blur;
-        layer.parameters.radius = heatmapOptionsRef.current.radius;
-        layer.type = 'HeatmapLayer';
-        model.sharedModel.updateLayer(layerId, layer);
-        cancel();
+        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" },

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

@@ -1,7 +1,10 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useState } from 'react';
+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, state, okSignalPromise, cancel, layerId, symbologyTab, }) => {
-    const styleRef = useRef();
+const SimpleSymbol = ({ model, okSignalPromise, layerId, symbologyTab, isStorySegmentOverride, segmentId, }) => {
     const [style, setStyle] = useState({
         fillColor: '#3399CC',
         joinStyle: 'round',
@@ -10,49 +13,30 @@ const SimpleSymbol = ({ model, state, okSignalPromise, cancel, layerId, symbolog
         strokeWidth: 1.25,
         radius: 5,
     });
-    const joinStyleOptions = ['bevel', 'round', 'miter'];
-    const capStyleOptions = ['butt', 'round', 'square'];
-    if (!layerId) {
-        return;
-    }
-    const layer = model.getLayer(layerId);
-    if (!layer) {
-        return;
-    }
+    const styleRef = useLatest(style);
+    const layer = layerId !== undefined ? model.getLayer(layerId) : null;
+    const params = useEffectiveSymbologyParams({
+        model,
+        layerId: layerId,
+        layer,
+        isStorySegmentOverride,
+        segmentId,
+    });
     useEffect(() => {
-        if (!layer.parameters) {
+        var _a;
+        if (!params) {
             return;
         }
-        const initStyle = async () => {
-            var _a;
-            if (!layer.parameters) {
-                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 renderType = (_a = layer.parameters) === null || _a === void 0 ? void 0 : _a.symbologyState.renderType;
-            if (renderType === 'Single Symbol') {
-                // Parse with fallback logic inside
-                const parsedStyle = parseColor(layer.parameters.color);
-                if (parsedStyle) {
-                    setStyle(parsedStyle);
-                }
-            }
-        };
-        initStyle();
-        okSignalPromise.promise.then(okSignal => {
-            okSignal.connect(handleOk, this);
-        });
-        return () => {
-            okSignalPromise.promise.then(okSignal => {
-                okSignal.disconnect(handleOk, this);
-            });
-        };
-    }, []);
-    useEffect(() => {
-        styleRef.current = style;
-    }, [style]);
+        }
+    }, [params]);
     const handleOk = () => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-        if (!layer.parameters) {
+        if (!layerId || !(layer === null || layer === void 0 ? void 0 : layer.parameters)) {
             return;
         }
         const styleExpr = {
@@ -71,14 +55,28 @@ const SimpleSymbol = ({ model, state, okSignalPromise, cancel, layerId, symbolog
         const symbologyState = {
             renderType: 'Single Symbol',
         };
-        layer.parameters.symbologyState = symbologyState;
-        layer.parameters.color = styleExpr;
-        if (layer.type === 'HeatmapLayer') {
-            layer.type = 'VectorLayer';
-        }
-        model.sharedModel.updateLayer(layerId, layer);
-        cancel();
+        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:"),

package/lib/formbuilder/objectform/StoryEditorForm.js

@@ -1,4 +1,3 @@
-import { getCssVarAsColor } from "../../tools";
 import { BaseForm } from './baseform';
 /**
  * The form to modify story map properties.
@@ -13,21 +12,5 @@ export class StoryEditorPropertiesForm extends BaseForm {
         uiSchema.presentationTextColor = {
             'ui:widget': 'color',
         };
-        // Set default values from theme CSS variables when not already in data
-        const schemaProps = schema.properties;
-        if ((schemaProps === null || schemaProps === void 0 ? void 0 : schemaProps.presentationBgColor) &&
-            (data === null || data === void 0 ? void 0 : data.presentationBgColor) === undefined) {
-            const defaultBg = getCssVarAsColor('--jp-layout-color0');
-            if (defaultBg) {
-                schemaProps.presentationBgColor.default = defaultBg;
-            }
-        }
-        if ((schemaProps === null || schemaProps === void 0 ? void 0 : schemaProps.presentationTextColor) &&
-            (data === null || data === void 0 ? void 0 : data.presentationTextColor) === undefined) {
-            const defaultText = getCssVarAsColor('--jp-ui-font-color0');
-            if (defaultText) {
-                schemaProps.presentationTextColor.default = defaultText;
-            }
-        }
     }
 }

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

@@ -5,6 +5,10 @@ import { IChangeEvent, ISubmitEvent } from '@rjsf/core';
 import { RJSFSchema, UiSchema } from '@rjsf/utils';
 import * as React from 'react';
 import { IDict } from "../../types";
+export interface IJupyterGISFormContext<TFormData = IDict | undefined> {
+    model: IJupyterGISModel;
+    formData: TFormData;
+}
 export interface IBaseFormStates {
     schema?: RJSFSchema;
     extraErrors?: any;
@@ -59,6 +63,8 @@ export interface IBaseFormProps {
  * It will be up to the user of this class to actually perform the creation/edit using syncdata.
  */
 export declare class BaseForm extends React.Component<IBaseFormProps, IBaseFormStates> {
+    /** Skip syncData for the initial onChange (RJSF populating form), only sync on user edits. */
+    private isInitialLoadRef;
     constructor(props: IBaseFormProps);
     componentDidUpdate(prevProps: IBaseFormProps, prevState: IBaseFormStates): void;
     componentDidMount(): void;

package/lib/formbuilder/objectform/baseform.js

@@ -9,13 +9,18 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { Slider } from '@jupyter/react-components';
 import { FormComponent } from '@jupyterlab/ui-components';
 import validatorAjv8 from '@rjsf/validator-ajv8';
 import * as React from 'react';
 import { deepCopy } from "../../tools";
+import { LayerSelect } from './components/LayerSelect';
+import OpacitySlider from './components/OpacitySlider';
 const WrappedFormComponent = props => {
-    const { fields } = props, rest = __rest(props, ["fields"]);
+    const rest = __rest(props, []);
+    const fields = {
+        opacity: OpacitySlider,
+        layerSelect: LayerSelect,
+    };
     return (React.createElement(FormComponent, Object.assign({}, rest, { validator: validatorAjv8, fields: Object.assign({}, fields) })));
 };
 /**
@@ -26,6 +31,8 @@ const WrappedFormComponent = props => {
 export class BaseForm extends React.Component {
     constructor(props) {
         super(props);
+        /** Skip syncData for the initial onChange (RJSF populating form), only sync on user edits. */
+        this.isInitialLoadRef = true;
         this.currentFormData = deepCopy(this.props.sourceData);
         this.state = {
             schema: props.schema,
@@ -37,6 +44,7 @@ export class BaseForm extends React.Component {
             this.currentFormData = deepCopy(this.props.sourceData);
             const schema = deepCopy(this.props.schema);
             this.setState(old => (Object.assign(Object.assign({}, old), { schema })));
+            this.isInitialLoadRef = true;
         }
     }
     componentDidMount() {
@@ -72,40 +80,7 @@ export class BaseForm extends React.Component {
             }
             if (k === 'opacity') {
                 uiSchema[k] = {
-                    'ui:field': (props) => {
-                        const [inputValue, setInputValue] = React.useState(props.formData.toFixed(1));
-                        React.useEffect(() => {
-                            setInputValue(props.formData.toFixed(1));
-                        }, [props.formData]);
-                        const handleSliderChange = (event) => {
-                            const target = event.target;
-                            if (target && '_value' in target) {
-                                const sliderValue = parseFloat(target._value); // Slider value is in 0–10 range
-                                const normalizedValue = sliderValue / 10; // Normalize to 0.1–1 range
-                                props.onChange(normalizedValue);
-                            }
-                        };
-                        const handleInputChange = (event) => {
-                            const value = event.target.value;
-                            setInputValue(value);
-                            const parsedValue = parseFloat(value);
-                            if (!isNaN(parsedValue) &&
-                                parsedValue >= 0.1 &&
-                                parsedValue <= 1) {
-                                props.onChange(parsedValue);
-                            }
-                        };
-                        return (React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' } },
-                            React.createElement(Slider, { min: 1, max: 10, step: 1, valueAsNumber: props.formData * 10, onChange: handleSliderChange }),
-                            React.createElement("input", { type: "number", value: inputValue, step: 0.1, min: 0.1, max: 1, onChange: handleInputChange, style: {
-                                    width: '50px',
-                                    textAlign: 'center',
-                                    border: '1px solid #ccc',
-                                    borderRadius: '4px',
-                                    padding: '4px',
-                                    marginBottom: '5px',
-                                } })));
-                    },
+                    'ui:field': 'opacity',
                 };
             }
             // Don't show readOnly properties when it's a form for updating an object
@@ -154,7 +129,12 @@ export class BaseForm extends React.Component {
             this.props.formErrorSignal.emit(extraErrors);
         }
         if (this.props.formContext === 'update') {
-            this.syncData(this.currentFormData);
+            if (!this.isInitialLoadRef) {
+                this.syncData(this.currentFormData);
+            }
+            else {
+                this.isInitialLoadRef = false;
+            }
         }
     }
     onFormBlur(id, value) {
@@ -191,7 +171,10 @@ export class BaseForm extends React.Component {
                             (_a = submitRef.current) === null || _a === void 0 ? void 0 : _a.click();
                         }
                     } },
-                    React.createElement(WrappedFormComponent, { schema: schema, uiSchema: uiSchema, formData: formData, onSubmit: this.onFormSubmit.bind(this), onChange: this.onFormChange.bind(this), onBlur: this.onFormBlur.bind(this), ok: this.props.ok, cancel: this.props.cancel, liveValidate: true, children: React.createElement("button", { ref: submitRef, type: "submit", style: { display: 'none' } }), extraErrors: this.state.extraErrors }))));
+                    React.createElement(WrappedFormComponent, { schema: schema, uiSchema: uiSchema, formData: formData, formContext: {
+                            model: this.props.model,
+                            formData,
+                        }, onSubmit: this.onFormSubmit.bind(this), onChange: this.onFormChange.bind(this), onBlur: this.onFormBlur.bind(this), ok: this.props.ok, cancel: this.props.cancel, liveValidate: true, children: React.createElement("button", { ref: submitRef, type: "submit", style: { display: 'none' } }), extraErrors: this.state.extraErrors }))));
         }
     }
 }

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

@@ -0,0 +1,7 @@
+import { FieldProps } from '@rjsf/utils';
+import React from 'react';
+/**
+ * Simple select populated with layers (valid types only).
+ * Used as the targetLayer field inside layerOverride array items.
+ */
+export declare function LayerSelect(props: FieldProps): React.JSX.Element | null;

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

@@ -0,0 +1,43 @@
+import React from 'react';
+function extractlayerOverrideIndex(idSchema) {
+    var _a;
+    const id = (_a = idSchema === null || idSchema === void 0 ? void 0 : idSchema.$id) !== null && _a !== void 0 ? _a : '';
+    const match = id.match(/layerOverride_(\d+)/);
+    return match ? parseInt(match[1], 10) : undefined;
+}
+/**
+ * Simple select populated with layers (valid types only).
+ * Used as the targetLayer field inside layerOverride array items.
+ */
+export function LayerSelect(props) {
+    var _a, _b, _c, _d, _e, _f;
+    const { idSchema, formContext, formData, onChange } = props;
+    const context = formContext;
+    const model = context === null || context === void 0 ? void 0 : context.model;
+    const fullFormData = (_a = context === null || context === void 0 ? void 0 : context.formData) !== null && _a !== void 0 ? _a : formData;
+    const arrayIndex = extractlayerOverrideIndex(idSchema !== null && idSchema !== void 0 ? idSchema : {});
+    const value = arrayIndex !== undefined && ((_b = fullFormData === null || fullFormData === void 0 ? void 0 : fullFormData.layerOverride) === null || _b === void 0 ? void 0 : _b[arrayIndex])
+        ? ((_c = fullFormData.layerOverride[arrayIndex].targetLayer) !== null && _c !== void 0 ? _c : '')
+        : '';
+    if (!model) {
+        return null;
+    }
+    const layerOverride = (_d = fullFormData === null || fullFormData === void 0 ? void 0 : fullFormData.layerOverride) !== null && _d !== void 0 ? _d : [];
+    const currentTargetLayer = arrayIndex !== undefined
+        ? (_f = (_e = fullFormData === null || fullFormData === void 0 ? void 0 : fullFormData.layerOverride) === null || _e === void 0 ? void 0 : _e[arrayIndex]) === null || _f === void 0 ? void 0 : _f.targetLayer
+        : undefined;
+    const usedTargetLayerIds = new Set(layerOverride
+        .filter((_, i) => i !== arrayIndex)
+        .map(override => override.targetLayer)
+        .filter(id => id !== undefined && id !== '')
+        .filter(id => id !== currentTargetLayer));
+    const availableLayers = model.getLayers();
+    const optionsList = Object.entries(availableLayers).filter(([layerId]) => !usedTargetLayerIds.has(layerId));
+    const handleChange = (e) => {
+        const newValue = e.target.value;
+        onChange(newValue === '' ? undefined : newValue);
+    };
+    return (React.createElement("select", { value: value !== null && value !== void 0 ? value : '', onChange: handleChange, style: { width: '100%' } },
+        React.createElement("option", { value: "" }, "Select a layer"),
+        optionsList.map(([layerId, layer]) => (React.createElement("option", { key: layerId, value: layerId }, layer.name.charAt(0).toUpperCase() + layer.name.slice(1))))));
+}

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

@@ -0,0 +1,4 @@
+import { FieldProps } from '@rjsf/utils';
+import React from 'react';
+declare function OpacitySlider({ formData, onChange }: FieldProps<number>): React.JSX.Element;
+export default OpacitySlider;