@genome-spy/core 0.48.0 → 0.48.2

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../../../src/marks/link.js"],"names":[],"mappings":"AAYA;IA+BQ;;;;;OAKG;IACH,yBAEC;IA2GD;;;;;;MAKC;CAwFR;iBArPgB,WAAW"}

package/dist/src/marks/link.js

@@ -133,6 +133,11 @@ export default class LinkMark extends Mark {
             (x) => !!x
         );
         this.registerMarkUniformValue("uMaxChordLength", props.maxChordLength);
+        this.registerMarkUniformValue(
+            "uSegmentBreaks",
+            props.segments,
+            (x) => x + 1
+        );
     }
 
     updateGraphicsData() {
@@ -149,12 +154,6 @@ export default class LinkMark extends Mark {
 
         const vertexData = builder.toArrays();
 
-        // TODO: Use gl_VertexID to calculate the strip in the vertex shader
-        vertexData.arrays.strip = {
-            data: createStrip(this.properties.segments),
-            numComponents: 2,
-        };
-
         this.rangeMap.migrateEntries(vertexData.rangeMap);
 
         this.arrays = Object.fromEntries(
@@ -196,8 +195,6 @@ export default class LinkMark extends Mark {
     render(options) {
         const gl = this.gl;
 
-        const arcVertexCount = (this.properties.segments + 1) * 2;
-
         return this._baseInstanceExt
             ? this.createRenderCallback((offset, count) => {
                   // Using the following extension, which, however, is only a draft and
@@ -207,7 +204,9 @@ export default class LinkMark extends Mark {
                   this._baseInstanceExt.drawArraysInstancedBaseInstanceWEBGL(
                       gl.TRIANGLE_STRIP,
                       0,
-                      arcVertexCount,
+                      /** @type {Float32Array} */ (
+                          this.markUniformInfo.uniforms.uSegmentBreaks
+                      )[0] * 2,
                       count,
                       offset
                   );
@@ -229,7 +228,9 @@ export default class LinkMark extends Mark {
                           attribInfo.divisor
                       ) {
                           attribInfo.offset =
-                              offset * this.arrays[attribute].numComponents * 4; // gl.FLOAT in bytes
+                              offset *
+                              this.arrays[attribute].numComponents *
+                              this.bytesPerElement.get(attribute);
                       }
                   }
                   setBuffersAndAttributes(
@@ -241,20 +242,11 @@ export default class LinkMark extends Mark {
                   gl.drawArraysInstanced(
                       gl.TRIANGLE_STRIP,
                       0,
-                      arcVertexCount,
+                      /** @type {Float32Array} */ (
+                          this.markUniformInfo.uniforms.uSegmentBreaks
+                      )[0] * 2,
                       count
                   );
               }, options);
     }
 }
-
-function createStrip(/** @type number */ segments) {
-    let i = 0;
-    const coords = [];
-
-    for (; i <= segments; i++) {
-        coords.push(i / segments, 0.5);
-        coords.push(i / segments, -0.5);
-    }
-    return new Float32Array(coords);
-}

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

@@ -1,2 +1,2 @@
-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();}";
+const shader = "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;}vec2 strip=vec2(float(gl_VertexID/2)/float(uSegmentBreaks),float(gl_VertexID % 2)-0.5);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

@@ -29,6 +29,15 @@ export default class Mark {
     protected bufferInfo: import("twgl.js").BufferInfo & {
         allocatedVertices?: number;
     };
+    /**
+     * TWGL's BufferInfo doesn't contain the number of bytes per element,
+     * so we need to keep track of it separately. This is mainly used by
+     * the instancing hack in the link mark.
+     *
+     * @type {Map<string, number>}
+     * @protected
+     */
+    protected bytesPerElement: Map<string, number>;
     /**
      * @type {import("twgl.js").ProgramInfo}
      * @protected

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

@@ -1 +1 @@
-{"version":3,"file":"mark.d.ts","sourceRoot":"","sources":["../../../src/marks/mark.js"],"names":[],"mappings":";AA4CA,0DAA2D;AAC3D,0DAA2D;AAE3D;;;;;;;;;;;;GAYG;AACH;IAgBI;;OAEG;IACH,sBAFW,OAAO,qBAAqB,EAAE,OAAO,EA6F/C;IA1FG,gDAAwB;IAExB,oEAAoE;IACpE,UADW,OAAO,MAAM,EAAE,OAAO,qBAAqB,EAAE,OAAO,CAAC,CACvC;IAIzB;;;OAGG;IACH,sBAHU,OAAO,SAAS,EAAE,UAAU,GAAG;QAAE,iBAAiB,CAAC,EAAE,MAAM,CAAA;KAAE,CAG5C;IAE3B;;;OAGG;IACH,uBAHU,OAAO,SAAS,EAAE,WAAW,CAGX;IAE5B;;;OAGG;IACH,2BAHU,OAAO,SAAS,EAAE,eAAe,CAGX;IAEhC;;;OAGG;IACH,2BAHU,OAAO,SAAS,EAAE,gBAAgB,CAGZ;IAEhC;;;;;OAKG;IACH,2BAHU,OAAO,SAAS,EAAE,gBAAgB,CAGZ;IAEhC;;;;;OAKG;IACH,uCAA+B;IAE/B,kFAAkF;IAClF,UADW,SAAS,GAAG,CAAC,CACM;IAG9B,wBAAwB;IACxB,uDAqBC;IAED;;;;;;;;OAQG;IACH,kEAKC;IAGL,sBAEC;IAED;;;;;;;OAOG;IACH,iBAFa,MAAM,EAAE,CAKpB;IAED;;OAEG;IACH,+DAWC;IAED;;OAEG;IACH,oEAcC;IAED;;;;;OAKG;IACH,oHAEC;IAED;;;;;;OAMG;IACH,yGAkCC;IAED;;;;OAIG;IACH,8DAiDC;IAED,wDAEC;IAED,8CAEC;IAED,uBAEC;IAED;;;OAGG;IACH,2BAEC;IAED;;OAEG;IACH,oCAEC;IAED;;OAEG;IACH,2BAEC;IAED,sEAeC;IAED;;;;;;OAMG;IAEH,6CANW,MAAM,kBACN,MAAM,iBACN,MAAM,EAAE,QA8NlB;IALG;;;;;;MAIC;IAGL;;;;;;OAMG;IACH,uCA6CC;IAED;;;;;;OAMG;IACH,+CAHW,MAAM,UACK,GAAG,KAAE,IAAI,CAe9B;IAED;;;;;;;;;;OAUG;IACH,mDAJW,MAAM,sFAEsB,GAAG,QA6BzC;IAED;;OAEG;IACH,2BAwBC;IAED;;;OAGG;IACH,6BAFW,GAAG,QAgCb;IAED,yBAAyB;IACzB,uDAEC;IAED,yBAAyB;IACzB,iCAEC;IAED,gCAEC;IAED,+BAEC;IAED,yCAEC;IAED;;;;;OAKG;IACH,gCAcC;IAED;;OAEG;IACH,4CAOC;IAED;;;;;;;;OAQG;IAEH,uBAJW,OAAO,uBAAuB,EAAE,sBAAsB,GACpD,CAAC,MAAM,IAAI,CAAC,EAAE,CAsF1B;IAED;;;;;;OAMG;IACH,qCAJW,oBAAoB,GAClB,OAAO,CAqCnB;IAED;;;;;;;OAOG;IACH,gBAJW,oBAAoB,SACP,IAAI,CAM3B;IAED;;;OAGG;IACH,2BAHW,YAAY,WACZ,OAAO,WAAW,EAAE,oBAAoB,cAiElD;IAED;;;;;;OAMG;IACH,oBAJW,OAAO,6BAA6B,EAAE,OAAO,aAC7C,OAAO,6BAA6B,EAAE,OAAO,GAC3C,OAAO,CAuHnB;IAED;;;;;;;;;OASG;IACH,qBAJW,MAAM,KACN,OAAO,oBAAoB,EAAE,MAAM,GACjC,GAAG,CAIf;;CACJ;+BAvoCY,OAAO,uBAAuB,EAAE,gBAAgB;;;;;;wBAEnD,OAAO;;mCAEJ,gBAAgB,GAAG,qBAAqB;oCAG1C,MAAM,SACN,MAAM;AAioCjB;;;GAGG;AACH;IACI,cAEC;IAkBD;;;OAGG;IACH,2BAFW,IAAI,CAAC,EAAE,OAAO,yBAAyB,EAAE,UAAU,CAAC,QAiB9D;CACJ;0BA/rCyB,WAAW"}
+{"version":3,"file":"mark.d.ts","sourceRoot":"","sources":["../../../src/marks/mark.js"],"names":[],"mappings":"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"}

package/dist/src/marks/mark.js

@@ -91,6 +91,16 @@ export default class Mark {
          */
         this.bufferInfo = undefined;
 
+        /**
+         * TWGL's BufferInfo doesn't contain the number of bytes per element,
+         * so we need to keep track of it separately. This is mainly used by
+         * the instancing hack in the link mark.
+         *
+         * @type {Map<string, number>}
+         * @protected
+         */
+        this.bytesPerElement = new Map();
+
         /**
          * @type {import("twgl.js").ProgramInfo}
          * @protected
@@ -788,6 +798,15 @@ export default class Mark {
                 { numElements: vertexData.vertexCount }
             );
             this.bufferInfo.allocatedVertices = vertexData.allocatedVertices;
+
+            for (const [attribute, attributeData] of Object.entries(
+                vertexData.arrays
+            )) {
+                this.bytesPerElement.set(
+                    attribute,
+                    attributeData.data.BYTES_PER_ELEMENT
+                );
+            }
         }
     }
 

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

@@ -1,2 +1,2 @@
-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();}";
+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,uCornerRadiusTopLeft,uCornerRadiusBottomLeft);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/spec/mark.d.ts

@@ -349,7 +349,7 @@ export interface LinkProps extends SecondaryPositionProps {
      *
      * **Default value:* `101`
      */
-    segments?: number;
+    segments?: number | ExprRef;
 
     /**
      * Scaling factor for the `"arc`" shape's height. The default value `1.0` produces roughly circular arcs.

package/dist/src/utils/animator.d.ts

@@ -6,13 +6,14 @@
  * Read more at: https://www.gamedeveloper.com/programming/improved-lerp-smoothing-
  *
  * @param {import("../utils/animator.js").default} animator
- * @param {(value: number) => void} callback Function to be called with the interpolated value
+ * @param {(value: T) => void} callback Function to be called with the interpolated value
  * @param {number} halfLife Time until half of the value is reached, in milliseconds
  * @param {number} stopAt Stop animation when the value is within this distance from the target
- * @param {number} [initialValue] Initial value
- * @returns {((target: number) => void) & { stop: () => void}} Function that activates the transition with a new target value
+ * @param {T} initialValue Initial value
+ * @returns {((target: T) => void) & { stop: () => void}} Function that activates the transition with a new target value
+ * @template {Record<string, number>} T
  */
-export function makeLerpSmoother(animator: import("../utils/animator.js").default, callback: (value: number) => void, halfLife: number, stopAt: number, initialValue?: number): ((target: number) => void) & {
+export function makeLerpSmoother<T extends Record<string, number>>(animator: import("../utils/animator.js").default, callback: (value: T) => void, halfLife: number, stopAt: number, initialValue: T): ((target: T) => void) & {
     stop: () => void;
 };
 export default class Animator {

package/dist/src/utils/animator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"animator.d.ts","sourceRoot":"","sources":["../../../src/utils/animator.js"],"names":[],"mappings":"AAoFA;;;;;;;;;;;;;GAaG;AACH,2CAPW,OAAO,sBAAsB,EAAE,OAAO,oBAC9B,MAAM,KAAK,IAAI,YACvB,MAAM,UACN,MAAM,iBACN,MAAM,aACM,MAAM,KAAK,IAAI;UAAY,MAAM,IAAI;EA0D3D;AAxJD;IACI;;;OAGG;IACH,mCAFoB,MAAM,KAAE,IAAI,EAS/B;IANG,wBAHgB,MAAM,KAAE,IAAI,CAGS;IACrC,0BAA6B;IAC7B,eAAkB;IAElB,wCAAwC;IACxC,aADW,QAAU,MAAM,KAAE,IAAI,CAAC,EAAE,CACf;IAGzB;;;;;;;;;OASG;IACH,mCAFoB,MAAM,KAAE,IAAI,QAM/B;IAED;;OAEG;IACH,kCAFoB,MAAM,KAAE,IAAI,QAO/B;IAED;;;;OAIG;IACH,sBAoBC;IAED;;;;;OAKG;IACH,oBAFW,OAAO,iBAAiB,EAAE,iBAAiB,gBAQrD;CACJ"}
+{"version":3,"file":"animator.d.ts","sourceRoot":"","sources":["../../../src/utils/animator.js"],"names":[],"mappings":"AAoFA;;;;;;;;;;;;;;GAcG;AACH,6EARW,OAAO,sBAAsB,EAAE,OAAO,0BACxB,IAAI,YAClB,MAAM,UACN,MAAM,oCAEY,IAAI;UAAY,MAAM,IAAI;EAkFtD;AAhLD;IACI;;;OAGG;IACH,mCAFoB,MAAM,KAAE,IAAI,EAS/B;IANG,wBAHgB,MAAM,KAAE,IAAI,CAGS;IACrC,0BAA6B;IAC7B,eAAkB;IAElB,wCAAwC;IACxC,aADW,QAAU,MAAM,KAAE,IAAI,CAAC,EAAE,CACf;IAGzB;;;;;;;;;OASG;IACH,mCAFoB,MAAM,KAAE,IAAI,QAM/B;IAED;;OAEG;IACH,kCAFoB,MAAM,KAAE,IAAI,QAO/B;IAED;;;;OAIG;IACH,sBAoBC;IAED;;;;;OAKG;IACH,oBAFW,OAAO,iBAAiB,EAAE,iBAAiB,gBAQrD;CACJ"}

package/dist/src/utils/animator.js

@@ -90,25 +90,39 @@ export default class Animator {
  * Read more at: https://www.gamedeveloper.com/programming/improved-lerp-smoothing-
  *
  * @param {import("../utils/animator.js").default} animator
- * @param {(value: number) => void} callback Function to be called with the interpolated value
+ * @param {(value: T) => void} callback Function to be called with the interpolated value
  * @param {number} halfLife Time until half of the value is reached, in milliseconds
  * @param {number} stopAt Stop animation when the value is within this distance from the target
- * @param {number} [initialValue] Initial value
- * @returns {((target: number) => void) & { stop: () => void}} Function that activates the transition with a new target value
+ * @param {T} initialValue Initial value
+ * @returns {((target: T) => void) & { stop: () => void}} Function that activates the transition with a new target value
+ * @template {Record<string, number>} T
  */
 export function makeLerpSmoother(
     animator,
     callback,
     halfLife,
     stopAt,
-    initialValue = 0
+    initialValue
 ) {
     let lastTimeStamp = 0;
     let settled = true;
 
-    let current = initialValue;
+    let current = structuredClone(initialValue);
     let target = current;
 
+    /**
+     * Smoother for a scalar.
+     * Based on: https://twitter.com/FreyaHolmer/status/1757836988495847568
+     *
+     * @param {number} current
+     * @param {number} target
+     * @param {number} tD
+     * @param {number} halfLife
+     */
+    function lerpSmooth(current, target, tD, halfLife) {
+        return target + (current - target) * Math.pow(2, -tD / halfLife);
+    }
+
     /**
      * @param {number} [timestamp]
      */
@@ -120,23 +134,33 @@ export function makeLerpSmoother(
         const tD = timestamp - lastTimeStamp;
         lastTimeStamp = timestamp;
 
-        // Lerp smoothing: https://twitter.com/FreyaHolmer/status/1757836988495847568
-        current = target + (current - target) * Math.pow(2, -tD / halfLife);
+        for (const key of /** @type {(keyof T)[]} */ (Object.keys(target))) {
+            current[key] = /** @type {T[keyof T]}*/ (
+                lerpSmooth(current[key], target[key], tD, halfLife)
+            );
+        }
 
         callback(current);
 
-        if (Math.abs(target - current) < stopAt) {
+        let maxDiff = -Infinity;
+        for (const key of Object.keys(target)) {
+            maxDiff = Math.max(maxDiff, Math.abs(target[key] - current[key]));
+        }
+
+        if (maxDiff < stopAt) {
             current = target;
             callback(current);
             settled = true;
-            animator.requestRender();
+            if (maxDiff != 0) {
+                animator.requestRender();
+            }
         } else {
             animator.requestTransition((t) => smoothUpdate(t));
         }
     }
 
     /**
-     * @param {number} value
+     * @param {T} value
      */
     function setTarget(value) {
         target = value;

package/dist/src/utils/inertia.d.ts

@@ -19,7 +19,9 @@ export default class Inertia {
     callback: (arg0: number) => void;
     targetValue: number;
     lastValue: number;
-    smoother: ((target: number) => void) & {
+    smoother: ((target: {
+        x: number;
+    }) => void) & {
         stop: () => void;
     };
     cancel(): void;

package/dist/src/utils/inertia.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inertia.d.ts","sourceRoot":"","sources":["../../../src/utils/inertia.js"],"names":[],"mappings":"AAmEA;;;GAGG;AACH,8EAiBC;AApFD;;GAEG;AACH;IACI;;;OAGG;IACH,sBAHW,OAAO,eAAe,EAAE,OAAO,aAC/B,OAAO,EAyBjB;IAtBG,0CAAwB;IACxB,kBAA0B;IAG1B,oBAAsB;IAEtB,oCAAoC;IACpC,iBADoB,MAAM,KAAE,IAAI,CACZ;IAEpB,oBAAoB;IACpB,kBAAkB;IAElB;;MASC;IAGL,eAIC;IAED;;;;OAIG;IACH,mBAHW,MAAM,mBACG,MAAM,KAAE,IAAI,QAkB/B;CACJ"}
+{"version":3,"file":"inertia.d.ts","sourceRoot":"","sources":["../../../src/utils/inertia.js"],"names":[],"mappings":"AAwEA;;;GAGG;AACH,8EAiBC;AAzFD;;GAEG;AACH;IACI;;;OAGG;IACH,sBAHW,OAAO,eAAe,EAAE,OAAO,aAC/B,OAAO,EA0BjB;IAvBG,0CAAwB;IACxB,kBAA0B;IAG1B,oBAAsB;IAEtB,oCAAoC;IACpC,iBADoB,MAAM,KAAE,IAAI,CACZ;IAEpB,oBAAoB;IACpB,kBAAkB;IAElB;;;;MAUC;IAGL,eAQC;IAED;;;;OAIG;IACH,mBAHW,MAAM,mBACG,MAAM,KAAE,IAAI,QAkB/B;CACJ"}

package/dist/src/utils/inertia.js

@@ -26,19 +26,24 @@ export default class Inertia {
         this.smoother = makeLerpSmoother(
             animator,
             (value) => {
-                const delta = value - this.lastValue;
-                this.lastValue = value;
+                const delta = value.x - this.lastValue;
+                this.lastValue = value.x;
                 this.callback?.(delta);
             },
             40,
-            0.1
+            0.1,
+            { x: 0 }
         );
     }
 
     cancel() {
+        if (this.lastValue === this.targetValue) {
+            return;
+        }
+
         // decelelerate rapidly
         this.targetValue = lerp([this.lastValue, this.targetValue], 0.3);
-        this.smoother(this.targetValue);
+        this.smoother({ x: this.targetValue });
     }
 
     /**
@@ -61,7 +66,7 @@ export default class Inertia {
         );
         this.targetValue = this.lastValue + delta;
 
-        this.smoother(this.targetValue);
+        this.smoother({ x: this.targetValue });
     }
 }
 

package/dist/src/utils/iterateNestedMaps.d.ts

@@ -3,9 +3,10 @@
  *
  * Yields arrays that contain the compound key and the grouped data items.
  *
- * @param {Map<any, any>} map The root
+ * @param {Map<any, T>} map The root
  * @param {any[]} [path] The path so far.
- * @returns {Generator<[any[], any[]]>}
+ * @returns {Generator<[any[], T]>}
+ * @template T
  */
-export default function iterateNestedMaps(map: Map<any, any>, path?: any[]): Generator<[any[], any[]]>;
+export default function iterateNestedMaps<T>(map: Map<any, T>, path?: any[]): Generator<[any[], T], any, any>;
 //# sourceMappingURL=iterateNestedMaps.d.ts.map

package/dist/src/utils/iterateNestedMaps.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"iterateNestedMaps.d.ts","sourceRoot":"","sources":["../../../src/utils/iterateNestedMaps.js"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,+CAJW,IAAI,GAAG,EAAE,GAAG,CAAC,SACb,GAAG,EAAE,GACH,UAAU,CAAC,GAAG,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC,CAarC"}
+{"version":3,"file":"iterateNestedMaps.d.ts","sourceRoot":"","sources":["../../../src/utils/iterateNestedMaps.js"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,sEAJW,GAAG,EAAE,mCAef"}

package/dist/src/utils/iterateNestedMaps.js

@@ -3,9 +3,10 @@
  *
  * Yields arrays that contain the compound key and the grouped data items.
  *
- * @param {Map<any, any>} map The root
+ * @param {Map<any, T>} map The root
  * @param {any[]} [path] The path so far.
- * @returns {Generator<[any[], any[]]>}
+ * @returns {Generator<[any[], T]>}
+ * @template T
  */
 export default function* iterateNestedMaps(map, path = []) {
     for (const [key, value] of map.entries()) {

package/dist/src/utils/radixSort.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @param {number[]} arr An array of unsigned integers
+ */
+export default function radixSort(arr: number[]): number[];
+/**
+ * @param {number[]} arr An array of unsigned integers
+ */
+export function radixSortIntoLookupArray(arr: number[]): number[];
+//# sourceMappingURL=radixSort.d.ts.map

package/dist/src/utils/radixSort.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radixSort.d.ts","sourceRoot":"","sources":["../../../src/utils/radixSort.js"],"names":[],"mappings":"AAKA;;GAEG;AACH,uCAFW,MAAM,EAAE,YAyDlB;AAaD;;GAEG;AACH,8CAFW,MAAM,EAAE,YAoDlB"}

package/dist/src/utils/radixSort.js

@@ -0,0 +1,130 @@
+const MAX_INTEGER = 2147483647;
+const MAX_INTEGER_DIGIT = getDigits([MAX_INTEGER]);
+
+// TODO: Optimize more! Some ideas: https://travisdowns.github.io/blog/2019/05/22/sorting.html
+
+/**
+ * @param {number[]} arr An array of unsigned integers
+ */
+export default function radixSort(arr) {
+    const maxDigits = getDigits(arr);
+
+    let buffer = new Array(arr.length);
+    let bufferPtr = buffer;
+    const counts = new Array(16);
+
+    for (let digitIndex = 0; digitIndex < maxDigits; digitIndex++) {
+        counts.fill(0);
+
+        const shift = digitIndex * 4;
+        const pow = Math.pow(16, digitIndex);
+
+        /**
+         * @param {*} i number
+         */
+        // eslint-disable-next-line no-loop-func
+        const getDigit = (/** @type {number} */ i) => {
+            const value = arr[i];
+
+            // Need hacks for large numbers because JS bitwise operators only work
+            // with 32-bit integers.
+            // TODO: This could be implemented in WASM for better performance as
+            // it would be able to use 64-bit integers.
+            if (digitIndex >= MAX_INTEGER_DIGIT) {
+                if (value > MAX_INTEGER) {
+                    return Math.floor(value / pow) % 16;
+                } else {
+                    return 0;
+                }
+            } else {
+                return (value >> shift) & 0xf;
+            }
+        };
+
+        // Count occurrences of each digit
+        for (let i = 0, n = arr.length; i < n; i++) {
+            counts[getDigit(i)]++;
+        }
+
+        // Prefix sum to get starting indexes
+        for (let i = 1; i < 16; i++) {
+            counts[i] += counts[i - 1];
+        }
+
+        // Sort based on current digit
+        for (let i = arr.length - 1; i >= 0; i--) {
+            bufferPtr[--counts[getDigit(i)]] = arr[i];
+        }
+
+        // Swap buffer and arr for next iteration
+        [arr, bufferPtr] = [bufferPtr, arr];
+    }
+
+    return arr;
+}
+
+/**
+ * @param {number[]} arr An array of unsigned integers
+ */
+function getDigits(arr) {
+    let max = 0;
+    for (let i = 0, n = arr.length; i < n; i++) {
+        max = Math.max(max, arr[i]);
+    }
+    return Math.floor(Math.log2(max) / 4) + 1;
+}
+
+/**
+ * @param {number[]} arr An array of unsigned integers
+ */
+export function radixSortIntoLookupArray(arr) {
+    const maxDigits = getDigits(arr);
+    let indexes = Array.from({ length: arr.length }, (_, i) => i);
+    let buffer = new Array(arr.length);
+    const counts = new Array(16);
+
+    for (let digitIndex = 0; digitIndex < maxDigits; digitIndex++) {
+        counts.fill(0);
+
+        const shift = digitIndex * 4;
+        const pow = Math.pow(16, digitIndex);
+
+        /**
+         * @param {*} i number
+         */
+        // eslint-disable-next-line no-loop-func
+        const getDigit = (i) => {
+            const value = arr[indexes[i]]; // Use index to access array value
+
+            if (digitIndex >= MAX_INTEGER_DIGIT) {
+                if (value > MAX_INTEGER) {
+                    return Math.floor(value / pow) % 16;
+                } else {
+                    return 0;
+                }
+            } else {
+                return (value >> shift) & 0xf;
+            }
+        };
+
+        // Count occurrences of each digit
+        for (let i = 0; i < arr.length; i++) {
+            counts[getDigit(i)]++;
+        }
+
+        // Prefix sum to get starting indexes
+        for (let i = 1; i < 16; i++) {
+            counts[i] += counts[i - 1];
+        }
+
+        // Sort indexes based on current digit
+        for (let i = arr.length - 1; i >= 0; i--) {
+            buffer[--counts[getDigit(i)]] = indexes[i];
+        }
+
+        // Swap buffer and indexes for next iteration
+        [indexes, buffer] = [buffer, indexes];
+    }
+
+    return indexes; // Return the sorted index array
+}

package/dist/src/utils/radixSort.test.js

@@ -0,0 +1,51 @@
+import { expect, test } from "vitest";
+import radixSort, { radixSortIntoLookupArray } from "./radixSort.js";
+
+/**
+ * Checks that numbers in an array are in ascending order.
+
+ * @param {number[]} arr An array of unsigned integers
+ */
+function isSorted(arr) {
+    for (let i = 1; i < arr.length; i++) {
+        if (arr[i - 1] > arr[i]) {
+            return false;
+        }
+    }
+
+    return true;
+}
+
+/**
+ * Generates a random array of unsigned integers.
+ *
+ * @param {number} length
+ */
+function generateArray(length) {
+    const arr = new Array(length);
+
+    for (let i = 0; i < length; i++) {
+        arr[i] = Math.floor(Math.random() * 10_000_000_000);
+    }
+
+    return arr;
+}
+
+test("Radix Sort correctly sorts numbers", () => {
+    expect(isSorted(radixSort([1, 2, 3]))).toBeTruthy();
+    expect(isSorted(radixSort([3, 2, 1]))).toBeTruthy();
+    expect(isSorted(radixSort([123, 1234567, 12, 1, 1234]))).toBeTruthy();
+    expect(isSorted(radixSort(generateArray(1_000_000)))).toBeTruthy();
+});
+
+test("Lookup", () => {
+    expect(radixSortIntoLookupArray([1, 2, 3])).toEqual([0, 1, 2]);
+    expect(radixSortIntoLookupArray([3, 2, 1])).toEqual([2, 1, 0]);
+    expect(radixSortIntoLookupArray([10000, 100, 1000, 10, 1])).toEqual([
+        4, 3, 1, 2, 0,
+    ]);
+
+    const arr = generateArray(1_000_000);
+    const lookup = radixSortIntoLookupArray(arr);
+    expect(isSorted(arr.map((_, i) => arr[lookup[i]]))).toBeTruthy();
+});

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

@@ -122,7 +122,9 @@ declare class Scrollbar extends UnitView {
         scrollbarSize: number;
         scrollbarPadding: number;
     };
-    interpolateViewportOffset: ((target: number) => void) & {
+    interpolateViewportOffset: ((target: {
+        x: number;
+    }) => void) & {
         stop: () => void;
     };
     get scrollOffset(): number;

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

@@ -1 +1 @@
-{"version":3,"file":"gridView.d.ts","sourceRoot":"","sources":["../../../src/view/gridView.js"],"names":[],"mappings":"AAswBA;;;GAGG;AACH,iDAHW,OAAO,iBAAiB,EAAE,cAAc,GACtC,OAAO,iBAAiB,EAAE,QAAQ,CAwB9C;AAED;;;GAGG;AACH,uDAHW,OAAO,iBAAiB,EAAE,cAAc,GACtC,OAAO,iBAAiB,EAAE,QAAQ,CA6C9C;AA2BD;;GAEG;AACH,8EAUC;AAED;;;;;GAKG;AACH,4CAJW,OAAO,uBAAuB,EAAE,OAAO,UACvC,OAAO,iBAAiB,EAAE,UAAU,YACpC,QAAQ,aAmBlB;AA53BD;;;;;;;;;;;;;;;GAeG;AACH;IA6BI;;;;;;;;;OASG;IACH,kBARW,OAAO,iBAAiB,EAAE,aAAa,WACvC,OAAO,yBAAyB,EAAE,OAAO,gBACzC,aAAa,iDAEb,MAAM,WACN,MAAM,YACN,OAAO,WAAW,EAAE,WAAW,EAoBzC;IARG,8CAAgB;IAOhB,uBAA0B;IAG9B;;OAEG;IACH,qDAIC;IAeD;;OAEG;IACH,wDAKC;IAqBD;;OAEG;IACH,8CAEC;IAED,yBAEC;IAED;;OAEG;IACH,wCAmCC;IA2OD;;;;OAIG;IAEH,gBALW,OAAO,4CAA4C,EAAE,OAAO,UAC5D,OAAO,uBAAuB,EAAE,OAAO,YACvC,OAAO,uBAAuB,EAAE,gBAAgB,QA6O1D;;CAoGJ;AAgJD;IACI;;;;OAIG;IACH,6DAHW,aAAa,UACb,MAAM,EAoFhB;IAjFG,4BAAgC;IAChC,kCAAgB;IAChB,eAAoB;IAEpB,uBAAuB;IACvB,YADW,QAAQ,CACQ;IAE3B,uBAAuB;IACvB,kBADW,QAAQ,CACc;IAEjC,mFAAmF;IACnF,MADW,QAAQ,OAAO,OAAO,iBAAiB,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC,CAC5D;IAEd,4FAA4F;IAC5F,WADW,QAAQ,OAAO,OAAO,iBAAiB,EAAE,UAAU,EAAE,YAAY,CAAC,CAAC,CAC3D;IAEnB,0DAA0D;IAC1D,kEAAoB;IAEpB,uBAAuB;IACvB,OADW,QAAQ,CACG;IAEtB,wBAAwB;IACxB,QADW,SAAS,CACQ;IA4DhC,uEAcC;IAED;;OAEG;IACH,4BAkKC;IAED,uBAqBC;IAED,iCAEC;CACJ;qBAlrC0D,eAAe;sBAFpD,uBAAuB;0BAGnB,oBAAoB;qBAGzB,eAAe;yBALX,mBAAmB;AAqrC5C;IAeI;;;OAGG;IACH,uBAHW,SAAS,8CA4FnB;IA/FD,uBAAmB;IAsCf;;;MAAoB;IAIpB;;MAQC;IA+CL,2BAKC;IAWD;;;;OAIG;IACH,gCAHW,SAAS,UACT,SAAS,QA8CnB;;CACJ;oBAv2CmB,qBAAqB"}
+{"version":3,"file":"gridView.d.ts","sourceRoot":"","sources":["../../../src/view/gridView.js"],"names":[],"mappings":"AAswBA;;;GAGG;AACH,iDAHW,OAAO,iBAAiB,EAAE,cAAc,GACtC,OAAO,iBAAiB,EAAE,QAAQ,CAwB9C;AAED;;;GAGG;AACH,uDAHW,OAAO,iBAAiB,EAAE,cAAc,GACtC,OAAO,iBAAiB,EAAE,QAAQ,CA6C9C;AA2BD;;GAEG;AACH,8EAUC;AAED;;;;;GAKG;AACH,4CAJW,OAAO,uBAAuB,EAAE,OAAO,UACvC,OAAO,iBAAiB,EAAE,UAAU,YACpC,QAAQ,aAmBlB;AA53BD;;;;;;;;;;;;;;;GAeG;AACH;IA6BI;;;;;;;;;OASG;IACH,kBARW,OAAO,iBAAiB,EAAE,aAAa,WACvC,OAAO,yBAAyB,EAAE,OAAO,gBACzC,aAAa,iDAEb,MAAM,WACN,MAAM,YACN,OAAO,WAAW,EAAE,WAAW,EAoBzC;IARG,8CAAgB;IAOhB,uBAA0B;IAG9B;;OAEG;IACH,qDAIC;IAeD;;OAEG;IACH,wDAKC;IAqBD;;OAEG;IACH,8CAEC;IAED,yBAEC;IAED;;OAEG;IACH,wCAmCC;IA2OD;;;;OAIG;IAEH,gBALW,OAAO,4CAA4C,EAAE,OAAO,UAC5D,OAAO,uBAAuB,EAAE,OAAO,YACvC,OAAO,uBAAuB,EAAE,gBAAgB,QA6O1D;;CAoGJ;AAgJD;IACI;;;;OAIG;IACH,6DAHW,aAAa,UACb,MAAM,EAoFhB;IAjFG,4BAAgC;IAChC,kCAAgB;IAChB,eAAoB;IAEpB,uBAAuB;IACvB,YADW,QAAQ,CACQ;IAE3B,uBAAuB;IACvB,kBADW,QAAQ,CACc;IAEjC,mFAAmF;IACnF,MADW,QAAQ,OAAO,OAAO,iBAAiB,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC,CAC5D;IAEd,4FAA4F;IAC5F,WADW,QAAQ,OAAO,OAAO,iBAAiB,EAAE,UAAU,EAAE,YAAY,CAAC,CAAC,CAC3D;IAEnB,0DAA0D;IAC1D,kEAAoB;IAEpB,uBAAuB;IACvB,OADW,QAAQ,CACG;IAEtB,wBAAwB;IACxB,QADW,SAAS,CACQ;IA4DhC,uEAcC;IAED;;OAEG;IACH,4BAkKC;IAED,uBAqBC;IAED,iCAEC;CACJ;qBAlrC0D,eAAe;sBAFpD,uBAAuB;0BAGnB,oBAAoB;qBAGzB,eAAe;yBALX,mBAAmB;AAqrC5C;IAeI;;;OAGG;IACH,uBAHW,SAAS,8CA6FnB;IAhGD,uBAAmB;IAsCf;;;MAAoB;IAIpB;;;;MAQC;IAgDL,2BAKC;IAWD;;;;OAIG;IACH,gCAHW,SAAS,UACT,SAAS,QA8CnB;;CACJ;oBAx2CmB,qBAAqB"}

package/dist/src/view/gridView.js

@@ -1273,11 +1273,11 @@ class Scrollbar extends UnitView {
         this.interpolateViewportOffset = makeLerpSmoother(
             this.context.animator,
             (value) => {
-                this.viewportOffset = value;
+                this.viewportOffset = value.x;
             },
             50,
             0.4,
-            this.viewportOffset
+            { x: this.viewportOffset }
         );
 
         this.addInteractionEventListener("mousedown", (coords, event) => {
@@ -1309,10 +1309,11 @@ class Scrollbar extends UnitView {
                     this.#maxScrollOffset
                 );
 
-                this.interpolateViewportOffset(
-                    (scrollOffset / this.#maxScrollOffset) *
-                        this.#maxViewportOffset
-                );
+                this.interpolateViewportOffset({
+                    x:
+                        (scrollOffset / this.#maxScrollOffset) *
+                        this.#maxViewportOffset,
+                });
             };
 
             const onMouseup = () => {

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

@@ -1 +1 @@
-{"version":3,"file":"zoom.d.ts","sourceRoot":"","sources":["../../../src/view/zoom.js"],"names":[],"mappings":"AAkBA,0CAGC;AAgBD;;;;;;GAMG;AACH,yCANW,OAAO,8BAA8B,EAAE,OAAO,UAC9C,OAAO,uBAAuB,EAAE,OAAO,0BAC3B,SAAS,KAAK,IAAI,UAC9B,OAAO,yBAAyB,EAAE,KAAK,aACvC,OAAO,sBAAsB,EAAE,OAAO,QA0IhD;;OAlLS,MAAM;OACN,MAAM;YACN,MAAM;YACN,MAAM;YACN,MAAM"}
+{"version":3,"file":"zoom.d.ts","sourceRoot":"","sources":["../../../src/view/zoom.js"],"names":[],"mappings":"AAkBA,0CAGC;AAgBD;;;;;;GAMG;AACH,yCANW,OAAO,8BAA8B,EAAE,OAAO,UAC9C,OAAO,uBAAuB,EAAE,OAAO,0BAC3B,SAAS,KAAK,IAAI,UAC9B,OAAO,yBAAyB,EAAE,KAAK,aACvC,OAAO,sBAAsB,EAAE,OAAO,QAkJhD;;OA1LS,MAAM;OACN,MAAM;YACN,MAAM;YACN,MAAM;YACN,MAAM"}