ntk 3.5.2 → 3.6.0

package/README.md

@@ -132,10 +132,12 @@ Note that on many systems indirect GLX is disabled by default —
 import { createClient } from 'ntk';
 
 const app = await createClient();
-const wnd = app.createWindow({ width: 300, height: 300 });
+// GLX drawables need a GLX-capable visual, chosen before the window exists
+const glx = await app.chooseGLXConfig({ DEPTH_SIZE: 24 });
+const wnd = app.createWindow({ width: 300, height: 300, visual: glx.visual, depth: glx.depth });
 wnd.map();
 
-const gl = wnd.getContext('opengl');
+const gl = wnd.getContext('opengl', glx);
 gl.ClearColor(0.3, 0.3, 0.3, 0.0);
 gl.Clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
 gl.Begin(gl.TRIANGLES);

package/lib/app.js

@@ -1,5 +1,6 @@
 import Clipboard from './clipboard.js';
 import { CursorCache } from './cursor.js';
+import { chooseGLXConfig } from './glx.js';
 import Pixmap from './pixmap.js';
 import FontManager from './text/fontmanager.js';
 import Window from './window.js';
@@ -13,7 +14,7 @@ export default class App {
    * @param {object} display node-x11 display
    * @param {object} [options] environment hooks: { fontSource (see
    *   text/fontsource.js), glxVisual (visual id for getContext('opengl')
-   *   when glxinfo can't be shelled out to) }
+   *   instead of querying the server for one) }
    */
   constructor(display, options = {}) {
     this.display = display;
@@ -56,6 +57,30 @@ export default class App {
     return new Window(this, args);
   }
 
+  /**
+   * Allocate a colormap for `visual` (X CreateColormap, alloc None — the
+   * only legal value for the TrueColor visuals we use). Windows created
+   * with an explicit `visual` get one of these automatically.
+   * @returns {number} the colormap id
+   */
+  createColormap(visual, screen = 0) {
+    const mid = this.X.AllocID();
+    this.X.CreateColormap(mid, this.display.screen[screen].root, visual, 0);
+    return mid;
+  }
+
+  /**
+   * Pick a GLX-capable visual (docs/context-opengl.md). Resolves with
+   * `{ visual, depth, class, doubleBuffer, depthSize, fbconfig, screen }` —
+   * pass `visual`/`depth` to `createWindow` and the whole object to
+   * `wnd.getContext('opengl', config)`.
+   * @param {object} [spec] GLX attributes, e.g.
+   *   `{ DEPTH_SIZE: 24, DOUBLEBUFFER: true, ALPHA_SIZE: 8 }`
+   */
+  chooseGLXConfig(spec) {
+    return chooseGLXConfig(this, spec);
+  }
+
   rootWindow() {
     return new Window(this, { id: this.display.screen[0].root });
   }

package/lib/glx.js

@@ -0,0 +1,195 @@
+// GLX visual/fbconfig discovery.
+//
+// A GLX drawable has to use a visual the GL context was created for, so the
+// visual must be known *before* CreateWindow. This module asks the server
+// (GetFBConfigs, falling back to the GLX 1.2 GetVisualConfigs) instead of
+// shelling out to `glxinfo`, so it works headlessly and in CI.
+
+// defaults applied on top of the caller's spec; `null` means "don't care"
+const DEFAULT_SPEC = {
+  DOUBLEBUFFER: true,
+  DEPTH_SIZE: 16,
+  RED_SIZE: 8,
+  GREEN_SIZE: 8,
+  BLUE_SIZE: 8
+};
+
+// GLX 1.2 GetVisualConfigs property names for the attributes we filter on
+const legacyProps = {
+  DOUBLEBUFFER: 'doubleBufferMode',
+  STEREO: 'stereoMode',
+  BUFFER_SIZE: 'rgbBits',
+  DEPTH_SIZE: 'depthBits',
+  STENCIL_SIZE: 'stencilBits',
+  RED_SIZE: 'redBits',
+  GREEN_SIZE: 'greenBits',
+  BLUE_SIZE: 'blueBits',
+  ALPHA_SIZE: 'alphaBits',
+  AUX_BUFFERS: 'numAuxBuffers',
+  LEVEL: 'level'
+};
+
+// attributes compared as "at least this much"; the rest must match exactly
+const minimums = new Set([
+  'BUFFER_SIZE',
+  'DEPTH_SIZE',
+  'STENCIL_SIZE',
+  'RED_SIZE',
+  'GREEN_SIZE',
+  'BLUE_SIZE',
+  'ALPHA_SIZE',
+  'AUX_BUFFERS',
+  'SAMPLE_BUFFERS',
+  'SAMPLES'
+]);
+
+function toNumber(value) {
+  if (typeof value === 'boolean') return value ? 1 : 0;
+  return value;
+}
+
+// the X depth and visual info for a visual id, or null if the screen has no
+// such visual (fbconfigs with VISUAL_ID 0 are pbuffer/pixmap only)
+function visualInfo(screen, visualId) {
+  if (!visualId) return null;
+  for (const depth in screen.depths) {
+    const visual = screen.depths[depth][visualId];
+    if (visual) return { depth: Number(depth), visual };
+  }
+  return null;
+}
+
+function describe(spec) {
+  return (
+    Object.entries(spec)
+      .filter(([, v]) => v !== null && v !== undefined)
+      .map(([k, v]) => `${k}=${v}`)
+      .join(' ') || '(no constraints)'
+  );
+}
+
+function fbConfigs(GLX, screen, spec) {
+  return new Promise((resolve, reject) => {
+    // ChooseFBConfig filters and sorts per the GLX 1.4 selection rules
+    GLX.ChooseFBConfig(screen, spec, (err, configs) => {
+      // a bad attribute name is the caller's bug, not a missing feature —
+      // everything else means "this server has no fbconfigs for us"
+      if (err instanceof TypeError) return reject(err);
+      resolve(err ? [] : configs);
+    });
+  });
+}
+
+function visualConfigs(GLX, screen) {
+  return new Promise((resolve) => {
+    GLX.GetVisualConfigs(screen, (err, configs) => resolve(err ? [] : configs));
+  });
+}
+
+// GLX 1.2 fallback: filter GetVisualConfigs results by the same spec
+function matchLegacy(configs, spec) {
+  return configs.filter((cfg) => {
+    if (!cfg.rgbMode) return false;
+    for (const key in spec) {
+      const want = toNumber(spec[key]);
+      if (want === null || want === undefined) continue;
+      const prop = legacyProps[key];
+      // attributes GetVisualConfigs doesn't report (RENDER_TYPE,
+      // DRAWABLE_TYPE, ...) can't be checked — RGBA windows are all this
+      // path can offer anyway
+      if (!prop) continue;
+      const have = cfg[prop] || 0;
+      if (minimums.has(key) ? have < want : have !== want) return false;
+    }
+    return true;
+  });
+}
+
+/**
+ * Choose a GLX-capable visual on `app`'s display.
+ *
+ * @param {import('./app.js').default} app
+ * @param {object} [spec] GLX attribute constraints by name (see
+ *   `GLX.glxAttrib`), e.g. `{ DEPTH_SIZE: 24, DOUBLEBUFFER: true }`;
+ *   `null` means "don't care". `screen` picks the X screen (default 0),
+ *   `visual` pins a specific visual id and skips the search.
+ * @returns {Promise<{visual: number, depth: number, class: number,
+ *   doubleBuffer: boolean, depthSize: number, fbconfig: number|null,
+ *   config: object}>}
+ */
+export async function chooseGLXConfig(app, spec = {}) {
+  const GLX = app.display.GLX;
+  if (!GLX) {
+    throw new Error(
+      'GLX: extension not available on this display — indirect GLX is often disabled (X server flag +iglx / AllowIndirectGLX)'
+    );
+  }
+
+  const { screen: screenNum = 0, preferVisual, ...wanted } = spec;
+  const want = { ...DEFAULT_SPEC, ...wanted };
+  const screen = app.display.screen[screenNum];
+  // a candidate list is searched for `preferVisual` first: a context must
+  // be created for the visual its drawable already has
+  const pick = (candidates) =>
+    (preferVisual && candidates.find((c) => c.visual === preferVisual)) || candidates[0];
+
+  if (want.visual) {
+    const info = visualInfo(screen, want.visual);
+    if (!info) throw new Error(`GLX: visual 0x${want.visual.toString(16)} is not on screen ${screenNum}`);
+    return {
+      visual: want.visual,
+      depth: info.depth,
+      class: info.visual.class,
+      doubleBuffer: !!toNumber(want.DOUBLEBUFFER),
+      depthSize: toNumber(want.DEPTH_SIZE) || 0,
+      screen: screenNum,
+      fbconfig: null,
+      config: {}
+    };
+  }
+
+  // GLX >= 1.3 fbconfigs first; they carry the attributes we care about
+  const fromFbConfigs = [];
+  for (const cfg of await fbConfigs(GLX, screenNum, want)) {
+    const info = visualInfo(screen, cfg.VISUAL_ID);
+    if (!info) continue; // no X visual: pbuffer/pixmap-only config
+    fromFbConfigs.push({
+      visual: cfg.VISUAL_ID,
+      depth: info.depth,
+      class: info.visual.class,
+      doubleBuffer: !!cfg.DOUBLEBUFFER,
+      depthSize: cfg.DEPTH_SIZE || 0,
+      screen: screenNum,
+      fbconfig: cfg.FBCONFIG_ID,
+      config: cfg
+    });
+  }
+  const best = pick(fromFbConfigs);
+  if (best) return best;
+
+  // GLX 1.2 servers (and servers that report no usable fbconfig)
+  const legacy = await visualConfigs(GLX, screenNum);
+  const fromVisuals = [];
+  for (const cfg of matchLegacy(legacy, want)) {
+    const info = visualInfo(screen, cfg.visualID);
+    if (!info) continue;
+    fromVisuals.push({
+      visual: cfg.visualID,
+      depth: info.depth,
+      class: info.visual.class,
+      doubleBuffer: !!cfg.doubleBufferMode,
+      depthSize: cfg.depthBits || 0,
+      screen: screenNum,
+      fbconfig: null,
+      config: cfg
+    });
+  }
+  const legacyBest = pick(fromVisuals);
+  if (legacyBest) return legacyBest;
+
+  throw new Error(
+    `GLX: no visual on screen ${screenNum} matches ${describe(want)} (server offered ${legacy.length} GLX visuals)`
+  );
+}
+
+export default chooseGLXConfig;

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 { cssColor, cssLength } from './widgets/css.js';
 
 // rendering context modules register themselves on Drawable
 import './renderingcontext_x11.js';
@@ -40,8 +41,8 @@ import './renderingcontext_opengl.js';
  * @param {object} [options] passed through to x11.createClient
  *   (e.g. { display: ':1' }); ntk additionally understands
  *   { fontSource } — a pluggable system-font lookup (see docs/fonts.md) —
- *   { glxVisual } — the visual id for getContext('opengl') in
- *   environments where `glxinfo` cannot be shelled out to — and
+ *   { glxVisual } — a visual id for getContext('opengl') to use instead of
+ *   querying the server for one — and
  *   { onXError } — called with X protocol errors no request callback
  *   claimed (default: console.warn)
  * @param {function} [callback] optional node-style callback
@@ -126,7 +127,9 @@ export {
   TexBox,
   layoutTex,
   configureTex,
-  highlightCode
+  highlightCode,
+  cssColor,
+  cssLength
 };
 // the yoga-layout instance ntk lays HtmlView out with — downstream layout
 // consumers (e.g. the react-x11 renderer) must share it to avoid loading a

package/lib/renderingcontext_2d.js

@@ -552,6 +552,34 @@ class RenderingContext2d {
    * Core fill: rasterize device-space polys into the scratch a8 mask,
    * scale by globalAlpha, intersect with the clip, composite the source.
    */
+  /**
+   * Device-space bounding box of flattened polys, with a pixel of slack for
+   * the antialiased edge, clamped to the surface. Null when nothing lands
+   * on it.
+   */
+  _polysBBox(polys) {
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    for (const poly of polys) {
+      const pts = poly.pts;
+      for (let i = 0; i < pts.length; i += 2) {
+        if (pts[i] < minX) minX = pts[i];
+        if (pts[i] > maxX) maxX = pts[i];
+        if (pts[i + 1] < minY) minY = pts[i + 1];
+        if (pts[i + 1] > maxY) maxY = pts[i + 1];
+      }
+    }
+    if (maxX === -Infinity) return null;
+    const x = Math.max(0, Math.floor(minX) - 1);
+    const y = Math.max(0, Math.floor(minY) - 1);
+    const w = Math.min(this.width, Math.ceil(maxX) + 1) - x;
+    const h = Math.min(this.height, Math.ceil(maxY) + 1) - y;
+    if (w <= 0 || h <= 0) return null;
+    return { x, y, w, h };
+  }
+
   _fillPolys(polys, rule, { src = null, op = null, alpha = null } = {}) {
     if (!polys.length) return;
     src = src ?? this._backgroundPicture;
@@ -559,26 +587,31 @@ class RenderingContext2d {
     alpha = alpha ?? this.globalAlpha;
     if (alpha <= 0) return;
 
+    // Everything below is bounded to the shape's bounding box rather than
+    // the whole surface. On the wire it makes no difference — a Composite
+    // request is the same size either way — but it is the difference
+    // between the server touching a 34x34 box and a 400x400 one per fill.
+    // Stale mask content outside the box is never composited, so clearing
+    // only the box is safe.
+    const b = this._polysBBox(polys);
+    if (!b) return;
+    const R = this.Render;
+
     this._ensureFillMask();
-    this.Render.FillRectangles(this.Render.PictOp.Src, this.fillMask.id, [0, 0, 0, 0], [0, 0, this.width, this.height]);
+    R.FillRectangles(R.PictOp.Src, this.fillMask.id, [0, 0, 0, 0], [b.x, b.y, b.w, b.h]);
     this._rasterizePolys(this.fillMask, polys, rule);
 
     if (alpha < 1) {
       // In with a constant color scales the a8 coverage by that alpha
-      this.Render.FillRectangles(this.Render.PictOp.In, this.fillMask.id, [0, 0, 0, alpha], [0, 0, this.width, this.height]);
+      R.FillRectangles(R.PictOp.In, this.fillMask.id, [0, 0, 0, alpha], [b.x, b.y, b.w, b.h]);
     }
     if (this.clipMask) {
-      this.Render.Composite(
-        this.Render.PictOp.In,
-        this.clipMask.id,
-        0,
-        this.fillMask.id,
-        0, 0, 0, 0, 0, 0,
-        this.width,
-        this.height
-      );
+      // clipMask is surface-aligned, so it is sampled at the same offset
+      R.Composite(R.PictOp.In, this.clipMask.id, 0, this.fillMask.id, b.x, b.y, 0, 0, b.x, b.y, b.w, b.h);
     }
-    this.Render.Composite(op, src.id, this.fillMask.id, this.picture.id, 0, 0, 0, 0, 0, 0, this.width, this.height);
+    // src is either a 1x1 repeating solid (offset irrelevant) or a
+    // surface-aligned gradient, so it is sampled at the same offset too
+    R.Composite(op, src.id, this.fillMask.id, this.picture.id, b.x, b.y, b.x, b.y, b.x, b.y, b.w, b.h);
     this._markDirty();
   }
 

package/lib/renderingcontext_opengl.js

@@ -1,53 +1,143 @@
 import Drawable from './drawable.js';
+import { chooseGLXConfig } from './glx.js';
 
 // Indirect GLX rendering context exposing an OpenGL 1.4-style api.
 // Note: many modern X servers ship with indirect GLX disabled — see README.
+//
+// Setting up a context is asynchronous by protocol: the visual has to be
+// discovered (GetFBConfigs) and, above all, GLX Render requests carry the
+// *context tag* the server returns from MakeCurrent — not the context XID.
+// The api stays synchronous by queueing GL calls until the tag arrives and
+// replaying them in order; `await gl.ready` waits for the setup instead.
 class RenderingContextOpenGL {
-  constructor(window, visual) {
-    // TODO: use glx api to query the best visual instead of shelling out
-    if (typeof visual === 'undefined') visual = window.app?.options?.glxVisual;
-    if (typeof visual === 'undefined') {
-      // lazy builtin lookup: browser bundles must not depend on child_process
-      const cp = globalThis.process?.getBuiltinModule?.('node:child_process');
-      if (!cp) {
-        throw new Error(
-          "getContext('opengl'): no visual id — pass one explicitly or via createClient({ glxVisual }) when glxinfo cannot be run"
-        );
-      }
-      visual = parseInt(cp.execSync('glxinfo -i -b').toString(), 10);
-    }
-
+  constructor(window, config) {
     const X = window.X;
     const GLX = window.display.GLX;
-    this.window = window;
+    if (!GLX) {
+      throw new Error(
+        "getContext('opengl'): the X server has no GLX extension — indirect GLX is often disabled (+iglx / AllowIndirectGLX)"
+      );
+    }
 
-    const ctx = X.AllocID();
-    GLX.CreateContext(ctx, visual, 0, 0, 0);
-    GLX.MakeCurrent(window.id, ctx, 0, () => {});
+    this.window = window;
+    this.X = X;
+    this.GLX = GLX;
+    /** the MakeCurrent context tag every Render request carries; 0 until ready */
+    this.contextTag = 0;
+    /** the GLX context XID */
+    this.contextId = 0;
+    /** the config chosen (or passed in), see app.chooseGLXConfig */
+    this.config = null;
+    this.visual = 0;
+    this.error = null;
 
-    const gl = GLX.renderPipeline(ctx);
-    for (const key in gl) {
-      if (key === 'SwapBuffers') continue;
-      const val = gl[key];
-      this[key] = typeof val === 'function' ? val.bind(gl) : val;
+    // GL commands land here until the tag is known, then in the real
+    // pipeline. renderPipeline() issues no traffic, so a throwaway one is a
+    // safe source of the method names and GL constants.
+    let pipeline = null;
+    const queue = [];
+    const template = GLX.renderPipeline(0);
+    for (const key in template) {
+      if (typeof template[key] !== 'function') {
+        this[key] = template[key];
+        continue;
+      }
+      this[key] = (...args) => {
+        if (pipeline) return pipeline[key](...args);
+        queue.push([key, args]);
+      };
     }
 
-    const windowId = window.id;
-    this.SwapBuffers = () => gl.SwapBuffers.call(gl, windowId);
+    // SwapBuffers swaps the owning window
+    const swapBuffers = this.SwapBuffers;
+    this.SwapBuffers = () => swapBuffers(window.id);
+
+    const afterReady = (fn) => {
+      if (this.contextTag) return fn();
+      this.ready.then(fn, () => {});
+    };
 
     this.CreateGLXPixmap = (pixmapId) => {
       const glxpixmapId = X.AllocID();
-      GLX.CreateGLXPixmap(0, visual, pixmapId, glxpixmapId);
+      afterReady(() => GLX.CreateGLXPixmap(0, this.visual, pixmapId, glxpixmapId));
       return glxpixmapId;
     };
-    this.BindTexImage = (pixmap, buffer) => {
-      GLX.BindTexImage(ctx, pixmap, buffer);
+    this.BindTexImage = (pixmap, buffer, attribs) => {
+      afterReady(() => GLX.BindTexImage(this.contextTag, pixmap, buffer, attribs));
+    };
+    this.ReleaseTexImage = (pixmap, buffer) => {
+      afterReady(() => GLX.ReleaseTexImage(this.contextTag, pixmap, buffer));
     };
+
+    /** resolves with this context once it is current, rejects on failure */
+    this.ready = (async () => {
+      const cfg = await this._resolveConfig(config);
+      this.config = cfg;
+      this.visual = cfg.visual;
+      if (window.visual && window.visual !== cfg.visual) {
+        console.warn(
+          `ntk: getContext('opengl') is using visual 0x${cfg.visual.toString(16)} on a window created with visual 0x${window.visual.toString(16)} — create the window with the visual from app.chooseGLXConfig()`
+        );
+      }
+
+      const ctx = X.AllocID();
+      this.contextId = ctx;
+      GLX.CreateContext(ctx, cfg.visual, cfg.screen ?? 0, 0, 0);
+      const tag = await new Promise((resolve, reject) => {
+        GLX.MakeCurrent(window.id, ctx, 0, (err, contextTag) => (err ? reject(err) : resolve(contextTag)));
+      });
+
+      this.contextTag = tag;
+      pipeline = GLX.renderPipeline(tag);
+      for (const [key, args] of queue) pipeline[key](...args);
+      queue.length = 0;
+      return this;
+    })();
+
+    this.ready.catch((err) => {
+      this.error = err;
+      queue.length = 0;
+      console.warn(
+        `ntk: getContext('opengl') failed: ${err.message} (await gl.ready to handle this yourself)`
+      );
+    });
+  }
+
+  // an explicit config object or visual id wins; otherwise ask the server
+  // for one, preferring a config for the visual the window already has
+  async _resolveConfig(config) {
+    if (config && typeof config === 'object') {
+      if (!config.visual)
+        throw new Error("getContext('opengl'): config has no visual — use app.chooseGLXConfig()");
+      return config;
+    }
+    const app = this.window.app;
+    const visual = config ?? app?.options?.glxVisual;
+    if (visual) return chooseGLXConfig(app, { visual });
+    const screen = app.display.screen[0];
+    return chooseGLXConfig(app, {
+      preferVisual: this.window.visual || screen.root_visual
+    });
+  }
+
+  /** release the context (the window keeps its drawable) */
+  destroy() {
+    if (!this.contextId) return;
+    const { GLX } = this;
+    const ctx = this.contextId;
+    const tag = this.contextTag;
+    this.contextId = 0;
+    this.contextTag = 0;
+    if (tag) GLX.MakeCurrent(0, 0, tag, () => {});
+    GLX.DestroyContext(ctx);
+  }
+
+  [Symbol.dispose]() {
+    this.destroy();
   }
 }
 
 // register context
-Drawable.renderingContextFactory['opengl'] = (window, visual) =>
-  new RenderingContextOpenGL(window, visual);
+Drawable.renderingContextFactory['opengl'] = (window, config) => new RenderingContextOpenGL(window, config);
 
 export default RenderingContextOpenGL;

package/lib/window.js

@@ -15,6 +15,8 @@ import * as xevents from './events_map.js';
 //    client-side double buffering (see docs/window.md) and predates this
 //    list — it is a different concept from the X backing-store attribute,
 //    which is therefore not forwarded to avoid a silent collision
+// `visual`, `depth`, `windowClass` and `borderWidth` are CreateWindow header
+// fields rather than attributes, and are handled separately below
 const forwardedXAttributes = [
   'backgroundPixmap',
   'backgroundPixel',
@@ -113,10 +115,29 @@ export default class Window extends Drawable {
       for (const name of forwardedXAttributes) {
         if (args[name] !== undefined) values[name] = args[name];
       }
-      X.CreateWindow(this.id, parentId, this.x, this.y, this.width, this.height, 0, 0, 0, 0, values);
+      // a window on a non-default visual (GLX, ARGB) also needs its own
+      // colormap and an explicit border pixel: inheriting either from a
+      // parent of a different depth is a BadMatch (X11 CreateWindow)
+      this.visual = args.visual ?? 0;
+      this.depth = args.depth ?? 0;
+      this.windowClass = args.windowClass ?? 0;
+      if (this.visual) {
+        if (values.colormap === undefined) {
+          this._ownedColormap = app.createColormap(this.visual);
+          values.colormap = this._ownedColormap;
+        }
+        if (values.borderPixel === undefined && values.borderPixmap === undefined) values.borderPixel = 0;
+      }
+      const borderWidth = args.borderWidth ?? 0;
+      X.CreateWindow(
+        this.id, parentId, this.x, this.y, this.width, this.height,
+        borderWidth, this.depth, this.windowClass, this.visual, values
+      );
     } else {
       this.id = args.id;
       this.eventMask = 0;
+      this.visual = 0;
+      this.depth = 0;
       // populate width and height
       X.GetGeometry(this.id, (err, res) => {
         if (!err) {
@@ -124,6 +145,7 @@ export default class Window extends Drawable {
           this.height = res.height;
           this.x = res.xPos;
           this.y = res.yPos;
+          this.depth = res.depth;
         }
         this._readyPromiseResolve();
       });
@@ -293,7 +315,9 @@ export default class Window extends Drawable {
       parent: this,
       width: newW,
       height: newH,
-      depth: this.display.screen[0].root_depth
+      // must match the window's depth: CopyArea between drawables of
+      // different depths is a BadMatch
+      depth: this.depth || this.display.screen[0].root_depth
     });
     if (!this._clearGc) {
       // reusable across reallocs: a GC is valid for any drawable of the
@@ -974,6 +998,11 @@ export default class Window extends Drawable {
       this._backing = null;
     }
     safeRelease(this.X, () => this.X.DestroyWindow(this.id));
+    if (this._ownedColormap) {
+      const colormap = this._ownedColormap;
+      this._ownedColormap = null;
+      safeRelease(this.X, () => this.X.FreeColormap(colormap));
+    }
   }
 
   [Symbol.dispose]() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ntk",
-  "version": "3.5.2",
+  "version": "3.6.0",
   "description": "Desktop UI toolkit for X11 with canvas-like 2d and OpenGL rendering",
   "author": "Andrey Sidorov <sidorares@yandex.ru>",
   "license": "MIT",