@genome-spy/core 0.40.0 → 0.41.0

package/dist/src/marks/mark.d.ts

@@ -1,4 +1,9 @@
 /// <reference types="external-typings/internmap.js" />
+/**
+ * @param {any} x
+ * @returns {x is import("../spec/mark.js").ExprRef}
+ */
+export function isExprRef(x: any): x is import("../spec/mark.js").ExprRef;
 export const SAMPLE_FACET_UNIFORM: "SAMPLE_FACET_UNIFORM";
 export const SAMPLE_FACET_TEXTURE: "SAMPLE_FACET_TEXTURE";
 /**
@@ -20,6 +25,7 @@ export default class Mark {
      * @typedef {import("../spec/channel.js").Channel} Channel
      * @typedef {import("../spec/channel.js").Encoding} Encoding
      * @typedef {import("../spec/channel.js").ValueDef} ValueDef
+     * @typedef {import("../spec/mark.js").ExprRef} ExprRef
      */
     /**
      * @param {import("../view/unitView.js").default} unitView
@@ -40,6 +46,18 @@ export default class Mark {
     domainUniformInfo: import("twgl.js").UniformBlockInfo;
     /** @type {import("twgl.js").UniformBlockInfo} WebGL buffers */
     viewUniformInfo: import("twgl.js").UniformBlockInfo;
+    /**
+     * Uniforms related to the specific mark type.
+     * @type {import("twgl.js").UniformBlockInfo}
+     */
+    markUniformInfo: import("twgl.js").UniformBlockInfo;
+    /**
+     * Indicates whether the mark's uniforms have been altered since the last rendering.
+     * If set to true, the uniforms will be sent to the GPU before rendering the next frame.
+
+     * @protected
+     */
+    protected markUniformsAltered: boolean;
     /** @type {RangeMap<any>} keep track of facet locations within the vertex array */
     rangeMap: RangeMap<any>;
     /** @type {MarkConfig} */
@@ -123,6 +141,18 @@ export default class Mark {
      * initialization.
      */
     finalizeGraphicsInitialization(): void;
+    /**
+     * Set a uniform based on a mark property. If the property is an expression,
+     * register a listener to update the uniform when the params referenced by the
+     * expression change.
+     *
+     * @protected
+     * @template T
+     * @param {string} uniformName
+     * @param {T} propValue
+     * @param {(x: Exclude<T, ExprRef>) => any} adjuster
+     */
+    protected registerMarkUniform<T>(uniformName: string, propValue: T, adjuster?: (x: Exclude<T, import("../spec/mark.js").ExprRef>) => any): void;
     _setDatums(): void;
     /**
      * Delete WebGL buffers etc.
@@ -147,6 +177,10 @@ export default class Mark {
      * TODO: Check if selection (when it's implemented) is enabled
      */
     isPickingParticipant(): boolean;
+    /**
+     * @protected
+     */
+    protected bindOrSetMarkUniformBlock(): void;
     /**
      * Configures the WebGL state for rendering the mark instances.
      * A separate preparation stage allows for efficient rendering of faceted

package/dist/src/marks/mark.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mark.d.ts","sourceRoot":"","sources":["../../../src/marks/mark.js"],"names":[],"mappings":";AAwCA,0DAA2D;AAC3D,0DAA2D;AAE3D;;;;;;;;;;;;GAYG;AACH;IACI;;;;;OAKG;IAEH;;OAEG;IACH,sBAFW,OAAO,qBAAqB,EAAE,OAAO,EAoE/C;IAjEG,gDAAwB;IAExB,oEAAoE;IACpE,UADW,OAAO,MAAM,EAAE,OAAO,qBAAqB,EAAE,OAAO,CAAC,CACvC;IAIzB,0FAA0F;IAC1F,YADW,OAAO,SAAS,EAAE,UAAU,GAAG;QAAE,iBAAiB,CAAC,EAAE,MAAM,CAAA;KAAE,CAC7C;IAE3B,0DAA0D;IAC1D,aADW,OAAO,SAAS,EAAE,WAAW,CACZ;IAE5B,8DAA8D;IAC9D,iBADW,OAAO,SAAS,EAAE,eAAe,CACZ;IAEhC,+DAA+D;IAC/D,mBADW,OAAO,SAAS,EAAE,gBAAgB,CACX;IAElC,+DAA+D;IAC/D,iBADW,OAAO,SAAS,EAAE,gBAAgB,CACb;IAEhC,kFAAkF;IAClF,UADW,SAAS,GAAG,CAAC,CACM;IAG9B,yBAAyB;IACzB,wDAqBC;IAED;;;;;;;;OAQG;IACH,mEAKC;IAGL,sBAEC;IAED;;;;;;;OAOG;IACH,iBAFa,MAAM,EAAE,CAKpB;IAED;;OAEG;IACH,+DAWC;IAED;;OAEG;IACH,oEAcC;IAED;;;;;OAKG;IACH,oHAEC;IAED;;;;OAIG;IACH,8DAyCC;IAED,wDAEC;IAED,8CAEC;IAED,uBAEC;IAED;;;OAGG;IACH,2BAEC;IAED;;OAEG;IACH,oCAEC;IAED;;OAEG;IACH,2BAEC;IAED,sEAeC;IAED;;;;;OAKG;IACH,mCAJW,MAAM,kBACN,MAAM,iBACN,MAAM,EAAE,QA+FlB;IAtFG,uBAAuB;IACvB,gBADW,MAAM,EAAE,CACK;IAgFxB;;;;;;MAIC;IAGL;;;OAGG;IACH,uCA4CC;IAED,mBAgBC;IAED;;OAEG;IACH,2BAiBC;IAED;;;OAGG;IACH,6BAFW,GAAG,QAoCb;IAED,yBAAyB;IACzB,uDAEC;IAED,yBAAyB;IACzB,iCAEC;IAED,gCAEC;IAED,+BAEC;IAED,yCAEC;IAED;;;;;OAKG;IACH,gCAcC;IAED;;;;;;;;OAQG;IAEH,uBAJW,OAAO,uBAAuB,EAAE,sBAAsB,GACpD,CAAC,MAAM,IAAI,CAAC,EAAE,CA+H1B;IAED;;;;;;OAMG;IACH,qCAJW,oBAAoB,GAClB,OAAO,CAqCnB;IAED;;;;;;;OAOG;IACH,gBAJW,oBAAoB,SACP,IAAI,CAM3B;IAED;;;OAGG;IACH,2BAHW,YAAY,WACZ,OAAO,WAAW,EAAE,oBAAoB,cAiElD;IAED;;;;;;OAMG;IACH,oBAJW,OAAO,6BAA6B,EAAE,OAAO,aAC7C,OAAO,6BAA6B,EAAE,OAAO,GAC3C,OAAO,CAuHnB;IAED;;;;;;;;;OASG;IACH,qBAJW,MAAM,KACN,OAAO,oBAAoB,EAAE,MAAM,GACjC,GAAG,CAIf;CACJ;+BA95BY,OAAO,uBAAuB,EAAE,gBAAgB;;;;;;wBAEnD,OAAO;;mCAEJ,gBAAgB,GAAG,qBAAqB;oCAG1C,MAAM,SACN,MAAM;AAw5BjB;;;GAGG;AACH;IACI,cAEC;IAkBD;;;OAGG;IACH,2BAFW,IAAI,CAAC,EAAE,OAAO,yBAAyB,EAAE,UAAU,CAAC,QAM9D;CACJ;0BA38ByB,WAAW"}
+{"version":3,"file":"mark.d.ts","sourceRoot":"","sources":["../../../src/marks/mark.js"],"names":[],"mappings":"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"}

package/dist/src/marks/mark.js

@@ -1,4 +1,5 @@
 import {
+    bindUniformBlock,
     createBufferInfoFromArrays,
     createProgramInfoFromProgram,
     createUniformBlockInfo,
@@ -37,6 +38,7 @@ import { isScalar } from "../utils/variableTools.js";
 import { InternMap } from "internmap";
 import scaleNull from "../utils/scaleNull.js";
 import ViewError from "../view/viewError.js";
+import { isString } from "vega-util";
 
 export const SAMPLE_FACET_UNIFORM = "SAMPLE_FACET_UNIFORM";
 export const SAMPLE_FACET_TEXTURE = "SAMPLE_FACET_TEXTURE";
@@ -60,6 +62,7 @@ export default class Mark {
      * @typedef {import("../spec/channel.js").Channel} Channel
      * @typedef {import("../spec/channel.js").Encoding} Encoding
      * @typedef {import("../spec/channel.js").ValueDef} ValueDef
+     * @typedef {import("../spec/mark.js").ExprRef} ExprRef
      */
 
     /**
@@ -88,6 +91,20 @@ export default class Mark {
         /** @type {import("twgl.js").UniformBlockInfo} WebGL buffers */
         this.viewUniformInfo = undefined;
 
+        /**
+         * Uniforms related to the specific mark type.
+         * @type {import("twgl.js").UniformBlockInfo}
+         */
+        this.markUniformInfo = undefined;
+
+        /**
+         * Indicates whether the mark's uniforms have been altered since the last rendering.
+         * If set to true, the uniforms will be sent to the GPU before rendering the next frame.
+
+         * @protected
+         */
+        this.markUniformsAltered = true;
+
         /** @type {RangeMap<any>} keep track of facet locations within the vertex array */
         this.rangeMap = new RangeMap();
 
@@ -304,7 +321,7 @@ export default class Mark {
         const attributes = this.getAttributes();
 
         // For debugging
-        extraHeaders.push("// view: " + this.unitView.getPathString());
+        const debugHeader = "// view: " + this.unitView.getPathString();
 
         // TODO: This is a temporary variable, don't store it in the mark object
         /** @type {string[]} */
@@ -366,6 +383,7 @@ export default class Mark {
 
         const vertexParts = [
             vertexPrecision,
+            debugHeader,
             ...extraHeaders,
             GLSL_COMMON,
             GLSL_SCALES,
@@ -377,6 +395,7 @@ export default class Mark {
         ];
 
         const fragmentParts = [
+            debugHeader,
             ...extraHeaders,
             GLSL_COMMON,
             GLSL_PICKING_FRAGMENT,
@@ -433,6 +452,12 @@ export default class Mark {
             "View"
         );
 
+        this.markUniformInfo = createUniformBlockInfo(
+            this.gl,
+            this.programInfo,
+            "Mark"
+        );
+
         this.gl.useProgram(this.programInfo.program);
 
         this._setDatums();
@@ -445,6 +470,42 @@ export default class Mark {
         });
     }
 
+    /**
+     * Set a uniform based on a mark property. If the property is an expression,
+     * register a listener to update the uniform when the params referenced by the
+     * expression change.
+     *
+     * @protected
+     * @template T
+     * @param {string} uniformName
+     * @param {T} propValue
+     * @param {(x: Exclude<T, ExprRef>) => any} adjuster
+     */
+    registerMarkUniform(uniformName, propValue, adjuster = (x) => x) {
+        const uniformSetter = this.markUniformInfo.setters[uniformName];
+
+        if (isExprRef(propValue)) {
+            const fn = this.unitView.context.paramBroker.createExpression(
+                propValue.expr
+            );
+
+            const set = () => {
+                uniformSetter(adjuster(fn(null)));
+                this.markUniformsAltered = true;
+            };
+
+            // Register a listener ...
+            fn.addListener(set);
+            // ... and set the initial value
+            set();
+        } else {
+            uniformSetter(
+                adjuster(/** @type {Exclude<T, ExprRef>} */ (propValue))
+            );
+            this.markUniformsAltered = true;
+        }
+    }
+
     _setDatums() {
         for (const [channel, channelDef] of Object.entries(this.encoding)) {
             if (isDatumDef(channelDef)) {
@@ -569,6 +630,18 @@ export default class Mark {
         return true;
     }
 
+    /**
+     * @protected
+     */
+    bindOrSetMarkUniformBlock() {
+        if (this.markUniformsAltered) {
+            setUniformBlock(this.gl, this.programInfo, this.markUniformInfo);
+            this.markUniformsAltered = false;
+        } else {
+            bindUniformBlock(this.gl, this.programInfo, this.markUniformInfo);
+        }
+    }
+
     /**
      * Configures the WebGL state for rendering the mark instances.
      * A separate preparation stage allows for efficient rendering of faceted
@@ -1006,3 +1079,12 @@ class RangeMap extends InternMap {
         }
     }
 }
+
+// TODO: Find a better place for this function
+/**
+ * @param {any} x
+ * @returns {x is import("../spec/mark.js").ExprRef}
+ */
+export function isExprRef(x) {
+    return typeof x === "object" && "expr" in x && isString(x.expr);
+}

package/dist/src/marks/pointMark.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pointMark.d.ts","sourceRoot":"","sources":["../../../src/marks/pointMark.js"],"names":[],"mappings":"AAaA;IAsGY,oCAMC;IAwCT,mCAQC;IAED;;OAEG;IACH,wDASC;IAED,+BAoBC;CA6CJ;iBApPgB,WAAW"}
+{"version":3,"file":"pointMark.d.ts","sourceRoot":"","sources":["../../../src/marks/pointMark.js"],"names":[],"mappings":"AAkBA;IAsGY,oCAMC;IA2CT,mCAQC;IAED;;OAEG;IACH,wDASC;IAED,+BAoBC;CAiDJ;iBA3PgB,WAAW"}

package/dist/src/marks/pointMark.js

@@ -1,8 +1,13 @@
-import { drawBufferInfo, setBuffersAndAttributes, setUniforms } from "twgl.js";
+import {
+    drawBufferInfo,
+    setBlockUniforms,
+    setBuffersAndAttributes,
+} from "twgl.js";
 import { quantileSorted } from "d3-array";
 import { PointVertexBuilder } from "../gl/dataToVertices.js";
 import VERTEX_SHADER from "../gl/point.vertex.glsl.js";
 import FRAGMENT_SHADER from "../gl/point.fragment.glsl.js";
+import COMMON_SHADER from "../gl/point.common.glsl.js";
 
 import Mark from "./mark.js";
 import { sampleIterable } from "../data/transforms/sample.js";
@@ -126,7 +131,9 @@ export default class PointMark extends Mark {
 
     async initializeGraphics() {
         await super.initializeGraphics();
-        this.createAndLinkShaders(VERTEX_SHADER, FRAGMENT_SHADER);
+        this.createAndLinkShaders(VERTEX_SHADER, FRAGMENT_SHADER, [
+            COMMON_SHADER,
+        ]);
     }
 
     finalizeGraphicsInitialization() {
@@ -135,9 +142,10 @@ export default class PointMark extends Mark {
         this.gl.useProgram(this.programInfo.program);
 
         const props = this.properties;
-        setUniforms(this.programInfo, {
-            uInwardStroke: props.inwardStroke,
-            uGradientStrength: props.fillGradientStrength,
+
+        setBlockUniforms(this.markUniformInfo, {
+            uInwardStroke: !!props.inwardStroke,
+            uGradientStrength: +props.fillGradientStrength,
             uMaxRelativePointDiameter: 1 - 2 * props.sampleFacetPadding,
         });
     }
@@ -211,13 +219,17 @@ export default class PointMark extends Mark {
     prepareRender(options) {
         const ops = super.prepareRender(options);
 
-        ops.push(() =>
-            setUniforms(this.programInfo, {
+        ops.push(() => {
+            // TODO: Use bindUniformBlock if none of the uniform has changed
+            setBlockUniforms(this.markUniformInfo, {
                 uMaxPointSize: this._getMaxPointSize(),
                 uScaleFactor: this._getGeometricScaleFactor(),
                 uSemanticThreshold: this.getSemanticThreshold(),
-            })
-        );
+            });
+            this.markUniformsAltered = true;
+        });
+
+        ops.push(() => this.bindOrSetMarkUniformBlock());
 
         ops.push(() =>
             setBuffersAndAttributes(

package/dist/src/marks/rectMark.d.ts

@@ -1,6 +1,4 @@
 export default class RectMark extends Mark {
-    _isRoundedCorners(): number;
-    _isStroked(): boolean;
     /**
      * Finds a datum that overlaps the given value on the x domain.
      * The result is unspecified if multiple data are found.
@@ -13,6 +11,7 @@ export default class RectMark extends Mark {
      * @override
      */
     override findDatumAt(facetId: any, x: import("../spec/channel.js").Scalar): any;
+    #private;
 }
 import Mark from "./mark.js";
 //# sourceMappingURL=rectMark.d.ts.map

package/dist/src/marks/rectMark.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rectMark.d.ts","sourceRoot":"","sources":["../../../src/marks/rectMark.js"],"names":[],"mappings":"AAYA;IAsGI,4BASC;IAED,sBAGC;IA4FD;;;;;;;;;;OAUG;IACH,8BALW,GAAG,KACH,OAAO,oBAAoB,EAAE,MAAM,GACjC,GAAG,CAyBf;CACJ;iBAzPgB,WAAW"}
+{"version":3,"file":"rectMark.d.ts","sourceRoot":"","sources":["../../../src/marks/rectMark.js"],"names":[],"mappings":"AAYA;IA2NI;;;;;;;;;;OAUG;IACH,8BALW,GAAG,KACH,OAAO,oBAAoB,EAAE,MAAM,GACjC,GAAG,CAyBf;;CACJ;iBApQgB,WAAW"}

package/dist/src/marks/rectMark.js

@@ -1,4 +1,4 @@
-import { drawBufferInfo, setBuffersAndAttributes, setUniforms } from "twgl.js";
+import { drawBufferInfo, setBuffersAndAttributes } from "twgl.js";
 import VERTEX_SHADER from "../gl/rect.vertex.glsl.js";
 import FRAGMENT_SHADER from "../gl/rect.fragment.glsl.js";
 import { RectVertexBuilder } from "../gl/dataToVertices.js";
@@ -76,8 +76,8 @@ export default class RectMark extends Mark {
                 this,
                 "opaque",
                 () =>
-                    !this._isRoundedCorners() &&
-                    !this._isStroked() &&
+                    !this.#isRoundedCorners() &&
+                    !this.#isStroked() &&
                     isValueDef(this.encoding.fillOpacity) &&
                     this.encoding.fillOpacity.value == 1.0 &&
                     this.properties.minOpacity == 1.0
@@ -112,7 +112,7 @@ export default class RectMark extends Mark {
         // TODO: Pop the previous buffers
     }
 
-    _isRoundedCorners() {
+    #isRoundedCorners() {
         const p = this.properties;
         return (
             p.cornerRadius ||
@@ -123,7 +123,7 @@ export default class RectMark extends Mark {
         );
     }
 
-    _isStroked() {
+    #isStroked() {
         const sw = this.encoding.strokeWidth;
         return !(isValueDef(sw) && !sw.value);
     }
@@ -133,10 +133,10 @@ export default class RectMark extends Mark {
 
         /** @type {string[]} */
         const defines = [];
-        if (this._isRoundedCorners()) {
+        if (this.#isRoundedCorners()) {
             defines.push("ROUNDED_CORNERS");
         }
-        if (this._isStroked()) {
+        if (this.#isStroked()) {
             defines.push("STROKED");
         }
 
@@ -154,16 +154,25 @@ export default class RectMark extends Mark {
 
         const props = this.properties;
 
-        setUniforms(this.programInfo, {
-            uMinSize: [props.minWidth, props.minHeight], // in pixels
-            uMinOpacity: props.minOpacity,
-            uCornerRadii: [
-                props.cornerRadiusTopRight ?? props.cornerRadius,
-                props.cornerRadiusBottomRight ?? props.cornerRadius,
-                props.cornerRadiusTopLeft ?? props.cornerRadius,
-                props.cornerRadiusBottomLeft ?? props.cornerRadius,
-            ],
-        });
+        this.registerMarkUniform("uMinWidth", props.minWidth);
+        this.registerMarkUniform("uMinHeight", props.minHeight);
+        this.registerMarkUniform("uMinOpacity", props.minOpacity);
+        this.registerMarkUniform(
+            "uCornerRadiusTopRight",
+            props.cornerRadiusTopRight ?? props.cornerRadius ?? 0
+        );
+        this.registerMarkUniform(
+            "uCornerRadiusBottomRight",
+            props.cornerRadiusBottomRight ?? props.cornerRadius ?? 0
+        );
+        this.registerMarkUniform(
+            "uCornerRadiusTopLeft",
+            props.cornerRadiusTopLeft ?? props.cornerRadius ?? 0
+        );
+        this.registerMarkUniform(
+            "uCornerRadiusBottomLeft",
+            props.cornerRadiusBottomLeft ?? props.cornerRadius ?? 0
+        );
     }
 
     updateGraphicsData() {
@@ -190,6 +199,8 @@ export default class RectMark extends Mark {
     prepareRender(options) {
         const ops = super.prepareRender(options);
 
+        ops.push(() => this.bindOrSetMarkUniformBlock());
+
         ops.push(() =>
             setBuffersAndAttributes(
                 this.gl,

package/dist/src/marks/rule.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rule.d.ts","sourceRoot":"","sources":["../../../src/marks/rule.js"],"names":[],"mappings":"AAYA;IAOQ,wBAAwB;IA4GpB,0BAOE;CAmFb;iBAzNgB,WAAW"}
+{"version":3,"file":"rule.d.ts","sourceRoot":"","sources":["../../../src/marks/rule.js"],"names":[],"mappings":"AAcA;IAOQ,wBAAwB;IA4GpB,0BAOE;CA4Fb;iBApOgB,WAAW"}

package/dist/src/marks/rule.js

@@ -2,11 +2,13 @@ import Mark from "./mark.js";
 import {
     createTexture,
     drawBufferInfo,
+    setBlockUniforms,
     setBuffersAndAttributes,
     setUniforms,
 } from "twgl.js";
 import VERTEX_SHADER from "../gl/rule.vertex.glsl.js";
 import FRAGMENT_SHADER from "../gl/rule.fragment.glsl.js";
+import COMMON_SHADER from "../gl/rule.common.glsl.js";
 import { RuleVertexBuilder } from "../gl/dataToVertices.js";
 import { isChannelDefWithScale } from "../encoder/encoder.js";
 
@@ -136,7 +138,9 @@ export default class RuleMark extends Mark {
             this.dashTextureSize = textureData.length; // Not needed with WebGL2
         }
 
-        this.createAndLinkShaders(VERTEX_SHADER, FRAGMENT_SHADER);
+        this.createAndLinkShaders(VERTEX_SHADER, FRAGMENT_SHADER, [
+            COMMON_SHADER,
+        ]);
     }
 
     finalizeGraphicsInitialization() {
@@ -146,11 +150,17 @@ export default class RuleMark extends Mark {
 
         const props = this.properties;
 
-        setUniforms(this.programInfo, {
-            uMinLength: props.minLength,
-            uDashTextureSize: this.dashTextureSize,
-            uStrokeCap: ["butt", "square", "round"].indexOf(props.strokeCap),
+        this.registerMarkUniform("uMinLength", props.minLength);
+        this.registerMarkUniform(
+            "uStrokeCap",
+            props.strokeCap ?? "butt",
+            (cap) => ["butt", "square", "round"].indexOf(cap)
+        );
+
+        setBlockUniforms(this.markUniformInfo, {
+            uDashTextureSize: +this.dashTextureSize,
         });
+        this.markUniformsAltered = true;
     }
 
     updateGraphicsData() {
@@ -177,11 +187,12 @@ export default class RuleMark extends Mark {
     prepareRender(options) {
         const ops = super.prepareRender(options);
 
+        ops.push(() => this.bindOrSetMarkUniformBlock());
+
         if (this.dashTexture) {
             ops.push(() =>
                 setUniforms(this.programInfo, {
                     uDashTexture: this.dashTexture,
-                    uStrokeDashOffset: this.properties.strokeDashOffset,
                 })
             );
         }

package/dist/src/marks/text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/marks/text.js"],"names":[],"mappings":"AA0BA;;;;;;;GAOG;AACH;IAsDQ,oDAMmD;CAwL1D;iBA/QgB,WAAW"}
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/marks/text.js"],"names":[],"mappings":"AAgCA;;;;;;;GAOG;AACH;IAsDQ,oDAMmD;CAiM1D;iBAxRgB,WAAW"}

package/dist/src/marks/text.js

@@ -1,8 +1,14 @@
 import { isString } from "vega-util";
 import { format } from "d3-format";
-import { drawBufferInfo, setBuffersAndAttributes, setUniforms } from "twgl.js";
+import {
+    drawBufferInfo,
+    setBlockUniforms,
+    setBuffersAndAttributes,
+    setUniforms,
+} from "twgl.js";
 import VERTEX_SHADER from "../gl/text.vertex.glsl.js";
 import FRAGMENT_SHADER from "../gl/text.fragment.glsl.js";
+import COMMON_SHADER from "../gl/text.common.glsl.js";
 import { TextVertexBuilder } from "../gl/dataToVertices.js";
 
 import Mark from "./mark.js";
@@ -142,7 +148,9 @@ export default class TextMark extends Mark {
 
     async initializeGraphics() {
         await super.initializeGraphics();
-        this.createAndLinkShaders(VERTEX_SHADER, FRAGMENT_SHADER);
+        this.createAndLinkShaders(VERTEX_SHADER, FRAGMENT_SHADER, [
+            COMMON_SHADER,
+        ]);
     }
 
     finalizeGraphicsInitialization() {
@@ -153,7 +161,7 @@ export default class TextMark extends Mark {
         const props = this.properties;
 
         // TODO: Use uniform block.
-        setUniforms(this.programInfo, {
+        setBlockUniforms(this.markUniformInfo, {
             uPaddingX: props.paddingX,
             uPaddingY: props.paddingY,
             uFlushX: !!props.flushX,
@@ -240,12 +248,19 @@ export default class TextMark extends Mark {
             this.font.metrics.common.base /
             (this.unitView.context.devicePixelRatio / q);
 
-        ops.push(() =>
+        ops.push(() => {
+            // TODO: only set if dpr changed
+            setBlockUniforms(this.markUniformInfo, {
+                uSdfNumerator,
+            });
+            this.markUniformsAltered = true;
+
             setUniforms(this.programInfo, {
                 uTexture: this.font.texture,
-                uSdfNumerator,
-            })
-        );
+            });
+        });
+
+        ops.push(() => this.bindOrSetMarkUniformBlock());
 
         ops.push(() =>
             setBuffersAndAttributes(

package/dist/src/paramBroker.d.ts

@@ -0,0 +1,30 @@
+/**
+ * A class that manages parameters and expressions. Still a work in progress.
+ *
+ * TODO: Write tests for this class.
+ *
+ * This should eventually handle the following:
+ * - Parameter registration
+ * - Dependency tracking
+ * - Calling observers when a parameter changes
+ * - Somehow saving parameter "state" (in bookmarks)
+ * - Maybe something else
+ */
+export default class ParamBroker {
+    /**
+     *
+     * @param {string} paramName
+     * @returns {(value: any) => void}
+     */
+    allocateSetter(paramName: string): (value: any) => void;
+    /**
+     * Parse expr and return a function that returns the value of the parameter.
+     *
+     * @param {string} expr
+     */
+    createExpression(expr: string): ((x: object) => any) & import("./utils/expression.js").ExpressionProps & {
+        addListener: (listener: () => void) => void;
+    };
+    #private;
+}
+//# sourceMappingURL=paramBroker.d.ts.map

package/dist/src/paramBroker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"paramBroker.d.ts","sourceRoot":"","sources":["../../src/paramBroker.js"],"names":[],"mappings":"AAGA;;;;;;;;;;;GAWG;AACH;IAyBI;;;;OAIG;IACH,0BAHW,MAAM,WACI,GAAG,KAAK,IAAI,CAqBhC;IAID;;;;OAIG;IACH,uBAFW,MAAM;gCAG6E,MAAM,IAAI,KAAK,IAAI;MA0BhH;;CACJ"}

package/dist/src/paramBroker.js

@@ -0,0 +1,102 @@
+import { isString } from "vega-util";
+import createFunction from "./utils/expression.js";
+
+/**
+ * A class that manages parameters and expressions. Still a work in progress.
+ *
+ * TODO: Write tests for this class.
+ *
+ * This should eventually handle the following:
+ * - Parameter registration
+ * - Dependency tracking
+ * - Calling observers when a parameter changes
+ * - Somehow saving parameter "state" (in bookmarks)
+ * - Maybe something else
+ */
+export default class ParamBroker {
+    /** @type {Map<string, any>} */
+    #params;
+
+    /** @type {Set<string>} */
+    #allocatedSetters;
+
+    /** @type {Record<string, any>} */
+    #proxy;
+
+    /** @type {Map<string, Set<() => void>>} */
+    #paramListeners;
+
+    constructor() {
+        this.#params = new Map();
+        this.#allocatedSetters = new Set();
+        this.#paramListeners = new Map();
+
+        this.#proxy = new Proxy(this.#params, {
+            get(target, prop) {
+                return isString(prop) ? target.get(prop) : undefined;
+            },
+        });
+    }
+
+    /**
+     *
+     * @param {string} paramName
+     * @returns {(value: any) => void}
+     */
+    allocateSetter(paramName) {
+        if (this.#allocatedSetters.has(paramName)) {
+            throw new Error(
+                "Setter already allocated for parameter: " + paramName
+            );
+        }
+
+        this.#allocatedSetters.add(paramName);
+
+        return (value) => {
+            this.#params.set(paramName, value);
+
+            const listeners = this.#paramListeners.get(paramName);
+            if (listeners) {
+                for (const listener of listeners) {
+                    listener();
+                }
+            }
+        };
+    }
+
+    // TODO: deallocateSetter
+
+    /**
+     * Parse expr and return a function that returns the value of the parameter.
+     *
+     * @param {string} expr
+     */
+    createExpression(expr) {
+        /** @type {import("./utils/expression.js").ExpressionFunction & { addListener: (listener: () => void) => void}} */
+        const fn = /** @type {any} */ (createFunction(expr, this.#proxy));
+
+        for (const g of fn.globals) {
+            if (!this.#allocatedSetters.has(g)) {
+                throw new Error(
+                    `Unknown variable "${g}" in expression: ${expr}`
+                );
+            }
+        }
+
+        /**
+         *
+         * @param {() => void} listener
+         */
+        fn.addListener = (listener) => {
+            for (const g of fn.globals) {
+                const listeners = this.#paramListeners.get(g) ?? new Set();
+                this.#paramListeners.set(g, listeners);
+                listeners.add(listener);
+            }
+        };
+
+        // TODO: remove listener
+
+        return fn;
+    }
+}