asciify-engine 1.0.10 → 1.0.12

package/dist/index.cjs

@@ -832,7 +832,7 @@ async function asciifyVideo(source, canvas, { fontSize = 10, style = "classic",
     cancelAnimationFrame(animId);
   };
 }
-var EMBED_CDN_VERSION = "1.0.10";
+var EMBED_CDN_VERSION = "1.0.12";
 function buildEmbedOpts(options, rows, cols, width, height, fps, animated) {
   const o = {
     r: rows,
@@ -999,6 +999,107 @@ function renderWaveBackground(ctx, width, height, time, mousePos = { x: 0.5, y:
     }
   }
 }
+function _parseColor(c) {
+  const hex = c.match(/^#([0-9a-f]{3,8})$/i)?.[1];
+  if (hex) {
+    const h = hex.length <= 4 ? hex.split("").map((x) => parseInt(x + x, 16)) : [parseInt(hex.slice(0, 2), 16), parseInt(hex.slice(2, 4), 16), parseInt(hex.slice(4, 6), 16)];
+    return { r: h[0], g: h[1], b: h[2] };
+  }
+  const rgb = c.match(/rgba?\(\s*(\d+)[,\s]+(\d+)[,\s]+(\d+)/i);
+  if (rgb) return { r: +rgb[1], g: +rgb[2], b: +rgb[3] };
+  return null;
+}
+function asciiBackground(target, options = {}) {
+  const {
+    opacity = 0.2,
+    className,
+    zIndex = 0,
+    colorScheme = "auto",
+    color,
+    ...renderOpts
+  } = options;
+  const container = typeof target === "string" ? document.querySelector(target) : target;
+  if (!container) {
+    console.warn("[asciify] asciiBackground: target not found", target);
+    return { destroy: () => {
+    } };
+  }
+  const prevPosition = container.style.position;
+  if (getComputedStyle(container).position === "static") {
+    container.style.position = "relative";
+  }
+  const canvas = document.createElement("canvas");
+  canvas.style.cssText = [
+    "position:absolute",
+    "inset:0",
+    "width:100%",
+    "height:100%",
+    `opacity:${opacity}`,
+    "pointer-events:none",
+    `z-index:${zIndex}`
+  ].join(";");
+  if (className) canvas.className = className;
+  container.prepend(canvas);
+  const ctx = canvas.getContext("2d");
+  const dpr = window.devicePixelRatio || 1;
+  const mouse = { x: 0.5, y: 0.5 };
+  const smoothMouse = { x: 0.5, y: 0.5 };
+  const mq = window.matchMedia("(prefers-color-scheme: light)");
+  const isLight = () => {
+    if (colorScheme === "light") return true;
+    if (colorScheme === "dark") return false;
+    return mq.matches;
+  };
+  let parsedColor = null;
+  if (color) parsedColor = _parseColor(color);
+  const buildOpts = () => ({
+    ...renderOpts,
+    lightMode: renderOpts.lightMode !== void 0 ? renderOpts.lightMode : isLight(),
+    baseColor: parsedColor ? `rgba(${parsedColor.r},${parsedColor.g},${parsedColor.b},{a})` : renderOpts.baseColor
+  });
+  const optsRef = { current: buildOpts() };
+  const onSchemeChange = () => {
+    optsRef.current = buildOpts();
+  };
+  if (colorScheme === "auto") mq.addEventListener("change", onSchemeChange);
+  const resize = () => {
+    const r = container.getBoundingClientRect();
+    canvas.width = r.width * dpr;
+    canvas.height = r.height * dpr;
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+  };
+  resize();
+  const onMouseMove = (e) => {
+    const r = container.getBoundingClientRect();
+    mouse.x = (e.clientX - r.left) / r.width;
+    mouse.y = (e.clientY - r.top) / r.height;
+  };
+  const ro = new ResizeObserver(resize);
+  ro.observe(container);
+  window.addEventListener("mousemove", onMouseMove);
+  let time = 0;
+  let raf = 0;
+  const tick = () => {
+    smoothMouse.x += (mouse.x - smoothMouse.x) * 0.07;
+    smoothMouse.y += (mouse.y - smoothMouse.y) * 0.07;
+    const r = container.getBoundingClientRect();
+    renderWaveBackground(ctx, r.width, r.height, time, smoothMouse, optsRef.current);
+    time += 0.016;
+    raf = requestAnimationFrame(tick);
+  };
+  raf = requestAnimationFrame(tick);
+  return {
+    destroy: () => {
+      cancelAnimationFrame(raf);
+      ro.disconnect();
+      if (colorScheme === "auto") mq.removeEventListener("change", onSchemeChange);
+      window.removeEventListener("mousemove", onMouseMove);
+      canvas.remove();
+      container.style.position = prevPosition;
+    }
+  };
+}
+var mountWaveBackground = asciiBackground;
 
 // src/webgl-engine.ts
 var VERT_SRC = (
@@ -1452,6 +1553,7 @@ exports.ART_STYLE_PRESETS = ART_STYLE_PRESETS;
 exports.CHARSETS = CHARSETS;
 exports.DEFAULT_OPTIONS = DEFAULT_OPTIONS;
 exports.HOVER_PRESETS = HOVER_PRESETS;
+exports.asciiBackground = asciiBackground;
 exports.asciify = asciify;
 exports.asciifyGif = asciifyGif;
 exports.asciifyVideo = asciifyVideo;
@@ -1459,6 +1561,7 @@ exports.generateAnimatedEmbedCode = generateAnimatedEmbedCode;
 exports.generateEmbedCode = generateEmbedCode;
 exports.gifToAsciiFrames = gifToAsciiFrames;
 exports.imageToAsciiFrame = imageToAsciiFrame;
+exports.mountWaveBackground = mountWaveBackground;
 exports.renderFrameToCanvas = renderFrameToCanvas;
 exports.renderWaveBackground = renderWaveBackground;
 exports.tryCreateWebGLRenderer = tryCreateWebGLRenderer;