@kupcad/ui 0.1.3 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kupcad/ui",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "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.3",
+    "@kupcad/protocol": "0.1.5",
     "three": "^0.186.1"
   },
   "devDependencies": {
-    "@kupcad/wasm": "0.1.3",
+    "@kupcad/wasm": "0.1.5",
     "@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/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;
 }
 
 /**

package/src/viewer/appearance.js

@@ -5,7 +5,7 @@
 import { Color } from 'three';
 
 /** @import { LineBasicMaterial, MeshBasicMaterial, MeshStandardMaterial } from 'three' */
-/** @import { RenderMode, SceneModel, Theme } from './types.js' */
+/** @import { RenderMode, SceneModel, Shape, Theme } from './types.js' */
 
 /** How see-through a solid is in x-ray. */
 export const XRAY_OPACITY = 0.25;
@@ -16,8 +16,9 @@ export const SELECTION_TINT = 0.45;
  * Draws the model's shapes as `mode` says: as they are, see-through, or not at all but for their
  * edges (the mesh stays, for picking, and its edges with it); their edges with them when
  * `edges`, and always in a wireframe, which is nothing else. A highlight is seen through what
- * hides it only as they are: in x-ray everything is, and a wireframe has no faces. The edges take
- * `theme`'s colour for where they are drawn (edgeColorOf).
+ * hides it only as they are: in x-ray everything is, and a wireframe has no faces, its edges
+ * drawn in the highlight's colour instead. The edges take `theme`'s colour for where they are
+ * drawn (edgeColorOf).
  * @param {SceneModel | null} model
  * @param {RenderMode} mode
  * @param {boolean} edges
@@ -26,6 +27,9 @@ export const SELECTION_TINT = 0.45;
 export function applyRenderMode(model, mode, edges, theme) {
   if (!model) return;
   model.edgeMaterial.color.set(edgeColorOf(model.kind, mode, theme));
+  model.highlightEdges?.color.set(
+    mode === 'wireframe' ? theme.highlight : edgeColorOf(model.kind, mode, theme),
+  );
   for (const shape of model.shapes) {
     if (shape.edges) shape.edges.visible = edges || mode === 'wireframe';
     if (shape.seenThrough) shape.seenThrough.visible = mode === 'solid';
@@ -68,10 +72,21 @@ export function applySelection(model, part, selection, selectionEdges) {
     const chosen = part !== null && shape.part === part;
     material.color.copy(shape.color);
     if (chosen) material.color.lerp(tint, SELECTION_TINT);
-    if (shape.edges) shape.edges.material = chosen ? selectionEdges : model.edgeMaterial;
+    if (shape.edges) shape.edges.material = chosen ? selectionEdges : edgesOf(model, shape);
   }
 }
 
+/**
+ * The material a shape's edges are drawn with unless it is selected: a highlight's own, else
+ * the model's.
+ * @param {SceneModel} model
+ * @param {Shape} shape
+ * @returns {LineBasicMaterial}
+ */
+function edgesOf(model, shape) {
+  return shape.seenThrough && model.highlightEdges ? model.highlightEdges : model.edgeMaterial;
+}
+
 /**
  * Gives the model the colours of `theme` it takes besides its edges' (applyRenderMode's): a
  * ghost's and a highlight's (the selection, applied after, tints from them).

package/src/viewer/model.js

@@ -96,30 +96,32 @@ async function solids(glb, parts, loader, theme) {
     return index === undefined ? undefined : nodes[index]?.name;
   };
   const edgeMaterial = new LineBasicMaterial({ color: theme.edges });
+  const highlightEdges = new LineBasicMaterial({ color: theme.edges });
   /** @type {Shape[]} */
   const shapes = [];
   scene.traverse((object) => {
     if (object instanceof Mesh) {
-      shapes.push(solidShape(object, partOf, nodeName, edgeMaterial, theme));
+      shapes.push(solidShape(object, partOf, nodeName, { edgeMaterial, highlightEdges }, theme));
     }
   });
   const root = new Group();
   root.add(scene);
-  return { kind: '3d', root, shapes, edgeMaterial };
+  return { kind: '3d', root, shapes, edgeMaterial, highlightEdges };
 }
 
 /**
  * A solid's mesh as a shape: its own material (so tinting one part tints no other), its part,
  * and its edges; a ghost seen through, in the theme's colour; a highlighted one (the core tags
- * its material) in the highlight's, seen through what hides it.
+ * its material) in the highlight's, seen through what hides it, its edges its own.
  * @param {Mesh} mesh
  * @param {Map<string, string>} partOf
  * @param {(object: Object3D) => string | undefined} nodeName
- * @param {LineBasicMaterial} edgeMaterial
+ * @param {{ edgeMaterial: LineBasicMaterial, highlightEdges: LineBasicMaterial }} edges the
+ *   model's edges' materials
  * @param {Theme} theme
  * @returns {Shape}
  */
-function solidShape(mesh, partOf, nodeName, edgeMaterial, theme) {
+function solidShape(mesh, partOf, nodeName, { edgeMaterial, highlightEdges }, theme) {
   const material = /** @type {import('three').MeshStandardMaterial} */ (
     /** @type {Material} */ (mesh.material).clone()
   );
@@ -144,7 +146,10 @@ function solidShape(mesh, partOf, nodeName, edgeMaterial, theme) {
   const highlighted = role === 'highlight';
   if (highlighted) material.color.set(theme.highlight);
   Object.assign(material, FACES_BEHIND_EDGES);
-  const edges = new LineSegments(new EdgesGeometry(mesh.geometry, EDGE_ANGLE_DEG), edgeMaterial);
+  const edges = new LineSegments(
+    new EdgesGeometry(mesh.geometry, EDGE_ANGLE_DEG),
+    highlighted ? highlightEdges : edgeMaterial,
+  );
   mesh.add(edges);
   return {
     mesh,
@@ -242,7 +247,7 @@ function drawing(svg, theme) {
       opacity,
     });
   }
-  return { kind: '2d', root, shapes, edgeMaterial };
+  return { kind: '2d', root, shapes, edgeMaterial, highlightEdges: null };
 }
 
 /**
@@ -267,14 +272,16 @@ function outlineOf(path, closed) {
 }
 
 /**
- * The materials the model's scene owns: each shape's, a highlight's copy's, and its edges'. A
- * selected shape's edges are drawn with the viewer's material, which isn't the model's to free.
+ * The materials the model's scene owns: each shape's, a highlight's copy's, and its edges' (a
+ * highlight's of their own). A selected shape's edges are drawn with the viewer's material,
+ * which isn't the model's to free.
  * @param {SceneModel} model
  * @returns {Set<Material>}
  */
 export function ownMaterials(model) {
   return new Set([
     model.edgeMaterial,
+    ...(model.highlightEdges ? [model.highlightEdges] : []),
     ...model.shapes.flatMap((shape) =>
       [shape.mesh, shape.seenThrough].flatMap((mesh) =>
         mesh ? [/** @type {Material} */ (mesh.material)] : [],

package/src/viewer/types.d.ts

@@ -131,6 +131,11 @@ export interface SceneModel {
   kind: '3d' | '2d';
   root: Group;
   shapes: Shape[];
-  /** The edges' material, shared by every shape but the selected ones. */
+  /** The edges' material, shared by every shape but the selected and the highlighted ones. */
   edgeMaterial: LineBasicMaterial;
+  /**
+   * A highlighted solid's edges' material: the highlight's colour in a wireframe, which has no
+   * faces to show it by, the edges' elsewhere; null for a drawing, which has no highlights.
+   */
+  highlightEdges: LineBasicMaterial | null;
 }