glyphdust 0.1.0 → 0.2.0

package/dist/index.cjs

@@ -248,7 +248,6 @@ ${mixChain}
     float s = uSize * sizeVar;
     gl_PointSize = s * uPixelRatio * (1.0 / -mvPosition.z);
     gl_PointSize = clamp(gl_PointSize, 1.0, mix(7.0, 9.0, uForm) * uPixelRatio);
-    gl_PointSize = 10.0; // DEBUG4
   }
 `
   );
@@ -341,10 +340,15 @@ function buildGlyphFromDOM(count, lines, opts) {
     } catch {
     }
   }
-  const ascent = fontSize * (opts.ascentRatio ?? 0.82);
+  const fm = ctx.measureText(lines[0] ?? "M");
+  const fbAsc = fm.fontBoundingBoxAscent;
+  const fbDesc = fm.fontBoundingBoxDescent;
+  const useMetrics = Number.isFinite(fbAsc) && Number.isFinite(fbDesc);
+  const fallbackAscent = fontSize * (opts.ascentRatio ?? 0.82);
   lines.forEach((line, i) => {
     const lineTop = i * lineHeight;
-    ctx.fillText(line, 0, lineTop + (lineHeight - fontSize) / 2 + ascent);
+    const baseline = useMetrics ? lineTop + (lineHeight - (fbAsc + fbDesc)) / 2 + fbAsc : lineTop + (lineHeight - fontSize) / 2 + fallbackAscent;
+    ctx.fillText(line, 0, baseline);
   });
   const { data } = ctx.getImageData(0, 0, cw, ch);
   const pts = [];
@@ -356,8 +360,8 @@ function buildGlyphFromDOM(count, lines, opts) {
   }
   const filled = pts.length / 2;
   if (filled === 0) return null;
-  const vpW = window.innerWidth;
-  const vpH = window.innerHeight;
+  const vpW = opts.viewportW ?? window.innerWidth;
+  const vpH = opts.viewportH ?? window.innerHeight;
   const { worldW, worldH } = viewSizeAtZ0(vpW, vpH, opts.fovDeg, opts.cameraZ);
   const pxToWorld = worldW / vpW;
   const thickness = opts.thickness ?? 0.14;
@@ -525,9 +529,11 @@ function GlyphPoints(props) {
     drag: dragEnabled,
     getProgress,
     timing,
-    resolveRef
+    resolveRef,
+    resolveDomSelector
   } = props;
   const pointsRef = react.useRef(null);
+  const resolveDomElRef = react.useRef(null);
   const matRef = react.useRef(null);
   const { size, gl } = fiber.useThree();
   const pointer = react.useRef({ x: 0, y: 0, active: 0 });
@@ -617,11 +623,93 @@ function GlyphPoints(props) {
     const { worldW: visW } = viewSizeAtZ0(vpW, vpH, cameraFov, cameraZ);
     const rect = computeScreenRect(finalBuf, vpW, vpH, visW);
     if (!rect) return;
-    el.style.left = `${rect.left}px`;
-    el.style.top = `${rect.top}px`;
-    el.style.width = `${rect.width}px`;
-    el.style.height = `${rect.height}px`;
-    el.style.fontSize = `${rect.height * 0.92}px`;
+    const finalKf = keyframes[n - 1];
+    const fontStr = finalKf?.type === "text" && finalKf.font ? finalKf.font : DEFAULT_DENSE_FONT;
+    const fontMatch = fontStr.match(/^\s*(\d+)\s+[\d.]+px\s+(.+)$/);
+    const fontWeight = fontMatch?.[1] ?? "900";
+    const fontFamily = fontMatch?.[2] ?? "sans-serif";
+    const text = timeline.resolveText;
+    const ctx = document.createElement("canvas").getContext("2d", {
+      willReadFrequently: true
+    });
+    let positioned = false;
+    if (ctx && text) {
+      const baseSize = 200;
+      ctx.font = `${fontWeight} ${baseSize}px ${fontFamily}`;
+      const advBase = ctx.measureText(text).width;
+      const pad = Math.ceil(baseSize * 0.6);
+      const cw = Math.ceil(advBase + pad * 2);
+      const ch = Math.ceil(baseSize * 1.8);
+      const oc = document.createElement("canvas");
+      oc.width = cw;
+      oc.height = ch;
+      const octx = oc.getContext("2d", { willReadFrequently: true });
+      if (octx) {
+        const drawX = pad;
+        const drawY = Math.round(ch * 0.72);
+        octx.font = `${fontWeight} ${baseSize}px ${fontFamily}`;
+        octx.textAlign = "left";
+        octx.textBaseline = "alphabetic";
+        octx.fillStyle = "#000";
+        octx.fillText(text, drawX, drawY);
+        const data = octx.getImageData(0, 0, cw, ch).data;
+        let minX = cw;
+        let maxX = 0;
+        let minY = ch;
+        let maxY = 0;
+        let found = 0;
+        for (let y = 0; y < ch; y++) {
+          for (let x = 0; x < cw; x++) {
+            if (data[(y * cw + x) * 4 + 3] > 20) {
+              if (x < minX) minX = x;
+              if (x > maxX) maxX = x;
+              if (y < minY) minY = y;
+              if (y > maxY) maxY = y;
+              found++;
+            }
+          }
+        }
+        if (found > 0) {
+          const fontSize = baseSize * (rect.width / (maxX - minX));
+          const scale = fontSize / baseSize;
+          const inkCenterXFromStart = ((minX + maxX) / 2 - drawX) * scale;
+          const inkCenterYFromBaseline = ((minY + maxY) / 2 - drawY) * scale;
+          ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
+          const fm = ctx.measureText(text);
+          const leading = fontSize - (fm.fontBoundingBoxAscent + fm.fontBoundingBoxDescent);
+          const baselineFromTop = leading / 2 + fm.fontBoundingBoxAscent;
+          const targetCx = rect.left + rect.width / 2;
+          const targetCy = rect.top + rect.height / 2;
+          el.style.display = "block";
+          el.style.textAlign = "left";
+          el.style.whiteSpace = "nowrap";
+          el.style.width = "auto";
+          el.style.height = "auto";
+          el.style.fontFamily = fontFamily;
+          el.style.fontWeight = fontWeight;
+          el.style.fontSize = `${fontSize}px`;
+          el.style.left = `${targetCx - inkCenterXFromStart}px`;
+          el.style.top = `${targetCy - inkCenterYFromBaseline - baselineFromTop}px`;
+          positioned = true;
+        }
+      }
+    }
+    if (!positioned) {
+      const measureSize = 100;
+      let fontSize = rect.height * 0.92;
+      if (ctx && text) {
+        ctx.font = `${fontWeight} ${measureSize}px ${fontFamily}`;
+        const w = ctx.measureText(text).width;
+        if (w > 0) fontSize = measureSize * (rect.width / w);
+      }
+      el.style.left = `${rect.left}px`;
+      el.style.top = `${rect.top}px`;
+      el.style.width = `${rect.width}px`;
+      el.style.height = `${rect.height}px`;
+      el.style.fontFamily = fontFamily;
+      el.style.fontWeight = fontWeight;
+      el.style.fontSize = `${fontSize}px`;
+    }
   };
   const rebuildDomGlyphs = () => {
     keyframes.forEach((kf, i) => {
@@ -629,7 +717,11 @@ function GlyphPoints(props) {
       const next = buildGlyphFromDOM(count, kf.text.split("\n"), {
         selector: kf.domSelector,
         fovDeg: cameraFov,
-        cameraZ
+        cameraZ,
+        // 粒子がレンダリングされる canvas の実寸（CSS px）。
+        // window.innerWidth だとスクロールバー分ずれるため size を使う。
+        viewportW: size.width,
+        viewportH: size.height
       });
       if (!next) return;
       const attr = built.geo.getAttribute(glyphPositionAttribute(i));
@@ -742,6 +834,7 @@ function GlyphPoints(props) {
     guardRef.current = guard;
     const swapped = raw >= timeline.swapAt ? 1 : 0;
     const resolve = timeline.hasResolve ? smooth(0.9, 0.98, raw) : 0;
+    const textReveal = timeline.hasResolve ? smooth(0.92, 1, raw) : 0;
     u.uTime.value = state.clock.elapsedTime;
     u.uStage.value = s;
     u.uForm.value = form;
@@ -769,8 +862,16 @@ function GlyphPoints(props) {
     rot.current.x = THREE__namespace.MathUtils.lerp(rot.current.x, 0, 0.04 + guard * 0.14);
     p.rotation.x = rot.current.x;
     p.rotation.y = rot.current.y;
-    const overlay = resolveRef?.current;
-    if (overlay && timeline.hasResolve) overlay.style.opacity = String(resolve);
+    if (timeline.hasResolve) {
+      let target = resolveRef?.current ?? null;
+      if (!target && resolveDomSelector) {
+        if (!resolveDomElRef.current) {
+          resolveDomElRef.current = document.querySelector(resolveDomSelector);
+        }
+        target = resolveDomElRef.current;
+      }
+      if (target) target.style.opacity = String(textReveal);
+    }
   });
   return /* @__PURE__ */ jsxRuntime.jsx("points", { ref: pointsRef, geometry: built.geo, frustumCulled: false, children: /* @__PURE__ */ jsxRuntime.jsx(
     "shaderMaterial",
@@ -858,6 +959,8 @@ function GlyphDust(props) {
   const dragEnabled = interaction?.drag ?? true;
   const finalKf = keyframes[keyframes.length - 1];
   const hasResolve = finalKf?.type === "text" && finalKf.resolveToDom === true;
+  const resolveDomSelector = finalKf?.type === "text" && finalKf.resolveToDom === true && finalKf.domSelector ? finalKf.domSelector : void 0;
+  const useOwnOverlay = hasResolve && !resolveDomSelector;
   const resolveText = finalKf?.type === "text" ? finalKf.text.replace(/\n/g, " ") : "";
   if (reduced || !webgl) {
     return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fallback });
@@ -883,12 +986,13 @@ function GlyphDust(props) {
             drag: dragEnabled,
             getProgress,
             timing,
-            resolveRef: hasResolve ? resolveRef : void 0
+            resolveRef: useOwnOverlay ? resolveRef : void 0,
+            resolveDomSelector
           }
         )
       }
     ),
-    hasResolve ? /* @__PURE__ */ jsxRuntime.jsx(
+    useOwnOverlay ? /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         ref: resolveRef,