ntk 2.2.0 → 3.0.0

package/package.json

@@ -1,56 +1,60 @@
-{
-  "name": "ntk",
-  "author": "Andrey Sidorov <sidorares@yandex.ru>",
-  "description": "Desktop UI tollkit/widgets set",
-  "keywords": [
-    "ui",
-    "gui",
-    "widgets",
-    "desktop"
-  ],
-  "homepage": "https://github.com/sidorares/ntk",
-  "version": "2.2.0",
-  "maintainers": [
-    {
-      "name": "Andrey Sidorov",
-      "email": "sidoares@yandex.ru"
-    }
-  ],
-  "bugs": {
-    "url": "http://github.com/sidorares/ntk/issues"
-  },
-  "licenses": [
-    {
-      "type": "MIT"
-    }
-  ],
-  "repository": {
-    "type": "git",
-    "url": "http://github.com/sidorares/ntk.git"
-  },
-  "main": "./lib/index.js",
-  "engines": {
-    "node": "*"
-  },
-  "devDependencies": {
-    "mocha": "*",
-    "should": "*"
-  },
-  "dependencies": {
-    "bezier": "^0.1.0",
-    "canvas-fontstyle": "^1.0.1",
-    "extrude-polyline": "^1.0.6",
-    "font-scanner": "^0.1.1",
-    "freetype2": "^0.3.1",
-    "gaussian-convolution-kernel": "^1.0.0",
-    "keysym": "0.0.6",
-    "parse-color": "^1.0.0",
-    "pnltri": "^2.1.1",
-    "weak-napi": "^1.0.2",
-    "x11": "^2.3.0"
-  },
-  "scripts": {
-    "test": "mocha",
-    "prepublish": "npm prune"
-  }
-}
+{
+  "name": "ntk",
+  "version": "3.0.0",
+  "description": "Desktop UI toolkit for X11 with canvas-like 2d and OpenGL rendering",
+  "author": "Andrey Sidorov <sidorares@yandex.ru>",
+  "license": "MIT",
+  "keywords": [
+    "ui",
+    "gui",
+    "widgets",
+    "desktop",
+    "x11",
+    "canvas",
+    "xrender"
+  ],
+  "homepage": "https://github.com/sidorares/ntk",
+  "bugs": {
+    "url": "https://github.com/sidorares/ntk/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sidorares/ntk.git"
+  },
+  "type": "module",
+  "main": "./lib/index.js",
+  "exports": {
+    ".": "./lib/index.js"
+  },
+  "files": [
+    "lib"
+  ],
+  "engines": {
+    "node": ">=20.19.0"
+  },
+  "dependencies": {
+    "@dagrejs/dagre": "^3.0.0",
+    "bidi-js": "^1.0.3",
+    "canvas-fontstyle": "^1.0.1",
+    "css-select": "^7.0.0",
+    "domutils": "^4.0.2",
+    "extrude-polyline": "^1.0.6",
+    "fontkit": "^2.0.4",
+    "highlight.js": "^11.11.1",
+    "htmlparser2": "^12.0.0",
+    "jpeg-js": "^0.4.4",
+    "katex": "^0.18.1",
+    "keysym": "0.0.6",
+    "linebreak": "^1.1.0",
+    "marked": "^18.0.7",
+    "mermaid": "^11.16.0",
+    "parse-color": "^1.0.0",
+    "pngjs": "^7.0.0",
+    "postcss": "^8.5.23",
+    "x11": "^3.1.0",
+    "yoga-layout": "^3.2.1"
+  },
+  "scripts": {
+    "test": "node --test"
+  }
+}

package/examples/example-await.js

@@ -1,23 +0,0 @@
-var ntk = require('../lib');
-
-async function test() {
-  var app = await ntk.createClient();
-  var wnd = app.createWindow({title: "Close me!", x: 100, y: 100, width: 300, height: 300});
-
-  // await wnd.mapped(); - map() + wait for 'is visible' event
-
-  wnd.map();
-
-  var tree    = await wnd.tree;
-  var pointer = await wnd.pointer;
-  var ctx     = await wnd.getContext('2d');
-
-  // all in parallel
-  let [tree, pointer, ctx] = await [wnd.tree, wnd.pointer, wnd.getContext('2d')]
-
-  wnd.on('mousedown', function(ev) {
-    console.log(ev);
-  });
-}
-
-test();

package/examples/example-co.js

@@ -1,13 +0,0 @@
-var ntk = require('../lib');
-var co = require('co');
-
-co(function*() {
-
-  var app = yield ntk.createClient();
-  var wnd = app.createWindow({title: "Close me!", x: 100, y: 100, width: 300, height: 300});
-  wnd.map();
-  wnd.on('mousedown', function(ev) {
-    console.log(ev);
-  });
-
-});

package/examples/example.js

@@ -1,14 +0,0 @@
-var ntk = require('../lib');
-
-ntk.createClient(main);
-
-function main(err, app) {
-  var mainwnd = app.createWindow({title: "Close me!"})
-   .on('mouseout', function(ev) { console.log('Out'); })
-   .on('mouseover', function(ev) { console.log('In'); })
-   .on('mousedown', function(ev) {
-       ev.window.unmap();
-       setTimeout(function() { ev.window.map(); }, 1000);
-    })
-   .map();
-}

package/examples/fill-styles.js

@@ -1,39 +0,0 @@
-var ntk = require('../lib');
-
-ntk.createClient( (err, app) => {
-  var wnd = app.createWindow({ width: 800, height: 600});
-  var ctx = wnd.getContext('2d');
-
-  var text = 'This is Test test';
-
-  var lastx = 0;
-  var lasty = 0;
-
-  wnd.on('expose', (ev) => {
-    ctx.fillStyle = 'white';
-    ctx.fillRect(ev.x, ev.y, ev.width, ev.height, 1, 0.5, 0.5, 1);
-    ctx.font = "50px 'Times New Roman'";
-    var w = ctx.measureText(text).width;
-    ctx.fillStyle = ctx.createLinearGradient(0, 0, w, 100)
-      .addColorStop(0, 'red')
-      .addColorStop(1, 'blue');
-    ctx.fillStyle = 'red'; //'rgba(200, 200, 180, 0.7)';
-    ctx.fillText(text, 100, 100);// 750 - w, 250);
-  });
-  var shift = 0;
-  wnd.on('keydown', function(ev) {
-    if (ev.codepoint == 8)
-      text = text.slice(0, -1);
-    else if (ev.codepoint)
-      text = text + String.fromCodePoint(ev.codepoint);
-
-    wnd.emit('expose', { x: 0, y: 0, width: 1000, height: 1000});
-  });
-  wnd.on('mousemove', function(ev) {
-    lastx = ev.x;
-    lasty = ev.y;
-    wnd.emit('expose', { x: 0, y: 0, width: 1000, height: 1000});
-  });
-  wnd.map();
-});
-

package/examples/glclock.js

@@ -1,100 +0,0 @@
-var ntk = require('../lib');
-
-var width = 300;
-var height = 300;
-var angle = 0;
-
-function draw(gl) {
-    gl.Enable(gl.BLEND);
-    gl.BlendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-    gl.Viewport(0, 0, width, height);
-    gl.MatrixMode(gl.PROJECTION);
-    gl.LoadIdentity();
-    if (width < height)
-      gl.Frustum(-1.0, 1.0, -height/width, height/width, -35.0, 20);
-    else
-      gl.Frustum(-width/height, width/height, -1, 1, -35.0, 20);
-    gl.MatrixMode(gl.MODELVIEW);
-    gl.LoadIdentity();
-
-    gl.ClearColor(0.3,0.3,0.3,0.0);
-    gl.Clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
-
-    gl.Color3f(1, 0, 0);
-    for (var i=0; i < 12; ++i) {
-    gl.Rotatef(30, 0, 0, 1);
-    gl.Begin(gl.QUADS);
-       gl.Vertex3f(-0.01, 0.8, 0);
-       gl.Vertex3f(-0.01, 1.0, 0);
-       gl.Vertex3f(0.01, 1.0, 0);
-       gl.Vertex3f(0.01, 0.8, 0);
-    gl.End();
-    }
-    gl.LoadIdentity();
-    gl.Color4f(0, 0, 1, 0.3);
-    for (var i=0; i < 60; ++i) {
-    gl.Rotatef(6, 0, 0, 1);
-    gl.PointSize(8);
-    gl.Begin(gl.POINTS);
-       gl.Vertex3f(0, 0.99, 0);
-    gl.End();
-    gl.Begin(gl.QUADS);
-       gl.Vertex3f(-0.003, 0.85, 0);
-       gl.Vertex3f(-0.003, 1.0, 0);
-       gl.Vertex3f(0.003, 1.0, 0);
-       gl.Vertex3f(0.003, 0.85, 0);
-    gl.End();
-    }
-
-    var t = new Date();
-    gl.LoadIdentity();
-    gl.Color4f(1, 1, 1, 0.5);
-    gl.Rotatef(-(t.getSeconds()*6000+6*t.getMilliseconds())/1000, 0, 0, 1);
-    gl.Begin(gl.TRIANGLES);
-      gl.Vertex3f(-0.02, -0.1, 0);
-      gl.Vertex3f(0, 0.9, 0);
-      gl.Vertex3f(0.02, -0.1, 0);
-    gl.End();
-
-    gl.LoadIdentity();
-    gl.Color4f(0.5, 0.5, 0.1, 0.5);
-    gl.Rotatef(-t.getMinutes()*6 -t.getSeconds()/10 - t.getMilliseconds()/10000, 0, 0, 1);
-    gl.Begin(gl.TRIANGLES);
-      gl.Vertex3f(-0.05, -0.1, 0);
-      gl.Vertex3f(0, 0.8, 0);
-      gl.Vertex3f(0.05, -0.1, 0);
-    gl.End();
-
-    gl.LoadIdentity();
-    gl.Color4f(0, 0, 0, 0.5);
-    gl.Rotatef(-(t.getHours()*30 + t.getMinutes()/2), 0, 0, 1);
-    gl.Begin(gl.TRIANGLES);
-      gl.Vertex3f(-0.08, -0.1, 0);
-      gl.Vertex3f(0, 0.6, 0);
-      gl.Vertex3f(0.08, -0.1, 0);
-    gl.End();
-
-}
-
-ntk.createClient(function(err, app) {
-
-  var wnd = app.createWindow({title: "GL clock", x: 100, y: 100, width: 300, height: 300});
-  wnd.map();
-  var gl = wnd.getContext('opengl');
-
-  gl.Enable(gl.POINT_SMOOTH);
-
-  function drawAndFinish() {
-    draw(gl);
-    gl.SwapBuffers();
-    gl.Finish(drawAndFinish);
-  }
-  drawAndFinish();
-
-  wnd.on('resize', function(ev) {
-     width = ev.width;
-     height = ev.height;
-     draw(gl);
-     gl.SwapBuffers();
-  });
-});

package/examples/glxpixmap.js

@@ -1,12 +0,0 @@
-var ntk = require('../lib');
-var Pixmap = require('../lib/pixmap');
-
-ntk.createClient(function(err, app) {
-  var wnd = app.createWindow({title: 'opengl drawable as texture example', x: 100, y: 100, width: 300, height: 300});
-  wnd.map();
-  var xpixmap = new Pixmap(app, {parent: wnd, width: 512, height: 512, depth: 24});
-  var gl = wnd.getContext('opengl');
-  var pixmap = gl.CreateGLXPixmap(xpixmap);
-  console.log('gl.BindTexImage(', pixmap.id, 0x20DE );
-  //gl.BindTexImage(pixmap.id, 0x20DE);
-});

package/examples/gradient.js

@@ -1,41 +0,0 @@
-var ntk = require('../lib');
-
-var width = 300;
-var height = 300;
-var angle = 0;
-
-function draw(gl) {
-  //gl.Enable(gl.BLEND);
-  //gl.BlendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-  gl.Viewport(0, 0, width, height);
-  gl.MatrixMode(gl.PROJECTION);
-  gl.LoadIdentity();
-  gl.Frustum(-1.0, 1.0, -1, 1, -35.0, 20);
-  gl.MatrixMode(gl.MODELVIEW);
-  gl.LoadIdentity();
-
-  gl.ClearColor(0.3,0.3,0.3,0.0);
-  gl.Clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
-  gl.Begin(gl.QUADS);
-    gl.Color3f(1, 0, 0);
-    gl.Vertex3f(-1, -1, 0);
-    gl.Vertex3f(1, -1, 0);
-    gl.Color3f(1, 1, 0);
-    gl.Vertex3f(1, 1, 0);
-    gl.Vertex3f(-1, 1, 0);
-  gl.End();
-}
-
-ntk.createClient(main);
-function main(err, app) {
-  var wnd = app.createWindow({title: 'simple opengl gradient', x: 100, y: 100, width: 300, height: 300});
-  wnd.map();
-  var gl = wnd.getContext('opengl');
-  gl.Enable(gl.POINT_SMOOTH);
-  wnd.on('resize', function(ev) {
-    width = ev.width;
-    height = ev.height;
-    draw(gl);
-    gl.SwapBuffers();
-  });
-}

package/examples/package.json

@@ -1,17 +0,0 @@
-{
-  "name": "examples",
-  "version": "1.0.0",
-  "description": "",
-  "main": "example-await.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "dependencies": {
-    "baboon-image": "^2.1.0",
-    "bunny": "^1.0.1",
-    "teapot": "^1.0.0"
-  }
-}

package/examples/simpletex.js

@@ -1,72 +0,0 @@
-var ntk = require('../lib');
-
-var width = 300;
-var height = 300;
-var angle = 0;
-var angley = 0;
-
-function resize(gl) {
-  gl.Viewport(0, 0, width, height);
-  gl.MatrixMode(gl.PROJECTION);
-  gl.LoadIdentity();
-  if (width < height)
-    gl.Frustum(-1.0, 1.0, -height/width, height/width, -35.0, 20);
-  else
-    gl.Frustum(-width/height, width/height, -1.0, 1.0, -35.0, 20);
-}
-
-function draw(gl) {
-    gl.MatrixMode(gl.MODELVIEW);
-
-    gl.ClearColor(0.3,0.3,0.3,0.0);
-    gl.Clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
-
-    gl.LoadIdentity();
-    gl.Rotatef(-90 + 360*angle/width, 0, 0, 1);
-    // gl.Rotatef(angley, 0, 1, 0);
-    gl.Begin(gl.TRIANGLE_STRIP);
-      gl.TexCoord2f(0.0,0.0);
-      gl.Vertex3f(-1, -1, 0);
-
-      gl.TexCoord2f(1.0, 0.0);
-      gl.Vertex3f(1, -1, 0);
-
-      gl.TexCoord2f(0.0, 1.0);
-      gl.Vertex3f(-1, 1, 0);
-
-      gl.TexCoord2f(1.0,1.0);
-      gl.Vertex3f(1, 1, 0);
-    gl.End();
-    gl.SwapBuffers();
-}
-
-var texture = require('baboon-image');
-
-ntk.createClient(function(err, app) {
-
-  var wnd = app.createWindow({width: width, height: height});
-  wnd.map();
-  var visual = parseInt(require('child_process').execSync('glxinfo -i -b').toString());
-  var gl = wnd.getContext('opengl', visual);
-  gl.Enable(gl.TEXTURE_2D);
-  gl.GenTextures(1, function(err, textures) {
-    //gl.BindTexture(gl.TEXTURE_2D, textures[0]);
-    gl.BindTexture(gl.TEXTURE_2D, 1);
-    gl.TexParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
-    gl.TexParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
-
-    gl.TexImage2D(gl.TEXTURE_2D, 0, gl.RGB, 512, 512, 0, gl.RGB, gl.UNSIGNED_BYTE, texture.data);
-    draw(gl);
-
-    wnd.on('resize', function(ev) {
-       width = ev.width;
-       height = ev.height;
-       resize(gl);
-       draw(gl);
-    }).on('mousemove', function(ev) {
-      angle = ev.x;
-      angley = ev.y;
-      draw(gl);
-    });
-  });
-});

package/examples/teapot.js

@@ -1,104 +0,0 @@
-var ntk = require('../lib');
-
-var width = 300;
-var height = 300;
-var angle = 0;
-
-var model = require('./teapot.json');
-
-function makeList(gl, callback)
-{
-    gl.GenLists(1, function(err, list) {
-        listId = list;
-        gl.NewList(list, gl.COMPILE);
-        gl.Begin(gl.TRIANGLES);
-        for (var i=0; i < model.indices.length; i+=3) {
-            for (var t=i; t < i+3; t++) {
-              tr = model.indices[t];
-              var x = model.vertexNormals[tr*3 + 0];
-              var y = model.vertexNormals[tr*3 + 1];
-              var z = model.vertexNormals[tr*3 + 2];
-              gl.Normal3f(x, y, z);
-              var x = model.vertexPositions[tr*3 + 0];
-              var y = model.vertexPositions[tr*3 + 1];
-              var z = model.vertexPositions[tr*3 + 2];
-              gl.Vertex3f(x, y, z);
-            }
-        }
-        gl.End();
-        gl.EndList();
-        callback(list);
-    });
-}
-
-var scale = 0.1;
-var rotx = 0;
-var roty = 0;
-var lightangle = 0;
-
-function draw(gl, list) {
-{
-  var pos = [5.0, Math.sin(lightangle)*100, Math.cos(lightangle)*100.0, 0.0]
-  var red = [ 0.8, 0.1, 0.0, 1.0 ];
-  var green = [ 0.0, 0.8, 0.2, 1.0 ];
-  var blue = [ 0.2, 0.2, 1.0, 1.0 ];
-
-  gl.Lightfv(gl.LIGHT0, gl.POSITION, pos);
-  gl.Enable(gl.CULL_FACE);
-  gl.Enable(gl.LIGHTING);
-  gl.Enable(gl.LIGHT0);
-  gl.Enable(gl.DEPTH_TEST);
-  gl.Enable(gl.NORMALIZE);
-  gl.ShadeModel(gl.SMOOTH);
-
-  gl.Enable(gl.BLEND);
-  gl.BlendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-  gl.Viewport(0, 0, width, height);
-  gl.MatrixMode(gl.PROJECTION);
-  gl.LoadIdentity();
-  if (width < height)
-    gl.Frustum(-1.0, 1.0, -height/width, height/width, -35.0, 20);
-  else
-    gl.Frustum(-width/height, width/height, -1, 1, -35.0, 20);
-  gl.MatrixMode(gl.MODELVIEW);
-  gl.LoadIdentity();
-
-  gl.ClearColor(0.3,0.3,0.3,0.0);
-  gl.Clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
-
-  gl.Scalef(scale, scale, scale);
-  gl.Color3f(1, 0, 0);
-  gl.Rotatef(rotx, 0, 1, 0);
-  gl.Rotatef(-roty, 1, 0, 0);
-  gl.CallList(list)
-  gl.SwapBuffers();}
-}
-
-ntk.createClient(function(err, app) {
-  var wnd = app.createWindow({title: "Close me!", x: 100, y: 100, width: 300, height: 300});
-  wnd.map();
-  var gl = wnd.getContext('opengl');
-  gl.Enable(gl.POINT_SMOOTH);
-  makeList(gl, function(list) {
-    draw(gl, list);
-    setInterval(function() {
-      lightangle += 0.1;
-      draw(gl, list);
-    }, 50);
-    wnd.on('resize', function(ev) {
-       width = ev.width;
-       height = ev.height;
-       draw(gl, list);
-    }).on('mousemove', function(ev) {
-       rotx = ev.x;
-       roty = ev.y;
-       draw(gl, list);
-    }).on('mousedown', function(ev) {
-      if (ev.keycode == 4)
-        scale *= 0.9;
-      else
-        scale /= 0.9;
-      draw(gl, list);
-    });
-  });
-});