@gramlot/gramlot-examples 0.3.7 → 0.3.8

package/README.md

@@ -12,7 +12,7 @@ npm install @gramlot/gramlot-examples
 [![PyPI](https://img.shields.io/pypi/v/gramlot-examples)](https://pypi.org/project/gramlot-examples/)
 [![npm](https://img.shields.io/npm/v/@gramlot/gramlot-examples)](https://www.npmjs.com/package/@gramlot/gramlot-examples)
 
-Current release: 0.3.7.
+Current release: 0.3.8.
 
 [Documentation and learning sequence](https://gramlot-examples.readthedocs.io/en/latest/)
 include every lesson, its Python and JavaScript source, and the gallery guide.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gramlot/gramlot-examples",
-  "version": "0.3.7",
+  "version": "0.3.8",
   "description": "Gramlot example pages, the gallery page and its catalogue.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
     "prepack": "node scripts/build-browser.mjs"
   },
   "dependencies": {
-    "@gramlot/gramlot": ">=0.3.4"
+    "@gramlot/gramlot": ">=0.3.5"
   },
   "devDependencies": {
     "@genrojs/bag": ">=0.11.0",

package/src/gramlot_examples/gallery/dist/inputs.js

@@ -24299,6 +24299,19 @@ var rangeParameters = {
 };
 function rangeEditor(vertical) {
   return (Base) => class extends Base {
+    #sourceContext;
+    #correcting = false;
+    setSourceContext(context) {
+      this.#sourceContext = context;
+    }
+    projectAttributes(attrs, adapt) {
+      const previous = this.parameters;
+      const rest = super.projectAttributes(attrs, adapt);
+      if (previous && ["min", "max", "step"].some((name) => previous[name] !== this.parameters[name])) {
+        this.writeControlValue(this.parameters.value);
+      }
+      return rest;
+    }
     createControl() {
       const control = this.ownerDocument.createElement("input");
       control.type = "range";
@@ -24312,7 +24325,16 @@ function rangeEditor(vertical) {
       return this.control.valueAsNumber;
     }
     writeControlValue(value) {
-      if (this.control.valueAsNumber !== value) this.control.value = String(value);
+      this.control.value = String(value);
+      const corrected = this.control.valueAsNumber;
+      if (!this.#correcting && Number.isFinite(value) && Number.isFinite(corrected) && corrected !== value) {
+        this.#correcting = true;
+        try {
+          this.#sourceContext.writeParameter("value", corrected);
+        } finally {
+          this.#correcting = false;
+        }
+      }
     }
   };
 }
@@ -24322,6 +24344,7 @@ var HorizontalSlider = defineComponent({
   base: NativeControl,
   mixins: [Labelbox, FieldState],
   parameters: rangeParameters,
+  sourceContext: true,
   implementation: rangeEditor(false)
 });
 var VerticalSlider = defineComponent({
@@ -24330,6 +24353,7 @@ var VerticalSlider = defineComponent({
   base: NativeControl,
   mixins: [Labelbox, FieldState],
   parameters: rangeParameters,
+  sourceContext: true,
   implementation: rangeEditor(true)
 });
 var NumberTextBox = defineComponent({

package/src/gramlot_examples/pages/layout/05_nested_lab.md

@@ -21,11 +21,17 @@ Finally, try the design and corner-radius controls. These change presentation wh
 The slider and the region both use a plain pointer to the same number. Numeric region widths and heights are pixels; the borderContainer converts them to CSS internally. Dragging the splitter writes back the constrained number through the binding, so the slider follows immediately.
 
 ```python
-sliders.horizontalSlider(value="^regions.outer.left", min=90, max=240, live=True)
+sliders.horizontalSlider(value="^regions.outer.left", min=90, max=240, step=1, live=True)
 nav = outer.borderContainer(region="left", width="^regions.outer.left",
                             splitter=True, minSize=90, maxSize=240)
 ```
 
+Each size slider uses `step=1`. It also corrects numbers received through the binding:
+a fractional splitter measurement such as `176.73` becomes `177` in Data, then the
+panel and label follow that same value. In Inspector, set `regions.outer.left`
+to `176.73` and observe it settle at `177`. The slider writes only when correction
+is needed; a number already on the step grid is not written again.
+
 There is no formatting suffix or synchronization controller. `regions` is just the Data branch chosen by this example; it is not a special container parameter. You can find all seven shared size bindings in **Code**.
 
 The nested containers still have a simple responsibility: each lays out its own immediate children. The outer container does not calculate the positions of every field inside the editor.