@thi.ng/webgl-msdf 2.1.100 → 2.1.101

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # Change Log
 
-- **Last updated**: 2023-12-09T19:12:04Z
+- **Last updated**: 2023-12-11T10:07:09Z
 - **Generator**: [thi.ng/monopub](https://thi.ng/monopub)
 
 All notable changes to this project will be documented in this file.

package/api.js

@@ -1 +0,0 @@
-export {};

package/convert.js

@@ -1,24 +1,20 @@
-/**
- * Takes a JSON spec produced by the MSDF font generator at
- * https://github.com/donmccurdy/msdf-bmfont-web and transforms it into a
- * filtered, more compact glyph spec used by the functions of this module.
- *
- * @param raw -
- */
-export const convertGlyphs = (raw) => ({
-    fontFace: raw.info.face,
-    fontSize: raw.info.size,
-    lineHeight: raw.common.lineHeight,
-    baseLine: raw.common.base,
-    tex: raw.pages[0],
-    size: [raw.common.scaleW, raw.common.scaleH],
-    chars: raw.chars.reduce((acc, ch) => {
-        acc[String.fromCharCode(ch.id)] = {
-            pos: [ch.x, ch.y],
-            offset: [ch.xoffset, ch.yoffset],
-            size: [ch.width, ch.height],
-            step: ch.xadvance,
-        };
-        return acc;
-    }, {}),
+const convertGlyphs = (raw) => ({
+  fontFace: raw.info.face,
+  fontSize: raw.info.size,
+  lineHeight: raw.common.lineHeight,
+  baseLine: raw.common.base,
+  tex: raw.pages[0],
+  size: [raw.common.scaleW, raw.common.scaleH],
+  chars: raw.chars.reduce((acc, ch) => {
+    acc[String.fromCharCode(ch.id)] = {
+      pos: [ch.x, ch.y],
+      offset: [ch.xoffset, ch.yoffset],
+      size: [ch.width, ch.height],
+      step: ch.xadvance
+    };
+    return acc;
+  }, {})
 });
+export {
+  convertGlyphs
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thi.ng/webgl-msdf",
-  "version": "2.1.100",
+  "version": "2.1.101",
   "description": "Multi-channel SDF font rendering & basic text layout for WebGL",
   "type": "module",
   "module": "./index.js",
@@ -24,7 +24,9 @@
   "author": "Karsten Schmidt (https://thi.ng)",
   "license": "Apache-2.0",
   "scripts": {
-    "build": "yarn clean && tsc --declaration",
+    "build": "yarn build:esbuild && yarn build:decl",
+    "build:decl": "tsc --declaration --emitDeclarationOnly",
+    "build:esbuild": "esbuild --format=esm --platform=neutral --target=es2022 --tsconfig=tsconfig.json --outdir=. src/**/*.ts",
     "clean": "rimraf --glob '*.js' '*.d.ts' '*.map' doc",
     "doc": "typedoc --excludePrivate --excludeInternal --out doc src/index.ts",
     "doc:ae": "mkdir -p .ae/doc .ae/temp && api-extractor run --local --verbose",
@@ -33,16 +35,17 @@
     "test": "bun test"
   },
   "dependencies": {
-    "@thi.ng/api": "^8.9.11",
-    "@thi.ng/shader-ast": "^0.12.84",
-    "@thi.ng/transducers": "^8.8.14",
-    "@thi.ng/vector-pools": "^3.1.89",
-    "@thi.ng/vectors": "^7.8.8",
-    "@thi.ng/webgl": "^6.6.11"
+    "@thi.ng/api": "^8.9.12",
+    "@thi.ng/shader-ast": "^0.12.85",
+    "@thi.ng/transducers": "^8.8.15",
+    "@thi.ng/vector-pools": "^3.1.90",
+    "@thi.ng/vectors": "^7.8.9",
+    "@thi.ng/webgl": "^6.6.12"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "^7.38.3",
     "@types/node": "^20.10.2",
+    "esbuild": "^0.19.8",
     "rimraf": "^5.0.5",
     "tools": "^0.0.1",
     "typedoc": "^0.25.4",
@@ -92,5 +95,5 @@
     "parent": "@thi.ng/webgl",
     "year": 2019
   },
-  "gitHead": "25f2ac8ff795a432a930119661b364d4d93b59a0\n"
+  "gitHead": "5e7bafedfc3d53bc131469a28de31dd8e5b4a3ff\n"
 }

package/shader.js

@@ -1,7 +1,13 @@
 import { assign } from "@thi.ng/shader-ast/ast/assign";
 import { discard, ifThen } from "@thi.ng/shader-ast/ast/controlflow";
 import { defMain, defn, ret } from "@thi.ng/shader-ast/ast/function";
-import { FLOAT0, FLOAT05, FLOAT1, vec2, vec4, } from "@thi.ng/shader-ast/ast/lit";
+import {
+  FLOAT0,
+  FLOAT05,
+  FLOAT1,
+  vec2,
+  vec4
+} from "@thi.ng/shader-ast/ast/lit";
 import { add, div, lt, mul, sub } from "@thi.ng/shader-ast/ast/ops";
 import { $x, $xyz, $y, $z } from "@thi.ng/shader-ast/ast/swizzle";
 import { sym } from "@thi.ng/shader-ast/ast/sym";
@@ -9,58 +15,74 @@ import { clamp, max, min, mix } from "@thi.ng/shader-ast/builtin/math";
 import { fwidth, texture } from "@thi.ng/shader-ast/builtin/texture";
 import { ONE4, ZERO4 } from "@thi.ng/vectors/api";
 import { BLEND_NORMAL } from "@thi.ng/webgl/api/blend";
-export const median3 = defn("float", "median3", ["vec3"], (v) => [
-    ret(max(min($x(v), $y(v)), min(max($x(v), $y(v)), $z(v)))),
+const median3 = defn("float", "median3", ["vec3"], (v) => [
+  ret(max(min($x(v), $y(v)), min(max($x(v), $y(v)), $z(v))))
 ]);
-export const msdfSample = defn("vec2", "msdfSample", ["sampler2D", "vec2"], (tex, uv) => {
+const msdfSample = defn(
+  "vec2",
+  "msdfSample",
+  ["sampler2D", "vec2"],
+  (tex, uv) => {
     let sd;
     let w;
     return [
-        (sd = sym(sub(median3($xyz(texture(tex, uv))), FLOAT05))),
-        (w = sym(clamp(add(div(sd, fwidth(sd)), FLOAT05), FLOAT0, FLOAT1))),
-        ret(vec2(sd, w)),
+      sd = sym(sub(median3($xyz(texture(tex, uv))), FLOAT05)),
+      w = sym(clamp(add(div(sd, fwidth(sd)), FLOAT05), FLOAT0, FLOAT1)),
+      ret(vec2(sd, w))
     ];
+  }
+);
+const msdfShader = (opts = {}) => ({
+  vs: (gl, unis, ins, outs) => [
+    defMain(() => [
+      assign(outs.vuv, ins.uv),
+      opts.color ? assign(outs.vcolor, ins.color) : null,
+      assign(
+        gl.gl_Position,
+        mul(mul(unis.proj, unis.modelview), vec4(ins.position, 1))
+      )
+    ])
+  ],
+  fs: (_, unis, ins, outs) => [
+    defMain(() => {
+      let w;
+      return [
+        w = sym(msdfSample(unis.tex, ins.vuv)),
+        assign(
+          outs.fragColor,
+          mix(unis.bg, opts.color ? ins.vcolor : unis.fg, $y(w))
+        ),
+        ifThen(lt($x(w), unis.thresh), [discard])
+      ];
+    })
+  ],
+  ext: {
+    OES_standard_derivatives: true
+  },
+  attribs: {
+    position: "vec3",
+    uv: "vec2",
+    ...opts.color ? { color: "vec4" } : null
+  },
+  varying: {
+    vuv: "vec2",
+    ...opts.color ? { vcolor: "vec4" } : null
+  },
+  uniforms: {
+    modelview: "mat4",
+    proj: "mat4",
+    tex: "sampler2D",
+    thresh: ["float", 1e-3],
+    bg: ["vec4", ZERO4],
+    ...!opts.color ? { fg: ["vec4", ONE4] } : null
+  },
+  state: {
+    blend: true,
+    blendFn: BLEND_NORMAL
+  }
 });
-export const msdfShader = (opts = {}) => ({
-    vs: (gl, unis, ins, outs) => [
-        defMain(() => [
-            assign(outs.vuv, ins.uv),
-            opts.color ? assign(outs.vcolor, ins.color) : null,
-            assign(gl.gl_Position, mul(mul(unis.proj, unis.modelview), vec4(ins.position, 1))),
-        ]),
-    ],
-    fs: (_, unis, ins, outs) => [
-        defMain(() => {
-            let w;
-            return [
-                (w = sym(msdfSample(unis.tex, ins.vuv))),
-                assign(outs.fragColor, mix(unis.bg, opts.color ? ins.vcolor : unis.fg, $y(w))),
-                ifThen(lt($x(w), unis.thresh), [discard]),
-            ];
-        }),
-    ],
-    ext: {
-        OES_standard_derivatives: true,
-    },
-    attribs: {
-        position: "vec3",
-        uv: "vec2",
-        ...(opts.color ? { color: "vec4" } : null),
-    },
-    varying: {
-        vuv: "vec2",
-        ...(opts.color ? { vcolor: "vec4" } : null),
-    },
-    uniforms: {
-        modelview: "mat4",
-        proj: "mat4",
-        tex: "sampler2D",
-        thresh: ["float", 1e-3],
-        bg: ["vec4", ZERO4],
-        ...(!opts.color ? { fg: ["vec4", ONE4] } : null),
-    },
-    state: {
-        blend: true,
-        blendFn: BLEND_NORMAL,
-    },
-});
+export {
+  median3,
+  msdfSample,
+  msdfShader
+};

package/text.js

@@ -9,80 +9,102 @@ import { ONE4 } from "@thi.ng/vectors/api";
 import { invert2 } from "@thi.ng/vectors/invert";
 import { madd2 } from "@thi.ng/vectors/madd";
 import { mul2 } from "@thi.ng/vectors/mul";
-export const text = (glyphs, txt, opts) => {
-    opts = {
-        align: alignLeft,
-        spacing: 1,
-        leading: 1,
-        dirX: 1,
-        dirY: 1,
-        color: ONE4,
-        ...opts,
-    };
-    const dir = [opts.dirX, opts.dirY];
-    const lineHeight = glyphs.lineHeight * opts.leading * opts.dirY;
-    const len = txt.replace("\n", "").length;
-    const attribs = new AttribPool({
-        attribs: {
-            position: { type: "f32", size: 3, byteOffset: 0 },
-            uv: { type: "f32", size: 2, byteOffset: 12 },
-            ...(opts.useColor
-                ? {
-                    color: {
-                        type: "f32",
-                        default: opts.color,
-                        size: 4,
-                        byteOffset: 20,
-                    },
-                }
-                : null),
-        },
-        num: len * 4,
-        mem: {
-            size: len * 4 * (opts.useColor ? 36 : 20) + 8 + /* FIXME */ 40,
-        },
-    });
-    const lines = txt.split("\n");
-    const invSize = invert2([], glyphs.size);
-    for (let i = 0, yy = 0, id = 0; i < lines.length; i++) {
-        const line = lines[i];
-        let xx = opts.align(glyphs, opts, line);
-        for (let j = 0; j < line.length; j++, id++) {
-            const { pos, size, offset, step } = glyphs.chars[line[j]];
-            const [sx, sy] = mul2([], size, dir);
-            const [x, y] = madd2([], offset, dir, [xx, yy]);
-            attribs.setAttribValues("position", [
-                [x, y, 0],
-                [x + sx, y, 0],
-                [x + sx, y + sy, 0],
-                [x, y + sy, 0],
-            ], id * 4);
-            attribs.setAttribValues("uv", [
-                mul2([], pos, invSize),
-                mul2([], [pos[0] + size[0], pos[1]], invSize),
-                addm2([], pos, size, invSize),
-                mul2([], [pos[0], pos[1] + size[1]], invSize),
-            ], id * 4);
-            xx += step * opts.dirX * opts.spacing;
+const text = (glyphs, txt, opts) => {
+  opts = {
+    align: alignLeft,
+    spacing: 1,
+    leading: 1,
+    dirX: 1,
+    dirY: 1,
+    color: ONE4,
+    ...opts
+  };
+  const dir = [opts.dirX, opts.dirY];
+  const lineHeight = glyphs.lineHeight * opts.leading * opts.dirY;
+  const len = txt.replace("\n", "").length;
+  const attribs = new AttribPool({
+    attribs: {
+      position: { type: "f32", size: 3, byteOffset: 0 },
+      uv: { type: "f32", size: 2, byteOffset: 12 },
+      ...opts.useColor ? {
+        color: {
+          type: "f32",
+          default: opts.color,
+          size: 4,
+          byteOffset: 20
         }
-        yy += lineHeight;
+      } : null
+    },
+    num: len * 4,
+    mem: {
+      size: len * 4 * (opts.useColor ? 36 : 20) + 8 + /* FIXME */
+      40
     }
-    return {
-        attribPool: attribs,
-        indices: {
-            data: new Uint16Array([
-                ...mapcat((i) => [i, i + 1, i + 2, i, i + 2, i + 3], range(0, len * 4, 4)),
-            ]),
-        },
-        uniforms: {},
-        num: len * 6,
-        mode: 4, // TRIANGLES
-    };
+  });
+  const lines = txt.split("\n");
+  const invSize = invert2([], glyphs.size);
+  for (let i = 0, yy = 0, id = 0; i < lines.length; i++) {
+    const line = lines[i];
+    let xx = opts.align(glyphs, opts, line);
+    for (let j = 0; j < line.length; j++, id++) {
+      const { pos, size, offset, step } = glyphs.chars[line[j]];
+      const [sx, sy] = mul2([], size, dir);
+      const [x, y] = madd2([], offset, dir, [xx, yy]);
+      attribs.setAttribValues(
+        "position",
+        [
+          [x, y, 0],
+          [x + sx, y, 0],
+          [x + sx, y + sy, 0],
+          [x, y + sy, 0]
+        ],
+        id * 4
+      );
+      attribs.setAttribValues(
+        "uv",
+        [
+          mul2([], pos, invSize),
+          mul2([], [pos[0] + size[0], pos[1]], invSize),
+          addm2([], pos, size, invSize),
+          mul2([], [pos[0], pos[1] + size[1]], invSize)
+        ],
+        id * 4
+      );
+      xx += step * opts.dirX * opts.spacing;
+    }
+    yy += lineHeight;
+  }
+  return {
+    attribPool: attribs,
+    indices: {
+      data: new Uint16Array([
+        ...mapcat(
+          (i) => [i, i + 1, i + 2, i, i + 2, i + 3],
+          range(0, len * 4, 4)
+        )
+      ])
+    },
+    uniforms: {},
+    num: len * 6,
+    mode: 4
+    // TRIANGLES
+  };
+};
+const textWidth = (font, opts, txt) => {
+  const s = opts.spacing !== void 0 ? opts.spacing : 1;
+  return transduce(
+    map((x) => font.chars[x].step * s),
+    add(),
+    txt
+  );
 };
-export const textWidth = (font, opts, txt) => {
-    const s = opts.spacing !== undefined ? opts.spacing : 1;
-    return transduce(map((x) => font.chars[x].step * s), add(), txt);
+const alignLeft = () => 0;
+const alignRight = (font, opts, line) => -(opts.dirX || 1) * textWidth(font, opts, line);
+const alignCenter = (font, opts, line) => -(opts.dirX || 1) * textWidth(font, opts, line) / 2;
+export {
+  alignCenter,
+  alignLeft,
+  alignRight,
+  text,
+  textWidth
 };
-export const alignLeft = () => 0;
-export const alignRight = (font, opts, line) => -(opts.dirX || 1) * textWidth(font, opts, line);
-export const alignCenter = (font, opts, line) => (-(opts.dirX || 1) * textWidth(font, opts, line)) / 2;