@kupcad/ui 0.1.2 → 0.1.4

package/README.md

@@ -154,7 +154,10 @@ webview and the desktop app to the language server.
   Edges, Axes, Grid and Plate toggles; Fit, Persp, and the Iso, Top, Front and Right views, the
   one looked from pressed, a turn by hand pressing none), the model's parts in its bottom half,
   each with its colour and copies (a click on one selects its copies, as a click in the viewer
-  does: `bind:selected`). A bar above: a section through the model along an axis (a solid's: a drawing, which isn't cut, or no model offers none), screenshot, an
+  does: `bind:selected`). In a pane narrower than 36em (a phone's) the panel is under the model,
+  at most half the pane. The model fills what the rest leave, no less than
+  `--kc-model-min-height` (none by default), which a host whose pane is as tall as its content
+  sets: the model has no height of its own. A bar above: a section through the model along an axis (a solid's: a drawing, which isn't cut, or no model offers none), screenshot, an
   `actions` snippet (a host's own buttons, the Export menu), the Panel button, and a `toggles`
   snippet after it (a host's toggles of its own panes beside the pane, the Parameters button;
   `.kc-control` with `aria-expanded` gives one the Panel button's look). Below, a status

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kupcad/ui",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "KupCAD's UI: a three.js viewer of a model the core made, for any host (@kupcad/ui/viewer), and the Svelte panels around it (the viewer's pane, parameters, console, a language server's preview), styled by --kc-* tokens.",
   "license": "AGPL-3.0-only",
   "repository": {
@@ -36,11 +36,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@kupcad/protocol": "0.1.2",
+    "@kupcad/protocol": "0.1.4",
     "three": "^0.186.1"
   },
   "devDependencies": {
-    "@kupcad/wasm": "0.1.2",
+    "@kupcad/wasm": "0.1.4",
     "@playwright/test": "^1.64.1",
     "@sveltejs/vite-plugin-svelte": "^7.3.1",
     "@testing-library/svelte": "^5.4.2",

package/src/ParamsPanel.svelte

@@ -2,11 +2,13 @@
   @component
   The parameters' controls, from the schema a frame (or `kupcad doc`) gives: grouped by their
   `group:`, each showing the value set in the panel, else the one the run took. `overrides` is
-  what the panel sets (bindable), each change (and revert) given to `onchange`, which a host
-  sends to the core; a value refused by the run is shown on its control. A bar at the top, held
-  there as the panel scrolls, says how many values are set; while any is, its Reset all reverts
-  them all at once, the panel's refusals with them. The button keeps its place when there is
-  nothing to reset, so nothing under the bar moves as a first value is set or the last reverted.
+  what the panel sets (bindable), each change (and revert) given to `onchange` as plain values,
+  which a host sends to the core (to a worker, a webview's host: a list kept in state is a proxy
+  that a message can't copy); a value refused by the run is shown on its control. A bar at the
+  top, held there as the panel scrolls, says how many values are set; while any is, its Reset
+  all reverts them all at once, the panel's refusals with them. The button keeps its place when
+  there is nothing to reset, so nothing under the bar moves as a first value is set or the last
+  reverted.
   A value set back to the parameter's own (the one it showed before the panel set it: the run's,
   the script's or a host's preset's) is a revert, not a value set.
 -->
@@ -20,6 +22,7 @@
     withOverride,
     withoutOverride,
   } from './params.js';
+  import { plainValues } from './values.svelte.js';
 
   /** @import { Failure, ParamSpec, ParamValue, ParamValues, UiSchema } from '@kupcad/protocol/types' */
 
@@ -52,7 +55,7 @@
   /** @param {ParamValues} next */
   function change(next) {
     overrides = next;
-    onchange?.(next);
+    onchange?.(plainValues(next));
   }
 
   /**

package/src/ShortcutsDialog.svelte

@@ -78,9 +78,12 @@
 </dialog>
 
 <style>
+  /* In the middle of the window by its own margin, not the browser's default one, which a page's
+     reset (Tailwind's) takes away */
   .kc-shortcuts {
     width: min(32em, calc(100vw - 32px));
     max-height: calc(100vh - 64px);
+    margin: auto;
     padding: 16px 20px;
     font-family: var(--kc-font);
     font-size: var(--kc-font-size);

package/src/ViewerPane.svelte

@@ -4,8 +4,11 @@
   copies, volume and size, the face and its area). Beside it a panel, which the toolbar's Panel
   button hides: the view's controls (the render mode; edges, axes, the floor; fit, perspective,
   the views) over the model's parts (a click on one selecting its copies, as a click in the
-  viewer does), half of it each. A bar above: a section through the model, a screenshot and a
-  host's own actions (which take the controls' look by .kc-control), the Panel button, and a
+  viewer does), half of it each; in a pane narrower than 36em (a phone's), under the model, at
+  most half the pane. The model fills what the rest leave, and no less than
+  `--kc-model-min-height` (none by default): a host whose pane is as tall as its content sets it,
+  the model having no height of its own. A bar above: a section through the model, a screenshot
+  and a host's own actions (which take the controls' look by .kc-control), the Panel button, and a
   host's toggles of its own panes beside this one. Below: how its run went, and what it said
   went wrong, one with a line clicked given to the host (`onproblem`), and a button that lists
   the keyboard shortcuts (the host's own, then the viewer's). How the view looks (the render mode,
@@ -496,6 +499,7 @@
 
 <style>
   .kc-viewer-pane {
+    container-type: inline-size;
     display: flex;
     flex-direction: column;
     height: 100%;
@@ -530,6 +534,7 @@
     position: relative;
     flex: 1;
     min-width: 0;
+    min-height: var(--kc-model-min-height, 0);
   }
   .tooltip {
     position: absolute;
@@ -573,6 +578,26 @@
   .parts {
     border-top: 1px solid var(--kc-border);
   }
+  /* A narrow pane: the panel under the model, as wide, the controls then the parts at their own
+     heights; scrolled past half the pane */
+  @container (max-width: 36em) {
+    .body {
+      flex-direction: column;
+    }
+    .panel {
+      flex: none;
+      width: auto;
+      max-height: 50%;
+      overflow: auto;
+      border-left: none;
+      border-top: 1px solid var(--kc-border);
+    }
+    .controls,
+    .parts {
+      flex: none;
+      overflow: visible;
+    }
+  }
   .caption {
     margin: 0 0 2px;
     color: var(--kc-muted);

package/src/params.js

@@ -60,8 +60,10 @@ export function partsOf(rule) {
  * A number control's increment: the script's `step:`, else 1 for one between a `min` and a
  * `max` (a slider moved by a hand lands on whole numbers, not on 27.41112), or, for a range
  * narrower than 1, which a step of 1 couldn't move in, the power of ten that gives it at least
- * ten positions; any value for a number with no range.
- * @param {Rule} rule
+ * ten positions; any value for a number with no range. Finer still where the range's ends or
+ * the parameter's default have more decimals: a control's steps count from its `min`, so 1.2 to
+ * 4 by 1 reached neither 4 nor a default of 2, which the slider showed as 2.2.
+ * @param {Rule | ParamSpec} rule
  * @returns {number | 'any'}
  */
 export function stepOf(rule) {
@@ -69,7 +71,32 @@ export function stepOf(rule) {
   const { min, max } = rule;
   if (min === null || max === null || !(max > min)) return 'any';
   const range = max - min;
-  return range >= 1 ? 1 : 10 ** (Math.floor(Math.log10(range)) - 1);
+  const coarsest = range >= 1 ? 1 : 10 ** (Math.floor(Math.log10(range)) - 1);
+  const marks = [min, max];
+  if ('default_value' in rule && typeof rule.default_value === 'number') {
+    marks.push(rule.default_value);
+  }
+  const steps = marks.map(decimalStepOf);
+  return steps.includes(null) ? 'any' : Math.min(coarsest, .../** @type {number[]} */ (steps));
+}
+
+/** The decimal places a step may have: past them, a number is taken as having no grid. */
+const MAX_PLACES = 9;
+
+/**
+ * The coarsest power of ten, 1 at most, that `n` is a whole multiple of (0.1 for 1.2, 1 for 40),
+ * or null for a number of more than MAX_PLACES decimals.
+ * @param {number} n
+ * @returns {number | null}
+ */
+function decimalStepOf(n) {
+  for (let places = 0; places <= MAX_PLACES; places += 1) {
+    const scaled = n * 10 ** places;
+    if (Math.abs(scaled - Math.round(scaled)) < 1e-9 * Math.max(1, Math.abs(scaled))) {
+      return 10 ** -places;
+    }
+  }
+  return null;
 }
 
 /**