@surdeddd/bottom-sheet 0.23.1 → 0.23.2

package/dist/webgl.js

@@ -108,6 +108,10 @@ uniform float u_sheen;
 uniform float u_glass;
 uniform float u_hasContent;
 uniform sampler2D u_content;
+uniform float u_hasScroll;
+uniform sampler2D u_scroll;
+uniform vec4 u_scrollRect;
+uniform vec2 u_scrollMap;
 
 float roundedBoxSDF(vec2 p, vec2 halfSize, float r) {
   vec2 q = abs(p) - halfSize + r;
@@ -143,6 +147,19 @@ void main() {
     content = texture2D(u_content, glassUv);
   }
 
+  vec4 scroll = vec4(0.0);
+  if (u_hasScroll > 0.5 &&
+      glassUv.x >= u_scrollRect.x && glassUv.x <= u_scrollRect.z &&
+      glassUv.y >= u_scrollRect.y && glassUv.y <= u_scrollRect.w) {
+    vec2 st = vec2(
+      (glassUv.x - u_scrollRect.x) / max(u_scrollRect.z - u_scrollRect.x, 0.000001),
+      (glassUv.y - u_scrollRect.y) * u_scrollMap.x + u_scrollMap.y
+    );
+    if (st.y >= 0.0 && st.y <= 1.0) {
+      scroll = texture2D(u_scroll, st);
+    }
+  }
+
   float edge = 1.0 - smoothstep(0.0, 2.5, abs(d));
   float topLight = pow(1.0 - down, 3.0);
   float sheen = (edge * 0.55 + topLight * 0.25) * u_sheen;
@@ -150,8 +167,10 @@ void main() {
   vec3 panelRgb = (u_color.rgb + vec3(sheen)) * u_color.a;
   float panelA = u_color.a;
 
-  vec3 rgb = content.rgb + panelRgb * (1.0 - content.a);
-  float alpha = content.a + panelA * (1.0 - content.a);
+  vec3 baseRgb = content.rgb + panelRgb * (1.0 - content.a);
+  float baseA = content.a + panelA * (1.0 - content.a);
+  vec3 rgb = scroll.rgb + baseRgb * (1.0 - scroll.a);
+  float alpha = scroll.a + baseA * (1.0 - scroll.a);
 
   rgb *= surface;
   alpha *= surface;
@@ -211,6 +230,10 @@ var createSurfaceProgram = (gl, highp = true) => {
   const uGlass = gl.getUniformLocation(program, "u_glass");
   const uHasContent = gl.getUniformLocation(program, "u_hasContent");
   const uContent = gl.getUniformLocation(program, "u_content");
+  const uHasScroll = gl.getUniformLocation(program, "u_hasScroll");
+  const uScroll = gl.getUniformLocation(program, "u_scroll");
+  const uScrollRect = gl.getUniformLocation(program, "u_scrollRect");
+  const uScrollMap = gl.getUniformLocation(program, "u_scrollMap");
   return {
     draw: (frame, state) => {
       const { drawingBufferWidth: w, drawingBufferHeight: h } = gl;
@@ -237,14 +260,25 @@ var createSurfaceProgram = (gl, highp = true) => {
       gl.uniform1f(uBend, state.bend * dpr);
       gl.uniform1f(uSheen, state.sheen);
       gl.uniform1f(uGlass, state.glass);
+      gl.uniform1i(uContent, 0);
+      gl.uniform1i(uScroll, 1);
       if (state.content) {
         gl.activeTexture(gl.TEXTURE0);
         gl.bindTexture(gl.TEXTURE_2D, state.content);
-        gl.uniform1i(uContent, 0);
         gl.uniform1f(uHasContent, 1);
       } else {
         gl.uniform1f(uHasContent, 0);
       }
+      if (state.scroll) {
+        gl.activeTexture(gl.TEXTURE1);
+        gl.bindTexture(gl.TEXTURE_2D, state.scroll.texture);
+        gl.uniform4f(uScrollRect, ...state.scroll.rect);
+        gl.uniform2f(uScrollMap, ...state.scroll.map);
+        gl.uniform1f(uHasScroll, 1);
+        gl.activeTexture(gl.TEXTURE0);
+      } else {
+        gl.uniform1f(uHasScroll, 0);
+      }
       gl.drawArrays(gl.TRIANGLES, 0, 3);
     },
     destroy: () => {
@@ -313,13 +347,13 @@ var roundedPath = (ctx, x, y, w, h, r) => {
   ctx.arcTo(x, y, x + w, y, rad);
   ctx.closePath();
 };
-var drawBox = (ctx, cs, rect, rootRect) => {
+var drawBox = (ctx, cs, rect, origin) => {
   const bg = cs.backgroundColor;
   const borderWidth = parseFloat(cs.borderTopWidth) || 0;
   const hasBorder = borderWidth > 0 && isPaintedColor(cs.borderTopColor);
   if (!isPaintedColor(bg) && !hasBorder) return false;
-  const x = rect.left - rootRect.left;
-  const y = rect.top - rootRect.top;
+  const x = rect.left - origin.x;
+  const y = rect.top - origin.y;
   const radius = parseFloat(cs.borderTopLeftRadius) || 0;
   if (isPaintedColor(bg)) {
     roundedPath(ctx, x, y, rect.width, rect.height, radius);
@@ -334,15 +368,13 @@ var drawBox = (ctx, cs, rect, rootRect) => {
   }
   return true;
 };
-var drawImage = (ctx, img, rootRect) => {
+var drawImage = (ctx, img, rect, origin) => {
   if (!img.complete || img.naturalWidth === 0) return false;
-  const rect = img.getBoundingClientRect();
-  if (rect.width < 1 || rect.height < 1) return false;
   try {
     ctx.drawImage(
       img,
-      rect.left - rootRect.left,
-      rect.top - rootRect.top,
+      rect.left - origin.x,
+      rect.top - origin.y,
       rect.width,
       rect.height
     );
@@ -351,37 +383,41 @@ var drawImage = (ctx, img, rootRect) => {
     return false;
   }
 };
-var captureContent = (gl, root, dpr) => {
-  const rootRect = root.getBoundingClientRect();
-  const w = Math.max(1, Math.round(rootRect.width * dpr));
-  const h = Math.max(1, Math.round(rootRect.height * dpr));
+var createLayer = (width, height, scale) => {
+  const w = Math.max(1, Math.round(width * scale));
+  const h = Math.max(1, Math.round(height * scale));
   if (w < 2 || h < 2) return null;
-  const surface = document.createElement("canvas");
-  surface.width = w;
-  surface.height = h;
-  const ctx = surface.getContext("2d");
+  const canvas = document.createElement("canvas");
+  canvas.width = w;
+  canvas.height = h;
+  const ctx = canvas.getContext("2d");
   if (!ctx) return null;
-  ctx.scale(dpr, dpr);
-  const hiddenNodes = [];
-  const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
+  ctx.scale(scale, scale);
+  return { canvas, ctx };
+};
+var paintTree = (ctx, walker, origin, hidden) => {
   let painted = 0;
   while (walker.nextNode()) {
     const el = walker.currentNode;
-    if (el.tagName === "IMG") {
-      if (drawImage(ctx, el, rootRect)) {
+    const isImage = el.tagName === "IMG";
+    if (!isImage && !isRenderable(el)) continue;
+    const rect = el.getBoundingClientRect();
+    if (rect.width < 1 || rect.height < 1) continue;
+    if (rect.bottom <= origin.y || rect.top >= origin.y + origin.height) {
+      continue;
+    }
+    if (isImage) {
+      if (drawImage(ctx, el, rect, origin)) {
         painted++;
-        hiddenNodes.push(el);
+        hidden.push(el);
       }
       continue;
     }
-    if (!isRenderable(el)) continue;
-    const rect = el.getBoundingClientRect();
-    if (rect.width < 1 || rect.height < 1) continue;
     const cs = getComputedStyle(el);
-    const boxed = drawBox(ctx, cs, rect, rootRect);
+    const boxed = drawBox(ctx, cs, rect, origin);
     if (boxed) {
       painted++;
-      hiddenNodes.push(el);
+      hidden.push(el);
     }
     const text = directText(el);
     if (!text) continue;
@@ -395,12 +431,12 @@ var captureContent = (gl, root, dpr) => {
       rect.width - padLeft - (parseFloat(cs.paddingRight) || 0)
     );
     const lineHeight = parseFloat(cs.lineHeight) || parseFloat(cs.fontSize) * 1.4;
-    const x = rect.left - rootRect.left + padLeft;
-    const y = rect.top - rootRect.top + padTop;
+    const x = rect.left - origin.x + padLeft;
+    const y = rect.top - origin.y + padTop;
     const lines = wrapLines(ctx, text, innerWidth);
     lines.forEach((line, i) => {
       const lineY = y + i * lineHeight;
-      if (lineY > rootRect.height) return;
+      if (lineY > origin.height) return;
       let lineX = x;
       if (cs.textAlign === "center") {
         lineX = x + (innerWidth - ctx.measureText(line).width) / 2;
@@ -411,10 +447,12 @@ var captureContent = (gl, root, dpr) => {
     });
     if (lines.length) {
       painted++;
-      if (!boxed) hiddenNodes.push(el);
+      if (!boxed) hidden.push(el);
     }
   }
-  if (!painted) return null;
+  return painted;
+};
+var upload = (gl, canvas) => {
   const texture = gl.createTexture();
   if (!texture) return null;
   gl.bindTexture(gl.TEXTURE_2D, texture);
@@ -426,7 +464,7 @@ var captureContent = (gl, root, dpr) => {
       gl.RGBA,
       gl.RGBA,
       gl.UNSIGNED_BYTE,
-      surface
+      canvas
     );
   } catch {
     gl.deleteTexture(texture);
@@ -436,7 +474,78 @@ var captureContent = (gl, root, dpr) => {
   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
   gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-  return { texture, width: w, height: h, hiddenNodes };
+  return texture;
+};
+var scaleFor = (gl, width, height, dpr) => {
+  const max = Number(gl.getParameter(gl.MAX_TEXTURE_SIZE)) || 4096;
+  return Math.min(dpr, max / Math.max(width, height, 1));
+};
+var captureScroll = (gl, scroller, dpr, requestedAbove, skip, hidden) => {
+  const box = scroller.getBoundingClientRect();
+  const width = scroller.clientWidth;
+  const view = scroller.clientHeight;
+  if (width < 1 || view < 1) return null;
+  const top = scroller.scrollTop;
+  const above = Math.max(0, Math.min(requestedAbove, top));
+  const height = view + above;
+  const layer = createLayer(width, height, scaleFor(gl, width, height, dpr));
+  if (!layer) return null;
+  const origin = {
+    x: box.left + scroller.clientLeft,
+    y: box.top + scroller.clientTop - above,
+    height
+  };
+  const walker = document.createTreeWalker(scroller, NodeFilter.SHOW_ELEMENT, {
+    acceptNode: (node) => skip?.(node) ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT
+  });
+  const drawn = [];
+  if (!paintTree(layer.ctx, walker, origin, drawn)) return null;
+  const texture = upload(gl, layer.canvas);
+  if (!texture) return null;
+  hidden.push(...drawn);
+  return { texture, top, above, height };
+};
+var captureContent = (gl, root, dpr, options = {}) => {
+  const rootRect = root.getBoundingClientRect();
+  const scroller = options.scroller && options.scroller !== root && root.contains(options.scroller) ? options.scroller : null;
+  const skip = options.skip;
+  const hiddenNodes = [];
+  let texture = null;
+  const layer = createLayer(
+    rootRect.width,
+    rootRect.height,
+    scaleFor(gl, rootRect.width, rootRect.height, dpr)
+  );
+  if (layer) {
+    const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, {
+      acceptNode: (node) => {
+        const el = node;
+        if (scroller && el.parentElement === scroller) {
+          return NodeFilter.FILTER_REJECT;
+        }
+        return skip?.(el) ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT;
+      }
+    });
+    const drawn = [];
+    const origin = {
+      x: rootRect.left,
+      y: rootRect.top,
+      height: rootRect.height
+    };
+    if (paintTree(layer.ctx, walker, origin, drawn)) {
+      texture = upload(gl, layer.canvas);
+      if (texture) hiddenNodes.push(...drawn);
+    }
+  }
+  const scroll = scroller ? captureScroll(gl, scroller, dpr, options.above ?? 0, skip, hiddenNodes) : null;
+  if (!texture && !scroll) return null;
+  return {
+    texture,
+    width: layer?.canvas.width ?? 0,
+    height: layer?.canvas.height ?? 0,
+    hiddenNodes,
+    scroll
+  };
 };
 var hideCapturedText = (nodes) => {
   const restore = nodes.map((el) => ({
@@ -593,16 +702,46 @@ var webglRenderer = (options = {}) => ({
     const releaseCapture = () => {
       releaseText?.();
       releaseText = null;
-      if (capture && handle) handle.gl.deleteTexture(capture.texture);
+      if (capture && handle) {
+        if (capture.texture) handle.gl.deleteTexture(capture.texture);
+        if (capture.scroll) handle.gl.deleteTexture(capture.scroll.texture);
+      }
       capture = null;
     };
+    const fitted = () => element.hasAttribute("data-bs-fit-content") && element.dataset.mode === "bottom";
     const takeCapture = () => {
       if (!liftContent || disposed || !handle || capture) return;
-      const next = captureContent(handle.gl, element, dprOf());
+      const pinned = fitted();
+      const next = captureContent(handle.gl, element, dprOf(), {
+        scroller: ctx.scrollContainer ?? null,
+        above: pinned ? Math.max(0, ctx.getMaxAxisSize() - ctx.getSize()) : 0,
+        skip: pinned ? (el) => el.classList.contains("bs-footer") : void 0
+      });
       if (!next) return;
       capture = next;
       releaseText = hideCapturedText(next.hiddenNodes);
     };
+    const scrollLayer = (frame) => {
+      const scroll = capture?.scroll;
+      const scroller = ctx.scrollContainer;
+      if (!scroll || !scroller) return null;
+      const box = scroller.getBoundingClientRect();
+      const left = box.left + scroller.clientLeft - frame.x;
+      const top = box.top + scroller.clientTop - frame.y;
+      return {
+        texture: scroll.texture,
+        rect: [
+          left / frame.width,
+          top / frame.height,
+          (left + scroller.clientWidth) / frame.width,
+          (top + scroller.clientHeight) / frame.height
+        ],
+        map: [
+          frame.height / scroll.height,
+          (scroll.above + scroller.scrollTop - scroll.top) / scroll.height
+        ]
+      };
+    };
     const paint = () => {
       if (disposed || !handle || !program) return;
       const frame = readFrame();
@@ -615,18 +754,20 @@ var webglRenderer = (options = {}) => ({
         dpr,
         sheen: sheenStrength,
         glass: glassStrength * motion,
-        content: capture?.texture ?? null
+        content: capture?.texture ?? null,
+        scroll: scrollLayer(frame)
       });
     };
     const tick = () => {
       if (disposed) return;
-      paint();
       const held = ctx.isDragging();
+      if (held || !ctx.isAnimating()) paint();
       bend *= held ? BEND_DECAY_HELD : BEND_DECAY_FREE;
       const flat = Math.abs(bend) < BEND_REST;
       if (!held && flat && capture) {
         bend = 0;
         releaseCapture();
+        paint();
       }
       if (!held && flat && !ctx.isAnimating()) {
         bend = 0;
@@ -654,7 +795,7 @@ var webglRenderer = (options = {}) => ({
     );
     ctx.addTeardown(
       ctx.on("dragstart", () => {
-        takeCapture();
+        queueMicrotask(takeCapture);
         wake();
       })
     );
@@ -671,6 +812,14 @@ var webglRenderer = (options = {}) => ({
       subtree: true,
       characterData: true
     });
+    const geometryObserver = new MutationObserver(() => {
+      if (!ctx.isDragging()) paint();
+      wake();
+    });
+    geometryObserver.observe(element, {
+      attributes: true,
+      attributeFilter: ["style"]
+    });
     const refreshSurfaceStyle = () => {
       if (disposed) return;
       element.style.background = painted.background;
@@ -689,6 +838,7 @@ var webglRenderer = (options = {}) => ({
     paint();
     return () => {
       contentObserver.disconnect();
+      geometryObserver.disconnect();
       window.removeEventListener("resize", onResize);
       window.removeEventListener("scroll", onResize);
       teardown();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@surdeddd/bottom-sheet",
-  "version": "0.23.1",
+  "version": "0.23.2",
   "description": "Universal, headless bottom sheet — framework-agnostic core with React, Vue 3, Svelte, Solid, Qwik, Preact, Lit and Custom Element adapters. Pointer Events, snap points, momentum, a11y, SSR-safe.",
   "type": "module",
   "license": "MIT",
@@ -315,13 +315,13 @@
     {
       "name": "features (subpath)",
       "path": "dist/features.js",
-      "limit": "2.72 KB",
+      "limit": "2.74 KB",
       "gzip": true
     },
     {
       "name": "webgl renderer (subpath)",
       "path": "dist/webgl.js",
-      "limit": "5 KB",
+      "limit": "5.97 KB",
       "gzip": true
     }
   ],