maplibre-gl-layer-control 0.17.2 → 0.17.4

package/dist/maplibre-gl-layer-control.css

@@ -665,6 +665,7 @@
 
 .style-editor-actions {
   display: flex;
+  flex-wrap: wrap;
   gap: 8px;
   justify-content: flex-end;
   padding-top: 8px;
@@ -672,8 +673,8 @@
 }
 
 .style-editor-button {
-  padding: 8px 16px;
-  min-width: 70px;
+  padding: 8px 12px;
+  min-width: 60px;
   border: 1px solid #ddd;
   border-radius: 3px;
   background: white;
@@ -694,43 +695,15 @@
   background: #e0e0e0;
 }
 
-.layer-control-style-editor .style-editor-button-reset {
-  background: #fb923c !important;
-  color: #ffffff !important;
-  border-color: #f97316 !important;
-  font-weight: 600;
-}
-
-.layer-control-style-editor .style-editor-button-reset:hover {
-  background: #f97316 !important;
-  border-color: #ea580c !important;
-  color: #ffffff !important;
-}
-
-.layer-control-style-editor .style-editor-button-close {
-  background: #6b7280 !important;
-  color: #ffffff !important;
-  border-color: #4b5563 !important;
-  font-weight: 600;
-}
-
-.layer-control-style-editor .style-editor-button-close:hover {
-  background: #4b5563 !important;
-  border-color: #374151 !important;
-  color: #ffffff !important;
-}
-
-.layer-control-style-editor .style-editor-button-remove {
-  background: #ef4444 !important;
-  color: #ffffff !important;
-  border-color: #dc2626 !important;
-  font-weight: 600;
-}
-
+/* The Reset / Remove / Close action buttons share the neutral base style above.
+   They intentionally drop the former orange/gray/red fills: consuming apps
+   reserve those signal colors for warnings and errors, so a standard action
+   button should not emit them. The destructive Remove action is confirmed via
+   an inline prompt and only hints its nature with a restrained red on hover. */
 .layer-control-style-editor .style-editor-button-remove:hover {
-  background: #dc2626 !important;
-  border-color: #b91c1c !important;
-  color: #ffffff !important;
+  background: #fef2f2;
+  border-color: #fca5a5;
+  color: #b91c1c;
 }
 
 /* ===== Background Legend Panel ===== */

package/dist/types/index.d.ts

@@ -280,6 +280,7 @@ export declare class LayerControl implements IControl {
     private onLayerRename?;
     private onLayerReorder?;
     private onLayerRemove?;
+    private onLayerStyleChange?;
     private onBackgroundVisibilityChange?;
     private onBackgroundOpacityChange?;
     private enableBackgroundPresets;
@@ -642,6 +643,32 @@ export declare class LayerControl implements IControl {
      * Add controls for symbol layers
      */
     private addSymbolControls;
+    /**
+     * Notify the host that a paint property changed through the style editor.
+     * Reports the layer the active style editor belongs to (`activeStyleEditor`),
+     * not the internal native sub-layer id a control may edit, so consumers can
+     * map the change back to their own layer model.
+     */
+    private notifyLayerStyleChange;
+    /**
+     * Re-read an open style editor's controls from the current map paint so they
+     * reflect changes made elsewhere (e.g. an external sidebar writing the same
+     * paint properties). Setting input `.value` programmatically does not
+     * dispatch an `input` event, so this never re-triggers
+     * {@link LayerControlOptions.onLayerStyleChange}. The control the user is
+     * actively dragging (the focused input) is left untouched so the refresh
+     * does not fight an in-progress drag.
+     *
+     * @param layerId Restrict the refresh to one layer's editor. Defaults to the
+     *   currently active editor. No-op when that editor is not open.
+     */
+    refreshStyleEditor(layerId?: string): void;
+    /**
+     * Update every slider/color control in a style editor from the layer's
+     * current map paint. Each control records the layer it reads from in
+     * `dataset.layerId` (see createSliderControl/createColorControl).
+     */
+    private syncStyleEditorControlsFromMap;
     /**
      * Create a color control
      */
@@ -820,6 +847,17 @@ export declare interface LayerControlOptions {
     onLayerReorder?: (layerOrder: string[]) => void;
     /** Callback when a layer is removed via context menu */
     onLayerRemove?: (layerId: string) => void;
+    /**
+     * Callback fired whenever a paint property is changed through the per-layer
+     * style editor (a slider/color input, or the Reset button). Reports the
+     * layer the open style editor belongs to (`layerId`), the MapLibre paint
+     * property name (e.g. `"raster-brightness-max"`, `"fill-color"`), and the new
+     * value (a number for sliders, a hex string for color pickers). Lets
+     * consumers mirror the change into their own store so external style UI
+     * (e.g. a separate sidebar) stays in sync. The control still applies the
+     * change to the map itself; this callback is purely a notification.
+     */
+    onLayerStyleChange?: (layerId: string, property: string, value: unknown) => void;
     /**
      * Callback fired when the Background (basemap) group visibility is toggled
      * via the control's checkbox. Lets consumers mirror the new state into their

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "maplibre-gl-layer-control",
-  "version": "0.17.2",
+  "version": "0.17.4",
   "description": "A comprehensive layer control for MapLibre GL with advanced styling capabilities",
   "type": "module",
   "main": "./dist/index.cjs",