@gramlot/gramlot-examples 0.3.6 → 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.6.
+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.6",
+  "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.3"
+    "@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/gallery/dist/layout.js

@@ -253,7 +253,7 @@ var SIDES = ["top", "bottom", "left", "right"];
 var REGIONS = [...SIDES, "center"];
 var borderRegions = /* @__PURE__ */ new WeakMap();
 var horizontal = (side) => side === "top" || side === "bottom";
-function projectBorderChild(element, attrs, { adapt, invoke, publish, publishParent }) {
+function projectBorderChild(element, attrs, { adapt, invoke, publish, publishParent, writeParameter }) {
   const rest = { ...attrs }, splitter = {}, drawer = {};
   for (const [name, value] of Object.entries(rest)) {
     for (const [prefix, group] of [["splitter_", splitter], ["drawer_", drawer]]) {
@@ -272,7 +272,15 @@ function projectBorderChild(element, attrs, { adapt, invoke, publish, publishPar
   if (![void 0, null, false, true, "close"].includes(rest.drawer)) throw new TypeError("drawer must be true, false or close");
   const probe = element.ownerDocument.createElement("div");
   probe.style.cssText = rest.style ?? "";
-  const size = probe.style[horizontal(region) ? "height" : "width"];
+  const dimension = horizontal(region) ? "height" : "width";
+  const numeric = typeof rest[dimension] === "number";
+  if (numeric) {
+    if (!Number.isFinite(rest[dimension]) || rest[dimension] < 0) throw new TypeError("Border numeric dimensions must be finite nonnegative pixels");
+    probe.style[dimension] = `${rest[dimension]}px`;
+  }
+  const size = probe.style[dimension];
+  delete rest.width;
+  delete rest.height;
   probe.style.width = "100%";
   probe.style.height = "100%";
   rest.style = probe.style.cssText;
@@ -297,6 +305,9 @@ function projectBorderChild(element, attrs, { adapt, invoke, publish, publishPar
     label,
     icon,
     minimize,
+    writeParameter: (size2) => {
+      if (numeric) writeParameter(dimension, size2);
+    },
     notifications: {
       closableChange: (payload) => publish("closable_change", payload),
       splitterResize: (payload) => publishParent("splitter_resize", payload)
@@ -334,7 +345,7 @@ var BorderContainer = defineComponent({
   tag: "gramlot-border-container",
   base: Container,
   subTags: "*",
-  childParameters: { region: { required: true, enum: REGIONS, unique: true }, drawer_onclick: { inline: ["evt", "show"] } },
+  childParameters: { region: { required: true, enum: REGIONS, unique: true }, width: {}, height: {}, drawer_onclick: { inline: ["evt", "show"] } },
   parameters: {
     design: { dtype: "T", default: "headline", binding: "read", enum: ["headline", "sidebar"] },
     persist: { dtype: "B", default: false, binding: "read" }
@@ -636,6 +647,7 @@ var BorderContainer = defineComponent({
       const size = Math.max(Math.min(c.min, available), Math.min(desired, c.max, available));
       state.size = `${size}px`;
       this.#render(side);
+      c.writeParameter(size);
     }
     #keyResize(side, evt) {
       const state = this.#regions.get(side);

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

@@ -82,7 +82,7 @@ export class Page extends BasePage {
         });
         const header = outer.contentPane({
             region: 'top',
-            height: '^regions.outer.top:{}px',
+            height: '^regions.outer.top',
             minSize: 40,
             maxSize: 110,
             drawer_label: 'Header',
@@ -94,7 +94,7 @@ export class Page extends BasePage {
         header.span('^customer');
         const footer = outer.contentPane({
             region: 'bottom',
-            height: '^regions.outer.bottom:{}px',
+            height: '^regions.outer.bottom',
             minSize: 35,
             maxSize: 130,
             drawer_label: 'Status',
@@ -107,7 +107,7 @@ export class Page extends BasePage {
         const nav = outer.borderContainer({
             id: 'lab-navigation',
             region: 'left',
-            width: '^regions.outer.left:{}px',
+            width: '^regions.outer.left',
             minSize: 90,
             maxSize: 240,
             drawer_label: 'Navigation',
@@ -129,7 +129,7 @@ export class Page extends BasePage {
         const details = outer.borderContainer({
             id: 'lab-details',
             region: 'right',
-            width: '^regions.outer.right:{}px',
+            width: '^regions.outer.right',
             minSize: 90,
             maxSize: 240,
             drawer_label: 'Details',
@@ -159,7 +159,7 @@ export class Page extends BasePage {
         });
         const tools = work.contentPane({
             region: 'left',
-            width: '^regions.workspace.left:{}px',
+            width: '^regions.workspace.left',
             minSize: 70,
             maxSize: 200,
             drawer_label: 'Tools',
@@ -172,7 +172,7 @@ export class Page extends BasePage {
         tools.checkbox({ value: '^readonly', lbl: 'Editor', label: 'Read only' });
         const preview = work.contentPane({
             region: 'bottom',
-            height: '^regions.workspace.bottom:{}px',
+            height: '^regions.workspace.bottom',
             minSize: 50,
             maxSize: 180,
             drawer_label: 'Preview',
@@ -213,7 +213,7 @@ export class Page extends BasePage {
         fields.numberTextBox({ id: 'lab-quantity', value: '^quantity', lbl: 'Quantity', width: '100%' });
         const notes = editor.contentPane({
             region: 'bottom',
-            height: '^regions.editor.bottom:{}px',
+            height: '^regions.editor.bottom',
             minSize: 60,
             maxSize: 180,
             drawer_label: 'Notes',

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

@@ -8,6 +8,8 @@ If the page looks complicated at first, start with just one slider. You do not n
 
 Move one region-size slider a little, then back again. Follow the boundary that moves. Does it belong to the outer workspace, or to a layout inside it? Repeat with a slider for a different level.
 
+Next, drag the same separator. Its slider moves immediately: both controls update the same number. Open the Inspector on Data to follow `regions.outer.left` while moving either the Navigation width slider or its separator. Try a nested region too.
+
 Now enter a customer name and a note. Change a date or delivery option too. Look for the places where those values are repeated. They are views of shared Data, not separate copies of the customer.
 
 Move the sliders again. The regions become wider, narrower, taller or shorter while your edits remain. Close one drawer, rearrange another area, and reopen it. Hiding a panel has not discarded its contents.
@@ -16,7 +18,21 @@ Finally, try the design and corner-radius controls. These change presentation wh
 
 ## How a number becomes a size
 
-A slider produces a number. A region width needs a size such as 180px. The example connects them with a pointer template: it reads the slider's Data value and adds the unit. You can find these declarations by looking for the region-size paths in **Code**.
+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, 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.