ntk 3.9.0 → 3.10.0

package/lib/color.js

@@ -0,0 +1,86 @@
+// Colour parsing, shared by the 2d context and the CSS cascade.
+//
+// Everything here returns **premultiplied** `[r, g, b, a]` floats in 0..1,
+// because that is what XRender takes: a colour reaches the server through
+// CreateSolidFill / FillRectangles / gradient stops, all of which read
+// premultiplied ARGB, so each of r, g and b must be <= a. Straight (a.k.a.
+// unassociated) alpha renders at full brightness instead — red at half alpha
+// composites as #ff0000 rather than #800000 — and since x11 3.3.0 a
+// component above 1 also warns.
+//
+// Hex is parsed here rather than handed to parse-color, which does not
+// understand CSS hex alpha and fails silently on it:
+//
+//   parse-color('#00000022')  ->  rgba [0, 0, 0, 34, 1]   five entries, and
+//                                 the alpha is still a 0..255 byte
+//   parse-color('#0002')      ->  rgba [0, 2, 0, 1]       read as a truncated
+//                                 six-digit hex
+//
+// The first is why `#RRGGBBAA` used to render fully opaque: 34 clamps to 1.
+import parseColorRaw from 'parse-color';
+
+/** `[r, g, b, a]` straight -> premultiplied. Opaque colours are unchanged. */
+export function premultiply([r, g, b, a]) {
+  return a === 1 ? [r, g, b, a] : [r * a, g * a, b * a, a];
+}
+
+// #RGB, #RGBA, #RRGGBB, #RRGGBBAA. Five and seven digits are not CSS, so
+// they are rejected rather than guessed at.
+const HEX = /^#([0-9a-f]{3,8})$/i;
+
+function parseHex(value) {
+  const m = HEX.exec(value);
+  if (!m) return null;
+  const h = m[1];
+  const short = h.length === 3 || h.length === 4;
+  if (!short && h.length !== 6 && h.length !== 8) return null;
+  const part = (i) =>
+    short
+      ? parseInt(h[i], 16) * 0x11 // 'f' -> 0xff
+      : parseInt(h.slice(i * 2, i * 2 + 2), 16);
+  const hasAlpha = h.length === 4 || h.length === 8;
+  return [part(0) / 255, part(1) / 255, part(2) / 255, hasAlpha ? part(3) / 255 : 1];
+}
+
+/**
+ * Parse a CSS colour to `[r, g, b, a]` floats in 0..1 with **straight**
+ * (unassociated) alpha, or null if it is not a colour.
+ *
+ * `cssColor` is the one to use for anything heading to XRender. This is for
+ * the places that genuinely want unassociated components:
+ *
+ *  - **OpenGL.** `glClearColor` and material colours take straight alpha;
+ *    handing them premultiplied values renders translucent colours dark.
+ *  - **Interpolating** two colours. Lerp straight, then premultiply once at
+ *    the end — a round trip back to an `rgba()` string only closes if the
+ *    components were never scaled.
+ */
+export function cssColorStraight(value) {
+  if (typeof value !== 'string') return null;
+  const v = value.trim();
+  if (!v) return null;
+  if (v.toLowerCase() === 'transparent') return [0, 0, 0, 0];
+
+  // '#' is ours alone: falling back to parse-color for a hex form we reject
+  // is how '#1234567' turns into rgba [18, 52, 86, 7, 1] -> alpha 7.
+  const rgba = v.startsWith('#') ? parseHex(v) : rawRgba(v);
+  if (!rgba) return null;
+  // NaN would otherwise reach the wire as a garbage fixed-point value
+  return rgba.every((c) => Number.isFinite(c)) ? rgba : null;
+}
+
+function rawRgba(value) {
+  const c = parseColorRaw(value);
+  if (!c || !c.rgba) return null;
+  const [r, g, b, a] = c.rgba;
+  return [r / 255, g / 255, b / 255, a];
+}
+
+/**
+ * Parse a CSS colour to a premultiplied `[r, g, b, a]` in 0..1, ready for
+ * XRender, or null if `value` is not a colour.
+ */
+export function cssColor(value) {
+  const straight = cssColorStraight(value);
+  return straight && premultiply(straight);
+}

package/lib/index.js

@@ -22,6 +22,7 @@ import SvgView from './widgets/svgview.js';
 import MarkdownView from './widgets/markdownview.js';
 import TexView, { configureTex, layoutTex, TexBox } from './widgets/tex.js';
 import { tokenize as highlightCode } from './widgets/highlight.js';
+import { cssColorStraight, premultiply } from './color.js';
 import { cssColor, cssLength } from './widgets/css.js';
 
 // rendering context modules register themselves on Drawable
@@ -64,6 +65,12 @@ export function createClient(options, callback) {
           // preload Render and GLX; GLX is optional ( indirect GLX is often
           // disabled on modern servers )
           display.Render = Render;
+          // x11 >= 3.3.0 clamps an out-of-range colour component and warns
+          // once per connection; under NTK_STRICT_COLORS it throws instead,
+          // which is how `npm test` catches a colour that reaches XRender
+          // unpremultiplied (r, g or b above alpha) rather than silently
+          // rendering too bright.
+          if (process.env.NTK_STRICT_COLORS) Render.strictColors = true;
           display.GLX = glxError ? null : GLX;
           const X = display.client;
           X.keycode2keysyms = {};
@@ -129,6 +136,8 @@ export {
   configureTex,
   highlightCode,
   cssColor,
+  cssColorStraight,
+  premultiply,
   cssLength
 };
 // the yoga-layout instance ntk lays HtmlView out with — downstream layout

package/lib/renderingcontext_2d.js

@@ -1,7 +1,7 @@
 import parseFontStyle from 'canvas-fontstyle';
 import extrudePolyline from 'extrude-polyline';
-import parseColorRaw from 'parse-color';
 
+import { cssColor } from './color.js';
 import Drawable from './drawable.js';
 import { Image } from './image.js';
 import {
@@ -121,10 +121,15 @@ function dashPolyline(pts, closed, pattern, offset) {
   return { runs, closedLoop: false };
 }
 
+// An array is taken as already-premultiplied `[r, g, b, a]` in 0..1 (the
+// documented form in docs/context-2d.md), so it passes through untouched; a
+// string is a CSS colour and gets premultiplied on the way in. Both end up in
+// createSolidPicture, which hands them to XRender.
 function parseColor(value) {
   if (Array.isArray(value)) return value;
-  const c = parseColorRaw(value);
-  return [c.rgba[0] / 255, c.rgba[1] / 255, c.rgba[2] / 255, c.rgba[3]];
+  const c = cssColor(value);
+  if (!c) throw new Error(`Not a color: ${JSON.stringify(value)}`);
+  return c;
 }
 
 /**

package/lib/widgets/css.js

@@ -4,16 +4,13 @@
 import { selectAll } from 'css-select';
 import postcss from 'postcss';
 
-import parseColorRaw from 'parse-color';
-
-/** parse a CSS color to premultipliable [r, g, b, a] floats, or null */
-export function cssColor(value) {
-  if (!value) return null;
-  if (value === 'transparent') return [0, 0, 0, 0];
-  const c = parseColorRaw(String(value).trim());
-  if (!c || !c.rgba) return null;
-  return [c.rgba[0] / 255, c.rgba[1] / 255, c.rgba[2] / 255, c.rgba[3]];
-}
+// Parse a CSS color to premultiplied [r, g, b, a] floats in 0..1, or null.
+// These land on `ctx.fillStyle` as arrays (see htmlview's paint), which is
+// the already-premultiplied form, so the premultiplying happens in color.js.
+// Imported as well as re-exported: the cascade below calls it too.
+import { cssColor } from '../color.js';
+
+export { cssColor };
 
 const FONT_SIZE_KEYWORDS = {
   'xx-small': 9,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ntk",
-  "version": "3.9.0",
+  "version": "3.10.0",
   "description": "Desktop UI toolkit for X11 with canvas-like 2d and OpenGL rendering",
   "author": "Andrey Sidorov <sidorares@yandex.ru>",
   "license": "MIT",
@@ -51,10 +51,14 @@
     "parse-color": "^1.0.0",
     "pngjs": "^7.0.0",
     "postcss": "^8.5.23",
-    "x11": "^3.2.0",
+    "x11": "^3.3.0",
     "yoga-layout": "^3.2.1"
   },
   "scripts": {
-    "test": "node --test"
+    "test": "NTK_STRICT_COLORS=1 node --test",
+    "check-release-message": "node scripts/check-release-message.mjs"
+  },
+  "devDependencies": {
+    "@conventional-commits/parser": "^0.4.1"
   }
 }