chart-preview 1.2.0 → 1.3.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # chart-preview
 
+## 1.3.0
+
+### Minor Changes
+
+- fe294b3: Add manual resize functionality to ChartPreview and trigger resize in ChartPreviewPlayer on fullscreen change
+
 ## 1.2.0
 
 ### Minor Changes

package/dist/index.d.ts

@@ -180,6 +180,11 @@ declare class ChartPreview {
     get chartCurrentTimeMs(): number;
     /** Total duration in milliseconds */
     get chartEndTimeMs(): number;
+    /**
+     * Manually triggers a resize of the camera and renderer.
+     * Call this when the container size changes (e.g., entering/exiting fullscreen).
+     */
+    resize(): void;
     /**
      * Cleans up all resources. Call this when discarding the preview.
      * The preview should not be used after calling dispose().

package/dist/index.js

@@ -409,6 +409,17 @@ var _ChartPreview = class {
   get chartEndTimeMs() {
     return this.audioManager.chartEndTimeMs;
   }
+  /**
+   * Manually triggers a resize of the camera and renderer.
+   * Call this when the container size changes (e.g., entering/exiting fullscreen).
+   */
+  resize() {
+    this.camera.triggerResize();
+    this.renderer.triggerResize();
+    if (this.paused) {
+      this.animateFrame(false);
+    }
+  }
   /**
    * Cleans up all resources. Call this when discarding the preview.
    * The preview should not be used after calling dispose().
@@ -496,6 +507,10 @@ var ChartCamera = class extends THREE.PerspectiveCamera {
     this.aspect = width / height;
     this.updateProjectionMatrix();
   }
+  /** Manually trigger a resize update */
+  triggerResize() {
+    this.onResize();
+  }
   dispose() {
     window.removeEventListener("resize", this.resizeListener);
     this.clear();
@@ -518,6 +533,10 @@ var ChartRenderer = class extends THREE.WebGLRenderer {
     const height = this.divContainer.offsetHeight ?? window.innerHeight;
     this.setSize(width, height);
   }
+  /** Manually trigger a resize update */
+  triggerResize() {
+    this.onResize();
+  }
   dispose() {
     window.removeEventListener("resize", this.resizeListener);
     super.dispose();
@@ -1760,6 +1779,13 @@ var ChartPreviewPlayer = class extends HTMLElement {
       this.container.classList.toggle("fullscreen", this._isFullscreen);
       this.fullscreenBtn.innerHTML = this._isFullscreen ? ICONS.fullscreenExit : ICONS.fullscreen;
       this.fullscreenBtn.title = this._isFullscreen ? "Exit fullscreen" : "Enter fullscreen";
+      if (this.chartPreview) {
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            this.chartPreview?.resize();
+          });
+        });
+      }
     };
     this.shadow = this.attachShadow({ mode: "open" });
     this.render();

package/dist/index.mjs

@@ -369,6 +369,17 @@ var _ChartPreview = class {
   get chartEndTimeMs() {
     return this.audioManager.chartEndTimeMs;
   }
+  /**
+   * Manually triggers a resize of the camera and renderer.
+   * Call this when the container size changes (e.g., entering/exiting fullscreen).
+   */
+  resize() {
+    this.camera.triggerResize();
+    this.renderer.triggerResize();
+    if (this.paused) {
+      this.animateFrame(false);
+    }
+  }
   /**
    * Cleans up all resources. Call this when discarding the preview.
    * The preview should not be used after calling dispose().
@@ -456,6 +467,10 @@ var ChartCamera = class extends THREE.PerspectiveCamera {
     this.aspect = width / height;
     this.updateProjectionMatrix();
   }
+  /** Manually trigger a resize update */
+  triggerResize() {
+    this.onResize();
+  }
   dispose() {
     window.removeEventListener("resize", this.resizeListener);
     this.clear();
@@ -478,6 +493,10 @@ var ChartRenderer = class extends THREE.WebGLRenderer {
     const height = this.divContainer.offsetHeight ?? window.innerHeight;
     this.setSize(width, height);
   }
+  /** Manually trigger a resize update */
+  triggerResize() {
+    this.onResize();
+  }
   dispose() {
     window.removeEventListener("resize", this.resizeListener);
     super.dispose();
@@ -1724,6 +1743,13 @@ var ChartPreviewPlayer = class extends HTMLElement {
       this.container.classList.toggle("fullscreen", this._isFullscreen);
       this.fullscreenBtn.innerHTML = this._isFullscreen ? ICONS.fullscreenExit : ICONS.fullscreen;
       this.fullscreenBtn.title = this._isFullscreen ? "Exit fullscreen" : "Enter fullscreen";
+      if (this.chartPreview) {
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            this.chartPreview?.resize();
+          });
+        });
+      }
     };
     this.shadow = this.attachShadow({ mode: "open" });
     this.render();

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "chart-preview",
-	"version": "1.2.0",
+	"version": "1.3.0",
 	"author": "Geo",
 	"license": "MIT",
 	"main": "dist/index.js",

package/src/ChartPreview.ts

@@ -509,6 +509,19 @@ export class ChartPreview {
     return this.audioManager.chartEndTimeMs;
   }
 
+  /**
+   * Manually triggers a resize of the camera and renderer.
+   * Call this when the container size changes (e.g., entering/exiting fullscreen).
+   */
+  resize() {
+    this.camera.triggerResize();
+    this.renderer.triggerResize();
+    // Re-render a frame to immediately show the updated size
+    if (this.paused) {
+      this.animateFrame(false);
+    }
+  }
+
   /**
    * Cleans up all resources. Call this when discarding the preview.
    * The preview should not be used after calling dispose().
@@ -618,6 +631,11 @@ class ChartCamera extends THREE.PerspectiveCamera {
     this.updateProjectionMatrix();
   }
 
+  /** Manually trigger a resize update */
+  triggerResize() {
+    this.onResize();
+  }
+
   dispose() {
     window.removeEventListener("resize", this.resizeListener);
     this.clear();
@@ -642,6 +660,11 @@ class ChartRenderer extends THREE.WebGLRenderer {
     this.setSize(width, height);
   }
 
+  /** Manually trigger a resize update */
+  triggerResize() {
+    this.onResize();
+  }
+
   override dispose() {
     window.removeEventListener("resize", this.resizeListener);
     super.dispose();

package/src/ChartPreviewPlayer.ts

@@ -549,6 +549,18 @@ export class ChartPreviewPlayer extends HTMLElement {
     this.fullscreenBtn.title = this._isFullscreen
       ? "Exit fullscreen"
       : "Enter fullscreen";
+
+    // Trigger resize on the chart preview after a short delay
+    // to ensure the container dimensions have updated
+    if (this.chartPreview) {
+      // Use requestAnimationFrame to ensure DOM has updated
+      requestAnimationFrame(() => {
+        // Double RAF to ensure layout has been recalculated
+        requestAnimationFrame(() => {
+          this.chartPreview?.resize();
+        });
+      });
+    }
   };
 
   private onSeekStart() {