lensfx 0.1.1 → 0.1.3

package/dist/index.js

@@ -1268,6 +1268,418 @@ var QRRefractionRenderer = class {
     gl.deleteTexture(this.paintingColorTexture);
   }
 };
+
+// src/createLens.ts
+var SVG_NS = "http://www.w3.org/2000/svg";
+var nextId = 0;
+function createLens(target, options = {}) {
+  if (typeof document === "undefined") {
+    throw new Error("[lensfx] createLens can only be called in a browser environment.");
+  }
+  const resolved = typeof target === "string" ? document.querySelector(target) : target;
+  if (!resolved) {
+    throw new Error(`[lensfx] Target element "${target}" was not found.`);
+  }
+  const container = resolved;
+  let currentOptions = { ...options };
+  let targetEl = container;
+  if (currentOptions.refractionTarget) {
+    const customTarget = typeof currentOptions.refractionTarget === "string" ? container.querySelector(currentOptions.refractionTarget) || document.querySelector(currentOptions.refractionTarget) : currentOptions.refractionTarget;
+    if (customTarget) {
+      targetEl = customTarget;
+    }
+  }
+  const computedStyle = window.getComputedStyle(container);
+  const originalPosition = container.style.position;
+  if (computedStyle.position === "static") {
+    container.style.position = "relative";
+  }
+  const lensId = `lensfx-${++nextId}-${Math.random().toString(36).substring(2, 7)}`;
+  const filterId = `${lensId}-filter`;
+  const svgEl = document.createElementNS(SVG_NS, "svg");
+  svgEl.setAttribute("class", "lensfx-svg-root");
+  svgEl.setAttribute("aria-hidden", "true");
+  svgEl.style.cssText = "position:absolute;width:0;height:0;overflow:hidden;pointer-events:none;left:0;top:0;";
+  const defsEl = document.createElementNS(SVG_NS, "defs");
+  const filterEl = document.createElementNS(SVG_NS, "filter");
+  filterEl.id = filterId;
+  filterEl.setAttribute("filterUnits", "objectBoundingBox");
+  filterEl.setAttribute("primitiveUnits", "objectBoundingBox");
+  filterEl.setAttribute("color-interpolation-filters", "sRGB");
+  filterEl.setAttribute("x", "0");
+  filterEl.setAttribute("y", "0");
+  filterEl.setAttribute("width", "1");
+  filterEl.setAttribute("height", "1");
+  defsEl.appendChild(filterEl);
+  svgEl.appendChild(defsEl);
+  container.appendChild(svgEl);
+  const overlayEl = document.createElement("div");
+  overlayEl.className = "lensfx-lens-overlay";
+  overlayEl.style.cssText = "position:absolute;top:0;left:0;pointer-events:none;box-sizing:border-box;will-change:transform;";
+  container.appendChild(overlayEl);
+  let mapDataUrl = currentOptions.displacementMapUrl || "";
+  let currentMapSize = currentOptions.mapSize || 256;
+  let generator = createDisplacementMapGeneratorSync(currentMapSize);
+  let feImageEl = null;
+  let currentMaskKey = null;
+  let isDestroyed = false;
+  let curX = currentOptions.x ?? 0.5;
+  let curY = currentOptions.y ?? 0.5;
+  function getDimensions() {
+    const width = currentOptions.width ?? currentOptions.lensW ?? 160;
+    const height = currentOptions.height ?? currentOptions.lensH ?? 100;
+    const radius = currentOptions.radius ?? currentOptions.borderRadius ?? Math.min(width, height) / 4;
+    return { width, height, radius };
+  }
+  function renderMap() {
+    if (isDestroyed) return;
+    if (currentOptions.displacementMapUrl) {
+      mapDataUrl = currentOptions.displacementMapUrl;
+      if (feImageEl) feImageEl.setAttribute("href", mapDataUrl);
+      currentOptions.onMapChange?.(mapDataUrl);
+      return;
+    }
+    const { width, height, radius } = getDimensions();
+    const mapSize = currentOptions.mapSize || 256;
+    if (mapSize !== currentMapSize) {
+      generator.dispose();
+      currentMapSize = mapSize;
+      generator = createDisplacementMapGeneratorSync(currentMapSize);
+    }
+    const depth = currentOptions.depth ?? 2;
+    const result = generator.generate({
+      lensHalfWidth: width / 2,
+      lensHalfHeight: height / 2,
+      borderRadius: radius,
+      depth,
+      sdfBoundary: currentOptions.sdfBoundary ?? true,
+      edgeFalloff: currentOptions.edgeFalloff ?? true,
+      specularRotation: currentOptions.specularRotation ?? 45,
+      glowStrength: currentOptions.glowStrength ?? 0.3,
+      glowSpread: currentOptions.glowSpread ?? 1,
+      glowExponent: currentOptions.glowExponent ?? 1.5,
+      edgeStrength: currentOptions.edgeStrength ?? 0.4,
+      edgeWidth: currentOptions.edgeWidth ?? 3,
+      edgeExponent: 1.5,
+      domeDepth: currentOptions.domeDepth ?? 6,
+      splayAmount: currentOptions.splayAmount ?? 0.8
+    });
+    mapDataUrl = result.dataUrl;
+    if (feImageEl) feImageEl.setAttribute("href", mapDataUrl);
+    currentOptions.onMapChange?.(mapDataUrl);
+  }
+  function buildFilterPipeline() {
+    while (filterEl.firstChild) {
+      filterEl.removeChild(filterEl.firstChild);
+    }
+    currentOptions.depth ?? 2;
+    const chroma = currentOptions.chroma ?? currentOptions.chromaAmount ?? 0.6;
+    const scaleX = currentOptions.scaleX ?? 0.25;
+    const scaleY = currentOptions.scaleY ?? 0.25;
+    const maxScale = Math.max(scaleX, scaleY);
+    const scaleRatioX = maxScale > 0 ? scaleX / maxScale : 0;
+    const scaleRatioY = maxScale > 0 ? scaleY / maxScale : 0;
+    const needsMatrix = scaleRatioX !== 1 || scaleRatioY !== 1;
+    const matrixString = colorMatrixValues(scaleRatioX, scaleRatioY);
+    const feFlood = document.createElementNS(SVG_NS, "feFlood");
+    feFlood.setAttribute("flood-color", "rgb(128,128,128)");
+    feFlood.setAttribute("flood-opacity", "1");
+    feFlood.setAttribute("result", "mapBg");
+    filterEl.appendChild(feFlood);
+    feImageEl = document.createElementNS(SVG_NS, "feImage");
+    feImageEl.setAttribute("href", mapDataUrl);
+    feImageEl.setAttribute("preserveAspectRatio", "none");
+    feImageEl.setAttribute("result", "rawMap");
+    filterEl.appendChild(feImageEl);
+    const feComp = document.createElementNS(SVG_NS, "feComposite");
+    feComp.setAttribute("in", "rawMap");
+    feComp.setAttribute("in2", "mapBg");
+    feComp.setAttribute("operator", "over");
+    feComp.setAttribute("result", "map");
+    filterEl.appendChild(feComp);
+    if (needsMatrix) {
+      const feMat = document.createElementNS(SVG_NS, "feColorMatrix");
+      feMat.setAttribute("in", "map");
+      feMat.setAttribute("type", "matrix");
+      feMat.setAttribute("values", matrixString);
+      feMat.setAttribute("result", "scaledMap");
+      filterEl.appendChild(feMat);
+    }
+    const mapSource = needsMatrix ? "scaledMap" : "map";
+    let sourceGraphic = "SourceGraphic";
+    if (currentOptions.blur && currentOptions.blur > 0) {
+      const feBlur = document.createElementNS(SVG_NS, "feGaussianBlur");
+      feBlur.setAttribute("in", "SourceGraphic");
+      const cRect = container.getBoundingClientRect();
+      const bw = cRect.width > 0 ? currentOptions.blur / cRect.width : 0.01;
+      const bh = cRect.height > 0 ? currentOptions.blur / cRect.height : 0.01;
+      feBlur.setAttribute("stdDeviation", `${bw} ${bh}`);
+      feBlur.setAttribute("result", "blurred");
+      filterEl.appendChild(feBlur);
+      sourceGraphic = "blurred";
+    }
+    if (chroma > 0) {
+      const dispR = document.createElementNS(SVG_NS, "feDisplacementMap");
+      dispR.setAttribute("in", sourceGraphic);
+      dispR.setAttribute("in2", mapSource);
+      dispR.setAttribute("scale", String(maxScale * (1 + 0.2 * chroma)));
+      dispR.setAttribute("xChannelSelector", "R");
+      dispR.setAttribute("yChannelSelector", "G");
+      filterEl.appendChild(dispR);
+      const matR = document.createElementNS(SVG_NS, "feColorMatrix");
+      matR.setAttribute("type", "matrix");
+      matR.setAttribute("values", "1 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0");
+      matR.setAttribute("result", "dispR");
+      filterEl.appendChild(matR);
+      const dispG = document.createElementNS(SVG_NS, "feDisplacementMap");
+      dispG.setAttribute("in", sourceGraphic);
+      dispG.setAttribute("in2", mapSource);
+      dispG.setAttribute("scale", String(maxScale * (1 + 0.1 * chroma)));
+      dispG.setAttribute("xChannelSelector", "R");
+      dispG.setAttribute("yChannelSelector", "G");
+      filterEl.appendChild(dispG);
+      const matG = document.createElementNS(SVG_NS, "feColorMatrix");
+      matG.setAttribute("type", "matrix");
+      matG.setAttribute("values", "0 0 0 0 0  0 1 0 0 0  0 0 0 0 0  0 0 0 1 0");
+      matG.setAttribute("result", "dispG");
+      filterEl.appendChild(matG);
+      const dispB = document.createElementNS(SVG_NS, "feDisplacementMap");
+      dispB.setAttribute("in", sourceGraphic);
+      dispB.setAttribute("in2", mapSource);
+      dispB.setAttribute("scale", String(maxScale));
+      dispB.setAttribute("xChannelSelector", "R");
+      dispB.setAttribute("yChannelSelector", "G");
+      filterEl.appendChild(dispB);
+      const matB = document.createElementNS(SVG_NS, "feColorMatrix");
+      matB.setAttribute("type", "matrix");
+      matB.setAttribute("values", "0 0 0 0 0  0 0 0 0 0  0 0 1 0 0  0 0 0 1 0");
+      matB.setAttribute("result", "dispB");
+      filterEl.appendChild(matB);
+      const compRG = document.createElementNS(SVG_NS, "feComposite");
+      compRG.setAttribute("in", "dispR");
+      compRG.setAttribute("in2", "dispG");
+      compRG.setAttribute("operator", "arithmetic");
+      compRG.setAttribute("k1", "0");
+      compRG.setAttribute("k2", "1");
+      compRG.setAttribute("k3", "1");
+      compRG.setAttribute("k4", "0");
+      filterEl.appendChild(compRG);
+      const compRGB = document.createElementNS(SVG_NS, "feComposite");
+      compRGB.setAttribute("in2", "dispB");
+      compRGB.setAttribute("operator", "arithmetic");
+      compRGB.setAttribute("k1", "0");
+      compRGB.setAttribute("k2", "1");
+      compRGB.setAttribute("k3", "1");
+      compRGB.setAttribute("k4", "0");
+      compRGB.setAttribute("result", "lensResult");
+      filterEl.appendChild(compRGB);
+    } else {
+      const dispSingle = document.createElementNS(SVG_NS, "feDisplacementMap");
+      dispSingle.setAttribute("in", sourceGraphic);
+      dispSingle.setAttribute("in2", mapSource);
+      dispSingle.setAttribute("scale", String(maxScale));
+      dispSingle.setAttribute("xChannelSelector", "R");
+      dispSingle.setAttribute("yChannelSelector", "G");
+      dispSingle.setAttribute("result", "lensResult");
+      filterEl.appendChild(dispSingle);
+    }
+    const specStrength = currentOptions.specularStrength ?? 1;
+    if (specStrength > 0) {
+      const specMat = document.createElementNS(SVG_NS, "feColorMatrix");
+      specMat.setAttribute("in", "map");
+      specMat.setAttribute("type", "matrix");
+      specMat.setAttribute("values", "0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 1 0 -0.50196");
+      specMat.setAttribute("result", "specMask");
+      filterEl.appendChild(specMat);
+      const specComp = document.createElementNS(SVG_NS, "feComposite");
+      specComp.setAttribute("in", "specMask");
+      specComp.setAttribute("in2", "lensResult");
+      specComp.setAttribute("operator", "arithmetic");
+      specComp.setAttribute("k1", "0");
+      specComp.setAttribute("k2", String(specStrength));
+      specComp.setAttribute("k3", "1");
+      specComp.setAttribute("k4", "0");
+      specComp.setAttribute("result", "lensResult");
+      filterEl.appendChild(specComp);
+    }
+    const lensMask = document.createElementNS(SVG_NS, "feFlood");
+    lensMask.setAttribute("flood-color", "black");
+    lensMask.setAttribute("flood-opacity", "1");
+    lensMask.setAttribute("result", "lensMask");
+    filterEl.appendChild(lensMask);
+    const holeComp = document.createElementNS(SVG_NS, "feComposite");
+    holeComp.setAttribute("in", "SourceGraphic");
+    holeComp.setAttribute("in2", "lensMask");
+    holeComp.setAttribute("operator", "out");
+    holeComp.setAttribute("result", "holedSG");
+    filterEl.appendChild(holeComp);
+    const finalComp = document.createElementNS(SVG_NS, "feComposite");
+    finalComp.setAttribute("in", "lensResult");
+    finalComp.setAttribute("in2", "holedSG");
+    finalComp.setAttribute("operator", "over");
+    filterEl.appendChild(finalComp);
+  }
+  function updateLayout() {
+    if (isDestroyed) return;
+    const rect = container.getBoundingClientRect();
+    const cw = rect.width || container.clientWidth || 300;
+    const ch = rect.height || container.clientHeight || 200;
+    const { width, height, radius } = getDimensions();
+    const px = curX <= 1 && curX >= 0 ? curX * cw : curX;
+    const py = curY <= 1 && curY >= 0 ? curY * ch : pyCoordinate(curY, ch);
+    function pyCoordinate(val, containerH) {
+      return val <= 1 && val >= 0 ? val * containerH : val;
+    }
+    const lensLeft = px - width / 2;
+    const lensTop = py - height / 2;
+    if (feImageEl && cw > 0 && ch > 0) {
+      feImageEl.setAttribute("x", String(lensLeft / cw));
+      feImageEl.setAttribute("y", String(lensTop / ch));
+      feImageEl.setAttribute("width", String(width / cw));
+      feImageEl.setAttribute("height", String(height / ch));
+    }
+    overlayEl.style.width = `${width}px`;
+    overlayEl.style.height = `${height}px`;
+    overlayEl.style.borderRadius = `${radius}px`;
+    overlayEl.style.transform = `translate3d(${lensLeft}px, ${lensTop}px, 0)`;
+    if (currentOptions.shadow === false) {
+      overlayEl.style.boxShadow = "none";
+    } else if (typeof currentOptions.shadow === "string") {
+      overlayEl.style.boxShadow = currentOptions.shadow;
+    } else {
+      overlayEl.style.boxShadow = "0 8px 32px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.35), inset 0 -1px 1px rgba(0, 0, 0, 0.15)";
+    }
+    if (currentOptions.border === false) {
+      overlayEl.style.border = "none";
+    } else if (typeof currentOptions.border === "string") {
+      overlayEl.style.border = currentOptions.border;
+    } else {
+      overlayEl.style.border = "1px solid rgba(255, 255, 255, 0.2)";
+    }
+    const tintColor = currentOptions.tintColor ?? "rgba(255, 255, 255, 0.05)";
+    overlayEl.style.background = tintColor;
+    const tintBlur = currentOptions.tintBlur ?? 0;
+    if (tintBlur > 0) {
+      const blurCss = `blur(${tintBlur}px)`;
+      overlayEl.style.backdropFilter = blurCss;
+      overlayEl.style.setProperty("-webkit-backdrop-filter", blurCss);
+    } else {
+      overlayEl.style.backdropFilter = "none";
+      overlayEl.style.setProperty("-webkit-backdrop-filter", "none");
+    }
+    const { uri, key } = getSvgMaskDataUri(width, height, radius);
+    if (currentMaskKey !== key) {
+      const maskCss = `url("${uri}")`;
+      overlayEl.style.maskImage = maskCss;
+      overlayEl.style.setProperty("-webkit-mask-image", maskCss);
+      overlayEl.style.maskSize = "100% 100%";
+      overlayEl.style.setProperty("-webkit-mask-size", "100% 100%");
+      currentMaskKey = key;
+    }
+    const filterStyle = `url("#${filterId}")`;
+    if (targetEl.style.filter !== filterStyle) {
+      targetEl.style.filter = filterStyle;
+    }
+  }
+  let isPointerActive = false;
+  const onPointerMove = (e) => {
+    if (!currentOptions.interactive || isDestroyed) return;
+    const rect = container.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    setPosition(x, y);
+  };
+  function setInteractive(interactive) {
+    currentOptions.interactive = interactive;
+    if (interactive && !isPointerActive) {
+      container.addEventListener("pointermove", onPointerMove);
+      isPointerActive = true;
+    } else if (!interactive && isPointerActive) {
+      container.removeEventListener("pointermove", onPointerMove);
+      isPointerActive = false;
+    }
+  }
+  function setPosition(x, y) {
+    curX = x;
+    curY = y;
+    currentOptions.onPositionChange?.(x, y);
+    updateLayout();
+  }
+  function update(newOptions) {
+    if (isDestroyed) return;
+    ({ ...currentOptions });
+    currentOptions = { ...currentOptions, ...newOptions };
+    if (newOptions.x !== void 0) curX = newOptions.x;
+    if (newOptions.y !== void 0) curY = newOptions.y;
+    if (newOptions.interactive !== void 0) {
+      setInteractive(newOptions.interactive);
+    }
+    const needsRegen = newOptions.width !== void 0 || newOptions.lensW !== void 0 || newOptions.height !== void 0 || newOptions.lensH !== void 0 || newOptions.radius !== void 0 || newOptions.borderRadius !== void 0 || newOptions.depth !== void 0 || newOptions.domeDepth !== void 0 || newOptions.specularRotation !== void 0 || newOptions.glowStrength !== void 0 || newOptions.glowSpread !== void 0 || newOptions.edgeStrength !== void 0 || newOptions.edgeWidth !== void 0 || newOptions.splayAmount !== void 0 || newOptions.displacementMapUrl !== void 0 || newOptions.mapSize !== void 0;
+    if (needsRegen) {
+      renderMap();
+    }
+    const needsPipelineRebuild = newOptions.chroma !== void 0 || newOptions.chromaAmount !== void 0 || newOptions.scaleX !== void 0 || newOptions.scaleY !== void 0 || newOptions.specularStrength !== void 0 || newOptions.blur !== void 0;
+    if (needsPipelineRebuild || needsRegen) {
+      buildFilterPipeline();
+    }
+    updateLayout();
+  }
+  let resizeObserver = null;
+  if (typeof ResizeObserver !== "undefined") {
+    resizeObserver = new ResizeObserver(() => {
+      updateLayout();
+    });
+    resizeObserver.observe(container);
+  }
+  renderMap();
+  buildFilterPipeline();
+  updateLayout();
+  if (currentOptions.interactive) {
+    setInteractive(true);
+  }
+  function destroy() {
+    if (isDestroyed) return;
+    isDestroyed = true;
+    if (isPointerActive) {
+      container.removeEventListener("pointermove", onPointerMove);
+      isPointerActive = false;
+    }
+    if (resizeObserver) {
+      resizeObserver.disconnect();
+      resizeObserver = null;
+    }
+    if (targetEl.style.filter.includes(filterId)) {
+      targetEl.style.filter = "";
+    }
+    if (container.style.position === "relative" && originalPosition === "") {
+      container.style.position = "";
+    }
+    if (svgEl.parentNode) {
+      svgEl.parentNode.removeChild(svgEl);
+    }
+    if (overlayEl.parentNode) {
+      overlayEl.parentNode.removeChild(overlayEl);
+    }
+    generator.dispose();
+  }
+  return {
+    el: container,
+    targetEl,
+    svgEl,
+    filterEl,
+    overlayEl,
+    get options() {
+      return currentOptions;
+    },
+    get mapDataUrl() {
+      return mapDataUrl;
+    },
+    setPosition,
+    update,
+    setInteractive,
+    destroy
+  };
+}
 function isMotionValue(val) {
   return typeof val === "object" && val !== null && "get" in val && "on" in val;
 }
@@ -3257,6 +3669,7 @@ exports.VideoRefractionRenderer = VideoRefractionRenderer;
 exports.colorMatrixValues = colorMatrixValues;
 exports.computeDomeConstants = computeDomeConstants;
 exports.createDisplacementMapGeneratorSync = createDisplacementMapGeneratorSync;
+exports.createLens = createLens;
 exports.domeGradient = domeGradient;
 exports.erf = erf;
 exports.generateDisplacementMapAsync = generateDisplacementMapAsync;