@kupcad/ui 0.1.4 → 0.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kupcad/ui",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "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.4",
+    "@kupcad/protocol": "0.1.6",
     "three": "^0.186.1"
   },
   "devDependencies": {
-    "@kupcad/wasm": "0.1.4",
+    "@kupcad/wasm": "0.1.6",
     "@playwright/test": "^1.64.1",
     "@sveltejs/vite-plugin-svelte": "^7.3.1",
     "@testing-library/svelte": "^5.4.2",

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/testing.js

@@ -3,7 +3,8 @@
 // the camera's controls capture the pointer while it drags, and a screenshot reads the canvas as
 // an image, which jsdom draws none of: here an empty PNG. A canvas has no context, as jsdom's has
 // none, but quietly (jsdom says "not implemented" when asked). A dialog (the shortcuts') opens and
-// closes, which jsdom's element can't. `stubRenderer` draws in place of WebGL.
+// closes, which jsdom's element can't. A range of text measures, as an editor beside the viewer
+// measures its lines (jsdom lays out nothing: no box). `stubRenderer` draws in place of WebGL.
 
 /** @import { Camera, Object3D } from 'three' */
 /** @import { RendererLike } from './types.js' */
@@ -14,6 +15,9 @@ globalThis.ResizeObserver ??= class {
   disconnect() {}
 };
 
+Range.prototype.getClientRects ??= () => /** @type {DOMRectList} */ (/** @type {unknown} */ ([]));
+Range.prototype.getBoundingClientRect ??= () => DOMRect.fromRect();
+
 Element.prototype.setPointerCapture ??= () => {};
 Element.prototype.releasePointerCapture ??= () => {};
 Element.prototype.hasPointerCapture ??= () => false;

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;
 }