@leeguoo/pwtk-network-debugger 1.3.3 → 1.3.5

package/dist/index.esm.js

@@ -17423,10 +17423,19 @@ class LiquidGlassScene {
     this.mutationObserver = null;
     this.snapshotCanvas = null;
     this.snapshotScale = 1;
+    this.maxSnapshotPixels = 3e6;
+    this.minSnapshotScale = 0.35;
+    this.minSnapshotInterval = 1500;
+    this.lastSnapshotCapture = -Infinity;
     this.capturePromise = null;
     this.snapshotNeedsUpdate = true;
     this.refreshTimeout = null;
     this.destroyed = false;
+    this.interactionActive = false;
+    this.manualInteractionActive = false;
+    this.transientInteractionCount = 0;
+    this.transientInteractionTimers = [];
+    this.pendingBackgroundRefresh = false;
     this.sceneStats = {
       averageFps: 60,
       lowestFps: 60,
@@ -17446,6 +17455,7 @@ class LiquidGlassScene {
     this.markSnapshotDirty = () => {
       if (this.destroyed) return;
       this.snapshotNeedsUpdate = true;
+      this.beginTransientInteraction();
       this.scheduleBackgroundRefresh();
     };
     this.handleDOMChange = () => {
@@ -17601,7 +17611,7 @@ class LiquidGlassScene {
     this.layers.set(id, layer);
     renderer.setUniformProvider(() => this.getDynamicUniforms(layer));
     this.applyPlaceholderBackground(layer);
-    this.refreshLayerBackground(layer).catch((err) => {
+    this.refreshLayerBackground(layer, true).catch((err) => {
     });
     return layer;
   }
@@ -17708,6 +17718,7 @@ class LiquidGlassScene {
       layer.borderRadius = this.getBorderRadius(layer.element);
       this.applyPlaceholderBackground(layer);
     });
+    this.beginTransientInteraction(600);
     this.scheduleBackgroundRefresh();
   }
   updateBackgrounds(forceSnapshot = false) {
@@ -17772,6 +17783,11 @@ class LiquidGlassScene {
       }
       this.idleCallbackId = null;
     }
+    this.transientInteractionTimers.forEach((id) => window.clearTimeout(id));
+    this.transientInteractionTimers = [];
+    this.transientInteractionCount = 0;
+    this.manualInteractionActive = false;
+    this.interactionActive = false;
     window.removeEventListener("scroll", this.markSnapshotDirty);
     window.removeEventListener("resize", this.markSnapshotDirty);
     document.removeEventListener("visibilitychange", this.handleVisibilityChange);
@@ -17809,6 +17825,42 @@ class LiquidGlassScene {
   enableAutoQuality(enabled) {
     this.autoQualityEnabled = enabled;
   }
+  setInteractionState(active) {
+    if (this.destroyed) return;
+    if (active) {
+      if (this.manualInteractionActive) return;
+      this.manualInteractionActive = true;
+    } else {
+      if (!this.manualInteractionActive) return;
+      this.manualInteractionActive = false;
+    }
+    this.updateInteractionState();
+  }
+  beginTransientInteraction(duration2 = 400) {
+    if (this.destroyed) return;
+    this.transientInteractionCount++;
+    this.updateInteractionState();
+    const timerId = window.setTimeout(() => {
+      this.transientInteractionTimers = this.transientInteractionTimers.filter((id) => id !== timerId);
+      if (this.destroyed) return;
+      this.transientInteractionCount = Math.max(0, this.transientInteractionCount - 1);
+      this.updateInteractionState();
+    }, duration2);
+    this.transientInteractionTimers.push(timerId);
+  }
+  updateInteractionState() {
+    const wasActive = this.interactionActive;
+    this.interactionActive = this.manualInteractionActive || this.transientInteractionCount > 0;
+    if (this.interactionActive && !wasActive) {
+      if (this.pendingBackgroundRefresh || this.snapshotNeedsUpdate) {
+        this.updateBackgrounds();
+      }
+    } else if (!this.interactionActive && wasActive) {
+      if (this.pendingBackgroundRefresh || this.snapshotNeedsUpdate) {
+        this.scheduleBackgroundRefresh(true);
+      }
+    }
+  }
   applyPlaceholderBackground(layer) {
     const rect = layer.element.getBoundingClientRect();
     const width = Math.max(1, Math.round(rect.width || layer.canvas.clientWidth || 1));
@@ -17852,13 +17904,63 @@ class LiquidGlassScene {
   }
   async refreshLayerBackground(layer, forceSnapshot = false) {
     const startTime = performance.now();
+    if (!forceSnapshot && !this.interactionActive) {
+      this.pendingBackgroundRefresh = true;
+      return;
+    }
     await this.ensurePageSnapshot(forceSnapshot);
     if (!this.snapshotCanvas) return;
     layer.renderer.setBackgroundTexture(this.snapshotCanvas);
+    this.pendingBackgroundRefresh = false;
     const refreshTime = performance.now() - startTime;
     this.sceneStats.backgroundRefreshCount++;
     this.sceneStats.backgroundRefreshTime = refreshTime;
   }
+  calculateSnapshotScale() {
+    if (typeof document === "undefined" || typeof window === "undefined") {
+      return 1;
+    }
+    const doc = document.documentElement;
+    const body = document.body;
+    const width = Math.max(
+      doc?.scrollWidth ?? 0,
+      body?.scrollWidth ?? 0,
+      window.innerWidth || 0
+    );
+    const height = Math.max(
+      doc?.scrollHeight ?? 0,
+      body?.scrollHeight ?? 0,
+      window.innerHeight || 0
+    );
+    if (width <= 0 || height <= 0) {
+      return 1;
+    }
+    const area = width * height;
+    let scale = area > this.maxSnapshotPixels ? Math.sqrt(this.maxSnapshotPixels / area) : 1;
+    if (!Number.isFinite(scale) || scale <= 0) {
+      scale = 1;
+    }
+    switch (this.performanceMode) {
+      case "low":
+        scale = Math.min(scale, 0.55);
+        break;
+      case "balanced":
+        scale = Math.min(scale, 0.75);
+        break;
+      case "high":
+        scale = Math.min(1, scale * 1.15);
+        break;
+      default:
+        if (this.sceneStats.lowestFps < 45) {
+          scale = Math.min(scale, 0.7);
+        }
+        break;
+    }
+    if (this.layers.size > 1) {
+      scale = Math.min(scale, 0.8);
+    }
+    return Math.max(this.minSnapshotScale, Math.min(1, scale));
+  }
   async ensurePageSnapshot(force = false) {
     if (this.destroyed) return;
     if (this.snapshotCanvas && !this.snapshotNeedsUpdate && !force) return;
@@ -17866,35 +17968,46 @@ class LiquidGlassScene {
       await this.capturePromise;
       return;
     }
-    const scale = 1;
+    if (!force) {
+      const elapsed = performance.now() - this.lastSnapshotCapture;
+      if (elapsed < this.minSnapshotInterval) {
+        await new Promise((resolve) => window.setTimeout(resolve, this.minSnapshotInterval - elapsed));
+      }
+    }
+    const scale = this.calculateSnapshotScale();
     this.capturePromise = html2canvas(document.body, {
       scale,
       backgroundColor: null,
       useCORS: true,
       windowWidth: document.documentElement.scrollWidth,
       windowHeight: document.documentElement.scrollHeight,
+      logging: false,
       ignoreElements: (element) => this.container.contains(element)
     }).then((canvas) => {
       this.snapshotCanvas = canvas;
       this.snapshotScale = scale;
       this.snapshotNeedsUpdate = false;
+      this.lastSnapshotCapture = performance.now();
     }).catch((error) => {
       this.snapshotCanvas = null;
+      this.lastSnapshotCapture = performance.now();
+      this.pendingBackgroundRefresh = true;
     }).finally(() => {
       this.capturePromise = null;
     });
     await this.capturePromise;
   }
-  scheduleBackgroundRefresh() {
+  scheduleBackgroundRefresh(force = false) {
     if (this.refreshTimeout !== null) {
       clearTimeout(this.refreshTimeout);
     }
+    const delay = force ? 16 : 150;
     this.refreshTimeout = window.setTimeout(() => {
       this.refreshTimeout = null;
       if (!this.destroyed) {
-        this.updateBackgrounds();
+        this.updateBackgrounds(force);
       }
-    }, 150);
+    }, delay);
   }
   scheduleBackgroundRefreshIdle() {
     if (this.idleCallbackId !== null) {
@@ -18133,9 +18246,14 @@ const _WebGLManager = class _WebGLManager {
       this.scene.setPreset(this.config.preset);
     }
   }
-  updateBackgrounds() {
+  updateBackgrounds(forceSnapshot = false) {
+    if (this.scene) {
+      this.scene.updateBackgrounds(forceSnapshot);
+    }
+  }
+  setInteractionState(active) {
     if (this.scene) {
-      this.scene.updateBackgrounds();
+      this.scene.setInteractionState(active);
     }
   }
   isWebGLEnabled() {
@@ -18256,7 +18374,7 @@ const _DebugPanel = class _DebugPanel {
     this.container.style.pointerEvents = "auto";
     this.container.innerHTML = `
       <div class="debugger-header">
-        <div class="debugger-title">🔓 PWTK 解密小工具 <span style="font-size: 10px; opacity: 0.7;">by Leo v${"1.3.3"}</span></div>
+        <div class="debugger-title">🔓 PWTK 解密小工具 <span style="font-size: 10px; opacity: 0.7;">by Leo v${"1.3.5"}</span></div>
         <div class="debugger-controls">
           <button class="debugger-btn" data-action="clear" title="清空"><svg class="debugger-icon" viewBox="0 0 24 24"><path fill="currentColor" d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg></button>
           <button class="debugger-btn" data-action="export" title="导出"><svg class="debugger-icon" viewBox="0 0 24 24"><path fill="currentColor" d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg></button>
@@ -18724,7 +18842,7 @@ Created by Leo (@leeguoo)`);
       this.container.style.right = "auto";
       this.container.style.bottom = "auto";
     }
-    this.scheduleWebGLBackgroundUpdate();
+    this.scheduleWebGLBackgroundUpdate(true);
   }
   // 移除 handleToolAction 方法 - 不再需要工具功能
   // 移除 handleParseCurl 方法
@@ -18733,12 +18851,14 @@ Created by Leo (@leeguoo)`);
     this.isDragging = true;
     this.dragStart = { x: e2.clientX, y: e2.clientY };
     this.container.style.transition = "none";
+    this.webglManager?.setInteractionState(true);
   }
   startResize(e2, direction2) {
     this.isResizing = true;
     this.resizeDirection = direction2;
     this.dragStart = { x: e2.clientX, y: e2.clientY };
     this.container.style.transition = "none";
+    this.webglManager?.setInteractionState(true);
   }
   handleMouseMove(e2) {
     if (this.isDragging) {
@@ -18796,11 +18916,12 @@ Created by Leo (@leeguoo)`);
       if (this.isDragging) {
         this.savePosition();
       }
-      this.scheduleWebGLBackgroundUpdate();
+      this.scheduleWebGLBackgroundUpdate(true);
     }
     this.isDragging = false;
     this.isResizing = false;
     this.resizeDirection = "";
+    this.webglManager?.setInteractionState(false);
   }
   handleWindowResize() {
     if (this.resizeTimeout) {
@@ -18855,7 +18976,7 @@ Created by Leo (@leeguoo)`);
         this.container.style.height = `${newHeight}px`;
       }
       this.savePosition();
-      this.scheduleWebGLBackgroundUpdate();
+      this.scheduleWebGLBackgroundUpdate(true);
     }
   }
   show() {
@@ -19304,7 +19425,7 @@ Created by Leo (@leeguoo)`);
         setTimeout(() => {
           this.enableWebGLForRequestItems();
         }, 500);
-        this.scheduleWebGLBackgroundUpdate();
+        this.scheduleWebGLBackgroundUpdate(true);
         logger.debug("✨ WebGL liquid glass effects initialized");
       } else {
         logger.debug("🔄 WebGL initialization failed, using CSS fallback");
@@ -19327,15 +19448,15 @@ Created by Leo (@leeguoo)`);
       }
     });
   }
-  scheduleWebGLBackgroundUpdate() {
+  scheduleWebGLBackgroundUpdate(force = false) {
     if (!this.webglManager) return;
     if (this.webglBackgroundUpdateTimer !== null) {
       window.clearTimeout(this.webglBackgroundUpdateTimer);
     }
-    const delay = this.isDragging || this.isResizing ? 120 : 0;
+    const delay = this.isDragging || this.isResizing ? 120 : force ? 30 : 0;
     this.webglBackgroundUpdateTimer = window.setTimeout(() => {
       this.webglBackgroundUpdateTimer = null;
-      this.webglManager?.updateBackgrounds();
+      this.webglManager?.updateBackgrounds(force);
     }, delay);
   }
   /**
@@ -19408,8 +19529,8 @@ if (typeof window !== "undefined") {
 }
 function loadLiquidGlass() {
   return new Promise((resolve) => {
-    import("./container-Cy51KA7q.mjs").then(() => {
-      return import("./button-Dt1KsQb6.mjs");
+    import("./container-qvHOCG_V.mjs").then(() => {
+      return import("./button-B5OqHDUm.mjs");
     }).then(() => {
       resolve();
     }).catch((error) => {
@@ -19549,7 +19670,7 @@ const _NetworkDebugger = class _NetworkDebugger {
   }
   async checkForUpdates() {
     try {
-      const currentVersion = "1.3.3";
+      const currentVersion = "1.3.5";
       logger.info(`[PWTK Update] Checking for updates... Current version: ${currentVersion}`);
       const response = await fetch("https://registry.npmjs.org/@leeguoo/pwtk-network-debugger/latest");
       const data = await response.json();
@@ -19569,7 +19690,7 @@ const _NetworkDebugger = class _NetworkDebugger {
       logger.error("[PWTK Update] Failed to check for updates:", error);
       return {
         hasUpdate: false,
-        currentVersion: "1.3.3"
+        currentVersion: "1.3.5"
       };
     }
   }