@genome-spy/core 0.38.0 → 0.39.0

package/dist/schema.json

@@ -2457,6 +2457,10 @@
           "description": "The rotation angle in degrees.\n\n**Default value:** `0`",
           "type": "number"
         },
+        "arcHeightFactor": {
+          "description": "Scaling factor for the `\"arc`\" shape's height. The default value `1.0` produces roughly circular arcs.\n\n**Default value:** `1.0`",
+          "type": "number"
+        },
         "baseline": {
           "$ref": "#/definitions/Baseline",
           "description": "The vertical alignment of the text.  One of `\"top\"`, `\"middle\"`, `\"bottom\"`.\n\n**Default value:** `\"bottom\"`"
@@ -2465,6 +2469,10 @@
           "description": "Builds and index for efficient rendering of subsets of the data. The data must be sorted by the x coordinate.\n\nTODO: This should be enabled automatically if the data are sorted.",
           "type": "boolean"
         },
+        "clampApex": {
+          "description": "Whether the apex of the `\"dome\"` shape is clamped to the viewport edge. When over a half of the dome is located outside the viewport, clamping allows for more accurate reading of the value encoded by the apex' position.\n\n**Default value:** `false`",
+          "type": "boolean"
+        },
         "clip": {
           "anyOf": [
             {
@@ -2480,10 +2488,6 @@
         "color": {
           "type": "string"
         },
-        "color2": {
-          "description": "TODO",
-          "type": "string"
-        },
         "cornerRadius": {
           "description": "Radius of the rounded corners.\n\n**Default value:** `0`",
           "type": "number"
@@ -2560,10 +2564,24 @@
           "description": "Should the stroke 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.\n\n**Default value:** `false`",
           "type": "boolean"
         },
+        "linkShape": {
+          "description": "The shape of the link path. Either `\"arc\"`, `\"diagonal\"`, `\"line\"`, or `\"dome\"`.\n\n**Default value:** `\"arc\"`",
+          "enum": [
+            "arc",
+            "diagonal",
+            "line",
+            "dome"
+          ],
+          "type": "string"
+        },
         "logoLetters": {
           "description": "Stretch letters so that they can be used with [sequence logos](https://en.wikipedia.org/wiki/Sequence_logo), etc...",
           "type": "boolean"
         },
+        "minArcHeight": {
+          "description": "The minimum height of an `\"arc\"` shape. Makes very short links more clearly visible.\n\n**Default value:** `1.5`",
+          "type": "number"
+        },
         "minBufferSize": {
           "description": "Minimum size for WebGL buffers (number of data items). Allows for using `bufferSubData()` to update graphics.\n\nThis property is intended for internal use.",
           "type": "number"
@@ -2580,8 +2598,8 @@
           "description": "Clamps the minimum size-dependent opacity. The property does not affect the `opacity` channel. Valid values are between `0` and `1`.\n\nWhen a rectangle would be smaller than what is specified in `minHeight` and `minWidth`, it is faded out proportionally. Example: a rectangle would be rendered as one pixel wide, but `minWidth` clamps it to five pixels. The rectangle is actually rendered as five pixels wide, but its opacity is multiplied by 0.2. With this setting, you can limit the factor to, for example, 0.5 to keep the rectangles more clearly visible.\n\n**Default value:** `0`",
           "type": "number"
         },
-        "minSagittaLength": {
-          "description": "Minimum length of the arc's sagitta. Makes very short links more clearly visible.\n\n**Default value:** `1.5`",
+        "minPickingSize": {
+          "description": "The minimum stroke width of the links when pointing with the mouse cursor. Allows making very thin links easier to point at.\n\n**Default value:** `3.0`",
           "type": "number"
         },
         "minWidth": {
@@ -2591,6 +2609,14 @@
         "opacity": {
           "type": "number"
         },
+        "orient": {
+          "description": "The orientation of the link path. Either `\"vertical\"` or `\"horizontal\"`. Only applies to diagonal links.\n\n**Default value:** `\"vertical\"`",
+          "enum": [
+            "vertical",
+            "horizontal"
+          ],
+          "type": "string"
+        },
         "paddingX": {
           "description": "The horizontal padding, in pixels, when the `x2` channel is used for ranged text.\n\n**Default value:** `0`",
           "type": "number"
@@ -2599,10 +2625,6 @@
           "description": "The vertical padding, in pixels, when the `y2` channel is used for ranged text.\n\n**Default value:** `0`",
           "type": "number"
         },
-        "sagittaScaleFactor": {
-          "description": "Scaling factor of the arc's sagitta. The default value `1.0` produces roughly circular arcs.\n\n**Default value:** `1.0`",
-          "type": "number"
-        },
         "sampleFacetPadding": {
           "description": "Padding between sample facet's upper/lower edge and the maximum point size. This property controls how tightly points are squeezed when facet's height is smaller than the maximum point size. The unit is a proportion of facet's height. The value must be between `0` and `0.5`. This property has no effect when sample faceting is not used.\n\n**Default value:** `0.1`",
           "type": "number"
@@ -2623,10 +2645,6 @@
           "description": "The font size in pixels.\n\n**Default value:** `11`",
           "type": "number"
         },
-        "size2": {
-          "description": "TODO",
-          "type": "number"
-        },
         "squeeze": {
           "description": "If the `squeeze` property is true and secondary positional channels (`x2` and/or `y2`) are used, the text is scaled to fit mark's width and/or height.\n\n**Default value:** `true`",
           "type": "boolean"

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

@@ -1 +1 @@
-{"version":3,"file":"encoder.d.ts","sourceRoot":"","sources":["../../../src/encoder/encoder.js"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AACH,6CAJW,OAAO,kBAAkB,EAAE,OAAO,aAClC,OAAO,oBAAoB,EAAE,QAAQ,gGAsC/C;AAED;;;;;;;GAOG;AACH,0CANW,OAAO,oBAAoB,EAAE,UAAU,SACvC,GAAG,0IAyFb;AAED;;;;;GAKG;AACH,uCAHW,OAAO,oBAAoB,EAAE,UAAU,4FAKjD;AAED;;;GAGG;AACH,uCAHW,OAAO,oBAAoB,EAAE,UAAU,mEAKjD;AAED;;;GAGG;AACH,uCAHW,OAAO,oBAAoB,EAAE,UAAU,uDAKjD;AAED;;;GAGG;AACH,kDAHW,OAAO,oBAAoB,EAAE,UAAU,kEAWjD;AAED;;;GAGG;AACH,6CAHW,OAAO,qBAAqB,EAAE,OAAO,WACrC,OAAO,oBAAoB,EAAE,OAAO,klBAS9C;AAED;;;GAGG;AACH,0CAHW,OAAO,oBAAoB,EAAE,UAAU,0DAKjD;AAED;;;GAGG;AACH,sCAHW,OAAO,oBAAoB,EAAE,UAAU,sDAKjD;AAoBD;;;GAGG;AACH,oDAHW,OAAO,oBAAoB,EAAE,OAAO,oEAM9C;AAED;;;GAGG;AACH,6CAHW,OAAO,oBAAoB,EAAE,OAAO,6DAM9C;AAqBD;;;GAGG;AACH,4CAFW,MAAM,WAIhB;AAED;;;;GAIG;AACH,oDAFW,OAAO,oBAAoB,EAAE,OAAO,2DAS9C;AAED;;;;;GAKG;AACH,2CAFW,OAAO,oBAAoB,EAAE,OAAO,wCAI9C;AAED;;;;GAIG;AACH,kDAFW,OAAO,oBAAoB,EAAE,OAAO,0CAM9C;AAED;;GAEG;AACH,wCAFW,OAAO,oBAAoB,EAAE,OAAO,WAI9C;AAED;;;;GAIG;AACH,2CAFW,OAAO,oBAAoB,EAAE,OAAO,WAI9C;AAED;;;GAGG;AACH,4CAHW,OAAO,oBAAoB,EAAE,OAAO,4DAuB9C;AAED;;;;;GAKG;AACH,0CAHW,OAAO,oBAAoB,EAAE,OAAO,GAClC,GAAG,EAAE,CAkBjB;AAED;;;GAGG;AACH,gDAHW,OAAO,oBAAoB,EAAE,OAAO,UACzB,GAAG,KAAE,MAAM,CAkBhC;AAxLD;;GAEG;AACH,wCAFU,OAAO,oBAAoB,EAAE,wBAAwB,EAAE,CAEb;AAEpD;;GAEG;AACH,0CAFU,OAAO,oBAAoB,EAAE,0BAA0B,EAAE,CAEX;AAExD;;GAEG;AACH,iCAFU,OAAO,oBAAoB,EAAE,iBAAiB,EAAE,CAKxD;AAoBF;;;;GAIG;AACH,gCAFU,QAAQ,OAAO,OAAO,oBAAoB,EAAE,OAAO,EAAE,OAAO,oBAAoB,EAAE,0BAA0B,CAAC,CAAC,CAKtH;AAEF;;;;GAIG;AACH,8BAFU,QAAQ,OAAO,OAAO,oBAAoB,EAAE,OAAO,EAAE,OAAO,oBAAoB,EAAE,OAAO,CAAC,CAAC,CAInG"}
+{"version":3,"file":"encoder.d.ts","sourceRoot":"","sources":["../../../src/encoder/encoder.js"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AACH,6CAJW,OAAO,kBAAkB,EAAE,OAAO,aAClC,OAAO,oBAAoB,EAAE,QAAQ,gGAsC/C;AAED;;;;;;;GAOG;AACH,0CANW,OAAO,oBAAoB,EAAE,UAAU,SACvC,GAAG,0IAyFb;AAED;;;;;GAKG;AACH,uCAHW,OAAO,oBAAoB,EAAE,UAAU,4FAKjD;AAED;;;GAGG;AACH,uCAHW,OAAO,oBAAoB,EAAE,UAAU,mEAKjD;AAED;;;GAGG;AACH,uCAHW,OAAO,oBAAoB,EAAE,UAAU,uDAKjD;AAED;;;GAGG;AACH,kDAHW,OAAO,oBAAoB,EAAE,UAAU,kEAWjD;AAED;;;GAGG;AACH,6CAHW,OAAO,qBAAqB,EAAE,OAAO,WACrC,OAAO,oBAAoB,EAAE,OAAO,klBAS9C;AAED;;;GAGG;AACH,0CAHW,OAAO,oBAAoB,EAAE,UAAU,0DAKjD;AAED;;;GAGG;AACH,sCAHW,OAAO,oBAAoB,EAAE,UAAU,sDAKjD;AAoBD;;;GAGG;AACH,oDAHW,OAAO,oBAAoB,EAAE,OAAO,oEAM9C;AAED;;;GAGG;AACH,6CAHW,OAAO,oBAAoB,EAAE,OAAO,6DAM9C;AAqBD;;;GAGG;AACH,4CAFW,MAAM,WAIhB;AAED;;;;GAIG;AACH,oDAFW,OAAO,oBAAoB,EAAE,OAAO,2DAS9C;AAED;;;;;GAKG;AACH,2CAFW,OAAO,oBAAoB,EAAE,OAAO,wCAI9C;AAED;;;;GAIG;AACH,kDAFW,OAAO,oBAAoB,EAAE,OAAO,0CAM9C;AAED;;GAEG;AACH,wCAFW,OAAO,oBAAoB,EAAE,OAAO,WAI9C;AAED;;;;GAIG;AACH,2CAFW,OAAO,oBAAoB,EAAE,OAAO,WAI9C;AAED;;;GAGG;AACH,4CAHW,OAAO,oBAAoB,EAAE,OAAO,4DAuB9C;AAED;;;;;GAKG;AACH,0CAHW,OAAO,oBAAoB,EAAE,OAAO,GAClC,GAAG,EAAE,CAsBjB;AAED;;;GAGG;AACH,gDAHW,OAAO,oBAAoB,EAAE,OAAO,UACzB,GAAG,KAAE,MAAM,CAmBhC;AA7LD;;GAEG;AACH,wCAFU,OAAO,oBAAoB,EAAE,wBAAwB,EAAE,CAEb;AAEpD;;GAEG;AACH,0CAFU,OAAO,oBAAoB,EAAE,0BAA0B,EAAE,CAEX;AAExD;;GAEG;AACH,iCAFU,OAAO,oBAAoB,EAAE,iBAAiB,EAAE,CAKxD;AAoBF;;;;GAIG;AACH,gCAFU,QAAQ,OAAO,OAAO,oBAAoB,EAAE,OAAO,EAAE,OAAO,oBAAoB,EAAE,0BAA0B,CAAC,CAAC,CAKtH;AAEF;;;;GAIG;AACH,8BAFU,QAAQ,OAAO,OAAO,oBAAoB,EAAE,OAAO,EAAE,OAAO,oBAAoB,EAAE,OAAO,CAAC,CAAC,CAInG"}

package/dist/src/encoder/encoder.js

@@ -366,12 +366,16 @@ export function getDiscreteRange(channel) {
             return [
                 "circle",
                 "square",
-                "triangle-up",
                 "cross",
                 "diamond",
-                "triangle-down",
+                "triangle-up",
                 "triangle-right",
+                "triangle-down",
                 "triangle-left",
+                "tick-up",
+                "tick-right",
+                "tick-down",
+                "tick-left",
             ];
         default:
     }
@@ -391,6 +395,7 @@ export function getDiscreteRangeMapper(channel) {
     );
 
     return (value) => {
+        // TODO: Memoize previous
         const mapped = valueMap.get(value);
         if (mapped !== undefined) {
             return mapped;

package/dist/src/gl/dataToVertices.d.ts

@@ -135,7 +135,7 @@ export class PointVertexBuilder extends GeometryBuilder {
         numItems?: number;
     });
 }
-export class ConnectionVertexBuilder extends GeometryBuilder {
+export class LinkVertexBuilder extends GeometryBuilder {
     /**
      * @param {object} object
      * @param {Record<string, Encoder>} object.encoders

package/dist/src/gl/dataToVertices.js

@@ -415,7 +415,7 @@ export class PointVertexBuilder extends GeometryBuilder {
     }
 }
 
-export class ConnectionVertexBuilder extends GeometryBuilder {
+export class LinkVertexBuilder extends GeometryBuilder {
     /**
      * @param {object} object
      * @param {Record<string, Encoder>} object.encoders

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

@@ -1,2 +1,2 @@
-const shader = "uniform float uSagittaScaleFactor;uniform float uMinSagittaLength;in vec2 strip;out vec4 vColor;out float vSize;out float vNormalLengthInPixels;void main(void){float pixelSize=1.0/uDevicePixelRatio;float opacity=getScaled_opacity()*uViewOpacity;vec2 a=vec2(getScaled_x(),getScaled_y())*uViewportSize;vec2 b=vec2(getScaled_x2(),getScaled_y2())*uViewportSize;vec2 chordVector=b-a;vec2 unitChordVector=normalize(chordVector);vec2 chordNormal=vec2(-unitChordVector.y,unitChordVector.x);float sagitta=max(length(chordVector)/2.0*uSagittaScaleFactor,uMinSagittaLength);bool compress=false;if(compress){float maxSagittaLen=length(chordNormal*uViewportSize);float maxChordLen=length(unitChordVector*uViewportSize);float threshold=maxSagittaLen*0.5;if(sagitta>threshold){float m=(maxSagittaLen-threshold)/(maxChordLen-threshold);sagitta=(sagitta-threshold)*m+threshold;}}vec2 controlOffset=chordNormal*sagitta/0.75;vec2 p1=a;vec2 p2=a+controlOffset;vec2 p3=b+controlOffset;vec2 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);\n#ifdef size2_DEFINED\nfloat mixedSize=mix(getScaled_size(),getScaled_size2(),t);\n#else\nfloat mixedSize=getScaled_size();\n#endif\nif(mixedSize<pixelSize){opacity*=mixedSize/pixelSize;mixedSize=pixelSize;}float paddedSize=mixedSize+pixelSize;vNormalLengthInPixels=strip.y*paddedSize;p+=normal*vNormalLengthInPixels;gl_Position=pixelsToNdc(p);\n#ifdef color2_DEFINED\nvec3 color=mix(getScaled_color(),getScaled_color2(),t);\n#else\nvec3 color=getScaled_color();\n#endif\nvColor=vec4(color*opacity,opacity);vSize=paddedSize;setupPicking();}";
+const shader = "uniform float uArcHeightFactor;uniform float uMinArcHeight;uniform float uMinPickingSize;uniform int uShape;uniform int uOrient;uniform bool uClampApex;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;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 height=max(length(chordVector)/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;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/gl/point.fragment.glsl.js

@@ -1,2 +1,2 @@
-const shader = "const lowp vec4 white=vec4(1.0);const lowp vec4 black=vec4(0.0,0.0,0.0,1.0);uniform bool uInwardStroke;uniform float uGradientStrength;in float vRadius;in float vRadiusWithPadding;in lowp vec4 vFillColor;in lowp vec4 vStrokeColor;in lowp float vShape;in lowp float vHalfStrokeWidth;in mat2 vRotationMatrix;out lowp vec4 fragColor;const float CIRCLE=0.0;const float SQUARE=1.0;const float TRIANGLE_UP=2.0;const float CROSS=3.0;const float DIAMOND=4.0;const float TRIANGLE_DOWN=5.0;const float TRIANGLE_RIGHT=6.0;const float TRIANGLE_LEFT=7.0;float circle(vec2 p,float r){return length(p)-r;}float square(vec2 p,float r){p=abs(p);return max(p.x,p.y)-r;}float equilateralTriangle(vec2 p,float r,bool flip,bool swap){if(swap){p.xy=p.yx;}if(flip){p.y=-p.y;}float k=sqrt(3.0);float kr=k*r;p.y-=kr/2.0;return max((abs(p.x)*k+p.y)/2.0,-p.y-kr);}float crossShape(vec2 p,float r){p=abs(p);vec2 b=vec2(0.4,1.0)*r;vec2 v=abs(p)-b.xy;vec2 h=abs(p)-b.yx;return min(max(v.x,v.y),max(h.x,h.y));}float diamond(vec2 p,float r){p=abs(p);return(max(abs(p.x-p.y),abs(p.x+p.y))-r)/sqrt(2.0);}void main(){float d;vec2 p=vRotationMatrix*(2.0*gl_PointCoord-1.0)*vRadiusWithPadding;float r=vRadius;if(vShape==CIRCLE){d=circle(p,r);}else if(vShape==SQUARE){d=square(p,r);}else if(vShape==TRIANGLE_UP){d=equilateralTriangle(p,r,true,false);}else if(vShape==CROSS){d=crossShape(p,r);}else if(vShape==DIAMOND){d=diamond(p,r);}else if(vShape==TRIANGLE_DOWN){d=equilateralTriangle(p,r,false,false);}else if(vShape==TRIANGLE_RIGHT){d=equilateralTriangle(p,r,false,true);}else if(vShape==TRIANGLE_LEFT){d=equilateralTriangle(p,r,true,true);}else{d=0.0;}if(!uPickingEnabled){lowp vec4 fillColor=mix(vFillColor,white,-d*uGradientStrength/vRadius);fragColor=distanceToColor(d+(uInwardStroke ? vHalfStrokeWidth : 0.0),fillColor,vStrokeColor,vHalfStrokeWidth);}else if(d-vHalfStrokeWidth<=0.0){fragColor=vPickingColor;}else{discard;}}";
+const shader = "const lowp vec4 white=vec4(1.0);const lowp vec4 black=vec4(0.0,0.0,0.0,1.0);uniform bool uInwardStroke;uniform float uGradientStrength;in float vRadius;in float vRadiusWithPadding;in lowp vec4 vFillColor;in lowp vec4 vStrokeColor;in lowp float vShape;in lowp float vHalfStrokeWidth;in mat2 vRotationMatrix;out lowp vec4 fragColor;const float CIRCLE=0.0;const float SQUARE=1.0;const float CROSS=2.0;const float DIAMOND=3.0;const float TRIANGLE_UP=4.0;const float TICK_UP=8.0;float circle(vec2 p,float r){return length(p)-r;}float square(vec2 p,float r){p=abs(p);return max(p.x,p.y)-r;}float tickUp(vec2 p,float r){float halfR=r*0.5;p.y+=halfR;p=abs(p);return max(p.x-r*0.15,p.y-halfR);}float equilateralTriangle(vec2 p,float r){p.y=-p.y;float k=sqrt(3.0);float kr=k*r;p.y-=kr/2.0;return max((abs(p.x)*k+p.y)/2.0,-p.y-kr);}float crossShape(vec2 p,float r){p=abs(p);vec2 b=vec2(0.4,1.0)*r;vec2 v=abs(p)-b.xy;vec2 h=abs(p)-b.yx;return min(max(v.x,v.y),max(h.x,h.y));}float diamond(vec2 p,float r){p=abs(p);return(max(abs(p.x-p.y),abs(p.x+p.y))-r)/sqrt(2.0);}void main(){float d;vec2 p=vRotationMatrix*(2.0*gl_PointCoord-1.0)*vRadiusWithPadding;float r=vRadius;if(vShape==CIRCLE){d=circle(p,r);}else if(vShape==SQUARE){d=square(p,r);}else if(vShape==CROSS){d=crossShape(p,r);}else if(vShape==DIAMOND){d=diamond(p,r);}else if(vShape==TRIANGLE_UP){d=equilateralTriangle(p,r);}else if(vShape==TICK_UP){d=tickUp(p,r);}else{d=0.0;}if(!uPickingEnabled){lowp vec4 fillColor=mix(vFillColor,white,-d*uGradientStrength/vRadius);fragColor=distanceToColor(d+(uInwardStroke ? vHalfStrokeWidth : 0.0),fillColor,vStrokeColor,vHalfStrokeWidth);}else if(d-vHalfStrokeWidth<=0.0){fragColor=vPickingColor;}else{discard;}}";
 export default shader;

package/dist/src/gl/point.vertex.glsl.js

@@ -1,2 +1,2 @@
-const shader = "/***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 float uScaleFactor;uniform float uMaxPointSize;uniform float uZoomLevel;uniform float uSemanticThreshold;out float vRadius;out float vRadiusWithPadding;out lowp vec4 vFillColor;out lowp vec4 vStrokeColor;out lowp float vShape;out lowp float vHalfStrokeWidth;out mat2 vRotationMatrix;float computeSemanticThresholdFactor(){return getScaled_semanticScore()>=uSemanticThreshold ? 1.0 : 0.0;}/***Computes a scaling factor for the points in a sample-faceted view.*/float getDownscaleFactor(vec2 pos){if(!isFacetedSamples()){return 1.0;}float sampleFacetHeight=getSampleFacetHeight(pos);float maxPointDiameter=sqrt(uMaxPointSize);float factor=sampleFacetHeight*uViewportSize.y*uMaxRelativePointDiameter;return clamp(0.0,maxPointDiameter,factor)/maxPointDiameter;}vec2 getDxDy(){\n#if defined(dx_DEFINED) || defined(dy_DEFINED)\nreturn vec2(getScaled_dx(),getScaled_dy())/uViewportSize;\n#else\nreturn vec2(0.0,0.0);\n#endif\n}void main(void){float semanticThresholdFactor=computeSemanticThresholdFactor();if(semanticThresholdFactor<=0.0){gl_PointSize=0.0;gl_Position=vec4(100.0,0.0,0.0,0.0);return;}float size=getScaled_size();vec2 pos=vec2(getScaled_x(),getScaled_y())+getDxDy();gl_Position=unitToNdc(applySampleFacet(pos));float strokeWidth=getScaled_strokeWidth();float diameter=sqrt(size)*uScaleFactor*semanticThresholdFactor*getDownscaleFactor(pos);float opacity=uViewOpacity;if(strokeWidth<=0.0||uInwardStroke){float minDiameter=1.0/uDevicePixelRatio;if(diameter<minDiameter){opacity*=pow(diameter/minDiameter,2.5);diameter=minDiameter;}}float fillOpa=getScaled_fillOpacity()*opacity;float strokeOpa=getScaled_strokeOpacity()*opacity;vShape=getScaled_shape();bool circle=vShape==0.0;float angleInDegrees=getScaled_angle();float angle=-angleInDegrees*PI/180.0;float sinTheta=sin(angle);float cosTheta=cos(angle);vRotationMatrix=mat2(cosTheta,sinTheta,-sinTheta,cosTheta);float roomForRotation=circle ? 1.0 : sin(mod(angle,PI/2.0)+PI/4.0)/sin(PI/4.0);float aaPadding=1.0/uDevicePixelRatio;float rotationPadding=(diameter*roomForRotation)-diameter;float strokePadding=uInwardStroke ? 0.0 : strokeWidth*(circle ? 1.0 : sqrt(3.0));float padding=rotationPadding+strokePadding+aaPadding;gl_PointSize=(diameter+padding)*uDevicePixelRatio;vRadius=diameter/2.0;vRadiusWithPadding=vRadius+padding/2.0;vHalfStrokeWidth=strokeWidth/2.0;vFillColor=vec4(getScaled_fill()*fillOpa,fillOpa);vStrokeColor=vec4(getScaled_stroke()*strokeOpa,strokeOpa);setupPicking();}";
+const shader = "/***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 float uScaleFactor;uniform float uMaxPointSize;uniform float uZoomLevel;uniform float uSemanticThreshold;out float vRadius;out float vRadiusWithPadding;out lowp vec4 vFillColor;out lowp vec4 vStrokeColor;out lowp float vShape;out lowp float vHalfStrokeWidth;out mat2 vRotationMatrix;const float CIRCLE=0.0;const float SQUARE=1.0;const float CROSS=2.0;const float DIAMOND=3.0;const float TRIANGLE_UP=4.0;const float TRIANGLE_RIGHT=5.0;const float TRIANGLE_DOWN=6.0;const float TRIANGLE_LEFT=7.0;const float TICK_UP=8.0;const float TICK_RIGHT=9.0;const float TICK_DOWN=10.0;const float TICK_LEFT=11.0;float computeSemanticThresholdFactor(){return getScaled_semanticScore()>=uSemanticThreshold ? 1.0 : 0.0;}/***Computes a scaling factor for the points in a sample-faceted view.*/float getDownscaleFactor(vec2 pos){if(!isFacetedSamples()){return 1.0;}float sampleFacetHeight=getSampleFacetHeight(pos);float maxPointDiameter=sqrt(uMaxPointSize);float factor=sampleFacetHeight*uViewportSize.y*uMaxRelativePointDiameter;return clamp(0.0,maxPointDiameter,factor)/maxPointDiameter;}vec2 getDxDy(){\n#if defined(dx_DEFINED) || defined(dy_DEFINED)\nreturn vec2(getScaled_dx(),getScaled_dy())/uViewportSize;\n#else\nreturn vec2(0.0,0.0);\n#endif\n}void main(void){float shapeAngle=0.0;float semanticThresholdFactor=computeSemanticThresholdFactor();if(semanticThresholdFactor<=0.0){gl_PointSize=0.0;gl_Position=vec4(100.0,0.0,0.0,0.0);return;}float size=getScaled_size();vec2 pos=vec2(getScaled_x(),getScaled_y())+getDxDy();gl_Position=unitToNdc(applySampleFacet(pos));float strokeWidth=getScaled_strokeWidth();float diameter=sqrt(size)*uScaleFactor*semanticThresholdFactor*getDownscaleFactor(pos);float opacity=uViewOpacity;if(strokeWidth<=0.0||uInwardStroke){float minDiameter=1.0/uDevicePixelRatio;if(diameter<minDiameter){opacity*=pow(diameter/minDiameter,2.5);diameter=minDiameter;}}float fillOpa=getScaled_fillOpacity()*opacity;float strokeOpa=getScaled_strokeOpacity()*opacity;vShape=getScaled_shape();bool circle=vShape==0.0;if(vShape>TICK_UP&&vShape<=TICK_LEFT){shapeAngle=(vShape-TICK_UP)*90.0;vShape=TICK_UP;}else if(vShape>TRIANGLE_UP&&vShape<=TRIANGLE_LEFT){shapeAngle=(vShape-TRIANGLE_UP)*90.0;vShape=TRIANGLE_UP;}float angleInDegrees=getScaled_angle();float angle=-(shapeAngle+angleInDegrees)*PI/180.0;float sinTheta=sin(angle);float cosTheta=cos(angle);vRotationMatrix=mat2(cosTheta,sinTheta,-sinTheta,cosTheta);float roomForRotation=circle ? 1.0 : sin(mod(angle,PI/2.0)+PI/4.0)/sin(PI/4.0);float aaPadding=1.0/uDevicePixelRatio;float rotationPadding=(diameter*roomForRotation)-diameter;float strokePadding=uInwardStroke ? 0.0 : strokeWidth*(circle ? 1.0 : sqrt(3.0));float padding=rotationPadding+strokePadding+aaPadding;gl_PointSize=(diameter+padding)*uDevicePixelRatio;vRadius=diameter/2.0;vRadiusWithPadding=vRadius+padding/2.0;vHalfStrokeWidth=strokeWidth/2.0;vFillColor=vec4(getScaled_fill()*fillOpa,fillOpa);vStrokeColor=vec4(getScaled_stroke()*strokeOpa,strokeOpa);setupPicking();}";
 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":"AAOA;IAqGQ;;;;;;MAKC;CAkDR;iBA9JgB,WAAW"}
+{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../../../src/marks/link.js"],"names":[],"mappings":"AAWA;IAsHQ;;;;;;MAKC;CAkDR;iBAnLgB,WAAW"}

package/dist/src/marks/link.js

@@ -1,9 +1,13 @@
 import { drawBufferInfo, setBuffersAndAttributes, setUniforms } from "twgl.js";
 import VERTEX_SHADER from "../gl/link.vertex.glsl.js";
 import FRAGMENT_SHADER from "../gl/link.fragment.glsl.js";
-import { ConnectionVertexBuilder } from "../gl/dataToVertices.js";
+import { LinkVertexBuilder } from "../gl/dataToVertices.js";
 
 import Mark from "./mark.js";
+import { isChannelDefWithScale } from "../encoder/encoder.js";
+
+const LINK_SHAPES = ["arc", "dome", "diagonal", "line"];
+const ORIENTS = ["vertical", "horizontal"];
 
 export default class LinkMark extends Mark {
     /**
@@ -24,8 +28,13 @@ export default class LinkMark extends Mark {
                 opacity: 1.0,
 
                 segments: 101, // Performance is affected more by the fill rate, i.e. number of pixels
-                sagittaScaleFactor: 1.0,
-                minSagittaLength: 1.5,
+                arcHeightFactor: 1.0,
+                minArcHeight: 1.5,
+                minPickingSize: 3.0,
+                clampApex: false,
+
+                linkShape: "arc",
+                orient: "vertical",
             })
         );
     }
@@ -55,12 +64,20 @@ export default class LinkMark extends Mark {
      * @returns {import("../spec/channel.js").Encoding}
      */
     fixEncoding(encoding) {
-        if (!encoding.x) {
-            encoding.x2 = encoding.x;
+        if (!encoding.x2) {
+            if (isChannelDefWithScale(encoding.x)) {
+                encoding.x2 = { datum: 0.0 };
+            } else {
+                encoding.x2 = encoding.x;
+            }
         }
 
         if (!encoding.y2) {
-            encoding.y2 = encoding.y;
+            if (isChannelDefWithScale(encoding.y)) {
+                encoding.y2 = { datum: 0.0 };
+            } else {
+                encoding.y2 = encoding.y;
+            }
         }
 
         return encoding;
@@ -80,8 +97,12 @@ export default class LinkMark extends Mark {
 
         // TODO: Use uniform block.
         setUniforms(this.programInfo, {
-            uSagittaScaleFactor: props.sagittaScaleFactor,
-            uMinSagittaLength: props.minSagittaLength,
+            uArcHeightFactor: props.arcHeightFactor,
+            uMinArcHeight: props.minArcHeight,
+            uMinPickingSize: props.minPickingSize,
+            uShape: LINK_SHAPES.indexOf(props.linkShape),
+            uOrient: ORIENTS.indexOf(props.orient),
+            uClampApex: !!props.clampApex,
         });
     }
 
@@ -89,7 +110,7 @@ export default class LinkMark extends Mark {
         const collector = this.unitView.getCollector();
         const itemCount = collector.getItemCount();
 
-        const builder = new ConnectionVertexBuilder({
+        const builder = new LinkVertexBuilder({
             encoders: this.encoders,
             attributes: this.getAttributes(),
             numItems: itemCount,

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

@@ -328,6 +328,30 @@ export interface PointProps extends AngleProps {
 }
 
 export interface LinkProps extends SecondaryPositionProps {
+    /**
+     * The shape of the link path. Either `"arc"`, `"diagonal"`, `"line"`, or `"dome"`.
+     *
+     * **Default value:** `"arc"`
+     */
+    linkShape?: "arc" | "diagonal" | "line" | "dome";
+
+    /**
+     * The orientation of the link path. Either `"vertical"` or `"horizontal"`.
+     * Only applies to diagonal links.
+     *
+     * **Default value:** `"vertical"`
+     */
+    orient?: "vertical" | "horizontal";
+
+    /**
+     * Whether the apex of the `"dome"` shape is clamped to the viewport edge. When over a
+     * half of the dome is located outside the viewport, clamping allows for more accurate
+     * reading of the value encoded by the apex' position.
+     *
+     * **Default value:** `false`
+     */
+    clampApex?: boolean;
+
     /**
      * The number of segments in the bézier curve. Affects the rendering quality and performance.
      * Use a higher value for a smoother curve.
@@ -337,28 +361,26 @@ export interface LinkProps extends SecondaryPositionProps {
     segments?: number;
 
     /**
-     * Scaling factor of the arc's sagitta. The default value `1.0` produces roughly circular arcs.
+     * Scaling factor for the `"arc`" shape's height. The default value `1.0` produces roughly circular arcs.
      *
      * **Default value:** `1.0`
      */
-    sagittaScaleFactor?: number;
+    arcHeightFactor?: number;
 
     /**
-     * Minimum length of the arc's sagitta. Makes very short links more clearly visible.
+     * The minimum height of an `"arc"` shape. Makes very short links more clearly visible.
      *
      * **Default value:** `1.5`
      */
-    minSagittaLength?: number;
+    minArcHeight?: number;
 
     /**
-     * TODO
-     */
-    color2?: string;
-
-    /**
-     * TODO
+     * The minimum stroke width of the links when pointing with the mouse cursor.
+     * Allows making very thin links easier to point at.
+     *
+     * **Default value:** `3.0`
      */
-    size2?: number;
+    minPickingSize?: number;
 }
 
 // TODO: Mark-specific configs

package/dist/src/view/gridView.d.ts

@@ -93,7 +93,7 @@ export class GridChild {
     /** @type {Partial<Record<import("../spec/axis.js").AxisOrient, AxisGridView>>} gridLines */
     gridLines: Partial<Record<import("../spec/axis.js").AxisOrient, AxisGridView>>;
     /** @type {Partial<Record<ScrollDirection, Scrollbar>>} */
-    scrollbars: Partial<Record<"horizontal" | "vertical", Scrollbar>>;
+    scrollbars: Partial<Record<"vertical" | "horizontal", Scrollbar>>;
     /** @type {UnitView} */
     title: UnitView;
     /** @type {Rectangle} */
@@ -116,12 +116,12 @@ declare class Scrollbar extends UnitView {
      * @param {GridChild} gridChild
      * @param {ScrollDirection} scrollDirection
      */
-    constructor(gridChild: GridChild, scrollDirection: "horizontal" | "vertical");
+    constructor(gridChild: GridChild, scrollDirection: "vertical" | "horizontal");
     config: {
         scrollbarSize: number;
         scrollbarPadding: number;
     };
-    scrollDirection: "horizontal" | "vertical";
+    scrollDirection: "vertical" | "horizontal";
     viewportOffset: number;
     maxScrollOffset: number;
     scrollbarCoords: Rectangle;

package/dist/src/view/scaleResolution.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scaleResolution.d.ts","sourceRoot":"","sources":["../../../src/view/scaleResolution.js"],"names":[],"mappings":"AAy0BA;;;;;;;;;;GAUG;AACH,6CAFW,OAAO,WAAW,EAAE,OAAO,GAAG,OAAO,WAAW,EAAE,OAAO,EAAE,QA4BrE;AA/zBD,0CAA2C;AAC3C,gCAAiC;AACjC,gCAAiC;AACjC,4BAA6B;AAC7B,4BAA6B;AAE7B;;;;GAIG;AACH;;;;;;;GAOG;AACH;IAyBI;;OAEG;IACH,2DASC;IARG,8CAAsB;IACtB,oDAAoD;IACpD,SADW,gBAAgB,EAAE,CACZ;IACjB,+DAA+D;IAC/D,MADW,MAAM,CACD;IAEhB,iEAAiE;IACjE,MADW,MAAM,CACI;IAGzB;;;;;;;OAOG;IACH,uBAHW,QAAQ,oFAQlB;IAED;;;OAGG;IACH,0BAHW,QAAQ,oFAQlB;IAWD;;;;;;OAMG;IACH,kHA0BC;IAED;;OAEG;IACH,4BAEC;IAED,+BAiBC;IAuBD;;;;;OAKG;IACH,iBAFa,OAAO,kBAAkB,EAAE,KAAK,CA+D5C;IAYD;;;;OAIG;IACH,qEAMC;IAED;;;;OAIG;IACH,+DAQC;IAED;;OAEG;IACH,oBAkCC;IAED;;OAEG;IACH,oDAmBC;IAED,mBAEC;IAED;;OAEG;IACH,oBAFa,mFAA6B,CAOzC;IAED;;;;OAIG;IACH,oBAKC;IAED;;OAEG;IACH,sBAGC;IAUD;;;;;;;OAOG;IACH,kBALW,MAAM,eACN,MAAM,OACN,MAAM,GACJ,OAAO,CAwEnB;IAED;;;;;;OAMG;IACH,eAJW,mFAA6B,aAC7B,OAAO,GAAG,MAAM,iBAgD1B;IAED;;;;OAIG;IACH,qBAcC;IAED;;;;;OAKG;IACH,uBAOC;IA2DD;;;OAGG;IACH,aAFa,OAAO,qBAAqB,EAAE,OAAO,CAajD;IAID;;;;;OAKG;IACH,uBAFW,MAAM,yDAUhB;IAED;;OAEG;IACH,iBAFW,MAAM,yDAKhB;IAED;;;OAGG;IACH,6EAFa,MAAM,CAQlB;IAED;;;OAGG;IACH,mHAFa,MAAM,EAAE,CAOpB;;CA6BJ;wIA3rBY;IAAC,IAAI,EAAE,OAAO,eAAe,EAAE,OAAO,CAAC;IAAC,OAAO,EAAE,CAAC,CAAA;CAAC"}
+{"version":3,"file":"scaleResolution.d.ts","sourceRoot":"","sources":["../../../src/view/scaleResolution.js"],"names":[],"mappings":"AA20BA;;;;;;;;;;GAUG;AACH,6CAFW,OAAO,WAAW,EAAE,OAAO,GAAG,OAAO,WAAW,EAAE,OAAO,EAAE,QA4BrE;AAl0BD,0CAA2C;AAC3C,gCAAiC;AACjC,gCAAiC;AACjC,4BAA6B;AAC7B,4BAA6B;AAE7B;;;;GAIG;AACH;;;;;;;GAOG;AACH;IAyBI;;OAEG;IACH,2DASC;IARG,8CAAsB;IACtB,oDAAoD;IACpD,SADW,gBAAgB,EAAE,CACZ;IACjB,+DAA+D;IAC/D,MADW,MAAM,CACD;IAEhB,iEAAiE;IACjE,MADW,MAAM,CACI;IAGzB;;;;;;;OAOG;IACH,uBAHW,QAAQ,oFAQlB;IAED;;;OAGG;IACH,0BAHW,QAAQ,oFAQlB;IAWD;;;;;;OAMG;IACH,kHA0BC;IAED;;OAEG;IACH,4BAEC;IAED,+BAiBC;IAuBD;;;;;OAKG;IACH,iBAFa,OAAO,kBAAkB,EAAE,KAAK,CA+D5C;IAYD;;;;OAIG;IACH,qEAMC;IAED;;;;OAIG;IACH,+DAQC;IAED;;OAEG;IACH,oBAkCC;IAED;;OAEG;IACH,oDAmBC;IAED,mBAEC;IAED;;OAEG;IACH,oBAFa,mFAA6B,CAOzC;IAED;;;;OAIG;IACH,oBAKC;IAED;;OAEG;IACH,sBAGC;IAUD;;;;;;;OAOG;IACH,kBALW,MAAM,eACN,MAAM,OACN,MAAM,GACJ,OAAO,CAwEnB;IAED;;;;;;OAMG;IACH,eAJW,mFAA6B,aAC7B,OAAO,GAAG,MAAM,iBAgD1B;IAED;;;;OAIG;IACH,qBAcC;IAED;;;;;OAKG;IACH,uBAOC;IA8DD;;;OAGG;IACH,aAFa,OAAO,qBAAqB,EAAE,OAAO,CAajD;IAID;;;;;OAKG;IACH,uBAFW,MAAM,yDAUhB;IAED;;OAEG;IACH,iBAFW,MAAM,yDAKhB;IAED;;;OAGG;IACH,6EAFa,MAAM,CAQlB;IAED;;;OAGG;IACH,mHAFa,MAAM,EAAE,CAOpB;;CA6BJ;wIA9rBY;IAAC,IAAI,EAAE,OAAO,eAAe,EAAE,OAAO,CAAC;IAAC,OAAO,EAAE,CAAC,CAAA;CAAC"}

package/dist/src/view/scaleResolution.js

@@ -23,7 +23,6 @@ import createScale, { configureScale } from "../scale/scale.js";
 import { invalidate, getCachedOrCall } from "../utils/propertyCacher.js";
 import {
     getChannelDefWithScale,
-    getDiscreteRange,
     isColorChannel,
     isDiscreteChannel,
     isPositionalChannel,
@@ -649,7 +648,10 @@ export default class ScaleResolution {
                     : "viridis";
         } else if (isDiscreteChannel(channel)) {
             // Shapes of point mark, for example
-            props.range = getDiscreteRange(channel);
+            props.range =
+                channel == "shape"
+                    ? ["circle", "square", "triangle-up", "cross", "diamond"]
+                    : [];
         } else if (channel == "size") {
             props.range = [0, 400]; // TODO: Configurable default. This is currently optimized for points.
         } else if (channel == "angle") {

package/package.json

@@ -7,7 +7,7 @@
   },
   "contributors": [],
   "license": "MIT",
-  "version": "0.38.0",
+  "version": "0.39.0",
   "jsdelivr": "dist/bundle/index.js",
   "unpkg": "dist/bundle/index.js",
   "browser": "dist/bundle/index.js",
@@ -65,5 +65,5 @@
     "vega-scale": "^7.1.1",
     "vega-util": "^1.16.0"
   },
-  "gitHead": "cd0ae7c4bc32d3a8937b04baa14af742b0fab889"
+  "gitHead": "62718f51e03f665435dd2f3b557e20b42df1410e"
 }