@genome-spy/core 0.43.2 → 0.44.0

package/dist/src/gl/glslScaleGenerator.js

@@ -18,6 +18,8 @@ import {
 } from "../encoder/encoder.js";
 import { asArray, peek } from "../utils/arrayUtils.js";
 import { InternMap } from "internmap";
+import { isExprRef } from "../marks/mark.js";
+import scaleNull from "../utils/scaleNull.js";
 
 export const ATTRIBUTE_PREFIX = "attr_";
 export const DOMAIN_PREFIX = "uDomain_";
@@ -50,11 +52,12 @@ function splitScaleType(type) {
 }
 
 /**
+ * Generates GLSL code for a constant value.
  *
  * @param {Channel} channel
  * @param {number | number[] | string | boolean} value
  */
-export function generateValueGlsl(channel, value) {
+export function generateConstantValueGlsl(channel, value) {
     /** @type {VectorizedValue} */
     let vec;
     if (isDiscreteChannel(channel)) {
@@ -81,8 +84,6 @@ export function generateValueGlsl(channel, value) {
         vec = vectorize(value);
     }
 
-    // These could also be passed as uniforms because GPU drivers often handle
-    // uniforms as constants and recompile the shader to eliminate dead code etc.
     let glsl = `
 #define ${channel}_DEFINED
 ${vec.type} ${SCALED_FUNCTION_PREFIX}${channel}() {
@@ -93,16 +94,52 @@ ${vec.type} ${SCALED_FUNCTION_PREFIX}${channel}() {
 }
 
 /**
+ * Generates GLSL code for a dynamic, parameter-driven values. These are mainly
+ * used as dynamic mark properties that map to encoding channels.
  *
  * @param {Channel} channel
- * @param {any} scale TODO: typing
+ */
+export function generateDynamicValueGlslAndUniform(channel) {
+    let dataType = "float";
+    /** @type {(x: any) => any} */
+    let adjuster = (x) => x;
+
+    if (isColorChannel(channel)) {
+        dataType = "vec3";
+        adjuster = (x) => cssColorToArray(x);
+    }
+
+    const uniformName = `u${capitalize(channel)}`;
+
+    const uniformGlsl = `    // Dynamic value\n    uniform ${dataType} ${uniformName};`;
+
+    let scaleGlsl = `
+#define ${channel}_DEFINED
+${dataType} ${SCALED_FUNCTION_PREFIX}${channel}() {
+    // Dynamic value
+    return ${uniformName};
+}`;
+
+    return {
+        channel,
+        uniformName,
+        uniformGlsl,
+        scaleGlsl,
+        adjuster,
+    };
+}
+
+/**
+ *
+ * @param {Channel} channel
+ * @param {import("../view/scaleResolution.js").default} scaleResolution TODO: typing
  * @param {import("../spec/channel.js").ChannelDef} channelDef
  * @param {Channel[]} [sharedQuantitativeChannels] Channels that share the same quantitative field
  */
 // eslint-disable-next-line complexity
 export function generateScaleGlsl(
     channel,
-    scale,
+    scaleResolution,
     channelDef,
     sharedQuantitativeChannels = [channel]
 ) {
@@ -112,9 +149,11 @@ export function generateScaleGlsl(
         );
     }
 
-    if (!scale) {
-        throw new Error("Scale is undefined");
-    }
+    /**
+     * Typecast to any to make it easier to handle all the different scale variants
+     * @type {any}
+     */
+    const scale = scaleResolution ? scaleResolution.scale : scaleNull();
 
     const primary = getPrimaryChannel(channel);
     const attributeName =
@@ -243,24 +282,35 @@ export function generateScaleGlsl(
             );
     }
 
-    // N.B. Interpolating scales require unit range
-    // TODO: Reverse
-    const range =
-        isInterpolating(scale.type) ||
-        (isContinuous(scale.type) && isColorChannel(channel))
-            ? [0, 1]
-            : scale.range
-            ? scale.range()
-            : undefined;
-
-    if (range && channel == primary && range.length && range.every(isNumber)) {
-        const vectorizedRange = vectorizeRange(range);
-
-        // Range needs no runtime adjustment (at least for now). Thus, pass it as a constant that the
-        // GLSL compiler can optimize away in the case of unit ranges.
-        glsl.push(
-            `const ${vectorizedRange.type} ${rangeName} = ${vectorizedRange};`
-        );
+    const range = getRangeForGlsl(scale, channel);
+
+    /** @type {string} */
+    let rangeUniform;
+
+    if (range && channel == primary) {
+        const rangeProp = scale.props.range ?? [];
+        // Maybe the scale could be annotated with a "dynamicRange" property or something
+        if (isExprRef(rangeProp) || rangeProp.some(isExprRef)) {
+            // TODO: should check that we don't have an ordinal range here as it should be
+            // handled using a texture.
+            if (range.length < 1 || range.length > 4) {
+                // TODO: Use an array instead of (float|vec[234]). This is likely to be a rare case, however.
+                throw new Error(
+                    `A range with ExprRefs must have 1-4 elements, not ${
+                        range.length
+                    }! Range: ${JSON.stringify(range)}`
+                );
+            }
+            rangeUniform = `    uniform ${getFloatVectorType(
+                range.length
+            )} ${rangeName};`;
+        } else if (range.length && range.every(isNumber)) {
+            const vectorizedRange = vectorizeRange(range);
+
+            glsl.push(
+                `const ${vectorizedRange.type} ${rangeName} = ${vectorizedRange};`
+            );
+        }
     }
 
     const returnType = isColorChannel(channel) ? "vec3" : "float";
@@ -290,9 +340,9 @@ export function generateScaleGlsl(
         interpolate = `getDiscreteColor(${textureUniformName}, int(transformed)).r`;
     }
 
-    const attributeGlsl = isDatumDef(channelDef)
-        ? `uniform highp ${attributeType} ${attributeName};`
-        : `in highp ${attributeType} ${attributeName};`;
+    const [attributeGlsl, markUniformGlsl] = isDatumDef(channelDef)
+        ? [undefined, `    uniform highp ${attributeType} ${attributeName};`]
+        : [`in highp ${attributeType} ${attributeName};`, undefined];
 
     /** @type {string[]} Channel's scale function*/
     const scaleBody = [];
@@ -374,14 +424,20 @@ ${returnType} ${SCALED_FUNCTION_PREFIX}${channel}() {
                 ? domainLength
                 : 2;
         domainUniform = hp
-            ? `highp vec3 ${domainUniformName};`
-            : `mediump float ${domainUniformName}[${length}];`;
+            ? `    highp vec3 ${domainUniformName};`
+            : `    mediump float ${domainUniformName}[${length}];`;
     }
 
     return {
+        attributeName,
         attributeGlsl,
+        // Ends up in the Mark uniform block
+        markUniformGlsl,
         glsl: concatenated,
+        domainUniformName,
         domainUniform,
+        rangeName,
+        rangeUniform,
     };
 }
 
@@ -426,26 +482,43 @@ function vectorize(value) {
         throw new Error("Invalid number of components: " + numComponents);
     }
 
-    let type;
-    let str;
+    const type = getFloatVectorType(numComponents);
+    const str = `${type}(${value.map(toDecimal).join(", ")})`;
 
-    if (numComponents > 1) {
-        type = `vec${numComponents}`;
-        str = `${type}(${value.map(toDecimal).join(", ")})`;
-    } else {
-        type = "float";
-        str = toDecimal(value[0]);
+    return Object.assign(str, { type, numComponents });
+}
+
+/**
+ * @param {number} numComponents
+ */
+function getFloatVectorType(numComponents) {
+    switch (numComponents) {
+        case 1:
+            return "float";
+        case 2:
+            return "vec2";
+        case 3:
+            return "vec3";
+        case 4:
+            return "vec4";
+        default:
+            throw new Error("Invalid number of components: " + numComponents);
     }
+}
 
-    return Object.assign(str, { type, numComponents });
+/**
+ * @param {string} color
+ */
+function cssColorToArray(color) {
+    const rgb = d3color(color).rgb();
+    return [rgb.r, rgb.g, rgb.b].map((x) => x / 255);
 }
 
 /**
  * @param {string} color
  */
 function vectorizeCssColor(color) {
-    const rgb = d3color(color).rgb();
-    return vectorize([rgb.r, rgb.g, rgb.b].map((x) => x / 255));
+    return vectorize(cssColorToArray(color));
 }
 
 /**
@@ -591,3 +664,25 @@ export function dedupeEncodingFields(encoders) {
 export function makeAttributeName(channel) {
     return asArray(channel).join("_");
 }
+
+/**
+ * @param {string} str
+ */
+function capitalize(str) {
+    return str[0].toUpperCase() + str.slice(1);
+}
+
+/**
+ * N.B. Interpolating scales require unit range
+ * TODO: Reverse
+ * @param {any} scale
+ * @param {Channel} channel
+ * @returns {number[]}
+ */
+export const getRangeForGlsl = (scale, channel) =>
+    isInterpolating(scale.type) ||
+    (isContinuous(scale.type) && isColorChannel(channel))
+        ? [0, 1]
+        : scale.range
+        ? scale.range()
+        : undefined;

package/dist/src/gl/webGLHelper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"webGLHelper.d.ts","sourceRoot":"","sources":["../../../src/gl/webGLHelper.js"],"names":[],"mappings":"AA8ZA;;;;GAIG;AACH,kCAJW,sBAAsB,gBACtB,WAAW,kBACX,WAAW;;;;;;EA8CrB;AAED;;;;;GAKG;AACH,0CALW,qBAAqB,WACrB,KAAK,OAAO,SAAS,EAAE,cAAc,EAAE,KAAK,CAAC,OAC7C,MAAM,EAAE,GAAG,eAAe,YAC1B,YAAY,gBAYtB;AAncD;IACI;;;;;;;OAOG;IACH,uBANW,WAAW,eACX,MAAM;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAC,eAGrC,MAAM,EAmFhB;IAhFG,wBAA2B;IAC3B;;;MAKO;IAEP,uCAAuC;IACvC,cADW,IAAI,MAAM,EAAE,WAAW,CAAC,CACN;IAE7B,kFAAkF;IAClF,eADW,QAAQ,OAAO,4BAA4B,EAAE,OAAO,EAAE,YAAY,CAAC,CAC5C;IAuClC,0BAAoB;IACpB,2BAAY;IAGZ,oDAAoD;IACpD,2BADW,OAAO,SAAS,EAAE,iBAAiB,EAAE,CAQ/C;IACD,sDAGC;IAOD,+CAA+C;IAC/C,aADW,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CACZ;IAOnC,uBAIC;IAHG;;;MAAmC;IAKvC,mBAEC;IADG,YAAkC;IAGtC;;;;;OAKG;IACH,oBAHW,MAAM,QACN,MAAM,GAAG,MAAM,EAAE,eA2B3B;IAED,iBAcC;IAED,iBAEC;IAED;;;;OAIG;IACH,oCAFW;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE;;;MAQ3C;IAED;;OAEG;IACH;;;MAuBC;IAED;;;;OAIG;IACH,oBAHW,MAAM,KACN,MAAM,cAwBhB;IAED,iBAOC;IAED;;;;;;;;;OASG;IACH,+BAHW,OAAO,4BAA4B,EAAE,OAAO,WAC5C,OAAO,QA4GjB;CACJ"}
+{"version":3,"file":"webGLHelper.d.ts","sourceRoot":"","sources":["../../../src/gl/webGLHelper.js"],"names":[],"mappings":"AA4ZA;;;;GAIG;AACH,kCAJW,sBAAsB,gBACtB,WAAW,kBACX,WAAW;;;;;;EA8CrB;AAED;;;;;GAKG;AACH,0CALW,qBAAqB,WACrB,KAAK,OAAO,SAAS,EAAE,cAAc,EAAE,KAAK,CAAC,OAC7C,MAAM,EAAE,GAAG,eAAe,YAC1B,YAAY,gBAYtB;AAjcD;IACI;;;;;;;OAOG;IACH,uBANW,WAAW,eACX,MAAM;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAC,eAGrC,MAAM,EAmFhB;IAhFG,wBAA2B;IAC3B;;;MAKO;IAEP,uCAAuC;IACvC,cADW,IAAI,MAAM,EAAE,WAAW,CAAC,CACN;IAE7B,kFAAkF;IAClF,eADW,QAAQ,OAAO,4BAA4B,EAAE,OAAO,EAAE,YAAY,CAAC,CAC5C;IAuClC,0BAAoB;IACpB,2BAAY;IAGZ,oDAAoD;IACpD,2BADW,OAAO,SAAS,EAAE,iBAAiB,EAAE,CAQ/C;IACD,sDAGC;IAOD,+CAA+C;IAC/C,aADW,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CACZ;IAOnC,uBAIC;IAHG;;;MAAmC;IAKvC,mBAEC;IADG,YAAkC;IAGtC;;;;;OAKG;IACH,oBAHW,MAAM,QACN,MAAM,GAAG,MAAM,EAAE,eA2B3B;IAED,iBAcC;IAED,iBAEC;IAED;;;;OAIG;IACH,oCAFW;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE;;;MAQ3C;IAED;;OAEG;IACH;;;MAuBC;IAED;;;;OAIG;IACH,oBAHW,MAAM,KACN,MAAM,cAwBhB;IAED,iBAOC;IAED;;;;;;;;;OASG;IACH,+BAHW,OAAO,4BAA4B,EAAE,OAAO,WAC5C,OAAO,QA0GjB;CACJ"}

package/dist/src/gl/webGLHelper.js

@@ -301,9 +301,9 @@ export default class WebGLHelper {
         const channel = resolution.channel;
 
         if (isColorChannel(channel)) {
-            const props = resolution.getScaleProps();
+            const scale = resolution.scale;
+            const props = scale.props;
 
-            const scale = resolution.getScale();
             const range = /** @type {any[]} */ (scale.range());
 
             /** @type {WebGLTexture} */
@@ -336,7 +336,7 @@ export default class WebGLHelper {
                 // Interpolating
                 isInterpolating(scale.type) ||
                 // Or piecewise
-                (isContinuous(scale.type) && range.length > 2)
+                (isContinuous(scale.type) && range.length > 1)
             ) {
                 texture = createInterpolatedColorTexture(
                     range,
@@ -355,7 +355,7 @@ export default class WebGLHelper {
 
             this.rangeTextures.set(resolution, texture);
         } else {
-            const scale = resolution.getScale();
+            const scale = resolution.scale;
 
             if (scale.type === "ordinal" || isDiscretizing(scale.type)) {
                 /** @type {function(any):number} Handle "shape" etc */
@@ -363,9 +363,7 @@ export default class WebGLHelper {
                     ? getDiscreteRangeMapper(channel)
                     : (x) => x;
 
-                const range = /** @type {any[]} */ (
-                    resolution.getScale().range()
-                );
+                const range = /** @type {any[]} */ (scale.range());
 
                 this.rangeTextures.set(
                     resolution,

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

@@ -0,0 +1,2 @@
+const shader = "layout(std140)uniform Mark{uniform float uArcHeightFactor;uniform float uMinArcHeight;uniform float uMinPickingSize;uniform int uShape;uniform int uOrient;uniform bool uClampApex;uniform float uMaxChordLength;uniform vec2 uArcFadingDistance;\n#pragma markUniforms\n};";
+export default shader;

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

@@ -1 +1 @@
-{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../../../src/marks/link.js"],"names":[],"mappings":"AAWA;IA+BQ;;;;;OAKG;IACH,yBAEC;IAmGD;;;;;;MAKC;CAoFR;iBAzOgB,WAAW"}
+{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../../../src/marks/link.js"],"names":[],"mappings":"AAYA;IA+BQ;;;;;OAKG;IACH,yBAEC;IA4GD;;;;;;MAKC;CAoFR;iBAlPgB,WAAW"}

package/dist/src/marks/link.js

@@ -1,6 +1,7 @@
 import { setBuffersAndAttributes } from "twgl.js";
 import VERTEX_SHADER from "./link.vertex.glsl.js";
 import FRAGMENT_SHADER from "./link.fragment.glsl.js";
+import COMMON_SHADER from "./link.common.glsl.js";
 import { LinkVertexBuilder } from "../gl/dataToVertices.js";
 
 import Mark from "./mark.js";
@@ -98,7 +99,9 @@ export default class LinkMark extends Mark {
     async initializeGraphics() {
         await super.initializeGraphics();
 
-        this.createAndLinkShaders(VERTEX_SHADER, FRAGMENT_SHADER);
+        this.createAndLinkShaders(VERTEX_SHADER, FRAGMENT_SHADER, [
+            COMMON_SHADER,
+        ]);
     }
 
     finalizeGraphicsInitialization() {
@@ -107,22 +110,29 @@ export default class LinkMark extends Mark {
 
         const props = this.properties;
 
-        this.registerMarkUniform(
+        this.registerMarkUniformValue(
             "uArcFadingDistance",
             props.arcFadingDistance,
             (x) => x || /** @type {[number, number]} */ ([0, 0])
         );
-        this.registerMarkUniform("uArcHeightFactor", props.arcHeightFactor);
-        this.registerMarkUniform("uMinArcHeight", props.minArcHeight);
-        this.registerMarkUniform("uMinPickingSize", props.minPickingSize);
-        this.registerMarkUniform("uShape", props.linkShape, (linkShape) =>
+        this.registerMarkUniformValue(
+            "uArcHeightFactor",
+            props.arcHeightFactor
+        );
+        this.registerMarkUniformValue("uMinArcHeight", props.minArcHeight);
+        this.registerMarkUniformValue("uMinPickingSize", props.minPickingSize);
+        this.registerMarkUniformValue("uShape", props.linkShape, (linkShape) =>
             LINK_SHAPES.indexOf(linkShape)
         );
-        this.registerMarkUniform("uOrient", props.orient, (orient) =>
+        this.registerMarkUniformValue("uOrient", props.orient, (orient) =>
             ORIENTS.indexOf(orient)
         );
-        this.registerMarkUniform("uClampApex", props.clampApex, (x) => !!x);
-        this.registerMarkUniform("uMaxChordLength", props.maxChordLength);
+        this.registerMarkUniformValue(
+            "uClampApex",
+            props.clampApex,
+            (x) => !!x
+        );
+        this.registerMarkUniformValue("uMaxChordLength", props.maxChordLength);
     }
 
     updateGraphicsData() {

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

@@ -1,2 +1,2 @@
-const shader = "uniform Mark{uniform float uArcHeightFactor;uniform float uMinArcHeight;uniform float uMinPickingSize;uniform int uShape;uniform int uOrient;uniform bool uClampApex;uniform float uMaxChordLength;uniform vec2 uArcFadingDistance;};in vec2 strip;out vec4 vColor;out float vSize;out float vNormalLengthInPixels;const int SHAPE_ARC=0;const int SHAPE_DOME=1;const int SHAPE_DIAGONAL=2;const int SHAPE_LINE=3;const int ORIENT_VERTICAL=0;const int ORIENT_HORIZONTAL=1;float distanceFromLine(vec2 pointOnLine1,vec2 pointOnLine2,vec2 point){vec2 a=point-pointOnLine1;vec2 b=pointOnLine2-pointOnLine1;vec2 proj=dot(a,b)/dot(b,b)*b;return length(a-proj);}bool isInsideViewport(vec2 point,float marginFactor){vec2 margin=uViewportSize*vec2(marginFactor);return point.x>=-margin.x&&point.x<=uViewportSize.x+margin.x&&point.y>=-margin.y&&point.y<=uViewportSize.y+margin.y;}void main(void){float pixelSize=1.0/uDevicePixelRatio;float opacity=getScaled_opacity()*uViewOpacity;vec2 p1,p2,p3,p4;vec2 a=applySampleFacet(vec2(getScaled_x(),getScaled_y()))*uViewportSize;vec2 b=applySampleFacet(vec2(getScaled_x2(),getScaled_y2()))*uViewportSize;if(uShape<=SHAPE_DOME){if(uShape==SHAPE_DOME){vec2 height=vec2(0.0);if(uOrient==ORIENT_VERTICAL){p1=vec2(min(a.x,b.x),b.y);p4=vec2(max(a.x,b.x),b.y);height=vec2(0.0,a.y-b.y);if(uClampApex){if(p4.x>0.0){p1.x=max(p1.x,-p4.x);}if(p1.x<uViewportSize.x){p4.x=min(p4.x,2.0*uViewportSize.x-p1.x);}}}else{p1=vec2(b.x,min(a.y,b.y));p4=vec2(b.x,max(a.y,b.y));height=vec2(a.x-b.x,0.0);if(uClampApex){if(p4.y>0.0){p1.y=max(p1.y,-p4.y);}if(p1.y<uViewportSize.y){p4.y=min(p4.y,2.0*uViewportSize.y-p1.y);}}}vec2 controlOffset=height/0.75;p2=p1+controlOffset;p3=p4+controlOffset;}if(uShape==SHAPE_ARC){p1=a;p4=b;vec2 chordVector=p4-p1;vec2 unitChordVector=normalize(chordVector);vec2 chordNormal=vec2(-unitChordVector.y,unitChordVector.x);float chordLength=length(chordVector);if(chordLength>uMaxChordLength){if(isInsideViewport(p1,2.0)){chordLength=uMaxChordLength;p4=p1+unitChordVector*uMaxChordLength;}else if(isInsideViewport(p4,2.0)){chordLength=uMaxChordLength;p1=p4-unitChordVector*uMaxChordLength;}}float height=max(chordLength/2.0*uArcHeightFactor,uMinArcHeight);vec2 controlOffset=chordNormal*height/0.75;p2=p1+controlOffset;p3=p4+controlOffset;}}else if(uShape==SHAPE_DIAGONAL){if(uOrient==ORIENT_VERTICAL){p1=a;p2=vec2(a.x,(a.y+b.y)/2.0);p3=vec2(b.x,(a.y+b.y)/2.0);p4=b;}else{p1=a;p2=vec2((a.x+b.x)/2.0,a.y);p3=vec2((a.x+b.x)/2.0,b.y);p4=b;}}else if(uShape==SHAPE_LINE){p1=a;p2=(a+b)/2.0;p3=p2;p4=b;}float t=smoothstep(0.0,1.0,strip.x);vec2 C1=p4-3.0*p3+3.0*p2-p1;vec2 C2=3.0*p3-6.0*p2+3.0*p1;vec2 C3=3.0*p2-3.0*p1;vec2 C4=p1;vec2 p;if(t==0.0){p=p1;}else if(t==1.0){p=p4;}else{p=C1*t*t*t+C2*t*t+C3*t+C4;}vec2 tangent=normalize(3.0*C1*t*t+2.0*C2*t+C3);vec2 normal=vec2(-tangent.y,tangent.x);float size=getScaled_size();if(size<pixelSize){opacity*=size/pixelSize;size=pixelSize;}float paddedSize=uPickingEnabled? max(size,uMinPickingSize): size+pixelSize;vNormalLengthInPixels=strip.y*paddedSize;if(uShape==SHAPE_ARC&&uArcFadingDistance[0]>0.0&&uArcFadingDistance[1]>0.0){float d=distanceFromLine(p1,p4,p);float distanceOpacity=smoothstep(uArcFadingDistance[1],uArcFadingDistance[0],d);opacity*=distanceOpacity;if(distanceOpacity<=0.0){vNormalLengthInPixels=0.0;}}p+=normal*vNormalLengthInPixels;gl_Position=pixelsToNdc(p);vec3 color=getScaled_color();vColor=vec4(color*opacity,opacity);vSize=paddedSize;setupPicking();}";
+const shader = "in vec2 strip;out vec4 vColor;out float vSize;out float vNormalLengthInPixels;const int SHAPE_ARC=0;const int SHAPE_DOME=1;const int SHAPE_DIAGONAL=2;const int SHAPE_LINE=3;const int ORIENT_VERTICAL=0;const int ORIENT_HORIZONTAL=1;float distanceFromLine(vec2 pointOnLine1,vec2 pointOnLine2,vec2 point){vec2 a=point-pointOnLine1;vec2 b=pointOnLine2-pointOnLine1;vec2 proj=dot(a,b)/dot(b,b)*b;return length(a-proj);}bool isInsideViewport(vec2 point,float marginFactor){vec2 margin=uViewportSize*vec2(marginFactor);return point.x>=-margin.x&&point.x<=uViewportSize.x+margin.x&&point.y>=-margin.y&&point.y<=uViewportSize.y+margin.y;}void main(void){float pixelSize=1.0/uDevicePixelRatio;float opacity=getScaled_opacity()*uViewOpacity;vec2 p1,p2,p3,p4;vec2 a=applySampleFacet(vec2(getScaled_x(),getScaled_y()))*uViewportSize;vec2 b=applySampleFacet(vec2(getScaled_x2(),getScaled_y2()))*uViewportSize;if(uShape<=SHAPE_DOME){if(uShape==SHAPE_DOME){vec2 height=vec2(0.0);if(uOrient==ORIENT_VERTICAL){p1=vec2(min(a.x,b.x),b.y);p4=vec2(max(a.x,b.x),b.y);height=vec2(0.0,a.y-b.y);if(uClampApex){if(p4.x>0.0){p1.x=max(p1.x,-p4.x);}if(p1.x<uViewportSize.x){p4.x=min(p4.x,2.0*uViewportSize.x-p1.x);}}}else{p1=vec2(b.x,min(a.y,b.y));p4=vec2(b.x,max(a.y,b.y));height=vec2(a.x-b.x,0.0);if(uClampApex){if(p4.y>0.0){p1.y=max(p1.y,-p4.y);}if(p1.y<uViewportSize.y){p4.y=min(p4.y,2.0*uViewportSize.y-p1.y);}}}vec2 controlOffset=height/0.75;p2=p1+controlOffset;p3=p4+controlOffset;}if(uShape==SHAPE_ARC){p1=a;p4=b;vec2 chordVector=p4-p1;vec2 unitChordVector=normalize(chordVector);vec2 chordNormal=vec2(-unitChordVector.y,unitChordVector.x);float chordLength=length(chordVector);if(chordLength>uMaxChordLength){if(isInsideViewport(p1,2.0)){chordLength=uMaxChordLength;p4=p1+unitChordVector*uMaxChordLength;}else if(isInsideViewport(p4,2.0)){chordLength=uMaxChordLength;p1=p4-unitChordVector*uMaxChordLength;}}float height=max(chordLength/2.0*uArcHeightFactor,uMinArcHeight);vec2 controlOffset=chordNormal*height/0.75;p2=p1+controlOffset;p3=p4+controlOffset;}}else if(uShape==SHAPE_DIAGONAL){if(uOrient==ORIENT_VERTICAL){p1=a;p2=vec2(a.x,(a.y+b.y)/2.0);p3=vec2(b.x,(a.y+b.y)/2.0);p4=b;}else{p1=a;p2=vec2((a.x+b.x)/2.0,a.y);p3=vec2((a.x+b.x)/2.0,b.y);p4=b;}}else if(uShape==SHAPE_LINE){p1=a;p2=(a+b)/2.0;p3=p2;p4=b;}float t=smoothstep(0.0,1.0,strip.x);vec2 C1=p4-3.0*p3+3.0*p2-p1;vec2 C2=3.0*p3-6.0*p2+3.0*p1;vec2 C3=3.0*p2-3.0*p1;vec2 C4=p1;vec2 p;if(t==0.0){p=p1;}else if(t==1.0){p=p4;}else{p=C1*t*t*t+C2*t*t+C3*t+C4;}vec2 tangent=normalize(3.0*C1*t*t+2.0*C2*t+C3);vec2 normal=vec2(-tangent.y,tangent.x);float size=getScaled_size();if(size<pixelSize){opacity*=size/pixelSize;size=pixelSize;}float paddedSize=uPickingEnabled? max(size,uMinPickingSize): size+pixelSize;vNormalLengthInPixels=strip.y*paddedSize;if(uShape==SHAPE_ARC&&uArcFadingDistance[0]>0.0&&uArcFadingDistance[1]>0.0){float d=distanceFromLine(p1,p4,p);float distanceOpacity=smoothstep(uArcFadingDistance[1],uArcFadingDistance[0],d);opacity*=distanceOpacity;if(distanceOpacity<=0.0){vNormalLengthInPixels=0.0;}}p+=normal*vNormalLengthInPixels;gl_Position=pixelsToNdc(p);vec3 color=getScaled_color();vColor=vec4(color*opacity,opacity);vSize=paddedSize;setupPicking();}";
 export default shader;

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

@@ -1,9 +1,9 @@
 /// <reference types="external-typings/internmap.js" />
 /**
  * @param {any} x
- * @returns {x is import("../spec/mark.js").ExprRef}
+ * @returns {x is import("../spec/parameter.js").ExprRef}
  */
-export function isExprRef(x: any): x is import("../spec/mark.js").ExprRef;
+export function isExprRef(x: any): x is import("../spec/parameter.js").ExprRef;
 export const SAMPLE_FACET_UNIFORM: "SAMPLE_FACET_UNIFORM";
 export const SAMPLE_FACET_TEXTURE: "SAMPLE_FACET_TEXTURE";
 /**
@@ -20,13 +20,6 @@ export const SAMPLE_FACET_TEXTURE: "SAMPLE_FACET_TEXTURE";
  *
  */
 export default class Mark {
-    /**
-     * @typedef {import("../spec/mark.js").MarkConfig} MarkConfig
-     * @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
      */
@@ -60,18 +53,18 @@ export default class Mark {
     protected markUniformsAltered: boolean;
     /** @type {RangeMap<any>} keep track of facet locations within the vertex array */
     rangeMap: RangeMap<any>;
-    /** @type {MarkConfig} */
-    defaultProperties: import("../spec/mark.js").MarkConfig;
+    /** @type {MarkProps} */
+    defaultProperties: import("../spec/mark.js").MarkProps;
     /**
      * A properties object that contains the configured mark properties or
      * default values as fallback.
      *
      * TODO: Proper and comprehensive typings for mark properties
      *
-     * @type {Partial<MarkConfig>}
+     * @type {Partial<MarkProps>}
      * @readonly
      */
-    readonly properties: Partial<import("../spec/mark.js").MarkConfig>;
+    readonly properties: Partial<import("../spec/mark.js").MarkProps>;
     get opaque(): boolean;
     /**
      * Returns attribute info for WebGL attributes that match visual channels.
@@ -128,8 +121,6 @@ export default class Mark {
      * @protected
      */
     protected createAndLinkShaders(vertexShader: string, fragmentShader: string, extraHeaders?: string[]): void;
-    /** @type {string[]} */
-    domainUniforms: string[];
     programStatus: {
         program: WebGLProgram;
         getProgramErrors: () => {
@@ -140,8 +131,19 @@ 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(): void;
+    /**
+     * Sets a uniform in the Mark block. Requests a render from the animator.
+     *
+     * @protected
+     * @param {string} uniformName
+     * @returns {function(any):void}
+     */
+    protected createMarkUniformSetter(uniformName: string): (arg0: any) => 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
@@ -153,8 +155,7 @@ export default class Mark {
      * @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;
+    protected registerMarkUniformValue<T>(uniformName: string, propValue: T, adjuster?: (x: Exclude<T, import("../spec/parameter.js").ExprRef>) => any): void;
     /**
      * Delete WebGL buffers etc.
      */
@@ -233,6 +234,7 @@ export default class Mark {
      * @returns {any}
      */
     findDatumAt(facetId: string, x: import("../spec/channel.js").Scalar): any;
+    #private;
 }
 export type RenderingOptions = import("../types/rendering.js").RenderingOptions;
 export type _MarkRenderingOptions = {

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

@@ -1 +1 @@
-{"version":3,"file":"mark.d.ts","sourceRoot":"","sources":["../../../src/marks/mark.js"],"names":[],"mappings":"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"}
+{"version":3,"file":"mark.d.ts","sourceRoot":"","sources":["../../../src/marks/mark.js"],"names":[],"mappings":"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"}