@genome-spy/core 0.43.3 → 0.44.0

package/dist/src/marks/mark.js

@@ -18,15 +18,16 @@ import createEncoders, {
     isValueDef,
 } from "../encoder/encoder.js";
 import {
-    DOMAIN_PREFIX,
-    generateValueGlsl,
+    generateConstantValueGlsl,
     generateScaleGlsl,
     RANGE_TEXTURE_PREFIX,
-    ATTRIBUTE_PREFIX,
     isHighPrecisionScale,
     toHighPrecisionDomainUniform,
-    splitHighPrecision,
     dedupeEncodingFields,
+    generateDynamicValueGlslAndUniform,
+    isLargeGenome,
+    splitLargeHighPrecision,
+    getRangeForGlsl,
 } from "../gl/glslScaleGenerator.js";
 import GLSL_COMMON from "../gl/includes/common.glsl.js";
 import GLSL_SCALES from "../gl/includes/scales.glsl.js";
@@ -38,7 +39,6 @@ import { createProgram } from "../gl/webGLHelper.js";
 import coalesceProperties from "../utils/propertyCoalescer.js";
 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";
 
@@ -60,13 +60,20 @@ export const SAMPLE_FACET_TEXTURE = "SAMPLE_FACET_TEXTURE";
  */
 export default class Mark {
     /**
-     * @typedef {import("../spec/mark.js").MarkConfig} MarkConfig
+     * @typedef {import("../spec/mark.js").MarkProps} MarkProps
      * @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
+     * @typedef {import("../spec/parameter.js").ExprRef} ExprRef
      */
 
+    /**
+     * Only needed during initialization;
+     *
+     * @type {(() => void)[]}
+     */
+    #callAfterShaderCompilation = [];
+
     /**
      * @param {import("../view/unitView.js").default} unitView
      */
@@ -111,7 +118,7 @@ export default class Mark {
         this.rangeMap = new RangeMap();
 
         // TODO: Implement https://vega.github.io/vega-lite/docs/config.html
-        /** @type {MarkConfig} */
+        /** @type {MarkProps} */
         this.defaultProperties = {
             get clip() {
                 // TODO: Cache once the scales have been resolved
@@ -141,13 +148,13 @@ export default class Mark {
          *
          * TODO: Proper and comprehensive typings for mark properties
          *
-         * @type {Partial<MarkConfig>}
+         * @type {Partial<MarkProps>}
          * @readonly
          */
         this.properties = coalesceProperties(
             typeof this.unitView.spec.mark == "object"
-                ? () => /** @type {MarkConfig} */ (this.unitView.spec.mark)
-                : () => /** @type {MarkConfig} */ ({}),
+                ? () => /** @type {MarkProps} */ (this.unitView.spec.mark)
+                : () => /** @type {MarkProps} */ ({}),
             () => this.defaultProperties
         );
     }
@@ -227,20 +234,22 @@ export default class Mark {
             /** @type {(property: string) => ValueDef} */
             const propToValueDef = (property) => {
                 const value =
-                    this.properties[/** @type {keyof MarkConfig} */ (property)];
-                return isScalar(value) && { value };
+                    this.properties[/** @type {keyof MarkProps} */ (property)];
+                return isScalar(value) || isExprRef(value)
+                    ? { value }
+                    : undefined;
             };
 
             const propertyValues = Object.fromEntries(
                 this.getSupportedChannels()
                     .map(
                         (channel) =>
-                            /** @type {[Channel, ValueDef]} */ ([
+                            /** @type {[Channel, ValueDef] } */ ([
                                 channel,
                                 propToValueDef(channel),
                             ])
                     )
-                    .filter((entry) => entry[1].value !== undefined)
+                    .filter((entry) => isValueDef(entry[1]))
             );
 
             const encoding = this.fixEncoding({
@@ -326,16 +335,13 @@ export default class Mark {
      * @param {string[]} [extraHeaders]
      * @protected
      */
+    // eslint-disable-next-line complexity
     createAndLinkShaders(vertexShader, fragmentShader, extraHeaders = []) {
         const attributes = this.getAttributes();
 
         // For debugging
         const debugHeader = "// view: " + this.unitView.getPathString();
 
-        // TODO: This is a temporary variable, don't store it in the mark object
-        /** @type {string[]} */
-        this.domainUniforms = [];
-
         /** @type {string[]} */
         let scaleCode = [];
 
@@ -353,6 +359,9 @@ export default class Mark {
             extraHeaders.push(`#define ${sampleFacetMode}`);
         }
 
+        /** @type {string[]} */
+        const dynamicMarkUniforms = [];
+
         for (const attribute of attributes) {
             /** @type {Channel} */
             let channel;
@@ -363,24 +372,40 @@ export default class Mark {
             }
 
             const channelDef = this.encoding[channel];
-
             if (!channelDef) {
                 continue;
             }
 
             if (isValueDef(channelDef)) {
-                scaleCode.push(generateValueGlsl(channel, channelDef.value));
+                if (isExprRef(channelDef.value)) {
+                    // An expression that evaluates to a value
+                    const { uniformName, uniformGlsl, scaleGlsl, adjuster } =
+                        generateDynamicValueGlslAndUniform(channel);
+                    scaleCode.push(scaleGlsl);
+                    dynamicMarkUniforms.push(uniformGlsl);
+
+                    this.#callAfterShaderCompilation.push(() => {
+                        this.registerMarkUniformValue(
+                            uniformName,
+                            channelDef.value,
+                            adjuster
+                        );
+                    });
+                } else {
+                    // A constant value
+                    scaleCode.push(
+                        generateConstantValueGlsl(channel, channelDef.value)
+                    );
+                }
             } else {
                 const resolutionChannel =
                     (isChannelDefWithScale(channelDef) &&
                         channelDef.resolutionChannel) ||
                     channel;
 
-                const scale = isChannelWithScale(resolutionChannel)
-                    ? this.unitView
-                          .getScaleResolution(resolutionChannel)
-                          .getScale()
-                    : scaleNull();
+                const scaleResolution = isChannelWithScale(resolutionChannel)
+                    ? this.unitView.getScaleResolution(resolutionChannel)
+                    : null;
 
                 // Channels that share the same quantitative field
                 // TODO: It should be ok to share a categorical field if the channels
@@ -391,7 +416,7 @@ export default class Mark {
 
                 const generated = generateScaleGlsl(
                     channel,
-                    scale,
+                    scaleResolution,
                     channelDef,
                     sharedChannels?.includes(channel)
                         ? sharedChannels
@@ -399,22 +424,103 @@ export default class Mark {
                 );
 
                 scaleCode.push(generated.glsl);
-                if (generated.domainUniform) {
-                    this.domainUniforms.push(generated.domainUniform);
+                dynamicMarkUniforms.push(generated.domainUniform);
+                dynamicMarkUniforms.push(generated.rangeUniform);
+                attributeCode.add(generated.attributeGlsl);
+
+                if (generated.rangeUniform) {
+                    this.#callAfterShaderCompilation.push(() => {
+                        const rangeSetter = this.createMarkUniformSetter(
+                            generated.rangeName
+                        );
+
+                        const set = () =>
+                            rangeSetter(
+                                getRangeForGlsl(scaleResolution.scale, channel)
+                            );
+                        scaleResolution.addEventListener("range", set);
+
+                        // Initial value
+                        set();
+                    });
                 }
-                if (generated.attributeGlsl) {
-                    attributeCode.add(generated.attributeGlsl);
+
+                if (generated.markUniformGlsl) {
+                    if (!isDatumDef(channelDef)) {
+                        throw new Error("Bug!");
+                    }
+
+                    const encoder = this.encoders[channel];
+
+                    const indexer = encoder.indexer;
+                    const hp = isHighPrecisionScale(encoder.scale.type);
+                    const largeHp = hp && isLargeGenome(encoder.scale.domain());
+
+                    /**
+                     * Discrete variables both numeric and strings must be "indexed",
+                     * 64 bit floats must be converted to vec2.
+                     * 32 bit continuous variables go to GPU as is.
+                     *
+                     * @type {function(import("../spec/channel.js").Scalar):(number | number[])}
+                     */
+                    const adjuster = indexer
+                        ? indexer
+                        : largeHp
+                        ? splitLargeHighPrecision
+                        : (d) => +d;
+
+                    dynamicMarkUniforms.push(generated.markUniformGlsl);
+
+                    this.#callAfterShaderCompilation.push(() => {
+                        this.registerMarkUniformValue(
+                            generated.attributeName,
+                            channelDef.datum,
+                            adjuster
+                        );
+                    });
+                }
+
+                if (generated.domainUniform) {
+                    this.#callAfterShaderCompilation.push(() => {
+                        const domainSetter = this.createMarkUniformSetter(
+                            generated.domainUniformName
+                        );
+                        const scale = scaleResolution.scale;
+                        const set = () => {
+                            const domain = isDiscrete(scale.type)
+                                ? [0, scale.domain().length]
+                                : scale.domain();
+
+                            domainSetter(
+                                isHighPrecisionScale(scale.type)
+                                    ? toHighPrecisionDomainUniform(domain)
+                                    : domain
+                            );
+                        };
+
+                        scaleResolution.addEventListener("domain", set);
+
+                        // Initial value
+                        set();
+                    });
                 }
             }
         }
 
-        const domainUniformBlock = this.domainUniforms.length
-            ? "layout(std140) uniform Domains {\n" +
-              this.domainUniforms.map((u) => `    ${u}\n`).join("") +
-              "};\n\n"
-            : "";
+        const vertexPrecision = "precision highp float;\nprecision highp int;";
+
+        /**
+         * @param {string} shaderCode
+         */
+        const addDynamicMarkUniforms = (shaderCode) =>
+            shaderCode.replace(
+                "#pragma markUniforms",
+                dynamicMarkUniforms.join("\n")
+            );
 
-        const vertexPrecision = "precision highp float;\n";
+        extraHeaders = extraHeaders.map(addDynamicMarkUniforms);
+        vertexShader = addDynamicMarkUniforms(vertexShader);
+        fragmentShader = addDynamicMarkUniforms(fragmentShader);
 
         const vertexParts = [
             vertexPrecision,
@@ -422,7 +528,6 @@ export default class Mark {
             ...extraHeaders,
             GLSL_COMMON,
             GLSL_SCALES,
-            domainUniformBlock,
             [...attributeCode].join("\n"),
             ...scaleCode,
             GLSL_SAMPLE_FACET,
@@ -431,6 +536,7 @@ export default class Mark {
         ];
 
         const fragmentParts = [
+            vertexPrecision,
             debugHeader,
             ...extraHeaders,
             GLSL_COMMON,
@@ -453,6 +559,9 @@ export default class Mark {
     /**
      * Check WebGL shader/program compilation/linking status and finalize
      * initialization.
+     *
+     * This is done as a separate step after all shader compilations have been
+     * initiated. The idea is to allow for parallel background compilation.
      */
     finalizeGraphicsInitialization() {
         const error = this.programStatus.getProgramErrors();
@@ -474,14 +583,6 @@ export default class Mark {
         );
         delete this.programStatus;
 
-        if (this.domainUniforms.length) {
-            this.domainUniformInfo = createUniformBlockInfo(
-                this.gl,
-                this.programInfo,
-                "Domains"
-            );
-        }
-
         this.viewUniformInfo = createUniformBlockInfo(
             this.gl,
             this.programInfo,
@@ -496,14 +597,39 @@ export default class Mark {
 
         this.gl.useProgram(this.programInfo.program);
 
-        this._setDatums();
-
         setUniforms(this.programInfo, {
             // left pos, left height, right pos, right height
             uSampleFacet: [0, 1, 0, 1],
             uTransitionOffset: 0.0,
             uZero: 0.0,
         });
+
+        for (const fn of this.#callAfterShaderCompilation) {
+            fn();
+        }
+        this.#callAfterShaderCompilation = undefined;
+    }
+
+    /**
+     * Sets a uniform in the Mark block. Requests a render from the animator.
+     *
+     * @protected
+     * @param {string} uniformName
+     * @returns {function(any):void}
+     */
+    createMarkUniformSetter(uniformName) {
+        const uniformSetter = this.markUniformInfo.setters[uniformName];
+        if (!uniformSetter) {
+            throw new Error(
+                `Uniform "${uniformName}" not found int the Mark block!`
+            );
+        }
+
+        return (value) => {
+            uniformSetter(value);
+            this.markUniformsAltered = true;
+            this.unitView.context.animator.requestRender();
+        };
     }
 
     /**
@@ -517,46 +643,22 @@ export default class Mark {
      * @param {T} propValue
      * @param {(x: Exclude<T, ExprRef>) => any} adjuster
      */
-    registerMarkUniform(uniformName, propValue, adjuster = (x) => x) {
-        const uniformSetter = this.markUniformInfo.setters[uniformName];
+    registerMarkUniformValue(uniformName, propValue, adjuster = (x) => x) {
+        const setter = this.createMarkUniformSetter(uniformName);
 
         if (isExprRef(propValue)) {
             const fn = this.unitView.context.paramBroker.createExpression(
                 propValue.expr
             );
 
-            const set = () => {
-                uniformSetter(adjuster(fn(null)));
-                this.markUniformsAltered = true;
-            };
+            const set = () => setter(adjuster(fn(null)));
 
             // 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)) {
-                const encoder = this.encoders[channel];
-
-                const datum = encoder.indexer
-                    ? encoder.indexer(channelDef.datum)
-                    : isHighPrecisionScale(encoder.scale.type)
-                    ? splitHighPrecision(+channelDef.datum)
-                    : +channelDef.datum;
-
-                setUniforms(this.programInfo, {
-                    [ATTRIBUTE_PREFIX + channel]: datum,
-                });
-            }
+            setter(adjuster(/** @type {Exclude<T, ExprRef>} */ (propValue)));
         }
     }
 
@@ -707,47 +809,6 @@ export default class Mark {
             gl.useProgram(this.programInfo.program);
         });
 
-        if (this.domainUniformInfo) {
-            // TODO: Only update the domains that have changed
-
-            for (const [uniform, setter] of Object.entries(
-                this.domainUniformInfo.setters
-            )) {
-                // TODO: isChannel()
-                const channel = /** @type {Channel} */ (
-                    uniform.substring(DOMAIN_PREFIX.length)
-                );
-
-                const channelDef = this.encoding[channel];
-                const resolutionChannel =
-                    (isChannelDefWithScale(channelDef) &&
-                        channelDef.resolutionChannel) ||
-                    channel;
-
-                if (isChannelWithScale(resolutionChannel)) {
-                    const scale = this.unitView
-                        .getScaleResolution(resolutionChannel)
-                        .getScale();
-
-                    ops.push(() => {
-                        const domain = isDiscrete(scale.type)
-                            ? [0, scale.domain().length]
-                            : scale.domain();
-
-                        setter(
-                            isHighPrecisionScale(scale.type)
-                                ? toHighPrecisionDomainUniform(domain)
-                                : domain
-                        );
-                    });
-                }
-            }
-
-            ops.push(() =>
-                setUniformBlock(gl, this.programInfo, this.domainUniformInfo)
-            );
-        }
-
         for (const [channel, channelDef] of Object.entries(this.encoding)) {
             if (isChannelDefWithScale(channelDef)) {
                 const resolutionChannel =
@@ -888,7 +949,7 @@ export default class Mark {
         /** @type {function(import("../gl/dataToVertices.js").RangeEntry):void} rangeEntry */
         let drawWithRangeEntry;
 
-        const scale = this.unitView.getScaleResolution("x")?.getScale();
+        const scale = this.unitView.getScaleResolution("x")?.scale;
         const continuous = scale && isContinuous(scale.type);
         const domainStartOffset = ["index", "locus"].includes(scale?.type)
             ? -1
@@ -1119,8 +1180,8 @@ class RangeMap extends InternMap {
 // TODO: Find a better place for this function
 /**
  * @param {any} x
- * @returns {x is import("../spec/mark.js").ExprRef}
+ * @returns {x is import("../spec/parameter.js").ExprRef}
  */
 export function isExprRef(x) {
-    return typeof x === "object" && "expr" in x && isString(x.expr);
+    return typeof x == "object" && x != null && "expr" in x && isString(x.expr);
 }

package/dist/src/marks/point.common.glsl.js

@@ -1,2 +1,2 @@
-const shader = "uniform Mark{/***The stroke should only grow inwards,e.g,the diameter/outline is not affected by the stroke width.*Thus,a point that has a zero size has no visible stroke. This allows strokes to be used with*geometric zoom,etc.*/uniform bool uInwardStroke;uniform lowp float uMaxRelativePointDiameter;uniform mediump float uScaleFactor;uniform mediump float uMaxPointSize;uniform mediump float uZoomLevel;uniform highp float uSemanticThreshold;uniform mediump float uGradientStrength;};";
+const shader = "layout(std140)uniform Mark{/***The stroke should only grow inwards,e.g,the diameter/outline is not affected by the stroke width.*Thus,a point that has a zero size has no visible stroke. This allows strokes to be used with*geometric zoom,etc.*/uniform bool uInwardStroke;uniform lowp float uMaxRelativePointDiameter;uniform mediump float uScaleFactor;uniform mediump float uMaxPointSize;uniform mediump float uZoomLevel;uniform highp float uSemanticThreshold;uniform mediump float uGradientStrength;\n#pragma markUniforms\n};";
 export default shader;

package/dist/src/marks/rect.common.glsl.js

@@ -0,0 +1,2 @@
+const shader = "layout(std140)uniform Mark{uniform float uMinWidth;uniform float uMinHeight;uniform float uMinOpacity;uniform float uCornerRadiusTopRight;uniform float uCornerRadiusBottomRight;uniform float uCornerRadiusTopLeft;uniform float uCornerRadiusBottomLeft;\n#pragma markUniforms\n};";
+export default shader;

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

@@ -1 +1 @@
-{"version":3,"file":"rect.d.ts","sourceRoot":"","sources":["../../../src/marks/rect.js"],"names":[],"mappings":"AAYA;IA0NI;;;;;;;;;;OAUG;IACH,8BALW,GAAG,KACH,OAAO,oBAAoB,EAAE,MAAM,GACjC,GAAG,CAyBf;;CACJ;iBAnQgB,WAAW"}
+{"version":3,"file":"rect.d.ts","sourceRoot":"","sources":["../../../src/marks/rect.js"],"names":[],"mappings":"AAaA;IAyNI;;;;;;;;;;OAUG;IACH,8BALW,GAAG,KACH,OAAO,oBAAoB,EAAE,MAAM,GACjC,GAAG,CAyBf;;CACJ;iBAlQgB,WAAW"}

package/dist/src/marks/rect.js

@@ -1,6 +1,7 @@
 import { drawBufferInfo, setBuffersAndAttributes } from "twgl.js";
 import VERTEX_SHADER from "./rect.vertex.glsl.js";
 import FRAGMENT_SHADER from "./rect.fragment.glsl.js";
+import COMMON_SHADER from "./rect.common.glsl.js";
 import { RectVertexBuilder } from "../gl/dataToVertices.js";
 
 import Mark from "./mark.js";
@@ -140,11 +141,10 @@ export default class RectMark extends Mark {
             defines.push("STROKED");
         }
 
-        this.createAndLinkShaders(
-            VERTEX_SHADER,
-            FRAGMENT_SHADER,
-            defines.map((d) => "#define " + d)
-        );
+        this.createAndLinkShaders(VERTEX_SHADER, FRAGMENT_SHADER, [
+            COMMON_SHADER,
+            ...defines.map((d) => "#define " + d),
+        ]);
     }
 
     finalizeGraphicsInitialization() {
@@ -154,22 +154,22 @@ export default class RectMark extends Mark {
 
         const props = this.properties;
 
-        this.registerMarkUniform("uMinWidth", props.minWidth);
-        this.registerMarkUniform("uMinHeight", props.minHeight);
-        this.registerMarkUniform("uMinOpacity", props.minOpacity);
-        this.registerMarkUniform(
+        this.registerMarkUniformValue("uMinWidth", props.minWidth);
+        this.registerMarkUniformValue("uMinHeight", props.minHeight);
+        this.registerMarkUniformValue("uMinOpacity", props.minOpacity);
+        this.registerMarkUniformValue(
             "uCornerRadiusTopRight",
             props.cornerRadiusTopRight ?? props.cornerRadius ?? 0
         );
-        this.registerMarkUniform(
+        this.registerMarkUniformValue(
             "uCornerRadiusBottomRight",
             props.cornerRadiusBottomRight ?? props.cornerRadius ?? 0
         );
-        this.registerMarkUniform(
+        this.registerMarkUniformValue(
             "uCornerRadiusTopLeft",
             props.cornerRadiusTopLeft ?? props.cornerRadius ?? 0
         );
-        this.registerMarkUniform(
+        this.registerMarkUniformValue(
             "uCornerRadiusBottomLeft",
             props.cornerRadiusBottomLeft ?? props.cornerRadius ?? 0
         );

package/dist/src/marks/rect.vertex.glsl.js

@@ -1,2 +1,2 @@
-const shader = "uniform Mark{uniform float uMinWidth;uniform float uMinHeight;uniform float uMinOpacity;uniform float uCornerRadiusTopRight;uniform float uCornerRadiusBottomRight;uniform float uCornerRadiusTopLeft;uniform float uCornerRadiusBottomLeft;};out lowp vec4 vFillColor;out lowp vec4 vStrokeColor;out float vHalfStrokeWidth;out vec4 vCornerRadii;\n#if defined(ROUNDED_CORNERS) || defined(STROKED)\nout vec2 vPosInPixels;\n#endif\nout vec2 vHalfSizeInPixels;/***Clamps the minimumSize and returns an opacity that reflects the amount of clamping.*/float clampMinSize(inout float pos,float frac,float size,float minSize){if(minSize>0.0&&abs(size)<minSize){pos+=(frac-0.5)*(minSize*sign(size)-size);return abs(size)/minSize;}return 1.0;}void sort(inout float a,inout float b){if(a>b){float tmp=b;b=a;a=tmp;}}/***The vertex position wrt the rectangle specified by(x,x2,y,y2).*[0,0]=[x,y],[1,1]=[x2,y2].*The x or y component may contain fractional values if the rectangle*have been tessellated.*/vec2 getVertexPos(){int index=gl_VertexID % 6;return vec2(index==0||index==1||index==3 ? 0.0 : 1.0,index==0||index==1||index==2 ? 0.0 : 1.0);}void main(void){vec2 frac=getVertexPos();vec2 normalizedMinSize=vec2(uMinWidth,uMinHeight)/uViewportSize;vec4 cornerRadii=vec4(uCornerRadiusTopRight,uCornerRadiusBottomRight,uCornerRadiusBottomLeft,uCornerRadiusTopLeft);float x=getScaled_x();float x2=getScaled_x2();float y=getScaled_y();float y2=getScaled_y2();sort(x,x2);sort(y,y2);float clampMargin=1.0;vec2 pos1=vec2(clamp(x,0.0-clampMargin,1.0+clampMargin),y);vec2 pos2=vec2(clamp(x2,0.0-clampMargin,1.0+clampMargin),y2);vec2 size=pos2-pos1;if(size.x<=0.0||size.y<=0.0){gl_Position=vec4(0.0,0.0,0.0,1.0);return;}vec2 pos=pos1+frac*size;size.y*=getSampleFacetHeight(pos);float opaFactor=uViewOpacity*max(uMinOpacity,clampMinSize(pos.x,frac.x,size.x,normalizedMinSize.x)*clampMinSize(pos.y,frac.y,size.y,normalizedMinSize.y));pos=applySampleFacet(pos);\n#if defined(ROUNDED_CORNERS) || defined(STROKED)\nfloat aaPadding=1.0/uDevicePixelRatio;float strokeWidth=getScaled_strokeWidth();float strokeOpacity=getScaled_strokeOpacity()*opaFactor;vec2 centeredFrac=frac-0.5;vec2 expand=centeredFrac*(strokeWidth+aaPadding)/uViewportSize;pos+=expand;vec2 sizeInPixels=size*uViewportSize;vPosInPixels=(centeredFrac+expand/size)*sizeInPixels;vHalfSizeInPixels=sizeInPixels/2.0;vCornerRadii=min(cornerRadii,min(vHalfSizeInPixels.x,vHalfSizeInPixels.y));vHalfStrokeWidth=strokeWidth/2.0;vStrokeColor=vec4(getScaled_stroke()*strokeOpacity,strokeOpacity);\n#endif\ngl_Position=unitToNdc(pos);float fillOpacity=getScaled_fillOpacity()*opaFactor;vFillColor=vec4(getScaled_fill()*fillOpacity,fillOpacity);setupPicking();}";
+const shader = "out lowp vec4 vFillColor;out lowp vec4 vStrokeColor;out float vHalfStrokeWidth;out vec4 vCornerRadii;\n#if defined(ROUNDED_CORNERS) || defined(STROKED)\nout vec2 vPosInPixels;\n#endif\nout vec2 vHalfSizeInPixels;/***Clamps the minimumSize and returns an opacity that reflects the amount of clamping.*/float clampMinSize(inout float pos,float frac,float size,float minSize){if(minSize>0.0&&abs(size)<minSize){pos+=(frac-0.5)*(minSize*sign(size)-size);return abs(size)/minSize;}return 1.0;}void sort(inout float a,inout float b){if(a>b){float tmp=b;b=a;a=tmp;}}/***The vertex position wrt the rectangle specified by(x,x2,y,y2).*[0,0]=[x,y],[1,1]=[x2,y2].*The x or y component may contain fractional values if the rectangle*have been tessellated.*/vec2 getVertexPos(){int index=gl_VertexID % 6;return vec2(index==0||index==1||index==3 ? 0.0 : 1.0,index==0||index==1||index==2 ? 0.0 : 1.0);}void main(void){vec2 frac=getVertexPos();vec2 normalizedMinSize=vec2(uMinWidth,uMinHeight)/uViewportSize;vec4 cornerRadii=vec4(uCornerRadiusTopRight,uCornerRadiusBottomRight,uCornerRadiusBottomLeft,uCornerRadiusTopLeft);float x=getScaled_x();float x2=getScaled_x2();float y=getScaled_y();float y2=getScaled_y2();sort(x,x2);sort(y,y2);float clampMargin=1.0;vec2 pos1=vec2(clamp(x,0.0-clampMargin,1.0+clampMargin),y);vec2 pos2=vec2(clamp(x2,0.0-clampMargin,1.0+clampMargin),y2);vec2 size=pos2-pos1;if(size.x<=0.0||size.y<=0.0){gl_Position=vec4(0.0,0.0,0.0,1.0);return;}vec2 pos=pos1+frac*size;size.y*=getSampleFacetHeight(pos);float opaFactor=uViewOpacity*max(uMinOpacity,clampMinSize(pos.x,frac.x,size.x,normalizedMinSize.x)*clampMinSize(pos.y,frac.y,size.y,normalizedMinSize.y));pos=applySampleFacet(pos);\n#if defined(ROUNDED_CORNERS) || defined(STROKED)\nfloat aaPadding=1.0/uDevicePixelRatio;float strokeWidth=getScaled_strokeWidth();float strokeOpacity=getScaled_strokeOpacity()*opaFactor;vec2 centeredFrac=frac-0.5;vec2 expand=centeredFrac*(strokeWidth+aaPadding)/uViewportSize;pos+=expand;vec2 sizeInPixels=size*uViewportSize;vPosInPixels=(centeredFrac+expand/size)*sizeInPixels;vHalfSizeInPixels=sizeInPixels/2.0;vCornerRadii=min(cornerRadii,min(vHalfSizeInPixels.x,vHalfSizeInPixels.y));vHalfStrokeWidth=strokeWidth/2.0;vStrokeColor=vec4(getScaled_stroke()*strokeOpacity,strokeOpacity);\n#endif\ngl_Position=unitToNdc(pos);float fillOpacity=getScaled_fillOpacity()*opaFactor;vFillColor=vec4(getScaled_fill()*fillOpacity,fillOpacity);setupPicking();}";
 export default shader;

package/dist/src/marks/rule.common.glsl.js

@@ -1,2 +1,2 @@
-const shader = "uniform Mark{uniform mediump float uMinLength;uniform mediump float uDashTextureSize;uniform lowp int uStrokeCap;uniform mediump float uStrokeDashOffset;};";
+const shader = "layout(std140)uniform Mark{uniform mediump float uMinLength;uniform mediump float uDashTextureSize;uniform lowp int uStrokeCap;uniform mediump float uStrokeDashOffset;\n#pragma markUniforms\n};";
 export default shader;

package/dist/src/marks/rule.js

@@ -150,8 +150,8 @@ export default class RuleMark extends Mark {
 
         const props = this.properties;
 
-        this.registerMarkUniform("uMinLength", props.minLength);
-        this.registerMarkUniform(
+        this.registerMarkUniformValue("uMinLength", props.minLength);
+        this.registerMarkUniformValue(
             "uStrokeCap",
             props.strokeCap ?? "butt",
             (cap) => ["butt", "square", "round"].indexOf(cap)

package/dist/src/marks/text.common.glsl.js

@@ -1,2 +1,2 @@
-const shader = "uniform Mark{uniform mediump float uSdfNumerator;uniform mediump vec2 uD;uniform mediump vec4 uViewportEdgeFadeWidth;uniform mediump vec4 uViewportEdgeFadeDistance;uniform bool uSqueeze;uniform bool uLogoLetter;uniform lowp ivec2 uAlign;uniform mediump float uPaddingX;uniform bool uFlushX;uniform mediump float uPaddingY;uniform bool uFlushY;};";
+const shader = "layout(std140)uniform Mark{uniform mediump float uSdfNumerator;uniform mediump vec2 uD;uniform mediump vec4 uViewportEdgeFadeWidth;uniform mediump vec4 uViewportEdgeFadeDistance;uniform bool uSqueeze;uniform bool uLogoLetter;uniform lowp ivec2 uAlign;uniform mediump float uPaddingX;uniform bool uFlushX;uniform mediump float uPaddingY;uniform bool uFlushY;\n#pragma markUniforms\n};";
 export default shader;

package/dist/src/marks/text.js

@@ -160,9 +160,9 @@ export default class TextMark extends Mark {
 
         const props = this.properties;
 
-        this.registerMarkUniform(
+        this.registerMarkUniformValue(
             "uSdfNumerator",
-            /** @type {import("../spec/mark.js").ExprRef | number} */
+            /** @type {import("../spec/parameter.js").ExprRef | number} */
             ({ expr: "devicePixelRatio" }),
             (dpr) => {
                 let q = 0.35; // TODO: Ensure that this makes sense. Now chosen by trial & error

package/dist/src/paramBroker.d.ts

@@ -9,6 +9,8 @@
  * - Calling observers when a parameter changes
  * - Somehow saving parameter "state" (in bookmarks)
  * - Maybe something else
+ *
+ * @typedef {import("./utils/expression.js").ExpressionFunction & { addListener: (listener: () => void) => void, invalidate: () => void}} ExprRefFunction
  */
 export default class ParamBroker {
     /**
@@ -22,9 +24,23 @@ export default class ParamBroker {
      *
      * @param {string} expr
      */
-    createExpression(expr: string): ((x: object) => any) & import("./utils/expression.js").ExpressionProps & {
-        addListener: (listener: () => void) => void;
-    };
+    createExpression(expr: string): ExprRefFunction;
     #private;
 }
+/**
+ * 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 type ExprRefFunction = ((datum: object) => any) & import("./utils/expression.js").ExpressionProps & {
+    addListener: (listener: () => void) => void;
+    invalidate: () => void;
+};
 //# sourceMappingURL=paramBroker.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"paramBroker.d.ts","sourceRoot":"","sources":["../../src/paramBroker.js"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;GAaG;AACH;IAyBI;;;;OAIG;IACH,0BAHW,MAAM,WACI,GAAG,KAAK,IAAI,CAqBhC;IAID;;;;OAIG;IACH,uBAFW,MAAM,mBA2ChB;;CACJ;;;;;;;;;;;;;;4BAtG2F,MAAM,IAAI,KAAK,IAAI;gBAAc,MAAM,IAAI"}