vireglass 2.0.0 → 2.1.0

package/dist/dom.cjs

@@ -438,36 +438,34 @@ function smin(a, b, k) {
   const h = Math.min(Math.max(0.5 + 0.5 * (b - a) / k, 0), 1);
   return b + (a - b) * h - k * h * (1 - h);
 }
-function sceneDistance(x, y, w, h, r, smoothing = 0, b, c) {
-  const a = sdfRoundedRect(x, y, w, h, r);
-  if (smoothing <= 0 || !b || b.width <= 0) return a;
-  const db = sdfRoundedRect(x - b.offsetX, y - b.offsetY, b.width, b.height, b.cornerRadius);
-  const ab = smin(a, db, smoothing);
-  if (!c || c.width <= 0) return ab;
-  const dc = sdfRoundedRect(x - c.offsetX, y - c.offsetY, c.width, c.height, c.cornerRadius);
-  return smin(ab, dc, smoothing);
-}
-function sceneGradient(x, y, w, h, r, smoothing = 0, b, c) {
-  const na = sdfRoundedRectGradient(x, y, w, h, r);
-  if (smoothing <= 0 || !b || b.width <= 0) return na;
-  const bx = x - b.offsetX;
-  const by = y - b.offsetY;
-  const da = sdfRoundedRect(x, y, w, h, r);
-  const db = sdfRoundedRect(bx, by, b.width, b.height, b.cornerRadius);
-  const hb = Math.min(Math.max(0.5 + 0.5 * (db - da) / smoothing, 0), 1);
-  const nb = sdfRoundedRectGradient(bx, by, b.width, b.height, b.cornerRadius);
-  let gx = nb[0] + (na[0] - nb[0]) * hb;
-  let gy = nb[1] + (na[1] - nb[1]) * hb;
-  if (c && c.width > 0) {
-    const cx = x - c.offsetX;
-    const cy = y - c.offsetY;
-    const dab = smin(da, db, smoothing);
-    const dc = sdfRoundedRect(cx, cy, c.width, c.height, c.cornerRadius);
-    const hc = Math.min(Math.max(0.5 + 0.5 * (dc - dab) / smoothing, 0), 1);
-    const nc = sdfRoundedRectGradient(cx, cy, c.width, c.height, c.cornerRadius);
-    gx = nc[0] + (gx - nc[0]) * hc;
-    gy = nc[1] + (gy - nc[1]) * hc;
+function sceneDistance(x, y, w, h, r, smoothing = 0, ...shapes) {
+  let d = sdfRoundedRect(x, y, w, h, r);
+  if (smoothing <= 0) return d;
+  for (const s of shapes) {
+    if (!s || s.width <= 0) continue;
+    d = smin(d, sdfRoundedRect(x - s.offsetX, y - s.offsetY, s.width, s.height, s.cornerRadius), smoothing);
   }
+  return d;
+}
+function sceneGradient(x, y, w, h, r, smoothing = 0, ...shapes) {
+  let d = sdfRoundedRect(x, y, w, h, r);
+  let [gx, gy] = sdfRoundedRectGradient(x, y, w, h, r);
+  let blended = false;
+  if (smoothing > 0) {
+    for (const s of shapes) {
+      if (!s || s.width <= 0) continue;
+      const sx = x - s.offsetX;
+      const sy = y - s.offsetY;
+      const ds = sdfRoundedRect(sx, sy, s.width, s.height, s.cornerRadius);
+      const weight = Math.min(Math.max(0.5 + 0.5 * (ds - d) / smoothing, 0), 1);
+      const [nx, ny] = sdfRoundedRectGradient(sx, sy, s.width, s.height, s.cornerRadius);
+      gx = nx + (gx - nx) * weight;
+      gy = ny + (gy - ny) * weight;
+      d = smin(d, ds, smoothing);
+      blended = true;
+    }
+  }
+  if (!blended) return [gx, gy];
   gx += EPSILON;
   gy += EPSILON;
   const len = Math.hypot(gx, gy) || 1;
@@ -523,6 +521,7 @@ function renderDisplacementPixels(optics, geometry, dpr, state = {}) {
   const rawScale = optics.refraction * thicknessDp(geometry, optics) * SCALE_GAIN;
   const scale = Math.min(rawScale, MAX_SCALE);
   const smoothing = state.smoothing ?? 0;
+  const shapes = [state.morph, state.morph2, ...state.morphs ?? []];
   const data = new Uint8ClampedArray(width * height * 4);
   const halfW = geometry.width / 2;
   const halfH = geometry.height / 2;
@@ -532,7 +531,7 @@ function renderDisplacementPixels(optics, geometry, dpr, state = {}) {
       const x = (px + 0.5) / density - halfW;
       const i = (py * width + px) * 4;
       const [wx, wy] = state.touch ? touchWarp(x, y, state.touch) : [x, y];
-      const sd = sceneDistance(wx, wy, geometry.width, geometry.height, geometry.cornerRadius, smoothing, state.morph, state.morph2);
+      const sd = sceneDistance(wx, wy, geometry.width, geometry.height, geometry.cornerRadius, smoothing, ...shapes);
       const t = Math.min(Math.max((sd + bevel) / bevel, 0), 1);
       if (t <= 0 || scale <= 0) {
         data[i] = 128;
@@ -541,7 +540,7 @@ function renderDisplacementPixels(optics, geometry, dpr, state = {}) {
         data[i + 3] = 255;
         continue;
       }
-      const [gx, gy] = sceneGradient(wx, wy, geometry.width, geometry.height, geometry.cornerRadius, smoothing, state.morph, state.morph2);
+      const [gx, gy] = sceneGradient(wx, wy, geometry.width, geometry.height, geometry.cornerRadius, smoothing, ...shapes);
       const magnitude = bevelProfile(t) * (scale / 2);
       const dx = -gx * magnitude;
       const dy = -gy * magnitude;
@@ -1777,7 +1776,7 @@ function attachGlass(el, opts = {}) {
   }
   function morphState() {
     if (!morph) return {};
-    return { smoothing: morph.smoothing, morph: morph.shape, morph2: morph.shape2 };
+    return { smoothing: morph.smoothing, morph: morph.shape, morph2: morph.shape2, morphs: morph.shapes };
   }
   function morphKey() {
     if (!morph) return "0";