@sakuzu/maplibre-gl-draw-ui 1.2.0 → 1.3.0

package/CHANGELOG.md

@@ -7,6 +7,52 @@ follows semantic versioning.
 
 ## [Unreleased]
 
+## [1.3.0] - 2026-10-04
+
+From the review of the standard UI on kata 1.8: the map at a narrow
+width, the actions card, the attribution and a selection under a pane.
+
+### Added in 1.3.0
+
+- A selection of drawn features that the panes hide is revealed: when
+  its box on the screen is not inside the part of the map left visible
+  (the container less the panes, the bottom sheet, the toolbar's band
+  and the attribution), the map pans its centre there, without changing
+  the zoom. A selection made on the map is visible and does not move it
+  (#15).
+- At a narrow width the attribution comes folded to its (i) button and
+  the globe and compass controls are left out; zoom stays. A wide width
+  is unchanged (#23).
+
+### Changed in 1.3.0
+
+- Each action of the actions card is one pressable row (a kata
+  ListItem) with its name and its key at the end; the switch rows use
+  the same columns, so the keys line up (#16).
+- The attribution has the box of the corner controls in both forms: the
+  line of a control group, square corners, and the corner's margin, so
+  it no longer touches the map's edges or the toolbar (#18).
+- kata ^1.8.1: the panes show kata's scrollbar when they scroll, so a
+  layer pane above an open actions card shows that it scrolls (#20);
+  disabled shapes have no hue.
+
+### Fixed in 1.3.0
+
+- A layer panel or a legend mounted alone paints the panel's surface
+  and declares it, so what covers part of a row matches it.
+
+## [1.2.1] - 2026-10-02
+
+### Fixed in 1.2.1
+
+- In a sheet the inspector passes the sheet's height to its panel, so
+  the content scrolls and the foot stays in view (#14).
+- The delete button of the toolbar is off while the draw is read-only,
+  as the Delete of the inspector is (#19).
+- The bottom corners and the actions card write what their observers
+  measure in the next frame, so WebKit reports no ResizeObserver loop
+  (#21).
+
 ## [1.2.0] - 2026-10-02
 
 The narrow screen and the stage, from the visual review: the map's

package/README.md

@@ -257,6 +257,16 @@ the controls of the bottom right move out of its way instead (see
 [Map controls](#map-controls)). `padding: false` leaves the map's
 padding alone.
 
+When the selection of drawn features changes, the map pans once, after
+the panels have opened for it, so that the selection shows in the part
+of the map the interface leaves visible: the map less the left and the
+right panels, the sheets at the bottom, and the band of the toolbar
+and of the attribution's box. A selection already inside that part, as
+one clicked on the map is, does not move the map. The pan moves the
+centre only (`easeTo`): the zoom never changes, and a selection larger
+than that part is centred in it. A row of a dataset is not a selection
+of the draw instance and is left to the application.
+
 On the left, the layer panel and the legend share a panel, in two tabs.
 The layer panel has two sections, Stack and Basemap. Stack is the tree
 of the layers, their groups and their features, from the front, with
@@ -296,6 +306,9 @@ const ui = createDrawUI(draw, {
 
 Each goes alone into an element with
 `createLayerPanel(draw, { target })` and `createLegend(draw, { target })`.
+Alone, its root element paints the surface of a panel
+(`--kata-color-panel`) and declares it (`--kata-color-surface`), as the
+panel of the left region does around them.
 
 A tool for a mode of your own (added with `draw.extensions.modes.add`):
 
@@ -381,7 +394,11 @@ maplibre-gl's control container (`.maplibregl-control-container`) has
 `data-color-mode` of the root. The groups of buttons, the lines between
 them, the attribution and the scale are painted with the tokens, and
 maplibre-gl's icons, which are dark images, are inverted in the dark
-look (`filter: invert(1)`). Set the tokens on
+look (`filter: invert(1)`). The attribution is a box as the groups
+are, in both of maplibre-gl's forms (the wide band and the compact one):
+square, with their line, and at the bottom right the margin of the
+other controls of that corner (10px from the right and from the
+bottom). Set the tokens on
 `[data-mgd-ui-controls]` to change their look. `destroy()` removes both
 attributes.
 
@@ -401,11 +418,12 @@ action of the application (see [Actions](#actions)).
 ### Actions
 
 An action of the application, such as saving the drawing or turning a
-setting on and off, is a row of a card at the bottom left of the map,
-above maplibre-gl's scale and, where its box reaches the card across, the
-attribution: a switch (`kind: 'toggle'`) or a button
-(`kind: 'action'`), with its key at the end. A press on the row and its
-key both call `run`; a switch shows what `checked` returns, read again
+setting on and off, is a row of the list in a card at the bottom left of
+the map, above maplibre-gl's scale and, where its box reaches the card
+across, the attribution: its name and a switch (`kind: 'toggle'`), or
+its name in a row pressed as one button (`kind: 'action'`), with its key
+at the end of the row, so that the keys line up. A press on the row and
+its key both call `run`; a switch shows what `checked` returns, read again
 after each run and on `ui.actions.refresh()`, so the state stays with
 the application. `disabled` dims the row and turns its key off, and
 `hint` is a caption under it. The keys are listed with `?` under the
@@ -505,6 +523,16 @@ also resets the pitch) and the zoom; at the bottom left, the scale
 maplibre-gl's style sheet, which the page imports itself
 (`import 'maplibre-gl/dist/maplibre-gl.css'`).
 
+On a narrow map (below 48rem, kata's Shell's narrow) the globe and the
+compass are left out, and only the zoom stays; they come back above it
+on a wider map. The attribution of a narrow map is folded to its (i)
+button: maplibre-gl builds its compact attribution open (until the
+first drag), and each time it does so (when the attribution first
+fills, when the map's width brings the compact form back, or when the
+page adds it again) the interface folds it, as maplibre-gl's own fold
+on a drag does. The (i) button opens it. Wider maps are left as they
+are. With `mapControls: false` the attribution is left alone too.
+
 ```ts
 const ui = createDrawUI(draw, {
   mapControls: { globe: false, scale: true }, // or false for none
@@ -519,10 +547,10 @@ bottom corners of the map are kept clear of the interface:
   toolbar
 - while the right panel covers the bottom right of the map, the controls
   there (not the attribution) move to the left of it, gap-md apart
-- where the attribution's box reaches the scale across, as the two-line
-  attribution of a narrow map does, the bottom left corner is lifted
-  above it. The attribution is only read; its compact form is
-  maplibre-gl's own
+- where the attribution's box reaches the scale across, as a two-line
+  attribution does, the bottom left corner is lifted above it, but on a
+  narrow map, where the attribution is folded: the band its (i) button
+  opens is not lifted for
 
 These are the rules of the style sheet outside the root element: they
 apply to the map's container while the interface is on it.

package/dist/controls.d.ts

@@ -5,10 +5,16 @@ import type { MapControlsOptions } from './types.js';
 export interface ControlsMap {
     addControl(control: IControl, position?: ControlPosition): unknown;
     removeControl(control: IControl): unknown;
+    getContainer(): HTMLElement;
 }
-/** The controls added to a map, to remove */
+/** The controls added to a map, to follow the shell's narrow and to remove */
 export interface MapControls {
-    /** Removes the controls from the map. A second call does nothing */
+    /**
+     * Follows the shell's narrow: on a narrow map, removes the globe and the compass and folds the
+     * attribution; on a wider one, adds the globe and the compass back
+     */
+    setNarrow(narrow: boolean): void;
+    /** Removes the controls from the map and stops following the attribution. A second call does nothing */
     destroy(): void;
 }
 /**
@@ -16,7 +22,15 @@ export interface MapControls {
  * those not set to false with an object.
  *
  * maplibre-gl puts a control added to a bottom corner above those already there, so the controls
- * of the bottom right are added from the bottom: the zoom, the compass, then the globe.
+ * of the bottom right are added from the bottom: the zoom, the compass, then the globe. The globe
+ * and the compass come back the same way, above the zoom.
+ *
+ * While the map is narrow (`setNarrow`), the globe and the compass are removed, and the
+ * attribution is folded to its (i) button: maplibre-gl builds its compact attribution open (until
+ * the first drag), when it first fills, when the map's width brings the compact form back, and
+ * when a page adds it again; each time, its open class is removed, as maplibre-gl's own fold on a
+ * drag does. The (i) button opens it still. With `false`, nothing is added and the attribution is
+ * left alone.
  */
 export declare function mapControls(map: ControlsMap, option: boolean | MapControlsOptions | undefined): MapControls;
 /** The attribute on the map's container while the interface lifts its bottom corners */
@@ -25,9 +39,9 @@ export declare const LIFT_ATTRIBUTE = "data-mgd-ui-lift";
 export interface CornerLift {
     /**
      * Measures again after the toolbar came, went or changed, or the regions of the shell moved;
-     * with the inset the shell reported, which is kept until the next one
+     * with the inset the shell reported and whether it is narrow, which are kept until the next ones
      */
-    update(inset?: ShellInset): void;
+    update(inset?: ShellInset, narrow?: boolean): void;
     /** Stops following and puts the corners back */
     destroy(): void;
 }
@@ -44,9 +58,12 @@ export interface CornerLift {
  *   while the right region covers the stage (the inset's right) and they are under it up and
  *   down: by the inset and gap-md
  * - --mgd-ui-lift-left also lifts the bottom left corner above the attribution's box while that
- *   box reaches the corner across
+ *   box reaches the corner across, but on a narrow map: there the attribution is folded to its
+ *   (i) button (mapControls), and the band the button opens is not lifted for
  *
  * The boxes are measured where maplibre-gl places them, without what this moved. The attribution
- * and the right region are followed with a ResizeObserver, as the toolbar and the corners are.
+ * and the right region are followed with a ResizeObserver, as the toolbar and the corners are:
+ * the boxes are read in the observer's delivery and the custom properties are written in the next
+ * frame, so that what they move is not measured again in the same delivery.
  */
 export declare function cornerLift(container: HTMLElement, root: HTMLElement): CornerLift;

package/dist/index.d.ts

@@ -33,12 +33,15 @@ export type { ActionSpec, ActionsHandle, AloneOptions, Basemap, BasemapOptions,
  * inspector on the right while something is selected. The map's padding follows the interface:
  * the room the left panel takes (beside the map or floating over it) at the left and the sheets
  * at the bottom, so that `fitBounds` and `easeTo` keep clear of them; `destroy()` gives the map
- * its padding back. The last section of the layer panel is the basemap, whose row opens the
+ * its padding back. When the selection of drawn features changes, the map pans once (the zoom
+ * stays) so that it shows clear of the panels, the sheets, the toolbar and the attribution,
+ * unless it shows there already. The last section of the layer panel is the basemap, whose row opens the
  * basemaps of `options.basemaps` to choose from on the right, in the place of the inspector, when
  * there are two or more. A button at the top right switches between the
  * light and the dark look, and maplibre-gl's own controls go to the bottom corners of the map (the
  * globe, the compass and the zoom at the right, the scale at the left), which move out of the way
- * of the toolbar, the right panel and the attribution; `destroy()` removes them. The actions of
+ * of the toolbar, the right panel and the attribution; a narrow map (below 48rem) shows no globe
+ * and no compass, and its attribution folded to its (i) button; `destroy()` removes them. The actions of
  * the application (`options.actions`, `ui.actions`) are rows of a card at the bottom left, above
  * the scale and the attribution, each with its key.
  *