ntk 3.8.0 → 3.9.1

package/lib/color.js

@@ -0,0 +1,78 @@
+// 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 premultipliable `[r, g, b, a]` floats, straight
+ * alpha, or null if it is not a colour. Exported for callers that need the
+ * unassociated values; use `cssColor` for anything heading to XRender.
+ */
+export function parseCssColorStraight(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 = parseCssColorStraight(value);
+  return straight && premultiply(straight);
+}

package/lib/index.js

@@ -64,6 +64,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 = {};

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/lib/window.js

@@ -1099,6 +1099,39 @@ export default class Window extends Drawable {
     });
   }
 
+  /**
+   * Write a property — the counterpart of getProperty, and the general form
+   * of setTitle/setClass/setSizeHints. Strings are written as UTF8_STRING,
+   * arrays of numbers as 32-bit lists; `type` names the property type atom
+   * ('ATOM', 'CARDINAL', 'WINDOW', 'UTF8_STRING', 'STRING'), which is what
+   * EWMH properties are picky about.
+   *
+   *   wnd.setProperty('_NET_WM_NAME', 'a title');
+   *   wnd.setProperty('_NET_CLIENT_LIST', ids, { type: 'WINDOW' });
+   *
+   * @param {string} name atom name of the property
+   * @param {string|number[]|Buffer} value
+   * @param {object} [options] `{ type, format }`
+   */
+  async setProperty(name, value, options = {}) {
+    const isList = Array.isArray(value);
+    const { type = isList ? 'CARDINAL' : 'UTF8_STRING', format = isList ? 32 : 8 } =
+      options;
+    const [property, typeAtom] = await Promise.all([this.atom(name), this.atom(type)]);
+    let data = value;
+    if (isList) {
+      const words = new Uint32Array(value);
+      data = Buffer.from(words.buffer, words.byteOffset, words.byteLength);
+    } else if (typeof value === 'string') {
+      data = Buffer.from(value, type === 'STRING' ? 'latin1' : 'utf8');
+    }
+    if (this._destroyed) return this;
+    safeRelease(this.X, () => {
+      this.X.ChangeProperty(0, this.id, property, typeAtom, format, data);
+    });
+    return this;
+  }
+
   /**
    * Intern an atom by name. node-x11 caches them per connection, so asking
    * again for one already interned costs no round trip.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ntk",
-  "version": "3.8.0",
+  "version": "3.9.1",
   "description": "Desktop UI toolkit for X11 with canvas-like 2d and OpenGL rendering",
   "author": "Andrey Sidorov <sidorares@yandex.ru>",
   "license": "MIT",
@@ -51,10 +51,10 @@
     "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"
   }
 }