ntk 3.6.0 → 3.7.1

package/lib/events_map.js

@@ -9,6 +9,10 @@ eventName[5] = 'mouseup';
 eventName[6] = 'mousemove';
 eventName[7] = 'mouseover';
 eventName[8] = 'mouseout';
+// FocusIn/FocusOut: keyboard focus arriving at or leaving this window,
+// usually because the window manager moved it
+eventName[9] = 'focus';
+eventName[10] = 'blur';
 eventName[12] = 'expose';
 eventName[17] = 'destroy';
 eventName[18] = 'unmap';
@@ -40,6 +44,8 @@ export const mask = {
   resize: x11.eventMask.StructureNotify,
   reparent: x11.eventMask.StructureNotify,
   keydown: x11.eventMask.KeyPress,
+  focus: x11.eventMask.FocusChange,
+  blur: x11.eventMask.FocusChange,
   expose: x11.eventMask.Exposure,
   map_request: x11.eventMask.SubstructureRedirect,
   configure_request: x11.eventMask.SubstructureRedirect,
@@ -74,6 +80,8 @@ export const toSnake = {
   onResize: 'resize',
   onReparent: 'reparent',
   onKeyDown: 'keydown',
+  onFocus: 'focus',
+  onBlur: 'blur',
   onExpose: 'expose',
   onMapRequest: 'map_request',
   onConfigureRequest: 'configure_request',

package/lib/renderingcontext_2d.js

@@ -17,7 +17,7 @@ import {
 } from './path.js';
 import Picture from './picture.js';
 import Pixmap from './pixmap.js';
-import { drawGlyphRuns } from './text/glyphs.js';
+import { compositeTraps, drawGlyphRuns } from './text/glyphs.js';
 import { TextLayout } from './text/layout.js';
 import { reorderRuns } from './text/shape.js';
 import { trapezoidize } from './trapezoid.js';
@@ -810,6 +810,39 @@ class RenderingContext2d {
     this._markDirty();
   }
 
+  /**
+   * Trapezoid coverage under the clip — `drawGlyphs` for vector shapes that
+   * are already trapezoidized (KaTeX radicals and rules go this way).
+   * Without it they composite straight to the destination picture and spill
+   * out of clipped boxes, which is what glyphs used to do.
+   */
+  drawTraps(op, src, traps) {
+    if (!traps.length) return;
+    const app = this.window.app;
+    const R = this.Render;
+    if (!this.clipMask) {
+      compositeTraps(app, op, src.id, this.picture.id, traps);
+      this._markDirty();
+      return;
+    }
+    const rect = this._clipRect();
+    if (rect) {
+      if (rect.w === 0 || rect.h === 0) return;
+      R.SetPictureClipRectangles(this.picture.id, 0, 0, [rect.x, rect.y, rect.w, rect.h]);
+      compositeTraps(app, op, src.id, this.picture.id, traps);
+      R.SetPictureClipRectangles(this.picture.id, 0, 0, [0, 0, this.width, this.height]);
+      this._markDirty();
+      return;
+    }
+    this._ensureFillMask();
+    this._glyphSource ??= this.createSolidPicture(1, 1, 1, 1);
+    R.FillRectangles(R.PictOp.Src, this.fillMask.id, [0, 0, 0, 0], [0, 0, this.width, this.height]);
+    compositeTraps(app, R.PictOp.Over, this._glyphSource.id, this.fillMask.id, traps);
+    R.Composite(R.PictOp.In, this.clipMask.id, 0, this.fillMask.id, 0, 0, 0, 0, 0, 0, this.width, this.height);
+    R.Composite(op, src.id, this.fillMask.id, this.picture.id, 0, 0, 0, 0, 0, 0, this.width, this.height);
+    this._markDirty();
+  }
+
   // combined clip ∩ globalAlpha mask for direct composites (rect/image
   // fast paths); returns a picture id or 0. Reuses the fill scratch mask.
   _compositeMask() {

package/lib/widgets/tex.js

@@ -22,7 +22,6 @@ import { parseSvgPath } from '../path.js';
 import { flatten } from '../rasterize.js';
 import { trapezoidize } from '../trapezoid.js';
 import Font from '../text/font.js';
-import { compositeTraps, drawGlyphRuns } from '../text/glyphs.js';
 
 // node builtins are fetched lazily so browser bundles never resolve them;
 // there, inject the assets with configureTex() instead.
@@ -571,7 +570,7 @@ export class TexBox {
       Render.Composite(
         Render.PictOp.Over,
         src.id,
-        ctx.clipMask ? ctx.clipMask.id : 0,
+        ctx._compositeMask(),
         ctx.picture.id,
         Math.round(x + item.x),
         Math.round(base + item.y),
@@ -598,7 +597,9 @@ export class TexBox {
         }
         trapezoidize([clipped], x + item.x, base + item.y, traps);
       }
-      compositeTraps(app, Render.PictOp.Over, src.id, ctx.picture.id, traps);
+      // through the context, so the clip applies — compositing straight to
+      // ctx.picture spills out of scrollviews and clipped boxes
+      ctx.drawTraps(Render.PictOp.Over, src, traps);
     }
 
     // batch every run of the same color into a single CompositeGlyphs
@@ -612,7 +613,7 @@ export class TexBox {
     }
     for (const { color, runs } of byColor.values()) {
       const src = color ? ctx._stylePicture(color) : ctx._backgroundPicture;
-      drawGlyphRuns(app, Render.PictOp.Over, src.id, ctx.picture.id, runs);
+      ctx.drawGlyphs(Render.PictOp.Over, src, runs);
     }
 
     ctx._markDirty();

package/lib/window.js

@@ -922,8 +922,77 @@ export default class Window extends Drawable {
     return this;
   }
 
-  grabPointer() {
-    this.X.GrabPointer(this.id, true, x11.eventMask.PointerMotion, 0, 1, 0, 0, 0);
+  /**
+   * Take the keyboard focus (X SetInputFocus). `revertTo` says where focus
+   * goes if this window becomes unviewable: 0 None, 1 PointerRoot,
+   * 2 Parent (the default, and the sane choice for a child window).
+   *
+   * Note a window manager may take focus back — the authority is the
+   * 'focus'/'blur' events, not the request.
+   */
+  focus(revertTo = 2) {
+    safeRelease(this.X, () => this.X.SetInputFocus(this.id, revertTo));
+    return this;
+  }
+
+  /** Which window the server currently gives keyboard input to. */
+  queryFocus(callback) {
+    this.X.GetInputFocus(callback);
+    return this;
+  }
+
+  /**
+   * Take a pointer grab (X GrabPointer). This is how menus work on X: while
+   * the grab is held, presses anywhere on the screen are reported to this
+   * window instead of going to the window under the pointer — including the
+   * window manager's frames — so a click outside can dismiss the menu.
+   *
+   * With `ownerEvents` (the default) events over the client's *own* windows
+   * are still delivered to them normally, so a submenu keeps working.
+   *
+   * @param {object} [options] { ownerEvents, events, cursor, confineTo, time }
+   * @param {function} [callback] cb(err, status) — 0 is Success, 1 is
+   *   AlreadyGrabbed by another client
+   */
+  grabPointer(options = {}, callback) {
+    const {
+      ownerEvents = true,
+      events = x11.eventMask.ButtonPress | x11.eventMask.ButtonRelease | x11.eventMask.PointerMotion,
+      pointerMode = 1, // Asynchronous
+      keyboardMode = 1,
+      confineTo = 0,
+      cursor = 0,
+      time = 0 // CurrentTime
+    } = options;
+    this.X.GrabPointer(
+      this.id,
+      ownerEvents,
+      events,
+      pointerMode,
+      keyboardMode,
+      confineTo,
+      cursor,
+      time,
+      callback ?? (() => {})
+    );
+    return this;
+  }
+
+  ungrabPointer(time = 0) {
+    safeRelease(this.X, () => this.X.UngrabPointer(time));
+    return this;
+  }
+
+  /** Keyboard counterpart: keys go here while the grab is held. */
+  grabKeyboard(options = {}, callback) {
+    const { ownerEvents = true, pointerMode = 1, keyboardMode = 1, time = 0 } = options;
+    this.X.GrabKeyboard(this.id, ownerEvents, time, pointerMode, keyboardMode, callback ?? (() => {}));
+    return this;
+  }
+
+  ungrabKeyboard(time = 0) {
+    safeRelease(this.X, () => this.X.UngrabKeyboard(time));
+    return this;
   }
 
   reparentTo(newParent, x, y) {

package/package.json

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