@sakuzu/maplibre-gl-draw-ui 1.1.0 → 1.2.1

package/CHANGELOG.md

@@ -7,6 +7,74 @@ follows semantic versioning.
 
 ## [Unreleased]
 
+## [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
+padding and its controls follow the panes kata's Shell reports, the
+actions card stands above the attribution and fits the map, the
+inspector takes the width of its sheet and keeps its tabs in the head,
+Delete has one place, maplibre-gl's controls follow the theme, and every
+dataset is dragged among the layers. It reads kata 1.6.0.
+
+### Added in 1.2.0
+
+- maplibre-gl's controls in the map's container, those of the
+  application too, follow the theme of `createDrawUI` (#10). The control
+  container (`.maplibregl-control-container`) has `data-mgd-ui-controls`,
+  to which the build moves kata's tokens as it does to `.mgd-ui`, and
+  the `data-color-mode` of the root, following `setTheme` and the
+  system; `destroy()` removes both. The groups of buttons, the lines
+  between them, the attribution and the scale are painted with the
+  tokens, and maplibre-gl's icons are inverted in the dark look.
+
+### Changed in 1.2.0
+
+- Every dataset is dragged among the layers in the layer panel (#6). A
+  dataset of `above-store` or `below-store` dropped among the layers is
+  moved to `layer-order` (`datasets.move`) and placed with
+  `layers.reorder`; when the reorder is refused, it goes back to its
+  own order. `LayerPanelDraw` needs `datasets.move`.
+- The map's padding follows the inset of kata's Shell (`onlayout`)
+  (#8): at the left, the room the left pane takes, beside the map or
+  floating over it with its gap; at the bottom, the height of the
+  sheets. The right pane, which opens with the selection, and the
+  toolbar are no longer padding, so the view does not jump on a
+  selection.
+- The controls of the bottom right of the map (not the attribution)
+  move to the left of the right pane, gap-md apart, while they would be
+  under it, and the bottom left corner (the scale) rises above the
+  attribution's box where that box reaches it across, as the two-line
+  attribution of a narrow map does (#8). The attribution is only read;
+  its compact form stays maplibre-gl's own.
+- The actions card stands above the higher of the scale and the
+  attribution's box where that box reaches the card across (#7). Its
+  height is capped to the map above its place, less gap-md at the top
+  and the button that opens the layer panel again while it shows, and
+  the whole card scrolls.
+- In a sheet, on a narrow map, the inspector takes the width of the
+  sheet instead of the width of a panel (#9). The inspector of a feature
+  passes its tabs to kata's InspectorFrame, so they stay in the head
+  while the content scrolls; its measurements are under the head, and
+  its description starts the content of each tab.
+- Delete is in the lead of the foot for several features, layers or
+  groups, as for one feature, instead of among the operations (#11).
+- kata 1.6.0: the Footer of an inspector stacks only when its row does
+  not fit, a sheet's half stage is the content's height, a narrow map
+  opens one side sheet at a time, and the actions of a row of the layer
+  panel that show on hover take no room until the row is hovered.
+
 ## [1.1.0] - 2026-10-01
 
 The basemaps as the back of the stack in the layer panel, the datasets

package/README.md

@@ -247,10 +247,15 @@ Each switch writes `draw.options.update`, and the settings follow
 `options.changed`, so a change made by code shows too.
 The side panels float over the map, gap-md from its edges and as tall
 as their content; `side: 'beside'` docks them beside the map on a wide
-one instead. The map's padding follows the interface, the width of a
-panel that stands beside the map and the toolbar's height at the bottom,
-so that `fitBounds` and `easeTo` keep clear of them; `padding: false`
-leaves the map's padding alone.
+one instead. The map's padding follows the interface: at the left, the
+room the left panel takes (beside the map, or floating over it with its
+gap), and at the bottom, the height of the sheets of a narrow map, as
+kata's Shell reports them (`onlayout`'s inset), so that `fitBounds` and
+`easeTo` keep clear of them. The right panel opens and closes with the
+selection and leaves the padding alone, so that the view does not jump;
+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.
 
 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
@@ -269,9 +274,11 @@ among the layers: those of `above-store` in front of every layer, those
 of `layer-order` where `layers.getOrder()` places them, and those of
 `below-store` behind every layer. A dataset row shows its ID (core gives
 a dataset no name), with the eye (`setVisible`) and no lock; a press on
-it leaves the selection as it is, and it is dragged among the layers
-only when its order is
-`layer-order`. Basemap, under it, is the back of the stack (see
+it leaves the selection as it is. Every dataset is dragged among the
+layers: one of `above-store` or `below-store` dropped there is moved to
+`layer-order` (`draw.datasets.move`) and placed where it was dropped
+(`draw.layers.reorder`), and goes back to its own order when the reorder
+is refused. Basemap, under it, is the back of the stack (see
 [Basemaps](#basemaps)). The legend shows the rows of the style rule
 (`styleRule`) of each layer and of each dataset that has one, in the
 order of the stack.
@@ -306,15 +313,18 @@ ui.tools.add({
 
 The inspector is the panel on the right of `createDrawUI`. It opens
 while something is selected and closes, clearing the selection, with its
-close button. For one feature it shows its name (`properties.name`,
-changed where it stands); under it, its measurements and its description
-(`properties.description`, changed where it stands); then a Style tab
-with the fields its type reads and an Attributes tab with its other
-attributes. Several features
+close button. On a narrow map it is a sheet from the bottom, as wide as
+the map. For one feature it shows its name (`properties.name`, changed
+where it stands); under it, its measurements, and the tabs, which stay
+while the content scrolls: a Style tab with the fields its type reads
+and an Attributes tab with its other attributes. The content of each tab
+starts with its description (`properties.description`, changed where it
+stands). Several features
 show the fields they share, a field whose values differ being mixed, and
 the operations that apply to them (union, intersection, difference,
 split and buffer). A layer and a group show their name, whether they are
-visible and whether they are locked.
+visible and whether they are locked. Delete is at the start of the foot
+of every inspector, for one feature and for several things selected.
 
 ```ts
 const ui = createDrawUI(draw, {
@@ -354,15 +364,27 @@ ui.inspector?.sections.add({
 ## Customize
 
 Everything the interface draws is inside its root element, which has the
-class `mgd-ui`, and its style sheet reaches nothing outside it. kata's
-tokens (the CSS custom properties `--kata-*`) are set on that element;
-set them on `.mgd-ui` to change the look. The `theme` option of
+class `mgd-ui`, and its style sheet reaches nothing outside it but
+maplibre-gl's controls of the map (see [Map controls](#map-controls)).
+kata's tokens (the CSS custom properties `--kata-*`) are set on that
+element; set them on `.mgd-ui` to change the look. The `theme` option of
 `createDrawUI` and of each part put alone is `light`, `dark` or `auto`
 (the default, which follows the system's `prefers-color-scheme` as it
 changes), and `ui.setTheme` changes it. kata's theme is dark;
 `data-color-mode="light"` on the root element, which `light` sets, or on
 any element around it, turns it light.
 
+maplibre-gl's controls in the map's container, those of the application
+too, follow the theme of `createDrawUI`: while it is on the map,
+maplibre-gl's control container (`.maplibregl-control-container`) has
+`data-mgd-ui-controls`, which takes kata's tokens, and the
+`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
+`[data-mgd-ui-controls]` to change their look. `destroy()` removes both
+attributes.
+
 A button at the top right of the map switches the look: a sun while it
 is dark, a moon while it is light. It sets the theme to the look that is
 not shown, so from `auto` it keeps the one the system does not prefer;
@@ -380,7 +402,8 @@ action of the application (see [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: a switch (`kind: 'toggle'`) or a button
+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
 after each run and on `ui.actions.refresh()`, so the state stays with
@@ -392,7 +415,10 @@ and Shift+L) or another action uses is refused with an error. The card
 shows while there is an action, its head folds it into one button, and
 on a map narrower than 48rem it starts folded; where it would reach the
 toolbar across, it stands above the toolbar, and the layer panel
-floating at the left ends above it. Its title is `actionsTitle`, or the
+floating at the left ends above it. The card is no taller than the map
+above its place, less gap-md at the top and the button that opens the
+layer panel again while it shows; the whole card scrolls when its rows
+do not fit. Its title is `actionsTitle`, or the
 word for actions of the locale.
 
 ```ts
@@ -485,12 +511,21 @@ const ui = createDrawUI(draw, {
 });
 ```
 
-A page that adds controls of its own passes `mapControls: false`. Where
-the toolbar reaches a bottom corner of the map across, as on a narrow
-map, that corner (its controls and the attribution) is lifted above the
-toolbar. This is the one rule of the style sheet outside the root
-element: it applies to the map's container while the interface is on
-it.
+A page that adds controls of its own passes `mapControls: false`. The
+bottom corners of the map are kept clear of the interface:
+
+- where the toolbar reaches a bottom corner across, as on a narrow map,
+  that corner (its controls and the attribution) is lifted above the
+  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
+
+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.
 
 ## Development
 

package/dist/controls.d.ts

@@ -1,4 +1,5 @@
 import { type ControlPosition, type IControl } from 'maplibre-gl';
+import type { ShellInset } from './padding.js';
 import type { MapControlsOptions } from './types.js';
 /** The members of the map the controls use */
 export interface ControlsMap {
@@ -20,17 +21,34 @@ export interface MapControls {
 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 */
 export declare const LIFT_ATTRIBUTE = "data-mgd-ui-lift";
-/** The bottom corners of the map, lifted above the toolbar while it reaches them */
+/** The bottom corners of the map, kept clear of the interface and of the attribution */
 export interface CornerLift {
-    /** Measures again after the toolbar came, went or changed */
-    update(): void;
+    /**
+     * 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
+     */
+    update(inset?: ShellInset): void;
     /** Stops following and puts the corners back */
     destroy(): void;
 }
 /**
- * Lifts the bottom corners of maplibre-gl's controls in `container` (the map's container) above
- * the toolbar of the interface in `root`, each while the toolbar reaches it across: by the
- * distance from the top of the toolbar to the bottom of the map. root.css moves the corners by
- * the custom properties this sets on the container (--mgd-ui-lift-left and --mgd-ui-lift-right).
+ * Keeps the bottom corners of maplibre-gl's controls in `container` (the map's container) clear
+ * of the interface in `root` and of the attribution. root.css moves them by the custom properties
+ * this sets on the container:
+ *
+ * - --mgd-ui-lift-left and --mgd-ui-lift-right lift a corner above the toolbar while the toolbar
+ *   reaches it across, by the distance from the top of the toolbar to the bottom of the map; the
+ *   controls of the bottom right moved to the left (below) count as reaching it where they are
+ *   moved to
+ * - --mgd-ui-shift-right moves the controls of the bottom right, not the attribution, to the left
+ *   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
+ *
+ * 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:
+ * 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

@@ -31,15 +31,16 @@ export type { ActionSpec, ActionsHandle, AloneOptions, Basemap, BasemapOptions,
  *
  * It draws the toolbar, the shortcuts, the layer panel and the legend on the left, and the
  * inspector on the right while something is selected. The map's padding follows the interface:
- * the width of a panel that stands beside the map (on a wide container) and the toolbar's height
+ * 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
  * 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); `destroy()` removes them.
- * The actions of the application (`options.actions`, `ui.actions`) are rows of a card at the
- * bottom left, above the scale, each with its key.
+ * 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
+ * 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.
  *
  * @param draw - The draw instance
  * @param options - What to show, the words and the keys